/*! Hint.css - v1.3.6 - 2015-10-31
* http://kushagragour.in/lab/hint/
* Copyright (c) 2015 Kushagra Gour; Licensed MIT */

/*-------------------------------------*\
	HINT.css - A CSS tooltip library
\*-------------------------------------*/
/**
 * HINT.css is a tooltip library made in pure CSS.
 *
 * Source: https://github.com/chinchang/hint.css
 * Demo: http://kushagragour.in/lab/hint/
 *
 * Release under The MIT License
 *
 */
/**
 * source: hint-core.scss
 *
 * Defines the basic styling for the tooltip.
 * Each tooltip is made of 2 parts:
 * 	1) body (:after)
 * 	2) arrow (:before)
 *
 * Classes added:
 * 	1) hint
 */
.hint, [data-hint] {
  position: relative;
  display: inline-block;
  /**
   * tooltip arrow
   */
  /**
   * tooltip body
   */ }
  .hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
    position: absolute;
    transform: translate3d(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    z-index: 1000000;
    pointer-events: none;
    transition: 0.3s ease;
    transition-delay: 0ms; }
  .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
    visibility: visible;
    opacity: 1; }
  .hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after {
    transition-delay: 100ms; }
  .hint:before, [data-hint]:before {
    content: '';
    position: absolute;
    background: transparent;
    border: 6px solid transparent;
    z-index: 1000001; }
  .hint:after, [data-hint]:after {
    content: attr(data-hint);
    background: #383838;
    color: white;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap; }

[data-hint='']:before, [data-hint='']:after {
  display: none !important; }

/**
 * source: hint-position.scss
 *
 * Defines the positoning logic for the tooltips.
 *
 * Classes added:
 * 	1) hint--top
 * 	2) hint--bottom
 * 	3) hint--left
 * 	4) hint--right
 */
/**
 * set default color for tooltip arrows
 */
.hint--top:before {
  border-top-color: #383838; }

.hint--bottom:before {
  border-bottom-color: #383838; }

.hint--left:before {
  border-left-color: #383838; }

.hint--right:before {
  border-right-color: #383838; }

/**
 * top tooltip
 */
.hint--top:before {
  margin-bottom: -12px; }
.hint--top:after {
  margin-left: -18px; }
.hint--top:before, .hint--top:after {
  bottom: 100%;
  left: 50%; }
.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
  transform: translateY(-8px); }

/**
 * bottom tooltip
 */
.hint--bottom:before {
  margin-top: -12px; }
.hint--bottom:after {
  margin-left: -18px; }
.hint--bottom:before, .hint--bottom:after {
  top: 100%;
  left: 50%; }
.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {
  transform: translateY(8px); }

/**
 * right tooltip
 */
.hint--right:before {
  margin-left: -12px;
  margin-bottom: -6px; }
.hint--right:after {
  margin-bottom: -14px; }
.hint--right:before, .hint--right:after {
  left: 100%;
  bottom: 50%; }
.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before {
  transform: translateX(8px); }

/**
 * left tooltip
 */
.hint--left:before {
  margin-right: -12px;
  margin-bottom: -6px; }
.hint--left:after {
  margin-bottom: -14px; }
.hint--left:before, .hint--left:after {
  right: 100%;
  bottom: 50%; }
.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before {
  transform: translateX(-8px); }

/**
 * source: hint-theme.scss
 *
 * Defines basic theme for tooltips.
 *
 */
.hint, [data-hint] {
  /**
   * tooltip body
   */ }
  .hint:after, [data-hint]:after {
    text-shadow: 0 -1px 0px black;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }

/**
 * source: hint-color-types.scss
 *
 * Contains tooltips of various types based on color differences.
 *
 * Classes added:
 * 	1) hint--error
 * 	2) hint--warning
 * 	3) hint--info
 * 	4) hint--success
 *
 */
/**
 * Error
 */
.hint--error:after {
  background-color: #b34e4d;
  text-shadow: 0 -1px 0px #592726; }
.hint--error.hint--top:before {
  border-top-color: #b34e4d; }
.hint--error.hint--bottom:before {
  border-bottom-color: #b34e4d; }
.hint--error.hint--left:before {
  border-left-color: #b34e4d; }
.hint--error.hint--right:before {
  border-right-color: #b34e4d; }

/**
 * Warning
 */
.hint--warning:after {
  background-color: #c09854;
  text-shadow: 0 -1px 0px #6c5328; }
.hint--warning.hint--top:before {
  border-top-color: #c09854; }
.hint--warning.hint--bottom:before {
  border-bottom-color: #c09854; }
.hint--warning.hint--left:before {
  border-left-color: #c09854; }
.hint--warning.hint--right:before {
  border-right-color: #c09854; }

/**
 * Info
 */
.hint--info:after {
  background-color: #3986ac;
  text-shadow: 0 -1px 0px #193b4d; }
.hint--info.hint--top:before {
  border-top-color: #3986ac; }
.hint--info.hint--bottom:before {
  border-bottom-color: #3986ac; }
.hint--info.hint--left:before {
  border-left-color: #3986ac; }
.hint--info.hint--right:before {
  border-right-color: #3986ac; }

/**
 * Success
 */
.hint--success:after {
  background-color: #458746;
  text-shadow: 0 -1px 0px #1a321a; }
.hint--success.hint--top:before {
  border-top-color: #458746; }
.hint--success.hint--bottom:before {
  border-bottom-color: #458746; }
.hint--success.hint--left:before {
  border-left-color: #458746; }
.hint--success.hint--right:before {
  border-right-color: #458746; }

/**
 * source: hint-always.scss
 *
 * Defines a persisted tooltip which shows always.
 *
 * Classes added:
 * 	1) hint--always
 *
 */
.hint--always:after, .hint--always:before {
  opacity: 1;
  visibility: visible; }
.hint--always.hint--top:after, .hint--always.hint--top:before {
  transform: translateY(-8px); }
.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
  transform: translateY(8px); }
.hint--always.hint--left:after, .hint--always.hint--left:before {
  transform: translateX(-8px); }
.hint--always.hint--right:after, .hint--always.hint--right:before {
  transform: translateX(8px); }

/**
 * source: hint-rounded.scss
 *
 * Defines rounded corner tooltips.
 *
 * Classes added:
 * 	1) hint--rounded
 *
 */
.hint--rounded:after {
  border-radius: 4px; }

/**
 * source: hint-effects.scss
 *
 * Defines various transition effects for the tooltips.
 *
 * Classes added:
 * 	1) hint--no-animate
 * 	2) hint--bounce
 *
 */
.hint--no-animate:before, .hint--no-animate:after {
  transition-duration: 0ms; }

.hint--bounce:before, .hint--bounce:after {
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
body.stop-scrolling {
  height: 100%;
  overflow: hidden; }

.sweet-overlay {
  background-color: black;
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  /* IE8 */
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  display: none;
  z-index: 100000; }

.sweet-alert {
  background-color: white;
  /*font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  width: 478px;
  padding: 17px;
  /*border-radius: 5px;*/
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -256px;
  margin-top: -200px;
  overflow: hidden;
  display: none;
  z-index: 10000000; }
  @media all and (max-width: 540px) {
    .sweet-alert {
      width: auto;
      max-width: 500px;
      margin-left: 0;
      margin-right: 0;
      left: 15px;
      right: 15px; } }
.sweet-alert h2 {
  color: #312B2B;
  font-size: 30px;
  text-align: center;
  font-weight: 900;
  text-transform: none;
  position: relative;
  margin: 25px 0;
  padding: 0;
  display: block;
  padding: 0px 50px;
  line-height: 36px;
}
.sweet-alert p {
  color: #333;
  font-size: 18px;
  text-align: center;
  font-weight: 400;
  position: relative;
  text-align: inherit;
  float: none;
  margin: 0;
  padding: 0;
  line-height: normal;
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){
  .sweet-alert h2 {
  font-size: 20px;
  line-height: 22px;
  margin: 5px 0;
  padding: 0px 20px;
  }
  .sweet-alert p {
  font-size: 14px;

  }
   .sweet-alert.trebble_sweet_alert button {
  padding: 8px !important;
  }
}
  .sweet-alert fieldset {
    border: none;
    position: relative; }
  .sweet-alert .sa-error-container {
    background-color: #f1f1f1;
    margin-left: -17px;
    margin-right: -17px;
    overflow: hidden;
    padding: 0 10px;
    max-height: 0;
    webkit-transition: padding 0.15s, max-height 0.15s;
    transition: padding 0.15s, max-height 0.15s; }
    .sweet-alert .sa-error-container.show {
      padding: 10px 0;
      max-height: 100px;
      webkit-transition: padding 0.2s, max-height 0.2s;
      transition: padding 0.25s, max-height 0.25s; }
    .sweet-alert .sa-error-container .icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #ea7d7d;
      color: white;
      line-height: 24px;
      text-align: center;
      margin-right: 3px; }
    .sweet-alert .sa-error-container p {
      display: inline-block; }
  .sweet-alert .sa-input-error {
    position: absolute;
    top: 29px;
    right: 26px;
    width: 20px;
    height: 20px;
    opacity: 0;
    transform: scale(0.5);
    transform-origin: 50% 50%;
    transition: all 0.1s; }
    .sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after {
      content: "";
      width: 20px;
      height: 6px;
      background-color: #f06e57;
      border-radius: 3px;
      position: absolute;
      top: 50%;
      margin-top: -4px;
      left: 50%;
      margin-left: -9px; }
    .sweet-alert .sa-input-error::before {
      transform: rotate(-45deg); }
    .sweet-alert .sa-input-error::after {
      transform: rotate(45deg); }
    .sweet-alert .sa-input-error.show {
      opacity: 1;
      transform: scale(1); }
  .sweet-alert input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #d7d7d7;
    height: 43px;
    margin-top: 10px;
    margin-bottom: 17px;
    font-size: 18px;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
    padding: 0 12px;
    display: none;
    transition: all 0.3s; }
    .sweet-alert input:focus {
      outline: none;
      box-shadow: 0px 0px 3px #c4e6f5;
      border: 1px solid #b4dbed; }
      .sweet-alert input:focus::-moz-placeholder {
        -moz-transition: opacity 0.3s 0.03s ease;
        transition: opacity 0.3s 0.03s ease;
        opacity: 0.5; }
      .sweet-alert input:focus:-ms-input-placeholder {
        -ms-transition: opacity 0.3s 0.03s ease;
        transition: opacity 0.3s 0.03s ease;
        opacity: 0.5; }
      .sweet-alert input:focus::-webkit-input-placeholder {
        -webkit-transition: opacity 0.3s 0.03s ease;
        transition: opacity 0.3s 0.03s ease;
        opacity: 0.5; }
    .sweet-alert input::-moz-placeholder {
      color: #bdbdbd; }
    .sweet-alert input:-ms-input-placeholder {
      color: #bdbdbd; }
    .sweet-alert input::-webkit-input-placeholder {
      color: #bdbdbd; }
  .sweet-alert.show-input input {
    display: block; }
  .sweet-alert .sa-confirm-button-container {
    display: inline-block;
    position: relative; }
  .sweet-alert .la-ball-fall {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -27px;
    margin-top: 4px;
    opacity: 0;
    visibility: hidden; }

      .sweet-alert button {
    background-color: var(--trebble-primary);
    color: white;
    border: none;
    box-shadow: none;
    font-weight: bold;
    font-size: 17px;
    font-weight: 500;
    border-radius: 5px;
    padding: 10px 32px;
    margin: 26px 5px 0 5px;
    cursor: pointer; }

.sweet-alert.trebble_sweet_alert button {
  /*background-color: transparent !important;
  color: #F0A3A0;
  border: 2px solid #F0A3A0;*/
  background-color: var(--trebble-primary)!important;
    color: white;
    border: 2px solid var(--trebble-primary);
  font-size: 17px;
  font-weight: bold;
  /*-webkit-border-radius: 4px;
    border-radius: 5px;*/
  padding: 10px 24px;
  min-width: 100px;
  margin: 26px 5px 0 5px;
  cursor: pointer;
  box-shadow: none !important;
  outline:0 !important;
  border-radius: 0px;
}

.sweet-alert button:hover {
    background-color: #7ecff4;
}


.sweet-alert.trebble_sweet_alert button:hover {
  background-color: #F0A3A0 !important;
  color: white;
  border: 2px solid #F0A3A0;
}

.sweet-alert button:focus {
  /*outline: none;
  box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  */
   /*background-color: #8CD4F5 !important;
  color: white;
  border: 2px solid #8CD4F5;*/
}
.sweet-alert button:active {
  /*outline: none;
  box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  */
   background-color: var(--trebble-primary) !important;
  color: white;
  border: 2px solid var(--trebble-primary);
}
.sweet-alert button.cancel {
  border: 2px solid #C1C1C1;
  color: #C1C1C1;
  background-color: transparent !important;
}

.sweet-alert button.cancel:hover {
  background-color: #b9b9b9 !important;
   border: 2px solid #b9b9b9;
  color: white;
}

.sweet-alert button.cancel:active {
  background-color: #a8a8a8 !important;
  border: 2px solid #a8a8a8;
  color: white;
}

.sweet-alert button.cancel:focus {
  /*box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important;
  */
}
    .sweet-alert button[disabled] {
      opacity: .6;
      cursor: default; }
    .sweet-alert button.confirm[disabled] {
      
      color: transparent;}
      .sweet-alert button.confirm[disabled] ~ .la-ball-fall {
        opacity: 1;
        color: #a8a8a8;
        visibility: visible;
        transition-delay: 0s; }
    .sweet-alert button::-moz-focus-inner {
      border: 0; }
  .sweet-alert[data-has-cancel-button=false] button {
    box-shadow: none !important; }
  .sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
    padding-bottom: 40px; }
  .sweet-alert .sa-icon {
    width: 80px;
    height: 80px;
    border: 4px solid gray;
    border-radius: 40px;
    border-radius: 50%;
    margin: 20px auto;
    padding: 0;
    position: relative;
    box-sizing: content-box; }
    .sweet-alert .sa-icon.sa-error {
      border-color: var(--error); }
      .sweet-alert .sa-icon.sa-error .sa-x-mark {
        position: relative;
        display: block; }
      .sweet-alert .sa-icon.sa-error .sa-line {
        position: absolute;
        height: 5px;
        width: 47px;
        background-color: var(--error);
        display: block;
        top: 37px;
        border-radius: 2px; }
        .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
          transform: rotate(45deg);
          left: 17px; }
        .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
          transform: rotate(-45deg);
          right: 16px; }
    .sweet-alert .sa-icon.sa-warning {
      border-color: var(--warning); }
      .sweet-alert .sa-icon.sa-warning .sa-body {
        position: absolute;
        width: 5px;
        height: 47px;
        left: 50%;
        top: 10px;
        border-radius: 2px;
        margin-left: -2px;
        background-color: var(--warning); }
      .sweet-alert .sa-icon.sa-warning .sa-dot {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-left: -3px;
        left: 50%;
        bottom: 10px;
        background-color: var(--warning); }
    .sweet-alert .sa-icon.sa-info {
      border-color: #C9DAE1; }
      .sweet-alert .sa-icon.sa-info::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 29px;
        left: 50%;
        bottom: 17px;
        border-radius: 2px;
        margin-left: -2px;
        background-color: #C9DAE1; }
      .sweet-alert .sa-icon.sa-info::after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-left: -3px;
        top: 19px;
        background-color: #C9DAE1; }
    .sweet-alert .sa-icon.sa-success {
      border-color: #A5DC86; }
      .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
        content: '';
        border-radius: 40px;
        border-radius: 50%;
        position: absolute;
        width: 60px;
        height: 120px;
        background: white;
        transform: rotate(45deg); }
      .sweet-alert .sa-icon.sa-success::before {
        border-radius: 120px 0 0 120px;
        top: -7px;
        left: -33px;
        transform: rotate(-45deg);
        transform-origin: 60px 60px; }
      .sweet-alert .sa-icon.sa-success::after {
        border-radius: 0 120px 120px 0;
        top: -11px;
        left: 30px;
        transform: rotate(-45deg);
        transform-origin: 0px 60px; }
      .sweet-alert .sa-icon.sa-success .sa-placeholder {
        width: 80px;
        height: 80px;
        border: 4px solid rgba(165, 220, 134, 0.2);
        border-radius: 40px;
        border-radius: 50%;
        box-sizing: content-box;
        position: absolute;
        left: -4px;
        top: -4px;
        z-index: 2; }
      .sweet-alert .sa-icon.sa-success .sa-fix {
        width: 5px;
        height: 90px;
        background-color: white;
        position: absolute;
        left: 28px;
        top: 8px;
        z-index: 1;
        transform: rotate(-45deg); }
      .sweet-alert .sa-icon.sa-success .sa-line {
        height: 5px;
        background-color: #A5DC86;
        display: block;
        border-radius: 2px;
        position: absolute;
        z-index: 2; }
        .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
          width: 25px;
          left: 14px;
          top: 46px;
          transform: rotate(45deg); }
        .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
          width: 47px;
          right: 8px;
          top: 38px;
          transform: rotate(-45deg); }
    .sweet-alert .sa-icon.sa-custom {
      background-size: contain;
      border-radius: 0;
      border: none;
      background-position: center center;
      background-repeat: no-repeat; }

/*
 * Animations
 */

@keyframes showSweetAlert {
  0% {
    transform: scale(0.7);
    -webkit-transform: scale(0.7); }
  45% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05); }
  80% {
    transform: scale(0.95);
    -webkit-transform: scale(0.95); }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1); } }

@keyframes hideSweetAlert {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1); }
  100% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5); } }

@keyframes slideFromTop {
  0% {
    top: 0%; }
  100% {
    top: 50%; } }

@keyframes slideToTop {
  0% {
    top: 50%; }
  100% {
    top: 0%; } }

@keyframes slideFromBottom {
  0% {
    top: 70%; }
  100% {
    top: 50%; } }

@keyframes slideToBottom {
  0% {
    top: 50%; }
  100% {
    top: 70%; } }

.showSweetAlert[data-animation=pop] {
  animation: showSweetAlert 0.3s; }

.showSweetAlert[data-animation=none] {
  animation: none; }

.showSweetAlert[data-animation=slide-from-top] {
  animation: slideFromTop 0.3s; }

.showSweetAlert[data-animation=slide-from-bottom] {
  animation: slideFromBottom 0.3s; }

.hideSweetAlert[data-animation=pop] {
  animation: hideSweetAlert 0.2s; }

.hideSweetAlert[data-animation=none] {
  animation: none; }

.hideSweetAlert[data-animation=slide-from-top] {
  animation: slideToTop 0.4s; }

.hideSweetAlert[data-animation=slide-from-bottom] {
  animation: slideToBottom 0.3s; }

@keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px; }
  54% {
    width: 0;
    left: 1px;
    top: 19px; }
  70% {
    width: 50px;
    left: -8px;
    top: 37px; }
  84% {
    width: 17px;
    left: 21px;
    top: 48px; }
  100% {
    width: 25px;
    left: 14px;
    top: 45px; } }

@keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px; }
  65% {
    width: 0;
    right: 46px;
    top: 54px; }
  84% {
    width: 55px;
    right: 0px;
    top: 35px; }
  100% {
    width: 47px;
    right: 8px;
    top: 38px; } }

@keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  5% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  12% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); }
  100% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); } }

.animateSuccessTip {
  animation: animateSuccessTip 0.75s; }

.animateSuccessLong {
  animation: animateSuccessLong 0.75s; }

.sa-icon.sa-success.animate::after {
  animation: rotatePlaceholder 4.25s ease-in; }

@keyframes animateErrorIcon {
  0% {
    transform: rotateX(100deg);
    -webkit-transform: rotateX(100deg);
    opacity: 0; }
  100% {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1; } }

.animateErrorIcon {
  animation: animateErrorIcon 0.5s; }

@keyframes animateXMark {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  50% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  80% {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    margin-top: -6px; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    margin-top: 0;
    opacity: 1; } }

.animateXMark {
  animation: animateXMark 0.5s; }

@keyframes pulseWarning {
  0% {
    border-color: #F8D486; }
  100% {
    border-color: var(--warning); } }

.pulseWarning {
  animation: pulseWarning 0.75s infinite alternate; }

@keyframes pulseWarningIns {
  0% {
    background-color: #F8D486; }
  100% {
    background-color: var(--warning); } }

.pulseWarningIns {
  animation: pulseWarningIns 0.75s infinite alternate; }

@keyframes rotate-loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

/* Internet Explorer 9 has some special quirks that are fixed here */
/* The icons are not animated. */
/* This file is automatically merged into sweet-alert.min.js through Gulp */
/* Error icon */
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
  -ms-transform: rotate(45deg) \9; }

.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
  -ms-transform: rotate(-45deg) \9; }

/* Success icon */
.sweet-alert .sa-icon.sa-success {
  border-color: transparent\9; }

.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
  -ms-transform: rotate(45deg) \9; }

.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
  -ms-transform: rotate(-45deg) \9; }

/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
.la-ball-fall,
.la-ball-fall > div {
  position: relative;
  box-sizing: border-box; }

.la-ball-fall {
  display: block;
  font-size: 0;
  color: #fff; }

.la-ball-fall.la-dark {
  color: #333; }

.la-ball-fall > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor; }

.la-ball-fall {
  width: 54px;
  height: 18px; }

.la-ball-fall > div {
  width: 10px;
  height: 10px;
  margin: 4px;
  border-radius: 100%;
  opacity: 0;
  animation: ball-fall 1s ease-in-out infinite; }

.la-ball-fall > div:nth-child(1) {
  animation-delay: -200ms; }

.la-ball-fall > div:nth-child(2) {
  animation-delay: -100ms; }

.la-ball-fall > div:nth-child(3) {
  animation-delay: 0ms; }

.la-ball-fall.la-sm {
  width: 26px;
  height: 8px; }

.la-ball-fall.la-sm > div {
  width: 4px;
  height: 4px;
  margin: 2px; }

.la-ball-fall.la-2x {
  width: 108px;
  height: 36px; }

.la-ball-fall.la-2x > div {
  width: 20px;
  height: 20px;
  margin: 8px; }

.la-ball-fall.la-3x {
  width: 162px;
  height: 54px; }

.la-ball-fall.la-3x > div {
  width: 30px;
  height: 30px;
  margin: 12px; }

/*
 * Animation
 */

@keyframes ball-fall {
  0% {
    opacity: 0;
    transform: translateY(-145%); }
  10% {
    opacity: .5; }
  20% {
    opacity: 1;
    transform: translateY(0); }
  80% {
    opacity: 1;
    transform: translateY(0); }
  90% {
    opacity: .5; }
  100% {
    opacity: 0;
    transform: translateY(145%); } }

/*! nouislider - 13.1.4 - 3/20/2019 */
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  touch-action: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
  direction: ltr;
}
.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}
.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}
/* Offset direction
 */
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
  left: auto;
  right: 0;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  width: 0;
}
.noUi-horizontal .noUi-origin {
  height: 0;
}
.noUi-handle {
  backface-visibility: hidden;
  position: absolute;
}
.noUi-touch-area {
  height: 100%;
  width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  transition: transform 0.3s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 18px;
}
.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  left: -17px;
  top: -6px;
}
.noUi-vertical {
  width: 18px;
}
.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  left: -6px;
  top: -17px;
}
html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
  right: -17px;
  left: auto;
}
/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
  border-radius: 3px;
}
.noUi-connect {
  background: #3FB8AF;
}
/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}
.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px;
}
.noUi-handle:after {
  left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}
.noUi-vertical .noUi-handle:after {
  top: 17px;
}
/* Disabled state;
 */
[disabled] .noUi-connect {
  background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}
/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  box-sizing: border-box;
}
.noUi-pips {
  position: absolute;
  color: #999;
}
/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}
/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}
.noUi-marker-sub {
  background: #AAA;
}
.noUi-marker-large {
  background: #AAA;
}
/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}
.noUi-value-horizontal {
  transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
  transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}
/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}
.noUi-value-vertical {
  transform: translate(0, -50%);
  padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
  transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}
.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

/*!
 * Materialize v0.100.2 (http://materializecss.com)
 * Copyright 2014-2017 Materialize
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */
.materialize-red{background-color:#e51c23 !important}.materialize-red-text{color:#e51c23 !important}.materialize-red.lighten-5{background-color:#fdeaeb !important}.materialize-red-text.text-lighten-5{color:#fdeaeb !important}.materialize-red.lighten-4{background-color:#f8c1c3 !important}.materialize-red-text.text-lighten-4{color:#f8c1c3 !important}.materialize-red.lighten-3{background-color:#f3989b !important}.materialize-red-text.text-lighten-3{color:#f3989b !important}.materialize-red.lighten-2{background-color:#ee6e73 !important}.materialize-red-text.text-lighten-2{color:#ee6e73 !important}.materialize-red.lighten-1{background-color:#ea454b !important}.materialize-red-text.text-lighten-1{color:#ea454b !important}.materialize-red.darken-1{background-color:#d0181e !important}.materialize-red-text.text-darken-1{color:#d0181e !important}.materialize-red.darken-2{background-color:#b9151b !important}.materialize-red-text.text-darken-2{color:#b9151b !important}.materialize-red.darken-3{background-color:#a21318 !important}.materialize-red-text.text-darken-3{color:#a21318 !important}.materialize-red.darken-4{background-color:#8b1014 !important}.materialize-red-text.text-darken-4{color:#8b1014 !important}.red{background-color:#F44336 !important}.red-text{color:#F44336 !important}.red.lighten-5{background-color:#FFEBEE !important}.red-text.text-lighten-5{color:#FFEBEE !important}.red.lighten-4{background-color:#FFCDD2 !important}.red-text.text-lighten-4{color:#FFCDD2 !important}.red.lighten-3{background-color:#EF9A9A !important}.red-text.text-lighten-3{color:#EF9A9A !important}.red.lighten-2{background-color:#E57373 !important}.red-text.text-lighten-2{color:#E57373 !important}.red.lighten-1{background-color:#EF5350 !important}.red-text.text-lighten-1{color:#EF5350 !important}.red.darken-1{background-color:#E53935 !important}.red-text.text-darken-1{color:#E53935 !important}.red.darken-2{background-color:#D32F2F !important}.red-text.text-darken-2{color:#D32F2F !important}.red.darken-3{background-color:#C62828 !important}.red-text.text-darken-3{color:#C62828 !important}.red.darken-4{background-color:#B71C1C !important}.red-text.text-darken-4{color:#B71C1C !important}.red.accent-1{background-color:#FF8A80 !important}.red-text.text-accent-1{color:#FF8A80 !important}.red.accent-2{background-color:#FF5252 !important}.red-text.text-accent-2{color:#FF5252 !important}.red.accent-3{background-color:#FF1744 !important}.red-text.text-accent-3{color:#FF1744 !important}.red.accent-4{background-color:#D50000 !important}.red-text.text-accent-4{color:#D50000 !important}.pink{background-color:#e91e63 !important}.pink-text{color:#e91e63 !important}.pink.lighten-5{background-color:#fce4ec !important}.pink-text.text-lighten-5{color:#fce4ec !important}.pink.lighten-4{background-color:#f8bbd0 !important}.pink-text.text-lighten-4{color:#f8bbd0 !important}.pink.lighten-3{background-color:#f48fb1 !important}.pink-text.text-lighten-3{color:#f48fb1 !important}.pink.lighten-2{background-color:#f06292 !important}.pink-text.text-lighten-2{color:#f06292 !important}.pink.lighten-1{background-color:#ec407a !important}.pink-text.text-lighten-1{color:#ec407a !important}.pink.darken-1{background-color:#d81b60 !important}.pink-text.text-darken-1{color:#d81b60 !important}.pink.darken-2{background-color:#c2185b !important}.pink-text.text-darken-2{color:#c2185b !important}.pink.darken-3{background-color:#ad1457 !important}.pink-text.text-darken-3{color:#ad1457 !important}.pink.darken-4{background-color:#880e4f !important}.pink-text.text-darken-4{color:#880e4f !important}.pink.accent-1{background-color:#ff80ab !important}.pink-text.text-accent-1{color:#ff80ab !important}.pink.accent-2{background-color:#ff4081 !important}.pink-text.text-accent-2{color:#ff4081 !important}.pink.accent-3{background-color:#f50057 !important}.pink-text.text-accent-3{color:#f50057 !important}.pink.accent-4{background-color:#c51162 !important}.pink-text.text-accent-4{color:#c51162 !important}.purple{background-color:#9c27b0 !important}.purple-text{color:#9c27b0 !important}.purple.lighten-5{background-color:#f3e5f5 !important}.purple-text.text-lighten-5{color:#f3e5f5 !important}.purple.lighten-4{background-color:#e1bee7 !important}.purple-text.text-lighten-4{color:#e1bee7 !important}.purple.lighten-3{background-color:#ce93d8 !important}.purple-text.text-lighten-3{color:#ce93d8 !important}.purple.lighten-2{background-color:#ba68c8 !important}.purple-text.text-lighten-2{color:#ba68c8 !important}.purple.lighten-1{background-color:#ab47bc !important}.purple-text.text-lighten-1{color:#ab47bc !important}.purple.darken-1{background-color:#8e24aa !important}.purple-text.text-darken-1{color:#8e24aa !important}.purple.darken-2{background-color:#7b1fa2 !important}.purple-text.text-darken-2{color:#7b1fa2 !important}.purple.darken-3{background-color:#6a1b9a !important}.purple-text.text-darken-3{color:#6a1b9a !important}.purple.darken-4{background-color:#4a148c !important}.purple-text.text-darken-4{color:#4a148c !important}.purple.accent-1{background-color:#ea80fc !important}.purple-text.text-accent-1{color:#ea80fc !important}.purple.accent-2{background-color:#e040fb !important}.purple-text.text-accent-2{color:#e040fb !important}.purple.accent-3{background-color:#d500f9 !important}.purple-text.text-accent-3{color:#d500f9 !important}.purple.accent-4{background-color:#a0f !important}.purple-text.text-accent-4{color:#a0f !important}.deep-purple{background-color:#673ab7 !important}.deep-purple-text{color:#673ab7 !important}.deep-purple.lighten-5{background-color:#ede7f6 !important}.deep-purple-text.text-lighten-5{color:#ede7f6 !important}.deep-purple.lighten-4{background-color:#d1c4e9 !important}.deep-purple-text.text-lighten-4{color:#d1c4e9 !important}.deep-purple.lighten-3{background-color:#b39ddb !important}.deep-purple-text.text-lighten-3{color:#b39ddb !important}.deep-purple.lighten-2{background-color:#9575cd !important}.deep-purple-text.text-lighten-2{color:#9575cd !important}.deep-purple.lighten-1{background-color:#7e57c2 !important}.deep-purple-text.text-lighten-1{color:#7e57c2 !important}.deep-purple.darken-1{background-color:#5e35b1 !important}.deep-purple-text.text-darken-1{color:#5e35b1 !important}.deep-purple.darken-2{background-color:#512da8 !important}.deep-purple-text.text-darken-2{color:#512da8 !important}.deep-purple.darken-3{background-color:#4527a0 !important}.deep-purple-text.text-darken-3{color:#4527a0 !important}.deep-purple.darken-4{background-color:#311b92 !important}.deep-purple-text.text-darken-4{color:#311b92 !important}.deep-purple.accent-1{background-color:#b388ff !important}.deep-purple-text.text-accent-1{color:#b388ff !important}.deep-purple.accent-2{background-color:#7c4dff !important}.deep-purple-text.text-accent-2{color:#7c4dff !important}.deep-purple.accent-3{background-color:#651fff !important}.deep-purple-text.text-accent-3{color:#651fff !important}.deep-purple.accent-4{background-color:#6200ea !important}.deep-purple-text.text-accent-4{color:#6200ea !important}.indigo{background-color:#3f51b5 !important}.indigo-text{color:#3f51b5 !important}.indigo.lighten-5{background-color:#e8eaf6 !important}.indigo-text.text-lighten-5{color:#e8eaf6 !important}.indigo.lighten-4{background-color:#c5cae9 !important}.indigo-text.text-lighten-4{color:#c5cae9 !important}.indigo.lighten-3{background-color:#9fa8da !important}.indigo-text.text-lighten-3{color:#9fa8da !important}.indigo.lighten-2{background-color:#7986cb !important}.indigo-text.text-lighten-2{color:#7986cb !important}.indigo.lighten-1{background-color:#5c6bc0 !important}.indigo-text.text-lighten-1{color:#5c6bc0 !important}.indigo.darken-1{background-color:#3949ab !important}.indigo-text.text-darken-1{color:#3949ab !important}.indigo.darken-2{background-color:#303f9f !important}.indigo-text.text-darken-2{color:#303f9f !important}.indigo.darken-3{background-color:#283593 !important}.indigo-text.text-darken-3{color:#283593 !important}.indigo.darken-4{background-color:#1a237e !important}.indigo-text.text-darken-4{color:#1a237e !important}.indigo.accent-1{background-color:#8c9eff !important}.indigo-text.text-accent-1{color:#8c9eff !important}.indigo.accent-2{background-color:#536dfe !important}.indigo-text.text-accent-2{color:#536dfe !important}.indigo.accent-3{background-color:#3d5afe !important}.indigo-text.text-accent-3{color:#3d5afe !important}.indigo.accent-4{background-color:#304ffe !important}.indigo-text.text-accent-4{color:#304ffe !important}.blue{background-color:#2196F3 !important}.blue-text{color:#2196F3 !important}.blue.lighten-5{background-color:#E3F2FD !important}.blue-text.text-lighten-5{color:#E3F2FD !important}.blue.lighten-4{background-color:#BBDEFB !important}.blue-text.text-lighten-4{color:#BBDEFB !important}.blue.lighten-3{background-color:#90CAF9 !important}.blue-text.text-lighten-3{color:#90CAF9 !important}.blue.lighten-2{background-color:#64B5F6 !important}.blue-text.text-lighten-2{color:#64B5F6 !important}.blue.lighten-1{background-color:#42A5F5 !important}.blue-text.text-lighten-1{color:#42A5F5 !important}.blue.darken-1{background-color:#1E88E5 !important}.blue-text.text-darken-1{color:#1E88E5 !important}.blue.darken-2{background-color:#1976D2 !important}.blue-text.text-darken-2{color:#1976D2 !important}.blue.darken-3{background-color:#1565C0 !important}.blue-text.text-darken-3{color:#1565C0 !important}.blue.darken-4{background-color:#0D47A1 !important}.blue-text.text-darken-4{color:#0D47A1 !important}.blue.accent-1{background-color:#82B1FF !important}.blue-text.text-accent-1{color:#82B1FF !important}.blue.accent-2{background-color:#448AFF !important}.blue-text.text-accent-2{color:#448AFF !important}.blue.accent-3{background-color:#2979FF !important}.blue-text.text-accent-3{color:#2979FF !important}.blue.accent-4{background-color:#2962FF !important}.blue-text.text-accent-4{color:#2962FF !important}.light-blue{background-color:#03a9f4 !important}.light-blue-text{color:#03a9f4 !important}.light-blue.lighten-5{background-color:#e1f5fe !important}.light-blue-text.text-lighten-5{color:#e1f5fe !important}.light-blue.lighten-4{background-color:#b3e5fc !important}.light-blue-text.text-lighten-4{color:#b3e5fc !important}.light-blue.lighten-3{background-color:#81d4fa !important}.light-blue-text.text-lighten-3{color:#81d4fa !important}.light-blue.lighten-2{background-color:#4fc3f7 !important}.light-blue-text.text-lighten-2{color:#4fc3f7 !important}.light-blue.lighten-1{background-color:#29b6f6 !important}.light-blue-text.text-lighten-1{color:#29b6f6 !important}.light-blue.darken-1{background-color:#039be5 !important}.light-blue-text.text-darken-1{color:#039be5 !important}.light-blue.darken-2{background-color:#0288d1 !important}.light-blue-text.text-darken-2{color:#0288d1 !important}.light-blue.darken-3{background-color:#0277bd !important}.light-blue-text.text-darken-3{color:#0277bd !important}.light-blue.darken-4{background-color:#01579b !important}.light-blue-text.text-darken-4{color:#01579b !important}.light-blue.accent-1{background-color:#80d8ff !important}.light-blue-text.text-accent-1{color:#80d8ff !important}.light-blue.accent-2{background-color:#40c4ff !important}.light-blue-text.text-accent-2{color:#40c4ff !important}.light-blue.accent-3{background-color:#00b0ff !important}.light-blue-text.text-accent-3{color:#00b0ff !important}.light-blue.accent-4{background-color:#0091ea !important}.light-blue-text.text-accent-4{color:#0091ea !important}.cyan{background-color:#00bcd4 !important}.cyan-text{color:#00bcd4 !important}.cyan.lighten-5{background-color:#e0f7fa !important}.cyan-text.text-lighten-5{color:#e0f7fa !important}.cyan.lighten-4{background-color:#b2ebf2 !important}.cyan-text.text-lighten-4{color:#b2ebf2 !important}.cyan.lighten-3{background-color:#80deea !important}.cyan-text.text-lighten-3{color:#80deea !important}.cyan.lighten-2{background-color:#4dd0e1 !important}.cyan-text.text-lighten-2{color:#4dd0e1 !important}.cyan.lighten-1{background-color:#26c6da !important}.cyan-text.text-lighten-1{color:#26c6da !important}.cyan.darken-1{background-color:#00acc1 !important}.cyan-text.text-darken-1{color:#00acc1 !important}.cyan.darken-2{background-color:#0097a7 !important}.cyan-text.text-darken-2{color:#0097a7 !important}.cyan.darken-3{background-color:#00838f !important}.cyan-text.text-darken-3{color:#00838f !important}.cyan.darken-4{background-color:#006064 !important}.cyan-text.text-darken-4{color:#006064 !important}.cyan.accent-1{background-color:#84ffff !important}.cyan-text.text-accent-1{color:#84ffff !important}.cyan.accent-2{background-color:#18ffff !important}.cyan-text.text-accent-2{color:#18ffff !important}.cyan.accent-3{background-color:#00e5ff !important}.cyan-text.text-accent-3{color:#00e5ff !important}.cyan.accent-4{background-color:#00b8d4 !important}.cyan-text.text-accent-4{color:#00b8d4 !important}.teal{background-color:#009688 !important}.teal-text{color:#009688 !important}.teal.lighten-5{background-color:#e0f2f1 !important}.teal-text.text-lighten-5{color:#e0f2f1 !important}.teal.lighten-4{background-color:#b2dfdb !important}.teal-text.text-lighten-4{color:#b2dfdb !important}.teal.lighten-3{background-color:#80cbc4 !important}.teal-text.text-lighten-3{color:#80cbc4 !important}.teal.lighten-2{background-color:#4db6ac !important}.teal-text.text-lighten-2{color:#4db6ac !important}.teal.lighten-1{background-color:var(--trebble-primary) !important}.teal-text.text-lighten-1{color:var(--trebble-primary) !important}.teal.darken-1{background-color:#00897b !important}.teal-text.text-darken-1{color:#00897b !important}.teal.darken-2{background-color:#00796b !important}.teal-text.text-darken-2{color:#00796b !important}.teal.darken-3{background-color:#00695c !important}.teal-text.text-darken-3{color:#00695c !important}.teal.darken-4{background-color:#004d40 !important}.teal-text.text-darken-4{color:#004d40 !important}.teal.accent-1{background-color:#a7ffeb !important}.teal-text.text-accent-1{color:#a7ffeb !important}.teal.accent-2{background-color:#64ffda !important}.teal-text.text-accent-2{color:#64ffda !important}.teal.accent-3{background-color:#1de9b6 !important}.teal-text.text-accent-3{color:#1de9b6 !important}.teal.accent-4{background-color:#00bfa5 !important}.teal-text.text-accent-4{color:#00bfa5 !important}.green{background-color:#4CAF50 !important}.green-text{color:#4CAF50 !important}.green.lighten-5{background-color:#E8F5E9 !important}.green-text.text-lighten-5{color:#E8F5E9 !important}.green.lighten-4{background-color:#C8E6C9 !important}.green-text.text-lighten-4{color:#C8E6C9 !important}.green.lighten-3{background-color:#A5D6A7 !important}.green-text.text-lighten-3{color:#A5D6A7 !important}.green.lighten-2{background-color:#81C784 !important}.green-text.text-lighten-2{color:#81C784 !important}.green.lighten-1{background-color:#66BB6A !important}.green-text.text-lighten-1{color:#66BB6A !important}.green.darken-1{background-color:#43A047 !important}.green-text.text-darken-1{color:#43A047 !important}.green.darken-2{background-color:#388E3C !important}.green-text.text-darken-2{color:#388E3C !important}.green.darken-3{background-color:#2E7D32 !important}.green-text.text-darken-3{color:#2E7D32 !important}.green.darken-4{background-color:#1B5E20 !important}.green-text.text-darken-4{color:#1B5E20 !important}.green.accent-1{background-color:#B9F6CA !important}.green-text.text-accent-1{color:#B9F6CA !important}.green.accent-2{background-color:#69F0AE !important}.green-text.text-accent-2{color:#69F0AE !important}.green.accent-3{background-color:#00E676 !important}.green-text.text-accent-3{color:#00E676 !important}.green.accent-4{background-color:#00C853 !important}.green-text.text-accent-4{color:#00C853 !important}.light-green{background-color:#8bc34a !important}.light-green-text{color:#8bc34a !important}.light-green.lighten-5{background-color:#f1f8e9 !important}.light-green-text.text-lighten-5{color:#f1f8e9 !important}.light-green.lighten-4{background-color:#dcedc8 !important}.light-green-text.text-lighten-4{color:#dcedc8 !important}.light-green.lighten-3{background-color:#c5e1a5 !important}.light-green-text.text-lighten-3{color:#c5e1a5 !important}.light-green.lighten-2{background-color:#aed581 !important}.light-green-text.text-lighten-2{color:#aed581 !important}.light-green.lighten-1{background-color:#9ccc65 !important}.light-green-text.text-lighten-1{color:#9ccc65 !important}.light-green.darken-1{background-color:#7cb342 !important}.light-green-text.text-darken-1{color:#7cb342 !important}.light-green.darken-2{background-color:#689f38 !important}.light-green-text.text-darken-2{color:#689f38 !important}.light-green.darken-3{background-color:#558b2f !important}.light-green-text.text-darken-3{color:#558b2f !important}.light-green.darken-4{background-color:#33691e !important}.light-green-text.text-darken-4{color:#33691e !important}.light-green.accent-1{background-color:#ccff90 !important}.light-green-text.text-accent-1{color:#ccff90 !important}.light-green.accent-2{background-color:#b2ff59 !important}.light-green-text.text-accent-2{color:#b2ff59 !important}.light-green.accent-3{background-color:#76ff03 !important}.light-green-text.text-accent-3{color:#76ff03 !important}.light-green.accent-4{background-color:#64dd17 !important}.light-green-text.text-accent-4{color:#64dd17 !important}.lime{background-color:#cddc39 !important}.lime-text{color:#cddc39 !important}.lime.lighten-5{background-color:#f9fbe7 !important}.lime-text.text-lighten-5{color:#f9fbe7 !important}.lime.lighten-4{background-color:#f0f4c3 !important}.lime-text.text-lighten-4{color:#f0f4c3 !important}.lime.lighten-3{background-color:#e6ee9c !important}.lime-text.text-lighten-3{color:#e6ee9c !important}.lime.lighten-2{background-color:#dce775 !important}.lime-text.text-lighten-2{color:#dce775 !important}.lime.lighten-1{background-color:#d4e157 !important}.lime-text.text-lighten-1{color:#d4e157 !important}.lime.darken-1{background-color:#c0ca33 !important}.lime-text.text-darken-1{color:#c0ca33 !important}.lime.darken-2{background-color:#afb42b !important}.lime-text.text-darken-2{color:#afb42b !important}.lime.darken-3{background-color:#9e9d24 !important}.lime-text.text-darken-3{color:#9e9d24 !important}.lime.darken-4{background-color:#827717 !important}.lime-text.text-darken-4{color:#827717 !important}.lime.accent-1{background-color:#f4ff81 !important}.lime-text.text-accent-1{color:#f4ff81 !important}.lime.accent-2{background-color:#eeff41 !important}.lime-text.text-accent-2{color:#eeff41 !important}.lime.accent-3{background-color:#c6ff00 !important}.lime-text.text-accent-3{color:#c6ff00 !important}.lime.accent-4{background-color:#aeea00 !important}.lime-text.text-accent-4{color:#aeea00 !important}.yellow{background-color:#ffeb3b !important}.yellow-text{color:#ffeb3b !important}.yellow.lighten-5{background-color:#fffde7 !important}.yellow-text.text-lighten-5{color:#fffde7 !important}.yellow.lighten-4{background-color:#fff9c4 !important}.yellow-text.text-lighten-4{color:#fff9c4 !important}.yellow.lighten-3{background-color:#fff59d !important}.yellow-text.text-lighten-3{color:#fff59d !important}.yellow.lighten-2{background-color:#fff176 !important}.yellow-text.text-lighten-2{color:#fff176 !important}.yellow.lighten-1{background-color:#ffee58 !important}.yellow-text.text-lighten-1{color:#ffee58 !important}.yellow.darken-1{background-color:#fdd835 !important}.yellow-text.text-darken-1{color:#fdd835 !important}.yellow.darken-2{background-color:#fbc02d !important}.yellow-text.text-darken-2{color:#fbc02d !important}.yellow.darken-3{background-color:#f9a825 !important}.yellow-text.text-darken-3{color:#f9a825 !important}.yellow.darken-4{background-color:#f57f17 !important}.yellow-text.text-darken-4{color:#f57f17 !important}.yellow.accent-1{background-color:#ffff8d !important}.yellow-text.text-accent-1{color:#ffff8d !important}.yellow.accent-2{background-color:#ff0 !important}.yellow-text.text-accent-2{color:#ff0 !important}.yellow.accent-3{background-color:#ffea00 !important}.yellow-text.text-accent-3{color:#ffea00 !important}.yellow.accent-4{background-color:#ffd600 !important}.yellow-text.text-accent-4{color:#ffd600 !important}.amber{background-color:#ffc107 !important}.amber-text{color:#ffc107 !important}.amber.lighten-5{background-color:#fff8e1 !important}.amber-text.text-lighten-5{color:#fff8e1 !important}.amber.lighten-4{background-color:#ffecb3 !important}.amber-text.text-lighten-4{color:#ffecb3 !important}.amber.lighten-3{background-color:#ffe082 !important}.amber-text.text-lighten-3{color:#ffe082 !important}.amber.lighten-2{background-color:#ffd54f !important}.amber-text.text-lighten-2{color:#ffd54f !important}.amber.lighten-1{background-color:#ffca28 !important}.amber-text.text-lighten-1{color:#ffca28 !important}.amber.darken-1{background-color:#ffb300 !important}.amber-text.text-darken-1{color:#ffb300 !important}.amber.darken-2{background-color:#ffa000 !important}.amber-text.text-darken-2{color:#ffa000 !important}.amber.darken-3{background-color:#ff8f00 !important}.amber-text.text-darken-3{color:#ff8f00 !important}.amber.darken-4{background-color:#ff6f00 !important}.amber-text.text-darken-4{color:#ff6f00 !important}.amber.accent-1{background-color:#ffe57f !important}.amber-text.text-accent-1{color:#ffe57f !important}.amber.accent-2{background-color:#ffd740 !important}.amber-text.text-accent-2{color:#ffd740 !important}.amber.accent-3{background-color:#ffc400 !important}.amber-text.text-accent-3{color:#ffc400 !important}.amber.accent-4{background-color:#ffab00 !important}.amber-text.text-accent-4{color:#ffab00 !important}.orange{background-color:#ff9800 !important}.orange-text{color:#ff9800 !important}.orange.lighten-5{background-color:#fff3e0 !important}.orange-text.text-lighten-5{color:#fff3e0 !important}.orange.lighten-4{background-color:#ffe0b2 !important}.orange-text.text-lighten-4{color:#ffe0b2 !important}.orange.lighten-3{background-color:#ffcc80 !important}.orange-text.text-lighten-3{color:#ffcc80 !important}.orange.lighten-2{background-color:#ffb74d !important}.orange-text.text-lighten-2{color:#ffb74d !important}.orange.lighten-1{background-color:#ffa726 !important}.orange-text.text-lighten-1{color:#ffa726 !important}.orange.darken-1{background-color:#fb8c00 !important}.orange-text.text-darken-1{color:#fb8c00 !important}.orange.darken-2{background-color:#f57c00 !important}.orange-text.text-darken-2{color:#f57c00 !important}.orange.darken-3{background-color:#ef6c00 !important}.orange-text.text-darken-3{color:#ef6c00 !important}.orange.darken-4{background-color:#e65100 !important}.orange-text.text-darken-4{color:#e65100 !important}.orange.accent-1{background-color:#ffd180 !important}.orange-text.text-accent-1{color:#ffd180 !important}.orange.accent-2{background-color:#ffab40 !important}.orange-text.text-accent-2{color:#ffab40 !important}.orange.accent-3{background-color:#ff9100 !important}.orange-text.text-accent-3{color:#ff9100 !important}.orange.accent-4{background-color:#ff6d00 !important}.orange-text.text-accent-4{color:#ff6d00 !important}.deep-orange{background-color:#ff5722 !important}.deep-orange-text{color:#ff5722 !important}.deep-orange.lighten-5{background-color:#fbe9e7 !important}.deep-orange-text.text-lighten-5{color:#fbe9e7 !important}.deep-orange.lighten-4{background-color:#ffccbc !important}.deep-orange-text.text-lighten-4{color:#ffccbc !important}.deep-orange.lighten-3{background-color:#ffab91 !important}.deep-orange-text.text-lighten-3{color:#ffab91 !important}.deep-orange.lighten-2{background-color:#ff8a65 !important}.deep-orange-text.text-lighten-2{color:#ff8a65 !important}.deep-orange.lighten-1{background-color:#ff7043 !important}.deep-orange-text.text-lighten-1{color:#ff7043 !important}.deep-orange.darken-1{background-color:#f4511e !important}.deep-orange-text.text-darken-1{color:#f4511e !important}.deep-orange.darken-2{background-color:#e64a19 !important}.deep-orange-text.text-darken-2{color:#e64a19 !important}.deep-orange.darken-3{background-color:#d84315 !important}.deep-orange-text.text-darken-3{color:#d84315 !important}.deep-orange.darken-4{background-color:#bf360c !important}.deep-orange-text.text-darken-4{color:#bf360c !important}.deep-orange.accent-1{background-color:#ff9e80 !important}.deep-orange-text.text-accent-1{color:#ff9e80 !important}.deep-orange.accent-2{background-color:#ff6e40 !important}.deep-orange-text.text-accent-2{color:#ff6e40 !important}.deep-orange.accent-3{background-color:#ff3d00 !important}.deep-orange-text.text-accent-3{color:#ff3d00 !important}.deep-orange.accent-4{background-color:#dd2c00 !important}.deep-orange-text.text-accent-4{color:#dd2c00 !important}.brown{background-color:#795548 !important}.brown-text{color:#795548 !important}.brown.lighten-5{background-color:#efebe9 !important}.brown-text.text-lighten-5{color:#efebe9 !important}.brown.lighten-4{background-color:#d7ccc8 !important}.brown-text.text-lighten-4{color:#d7ccc8 !important}.brown.lighten-3{background-color:#bcaaa4 !important}.brown-text.text-lighten-3{color:#bcaaa4 !important}.brown.lighten-2{background-color:#a1887f !important}.brown-text.text-lighten-2{color:#a1887f !important}.brown.lighten-1{background-color:#8d6e63 !important}.brown-text.text-lighten-1{color:#8d6e63 !important}.brown.darken-1{background-color:#6d4c41 !important}.brown-text.text-darken-1{color:#6d4c41 !important}.brown.darken-2{background-color:#5d4037 !important}.brown-text.text-darken-2{color:#5d4037 !important}.brown.darken-3{background-color:#4e342e !important}.brown-text.text-darken-3{color:#4e342e !important}.brown.darken-4{background-color:#3e2723 !important}.brown-text.text-darken-4{color:#3e2723 !important}.blue-grey{background-color:#607d8b !important}.blue-grey-text{color:#607d8b !important}.blue-grey.lighten-5{background-color:#eceff1 !important}.blue-grey-text.text-lighten-5{color:#eceff1 !important}.blue-grey.lighten-4{background-color:#cfd8dc !important}.blue-grey-text.text-lighten-4{color:#cfd8dc !important}.blue-grey.lighten-3{background-color:#b0bec5 !important}.blue-grey-text.text-lighten-3{color:#b0bec5 !important}.blue-grey.lighten-2{background-color:#90a4ae !important}.blue-grey-text.text-lighten-2{color:#90a4ae !important}.blue-grey.lighten-1{background-color:#78909c !important}.blue-grey-text.text-lighten-1{color:#78909c !important}.blue-grey.darken-1{background-color:#546e7a !important}.blue-grey-text.text-darken-1{color:#546e7a !important}.blue-grey.darken-2{background-color:#455a64 !important}.blue-grey-text.text-darken-2{color:#455a64 !important}.blue-grey.darken-3{background-color:#37474f !important}.blue-grey-text.text-darken-3{color:#37474f !important}.blue-grey.darken-4{background-color:#263238 !important}.blue-grey-text.text-darken-4{color:#263238 !important}.grey{background-color:#9e9e9e !important}.grey-text{color:#9e9e9e !important}.grey.lighten-5{background-color:#fafafa !important}.grey-text.text-lighten-5{color:#fafafa !important}.grey.lighten-4{background-color:#f5f5f5 !important}.grey-text.text-lighten-4{color:#f5f5f5 !important}.grey.lighten-3{background-color:#eee !important}.grey-text.text-lighten-3{color:#eee !important}.grey.lighten-2{background-color:#e0e0e0 !important}.grey-text.text-lighten-2{color:#e0e0e0 !important}.grey.lighten-1{background-color:#bdbdbd !important}.grey-text.text-lighten-1{color:#bdbdbd !important}.grey.darken-1{background-color:#757575 !important}.grey-text.text-darken-1{color:#757575 !important}.grey.darken-2{background-color:#616161 !important}.grey-text.text-darken-2{color:#616161 !important}.grey.darken-3{background-color:#424242 !important}.grey-text.text-darken-3{color:#424242 !important}.grey.darken-4{background-color:#212121 !important}.grey-text.text-darken-4{color:#212121 !important}.black{background-color:#000 !important}.black-text{color:#000 !important}.white{background-color:#fff !important}.white-text{color:#fff !important}.transparent{background-color:transparent !important}.transparent-text{color:transparent !important}/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}ul:not(.browser-default){padding-left:0;list-style-type:none}ul:not(.browser-default)>li{list-style-type:none}a{color:#039be5;text-decoration:none;-webkit-tap-highlight-color:transparent}.valign-wrapper{display:flex;align-items:center}.clearfix{clear:both}.z-depth-0{box-shadow:none !important}.z-depth-1,nav,.card-panel,.card,.toast,.btn,.btn-large,.btn-floating,.dropdown-content,.collapsible,.side-nav{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2)}.z-depth-1-half,.btn:hover,.btn-large:hover,.btn-floating:hover{box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.z-depth-2{box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3)}.z-depth-3{box-shadow:0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.3)}.z-depth-4,.modal{box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.3)}.z-depth-5{box-shadow:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.3)}.hoverable{transition:box-shadow .25s}.hoverable:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}.divider{height:1px;overflow:hidden;background-color:#e0e0e0}blockquote{margin:20px 0;padding-left:1.5rem;border-left:5px solid #ee6e73}i{line-height:inherit}i.left{float:left;margin-right:15px}i.right{float:right;margin-left:15px}i.tiny{font-size:1rem}i.small{font-size:2rem}i.medium{font-size:4rem}i.large{font-size:6rem}img.responsive-img,video.responsive-video{max-width:100%;height:auto}.pagination li{display:inline-block;border-radius:2px;text-align:center;vertical-align:top;height:30px}.pagination li a{color:#444;display:inline-block;font-size:1.2rem;padding:0 10px;line-height:30px}.pagination li.active a{color:#fff}.pagination li.active{background-color:#ee6e73}.pagination li.disabled a{cursor:default;color:#999}.pagination li i{font-size:2rem}.pagination li.pages ul li{display:inline-block;float:none}@media only screen and (max-width: 992px){.pagination{width:100%}.pagination li.prev,.pagination li.next{width:10%}.pagination li.pages{width:80%;overflow:hidden;white-space:nowrap}}.breadcrumb{font-size:18px;color:rgba(255,255,255,0.7)}.breadcrumb i,.breadcrumb [class^="mdi-"],.breadcrumb [class*="mdi-"],.breadcrumb i.material-icons{display:inline-block;float:left;font-size:24px}.breadcrumb:before{content:'\E5CC';color:rgba(255,255,255,0.7);vertical-align:top;display:inline-block;font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:25px;margin:0 10px 0 8px;-webkit-font-smoothing:antialiased}.breadcrumb:first-child:before{display:none}.breadcrumb:last-child{color:#fff}.parallax-container{position:relative;overflow:hidden;height:500px}.parallax-container .parallax{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}.parallax-container .parallax img{display:none;position:absolute;left:50%;bottom:0;min-width:100%;min-height:100%;transform:translate3d(0, 0, 0);transform:translateX(-50%)}.pin-top,.pin-bottom{position:relative}.pinned{position:fixed !important}ul.staggered-list li{opacity:0}.fade-in{opacity:0;transform-origin:0 50%}@media only screen and (max-width: 600px){.hide-on-small-only,.hide-on-small-and-down{display:none !important}}@media only screen and (max-width: 992px){.hide-on-med-and-down{display:none !important}}@media only screen and (min-width: 601px){.hide-on-med-and-up{display:none !important}}@media only screen and (min-width: 600px) and (max-width: 992px){.hide-on-med-only{display:none !important}}@media only screen and (min-width: 993px){.hide-on-large-only{display:none !important}.show-on-large{display:block !important}}@media only screen and (min-width: 600px) and (max-width: 992px){.show-on-medium{display:block !important}}@media only screen and (max-width: 600px){.show-on-small{display:block !important}}@media only screen and (min-width: 601px){.show-on-medium-and-up{display:block !important}}@media only screen and (max-width: 992px){.show-on-medium-and-down{display:block !important}}@media only screen and (max-width: 600px){.center-on-small-only{text-align:center}}.page-footer{padding-top:20px;color:#fff;background-color:#ee6e73}.page-footer .footer-copyright{overflow:hidden;min-height:50px;display:flex;align-items:center;padding:10px 0px;color:rgba(255,255,255,0.8);background-color:rgba(51,51,51,0.08)}table,th,td{border:none}table{width:100%;display:table}table.bordered>thead>tr,table.bordered>tbody>tr{border-bottom:1px solid #d0d0d0}table.striped>tbody>tr:nth-child(odd){background-color:#f2f2f2}table.striped>tbody>tr>td{border-radius:0}table.highlight>tbody>tr{transition:background-color .25s ease}table.highlight>tbody>tr:hover{background-color:#f2f2f2}table.centered thead tr th,table.centered tbody tr td{text-align:center}thead{border-bottom:1px solid #d0d0d0}td,th{padding:15px 5px;display:table-cell;text-align:left;vertical-align:middle;border-radius:2px}@media only screen and (max-width: 992px){table.responsive-table{width:100%;border-collapse:collapse;border-spacing:0;display:block;position:relative}table.responsive-table td:empty:before{content:'\00a0'}table.responsive-table th,table.responsive-table td{margin:0;vertical-align:top}table.responsive-table th{text-align:left}table.responsive-table thead{display:block;float:left}table.responsive-table thead tr{display:block;padding:0 10px 0 0}table.responsive-table thead tr th::before{content:"\00a0"}table.responsive-table tbody{display:block;width:auto;position:relative;overflow-x:auto;white-space:nowrap}table.responsive-table tbody tr{display:inline-block;vertical-align:top}table.responsive-table th{display:block;text-align:right}table.responsive-table td{display:block;min-height:1.25em;text-align:left}table.responsive-table tr{padding:0 10px}table.responsive-table thead{border:0;border-right:1px solid #d0d0d0}table.responsive-table.bordered th{border-bottom:0;border-left:0}table.responsive-table.bordered td{border-left:0;border-right:0;border-bottom:0}table.responsive-table.bordered tr{border:0}table.responsive-table.bordered tbody tr{border-right:1px solid #d0d0d0}}.collection{margin:.5rem 0 1rem 0;border:1px solid #e0e0e0;border-radius:2px;overflow:hidden;position:relative}.collection .collection-item{background-color:#fff;line-height:1.5rem;padding:10px 20px;margin:0;border-bottom:1px solid #e0e0e0}.collection .collection-item.avatar{min-height:84px;padding-left:72px;position:relative}.collection .collection-item.avatar:not(.circle-clipper)>.circle,.collection .collection-item.avatar :not(.circle-clipper)>.circle{position:absolute;width:42px;height:42px;overflow:hidden;left:15px;display:inline-block;vertical-align:middle}.collection .collection-item.avatar i.circle{font-size:18px;line-height:42px;color:#fff;background-color:#999;text-align:center}.collection .collection-item.avatar .title{font-size:16px}.collection .collection-item.avatar p{margin:0}.collection .collection-item.avatar .secondary-content{position:absolute;top:16px;right:16px}.collection .collection-item:last-child{border-bottom:none}.collection .collection-item.active{background-color:var(--trebble-primary);color:#eafaf9}.collection .collection-item.active .secondary-content{color:#fff}.collection a.collection-item{display:block;transition:.25s;color:var(--trebble-primary)}.collection a.collection-item:not(.active):hover{background-color:#ddd}.collection.with-header .collection-header{background-color:#fff;border-bottom:1px solid #e0e0e0;padding:10px 20px}.collection.with-header .collection-item{padding-left:30px}.collection.with-header .collection-item.avatar{padding-left:72px}.secondary-content{float:right;color:var(--trebble-primary)}.collapsible .collection{margin:0;border:none}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}.progress{position:relative;height:4px;display:block;width:100%;background-color:#acece6;border-radius:2px;margin:.5rem 0 1rem 0;overflow:hidden}.progress .determinate{position:absolute;top:0;left:0;bottom:0;background-color:var(--trebble-primary);transition:width .3s linear}.progress .indeterminate{background-color:var(--trebble-primary)}.progress .indeterminate:before{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left, right;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.progress .indeterminate:after{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left, right;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}.hide{display:none !important}.left-align{text-align:left}.right-align{text-align:right}.center,.center-align{text-align:center}.left{float:left !important}.right{float:right !important}.no-select,input[type=range],input[type=range]+.thumb{-webkit-user-select:none;-moz-user-select:none;user-select:none}.circle{border-radius:50%}.center-block{display:block;margin-left:auto;margin-right:auto}.truncate{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-padding{padding:0 !important}span.badge{min-width:3rem;padding:0 6px;margin-left:14px;text-align:center;font-size:1rem;line-height:22px;height:22px;color:#757575;float:right;box-sizing:border-box}span.badge.new{font-weight:300;font-size:0.8rem;color:#fff;background-color:var(--trebble-primary);border-radius:2px}span.badge.new:after{content:" new"}span.badge[data-badge-caption]::after{content:" " attr(data-badge-caption)}nav ul a span.badge{display:inline-block;float:none;margin-left:4px;line-height:22px;height:22px;-webkit-font-smoothing:auto}.collection-item span.badge{margin-top:calc(.75rem - 11px)}.collapsible span.badge{margin-left:auto}.side-nav span.badge{margin-top:calc(24px - 11px)}.material-icons{text-rendering:optimizeLegibility;font-feature-settings:'liga'}.container{margin:0 auto;max-width:1280px;width:90%}@media only screen and (min-width: 601px){.container{width:85%}}@media only screen and (min-width: 993px){.container{width:70%}}.container .row{margin-left:-.75rem;margin-right:-.75rem}.section{padding-top:1rem;padding-bottom:1rem}.section.no-pad{padding:0}.section.no-pad-bot{padding-bottom:0}.section.no-pad-top{padding-top:0}.row{margin-left:auto;margin-right:auto;margin-bottom:20px}.row:after{content:"";display:table;clear:both}.row .col{float:left;box-sizing:border-box;padding:0 .75rem;min-height:1px}.row .col[class*="push-"],.row .col[class*="pull-"]{position:relative}.row .col.s1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.s4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.s7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.s10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-s1{margin-left:8.3333333333%}.row .col.pull-s1{right:8.3333333333%}.row .col.push-s1{left:8.3333333333%}.row .col.offset-s2{margin-left:16.6666666667%}.row .col.pull-s2{right:16.6666666667%}.row .col.push-s2{left:16.6666666667%}.row .col.offset-s3{margin-left:25%}.row .col.pull-s3{right:25%}.row .col.push-s3{left:25%}.row .col.offset-s4{margin-left:33.3333333333%}.row .col.pull-s4{right:33.3333333333%}.row .col.push-s4{left:33.3333333333%}.row .col.offset-s5{margin-left:41.6666666667%}.row .col.pull-s5{right:41.6666666667%}.row .col.push-s5{left:41.6666666667%}.row .col.offset-s6{margin-left:50%}.row .col.pull-s6{right:50%}.row .col.push-s6{left:50%}.row .col.offset-s7{margin-left:58.3333333333%}.row .col.pull-s7{right:58.3333333333%}.row .col.push-s7{left:58.3333333333%}.row .col.offset-s8{margin-left:66.6666666667%}.row .col.pull-s8{right:66.6666666667%}.row .col.push-s8{left:66.6666666667%}.row .col.offset-s9{margin-left:75%}.row .col.pull-s9{right:75%}.row .col.push-s9{left:75%}.row .col.offset-s10{margin-left:83.3333333333%}.row .col.pull-s10{right:83.3333333333%}.row .col.push-s10{left:83.3333333333%}.row .col.offset-s11{margin-left:91.6666666667%}.row .col.pull-s11{right:91.6666666667%}.row .col.push-s11{left:91.6666666667%}.row .col.offset-s12{margin-left:100%}.row .col.pull-s12{right:100%}.row .col.push-s12{left:100%}@media only screen and (min-width: 601px){.row .col.m1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.m4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.m7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.m10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-m1{margin-left:8.3333333333%}.row .col.pull-m1{right:8.3333333333%}.row .col.push-m1{left:8.3333333333%}.row .col.offset-m2{margin-left:16.6666666667%}.row .col.pull-m2{right:16.6666666667%}.row .col.push-m2{left:16.6666666667%}.row .col.offset-m3{margin-left:25%}.row .col.pull-m3{right:25%}.row .col.push-m3{left:25%}.row .col.offset-m4{margin-left:33.3333333333%}.row .col.pull-m4{right:33.3333333333%}.row .col.push-m4{left:33.3333333333%}.row .col.offset-m5{margin-left:41.6666666667%}.row .col.pull-m5{right:41.6666666667%}.row .col.push-m5{left:41.6666666667%}.row .col.offset-m6{margin-left:50%}.row .col.pull-m6{right:50%}.row .col.push-m6{left:50%}.row .col.offset-m7{margin-left:58.3333333333%}.row .col.pull-m7{right:58.3333333333%}.row .col.push-m7{left:58.3333333333%}.row .col.offset-m8{margin-left:66.6666666667%}.row .col.pull-m8{right:66.6666666667%}.row .col.push-m8{left:66.6666666667%}.row .col.offset-m9{margin-left:75%}.row .col.pull-m9{right:75%}.row .col.push-m9{left:75%}.row .col.offset-m10{margin-left:83.3333333333%}.row .col.pull-m10{right:83.3333333333%}.row .col.push-m10{left:83.3333333333%}.row .col.offset-m11{margin-left:91.6666666667%}.row .col.pull-m11{right:91.6666666667%}.row .col.push-m11{left:91.6666666667%}.row .col.offset-m12{margin-left:100%}.row .col.pull-m12{right:100%}.row .col.push-m12{left:100%}}@media only screen and (min-width: 993px){.row .col.l1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.l4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.l7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.l10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-l1{margin-left:8.3333333333%}.row .col.pull-l1{right:8.3333333333%}.row .col.push-l1{left:8.3333333333%}.row .col.offset-l2{margin-left:16.6666666667%}.row .col.pull-l2{right:16.6666666667%}.row .col.push-l2{left:16.6666666667%}.row .col.offset-l3{margin-left:25%}.row .col.pull-l3{right:25%}.row .col.push-l3{left:25%}.row .col.offset-l4{margin-left:33.3333333333%}.row .col.pull-l4{right:33.3333333333%}.row .col.push-l4{left:33.3333333333%}.row .col.offset-l5{margin-left:41.6666666667%}.row .col.pull-l5{right:41.6666666667%}.row .col.push-l5{left:41.6666666667%}.row .col.offset-l6{margin-left:50%}.row .col.pull-l6{right:50%}.row .col.push-l6{left:50%}.row .col.offset-l7{margin-left:58.3333333333%}.row .col.pull-l7{right:58.3333333333%}.row .col.push-l7{left:58.3333333333%}.row .col.offset-l8{margin-left:66.6666666667%}.row .col.pull-l8{right:66.6666666667%}.row .col.push-l8{left:66.6666666667%}.row .col.offset-l9{margin-left:75%}.row .col.pull-l9{right:75%}.row .col.push-l9{left:75%}.row .col.offset-l10{margin-left:83.3333333333%}.row .col.pull-l10{right:83.3333333333%}.row .col.push-l10{left:83.3333333333%}.row .col.offset-l11{margin-left:91.6666666667%}.row .col.pull-l11{right:91.6666666667%}.row .col.push-l11{left:91.6666666667%}.row .col.offset-l12{margin-left:100%}.row .col.pull-l12{right:100%}.row .col.push-l12{left:100%}}@media only screen and (min-width: 1201px){.row .col.xl1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.xl4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.xl7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.xl10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-xl1{margin-left:8.3333333333%}.row .col.pull-xl1{right:8.3333333333%}.row .col.push-xl1{left:8.3333333333%}.row .col.offset-xl2{margin-left:16.6666666667%}.row .col.pull-xl2{right:16.6666666667%}.row .col.push-xl2{left:16.6666666667%}.row .col.offset-xl3{margin-left:25%}.row .col.pull-xl3{right:25%}.row .col.push-xl3{left:25%}.row .col.offset-xl4{margin-left:33.3333333333%}.row .col.pull-xl4{right:33.3333333333%}.row .col.push-xl4{left:33.3333333333%}.row .col.offset-xl5{margin-left:41.6666666667%}.row .col.pull-xl5{right:41.6666666667%}.row .col.push-xl5{left:41.6666666667%}.row .col.offset-xl6{margin-left:50%}.row .col.pull-xl6{right:50%}.row .col.push-xl6{left:50%}.row .col.offset-xl7{margin-left:58.3333333333%}.row .col.pull-xl7{right:58.3333333333%}.row .col.push-xl7{left:58.3333333333%}.row .col.offset-xl8{margin-left:66.6666666667%}.row .col.pull-xl8{right:66.6666666667%}.row .col.push-xl8{left:66.6666666667%}.row .col.offset-xl9{margin-left:75%}.row .col.pull-xl9{right:75%}.row .col.push-xl9{left:75%}.row .col.offset-xl10{margin-left:83.3333333333%}.row .col.pull-xl10{right:83.3333333333%}.row .col.push-xl10{left:83.3333333333%}.row .col.offset-xl11{margin-left:91.6666666667%}.row .col.pull-xl11{right:91.6666666667%}.row .col.push-xl11{left:91.6666666667%}.row .col.offset-xl12{margin-left:100%}.row .col.pull-xl12{right:100%}.row .col.push-xl12{left:100%}}nav{color:#fff;background-color:#ee6e73;width:100%;height:56px;line-height:56px}nav.nav-extended{height:auto}nav.nav-extended .nav-wrapper{min-height:56px;height:auto}nav.nav-extended .nav-content{position:relative;line-height:normal}nav a{color:#fff}nav i,nav [class^="mdi-"],nav [class*="mdi-"],nav i.material-icons{display:block;font-size:24px;height:56px;line-height:56px}nav .nav-wrapper{position:relative;height:100%}@media only screen and (min-width: 993px){nav a.button-collapse{display:none}}nav .button-collapse{float:left;position:relative;z-index:1;height:56px;margin:0 18px}nav .button-collapse i{height:56px;line-height:56px}nav .brand-logo{position:absolute;color:#fff;display:inline-block;font-size:2.1rem;padding:0}nav .brand-logo.center{left:50%;transform:translateX(-50%)}@media only screen and (max-width: 992px){nav .brand-logo{left:50%;transform:translateX(-50%)}nav .brand-logo.left,nav .brand-logo.right{padding:0;transform:none}nav .brand-logo.left{left:0.5rem}nav .brand-logo.right{right:0.5rem;left:auto}}nav .brand-logo.right{right:0.5rem;padding:0}nav .brand-logo i,nav .brand-logo [class^="mdi-"],nav .brand-logo [class*="mdi-"],nav .brand-logo i.material-icons{float:left;margin-right:15px}nav .nav-title{display:inline-block;font-size:32px;padding:28px 0}nav ul{margin:0}nav ul li{transition:background-color .3s;float:left;padding:0}nav ul li.active{background-color:rgba(0,0,0,0.1)}nav ul a{transition:background-color .3s;font-size:1rem;color:#fff;display:block;padding:0 15px;cursor:pointer}nav ul a.btn,nav ul a.btn-large,nav ul a.btn-large,nav ul a.btn-flat,nav ul a.btn-floating{margin-top:-2px;margin-left:15px;margin-right:15px}nav ul a.btn>.material-icons,nav ul a.btn-large>.material-icons,nav ul a.btn-large>.material-icons,nav ul a.btn-flat>.material-icons,nav ul a.btn-floating>.material-icons{height:inherit;line-height:inherit}nav ul a:hover{background-color:rgba(0,0,0,0.1)}nav ul.left{float:left}nav form{height:100%}nav .input-field{margin:0;height:100%}nav .input-field input{height:100%;font-size:1.2rem;border:none;padding-left:2rem}nav .input-field input:focus,nav .input-field input[type=text]:valid,nav .input-field input[type=password]:valid,nav .input-field input[type=email]:valid,nav .input-field input[type=url]:valid,nav .input-field input[type=date]:valid{border:none;box-shadow:none}nav .input-field label{top:0;left:0}nav .input-field label i{color:rgba(255,255,255,0.7);transition:color .3s}nav .input-field label.active i{color:#fff}.navbar-fixed{position:relative;height:56px;z-index:997}.navbar-fixed nav{position:fixed}@media only screen and (min-width: 601px){nav.nav-extended .nav-wrapper{min-height:64px}nav,nav .nav-wrapper i,nav a.button-collapse,nav a.button-collapse i{height:64px;line-height:64px}.navbar-fixed{height:64px}}/*@font-face{font-family:"Roboto";src:local(Roboto Thin),url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"),url("../fonts/roboto/Roboto-Thin.woff") format("woff");font-weight:100}@font-face{font-family:"Roboto";src:local(Roboto Light),url("../fonts/roboto/Roboto-Light.woff2") format("woff2"),url("../fonts/roboto/Roboto-Light.woff") format("woff");font-weight:300}@font-face{font-family:"Roboto";src:local(Roboto Regular),url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),url("../fonts/roboto/Roboto-Regular.woff") format("woff");font-weight:400}@font-face{font-family:"Roboto";src:local(Roboto Medium),url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"),url("../fonts/roboto/Roboto-Medium.woff") format("woff");font-weight:500}@font-face{font-family:"Roboto";src:local(Roboto Bold),url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"),url("../fonts/roboto/Roboto-Bold.woff") format("woff");font-weight:700}*/a{text-decoration:none}html{line-height:1.5;font-family:"Roboto", sans-serif;font-weight:normal;color:rgba(0,0,0,0.87)}@media only screen and (min-width: 0){html{font-size:14px}}@media only screen and (min-width: 992px){html{font-size:14.5px}}@media only screen and (min-width: 1200px){html{font-size:15px}}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.1}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{font-size:4.2rem;line-height:110%;margin:2.1rem 0 1.68rem 0}h2{font-size:3.56rem;line-height:110%;margin:1.78rem 0 1.424rem 0}h3{font-size:2.92rem;line-height:110%;margin:1.46rem 0 1.168rem 0}h4{font-size:2.28rem;line-height:110%;margin:1.14rem 0 .912rem 0}h5{font-size:1.64rem;line-height:110%;margin:.82rem 0 .656rem 0}h6{font-size:1rem;line-height:110%;margin:.5rem 0 .4rem 0}em{font-style:italic}strong{font-weight:500}small{font-size:75%}.light,.page-footer .footer-copyright{font-weight:300}.thin{font-weight:200}.flow-text{font-weight:300}@media only screen and (min-width: 360px){.flow-text{font-size:1.2rem}}@media only screen and (min-width: 390px){.flow-text{font-size:1.224rem}}@media only screen and (min-width: 420px){.flow-text{font-size:1.248rem}}@media only screen and (min-width: 450px){.flow-text{font-size:1.272rem}}@media only screen and (min-width: 480px){.flow-text{font-size:1.296rem}}@media only screen and (min-width: 510px){.flow-text{font-size:1.32rem}}@media only screen and (min-width: 540px){.flow-text{font-size:1.344rem}}@media only screen and (min-width: 570px){.flow-text{font-size:1.368rem}}@media only screen and (min-width: 600px){.flow-text{font-size:1.392rem}}@media only screen and (min-width: 630px){.flow-text{font-size:1.416rem}}@media only screen and (min-width: 660px){.flow-text{font-size:1.44rem}}@media only screen and (min-width: 690px){.flow-text{font-size:1.464rem}}@media only screen and (min-width: 720px){.flow-text{font-size:1.488rem}}@media only screen and (min-width: 750px){.flow-text{font-size:1.512rem}}@media only screen and (min-width: 780px){.flow-text{font-size:1.536rem}}@media only screen and (min-width: 810px){.flow-text{font-size:1.56rem}}@media only screen and (min-width: 840px){.flow-text{font-size:1.584rem}}@media only screen and (min-width: 870px){.flow-text{font-size:1.608rem}}@media only screen and (min-width: 900px){.flow-text{font-size:1.632rem}}@media only screen and (min-width: 930px){.flow-text{font-size:1.656rem}}@media only screen and (min-width: 960px){.flow-text{font-size:1.68rem}}@media only screen and (max-width: 360px){.flow-text{font-size:1.2rem}}.scale-transition{transition:transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important}.scale-transition.scale-out{transform:scale(0);transition:transform .2s !important}.scale-transition.scale-in{transform:scale(1)}.card-panel{transition:box-shadow .25s;padding:24px;margin:.5rem 0 1rem 0;border-radius:2px;background-color:#fff}.card{position:relative;margin:.5rem 0 1rem 0;background-color:#fff;transition:box-shadow .25s;border-radius:2px}.card .card-title{font-size:24px;font-weight:300}.card .card-title.activator{cursor:pointer}.card.small,.card.medium,.card.large{position:relative}.card.small .card-image,.card.medium .card-image,.card.large .card-image{max-height:60%;overflow:hidden}.card.small .card-image+.card-content,.card.medium .card-image+.card-content,.card.large .card-image+.card-content{max-height:40%}.card.small .card-content,.card.medium .card-content,.card.large .card-content{max-height:100%;overflow:hidden}.card.small .card-action,.card.medium .card-action,.card.large .card-action{position:absolute;bottom:0;left:0;right:0}.card.small{height:300px}.card.medium{height:400px}.card.large{height:500px}.card.horizontal{display:flex}.card.horizontal.small .card-image,.card.horizontal.medium .card-image,.card.horizontal.large .card-image{height:100%;max-height:none;overflow:visible}.card.horizontal.small .card-image img,.card.horizontal.medium .card-image img,.card.horizontal.large .card-image img{height:100%}.card.horizontal .card-image{max-width:50%}.card.horizontal .card-image img{border-radius:2px 0 0 2px;max-width:100%;width:auto}.card.horizontal .card-stacked{display:flex;flex-direction:column;flex:1;position:relative}.card.horizontal .card-stacked .card-content{flex-grow:1}.card.sticky-action .card-action{z-index:2}.card.sticky-action .card-reveal{z-index:1;padding-bottom:64px}.card .card-image{position:relative}.card .card-image img{display:block;border-radius:2px 2px 0 0;position:relative;left:0;right:0;top:0;bottom:0;width:100%}.card .card-image .card-title{color:#fff;position:absolute;bottom:0;left:0;max-width:100%;padding:24px}.card .card-content{padding:24px;border-radius:0 0 2px 2px}.card .card-content p{margin:0;color:inherit}.card .card-content .card-title{display:block;line-height:32px;margin-bottom:8px}.card .card-content .card-title i{line-height:32px}.card .card-action{position:relative;background-color:inherit;border-top:1px solid rgba(160,160,160,0.2);padding:16px 24px}.card .card-action:last-child{border-radius:0 0 2px 2px}.card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating){color:#ffab40;margin-right:24px;transition:color .3s ease;text-transform:uppercase}.card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating):hover{color:#ffd8a6}.card .card-reveal{padding:24px;position:absolute;background-color:#fff;width:100%;overflow-y:auto;left:0;top:100%;height:100%;z-index:3;display:none}.card .card-reveal .card-title{cursor:pointer;display:block}#toast-container{display:block;position:fixed;z-index:10000}@media only screen and (max-width: 600px){#toast-container{min-width:100%;bottom:0%}}@media only screen and (min-width: 601px) and (max-width: 992px){#toast-container{left:5%;bottom:7%;max-width:90%}}@media only screen and (min-width: 993px){#toast-container{top:10%;right:7%;max-width:86%}}.toast{border-radius:2px;top:35px;width:auto;margin-top:10px;position:relative;max-width:100%;height:auto;min-height:48px;line-height:1.5em;word-break:break-all;background-color:#323232;padding:10px 25px;font-size:1.1rem;font-weight:300;color:#fff;display:flex;align-items:center;justify-content:space-between;cursor:default}.toast .toast-action{color:#eeff41;font-weight:500;margin-right:-25px;margin-left:3rem}.toast.rounded{border-radius:24px}@media only screen and (max-width: 600px){.toast{width:100%;border-radius:0}}.tabs{position:relative;overflow-x:auto;overflow-y:hidden;height:48px;width:100%;background-color:#fff;margin:0 auto;white-space:nowrap}.tabs.tabs-transparent{background-color:transparent}.tabs.tabs-transparent .tab a,.tabs.tabs-transparent .tab.disabled a,.tabs.tabs-transparent .tab.disabled a:hover{color:rgba(255,255,255,0.7)}.tabs.tabs-transparent .tab a:hover,.tabs.tabs-transparent .tab a.active{color:#fff}.tabs.tabs-transparent .indicator{background-color:#fff}.tabs.tabs-fixed-width{display:flex}.tabs.tabs-fixed-width .tab{flex-grow:1}.tabs .tab{display:inline-block;text-align:center;line-height:48px;height:48px;padding:0;margin:0;text-transform:uppercase}.tabs .tab a{color:rgba(238,110,115,0.7);display:block;width:100%;height:100%;padding:0 24px;font-size:14px;text-overflow:ellipsis;overflow:hidden;transition:color .28s ease}.tabs .tab a:hover,.tabs .tab a.active{background-color:transparent;color:#ee6e73}.tabs .tab.disabled a,.tabs .tab.disabled a:hover{color:rgba(238,110,115,0.7);cursor:default}.tabs .indicator{position:absolute;bottom:0;height:2px;background-color:#f6b2b5;will-change:left, right}@media only screen and (max-width: 992px){.tabs{display:flex}.tabs .tab{flex-grow:1}.tabs .tab a{padding:0 12px}}.material-tooltip{padding:10px 8px;font-size:1rem;z-index:2000;background-color:transparent;border-radius:2px;color:#fff;min-height:36px;line-height:120%;opacity:0;position:absolute;text-align:center;max-width:calc(100% - 4px);overflow:hidden;left:0;top:0;pointer-events:none;visibility:hidden}.backdrop{position:absolute;opacity:0;height:7px;width:14px;border-radius:0 0 50% 50%;background-color:#323232;z-index:-1;transform-origin:50% 0%;visibility:hidden}.btn,.btn-large,.btn-flat{border:none;border-radius:2px;display:inline-block;height:36px;line-height:36px;padding:0 2rem;text-transform:uppercase;vertical-align:middle;-webkit-tap-highlight-color:transparent}.btn.disabled,.disabled.btn-large,.btn-floating.disabled,.btn-large.disabled,.btn-flat.disabled,.btn:disabled,.btn-large:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-flat:disabled,.btn[disabled],[disabled].btn-large,.btn-floating[disabled],.btn-large[disabled],.btn-flat[disabled]{pointer-events:none;background-color:#DFDFDF !important;box-shadow:none;color:#9F9F9F !important;cursor:default}.btn.disabled:hover,.disabled.btn-large:hover,.btn-floating.disabled:hover,.btn-large.disabled:hover,.btn-flat.disabled:hover,.btn:disabled:hover,.btn-large:disabled:hover,.btn-floating:disabled:hover,.btn-large:disabled:hover,.btn-flat:disabled:hover,.btn[disabled]:hover,[disabled].btn-large:hover,.btn-floating[disabled]:hover,.btn-large[disabled]:hover,.btn-flat[disabled]:hover{background-color:#DFDFDF !important;color:#9F9F9F !important}.btn,.btn-large,.btn-floating,.btn-large,.btn-flat{font-size:1rem;outline:0}.btn i,.btn-large i,.btn-floating i,.btn-large i,.btn-flat i{font-size:1.3rem;line-height:inherit}.btn:focus,.btn-large:focus,.btn-floating:focus{background-color:#1d7d74}.btn,.btn-large{text-decoration:none;color:#fff;background-color:var(--trebble-primary);text-align:center;letter-spacing:.5px;transition:.2s ease-out;cursor:pointer}.btn:hover,.btn-large:hover{background-color:#2bbbad}.btn-floating{display:inline-block;color:#fff;position:relative;overflow:hidden;z-index:1;width:40px;height:40px;line-height:40px;padding:0;background-color:var(--trebble-primary);border-radius:50%;transition:.3s;cursor:pointer;vertical-align:middle}.btn-floating:hover{background-color:var(--trebble-primary)}.btn-floating:before{border-radius:0}.btn-floating.btn-large{width:56px;height:56px}.btn-floating.btn-large.halfway-fab{bottom:-28px}.btn-floating.btn-large i{line-height:56px}.btn-floating.halfway-fab{position:absolute;right:24px;bottom:-20px}.btn-floating.halfway-fab.left{right:auto;left:24px}.btn-floating i{width:inherit;display:inline-block;text-align:center;color:#fff;font-size:1.6rem;line-height:40px}button.btn-floating{border:none}.fixed-action-btn{position:fixed;right:23px;bottom:23px;padding-top:15px;margin-bottom:0;z-index:997}.fixed-action-btn.active ul{visibility:visible}.fixed-action-btn.horizontal{padding:0 0 0 15px}.fixed-action-btn.horizontal ul{text-align:right;right:64px;top:50%;transform:translateY(-50%);height:100%;left:auto;width:500px}.fixed-action-btn.horizontal ul li{display:inline-block;margin:15px 15px 0 0}.fixed-action-btn.toolbar{padding:0;height:56px}.fixed-action-btn.toolbar.active>a i{opacity:0}.fixed-action-btn.toolbar ul{display:flex;top:0;bottom:0;z-index:1}.fixed-action-btn.toolbar ul li{flex:1;display:inline-block;margin:0;height:100%;transition:none}.fixed-action-btn.toolbar ul li a{display:block;overflow:hidden;position:relative;width:100%;height:100%;background-color:transparent;box-shadow:none;color:#fff;line-height:56px;z-index:1}.fixed-action-btn.toolbar ul li a i{line-height:inherit}.fixed-action-btn ul{left:0;right:0;text-align:center;position:absolute;bottom:64px;margin:0;visibility:hidden}.fixed-action-btn ul li{margin-bottom:15px}.fixed-action-btn ul a.btn-floating{opacity:0}.fixed-action-btn .fab-backdrop{position:absolute;top:0;left:0;z-index:-1;width:40px;height:40px;background-color:var(--trebble-primary);border-radius:50%;transform:scale(0)}.btn-flat{box-shadow:none;background-color:transparent;color:#343434;cursor:pointer;transition:background-color .2s}.btn-flat:focus,.btn-flat:hover{box-shadow:none}.btn-flat:focus{background-color:rgba(0,0,0,0.1)}.btn-flat.disabled{background-color:transparent !important;color:#b3b2b2 !important;cursor:default}.btn-large{height:54px;line-height:54px}.btn-large i{font-size:1.6rem}.btn-block{display:block}.dropdown-content{background-color:#fff;margin:0;display:none;min-width:100px;max-height:650px;overflow-y:auto;opacity:0;position:absolute;z-index:999;will-change:width, height}.dropdown-content li{clear:both;color:rgba(0,0,0,0.87);cursor:pointer;min-height:50px;line-height:1.5rem;width:100%;text-align:left;text-transform:none}.dropdown-content li:hover,.dropdown-content li.active,.dropdown-content li.selected{background-color:#eee}.dropdown-content li.active.selected{background-color:#e1e1e1}.dropdown-content li.divider{min-height:0;height:1px}.dropdown-content li>a,.dropdown-content li>span{font-size:16px;color:var(--trebble-primary);display:block;line-height:22px;padding:14px 16px}.dropdown-content li>span>label{top:1px;left:0;height:18px}.dropdown-content li>a>i{height:inherit;line-height:inherit;float:left;margin:0 24px 0 0;width:24px}.input-field.col .dropdown-content [type="checkbox"]+label{top:1px;left:0;height:18px}/*!
 * Waves v0.6.0
 * http://fian.my.id/Waves
 *
 * Copyright 2014 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/Waves/blob/master/LICENSE
 */.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;z-index:1;transition:.3s ease-out}.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;opacity:0;background:rgba(0,0,0,0.2);transition:all 0.7s ease-out;transition-property:transform, opacity;transform:scale(0);pointer-events:none}.waves-effect.waves-light .waves-ripple{background-color:rgba(255,255,255,0.45)}.waves-effect.waves-red .waves-ripple{background-color:rgba(244,67,54,0.7)}.waves-effect.waves-yellow .waves-ripple{background-color:rgba(255,235,59,0.7)}.waves-effect.waves-orange .waves-ripple{background-color:rgba(255,152,0,0.7)}.waves-effect.waves-purple .waves-ripple{background-color:rgba(156,39,176,0.7)}.waves-effect.waves-green .waves-ripple{background-color:rgba(76,175,80,0.7)}.waves-effect.waves-teal .waves-ripple{background-color:rgba(0,150,136,0.7)}.waves-effect input[type="button"],.waves-effect input[type="reset"],.waves-effect input[type="submit"]{border:0;font-style:normal;font-size:inherit;text-transform:inherit;background:none}.waves-effect img{position:relative;z-index:-1}.waves-notransition{transition:none !important}.waves-circle{transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle, white 100%, black 100%)}.waves-input-wrapper{border-radius:0.2em;vertical-align:bottom}.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%;-webkit-mask-image:none}.waves-block{display:block}.waves-effect .waves-ripple{z-index:-1}.modal{display:none;position:fixed;left:0;right:0;background-color:#fafafa;padding:0;max-height:70%;width:55%;margin:auto;overflow-y:auto;border-radius:2px;will-change:top, opacity}@media only screen and (max-width: 992px){.modal{width:80%}}.modal h1,.modal h2,.modal h3,.modal h4{margin-top:0}.modal .modal-content{padding:24px}.modal .modal-close{cursor:pointer}.modal .modal-footer{border-radius:0 0 2px 2px;background-color:#fafafa;padding:4px 6px;height:56px;width:100%;text-align:right}.modal .modal-footer .btn,.modal .modal-footer .btn-large,.modal .modal-footer .btn-flat{margin:6px 0}.modal-overlay{position:fixed;z-index:999;top:-25%;left:0;bottom:0;right:0;height:125%;width:100%;background:#000;display:none;will-change:opacity}.modal.modal-fixed-footer{padding:0;height:70%}.modal.modal-fixed-footer .modal-content{position:absolute;height:calc(100% - 56px);max-height:100%;width:100%;overflow-y:auto}.modal.modal-fixed-footer .modal-footer{border-top:1px solid rgba(0,0,0,0.1);position:absolute;bottom:0}.modal.bottom-sheet{top:auto;bottom:-100%;margin:0;width:100%;max-height:45%;border-radius:0;will-change:bottom, opacity}.collapsible{border-top:1px solid #ddd;border-right:1px solid #ddd;border-left:1px solid #ddd;margin:.5rem 0 1rem 0}.collapsible-header{display:flex;cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:1.5;padding:1rem;background-color:#fff;border-bottom:1px solid #ddd}.collapsible-header i{width:2rem;font-size:1.6rem;display:inline-block;text-align:center;margin-right:1rem}.collapsible-body{display:none;border-bottom:1px solid #ddd;box-sizing:border-box;padding:2rem}.side-nav .collapsible,.side-nav.fixed .collapsible{border:none;box-shadow:none}.side-nav .collapsible li,.side-nav.fixed .collapsible li{padding:0}.side-nav .collapsible-header,.side-nav.fixed .collapsible-header{background-color:transparent;border:none;line-height:inherit;height:inherit;padding:0 16px}.side-nav .collapsible-header:hover,.side-nav.fixed .collapsible-header:hover{background-color:rgba(0,0,0,0.05)}.side-nav .collapsible-header i,.side-nav.fixed .collapsible-header i{line-height:inherit}.side-nav .collapsible-body,.side-nav.fixed .collapsible-body{border:0;background-color:#fff}.side-nav .collapsible-body li a,.side-nav.fixed .collapsible-body li a{padding:0 23.5px 0 31px}.collapsible.popout{border:none;box-shadow:none}.collapsible.popout>li{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);margin:0 24px;transition:margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)}.collapsible.popout>li.active{box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);margin:16px 0}.chip{display:inline-block;height:32px;font-size:13px;font-weight:500;color:rgba(0,0,0,0.6);line-height:32px;padding:0 12px;border-radius:16px;background-color:#e4e4e4;margin-bottom:5px;margin-right:5px}.chip>img{float:left;margin:0 8px 0 -12px;height:32px;width:32px;border-radius:50%}.chip .close{cursor:pointer;float:right;font-size:16px;line-height:32px;padding-left:8px}.chips{border:none;border-bottom:1px solid #9e9e9e;box-shadow:none;margin:0 0 20px 0;min-height:45px;outline:none;transition:all .3s}.chips.focus{border-bottom:1px solid var(--trebble-primary);box-shadow:0 1px 0 0 var(--trebble-primary)}.chips:hover{cursor:text}.chips .chip.selected{background-color:var(--trebble-primary);color:#fff}.chips .input{background:none;border:0;color:rgba(0,0,0,0.6);display:inline-block;font-size:1rem;height:3rem;line-height:32px;outline:0;margin:0;padding:0 !important;width:120px !important}.chips .input:focus{border:0 !important;box-shadow:none !important}.chips .autocomplete-content{margin-top:0;margin-bottom:0}.prefix ~ .chips{margin-left:3rem;width:92%;width:calc(100% - 3rem)}.chips:empty ~ label{font-size:0.8rem;transform:translateY(-140%)}.materialboxed{display:block;cursor:zoom-in;position:relative;transition:opacity .4s;-webkit-backface-visibility:hidden}.materialboxed:hover:not(.active){opacity:.8}.materialboxed.active{cursor:zoom-out}#materialbox-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#292929;z-index:1000;will-change:opacity}.materialbox-caption{position:fixed;display:none;color:#fff;line-height:50px;bottom:0;left:0;width:100%;text-align:center;padding:0% 15%;height:50px;z-index:1000;-webkit-font-smoothing:antialiased}select:focus{outline:1px solid #c9f3ef}button:focus{outline:none;background-color:#2ab7a9}label{font-size:.8rem;color:#9e9e9e}::-moz-placeholder{color:#d1d1d1}::placeholder{color:#d1d1d1}input:not([type]),input[type=text]:not(.browser-default):not(.ant-input),input[type=password]:not(.browser-default),input[type=email]:not(.browser-default),input[type=url]:not(.browser-default),input[type=time]:not(.browser-default),input[type=date]:not(.browser-default),input[type=datetime]:not(.browser-default),input[type=datetime-local]:not(.browser-default),input[type=tel]:not(.browser-default),input[type=number]:not(.browser-default),input[type=search]:not(.browser-default),textarea.materialize-textarea{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:3rem;width:100%;font-size:1rem;margin:0 0 20px 0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}input:not([type]):disabled,input:not([type])[readonly="readonly"],input[type=text]:not(.browser-default):disabled,input[type=text]:not(.browser-default)[readonly="readonly"],input[type=password]:not(.browser-default):disabled,input[type=password]:not(.browser-default)[readonly="readonly"],input[type=email]:not(.browser-default):disabled,input[type=email]:not(.browser-default)[readonly="readonly"],input[type=url]:not(.browser-default):disabled,input[type=url]:not(.browser-default)[readonly="readonly"],input[type=time]:not(.browser-default):disabled,input[type=time]:not(.browser-default)[readonly="readonly"],input[type=date]:not(.browser-default):disabled,input[type=date]:not(.browser-default)[readonly="readonly"],input[type=datetime]:not(.browser-default):disabled,input[type=datetime]:not(.browser-default)[readonly="readonly"],input[type=datetime-local]:not(.browser-default):disabled,input[type=datetime-local]:not(.browser-default)[readonly="readonly"],input[type=tel]:not(.browser-default):disabled,input[type=tel]:not(.browser-default)[readonly="readonly"],input[type=number]:not(.browser-default):disabled,input[type=number]:not(.browser-default)[readonly="readonly"],input[type=search]:not(.browser-default):disabled,input[type=search]:not(.browser-default)[readonly="readonly"],textarea.materialize-textarea:disabled,textarea.materialize-textarea[readonly="readonly"]{color:rgba(0,0,0,0.42);border-bottom:1px dotted rgba(0,0,0,0.42)}input:not([type]):disabled+label,input:not([type])[readonly="readonly"]+label,input[type=text]:not(.browser-default):disabled+label,input[type=text]:not(.browser-default)[readonly="readonly"]+label,input[type=password]:not(.browser-default):disabled+label,input[type=password]:not(.browser-default)[readonly="readonly"]+label,input[type=email]:not(.browser-default):disabled+label,input[type=email]:not(.browser-default)[readonly="readonly"]+label,input[type=url]:not(.browser-default):disabled+label,input[type=url]:not(.browser-default)[readonly="readonly"]+label,input[type=time]:not(.browser-default):disabled+label,input[type=time]:not(.browser-default)[readonly="readonly"]+label,input[type=date]:not(.browser-default):disabled+label,input[type=date]:not(.browser-default)[readonly="readonly"]+label,input[type=datetime]:not(.browser-default):disabled+label,input[type=datetime]:not(.browser-default)[readonly="readonly"]+label,input[type=datetime-local]:not(.browser-default):disabled+label,input[type=datetime-local]:not(.browser-default)[readonly="readonly"]+label,input[type=tel]:not(.browser-default):disabled+label,input[type=tel]:not(.browser-default)[readonly="readonly"]+label,input[type=number]:not(.browser-default):disabled+label,input[type=number]:not(.browser-default)[readonly="readonly"]+label,input[type=search]:not(.browser-default):disabled+label,input[type=search]:not(.browser-default)[readonly="readonly"]+label,textarea.materialize-textarea:disabled+label,textarea.materialize-textarea[readonly="readonly"]+label{color:rgba(0,0,0,0.42)}input:not([type]):focus:not([readonly]),input[type=text]:not(.browser-default):focus:not([readonly]),input[type=password]:not(.browser-default):focus:not([readonly]),input[type=email]:not(.browser-default):focus:not([readonly]),input[type=url]:not(.browser-default):focus:not([readonly]),input[type=time]:not(.browser-default):focus:not([readonly]),input[type=date]:not(.browser-default):focus:not([readonly]),input[type=datetime]:not(.browser-default):focus:not([readonly]),input[type=datetime-local]:not(.browser-default):focus:not([readonly]),input[type=tel]:not(.browser-default):focus:not([readonly]),input[type=number]:not(.browser-default):focus:not([readonly]),input[type=search]:not(.browser-default):focus:not([readonly]),textarea.materialize-textarea:focus:not([readonly]){border-bottom:1px solid var(--trebble-primary);box-shadow:0 1px 0 0 var(--trebble-primary)}input:not([type]):focus:not([readonly])+label,input[type=text]:not(.browser-default):focus:not([readonly])+label,input[type=password]:not(.browser-default):focus:not([readonly])+label,input[type=email]:not(.browser-default):focus:not([readonly])+label,input[type=url]:not(.browser-default):focus:not([readonly])+label,input[type=time]:not(.browser-default):focus:not([readonly])+label,input[type=date]:not(.browser-default):focus:not([readonly])+label,input[type=datetime]:not(.browser-default):focus:not([readonly])+label,input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,input[type=tel]:not(.browser-default):focus:not([readonly])+label,input[type=number]:not(.browser-default):focus:not([readonly])+label,input[type=search]:not(.browser-default):focus:not([readonly])+label,textarea.materialize-textarea:focus:not([readonly])+label{color:var(--trebble-primary)}input:not([type]).validate+label,input[type=text]:not(.browser-default).validate+label,input[type=password]:not(.browser-default).validate+label,input[type=email]:not(.browser-default).validate+label,input[type=url]:not(.browser-default).validate+label,input[type=time]:not(.browser-default).validate+label,input[type=date]:not(.browser-default).validate+label,input[type=datetime]:not(.browser-default).validate+label,input[type=datetime-local]:not(.browser-default).validate+label,input[type=tel]:not(.browser-default).validate+label,input[type=number]:not(.browser-default).validate+label,input[type=search]:not(.browser-default).validate+label,textarea.materialize-textarea.validate+label{width:100%}input:not([type]).invalid+label:after,input:not([type]).valid+label:after,input[type=text]:not(.browser-default).invalid+label:after,input[type=text]:not(.browser-default).valid+label:after,input[type=password]:not(.browser-default).invalid+label:after,input[type=password]:not(.browser-default).valid+label:after,input[type=email]:not(.browser-default).invalid+label:after,input[type=email]:not(.browser-default).valid+label:after,input[type=url]:not(.browser-default).invalid+label:after,input[type=url]:not(.browser-default).valid+label:after,input[type=time]:not(.browser-default).invalid+label:after,input[type=time]:not(.browser-default).valid+label:after,input[type=date]:not(.browser-default).invalid+label:after,input[type=date]:not(.browser-default).valid+label:after,input[type=datetime]:not(.browser-default).invalid+label:after,input[type=datetime]:not(.browser-default).valid+label:after,input[type=datetime-local]:not(.browser-default).invalid+label:after,input[type=datetime-local]:not(.browser-default).valid+label:after,input[type=tel]:not(.browser-default).invalid+label:after,input[type=tel]:not(.browser-default).valid+label:after,input[type=number]:not(.browser-default).invalid+label:after,input[type=number]:not(.browser-default).valid+label:after,input[type=search]:not(.browser-default).invalid+label:after,input[type=search]:not(.browser-default).valid+label:after,textarea.materialize-textarea.invalid+label:after,textarea.materialize-textarea.valid+label:after{display:none}input:not([type]).invalid+label.active:after,input:not([type]).valid+label.active:after,input[type=text]:not(.browser-default).invalid+label.active:after,input[type=text]:not(.browser-default).valid+label.active:after,input[type=password]:not(.browser-default).invalid+label.active:after,input[type=password]:not(.browser-default).valid+label.active:after,input[type=email]:not(.browser-default).invalid+label.active:after,input[type=email]:not(.browser-default).valid+label.active:after,input[type=url]:not(.browser-default).invalid+label.active:after,input[type=url]:not(.browser-default).valid+label.active:after,input[type=time]:not(.browser-default).invalid+label.active:after,input[type=time]:not(.browser-default).valid+label.active:after,input[type=date]:not(.browser-default).invalid+label.active:after,input[type=date]:not(.browser-default).valid+label.active:after,input[type=datetime]:not(.browser-default).invalid+label.active:after,input[type=datetime]:not(.browser-default).valid+label.active:after,input[type=datetime-local]:not(.browser-default).invalid+label.active:after,input[type=datetime-local]:not(.browser-default).valid+label.active:after,input[type=tel]:not(.browser-default).invalid+label.active:after,input[type=tel]:not(.browser-default).valid+label.active:after,input[type=number]:not(.browser-default).invalid+label.active:after,input[type=number]:not(.browser-default).valid+label.active:after,input[type=search]:not(.browser-default).invalid+label.active:after,input[type=search]:not(.browser-default).valid+label.active:after,textarea.materialize-textarea.invalid+label.active:after,textarea.materialize-textarea.valid+label.active:after{display:block}input.valid:not([type]),input.valid:not([type]):focus,input[type=text].valid:not(.browser-default),input[type=text].valid:not(.browser-default):focus,input[type=password].valid:not(.browser-default),input[type=password].valid:not(.browser-default):focus,input[type=email].valid:not(.browser-default),input[type=email].valid:not(.browser-default):focus,input[type=url].valid:not(.browser-default),input[type=url].valid:not(.browser-default):focus,input[type=time].valid:not(.browser-default),input[type=time].valid:not(.browser-default):focus,input[type=date].valid:not(.browser-default),input[type=date].valid:not(.browser-default):focus,input[type=datetime].valid:not(.browser-default),input[type=datetime].valid:not(.browser-default):focus,input[type=datetime-local].valid:not(.browser-default),input[type=datetime-local].valid:not(.browser-default):focus,input[type=tel].valid:not(.browser-default),input[type=tel].valid:not(.browser-default):focus,input[type=number].valid:not(.browser-default),input[type=number].valid:not(.browser-default):focus,input[type=search].valid:not(.browser-default),input[type=search].valid:not(.browser-default):focus,textarea.materialize-textarea.valid,textarea.materialize-textarea.valid:focus,.select-wrapper.valid>input.select-dropdown{border-bottom:1px solid #4CAF50;box-shadow:0 1px 0 0 #4CAF50}input.invalid:not([type]),input.invalid:not([type]):focus,input[type=text].invalid:not(.browser-default),input[type=text].invalid:not(.browser-default):focus,input[type=password].invalid:not(.browser-default),input[type=password].invalid:not(.browser-default):focus,input[type=email].invalid:not(.browser-default),input[type=email].invalid:not(.browser-default):focus,input[type=url].invalid:not(.browser-default),input[type=url].invalid:not(.browser-default):focus,input[type=time].invalid:not(.browser-default),input[type=time].invalid:not(.browser-default):focus,input[type=date].invalid:not(.browser-default),input[type=date].invalid:not(.browser-default):focus,input[type=datetime].invalid:not(.browser-default),input[type=datetime].invalid:not(.browser-default):focus,input[type=datetime-local].invalid:not(.browser-default),input[type=datetime-local].invalid:not(.browser-default):focus,input[type=tel].invalid:not(.browser-default),input[type=tel].invalid:not(.browser-default):focus,input[type=number].invalid:not(.browser-default),input[type=number].invalid:not(.browser-default):focus,input[type=search].invalid:not(.browser-default),input[type=search].invalid:not(.browser-default):focus,textarea.materialize-textarea.invalid,textarea.materialize-textarea.invalid:focus,.select-wrapper.invalid>input.select-dropdown{border-bottom:1px solid #F44336;box-shadow:0 1px 0 0 #F44336}input:not([type]).valid+label:after,input:not([type]):focus.valid+label:after,input[type=text]:not(.browser-default).valid+label:after,input[type=text]:not(.browser-default):focus.valid+label:after,input[type=password]:not(.browser-default).valid+label:after,input[type=password]:not(.browser-default):focus.valid+label:after,input[type=email]:not(.browser-default).valid+label:after,input[type=email]:not(.browser-default):focus.valid+label:after,input[type=url]:not(.browser-default).valid+label:after,input[type=url]:not(.browser-default):focus.valid+label:after,input[type=time]:not(.browser-default).valid+label:after,input[type=time]:not(.browser-default):focus.valid+label:after,input[type=date]:not(.browser-default).valid+label:after,input[type=date]:not(.browser-default):focus.valid+label:after,input[type=datetime]:not(.browser-default).valid+label:after,input[type=datetime]:not(.browser-default):focus.valid+label:after,input[type=datetime-local]:not(.browser-default).valid+label:after,input[type=datetime-local]:not(.browser-default):focus.valid+label:after,input[type=tel]:not(.browser-default).valid+label:after,input[type=tel]:not(.browser-default):focus.valid+label:after,input[type=number]:not(.browser-default).valid+label:after,input[type=number]:not(.browser-default):focus.valid+label:after,input[type=search]:not(.browser-default).valid+label:after,input[type=search]:not(.browser-default):focus.valid+label:after,textarea.materialize-textarea.valid+label:after,textarea.materialize-textarea:focus.valid+label:after,.select-wrapper.valid+label:after{content:attr(data-success);color:#4CAF50;opacity:1;transform:translateY(9px)}input:not([type]).invalid+label:after,input:not([type]):focus.invalid+label:after,input[type=text]:not(.browser-default).invalid+label:after,input[type=text]:not(.browser-default):focus.invalid+label:after,input[type=password]:not(.browser-default).invalid+label:after,input[type=password]:not(.browser-default):focus.invalid+label:after,input[type=email]:not(.browser-default).invalid+label:after,input[type=email]:not(.browser-default):focus.invalid+label:after,input[type=url]:not(.browser-default).invalid+label:after,input[type=url]:not(.browser-default):focus.invalid+label:after,input[type=time]:not(.browser-default).invalid+label:after,input[type=time]:not(.browser-default):focus.invalid+label:after,input[type=date]:not(.browser-default).invalid+label:after,input[type=date]:not(.browser-default):focus.invalid+label:after,input[type=datetime]:not(.browser-default).invalid+label:after,input[type=datetime]:not(.browser-default):focus.invalid+label:after,input[type=datetime-local]:not(.browser-default).invalid+label:after,input[type=datetime-local]:not(.browser-default):focus.invalid+label:after,input[type=tel]:not(.browser-default).invalid+label:after,input[type=tel]:not(.browser-default):focus.invalid+label:after,input[type=number]:not(.browser-default).invalid+label:after,input[type=number]:not(.browser-default):focus.invalid+label:after,input[type=search]:not(.browser-default).invalid+label:after,input[type=search]:not(.browser-default):focus.invalid+label:after,textarea.materialize-textarea.invalid+label:after,textarea.materialize-textarea:focus.invalid+label:after,.select-wrapper.invalid+label:after{content:attr(data-error);color:#F44336;opacity:1;transform:translateY(9px)}input:not([type])+label:after,input[type=text]:not(.browser-default)+label:after,input[type=password]:not(.browser-default)+label:after,input[type=email]:not(.browser-default)+label:after,input[type=url]:not(.browser-default)+label:after,input[type=time]:not(.browser-default)+label:after,input[type=date]:not(.browser-default)+label:after,input[type=datetime]:not(.browser-default)+label:after,input[type=datetime-local]:not(.browser-default)+label:after,input[type=tel]:not(.browser-default)+label:after,input[type=number]:not(.browser-default)+label:after,input[type=search]:not(.browser-default)+label:after,textarea.materialize-textarea+label:after,.select-wrapper+label:after{display:block;content:"";position:absolute;top:100%;left:0;opacity:0;transition:.2s opacity ease-out, .2s color ease-out}.input-field{position:relative;margin-top:1rem}.input-field.inline{display:inline-block;vertical-align:middle;margin-left:5px}.input-field.inline input,.input-field.inline .select-dropdown{margin-bottom:1rem}.input-field.col label{left:.75rem}.input-field.col .prefix ~ label,.input-field.col .prefix ~ .validate ~ label{width:calc(100% - 3rem - 1.5rem)}.input-field label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;transition:transform .2s ease-out;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.input-field label:not(.label-icon).active{transform:translateY(-14px) scale(0.8);transform-origin:0 0}.input-field .prefix{position:absolute;width:3rem;font-size:2rem;transition:color .2s}.input-field .prefix.active{color:var(--trebble-primary)}.input-field .prefix ~ input,.input-field .prefix ~ textarea,.input-field .prefix ~ label,.input-field .prefix ~ .validate ~ label,.input-field .prefix ~ .autocomplete-content{margin-left:3rem;width:92%;width:calc(100% - 3rem)}.input-field .prefix ~ label{margin-left:3rem}@media only screen and (max-width: 992px){.input-field .prefix ~ input{width:86%;width:calc(100% - 3rem)}}@media only screen and (max-width: 600px){.input-field .prefix ~ input{width:80%;width:calc(100% - 3rem)}}.input-field input[type=search]{display:block;line-height:inherit}.nav-wrapper .input-field input[type=search]{height:inherit;padding-left:4rem;width:calc(100% - 4rem);border:0;box-shadow:none}.input-field input[type=search]:focus{background-color:#fff;border:0;box-shadow:none;color:#444}.input-field input[type=search]:focus+label i,.input-field input[type=search]:focus ~ .mdi-navigation-close,.input-field input[type=search]:focus ~ .material-icons{color:#444}.input-field input[type=search]+label{left:1rem}.input-field input[type=search] ~ .mdi-navigation-close,.input-field input[type=search] ~ .material-icons{position:absolute;top:0;right:1rem;color:transparent;cursor:pointer;font-size:2rem;transition:.3s color}textarea{width:100%;height:3rem;background-color:transparent}textarea.materialize-textarea{overflow-y:hidden;padding:.8rem 0 1.6rem 0;resize:none;min-height:3rem}textarea.materialize-textarea.validate+label{height:100%}textarea.materialize-textarea.validate+label::after{top:calc(100% - 12px)}textarea.materialize-textarea.validate+label:not(.label-icon).active{transform:translateY(-25px)}.hiddendiv{display:none;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;padding-top:1.2rem;position:absolute;top:0}.autocomplete-content{margin-top:-20px;margin-bottom:20px;display:block;opacity:1;position:static}.autocomplete-content li .highlight{color:#444}.autocomplete-content li img{height:40px;width:40px;margin:5px 15px}[type="radio"]:not(:checked),[type="radio"]:checked{position:absolute;opacity:0;pointer-events:none}[type="radio"]:not(:checked)+label,[type="radio"]:checked+label{position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;transition:.28s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}[type="radio"]+label:before,[type="radio"]+label:after{content:'';position:absolute;left:0;top:0;margin:4px;width:16px;height:16px;z-index:0;transition:.28s ease}[type="radio"]:not(:checked)+label:before,[type="radio"]:not(:checked)+label:after,[type="radio"]:checked+label:before,[type="radio"]:checked+label:after,[type="radio"].with-gap:checked+label:before,[type="radio"].with-gap:checked+label:after{border-radius:50%}[type="radio"]:not(:checked)+label:before,[type="radio"]:not(:checked)+label:after{border:2px solid #5a5a5a}[type="radio"]:not(:checked)+label:after{transform:scale(0)}[type="radio"]:checked+label:before{border:2px solid transparent}[type="radio"]:checked+label:after,[type="radio"].with-gap:checked+label:before,[type="radio"].with-gap:checked+label:after{border:2px solid var(--trebble-primary)}[type="radio"]:checked+label:after,[type="radio"].with-gap:checked+label:after{background-color:var(--trebble-primary)}[type="radio"]:checked+label:after{transform:scale(1.02)}[type="radio"].with-gap:checked+label:after{transform:scale(0.5)}[type="radio"].tabbed:focus+label:before{box-shadow:0 0 0 10px rgba(0,0,0,0.1)}[type="radio"].with-gap:disabled:checked+label:before{border:2px solid rgba(0,0,0,0.42)}[type="radio"].with-gap:disabled:checked+label:after{border:none;background-color:rgba(0,0,0,0.42)}[type="radio"]:disabled:not(:checked)+label:before,[type="radio"]:disabled:checked+label:before{background-color:transparent;border-color:rgba(0,0,0,0.42)}[type="radio"]:disabled+label{color:rgba(0,0,0,0.42)}[type="radio"]:disabled:not(:checked)+label:before{border-color:rgba(0,0,0,0.42)}[type="radio"]:disabled:checked+label:after{background-color:rgba(0,0,0,0.42);border-color:#949494}form p{margin-bottom:10px;text-align:left}form p:last-child{margin-bottom:0}[type="checkbox"]:not(:checked),[type="checkbox"]:checked{position:absolute;opacity:0;pointer-events:none}[type="checkbox"]+label{position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}[type="checkbox"]+label:before,[type="checkbox"]:not(.filled-in)+label:after{content:'';position:absolute;top:0;left:0;width:18px;height:18px;z-index:0;border:2px solid #5a5a5a;border-radius:1px;margin-top:2px;transition:.2s}[type="checkbox"]:not(.filled-in)+label:after{border:0;transform:scale(0)}[type="checkbox"]:not(:checked):disabled+label:before{border:none;background-color:rgba(0,0,0,0.42)}[type="checkbox"].tabbed:focus+label:after{transform:scale(1);border:0;border-radius:50%;box-shadow:0 0 0 10px rgba(0,0,0,0.1);background-color:rgba(0,0,0,0.1)}[type="checkbox"]:checked+label:before{top:-4px;left:-5px;width:12px;height:22px;border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid var(--trebble-primary);border-bottom:2px solid var(--trebble-primary);transform:rotate(40deg);backface-visibility:hidden;transform-origin:100% 100%}[type="checkbox"]:checked:disabled+label:before{border-right:2px solid rgba(0,0,0,0.42);border-bottom:2px solid rgba(0,0,0,0.42)}[type="checkbox"]:indeterminate+label:before{top:-11px;left:-12px;width:10px;height:22px;border-top:none;border-left:none;border-right:2px solid var(--trebble-primary);border-bottom:none;transform:rotate(90deg);backface-visibility:hidden;transform-origin:100% 100%}[type="checkbox"]:indeterminate:disabled+label:before{border-right:2px solid rgba(0,0,0,0.42);background-color:transparent}[type="checkbox"].filled-in+label:after{border-radius:2px}[type="checkbox"].filled-in+label:before,[type="checkbox"].filled-in+label:after{content:'';left:0;position:absolute;transition:border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;z-index:1}[type="checkbox"].filled-in:not(:checked)+label:before{width:0;height:0;border:3px solid transparent;left:6px;top:10px;transform:rotateZ(37deg);transform-origin:100% 100%}[type="checkbox"].filled-in:not(:checked)+label:after{height:20px;width:20px;background-color:transparent;border:2px solid #5a5a5a;top:0px;z-index:0}[type="checkbox"].filled-in:checked+label:before{top:0;left:1px;width:8px;height:13px;border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotateZ(37deg);transform-origin:100% 100%}[type="checkbox"].filled-in:checked+label:after{top:0;width:20px;height:20px;border:2px solid var(--trebble-primary);background-color:var(--trebble-primary);z-index:0}[type="checkbox"].filled-in.tabbed:focus+label:after{border-radius:2px;border-color:#5a5a5a;background-color:rgba(0,0,0,0.1)}[type="checkbox"].filled-in.tabbed:checked:focus+label:after{border-radius:2px;background-color:var(--trebble-primary);border-color:var(--trebble-primary)}[type="checkbox"].filled-in:disabled:not(:checked)+label:before{background-color:transparent;border:2px solid transparent}[type="checkbox"].filled-in:disabled:not(:checked)+label:after{border-color:transparent;background-color:#949494}[type="checkbox"].filled-in:disabled:checked+label:before{background-color:transparent}[type="checkbox"].filled-in:disabled:checked+label:after{background-color:#949494;border-color:#949494}.switch,.switch *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}.switch label{cursor:pointer}.switch label input[type=checkbox]{opacity:0;width:0;height:0}.switch label input[type=checkbox]:checked+.lever{background-color:#84c7c1}.switch label input[type=checkbox]:checked+.lever:before,.switch label input[type=checkbox]:checked+.lever:after{left:18px}.switch label input[type=checkbox]:checked+.lever:after{background-color:var(--trebble-primary)}.switch label .lever{content:"";display:inline-block;position:relative;width:36px;height:14px;background-color:rgba(0,0,0,0.38);border-radius:15px;margin-right:10px;transition:background 0.3s ease;vertical-align:middle;margin:0 16px}.switch label .lever:before,.switch label .lever:after{content:"";position:absolute;display:inline-block;width:20px;height:20px;border-radius:50%;left:0;top:-3px;transition:left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease}.switch label .lever:before{background-color:rgba(38,166,154,0.15)}.switch label .lever:after{background-color:#F1F1F1;box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)}input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before{transform:scale(2.4);background-color:rgba(38,166,154,0.15)}input[type=checkbox]:not(:disabled) ~ .lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before{transform:scale(2.4);background-color:rgba(0,0,0,0.08)}.switch input[type=checkbox][disabled]+.lever{cursor:default;background-color:rgba(0,0,0,0.12)}.switch label input[type=checkbox][disabled]+.lever:after,.switch label input[type=checkbox][disabled]:checked+.lever:after{background-color:#949494}select{display:none}select.browser-default{display:block}select{background-color:rgba(255,255,255,0.9);width:100%;padding:5px;border:1px solid #f2f2f2;border-radius:2px;height:3rem}.input-field>select{display:block;position:absolute;width:0;pointer-events:none;height:0;top:0;left:0;opacity:0}.select-label{position:absolute}.select-wrapper{position:relative}.select-wrapper.valid+label,.select-wrapper.invalid+label{width:100%;pointer-events:none}.select-wrapper input.select-dropdown{position:relative;cursor:pointer;background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;outline:none;height:3rem;line-height:3rem;width:100%;font-size:1rem;margin:0 0 20px 0;padding:0;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.select-wrapper span.caret{color:initial;position:absolute;right:0;top:0;bottom:0;height:10px;margin:auto 0;font-size:10px;line-height:10px}.select-wrapper+label{position:absolute;top:-26px;font-size:.8rem}select:disabled{color:rgba(0,0,0,0.42)}.select-wrapper.disabled span.caret,.select-wrapper.disabled+label{color:rgba(0,0,0,0.42)}.select-wrapper input.select-dropdown:disabled{color:rgba(0,0,0,0.42);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.select-wrapper i{color:rgba(0,0,0,0.3)}.select-dropdown li.disabled,.select-dropdown li.disabled>span,.select-dropdown li.optgroup{color:rgba(0,0,0,0.3);background-color:transparent}.select-dropdown.dropdown-content li.active{background-color:transparent}.select-dropdown.dropdown-content li:hover{background-color:rgba(0,0,0,0.06)}.select-dropdown.dropdown-content li.selected{background-color:rgba(0,0,0,0.03)}.prefix ~ .select-wrapper{margin-left:3rem;width:92%;width:calc(100% - 3rem)}.prefix ~ label{margin-left:3rem}.select-dropdown li img{height:40px;width:40px;margin:5px 15px;float:right}.select-dropdown li.optgroup{border-top:1px solid #eee}.select-dropdown li.optgroup.selected>span{color:rgba(0,0,0,0.7)}.select-dropdown li.optgroup>span{color:rgba(0,0,0,0.4)}.select-dropdown li.optgroup ~ li.optgroup-option{padding-left:1rem}.file-field{position:relative}.file-field .file-path-wrapper{overflow:hidden;padding-left:10px}.file-field input.file-path{width:100%}.file-field .btn,.file-field .btn-large{float:left;height:3rem;line-height:3rem}.file-field span{cursor:pointer}.file-field input[type=file]{position:absolute;top:0;right:0;left:0;bottom:0;width:100%;margin:0;padding:0;font-size:20px;cursor:pointer;opacity:0;filter:alpha(opacity=0)}.file-field input[type=file]::-webkit-file-upload-button{display:none}.range-field{position:relative}input[type=range],input[type=range]+.thumb{cursor:pointer}input[type=range]{position:relative;background-color:transparent;border:none;outline:none;width:100%;margin:15px 0;padding:0}input[type=range]:focus{outline:none}input[type=range]+.thumb{position:absolute;top:10px;left:0;border:none;height:0;width:0;border-radius:50%;background-color:var(--trebble-primary);margin-left:7px;transform-origin:50% 50%;transform:rotate(-45deg)}input[type=range]+.thumb .value{display:block;width:30px;text-align:center;color:var(--trebble-primary);font-size:0;transform:rotate(45deg)}input[type=range]+.thumb.active{border-radius:50% 50% 50% 0}input[type=range]+.thumb.active .value{color:#fff;margin-left:-1px;margin-top:8px;font-size:10px}input[type=range]{-webkit-appearance:none}input[type=range]::-webkit-slider-runnable-track{height:3px;background:#c2c0c2;border:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:14px;width:14px;border-radius:50%;background-color:var(--trebble-primary);transform-origin:50% 50%;margin:-5px 0 0 0;-webkit-transition:.3s;transition:.3s}input[type=range]:focus::-webkit-slider-runnable-track{background:#ccc}input[type=range]{border:1px solid white}input[type=range]::-moz-range-track{height:3px;background:#ddd;border:none}input[type=range]::-moz-range-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--trebble-primary);margin-top:-5px}input[type=range]:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}input[type=range]:focus::-moz-range-track{background:#ccc}input[type=range]::-ms-track{height:3px;background:transparent;border-color:transparent;border-width:6px 0;color:transparent}input[type=range]::-ms-fill-lower{background:#777}input[type=range]::-ms-fill-upper{background:#ddd}input[type=range]::-ms-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--trebble-primary)}input[type=range]:focus::-ms-fill-lower{background:#888}input[type=range]:focus::-ms-fill-upper{background:#ccc}.table-of-contents.fixed{position:fixed}.table-of-contents li{padding:2px 0}.table-of-contents a{font-weight:300;color:#757575;padding-left:20px;height:1.5rem;line-height:1.5rem;letter-spacing:.4;display:inline-block}.table-of-contents a:hover{color:#a8a8a8;padding-left:19px;border-left:1px solid #ee6e73}.table-of-contents a.active{font-weight:500;padding-left:18px;border-left:2px solid #ee6e73}.side-nav{position:fixed;width:300px;left:0;top:0;margin:0;transform:translateX(-100%);height:100%;height:calc(100% + 60px);height:-moz-calc(100%);padding-bottom:60px;background-color:#fff;z-index:999;overflow-y:auto;will-change:transform;backface-visibility:hidden;transform:translateX(-105%)}.side-nav.right-aligned{right:0;transform:translateX(105%);left:auto;transform:translateX(100%)}.side-nav .collapsible{margin:0}.side-nav li{float:none;line-height:48px}.side-nav li.active{background-color:rgba(0,0,0,0.05)}.side-nav li>a{color:rgba(0,0,0,0.87);display:block;font-size:14px;font-weight:500;height:48px;line-height:48px;padding:0 32px}.side-nav li>a:hover{background-color:rgba(0,0,0,0.05)}.side-nav li>a.btn,.side-nav li>a.btn-large,.side-nav li>a.btn-large,.side-nav li>a.btn-flat,.side-nav li>a.btn-floating{margin:10px 15px}.side-nav li>a.btn,.side-nav li>a.btn-large,.side-nav li>a.btn-large,.side-nav li>a.btn-floating{color:#fff}.side-nav li>a.btn-flat{color:#343434}.side-nav li>a.btn:hover,.side-nav li>a.btn-large:hover,.side-nav li>a.btn-large:hover{background-color:#2bbbad}.side-nav li>a.btn-floating:hover{background-color:var(--trebble-primary)}.side-nav li>a>i,.side-nav li>a>[class^="mdi-"],.side-nav li>a li>a>[class*="mdi-"],.side-nav li>a>i.material-icons{float:left;height:48px;line-height:48px;margin:0 32px 0 0;width:24px;color:rgba(0,0,0,0.54)}.side-nav .divider{margin:8px 0 0 0}.side-nav .subheader{cursor:initial;pointer-events:none;color:rgba(0,0,0,0.54);font-size:14px;font-weight:500;line-height:48px}.side-nav .subheader:hover{background-color:transparent}.side-nav .user-view,.side-nav .userView{position:relative;padding:32px 32px 0;margin-bottom:8px}.side-nav .user-view>a,.side-nav .userView>a{height:auto;padding:0}.side-nav .user-view>a:hover,.side-nav .userView>a:hover{background-color:transparent}.side-nav .user-view .background,.side-nav .userView .background{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.side-nav .user-view .circle,.side-nav .user-view .name,.side-nav .user-view .email,.side-nav .userView .circle,.side-nav .userView .name,.side-nav .userView .email{display:block}.side-nav .user-view .circle,.side-nav .userView .circle{height:64px;width:64px}.side-nav .user-view .name,.side-nav .user-view .email,.side-nav .userView .name,.side-nav .userView .email{font-size:14px;line-height:24px}.side-nav .user-view .name,.side-nav .userView .name{margin-top:16px;font-weight:500}.side-nav .user-view .email,.side-nav .userView .email{padding-bottom:16px;font-weight:400}.drag-target{height:100%;width:10px;position:fixed;top:0;z-index:998}.side-nav.fixed{left:0;transform:translateX(0);position:fixed}.side-nav.fixed.right-aligned{right:0;left:auto}@media only screen and (max-width: 992px){.side-nav.fixed{transform:translateX(-105%)}.side-nav.fixed.right-aligned{transform:translateX(105%)}.side-nav a{padding:0 16px}.side-nav .user-view,.side-nav .userView{padding:16px 16px 0}}.side-nav .collapsible-body>ul:not(.collapsible)>li.active,.side-nav.fixed .collapsible-body>ul:not(.collapsible)>li.active{background-color:#ee6e73}.side-nav .collapsible-body>ul:not(.collapsible)>li.active a,.side-nav.fixed .collapsible-body>ul:not(.collapsible)>li.active a{color:#fff}.side-nav .collapsible-body{padding:0}#sidenav-overlay{position:fixed;top:0;left:0;right:0;height:120vh;background-color:rgba(0,0,0,0.5);z-index:997;will-change:opacity}.preloader-wrapper{display:inline-block;position:relative;width:50px;height:50px}.preloader-wrapper.small{width:36px;height:36px}.preloader-wrapper.big{width:64px;height:64px}.preloader-wrapper.active{animation:container-rotate 1568ms linear infinite}@keyframes container-rotate{to{transform:rotate(360deg)}}.spinner-layer{position:absolute;width:100%;height:100%;opacity:0;border-color:var(--trebble-primary)}.spinner-blue,.spinner-blue-only{border-color:#4285f4}.spinner-red,.spinner-red-only{border-color:#db4437}.spinner-yellow,.spinner-yellow-only{border-color:#f4b400}.spinner-green,.spinner-green-only{border-color:#0f9d58}.active .spinner-layer.spinner-blue{animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-red{animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-yellow{animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-green{animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer,.active .spinner-layer.spinner-blue-only,.active .spinner-layer.spinner-red-only,.active .spinner-layer.spinner-yellow-only,.active .spinner-layer.spinner-green-only{opacity:1;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}@keyframes fill-unfill-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes blue-fade-in-out{from{opacity:1}25%{opacity:1}26%{opacity:0}89%{opacity:0}90%{opacity:1}100%{opacity:1}}@keyframes red-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:1}50%{opacity:1}51%{opacity:0}}@keyframes yellow-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:1}75%{opacity:1}76%{opacity:0}}@keyframes green-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:1}90%{opacity:1}100%{opacity:0}}.gap-patch{position:absolute;top:0;left:45%;width:10%;height:100%;overflow:hidden;border-color:inherit}.gap-patch .circle{width:1000%;left:-450%}.circle-clipper{display:inline-block;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit}.circle-clipper .circle{width:200%;height:100%;border-width:3px;border-style:solid;border-color:inherit;border-bottom-color:transparent !important;border-radius:50%;animation:none;position:absolute;top:0;right:0;bottom:0}.circle-clipper.left .circle{left:0;border-right-color:transparent !important;transform:rotate(129deg)}.circle-clipper.right .circle{left:-100%;border-left-color:transparent !important;transform:rotate(-129deg)}.active .circle-clipper.left .circle{animation:left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .circle-clipper.right .circle{animation:right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}@keyframes left-spin{from{transform:rotate(130deg)}50%{transform:rotate(-5deg)}to{transform:rotate(130deg)}}@keyframes right-spin{from{transform:rotate(-130deg)}50%{transform:rotate(5deg)}to{transform:rotate(-130deg)}}#spinnerContainer.cooldown{animation:container-rotate 1568ms linear infinite,fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1)}@keyframes fade-out{from{opacity:1}to{opacity:0}}.slider{position:relative;height:400px;width:100%}.slider.fullscreen{height:100%;width:100%;position:absolute;top:0;left:0;right:0;bottom:0}.slider.fullscreen ul.slides{height:100%}.slider.fullscreen ul.indicators{z-index:2;bottom:30px}.slider .slides{background-color:#9e9e9e;margin:0;height:400px}.slider .slides li{opacity:0;position:absolute;top:0;left:0;z-index:1;width:100%;height:inherit;overflow:hidden}.slider .slides li img{height:100%;width:100%;background-size:cover;background-position:center}.slider .slides li .caption{color:#fff;position:absolute;top:15%;left:15%;width:70%;opacity:0}.slider .slides li .caption p{color:#e0e0e0}.slider .slides li.active{z-index:2}.slider .indicators{position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}.slider .indicators .indicator-item{display:inline-block;position:relative;cursor:pointer;height:16px;width:16px;margin:0 12px;background-color:#e0e0e0;transition:background-color .3s;border-radius:50%}.slider .indicators .indicator-item.active{background-color:#4CAF50}.carousel{overflow:hidden;position:relative;width:100%;height:400px;perspective:500px;transform-style:preserve-3d;transform-origin:0% 50%}.carousel.carousel-slider{top:0;left:0}.carousel.carousel-slider .carousel-fixed-item{position:absolute;left:0;right:0;bottom:20px;z-index:1}.carousel.carousel-slider .carousel-fixed-item.with-indicators{bottom:68px}.carousel.carousel-slider .carousel-item{width:100%;height:100%;min-height:400px;position:absolute;top:0;left:0}.carousel.carousel-slider .carousel-item h2{font-size:24px;font-weight:500;line-height:32px}.carousel.carousel-slider .carousel-item p{font-size:15px}.carousel .carousel-item{display:none;width:200px;height:200px;position:absolute;top:0;left:0}.carousel .carousel-item>img{width:100%}.carousel .indicators{position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}.carousel .indicators .indicator-item{display:inline-block;position:relative;cursor:pointer;height:8px;width:8px;margin:24px 4px;background-color:rgba(255,255,255,0.5);transition:background-color .3s;border-radius:50%}.carousel .indicators .indicator-item.active{background-color:#fff}.carousel.scrolling .carousel-item .materialboxed,.carousel .carousel-item:not(.active) .materialboxed{pointer-events:none}.tap-target-wrapper{width:800px;height:800px;position:fixed;z-index:1000;visibility:hidden;transition:visibility 0s .3s}.tap-target-wrapper.open{visibility:visible;transition:visibility 0s}.tap-target-wrapper.open .tap-target{transform:scale(1);opacity:.95;transition:transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-wrapper.open .tap-target-wave::before{transform:scale(1)}.tap-target-wrapper.open .tap-target-wave::after{visibility:visible;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;transition:opacity .3s,
 transform .3s,
 visibility 0s 1s}.tap-target{position:absolute;font-size:1rem;border-radius:50%;background-color:#ee6e73;box-shadow:0 20px 20px 0 rgba(0,0,0,0.14),0 10px 50px 0 rgba(0,0,0,0.12),0 30px 10px -20px rgba(0,0,0,0.2);width:100%;height:100%;opacity:0;transform:scale(0);transition:transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-content{position:relative;display:table-cell}.tap-target-wave{position:absolute;border-radius:50%;z-index:10001}.tap-target-wave::before,.tap-target-wave::after{content:'';display:block;position:absolute;width:100%;height:100%;border-radius:50%;background-color:#ffffff}.tap-target-wave::before{transform:scale(0);transition:transform .3s}.tap-target-wave::after{visibility:hidden;transition:opacity .3s,
 transform .3s,
 visibility 0s;z-index:-1}.tap-target-origin{top:50%;left:50%;transform:translate(-50%, -50%);z-index:10002;position:absolute !important}.tap-target-origin:not(.btn):not(.btn-large),.tap-target-origin:not(.btn):not(.btn-large):hover{background:none}@media only screen and (max-width: 600px){.tap-target,.tap-target-wrapper{width:600px;height:600px}}.pulse{overflow:initial;position:relative}.pulse::before{content:'';display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:inherit;border-radius:inherit;transition:opacity .3s, transform .3s;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;z-index:-1}@keyframes pulse-animation{0%{opacity:1;transform:scale(1)}50%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}.picker{font-size:16px;text-align:left;line-height:1.2;color:#000000;position:absolute;z-index:10000;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none}.picker__input{cursor:default}.picker__input.picker__input--active{border-color:#0089ec}.picker__holder{width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}/*!
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */.picker__holder,.picker__frame{bottom:0;left:0;right:0;top:100%}.picker__holder{position:fixed;transition:background 0.15s ease-out, top 0s 0.15s;-webkit-backface-visibility:hidden}.picker__frame{position:absolute;margin:0 auto;min-width:256px;width:300px;max-height:350px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;transition:all 0.15s ease-out}@media (min-height: 28.875em){.picker__frame{overflow:visible;top:auto;bottom:-100%;max-height:80%}}@media (min-height: 40.125em){.picker__frame{margin-bottom:7.5%}}.picker__wrap{display:table;width:100%;height:100%}@media (min-height: 28.875em){.picker__wrap{display:block}}.picker__box{background:#ffffff;display:table-cell;vertical-align:middle}@media (min-height: 28.875em){.picker__box{display:block;border:1px solid #777777;border-top-color:#898989;border-bottom-width:0;border-radius:5px 5px 0 0;box-shadow:0 12px 36px 16px rgba(0,0,0,0.24)}}.picker--opened .picker__holder{top:0;background:transparent;-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";zoom:1;background:rgba(0,0,0,0.32);transition:background 0.15s ease-out}.picker--opened .picker__frame{top:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;opacity:1}@media (min-height: 35.875em){.picker--opened .picker__frame{top:10%;bottom:auto}}.picker__input.picker__input--active{border-color:#E3F2FD}.picker__frame{margin:0 auto;max-width:325px}@media (min-height: 38.875em){.picker--opened .picker__frame{top:10%;bottom:auto}}@media only screen and (min-width: 601px){.picker__box{display:flex}.picker__frame{width:80%;max-width:600px}}.picker__box{padding:0;border-radius:2px;overflow:hidden}.picker__header{text-align:center;position:relative;margin-top:.75em}.picker__month,.picker__year{display:inline-block;margin-left:.25em;margin-right:.25em}.picker__select--month,.picker__select--year{height:2em;padding:0;margin-left:.25em;margin-right:.25em}.picker__select--month.browser-default{display:inline;background-color:#FFFFFF;width:40%}.picker__select--year.browser-default{display:inline;background-color:#FFFFFF;width:26%}.picker__select--month:focus,.picker__select--year:focus{border-color:rgba(0,0,0,0.05)}.picker__nav--prev,.picker__nav--next{position:absolute;padding:.5em 1.25em;width:1em;height:1em;box-sizing:content-box;top:-0.25em}.picker__nav--prev{left:-1em;padding-right:1.25em}.picker__nav--next{right:-1em;padding-left:1.25em}.picker__nav--disabled,.picker__nav--disabled:hover,.picker__nav--disabled:before,.picker__nav--disabled:before:hover{cursor:default;background:none;border-right-color:#f5f5f5;border-left-color:#f5f5f5}.picker__table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:1rem;width:100%;margin-top:.75em;margin-bottom:.5em}.picker__table th,.picker__table td{text-align:center}.picker__table td{margin:0;padding:0}.picker__weekday{width:14.285714286%;font-size:.75em;padding-bottom:.25em;color:#999999;font-weight:500}@media (min-height: 33.875em){.picker__weekday{padding-bottom:.5em}}.picker__day--today{position:relative;color:#595959;letter-spacing:-.3;padding:.75rem 0;font-weight:400;border:1px solid transparent}.picker__day--disabled:before{border-top-color:#aaaaaa}.picker__day--infocus:hover{cursor:pointer;color:#000;font-weight:500}.picker__day--outfocus{display:none;padding:.75rem 0;color:#fff}.picker__day--outfocus:hover{cursor:pointer;color:#dddddd;font-weight:500}.picker__day--highlighted:hover,.picker--focused .picker__day--highlighted{cursor:pointer}.picker__day--selected,.picker__day--selected:hover,.picker--focused .picker__day--selected{border-radius:50%;transform:scale(0.75);background:#0089ec;color:#ffffff}.picker__day--disabled,.picker__day--disabled:hover,.picker--focused .picker__day--disabled{background:#f5f5f5;border-color:#f5f5f5;color:#dddddd;cursor:default}.picker__day--highlighted.picker__day--disabled,.picker__day--highlighted.picker__day--disabled:hover{background:#bbbbbb}.picker__footer{text-align:right}.picker__button--today,.picker__button--clear,.picker__button--close{border:1px solid #ffffff;background:#ffffff;font-size:.8em;padding:.66em 0;font-weight:bold;width:33%;display:inline-block;vertical-align:bottom}.picker__button--today:hover,.picker__button--clear:hover,.picker__button--close:hover{cursor:pointer;color:#000000;background:#b1dcfb;border-bottom-color:#b1dcfb}.picker__button--today:focus,.picker__button--clear:focus,.picker__button--close:focus{background:#b1dcfb;border-color:rgba(0,0,0,0.05);outline:none}.picker__button--today:before,.picker__button--clear:before,.picker__button--close:before{position:relative;display:inline-block;height:0}.picker__button--today:before,.picker__button--clear:before{content:" ";margin-right:.45em}.picker__button--today:before{top:-0.05em;width:0;border-top:0.66em solid #0059bc;border-left:.66em solid transparent}.picker__button--clear:before{top:-0.25em;width:.66em;border-top:3px solid #ee2200}.picker__button--close:before{content:"\D7";top:-0.1em;vertical-align:top;font-size:1.1em;margin-right:.35em;color:#777777}.picker__button--today[disabled],.picker__button--today[disabled]:hover{background:#f5f5f5;border-color:#f5f5f5;color:#dddddd;cursor:default}.picker__button--today[disabled]:before{border-top-color:#aaaaaa}.picker__date-display{text-align:left;background-color:var(--trebble-primary);color:#fff;padding:18px;font-weight:300}@media only screen and (min-width: 601px){.picker__date-display{flex:1}.picker__weekday-display{display:block}.picker__container__wrapper{flex:2}}.picker__nav--prev:hover,.picker__nav--next:hover{cursor:pointer;color:#000000;background:#a1ded8}.picker__weekday-display{font-weight:500;font-size:2.8rem;margin-right:5px;margin-top:4px}.picker__month-display{font-size:2.8rem;font-weight:500}.picker__day-display{font-size:2.8rem;font-weight:500;margin-right:5px}.picker__year-display{font-size:1.5rem;font-weight:500;color:rgba(255,255,255,0.7)}.picker__calendar-container{padding:0 1rem}.picker__calendar-container thead{border:none}.picker__table{margin-top:0;margin-bottom:.5em}.picker__day--infocus{color:rgba(0,0,0,0.87);letter-spacing:-.3px;padding:0.75rem 0;font-weight:400;border:1px solid transparent}@media only screen and (min-width: 601px){.picker__day--infocus{padding:1.1rem 0}}.picker__day.picker__day--today{color:var(--trebble-primary)}.picker__day.picker__day--today.picker__day--selected{color:#fff}.picker__weekday{font-size:.9rem}.picker__day--selected,.picker__day--selected:hover,.picker--focused .picker__day--selected{border-radius:50%;transform:scale(0.9);background-color:var(--trebble-primary);color:#ffffff}.picker__day--selected.picker__day--outfocus,.picker__day--selected:hover.picker__day--outfocus,.picker--focused .picker__day--selected.picker__day--outfocus{background-color:#a1ded8}.picker__footer{text-align:right;padding:5px 10px}.picker__close,.picker__today,.picker__clear{font-size:1.1rem;padding:0 1rem;color:var(--trebble-primary)}.picker__clear{color:#f44336;float:left}.picker__nav--prev:before,.picker__nav--next:before{content:" ";border-top:.5em solid transparent;border-bottom:.5em solid transparent;border-right:0.75em solid #676767;width:0;height:0;display:block;margin:0 auto}.picker__nav--next:before{border-right:0;border-left:0.75em solid #676767}button.picker__today:focus,button.picker__clear:focus,button.picker__close:focus{background-color:#a1ded8}.picker__list{list-style:none;padding:0.75em 0 4.2em;margin:0}.picker__list-item{border-bottom:1px solid #ddd;border-top:1px solid #ddd;margin-bottom:-1px;position:relative;background:#fff;padding:.75em 1.25em}@media (min-height: 46.75em){.picker__list-item{padding:.5em 1em}}.picker__list-item:hover{cursor:pointer;color:#000;background:#b1dcfb;border-color:#0089ec;z-index:10}.picker__list-item--highlighted{border-color:#0089ec;z-index:10}.picker__list-item--highlighted:hover,.picker--focused .picker__list-item--highlighted{cursor:pointer;color:#000;background:#b1dcfb}.picker__list-item--selected,.picker__list-item--selected:hover,.picker--focused .picker__list-item--selected{background:#0089ec;color:#fff;z-index:10}.picker__list-item--disabled,.picker__list-item--disabled:hover,.picker--focused .picker__list-item--disabled{background:#f5f5f5;border-color:#f5f5f5;color:#ddd;cursor:default;border-color:#ddd;z-index:auto}.picker--time .picker__button--clear{display:block;width:80%;margin:1em auto 0;padding:1em 1.25em;background:none;border:0;font-weight:500;font-size:.67em;text-align:center;text-transform:uppercase;color:rgba(0,0,0,0.87)}.picker--time .picker__button--clear:hover,.picker--time .picker__button--clear:focus{color:#000;background:#b1dcfb;background:#ee2200;border-color:#ee2200;cursor:pointer;color:#fff;outline:none}.picker--time .picker__button--clear:before{top:-0.25em;color:rgba(0,0,0,0.87);font-size:1.25em;font-weight:bold}.picker--time .picker__button--clear:hover:before,.picker--time .picker__button--clear:focus:before{color:#fff}.picker--time .picker__frame{min-width:256px;max-width:320px}.picker--time .picker__box{font-size:1em;background:#f2f2f2;padding:0}@media (min-height: 40.125em){.picker--time .picker__box{margin-bottom:5em}}.clockpicker-display{font-size:4rem;font-weight:bold;text-align:center;color:rgba(255,255,255,0.6);font-weight:400;clear:both;position:relative}.clockpicker-span-am-pm{font-size:1.3rem;position:absolute;right:1rem;bottom:0.3rem;line-height:2rem;font-weight:500}@media only screen and (min-width: 601px){.clockpicker-display{top:32%}.clockpicker-span-am-pm{position:relative;right:auto;bottom:auto;text-align:center;margin-top:1.2rem}}.text-primary{color:#fff}.clockpicker-span-hours{margin-right:3px}.clockpicker-span-minutes{margin-left:3px}.clockpicker-span-hours,.clockpicker-span-minutes,.clockpicker-span-am-pm div{cursor:pointer}.clockpicker-moving{cursor:move}.clockpicker-plate{background-color:#eee;border-radius:50%;width:270px;height:270px;overflow:visible;position:relative;margin:auto;margin-top:25px;margin-bottom:5px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.clockpicker-canvas,.clockpicker-dial{width:270px;height:270px;position:absolute;left:-1px;top:-1px}.clockpicker-minutes{visibility:hidden}.clockpicker-tick{border-radius:50%;color:rgba(0,0,0,0.87);line-height:40px;text-align:center;width:40px;height:40px;position:absolute;cursor:pointer}.clockpicker-tick.active,.clockpicker-tick:hover{background-color:rgba(38,166,154,0.25)}.clockpicker-dial{transition:transform 350ms, opacity 350ms}.clockpicker-dial-out{opacity:0}.clockpicker-hours.clockpicker-dial-out{transform:scale(1.2, 1.2)}.clockpicker-minutes.clockpicker-dial-out{transform:scale(0.8, 0.8)}.clockpicker-canvas{transition:opacity 175ms}.clockpicker-canvas-out{opacity:0.25}.clockpicker-canvas-bearing{stroke:none;fill:var(--trebble-primary)}.clockpicker-canvas-bg{stroke:none;fill:var(--trebble-primary)}.clockpicker-canvas-bg-trans{fill:var(--trebble-primary)}.clockpicker-canvas line{stroke:var(--trebble-primary);stroke-width:4;stroke-linecap:round}

/* phonegap quirks */

/* ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-full {
  left: 100%;
}
.right-0 {
  right: 0px;
}
.top-0 {
  top: 0px;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.col-span-full {
  grid-column: 1 / -1;
}
.m-0 {
  margin: 0px;
}
.m-2 {
  margin: 0.5rem;
}
.m-auto {
  margin: auto;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-2\.5 {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-ml-1\.5 {
  margin-left: -0.375rem;
}
.-ml-2 {
  margin-left: -0.5rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-5 {
  margin-right: 1.25rem;
}
.mt-0 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.box-border {
  box-sizing: border-box;
}
.\!block {
  display: block !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-20 {
  height: 5rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-8 {
  height: 2rem;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[520px\] {
  height: 520px;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-\[400px\] {
  min-height: 400px;
}
.min-h-\[500px\] {
  min-height: 500px;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-24 {
  width: 6rem;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-5 {
  width: 1.25rem;
}
.w-52 {
  width: 13rem;
}
.w-6 {
  width: 1.5rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[114px\] {
  width: 114px;
}
.w-\[180px\] {
  width: 180px;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[800px\] {
  max-width: 800px;
}
.max-w-full {
  max-width: 100%;
}
.max-w-sm {
  max-width: 24rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-move {
  cursor: move;
}
.cursor-ne-resize {
  cursor: ne-resize;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-nw-resize {
  cursor: nw-resize;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-se-resize {
  cursor: se-resize;
}
.cursor-sw-resize {
  cursor: sw-resize;
}
.resize {
  resize: both;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.whitespace-break-spaces {
  white-space: break-spaces;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-none {
  border-radius: 0px;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-none {
  border-style: none;
}
.border-\[var\(--color-gray-200\)\] {
  border-color: var(--color-gray-200);
}
.border-\[var\(--trebble-primary\)\] {
  border-color: var(--trebble-primary);
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-neutral-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 245 / var(--tw-border-opacity));
}
.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity));
}
.\!bg-\[var\(--trebble-primary-20\)\] {
  background-color: var(--trebble-primary-20) !important;
}
.bg-\[var\(--bg-default\)\] {
  background-color: var(--bg-default);
}
.bg-\[var\(--trebble-primary-20\)\] {
  background-color: var(--trebble-primary-20);
}
.bg-\[var\(--trebble-primary-50\)\] {
  background-color: var(--trebble-primary-50);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-yellow-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-start {
  text-align: start;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.text-\[var\(--color-black-20\)\] {
  color: var(--color-black-20);
}
.text-\[var\(--trebble-primary\)\] {
  color: var(--trebble-primary);
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-primary {
  color: var(--trebble-primary);
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.underline {
  text-decoration-line: underline;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.outline-2 {
  outline-width: 2px;
}
.outline-offset-2 {
  outline-offset: 2px;
}
.outline-\[var\(--trebble-primary\)\] {
  outline-color: var(--trebble-primary);
}
.outline-black {
  outline-color: #000;
}
.outline-primary {
  outline-color: var(--trebble-primary);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-primary {
  --tw-ring-color: var(--trebble-primary);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[border-color\2c background-color\] {
  transition-property: border-color,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}


/* Root variables for consistent theming */
:root {
  /* Core Brand Colors */
    --trebble-primary-rgb: 236, 127, 84;
    /* Blues */
    --color-blue-300: #1389f0;
    --color-blue-400: #2980b9;
    --color-blue-500: #62b8e3;
    --color-blue-600: #3b5998;
    /* Facebook blue */
    /* Greens */
    --color-green-400: #2ecc71;
    --color-green-500: #27ae60;
    --color-green-600: #48af4a;
    /* Purples */
    --color-purple-300: #9c4df9;
    --color-purple-500: #8e44ad;
    --color-purple-550: #9b59b6;
    /* Grays - adding to existing gray sca[data-role=popup] inputle */
    --color-gray-100: #eeeeee;
    /* lightest - for backgrounds, borders */
    --color-gray-150: #dddddd;
    /* rgb(221, 221, 221) */
    --color-gray-200: #e5e5e5;
    /* your existing --color-gray-light */
    --color-gray-300: #cccccc;
    /* your existing --color-disabled */
    /* New suggested variable */
    --color-gray-350: #c0c0c7;
    /* rgb(192, 192, 199) - sits between 300 and 400 */
    --color-gray-400: #bdc3c7;
    --color-gray-500: #919191;
    --color-gray-550: #898686;
    --color-gray-600: #6d6b6b;
    --color-gray-700: #595959;
    --color-gray-750: #aba7a7;
    --color-gray-800: #a8aeb9;
    --color-gray-850: #222222;
    /* Very dark gray */
    --color-gray-900: #444444;
    --color-background-light: var(--color-white);
    /* your existing --color-gray-dark */
    /* Grays */
  
    /* Used 10 times - warm background */
    --color-error-bright: #ff3c4c;
    /* Used 2 times - bright error */
    /* Single-use colors that need variables (if semantically important) */
    --color-blue-gradient: #6686df;
    --color-pink-gradient: #ec4c7a;
    --color-purple-dark: #af2896;
    --color-pink-light: #fdd0d0;
    --color-warning-bright: #ffdf65;
    /* Black with opacity */
    --color-black-0: rgba(0, 0, 0, 0);
    --color-black-5: rgba(0, 0, 0, 0.05);
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-30: rgba(0, 0, 0, 0.3);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-60: rgba(0, 0, 0, 0.6);
    --color-black-70: rgba(0, 0, 0, 0.7);
    --color-black-80: rgba(0, 0, 0, 0.8);
    --color-black-100: rgba(0, 0, 0, 1);
    /* white with opacity */
    --color-white-0: rgba(255, 255, 255, 0);
    --color-white-5: rgba(255, 255, 255, 0.05);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-70: rgba(255, 255, 255, 0.7);
    --color-white-80: rgba(0255, 255, 255, 0.8);
    --color-white-90: rgba(0255, 255, 255, 0.9);
    --color-white-100: rgba(255, 255, 255, 1);
    /* Box Shadows */
    --shadow-color-light: rgba(74, 74, 74, 0.05);
    --color-purple-400: #800080;
    /* standard purple */
    --color-purple-500: #9c27b0;/* Colors */
    --color-white: #fff;
    --color-black: #111;
    /* Brand Colors */
    --trebble-primary: #EC7F54; /* 500 */
    --trebble-primary-50: #fef3ef;
    --trebble-primary-100: #fde7df;
    --trebble-primary-200: #f9c5b4;
    --trebble-primary-300: #f4a289;
    --trebble-primary-400: #ef8f6e;
    --trebble-primary-500: #EC7F54; /* Base color */
    --trebble-primary-600: #d66339;
    --trebble-primary-700: #b24a26;
    --trebble-primary-800: #8f371a;
    --trebble-primary-900: #722112;
    --trebble-primary-dark: #ac3e13;
    --trebble-primary-light: #f9d4c6;
    --trebble-secondary: #19b5fe;
    --trebble-blue: #275ef5;
    /* Purple/Brand Colors */
    --trebble-purple-active: #6327f5;
    /* Used for playing/active states */
    /* Color Scales */
    /* Trebble Primary Scale */



    /* Brand Colors */


    /* Other colors that need variables */
    --color-red-600: #c72624;
    --color-orange-500: #ca8a30;
    --color-gray-400: #c1c1c1;
    --color-orange-200: rgb(228, 171, 87);
    /* Used 6 times */
    --color-orange-400: #e39b2d;
    /* Darker shade */
    --color-orange-300: #fdb547;
    /* Lighter shade */
    /* Pinks */
    --color-pink-500: #e02d6f;
    /* Used 5 times - distinct pink shade */
    /* Oranges */
    --color-warning-400: #f1c40f;
    /* Used 3 times - yellow warning */
    --color-warning-500: #f4b400;
    /* Used 3 times - another warning shade */
    --color-twitter: #00aced;
    /* Twitter blue */
    --color-success-alt: #0ab5aa;
    /* Distinct teal color */
    --gradient-pink-light: #f38198;
    /* Used in gradient */
    --gradient-purple-light: #bd8ef1;
    /* Used in gradient */
    /* Success Colors */
    --success-green: #62c462;
    /* Used in success gradient */
    --success-green-alt: #75beaa;
    /* Used in success gradient */
    /* Gradient Base Colors */
    --trebble-gradient-pink: #fc466b;
    /* Pink used in gradients */
    --trebble-gradient-purple: #a044ff;
    /* Purple used in gradients */
    /* Gradient Definitions */
    --gradient-primary: linear-gradient(
     270deg,
     var(--trebble-gradient-pink) 25%,
     var(--trebble-blue) 100%
    );
    --gradient-primary-alt-old: linear-gradient(
     135deg,
     var(--trebble-gradient-pink) 25%,
     var(--trebble-blue) 100%
    );
    --gradient-primary-alt: linear-gradient(45deg, var(--trebble-primary),var(--color-pink-500));
    --gradient-primary-alt-reverse-old: linear-gradient(
     -135deg,
     var(--trebble-gradient-pink) 25%,
     var(--color-blue-gradient) 100%
    );
    --gradient-primary-alt-reverse:linear-gradient(
        -135deg,
        var(--color-pink-500) 25%,
        var(--trebble-primary) 100%
       );
    --gradient-error: linear-gradient(
     270deg,
     var(--color-pink-gradient) 25%,
     var(--error) 100%
    );
    --gradient-pink-purple: linear-gradient(
     135deg,
     var(--gradient-pink-light) 25%,
     var(--gradient-purple-light) 100%
    );
    --gradient-fade-dark: linear-gradient(
     rgba(var(--color-black), 0) 0%,
     rgba(var(--color-black), 0.4) 30%,
     rgba(var(--color-black), 1) 100%
    );
    --gradient-fade-dark-simple: linear-gradient(
     var(--color-black-20) 0%,
     var(--color-black-80) 100%
    );
    /* New top fade gradient */
    --gradient-fade-dark-top: linear-gradient(
     rgba(17, 17, 17, 0.5) 0%,
     rgba(17, 17, 17, 0) 100%
    );
    /* OR using your color variables */
    --gradient-fade-dark-top: linear-gradient(
     rgba(var(--color-black), 0.5) 0%,
     rgba(var(--color-black), 0) 100%
    );
    /* Text Colors */
    --text-dark: #121212;
    --text-light: var(--color-white);
    --text-default-tooltip-color: var(--text-light);
    --bg-default-tooltip-color: var(--text-black-10);
    --text-muted: var(--color-white-70);
    --text-muted-dark: rgba(0, 0, 0, 0.5);

    --text-default-color: var(--text-dark);
    --border-default-color: var(--color-gray-100);

    /* Background Colors */
    --bg-light: #f5f5f5;
    --bg-dark: #232323;
    --bg-default: var(--color-white);
    --bg-overlay-light: var(--color-white-5);
    --bg-overlay-dark: rgba(0, 0, 0, 0.03);
    /* Status Colors */
    --success: #6fcf97;
    --warning: #f2c94c;
    --error: #ec4747;
    --info: #66aaf3;
    /* Social Colors */
    --pink: #d10583;
    /* Brand/Accent Colors *//* or */
    /* Pulse Colors */
    --pulse-yellow: #cca92c;
    /* rgba(204,169,44) */
    --pulse-green: #17b47a;
    /* rgba(23,180,122) */
    --pulse-gray: #bbbbbb;
    /* rgba(187,187,187) */
    /* Pulse Animation Properties */
    --pulse-size: 10px;
    --pulse-opacity: 0.4;
    --pulse-duration: 2s;
    --pulse-scale-small: 1.05;
    --pulse-scale-medium: 1.1;
    /* Frequently Used Colors (5+ times) */
    --color-pink-alt: rgb(232, 31, 77);
    /* Used 5 times */
    /* Alpha Variations */
    --trebble-primary-0: rgba(var(--trebble-primary-rgb), 0);
    --trebble-primary-5: rgba(var(--trebble-primary-rgb), 0.05);
    --trebble-primary-10: rgba(var(--trebble-primary-rgb), 0.1);
    --trebble-primary-15: rgba(var(--trebble-primary-rgb), 0.15);
    --trebble-primary-20: rgba(var(--trebble-primary-rgb), 0.2);
    --trebble-primary-25: rgba(var(--trebble-primary-rgb), 0.25);
    --trebble-primary-30: rgba(var(--trebble-primary-rgb), 0.3);
    --trebble-primary-70: rgba(var(--trebble-primary-rgb), 0.7);
    --trebble-primary-dark-35: rgba(186, 76, 74, 0.35);
    /* Alpha Variations of Secondary Colors */
    --trebble-secondary-90: rgba(25, 181, 254, 0.9);
    /* Warning/Error Colors with Alpha */
    --error-90: rgba(239, 72, 54, 0.9);
    --warning-90: rgba(245, 171, 53, 0.9);
    /* Gray Scale with Alpha */
    --gray-overlay-20: rgba(94, 97, 99, 0.2);
    --gray-overlay-40: rgba(94, 97, 99, 0.4);
    --gray-light-15: rgb(173 159 163 / 15%);
    --gray-light-30: rgb(173 159 163 / 30%);
    /* Base Pulse Colors */
    --pulse-yellow-rgb: 204, 169, 44;
    /* #CCA92C */
    --pulse-green-rgb: 23, 180, 122;
    /* #17B47A */
    --pulse-gray-rgb: 187, 187, 187;
    /* #BBBBBB */--pulse-green: rgb(var(--pulse-green-rgb));
    --pulse-green-alpha: rgba(var(--pulse-green-rgb), var(--pulse-opacity));
    --pulse-green-base: rgba(var(--pulse-green-rgb), 0);
    --pulse-gray: rgb(var(--pulse-gray-rgb));
    --pulse-gray-alpha: rgba(var(--pulse-gray-rgb), var(--pulse-opacity));
    --pulse-gray-base: rgba(var(--pulse-gray-rgb), 0);
    /* Misc Overlay Colors */
    /* Special Purpose Colors */
    --color-success-70: rgba(23, 180, 122, 0.7);
    --color-olive: rgb(90 96 8);
    --color-olive-50: rgb(90 96 8 / 50%);
    --color-white-10: rgb(255 255 255 / 10%);
   /* Base text scale (em-based) - These stay the same */
--text-3xs: 0.5em;      /* 8px at 16px base */
--text-2xs: 0.625em;    /* 10px at 16px base */
--text-xs: 0.75em;      /* 12px at 16px base */
--text-sm: 0.875em;     /* 14px at 16px base */
--text-base: 1em;       /* 16px base */     /* 18px at 16px base */
--text-lg: 1.25em;      /* 20px at 16px base */
--text-xl: 1.5em;       /* 24px at 16px base */     /* 28px at 16px base */
--text-3xl: 1.875em;    /* 30px at 16px base */
--text-4xl: 2em;        /* 32px at 16px base */
--text-5xl: 2.5em;      /* 40px at 16px base */
--text-6xl: 3em;        /* 48px at 16px base */
--text-7xl: 3.75em;/* Pixel-based alternatives - Adjusted for 16px base */
--text-3xs-px: 8px;     /* Minimum recommended for very short, supplementary text */
--text-2xs-px: 10px;    /* Use sparingly, for labels only */
--text-xs-px: 12px;     /* Minimum for short, supplementary text */
--text-sm-px: 14px;     /* Good for secondary text */
--text-base-px: 16px;   /* Base size - Good for body text */
--text-base-15px: 15px;
--text-md-px: 18px;     /* Enhanced readability */
--text-lg-px: 20px;     /* Good for important text */
--text-xl-px: 24px;     /* Sub-headings */
--text-2xl-px: 28px;    /* Small headings */
--text-3xl-px: 30px;    /* Medium headings */
--text-4xl-px: 32px;    /* Large headings */
--text-5xl-px: 40px;    /* Extra large headings */
--text-6xl-px: 48px;    /* Major headings */
--text-7xl-px: 60px;    /* Hero text */
--text-8xl-px: 80px;    /* Large hero text */
--text-9xl-px: 120px;   /* Extra large display text */  /* Maximum display text */
--text-base-rem: 1rem;/* Border width scale */
  --border-0: 0;              /* 76 uses - Add to system for explicit 0 */
  --border-1: 1px;           /* 104 uses - Default border */
  --border-2: 2px;           /* 108 uses - Medium border */
  --border-3: 3px;           /* 36 uses - Add to system since frequently used */
  --border-4: 4px;           /* 16 uses - Thick border */
  --border-8: 8px;
    /* Edge cases to standardize - 16% of usage (61 declarations) */           /* 9 uses - consider standardizing to --border-4 */
    --size-full: 100%;    /* Used 488 times - most common */
     --size-half: 50%;     /* Used 42 times (grouped 49-var(--size-half)) */
     --size-third: 33%;    /* Grouped around 31-var(--size-third) (6 uses) */
     --size-quarter: 25%;  /* Grouped around 24-var(--size-quarter) (8 uses) */
     --size-fifth: 20%;    /* Used 6 times */
     --size-micro: 0.5%;   /* Used 1var(--size-none) times */
     /* Small pixel values (var(--size-none)-2var(--size-none)) */
     --space-3xs: 5px;     /* Groups around 4-6px */
     --space-2xs: 10px;    /* Groups around 9-var(--space-xs) */
     --space-xs: 15px;     /* Groups around 13-1var(--space-2xs) */
     --space-sm: 21px;     /* Groups around 19-23px */
     --size-icon-sm: 36px;    /* Groups around 34-var(--size-icon-sm) (22 uses) */
     --size-icon-md: 45px;    /* Groups around 42-var(--size-icon-md) (33 uses) */
     --size-icon-lg: 52px;/* Layout sizes (10var(--size-none)-50var(--size-none)) */
     --size-layout-2xs: 160px;  /* Groups around 154-17var(--size-none) (19 uses) */
     --size-layout-xs: 180px;   /* Groups around 175-19var(--size-none) (11 uses) */
     --size-layout-sm: 240px;   /* Groups around 234-26var(--size-none) (15 uses) */
     --size-layout-md: 280px;
     --size-layout-3xl: 469px;  /* Groups around 46var(--size-none)-47var(--size-none) (14 uses) *//* EM values */
     --size-em-2xs: 0.2em;
     --size-em-lg: 4em;       /* Groups around 4-4.2em (11 uses) */
     /* Keep existing variables that are being used */
     --text-2xl: 1.75em;      /* Close to 1.7em uses */
     --text-md: 1.125em;      /* Close to 1.1em uses */
     --size-none: 0px;        /* 509 uses, consolidate 0px, -0px, 0.5px, -1px, -2px, -3px */
     --size-50: 50px;         /* 101 uses */
     --size-500: 500px;       /* 106 uses, consolidate 50var(--size-none)-55var(--size-none) range */
     --size-200: 200px;       /* 76 uses */
     --size-100: 100px;       /* 75 uses, consolidate 9var(--size-none)-10var(--size-none) */
     --size-400: 400px;       /* 56 uses, consolidate 38var(--size-none)-41var(--size-none) */
     --size-300: 300px;       /* 45 uses, consolidate 30var(--size-none)-33var(--size-none) */
     --size-340: 340px;       /* 45 uses, consolidate 30var(--size-none)-33var(--size-none) */         /* 43 uses, consolidate 66-var(--size-7var(--size-none)) *//* Add missing viewport units */
    /* Add missing text size */
    --text-10xl-px: 140px;        /* For very large display text */
    /* Add missing space variables */             /* Medium spacing */             /* Large spacing */             /* Extra large spacing */
    --space-xxl: 100px;             /* Extra Extra large spacing */
    --space-3xl: 120px;             /* Extra Extra large spacing */
    --space-4xl: 150px;             /* Extra Extra large spacing */
 /* Base shadows */
 --shadow-none: none;--shadow-sm: 0 5px 10px var(--color-black-20);
 --shadow-md: 0 5px 15px 0px var(--color-black-20);
 --shadow-lg: 0 10px 30px 0 var(--color-black-30);

 /* Inner shadows */
 --shadow-inner-sm: inset 0px 3px 6px 0px var(--color-black-10);
 --shadow-inner-md: inset 0px 3px 6px 0px var(--color-black-20);
 --shadow-inner-lg: inset 0px 0px 85px var(--color-black-50);
 /* Directional shadows */
 --shadow-top: 0px -3px 8px 0px var(--color-black-20);
 --shadow-right: 2px 0 12px 0 var(--shadow-color-light);
 --shadow-right-lg: 2px 0 20px 0 var(--gray-light-30);
 --shadow-bottom: 0 5px 20px var(--color-black-20);--shadow-ambient-lg: 0 0 50px var(--color-black-30);
 /* Complex shadows */
 --shadow-overlay: 0 6px 16px 0 var(--color-black-10),
                  0 3px 6px -4px var(--color-black-10),
                  0 9px 28px 8px var(--color-black-5);
 --shadow-complex-1: 0px 5px 11px -2px var(--color-black-30),
                    0px 4px 12px -7px var(--color-black-30);
 --shadow-complex-2: 0 0 4px var(--color-black-30),
                    0 4px 8px var(--color-black-40);
 /* Special effects */
 --shadow-glow: 0 0 10px 5px var(--color-black-5);
 --shadow-focus: 0 0 2px 2px var(--trebble-primary-25);
 --shadow-highlight: 1px -1px 10px 6px var(--gray-light-15);
 --shadow-floating: 9px 9px 40px var(--color-black-50);
     /* Utility shadows */
     --shadow-edge-light: 2px 0 12px 0 var(--color-black-5);  /* Standardize on color-black-5 */
     --shadow-edge: 2px 0 12px 0 var(--shadow-color-light);
     --shadow-depth: 5px 5px 30px var(--text-muted-dark);
      /* Size Scale - Based on Analysis */
      --size-12: 12px;        /* Used 8 times */
      --size-14: 14px;        /* Used 8 times */
      --size-16: 16px;        /* Used 8 times */
      --size-20: 20px;        /* Used 8 times */
    --size-22: 22px;        /* Used 4 times - width/height */
    --size-25: 25px;        /* Used 4 times - width/height */
    --size-70: 70px;        /* Used 4 times - width/height */
    --size-75: 75px;        /* Used 4 times - width/height */
    --size-80: 80px;        /* Used 4 times - width/height */
    --size-160: 160px;      /* Used 3 times - min-width/height */
    --size-180: 180px;      /* Used 4 times - height/min-width */
    --size-240: 240px;      /* Used 4 times - width/height/min-width */
    --size-280: 280px;      /* Used 4 times - height/width */
    --size-330: 330px;      /* Used 3 times */
    --size-350: 350px;      /* Used 2 times */
    --size-430: 430px;      /* Used 3 times */
    --size-700: 700px;/* EM-based Sizes - Frequently Used */
    --size-1em: 1em;
    --size-1-7em: 1.7em;    /* Used 5 times */
    --size-2em: 2em;
    --size-3-5em: 3.5em;    /* Used 5 times */
    --size-4em: 4em;        /* Used 6 times */
    --size-30: 30px;
    --size-170: 170px;        /* Used 3 times (max-width specific) */
     --size-260: 260px;        /* Used 3 times (max-width specific) */
     --size-inherit: inherit;      /* Used 6 times */
     --size-unset: unset;         /* Used 3 times *//* Missing Viewport Units */
     --space-md: 30px;            /* Medium spacing */
     --space-lg: 40px;            /* Large spacing */
     --space-xl: 60px;            /* Extra large spacing */
     /* Missing Border Values */
     --border-5: 5px;             /* 9 uses */
     --border-6: 6px;/* Missing Size Variables */
  --size-0: 0px;
  --size-1: 1px;
  --size-2: 2px;
  --size-3: 3px;
  --size-4: 4px;
  --size-8: 8px;
  --size-10: 10px;
  --size-32: 32px;
  --size-36: 36px;
  --size-40: 40px;
  --size-60: 60px;
  --size-90: 90px;
  --size-116: 116px;
  --size-120: 120px;
  --size-140: 140px;
  --size-150: 150px;
  --size-360: 360px;
  --size-450: 450px;
  --size-470: 470px;
  --size-600: 600px;
  --size-800: 800px;
  --size-900: 900px;
  /* Missing Color Variables */
  --color-gray-450: #a3a3a3;    /* Medium gray */
  --color-white-1: rgba(255, 255, 255, 0.01);
  --color-white-3: rgba(255, 255, 255, 0.03);
  /* Missing Gray Light Variable */
  --gray-light-60: rgba(173, 159, 163, 0.6);  /* Matches your existing gray-light pattern */
  /* Transform Variable */
  /* Missing Gradient */
  --gradient-fade-dark-to: rgba(0, 0, 0, 0.8);  /* Gradient end color, adjust opacity as needed */--vh-full: 100vh;/* Viewport Width Variables */
    --vw-full: 100vw;--size-250: 250px;/* Small sizes (0-10px) */
  --size-5: 5px;
  --size-6: 6px;
  /* Medium sizes (20-50px) */
  --size-24: 24px;
  --size-27: 27px;
  --size-39: 39px;
  --size-46: 46px;
  --size-52: 52px;
  /* Large sizes (>100px) */
  --size-196: 196px;
  --size-380: 380px;
  /* EM-based sizes */
  --size-0-5em: 0.5em;
  /* Base Line Heights (xs to lg) */
  --line-height-sm: 14px;        /* Small */
  --line-height-base: 16px;      /* Base */
  --line-height-lg: 18px;        /* Large */
  /* XL Scale Line Heights */
  --line-height-2xl: 20px;       /* 42 uses */
  --line-height-2-5xl: 25px;     /* 10 uses */
  --line-height-3xl: 30px;       /* 60 uses */
  --line-height-3-2xl: 32px;     /* 15 uses */
  --line-height-4xl: 40px;       /* 82 uses */
  --line-height-4-5xl: 45px;     /* 23 uses */
  --line-height-4-8xl: 48px;     /* 7 uses */
  --line-height-5xl: 50px;       /* 77 uses */
  --line-height-5-1xl: 51px;     /* 9 uses */
  --line-height-5-4xl: 54px;     /* 9 uses */
  --line-height-6xl: 60px;       /* 35 uses */
  --line-height-10xl: 100px;     /* 48 uses */
  /* EM-based Line Heights */
  --line-height-1: 1em;          /* 9 uses */
  --line-height-1-5: 1.5em;      /* 3 uses */
  --line-height-1-7: 1.7em;      /* 5 uses */
  --line-height-2: 2em;          /* 11 uses */
  --line-height-2-5: 2.5em;      /* 3 uses */
  --line-height-3-5: 3.5em;      /* 5 uses */
  /* Unitless Line Heights */
 
  --editor-left-section-width: 330px;
  --editor-right-section-width: 320px;
  --editor-text-container-shadow: 0px 4px 8px 0px #00000020;
  
  --trebble-accent: #4d1627;
  --trebble-accent-300: #77364B;
  --trebble-accent-200: #A26578;

  --trebble-accent-complentary: #70A098;
  --trebble-secondary-color-1-light : #cfef82;
  --trebble-secondary-color-1 : #a8e21d;
  --trebble-secondary-color-1-dark : #384b0a;
  --trebble-secondary-color-2-light : #d4bbfc;
  --trebble-secondary-color-2 : #c5a3fb;
  --trebble-secondary-color-2-dark :#210253;
  --trebble-secondary-color-3-light : #ffa7d4;
  --trebble-secondary-color-3 : #ffa7d4;
  --trebble-secondary-color-3-dark : #55002b;
  
  --trebble-secondary-color-4-light : #ade6ed;
  --trebble-secondary-color-4 : #82d9e3;
  --trebble-secondary-color-4-dark : #0f4046;

--trebble-font : 'Trebblefont';
  
  --line-height-none: 1;
}

body.darkTheme,
body .ui-page.lighttext{
    --text-default-color: var(--text-light);
    --border-default-color: var(--color-gray-900);
    --bg-default: var(--color-black);
    --text-default-tooltip-color: var(--text-dark);
    --bg-default-tooltip-color: var(--text-white-10);
}
   
  
  
  /* Base Styles */

html {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;  
    -webkit-touch-callout: none;
}
html, 
body {
    height: var(--size-full);

}

input, select, textarea,
input:focus, select:focus, textarea:focus { 
    -webkit-appearance: none; 
       -moz-appearance: none; 
            appearance: none; 
    border-radius: 0; 
    outline:none;
}
body.ui-mobile-viewport,
div.ui-mobile-viewport {
   overflow: hidden;
}

.ui-btn, body, button, input, select, textarea{
    transition: all .3s;
}

body  > object{
  display:none !important;
  
}
a,
.text_link{
    color: var(--trebble-primary);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
}
/* THIS IS DONE TO CANCEL STYLE FROM MATERIALIAZECSS --START-- */
*, *:before, *:after {
    box-sizing: unset;
}

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    line-height: 1.3;
}

/* THIS IS DONE TO CANCEL STYLE FROM MATERIALIAZECSS --END-- */

button.ant-btn-primary, [type='button'].ant-btn-primary, [type='reset'].ant-btn-primary, [type='submit'].ant-btn-primary{
    background-color: var(--trebble-primary);
}

body.browser.web ,
body.browser.web a{
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( -webkit-min-device-pixel-ratio: 2.0833333333333335),
only screen and ( min-resolution: 200dpi),
only screen and ( -webkit-min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 1.25dppx) {
    html {
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

@media (min-width: 55em) {
    .ui-panel-dismiss-display-push.ui-panel-dismiss-open {
        display: none;
    }
}

input, select, textarea,
input:focus, select:focus, textarea:focus { 
    -webkit-appearance: none; 
       -moz-appearance: none; 
            appearance: none; 
    border-radius: 0; 
    outline:none;
}


.trebbleCustomPageTransition.in {
    animation-name: slideInRight;
    -moz-animation-name: slideInRight;
}
.trebbleCustomPageTransition.out {
    animation-name: slideOutLeft;
    -moz-animation-name: slideOutLeft;
}
.trebbleCustomPageTransition.in.reverse {
    animation-name: slideInLeft;
    -moz-animation-name: slideInLeft;
}
.trebbleCustomPageTransition.out.reverse {
    animation-name: slideOutRight;
    -moz-animation-name: slideOutRight;
}

.in {
    animation-timing-function: ease-out;
    animation-duration: 5000ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 500ms;
}

.out {
    animation-timing-function: ease-in;
    animation-duration: 3000ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 3000ms;
}


/**
* Styles to fix the new iOS 7 transparent status bar
*/

#ios7statusbar {
    width: var(--size-full);
    height: var(--size-20);
    background-color: white;
    position: fixed;
    z-index: 10000;
}
.ios7 .ui-page,
.ios7 .ui-header,
.ios7 .ui-pane {
    margin-top: var(--space-sm);
}
/* Bootstrape typeahead  import**/

.trebblePageSlide.in {
    animation-name: bounceInLeft;
    animation-timing-function: ease-out;
    animation-duration: 600ms;
}
.trebblePageSlide.out {
    animation-name: bounceOutLeft;
    animation-timing-function: ease-in;
    animation-duration: 500ms;
}
.trebblePageSlide.in.reverse {
    animation-name: bounceInLeft;
}
.trebblePageSlide.out.reverse {
    animation-name: bounceOutRight;
}
.trebbleDialogPop.in {
    animation-name: bounceInUp;
    animation-timing-function: ease-out;
    animation-duration: 600ms;
}
.trebbleDialogPop.out {
    animation-name: bounceOutUp;
    animation-timing-function: ease-in;
    animation-duration: 500ms;
}
.trebbleDialogPop.in.reverse {
    animation-name: bounceInDown;
}
.trebbleDialogPop.out.reverse {
    animation-name: bounceOutDown;
}
body.browser.mobileweb .songLibraryWrapper > .infiniteListItem:hover,
body.browser.mobileweb .songLibraryWrapper > .infiniteListItem:hover ~ .explicitIconWrapper,
body.browser.mobileweb #songLibraryOptionButtuon:hover,
body.browser.mobileweb #songCapsuleOptionButtuon:hover,
body.browser.mobileweb #gradeOptionButtuon:hover,
body.browser.mobileweb .showCommentBtnWrapper #showCommentOptionButton:hover,
body.browser.mobileweb .showInfoBtnWrapper #showInfoOptionButton:hover,
body.browser.mobileweb #addToTrebbleOptionButtuon:hover,
body.browser.mobileweb #addToTrebbleOptionButtuon.ion-ios7-checkmark-outline:hover,
body.browser.mobileweb #gradeOptionButtuon.ion-ios7-pricetags:hover,
body.browser.mobileweb #songCapsuleOptionButtuon:hover,
body.browser.mobileweb div.songLibraryWrapper.songlistItem>.capsuleBtnWrapper>#songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb div.songLibraryWrapper.songlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb div.songLibraryWrapper.albumlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb div.songLibraryWrapper.artistlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb div.songLibraryWrapper.songlistItem > .songOptionBtnWrapper > #actionButton.enabled:hover,
body.browser.mobileweb div.songLibraryWrapper.albumlistItem > .actionButtonWrapper > #actionButton.enabled:hover,
body.browser.mobileweb div.songLibraryWrapper.artistlistItem > .actionButtonWrapper> #actionButton.enabled:hover,
body.browser.mobileweb .userListItem:hover  {
    background-color: var(--bg-overlay-dark);
    border-color: var(--bg-overlay-dark);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}
body.browser.mobileweb .lighttext * .songLibraryWrapper > .infiniteListItem:hover,
body.browser.mobileweb .lighttext * .songLibraryWrapper > .infiniteListItem:hover ~  .explicitIconWrapper,
body.browser.mobileweb .lighttext * #songLibraryOptionButtuon:hover,
body.browser.mobileweb .lighttext * #songCapsuleOptionButtuon:hover,
body.browser.mobileweb .lighttext * #gradeOptionButtuon:hover,
body.browser.mobileweb .lighttext * .showCommentBtnWrapper #showCommentOptionButton:hover,
body.browser.mobileweb .lighttext * .showInfoBtnWrapper #showInfoOptionButton:hover,
body.browser.mobileweb .lighttext * #addToTrebbleOptionButtuon:hover,
body.browser.mobileweb .lighttext * #addToTrebbleOptionButtuon.ion-ios7-checkmark-outline:hover,
body.browser.mobileweb .lighttext * #gradeOptionButtuon.ion-ios7-pricetags:hover,
body.browser.mobileweb .lighttext * #songCapsuleOptionButtuon:hover,
body.browser.mobileweb .lighttext * div.songLibraryWrapper.songlistItem>.capsuleBtnWrapper>#songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb [data-role=popup] * .songLibraryWrapper:hover ,
body.browser.mobileweb .lighttext * div.songLibraryWrapper.songlistItem>.capsuleBtnWrapper>#songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb .lighttext * div.songLibraryWrapper.songlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb .lighttext * div.songLibraryWrapper.albumlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb .lighttext * div.songLibraryWrapper.artistlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb .lighttext * div.songLibraryWrapper.songlistItem > .songOptionBtnWrapper > #actionButton.enabled:hover,
body.browser.mobileweb .lighttext * div.songLibraryWrapper.albumlistItem > .actionButtonWrapper > #actionButton.enabled:hover,
body.browser.mobileweb .lighttext * div.songLibraryWrapper.artistlistItem > .actionButtonWrapper> #actionButton.enabled:hover,
body.browser.mobileweb .selectionListItem:hover {
    background-color: var(--bg-overlay-light);
    border-color: var(--color-white-5);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}


.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: var(--size-160);
    padding: var(--size-none);
    margin: var(--border-2) 0 0;
    list-style: none;
    /* background-color: var(--color-white-30);*/
    
    background-color: white;
    color: var(--text-dark);
    border: var(--border-1) solid var(--color-gray-300);
    border: var(--border-1) solid var(--color-black-20);
    border-right-width: var(--border-2);
    border-bottom-width: var(--border-2);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    background-clip: padding-box;
}
.dropdown-menu.pull-right {
    right: 0;
    left: auto;
}
.dropdown-menu .divider {
    width: var(--size-full);
    height: var(--size-1);
    margin: var(--space-2xs) var(--border-1);
    margin: calc(var(--border-5) * -1) 0 var(--space-3xs);
    overflow: hidden;
    background-color: var(--color-gray-200);
    border-bottom: var(--border-1) solid var(--text-light);
}
.dropdown-menu>li>a {
    text-decoration: none;
    display: block;
    padding: var(--border-3) var(--space-sm);
    clear: both;
    font-weight: normal;
    line-height: var(--line-height-3xl);
    color: white;
    white-space: nowrap;
}
.dropdown-menu > li > a > .mention_username {
    color: var(--text-dark) !important;
    font-weight: 400;
}
.dropdown-menu > li.active > a > .mention_username {
    color: white !important;
    font-weight: 400;
}
[data-role=page] * .dropdown-menu > li > a {
    /* border-bottom: var(--border-1) solid var(--color-gray-150); */
}
[data-role=page] * .dropdown-menu > li > a:active {
    border-bottom: var(--border-1) solid white;
    color: white !important;
    background-color: var(--trebble-primary);
}
[data-role=page] * .dropdown-menu > li > a:active > .mention_username {
    color: white !important;
    font-weight: 400;
}
body.browser.mobileweb .dropdown-menu>li>a:hover,
body.browser.mobileweb .dropdown-menu>li>a:focus,
body.browser.mobileweb .dropdown-submenu:hover>a,
body.browser.mobileweb .dropdown-submenu:focus>a {
    text-decoration: none;
    color: var(--text-light);
    background-color: var(--trebble-primary);
}
.dropdown-menu>.active>a,
body.browser.mobileweb .dropdown-menu>.active>a:hover,
body.browser.mobileweb .dropdown-menu>.active>a:focus {
    color: var(--text-light);
    text-decoration: none;
    outline: 0;
    background-color: var(--trebble-primary);
}
[data-role=page] *.dropdown-menu>.active>a,
body.browser.mobileweb [data-role=page] * .dropdown-menu>.active>a:hover > span.mention_username,
body.browser.mobileweb [data-role=page] * .dropdown-menu>.active>a:focus >.mention_username {
    color: white !important;
}
.dropdown-menu>.disabled>a,
body.browser.mobileweb .dropdown-menu>.disabled>a:hover,
body.browser.mobileweb .dropdown-menu>.disabled>a:focus {
    color: var(--color-gray-550);
}
body.browser.mobileweb .dropdown-menu>.disabled>a:hover,
body.browser.mobileweb .dropdown-menu>.disabled>a:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    cursor: default;
}
.typeahead {
    z-index: 1051;
    margin-top: var(--border-2);
    border-radius: 4px;
    overflow: auto;
}
a[class*="ion"] , a.ion-button {
    padding: var(--space-2xs);
    overflow: visible;
}

a.largeMenuButton[class*="ion"]:before {
    font-size: var(--text-xl);
    margin-right: var(--space-2xs);
}
.details > a {
    margin: var(--size-none);
    width: var(--size-30);
}
/*
.shrinkAnimation {
    transition-duration: 0.1s;
    transition-property: transform;
    transition-property: transform;
    transform: translateZ(0);
    transform: translateZ(0);
}
.shrinkAnimation:active {
    transform: scale(0.95);
    transform: scale(0.95);
}
body.ios * .shrinkAnimation

{
    transition-duration: 0s;
    transition-property: transform;
    transition-property: transform;
    transform: translateZ(0);
    transform: translateZ(0);
}
body.ios *.shrinkAnimation:active
{
    transform: scale(1);
    transform: scale(1);
}
*/
.topsticky {
    top: 0;
}
/*notify js css*/

body > .notifyjs-corner {
    width: var(--size-full);
    z-index: 2147483638 !important;
    /*margin: var(--size-none);*/
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    position: relative;
}
.notifyjs-corner{
    /*margin: var(--size-none);*/
    
}
body * .notifyjs-container,
body * .notifyjs-wrapper {
    width: var(--size-full);
    margin: var(--size-none);
    padding: var(--size-none);
    max-width: var(--size-400);
    padding: var(--space-3xs) var(--space-2xs);
    box-sizing:border-box;
}
.notifyjs-corner .notifyjs-wrapper, .notifyjs-corner .notifyjs-container{
    /*margin: var(--size-none) !important;*/
    margin: auto !important;
    /*margin-top: var(--space-3xs) !important;*/
}


body.browser * .notifyjs-trebbleNotification-base {
    /*max-width: 400px;*/
}
.notifyjs-trebbleNotification-base {
    background-color: var(--trebble-secondary);
    color: white;
    min-height: var(--size-32);
    max-height: var(--size-100);
    /* width : var(--size-full); */
    display: flex;
    display: -webkit-flex;
    align-content: center;
    -webkit-align-content: center;
    justify-content: center;
    -webkit-justify-content: center;
    padding: var(--space-2xs);
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-2xs);
    margin-bottom: var(--space-2xs);
}
.notifyjs-trebbleNotification-base .notificationTextContent {
    display: inline-block;
    min-height: var(--size-1em);
    text-align: center;
    font-weight: bold;
    /*font-weight: 300;*/
    
    font-size: var(--text-sm);
    max-width: var(--size-400);
    overflow: hidden;
}
.notifyjs-pushNotificationPreview-info{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;

}
.notifyjs-trebbleNotification-info {
    background-color: var(--trebble-secondary-90);
    box-shadow: var(--shadow-lg);
}
.notifyjs-trebbleNotification-error {
    background-color: var(--error-90);
    box-shadow: var(--shadow-lg);
}
.notifyjs-trebbleNotification-warning {
    background-color: var(--warning-90);
    color: var(--color-black);
    box-shadow: var(--shadow-lg);
}
.notifyjs-trebbleNotification-trebbleready{
    background-color: var(--trebble-accent);
    box-shadow: var(--shadow-lg);
} 
.notifyjs-trebbleNotification-base.notifyjs-trebbleNotification-toast {
    border-radius:2px;
    background: linear-gradient(to top left, var(--color-pink-alt), var(--color-orange-200));
    box-shadow: var(--shadow-lg);
}
.notifyjs-trebbleNotification-base.notifyjs-trebbleNotification-toast-light {

  background-color: var(--info);
  border-radius:2px;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow: var(--shadow-lg);
}
.notifyjs-trebbleNotification-base.notifyjs-trebbleNotification-toast > .notificationTextContent {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}
/*Start loader Css*/
/* change font size to change size */

.loaderWrapper {
    width: var(--size-80);
    height: var(--size-50);
}
.loader {
    font-size: var(--text-3xl);
    position: relative;
    width: var(--size-2em);
    height: var(--size-0-5em);
    margin: var(--size-100) auto;
}
.dot {
    width: var(--size-0-5em);
    height: var(--size-0-5em);
    border-radius: 0.5em;
    background: var(--text-dark);
    position: absolute;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.dot1,
.dot2 {
    left: 0;
}
.dot3 {
    left: 0.75em;
}
.dot4 {
    left: 1.5em;
}
@keyframes reveal {
    from {
        transform: scale(0.001);
        opacity: 0.1;
    }
    to {
        transform: scale(1);
        opacity: 0.8;
    }
}
@keyframes slide {
    to {
        transform: translateX(0.75em);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes shimmer-text {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.animate-shimmer-text {
    color: var(--text-default-color, #6B7280);
    animation: shimmer-text 2s ease-in-out infinite;
}


@keyframes dashoffset {
    0% {
        stroke-dashoffset: 0
    }

    100% {
        stroke-dashoffset: -30px
    }
}
.dot1 {
    animation-name: reveal;
}
.dot2,
.dot3 {
    animation-name: slide;
}
.dot4 {
    animation-name: reveal;
    animation-direction: reverse;
    /* thx @HugoGiraudel */
}
/*End loader Css*/

::-webkit-search-cancel-button {
    display: none;
}
.left-right-content-padding {
    box-sizing: border-box;
    /*padding-left: var(--text-3xs);
    padding-right: var(--text-3xs);*/
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
}

.infoBoxWrapper,
.flexContentCenteringBox {
    width: var(--size-full);
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    /* max-width: var(--size-700); */
}
.infoBoxWrapper:not(.feature) {

    height: var(--size-full);
    max-width: var(--size-500);
    margin: auto;
    padding: var(--space-sm);
    min-height: var(--size-300);
    box-sizing:border-box;
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){
    .infoBoxWrapper:not(.feature) {
        max-width: var(--size-250);
        padding: var(--space-2xs);
        box-sizing:border-box
    }

}
#recordingBlock > .flexContentCenteringBox {
  margin: auto;
}

#recordingBlock > #recordingInstruction > .instructionText{
    font-weight: bold;
    padding: var(--size-none) var(--space-lg);
    box-sizing: border-box;
}
#recordingBlock > #recordingInstruction > .arrowDownIconBox{
    animation-duration: 1.4s;
}

#recordingBlock > #recordingInstruction > .arrowDownIconBox > i{
    font-size: var(--text-4xl-px);
}
.infoBoxWrapper > .content {
    flex: 1 1 auto;
}

#recordingBlock #peak_meter_container{
    width: var(--size-full);
    max-width: var(--size-200);
    margin: auto;
    padding: var(--space-2xs) var(--size-none);
    height: var(--size-25);
    box-sizing: border-box;
    /*padding: var(--space-2xs) var(--size-none);*/
}

.pids-wrapper{
  width: var(--size-full);
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.pid{
  height: var(--size-4);
  flex:  1 1 auto;
  display: inline-block;
  margin: var(--border-1);
  background-color: var(--color-black-10);
}

.ui-page.lighttext .pid,
body.darkTheme .pid{
    background-color: grey;
  }

.pid.activeGreen,
body.darkTheme .pid.activeGreen,
[data-role=page].lighttext .pid.activeGreen{
    background-color:  var(--success);
}

.pid.activeYellow,
body.darkTheme .pid.activeYellow,
[data-role=page].lighttext .pid.activeYellow{
    background-color:  var(--warning);
}

.pid.activeRed, 
body.darkTheme .pid.activeRed,
[data-role=page].lighttext .pid.activeRed{
    background-color:  var(--error);
}

.createCapsulePage:not(.showCountTimer) #recordingBlock #counterAnimationBox,
.createCapsulePage.showCountTimer #recordingBlock #recordProgressContainer,
.createCapsulePage.showCountTimer #recordingBlock #showNotesToggleBox,
.createCapsulePage.showCountTimer #recordingBlock #noteSection,
.createCapsulePage.showCountTimer #recordingInstruction,
.createCapsulePage.showCountTimer #peak_meter_container,
.createCapsulePage.showCountTimer #recordControlsWrapper,
.createCapsulePage.showCountTimer #creationModeSelectorWrapper,
.createCapsulePage.showCountTimer #recordingBlock .trackSelectorBox,
.createCapsulePage.showCountTimer [data-role=header]{
    display: none !important;
}

.createCapsulePage.showCountTimer #counterAnimationBox{
    width: var(--size-full);
    height: var(--size-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

#recordingBlock #counterAnimationBox #counterNumber{
 font-weight: bold;
 font-size: var(--text-9xl-px);
 opacity: 0;
 animation-duration: 1s;
}






#featurePage * .owl-controls,
#GetStartedForCuratorsPage * .owl-controls {
    position: relative;
    top: -50px;
}
#featuresCarousel.owl-theme .owl-controls .owl-page span {
    width: var(--size-8);
    height: var(--size-8);
    margin: var(--border-4) var(--border-6);
    background: white;
    border: var(--border-2) solid white;
    opacity: 1;
    background-color: transparent;
}
#GetStartedForCuratorsPage #featuresCarousel.owl-theme .owl-controls .owl-page span{
  background: white;
  border: var(--border-2) solid white;
  opacity: 1;
  background-color: transparent;
}
#featurePage * .infoBoxWrapper > .content ,
#GetStartedForCuratorsPage * .infoBoxWrapper > .content {
    padding: var(--space-3xs);
    max-width: var(--size-700);
}

#GetStartedForCuratorsPage .helpContent > .helpDetail > .actionButtonWrapper > .actionButton {

    color: var(--pink);
    background-color: white;
    border: var(--border-3) solid white;
    width: var(--size-inherit);
    padding-left: var(--text-4xl);
    padding-right: var(--text-4xl);
    padding-top: var(--text-base);
    padding-bottom: var(--text-base);

}
body.browser.mobileweb  #GetStartedForCuratorsPage .helpContent > .helpDetail > .actionButtonWrapper > .actionButton:hover,
#GetStartedForCuratorsPage .helpContent > .helpDetail > .actionButtonWrapper > .actionButton:active {

    color: white;
    background-color: transparent;
    border: var(--border-3) solid white;

}

.infoBoxWrapper > .content > p ,
.infoBoxWrapper > .content > div{
    text-align: center;
    margin: var(--size-none);
}
.infoBoxWrapper > .content > .actionButtonWrapper {
    max-width: var(--size-200);
    margin: var(--space-sm) auto;
}
.tag {
    flex: 0 0 45px;
    -webkit-flex: 0 0 45px;
    -ms-flex: 0 0 45px;
    float: left;
    width: var(--size-full);
    max-width: var(--size-400);
    height: var(--size-46);
    border: var(--border-2) solid white;
    border-radius: 2px;
    color: white;
    margin: var(--border-4);
    text-align: center;
    vertical-align: middle;
    line-height: var(--line-height-4-5xl);
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
    padding-top: var(--border-4);
    padding-bottom: var(--border-4);
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tag.withSublabel{
    line-height: 22.5px;
}
.tag >  .sublabel{
    opacity: 0.5;
    font-size: 90%;
}
.alltag {
    height: var(--size-46);
    border: var(--border-2) solid white;
    border-radius: 2px;
    color: white;
    margin: var(--border-4);
    text-align: center;
    vertical-align: middle;
    line-height: var(--line-height-4-5xl);
    padding-left: var(--border-6);
    padding-right: var(--border-6);
    padding-top: var(--border-4);
    padding-bottom: var(--border-4);
    cursor: pointer;
}
.tagPlaceholder {
    display: inline-block;
}
#songGradingView > .tagPlaceholder,
#lifespanSelectionView > .tagPlaceholder {
    display: flex;
    display: -webkit-flex;
    padding: var(--space-sm);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -ms-justify-content: center;
    -ms-align-items: center;
}
.tag.selected {
    background-color: var(--trebble-primary-70);
    transition: background-color 100ms ease-out;
}
.alltag.selected {
    background-color: var(--color-success-70);
    transition: background-color 100ms ease-out;
}
.feature.infoBoxWrapper {
    height: var(--size-full);
    opacity: 1;
}
.feature.infoBoxWrapper .illustrationWrapper{
    /*padding: var(--space-2xs);
    background-color: var(--text-light);
    border-radius: 10px;
    width: calc(var(--size-full) - var(--size-50));
    margin: auto auto var(--space-2xs);
    width: fit-content;
    display: block;
    box-sizing: border-box;
    height: calc(var(--vh-full) - var(--size-layout-sm));*/
}
.feature.infoBoxWrapper .illustration{
  width: calc(var(--size-full) - var(--size-50));
  height: calc(var(--vh-full) - var(--size-300));
  -o-object-fit: contain;
  object-fit: contain;
  position: relative;
  padding: var(--space-2xs);
  background-color: white;
  border-radius: 5px;
  box-shadow: var(--shadow-lg);
}

body[appname="trebble"] .sweet-alert h2{
    padding: 0 var(--space-sm);
}

.feature.infoBoxWrapper .illustrationWrapper{
    margin-bottom: var(--space-sm);
}

#featurePage * .tag.actionButton,
#GetStartedForCuratorsPage * .tag.actionButton,
#createCapsuleInfoHeader * .tag.actionButton {
    font-size: var(--text-lg);
    border: var(--border-0) solid white;
    color: white;
    /* height: var(--size-30); */
    /* padding: var(--space-2xs); */
    /* margin: var(--border-3); */
    
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    padding-top: var(--size-none);
    padding-bottom: var(--size-none);
    width: auto;
}


body:not(.darkTheme) .ui-page:not(.lighttext) #createCapsuleInfoHeader * .tag.actionButton,
body:not(.darkTheme) .ui-page:not(.lighttext) #continue_with_no_edit_btn.hightlightBtn,
body:not(.darkTheme) .ui-page:not(.lighttext) #doneRecordingButtonIcon {
    border: var(--border-2) solid var(--text-dark);
    border: var(--border-2) solid var(--color-gray-100);
    color: var(--text-dark) !important;
    background-color: var(--color-gray-100);
    padding: var(--space-2xs);
    margin: var(--border-3);
    
}

body:not(.darkTheme) .ui-page:not(.lighttext) #createCapsuleInfoHeader * .tag.actionButton{
    height: var(--size-40);
}
.ui-page:not(.lighttext) #continue_with_no_edit_btn.hightlightBtn {
    height: var(--size-46);
}

body:not(.darkTheme) .ui-page:not(.lighttext) #createCapsuleInfoHeader * .tag.actionButton#nextButton,
body.white-theme div[data-role=page]:not(.lighttext) [data-role=header]#createCapsuleInfoHeader * #saveButtonIcon,
body.white-theme div[data-role=page]:not(.lighttext) [data-role=header]#createCapsuleInfoHeader * #doneRecordingButtonIcon{
    border: var(--border-2) solid var(--trebble-primary);
    color: white !important;
    background-color:var(--trebble-primary); 
    height: var(--size-40);
    margin-top: var(--border-4);
    margin-bottom: var(--border-4);
}

#featurePage * .tag.actionButton > i,
#GetStartedForCuratorsPage * .tag.actionButton > i ,
#createCapsuleInfoHeader  * .tag.actionButton > i.ion-ios7-arrow-thin-left {
  font-size: var(--text-4xl);
}
#createCapsuleInfoHeader * .tag.actionButton > i {
    font-size: var(--text-base);
}
#createCapsuleInfoHeader * .tag.actionButton#showRecordingSettingsButton > i {
    font-size: var(--text-xl);
}
#createCapsuleInfoHeader #previousButton{
  padding: var(--size-none);
  border: var(--border-0);
background-color: transparent;
}
.trebble_disabled {
    opacity: 0.2;
    cursor: default !important;
}
.feature.infoBoxWrapper > .content > p > .iconWrapper {
    color: white;
}
.infoBoxWrapper > .content > p > .iconWrapper {
    color: var(--text-dark);
    font-size: var(--text-9xl-px);
    padding: var(--space-sm) 0;
    box-sizing:border-box;
}

#player #commentOverviewBox .infoBoxWrapper:not(.feature){
    display: block;
    min-height: var(--size-unset);
    padding: var(--size-none);
}

#player #commentOverviewBox * .infoBoxWrapper > .content > p > .iconWrapper{
    font-size: var(--text-5xl);
}

.infoBoxWrapper:not(.feature) > .content > p > .iconWrapper {
    opacity: 0.7;
}
.lighttext * .infoBoxWrapper > .content > p > .iconWrapper {
    color: var(--text-muted);
    opacity: 1;
}
/*#player #commentOverviewBox > div > div > div{
    height: calc(var(--size-full) - var(--text-7xl-px));
    }*/
    #player #commentOverviewBox * .commentBoxWrapper{
        background-color: white;
    }
    #player #commentOverviewBox * .commentBoxWrapper * #comment{
        color: var(--text-dark);
    }

    #commentOverviewBox * .infoBoxWrapper > .content > p > .iconWrapper {
        /* display: none; */

        font-size: var(--text-7xl);
    }
    [data-role=popup] * .infoBoxWrapper > .content > p > .iconWrapper,
    #ExplorePage:not([showListView=true]) * .infoBoxWrapper > .content > p > .iconWrapper,
    #Onboarding:not([showListView=true]) * .infoBoxWrapper > .content > p > .iconWrapper {
        color: white;
    }
    .feature.infoBoxWrapper > .content > .message {
        color: white;
        max-width: var(--size-400);
        margin: auto;
    }
    .infoBoxWrapper > .content > .message {
        color: var(--text-dark);
        font-size: var(--text-xl);
        font-weight: 700;
    }
    .infoBoxWrapper:not(.feature) > .content > .message {
        opacity: 0.7;
    }
    #commentOverviewBox * .infoBoxWrapper > .content > .message {
        /*font-size: var(--text-md);*/
    }
    .lighttext .infoBoxWrapper > .content > .message {
        /*font-size: var(--text-md);*/
        color: var(--text-muted);
        opacity: 1;
    }
    [data-role=popup] * .infoBoxWrapper > .content > .message,
    #ExplorePage:not([showListView=true]) * .infoBoxWrapper > .content > .message,
    #Onboarding:not([showListView=true]) * .infoBoxWrapper > .content > .message {
        color: white;
    }
    .feature.infoBoxWrapper > .content > .helpMessage {
        color: white;
        font-size: var(--text-md);
        max-width: var(--size-300);
        margin: var(--space-2xs) auto auto auto;
    }
    [data-role=popup] * .infoBoxWrapper > .content > .helpMessage,
    #ExplorePage:not([showListView=true]) * .infoBoxWrapper > .content > .helpMessage,
    #Onboarding:not([showListView=true]) * .infoBoxWrapper > .content > .helpMessage {
        color: white;
    }

    #ExplorePage.hideAllContent .ui-content{
        display: none;
    }
    .infoBoxWrapper > .content > .helpMessage {
        color: var(--text-dark);
        font-size: var(--text-base);
        margin: var(--space-2xs);
    }
    .infoBoxWrapper:not(.feature) > .content > .helpMessage {
        opacity: 0.7;
    }
    .lighttext * .infoBoxWrapper > .content > .helpMessage {
        color: white;
    }
    .lighttext * .sentinel_block_wrapper .sentinel,
    .lighttext * .infoBoxWrapper > .content > .helpMessage {
        color: var(--color-white-50);
        opacity: 1;
    }

    .infoBoxWrapper > .content > .actionButtonWrapper > a.actionButton {
        height: var(--size-25);
        margin: var(--size-none);
        margin-right: var(--space-2xs);
        margin-left: var(--space-2xs);
        font-weight: 300;
        background-color: var(--color-gray-150);
        border-color: var(--color-gray-150);
        border: var(--border-2) solid var(--color-gray-150);
        color: var(--text-dark);
        line-height: var(--line-height-3xl);
        font-size: var(--text-md-px);
        font-weight:bold;
        display: flex;
        display: 
        -webkit-flex;
        align-items: center;
        justify-content: center;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        width: -moz-fit-content;
        width: fit-content;
        cursor: pointer;
        min-width: var(--size-200);
    }

    body.browser.mobileweb [data-role=page] .infoBoxWrapper > .content > .actionButtonWrapper > a.actionButton:hover{
      cursor: pointer;
      color: white;
      background-color: var(--trebble-primary);
      border: var(--border-2) solid var(--trebble-primary);
      transform: translateZ(0);
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      transition-duration: 0.3s;
      transition-property: all;
  }

  body.browser.mobileweb .infoBoxWrapper > .content > .actionButtonWrapper > a.actionButton:hover,
  .infoBoxWrapper > .content > .actionButtonWrapper > a.actionButton:active{
    cursor: pointer;
    color: white;
    background-color: var(--trebble-primary);
    border: var(--border-2) solid var(--trebble-primary);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: all;
}

[data-role=popup] * .infoBoxWrapper > .content > .actionButtonWrapper > a.actionButton {
    background-color: transparent;
    border: var(--border-2) solid var(--trebble-primary);
    color: white;
}
body.browser.mobileweb  > [data-role=popup] * .infoBoxWrapper > .content > .actionButtonWrapper > a.actionButton:hover,
body.browser.mobileweb .selectionListItem:hover {
    background-color: var(--color-white-5);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;

}

#schedulingSettingFld,
.schedulingTimeWrapper #schedulingTimeFld{
    border: var(--border-2) solid var(--trebble-primary) !important;
}
body.browser.mobileweb #schedulingSettingFld:hover,
#schedulingSettingFld:active,
body.browser.mobileweb .schedulingTimeWrapper #schedulingTimeFld:hover,
.schedulingTimeWrapper #schedulingTimeFld:active{
    border: var(--border-2) solid white !important;
}


[data-role=popup] * .infoBoxWrapper > .content > .actionButtonWrapper > a.actionButton:active,
.selectionListItem:active {
    background-color: var(--color-white-10);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;

}
.infoBoxWrapper > .content > .actionButtonWrapper > a.actionButton:active {
    background-color: var(--trebble-primary-dark);
    border-color: var(--trebble-primary-dark);
    color: white;
}
[data-role=popup] * .infoBoxWrapper > .content > .actionButtonWrapper > a.actionButton:active {
    background-color: var(--trebble-primary);
    border: var(--border-2) solid var(--trebble-primary);
    color: white;
}

.listHeader {
    line-height: var(--line-height-4xl);
    vertical-align: middle;
    /*font-size: var(--text-md);*/
    font-size: var(--text-2xl);
    margin-top: var(--border-4);
    margin-bottom: var(--border-4);
    border-bottom: var(--border-1) solid var(--color-black-5);
    color: var(--text-muted-dark);
    padding: var(--space-2xs);
    /*justify-content: center;
    -webkit-justify-content: center;*/
    -moz-flex-line-pack: center;
    align-content: center;
    -webkit-align-content: center;
    -moz-flex-direction: row;
    flex-direction: row;
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    height: var(--size-40);
    background-color: transparent;
    font-weight: 900;
}
.popupContent * .listHeader {
    color: var(--color-white-60);
    border-bottom: var(--border-1) solid var(--color-white-20);
    /*font-size: var(--text-md);*/
    font-size: var(--text-2xl);
}
.lighttext * .listHeader,
.lighttext * .tabheader {
    border-bottom: var(--border-1) solid var(--color-white-5);
    color: var(--color-white-50);
}
.listHeader >:first-child {
    line-height: var(--line-height-4xl);
    flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
}
.listHeader > [class*="ion"] {
    text-align: center;
    font-size: var(--text-3xl);
    flex: 0 0 50px;
    -webkit-flex: 0 0 50px;
    color: var(--trebble-primary);
}
.listHeader > [class*="ion"]:active {
    color: white;
    background-color: var(--trebble-primary);
}
.listFooter {
    height: var(--size-60);
    border-bottom: var(--border-1) solid var(--color-gray-100);
    color: var(--color-gray-400);
    text-align: left;
}
.listFooter.transparent {
    border-bottom: var(--border-1) solid var(--color-white-5);
}
.listFooter.transparent > a.ui-btn.ui-btn-c {
    background-color: transparent;
}
.lighttext * .listFooter.transparent > a.ui-btn.ui-btn-c {
    /*background-color: transparent;*/
    background-color: var(--color-white-5);
    color: var(--color-white-50);
}
.listFooter > a.ui-btn.ui-btn-c {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: var(--color-black-0);
    text-align: left;
    color: var(--text-dark);
    font-weight: 400;
    padding: var(--space-2xs);
    padding-top: var(--space-sm);
    /* height: var(--size-full); */
    
    margin: var(--size-none);
    line-height: var(--line-height-2xl);
    padding-bottom: var(--space-sm);
    border: var(--border-0);
}
body.browser.mobileweb .listFooter > a.ui-btn.ui-btn-c{
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}
body.browser.mobileweb .listFooter > a.ui-btn.ui-btn-c:hover {
    color: var(--text-dark) !important;
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-100);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}

.spotify_gradient{
    background: linear-gradient(90deg,var(--color-purple-dark),var(--color-blue-500));
}

body.browser.mobileweb  .listFooter > a.ui-btn.ui-btn-c:hover{
  color: white !important;
  background-color: var(--trebble-primary);
  border-color: var(--trebble-primary);
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: color, background-color;
}
[data-role=popup].songIdentifiedDetailPage {
    border: var(--border-0);
}
.animate-spin {
    animation: spin 1s infinite linear;
    display: inline-block;
}

body.ios * .blurPage,
body.browser * .blurPage {
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    /*filter : url(#blur-effect-5);*/

}
.fontello-icon-spin4 {
    font-size: var(--text-3xl);
}
#playlistInfoHeader {
    opacity: 1;
    font-weight: 400;
    font-size: var(--text-sm);
    color: white;
    text-align: left;
}
#playlistNameWrapper {
    font-size: var(--text-sm);
    color: white;
    font-weight: 600;
    /*font-weight: 300;*/

    text-align: left;
}

#player #playlistNameWrapper{
   opacity: 0.9;
   width: var(--size-full);
   text-align: center;


 /*white-space: normal;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;*/

 /*white-space: normal;
 display: block;
 box-sizing: border-box;
 margin: var(--text-base) var(--size-none);
 text-overflow: ellipsis;
 height: calc(64px - 2.2em);
 overflow: hidden;*/

 white-space: nowrap;
 display: block;
 box-sizing: border-box;
 margin: var(--text-3xs) 0;
 text-overflow: ellipsis;
 height: var(--size-1em);
 overflow: hidden !important;
}
body.embedded #playlistNameWrapper{
  display: none;
}

.browser.mobilebrowser  #playlistNameWrapper {

    font-weight: 600;
    /*font-weight: 300;*/
    
}
#songInfoWrapper {
    padding-bottom: var(--space-3xs);
    padding-top: var(--space-3xs);
}
body.embedded * #songInfoWrapper {
    padding-bottom: var(--size-none);
    padding-top: var(--size-none);
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}
#home {
    padding-top: var(--text-7xl-px);
    min-height: 509px;
    padding-bottom: var(--size-70);
    /* background-image: url(file:///android_asset/www/img/backgrounds/BW1.jpg); */

    background-size: cover;
    background-color: var(--bg-light);
    color: var(--text-dark);
}
.popupContent * #analyseAudioBtn {
    color: white;
}
.popupContent * #searchGlobalBtn {
    color: white;
}
div[data-role=header] * .ion-ionic {
    color: var(--trebble-primary-dark);
    line-height: var(--line-height-5-1xl);
    padding: var(--size-none);
    width: var(--size-50);
    display: block;
    border: var(--border-0);
    font-size: var(--text-4xl);
}
#mylibrary > div[data-role=header] * .ui-btn,
#mySubscriptions:not(.no_subscription) > div[data-role=header] * .ui-btn,
#myJourneys:not(.no_subscription) > div[data-role=header] * .ui-btn,
#home > div[data-role=header] * .ui-btn,
html .ui-page-theme-c div[data-role=header] * .ui-btn,
#globalSearch > div[data-role=header] * .ui-btn,
#PlaylistPodcastsPage > div[data-role=header] * .ui-btn {
    background-color: transparent;
    font-size: var(--text-2xl);
    color: white;
    overflow: visible;
    border-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;

}
#mylibrary > div[data-role=header] * .ui-btn:active,
#mySubscriptions > div[data-role=header] * .ui-btn:active,
#myJourneys > div[data-role=header] * .ui-btn:active,
#home > div[data-role=header] * .ui-btn:active,
html .ui-page-theme-c div[data-role=header] * .ui-btn:active,
#globalSearch > div[data-role=header] * .ui-btn:active,
#PlaylistPodcastsPage > div[data-role=header] * .ui-btn:active,
#homeHeaderButton:active,
#helpHeaderButton:active,
.defaultPage#queue * #queueMenuOptionBtn:active,
.defaultPage * #header-back-button:active,
.defaultPage * #header-queue-button:active {
    background-color: var(--bg-overlay-dark);
    border-color: transparent;
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}
body.browser.mobileweb  #mylibrary > div[data-role=header] * .ui-btn:hover,
body.browser.mobileweb  #mySubscriptions > div[data-role=header] * .ui-btn:hover,
body.browser.mobileweb  #myJourneys > div[data-role=header] * .ui-btn:hover,
body.browser.mobileweb   #home > div[data-role=header] * .ui-btn:hover,
html  body.browser.mobileweb  .ui-page-theme-c div[data-role=header] * .ui-btn:hover,
body.browser.mobileweb  #globalSearch > div[data-role=header] * .ui-btn:hover,
body.browser.mobileweb #PlaylistPodcastsPage > div[data-role=header] * .ui-btn:hover,
body.browser.mobileweb #homeHeaderButton:hover,
body.browser.mobileweb #helpHeaderButton:hover,
body.browser.mobileweb .defaultPage#queue * #queueMenuOptionBtn:hover,
body.browser.mobileweb .defaultPage * #header-back-button:hover,
body.browser.mobileweb .defaultPage * #header-queue-button:hover {
    background-color: var(--bg-overlay-dark);
    border-color: transparent;
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}
#mylibrary > div[data-role=header] * .ui-btn#filterButton,
#mySubscriptions > div[data-role=header] * .ui-btn#filterButton,
#myJourneys > div[data-role=header] * .ui-btn#filterButton,
#home > div[data-role=header] * .ui-btn#filterButton,
html .ui-page-theme-c div[data-role=header] * .ui-btn#filterButton,
#globalSearch > div[data-role=header] * .ui-btn#filterButton {
    font-size: var(--text-lg);
}
#globalSearch > div[data-role=header] * .ui-btn#searchLibraryBtn.ion-ios7-close-empty,
#mylibrary > div[data-role=header] * .ui-btn#searchLibraryBtn.ion-ios7-close-empty,
#mySubscriptions > div[data-role=header] * .ui-btn#searchLibraryBtn.ion-ios7-close-empty,
#myJourneys > div[data-role=header] * .ui-btn#searchLibraryBtn.ion-ios7-close-empty,
#PlaylistPodcastsPage > div[data-role=header] * .ui-btn#searchLibraryBtn.ion-ios7-close-empty,
#globalSearch > div[data-role=header] * .ui-btn#searchLibraryBtn > .ion-ios7-close-empty,
#mylibrary > div[data-role=header] * .ui-btn#searchLibraryBtn > .ion-ios7-close-empty,
#mySubscriptions > div[data-role=header] * .ui-btn#searchLibraryBtn > .ion-ios7-close-empty,
#myJourneys > div[data-role=header] * .ui-btn#searchLibraryBtn > .ion-ios7-close-empty,
#PlaylistPodcastsPage > div[data-role=header] * .ui-btn#searchLibraryBtn > .ion-ios7-close-empty  {
    font-size: var(--text-3xl);
}
#searchLibraryBtn,
#searchGlobalBtn {
    color: var(--trebble-primary-dark);
    font-size: var(--text-3xl);
    line-height: var(--line-height-5-1xl);
    padding-right: var(--border-3);
    padding-left: var(--border-3);
    padding: var(--size-none);
    height: var(--size-full);
    display: block;
    width: var(--size-50);
    border: var(--border-0);
    margin: var(--size-none);
}

#mylibrary #collection_repeat_container{
    padding: var(--size-none);
    box-sizing: border-box;
    height: calc(var(--vh-full) - var(--size-50));
}

#mylibrary .capsule_list_content_wrapper #collection_repeat_container{
    height: calc(var(--vh-full) - var(--text-10xl-px));
}

#mylibrary .capsule_list_content_wrapper.hide_category_list #collection_repeat_container{
    height: calc(var(--vh-full) - var(--size-70));
}

[data-role=page] * #songSelectorWrapper *#searchLibraryBtn {
    color: var(--text-muted-dark);
}
[data-role=popup] * #searchLibraryBtn {
    color: white;
}
#searchLibraryBtn.ion-ios7-close-empty,
#searchGlobalBtn.ion-ios7-close-empty,
#searchLibraryBtn > .ion-ios7-close-empty,
#searchGlobalBtn > .ion-ios7-close-empty   {
    font-size: var(--text-5xl);
}
input.customSearchField[type=search],
input.shareableLink {
    border-radius: 2px;
    font-weight: 400;
    height: var(--size-36);
    width: var(--size-100);
    color: white;
    /*color: var(--text-muted);*/
    border: var(--border-0);
    padding: var(--size-none);
    /* background-color: transparent; */

    background-color: var(--trebble-primary-600);
    font-size: var(--text-base);
}
[data-role=popup] * input.customSearchField[type=search],
[data-role=popup] * input.shareableLink {
    background-color: var(--color-white-20);
    color: var(--color-white-60);
}
[data-role=popup] * input.customSearchField[type=search]:focus,
[data-role=popup] * input.shareableLink:focus {
    width: var(--size-full);
    background-color: var(--color-white-20);
}


input.customSearchField[type=search]:focus,
input.shareableLink:focus {
    outline: none !important;
    width: 130px;
    background-color: transparent;
    border-bottom: var(--border-1) solid var(--trebble-primary-600);
    border-radius: 2px;
    font-weight: 400;
    height: var(--size-36);
    width: var(--size-100);
    color: white;
    /*color: var(--text-muted);*/
    border: var(--border-0);
    padding: var(--size-none);
    /* background-color: transparent; */

    background-color: var(--trebble-primary-600);
}
input.customSearchField[type=search],
input.customSearchField[type=search]:focus,
input.customSearchField[type=search]:not(.browser-default),
input.customSearchField[type=search]:not(.browser-default):focus,
input.customSearchField[type=search]:not(.browser-default):not([readonly]),
input.customSearchField[type=search]:not(.browser-default):focus:not([readonly]){
  font-weight: 900;
  height: var(--size-36);
  margin-top: var(--size-none);
  margin: var(--size-none);
  border-bottom: var(--border-0);
  box-shadow: var(--shadow-none);
}

.headerSearchBtn {} #loginPage {
    background: linear-gradient(to top, var(--color-pink-500) 0%, var(--color-orange-500) 100%);
}
#loginPage * .ui-content {
    width: var(--size-inherit);
}
[data-role=page] > .ui-content {
    position: fixed;
    width: var(--size-full);
    padding: var(--size-none);
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}
@keyframes songGettingAddedPlaylistAnimation1

{
    0% {
        transform: translateX(0px);
    }
    40% {
        transform: translateX(30%);
    }
    100% {
        transform: translateX(30%);
    }
}
@keyframes songGettingAddedPlaylistAnimation2
{
    0% {
        transform: translateX(30%);
    }
    90% {
        transform: translateX(30%);
    }
    100% {
        transform: translateX(0px);
    }
}
.songLibraryWrapper > .infiniteListItem {
    animation-fill-mode: forwards;
}


a.ui-link-inherit {
    text-decoration: none;
    color: var(--color-black);
}
li[data-role=list-divider] {
    border: var(--border-0);
    background-color: transparent;
    color: var(--color-black);
    font-size: var(--text-md);
}
#expandableSongOptions {
    transition: height 4s;
    -webkit-transition: height 4s;
}
.songIdentifiedDetailPage * #albumDetailButtonOptionBar {
    font-size: var(--text-sm);
}
#albumDetailButtonOptionBar {
    /*position: sticky;
    top: 20px;*/
    
    margin: var(--size-none);
    /*background-color: var(--bg-overlay-dark);*/
}
.songIdentifiedDetailPage * #albumDetailButtonOptionBar > div > a.ui-btn {
    font-size: var(--text-sm);
}
#albumDetailButtonOptionBar > div > a.ui-btn {
    height: var(--size-30);
    margin: var(--size-none);
    padding-right: var(--size-none);
    padding-left: var(--size-none);
    font-weight: 400;
    /*font-weight: 300;*/
    
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-100);
    color: var(--text-dark);
    line-height: var(--line-height-3xl);
    font-size: var(--text-base);
}
#albumDetailButtonOptionBar > div > a.ui-btn:active {
    background-color: var(--color-gray-450);
    border-color: var(--color-gray-450);
    color: var(--color-gray-600);
}
.artistDetailCoverArtWrapper,
.userDetailCoverArtWrapper {
    flex-direction: column;
    /* -webkit-transition: height 0.8s ease-in-out; */
    
    transition: background-image .2s cubic-bezier(.13, 1.07, .5, 1.01), height 0.2s cubic-bezier(.13, 1.07, .5, 1.01);
    background-color: var(--color-black);
    position: relative;
    background-repeat: no-repeat;
    display: flex;
    display: -webkit-flex;
    background-position: top;
    background-size: cover;
    padding-top: var(--size-icon-lg);
    height: var(--size-400);
    width: var(--size-full);
}
.albumDetailCoverArtWrapper {
    transition: background-image .2s cubic-bezier(.13, 1.07, .5, 1.01), height 0.2s cubic-bezier(.13, 1.07, .5, 1.01);
    background-color: var(--color-black);
    position: relative;
    background-repeat: no-repeat;
    display: flex;
    display: -webkit-flex;
    background-position: center;
    background-size: cover;
    padding-top: var(--size-icon-lg);
    height: var(--size-400);
}
.songIdentifiedDetailPage * .basicAlbumInfo {
    height: var(--size-100);
}
.basicAlbumInfo {
    box-sizing: border-box;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-direction: column;
    vertical-align: middle;
    display: flex;
    display: -webkit-flex;
    color: white;
    width: var(--size-full);
    background: var(--gradient-fade-dark);
    bottom: 0px;
    height: 40%;
    position: absolute;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    padding: var(--space-2xs);
}
body.browser * .basicAlbumInfo {
    height: var(--size-full);
}
.homeOptionHeader {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    height: var(--size-40);
}
.homeOptionHeader > .title {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}
.popupContent * #homeOptionsWrapper > div > p {
    font-size: var(--text-xs);
}
.homeOptionHeader > .option {
    width: var(--size-40);
    display: flex;
    display: -webkit-flex;
    align-content: center;
    -webkit-align-content: center;
    justify-content: center;
    -webkit-justify-content: center;
}
.homeOptionHeader > .option > a {
    line-height: var(--line-height-4xl);
    padding: var(--size-none);
    font-size: var(--text-xl);
}
.basicArtistInfo {
    box-sizing: border-box;
    flex: 0 0 150px;
    -webkit-flex: 0 0 150px;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-direction: column;
    vertical-align: middle;
    display: flex;
    display: -webkit-flex;
    color: white;
    width: var(--size-full);
    background: var(--gradient-fade-dark);
    bottom: 0px;
    position: absolute;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    min-height: var(--size-100);
}
body.browser * .basicArtistInfo {
    flex: 0 0 400px;
    -webkit-flex: 0 0 450px;
    height: var(--size-450);
}


@media (max-width: 480px), (max-height: 480px) and   (orientation: landscape) {
  body.browser > .playlistDetailsPage * .basicArtistInfo {
      flex: 0 0 200px;
      -webkit-flex: 0 0 200px;
      height: var(--size-200);
  }
}
.userProfileDetailsPage * .basicArtistInfo {
    height: var(--size-full);
    padding-top: 56px;
    background-image: none;
}
.basicAlbumInfo .artistName {
    color: white;
    font-weight: 600;
    font-size: var(--text-md);
    white-space: pre;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: var(--text-sm-px);
    margin-left: var(--text-sm-px);
    opacity: 0.8;
}
.darktext * .basicAlbumInfo .artistName {
    color: var(--text-dark);
}
.basicAlbumInfo .yearLabel {
    white-space: pre;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: var(--text-sm-px);
    margin-left: var(--text-sm-px);
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--color-white-40);
}
.darktext * .basicAlbumInfo .yearLabel {
    color: var(--color-black-30);
}
.basicArtistInfo .artistName {
    font-size: var(--text-md);
    white-space: pre;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: var(--text-sm-px);
    margin-left: var(--text-sm-px);
}
.playlistDetailsPage * .basicArtistInfo .bioWrapper {
    max-height: var(--size-100);
}
.basicArtistInfo .bioWrapper {
    box-sizing: border-box;
    max-height: var(--size-100);
    padding: var(--space-2xs);
    display: block;
    text-overflow: ellipsis;
    overflow: auto;
    font-weight: 400;
    /*font-weight: 300;*/
    /* opacity: 0.8; */
    
    /*font-size: var(--text-sm);*/
    z-index: 2;
}
.darktext *.basicArtistInfo .bioWrapper {
    color: var(--text-dark);
}
.lighttext *.basicArtistInfo .bioWrapper {
    color: white;
}
.userProfileDetailsPage #pageHeaderTitleWrapper{
    display: none;
}
.userProfileDetailsPage * #usernameBox,
.userProfileDetailsPage * #fullnameBox {
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
    text-align: center;
    box-sizing: border-box;
    width: var(--size-full);
    /* display: flex; */
    /* display: -webkit-flex; */
    /* justify-content: center; */
    /* -webkit-justify-content: center; */
    /* align-items: center; */
    /* -webkit-align-items: center; */
    /* 
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
    -webkit-flex: 0 0 40px;*/

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* margin-top: var(--space-2xs); */
    /* margin-bottom: var(--space-2xs); */
}
.userProfileDetailsPage * #fullnameBox{
 font-size: var(--text-lg);
 font-weight: bold;
}
.userProfileDetailsPage * #usernameBox{
    margin-bottom: var(--space-2xs);
    color:var(--color-gray-300);
}
.userProfileDetailsPage * #bioBox{
    max-width: var(--size-400);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    white-space: normal;
    margin-bottom: var(--space-3xs);
    /*padding: var(--space-2xs) var(--space-sm);*/
    padding: var(--size-none);
    box-sizing: border-box;
    overflow: hidden;
    color: var(--color-gray-300);

}

.userProfileDetailsPage * #websiteBox{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: var(--size-400);
 margin-bottom: var(--space-2xs);
 font-weight: bold;
 padding: var(--size-none) var(--space-sm);
 box-sizing: border-box;
 cursor: pointer;

}

.userProfileDetailsPage * #websiteBox i{
    margin-right: var(--space-3xs);
    -webkit-text-stroke: thin;
}

body.mobileweb .userProfileDetailsPage * #websiteBox:hover,
.userProfileDetailsPage * #websiteBox:active{
    opacity: 0.7;
}

body.browser.mobileweb > .userProfileDetailsPage .basicArtistInfo .bioWrapper > .carouselWrapper > .owl-wrapper-outer, 
body.browser.mobileweb > .userProfileDetailsPage .basicArtistInfo .bioWrapper > .carouselWrapper > .owl-wrapper-outer > .owl-wrapper,
body.browser.mobileweb > .userProfileDetailsPage .basicArtistInfo .bioWrapper > .carouselWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item .carouselItem,
body.browser.mobileweb > .userProfileDetailsPage * .userInfo {
  height: var(--size-360);
  max-height: var(--size-360);
}
.userProfileDetailsPage * .userInfo {
    height: var(--size-360);
    width: var(--size-full);
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
}
body.browser.mobileweb > .userProfileDetailsPage * #userProfileImage,
body.browser.mobileweb > .userProfileDetailsPage * #userProfileImage:hover,
body.browser.mobileweb > .userProfileDetailsPage * #userProfileImage:active{
    height: var(--size-100);
    flex: 0 0 100px;
    -webkit-flex: 0 0 100px;
    width:var(--size-100);
    overflow: hidden !important;    
    margin-bottom: var(--space-sm);
    /* position: absolute; */
}
.playlistDetailsPage #editProfilePicBtn,
.playlistDetailsPage  #editTrebbleCoverPicBtn,
.playlistDetailsPage   #fullCoverArtImage > .overlay {
  display: none;
}
#editProfilePicBtn > i, #editTrebbleCoverPicBtn > i{
  font-size: var(--text-4xl);
  margin: var(--size-none) var(--space-2xs);
}
#editProfilePicBtn > span, #editTrebbleCoverPicBtn > span{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    -webkit-justify-content: center;
    align-content: center;
    -webkit-align-content: center;
    margin-right: var(--space-2xs);
}
.userProfileDetailsPage * #userProfileImage > #editProfilePicBtn{
  position: relative;
  top: 85px;
  font-size: 85%;
  width: 108px;
  display: none;
  margin: auto;
  height: var(--size-20);
  font-weight: 300;
}
/*body.browser.mobilebrowser > .userProfileDetailsPage * #userProfileImage.editable:hover > #editProfilePicBtn,
body.browser.mobileweb > .userProfileDetailsPage * #userProfileImage.editable:hover > #editProfilePicBtn,
.userProfileDetailsPage * #userProfileImage.editable:active > #editProfilePicBtn{
 display: -ms-flexbox;
 display: flex;
 display: -webkit-flex;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-justify-content: center;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-flex-direction: row;
 animation: fadeIn 0.5s;
 animation: fadeIn 0.5s;
 }*/
 .userProfileDetailsPage * #userProfileImage {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--color-white-20);
    height: var(--size-100);
    flex: 0 0 100px;
    -webkit-flex: 0 0 100px;
    width: var(--size-100);
    border-radius: 50%;
    margin: var(--size-none);
    margin-bottom: var(--space-sm);
}

body.browser.mobileweb > .userProfileDetailsPage .basicArtistInfo .bioWrapper,
body.browser.mobileweb > .userProfileDetailsPage .basicArtistInfo .bioWrapper > .carouselWrapper {
  max-height: var(--size-380);
  padding: var(--size-none);
}
.userProfileDetailsPage .basicArtistInfo .bioWrapper,
.userProfileDetailsPage .basicArtistInfo .bioWrapper > .carouselWrapper {
    max-height: var(--size-380);
    padding: var(--size-none);
}
.userProfileDetailsPage .basicArtistInfo .bioWrapper > .carouselWrapper > .owl-wrapper-outer,
.userProfileDetailsPage .basicArtistInfo .bioWrapper > .carouselWrapper > .owl-wrapper-outer > .owl-wrapper,
.userProfileDetailsPage .basicArtistInfo .bioWrapper > .carouselWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item .carouselItem {
    max-height: var(--size-380);
    padding: var(--size-none);
}
#artistDetailsPage * .basicArtistInfo .bioWrapper {
    max-height: var(--size-100);
}
.basicArtistInfo .bioWrapper > a {
    text-decoration: none;
    color: var(--trebble-primary);
    font-weight: 400;
}
#playerFooter.browser * div#songSocialInfoWrapper {
    color: var(--text-dark);
}
#playerFooter.browser * div#songSocialInfoWrapper > .highlight {
    color: var(--text-dark);
    opacity: 0.5;
}
#songSocialInfoWrapper > .highlight {
    color: white;
}
a.ui-link.highlight,
.highlight {
    color: var(--trebble-primary);
    font-weight: 400;
}
body.browser.mobileweb a.ui-link.highlight:hover {
    background-color: var(--trebble-primary);
    color: white;
}
#expandableSongOptions > div > div > a > span.ui-btn-inner {
    padding-right: var(--size-none);
    padding-left: var(--size-none);
    margin-right: var(--size-none);
    margin-left: var(--size-none);
}
#homeOptionsWrapper {
    justify-content: center;
    -webkit-justify-content: center;
    height: var(--size-500);
    flex-direction: column;
    display: flex;
    display: -webkit-flex;
    margin-top: var(--size-icon-md);
}
.popupContent * #homeOptionsWrapper > div {
    color: white;
}
.popupContent * #homeOptionsWrapper > div:active {
    background-color: var(--color-white-5);
}
#homeOptionsWrapper > div {
    box-shadow: var(--shadow-inner-lg);
    padding: var(--space-2xs);
    /* opacity: 0.8; */
    
    border-radius: 1px;
    margin-bottom: var(--border-2);
    margin-right: var(--space-sm);
    margin-top: var(--border-2);
    margin-left: var(--space-sm);
    color: var(--text-dark);
    
    display: block;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    border-bottom: var(--border-1) solid var(--color-white-5);
}
#homeOptionsWrapper > div > a > p {
    font-weight: 400;
    color: var(--text-dark);
    font-size: var(--text-sm);
}
.popupContent * #homeOptionsWrapper > div > a > p {
    color: white;
}
/*


#homeOptionsWrapper > div#MyLibraryOption  {

}

#homeOptionsWrapper > div#PlaylistPodcastsOption {
 background-color: var(--color-blue-400);

}

#homeOptionsWrapper > div#FeedActivityOption {
 background-color: var(--color-orange-500);

}





#homeOptionsWrapper > div#SettingOption  {
 background-color: var(--color-gray-600);

}
*/

.popupContent * #homeOptionsWrapper > div > a {
    font-size: var(--text-xl);
    color: white;
    font-weight: 300;
}
#homeOptionsWrapper > div > a {
    /* margin-top: var(--space-sm); */
    /* margin-left: var(--space-sm); */
    
    width: var(--size-full);
    height: var(--size-full);
    display: inline-block;
    color: var(--text-dark);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 400;
    /*font-weight: 300;*/
    align-items: inherit;
    -webkit-align-items: inherit;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    /* margin: auto; */
}
#FeedActivityPage > div[data-role=header] {
    border: var(--border-1) solid var(--color-orange-400);
    background-color: var(--color-orange-300);
}
#FeedActivityPage > div[data-role=header] > #homeHeaderButton,
#FeedActivityPage > div[data-role=header] > #helpHeaderButton {
    background-color: var(--color-orange-300);
    color: var(--color-orange-400);
}
#PlaylistPodcastsPage > div[data-role=header]
/*, .trebbleEditInfoPage > div[data-role=header]*/

{
  
}
#PlaylistPodcastsPage > div[data-role=header] > #homeHeaderButton,
#PlaylistPodcastsPage > div[data-role=header] > #helpHeaderButton {

    
    color: var(--trebble-primary-dark);
}
#OnAirPage > div[data-role=header] {

}
#OnAirPage > div[data-role=header] > #homeHeaderButton,
#OnAirPage > div[data-role=header] > #helpHeaderButton {

}
#SettingPage > div[data-role=header] {
    border: var(--border-1) solid var(--color-orange-500);
    background-color: var(--color-orange-300);
}
#SettingPage > div[data-role=header] > #homeHeaderButton,
#SettingPage > div[data-role=header] > #helpHeaderButton {
    background-color: var(--color-orange-300);
    color: var(--color-orange-500);
}
/*Library sub Menu*/

#songPoppupMenu > div > ul > li {
    
    background-color: transparent;
    /* border-bottom: var(--border-0); */
    
    color: white;
    font-weight: 400;
    padding-left: var(--text-3xs);
    box-sizing: border-box;
}
#songPoppupMenu,
#loginPoppup,
#paidAccountSubsPopup {
    color: white;
    opacity: 0.94;
    border: var(--border-0);
    height: 507px;
    width: var(--size-340);
    background-color: transparent;
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

#songPoppupMenu .modal_content{
    border: 1px solid var(--border-default-color);
}
#songPoppupMenu  .modal_content .ant-segmented .ant-segmented-item-label .text-xs{
    font-size: 80%;
}
#songPoppupMenu  .modal_content  .ant-segmented .ant-segmented-item-label{
    padding: 0px;
}
[data-role=popup] .modal_content .ant-segmented .ant-segmented-item-selected{
    color: rgba(0,0,0,0.88);
}

.embedded * #loginPoppup {
    max-width: var(--size-400);
}
#loginPoppup * .ui-content > div:first-child{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    -webkit-justify-content: center;
    align-content: center;
    -webkit-align-content: center;
}

#loginPoppup #loginForm .formField{
    margin: var(--size-none);
    width: var(--size-full) !important;
}

#loginPoppup * .ui-content > div:first-child,
#loginPoppup * .ui-content > div:first-child > div{
    max-width: var(--size-400);
    width: var(--size-full);
    
}
#loginPoppup .twoButtonsSet{
    box-sizing:border-box;
    padding: var(--text-lg);
}

[data-role=popup] input::-moz-placeholder{
  color: white !important;
}

[data-role=popup] ::shadow input,
[data-role=popup] input::placeholder{
  color: white !important;
}

#songPoppupMenu.whatsnew > .popupContent {
    display: flex;
}
#songPoppupMenu > div > ul > li.ui-li-divider {
    font-weight: 300;
    color: white;
    padding: var(--size-none);
    border: var(--border-0);
    /*font-size: var(--text-xl);*/
    /*border-bottom: var(--border-1) solid var(--color-white-20);*/
}
.commentTitle {
    color: white;
    font-weight: 300;
    font-size: var(--text-lg);
}
.commentBox {
    font-size: var(--text-lg);
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-content: center;
    -webkit-align-content: center;
    width: var(--size-full);
    margin: var(--size-none) !important;
    height: var(--size-39);
}
.commentBox > .commentForm {
    width: var(--size-full);
}
.commentBox > .commentForm > #comment {
    height: var(--size-39);
    border: var(--border-1) solid white !important;
    background-color: transparent;
    color: white;
    width: var(--size-full);
    font-weight: 400;
    /*font-weight: 300;*/
}
.commentBox > #commentBtn {
    align-content: center;
    -webkit-align-content: center;
    justify-content: center;
    -webkit-justify-content: center;
    display: flex;
    display: -webkit-flex;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    width: var(--size-50);
    /* background-color: var(--color-gray-100); */
    /* border-color: var(--color-gray-100); */
    
    color: white;
    /* line-height: var(--line-height-3xl); */
    
    font-size: var(--text-3xl);
    font-weight: 300;
}
.commentBox > #commentBtn:active {
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
    color: white;
}

input:not([type]),
input[type=date]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=email]:not(.browser-default), 
input[type=number]:not(.browser-default), 
input[type=password]:not(.browser-default), 
input[type=search]:not(.browser-default),
input[type=tel]:not(.browser-default), 
input[type=text]:not(.browser-default):not(.ant-input),
input[type=time]:not(.browser-default), 
input[type=url]:not(.browser-default),
textarea.materialize-textarea{
    padding: var(--border-4);
}

input:not([type]):focus-visible,
input[type=date]:not(.browser-default):focus-visible,
input[type=datetime-local]:not(.browser-default):focus-visible,
input[type=datetime]:not(.browser-default):focus-visible,
input[type=email]:not(.browser-default):focus-visible,
input[type=number]:not(.browser-default):focus-visible,
input[type=password]:not(.browser-default):focus-visible,
input[type=search]:not(.browser-default):focus-visible,
input[type=tel]:not(.browser-default):focus-visible,
input[type=text]:not(.browser-default):not(.ant-input):focus-visible,
input[type=time]:not(.browser-default):focus-visible,
input[type=url]:not(.browser-default):focus-visible,
textarea.materialize-textarea:focus-visible,
textarea.materialize-textarea:focus-within
{
    /* outline: var(--color-gray-150) solid 3px;
    outline-offset: 4px;*/
}

a.ui-link:focus-visible,
.forgotPasswordLink
.ui-btn:focus-visible,
select:focus-visible,
select:focus-within,
button:focus-visible{
    outline: var(--trebble-primary-30) solid 3px;
    /*outline: var(--color-gray-150) solid 3px;*/
    outline-offset: 4px;
}


.div-table {
  display: table;         
  width: auto;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
}

#songPoppupMenu > div,
.popup-menu-content > div {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    width: var(--size-full);
    height: var(--size-full);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#songPoppupMenu > div.popupContent.top,
.popup-menu-content > div.popupContent.top {
    padding-right: var(--space-2xs);
    padding-left: var(--space-2xs);
    overflow: auto;
    box-sizing: border-box;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}
#songPoppupMenu > div.popupContent.bottom,
.popup-menu-content > div.popupContent.bottom {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}
#songPoppupMenu > div > ul,
[data-role=popup].popup-menu-content > div > ul {
    overflow: auto;
    /* height: var(--size-full);*/
    
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    width: var(--size-full);
    box-sizing: border-box;
    max-width: var(--size-700);
}
.c-bottom-sheet ul.trebbleOptionList > li > a,
.trebble-context-menu li.context-menu-item > a,
#songPoppupMenu > div > ul > li > a,
[data-role=popup].popup-menu-content > div > ul > li > a,
[data-role=popup].popup-menu-content > div > ul > li > .toggle_switch_menu,
.c-bottom-sheet ul.trebbleOptionList > li > .toggle_switch_menu  {
    box-sizing: border-box;
    font-size: var(--text-base);
    display: flex;
    display: -webkit-flex;
    padding-left: var(--space-3xs);
    /*border-bottom: var(--border-1) solid var(--color-white-5) !important;*/
    font-weight: 400;
    /*font-weight: 300;*/
    
    height: var(--size-52);
    border: var(--border-0);
    color: white;
    background-color: transparent;
    text-decoration: none;
    align-items: center;
    -webkit-align-items: center;
}

.c-bottom-sheet ul.trebbleOptionList > li.divider ,
.trebble-context-menu li.divider ,
#songPoppupMenu > div > ul > li.divider,
[data-role=popup].popup-menu-content > div > ul > li.divider,
.c-bottom-sheet ul.trebbleOptionList > li.divider {
    border: var(--border-0);
    border-bottom: var(--border-1) solid var(--color-black-10) !important;
    padding: var(--size-none);
    background: transparent;
}

body.darkTheme .c-bottom-sheet ul.trebbleOptionList > li.divider ,
body.darkTheme .trebble-context-menu li.divider ,
body.darkTheme #songPoppupMenu > div > ul > li.divider,
body.darkTheme [data-role=popup].popup-menu-content > div > ul > li.divider,
body.darkTheme .c-bottom-sheet ul.trebbleOptionList > li.divider {
    border: var(--border-0);
    border-bottom: var(--border-1) solid var(--color-white-10) !important;
    padding: var(--size-none);
    background: transparent;
}

.trebble-context-menu li.context-menu-item > a > i,
.c-bottom-sheet ul.trebbleOptionList > li > a > i,
#songPoppupMenu > div > ul > li > a > i,
[data-role=popup].popup-menu-content > div > ul > li > a > i,
[data-role=popup].popup-menu-content > div > ul > li > a > .menu_icon {
    font-size: var(--text-xl);
    margin-right: var(--space-xs);
    opacity: .8;
    
    min-width: var(--size-30);
    display: flex;
    justify-content: center;
    align-items: center;
}
.trebble-context-menu li.context-menu-item > a:active,
#songPoppupMenu > div > ul > li > a:active,
.c-bottom-sheet ul.trebbleOptionList > li > a:active,
[data-role=popup].popup-menu-content > div > ul > li > a:active,
[data-role=popup].popup-menu-content > div > ul > li > .toggle_switch_menu:active,
.c-bottom-sheet ul.trebbleOptionList > li > .toggle_switch_menu:active {
    background-color: var(--color-white-20);
    color: white;
}
#songPoppupMenu-popup,
#songIdifiedInfo-popup,
#songAddedFromSCInfo-popup {
    /*left: 10px;
    top: 10px;*/
    
    left: 0px;
    top: 0px;
    opacity: 0;
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    z-index: 1000;
}

#songPoppupMenu-screen,
#songIdifiedInfo-screen,
#songAddedFromSCInfo-screen ,
#loginPoppup-screen/*,
#paidAccountSubsPopup-screen*/{
    opacity: 0;
    position: fixed;
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    border-color: var(--color-black-100);
    background-color: var(--color-black-100);
}
body.ios > #songPoppupMenu-screen.in ~ .c-bottom-sheet.active,
body.browser > #songPoppupMenu-screen.in ~ .c-bottom-sheet.active,
body.ios > #songPoppupMenu-screen.in ~ .ui-page-active,
body.browser > #songPoppupMenu-screen.in ~ .ui-page-active,
body.browser > #loginPoppup-screen.in ~ .ui-page-active,
body.ios > #loginPoppup-screen.in ~ .ui-page-active/*,
body.browser > #paidAccountSubsPopup-screen.in ~ .ui-page-active,
body.ios > #paidAccountSubsPopup-screen.in ~ .ui-page-active*/ {
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);


    background-color: transparent;
    border: var(--border-0);
}
body.ios > #songIdifiedInfo-screen.in ~ .ui-page-active,
body.browser > #songIdifiedInfo-screen.in ~ .ui-page-active,
body.browser > #loginPoppup-screen.in ~ .ui-page-active,
body.ios > #loginPoppup-screen.in ~ .ui-page-active  {
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);

    background-color: transparent;
}

.ui-popup-screen:not(.in) ~ #songAddedFromSCInfo-popup,
.ui-popup-screen:not(.in) ~ #songIdifiedInfo-popup,
.ui-popup-screen:not(.in) ~ #songPoppupMenu-popup,
.ui-popup-screen:not(.in) ~ #songPoppupMenu-popup{
    display:none;
}
body.ios > #songAddedFromSCInfo-screen.in ~ .ui-page-active,
body.browser > #songAddedFromSCInfo-screen.in ~ .ui-page-active,
body.browser > #loginPoppup-screen.in ~ .ui-page-active,
body.ios > #loginPoppup-screen.in ~ .ui-page-active  {
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    background-color: transparent;
}
body.ios > #songPoppupMenu-screen.in ~ #playerFloating,
body.browser > #songPoppupMenu-screen.in ~ #playerFloating,
body.ios > #songPoppupMenu-screen.in ~ [data-role=footer],
body.browser > #songPoppupMenu-screen.in ~ [data-role=footer],
body.browser > #loginPoppup-screen.in ~ [data-role=footer],
body.ios > #loginPoppup-screen.in ~ [data-role=footer]/*,
body.browser > #paidAccountSubsPopup-screen.in ~ [data-role=footer],
body.ios > #paidAccountSubsPopup-screen.in ~ [data-role=footer] */ {
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    background-color: transparent;
    border: var(--border-0);
}
body.ios > #songIdifiedInfo-screen.in ~ [data-role=footer],
body.browser > #songIdifiedInfo-screen.in ~ [data-role=footer],
body.browser > #loginPoppup-screen.in ~ [data-role=footer],
body.ios > #loginPoppup-screen.in ~ [data-role=footer]  {
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    background-color: transparent;
}
body.ios > #songAddedFromSCInfo-screen.in ~ [data-role=footer],
body.browser > #songAddedFromSCInfo-screen.in ~ [data-role=footer],
body.browser > #loginPoppup-screen.in ~ [data-role=footer],
body.ios > #loginPoppup-screen.in ~ [data-role=footer] {
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    background-color: transparent;
}
body.ios > #songPoppupMenu-screen.out ~ .ui-page-active,
body.browser > #songPoppupMenu-screen.out ~ .ui-page-active,
body.browser > #loginPoppup-screen.out ~ .ui-page-active,
body.ios > #loginPoppup-screen.out ~ .ui-page-active/*,
body.browser > #paidAccountSubsPopup-screen.out ~ .ui-page-active,
body.ios > #paidAccountSubsPopup-screen.out ~ .ui-page-active */{
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
body.ios > #songIdifiedInfo-screen.out ~ .ui-page-active,
body.browser > #songIdifiedInfo-screen.out ~ .ui-page-active,
body.browser > #loginPoppup-screen.out ~ .ui-page-active,
body.ios > #loginPoppup-screen.out ~ .ui-page-active  {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
body.ios > #songAddedFromSCInfo-screen.out ~ .ui-page-active,
body.browser > #songAddedFromSCInfo-screen.out ~ .ui-page-active,
body.browser > #loginPoppup-screen.out ~ .ui-page-active,
body.ios > #loginPoppup-screen.out ~ .ui-page-active  {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
body.ios > #songPoppupMenu-screen.out ~ [data-role=footer],
body.browser > #songPoppupMenu-screen.out ~ [data-role=footer],
body.browser > #loginPoppup-screen.out ~ [data-role=footer],
body.ios > #loginPoppup-screen.out ~ [data-role=footer] /*,
body.browser > #paidAccountSubsPopup-screen.out ~ [data-role=footer],
body.ios > #paidAccountSubsPopup-screen.out ~ [data-role=footer] */ {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
body.ios > #songIdifiedInfo-screen.out ~ [data-role=footer],
body.browser > #songIdifiedInfo-screen.out ~ [data-role=footer],
body.browser > #loginPoppup-screen.out ~ [data-role=footer],
body.ios > #loginPoppup-screen.out ~ [data-role=footer]  {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
body.ios > #songAddedFromSCInfo-screen.out ~ [data-role=footer],
body.browser > #songAddedFromSCInfo-screen.out ~ [data-role=footer],
body.browser > #loginPoppup-screen.out ~ [data-role=footer],
body.ios > #loginPoppup-screen.out ~ [data-role=footer]  {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
body.ios > #songPoppupMenu-screen ~ .ui-page-active,
body.browser > #songPoppupMenu-screen ~ .ui-page-active ,
body.browser > #loginPoppup-screen.out ~ .ui-page-active,
body.ios > #loginPoppup-screen.out ~ .ui-page-active/*,
body.browser > #paidAccountSubsPopup-screen.out ~ .ui-page-active,
body.ios > #paidAccountSubsPopup-screen.out ~ .ui-page-active */{
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
body.ios > #songIdifiedInfo-screen ~ .ui-page-active,
body.browser > #songIdifiedInfo-screen ~ .ui-page-active,
body.browser > #loginPoppup-screen.out ~ .ui-page-active,
body.ios > #loginPoppup-screen.out ~ .ui-page-active {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
body.ios > #songAddedFromSCInfo-screen ~ .ui-page-active,
body.browser > #songAddedFromSCInfo-screen ~ .ui-page-active,
body.browser > #loginPoppup-screen ~ .ui-page-active,
body.ios > #loginPoppup-screen ~ .ui-page-active {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
body.ios > #songPoppupMenu-screen,
/*body.ios > #paidAccountSubsPopup-screen,*/
body.ios > #songIdifiedInfo-screen,
body.ios > #songAddedFromSCInfo-screen,
body.browser > #songPoppupMenu-screen,
/*body.browser > #paidAccountSubsPopup-screen,*/
body.browser > #songIdifiedInfo-screen,
body.browser > #songAddedFromSCInfo-screen,
body.browser > #loginPoppup-screen,
body.ios > #loginPoppup-screen  {
    opacity: 0;
    position: fixed;
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    border-color: var(--color-black-80);
    background-color: var(--color-black-80);
    z-index: 1000;
}

body.ios > #paidAccountSubsPopup-screen,
body.browser > #paidAccountSubsPopup-screen{
    opacity: 1;
    border-color: var(--color-gray-100);
    background-color: var(--color-gray-100);
}

#paidAccountSubsPopup-popup{
    background-color: transparent;
}

#songPoppupMenu-screen.in,
/*#paidAccountSubsPopup-screen.in,*/
#songIdifiedInfo-screen.in,
#songAddedFromSCInfo-screen.in,
#loginPoppup-screen.in {
    opacity: 0.94;
    -moz-animation-duration: 325ms;
    -moz-animation-name: popupfadein;
    animation-duration: 325ms;
    animation-name: popupfadein;
}
#loginPoppup-screen.in{
    display: none;
}
#songPoppupMenu-screen.out,
/*#paidAccountSubsPopup-screen.out,*/
#songIdifiedInfo-screen.out,
#songAddedFromSCInfo-screen.out,
#loginPoppup-screen.out {
    opacity: 0;
    -moz-animation-duration: 325ms;
    -moz-animation-name: popupfadeout;
    animation-duration: 325ms;
    animation-name: popupfadeout;
}
#songPoppupMenu-screen.whatsnew,
body.ios > #songPoppupMenu-screen.whatsnew,
body.browser > #songPoppupMenu-screen.whatsnew,
body.browser > #loginPoppup-screen.whatsnew,
body.ios > #loginPoppup-screen.whatsnew {
    /*background-color: var(--error);*/
    /*background: linear-gradient(-45deg, var(--color-pink-alt), var(--color-orange-200));
    background: -webkit-linear-gradient(-45deg, var(--color-pink-alt), var(--color-orange-200));*/
}
@keyframes popupfadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.96;
    }
}
@keyframes popupfadeout {
    from {
        opacity: 0.96;
    }
    to {
        opacity: 0;
    }
}

/*
@media (max-width: 380px), (max-height: 380px) and   (orientation: landscape) {
  body.mobilebrowser.ios > #songPoppupMenu-screen.in ~ .ui-page-active,
  body.browser.mobilebrowser > #songPoppupMenu-screen.in ~ .ui-page-active,
  body.mobilebrowser.mobilebrowser.browser > #loginPoppup-screen.in ~ .ui-page-active,
  body.mobilebrowser.ios > #loginPoppup-screen.in ~ .ui-page-active,
  body.mobilebrowser.browser > #songPoppupMenu-placeholder ~ .ui-page-active,
  body.mobilebrowser.browser > #loginPoppup-placeholder ~ .ui-page-active,
  body.mobilebrowser.ios > #songPoppupMenu-placeholder ~ .ui-page-active,
  body.mobilebrowser.ios > #loginPoppup-placeholder ~ .ui-page-active{
      -webkit-filter:none;
      -moz-filter: none;
      -o-filter: none;
      -ms-filter: none;
      filter: none;
  }
  body.mobilebrowser.ios > #songPoppupMenu-screen,
  body.mobilebrowser.ios > #songIdifiedInfo-screen,
  body.mobilebrowser.ios > #songAddedFromSCInfo-screen,
  body.mobilebrowser.browser > #songPoppupMenu-screen,
  body.mobilebrowser.browser > #songIdifiedInfo-screen,
  body.mobilebrowser.browser > #songAddedFromSCInfo-screen,
  body.mobilebrowser.browser > #loginPoppup-screen,
  body.mobilebrowser.ios > #loginPoppup-screen {

    border-color: var(--color-black-100);
    background-color: var(--color-black-100);
}

}
*/

#librarySubMenuWrapper > div.ui-controlgroup-controls {
    width: var(--size-full);
    height: var(--size-50);
}
#librarySubMenuWrapper > div > a.ui-btn-down-a > span.ui-btn-inner {
    color: white;
}
#librarySubMenuWrapper > div > a > span.ui-btn-inner {
    padding-right: var(--size-none);
    font-size: var(--text-xs);
    padding-left: var(--size-none);
    margin-right: var(--size-none);
    margin-left: var(--size-none);
    font-weight: 400;
    line-height: var(--line-height-3xl);
    color: var(--color-gray-700);
}
#librarySubMenuWrapper > div > a {
    height: 90%;
}
#librarySubMenuWrapper > div > a.ui-btn-down-a {
    color: white;
}
div.songLibraryWrapper > .infiniteListItem {
    background-color: inherit;
    border-color: inherit;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
}

div.songLibraryWrapper > .infiniteListItem.textonly{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
}
div.songLibraryWrapper > .infiniteListItem.textonly > .textwrapper{
    /*flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -o-flex: 1 1 auto;*/
    width: var(--size-full);

}

div.songLibraryWrapper.showCoverArt > .infiniteListItem.textonly > .textwrapper{
    width: calc(var(--size-full) - 63px);
    padding: var(--border-6);

}


.songLibraryWrapper > .infiniteListItem.textonly > .playIconWrapper,
.songLibraryWrapper > .infiniteListItem.textAndImage > #imageContainer > .playIconWrapper {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -ms-justify-content: center;
    -ms-align-items: center;
}

.songLibraryWrapper > .infiniteListItem.textonly > .playIconWrapper > .playicon,
.songLibraryWrapper > .infiniteListItem.textAndImage > #imageContainer > .playIconWrapper > .playicon {
   justify-content: center;
   align-items: center;
   -webkit-justify-content: center;
   -webkit-align-items: center;
   -ms-justify-content: center;
   -ms-align-items: center;
   display: flex;
   display: -webkit-flex;
   width: var(--size-40);
   height: var(--size-40);
   padding-left: var(--border-4);
   font-size: var(--text-3xl-px);
   color:var(--trebble-primary);
}

body.mobileweb .songLibraryWrapper > .infiniteListItem.textonly:hover > .playIconWrapper ,
body.mobileweb .songLibraryWrapper > .infiniteListItem.textonly:active > .playIconWrapper ,
body.mobileweb .songLibraryWrapper > .infiniteListItem.textAndImage:hover  > #imageContainer > .playIconWrapper ,
body.mobileweb .songLibraryWrapper > .infiniteListItem.textAndImage:active  > #imageContainer > .playIconWrapper {
    display: flex;
    display: -webkit-flex;
}

div.songLibraryWrapper.currentlyPlaying > .infiniteListItem > .songTitleLibrary,
div.songLibraryWrapper.currentlyPlaying > .infiniteListItem > .songArtistLibrary {
    color: var(--trebble-primary) !important;
}
div.songLibraryWrapper.songlistItem > .infiniteListItem,
div.songLibraryWrapper.albumlistItem > .infiniteListItem,
div.songLibraryWrapper.artistlistItem > .infiniteListItem {
    padding: var(--size-em-2xs);
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
}
div.songLibraryWrapper.songlistItem > .infiniteListItem:active,
div.songLibraryWrapper.albumlistItem > .infiniteListItem:active,
div.songLibraryWrapper.artistlistItem > .infiniteListItem:active {
    color: white;
}

.infiniteListItem  .songArtistLibrary .radio_type_tag.journey_tag{
    padding-right: var(--border-4);
}

.infiniteListItem  .songArtistLibrary .pe-7s-sun.journeyIcon,
.infiniteListItem  .songArtistLibrary .ion-ios7-time-outline.journeyOultlineListIcon{
    font-weight: bold;
    margin-right: var(--space-3xs);
}
.infiniteListItem  .songArtistLibrary .fontello-icon-list.journeyOultlineListIcon{
    font-size: var(--text-base-px);
}

div.songLibraryWrapper > .infiniteListItem.songInfo > .songAndArtist {
    flex: 1 1 calc(var(--size-full) - var(--size-icon-lg));
    -webkit-flex: 1 1 calc(var(--size-full) - var(--size-icon-lg));
    -moz-flex: 1 1 calc(var(--size-full) - var(--size-icon-lg));
    -o-flex: 1 1 calc(var(--size-full) - var(--size-icon-lg));
    /*max-width: calc(var(--size-full) - var(--size-icon-lg) - var(--text-base));*/
    max-width: calc(var(--size-full) - var(--size-icon-lg));
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    -moz-align-items: flex-start;
    -o-align-items: flex-start;

}
.songAndArtist {

} 

div.songLibraryWrapper > .infiniteListItem > .imageContainer {
    flex: 0 0 52px;
    -webkit-flex: 0 0 52px;
    display: flex;
    display: -webkit-flex;
    height: var(--size-52);
    width: var(--size-52);
    background-color: var(--color-gray-100);
    position: relative;
}
.lighttext * div.songLibraryWrapper > .infiniteListItem > .imageContainer {
    background-color: transparent;
}
.youtubeList > .infiniteListOuterContainer > #innerContainer * div.songLibraryWrapper > .infiniteListItem > .imageContainer {
    width: var(--size-100);
    flex: 0 0 100px;
    -webkit-flex: 0 0 100px;
    -moz-flex: 0 0 100px;
    -ms-flex: 0 0 100px;
    height: 57px;
}
.youtubeList > .infiniteListOuterContainer > #innerContainer * div.songLibraryWrapper > .infiniteListItem > .songAndArtist {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    display: -webkit-flex;
    -webkit-justify-content: center;
    display: -moz-flex;
    -moz-flex-direction: column;
    -moz-justify-content: center;
    display: -ms-flex;
    -ms-justify-content: center;
    overflow: hidden;
}
div.songLibraryWrapper.artistlistItem > .infiniteListItem > .imageContainer {
    border-radius: 50%;
}
div.songLibraryWrapper > .infiniteListItem > .imageContainer > img {
    -o-object-fit: cover;
       object-fit: cover;
    width: var(--size-full);
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--color-gray-100);
}
.lighttext * div.songLibraryWrapper > .infiniteListItem > .imageContainer > img {
    background-color: var(--color-white-20);
}
div.songLibraryWrapper.artistlistItem > .infiniteListItem > .imageContainer > img {
    border-radius: 50%;
}
div.songOptionBtnWrapper > .infiniteListItem.ui-btn.ui-btn-up-a.ui-shadow.ui-btn-corner-all.ui-btn-inline {
    -o-object-fit: cover;
       object-fit: cover;
    width: var(--size-full);
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--color-gray-100);
}
[trebbleclass=playerSlider] >:first-child >:nth-child(2) {
    height: var(--size-2);
    border: var(--border-0);
    margin-left: var(--size-none);
}
.ui-slider-track > a:first-child {
    border-radius: 50%;
    -webkit-border-radius: 50%;
}
.side-main-menu > li > div > div > a > span[class*=fontello-icon] {
    font-size: var(--text-xl);
    margin-right: var(--space-3xs);
    /*text-shadow: 2px 2px 2px var(--trebble-primary-dark);*/
    color: var(--color-gray-400);
    font-weight: 400;
}
.side-main-menu > li {
    height: var(--size-40);
}
#songList,
#albumList,
#artistList,
#moreList,
/*#capsuleList,*/
#myFeedList,
#myNotificationsList {
    box-sizing: border-box;
    padding-bottom: var(--size-none);
    padding-top: var(--size-none);
    border: var(--border-0);
    /* background-color: var(--bg-light);*/

    padding-top: var(--border-6);
    box-shadow: var(--shadow-inner-md);
}
#myNotificationsList {
    background-color: var(--bg-light);
}
#userProfileWrapper {} 
#moreList,
#capsuleList {
    padding-left: var(--size-none);
    padding-right: var(--size-none);
}
#albumSongListWrapper {
    padding: var(--space-xs);
}
.songOptionBtnWrapper,
.capsuleBtnWrapper,
.gradesBtnWrapper,
.showCommentBtnWrapper,
.showInfoBtnWrapper,
.addToTrebbleBtnWrapper {
    margin-right: 0em;
    width: var(--size-50);
    /* background-color: white; */
    /* border-bottom: var(--border-1) solid var(--color-gray-100);*/
    /* border-bottom: var(--border-1) solid var(--bg-light); */
}
div.songLibraryWrapper.songlistItem > .capsuleBtnWrapper,
div.songLibraryWrapper.albumlistItem > .capsuleBtnWrapper,
div.songLibraryWrapper.artistlistItem > .capsuleBtnWrapper,
div.songLibraryWrapper.songlistItem > .songOptionBtnWrapper,
div.songLibraryWrapper.albumlistItem > .actionButtonWrapper,
div.songLibraryWrapper.artistlistItem > .actionButtonWrapper {
    flex-direction: row;
    display: flex;
    display: -webkit-flex;
    width: auto;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    margin: var(--size-none) var(--border-4);
}
div.songLibraryWrapper.songlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled,
div.songLibraryWrapper.albumlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled,
div.songLibraryWrapper.artistlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled,
div.songLibraryWrapper.songlistItem > .songOptionBtnWrapper > #actionButton.enabled,
div.songLibraryWrapper.albumlistItem > .actionButtonWrapper > #actionButton.enabled,
div.songLibraryWrapper.artistlistItem > .actionButtonWrapper> #actionButton.enabled {
    width: var(--size-50);
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    color: var(--text-muted-dark);
    font-size: var(--text-xl);
    background-color: transparent;
    position: relative;
    cursor: pointer;
}
.lighttext * div.songLibraryWrapper.songlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled,
.lighttext * div.songLibraryWrapper.albumlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled,
.lighttext * div.songLibraryWrapper.artistlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled,
.lighttext * div.songLibraryWrapper.songlistItem > .songOptionBtnWrapper > #actionButton.enabled,
.lighttext * div.songLibraryWrapper.albumlistItem > .actionButtonWrapper > #actionButton.enabled,
.lighttext * div.songLibraryWrapper.artistlistItem > .actionButtonWrapper> #actionButton.enabled {
    color: var(--color-white-50)
}
[data-role=popup] * div.songLibraryWrapper.songlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled,
[data-role=popup] * div.songLibraryWrapper.albumlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled,
[data-role=popup] * div.songLibraryWrapper.artistlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled,
[data-role=popup] * div.songLibraryWrapper.songlistItem > .songOptionBtnWrapper > #actionButton.enabled,
[data-role=popup] * div.songLibraryWrapper.albumlistItem > .actionButtonWrapper > #actionButton.enabled,
[data-role=popup] * div.songLibraryWrapper.artistlistItem > .actionButtonWrapper> #actionButton.enabled {
    color: var(--color-white-80);
}
div.songLibraryWrapper.songlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:active,
div.songLibraryWrapper.albumlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:active,
div.songLibraryWrapper.artistlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:active,
div.songLibraryWrapper.songlistItem > .songOptionBtnWrapper > #actionButton.enabled:active,
div.songLibraryWrapper.albumlistItem > .actionButtonWrapper > #actionButton.enabled:active,
div.songLibraryWrapper.artistlistItem > .actionButtonWrapper> #actionButton.enabled:active {
    background: var(--trebble-primary);
    border-color: var(--trebble-primary);
    color: var(--text-light);
}
.songOptionBtnWrapper > a#songLibraryOptionButtuon:active {
    color: white !important;
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
}
#songLibraryOptionButtuon,
#songCapsuleOptionButtuon,
#gradeOptionButtuon,
.showCommentBtnWrapper #showCommentOptionButton,
.showInfoBtnWrapper #showInfoOptionButton,
#addToTrebbleOptionButtuon {
    padding: var(--size-none);
    margin-bottom: var(--size-none);
    margin-top: var(--size-none);
    margin-right: var(--size-none);
    margin-left: var(--size-none);
    /*background-color: var(--bg-light);*/

    background-color: transparent;
    border: var(--border-0);
    width: var(--size-full);
    height: var(--size-full);
    color: var(--text-muted-dark) !important;
    font-size: var(--text-xl);
    line-height: 59px;
    flex: 0 0 40px;
    -webkit-flex: 0 0 40px;
    -ms-flex: 0 0 40px;
    -o-flex: 0 0 40px;
}
.lighttext * #songLibraryOptionButtuon,

.lighttext * #gradeOptionButtuon,
.lighttext * .showCommentBtnWrapper #showCommentOptionButton,
.lighttext * .showInfoBtnWrapper #showInfoOptionButton,
.lighttext * #addToTrebbleOptionButtuon {
    color: var(--color-white-50) !important;
}
#songCapsuleOptionButtuon,
div.songLibraryWrapper.songlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled,
#addToTrebbleOptionButtuon.ion-ios7-checkmark-outline,
#gradeOptionButtuon.ion-ios7-pricetags,
.showCommentBtnWrapper #showCommentOptionButton,
.showInfoBtnWrapper #showInfoOptionButton {
    color: var(--trebble-primary) !important;
    font-size: var(--text-xl);
    background-color: transparent;
}
body.browser.mobileweb #songCapsuleOptionButtuon:hover,
body.browser.mobileweb div.songLibraryWrapper.songlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb #addToTrebbleOptionButtuon.ion-ios7-checkmark-outline:hover,
body.browser.mobileweb #gradeOptionButtuon.ion-ios7-pricetags:hover,
body.browser.mobileweb .showCommentBtnWrapper #showCommentOptionButton:hover,
body.browser.mobileweb .showInfoBtnWrapper #showInfoOptionButton:hover {
    color: var(--trebble-primary) !important;
    font-size: var(--text-xl);
    background-color: var(--bg-overlay-dark);
}
body.browser.mobileweb .lighttext * #songCapsuleOptionButtuon:hover,
body.browser.mobileweb div.songLibraryWrapper.songlistItem > .capsuleBtnWrapper > #songCapsuleOptionButton.enabled:hover,
body.browser.mobileweb .lighttext * #addToTrebbleOptionButtuon.ion-ios7-checkmark-outline:hover,
body.browser.mobileweb .lighttext *#gradeOptionButtuon.ion-ios7-pricetags:hover,
body.browser.mobileweb .lighttext * .showCommentBtnWrapper #showCommentOptionButton:hover,
body.browser.mobileweb .lighttext * .showInfoBtnWrapper #showInfoOptionButton:hover {
    color: var(--trebble-primary) !important;
}
#songLibraryOptionButtuon:active {
    background: var(--trebble-primary);
    border-color: var(--trebble-primary);
    color: var(--text-light);
}
#songAddToQueueTooltip {
    font-size: var(--text-xs);
    color: white;
    top: 1px;
    background-color: transparent;
    height: var(--size-60);
    position: absolute;
    width: var(--size-full);
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}
.lighttext * #songAddToQueueTooltip {
    color: white;
}
#songAddToQueueTooltip.optionOnPanRight {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}
#songAddToQueueTooltip.optionOnPanLeft {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    float: right;
}
/*#songAddToQueueTooltip.optionSelected {
 background-color: var(--trebble-primary-light);
 -webkit-transition: background-color 500ms ease-in;
 -moz-transition: background-color 500ms ease-in;
 -o-transition: background-color 500ms ease-in;
 transition: background-color 500ms ease-in;
 }*/

 #songAddToQueueTooltip.optionOnPanRight.optionLevel_1_valid {
    background-color: var(--pulse-green);
}
#songAddToQueueTooltip.optionOnPanRight.optionLevel_1_invalid {
    background-color: var(--color-gray-400);
}
#songAddToQueueTooltip.optionOnPanLeft.optionLevel_1_valid {
    background-color: var(--color-orange-500);
}
#songAddToQueueTooltip.optionOnPanLeft.optionLevel_1_invalid {
    background-color: var(--color-gray-400);
}
.commentForm >div > input#comment {
    background-color: transparent;
    border: var(--border-1) solid white;
    color: white;
    font-size: var(--text-base);
    height: var(--size-100)
}
#songAddToQueueTooltip.optionOnPanRight.optionLevel_1_valid.optionSelected,
#songAddToQueueTooltip.optionOnPanLeft.optionLevel_1_valid.optionSelected,
#songAddToQueueTooltip.optionOnPanRight.optionLevel_2_valid.optionSelected,
#songAddToQueueTooltip.optionOnPanLeft.optionLevel_2_valid.optionSelected {
    background-color: var(--trebble-primary-light);
    transition: background-color 500ms linear;
}
#songAddToQueueTooltip.optionOnPanRight.optionLevel_1_invalid.optionSelected,
#songAddToQueueTooltip.optionOnPanLeft.optionLevel_1_invalid.optionSelected,
#songAddToQueueTooltip.optionOnPanRight.optionLevel_2_invalid.optionSelected,
#songAddToQueueTooltip.optionOnPanLeft.optionLevel_2_invalid.optionSelected {
    background-color: var(--color-gray-400);
    transition: background-color 500ms linear;
}
.songLibraryWrapper.animateToZeroXPosition,
#songAddToQueueTooltip > .animateToZeroXPosition {
    transform: translateX(0px);
    transition: all 200ms cubic-bezier(.52, .17, .36, .86);
}
/*
.songLibraryWrapper.animateToZeroXPosition,
#songAddToQueueTooltip > .animateToZeroXPosition
{
 transform: translateX(0px);
 -webkit-transition: all 300ms cubic-bezier(.21,-0.7,.01,.93);
 -moz-transition: all 300ms cubic-bezier(.21,-0.7,.01,.93);
 -o-transition: all 300ms cubic-bezier(.21,-0.7,.01,.93);
 transition: all 300ms cubic-bezier(.21,-0.7,.01,.93);
 }*/
 /*
 .songLibraryWrapper.animateToZeroXPosition,
 #songAddToQueueTooltip.optionOnPanRight.optionLevel_1_valid.optionSelected > .animateToZeroXPosition,
 #songAddToQueueTooltip.optionOnPanLeft.optionLevel_1_valid.optionSelected > .animateToZeroXPosition,
 #songAddToQueueTooltip.optionOnPanRight.optionLevel_2_valid.optionSelected > .animateToZeroXPosition,
 #songAddToQueueTooltip.optionOnPanLeft.optionLevel_2_valid.optionSelected > .animateToZeroXPosition,
 #songAddToQueueTooltip.optionOnPanRight.optionLevel_1_invalid.optionSelected > .animateToZeroXPosition,
 #songAddToQueueTooltip.optionOnPanLeft.optionLevel_1_invalid.optionSelected > .animateToZeroXPosition,
 #songAddToQueueTooltip.optionOnPanRight.optionLevel_2_invalid.optionSelected > .animateToZeroXPosition,
 #songAddToQueueTooltip.optionOnPanLeft.optionLevel_2_invalid.optionSelected  > .animateToZeroXPosition{
     transform: translateX(0px);
     -webkit-transition: all 300ms cubic-bezier(.21,-0.7,.01,.93);
     -moz-transition: all 300ms cubic-bezier(.21,-0.7,.01,.93);
     -o-transition: all 300ms cubic-bezier(.21,-0.7,.01,.93);
     transition: all 300ms cubic-bezier(.21,-0.7,.01,.93);
 }
 */

 #songAddToQueueTooltip.optionOnPanRight.optionLevel_2_valid {
    background-color: var(--color-blue-400);
}
#songAddToQueueTooltip.optionOnPanLeft.optionLevel_2_valid {
    background-color: var(--color-orange-500);
}
#songAddToQueueTooltip.optionOnPanRight.optionLevel_2_invalid {
    background-color: var(--color-gray-400);
}
#songAddToQueueTooltip.optionOnPanLeft.optionLevel_2_invalid {
    background-color: var(--color-gray-400);
}
#songAddToQueueTooltip > div:nth-child(1) {
    display: flex;
    display: -webkit-flex;
    padding: var(--space-2xs);
    padding-left: var(--space-2xs);
    font-size: var(--text-sm-px);
    font-weight: 400;
    /*font-weight: 300;*/
    align-items: center;
    -webkit-align-items: center;
}
#songAddToQueueTooltip > div:nth-child(1) > i {
  padding: var(--space-2xs);
  padding-left: var(--space-2xs);
  margin-right: var(--border-2);
  font-size: var(--text-xl-px);
  font-weight: 400;
  /*font-weight: 300;*/
}

/*
#placeHolderSongList > ul > li >div >div > .ui-link-inherit {
 margin: var(--size-none);
 padding: var(--border-6);
 height: var(--size-50);
 text-decoration: none;
 border-bottom-width: var(--border-1);
 border-bottom-color: var(--color-gray-400);
 border-bottom-style: solid;
 color:var(--color-black);
 }*/
 /* Song Library */

 .songLibraryWrapper {
    background-color: inherit;
    display: flex;
    line-height: var(--line-height-2xl);
    margin-right: var(--size-none);
    margin-left: 0em;
    padding: 0em;
    border-bottom: var(--border-1) solid var(--color-gray-100);
    border-bottom: var(--border-1) solid var(--color-black-5);
    color: var(--text-dark);
}
/*
.songLibraryWrapper.isLoadedInPlayer .songTitleLibrary{
    color:var(--trebble-primary);   
}
*/

.songLibraryWrapper.artistlistItem {
    height: 59px;
}
.lighttext * .songLibraryWrapper {
    border-bottom: var(--border-1) solid var(--color-white-5);
    color: var(--color-white-100);
}
.songLibraryWrapper > .infiniteListItem {
    padding: var(--size-em-2xs);
    margin: var(--size-none);
    text-align: left;
    display: block;
    flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
}
.songLibraryWrapper > .infiniteListItem:active,
.songLibraryWrapper > .infiniteListItem:active ~  .explicitIconWrapper{
    color: white;
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
}
.songLibraryWrapper > .infiniteListItem:active > div {
    color: white;
    /*background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);*/
}
.songLibraryWrapper > .infiniteListItem:active > div > div {
    color: white;
}
#albumArtImage {
    /* padding: var(--space-xs); */
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    /* box-shadow: var(--color-black-10) 0px 0px 0px 2px; */
}
/*
.songLibraryWrapper > a.ui-btn-down-undefined {
    background-color: var(--trebble-primary);
    border: var(--border-1) solid var(--trebble-primary);
    color: var(--text-light)
}
*/

#songLibraryOptionButtuon.ui-btn-down-a {
    background-color: var(--trebble-primary);
    border: var(--border-1) solid var(--trebble-primary);
    color: var(--text-light)
}
/*
.songLibraryWrapper > a.ui-btn-down-undefined > .songTitleLibrary {
    margin: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    color: var(--text-light);
}

.songLibraryWrapper > a.ui-btn-down-undefined > .songArtistLibrary {
    margin: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--text-light)
}
*/

.songTitleLibrary {
    margin: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    width: var(--size-full);
    color: var(--text-dark);
}
.lighttext * .songTitleLibrary {
    color: var(--color-white-80);
}
.songArtistLibrary {
    margin: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    /*color: var(--color-black-20);*/
    color: var(--text-dark);
    opacity: 0.5;
    font-weight: 400;
    width: var(--size-full);
}
[data-role=popup] * .songArtistLibrary {
    color: var(--color-white-50);
}
.lighttext * .songArtistLibrary {
    color: var(--color-white-30);
}
#myLibraryHeader,
#globalSearchPageHeader {
    /* border-top-width: var(--border-2); */
    /* border-bottom-width: var(--border-1); */
    /* border-bottom-color: var(--trebble-primary); */
    /* border-top-color: var(--trebble-primary); */
}
#globalSearch * .ui-content{
  display: block;
  text-align: center;
}
#globalSearch * .ui-content > div{
  display: inline-block;
  width: var(--size-full);
  vertical-align: top;
  margin: auto;
}

.ui-content{
    box-sizing: border-box;
}



/*
@media(max-width: 1200px){
    #globalSearch * .ui-content > div{
      width: var(--size-half);

  }
}
@media(max-width: 600px){
    #globalSearch * .ui-content > div{
      width: var(--size-full);

  }
}
*/

#mylibrary * .ui-content > [data-role=tabs],
#mySubscriptions * .ui-content > [data-role=tabs],
#myJourneys * .ui-content > [data-role=tabs],
#PlaylistPodcastsPage * .ui-content > [data-role=tabs],
#FeedAndActivityPage * .ui-content > [data-role=tabs],
#CapsulesPage * .ui-content > [data-role=tabs]
{
    position: static;
}
#FeedAndActivityPage > .ui-panel-wrapper {
    /* background-color: white; */
}
#trebbleEditInfoHeader,
#shortcastEditInfoHeader {
    height: var(--size-52);
}
#homeHeaderWrapper {
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: var(--line-height-2-5);
    vertical-align: middle;
    text-align: left;
    /*height: 100%;*/
    
    display: inline-table;
    position: relative;
    left: 1em;
}
#queueMenuOptionBtn {
    line-height: var(--line-height-2);
    padding: var(--size-none);
    right: 0em;
    border: var(--border-0);
    width: var(--size-50);
    /* border-bottom: var(--border-0); */
    
    top: 0em;
    /* height: var(--size-full); */
    
    font-size: var(--text-xl);
    display: block;
    text-align: center;
    color: white;
    display: none!important;
}
#pageHeaderTitleWrapper {
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 900;
    font-size: var(--text-3xl);
    line-height: var(--line-height-5xl);
    vertical-align: middle;
    display: flex;
    display: -webkit-flex;
    align-content: center;
    -webkit-align-content: center;
    -ms-flex-pack: center;
    white-space: nowrap; 

}
/*
.ui-popup-container #pageHeaderTitleWrapper {
   background: linear-gradient(var(--color-black-50), var(--color-black-0) 100%)
}
*/
.browser.mobilebrowser  #pageHeaderTitleWrapper {
 /*font-weight: 300; */

}
@media ( max-width: 470px) {
 body:not(.browser) #pageHeaderTitleWrapper {
    font-weight: 600;
    /*font-weight: 300;*/

}

.listHeader{
    font-size: var(--text-lg);
}

body #pageHeaderTitleWrapper {
    font-size: var(--text-lg);
}

body:not(.browser) div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a,
body:not(.browser) div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a {
    font-weight: 400;
}

body:not(.browser) .homePanel * .menuBox > .panelMenuItem > .menuLabel,
body:not(.browser) .homePanel * .settingMenuBox {
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 2px;
}
.homePanel * .menuBox > .panelMenuItem> i.ion-contrast:before{
  opacity:0.8;
}
body:not(.browser) .homePanel * .loggedInUserInfoBox > .userCoverArtWrapper > .userInfo > .username.itemTitle{
    font-weight: 400;
}

#playlistPodcastTabs .ui-grid-b > .ui-block-b,
#playlistPodcastTabs .ui-grid-b > .ui-block-a{
  width: var(--size-half);
}
#capsuleTabs .ui-grid-b > .ui-block-b,
#capsuleTabs .ui-grid-b > .ui-block-a,
#capsuleTabs .ui-grid-b > .ui-block-c {
    width: var(--size-half);
}
}
#artistDetailHeaderWrapper {
    padding-right: var(--text-base);
    padding-left: var(--text-6xl);
    position: relative;
    /* margin: var(--size-none); */
    
    white-space: pre;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: var(--line-height-2-5);
    text-align: left;
}
div.ui-header[data-role=header] {
    flex: 0 0 52px;
    -webkit-flex: 0 0 52px;
    height: var(--size-52) !important;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex-direction: row;
    display: flex;
    display: -webkit-flex;
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
    overflow: visible;
}
[data-role=popup] * div.ui-header[data-role=header],
#featurePage > div.ui-header[data-role=header],
#ExplorePage > div.ui-header[data-role=header],
#Onboarding > div.ui-header[data-role=header],
#GetStartedForCuratorsPage > div.ui-header[data-role=header],
.TrebbleStatisticPage.lighttext > div.ui-header[data-role=header],
.createCapsulePage > div.ui-header[data-role=header]{
    background-color: transparent;
    border-color: transparent;
    width: var(--size-full);
}

[data-role=page].createCapsulePage.lighttext.transparent > .ui-content,
[data-role=page].createCapsulePage.lighttext.transparent > .ui-content .sequencer_settings .itemTitle,
[data-role=page].createCapsulePage.lighttext.transparent > .ui-content .sequencer_settings .settingSection .sectionTitle,
[data-role=page].createCapsulePage.lighttext.transparent > .ui-content .pause_audio_segment_node {
    color: white;
}

[data-role=page].createCapsulePage   div.ui-input-text{
   background-color: transparent;
   border-width: var(--border-0) !important;
}
[data-role=page].createCapsulePage #textToConvertField,
[data-role=page].createCapsulePage #instructionsForVoiceActorField,
[data-role=page].createCapsulePage #textToConvertByVoiceActorField{
    height: var(--size-full);
    box-sizing: border-box;
    padding: var(--space-sm);
}

[data-role=page].createCapsulePage #textToConvertField,
[data-role=page].createCapsulePage #instructionsForVoiceActorField,
[data-role=page].createCapsulePage #textToConvertByVoiceActorField,
[data-role=page].createCapsulePage  #comment,
[data-role=page].createCapsulePage  .commentBox  {
  max-width: var(--size-700);
  margin-left: auto !important;
  margin-right: auto !important;
}
[data-role=page].createCapsulePage #textToConvertField,
[data-role=page].createCapsulePage #instructionsForVoiceActorField,
[data-role=page].createCapsulePage #textToConvertByVoiceActorField{
    height: var(--size-90) !important;
}
.word_count_wrapper{
    text-align: right;
    opacity: 0.5;
    font-size: 90%;
}
[data-role=page].createCapsulePage #textToConvertField,
[data-role=page].createCapsulePage #instructionsForVoiceActorField,
[data-role=page].createCapsulePage #textToConvertByVoiceActorField,
[data-role=page].createCapsulePage  #comment  {
  color: white;
  background-color: var(--color-white-10);
  font-size: var(--text-sm-px);
}

[data-role=page].createCapsulePage label,
[data-role=page].createCapsulePage button label{
  margin-left: auto;
  margin-right: auto;
  padding-bottom: var(--space-2xs);
  padding-top: var(--space-2xs);
}
[data-role=page].createCapsulePage.ui-page:not(.lighttext) label{
    color: var(--trebble-primary);
}
[data-role=page].transparent label,
#addOrScheduleCapsuleToTrebbleFormWrapper label,
[data-role=page].createCapsulePage .ui-select,
[data-role=page].createCapsulePage .ui-input-text,
[data-role=page].createCapsulePage .schedulingSettingWrapper .ui-input-text,
[data-role=page].createCapsulePage #songToPlayAfterCapsuleInputPlaceholder,
[data-role=page].createCapsulePage .doNotAddOnAirCheckboxWrapper,
[data-role=popup] label,
[data-role=popup] #addOrScheduleCapsuleToTrebbleFormWrapper .ui-select,
[data-role=popup] #addOrScheduleCapsuleToTrebbleFormWrapper .ui-input-text,
[data-role=popup]  #addOrScheduleCapsuleToTrebbleFormWrapper .schedulingSettingWrapper .ui-input-text,
[data-role=popup]  #addOrScheduleCapsuleToTrebbleFormWrapper #songToPlayAfterCapsuleInputPlaceholder,
[data-role=popup] #addOrScheduleCapsuleToTrebbleFormWrapper .doNotAddOnAirCheckboxWrapper {
  color: white;
  padding: var(--size-none) var(--space-2xs);
}

[data-role=popup] .modal_content label,
[data-role=popup] .modal_content{
    color: var(--text-default-color);
}

[data-role=popup]  #addOrScheduleCapsuleToTrebbleFormWrapper .ui-input-text{

    border: var(--border-0) !important;
}

[type="checkbox"].filled-in+label[for=doNotAddOnAirCheckbox]:after{
  top:10px;
  left:2px;
  background-color: white;
  border-color:white;
}


[data-role=page] [type="checkbox"]+label {
  position: relative;
  padding-left: var(--size-icon-sm);
  cursor: pointer;
  display: inline-block;
  height: var(--size-25);
  line-height: var(--line-height-2-5xl);
  font-size: var(--text-base-rem);
  -moz-user-select: none;
  -webkit-user-select: none;
          user-select: none;
}

[data-role=page].transparent [type="checkbox"]:not(.filled-in)+label:before, 
[data-role=page].transparent [type="checkbox"]:not(.filled-in)+label:after{
  border-color:white;
}
[type="checkbox"]:checked+label:before ,
[data-role=page].transparent [type="checkbox"]:checked+label:before {
  border-color:transparent;
  border-right: var(--border-2) solid var(--trebble-primary);
  border-bottom: var(--border-2) solid var(--trebble-primary);
}


[type=checkbox].filled-in:checked+label:after,
[data-role=page]:not(.transparent) [type=checkbox].filled-in:checked+label:after {
  border: var(--border-2) solid var(--trebble-primary);
  background-color: var(--trebble-primary);
}

[data-role=page].transparent [type=checkbox].filled-in:checked+label:after {
  border: var(--border-2) solid white;
  background-color: white;
}


[data-role=page].createCapsulePage paper-input-decorator{
  padding: var(--size-none);
  width: var(--size-full);
}

[data-role=page].createCapsulePage  paper-input::shadow > paper-input-decorator::shadow > .underline > .focused-underline,
[data-role=page].createCapsulePage  paper-input-decorator::shadow > .underline > .focused-underline{
  background-color: var(--trebble-primary) ;
}
[data-role=popup] input{
  color: white;
}

[data-role=popup] :not(.modal_content) input{
    color: var(--text-default-color);
}

#GetStartedForCuratorsPage > div[data-role=header] > div > #homeHeaderButton,
#GetStartedForCuratorsPage > div[data-role=header] >  #pageHeaderTitleWrapper {
  color: white;
}

.TrebbleStatisticPage.lighttext.ui-page-theme-a  > .ui-panel-wrapper{
    background-color: transparent;
}
#player > div.ui-header[data-role=header] {
    border: var(--border-0);
}
div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a {
    font-size: var(--text-xs);
    padding-bottom: var(--space-xs);
    box-sizing: border-box;
    background-color: var(--trebble-primary);
    border-width: var(--border-0) 0px 3px 0px;
    border-color: var(--trebble-primary);
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--trebble-primary-200);
}
.browser.mobilebrowser div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a{
 font-weight: 300;
}

body.browser.mobileweb div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a:hover{
 color: white;
 transform: translateZ(0);
 backface-visibility: hidden;
 -moz-osx-font-smoothing: grayscale;
 transition-duration: 0.3s;
 transition-property: color, background-color;
}
.browser.mobileweb * div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li,
.browser.mobileweb * div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li {
    width: auto;
}

.browser.mobileweb * div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul ,
.browser.mobileweb * div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul  {
   display:flex;
   display: -moz-flex;
   display: -ms-flex;
   justify-content:center;
   -webkit-justify-content:center;
   -moz-justify-content:center;
   -ms-justify-content:center;

}
/*
.browser.mobileweb * div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a {
    padding-right: var(--size-70);
    padding-left: var(--size-70);
}
.browser.mobileweb * div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a {
    padding-right: var(--size-100);
    padding-left: var(--size-100);
    }*/
    div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] {
        background-color: var(--trebble-primary);
    }
    div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul {
        border: var(--border-0);
        /* box-shadow: 0px 3px 5px 0px var(--color-black-20); */
    }
    div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a {
        font-size: var(--text-xs);
        padding-top: var(--space-2xs);
        padding-bottom: var(--space-2xs);
        box-sizing: border-box;
        background-color: white;
        border-width: var(--border-0) 0px 3px 0px;
        border-color: white;
        font-weight: 600;
        letter-spacing: 3px;
        color: var(--color-gray-600);
    }
    .browser.mobilebrowser  div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a {
      font-weight: 300;
  }
  body.browser.mobileweb div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a:hover{
    color: var(--text-dark) !important;
}
div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] {
    background-color: var(--bg-light);
}
div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul {
    border: var(--border-0);
}
div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a.ui-btn-active {
    border-color: var(--trebble-primary);
    color: var(--trebble-primary);
}
div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a.ui-btn-active {
    border-color: white;
    color: white;
}

#mylibrary div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul  {
    max-width: var(--size-500);
    margin: auto;
}
div.ui-header[data-role=header] > #myLibraryHeaderWrapper,
div.ui-header[data-role=header] > #pageHeaderTitleWrapper {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}
div.ui-header[data-role=header]>:first-child {
    position: relative;
    flex: 0 0 51px;
    -webkit-flex: 0 0 51px;
    display: block;
}
div.ui-header[data-role=header]> #header-back-button:first-child {
    text-align: start;
    display: block;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    align-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -webkit-justify-content: flex-start;
}
div.ui-header[data-role=header]> #header-back-button.noText:first-child {
    text-align: start;
    display: block;
    flex: 0 0 51px;
    align-content: flex-start;
    justify-content: flex-start;
    -webkit-flex: 0 0 51px;
    -webkit-align-content: flex-start;
    -webkit-justify-content: flex-start;
}
body.ios * div.ui-header[data-role=header] > #pageHeaderTitleWrapper
/*,
body.browser * div.ui-header[data-role=header] > #pageHeaderTitleWrapper */

{
    text-align: center;
    display: block;
    flex: 1 1 100%;
    justify-content: center;
    -webkit-flex: 1 1 100%;
    -webkit-justify-content: center;
}
div.ui-header[data-role=header]> #playlistInfoWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: flex-start;
    -webkit-justify-content: center;
}
div#player > div.ui-header[data-role=header]> #playlistInfoWrapper {
    padding: var(--size-none);
    width: var(--size-full);
    height: var(--size-50);
}
div.ui-header[data-role=header]> .ui-title {
    margin: var(--size-none);
}
div.ui-header[data-role=header]>:first-child {
    justify-content: center;
    display: -ms-flexbox;
    align-content: center;
    position: relative;
    flex: 0 0 51px;
    -webkit-flex: 0 0 51px;
    display: flex;
}
div.ui-header[data-role=header]>:last-child {
    position: relative;
    flex: 0 0 51px;
    -webkit-flex: 0 0 51px;
    display: flex;
}
div.ui-header[data-role=header]>:last-child > #createNewCapsuleBtn {
    font-size: var(--text-3xl);
    margin: var(--size-none);
    padding: var(--size-none);
}
div.ui-header[data-role=header]> #pageHeaderTitleWrapper {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}

[data-role=popup] div.ui-header[data-role=header]> #pageHeaderTitleWrapper{
    align-items: center;
    justify-content: center;
}
[data-role=page]:not(#globalSearch) div.ui-header[data-role=header] > #pageHeaderTitleWrapper {

  padding-left: var(--text-sm-px);
}

.search_field_displayed.searchFieldWrapper{
    overflow:hidden;
    width:var(--size-full);
    height:var(--size-full);
}
.search_field_displayed.searchFieldWrapper .listContainer{
    overflow:scroll;
    height:calc(var(--size-full) - var(--space-lg));
}
.ui-content > .left-right-content-padding > #collection_repeat_container,
.search_field_displayed.searchFieldWrapper .listContainer > div,
.search_field_displayed.searchFieldWrapper #collection_repeat_container{
 height: var(--size-full);
}


@media(max-width: 380px), (max-height:380px){
    [data-role=page]:not(#globalSearch) div.ui-header[data-role=header] > div:not(.homeButtonWrapper) ~ #pageHeaderTitleWrapper {

        padding-left: var(--space-2xs);
    }

    body.footerMenuBardisplayed:not([userprofiletype=creator]):not(#globalSearch):not(.alwaysDisplayHelp):not([userprofiletype=journey_creator]):not([userprofiletype=shortcast_creator]) [data-role=header] .homeButtonWrapper ~ #pageHeaderTitleWrapper{
        padding-left: var(--space-md);
    }
}
body.ios * div.ui-header[data-role=header].twoButtons >:first-child
/*,
body.browser * div.ui-header[data-role=header].twoButtons >:first-child */

{
    position: relative;
    flex: 0 0 102px;
    -webkit-flex: 0 0 102px;
    display: block;
}
body.ios * div.ui-header[data-role=header].bigButton >:first-child
/*,
body.browser * div.ui-header[data-role=header].bigButton >:first-child*/

{
    position: relative;
    flex: 0 0 122px;
    -webkit-flex: 0 0 122px;
    display: block;
}
body.ios * div.ui-header[data-role=header].twoButtons.searchFieldWrapper >:first-child
/*, 
body.browser * div.ui-header[data-role=header].twoButtons.searchFieldWrapper >:first-child*/

{
    position: relative;
    flex: 0 0 51px;
    -webkit-flex: 0 0 51px;
    display: block;
}
body.ios > div#player > div.ui-header[data-role=header].twoButtons >:first-child
/*,
body.browser > div#player > div.ui-header[data-role=header].twoButtons >:first-child */

{
    position: relative;
    flex: 0 0 51px;
    -webkit-flex: 0 0 51px;
    display: block;
}
div.ui-header[data-role=header].twoButtons >:last-child {
    justify-content: center;
    align-content: center;
    position: relative;
    flex: 0 0 102px;
    -webkit-flex: 0 0 102px;
    display: block;
}
div.ui-header[data-role=header].bigButton >:last-child {
    justify-content: center;
    align-content: center;
    -webkit-justify-content: center;
    -webkit-align-content: center;
    position: relative;
    flex: 0 0 122px;
    -webkit-flex: 0 0 122px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}
div.ui-header[data-role=header].twoButtons >:last-child > .ui-controlgroup-controls {
    flex-direction: row;
    display: flex;
    justify-content: flex-end;
    -webkit-display: -webkit-flex;
    -webkit-justify-content: flex-end;
    height: var(--size-full);
}
div.ui-header[data-role=header]> .textButton:last-child {
    position: relative;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
}
div.ui-header[data-role=header]> .textButton:last-child * a {
    font-weight: 300;
    font-size: var(--text-lg);
    line-height: var(--line-height-1);
    overflow: hidden;
    color: white;
    text-overflow: ellipsis;
}
[data-role=controlgroup].rightHeaderButtonGroup {
    margin: var(--size-none);
    font-size: var(--text-base);
    float: right;
}
#homeHeaderButton,
#helpHeaderButton {
    box-sizing: border-box;
    background-color: transparent;
    left: 0em;
    top: 0em;
    text-align: center;
    font-size: var(--text-2xl);
    line-height: var(--line-height-4xl);
    padding-right: var(--border-3);
    padding-left: var(--border-3);
    padding: var(--size-none);
    height: var(--size-full);
    display: block;
    width: var(--size-52);
    border: var(--border-0);
    margin: var(--size-none);
    padding-top: var(--size-none);
    align-items: center;
    display: flex;
    justify-content: center;

}


body[userprofiletype=creator] div[data-role=header] * #helpHeaderButton.ui-btn,
body[userprofiletype=journey_creator] div[data-role=header] * #helpHeaderButton.ui-btn,
body[userprofiletype=shortcast_creator] div[data-role=header] * #helpHeaderButton.ui-btn,
body:not(.alwaysDisplayHelp) div[data-role=header] * #helpHeaderButton.ui-btn,
body[userprofiletype=creator] #home div[data-role=header] * #helpHeaderButton.ui-btn,
body[userprofiletype=journey_creator] #home div[data-role=header] * #helpHeaderButton.ui-btn,
body[userprofiletype=shortcast_creator] #home div[data-role=header] * #helpHeaderButton.ui-btn,
body:not(.alwaysDisplayHelp)  #home div[data-role=header] * #helpHeaderButton.ui-btn{
    display: none;
}

body.alwaysDisplayHelp:not([userprofiletype=creator]):not([userprofiletype=journey_creator]):not([userprofiletype=shortcast_creator]) #helpHeaderButton{
    display: flex;
}

body.iosApp [class*=" pe-7s-"], body.iosApp [class^=pe-7s-] {
    -webkit-text-stroke-width:0.5px
}

body [data-role=page] [class*=" pe-7s-"], body [data-role=page] [class^=pe-7s-],
body [data-role=popup] [class*=" pe-7s-"], body [data-role=popup] [class^=pe-7s-],
body [data-role=panel] [class*=" pe-7s-"], body [data-role=panel] [class^=pe-7s-],

body [data-role=page] [class*=" ion-"], body [data-role=page] [class^=ion-],
body [data-role=popup] [class*=" ion-"], body [data-role=popup] [class^=ion-],
body [data-role=panel] [class*=" ion-"], body [data-role=panel] [class^=ion-]  {
    -webkit-text-stroke-width:0.5px
}

#PlaylistPodcastsPage * #homeHeaderButton {
    /**/
}
#OnAirPage * #homeHeaderButton {
    /**/
}
#PlaylistPodcastsPage * #homeHeaderButton {
    /* */
}
#globalSearch * #homeHeaderButton {
    /* */
}
#placeHolderSongList > ul > li.ui-btn.ui-btn-icon-right.ui-li.ui-li-has-alt.ui-btn-up-c {
    height: var(--size-3-5em);
    border-bottom-width: var(--border-1);
    border-bottom-color: var(--color-gray-400);
    border-bottom-style: solid;
    color: var(--color-black);
}
#placeHolderSongList > ul > li > div {
    margin: var(--size-none);
    padding: var(--size-none);
    height: var(--size-full);
    width: var(--size-full);
}
#placeHolderSongList > ul > li > div > div {
    margin: var(--size-none);
    padding: var(--size-none);
    height: var(--size-full);
    width: var(--size-full);
}
#placeHolderSongList > ul > li > div > div > a > h2.ui-li-heading {
    margin: var(--size-none);
    padding-top: var(--text-3xs);
    padding-bottom: var(--size-em-2xs);
    padding-left: var(--text-3xs);
    padding-right: var(--text-3xs);
}
#placeHolderSongList > ul > li > div > div > a > p.ui-li-desc {
    margin: var(--size-none);
    padding-top: var(--size-em-2xs);
    padding-bottom: var(--text-3xs);
    padding-left: var(--text-3xs);
    padding-right: var(--text-3xs);
}
#moreSubTabs > div,
#myRadioSubTabs > div,
#mylibrary #capsuleTabs > div {
    padding: var(--size-none);
    border: var(--border-0);
}


html body:not(.darkTheme) #moreSubTabs > div,
html body:not(.darkTheme) #myRadioSubTabs > div,
html body:not(.darkTheme) #mylibrary #capsuleTabs > div {
    background-color: var(--bg-light);
}

#moreSubTabs > div[role=tabpanel],
#mylibrary #capsuleTabs >  div[role=tabpanel] {
    background-color: white;
}
#myRadioSubTabs > div[role=tabpanel] {
    padding-top: var(--border-6);
    background-color: var(--bg-light);
    box-shadow: var(--shadow-inner-sm);
}
#moreSubTabs > div[role=tabpanel],
#mylibrary #capsuleTabs >  div[role=tabpanel] {
    box-sizing: border-box;
    padding-top: var(--space-2xs);
    padding-left: var(--text-base);
    padding-right: var(--text-base);
    box-shadow: var(--shadow-inner-sm);
}
/*
#moreSubTabs > div > ul > li > a.ui-btn-active {
 background-color: var(--color-gray-150);
 }*/

 #playlistPodcastTabs > div[role="tabpanel"]#playlistWrapperTest {
    box-shadow: var(--shadow-inner-md);
    background-color: white;
    padding-top: var(--border-6);
}
#playlistPodcastTabs > div[role="tabpanel"],
#capsuleTabs > div[role="tabpanel"],
#myNotificationsTabs > div[role="tabpanel"]{
    border: var(--border-0);
    padding-top: var(--border-6);
    overflow-y: auto;
    background-color: var(--bg-light);
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-inner-md);
}
#placeHolderSongList > ul > li > div > div > a {
    margin: var(--size-none);
    padding: 0em;
    height: var(--size-full);
    text-decoration: none;
}
#songMoreOptionButton,
.ui-li-link-alt {
    text-align: center;
    line-height: var(--line-height-2);
    vertical-align: middle;
    height: var(--size-full);
    padding: var(--size-none);
    margin: var(--size-none);
    font-size: var(--text-xl);
    color: var(--color-gray-400);
}
/* Player Footer */

#playerFooter {
    background-color: var(--color-black);
    background-color: white;/*var(--bg-light);*/
    height: var(--size-4em);
    box-sizing: border-box;
    /*backdrop-filter: blur(20px);*/
    border-top: var(--border-1) solid var(--color-gray-100);
    box-shadow: var(--shadow-top);
    -moz-box-shadow: var(--shadow-top);
    -webkit-box-shadow: var(--shadow-top);
}
#playerFooter.transparent {
    background: var(--gradient-fade-dark-simple);
    background-color: transparent;
    border-color: var(--color-white-100);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border: var(--border-0);
    box-shadow: var(--shadow-none);
    /*background-color: var(--color-black-20);*/
    height: var(--size-4em);
    box-sizing: border-box;
    color: white;
    border-top: var(--border-1) solid var(--color-white-20);
}

body.darkTheme #playerFooter:not(.transparent),
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) {
    background-color:  var(--color-black);
    border-color: var(--color-black);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border: var(--border-0);
    /*background-color: var(--color-black-20);*/
    height: var(--size-4em);
    box-sizing: border-box;
    color: white;
    border-top: var(--border-1) solid var(--color-black);
}

/*
#playerFooter.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#loopButton, 
#playerFooter.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#shuffleButton,
#playerFooter.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#loopButton, 
#playerFooter.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#shuffleButton{
  color: var(--color-white-60);
  }*/
  #playerPositionSliderWrapper * div.ui-slider {
    margin: var(--size-none);
}
#playerFooter > div {
    width: var(--size-full);
    height: var(--size-full);
}

#audioInfoAndSliderWrapper{
    display: flex;
    flex-direction: column;
}

#playerFooter > div > div > div#footerCurrentSongImg,
#playerFooter > div > #footerCurrentSongImg {
    margin-right: var(--border-1);
    min-width: var(--size-60);
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: var(--size-full);
    background-color: var(--color-gray-150);
    cursor: pointer;
}

#playerFooter.transparent > div > div > div#footerCurrentSongImg,
#playerFooter.transparent > div > #footerCurrentSongImg,
body.darkTheme #playerFooter:not(.transparent) > div > div > div#footerCurrentSongImg,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) > div > #footerCurrentSongImg,
body.darkTheme #playerFooter:not(.transparent) > div > div > div#footerCurrentSongImg,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) > div > #footerCurrentSongImg {
    background-color: black;
}

#playerFooter.browser > div > div {
    display: flex;
    display: -webkit-flex;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
}
#playerFooter.browser > div > div > div#footerCurrentSongImg {
    height: var(--size-60);
}
#playerFooter.browser > div > div#playerFooterSongInfoWrapper {
    flex: 0 0 400px;
    -webkit-flex: 0 0 400px;
    color: var(--text-dark) !important;
}
#playerFooter.browser > div > div#playerFooterSliderWrapper {
    display: flex;
    display: -webkit-flex;
    flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    align-items: center;
    -webkit-align-items: center;
}
#playerFooter.browser > div > div#footerControlsWrapper {
    flex: 0 0 260px;
    -webkit-flex: 0 0 260px;
}
#playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a,
#playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a {
    color: var(--text-dark);
    overflow: visible;
}
#playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#loopButton > t,
#playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#shuffleButton > t,
#playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#loopButton > t,
#playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#shuffleButton > t {
    color: var(--gray-overlay-40);
    font-size: var(--text-lg);
}
#playerFooter.browser.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a,
#playerFooter.browser.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > a,

body.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a,
body.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a ,

[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a  {
  color: var(--text-muted);
  overflow: visible;
}

#playerFooter.browser.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#loopButton, 
#playerFooter.browser.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#shuffleButton,
#playerFooter.browser.transparent  > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#loopButton, 
#playerFooter.browser.transparent  > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#shuffleButton,

body.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#loopButton, 
body.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#shuffleButton,
body.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#loopButton, 
body.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#shuffleButton,

[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#loopButton, 
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#shuffleButton,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#loopButton, 
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#shuffleButton{
  color: var(--color-white-40);
}

#playerFooter.browser.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a:active,
#playerFooter.browser.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > a:active,

body.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a:active,
body.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a:active,

[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a:active,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a:active {
    color: white;
}
body.browser.mobileweb #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a:hover,
body.browser.mobileweb #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a:hover,
body.browser.mobileweb #playerFooter.browser:not(.transparent) > div #playerSocialInfoWrapper > div > a:hover {
    background-color: var(--bg-overlay-dark);
    border-color: var(--bg-overlay-dark);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}

body.browser.mobileweb #playerFooter.browser.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a:hover,
body.browser.mobileweb #playerFooter.browser.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > a:hover,

body.browser.mobileweb.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a:hover,
body.browser.mobileweb.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a:hover,

body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a:hover,


body.browser.mobileweb #playerFooter.transparent * #playerInformationButton:hover,
body.browser.mobileweb #playerFooter.transparent * #playerSongMoreButton:hover,
body.browser.mobileweb #playerFooter.transparent * #playerMoreInformationButton:hover,
body.browser.mobileweb #playerFooter.transparent * #expandPlayerButton:hover,
body.browser.mobileweb #playerFooter.transparent * #queueRefreshButton:hover, 
body.browser.mobileweb #playerFooter.transparent * #songIsFavoriteBtn:hover,
body.browser.mobileweb #playerFooter.transparent * #tagsBtn:hover,
body.browser.mobileweb #playerFooter.transparent * #shareSongBtn:hover,


body.darkTheme #settings .userInfoSection:active,
body.darkTheme  .settingSection .settingItemTitle:not(.unclickable):active, 
body.browser.mobileweb.darkTheme #settings .userInfoSection:hover, 
body.browser.mobileweb.darkTheme .settingSection .settingItemTitle:not(.unclickable):hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #playerInformationButton:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #playerSongMoreButton:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #playerMoreInformationButton:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #expandPlayerButton:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #queueRefreshButton:hover, 
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #songIsFavoriteBtn:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #tagsBtn:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #shareSongBtn:hover,


body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerInformationButton:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerSongMoreButton:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerMoreInformationButton:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #expandPlayerButton:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #queueRefreshButton:hover, 
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #songIsFavoriteBtn:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #tagsBtn:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #shareSongBtn:hover
{
   background-color: var(--color-white-5);
   border-color: var(--color-white-5);
}

body.browser.mobileweb #playerFooter.browser.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#playButton:hover,
body.browser.mobileweb #playerFooter.browser.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#playButton:hover,

body.browser.mobileweb.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#playButton:hover,
body.browser.mobileweb.darkTheme #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#playButton:hover,

body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#playButton:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#playButton:hover{
   background-color: var(--color-white-70);
   border-color: var(--color-white-70);
}

body.browser.mobileweb #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a#playButton:hover,
body.browser.mobileweb #playerFooter.browser:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a#playButton:hover{
   background-color: var(--color-black-70);
   border-color: var(--color-black-70);
}

div#progressContainer {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    align-items: center;
}
#playerFooter > div > a#playPauseBtn.ion-loading-c {
    font-size: var(--text-5xl);
    line-height: var(--line-height-4-5xl);
    margin: var(--space-2xs);
    height: var(--size-46);
    min-width: var(--size-46);
    width: var(--size-46);
}
#playerFooter > div > a#playPauseBtn {
 padding: 0;
 vertical-align: middle;
 border: var(--border-0);
 width: var(--size-46);
 height: var(--size-46);
 background-color:white;
 border-radius:50%;
 font-size: var(--text-2xl);
 line-height: var(--line-height-4-5xl);
 background-color: var(--text-dark);
 color: white;
 min-width: var(--size-46);
 margin: auto var(--space-2xs);
 display: flex;
 justify-content: center;
 align-items: center;
}

#playerFooter > div > a#playPauseBtn t{
 display: flex;
 justify-content: center;
 align-items: center;
}

#playerFooter > div > a#playPauseBtn t.ion-ios7-play{
    padding-left: var(--space-3xs);
}
#playerFooter.transparent > div > a#playPauseBtn,
body.darkTheme #playerFooter:not(.transparent) > div > a#playPauseBtn,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) > div > a#playPauseBtn {
    color: var(--text-dark);
    background-color: var(--text-light);
}
#playerFooter > div > a#playPauseBtn:active {
    color: var(--text-dark);
    background-color: var(--text-light);
}
#playerFooter.transparent > div > a#playPauseBtn:active ,
body.darkTheme #playerFooter:not(.transparent) > div > a#playPauseBtn:active ,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) > div > a#playPauseBtn:active {
    color: var(--text-light);
    background-color: var(--text-dark);
}
#playerSongPositionSlider {
    width: var(--size-full);
    top:inherit;
    background-color: transparent;
    box-shadow: var(--shadow-none);
}
paper-slider#playerSongPositionSlider::shadow #sliderBar::shadow #secondaryProgress {
    background-color: var(--trebble-primary-dark-35);
}
paper-slider#playerSongPositionSlider::shadow #sliderKnobInner,
paper-slider#playerSongPositionSlider::shadow #sliderBar::shadow #activeProgress {
    background-color: var(--trebble-primary-dark);
    border: var(--border-0);
}
paper-slider#playerSongPositionSlider #sliderBar #secondaryProgress {
    background-color: var(--trebble-primary-dark-35);
}
paper-slider#playerSongPositionSlider #sliderKnobInner,
paper-slider#playerSongPositionSlider #sliderBar #activeProgress {
    background-color: var(--trebble-primary-dark);
    border: var(--border-0);
}
/*
paper-slider#playerSongPositionSlider::shadow #sliderContainer{
    width: calc(var(--size-full) - var(--space-xs));
}
paper-slider#playerSongPositionSlider::shadow #sliderBar{
    left: 8px;
}
paper-slider#playerSongPositionSlider::shadow #sliderKnob {
    width:var(--size-16);
}
*/

paper-slider#playerSongPositionSlider::shadow #sliderBar::shadow #progressContainer {
    background-color: var(--color-white-20);
}
paper-slider#playerSongPositionSlider #sliderBar #progressContainer {
    background-color: var(--color-white-20);
}
#playerFooter.browser * paper-slider#playerSongPositionSlider #sliderBar #progressContainer {
    background-color: var(--gray-overlay-20);
}
#playerFooter.browser * paper-slider#playerSongPositionSlider::shadow #sliderBar::shadow #progressContainer,
#playerFooter.browser * paper-slider#playerSongPositionSlider #sliderBar #progressContainer {
    background-color: var(--gray-overlay-20);
}
[trebbleclass=playrButtonWrapper] > div > div {
    width: var(--size-full);
}
#playerFooter > div > div#footerPlayerCurrentSongWrapper {
    height: var(--size-full);
}
#playerFooter > div > div#footerPlayerCurrentSongWrapper > a.ui-btn-down-undefined {
    background-color: var(--trebble-primary);
    border: var(--border-1) solid var(--trebble-primary);
    color: var(--text-light)
}
#songSocialInfoWrapper {
    font-size: var(--text-sm);
    padding: var(--space-3xs);
    font-weight: 400;
    /*font-weight: 300;*/
    
    color: var(--color-white-50);
}
body.embedded * #songSocialInfoWrapper {
    font-size: var(--text-sm);
    line-height: var(--line-height-lg);
    padding: var(--size-none);
}
#playerFooter > div > div#footerPlayerCurrentSongWrapper > a {
    margin: var(--size-none);
    height: var(--size-full);
    text-decoration: none;
    overflow: hidden;
    width: var(--size-full);
}
#footerCurrentSongInfo {
    padding-right: var(--space-3xs);
    padding-left: var(--space-3xs);
    margin: var(--size-none);
    text-overflow: ellipsis;
    overflow: hidden;
    width: var(--size-full);
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}
#footerCurrentSongInfo:active > #footerCurrentSongTitle,
#footerCurrentSongInfo:active > #footerCurrentSongArtist,
#footerCurrentSongInfo:active > #mediaSourceBtn  {
    color: white !important;
}
#footerCurrentSongTitle,
.songTitle,
.itemTitle,
.NotficationCard * .songTitle,
.NotficationCard * .itemTitle,
.userListItem > .infoWrapper >.userUsername {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    /*font-weight: 300;*/
    
    font-size: var(--text-md);
    text-align: left;
    color: white;
    color: var(--text-dark);
    max-width: var(--size-full);
}
#footerCurrentSongTitle{
 font-weight: 900 !important;
 font-size: var(--text-md);
}


@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.marquee {
    color: white;
    white-space: nowrap;
    overflow: visible !important;
    box-sizing: border-box;
}
.marquee span {
    display: inline-block;
    padding-left: var(--size-full);
    animation: marquee 30s linear infinite;
}

#footerCurrentSongInfo, #playerPositionSliderWrapper{
    position: relative;
}
#mediaSourceBtn{
    font-size: var(--text-sm);
    padding: var(--size-none) var(--space-3xs) var(--size-none) var(--space-3xs);
    color: white;
    cursor: pointer;
    
}
body.browser.mobileweb #mediaSourceBtn:hover,
#mediaSourceBtn:active{
    color: var(--trebble-primary) !important;
    text-shadow: none;
}

#player #playerPositionSliderWrapper > #mediaSourceBtn {
  color: white;

}

#playerPositionSliderWrapper > #mediaSourceBtn{
    bottom: -16px;
    position: absolute;
    right: 0px;
    color: var(--text-dark);
}

#youtubeVideoLinkWrapper ~ #mediaSourceBtn{
    bottom: 0px;
    position: absolute;
    right: 0px;
    padding-bottom: var(--space-2xs);
    text-shadow: 2px 2px var(--color-black-10);
}
#footerCurrentSongInfo > #mediaSourceBtn{
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: var(--text-dark);
    font-size: var(--text-xs);
}

[data-role=popup] .userListItem > .infoWrapper >.userUsername,
[data-role=popup] .userListItem > .infoWrapper >.userFullname,
[data-role=popup] .songTitle {
  color: white;
  font-weight: 600;
  font-size: var(--text-md);
}

[data-role=popup] .artistAndAlbum{
  font-size: var(--text-md);
} 

#FeedAndActivityPage  .NotficationCard.unread {
  background-color: var(--color-pink-light);
}

.userListItem:active > .infoWrapper >.userUsername,
.userListItem:active > .infoWrapper >.userFullname {
    color: white;
}
.songTitle,
.itemTitle {
    color: white;
}
.notificationTitle.itemTitle {
    color: var(--text-dark);
    /* font-size: var(--text-md); */
}
[data-role=page] * .songInfo * .itemTitle {
    color: var(--text-dark);
}
.lighttext * .songInfo * .itemTitle {
    color: var(--color-white-80);
}
[data-role=page] * .lighttext * .songInfo * .itemSubtitle {
    color: var(--color-white-30);
}
[data-role=page] * .songInfo * .itemSubtitle {
    color: var(--text-dark);
}
[data-role=page].lighttext * .songInfo * .itemSubtitle {
    color: var(--color-white-30);
    opacity: 1;
}
#footerCurrentSongArtist,
.artistAndAlbum,
.itemSubtitle,
.NotficationCard * .artistAndAlbum,
.NotficationCard * .itemSubtitle,
.userListItem > .infoWrapper >.userFullname {
    white-space: nowrap;
    opacity: 0.5;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: var(--text-sm);
    color: white;
    font-weight: 400;
    text-align: left;
    color: var(--text-dark);
    max-width: var(--size-full);
}
#playerFooter.transparent * #footerCurrentSongTitle,
#playerFooter.transparent * #footerCurrentSongArtist,
body.darkTheme #playerFooter:not(.transparent) * #footerCurrentSongTitle,
[data-role=page].ui-page-active.darkTheme * #footerCurrentSongTitle,
body.darkTheme  * div#playerFooter #footerCurrentSongInfo #footerCurrentSongTitle ,
[data-role=page].ui-page-active.darkTheme ~ div#playerFooter #footerCurrentSongInfo #footerCurrentSongTitle,
body.darkTheme #playerFooter:not(.transparent) * #footerCurrentSongTitle,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #footerCurrentSongArtist {
    color: white;
}
.artistAndAlbum,
.itemSubtitle {
    color: white;
}
/* Player Queue*/

#queueTrackWrapper > li {
    border-bottom-width: var(--border-1);
    border-bottom-color: var(--color-gray-400);
    border-bottom-style: solid;
    color: var(--color-black);
}
#queueTrackWrapper > li > div > div > a {
    padding: var(--space-3xs);
    height: var(--size-50);
    text-decoration: none;
}
#QueueHeaderWrapper {
    font-size: var(--text-md);
    font-weight: 200;
}
ui-btn-inner {
    padding-right: var(--size-none);
    padding-left: var(--size-none);
    margin: var(--size-none);
}
[id=toolbarWrapper] > div > a {
    color: var(--color-gray-400);
    width: var(--size-fifth);
    font-weight: 400;
    border: var(--border-0);
    border-top-width: var(--border-0);
    border-left-width: var(--border-0);
    border-right-width: var(--border-0);
    border-bottom-color: var(--color-gray-300);
    border-bottom-style: solid;
    border-bottom-color: var(--color-black);
    border-bottom-width: var(--border-4);
}
[id=toolbarWrapper] > div > a > .ui-btn-inner {
    padding-right: var(--size-none);
    padding-left: var(--size-none);
    margin: var(--size-none);
}
/*CSS for player page */

#player > div.ui-content {
    width: var(--size-full);
    position: fixed;
    background-image: linear-gradient( var(--color-black-0), var(--color-black-10) 60%, var(--color-black-80) 100%);

}

body.browser.mobileweb.embedded  #player > div.ui-content{
    background-image: linear-gradient(var(--color-black-10),var(--color-black-30) 100%);
}

body.browser.mobileweb.embedded  #player .playerCoverArtImage-landscape, body.browser.mobileweb.embedded #player .playerCoverArtImage-portrait{
    box-shadow: var(--shadow-none);
}

div[data-role=popup] > a#closeBtn {
  line-height: var(--line-height-5xl);
  top: 0px;
  position: absolute;
  width: var(--size-50);
  font-weight: 400;
  /*font-weight: 300;*/
  font-size: var(--text-6xl);
  margin: var(--size-none);
  padding: var(--size-none);
  padding-left: var(--space-2xs);
  padding-right: var(--space-2xs);
  /*top: -25px;
  left: -10px;*/
  right: 10px;
  left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--border-0);
  box-sizing: border-box;
  transition: all .3s cubic-bezier(.215,.61,.355,1);
  transform-origin: 50% 50%;
}


@media (min-width: 380px), (min-height: 380px) and   (orientation: landscape) {
    div[data-role=popup] > a#closeBtn {
        font-size: var(--text-7xl);
        right: 10px;
        left: auto;
    }
}
body.browser.mobileweb div[data-role=popup] > a#closeBtn:hover,
div[data-role=popup] > a#closeBtn:active{
    /*transform: rotateZ(90deg);
    -ms-transform: rotate(90deg);
    transform: rotateZ(90deg)*/
    transform: scale(1.2);
    /*ackground-color: var(--color-white-10);*/
}
div[data-role=popup].whatsnew * .owl-theme .owl-controls .owl-page span {
    width: var(--size-6);
    height: var(--size-6);
    margin: var(--border-4);
    background-color: white;
}
div[data-role=popup].whatsnew * .header {


    box-sizing: border-box;
    
    color: white;
    font-size: var(--text-3xl);
    margin: var(--size-none) var(--space-md);
    font-size: var(--text-6xl);
    font-weight: 700;
}
div[data-role=popup].whatsnew * .title {
    margin-top: var(--space-2xs);
    font-size: var(--text-xl);
    margin-bottom: var(--space-2xs);
    margin: var(--space-sm);
    font-weight: 300;
    color: white;
}
div[data-role=popup].whatsnew * .details {
    padding: var(--space-sm);
    font-size: var(--text-md);
    font-weight: 400;
    color: white;
    box-sizing: border-box;
    /* max-width: var(--size-700);*/
}
@media ( max-height: 470px) {
    div[data-role=popup].whatsnew * .details {
        font-size: var(--text-sm);
    }
}
div[data-role=popup].whatsnew * .previewImage {
    background-position: center;
    background-size: contain;
    height: var(--size-200);
    width: var(--size-full);
    background-repeat: no-repeat;
}
#library:first-child {
    content: "";
    position: absolute;
    height: var(--size-fifth);
    width: var(--size-fifth);
    background-image: none;
    background-size: cover;
    z-index: -1;
    /* Keep the background behind the content */
    /* don't forget to use the prefixes you need */
    
    transform: scale(5);
    transform-origin: top left;
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    /*filter : url(#blur-effect-2);*/
    
}

.userListPage .ui-content > .left-right-content-padding{
    height: var(--size-full);
}

#header-back-button{
    height: var(--size-full);
    justify-content: center;
    align-items: center;
    display: flex;
}
#header-back-button.ui-btn-left {
    left: 0px;
}
#queue > div[data-role=header] > #header-queue-button.ui-btn-right {
    right: 0px;
    line-height: 53px;
}
div[data-role=header] > #header-queue-button.ui-btn-right {
    right: 0px;
}
#header-back-button.ui-btn-up-a,
#header-queue-button.ui-btn-up-a {
    color: var(--color-gray-700);
}
#mini-header-back-button {
    padding-left: var(--border-2);
    padding-right: var(--border-2);
    padding-bottom: var(--space-2xs);
    padding-top: var(--space-2xs);
    width: var(--size-1em);
    border-bottom: var(--border-0);
    top: 0em;
    height: var(--size-full);
    line-height: var(--line-height-2);
    font-size: var(--text-base);
    display: block;
    text-align: center;
}
.defaultPage * #header-back-button,
.defaultPage * #header-queue-button {
    /*color: var(--color-gray-500);*/
    
    font-size: var(--text-2xl);
    line-height: var(--line-height-1-7);
}
a#queueMenuOptionBtn {
    /*color: var(--color-gray-500);*/
    
    font-size: var(--text-4xl);
    line-height: var(--line-height-5xl);
}
/*
.defaultPage > div.ui-header[data-role=header] {
    border-bottom: var(--border-1) solid var(--color-gray-150) !important;
    height: var(--size-52);
    background-color: white;
    border-color: var(--color-gray-150);
    color: var(--text-dark);
    }*/

    #header-back-button,
    #header-queue-button,
    #tuninButton {
        border: var(--border-0);
        color: white;
        margin: var(--size-none);
        padding: var(--size-none);
        border-bottom: var(--border-0);
        top: 0em;
        line-height: var(--line-height-5-1xl);
        font-size: var(--text-4xl);
        display: block;
        text-align: center;
        width: var(--size-50);
        font-weight: 300;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    html  body.browser.mobileweb  .ui-page-theme-a .ui-btn:hover,
    html  body.browser.mobileweb .ui-bar-a .ui-btn:hover,
    html  body.browser.mobileweb .ui-body-a .ui-btn:hover,
    html  body.browser.mobileweb  .ui-group-theme-a .ui-btn:hover,
    html  body.browser.mobileweb  .ui-btn.ui-btn-a:hover,
    body.browser.mobileweb #header-back-button:hover,
    body.browser.mobileweb #header-queue-button:hover,
    body.browser.mobileweb #tuninButton:hover {
        background-color: var(--trebble-primary);
        border-color: var(--trebble-primary);
        color: white !important;
        transform: translateZ(0);
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        transition-duration: 0.3s;
        transition-property: color, background-color;
    }
    html  body.browser.mobileweb .ui-page-theme-a.lighttext .ui-btn:not(.disabled):hover,
    html  body.browser.mobileweb .lighttext .ui-bar-a .ui-btn:not(.disabled):hover,
    html  body.browser.mobileweb .ui-body-a .lighttext .ui-btn:not(.disabled):hover,
    html  body.browser.mobileweb  .lighttext .ui-group-theme-a .ui-btn:not(.disabled):hover,
    html  body.browser.mobileweb  .lighttext .ui-btn.ui-btn-a:not(.disabled):hover,
    body.browser.mobileweb .lighttext #header-back-button:not(.disabled):hover,
    body.browser.mobileweb .lighttext #header-queue-button:not(.disabled):hover,
    body.browser.mobileweb .lighttext #tuninButton:not(.disabled):hover,
    body.browser.mobileweb .ui-page-theme-a#player .ui-btn:not(.disabled):hover,
    body.browser.mobileweb:not(.embedded) #player .ui-bar-a .ui-btn:not(.disabled):hover,
    body.browser.mobileweb:not(.embedded) #player .ui-btn:not(.disabled):hover,
    body.browser.mobileweb:not(.embedded) #player .ui-group-theme-a .ui-btn:not(.disabled):hover,
    body.browser.mobileweb:not(.embedded) #player .ui-btn.ui-btn-a:not(.disabled):hover,
    body.browser.mobileweb:not(.embedded) #player #header-back-button:not(.disabled):hover,
    body.browser.mobileweb:not(.embedded) #player #header-queue-button:not(.disabled):hover,
    body.browser.mobileweb:not(.embedded) #player #tuninButton:not(.disabled):hover,
    body.browser.mobileweb div#playerSocialInfoWrapperInQueue > div > a:not(.disabled):hover,
    body.browser.mobileweb #songPoppupMenu > div > ul > li > a:not(.disabled):hover,
    body.browser.mobileweb .popup-menu-content > div > ul > li > a:not(.disabled):hover,
    body.browser.mobileweb .ui-page.lighttext .trebble-context-menu li.context-menu-item > a.menu_with_keyboard_shortcut:not(.disabled):hover,
    body.browser.mobileweb.darkTheme .trebble-context-menu li.context-menu-item > a.menu_with_keyboard_shortcut:not(.disabled):hover,
    body.browser.mobileweb .sequencer_node_default_context_menu.horizontal_menu .menu_item:not(.disabled):hover,
    body.browser.mobileweb .playlistShortcutButtonsWrapper > #showStatistics:not(.disabled):hover, 
    body.browser.mobileweb .playlistShortcutButtonsWrapper > #shareTrebbleBtn:not(.disabled):hover,
    body.browser.mobileweb .transparent_button:not(.disabled):hover,
    body.browser.mobileweb .ui-page.lighttext .trebble-context-menu li.context-menu-item > a.menu_with_keyboard_shortcut:not(.disabled):hover,
    body.browser.mobileweb .ui-page.lighttext ~ .trebble-context-menu li.context-menu-item > a.menu_with_keyboard_shortcut:not(.disabled):hover,
    body.browser.mobileweb .c-bottom-sheet ul.trebbleOptionList > li > a.menu_with_keyboard_shortcut:not(.disabled):hover
    {
        background-color: var(--color-white-10);
        border-color: var(--color-white-10);
        color: white !important;
        transform: translateZ(0);
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        transition-duration: 0.3s;
        transition-property: color, background-color;
    }

    
    body.browser.mobileweb:not(.darkTheme) .ui-page-active:not(.lighttext) ~ .drop-element .popup-menu-content > div > ul > li > a:not(.disabled):hover,
    body.browser.mobileweb:not(.darkTheme) .ui-page-active:not(.lighttext)  .sequencer_node_default_context_menu.horizontal_menu .menu_item:not(.disabled):hover,
    body.browser.mobileweb .trebble-context-menu li.context-menu-item > a.menu_with_keyboard_shortcut:not(.disabled):hover,
    body.browser.mobileweb .c-bottom-sheet ul.trebbleOptionList > li > a.menu_with_keyboard_shortcut:not(.disabled):hover
    {
        background-color: var(--color-black-5);
        border-color: var(--color-black-5);
        color: var(--text-dark) !important;

    }


    body.browser.mobileweb:not(.embedded) #player .ui-btn#playButton:not(.disabled):hover
    {
        background-color: transparent;
        border-color: transparent;
    }




    @supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
       html  body.browser.mobileweb .ui-page-theme-a.lighttext .ui-btn:not(.disabled):hover,
       html  body.browser.mobileweb .lighttext .ui-bar-a .ui-btn:not(.disabled):hover,
       html  body.browser.mobileweb .ui-body-a .lighttext .ui-btn:not(.disabled):hover,
       html  body.browser.mobileweb  .lighttext .ui-group-theme-a .ui-btn:not(.disabled):hover,
       html  body.browser.mobileweb  .lighttext .ui-btn.ui-btn-a:not(.disabled):hover,
       body.browser.mobileweb .lighttext #header-back-button:not(.disabled):hover,
       body.browser.mobileweb .lighttext #header-queue-button:not(.disabled):hover,
       body.browser.mobileweb .lighttext #tuninButton:not(.disabled):hover,
       body.browser.mobileweb .ui-page-theme-a#player .ui-btn:not(.disabled):hover,
       body.browser.mobileweb:not(.embedded) #player .ui-bar-a .ui-btn:not(.disabled):hover,
       body.browser.mobileweb:not(.embedded) #player .ui-btn:not(.disabled):hover,
       body.browser.mobileweb:not(.embedded) #player .ui-group-theme-a .ui-btn:not(.disabled):hover,
       body.browser.mobileweb:not(.embedded) #player .ui-btn.ui-btn-a:not(.disabled):hover,
       body.browser.mobileweb:not(.embedded) #player #header-back-button:not(.disabled):hover,
       body.browser.mobileweb:not(.embedded) #player #header-queue-button:not(.disabled):hover,
       body.browser.mobileweb:not(.embedded) #player #tuninButton:not(.disabled):hover,
       body.browser.mobileweb div#playerSocialInfoWrapperInQueue > div > a:not(.disabled):hover,
       body.browser.mobileweb #songPoppupMenu > div > ul > li > a:not(.disabled):hover,
       body.browser.mobileweb .popup-menu-content > div > ul > li > a:not(.disabled):hover,
       body.browser.mobileweb .sequencer_node_default_context_menu.horizontal_menu .menu_item:not(.disabled):hover,
       body.browser.mobileweb .playlistShortcutButtonsWrapper > #showStatistics:not(.disabled):hover, 
       body.browser.mobileweb .playlistShortcutButtonsWrapper > #shareTrebbleBtn:not(.disabled):hover,
       body.browser.mobileweb .transparent_button:not(.disabled):hover
       {
        background-color: var(--color-black-5);
        border-color: var(--color-black-5);
        color: var(--text-dark) !important;

    }
}
body.browser.mobileweb [data-role=page]:not(.lighttext) .transparent_button:hover,
.transparent_button:active,
body.browser.mobileweb  .userProfileDetailsPage * #userProfileImage > #editProfilePicBtn:hover,
.userProfileDetailsPage * #userProfileImage > #editProfilePicBtn:active  {
  border-color: var(--color-white-100);
  background-color: var(--color-white-100);
  color: var(--text-dark) !important;
}
body.browser.mobileweb [data-role=page]:not(.lighttext) .transparent_button.toggled:hover,
[data-role=page]:not(.lighttext) .transparent_button.toggled:active{
    color: white !important;  
    font-weight: bold;
    background-color: var(--trebble-primary);   
    border: var(--border-2) solid var(--trebble-primary);
}

[class*="ion"].transparent_button:before{
  margin-right: var(--space-2xs);
  font-size: var(--text-5xl);
  height: var(--size-32);
  vertical-align: middle;
  
}

html .ui-page-theme-a .ui-btn:active,
html .ui-bar-a .ui-btn:active,
html .ui-body-a .ui-btn:active,
html body .ui-group-theme-a .ui-btn:active,
html body .ui-btn.ui-btn-a:active,
#header-back-button:active,
#header-queue-button:active,
#tuninButton:active {
    background-color: var(--trebble-primary-dark);
    border-color: var(--trebble-primary-dark);
    color: white !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}
html .ui-page-theme-a.lighttext .ui-btn:active,
html .lighttext .ui-bar-a .ui-btn:active,
html .lighttext .ui-body-a .ui-btn:active,
html body .lighttext .ui-group-theme-a .ui-btn:active,
html body .lighttext .ui-btn.ui-btn-a:active,
.lighttext #header-back-button:active,
.lighttext #header-queue-button:active,
.lighttext #tuninButton:active,
.ui-page-theme-a#player .ui-btn:active,
#player .ui-bar-a .ui-btn:active,
#player .ui-btn:active,
#player .ui-group-theme-a .ui-btn:active,
#player .ui-btn.ui-btn-a:active,
#player #header-back-button:active,
#player #header-queue-button:active,
#player #tuninButton:active,
div#playerSocialInfoWrapperInQueue > div > a:active,
#songPoppupMenu > div > ul > li > a:active,
.popup-menu-content > div > ul > li > a:active {
    background-color: var(--color-white-10);
    border-color: var(--color-white-10);
    color: white !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}
#tuninButton,
body.browser.mobileweb #tuninButton:hover,
#tuninButton:active,
#player #tuninButton,
body.browser.mobileweb #player #tuninButton:hover,
#player #tuninButton:active,
body.browser.mobileweb div#playerSocialInfoWrapperInQueue > div > a:hover,
div#playerSocialInfoWrapperInQueue > div > a:active {
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}
.darktext * #header-back-button,
.darktext * #header-queue-button {
    color: var(--text-dark) !important;
}
.no_border {
    border-width: var(--border-0) !important;
}
#albumDetailsPage > div[data-role=header] {
    overflow: visible;
    height: var(--size-52);
    border: var(--border-0);
    background-color: transparent;
    
    background-image: var(--gradient-fade-dark-top);
}
.userProfileDetailsPage > div.ui-header[data-role=header] {
    overflow: visible;
    height: var(--size-52);
    border: var(--border-0);
    background-color: transparent;
}
#albumDetailsPage > div[data-role=header] > a.ion-ios7-more,
#albumDetailsPage > div[data-role=header] > a.pe-7s-more {
    padding: var(--size-none);
    top: 0em;
    vertical-align: middle;
    text-align: center;
    color: white;
    line-height: var(--line-height-5-4xl);
    font-size: var(--text-4xl);
    right: 0px;
}
.songInfoCarousel {
    display: block;
    /* overflow-x: scroll; */
}
.songInfoCarousel * .owl-item {
    margin-left: var(--space-3xs);
    margin-right: var(--space-3xs);
}
.songOverviewCard {
    height: var(--size-100);
    float: left;
    margin-left: var(--space-3xs);
    margin-right: var(--space-3xs);
}
.songOverviewCard > div {
    height: var(--size-full);
    width: var(--size-full);
}
.songOverviewCard * .songInfo {
    position: absolute;
    bottom: 0px;
    height: 35%;
    width: var(--size-full);
    display: block;


    font-size: var(--text-2xs);
    color: white;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    padding-bottom: var(--border-3);
    padding-top: var(--border-3);
}
.popupContent * .songOverviewCard * .songInfo > div {
    color: white;
}


.songInfo.doNotShowArtistName .artistName,
.songInfo.doNotShowCoverArt .songCoverArt{
    display: none;
}

.songInfo.doNotShowCoverArt .songAndArtist{
    width: var(--size-full);
}
.songInfo.doNotShowCoverArt .songName,
.songInfo.doNotShowCoverArt .artistName{
    text-align: center;
}
.songOverviewCard * .songInfo > div {
    overflow-x: hidden;
    text-overflow: ellipsis;
    margin-left: var(--space-3xs);
    font-weight: 400;
    /*font-weight: 300;*/

    color: var(--text-dark);
    white-space: nowrap;
}
.songOverviewCard * .songInfo > div:first-child {
    overflow-x: hidden;
    text-overflow: ellipsis;
    margin-left: var(--space-3xs);
    opacity: 0.5;
    font-weight: 400;
}
.songOverviewCard * .songAlbumCoverArt {
    height: var(--size-full);
    width: var(--size-full);
    /*background-image: url('img/videoLoading.png');*/

    background-size: cover;
    top: 0px;
    left: 0px;
    /*background-color: var(--color-gray-100);*/
}
.songOverviewCard * .songAlbumCoverArt > div {
    display: flex;
    display: -webkit-flex;
}
.popupContent * .songOverviewCard * .songAlbumCoverArt > div {
    background-color: var(--color-white-10);
    height: var(--size-full);
    width: var(--size-full);
    justify-content: center;
    -webkit-justify-content: center;
    display: flex;
    display: -webkit-flex;
    align-content: center;
    -webkit-align-content: center;
    /*background-color: var(--color-white-20);*/
}
.popupContent * .songOverviewCard * .songAlbumCoverArt > div:active {
    background-color: var(--color-white-50);
}
#artistDetailsPage > div[data-role=header] > a.ion-ios7-more,
.playlistDetailsPage > div[data-role=header] > a.ion-ios7-more,
#artistDetailsPage > div[data-role=header] > a.pe-7s-more,
.playlistDetailsPage > div[data-role=header] > a.pe-7s-more {
    padding: var(--size-none);
    top: 0em;
    vertical-align: middle;
    text-align: center;
    color: white;
    line-height: var(--line-height-5-4xl);
    font-size: var(--text-5xl);
    right: 0px;
}
#artistDetailsPage > div[data-role=header],
.playlistDetailsPage > div[data-role=header],
.artistDetailsPage > div[data-role=header],
.albumDetailsPage > div[data-role=header] {
    background-color: transparent;
    overflow: visible;
    border: var(--border-0);
    background-image: var(--gradient-fade-dark-to);
}
#artistDetailsPage.darktext > div[data-role=header],
.playlistDetailsPage.darktext > div[data-role=header],
.artistDetailsPage.darktext > div[data-role=header],
.albumDetailsPage.darktext > div[data-role=header] {
    color: var(--text-dark) !important;
}
#albumDetailsPage > div[data-role=header] > #header-back-button {
    color: white;
    text-overflow: ellipsis;
    font-weight: 300;
    line-height: var(--line-height-2);
    font-size: var(--text-xl);
    overflow: hidden;
}
#artistDetailsPage > div[data-role=header] > #header-back-button,
.playlistDetailsPage > div[data-role=header] > #header-back-button,
.trebbleEditInfoPage > div[data-role=header] > #header-back-button {
    color: white;
    text-overflow: ellipsis;
    font-weight: 300;
    line-height: var(--line-height-2-5);
    font-size: var(--text-lg);
    overflow: hidden;
}

.trebbleEditInfoPage #trebbleCategoryField-button,
.trebbleEditInfoPage #trebbleLanguageField-button,
.trebbleEditInfoPage #isJourneyFreeField-button,
.trebbleEditInfoPage #trebbleVisibiltiyField-button,
.trebbleEditInfoPage #journeyCostField-button,
.trebbleEditInfoPage #trebbleTimezoneField-button{
  background-color:transparent;
  color:var(--trebble-primary) !important;
  border-width: var(--border-2);
  font-weight:400;
  height: var(--size-46);
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: var(--text-sm-px);
  padding: var(--size-none);
  margin-right: var(--space-2xs);
  margin-left: var(--space-2xs);
}
#playerCurrentSongTitleWrapper {
    font-weight: 600 !important;
    /*font-weight: 400;
    font-weight: 300;*/

    padding-left: var(--size-em-lg);
    padding-right: var(--size-em-lg);
    margin-left: 0em;
    margin-right: 0em;
}
.playerCoverArtImage-landscape {
    height: 98%;
    /*position: absolute;*/
    margin: var(--size-none) auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    visibility: visible;
    background-color: black;
    box-shadow: var(--shadow-floating);
    /*box-shadow: var(--shadow-ambient-lg);
    -moz-box-shadow: var(--shadow-ambient-lg);
    background-color: black;*/
}
#youtubeVideoLinkWrapper {
    height: var(--size-full);
    display: flex;
    justify-content: center;
    align-items: center;
}
.playerCoverArtImage-portrait {
    margin: var(--space-3xs);
    background-size: contain;
    /* height: var(--size-full); */

    position: absolute;
    margin: var(--size-none) auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: black;
    box-shadow: var(--shadow-floating);
    /*box-sizing: border-box;
    box-shadow: var(--shadow-ambient-lg);
    -moz-box-shadow: var(--shadow-ambient-lg);
    background-color: black;*/
}
body.embedded * #playerCurrentSongTitle {
    font-size: var(--text-sm);
    line-height: var(--line-height-lg);
}
#playerCurrentSongTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600 !important;
    /*font-weight: 400;
    font-weight: 300;*/

    font-size: var(--text-base);
    text-align: left;
    color: white;
    white-space: nowrap;
}
#playerFooter.browser * #playerCurrentSongTitle,
#playerFooter.browser * #playerCurrentArtist {
    color: var(--text-dark);
}
#playerCurrentSongTitleWrapper > div {
    overflow: hidden;
    text-overflow: ellipsis;
    /* padding-left: var(--size-em-lg); */
    /* padding-right: var(--size-em-lg); */

    margin-left: 0em;
    margin-right: 0em;
}
body.embedded * #playerCurrentArtist {
    font-size: var(--text-sm);
    line-height: 17px;
}
#playerCurrentArtist {
    opacity: 0.5;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: var(--text-sm);
    color: white;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
}
#resizeVideoFullBtn {
    padding: var(--size-none);
    background-color: transparent;
    border: var(--border-0);
    margin: 0em;
    width: var(--size-1-7em);
    height: var(--size-1-7em);
    text-align: center;
    line-height: var(--line-height-1-5);
    position: absolute;
    bottom: 0px;
    left: 0px;
    opacity: 0.8;
    font-size: var(--text-2xl);
    display: block;
}


body.browser:not(.mobilebrowser) #youtubeVideoLinkWrapper:hover ~ #resizeVideoFullBtn.showOnHover,
body.browser:not(.mobilebrowser) #youtubeVideoLinkWrapper:active ~ #resizeVideoFullBtn.showOnHover,
body.browser:not(.mobilebrowser)  #resizeVideoFullBtn.showOnHover:hover,
body.browser:not(.mobilebrowser)  #resizeVideoFullBtn.showOnHover:active {
  display: block ;
}

body.browser.mobilebrowser  #resizeVideoFullBtn.showOnHover {
  display: block ;
}

#playerSongPositionWrapper {
    padding-right: var(--text-base);
    padding-left: var(--text-base);
    height: var(--size-2em);
    width: var(--size-full);
}
#playerSongPositionWrapper > div {
    display: flex;
    display: -webkit-flex;
    line-height: var(--line-height-2);
    height: var(--size-2em);
    width: var(--size-full);
    margin-top: 0em;
}
#playerSongPositionWrapper > div > div#songCurrentPosition {
    padding-right: var(--size-em-2xs);
}
#playerSongPositionWrapper > div > div#trackDuration {
    margin-left: var(--size-em-2xs);
}
#playerSongPositionWrapper > div > div {
    opacity: 1;
    margin-right: 0em;
    margin-left: 0em;
    font-size: var(--text-xs);
    color: white;
    height: var(--size-full);
    width: var(--size-2em);
}

a#queueRefreshButton,div#playerSocialInfoWrapperInQueue>div>a{
    font-size: var(--text-4xl);
    display:block;
    margin: var(--space-2xs);
    padding: 0;
    border:var(--border-0)
}
#playerFooter.browser * #playerSongPositionWrapper > div > div {
    flex: 0 0 auto;
    color: var(--text-dark);
}
#playerFooter.browser * #playerSongPositionWrapper > div > div#playerPositionSliderWrapper {
    flex: 1 1 100%;


}
div#playerSocialInfoWrapperInQueue {
    height: var(--size-4em);
}
div#playerSocialInfoWrapperInQueue > div {
    height: var(--size-4em);
}

#playerFooter.transparent * #playerCurrentSongTitle, 
#playerFooter.transparent * #playerCurrentArtist,
body.browser.mobileweb #playerFooter.transparent * #playerInformationButton:hover,
body.browser.mobileweb #playerFooter.transparent * #playerSongMoreButton:hover,
body.browser.mobileweb #playerFooter.transparent * #playerMoreInformationButton:hover,
body.browser.mobileweb #playerFooter.transparent * #expandPlayerButton:hover,
body.browser.mobileweb #playerFooter.transparent * #queueRefreshButton:hover, 
body.browser.mobileweb #playerFooter.transparent * #songIsFavoriteBtn:hover,
body.browser.mobileweb #playerFooter.transparent * #tagsBtn:hover,
body.browser.mobileweb #playerFooter.transparent * #shareSongBtn:hover,
#playerFooter.transparent * #playerSongPositionWrapper > div > div,
#playerFooter.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a,
#playerFooter.transparent > div > div#footerControlsWrapper > #playerControlsWrapper > div > a,

body.darkTheme #playerFooter:not(.transparent) * #playerCurrentSongTitle, 
body.darkTheme #playerFooter:not(.transparent) * #playerCurrentArtist,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #playerInformationButton:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #playerSongMoreButton:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #playerMoreInformationButton:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #expandPlayerButton:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #queueRefreshButton:hover, 
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #songIsFavoriteBtn:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #tagsBtn:hover,
body.browser.mobileweb.darkTheme #playerFooter:not(.transparent) * #shareSongBtn:hover,
body.darkTheme #playerFooter:not(.transparent) * #playerSongPositionWrapper > div > div,
body.darkTheme #playerFooter:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a,
body.darkTheme #playerFooter:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a, 

[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerCurrentSongTitle, 
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerCurrentArtist,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerInformationButton:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerSongMoreButton:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerMoreInformationButton:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #expandPlayerButton:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #queueRefreshButton:hover, 
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #songIsFavoriteBtn:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #tagsBtn:hover,
body.browser.mobileweb [data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #shareSongBtn:hover,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerSongPositionWrapper > div > div,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > div > a,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) > div > div#footerControlsWrapper > #playerControlsWrapper > div > a  {
  color: var(--color-white-70);
  font-weight: normal;
}


#playerFooter #songIsFavoriteBtn,
#player #songIsFavoriteBtn{
    display: none !important;
}

#playerFooter.transparent * #playerCurrentSongTitle,
#playerFooter.transparent * #playerCurrentArtist,
#playerFooter.transparent * #mediaSourceBtn,

body.darkTheme #playerFooter:not(.transparent) * #playerCurrentSongTitle,
body.darkTheme #playerFooter:not(.transparent) * #playerCurrentArtist,
body.darkTheme #playerFooter:not(.transparent) * #mediaSourceBtn,

[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerCurrentSongTitle,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #playerCurrentArtist,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter:not(.transparent) * #mediaSourceBtn{
  color: white;
}

div#playerSocialInfoWrapperInQueue > div > a {
    background-color: transparent;
    border: var(--border-0);
    line-height: var(--line-height-5xl);
    font-size: var(--text-4xl);
    display: block;
    width: var(--size-50);
    height: var(--size-50);
    padding: var(--size-none);
    margin: var(--space-2xs);
}
div#playerSocialInfoWrapperInQueue > div > a:active {
    background-color: var(--trebble-primary);
}
#playerSocialInfoWrapper,
#playerSocialInfoWrapperInQueue {
    line-height: var(--line-height-3-5);
    height: 4.2em;
    width: var(--size-full);
    margin-top: 0em;
    display: flex;
    background-size: cover;
}
#playerSocialInfoWrapper > div,
#playerSocialInfoWrapperInQueue > div {
    height: var(--size-3-5em);
    display: block;
    width: var(--size-3-5em);
    flex: 0 0 3.5em;
    -ms-flex: 0 0 3.5em;
    -webkit-flex: 0 0 3.5em;
}
body.embedded * #playerSocialInfoWrapper > div,
body.embedded * #playerSocialInfoWrapperInQueue > div {
    height: var(--size-40);
    display: block;
    width: var(--size-3-5em);
}
#playerSocialInfoWrapper > div#playerSongMoreSocialWrapper,
#playerSocialInfoWrapperInQueue > div#playerSongMoreSocialWrapper {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}
a#queueRefreshButton {
    border: var(--border-0);
    line-height: var(--line-height-5xl);
    font-size: var(--text-4xl);
    display: block;
    width: var(--size-50);
    height: var(--size-50);
    padding: var(--size-none);
    margin: var(--space-2xs);
}
#playerInformationButton,
#playerSongMoreButton,
#playerMoreInformationButton,
#expandPlayerButton,
#queueRefreshButton,
#songIsFavoriteBtn,
#tagsBtn,
#shareSongBtn,
#trebbleIconButton {
    padding: var(--size-none);
    opacity: 1;
    margin: 0em;
    width: var(--size-full);
    vertical-align: middle;
    line-height: 2.1em;
    color: white;
    font-weight: 400;
    height: var(--size-full);
    font-size: var(--text-xl);
    bottom: 0px;
    border-width: var(--border-0);
    align-items: center;
    display: flex;
    justify-content: center;
    -webkit-align-items: center;
    display: -webkit-flex;
    -webkit-justify-content: center;
    overflow: visible;
}
#playerFooter.browser:not(.transparent) * #playerInformationButton,
#playerFooter.browser:not(.transparent) * #playerSongMoreButton,
#playerFooter.browser:not(.transparent) * #playerMoreInformationButton,
#playerFooter.browser:not(.transparent) * #expandPlayerButton,
#playerFooter.browser:not(.transparent) * #queueRefreshButton,
#playerFooter.browser:not(.transparent) * #songIsFavoriteBtn,
#playerFooter.browser:not(.transparent) * #tagsBtn,
#playerFooter.browser:not(.transparent) * #shareSongBtn{
    color: var(--text-dark);
    overflow: visible;
}
#playerFooter.browser.transparent * #playerInformationButton,
#playerFooter.browser.transparent * #playerSongMoreButton,
#playerFooter.browser.transparent * #playerMoreInformationButton,
#playerFooter.browser.transparent * #expandPlayerButton,
#playerFooter.browser.transparent * #queueRefreshButton,
#playerFooter.browser.transparent * #songIsFavoriteBtn,
#playerFooter.browser.transparent * #tagsBtn,
#playerFooter.browser.transparent * #shareSongBtn,

body.darkTheme #playerFooter.browser:not(.transparent) * #playerInformationButton,
body.darkTheme #playerFooter.browser:not(.transparent) * #playerSongMoreButton,
body.darkTheme #playerFooter.browser:not(.transparent) * #playerMoreInformationButton,
body.darkTheme #playerFooter.browser:not(.transparent) * #expandPlayerButton,
body.darkTheme #playerFooter.browser:not(.transparent) * #queueRefreshButton,
body.darkTheme #playerFooter.browser:not(.transparent) * #songIsFavoriteBtn,
body.darkTheme #playerFooter.browser:not(.transparent) * #tagsBtn,
body.darkTheme #playerFooter.browser:not(.transparent) * #shareSongBtn,

[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) * #playerInformationButton,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) * #playerSongMoreButton,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) * #playerMoreInformationButton,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) * #expandPlayerButton,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) * #queueRefreshButton,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) * #songIsFavoriteBtn,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) * #tagsBtn,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.browser:not(.transparent) * #shareSongBtn {
  color: var(--color-white-70);
  overflow: visible;
}

#playerFooter.browser * #playerInformationButton:active,
#playerFooter.browser * #playerSongMoreButton:active,
#playerFooter.browser * #playerMoreInformationButton:active,
#playerFooter.browser * #expandPlayerButton:active,
#playerFooter.browser * #queueRefreshButton:active,
#playerFooter.browser * #songIsFavoriteBtn:active,
#playerFooter.browser * #tagsBtn:active,
#playerFooter.browser * #shareSongBtn:active {
    color: white;
    overflow: visible;
}
body.browser.mobileweb #playerFooter.browser * #playerInformationButton:hover,
body.browser.mobileweb  #playerFooter.browser * #playerSongMoreButton:hover,
body.browser.mobileweb  #playerFooter.browser * #playerMoreInformationButton:hover,
body.browser.mobileweb  #playerFooter.browser * #expandPlayerButton:hover,
body.browser.mobileweb  #playerFooter.browser * #queueRefreshButton:hover,
body.browser.mobileweb  #playerFooter.browser * #songIsFavoriteBtn:hover,
body.browser.mobileweb  #playerFooter.browser * #tagsBtn:hover,
body.browser.mobileweb  #playerFooter.browser * #shareSongBtn:hover {
    background-color: var(--bg-overlay-dark);
    /* border-color: var(--color-black-5); */
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
  background-color: var(--color-white-5);
  overflow: visible;
}
a#songIsFavoriteBtn {
    font-size: var(--text-4xl);
    line-height: var(--line-height-6xl);
    height: var(--size-60);
}
body.embedded * a#songIsFavoriteBtn {
    font-size: var(--text-lg);
    line-height: var(--line-height-4xl);
    height: var(--size-40);
    border: var(--border-0);
    display: block;
}
a#playerSongMoreButton,
a#playerMoreInformationButton{
    line-height: var(--line-height-1-5);
    font-weight: 400;
    font-size: var(--text-2xl);
}

#playerPositionSliderWrapper > form > div > div[role=application] > div {
    background: var(--trebble-primary-dark);
}
#playerSongPositionWrapper > div > #playerPositionSliderWrapper {
    flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    justify-content: center;
    -webkit-justify-content: center;
    display: flex;
    display: -webkit-flex;
    align-content: center;
    -webkit-align-content: center;
    flex-direction: column;
    padding: var(--size-none) var(--space-2xs);

}
#playerSongPositionWrapper > div > #playerPositionSliderWrapper > form > div > input {
    display: none;
}
#playerSongPositionWrapper > div > #playerPositionSliderWrapper > form > div > div {
    opacity: 1;
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    border: var(--border-0);
    background-color: var(--color-white-20);
    margin-top: var(--text-3xs);
    height: 0.1em;
}
#playerSongPositionWrapper > div > #playerPositionSliderWrapper > form > div > div > a {
    border: var(--border-0);
    border-color: var(--color-white-90);
    background-color: var(--color-white-90);
    margin: -7px 0 0 -2px;
    border-radius: 0%;
    width: 0.2em;
}
html .ui-page-theme-c .playlistItem,
html  body.browser.mobileweb .ui-page-theme-c .playlistItem:hover,
html .ui-page-theme-a .playlistItem,
html  body.browser.mobileweb .ui-page-theme-a .playlistItem:hover {
    /*height: 180px;
    padding: var(--border-6);*/
    color: var(--text-dark);
    /*display: block;*/
    font-weight: 400;
    /*border: var(--border-1) solid var(--color-gray-100);*/
    position: relative;
}
html .ui-page-theme-c .playlistItem.withLargeAlbumArt,
html .ui-page-theme-a .playlistItem.withLargeAlbumArt{
    padding-left: var(--border-6);
    padding-right: var(--border-6);
    padding-top: var(--space-2xs);
    background-color: white;
    height: var(--size-360);
    box-sizing: border-box;
    padding-bottom: var(--space-2xs);
    align-items: center;
    display: flex;
    justify-content: center;
    -webkit-align-items: center;
    display: -webkit-flex;
    -webkit-justify-content: center;
    margin: var(--space-xs);
    margin-left: var(--space-xs);
    margin-right: var(--space-xs);
    flex: 0 0 100%;
    -moz-flex: 0 0 100%;
    -o-flex: 0 0 100%;
    min-width: var(--size-240);
    max-width: var(--size-400);
    width: calc(var(--size-full) - var(--space-md));
}

html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard,
html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard{
    padding: var(--space-2xs);
    width: calc(var(--size-full) - var(--space-sm));
}


.playlistItem.withLargeAlbumArt.journeyCard .info{
    text-align: start;
}

.playlistItem.withLargeAlbumArt.journeyCard > div > div.info > .title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    white-space: normal;
}

.journeyPage[logged-in-used-subscribed="false"] .create_update_review_sectiom{
    display: none;
}

/* Rating Journey Section CSSS */
.rating_summary_section{
    max-width: var(--size-900);
    margin: auto;
}


/* Rating Summary Card CSSS */
.rating_summary_card{
    max-width: var(--size-900);
    /*border: var(--border-2) solid var(--color-white-10);*/
    /*padding: var(--space-sm);*/
    box-sizing: border-box;
    margin: var(--space-sm);
}

.rating_summary_card:not([total-ratings="0"]) .no_rating_available,
.rating_summary_card[total-ratings="0"] .rating_summary_card_content{
    display: none;
}

.rating_summary_card_content{
    display: flex;
    flex-direction: row;
}


.rating_summary_card_content .rating_average_section{
    display: flex;
    flex-direction: column;
    padding: var(--space-sm);
    box-sizing: border-box;
    justify-content: center;
}

.rating_summary_card_content .rating_average_section .total_ratings{
 flex-direction: row;
 display: flex;
 align-items: center;
}

.rating_summary_card_content .rating_details_section{
    flex: 1 1 100%;
}


.rating_summary_card[total-ratings="0"] .no_rating_available{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--text-base-px);
}

.rating_summary_card .rating_average_section{
    font-size: var(--text-xl-px);
    /* margin-bottom: var(--space-sm);*/
}

.rating_summary_card .rating_average_section .total_ratings_label{
    padding-left: var(--border-3);
}

.rating_summary_card .rating_average_section .rating_average{
    font-weight: bold;
    font-size: var(--text-5xl-px);
}

.rating_summary_card .rating_details{
    display: flex;
    flex-direction: row;
    margin: var(--space-3xs) var(--size-none);
    justify-content: center;
    align-items: center;
    
}

.rating_summary_card .rating_average_section .separator{
    display: none;
}


.rating_summary_card .rating_details .rating_visual_bar{
    flex: 1 1 auto;
    height: var(--size-8);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    background-color: var(--color-white-20);
    overflow: hidden;
}

.rating_summary_card .rating_details .rating_visual_bar .rating_progress_bar{
    width: 0%;
    background-color: var(--color-gray-100);
    height: var(--size-full);
}

.rating_summary_card .rating_details .rating_stars_list{
    flex: 0 0 auto;
    margin: var(--size-none) var(--border-6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.rating_summary_card .rating_details .rating_stars_list .star_icon.ion-ios7-star-outline{
    /*visibility: hidden;*/
}

.rating_summary_card .rating_details .rating_stars_list .star_icon{
   margin: var(--size-none) var(--border-2);
   font-size: var(--text-base-px);
}

.rating_summary_card .rating_details .rating_percentage{
    flex: 0 0 45px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    opacity: 0.7;
}



/*  Create  a user review page CSS */
.review_form_wrapper{
    max-width: var(--size-900);
    margin: auto;
}

.review_form_content{

    padding: var(--space-sm) var(--size-none);
    box-sizing: border-box;

}

.review_form_content .rating_section,
.review_form_content .text_review_section{
    margin: var(--space-sm);
}

.review_form_content .rating_section .rating_section_title,
.review_form_content .text_review_section .text_review_section_title{

    font-weight: bold;
    font-size: var(--text-md-px);
    margin: var(--space-2xs) var(--size-none);

}

.review_form_content .rating_section  .rating_stars .star_rating_btn{
    font-size: var(--text-5xl-px);
    margin: var(--border-2);
    cursor: pointer;
}

[creating-new-review=false] .review_form_content #createReviewBtn,
[creating-new-review=true] .review_form_content #updateReviewBtn{
    display: none;
}

.transparent_outline_button{
    background-color: transparent;
    border: var(--border-2) solid var(--text-dark);
    color: var(--text-dark)!important;
    margin-top: var(--space-3xs);
    margin-bottom: var(--space-3xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: var(--border-2);
    max-width: var(--size-300);
    margin: auto;
    box-sizing: border-box;
    height: var(--size-46);
    cursor: pointer;
    
}

[data-role=page].lighttext .transparent_outline_button,
html body.darkTheme .transparent_outline_button{
  color: var(--text-light)!important;
  border: var(--border-2) solid var(--text-light);
}

.transparent_outline_button.disabled{
    opacity: 0.5;
    cursor: default;
}


.playlistItem.journeyCard > div > div.info > div > div.lastUpdateTime,
.journeyPage .journey_other_info{
 max-width: var(--size-full);
 width: -moz-fit-content;
 width: fit-content;
 padding: var(--size-none) var(--space-2xs);
 box-sizing: border-box;
 flex-direction: row;
 display: flex;
 align-items: center;
 color: var(--trebble-accent);
 font-weight: bold;
 font-size: 90%;
}

.journeyPage .setup_trailer_box_wrapper{
    max-width: var(--size-900);
    margin: auto;
    padding: var(--space-sm);
    box-sizing: border-box;
}

.journeyPage .setup_trailer_box_wrapper .selectedSongViewPlaceHolder{
    border-color: transparent;
    background: var(--color-white-10);
}

.playlistDetailsPage.journeyPage.publicPage .bioWrapper .playlistDescription,
.playlistDetailsPage.journeyPage:not(.publicPage) .ratings_section,
.playlistDetailsPage.journeyPage:not(.publicPage) .description_box_wrapper,
.playlistDetailsPage.journeyPage .preview_mode_warning,
.playlistDetailsPage.journeyPage.publicPage .trailer_info_management_box_wrapper{
    display: none;
}

.playlistDetailsPage.journeyPage.publicPage[in-preview-mode="true"] .preview_mode_warning{
    background: var(--color-black-50);
    z-index: 1000;
    position: absolute;
    top: 0;
    width: var(--size-full);
    height: var(--size-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    font-weight: 700;
    border-bottom: var(--border-1) solid var(--color-gray-700);

}
.playlistDetailsPage.journeyPage.publicPage[in-preview-mode=true] [data-role=header]{
    top: 50px;
}

.journey_progress_info_wrapper{
    max-width: var(--size-600);
    padding: var(--space-sm);
    margin: auto;
    box-sizing: border-box;
}

.journey_progress_info_wrapper .text_progress_summary_info{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.journey_progress_info_wrapper .text_progress_summary_info .text_progress_summary_in_days {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.journey_progress_info_wrapper .text_progress_summary_info .text_progress_summary_in_percent  {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.journey_progress_info_wrapper  .total_progress_bar{
    background-color: var(--color-white-20);
    width: var(--size-full);
    height: var(--size-5);
    margin: var(--space-sm) auto;
}

.journey_progress_info_wrapper  .total_progress_bar .completed_progress_bar{
    background-color: white;
    width: 0%;
    height: var(--size-full);
    max-width: var(--size-full);

}

.journey_progress_info_wrapper  .total_progress_bar .completed_progress_bar.coloured{
    background-color: var(--color-green-400);
}


/* JOurney and Playlist page is non colour theme css */
html body:not(.darkTheme) #myJourneys,
html body:not(.darkTheme) #journeyList,
html body:not(.darkTheme) div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a,
html body:not(.darkTheme) .ui-bar-t .ui-body-inherit, 
html body:not(.darkTheme).ui-body-t, 
html body:not(.darkTheme).ui-body-t .ui-body-inherit, 
html body:not(.darkTheme) .ui-page-theme-t .ui-body-inherit, 
html body:not(.darkTheme) .ui-panel-page-container-t, 
html body:not(.darkTheme) .ui-group-theme-t .ui-body-inherit,
html body:not(.darkTheme) #mylibrary #collection_repeat_container,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"],
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .artistDetailCoverArtWrapper{
    background: var(--bg-light) !important;
}
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .basicArtistInfo{
    display: none;
}
html body:not(.darkTheme) #artistDetailsPage[do-not-match-coverart-color-with-background="true"] > div[data-role=header],
html body:not(.darkTheme) .albumDetailsPage[do-not-match-coverart-color-with-background="true"] > div[data-role=header], 
html body:not(.darkTheme) .artistDetailsPage[do-not-match-coverart-color-with-background="true"] > div[data-role=header], 
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] > div[data-role=header]{
    background-color: transparent !important;
    background-image: linear-gradient(var(--color-white-100),var(--color-white-40) 70%,var(--color-white-0) 100%)
}

html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"].journeyPage.editable .journey_summary_detail .jouney_summary_detail_item.goal_info:hover,
html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"].playlistDetailsPage #pageHeaderTitleWrapper > .editable:hover,
html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"].playlistDetailsPage .playlistDescription.editable:hover,
html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"].playlistDetailsPage #pageHeaderTitleWrapper > .editable:active,
html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"].playlistDetailsPage .playlistDescription.editable:active,
html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"].userProfileDetailsPage #pageHeaderTitleWrapper > .editable:hover,
html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"].userProfileDetailsPage #pageHeaderTitleWrapper > .editable:active,
html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"][data-role=page].lighttext * .capsuleCard * .description,
html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"][data-role=page].lighttext * .capsuleCard * .itemSubtitle{
    color: var(--color-black-70)!important;
}

html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] * .capsuleCard, [data-role=page].userProfileDetailsPage * .capsuleCard{
    box-shadow: var(--shadow-edge-light);
}

html body:not(.darkTheme) [data-role=page]:not(.lighttext) #helpHeaderButton,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) #homeHeaderButton,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) .ui-bar-t,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) .ui-bar-t .ui-bar-inherit,
html body:not(.darkTheme).ui-body-t [data-role=page]:not(.lighttext) .ui-bar-inherit,
html body:not(.darkTheme) .ui-page-theme-t[data-role=page]:not(.lighttext)  .ui-bar-inherit,
html body:not(.darkTheme) [data-role=page]:not(.lighttext)  .ui-group-theme-t .ui-bar-inherit,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) [data-role=header] * #deleteButton,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) [data-role=header] * #editButton,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) [data-role=header] * #filterButton,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) [data-role=header] * #menuOptionButton,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) [data-role=header] * #nextButton.tag.actionButton,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) [data-role=header] * #saveButtonIcon,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) [data-role=header] * #doneRecordingButtonIcon,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) [data-role=header] * #shareTrebbleBtn,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) [data-role=header] * #showRecordSectionButton.tag.actionButton,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) [data-role=header] * #showUploadSectionButton.tag.actionButton,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page] * .capsuleCard,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page] * .capsuleCard > .note > span,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page] * .capsuleCard > .title > span,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page] .capsuleCard a,
html body:not(.darkTheme) .userProfileDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page] * .capsuleCard,
html body:not(.darkTheme) .userProfileDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page] * .capsuleCard > .note > span,
html body:not(.darkTheme) .userProfileDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page] * .capsuleCard > .title > span,
html body:not(.darkTheme) .userProfileDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page] .capsuleCard a{
    color: var(--text-dark) !important;
}


html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"][data-role=page].lighttext * .capsuleCard, 
html body:not(.darkTheme) [do-not-match-coverart-color-with-background="true"][data-role=page].lighttext * .capsuleCard * .itemTitle,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .listeningInstructionsBox,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] #contentWrapper,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page].lighttext .flexUpperContentWrapper > div.trebbleInfo > .bioWrapper,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page].lighttext.playlistDetailsPage #contentWrapper,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].journeyPage .journey_other_info .journey_stats > span,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].journeyPage .journey_other_info .radio_type_tag.journey_tag,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] #header-back-button.ui-btn-left,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .flexUpperContentWrapper >div.trebbleInfo > .bioWrapper,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].journeyPage .journey_other_info .journey_stats,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].journeyPage .journey_other_info .radio_type_tag.journey_tag,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .itemTitle,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .songTitle,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .userListItem:active > .infoWrapper > .userFullname,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .userListItem:active > .infoWrapper >.userUsername,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].lighttext .outline_item {
    color: var(--text-dark) !important;
}

html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .rating_summary_card .rating_details .rating_visual_bar{
    background-color: var(--color-black-20);
}

html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"]  .rating_summary_card .rating_details .rating_visual_bar .rating_progress_bar{
 background-color: var(--text-dark);
}

html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].lighttext * .listHeader,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].lighttext * .tabheader {
    border-bottom: var(--border-1) solid var(--color-black-5);
    color: var(--color-black-50);
}

#redeemButton{
    height: var(--size-46);
    max-width: var(--size-200);
}

#redeemButton.disabled{
    border-color: var(--color-gray-100);
    background-color: var(--color-gray-100);
    color: var(--color-gray-300) !important;
}

html #redeemButton,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] #followBtn,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] #buyNowBtn,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] #followingBtn, 
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] #purchasedBtn, 
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] #playTrailerBtn{
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
    color: var(--text-light)!important;
    cursor: pointer;
}

html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"][data-role=page].lighttext .transparent_outline_button, 
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .transparent_outline_button,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] #playTrailerBtn{
    background-color: transparent;
    border-color: var(--trebble-primary);
    color: var(--trebble-primary) !important;
    cursor: pointer;
}

html body:not(.darkTheme) [data-role=page]:not(.lighttext) .playlistItem.withLargeAlbumArt,
html body:not(.darkTheme) [data-role=page].playlistDetailsPage:not(.lighttext) * .capsuleCard, 
html body:not(.darkTheme) [data-role=page].userProfileDetailsPage:not(.lighttext) * .capsuleCard{
    background-color: white;
}

html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].lighttext  .outline_item .buttonGroup .play_btn #playCapsuleBtn i,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].lighttext  .outline_item .buttonGroup  i{
    color:white !important;
}
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].lighttext .outline_item{
    border-bottom: var(--border-1) solid var(--color-black-10);
}

html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .journey_summary_detail,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].listeningInstructionWrapper .listeningInstructionsBox,
html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"].playlistDetailsPage .listeningInstructionsBox{
    background-color: var(--color-black-5);
}

html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .songSelectorPlaceholder>.content>.noAudioAvaliablePlaceholder{
   border: var(--border-2) solid var(--color-black-20);
   opacity: .5;
   color: var(--color-black-50);
}

html body:not(.darkTheme) .playlistDetailsPage[do-not-match-coverart-color-with-background="true"] .songSelectorPlaceholder>.content>.selectedSongViewPlaceHolder {
    border: var(--border-2) solid var(--color-black-40)
}

html body:not(.darkTheme) [data-role=page]:not(.lighttext) .infoBoxWrapper > .content > .message,
html body:not(.darkTheme) [data-role=page]:not(.lighttext) * .infoBoxWrapper > .content > p > .iconWrapper{
    color: var(--color-black-70);
}



.journeyPage .setup_trailer_box_wrapper .selectedSongViewPlaceHolder .outline_item{
    border-color: transparent;
    padding-right: var(--space-sm);
    padding-left: var(--space-sm);
    height: var(--size-full);
}

.journeyStatsInfoWrapper{

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.specific_journey_stats_summary{

    display: inline-flex;
    width: var(--size-140);
    align-items: center;
    justify-content: center;
    height: var(--size-140);
    flex-direction: column;
    margin: var(--space-sm) var(--space-2xs);
    box-shadow: var(--shadow-edge-light);

}

.journey_context_info{

    max-width: var(--size-700);
    display: flex;
    flex-direction: row;
    margin: auto;
    margin-top: var(--space-sm);
    width: calc(var(--size-full) - var(--space-lg));
    background-color: var(--bg-overlay-dark);
}




.journey_context_info .cover_art_wrapper{

    height: var(--size-60);
    width: var(--size-60);
    margin: var(--space-sm);
    box-sizing: border-box;

}

.journey_context_info .cover_art_wrapper img{


    height: var(--size-60);
    width: var(--size-60);
    -o-object-fit: cover;
       object-fit: cover;


}

.journey_stats .listHeader{
    max-width: var(--size-700);
    margin: auto;
    box-sizing: border-box;
    padding: var(--space-2xs) var(--size-none);
    height: var(--size-60);
    width: calc(var(--size-full) - var(--space-lg));
}
.journey_context_info .journey_title{

    box-sizing: border-box;
    padding: var(--space-sm);
    font-size: var(--text-xl-px);
    font-weight: 900;

}
.outline_stats_table .outline_stats_header_row{
    background-color: var(--color-black-5);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-gray-750);
    font-size: 80%;
}

.outline_stats_table .outline_stats_header_row,
.outline_stats_table .outline_stats{
    display: flex;
    flex-direction: row;
    width: var(--size-full);
    border-bottom: var(--border-1) solid var(--color-black-5);
    

}
.outline_stats_table{

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(var(--size-full) - var(--space-lg));
    max-width: var(--size-700);
    margin: var(--space-lg) auto;
    font-size: 100%;
    margin: var(--space-2xs) auto;
    border: var(--border-1) solid var(--color-black-5);


}
.generic_journey_stats{
    text-align: center;
    max-width: var(--size-600);
    margin: auto;
}

.outline_stats_table .outline_stats .day_number,.outline_stats_table .outline_stats_header_row .day_number{
    flex: 0 0 40px;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: var(--text-xl-px) var(--space-2xs);
    border-right: var(--border-1) solid var(--color-black-5);
}
.outline_stats_table .outline_stats .number_of_plays,.outline_stats_table .outline_stats_header_row .number_of_plays{
    flex: 0 0 60px;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: var(--text-xl-px) var(--space-2xs);
}
.outline_stats_table .outline_stats .shortcast_title,.outline_stats_table .outline_stats_header_row .shortcast_title{
    flex: 1 1 calc(var(--size-full) - var(--text-9xl-px));
    box-sizing: border-box;
    padding-left: var(--space-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: var(--text-xl-px) var(--space-2xs);
    border-right: var(--border-1) solid var(--color-black-5);
    display: block;
    align-items: center;
}
.outline_stats_table .outline_stats_header_row .shortcast_title{
   white-space: normal;
}
.specific_journey_stats_summary .stats_number{

    font-weight: 900;
    font-size: var(--text-2xl-px);

}

.journeyPage .schedule_date_message_wrapper{
    color: var(--trebble-accent);
    margin: auto;
    display: block;
    justify-content: center;
    align-items: center;
    padding: var(--space-sm);
    background-color: white;
    max-width: var(--size-250);
    text-align: center;
    font-weight: bold;

    display: flex;
    flex-direction: row;
    margin: var(--space-sm) auto;

}

#buyNowBtn:not(.loading) > #loadingImg,
#buyNowBtn.loading > .button_content{
    display: none;
}

#buyNowBtn.loading > #loadingImg{
  border: var(--border-2) solid var(--color-black-20);
  border-top-color: var(--color-black-80);
}

#buyNowBtn.loading > #loadingImg,
#buyNowBtn:not(.loading) > .button_content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#buyNowBtn #loadingImg{
    width: var(--size-20);
    height: var(--size-20);
    flex: 0 0 20px;
    margin: var(--size-none);
}
#buyNowBtn .button_content .buy_now_label{
    margin-left: var(--text-2xs);
}

#buyNowBtn .button_content .buy_now_cost{
    margin-left: var(--size-em-2xs);
}


.journeyPage .schedule_date_message_wrapper .ion-ios7-calendar-outline{
    font-size: var(--text-3xl-px);
    margin-right: var(--space-sm);
}

.playlistItem.journeyCard.doNotShowRadioTag > div > div.info > div > div.lastUpdateTime,
.playlistItem.journeyCard.doNotShowRadioTag > div > div.info > div > div.lastUpdateTime .radio_type_tag.journey_tag{
    color: var(--trebble-primary-200);
    color: var(--trebble-accent);
    /*font-size: 120%;*/
}

.playlistItem.journeyCard.doNotShowRadioTag > div > div.info > div > div.lastUpdateTime .radio_type_tag.journey_tag{
    background-color: transparent;
    color: var(--trebble-primary-200);
    color: var(--trebble-accent);
    padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--size-none);
}

.journeyPage .journey_other_info .radio_type_tag.journey_tag{
    padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--size-none);
}

.journeyPage .ownerInfo{

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: var(--text-xs-px);
    margin: var(--space-sm) auto;
    width: -moz-fit-content;
    width: fit-content;
    max-width: var(--size-full);


}

body.mobileweb .journeyPage .ownerInfo:hover,
.journeyPage .ownerInfo:active{
    opacity: 0.7;
}


.journeyPage .ownerInfo .usernameAndFullname{
    margin: var(--size-none) var(--space-2xs);
}
.journeyPage .ownerInfo .usernameAndFullname .username{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--size-200);
}

.journeyPage .ownerInfo .usernameAndFullname ,
.journeyPage .ownerInfo .userAvatar{
    cursor: pointer;
} 

.journeyPage .ownerInfo .userAvatar{
    height: var(--size-24);
    width: var(--size-24);
    flex: 0 0 24px;
}
.journeyPage .journey_duration_label .ion-ios7-time-outline.journeyOultlineListIcon,
.journeyPage .journey_rating_label .ion-ios7-star.journeyOultlineListIcon{
    margin: var(--size-none) var(--space-3xs);
}

.journeyPage .journey_stats i.journeyOultlineListIcon{
    margin-left: var(--space-3xs);
    display: flex;
    justify-content: center;
    align-items: center;
}


.journeyPage .journey_stats .journey_duration_label .ion-ios7-time-outline.journeyOultlineListIcon,
.journeyPage .journey_stats .journey_rating_label .ion-ios7-star.journeyOultlineListIcon{
    margin-left: var(--space-2xs);
}
.journeyPage .journey_stats i.journeyOultlineListIcon.fontello-icon-list{
    font-size: var(--text-md-px);
}

.playlistItem.journeyCard > div > div.info > div > div.lastUpdateTime > span,
.journeyPage .journey_other_info > span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) 0;
}

.playlistItem.journeyCard > div > div.info > div > div.lastUpdateTime > span .journeyOultlineListIcon,
.journeyPage .journey_other_info  > span .journeyOultlineListIcon{

    font-size: var(--text-md-px);
    font-weight: bold;
    align-items: center;
    justify-content: center;
    display: flex;
    width: var(--size-16);
    margin: var(--size-none) var(--border-4);

}
.ion-ios7-time-outline.journeyOultlineListIcon{
    -webkit-text-stroke: thin;
}
.playlistItem.withLargeAlbumArt.journeyCard > div > div.info > div > div.lastUpdateTime > span.journey_duration_label{
    display: none;
}

.playlistItem.withLargeAlbumArt.journeyCard > div > div.info > div > div.lastUpdateTime > span.journey_rating_label{
    font-size: var(--text-xs-px);
}

.playlistItem.journeyCard > div > div.info > div > div.lastUpdateTime .radio_type_tag.journey_tag,
.journeyPage .journey_other_info .radio_type_tag.journey_tag,
.journeyPage .journey_other_info .journey_stats > span{
    padding: var(--size-none) var(--space-3xs) var(--space-2xs) var(--space-3xs);
    background-color: transparent;
    border-radius: 4px;
    font-weight: bold;
    color: white;
    flex-direction: row;
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
} 

.infiniteListItem .songArtistLibrary .journey_rating_label .ion-ios7-star.journeyOultlineListIcon{
    margin: var(--size-none) var(--border-4);
}


.journeyPage .journey_other_info .radio_type_tag.journey_tag{
 background-color: transparent;
 color: var(--trebble-accent);
}

.journeyPage .journey_other_info .radio_type_tag.journey_tag,
.journeyPage .journey_other_info .journey_stats{
    color: white;
}

.journeyPage .journey_other_info{
    width: var(--size-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.playlistItem.journeyCard > div > div.info > div > div.lastUpdateTime .radio_type_tag.journey_tag .journeyIcon,
.journeyPage .journey_other_info  .radio_type_tag.journey_tag .journeyIcon{
    margin-right: var(--border-6);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    font-size: var(--text-base-px);
}

.journeyPage .journey_other_info .journey_stats{
    flex-direction: row;
    display: flex;
}

.playlistItem.journeyCard > div > div.info  .description .goal_icon,
html   .playlistItem.withLargeAlbumArt.smallcardsize.journeyCard  .journey_goal_wrapper .goal_icon{
    margin-right: var(--space-2xs);
    text-align: start;
}


#collection_repeat_container .playlistItem.withLargeAlbumArt{
    display: inline-table;
}

.sentinel_block_wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
}
.sentinel_block_wrapper .sentinel{
    font-size: var(--text-xl-px);
    opacity: 0.7;
}

@media(max-width: 500px), (max-height: 500px) and (orientation: landscape){
    #collection_repeat_container .playlistItem.withLargeAlbumArt{
        display: inline-flex;
        flex-direction: column;
    }
}

[data-role=page]:not(.lighttext) .playlistItem.withLargeAlbumArt{
    box-shadow: var(--shadow-right);
    border: transparent;
}
html  body.browser.mobileweb .ui-page-theme-c .playlistItem.withLargeAlbumArt:hover,
html  body.browser.mobileweb .ui-page-theme-a .playlistItem.withLargeAlbumArt:hover,
html body.browser.mobileweb .ui-page-theme-c .playlistItem.withLargeAlbumArt:active,
html body.browser.mobileweb .ui-page-theme-a .playlistItem.withLargeAlbumArt:active{
  box-shadow: var(--shadow-bottom);
}
/*html  body.browser.mobileweb .capsuleCard .buttonGroup{
    display: none;
}
html  body.browser.mobileweb .capsuleCard:hover .buttonGroup,
body.browser.mobileweb .capsuleCard:active .buttonGroup{
    display: flex;
}*/
html  body.browser.mobileweb .capsuleCard:hover {
  box-shadow: var(--shadow-sm);
}
html  body.browser.mobileweb .ui-page-theme-c .playlistItem.withLargeAlbumArt:hover,
html  body.browser.mobileweb .ui-page-theme-a .playlistItem.withLargeAlbumArt:hover {
  cursor: pointer;
}

#collection_repeat_container.sortable{
    counter-reset: trebbleOrderInFeed;
}

html   .playlistItem.withLargeAlbumArt.smallcardsize {
    height: var(--size-120);
    counter-increment: trebbleOrderInFeed;
}

#mySubscriptions .playlistItem.withLargeAlbumArt.smallcardsize:before
/*,#myJourneys .playlistItem.withLargeAlbumArt.smallcardsize:before*/{
    content: counter(trebbleOrderInFeed)  ;
    position:absolute;
    background-color: white;
    color:var(--trebble-primary);
    top: 8px;
    left:6px;
    font-weight: bold;
    padding: var(--border-3) var(--border-6);
    z-index: 1;
}


html   .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt{
    height:var(--size-full);
    display:flex;
    flex-direction:row;
}
html    .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt{
    width:var(--size-100);
    height:var(--size-100);
    flex: 0 0 100px;
}
.playlistItem.journeyCard.withLargeAlbumArt.rectangularImage.smallcardsize > div > div.info > .title{
    height: auto;
    max-height: var(--size-46);
}
html    .playlistItem.withLargeAlbumArt.smallcardsize.journeyCard  .itemContent.withLargeAlbumArt .coverArt,
html  body.darkTheme   .playlistItem.withLargeAlbumArt.smallcardsize.journeyCard  .itemContent.withLargeAlbumArt .coverArt{
    width:var(--size-70);
    height:var(--size-70);
    flex: 0 0 70px;
}



/*html  .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt .imageWrapper *:not(img),
html  .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt .imageWrapper:hover *:not(img),
html  .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt .imageWrapper:active *:not(img),
html  .playlistItem.withLargeAlbumArt.smallcardsize:hover  .itemContent.withLargeAlbumArt .coverArt .imageWrapper *:not(img),
html  .playlistItem.withLargeAlbumArt.smallcardsize:active  .itemContent.withLargeAlbumArt .coverArt .imageWrapper *:not(img){
    display:none;
}
*/


html  .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt .imageWrapper i{
    font-size: var(--text-4xl-px);
    width: var(--size-50);
    height: var(--size-50);
    margin: auto;
    top: calc(var(--size-half) - var(--text-xl-px));
    left: calc(var(--size-half) - var(--text-xl-px));
}



html  .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt .imageWrapper .buttonBar,
html  .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt .imageWrapper .previewBtn,
html  .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt .imageWrapper:hover .buttonBar,
html  .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt .imageWrapper:active .buttonBar,
html  .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt .imageWrapper:hover .previewBtn,
html  .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt .imageWrapper:active .previewBtn,
html  .playlistItem.withLargeAlbumArt.smallcardsize:hover  .itemContent.withLargeAlbumArt .coverArt .imageWrapper .buttonBar,
html  .playlistItem.withLargeAlbumArt.smallcardsize:active  .itemContent.withLargeAlbumArt .coverArt .imageWrapper .buttonBar,
html  .playlistItem.withLargeAlbumArt.smallcardsize:hover  .itemContent.withLargeAlbumArt .coverArt .imageWrapper .previewBtn,
html  body.browser.mobileweb:not(.mobilebrowser) .playlistItem.withLargeAlbumArt.smallcardsize:active  .itemContent.withLargeAlbumArt .coverArt .imageWrapper .previewBtn{
    display:none;
}
html   .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .info{
    /* flex: 0 0 calc(var(--size-full) - var(--size-100)); */
    width: calc(var(--size-full) - var(--size-100));
    padding: var(--size-none) var(--space-2xs);
    box-sizing: border-box;
}

html .sortable > .collection_content_wrapper > .playlistItem.withLargeAlbumArt.smallcardsize .itemContent.withLargeAlbumArt .info{
    width: calc(var(--size-full) - var(--text-10xl-px));
}
html   .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .info .description,
html   .playlistItem.withLargeAlbumArt.smallcardsize.journeyCard  .journey_goal_wrapper {
    /*white-space:nowrap;
    text-overflow: ellipsis;*/
    margin: var(--border-2) var(--size-none);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;  
    text-overflow: ellipsis;
    font-size: var(--text-sm-px);
    overflow: hidden;
}
html   .playlistItem.withLargeAlbumArt.smallcardsize.journeyCard  .journey_goal_wrapper {
    padding-bottom: var(--border-2);
    margin-bottom: var(--space-2xs);
    height: var(--size-32);
    /*text-align: start;*/
}
html .sortable > .playlistItem.withLargeAlbumArt.smallcardsize .itemContent.withLargeAlbumArt .info{
    width: calc(var(--size-full) - var(--size-100) - var(--size-50) - var(--space-xs));
    max-width: calc(var(--size-400) - var(--size-100) - var(--size-50) - var(--space-xs));
}

.playlistItem.withLargeAlbumArt.smallcardsize.journeyCard .itemContent.withLargeAlbumArt .buttonBar,
html   .playlistItem.withLargeAlbumArt.smallcardsize.journeyCard .itemContent.withLargeAlbumArt .info .description,
html   .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .info .summary,
html   .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .info .socialInfos,
html   .playlistItem.withLargeAlbumArt.smallcardsize:not(.journeyCard)  .itemContent.withLargeAlbumArt .info .footer{
    display:none;
}

.playlistItem.withLargeAlbumArt.smallcardsize.journeyCard .itemContent.withLargeAlbumArt{
    align-items: flex-start;
    height: -moz-fit-content;
    height: fit-content;
    margin-bottom: var(--space-2xs);
}

*:not(.sortable) .swiper-container-horizontal  .playlistItem.withLargeAlbumArt .dragBtn,
*:not(.sortable) > .collection_content_wrapper > .playlistItem.withLargeAlbumArt .dragBtn,
.outline_item .drag_btn_wrapper{
    display: none ;
}

[data-role=page][journey_status=DRAFT]:not(.publicPage) .sortable > .collection_content_wrapper > .outline_item .drag_btn_wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--size-40);
    height: var(--size-40);
    border-radius: 50%;
    flex: 0 0 40px;
}

.sortable > .playlistItem.withLargeAlbumArt .dragBtn{
    color: var(--trebble-primary);
}

.sortable > .collection_content_wrapper > .playlistItem.withLargeAlbumArt .dragBtn,
.sortable > .outline_item .dragBtn{
    width: var(--size-50);
    height: var(--size-full);
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: var(--text-xl-px);
}



.playlistItem.withLargeAlbumArt .info .buttonBar{
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
}

.journeyCard.playlistItem.withLargeAlbumArt.doNotShowSubscribeButton .info .buttonBar,
.journeyCard.playlistItem.withLargeAlbumArt.doNotShowSubscribeButton  .buttonBar{
    display: none;
}



@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){

    html .playlistItem.withLargeAlbumArt.smallcardsize .itemContent.withLargeAlbumArt .info .title{
        font-size: var(--text-md-px);
    }

    html .playlistItem.withLargeAlbumArt.smallcardsize .itemContent.withLargeAlbumArt .info .description,
    html .playlistItem.withLargeAlbumArt.smallcardsize.journeyCard .journey_goal_wrapper{
        font-size: var(--text-xs-px);
    }

    html   .playlistItem.withLargeAlbumArt.smallcardsize {
        height: var(--size-100);
        margin: var(--border-6);
    }

    html   .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .coverArt{
        width:var(--size-70);
        height:var(--size-70);
        flex: 0 0 70px;
    }

    html   .playlistItem.withLargeAlbumArt.smallcardsize  .itemContent.withLargeAlbumArt .info{
        /* flex: 0 0 calc(var(--size-full) - var(--size-100)); */
        width: calc(var(--size-full) - var(--size-70));
        padding: var(--size-none) var(--space-3xs);
        box-sizing: border-box;
    }

    html .sortable > .collection_content_wrapper > .playlistItem.withLargeAlbumArt.smallcardsize .itemContent.withLargeAlbumArt .info{
        width: calc(var(--size-full) - var(--text-9xl-px));
    }

    html .sortable > .playlistItem.withLargeAlbumArt.smallcardsize .itemContent.withLargeAlbumArt .info{
        width: calc(var(--size-full) - var(--size-100) - var(--size-50) - var(--space-xs));
    }

    .playlistItem.withLargeAlbumArt.smallcardsize .buttonBar div.transparent_button{
        min-width: var(--size-70);
    }

    .playlistItem.withLargeAlbumArt.smallcardsize:before{

        top: 2px;
        left: 4px;
        padding: var(--border-1) var(--border-4);


    }

    .playlistDetailsPage.publicPage.journeyPage .bioWrapper .trebbleName,
    .playlistDetailsPage.journeyPage .bioWrapper .trebbleName,
    body .playlistDetailsPage.journeyPage  #pageHeaderTitleWrapper{
        font-size: var(--text-2xl);
    }



}



html .ui-page-theme-c .playlistItem.transparent.withLargeAlbumArt,
html  body.browser.mobileweb .ui-page-theme-c .playlistItem.transparent.withLargeAlbumArt:hover,
html .ui-page-theme-a .playlistItem.transparent.withLargeAlbumArt,
html  body.browser.mobileweb .ui-page-theme-a .playlistItem.transparent.withLargeAlbumArt:hover,

html body.darkTheme .ui-page-theme-c .playlistItem.withLargeAlbumArt,
html  body.darkTheme.browser.mobileweb .ui-page-theme-c .playlistItem.withLargeAlbumArt:hover,
html body.darkTheme .ui-page-theme-a .playlistItem.withLargeAlbumArt,
html  body.darkTheme.browser.mobileweb .ui-page-theme-a .playlistItem.withLargeAlbumArt:hover,

html [data-role=page].darkTheme .playlistItem.withLargeAlbumArt,
html  body.browser.mobileweb [data-role=page].darkTheme .playlistItem.withLargeAlbumArt:hover,
html [data-role=page].darkTheme .playlistItem.withLargeAlbumArt,
html  body.browser.mobileweb [data-role=page].darkTheme .playlistItem.withLargeAlbumArt:hover {
    border-color: transparent;
    /*background-color: var(--color-white-10);*/
    background-color: transparent;
    color: white;
}


html body.darkTheme  .journey_context_info,
html .ui-page-theme-c.lighttext .playlistItem.transparent.withLargeAlbumArt,
html  body.browser.mobileweb .ui-page-theme-c.lighttext .playlistItem.transparent.withLargeAlbumArt:hover,
html .ui-page-theme-a.lighttext .playlistItem.transparent.withLargeAlbumArt,
html  body.browser.mobileweb .ui-page-theme-a.lighttext .playlistItem.transparent.withLargeAlbumArt:hover,

html .ui-page-theme-c .playlistItem.transparent.withLargeAlbumArt.smallcardsize,
html  body.browser.mobileweb .ui-page-theme-c .playlistItem.transparent.withLargeAlbumArt.smallcardsize:hover,
html .ui-page-theme-a .playlistItem.transparent.withLargeAlbumArt.smallcardsize,
html  body.browser.mobileweb .ui-page-theme-a .playlistItem.transparent.withLargeAlbumArt.smallcardsize:hover,

html body.darkTheme .ui-page-theme-c .playlistItem.withLargeAlbumArt.smallcardsize,
html  body.darkTheme.browser.mobileweb .ui-page-theme-c .playlistItem.withLargeAlbumArt.smallcardsize:hover,
html body.darkTheme .ui-page-theme-a .playlistItem.withLargeAlbumArt.smallcardsize,
html  body.darkTheme.browser.mobileweb .ui-page-theme-a .playlistItem.withLargeAlbumArt.smallcardsize:hover,

html body.darkTheme .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard,
html  body.darkTheme.browser.mobileweb .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard:hover,
html body.darkTheme .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard,
html  body.darkTheme.browser.mobileweb .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard:hover,

html [data-role=page].darkTheme .playlistItem.withLargeAlbumArt.smallcardsize,
html  body.browser.mobileweb [data-role=page].darkTheme .playlistItem.withLargeAlbumArt.smallcardsize:hover,
html [data-role=page].darkTheme .playlistItem.withLargeAlbumArt.smallcardsize,
html  body.browser.mobileweb [data-role=page].darkTheme .playlistItem.withLargeAlbumArt.smallcardsize:hover {
    background: var(--color-white-5) !important;
}


html body.browser.mobileweb  .ui-page-theme-c .playlistItem:active,
html body.browser.mobileweb  .ui-page-theme-a .playlistItem:active {
    background-color: var(--trebble-primary) !important;
    border-color: var(--trebble-primary);
    color: white !important;
}
html  body.browser.mobileweb .ui-page-theme-c .playlistItem.transparent:active,
html  body.browser.mobileweb .ui-page-theme-a .playlistItem.transparent:active,
html  body.browser.mobileweb .ui-page-theme-c .playlistItem.transparent:hover,
html  body.browser.mobileweb .ui-page-theme-a .playlistItem.transparent:hover,

html  body.darkTheme.browser.mobileweb .ui-page-theme-c .playlistItem:active,
html  body.darkTheme.browser.mobileweb .ui-page-theme-a .playlistItem:active,
html  body.darkTheme.browser.mobileweb .ui-page-theme-c .playlistItem:hover,
html  body.darkTheme.browser.mobileweb .ui-page-theme-a .playlistItem:hover,

html  body.browser.mobileweb [data-role=page].darkTheme.ui-page-theme-c .playlistItem:active,
html  body.browser.mobileweb [data-role=page].darkTheme.ui-page-theme-a .playlistItem:active,
html  body.browser.mobileweb [data-role=page].darkTheme.ui-page-theme-c .playlistItem:hover,
html  body.browser.mobileweb [data-role=page].darkTheme.ui-page-theme-a .playlistItem:hover  {
    background-color: var(--bg-overlay-light) !important;
    border: var(--border-0);
    /*var(--color-white-10) !important;*/
    
    color: white !important;
}
.playlistItem > .itemContent {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    height: var(--size-180);
    align-items: center;
}
.playlistItem.withLargeAlbumArt > .itemContent {
    flex-direction: column;
    height: var(--size-330);
    width: var(--size-full);
    /* max-width: var(--size-500);*/
}
.playlistItem > .itemContent > .coverArt {
    width: var(--size-50);
    background-color: var(--color-gray-100);
    margin-left: var(--space-2xs);
    margin-right: var(--space-2xs);
    margin-top: var(--border-4);
    margin-bottom: var(--border-4);
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
}
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt {
    display: flex;
    display: -webkit-flex;
    width: auto;
    height: var(--size-140);
    background-color: var(--color-gray-100);
    /* margin-left: var(--space-2xs); */
    /* margin-right: var(--space-2xs); */
    
    margin-top: var(--border-4);
    margin-bottom: var(--border-4);
    margin: var(--size-none);
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    display: block;
}
.playlistItem.transparent.withLargeAlbumArt > .itemContent > .coverArt,
body.darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt,
[data-role=page].darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt {
    height: var(--size-140);
    justify-content: center;
    -webkit-justify-content: center;
    background-color: transparent;
    background-image: none;
}
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .previewBtn {
    display: none;
    top: 2px;
    right: 2px;
    position: absolute;
    color: var(--text-dark);
    padding: var(--space-2xs);
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    border-radius: 1px;
    font-size: var(--text-xs);
    /*text-shadow: 1px 1px 1px var(--color-black-40);*/
    border: var(--border-2) solid white;
    background-color: white;
}

body.browser.mobileweb  .playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .previewBtn:hover, .playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .previewBtn:active {
    background-color: transparent;
    border: var(--border-2) solid white;
    color: white;
    text-shadow: none;
}

.playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .previewBtn.notAvailable,
body.browser.mobileweb  .playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .previewBtn.notAvailable:hover,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .previewBtn.notAvailable:active{
    display: none !important;
}

.playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .overlay {
  position: absolute;
  width: var(--size-full);
  height: var(--size-full);
  background-color: black;
  opacity: 0.5;
  top: 0px;
  right: 0px;
  display: none;
  transition: transform 0.4s cubic-bezier(.33,0,.2,1), transform 0.4s cubic-bezier(.33,0,.2,1);
}

body.browser.mobileweb .playlistItem.withLargeAlbumArt:hover > .itemContent > .coverArt * .previewBtn,
body.browser.mobileweb:not(.mobilebrowser) .playlistItem.withLargeAlbumArt:active > .itemContent > .coverArt * .previewBtn,
body.browser.mobileweb .playlistItem.withLargeAlbumArt:not(.notDetailable):hover > .itemContent > .coverArt * .overlay,
body.browser.mobileweb .playlistItem.withLargeAlbumArt:not(.notDetailable):active > .itemContent > .coverArt * .overlay {
  display: block;
}

.playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .buttonBar {
  display: none;
  top: 42px;
  right: 2px;
  position: absolute;
}

.playlistItem.withLargeAlbumArt.journeyCard > .itemContent > .coverArt * .buttonBar{
  top: 2px;
}

body.browser.mobilebrowser .playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .buttonBar {
   top: 0px;
}

body.browser.mobileweb .playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .buttonBar > a:hover,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .buttonBar > a:active{
  color: white;
  background-color: var(--trebble-primary);
  border: var(--border-2) solid var(--trebble-primary);

}

.playlistItem.withLargeAlbumArt > .itemContent > .coverArt * .buttonBar > a{
  margin: var(--size-none) var(--size-none) var(--size-none) var(--border-2);
  width: var(--size-30);
  height: var(--size-30);
  padding: var(--size-none);
  display: flex;
  justify-content: center;
  font-size: var(--text-4xl);
  align-items: center;
  border-radius: 1px;
  color: var(--trebble-primary);
  color: white;
  background-color: transparent;
  border: var(--border-2) solid transparent;
  /* border: var(--border-0); */
}

body.browser.mobileweb .playlistItem.withLargeAlbumArt:hover > .itemContent > .coverArt * .buttonBar,
body.browser:not(.mobilebrowser) .playlistItem.withLargeAlbumArt:active > .itemContent > .coverArt * .buttonBar {
    align-items: center;
    -webkit-align-items: center;
    display: flex;
    display: -webkit-flex;

}

.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > .playButton,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > .playButton,
.playlistItem.withLargeAlbumArt:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) > .itemContent > .coverArt > div > .playButton,
.playlistItem.withLargeAlbumArt.isCurrentlyPlaying > .itemContent > .coverArt > div > .stopButton,
.playlistItem.withLargeAlbumArt.isCurrentlyLoading:not(.isCurrentlyPlaying) > .itemContent > .coverArt > div > .loadingIndicator{
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -webkit-flex;
  height: var(--size-140);
  width: var(--size-full);
  position: absolute;
  color: white;
  font-size: var(--text-7xl);
  box-sizing: border-box;
  left: 0px;
  top: 0px;
  height: var(--size-70);
  top: calc(var(--size-half) - var(--size-icon-sm));
  left: calc(var(--size-half) - var(--size-icon-sm));
  border-radius: 50%;
  border: var(--border-3) solid transparent;
  width: var(--size-70);
  /* padding: var(--size-70); */
  justify-content: center;
  -webkit-justify-content: center;
  cursor: pointer;
  border: var(--border-3) solid var(--color-white-90);
  background-color: var(--color-black-20);
}

.playlistItem.withLargeAlbumArt.transparent .playButton.ion-ios7-play,
body.darkTheme .playlistItem.withLargeAlbumArt .playButton.ion-ios7-play,
[data-role=page].darkTheme .playlistItem.withLargeAlbumArt .playButton.ion-ios7-play,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > .playButton:before{
    padding-left: var(--border-3); /** THIS IS DONE TO ACCOUNT FOR THE BORDER WIDTH, NOT REALLY SURE WHY **/
}

.playlistItem.withLargeAlbumArt.isCurrentlyLoading:not(.isCurrentlyPlaying) > .itemContent > .coverArt > div > .loadingIndicator{
    border: var(--border-0);
}

.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > .playButton.ion-ios7-play-outline:before,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > .playButton.ion-ios7-play-outline:before {
  margin-left: var(--space-2xs);
  opacity: 0.8;
  font-weight: 600;
}

.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > .playButton.ion-ios7-pause-outline:before,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > .playButton.ion-ios7-pause-outline:before {
  margin-left: var(--border-2);
  opacity: 0.8;
  font-weight: 600;
}



body.browser.mobileweb .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > .playButton:hover,
body.browser.mobileweb .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > .playButton:hover,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > .playButton:active,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > .playButton:active,
body.browser.mobileweb .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > .stopButton:hover,
body.browser.mobileweb .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > .stopButton:hover,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > .stopButton:active,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > .stopButton:active,
body.browser.mobileweb .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > .loadingIndicator:hover,
body.browser.mobileweb .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > .loadingIndicator:hover,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > .loadingIndicator:active,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > .loadingIndicator:active {
  /* color: var(--trebble-primary); */
  border: var(--border-3) solid var(--trebble-primary);
  background-color: var(--trebble-primary);
  color: white;
  font-weight: 700;
  text-shadow: none;
  /* transform: scale(1.09); */
}
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > img[src*=http] ~ .playButton,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > img[src*=http] ~ .playButton {

}
.playlistItem.transparent.withLargeAlbumArt > .itemContent > .coverArt > img[src*=http] ~ .playButton,
.playlistItem.transparent.withLargeAlbumArt > .itemContent > .coverArt > img[src*=http] > div ~ .playButton,
body.darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > img[src*=http] ~ .playButton,
body.darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > img[src*=http] > div ~ .playButton,
[data-role=page].darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > img[src*=http] ~ .playButton,
[data-role=page].darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > img[src*=http] > div ~ .playButton {
    /*background: none;*/
}
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > img,
.playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > img {
  background-color: var(--color-gray-100);
  width: var(--size-full);
  -o-object-fit: cover;
  object-fit: cover;
  height: var(--size-full);
  transition: transform 0.4s cubic-bezier(.33,0,.2,1);
}
.playlistItem.transparent.withLargeAlbumArt > .itemContent > .coverArt > img,
.playlistItem.transparent.withLargeAlbumArt > .itemContent > .coverArt > div > img,
body.darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > img,
body.darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > img,
[data-role=page].darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > img,
[data-role=page].darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div > img {
  background-color: transparent;
}
/*.playlistItem.transparent.withLargeAlbumArt > .itemContent > .coverArt > img,
.playlistItem.transparent.withLargeAlbumArt > .itemContent > .coverArt > div >img {


    box-shadow: var(--shadow-depth);
    }*/
    .playlistItem.transparent.withLargeAlbumArt > .itemContent > .coverArt ,
    body.darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt ,
    [data-role=page].darkTheme .playlistItem.withLargeAlbumArt > .itemContent > .coverArt {
      /* width: 154px; */
      box-shadow: var(--shadow-depth);
  }
  body.browser.mobileweb .playlistItem.withLargeAlbumArt:not(.notDetailable):hover > .itemContent > .coverArt > img,
  body.browser.mobileweb .playlistItem.withLargeAlbumArt:not(.notDetailable):hover > .itemContent > .coverArt > div > img,
  body.browser.mobileweb .playlistItem.withLargeAlbumArt:not(.notDetailable):active > .itemContent > .coverArt > img,
  body.browser.mobileweb .playlistItem.withLargeAlbumArt:not(.notDetailable):active > .itemContent > .coverArt > div > img {
      transform: scale(1.09);
  }
  .playlistItem.withLargeAlbumArt > .itemContent > .coverArt > div.imageWrapper {
    position: relative;
    width: var(--size-full);
    height: var(--size-full);
    overflow: hidden;
    box-shadow: var(--shadow-edge);
}
.playlistItem > div > div.info {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    width: calc(var(--size-full) - var(--space-lg));
    padding: var(--space-sm);
    max-width: calc(var(--size-400) - var(--space-xs) - var(--size-100));
}

.sortable > .collection_content_wrapper > .playlistItem:not(.journeyCard) > div > div.info {
    max-width: calc(var(--size-400) - var(--space-xs) - var(--text-10xl-px));
}

.sortable > .collection_content_wrapper > .playlistItem.journeyCard > div > div.info {
    max-width: calc(var(--size-400) - var(--text-10xl-px));
}

.playlistItem.journeyCard.withLargeAlbumArt.rectangularImage > div > div.info {
    width: calc(var(--size-full) - var(--space-sm));
    padding: var(--space-2xs);
}

.playlistItem.journeyCard.withLargeAlbumArt.rectangularImage > div > div.info > .description{
    height: var(--size-70);
    text-align: start;
}

.playlistItem.journeyCard.withLargeAlbumArt.rectangularImage > div > div.info > .title{
    height: var(--size-60);
    text-align: start;
}

.playlistItem > div > div.info > .title {
    padding: var(--size-none) var(--space-2xs);
    font-weight: 900;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--text-md);
}
/*
.playlistItem.journeyCard > div > div.info > .title{
    font-size: var(--text-md);
    }*/
    body.browser.mobileweb .playlistItem:not(.notDetailable) > div > div.info > .title:hover,
    .playlistItem:not(.notDetailable) > div > div.info > .title:active {
     color:var(--trebble-primary); 
 }
 .browser.mobilebrowser  .playlistItem > div > div.info > .title{
  /*font-weight: 500;*/
}
.playlistItem.transparent > div > div.info > .title,
body.darkTheme .playlistItem > div > div.info > .title,
[data-role=page].darkTheme .playlistItem > div > div.info > .title {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.playlistItem > div > div.info > .description {
    font-size: var(--text-sm-px);
    padding: var(--size-none) var(--space-2xs);
    /*color: var(--color-gray-500);*/
    color: var(--text-dark);
    padding-top: var(--size-none);
    padding-bottom: var(--size-none);
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: var(--space-2xs) var(--size-none);
    max-height: var(--size-70);
    /*font-weight: 300;*/
}

.playlistItem:not(.smallcardsize) > div > div.info > .description {
    height: var(--size-70);
    overflow: hidden;
    text-overflow: ellipsis;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4;
}

.playlistItem.transparent > div > div.info > .description,
body.darkTheme .playlistItem > div > div.info > .description,
[data-role=page].darkTheme .playlistItem > div > div.info > .description,
.playlistItem.transparent.withLargeAlbumArt.smallcardsize > div > div.info > .description,
body.darkTheme .playlistItem.withLargeAlbumArt.smallcardsize > div > div.info > .description,
[data-role=page].darkTheme .playlistItem.withLargeAlbumArt.smallcardsize > div > div.info > .description {
    color: white;
    text-align: center;
}
html body.browser.mobileweb .playlistItem:active > div > div.info > .description {
    color: white;
}
.playlistItem > div > div.info > p.summary,
.playlistItem > div > div.info > .socialInfos {
    margin-top: var(--size-none);
    margin-bottom: var(--size-none);
    white-space: nowrap;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--text-sm);
}
.playlistItem > div > div.info > p.summary {
    font-weight: 600;
    color: var(--trebble-primary-200);
}
.playlistItem.transparent > div > div.info > p.summary,
body.darkTheme .playlistItem > div > div.info > p.summary,
[data-role=page].darkTheme .playlistItem > div > div.info > p.summary {
    color: var(--trebble-primary-200);
    text-align: center;
}
.playlistItem > div > div.info > .socialInfos {
    width: var(--size-full);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    color: var(--color-gray-500);
}
.playlistItem  .socialInfos{
    display: none !important;
}
.playlistItem.transparent > div > div.info > .socialInfos,
body.darkTheme .playlistItem > div > div.info > .socialInfos,
[data-role=page].darkTheme .playlistItem > div > div.info > .socialInfos {
    color: white;
    justify-content: center;
    -webkit-justify-content: center;
}
html body.browser.mobileweb .playlistItem:active > div > div.info > .socialInfos {
    color: white;
}
.playlistItem * .socialInfos > i {
    margin-left: var(--border-4);
}
.socialInfos > i {
    margin-right: var(--border-6);
}
.playlistItem > div > div.info > .footer {
    display: flex;
    display: -webkit-flex;
    padding-top: var(--border-4);
    flex: 0 0 25px;
    -webkit-flex: 0 0 25px;
    white-space: nowrap;
    font-size: var(--text-sm);
    padding-bottom: var(--border-4);
    color: var(--color-gray-400);
}
.playlistItem.transparent > div > div.info > .footer,
body.darkTheme .playlistItem > div > div.info > .footer,
[data-role=page].darkTheme .playlistItem > div > div.info > .footer{
    color: var(--color-white-50);
}
html body.browser.mobileweb .playlistItem:active > div > div.info > .footer {
    color: white;
}
.playlistItem > div > div.info > div > div.lastUpdateTime,
.playlistItem > div > div.info > div > div.author {
    flex: 1 1 50%;
    -webkit-flex: 1 1 50%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.playlistItem > div > div.info > div > div.lastUpdateTime {
    text-align: right;
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a,
#recordControlsWrapper > [data-role=controlgroup] >:first-child > a,
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o {
    padding: var(--size-none);
    border: var(--border-0);
    line-height: var(--line-height-6xl);
    vertical-align: middle;
    text-align: center;
    width: var(--size-fifth);
    height: var(--size-60);
    overflow: visible;
    max-width: var(--size-fifth);
    margin: auto;
}
ui-#recordControlsWrapper > [data-role=controlgroup] >:first-child > a,
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o {

    /*padding-top: var(--space-sm);*/

}
.createCapsulePage #recordControlsWrapper > [data-role=controlgroup] >:first-child{
    max-width: var(--size-400);
    margin: auto;
}

#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-chat {
    font-size: var(--text-lg);
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a {
    line-height: var(--line-height-4xl);
    height: var(--size-50);
    font-weight: 300;
    display: flex;
    display: -ms-flex;
    display: -moz-flex;
    flex: 1 1 100%;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
}


#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > .ion-ios7-mic, 
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > .pe-7s-micro,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > .ion-ios7-paperplane, 
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > .ion-ios7-paperplane-outline{
  height: var(--size-50);
  width:var(--size-50);
  font-weight: 300;
  position:relative;
  display: flex;
  display: -ms-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
}

#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > .ion-ios7-mic > .ion-contrast, 
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > .pe-7s-micro > .ion-contrast,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > .ion-ios7-paperplane > .ion-contrast, 
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > .ion-ios7-paperplane-outline > .ion-contrast{

  font-size: var(--text-sm-px);
  position: absolute;
  bottom: calc(var(--space-sm) + var(--space-3xs));
  height: var(--size-14);
  right: calc(var(--text-xl-px) - var(--text-md-px));
}



body.embedded #playerControlsWrapper > [data-role=controlgroup] >:first-child > a{
    height: var(--size-40);
}


#playerControlsWrapper.doNotShowComment > [data-role=controlgroup] >:first-child > a,
#recordControlsWrapper.doNotShowComment > [data-role=controlgroup] >:first-child > a,
#recordControlsWrapper.doNotShowComment > [data-role=controlgroup] >:first-child > o {
    width: 24%;
    max-width: 24%;
}
[data-role=page] * #recordControlsWrapper > [data-role=controlgroup] >:first-child > a,
[data-role=page] * #recordControlsWrapper > [data-role=controlgroup] >:first-child > o {
    color: var(--text-dark);
    background-color: var(--bg-light);
}

[data-role=page].ui-page:not(.lighttext) * #recordControlsWrapper > [data-role=controlgroup] >:first-child > a,
[data-role=page].ui-page:not(.lighttext) * #recordControlsWrapper > [data-role=controlgroup] >:first-child > o {
    color: var(--trebble-accent);
}

[data-role=page].ui-page:not(.lighttext) * #recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .pe-7s-micro,
[data-role=page].ui-page:not(.lighttext) * #recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .ion-stop{
    color: var(--color-gray-100);
    font-size: var(--text-4xl);
    background: var(--gradient-primary-alt);
    border: var(--border-0);
}

body.darkTheme [data-role=page].createCapsulePage * #recordControlsWrapper > [data-role=controlgroup] >:first-child > a,
body.darkTheme [data-role=page].createCapsulePage * #recordControlsWrapper > [data-role=controlgroup] >:first-child > o,
[data-role=page].createCapsulePage.lighttext.transparent * #recordControlsWrapper > [data-role=controlgroup] >:first-child > a,
[data-role=page].createCapsulePage.lighttext.transparent * #recordControlsWrapper > [data-role=controlgroup] >:first-child > o{
  color: white;
}

[data-role=page].createCapsulePage * #recordControlsWrapper > [data-role=controlgroup] >:first-child > a,
[data-role=page].createCapsulePage * #recordControlsWrapper > [data-role=controlgroup] >:first-child > o {
  background-color: transparent;
}
#recordControlsWrapper > [data-role=controlgroup] >:first-child > a,
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o {
    width: var(--size-third);
}
#recordControlsWrapper > [data-role=controlgroup] >:first-child > a#showUploadSectionButton,
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o#showUploadSectionButton {
    display: none;
}
#recordControlsWrapper.uploadAvailable > [data-role=controlgroup] >:first-child > a,
#recordControlsWrapper.uploadAvailable > [data-role=controlgroup] >:first-child > o {
    width: var(--size-full);
    display: flex;
    display: -ms-flex;
    display: -moz-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    flex-direction: row;
    -moz-flex-direction: row;
}
#recordProgressContainer #playButton:hover{
  background-color:transparent;
  color: white;
  border-color:transparent;
}

#recordProgressContainer #playButton{
    overflow: visible;
}

#recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .ion-ios7-close-empty {
    font-size: var(--text-5xl);
}
.popupContent> [data-role=header]+div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock,
.createCapsulePage div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock {
    height: var(--size-full);
    display: flex;
    display: -ms-flex;
    display: -moz-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    flex-direction: column;
    -moz-flex-direction: column;

}
.popupContent> [data-role=header]+div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock > .uploadZonePlaceHolder ,
.createCapsulePage div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock > .uploadZonePlaceHolder,
body:not(.darkTheme) .createCapsulePage div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock > .uploadZonePlaceHolder{
    min-height: var(--size-200);
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    background-color: var(--color-white-10);
    cursor: pointer;
    width: var(--size-full);
    border: var(--border-2) dashed var(--color-white-10);
}

body:not(.darkTheme) .createCapsulePage.ui-page:not(.lighttext) div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock > .uploadZonePlaceHolder{
    background-color: white;
    border: var(--border-2) dashed var(--color-black-10);
}

.popupContent > [data-role=header]+div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock > .uploadZonePlaceHolder:hover,
.createCapsulePage div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock > .uploadZonePlaceHolder:hover,
.createCapsulePage.ui-page:not(.lighttext) div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock > .uploadZonePlaceHolder:hover,
body.darkTheme .createCapsulePage div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock > .uploadZonePlaceHolder:hover,
.createCapsulePage.ui-page.lighttext div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem > #uploadBlock > .uploadZonePlaceHolder:hover{
    background-color: var(--trebble-primary-100);
    color: var(--color-black) !important;
    border: var(--border-2) dashed var(--trebble-primary-200);
}




.orrecordsection{
    margin: var(--space-sm) var(--size-none);
}

.orrecordsection .orlabel{
    font-weight: bold;
    font-size: var(--text-lg-px);
    margin: var(--space-sm) var(--size-none);
}

.orrecordsection   .actionButton{
    color: var(--trebble-accent);
    background-color: white;
    width: var(--size-full);
    box-sizing: border-box;
    margin: var(--size-none);
}
.orrecordsection   .actionButton:hover,
.orrecordsection   .actionButton:active {
  color: white;
  background-color: transparent;
}
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .fontello-icon-play-1,
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .fontello-icon-pause-1,
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o >.ion-ios7-play,
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .ion-ios7-pause {
    font-size: var(--text-4xl);
}
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .ion-ios7-trash  {
    font-size: var(--text-2xl);
}
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o >.ion-ios7-circle-filled,
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .pe-7s-micro,
[data-role=page] * #recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .ion-ios7-circle-filled,
[data-role=page] * #recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .pe-7s-micro,
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o >.ion-stop,
[data-role=page] * #recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .ion-stop  {
 color: white;
 font-size: var(--text-6xl);
 border: var(--border-2) solid white;
 border-radius: 50%;
 padding: var(--border-4);
 width: var(--size-50);
 display: flex;
 display: -ms-flex;
 display: -moz-flex;
 justify-content: center;
 -webkit-justify-content: center;
 -moz-justify-content: center;
 -ms-justify-content: center;
 align-items: center;
 -moz-align-items: center;
 -ms-align-items: center;
 flex-direction: row;
 -moz-flex-direction: row;
 height: var(--size-50);
 flex: 0 0 50px;
 margin: var(--size-none);
 background-color: white;
 color: var(--trebble-accent);
}
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .ion-ios7-circle-filled:active, 
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o > .ion-stop:active{

    color: white;
}
#recordControlsWrapper > [data-role=controlgroup] >:first-child > o.hidden{
  display: none;
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t[class*="ion"] {
    line-height: var(--line-height-5xl);
    font-size: var(--text-3xl);
    /*height: 100%;*/
}
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a  t.fontello-icon-play-1,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a  t.fontello-icon-pause-1,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton  t.ion-ios7-play,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a  t.ion-loading-c,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton  t.ion-ios7-pause,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton  t.pe-7s-play,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton  t.ion-ios7-pause-outline {
    line-height: var(--line-height-4xl);
    font-size: var(--text-4xl);
    /*height: 100%;*/
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a t.fontello-icon-play-1,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a t.fontello-icon-pause-1,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton t.ion-ios7-play,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton t.ion-ios7-pause,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-loading-c,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton t.pe-7s-play,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton t.ion-ios7-pause-outline {
    line-height: 47px;
    font-size: var(--text-5xl);
    /*height: 100%;*/
}
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a t.fontello-icon-play-1,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a t.fontello-icon-pause-1,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton t.ion-ios7-play,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton t.ion-ios7-pause,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a t.fontello-icon-play-1,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a t.fontello-icon-pause-1,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a t.ion-loading-c,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a#playButton t.ion-ios7-play,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a#playButton t.ion-ios7-pause,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton t.pe-7s-play,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#playButton t.ion-ios7-pause-outline,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a#playButton t.pe-7s-play,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a#playButton t.ion-ios7-pause-outline {
    line-height: 47px;
    font-size: var(--text-2xl);
    /*height: 100%;*/
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.fontello-icon-to-end-alt {
    line-height: var(--line-height-5xl);
    font-size: var(--text-xl);
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.fontello-icon-to-start-alt {
    line-height: var(--line-height-5xl);
    font-size: var(--text-xl);
}
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.fontello-icon-arrows-cw,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-repeat {
    line-height: var(--line-height-4xl);
    font-size: var(--text-lg);
    color: var(--color-white-40);
    /*height: 100%;*/
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.fontello-icon-arrows-cw,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-repeat {
    line-height: var(--line-height-4-8xl);
    font-size: var(--text-lg);
    color: var(--color-white-40);
    /*height: 100%;*/
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.fontello-icon-arrows-cw:active,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-repeat:active {
    /* line-height: 2.35em; */
    
    height: var(--size-full);
    opacity: 1;
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.fontello-icon-shuffle,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-shuffle {
    line-height: var(--line-height-4-8xl);
    font-size: var(--text-lg);
    /*height: 100%;*/
    color: var(--color-white-40);
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.fontello-icon-shuffle:active,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-shuffle:active {
    opacity: 1;
    /*height: 100%;*/
}
a.largeMenuButton.ui-link,
a.largeMenuButton.ui-link:hover {
    height: var(--size-30);
    margin: var(--size-none);
    margin-right: var(--space-2xs);
    margin-left: var(--space-2xs);
    font-weight: 300;
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
    border: var(--border-2) solid var(--trebble-primary);
    color: white;
    line-height: var(--line-height-3xl);
    font-size: var(--text-sm-px);
    text-align: center;
    display: block;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    display: -webkit-flex;
    flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    cursor: pointer;
}
#LoginWithFacebookBtn,
#SignUpWithFacebookBtn {
    background-color: var(--color-blue-600);
    border-color: var(--color-blue-600);
}
body.browser.mobileweb  #LoginWithFacebookBtn:hover,
#LoginWithFacebookBtn:active,
body.browser.mobileweb  #SignUpWithFacebookBtn:hover, 
#SignUpWithFacebookBtn:active{
    background-color: var(--trebble-primary);
    /*color:var(--text-dark);
    border-color: var(--text-dark);*/
    color:white;
    border-color: var(--trebble-primary);
}
#LoginWithGoogleBtn,
#SignUpWithGoogleBtn{
    color: var(--text-dark);
    background-color: white;
    border-color: var(--text-dark);

}



#LoginWithAppleBtn,
#SignUpWithAppleBtn{
    color: var(--text-light);
    background-color: var(--color-black);
    border-color: var(--color-black);

}

[data-role=popup] #LoginWithGoogleBtn,
[data-role=popup] #SignUpWithGoogleBtn{
    border-color: transparent;
}


[data-role=popup] #LoginWithAppleBtn,
[data-role=popup] #SignUpWithAppleBtn{
    border-color: transparent;
}


body.browser.mobileweb  #LoginWithGoogleBtn:hover,
#LoginWithGoogleBtn:active,
body.browser.mobileweb  #SignUpWithGoogleBtn:hover, 
#SignUpWithGoogleBtn:active{
    color: white;
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
}
#LoginWithGoogleBtn .googleIcon,
#SignUpWithGoogleBtn .googleIcon{
    width: var(--size-20);
    height: var(--size-20);
    background: url(7a2a1f583011f6f21be9.png) no-repeat;
    background-size: contain;
    padding: var(--size-none) var(--border-6);
}



body.browser.mobileweb  #LoginWithAppleBtn:hover,
#LoginWithAppleBtn:active,
body.browser.mobileweb  #SignUpWithAppleBtn:hover, 
#SignUpWithAppleBtn:active{
    color: white;
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
}
#LoginWithAppleBtn .appleIcon,
#SignUpWithAppleBtn .appleIcon{
    width: var(--size-20);
    height: var(--size-20);
    background: url(93cf1000201447a708b9.png) no-repeat;
    background-size: contain;
    padding: var(--size-none) var(--border-6);
}


#onboardingSignupPage .chooseProfileTypeWrapper a.actionButton,
#onboardingSignupPage .welcomeMessageWrapper a.actionButton,
#trebbleSetup .chooseProfileTypeWrapper a.actionButton,
#trebbleSetup .welcomeMessageWrapper a.actionButton,
#journeyCreation .chooseProfileTypeWrapper a.actionButton,
#journeyCreation .welcomeMessageWrapper a.actionButton,
#loginForm > a.actionButton,
#SignUpForm > a.actionButton {
    margin-top: var(--text-3xs);
    font-size: var(--text-base);
    margin-bottom: var(--text-3xs);
    flex: 0 0 54px;
    -webkit-flex: 0 0 54px;
    -ms-flex: 0 0 54px;
    box-sizing: border-box;
    width: calc(var(--size-full) - var(--space-lg));
}
.google_button_container,
#loginForm .formField,
#SignUpForm .formField{
    width: calc(var(--size-full) - var(--space-lg)) !important;
}


#loginForm .formField  input + label.active::after,
#SignUpForm .formField input + label.active::after{
    width: 100%;
    margin-left: calc(var(--space-lg) / 2) !important;
    white-space: break-spaces;
}

#SignUpForm .google_button_container{
    padding: var(--size-none) var(--space-2xs);
}

#SignUpForm .google_button_container > div{
    width: var(--size-full);
}

.google_button_container [role=button]{
    border-radius: 0px;
    height: var(--size-50);
    border-width: var(--border-2);
}

.google_button_container [role=button] div span{
    font-family: var(--trebble-font),sans-serif;
    font-weight: bold;
    /*color: var(--color-black);*/
    font-size: var(--text-base-px);
}

#loginForm > a.actionButton.disabled,
#SignUpForm > a.actionButton.disabled,
.feedbackFormWrapper a.actionButton.disabled,
body.browser.mobileweb  .feedbackFormWrapper a.actionButton:hover.disabled,
.feedbackFormWrapper a.actionButton:active.disabled{
    cursor: default;
    color: var(--color-gray-550);
    background-color: var(--color-white);
    border: var(--border-2) solid var(--color-gray-100);
}
#loginSigninSpacerText {
    color: var(--text-dark);
    display: flex;
    font-size: var(--text-sm);
    padding: var(--space-2xs);
    display: -webkit-flex;
    box-sizing: border-box;
    justify-content: center;
    -webkit-justify-content: center;
}

#loginSigninSpacerText.forgotPasswordLink,
#showExternalSignupOptionsBtn{
  cursor:pointer;
  font-weight:bold;
  color: var(--trebble-primary);
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  text-decoration: underline;
}
.largeMenuButton.topsticky,
.actionButton.topsticky {
    top: 60px;
    padding: var(--space-2xs);
    letter-spacing: 0.13em;
}
a.largeMenuButton.ui-link:active {
  background-color: transparent;
  /* border-color: var(--trebble-primary-dark); */
  color: var(--trebble-primary);
  border: var(--border-2) solid var(--trebble-primary);
}
body.browser.mobileweb a.largeMenuButton.ui-link:hover {
    cursor: pointer;
    color: var(--trebble-primary);
    background-color: transparent;
    border: var(--border-2) solid var(--trebble-primary);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: all;
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child,
#recordControlsWrapper > [data-role=controlgroup] >:first-child {
    width: var(--size-full);
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: var(--size-full);
}

#playerControlsWrapper{
    height: var(--size-80);
    width: var(--size-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
#playerSocialInfoWrapper > div#playerSongMoreSocialWrapper * .owl-theme .owl-controls {
    margin-top: var(--size-none);
}
.basicArtistInfo * .owl-theme .owl-controls {
    margin-top: var(--space-2xs);
}
.userProfileDetailsPage * .basicArtistInfo * .owl-theme .owl-controls {
    margin-top: var(--size-none);
}
.userProfileDetailsPage #followedFollowedInfoBox,
.userProfileDetailsPage #followedFollowedInfoBox ~ .separator,
.userProfileDetailsPage #followingsFollowedInfoBox,
.userProfileDetailsPage #followingsFollowedInfoBox ~ .separator,
.userProfileDetailsPage #trebblesFollowedInfoBox ~ .separator,
.userProfileDetailsPage #songsInLibraryInfoBox,
.userProfileDetailsPage #songsInLibraryInfoBox ~ .separator,
/*.userProfileDetailsPage .userInfo #followingBtn,
.userProfileDetailsPage .userInfo #followBtn,
.userProfileDetailsPage .userInfo #buyNowBtn*/

.userProfileDetailsPage[profile_type=journey_creator]  #songsAndTrebbleSummaryWrapper,
.userProfileDetailsPage[profile_type=shortcast_creator]  #songsAndTrebbleSummaryWrapper,
body.browser > .userProfileDetailsPage[is_creator=false] * #userOverviewInfoWrapper > #capsuleHistoryWrapper,
body.browser > .userProfileDetailsPage #sendCmailToUserBtn,
body.browser > .userProfileDetailsPage #shareUserCmailUrlBtn,
body.browser > .userProfileDetailsPage[is_creator=false] * #userOverviewInfoWrapper > #songsAndTrebbleSummaryWrapper, 
body.browser > .userProfileDetailsPage[is_creator=false] * #userOverviewInfoWrapper > #songsAndTrebbleSummaryWrapper > .recently_added_songs_list_wrapper,
body.browser > .userProfileDetailsPage[is_creator=false] * #userOverviewInfoWrapper > #songsAndTrebbleSummaryWrapper > .top_song_list_wrapper{
    display:none !important;
}

.userProfileDetailsPage .listHeader{
    justify-content: center;
}

#playerSocialInfoWrapper > div#playerSongMoreSocialWrapper * .owl-theme .owl-controls .owl-page span {
    width: var(--size-4);
    height: var(--size-4);
    margin: var(--border-2) var(--border-3);
    border-radius: 8px;
    border: var(--border-2) solid white;
    opacity: 1;
    background-color: transparent;
}
.basicArtistInfo * .owl-theme .owl-controls .owl-page span {
    width: var(--size-6);
    height: var(--size-6);
    margin: var(--border-2) var(--border-3);
    border-radius: 6px;
    background-color: white;
    border: var(--border-2) solid white;
    opacity: 1;
    background-color: transparent;
}
#recordProgressContainer {
    position: relative;
}
#recordProgressContainer > svg {
    width: var(--size-full);
    display: block;
    position: absolute;
}
.progressbar-text {
    font-size: var(--text-5xl);
    font-weight: 300;
    padding: var(--size-none);
    margin: var(--size-none);
    transform: translate(-50%, -50%);
    color: var(--color-orange-300);
    text-align: center;
    position: absolute;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
}

.playlistShortcutButtonsWrapper {
    flex: 0 0 45px;
    -webkit-flex: 0 0 45px;
    width: var(--size-full);
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    z-index: 10;
}
.playlistShortcutButtonsWrapper > #showStatistics,
.playlistShortcutButtonsWrapper > #shareTrebbleBtn {
    /*border-radius: 50%;*/
    color: white;
    font-size: var(--text-3xl);
    line-height: var(--line-height-3xl);
    padding: var(--border-2);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    width: var(--size-32);
    padding: var(--size-none);
    font-weight: 300;
    height: var(--size-32);
    border-color: transparent;
}
.darktext .playlistShortcutButtonsWrapper > #showStatistics,
.darktext  .playlistShortcutButtonsWrapper > #shareTrebbleBtn {

  color: var(--text-dark);

}

.darktext .playlistShortcutButtonsWrapper > #showStatistics:active,
.darktext  .playlistShortcutButtonsWrapper > #shareTrebbleBtn:active,
body.browser.mobileweb .darktext .playlistShortcutButtonsWrapper > #showStatistics:hover,
body.browser.mobileweb .darktext  .playlistShortcutButtonsWrapper > #shareTrebbleBtn:hover {
  color: var(--trebble-primary) !important;
}

.playlistShortcutButtonsWrapper.itemsAlignedRight {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}
.transparent_button,
.button {
    border: var(--border-2) solid white;
    border-radius: 1px;
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    padding-top: var(--border-2);
    padding-bottom: var(--border-2);
    height: var(--size-32);
    margin: var(--size-none);
    margin-left: var(--space-2xs);
    font-weight: bold;
    color: white;
    line-height: var(--line-height-3-2xl);
    font-size: var(--text-sm-px);
    text-align: center;
    display: block;
    cursor: pointer;
}

body.browser > [data-role=page] * .transparent_button #loadingImg,
body.browser > [data-role=page] * .button #loadingImg{
    width: var(--size-20);
    height: var(--size-20);
    margin: var(--size-none);
}


.darktext .transparent_button{
  color: var(--text-dark);
  border-color: var(--text-dark);
}
body.browser.mobileweb .darktext .transparent_button:hover,
.darktext .transparent_button:active{
  color: var(--trebble-primary) !important;
  border-color: white !important;
  background-color: white;
}

.transparent_button.toggled {
    color: var(--trebble-primary); 
    
    font-weight: bold;
    /* background-color: var(--trebble-primary); */
    
    border: var(--border-2) solid var(--trebble-primary);
}
.userProfileDetailsPage .userInfo * #followingBtn,
.userProfileDetailsPage .userInfo * #purchasedBtn,
.userProfileDetailsPage .userInfo * #followBtn,
.trebbleSubscribeSuggestionContent #followBtn,
.trebbleSubscribeSuggestionContent #buyNowBtn {
    min-width: var(--size-100);
    margin: var(--size-none);
    flex: 0 0 30px;
    -webkit-flex: 0 0 30px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    box-sizing: border-box;
    margin: var(--space-2xs);
    color: white;
    border-color: var(--trebble-primary);
    background-color:var(--trebble-primary);
}

body.browser.mobileweb  .userProfileDetailsPage * #followingBtn:hover,
body.browser.mobileweb  .userProfileDetailsPage * #purchasedBtn:hover,
body.browser.mobileweb  .userProfileDetailsPage * #followBtn:hover ,
body.browser.mobileweb  .userProfileDetailsPage * #buyNowBtn:hover ,
.userProfileDetailsPage * #followingBtn:active,
.userProfileDetailsPage * #purchasedBtn:active,
.userProfileDetailsPage * #followBtn:active ,
.userProfileDetailsPage * #buyNowBtn:active ,
body.browser.mobileweb .trebbleSubscribeSuggestionContent #followBtn:hover,
body.browser.mobileweb .trebbleSubscribeSuggestionContent #buyNowBtn:hover,
.trebbleSubscribeSuggestionContent #followBtn:active,
.trebbleSubscribeSuggestionContent #buyNowBtn:active{
    color:var(--trebble-primary) !important;
    border-color: var(--trebble-primary) ;
    background-color: transparent;
}

body.browser.mobileweb #followingBtn:hover:before,
body.browser.mobileweb #purchasedBtn:hover:before{
  /*content: '\f097';*/
}

.playlistItem.withLargeAlbumArt #followingBtn:hover:after,
.playlistItem.withLargeAlbumArt #purchasedBtn:hover:after{
    padding: 0 var(--space-lg);
}

body.browser.mobileweb  #followingBtn:hover > span{
  display: none;
}

body.browser.mobileweb .userProfileDetailsPage .userInfo #followingBtn:hover:after{
   content: "Unfollow";
}
body.browser.mobileweb  #followingBtn:hover:after{
   content: "Unsubscribe";
}

body.browser.mobileweb[language^=fr] .userProfileDetailsPage #followingBtn:hover:after{
    content: "Cesser de suivre";
}

body.browser.mobileweb[language^=fr] #followingBtn:hover:after{
    content: "Se désabonner";
}

body.browser.mobileweb .journeyCard #followingBtn:hover:after,
body.browser.mobileweb .journeyPage #followingBtn:hover:after{
   content: "Unsubscribe";
}

body.browser.mobileweb[language^=fr] .journeyCard #followingBtn:hover:after,
body.browser.mobileweb[language^=fr] .journeyPage #followingBtn:hover:after{
    content: "Se désabonner";
}

#transcribe_and_edit_audio_btn.hightlightBtn,
#transcribe_btn.hightlightBtn{
    max-width: var(--size-400);
    padding: var(--size-none) var(--space-md);
    color: var(--trebble-accent) !important;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight: bold;
}

.ui-page[data-role=page]:not(.lighttext) #transcribe_and_edit_audio_btn.hightlightBtn,
.ui-page[data-role=page]:not(.lighttext) #transcribe_btn.hightlightBtn{
    background: var(--gradient-primary-alt);
    color: white !important;
    border: var(--border-0);
    font-weight: 400;
}
.ui-page[data-role=page]:not(.lighttext) #transcribe_and_edit_audio_btn.hightlightBtn .label,
.ui-page[data-role=page]:not(.lighttext) #transcribe_btn.hightlightBtn .label{
    font-weight: bold;
}

#continue_with_no_edit_btn.hightlightBtn{
    background-color: transparent;
    border: var(--border-2) solid white;
    max-width: -moz-fit-content;
    max-width: fit-content;
}

#continue_with_no_edit_btn.hightlightBtn .label,
body.darkTheme .ui-page:not(.lighttext) #continue_with_no_edit_btn.hightlightBtn .label{
    color: white;
}

.ui-page:not(.lighttext) #continue_with_no_edit_btn.hightlightBtn .label{
    color:black
}

.hightlightBtn,
.playlistDetailsPage #playTrailerBtn,
.playlistDetailsPage #followBtn,
#redeemButton,
.playlistDetailsPage #buyNowBtn,
.playlistDetailsPage #followingBtn,
.playlistDetailsPage #purchasedBtn,
.trebbleSubscribeSuggestionContent #followBtn,
.trebbleSubscribeSuggestionContent #buyNowBtn{
  /*font-size: var(--text-xs);*/
  font-family: var(--trebble-font),sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: transparent;
  font-weight: bold;
  text-transform: uppercase;
  box-sizing: border-box;
  min-width: var(--size-180);
}

.hightlightBtn span.label{
    font-family: var(--trebble-font),sans-serif;
    text-transform: uppercase;
}

.journey_summary_detail,
.playlistDetailsPage  .listeningInstructionsBox,
.listeningInstructionWrapper  .listeningInstructionsBox{
    z-index: 0;
    text-align: center;
    font-size: 90%;
    max-width:var(--size-500);
    background-color: var(--color-white-10);
    padding: var(--space-sm);
}

.journey_summary_detail{
   font-size: 100%;
   margin: var(--space-sm) auto;
   max-width: var(--size-400);
}

.listeningInstructionWrapper  .listeningInstructionsBox{
    margin: var(--size-none);
    background-color: transparent;
    padding: var(--space-sm);
}
.playlistDetailsPage  .listeningInstructionsBox{
    margin: var(--space-lg) var(--space-sm) var(--space-2xs);
    color: var(--text-light);
    box-sizing: border-box;
}

.operationProgressPopupContent  .listeningInstructionsBox{
    background-color: var(--color-white-10);
    padding: var(--space-sm);
    
}



.playlistDetailsPage  .listeningInstructionsBox .utterance{
    font-weight: bold;
}
#redeemButton,
.playlistDetailsPage #followBtn,
.playlistDetailsPage #buyNowBtn{
   color: white;
   border-color: white;
}

#redeemButton
.playlistDetailsPage #followBtn,
.playlistDetailsPage #buyNowBtn{
  color: var(--trebble-primary);
  border-color: var(--trebble-primary);
}

/*body.browser.mobileweb .playlistDetailsPage #followBtn:hover,
body.browser.mobileweb .playlistDetailsPage #followingBtn:hover,
.playlistDetailsPage #followBtn:active,
.playlistDetailsPage #followingBtn:active,*/
body.browser.mobileweb #redeemButton:hover,
body.browser.mobileweb .trebbleSubscribeSuggestionContent #followBtn:hover,
body.browser.mobileweb .trebbleSubscribeSuggestionContent #buyNowBtn:hover,
#redeemButton:active,
.trebbleSubscribeSuggestionContent #followBtn:active,
.trebbleSubscribeSuggestionContent #buyNowBtn:active {
    color: white!important;
    border-color: var(--trebble-primary) ;
    background-color: var(--trebble-primary);
}

.hightlightBtn:before,
#redeemButton:before,
.playlistDetailsPage #followBtn:before,
.playlistDetailsPage #buyNowBtn:before,
.playlistDetailsPage #followingBtn:before,
.playlistDetailsPage #purchasedBtn:before,
.trebbleSubscribeSuggestionContent #followBtn:before,
.trebbleSubscribeSuggestionContent #buyNowBtn:before{
  font-size: var(--text-2xl);
  vertical-align: middle;
  line-height: var(--line-height-3-2xl);
}
.playlistShortcutButtonsWrapper > .left {
    margin-left: var(--space-2xs);
}
.playlistShortcutButtonsWrapper > .right {
    margin-right: var(--space-2xs);
}
@media (min-width: 500px), (min-height: 500px) and (orientation: landscape){
    [data-role=page].createCapsulePage.lighttext.transparent [data-role=header] * #nextButton,
    [data-role=page].createCapsulePage.lighttext.transparent [data-role=header] * #saveButtonIcon,
    body.darkTheme [data-role=page].createCapsulePage [data-role=header] * #nextButton,
    body.darkTheme [data-role=page].createCapsulePage [data-role=header] * #saveButtonIcon{
        color: var(--trebble-accent) !important;
        background-color: white;
    }
}

.createCapsulePage.lighttext.transparent [data-role=header] * #nextButton:not(.trebble_disabled):hover,
.createCapsulePage.lighttext.transparent [data-role=header] * #nextButton:not(.trebble_disabled):active,
.createCapsulePage.lighttext.transparent [data-role=header] * #saveButtonIcon:not(.trebble_disabled):hover,
.createCapsulePage.lighttext.transparent [data-role=header] * #saveButtonIcon:not(.trebble_disabled):active,
.createCapsulePage.lighttext.transparent [data-role=header] * #doneRecordingButtonIcon:not(.trebble_disabled):hover,
.createCapsulePage.lighttext.transparent [data-role=header] * #doneRecordingButtonIcon:not(.trebble_disabled):active{
    color: white!important;
    background-color: transparent;
}
[data-role=header] * #createDraftButton,
[data-role=header] * #publishButton,
[data-role=header] * #previewJourneyButton,
[data-role=header] * #revertToDraftButton,
[data-role=header] * #archiveBtn,
[data-role=header] * #removeFromArchiveButton{
 font-size: var(--text-2xl);
}
[data-role=header] * #editButton,

[data-role=header] * #menuOptionButton,
[data-role=header] * #filterButton,
[data-role=header] * #deleteButton,
[data-role=header] * #saveButtonIcon,
[data-role=header] * #doneRecordingButtonIcon,
[data-role=header] * #showRecordSectionButton.tag.actionButton,
[data-role=header] * #nextButton.tag.actionButton,
[data-role=header] * #showUploadSectionButton.tag.actionButton,
[data-role=header] * #shareTrebbleBtn {
    color: white;
    font-size: var(--text-4xl);
    line-height: var(--line-height-5-1xl);
    padding-right: var(--border-3);
    padding-left: var(--border-3);
    padding: var(--size-none);
    /*height: 100%;*/
    height: calc(var(--size-icon-lg) - var(--space-2xs));
    display: block;
    width: var(--size-50);
    border: var(--border-0);
    margin: var(--border-4) var(--size-none);
}


[data-role=header] * #menuOptionButton{
  font-size: var(--text-3xl);
}
[data-role=header] * #nextButton.tag.actionButton{
    font-size: var(--text-6xl);
}

[data-role=header] * a.actionButton.tag,
[data-role=header] * #showRecordSectionButton.tag.actionButton,
[data-role=header] * #nextButton.tag.actionButton,
[data-role=header] * #showUploadSectionButton.tag.actionButton{
   display: flex;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
   justify-content: center;
   -webkit-justify-content: center;

}

[data-role=header] * #loadingIndicatorBtn,
[data-role=header] * #editButton.disabled,
[data-role=header] * #menuOptionButton.disabled,
[data-role=header] * #filterButton.disabled,
[data-role=header] * #deleteButton.disabled,
[data-role=header] * #saveButtonIcon.disabled,
[data-role=header] * #doneRecordingButtonIcon.disabled,
[data-role=header] * .ui-btn.disabled{
  opacity: 0.5;
  cursor: default;
  background-color: transparent;
}

.darktext > [data-role=header] * #loadingIndicatorBtn,
.darktext > [data-role=header] * #editButton,
.darktext > [data-role=header] * #menuOptionButton,
.darktext > [data-role=header] * #filterButton,
.darktext > [data-role=header] * #deleteButton,
.darktext > [data-role=header] * #saveButtonIcon,
.darktext > [data-role=header] * #doneRecordingButtonIcon {
    color: var(--text-dark) !important;
}
.darktext > [data-role=header] * #editButton:active,
.darktext > [data-role=header] * #menuOptionButton:active,
.darktext > [data-role=header] * #filterButton:active,
.darktext > [data-role=header] * #deleteButton:active,
.darktext > [data-role=header] * #saveButtonIcon:active,
.darktext > [data-role=header] * #doneRecordingButtonIcon:active,
body.browser.mobileweb .darktext > [data-role=header] * #editButton:hover,
body.browser.mobileweb .darktext > [data-role=header] * #menuOptionButton:hover,
body.browser.mobileweb .darktext > [data-role=header] * #filterButton:hover,
body.browser.mobileweb .darktext > [data-role=header] * #deleteButton:hover,
body.browser.mobileweb .darktext > [data-role=header] * #saveButtonIcon:hover,
body.browser.mobileweb .darktext > [data-role=header] * #doneRecordingButtonIcon:hover {
  color: white !important;
}

.trebbleEditInfoPage.validating #loadingIndicatorBtn{
    display: block;
    font-size: var(--text-3xl-px);
}
.trebbleEditInfoPage.validating #loadingIndicatorBtn:hover,
.trebbleEditInfoPage.validating #loadingIndicatorBtn:active{
    background-color: transparent;
    border: var(--border-0);
    color: var(--text-dark) !important;
}

.trebbleEditInfoPage:not(.validating) #loadingIndicatorBtn,
.trebbleEditInfoPage.validating #saveButtonIcon{
    display: none !important;
}

[data-role=header] * #filterButton {
    font-size: var(--text-lg);
}
[data-role=header] * #deleteButton {
    font-size: var(--text-xl);
}
[data-role=header] * #saveButtonIcon {
    font-size: var(--text-6xl);
}
.bioWrapper * .carouselItem {

}

.carouselItem,
.capsuleCreationWrapper .capsuleInfo,
.capsuleCreationWrapper .languageUsedInAudioFldWrapper
.capsuleCreationWrapper .uploadProgressInfo,
.capsuleCreationWrapper .uploadProgressInfo .progressContentWrapper {
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  text-align: center;
  display: flex;
  display: -moz-flex;
  display: -ms-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  overflow: auto;
  
}

.capsuleCreationWrapper .capsuleInfo,
.capsuleCreationWrapper .languageUsedInAudioFldWrapper{
    display: block;
    
}


.capsuleCreationWrapper .capsuleInfo,
.capsuleCreationWrapper .languageUsedInAudioFldWrapper
.capsuleCreationWrapper  .uploadProgressInfo,
.capsuleCreationWrapper  .uploadProgressInfo .progressBar,
.capsuleCreationWrapper  .uploadProgressInfo .progressContentWrapper {

    width: calc(var(--size-full) - var(--space-lg)); 

}
.capsuleCreationWrapper  .uploadProgressInfo .progressContentWrapper{
    max-width: var(--size-700);
    overflow: hidden;
}

.capsuleCreationWrapper  .uploadProgressInfo{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: var(--size-full);
}

.capsuleCreationWrapper .capsuleInfo,
.capsuleCreationWrapper .languageUsedInAudioFldWrapper{
    width: var(--size-full);
    text-align: justify;
}

.capsuleCreationWrapper .dz-progress{
  display: none;
}

.progressContentWrapper #percentageProgress{
    font-weight: 900;
    font-size: var(--text-8xl-px);
}
.progressContentWrapper #progressMessage{
    font-weight: 600;
    font-size: var(--text-3xl-px);
}
.carouselItem > .transparent_button {
  width: 30%;
  max-width: var(--size-200);
}

.bioWrapper * .carouselItem > .textContent {
    /* white-space: nowrap; */
}

.bioWrapper * .carouselItem > .textContent  i{
    margin-right: var(--space-2xs);
}
.carouselItem > .textContent {
    text-align: center;
    width: var(--size-full);
    flex-direction: column;
    display: flex;
    display: -webkit-flex;
    margin: var(--border-6);
    font-size: var(--text-sm);
    max-width: var(--size-700);
}
.carouselWrapper.capsuleCreationWrapper,
.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer,
.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper,
.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item {
    height: var(--size-full);
}
.popupContent > [data-role=header] + div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem:first-child {
    height: var(--size-full);
    flex-direction: column;
    overflow: auto; 
}
.popupContent > [data-role=header] + div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem:first-child >.flexContentCenteringBox {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}
.popupContent > [data-role=header] + div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem >:first-child {
    width: var(--size-full);
    margin-top: var(--text-7xl-px);
}
.popupContent > [data-role=header] + div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > * label,
.popupContent > [data-role=header] + div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > * span {
    width: var(--size-full);
    font-weight: 300;
    font-size: var(--text-md);
}
.popupContent > [data-role=header] + div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem * #comment,
.popupContent > [data-role=header] + div.carouselWrapper.capsuleCreationWrapper > .owl-wrapper-outer > .owl-wrapper > .owl-item > .carouselItem * #categoryFld {
    font-size: var(--text-lg-px) !important;
    border: var(--border-0) none var(--text-light)!important;
    overflow: hidden;
    outline: none;
    background-color: var(--color-white-10);
    color: white;
    font-weight: 300;
    max-width: var(--size-700);
}
#recordingBlock{
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    flex-direction: column;
    -moz-flex-direction: column;
    height: calc(var(--size-full) - var(--text-7xl-px));
    width: var(--size-full);
}

.capsuleCreationWrapper #showNotesToggleBox{

    display: flex;
    max-width: var(--size-300);
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    height: var(--size-40);
    margin: var(--space-2xs) auto;

}

.capsuleCreationWrapper #showNotesToggleBox .input_block{
    margin: auto var(--size-none);
    display: flex;
    justify-content: center;
    align-items: center;
}

.capsuleCreationWrapper  #noteSection{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    flex-direction: column;
    max-width: var(--size-800);

}

.capsuleCreationWrapper  #noteSection .note_field_wrapper{
    flex:1 1 auto;
}

.capsuleCreationWrapper  #noteSection .note_field_wrapper textarea{
    width: calc(var(--size-full) - var(--text-xs));
    height: calc(var(--size-full) - var(--space-lg)) !important;
    font-size: var(--text-md-px);
    overflow: auto;
    background-color: var(--color-white-10);
}
.capsuleCreationWrapper  #noteSection .note_field_wrapper textarea::-moz-placeholder{
    color: white;
}
.capsuleCreationWrapper  #noteSection .note_field_wrapper textarea::placeholder{
    color: white;
}

.capsuleCreationWrapper  #noteSection .red_recording_circle,
.capsuleCreationWrapper  .progressbar-text .red_recording_circle{
    width: var(--size-20);
    height: var(--size-20);
    background-color: var(--color-error-bright);
    border-radius: 50%;
    display: inline;
    margin: var(--size-none) var(--space-2xs);
    flex: 0 0 20px;
}
/*
.capsuleCreationWrapper  .progressbar-text .red_recording_circle{
   margin: var(--size-none);
   margin-right: var(--space-2xs);
   }*/


   body #confettiCanvas{
    position: fixed;
    width: var(--size-full);
    height: var(--size-full);
    top: 0px;
    left: 0px;
    z-index: 99999999;
    pointer-events: none;
}


[is-recording=true].createCapsulePage .capsuleCreationWrapper #noteSection .red_recording_circle,
[is-recording=true].createCapsulePage .capsuleCreationWrapper  .progressbar-text .red_recording_circle{
 animation:  blink-animation  0.5s linear infinite alternate;
}

.capsuleCreationWrapper  #noteSection #time_left_to_record{
    color: var(--color-error-bright);
}
.capsuleCreationWrapper  #noteSection #time_left_to_record,
.capsuleCreationWrapper  #noteSection #time_played,
.capsuleCreationWrapper  #noteSection #total_recording_time{
    font-size: var(--text-xl-px);
}

.capsuleCreationWrapper  #noteSection #recording_playback_box,
.capsuleCreationWrapper  #noteSection #recording_time_left_box{
    flex: 0 0 50px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}
.createCapsulePage[is-recording=true] .capsuleCreationWrapper  #noteSection #recording_playback_box,
.createCapsulePage:not([is-recording=true]) .capsuleCreationWrapper  #noteSection #recording_time_left_box{
    display: none;
}
.createCapsulePage:not([is-recording=true]) #peak_meter_container,
body.iosApp .createCapsulePage #peak_meter_container,
body.androidApp .createCapsulePage #peak_meter_container{
    visibility: hidden;
}

#recordControlsWrapper {
    flex: 0 0 64px;
    background-color: transparent;
    height: var(--size-4em);
    width: var(--size-full);
    bottom: 0px;
    -webkit-flex: 0 0 64px;
}
#capsuleLifeSpanFld-button ,
#microphoneFld-button ,
#ttsLanguageFld-button,
#ttsLanguageForVoiceActorFld-button,
#voiceProfileFld-button,
#voiceToneFld-button,
#newsletterEmbedThemeSelector-button,
#publishingSettingFld-button,
#languageUsedInAudioFld-button,
#background_music_category_fld-button,
#schedulingTimezoneFld-button,
#privacySettingFld-button,
#categoryFld-button {
    padding: var(--size-none);
    background-color: var(--color-white-10);
    border-width: var(--border-2);
}
[data-role=page] * #capsuleLifeSpanFld-button,
[data-role=page] * #privacySettingFld-button,
[data-role=page] *#ttsLanguageFld-button,
[data-role=page] *#ttsLanguageForVoiceActorFld-button,
[data-role=page] *#voiceProfileFld-button,
[data-role=page] *#voiceToneFld-button,
[data-role=page] *#newsletterEmbedThemeSelector-button,
[data-role=page] *#publishingSettingFld-button,
[data-role=page] *#languageUsedInAudioFld-button,
[data-role=page] *#background_music_category_fld-button,
[data-role=page] *#schedulingTimezoneFld-button,
[data-role=page] * #categoryFld-button {
    color: var(--text-dark);
}

[data-role=page].createCapsulePage.ui-page:not(.lighttext) *#languageUsedInAudioFld-button:hover{
    border-color: var(--trebble-primary);
}

#capsuleLifeSpanFld-button > span,
#microphoneFld-button > span,
#ttsLanguageFld-button > span,
#ttsLanguageForVoiceActorFld-button > span,
#voiceProfileFld-button > span,
#voiceToneFld-button > span,
#newsletterEmbedThemeSelector-button > span,
#publishingSettingFld-button > span,
#languageUsedInAudioFld-button > span,
#background_music_category_fld-button > span,
#schedulingTimezoneFld-button > span,
#privacySettingFld-button > span,
#categoryFld-button > span {
    font-weight: 400;
    padding: var(--space-3xs) var(--space-sm) var(--size-none) var(--space-sm);
    font-size: var(--text-sm-px);
}
#recordingBlock .trackSelectorBox,
#recordingBlock .track_selector_block_spacer{
    height: var(--size-75);
    flex: 0 0 75px;
    align-items: center;
    display: flex;
    justify-content: center;
}
#recordingBlock .trackSelectorBox .swiper-button-prev,
#recordingBlock .trackSelectorBox .swiper-button-next{
    bottom: auto;
    top: 10px;
    margin-top: var(--size-none);
}
#recordingBlock .trackSelectorBox .songSelectorPlaceholder{
    width: var(--size-full);
}
[data-role=page] * #capsuleLifeSpanFld-button > span,
[data-role=page] * #ttsLanguageFld-button > span,
[data-role=page] * #ttsLanguageForVoiceActorFld-button > span,
[data-role=page] * #voiceProfileFld-button > span,
[data-role=page] * #voiceToneFld-button > span,
[data-role=page] * #newsletterEmbedThemeSelector-button > span,
[data-role=page] * #publishingSettingFld-button > span,
[data-role=page] * #languageUsedInAudioFld-button > span,
[data-role=page] * #background_music_category_fld-button > span,
[data-role=popup] * #background_music_category_fld-button > span,
[data-role=page] * #schedulingTimezoneFld-button > span,
[data-role=page] * #privacySettingFld-button > span,
[data-role=page] * #categoryFld-button > span {
    font-weight: 400;
}
[data-role=page].createCapsulePage * #capsuleLifeSpanFld-button > span,
[data-role=page].createCapsulePage * #ttsLanguageFld-button > span,
[data-role=page].createCapsulePage * #ttsLanguageForVoiceActorFld-button > span,
[data-role=page].createCapsulePage * #voiceProfileFld-button > span,
[data-role=page].createCapsulePage * #voiceToneFld-button > span, 
[data-role=page].createCapsulePage * #newsletterEmbedThemeSelector-button > span,
[data-role=page].createCapsulePage * #publishingSettingFld-button > span,
[data-role=page].createCapsulePage * #languageUsedInAudioFld-button > span,
[data-role=page].createCapsulePage * #background_music_category_fld-button > span,
[data-role=page].createCapsulePage * #schedulingTimezoneFld-button > span,
[data-role=page].createCapsulePage * #privacySettingFld-button > span,
[data-role=page].createCapsulePage * #categoryFld-button > span ,
[data-role=page].createCapsulePage * i.ion-ios7-arrow-down,
[data-role=page].createCapsulePage * i.ion-chevron-down{
  color:white;
}
[data-role=page].createCapsulePage.ui-page:not(.lighttext) * #languageUsedInAudioFld-button > span,
[data-role=page].createCapsulePage.ui-page:not(.lighttext) * i.ion-chevron-down{
    color: var(--trebble-primary);
}

[data-role=page].createCapsulePage.ui-page.record_only #creationModeSelectorWrapper{
    display: none;
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t[class*="ion"] {
    line-height: var(--line-height-5xl);
    font-size: var(--text-xl);
}
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t[class*="ion"] {
    line-height: var(--line-height-4xl);
    /*font-size: var(--text-md);*/
    height: var(--size-full);
}
a#liveLikeButton {
    line-height: var(--line-height-4xl);
    font-size: var(--text-lg);
}
a#infoButton {
    font-size: var(--text-lg);
    line-height: var(--line-height-4xl);
    height: var(--size-full);
}
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#liveLikeButton  > t[class*="ion"]{
    font-size: var(--text-lg);
    line-height: var(--line-height-4xl);
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a#liveLikeButton > t[class*="ion"] {
    font-size: var(--text-3xl);
}
body:not(.embedded) #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#liveLikeButton > t[class*="ion"]{
    font-size: var(--text-md);
}
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t[class*="ion"],
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t[class*="ion"] {
    font-size: var(--text-lg);
}
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#liveLikeButton > t[class*="ion"],
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a#liveLikeButton > t[class*="ion"] {
    font-size: var(--text-xl);
}
body:not(.embedded) #playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#liveLikeButton > t[class*="ion"],
body:not(.embedded) #playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a#liveLikeButton > t[class*="ion"] {
  font-size: var(--text-md);
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-rewind,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-fastforward,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-skipbackward,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-skipforward,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-micro,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-prev,
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-next {
    font-size: var(--text-4xl);
}

#playerControlsWrapper > [data-role=controlgroup] > :first-child > a > t.ion-ios7-mic{
    font-size: var(--text-2xl);
}
#playerControlsWrapper > [data-role=controlgroup] > :first-child > a > t.ion-ios7-paperplane,
#playerControlsWrapper > [data-role=controlgroup] > :first-child > a > t.ion-ios7-paperplane-outline{
    font-size: var(--text-4xl);
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a#shareBtn > t{
    font-size: var(--text-2xl);
    height: var(--size-full);
    display: flex;
    justify-content:center;
    align-items:center;
}
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-rewind,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-fastforward,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-skipbackward,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-skipforward,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-micro,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-mic,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-paperplane,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-paperplane-outline,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-prev,
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-next {
    font-size: var(--text-xl);
}
body.embedded * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#shareBtn > t{
    font-size: var(--text-lg);
}
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-rewind,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-fastforward,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-skipbackward,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-skipforward,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-micro,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-prev,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.pe-7s-next,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t.ion-ios7-rewind,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t.ion-ios7-fastforward,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t.ion-ios7-skipbackward,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t.ion-ios7-skipforward,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t.pe-7s-micro,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t.pe-7s-prev,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t.pe-7s-next {
    font-size: var(--text-3xl);
}
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a#shareBtn > t,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a#shareBtn > t,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-mic,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t.ion-ios7-mic{
    font-size: var(--text-xl);
}
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-paperplane,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t.ion-ios7-paperplane,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t.ion-ios7-paperplane-outline,
#playerFooter.browser * #playerControlsWrapper > [data-role=controlgroup] > a > t.ion-ios7-paperplane-outline{
    font-size: var(--text-4xl);
}
#playerControlsWrapper > [data-role=controlgroup] >:first-child > a > t[class*="ion"].ion-loading-c {
    vertical-align: middle;
    text-align: center;
    line-height: var(--line-height-6xl);
    font-size: var(--text-5xl);
    top: -5px;
    /*height: 100%;*/
    /*height: 60px;*/
    color: var(--text-dark);

}
.textContent .socialInfos {
    align-self: center;
    width: var(--size-full);
    text-overflow: ellipsis;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}
.userProfileDetailsPage .textContent .socialInfos {
    width: var(--size-full);
    height: var(--size-50);
    display: flex;
    display: -webkit-flex;
    max-width: var(--size-700);
}
.userProfileDetailsPage .textContent .socialInfos > div {
  flex: 1 1 auto;
  cursor: pointer;
  -webkit-flex: 1 1 auto;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  height: var(--size-50);
  margin: auto;
  flex-direction: column;
  /* border: var(--border-1) solid var(--color-white-20); */
  /* border-width: var(--border-0); */
  /* border-bottom-width: var(--border-1); */
  /* margin: var(--border-6); */
}
.userProfileDetailsPage .textContent .socialInfos > div.separator {
  vertical-align: middle;
  top: calc(var(--size-half) - var(--space-xs));
  font-size: var(--text-3xl);
  opacity: 0.2;
  min-width: var(--size-10);
  max-width: var(--size-20);
  cursor: default;
}
@media (min-width: 500px), (min-height: 500px) and (orientation: landscape){
   .userProfileDetailsPage .textContent .socialInfos > div {
    letter-spacing:3px;
}
}


@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){

    .transparent_button,
    a.largeMenuButton.ui-link,
    a.largeMenuButton.ui-link:hover {
        font-size: var(--text-sm-px);
    }
    .userProfileDetailsPage .textContent .socialInfos > div {
        font-size: var(--text-xs);
    }

    .userProfileDetailsPage .textContent .socialInfos > div.separator {
        min-width: var(--size-2);
    }
}

body.browser.mobileweb .userProfileDetailsPage .textContent .socialInfos > div:not(.separator):hover,
.userProfileDetailsPage .textContent .socialInfos > div:not(.separator):active {
  background-color: var(--color-white-10);
}

body.browser.mobileweb .userProfileDetailsPage.darktext .textContent .socialInfos > div:not(.separator):hover,
.userProfileDetailsPage .textContent .socialInfos > div:not(.separator):active {
  background-color: var(--color-black-10);
}

.userProfileDetailsPage .textContent .socialInfos > div > .value {
    font-size: var(--text-lg);
    font-weight: 600;
}
.userProfileDetailsPage .textContent {
    display: flex;
    width: var(--size-full);
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 60px;
    display: -webkit-flex;
    -webkit-justify-content: flex-end;
    -webkit-flex: 1 1 60px;
}
div.popupContent.top > div.ui-header[data-role=header] + div,
div.popupContent.top >div > div.ui-header[data-role=header] + div {
    margin-top: var(--text-7xl-px);
}
.ownerDataBubble {
    color: var(--pulse-gray);
    display: block;
    top: 10px;
    position: absolute;
    border-radius: 50%;
    width: var(--size-14);
    height: var(--size-14);
    background-color: var(--pulse-gray);
    right: calc(var(--size-half) - var(--space-xs));
    animation: graypulse 1.3s infinite;
}

#startrecordingcapsuleBtn t{
    margin-right: var(--space-xs);
    font-size: var(--text-xl-px);
}
/*#playerFooter.browser * .ownerDataBubble {
    background-color: var(--bg-light);
    animation: graypulse 1.3s infinite;
    animation: graypulse 1.3s infinite;
}
#playerFooter.browser * .ownerDataBubble {
    background-color: var(--color-gray-300);
    animation: graypulse 1.3s infinite;
    animation: graypulse 1.3s infinite;
    }*/
    .unconsumed.ownerDataBubble {
        background-color: var(--pulse-green);
        animation: greenpulse 1.3s infinite;
    }
    #player .unconsumed.ownerDataBubble{
        animation: graypulse 1.3s infinite;
    }
    [data-role=popup] * .songLibraryWrapper {
        background-color: transparent;
        display: flex;
        flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        line-height: var(--line-height-2xl);
        margin-right: var(--size-none);
        margin-left: 0em;
        padding: 0em;
        /*border-bottom: var(--border-1) solid var(--color-gray-100);*/
        
        border-bottom: var(--border-1) solid var(--color-white-10);
        color: var(--text-dark);
    }
    [data-role=popup] * .songLibraryWrapper > .infiniteListItem {
        background-color: transparent;
    }
    [data-role=popup] * .songLibraryWrapper > .infiniteListItem:active,
    [data-role=popup] * .songLibraryWrapper > .infiniteListItem:active ~  .explicitIconWrapper {
        color: white;
        background-color: var(--trebble-primary);
        border-color: var(--color-white-10);
    }
    [data-role=popup] * .songLibraryWrapper > .infiniteListItem:active > div {
        color: white;
        background-color: var(--trebble-primary);
        border-color: var(--color-white-10);
    }
    [data-role=popup] * .infiniteListInnerContainer > div {
        background-color: transparent;
    }
    [data-role=popup] * #songAddToQueueTooltip {
        background-color: transparent;
    }
    [data-role=popup] * #songLibraryOptionButtuon,
    [data-role=popup] * #songCapsuleOptionButtuon {
        background-color: transparent;
    }
    .songSelectorWidget * #songLibraryOptionButtuon,
    .songSelectorWidget * #songCapsuleOptionButtuon {
        color: white;
    }
    [data-role=popup] * .songTitleLibrary {
        color: white;
    }
    .songSummaryInfo {
        height: 65px;
        display: flex;
    }
    .songAlbumArt {
        background-repeat: no-repeat;
        flex: 0 0 60px;
        -webkit-flex: 0 0 60px;
        background-size: contain;
        background-image: url(53bf41f4ef24a6f45faf.png);
        height: var(--size-60) !important;
        width: var(--size-60) !important;
    }
    .trebbleOptionList * .songTextInfo {
        justify-content: center;
        -webkit-justify-content: center;
    }
    .songTextInfo {
        overflow: hidden;
        padding: var(--space-3xs);
        justify-content: center;
        -webkit-justify-content: center;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        display: -webkit-flex;
    }
    .capsuleCard {
        margin-bottom: var(--border-4);
        background-color: var(--color-white-10);
        box-sizing: border-box;
        padding: var(--border-6);
        /* border: var(--border-1) solid white; */
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        /* height: var(--size-330); */
        
        width: calc(var(--size-full) - var(--space-sm));
        border-radius: 2px;
        max-width: var(--size-430);
        margin: auto;
        margin-top: var(--space-2xs);
        margin-bottom: var(--space-2xs);
        text-align: justify;
    }
    [data-role=page] * .capsuleCard {
      color: black !important;
      /* height: var(--size-470); */
      background-color: white;
      border: var(--border-1) solid var(--color-gray-100);
      margin-top: var(--space-sm);
      margin-bottom: var(--space-sm);
  }

  .capsuleCard #shareButton{
    /*display: none;*/
}


[data-url="mylibrary"] .capsuleCard #shareButton{
    display: flex;
}

body.browser.mobileweb [data-role=page] * .capsuleCard:hover,
html  body.browser.mobileweb .ui-page-theme-c .playlistItem.withLargeAlbumArt:hover,
html  body.browser.mobileweb .ui-page-theme-a .playlistItem.withLargeAlbumArt:hover{
  /*background-color: var(--bg-light);*/
  transform: translate(0px, -2px);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: all;
}

[data-role=page] * .capsuleCard,
[data-role=page] * .capsuleCard * .itemTitle,
[data-role=page] * .capsuleCard * .itemSubtitle,
[data-role=page] * .capsuleCard * .description {
  color: var(--color-gray-750) !important;
}
[data-role=page] * .capsuleCard * .itemTitle {
  font-size: var(--text-base);
  color: var(--text-dark) !important;
  /* font-weight: bold; */
}
[data-role=page].lighttext * .capsuleCard,
[data-role=page].lighttext * .capsuleCard * .itemTitle {
  color:white !important;
}

[data-role=page].lighttext * .capsuleCard * .itemSubtitle,
[data-role=page].lighttext * .capsuleCard * .description {
  color:var(--color-white-70) !important;
}

[data-role=page] * .capsuleCard > .ownerInfo > .userAvatar {
    background-color: var(--color-gray-150);
}
.capsuleCard > .ownerInfo,
.capsuleCard > .expirationInfo {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex: 0 0 40px;
    -webkit-flex: 0 0 40px;
}


.capsuleCard #playCapsuleBtn{
  width: var(--size-full);
  box-sizing: border-box;
  max-width: var(--size-full);
}
.capsuleCard #playCapsuleBtn i{

    width: var(--size-20);
    height: var(--size-20);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: var(--text-lg-px);

}

.capsuleCard #playCapsuleBtn label{
    margin: var(--size-none);
}

.capsuleCard > .expirationInfo {
    flex: 0 0 90px;
    -webkit-flex: 0 0 90px;
}
.capsuleCard > .title {
  padding: var(--space-3xs);
  font-size: var(--text-lg);
  color: var(--text-dark);
  font-weight: 600;
  box-sizing: border-box;
  flex-shrink: 0;
}

.capsuleCard > .title > span{
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 900;
}
.capsuleCard > .ownerInfo > .userAvatar {
    border-radius: 50%;
    flex: 0 0 30px;
    -webkit-flex: 0 0 30px;
    height: var(--size-30);
    width: var(--size-30);
}
.capsuleCard > #commentsListWrapper * .commentBoxWrapper{
    position: relative;
    background-color: var(--color-white-10);
    color: white;
}
.capsuleCard > #commentsListWrapper{
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-2xs);
    flex-shrink: 0;
}
.capsuleCard > .ownerInfo > .buttonGroup > #status{
    padding-right: var(--border-4);
    padding-left: var(--border-4);
    border: var(--border-3) solid var(--color-gray-300);
    border-radius: 3px;
    background-color: var(--color-gray-300);
    color: white;
    display:none;
}

.capsuleCard > .ownerInfo > .buttonGroup > #status[data-capsule-status=onair]{
    border: var(--border-3) solid var(--trebble-primary);
    background-color: var(--trebble-primary);
    display:block;
}

.capsuleCard > .ownerInfo > .buttonGroup > #status[data-capsule-status=scheduled] {
  border: var(--border-3) solid var(--trebble-accent);
  background-color: var(--trebble-accent);
  display: block;
}


.capsuleCard > .ownerInfo > .buttonGroup > #status[data-capsule-status=processing]{
    display:block;
} 

.capsuleCard > .ownerInfo > .buttonGroup > i#commentButton{
  display:none!important;
}
#player  * .capsuleCard,
#player  * .capsuleCard > .title > span,
#player * .capsuleCard * .itemTitle, 
#player * .capsuleCard * .itemSubtitle, 
#player * .capsuleCard * .description{
  color: white !important;
  background-color: transparent;
  border-color: transparent;
  box-shadow: var(--shadow-none);
}
#player * .capsuleCard{
    width: var(--size-full);
    max-width: calc(var(--size-full) - var(--size-100));
}
#player * .capsuleCard .ownerInfo .buttonGroup{

    display: none;
}

#player * .capsuleCard > .note {
    max-height: var(--size-unset);
}

body.browser.mobileweb  #player  * .capsuleCard:hover{
  box-shadow: var(--shadow-none);
}

#artistSocialInfoAndCapsuleOverviewBox * .swiper-pagination{
  height: var(--size-16);
}
.capsuleCard > .ownerInfo > .usernameAndCreationDate {
    padding-right: var(--border-4);
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    padding-left: var(--border-4);
    overflow: hidden;
}
.capsuleCard > .ownerInfo > .buttonGroup {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    height: var(--size-40);
}
.capsuleCard > .ownerInfo > .buttonGroup > i {
  color: var(--color-white-80);
  font-size: var(--text-3xl);
  width: var(--size-36);
  height: var(--size-36);
  text-align: center;
  padding: var(--border-2);
  cursor: pointer;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
}

.capsuleCard > .ownerInfo > .buttonGroup > i#addToTrebbleOptionButtonWrapper{
    width: var(--size-36);
    height: var(--size-36);
    display: flex;
    display: -webkit-flex;
    color:var(--trebble-primary);
    font-size: var(--text-base);
}

.capsuleCard > .ownerInfo > .buttonGroup > i#addToTrebbleOptionButtonWrapper > #addToTrebbleOptionButtuon{
    width: auto;
    height: auto;
    color: var(--trebble-primary) !important;
    font-size: var(--text-2xl);
}
[data-role=popup] .capsuleCard > .ownerInfo > .buttonGroup > i#addToTrebbleOptionButtonWrapper > #addToTrebbleOptionButtuon {
  color:white !important;
}
.capsuleCard > .ownerInfo > .buttonGroup > i#addToTrebbleOptionButtonWrapper > #addToTrebbleOptionButtuon:hover,
.capsuleCard > .ownerInfo > .buttonGroup > i#addToTrebbleOptionButtonWrapper > #addToTrebbleOptionButtuon:active{
  background-color: transparent;
  border-color:transparent;
}
.capsuleCard > .ownerInfo > .buttonGroup > i > t{
  vertical-align: middle;
}

body.browser.mobileweb .capsuleCard > .ownerInfo > .buttonGroup > i:hover,
.capsuleCard > .ownerInfo > .buttonGroup > i:active{
  background-color: var(--color-white-5);
}

body.browser.mobileweb #player .capsuleCard > .ownerInfo > .buttonGroup > i:hover,
#player .capsuleCard > .ownerInfo > .buttonGroup > i:active{
  background-color: var(--color-white-10);
}

[data-role=page] .capsuleCard > .ownerInfo > .buttonGroup > i,
[data-role=page] .capsuleCard .clickable,
[data-role=page].lighttext .capsuleCard .clickable {
  color: var(--trebble-primary) !important;
  
}

body.browser.mobileweb [data-role=page] .capsuleCard > .ownerInfo > .buttonGroup > i:hover,
[data-role=page] .capsuleCard > .ownerInfo > .buttonGroup > i:active,
body.browser.mobileweb [data-role=page] .capsuleCard .clickable:hover, 
[data-role=page] .capsuleCard .clickable:active{

  background-color: var(--bg-overlay-dark);
  color: var(--trebble-primary);
  cursor: pointer;
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: color, background-color;
}


.capsuleCard > .note {
    /*opacity: 1;*/
    font-size: var(--text-sm);
    box-sizing: border-box;
    align-content: center;
    -webkit-align-content: center;
    display: flex;
    overflow: hidden;
    /*-ms-flex: 0 0 128px;
    flex: 0 0 128px;
    -webkit-flex: 0 0 128px;*/
    flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    text-overflow: ellipsis;
    /*padding: var(--space-3xs);*/
    margin: var(--space-3xs);
    overflow: auto;
    min-height: var(--size-60);
    white-space: pre-line;
    /*max-height: 175px;*/
    max-height: var(--size-60);
    white-space: normal;
    flex-direction: column;
    text-align: start;
}

[data-role=popup] .capsuleCard > .note{
    max-height: var(--size-200);
}

/*.capsuleCard > .note *,*/
[data-role=popup] * .capsuleCard > .note *,
[data-role=page].userProfileDetailsPage * .capsuleCard > .note *,
[data-role=page].playlistDetailsPage * .capsuleCard > .note *{
    color: var(--text-light)!important;
}

.capsuleCard > .note p {
    display: block !important;
    -webkit-margin-before: 0.6em !important;
    -webkit-margin-after: 0.6em !important;
    -webkit-margin-start: 0 !important;
    -webkit-margin-end: 0 !important;
    line-height: 1.3 !important;
}



.capsuleCard > .note img,
.capsuleCard > .note hr,
.capsuleCard > .note svg,
.capsuleCard > .note canvas,
.capsuleCard > .note audio,
.capsuleCard > .note video,
.capsuleCard > .note figure{
    display: none !important;
}

.capsuleCard > .note h3,
.capsuleCard > .note h2,
.capsuleCard > .note h1,
.capsuleCard > .note *{
    font-size: var(--text-base) !important;
    font-style: normal !important;
}

.capsuleCard > .note h3,
.capsuleCard > .note h2,
.capsuleCard > .note h1{
    margin: var(--size-none) !important;
}

.capsuleCard > .note blockquote{
    margin: var(--size-none);
    padding-left: var(--size-none);
    border: var(--border-0);
}

.capsuleCard > .note ul {
  list-style-type: square !important;
  margin-block-start: 0em  !important;
  margin-block-end: 0em !important;
  margin-inline-start: 0px !important;
  margin-inline-end: 0px !important;
  padding-inline-start: 16px !important;
  -webkit-margin-before: 0.6em !important;
  -webkit-margin-after: 0.6em !important;
}
.capsuleCard > .note ul,
.capsuleCard > .note ul li {
  list-style-type: square !important;
}

.capsuleCard > .note > a {
    color: var(--trebble-primary);
    display: contents;
}

[data-role=page] * .capsuleCard > .note,
[data-role=page] * .capsuleCard > .expirationInfo {
    flex-direction: column;
}
[data-role=page] * .capsuleCard > .note * #comment {
    border: var(--border-0) !important;
    font-size: var(--text-base);
    color: var(--text-dark) !important;
    /*border-bottom: var(--border-1) var(--color-gray-100) solid !important;*/
}
/*

[data-role=page] * .capsuleCard > .note {
    -ms-flex: 0 0 158px;
    flex: 0 0 158px;
    -webkit-flex: 0 0 158px;
}
[data-role=page] * .capsuleCard > .note.withoutUrlPreview,
[data-role=popup] * .capsuleCard > .note.withoutUrlPreview{
    -ms-flex: 0 0 234px;
    flex: 0 0 234px;
    -webkit-flex: 0 0 234px;
    -moz-flex: 0 0 234px;
    }*/
    @media(max-width: 800px){
        [data-role=page] * .capsuleCard > .note,
        [data-role=popup] * .capsuleCard > .note{
            flex: 1 1 100%;
            -webkit-flex: 1 1 100%;
            -moz-flex: 1 1 100%;
            /*max-height: 158px;*/
            max-height: var(--size-50);
        }

        [data-role=page] * .capsuleCard > .note.withoutUrlPreview,
        [data-role=popup] * .capsuleCard > .note.withoutUrlPreview{
            flex: 1 1 100%;
            -webkit-flex: 1 1 100%;
            -moz-flex: 1 1 100%;
            /*max-height: 234px;*/
            max-height: 126px;
        }
    }
    textarea.ui-input-text,
    paper-autogrow-textarea > textarea.ui-input-text,
    paper-input-decorator > paper-autogrow-textarea > textarea.ui-input-text {
        border: var(--border-0) !important;
        font-size: var(--text-base);
        color: var(--text-dark);
        /*border-bottom: var(--border-1) var(--color-gray-100) solid !important;*/
    }
    .capsuleCard > .songInfo {
        flex: 0 0 70px;
        -webkit-flex: 0 0 70px;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        flex-direction: row;
    }
    .capsuleCard > .songInfo > .songCoverArt {
        padding: var(--space-3xs);
        flex: 0 0 50px;
        -webkit-flex: 0 0 60px;
    }

    [data-role=page] .capsuleCard > .songInfo > .songCoverArt[src='../img/videoLoading.png'] {
        background-color: var(--bg-light);
    }
    [data-role=page].userProfileDetailsPage   .capsuleCard > .songInfo > .songCoverArt[src='../img/videoLoading.png'] {
      background-color: transparent;
  }

  .capsuleCard > .songInfo > .songAndArtist {
    justify-content: center;
    -webkit-justify-content: center;
    padding: var(--border-4);
    box-sizing: border-box;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    overflow: hidden;
}
.capsuleCard > .songInfo > .buttonGroup {
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
}
.capsuleCard > #expirationDate {
    flex: 0 0 30px;
    -webkit-flex: 0 0 30px;
    color: var(--trebble-primary);
}
[data-role=page] * .capsuleCard * .itemSubtitle#expirationDate{
   color: var(--trebble-primary) !important;
}

[data-role=page] * .capsuleCard * .itemSubtitle#schedulingInfo{
  color:  var(--trebble-accent) !important;
}

.capsuleCard  #schedulingInfo{
    cursor: pointer;
}

.capsuleCard  .capsuleSocialInfo {
    font-size: var(--text-md);
    flex: 0 0 30px;
    -webkit-flex: 0 0 30px;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    height: var(--size-30);
    justify-content: flex-end;
}


.capsuleCard #playCapsuleWrapper .capsuleSocialInfo{
    flex: 1 1 auto;
}

.capsuleCard  .capsuleSocialInfo > div {
    font-size: var(--text-sm);
    align-items: center;
    -webkit-align-items: center;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: center;
    -webkit-justify-content: center;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    padding: var(--size-none) var(--space-2xs);
}


.capsuleCard:not(.editable)  .capsuleSocialInfo > div#expirationDate,
.capsuleCard:not(.editable)  .capsuleSocialInfo > div#privacy{
  display:none;
}
.capsuleCard > .actionButtonWrapper {
    margin: var(--size-none);
    box-sizing: border-box;
    flex: 0 0 86px;
    -webkit-flex: 0 0 86px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    flex-direction: column;
}
body[showRoundCapsulePlayButton=true] .capsuleCard > .actionButtonWrapper{
   flex: 0 0 46px;
   -webkit-flex: 0 0 46px;
   flex-direction: row;
}
body[showRoundCapsulePlayButton=true] .capsuleCard > .actionButtonWrapper #playCapsuleBtn{
    width: var(--size-40);
    height: var(--size-40);
    padding: var(--size-none);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: var(--size-none) var(--space-2xs) var(--size-none) var(--size-none);
}

body[showRoundCapsulePlayButton=true] .capsuleCard > .actionButtonWrapper #playCapsuleBtn i{
    font-size: var(--text-xl-px);
    margin-left: var(--border-2);
    
}
body[showRoundCapsulePlayButton=true] .capsuleCard > .actionButtonWrapper #playCapsuleBtn i.animate-spin{
    margin-left: var(--size-none);
}
body[showRoundCapsulePlayButton=true] .capsuleCard > .actionButtonWrapper #playCapsuleBtn i.ion-ios7-play{
    margin-left: var(--space-3xs);
}

body[showRoundCapsulePlayButton=true] .capsuleCard > .actionButtonWrapper #playCapsuleBtn label{
    display: none;
}
body[showRoundCapsulePlayButton=true] .capsuleCard  .capsuleSocialInfo > div{
    flex: 0 0 auto;
}
.capsuleCard:not([data-capsule-status=onair]) #numberOfPlays,
/*.capsuleCard:not([data-capsule-status=onair]) #numberOfComments,*/
.capsuleCard[data-capsule-status=scheduled] #expirationDate{
    display: none;
}
.actionButtonWrapper {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

.actionButtonWrapper.responsive{
    flex-direction: row;
}

@media(max-width: 500px), (max-height: 500px) and (orientation: landscape){
    .actionButtonWrapper.responsive{
        flex-direction: column;
    }
}

body.browser * .actionButtonWrapper > .actionButton {
    width: -moz-fit-content;
    width: fit-content;
    max-width: var(--size-200);
    cursor: pointer;
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    flex: 0 0 auto;
}

[data-role=page] .capsuleCard > .actionButtonWrapper > .actionButton,
.capsuleCard > .actionButtonWrapper > .actionButton label{
 color: var(--trebble-primary);
}
.capsuleCard > .actionButtonWrapper > .actionButton.disabled,
body.browser.mobileweb .capsuleCard > .actionButtonWrapper > .actionButton.disabled:hover,
.capsuleCard > .actionButtonWrapper > .actionButton.disabled:active,
#noSongSelectionBtn.disabled:active,
#noSongSelectionBtn.disabled:hover,
body.browser.mobileweb #noSongSelectionBtn.disabled:hover{
  color: var(--color-gray-300) !important;
  border-color: var(--color-gray-300)!important;
  background-color:transparent !important;
  cursor: default !important;
}
[data-role=popup] * .capsuleCard,
[data-role=popup] * .capsuleCard > .title > span,
[data-role=popup] * .capsuleCard > .note > span,
[data-role=page].userProfileDetailsPage * .capsuleCard,
[data-role=page].userProfileDetailsPage * .capsuleCard > .title > span,
[data-role=page].userProfileDetailsPage * .capsuleCard > .note > span,
[data-role=page].playlistDetailsPage * .capsuleCard,
[data-role=page].playlistDetailsPage * .capsuleCard > .title > span,
[data-role=page].playlistDetailsPage * .capsuleCard > .note > span,
[data-role=page].playlistDetailsPage  .capsuleCard   a ,
[data-role=page].userProfileDetailsPage  .capsuleCard  a {
  color: white;
}

[id*=capsuleInfoEditPage] .capsuleCard > .actionButtonWrapper > .actionButton {
  color: white;
}
[data-role=page].userProfileDetailsPage * .capsuleCard,
[data-role=page].playlistDetailsPage * .capsuleCard  {
  border-color: transparent;
  background-color: var(--color-white-10);
}

[data-role=page].lighttext .capsuleCard > .songInfo > .songCoverArt[src='../img/videoLoading.png'] {
  border-color: transparent;
  background-color:transparent;
}


.capsuleCard > .actionButtonWrapper > .actionButton,
#noSongSelectionBtn {
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    padding-bottom: var(--space-3xs);
    padding-top: var(--space-3xs);
    text-align: center;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    /* height: var(--size-30); */
    
    margin: var(--size-none);
    padding-right: var(--size-none);
    padding-left: var(--size-none);
    font-weight: 300;
    /* background-color: var(--trebble-primary); */
    
    border: var(--border-2) solid var(--trebble-primary);
    color: var(--trebble-primary);
    line-height: var(--line-height-2-5xl);
    font-size: var(--text-sm);
    display: flex;
    display: -webkit-flex;
    width: var(--size-full);
}
body.browser.mobileweb .capsuleCard > .actionButtonWrapper > .actionButton:hover,
body.browser.mobileweb #noSongSelectionBtn:hover {
  cursor: pointer;
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: color, background-color;
}
.capsuleCard > .actionButtonWrapper > .actionButton:active,
body.browser.mobileweb .capsuleCard > .actionButtonWrapper > .actionButton:hover,
.capsuleCard > .actionButtonWrapper > .actionButton:active label,
body.browser.mobileweb .capsuleCard > .actionButtonWrapper > .actionButton:hover label,
#noSongSelectionBtn:active,
body.browser.mobileweb #noSongSelectionBtn:hover {
    background-color: var(--trebble-primary);
    border: var(--border-2) solid var(--trebble-primary);
    color: white;
}
[id*=capsuleInfoEditPage] .capsuleCard > .actionButtonWrapper > .actionButton:active,
body.browser.mobileweb [id*=capsuleInfoEditPage] .capsuleCard > .actionButtonWrapper > .actionButton:hover {
  background-color: var(--trebble-primary-dark);
  border: var(--border-2) solid var(--trebble-primary-dark);
  color: white;
}

.disabledText {
    font-style: italic;
    color: var(--color-gray-750);
}
.capsuleCard * .itemSubtitle {
    font-size: var(--text-2xs);
    opacity: 1;
}
.capsuleCard * .itemTitle {
    font-size: var(--text-sm);
}
.formLabel,
label.formLabel {
  flex: 0 0 30px;
  -webkit-flex: 0 0 30px;
  font-size: var(--text-md);
  /* font-weight: 300; */
  padding-left: var(--space-2xs);
  line-height: var(--line-height-3xl);
  align-items: center;
  -webkit-align-items: center;
  height: var(--size-30);
  /*background-color: var(--bg-light);
  color: var(--text-dark);*/
  background-color: transparent;
  color: var(--trebble-primary);
  display: flex;
  display: -webkit-flex;
  font-weight: 400;
  opacity: 0.5;
  margin-top: var(--size-none);
  height: auto;
}
.capsuleCard * #capsuleLifeSpanFld-button > span,
.capsuleCard * #privacySettingFld-button > span,
.capsuleCard * #categoryFld-button > span {
    color: var(--text-dark);
}
paper-input-decorator::shadow > .underline > .unfocused-underline,
paper-input-decorator > .underline > .unfocused-underline,
[data-role=page] * .capsuleCard * paper-input-decorator::shadow > .underline > .focused-underline,
[data-role=page] * .capsuleCard * paper-input-decorator > .underline > .focused-underline,
paper-input-decorator::shadow > .underline > .focused-underline,
paper-input-decorator > .underline > .focused-underline,
[data-role=page] * .commentBoxWrapper * paper-input-decorator > .underline > .focused-underline {
  /* background-color: transparent; */
}
paper-input::shadow > paper-input-decorator::shadow > .underline > .unfocused-underline,
paper-input::shadow > paper-input-decorator > .underline > .unfocused-underline,
paper-input-decorator::shadow > .underline > .unfocused-underline{
 background-color: var(--color-gray-150);
}
paper-input > paper-input-decorator > .underline > .unfocused-underline,
paper-input > paper-input-decorator > .underline > .unfocused-underline,
paper-input-decorator > .underline > .unfocused-underline {
 background-color: var(--color-gray-150);
}

paper-input::shadow > paper-input-decorator::shadow > .underline > .focused-underline ,
[data-role=page] * .capsuleCard * paper-input-decorator::shadow > .underline > .focused-underline,
paper-input-decorator::shadow > .underline > .focused-underline,
[data-role=page] * .commentBoxWrapper * paper-input-decorator > .underline > .focused-underline {
 background-color:  var(--trebble-primary);
}
paper-input > paper-input-decorator > .underline > .focused-underline ,
[data-role=page] * .capsuleCard * paper-input-decorator > .underline > .focused-underline,
paper-input-decorator > .underline > .focused-underline,
[data-role=page] * .commentBoxWrapper * paper-input-decorator > .underline > .focused-underline {
 background-color:  var(--trebble-primary);
}
paper-input, paper-input-decorator,
#titleField::shadow  > paper-input-decorator,.input-field{
 width: var(--size-full);
 box-sizing: border-box;
 /*padding: var(--size-none);*/
 padding-left: var(--space-2xs);
 padding-right: var(--space-2xs);
 color: var(--text-dark);
}
.input-field{
 margin: 0;
 padding: 0 var(--text-xs);
}
.formField.input-field{
    width: var(--size-full) !important;
    box-sizing: border-box;
}
.formLabel ~ .input-field{
 /* margin: var(--space-3xs) 0;*/
}

.ui-mobile .input-field label{
    margin: 0 var(--text-xs);
}

input.validate,
textarea.validate,
.select-wrapper.validate{
 margin-bottom: var(--text-xl-px) !important;
}


input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]):not(.ant-input),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]){
  border-bottom: var(--border-1) solid var(--trebble-primary);
  box-shadow: 0 1px 0 0 var(--trebble-primary);
}

input:not([type]),
input[type=text]:not(.browser-default):not(.ant-input),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {

  border-bottom: var(--border-1) solid var(--color-gray-150);
  height: var(--size-2em);
  margin: var(--text-xs) 0;
  font-size: var(--text-base);
}

input.invalid:not([type]),
input.invalid:not([type]):focus,
input[type=text].invalid:not(.browser-default):not(.ant-input),
input[type=text].invalid:not(.browser-default):not(.ant-input):focus,
input[type=password].invalid:not(.browser-default),
input[type=password].invalid:not(.browser-default):focus,
input[type=email].invalid:not(.browser-default),
input[type=email].invalid:not(.browser-default):focus,
input[type=url].invalid:not(.browser-default),
input[type=url].invalid:not(.browser-default):focus,
input[type=time].invalid:not(.browser-default),
input[type=time].invalid:not(.browser-default):focus,
input[type=date].invalid:not(.browser-default),
input[type=date].invalid:not(.browser-default):focus,
input[type=datetime].invalid:not(.browser-default),
input[type=datetime].invalid:not(.browser-default):focus,
input[type=datetime-local].invalid:not(.browser-default),
input[type=datetime-local].invalid:not(.browser-default):focus,
input[type=tel].invalid:not(.browser-default),
input[type=tel].invalid:not(.browser-default):focus,
input[type=number].invalid:not(.browser-default),
input[type=number].invalid:not(.browser-default):focus,
input[type=search].invalid:not(.browser-default),
input[type=search].invalid:not(.browser-default):focus,
textarea.materialize-textarea.invalid,
textarea.materialize-textarea.invalid:focus,
.select-wrapper.invalid>input.select-dropdown {
  margin-bottom: var(--text-xl-px);
}

input.invalid:not([type]):focus,
input[type=text].invalid:not(.browser-default):not(.ant-input):not(.ant-input):focus,
input[type=password].invalid:not(.browser-default):focus,
input[type=email].invalid:not(.browser-default):focus,
input[type=url].invalid:not(.browser-default):focus,
input[type=time].invalid:not(.browser-default):focus,
input[type=date].invalid:not(.browser-default):focus,
input[type=datetime].invalid:not(.browser-default):focus,
input[type=datetime-local].invalid:not(.browser-default):focus,
input[type=tel].invalid:not(.browser-default):focus,
input[type=number].invalid:not(.browser-default):focus,
input[type=search].invalid:not(.browser-default):focus,
textarea.materialize-textarea.invalid:focus{
  border-bottom: var(--border-1) solid var(--trebble-primary);
  box-shadow: 0 1px 0 0 var(--trebble-primary);
}

input.invalid:not([type]),
input[type=text].invalid:not(.browser-default):not(.ant-input):not(.ant-input),
input[type=password].invalid:not(.browser-default),
input[type=email].invalid:not(.browser-default),
input[type=url].invalid:not(.browser-default),
input[type=time].invalid:not(.browser-default),
input[type=date].invalid:not(.browser-default),
input[type=datetime].invalid:not(.browser-default),
input[type=datetime-local].invalid:not(.browser-default),
input[type=tel].invalid:not(.browser-default),
input[type=number].invalid:not(.browser-default),
input[type=search].invalid:not(.browser-default),
textarea.materialize-textarea.invalid,
input.valid:not([type]),
input[type=text].valid:not(.browser-default):not(.ant-input),
input[type=password].valid:not(.browser-default),
input[type=email].valid:not(.browser-default),
input[type=url].valid:not(.browser-default),
input[type=time].valid:not(.browser-default),
input[type=date].valid:not(.browser-default),
input[type=datetime].valid:not(.browser-default),
input[type=datetime-local].valid:not(.browser-default),
input[type=tel].valid:not(.browser-default),
input[type=number].valid:not(.browser-default),
input[type=search].valid:not(.browser-default),
textarea.materialize-textarea.valid,
.select-wrapper.valid>input.select-dropdown {
  box-shadow: var(--shadow-none);
  border-bottom: var(--border-1) solid var(--color-gray-150);
}


.noUi-horizontal .noUi-handle,
.noUi-target .range-label , .noUi-target.noUi-horizontal .noUi-tooltip{
    background-color: var(--trebble-primary);
}

.noUi-horizontal{
    height: var(--size-2);
    background-color: transparent;
    border-color: transparent;
}

html:not([dir=rtl])  .noUi-horizontal .noUi-handle.noUi-handle-lower{
    border-radius: 50%;
    background: var(--trebble-primary);
    height: var(--size-12);
    border: var(--border-0);
    box-shadow: var(--shadow-none);
    width: var(--size-12);
    right: -6px;
    top: -5px;
}


.noUi-handle:not(.noUi-active) .noUi-tooltip{
    display:none;
}
.noUi-handle .noUi-tooltip{
    color:white;
}
.noUi-handle:after, .noUi-handle:before{
    display: none;
}
.noUi-connect,
.noUi-base{
    height: var(--size-2);
    box-shadow: var(--shadow-none);
}

.noUi-touch-area{
    position: relative;
    width: var(--size-46);
    height: var(--size-46);
    left: -15px;
    top: -15px;
}
.noUi-base {
    cursor: pointer;
    background-color: var(--color-white-10);
}

.audio_sequencer .noUi-base{
    background-color: var(--color-black-10);
}

.tippy_tooltip_content .keyboard_shortcut{
    margin: auto;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
    font-size: 85%;
}
.tippy_tooltip_content .keyboard_shortcut .add_key_button{
    display: none;
}
.tippy_tooltip_content .keyboard_shortcut > .key_button{
    margin-right: var(--space-3xs);
}
.tippy_tooltip_content .keyboard_shortcut .soundwave-command-apple-key{
    font-size: 80%;
}

.noUi-connect{
    background-color: var(--trebble-primary);
}

#playerFooter:not(.transparent) .noUi-base{
    background-color: var(--color-gray-150);
}
.noUi-tooltip span{
  font-size: var(--text-2xs-px);
  font-weight:bold;
  top: 0px;
}
input:not([type])+label:after, input[type=text]:not(.browser-default)+label:after, input[type=password]:not(.browser-default)+label:after, input[type=email]:not(.browser-default)+label:after, input[type=url]:not(.browser-default)+label:after, input[type=time]:not(.browser-default)+label:after, input[type=date]:not(.browser-default)+label:after, input[type=datetime]:not(.browser-default)+label:after, input[type=datetime-local]:not(.browser-default)+label:after, input[type=tel]:not(.browser-default)+label:after, input[type=number]:not(.browser-default)+label:after, input[type=search]:not(.browser-default)+label:after, textarea.materialize-textarea+label:after, .select-wrapper+label:after{
  font-size: var(--text-sm-px);
}

::-moz-placeholder {
  color: var(--color-gray-600);
}

::placeholder {
  color: var(--color-gray-600);
}

[data-role=popup] ::-moz-placeholder {
    color: var(--text-light);
}

[data-role=popup] ::placeholder {
    color: var(--text-light);
}

.sequencer_node_container[move_mode="true"] .sequencer_node{
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
/*
#signUpAndRecordBtn{
   background: var(--gradient-primary-alt);
   cursor: pointer;
   border: transparent;
   background-size: 200% 200%;
   animation: gradientanimation 10s ease infinite;
   animation: gradientanimation 10s ease infinite;
}


#signUpAndRecordBtn span.extensibleLabel{
    color:  white;
}

#signUpAndRecordBtn t{
    font-weight: 900;
}

#signUpAndRecordBtn t:before{
 color:  white;
 font-size: var(--text-2xl-px);
}

[data-role=header] #signUpAndRecordBtn{
    margin-right: var(--space-3xs);
    margin-top: var(--border-3);
}
*/

#signUpAndRecordBtn{
   background-color: transparent;
   cursor: pointer;
   border: var(--border-3) solid black;
   border-image-source: var(--gradient-primary-alt-reverse);
   border-image-slice: 1;
}


#signUpAndRecordBtn span.extensibleLabel{

    background: var(--gradient-primary-alt);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientanimation 10s ease infinite;
    color: transparent;

}

#signUpAndRecordBtn t{
    font-weight: 900;
}

#signUpAndRecordBtn t:before{
    background: var(--gradient-primary-alt);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientanimation 10s ease infinite;
    color: transparent;
    font-size: var(--text-2xl-px);

}


.sequencer_node{
    -webkit-user-select:text;
       -moz-user-select:text;
            user-select:text;
    line-height: var(--line-height-3xl);
    font-size: var(--text-base-px);
    position: relative;
    white-space: break-spaces;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /*content-visibility: auto;
    contain-intrinsic-height: 30px;*/
}

.sequencer_paragraph{
    content-visibility: auto;
    padding-bottom: var(--space-xs);
}
.sequencer_paragraph.unlabelled_paragraph .speaker_label{
    display: none;
}

.beta_tag{
    color: black;
    background: white;
    padding: var(--size-none) var(--border-4);
    border-radius: 4px;
    font-size: 75%;
}

.beta_tag::after{
    content:'BETA';
}

.new_tag{
    color: white;
    background: var(--trebble-primary);
    padding: var(--size-none) var(--border-4);
    border-radius: 4px;
    font-size: 75%;
}

.new_tag::after{
    content:'NEW';
}

.sequencer_paragraph .speaker_label{
    font-weight: bold;
    /*opacity: 0.5;*/
    line-height: var(--line-height-3xl);
    font-size: var(--text-base-px);
    padding-left: var(--border-4);
    cursor: pointer;
}
.sequencer_paragraph .speaker_label[speaker_color_group="0"]{
    color: var(--trebble-secondary-color-1);
}

.sequencer_paragraph .speaker_label[speaker_color_group="1"]{
    color: var(--trebble-secondary-color-2);
}

.sequencer_paragraph .speaker_label[speaker_color_group="2"]{
    color: var(--trebble-secondary-color-3);
}

.sequencer_paragraph .speaker_label[speaker_color_group="3"]{
    color: var(--trebble-secondary-color-4);
}

[data-role=page].createCapsulePage.lighttext.transparent > .ui-content .sequencer_paragraph .speaker_label[speaker_color_group="1"],
body.darkTheme .sequencer_paragraph .speaker_label[speaker_color_group="1"]{
    color: var(--trebble-secondary-color-2-light);
}

[data-role=page].createCapsulePage.lighttext.transparent > .ui-content .sequencer_paragraph .speaker_label[speaker_color_group="0"],
body.darkTheme .sequencer_paragraph .speaker_label[speaker_color_group="0"]{
    color: var(--trebble-secondary-color-1-light);
}

[data-role=page].createCapsulePage.lighttext.transparent > .ui-content .sequencer_paragraph .speaker_label[speaker_color_group="2"],
body.darkTheme .sequencer_paragraph .speaker_label[speaker_color_group="2"]{
    color: var(--trebble-secondary-color-3-light);
}

[data-role=page].createCapsulePage.lighttext.transparent > .ui-content .sequencer_paragraph .speaker_label[speaker_color_group="3"],
body.darkTheme .sequencer_paragraph .speaker_label[speaker_color_group="3"]{
    color: var(--trebble-secondary-color-4-light);
}

.sequencer_paragraph:not(.show_summary) .paragraph_summary,
.sequencer_paragraph.show_summary .paragraph_content{
    display: none;
}

.sequencer_paragraph .paragraph_summary{
    letter-spacing: 1px;
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
    line-height: var(--line-height-3xl);
    font-size: var(--text-base-px);
}

.sequencer_paragraph.show_summary .paragraph_summary,
.sequencer_paragraph:not(.show_summary) .paragraph_content{
    display: block;
}

.sequencer_node[not_continuous_on_left="true"] div.left_continuious_visual_cue{
  border-left: var(--border-1) dashed /*white*/;
  position: absolute;
  height: var(--size-20);
  left: 1px;
  z-index: 2;
}
/*.sequencer_node.selected[not_continuous_on_left="true"] div.left_continuious_visual_cue{
    border-left-color: white;
}*/
.sequencer_node[not_continuous_on_left="true"] div.left_continuious_visual_cue .arrow-down{
    width: 0;
    height: 0;
    border-left: var(--border-3) solid transparent;
    border-right: var(--border-3) solid transparent;
    border-top: var(--border-4) solid /*white*/;
    top: 0px;
    left: -3.5px;
    position: absolute;
}

/*.sequencer_node.selected[not_continuous_on_left="true"] div.left_continuious_visual_cue .arrow-down{
    border-top: var(--border-4) solid white;
}*/

.sequencer_node[not_continuous_on_right="true"] div.right_continuious_visual_cue{
  border-right: var(--border-1) dashed var(--color-gray-750);
  position: absolute;
  height: var(--size-20);
  right: 1px;
  display: none;
}

.sequencer_node[not_continuous_on_right="true"] div.right_continuious_visual_cue .arrow-down{
    width: 0;
    height: 0;
    border-left: var(--border-3) solid transparent;
    border-right: var(--border-3) solid transparent;
    border-top: var(--border-4) solid var(--color-gray-750);
    top: 0px;
    right: -3.5px;
    position: absolute;

}


.sequencer_node.sortable-chosen{
    cursor: grab;
}

.strikethrough-icon,
.deleted_audio_segment_node .deleted_label.strikethrough-icon.content .icon{
   text-decoration: line-through;
}

.trim_silences_context_menu_container{
    padding: 0em var(--text-base);
    max-width: var(--size-300);
    max-height: var(--size-500);
}

.trim_silences_context_menu_container .container_title{
    padding: var(--text-sm-px);
    box-sizing: border-box;
    text-align: center;
    font-weight: 700;
}
.trim_silences_context_menu_container .container_content{
    display: flex;
    flex-direction: row;
}
.trim_silences_context_menu_container .container_content .input_description_container{
    flex: 1 1 200px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.trim_silences_context_menu_container .container_content .input_container{
    flex: 0 0 50px;
}

.trim_silences_context_menu_container .container_content .input_container input[type=number]::-webkit-inner-spin-button, 
.trim_silences_context_menu_container .container_content .input_container input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

.trim_silences_context_menu_container .container_content .input_container .ui-input-text{
    border: var(--border-0) !important;
}

.trim_silences_context_menu_container .button_bar_container button {
    margin: auto;
    background-color: var(--trebble-primary);
    color: var(--text-light);
    border: var(--border-2) solid var(--trebble-primary);
    max-width: var(--size-200);
    box-sizing:initial;
    height:var(--size-40);
    padding: var(--size-none);
    display:flex;
    align-items:center;
    justify-content:center;
    width: var(--size-full);
}

.trim_silences_context_menu_container .button_bar_container button:active,
.trim_silences_context_menu_container .button_bar_container button:focus,
body.mobileweb .trim_silences_context_menu_container .button_bar_container button:hover {
    background-color: var(--trebble-primary-dark);
    border: var(--border-2) solid var(--trebble-primary-dark);
}

.audio_sequencer .bottom_toolbar > *,
.audio_sequencer .header_toolbar {
 display:flex;
 flex-direction:row;
 justify-content:center;
 align-items:center;
 padding: var(--border-4);
}

.audio_sequencer .header_toolbar.show_labels button{
    flex: 0 0 auto;
    height: var(--size-32);
    margin: var(--space-3xs) 0px;
    padding: var(--border-4) var(--border-8);
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;

}

.audio_sequencer .header_toolbar.show_labels .button_delimiter{
    height: var(--space-sm);
    opacity: 0.2;
    border-left: 1px solid;
    margin: 0px var(--space-3xs);
}

[data-role=page].createCapsulePage.ui-page .audio_sequencer .header_toolbar.show_labels button .icon{
    font-size: var(--text-xl-px);
}

.audio_sequencer .header_toolbar.show_labels button#savingtn span.icon,
.audio_sequencer .header_toolbar.show_labels button#savedBtn span.icon{
    position: relative;
}

.audio_sequencer .header_toolbar.show_labels button#savingtn span.icon span,
.audio_sequencer .header_toolbar.show_labels button#savedBtn span.icon span{
    position: absolute;
    font-size: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.audio_sequencer .header_toolbar.show_labels button#savingtn span.icon span{
    font-size: 40%;
    top: 30%;
    left: 35%;
    animation: spin 8s infinite linear;
}

.audio_sequencer[is_project_being_saved="true"] .header_toolbar.show_labels button#savedBtn,
.audio_sequencer[is_project_being_saved="false"] .header_toolbar.show_labels button#savingtn{
    display: none;
}

[data-role=page].createCapsulePage.ui-page .audio_sequencer .header_toolbar.show_labels button label{
    color: var(--text-default-color);
    font-size: var(--text-base-15px);
    margin: 0px;
    display: flex;
    margin-left: var(--space-3xs);
    margin-right: var(--space-3xs);
    padding: 0px;
    white-space: nowrap;
}

[data-role=page].createCapsulePage.ui-page.lighttext .audio_sequencer .header_toolbar.show_labels button:not(.disabled) label{
    color: white;
}

.audio_sequencer .bottom_toolbar > .playback_progress_section{
 padding: var(--space-xs) var(--border-4);
 width: 100%;
}

.audio_sequencer:not([search_mode_on="true"]) .search_widget,
.audio_sequencer[search_mode_on="true"]:not([show_search_widget_on_left_side="true"]) .header_toolbar > button{
    display: none;
}
.add_gradient_at_top::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: var(--space-lg);
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, var(--bg-light) 100%);
    pointer-events: none; 
}

.add_gradient_at_bottom::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    height: var(--space-lg);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--bg-light) 100%);
    pointer-events: none; 
}

.add_gradient_at_bottom.gradient_color_white::after{
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
}

.sequencer_node_inspector_container.add_gradient_at_bottom{
    height: var(--space-xl);
    margin-bottom: calc(var(--space-sm) - var(--border-2));
}


.add_gradient_at_top.gradient_color_white::before{
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 100%);
}

.add_gradient_at_bottom.gradient_size_small::after,
.add_gradient_at_top.gradient_size_small::before{
    height: var(--space-sm);
}

body.darkTheme .add_gradient_at_bottom::after,
[data-role=page].createCapsulePage.ui-page.lighttext .add_gradient_at_bottom::after{
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--text-dark) 100%);
}


body.darkTheme .add_gradient_at_top::before,
[data-role=page].createCapsulePage.ui-page.lighttext .add_gradient_at_top::before{
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, var(--text-dark) 100%);
}


.audio_sequencer[search_mode_on="true"] .search_widget{

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: var(--size-50);
    width: var(--size-full);
    max-width: var(--size-800);

}

.audio_sequencer[hide_pauses_under_ten_milliseconds="true"] .pause_audio_segment_node.sequencer_node[duration_under_ten_milli="true"],
.audio_sequencer[hide_pauses_under_ten_milliseconds="true"] .pause_node[duration_under_ten_milli="true"]{
    display: none !important;
}

.shepherd-element  ul.browser-default{
    display: block;
    list-style-type: square;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
.audio_sequencer .right_section .video_canvas_container{
    align-items: center;
    justify-content: center;
    display: flex;
}
.audio_sequencer[search_mode_on="true"]:not([search_playback_on="true"]) #turnOnPlayOnSearchBtn,
.audio_sequencer[search_mode_on="true"][search_playback_on="true"] #turnOffPlayOnSearchBtn{
    display: none;
}
.audio_sequencer[do_not_show_ignored_content="true"] .deleted_audio_segment_node,
.audio_sequencer[do_not_show_gap_nodes="true"] .pause_audio_segment_node,
.audio_sequencer[do_not_show_edit_boundaries="true"] .left_continuious_visual_cue,
.audio_sequencer[do_not_show_edit_boundaries="true"] .right_continuious_visual_cue,
.audio_sequencer[do_not_display_video="true"] .right_section .video_canvas_container{
    display: none;
}
.audio_sequencer .left_continuious_visual_cue .arrow-down,
.audio_sequencer .right_continuious_visual_cue .arrow-down{
   display: none;
}

.audio_sequencer .search_widget .search_tool_bar button#playSelectionBtn,
.audio_sequencer .search_widget .search_tool_bar button#playWithoutSelection{
    width: var(--size-40);
    height: var(--size-40);
    align-items: center;
    display: flex;
    flex: 0 0 40px;
    justify-content: center;
}

.audio_sequencer .search_widget .search_tool_bar button#playSelectionBtn > span.pe-7s-play,
.audio_sequencer .search_widget .search_tool_bar button#playWithoutSelection > span.pe-7s-play{
    width: var(--size-full);
    position: relative;
    font-weight: 400;
}

.audio_sequencer .search_widget .search_tool_bar button#playSelectionBtn > span.pe-7s-play > .icon,
.audio_sequencer .search_widget .search_tool_bar button#playWithoutSelection > span.pe-7s-play > .icon,
.editor-search-browse-panel button#playSelectionBtn > span.pe-7s-play > .icon,
.editor-search-browse-panel button#playWithoutSelection > span.pe-7s-play > .icon{
    position: absolute;
    font-size: 50%;
    bottom: 0px;
    right: 5px;
}

.audio_sequencer .search_widget .search_tool_bar button.button_with_label,
.editor-search-browse-panel button.button_with_label {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: black;
    padding: var(--size-none) var(--space-xs);
    cursor: pointer;
}

.ui-page:not(.lighttext) .audio_sequencer .search_widget .search_tool_bar button.button_with_label,
.ui-page:not(.lighttext) .editor-search-browse-panel button.button_with_label,
.ui-page.lighttext .audio_sequencer .search_widget .search_tool_bar button.button_with_label,
.ui-page.lighttext .editor-search-browse-panel button.button_with_label  {
    background-color: var(--trebble-primary-100);
}

.ui-page:not(.lighttext) .audio_sequencer .search_widget .search_tool_bar button.button_with_label.secondary,
.ui-page:not(.lighttext) .editor-search-browse-panel button.button_with_label.secondary,
.ui-page.lighttext .audio_sequencer .search_widget .search_tool_bar button.button_with_label.secondary,
.ui-page.lighttext .editor-search-browse-panel button.button_with_label.secondary {
    background-color: var(--color-gray-200);
}

body.mobileweb .ui-page.lighttext .editor-search-browse-panel button:not(.disabled):hover,
.ui-page.lighttext .editor-search-browse-panel button:not(.disabled):active{
    background-color: var(--trebble-primary-100);
}
/*
.editor-search-browse-panel .search-result-item-card button.button_with_label{
    border: var(--border-2) solid black;
}

.ui-page:not(.lighttext)  .editor-search-browse-panel .search-result-item-card button.button_with_label{
    border: var(--border-2) solid black;
}
*/
.audio_sequencer .search_widget .search_tool_bar button.button_with_label   label,
.editor-search-browse-panel button.button_with_label   label{
    display: block;
    white-space: nowrap;
    margin: var(--size-none);
    color: black;
    cursor: pointer;
    padding: var(--size-none);
}

.ui-page:not(.lighttext) .audio_sequencer .search_widget .search_tool_bar button.button_with_label  label,
.ui-page:not(.lighttext) .editor-search-browse-panel button.button_with_label  label,
.ui-page.lighttext .audio_sequencer .search_widget .search_tool_bar button.button_with_label  label,
.ui-page.lighttext .editor-search-browse-panel button.button_with_label  label{
    color: var(--trebble-primary);
}

.ui-page:not(.lighttext) .audio_sequencer .search_widget .search_tool_bar button.button_with_label.secondary  label,
.ui-page:not(.lighttext) .editor-search-browse-panel button.button_with_label.secondary  label,
.ui-page.lighttext .audio_sequencer .search_widget .search_tool_bar button.button_with_label.secondary  label,
.ui-page.lighttext .editor-search-browse-panel button.button_with_label.secondary  label{
    color: black;
}

.audio_sequencer .search_widget .search_tool_bar button.button_with_label:disabled   label{
    cursor: pointer;
}

.audio_sequencer .search_widget .search_tool_bar  #deleteSelectionBtn > .icon{
    font-weight: 400;
    font-size: var(--text-2xl);
}
.audio_sequencer .search_widget .search_tool_bar button#playWithoutSelection > span.pe-7s-play > .ion-ios7-minus-empty{

    font-weight: 900;
    position: absolute;
    font-size: 80%;
    bottom: 0px;
    right: 5px;
    transform: rotate(45deg);

}
.audio_sequencer .search_widget .search_tool_bar  #turnOffPlayOnSearchBtn .icon{
    position: relative;
}

.audio_sequencer .search_widget .search_tool_bar #turnOffPlayOnSearchBtn .icon span{
  position: absolute;
  left: 2px;
  font-size: var(--text-7xl-px);
  top: -22px;
  transform: rotate(45deg);
  transform: rotate(40deg);

}
.audio_sequencer .search_widget .search_tool_bar .search_results span{
    padding: var(--size-none) var(--border-4);
}
.audio_sequencer .search_widget .search_tool_bar button{
    margin: var(--size-none);
}
/*.audio_sequencer[search_mode_on="true"] .search_widget #exit_search_btn{
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background-color: var(--color-gray-100);
}*/

.audio_sequencer[search_mode_on="true"] .search_widget #exit_search_btn{
    border: var(--border-0);
    display: flex;
    align-items: center;
    color: black;
    justify-content: center;
    height: var(--size-30);
    width: var(--size-30);
    flex: 0 0 auto;
    background-color: var(--color-gray-100);
}

.audio_sequencer[search_mode_on="true"] .search_widget .search_input{
    min-width: var(--size-200);
}

.audio_sequencer[search_mode_on="true"]  .search_input{
    background-color: white;
}

.audio_sequencer[search_mode_on="true"] .search_widget #exit_search_btn label{
    display: flex;
    margin: var(--size-none) var(--space-sm);
    color: var(--color-black);
}

.audio_sequencer .search_widget .search_tool_bar,
.audio_sequencer .search_widget .search_tool_bar .search_results{

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

}

.audio_sequencer .main_section .search_widget{
    display: none;
}

@media(max-width: 500px), (max-height: 500px) and (orientation: landscape){
   .audio_sequencer .header_toolbar .search_widget .search_tool_bar{
    display: none;
}

.audio_sequencer[search_mode_on="true"] .main_section .search_widget.floating_menu{
    display: flex;
}
}

.audio_sequencer .search_widget .search_tool_bar{
    margin: var(--size-none) var(--space-2xs);
    flex: 0 0 auto;
}

.audio_sequencer .search_widget button,
.editor-search-browse-panel button,
.audio_sequencer .bottom_toolbar button,
.audio_sequencer .header_toolbar button{
    border:var(--border-0);
    height: var(--size-40);
    width: var(--size-40);
    flex: 0 0 40px;
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin: var(--border-4);
    padding: var(--size-none);
}

.audio_sequencer .bottom_toolbar button#insertBtn,
.audio_sequencer .bottom_toolbar button#wrapWithMusicBtn{
    font-size: 140%;
}

.audio_sequencer .bottom_toolbar button#saveAsClipBtn .icon.ion-paperclip{
    font-size: 120%;
}

button,
button:focus{
    background-color:transparent;
}

body.mobileweb button:not(.disabled):hover,
button:not(.disabled):active{

    background-color: var(--color-black-5);
}

.audio_editor_and_transcription_box{
    width: var(--size-full);
}

.audio_editor_and_transcription_box .message_to_start_transcription_box_wrapper .actionButtonWrapper a{
    margin: var(--space-sm);
}

.audio_editor_and_transcription_box .message_to_start_transcription_box_wrapper .actionButtonWrapper{
    max-width: var(--size-700);
    margin: auto;
}

.sequencer_node_container{
    background-color:white;
    padding: var(--space-2xs) var(--space-4xl);
    padding-bottom: var(--size-100);
    box-shadow: var(--editor-text-container-shadow);
    margin: 0px var(--size-8);
    position: relative;
}

.audio_sequencer[left_section_displayed="true"] .sequencer_node_container{
    padding: var(--space-2xs) var(--space-xxl);
}





.createCapsulePage.lighttext.transparent .sequencer_node_container{
    background-color: var(--color-white-10);
}


.audio_sequencer .bottom_toolbar button.disabled,
.audio_sequencer .header_toolbar button.disabled,
[data-role=page].createCapsulePage.ui-page:not(.lighttext) .audio_sequencer .header_toolbar.show_labels button.disabled label,
.audio_sequencer .bottom_toolbar button.disabled:hover,
.audio_sequencer .header_toolbar button.disabled:hover,
.audio_sequencer .bottom_toolbar button.disabled:active,
.audio_sequencer .header_toolbar button.disabled:active{
    color: var(--pulse-gray);
    cursor: default;
    background-color: transparent;
}

.audio_sequencer .bottom_toolbar button.active,
.audio_sequencer .header_toolbar button.active,
.audio_sequencer .search_widget.floating_menu button.active{
    color: var(--trebble-primary);
}

.audio_sequencer .playback_progress_section #time_ellapsed,
.audio_sequencer .playback_progress_section #total_time{
    flex: 0 0 auto;
    
}
.audio_sequencer .playback_progress_section #time_ellapsed{
    margin-right: var(--space-2xs);
}

.audio_sequencer .playback_progress_section #total_time{
 margin-left: var(--space-2xs);
}

.audio_sequencer .playback_progress_section .playback_slider{
    flex: 1 1 auto;
}

.audio_sequencer .top_toolbar,
.audio_sequencer .bottom_toolbar{
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.audio_sequencer .bottom_toolbar{
    max-width: calc(100% - var(--space-xl) - var(--editor-left-section-width) - var(--editor-right-section-width));
    width: 100%;
    margin: auto;
}


.audio_sequencer .main_section{
    flex: 1 1 auto;
    display: flex;
    height: calc(var(--size-full) - var(--size-layout-sm));
    position: relative;
}
.audio_sequencer .main_section .search_widget.floating_menu{
    position: absolute;
    bottom: 10px;
    left: calc(var(--size-half) - 125px);
    width: var(--size-250);
    z-index: 1;
    background: var(--color-gray-100);
}

.audio_sequencer .main_section .search_widget.floating_menu button label,
.audio_sequencer .bottom_toolbar button label,
.audio_sequencer .header_toolbar button label{
    display: none;
}

.audio_sequencer .search_widget button .icon,
.audio_sequencer .bottom_toolbar button .icon,
.audio_sequencer .header_toolbar button .icon{
    font-size: var(--text-3xl-px);
}

.audio_sequencer .header_toolbar button#showBeatifyMenuBtn .icon{
    position: relative;
}
.audio_sequencer .header_toolbar button#showBeatifyMenuBtn .icon .sub_icon{
    position: absolute;
    font-size: 40%;
    bottom: 0px;
    right: 0px;
}

.audio_sequencer .pe-7s-edit,
.createCapsulePage .pe-7s-edit{
    transform: rotate(90deg);
}

.sequencer_node .highlight_box,
.sequencer_node .search_highlight_box{
    position: absolute;
    width: var(--size-full);
    height: var(--size-full);
    top:0px;
    left: 0px;
    border-radius: 0px;
}

.sequencer_node.video_sequencer_node .highlight_box,
.sequencer_node.audio_sequencer_node .highlight_box,
.sequencer_node.wrap_sequencer_node_start .highlight_box,
.sequencer_node.wrap_sequencer_node_end .highlight_box{
    display: none;
}
[data-role=page].lighttext .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button,
body.darkTheme  .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button,
.c-bottom-sheet.darkTheme.active .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button{
    border:  var(--border-2) solid white;
    background-color: white;
}

.audio_buffer_region_selector_widget,
.audio_buffer_region_selector_widget .audio_buffer_region_selector_widget_content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.audio_buffer_region_selector_widget:not(.loading) #loadingBoxWidget{
    display: none;
}
.audio_buffer_region_selector_widget.loading .audio_buffer_region_selector_widget_content{
    visibility: hidden;
}

.audio_buffer_waveform_minimap_info_container{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: var(--space-sm);
    padding-top: var(--space-2xs);
    font-size: var(--text-xs-px);
}

[data-role="popup"] .audio_buffer_region_selector_widget{
    height: calc(var(--vh-full) - var(--size-100));
    width: calc(var(--size-full) - var(--size-100));
    margin: var(--size-50);
}

[data-role="popup"] .audio_buffer_region_selector_widget .audio_buffer_waveform_zoomview_container,
[data-role="popup"] .audio_buffer_region_selector_widget .audio_buffer_waveform_overview_container{
    /*background-color: var(--color-white-10);*/
    /* Removed white background to allow yellow background from .audio_buffer_waveform_zoomview_container */
    position: relative;
}

/* Peaks.js zoomview container (main waveform - scrollable, zoomable) */
.audio_buffer_waveform_zoomview_container{
    width: 100%;
    height: 200px;
    position: relative;
    background-color: rgb(255, 252, 230); /* Light yellow/cream background */
}

/* Peaks.js overview container (minimap - fixed width overview) */
.audio_buffer_waveform_overview_container{
    width: 100%;
    height: 100px;
    position: relative;
    margin-top: var(--space-sm);
    background-color: white; /* White background */
}

handle.wavesurfer-handle{
    background-color: transparent !important;
    width: var(--size-16) !important;
}

handle.wavesurfer-handle handle-bar{
    background-color: var(--trebble-primary);
    height: var(--size-full);
    width: var(--size-8);
    position: absolute;
}

handle.wavesurfer-handle handle-delimiter-up{
    position: absolute;
    background-color: var(--trebble-primary);
    height: var(--size-8);
    width: var(--size-16);
    top: 0px;
}

handle.wavesurfer-handle handle-delimiter-down{
    position: absolute;
    background-color: var(--trebble-primary);
    height: var(--size-8);
    width: var(--size-16);
    bottom: 0px;
}

handle.wavesurfer-handle.wavesurfer-handle-start handle-bar,
handle.wavesurfer-handle.wavesurfer-handle-start handle-delimiter-up,
handle.wavesurfer-handle.wavesurfer-handle-start handle-delimiter-down{
    left: 0px;
}

handle.wavesurfer-handle.wavesurfer-handle-end handle-bar,
handle.wavesurfer-handle.wavesurfer-handle-end handle-delimiter-up,
handle.wavesurfer-handle.wavesurfer-handle-end handle-delimiter-down{
    right: 0px;
}

.audio_buffer_waveform_container region.wavesurfer-region{

}
.audio_buffer_region_selector_widget .bottom_button_toolbar button .icon,
#decreaseZoomBtn .icon,
#increaseZoomBtn .icon{
    font-size: var(--text-3xl-px);
    position: relative;
}

body.mobileweb .audio_buffer_region_selector_widget .bottom_button_toolbar button:not(.disabled):hover,
.audio_buffer_region_selector_widget .bottom_button_toolbar button:not(.disabled):active{
    background-color: var(--color-white-10);
}

#decreaseZoomBtn .icon  span,
#increaseZoomBtn .icon  span{
    position: absolute;
    font-size: var(--text-2xs-px);
    left: 5px;
    top: 9px;
}

.bottom_button_toolbar button{
    width: var(--size-46);
    height: var(--size-46);
    outline: none;
    border: var(--border-3) solid transparent;
    margin: var(--size-none) var(--space-sm);
    display: flex;
    flex: 0 0 36px;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: transparent;

}
.bottom_button_toolbar button label{
    display: none;
}

.audio_buffer_region_selector_widget #saveTrimBtn{

    background-color: var(--trebble-primary);
    border: var(--border-3) solid var(--trebble-primary);
    color: var(--trebble-primary);
    max-width: var(--size-400);
    padding: var(--size-none) var(--space-lg);
    margin: var(--space-sm) auto;
    display: flex;
    font-weight: bold;
    height: var(--size-46);
    align-items: center;
    justify-content: center;
    min-width: var(--size-200);
    box-sizing: border-box;

}

.audio_buffer_region_selector_widget #saveTrimBtn .icon{
    display: none;
}

.audio_buffer_region_selector_widget #saveTrimBtn label{
    font-weight: bold;
    text-transform: uppercase;
    padding: var(--size-none);
    margin: var(--size-none);
}

.audio_buffer_region_selector_widget .trim_info{

    display: flex;
    flex-direction: row;
    margin: var(--space-sm) auto;
    align-items: center;
    justify-content: center;

}

.audio_buffer_region_selector_widget .trim_info .trim_info_details{
    display: flex;
    margin: var(--size-none) var(--space-2xs);
    flex-direction: row;
}

.audio_buffer_region_selector_widget .trim_info .trim_info_details .trim_from_info,
.audio_buffer_region_selector_widget .trim_info .trim_info_details .trim_to_info{
    font-weight: bold;
}

.audio_buffer_region_selector_widget .trim_info .to_label{
    margin: var(--size-none) var(--space-2xs);
}



.audio_buffer_region_selector_widget.region_playing #playRegionBtn,
.audio_buffer_region_selector_widget:not(.region_playing) #pauseRegionBtn{
    display: none;
}

.audio_buffer_region_selector_widget .top_button_toolbar{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.audio_buffer_region_selector_widget .bottom_button_toolbar{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-sm);
}

.sequencer_node.video_sequencer_node.hover_highlighted .highlight_box,
.sequencer_node.audio_sequencer_node.hover_highlighted .highlight_box,
.sequencer_node.wrap_sequencer_node_start.hover_highlighted .highlight_box,
.sequencer_node.wrap_sequencer_node_end.with_drag_icon.hover_highlighted .highlight_box,
/*.sequencer_node.selected ~ .sequencer_node.audio_sequencer_node.selected .highlight_box,*/
/*.sequencer_node.audio_sequencer_node.selected .highlight_box,
.sequencer_node.wrap_sequencer_node_start.selected .highlight_box,
.sequencer_node.wrap_sequencer_node_end.selected .highlight_box,*/
.sequencer_node.video_sequencer_node.highlighted .highlight_box,
.sequencer_node.audio_sequencer_node.highlighted .highlight_box,
.sequencer_node.wrap_sequencer_node_start.highlighted .highlight_box,
.sequencer_node.wrap_sequencer_node_end.with_drag_icon.highlighted .highlight_box{
    /*height: 31px;*/
    height: var(--size-30);
    width: 34px;
    top: -1px;
    /*left: -4px;*/
    left: -4px;
    display: block;
}

.shepherd-enabled.shepherd-element.sequencer-onboarding-popup .shepherd-arrow:before{
    background-color: var(--trebble-accent);
}

.shepherd-enabled.shepherd-element.sequencer-onboarding-popup.shepherd-has-title[data-popper-placement^=bottom] > .shepherd-arrow:before{
    background-color: var(--trebble-accent);
}

.shepherd-enabled.shepherd-element.sequencer-onboarding-popup,
.shepherd-enabled.shepherd-element.sequencer-onboarding-popup .shepherd-header,
.shepherd-enabled.shepherd-element.sequencer-onboarding-popup .shepherd-title{
    background-color: var(--trebble-accent);/*var(--trebble-purple-active);*/
    color: white;
}

.shepherd-enabled.shepherd-element.sequencer-onboarding-popup[data-popper-reference-hidden]:not(.shepherd-centered){
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}



.shepherd-enabled.shepherd-element.sequencer-onboarding-popup .shepherd-header .shepherd-title{
    font-weight: 900;
    font-size: 115%;
    width: var(--size-full);
}

.shepherd-enabled.shepherd-element.sequencer-onboarding-popup .shepherd-button.shepherd-button-secondary{
    background-color: transparent;
    color: white;
    font-weight: bold;
}
.shepherd-enabled.shepherd-element.sequencer-onboarding-popup.shepherd-has-title .shepherd-content .shepherd-cancel-icon,
.shepherd-enabled.shepherd-element.sequencer-onboarding-popup .shepherd-text{
    color: white;
}
.shepherd-button,
.shepherd-enabled.shepherd-element.sequencer-onboarding-popup .shepherd-button{
  
  background-color: transparent;
  border-radius: 0px;
  color: white;
  font-weight: bold;
  font-size: 110%;

}
.shepherd-enabled.shepherd-element.sequencer-onboarding-popup .shepherd-button:not(.shepherd-button-secondary){
    background-color: var(--color-white-20);
}

.shepherd-enabled.shepherd-element.sequencer-onboarding-popup.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover,
.shepherd-enabled.shepherd-element.sequencer-onboarding-popup .shepherd-button.shepherd-button-secondary:hover{
    background-color: var(--color-white-20);
    cursor: pointer;
}
.shepherd-enabled.shepherd-element.sequencer-onboarding-popup .shepherd-button:hover{
  background-color: var(--color-white-40);
  cursor: pointer;
}

#audioEditorDemoPage .sequencer_node.wrap_sequencer_node_end.with_drag_icon.hover_highlighted .highlight_box,
#audioEditorDemoPage .sequencer_node.wrap_sequencer_node_end.with_drag_icon.highlighted .highlight_box{
    top: 0px;
}
.sequencer_node.wrap_sequencer_node_start.with_drag_icon.hover_highlighted .highlight_box,
.sequencer_node.wrap_sequencer_node_end.with_drag_icon.hover_highlighted .highlight_box,
.sequencer_node.wrap_sequencer_node_start.with_drag_icon.selected .highlight_box,
.sequencer_node.wrap_sequencer_node_end.with_drag_icon.selected .highlight_box{
    width: var(--size-46);
}
.sequencer_node.wrap_sequencer_node_start.with_drag_icon,
.sequencer_node.wrap_sequencer_node_end.with_drag_icon{
    width: 34px;
}
.sequencer_node.wrap_sequencer_node_end.with_drag_icon{
    top: -3px;
}

#audioEditorDemoPage .sequencer_node.wrap_sequencer_node_end.with_drag_icon{
    top: -3px;   
}
/*deprecated*/
.sequencer_node.wrap_sequencer_node_end.hover_highlighted:not(.with_drag_icon) .highlight_box,
.sequencer_node.wrap_sequencer_node_end.highlighted:not(.with_drag_icon) .highlight_box,
.sequencer_node.wrap_sequencer_node_start.hover_highlighted:not(.with_drag_icon) .highlight_box,
.sequencer_node.wrap_sequencer_node_start.highlighted:not(.with_drag_icon) .highlight_box{
    height: var(--size-30);
    width: var(--size-32);
    top: -0px;
    left: -4px;
    display: block;
}

.sequencer_node_container{
    text-align: left;
    overflow: auto;
}

.sequencer_node_inspector,
.sequencer_settings{
    width: calc(var(--size-full) - var(--space-lg));
    margin: var(--space-sm);
    height: calc(var(--size-full) - var(--space-lg));
    /*max-width: 400px;*/
    box-sizing: border-box;
}

[data-role=popup] .sequencer_settings,
.c-bottom-sheet.darkTheme.active .sequencer_settings{
    height: var(--size-full);
    width: var(--size-full);
    margin: var(--size-none);
}

[data-role=popup] .sequencer_settings .settingSection .settingItemTitle{
    padding: var(--space-2xs) var(--size-none);
}

.sequencer_settings .settingSection .sectionTitle{
    /*color: var(--color-black);
    font-weight: 700;*/
}
.sequencer_node_inspector .basic_inpector_param_view:last-child, 
.sequencer_node_inspector .group_params:last-child{
    border-bottom: var(--border-0);
}

body:not(.darkTheme) .sequencer_node_inspector .sequencer_node_inpestor_details,
body:not(.darkTheme) .sequencer_settings .sequencer_settings_details{
    height: var(--size-full);
    overflow: auto;
    border: var(--border-1) solid var(--color-gray-150);
    box-sizing: border-box;
}
body:not(.darkTheme) .sequencer_node_inspector .sequencer_node_inpestor_details{
    width: 100%;
}

.sequencer_settings .sequencer_settings_details > *{
    padding: var(--size-none) var(--space-2xs);
    box-sizing: border-box;
    text-align: left;
    
}

.sequencer_settings .sequencer_settings_details > .settings_panel_title_container{
    text-align: center;
    font-weight: 700;
}
.sequencer_settings_details .settings_panel_title_container{
    border-bottom: var(--border-1) solid var(--color-gray-150);
    padding: var(--text-sm-px);
    box-sizing: border-box;
}

.sequencer_node_inspector .sequencer_node_inpestor_details .infoBoxWrapper {
    opacity: 0.7;
}

.sequencer_node_inspector .sequencer_node_inpestor_details .infoBoxWrapper  .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sequencer_node_inspector .sequencer_node_inpestor_details .infoBoxWrapper  .content .iconWrapper{
    display: flex;
    font-size: var(--text-7xl-px);
}
.sequencer_node_inpestor_details.no_element_selected_inpector_container .params_list,
.sequencer_node_inpestor_details.no_element_selected_inpector_container .params_list > div,
.sequencer_node_inpestor_details.multiple_elements_selected_inpector_container .params_list,
.sequencer_node_inpestor_details.multiple_elements_selected_inpector_container .params_list > div,
.sequencer_node_inpestor_details.deleted_content_inpector_container .params_list,
.sequencer_node_inpestor_details.deleted_content_inpector_container .params_list > div{
    height: var(--size-full);
} 

.sequencer_node_inspector .sequencer_node_inpestor_details   .infoBoxWrapper > .content > .message{
    font-size: var(--text-lg); 
}

.sequencer_node_inspector .basic_inpector_param_view{
    display: flex;
    flex-direction: row;
    width: var(--size-full);
}

.sequencer_node_inspector .basic_inpector_param_view.paragraph_param_view{
    display: block;
    text-align: start;
}

.sequencer_node_inspector .basic_inpector_param_view.paragraph_param_view .param_label.word_label{
    display: inline-block;
    width: 50%;
}

.sequencer_node_inspector .basic_inpector_param_view.paragraph_param_view .value_container.paragraph_content{
    display: block;
    text-align: start; 
    width: 100%;
}

.sequencer_node_inspector .basic_inpector_param_view.two_rows{
    flex-direction: column;
}
.sequencer_node_inspector .basic_inpector_param_view.two_rows .first_row,
.sequencer_node_inspector .basic_inpector_param_view.two_rows .second_row{
  display: flex;
  flex-direction: row;
}

.sequencer_node_inspector .basic_inpector_param_view.two_rows .first_row{
    padding-bottom: var(--space-2xs);
}

.sequencer_node_inspector .basic_inpector_param_view.two_rows .first_row .param_label{
    flex: 1 1 auto;
    box-sizing: border-box;
    padding-right: var(--space-2xs);
}

.sequencer_node_inspector .slider_param_view .value_container .slide_value{
    min-width: var(--size-30);
}

.sequencer_node_inspector .basic_inpector_param_view.two_rows .first_row .value_container{
    flex: 0 0 auto;
    width: auto;
    padding-left: var(--space-2xs);
    box-sizing: border-box;
}

.sequencer_node_inspector .basic_inpector_param_view.two_rows .second_row .value_container {
    display: flex;width: var(--size-full);
    flex-direction: row;
}

.sequencer_node_inspector .basic_inpector_param_view.two_rows.duration_param_view .second_row .value_container .min_value,
.sequencer_node_inspector .basic_inpector_param_view.two_rows.duration_param_view .second_row .value_container .max_value{
    flex: 0 0 auto;
}

.sequencer_node_inspector .basic_inpector_param_view.two_rows.duration_param_view .second_row .value_container .min_value{
    margin-right: var(--space-2xs);
}

.sequencer_node_inspector .basic_inpector_param_view.two_rows.duration_param_view .second_row .value_container .max_value{
    margin-left: var(--space-2xs);
}

.sequencer_node_inspector .basic_inpector_param_view.two_rows.duration_param_view .second_row .value_container .slider_container{
    flex: 1 1 100%;
}

.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view{
    flex-direction: column;
    margin: var(--space-3xs) var(--size-none);
}

.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view[disable_audio_source_change=true] .audio_file_info,
.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view[disable_reset_trim=true] #resetTrimBtn{
    display: none;
}

.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .param_label{
    margin: var(--space-3xs) var(--size-none);
}

.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .audio_file_info,
.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .start_info,
.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .end_info{
    display: flex;
    flex-direction: row;
    margin: var(--space-3xs) var(--size-none);
}

.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button,
.sequencer_node_default_context_menu button#correctBtn{
    display: flex;
    flex-direction: row;
    padding: var(--size-none) var(--space-sm);
    min-width: var(--size-100);
    justify-content: center;
    align-items: center;
    margin: var(--space-3xs) var(--size-none);
    width: -moz-fit-content;
    width: fit-content;
    border:  var(--border-2) solid var(--color-black);
    outline: none;
}

.sequencer_node_default_context_menu button#correctBtn{
    color: var(--text-light);
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
    padding-right: var(--size-none);
    padding-left: var(--size-none);
}

.sequencer_node_default_context_menu button#correctBtn label{
    margin: var(--size-none);
    color: var(--text-light);
}

.sequencer_node_default_context_menu #wrapWithMusicBtn .icon.pe-7s-music,
.sequencer_node_default_context_menu #insertBtn .icon.pe-7s-music,
.always_displayed_context_menu #wrapWithMusicBtn .icon.pe-7s-music,
.always_displayed_context_menu #insertBtn .icon.pe-7s-music{
    position: relative;
    width: var(--size-36);
    height: var(--size-36);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sequencer_node_default_context_menu #wrapWithMusicBtn .icon.pe-7s-music,
.sequencer_node_default_context_menu #insertBtn .icon.pe-7s-music{
    font-size: var(--text-md-px);
}

.always_displayed_context_menu #wrapWithMusicBtn .icon.pe-7s-music,
.always_displayed_context_menu #insertBtn .icon.pe-7s-music{
    font-size: var(--text-xl-px);

}
.sequencer_node_default_context_menu #wrapWithMusicBtn .icon.pe-7s-music .ion-navicon,
.always_displayed_context_menu #wrapWithMusicBtn .icon.pe-7s-music .ion-navicon{
    position: absolute;
    top: 18px;
    font-size: var(--text-base-px);
    left: 22px;
}

.sequencer_node_default_context_menu #insertBtn .icon.pe-7s-music .ion-plus,
.always_displayed_context_menu #insertBtn .icon.pe-7s-music .ion-plus{
    color: var(--text-dark);
    background-color: var(--color-gray-300);
    position: absolute;
    top: 22px;
    font-size: var(--text-xs-px);
    left: 20px;
    display: flex;
    height: var(--size-12);
    justify-content: center;
    align-items: center;
    width: var(--size-12);
    border-radius: 50%;
}

.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button#resetTrimBtn .icon.pe-7s-refresh{
    transform:  scaleX(-1) rotate(45deg);
}

.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button .icon{
    font-size: var(--text-xl-px);
}

.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button label{
    color: var(--color-black);
    margin: var(--size-none) var(--space-2xs);
    font-size: var(--text-sm-px);
}

[data-role=page].lighttext  .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button .icon,
[data-role=page].lighttext  .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button label,
body.darkTheme .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button .icon,
body.darkTheme .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button label,
.c-bottom-sheet.darkTheme.active  .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button .icon,
.c-bottom-sheet.darkTheme.active  .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button label{
    color: var(--color-black);
}

.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar{
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    padding: var(--space-2xs) var(--size-none);
    align-items: flex-end;
}
.c-bottom-sheet .sequencer_node_inspector{
    width: var(--size-full);
}

.sequencer_node_inspector .basic_inpector_param_view,
.sequencer_node_inspector .group_params{
    border-bottom: var(--border-1) solid var(--color-gray-150);
    padding: var(--text-sm-px);
    box-sizing: border-box;
}

.sequencer_node_inspector .group_params .basic_inpector_param_view{
    padding: var(--space-2xs) var(--size-none);
    border-bottom: var(--border-0);
}


.sequencer_node_inspector .basic_inpector_param_view .param_label{
    flex: 0 0 37%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: start;
    opacity: 0.5;
}

.sequencer_node_inspector .basic_inpector_param_view .param_label.switch_label{
    flex: 0 0 50%;
}
.sequencer_node_inspector .basic_inpector_param_view .value_container.switch{
    flex: 0 0 50%;
}


.sequencer_node_inspector .title_param_view .value_container.title_label{
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.sequencer_node_inspector .sub_title_param_view .value_container.sub_title_label{
    font-weight: 400;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.sequencer_node_inspector .basic_inpector_param_view .value_container{
    flex: 1 1 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    text-align: right;
    align-items: center;
    width: 70%;
}

.sequencer_node_inspector .basic_inpector_param_view .value_container.custom_obj_value,
.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .value_container.audio_source_value{
    width: 70%;
}


.sequencer_node_inspector .basic_inpector_param_view  .ui-input-text{
    width: var(--size-70);
    height: var(--size-40);
    display: flex;
    justify-content:center;
    align-items:center;
    padding: var(--border-4);
}

.sequencer_node_inspector .basic_inpector_param_view  .duration_value .ui-input-text::after{
    content : "s";
}

.sequencer_node_inspector .basic_inpector_param_view  .value_container.custom_obj_value .edit_btn,
.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view  .value_container.audio_source_value .edit_btn{
    font-size: var(--text-xl-px);
    margin-left: var(--space-sm);
    cursor: pointer;
}

.sequencer_node_inspector .basic_inpector_param_view  .value_container.custom_obj_value .custom_obj_string_value,
.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view  .value_container.audio_source_value .audio_source_string_value{
    /*opacity: 0.5;*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: var(--size-40);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: end
}

body.mobileweb .sequencer_node_inspector .basic_inpector_param_view  .value_container.custom_obj_value .edit_btn:hover,
.sequencer_node_inspector .basic_inpector_param_view  .value_container.custom_obj_value .edit_btn:active,
body.mobileweb .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view  .value_container.audio_source_value .edit_btn:hover,
.sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view  .value_container.audio_source_value .edit_btn:active{
    color: var(--trebble-primary);
}

.sequencer_node_inspector .group_params_title{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.audio_sequencer .playback_button_section button,
.audio_sequencer .playback_button_section button:focus,
body.mobileweb .audio_sequencer .playback_button_section button:hover,
.audio_sequencer .playback_button_section button:active{
    height: var(--size-50);
    width: var(--size-50);
    flex: 0 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--text-3xl-px);
    border-radius: 50%;
    box-sizing: border-box;
    color: white;
    background-color: var(--trebble-primary);
}

.sequencer_node_inspector .slider_param_view .value_container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.sequencer_node_inspector .slider_param_view .value_container .slider_container{
    flex: 1 1 100%;
    margin: var(--size-none) var(--space-2xs);
}

.audio_sequencer .sequencer_node_inspector_container{
    width: var(--size-full);
}

.audio_sequencer .sequencer_node_inspector_container,
.audio_sequencer .sequencer_node_inspector_container .sequencer_node_inspector{
    height: var(--size-full);
    display: flex;
    flex: 1 1 auto;

}
.audio_sequencer .sequencer_node_inspector_container .sequencer_node_inspector{
    overflow: auto;
    position: relative;
}
.audio_sequencer .sequencer_node_inspector_container{
    overflow: hidden;
}

.audio_sequencer #playSequencerBtn,
.audio_sequencer #loading_indicator,
.audio_sequencer #stopSequencerBtn{
    display: none;
}
.audio_sequencer #playSequencerBtn:before{
    padding-left: var(--border-6);
}
.audio_sequencer{
    display: flex;
    flex-direction: column;
}

.audio_sequencer[show_sequencer_node_inspector="true"] .right_section,
.audio_sequencer[show_sequencer_settings="true"] .left_section{
    /*flex: 0 0 35%;*/
    flex: 0 0 310px;
    display: flex;
}

.audio_sequencer[show_sequencer_node_inspector="true"] .right_section{
    flex-direction: column;
    overflow: auto;
    position: relative;
}

.audio_sequencer[show_sequencer_node_inspector="true"][do_not_display_video="true"]  .right_section{
    flex-direction: row;
}

.audio_sequencer[show_sequencer_settings="true"] .left_section{
    flex-direction: row;
}

.audio_sequencer:not([show_sequencer_node_inspector="true"]) .right_section,
.audio_sequencer:not([show_sequencer_settings="true"]) .left_section{
    display: none;
}

.audio_sequencer .left_section .sequencer_settings_container{
    height: var(--size-full);
}

@media(max-width: 500px), (max-height: 500px) and (orientation: landscape){
    .audio_sequencer[show_sequencer_node_inspector="true"] .right_section,
    .audio_sequencer[show_sequencer_settings="true"] .left_section{
        display: none;
    }
}

@media(min-width: 500px), (min-height: 500px) and (orientation: landscape){
   .audio_sequencer .always_displayed_context_menu{
    display: none;
}

}


.audio_sequencer[show_sequencer_node_inspector="true"] .right_section  .right_side_toolbar{
    flex: 0 0 60px;
    display: none;
}


.audio_sequencer[show_sequencer_node_inspector="true"] .main_section,
.audio_sequencer[show_sequencer_settings="true"] .main_section{
    display: flex; 
    flex-direction: row;
}

.audio_sequencer[show_sequencer_node_inspector="true"] .main_section .sequencer_node_container,
.audio_sequencer[show_sequencer_settings="true"] .main_section .sequencer_node_container{
    flex: 1 1 100%;
}

.audio_sequencer[transcribedAudioBeingAdded="true"] .main_section .sequencer_node_container{
    opacity: 0.5;
}

.audio_sequencer  .main_section > #loadingImg{
    position: absolute;
    left: calc(var(--size-half) - (67px)/2 - (330px)/2);
    top: calc(var(--size-half) - (67px/2));
}

@media (max-width: 500px),(max-height:500px) and (orientation:landscape) {
    .audio_sequencer .main_section > #loadingImg{
        left: calc(var(--size-half) - (var(--size-100))/ 2);
    }
}

.audio_sequencer:not([transcribedAudioBeingAdded="true"])  .main_section >  #loadingImg{
    display: none;
}



.audio_sequencer[rendering_being_created="false"]:not([rendering_buffer_playing="true"]):not([rendered_buffer_playback_loading="true"]):not([is_there_pending_render_request="true"]) #playSequencerBtn,
.audio_sequencer[rendering_being_created="true"] #loading_indicator,
.audio_sequencer[is_there_pending_render_request="true"] #loading_indicator,
.audio_sequencer[rendered_buffer_playback_loading="true"] #loading_indicator,
.audio_sequencer[rendering_being_created="false"][rendering_buffer_playing="true"]:not([rendered_buffer_playback_loading="true"])  #stopSequencerBtn{
    display: flex;
}

[data-role=popup] .sequencer_node_inspector{
    width: calc(var(--size-full) - var(--size-50));
    margin: var(--space-lg) var(--text-xl-px);
    max-width: var(--size-700);
    height: -moz-fit-content;
    height: fit-content;
}

[data-role=popup] .sequencer_node_inspector input{
    color: white;
}

/*.sequencer_node.selected .highlight_box{
    background: var(--trebble-primary);
    color: white;
    border-radius: 0px;
}*/

.sequencer_node.selected{
    background: var(--trebble-primary);
    color: white;
}

.sequencer_node.being_processed{
	animation: trebble_flash linear 2s infinite;
}

.sequencer_node.hover_highlighted .highlight_box{
    background: var(--trebble-primary-300);
    color: white;
    border-radius: 0px;
    z-index: 2;
}

.sequencer_node.search_highlighted .search_highlight_box{
 background: var(--color-warning-bright);
 border-radius: 0;
 color: var(--color-black);
 /*opacity: 0.7;*/
 /*width: calc(var(--size-full) - var(--border-6));*/
 /*left: 3px;*/
 z-index: 1;
}
.sequencer_node.pause_audio_segment_node.search_highlighted .search_highlight_box{
    left: 0px;
}

.sequencer_node.search_highlighted.selected:not(.playing) .highlight_box{
    background-color: var(--trebble-primary);
    z-index: 2;
}

.sequencer_node.search_highlighted:not(.selected):not(.playing) .content,
.deleted_audio_segment_node.search_highlighted:not(.selected) .deleted_label,
.deleted_audio_segment_node.search_highlighted:not(.selected) .undo_deletion_icon{
    color: black
}

.paragraph_start_delimitation,
.paragraph_end_delimitation{
    height: var(--size-30);
    width: var(--size-40);
    line-height: var(--line-height-3xl);
    display: inline-flex;
}

.paragraph_start_delimitation{
    display: none;
}

.sequencer_node.node_drag_over .highlight_box,
fullstop.sequencer_node.node_drag_over,
.paragraph_start_delimitation.node_drag_over,
.paragraph_end_delimitation.node_drag_over{
 border-left: var(--border-4) solid black;
}

.sequencer_node.node_drag_over_after .highlight_box,
fullstop.sequencer_node.node_drag_over_after,
.paragraph_start_delimitation.node_drag_over_after,
.paragraph_end_delimitation.node_drag_over_after{
 border-right: var(--border-4) solid black;
}

body.darkTheme [data-role=page]:not(.lighttext) .sequencer_node.node_drag_over .highlight_box,
body.darkTheme [data-role=page]:not(.lighttext) fullstop.sequencer_node.node_drag_over,
body.darkTheme [data-role=page]:not(.lighttext) .paragraph_start_delimitation.node_drag_over,
body.darkTheme [data-role=page]:not(.lighttext) .paragraph_end_delimitation.node_drag_over{
 border-left: var(--border-4) solid white;
}

body.darkTheme [data-role=page]:not(.lighttext) .sequencer_node.node_drag_over_after .highlight_box,
body.darkTheme [data-role=page]:not(.lighttext) fullstop.sequencer_node.node_drag_over_after,
body.darkTheme [data-role=page]:not(.lighttext) .paragraph_start_delimitation.node_drag_over_after,
body.darkTheme [data-role=page]:not(.lighttext) .paragraph_end_delimitation.node_drag_over_after{
 border-right: var(--border-4) solid white;
}

.sequencer_node.node_drag_over.wrap_sequencer_node_start .highlight_box,
.sequencer_node.node_drag_over.wrap_sequencer_node_end .highlight_box,
.sequencer_node.node_drag_over.audio_sequencer_node .highlight_box,
.sequencer_node.node_drag_over.video_sequencer_node .highlight_box{
    display: block;
    left: -6px;
    z-index: 2;
}

.sequencer_node.node_drag_over_after.wrap_sequencer_node_start .highlight_box,
.sequencer_node.node_drag_over_after.wrap_sequencer_node_end .highlight_box,
.sequencer_node.node_drag_over_after.audio_sequencer_node .highlight_box,
.sequencer_node.node_drag_over_after.video_sequencer_node .highlight_box{
    display: block;
    right: -6px;
    z-index: 2;
}

.sequencer_node.node_drag_at_the_end .highlight_box{
 border-right: var(--border-4) solid black;
}

[data-role=page].lighttext .sequencer_node.node_drag_over .highlight_box,
[data-role=page].lighttext fullstop.sequencer_node.node_drag_over,
[data-role=page].lighttext .paragraph_start_delimitation.node_drag_over,
[data-role=page].lighttext .paragraph_end_delimitation.node_drag_over{
 border-left: var(--border-4) solid white;
}

[data-role=page].lighttext .sequencer_node.node_drag_over_after .highlight_box,
[data-role=page].lighttext fullstop.sequencer_node.node_drag_over_after,
[data-role=page].lighttext .paragraph_start_delimitation.node_drag_over_after,
[data-role=page].lighttext .paragraph_end_delimitation.node_drag_over_after{
 border-right: var(--border-4) solid white;
}

[data-role=page].lighttext .sequencer_node.node_drag_at_the_end .highlight_box,
[data-role=page].lighttext fullstop.sequencer_node.node_drag_at_the_end,
[data-role=page].lighttext .paragraph_start_delimitation.node_drag_at_the_end,
[data-role=page].lighttext .paragraph_end_delimitation.node_drag_at_the_end{
 border-right: var(--border-4) solid white;
}

[data-role=page].lighttext .sequencer_node_inspector,
[data-role=page].lighttext .sequencer_settings .sequencer_settings_details,
body.darkTheme .sequencer_node_inspector,
.c-bottom-sheet.darkTheme.active .sequencer_node_inspector,
.c-bottom-sheet.darkTheme.active .sequencer_settings .sequencer_settings_details{
    border: var(--border-1) solid var(--color-white-20);
}

[data-role=page].lighttext .sequencer_node_inspector,
[data-role=page].lighttext .sequencer_settings .sequencer_settings_details,
.sequencer_node_inspector .sequencer_node_inpestor_details,
body.darkTheme .sequencer_node_inspector{
    width: 100%;
}

body [data-role=popup] .sequencer_settings .sequencer_settings_details,
[data-role=page].lighttext.ui-page-active  ~ div [data-role=popup] .sequencer_settings .sequencer_settings_details,
.c-bottom-sheet.darkTheme.active .sequencer_settings .sequencer_settings_details{
    border: var(--border-0);
}


[data-role=page].lighttext .sequencer_node_inspector,
[data-role=page].lighttext .sequencer_settings .sequencer_settings_details,
.sequencer_node_inspector .sequencer_node_inpestor_details,
body.darkTheme .sequencer_node_inspector{
    width: 100%;
}

body:not(.darkTheme) [data-role=page].lighttext .sequencer_node_inspector .basic_inpector_param_view, 
body.darkTheme .sequencer_node_inspector .basic_inpector_param_view, 
body:not(.darkTheme) [data-role=page].lighttext .sequencer_settings_details .settings_panel_title_container,
body:not(.darkTheme) [data-role=page].lighttext.ui-page-active ~ div [data-role=popup] .sequencer_settings_details .settings_panel_title_container,
body.darkTheme [data-role=popup] .sequencer_settings_details .settings_panel_title_container,
.c-bottom-sheet.darkTheme.active .sequencer_node_inspector .basic_inpector_param_view, 
.c-bottom-sheet.darkTheme.active .sequencer_node_inspector .group_params
.c-bottom-sheet.darkTheme.active .sequencer_settings_details .settings_panel_title_container,
.c-bottom-sheet.darkTheme.active .sequencer_settings_details .settings_panel_title_container,
body:not(.darkTheme) [data-role=page].lighttext .sequencer_node_inspector .group_params,
body.darkTheme  .sequencer_node_inspector .group_params{
    border-bottom: var(--border-1) solid var(--color-white-20);
}

.sequencer_node.playing, 
/*.sequencer_node.selected .content,*/
.sequencer_node.hover_highlighted /*.content*/{
    color : white;
}

.sequencer_node.playing .highlight_box{
 animation: medium_pulse 0.2s;
 background: var(--trebble-purple-active);
 border-radius: 2px;
 z-index: 2;
}

.sequencer_node.playing .icon,
.sequencer_node.playing .marker,
.audio_sequencer_node.playing .icon, 
.video_sequencer_node.playing .icon, 
.wrap_sequencer_node_end.with_drag_icon.playing .icon,
.wrap_sequencer_node_start.playing .icon{
    background: var(--trebble-purple-active) !important;
    
}


.sequencer_node.playing .marker{
    color:var(--trebble-purple-active);
}

.sequencer_node .content{
    z-index: 3;
}

.wrap_sequencer_node_start .icon,
.wrap_sequencer_node_end.with_drag_icon .icon,
.audio_sequencer_node .icon,
.video_sequencer_node .icon{
    height: var(--size-24);
    width: var(--size-24);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    background-color: var(--color-gray-350);
    color: var(--text-light);
    border-radius: 3px;
    z-index: 1;
} 
.wrap_sequencer_node_start.with_drag_icon .icon.music_icon,
.wrap_sequencer_node_end.with_drag_icon .icon.drag_icon{

    padding: var(--size-none) var(--border-2);
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    z-index: 2;

}
.wrap_sequencer_node_start.with_drag_icon .icon.drag_icon,
.wrap_sequencer_node_end.with_drag_icon .icon.music_icon{
    border-top-left-radius: 0px;
    padding: var(--size-none) var(--border-2);
    border-bottom-left-radius: 0px;
    z-index: 2;

}

.wrap_sequencer_node_start.with_drag_icon .icon.drag_icon,
.wrap_sequencer_node_end.with_drag_icon .icon.drag_icon{
    border-radius: 0px;
    font-size: 70%;
    z-index: 2;
}
/*
.sequencer_node .marker{
    width: 7px;
    height: var(--size-0);
    margin-right: var(--border-2);
    border-radius: 2px;
    background-color: var(--color-gray-350);
    color: var(--color-gray-350);
    display: inline-table;
    }*/

    .sequencer_node .marker{
        width: var(--size-full);
        height: var(--size-24);
        background-color: var(--color-gray-350);
        color: var(--color-gray-350);
        display: inline;
        border-radius: 2px;
        z-index: 1;
    }
    .wrap_sequencer_node_end:not(.with_drag_icon) {
        height: var(--size-24);
        width: var(--size-24);
        flex: 0 0 24px;
    }

    .wrap_sequencer_node_end{
      /*margin-right: var(--space-2xs);
      margin-left: var(--space-2xs);*/
  }
  .wrap_sequencer_node_start,
  .wrap_sequencer_node_end,
  .audio_sequencer_node,
  .video_sequencer_node{
      display: inline-flex;
      margin: var(--size-none) var(--border-4);
      border-radius: 3px;
  }

  .wrap_sequencer_node_start,
  .wrap_sequencer_node_end.with_drag_icon,
  .audio_sequencer_node,
  .video_sequencer_node{
      width: var(--size-24);
  }


  .end_music_wrap_audio_segment_node .space_holder{
    width: var(--size-10);
    height: var(--size-0);
    display: none;
}

.pause_audio_segment_node,
#pause_icons_display_container{
    /*white-space: pre;*/
    color: var(--color-gray-800);
    font-weight: 400;
}

/*.deleted_audio_segment_node{
    color: var(--color-gray-300);
    font-weight: bold;
    width: var(--size-40);
    height: var(--size-20);
    font-size: var(--text-lg-px);
    flex: 0 0 40px;
    cursor: pointer;
    white-space: normal;
}*/
.deleted_audio_segment_node{
    top: 0px;
    color: var(--color-gray-300);
    font-weight: bold;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    white-space: normal;
    display: inline-block;
}


.audio_sequencer[delete_node_expanded="true"] .deleted_audio_segment_node .deleted_label.strikethrough-icon.content,
.deleted_audio_segment_node.expanded .deleted_label.strikethrough-icon.content{
    display: inline-block;
    font-size: var(--text-base-px);
    font-weight: 400;
    width: -moz-fit-content;
    width: fit-content;
    white-space: break-spaces;
}

#restoreDetetedNodeBtn .pe-7s-refresh{
    transform: scalex(-1) rotate(67.5deg);
}

body.darkTheme .audio_sequencer[delete_node_expanded="true"] .deleted_audio_segment_node:not(.selected) .deleted_label.strikethrough-icon.content,
body.darkTheme .deleted_audio_segment_node.expanded:not(.selected) .deleted_label.strikethrough-icon.content,
[data-role=page].lighttext.transparent .audio_sequencer[delete_node_expanded="true"] .deleted_audio_segment_node:not(.selected) .deleted_label.strikethrough-icon.content,
[data-role=page].lighttext.transparent .deleted_audio_segment_node.expanded:not(.selected) .deleted_label.strikethrough-icon.content{
    color: var(--color-gray-550);
}
/*
.deleted_audio_segment_node.selected, .deleted_audio_segment_node.highlighted, .deleted_audio_segment_node.hover_highlighted{
    color: white;
}*/

/*.sequencer_node_container.do_not_show_non_editable_pause .pause_audio_segment_node[editable=false]{
    display:none;
}*/

.sequencer_node_container.do_not_show_pause_non_explicitely_displayed .pause_audio_segment_node[explicitly_displayed=false]{
    display:none;
}



.deleted_audio_segment_node .undo_deletion_icon,
/*body.browser.mobileweb .audio_sequencer:not([delete_node_expanded="true"]) .deleted_audio_segment_node:hover .deleted_label,
body.browser.mobileweb  .deleted_audio_segment_node:not(.expanded):hover .deleted_label,
.audio_sequencer:not([delete_node_expanded="true"]) .deleted_audio_segment_node:active .deleted_label,
.deleted_audio_segment_node:not(.expanded):active .deleted_label,*/
.deleted_audio_segment_node .deleted_label.strikethrough-icon.content,
.audio_sequencer[delete_node_expanded="true"] .deleted_audio_segment_node .deleted_label.strikethrough-icon.strike_icon,
.deleted_audio_segment_node.expanded .deleted_label.strikethrough-icon.strike_icon{
    display: none;

}
.deleted_audio_segment_node .deleted_label.strikethrough-icon.strike_icon{
    /*font-size: var(--text-lg-px);*/
    white-space: break-spaces;
}

/*.deleted_audio_segment_node .deleted_label,
body.browser.mobileweb .deleted_audio_segment_node:hover .undo_deletion_icon,
.deleted_audio_segment_node:active .undo_deletion_icon{

    width: var(--size-30);
    height: var(--size-20);
    cursor: pointer;
}*/
.deleted_audio_segment_node .deleted_label,
body.browser.mobileweb .deleted_audio_segment_node:hover .undo_deletion_icon,
.deleted_audio_segment_node:active .undo_deletion_icon{

    width: var(--size-30);
    height: var(--size-30);
    cursor: pointer;
}

/*
.deleted_audio_segment_node.selected .deleted_label,.deleted_audio_segment_node.selected .undo_deletion_icon,
.deleted_audio_segment_node.hover_highlighted .deleted_label,.deleted_audio_segment_node.hover_highlighted .undo_deletion_icon  {
    color: var(--text-light);
    
}*/
/*
.deleted_audio_segment_node .deleted_label,
.deleted_audio_segment_node .undo_deletion_icon{
    z-index: 1;
    position: absolute;
    top: 0px;

}*/

.deleted_audio_segment_node .deleted_label,
.deleted_audio_segment_node .undo_deletion_icon{
    z-index: 3;
    position: relative;
    top: 0;
}


.sequencer_node.deleted_audio_segment_node  .highlight_box{
    height:var(--size-30);
    top: 0px;
}

/*body.browser.mobileweb .deleted_audio_segment_node:hover{
    top: -1px;
    height: var(--size-27);
}*/
/*
body.browser.mobileweb .deleted_audio_segment_node:hover .undo_deletion_icon,
.deleted_audio_segment_node:active .undo_deletion_icon{
    display: inline-block;
    font-size: var(--text-xl-px);
}
.deleted_audio_segment_node .undo_deletion_icon{

    font-size: var(--text-md-px);
}*/
.sequencer_node_default_context_menu.horizontal_menu{

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.sequencer_node_default_context_menu.horizontal_menu .menu_item{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*margin: var(--space-3xs);*/
    cursor: pointer;
    min-width: var(--size-100);
}

.sequencer_node_default_context_menu.horizontal_menu .menu_item .menu_icon{
    flex: 0 0 30px;
    height: var(--size-36);
    width: var(--size-36);
    font-size: var(--text-lg-px);
    justify-content: center;
    align-items: center;
    display: flex;
}

.sequencer_node_default_context_menu.horizontal_menu .menu_item .menu_icon.pe-7s-pen{
    font-weight: 400;
}

.sequencer_node_default_context_menu input#textCorrectionInput{
    margin: var(--size-none) var(--space-2xs);
}

.sequencer_node_default_context_menu.horizontal_menu #insertBtn.menu_item .menu_icon{
    font-size: var(--text-2xl-px);
}

.sequencer_node_default_context_menu.horizontal_menu #saveAsClipBtn.menu_item .menu_icon.ion-paperclip{
  font-size: var(--text-2xl-px);
}

.sequencer_node_default_context_menu.horizontal_menu .menu_item .menu_label{
    padding: var(--size-none) var(--space-3xs) var(--size-none) var(--size-none);
    flex: 0 0 auto;
}

.tippy-box > .tippy-arrow:before{
    color: var(--color-gray-200);
}

body[appname="trebble"] .ui-page-active.lighttext .tippy-box >.tippy-arrow:before,
body[appname="trebble"].darkTheme .tippy-box > .tippy-arrow:before{
    color: var(--color-black-20);
}

.sequencer_node_default_context_menu.horizontal_menu .menu_item .menu_label{
    /*display: none;*/
}

body[appname="trebble"] .tippy-content{
    padding: var(--space-3xs);
}

.wrap_sequencer_node_start.selected .icon,
.wrap_sequencer_node_end.selected .icon,
.audio_sequencer_node.selected .icon,
.audio_sequencer_node.selected.hover_highlighted .icon,
.video_sequencer_node.selected .icon,
.video_sequencer_node.selected.hover_highlighted .icon{
    background-color: var(--trebble-primary);
}

.icon.autoscroll-icon{
    height: var(--size-40);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-40);
    position: relative;
}

.icon.autoscroll-icon .arrow-up{

    font-size: var(--text-xl-px);
    position: absolute;
    margin-left: var(--space-2xs);
    width: var(--size-20);
    height: var(--size-20);
    left: 0px;
    top: 0px;
    justify-content: center;
    align-items: center;
    display: flex;

}

.icon.autoscroll-icon .circle{
    font-size: var(--text-2xs-px);
    height: var(--size-4);
    display: flex;
    width: var(--size-4);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    border: var(--border-2) solid var(--text-dark);
}
[data-role=page].lighttext .icon.autoscroll-icon .circle{
    border-color: white;
}

#autoScrollBtn.active .icon.autoscroll-icon .circle{
    border: var(--border-2) solid var(--trebble-primary);
}

.icon.autoscroll-icon .arrow-down{

    font-size: var(--text-xl-px);
    position: absolute;
    margin-left: var(--space-2xs);
    width: var(--size-20);
    bottom: 0px;
    left: 0px;
    height: var(--size-20);
    justify-content: center;
    align-items: center;
    display: flex;

}

.wrap_sequencer_node_start.highlighted .icon,
.wrap_sequencer_node_start.highlighted .marker,
.wrap_sequencer_node_end.highlighted .icon,
.wrap_sequencer_node_end.highlighted .marker,
.audio_sequencer_node.highlighted .icon,
.audio_sequencer_node.highlighted .marker,
.video_sequencer_node.highlighted .icon,
.video_sequencer_node.highlighted .marker{
    background-color: var(--color-gray-700);
}

.wrap_sequencer_node_start.highlighted .marker,
.wrap_sequencer_node_end.highlighted .marker{
    color: var(--color-gray-700);
}

.wrap_sequencer_node_start.hover_highlighted .icon,
.audio_sequencer_node.hover_highlighted .icon,
.video_sequencer_node.hover_highlighted .icon,
.wrap_sequencer_node_start.hover_highlighted .marker,
.audio_sequencer_node.hover_highlighted .marker,
.video_sequencer_node.hover_highlighted .marker,
.wrap_sequencer_node_end.hover_highlighted .icon,
.wrap_sequencer_node_end.hover_highlighted .marker{
   box-shadow: var(--shadow-focus);
   background-color: var(--trebble-primary-300);
}

.wrap_sequencer_node_end.hover_highlighted .marker{
   color:   var(--trebble-primary-300);
}


body.browser.mobileweb .pause_audio_segment_node:not(.not_selectable):hover,
body.browser.mobileweb .punctiation_audio_segment_node:not(.not_selectable):hover,
body.browser.mobileweb .unsupported_audio_segment_node:not(.not_selectable):hover,
body.browser.mobileweb .word_audio_segment_node:not(.not_selectable):hover{
    background:var(--color-gray-150);
    border-radius: 2px;
    color:var(--text-dark);
}
body.browser.mobileweb .deleted_audio_segment_node:not(.not_selectable):hover{
    background:var(--color-gray-150);
    border-radius: 2px;
    color: var(--pulse-gray);
}

.sequencer_node_container  .sequencer_node.punctiation_audio_segment_node{
    display: none;
}
.sequencer_node_container.break_down_text_automatically > fullstop.sequencer_node.punctiation_audio_segment_node:nth-of-type(5n),
.sequencer_node_container.break_down_text_automatically > fullstop.sequencer_node.punctiation_audio_segment_node:last-of-type{
    display: flex;
    height: var(--size-2em);
    width: var(--size-full);
}

.pause_audio_segment_node,
.punctiation_audio_segment_node,
.unsupported_audio_segment_node,
.word_audio_segment_node{

}

.wrap_sequencer_node_end.sequencer_node.selected{
    background-color: transparent;
}

.wrap_sequencer_node_end.sequencer_node.selected .marker,
.wrap_sequencer_node_start.sequencer_node.selected .icon,
.wrap_sequencer_node_end.with_drag_icon.sequencer_node.selected .icon{
    background-color: var(--trebble-primary);
}

.wrap_sequencer_node_end.sequencer_node.selected .marker{
    color: var(--trebble-primary);
}


body.browser.mobileweb .pause_audio_segment_node:not(.highlighted):not(.selected):not(.not_selectable):hover,
body.browser.mobileweb .punctiation_audio_segment_node:not(.highlighted):not(.selected):not(.not_selectable):hover,
body.browser.mobileweb .unsupported_audio_segment_node:not(.highlighted):not(.selected):not(.not_selectable):hover,
body.browser.mobileweb .word_audio_segment_node:not(.highlighted):not(.selected):not(.not_selectable):hover,
body.browser.mobileweb .deleted_audio_segment_node:not(.highlighted):not(.selected):not(.not_selectable):hover{
  background:var(--color-gray-150);
  /*border-radius: 2px;*/
}


#commentOverviewBox * .commentBoxWrapper {
    width: var(--size-half);
    background-color: transparent;
    color: white;
    bottom: 0px;
}
[data-role=popup] * .capsuleCard .commentBoxWrapper * #comment,
[data-role=page].userProfileDetailsPage * .capsuleCard .commentBoxWrapper * #comment,
[data-role=page].playlistDetailsPage * .capsuleCard .commentBoxWrapper * #comment{
  color: white;
}
#commentOverviewBox * .commentBoxWrapper * #comment {
    height: var(--size-39);
    color: white;
    border: var(--border-0);
}


/** bottomSheet Css start **/


@keyframes ball1Move-0 {
  0% {
    transform: translate(0, 0);
}
62% {
    transform: translate(-6px, -3px);
}
100% {
    transform: translate(0, 0);
}
}
@keyframes ball2Move-0 {
  0% {
    transform: translate(0, 0);
}
62% {
    transform: translate(3px, 6px);
}
100% {
    transform: translate(0, 0);
}
}
@keyframes ballHover-0 {
  0% {
    transform: scale(1);
}
16% {
    transform: scale(1.016);
}
100% {
    transform: scale(1);
}
}
@keyframes fade {
  0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes horizontal-move {
  0% {
    transform: scale(2) translateX(0);
    opacity: 1;
    display: flex;
}
100% {
    transform: scale(2) translateX(6vw);
    opacity: 0;
    display: none;
}
}
@keyframes horizontal-move-2 {
  0% {
    transform: translateX(-15vw);
    opacity: 0;
}
100% {
    transform: translateX(0);
    opacity: 1;
}
}
@keyframes rotate180-0 {
  from {
    transform: rotate(-180deg);
}
to {
    transform: rotate(0deg);
}
}
@keyframes rotate180-1 {
  from {
    transform: rotate(0deg);
}
to {
    transform: rotate(-180deg);
}
}
@keyframes rotate180-reverse-0 {
  from {
    transform: rotate(180deg);
}
to {
    transform: rotate(0deg);
}
}
@keyframes rotate180-reverse-1 {
  from {
    transform: rotate(0deg);
}
to {
    transform: rotate(180deg);
}
}
@keyframes slideDown-1 {
  from {
    opacity: 0;
    transform: translateY(-100%);
}
to {
    opacity: 1;
    transform: translateY(0%);
}
}
@keyframes slideUp-0 {
  from {
    transform: translateY(0%);
}
to {
    transform: translateY(100%);
}
}
@keyframes slideUp-1 {
  from {
    transform: translateY(100%);
}
to {
    transform: translateY(0%);
}
}
@keyframes markChange-0 {
  0% {
    background: unset;
}
62% {
    background: var(--text-dark);
}
100% {
    background: unset;
}
}
@keyframes markChange-1 {}
@keyframes pop-countryselect-1 {
  from {
    transform: scale(1, 0.33) translate(0, 100%);
}
to {
    transform: scale(1, 1) translate(0, 0);
}
}
@keyframes pop-countryselect-0 {
  from {
    transform: scale(1, 1) translate(0, 0);
}
to {
    transform: scale(1, 0.33) translate(0, 100%);
}
}
:root {
  --translatey: 0px;
}

body {
  perspective: 1000px;
  font-family: "Roboto";
}

.c-bottom-sheet {
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  position: fixed;
  top: 0;
  height: var(--vh-full);
  width: var(--vw-full);
  z-index: 15;
  transition: opacity, visibility 0.25s;
}
.c-bottom-sheet.active {
  visibility: visible;
  pointer-events: unset;
  z-index: 9999;
}
.c-bottom-sheet__scrim {
  opacity: 0;
  display: block;
  position: absolute;
  height: var(--vh-full);
  width: var(--vw-full);
  box-sizing: border-box;
  background-color: var(--color-black-30);
  transition: opacity 0.3s;
  top: 0;
}
.active .c-bottom-sheet__scrim {
  opacity: 1;
}
.c-bottom-sheet__sheet {
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: -100px;
  box-sizing: border-box;
  width: var(--size-full);
  min-height: 38vh;
  background-color: var(--color-white);
  border-radius: 12px 12px 0 0;
  padding: 0 1.5rem calc(var(--text-base-rem) + var(--size-100)) 1.5rem;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(100%);
}
.active .c-bottom-sheet__sheet {
  transform: translateY(0);
}
.c-bottom-sheet__sheet.active {
  transform: var(--translateY);
}
.c-bottom-sheet__handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: var(--text-base-rem);
}
.c-bottom-sheet__handle > span {
  display: block;
  height: var(--size-2);
  width: 28px;
  margin-bottom: var(--border-2);
  background-color: var(--color-black-30);
  border-radius: 2px;
}
.c-bottom-sheet__item {
  width: var(--size-full);
  list-style: none;
  border-bottom: var(--border-1) solid var(--color-black-30);
}
.c-bottom-sheet__item:first-child {
  margin-top: var(--space-lg);
  border-top: var(--border-1) solid var(--color-black-30);
}
.c-bottom-sheet__item.active {
  font-family: sans-serif;
  font-weight: 900;
}
.c-bottom-sheet__link {
  display: block;
  padding: var(--text-base-rem) 0;
}
.c-bottom-sheet__link:hover, .c-bottom-sheet__link:visited {
  color: unset;
  text-decoration: none;
}
.c-bottom-sheet__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 80vh;
  overflow: auto;
  margin-bottom: var(--space-lg);

}
.c-bottom-sheet__tick {
  display: none;
  font-size: var(--text-xl-px);
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
}
.c-bottom-sheet__tick:before {
  color: var(--color-green-600);
}
.c-bottom-sheet__item.active .c-bottom-sheet__tick {
  display: block;
}

/*** bottomSheet Css End ***/
.commentBoxWrapper {
    height: 61px;
    width: var(--size-full);
    box-sizing: border-box;
    padding-left: var(--space-2xs);
    background-color: white;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex: 0 0 61px !important;
    -webkit-flex: 0 0 61px !important;
    padding-right: var(--space-2xs);
    position: fixed;
    bottom: 0px;
}
#songPoppupMenu * .commentBoxWrapper,
.popup-menu-content * .commentBoxWrapper {
    left: 0px;
}
.commentBoxWrapper * #comment {
   /* box-shadow: var(--size-none) var(--size-none) var(--size-none) var(--size-none);*/
   max-height: var(--size-39);
   color: var(--text-dark);
   font-size: var(--text-sm);
 /*
 border-color: var(--color-white-20);*/
}
.commentBoxWrapper > paper-input-decorator {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}
.commentBoxWrapper > #sendButton {
    color: var(--trebble-primary);
    flex: 0 0 50px;
    -webkit-flex: 0 0 50px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}
.commentBoxWrapper > #sendButton.disabled {
    color: grey;
}
#commentListPopupContent {
    width: var(--size-full);
    bottom: 0px;
    margin-top: var(--size-none);
    padding: var(--size-none);
    justify-content: flex-start;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}
#commentListPopupContent > div:first-child {
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    height: var(--size-full);
}
.commentListItem {
    box-sizing: border-box;
    padding: var(--border-6);
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
}
/*
.commentListItem:active {
    background-color: var(--bg-light);
}
[data-role=popup] * .commentListItem:active {

    background-color: var(--color-white-20);
}
*/

.NotficationCard .userCoverImage,
.commentListItem > .userAvatar,
.userAvatar {
    border-radius: 50%;
    flex: 0 0 30px;
    -webkit-flex: 0 0 30px;
    height: var(--size-30);
    width: var(--size-30);
    -o-object-fit: cover;
       object-fit: cover;
}

.NotficationCard .userCoverImage,
.NotficationCard * .userAvatar {
    background-color: var(--color-gray-150);
}
[data-role=popup] * .commentListItem {
    border-bottom: var(--border-1) solid var(--color-white-20);
}
[data-role=page] * .commentListItem {
    border-bottom: var(--border-1) solid var(--color-black-5);
}
.commentListItem > .content {
    padding-right: var(--border-6);
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    box-sizing: border-box;
    padding-left: var(--border-6);
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}
.commentListItem > .content > .commenterInfo .commentUsername {
    /* color: var(--trebble-primary) !important; */
    
    opacity: 0.5;
}
.commentListItem > .content > .commentText {
    font-size: var(--text-sm);
    text-align: left;
}
.commentListItem > .content > .socialInfos {
    align-items: center;
    -webkit-align-items: center;
    flex: 0 0 30px;
    -webkit-flex: 0 0 30px;
    height: var(--size-30);
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    -webkit-justify-content: flex-start;
    -webkit-align-items: stretch;
}

.commentListItem .sentViaAssistantInfo{
    font-size: 70%;
    opacity: 0.5;
    text-align: left;
}
.socialInfos > .transparent_button {
    margin: var(--size-none);
    height: auto;
    align-items: center;
    display: flex;
    -webkit-align-items: center;
    display: -webkit-flex;
    font-size: var(--text-sm);
    line-height: var(--line-height-sm);
    padding: var(--size-none) var(--border-4);
    color: var(--trebble-primary);
}
.socialInfos > .delimiter {
    margin-left: var(--space-2xs);
    margin-right: var(--space-2xs);
}
.commentListItem > .content > .socialInfos > div {
    display: flex;
    align-items: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    line-height: var(--line-height-sm);
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
}
.commentListItem > .content > .socialInfos > div.likesInfo {
    margin: var(--size-none);
    justify-content: center;
    -webkit-justify-content: center;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    opacity: 1;
}

[data-role=page] * .commentListItem,
[data-role=page] * .commentListItem * .itemTitle,
[data-role=page] * .commentListItem * .itemSubtitle {
    color: var(--text-dark) !important;
}
[data-role=page] * .lighttext * .commentListItem,
[data-role=page] * .lighttext * .commentListItem * .itemTitle,
[data-role=page] * .lighttext * .commentListItem * .itemSubtitle {
    color: white !important;
}
[data-role=page] * .commentListItem > .userAvatar {
    background-color: var(--color-gray-150);
}

[data-role=page].lighttext * .capsuleCard>.ownerInfo>.userAvatar{
    background-color:var(--color-white-10);
}

#collection_repeat_container {
    overflow: auto;
    text-align: center;
    overflow-x: hidden;
}

.collection_container[no_more_data_to_load=true] .sentinel_block_wrapper{
    display: none;
}

.load_more_button_block_wrapper #load_more_btn{
    display: flex;
    min-width: var(--size-200);
    margin: auto;
    max-width: var(--size-300);
    align-items: center;
    justify-content: center;
}

@media (min-width: 800px) {



  .playlistDetailsPage.publicPage #myCapsulesListWrapper * #collection_repeat_container  .capsuleCard,
  .playlistDetailsPage.publicPage #myArchivedCapsulesListWrapper * #collection_repeat_container  .capsuleCard  {
    width: 49%;
    display: inline-flex;
    /* height: var(--size-470); */
    vertical-align: middle;
    margin-left: var(--size-micro);
    margin-right: var(--size-micro);
    /* align-items: center; */
    /* justify-content: center; */
}
/*.userProfileDetailsPage  * #collection_repeat_container  .capsuleCard ,
.playlistDetailsPage.publicPage #myCapsulesListWrapper * #collection_repeat_container  .capsuleCard,
.playlistDetailsPage.publicPage #myArchivedCapsulesListWrapper * #collection_repeat_container  .capsuleCard{
    position: relative;
    width: 96%;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    
    vertical-align: middle;
    margin: var(--size-micro);
    margin-top: var(--size-micro);
    margin-bottom: var(--size-micro);

    }*/

}
@media (min-width: 1200px) {
    .userProfileDetailsPage  * #collection_repeat_container  .capsuleCard ,
    .playlistDetailsPage.publicPage #myCapsulesListWrapper * #collection_repeat_container  .capsuleCard,
    .playlistDetailsPage.publicPage #myArchivedCapsulesListWrapper * #collection_repeat_container  .capsuleCard{
        width: 49%;
        display: inline-flex;
        /* height: var(--size-470); */
        vertical-align: middle;
        margin: var(--size-micro);

        /* align-items: center; */
        /* justify-content: center; */
    }
}

@media (min-width: 1300px) {
  #myCapsulesListWrapper *  #collection_repeat_container  .capsuleCard,
  .playlistDetailsPage.publicPage #myCapsulesListWrapper * #collection_repeat_container  .capsuleCard,
  .playlistDetailsPage.publicPage #myArchivedCapsulesListWrapper * #collection_repeat_container  .capsuleCard {
    width: 32%;
    display: inline-flex;
    /* height: var(--size-470); */
    vertical-align: middle;
    margin-left: var(--size-micro);
    margin-right: var(--size-micro);
    /* align-items: center; */
    /* justify-content: center; */
}
}
#myNotificationsListWrapper * #collection_repeat_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    display: -ms-flex;
    -ms-align-items: center;
    display: -moz-flex;
    -moz-flex-direction: column;
    -moz-align-items: center;
    background-color: var(--bg-light);
    height: calc(var(--vh-full) - var(--text-7xl-px));
}
.urlPreviewsPlaceholder > div {
    /*margin: var(--border-4);*/
}

.urlPreviewsPlaceholder a,
span.linkAlternative {
    color: var(--trebble-primary) !important;
    font-weight: 700;
    cursor: pointer;
}
#myCapsulesListWrapper * #collection_repeat_container  .capsuleCard .urlPreviewsPlaceholder,
#myArchivedCapsulesListWrapper * #collection_repeat_container  .capsuleCard .urlPreviewsPlaceholder{
  height: 76px;
  cursor: pointer;

}
.capsuleCard .ui-select{
  padding: var(--size-none) var(--space-2xs);
}
.urlPreviewsPlaceholder{
    overflow: auto;
    flex: 0 0 76px;
    -webkit-flex: 0 0 76px;
    -moz-flex: 0 0 76px;
    -ms-flex: 0 0 76px;
}
.urlPreviewCard {
  cursor: pointer;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  height: 68px;
  padding: var(--border-4);
  box-sizing: border-box;
  width: calc(var(--size-full) - var(--border-4));
  border: var(--border-2) solid var(--bg-light);
}

[data-role=page].lighttext * .capsuleCard .urlPreviewCard{
  border-color:  var(--color-white-20);
}

body.browser.mobileweb [data-role=page].lighttext .urlPreviewCard:hover,
[data-role=page].lighttext .urlPreviewCard:active {
  background-color:  var(--bg-overlay-light);
}
.urlPreviewCard > .thumbnailWrapper {
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    display: flex;
    display: -webkit-flex;
    flex: 0 0 120px;
    -webkit-flex: 0 0 120px;
}
.urlPreviewCard > .info {
    padding: var(--border-4);
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    overflow: hidden;
}
.urlPreviewCard > .thumbnailWrapper > .thumbnail {
    width: var(--size-full);
    height: calc(var(--size-70) - var(--space-2xs) - var(--space-2xs));
    -o-object-fit: contain;
       object-fit: contain;
}
.urlPreviewCard > .info > .title.itemTitle {
    font-size: var(--text-xs);
    opacity: 1;
    font-weight: 600;
}
.urlPreviewCard > .info > .description {
    opacity: 0.5;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: var(--text-xs);
    color: white;
    font-weight: 400;
    text-align: left;
    margin: var(--border-2) var(--size-none);
    height: var(--size-30);
}
.urlPreviewCard > .info > .itemSubtitle {
    margin-top: var(--border-4);
    font-size: var(--text-2xs);
    opacity: 1;
}
body.browser.mobileweb  .urlPreviewCard:hover ,
.urlPreviewCard:active {
  background-color: var(--bg-light);
}
body.browser.mobileweb [data-role=popup] .urlPreviewCard:hover,
[data-role=popup] .urlPreviewCard:active,
body.browser.mobileweb [data-role=page].userProfileDetailsPage  .urlPreviewCard:hover,
[data-role=page].userProfileDetailsPage  .urlPreviewCard:active,
body.browser.mobileweb #player  .urlPreviewCard:hover,
#player .urlPreviewCard:active {
  background-color: var(--color-white-10);
}


body.browser.mobileweb  .urlPreviewCard:hover > .thumbnailWrapper > .thumbnail,
.urlPreviewCard:active > .thumbnailWrapper > .thumbnail{
  opacity: 0.8;
}
#comment {
    border-radius: 0px;
    margin: var(--size-none);
    padding: var(--size-none);
    margin-top: var(--space-3xs);
}
paper-input-decorator > .unfocused-underline {
    background-color: transparent;
}
.songInfo {
    display: flex;
    display: -webkit-flex;
    max-height: var(--size-70);
}
.songInfo > img {
    -o-object-fit: cover;
       object-fit: cover;
    flex: 0 0 50px;
}
#commentListPopupContent * .songInfo {
    background-color: var(--bg-light);
}
.songInfo > .songAndArtist,
div.songLibraryWrapper.playlist > .infiniteListItem.textonly > .textwrapper {
    padding: var(--border-6);
    box-sizing: border-box;
}
#commentListPopupContent .songInfo > .songAndArtist{
    width: calc(var(--size-full) - var(--size-70));
}

div.songLibraryWrapper.playlist > .infiniteListItem{
  padding: var(--size-em-2xs);
}

div.songLibraryWrapper.playlist > .infiniteListItem.textonly > .textwrapper {
    padding: var(--border-6);
    width: calc(var(--size-full) - var(--space-xl) - 0.4em);
    height: calc(var(--space-xl) - var(--border-6) - var(--border-1));
    box-sizing: border-box;
}
.replySummary {
    align-items: center;
    -webkit-align-items: center;
    display: flex;
    height: 35px;
    display: -webkit-flex;
    color: var(--trebble-primary);
    cursor: pointer;
    padding: var(--size-none) var(--border-4);
    border-top: var(--border-1) solid var(--color-white-5);
}

body.mobileweb .replySummary:hover,
.replySummary:active{
    background-color: var(--trebble-primary);
    color: white;
}
[data-role=page] * .replySummary {
    border-top: var(--border-1) solid var(--color-black-5);
}
.replySummary:active {
    background-color: var(--color-white-20);
}


.capsuleCard > .actionButtonWrapper > .actionButton.ion-ios7-loop-strong.disabled:before{
    height: var(--size-1em);
    width: var(--size-1em);
    animation: rotation 1.4s infinite linear;
}

@keyframes rotation {
  to {
    transform: rotate(360deg);
}
}

.floating{
    animation-name: floating;   
    animation-duration: 1s;
    animation-iteration-count: infinite;

}
.unconsumed.ownerDataBubble,
.ownerDataBubble.unread{
    animation: greenpulse 1.3s infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(15%);  
    }   
    100% {
        transform: translateY(0%);
    }           
}
  @keyframes trebble_flash {
	0% { opacity: 1; } 
	50% { opacity: .6; } 
	100% { opacity: 1; }
  }



body.browser.embedded:not(.darkTheme)  > [data-role=page] * #loadingImg,
body.browser.embedded:not(.darkTheme)  > [data-role=page] * #trebbleCustomLoadingWidget,
body.browser.embedded:not(.darkTheme)  > [data-role=popup] * #loadingImg,
body.browser.embedded:not(.darkTheme)  > [data-role=popup] * #trebbleCustomLoadingWidget,
body.browser:not(.darkTheme)  > [data-role=page] * #loadingImg,
body.browser:not(.darkTheme)  > [data-role=page] * #trebbleCustomLoadingWidget,
body.browser:not(.darkTheme)  > [data-role=popup] * #loadingImg,
body.browser:not(.darkTheme)  > [data-role=popup] * #trebbleCustomLoadingWidget {
  margin: var(--space-md);
  border: var(--border-2) solid var(--color-black-20);
  border-top-color: var(--color-black-80);
}

body.browser.embedded.darkTheme  > [data-role=page].lighttext * #loadingImg,
body.browser.embedded.darkTheme  > [data-role=page].lighttext * #trebbleCustomLoadingWidget,
body.browser.embedded.darkTheme  > [data-role=popup].lighttext * #loadingImg,
body.browser.embedded.darkTheme  > [data-role=popup].lighttext * #trebbleCustomLoadingWidget,
body.browser.darkTheme  > [data-role=page].lighttext * #loadingImg,
body.browser.darkTheme  > [data-role=page].lighttext * #trebbleCustomLoadingWidget,
body.browser.darkTheme  > [data-role=popup].lighttext * #loadingImg,
body.browser.darkTheme  > [data-role=popup].lighttext * #trebbleCustomLoadingWidget,
body.browser.darkTheme  > [data-role=page].transparentBackground * #loadingImg,
body.browser.darkTheme  > [data-role=page].transparentBackground * #trebbleCustomLoadingWidget,
body.browser.darkTheme  > [data-role=popup].transparentBackground * #loadingImg,
body.browser.darkTheme  > [data-role=popup].transparentBackground * #trebbleCustomLoadingWidget,

body.browser.embedded  > [data-role=page].darkTheme * #loadingImg,
body.browser.embedded  > [data-role=page].darkTheme * #trebbleCustomLoadingWidget,
body.browser.embedded  > [data-role=popup].darkTheme * #loadingImg,
body.browser.embedded  > [data-role=popup].darkTheme * #trebbleCustomLoadingWidget,
body.browser  > [data-role=page].darkTheme * #loadingImg,
body.browser  > [data-role=page].darkTheme * #trebbleCustomLoadingWidget,
body.browser  > [data-role=popup].darkTheme * #loadingImg,
body.browser  > [data-role=popup].darkTheme * #trebbleCustomLoadingWidget,


body.browser.embedded  > [data-role=page].lighttext * #loadingImg,
body.browser.embedded  > [data-role=page].lighttext * #trebbleCustomLoadingWidget,
body.browser.embedded  > [data-role=popup].lighttext * #loadingImg,
body.browser.embedded  > [data-role=popup].lighttext * #trebbleCustomLoadingWidget,
body.browser  > [data-role=page].lighttext * #loadingImg,
body.browser  > [data-role=page].lighttext * #trebbleCustomLoadingWidget,
body.browser  > [data-role=popup].lighttext * #loadingImg,
body.browser  > [data-role=popup].lighttext * #trebbleCustomLoadingWidget,
body.browser  > [data-role=page].transparentBackground * #loadingImg,
body.browser  > [data-role=page].transparentBackground * #trebbleCustomLoadingWidget,
body.browser  > [data-role=popup].transparentBackground * #loadingImg,
body.browser  > [data-role=popup].transparentBackground * #trebbleCustomLoadingWidget {
  margin: var(--space-md);
  border: var(--border-2) solid var(--color-white-20);
  border-top-color: var(--color-white-80);
}
.ui-loader.ui-corner-all.ui-body-t.ui-loader-default {
    /*opacity: 0.5;*/
    opacity: 1;
    background-color: transparent;
}
body.browser.darkTheme .c-bottom-sheet__sheet,
.c-bottom-sheet.darkTheme .c-bottom-sheet__sheet{
    color: white;
    background-color: var(--color-white-20);
    -webkit-backdrop-filter: blur(30px);
            backdrop-filter: blur(30px);
}

@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
   body.browser.darkTheme .c-bottom-sheet__sheet,
   .c-bottom-sheet.darkTheme .c-bottom-sheet__sheet{
    color: var(--color-black);
    background-color: var(--color-gray-100);

}
}

.notificationPreviewAlert {
    padding: var(--border-4);
    border-radius: 2px;
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    min-height: var(--size-60);
    max-height: var(--size-150);
    /*max-width: 300px;*/
    width: var(--size-full);
    justify-content: center;
    align-items: center;
    background-color: var(--color-white-80);
    color: white;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    
}

@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
    .notificationPreviewAlert {
        background-color: var(--text-dark);
    }
}
.notificationPreviewAlert * .highlight {
    color: var(--trebble-primary);
}
.notificationPreviewAlert > .actionNotificationIconWrapper {
    width: var(--size-60);
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    font-size: var(--text-xl);
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    color: var(--text-dark);
}
.notificationPreviewAlert > .notifcationInfo {
    justify-content: center;
    -webkit-justify-content: center;
    padding-right: var(--space-2xs);
    padding-left: var(--space-2xs);
    padding: var(--border-6);
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    font-size: var(--text-md);
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    max-width: var(--size-300);
}
.notificationPreviewAlert > .notifcationInfo > .notificationMessage.itemTitle {
    font-size: var(--text-sm);
    color: var(--text-dark);
    white-space: normal;
}
.NotficationCard {
    /* display: flex; */
    /* justify-content: center; */
    /* flex-direction: column; */
    /* display: -webkit-flex; */
    /* -webkit-justify-content: center; */
    /* -webkit-flex-direction: column; */
    
    min-height: var(--size-250);
    background-color: white;
    border-radius: 4px;
    color: var(--text-dark);
    box-sizing: border-box;
    padding: var(--space-2xs);
    width: var(--size-full);
    max-width: var(--size-500);
}
#myNotificationsListWrapper * .NotficationCard {
    min-height: auto;
    max-width: var(--size-600);
    border-bottom: var(--border-1) solid var(--color-black-5);
    border-radius: 0px;
}
.NotficationCard > .wrapper > .content.clickable{
    cursor: pointer;
}
.NotficationCard > .wrapper > .content {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    width: calc(var(--size-full) - var(--size-icon-md));
    text-align: left;
}
.NotficationCard > .wrapper > .content > .songInfo > .songAndArtist{
    width: calc(var(--size-full) - var(--size-70));
}
.NotficationCard.songPicked {
    min-height: var(--size-200);
}
.NotficationCard > .wrapper {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
}

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

.NotficationCard .imageWrapper,
.NotficationCard > .wrapper > .illustration {
    box-sizing: border-box;
    padding-right: var(--space-2xs);
    flex: 0 0 45px;
    -webkit-flex: 0 0 45px;
    justify-content: center;
    display: flex;
    -webkit-justify-content: center;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    display: -webkit-flex;
}
.NotficationCard > .wrapper > .content > .footer,
.NotficationCard > .content > .footer {
    display: -webkit-flex;
    padding-top: var(--border-4);
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    white-space: nowrap;
    font-size: var(--text-sm);
    padding-bottom: var(--border-4);
    color: var(--color-gray-400);
    justify-content: flex-end;
    -webkit-align-itemsjustify-content: flex-end;
}
.NotficationCard > .wrapper > .illustration > i {
    font-size: var(--text-3xl);
}
.popupContent > .NotficationCard {
    font-size: var(--text-sm);
    margin-left: var(--space-2xs);
    margin-right: var(--space-2xs);
}
.popupContent > .NotficationCard.userFollowingNotification > .content > .subContent,
.popupContent > .NotficationCard.trebbleFollowingNotification > .content > .subContent {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    height: var(--size-200);
    align-items: center;
    -webkit-align-items: center;
}
.popupContent > .NotficationCard.userFollowingNotification > .content > .subContent > .imageWrapper,
.popupContent > .NotficationCard.trebbleFollowingNotification > .content > .subContent > .imageWrapper {
    flex: 0 0 60px;
    -webkit-flex: 0 0 60px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
}
.popupContent > .NotficationCard.userFollowingNotification > .content > .subContent > .imageWrapper > .userCoverImage,
.popupContent > .NotficationCard.trebbleFollowingNotification > .content > .subContent > .imageWrapper > .userCoverImage {
    flex: 0 0 45px;
    -webkit-flex: 0 0 45px;
    width: var(--size-46);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--color-gray-100);
    border-radius: 50%;
}
.NotficationCard > .message {
    /* font-size: var(--text-sm); */
}
.NotficationCard > .content > p,
.NotficationCard > .content > div {
    display: flex;
    display: -webkit-flex;
    /*-webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;*/
}
.NotficationCard > .content > .message {
    display: block;
}
.NotficationCard > .content > .helpMessage {
    display: block;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}
.NotficationCard > .content > p > .iconWrapper,
.NotficationCard > .content > div > .iconWrapper {
    font-size: var(--text-7xl);
}
.homePanel {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    background-color: white;
}
.homePanel * .menuBox {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    color: var(--text-dark);
}
.homePanel * .menuBox > .panelMenuItem {
    padding-left: var(--border-4);
    padding-right: var(--border-4);
    flex: 0 0 45px;
    -webkit-flex: 0 0 45px;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    cursor: pointer;
}

.homePanel * .menuBox > #downloadExtensionBtn,
.homePanel * .menuBox > #installPWABtn,
.homePanel * .menuBox > #upgradeBtn,
#mySubscriptions #showUserRefferalPageBtn,
#upgradeBtn,
.homePanel * .menuBox > #createMyOwnTrebbleBtn,
.homePanel * .menuBox > #createMyFirstJourneyBtn{

    color: white;
    background-color: white;
    border: var(--border-0);
    width: var(--size-inherit);
    text-align: center;
    font-weight: 700;
    padding-top: var(--text-md);
    padding-bottom: var(--text-md);
    /*opacity: 0.8;*/
    
    max-width: var(--size-200);
    cursor: pointer;
    background:linear-gradient(to bottom right, var(--success-green), var(--success-green-alt));
    animation: gradient-text-bg 1s linear infinite;
    box-shadow: var(--shadow-glow);

}

body.browser.mobileweb .homePanel * .menuBox > #downloadExtensionBtn:hover,
.homePanel * .menuBox > #downloadExtensionBtn:active,
body.browser.mobileweb .homePanel * .menuBox > #installPWABtn:hover,
.homePanel * .menuBox > #installPWABtn:active,
body.browser.mobileweb .homePanel * .menuBox > #upgradeBtn:hover,
.homePanel * .menuBox > #upgradeBtn:active,
body.browser.mobileweb .homePanel * .menuBox > #createMyOwnTrebbleBtn:hover,
.homePanel * .menuBox > #createMyOwnTrebbleBtn:active,
body.browser.mobileweb .homePanel * .menuBox > #createMyFirstJourneyBtn:hover,
.homePanel * .menuBox > #createMyFirstJourneyBtn:active{
  opacity: 1;
}

@media ( max-height: 470px) {
    .homePanel * .menuBox > .panelMenuItem {
        flex: 0 0 36px;
        -webkit-flex: 0 0 36px;
    }
}


.homePanel * .menuBox > #downloadExtensionBtn,
.homePanel * .menuBox > #installPWABtn,
.homePanel * .menuBox > #upgradeBtn{
  display:none;
}

.panelMenuItem > .menuIcon.pe-7s-bell,
.panelMenuItem > .menuIcon.pe-7s-help2,
.panelMenuItem > .menuIcon.pe-7s-help1,
.settingMenuBox > .menuIcon.pe-7s-bell,
.settingMenuBox > .menuIcon.pe-7s-help2{
    position: relative
}
.panelMenuItem > .menuIcon.pe-7s-bell > .ownerDataBubble,
.panelMenuItem > .menuIcon.pe-7s-help2 > .ownerDataBubble,
.panelMenuItem > .menuIcon.pe-7s-help1 > .ownerDataBubble,
.settingMenuBox > .menuIcon.pe-7s-bell > .ownerDataBubble,
.settingMenuBox > .menuIcon.pe-7s-help2 > .ownerDataBubble{
    display: none;
    background-color: var(--trebble-primary);
    width: var(--size-10);
    height: var(--size-10);
    right: calc(var(--size-half) - var(--space-2xs));
    top: 0px;
    animation: redpulse 1.3s infinite;
}
.panelMenuItem > .menuIcon.pe-7s-help2 > .ownerDataBubble,
.panelMenuItem > .menuIcon.pe-7s-help1 > .ownerDataBubble,
.settingMenuBox > .menuIcon.pe-7s-help2 > .ownerDataBubble{
    /*background-color: var(--pulse-green);*/
    background-color: var(--trebble-primary);
    animation: greenpulse 1.3s infinite;
}
.panelMenuItem > .menuIcon.pe-7s-bell > .ownerDataBubble.unread,
.panelMenuItem > .menuIcon.pe-7s-help2 > .ownerDataBubble.unread,
.panelMenuItem > .menuIcon.pe-7s-help1 > .ownerDataBubble.unread,
.settingMenuBox > .menuIcon.pe-7s-bell > .ownerDataBubble.unread,
.settingMenuBox > .menuIcon.pe-7s-help2 > .ownerDataBubble.unread{
    display: block;

}
.homePanel * .menuBox > .panelMenuItem.selected {
    color: var(--trebble-primary);
}
.homePanel * .menuBox > .panelMenuItem > .menuLabel,
.homePanel * .settingMenuBox {
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 2px;
}
.homePanel * .menuBox > .panelMenuItem:active,
body.browser.mobileweb .homePanel * .menuBox > .panelMenuItem:hover {
    color: var(--trebble-primary);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}
.homePanel * .menuBox > .panelMenuItem> i,
#upgradeBtn .btnIcon {
    margin-left: var(--text-sm-px);
    font-size: var(--text-xl);
    margin-right: var(--text-sm-px);
}

#upgradeBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-xs);
}

.homePanel * .menuBox > #upgradeBtn{
    margin-top: var(--space-sm);
}
.homePanel * .menuBox > .panelMenuItem> i.menuIcon.fontello-icon-list-1 {
    margin-right: var(--space-3xs);
    font-size: var(--text-md);
}
.homePanel * .loggedInUserInfoBox > .panelMenuItem{

    height: var(--size-40);
    width: var(--size-40);
    position: relative;
    display: flex;
    display: -moz-flex;
    align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    font-size: var(--text-xl);
    justify-content: center;
    -webkit-justify-content: center;
    -ms-align-justify-content: center;
    -moz-align-justify-content: center;
    cursor: pointer;

}

.homePanel * .loggedInUserInfoBox > .panelMenuItem:active,
body.browser.mobileweb .homePanel * .loggedInUserInfoBox > .panelMenuItem:hover {
  color: var(--trebble-primary);
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: color, background-color;
}

.homePanel * .loggedInUserInfoBox {
    align-self: flex-start;
    -webkit-align-self: flex-start;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    flex: 0 0 100px;
    -webkit-flex: 0 0 100px;
    width: var(--size-full);
    color: var(--text-dark);
    flex-direction: row;
    -moz-flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;

}

.userCoverArtWrapper > #userProfileImage {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: var(--size-50);
    flex: 0 0 50px;
    -webkit-flex: 0 0 50px;
    width: var(--size-50);
    border-radius: 50%;
    margin: var(--size-none);
    margin-left: var(--text-sm-px);
    margin-right: var(--text-sm-px);
    /*box-shadow: 1px 0 10px 0 var(--gray-light-60);*/
}
.loggedInUserInfoBox > .userCoverArtWrapper > #userProfileImage {
    cursor: pointer;
}
@media ( max-height: 470px) {
    .homePanel * .loggedInUserInfoBox {
        flex: 0 0 65px;
        -webkit-flex: 0 0 65px;
    }
}
.ui-panel-inner {
    height: var(--size-full);
    justify-content: space-between;
    -webkit-justify-content: space-between;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    overflow: auto;
    box-sizing: border-box;
}
.homePanel * .settingMenuBox {
    align-items: center;
    align-content: center;
    -webkit-align-items: center;
    -webkit-align-content: center;
    bottom: 0px;
    flex: 0 0 60px;
    -webkit-flex: 0 0 60px;
    width: var(--size-full);
    color: var(--text-dark);
    padding-left: var(--border-4);
    padding-right: var(--border-4);
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    cursor: pointer;
}
body.browser.mobileweb .homePanel * .settingMenuBox:hover,
.homePanel * .settingMenuBox:active {
    color: var(--trebble-primary)
}
@media ( max-height: 470px) {
    .homePanel * .settingMenuBox {
        flex: 0 0 45px;
        -webkit-flex: 0 0 45px;
    }
}
.homePanel * .settingMenuBox > i {
    font-size: var(--text-xl);
    margin-right: var(--text-sm-px);
    margin-left: var(--text-sm-px);
    position: relative;
}
.homePanel * .loggedInUserInfoBox > .userCoverArtWrapper {
    align-self: flex-start;
    -webkit-align-self: flex-start;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    height: var(--size-100);
    width: var(--size-full);
    align-items: center;
    -webkit-align-items: center;
    overflow: hidden;
}
.homePanel * .loggedInUserInfoBox > .userCoverArtWrapper > .userInfo {
    align-items: center;
    -webkit-align-items: center;
    display: flex;
    color: var(--text-dark);
    cursor: pointer;
    overflow: hidden;
}
.homePanel * .loggedInUserInfoBox > .userCoverArtWrapper > .userInfo:active,
body.browser.mobileweb .homePanel * .loggedInUserInfoBox > .userCoverArtWrapper > .userInfo:hover {
    color: var(--trebble-primary) !important;
}
.homePanel * .loggedInUserInfoBox > .userCoverArtWrapper > .userInfo > .username.itemTitle {
    color: var(--text-dark);
    font-weight: 400;
    font-size: var(--text-base);
    text-overflow: ellipsis;
}
.homePanel * .loggedInUserInfoBox > .userCoverArtWrapper > .userInfo > .username.itemTitle:active,
body.browser.mobileweb .homePanel * .loggedInUserInfoBox > .userCoverArtWrapper > .userInfo > .username.itemTitle:hover {
    color: var(--trebble-primary);
}
.homePanel * .loggedInUserInfoBox > .userCoverArtWrapper * i {
    margin-left: var(--text-sm-px);
    font-size: var(--text-6xl);
    color: var(--color-gray-400);
    margin-right: var(--text-sm-px);
}
#PlaylistPodcastsPage * .ui-content,
.userProfileDetailsPage * .ui-content {
    padding: var(--size-none);
}
div#player[data-role=page] > .ui-panel-wrapper {
    background-color: transparent;
}
@keyframes pink-fade {
    0% {
        background: var(--trebble-primary-200);
    }
    100% {
        background: none;
    }
}
.hightlightAnim {
    animation: pink-fade 2.5s ease-in 1;
}
.twoButtonsSet {
    padding: var(--space-2xs);
    height: var(--size-60);
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    width: var(--size-full);
    max-width: var(--size-500);
}
.twoButtonsSet > a.largeMenuButton.ui-link {
    margin: var(--size-none);
    font-size: var(--text-base);
    margin-left: var(--space-3xs);
    margin-right: var(--space-3xs);
    padding: var(--space-2xs);
    box-sizing: border-box;
    flex: 0 0 calc(var(--size-half) - var(--space-2xs));
    -webkit-flex: 0 0 calc(var(--size-half) - var(--space-2xs));
    height: var(--size-52);
}
body.browser.mobileweb .twoButtonsSet > a.largeMenuButton.ui-link:hover {
    margin: var(--size-none);
    font-size: var(--text-base);
    margin-left: var(--space-3xs);
    margin-right: var(--space-3xs);
    padding: var(--space-2xs);
    box-sizing: border-box;
    flex: 0 0 calc(var(--size-half) - var(--space-2xs));
    -webkit-flex: 0 0 calc(var(--size-half) - var(--space-2xs));
    height: var(--size-52);
    background-color: transparent;
    color: var(--trebble-primary);
    border: var(--border-2) solid var(--trebble-primary);
}
#continueAsGuessBtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    display: -webkit-flex;
    background-color: var(--color-gray-550);
    font-size: var(--text-base);
    line-height: var(--line-height-base);
    white-space: nowrap;
}
body.browser.mobileweb #continueAsGuessBtn:hover {
    color: white;
    background-color: var(--color-gray-600);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}
.userListItem {
    box-sizing: border-box;
    display: flex;
    width: var(--size-full);
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    cursor: pointer;
    padding: var(--text-3xs);
    border-bottom: var(--border-1) solid var(--color-black-5);
}
.userListItem:active {
    color: white;
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
}
.userListItem > div.imageContainer {
   flex: 0 0 calc(var(--space-xl) - var(--text-base) - var(--border-1));
   -webkit-flex: 0 0 calc(var(--space-xl) - var(--text-base) - var(--border-1));
   width: calc(var(--space-xl) - var(--text-base) - var(--border-1));
   height: calc(var(--space-xl) - var(--text-base) - var(--border-1));
   border-radius: 50%;
   background-color: var(--color-gray-100);
}
.songLibraryWrapper.playlist > .infiniteListItem > div.imageContainer{
    flex: 0 0 calc(var(--space-xl) - 0.4em);
    -webkit-flex: 0 0 calc(var(--space-xl) - 0.4em);
    width: calc(var(--space-xl) - 0.4em);
    height: calc(var(--space-xl) - 0.4em - var(--border-1));
    background-color: var(--color-gray-100);
}
.userListItem > div.imageContainer > .userCoverImage,
.ui-listview > li.ui-first-child img.userCoverImage:first-child:not(.ui-li-icon) {
    -o-object-fit: cover;
       object-fit: cover;
    flex: 0 0 45px;
    -webkit-flex: 0 0 45px;
    width: var(--size-46);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--color-gray-100);
    border-radius: 50%;
    height: var(--size-46);
}
.userListItem > .infoWrapper {
    padding-right: var(--space-2xs);
    box-sizing: border-box;
    padding-left: var(--space-2xs);
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}
.userListItem > .actionButtonWrapper {
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    max-width: var(--size-60);
}
.selectionListItem {
    display: flex;
    display: -webkit-flex;
    height: 74px;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    box-sizing: border-box;
    font-size: var(--text-base);
    padding: var(--space-2xs);
    cursor: pointer;
}
.selectionListItem.selected {
    color: var(--trebble-primary);
}
.selectionListItem:active {
    background-color: var(--color-white-20);
}
.selectionListItem > .itemLabel {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    height: var(--size-full);
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    font-weight: 400;
    font-size: var(--text-4xl);
    text-align: left;
    cursor: pointer;
}
@media(max-width: 500px), (max-height: 500px) and (orientation: landscape){
    .selectionListItem > .itemLabel {
        font-size: var(--text-xl);
    }
    .selectionListItem {
       height: var(--size-60);
   }
}
.selectionListItem > .buttons > #selectionButton.disabled {
    display: none;
}
.selectionListItem > .buttons > #selectionButton {
    font-size: var(--text-3xl);
    box-sizing: border-box;
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
}

.drop-content  .selectionListItem > .itemLabel{
  font-size: var(--text-sm-px);
}
.drop-content  .selectionListItem {
  padding: var(--size-none);
  height: var(--size-40);
  margin: var(--size-none) var(--space-sm);
}
.drop-content [data-role=header]{
  color: var(--text-dark);
  padding: var(--size-none);
  margin: var(--size-none) var(--space-2xs);
}

.drop-content  [data-role="popup"]  #closeBtn{
    border-radius: 50%;
    background-color: white;
    width: var(--size-20);
    height: var(--size-20);
    color: black;
    font-size: var(--text-xl);
    margin-top: var(--text-3xs);
    z-index: 1;
}

body.browser.mobileweb  .drop-content   .selectionListItem:hover,
.drop-content  .selectionListItem:active {
  color: var(--trebble-primary) !important;
}


#ExplorePage * #filtersWrapper,
#Onboarding * #filtersWrapper{
    height: var(--size-60);
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    width: var(--size-full);
    overflow: auto;
    align-items: center;
    margin: auto;
}

#ExplorePage:not([showListView=true]).threeSelectorDisplayed * #filtersWrapper > div:first-child,
#Onboarding:not([showListView=true]).threeSelectorDisplayed * #filtersWrapper > div:first-child,
#Onboarding[showListView=true].darkTheme.threeSelectorDisplayed * #filtersWrapper > div:first-child,
#ExplorePage[showListView=true].darkTheme.threeSelectorDisplayed * #filtersWrapper > div:first-child{
    margin-left: var(--size-50);
}

#ExplorePage:not([showListView=true]) * #filtersWrapper > div:last-child,
#Onboarding:not([showListView=true]) * #filtersWrapper > div:last-child,
#Onboarding[showListView=true].darkTheme * #filtersWrapper > div:last-child,
#ExplorePage[showListView=true].darkTheme * #filtersWrapper > div:last-child{
    margin-right: var(--size-50);
}


html #ExplorePage[showListView=true].ui-page-theme-c,
html #ExplorePage[showListView=true].ui-page-theme-c .ui-bar-b,
html #Onboarding[showListView=true].ui-page-theme-c,
html body:not(.darkTheme) #subscriptionList,
html #Onboarding[showListView=true].ui-page-theme-c .ui-bar-b {
    color: var(--text-dark);
    background-color: var(--bg-light) !important;
}

html body:not(.darkTheme) #home[state=no_new_content] #subscriptionList{
    background-color: transparent !important;
}
html #ExplorePage[showListView=true].darkTheme.ui-page-theme-c,
html #ExplorePage[showListView=true].darkTheme.ui-page-theme-c .ui-bar-b,
html #Onboarding[showListView=true].darkTheme.ui-page-theme-c,
html #Onboarding[showListView=true].darkTheme.ui-page-theme-c .ui-bar-b {
    color: white;
    background-color: var(--color-black) !important;
}

#ExplorePage * #filtersWrapper > div,
#Onboarding * #filtersWrapper > div,
.TrebbleStatisticPage.lighttext * .CustomSelectFieldView,
#ExplorePage[showListView=true] * .CustomSelectFieldView,
#Onboarding[showListView=true] * .CustomSelectFieldView,
.createCapsulePage .CustomSelectFieldView,
.StatsPage * .CustomSelectFieldView {
    padding-left: var(--space-md);
    box-sizing: border-box;
    flex: 0 0 auto;
    /* padding-left: var(--space-3xs); */
    /* padding-right: var(--space-3xs); */
    
    -webkit-flex: 0 0 auto;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    /*color: var(--text-muted);*/
    color: white;
    background-color: var(--color-white-10);
    /* border: var(--border-1) solid var(--color-white-70); */
    
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: var(--space-2xs);
    cursor: pointer;
    font-weight: 900;
    height: var(--size-50);
    margin: var(--size-none) var(--space-2xs);
}

#ExplorePage:not([showListView=true]) * #filtersWrapper > div,
#Onboarding:not([showListView=true]) * #filtersWrapper > div,
body.darkTheme #ExplorePage[showListView=true] * #filtersWrapper > div,
#ExplorePage[showListView=true].darkTheme * #filtersWrapper > div,
#Onboarding[showListView=true].darkTheme * #filtersWrapper > div{
    margin-left: var(--space-2xs);
    color: white;
    background-color: var(--color-black-50);
    box-shadow: var(--shadow-sm);
}


#ExplorePage #explorePlaylistsWrapper, #ExplorePage #trebbleCarouselWrapper,
#Onboarding #explorePlaylistsWrapper, #Onboarding #trebbleCarouselWrapper {
    height: calc(var(--size-full) - var(--text-8xl-px));
}

#ExplorePage #explorePlaylistsWrapper > .infoBoxWrapper,
#Onboarding #explorePlaylistsWrapper > .infoBoxWrapper {
    height: var(--size-full);
    opacity: 0.8;
}

#ExplorePage #trebbleCarouselWrapper > div, #ExplorePage #trebbleCarouselWrapper > div > div, #ExplorePage #trebbleCarouselWrapper > div > div > div,
#Onboarding #trebbleCarouselWrapper > div, #Onboarding #trebbleCarouselWrapper > div > div, #Onboarding #trebbleCarouselWrapper > div > div > div {
    height: var(--size-full);
    overflow: hidden;
    position: relative;
}

#ExplorePage #trebbleCarouselWrapper > div > div > div .slideItemWrapper,
#Onboarding #trebbleCarouselWrapper > div > div > div .slideItemWrapper {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

.TrebbleStatisticPage.lighttext * .CustomSelectFieldView,
#ExplorePage[showListView=true] * .CustomSelectFieldView,
#Onboarding[showListView=true] * .CustomSelectFieldView,
.StatsPage * .CustomSelectFieldView  {
    color: white;
    height: var(--size-50);
    width: auto;
    margin: var(--size-none);
    background-color:transparent;
}

.CustomSelectFieldView .labelText .icon,
.selectionListItem .itemLabel .icon{

    text-align: center;
}

.CustomSelectFieldView .labelText .icon{
    margin-right: var(--space-3xs);
    margin-left: var(--space-3xs);
}

.selectionListItem .itemLabel .icon{
    margin-right: var(--space-xs);
    margin-left: var(--space-xs);
    width: var(--size-30);
}

body.browser.mobileweb .createCapsulePage .CustomSelectFieldView:hover,
body.browser.mobileweb .TrebbleStatisticPage.lighttext * .CustomSelectFieldView:hover,
body.browser.mobileweb #ExplorePage[showListView=true] * .CustomSelectFieldView:hover,
body.browser.mobileweb #Onboarding[showListView=true] * .CustomSelectFieldView:hover,
.createCapsulePage .CustomSelectFieldView:active,
.TrebbleStatisticPage.lighttext * .CustomSelectFieldView:active,
#ExplorePage[showListView=true] * .CustomSelectFieldView:active,
#Onboarding[showListView=true] * .CustomSelectFieldView:active {
  background-color: var(--color-white-20);
}

.createCapsulePage .CustomSelectFieldView .labelText{
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
}

.createCapsulePage .CustomSelectFieldView .icon,
.createCapsulePage .tag_button_list_wrapper .list_tag_button .icon{
    font-size: var(--text-xl);
    margin-right: var(--space-2xs);
}

.createCapsulePage .loading_container{
    display: none;
}
.createCapsulePage[content_loading=true] .loading_container{
    height: var(--size-full);
    width: var(--size-full);
    justify-content: center;
    align-items: center;
    display: flex;
}

.TrebbleStatisticPage.lighttext * .CustomSelectFieldView > .pe-7s-angle-down,
#ExplorePage[showListView=true] * .CustomSelectFieldView > .pe-7s-angle-down,
#Onboarding[showListView=true] * .CustomSelectFieldView > .pe-7s-angle-down,
.StatsPage * .CustomSelectFieldView > .pe-7s-angle-down ,
.createCapsulePage .CustomSelectFieldView > .pe-7s-angle-down ,
.TrebbleStatisticPage.lighttext * .CustomSelectFieldView > .ion-chevron-down,
#ExplorePage[showListView=true] * .CustomSelectFieldView > .ion-chevron-down,
#Onboarding[showListView=true] * .CustomSelectFieldView > .ion-chevron-down,
.createCapsulePage .CustomSelectFieldView > .ion-chevron-down,
.StatsPage * .CustomSelectFieldView > .ion-chevron-down {
    /* background-color: var(--text-dark); */
    
    border: var(--border-2) solid white;
    border-radius: 50%;
    color: white;
    margin-left: var(--space-3xs);
    margin-right: var(--space-3xs);
    font-size: var(--text-xl);
    border-color: transparent;
}
#ExplorePage:not([showListView=true]) * #filtersWrapper > div:active, 
#ExplorePage:not([showListView=true]) * #filtersWrapper > div:active span,
#Onboarding:not([showListView=true]) * #filtersWrapper > div:active, 
#Onboarding:not([showListView=true]) * #filtersWrapper > div:active span,
body.browser.mobileweb #ExplorePage:not([showListView=true]) * #filtersWrapper > div:hover,
body.browser.mobileweb #ExplorePage:not([showListView=true]) * #filtersWrapper > div:hover span,
body.browser.mobileweb #Onboarding:not([showListView=true]) * #filtersWrapper > div:hover,
body.browser.mobileweb #Onboarding:not([showListView=true]) * #filtersWrapper > div:hover span,
body.darkTheme #ExplorePage[showListView=true] * #filtersWrapper > div:active, 
body.darkTheme #ExplorePage[showListView=true] * #filtersWrapper > div:active span,
body.darkTheme #Onboarding[showListView=true] * #filtersWrapper > div:active, 
body.darkTheme #Onboarding[showListView=true] * #filtersWrapper > div:active span,
body.browser.mobileweb.darkTheme #ExplorePage[showListView=true] * #filtersWrapper > div:hover,
body.browser.mobileweb.darkTheme #ExplorePage[showListView=true] * #filtersWrapper > div:hover span ,
body.browser.mobileweb.darkTheme #Onboarding[showListView=true] * #filtersWrapper > div:hover,
body.browser.mobileweb.darkTheme #Onboarding[showListView=true] * #filtersWrapper > div:hover span ,
#ExplorePage[showListView=true].darkTheme * #filtersWrapper > div:active, 
#ExplorePage[showListView=true].darkTheme * #filtersWrapper > div:active span,
#Onboarding[showListView=true].darkTheme * #filtersWrapper > div:active, 
#Onboarding[showListView=true].darkTheme * #filtersWrapper > div:active span,
body.browser.mobileweb #ExplorePage[showListView=true].darkTheme * #filtersWrapper > div:hover,
body.browser.mobileweb #ExplorePage[showListView=true].darkTheme * #filtersWrapper > div:hover span,
body.browser.mobileweb #Onboarding[showListView=true].darkTheme * #filtersWrapper > div:hover,
body.browser.mobileweb #Onboarding[showListView=true].darkTheme * #filtersWrapper > div:hover span  {
    color: var(--text-dark);
    background-color: white;
    cursor: pointer;
}


[data-role=page].lighttext .sequencer_node_inspector .basic_inpector_param_view .value_container input:disabled,
body.darkTheme  .sequencer_node_inspector .basic_inpector_param_view .value_container input:disabled,
body.darkTheme .userListItem > div.imageContainer,
body.darkTheme #trebbleInfoDetailWrapper,
body.darkTheme [data-role=page] * .capsuleCard,
body.darkTheme .listFooter,
body.darkTheme #passwordChangeFormWrapper,
body.darkTheme #redeemFormWrapper,
body.darkTheme #updateUserInfoForm,
body.darkTheme #updateShortcastInfoForm,
body.darkTheme .ui-listview > li.ui-first-child img.userCoverImage:first-child:not(.ui-li-icon), 
/*body.white-theme.darkTheme div[data-role=page]:not(.lighttext) .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button label,*/
body.darkTheme .userListItem > div.imageContainer > .userCoverImage{
    color: white;
}

body.darkTheme  .audio_sequencer .noUi-base,
[data-role=page].lighttext  .audio_sequencer .noUi-base,
body.darkTheme .sequencer_node_container,
[data-role=page].lighttext .sequencer_node_container,
body.darkTheme  #commentListPopupContent * .songInfo,
body.darkTheme div.songLibraryWrapper > .infiniteListItem > .imageContainer > img,
body.darkTheme .userListItem > div.imageContainer,
body.darkTheme .listFooter,
body.darkTheme .NotficationCard,
body.darkTheme [data-role=page] * .capsuleCard,
body.darkTheme .ui-listview > li.ui-first-child img.userCoverImage:first-child:not(.ui-li-icon), 
body.darkTheme .userListItem > div.imageContainer > .userCoverImage{
    background-color: var(--color-white-10);

}


body.darkTheme .songLibraryWrapper.playlist > .infiniteListItem > div.imageContainer,
body.darkTheme div.songLibraryWrapper > .infiniteListItem > .imageContainer,
body.darkTheme #trebbleInfoDetailWrapper,
body.darkTheme #myNotificationsListWrapper * #collection_repeat_container,
body.darkTheme #passwordChangeFormWrapper,
body.darkTheme #redeemFormWrapper,
body.darkTheme #updateUserInfoForm,
body.darkTheme #updateShortcastInfoForm{
    background-color: transparent;
}

body.darkTheme .listFooter{
    border-bottom: var(--border-0);
}

body.white-theme.darkTheme div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a,
body.white-theme.darkTheme div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a,
body.darkTheme div.ui-header[data-role=header] ~ .ui-panel-wrapper>.ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar]{
    background-color: transparent;
    color: white;
}
body.white-theme.browser div[data-role=page]:not(.lighttext):not(#FeedAndActivityPage):not(#featurePage):not(#ExplorePage):not(#Onboarding):not(#audioEditorDemoPage):not(#player) div.ui-header[data-role=header].hideShadow {
    box-shadow: var(--shadow-none);
}

body.darkTheme #maliste.left-right-content-padding{
 background-color: transparent !important;
}
body.darkTheme .listFooter a.ui-btn.ui-btn-c{
    background-color: transparent;
    color: white;
}

body.darkTheme .NotficationCard,
body.darkTheme .capsuleCard > .title,
body.darkTheme [data-role=page] * .capsuleCard * .itemTitle,
body.darkTheme #footerCurrentSongTitle,
body.darkTheme .NotficationCard * .itemTitle, 
body.darkTheme .NotficationCard * .songTitle, 
body.darkTheme .itemTitle,
body.darkTheme .songTitle, 
body.darkTheme .ui-page:not(.lighttext) .itemTitle,
body.darkTheme .ui-page:not(.lighttext) .songTitle, 
body.darkTheme .userListItem>.infoWrapper>.userUsername,
body.darkTheme .infoBoxWrapper > .content *,
body.darkTheme .infoBoxWrapper > .content i{
    color: white;
}

body.darkTheme #footerCurrentSongArtist, 
body.darkTheme .NotficationCard * .artistAndAlbum, 
body.darkTheme .NotficationCard * .itemSubtitle,
body.darkTheme  .artistAndAlbum, .itemSubtitle,
body.darkTheme  .userListItem>.infoWrapper>.userFullname{
    color: white;
    opacity: 0.5;
}

body.darkTheme [data-role=page] * .capsuleCard * .itemTitle{
    color: white !important;
}

body.darkTheme #myNotificationsListWrapper * .NotficationCard{
    border-bottom: var(--border-1) solid var(--color-white-5);
}
[data-role=page].lighttext .audio_sequencer .bottom_toolbar button.disabled,
[data-role=page].lighttext .audio_sequencer .header_toolbar button.disabled,
[data-role=page].lighttext .audio_sequencer .bottom_toolbar button.disabled:hover,
[data-role=page].lighttext .audio_sequencer .header_toolbar button.disabled:hover,
[data-role=page].lighttext .audio_sequencer .bottom_toolbar button.disabled:active,
[data-role=page].lighttext .audio_sequencer .header_toolbar button.disabled:active,
[data-role=page].lighttext [data-role=page].createCapsulePage.ui-page .audio_sequencer .bottom_toolbar button.disabled label,
.audio_buffer_region_selector_widget  button.disabled,
body.darkTheme .audio_sequencer .bottom_toolbar button.disabled,
body.darkTheme [data-role=page].createCapsulePage.ui-page .audio_sequencer .bottom_toolbar button.disabled label,
body.darkTheme .audio_sequencer .header_toolbar button.disabled,
body.darkTheme [data-role=page].createCapsulePage.ui-page .audio_sequencer .header_toolbar button.disabled label,
.audio_buffer_region_selector_widget  button.disabled:hover,
body.darkTheme .audio_sequencer .header_toolbar button.disabled:hover,
body.darkTheme .audio_sequencer .header_toolbar button.disabled:hover,
.audio_buffer_region_selector_widget  button.disabled:active,
body.darkTheme .audio_sequencer .bottom_toolbar button.disabled:active,
body.darkTheme .audio_sequencer .header_toolbar button.disabled:active{
    color: var(--color-gray-700);
    cursor: default;
}

.audio_buffer_region_selector_widget button.disabled label {
    color: var(--color-gray-700);
}

[data-role=page].lighttext  .audio_sequencer[search_mode_on=true] .search_widget .search_input,
body.darkTheme   .audio_sequencer[search_mode_on=true] .search_widget .search_input,
[data-role=page].lighttext  .audio_sequencer[search_mode_on=true] .search_context_panel .search_input,
body.darkTheme   .audio_sequencer[search_mode_on=true] .search_context_panel .search_input{
    background-color: var(--color-white-30);
    color: white;
}

[data-role=page].lighttext  .audio_sequencer[search_mode_on=true] .search_widget .search_input::-moz-placeholder, body.darkTheme   .audio_sequencer[search_mode_on=true] .search_widget .search_input::-moz-placeholder, [data-role=page].lighttext  .audio_sequencer[search_mode_on=true] .search_context_panel .search_input::-moz-placeholder, body.darkTheme   .audio_sequencer[search_mode_on=true] .search_context_panel .search_input::-moz-placeholder{

    color: var(--color-gray-300);
}

[data-role=page].lighttext  .audio_sequencer[search_mode_on=true] .search_widget .search_input::placeholder,
body.darkTheme   .audio_sequencer[search_mode_on=true] .search_widget .search_input::placeholder,
[data-role=page].lighttext  .audio_sequencer[search_mode_on=true] .search_context_panel .search_input::placeholder,
body.darkTheme   .audio_sequencer[search_mode_on=true] .search_context_panel .search_input::placeholder{

    color: var(--color-gray-300);
}


.audio_sequencer[search_mode_on=true]:not([search_type=text]) .search_widget .search_input,
.audio_sequencer[search_mode_on=true]:not([search_type=disfluency]) .search_widget .disfluency_search_label,
.audio_sequencer[search_mode_on=true]:not([search_type=filler_words]) .search_widget .filler_words_search_label,
.audio_sequencer[search_mode_on=true]:not([search_type=silences]) .search_widget .silences_search_label{
    display:none;
}

.audio_sequencer[search_mode_on=true][search_type=disfluency] .search_widget .disfluency_search_label,
.audio_sequencer[search_mode_on=true][search_type=text] .search_widget .search_input,
.audio_sequencer[search_mode_on=true][search_type=filler_words] .search_widget .filler_words_search_label,
.audio_sequencer[search_mode_on=true][search_type=silences] .search_widget .silences_search_label{
    display:flex;
    width: var(--size-full);
    text-align: left;
}

.audio_sequencer[search_mode_on=true] .search_widget  .search-icon{
    font-size: var(--text-xl);
    width: var(--size-50);
    height: var(--size-50);
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 0 0 48px;

}


[data-role=page].lighttext .audio_sequencer .main_section .search_widget.floating_menu,
body.darkTheme .audio_sequencer .main_section .search_widget.floating_menu{
    background-color:var(--color-olive-50);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
 [data-role=page].lighttext .audio_sequencer .main_section .search_widget.floating_menu,
 body.darkTheme .audio_sequencer .main_section .search_widget.floating_menu{
    background-color:var(--color-olive);

}

}

#ExplorePage * #filtersWrapper > div >.pe-7s-angle-down,
#ExplorePage * #filtersWrapper > div >.ion-chevron-down,
#Onboarding * #filtersWrapper > div >.pe-7s-angle-down,
#Onboarding * #filtersWrapper > div >.ion-chevron-down  {
    font-size: var(--text-2xl);
    border-color: transparent;
    margin: var(--size-none);
}

#ExplorePage * #filtersWrapper > div >.ion-chevron-down,
#Onboarding * #filtersWrapper > div >.ion-chevron-down{
    font-size: var(--text-lg);
    height: var(--size-27);
    border-radius: 50%;
    width: var(--size-27);
    /*margin: var(--size-none) var(--size-none) var(--size-none) var(--space-2xs);*/
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 27px;
    border-color: transparent;
}
html .ui-page-theme-c#ExplorePage .ui-panel-wrapper ,
html .ui-page-theme-c#Onboarding .ui-panel-wrapper {
    background-color: transparent;
}
#backgroundBlurImage {
  position: absolute;
  top: 0px;
  left: 0px;
  width: var(--size-full);
  height: var(--size-full);
  background-size: cover;

}
#ExplorePage,
#Onboarding {
    /*-webkit-transition: background-color .3s ease-in, color .3s ease-in;
    -moz-transition: background-color .3s ease-in, color .3s ease-in;
    -o-transition: background-color .3s ease-in, color .3s ease-in;
    -ms-transition: background-color .3s ease-in, color .3s ease-in;
    transition: background-color .3s ease-in, color .3s ease-in;*/
}


@media(min-width: 300px), (max-height: 300px) and (orientation: landscape){
    #backgroundBlurImage {
        transition: background-image .3s ease-in;
    }
}

body.mobileweb #player {
   transition: background-image .3s ease-in;
}
#ExplorePage * .ui-flipswitch.ui-flipswitch-active ,
#Onboarding * .ui-flipswitch.ui-flipswitch-active {
    padding-left: var(--size-100);
    /* Override this and width in previous rule if you use labels other than "on/off" and need more space */
    
    width: 1.875em;
    height: 35px;
    margin: var(--size-none);
    background-color: var(--trebble-primary);
}
#ExplorePage * .ui-flipswitch, 
#Onboarding * .ui-flipswitch{
    padding-left: var(--size-none);
    /* Override this and width in previous rule if you use labels other than "on/off" and need more space */
    
    width: 115px;
    vertical-align: middle;
    border: var(--border-0);
    /* background-color: var(--color-white-20);
    background-color: var(--bg-overlay-light);*/
    background-color: var(--color-black-50);
    /* border: var(--border-1) solid var(--color-white-20); */
    
    margin: var(--size-none);
    margin-right: var(--border-2);
    height: var(--size-32);

    box-shadow: var(--shadow-sm);
}
#ExplorePage * .ui-flipswitch:active ,
#Onboarding * .ui-flipswitch:active{
    background-color: var(--color-white-20);
}
#ExplorePage * .ui-flipswitch > .ui-flipswitch-on,
#Onboarding * .ui-flipswitch > .ui-flipswitch-on {
    /*color: var(--text-muted);*/
    color: white !important;
    text-indent: -85px;
    font-size: var(--text-sm);
    font-weight: 700;
    background-color: white;
    /*border: var(--border-1) solid var(--text-muted);*/
    border: transparent;
    margin: var(--size-none);
    height: var(--size-32);
    line-height: var(--line-height-3-2xl);
    width: var(--size-24);
    box-shadow: var(--shadow-sm);
}
#ExplorePage * .ui-flipswitch > .ui-flipswitch-on:active,
#Onboarding * .ui-flipswitch > .ui-flipswitch-on:active {
    /*color: var(--color-white-90);*/
    background-color: var(--color-white-90);
    border: var(--border-1) solid var(--color-white-90);
}
#ExplorePage * .ui-flipswitch > .ui-flipswitch-off,
#Onboarding * .ui-flipswitch > .ui-flipswitch-off {
    /*color: var(--text-muted);*/
    color: white;
    width: var(--size-90);
    font-size: var(--text-xs);
    text-align: left;
    margin: var(--size-none);
    padding: var(--size-none);
    border: var(--border-0);
    font-weight: 700;
    height: var(--size-32);
    line-height: var(--line-height-3-2xl);
    background-color: var(--color-white-10);
    /* display: block; */
}
#ExplorePage > div.ui-header[data-role=header] >:last-child > .ui-controlgroup-controls,
#ExplorePage > div.ui-header[data-role=header] >:last-child > .ui-controlgroup-controls > form,
#Onboarding > div.ui-header[data-role=header] >:last-child > .ui-controlgroup-controls,
#Onboarding > div.ui-header[data-role=header] >:last-child > .ui-controlgroup-controls > form {
    height: var(--size-full);
    justify-content: center;
    align-content: center;
    -webkit-justify-content: center;
    -webkit-align-content: center;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
}
#ExplorePage > div.ui-header[data-role=header] >:last-child > .ui-controlgroup-controls > form,
#Onboarding > div.ui-header[data-role=header] >:last-child > .ui-controlgroup-controls > form{
    height: var(--size-32);
}

#ExplorePage > div.ui-header[data-role=header] > :last-child > .ui-controlgroup-controls> form,
#ExplorePage[showListView=true] #showListViewButton,
#ExplorePage:not([showListView=true]) #showCarouselViewButton,
#ExplorePage:not([showListView=true]) #trebbleListWrapper,
#ExplorePage[showListView=true] #backgroundBlurImage,
#ExplorePage[showListView=true] #trebbleCarouselWrapper,
#Onboarding > div.ui-header[data-role=header] > :last-child > .ui-controlgroup-controls> form,
#Onboarding[showListView=true] #showListViewButton,
#Onboarding:not([showListView=true]) #showCarouselViewButton,
#Onboarding:not([showListView=true]) #trebbleListWrapper,
#Onboarding[showListView=true] #backgroundBlurImage,
#Onboarding[showListView=true] #trebbleCarouselWrapper{
    display:none;
}
#ExplorePage #trebbleListWrapper,
#Onboarding #trebbleListWrapper{
    overflow: auto;
    padding: var(--text-base);
}

#Onboarding #trebbleListWrapper{
    /*box-sizing: border-box;*/
    /*padding-bottom: var(--text-10xl-px);*/
    box-sizing: border-box;
}
/*#Onboarding #trebbleListWrapper  .padding_block{
    height: var(--size-150);
    width: var(--size-full);
    }*/
    #Onboarding #trebbleListWrapper > div,
    #Onboarding #trebbleListWrapper > div #collection_repeat_container{
        height: var(--size-full);
    }
    #filterSortLibraryOptionPopupContent {
        padding-left: var(--space-2xs);
        padding-right: var(--space-2xs);
        padding-top: var(--size-none);
        padding-bottom: var(--size-none);
        max-width: var(--size-700);
    }
    #filterSortLibraryOptionPopupContent > .left-right-content-padding {
        padding: var(--size-none);
    }

    #filterSortLibraryOptionPopupContent > .left-right-content-padding > .listHeader {
        border-bottom: var(--border-1) solid var(--color-white-20);
    }
    .songSelectorWidget > .widgetHeader {
        display: flex;
        display: -webkit-flex;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
    }
    .songSelectorWidget > .widgetHeader > #widgetTitle {
        flex: 1 1 100%;
        -webkit-flex: 1 1 100%;
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }
    .songSelectorWidget > .widgetHeader > #widgetTitle > form {
        width: var(--size-full);
    }
    .songSelectorWidget > .widgetHeader > #widgetTitle > form > input {
        width: var(--size-full);
        color: white;
        font-size: var(--text-3xl);
        font-weight: 900;
    }
    [data-role=page] * .songSelectorWidget > .widgetHeader > #widgetTitle > form > input {
        background-color: var(--color-gray-200);
        color: var(--text-dark);
    }
    .songSelectorWidget > .widgetHeader > .searchButtonWrapper {
        flex: 0 0 51px;
        -webkit-flex: 0 0 51px;
    }
    [data-role=page]#NewLoginPage > .ui-content,
    [data-role=page]#newSignupPage > .ui-content,
    [data-role=page]#onboardingSignupPage > .ui-content,
    [data-role=page]#trebbleSetup > .ui-content,
    [data-role=page]#journeyCreation > .ui-content,
    [data-role=page].userInfoEditPage > .ui-content,
    [data-role=page].shortcastInfoEditPage > .ui-content,
    [data-role=page].settingsPage > .ui-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: -webkit-flex;
        -webkit-align-items: center;
        -webkit-justify-content: center;
    }
    [data-role=page]#NewLoginPage > .ui-content  #loginForm,
    [data-role=page]#onboardingSignupPage > .ui-content  #SignUpForm,
    [data-role=page]#newSignupPage > .ui-content  #SignUpForm {
        max-width: var(--size-400);
        width: var(--size-full);
        display: flex;
        -msp-flex-direction: column;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: -webkit-flex;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        flex:0 0 auto;
    }
    [data-role=page]#NewLoginPage > .ui-content .twoButtonsSet > a.largeMenuButton.ui-link,
    [data-role=page]#onboardingSignupPage > .ui-content .twoButtonsSet > a.largeMenuButton.ui-link,
    [data-role=page]#newSignupPage > .ui-content .twoButtonsSet > a.largeMenuButton.ui-link{
      margin: var(--size-none);
  }

  [data-role=page]#NewLoginPage > .ui-content .twoButtonsSet > a.largeMenuButton.ui-link#SignUpBtn,
  [data-role=page]#onboardingSignupPage > .ui-content .twoButtonsSet > a.largeMenuButton.ui-link#SignUpBtn,
  [data-role=page]#newSignupPage > .ui-content .twoButtonsSet > a.largeMenuButton.ui-link#SignUpBtn {
    margin: auto;
}


#youtubeVideoLink {
    height: var(--size-full);
    width: var(--size-full);
    /*box-shadow: var(--shadow-ambient-lg);
    -moz-box-shadow: var(--shadow-ambient-lg);*/
}
body.embedded * #reponsivePlayerContent {
    background-image: none;
}
#reponsivePlayerContent {
    justify-content: center;
    flex-direction: row;
    align-items: center;
    display: flex;
    display: -moz-flexbox;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    background-image: linear-gradient( var(--color-black-0), var(--color-black-10) 60%, var(--color-black-80) 100%);
    background-image: -o-linear-gradient( var(--color-black-0), var(--color-black-10) 60%, var(--color-black-80) 100%);
}
@media all and (orientation: portrait) {
    /* Styles for Portrait screen */
    
    #reponsivePlayerContent {
        flex-direction: column;
    }
    .playerCoverArtImage-portrait,
    #player * #albumArtImage {
        /*background-size: 95% auto;*/
        background-size: contain;
        transform: scale(0.85, 0.85);
    }
}
#reponsivePlayerContent.always_portrait{
    flex-direction: column;
}

#reponsivePlayerContent.always_portrait > :nth-child(2){
    max-width: var(--size-500);
}

@media all and (orientation: landscape) {
    /* Styles for Landscape screen */
    
    #reponsivePlayerContent:not(.always_portrait) {
        flex-direction: row;
    }
    #reponsivePlayerContent:not(.always_portrait) > div:first-child,
    #reponsivePlayerContent:not(.always_portrait) > div:nth-child(2) {
        flex: 0 0 50%;
        -webkit-flex: 0 0 50%;
        -moz-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
    }
    .playerCoverArtImage-portrait,
    #player * #albumArtImage {
        /*background-size: auto 90%;*/
        background-size: contain;
        transform: scale(0.90, 0.90);
    }
}

@media (min-aspect-ratio: 5/2) {

    #reponsivePlayerContent:not(.always_portrait) > div:first-child{
        flex: 0 0 30%;
        -webkit-flex: 0 0 30%;
        -moz-flex: 0 0 30%;
        -ms-flex: 0 0 30%;
    }
    
    #reponsivePlayerContent:not(.always_portrait) > div:nth-child(2) {
        flex: 0 0 70%;
        -webkit-flex: 0 0 70%;
        -moz-flex: 0 0 70%;
        -ms-flex: 0 0 70%;
    }
    #reponsivePlayerContent:not(.always_portrait) #commentOverviewBox * .commentBoxWrapper{
        width: 70%;
    }
    
}
#songGradingView ,
#lifespanSelectionView{
    width: var(--size-full);
}


#fullCoverArtImage > #editTrebbleCoverPicBtn{
   padding-top: var(--border-2);
   padding-bottom: var(--border-2);
   height: var(--size-30);
   margin: var(--size-none);
   font-weight: 300;
   color: white;
   line-height: var(--line-height-3xl);
   margin-top: var(--size-50);
   font-size: var(--text-5xl-px);
   width: -moz-fit-content;
   width: fit-content;
   height: -moz-fit-content;
   height: fit-content;
   cursor: pointer;
}
#fullCoverArtImage > #editTrebbleCoverPicBtn:before{
  font-size: var(--text-xl);
  font-weight: 400;
  
}
body.browser.mobilebrowser * #artistImage.editable *  #editTrebbleCoverPicBtn,
body.browser.mobileweb * #artistImage.editable:hover *  #editTrebbleCoverPicBtn,
#artistImage.editable:active * #editTrebbleCoverPicBtn,
#artistImage.editable #fullCoverArtImage.nocoverimage > #editTrebbleCoverPicBtn{
 display: flex;
 display: -webkit-flex;
 justify-content: center;
 -webkit-justify-content: center;
 flex-direction: row;
 font-size: var(--text-base);
 padding-left: var(--space-sm);
 padding-right: var(--space-sm);
 display: none;
}

#artistImage.editable #fullCoverArtImage.nocoverimage > #editTrebbleCoverPicBtn{
  display:none ;
}


body.browser.mobileweb * #trebbleInfoDetailWrapper > .coverArtWrapper:hover > .overlay,
* #trebbleInfoDetailWrapper > .coverArtWrapper:active > .overlay{
  display: block;
  position: absolute;
  width: var(--size-full);
  height: var(--size-full);
  background-color: var(--color-black-60);
}
.darktext #fullCoverArtImage > #editTrebbleCoverPicBtn{
  color: var(--text-dark);
  border-color: white;
  background-color: white;
}

.darktext #fullCoverArtImage > #editTrebbleCoverPicBtn:active,
body.browser.mobileweb .darktext #fullCoverArtImage > #editTrebbleCoverPicBtn:hover{
  color: var(--trebble-primary) !important;
  border-color: white !important;
  background-color: white;
}

#fullCoverArtImage {
    /*z-index: 10;*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: auto;
    width: var(--size-full);
    position: absolute;
    height: var(--size-280);
    width: var(--size-280);
    left: calc((var(--size-full) - var(--size-layout-md))/2);
    display: flex;
    display: -moz-flexbox;
    box-sizing: border-box;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    top: auto;
    z-index: 2;
    /*background-color: black;*/
    box-shadow: var(--shadow-ambient-lg);
    -moz-box-shadow: var(--shadow-ambient-lg);
}
#fullCoverArtImage.withShadow{
    box-shadow: var(--shadow-ambient-lg);
    -moz-box-shadow: var(--shadow-ambient-lg);
}
#fullCoverArtImage.inFront{
    z-index: 10;
}

.albumDetailsPage  .cornerDecorator,
.playlistDetailsPage  .cornerDecorator,
.artistDetailsPage  .cornerDecorator,
.playlistDetailsPage.journeyPage #albumList > .actionButtonWrapper,
.playlistDetailsPage:not(.journeyPage) #albumList > .actionButtonWrapper
/*,.playlistDetailsPage:not(.journeyPage) .actionButtonWrapper.floatingBtn*/{
    display:none ;
}

body.browser > .artistDetailsPage.full * div#fullCoverArtImage,
body.browser > .artistDetailsPage * div#fullCoverArtImage {

    /*   top: calc(var(--size-half) - var(--size-200));
    background-position: inherit; */
    
    background-size: cover;
    width: var(--size-280);
    height: var(--size-280);
    border-radius: 50%;
    left: calc((var(--size-full) - var(--size-layout-md))/2);
    top: calc((var(--size-full) - var(--size-layout-md))/2);
}



@media (min-width: 480px), (min-height: 480px) and   (orientation: landscape) {

    .artistDetailCoverArtWrapper,
    .userDetailCoverArtWrapper,
    .albumDetailCoverArtWrapper {
        height: var(--size-400);
    }
}
@media (min-width: 1086px) and (max-width: 1285px), (min-width: 320px) and (max-width: 900px), (min-height: 1086px) and   (orientation: landscape) {
 body.browser > .artistDetailsPage.full * div#fullCoverArtImage,
 body.browser > .artistDetailsPage * div#fullCoverArtImage ,
 body.browser > .playlistDetailsPage * div#fullCoverArtImage{
    width: var(--size-280);
    left: calc((var(--size-full) - var(--size-layout-md))/2);
    top: calc((var(--size-full) - var(--size-layout-md))/2);
    height: var(--size-280);
    position: absolute;

}


}

@media (min-width: 860px) and (max-width: 1086px),(min-width: 300px) and (max-width: 900px),  (min-height: 860px) and   (orientation: landscape) {
  body.browser > .artistDetailsPage.full * div#fullCoverArtImage,
  body.browser > .artistDetailsPage * div#fullCoverArtImage,
  body.browser > .playlistDetailsPage * div#fullCoverArtImage {
    width: var(--size-280);
    left: calc((var(--size-full) - var(--size-layout-md))/2);
    top: calc((var(--size-full) - var(--size-layout-md))/2);
    height: var(--size-280);
    position: absolute;

}
}

/*
@media (min-width: 1285px), (min-height: 1285px) and   (orientation: landscape) {
   body.browser > .artistDetailsPage.full * div#fullCoverArtImage,
   body.browser > .artistDetailsPage * div#fullCoverArtImage,
   body.browser > .playlistDetailsPage * div#fullCoverArtImage{
    width: var(--size-450);
    left: calc((var(--size-full) - var(--size-layout-3xl))/2);
    height: var(--size-450);
    position: absolute;
}

}
*/


@media (max-width: 480px), (max-height: 480px) and   (orientation: landscape) {
  body.browser > .artistDetailsPage.full * div#fullCoverArtImage,
  body.browser > .artistDetailsPage * div#fullCoverArtImage,
  body.browser > .playlistDetailsPage * div#fullCoverArtImage,
  #fullCoverArtImage{
    width: var(--size-200);
    left: calc((var(--size-full) - var(--size-200))/2);
    top: calc((var(--size-full) - var(--size-200))/2);
    height: var(--size-200);
}

.artistDetailCoverArtWrapper,
.userDetailCoverArtWrapper,
.albumDetailCoverArtWrapper {
    height: var(--size-380);
}


}


@media (min-width: 900px) {
    .playlistDetailsPage:not(.publicPage) > #contentWrapper,
    .albumDetailsPage > #contentWrapper,
    .playlistDetailsPage .artistDetailsPage > #contentWrapper,
    .artistDetailsPage:not(.fulldetails) > #contentWrapper{
        display: flex;
        display: -moz-flexbox;
        flex-direction: row;
    }

    .playlistDetailsPage.publicPage .actionButtonWrapper{
      /*flex-direction:row;*/
      flex-direction:column-reverse;
  }

  .playlistDetailsPage.publicPage > #contentWrapper > .flexUpperContentWrapper{
     flex-direction: row;
     -moz-flex-line-pack: center;
     align-content: center;
     -webkit-align-content: center;
     display: -moz-flexbox;
     display: flex;
     display: -moz-flex;
     align-items: center;
     justify-content: center;
     -webkit-align-items: center;
     -webkit-justify-content: center;
 }



 .playlistDetailsPage.publicPage > #contentWrapper > .flexUpperContentWrapper #fullCoverArtImage{
    margin: var(--size-100) var(--size-50) var(--size-none) 10%;
    position:relative;
    left:0px;
    top:0px;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
}
.playlistDetailsPage.publicPage:not(.showBackButton) > #contentWrapper > .flexUpperContentWrapper #fullCoverArtImage{
    margin: var(--text-10xl-px) var(--size-50) var(--size-none) 10%;
}
.playlistDetailsPage.publicPage > #contentWrapper > .flexUpperContentWrapper .trebbleInfo{
   flex: 1 1 auto;
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   max-width:var(--size-600);
   margin-top: var(--size-100);
   -moz-flex-line-pack: center;
   align-content: center;
   -webkit-align-content: center;
   display: -moz-flexbox;
   display: flex;
   display: -moz-flex;
   align-items: center;
   justify-content: center;
   -webkit-align-items: center;
   -webkit-justify-content: center;
   flex-direction: column;
}
.playlistDetailsPage.publicPage:not(.showBackButton) > #contentWrapper > .flexUpperContentWrapper .trebbleInfo{
   margin-top: var(--text-10xl-px);
}


.playlistDetailsPage.justify_design.publicPage > #contentWrapper > .flexUpperContentWrapper{

}

.playlistDetailsPage.justify_design.publicPage> #contentWrapper > .flexUpperContentWrapper #fullCoverArtImage{
    flex:0 0 auto;
    margin: var(--size-none);
    margin-right: var(--space-2xs);
    margin-top: var(--text-9xl-px);
}

.playlistDetailsPage.justify_design.publicPage:not(.showBackButton) > #contentWrapper > .flexUpperContentWrapper #fullCoverArtImage{
    margin-top: var(--size-layout-2xs);
}

.playlistDetailsPage.justify_design.publicPage .bioWrapper .trebbleName{
    text-align: start;
}

.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper>.textContent  > * {
    margin: var(--size-none);
    padding-top: var(--text-3xs);
    padding-bottom: var(--text-3xs);
}

.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper>.textContent  > .journey_summary_detail{
    margin-top: var(--text-3xs);
    margin-bottom: var(--text-3xs);
    padding: var(--text-base);
}

.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper>.textContent .journey_other_info {
    width:-moz-fit-content;
    width:fit-content;
    padding: var(--text-base) var(--size-none);
}

.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper>.textContent .journey_other_info > .journey_stats span{
  padding-top: 0em;
  padding-bottom: 0em;
}



.playlistDetailsPage.justify_design.publicPage > #contentWrapper > .flexUpperContentWrapper{
    margin-bottom: var(--size-none);
    align-items: flex-start;
}

.playlistDetailsPage.justify_design.publicPage.journeyPage #albumList{
    margin-top: var(--size-none);
}

.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper>.textContent .journey_other_info .journey_stats{
    width:-moz-fit-content;
    width:fit-content;
    padding: var(--size-none);
    align-items: center;
    flex-direction: row;
    justify-content: center;
    display:flex;
}
.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper> .textContent .actionButtonWrapper.floatingBtn{
    flex-direction: row-reverse;
    justify-content: flex-end;
}


.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper>.textContent .actionButtonWrapper.floatingBtn >  #buyNowBtn,
.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper>.textContent .actionButtonWrapper.floatingBtn >  #followBtn,
.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper>.textContent .actionButtonWrapper.floatingBtn >  #followingBtn,
.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper>.textContent .actionButtonWrapper.floatingBtn >  #playTrailerBtn,
.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper>div.trebbleInfo>.bioWrapper>.textContent .actionButtonWrapper.floatingBtn >  #purchasedBtn{
    width: -moz-fit-content;
    width: fit-content;
    margin: var(--text-base) var(--text-base) var(--text-base) var(--size-none);
    min-width: var(--size-200);
}

.playlistDetailsPage.justify_design.publicPage .actionButtonWrapper.floatingBtn{

    margin: var(--size-none);
    display: flex;
    flex-direction: column-reverse;
    align-items: self-start;
    padding-left: var(--space-lg);
    width: var(--size-full);
    box-sizing: border-box;
    justify-content: center;

}

.playlistDetailsPage.justify_design.publicPage.journeyPage .actionButtonWrapper.floatingBtn{
   padding-left: var(--size-none);
}


.playlistDetailsPage.justify_design.publicPage:not(.journeyPage) .actionButtonWrapper.floatingBtn >  #buyNowBtn,
.playlistDetailsPage.justify_design.publicPage:not(.journeyPage)  .actionButtonWrapper.floatingBtn >  #followBtn,
.playlistDetailsPage.justify_design.publicPage:not(.journeyPage) .actionButtonWrapper.floatingBtn >  #followingBtn,
.playlistDetailsPage.justify_design.publicPage:not(.journeyPage) .actionButtonWrapper.floatingBtn >  #playTrailerBtn,
.playlistDetailsPage.justify_design.publicPage:not(.journeyPage) .actionButtonWrapper.floatingBtn >  #purchasedBtn{
    width: -moz-fit-content;
    width: fit-content;
    margin: var(--size-none);
}

.playlistDetailsPage.justify_design.publicPage:not(.journeyPage)  .flexUpperContentWrapper > div.trebbleInfo > .bioWrapper{
    padding: var(--size-none) var(--space-lg);
}

.playlistDetailsPage.justify_design.publicPage .flexUpperContentWrapper > div.trebbleInfo > .bioWrapper > .textContent{
    text-align: start;
}

.playlistDetailsPage.justify_design.publicPage .listeningInstructionsBox{
    margin: var(--space-lg) var(--size-none) var(--space-2xs);
}

.playlistDetailsPage.justify_design.publicPage:not(.journeyPage)  .listeningInstructionsBox{
    width: calc(var(--size-full) - var(--text-9xl-px));
}


.flexUpperContentWrapper {
    flex: 0 0 35%;
    -ms-flex: 0 0 35%;
    -webkit-flex: 0 0 35%;
    -moz-flex: 0 0 35%;
    display: flex;
    display: -moz-flexbox;
    flex-direction: column;
    justify-content: flex-start;
    -webkit-justify-content:flex-start;
    -ms-justify-content:flex-start;
    -moz-justify-content: flex-start;
    margin-bottom: var(--space-xl);
    height: -moz-fit-content;
    height: fit-content;
}
.playlistDetailsPage .artistDetailCoverArtWrapper{
  flex: 0 0 640px;
  -ms-flex: 0 0 640px;
  -webkit-flex: 0 0 640px;
  -moz-flex: 0 0 640px;
  display: flex;
  display: -moz-flexbox;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  padding: var(--size-none);
}

.userDetailCoverArtWrapper,
.albumDetailCoverArtWrapper,
.artistDetailsPage:not(.fulldetails) .artistDetailCoverArtWrapper{
   flex: 0 0 35%;
   -ms-flex:  0 0 35%;
   -webkit-flex:  0 0 35%;
   -moz-flex:  0 0 35%;
   display: flex;
   display: -moz-flexbox;
   justify-content: center;
   align-items: center;
   -webkit-justify-content: center;
   -webkit-align-items: center;
   padding: var(--size-none);
}
/*
#fullCoverArtImage {
    width: 90%;
    left: auto;
    position: relative;
    height: var(--size-340);
    box-shadow: var(--shadow-none) !important;
    background-color: transparent !important;
}
*/

.playlistDetailsPage  #albumList,
.albumDetailsPage  #albumList,
.artistDetailsPage:not(.fulldetails)  #albumList {
    flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    -moz-flex: 1 1 100%;
    margin-top: var(--size-50);
}

.playlistDetailsPage .listHeader.center,
.albumDetailsPage .listHeader.center,
.artistDetailsPage:not(.fulldetails) .listHeader.center {
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
}


.playlistDetailsPage .playlistShortcutButtonsWrapper {
    top: 60px;
    position: absolute;
}

.albumDetailsPage  .cornerDecorator,
.artistDetailsPage:not(.fulldetails)  .cornerDecorator,
.playlistDetailsPage  .cornerDecorator {
    position: absolute;
    height: var(--size-full);
    width: var(--size-full);
    right: 0px;
    top: 0px;
    display: block;
    background-image: linear-gradient(to left,var(--color-black-0),  var(--color-black) 100%);
}


body.browser * .basicAlbumInfo {
  height: 40%;
}

.playlistDetailsPage .artistDetailCoverArtWrapper,
.albumDetailCoverArtWrapper {
    height: 640px;
}

.userDetailCoverArtWrapper{
    height: var(--size-400);
}
.playlistDetailsPage.publicPage .artistDetailCoverArtWrapper{
    height: var(--size-400);
    top:0px;
}

.bioWrapper * .carouselItem > .textContent {
    font-size: var(--text-sm-px);
}





.playlistDetailsPage #myCapsulesListWrapper *  #collection_repeat_container  .capsuleCard,
.playlistDetailsPage #myArchivedCapsulesListWrapper *  #collection_repeat_container  .capsuleCard {
    width: var(--size-full);
}

.journeyPage #myCapsulesListWrapper #collection_repeat_container{
    padding: var(--space-2xs);
    box-sizing: border-box;
}

.playlistDetailsPage .actionButtonWrapper.floatingBtn {
    width: 90%;
    display: flex;
    display: -moz-flexbox;
    margin-left: auto;
    margin-right: auto;
}

.playlistDetailsPage #albumList > .actionButtonWrapper {
    display: none;
}
}

.playlistDetailsPage.publicPage .infoBoxWrapper{
    height: -moz-fit-content !important;
    height: fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    min-height: var(--size-400);
}

@media (max-width: 350px) , (max-height: 350px) and  (orientation: landscape) {
  #fullCoverArtImage {
   width: var(--size-200);
   left: calc((var(--size-full) - var(--size-200))/2);
   top: calc((var(--size-full) - var(--size-200))/2);
   height: var(--size-200);
}


.artistDetailCoverArtWrapper,
.userDetailCoverArtWrapper,
.albumDetailCoverArtWrapper {
    height: var(--size-400);
}


}

@media (max-width: 300px) , (max-height: 300px) and  (orientation: landscape) {
  #fullCoverArtImage {
     width: var(--size-200);
     left: calc((var(--size-full) - var(--size-200))/2);
     top: calc((var(--size-full) - var(--size-200))/2);
     height: var(--size-200);
 }

 .artistDetailCoverArtWrapper,
 .userDetailCoverArtWrapper,
 .albumDetailCoverArtWrapper {
    height: var(--size-300);
}


}

@media (max-width: 200px) , (max-height: 200px) and  (orientation: landscape) {
  #fullCoverArtImage {
    width: var(--size-180);
    left: calc((var(--size-full) - var(--size-layout-xs))/2);
    height: var(--size-180);
}

.artistDetailCoverArtWrapper,
.userDetailCoverArtWrapper,
.albumDetailCoverArtWrapper {
    height: var(--size-300);
}


}



.swiper-button-next.ion-ios7-arrow-right,
.swiper-button-prev.ion-ios7-arrow-left,
.swiper-button-next.ion-ios7-arrow-down,
.swiper-button-next.ion-chevron-down,
.swiper-button-prev.ion-ios7-arrow-up,
.swiper-button-prev.ion-chevron-up  {
    background-image: none;
    font-size: var(--text-5xl);
    color: white;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    display: flex;
    display: -moz-flexbox;
    box-sizing: border-box;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    border-radius: 50%;
    background-color: var(--color-black-30);
    height: var(--size-50);
    width: var(--size-50);
    flex: 0 0 50px;
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
}

@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
    .swiper-button-next.ion-ios7-arrow-right,
    .swiper-button-prev.ion-ios7-arrow-left,
    .swiper-button-next.ion-ios7-arrow-down,
    .swiper-button-next.ion-chevron-down,
    .swiper-button-prev.ion-ios7-arrow-up,
    .swiper-button-prev.ion-chevron-up  {
        background-color: var(--color-black-30);
    }

}
.swiper-button-next.ion-ios7-arrow-down,
.swiper-button-prev.ion-chevron-up,
.swiper-button-next.ion-ios7-arrow-down,
.swiper-button-prev.ion-chevron-down {
    height: var(--size-20);
    height: var(--size-30);
    left: calc(var(--size-half) - var(--space-xs));
}

.swiper-button-next.ion-ios7-arrow-down,
.swiper-button-next.ion-chevron-down{
    top: 100%;
}


.swiper-button-prev.ion-ios7-arrow-up,
.swiper-button-prev.ion-chevron-up {
    top: 30px;
}
#ExplorePage[showListView=true] * .swiper-button-next.ion-ios7-arrow-right,
#ExplorePage[showListView=true] * .swiper-button-prev.ion-ios7-arrow-left,
#Onboarding[showListView=true] * .swiper-button-next.ion-ios7-arrow-right,
#Onboarding[showListView=true] * .swiper-button-prev.ion-ios7-arrow-left,
.TrebbleStatisticPage.lighttext * .swiper-button-next.ion-ios7-arrow-right,
.TrebbleStatisticPage.lighttext * .swiper-button-prev.ion-ios7-arrow-left {
    color: white;
}

#recordProgressContainer .swiper-button-next.ion-ios7-arrow-right,
#recordProgressContainer .swiper-button-prev.ion-ios7-arrow-left {
  font-size: var(--text-xl);
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: flex;
  display: -moz-flexbox;
  box-sizing: border-box;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  box-shadow: var(--shadow-none);
  background-color: transparent;
}
#recordProgressContainer  .trackItem{
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    display: -moz-flexbox;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    height: var(--size-full);
    padding: var(--size-none) var(--space-xl);
    box-sizing: border-box;
}

#recordProgressContainer #playButton  .ion-loading-c{
  left: -20px;
  position:relative;
}
#recordProgressContainer:not(.lighttext) svg:nth-child(2) path:first-child{
    stroke: var(--color-black-10);
}
.ui-page.lighttext #recordProgressContainer svg:nth-child(2) path:first-child,
body.darkTheme .ui-page:not(.lighttext) #recordProgressContainer svg:nth-child(2) path:first-child{
    stroke: var(--color-white-10);
}
.ui-page:not(.lighttext) .songTitle,
.ui-page:not(.lighttext) .itemTitle{
color: var(--text-dark);
}


#recordProgressContainer  .trackItem .downloadInfo{
    font-size: 80%;
}
#selectedBackgroundMusicSongWrapper {
    width: var(--size-full);
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: var(--size-80);
    display: flex;
    display: -moz-flexbox;
    box-sizing: border-box;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    background-color: var(--color-white-10);
}
#selectedBackgroundMusicSongWrapper > #noSongSelectedInfoBox {

    width: var(--size-full);
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    display: flex;
    display: -moz-flexbox;
    font-size: var(--text-base);
}
#selectedBackgroundMusicSongWrapper > #selectedSongInfoPreview {
    width: var(--size-full);
    box-sizing: border-box;
    padding: var(--space-2xs);
    display: flex;
    display: -moz-flexbox;
}
.statsTabInfo {
  color: var(--color-white-50);
  border-bottom: var(--border-1) solid var(--color-white-50);
  box-sizing: border-box;
  font-size: var(--text-md);
  padding: var(--space-2xs);
  cursor: pointer;
}
body.browser.mobileweb .statsTabInfo:hover{
  background-color: var(--color-white-10);
}


.statsTabInfo > .tabLabel > span {
    margin-right: var(--space-3xs);
}
.swiper-slide-active > .statsTabInfo {
  color: white;
  border-bottom: var(--border-1) solid white;
}
.statsTabInfo > .totalCount {
    font-size: var(--text-6xl);
    font-weight: 700;
}
.carouselItem .urlPreviewWrapper,
.swiper-slide .urlPreviewWrapper{
    width: var(--size-full);
}



.statsWrapper .ct-series-b .ct-bar,
.statsWrapper .ct-series-b .ct-line,
.statsWrapper .ct-series-b .ct-point,
.statsWrapper .ct-series-b .ct-slice-donut {
    stroke: var(--color-white-50);
    /*stroke-dasharray: 10px 20px;
    animation: dashoffset 1s linear infinite;
    -moz-animation: dashoffset 1s linear infinite;
    -o-animation: dashoffset 1s linear infinite;
    animation: dashoffset 1s linear infinite;
    stroke-dasharray: 10px 20px;*/
}
.statsWrapper .ct-series-a .ct-bar,
.statsWrapper .ct-series-a .ct-line,
.statsWrapper .ct-series-a .ct-point,
.statsWrapper .ct-series-a .ct-slice-donut {
    stroke: white;
    stroke-width: 3px;
}
#trebbleStatisticContent .ct-line{
  stroke-width: 5px;
}
.statsWrapper .ct-series-a .ct-bar {
    stroke-width: 10px;
}
@media (min-width: 700px) and (max-width: 1000px){
    .statsWrapper  .ct-bar {
        stroke-width: var(--size-20) !important;
    }
}
@media (min-width: 1000px) and (max-width: 1300px){
    .statsWrapper  .ct-bar {
        stroke-width: var(--size-30) !important;
    }
}
@media (min-width: 1300px) {
    .statsWrapper  .ct-bar {
        stroke-width: var(--size-40) !important;
    }
}
.statsWrapper .ct-series-a .ct-point {
    stroke-width: 8px;
}
.statsWrapper .ct-label {
    color: white;
    font-size: var(--text-base);
}
#trebbleStatisticContent {
    margin-top: var(--size-none);
    padding: var(--size-none);
    height: 513px;
}
#chartGeneralInfoWrapper,
#chartLegend {
    display: flex;
    display: -moz-flexbox;
}
#chartLegend {
    justify-content: center;
    align-items: flex-end;
    -webkit-justify-content: center;
    -webkit-align-items: flex-end;
    flex-direction: column;
    width: var(--size-full);
    flex: 1 1 100%;
    padding: var(--border-4);
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
    color: white;
}
.legendColor {
    width: var(--size-10);
    box-sizing: border-box;
    display: inline-block;
    padding: var(--space-3xs);
    margin-left: var(--space-2xs);
    height: var(--size-10);
}

@media (max-width: 500px) ,(max-height: 500px) and (orientation: landscape) {
  .statsTabInfo {
    font-size: var(--text-sm);
}

.statsTabInfo > .totalCount {
    font-size: var(--text-2xl);
    font-weight: 700;
}

#trebbleStatisticContent .ct-line {
    stroke-width: var(--size-2);
}

#statisticContent .legenItem,
#songStatisticContent .legenItem,
#trebbleStatisticContent .legenItem{
    font-size: var(--text-xs);
}

.statsWrapper .ct-label {
  font-size: var(--text-xs);
}

.statsWrapper .ct-series-b .ct-slice-donut {
    stroke-dasharray: 5px 10px;
}
}
.volatile-counter {
    position: absolute;
    top: -60px;
    left: calc(var(--size-half) - var(--space-sm));
    overflow: visible;
    font-weight: 300;
    font-size: var(--text-xs);
}
#playerFooter.browser * .volatile-counter {
    top: -30px;
    font-size: var(--text-xs);
}
.volatile-counter > span {
    font-size: var(--text-lg);
}
#playerFooter.browser * .volatile-counter > span {
    font-size: var(--text-md);
}

#loginPopupContentWrapper {
    align-items: center;
    justify-content: center;
    display: flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    -webkit-display: flex;
    -ms-align-items: center;
    -ms-justify-content: center;
    -ms-display: flex;
}
.sharedInfoWrapper {
    display: flex;
    display: -ms-flex;
    display: -moz-flex;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -ms-justify-content: center;
    -ms-align-items: center;
    -moz-justify-content: center;
    -moz-align-items: center;
    flex-direction: column;
}
.sharedInfoWrapper > .ui-input-text {
    margin: var(--space-2xs);
    border: var(--border-0) !important;
    flex: 0 0 auto;
    -webkit-flex:  0 0 auto;
    -ms-flex:  0 0 auto;
    -moz-flex:  0 0 auto;
    padding: var(--size-none) var(--space-2xs);
    width: var(--size-full);
    box-sizing: border-box;
}

.sharedInfoWrapper > .sharedInfoWrapper__button_group {
 display: flex;
 flex-direction: row;
 box-sizing: border-box;
 justify-content: center;
 align-items: center;
 padding: var(--space-2xs) var(--space-2xs);
}
#shareTrebblePopupContent {
    width: var(--size-full);
    box-sizing: border-box;
    max-width: var(--size-700);
    padding: var(--space-2xs);
    height: auto;
    overflow: auto;
}
.trebbleShareBoxWrapper {
    /*height: 80px;*/
}
.trebbleShareBoxWrapper a{
  font-weight:bold;
  color:white;
}

.trebbleShareBoxWrapper > .shareLinkLabel{
    text-align: left;
    padding: var(--size-none) var(--space-2xs);
}

.trebbleShareBoxWrapper .htmlTableEmbed{
    width: var(--size-full);
    padding: var(--space-2xs);
    margin: var(--space-2xs);
    background-color: var(--color-white-30);
    box-sizing: border-box;
}

.trebbleShareBoxWrapper .htmlTableEmbed td ,
.trebbleShareBoxWrapper .htmlTableEmbed th{
    padding: var(--size-none);
}

[data-role=page].transparent [class*=" pe-7s-"],[data-role=page].transparent [class^=pe-7s-]{
    font-weight: 400;
}

#textToSpeechBlock,
#useVoiceActorBlock{
   text-align: justify;
   height: calc(var(--size-full) - var(--size-50));
   flex-direction: column;
   display: flex;
   padding: var(--space-sm);
}
#textToSpeechBlock #textToConvertFieldBox{
    flex: 1 1 100%;
}
#useVoiceActorBlock [for=textToConvertByVoiceActorFieldBox],
#useVoiceActorBlock [for=instructionsForVoiceActorFieldBox]{
    margin: var(--size-none);
}

[data-role=page].createCapsulePage label.label_description{
    font-size: 90%;
    opacity: 0.5;
}

[data-role=page].createCapsulePage .field_wrapper.fullLength{
    margin: var(--space-3xs) var(--size-none);
}
[data-role=page].createCapsulePage .field_wrapper{
    margin: var(--space-3xs) auto;
}
#textToSpeechBlock #textToConvertFieldBox,
#textToSpeechBlock [for=ttsLanguageFld], 
[for=newsletterEmbedThemeSelector],
#useVoiceActorBlock #textToConvertFieldBox,
#useVoiceActorBlock [for=ttsLanguageForVoiceActorFld],
#useVoiceActorBlock [for=textToConvertByVoiceActorFieldBox],
#useVoiceActorBlock [for=instructionsForVoiceActorFieldBox],
#useVoiceActorBlock [for=voiceProfileFld],
#useVoiceActorBlock [for=voiceToneFld]{
    text-align: justify;
}

.response_box{
    display: flex;
    flex-direction: row;
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) { 
    .response_box{
     flex-direction: column;
 }
}

.response_box > *{
    flex: 1 1 100%;
}

.capsuleConfigWrapper,
.publishingSettingWrapper,
.schedulingSettingWrapper,
.schedulingTimezoneWrapper,
[for=capsuleLifeSpanFld],
[for=ttsLanguageFld],
[for=microphoneFld],
[for=newsletterEmbedThemeSelector],
[for=textToConvertFieldBox],
[for=titleFieldFld],
.privacySettingWrapper,
[for=privacySettingFld],
[for=capsuleTitleFld],
.categoryConfigWrapper,
.doNotAddOnAirCheckboxWrapper,
.schedulingSettingWrapper,
.publishingSettingWrapper,
#textToSpeechBlock,
#useVoiceActorBlock,
.titleFieldWrapper,
.capsuleLifeSpanFieldWrapper,
.languageUsedInAudioFldWrapper,
.ttsLanguageFieldWrapper,
[for=categoryFld],
.songToPlayAfterCapsuleFieldWrapper,
[for=songToPlayAfterCapsuleFld],
.backgroundMusicFieldWrapper,
[for=backgroundMusicFld],
#songToPlayAfterCapsuleInputPlaceholder,
#backgroundMusicInputPlaceholder{
  width: var(--size-full);
  box-sizing: border-box;
  /*padding-top: var(--space-2xs);*/
  padding-bottom: var(--border-4);
  /*color: var(--text-dark);*/
  max-width: var(--size-700);
  margin-right: auto;
  margin-left: auto;
}

.schedulingTimeWrapper #schedulingTimeFld{
    border: var(--border-0);
    height: var(--size-40);
    background: var(--color-white-10);
    margin: var(--size-none);
    text-align: center;
    color: white;
}

.capsuleCreationWrapper .capsuleInfo  *.isHidden,
#trebbleInfoDetailWrapper *.isHidden{
  display:none !important;
}

.capsuleCard #privacy,
.capsuleCard .privateIcon{
    color: var(--trebble-primary) !important;
    
}
.capsuleCard #privacy,
.capsuleCard .privateIcon,
[data-role=page] * .capsuleCard * .itemSubtitle#schedulingInfo,
[data-role=page] * .capsuleCard * .itemSubtitle#expirationDate{
   font-weight: 700;   
}

.capsuleCard .pe-7s-lock{
  font-size: var(--text-md);
  line-height: var(--line-height-lg);
  color: var(--trebble-primary);
  font-weight:bold;
}
.ui-field-contain > div >  div.ui-input-text {
  border-color: transparent !important;
}
#titleField{
  color: white;
  background-color: var(--color-white-10);
}
.ui-page.ui-page:not(.lighttext) #titleField{
    color: var(--text-dark);
}
.artistDetailsPage.full * #artistProfileWrapper,
.userProfileDetailsPage * #userOverviewInfoWrapper {
    display: flex;
    display: -ms-flex;
    display: -moz-flex;
    flex-direction: column;
    -moz-flex-direction: column;
}
.artistDetailsPage.full * #artistProfileWrapper > #albumAndTracksSummaryWrapper,
.artistDetailsPage.full * #artistProfileWrapper > #artistBioAndSocialInfoWrapper,
.userProfileDetailsPage * #userOverviewInfoWrapper > #capsuleHistoryWrapper, 
.userProfileDetailsPage * #userOverviewInfoWrapper > #songsAndTrebbleSummaryWrapper {

    display: inline-table;
    width: var(--size-full);
    flex: 0 0 100%;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    -moz-flex: 0 0 100%;
}
body.browser > .artistDetailsPage.full * #artistProfileWrapper > #artistBioAndSocialInfoWrapper,
body.browser > .userProfileDetailsPage * #userOverviewInfoWrapper > #songsAndTrebbleSummaryWrapper  {
    flex: 0 0 420px;
    -webkit-flex: 0 0 420px;
    display: block;
    -ms-flex: 0 0 420px;
    -moz-flex: 0 0 420px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
body.browser > .artistDetailsPage.full * #artistProfileWrapper > #albumAndTracksSummaryWrapper,
body.browser > .userProfileDetailsPage * #userOverviewInfoWrapper > #capsuleHistoryWrapper {
    flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    -moz-flex: 1 1 100%;
    /*min-width: 700px;*/
    display: block;
}

body.browser > .artistDetailsPage.full * #artistProfileWrapper, 
body.browser > .userProfileDetailsPage * #userOverviewInfoWrapper{
    display: flex;
    display: -ms-flex;
    display: -moz-flex;
    flex-direction: row;
    -moz-flex-direction: row;
}

[data-role=page].lighttext * #bioContainer {
    color: var(--color-white-80);
}
@media (max-width: 800px) {

    body.browser > .userProfileDetailsPage * #userOverviewInfoWrapper {
      flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
  }
  body.browser > .artistDetailsPage.full * #artistProfileWrapper {
      flex-direction: column;
      -moz-flex-direction: column;
  }
  body.browser > .artistDetailsPage.full * #artistProfileWrapper > #albumAndTracksSummaryWrapper,
  body.browser > .userProfileDetailsPage * #userOverviewInfoWrapper > #capsuleHistoryWrapper ,
  body.browser > .artistDetailsPage.full * #artistProfileWrapper > #artistBioAndSocialInfoWrapper,
  body.browser > .userProfileDetailsPage * #userOverviewInfoWrapper > #songsAndTrebbleSummaryWrapper {
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
}
}
#bioContainer {
    color: var(--text-dark);
    cursor: pointer;
    text-align: start;
}
.ellipsis {
    overflow: hidden;
    position: relative;
    height: var(--size-90);
    line-height: var(--line-height-2-5xl);
}
.ellipsis:before {
    content: "";
    float: left;
    width: var(--size-5);
    height: var(--size-90);
}
.ellipsis > *:first-child {
    float: right;
    width: var(--size-full);
    margin-left: calc(var(--border-5) * -1);
}
.ellipsis:after {
    content: "\02026 Read More";
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right;
    position: relative;
    top: -25px;
    left: 100%;
    width: 7em;
    margin-left: -7em;
    padding-right: var(--space-3xs);
    text-align: right;
    background-size: 100% 100%;
    /* 1706x1 image, gradient for IE9. Transparent at 0% -> white at 15% -> white at 100%.*/
    background: linear-gradient(to right, var(--color-white-0), var(--color-black) 15%, var(--color-black));
}
.ellipsis a {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-full);
    height: var(--size-full);
    overflow: hidden;
    text-indent: -9999px;
}
.ellipsis i,
.ellipsis:after {
    font-style: normal;
    color: var(--text-muted-dark);
}
.lighttext * .ellipsis i,
.ellipsis:after {
    font-style: normal;
    color: var(--color-white-30);
}
.ellipsis i:before {
    content: "Read More";
}
#player * #commentOverviewBox > div {
    width: var(--size-full);
}
.artistPhotoAndName {
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    flex-direction: row;
    -moz-flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    height: var(--size-50);
}
.artistPhotoAndName > div {
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
    box-sizing: border-box;
    font-weight: 600;
    opacity: 0.7;
}
.artistPhotoAndName > img {
    -o-object-fit: cover;
       object-fit: cover;
    height: var(--size-50);
    width: var(--size-50);
    border-radius: 50%;
    flex: 0 0 50px;
    -webkit-flex: 0 0 50px;
    -moz-flex: 0 0 50px;
    -ms-flex: 0 0 50px;
}
.lighttext * .artistBioSummary {
    padding: var(--space-sm);
    color: white;
    max-width: 80%;
}
.artistSummaryItem#bioCarouselItem {
    display: flex;
    justify-content: center;
    align-items: center;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -moz-flex;
    -moz-justify-content: center;
    -moz-align-items: center;
    display: -ms-flex;
    -ms-justify-content: center;
    -ms-align-items: center;
}
.lighttext * .artistBioSummary > .bio {
    height: var(--size-90);
    font-size: var(--text-sm);
    line-height: var(--line-height-2-5xl);
    overflow: auto;
    padding: var(--space-2xs);
}
#topSongsCarouselItem,
#albumsCarouselItem,
#youtubeVideosCarouselItem {
    padding-left: var(--size-50);
    padding-right: var(--size-50);
}
.lighttext * .swiper-pagination-bullet {
    background: var(--color-white-40);
}
.lighttext * .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: white;
}
#reponsivePlayerContent * .swiper-pagination-bullet {
    /*background-color: var(--color-white-30);*/
    background-color: transparent;
    border: var(--border-2) solid white;
    opacity: 1;
    width: var(--size-6);
    height: var(--size-6);
}
#reponsivePlayerContent * .swiper-pagination {
    top: 10px;
}
#reponsivePlayerContent * .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: white;
}
.tooltip {
  position: absolute;
  display: inline-block;
  min-width: 5em;
  padding: var(--text-3xs);
  background: white;
  color: var(--trebble-primary);
  text-align: center;
  pointer-events: none;
  font-weight: 400;
  z-index: 1;
}

.tooltip:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: calc(var(--border-6) * -1);
  border: var(--border-4) solid transparent;
  border-top-color: white;
}
.sweet-alert * .uploadZonePlaceHolder{
    display: block;
}
.sweet-alert button{
    border-radius: 0px !important;
}

.sweet-alert.trebble_sweet_alert.show-input h2{
    padding: 0 var(--text-xl-px);
}

.sweet-alert button.confirm[disabled].show_orginal_text ~ .la-ball-fall{
    display: none;
}

.sweet-alert button.confirm[disabled].show_orginal_text{
    color: var(--text-light);
}

[data-role=page].transparent .uploadZonePlaceHolder,
body.darkTheme  [data-role=page]:not(.transparent) .uploadZonePlaceHolder{
    color: white;
}

.uploadZonePlaceHolder {
    height: var(--size-200);
    background-color: var(--bg-light);
    border: var(--border-2) dashed var(--trebble-primary-200);
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    display: -webtki-flex;
    -webtki-justify-content: center;
    -webtki-align-items: center;
    display: -moz-flex;
    -moz-justify-content: center;
    -moz-align-items: center;
    display: -ms-flex;
    -ms-justify-content: center;
    -ms-align-items: center;
    flex-direction: column;
    cursor: pointer;
    /*border: var(--border-2) dashed var(--trebble-primary);*/
}

.uploadZonePlaceHolder > span.dz-message{
    cursor: pointer;
}
body.browser.mobileweb .uploadZonePlaceHolder:hover,
.uploadZonePlaceHolder:active,
.uploadZonePlaceHolder.dz-drag-hover{

    background-color: var(--text-dark);
    border: var(--border-2) dashed var(--color-gray-300);
    color: white!important;
    
}

.uploadZonePlaceHolder.dz-started > span,
.uploadZonePlaceHolder.dz-started > .uploadIcon {
    display: none;
}
.uploadZonePlaceHolder > span {
  display: block;
  padding: var(--space-2xs);
  box-sizing: border-box;
  font-size: var(--text-md);
  font-weight: bold;
  
}
.uploadZonePlaceHolder > span > .detailMessage{
    font-weight: normal;
    font-size: 80%;
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape)
{
    .uploadZonePlaceHolder > span {

      font-size: var(--text-xs);

  }
  
}
.uploadZonePlaceHolder > .dz-image-preview > .dz-image > img {
    height: var(--size-70);
    width: var(--size-70);
    -o-object-fit: contain;
       object-fit: contain;
}
.uploadZonePlaceHolder > .dz-preview {
 display: flex;
 display: -ms-flex;
 display: -moz-flex;
 justify-content: center;
 -webkit-justify-content: center;
 -moz-justify-content: center;
 -ms-justify-content: center;
 align-items: center;
 -moz-align-items: center;
 -ms-align-items: center;
 font-weight: 400;
 padding: var(--space-2xs);
 box-sizing: border-box;
 flex-direction: column;
 height: var(--size-full);
 width: var(--size-full);
}
.uploadZonePlaceHolder > .dz-preview > .dz-success-mark,
.uploadZonePlaceHolder > .dz-preview > .dz-error-mark {
    display: none;
}

.uploadZonePlaceHolder > .dz-preview .dz-error-message{
    background-color: var(--error);
    margin: var(--space-2xs);
}

.uploadZonePlaceHolder > .dz-preview .dz-error-message > span{
    /*padding: var(--space-2xs);*/
    display: flex;
}

.uploadZonePlaceHolder > .dz-preview > .dz-details {
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
    text-align: center;
    width: var(--size-full);
}

.uploadZonePlaceHolder > .dz-preview > .dz-details >  *{
  text-overflow: ellipsis;
  overflow: hidden;
}
.uploadZonePlaceHolder > .dz-preview > .dz-details > .dz-size{
  line-height:var(--line-height-base);
  font-size: var(--text-sm-px);
}

.uploadZonePlaceHolder {
    color: var(--trebble-primary-200);
    font-size: var(--text-sm-px);
    text-decoration: none;
    font-weight: 600;
}


.uploadZonePlaceHolder > .dz-preview > .dz-details > .dz-filename{
  font-size: var(--text-md-px);
  line-height:var(--line-height-2xl);
  white-space: nowrap;
}

.uploadZonePlaceHolder > .dz-preview .dz-remove{

    color: var(--trebble-primary-200);
    font-size: var(--text-sm-px);
    font-weight: 600;
    text-decoration: none;

}
.dz-preview .dz-progress,
.uploadProgressInfo .progressBar,
.popupContent .progressBar {
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    height: var(--size-6);
    margin: var(--space-2xs);
    width: calc(var(--size-full) - var(--space-sm));
    transform: scale(1);
    background-color: var(--color-gray-300);
    overflow: hidden;
}
.dz-preview .dz-progress .dz-upload,
.uploadProgressInfo .progressBar > .currentProgress,
.popupContent .progressBar > .currentProgress {
 background: var(--text-dark); 
 background: linear-gradient(to bottom, var(--color-gray-600), var(--text-dark)); 
 position: absolute; 
 top: 0; 
 left: 0; 
 bottom: 0;
 width: 0; 
 transition: width 300ms ease-in-out; 
}

.ui-page.lighttext .uploadProgressInfo .progressBar,
.popupContent .progressBar {
  background-color: var(--color-white-20);
}
.ui-page.lighttext  .uploadProgressInfo .progressBar > .currentProgress,
body.darkTheme .ui-page:not(.lighttext) .uploadProgressInfo .progressBar > .currentProgress,
.popupContent .progressBar > .currentProgress{
  background: white;
}

.ui-page:not(.lighttext) .uploadProgressInfo .progressBar{
  background-color: var(--color-black-10);
}

.ui-page.lighttext .uploadProgressInfo .progressBar,
body.darkTheme .ui-page:not(.lighttext) .uploadProgressInfo .progressBar{
    background-color: var(--color-white-10);
  }
/*
.ui-page:not(.lighttext)  .uploadProgressInfo .progressBar > .currentProgress{
  background: var(--gradient-primary-alt);
}*/

@keyframes indeterminatePogressBarAnimation {
  0% {
    transform:  translateX(0) scaleX(0);
}
40% {
    transform:  translateX(0) scaleX(0.4);
}
100% {
    transform:  translateX(100%) scaleX(0.5);
}
}

.progressContentWrapper.inderterminate #percentageProgress{
    display: none;
}

.progressContentWrapper.inderterminate .currentProgress{
    animation: indeterminatePogressBarAnimation 1.5s infinite linear;
    transform-origin: 0% 50%;
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
    .progressContentWrapper #percentageProgress {
      font-weight: 900;
      font-size: var(--text-7xl-px);
  }

  .progressContentWrapper #progressMessage {
      font-weight: 600;
      font-size: var(--text-lg-px);
  }
  .progressContentWrapper #progressSubMessage {

      font-size: var(--text-sm-px);
  }

}


#showRecordSectionButton,
#showUploadSectionButton,
#recordControlsWrapper.uploadAvailable > [data-role=controlgroup] >:first-child > a#showUploadSectionButton,
#recordControlsWrapper.uploadAvailable > [data-role=controlgroup] >:first-child > o#showUploadSectionButton  {

    display: flex;
    display: -ms-flex;
    display: -moz-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    font-weight: 400;

}
#showRecordSectionButton > #recordIcon,
#showUploadSectionButton > #uploadIcon{
    font-size: var(--text-3xl);
    margin-right: var(--space-2xs);
    margin-left: var(--space-2xs);

}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  #showUploadSectionButton{
    font-size: var(--text-xs-px) !important;
}
#showRecordSectionButton > #recordIcon, #showUploadSectionButton > #uploadIcon{
    font-size: var(--text-xl-px) !important;
}

#createCapsuleInfoHeader * .tag.actionButton  .pe-7s-upload{
    font-size: var(--text-6xl) !important;
}
}


body.browser.mobileweb .statsWrapper .ct-series-a .ct-bar:hover, 
body.browser.mobileweb .statsWrapper .ct-series-a .ct-point:hover,
body.browser.mobileweb  .statsWrapper .ct-series-a .ct-slice-donut:hover,
body.browser.mobileweb  .statsWrapper .ct-series-b .ct-bar:hover, 
body.browser.mobileweb .statsWrapper .ct-series-b .ct-point:hover,
body.browser.mobileweb .statsWrapper .ct-series-b .ct-slice-donut:hover,
body.browser.mobileweb .statsWrapper .ct-series-c .ct-bar:hover, 
body.browser.mobileweb .statsWrapper .ct-series-c .ct-point:hover,
body.browser.mobileweb  .statsWrapper .ct-series-c .ct-slice-donut:hover,
body.browser.mobileweb  .statsWrapper .ct-series-d .ct-bar:hover, 
body.browser.mobileweb .statsWrapper .ct-series-d .ct-point:hover,
body.browser.mobileweb .statsWrapper .ct-series-d .ct-slice-donut:hover{
  /*stroke-width: 20px;*/
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.15s;
  transition-property: all;
  opacity: 0.6;
}
#trebbleStatisticContent .ct-grid{
  stroke: var(--color-white-70);
  stroke-width: 1px;
  stroke-dasharray: 2px;
}

#songStatisticContent .ct-grid {
  stroke: var(--color-white-20);
  stroke-width: 1px;
  stroke-dasharray: 2px;
}

#songStatisticContent .ct-series-a .ct-bar{
  stroke:var(--color-success-alt);
}
#songStatisticContent .legenItem .legendColor.trebbleContext{
  background-color:var(--color-success-alt);
}
#songStatisticContent .ct-series-b .ct-bar{
  stroke:var(--color-purple-550);
}
#songStatisticContent .legenItem .legendColor.sharedCapsuleContext{
  background-color:var(--color-purple-550);
}
#songStatisticContent .ct-series-c .ct-bar{
    stroke: var(--color-warning-400);
}
#songStatisticContent .legenItem .legendColor.sharedSongContext{
  background-color:var(--color-warning-400);
}

#statisticContent .legenItem,
#trebbleStatisticContent .legenItem,
#songStatisticContent .legenItem{
    text-align: right;
}

#songStatisticContent .ct-series-d .ct-bar{
  stroke:  var(--pink);
}
#songStatisticContent .legenItem .legendColor.executedBySongOwnerContext{
  background-color:var(--pink);
}

body.browser.mobileweb .hint:hover:before,
body.browser.mobileweb .hint:hover:after,
body.browser.mobileweb  [data-hint]:hover:before,  
body.browser.mobileweb [data-hint]:hover:after{
    transition-delay: 100ms;
}

body.browser.mobileweb .hint:after,
body.browser.mobileweb [data-hint]:after {
    content: attr(data-hint);
    background: var(--color-gray-100);
    color:  var(--text-dark);
    padding: var(--space-2xs) var(--space-2xs);
    /*font-size: var(--text-xs);*/
    line-height: var(--text-xs-px);
    white-space: nowrap;
    font-style: normal;
    font-weight: 400;
}

body.browser.mobileweb .audio_sequencer .hint:after,
body.browser.mobileweb .audio_sequencer [data-hint]:after {
    content: attr(data-hint);
    padding: var(--space-xs) var(--text-sm-px);
    font-size: var(--text-sm-px);
}


body.browser.mobileweb .lighttext *  .hint--right:not(.light_theme):before,
body.browser.mobileweb #playerFooter:not(.transparent)  * .hint--right:before{
  border-right-color: var(--text-dark);
  
}

body.browser.mobileweb .lighttext *  .hint--left:not(.light_theme):before,
body.browser.mobileweb #playerFooter:not(.transparent)  * .hint--left:before{
  border-left-color: var(--text-dark);
}


body.browser.mobileweb .lighttext * .hint:after,
body.browser.mobileweb .lighttext *  [data-hint]:not(.light_theme):after,
body.browser.mobileweb #playerFooter:not(.transparent)  * .hint:after,
body.browser.mobileweb #playerFooter:not(.transparent)   *  [data-hint]:after {
  color: white;
  background: var(--text-dark);
}

body.browser.mobileweb .hint:after,
body.browser.mobileweb  [data-hint]:after,
body.browser.mobileweb  [data-hint]:before {
    text-shadow: none;
    box-shadow: var(--shadow-lg);
}
body.browser.mobileweb .hint--bottom,
body.browser.mobileweb  .hint--top,
body.browser.mobileweb   .hint--left,
body.browser.mobileweb  .hint--right{
    overflow: visible;

}
body.browser.mobileweb .hint--bottom:before {
    border-bottom-color: var(--color-gray-100);
}
body.browser.mobileweb .hint--left:before{
    border-left-color: var(--color-gray-100);
}
body.browser.mobileweb .hint--top:before{
    border-top-color: var(--color-gray-100);
}
body.browser.mobileweb .hint--right:before {
    border-right-color: var(--color-gray-100);
}

body.browser.mobileweb .lighttext * .hint--bottom:not(.light_theme):before {
    border-bottom-color: var(--text-dark);
}
body.browser.mobileweb .lighttext *  .hint--left:not(.light_theme):before{
    border-left-color: var(--text-dark);
}
body.browser.mobileweb .lighttext *  .hint--top:not(.light_theme):before{
    border-top-color: var(--text-dark);
}
body.browser.mobileweb .lighttext *  .hint--right:not(.light_theme):before {
    border-right-color: var(--text-dark);
}

body.browser.mobileweb t.hint--bottom,
body.browser.mobileweb  t.hint--top,
body.browser.mobileweb   t.hint--left,
body.browser.mobileweb  t.hint--right{
    position: absolute;
    top: 0px;
    left: 0px;
    height: var(--size-full);
    width: var(--size-full);
}

body.browser:not(.mobileweb) * .hint--bottom:before,
body.browser:not(.mobileweb) *  .hint--top:before,
body.browser:not(.mobileweb) *  .hint--left:before, 
body.browser:not(.mobileweb) *  .hint--right:before,
body.browser:not(.mobileweb) * .hint--bottom:after,
body.browser:not(.mobileweb) *  .hint--top:after,
body.browser:not(.mobileweb) *  .hint--left:after, 
body.browser:not(.mobileweb) *  .hint--right:after,
body:not(.browser) * .hint--bottom:before,
body:not(.browser) *  .hint--top:before,
body:not(.browser) *  .hint--left:before, 
body:not(.browser) *  .hint--right:before,
body:not(.browser) * .hint--bottom:after,
body:not(.browser) *  .hint--top:after,
body:not(.browser) *  .hint--left:after, 
body:not(.browser) *  .hint--right:after{
    display: none;

}


body.browser.mobileweb #addToTrebbleOptionButtuon.ion-ios7-checkmark-outline:hover:before,
#addToTrebbleOptionButtuon.ion-ios7-checkmark-outline:active:before,
#songIsFavoriteBtn:active > t.ion-ios7-checkmark-outline:before,
body.browser.mobileweb #songIsFavoriteBtn:hover > t.ion-ios7-checkmark-outline:before{
    content:'\f2bb';
}

body.browser.mobileweb #addToTrebbleOptionButtuon.ion-ios7-checkmark-outline.ion-loading-c:hover:before,
#addToTrebbleOptionButtuon.ion-ios7-checkmark-outline.ion-loading-c:active:before,
#songIsFavoriteBtn:active > t.ion-ios7-checkmark-outline.ion-loading-c:before,
body.browser.mobileweb #songIsFavoriteBtn:hover > t.ion-ios7-checkmark-outline.ion-loading-c:before{
    content: '\f29c';

}
.animate-spin,
body.browser.mobileweb #addToTrebbleOptionButtuon.ion-ios7-checkmark-outline.ion-loading-c:hover,
#addToTrebbleOptionButtuon.ion-ios7-checkmark-outline.ion-loading-c:active,
#songIsFavoriteBtn:active > t.ion-ios7-checkmark-outline.ion-loading-c,
body.browser.mobileweb #songIsFavoriteBtn:hover > t.ion-ios7-checkmark-outline.ion-loading-c,
body.browser.mobileweb #playButton.ion-loading-c:hover,
#playButton.ion-loading-c:active{
    background-color: transparent !important;
}

.trebbleExplicitIcon{
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    align-content: center;
    -webkit-align-content: center;
    justify-content: center;
    -webkit-justify-content: center;
    background-color: var(--trebble-primary);
    width: var(--size-16);
    height: var(--size-16);
    border-radius: 2px;
    font-size: var(--text-2xs);
    line-height: var(--space-xs);
    color: white;
    align-self: center;
    -webkit-align-self: center;
    -moz-align-self: center;
    -ms-align-self: center;
}

.trebbleExplicitIcon:before{
    content: 'E';
}


#trebbleInfoDetailWrapper {
  max-width: 1000px;
  margin: auto;
  color: var(--text-dark);
  background-color: white;
  padding: var(--space-2xs);
  display: flex;
  display: -moz-flex;
  display: -ms-flex;
  align-content: center;
  -webkit-align-content: center;
  justify-content: center;
  -webkit-justify-content: center;
  align-self: center;
  -webkit-align-self: center;
  -moz-align-self: center;
  -ms-align-self: center;
  flex-direction: column;
  -moz-flex-direction: column;

}

@media (min-width: 800px), (min-height: 800px) and (orientation: landscape){
  #trebbleInfoDetailWrapper {
    flex-direction: row;
    -moz-flex-direction: row;
}

#trebbleInfoDetailWrapper > .coverArtWrapper{
    width:-moz-fit-content;
    width:fit-content;
    height:-moz-fit-content;
    height:fit-content;
    margin: var(--size-none) var(--space-2xs);
    max-width: 35%;
}
}


.fieldDesc{
 font-size: small;
 color: var(--color-gray-500);
 padding: var(--size-none) var(--space-2xs);
 /* background: var(--color-black-5); */
 /* padding: var(--space-2xs); */
 /* padding-left: var(--text-2xl-px); */
 margin-bottom: var(--space-sm);
}

#trebbleInfoDetailWrapper > .coverArtWrapper{
    position: relative;
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    flex-direction: column;
    -moz-flex-direction: column;
    background-color: white;
    margin: var(--space-sm);

}

#trebbleInfoDetailWrapper > .coverArtWrapper:before{
 color: var(--color-gray-300);
 font-size: var(--text-6xl);
 font-weight: 100;
 padding: var(--text-xl-px);
 position: absolute;
 top: calc(var(--size-half) - var(--size-50));
 left: calc(var(--size-half) - var(--size-50));
 /* border: var(--border-1) solid var(--color-gray-300); */
 /* background-color: var(--pulse-gray); */
 border-radius: 5px;
}

#trebbleInfoDetailWrapper > .coverArtWrapper > .trebbleCoverArt{
    -o-object-fit: contain;
       object-fit: contain;
    height: var(--size-300);
    /*margin: var(--space-sm) var(--size-none);*/
}

#trebbleInfoDetailWrapper > .coverArtWrapper > .trebbleCoverArt[src='../img/videoLoading.png'] ~ #editTrebbleCoverPicBtn{
   border-color: var(--color-white-100);
   background-color: var(--color-white-100);
   color: var(--text-dark) !important;
   font-family: var(--trebble-font),sans-serif;

}
body.browser.mobileweb #trebbleInfoDetailWrapper > .coverArtWrapper > .trebbleCoverArt[src='../img/videoLoading.png'] ~ #editTrebbleCoverPicBtn:hover,
#trebbleInfoDetailWrapper > .coverArtWrapper > .trebbleCoverArt[src='../img/videoLoading.png'] ~ #editTrebbleCoverPicBtn:active{
  background-color:transparent;
  border-color: white;
  color: white !important;
}
#trebbleInfoDetailWrapper > .coverArtWrapper > #editTrebbleCoverPicBtn{
  padding-top: var(--border-2);
  padding-bottom: var(--border-2);
  height: var(--size-100);
  margin: var(--size-none);
  font-weight: 300;
  line-height: var(--line-height-10xl);
  margin-top: var(--size-50);
  bottom: 20px;
  position: absolute;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: row;
  max-width: var(--size-100);
  width: var(--size-full);
  left: calc(var(--size-half) - var(--text-7xl-px));
  color: white;
  font-size: var(--text-sm);
  top: calc(var(--size-half) - 111px);
  /* display: none; */
  font-size: var(--text-6xl-px);
  border:var(--border-0);
}


.audioPlaceholder > .content > a#editSweeperButton,
.audioPlaceholder > .content > a#deleteSweeperButton,
.audioPlaceholder > .content > a#editGreaterButton,
.audioPlaceholder > .content > a#deleteGreaterButton,
.audioPlaceholder > .content > a#editIntroButton,
.audioPlaceholder > .content > a#deleteIntroButton,
.audioPlaceholder > .content > a#editOutroButton,
.audioPlaceholder > .content > a#deleteOutroButton{

    flex: 0 0 50px;
    font-size: var(--text-3xl);
    padding: var(--border-1);
    line-height: var(--line-height-4xl);
    margin: var(--size-none);
    background-color: transparent;
    height: var(--size-40);
    border: var(--border-0);
    color: var(--trebble-primary);

}
.audioPlaceholder > .content > a#editSweeperButton:active,
.audioPlaceholder > .content > a#deleteSweeperButton:active,
body.browser.mobileweb .audioPlaceholder > .content > a#editSweeperButton:hover,
body.browser.mobileweb .audioPlaceholder > .content > a#deleteSweeperButton:hover,
.audioPlaceholder > .content > a#editGreaterButton:active,
.audioPlaceholder > .content > a#deleteGreaterButton:active,
body.browser.mobileweb .audioPlaceholder > .content > a#editGreaterButton:hover,
body.browser.mobileweb .audioPlaceholder > .content > a#deleteGreaterButton:hover,
.audioPlaceholder > .content > a#editIntroButton:active,
.audioPlaceholder > .content > a#deleteIntroButton:active,
body.browser.mobileweb .audioPlaceholder > .content > a#editIntroButton:hover,
body.browser.mobileweb .audioPlaceholder > .content > a#deleteIntroButton:hover,
.audioPlaceholder > .content > a#editOutroButton:active,
.audioPlaceholder > .content > a#deleteOutroButton:active,
body.browser.mobileweb .audioPlaceholder > .content > a#editOutroButton:hover,
body.browser.mobileweb .audioPlaceholder > .content > a#deleteOutroButton:hover{ 
    color: white !important;
    background-color: var(--trebble-primary) !important;
}


.audioPlaceholder > .content > .noAudioAvaliablePlaceholder,
.audioPlaceholder > .content > #playSweeperBtn,
.audioPlaceholder > .content > #playGreaterBtn,
.audioPlaceholder > .content > #playIntroBtn,
.audioPlaceholder > .content > #playOutroBtn{
    flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    -moz-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    -o-flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    padding-bottom: var(--space-3xs);
    padding-top: var(--space-3xs);
    text-align: center;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    /* height: var(--size-30); */
    
    margin: var(--size-none);
    padding-right: var(--size-none);
    padding-left: var(--size-none);
    font-weight: 300;
    /* background-color: var(--trebble-primary); */
    
    
    line-height: var(--line-height-2-5xl);
    font-size: var(--text-sm);
    display: flex;
    display: -webkit-flex;
    width: var(--size-full);

}
.audioPlaceholder > .content,
.songSelectorPlaceholder > .content{
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    flex-direction: row;
    -moz-flex-direction: row;
    /*padding: var(--size-none) var(--space-2xs);*/
}
.audioPlaceholder > .content > #playSweeperBtn,
.audioPlaceholder > .content > #playGreaterBtn,
.audioPlaceholder > .content > #playIntroBtn,
.audioPlaceholder > .content > #playOutroBtn{
    border: var(--border-2) solid var(--trebble-primary);
    color: var(--trebble-primary);


}
.audioPlaceholder > .content > .noAudioAvaliablePlaceholder{
    background-color: var(--color-gray-100);
    color: var(--text-dark);
    display:none;

}
.audioPlaceholder > .content > #playSweeperBtn,
.audioPlaceholder > .content > #playGreaterBtn,
.audioPlaceholder > .content > #playIntroBtn,
.audioPlaceholder > .content > #playOutroBtn{

    cursor: pointer;
}
.audioPlaceholder > .content > #playSweeperBtn:active,
body.browser.mobileweb .audioPlaceholder > .content > #playSweeperBtn:hover,
.audioPlaceholder > .content > #playGreaterBtn:active,
body.browser.mobileweb .audioPlaceholder > .content > #playGreaterBtn:hover,
.audioPlaceholder > .content > #playIntroBtn:active,
body.browser.mobileweb .audioPlaceholder > .content > #playIntroBtn:hover,
.audioPlaceholder > .content > #playOutroBtn:active,
body.browser.mobileweb .audioPlaceholder > .content > #playOutroBtn:hover{
  cursor: pointer;
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: color, background-color;
  background-color: var(--trebble-primary);
  border: var(--border-2) solid var(--trebble-primary);
  color: white;
}


.audioPlaceholder.noAudioAvailable > .content > .noAudioAvaliablePlaceholder{
    display: block;
}

.audioPlaceholder.noAudioAvailable > .content > #playSweeperBtn,
.audioPlaceholder.noAudioAvailable > .content > #playGreaterBtn,
.audioPlaceholder.noAudioAvailable > .content > #playIntroBtn,
.audioPlaceholder.noAudioAvailable > .content > #playOutroBtn{
    display: none;
}

.audioPlaceholder.noAudioAvailable > .content >  a#deleteSweeperButton,
.audioPlaceholder.noAudioAvailable > .content >  a#deleteGreaterButton,
.audioPlaceholder.noAudioAvailable > .content >  a#deleteIntroButton,
.audioPlaceholder.noAudioAvailable > .content >  a#deleteOutroButton{
    display: none;
}


.songSelectorPlaceholder.not_modifiable > .content > .noAudioAvaliablePlaceholder, 
.songSelectorPlaceholder.not_modifiable > .content > .selectedSongViewPlaceHolder{
    max-width: var(--size-full);
}
.songSelectorPlaceholder > .content > #pickSongButton,
.songSelectorPlaceholder > .content > #removeSelectedButton{
    flex: 0 0 20px;
    font-size: var(--text-3xl);
    padding: var(--size-none);
    line-height: var(--line-height-2xl);
    margin: 0;
    background-color: transparent;
    height: var(--size-20);
    border: var(--border-0);
    margin: var(--space-sm);
    color: var(--trebble-primary);
    display: flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    cursor: pointer;

}

[data-role=page].transparent .songSelectorPlaceholder > .content > #pickSongButton,
[data-role=page].transparent .songSelectorPlaceholder > .content > #removeSelectedButton{
    color:white;
}
body.browser.mobileweb .lighttext .songSelectorPlaceholder > .content > #pickSongButton:hover,
body.browser.mobileweb .lighttext .songSelectorPlaceholder > .content > #removeSelectedButton:hover,
.lighttext .songSelectorPlaceholder > .content > #pickSongButton:active,
.lighttext .songSelectorPlaceholder > .content > #removeSelectedButton:active{
  color:white;
}

body.browser.mobileweb [data-role=page].transparent  .songSelectorPlaceholder > .content > #pickSongButton:hover,
body.browser.mobileweb [data-role=page].transparent  .songSelectorPlaceholder > .content > #removeSelectedButton:hover,
[data-role=page].transparent .songSelectorPlaceholder > .content > #pickSongButton:active,
[data-role=page].transparent .songSelectorPlaceholder > .content > #removeSelectedButton:active{
  color: var(--trebble-primary);
}


.selectedSongViewPlaceHolder > .songInfo{
  width:var(--size-full);
}

.selectedSongViewPlaceHolder > .songInfo > .songAndArtist{
    overflow: hidden;
}
.songSelectorPlaceholder > .content > .selectedSongViewPlaceHolder,
.songSelectorPlaceholder > .content > .noAudioAvaliablePlaceholder{
    flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    -moz-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    -o-flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    text-align: center;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    /* height: var(--size-30); */
    
    margin: var(--size-none);
    padding: var(--border-2);
    display: flex;
    display: -webkit-flex;
    width: var(--size-full);
    height: var(--size-52);
    max-width: calc(var(--size-full) - var(--size-icon-lg));

}

.songSelectorPlaceholder > .content > .selectedSongViewPlaceHolder{
    border: var(--border-2) solid var(--color-white-40);
}

.songSelectorPlaceholder > .content > .noAudioAvaliablePlaceholder{
  border: var(--border-2) solid var(--color-white-20);
  /*
  background-color: var(--color-white-20);*/
  opacity:0.5;
  color: var(--color-white-50);
}
.songSelectorPlaceholder.noSongSelected > .content > .selectedSongViewPlaceHolder,
.songSelectorPlaceholder.noSongSelected > .content > #removeSelectedButton{
    display: none;
}


.songSelectorPlaceholder.not_modifiable > .content >  #pickSongButton,
.songSelectorPlaceholder.not_modifiable > .content >  #removeSelectedButton,
.songSelectorPlaceholder:not(.noSongSelected) > .content > .noAudioAvaliablePlaceholder,
.songSelectorPlaceholder:not(.noSongSelected) > .content > #pickSongButton{
    display: none;
}


.audioPlaceholder > .content > #playSweeperBtn,
.audioPlaceholder > .content > #playGreaterBtn,
.audioPlaceholder > .content > #playIntroBtn,
.audioPlaceholder > .content > #playOutroBtn{
    color: var(--trebble-primary);
}

.audioPlaceholder > .content > #playSweeperBtn:before,
.audioPlaceholder > .content > #playGreaterBtn:before,
.audioPlaceholder > .content > #playIntroBtn:before,
.audioPlaceholder > .content > #playOutroBtn:before {
  font-size: var(--text-xl-px);
}

.icon-trebble-icon-2ton,
.icon-trebbleLogo,
.icon-trebblelogofull,
.icon-trebblelogoshortwhite{
    transition : color 0.5s ease;
    -webkit-transition : color 0.5s ease;
    -moz-transition : color 0.5s ease;
    -ms-transition : color 0.5s ease;
    -o-transition : color 0.5s ease;
}


@media (min-width: 800px) {
  .WelcomeBetaUserBox {
    width: var(--size-800);
    padding-top: var(--size-100);
    margin: auto;
}


div[data-role=popup].whatsnew  .WelcomeBetaUserBox .details {
    width: var(--size-800);
    font-weight: 400;
    font-size: var(--text-lg);
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    box-sizing: border-box;
    letter-spacing: 1px;
}

div[data-role=popup].whatsnew  .WelcomeBetaUserBox * .signature {
    text-align: right;
    font-weight: 600;
    font-size: var(--text-xl);
    padding-right: var(--space-lg);
}

.feature.infoBoxWrapper > .content > .message {
  color: white;
  max-width: var(--size-600);
  margin: auto;
  font-size: var(--text-4xl);
  font-weight: 900;
}

.feature.infoBoxWrapper > .content > .helpMessage {
  color: white;
  font-size: var(--text-md);
  letter-spacing: 1px;
}

}
@media(max-width:500px) , (max-height: 500px) and (orientation: landscape){

 .feature.infoBoxWrapper > .content > .message {
    max-width: var(--size-300);
    margin: var(--space-3xs) auto auto auto;

}

}

div[data-role=popup].whatsnew  .WelcomeBetaUserBox > .header {
    font-size: var(--text-4xl);
    font-weight: 700;
}

#trebbleStatisticContent .ct-series-b .ct-area, .ct-series-b .ct-slice-pie{
    fill: transparent;
}

#trebbleStatisticContent .ct-series-a .ct-area, .ct-series-a .ct-slice-pie{
    fill: white;
    fill-opacity: 0.2;
}
#passwordChangeFormWrapper,#redeemFormWrapper, #updateUserInfoForm, #updateShortcastInfoForm {
  max-width: var(--size-600);
  margin: auto;
  background-color: white;
  padding: var(--space-2xs);
  padding-top: var(--size-50);
  padding-bottom: var(--size-50);
  box-sizing: border-box;
  
}
@media(min-width:800px) , (min-height: 800px) and (orientation: landscape){
  #passwordChangeFormWrapper , #redeemFormWrapper, #updateUserInfoForm , #updateShortcastInfoForm{

      padding: var(--size-50);
  }
}
.drop-content {
  background-color: white;
  color: var(--text-dark) !important;
  box-shadow: var(--shadow-none);/*var(--color-black-20) 0px 2px 4px;*/
  background: var(--color-white-100);
  border: var(--border-0);/*1px solid var(--color-gray-300);*/
  outline: none;
}

.ui-page-active.lighttext ~ .drop-content {
  box-shadow: var(--color-black-20) 0px 2px 4px;
  border: var(--border-1) solid var(--color-gray-300);
}

body:not(.darkTheme) .drop-content  #songPoppupMenu > div > ul > li,
body:not(.darkTheme) .drop-content  .popup-menu-content > div > ul > li,
body:not(.darkTheme) .drop-content  #songPoppupMenu > div > ul > li > a,
body:not(.darkTheme) .drop-content  .popup-menu-content > div > ul > li > a,
body:not(.darkTheme) .drop-content  .popup-menu-content > div > ul > li > .toggle_switch_menu,
body:not(.darkTheme) .c-bottom-sheet:not(.darkTheme) ul.trebbleOptionList > li > .toggle_switch_menu,
body:not(.darkTheme) .drop-content  #songPoppupMenu > div > ul > li.ui-li-divider,
body:not(.darkTheme) .drop-content  .popup-menu-content > div > ul > li.ui-li-divider,
body:not(.darkTheme) .trebble-context-menu li.context-menu-item > a,
body:not(.darkTheme) .c-bottom-sheet:not(.darkTheme) ul.trebbleOptionList > li > a {
  padding-left: var(--size-none);
  color: var(--text-dark) !important;
  /* margin-left: var(--space-xs); */
}

body.darkTheme .drop-content  #songPoppupMenu > div > ul > li.disabled,
body.darkTheme .drop-content  .popup-menu-content > div > ul > li.disabled,
body.darkTheme .drop-content  #songPoppupMenu > div > ul > li > a.disabled,
body.darkTheme .drop-content  .popup-menu-content > div > ul > li > a.disabled,
body.darkTheme .drop-content  .popup-menu-content > div > ul > li > a.disabled,
body.darkTheme .drop-content  .popup-menu-content > div > ul > li > .toggle_switch_menu.disabled,
body.darkTheme .drop-content  #songPoppupMenu > div > ul > li.ui-li-divider.disabled,
body.darkTheme .drop-content  .popup-menu-content > div > ul > li.ui-li-divider.disabled,
body.darkTheme .trebble-context-menu li.context-menu-item > a.disabled,
body.darkTheme .c-bottom-sheet ul.trebbleOptionList > li > a.disabled,
body.darkTheme .c-bottom-sheet ul.trebbleOptionList > li > .toggle_switch_menu.disabled,
body:not(.darkTheme) .drop-content  #songPoppupMenu > div > ul > li.disabled,
body:not(.darkTheme) .drop-content  .popup-menu-content > div > ul > li.disabled,
body:not(.darkTheme) .drop-content  #songPoppupMenu > div > ul > li > a.disabled,
body:not(.darkTheme) .drop-content  .popup-menu-content > div > ul > li > a.disabled,
body:not(.darkTheme) .drop-content  .popup-menu-content > div > ul > li > a.disabled,
body:not(.darkTheme) .drop-content  .popup-menu-content > div > ul > li > .toggle_switch_menu.disabled,
body:not(.darkTheme) .drop-content  #songPoppupMenu > div > ul > li.ui-li-divider.disabled,
body:not(.darkTheme) .drop-content  .popup-menu-content > div > ul > li.ui-li-divider.disabled,
body:not(.darkTheme) .trebble-context-menu li.context-menu-item > a.disabled,
body:not(.darkTheme) .c-bottom-sheet ul.trebbleOptionList > li > a.disabled,
body:not(.darkTheme) .c-bottom-sheet ul.trebbleOptionList > li > .toggle_switch_menu.disabled {
  opacity: 0.4;
}

.drop-content  .popup-menu-content.hideHeading > div > ul > li.ui-li-divider{
    display: none;
}

.drop-content .popup-menu-content> div > ul > li.toggle_switch_menu_wrapper,
.c-bottom-sheet ul.trebbleOptionList > li.toggle_switch_menu_wrapper{
    display: flex;
    background-color: transparent;
    border: var(--border-0);
    flex-direction: row;
}

.ui-listview > .ui-li-static.toggle_switch_menu_wrapper{
    padding: var(--size-none);
}

.drop-content .popup-menu-content> div > ul > li.toggle_switch_menu_wrapper .toggle_switch_menu,
.c-bottom-sheet ul.trebbleOptionList > li.toggle_switch_menu_wrapper .toggle_switch_menu{
    width: var(--size-full);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-sm);
}


body.browser.mobileweb:not(.darkTheme)  .ui-page-active:not(.lighttext) .drop-content  #songPoppupMenu > div > ul > li > a:not(.disabled):hover,
body:not(.darkTheme) .ui-page-active:not(.lighttext) .drop-content #songPoppupMenu > div > ul > li > a:not(.disabled):active,
body.browser.mobileweb:not(.darkTheme) .ui-page-active:not(.lighttext)  .drop-content  .popup-menu-content > div > ul > li > a:not(.disabled):hover,
body:not(.darkTheme) .ui-page-active:not(.lighttext) .drop-content .popup-menu-content > div > ul > li > a:not(.disabled):active,
body:not(.darkTheme) .ui-page-active:not(.lighttext) .trebble-context-menu li.context-menu-item > a:not(.disabled):active,
body:not(.darkTheme) .c-bottom-sheet ul.trebbleOptionList > li > a:not(.disabled):active {

  color: var(--text-dark)!important;
  background-color: var(--color-black-5);
}

body.browser.mobileweb  .ui-page-active.lighttext ~ .drop-content  #songPoppupMenu > div > ul > li > a:not(.disabled):hover,
.ui-page-active.lighttext ~ .drop-content #songPoppupMenu > div > ul > li > a:not(.disabled):active,
body.browser.mobileweb  .ui-page-active.lighttext ~ .drop-content  .popup-menu-content > div > ul > li > a:not(.disabled):hover,
.ui-page-active.lighttext ~ .drop-content .popup-menu-content > div > ul > li > a:not(.disabled):active,
body:not(.darkTheme) .ui-page-active:not(.lighttext) .trebble-context-menu li.context-menu-item > a:not(.disabled):active,
body:not(.darkTheme) .c-bottom-sheet ul.trebbleOptionList > li > a:not(.disabled):active {
  color: var(--trebble-primary) !important;
  /* background-color: transparent;*/
  background-color: var(--color-black-5);
}

.drop-content #songPoppupMenu,
.drop-content #songPoppupMenu,
.drop-content .popup-menu-content {
  width: var(--size-inherit);
  height: var(--size-inherit);
  /* padding: var(--space-2xs); */
  padding-top: var(--space-2xs);
  padding-bottom: var(--space-2xs);
  color: var(--text-dark) ;
  width: auto;
  height: auto;
}
.drop-content .popup-menu-content.SequencerNodeBasicContextOptionPopup ul{
    flex-direction: row;
    display: flex;
    max-width: var(--size-full);

}

.drop-content .popup-menu-content.SequencerNodeBasicContextOptionPopup ul li .menu_label{
    display:  none;
}
.drop-content .popup-menu-content.SequencerNodeBasicContextOptionPopup.popup-menu-content > div > ul > li > a{
    min-width: -moz-fit-content;
    min-width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--size-none);
    padding: var(--space-2xs);
}

.drop-content .popup-menu-content.SequencerNodeBasicContextOptionPopup.popup-menu-content > div > ul > li > a .menu_icon{
    padding: var(--size-none);
}


.drop-content .trebblePopupHeader,
.drop-content  #pageHeaderTitleWrapper.trebblePopupHeader{
  /*color: var(--trebble-primary);*/
  color: white;
  opacity: 0.7;
  position: relative;
  padding: var(--size-none);
  font-size: var(--text-md);
  font-weight: bold;
  width: calc(var(--size-full) - var(--space-lg));
  margin: var(--size-none) var(--space-sm);
  box-sizing: border-box;
  text-align: left;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  /*border-bottom: var(--border-1) solid var(--color-black-10);*/
  /* margin-bottom: var(--space-2xs); */
}

.drop-content #songPoppupMenu > div > ul,
.drop-content .popup-menu-content > div > ul {
  padding-left: var(--space-2xs);
  padding-right: var(--space-2xs);
}

.drop-content #songPoppupMenu > div,
.drop-content .popup-menu-content > div{
    position:relative !important;
}

.tippy-content .trebble-context-menu{
    margin: var(--space-3xs) var(--border-1);
}

.c-bottom-sheet  ul.trebbleOptionList,
.c-bottom-sheet  .trebble-context-menu{
    width:var(--size-full);
}
.trebble-context-menu li.context-menu-item > a,
.drop-content #songPoppupMenu > div > ul > li > a,
.drop-content .popup-menu-content > div > ul > li > a,
.c-bottom-sheet ul.trebbleOptionList > li > a {
  padding: var(--size-none);
  padding-left: var(--size-none);
  padding-right: var(--space-lg);
  height: var(--size-46);
  line-height: var(--line-height-4-5xl);
  font-weight: 400;
  font-size: var(--text-sm);
  min-width: var(--size-200);
}
.trebble-context-menu li.context-menu-item > a > i,
.drop-content .popup-menu-content > div > ul > li > a > i,
.drop-content .popup-menu-content > div > ul > li > i.menu_icon,
.drop-content .popup-menu-content > div > ul > li > a > .menu_icon,
.c-bottom-sheet  ul.trebbleOptionList > li > a > .menu_icon{
  font-size: var(--text-xl-px) !important;
  margin: var(--size-none) !important;
  margin-right: var(--space-2xs) !important;
  color: var(--text-default-color);
  /*display:none;*/
}

.drop-content .popup-menu-content > div > ul > li.menu_group_header{
    background: transparent;
    cursor: default; 
    pointer-events: none;
    border: 0px;
    padding: 0px;
    padding-top:  var(--space-2xs);
    padding-bottom:  var(--space-2xs);
}
.drop-content .popup-menu-content > div > ul > li.menu_group_header span{
    font-size: var(--text-sm);
    font-weight: bold;
    opacity: 0.35;
    color: var(--text-default-color);
    text-transform: uppercase; 
    letter-spacing: 0.5px;    
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
}
/*.drop-content .popup-menu-content > div > ul > li > a > i.pe-7s-camera{
  margin-right: var(--border-2) !important;
  left: -5px;
  position: relative;
  }*/

  body[appname="trebble"] .drop-element.drop-theme-arrows .drop-content,
  body[appname="trebble"] .ui-page-active.lighttext .tippy-box,
  body[appname="trebble"] .ui-page-active.lighttext ~ .tippy-box{
    /*background: white;*/
    background: var(--color-white-10);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    filter: none;
}

body[appname="trebble"]  .tippy-box{
    background: var(--color-gray-100);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    filter: none;
}

body .drop-element ~ div[data-tippy-root]{
    z-index: 10000 !important;
}

@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
   body[appname="trebble"] .drop-element.drop-theme-arrows .drop-content,
   body[appname="trebble"] .ui-page-active.lighttext .tippy-box,
   body[appname="trebble"] .ui-page-active.lighttext ~ .tippy-box,
   body[appname="trebble"] .tippy-box{
    /*background: white;*/
    background: var(--color-gray-100);
}
}

body[appname="trebble"] .tippy-box{
    color:  var(--color-black);
}

body[appname="trebble"] .tippy-box .tippy-arrow:before{
    color: var(--color-black-5);
}


body[appname="trebble"]:not(.darkTheme) .ui-page-active:not(.lighttext) ~ .drop-element.drop-theme-arrows .drop-content,
body[appname=trebble]:not(.darkTheme) .ui-page-active:not(.lighttext) .tippy-box,
body[appname=trebble]:not(.darkTheme) .ui-page-active:not(.lighttext) ~ div .tippy-box{
    box-shadow: var(--shadow-overlay);
}

body[appname="trebble"] .drop-element.drop-theme-arrows .drop-content:before,
body[appname="trebble"] .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{
    /*border-bottom-color: white;*/
    border-bottom-color: var(--color-black-5);
    right: 10px;
    border-width: var(--border-8);
}

.drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle.sequencerNodeMoreOptionPopupDrop .drop-content:before,
.drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle.SequencerAutomatedOperationsPopupDrop .drop-content:before{
    border-right-color: var(--color-black-5);
    border-bottom-color: transparent !important;
}


body[appname="trebble"] .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{
    /*border-top-color: white;*/
    border-top-color: var(--color-black-5);
    top: 100%;
    right: 10px;
    border-bottom: var(--border-0);
}
.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows .drop-content,
body.darkTheme   .drop-element.drop-theme-arrows .drop-content,
body.darkTheme[appname="trebble"] .tippy-box,
.ui-page-active.lighttext .tippy-box{
  background-color: var(--color-white-10);
  color: var(--text-default-color);
  border: var(--border-0);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: var(--shadow-none);
}


body[appname=trebble] .tippy-box[data-theme="tippy-trebble-tooltip"] {
    background-color: var(--text-dark);
    color: white;
}

body[appname=trebble] .tippy-box[data-theme="tippy-trebble-tooltip"] .tippy-arrow:before{
    color:  var(--text-dark);
}

body[appname=trebble] .tippy-box[data-theme="tippy-trebble-tooltip"] .tooltip_message,
body[appname=trebble] .tippy-box[data-theme="tippy-trebble-tooltip"] .keyboard_shortcut{
    color: var(--text-light);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: var(--size-none) var(--space-3xs);
}

body[appname=trebble] .ui-page-active.lighttext ~ div .tippy-box[data-theme="tippy-trebble-tooltip"]{
 background-color:var(--color-gray-850);
 color: var(--color-white);
}
body[appname=trebble] .ui-page-active.lighttext ~ div .tippy-box[data-theme="tippy-trebble-tooltip"] .tippy-arrow:before {
 color:var(--color-gray-850) !important;
}


body[appname=trebble] .ui-page-active.lighttext ~ div .tippy-box[data-theme="tippy-trebble-tooltip"] .tooltip_message,
body[appname=trebble] .ui-page-active.lighttext ~ div .tippy-box[data-theme="tippy-trebble-tooltip"] .keyboard_shortcut{
    color: var(--color-white);
}



body[appname=trebble] .tippy-box[data-theme="tippy-trebble-tooltip"] {
    font-weight: 400;
}

body[appname=trebble] .tippy-box[data-theme="tippy-trebble-tooltip"] .keyboard_shortcut{
    font-weight: 400;
}

body.darkTheme [data-role=page].createCapsulePage.ui-page:not(.lighttext) ~ div .tippy-box[data-theme="tippy-trebble-tooltip"] > .tippy-arrow:before{
    color: var(--text-dark);
}


.c-bottom-sheet ul.trebbleOptionList  > li > a{
    color:var(--color-black) !important;
    font-size: var(--text-base);
}

@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
 .ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows .drop-content,
 body.darkTheme   .drop-element.drop-theme-arrows .drop-content,
 body.darkTheme[appname="trebble"] .tippy-box,
 .ui-page-active.lighttext .tippy-box{
  background-color: var(--color-gray-100);

}
.c-bottom-sheet ul.trebbleOptionList  > li > a,
.c-bottom-sheet.darkTheme.active .sequencer_settings .settings_panel_title,
.c-bottom-sheet.darkTheme.active .settingSection .settingItemTitle .itemTitle,
[data-role=page].lighttext.ui-page-active ~ div [data-role=popup] .sequencer_settings .settings_panel_title,
[data-role=page].lighttext.ui-page-active ~ div [data-role=popup] .settingSection .settingItemTitle .itemTitle {
 color:var(--color-black) !important;
}
}

.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows .drop-content:before,
body.darkTheme .drop-element.drop-theme-arrows .drop-content:before  {
  border-bottom-color: var(--color-white-5) !important;
  background-color: transparent !important;
  color: transparent !important;
}

.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle.sequencerNodeMoreOptionPopupDrop .drop-content:before,
.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle.SequencerAutomatedOperationsPopupDrop .drop-content:before,
body.darkTheme .drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle.sequencerNodeMoreOptionPopupDrop .drop-content:before,
body.darkTheme .drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle.SequencerAutomatedOperationsPopupDrop .drop-content:before,
.ui-page-active.lighttext  ~  .drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle.soundEnhancerSettingsPopupDrop .drop-content:before,
body.darkTheme  .drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle.soundEnhancerSettingsPopupDrop .drop-content:before{
    border-right-color: var(--color-white-5);
    border-bottom-color: transparent !important;
}

body[appname="trebble"] .ui-page-active.lighttext .tippy-box,
.ui-page-active.lighttext  ~ .trebble-context-menu li.context-menu-item,
.ui-page-active.lighttext  ~ .trebble-context-menu li.context-menu-item > a,
.ui-page-active.lighttext  ~ .trebble-context-menu li.ui-li-divider,
.ui-page-active.lighttext   .trebble-context-menu li.context-menu-item,
.ui-page-active.lighttext   .trebble-context-menu li.context-menu-item > a,
.ui-page-active.lighttext   .trebble-context-menu li.ui-li-divider,
.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows .drop-content .drop-content .popup-menu-content > div > ul > li,
.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows .drop-content .popup-menu-content > div > ul > li > a, 
 .c-bottom-sheet ul.trebbleOptionList  > li > a, 
.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows  .drop-content .popup-menu-content > div > ul > li.ui-li-divider,
.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem > .infoWrapper >.userUsername,
.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem > .infoWrapper >.userFullname,
.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows  .drop-content .popup-menu-content > div > ul > li.toggle_switch_menu_wrapper .toggle_switch_menu,
.c-bottom-sheet ul.trebbleOptionList  > li.toggle_switch_menu_wrapper .toggle_switch_menu,
.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .trim_silences_context_menu_container,
body.darkTheme .drop-element.drop-theme-arrows .drop-content .drop-content .popup-menu-content > div > ul > li,
body.darkTheme .drop-element.drop-theme-arrows .drop-content .popup-menu-content > div > ul > li > a, 
body.darkTheme .c-bottom-sheet ul.trebbleOptionList > li > a, 
body.darkTheme .drop-element.drop-theme-arrows  .drop-content .popup-menu-content > div > ul > li.ui-li-divider,
body.darkTheme .drop-element.drop-theme-arrows .trebble-context-menu li.context-menu-item  > li > a,
body.darkTheme .drop-element.drop-theme-arrows .trebble-context-menu li.context-menu-item  > li.ui-li-divider,
body.darkTheme .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem > .infoWrapper >.userUsername,
body.darkTheme .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem > .infoWrapper >.userFullname,
body.darkTheme .drop-element.drop-theme-arrows  .drop-content .popup-menu-content > div > ul > li.toggle_switch_menu_wrapper .toggle_switch_menu,
body.darkTheme .c-bottom-sheet ul.trebbleOptionList  > li.toggle_switch_menu_wrapper .toggle_switch_menu,
body.darkTheme .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .trim_silences_context_menu_container,
body.darkTheme .trebble-context-menu li.context-menu-item,
body.darkTheme .trebble-context-menu li.context-menu-item > a, 
body.darkTheme .trebble-context-menu li.context-menu-item.ui-li-divider,
.c-bottom-sheet.darkTheme .trebble-context-menu li.context-menu-item,
.c-bottom-sheet.darkTheme .trebble-context-menu li.context-menu-item > a, 
.c-bottom-sheet.darkTheme .trebble-context-menu li.context-menu-item.ui-li-divider{

  color: white !important;

}
@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
    body[appname=trebble] .ui-page-active.lighttext .tippy-box,
    .ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows .drop-content .drop-content .popup-menu-content > div > ul > li,
    .ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows .drop-content .popup-menu-content > div > ul > li > a, 
    .c-bottom-sheet ul.trebbleOptionList > li > a, 
    .ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows  .drop-content .popup-menu-content > div > ul > li.ui-li-divider,
    .ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem > .infoWrapper >.userUsername,
    .ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem > .infoWrapper >.userFullname,
    body.darkTheme .drop-element.drop-theme-arrows .drop-content .drop-content .popup-menu-content > div > ul > li,
    body.darkTheme .drop-element.drop-theme-arrows .drop-content .popup-menu-content > div > ul > li > a, 
    body.darkTheme .c-bottom-sheet ul.trebbleOptionList > li > a, 
    body.darkTheme .drop-element.drop-theme-arrows .trebble-context-menu li.context-menu-item  > li > a,
    body.darkTheme .drop-element.drop-theme-arrows .trebble-context-menu li.context-menu-item  > li.ui-li-divider,
    body.darkTheme .drop-element.drop-theme-arrows  .drop-content .popup-menu-content > div > ul > li.ui-li-divider,
    body.darkTheme .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem > .infoWrapper >.userUsername,
    body.darkTheme .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem > .infoWrapper >.userFullname{
      color: var(--color-black) !important;
  }
}




.trebble-context-menu li.context-menu-item > a {
    font-size: var(--text-sm-px);
    margin: var(--size-none);
}

body .drop-content .popup-menu-content > div > ul > li > a.menu_with_keyboard_shortcut,
.c-bottom-sheet ul.trebbleOptionList > li > a.menu_with_keyboard_shortcut,
.trebble-context-menu li.context-menu-item > a.menu_with_keyboard_shortcut{
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--size-none) var(--space-2xs);
    box-sizing: border-box;
}


.c-bottom-sheet ul.trebbleOptionList > li > a.menu_with_keyboard_shortcut .keyboard_shortcut{
    display: none;
}

.c-bottom-sheet ul.trebbleOptionList > li > a.menu_with_keyboard_shortcut .menu_desc,
.drop-content .popup-menu-content > div > ul > li > a.menu_with_keyboard_shortcut .menu_desc,
.trebble-context-menu li.context-menu-item > a.menu_with_keyboard_shortcut .menu_desc{
    padding-right: var(--space-lg);
    display: flex;
    flex-direction: row;
    align-items: center;
}
.trebble-context-menu li.context-menu-item > a.menu_with_keyboard_shortcut .menu_desc{
    margin-left: var(--space-3xs);
}


.c-bottom-sheet ul.trebbleOptionList > li > a.menu_with_keyboard_shortcut .menu_desc > i,
.drop-content .popup-menu-content > div > ul > li > a.menu_with_keyboard_shortcut .menu_desc > i,
.trebble-context-menu li.context-menu-item > a.menu_with_keyboard_shortcut .menu_desc > i{
  width: var(--size-24);
  font-size: var(--text-xl-px);
  margin-right: var(--space-xs);
  align-items: center;
  justify-content: center;
  display: inline-flex;
}

.drop-content .popup-menu-content > div > ul > li > a.menu_without_icon .menu_desc,
body .drop-content .popup-menu-content > div > ul > li.toggle_switch_menu_wrapper .toggle_switch_menu,
.trebble-context-menu li.context-menu-item > a.menu_without_icon .menu_desc{
    padding: var(--size-none) var(--text-3xs);
}


.drop-content .popup-menu-content > div > ul > li > a.menu_with_keyboard_shortcut .keyboard_shortcut,
.trebble-context-menu li.context-menu-item > a.menu_with_keyboard_shortcut .keyboard_shortcut{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: var(--text-xs-px);
    opacity: 0.5;
}

.keyboard_shortcut .key_button.soundwave-command-apple-key.icon_key_button{
    font-size: 80%;
}

.keyboard_shortcut .key_button.soundwave-shift-apple-key.icon_key_button{
    font-size: 100%;
}

.keyboard_shortcut .key_button.soundwave-backspace-icon.icon_key_button{
    font-size: 110%;
}

.menu_icon.soundwave-live-transcribe-svgrepo-com-2{
    font-weight: bold;
}

.keyboard_shortcut .add_key_button {
    margin: 0 var(--border-3);
    font-size: 90%;
    display:none;
}

.keyboard_shortcut .key_button{
    margin: var(--size-none);
    margin-right: var(--space-3xs);
}

.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem:active,
body.darkTheme .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem:active{
  background-color: transparent;
  color: white;
  border-color: transparent;
}

.ui-page-active.lighttext  ~ .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem > .infoWrapper >.userFullname,
body.darkTheme .drop-element.drop-theme-arrows  .drop-content .popup-menu-content .userListItem > .infoWrapper >.userFullname{

   opacity: 0.5;

}
/*
body.browser.mobileweb > .ui-page-active.lighttext ~ .drop-element.drop-theme-arrows .drop-content .popup-menu-content > div > ul > li > a:hover, 
.ui-page-active.lighttext ~ .drop-element.drop-theme-arrows .drop-content .popup-menu-content > div > ul > li > a:active{
  background-color: transparent;
  }*/


  body .drop-element.drop-theme-arrows .drop-content,
  body .drop-element.drop-theme-arrows-bounce .drop-content {
      border-radius: 0px;
      padding: var(--size-none);
  }

  body .drop-element {
    z-index: 10000;
}

.trebblePopupHeader{
  width: calc(var(--size-full) - var(--size-100));
  padding-right: var(--size-50);
  top: -1px;
  height: var(--size-52);
  font-weight: bold;
  padding-left: var(--size-50);
  font-size: var(--text-3xl);
  position: absolute;
  display: flex;
  display: -moz-flex;
  display: -ms-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  white-space: nowrap;

}

[data-role=popup]  .popupContent.top .trebblePopupHeader ~ .ui-content{
  margin-top: var(--size-icon-lg) !important;
}
#GetStartedForCuratorsPage .helpContent {
  display: flex;
  display: -moz-flex;
  display: -ms-flex;
  flex-direction: column;
  -moz-flex-direction: column;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  color: white!important;
  width: var(--size-full);
}

#GetStartedForCuratorsPage .helpContent > .helpDetail > .title {
  text-align: center;
  margin: var(--size-none);
  padding: var(--size-none) var(--space-2xs);
  font-weight: 700;
  font-size: var(--text-xl);
  max-width: var(--size-600);
  padding-bottom: var(--space-2xs);
}

#GetStartedForCuratorsPage .helpContent > .helpDetail > .helpMessage {
  text-align: center;
  padding: 0 var(--space-2xs);
  margin: var(--size-none);
  font-weight: 300;
  font-size: var(--text-base);
  max-width: var(--size-600);
}

#GetStartedForCuratorsPage .helpContent > .helpImage,
#GetStartedForCuratorsPage .helpContent > .helpDetail {
  flex: 1 1 100%;
  -webkit-flex: 1 1 100%;
  -moz-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
}
#GetStartedForCuratorsPage .helpContent > .helpDetail > .helpMessage.optional{
  padding: var(--size-none) var(--space-lg);
}

@media (max-width:600px) , (max-height: 600px) and (orientation: landscape) {
   #GetStartedForCuratorsPage .helpContent > .helpDetail > .helpMessage.optional{
      display: none;
  }
}

@media (min-width:900px) , (min-height: 900px) and (orientation: landscape) {
  #GetStartedForCuratorsPage .helpContent {
    flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
}

#GetStartedForCuratorsPage .helpContent > .helpDetail > .title {
    text-align: start;
    margin: var(--size-none);
    padding: var(--size-none) var(--space-lg);
    font-weight: 700;
    font-size: var(--text-6xl);
    max-width: var(--size-inherit);
    padding-bottom: var(--space-sm);
}

#GetStartedForCuratorsPage .helpContent > .helpDetail > .helpMessage {
    text-align: start;
    padding: var(--size-none) var(--space-lg);
    margin: var(--size-none);
    font-weight: 400;
    font-size: var(--text-lg);
    max-width: var(--size-inherit);
}

#GetStartedForCuratorsPage .helpContent > .helpDetail > .actionButtonWrapper {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  padding: var(--size-none) var(--space-lg);
}
}

#GetStartedForCuratorsPage {
  background-color: var(--trebble-accent);
  background: var(--gradient-primary-alt);
}

#getStartedBtn {
  cursor: pointer;
  padding: var(--space-xs);
  background-color: white;
  color: var(--color-orange-200);
  max-width: var(--size-200);
  text-align: center;
  font-weight: bold;
  margin: auto;
}

.helpImage > video {
  border-radius: 5px;
  border: var(--border-4) solid white;
}

body.browser.mobileweb #getStartedBtn:hover,
#getStartedBtn:active {
  background-color: transparent;
  border: var(--border-2) solid white;
  color: white;
}

#youtubeVideoLink > iframe{
    box-shadow: var(--color-black-60) 0px 0px 50px;
}
/*
#player.notReady  #playerControlsWrapper,
#player.notReady #playerSongPositionWrapper,
#player.notReady #playerSocialInfoWrapper{
  display: none;
}
*/
#player #playerSongMoreButton,
#player #playerMoreInformationButton,
#playerFooter #playerSongMoreButton,
#playerFooter #playerMoreInformationButton,
#player > .infoBoxWrapper,
#player.notReady > .ui-content,
#player[no_audio_loaded=true] > .ui-content{
    display: none;
}

#player[audio_type_loaded=Song] #playerSongMoreButton,
#player[audio_type_loaded=Capsule] #playerMoreInformationButton,
#playerFooter[audio_type_loaded=Song] #playerSongMoreButton,
#playerFooter[audio_type_loaded=Capsule] #playerMoreInformationButton{
    display: flex;
}



#player[no_audio_loaded=true].playlistIsLoading > .infoBoxWrapper{
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   margin: auto;
   top: 0px;
   height: var(--vh-full);
   max-width: var(--size-unset);
}


[data-role=page].ui-page:not(.ui-page-active) [role=tabpanel],
[data-role=page].ui-page:not(.ui-page-active) #maliste{
    display: none !important;
}

#reponsivePlayerContent.activeCapsule #viewCapsuleDetailsBtn{
  display: flex;
  display: -moz-flex;
  display: -ms-flex;
  position: absolute;
  width: calc(var(--size-full) - var(--space-md));
  bottom: 40px;
  left: 15px;
  height: 42px;
  font-size: var(--text-sm);
  font-weight: 600;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  margin: var(--size-none);
  box-sizing: border-box;
  background-color: var(--color-black-10);
    display: none !important;
}
body.browser.mobileweb #reponsivePlayerContent.activeCapsule #viewCapsuleDetailsBtn:hover, 
#reponsivePlayerContent.activeCapsule #viewCapsuleDetailsBtn:active{
    background-color: white
}


#reponsivePlayerContent:not(.activeCapsule) #viewCapsuleDetailsBtn{
    display:none;
}

.owl-page.active span{
    background-color: white !important;
} 

select{
  font-size: var(--text-lg-px) !important;
}

select > option{
    color: var(--text-dark);
}

select > option:checked{
    color: var(--trebble-primary);
}



#player  #reponsivePlayerContent:not(.activeCapsule) > div:nth-child(2) #viewCapsuleDetailsBtn,
#player  #reponsivePlayerContent > div:nth-child(2)  #mediaSourceBtn {
  display: none !important;
}

@media (max-height: 120px) {
    body.embedded #player #reponsivePlayerContent > :nth-child(2) #playerSocialInfoWrapper .ui-block-a{
        display: none;

    }
    #player #reponsivePlayerContent > div:nth-child(1) >  #resizeVideoFullBtn,
    #youtubeVideoLinkWrapper ~ #mediaSourceBtn{
      display:none !important;
  }


  .notifyjs-trebbleNotification-base{
    display:none !important;
}

.volatile-counter{
    top: -20px !important;
    
}
.popupContent #shareableWidgetLandscapeWrapper,
.popupContent #shareableWidgetSquareWrapper,
.popupContent .trebblePopupHeader{
    display: none;
}
.popupContent #songGradingView > .tagPlaceholder,
.popupContent #lifespanSelectionView > .tagPlaceholder{
  flex-direction: row;
  -moz-flex-direction: row;
}
.popupContent .tag{
    height: var(--size-30);
    line-height: var(--line-height-sm);
    font-size: 90%;
    max-width: 130px;
    flex: 1 1 100%;
}
}

@media (max-height: 120px) and (max-width: 1000px) {
  #player  #reponsivePlayerContent.activeCapsule > div #viewCapsuleDetailsBtn{
     display: none !important;
 }

}

@media (max-height: 120px) and (min-width: 800px) {
 body.embedded #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper {
    max-width: var(--size-260);
}
body.embedded #player #reponsivePlayerContent > :nth-child(2) >  :nth-child(2),
body.embedded #player #reponsivePlayerContent > :nth-child(2) >   #playerSocialInfoWrapper {
    max-width: var(--size-350);

}
}

@media (max-height: 120px)   and (max-width: 800px){
    /*#player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper  #converseButton {
      display: none;
  }
  #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper{
      max-width: var(--size-170);
  }
  #playerControlsWrapper > [data-role=controlgroup] >:first-child > a, #recordControlsWrapper > [data-role=controlgroup] >:first-child > a, #recordControlsWrapper > [data-role=controlgroup] >:first-child > o{
      width: var(--size-quarter);
      }*/
      
      /*body.embedded #player #reponsivePlayerContent > :nth-child(2) #playerSongPositionWrapper{
        display: none;
        }*/
        #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper{
          max-width: var(--size-260);
      }
  }

  @media (min-height:70px) and (max-height: 120px)   and (max-width: 800px){

    #audioInfoAndSliderWrapper{
        flex-direction: column;
    }

}

@media (max-height:70px)    and (max-width: 1200px){

  body.embedded #player #reponsivePlayerContent > :nth-child(2) #playerSongPositionWrapper{
    display: none;
}

}

@media(max-height: 70px){
    #audioInfoAndSliderWrapper{
        flex-direction: row !important;
    }
}




@media (max-height: 120px) and (min-width: 700px) {
 #player > [data-role=header],
 #player  #reponsivePlayerContent > div:nth-child(1) > #mediaSourceBtn,
 #player  #reponsivePlayerContent > div:nth-child(1)> #viewCapsuleDetailsBtn {
    display: none !important;
}


#player {
    height: var(--size-116);
}

#player #reponsivePlayerContent {
    display: flex;
    height: var(--size-116);
    background: transparent!important;
}

#player > .ui-content {
    background: transparent !important;
    background-color: var(--color-black-20) !important;
}

#player #reponsivePlayerContent > #coverArtPlayerWrapper {
    height: var(--size-116);
    width: var(--size-116);
    flex: 0 0 116px;
}

body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) {
    height: var(--size-116) !important;
    width: calc(var(--size-full) - var(--text-9xl-px)) !important;
    flex: 0 0 calc(var(--size-full) - var(--text-9xl-px)) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    flex-direction: row;
}



body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) > :nth-child(2) {
    height: var(--size-116) !important;
    flex: 0 0 116px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

body.embedded #player #reponsivePlayerContent > :nth-child(2) {
    height: var(--size-116) !important;
    width: calc(var(--size-full) - var(--text-9xl-px)) !important;
    flex: 0 0 calc(var(--size-full) - var(--text-9xl-px)) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    flex-direction: row;
}

#audioInfoAndSliderWrapper{
    flex-direction: column;
    max-width: var(--size-full) !important;
    flex: 1 1 auto;
}

body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) > :nth-child(2) > :nth-child(1),
body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) > :nth-child(2)  #playerSocialInfoWrapper {
    max-width: var(--size-300);
    margin: var(--size-none) !important;
}

body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) > :nth-child(2) > #playerControlsWrapper {
    max-width: var(--size-260);
    margin: var(--size-none) !important;
}

body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) > :nth-child(2) #playerSocialInfoWrapper  > :nth-child(3),
body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) > :nth-child(2) #playerSocialInfoWrapper  > :nth-child(5),
body.embedded #player #reponsivePlayerContent  #playlistInfoWrapper {
    display: none !important;
}

body.embedded #player #reponsivePlayerContent > :nth-child(2) >  :nth-child(2),
body.embedded #player #reponsivePlayerContent > :nth-child(2) >   #playerSocialInfoWrapper {
    /*max-width: var(--size-350);*/
    min-width: var(--size-300);
    margin: var(--size-none) !important;
    height: var(--size-full) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.embedded #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper {
    max-width: var(--size-260);
    margin: var(--size-none) !important;
    height: var(--size-full) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.embedded #player #reponsivePlayerContent > :nth-child(2)  #playerSocialInfoWrapper  > :nth-child(3),
body.embedded #player #reponsivePlayerContent > :nth-child(2) #playerSocialInfoWrapper  > :nth-child(5),
body.embedded #player #reponsivePlayerContent  #playlistInfoWrapper {
    display: none !important;
}

#player #artistSocialInfoAndCapsuleOverviewBox,
#player #commentOverviewBox {
    display: none !important;
}
}

@media (max-height: 120px) and (min-width:500px) and (max-width:640px)   {
    #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper  #converseButton {
      display: none;
  }
  #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper{
      max-width: var(--size-170);
  }
  #playerControlsWrapper > [data-role=controlgroup] >:first-child > a, 
  #recordControlsWrapper > [data-role=controlgroup] >:first-child > a,
  #recordControlsWrapper > [data-role=controlgroup] >:first-child > o{
      width: var(--size-quarter);
      max-width: var(--size-quarter);
  }
}

@media (max-height: 120px) and (max-width:500px)   {
    /*#player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper  #capsuleButton,*/
    #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper  #sendCapsuleToHostButton,
    #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper  #liveLikeButton,
    #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper  #converseButton,
    #player #trebbleIconWrapper,
    #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper  #nextButton,
    #playerSocialInfoWrapper > .ui-block-d {

      display: none!important;
  }
  #player #reponsivePlayerContent > :nth-child(2)  > #playerControlsWrapper{
      max-width: var(--size-50);
  }
  #playerControlsWrapper > [data-role=controlgroup] >:first-child > a,
  #recordControlsWrapper > [data-role=controlgroup] >:first-child > a,
  #recordControlsWrapper > [data-role=controlgroup] >:first-child > o{
      width: var(--size-full);
      max-width: none;
  }
}


@media (max-height: 120px) and (min-width: 200px){
  #player> [data-role=header] {
    display: none;
}

#player {
    height: var(--size-60);
}

#player #reponsivePlayerContent {
    height: var(--size-60);
    background: transparent!important;
}

#player > .ui-content {
    background: transparent !important;
    background-color: var(--color-black-20) !important;
}

#player #reponsivePlayerContent > #coverArtPlayerWrapper {
    height: var(--size-60);
    width: var(--size-60);
    flex: 0 0 58px;
}

body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) {
    height: var(--size-60) !important;
    width: calc(var(--size-full) - var(--text-7xl-px)) !important;
    /*-webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 calc(var(--size-full) - var(--text-7xl-px)) !important;
    -ms-flex: 0 0 calc(var(--size-full) - var(--text-7xl-px)) !important;
    flex: 0 0 calc(var(--size-full) - var(--text-7xl-px)) !important;*/
    flex: 1 1 auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    flex-direction: row;
}

#audioInfoAndSliderWrapper{
    flex-direction: column;
    max-width: var(--size-full) !important;
    flex: 1 1 auto;
}

body.embedded #player #reponsivePlayerContent > :nth-child(2) {
    height: var(--size-60) !important;
    width: calc(var(--size-full) - var(--text-7xl-px)) !important;
    /*-webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 calc(var(--size-full) - var(--text-7xl-px)) !important;
    -ms-flex: 0 0 calc(var(--size-full) - var(--text-7xl-px)) !important;
    flex: 0 0 calc(var(--size-full) - var(--text-7xl-px)) !important;*/
    flex: 1 1 auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    flex-direction: row;
}

body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) > :nth-child(2) {
    height: var(--size-60) !important;
    flex: 0 0 58px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}


}

@media(max-height: 120px) and (max-width: 700px){
  body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) > :nth-child(2) #playerSocialInfoWrapper  > :nth-child(3),
  body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) > :nth-child(2) #playerSocialInfoWrapper  > :nth-child(5),
  body:not(.embedded) #player #reponsivePlayerContent > :nth-child(2) #playerSongPositionWrapper,
  body.embedded #player #reponsivePlayerContent  #playlistInfoWrapper {
    display: none !important;
}

body.embedded #player #reponsivePlayerContent > :nth-child(2)  #playerSocialInfoWrapper  > :nth-child(3),
body.embedded #player #reponsivePlayerContent > :nth-child(2) #playerSocialInfoWrapper  > :nth-child(5),
body.embedded #player #reponsivePlayerContent > :nth-child(2) #playerSongPositionWrapper,
body.embedded #player #reponsivePlayerContent  #playlistInfoWrapper {
    display: none !important;
}
}


@keyframes gradient-text-bg {
    0%{
        background-position:0% 50%;
    }
    100%{
        background-position:100% 50%;
    }
}

.chromeExtensionHelperContent{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row-reverse;
}

.chromeExtensionHelperContent > p,
.chromeExtensionHelperContent > div{
    flex: 0 0 45%;
}


.chromeExtensionHelperContent  .title {
  text-align: center;
  margin: var(--size-none);
  padding: var(--size-none) var(--space-2xs);
  font-weight: 700;
  font-size: var(--text-6xl);
  max-width: var(--size-900);
  padding-bottom: var(--space-2xs);
}
.chromeExtensionHelperContent  .helpMessage {
  text-align: center;
  font-size: var(--text-lg);
  
}

.chromeExtensionHelperContent #downloadExtensionBtn{

    color: var(--pink);
    background-color: white;
    border: var(--border-3) solid white;
    width: var(--size-inherit);
    padding-left: var(--text-4xl);
    padding-right: var(--text-4xl);
    padding-top: var(--text-base);
    padding-bottom: var(--text-base);

}

body.browser.mobileweb .chromeExtensionHelperContent #downloadExtensionBtn:hover,
.chromeExtensionHelperContent #downloadExtensionBtn:active{
    color: white;
    background-color: transparent;
    border: var(--border-3) solid white;
}

@keyframes xfade{
  0% {
    opacity: 1;
}

23% {
    opacity: 1;
}

25% {
    opacity: 0;
}

99.99% {
    opacity: 0;
}

100% {
    opacity: 1;
}
}


.css-slideshow{
 position: relative;
}
.css-slideshow .slide{
 margin: 0;
 position: absolute;
 width: var(--size-full);
 opacity:0;
}


.css-slideshow .slide:nth-child(1) {
 animation: xfade 16s 0s infinite;
}
.css-slideshow .slide:nth-child(2) {
 animation: xfade 16s 4s infinite;
}
.css-slideshow .slide:nth-child(3) {
 animation: xfade 16s 8s infinite;
}
.css-slideshow .slide:nth-child(4) {
 animation: xfade 16s 12s infinite;
}

.trebbleCustomUrlDisplayField{ 
    font-size: small;
    color: var(--trebble-primary);
    padding: var(--size-none) var(--space-2xs);  /* Chrome 49+ */
    -moz-user-select: text;     /* Firefox 43+ */      /* No support yet */
    -webkit-user-select: text;
            user-select: text;  
}

.trebbleCustomUrlDisplayField > #urlPrefix,
.trebbleCustomUrlDisplayField > #currentCustomURL{
    display: inline;
}

.trebbleCustomUrlDisplayField > #currentCustomURL{
    font-weight: 600;
}

.trebbleCustomUrlDisplayField > .description{
    display: block;
}

.trebbleCustomUrlDisplayField > .detail{

    display: inline;
    margin-left: var(--border-4);
    color: var(--color-gray-500);

}



::-moz-selection {
  background: var(--trebble-primary); /* WebKit/Blink Browsers */
  color:white !important;
}



::selection {
  background: var(--trebble-primary); /* WebKit/Blink Browsers */
  color:white !important;
}
::-moz-selection {
  background: var(--trebble-primary); /* Gecko Browsers */
  color:white;
}
div[data-role=header] input::-moz-selection  {
  background:var(--trebble-primary-dark) ; 
  color:white;
}
div[data-role=header] input::selection  {
  background:var(--trebble-primary-dark) ; 
  color:white;
}

div[data-role=header] input::-moz-selectionn  {
  background:var(--trebble-primary-dark) ; 
  color:white;
}

.autoplaySuggestionContent,
.trebbleSubscribeSuggestionContent{

    max-width: var(--size-900);
    font-size: var(--text-md-px);
    padding: var(--space-lg);
    width: var(--size-full);


}
.autoplaySuggestionContent #contenOwnerInfo,
.autoplaySuggestionContent #upNextContentInfo,
.trebbleSubscribeSuggestionContent #contenOwnerInfo,
.trebbleSubscribeSuggestionContent #upNextContentInfo{
   display: flex;
   justify-content: center;
   align-items: center;
   height: var(--size-140);
}
.trebbleSubscribeSuggestionContent #TrebbleSubscribeSuggestionMessage{
    max-width: var(--size-600);
    font-size: var(--text-2xl-px);
    font-weight: 700;
    margin: auto;
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
    .trebbleSubscribeSuggestionContent #TrebbleSubscribeSuggestionMessage{

        font-size: var(--text-lg-px);

    }
}

.autoplaySuggestionContent #userProfileImage{

  border-radius: 50%;
  

}
.autoplaySuggestionContent #userProfileImage,
.trebbleSubscribeSuggestionContent #trebbleCoverArtImage{
  height: var(--size-100);
  background-size: cover;
  width: var(--size-100);
  margin: var(--space-sm) auto;
  background-position: center;
  background-color: var(--color-white-20);
  background-repeat: no-repeat;

}
.trebbleSubscribeSuggestionContent #trebbleCoverArtImage{
    background-size: contain;
}

.autoplaySuggestionContent .actionButtons,
.autoplaySuggestionContent .secondaryActionButtons,
.trebbleSubscribeSuggestionContent .actionButtons,
.trebbleSubscribeSuggestionContent .secondaryActionButtons{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   -moz-flex-direction: row;
   margin-top: var(--space-md);
}

.autoplaySuggestionContent  .autoplayMessage,
.trebbleSubscribeSuggestionContent  .autoplayMessage{

    text-align: center;

}
.autoplaySuggestionContent .actionButtons > div,
.trebbleSubscribeSuggestionContent .actionButtons > div{

    flex: 1 1 calc(var(--size-full) - var(--space-2xs));
    -webkit-flex: 1 1 calc(var(--size-full) - var(--space-2xs));
    -moz-flex: 1 1 calc(var(--size-full) - var(--space-2xs));
    -ms-flex: 1 1 calc(var(--size-full) - var(--space-2xs));

    margin: var(--size-none) var(--space-3xs) var(--size-none) var(--space-3xs);

}

.autoplaySuggestionContent .secondaryActionButtons > div,
.trebbleSubscribeSuggestionContent .secondaryActionButtons > div{
    margin: var(--size-none);
}

.trebbleSubscribeSuggestionContent  div#shareOnFacebookBtn,
.trebbleSubscribeSuggestionContent  div#shareOnTwitterBtn{
  border-color: white;
  color: white;
}
.autoplaySuggestionContent  div#shareOnFacebookBtn,
body.browser.mobileweb .trebbleSubscribeSuggestionContent  div#shareOnFacebookBtn:hover,
.trebbleSubscribeSuggestionContent  div#shareOnFacebookBtn:active {
  background-color: var(--text-dark);
  border-color: var(--text-dark);
  color: white !important;
}

.autoplaySuggestionContent  div#shareOnTwitterBtn,
body.browser.mobileweb  .trebbleSubscribeSuggestionContent  div#shareOnTwitterBtn:hover,
.trebbleSubscribeSuggestionContent  div#shareOnTwitterBtn:active {
  background-color: var(--color-twitter);
  border-color: var(--color-twitter);
  color:white !important;
}

.autoplaySuggestionContent  div#shareOnFacebookBtn,
.trebbleSubscribeSuggestionContent  div#shareOnFacebookBtn,
.autoplaySuggestionContent  div#shareOnTwitterBtn,
.trebbleSubscribeSuggestionContent  div#shareOnTwitterBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base-px);
    padding: var(--border-6);
    font-weight: bold;
    flex: 0 0 calc(var(--size-half) - var(--space-2xs));
    max-width: var(--size-200);
    min-width: var(--size-100);
    margin: var(--space-3xs);
    height: 42px;
    padding: var(--size-none);

}

.trebbleSubscribeSuggestionContent #followBtn,
.trebbleSubscribeSuggestionContent #buyNowBtn{
    width: auto;
    min-width: var(--size-200);
    height: var(--size-46) !important;
    display: flex;
    flex: 0 0 100%;
    background-color: var(--trebble-primary);
    justify-content: center;
    align-items: center;
}

.trebbleSubscribeSuggestionContent #followBtn:hover,
.trebbleSubscribeSuggestionContent #buyNowBtn:hover,
.trebbleSubscribeSuggestionContent #followBtn:active,
.trebbleSubscribeSuggestionContent #buyNowBtn:active,
.trebbleSubscribeSuggestionContent #buyNowBtn:hover,
.trebbleSubscribeSuggestionContent #buyNowBtn:active{
    background-color: transparent !important;
    color: var(--trebble-primary) !important;
}

.autoplaySuggestionContent  div#shareOnFacebookBtn t,
.trebbleSubscribeSuggestionContent  div#shareOnFacebookBtn t,
.autoplaySuggestionContent  div#shareOnTwitterBtn t,
.trebbleSubscribeSuggestionContent  div#shareOnTwitterBtn t{
    font-size: var(--text-xl-px);
    padding: var(--border-4);

}
.trebbleSubscribeSuggestionContent 
.autoplaySuggestionContent .actionButtons,
.trebbleSubscribeSuggestionContent .secondaryActionButtons{

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: var(--space-2xs);
    box-sizing: border-box;
    width: var(--size-full);

}


body.mobileweb .autoplaySuggestionContent div#shareOnFacebookBtn:hover,
body.mobileweb .autoplaySuggestionContent  div#shareOnTwitterBtn:hover,
.autoplaySuggestionContent  div#shareOnFacebookBtn:active,
.autoplaySuggestionContent  div#shareOnTwitterBtn:active,
body.mobileweb .trebbleSubscribeSuggestionContent  div#shareOnFacebookBtn:hover,
body.mobileweb .trebbleSubscribeSuggestionContent div#shareOnTwitterBtn:hover,
.trebbleSubscribeSuggestionContent  div#shareOnFacebookBtn:active,
.trebbleSubscribeSuggestionContent div#shareOnTwitterBtn:active{
 background-color: white;
 border-color:white;
 color: var(--text-dark) !important;
}

.autoplaySuggestionContent .secondaryActionButtons,
.trebbleSubscribeSuggestionContent .secondaryActionButtons{
   justify-content: center;
   max-width: var(--size-200);
   margin: var(--space-md) auto;
}

.autoplaySuggestionContent #upNextContentInfo,
.trebbleSubscribeSuggestionContent #upNextContentInfo{
    margin-top: var(--space-lg);
    flex-direction: column;
    -moz-flex-direction: column;
    justify-content: space-between;
}
.autoplaySuggestionContent .toPlayNext,
.trebbleSubscribeSuggestionContent .toPlayNext{
    font-weight: bold;
    cursor: pointer;
}
.autoplaySuggestionContent,
.trebbleSubscribeSuggestionContent{

    box-sizing: border-box;
    padding: var(--space-2xs);
    

}
.autoplaySuggestionContent #autoplayMessage,
.trebbleSubscribeSuggestionContent #autoplayMessage{
    text-align: center;
}
body.mobileweb  .autoplaySuggestionContent .toPlayNext:hover,
.autoplaySuggestionContent .toPlayNext:active,
body.mobileweb  .trebbleSubscribeSuggestionContent .toPlayNext:hover,
.trebbleSubscribeSuggestionContent .toPlayNext:active{
    background-color: var(--color-white-20);
}

.transparent_button.ion-button > span.buttonLabel{
   margin: var(--size-none) var(--space-3xs) var(--size-none) var(--space-3xs);
}


@keyframes gradient-text {
  0% {
    background-position: 0% 50%;
}

25% {
    background-position: 50% 50%;
}


50% {
    background-position: 50% 50%;
}

75% {
    background-position: 50% 50%;
}

100% {
    background-position: 100% 50%;
}
}


@keyframes gradient-text-bg-float {
  0% {
    background-position: 0% 50%;
    box-shadow: var(--shadow-md);
    transform: translatey(0px);
}

25% {
    background-position: 50% 50%;
    box-shadow: 0 25px 15px 0px var(--color-black-20);
    transform: translatey(-10px);
}


50% {
    background-position: 50% 50%;
    box-shadow: 0 25px 15px 0px var(--color-black-10);
    transform: translatey(-20px);
}

75% {
    background-position: 50% 50%;
    box-shadow: var(--shadow-lg);
    transform: translatey(-10px);
}

100% {
    background-position: 100% 50%;
    box-shadow: var(--shadow-md);
    transform: translatey(0px);
}
}


#whatsacapsuleButton {
  /* display: none; */
  position: absolute;
  right: 0px;
  top: 170px;
  animation: gradient-text-bg-float 8s linear infinite;
  padding: var(--size-none);
  background: var(--trebble-accent); /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, var(--trebble-accent) , var(--trebble-gradient-purple)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
  
  background-size: 400% 300%;
  border: var(--border-0);
  box-shadow: var(--shadow-md);
}

.createCapsulePage #whatsacapsuleButton{
  top:30px;
}


#whatsacapsuleButton > div {
  mix-blend-mode: screen;
  background-color: white;
  color: black;
  padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--size-none);
}

#whatsacapsuleButton > span {
  background-color: white;
  color: black;
  mix-blend-mode: screen;
  padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-md);
  font-size: var(--text-3xl-px);
}

  
  .waterpulse {
    margin: var(--size-100);
    display: block;
    width: var(--size-22);
    height: var(--size-22);
    border-radius: 50%;
    background: var(--pulse-yellow);
    cursor: pointer;
    box-shadow: 0 0 0 rgba(var(--pulse-yellow-rgb), var(--pulse-opacity));
    animation: waterpulse var(--pulse-duration) infinite;
}

.waterpulse:hover {
    animation: none;
  }

/* Consolidated pulse animations for different colors */
@keyframes waterpulse {
    0% { box-shadow: var(--shadow-none); }
    70% { box-shadow: var(--shadow-none); }
    100% { box-shadow: var(--shadow-none); }
}

@keyframes greenpulse {
    0% { box-shadow: 0 0 0 0 var(--pulse-green-alpha); }
    70% { box-shadow: 0 0 0 var(--pulse-size) var(--pulse-green-base); }
    100% { box-shadow: 0 0 0 0 var(--pulse-green-base); }
}

@keyframes graypulse {
    0% { box-shadow: 0 0 0 0 var(--pulse-gray-alpha); }
    70% { box-shadow: 0 0 0 var(--pulse-size) var(--pulse-gray-base); }
    100% { box-shadow: 0 0 0 0 var(--pulse-gray-base); }
}

@keyframes redpulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--trebble-primary-rgb), var(--pulse-opacity)); }
    70% { box-shadow: 0 0 0 var(--pulse-size) var(--trebble-primary-0); }
    100% { box-shadow: 0 0 0 0 var(--trebble-primary-0); }
}
  
  /* Scale animations */
  @keyframes pulse {
    from { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(var(--pulse-scale-small), var(--pulse-scale-small), var(--pulse-scale-small)); }
    to { transform: scale3d(1, 1, 1); }
  }
  
  @keyframes medium_pulse {
    from { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(var(--pulse-scale-medium), var(--pulse-scale-medium), var(--pulse-scale-medium)); }
    to { transform: scale3d(1, 1, 1); }
  }
  
  /* Animation classes */
  .pulse {
    animation-name: pulse;
  }
  
  .lowpulse {
    animation: pulse 1.5s infinite;
  }

@keyframes blink-animation {
 from { opacity: 1; }
 to { opacity: 0; }
}

.blink {
  animation:  blink-animation 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
  animation: blink-animation  1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

#player.fullscreen   #reponsivePlayerContent {
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  flex-direction: column;
}

#player.fullscreen > [data-role=header] {
  display: none !important;
}

#player{
  height: var(--size-full);
}
#player.fullscreen,
#player.fullscreen .ui-content,
#player.fullscreen .ui-content > div,
#player.fullscreen .ui-content > div > #reponsivePlayerContent {
  width: var(--size-full);
  height: var(--size-full);
}


#player #extraPlayerControlWrapper{
    height: var(--size-40);
    display: flex; 
    justify-content: center;
    align-items: center;
    width: var(--size-full);
}

#player #extraPlayerControlWrapper #listenOnVoiceEnabledDeviceBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    position: relative;
}

#player #capsuleCarouselItem .capsuleCard  .title{
    display: none;
}


#player #playerControlsWrapper #playButton .play_button_bg_circle,
#playerFooter #playerControlsWrapper #playButton .play_button_bg_circle{
    border: var(--border-1) solid white;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: white;
    color: var(--text-dark);
    box-shadow: var(--shadow-bottom);
}
#player #playerControlsWrapper #playButton .play_button_bg_circle{
    height: var(--size-60);
    width: var(--size-60);
    flex: 0 0 60px;
}
#playerFooter #playerControlsWrapper #playButton .play_button_bg_circle,
body.embedded #player #playerControlsWrapper #playButton .play_button_bg_circle{
 height: var(--size-40);
 width: var(--size-40);
 flex: 0 0 40px;
}

#playerFooter:not(.transparent) #playerControlsWrapper #playButton .play_button_bg_circle{
    border: var(--border-1) solid var(--text-dark);
    background-color: var(--text-dark);
}
#playerFooter:not(.transparent) #playerControlsWrapper #playButton .ion-ios7-pause,
#playerFooter:not(.transparent) #playerControlsWrapper #playButton .ion-ios7-play,
#playerFooter:not(.transparent) #playerControlsWrapper #playButton .ion-loading-c {
    color:white;
}


#player #playerControlsWrapper #playButton .ion-ios7-play,
#player #playerControlsWrapper #playButton .ion-ios7-pause,
#player #playerControlsWrapper #playButton .pe-7s-play,
#player #playerControlsWrapper #playButton .pe-7s-pause{
    padding-top: var(--space-3xs);
    color: var(--text-dark);
}
body.embedded #player #playerControlsWrapper #playButton .pe-7s-play,
body.embedded #player #playerControlsWrapper #playButton .pe-7s-pause{
    padding-top: var(--size-none);
}
#player #playerControlsWrapper #playButton .ion-ios7-play,
#player #playerControlsWrapper #playButton .pe-7s-play{
    padding-left: var(--space-3xs);
}

#playerFooter #playerControlsWrapper #playButton .ion-ios7-play,
#playerFooter #playerControlsWrapper #playButton .ion-ios7-pause{
    padding-top: var(--border-3);
    color: var(--text-dark);
}
#playerFooter #playerControlsWrapper #playButton .ion-ios7-play{
    padding-left: var(--border-4);
}


#player #extraPlayerControlWrapper #listenOnVoiceEnabledDeviceBtn  t{
 font-size: var(--text-xl-px);
 margin: var(--size-none) var(--space-2xs);
}

#player #extraPlayerControlWrapper #listenOnVoiceEnabledDeviceBtn span{
    font-size: var(--text-sm);
}

#player.fullscreen   #reponsivePlayerContent > div:first-child {
  width: var(--size-full) !important;
  flex: 0 0 100% !important;
  height: var(--size-full) !important;
  position: absolute !important;
  top: 0px;
  left: 0px;
}

#player.fullscreen     #reponsivePlayerContent > div:nth-child(2) > div{
  display: none;
}

#player.fullscreen     #reponsivePlayerContent > div:nth-child(2) {
  position: absolute;
  bottom: 0px;
  display: block;
  left: 0px;
}

body:not(.embedded) #player.fullscreen     #reponsivePlayerContent > div:nth-child(2) {
  height: 161px;
}

body.embedded #player.fullscreen     #reponsivePlayerContent > div:nth-child(2) {
  height: 110px;
}

#player.fullscreen     #reponsivePlayerContent > div:nth-child(2):hover  {
  background: linear-gradient( var(--color-black-0), var(--color-black-60) 30%, var(--color-black-100) 100%);
  
}

#player.fullscreen     #reponsivePlayerContent > div:nth-child(2):hover   > div {

  display: block;
  animation: fadeIn 0.5s;
  
}

#resizeVideoFullBtn,
#resizeVideoFullBtnWrapper,
#player.fullscreen #resizeVideoFullBtn,
#player.fullscreen #resizeVideoFullBtnWrapper {
  display: none !important;
}

#player:not(.fullscreen) #exitVideoFullscreenBtn{
    display: none;
}


#exitVideoFullscreenBtn{
    padding: var(--size-none);
    background-color: transparent;
    border: var(--border-0);
    margin: 0em;
    width: var(--size-1-7em);
    height: var(--size-1-7em);
    text-align: center;
    line-height: var(--line-height-1-5);
    position: absolute;
    top: 40px;
    left: 0px;
    opacity: 0.8;
    font-size: var(--text-2xl);
    display: block;
}

#player.fullscreen{
  padding: var(--size-none) !important;
}

body:not(.embedded) #player:not(.fullscreen) {
  padding-top: var(--space-xl) !important;
}




#player.fullscreen #reponsivePlayerContent > div:nth-child(1)  #mediaSourceBtn {
  top: 50px;
  bottom: auto;

}

#player.fullscreen  #reponsivePlayerContent.activeCapsule > div:nth-child(2) div#viewCapsuleDetailsBtn{
  display: none !important;
}

#player.fullscreen  #reponsivePlayerContent.activeCapsule > div:nth-child(1) div#viewCapsuleDetailsBtn{
  display: block;
  max-width: var(--size-200);
  right: 0px;
  left: auto;
}

body:not(.embedded) #player.fullscreen  #reponsivePlayerContent.activeCapsule > div:nth-child(1) div#viewCapsuleDetailsBtn{
  bottom: 161px;
}

body.embedded #player.fullscreen  #reponsivePlayerContent.activeCapsule > div:nth-child(1) div#viewCapsuleDetailsBtn{
  bottom: 110px;
}
div#player>div.ui-header[data-role=header]>#playlistInfoWrapper{

    position: absolute;
    width: var(--size-full);
    padding: var(--size-none) var(--size-200);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: var(--size-full);

}

div#player #songInfoWrapper,
div#playerFooter #songInfoWrapper{

    height: var(--size-60);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}
body.embedded div#player #songInfoWrapper{
    height: var(--size-full);
}
div#player #songInfoWrapper > div,
div#playerFooter #songInfoWrapper > div,
div#playerFooter #footerCurrentSongInfo #footerCurrentSongTitle,
div#playerFooter #footerCurrentSongInfo #footerCurrentSongArtist{
    width: var(--size-full);
    text-overflow:ellipsis;
    text-align: center;

}

div#player #songInfoWrapper > div#playerCurrentSongTitle,
div#playerFooter #songInfoWrapper > div#playerCurrentSongTitle{
    font-size: var(--text-md);
    font-weight:900 !important;
    
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  #player.fullscreen  #reponsivePlayerContent.activeCapsule > div:nth-child(1) div#viewCapsuleDetailsBtn {
    width: calc(var(--size-full) - var(--space-sm));
    right: 10px;
}

div#player>div.ui-header[data-role=header]>#playlistInfoWrapper{
    padding: var(--size-none) 102px;
}


}

body.embedded  #player #reponsivePlayerContent > div:nth-child(1) #resizeVideoFullBtn,
body.embedded  #player #reponsivePlayerContent > div:nth-child(1) #resizeVideoFullBtnWrapper{
    display: none;
}

#player.fullscreen     #reponsivePlayerContent > div:nth-child(2) > div#artistSocialInfoAndCapsuleOverviewBox,
#player.fullscreen     #reponsivePlayerContent > div:nth-child(2) > div#commentOverviewBox{
    display: none !important;
}

body.embedded #player.fullscreen #albumArtImage {
  margin: auto;
  max-height: calc(var(--size-full) - var(--text-9xl-px) - var(--text-9xl-px));
}
body:not(.embedded) #player.fullscreen #albumArtImage {
  margin: auto;
  max-height: calc(var(--size-full) - var(--size-layout-2xs) - var(--size-layout-2xs));
  min-height: var(--size-200);
}

@media  (min-height: 120px){
    #player  #reponsivePlayerContent  div:nth-child(2) div#viewCapsuleDetailsBtn{
      display:none !important;
  }
}

#playerSocialInfoWrapper #resizeVideoFullBtn{

    position: relative;
    text-align: center;
    font-weight: 400;
    
    display: flex;
    display: -moz-flex;
    display: -o-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -o-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -o-align-items: center;
    overflow: visible;


}
/*Buttons for trebblePlayer Mode*/
#player[playermode=trebblePlayer][audio_can_be_interacted_with=true] #liveLikeButton,
/*#player[playermode=trebblePlayer] #capsuleButton,*/
/*#player[playermode=trebblePlayer][audio_can_be_interacted_with=true] #sendCapsuleToHostButton,*/
#player[playermode=trebblePlayer][audio_can_be_interacted_with=true] #shareBtn,
/*Buttons for capsuleFeedPlayer Mode*/
#player[playermode=capsuleFeedPlayer][audio_can_be_interacted_with=true] #liveLikeButton,
#player[playermode=categoryShortcastRadio][audio_can_be_interacted_with=true] #liveLikeButton,
/*#player[playermode=capsuleFeedPlayer] #capsuleButton,
#player[playermode=capsuleFeedPlayer][audio_can_be_interacted_with=true] #sendCapsuleToHostButton,*/
#player[playermode=capsuleFeedPlayer][audio_can_be_interacted_with=true] #shareBtn,
#player[playermode=categoryShortcastRadio][audio_can_be_interacted_with=true] #shareBtn{
    display: flex !important;
}


body.mobilebrowser:not(.embedded) #player[playermode=trebblePlayer][audio_can_be_interacted_with=true] #converseButton,
body:not(.mobilebrowser):not(.embedded) #player[playermode=trebblePlayer][audio_can_be_interacted_with=true] #converseButton,
body.embedded #player[playermode=trebblePlayer][audio_can_be_interacted_with=true] #converseButton,
body #player.fullscreen[playermode=trebblePlayer][audio_can_be_interacted_with=true] #converseButton,
body.mobilebrowser:not(.embedded) #player[playermode=capsuleFeedPlayer][audio_can_be_interacted_with=true] #converseButton,
body.mobilebrowser:not(.embedded) #player[playermode=categoryShortcastRadio][audio_can_be_interacted_with=true] #converseButton,
body:not(.mobilebrowser):not(.embedded) #player[playermode=capsuleFeedPlayer][audio_can_be_interacted_with=true] #converseButton,
body:not(.mobilebrowser):not(.embedded) #player[playermode=categoryShortcastRadio][audio_can_be_interacted_with=true] #converseButton,
body.embedded #player[playermode=capsuleFeedPlayer][audio_can_be_interacted_with=true] #converseButton,
body.embedded #player[playermode=categoryShortcastRadio][audio_can_be_interacted_with=true] #converseButton,
body #player.fullscreen[playermode=capsuleFeedPlayer][audio_can_be_interacted_with=true] #converseButton,
body #player.fullscreen[playermode=categoryShortcastRadio][audio_can_be_interacted_with=true] #converseButton,

#player[playermode=trebblePlayer] #loopButton, 
#player[playermode=trebblePlayer] #previousButton, 
/*body.browser:not(.mobilebrowser):not(.embedded) #player:not(.fullscreen)[playermode=trebblePlayer]#converseButton,*/
#player[playermode=trebblePlayer] #shareBtn,
#player[playermode=trebblePlayer] #shuffleButton,
#player[playermode=capsuleFeedPlayer] #loopButton, 
#player[playermode=categoryShortcastRadio] #loopButton, 
#player[playermode=capsuleFeedPlayer] #previousButton, 
#player[playermode=categoryShortcastRadio] #previousButton, 
/*body.browser:not(.mobilebrowser):not(.embedded) #player:not(.fullscreen)[playermode=capsuleFeedPlayer] #converseButton,
body.browser:not(.mobilebrowser):not(.embedded) #player:not(.fullscreen)[playermode=categoryShortcastRadio] #converseButton,*/
#player[playermode=capsuleFeedPlayer] #shareBtn,
#player[playermode=categoryShortcastRadio] #shareBtn,
/*#player[playermode=categoryShortcastRadio] [data-role=header] #subscribeButton,
#player[playermode=categoryShortcastRadio] [data-role=header] #unsubscribeButton,*/
#player:not([playermode=capsuleFeedPlayer]) .listen_on_voice_enabled_devices_tooltip,
#player:not([playermode=categoryShortcastRadio]) .listen_on_voice_enabled_devices_tooltip,
#player:not([playermode=capsuleFeedPlayer]) #listenOnVoiceEnabledDeviceBtn,
#player[playermode=capsuleFeedPlayer] #shuffleButton,
#player[playermode=categoryShortcastRadio] #shuffleButton{
    display: none !important;
}


#player[audio_can_be_interacted_with=false] #liveLikeButton,
#player[audio_can_be_interacted_with=false] #converseButton,
#player[audio_can_be_interacted_with=false] #shuffleButton,
#player[audio_can_be_interacted_with=false] #capsuleButton,
#player[audio_can_be_interacted_with=false] #sendCapsuleToHostButton,
#player[audio_can_be_interacted_with=false] #loopButton,
#player[audio_can_be_interacted_with=false] #shareBtn,

#playerFooter[audio_can_be_interacted_with=false] #liveLikeButton,
#playerFooter[audio_can_be_interacted_with=false] #converseButton,
#playerFooter[audio_can_be_interacted_with=false] #shuffleButton,
#playerFooter[audio_can_be_interacted_with=false] #capsuleButton,
#playerFooter[audio_can_be_interacted_with=false] #sendCapsuleToHostButton,
#playerFooter[audio_can_be_interacted_with=false] #loopButton,
#playerFooter[audio_can_be_interacted_with=false] #shareBtn{
    display: none !important;
}

#player[playermode=trebblePlayer] #tuninButton,
#player[playermode=trebblePlayer] #header-queue-button,#player #unsubscribeButton,
#player[playermode=capsuleFeedPlayer] #tuninButton,
#player[playermode=categoryShortcastRadio] #tuninButton,
#player[playermode=trebblecapsuleFeedPlayerPlayer] #header-queue-button,
#player #unsubscribeButton,
#player #subscribeButton{
    display: none;
}

#player #tuninButton{
    display: none;
}

#player[playermode=trebblePlayer][canbesubscribedto=true][subscribed=true] #unsubscribeButton,
#player[playermode=trebblePlayer][canbesubscribedto=true][subscribed=false] #subscribeButton,
#player[playermode=capsuleFeedPlayer][canbesubscribedto=true][subscribed=true] #currentAudioLoadedInfoSection #unsubscribeButton,
#player[playermode=capsuleFeedPlayer][canbesubscribedto=true][subscribed=false] #currentAudioLoadedInfoSection #subscribeButton,
#player[playermode=categoryShortcastRadio][canbesubscribedto=true][subscribed=true] #currentAudioLoadedInfoSection #unsubscribeButton,
#player[playermode=categoryShortcastRadio][canbesubscribedto=true][subscribed=false] #currentAudioLoadedInfoSection #subscribeButton{
    display: flex ;
    justify-content: center;
    align-items: center;
    height: var(--size-40);
}


#player #subscribeButton > .extensibleLabel,
#player #unsubscribeButton > .extensibleLabel {
  font-size: var(--text-base);
}

#player #subscribeButton > .iconWrapper,
#player #unsubscribeButton > .iconWrapper{
  font-size: var(--text-xl);
}

#songPoppupMenu > div > ul >li.show_on_mobile_only{
    display: none

}

.display_on_desktop{
    display: flex  !important;
}

.display_on_mobile{
    display: none !important;
}



/*Buttons for capsulePlayer Mode*/
#player[playermode=capsulePlayer][audio_can_be_interacted_with=true] #liveLikeButton,
#player[playermode=capsulePlayer][audio_can_be_interacted_with=true] #shareBtn{
    display: block !important;
}

body.mobilebrowser:not(.embedded)  #player[playermode=capsulePlayer][audio_can_be_interacted_with=true] #converseButton,
body:not(.mobilebrowser):not(.embedded)  #player[playermode=capsulePlayer][audio_can_be_interacted_with=true] #converseButton,
body.embedded #player[playermode=capsulePlayer][audio_can_be_interacted_with=true] #converseButton,
body #player.fullscreen[playermode=capsulePlayer][audio_can_be_interacted_with=true] #converseButton,
#player[playermode=capsulePlayer] #loopButton, 
/*#player[playermode=capsulePlayer] #previousButton,*/ 
/*body.browser:not(.mobilebrowser):not(.embedded) #player:not(.fullscreen)[playermode=capsulePlayer][audio_can_be_interacted_with=true] #converseButton,*/
/*#player[playermode=capsulePlayer] #capsuleButton,*/
#player[playermode=capsulePlayer][audio_can_be_interacted_with=true] #sendCapsuleToHostButton,
#player[playermode=capsulePlayer] #shuffleButton{
    display: none !important;
}

/*Buttons for songPlayer Mode*/
#player[playermode=songPlayer][audio_can_be_interacted_with=true] #liveLikeButton,
#player[playermode=songPlayer][audio_can_be_interacted_with=true] #shareBtn,
#player[playermode=songPlayer][audio_can_be_interacted_with=true] #previousButton{
    display: flex !important;
}

body.mobilebrowser:not(.embedded)  #player[playermode=songPlayer][audio_can_be_interacted_with=true] #converseButton,
body:not(.mobilebrowser):not(.embedded)  #player[playermode=songPlayer][audio_can_be_interacted_with=true] #converseButton,
body.embedded #player[playermode=songPlayer][audio_can_be_interacted_with=true] #converseButton,
body #player.fullscreen[playermode=songPlayer][audio_can_be_interacted_with=true] #converseButton,
#player[playermode=songPlayer] #loopButton, 
#player[playermode=songPlayer] #shuffleButton,
/*#player[playermode=songPlayer] #capsuleButton, */
#player[playermode=songPlayer][audio_can_be_interacted_with=true] #sendCapsuleToHostButton, 
/*body.browser:not(.mobilebrowser):not(.embedded) #player:not(.fullscreen)[playermode=songPlayer][audio_can_be_interacted_with=true] #converseButton,*/
#player[playermode=songPlayer][audio_can_be_interacted_with=true] #nextButton{
    display: none !important;
}

/*Buttons for defaultPlayer Mode*/

#player[playermode=defaultPlayer] #loopButton,
#player[playermode=defaultPlayer] #previousButton,
#player[playermode=defaultPlayer] #shuffleButton{
    display: flex !important;
}

#player[playermode=defaultPlayer][audio_can_be_interacted_with=true] #liveLikeButton, 
#player[playermode=defaultPlayer][audio_can_be_interacted_with=true] #converseButton, 
#player[playermode=defaultPlayer][audio_can_be_interacted_with=true] #shareBtn,
/*#player[playermode=defaultPlayer] #capsuleButton*/
#player[playermode=defaultPlayer][audio_can_be_interacted_with=true] #sendCapsuleToHostButton{
    display: none !important;
}

body.browser:not(.mobilebrowser):not(.embedded)  #player:not(.fullscreen):not([playermode=defaultPlayer]) #playerControlsWrapper > [data-role=controlgroup] > :first-child > a,
body.browser:not(.mobilebrowser):not(.embedded)  #player:not(.fullscreen):not([playermode=defaultPlayer]) #playerControlsWrapper > [data-role=controlgroup] > :first-child > o{
    width: 24%;
}

paper-input::shadow input::-webkit-input-placeholder{
  opacity: 0.5;
}

*::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  opacity: 0.5;
}

*:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  opacity: 0.5;
}

*::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  opacity: 0.5;
}

*:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  opacity: 0.5;
}

.linkButton{
    font-size: small;
    color: var(--trebble-primary);
    font-weight: bold;
    margin: var(--size-none) var(--space-2xs) var(--size-none) var(--space-2xs);
    cursor: pointer;
}

.fieldDesc .linkButton{
    color: var(--text-dark);
}

.linkButton.helper{
    color: white;
    animation: gradient-text-bg 8s linear infinite;
    padding: var(--size-none);
    background: var(--trebble-accent);   /* fallback for old browsers */
    background: linear-gradient(to left, var(--trebble-accent) , var(--trebble-gradient-purple));   /* Chrome 10-25, Safari 5.1-6 */   /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, var(--trebble-accent) , var(--trebble-gradient-purple));   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: 400% 300%;

}

.linkButton > span.iconButton{
  padding-right: var(--space-3xs);
  font-size: medium;
}

.linkButton.helper > span{
    background-color: white;
    mix-blend-mode: screen;
    color: black;

}

.fabButton {
  background-color: var(--trebble-primary);
  box-shadow: var(--shadow-complex-1);
  border-radius: 50%;
  display: block;
  margin: var(--space-sm) auto 0;
  position: relative;
  transition: all .1s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white !important;
  height: var(--size-50);
  width: var(--size-50);
  font-size: var(--text-3xl-px);
  /*background: var(--gradient-primary-alt);*/
}




.fabButton:active,
.fabButton:focus,
body.mobileweb .fabButton:hover {
  box-shadow: var(--shadow-complex-2);
}

.fabButton:not(:last-child) {
  margin: var(--space-sm) auto 0;
  opacity: 0;
  transform: translateY(50px);
}

/*.fabButtonContainer {
  position: fixed;
  top: 570px;
  right: 20px;
  }*/

  .fabButtonContainer.expanded
  .fabButton:not(:last-child) {
      opacity: 1;
      transform: none;
      margin: var(--space-xs) auto 0;
  }

  /* Unessential styling for sliding up buttons at differnt speeds */

  .fabButton:nth-last-child(1) {
      transition-delay: 25ms;
      font-size: var(--text-3xl-px);
  }

  .fabButton:not(:last-child):nth-last-child(2) {
      transition-delay: 20ms;
      font-size: var(--text-lg-px);
      height: var(--size-60);
      width: var(--size-60);

  }

  .fabButton:not(:last-child):nth-last-child(3) {
      transition-delay: 40ms;
      font-size: var(--text-lg-px);
      height: var(--size-60);
      width: var(--size-60);
  }

  .fabButton:not(:last-child):nth-last-child(4) {
      transition-delay: 60ms;
      font-size: var(--text-lg-px);
  }
  .fabButtonContainer.expanded  .fabButton:last-child{
      background-color: var(--trebble-primary-dark);
      background-color: white;
      /*color:  var(--trebble-primary) !important;*/
      color:  white !important;
  }

  .fabButtonContainer.expanded .fabButton{
      cursor: pointer;
  }

  #addContentFabBtn.fabButton > .ion-ios7-close-empty{
    display: none;
}

.fabButtonContainer.expanded #addContentFabBtn.fabButton > .ion-ios7-plus-empty,
.fabButtonContainer.expanded #addContentFabBtn.fabButton > .ion-contrast{
    display: none;
}

body[appName=trebble] .ion-contrast:before {
  content: "\e901";
  font-family: 'soundwave' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: var(--line-height-none);

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: rotate(0deg);
}

.fabButtonContainer.expanded #addContentFabBtn.fabButton > .ion-ios7-close-empty{
    display: block;
}

.fabButtonContainer:not(.expanded) > .fabButton:nth-child(2),
.fabButtonContainer:not(.expanded) > .fabButton:nth-child(1){
  display:none;
}

body.browser.mobileweb  .fabButtonContainer:hover > .fabButton:nth-child(2),
body.browser.mobileweb  .fabButtonContainer:hover > .fabButton:nth-child(1),
.fabButtonContainer:active > .fabButton:nth-child(2),
.fabButtonContainer:active > .fabButton:nth-child(1){
  display:flex;
  display:-moz-flex;
  display:-ms-flex;
}

body.browser.mobileweb .fabButton.hint:hover:before, 
body.browser.mobileweb .fabButton.hint:hover:after, 
body.browser.mobileweb  .fabButton[data-hint]:hover:before, 
body.browser.mobileweb .fabButton[data-hint]:hover:after{
    transition-delay: 0ms;
}
#fabAddButtonContainer,
#createNewCapsuleFloatingBtnWrapper,
#playMyFeedFloatingBtnWrapper{
 top: auto;
 bottom: 80px;
 right: 20px;
 position: fixed;
 z-index: 2;
}

body.useFloatingPlayer #fabAddButtonContainer,
body.useFloatingPlayer #createNewCapsuleFloatingBtnWrapper,
body.useFloatingPlayer #playMyFeedFloatingBtnWrapper{

 bottom: 160px;

}

#playMyFeedFloatingBtnWrapper .fabButton,
#createNewCapsuleFloatingBtnWrapper #addCapsuleFabBtn,
#fabAddButtonContainer #addContentFabBtn{
    width:var(--size-70);
    height:var(--size-70);
}

#playMyFeedFloatingBtnWrapper .fabButton t {
    font-size: var(--text-lg);
}

#createNewCapsuleFloatingBtnWrapper #addCapsuleFabBtn t{
    font-size: var(--text-md) ;
}

#createNewCapsuleFloatingBtnWrapper #addCapsuleFabBtn t.ion-contrast{

    position: relative;
    font-size: var(--text-xl);
}

#createNewCapsuleFloatingBtnWrapper #addCapsuleFabBtn t.ion-contrast i.ion-ios7-plus-empty{
    position: absolute;
    font-size: var(--text-xl-px);
    color: white;
    height: var(--size-16);
    -webkit-text-stroke-width: thin;
    align-items: center;
    bottom: 10px;
    right: 0px;
    display: flex;
    justify-content: center;
    width: var(--size-16);
    border-radius: 50%;
}

#fabAddButtonContainer #addContentFabBtn t{
    font-size: var(--text-sm) !important;
}
#fabAddButtonContainer #addContentFabBtn t b{
    top: -12px !important;
    left: -12px !important;
    font-size: var(--text-base) !important;
}
#fabAddButtonContainer #addContentFabBtn t.ion-ios7-close-empty,
#fabAddButtonContainer #addContentFabBtn t.ion-ios7-plus-empty{
    font-size: var(--text-lg) !important;
}


#createNewCapsuleFloatingBtnWrapper #addCapsuleFabBtn,
#playMyFeedFloatingBtnWrapper .playIconWrapper,
#playMyFeedFloatingBtnWrapper #pauseIconWrapper,
#play_feed_btn .playIconWrapper,
#play_feed_btn #pauseIconWrapper{
    cursor: pointer;
}
#play_feed_btn .playIconWrapper,
#play_feed_btn #pauseIconWrapper{
    text-transform: uppercase;
}
#playMyFeedFloatingBtnWrapper #playMyFeedBtn .pe-7s-play{
    margin-left: var(--border-4);
    /*margin-top: var(--border-6);*/
}

.tabheader{
  line-height: var(--line-height-4xl);
  vertical-align: middle;
  font-size: var(--text-md);
  margin-top: var(--border-4);
  margin-bottom: var(--border-4);
  border-bottom: var(--border-1) solid var(--color-black-5);
  color: var(--color-black-30);
  -moz-flex-line-pack: center;
  align-content: center;
  -webkit-align-content: center;
  -moz-flex-direction: row;
  flex-direction: row;
  display: -moz-flexbox;
  display: flex;
  display: -moz-flex;
  height: var(--size-40);
  background-color: transparent;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-justify-content: center;
}

.tabheader > div {
  width: auto;
  flex: 0 0 auto;
  min-width: var(--size-100);
  padding: var(--size-none) var(--space-sm) var(--size-none) var(--space-sm);
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 80%;
  z-index: 2;
}

body.mobileweb .tabheader > div:hover,
.tabheader > div:active{
  color: white;
}


.tabheader > div.selected{
  color: var(--trebble-primary);
  border-bottom: var(--border-3) solid;
}

.journeyPage .highlight_button{
    background-color: white; 
}


#shareTrebbleBtn > span,
#shareTrebbleBtn > t,
.journeyPage .highlight_button > span ,
.journeyPage .highlight_button > t{
  background-color: white;
  color: black;
  mix-blend-mode: screen;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;

}
[data-role=page].createCapsulePage[saveAsDraft=true] .doNotAddOnAirCheckboxWrapper,
[data-role=page].createCapsulePage[saveAsDraft=true] .doNotAddOnAirCheckboxWrapper.field_wrapper,
[data-role=page].createCapsulePage[saveAsDraft=true] .songToPlayAfterCapsuleFieldWrapper.field_wrapper{
    display: none !important;
}



@media (max-width: 500px){
  .extensibleBtn  .extensibleLabel{
    display: none !important;
}


[data-role=header] .highlight_button.extensibleBtn{
    background-color: white;
    color: black !important;
    width: auto;
}

[data-role=header] .highlight_button.extensibleBtn .extensibleLabel{
    display: flex !important;
    color: black !important;
    font-size: var(--text-md-px);
    mix-blend-mode: normal;
}


[data-role=header] .highlight_button.extensibleBtn t{
    /*font-size: 80%;*/
    color: black !important;
    mix-blend-mode: normal;
}

[data-role=header] .extensibleBtn.hide_on_mobile{
    display: none !important;
}

#songPoppupMenu > div > ul > li.show_on_mobile_only{
    display: block;
}

.display_on_desktop{
    display: none !important;
}

.display_on_mobile{
    display: flex !important;
}


#shareTrebbleBtn > span,
#shareTrebbleBtn >  t,
.journeyPage .highlight_button > span,
.journeyPage .highlight_button > t {
    background-color: white;
    /*color: white;*/
}

/*.playlistDetailsPage:not(.journeyPage) [data-role=header] #shareTrebbleBtn{*/
    .playlistDetailsPage [data-role=header] #shareTrebbleBtn{
        background: transparent;
        border: var(--border-0);
    }

    /*.playlistDetailsPage:not(.journeyPage) [data-role=header] #shareTrebbleBtn t{*/
        .playlistDetailsPage [data-role=header] #shareTrebbleBtn t{
            background-color: transparent;
            color: white;
            font-weight: bold;
        }
        /*
        .playlistDetailsPage #shareTrebbleBtn > t{
            background-color:transparent;
            color: white;
            }*/

            .createCapsulePage.lighttext.transparent [data-role=header] * #nextButton,
            .createCapsulePage.lighttext.transparent [data-role=header] * #saveButtonIcon{
                color: white !important;
                background-color: transparent;
            }

            #player #subscribeButton, #player #unsubscribeButton{
                padding: var(--size-none);
                border:var(--border-0); 
            }
        }

        #songPoppupMenu-popup #songPoppupMenu > div > .ui-content,
        #songPoppupMenu-popup #songPoppupMenu > div > ul,
        #songPoppupMenu-popup #songPoppupMenu > div > #shareTrebblePopupContent {
            padding: var(--space-sm);
            margin: var(--space-sm);
            width:calc(var(--size-full) - var(--space-lg));
            box-sizing: border-box;
            max-width: var(--size-800);
        }

        body:not(.embedded) #songPoppupMenu-popup #songPoppupMenu > div > .ui-content,
        body:not(.embedded) #songPoppupMenu-popup #songPoppupMenu > div > ul,
        body:not(.embedded) #songPoppupMenu-popup #songPoppupMenu > div > #shareTrebblePopupContent {
            border: var(--border-4) solid white;
        }


        @media (min-width: 500px){




          [data-role=controlgroup].extensibleButtons {
              float: right;
              flex: 1 1 auto;
              margin: var(--size-none);
          }



          .extensibleBtn .extensibleLabel{
              font-size: var(--text-md-px);
              font-weight:normal;
          }

          [data-role=header] .extensibleBtn  .extensibleLabel,
          [data-role=footer] .extensibleBtn  .extensibleLabel,
          .playlistDetailsPage.publicPage #exploreTrebblesBtn{
              font-weight:bold;
              /*font-size: var(--text-lg-px);*/
          }

          [data-role=page].transparent [data-role=header] .extensibleBtn,
          [data-role=page].transparent div[data-role=header] * .ui-btn.extensibleBtn,
          [data-role=page].transparent [data-role=header] * #editButton.extensibleBtn,
          [data-role=page].transparent [data-role=header] * #menuOptionButton.extensibleBtn, 
          [data-role=page].transparent [data-role=header] * #filterButton.extensibleBtn, 
          [data-role=page].transparent [data-role=header] * #deleteButton.extensibleBtn, 
          [data-role=page].transparent [data-role=header] * #saveButtonIcon.extensibleBtn{
            width: auto !important;
            flex: 0 0 auto !important;
            -webkit-flex: 0 0 auto !important;
            -ms-flex: 0 0 auto !important;
            -moz-flex: 0 0 auto !important;
            align-items: center!important;
            -webkit-align-items: center!important;
            -ms-align-items: center!important;
            -moz-align-items: center!important;
            flex-direction: row!important;
            -moz-flex-direction: row!important;
            justify-content: center !important;
            -webkit-justify-content: center !important;
            -ms-justify-content: center !important;
            -moz-justify-content: center !important;
            display: flex;
            display: -webkit-flex;
            padding: var(--size-none) var(--space-xs) !important;
            border: var(--border-2) solid white !important;
            margin-right: 10px!important;
            margin-top: 10px!important;
            height: var(--size-40) !important;
            background-color: var(--text-dark);
            border-color: transparent;
        }

        .extensibleBtn:hover,
        .extensibleBtn:active,
        .extensibleBtn.ui-btn:hover,
        .extensibleBtn.ui-btn:active{
            background-color: var(--text-dark);
            border-color: transparent;
        }

        html body .ui-group-theme-c .ui-btn.disabled:hover{
            background-color: transparent;
        }

        .extensibleBtn.hint--left:before,
        .extensibleBtn.hint--left:after{
            display: none !important;
        }

        .extensibleBtn,
        div[data-role=header] * .ui-btn.extensibleBtn,
        [data-role=header] * #editButton.extensibleBtn,
        [data-role=header] * #menuOptionButton.extensibleBtn, 
        [data-role=header] * #filterButton.extensibleBtn, 
        [data-role=header] * #deleteButton.extensibleBtn, 
        [data-role=header] * #saveButtonIcon.extensibleBtn,
        [data-role=footer].extensibleButtons * .actionButton.extensibleBtn{
           width: auto !important;
           flex: 0 0 auto !important;
           -webkit-flex: 0 0 auto !important;
           -ms-flex: 0 0 auto !important;
           -moz-flex: 0 0 auto !important;
           align-items: center!important;
           -webkit-align-items: center!important;
           -ms-align-items: center!important;
           -moz-align-items: center!important;
           flex-direction: row!important;
           -moz-flex-direction: row!important;
           justify-content: center !important;
           -webkit-justify-content: center !important;
           -ms-justify-content: center !important;
           -moz-justify-content: center !important;
           display: flex;
           display: -webkit-flex;
           padding: var(--size-none) var(--space-sm) !important;
           height: var(--size-50);
           margin: var(--size-none);

       }
       .extensibleBtn  t,
       .extensibleBtn  i,
       .extensibleBtn  .iconWrapper {
          margin-left: var(--space-2xs);
          /*margin-right: var(--space-2xs);*/


      }


      .playlistDetailsPage #shareTrebbleBtn{
         background-color: var(--trebble-primary);
         margin: var(--border-4);
         height: var(--size-40);
         display: flex;
     }

     .journeyPage  [data-role=header] .ui-btn.extensibleBtn{
        margin: var(--border-4);
        height: var(--size-40); 
        padding: var(--size-none) !important;
    }



    #featurePage * .tag.actionButton > i.ion-ios7-arrow-thin-left,
    #GetStartedForCuratorsPage * .tag.actionButton > i.ion-ios7-arrow-thin-left,
    #createCapsuleInfoHeader  * .tag.actionButton > i.ion-ios7-arrow-thin-left {
      margin-right: var(--space-2xs);
      margin-left: var(--size-none); 
  }
}



[data-role=header] #shareTrebbleBtn, .journeyPage [data-role=header]  .highlight_button{
    animation: gradient-text 8s linear infinite;
    /*background: var(--trebble-accent);*/ /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to left, var(--trebble-accent) , var(--trebble-gradient-purple));*/ /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to left, var(--trebble-accent) , var(--trebble-gradient-purple));*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    padding: var(--size-none) !important;
    overflow: visible;
    background-size: 400% 300%;
    margin: var(--border-4);
    background-color: white;
    width: auto;
    border: var(--border-2) solid white;
    background-color: var(--text-dark);
}



#shareTrebbleBtn > span,
.journeyPage .highlight_button > span {
    padding: var(--size-none) var(--space-sm) var(--size-none) var(--space-sm);
    height: var(--size-full);
}

#shareTrebbleBtn > t,
.journeyPage .highlight_button > t{
    padding: var(--size-none) var(--space-sm) var(--size-none) var(--space-2xs);
    height: var(--size-full);
    margin: var(--size-none);
}
.playlistItem.withLargeAlbumArt #shareTrebbleBtn{
  mix-blend-mode: normal;
  background: transparent;
  color:white !important;
  border-color:transparent;
  
  
}

.playlistItem.withLargeAlbumArt .buttonBar{

    align-content: center;
    flex:  0 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.playlistItem.withLargeAlbumArt .buttonBar div.transparent_button,
.playlistItem.withLargeAlbumArt .buttonBar div.transparent_button:hover{
    width: -moz-fit-content;
    width: fit-content;
    text-align:center;
    margin: auto;
    /*min-width: 190px;*/
    font-weight: bold;
    padding: var(--size-none);
    text-transform: uppercase;

    justify-content: center;
    align-items: center;
    display: flex;

    overflow: hidden;
}
.playlistItem.withLargeAlbumArt .buttonBar  #buyNowBtn.loading > #loadingImg{
    margin: var(--size-none) var(--size-70);
}

.playlistItem.withLargeAlbumArt .buttonBar div.transparent_button#followingBtn,
.playlistItem.withLargeAlbumArt .buttonBar div.transparent_button#purchasedBtn,
.playlistItem.withLargeAlbumArt .buttonBar div.transparent_button#followingBtn:hover,
.playlistItem.withLargeAlbumArt .buttonBar div.transparent_button#purchasedBtn:hover{
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-100);
    color: var(--text-dark);
}
.playlistItem.withLargeAlbumArt .buttonBar div.transparent_button > span{
    display: flex;
    padding: var(--size-none) var(--space-lg);
    align-items: center;
    justify-content: center;
    height: var(--size-full);
}

.playlistItem.withLargeAlbumArt .buttonBar div.transparent_button#buyNowBtn div.button_content{
 padding: 0 var(--space-lg);
}

.playlistItem.withLargeAlbumArt .buttonBar #followBtn,
.playlistItem.withLargeAlbumArt .buttonBar #buyNowBtn{
    /*background-color: var(--trebble-primary);*/
    background-color: transparent;
    border-color: var(--trebble-primary);
    /*color: white;*/
    color: var(--trebble-primary);
    font-weight: bold;
    border-color: var(--trebble-primary-100);
}
.playlistItem.withLargeAlbumArt .buttonBar .followBtnLabel,
.playlistItem.withLargeAlbumArt .buttonBar .button_content{
    /*background-color: var(--trebble-primary);
    color: white;*/
    color: var(--trebble-primary);
    background-color: var(--trebble-primary-100);
}

.playlistItem.withLargeAlbumArt .buttonBar .followingBtnLabel,
.playlistItem.withLargeAlbumArt .buttonBar .purchasedBtnLabel{
    /*background-color: var(--trebble-primary);
    color: white;*/
    background-color: var(--color-gray-100);
    color: var(--text-dark);

}

body.mobileweb  .playlistItem.withLargeAlbumArt .buttonBar #followBtn:hover,
.playlistItem.withLargeAlbumArt .buttonBar #followBtn:active,
body.mobileweb  .playlistItem.withLargeAlbumArt .buttonBar #buyNowBtn:hover,
.playlistItem.withLargeAlbumArt .buttonBar #buyNowBtn:active{
    background-color: transparent;
}
body.mobileweb .playlistItem.withLargeAlbumArt .buttonBar #followBtn.transparent_button > span:hover,
.playlistItem.withLargeAlbumArt .buttonBar #followBtn.transparent_button > span:active,
body.mobileweb .playlistItem.withLargeAlbumArt .buttonBar #buyNowBtn.transparent_button > .button_content:hover,
.playlistItem.withLargeAlbumArt .buttonBar #buyNowBtn.transparent_button > button_content:active{
   background-color: transparent;
   border-color: var(--trebble-primary);
   color: var(--trebble-primary) !important;

}

body.mobileweb .playlistItem.withLargeAlbumArt .buttonBar #followingBtn.transparent_button:hover,
body.mobileweb .playlistItem.withLargeAlbumArt .buttonBar #purchasedBtn.transparent_button:hover,
.playlistItem.withLargeAlbumArt .buttonBar #followingBtn.transparent_button:active,
.playlistItem.withLargeAlbumArt .buttonBar #purchasedBtn.transparent_button:active{
 /*background-color: var(--trebble-primary);
 border-color: var(--trebble-primary);
 color: white !important;*/
 font-weight: bold;
 color: var(--trebble-primary) !important;
 background-color: var(--trebble-primary-100);
 border-color: var(--trebble-primary-100);

}

.journeyPage .subscribe_tooltip,
.playlistDetailsPage .subscribe_tooltip{
    right: calc(var(--size-half) - var(--size-100));
    background: var(--trebble-accent);
    color: var(--text-light);
    width: var(--size-200);
}
.journeyPage [data-role=header] .subscribe_tooltip, .playlistDetailsPage [data-role=header] .subscribe_tooltip{
    right: 10px;
    width: var(--size-200);
}

.journeyPage .subscribe_tooltip:after,
.playlistDetailsPage .subscribe_tooltip:after{
    border-color: transparent transparent var(--trebble-accent);
}


.playlistItem.withLargeAlbumArt .buttonBar .subscribe_tooltip.center_arrow{
    right: calc(var(--size-half) - 125px);
}
.playlistItem.withLargeAlbumArt:not(.isCurrentlyPlaying) .buttonBar .subscribe_tooltip.center_arrow,
[data-role=page].do_not_show_subscribe_tooltip .subscribe_tooltip{
    display: none !important;
}


body.white-theme.browser.mobileweb .playlistItem.withLargeAlbumArt #shareTrebbleBtn:hover,
.playlistItem.withLargeAlbumArt #shareTrebbleBtn:active{
   background: var(--trebble-primary);
   border-color:transparent;
}
.playlistItem.withLargeAlbumArt #shareTrebbleBtn  > t{
    background: transparent;
    color:white !important;
    padding: var(--size-none);
}


.drop-element.drop-theme-arrows-dark .drop-content {
    transition: opacity cubic-bezier(0,0,.3,1) .25s,transform cubic-bezier(0,0,.3,1) .25s;

}

.feature.infoBoxWrapper > .content > p > .iconWrapper{
    height: 159px;
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    -moz-flex-line-pack: center;
    align-content: center;
    -webkit-align-content: center;


}

.capsuleSendIntroMessage .userCoverArtWrapper{
    padding: var(--space-sm);
}


.capsuleSendIntroMessage .userCoverArtWrapper #userProfileImage{
    height: var(--size-100);
    margin: auto;
    width: var(--size-100);
}

@media (min-width: 800px){
    .capsuleSendIntroMessage .userCoverArtWrapper #userProfileImage{
        height: var(--size-160);
        margin: auto;
        width: var(--size-160);
    }
}

body.browser.mobileweb [data-role=page] .infoBoxWrapper.capsuleSendIntroMessage > .content > .actionButtonWrapper {
    max-width: var(--size-200);
}

body.browser.mobileweb [data-role=page] .infoBoxWrapper.capsuleSendIntroMessage > .content > .actionButtonWrapper > a.actionButton:hover,
body.browser.mobileweb [data-role=page] .infoBoxWrapper.capsuleSendIntroMessage > .content > .actionButtonWrapper > a.actionButton:active{
 border: var(--border-2) solid white; 
 color: white;
 background-color: transparent;
 font-weight: bold;
}

@media (max-width: 450px) {
    #mylibrary [role=tablist] > li,
    #mySubscriptions [role=tablist] > li ,
    #myJourneys [role=tablist] > li {
      width: var(--size-half);
  }

  #mylibrary #capsuleList  [role=tablist] > li {
    width: var(--size-quarter);
}
}

.darkscreen{

    width: var(--size-full);
    position: absolute;
    top: 0px;
    height: var(--size-full);
    background-color: black;
    opacity: 0.3;
}

.userProfileDetailsPage #shareUserCmailUrlBtn,
.userProfileDetailsPage #sendCmailToUserBtn{
    position: absolute;
    top:60px;
    right:0px;
    margin: var(--size-none) var(--space-2xs);
    z-index: 1;
}

.feature.infoBoxWrapper.center.capsuleSendIntroMessage > .content > .message,
.feature.infoBoxWrapper.center.capsuleSendIntroMessage > .content > .helpMessage{
  color:white;
}


[data-role=page] > .featuresCarousel, #NewLoginPage, #newSignupPage, #onboardingSignupPage,#trebbleSetup,#journeyCreation{
    position: fixed !important;
}
/*
.playlistDetailsPage > .ui-content{
    position: fixed !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;


    }*/

    #globalSearch > .ui-panel-wrapper{
        position: fixed !important;
        overflow: auto;
    }

    [data-role=page] > .ui-content,
    [data-role=page] > #contentWrapper,
    [data-role=popup] > .popupContent,
    [data-role=page] > .ui-panel-wrapper{

       height: calc(var(--size-full) - var(--size-icon-lg));
       position: fixed !important;
       overflow: auto;
       -webkit-overflow-scrolling: touch;
       width: var(--size-full);
   }

   /* Ipod Touc Media query */
   @media only screen and (min-width: 240px) and (max-width: 320px)  {


      body {
        font-size: var(--text-sm)! important;
        line-height: 1.2 ! important;
    }


    body.browser > .artistDetailsPage.full * div#fullCoverArtImage,
    body.browser > .artistDetailsPage * div#fullCoverArtImage {
      /* background-position: inherit; */
      background-size: cover;
      width: var(--size-240);
      height: var(--size-240);
      border-radius: 50%;
      left: calc(var(--size-half) - var(--text-9xl-px));
  }

}
[data-role=page].createCapsulePage #textToConvertField::-webkit-input-placeholder,
[data-role=page].createCapsulePage #textToConvertByVoiceActorField::-webkit-input-placeholder,
[data-role=page].createCapsulePage #instructionsForVoiceActorField::-webkit-input-placeholder,
[data-role=page].createCapsulePage #titleField::-webkit-input-placeholder,
[data-role=page].createCapsulePage #comment::-webkit-input-placeholder{
    color: white;
}

body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) #textToConvertField::-webkit-input-placeholder,
body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) #textToConvertByVoiceActorField::-webkit-input-placeholder,
body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) #instructionsForVoiceActorField::-webkit-input-placeholder,
body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) #titleField::-webkit-input-placeholder,
body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) #comment::-webkit-input-placeholder,
body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) .capsuleCreationWrapper #noteSection .note_field_wrapper textarea::-webkit-input-placeholder{
    color: var(--color-gray-800);
}

body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) #textToConvertField,
body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) #textToConvertByVoiceActorField,
body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) #instructionsForVoiceActorField,
body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) #titleField,
body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) #comment,
body:not(.darkTheme) [data-role=page].createCapsulePage.ui-page:not(.lighttext) .capsuleCreationWrapper #noteSection .note_field_wrapper textarea{
    color: var(--text-dark);
    background-color: white;
}

[data-role=page].createCapsulePage[creationMode=fromFile],
[data-role=page].createCapsulePage[creationMode=fromText],
[data-role=page].createCapsulePage[creationMode=fromTranscript],
[data-role=page].createCapsulePage[creationMode=fromVoiceActor]{
    background: none;
    background-color: var(--color-black) !important;
}
[data-role=page].createCapsulePage{
   transition: background-image .3s ease-in;
}
body:not(.darkTheme) [data-role=page].createCapsulePage:not(.lighttext) .ui-content{
    background-color: var(--bg-light);
}

body:not(.darkTheme) [data-role=page].createCapsulePage:not(.lighttext){
    background-color: var(--bg-light);
    padding-top: var(--size-icon-lg) !important;
}

[data-role=page].createCapsulePage[creationMode=fromRecording].lighttext{
    /*background: -webkit-linear-gradient(-45deg, #fc466b, var(--trebble-blue)) var(--color-black);background: linear-gradient(-45deg, #fc466b, var(--trebble-blue)) var(--color-black);*/
    background-color: var(--color-black) !important;
    height: var(--size-full);
}
body:not(.darkTheme) [data-role=page].createCapsulePage:not(.lighttext){
    background-color: var(--bg-light) !important;
}

.playlistDetailsPage #startRadioBtn.notplayable,
.playlistDetailsPage #startRadioBtn.notplayable:hover,
.playlistDetailsPage #startRadioBtn.notplayable:active,
.playlistDetailsPage .actionButtonWrapper.actionButton.trebble_disabled,
.playlistDetailsPage .actionButtonWrapper.actionButton.trebble_disabled:hover,
.playlistDetailsPage .actionButtonWrapper.actionButton.trebble_disabled:active {
    opacity:0.3;
    cursor:initial;
    background-color: var(--trebble-primary);
    border-color: var(--trebble-primary);
    border: var(--border-2) solid var(--trebble-primary);
    color: white;
}

.playlistDetailsPage #startRadioBtn.notplayable,
.playlistDetailsPage #startRadioBtn.notplayable:hover,
.playlistDetailsPage #startRadioBtn.notplayable:active{
  background-color: transparent;
  border-color: white;
}

.journeyPage.editable .journey_summary_detail .jouney_summary_detail_item.goal_info,
.playlistDetailsPage #pageHeaderTitleWrapper > .editable,
.playlistDetailsPage .playlistDescription.editable,
.userProfileDetailsPage  #pageHeaderTitleWrapper > .editable{
  cursor: pointer;
  overflow: visible;
}

.playlistDetailsPage .trebbleInfo .playlistDescription{
    max-width: var(--size-400);
    margin: auto;
}

.playlistDetailsPage .description_box_wrapper .playlistDescription{
    max-width: var(--size-900);
    margin: auto;
    padding: var(--space-2xs) var(--space-lg) var(--space-lg) var(--space-lg);
    box-sizing: border-box;
}


.journeyPage.editable .journey_summary_detail .jouney_summary_detail_item.goal_info:hover,
.playlistDetailsPage #pageHeaderTitleWrapper > .editable:hover,
.playlistDetailsPage .playlistDescription.editable:hover,
.playlistDetailsPage #pageHeaderTitleWrapper > .editable:active,
.playlistDetailsPage .playlistDescription.editable:active,
.userProfileDetailsPage #pageHeaderTitleWrapper > .editable:hover,
.userProfileDetailsPage #pageHeaderTitleWrapper > .editable:active {
   color: var(--color-white-70);
}

.journeyPage.editable .actionButtonWrapper.floatingBtn,
.journeyPage.playlistDetailsPage:not(.isCurrentlyPlaying):not(.isCurrentlyLoading):not(.publicPage) #startRadioBtn,
.journeyPage.playlistDetailsPage:not(.isCurrentlyPlaying):not(.isCurrentlyLoading):not(.publicPage) #loadingRadioBtn,
.journeyPage.playlistDetailsPage:not(.isCurrentlyPlaying):not(.isCurrentlyLoading):not(.publicPage) #pauseRadioBtn,
.journeyPage.playlistDetailsPage.publicPage:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) #fullCoverArtImage #playbTrebbletn{
    display: none;
}

.journeyPage #albumList{
    margin-bottom: var(--size-70);
}


textarea.materialize-textarea.invalid+label{
    width: var(--size-full);
}

textarea.materialize-textarea.invalid+label::after{
    top: calc(var(--size-full) - var(--space-xs));
}

.playlistDescription > div{
    overflow: hidden;
    text-overflow: ellipsis;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: var(--text-sm-px);
    /*-webkit-line-clamp: 3;*/

}

.playlistDetailsPage .bioWrapper .owl-wrapper-outer{
    /*overflow: visible;*/
}

body.footerplayerdisplayed .albumDetailsPage  #albumList #albumSongListWrapper,
body.footerplayerdisplayed  #artistProfileWrapper,
body.footerplayerdisplayed .userProfileDetailsPage #userOverviewInfoWrapper,
body.footerplayerdisplayed .playlistDetailsPage #myCapsulesListWrapper,
body.footerplayerdisplayed .playlistDetailsPage #myArchivedCapsulesListWrapper,
body.footerplayerdisplayed .playlistDetailsPage #songListWrapper{
    margin-bottom: var(--space-xl);
}

body.white-theme .ui-page-theme-a.userProfileDetailsPage .ui-panel-wrapper{
    background-color: var(--color-black);
}

.userProfileDetailsPage .ui-panel-wrapper{
    overflow: hidden;
}

.playlistDetailsPage #trebblewarning{

    /*height: var(--size-50);
    background-color: var(--trebble-accent);*/
    background-color: var(--color-black-20);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    margin-top: var(--space-xl);
    display:none;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    -moz-flex-line-pack: center;
    align-content: center;
    -webkit-align-content: center;

}

@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
    .playlistDetailsPage #trebblewarning{
        background-color: var(--trebble-accent);
    }
}

.playlistDetailsPage #trebblewarning.show{
 display: -moz-flexbox;
 display: flex;
 display: -moz-flex;
 width: var(--size-full);
 position: fixed;
 z-index: 1000;
}


.playlistDetailsPage:not(.publicPage) #trebblewarning.show  ~ #contentWrapper{
 margin-top: var(--space-xl);
 height: calc( var(--size-full) - var(--space-xl)) !important;
}

.playlistDetailsPage #trebblewarning > #messageicon{
    color: white;
    font-size: var(--text-3xl-px);
    width: var(--size-50);
    height: var(--size-50);
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    -moz-flex-line-pack: center;
    align-content: center;
    -webkit-align-content: center;
}

.playlistDetailsPage #trebblewarning > #message{

    color: white;
    flex: 1 1 auto;
    font-weight: bold;
    padding: var(--space-2xs);
    overflow: hidden;

}

#whatsacapsuleinfobtn{
  border: var(--border-3) solid white;
  padding: var(--space-2xs);
  margin-right: var(--space-2xs);
  color:white;
  cursor:pointer;
  flex: 0 0 auto;
  display: -moz-flexbox;
  display: flex;
  display: -moz-flex;
}
#whatsacapsuleinfobtn > span{
  margin: var(--size-none) var(--space-2xs);
}

#whatsacapsuleinfobtn:hover,
#whatsacapsuleinfobtn:active{
  background-color:white;
  color:var(--trebble-accent);
}

@media( max-width: 580px) , (max-height: 580px)  and (orientation: landscape){
  #whatsacapsuleinfobtn{
    display: none; 
}
.playlistDetailsPage #trebblewarning > #message{
    font-size: var(--text-sm);
}
}
/*
.playlistDetailsPage{
  height: var(--size-full);
  }*/
  #nointernetconnectionindicator{

    position: absolute;
    z-index: 1000;
    background-color: var(--color-red-600);
    width: var(--size-full);
    color: white;
    text-align: center;
    padding: var(--border-2);
    font-size: var(--text-xs-px);
    font-weight: bold;
    height: var(--size-24);
    box-sizing: border-box;

}
#nointernetconnectionindicator ~ [data-role=page].ui-page-active ,
body[display_transcription_minutes_left_warning="true"][istemporaryuser="false"]:not([userprofiletype="listener"]) #warning_for_free_transcription_minutes_left ~ [data-role=page].ui-page-active,
#nointernetconnectionindicator ~ [data-role=page].ui-page-active > div.ui-header[data-role=header],
body[display_transcription_minutes_left_warning="true"][istemporaryuser="false"]:not([userprofiletype="listener"]) #warning_for_free_transcription_minutes_left ~ [data-role=page].ui-page-active > div.ui-header[data-role=header]{
    margin-top: var(--text-xl-px);
}

/*#nointernetconnectionindicator ~  .playlistDetailsPage #trebblewarning,
body[display_transcription_minutes_left_warning="true"][istemporaryuser="false"]:not([userprofiletype="listener"]) #warning_for_free_transcription_minutes_left ~  .playlistDetailsPage #trebblewarning,*/
#nointernetconnectionindicator ~   .playlistDetailsPage:not(.publicPage) #trebblewarning.show ~ #contentWrapper,
body[display_transcription_minutes_left_warning="true"][istemporaryuser="false"]:not([userprofiletype="listener"]) #warning_for_free_transcription_minutes_left ~  .playlistDetailsPage:not(.publicPage) #trebblewarning.show ~ #contentWrapper{
    margin-top: 84px;
    height: calc(var(--size-full) - 84px)!important;
}
#warning_for_free_transcription_minutes_left,
.warning_header_message{
    display: none;
}

body[display_transcription_minutes_left_warning="true"][istemporaryuser="false"]:not([userprofiletype="listener"]) #warning_for_free_transcription_minutes_left,
.audio_sequencer[show_switch_to_chrome_warning="true"] .warning_header_message{
    position: absolute;
    z-index: 1000;
    background: var(--trebble-accent-complentary);
    width: var(--size-full);
    color: white;
    text-align: center;
    padding: var(--border-2);
    font-weight: bold;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    background-size: 200% 200%;
    animation: gradientanimation 30s ease infinite;
    height: var(--size-24);
    box-sizing: border-box;
}
.audio_sequencer[show_switch_to_chrome_warning="true"] #warning_trebble_works_best_in_other_browsers.warning_header_message{
    position: relative;
    display: block;
    background: var(--warning-90);
    height: -moz-fit-content;
    height: fit-content;
}

#warning_for_free_transcription_minutes_left label,
.warning_header_message label{
    color:  white;
    margin: var(--size-none);
    font-size: var(--text-xs-px);
}
[data-role=page].transparent .warning_header_message label,
[data-role=page].transparent .warning_header_message a.action_link,
.warning_header_message label,
.warning_header_message  .warning_message{
    color: var(--color-black);
    font-size: 90%;
}


#warning_for_free_transcription_minutes_left .upgrade_message_link,
.warning_header_message .action_link{
 text-decoration: underline;
 margin-left: var(--border-4);
 cursor: pointer;
}
#warning_for_free_transcription_minutes_left .warning_message,
#warning_for_free_transcription_minutes_left .upgrade_message_link,
.warning_header_message .warning_message,
.warning_header_message .action_link{
    display: inline-flex;
}
.warning_header_message a.action_link{
    padding: var(--size-none);
}

#warning_for_free_transcription_minutes_left:not([show_link_to_upgrade=true]) .upgrade_message_link,
.warning_header_message:not([show_action_link=true]) .action_link{
    display: none;
}

.trebbleAudioPreviewLoader {
  height: var(--size-2);
  width: var(--size-full);
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-150);
}

.playlistItem.transparent .trebbleAudioPreviewLoader,
body.darkTheme .playlistItem .trebbleAudioPreviewLoader,
[data-role=page].darkTheme .playlistItem .trebbleAudioPreviewLoader{
    background-color: var(--color-white-40);
}
.trebbleAudioPreviewLoader:before{
  display: block;
  position: absolute;
  content: "";
  left: 0px;
  width: var(--size-0);
  height: var(--size-2);
  background-color:var(--trebble-primary);
  
}
.playlistItem.transparent .trebbleAudioPreviewLoader:before,
body.darkTheme .playlistItem .trebbleAudioPreviewLoader:before,
[data-role=page].darkTheme .playlistItem .trebbleAudioPreviewLoader:before{
    background-color:white;
}
.playlistItem  .trebbleAudioPreviewLoaderWrapper{
    display: none;
}
.playlistItem.previewLoading  .trebbleAudioPreviewLoaderWrapper {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: var(--size-2);
    width: var(--size-full);

}
.playlistItem.previewLoading  .trebbleAudioPreviewLoaderWrapper > .trebbleAudioPreviewLoader:before{
    animation: audioPreviewLoading 2s linear 1;
}

@keyframes audioPreviewLoading {
    from {width: 0%;}
    to {width: var(--size-full);}
}


.trebbleBarLoader {
  height: var(--size-4);
  width: var(--size-full);
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-150);
}
.trebbleBarLoader:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: var(--size-200);
  height: var(--size-4);
  background-color: var(--trebble-primary);
  animation: trebbleBarLoadingAnim 2s linear infinite;
}

@keyframes trebbleBarLoadingAnim {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}


.playlistDetailsPage:not(.editable).showCapsulesOnly #songListWrapper{
    display: none !important;
}
.playlistDetailsPage:not(.editable).showCapsulesOnly #myCapsulesListWrapper,
.playlistDetailsPage:not(.editable).showCapsulesOnly #myArchivedCapsulesListWrapper{
 display: flex !important;
 display: -webkit-flex !important;
}

.playlistDetailsPage:not(.editable).showSongsOnly #myCapsulesListWrapper,
.playlistDetailsPage:not(.editable).showSongsOnly #myArchivedCapsulesListWrapper{
    display: none !important;
}

.playlistDetailsPage:not(.editable).songOrCapsuleLoading #myCapsulesListWrapper,
.playlistDetailsPage:not(.editable).songOrCapsuleLoading #myArchivedCapsulesListWrapper,
.playlistDetailsPage:not(.editable).songOrCapsuleLoading #songListWrapper{
    display: none !important;
}

.playlistDetailsPage:not(.editable).showSongsOnly #songListWrapper{
 display: flex !important;
 display: -webkit-flex !important;
}

.playlistDetailsPage:not(.editable) #dataLoadingBlock{
    width: var(--size-full);
    height: calc(var(--size-full) - var(--space-xl) - var(--space-xl));
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    -webkit-justify-content: center;
    -webkit-align-items: flex-start;
    -ms-justify-content: center;
    -ms-align-items: flex-start;
}
.playlistDetailsPage.editable #dataLoadingBlock,
.playlistDetailsPage:not(.editable).showSongsOnly #dataLoadingBlock,
.playlistDetailsPage:not(.editable).showCapsulesOnly #dataLoadingBlock{

    display: none !important;
}


body.white-theme div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a,
body.white-theme div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar]{
  background-color: var(--bg-light);
  border-color: var(--bg-light);
  box-shadow: var(--shadow-none);
}

body.white-theme div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a,
body.white-theme  div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a{
  color:var(--text-dark);
}

body.white-theme div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a.ui-btn-active,
body.white-theme div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a.ui-btn-active{
  color:var(--trebble-primary);
  border-color: var(--trebble-primary);
}
#mySubscriptions  #playMyFeedButton,
#mySubscriptions #pauseMyFeedButton,
#mySubscriptions  #loadingMyFeedButton,
#mySubscriptions[play_button_in_on_your_feed_today_box_displayed=true] #playMyFeedFloatingBtnWrapper,
.listening_to_player_events  #playMyFeedButton,
.listening_to_player_events #pauseMyFeedButton,
.listening_to_player_events  #loadingMyFeedButton,
.listening_to_player_events[play_button_in_on_your_feed_today_box_displayed=true] #playMyFeedFloatingBtnWrapper,
div[data-role=page]:not(.editMode):not(.savingMode) div[data-role=header] .editPageTitle,
div[data-role=page].editMode div[data-role=header] .defaultPageTitle,
div[data-role=page].savingMode div[data-role=header] .defaultPageTitle,
div[data-role=page].editMode div[data-role=header] #homeHeaderButton,
div[data-role=page].savingMode div[data-role=header] #homeHeaderButton,
div[data-role=page]:not(.editMode) #cancelChangeButton,
div[data-role=page]:not(.savingMode) #savingChangesLabel,
div[data-role=page]:not(.editMode) #saveChangeButton,
div[data-role=page]:not(.editMode):not(.savingMode):not(.alwaysInEditMode) .changeSubscriptionOrderInstructionBox,
div[data-role=page].editMode #playMyFeedButton,
div[data-role=page].editMode .listeningInstructionWrapper,
div[data-role=page].editMode #changeOrderButton,
div[data-role=page].editMode #addTrebbleToSubscriptionsBtn,
div[data-role=page].editMode #homeHeaderButton,
div[data-role=page].editMode .listenOnVoiceEnabledDeviceBoxWrapper,
div[data-role=page].editMode .showUserRefferalPageBoxWrapper,
div[data-role=page].editMode .upgradeToTrebblePaidSubscriptionBoxWrapper,
div[data-role=page].editMode #playMyFeedFloatingBtnWrapper,
div[data-role=page].editMode #play_feed_btn,
div[data-role=page].editMode #onYourFeedTodayBoxWrapper,
div[data-role=page].savingMode .listenOnVoiceEnabledDeviceBoxWrapper,
div[data-role=page].savingMode .showUserRefferalPageBoxWrapper,
div[data-role=page].savingMode .upgradeToTrebblePaidSubscriptionBoxWrapper,
div[data-role=page].savingMode #playMyFeedFloatingBtnWrapper,
div[data-role=page].savingMode #play_feed_btn,
div[data-role=page].savingMode #onYourFeedTodayBoxWrapper,
div[data-role=page].savingMode #homeHeaderButton,
div[data-role=page].savingMode .listeningInstructionWrapper,
div[data-role=page].editMode .addShortcutToPlayCapsuleFeedSuggestionBoxWrapper,
div[data-role=page].savingMode .addShortcutToPlayCapsuleFeedSuggestionBoxWrapper,
div[data-role=page].editMode .enableDisableDailyNotificationBox,
div[data-role=page].savingMode .enableDisableDailyNotificationBox,
div[data-role=page].editMode .shortcutPhraseToPlayCapsuleFeedBoxWrapper,
div[data-role=page].savingMode .shortcutPhraseToPlayCapsuleFeedBoxWrapper,
div[data-role=page].savingMode #playMyFeedButton,
div[data-role=page].alwaysInEditMode #changeOrderButton,
div[data-role=page].savingMode #changeOrderButton,
div[data-role=page].savingMode #addTrebbleToSubscriptionsBtn{
    display: none !important;
}

#subscriptionList{
    height: calc(var(--vh-full) - var(--size-icon-lg));
    box-sizing: border-box;
}

body.footerplayerdisplayed #subscriptionList{
    height: calc(var(--vh-full) - var(--text-9xl-px));
    box-sizing: border-box;
}


div[data-role=page].savingMode #savingChangesLabel,
div[data-role=page].editMode #cancelChangeButton,
div[data-role=page].editMode #saveChangeButton{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--size-none);
    padding: var(--size-none) var(--space-xs);
}

[data-role=page].no_subscription #changeOrderButton,
[data-role=page] .listeningInstructionWrapper,
[data-role=page].loading_subscriptions .listeningInstructionWrapper,
[data-role=page].no_subscription .listeningInstructionWrapper,
[data-role=page].loading_subscriptions .addShortcutToPlayCapsuleFeedSuggestionBoxWrapper,
[data-role=page].no_subscription .addShortcutToPlayCapsuleFeedSuggestionBoxWrapper,
[data-role=page].loading_subscriptions .enableDisableDailyNotificationBox,
[data-role=page].no_subscription .enableDisableDailyNotificationBox,
[data-role=page].loading_subscriptions .shortcutPhraseToPlayCapsuleFeedBoxWrapper,
[data-role=page].no_subscription .shortcutPhraseToPlayCapsuleFeedBoxWrapper,
[data-role=page].no_subscription .addToSiriBtn.fixed,
[data-role=page].loading_subscriptions .addToSiriBtn.fixed,
[data-role=page].no_subscription .listenOnVoiceEnabledDeviceBoxWrapper,
[data-role=page].loading_subscriptions .showUserRefferalPageBoxWrapper,
[data-role=page].loading_subscriptions .upgradeToTrebblePaidSubscriptionBoxWrapper,
[data-role=page].no_subscription .listenOnVoiceEnabledDeviceBoxWrapper,
[data-role=page].loading_subscriptions .showUserRefferalPageBoxWrapper,
[data-role=page].loading_subscriptions .upgradeToTrebblePaidSubscriptionBoxWrapper,
[data-role=page].no_subscription #onYourFeedTodayBoxWrapper,
[data-role=page].loading_subscriptions #onYourFeedTodayBoxWrapper,
[data-role=page].no_subscription .upgradeToTrebblePaidSubscriptionBoxWrapper,
[data-role=page].loading_subscriptions .upgradeToTrebblePaidSubscriptionBoxWrapper{
    display: none;
}


body.white-theme div[data-role=page]:not(.lighttext):not(#featurePage):not(#ExplorePage):not(#Onboarding):not(#home)  div.ui-header[data-role=header],
body.white-theme #myLibraryHeader,
body.white-theme #mySubscriptionsHeader,
body.white-theme #myShortcatsHeader,
body.white-theme  #globalSearchPageHeader{
  background-color: var(--bg-light);
  border-color: var(--bg-light);
  color:var(--text-dark);
}

body.white-theme.browser div[data-role=page]:not(.lighttext):not(#FeedAndActivityPage):not(#featurePage)/*:not(#mylibrary)*/:not(#ExplorePage):not(#Onboarding):not(#player):not(#audioEditorDemoPage):not(#audioEditorDemoPage):not(.createCapsulePage)  div.ui-header[data-role=header]{
    box-shadow: var(--shadow-right-lg);
}

body.white-theme #globalSearch * .ui-content{
  box-shadow: var(--shadow-none) !important;
}
body.darkTheme #pageHeaderTitleWrapper,
[data-role=page].darkTheme #pageHeaderTitleWrapper,
body.darkTheme   #homeHeaderButton,
body.darkTheme   [data-role=header] .ui-btn,
body  [data-role=page].darkTheme #homeHeaderButton,
body  [data-role=page].darkTheme [data-role=header] .ui-btn,
body.white-theme  #ExplorePage:not([showListView=true]) #homeHeaderButton,
body.white-theme  #ExplorePage:not([showListView=true]) [data-role=header] .ui-btn,
body.white-theme  #Onboarding:not([showListView=true]) #homeHeaderButton,
body.white-theme  #Onboarding:not([showListView=true]) [data-role=header] .ui-btn{
    color: white;
}

body.darkTheme .addShortcutToPlayCapsuleFeedSuggestionBoxWrapper,
body.darkTheme .listenOnVoiceEnabledDeviceBoxWrapper,
body.darkTheme .showUserRefferalPageBoxWrapper,
body.darkTheme .upgradeToTrebblePaidSubscriptionBoxWrapper,
body.darkTheme .shortcutPhraseToPlayCapsuleFeedBoxWrapper,
body.darkTheme .changeSubscriptionOrderInstructionBox,
body.darkTheme .listeningInstructionWrapper{
    background-color: var(--color-white-20);
}

body.darkTheme #mySubscriptions .playlistItem.withLargeAlbumArt.smallcardsize:before,
body.darkTheme #myJourneys .playlistItem.withLargeAlbumArt.smallcardsize:before{
    background-color: var(--color-gray-850);
    color:  var(--trebble-primary);
}

body.darkTheme .settingSection .settingItemTitle,
body.darkTheme .settingSection .settingItemTitle .itemTitle{
    color: white;
}

#Onboarding #pageHeaderTitleWrapper{
    padding-left: var(--size-icon-lg) !important;
    width: var(--size-full);
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.white-theme #mylibrary > div[data-role=header] * .ui-btn, 
body.white-theme #mySubscriptions > div[data-role=header] * .ui-btn, 
body.white-theme #myJourneys > div[data-role=header] * .ui-btn, 
body.white-theme #home > div[data-role=header] * .ui-btn,
html body.white-theme .ui-page-theme-c div[data-role=header] * .ui-btn,
body.white-theme #globalSearch > div[data-role=header] * .ui-btn{
  color:var(--text-dark);
}

body.white-theme #home[state=no_new_content] > div[data-role=header] * .ui-btn,
body.white-theme #home[state=error] > div[data-role=header] * .ui-btn{
    color: white;
}

body.white-theme.darkTheme #mylibrary > div[data-role=header] * .ui-btn, 
body.white-theme.darkTheme #mySubscriptions > div[data-role=header] * .ui-btn, 
body.white-theme.darkTheme #myJourneys > div[data-role=header] * .ui-btn, 
body.white-theme.darkTheme #home > div[data-role=header] * .ui-btn,
html body.white-theme.darkTheme .ui-page-theme-c div[data-role=header] * .ui-btn,
body.white-theme.darkTheme #globalSearch > div[data-role=header] * .ui-btn,
html body.white-theme .ui-page-theme-c.darkTheme div[data-role=header] * .ui-btn{
  color: white;
}

body.white-theme.mobileweb #mylibrary > div[data-role=header] * .ui-btn:hover, 
body.white-theme.mobileweb #mySubscriptions > div[data-role=header] * .ui-btn:hover, 
body.white-theme.mobileweb #myJourneys > div[data-role=header] * .ui-btn:hover, 
body.white-theme.mobileweb #home > div[data-role=header] * .ui-btn:hover,
html body.white-theme.mobileweb .ui-page-theme-c div[data-role=header] * .ui-btn:hover,
body.white-theme.mobileweb #globalSearch > div[data-role=header] * .ui-btn:hover,
body.white-theme.mobileweb div[data-role=page]:not(.lighttext):not(#player) #header-back-button:hover,
body.white-theme.mobileweb div[data-role=page]:not(.lighttext):not(#player) #header-queue-button:hover,
body.white-theme.mobileweb div[data-role=page]:not(.lighttext) [data-role=header] * #editButton:hover,
body.white-theme.mobileweb div[data-role=page]:not(.lighttext):not(#player) [data-role=header] * #menuOptionButton:hover,
body.white-theme.mobileweb div[data-role=page]:not(.lighttext)  [data-role=header] * #filterButton:hover,
body.white-theme.mobileweb div[data-role=page]:not(.lighttext)   [data-role=header] * #deleteButton:hover,
body.white-theme.mobileweb div[data-role=page]:not(.lighttext)    [data-role=header] * #saveButtonIcon:hover,
body.white-theme.mobileweb div[data-role=page]:not(.lighttext)     [data-role=header] * #showRecordSectionButton.tag.actionButton:hover,
body.white-theme.mobileweb div[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton:hover,
body.white-theme.mobileweb div[data-role=page]:not(.lighttext)      [data-role=header] * #showUploadSectionButton.tag.actionButton:hover,
body.white-theme #mylibrary > div[data-role=header] * .ui-btn:active,
body.white-theme #mySubscriptions > div[data-role=header] * .ui-btn:active,
body.white-theme #myJourneys > div[data-role=header] * .ui-btn:active,
body.white-theme #home > div[data-role=header] * .ui-btn:active,
html body.white-theme .ui-page-theme-c div[data-role=header] * .ui-btn:active,
body.white-theme #globalSearch > div[data-role=header] * .ui-btn:active,
body.white-theme div[data-role=page]:not(.lighttext):not(#player) #header-back-button:active,
body.white-theme div[data-role=page]:not(.lighttext):not(#player) #header-queue-button:active,
body.white-theme div[data-role=page]:not(.lighttext) [data-role=header] * #editButton:active,
body.white-theme div[data-role=page]:not(.lighttext):not(#player) [data-role=header] * #menuOptionButton:active,
body.white-theme div[data-role=page]:not(.lighttext)  [data-role=header] * #filterButton:active,
body.white-theme div[data-role=page]:not(.lighttext)   [data-role=header] * #deleteButton:active,
body.white-theme div[data-role=page]:not(.lighttext)    [data-role=header] * #saveButtonIcon:active,
body.white-theme div[data-role=page]:not(.lighttext)     [data-role=header] * #showRecordSectionButton.tag.actionButton:active,
body.white-theme div[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton:active,
body.white-theme div[data-role=page]:not(.lighttext)      [data-role=header] * #showUploadSectionButton.tag.actionButton:active{
  color:var(--trebble-primary) !important;
  background-color: transparent;

}
body.white-theme div[data-role=page]:not(.lighttext):not(#player) #header-back-button,
body.white-theme div[data-role=page]:not(.lighttext):not(#player) #header-queue-button,
body.white-theme div[data-role=page]:not(.lighttext) [data-role=header] * #editButton,
body.white-theme div[data-role=page]:not(.lighttext):not(#player) [data-role=header] * #menuOptionButton,
body.white-theme div[data-role=page]:not(.lighttext)  [data-role=header] * #filterButton,
body.white-theme div[data-role=page]:not(.lighttext)   [data-role=header] * #deleteButton,
body.white-theme div[data-role=page]:not(.lighttext)    [data-role=header] * #saveButtonIcon,
body.white-theme div[data-role=page]:not(.lighttext)    [data-role=header] * #loadingIndicatorBtn,
body.white-theme div[data-role=page]:not(.lighttext)    [data-role=header] * #loadingIndicatorBtn:hover,
body.white-theme div[data-role=page]:not(.lighttext)    [data-role=header] * #loadingIndicatorBtn:active,
body.white-theme div[data-role=page]:not(.lighttext)     [data-role=header] * #showRecordSectionButton.tag.actionButton,
body.white-theme div[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton,
body.white-theme div[data-role=page]:not(.lighttext)      [data-role=header] * #showUploadSectionButton.tag.actionButton {
  color: var(--text-dark);
}
body.white-theme #moreSubTabs > div[role=tabpanel], 
body.white-theme #mylibrary #capsuleTabs > div[role=tabpanel]{
  box-shadow: var(--shadow-none);
}

body.white-theme  #songList,
body.white-theme #albumList,
body.white-theme #artistList,
body.white-theme #moreList,
/*body.white-theme #capsuleList,*/
body.white-theme #myFeedList,
body.white-theme #myNotificationsList{
    box-shadow: var(--shadow-inner-lg);
}

body.white-theme #mylibrary > div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content * [data-role=tabs] > [data-role=navbar] > ul > li > a{
  padding: var(--size-none);
  letter-spacing: 1px;
  border-bottom-width: var(--border-1);
  padding-bottom: var(--border-2);
  border-color: transparent;
}
body.white-theme #mylibrary > div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content * [data-role=tabs] > [data-role=navbar] > ul > li > a.ui-btn-active{
    border-color: var(--trebble-primary);
}

body.white-theme.browser.mobileweb * div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul {
  padding: var(--space-xs);
}
body.white-theme.browser.mobileweb * div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li {
  padding: var(--size-none) var(--space-sm);
  box-sizing: border-box;
}
body.white-theme.browser.mobileweb div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li  > a{
   padding: var(--size-none);
   letter-spacing: 1px;
   border-bottom-width: var(--border-1);
   padding-bottom: var(--border-2);
}

body.white-theme div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li {

    padding: var(--space-2xs) var(--space-sm);
}

html body.white-theme .ui-overlay-a,
html body.white-theme .ui-page-theme-a,
html body.white-theme .ui-page-theme-a .ui-panel-wrapper{
  background-color:  var(--bg-light);
}


body.white-theme  div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a{

  width: -moz-fit-content;

  width: fit-content;
  padding: var(--size-none);
  letter-spacing: 1px;
  border-bottom-width: var(--border-1);
  padding-bottom: var(--border-2);
}

@media (max-width: 450px) {
  body.white-theme #mylibrary [role=tablist] > li,
  body.white-theme #mySubscriptions [role=tablist] > li,
  body.white-theme #myJourneys [role=tablist] > li {
    width: var(--size-half);
    -moz-flex-line-pack: center;
    align-content: center;
    -webkit-align-content: center;
    -moz-flex-direction: row;
    flex-direction: row;
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    padding: var(--space-2xs) var(--space-sm)}

body.white-theme #mylibrary #capsuleList  [role=tablist] > li {
    width: var(--size-quarter);
    -moz-flex-line-pack: center;
    align-content: center;
    -webkit-align-content: center;
    -moz-flex-direction: row;
    flex-direction: row;
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    padding: var(--space-2xs) var(--space-2xs)}

/*body.white-theme #mylibrary.showScheduleCapsules #capsuleList  [role=tablist] > li{
    width: var(--size-fifth);
    font-size: 80%;
    padding: var(--space-2xs) var(--border-2);
    }*/
    body.white-theme #mylibrary.showScheduleCapsules #capsuleList ul{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow: scroll;
    }

    body.white-theme #mylibrary.showScheduleCapsules #capsuleList [role=tablist]>li {
        width: auto;
        font-size: 80%;
        padding: var(--space-2xs) var(--border-6);
    }
}


body.white-theme #mylibrary:not(.showScheduleCapsules) #capsuleList li[aria-labelledby=myScheduledCapsulesTab]{
  display:none;
}



body.white-theme .tabheader > div{
  border:var(--border-0);
  padding: var(--size-none) var(--space-xs);
  letter-spacing: 1px;
}

body.white-theme .tabheader > div.selected > span{
  border-bottom: var(--border-1) solid;
  padding-bottom: var(--border-3);
}



body.white-theme input.customSearchField[type=search],
body.white-theme input.shareableLink {
  border-radius: 2px;
  font-weight: 400;
  color: var(--text-dark);
  /*color: var(--text-muted);*/
  border: var(--border-0);
  padding: var(--size-none);
  background-color: transparent;
  /* background-color: white; */
  border-bottom: var(--border-1) solid var(--color-black-5)!important;
  /* border: var(--border-1) solid var(--trebble-primary-dark); */
  font-size: var(--text-base);
}
body.white-theme [data-role=popup] * input.customSearchField[type=search],body.white-theme [data-role=popup] * input.shareableLink{
    background-color:var(--color-white-20);
    color:var(--text-light);
    font-size: var(--text-3xl-px);
}


body.white-theme [data-role=popup] * input.shareableLink{
    font-size: var(--text-base-px);
}

body.white-theme [data-role=popup] * input.customSearchField[type=search]:focus,body.white-theme [data-role=popup] * input.shareableLink:focus{
    background-color:var(--color-white-20);
    color:var(--text-light)
}

body.white-theme [data-role=popup] * input.customSearchField[type=search],
body.white-theme [data-role=popup] * input.shareableLink {
  background-color: var(--color-white-20);
  color: var(--color-white-60);
}

body.white-theme [data-role=popup] * input.customSearchField[type=search]:focus,
body.white-theme [data-role=popup] * input.shareableLink:focus {

  background-color: var(--color-white-20);
}

body.white-theme input.customSearchField[type=search]:focus,
body.white-theme input.shareableLink:focus {
  background-color: transparent;
  border-bottom: var(--border-1) solid var(--trebble-primary-600) !important;
  color: var(--text-dark);
}

body.white-theme.browser.mobileweb * div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a:hover,
body.white-theme.browser.mobileweb div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a:hover,
body.white-theme * div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a:active,
body.white-theme div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a:active {
  color: var(--trebble-primary) !important;
}
body.white-theme.browser.mobilebrowser div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] > [data-role=navbar] > ul > li > a ,
body.white-theme.browser.mobilebrowser  div.ui-header[data-role=header] ~ .ui-panel-wrapper > .ui-content > [data-role=tabs] * [data-role=tabs] > [data-role=navbar] > ul > li > a {
  font-weight: 600;
  margin: auto;
}

html body.white-theme.browser  [data-role=page]:not(.lighttext) .capsuleCard {
    box-shadow: var(--shadow-right);
    /*-webkit-transition: -webkit-box-shadow .25s ease-in-out;
    transition: -webkit-box-shadow .25s ease-in-out;
    transition: box-shadow .25s ease-in-out;
    transition: box-shadow .25s ease-in-out,-webkit-box-shadow .25s ease-in-out;*/
    border: var(--border-0);
}
.outline_item{
    display: flex;
    flex-direction: row;
    width: var(--size-full);
    height: var(--size-90);
    align-items: center;
    flex: 1 1 auto;
    border-bottom: var(--border-1) solid var(--color-black-5);

}


.outline_item .day_number_info{
    flex: 0 0 auto;
    width: var(--size-75);
    opacity: 0.5;
}

.outline_item .day_number_info .day_label{
    font-size: 80%;
    text-transform: uppercase;
}

.outline_item .day_number_info .day_number{    
    font-size: var(--text-2xl-px);
    font-weight: bold;
    padding: var(--space-2xs) var(--size-none);

}
.outline_item .buttonGroup{
    flex: 0 0 auto;
}
.outline_item .outline_info{

    flex: 1 1 auto;
    text-align: left;
    height: var(--size-full);
    align-items: flex-start;
    justify-content: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;

}
.outline_item .outline_info .outline_title{
    font-size: var(--text-base-px);
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
}
.outline_item .outline_info .outline_detail{
    opacity: .5;
    font-size: 90%;
    width: var(--size-full);
    display: block;
    white-space: nowrap;
    margin: var(--border-4) var(--size-none);
    overflow: hidden;
    text-overflow: ellipsis;


}

.outline_item:not(.editable) .removeFromOutlineBtn,
.outline_item:not(.locked) .locked_btn,
.outline_item.locked .playback_completed_btn_wrapper,
.outline_item.locked .play_btn,
.outline_item.locked .disabled_play_btn,
.outline_item.locked .moreOptionBtn,
.outline_item.hide_day_info .day_number_info,
.outline_item.hide_more_button .moreOptionBtn,
.outline_item:not(.allowedToPlay) .moreOptionBtn,
.outline_item.allowedToPlay .disabled_play_btn,
.outline_item.editable .disabled_play_btn,
.outline_item.completed .disabled_play_btn,
.outline_item:not(.allowedToPlay) .play_btn,
.outline_item.locked .moreOptionButtonWrapper,
.outline_item:not(.editable) .moreOptionButtonWrapper,
.outline_item:not(.completed) .playback_completed_btn_wrapper,
.outline_item.isPlaying .playback_completed_btn_wrapper,
.outline_item.completed:not(.isPlaying) .play_btn{
    display: none;
} 
.outline_item .buttonGroup .playback_completed_btn_wrapper #playback_completed_btn,
.outline_item .buttonGroup .play_btn #playCapsuleBtn,
.outline_item .buttonGroup .play_btn #removeFromOutlineBtn,
.outline_item .disabled_play_btn i{

    height: var(--size-36);
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: var(--size-36);
    display: flex;
    flex: 0 0 36px;
    font-size: var(--text-base-px);
    top: auto;
    border-radius: 50%;
    border: var(--border-2) solid;
    cursor: pointer;

}

.outline_item .disabled_play_btn i{
    cursor: default;
    opacity: 0.5;
}
.outline_item .buttonGroup #moreOptionButtonWrapper{
    cursor: pointer;
    width: var(--size-40);
    height: var(--size-40);
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    display: flex;

}

.outline_item .drag_btn_wrapper{
    height: var(--size-40);
    cursor: pointer;
}

body.browser.mobileweb .outline_item .drag_btn_wrapper:hover,
.outline_item .drag_btn_wrapper:active,
body.browser.mobileweb .outline_item .buttonGroup #moreOptionButtonWrapper:hover,
.outline_item .buttonGroup #moreOptionButtonWrapper:active{
    background-color: var(--color-white-10);
}

.outline_item .buttonGroup .playback_completed_btn_wrapper #playback_completed_btn{
    background-color: var(--color-green-400);
    border-color: var(--color-green-400);
}

.outline_item .buttonGroup .play_btn #playCapsuleBtn{
    background-color:  var(--trebble-primary);
    border-color:  var(--trebble-primary);

}

.outline_item .buttonGroup .play_btn #playCapsuleBtn i.ion-ios7-play{
    padding-left: var(--border-4);
}

.outline_item .buttonGroup .play_btn #playCapsuleBtn i.fontello-icon-stop{
 padding-left: var(--border-2);   
}

.outline_item .buttonGroup .play_btn #playCapsuleBtn  i.ion-ios7-gear.animate-spin {
    width: 17px;
    height: 18px;
}

.outline_item .buttonGroup{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

@media(max-width: 500px), (max-height: 500px) and (orientation: landscape){
    .outline_item{
        height: 110px;
    }

    .outline_item .buttonGroup{
        flex-direction: column;
    }

    .outline_item .outline_info .outline_title{
        -webkit-line-clamp: 3;
    }


    [data-role=page].createCapsulePage.ui-page .audio_sequencer .header_toolbar.show_labels button label{
        display: none;
    }

    .sequencer_node_container{
        padding: var(--space-2xs) var(--space-2xs);
    }
    .audio_sequencer .bottom_toolbar{
        max-width: 100%;
    }

}


.outline_item .buttonGroup div{
    top: auto;
    flex: 0 0 50px;
    height: var(--size-50);
    width: var(--size-50);
    justify-content: center;
    align-items: center;
    display: flex;
    margin: var(--size-none) var(--space-3xs);
}
.outline_item .buttonGroup .locked_btn i,
.outline_item .buttonGroup .moreOptionBtn i{
    font-size: var(--text-2xl-px);
    /*-webkit-text-stroke-width: medium;*/
}

html   [data-role=page].lighttext .outline_item{
    color: white;
    border-bottom: var(--border-1) solid var(--color-white-10);
}

body.white-theme :focus{
  outline:none;
}

.playlistDetailsPage #playPreviewBtn {
    display: none;
}

html body.white-theme.browser:not(.darkTheme)   [data-role=page]:not(.lighttext) .capsuleCard:hover {
    box-shadow: var(--shadow-highlight);
    border: var(--border-0);
}


.homePanel * .settingMenuBox{
  /*visibility: hidden;*/
}


#fabAddButtonContainer{
   /* display: none !important;*/
}

#exploreBtn.panelMenuItem{
    /*display: none !important;*/
}

#mySubscriptionsBtn.panelMenuItem{
   /*display: none !important;*/
}

.upgrade_creator_subscription_widget {
    padding: var(--space-sm);
    box-sizing: border-box;
    background-color: white;
    width: calc(var(--vw-full) - var(--size-100));
    min-height: var(--size-600);
    display: flex;
}
.upgrade_creator_subscription_widget.show_gradient_background{
    background: url(777557e5cede6bc8060e.jpg);
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
}

.upgrade_creator_subscription_widget.show_gradient_background .creator_plans_listing_container #all_creator_plans_container .creator_plan_box{
    background-color: white;
}

.upgrade_creator_subscription_widget.show_gradient_background .creator_plans_listing_container #upgrade_ad_message_box .header_message{
    color: var(--color-black);
    -webkit-text-fill-color: var(--color-black);
}

body[appname=trebble] .upgrade_creator_subscription_widget.show_gradient_background  .switch label input[type=checkbox]:checked+.lever:after{
    background-color: var(--color-black);
}

body[appname=trebble]   .upgrade_creator_subscription_widget.show_gradient_background  .switch label input[type=checkbox]:checked+.lever{
    background-color: var(--color-gray-150);
}

.upgrade_creator_subscription_widget.show_gradient_background .creator_plans_listing_container #upgrade_ad_message_box  .choose_monthly_or_yearly{
    font-weight: bold;
}

.upgrade_creator_subscription_widget[is_content_loading="true"]{
    display: flex;
    justify-content: center;
    align-items: center;
}

.upgrade_creator_subscription_widget .creator_plans_listing_container,
.upgrade_creator_subscription_widget .payment_section .payment_section_content{
    color: var(--color-black);
    display: flex;
    flex-direction: row;
    overflow: auto;
    margin: auto;
    width: var(--size-full);
    /* align-items: center;*/
}

.upgrade_creator_subscription_widget .payment_section,
.upgrade_creator_subscription_widget .changePaymentMethodSection{
    justify-content: center;
    width: var(--size-full);
    color: var(--color-black);
    display: flex;
    flex-direction: column;
    overflow: auto;
    
}


.creator_plans_listing_container #upgrade_ad_message_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: var(--size-330);
    padding: var(--space-sm);
    box-sizing: border-box;
    text-align: start;
    flex: 0 0 100%;
}

.creator_plans_listing_container #upgrade_ad_message_box  .header_message,
.payment_section  .header_section {
    font-weight: 900;
    color: var(--color-black);
    font-size: 140%;
    margin: var(--size-none);
    padding: var(--size-none);  
}

.payment_section  .header_section {
    display: flex;    
}

.creator_plans_listing_container #upgrade_ad_message_box  .header_message{
    display: block;
    font-size: 200%;
    background: var(--gradient-primary-alt);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 150% 150%;
    animation: gradientanimation 5s ease infinite;
}

.creator_plans_listing_container #upgrade_ad_message_box  .header_message,
.creator_plans_listing_container #upgrade_ad_message_box  .descrpition_message{
    margin-bottom: var(--space-sm);
}

.creator_plans_listing_container #upgrade_ad_message_box  .choose_monthly_or_yearly{

    display: flex;
    flex-direction: row;

}

.creator_plans_listing_container #all_creator_plans_container{

    display: flex;
    flex-direction: row;

}

.creator_plans_listing_container #all_creator_plans_container .creator_plan_box{

    padding: var(--space-sm);
    padding-top: var(--space-lg);
    box-sizing: border-box;
    border: var(--border-4) solid var(--color-black);
    margin: var(--space-2xs);
    flex-direction: column;
    display: flex;
    text-align: start;
    width: var(--size-300);
    position: relative;
}

.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_name{
 font-size: 130%;
 font-weight: bold;

}
.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .buy_subscription_button,
.payment_section .complete_subscription_payment_button,
.payment_section .confirm_change_plan_btn,
.update_payment_method_widget .updatePaymentMethodBtn, 
.update_payment_method_widget .cancelBtn{
    margin: var(--space-sm) var(--size-none);
    background-color: var(--color-black);
    color: white;
    font-weight: bold;
    outline: none;
    border: var(--border-3) solid var(--color-black);
    height: var(--size-40);
    padding: var(--size-none);
    cursor: pointer;

}
.payment_section .complete_subscription_payment_button,
.payment_section .confirm_change_plan_btn{
    width: var(--size-full);
    max-width: var(--size-300);
}
.update_payment_method_widget .updatePaymentMethodBtn, 
.update_payment_method_widget .cancelBtn{
    padding: var(--size-none) var(--space-sm);
}
.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .buy_subscription_button:hover,
.payment_section .complete_subscription_payment_button:hover,
.payment_section .complete_subscription_payment_button:hover,
.payment_section .confirm_change_plan_btn:hover,
.update_payment_method_widget .updatePaymentMethodBtn:hover,
.update_payment_method_widget .cancelBtn:hover{
    color:  var(--color-black);
    background-color:transparent;
}

@media(max-width: 1200px){
    .upgrade_creator_subscription_widget .creator_plans_listing_container,
    .upgrade_creator_subscription_widget .payment_section .payment_section_content,
    .upgrade_creator_subscription_widget .creator_plans_listing_container #all_creator_plans_container{
        flex-direction: column;
        align-items: center;
    }

    div[data-role=popup].upgradeCreatorSubscriptionPopup > a#closeBtn{
        color:  var(--color-black);
    }

    .replacePaymentForCreatorSubscriptionPopup .popupContent {
        padding: var(--text-8xl-px);
        box-sizing: border-box
    }

    #songPoppupMenu.replacePaymentForCreatorSubscriptionPopup .update_payment_method_widget{
        max-width: var(--size-400);
    }

    .upgrade_creator_subscription_widget{
        overflow: auto;
        min-height: auto;
        font-size: 90%;
        width: var(--vw-full);
    }

    .creator_plans_listing_container #all_creator_plans_container .creator_plan_box{
        width: var(--size-full);
        padding: var(--space-sm) var(--space-2xs) var(--space-2xs);
    }

    .creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_header.visible{
        padding-left: var(--space-2xs);
    }

    .payment_section {
       padding: var(--space-sm);
       box-sizing:border-box;
   }

   .payment_section .selected_upgrade_plan_info, 
   .payment_section .payment_form{
    width: var(--size-full);
    max-width: var(--size-400);
}

.payment_section .changePaymentMethodSection{
    flex: 0 0 auto;
    max-width: var(--size-400);
    margin: auto;
}
}

body.browser.mobileweb #songPoppupMenu.replacePaymentForCreatorSubscriptionPopup .update_payment_method_widget .cancelBtn,
body.browser.mobileweb .upgrade_creator_subscription_widget .transparent_button.toggled{
    border: var(--border-3) solid var(--color-black);
    color: var(--color-black);
    background-color: transparent;
}

body.browser.mobileweb #songPoppupMenu.replacePaymentForCreatorSubscriptionPopup .update_payment_method_widget .cancelBtn:hover,
body.browser.mobileweb .upgrade_creator_subscription_widget .transparent_button.toggled:hover{
    border: var(--border-3) solid var(--color-black);
    background-color:  var(--color-black);
}

.payment_section .selected_upgrade_plan_info .header_section{
    margin: var(--space-2xs) var(--space-sm);
    display: flex;
    color: var(--color-black);
    align-items: center;
    flex-direction: row;
}

.payment_section .selected_upgrade_plan_info .header_section .back_to_plan_listing_btn{
    font-size: var(--text-lg-px);
    height: var(--size-30);
    width: var(--size-30);
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
}
.replacePaymentForCreatorSubscriptionPopup .update_payment_method_widget,
.payment_section .payment_form,
.payment_section .changePaymentMethodSection{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex: 1 1 100%;
    padding-top: var(--space-md);
    height: -moz-fit-content;
    height: fit-content;
    background: var(--bg-light);
}
.replacePaymentForCreatorSubscriptionPopup .update_payment_method_widget{
    flex: 0 0 auto;
    padding: var(--space-sm);
}

#songPoppupMenu.replacePaymentForCreatorSubscriptionPopup,
#songPoppupMenu.replacePaymentForCreatorSubscriptionPopup #closeBtn {
    color: var(--color-black);
    background-color: white;
}
#songPoppupMenu.replacePaymentForCreatorSubscriptionPopup .update_payment_method_widget{
    max-width: var(--size-500);
    width: var(--size-full);
}
.payment_section  .selected_upgrade_plan_info{
    display: flex;
    flex: 0 0 50%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.payment_section  .selected_upgrade_plan_info .default_payment_method{
    display: flex;
    align-items: center;
    width: var(--size-full);
    justify-content: center;
    margin: var(--space-2xs);
    max-width: var(--size-400);
    padding: var(--space-sm) var(--space-2xs);
    box-sizing: border-box;
}
.payment_section  .selected_upgrade_plan_info .invoice_placeholder{
    width: var(--size-full);
    max-width: var(--size-400);
}
.stripe_invoice_widget{
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: var(--space-sm);
    width: var(--size-full);
    box-sizing: border-box;
    background-color: var(--bg-light);
}
.stripe_invoice_widget .invoice_item{
    margin: var(--space-2xs) var(--size-none);
}

.stripe_invoice_widget  .invoice_item .invoice_item_header{
    font-size: 85%;
    opacity: 0.5;
    text-transform: uppercase;
}

.stripe_invoice_widget  .invoice_item .summary_item{
    display: flex;
    flex-direction: row;
}

.stripe_invoice_widget  .invoice_item .summary_item .summary_item_description{
    flex: 1 1 auto;
}

.stripe_invoice_widget  .invoice_item .summary_item .summary_item_value{
    flex: 0 0 auto;
    text-transform: uppercase;
}

.stripe_invoice_widget .total_summary{
    flex: 0 0 auto;
    text-transform: uppercase;


    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: var(--border-1) solid var(--color-gray-150);

}

.stripe_invoice_widget .total_summary .summary_item.amount_due{
    font-weight: bold;
}


.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_price_monthly .price,
.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_price_yearly .price{
 font-size: 200%;
 font-weight: 900;

}

.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_price_monthly .price_before_discount,
.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_price_yearly .price_before_discount{
    font-weight: 600;
    text-decoration: line-through;
}

.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_price_monthly .per_month_label,
.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_price_yearly .per_month_label{
    opacity: 0.7;
    margin-left: var(--space-2xs);
    font-weight: bold;
}



.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_header.visible{
    position: absolute;
    top: 0px;
    width: var(--size-full);
    background: var(--color-black);
    color: white;
    left: 0px;
    box-sizing: border-box;
    padding-left: var(--space-sm);
    font-size: 85%;

}


.creator_plans_listing_container .creator_plan_box .current_plan_selected_label,
.creator_plans_listing_container[current_subscribed_tier="pro_tier_yearly"][yearly_billing_selected="true"] #all_creator_plans_container .creator_plan_box.pro_tiers_info .buy_subscription_button,
.creator_plans_listing_container[current_subscribed_tier="pro_tier_monthly"][yearly_billing_selected="false"] #all_creator_plans_container .creator_plan_box.pro_tiers_info .buy_subscription_button,
.creator_plans_listing_container[current_subscribed_tier="pro_plus_tier_yearly"][yearly_billing_selected="true"] #all_creator_plans_container .creator_plan_box.pro_plus_tiers_info .buy_subscription_button,
.creator_plans_listing_container[current_subscribed_tier="pro_plus_tier_monthly"][yearly_billing_selected="false"] #all_creator_plans_container .creator_plan_box.pro_plus_tiers_info .buy_subscription_button,
.creator_plans_listing_container[current_subscribed_tier="enterprise_tier_yearly"][yearly_billing_selected="true"] #all_creator_plans_container .creator_plan_box.enterprise_tiers_info .buy_subscription_button,
.creator_plans_listing_container[current_subscribed_tier="enterprise_tier_monthly"][yearly_billing_selected="false"] #all_creator_plans_container .creator_plan_box.enterprise_tiers_info .buy_subscription_button,
.creator_plans_listing_container[current_subscribed_tier="free_tier"] #all_creator_plans_container .creator_plan_box.free_tiers_info .buy_subscription_button{
    display: none;
}

.creator_plans_listing_container[current_subscribed_tier="pro_tier_yearly"][yearly_billing_selected="true"] #all_creator_plans_container .creator_plan_box.pro_tiers_info .current_plan_selected_label,
.creator_plans_listing_container[current_subscribed_tier="pro_tier_monthly"][yearly_billing_selected="false"] #all_creator_plans_container .creator_plan_box.pro_tiers_info .current_plan_selected_label,
.creator_plans_listing_container[current_subscribed_tier="pro_plus_tier_yearly"][yearly_billing_selected="true"] #all_creator_plans_container .creator_plan_box.pro_plus_tiers_info .current_plan_selected_label,
.creator_plans_listing_container[current_subscribed_tier="pro_plus_tier_monthly"][yearly_billing_selected="false"] #all_creator_plans_container .creator_plan_box.pro_plus_tiers_info .current_plan_selected_label,
.creator_plans_listing_container[current_subscribed_tier="enterprise_tier_yearly"][yearly_billing_selected="true"] #all_creator_plans_container .creator_plan_box.enterprise_tiers_info .current_plan_selected_label,
.creator_plans_listing_container[current_subscribed_tier="enterprise_tier_monthly"][yearly_billing_selected="false"] #all_creator_plans_container .creator_plan_box.enterprise_tiers_info .current_plan_selected_label,
.creator_plans_listing_container[current_subscribed_tier="free_tier"] #all_creator_plans_container .creator_plan_box.free_tiers_info .current_plan_selected_label{
    display: flex;
}


.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .current_plan_selected_label{
  margin: var(--space-sm) var(--size-none);
  background-color: var(--color-gray-100);
  color: var(--pulse-gray);
  font-weight: bold;
  outline: none;
  border: var(--border-3) solid var(--color-gray-100);
  height: var(--size-40);
  align-items: center;
  justify-content: center;
}
.upgrade_creator_subscription_widget[pay_using_existing_payment_method="false"] .change_plan_section,
.upgrade_creator_subscription_widget[pay_using_existing_payment_method="true"] .payment_form,
.update_payment_method_widget[is_content_loading="true"] .update_payment_method_container,
.upgrade_creator_subscription_widget[is_content_loading="true"] .creator_plans_listing_container,
.upgrade_creator_subscription_widget[is_content_loading="true"] .payment_section,
.upgrade_creator_subscription_widget[is_content_loading="true"] .changePaymentMethodSection,
.update_payment_method_widget:not([is_content_loading="true"]) #loadingImg,
.upgrade_creator_subscription_widget:not([is_content_loading="true"]) #loadingImg,
.upgrade_creator_subscription_widget:not([displayed_section="payment_section"]) .payment_section,
.upgrade_creator_subscription_widget:not([display_update_payment_section="true"]) .changePaymentMethodSection,
.upgrade_creator_subscription_widget:not([displayed_section="plan_listing_section"]) .creator_plans_listing_container,
.creator_plans_listing_container[yearly_billing_selected="true"] #all_creator_plans_container .creator_plan_box .plan_price_monthly,
.creator_plans_listing_container[yearly_billing_selected="true"] #all_creator_plans_container .creator_plan_box .plan_price_monthly_desc,
.creator_plans_listing_container:not([yearly_billing_selected="true"]) #all_creator_plans_container .creator_plan_box .plan_price_yearly,
.creator_plans_listing_container:not([yearly_billing_selected="true"]) #all_creator_plans_container .creator_plan_box .plan_price_yearly_desc{
 display: none;

}
.upgrade_creator_subscription_widget[pay_using_existing_payment_method="true"]:not([display_update_payment_section="true"])  .payment_section .selected_upgrade_plan_info{
    flex: 1 1 auto;
}

.update_payment_method_widget .button_bar > button {
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.payment_section .selected_upgrade_plan_info .change_plan_section  {
    max-width: var(--size-400);
    width: var(--size-full);
}
.payment_section .selected_upgrade_plan_info  .change_plan_section .default_payment_method   .info_block{
    flex: 1 1 auto;
    text-align: left
}

.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_renewal_or_end_date{
    font-size: 80%;
    text-align: center;
    opacity: 0.5;
    height: var(--size-20);
    margin-bottom: var(--space-2xs);
}

.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_price_monthly_desc,
.creator_plans_listing_container #all_creator_plans_container .creator_plan_box .plan_price_yearly_desc{
 font-size: 85%;
 opacity: 0.7;
}
.creator_plans_listing_container #all_creator_plans_container .creator_plan_box  .feature_list{
    display: flex;
    flex-direction: column;
    text-align: start;
}

.creator_plans_listing_container #all_creator_plans_container .creator_plan_box  .feature_list .feature_item{
    font-size: 85%;
    color: var(--color-black);
    display: flex;
    flex-direction: row;

}

.creator_plans_listing_container #all_creator_plans_container .creator_plan_box  .feature_list .feature_item span{
    display: flex;
    align-items: center;
    justify-content: center;
}

.creator_plans_listing_container #all_creator_plans_container .creator_plan_box  .feature_list .feature_item .checkmark_icon{
    height: var(--size-30);
    margin-right: var(--space-2xs);
    font-size: 200%;

}


.StatsPage .statsTabInfo {
  color: var(--text-dark);
  border-bottom: var(--border-1) solid var(--color-black-5);
  box-sizing: border-box;
  font-size: var(--text-md);
  padding: var(--space-2xs);
  cursor: pointer;
}

body.browser.mobileweb .StatsPage .statsTabInfo:hover {
  background-color: var(--color-black-5);
}

.StatsPage .swiper-slide-active > .statsTabInfo {
  color: var(--trebble-primary);;
  border-bottom: var(--border-1) solid var(--trebble-primary);;
}



.StatsPage .statsWrapper .ct-series-b .ct-bar,
.StatsPage .statsWrapper .ct-series-b .ct-line,
.StatsPage .statsWrapper .ct-series-b .ct-point,
.StatsPage .statsWrapper .ct-series-b .ct-slice-donut {
  stroke: var(--color-black-50);

}

.StatsPage .statsWrapper .ct-series-a .ct-bar,
.StatsPage .statsWrapper .ct-series-a .ct-line,
.StatsPage .statsWrapper .ct-series-a .ct-point,
.StatsPage .statsWrapper .ct-series-a .ct-slice-donut {
  stroke: var(--text-dark);
  
}


.StatsPage .statsWrapper .ct-label {
  color: var(--text-dark);
  font-size: var(--text-base);
  font-weight: 900;
  margin-top: var(--border-4);
}

.StatsPage #statisticContent .ct-grid {
  stroke: var(--color-black-10);
  stroke-width: var(--size-1);
  stroke-dasharray: 2px;
}

.StatsPage #statisticContent .ct-series-a .ct-point,
.StatsPage #statisticContent .ct-series-b .ct-point, 
.StatsPage #statisticContent .ct-series-c .ct-point, 
.StatsPage #statisticContent .ct-series-d .ct-point, 
.StatsPage #statisticContent .ct-series-e .ct-point,
.StatsPage #statisticContent .ct-series-f .ct-point {
  stroke-width: var(--size-16) ;
}
.StatsPage #statisticContent .ct-series-a .ct-line,
.StatsPage #statisticContent .ct-series-b .ct-line, 
.StatsPage #statisticContent .ct-series-c .ct-line, 
.StatsPage #statisticContent .ct-series-d .ct-line, 
.StatsPage #statisticContent .ct-series-e .ct-line,
.StatsPage #statisticContent .ct-series-f .ct-line {
  stroke-width: var(--size-6) ;
}

.StatsPage #statisticContent .ct-series-a .ct-area,
.StatsPage #statisticContent .ct-series-b .ct-area, 
.StatsPage #statisticContent .ct-series-c .ct-area, 
.StatsPage #statisticContent .ct-series-d .ct-area, 
.StatsPage #statisticContent .ct-series-e .ct-area,
.StatsPage #statisticContent .ct-series-f .ct-area {
  fill-opacity: 0.05;
}

.StatsPage #statisticContent .ct-series-a .ct-bar,
.StatsPage #statisticContent .ct-series-a .ct-line,
.StatsPage #statisticContent .ct-series-a .ct-point{
  stroke: var(--trebble-accent);
  
}
.StatsPage #statisticContent .ct-series-a .ct-area {
  fill: var(--trebble-accent);
}


.StatsPage  #statisticContent .legenItem.ct-series-a  .legendColor,
#statsTooltip .ct-series-a .legendColor {
  background-color: var(--trebble-accent);
}

.StatsPage  #statisticContent .ct-series-b .ct-bar,
.StatsPage  #statisticContent .ct-series-b .ct-line,
.StatsPage  #statisticContent .ct-series-b .ct-point{
  stroke: var(--trebble-gradient-pink);
  
}
.StatsPage #statisticContent .ct-series-b .ct-area {
  fill:var(--trebble-gradient-pink);
}

.StatsPage #statisticContent .legenItem.ct-series-b .legendColor,
#statsTooltip .ct-series-b .legendColor {
  background-color: var(--trebble-gradient-pink);
}

.StatsPage #statisticContent .ct-series-c .ct-bar,
.StatsPage #statisticContent .ct-series-c .ct-line,
.StatsPage #statisticContent .ct-series-c .ct-point{
  stroke: var(--color-blue-300);
}
.StatsPage #statisticContent .ct-series-c .ct-area {
  fill: var(--color-blue-300);
}


.StatsPage #statisticContent .legenItem.ct-series-c .legendColor,
#statsTooltip .ct-series-c .legendColor {
  background-color:var(--color-blue-300);
}

.StatsPage #statisticContent .legenItem {
  text-align: right;
}

.StatsPage #statisticContent .ct-series-d .ct-bar,
.StatsPage #statisticContent .ct-series-d .ct-line,
.StatsPage #statisticContent .ct-series-d .ct-point {
  stroke: var(--trebble-accent-300);
}
.StatsPage #statisticContent .ct-series-d .ct-area {
  fill: var(--trebble-accent-300);
}


.StatsPage #statisticContent .legenItem.ct-series-d .legendColor,
#statsTooltip .ct-series-d .legendColor {
  background-color: var(--trebble-accent-300);
}

.StatsPage #statisticContent .ct-series-e .ct-bar,
.StatsPage #statisticContent .ct-series-e .ct-line,
.StatsPage #statisticContent .ct-series-e .ct-point {
  stroke: var(--color-warning-500);
  
}
.StatsPage #statisticContent .ct-series-e .ct-area {

  fill: var(--color-warning-500);
}

.StatsPage #statisticContent .legenItem.ct-series-e .legendColor,
#statsTooltip .ct-series-e .legendColor {
  background-color: var(--color-warning-500);
}


.StatsPage #statisticContent .ct-series-f .ct-bar,
.StatsPage #statisticContent .ct-series-f .ct-line,
.StatsPage #statisticContent .ct-series-f .ct-point {
  stroke: var(--color-green-500);
  
}
.StatsPage #statisticContent .ct-series-f .ct-area {

  fill: var(--color-green-500);
}

.StatsPage #statisticContent .legenItem.ct-series-f .legendColor,
#statsTooltip .ct-series-f .legendColor {
  background-color: var(--color-green-500);
}


.StatsPage * .swiper-button-next.ion-ios7-arrow-right,
.StatsPage * .swiper-button-prev.ion-ios7-arrow-left {
    color: var(--text-dark);
    background-color: var(--color-black-5);
    box-shadow: 0 5px 10px var(--color-black-10);
}

#ExplorePage[showListView=true]:not(.darkTheme) * #filtersWrapper > div > .ion-chevron-down,
#ExplorePage[showListView=true]:not(.darkTheme) * #filtersWrapper > div,
#Onboarding[showListView=true]:not(.darkTheme) * #filtersWrapper > div > .ion-chevron-down,
#Onboarding[showListView=true]:not(.darkTheme) * #filtersWrapper > div,
.StatsPage * .CustomSelectFieldView ,
#ExplorePage[showListView=true]:not(.darkTheme) * .CustomSelectFieldView,
#Onboarding[showListView=true]:not(.darkTheme) * .CustomSelectFieldView {
    color: var(--text-dark);
    background-color: var(--color-gray-100);

}

#ExplorePage[showListView=true].darkTheme * #filtersWrapper > div > .ion-chevron-down,
#ExplorePage[showListView=true].darkTheme * #filtersWrapper > div,
#Onboarding[showListView=true].darkTheme * #filtersWrapper > div > .ion-chevron-down,
#Onboarding[showListView=true].darkTheme * #filtersWrapper > div,
body.darkTheme .StatsPage * .CustomSelectFieldView ,
body.darkTheme .createCapsulePage * .CustomSelectFieldView,
#ExplorePage[showListView=true].darkTheme * .CustomSelectFieldView,
#Onboarding[showListView=true].darkTheme * .CustomSelectFieldView {
    color: white;

}

body.browser.mobileweb:not(.darkTheme)  .CustomSelectFieldView:active > .ion-chevron-down,
body:not(.darkTheme) .CustomSelectFieldView:hover > .ion-chevron-down{
  color: var(--trebble-primary) !important;
  background-color: var(--trebble-primary-100) !important;
}

body.browser.mobileweb #trebbleInfoDetailWrapper > .coverArtWrapper,
body.browser.mobileweb .StatsPage * .CustomSelectFieldView:hover,
.StatsPage * .CustomSelectFieldView:active,
body.browser.mobileweb .createCapsulePage * .CustomSelectFieldView:hover,
.createCapsulePage * .CustomSelectFieldView:active,
body.browser.mobileweb #ExplorePage[showListView=true] * #filtersWrapper .CustomSelectFieldView:hover,
#ExplorePage[showListView=true] * #filtersWrapper .CustomSelectFieldView:active,
body.browser.mobileweb #Onboarding[showListView=true] * #filtersWrapper .CustomSelectFieldView:hover,
#Onboarding[showListView=true] * #filtersWrapper .CustomSelectFieldView:active   {
  /*background-color: var(--color-black-5);*/
  color: var(--trebble-primary);
  background-color: var(--trebble-primary-100);
}

.StatsPage * .CustomSelectFieldView > .pe-7s-angle-down,
.StatsPage * .CustomSelectFieldView > .ion-chevron-down,
.createCapsulePage * .CustomSelectFieldView > .pe-7s-angle-down,
.createCapsulePage * .CustomSelectFieldView > .ion-chevron-down,
#ExplorePage[showListView=true] * .CustomSelectFieldView > .pe-7s-angle-down,
#ExplorePage[showListView=true] * .CustomSelectFieldView > .ion-chevron-down,
#Onboarding[showListView=true] * .CustomSelectFieldView > .pe-7s-angle-down,
#Onboarding[showListView=true] * .CustomSelectFieldView > .ion-chevron-down {
    /* background-color: var(--text-dark); */
    border: var(--border-2) solid  var(--text-dark);
    color: var(--text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--size-22);
    width: var(--size-22);
    flex: 0 0 22px;
    border-color: transparent;
}

body.darkTheme .StatsPage * .CustomSelectFieldView > .pe-7s-angle-down,
body.darkTheme .StatsPage * .CustomSelectFieldView > .ion-chevron-down,
.createCapsulePage * .CustomSelectFieldView > .pe-7s-angle-down,
.createCapsulePage * .CustomSelectFieldView > .ion-chevron-down,
#ExplorePage[showListView=true].darkTheme * .CustomSelectFieldView > .pe-7s-angle-down,
#ExplorePage[showListView=true].darkTheme * .CustomSelectFieldView > .ion-chevron-down,
#Onboarding[showListView=true].darkTheme * .CustomSelectFieldView > .pe-7s-angle-down,
#Onboarding[showListView=true].darkTheme * .CustomSelectFieldView > .ion-chevron-down {
    border: var(--border-2) solid  white;
    color: white;
    border-color: transparent;
    
}
.createCapsulePage * .CustomSelectFieldView > .ion-chevron-down,
.StatsPage * .CustomSelectFieldView > .ion-chevron-down,
#ExplorePage[showListView=true] * .CustomSelectFieldView > .ion-chevron-down,
#Onboarding[showListView=true] * .CustomSelectFieldView > .ion-chevron-down {
    font-size: var(--text-sm-px);
    margin-left: var(--space-2xs);
}

html body.white-theme .StatsPage.ui-page-theme-a  > .ui-panel-wrapper {
  background-color: var(--bg-light);
}


.StatsPage .tooltip {
  background-color: white;
  color: var(--text-dark);
  text-align: start;
  box-shadow: var(--shadow-right-lg);
}

.StatsPage .tooltip:after {
  border-top-color: white;
  box-shadow: var(--shadow-right-lg);
}

#statsTooltip  .legendColor{
  margin-right: var(--border-4);
}

.StatsPage #chartLegend {
  color: var(--text-dark);
}

.StatsPage .warningMessageWrapper{
  display:none;
}
.StatsPage .warningMessageWrapper.nodata,
.StatsPage .warningMessageWrapper.loading{
 -moz-flex-line-pack: center;
 align-content: center;
 -webkit-align-content: center;
 -moz-flex-direction: column;
 flex-direction: column;
 display: -moz-flexbox;
 display: flex;
 display: -moz-flex;
 align-items: center;
 justify-content: center;
 -webkit-align-items: center;
 -webkit-justify-content: center;
 width: var(--size-full);
 height: var(--size-full);
}
.StatsPage .warningMessageWrapper #trebbleCustomLoadingWidget,
.StatsPage .warningMessageWrapper .loadingMessage,
.StatsPage .warningMessageWrapper .message{
  display:none;
}
.StatsPage .warningMessageWrapper.nodata > .message{
  font-size: var(--text-3xl-px);
  display:block;
  font-weight: bold;
}
.StatsPage .warningMessageWrapper.loading #trebbleCustomLoadingWidget,
.StatsPage .warningMessageWrapper.loading .loadingMessage{
  display:block;
}

#trebblewarning #whatsacapsuleinfobtn{
    /*display: none;*/
}


.onboardingSignupFormWrapper .trebbleCategoryWrapper .ui-select{
  width:var(--size-full);
  /* max-width:var(--size-500); */
  margin: var(--size-none) auto;
}
.onboardingSignupFormWrapper .trebbleCategoryWrapper .ui-select span.browser-default{
  margin-top: var(--border-3);
}

.onboardingSignupFormWrapper .trebbleCategoryWrapper .CustomSelectFieldView{
    color:var(--trebble-primary)!important;
    font-size: var(--text-lg-px);
    padding: 0;
    background-color:transparent;
    border:var(--border-2) solid var(--trebble-primary);
    width:calc(var(--size-full) - var(--space-sm));
    margin: var(--space-2xs);
    box-sizing:border-box;
    font-weight:700;
}
[data-role=page].trebbleEditInfoPage .CustomSelectFieldView{
    color: var(--trebble-primary)!important;
    text-align: center;
    padding: 0;
    background-color: transparent;
    border: var(--border-2) solid var(--trebble-primary);
    box-sizing: border-box;
    width: var(--size-full);
    margin: 0;
    height: var(--size-46);
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: var(--text-xs-px);
}

.onboardingSignupFormWrapper #trebbleCategoryField-button ,
.onboardingSignupFormWrapper #trebbleLanguageField-button ,
.onboardingSignupFormWrapper #journeyCostField-button ,
.onboardingSignupFormWrapper #isJourneyFreeField-button ,
.onboardingSignupFormWrapper #trebbleVisibiltiyField-button ,
.onboardingSignupFormWrapper #trebbleTimezoneField-button {
  margin: var(--space-2xs);
  color: var(--trebble-primary) !important;
  font-size: var(--text-lg-px);
  padding: var(--size-none);
  background-color: transparent;
  border-width: var(--border-2);
  height: var(--size-50);
  width: auto;
  /*display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;*/
}

.onboardingSignupFormWrapper .welcomeMessageWrapper,
.onboardingSignupFormWrapper .chooseProfileTypeWrapper,
.onboardingSignupFormWrapper .chooseProfileTypeWrapper .buttonOptions,
.onboardingSignupFormWrapper .trebbleNameInfoWrapper,
.onboardingSignupFormWrapper .trebbleCustomUrlInfoWrapper,
.onboardingSignupFormWrapper .rssFeedURLInfoWrapper,
.onboardingSignupFormWrapper .trebbleDescriptionfoWrapper,
.onboardingSignupFormWrapper .journeyGoalWrapper,
.onboardingSignupFormWrapper .trebbleCategoryWrapper
,.onboardingSignupFormWrapper .signUpFormWrapper{
    -moz-flex-line-pack: center;
    align-content: center;
    -webkit-align-content: center;
    -moz-flex-direction: column;
    flex-direction: column;
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    width: var(--size-full);
    height: var(--size-full);
    max-width: 1050px;
    margin: auto;
    padding: var(--space-sm);
    box-sizing: border-box;

}
.onboardingSignupFormWrapper .signUpFormWrapper{
    overflow: auto;
}

.onboardingSignupFormWrapper .chooseProfileTypeWrapper{
    height: -moz-fit-content;
    height: fit-content;
}

#onboardingSignupPage .chooseProfileTypeWrapper a.actionButton{
    flex: 0 0 150px;
    color: var(--trebble-primary);
    font-weight: 400;
    background-color: transparent;
    border: var(--border-3) solid var(--trebble-primary);
    flex-direction:column;
}

.onboardingSignupFormWrapper .chooseProfileTypeWrapper .buttonOptions{
    flex-direction: column;
}

#onboardingSignupPage .chooseProfileTypeWrapper a.actionButton i{
    font-size: var(--text-3xl-px);
    margin-bottom: var(--space-3xs);
}

body.browser.mobileweb  #onboardingSignupPage .chooseProfileTypeWrapper a.actionButton:hover,
#onboardingSignupPage .chooseProfileTypeWrapper a.actionButton:active{
    color: white;
    background-color: var(--trebble-primary);
    border: var(--border-2) solid var(--trebble-primary);
}

#onboardingSignupPage .ui-content.disableIOSScrolling{
    -webkit-overflow-scrolling: auto;
}

@media(min-width: 500px), (min-height: 500px) and (orientation: landscape){
    .onboardingSignupFormWrapper .chooseProfileTypeWrapper .buttonOptions{
        flex-direction: row;
    }

    #onboardingSignupPage .chooseProfileTypeWrapper a.actionButton{
        height: var(--size-300);
        flex: 0 0 30%;
        font-size: var(--text-base-px);
        font-weight: 400;
        /*color: var(--trebble-primary);
        background-color: transparent;
        border: var(--border-2) solid var(--trebble-primary);
        flex-direction:column;*/
    }
    /*body.browser.mobileweb  #onboardingSignupPage .chooseProfileTypeWrapper a.actionButton:hover,
    #onboardingSignupPage .chooseProfileTypeWrapper a.actionButton:active{
        color: white;
        background-color: var(--trebble-primary);
        border: var(--border-2) solid var(--trebble-primary);
        }*/


        #onboardingSignupPage .chooseProfileTypeWrapper a.actionButton i{
            font-size: var(--text-6xl-px);
            margin-bottom: var(--space-2xs);
        }
    }

    .onboardingSignupFormWrapper .largeLabel{
        font-size: var(--text-6xl-px);
        font-weight: 900;
        text-align: left;
        letter-spacing: 1px;
        line-height: var(--line-height-1);
        padding-bottom: var(--space-2xs);
        padding: 0 var(--space-2xs);
        margin-bottom: var(--space-sm) !important;
    }
    .onboardingSignupFormWrapper .chooseProfileTypeWrapper .largeLabel{
        text-align: center;
    }


    .onboardingSignupFormWrapper .fieldDesc{
        text-align: left;
        font-size: var(--text-lg-px);
    }

    .onboardingSignupFormWrapper .trebbleCustomUrlInfoWrapper .urlPrefix{
      font-size: var(--text-3xl-px);
      display:flex;
      justify-content:center;
      align-items:center;
      opacity:0.8;
      font-weight:900;
      padding: var(--size-none) var(--space-3xs);
  }


  .onboardingSignupFormWrapper .trebbleCustomUrlInfoWrapper .formField.input-field{
      display:flex;
      flex-direction:row;
      justify-content:center;
      align-items:center;
  }

  .onboardingSignupFormWrapper .trebbleNameInfoWrapper input,
  .onboardingSignupFormWrapper .carouselItem > div:not(.signUpFormWrapper) input,
  .onboardingSignupFormWrapper .trebbleCustomUrlInfoWrapper input{
    font-size: var(--text-3xl-px);
    font-weight: 900;
    color: var(--trebble-primary);
}

.onboardingSignupFormWrapper .trebbleDescriptionfoWrapper textarea,
.onboardingSignupFormWrapper .journeyGoalWrapper textarea{
    font-size: var(--text-lg-px);
    color: var(--trebble-primary);
    height: var(--size-100) !important;
}


.trebbleNameInfoWrapper > div,
.trebbleCustomUrlInfoWrapper > div,
.rssFeedURLInfoWrapper > div,
.trebbleDescriptionfoWrapper > div,
.journeyGoalWrapper > div,
.trebbleCategoryWrapper > div  {
   align-self: flex-start;
}

.carouselItem .hintBox{
    color: var(--color-blue-300);
    padding: var(--size-none) var(--space-sm);
    text-align: left;
    margin-bottom: var(--space-2xs);
}

.carouselItem.showWaitMessage .hintBox,
.carouselItem.successValidation .hintBox,
.carouselItem.failValidation .hintBox,
.carouselItem:not(.showWaitMessage) .waitMessageBox,
.carouselItem:not(.successValidation) .successValidationMessageBox,
.carouselItem:not(.failValidation) .failValidationMessageBox,
.trebbleCustomUrlInfoWrapper:not(.showWaitMessage) .waitMessageBox,
.trebbleCustomUrlInfoWrapper:not(.successValidation) .successValidationMessageBox,
.trebbleCustomUrlInfoWrapper:not(.failValidation) .failValidationMessageBox,
.rssFeedURLInfoWrapper:not(.showWaitMessage) .waitMessageBox,
.rssFeedURLInfoWrapper:not(.successValidation) .successValidationMessageBox,
.rssFeedURLInfoWrapper:not(.failValidation) .failValidationMessageBox,
.trebbleDescriptionfoWrapper:not(.successValidation) .successValidationMessageBox,
.trebbleDescriptionfoWrapper:not(.failValidation) .failValidationMessageBox,
.journeyGoalWrapper:not(.successValidation) .successValidationMessageBox,
.journeyGoalWrapper:not(.failValidation) .failValidationMessageBox{
    display: none;
}

.trebbleNameInfoWrapper.showWaitMessage .waitMessageBox,
.trebbleCustomUrlInfoWrapper.showWaitMessage .waitMessageBox,
.rssFeedURLInfoWrapper.showWaitMessage .waitMessageBox{
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    padding: var(--size-none) var(--space-sm);
    box-sizing: border-box;
}

.trebbleNameInfoWrapper.successValidation .successValidationMessageBox,
.trebbleCustomUrlInfoWrapper.successValidation .successValidationMessageBox,
.rssFeedURLInfoWrapper.successValidation .successValidationMessageBox,
.trebbleDescriptionfoWrapper.successValidation .successValidationMessageBox,
.journeyGoalWrapper.successValidation .successValidationMessageBox{
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    padding: var(--size-none) var(--space-sm);
    box-sizing: border-box;
    color: var(--color-green-500);
}
.trebbleNameInfoWrapper.failValidation .failValidationMessageBox,
.trebbleCustomUrlInfoWrapper.failValidation .failValidationMessageBox,
.rssFeedURLInfoWrapper.failValidation .failValidationMessageBox,
.trebbleDescriptionfoWrapper.failValidation .failValidationMessageBox,
.journeyGoalWrapper.failValidation .failValidationMessageBox{
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    padding: var(--size-none) var(--space-sm);
    box-sizing: border-box;
    color: var(--error);
}


.trebbleNameInfoWrapper.showWaitMessage .waitMessageBox #trebbleCustomLoadingWidget,
.trebbleCustomUrlInfoWrapper.showWaitMessage .waitMessageBox #trebbleCustomLoadingWidget,
.rssFeedURLInfoWrapper.showWaitMessage .waitMessageBox #trebbleCustomLoadingWidget{
    display: inline-block;
    font-size: var(--text-3xs-px);
    margin: var(--size-none);
    margin-right: var(--space-2xs);
}

.trebbleNameInfoWrapper.successValidation .successValidationMessageBox #checkIcon,
.trebbleNameInfoWrapper.failValidation .failValidationMessageBox #failureIcon,
.trebbleCustomUrlInfoWrapper.successValidation .successValidationMessageBox #checkIcon,
.trebbleCustomUrlInfoWrapper.failValidation .failValidationMessageBox #failureIcon,
.rssFeedURLInfoWrapper.successValidation .successValidationMessageBox #checkIcon,
.rssFeedURLInfoWrapper.failValidation .failValidationMessageBox #failureIcon,
.trebbleDescriptionfoWrapper.successValidation .successValidationMessageBox #checkIcon,
.trebbleDescriptionfoWrapper.failValidation .failValidationMessageBox #failureIcon,
.journeyGoalWrapper.successValidation .successValidationMessageBox #checkIcon,
.journeyGoalWrapper.failValidation .failValidationMessageBox #failureIcon{
    display: inline-block;
    font-size: var(--text-3xl-px);
    margin: var(--size-none);
    margin-right: var(--space-2xs);
}

.trebbleNameInfoWrapper.showWaitMessage .waitMessageBox  .label,
.trebbleNameInfoWrapper.successValidation .successValidationMessageBox .label,
.trebbleNameInfoWrapper.failValidation .failValidationMessageBox .label,
.trebbleCustomUrlInfoWrapper.showWaitMessage .waitMessageBox  .label,
.trebbleCustomUrlInfoWrapper.successValidation .successValidationMessageBox .label,
.trebbleCustomUrlInfoWrapper.failValidation .failValidationMessageBox .label,
.rssFeedURLInfoWrapper.showWaitMessage .waitMessageBox  .label,
.rssFeedURLInfoWrapper.successValidation .successValidationMessageBox .label,
.rssFeedURLInfoWrapper.failValidation .failValidationMessageBox .label,
.trebbleDescriptionfoWrapper.successValidation .successValidationMessageBox .label,
.trebbleDescriptionfoWrapper.failValidation .failValidationMessageBox .label,
.journeyGoalWrapper.successValidation .successValidationMessageBox .label,
.journeyGoalWrapper.failValidation .failValidationMessageBox .label{
    -moz-flex-line-pack: center;
    align-content: center;
    -webkit-align-content: center;
    -moz-flex-direction: column;
    flex-direction: column;
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    text-align: start;
}

body div#onboardingSignupPage[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton,
body div#onboardingSignupPage[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton,
body div#trebbleSetup[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton,
body div#trebbleSetup[data-role=page]:not(.lighttext)      [data-role=header] * #saveButtonIcon,
body div#trebbleSetup[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton,
body div#journeyCreation[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton,
body div#journeyCreation[data-role=page]:not(.lighttext)      [data-role=header] * #saveButtonIcon,
body div#journeyCreation[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton{
    color: var(--trebble-primary) !important;
    border: var(--border-3) solid var(--trebble-primary);
    background-color: transparent;
    margin-right: var(--border-4);
    margin-left: var(--border-4);
    margin-top: var(--border-4);
    box-sizing: border-box;
    height: var(--size-50);
    width: auto;
    flex: 0 0 auto;
} 
body.browser.mobileweb div#onboardingSignupPage[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton:not(.trebble_disabled):hover,
body div#onboardingSignupPage[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton:not(.trebble_disabled):active,
body.browser.mobileweb  div#onboardingSignupPage[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton:not(.trebble_disabled):hover,
body div#onboardingSignupPage[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton:not(.trebble_disabled):active,
body.browser.mobileweb div#trebbleSetup[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton:not(.trebble_disabled):hover,
body div#trebbleSetup[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton:not(.trebble_disabled):active,
body.browser.mobileweb  div#trebbleSetup[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton:not(.trebble_disabled):hover,
body div#trebbleSetup[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton:not(.trebble_disabled):active,
body.browser.mobileweb div#journeyCreation[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton:not(.trebble_disabled):hover,
body div#journeyCreation[data-role=page]:not(.lighttext)      [data-role=header] * #nextButton.tag.actionButton:not(.trebble_disabled):active,
body.browser.mobileweb  div#journeyCreation[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton:not(.trebble_disabled):hover,
body div#journeyCreation[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton:not(.trebble_disabled):active{
    color: white !important;
    border: var(--border-3) solid var(--trebble-primary);
    background-color: var(--trebble-primary);

} 
body div#onboardingSignupPage[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton,
body div#trebbleSetup[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton,
body div#journeyCreation[data-role=page]:not(.lighttext)      [data-role=header] * #previousButton{
 padding: var(--size-none);
 padding-left: var(--space-2xs);
}

.sharedInfoWrapper > textarea.ui-input-text{
  resize: none;
  background-color: var(--color-white-20);
  border: var(--border-0);
  color: white;
  min-height: var(--size-140);
}

@media(max-width: 500px), (max-height: 500px) and (orientation: landscape){

    .rating_summary_card .rating_summary_card_content{
        display: flex;
        flex-direction: column;
    }

    .rating_summary_card .rating_average_section .rating_average{
        font-size: var(--text-xl-px);
    }

    .rating_summary_card .rating_average_section .separator{
        display: block;
        padding: var(--size-none) var(--space-3xs);
    }

    .rating_summary_card .rating_summary_card_content .rating_average_section{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .rating_summary_card .rating_average_section .separator{
        padding: var(--size-none) var(--space-2xs);
        flex-direction: row;
        display: flex;
        align-items: center;
    }

    .rating_summary_card .rating_average_section{
        padding: var(--size-none);
    }

    .onboardingSignupFormWrapper .largeLabel{
        font-size: var(--text-xl-px);
        line-height: 29px;
        font-weight: 900;
        margin-bottom: var(--space-sm) !important;
        padding: 0 var(--space-2xs);
    }
    .onboardingSignupFormWrapper .signUpFormWrapper{
        display: block;
        width: var(--size-full);
        height: var(--size-full);
        max-width: 1050px;
        margin: auto;
        padding: var(--space-sm);
        box-sizing: border-box;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .onboardingSignupFormWrapper #trebbleCategoryField-button,
    .onboardingSignupFormWrapper #trebbleLanguageField-button,
    .onboardingSignupFormWrapper #isJourneyFreeField-button,
    .onboardingSignupFormWrapper #trebbleVisibiltiyField-button,
    .onboardingSignupFormWrapper #journeyCostField-button,
    .onboardingSignupFormWrapper #trebbleTimezoneField-button,
    .onboardingSignupFormWrapper .trebbleCategoryWrapper .CustomSelectFieldView{
        font-size: var(--text-base-px);
    }

    .onboardingSignupFormWrapper .fieldDesc{
        font-size: var(--text-sm-px);
    }
    .onboardingSignupFormWrapper .trebbleCustomUrlInfoWrapper .urlPrefix{
        font-size: var(--text-md-px);
        padding-bottom: var(--space-2xs);
    }
    .onboardingSignupFormWrapper .trebbleNameInfoWrapper input ,
    .onboardingSignupFormWrapper .carouselItem input ,
    .onboardingSignupFormWrapper .trebbleCustomUrlInfoWrapper input{
        font-size: var(--text-md-px);

    }

    .trebbleNameInfoWrapper.successValidation .successValidationMessageBox #checkIcon,
    .trebbleNameInfoWrapper.failValidation .failValidationMessageBox #failureIcon,
    .trebbleDescriptionfoWrapper.successValidation .successValidationMessageBox #checkIcon,
    .trebbleDescriptionfoWrapper.failValidation .failValidationMessageBox #failureIcon ,
    .journeyGoalWrapper.successValidation .successValidationMessageBox #checkIcon,
    .journeyGoalWrapper.failValidation .failValidationMessageBox #failureIcon {
      font-size: var(--text-base-px);
      margin: var(--size-none);
      margin-right: var(--border-6);
  }

  .onboardingSignupFormWrapper .trebbleDescriptionfoWrapper textarea,
  .onboardingSignupFormWrapper .journeyGoalWrapper textarea {
    font-size: var(--text-base-px);

}




body.white-theme div#onboardingSignupPage[data-role=page]:not(.lighttext) [data-role=header] * #nextButton.tag.actionButton, 
body.white-theme div#onboardingSignupPage[data-role=page]:not(.lighttext) [data-role=header] * #previousButton,
body.white-theme div#trebbleSetup[data-role=page]:not(.lighttext) [data-role=header] * #nextButton.tag.actionButton, 
body.white-theme div#trebbleSetup[data-role=page]:not(.lighttext) [data-role=header] * #previousButton,
body.white-theme div#trebbleSetup[data-role=page]:not(.lighttext) [data-role=header] * #saveButtonIcon,
body.white-theme div#journeyCreation[data-role=page]:not(.lighttext) [data-role=header] * #nextButton.tag.actionButton, 
body.white-theme div#journeyCreation[data-role=page]:not(.lighttext) [data-role=header] * #previousButton,
body.white-theme div#journeyCreation[data-role=page]:not(.lighttext) [data-role=header] * #saveButtonIcon{
  padding: var(--size-none) var(--space-2xs);
  border: var(--border-0);

}

.trebbleNameInfoWrapper.showWaitMessage .waitMessageBox #trebbleCustomLoadingWidget {
    display: inline-block;
    margin: var(--size-none);
    margin-right: var(--space-2xs);
    width: 23px;
    height: var(--size-14);
}
.inline_flex_collection{
    flex-direction:column;
    align-items: center;
}

}


.onboardingSignupFormWrapper.listenerOnboardinOnly  .trebbleNameInfoWrapper,
.onboardingSignupFormWrapper.listenerOnboardinOnly  .trebbleDescriptionfoWrapper,
.onboardingSignupFormWrapper.listenerOnboardinOnly  .journeyGoalWrapper,
.onboardingSignupFormWrapper.listenerOnboardinOnly  .trebbleCategoryWrapper,
.onboardingSignupFormWrapper.listenerOnboardinOnly  .trebbleCustomUrlInfoWrapper,
.onboardingSignupFormWrapper.listenerOnboardinOnly  .rssFeedURLInfoWrapper,
.onboardingSignupFormWrapper.creatorWithoutFlashBriefing  .rssFeedURLInfoWrapper,
.onboardingSignupFormWrapper.creatorOnboardingOnly  .chooseProfileTypeWrapper,
.onboardingSignupFormWrapper:not(.showWelcomeMessage) .welcomeMessageWrapper {
    visibility: hidden;

}


#onboardingSignupPage .chooseProfileTypeWrapper a.actionButton,
#onboardingSignupPage .welcomeMessageWrapper a.actionButton,
#trebbleSetup .chooseProfileTypeWrapper a.actionButton,
#trebbleSetup .welcomeMessageWrapper a.actionButton,
#journeyCreation .chooseProfileTypeWrapper a.actionButton,
#journeyCreation .welcomeMessageWrapper a.actionButton{
  max-width: var(--size-300);
}

.onboardingSignupFormWrapper .welcomeMessageWrapper .largeLabel {
  text-align:center;
}

.onboardingSignupFormWrapper .chooseProfileTypeWrapper .largeLabel,
.onboardingSignupFormWrapper .welcomeMessageWrapper .largeLabel{
    margin-bottom: var(--space-md);
}

.onboardingSignupFormWrapper .welcomeMessageWrapper .fieldDesc{
    text-align: center;
    max-width:var(--size-700);
    margin-bottom: var(--space-md);
}
.onboardingSignupFormWrapper .chooseProfileTypeWrapper .fieldDesc{
    margin-top: var(--space-md);
    font-size: var(--text-sm-px);
}

.onboardingSignupFormWrapper.listenerOnboardinOnly .signUpFormWrapper .largeLabel,
.onboardingSignupFormWrapper.listenerOnboardinOnly .signUpFormWrapper .fieldDesc{
    display: none;
}

.onboardingSignupFormWrapper:not(.listenerOnboardinOnly) .signUpFormWrapper .icon-trebbleLogo,
.onboardingSignupFormWrapper:not(.listenerOnboardinOnly) .signUpFormWrapper .icon-trebblelogofull{
  display:none !important;
}

.onboardingSignupFormWrapper  .owl-wrapper-outer,
.onboardingSignupFormWrapper .owl-wrapper-outer .owl-wrapper,
.onboardingSignupFormWrapper .owl-wrapper-outer .owl-wrapper .owl-item
{
  height: var(--size-full);
  height: calc(var(--vh-full) - var(--size-100));
  overflow: auto;
}


[data-role=page]#onboardingSignupPage > .ui-content  #SignUpForm{
  display: flex;
  margin: auto;
}
[data-role=page]#onboardingSignupPage > .ui-content  #SignUpForm > a.actionButton{
  height: var(--size-50);
}


.menuIcon.pe-7s-photo-gallery,
.menuIcon.pe-7s-albums {
    position: relative
}


#fabAddButtonContainer #addCapsuleFabBtn > .pe-7s-micro,
#fabAddButtonContainer #addSongFabBtn > .pe-7s-photo-gallery{
  font-size: var(--text-xl-px);
}

.menuIcon.pe-7s-photo-gallery>.ion-contrast,
.menuIcon.pe-7s-albums>.pe-7s-radio{
    position: absolute;
    font-size: var(--text-2xs-px);
    left: 8px;
    top: 8px
}
.menuIcon.pe-7s-albums>.pe-7s-radio{
    left: 6px;
}

.playlistDetailsPage .textContent .socialInfos{
    display: none;
}

.playlistDetailsPage .actionButtonWrapper{
  /*flex-direction:column;*/
  flex-direction:column-reverse;
}

.playlistDetailsPage.publicPage:not(.showBackButton)  #exploreTrebblesBtn{

    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--size-none) var(--space-sm);
    border: var(--border-2) solid white;
    margin: var(--border-4);
    color: white;
    cursor: pointer;
    display: none !important;

}
body.mobileweb .playlistDetailsPage.publicPage:not(.showBackButton)  #exploreTrebblesBtn:hover,
.playlistDetailsPage.publicPage:not(.showBackButton)  #exploreTrebblesBtn:active{
 background-color: white;
 color:var(--trebble-primary);
}


.playlistDetailsPage:not(.publicPage) .bioWrapper .trebbleName,
/*.playlistDetailsPage:not(.publicPage)  .icon-trebbleLogo,*/
.playlistDetailsPage.showBackButton .icon-trebbleLogo,
.playlistDetailsPage.showBackButton .icon-trebblelogofull,
.playlistDetailsPage:not(.publicPage)  .actionButtonWrapper #followingBtn,
.playlistDetailsPage:not(.publicPage)  .actionButtonWrapper #purchasedBtn,
.playlistDetailsPage:not(.publicPage)  .actionButtonWrapper #followBtn,
.playlistDetailsPage:not(.publicPage)  .actionButtonWrapper #buyNowBtn,
.playlistDetailsPage:not(.publicPage)  .trebbleInfo .bioWrapper .listeningInstructionsBox,
.playlistDetailsPage:not(.publicPage) #exploreTrebblesBtn,
.playlistDetailsPage.showBackButton #exploreTrebblesBtn,
.playlistDetailsPage.publicPage .trebbleInfo .bioWrapper  .listeningInstructionsBox,
.playlistDetailsPage.publicPage #trebblewarning.show {
    display: none !important;
}

.playlistDetailsPage:not(.publicPage) .actionButtonWrapper{
  /*flex-direction:column;*/
  flex-direction:column-reverse;
}
.playlistDetailsPage.publicPage .bioWrapper .trebbleName{
    display: block;
    font-size: var(--text-4xl);
    font-weight: 900;
}

.playlistDetailsPage.publicPage #myCapsulesListWrapper > div > div,
.playlistDetailsPage.publicPage #myArchivedCapsulesListWrapper > div > div{
    height: -moz-fit-content !important;
    height: fit-content !important;
}
.playlistDetailsPage.publicPage #myCapsulesListWrapper #collection_repeat_container,
.playlistDetailsPage.publicPage #myArchivedCapsulesListWrapper #collection_repeat_container{
    text-align:center;
}

.trebble_audio_list_item.isCurrentlyLoading .playIconWrapper,
.trebble_audio_list_item.isCurrentlyLoading .pauseIconWrapper,
.trebble_audio_list_item.isCurrentlyPlaying .playIconWrapper,
.trebble_audio_list_item:not(.isCurrentlyPlaying) .pauseIconWrapper,
.trebble_audio_list_item:not(.isCurrentlyLoading) .loadingIconWrapper,
.playlistDetailsPage:not(.publicPage) #fullCoverArtImage #playbTrebbletn,
.playlistDetailsPage:not(.publicPage) #fullCoverArtImage #loadingIndicator,
.playlistDetailsPage:not(.publicPage) #fullCoverArtImage #stopTrebbletn,
.journeyPage.playlistDetailsPage.publicPage.isCurrentlyPlaying #fullCoverArtImage #stopTrebbletn,
.playlistDetailsPage.publicPage.isCurrentlyPlaying #fullCoverArtImage #playbTrebbletn,
.playlistDetailsPage.publicPage.isCurrentlyLoading #fullCoverArtImage #playbTrebbletn,
.playlistItem.withLargeAlbumArt.isCurrentlyPlaying > .itemContent > .coverArt > div > .playButton,
.playlistItem.withLargeAlbumArt.isCurrentlyLoading > .itemContent > .coverArt > div > .playButton,
.playlistDetailsPage.isCurrentlyPlaying:not(.publicPage) #startRadioBtn,
.playlistDetailsPage.isCurrentlyLoading:not(.publicPage) #startRadioBtn,
.playlistDetailsPage.publicPage:not(.isCurrentlyPlaying) #fullCoverArtImage #stopTrebbletn,
.playlistItem.withLargeAlbumArt:not(.isCurrentlyPlaying) > .itemContent > .coverArt > div > .stopButton,
.playlistItem.withLargeAlbumArt:not(.isCurrentlyPlaying) > .itemContent > .coverArt > div > .loadingIndicator,
.playlistDetailsPage.publicPage:not(.isCurrentlyLoading) #fullCoverArtImage #loadingIndicator,
.playlistDetailsPage:not(.isCurrentlyPlaying):not(.publicPage)  #pauseRadioBtn,
.playlistDetailsPage:not(.isCurrentlyLoading):not(.publicPage)  #loadingRadioBtn {
  display: none;
}

.playlistItem.notPlayable .playButton,
.playlistItem.notPlayable .stopButton,
.playlistItem.notPlayable .loadingIndicator {
    display: none !important;
}

.playlistDetailsPage.publicPage:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) #fullCoverArtImage #playbTrebbletn,
.playlistDetailsPage.publicPage.isCurrentlyPlaying #fullCoverArtImage #stopTrebbletn,
.playlistDetailsPage.publicPage.isCurrentlyLoading #fullCoverArtImage #loadingIndicator{

    margin: auto;
    width: var(--size-40);
    height: var(--size-40);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--color-black-20);

}

/** THE FOLLOWING CSS HIGHTLIGHTS THE MAIN BUTTONS ON A TREBBLE PAGE - START ***/
.playlistDetailsPage.publicPage.isCurrentlyPlaying #fullCoverArtImage #stopTrebbletn,
.playlistDetailsPage.publicPage:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) #fullCoverArtImage #playbTrebbletn {
    background-color: var(--trebble-primary);
    border-color:var(--trebble-primary);
    transition: all .1s ease-in-out;
    color: white;
    box-shadow: var(--shadow-bottom);
}
.playlistDetailsPage #followingBtn,
.playlistDetailsPage #purchasedBtn{
 /* border-color:var(--trebble-primary);
 background-color: var(--trebble-primary); 
 color: white;*/
 border-color:var(--color-gray-150);
 background-color: var(--color-gray-150);
 color: var(--text-dark);
 padding: var(--size-none);
}
/*
body.browser.mobileweb .playlistDetailsPage #followBtn:hover,
.playlistDetailsPage #followBtn:active{
    border-color: var(--trebble-primary);
    background-color: transparent;
    color: var(--trebble-primary) !important;
    }*/
    .hightlightBtn > span,
    .playlistDetailsPage #followBtn > span,
    .playlistDetailsPage #buyNowBtn > span{
        display: flex;
        padding: var(--border-4) var(--space-lg);
    }
    .hightlightBtn > span{
     padding: var(--border-4) var(--space-sm);
 }

 body.mobileweb .playlistDetailsPage.publicPage.isCurrentlyPlaying #fullCoverArtImage #stopTrebbletn:hover,
 body.mobileweb .playlistDetailsPage.publicPage:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) #fullCoverArtImage #playbTrebbletn:hover,
 .playlistDetailsPage.publicPage.isCurrentlyPlaying #fullCoverArtImage #stopTrebbletn:active,
 .playlistDetailsPage.publicPage:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) #fullCoverArtImage #playbTrebbletn:active{
    transform: scale(1.09);
}
/** THE FOLLOWING CSS HIGHTLIGHTS THE MAIN BUTTONS ON A TREBBLE PAGE - END ***/

.playlistDetailsPage:not(.isCurrentlyPlaying):not(.isCurrentlyLoading):not(.publicPage)  #startRadioBtn,
.playlistDetailsPage.isCurrentlyPlaying:not(.publicPage)  #pauseRadioBtn,
.playlistDetailsPage.isCurrentlyLoading:not(.publicPage)  #loadingRadioBtn {
  display:flex;
  width: var(--size-240);

}
.playlistDetailsPage:not(.publicPage) #myCapsulesListWrapper #collection_repeat_container,
.playlistDetailsPage:not(.publicPage) #myArchivedCapsulesListWrapper #collection_repeat_container{
  text-align: center;
}
.playlistDetailsPage.publicPage #fullCoverArtImage #playbTrebbletn > i,
.playlistDetailsPage.publicPage #fullCoverArtImage #stopTrebbletn > i,
.playlistDetailsPage.publicPage.isCurrentlyLoading #fullCoverArtImage #loadingIndicator {
  color: white;
  font-size: var(--text-6xl-px);

}
.playlistDetailsPage.publicPage #fullCoverArtImage #playbTrebbletn > i{

  padding-left: var(--space-2xs);
}



.playlistDetailsPage.publicPage #startRadioBtn,
.playlistDetailsPage.publicPage #loadingRadioBtn,
.playlistDetailsPage.publicPage #pauseRadioBtn,
[data-role=page].playlistDetailsPage.publicPage:not(.journeyPage) .flexUpperContentWrapper > div.trebbleInfo > .bioWrapper #followingBtn,
[data-role=page].playlistDetailsPage.publicPage:not(.journeyPage) .flexUpperContentWrapper > div.trebbleInfo > .bioWrapper #purchasedBtn,
[data-role=page].playlistDetailsPage.publicPage:not(.journeyPage) .flexUpperContentWrapper > div.trebbleInfo > .bioWrapper #followBtn,
[data-role=page].playlistDetailsPage.publicPage:not(.journeyPage) .flexUpperContentWrapper > div.trebbleInfo > .bioWrapper #buyNowBtn {
    display: none !important;
}

.playlistDetailsPage.publicPage:not(.showBackButton) .icon-trebbleLogo,
.playlistDetailsPage.publicPage:not(.showBackButton) .icon-trebblelogofull{
    position: absolute;
    font-size: var(--text-lg-px);
    top:0px;
    color: white;
    opacity: 1;
    margin: auto;
    margin-top: var(--space-xl);
    text-align: center;
    width: var(--size-200);
    left: calc( var(--size-half) - var(--size-100));
    -moz-flex-line-pack: center;
    align-content: center;
    -webkit-align-content: center;
    -webkit-box-orient: horizontal;
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    z-index: 2;
}

.playlistDetailsPage.publicPage:not(.showBackButton) > div[data-role=header]  #header-back-button,
.playlistDetailsPage.publicPage > div[data-role=header]  #pageHeaderTitleWrapper,
.playlistDetailsPage.publicPage > div[data-role=header]  #menuOptionButton{
    display: none;
}

.flexUpperContentWrapper > div.trebbleInfo > .bioWrapper{
    padding: var(--space-sm) var(--space-lg);
    box-sizing:border-box;
    text-align:center;
    position: relative;
    z-index: 2;
    width: var(--size-full);

}
.flexUpperContentWrapper > div.trebbleInfo > .bioWrapper > .textContent {
    padding: var(--space-2xs) var(--size-none);
}

.playlistDetailsPage:not([trailer_available=true]) #playTrailerBtn{
    display: none;
}

.hightlightBtn,
.playlistDetailsPage #playTrailerBtn,
.playlistDetailsPage #followBtn,
.playlistDetailsPage #buyNowBtn,
.playlistDetailsPage #followingBtn,
.playlistDetailsPage #purchasedBtn,
.trebbleSubscribeSuggestionContent #followBtn,
.trebbleSubscribeSuggestionContent #buyNowBtn{
    width: -moz-fit-content;
    width: fit-content;
    max-width: var(--size-200);
    text-align: center;
    height: var(--size-46);
    margin: auto;
    z-index: 2;

}

.hightlightBtn,
.playlistDetailsPage #playTrailerBtn,
.playlistDetailsPage #followBtn, 
.playlistDetailsPage #buyNowBtn, 
.playlistDetailsPage #followingBtn,
.playlistDetailsPage #purchasedBtn{
    background-color: white;
    border-color: white;
    color: black !important;
    margin-top: var(--space-3xs);
    margin-bottom: var(--space-3xs); 
}

.playlistDetailsPage #purchasedBtn{
    color: white !important;
    background-color: transparent;
    border-color: transparent;
    cursor: default;
    height: var(--size-20);
}

body.browser.mobileweb  .playlistDetailsPage #purchasedBtn:hover,
.playlistDetailsPage #purchasedBtn:active{
   color: white !important;
}

.playlistDetailsPage #playTrailerBtn{
    background-color: transparent;
    border-color: white;
    color: white !important;
    margin-top: var(--space-3xs);
    margin-bottom: var(--space-3xs); 
}

.hightlightBtn,
.playlistDetailsPage #playTrailerBtn, 
.playlistDetailsPage #followBtn,
.playlistDetailsPage #buyNowBtn, 
.playlistDetailsPage #followingBtn,
.playlistDetailsPage #purchasedBtn{
    max-width: var(--size-300);
    width: var(--size-full);
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){
    .hightlightBtn,
    .playlistDetailsPage #playTrailerBtn,
    .playlistDetailsPage #followBtn,
    .playlistDetailsPage #buyNowBtn, 
    .playlistDetailsPage #followingBtn,
    .playlistDetailsPage #purchasedBtn{
        max-width: var(--size-500);
        width: var(--size-full);
    }
}

.playlistDetailsPage:not(.journeyPage) .actionButtonWrapper > #playTrailerBtn,
.playlistDetailsPage:not(.journeyPage) .actionButtonWrapper > #followBtn, 
.playlistDetailsPage:not(.journeyPage) .actionButtonWrapper > #buyNowBtn, 
.playlistDetailsPage:not(.journeyPage) .actionButtonWrapper > #followingBtn,
.playlistDetailsPage:not(.journeyPage) .actionButtonWrapper > #purchasedBtn{
    width: calc(var(--size-full) - var(--space-lg));
}

.playlistDetailsPage #followingBtn, 
.playlistDetailsPage #purchasedBtn, 
.trebbleSubscribeSuggestionContent #followBtn,
.trebbleSubscribeSuggestionContent #buyNowBtn{
    padding: var(--border-4) var(--space-lg);
}
[data-role=page].lighttext .flexUpperContentWrapper > div.trebbleInfo > .bioWrapper,
[data-role=page].lighttext.playlistDetailsPage #contentWrapper {
    color: white;
}

.playlistDetailsPage.journeyPage .left-right-content-padding{
    max-width: var(--size-900);
    margin: auto;
}

.playlistDetailsPage .artistDetailCoverArtWrapper{
  position:absolute;
  width: var(--size-full);
  background-size: 500%;
  /*filter: blur(20px);*/
}
.flexUpperContentWrapper > #fullCoverArtImage,
body.browser > .playlistDetailsPage * div#fullCoverArtImage{
    position:relative;
    top:auto ;
    margin-top: var(--size-100);
}

.flexUpperContentWrapper{ 
    position: relative;
    -moz-flex-direction: column;
    flex-direction: column;
    display: -moz-flexbox;
    display: flex;
    display: -moz-flex;
}
/*
.playlistDetailsPage .flexUpperContentWrapper > #fullCoverArtImage > .overlay,
.playlistDetailsPage .flexUpperContentWrapper > #fullCoverArtImage > .playButton{
    display: none;
}

.playlistDetailsPage .flexUpperContentWrapper > #fullCoverArtImage:hover > .overlay,
.playlistDetailsPage .flexUpperContentWrapper > #fullCoverArtImage:active > .overlay{
    display: block;
    width: var(--size-full);
    height: var(--size-full);
    position: absolute;
    background-color: var(--color-black-60);
}
.playlistDetailsPage .flexUpperContentWrapper > #fullCoverArtImage:hover > .playButton,
.playlistDetailsPage .flexUpperContentWrapper > #fullCoverArtImage:active > .playButton{

    font-size: var(--text-7xl-px);
    color: white;
    font-weight: bold;
    width: var(--size-70);
    height: var(--size-70);
    -ms-flex-line-pack: center;
    -moz-flex-line-pack: center;
    align-content: center;
    -webkit-align-content: center;
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-flex-direction: column;
    display: -ms-flexbox;
    display: -moz-flexbox;
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    border-radius: 50%;
    border: var(--border-2) solid white;
    z-index: 1;

}

*/

.playlistDetailsPage > #contentWrapper > .flexUpperContentWrapper #fullCoverArtImage.nocoverimage{
    background-color: var(--color-white-10);
}
.playlistDetailsPage:not(.publicPage) #fullCoverArtImage.nocoverimage:hover > #editTrebbleCoverPicBtn {
  display:block;
  border: var(--border-0);
}

.playlistDetailsPage .playlistShortcutButtonsWrapper #showStatistics{
    display:none;
}
.WelcomeBetaUserBox{
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    border: var(--border-4) solid white;
}

.WelcomeBetaUserBox .utterance{
  font-weight: bold;
}

.instructionBox  .utterance{
    color: black;
    font-size: 80%;
    display: block;
    font-weight: normal;
}

.instructionBox  .utterance a{
    text-decoration: underline;
    color: black;
    font-weight: bold;
}
.listeningInstructionBox{

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;

}
.listeningInstructionBox .assistantNameTitle{
    font-size: 80%;
    font-weight: 900;
    margin-bottom: var(--space-sm);
}

.listeningInstructionBox .instructionBox{
    box-sizing: border-box;
    flex:0 0 50%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.listeningInstructionBox .googleAssistantLogo.assistantLogo{

    width: var(--size-40);
    height: var(--size-40);
    margin: var(--space-sm) var(--size-none);

}

.listeningInstructionBox .bixbyLogo.assistantLogo{

    width: var(--size-30);
    height: var(--size-30);
    margin: var(--text-xl-px) var(--size-none);

}

.listeningInstructionBox .alexaLogo.assistantLogo{

    width: var(--size-50);
    height: var(--size-50);
    margin: var(--space-xs) var(--size-none);


}

.chatbubble,
a.chatbubble,
html .ui-page-theme-a .chatbubble,
html .ui-page-theme-a a.chatbubble{    
    border: var(--border-2) solid white;
    max-width: var(--size-300);
    background: var(--text-light);
    padding: var(--text-sm-px);
    text-align: center;
    font-weight: 900;
    color: var(--text-dark);
    position: relative;
}
.chatbubble.left:before{
    content: "";
    width: var(--size-0);
    height: var(--size-0);
    position: absolute;
    border-left: var(--border-4) solid  var(--text-light);
    border-right: var(--border-4) solid transparent;
    border-top: var(--border-4) solid  var(--text-light);
    border-bottom: var(--border-4) solid transparent;
    left: 19px;
    bottom: -10px;
}
.chatbubble.right:before{
    content: "";
    width: var(--size-0);
    height: var(--size-0);
    position: absolute;
    border-left: var(--border-4) solid transparent;
    border-right: var(--border-4) solid var(--text-light);
    border-top: var(--border-4) solid var(--text-light);
    border-bottom: var(--border-4) solid transparent;
    right: 19px;
    bottom: -10px;
}
.chatbubble.right.small:before{
    bottom: -10px;
    right: 10px;
}
.chatbubble.left.small:before{
    left: 10px;
    bottom: -10px;
}
.chatbubble{
    width: calc(var(--size-full) - var(--space-lg));
}

body.browser.mobileweb .chatbubble.clickable:hover,
.chatbubble.clickable:active{
    background-color:transparent;
    color:white;
    cursor:pointer;
    border-color:white;
}

body.browser.mobileweb [data-role=page]:not(.lighttext) .chatbubble.clickable:hover,
[data-role=page]:not(.lighttext) .chatbubble.clickable:active{
    background-color:transparent;
    color:var(--text-dark);
    cursor:pointer;
    border-color:var(--text-dark);
}


body.browser.mobileweb [data-role=page]:not(.lighttext) .chatbubble.clickable.right:hover:before,
[data-role=page]:not(.lighttext) .chatbubble.clickable.right:active:before{
    border-top-color:var(--text-dark);
    border-right-color:var(--text-dark);
}

body.browser.mobileweb [data-role=page]:not(.lighttext) .chatbubble.clickable.left:hover:before,
[data-role=page]:not(.lighttext) .chatbubble.clickable.left:active:before{
    border-top-color:var(--text-dark);
    border-left-color:var(--text-dark);
}

html .chatbubble.alexaInstruction,
html a.chatbubble.alexaInstruction{
    color: var(--color-blue-500);
}



html .chatbubble.googleInstruction,
html a.chatbubble.googleInstruction{
    color: var(--trebble-primary-dark);
}

.listeningInstructionsBox.transparentChatbubble  .chatbubble{
    background-color: transparent;
    color: white !important;
}

.listeningInstructionsBox[instructiontoshow=all] .listeningInstructionBox .instructionBox .utteranceInstruction,
.listeningInstructionsBox[instructiontoshow=all] .showAllInstructionsButton,
.listeningInstructionsBox  .utteranceAdditionalInstruction{
    display: none;

}
.listeningInstructionsBox[instructiontoshow=all] .instructions{
    height: var(--size-90);
}

.listeningInstructionsBox:not([instructiontoshow=all]) .instructions{
    height: auto;
}


body.mobileweb .listeningInstructionsBox[instructiontoshow=all] .instructionBox:hover,
.listeningInstructionsBox[instructiontoshow=all] .instructionBox:active{
    background-color:var(--color-white-10);
}

.jouney_summary_detail_item {
   display: block;
   text-align: center;
   /*font-size: var(--text-base-px);*/
   margin: var(--space-3xs) 0;
}

.jouney_summary_detail_item .logo_icon{    
    margin-right: var(--space-2xs);
    margin-left: var(--space-2xs);
    -webkit-text-stroke-width: var(--size-1);
    display: inline;
}

.jouney_summary_detail_item.number_of_days_info{
    display: none;
}




.listeningInstructionsBox:not([instructiontoshow=all]) .showAllInstructionsButton{
    display: block;
    background-color: transparent;
    border: var(--border-2) solid var(--bg-light);
    color: white;
    padding: var(--space-2xs);
    font-weight: 900;
    max-width: var(--size-170);
    margin: var(--space-2xs) auto;
    cursor: pointer;
    font-size: 90%;
}

body.mobileweb .listeningInstructionsBox:not([instructiontoshow=all]) .showAllInstructionsButton:hover,
.listeningInstructionsBox:not([instructiontoshow=all]) .showAllInstructionsButton:active{
    background-color: var(--bg-light);
    border: var(--border-2) solid var(--bg-light);
    color: var(--text-dark);
}

.listeningInstructionsBox[instructiontoshow=all] .listeningInstructionBox .instructionBox{
    flex: 0 0 auto;
    min-width: var(--size-80);
}



.listeningInstructionsBox[instructiontoshow=googleassistant] .listeningInstructionBox .instructionBox:not(.googleInstructionBox){
    display: none;
}

.listeningInstructionsBox[instructiontoshow=googleassistant] .listeningInstructionBox .instructionBox.googleInstructionBox{
    flex: 0 0 50%;
}
.listeningInstructionsBox[instructiontoshow=googleassistant] .listeningInstructionBox .instructionBox.googleInstructionBox .utteranceInstruction{
    display: block;
}

.listeningInstructionsBox[instructiontoshow=googleassistant] .utteranceAdditionalInstruction.googleInstructionBox,
.listeningInstructionsBox[instructiontoshow=amazonalexa]  .utteranceAdditionalInstruction.amazonInstructionBox,
.listeningInstructionsBox[instructiontoshow=samsungbixby]  .utteranceAdditionalInstruction.samsungInstructionBox
{
    display: block;
    max-width: var(--size-400);
    margin: auto;
}


.listeningInstructionsBox[instructiontoshow=amazonalexa] .listeningInstructionBox .instructionBox:not(.amazonInstructionBox){
    display: none;
}

.listeningInstructionsBox[instructiontoshow=amazonalexa] .listeningInstructionBox .instructionBox.amazonInstructionBox{
    flex: 0 0 50%;
}
.listeningInstructionsBox[instructiontoshow=amazonalexa] .listeningInstructionBox .instructionBox.amazonInstructionBox .utteranceInstruction{
    display: block;
}





.listeningInstructionsBox[instructiontoshow=samsungbixby] .listeningInstructionBox .instructionBox:not(.samsungInstructionBox){
    display: none;
}

.listeningInstructionsBox[instructiontoshow=samsungbixby] .listeningInstructionBox .instructionBox.samsungInstructionBox{
    flex: 0 0 50%;
}
.listeningInstructionsBox[instructiontoshow=samsungbixby] .listeningInstructionBox .instructionBox.samsungInstructionBox .utteranceInstruction{
    display: block;
}



body.browser.mobileweb .WelcomeBetaUserBox .actionButtonSet .transparent_button:hover,
body.browser.mobileweb .WelcomeBetaUserBox .actionButtonSet .transparent_button:active{
  background-color:transparent;
  color: white !important;
}

.WelcomeBetaUserBox .details > div{
  padding: var(--space-2xs) var(--size-none);
}

.WelcomeBetaUserBox .actionButtonSet .transparent_button{
  background-color:white;
  color: var(--text-dark);
}

.WelcomeBetaUserBox #whatsacapsuleBtn span,
.WelcomeBetaUserBox #createMyFirstCapsule span{
    margin-right: var(--space-2xs);
    font-size: var(--text-xl-px);
}

.WelcomeBetaUserBox .details > div > a{
  color:white;
  text-decoration: underline;
}

.WelcomeBetaUserBox .actionButtonSet{
    width: var(--size-full);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.WelcomeBetaUserBox .actionButtonSet .transparent_button{
    height: var(--size-50);
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: var(--border-3);
    font-size: var(--text-md);
    font-weight:900;
    padding: var(--size-none) var(--space-lg);
}

@media(max-width: 500px){

 .WelcomeBetaUserBox{
    border:var(--border-0);
    padding: var(--space-2xs);
}

.WelcomeBetaUserBox .details > div{
    padding: var(--space-2xs) var(--size-none);
}

div[data-role=popup].whatsnew .WelcomeBetaUserBox  .details{
    font-size: var(--text-sm-px);
    padding: var(--space-2xs);
}

div[data-role=popup].whatsnew .WelcomeBetaUserBox > .header{
    font-size: var(--text-xl);
}
.WelcomeBetaUserBox .actionButtonSet {
    flex-direction:column;
}

.WelcomeBetaUserBox .actionButtonSet .transparent_button{
    margin: var(--space-2xs) var(--size-none);
}

.listeningInstructionBox .assistantNameTitle{
    margin: var(--space-2xs);
}


}

.playlistDetailsPage .listeningInstructionsBox .trebbleName {
    /* font-weight:700 */
}
.playlistDetailsPage .listeningInstructionsBox .trebbleName::before{
    content: "\"";
}

.playlistDetailsPage .listeningInstructionsBox .trebbleName::after{
    content: "\"";
}

.playlistDetailsPage .listeningInstructionsBox .utterance .trebbleName::after,
.playlistDetailsPage .listeningInstructionsBox .utterance .trebbleName::before,
.playlistDetailsPage .listeningInstructionsBox .chatbubble .trebbleName::after, 
.playlistDetailsPage .listeningInstructionsBox .chatbubble .trebbleName::before{
    content: "";
}

.playlistDetailsPage .listeningInstructionsBox .supportedAssistants .alexaLogo,
.operationProgressPopupContent .listeningInstructionsBox .supportedAssistants .alexaLogo{

    width: var(--size-50);
    height: var(--size-50);

}

.playlistDetailsPage .listeningInstructionsBox .supportedAssistants .googleAssistantLogo,
.operationProgressPopupContent .listeningInstructionsBox .supportedAssistants .googleAssistantLogo{

    width: var(--size-30);
    height: var(--size-30);
    padding: var(--space-2xs);


}

@media(min-width: 500px), (min-height: 500px) and (orientation: landscape){
    .operationProgressPopupContent .listeningInstructionsBox .supportedAssistants .alexaLogo{

        width: var(--size-100);
        height: var(--size-100);

    }

    .operationProgressPopupContent .listeningInstructionsBox .supportedAssistants .googleAssistantLogo{

        width: var(--size-60);
        height: var(--size-60);
        padding: var(--space-sm);


    }
    .listeningInstructionBox .googleAssistantLogo.assistantLogo{

        width: var(--size-50);
        height: var(--size-50);
        margin: var(--space-sm) var(--size-none);

    }

    .listeningInstructionBox .bixbyLogo.assistantLogo{

        width: var(--size-40);
        height: var(--size-40);
        margin: var(--text-xl-px) var(--size-none);

    }

    .listeningInstructionBox .alexaLogo.assistantLogo{

        width: var(--size-60);
        height: var(--size-60);
        margin: var(--space-xs) var(--size-none);


    }
}
@media (max-width: 480px), (max-height: 480px) and   (orientation: landscape) {
    .playlistDetailsPage.publicPage:not(.showBackButton) .icon-trebbleLogo,
    .playlistDetailsPage.publicPage:not(.showBackButton) .icon-trebblelogofull{
        font-size: var(--text-lg-px);
    }

    body.browser > .playlistDetailsPage:not(.showBackButton) .flexUpperContentWrapper > #fullCoverArtImage, 
    body.browser > .playlistDetailsPage:not(.showBackButton) * div#fullCoverArtImage {
        margin-top: var(--size-100);
    }

    .flexUpperContentWrapper > #fullCoverArtImage, 
    body.browser > .playlistDetailsPage * div#fullCoverArtImage {

        margin-top: var(--space-xl);
    }
    .playlistDetailsPage .description_box_wrapper .playlistDescription{
        padding: var(--space-2xs) var(--space-sm) var(--space-sm);
    }
    /*.playlistDescription > div,*/
    .playlistDetailsPage .listeningInstructionsBox {

        font-size: 90%;

    }

    .flexUpperContentWrapper > div.trebbleInfo > .bioWrapper{
        padding: var(--space-sm) var(--space-sm);
    }
}


#loginPopupContentWrapper > div:first-child{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

#loginPopupContentWrapper #loginForm > a.actionButton{
    height: var(--size-50);
    padding: var(--space-2xs);
    width: auto;
}
#shareOptions {
  max-width: var(--size-800);
  height: calc(var(--size-full) - var(--text-9xl-px));
  text-align: center;
  display: block;
  margin: var(--space-xl) var(--space-md);
}
#shareOptions .shareOption{

  border: var(--border-3) solid white;
  
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-sizing: border-box;
  
  cursor:pointer;
}

#shareOptions #sharePlayerLinkBtn i.shareOption_icon.pe-7s-phone{
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
}

#shareOptions #sharePlayerLinkBtn i.shareOption_icon.pe-7s-phone > i{
 font-size: 30%;
 position: absolute;
 font-weight: 900;
 padding-bottom: var(--space-3xs);
}



@media (min-width: 800px){
  #shareOptions .shareOption {
    width: var(--size-300);
    height: var(--size-300);
    padding: var(--space-sm);
    margin: var(--space-sm);
}

.shareOption .shareOption_title {
  font-weight: bold;
  font-size: var(--text-lg-px);
  height: var(--size-100);
}

.shareOption .shareOption_icon {
  font-size: var(--text-7xl-px);
  margin: var(--space-2xs);
}

}

@media (max-width: 800px){
 #shareOptions .shareOption {
    width: calc(var(--size-full) - var(--space-lg));
    height: auto;
    display: block;
    padding: var(--space-lg) var(--space-sm);
    margin: var(--space-sm);
    box-sizing: border-box;
}

.shareOption .shareOption_title {
    font-size: var(--text-md-px);
    font-weight: 600;
    height: var(--size-100);
}
.shareOption .shareOption_icon {
  font-size: var(--text-3xl-px);
  margin: var(--space-2xs);
}

}


#shareOptions .shareOption:hover,
#shareOptions .shareOption:active {
  background-color: white;
  color: var(--trebble-primary);
}


#shareOptions.showSmartSpeakerInstructions,
#shareOptions.showSubscribePage ,
#shareOptions.showLinkToPlayer ,
#shareOptions.showSendCapsuleLink ,
#shareOptions.showFlashBriefingRSSLink ,
#shareOptions.showEmbedCode,
#shareOptions:not(.showSmartSpeakerInstructions) ~ #shareTrebblePopupContent,
#shareOptions:not(.showSubscribePage) ~ #shareTrebblePopupContent ,
#shareOptions:not(.showLinkToPlayer) ~  #shareTrebblePopupContent ,
#shareOptions:not(.showSendCapsuleLink) ~  #shareTrebblePopupContent ,
#shareOptions:not(.showFlashBriefingRSSLink) ~  #shareTrebblePopupContent ,
#shareOptions:not(.showEmbedCode) ~ #shareTrebblePopupContent  ,
#shareOptions:not(.showSmartSpeakerInstructions) ~ #shareTrebblePopupContent  #shareableGoogleHomeAmazonEchoLinkWrapper,
#shareOptions:not(.showSubscribePage) ~  #shareTrebblePopupContent #shareableSubscribePageLinkWrapper,
#shareOptions:not(.showLinkToPlayer) ~ #shareTrebblePopupContent  #shareableLinkWrapper,
#shareOptions:not(.showSendCapsuleLink) ~ #shareTrebblePopupContent  #sendCapsulePageLinkWrapper,
#shareTrebblePopupContent  #shareableWidgetNewsletterWrapper,
#shareableWidgetNewsletterWrapper[show_embedded_code=true] .htmlTableEmbed,
#shareableWidgetNewsletterColoredWrapper[show_embedded_code=true] .htmlTableEmbed,
#shareableWidgetNewsletterWrapper:not([show_embedded_code=true]) .shareableLink,
#shareableWidgetNewsletterColoredWrapper:not([show_embedded_code=true]) .shareableLink,

#shareableWidgetNewsletterWrapper[show_embedded_code=true] .shareNativeLinkButton,
#shareableWidgetNewsletterColoredWrapper[show_embedded_code=true] .shareNativeLinkButton,
#shareableWidgetNewsletterWrapper[show_embedded_code=true] .showEmbeddedCodeButton,
#shareableWidgetNewsletterColoredWrapper[show_embedded_code=true] .showEmbeddedCodeButton,
#shareableWidgetNewsletterWrapper:not([show_embedded_code=true]) .copyLinkButton,
#shareableWidgetNewsletterColoredWrapper:not([show_embedded_code=true]) .copyLinkButton,
#shareableWidgetNewsletterWrapper:not([show_embedded_code=true]) .showPreviewButton,
#shareableWidgetNewsletterColoredWrapper:not([show_embedded_code=true]) .showPreviewButton,

#shareTrebblePopupContent  #shareableWidgetNewsletterColoredWrapper,
#shareOptions:not(.showFlashBriefingRSSLink) ~ #shareTrebblePopupContent  #flashBriefingRssLinkWrapper,
#shareOptions:not(.showEmbedCode) ~ #shareTrebblePopupContent .newsletterEmbedThemeSelectorWrapper,
#shareOptions:not(.showEmbedCode) ~ #shareTrebblePopupContent  #trebblePlayerFooterAlwaysVisibleWidgetWrapper,
#shareOptions:not(.showEmbedCode) ~ #shareTrebblePopupContent   #shareableWidgetLandscapeWrapper,
#shareOptions:not(.showEmbedCode) ~ #shareTrebblePopupContent  #shareableWidgetSquareWrapper{
    display: none;
}


#shareOptions.showEmbedCode ~ #shareTrebblePopupContent[newsletter_theme=transparent]   #shareableWidgetNewsletterWrapper,
#shareOptions.showEmbedCode ~ #shareTrebblePopupContent[newsletter_theme=coloured]   #shareableWidgetNewsletterColoredWrapper,
#shareOptions.showSmartSpeakerInstructions ~ #shareTrebblePopupContent,
#shareOptions.showSubscribePage ~ #shareTrebblePopupContent ,
#shareOptions.showLinkToPlayer ~  #shareTrebblePopupContent,
#shareOptions.showSendCapsuleLink ~  #shareTrebblePopupContent,
#shareOptions.showFlashBriefingRSSLink ~  #shareTrebblePopupContent,
#shareOptions.showEmbedCode ~  #shareTrebblePopupContent {
    display: block;
}

.shareOption_icon.pe-7s-signal,
#onboardingSignupPage .chooseProfileTypeWrapper a.actionButton i.pe-7s-signal{
    transform: rotate(45deg);
}

#shareOptions.showSubscribePage ~ #shareableSubscribePageLinkWrapper{
    display: block;
}


#shareOptions.showLinkToPlayer ~ #shareableLinkWrapper{
    display: block;
}


#shareOptions.showSendCapsuleLink ~ #sendCapsulePageLinkWrapper{
    display: block;
}

#shareOptions.showFlashBriefingRSSLink ~ #flashBriefingRssLinkWrapper{
    display: block;
}


#shareOptions.showEmbedCode ~ #trebblePlayerFooterAlwaysVisibleWidgetWrapper,
#shareOptions.showEmbedCode ~ #shareableWidgetLandscapeWrapper,
#shareOptions.showEmbedCode ~ #shareableWidgetSquareWrapper{
    display: block;
}

#shareOptions.showSmartSpeakerInstructions ~ #shareableGoogleHomeAmazonEchoLinkWrapper{
    display: block;
}


#shareOptions.showSubscribePage ~ #shareableSubscribePageLinkWrapper{
    display: block;
}


#shareOptions.showLinkToPlayer ~ #shareableLinkWrapper{
    display: block;
}



#shareOptions.showEmbedCode ~ #trebblePlayerFooterAlwaysVisibleWidgetWrapper,
#shareOptions.showEmbedCode ~ #shareableWidgetLandscapeWrapper,
#shareOptions.showEmbedCode ~ #shareableWidgetSquareWrapper{
    display: block;
}


.operationProgressPopupContent[pending-operation-state=pending] #successBoxWrapper,
.operationProgressPopupContent[pending-operation-state=pending] #errorBoxWrapper,
.operationProgressPopupContent[pending-operation-state=success] #loadingBoxWrapper,
.operationProgressPopupContent[pending-operation-state=success] #errorBoxWrapper,
.operationProgressPopupContent[pending-operation-state=error] #loadingBoxWrapper,
.operationProgressPopupContent[pending-operation-state=error] #successBoxWrapper{
    display: none;
}



.operationProgressPopupContent[pending-operation-state=pending] #loadingBoxWrapper,
.operationProgressPopupContent[pending-operation-state=success] #successBoxWrapper,
.operationProgressPopupContent[pending-operation-state=error] #errorBoxWrapper{
    display: flex;
    height: var(--size-full);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: var(--size-full);
}
#OperationProgressPage .ui-panel-wrapper{
    background-color: white;
}
#successBoxWrapper .wrapper,
#errorBoxWrapper .wrapper{
    overflow: auto;
}
@media (min-width: 500px){
    .operationProgressPopupContent[pending-operation-state=pending] #loadingBoxWrapper .message,
    .operationProgressPopupContent[pending-operation-state=success] #successBoxWrapper .message,
    .operationProgressPopupContent[pending-operation-state=error] #errorBoxWrapper .message{
        font-size: var(--text-3xl-px);
        font-weight: 900;
        max-width: var(--size-700);
        text-align: center;
    }

    .operationProgressPopupContent[pending-operation-state=pending] #loadingBoxWrapper .progressContentWrapper,
    [data-role=popup] .progressContentWrapper{
        min-width: var(--size-500);
    }

    



    .operationProgressPopupContent[pending-operation-state=pending] #loadingBoxWrapper .messageDetails,
    .operationProgressPopupContent[pending-operation-state=success] #successBoxWrapper .messageDetails,
    .operationProgressPopupContent[pending-operation-state=error] #errorBoxWrapper .messageDetails{
        max-width: var(--size-700);
        text-align: center;
        font-size: var(--text-lg-px);
        padding: var(--space-sm);
        box-sizing: border-box;
    }

}


body.browser .operationProgressPopupContent #loadingImg{
  border: var(--border-2) solid var(--color-white-20);
  border-top-color: var(--color-white-90);

}

.operationProgressPopupContent .utterance{
  font-weight:bold;
}
a.utterance,
.playlistDetailsPage  .listeningInstructionsBox a.utterance{
  color: white ;
}
.operationProgressPopupContent{
    padding: var(--space-sm);
    height: var(--size-full);
    
    box-sizing: border-box;

}

.playlistDetailsPage:not(.publicPage) .loggedInUserAvatar{
    display: none;
}

.playlistDetailsPage.publicPage .loggedInUserAvatar{
    display: block;
    position: absolute;
    top: 5px;
    left: 15px;
    width: var(--size-40);
    height: var(--size-40);
    border-radius: 50%;
    cursor: pointer;
    -o-object-fit: cover;
       object-fit: cover;
    box-shadow: var(--shadow-ambient-lg);
    display: none;
}

.playlistDetailsPage.publicPage .loggedInUserAvatar.noAvatarImage{
    font-size: var(--text-5xl-px);
    box-shadow: var(--shadow-none);
}

.playlistDetailsPage.lighttext.publicPage .loggedInUserAvatar.noAvatarImage{
    color: white;
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){
    .operationProgressPopupContent[pending-operation-state=pending] #loadingBoxWrapper .message,
    .operationProgressPopupContent[pending-operation-state=success] #successBoxWrapper .message,
    .operationProgressPopupContent[pending-operation-state=error] #errorBoxWrapper .message{
        font-size: var(--text-lg-px);
        margin-top: var(--space-md);
        font-weight: 900;
        max-width: var(--size-700);
        text-align: center;
    }



    .operationProgressPopupContent[pending-operation-state=pending] #loadingBoxWrapper .messageDetails,
    .operationProgressPopupContent[pending-operation-state=success] #successBoxWrapper .messageDetails,
    .operationProgressPopupContent[pending-operation-state=error] #errorBoxWrapper .messageDetails{
        max-width: var(--size-700);
        text-align: center;
        font-size: var(--text-xs-px);
        padding: var(--space-2xs) var(--size-none);
        box-sizing: border-box;
    }

    div[data-role=popup] .chatbubble{
        font-size: var(--text-sm-px);
    }

    .operationProgressPopupContent .listeningInstructionsBox, .playlistDetailsPage .listeningInstructionsBox{
        padding: var(--space-xs) var(--border-6);
    }

}

input+label:after{
  white-space:nowrap;
}


#schedulingSettingFld{
    color: white;
    text-align: center;
    height: var(--size-40);
    background-color: var(--color-white-10);
    cursor: pointer;
}

.scheduleInfoWrapper{
    display: flex;
    flex-direction: row;
    max-width: var(--size-700);
    margin: auto;
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){
    .scheduleInfoWrapper{
        flex-direction: column;
    }
}

.clockpicker-display{
    font-weight: 700;
}

.clockpicker-canvas-bearing {
  stroke: none;
  fill: var(--trebble-primary);
}

.clockpicker-canvas-bg {
  stroke: none;
  fill: var(--trebble-primary);
  color: white;
}

.clockpicker-canvas-bg-trans {
  fill:  var(--trebble-primary);
}

.clockpicker-canvas line {
  stroke: var(--trebble-primary);
  stroke-width: 4;
  stroke-linecap: round;
}
.clockpicker-tick.active, .clockpicker-tick:hover{
    background-color: var(--trebble-primary-25);
}
.picker__holder{
    max-width: var(--size-full);
    max-height: var(--size-full);
}

.picker__year-display,
.picker__weekday-display,
.picker__month-display,
.picker__day-display{
    font-weight: 900;
}

.picker__date-display{
    /*background-color: var(--trebble-primary);*/
    background-color: var(--text-dark);

}

.picker__close, .picker__today, .picker__clear{
    color: var(--trebble-primary);
    font-weight: 700;
}
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected{
  background-color: var(--trebble-primary);
  font-weight: 700;
  width: var(--size-40);
  height: var(--size-40);
  padding: var(--size-none);
  align-items: center;
  display: flex;
  justify-content: center;
}

.picker__nav--prev:hover, .picker__nav--next:hover{

    background-color: var(--color-black-5);
}




.picker__box{
  border: var(--border-0);
}
.picker__close:hover, .picker__today:hover, .picker__clear:hover,
button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus{
  background-color: var(--color-black-5);
}
.picker__day.picker__day--today{
    color: var(--trebble-primary);
}

.picker__nav--prev, .picker__nav--next{
    height: var(--size-30);
    display: flex;
    justify-content: center;
    align-items: center;
}



#addOrScheduleCapsuleToTrebbleFormWrapper label,
#recordingSettingFormWrapper label{
    text-align: left;
}


#addOrScheduleCapsuleToTrebbleFormWrapper  #addToTrebbleBtn,
#recordingSettingFormWrapper  #saveBtn{
    border: var(--border-2) solid white;
    background-color: white;
    font-size: var(--text-md);
    font-weight: 900;
    min-width: var(--size-140);
}

.signup_fine_print{
 font-size: var(--text-2xs-px);
 margin: var(--space-2xs) auto;
 padding: var(--space-2xs);
 opacity: .4;
 max-width: var(--size-400);
 text-align: center;
 width: calc(var(--size-full) - var(--size-50));
}


#mySubscriptions #addTrebbleToSubscriptionsBtn,
#myJourneys #createJourneyBtn{
    border: var(--border-0);
}


[data-role="page"][id*=followedTrebblesPageFor] .playlistItem.withLargeAlbumArt,
#ExplorePage[showListView=true]  .playlistItem.withLargeAlbumArt,
#Onboarding[showListView=true]  .playlistItem.withLargeAlbumArt,
#mySubscriptionsListWrapper  .playlistItem.withLargeAlbumArt,
#myJourneysListWrapper  .playlistItem.withLargeAlbumArt{
    display: inline-table;
}

@media(max-width: 500px), (max-height: 500px) and (orientation: landscape){
    [data-role="page"][id*=followedTrebblesPageFor] .playlistItem.withLargeAlbumArt,
    #ExplorePage[showListView=true]  .playlistItem.withLargeAlbumArt,
    #Onboarding[showListView=true]  .playlistItem.withLargeAlbumArt,
    #mySubscriptionsListWrapper  .playlistItem.withLargeAlbumArt,
    #myJourneysListWrapper  .playlistItem.withLargeAlbumArt{
        display: inline-flex;
        flex-direction: column;
    }

}
/*#mySubscriptionsListWrapper #collection_repeat_container,*/
#ExplorePage[showListView=true] #collection_repeat_container,
#Onboarding[showListView=true] #collection_repeat_container{
    padding: var(--space-sm) var(--size-none);

}
#mySubscriptionsListWrapper,
#myJourneysListWrapper,
#ExplorePage[showListView=true],
#Onboarding[showListView=true] {
    text-align:center;
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){
    #mySubscriptionsListWrapper  .playlistItem.withLargeAlbumArt,
    #myJourneysListWrapper  .playlistItem.withLargeAlbumArt,
    #ExplorePage[showListView=true]  .playlistItem.withLargeAlbumArt,
    #Onboarding[showListView=true]  .playlistItem.withLargeAlbumArt{
      width: calc( var(--size-full) - var(--space-sm))
  }
}


.listening_to_player_events #loadingMyFeedButton,
/*.listening_to_player_events.isCurrentlyLoading #playMyFeedBtn,
.listening_to_player_events.isCurrentlyLoading #playMyFeedBtn .loadingIconWrapper,*/
.listening_to_player_events.isCurrentlyLoading .play_feed_btn,
.listening_to_player_events.isCurrentlyLoading .play_feed_btn .loadingIconWrapper{
    cursor: default;
}
body.browser.mobileweb #mySubscriptions #loadingMyFeedButton:hover,
#mySubscriptions #loadingMyFeedButton:active,
body.browser.mobileweb .listening_to_player_events #loadingMyFeedButton:hover,
.listening_to_player_events #loadingMyFeedButton:active{
    color: var(--text-dark) !important;
}

.listening_to_player_events:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) .play_feed_btn .loadingIcon,
.listening_to_player_events:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) .play_feed_btn .loadingIconWrapper,
.listening_to_player_events:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) .play_feed_btn .pauseIcon,
.listening_to_player_events:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) .play_feed_btn .pauseIconWrapper,
.listening_to_player_events:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) #loadingMyFeedButton,
.listening_to_player_events:not(.isCurrentlyPlaying):not(.isCurrentlyLoading) #pauseMyFeedButton{
    display: none;
}


.listening_to_player_events.isCurrentlyPlaying .play_feed_btn .loadingIcon,
.listening_to_player_events.isCurrentlyPlaying .play_feed_btn .loadingIconWrapper,
.listening_to_player_events.isCurrentlyPlaying .play_feed_btn .playIcon,
.listening_to_player_events.isCurrentlyPlaying .play_feed_btn .playIconWrapper,
.listening_to_player_events.isCurrentlyPlaying #loadingMyFeedButton,
.listening_to_player_events.isCurrentlyPlaying #playMyFeedButton{
    display: none;
}

.listening_to_player_events.isCurrentlyLoading .play_feed_btn .pauseIcon,
.listening_to_player_events.isCurrentlyLoading .play_feed_btn .pauseIconWrapper,
.listening_to_player_events.isCurrentlyLoading .play_feed_btn .playIcon,
.listening_to_player_events.isCurrentlyLoading .play_feed_btn .playIconWrapper,
.listening_to_player_events.isCurrentlyLoading #pauseMyFeedButton,
.listening_to_player_events.isCurrentlyLoading #playMyFeedButton{
    display: none;
}

#home[state=content_loaded] #homeHeader #pageHeaderTitleWrapper,
#home[state=loading] #homeHeader #pageHeaderTitleWrapper{
    color: var(--text-dark);
}
#home #onYourFeedTodayBoxWrapper  .play_feed_btn,
#home #onYourFeedTodayBoxWrapper  .play_feed_btn .playback_state_btn{
    height: var(--size-160);
    width: var(--size-160);
    flex: 0 0 160px;
}
#home #onYourFeedTodayBoxWrapper  .play_feed_btn{
    border-radius: 50%;
}

#home #onYourFeedTodayBoxWrapper  .play_feed_btn .playback_state_btn t{
    font-size: var(--text-7xl-px);
}



#home #onYourFeedTodayBoxWrapper  .play_feed_btn .playback_state_btn t.playIcon{
    padding-left: var(--space-2xs);
}

#home #onYourFeedTodayBoxWrapper  .play_feed_btn .playback_state_btn > span{
    display: none;
}
#home #onYourFeedTodayBoxWrapper .trebble_thumnails_preview_box{
    /*height: var(--size-100);
    flex: 0 0 100px;
    margin: var(--space-sm) var(--size-none);    
    display: block;
    justify-content: center;
    align-items: center;
    height: var(--size-90);
    margin: var(--size-none);
    margin-bottom: var(--space-md);*/

    flex: 0 0 100px;
    display: block;
    align-items: center;
    height: var(--size-90);
    margin: 0 0 var(--space-md);
    max-width: 690px;


}

#home [data-role=header],
#home .ui-content,
#home .ui-panel-wrapper{
    background-color: transparent;
    border-color: transparent;
    padding: var(--size-none);
}

#home #onYourFeedTodayBoxWrapper .trebble_thumnails_preview_box .image_wrapper{
    /*height: 83px;
    width: 83px;*/
    height: 78px;
    width: 78px;
    flex: 0 0 78px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gradient-primary-alt);
    margin: var(--size-none) var(--border-4);

}
#home #onYourFeedTodayBoxWrapper .trebble_thumnails_preview_box .image_wrapper img{
    /*width: var(--size-70);
    height: var(--size-70);*/
    width: 62px;
    height: 62px;
    /* margin: 0 var(--border-4); */
    border: var(--border-4) solid white;
}

body.darkTheme #home #onYourFeedTodayBoxWrapper .trebble_thumnails_preview_box img{
    border: var(--border-4) solid var(--text-dark);
}

#home #onYourFeedTodayBoxWrapper .play_feed_btn,
#home #onYourFeedTodayBoxWrapper .start_category_shortcast_radio_btn{
    color: white;
}




#home #onYourFeedTodayBoxWrapper{
    background: transparent;
    box-shadow: var(--shadow-none);
    color: var(--text-dark);
    padding: var(--size-none);
    max-width: var(--size-full);
}

#home[state=no_new_content]{
    background: linear-gradient(to bottom right,var(--success-green),var(--success-green-alt));
    color: var(--text-light);
    background-size: 200% 200%;
    animation: gradientanimation 30s ease infinite;
}
#home[state=error]{
    background: var(--gradient-primary);
    color: var(--text-light);
    background-size: 200% 200%;
    animation: gradientanimation 30s ease infinite;
}

#home[state=no_new_content]{
    background: linear-gradient(to bottom right,var(--success-green),var(--success-green-alt));
    color: var(--text-light);
    background-size: 200% 200%;
    animation: gradientanimation 30s ease infinite;
}
#home[state=no_new_content] #onYourFeedTodayBoxWrapper[state=no_new_content],
#home[state=error] #onYourFeedTodayBoxWrapper[state=error]{
    background: transparent;
    box-shadow: var(--shadow-none);
    color: var(--text-light);
}

#home #onYourFeedTodayBoxWrapper{
    height: calc(var(--size-full) - var(--size-50));
}


#home #onYourFeedTodayBoxWrapper  .play_feed_btn,
#home #onYourFeedTodayBoxWrapper .start_category_shortcast_radio_btn{
    background: var(--gradient-primary-alt);
    box-shadow: var(--shadow-bottom);
    background-size: 200% 200%;
    margin-top: var(--space-sm);
    border:var(--border-0);
}
#home #onYourFeedTodayBoxWrapper  .play_feed_btn,
.journeyPage #createNewCapsuleFloatingBtnWrapper{
    animation: gradientanimation 10s ease infinite, pulse 1.5s infinite;
}

#home #onYourFeedTodayBoxWrapper .start_category_shortcast_radio_btn{
    height: var(--size-50);
    flex:  0 0 50px;
    margin: var(--size-50);
    box-sizing: border-box;
    padding: var(--space-sm) var(--space-lg);
    min-width: var(--size-200);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    animation: gradientanimation 10s ease infinite;
}

#home #onYourFeedTodayBoxWrapper .start_category_shortcast_radio_btn t{
    margin-right: var(--space-2xs);
    font-weight: bold;
    font-size: var(--text-xl);
}
.start_category_shortcast_radio_content_wrapper #pageHeaderTitleWrapper{
    line-height: 1.4em;
    max-width: var(--size-700);
    white-space: normal;
    flex: 0 0 auto;
    height: auto;
    padding: var(--size-none);
    padding-bottom: var(--space-md);
    box-sizing: border-box;
    position: relative;
}


.start_category_shortcast_radio_content_wrapper .category_list_wrapper{

    flex: 1 1 100%;


}

.start_category_shortcast_radio_content_wrapper{
    height: calc(var(--size-full) - var(--size-100));
}
.start_category_shortcast_radio_content_wrapper[isLoading=false] .content{
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    display: flex;
    height: var(--size-full);

}

.start_category_shortcast_radio_content_wrapper[isLoading=false] .loading_info_box,
.start_category_shortcast_radio_content_wrapper:not([isLoading=false]) .content{
    display: none;
}

.start_category_shortcast_radio_content_wrapper:not([isLoading=false]) .loading_info_box{
    height: var(--size-full);
    display: flex;
    justify-content: center;
    align-items: center;

}

.start_category_shortcast_radio_content_wrapper .start_radio_button_wrapper{
    visibility: hidden;
}

#home #onYourFeedTodayBoxWrapper[state=content_loaded] > div.feedOverviewBox{
    min-height: calc(var(--size-full) - var(--size-50));
    justify-content: start;
    height: var(--size-full);
}
#home .feedOverviewBox .feed_description{
    display: none;
}

.feedOverviewBox .bottomSpacer{
    width: var(--size-full);
    flex: 0 0 100px;
}

#playerFloating{
    position: absolute;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
    border-radius: 50px;
    cursor: pointer;
    background-color: var(--trebble-accent);
    border:var(--border-0);
    background-size: cover;
    box-shadow: 0 5px 11px -2px var(--color-black-30), 0 4px 12px -7px var(--color-black-30);
}

#playerFloating.useblurryBackgroundImage,
#playerFloating.useDefaultGradientColorForBackground{
    background: var(--gradient-pink-purple);
}

#playerFooter .menuBox{
    display: flex;
    flex-direction: row;
    width: var(--size-full);
    align-items: center;
    justify-content: center;

}

#playerFooter .menuBox .panelMenuItem{
   flex: 1 1 100%;
   align-items: center;
   justify-content: center;
   display: flex;
   cursor: pointer;
   flex-direction: column;
   height: var(--size-full);
}
#playerFooter .menuBox{
    color: var(--text-dark);
}
#playerFooter .menuBox .panelMenuItem .menuIcon{
    font-size: var(--text-2xl-px);
}

#playerFooter .menuBox .panelMenuItem .menuIcon,
#playerFooter .menuBox .panelMenuItem .menuIcon c{
    font-weight: 900;
}

#playerFooter .menuBox .panelMenuItem .menuLabel{
    margin-top: var(--border-4);
    font-size: var(--text-2xs-px);
    font-weight: 400;
}


#playerFooter .menuBox .panelMenuItem.selected,
#playerFooter.transparent .menuBox .panelMenuItem.selected{
    color: var(--trebble-primary);
}


body.darkTheme #playerFooter.footer_menu:not(.transparent) .menuBox ,
[data-role=page].ui-page-active.darkTheme ~ #playerFooter.footer_menu:not(.transparent) .menuBox  {
   color: white;
}

#playerFooter.footer_menu{
    box-shadow: 0 -3px 8px 0 var(--color-black-5);
    border-top:var(--border-0);
}

#playerFooter.transparent .menuBox .panelMenuItem{
    color: white;
}
body.footerMenuBardisplayed:not([userprofiletype=creator]):not(.alwaysDisplayHelp):not([userprofiletype=journey_creator]):not([userprofiletype=shortcast_creator]) [data-role=header] #helpHeaderButton,
body.footerMenuBardisplayed:not([userprofiletype=creator]):not([userprofiletype=journey_creator]):not([userprofiletype=shortcast_creator]) [data-role=header] #homeHeaderButton,
body.footerMenuBardisplayed:not([userprofiletype=creator]):not(.alwaysDisplayHelp):not([userprofiletype=journey_creator]):not([userprofiletype=shortcast_creator]) [data-role=header] .homeButtonWrapper{
    display: none;
}

body.footerMenuBardisplayed:not([userprofiletype=creator]):not(.alwaysDisplayHelp):not([userprofiletype=journey_creator]):not([userprofiletype=shortcast_creator]) [data-role=header] #pageHeaderTitleWrapper{
    padding-left: var(--space-sm);
}

body[playerfootershouldbetransparent=false]:not(darkTheme){
    background-color: white !important;
}

body[playerfootershouldbetransparent=true]{
    background-color: var(--color-black) !important;
}
body[selected_home_menu=homeBtn] [data-role=footer] #homeBtn,
body[selected_home_menu=mySubscriptionsBtn] [data-role=footer] #mySubscriptionsBtn,
body[selected_home_menu=myJourneysBtn] [data-role=footer] #myJourneysBtn,
body[selected_home_menu=exploreBtn] [data-role=footer] #exploreBtn,
body[selected_home_menu=searchBtn] [data-role=footer] #searchBtn,
body[selected_home_menu=myProfileBtn] [data-role=footer] #myProfileBtn{
    color: var(--trebble-primary);
}

body[selected_home_menu=homeBtn]:not(.darkTheme) ,
body[selected_home_menu=mySubscriptionsBtn]:not(.darkTheme) ,
body[selected_home_menu=searchBtn]:not(.darkTheme){
    background-color: white !important;
    background-image: none !important;
}

body[selected_home_menu=myProfileBtn],
body[selected_home_menu=exploreBtn],
body[selected_home_menu=homeBtn].darkTheme ,
body[selected_home_menu=mySubscriptionsBtn].darkTheme,
body[selected_home_menu=searchBtn].darkTheme{
    background-color: var(--color-black) !important;
    background-image: none !important;
}


body.footerMenuBardisplayed[userprofiletype=creator] div[data-role=panel] #homeBtn,
body.footerMenuBardisplayed[userprofiletype=journey_creator] div[data-role=panel] #homeBtn,
body.footerMenuBardisplayed[userprofiletype=shortcast_creator] div[data-role=panel] #homeBtn,
body.footerMenuBardisplayed[userprofiletype=creator] div[data-role=panel] #mySubscriptionsBtn,
body.footerMenuBardisplayed[userprofiletype=journey_creator] div[data-role=panel] #mySubscriptionsBtn,
body.footerMenuBardisplayed[userprofiletype=shortcast_creator] div[data-role=panel] #mySubscriptionsBtn,
body.footerMenuBardisplayed[userprofiletype=creator] div[data-role=panel] #exploreBtn,
body.footerMenuBardisplayed[userprofiletype=journey_creator] div[data-role=panel] #exploreBtn,
body.footerMenuBardisplayed[userprofiletype=shortcast_creator] div[data-role=panel] #exploreBtn,
body.footerMenuBardisplayed[userprofiletype=creator] div[data-role=panel] #searchBtn,
body.footerMenuBardisplayed[userprofiletype=journey_creator] div[data-role=panel] #searchBtn,
body.footerMenuBardisplayed[userprofiletype=shortcast_creator] div[data-role=panel] #searchBtn,
body.footerMenuBardisplayed[userprofiletype=creator] div[data-role=panel] #referBtn,
body.footerMenuBardisplayed[userprofiletype=journey_creator] div[data-role=panel] #referBtn,
body.footerMenuBardisplayed[userprofiletype=shortcast_creator] div[data-role=panel] #referBtn{
    display: none !important;
}

#playerFloating.useMovingBackground{
    background-size: 200% 200% !important;
    animation: gradientanimation 20s ease infinite;
}

#playerFloating .dark_shade_background{
    position: absolute;
    z-index: -1;
    width: var(--size-full);
    background-color: var(--color-black-50);
    height: var(--size-full);
    border-radius: 50px;
    border:var(--border-0);
    
}
#playerFloating:not(.useblurryBackgroundImage) .dark_shade_background{
    display: none;
}

#playerFloating .spacerBackground{
    position: absolute;
    /*background-color: var(--trebble-accent);*/
    background-color: transparent;
    top: 0px;
    left: 35px;
    height: var(--size-70);
    z-index: -1;
    width: var(--size-70);
    cursor: pointer;
}

#playerFloating #footerCurrentSongInfo{
    display: none !important;
}

#playerFloating .coverArtWrapper{

    padding: var(--space-2xs);
    box-sizing: border-box;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    height: var(--size-70);
    width: var(--size-70);
    /*background-color: var(--trebble-accent);*/
    background-color: transparent;

}

#playerFloating #footerCurrentSongImg{
    width: var(--size-40);
    margin: var(--size-none);
    padding: var(--size-none);
    box-sizing: border-box;
    height: var(--size-40);
    border-radius: 50%;
    background-size: cover;
    cursor: pointer;
    background-color: var(--color-white-30);
}


#playerFloating .spacer{
    width: var(--size-0);
    cursor: pointer;
}

#playerFloating .actionButtonWrapper{
    padding: var(--space-2xs);
    width: var(--size-70);
    box-sizing: border-box;
    height: var(--size-70);
    border-radius: 50%;
    /*background-color: var(--trebble-accent);*/
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#playerFloating .actionButtonWrapper #playPauseBtn{
    font-size: var(--text-3xl-px);
    padding: var(--size-none);
    margin: var(--size-none);
    cursor: pointer;
}


body.mobileweb #playerFloating .actionButtonWrapper #playPauseBtn:hover,
#playerFloating .actionButtonWrapper #playPauseBtn:active{
    background-color: transparent;
    border-color: transparent;
}

@media (max-width: 500px){

    #ExplorePage.threeSelectorDisplayed * #filtersWrapper,
    #Onboarding.threeSelectorDisplayed * #filtersWrapper {
        overflow-x:scroll;
        justify-content: start;
    }

    #ExplorePage * #filtersWrapper > div,
    #Onboarding * #filtersWrapper > div,
    .StatsPage * .CustomSelectFieldView, 
    .TrebbleStatisticPage.lighttext * .CustomSelectFieldView,
    #ExplorePage[showListView=true] * .CustomSelectFieldView,
    #Onboarding[showListView=true] * .CustomSelectFieldView{
        font-size: var(--text-sm-px);
        padding-left: var(--space-2xs);
        margin: var(--size-none) var(--space-2xs);
    }

    #home[lessThanFourShortcastsInFeed=false] #onYourFeedTodayBoxWrapper .trebble_thumnails_preview_box{
        justify-content: start;
    }

    #home[lessThanFourShortcastsInFeed=false] #onYourFeedTodayBoxWrapper .trebble_thumnails_preview_box .image_wrapper:first-child{
       margin-left: var(--space-sm);
   }

   #home[lessThanFourShortcastsInFeed=false] #onYourFeedTodayBoxWrapper .trebble_thumnails_preview_box .image_wrapper:last-child{
       margin-right: var(--space-sm);
   }

}

.userProfileDetailsPage .textContent .socialInfos,
body[isTemporaryUser=true] #ExplorePage [data-role=header] > div:first-child,
body[isTemporaryUser=true] #Onboarding [data-role=header] > div:first-child,
body[isTemporaryUser=true] #homeHeaderButton,
body[isTemporaryUser=true] .capsuleCard #addToTrebbleOptionButtonWrapper,
body[isTemporaryUser=true] .capsuleCard #deleteButton,
body[isTemporaryUser=true] .capsuleCard #commentButton,
/*body[userprofiletype=creator]:not([journey_feature_enabled=true]) div[data-role=panel] #myJourneysBtn,
body[userprofiletype=journey_creator]:not([journey_feature_enabled=true]) div[data-role=panel] #myJourneysBtn,*/
body[userprofiletype=listener] div[data-role=panel] #myJourneysBtn,
body[userprofiletype=shortcast_creator] div[data-role=panel] #myJourneysBtn,
body[userProfileType=listener] .homePanel * .menuBox #trebblesBtn,
body[userProfileType=journey_creator] .homePanel * .menuBox #trebblesBtn,
body[userProfileType=shortcast_creator] .homePanel * .menuBox #trebblesBtn,
body[userProfileType=listener] .userProfileDetailsPage.loggedInUserProfilePage #userProfileWrapper,
body[userProfileType=listener] .userProfileDetailsPage.loggedInUserProfilePage .textContent,
body[userProfileType=listener] .userProfileDetailsPage.loggedInUserProfilePage #shareUserCmailUrlBtn,
body[userProfileType=listener] .homePanel * .menuBox #myLibraryBtn,
/*body[userProfileType=journey_creator] .homePanel * .menuBox #myLibraryBtn,*/
body[userprofiletype="listener"] .capsuleCard > .ownerInfo > .buttonGroup > i#addToTrebbleOptionButtonWrapper,
body:not([userprofiletype="creator"]) #CapsuleOptionPopup #addToChannel,
body:not([userprofiletype="creator"]) #CapsuleOptionPopup #removeFromChannel,
body[userprofiletype="journey_creator"] .capsuleCard > .ownerInfo > .buttonGroup > i#addToTrebbleOptionButtonWrapper,
body[userprofiletype="shortcast_creator"] .capsuleCard > .ownerInfo > .buttonGroup > i#addToTrebbleOptionButtonWrapper,
body:not([userProfileType=listener]) .homePanel * .menuBox #createMyOwnTrebbleBtn:not(.forceDisplay),
body:not([userProfileType=journey_creator]) .homePanel * .menuBox #createMyOwnTrebbleBtn:not(.forceDisplay),
body:not([userProfileType=shortcast_creator]) .homePanel * .menuBox #createMyOwnTrebbleBtn:not(.forceDisplay),
body:not([userProfileType=listener]) .homePanel * .menuBox #createMyFirstJourneyBtn:not(.forceDisplay),
body:not([journey_feature_enabled=true]) .homePanel * .menuBox #myJourneysBtn,
/*body:not([journey_feature_enabled=true]) #onboardingSignupPage #iAmAJourneyCreatorBtn,*/
body:not([journey_feature_enabled=true]) #settings #createYourFirstJourneyLnk{
    display: none !important;
}

body[userprofiletype=shortcast_creator] div[data-role=panel] #mySubscriptionsBtn,
body[userprofiletype=shortcast_creator] div[data-role=panel] #exploreBtn,
body[userprofiletype=shortcast_creator] div[data-role=panel] #homeBtn,
body[userprofiletype=shortcast_creator] div[data-role=panel] #searchBtn{
    display: none!important;
}



body .homePanel * .menuBox #createMyOwnTrebbleBtn:not(.forceDisplay),
body .homePanel * .menuBox #createMyFirstJourneyBtn:not(.forceDisplay){
    display: none !important;
}
.ui-content  > .loginFormWrapper,
.ui-content  > .signupFormWrapper{
    display: flex;
    flex-direction: column;
    overflow: auto;
    width: var(--size-full);
}

.ui-content  > .loginFormWrapper{   
    max-width: var(--size-400);
}

.loginFormWrapper:not(.hideLoginForm) #showEmailLoginFormBtn,
.loginFormWrapper.hideLoginForm #usernameField,
.loginFormWrapper.hideLoginForm #passwordFieldWrapper,
.loginFormWrapper.hideLoginForm #orField,
.loginFormWrapper.hideLoginForm #LoginBtn,
.loginFormWrapper.hideLoginForm .forgotPasswordLink,
.loginFormWrapper.hideLoginForm #dontHaveAnAccountLabel,
.loginFormWrapper.hideLoginForm #SignUpBtn,
.loginFormWrapper.hideLoginForm .twoButtonsSet,
.loginFormWrapper.hideLoginForm #UpdateGuessProfileBtn{
    display: none !important;
}

#songPoppupMenu-popup #songPoppupMenu>div>.ui-content#commentListPopupContent{
    border: var(--border-0);
}


body.isPreviewPlaying #previewPlayingButton{
 background-color:var(--trebble-primary);
 border-radius: 50%;
 width: var(--size-50);
 height: var(--size-50);
 z-index: 99999;
 position: absolute;
 right: 20px;
 top: 80px;
 display: block;
 cursor: pointer;
 box-shadow: 0 5px 11px -2px var(--color-black-30), 0 4px 12px -7px var(--color-black-30);
}

body:not(.isPreviewPlaying) #previewPlayingButton{
    display: none;
}

#previewPlayingButton .soundPlayingIconWrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--size-full);
}

#previewPlayingButton .soundPlayingIconWrapper #soundbars{
    position: relative;
    left: auto;
    display: block;
    height: var(--size-20);
}

#soundbars{
    width: var(--size-25);
    margin: var(--size-none) var(--space-3xs);
}



.bar {
   background: white;
   bottom: 1px;
   height: var(--size-3);
   position: absolute;
   width: var(--size-4);
   animation: sound 100ms -850ms linear infinite alternate;
}

@keyframes sound {
    0% {
       opacity: .35;
       height: var(--size-3); 
   }
   100% {
    opacity: 1;       
    height: var(--size-16);        
}
}

.bar:nth-child(1)  { left: 1px; animation-duration: 474ms; }
.bar:nth-child(2)  { left: 7px; animation-duration: 433ms; }
.bar:nth-child(3)  { left: 13px; animation-duration: 407ms; }
.bar:nth-child(4)  { left: 19px; animation-duration: 458ms; }
.bar:nth-child(5)  { left: 25px; animation-duration: 400ms; }
.bar:nth-child(6)  { left: 31px; animation-duration: 427ms; }
.bar:nth-child(7)  { left: 37px; animation-duration: 441ms; }
.bar:nth-child(8)  { left: 43px; animation-duration: 419ms; }
.bar:nth-child(9)  { left: 49px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 55px; animation-duration: 442ms; }


html .ui-page-theme-c#ExplorePage .swiper-slide-active  .playlistItem.transparent.withLargeAlbumArt,
html .ui-page-theme-c#Onboarding .swiper-slide-active  .playlistItem.transparent.withLargeAlbumArt  {
    /* border: var(--border-2) solid var(--color-white-20);
    background-color:  var(--bg-overlay-light) !important; */
}


.ui-page-theme-c#ExplorePage .swiper-slide-visible  .playlistItem.transparent.withLargeAlbumArt,
.ui-page-theme-c#Onboarding .swiper-slide-visible  .playlistItem.transparent.withLargeAlbumArt,
body.darkTheme .ui-page-theme-c#ExplorePage .swiper-slide-visible  .playlistItem.withLargeAlbumArt,
.ui-page-theme-c#ExplorePage.darkTheme .swiper-slide-visible  .playlistItem.withLargeAlbumArt,
.ui-page-theme-c#Onboarding.darkTheme .swiper-slide-visible  .playlistItem.withLargeAlbumArt{
    transition: all .3s ease-in-out;
}
.ui-page-theme-c#ExplorePage .swiper-slide-active  .playlistItem.transparent.withLargeAlbumArt,
.ui-page-theme-c#Onboarding .swiper-slide-active  .playlistItem.transparent.withLargeAlbumArt,
body.darkTheme  .ui-page-theme-c#ExplorePage .swiper-slide-active  .playlistItem.withLargeAlbumArt,
.ui-page-theme-c#ExplorePage.darkTheme .swiper-slide-active  .playlistItem.withLargeAlbumArt,
.ui-page-theme-c#Onboarding.darkTheme .swiper-slide-active  .playlistItem.withLargeAlbumArt {
    transform: scale(1.09);

}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled{
    display: none;
}
#ExplorePage .swiper-wrapper.vertical .playlistItem.transparent.withLargeAlbumArt,
#Onboarding .swiper-wrapper.vertical .playlistItem.transparent.withLargeAlbumArt,
body.darkTheme  #ExplorePage .swiper-wrapper.vertical .playlistItem.withLargeAlbumArt,
body.darkTheme  #Onboarding .swiper-wrapper.vertical .playlistItem.withLargeAlbumArt,
#ExplorePage.darkTheme .swiper-wrapper.vertical .playlistItem.withLargeAlbumArt,
#Onboarding.darkTheme .swiper-wrapper.vertical .playlistItem.withLargeAlbumArt{
    max-width: calc(var(--size-full) - var(--size-50));
}
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){
    #ExplorePage .swiper-wrapper .playlistItem.transparent.withLargeAlbumArt,
    body.darkTheme  #ExplorePage .swiper-wrapper .playlistItem.withLargeAlbumArt,
    #ExplorePage.darkTheme .swiper-wrapper .playlistItem.withLargeAlbumArt,
    #Onboarding .swiper-wrapper .playlistItem.transparent.withLargeAlbumArt,
    body.darkTheme  #Onboarding .swiper-wrapper .playlistItem.withLargeAlbumArt,
    #Onboarding.darkTheme .swiper-wrapper .playlistItem.withLargeAlbumArt{
        max-width: calc(var(--size-full) - var(--size-100));
    }
}

.listeningInstructionsBox .instructionTitle,
.WelcomeBetaUserBox .instructionTitle{
    font-weight: bold;
    margin: var(--space-2xs) var(--size-none);
    font-size: 110%;
}

.subscribe_tooltip,
.listen_on_voice_enabled_devices_tooltip,
.turn_explore_auto_preview_tooltip,
.playlistDetailsPage.editable .share_my_trebble_tooltip,
.tap_below_to_open_player_tooltip{
    background: white;
    color: var(--color-black);
    position: absolute;
    top: 52px;
    right: 0px;
    white-space: normal;
    line-height: var(--line-height-2xl);
    width: var(--size-250);
    box-sizing: border-box;
    padding: var(--text-md-px);
    box-shadow: var(--shadow-lg);
    animation-name: tooltipfloating;
    animation-duration: 1.5s;
    font-size: var(--text-sm-px);
    animation-iteration-count: infinite;
    animation-timing-function:ease-in-out;
    text-align: center;
    cursor: pointer;
    text-transform: none;
}
html body.mobileweb .playlistItem.withLargeAlbumArt:hover .subscribe_tooltip{
    animation-name: none;

}

.subscribe_tooltip:after,
.listen_on_voice_enabled_devices_tooltip:after,
.turn_explore_auto_preview_tooltip:after,
.share_my_trebble_tooltip:after,
.tap_below_to_open_player_tooltip:after{
    bottom: 100%;
    left: calc(var(--size-full) - var(--text-xl-px));
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-bottom-color: white;
    border-width: var(--border-8);
    margin-left: calc(var(--pulse-size) * -1);

}
#player #playerSocialInfoWrapper,
#player #playerSocialInfoWrapper .ui-block-a,
#player #playerSocialInfoWrapper .ui-block-a a{
    overflow: visible;
}

#player #playerSocialInfoWrapper .ui-block-a a{
    position: relative;
    height: var(--size-full);
    width: var(--size-full);
}
#player #playerSocialInfoWrapper .subscribe_tooltip.upsidedown{
    left: 0px;
}
#player #playerSocialInfoWrapper .subscribe_tooltip.upsidedown:after{
    left: 26px;
}
.subscribe_tooltip.upsidedown,
.listen_on_voice_enabled_devices_tooltip.upsidedown,
.turn_explore_auto_preview_tooltip.upsidedown,
.share_my_trebble_tooltip.upsidedown,
.tap_below_to_open_player_tooltip.upsidedown{
    bottom: 52px;
    top: auto;
}
.subscribe_tooltip.upsidedown:after,
.listen_on_voice_enabled_devices_tooltip.upsidedown:after,
.turn_explore_auto_preview_tooltip.upsidedown:after,
.share_my_trebble_tooltip.upsidedown:after,
.tap_below_to_open_player_tooltip.upsidedown:after{
    top: 100%;
    bottom: auto;
    border-color: var(--text-light)transparent transparent transparent;

}

.subscribe_tooltip .closeTooltipButton,
.listen_on_voice_enabled_devices_tooltip .closeTooltipButton,
.turn_explore_auto_preview_tooltip .closeTooltipButton,
.share_my_trebble_tooltip .closeTooltipButton,
.tap_below_to_open_player_tooltip .closeTooltipButton{
    position: absolute;
    right: 4px;
    top: 4px;
    font-size: var(--text-lg-px);
    cursor: pointer;
}

body.mobileweb .subscribe_tooltip .closeTooltipButton:hover,
body.mobileweb .listen_on_voice_enabled_devices_tooltip .closeTooltipButton:hover,
body.mobileweb .turn_explore_auto_preview_tooltip .closeTooltipButton:hover,
body.mobileweb .share_my_trebble_tooltip .closeTooltipButton:hover,
body.mobileweb .tap_below_to_open_player_tooltip .closeTooltipButton:hover,
.subscribe_tooltip .closeTooltipButton:active,
.listen_on_voice_enabled_devices_tooltip .closeTooltipButton:active,
.turn_explore_auto_preview_tooltip .closeTooltipButton:active,
.share_my_trebble_tooltip .closeTooltipButton:active,
.tap_below_to_open_player_tooltip .closeTooltipButton:active{
   color: var(--trebble-primary);
}


.subscribe_tooltip.center_arrow:after,
.listen_on_voice_enabled_devices_tooltip.center_arrow:after,
.turn_explore_auto_preview_tooltip.center_arrow:after,
.share_my_trebble_tooltip.center_arrow:after,
.tap_below_to_open_player_tooltip.center_arrow:after{
    left: auto;
}
.subscribe_tooltip.center_arrow,
.listen_on_voice_enabled_devices_tooltip.center_arrow,
.turn_explore_auto_preview_tooltip.center_arrow,
.share_my_trebble_tooltip.center_arrow,
.tap_below_to_open_player_tooltip.center_arrow{
    right: auto;
}
.playlistDetailsPage.editable .share_my_trebble_tooltip{
    background-color: var(--trebble-accent);
    color: white;
}

.playlistDetailsPage.editable .share_my_trebble_tooltip:after{
    border-bottom-color: var(--trebble-accent);

}

@keyframes tooltipfloating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(5px);  
    }   
    100% {
        transform: translateY(0%);
    }           
}

.subscribe_tooltip.hide,
.listen_on_voice_enabled_devices_tooltip.hide,
.turn_explore_auto_preview_tooltip.hide,
.share_my_trebble_tooltip.hide,
.tap_below_to_open_player_tooltip.hide,
.playlistDetailsPage:not(.editable) .share_my_trebble_tooltip{
    display: none !important;
}
.turn_explore_auto_preview_tooltip .soundPlayingAnimation .soundPlayingIconWrapper{
    position: relative;
}
#playerFloating .tap_below_to_open_player_tooltip{
    right: 6px;
    bottom: 82px;
    width: var(--size-200);
    /*font-weight: bold;*/
}
.turn_explore_auto_preview_tooltip .soundPlayingAnimation .soundPlayingIconWrapper .bar{
    background: var(--trebble-primary);
}

.subscribe_tooltip .assistantLogos,
.listen_on_voice_enabled_devices_tooltip .assistantLogos,
.turn_explore_auto_preview_tooltip .soundPlayingAnimation{

    display: flex;
    flex-direction: row;
    height: var(--size-40);
    justify-content: center;
    align-items:center;

}

.subscribe_tooltip .assistantLogos img,
.listen_on_voice_enabled_devices_tooltip .assistantLogos img{

    width: var(--size-30);
    height: var(--size-30);
    padding: var(--border-4);
    -o-object-fit: contain;
       object-fit: contain;
}

.listen_on_voice_enabled_devices_tooltip .assistantLogos img.bixbyLogo{
    width: var(--size-20);
    height: var(--size-20);
}

body[appName=trebble] .ui-footer-fullscreen, 
body[appName=trebble] .ui-header-fullscreen{
    opacity: 1;
}

.addShortcutToPlayCapsuleFeedSuggestionBoxWrapper,
.listenOnVoiceEnabledDeviceBoxWrapper,
.showUserRefferalPageBoxWrapper,
.upgradeToTrebblePaidSubscriptionBoxWrapper,
.shortcutPhraseToPlayCapsuleFeedBoxWrapper,
.changeSubscriptionOrderInstructionBox,
.listeningInstructionWrapper{

    background-color: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--size-500);
    margin: var(--text-sm-px) auto;
    box-sizing:border-box;
    /* border: var(--border-4) solid var(--text-dark); */
}

#home .upgradeToTrebblePaidSubscriptionBoxWrapper{
    margin: var(--size-none);
}

.listeningInstructionWrapper,
.listeningInstructionsBox{
    width: calc(var(--size-full) - var(--space-lg));
}

#mySubscriptions:not(.no_subscription) .listenOnVoiceEnabledDeviceBoxWrapper,
#mySubscriptions:not(.no_subscription) .showUserRefferalPageBoxWrapper,
#mySubscriptions:not(.no_subscription) .upgradeToTrebblePaidSubscriptionBoxWrapper{
 /* padding: var(--space-sm);
 background-color: white;
 border: var(--border-1) solid var(--bg-light);
 background-color: var(--bg-light);*/
 background-color: transparent;
}

#mySubscriptions .listenOnVoiceEnabledDeviceBoxWrapper #listenOnVoiceEnabledDeviceBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-md);
    border: var(--border-2) solid var(--trebble-primary);
}
#mySubscriptions .showUserRefferalPageBoxWrapper #showUserRefferalPageBtn{

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-full);
    max-width: 310px;
    flex: 1 1 auto;
    padding: var(--space-xs) var(--space-md);
    border:var(--border-2) solid var(--success-green-alt);

}
.upgradeToTrebblePaidSubscriptionBoxWrapper #upgradeBtn{

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-full);
    max-width: 310px;
    flex: 1 1 auto;
    padding: var(--space-xs) var(--space-xs);
    border:var(--border-2) solid var(--success-green-alt);

}


body.browser.mobileweb #mySubscriptions .listenOnVoiceEnabledDeviceBoxWrapper #listenOnVoiceEnabledDeviceBtn:hover,
#mySubscriptions .listenOnVoiceEnabledDeviceBoxWrapper #listenOnVoiceEnabledDeviceBtn:active{
    background-color:var(--trebble-primary);
    color:white;
}
body.browser.mobileweb #mySubscriptions .showUserRefferalPageBoxWrapper #showUserRefferalPageBtn:hover,
#mySubscriptions .showUserRefferalPageBoxWrapper #showUserRefferalPageBtn:active{
   background:transparent;
   color:var(--success-green-alt);
}
body.browser.mobileweb  .upgradeToTrebblePaidSubscriptionBoxWrapper #upgradeBtn:hover,
.upgradeToTrebblePaidSubscriptionBoxWrapper #upgradeBtn:active{
   background:transparent;
   color:var(--success-green-alt);
}
#mySubscriptions .listenOnVoiceEnabledDeviceBoxWrapper #listenOnVoiceEnabledDeviceBtn  t,
#mySubscriptions .showUserRefferalPageBoxWrapper #showUserRefferalPageBtn  t,
.upgradeToTrebblePaidSubscriptionBoxWrapper #upgradeBtn  t{
    font-size: var(--text-2xl-px);
    margin-right: var(--space-sm);
}
.upgradeToTrebblePaidSubscriptionBoxWrapper #upgradeBtn  t{
    font-weight: 600;
}

#mySubscriptions .listenOnVoiceEnabledDeviceBoxWrapper #listenOnVoiceEnabledDeviceBtn  .label,
#mySubscriptions .showUserRefferalPageBoxWrapper #showUserRefferalPageBtn  .label,
.upgradeToTrebblePaidSubscriptionBoxWrapper #upgradeBtn  .label{
    text-align: center;
}

body.mobileweb #mySubscriptions .listenOnVoiceEnabledDeviceBoxWrapper #listenOnVoiceEnabledDeviceBtn:hover,
#mySubscriptions .listenOnVoiceEnabledDeviceBoxWrapper #listenOnVoiceEnabledDeviceBtn:active{
    color: var(--trebble-primary);
}

body.mobileweb #mySubscriptions .showUserRefferalPageBoxWrapper #showUserRefferalPageBtn:hover,
#mySubscriptions .showUserRefferalPageBoxWrapper #showUserRefferalPageBtn:active{
    color: var(--trebble-primary);
}

body.mobileweb  .upgradeToTrebblePaidSubscriptionBoxWrapper #upgradeBtn:hover,
.upgradeToTrebblePaidSubscriptionBoxWrapper #upgradeBtn:active{
    color: var(--trebble-primary);
}




.enableDisableDailyNotificationBox{
    position: relative;
    display: flex;
    flex-direction: row;
    color: white;
    max-width: var(--size-500);
    box-sizing: border-box;
    margin: auto;
    padding: var(--space-sm);
    background-color: var(--trebble-accent);
    justify-content: center;
    align-items: center;
    font-weight: 900;
    box-shadow: var(--shadow-right);

}
.enableDisableDailyNotificationBox .closeButton{
    position: absolute;
    top: 0px;
    right: 5px;
}
.enableDisableDailyNotificationBox .closeButton i{
    font-size: var(--text-2xl-px);
}
.enableDisableDailyNotificationBox .switch label .lever{
    background-color: var(--trebble-accent-300);
}
.enableDisableDailyNotificationBox .switch label input[type=checkbox]:checked+.lever{
    background-color: var(--trebble-accent-300);
}

body.darkTheme .switch label .lever,
[data-role=page].lighttext .switch label .lever{
    background-color: var(--color-white-40);
}

.enableDisableDailyNotificationBox .switch label input[type=checkbox]:checked+.lever:after{
    background-color: var(--trebble-accent);
}

.changeSubscriptionOrderInstructionBox{
    padding: var(--space-sm);
}
.changeSubscriptionOrderInstructionBox,
.listeningInstructionWrapper{

    margin: var(--space-2xs) auto;
}


.addShortcutToPlayCapsuleFeedSuggestionBox,
.shortcutPhraseToPlayCapsuleFeedBox{
    display: flex;
    background-color: white;
    padding: var(--space-sm);
    /* margin: var(--space-sm); */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: var(--size-500);
    box-shadow: var(--shadow-bottom);
    width: calc(var(--size-full) - var(--space-sm));
    background-size: cover;
    color: white;
    background-image: url(839e9c97d7437c8b23bf.jpg);

}

.addShortcutToPlayCapsuleFeedSuggestionBox .label,
.shortcutPhraseToPlayCapsuleFeedBox .label{
    padding: var(--space-2xs) var(--space-2xs);
    max-width: var(--size-250);
    text-align: center;
}

.shortcutPhraseToPlayCapsuleFeedBox .siriPhrase,
.shortcutPhraseToPlayCapsuleFeedBox .customPhrase{
    font-weight:bold;
}


.addShortcutToPlayCapsuleFeedSuggestionBox .title{
    font-weight:bold;
    text-align: center;
    margin-bottom: var(--space-sm);
}

.addToSiriBtn{
    background-color: var(--color-black);
    color: white;
    height: var(--size-50);
    display: flex;
    padding: var(--space-sm);
    /* font-size: 85%; */
    margin: var(--space-2xs) var(--space-2xs);
    font-weight: bold;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: var(--border-2) solid var(--color-black);
    cursor: pointer;
    /* min-width: var(--size-150); */
}

body.mobileweb .addToSiriBtn:hover,
.addToSiriBtn:active{
    background-color: white;
    color: var(--color-black);
}
.addToSiriBtn.fixed{
    position: absolute;
    top: 0px;
    right: 0px;
}
.addToSiriBtn .label{
    margin: var(--size-none) var(--space-2xs);
}

.addToSiriBtn .siriLogo{
    height: var(--size-30);
    padding: var(--size-none) var(--size-none) var(--size-none) var(--space-2xs);
    -o-object-fit: contain;
       object-fit: contain;
}

.addShortcutToPlayCapsuleFeedSuggestionBoxWrapper.hide,
.enableDisableDailyNotificationBox.hide,
.shortcutPhraseToPlayCapsuleFeedBoxWrapper.hide,
.addToSiriBtn.hide{
    display: none !important;
}

@media (max-width:400px){
    .playlistItem.withLargeAlbumArt > .itemContent >.coverArt,
    .playlistItem.transparent.withLargeAlbumArt > .itemContent >.coverArt,
    body.darkTheme .playlistItem.withLargeAlbumArt > .itemContent >.coverArt,
    body.darkTheme.playlistItem.transparent.withLargeAlbumArt > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.withLargeAlbumArt > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.transparent.withLargeAlbumArt > .itemContent >.coverArt{
        height:var(--size-200);
        width: var(--size-full);
        max-width: var(--size-200);
    }

    .playlistItem.withLargeAlbumArt>.itemContent{
        height:390px;

    }
    html .ui-page-theme-a .playlistItem.withLargeAlbumArt, html .ui-page-theme-c .playlistItem.withLargeAlbumArt{
        height:420px;
    }

    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard{
        height:480px;
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage{
        height:410px;
    }



    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.doNotShowSubscribeButton{
        height:var(--size-430);
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.doNotShowSubscribeButton{
        height:var(--size-360);
    }

    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize,
    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize{
        height: var(--size-196);
        
    }

    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize.doNotShowSubscribeButton,
    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize.doNotShowSubscribeButton{
        height:var(--size-150);
        
    }


    .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    .playlistItem.transparent.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    body.darkTheme .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    body.darkTheme.playlistItem.transparent.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.transparent.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt{
        height:var(--size-150);
        width: var(--size-full);
        max-width: var(--size-full);
    }

    html .playlistItem.withLargeAlbumArt.smallcardsize {
        height: var(--size-120);
    }

}

@media (min-width:400px) and (max-width:500px){
    .playlistItem.withLargeAlbumArt > .itemContent >.coverArt,
    .playlistItem.transparent.withLargeAlbumArt>.itemContent>.coverArt,
    body.darkTheme .playlistItem.withLargeAlbumArt > .itemContent >.coverArt,
    body.darkTheme.playlistItem.transparent.withLargeAlbumArt > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.withLargeAlbumArt > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.transparent.withLargeAlbumArt > .itemContent >.coverArt{
        height:var(--size-240);
        width: var(--size-full);
        max-width: var(--size-240);
    }

    .playlistItem.withLargeAlbumArt>.itemContent{
        height:var(--size-430);

    }
    html .ui-page-theme-a .playlistItem.withLargeAlbumArt, html .ui-page-theme-c .playlistItem.withLargeAlbumArt{
        height:460px;
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard{
        height:520px;
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage{
        height:var(--size-450);
    }

    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.doNotShowSubscribeButton{
        height:var(--size-470);
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.doNotShowSubscribeButton{
        height:var(--size-400);
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize,
    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize{
        height: var(--size-196);
        
    }

    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize.doNotShowSubscribeButton,
    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize.doNotShowSubscribeButton{
        height:var(--size-150);
        
    }


    .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    .playlistItem.transparent.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    body.darkTheme .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    body.darkTheme.playlistItem.transparent.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.transparent.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt{
        height:190px;
        width: var(--size-full);
        max-width: var(--size-full);
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.smallcardsize,
    html .ui-page-theme-c .playlistItem.withLargeAlbumArt.smallcardsize {
        height: var(--size-120)
    }

}

@media (min-width:500px) {
    .playlistItem.withLargeAlbumArt > .itemContent >.coverArt,
    .playlistItem.transparent.withLargeAlbumArt>.itemContent>.coverArt,
    body.darkTheme .playlistItem.withLargeAlbumArt > .itemContent >.coverArt,
    body.darkTheme.playlistItem.transparent.withLargeAlbumArt > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.withLargeAlbumArt > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.transparent.withLargeAlbumArt > .itemContent >.coverArt{
        height:var(--size-340);
        width: var(--size-full);
        max-width: var(--size-340);
    }

    .playlistItem.withLargeAlbumArt>.itemContent{
        height:530px;

    }
    html .ui-page-theme-a .playlistItem.withLargeAlbumArt, html .ui-page-theme-c .playlistItem.withLargeAlbumArt{
        height:560px;
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard{
        height:620px;
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage{
        height:var(--size-450);
    }

    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.doNotShowSubscribeButton{
        height: 570px;
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.doNotShowSubscribeButton{
        height:var(--size-400);
    }


    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize,
    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize{
        height: var(--size-196);
        
    }

    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize.doNotShowSubscribeButton,
    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize.doNotShowSubscribeButton, html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize.doNotShowSubscribeButton{
        height:var(--size-150);
        
    }

    .playlistItem.withLargeAlbumArt.journeyCard:not(.smallcardsize) .journey_goal_wrapper,
    .playlistItem.withLargeAlbumArt.journeyCard:not(.smallcardsize) .buttonBar{
        display: none;
    }

    .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    .playlistItem.transparent.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    body.darkTheme .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    body.darkTheme.playlistItem.transparent.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt,
    [data-role=page].darkTheme .playlistItem.transparent.withLargeAlbumArt.journeyCard.rectangularImage > .itemContent >.coverArt{
        height:var(--size-200);
        width: var(--size-full);
        max-width: var(--size-full);
    }

    html .ui-page-theme-a .playlistItem.withLargeAlbumArt.smallcardsize,
    html .ui-page-theme-c .playlistItem.withLargeAlbumArt.smallcardsize {
        height: var(--size-120)
    }

}


#trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .info{
    flex: 0 0 190px;
}

#trebbleCarouselWrapper .playlistItem.withLargeAlbumArt{
    height: 90%;
}

#trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .itemContent.withLargeAlbumArt{
    height:var(--size-full);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#ExplorePage #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt,
#Onboarding #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt{
    height: var(--size-100);
    width: var(--size-100);
}

#ExplorePage #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .info,
#Onboarding #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .info{
    width: calc(var(--size-full) - var(--size-100));
}


@media (min-width: 200px) and (orientation: portrait) and (min-height:450px), (min-height: 450px) and (orientation: landscape){
    #ExplorePage #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt,
    #Onboarding #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt{
        height: var(--size-100);
        width: var(--size-100);
        max-height: var(--size-100);
        max-width: var(--size-100);

    }
}

@media (min-width: 250px) and (orientation: portrait) and (min-height:500px), (min-height: 500px) and (orientation: landscape){
    #ExplorePage #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt,
    #Onboarding #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt{
        height: var(--size-150);
        width: var(--size-150);
        max-height: var(--size-150);
        max-width: var(--size-150);
    }
}

@media (min-width: 300px) and (orientation: portrait) and (min-height:600px), (min-height: 600px) and (orientation: landscape){
    #ExplorePage #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt,
    #Onboarding #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt{
        height: var(--size-200);
        width: var(--size-200);
        max-height: var(--size-200);
        max-width: var(--size-200);
        
    }
}

@media (min-width: 350px) and (orientation: portrait) and (min-height:650px), (min-height: 650px) and (orientation: landscape){
    #ExplorePage #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt,
    #Onboarding #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt{
        height: var(--size-250);
        width: var(--size-250);
        max-height: var(--size-250);
        max-width: var(--size-250);
    }
}

@media (min-width: 400px) and (orientation: portrait) and (min-height:700px), (min-height: 700px) and (orientation: landscape){
    #ExplorePage #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt,
    #Onboarding #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt{
        height: var(--size-300);
        width: var(--size-300);
        max-height: var(--size-300);
        max-width: var(--size-300);
    }
}


@media (min-width: 450px) and (orientation: portrait) and (min-height:750px), (min-height: 750px) and (orientation: landscape){
    #ExplorePage #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt,
    #Onboarding #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt{
        height: var(--size-350) ;
        width: var(--size-350) ;
        max-height: var(--size-350);
        max-width: var(--size-350);
        
    }
}
/*
@media (min-width: 550px) and (orientation: portrait) and (min-height:850px), (min-height: 850px) and (orientation: landscape){
 #ExplorePage #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt,
 #Onboarding #trebbleCarouselWrapper .playlistItem.withLargeAlbumArt .coverArt{
    height: var(--size-450);
    width: var(--size-450);
    max-height: var(--size-450);
    max-width: var(--size-450);

}

}
*/


.setup_voice_enabled_device_wrapper:not([step="show_google_instructions"])  .google_assistant_instructions,
.setup_voice_enabled_device_wrapper:not([step="show_bixby_instructions"])  .samsung_bixby_instructions,
.setup_voice_enabled_device_wrapper:not([step="show_alexa_instructions"])  .amazon_alexa_instructions,
.setup_voice_enabled_device_wrapper:not([step="show_siri_instructions"])  .siri_instructions,
.setup_voice_enabled_device_wrapper:not([step="choose_from_device_list"])  #device_connection_list_wrapper,
.setup_voice_enabled_device_wrapper .siri_instructions:not([state="no_shortcut_setup"]) .add_to_siri_section_wrapper,
.setup_voice_enabled_device_wrapper .siri_instructions:not([state="shortcut_succesfully_setup"]) .siri_shortcut_successfully_setup,
.setup_voice_enabled_device_wrapper .siri_instructions:not([state="shorcut_phrase_instructions"]) .siri_shortcut_modification_instuction,
.setup_voice_enabled_device_wrapper.siri_not_available .siri_instructions,
.setup_voice_enabled_device_wrapper.bixby_not_available .samsung_bixby_instructions,
.setup_voice_enabled_device_wrapper.siri_not_available #listenOnSiriBtn.device_option{
    display: none;
}
.setup_voice_enabled_device_wrapper .instructions_setup{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: var(--size-600);
    height: var(--size-full);
    width: var(--size-full);
    margin: auto;
    box-sizing: border-box;

}
.siri_instructions .instruction_wrapper{


    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}
.siri_instructions .instruction_wrapper .instruction{
    padding: var(--space-lg);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
}

.siri_instructions .instruction_wrapper .instruction div{
    padding: var(--space-sm) var(--size-none);
}
.siri_shortcut_successfully_setup.instruction_wrapper .assistant_icon t{
    font-size: var(--text-10xl-px);
}
.siri_shortcut_successfully_setup.instruction_wrapper .assistant_icon .label{

    font-size: var(--text-5xl-px);
    font-weight: 700;

}
.instruction_wrapper{
    font-size: var(--text-md-px);
    padding: var(--space-md);
    box-sizing: border-box;
    height: var(--size-full);
    width: var(--size-full);
}

.instruction_wrapper .instruction_step_number{
 font-size: var(--text-xl-px);
 font-weight: 900;
 margin: var(--space-lg) 0;
 border-radius: 50%;
 border: var(--border-2) solid white;
 width: var(--size-40);
 height: var(--size-40);
 display: flex;
 justify-content: center;
 align-items: center;
 color: var(--text-dark);
 background-color: white;

}

.instructions_setup a.largeMenuButton.ui-link.acknoledgement_btn,
.instructions_setup a.largeMenuButton.ui-link.try_on_google_assistant_btn,
.instructions_setup a.largeMenuButton.ui-link.actionButton{
 max-width: var(--size-200);
 width: var(--size-full);
 margin: var(--space-lg) 0 var(--space-sm);
 font-size: var(--text-md-px);
 height: var(--size-46);
 box-sizing: border-box;
 flex: 0 0 45px;
}

.device_connection_list .device_option img.option_icon{
    height: var(--size-30);
    width: var(--size-30);
    margin: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs);
    -o-object-fit: contain;
       object-fit: contain;
    box-sizing: border-box;
}


.instruction_step .instruction{

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


}
.instruction_step .instruction i{
    background-color: white;
    color: var(--text-dark);
    padding: var(--border-2);
    font-weight: 900;
    font-size: var(--text-base);
    border-radius: 2px;
}
.instruction_step{

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
.instruction_wrapper .instruction_step:last-child{
    padding-bottom: var(--space-sm);
}

.instruction_step .instruction.textOnly{
    display: block;
}
.instructions_setup .help_link{
    cursor: pointer;
    font-size: 80%;
    text-decoration: underline;

}
.instruction_step .instruction .chatbubble{
    margin: var(--space-sm) var(--size-none);
}
.setup_voice_enabled_device_wrapper .instructions_setup .assistant_icon{
    flex: 0 0 30%;
    position: relative;
}
.setup_voice_enabled_device_wrapper .instructions_setup .title{

    font-size: var(--text-5xl-px);
    font-weight: 900;
    max-width: var(--size-900);
    margin: var(--space-sm);

}

.setup_voice_enabled_device_wrapper{
    height: var(--vh-full);
    justify-content: center;
    align-items: center;
    display: flex;
    padding-top: var(--size-50);
    overflow: auto;
    box-sizing: border-box;
    width: var(--size-full);
}

#device_connection_list_wrapper .instruction_wrapper{
    flex: 1 1 100%;
    padding: var(--size-none);
}

#device_illustrations{

  position: relative;
  display: flex;
  width: var(--size-full);
  flex: 0 0 250px;

}
.amazon_alexa_instructions.instructions_setup,
.samsung_bixby_instructions.instructions_setup,
.google_assistant_instructions.instructions_setup{
    display: block;
}

[data-role=page] .setup_voice_enabled_device_wrapper:not([step=choose_from_device_list]) .instructions_setup  img{
    width: var(--size-full);
}

[data-role=page] .setup_voice_enabled_device_wrapper .instructions_setup .help_link{
    color: var(--trebble-primary);
}

.google_assistant_instructions.instructions_setup  .google_home_device{
   width: var(--size-140);
   height: var(--size-150);
   -o-object-fit: contain;
      object-fit: contain;
}

.amazon_alexa_instructions.instructions_setup  .amazon_echo_device{
 width: var(--size-150);
 height: var(--size-200);
 -o-object-fit: contain;
    object-fit: contain;
}

.samsung_bixby_instructions.instructions_setup  .samsung_bixby_device{
 width: var(--size-100);
 height: var(--size-100);
 -o-object-fit: contain;
    object-fit: contain;
}
.siri_instructions.instructions_setup .iphone_with_mic_device{
  width: var(--size-100);

  height: var(--size-120);
  -o-object-fit: contain;
     object-fit: contain;
}
#device_illustrations .google_home_device{

    width: var(--size-140);
    height: var(--size-150);
    flex: 0 0 140px;
    position: absolute;
    bottom: 0px;
    left: calc(var(--size-half) - var(--size-70));

}
/*
#device_illustrations .amazon_echo_device{


    width: var(--size-200);
    height: var(--size-250);
    position: absolute;
    flex: 0 0 200px;
    bottom: -20px;
    left: calc(var(--size-half) - var(--size-layout-xs));


    }*/

    #device_illustrations .amazon_echo_device{

        width: var(--size-150);
        height: var(--size-200);
        position: absolute;
        flex: 0 0 200px;
        bottom: 37px;
        left: calc(var(--size-half) - 165px);


    }

    #device_illustrations .samsung_bixby_device{

      width: var(--size-140);
      height: var(--size-150);
      flex: 0 0 140px;
      position: absolute;
      bottom: 0px;
      left: calc(var(--size-half) - var(--size-70));


  }

  #device_illustrations .iphone_with_mic_device{

    width: var(--size-100);
    flex: 0 0 100px;
    height: var(--size-120);
    position: absolute;
    padding-bottom: var(--space-xs);
    bottom: 0px;
    right: calc(var(--size-half) - var(--text-9xl-px));



}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){
    .setup_voice_enabled_device_wrapper .instructions_setup{
        flex-direction:column;
    }

    .setup_voice_enabled_device_wrapper .instructions_setup .title{
        font-size: var(--text-2xl-px);
    }

    .instruction_wrapper,
    #device_connection_list_wrapper .device_option .label{
        font-size: var(--text-sm-px);
    }

    .setup_voice_enabled_device_wrapper #device_connection_list_wrapper{
        padding: var(--space-md);
        box-sizing: border-box;
    }

    .instruction_wrapper .instruction_step_number{
        margin: var(--space-sm) var(--size-none);
    }
    .siri_instructions .instruction_wrapper .instruction{
        padding: var(--space-sm);
    }
    .siri_shortcut_successfully_setup.instruction_wrapper .assistant_icon t{
        font-size: var(--text-8xl-px);
    }
    .siri_shortcut_successfully_setup.instruction_wrapper .assistant_icon .label{

        font-size: var(--text-lg-px);
        font-weight: 700;

    }

}

.setup_voice_enabled_device_wrapper .device_connection_list .device_option{
    cursor: pointer;
    height: var(--size-50);
    font-size: var(--text-lg-px);
    width: var(--size-full);
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.setup_voice_enabled_device_wrapper .device_connection_list .device_option .ion-ios7-arrow-right{
    font-size: var(--text-3xl-px);
    height: var(--size-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
.setup_voice_enabled_device_wrapper .device_connection_list .device_option .label{
    flex: 1 1 100%;
    padding-right: var(--space-sm);
}



.feedbackFormWrapper{
    display:flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm);
}


.feedbackFormWrapper .largeLabel,
.feedbackFormWrapper .smallLabel,
.feedbackFormWrapper #feedbackFieldDecorator{
    max-width: var(--size-500);
}

.feedbackFormWrapper .gif_illustration{
    margin: var(--space-sm) var(--size-none);
}

.feedbackFormWrapper .actionButton{
    width: calc(var(--size-full) - var(--space-lg));
    max-width: var(--size-400);
}

.feedbackFormWrapper .largeLabel{
    font-weight: 900;
    font-size: 120%;

}



@media(max-height: 300px){
    .autoplaySuggestionContent,
    .trebbleSubscribeSuggestionContent{
        display:flex;
        flex-direction:row;
        align-items: center;
        justify-content: center;
    }

    .autoplaySuggestionContent #contenOwnerInfo,
    .autoplaySuggestionContent #autoplayMessage,
    .autoplaySuggestionContent .secondaryActionButtons,
    .autoplaySuggestionContent #upNextContentInfo{
     display:none;
 }


}

body .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after,
body .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{
    content: "";
}


.upgradeToPaidAccountSubBtn{
    width: calc(var(--size-full) - var(--space-lg));
    padding: var(--text-base);
    margin: var(--text-base) 0em;
    text-align: left;
    position: relative;
    box-shadow: var(--shadow-right);

    /*border: var(--border-2) solid var(--trebble-primary);
    background-color: white;
    color:var(--text-dark);*/
    border: var(--border-3) solid white;
    background-color: var(--color-white-10);
    color:white;
    
}

body.browser.mobileweb #paidAccountSubsPopup.coloredBackground .upgradeToPaidAccountSubBtn:hover,
#paidAccountSubsPopup.coloredBackground  .upgradeToPaidAccountSubBtn:active{
    cursor: pointer;
    border: var(--border-3) solid var(--trebble-primary);
}


.upgradeToPaidAccountSubBtn .promotionMessage{
    position: absolute;
}

.upgradeToPaidAccountSubBtn .subscriptionType{
    font-size: var(--text-lg);
    font-weight: bold;
    margin: var(--size-em-2xs) 0em;
}
.upgradeToPaidAccountSubBtn .subscriptionCostWrapper{
    margin: var(--size-em-2xs) 0em;
}
.upgradeToPaidAccountSubBtn .subscriptionCostWrapper .cost{
    font-size: var(--text-xl);
    color: var(--trebble-primary);
    font-weight: bold;

}

.upgradeToPaidAccountSubBtn .subscriptionCostWrapper .duration{
    font-size: var(--text-lg);
    
}

.upgradeToPaidAccountSubBtn .subscriptionCostWrapper .separator{
    font-size: var(--text-lg);
    margin-right: var(--size-em-2xs);
    margin-left: var(--size-em-2xs);
    
}
#paidAccountSubsPopupWrapper {
    max-width: var(--size-500);
    margin: auto;
    /*height: fit-content;*/
    height: auto;
    width: calc(var(--size-full) - var(--size-none));
    
}
#paidAccountSubsPopupWrapper .loading_info_box,
#paidAccountSubsPopupWrapper .error_loading_box{
    text-align: center;
    padding: var(--space-md);
    box-sizing: border-box;
}

.paidAccountSubsPopupContent #headlineWrapper{
    font-size: var(--text-2xl);
    font-weight: 900;
    text-align: left;
    margin: var(--space-lg) var(--text-xl-px) var(--space-lg) var(--size-none);
}

.upgradeToPaidAccountSubBtn .fineprint{
    font-size: var(--text-sm);
}

.paidAccountSubsPopupContent #footerOptions{
    margin: var(--space-sm);
}
.upgradeToPaidAccountSubBtn .promotionMessage{
    position: absolute;
    right: -3px;
    top: -10px;
    /*background: var(--trebble-accent);*/
    background-color: var(--trebble-accent);
    padding: var(--space-3xs) var(--space-sm);
    color: white;
}
#settings .upgradeToTrebblePaidSubscriptionBoxWrapper{
    background-color: transparent;
    margin-bottom: var(--space-lg);
}

#settings .ui-content{
    padding: var(--space-md);
    box-sizing: border-box;
}

#settings #creatorSubscriptionBillingSection .current_creator_plan_name{
    font-weight: bold;
}

.payment_section .complete_subscription_payment_button,
.payment_section .confirm_change_plan_btn,
#settings #creatorSubscriptionBillingSection #upgradeCreatorPlanBtn,
#settings #creatorSubscriptionBillingSection #reactivateCreatorPlanBtn,
.payment_section .complete_subscription_payment_button.show_outline_only:hover,
.payment_section .confirm_change_plan_btn.show_outline_only:hover,
#settings #creatorSubscriptionBillingSection #upgradeCreatorPlanBtn.show_outline_only:hover,
#settings #creatorSubscriptionBillingSection #reactivateCreatorPlanBtn.show_outline_only:hover{
    background: var(--gradient-primary-alt-reverse);
    background-size: 140%;
    cursor: pointer;
    border: var(--border-3) solid var(--color-black);
    color: white;
    -webkit-text-fill-color: white;
    border-image-source: var(--gradient-primary-alt-reverse);
    border-image-slice: 1;
    animation: gradientanimation 5s ease infinite;
    text-transform: uppercase;
    display: block;
}

.payment_section .complete_subscription_payment_button.show_outline_only,
.payment_section .confirm_change_plan_btn.show_outline_only,
#settings #creatorSubscriptionBillingSection #upgradeCreatorPlanBtn.show_outline_only,
#settings #creatorSubscriptionBillingSection #reactivateCreatorPlanBtn.show_outline_only,
.payment_section .complete_subscription_payment_button:hover,
.payment_section .confirm_change_plan_btn:hover,
#settings #creatorSubscriptionBillingSection #upgradeCreatorPlanBtn:hover,
#settings #creatorSubscriptionBillingSection #reactivateCreatorPlanBtn:hover{
    background: var(--gradient-primary-alt);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 140%;
    background-color: transparent;
    cursor: pointer;
    border: var(--border-3) solid var(--color-black);
    border-image-source: var(--gradient-primary-alt-reverse);
    border-image-slice: 1;
    text-transform: uppercase;
    display: block;
}
.upgrade_creator_subscription_widget:not([display_payment_error="true"]) #payment-error-message,
.update_payment_method_widget:not([display_payment_error="true"]) #payment-error-message{
    display: none;
}

#payment-error-message{
    padding: var(--space-sm);
    max-width: var(--size-200);
    font-size: 85%;
    color: white;
    margin: var(--space-sm) auto;
}


html body .ui-page-theme-a#settings .settingSection .ui-select > div.ui-btn.ui-btn-b{
    background-color: transparent;
    border-color: transparent;
    color: var(--trebble-primary) !important;
    padding: var(--space-2xs);
}

.settingSection,#settings .userInfoSection{
    max-width: var(--size-500);
    box-sizing: border-box;
    margin: auto;
    border-bottom: var(--border-1) solid var(--color-black-5);
}
#settings .userInfoSection{
    display: flex;
    flex-direction: row;
    padding: var(--space-sm) var(--space-xs);
    cursor: pointer;
}
#settings .userInfoSection .userInfoDetails{
    padding: var(--space-sm) var(--space-xs);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 100%;
}

#settings .userInfoSection .userDetailCoverArtWrapper {
    height: var(--size-80);
    width: var(--size-80);
    flex: 0 0 80px;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: var(--color-black-10);
    background-size: cover;
}

#settings .userInfoSection .actionButtonWrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

#settings .userInfoSection .userInfoDetails{
    flex: 1 1 100%;
}
#settings .userInfoSection .userInfoDetails .userFullname{
    color: var(--trebble-primary);
    font-size: var(--text-base);
}

.settingSection .sectionTitle{
    color: var(--trebble-primary);
    font-size: var(--text-base);
    margin: var(--space-sm) 0;
}

.settingSection .settingItemTitle{
    box-sizing: border-box;
    padding: var(--space-sm) var(--space-xs);
    color: var(--text-dark);
    cursor: pointer;
}

.settingSection .settingItemTitle.no_vertical_padding{
    padding: var(--size-none) var(--space-xs);
}
.settingSection .settingItemTitle.small_vertical_padding{
    padding: var(--space-2xs) var(--space-xs);
}

#home #settingMenuBtn t{
    font-weight: 600;
}
body.browser.mobileweb .settingSection .settingItemTitle:not(.unclickable):hover,
.settingSection .settingItemTitle:not(.unclickable):active,
body.browser.mobileweb #settings .userInfoSection:hover,
#settings .userInfoSection:active{
    background-color: var(--bg-overlay-dark);
}


.settingSection .settingItemTitle .itemTitle{
   font-size: var(--text-sm);
   color: var(--text-dark);
   white-space: normal;

}
[data-role=page].lighttext.ui-page-active ~ div [data-role=popup] .settingSection .settingItemTitle .itemTitle,
[data-role=page].lighttext.ui-page-active ~ div [data-role=popup] .sequencer_settings .settings_panel_title,
body.darkTheme  div [data-role=popup] .settingSection .settingItemTitle .itemTitle,
body.darkTheme  div [data-role=popup] .sequencer_settings .settings_panel_title,
.c-bottom-sheet.darkTheme.active .settingSection .settingItemTitle .itemTitle,
.c-bottom-sheet.darkTheme.active  .sequencer_settings .settings_panel_title{
    color:  white;
    font-size: var(--text-sm);
}

.settingSection .settingItemTitle.with_input_block{
    display: flex;
    flex-direction: row;
}

.settingSection .settingItemTitle.with_input_block.vertical_align{
    flex-direction: column;
}

.settingSection .settingItemTitle.with_input_block .info_block{
    flex: 1 1 auto;
}

.settingSection .settingItemTitle.with_input_block .info_block.center_vertical_align{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.settingSection .settingItemTitle.with_input_block .input_block{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

}

.settingSection .settingItemTitle.with_input_block .input_block .itemTitle{
    color:  var(--color-gray-500);
}

.settingSection .settingItemTitle.with_input_block .input_block.constains_mulitple_buttons{
    flex-direction: column;
    align-items: flex-end;
}

.settingSection .settingItemTitle.with_input_block .input_block.constains_mulitple_buttons  .transparent_button{
    margin: var(--space-3xs) var(--size-none);
}

.settingSection .settingItemTitle.with_input_block .input_block.constains_mulitple_buttons  .transparent_button#deleteStripeAccountBtn,
.settingSection .settingItemTitle.with_input_block .input_block  .transparent_button.toggled.no_outline{
    border-color: transparent;
}

.settingSection .settingItemTitle.with_input_block .input_block  .transparent_button.toggled.no_outline{
    min-width: auto;
}
.transcription_remaning_container{
    padding: var(--space-2xs);
    box-sizing: border-box;
    width: var(--size-full);
}


.transcription_remaning_container .transcription_info{
    margin: var(--space-2xs) var(--size-none);
    text-align: right;
    font-weight: bold;
}

.transcription_remaning_container  .progress_bar_container{
    width: var(--size-full);
    height: var(--size-5);
    background: var(--trebble-primary-20);
    position: relative;
}

.transcription_remaning_container  .progress_bar_container .progress_bar_element{
    background: var(--gradient-primary-alt-reverse);
    position: absolute;
    left: 0px;
    height: var(--size-full);
}


body.browser.mobileweb  .settingSection .settingItemTitle.with_input_block .input_block.constains_mulitple_buttons  .transparent_button#deleteStripeAccountBtn:active,
.settingSection .settingItemTitle.with_input_block .input_block.constains_mulitple_buttons  .transparent_button#deleteStripeAccountBtn:hover,
body.browser.mobileweb  .settingSection .settingItemTitle.with_input_block .input_block  .transparent_button.toggled.no_outline:active,
.settingSection .settingItemTitle.with_input_block .input_block  .transparent_button.toggled.no_outline:hover{
    border-color: var(--trebble-primary);
}

.settingSection .settingItemTitle.with_input_block .input_block .switch label{
    padding: var(--size-none);
}

.settingSection .switch label input[type=checkbox]:checked+.lever,
body[appname=trebble] .switch label input[type=checkbox]:checked+.lever{
    background-color: var(--trebble-primary-200);
}
.settingSection .switch label input[type=checkbox]:checked+.lever:after,
body[appname=trebble] .switch label input[type=checkbox]:checked+.lever:after{
    background-color:var(--trebble-primary-600);
}
.settingSection .settingItemTitle .itemDescription,
#settings .userInfoSection .userInfoDetails .viewProlileLabel{
    color: var(--color-gray-500);
    font-size: var(--text-xs);
    
}

.settingSection .transparent_button{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: var(--size-100);
}


.button{
    color: white;
    background-color: var(--trebble-primary);
    font-weight: bold;
    border: var(--border-2) solid var(--trebble-primary);
    cursor: pointer;
}

.settingSection #upgradeNowLnk .itemTitle,
#body[state=content_loaded] div[data-role=header] .ui-controlgroup-controls  #upgradeButton{
    color: var(--success-green-alt);
}

#home:not([state=content_loaded]) [data-role=header] .ui-controlgroup-controls #upgradeButton .label,
#home:not([state=content_loaded]) [data-role=header] .ui-controlgroup-controls #upgradeButton t{
    color: white;
}

#home > div[data-role=header] .ui-controlgroup-controls #upgradeButton{
    font-size: var(--text-base);
    /* border: var(--border-3) solid var(--success-green-alt);*/
    height: var(--size-46);
    margin: var(--border-4);
    box-sizing: border-box;
}

[data-role=header] .ui-controlgroup-controls  #upgradeButton .label{

    font-weight: 900;
    margin: var(--size-none) var(--space-2xs);
    font-size: var(--text-md);
    color: var(--success-green-alt);

}

[data-role=header] .ui-controlgroup-controls  #upgradeButton t{

    font-weight: 600;
    font-size: var(--text-2xl);
    color: var(--success-green-alt);


}

#settings #logOutBtn{
    max-width: var(--size-500);
    margin: var(--space-lg) auto;
    border-bottom: var(--border-1) solid var(--color-black-5);
    height: var(--size-25);
    border: var(--border-2) solid var(--trebble-primary);
    align-items: center;
    justify-content: center;
    color: white;
    display: flex;
    background-color: var(--trebble-primary);
}

/*body #ExplorePage [data-role=header] #searchBtn t.pe-7s-search{
    font-weight: 600;
    }*/
    body:not(.footerMenuBardisplayed) #ExplorePage [data-role=header] #searchBtn{
        display: none;
    }
    t.pe-7s-search{
        font-weight: 900;
    }

    .choose_background_music_popup_content_wrapper,
    .capsule_list_content_wrapper{
        height: var(--size-full);
        width: var(--size-full);  
    }

    [data-role=popup].chooseCapsuleFromLibrayPopup .choose_background_music_popup_content_wrapper,
    [data-role=popup].chooseMyDrafJourneysPopup .choose_background_music_popup_content_wrapper{
        height: calc(var(--size-full) - var(--size-icon-lg));
        margin-top: var(--size-icon-lg); 
    }

    .choose_background_music_popup_content_wrapper{
        max-width: var(--size-700);
    }

    .sound_source_credit_wrapper{
        text-align: center;
        font-size: 85%;
        margin: var(--space-2xs) var(--size-none);
    }


    .capsule_list_content_wrapper{
        margin: auto;
    }

    .capsule_list_content_wrapper .selected_content_wrapper .collection_content_wrapper .capsuleCard{
        display: inline-flex;
    }

    .music_sounds_and_upload_widget:not([is_loading=true]) .loading_info_box{
        display: none;
    }

    .music_sounds_and_upload_widget > .content{
        height: calc(var(--vh-full) - var(--size-100));
        width: calc(var(--vw-full) - var(--space-sm));
        margin-top: var(--size-50);
        display: flex;
        flex-direction: column;
    }
    .music_sounds_and_upload_widget .trebble_tab_group{
        flex: 0 0 60px;
        height: var(--size-60);
        width: -moz-fit-content;
        width: fit-content;
        overflow: auto;
        max-width: var(--size-full);
        margin-left: auto;
        margin-right: auto;
    }

    .music_sounds_and_upload_widget .tab_content{

        /* flex: 0 0 calc(var(--size-full) - var(--space-xl)); */
        height: calc(var(--size-full) - var(--space-xl));
        overflow: auto;

    }
    .music_sounds_and_upload_widget .tab_content > section{
        height: var(--size-full);
    }

    .choose_background_music_popup_content_wrapper .content,
    .capsule_list_content_wrapper .content{
        display: flex;
        flex-direction: column;
        height: var(--size-full);
    }
    .choose_background_music_popup_content_wrapper .fixed_section > .ui-select,
    .capsule_list_content_wrapper .fixed_section > .ui-select,
    .capsule_list_content_wrapper.hide_category_list #category_fld,
    .capsule_list_content_wrapper.hide_category_list #ategory_fld-button,
    .capsule_list_content_wrapper.hide_category_list .tag_button_list_wrapper{
        display: none;
    }

    .tab_content .tab_content_item{
        justify-content: center;
    }

    .choose_background_music_popup_content_wrapper .content .fixed_section,
    .capsule_list_content_wrapper .content .fixed_section{
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
    }

    .trebble_tab_group{
        display: flex;
        flex-direction: row;
        margin-bottom: var(--space-2xs);
    }

    .trebble_tab_group .trebble_tab{
        display: inline;
        padding: var(--space-2xs) var(--space-sm);
        min-width: var(--size-60);
        height: var(--size-46);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-bottom: var(--border-3) solid transparent;
        cursor: pointer;
        box-sizing: border-box;
    }


    .trebble_tab_group .trebble_tab.selected{
        border-bottom: var(--border-3) solid white;
    }

    .choose_background_music_popup_content_wrapper .content .fixed_section #pageHeaderTitleWrapper{
        position: relative;
    }

    .choose_background_music_popup_content_wrapper .content .selected_content_wrapper{
       flex: 0 0 calc(var(--size-full) - var(--size-70));
       height: calc(var(--size-full) - var(--size-70));
       overflow: scroll;
       max-width: var(--size-600);
       width: var(--size-full);
       margin: auto;
   }

   .capsule_list_content_wrapper .content .selected_content_wrapper{
       flex: 0 0 calc(var(--size-full) - var(--size-70));
       height: calc(var(--size-full) - var(--size-70));
       overflow: scroll;
       /*max-width: var(--size-500);*/
       width: var(--size-full);
       margin: auto;
   }

   #mylibrary .capsule_list_content_wrapper .content .selected_content_wrapper .capsuleCard{
    margin: var(--space-2xs);
}


.capsule_list_content_wrapper.hide_category_list .content .selected_content_wrapper{
 flex: 0 0 100%;
 height: var(--size-full);
}

.choose_background_music_popup_content_wrapper .content .search_field_wrapper{
    max-width: calc(var(--size-full) - var(--space-lg));
    margin: auto;
}

.capsule_list_content_wrapper .content .search_field_wrapper{
   max-width: calc(var(--size-full) - var(--space-lg));
   margin: auto;
}


.choose_background_music_popup_content_wrapper .content .background_music_list{
    box-sizing: border-box;
    padding: var(--space-sm);
}

.capsule_list_content_wrapper .content .background_music_list{
    box-sizing: border-box;
    padding: var(--space-sm);
}


body.mobileweb .scrollable-y::-webkit-scrollbar ,
body.mobileweb .scrollable::-webkit-scrollbar {
    -webkit-appearance: none;
            appearance: none;
}

body.mobileweb .scrollable-y::-webkit-scrollbar:vertical,
body.mobileweb .scrollable::-webkit-scrollbar:vertical {
    width: var(--size-10);
}

body.mobileweb .scrollable-y::-webkit-scrollbar:horizontal,
body.mobileweb .scrollable::-webkit-scrollbar:horizontal {
    height: var(--size-10);
}

body.mobileweb .scrollable-y::-webkit-scrollbar-thumb,
body.mobileweb .scrollable::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: var(--border-2) solid white; /* should match background, can't be transparent */
    background-color: var(--color-black-30);
}

body.mobileweb [data-role=popup] .scrollable-y::-webkit-scrollbar,
body.mobileweb [data-role=popup] .scrollable::-webkit-scrollbar {
    -webkit-appearance: none;
            appearance: none;
}

body.mobileweb [data-role=popup] .scrollable-y::-webkit-scrollbar:vertical,
body.mobileweb [data-role=popup] .scrollable::-webkit-scrollbar:vertical {
    width: var(--size-10);
    background-color: var(--color-white-1);
}

body.mobileweb [data-role=popup] .scrollable-y::-webkit-scrollbar:horizontal,
body.mobileweb [data-role=popup] .scrollable::-webkit-scrollbar:horizontal {
    height: var(--size-10);
    background-color: var(--color-white-1);
}

body.mobileweb [data-role=popup] .scrollable-y::-webkit-scrollbar-thumb,
body.mobileweb [data-role=popup] .scrollable::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: var(--border-2) solid transparent; /* should match background, can't be transparent */
    background-color: var(--color-white-3);
}


.choose_background_music_popup_content_wrapper:not([userUploadDisplayed=true]) .content .showImportYourOwnMusicButton{
    display: none;
}
.trebble_audio_list_item{
    height: var(--size-60);
    display: flex;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--space-3xs);
    margin: var(--space-2xs) auto;
    max-width: var(--size-400);

}

.trebble_audio_list_item .play_audio_btn{
    background-color: var(--color-white-100);
    height: var(--size-40);
    width: var(--size-40);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-black);
    margin: auto;
    cursor: pointer;
    z-index: 1;
}

.trebble_audio_list_item.trebble_compilation_audio_list_item:not(.covertArtNotDisplayed) .play_audio_btn{
    background-color: var(--color-black-20);
    height: var(--size-full);
    width: var(--size-full);
    color: white;
    border-radius: 0%;
}

.trebble_audio_list_item.trebble_compilation_audio_list_item.notPlayable .play_audio_btn{
    display: none;
}

.trebble_compilation_audio_list_item .audio_compilation_title,
.trebble_compilation_audio_list_item .audio_compilation_description{
    text-align: start;
}
.trebble_compilation_audio_list_item .audio_compilation_description{
    font-size: 85%;
    opacity: 0.5;
}
.trebble_audio_list_item.is_video.transparent .coverArtWrapper{
    background-size: contain;
    background-position: center;
    height: 68px;
    flex: 1 1 120px;
    margin: auto;
    background-repeat: no-repeat;
    background-color: black;
}

.trebble_audio_list_item.is_video{
    height: var(--size-80);
    max-width: var(--size-500);
}

.trebble_audio_list_item.transparent.is_video .audioInfo{
        width: calc(var(--size-full) - var(--size-layout-sm));
}

.trebble_audio_list_item.is_video .play_audio_btn {
    background-color: transparent;
    color: white;
}

.trebble_audio_list_item.is_video .video_duration{
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: 80%;
    background-color: var(--color-black-50);
    padding: var(--border-2);
}

.trebble_audio_list_item.doNotShowArtistName .audioInfo > div.audio_artist{
    display: none;
}
.trebble_audio_list_item .play_audio_btn .playIconWrapper{
    margin-left: var(--border-3);
    margin-top: var(--border-3);

}
.trebble_audio_list_item .play_audio_btn .playIconWrapper,
.trebble_audio_list_item .play_audio_btn .loadingIconWrapper,
.trebble_audio_list_item .play_audio_btn .pauseIconWrapper{
    font-size: var(--text-2xl-px);
}
.trebble_audio_list_item.transparent{
    border: var(--border-1) solid var(--color-white-10);
    /* background-color: var(--color-white-5)!important; */
}

.trebble_audio_list_item.transparent .coverArtWrapper{
    display: flex;
    height: var(--size-50);
    width: var(--size-50);
    flex: 0 0 50px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.trebble_audio_list_item.transparent .coverArtWrapper img{
    height: var(--size-full);
    position: absolute;
    width: var(--size-full);
}

.trebble_audio_list_item.transparent .audioInfo{

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1  1 auto;
    width: calc(var(--size-full) - var(--text-10xl-px));

}
.trebble_audio_list_item.transparent .audioInfo > div{
    white-space: nowrap;
    width: calc(var(--size-full) - var(--space-lg));
    overflow: hidden;
    text-overflow: ellipsis;
    margin: var(--border-4) var(--space-sm);
}

.trebble_audio_list_item.transparent .audioInfo > div.audio_artist{
    font-size: 85%;
    opacity: 0.7;
}

.trebble_audio_list_item:not(.canBeDeleted) .delete_button,
.trebble_audio_list_item:not(.canBeSelected) .select_button,
.trebble_audio_list_item:not(.canBeSelected) .unselect_button,
.trebble_audio_list_item.canBeSelected[is_selected=true] .select_button,
.trebble_audio_list_item.canBeSelected[is_selected=false] .unselect_button,
.trebble_audio_list_item:not(.canShowMoreOptions) .more_options_button{
    display: none;
}  
.trebble_audio_list_item.transparent .button_bar{

    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.trebble_audio_list_item.transparent .button_bar .icon_button{

    font-size: var(--text-2xl-px);
    padding: var(--size-none) var(--space-2xs);
    cursor: pointer;

}

.choose_background_music_popup_content_wrapper .content  .showImportYourOwnMusicButton{

    width: var(--size-full);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex: 0 0 50px;
    height: var(--size-50);
    box-sizing: border-box;
    border: var(--border-2) solid;
    max-width: var(--size-400);
    /*margin: var(--text-3xs) auto;*/
    margin: auto;
    border: var(--border-0);
    cursor: pointer;
    font-weight: 900;
    text-transform: uppercase;
    background-color: var(--text-light);
    color: var(--text-dark);
}

.showImportYourOwnMusicButton .upload_icon{
    font-size: var(--text-xl-px);
    margin-left: var(--space-2xs);
    margin-right: var(--space-2xs);
}

.choose_background_music_popup_content_wrapper:not([isLoading=true]) .loading_info_box,
.choose_background_music_popup_content_wrapper[isLoading=true] .content,
.capsule_list_content_wrapper:not([isLoading=true]) .loading_info_box,
.capsule_list_content_wrapper[isLoading=true] .content{
    display: none;
}
body #background_music_category_fld,
body #background_music_category_fld-button,
body #category_fld-button/*,
body.mobileweb .tag_button_list_wrapper*/{
    display: none !important;
}
#background_music_category_fld-button{
    width: calc(var(--size-full) - var(--space-lg));
    margin: auto;
    box-sizing: border-box;
    max-width: var(--size-400);
    height: var(--size-50);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    display: flex;
    font-weight: bold;
    border: var(--border-0);
    background-color: white;
    color: var(--color-black);

}

[data-role=popup] * #background_music_category_fld-button > span{

    color: var(--color-black);
    font-weight: 900;
    text-transform: uppercase;

}

#background_music_category_fld-button i{
  border-radius: 50%;
  border: var(--border-2) solid var(--color-black);
  display: inline-block;
  width: var(--size-20);
  font-weight: bold;
  font-size: var(--text-sm-px);
  height: var(--size-20);
  align-items: center;
  justify-content: center;
  margin: var(--size-none) var(--space-2xs);
  display: flex;
}

.tag_button_list_wrapper{
    display: flex;
    flex-direction: row;
    flex: 0 0 60px;
    align-items: center;
    width: var(--size-full);
    padding: var(--size-none) var(--space-sm);
    box-sizing: border-box;
    margin: auto;
    overflow: auto;
    max-width: var(--size-800);
    justify-content: center;
}

.tag_button_list_wrapper.size_large{
    font-size: var(--text-lg-px);
}

.tag_button_list_wrapper.size_large .list_tag_button{
    height: var(--size-50);
    font-weight: bold;
}

.tag_button_list_wrapper.no_max_width{
    max-width: var(--size-unset);
}

[data-role=popup] .tag_button_list_wrapper{
    justify-content: start;
    max-width: var(--size-450);
}

.tag_button_list_wrapper .list_tag_button{
    display: flex;
    box-sizing: border-box;
    padding: var(--size-none) var(--space-sm);
    height: var(--size-40);
    justify-content: center;
    align-items: center;
    background-color: var(--color-gray-100);
    margin: var(--size-none) var(--space-3xs);
    border-radius: 2px;
    white-space: nowrap;
    font-weight: bold;
    cursor: pointer;
    font-size: 85%;
}

.link_lookalike{
    color: var(--trebble-primary-200);
}

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape){
    .tag_button_list_wrapper .list_tag_button{
        padding: var(--size-none) var(--space-sm);
    }
    .tag_button_list_wrapper{
     justify-content: start;
 }
}

[data-role=popup] .tag_button_list_wrapper .list_tag_button,
[data-role=page].lighttext .tag_button_list_wrapper .list_tag_button,
body.darkTheme .tag_button_list_wrapper .list_tag_button:not(.selected){
    background-color: var(--color-white-20);
    color:  white;
}

.tag_button_list_wrapper .list_tag_button.selected,
[data-role=page].lighttext .tag_button_list_wrapper .list_tag_button.selected{
    color: var(--trebble-primary);
    background-color: var(--trebble-primary-100);
}
/*
[data-role=popup] .tag_button_list_wrapper .list_tag_button.selected{
   background-color: white;
   color:var(--color-black);
   }*/

   .journeyPage #createNewCapsuleFloatingBtnWrapper{
    border-radius: 50%;
    z-index: 99999;
    background: linear-gradient( 135deg ,#fc466b 25%,var(--trebble-blue) 100%) var(--color-black);
    box-shadow: var(--shadow-bottom);
    background-size: 200% 200%;
    height: var(--size-75);
    width: var(--size-75);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
}

.journeyPage #whatsacapsuleinfobtn{
    display: none !important;
}

.journeyPage #createNewCapsuleFloatingBtnWrapper t{
    position: relative;
    font-size: var(--text-6xl-px);
}


.journeyPage.editable[journey_status=DRAFT] #publishButton,
.journeyPage.editable[journey_status=SCHEDULED] #revertToDraftButton,
.journeyPage[journey_status=SCHEDULED] #shareTrebbleBtn,
.journeyPage[journey_status=AVAILABLE] #shareTrebbleBtn,
.journeyPage.editable[journey_status=AVAILABLE] #archiveBtn,
.journeyPage.editable[journey_status=ARCHIVED] #removeFromArchiveButton,
.journeyPage.editable[journey_status=UNKNOWN] #createDraftButton{
    display: flex;
    color: var(--text-light);
    width: auto;
}


.journeyPage:not([schedule_date_warning_should_be_displayed=true]) .schedule_date_message_wrapper,
.journeyPage.editable[journey_status=DRAFT] #editButton,
.journeyPage[journey_status=DRAFT] #revertToDraftButton,
.journeyPage[journey_status=DRAFT] #removeFromArchiveButton,
.journeyPage[journey_status=DRAFT]:not(.publicPage)  #shareTrebbleBtn,
.journeyPage[journey_status=DRAFT] #archiveBtn,
.journeyPage[journey_status=SCHEDULED] #editButton,
.journeyPage[journey_status=SCHEDULED] #archiveBtn,
.journeyPage[journey_status=SCHEDULED] #publishButton,
.journeyPage[journey_status=AVAILABLE] #editButton,
.journeyPage[journey_status=AVAILABLE] #publishButton,
.journeyPage[journey_status=AVAILABLE] #revertToDraftButton,
.journeyPage[journey_status=AVAILABLE] #removeFromArchiveButton,
.journeyPage[journey_status=AVAILABLE] #archiveBtn,
.journeyPage[journey_status=ARCHIVED] #editButton,
.journeyCard[journey_status=ARCHIVED] #followBtn,
.journeyCard[journey_status=ARCHIVED] #buyNowBtn,
.journeyPage[journey_status=ARCHIVED] #publishButton,
.journeyPage[journey_status=ARCHIVED] #revertToDraftButton,
.journeyPage[journey_status=ARCHIVED] #archiveBtn,
.journeyPage[journey_status=ARCHIVED] #menuOptionButton,
.journeyPage[journey_status=ARCHIVED]:not(.publicPage) #shareTrebbleBtn,
.journeyPage[journey_status=DRAFT] #createDraftButton,
.journeyPage[journey_status=SCHEDULED] #createDraftButton,
.journeyPage[journey_status=SCHEDULED] #removeFromArchiveButton,
.journeyPage[journey_status=AVAILABLE] #createDraftButton,
.journeyPage[journey_status=ARCHIVED] #createDraftButton,
.journeyPage[journey_status=UNKNOWN] #editButton,
.journeyPage[journey_status=UNKNOWN] #publishButton,
.journeyPage[journey_status=UNKNOWN] #revertToDraftButton,
.journeyPage[journey_status=UNKNOWN]:not(.publicPage)  #shareTrebbleBtn,
.journeyPage[journey_status=UNKNOWN]:not(.publicPage)  #shareTrebbleBtn,
.journeyPage[journey_status=UNKNOWN] #archiveBtn,
.journeyPage:not([journey_status=DRAFT]) #createNewCapsuleFloatingBtnWrapper,
.journeyPage:not([journey_status=DRAFT]) #previewJourneyButton,
.journeyPage[journey_status=UNKNOWN] #removeFromArchiveButton{
    display: none !important;
}

.journeyPage [data-role=header] #pageHeaderTitleWrapper > span{
    display: none;
}

.journeyPage.playlistDetailsPage:not(.editable).showCapsulesOnly #myCapsulesListWrapper{
    max-width: var(--size-900);
    margin: auto;
}

.journeyPage:not(.editable) #contentWrapper #pageHeaderTitleWrapper,
.journeyPage:not(.editable) #contentWrapper .archivedCapsulesBlock{
    display: none;
}

.journeyPage #contentWrapper #pageHeaderTitleWrapper {
    overflow: visible;
}

.journeyPage #contentWrapper #pageHeaderTitleWrapper > span{
    justify-content: center;
    margin: auto;
    white-space: normal;
    line-height: var(--line-height-1);
    margin: var(--space-2xs) auto;
}

.journeyPage #contentWrapper #pageHeaderTitleWrapper > span.journey_title{
    white-space: normal;
    line-height: var(--line-height-1);
    display: inline-block; 
}

.journeyPage .listeningInstructionsBox{
    display: none;
}

.journeyPage .journey_status_tag,
.journeyCard .journey_status_tag{

    font-size: var(--text-2xs-px);
    background-color: var(--color-warning-400);
    padding: var(--border-4);
    color:black;
    border-radius: 2px;
    margin: var(--size-none) var(--space-2xs);
    text-transform: uppercase;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: bold;

}

[data-role=page]:not(#myJourneys) .journeyCard .journey_status_tag{
    display: none;
}

html .ui-page-theme-a#myJourneys .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize.doNotShowSubscribeButton[show_journey_status_tag=true], html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.smallcardsize.doNotShowSubscribeButton[show_journey_status_tag=true],
html .ui-page-theme-a#myJourneys .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize.doNotShowSubscribeButton[show_journey_status_tag=true], html .ui-page-theme-c .playlistItem.withLargeAlbumArt.journeyCard.rectangularImage.smallcardsize.doNotShowSubscribeButton[show_journey_status_tag=true]{
    height:var(--size-180);

}

#home[role="presentation"]{
    background-color: transparent;
    padding: var(--size-none);
}

/*** DARK THEME START ****/
html body.white-theme.darkTheme .ui-overlay-a, 
html body.white-theme.darkTheme .ui-page-theme-a[data-role=page]:not(.lighttext), 
html body.white-theme.darkTheme .ui-page-theme-a[data-role=page]:not(.lighttext) .ui-panel-wrapper,
body.white-theme.darkTheme #globalSearchPageHeader, 
body.white-theme.darkTheme #myLibraryHeader, 
body.white-theme.darkTheme #mySubscriptionsHeader, 
body.white-theme.darkTheme #myJourneysHeader, 
body.white-theme.darkTheme div[data-role=page]:not(.lighttext):not(#featurePage):not(#ExplorePage):not(#Onboarding) div.ui-header[data-role=header],
body.darkTheme [data-role=page]:not(.lighttext) .ui-content,
body.darkTheme [data-role=page]:not(.lighttext) .listHeader,
body.darkTheme [data-role=page]:not(.lighttext) .infiniteListInnerContainer{
    background-color:var(--color-black)!important;
    border:transparent;
    color: white;
}

body.darkTheme [data-role=page]:not(.lighttext) .songLibraryWrapper{
    background-color:var(--color-black)!important;
    color: white;
}

body.darkTheme [data-role=page]:not(.lighttext) .listHeader{
    color: var(--color-gray-300);
}

body.white-theme.darkTheme div.ui-header[data-role=header]~.ui-panel-wrapper>.ui-content>[data-role=tabs]>[data-role=navbar], 
body.white-theme.darkTheme div.ui-header[data-role=header]~.ui-panel-wrapper>.ui-content>[data-role=tabs]>[data-role=navbar]>ul>li>a{
    background-color:var(--color-black)!important;
    border:transparent;
}

body.darkTheme #addToTrebbleOptionButtuon,
body.darkTheme #gradeOptionButtuon,
body.darkTheme .showCommentBtnWrapper #showCommentOptionButton,
body.darkTheme .showInfoBtnWrapper #showInfoOptionButton,
body.darkTheme #songCapsuleOptionButtuon,
body.darkTheme #songLibraryOptionButtuon{
    color: white !important;
}

body.darkTheme #home[state=content_loaded] #onYourFeedTodayBoxWrapper[state=content_loaded],
body.darkTheme #home[state=content_loaded] #homeHeader #pageHeaderTitleWrapper,
body.darkTheme #home[state=loading] #homeHeader #pageHeaderTitleWrapper{
    color: white;
}

body.darkTheme .outline_stats_table .outline_stats_header_row,
body.darkTheme .specific_journey_stats_summary{
    background-color: var(--color-white-5);
}

/*body.darkTheme .sequencer_node_inspector .basic_inpector_param_view.audio_segment_param_view .action_btn_bar button{
    background-color: var(--color-white-20);
}*/

body.darkTheme .outline_stats_table{
    border: var(--border-1) solid var(--color-white-5);
}
body.darkTheme .outline_stats_table .outline_stats .day_number, body.darkTheme  .outline_stats_table .outline_stats_header_row .day_number,
body.darkTheme .outline_stats_table .outline_stats .shortcast_title, body.darkTheme  .outline_stats_table .outline_stats_header_row .shortcast_title{
    border-right: var(--border-1) solid var(--color-white-5);
}

body.darkTheme .outline_stats_table .outline_stats , body.darkTheme  .outline_stats_table .outline_stats_header_row {
    border-bottom: var(--border-1) solid var(--color-white-5);
}

body.darkTheme #home #onYourFeedTodayBoxWrapper .play_feed_btn,
body.darkTheme #home #onYourFeedTodayBoxWrapper .start_category_shortcast_radio_btn{
    box-shadow: var(--shadow-bottom);
}

body.white-theme.darkTheme input.customSearchField[type=search], body.white-theme.darkTheme input.shareableLink,
body.darkTheme [data-role=page] * .songInfo * .itemSubtitle,
body.darkTheme .songArtistLibrary{
    color:var(--color-white-70);
}
body.white-theme.darkTheme input.customSearchField[type=search]:focus, body.white-theme.darkTheme input.shareableLink:focus,
body.darkTheme.notificationTitle.itemTitle,body.darkTheme [data-role=page] * .songInfo * .itemTitle,
body.darkTheme .songTitleLibrary{
    color:white;
}


body.darkTheme.mobileweb .scrollable-y::-webkit-scrollbar {
    -webkit-appearance: none;
            appearance: none;
}

body.darkTheme.mobileweb .scrollable-y::-webkit-scrollbar:vertical {
    width: 11px;
    background-color: var(--color-white-1);
}

body.darkTheme.mobileweb .scrollable-y::-webkit-scrollbar:horizontal {
    height: 11px;
    background-color: var(--color-white-1);
}

body.darkTheme.mobileweb  .scrollable-y::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: var(--border-2) solid transparent; /* should match background, can't be transparent */
    background-color: var(--color-white-3);
}



body.white-theme.darkTheme div[data-role=page]:not(.lighttext) [data-role=header] * #deleteButton,
body.white-theme.darkTheme div[data-role=page]:not(.lighttext) [data-role=header] * #editButton,
body.white-theme.darkTheme div[data-role=page]:not(.lighttext) [data-role=header] * #filterButton,
body.white-theme.darkTheme div[data-role=page]:not(.lighttext) [data-role=header] * #loadingIndicatorBtn,
body.white-theme.darkTheme div[data-role=page]:not(.lighttext) [data-role=header] * #loadingIndicatorBtn:active,
body.white-theme.darkTheme div[data-role=page]:not(.lighttext) [data-role=header] * #loadingIndicatorBtn:hover,
body.white-theme.darkTheme div[data-role=page]:not(.lighttext) [data-role=header] * #nextButton.tag.actionButton,
body.white-theme.darkTheme div[data-role=page]:not(.lighttext) [data-role=header] * #saveButtonIcon, 
body.white-theme.darkTheme div[data-role=page]:not(.lighttext) [data-role=header] * #showRecordSectionButton.tag.actionButton, 
body.white-theme.darkTheme div[data-role=page]:not(.lighttext) [data-role=header] * #showUploadSectionButton.tag.actionButton, 
body.white-theme.darkTheme div[data-role=page]:not(.lighttext):not(#player) #header-back-button,
body.white-theme.darkTheme div[data-role=page]:not(.lighttext):not(#player) #header-queue-button, 
body.white-theme.darkTheme div[data-role=page]:not(.lighttext):not(#player) [data-role=header] * #menuOptionButton{
    color:white;
}
body.darkTheme .homePanel * .loggedInUserInfoBox,
body.darkTheme .homePanel * .loggedInUserInfoBox>.userCoverArtWrapper>.userInfo>.username.itemTitle,
body.darkTheme .homePanel,
body.darkTheme .homePanel * .menuBox,
body.darkTheme .homePanel .settingMenuBox{
    background-color:var(--color-black);
    color:white;
}

body.darkTheme .formLabel,
body.darkTheme label.formLabel {
    font-weight: 700;
    color: white;
}

body.darkTheme .userListItem,
body.darkTheme #settings .userInfoSection,
body.darkTheme .settingSection,
body.darkTheme .listHeader,
body.darkTheme .songLibraryWrapper,
body.darkTheme [data-role=page]:not(.lighttext) .songLibraryWrapper{
    border-bottom: var(--border-1) solid var(--color-white-5);
}

/*
#onYourFeedTodayBoxWrapper{
    display: none !important;
}
*/

#onYourFeedTodayBoxWrapper[state=loading] > div:not(.loading_info_box),
#paidAccountSubsPopupWrapper[state=loading] > div:not(.loading_info_box),
#onYourFeedTodayBoxWrapper[state=error] > div:not(.error_loading_box),
#paidAccountSubsPopupWrapper[state=error] > div:not(.error_loading_box),
#onYourFeedTodayBoxWrapper[state=no_new_content] > div:not(.all_caught_up_box),
#onYourFeedTodayBoxWrapper[state=content_loaded] > div:not(.feedOverviewBox),
#paidAccountSubsPopupWrapper[state=content_loaded] > div:not(.paidAccountSubsPopupContent){
    display: none;
}

#onYourFeedTodayBoxWrapper[state=loading] > div.loading_info_box,
#paidAccountSubsPopupWrapper[state=loading] > div.loading_info_box,
#onYourFeedTodayBoxWrapper[state=error] > div.error_loading_box,
#paidAccountSubsPopupWrapper[state=error] > div.error_loading_box,
#onYourFeedTodayBoxWrapper[state=no_new_content] > div.all_caught_up_box,
#onYourFeedTodayBoxWrapper[state=content_loaded] > div.feedOverviewBox,
#paidAccountSubsPopupWrapper[state=content_loaded] > div.paidAccountSubsPopupContent{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: var(--size-full);
    text-align: center;
}
#payment-error-message,
#onYourFeedTodayBoxWrapper[state=error],
#paidAccountSubsPopupWrapper[state=error]{
    background: var(--gradient-error);
    color: white;
    background-size: 200% 200%;
    animation: gradientanimation 30s ease infinite;
}

#onYourFeedTodayBoxWrapper[state=content_loaded]{
    background: var(--gradient-primary);
    color: white;
    background-size: 400% 400%;
    animation: gradientanimation 30s ease infinite;
}

#Onboarding #playMyFeedForFirstTimeButton{
    align-items: center;
    height: var(--size-46);
    font-size: var(--text-base-px);
    padding: var(--size-none) var(--space-md);
    min-width: var(--size-200);
    font-weight: 700;
    box-sizing: border-box;
    justify-content: center;
    display: flex;
    background: var(--gradient-primary);
    border: var(--border-0);
    color: var(--text-light);
    background-size: 300% 300%;
    animation: gradientanimation 30s ease infinite;
}

#Onboarding #playMyFeedForFirstTimeButton.disabled,
body.mobileweb #Onboarding #playMyFeedForFirstTimeButton.disabled:hover,
#Onboarding #playMyFeedForFirstTimeButton.disabled:active{
    /*background: transparent;
    color: var(--color-gray-300);
    border: var(--border-2) solid var(--color-gray-300);*/
    background: var(--color-gray-900);
    color: black !important;
    border: var(--border-2) solid var(--color-gray-900);
    cursor: default;
}

#Onboarding  #playMyFeedForFirstTimeButtonWrapper{

    position:absolute;
    bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--size-80);
    width: var(--size-full);
    box-sizing: border-box;
    z-index: 9999;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    background: linear-gradient(0deg, var(--color-black-100) 0%, var(--color-black-80) 50%, var(--color-black-0) 100%);
}

@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
 #Onboarding  #playMyFeedForFirstTimeButtonWrapper{
    background: linear-gradient(0deg, var(--color-black-100) 0%, var(--color-black-80) 50%, var(--color-black-30) 100%);
}
}


#Onboarding.showNoContent .ui-userWelcomeMessageBoxWrapper ,
#Onboarding.showNoContent .ui-header ,
#Onboarding.showNoContent #playMyFeedForFirstTimeButtonWrapper,
#Onboarding.showNoContent .ui-content,
#Onboarding.showNoContent .ui-panel-wrapper,

#Onboarding.showWelcomeMessage .ui-header ,
#Onboarding.showWelcomeMessage #playMyFeedForFirstTimeButtonWrapper,
#Onboarding.showWelcomeMessage .ui-content,
#Onboarding.showWelcomeMessage .ui-panel-wrapper{
 display:none;
}

#Onboarding.showWelcomeMessage #userWelcomeMessageBoxWrapper{ 
    height: var(--size-800);
    width: var(--size-full);
    align-items: center;
    display: flex;
    min-height: var(--size-full);
    flex: 0 0 100%;
    justify-content: center;
    flex-direction: column;
    max-width: var(--size-500);
    margin: auto;
}

#Onboarding.showWelcomeMessage #userWelcomeMessageBoxWrapper .userWelcomeMessage{

    font-size: var(--text-3xl-px);
    font-weight: 900;
    text-align: left;
    padding: var(--space-lg);
    box-sizing: border-box;

}

#Onboarding.showWelcomeMessage #userWelcomeMessageBoxWrapper .userWelcomeSmallMessage{

    font-size: var(--text-md-px);
    font-weight: 400;
    text-align: left;
    padding: var(--space-lg);
    box-sizing: border-box;

}
#Onboarding.showWelcomeMessage #userWelcomeMessageBoxWrapper .buttonWrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--size-full) - var(--size-100));
    margin-top: var(--space-lg);
}

#Onboarding #startSetupBtn{
 color: white;
 border: var(--border-0);
 font-size: var(--text-lg-px);
 display: flex;
 background: var(--trebble-gradient-pink);
 text-align: center;
 height: var(--size-50);
 justify-content: center;
 align-items: center;
 width: calc(var(--size-full) - var(--size-100));
 flex: 0 0 100%;
 box-sizing: border-box;
 margin: auto;
}
#Onboarding:not(.showWelcomeMessage) #userWelcomeMessageBoxWrapper{
 display:none;
}

#Onboarding  #guideMessageBox{
  padding: var(--space-sm);
  text-align: left;
  color: var(--text-light);
  margin: var(--size-none) auto;
  margin-bottom: var(--space-2xs);
  max-width: var(--size-250);
  text-align: center;
  font-weight: bold;
  background-color: var(--color-white-5);
  box-sizing: border-box;
  min-height: var(--size-80);
}

#onYourFeedTodayBoxWrapper[state=loading]{
    background-color: white;
    color: var(--text-dark);
    box-shadow: var(--shadow-right);
}

#onYourFeedTodayBoxWrapper[state=no_new_content]{
    background: linear-gradient(to bottom right,var(--success-green),var(--success-green-alt));
    color: white;
    background-size: 200% 200%;
    animation: gradientanimation 30s ease infinite;
}
#onYourFeedTodayBoxWrapper[state=content_loaded] > div.feedOverviewBox:not(.center){
    align-items: flex-start;
}

#onYourFeedTodayBoxWrapper .closeButton{
    position: absolute;
    top: 0;
    right: 5px;
    display: block !important;
    cursor: pointer;
}

#onYourFeedTodayBoxWrapper .closeButton i{
    font-size: var(--text-2xl-px);
}

.feedOverviewBox.center .feed_description{
    font-size: var(--text-base-px);
    text-align: center;
}

#onYourFeedTodayBoxWrapper .play_feed_btn{
    display: flex;
    border: var(--border-2) solid white;
    width: calc(var(--size-full) - var(--border-4));
    margin: var(--space-xs) var(--size-none);
    flex-direction: row;
    background-color: white;
    color: var(--trebble-primary);
    font-weight: 900;
}

body.browser.mobileweb #onYourFeedTodayBoxWrapper .play_feed_btn:hover,
#onYourFeedTodayBoxWrapper .play_feed_btn:active{
    background-color: transparent;
    color: white;

}

.play_feed_btn > .playback_state_btn{

    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--size-46);
    width: var(--size-full);
}

/*
#onYourFeedTodayBoxWrapper[state=error] > div.error_loading_box,
#onYourFeedTodayBoxWrapper[state=no_new_content] .all_caught_up_box{

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
*/

#onYourFeedTodayBoxWrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 370px;
    margin: var(--text-sm-px) auto var(--space-md) auto;
    box-sizing: border-box;
    padding: var(--space-md);
    box-shadow: var(--shadow-bottom);
    position: relative;

}

#onYourFeedTodayBoxWrapper .error_loading_box .error_icon,
#paidAccountSubsPopupWrapper .error_loading_box .error_icon,
#onYourFeedTodayBoxWrapper .all_caught_up_box .caught_up_icon{

    font-size: var(--text-7xl-px);
    margin: var(--space-2xs) var(--size-none);

}

#onYourFeedTodayBoxWrapper .error_loading_box .error_message,
#onYourFeedTodayBoxWrapper .loading_info_box .message,
#paidAccountSubsPopupWrapper .error_loading_box .error_message,
#paidAccountSubsPopupWrapper .loading_info_box .message,
#onYourFeedTodayBoxWrapper .all_caught_up_box .description{
    font-size: var(--text-base-px);
}

#onYourFeedTodayBoxWrapper .loading_info_box .message{
    opacity: 0.5;
    margin: var(--space-2xs) var(--size-none);
    font-size: var(--text-sm-px);
}

#onYourFeedTodayBoxWrapper .title{
    font-weight: 900;
    font-size: var(--text-lg);
    padding: var(--space-xs) var(--size-none);
    max-width: var(--size-500);
    margin: var(--size-none) var(--space-sm);

}

#home[state=content_loaded] #onYourFeedTodayBoxWrapper .title{
    margin: var(--size-none) var(--size-icon-md);
    background: var(--gradient-primary-alt);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientanimation 10s ease infinite;
}

#play_feed_btn > span > t{
    margin: var(--size-none) var(--space-2xs);
    font-size: var(--text-xl-px);

}

.feedOverviewBox .text_summary{
    padding-left: var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    font-size: var(--text-sm-px);
    overflow: hidden;
    
}

.feedOverviewBox  .feed_description{
    font-size: var(--text-sm-px);
}
#onYourFeedTodayBoxWrapper .all_caught_up_box .description,
#onYourFeedTodayBoxWrapper .error_loading_box .error_message{
    text-align: center;
    padding: var(--size-none) var(--space-lg);
    color: white;
}

#onYourFeedTodayBoxWrapper .trebble_thumnails_preview_box{
    display: block;
    overflow: hidden;
    height: var(--size-46);
    flex: 0 0 45px;
    margin: var(--space-2xs) var(--size-none);
    width: var(--size-full);

}

#onYourFeedTodayBoxWrapper .trebble_thumnails_preview_box.scroll{

    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

#onYourFeedTodayBoxWrapper .trebble_thumnails_preview_box img{
    border-radius: 50%;
    margin: 0 var(--border-3);
    width: var(--size-40);
    height: var(--size-40);
    -o-object-fit: cover;
       object-fit: cover;
    display: inline-block;
    border: var(--border-2) solid var(--text-light);
}

.userReferralPage .infoBoxWrapper > .content> .actionButtonWrapper > a.actionButton{
    padding: var(--space-xs);
    height: var(--size-36);
    flex-direction: column;
    width: auto;
    min-width: var(--size-50);
}

.userReferralPage .infoBoxWrapper > .content> .actionButtonWrapper > a.actionButton > .label{
    font-size: 80%;
}

.userReferralPage .infoBoxWrapper > .content > div.link_to_share{

    max-width: calc(var(--size-full) - var(--space-lg));
    color: var(--color-gray-850);
    margin: auto;
    overflow: hidden;
    text-overflow: ellipsis;

}


.feed_description .text_summary_item{
    display: flex;
    flex-direction: row;
}

#paidAccountSubsPopup{
    height: auto;
    padding: var(--text-xl-px);
    box-sizing: border-box;
}
#paidAccountSubsPopup.coloredBackground{
    color: var(--text-dark);
    background-color: var(--color-gray-100);
}

#paidAccountSubsPopup.coloredBackground #closeBtn{
    color: var(--text-dark);
}

#paidAccountSubsPopup.coloredBackground .upgradeToPaidAccountSubBtn{
    color: var(--text-dark);
    background-color: white;
    border: var(--border-3) solid var(--text-dark);
}
@keyframes gradientanimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


/*** DARK THEME END ****/




/********* ANT DESIGN UI CUSTOM CSS *****/


.ant-notification  .ant-notification-notice-wrapper .trebble-custom-react-notification  .ant-notification-notice-with-icon .ant-notification-notice-description {
    margin-inline-end: 36px;
}



/******** Clip Editor  CSS ***********/


.animated-border {
    background-image: 
        linear-gradient(to right, var(--trebble-primary) 50%, transparent 50%),
        linear-gradient(to right, var(--trebble-primary) 50%, transparent 50%),
        linear-gradient(to bottom, var(--trebble-primary) 50%, transparent 50%),
        linear-gradient(to bottom, var(--trebble-primary) 50%, transparent 50%);
    background-size: 20px 1px, 20px 1px, 1px 20px, 1px 20px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    animation: borderMove 1.5s linear infinite;
}

.corner-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid var(--trebble-primary);
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

@keyframes borderMove {
    from {
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
    to {
        background-position: -20px 0, -20px 100%, 0 -20px, 100% -20px;
    }
}

/* Word labels checkbox control - visibility toggled by JavaScript based on sequencer settings */
.word-labels-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.word-labels-control input[type="checkbox"] {
    /* Remove width/height to let Materialize CSS handle checkbox styling */
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.word-labels-control label {
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
/* Video Buffer Region Selector Styles */
.video_buffer_region_selector_widget,
.video_buffer_region_selector_widget .video_buffer_region_selector_widget_content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video_buffer_region_selector_widget:not(.loading) #loadingBoxWidget{
    display: none;
}
.video_buffer_region_selector_widget.loading .video_buffer_region_selector_widget_content{
    visibility: hidden;
}

[data-role="popup"] .video_buffer_region_selector_widget{
    height: calc(var(--vh-full) - var(--size-100));
    width: calc(var(--size-full) - var(--size-100));
    margin: var(--size-50);
}

/* Video player container */
.video_buffer_player_container{
    width: 80%; /* Responsive width */
    max-width: 800px; /* Maximum width for large screens */
    height: calc(50vh - 100px); /* Responsive height based on viewport */
    min-height: 250px;
    max-height: 450px;
    position: relative;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    margin-bottom: var(--space-md);
}

/* Responsive video player for mobile */
@media (max-width: 768px) {
    .video_buffer_player_container{
        width: 90%; /* Wider on tablets */
        height: calc(40vh - 80px); /* Shorter on mobile to save screen space */
        min-height: 200px;
        max-height: 350px;
    }
}

@media (max-width: 480px) {
    .video_buffer_player_container{
        width: 95%; /* Nearly full width on phones */
        height: calc(35vh - 80px); /* Even shorter on small phones */
        min-height: 180px;
        max-height: 280px;
    }
}

.video_buffer_player_container .video_player{
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* Remotion Player container */
.video_buffer_player_container .remotion_player_container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

/* Video timeline container (replaces minimap) */
.video_buffer_timeline_container{
    width: 100%;
    min-height: 60px; /* Minimum height for visibility */
    max-height: 100px; /* Maximum to prevent it from being too tall */
    position: relative;
    margin-top: var(--space-sm);
    background-color: #2a2a2a; /* Dark background to match thumbnails */
    border-radius: 4px;
    overflow: visible; /* Allow handles to extend beyond container */
    cursor: pointer;
}

.video_timeline_canvas{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 0; /* Bottom layer */
}

/* Gray overlays for trimmed-out portions */
.video_timeline_trimmed_left,
.video_timeline_trimmed_right {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: rgba(50, 50, 50, 0.6); /* Dark gray overlay */
    pointer-events: none;
    z-index: 1; /* Above canvas, below selected region */
}

.video_timeline_trimmed_left {
    left: 0;
    width: 0%; /* Updated dynamically via JS */
}

.video_timeline_trimmed_right {
    right: 0;
    width: 0%; /* Updated dynamically via JS */
}

/* Play cursor (purple vertical bar) */
.video_timeline_play_cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: var(--trebble-purple-active);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 4; /* Above everything except tooltip */
    display: block; /* Always visible - controlled by JavaScript */
}

.video_timeline_play_cursor_time {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    white-space: nowrap;
}

/* Drag tooltip (follows mouse) */
.video_timeline_drag_tooltip {
    position: fixed; /* Fixed positioning relative to viewport */
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    pointer-events: none;
    z-index: 9999; /* Always on top */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    display: none; /* Hidden by default */
}

.video_timeline_drag_tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.9);
}

.video_timeline_region{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: transparent;
    border: 5px solid rgb(236, 127, 84); /* Orange border - thicker */
    box-sizing: border-box;
    border-radius: 0; /* Square corners */
    transition: background-color 0.2s ease;
    pointer-events: none; /* Let clicks pass through to handles */
    z-index: 2; /* Above trimmed overlays, below handles */
}

.video_timeline_handle{
    position: absolute;
    top: -5px; /* Extend above region border */
    width: 20px; /* Smaller handle width */
    height: calc(100% + 10px); /* Extend beyond region border (5px top + 5px bottom) */
    background-color: rgb(236, 127, 84); /* Solid Trebble orange */
    cursor: ew-resize; /* Horizontal resize cursor */
    z-index: 3; /* Above selected region for interaction */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    pointer-events: auto; /* Re-enable pointer events (parent has pointer-events: none) */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0; /* Square corners */
}

/* Touch-friendly handles for mobile - minimum 44x44px touch target */
@media (max-width: 768px) {
    .video_timeline_handle{
        width: 28px; /* Wider for easier touch interaction */
    }

    .video_timeline_handle_start{
        margin-left: -14px; /* Adjust offset for new width */
    }

    .video_timeline_handle_end{
        margin-left: -14px; /* Adjust offset for new width */
    }
}

@media (max-width: 480px) {
    .video_timeline_handle{
        width: 32px; /* Touch-friendly size on small screens */
    }

    .video_timeline_handle_start{
        margin-left: -16px; /* Adjust offset for new width */
    }

    .video_timeline_handle_end{
        margin-left: -16px; /* Adjust offset for new width */
    }
}

.video_timeline_handle:hover{
    transform: scaleX(1.2); /* Slightly wider on hover */
    box-shadow: 0 0 8px rgba(236, 127, 84, 0.6); /* Orange glow */
}

.video_timeline_handle:active{
    box-shadow: 0 0 12px rgba(236, 127, 84, 0.8); /* Stronger glow when dragging */
}

.video_timeline_handle_start{
    left: 0;
    margin-left: -10px;
    border-radius: 0; /* Square corners */
}

.video_timeline_handle_end{
    left: 100%;
    margin-left: -10px;
    border-radius: 0; /* Square corners */
}

/* Create grip lines using pseudo-elements */
.video_timeline_handle::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 1px;
    box-shadow:
        -4px 0 0 rgba(255, 255, 255, 0.9),  /* Left line */
        4px 0 0 rgba(255, 255, 255, 0.9);   /* Right line */
}

/* Remove the circle from ::after since we're using grip lines */
.video_timeline_handle::after{
    content: none;
}

/* Time labels positioned below handles */
.timeline_start_time,
.timeline_end_time {
    position: absolute;
    top: 100%; /* Position below the handle */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: var(--text-xs-px);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

.video_buffer_region_selector_widget .trim_info{
    display: flex;
    flex-direction: row;
    margin: var(--space-sm) auto;
    align-items: center;
    justify-content: center;
}

.video_buffer_region_selector_widget .trim_info_details{
    display: flex;
    margin: var(--size-none) var(--space-2xs);
    flex-direction: row;
}

.video_buffer_region_selector_widget .trim_info .trim_info_details .trim_from_info,
.video_buffer_region_selector_widget .trim_info .trim_info_details .trim_to_info{
    font-weight: bold;
}

.video_buffer_region_selector_widget .trim_info .to_label{
    margin: var(--size-none) var(--space-2xs);
}

.video_buffer_region_selector_widget .bottom_button_toolbar{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.video_buffer_region_selector_widget .bottom_button_toolbar button{
    width: auto;
    height: var(--size-46);
    outline: none;
    border: var(--border-3) solid transparent;
    margin: var(--size-none) var(--space-sm);
    display: flex;
    flex-direction: row;
    gap: var(--space-xs);
    padding: var(--size-none) var(--space-md);
    justify-content: center;
    align-items: center;
    color: white;
    background-color: transparent;
}

.video_buffer_region_selector_widget .bottom_button_toolbar button label{
    display: block;
    font-size: var(--text-sm-px);
}

.video_buffer_region_selector_widget .bottom_button_toolbar button .icon{
    font-size: var(--text-3xl-px);
    position: relative;
}

body.mobileweb .video_buffer_region_selector_widget .bottom_button_toolbar button:not(.disabled):hover,
.video_buffer_region_selector_widget .bottom_button_toolbar button:not(.disabled):active{
    background-color: var(--color-white-10);
}

.video_buffer_region_selector_widget #saveTrimBtn{
    background-color: var(--trebble-primary);
    border: var(--border-3) solid var(--trebble-primary);
    color: var(--trebble-primary);
    max-width: var(--size-400);
    padding: var(--size-none) var(--space-lg);
    margin: var(--space-sm) auto;
    display: flex;
    font-weight: bold;
    height: var(--size-46);
    align-items: center;
    justify-content: center;
    min-width: var(--size-200);
    box-sizing: border-box;
}

.video_buffer_region_selector_widget #saveTrimBtn .icon{
    display: none;
}

.video_buffer_region_selector_widget #saveTrimBtn label{
    font-weight: bold;
    text-transform: uppercase;
    padding: var(--size-none);
    margin: var(--size-none);
    color: white;
    display: block;
}

.video_buffer_region_selector_widget #saveTrimBtn:active{
    opacity: 0.8;
}

.video_buffer_region_selector_widget.region_playing .bottom_button_toolbar #playRegionBtn{
    display: none;
}

.video_buffer_region_selector_widget:not(.region_playing) .bottom_button_toolbar #pauseRegionBtn{
    display: none;
}

.hover\:cursor-pointer:hover {
  cursor: pointer;
}

.hover\:border-\[var\(--trebble-primary\)\]:hover {
  border-color: var(--trebble-primary);
}

.hover\:border-neutral-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity));
}

.hover\:\!bg-\[var\(--trebble-primary-20\)\]:hover {
  background-color: var(--trebble-primary-20) !important;
}

.hover\:bg-\[var\(--trebble-primary-0\)\]:hover {
  background-color: var(--trebble-primary-0);
}

.hover\:bg-\[var\(--trebble-primary-20\)\]:hover {
  background-color: var(--trebble-primary-20);
}

.hover\:bg-neutral-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity));
}

.hover\:bg-primary-light:hover {
  background-color: var(--trebble-primary-light);
}

.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}

.hover\:outline-\[var\(--color-gray-300\)\]:hover {
  outline-color: var(--color-gray-300);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-\[var\(--trebble-primary\)\]:focus-visible {
  --tw-ring-color: var(--trebble-primary);
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-white:focus-visible {
  --tw-ring-offset-color: #fff;
}

:is(.darkTheme .dark\:border-gray-700) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
}

:is(.darkTheme .dark\:border-neutral-600) {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
}

:is(.darkTheme .dark\:bg-\[var\(--trebble-primary-100\)\]) {
  background-color: var(--trebble-primary-100);
}

:is(.darkTheme .dark\:bg-gray-800) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

:is(.darkTheme .dark\:bg-neutral-800) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

:is(.darkTheme .dark\:text-\[var\(--color-white-20\)\]) {
  color: var(--color-white-20);
}

:is(.darkTheme .dark\:text-\[var\(--text-default-tooltip-color\)\]) {
  color: var(--text-default-tooltip-color);
}

:is(.darkTheme .dark\:text-gray-100) {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
}

:is(.darkTheme .dark\:text-white) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

:is(.darkTheme .dark\:focus-visible\:ring-offset-neutral-800:focus-visible) {
  --tw-ring-offset-color: #262626;
}

@media (min-width: 1024px) {

  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }
}

.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-center .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content{margin-bottom:16px}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-right.drop-element-attached-middle .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:16px}.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.drop-element:after,.drop-element:before{box-sizing:border-box}.drop-element{position:absolute;display:none}.drop-element.drop-open{display:block}.drop-element.drop-theme-arrows{max-width:100%;max-height:100%}.drop-element.drop-theme-arrows .drop-content{border-radius:5px;position:relative;font-family:inherit;background:#eee;color:#444;padding:1em;font-size:1.1em;line-height:1.5em;transform:translateZ(0);filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2))}.drop-element.drop-theme-arrows .drop-content:before{content:"";display:block;position:absolute;width:0;height:0;border-color:transparent;border-width:16px;border-style:solid}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-center .drop-content:before{top:100%;left:50%;margin-left:-16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-center .drop-content{margin-top:16px}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-center .drop-content:before{bottom:100%;left:50%;margin-left:-16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:16px}.drop-element.drop-theme-arrows.drop-element-attached-right.drop-element-attached-middle .drop-content:before{left:100%;top:50%;margin-top:-16px;border-left-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle .drop-content:before{right:100%;top:50%;margin-top:-16px;border-right-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content{margin-top:16px}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before{bottom:100%;left:16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{bottom:100%;right:16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before{top:100%;left:16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{top:100%;right:16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before{top:16px;left:100%;border-left-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before{top:16px;right:100%;border-right-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before{bottom:16px;left:100%;border-left-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before{bottom:16px;right:100%;border-right-color:#eee}
.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.drop-element:after,.drop-element:before{box-sizing:border-box}.drop-element{position:absolute;display:none}.drop-element.drop-open{display:block}.drop-element.drop-theme-arrows-bounce .drop-content{border-radius:5px;position:relative;font-family:inherit;background:#fff;color:#444;padding:1em;font-size:1.1em;line-height:1.5em;transform:translateZ(0);filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2))}.drop-element.drop-theme-arrows-bounce .drop-content:before{content:"";display:block;position:absolute;width:0;height:0;border-color:transparent;border-width:12px;border-style:solid}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-center .drop-content:before{top:100%;left:50%;margin-left:-12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content{margin-top:12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content:before{bottom:100%;left:50%;margin-left:-12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-right.drop-element-attached-middle .drop-content:before{left:100%;top:50%;margin-top:-12px;border-left-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-left.drop-element-attached-middle .drop-content:before{right:100%;top:50%;margin-top:-12px;border-right-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before{bottom:100%;left:12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{bottom:100%;right:12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before{top:100%;left:12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{top:100%;right:12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before{top:12px;left:100%;border-left-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before{top:12px;right:100%;border-right-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before{bottom:12px;left:100%;border-left-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before{bottom:12px;right:100%;border-right-color:#fff}.drop-element.drop-theme-arrows-bounce{max-width:100%;max-height:100%;transform:translateZ(0);transition:opacity .1s;opacity:0}.drop-element.drop-theme-arrows-bounce .drop-content{transition:transform .3s cubic-bezier(0,0,.265,1.55);transform:scale(0) translateZ(0)}.drop-element.drop-theme-arrows-bounce.drop-open{display:none}.drop-element.drop-theme-arrows-bounce.drop-open-transitionend{display:block}.drop-element.drop-theme-arrows-bounce.drop-after-open{transition:none;opacity:1}.drop-element.drop-theme-arrows-bounce.drop-after-open .drop-content{transform:scale(1) translateZ(0)}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-center .drop-content{margin-bottom:12px;transform-origin:50% calc(100% + 12px)}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content{transform-origin:50% -12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-right.drop-element-attached-middle .drop-content{margin-right:12px;transform-origin:calc(100% + 12px) 50%}.drop-element.drop-theme-arrows-bounce.drop-element-attached-left.drop-element-attached-middle .drop-content{margin-left:12px;transform-origin:-12px 50%}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content{margin-top:12px;transform-origin:0 -12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content{margin-top:12px;transform-origin:100% -12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content{margin-bottom:12px;transform-origin:0 calc(100% + 12px)}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content{margin-bottom:12px;transform-origin:100% calc(100% + 12px)}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:12px;transform-origin:calc(100% + 12px) 0}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:12px;transform-origin:-12px 0}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:12px;transform-origin:calc(100% + 12px) 100%}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:12px;transform-origin:-12px 100%}
.shepherd-button{background:transparent;border:0;border-radius:3px;color:hsla(0,0%,100%,.75);cursor:pointer;margin-right:.5rem;padding:.5rem 1.5rem;transition:all .5s ease}.shepherd-button:not(:disabled):hover{background:transparent;color:hsla(0,0%,100%,.75)}.shepherd-button.shepherd-button-secondary{background:transparent;color:rgba(0,0,0,.75)}.shepherd-button.shepherd-button-secondary:not(:disabled):hover{background:#d6d9db;color:rgba(0,0,0,.75)}.shepherd-button:disabled{cursor:not-allowed}
.shepherd-footer{border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:flex-end;padding:0 .75rem .75rem}.shepherd-footer .shepherd-button:last-child{margin-right:0}
.shepherd-cancel-icon{background:transparent;border:none;color:hsla(0,0%,50%,.75);cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:hsla(0,0%,50%,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}
.shepherd-title{color:rgba(0,0,0,.75);display:flex;flex:1 0 auto;font-size:1rem;font-weight:400;margin:0;padding:0}
.shepherd-header{align-items:center;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;justify-content:flex-end;line-height:2em;padding:.75rem .75rem 0}.shepherd-has-title .shepherd-content .shepherd-header{background:#e6e6e6;padding:1em}
.shepherd-text{color:rgba(0,0,0,.75);font-size:1rem;line-height:1.3em;padding:.75em}.shepherd-text p{margin-top:0}.shepherd-text p:last-child{margin-bottom:0}
.shepherd-content{border-radius:5px;outline:none;padding:0}
.shepherd-element{background:#fff;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.2);max-width:400px;opacity:0;outline:none;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:#fff;content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:#e6e6e6}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}
.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0ms .3s,opacity .3s 0ms;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}
/*!
* jQuery Mobile 1.4.0-rc.1
* Git HEAD hash: 4b6462bccfe0e4fc3337bd24f17c76c6b5cb0e62 <> Date: Thu Oct 24 2013 20:08:54 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
*/


.ui-icon-action:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKZJREFUKJGVkbEJAkEQRQcRM2OxAQswE8E27MDUDo5rQ8HYIswtRQwFDTR4f0xcmTuX9e6Hs/8tf/6YdRCwd/dRF29D7u7AWdK0N/iBL5IWjWFQbWYmaQYc3f0WH4GXu2/aYIJWwCPz6S+YYkkaA1fgKamSNClGDeAWuEtaFstpg8BJ0jqWA+zSOdI6OfBQaLf+ejNR5//OkgVLit5hHHaBkwZ9zFFvZs0ccjGSLdsAAAAASUVORK5CYII=);
}
.ui-icon-arrow-d-l:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFNJREFUKJG1z0EOwCAIRNFJL65H82bfldYYLJOYsgReGCSzgApUd39Fozy8oYmfDEkqX0P30hs1yp2iBc6mhTYI0CwUQA8ZMEYJbEf018WrH4+4A9wPh5Xf8X4IAAAAAElFTkSuQmCC);
}
.ui-icon-arrow-d-r:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFNJREFUKJGdz8ENwCAMQ9Goi8NobPa5BIlWSmXHNwJPJhEZYAIznCQ60fAHyfgp5kNqLlrL5tdcxeed1XzfO99e98Hd+R8quISJlw1bja0dFQSwAX/xh5U/zsvtAAAAAElFTkSuQmCC);
}
.ui-icon-arrow-d:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEhJREFUKJHtzkEOACEIQ1Hrybn5d2UyqYgcYLoj9BE0kgB8Z0nyzsxgJz+sIBBYvOR7IPbiwEXCr3Zw+DcdnKMHrtEF95DhK1pu1cxOP8SdXAAAAABJRU5ErkJggg==);
}
.ui-icon-arrow-l:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEZJREFUKJGt0EEKACAMA8Hiy/vz9SSIGG2ruYaBEDMRwFUnAzhACaXgjMJwRSG4Q7eUEEALH/Bt6tM5Cpdnp+CM03DgU98BQE0QhxV4c5sAAAAASUVORK5CYII=);
}
.ui-icon-arrow-r:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJGlzkEOgCAMRNEJ8d725t+FJqBgaeFvJ6+p5ASYt3uQJUwth3kXx/SZN84ySTpSv9+dgMoC3Hs1e3SOBjCGPjCOGphDD/xFF8mf3K/9psbaAAAAAElFTkSuQmCC);
}
.ui-icon-arrow-u-l:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAExJREFUKJG1zzEOACAIA8Diy/Fn/gw3BwJSTGSEXEph3Cj8PCECxqiAK0W/ElsdF4390cyUwtGSwlkHOrmLxw2KiAKYZQKZXL8a4IM2BLqImUv2H64AAAAASUVORK5CYII=);
}
.ui-icon-arrow-u-r:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJG9z0ESACAEBdB0ct3MzbSpmcagr0V/iTdozURVWYFYB2MXIjiEC8ufjU8/JkhCmCC2fRjZuRI6cRnt9KA+iCiF3ql34GAYTbCliJmlXPngAAAAAElFTkSuQmCC);
}
.ui-icon-arrow-u:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAERJREFUKJHt0DsOACAIREHw5Nx8rTT+dsXe1xGZhGhGAhAAgr0r1MrhBeUwQRpf0Bkn0YwfUcdOzsY4u/u2V+RviT4UVc6g3DzF0w5VAAAAAElFTkSuQmCC);
}
.ui-icon-audio:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAARdJREFUKJF9kq1OQ0EQhWdHYrjBNzSEVKDA8SQoAsGhmiCogYQmdTjeAosBwQM0qaISgSBo/hL+RM85iM5tlpvlHjW7M9/O5MyaFUTyrI4lOYBbkrul2oUAjADMMnATwJckAbj4F4qCWX5PsgfgXpJIDopQDpI8INmPuAPgGcCPpK4BmKihGgQwjS7HAfcjf25NqNFxFcALgE9JlaQKc029zSh3fzSzS3dfkrSdUnozsyczW28FQ6k2ODurdVRJawBeAXxIWia5EqPeOckxSZRakbxy9yqldJJSejezfXd3M7tZFEkaFszZI3kY+W4Y9U2y86dDDRc+wAaAh1jNUdEJScMcJLkVS5/vr00kT7OHHMA1yZ285hfgMGjW9+5ILwAAAABJRU5ErkJggg==);
}
.ui-icon-calendar:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEdJREFUKJHt0EEKwDAIRFHt/e+VFHqlz2QTuzOkbrrJW43ggGg2ATfQLCHpAXrMLknZ8spVKf1TLHuf4+6f8jl1RdNuDuVTB+VLWurqfLnpAAAAAElFTkSuQmCC);
}
.ui-icon-camera:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAALhJREFUKJGVkDFOA1EMRGf+AWAbuBbiAIhqRREkiuQSFBwQiRIhdk8QpMwzzRbR3yiBV1nWeDy21JHkLcmhFpIckrz2OgH3Sab6I0lm4M5Jptba7crxDMCsE457YFNVA3AFbJLse13r3WxvJX0B71X1IenT9m619sQZw/HNS319cWNVIamOW5Lc61aDkh5sPwHfwGR7rKrHi1GX5zwv8QbgJclPr3OSubV2c+79PcDUbI/A/J8h2+MvV+chIdqU1YYAAAAASUVORK5CYII=);
}
.ui-icon-carat-d:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEFJREFUGJWNkMEOACAIQlk/nn9OF9vMJOOkwpsbAACSRtIgdPi+bF1Q9kfyZ4R8nupllFW3DtLhBpJlfJXwgsrwAu7apWc+O3nlAAAAAElFTkSuQmCC);
}
.ui-icon-carat-l:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEFJREFUGJWtjkEKACEMxFLZf+/48tmLBwsWFzSnQsoQWGBbtgXwrCTwjptWyWp2Rhck5IaS3crZU2qICAH9b5MAPlUMi4xP1mXlAAAAAElFTkSuQmCC);
}
.ui-icon-carat-r:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9JREFUGJWdkDEOACAIAw8/Lr68LroAOtCNXFOaAiDJJTmVDrxKphHuWSaFlDKpb4od3vq+6MNih2Vmz/YZABuZM5OBBPeJYgAAAABJRU5ErkJggg==);
}
.ui-icon-carat-u:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEBJREFUGJV9kMEKADAIQmtfbl/uLtsYoXmKfIYUIUQSJKE8B1/NoQbPIQPrkIChdhaeDq3WrDLzBc5crr/9yO9v0Dinb5SKJTsAAAAASUVORK5CYII=);
}
.ui-icon-check:after,
/* Used ui-checkbox-on twice to increase specificity. If active state has background-image for gradient this rule overrides. */
html .ui-btn.ui-checkbox-on.ui-checkbox-on:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGlJREFUKJGVkFEKwCAMQ9vee1AdjLE7x+xnMEXRms/S1zQRCYqkk/TovoiIAEj8FYMBZPZyW0Fmdkwvk3QAqYLOgVP76hecJAkgb0MLNaVYKUUDHSVV9W46ea1zGsHXNlTlvbehyvmJQC95zvcNDVD87AAAAABJRU5ErkJggg==);
}
.ui-icon-clock:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAP1JREFUKJGFkl1KQlEUhQ8+yZ1AolPRHEVwoVFUCA0gycFESDiH9E3RiZiBvnxr9dA+csh7c8OB87P+2GenVJSkge0ZsANOsbbAq6R+aipJ98C3Wwo4SKqbSArAm+2h7a7trqQR8B5vOpMlDbKTpMcsBqyAz0J8EuQv271ke5adyhQ5YnkHzAM7TcAuMMNrREm3Qdwk4BSYbhMxgMu4q+J87DS2+Fd9Waa8AADbaMyoTaQQG4fjupNSWkSMh2tE20+xXSRJfeAQrpN/SM/htpd0kyPUxQDMo3uV7UrSGPjIA2D77m/+Oj63beT2F6QiTg+YAhvgGGsNvJzjRf0AqXKgfyngg7AAAAAASUVORK5CYII=);
}
.ui-icon-cloud:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAYAAAACTR1pAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAIhJREFUKJGV0MEJwkAQRuFxQTCxDC1HsI+0kZBucrEGxUOKkBy1AhHePx50YcGNbN7925lZsyRJW6AHJj5NQCupsrncvQZGzwRc3X2ThUCXQwkeJDU/04HbP5g8cIp37b+rFAU846RLKYpQ0nEFvEII69lfyyTpEcxsXIKiNUk74AxQuOpd0uENS+I31QOq6s4AAAAASUVORK5CYII=);
}
.ui-icon-grid:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFNJREFUKJHV0DEOwDAIQ1GT+5+rTaReCbtLKkWkA2LLXxBvA7j70MzdbwAI1gFA0rOaSRKWzCxlDcUayf4tJK85/2xEq3XWc7ajs1YrHp21g57zAoqm8vdVdCs0AAAAAElFTkSuQmCC);
}
.ui-icon-mail:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKJJREFUKJGljrENwkAQBI935oAaIIUKoBUScoqAJsgJ3IpLcAo1OIDIu0PyRujlwIKJTtqd04btg6SemUjqbR8CqG2vJbUzpBZYAXVI6mxvgAq4SBomhMH2GahsbyV1kYMncIyIsL2X9PiS7rZ3ERHAMXeJ4vktT19KaiQ1tpdAnbMPpcg4PTLjtLK3AIgC26+U0inf15RSXXYmxTmkX6S/xDf/HTl2BI6HCQAAAABJRU5ErkJggg==);
}
.ui-icon-eye:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAALxJREFUKJF9kr0NwlAQgy8MwE8VKvaCFQJkLliCUCEWgI4piBSKz6Z5kZ6SgKVX3Z3PZ7+IDLYLSTvgCrRAa7uRtLNdxBRsr203/o1GUjkc2gAv2wY6SZXtpaS5pAroUu1le9MPLYBnTyupGqqRtO/rqXcRts8DScuICOAO3HryvAE4zSYPTovSi4gYGzMh9TAhtc62PSTNf5lztL1KBtXAZ2ROxlr+iwO4jOLIZBeStrYb4A28U37b4Qf4AtYVT9MZSwpWAAAAAElFTkSuQmCC);
}
.ui-icon-gear:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAARhJREFUKJFtUkFKA0EQ7O7dvWogt6AQ0SeIon5CCJKTCHrcgA/QQw6+NBeJ5AHJhqrykNmwjtOnmaluqrpqzApF8gLAHkBH8rzUE4PmOck7SY2kt4ioI6Ixs1dJNcl7SU85w1ySABDARlkB2CSMJGdmZnWaXZFURLiZjf/JihgnApnZ6ghIanomAFuSraQRyROSLYBtwtaSqqERX70skm3BrMVA+VLS1ADss5VG+aCk02znLsxMWRML7nsuItz9UtJy8PhcYHwZnD/d/aq/1Jk5iyRvRPIdwC5h35KO2RvJhzy7UuEQ5I1Z+jnuPiEpHmpdcPUnZejuPsnBGclrSVWyvI/nQ1JF8lbSY8G4P2ZMAXQAdiTPSj2/CeV/A2CIIKUAAAAASUVORK5CYII=);
}
.ui-icon-heart:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAALtJREFUKJGVkTFKBGEUg/P+MyxoqwgL3sPGs1iJlQqC4Dm2EI8g3sNGO9lSELSy8ktsLIZhdvwn5QsfJHmSJNvHwBPwDXwCmyQr23vAfZKvP+/R9lqSlGQf+MhIwDPwOnF/T7KS7cux+Z9sX7QkB1qoJIetqrZLwap6K9vrJC+tteqBbLuqjiRJwENvP2AzzDy57M5FRxFOAWagH9snu/Kfz7zgbLY8cDsBXfUMJ+BuAN10QUPY9vUiqEe/q914gACE4tQAAAAASUVORK5CYII=);
}
.ui-icon-home:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);
}
.ui-icon-info:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMlJREFUKJGdkkFKA0EUBf/0xiMYkntI8B5CwOsYzIFyEIPZiKdIIjibqu9mDJOxO0ge/FV3db8uOmIUdZGZG2AP9MO8A6/qPGpRn4GvbAQ4qasa5Hij+qAuJ7BnWF3UblKX6mPl5mNmziIzN616V2qvA9hPF8bPaIC7DuhLKXdTWV3Xdb9gRWRfqor/kRIRnzdwHyUitjeA21DnwKklJ+JSEHBQ7yMiQl1NP0DDppn5dHHqAB+vQIc/0KjSDFgDO+B7mDfg5VxvyA/7S6y1J325mgAAAABJRU5ErkJggg==);
}
.ui-icon-bullets:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEZJREFUKJHlzzEKACEMRNHB+99LhT2SP7GJkGbRws4HgQykyAjoQFUAum8ArUiymCXvfzi4ue2Fju7+AS3no45mNvLPkXeYBFiehbdJ93wAAAAASUVORK5CYII=);
}
.ui-icon-bars:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAADlJREFUKJHlz8ENACAMQlHsSu5/t4kjCThD69F3/yGAZLqI5AoAQh0bzasPPg7bG8CsRJIyJJ3GIC/5Mn9OKOW86gAAAABJRU5ErkJggg==);
}
.ui-icon-navigation:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAIdJREFUKJGVkbENwkAQBP+QoAZXAp2QQC+IMshxMW4E0QKg2SUheND7OU8+utVNlAXY3tje295mhQE4A3fblnToCpJ2wAg8/QG42V4350g6ApMbSDp157QAHraH2Tkd8Zr8Yyk/M3PfrEVgSku1+DdBS2wlWGXkiLhExGvRxa8EC8V8gpq5BG813u5dfqCCqgAAAABJRU5ErkJggg==);
}
.ui-icon-lock:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJJJREFUKJG1kEEKwjAURP8X17WXKXgJKeIx4kkKPZT2TNJuZsbNX4SQlLrwQTZ//swkMcsg+QCwAFjjvEnerQaAWQ0ATFYmh7CRTJJ6kh3JBGCTJJJjnr7EMJXNJJ8R9soNa7T3pUHSJQyffChJqj6u0H1vscbpl+WmQdIg6XrY4O4yM9a0c6P55u7Hr7TH/3/pCxzhpO+XTBPHAAAAAElFTkSuQmCC);
}
.ui-icon-search:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQZJREFUKJGVkTFKQ1EQRd97YARFo4W1tmJrKSncRkrFVix0Ay7Axh2IK5A01qJExMoiiL2QyoDEIpx7bUb8/vyg3mYecznDvDsphWzvAFfACJgAT5JOJM2nWZJ0CMi2gQ9g6BDQt91ugjqAgLGkfdut6G8CdwFfToFAz7Yl7dU9223gNbbZqIMjYGx7rukbwFkM7lb7JaW0kFJ6zzlPmsCc81vUxTo4KKWsSdpqAm3vRh38MCQdRwD3tldr3lF4L7ZLfWKrkt4QOAdOgRt/60HS0tQ6kpaBi69bVm74DDzG+7YRjgHrkrq2DyR1bJc4Sf9XeEZA7cjAQO/PYMArwLWk7X+BdX0CelQ/NQrA/74AAAAASUVORK5CYII=);
}
.ui-icon-location:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAOCAYAAAASVl2WAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAALhJREFUGJVtjj1qQlEUhOddAu5A7WzF1rUkO3IRErAOKUIiVjZuyCKiForfTJobuMl70535OTOSJNsLYAdcgQuwTTJXI57Sx3eSuYBdkgAftse2J8Bn5b4EXJPE9lgVSabVcC6SbpXv1Me9SDrU1Lomp7Zfq+Eg2y8DA3/xLNsj4PhfAY62R6WUcpO0GejfVE2yPQMeTfphe/bHnuS9Mbz1/iVZNhOWA5USsAf2LffUHl3XrSSl5X4AXwrzCtYRSiwAAAAASUVORK5CYII=);
}
.ui-icon-minus:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAECAYAAAC+0w63AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAABZJREFUCJlj/P///38GMgATOZoGRiMAhxsEBBS1OCUAAAAASUVORK5CYII=);
}
.ui-icon-forbidden:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAO5JREFUKJF9kjGOwjAQRV1m6UGIs8CKY6TYbs/ADUCIyyCqbTgFQeIcaFMQivc/zQQZSPIrj7+fZzyelDJJmgE74ALcgQY4A1tJs9QlSb9A7R4BtaSyC1Ic+LM9t13YLiQtgH14esJRXp3dXEkad1S0Cv/f9jQBuzYTUA3BwCH8TQIukWwuaTwES/oO75SAe4BFmL2w7VHs3xLQ5OAQLOkr9poEnG1b0uKtrA/Y9rKNE7CNYN/RyRcYOMZ6/fIdklZDcOgqadKaZTYAh+jeKN60zDJJ0s/7zWV8bp+uH1DW7imwAU7ALYa8AtbP8kIPSmcLeXqetrQAAAAASUVORK5CYII=);
}
.ui-icon-edit:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAG5JREFUKJHFzcENgDAMQ9FvxCCMxibNKIzSUdjEHGilIlTUnvApUvJiGIztsB2j9y2qCYB16sOdZPsb1u+SwjZAqrsuLCiVucVIii7yO4/j5atpOJ2mV9t/aJtGBe7TqMBjGgGynYETyECWdI7AC+9G4uZE8DtQAAAAAElFTkSuQmCC);
}
.ui-icon-user:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMxJREFUKJGNkb1OQkEUhGdPKHwNAjQUJvoC1hSEUjtDy3MRKxMjjbwACRWdz+BPrDAUBGbG5habzcq9Xz3fzmwOUGC7R3JJ8kRyK2laZqpIWjiDpCTdtYokNy4g+dJF3FfE77aZo1LK5g7zbBTuQ+3BiEgA7i81Dkj+VBq/JPXb/vhcEZ8uSk3rLclDJv1Kum4Vm9Z1Jr7WMgkAbF/ZnqWUJpJuAIwjotcsOAN4B7CLiDfbq4g4QtKc5GftDP+c5kPSY7LtTvsLyjt25g9hYB/hzo2DKgAAAABJRU5ErkJggg==);
}
.ui-icon-phone:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAOBJREFUKJGV0a9Kw2EYxfGztxg2EBZsthWLxTD/RMHk/XgdDrF5EcLuQKZYDWuzCGJ0EzS47zkGf+HHwO319M9z4DmSJNtnSQ70n9geAJ9J3m0PqyHwBIyAJTC3fVQLARYt/FwLZ0kCfAAj28c1rki6laRSSk/SdynlvqrR9i7w1bS+2t6pgg2+SBPgwXa3CiYpwLiFJ7b7rcN7tvf/wj3gsYVntoe2+8Db2p2TbAN3aQWYA9fAci22vQXcrOAFcNXs/LLpYefAdAVf2j6VpM6Gp3UknSQ51O/m41LKVJJ+ACf9G5yzDZIFAAAAAElFTkSuQmCC);
}
.ui-icon-plus:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC9JREFUKJFjZMAC/v///x+Zz8jIyIiuhgmbRmLAENLIiB4QNLdxAPyITXA0AUAAAFaSDBbPbobZAAAAAElFTkSuQmCC);
}
.ui-icon-power:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQJJREFUKJGNkLFKg0EQhPfOQIg+gKa3sde8RECxEAsRfBUbX8HK2iaVjSCpgk8hBAsRFS00dso3Y3M/XH7+gAPHsTs7uzsb0QFgBky7uE7Y/gQ+urhcFW3Zzu0C22uShksCSQeSniWdtwWSLmw/SRo3iQ3gzbYlHbZXsn1k28CLpEFIOi2J61UegElpeJxtjyIiUkqTao3fiPhp4oazPepFxKAkv6qCk4igsrIo/3ovpfRY1HsRMY2IyDnftbzvlkbzkLQDCHiVtNlxpSHwDiBpuzF1VYw/SBpL6pe3D8wLd1l3GQC3LigTVcU3kvpLo21n22fAPfANLIBZOXtqr/pv/AH9hwnaJYrO5AAAAABJRU5ErkJggg==);
}
.ui-icon-recycle:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAALNJREFUKJGFkbENwjAUROmISKRUlIwUKhgExoJFKJIuEjtkgCgU747GRgk45iQ31n++++fNJiGgA17ABHSSrraL1OxCTgjoJR2yoKSj7Z2kUlIDPGfwdu5wtn3OJKgjLOkSX98DAzBI2v9JYdttLOI+W+WWca1C3PFzCUwhRrkGJg2ALoBNJurvSuGfHAqoM3GXJdougD7CoYjKdiXptPZQdD1E+FtZMDpLuthugTGcR2r2DVdqJ8wPtnhmAAAAAElFTkSuQmCC);
}
.ui-icon-forward:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMRJREFUKJGVkCGOAlEQRGt+BoEEtQkGgSPBINYiyAZF9iYIEiSM4Ro4JJJL7A0QSPYAG2xVrZhPGCbAh5Ld9bq7GkjIdpHy1AG/BfmqAgDyWnMk6RvAJ4AegFalvbJdApIGWZZtAAxDCM9XSuqT/LNtkieSa9tjSR3bjfpJILmP5p2kZjI0yXMsfjwIXdwULoCk9vPjSwUAP3HS7BUAkr5iBkla2s5fgRYkFcGjpLntbgqakDxU3ujkJttB0pTkluTvPc8/vr7HryiBafgAAAAASUVORK5CYII=);
}
.ui-icon-refresh:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAPNJREFUKJGVkrFKQ0EQRReF19gHg99hoRbiB9hEEAX9BQuxspEYRPyVoCBoL35BQNL5EyGmiPDOvTbzYH1mI7kwxezeM7M7TEqZJG0BD8AY+AbmwAdwZ3sz893k0Dkwc0HAVNIpMADqBjoDFJ6hpF3ble1K0h7w1CpSJ0ld4Mu2JV2kgoC3XyBwH8njEmjwpyMwjm47Bai/4L91AuaRV6WOi7S2irkNfqaUku3tVcGXAC//M0s6tL3eJF1gGgO6WgJdx2De88OTZgGAZ0n7kjYiDoDXuENSr13x2PaktHK2J5KOSs/pALfACJhFjIC+pE7u/QH4lHvLtaQgDgAAAABJRU5ErkJggg==);
}
.ui-icon-shop:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGVJREFUKJHtj7sNgEAMQx0aNkAIUcMKiBmhuz2BAWzTnhCf5kpel8gvVoAMSTXJRHIjeZBMkuo8U+WD7RVAFxFjRAwAetsLniC5SWqyA63t/VGw7a9d3IXeuP4w3zRM5Rp+oZRwAjzDQOsZ+QOkAAAAAElFTkSuQmCC);
}
.ui-icon-comment:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFpJREFUKJHt0rENgDAMRNHYQ7AWYojswboJM9w3DUhQEafml5aedIULsElqMZikDqwmqbn7UhIB3SIiMujOZ9APvyBwZBHQ3Mwq0DPIzOrr+PisPTVhCl1wGJ1Vv2jmb5Yr3wAAAABJRU5ErkJggg==);
}
.ui-icon-star:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAALpJREFUKJGNkjEOQUEYhP9sVMIB1DqVxB24gmiovGNxCU5BxzUkyCtnPo0Xwu7Lm24zM5n5JxtRADADZiW+VyJsVxFBRFQlTc40lPSU9AAGOU0qeFcppUFKaRgRq86Jks58cMqKgI2kmo6QVNteNzdNJF07mC62J7/JfWDfYtoB/Wxt2+OS0fa4bdVFy2bzohGYv5NvwBJY2r59c7l1e5Iekg62R1/1R5KOku7A/08DpsC21BPYAtPm/QJYiw7xNKZu0gAAAABJRU5ErkJggg==);
}
.ui-icon-tag:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFRJREFUKJHd0LsNwDAIBNDDQ0XZLmTxw1WKYPOpfRUSPIGA7aOoEsAaf1MkL5J3Fw9XD9d/Qpycmm82Mz0c/74oIgrg3X6xk2LzemoD5yjAPeTwgiam2HQanKyEHAAAAABJRU5ErkJggg==);
}
.ui-icon-back:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAALNJREFUKJGVkS1Og1EURF9IamoxJCh00z1UlATDVmoaNDX13URlVRdBQtgAAklNXWs5c2pek4+Q74dRT8x5d+beUhpSV2Wo1JXqv8yDgKZZFfgBjsAbsFFnnUCLPpJM26BRknt1DqyB7zr5lGTSW1odA7sK7f/Ea+l5V4Fz71JKKSXJ7RW4GQKoi/p87zOOkrwCUU3y2BbhIckS+KpRkuSl6+fmIT+TPHVGAQ7ANsmz+qvnBckXBVc8a76sAAAAAElFTkSuQmCC);
}
.ui-icon-video:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGZJREFUKJG10skNgDAMRFEnogXKQoiOKJelBv/hFGQFEeDA3J/lzYDJ3VfdxN03YLQ6LRTwGo2k2Z5QSUSS9AkW9AlGJEn5MvTb/N5qvZwO2HPOfasr4DxHSmmWZAaMDw+wAENd7ADHaH+PGIsOwgAAAABJRU5ErkJggg==);
}
.ui-icon-alert:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKxJREFUKJGNzsFtwkAARFFzIDfuNEAqiDCiBCiCNEETSRFJExRBCUkD3LmB9P/kso4say17Ttau3840zUjUo3oYu68myQvwC/wkWc6G6jkl6nlu2xq4d7B8r+fA79K0VXcFf01NbAGTpPdQANXtWNMCuHYT+7Dga5JFDb6nF3Wn7gdnp+HEFXDLRICbuvqHwOfwJ/VNbSv4o2t7BZ4V2A6nFvhQNw1wmZpYwZc/jDJtwt1FY0AAAAAASUVORK5CYII=);
}
.ui-icon-delete:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGBJREFUKJGdklEKwCAMQ9Oxe687efzpBlpTivkSH69EKhAh6SQdIlsel1+SvOXLZZIVv0Wzh+R/VvXVVJXynT2pKU/SJft3c1S1Kc1yIXnF1B5fM/MYDKhd8uTLLTBJig+jUY4fd8ztxwAAAABJRU5ErkJggg==);
}
/* Alt icons */
.ui-alt-icon.ui-icon-action:after,
.ui-alt-icon .ui-icon-action:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJRJREFUKJGd0TEOAVEQh/FfRHRqcQEH0InENdxA6way1yBRO4TeUUQpoaBajcfu7FrLl7xm3v97mZlHOzbotcyWyHHA8B8xxxGTWEwne9ZH2OEc7u9YRDFJM1xrHq0VE32ccMMKg2+tJpa4YBpmrCwninvMw3LW3t+RxqmIW5/JitkojhvEUjaKTbyy3VBsTeeXcJEHtp45yIo17ikAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-arrow-d:after,
.ui-alt-icon .ui-icon-arrow-d:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEVJREFUKJHt0DEOACAIA0Dw5fxcB2NCKrU8wCYMpNyCW50Ju+PBIFDmQwHD9vvzYLCPU1SYTRikgy/UwRS9sEQVbqOMKVqg6S3qLcM1GQAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-arrow-d-l:after,
.ui-alt-icon .ui-icon-arrow-d-l:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE5JREFUKJG1z0sKACAIBNChi+fRulltIkr8TETCbJSHCvAlM1clAPoMjXe0cCFQjYbspuNU6+4UwWhSCGrYWKQhjTLoogi2CH3Z+PSjiwdfbFm1IlgwHQAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-arrow-d-r:after,
.ui-alt-icon .ui-icon-arrow-d-r:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGRJREFUKJGdkEEOwCAIBKf1Y/6sPo2f2QttlUDEbrIHwUkmwJem3UoDujYNj1AaPoP5tYILIMABVLOrOpfAcnpYZU/7+ecOI3jcuxoeLObtJoLflgAU/IOlY/WWqhndX9DWVafe+J5PSpqyWe4AAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-arrow-l:after,
.ui-alt-icon .ui-icon-arrow-l:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEpJREFUKJGdz8sJACAMRMGnNmZplmZn8SSIaIy7kFOYfOCe5vRcZCr6gisKwx2F4Am9SkKWo3/sKUAHElDVIaeTZSxv/s7EUprXHGsUM9qSFkLPAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-arrow-r:after,
.ui-alt-icon .ui-icon-arrow-r:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEdJREFUKJGlzksKACAMQ8GHeG9787oSpGB/BroKUwJ+JOif0S7WLlaaWHGwLaMTgFndDiyA0YB/U6tPU8jCNLphCR1YRnhoA9kRMlpA+zYzAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-arrow-u:after,
.ui-alt-icon .ui-icon-arrow-u:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEFJREFUKJFjYMANGqCYJNDAwMDwH4qJ1oysiWjN2DQR1IxPE07NxGjC0EyKJrhmRhzO/o/Gx1DHhMvDhMCoRjwAAAKGMeSFlkQGAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-arrow-u-l:after,
.ui-alt-icon .ui-icon-arrow-u-l:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFlJREFUKJG10UsKwDAIRdFb3FiW5tLsytpJyCD4S6GCkycHiQF4Gq049QlVMEQZtAz9svHojXaC96F2sReWWIDLgTbzseVj5ibEZ0+xBKjCd+FWKc2/jfBCL6a9U43gjtJWAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-arrow-u-r:after,
.ui-alt-icon .ui-icon-arrow-u-r:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFdJREFUKJGVzsENgEAIRNGvNmZp2Nl2pjdjcGZhJ+ECvGTgnwDuag4BB7ABp7i9UbCNZxn4ujYxQRZWSEKHcu0WCnFvo/y3hL7/ywiA3eyvCqqqLZBxGz2MpkzN6S8JMAAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-audio:after,
.ui-alt-icon .ui-icon-audio:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAOBJREFUKJGF0b8uREEUx/GP+wJELzYKhYq38ASqjUSnWtmCSmIThUSn8Sia7RUqolJIvAAai4JcxT1Zx93Z65dM5vxmznf+nENZJymuMEZ/Tu5Up/hKfhPvqHHRBdUtENbxEHtH86AM7mEQ8Qqe8Yke3CSgDd6FPww/CH+uAGVwFS+YYCnGdxzYCcJlrG2Hf8Kkan+0oIWY6+Tr/25cwyvesIjleOotXEdiCbwPfxB+GP4sP2lUAHexH3FPU6gPTWv+aGS2OLCBx9gbzpbhF87glqbp0/516TjFFa6wkxN+AB3LVacW0kjaAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-calendar:after,
.ui-alt-icon .ui-icon-calendar:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9JREFUKJFjYECAkwwMDMcZcIMzDAwMJ2AcRgYGhv94FOMETORoGhiNZAPkwCGJPepUAuA/klOIYTMwMFDgVACT9BYpw/9y9AAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-camera:after,
.ui-alt-icon .ui-icon-camera:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAIxJREFUKJGV0dEJwkAQBNCnBWgaC2IdEfzQJvywQMFP0UsqiBDUD08IcSHJwcCxO3Mzt8v/OaPDO6PDKeDZou4Rx9BgY6boh1pQbFGhwCrf2yFvGUQ/4I4LrrjhGP1x6FgM4tdYT3F85Wb/4cUUx8p3ag8klNgHvHA4uxyvyKJnJGyC4hiSHGvOLhPKD3Dyba+iZzUCAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-carat-d:after,
.ui-alt-icon .ui-icon-carat-d:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD5JREFUGJVjYICABijGBVDkGxgYGP5DMTZNKPJMaJL1aJoaoGJ4TYHZhE0Mrya8ivFpwqkYmyaCipE1YVUMAB7LIevHjW1pAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-carat-l:after,
.ui-alt-icon .ui-icon-carat-l:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEtJREFUGJWtjsENwDAIA69NB2OzMloyWfoBCSWQVy35YXxIhlxq5inK18N9KrPPGaz/lOuGTQ3owAWI3cRyd4AT5EAJRSCDRrVNzXxpvxcS02zXAQAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-carat-r:after,
.ui-alt-icon .ui-icon-carat-r:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE9JREFUGJWdj8sNwCAMQx+wGJuRbsZm9EAQlfkcasmHxE9RDF3m3sqA5l6gKHNRKAEVCED2Xfa5DoAbNIAjpD9cZcw2S6P/of7wKPC9sg1eyBEYSwB/E4QAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-carat-u:after,
.ui-alt-icon .ui-icon-carat-u:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAADpJREFUGJVjYMAOGqCYKNDAwMDwH4oJakJWTFATNsU4NaErbsAhhlMxTjkmNJsasWhoxOV+DHdikwcAJcQj7Zve1QkAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-check:after,
.ui-alt-icon .ui-icon-check:after,
html .ui-alt-icon.ui-btn.ui-checkbox-on:after,
html .ui-alt-icon .ui-btn.ui-checkbox-on:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFhJREFUKJGdkEEKwCAMBFf/XUgtSPHT9pKIRVvXDOwpjG4C8IhmixNA1dBy6qQmR0I6Vi+LVjKuyU9DVekGySP95SVFAGG1g64gs8FXNer82SMZt0cyCiM9Aok1Bu4pGTQAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-clock:after,
.ui-alt-icon .ui-icon-clock:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAOFJREFUKJGN0lFKQkEUBuAPn8INJLmVzFUEF1pFhtACklpMhIR7yN4U3YgZ2EteH+YMTnGv9cPhzpz7//+cOXP4iT6esMZXxAqPuNCCG3yiboktqibRPgjPuMRZxAAv8W9fivvFSaPC7B1vxX4cnA/0xJ3ySSVyiSWmkZuIRtRR3l/Cq8gtSZ2r4z5NwhrzyHVjv+tox7xYfzcRVuEyOGGSMQzuooNZJG//IbyL74w0EdtwGp8Q3Qdng/OcrBwHYCp1rxsxxKvjAFz/dqykx20buU2TKKMnPe4Su4gFHsry4AAEHE/vKjK3+wAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-cloud:after,
.ui-alt-icon .ui-icon-cloud:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAYAAAACTR1pAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHlJREFUKJGV0cEJwlAQRdGjEFBTRixHsA/bUOzGTWpIcGER4lIrEEHjIpmF8BOTC49ZXeYxwy85jrjh3c09lgZY4YImkTMWfeKhR4qcsEttv/4RI2UI667KGKnBM8R6ghTidoYXsoGjpXjMtZecygcKVNq/jal6x+YLZAlGQA4CXNYAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-grid:after,
.ui-alt-icon .ui-icon-grid:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAElJREFUKJHVkDkKADAIBCf+/105IH9KilgYsBA7B0SZyl2ABRydwcO6qW5b1/SwhJyQRMwrAF2355bjchQqxwsddTm+0FFXqJwL3FE3Jimu7okAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-mail:after,
.ui-alt-icon .ui-icon-mail:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAIVJREFUKJGl0LENwjAYROEP6CgyA7QwAaxCk03IKClYJSPQwgwp6CKZgt9SMCkCnHSNfc96MpzQI81sH4w1tuhmQB02wbhihxUaDBPAgHNs9sFIeKD2yhH3EXTDIe7q2CbFy21oVLhEqzhri+2HVlbPyWrlbvITsvpY7a2LTH+b5S/QX+ATr8FIgQszAgAAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-eye:after,
.ui-alt-icon .ui-icon-eye:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJxJREFUKJF90UEOwWAQBeCvDkCtauVeXKHoubiEWokLsHMKktpgYZr8qvWSl0xm3kzezPCNDEsccA/WkcsMYBai1wBrFN2mOa4haFAixzjiJmrX0IIJLsnkssfNKqlfoseuYykP8QnHZHiq2Y6GFsYzyMBhulbXPZoqqZ99dsfvcTaYhu0KDz3HaVH4/469nne0yLCIAbdgHbmvPd/xdj2JpveBQAAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-gear:after,
.ui-alt-icon .ui-icon-gear:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAOdJREFUKJFt0kFKA0EQBdCXMdnqQHZBIRKPIIp6CSFIViLoMgEPoIssPKkbieQAScTRxdSYnrELGn73/9W/uqrJxym+sMNJTlAkeIYrDPCEfuDHwNe4614www8qrAOnax1chWnq+B6CHoaZyobBNdq/GCROG8xR4jDwJrgVDtJGvCVlzTOOi4RfYkzdvfQ9ZSbxqKPZFQHSqDKJva6mwCTsm7jPJD4k+BVnzaav3ZxFlFfiGdvgPrRn78b/2eXWNy4k2SP7D7DKlPppP+dRl5ziXD2nZeLyEmeXuM1c2oqx+oNvcZwT/ALWmEfdK0sJWgAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-heart:after,
.ui-alt-icon .ui-icon-heart:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJxJREFUKJGd0L0JAkEQhuEHaxA01USwDxNrMRIjFQTBOi4QSxD7MDITQ0HQyMi/4FZY5NbzfGGSHd7Zb4acLja44owMdTSwxCX01ugERxMnPD9qi13B+zEMNS5oltWohpbqtGs4/CHuyZd9VIh5j1OuKohZ/HXqssmLxvRDjJR0Qy+19PCLOEieKjAvkCZl0ptFJM1+lWJ5WlUq5QWk0VtEhEUaAQAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-home:after,
.ui-alt-icon .ui-icon-home:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEpJREFUKJHV0EEKACAIRNFvdPBuXhuJoDRt14A7n4pgp2ml0oCuFcYrCuMTumIPmTiCNpxBE8uytd8eoBGAEmzeUr2p3jXPGz+CAwXHMuZbKUj5AAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-info:after,
.ui-alt-icon .ui-icon-info:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKpJREFUKJGd0k0KwjAQhuGn3XgExd5DxHsIBa+j6IF6EEU34in8AV1VF41QYwLiB99mJm8ymRk+VWGDAx7Be6wxltECNzwzvqJOQW10cIJpFGv7cJV5aYpZIn7BSPhTrrycV0Ij4kRfKXBXhM4NEs0qemCsR5kI/qQSpz+4Y4nmD7Ch24irfHNEuTOG70TtewFSbjGPb611w81B5xT01kg33B3uwVss++XBC24QXsLZzHsvAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-bars:after,
.ui-alt-icon .ui-icon-bars:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC5JREFUKJFjYGBgOMnAwPCfRHyCiYGB4R8D6eAvGXqoAEaCH88wkOnHP2RY9hcAZvQuiMkKlbgAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-bullets:after,
.ui-alt-icon .ui-icon-bullets:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAENJREFUKJFjYGBgOMnAwHCcAQFOMjAw/CeATzAxMDD8g2IYQGbjAn+JUEMDMBL8eIaBgeEEGp8oP/5hQHXzHyIs+wsAZdgtORFcnwkAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-navigation:after,
.ui-alt-icon .ui-icon-navigation:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHtJREFUKJGV0bENAkEMRNEHEtRwlUAnJNALogxyrphrBNECEBzJBUa3q12PNJm/PPZs5LTHCYdeYMANL8w4t4AjRnwWYMYTu1qcC6YwHH1txSn5vcxV49T8aN0WFcHub0ZwykARbFZQAlcVbDvhO77ZjX8VZJSqIKpYwQ/vRS+P+Y2KHAAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-lock:after,
.ui-alt-icon .ui-icon-lock:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHpJREFUKJG1kFEKQEAURQ/5xmaUTUiyDFaiLIpZk/jCz6PBPJoPt15N99zbew1cVQMGmGVGoEJRD2zKdPdwLWABGiAFYnkvwkq7YMRsHJtbYYNtzmKmjkIibLLN41ZNJw8+gg+FPuG3QgbkPoUNWF0gUgqF70mq/v+lHU7/IdBjMDvkAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-search:after,
.ui-alt-icon .ui-icon-search:after,
.ui-input-search:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAOJJREFUKJGV0T1KQ0EUxfEfASMo5mlhra2ktQwp3IalYisWugEXYOMOxBUEG2sxRMTKIoi9kMqAaCH4LObKM495Yg4Md7iH/3zcQ6UeBpjiE484waI/dIgvlPjAJPYlRihyUD+gd+yjHf0tDAO+zIFXYe5lvAIvcfBm3ZzGbQsN3ziLg3d/N1tYwps0kJxeoy7XwTHW0W0Ad6KO68ZxPOUOazXvKLznuGRGbdX0JjjHKW5UkdxjJfecDi5UWf6sJzzE/rYJhg1pegdSvi0pktF/4JwKaQallPtcWsU1tucFZ/QNAQQ5KvttQjcAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-location:after,
.ui-alt-icon .ui-icon-location:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAOCAYAAAASVl2WAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJFJREFUGJVtzj0OAVAQxPEfCjdApxWts3A8tQjiq1K6CbWCoCASCvvk4U0yzX9nd4e3uljjiguW6MiGJzx/fEyhdYAZGmhiHmwhzj5jmNQKdq7iFrDiX3eYRnoemy2sgk1gUCiY3Ic6DoXhAfXUYVj4P8z6aeORbT+CfWmcBUaFi3pZoFcKwCb8Ue0nsMcWuwReVRg3TqLKb+MAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-minus:after,
.ui-alt-icon .ui-icon-minus:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAECAYAAAC+0w63AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAABZJREFUCJljZGBg+M9ABmAiR9PAaAQA45QBB1B7c+AAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-forbidden:after,
.ui-alt-icon .ui-icon-forbidden:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAANVJREFUKJGF0jFOAzEQheGvhPRBUc4CKMfYgo4z5AZBEZeJUtFwigSJc0SkYGnWFJ4VzsrBI1la++3vmXljLmOJV3ziBz0+sA2tGs84I11ZZ3Q1aIgf3nCPm1gP2IU2lPBykumIeaWidehfWIiexkzHBrwP/UUYkaK8eQN+DO1Adi9FPxrwLM6/yZaX4H/wbZz15Dkl2T0NeFXsbWOzq5gxhd/je8PlONYNOOGEu1Hs/D2AvezeLHpaFZkGPE1v7uThXntypxo0xkIe7kG2vI8yN2V58AtUUV7BwNQ1IAAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-edit:after,
.ui-alt-icon .ui-icon-edit:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGNJREFUKJHFj9sJgDAMRU/FQTqamzSjdBRHcZP6k0Ifoml+vHBJIDm5BOwS9ZIEKGoB2FcvAMkCylBTHbyB0i7S/9f2E1QGd8ubIcmkp6Qp7T8oeiCAwwMBZA8UgBO4tNb+UzdAATKLPxchrgAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-user:after,
.ui-alt-icon .ui-icon-user:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKdJREFUKJGV0j0OAVEQAOCPSLiGoFW4gBMohU60DiUKUUlE5wISJafwExVRbYKCTTbrsWuSKV4y35t5mcdnlDBFhA06gZpgjPBI5B3tPHCdgg8s8sBLAJ6yUCOA4nHrycJiCva/XFhA71fHGs6BjkdUs8adB+AsC0ELtwS6opkHwioBl78KK16Pn2Dn9WtiGGGLMboox2iIg/AaQrnHoPA+/B3pPeaOJ6ycQb55a6UKAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-phone:after,
.ui-alt-icon .ui-icon-phone:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAL5JREFUKJGV0T1LgmEUBuBLGxwSDIe2NpeWVr/GwKn/4+8opK0fEfQPxMLVwc2WwBz9AB0s3ob3ER8E8/GeDhwuDpz7Qp4OrvDtjNSwxhz1c+AIT/jBAs1U+ItlhD9T4QQZVgG3UlARr2EuY4v31Is32ISrU1ynQugGmOEDl6mwiLcID1CN9re4O4bLGEZ4Iu+1ipkTPVfQj3Am7/ZZXtW/uISXA7xEL+CvY3CXB4wP8CPuoXACF9BGw/6BY/gDvyQ3KN8pK4sAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-plus:after,
.ui-alt-icon .ui-icon-plus:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACtJREFUKJFjZMAO/qPxGdEVMOHQSBAMIY2MDJgBQVsbB8aP2MBoAmBgYAAAMeEDGUY6NTwAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-power:after,
.ui-alt-icon .ui-icon-power:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAANZJREFUKJGN0L1KQ0EQBeAv14BEH8Ckt7HXvISgWEgKCfguVj6BlXWaVDaCaBN8CkEsVbRQ0/mTa5FZWK9r8MAyOzNn5uxZypjg8o9eES94LjWq7N5t5AlL6DWLu/jCUUHhGJ/YTuRVPKLGXmFgP3r36MAwCqMFHsbBGVToZ8WED7w3BqDfTjJ4zQgH4SnhLeJKhbtItjLCBa6yfDPiLWxghges+Y0enkJxPRVPw9SN+fctx9mJrTVO8i0dnEejDsVZlp/Fgh+ocIhrTMPoxPzbW4Wn/g/fLgA1dWsM2LYAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-recycle:after,
.ui-alt-icon .ui-icon-recycle:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJ5JREFUKJGFkTEOgzAMRd/WqCB1YuRIMLUHKcdqL8IAWyXu0AMgOtHBjmRaJ/nSl6IvvyS2wdcMfIBNzwMQErUH7Y5fQFsCe+AMVEAHLAY+2cKbOqWLge8xbIC3uin8YgemGDxNH48MWGvNasNNwyoDug/MGnQZ0G1pUHBBBpHS3xADMuoI99pTDVwzFwGy3Aj/uqiA7GlCprcCo1f4BYWEM3yzNJz6AAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-forward:after,
.ui-alt-icon .ui-icon-forward:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKNJREFUKJGV0DEOAVEUheEvQqGkkmgUOolGoVWIqMROFBIl09iGTqm0CTtQKFmAqI3miTFMPKd6Off+OeddfiuJ2HlT+i+UZqFybjjAFH20UcvMVlmgiw16MZEdXEPsGWsM0UQlXwn2wdihWvCHJGvcgtkoaJDkjSdQj+lfwiG8ZzEAjELCHUufp/6qRQBSnDBH6xc0xtHrjGlMUgkTbHH5tvAAPFMjvUFC/dgAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-refresh:after,
.ui-alt-icon .ui-icon-refresh:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAANhJREFUKJGV0j1KQ1EQBeCPCDb2weA6LDSFuAAbBVGIW7AIVmkkhiBuRRQE7cUVCCGdmwgxRYSnL8Wb6PORG5IDA/Nzztw79w7/sYM7DPGFKQboY7vEuy6LLjBBnrAxztFDNhe18BOEe+xjM6yJx0qTDBr4jMSlNF6rwtsIHpaIeotOHEawlxB1F8ybUbxcHvOsjNo65KrwI/zddYXP4bdX4B9hYx40FJ+b42qJqBOct3LyzN8CPOEAW2GHeInaN46rHU8xkl65EU5S16njBu+KvZ2E343aL2btgEkRxRUxWQAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-shop:after,
.ui-alt-icon .ui-icon-shop:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFZJREFUKJHtzzEOQFAQRdFDYwciomYLYo109vlZAY2CH59G6VYzL+9mMlwpMCNgPebiXMgjYUKNDi0ajB4IKE97heVJ2N6yLFFKEv8w3HT6Ty/8wifCDoSeC0K/UivtAAAAAElFTkSuQmCC);
}
.ui-alt-icon.ui-icon-comment:after,
.ui-alt-icon .ui-icon-comment:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEtJREFUKJHt0rEJgEAMBdCn+4m4keNedAgt9BqrS2oDHwLhhRSBDYFrMAdWSdQT09uka66gHw7As+CC5wsyT9CwfDf14Z49oYRk0A3MFy3ywXqBOQAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-star:after,
.ui-alt-icon .ui-icon-star:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJlJREFUKJGV0TEOAUEYhuEnohJ7gK11Kok7cAXRUO2daLgEp6DjGpsgagr/Jovdtb7kSyYz7/tnMkN9xtG/s8bqXynBDVf0q4BOjTgPIYl16xzxiB7qoCXuJfBX71gU8hDnFtIp2Lf0sG2QNsFUZtAgDsrg56tO6yZi0iQWhzlm0bxKLKfr9eE7pKX9FHtcgvnKCFnDVbNgwBM6EjR8Lo9AQQAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-tag:after,
.ui-alt-icon .ui-icon-tag:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGNJREFUKJGl0kEKwCAMRNFfcqciXXk0j2ZP1m4Ugo01aQU34zyMIMBl7IJjWdCFe3EHUgT3UgKOyM2zUV+xABuQF8/JrVc1rF+wtDCMRYUhLEPoxefsoPDjY1h4iSzsRho/0A34VDqPolYk0gAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-back:after,
.ui-alt-icon .ui-icon-back:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJxJREFUKJGV0SEKAkEUh/EfwharRTCZxTsYFCxexSJmt9i9hNHkIQTxAgajFptW2bWMsKu77u4Hw8C8//fmDUOeWANipE3DtYRsOMULdxywwahKKFonDMukCD2MscY1nD8wKJK+aWMXavui8YroBuFZUv+h8xFaNYV52I9VwQgrJOGGSVmwjwUuIZhg+a9z9g/OmFaNcsMWM+Te+QZWtTGkQeVUfgAAAABJRU5ErkJggg==);
}
.ui-alt-icon.ui-icon-video:after,
.ui-alt-icon .ui-icon-video:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFVJREFUKJG10UEKQCEIRdFL+4v4O3K51Sb8gwhEKmyQ8AYODjwR4AMaoJt0oLCYE5ppzggBNGOR3kKxexRapGl1dHSeV8VhegBV11JgPPf0ywpkf98PatxisIq39LAAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-alert:after,
.ui-alt-icon .ui-icon-alert:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJpJREFUKJGVj8ENglAQRB8HvXm3Aa2AgLEELUKboAksQpugCEvQBrhz04PLZTA/m0Vwkkl+Zucl82FcR+Dw4x5qCTyBB7D4B6wAk6u50BroErBTNqmbgALY6X2dgkrgo/IgU1aMQRlwTyamoOmWReA5KZlm7l128tAKaF0pcqvuV5eglOvPPq8HaAu8g0IZTDXgBWwAmhkTvZsegz1JeMzzc+YAAAAASUVORK5CYII=);
}
.ui-alt-icon.ui-icon-delete:after,
.ui-alt-icon .ui-icon-delete:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAF1JREFUKJGdkVEKwCAMQ8PYve1Orj/KnE00rBCQxldSCrwVXaqoHwBqF4OpPzcZTP1bxCrivY1yUlrFgRPkwB/o2uV361dUB7LuOD5IT93xWWLJW86T0x4nP1hT+Q1BGFdF5W6VGQAAAABJRU5ErkJggg==);
}
/*!
* jQuery Mobile 1.4.0-rc.1
* Git HEAD hash: 4b6462bccfe0e4fc3337bd24f17c76c6b5cb0e62 <> Date: Thu Oct 24 2013 20:08:54 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
*/


/* Some unsets */
.ui-mobile,
.ui-mobile body {
	height: 99.9%;
}
.ui-mobile fieldset,
.ui-page {
	padding: 0;
	margin: 0;
}
.ui-mobile a img,
.ui-mobile fieldset {
	border-width: 0;
}
/* Fixes for fieldset issues on IE10 and FF (see #6077) */
.ui-mobile fieldset {
	min-width: 0;
}
@-moz-document url-prefix() {
	.ui-mobile fieldset {
		display: table-column;
		vertical-align: middle;
	}
}
/* Viewport */
.ui-mobile-viewport {
	margin: 0;
	overflow-x: visible;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Issue #2066 */
body.ui-mobile-viewport,
div.ui-mobile-viewport {
	overflow-x: hidden;
}
/* "page" containers - full-screen views, one should always be in view post-pageload */
.ui-mobile [data-role=page],
.ui-mobile [data-role=dialog],
.ui-page {
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	position: absolute;
	display: none;
	border: 0;
}
/* On ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
.ui-page {
	outline: none;
}
.ui-mobile .ui-page-active {
	display: block;
	overflow: visible;
	overflow-x: hidden;
}
@media screen and (orientation: portrait) {
	.ui-mobile .ui-page {
		min-height: 420px;
	}
}
@media screen and (orientation: landscape) {
	.ui-mobile .ui-page {
		min-height: 300px;
	}
}
/* Fouc */
.ui-mobile-rendering > * {
	visibility: hidden;
}
/* Non-js content hiding */
.ui-nojs {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
/* Loading screen */
.ui-loading .ui-loader {
	display: block;
}
.ui-loader {
	display: none;
	z-index: 9999999;
	position: fixed;
	top: 50%;
	left: 50%;
	border:0;
}
.ui-loader-default {
	background: none;
	filter: Alpha(Opacity=18);
	opacity: .18;
	width: 2.875em;
	height: 2.875em;
	margin-left: -1.4375em;
	margin-top: -1.4375em;
}
.ui-loader-verbose {
	width: 12.5em;
	filter: Alpha(Opacity=88);
	opacity: .88;
	box-shadow: 0 1px 1px -1px #fff;
	height: auto;
	margin-left: -6.875em;
	margin-top: -2.6875em;
	padding: .625em;
}
.ui-loader-default h1 {
	font-size: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}
.ui-loader-verbose h1 {
	font-size: 1em;
	margin: 0;
	text-align: center;
}
.ui-loader .ui-icon-loading {
	background-color: #000;
	display: block;
	margin: 0;
	width: 2.75em;
	height: 2.75em;
	padding: .0625em;
	border-radius: 2.25em;
}
.ui-loader-verbose .ui-icon-loading {
	margin: 0 auto .625em;
	filter: Alpha(Opacity=75);
	opacity: .75;
}
.ui-loader-textonly {
	padding: .9375em;
	margin-left: -7.1875em;
}
.ui-loader-textonly .ui-icon-loading {
	display: none;
}
.ui-loader-fakefix {
	position: absolute;
}
/* Headers, content panels */
.ui-bar,
.ui-body {
	position: relative;
	padding: .4em 1em;
	overflow: hidden;
	display: block;
	clear: both;
}
.ui-bar h1,
.ui-bar h2,
.ui-bar h3,
.ui-bar h4,
.ui-bar h5,
.ui-bar h6 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	display: inline-block;
}
.ui-header,
.ui-footer {
	border-width: 1px 0;
	border-style: solid;
	position: relative;
}
.ui-header:empty,
.ui-footer:empty {
	min-height: 2.6875em;
}
.ui-header .ui-title,
.ui-footer .ui-title {
	font-size: 1em;
	min-height: 1.1em;
	text-align: center;
	display: block;
	margin: 0 30%;
	padding: .7em 0;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	outline: 0 !important;
}
.ui-footer .ui-title {
	margin: 0 1em;
}
.ui-content {
	border-width: 0;
	overflow: visible;
	overflow-x: hidden;
	padding: 1em;
}
/* Corner styling for dialogs and popups */
.ui-corner-all > .ui-header:first-child,
.ui-corner-all > .ui-content:first-child,
.ui-corner-all > .ui-footer:first-child {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}
.ui-corner-all > .ui-header:last-child,
.ui-corner-all > .ui-content:last-child,
.ui-corner-all > .ui-footer:last-child {
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}
/* Buttons and icons */
.ui-btn {
	font-size: 16px;
	margin: .5em 0;
	padding: .7em 1em;
	display: block;
	position: relative;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.ui-btn-icon-notext {
	padding: 0;
	width: 1.75em;
	height: 1.75em;
	text-indent: -9999px;
	white-space: nowrap !important;
}
.ui-mini {
	font-size: 12.5px;
}
.ui-mini .ui-btn {
	font-size: inherit;
}
/* Make buttons in toolbars default to mini and inline. */
.ui-header .ui-btn,
.ui-footer .ui-btn {
	/*font-size: 12.5px;*/
	display: inline-block;
	vertical-align: middle;
}
/* To ensure same top and left/right position when ui-btn-left/right are added to something other than buttons. */
.ui-header .ui-btn-left,
.ui-header .ui-btn-right {
	font-size: 12.5px;
}
.ui-mini.ui-btn-icon-notext,
.ui-mini .ui-btn-icon-notext,
.ui-header .ui-btn-icon-notext,
.ui-footer .ui-btn-icon-notext {
	font-size: 16px;	
	padding: 0;
}
.ui-btn-inline {
	display: inline-block;
	vertical-align: middle;
	margin-right: .625em;
}
.ui-btn-icon-left {
	padding-left: 2.5em;
}
.ui-btn-icon-right {
	padding-right: 2.5em;
}
.ui-btn-icon-top {
	padding-top: 2.5em;
}
.ui-btn-icon-bottom {
	padding-bottom: 2.5em;
}
.ui-header .ui-btn-icon-top,
.ui-footer .ui-btn-icon-top,
.ui-header .ui-btn-icon-bottom,
.ui-footer .ui-btn-icon-bottom {
	padding-left: .3125em;
	padding-right: .3125em;
}
.ui-btn-icon-left:after,
.ui-btn-icon-right:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after,
.ui-btn-icon-notext:after {
	/*workaround jqmon kitkat : Trebble*/
	/*content: "";*/
	position: absolute;
	display: block;
	width: 22px;
	height: 22px;
}
.ui-btn-icon-notext:after,
.ui-btn-icon-left:after,
.ui-btn-icon-right:after {
	top: 50%;
	margin-top: -11px;
}
.ui-btn-icon-left:after {
	left: .5625em;
}
.ui-btn-icon-right:after {
	right: .5625em;
}
.ui-mini.ui-btn-icon-left:after,
.ui-mini .ui-btn-icon-left:after,
.ui-header .ui-btn-icon-left:after,
.ui-footer .ui-btn-icon-left:after {
	left: .37em;
}
.ui-mini.ui-btn-icon-right:after,
.ui-mini .ui-btn-icon-right:after,
.ui-header .ui-btn-icon-right:after,
.ui-footer .ui-btn-icon-right:after {
	right: .37em;
}
.ui-btn-icon-notext:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after {
	left: 50%;
	margin-left: -11px;
}
.ui-btn-icon-top:after {
	top: .5625em;
}
.ui-btn-icon-bottom:after {
	top: auto;
	bottom: .5625em;
}
/* Buttons in header position classes */
.ui-header .ui-btn-left,
.ui-header .ui-btn-right,
.ui-btn-left > [class*="ui-"],
.ui-btn-right > [class*="ui-"] {
	margin: 0;
}
.ui-btn-left,
.ui-btn-right {
	position: absolute;
	top: .24em;
}
.ui-btn-left {
	left: .4em;
}
.ui-btn-right {
	right: .4em;
}
.ui-btn-icon-notext.ui-btn-left {
	top: .3125em;
	left: .3125em;
}
.ui-btn-icon-notext.ui-btn-right {
	top: .3125em;
	right: .3125em;
}
/* Button elements */
button.ui-btn,
.ui-controlgroup-controls button.ui-btn-icon-notext {
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
}
button.ui-btn-inline {
	width: auto;
}
/* Firefox adds a 1px border in a button element. We negate this to make sure they have the same height as other buttons in controlgroups. */
button.ui-btn::-moz-focus-inner {
	border: 0;
}
button.ui-btn-icon-notext,
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn {
	box-sizing: content-box;
	width: 1.75em;
}
/* Form labels */
.ui-mobile label:not(.ant-segmented-item),
.ui-controlgroup-label {
	display: flex;
	margin: 0 0 .4em;
}
/* Accessible content hiding */
/* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
.ui-hide-label > label,
.ui-hide-label .ui-controlgroup-label,
.ui-hide-label .ui-rangeslider label,
.ui-hidden-accessible {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
/* Used for hiding elements by the filterable widget. You can also use this class to hide list items or buttons in controlgroups; this ensures correct corner styling. */
.ui-screen-hidden {
	display: none !important;
}
/* Transitions originally inspired by those from jQtouch, nice work, folks */
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
	width: 100%;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
.ui-page-pre-in {
	opacity: 0;
}
.in {
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 200ms;
	-moz-animation-timing-function: ease-out;
	-moz-animation-duration: 200ms;
	animation-timing-function: ease-out;
	animation-duration: 200ms;
}
.out {
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-duration: 225ms;
	-moz-animation-timing-function: ease-in;
	-moz-animation-duration: 225ms;
	animation-timing-function: ease-in;
	animation-duration: 225ms;
}
@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.fade.out {
	opacity: 0;
	-webkit-animation-duration: 125ms;
	-webkit-animation-name: fadeout;
	-moz-animation-duration: 125ms;
	-moz-animation-name: fadeout;
	animation-duration: 125ms;
	animation-name: fadeout;
}
.fade.in {
	opacity: 1;
	-webkit-animation-duration: 225ms;
	-webkit-animation-name: fadein;
	-moz-animation-duration: 225ms;
	-moz-animation-name: fadein;
	animation-duration: 225ms;
	animation-name: fadein;
}
.pop {
	transform-origin: 50% 50%;
}
.pop.in {
	-webkit-transform: scale(1);
	-webkit-animation-name: popin;
	-webkit-animation-duration: 200ms;
	-moz-transform: scale(1);
	-moz-animation-name: popin;
	-moz-animation-duration: 200ms;
	transform: scale(1);
	animation-name: popin;
	animation-duration: 200ms;
    opacity: 1;
}
.pop.out {
	-webkit-animation-name: fadeout;
	-webkit-animation-duration: 100ms;
	-moz-animation-name: fadeout;
	-moz-animation-duration: 100ms;
	animation-name: fadeout;
	animation-duration: 100ms;
	opacity: 0;
}
.pop.in.reverse {
	animation-name: fadein;
}
.pop.out.reverse {
	-webkit-transform: scale(.8);
	-webkit-animation-name: popout;
	-moz-transform: scale(.8);
	-moz-animation-name: popout;
	transform: scale(.8);
	animation-name: popout;
}
@keyframes popin {
    from {
        transform: scale(.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes popout {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(.8);
        opacity: 0;
    }
}
/* keyframes for slidein from sides */
@keyframes slideinfromright {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@keyframes slideinfromleft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
/* keyframes for slideout to sides */
@keyframes slideouttoleft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
@keyframes slideouttoright {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}
.slide.out, .slide.in {
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 200ms;
	-moz-animation-timing-function: ease-out;
	-moz-animation-duration: 200ms;
	animation-timing-function: ease-out;
	animation-duration: 200ms;
}
.slide.out {
	-webkit-transform: translate3d(-100%,0,0);
	-webkit-animation-name: slideouttoleft;
	-moz-transform: translateX(-100%);
	-moz-animation-name: slideouttoleft;
	transform: translateX(-100%);
	animation-name: slideouttoleft;
}
.slide.in {
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation-name: slideinfromright;
	-moz-transform: translateX(0);
	-moz-animation-name: slideinfromright;
	transform: translateX(0);
	animation-name: slideinfromright;
}
.slide.out.reverse {
	-webkit-transform: translate3d(100%,0,0);
	-webkit-animation-name: slideouttoright;
	-moz-transform: translateX(100%);
	-moz-animation-name: slideouttoright;
	transform: translateX(100%);
	animation-name: slideouttoright;
}
.slide.in.reverse {
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation-name: slideinfromleft;
	-moz-transform: translateX(0);
	-moz-animation-name: slideinfromleft;
	transform: translateX(0);
	animation-name: slideinfromleft;
}
.slidefade.out {
	-webkit-transform: translateX(-100%);
	-webkit-animation-name: slideouttoleft;
	-webkit-animation-duration: 225ms;
	-moz-transform: translateX(-100%);
	-moz-animation-name: slideouttoleft;
	-moz-animation-duration: 225ms;
	transform: translateX(-100%);
	animation-name: slideouttoleft;
	animation-duration: 225ms;
}
.slidefade.in {
	-webkit-transform: translateX(0);
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateX(0);
	-moz-animation-name: fadein;
	-moz-animation-duration: 200ms;
	transform: translateX(0);
	animation-name: fadein;
	animation-duration: 200ms;
}
.slidefade.out.reverse {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: slideouttoright;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateX(100%);
	-moz-animation-name: slideouttoright;
	-moz-animation-duration: 200ms;
	transform: translateX(100%);
	animation-name: slideouttoright;
	animation-duration: 200ms;
}
.slidefade.in.reverse {
	-webkit-transform: translateX(0);
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateX(0);
	-moz-animation-name: fadein;
	-moz-animation-duration: 200ms;
	transform: translateX(0);
	animation-name: fadein;
	animation-duration: 200ms;
}
/* slide down */
.slidedown.out {
	-webkit-animation-name: fadeout;
	-webkit-animation-duration: 100ms;
	-moz-animation-name: fadeout;
	-moz-animation-duration: 100ms;
	animation-name: fadeout;
	animation-duration: 100ms;
}
.slidedown.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfromtop;
	-webkit-animation-duration: 250ms;
	-moz-transform: translateY(0);
	-moz-animation-name: slideinfromtop;
	-moz-animation-duration: 250ms;
	transform: translateY(0);
	animation-name: slideinfromtop;
	animation-duration: 250ms;
}
.slidedown.in.reverse {
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 150ms;
	-moz-animation-name: fadein;
	-moz-animation-duration: 150ms;
	animation-name: fadein;
	animation-duration: 150ms;
}
.slidedown.out.reverse {
	-webkit-transform: translateY(-100%);
	-webkit-animation-name: slideouttotop;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateY(-100%);
	-moz-animation-name: slideouttotop;
	-moz-animation-duration: 200ms;
	transform: translateY(-100%);
	animation-name: slideouttotop;
	animation-duration: 200ms;
}
@keyframes slideinfromtop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
@keyframes slideouttotop {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}
/* slide up */
.slideup.out {
	-webkit-animation-name: fadeout;
	-webkit-animation-duration: 100ms;
	-moz-animation-name: fadeout;
	-moz-animation-duration: 100ms;
	animation-name: fadeout;
	animation-duration: 100ms;
}
.slideup.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfrombottom;
	-webkit-animation-duration: 250ms;
	-moz-transform: translateY(0);
	-moz-animation-name: slideinfrombottom;
	-moz-animation-duration: 250ms;
	transform: translateY(0);
	animation-name: slideinfrombottom;
	animation-duration: 250ms;
}
.slideup.in.reverse {
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 150ms;
	-moz-animation-name: fadein;
	-moz-animation-duration: 150ms;
	animation-name: fadein;
	animation-duration: 150ms;
}
.slideup.out.reverse {
	-webkit-transform: translateY(100%);
	-webkit-animation-name: slideouttobottom;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateY(100%);
	-moz-animation-name: slideouttobottom;
	-moz-animation-duration: 200ms;
	transform: translateY(100%);
	animation-name: slideouttobottom;
	animation-duration: 200ms;
}
@keyframes slideinfrombottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes slideouttobottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}
/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
.viewport-flip {
	perspective: 1000;
	position: absolute;
}
.flip {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
	-moz-backface-visibility: hidden;
	-moz-transform: translateX(0);
	backface-visibility: hidden;
	transform: translateX(0);
}
.flip.out {
	-webkit-transform: rotateY(-90deg) scale(.9);
	-webkit-animation-name: flipouttoleft;
	-webkit-animation-duration: 175ms;
	-moz-transform: rotateY(-90deg) scale(.9);
	-moz-animation-name: flipouttoleft;
	-moz-animation-duration: 175ms;
	transform: rotateY(-90deg) scale(.9);
	animation-name: flipouttoleft;
	animation-duration: 175ms;
}
.flip.in {
	-webkit-animation-name: flipintoright;
	-webkit-animation-duration: 225ms;
	-moz-animation-name: flipintoright;
	-moz-animation-duration: 225ms;
	animation-name: flipintoright;
	animation-duration: 225ms;
}
.flip.out.reverse {
	-webkit-transform: rotateY(90deg) scale(.9);
	-webkit-animation-name: flipouttoright;
	-moz-transform: rotateY(90deg) scale(.9);
	-moz-animation-name: flipouttoright;
	transform: rotateY(90deg) scale(.9);
	animation-name: flipouttoright;
}
.flip.in.reverse {
	animation-name: flipintoleft;
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg) scale(.9); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg) scale(.9); }
    to { transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg) scale(.9); }
    to { transform: rotateY(0); }
}
/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
.viewport-turn {
	-ms-perspective: 200px;
	perspective: 200px;
	position: absolute;
}
.turn {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
	-webkit-transform-origin: 0;
	
	-moz-backface-visibility: hidden;
	-moz-transform: translateX(0);
	-moz-transform-origin: 0;
	
	backface-visibility :hidden;
	transform: translateX(0);
	transform-origin: 0;
}
.turn.out {
	-webkit-transform: rotateY(-90deg) scale(.9);
	-webkit-animation-name: flipouttoleft;
	-webkit-animation-duration: 125ms;
	-moz-transform: rotateY(-90deg) scale(.9);
	-moz-animation-name: flipouttoleft;
	-moz-animation-duration: 125ms;
	transform: rotateY(-90deg) scale(.9);
	animation-name: flipouttoleft;
	animation-duration: 125ms;
}
.turn.in {
	-webkit-animation-name: flipintoright;
	-webkit-animation-duration: 250ms;
	-moz-animation-name: flipintoright;
	-moz-animation-duration: 250ms;
	animation-name: flipintoright;
	animation-duration: 250ms;
	
}
.turn.out.reverse {
	-webkit-transform: rotateY(90deg) scale(.9);
	-webkit-animation-name: flipouttoright;
	-moz-transform: rotateY(90deg) scale(.9);
	-moz-animation-name: flipouttoright;
	transform: rotateY(90deg) scale(.9);
	animation-name: flipouttoright;
}
.turn.in.reverse {
	animation-name: flipintoleft;
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg) scale(.9); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg) scale(.9); }
    to { transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg) scale(.9); }
    to { transform: rotateY(0); }
}
/* flow transition */
.flow {
	-webkit-transform-origin: 50% 30%;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
	-moz-transform-origin: 50% 30%;	
	-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
	transform-origin: 50% 30%;	
	box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.ui-dialog.flow {
	-webkit-transform-origin: none;
	-webkit-box-shadow: none;
	-moz-transform-origin: none;	
	-moz-box-shadow: none;
	transform-origin: none;	
	box-shadow: none;
}
.flow.out {
	-webkit-transform: translateX(-100%) scale(.7);
	-webkit-animation-name: flowouttoleft;
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateX(-100%) scale(.7);
	-moz-animation-name: flowouttoleft;
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 200ms;
	transform: translateX(-100%) scale(.7);
	animation-name: flowouttoleft;
	animation-timing-function: ease;
	animation-duration: 200ms;
}
.flow.in {
	-webkit-transform: translateX(0) scale(1);
	-webkit-animation-name: flowinfromright;
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateX(0) scale(1);
	-moz-animation-name: flowinfromright;
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 200ms;
	transform: translateX(0) scale(1);
	animation-name: flowinfromright;
	animation-timing-function: ease;
	animation-duration: 200ms;
}
.flow.out.reverse {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: flowouttoright;
	-moz-transform: translateX(100%);
	-moz-animation-name: flowouttoright;
	transform: translateX(100%);
	animation-name: flowouttoright;
}
.flow.in.reverse {
	animation-name: flowinfromleft;
}
@keyframes flowouttoleft {
    0% { transform: translateX(0) scale(1); }
	60%, 70% { transform: translateX(0) scale(.7); }
    100% { transform:  translateX(-100%) scale(.7); }
}
@keyframes flowouttoright {
    0% { transform: translateX(0) scale(1); }
	60%, 70% { transform: translateX(0) scale(.7); }
    100% { transform:  translateX(100%) scale(.7); }
}
@keyframes flowinfromleft {
    0% { transform: translateX(-100%) scale(.7); }
	30%, 40% { transform: translateX(0) scale(.7); }
    100% { transform: translateX(0) scale(1); }
}
@keyframes flowinfromright {
    0% { transform: translateX(100%) scale(.7); }
	30%, 40% { transform: translateX(0) scale(.7); }
    100% { transform: translateX(0) scale(1); }
}
.ui-field-contain,
.ui-mobile fieldset.ui-field-contain {
	display: block;
	position: relative;
	overflow: visible;
	clear: both;
	padding: .8em 0;
}
.ui-field-contain > label + [class*="ui-"],
.ui-field-contain .ui-controlgroup-controls {
	margin: 0;
}
.ui-field-contain:last-child {
	border-bottom-width: 0;
}
@media (min-width: 28em) {
	.ui-field-contain,
	.ui-mobile fieldset.ui-field-contain {
		padding: 0;
		margin: 1em 0;
		border-bottom-width: 0;
	}
	.ui-field-contain:before,
	.ui-field-contain:after {
		content: "";
		display: table;
	}
	.ui-field-contain:after {
		clear: both;
	}
	.ui-field-contain > label,
	.ui-field-contain .ui-controlgroup-label,
	.ui-field-contain > .ui-rangeslider > label {
		float: left;
		width: 20%;
		margin: .5em 2% 0 0;
	}
	.ui-popup .ui-field-contain > label,
	.ui-popup .ui-field-contain .ui-controlgroup-label,
	.ui-popup .ui-field-contain > .ui-rangeslider > label {
		float: none;
		width: auto;
		margin: 0 0 .4em;
	}
	.ui-field-contain > label + [class*="ui-"],
	.ui-field-contain .ui-controlgroup-controls {
		float: left;
		width: 78%;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	/* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
	.ui-hide-label > label + [class*="ui-"],
	.ui-hide-label .ui-controlgroup-controls,
	.ui-popup .ui-field-contain > label + [class*="ui-"],
	.ui-popup .ui-field-contain .ui-controlgroup-controls {
		float: none;
		width: 100%;
	}
	.ui-field-contain > label + .ui-btn-inline {
		width: auto;
		margin-right: .625em;
	}
}
/* content configurations. */
.ui-grid-a,
.ui-grid-b,
.ui-grid-c,
.ui-grid-d,
.ui-grid-solo {
	overflow: hidden;
}
.ui-block-a,
.ui-block-b,
.ui-block-c,
.ui-block-d,
.ui-block-e {
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	min-height: 1px;
	box-sizing: border-box;
}
/* force new row */
.ui-block-a {
	clear: left;
}
ul.ui-grid-a,
ul.ui-grid-b,
ul.ui-grid-c,
ul.ui-grid-d,
ul.ui-grid-solo,
li.ui-block-a,
li.ui-block-b,
li.ui-block-c,
li.ui-block-d,
li.ui-block-e {
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	list-style: none;
}
/* No margin in grids for 100% width button elements until we can use max-width: fill-available; */
[class*="ui-block-"] > button.ui-btn,
.ui-grid-solo > button.ui-btn {
	margin-right: 0;
	margin-left: 0;
}
[class*="ui-block-"] > .ui-btn,
[class*="ui-block-"] > .ui-select,
[class*="ui-block-"] > .ui-checkbox,
[class*="ui-block-"] > .ui-radio,
[class*="ui-block-"] > button.ui-btn-inline,
[class*="ui-block-"] > button.ui-btn-icon-notext,
.ui-grid-solo > [class*="ui-"] {
	margin-right: .3125em;
	margin-left: .3125em;
}
.ui-grid-a > .ui-block-a,
.ui-grid-a > .ui-block-b {
	/* width: 49.95%; IE7 */
	/* margin-right: -.5px; BB5 */
	width: 50%;
}
.ui-grid-b > .ui-block-a,
.ui-grid-b > .ui-block-b,
.ui-grid-b > .ui-block-c {
	/* width: 33.25%; IE7 */
	/* margin-right: -.5px; BB5 */
	width: 33.333%;
}
.ui-grid-c > .ui-block-a,
.ui-grid-c > .ui-block-b,
.ui-grid-c > .ui-block-c,
.ui-grid-c > .ui-block-d {
	/* width: 24.925%; IE7 */
	/* margin-right: -.5px; BB5 */
	width: 25%;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
	/* width: 19.925%; IE7 */
	width: 20%;
}
.ui-grid-solo > .ui-block-a {
	width: 100%;
	float: none; 
}
/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
@media (max-width: 35em) {
	.ui-responsive > .ui-block-a,
	.ui-responsive > .ui-block-b,
	.ui-responsive > .ui-block-c,
	.ui-responsive > .ui-block-d,
	.ui-responsive > .ui-block-e {
		width: 100%; 
		float: none; 
	}
}
/* fixed page header & footer configuration */
.ui-header-fixed,
.ui-footer-fixed {
	left: 0;
	right: 0;
	width: 100%;
	position: fixed;
	z-index: 1000;
}
.ui-header-fixed {
	top: -1px;
	padding-top: 1px;
}
.ui-header-fixed.ui-fixed-hidden {
	top: 0;
	padding-top: 0;
}
.ui-header-fixed .ui-btn-left,
.ui-header-fixed .ui-btn-right {
	margin-top: 1px;
}
.ui-header-fixed.ui-fixed-hidden .ui-btn-left,
.ui-header-fixed.ui-fixed-hidden .ui-btn-right {
	margin-top: 0;
}
.ui-footer-fixed {
	bottom: -1px;
	padding-bottom: 1px;
}
.ui-footer-fixed.ui-fixed-hidden {
	bottom: 0;
	padding-bottom: 0;
}
.ui-header-fullscreen,
.ui-footer-fullscreen {
	filter: Alpha(Opacity=90);
	opacity: .9;
}
/* updatePagePadding() will update the padding to actual height of header and footer. */
.ui-page-header-fixed {
	padding-top: 2.8125em;
}
.ui-page-footer-fixed {
	padding-bottom: 2.8125em;
}
.ui-page-header-fullscreen > .ui-content,
.ui-page-footer-fullscreen > .ui-content {
	padding: 0;
}
.ui-fixed-hidden {
	position: absolute;
}
/* Tap toggle: hide external fixed footer. See issue #6604 */
.ui-footer-fixed.ui-fixed-hidden {
  display: none;
}
.ui-page .ui-footer-fixed.ui-fixed-hidden {
  display: block
}
.ui-page-header-fullscreen .ui-fixed-hidden,
.ui-page-footer-fullscreen .ui-fixed-hidden {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.ui-header-fixed .ui-btn,
.ui-footer-fixed .ui-btn { 
	z-index: 10;
}
/* workarounds for other widgets */
.ui-android-2x-fixed .ui-li-has-thumb {
	-webkit-transform: translate3d(0,0,0);
}
.ui-navbar {
	max-width: 100%;
}
.ui-navbar ul:before,
.ui-navbar ul:after {
	content: "";
	display: table;
}
.ui-navbar ul:after {
	clear: both;
}
.ui-navbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: block;
	border: 0;
	max-width: 100%;
	overflow: visible;
}
.ui-navbar li .ui-btn {
	font-size: 12.5px;
	display: block;
	margin: 0;
	border-right-width: 0;
}
.ui-navbar .ui-btn:focus {
	z-index: 1;
}
/* fixes gaps caused by subpixel problem */
.ui-navbar li:last-child .ui-btn {
	margin-right: -4px;
}
.ui-navbar li:last-child .ui-btn:after {
	margin-right: 4px;
}
.ui-content .ui-navbar li:last-child .ui-btn,
.ui-content .ui-navbar .ui-grid-duo .ui-block-b .ui-btn {
	border-right-width: 1px;
	margin-right: 0;
}
.ui-content .ui-navbar li:last-child .ui-btn:after,
.ui-content .ui-navbar .ui-grid-duo .ui-block-b .ui-btn:after {
	margin-right: 0;
}
.ui-navbar .ui-grid-duo .ui-block-a:last-child .ui-btn {
	border-right-width: 1px;
	margin-right: -1px;
}
.ui-navbar .ui-grid-duo .ui-block-a:last-child .ui-btn:after {
	margin-right: 1px;
}
.ui-navbar .ui-grid-duo .ui-btn {
	border-top-width: 0;
}
.ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
	border-top-width: 1px;
}
.ui-header .ui-navbar .ui-btn,
.ui-footer .ui-navbar .ui-btn {
	border-top-width: 0;
	border-bottom-width: 0;
}
.ui-header .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-footer .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-header .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn,
.ui-footer .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
	border-top-width: 0;
}
.ui-header .ui-title ~ .ui-navbar .ui-btn,
.ui-footer .ui-title ~ .ui-navbar .ui-btn,
.ui-header .ui-navbar .ui-grid-duo .ui-btn,
.ui-footer .ui-navbar .ui-grid-duo .ui-btn,
.ui-header .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-footer .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
.ui-header .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn,
.ui-footer .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
	border-top-width: 1px;
}
/* Hide the native input element */
.ui-input-btn input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	outline: 0;
	-webkit-border-radius: inherit;
	border-bottom-radius: inherit;	
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	background: #fff;
	background: rgba(255,255,255,0);
	filter: Alpha(Opacity=0);
	opacity: .1;
	font-size: 1px;
	text-indent: -9999px;
	z-index: 2;
}
/* Fixes IE/WP filter alpha opacity bugs */
.ui-input-btn.ui-state-disabled input {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.ui-collapsible {
	margin: 0 -1em;
}
.ui-collapsible-inset,
.ui-collapsible-set {
	margin: .5em 0;
}
.ui-collapsible-heading {
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
}
.ui-collapsible-heading .ui-btn {
	text-align: left;
	margin: 0;
	border-left-width: 0;
	border-right-width: 0;
}
.ui-collapsible-heading .ui-btn-icon-top,
.ui-collapsible-heading .ui-btn-icon-bottom {
	text-align: center;
}
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
	border-right-width: 1px;
	border-left-width: 1px;
}
.ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) > .ui-collapsible-heading .ui-btn {
	border-top-width: 0;
}
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn {
	border-top-width: 1px;
}
.ui-collapsible-heading-status {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.ui-collapsible-content {
	display: block;
	margin: 0;	
	padding: .5em 1em;
}
.ui-collapsible-themed-content .ui-collapsible-content {
	border-left-width: 0;
	border-right-width: 0;
	border-top-width: 0;
	border-bottom-width: 1px;
	border-style: solid;
}
.ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content {
	border-left-width: 1px;
	border-right-width: 1px;
}
.ui-collapsible-inset .ui-collapsible-content {
	margin: 0;
}
.ui-collapsible-content-collapsed {
	display: none;
}
.ui-collapsible-set > .ui-collapsible.ui-corner-all {
	border-radius: 0;
}
.ui-collapsible-heading,
.ui-collapsible-heading > .ui-btn {	
	border-radius: inherit;	
}
.ui-collapsible-set .ui-collapsible.ui-first-child {	
	border-top-right-radius: inherit;	
	border-top-left-radius: inherit;		
}
.ui-collapsible-content,
.ui-collapsible-set .ui-collapsible.ui-last-child {	
	border-bottom-right-radius: inherit;	
	border-bottom-left-radius: inherit;		
}
.ui-collapsible-themed-content:not(.ui-collapsible-collapsed) > .ui-collapsible-heading {	
	border-bottom-right-radius: 0;	
	border-bottom-left-radius: 0;		
}
.ui-collapsible-set .ui-collapsible {
	margin: -1px -1em 0;
}
.ui-collapsible-set .ui-collapsible-inset {
	margin: -1px 0 0;
}
.ui-collapsible-set .ui-collapsible.ui-first-child {
	margin-top: 0;
}
.ui-controlgroup,
fieldset.ui-controlgroup {
	padding: 0;
	margin: .5em 0;
}
.ui-field-contain .ui-controlgroup,
.ui-field-contain fieldset.ui-controlgroup {
	margin: 0;
}
.ui-mini .ui-controlgroup-label {
	font-size: 16px;
}
.ui-controlgroup.ui-mini .ui-btn-icon-notext,
.ui-controlgroup .ui-mini.ui-btn-icon-notext {
	font-size: inherit;
}
.ui-controlgroup-controls .ui-btn,
.ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-controls .ui-radio,
.ui-controlgroup-controls .ui-select {
	margin: 0;
}
.ui-controlgroup-controls .ui-btn:focus,
.ui-controlgroup-controls .ui-btn.ui-focus {
	z-index: 1;
}
.ui-controlgroup-controls li {
	list-style: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls {
	display: inline-block;
	vertical-align: middle;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls:before,
.ui-controlgroup-horizontal .ui-controlgroup-controls:after {
	content: "";
	display: table;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls:after {
	clear: both;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn,
.ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
	float: left;
	clear: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn,
.ui-controlgroup-controls .ui-btn-icon-notext {
	width: auto;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn-icon-notext,
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn-icon-notext {
	width: 1.5em;
}
 .ui-controlgroup-controls .ui-btn-icon-notext {
	height: auto;
	padding: .7em 1em;
}
.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn {
	border-bottom-width: 0;
}
.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn.ui-last-child {
	border-bottom-width: 1px;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn {
	border-right-width: 0;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-last-child {
	border-right-width: 1px;
}
.ui-controlgroup-controls .ui-btn-corner-all,
.ui-controlgroup-controls .ui-btn.ui-corner-all {
	border-radius: 0;
}
.ui-controlgroup-controls,
.ui-controlgroup-controls .ui-radio,
.ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-controls .ui-select,
.ui-controlgroup-controls li {
	border-radius: inherit;
}
.ui-controlgroup-vertical .ui-btn.ui-first-child {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}
.ui-controlgroup-vertical .ui-btn.ui-last-child {
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}
.ui-controlgroup-horizontal .ui-btn.ui-first-child {
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}
.ui-controlgroup-horizontal .ui-btn.ui-last-child {
	border-top-right-radius: inherit;
	border-bottom-right-radius: inherit;
}
.ui-controlgroup-controls a.ui-shadow:not(:focus),
.ui-controlgroup-controls button.ui-shadow:not(:focus),
.ui-controlgroup-controls div.ui-shadow:not(.ui-focus) {
	box-shadow: none;
}
/* Fixes legend not wrapping on IE10 */
.ui-controlgroup-label legend {
	max-width: 100%;
}
.ui-controlgroup-controls > label {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.ui-dialog {
	 background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
}
.ui-dialog-contain {
	width: 92.5%;
	max-width: 500px;
	margin: 10% auto 1em auto;
	padding: 0;
	position: relative;
	top: -1em;
}
.ui-dialog-contain > .ui-header, 
.ui-dialog-contain > .ui-content, 
.ui-dialog-contain > .ui-footer { 
	display: block;
	position: relative; 
	width: auto;
	margin: 0;
}
.ui-dialog-contain > .ui-header {
	overflow: hidden;
	z-index: 10; 
	padding: 0;
	border-top-width: 0;
}
.ui-dialog-contain > .ui-footer {
	z-index: 10; 
	padding: 0 1em; 
	border-bottom-width: 0;
}
.ui-popup-open .ui-header-fixed,
.ui-popup-open .ui-footer-fixed {
	position: absolute !important; /* See issues #4816, #4844 and #4874 and popup.js */
}
.ui-popup-screen {
	background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
	top: 0;
	left: 0;
	right: 0;
	bottom: 1px;
	position: absolute;
	filter: Alpha(Opacity=0);
	opacity: 0;
	z-index: 1099;
}
.ui-popup-screen.in {
	opacity: 0.5;
	filter: Alpha(Opacity=50);
}
.ui-popup-screen.out {
	opacity: 0;
	filter: Alpha(Opacity=0);
}
.ui-popup-container {
	z-index: 1100;
	display: inline-block;
	position: absolute;
	padding: 0;
	outline: 0;
}
.ui-popup {
	position: relative;
}
.ui-popup.ui-body-inherit {
	border-width: 1px;
	border-style: solid;
}
.ui-popup-hidden {
	left: 0;
	top: 0;
	position: absolute !important;
	visibility: hidden;
}
.ui-popup-truncate {
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.ui-popup.ui-content,
.ui-popup .ui-content {
	overflow: visible;
}
.ui-popup > .ui-header {
	border-top-width: 0;
}
.ui-popup > .ui-footer {
	border-bottom-width: 0;
}
.ui-popup > p,
.ui-popup > h1,
.ui-popup > h2,
.ui-popup > h3,
.ui-popup > h4,
.ui-popup > h5,
.ui-popup > h6 {
	margin: .5em .4375em;
}
.ui-popup > span {
	display: block;
	margin: .5em .4375em;
}
.ui-popup-container .ui-content > p,
.ui-popup-container .ui-content > h1,
.ui-popup-container .ui-content > h2,
.ui-popup-container .ui-content > h3,
.ui-popup-container .ui-content > h4,
.ui-popup-container .ui-content > h5,
.ui-popup-container .ui-content > h6 {
	margin: .5em 0;
}
.ui-popup-container .ui-content > span {
	margin: 0;
}
.ui-popup-container .ui-content > p:first-child,
.ui-popup-container .ui-content > h1:first-child,
.ui-popup-container .ui-content > h2:first-child,
.ui-popup-container .ui-content > h3:first-child,
.ui-popup-container .ui-content > h4:first-child,
.ui-popup-container .ui-content > h5:first-child,
.ui-popup-container .ui-content > h6:first-child {
	margin-top: 0;
}
.ui-popup-container .ui-content > p:last-child,
.ui-popup-container .ui-content > h1:last-child,
.ui-popup-container .ui-content > h2:last-child,
.ui-popup-container .ui-content > h3:last-child,
.ui-popup-container .ui-content > h4:last-child,
.ui-popup-container .ui-content > h5:last-child,
.ui-popup-container .ui-content > h6:last-child {
	margin-bottom: 0;
}
.ui-popup > img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}
.ui-popup:not(.ui-content) > img:only-child,
.ui-popup:not(.ui-content) > .ui-btn-left:first-child + img:last-child,
.ui-popup:not(.ui-content) > .ui-btn-right:first-child + img:last-child {
	border-radius: inherit;
}
.ui-popup iframe {
	vertical-align: middle;
}
.ui-popup > .ui-btn-left,
.ui-popup > .ui-btn-right {
	position: absolute; 
	top: -11px;
	margin: 0;
	z-index: 1101;
}
.ui-popup > .ui-btn-left {
	left: -11px;
}
.ui-popup > .ui-btn-right {
	right: -11px;
}
/* Dimensions related to the popup arrow
-----------------------------------------------------------------------------------------------------------*/
/* desired triangle height: 10px */
/**
 * guide for the arrow - its width, height, and offset are theme-dependent and
 * should be expessed as left, right, top, bottom, so that the element bearing
 * such a class becomes stretched inside its parent position: relative element.
 * The left/top/right/bottom specified below should reflect the corresponding
 * border radii and so it leaves room for the shadow:
 *     ..--------------------..
 *   ."        ^ top           ".
 *  /          v                 \
 * |     +------------------+     |
 * |     |                  |     |
 * | left|                  |right|
 * |<--->|                  |<--->|
 * |     +------------------+     |
 *  \          ^                 /
 *   `.        v bottom        .'
 *     ""--------------------""
 * The idea is that the top/left of the arrow container box does not move to a
 * coordinate smaller than the top/left of the guide and the right/bottom of
 * the arrow container box does not move to a coordinate larger than the
 * bottom/right of the guide. This will help us avoid the following situation:
 *        ..--------------------..
 *      ."        ^ top           ".
 *   /|/          v                 \
 *  / |     +------------------+     |
 *  \ |     |                  |     |
 *   \| left|                  |right|
 *    |<--->|                  |<--->|
 *    |     +------------------+     |
 *     \          ^                 /
 *      `.        v bottom        .'
 *        ""--------------------""
 * The arrow should not receive a top/left coordinate such that it is too close
 * to one of the corners, because then at first the shadow of the arrow and,
 * given a coordinate even closer to the corner, even the body of the arrow will
 * "stick out" of the corner of the popup. The guide provides a hint to the
 * arrow positioning code as to which range of values is acceptable for the
 * arrow container's top/left coordinate.
 **/
.ui-popup-arrow-container {
	width: 20px;
	height: 20px;
}
/* aside from the "infinities" (-1000,2000), triangle height is used */
.ui-popup-arrow-container.ui-popup-arrow-l {
	left: -10px;
	clip: rect(-1000px,10px,2000px,-1000px);
}
.ui-popup-arrow-container.ui-popup-arrow-t {
	top: -10px;
	clip: rect(-1000px,2000px,10px,-1000px);
}
.ui-popup-arrow-container.ui-popup-arrow-r {
	right: -10px;
	clip: rect(-1000px,2000px,2000px,10px);
}
.ui-popup-arrow-container.ui-popup-arrow-b {
	bottom: -10px;
	clip: rect(10px,2000px,1000px,-1000px);
}
/**
 * For each side, the arrow is twice the desired size and its corner is aligned
 * with the edge of the container:
 *                                           
 *           /\         /\                +----+	     /\
 *          /  \       /  \ 					    | /\ |top   /  \
 *      +----+  \     /  +----+       +-->|/  \|     /    \
 *  left| /  |   \   /   |  \ |right  |   |    |    /      \
 *      |/   |    \ /    |   \| 			|  /|    |\  /        \
 *      |\   |    / \    |   /| 			| / +----+ \ \ +----+ /
 *      | \  |   /   \   |  / |       | \        /  \|    |/
 *      +----+  /     \  +----+       |  \      /    |    |
 *       ^  \  /       \  /  ^        |   \    /  +->|\  /|
 *       |   \/         \/   |        |    \  /   |  | \/ |bottom
 *       |                   |        |     \/    |  +----+
 *       +-------------------+--------+-----------+
 *                           |
 *                    arrow container
 *                     (clips arrow)
 **/
.ui-popup-arrow-container .ui-popup-arrow {
	/* (4*desired triangle height)/sqrt(2) - does not account for border - centred within the outer rectangle */
	width: 28.284271247px;
	height: 28.284271247px;
	border-width: 1px;
	border-style: solid;
}
.ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow {
	left: -4.142135623px;
	top: 5.857864376px;
}
.ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow {
	left: -4.142135623px;
	top: -14.142135623px;
}
.ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow {
	left: 5.857864376px;
	top: -4.142135623px;
}
.ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow {
	left: -14.142135623px;
	top: -4.142135623px;
}
/* Fix rotation center for oldIE - see http://www.useragentman.com/IETransformsTranslator/ */
.ui-popup-arrow-container.ui-popup-arrow-t.ie .ui-popup-arrow {
    margin-left: -5.857864376269049px;
    margin-top: -7.0710678118654755px;
}
.ui-popup-arrow-container.ui-popup-arrow-b.ie .ui-popup-arrow {
    margin-left: -5.857864376269049px;
    margin-top: -4.142135623730951px;
}
 
.ui-popup-arrow-container.ui-popup-arrow-l.ie .ui-popup-arrow {
    margin-left: -7.0710678118654755px;
    margin-top: -5.857864376269049px;
}
.ui-popup-arrow-container.ui-popup-arrow-r.ie .ui-popup-arrow {
    margin-left: -4.142135623730951px;
    margin-top: -5.857864376269049px;
}
.ui-popup-arrow-background {
	/* desired triangle height is used here */
	width: 20px;
	height: 20px;
}
.ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow-background
.ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow-background {
	background-position: 0 10px;
}
.ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow-background,
.ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow-background {
	background-position: 10px 0;
}
/* structure */
.ui-popup > .ui-popup-arrow-guide {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	visibility: hidden;
}
.ui-popup-arrow-container {
	position: absolute;
}
.ui-popup-arrow {
	transform: rotate(45deg);
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
}
.ui-popup-arrow-container.ie .ui-popup-arrow {
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
	filter: progid:DXImageTransform.Microsoft.Matrix(
	      	M11=0.7071067811865474,
        	M12=-0.7071067811865477,
        	M21=0.7071067811865477,
        	M22=0.7071067811865474,
        	SizingMethod='auto expand');
}
.ui-popup-arrow-background {
	position: absolute;
	border: 0;
}
.ui-popup-arrow-container.ie .ui-popup-arrow-background {
	background: none;
}
.ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow-background,
.ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow-background {
	/* Undo rotation and reflect in x axis */
	transform: rotate(-45deg) scale(1, -1);
}
.ui-popup-arrow-container.ui-popup-arrow-t.ie .ui-popup-arrow-background,
.ui-popup-arrow-container.ui-popup-arrow-b.ie .ui-popup-arrow-background {
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=-0.7071067811865467, M21=-0.7071067811865467, M22=-0.7071067811865483, SizingMethod='auto expand')";
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.7071067811865483,
            M12=-0.7071067811865467,
            M21=-0.7071067811865467,
            M22=-0.7071067811865483,
            SizingMethod='auto expand');
}
.ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow-background,
.ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow-background {
	/* Undo rotation and reflect in y axis */
	transform: rotate(-45deg) scale(-1, 1);
}
.ui-popup-arrow-container.ui-popup-arrow-l.ie .ui-popup-arrow-background,
.ui-popup-arrow-container.ui-popup-arrow-r.ie .ui-popup-arrow-background {
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865483, M12=0.7071067811865467, M21=0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=-0.7071067811865483,
            M12=0.7071067811865467,
            M21=0.7071067811865467,
            M22=0.7071067811865483,
            SizingMethod='auto expand');
}
.ui-checkbox,
.ui-radio {
	margin: .5em 0;
	position: relative;
}
.ui-checkbox .ui-btn,
.ui-radio .ui-btn {
	margin: 0;
	text-align: left;
	white-space: normal; /* Nowrap + ellipsis doesn't work on label. Issue #1419. */
	z-index: 2;
}
.ui-controlgroup .ui-checkbox .ui-btn.ui-focus,
.ui-controlgroup .ui-radio .ui-btn.ui-focus {
	z-index: 3;
}
.ui-checkbox .ui-btn-icon-top,
.ui-radio .ui-btn-icon-top,
.ui-checkbox .ui-btn-icon-bottom,
.ui-radio .ui-btn-icon-bottom {
	text-align: center;
}
.ui-controlgroup-horizontal .ui-checkbox .ui-btn:after,
.ui-controlgroup-horizontal .ui-radio .ui-btn:after {
	content: none;
	display: none;
}
/* Native input positioning */
.ui-checkbox input,
.ui-radio input {
	position: absolute;
	left: .466em;
	top: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 0;
	outline: 0 !important;
	z-index: 1;
}
.ui-controlgroup-horizontal .ui-checkbox input,
.ui-controlgroup-horizontal .ui-radio input {
	left: 50%;
	margin-left: -9px;
}
.ui-checkbox input:disabled,
.ui-radio input:disabled {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.ui-select {
	margin-top: .5em;
	margin-bottom: .5em; /* no shorthand for margin because it would override margin-right for inline selects */
	position: relative;
}
.ui-select > select {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.ui-select .ui-btn {
	margin: 0;
	opacity: 1; /* Fixes #2588: When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select (including "inherit") without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
}
.ui-select .ui-btn select {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 1.5em;
	min-height: 100%;
	height: 3em;
	max-height: 100%;
	outline: 0;
	border-radius: inherit;	
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	filter: Alpha(Opacity=0);
	opacity: 0;
	z-index: 2;
}
@-moz-document url-prefix() {
	.ui-select .ui-btn select {
		opacity: 0.0001;
	}
}
/* Display none because of issues with IE/WP's filter alpha opacity */
.ui-select .ui-state-disabled select {
	display: none;
}
/* Because we add all classes of the select and option elements to the span... */ 
.ui-select span.ui-state-disabled {
	filter: Alpha(Opacity=100);
	opacity: 1;
}
.ui-select .ui-btn.ui-select-nativeonly {
	border-radius: 0;
	border: 0;
}
.ui-select .ui-btn.ui-select-nativeonly select {
	opacity: 1;
	text-indent: 0;
	display: block;
}
/* ui-li-count is styled in the listview CSS. We set padding and offset here because select supports icon position while listview doesn't. */
.ui-select .ui-li-has-count.ui-btn {
	padding-right: 2.8125em;
}
.ui-select .ui-li-has-count.ui-btn-icon-right {
	padding-right: 4.6875em;
}
.ui-select .ui-btn-icon-right .ui-li-count {
	right: 3.2em;
}
/* We set the rules for the span as well to fix an issue on Chrome with text-overflow ellipsis for the button in combination with text-align center. */
.ui-select .ui-btn > span:not(.ui-li-count) {
	display: block;
	text-overflow: ellipsis;
	overflow: hidden !important;
	white-space: nowrap;
}
.ui-selectmenu.ui-popup {
	min-width: 11em;
}
.ui-selectmenu .ui-dialog-contain {
	overflow: hidden;
}
.ui-selectmenu .ui-header {
	margin: 0;
	padding: 0;
	border-width: 0;
}
.ui-selectmenu.ui-dialog .ui-header {
	z-index: 1;
	position: relative;
}
.ui-selectmenu.ui-popup .ui-header {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button.  this shim's content in there */
.ui-selectmenu.ui-popup .ui-header h1:after {
	content: '.';
	visibility: hidden;
}
.ui-selectmenu .ui-header .ui-title {
	margin: 0 2.875em;
}
.ui-selectmenu.ui-dialog .ui-content {
	overflow: visible;
	z-index: 1;
}
.ui-selectmenu .ui-selectmenu-list {
	margin: 0;
	border-radius: inherit;	
}
.ui-header:not(.ui-screen-hidden) + .ui-selectmenu-list {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}
.ui-header.ui-screen-hidden + .ui-selectmenu-list li.ui-first-child .ui-btn {
	border-top-width: 0;
}
.ui-selectmenu .ui-selectmenu-list li.ui-last-child .ui-btn {
	border-bottom-width: 0;
}
.ui-selectmenu .ui-btn.ui-li-divider {
	cursor: default;
}
.ui-selectmenu .ui-selectmenu-placeholder {
	display: none;
}
.ui-listview,
.ui-listview > li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ui-content .ui-listview,
.ui-panel-inner > .ui-listview {
	margin: -1em;
}
.ui-content .ui-listview-inset,
.ui-panel-inner > .ui-listview-inset {
	margin: 1em 0;
}
.ui-collapsible-content > .ui-listview {
	margin: -.5em -1em;
}
.ui-collapsible-content > .ui-listview-inset {
	margin: .5em 0;
}
.ui-listview > li {
	display: block;
	position: relative;
	overflow: visible;
}
.ui-listview > .ui-li-static,
.ui-listview > .ui-li-divider,
.ui-listview > li > a.ui-btn {
	margin: 0;
	display: block;
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.ui-listview > li > .ui-btn:focus {
	z-index: 1;
}
.ui-listview > .ui-li-static,
.ui-listview > .ui-li-divider,
.ui-listview > li > a.ui-btn {
	border-width: 1px 0 0 0;
	border-style: solid;
}
.ui-listview-inset > .ui-li-static,
.ui-listview-inset > .ui-li-divider,
.ui-listview-inset > li > a.ui-btn {
	border-right-width: 1px;
	border-left-width: 1px;
}
.ui-listview > .ui-li-static.ui-last-child,
.ui-listview > .ui-li-divider.ui-last-child,
.ui-listview > li.ui-last-child > a.ui-btn {
	border-bottom-width: 1px;
}
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > li.ui-first-child,
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > li.ui-first-child > a.ui-btn {
	border-top-width: 0;
}
.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child,
.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child > a.ui-btn {
	border-bottom-width: 0;
}
.ui-listview > li.ui-first-child,
.ui-listview > li.ui-first-child > a.ui-btn {	
	border-top-right-radius: inherit;
	border-top-left-radius: inherit;
}
.ui-listview > li.ui-last-child,
.ui-listview > li.ui-last-child > a.ui-btn {
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
}
.ui-listview > li.ui-li-has-alt > a.ui-btn {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.ui-listview > li.ui-first-child > a.ui-btn + a.ui-btn {	
	border-top-left-radius: 0;
	border-top-right-radius: inherit;
}
.ui-listview > li.ui-last-child > a.ui-btn + a.ui-btn {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: inherit;
}
.ui-listview > li.ui-first-child img:first-child:not(.ui-li-icon) {
	border-top-left-radius: inherit;	
}
.ui-listview > li.ui-last-child img:first-child:not(.ui-li-icon) {
	border-bottom-left-radius: inherit;	
}
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) {
	border-radius: inherit;	
}
.ui-listview > .ui-li-static {
	padding: .7em 1em;
}
.ui-listview > .ui-li-divider {
	padding: .5em 1.143em;
	font-size: 14px;
	font-weight: bold;
	cursor: default;
	outline: 0; /* Dividers in custom selectmenus have tabindex */
}
.ui-listview > .ui-li-has-count > .ui-btn,
.ui-listview > .ui-li-static.ui-li-has-count,
.ui-listview > .ui-li-divider.ui-li-has-count {
	padding-right: 2.8125em;
}
.ui-listview > .ui-li-has-count > .ui-btn-icon-right {
	padding-right: 4.6875em;
}
.ui-listview > .ui-li-has-thumb > .ui-btn,
.ui-listview > .ui-li-static.ui-li-has-thumb {
	min-height: 3.625em;
	padding-left: 6.25em;
}
/* ui-li-has-icon deprecated in 1.4. TODO: remove in 1.5 */
.ui-listview > .ui-li-has-icon > .ui-btn,
.ui-listview > .ui-li-static.ui-li-has-icon {
	min-height: 1.25em;
	padding-left: 2.5em;
}
/* Used by both listview and custom multiple select button */
.ui-li-count {
	position: absolute;
	font-size: 12.5px;
	font-weight: bold;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	padding: 0 .48em;
	line-height: 1.6em;
	min-height: 1.6em;
	min-width: .64em;
	right: .8em;
	top: 50%;
	margin-top: -.88em;
}
.ui-listview .ui-btn-icon-right .ui-li-count {
	right: 3.2em;
}
.ui-listview .ui-li-has-thumb > img:first-child,
.ui-listview .ui-li-has-thumb > .ui-btn > img:first-child,
.ui-listview .ui-li-has-thumb .ui-li-thumb {
	position: absolute;
	left: 0;
	top: 0;
	max-height: 5em;
	max-width: 5em;
}
/* ui-li-has-icon deprecated in 1.4. TODO: remove in 1.5 */
.ui-listview > .ui-li-has-icon > img:first-child,
.ui-listview > .ui-li-has-icon > .ui-btn > img:first-child {
	position: absolute;
	left: .625em;
	top: .9em;
	max-height: 1em;
	max-width: 1em;
}
.ui-listview > li h1,
.ui-listview > li h2,
.ui-listview > li h3,
.ui-listview > li h4,
.ui-listview > li h5,
.ui-listview > li h6 {
	font-size: 1em;
	font-weight: bold;
	display: block;
	margin: .45em 0;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.ui-listview > li p {
	font-size: .75em;
	font-weight: normal;
	display: block;
	margin: .6em 0;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.ui-listview .ui-li-aside {
	position: absolute;
	top: 1em;
	right: 3.333em;
	margin: 0;
	text-align: right;
}
.ui-listview > li.ui-li-has-alt > .ui-btn {
	margin-right: 2.5em;
	border-right-width: 0;
}
.ui-listview > li.ui-li-has-alt > .ui-btn + .ui-btn {
	position: absolute;
	width: 2.5em;
	height: 100%;
	min-height: auto;
	box-sizing: border-box;
	border-left-width: 1px;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	z-index: 2;
}
.ui-listview-inset > li.ui-li-has-alt > .ui-btn + .ui-btn {
	border-right-width: 1px;
}
.ui-listview > li.ui-li-has-alt > .ui-btn + .ui-btn:focus {
	z-index: 3;
}
ol.ui-listview,
ol.ui-listview > .ui-li-divider {
	counter-reset: listnumbering;
}
ol.ui-listview > li > .ui-btn,
ol.ui-listview > li.ui-li-static {
	vertical-align: middle;
}
ol.ui-listview > li > .ui-btn:before,
ol.ui-listview > li.ui-li-static:before,
ol.ui-listview > li.ui-field-contain > label:before,
ol.ui-listview > li.ui-field-contain > .ui-controlgroup-label:before {
	display: inline-block;
	font-size: .9em;
	font-weight: normal;
	padding-right: .3em;
	min-width: 1.4em;
	line-height: 1.5;
	vertical-align: middle;
	counter-increment: listnumbering;
	content: counter(listnumbering) ".";
}
ol.ui-listview > li.ui-field-contain:before {
	content: none;
	display: none;
}
ol.ui-listview > li h1:first-child,
ol.ui-listview > li h2:first-child,
ol.ui-listview > li h3:first-child,
ol.ui-listview > li h4:first-child,
ol.ui-listview > li h5:first-child,
ol.ui-listview > li h6:first-child,
ol.ui-listview > li p:first-child,
ol.ui-listview > li img:first-child + * {
	display: inline-block;
	vertical-align: middle;
}
ol.ui-listview > li h1:first-child ~ *,
ol.ui-listview > li h2:first-child ~ *,
ol.ui-listview > li h3:first-child ~ *,
ol.ui-listview > li h4:first-child ~ *,
ol.ui-listview > li h5:first-child ~ *,
ol.ui-listview > li h6:first-child ~ *,
ol.ui-listview > li p:first-child ~ *,
ol.ui-listview > li img:first-child + * ~ * {
	margin-top: 0;
	text-indent: 2.04em; /* (1.4em + .3em) * .9em / .75em */
}
html .ui-filterable + .ui-listview,
html .ui-filterable.ui-listview {
	margin-top: .5em;
}
.ui-collapsible-content > form.ui-filterable {
	margin-top: -.5em;
}
.ui-collapsible-content > .ui-input-search.ui-filterable {
	margin-top: 0;
}
.ui-collapsible-content > .ui-filterable + .ui-listview:not(.ui-listview-inset) > li.ui-first-child,
.ui-collapsible-content > .ui-filterable + .ui-listview:not(.ui-listview-inset) > li.ui-first-child > a.ui-btn,
.ui-collapsible-content > .ui-filterable.ui-listview:not(.ui-listview-inset) > li.ui-first-child,
.ui-collapsible-content > .ui-filterable.ui-listview:not(.ui-listview-inset) > li.ui-first-child > a.ui-btn {
	border-top-width: 1px;
}
div.ui-slider {
	height: 30px;
	margin: .5em 0;
	padding: 0;
	-ms-touch-action: pan-y pinch-zoom double-tap-zoom;
}
div.ui-slider:before,
div.ui-slider:after {
	content: "";
	display: table;
}
div.ui-slider:after {
	clear: both;
}
input.ui-slider-input {
	display: block;
	float: left;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
	padding: 4px;
	width: 40px;
	height: 20px;
	line-height: 20px;
	border-width: 1px;
	border-style: solid;
	outline: 0;
	text-align: center;
	vertical-align: text-bottom;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
}
.ui-slider-input::-webkit-outer-spin-button,
.ui-slider-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.ui-slider-track {
	position: relative;
	overflow: visible;
	border-width: 1px;
	border-style: solid;
	height: 15px;
	margin: 0 15px 0 68px;
	top: 6px;
}
.ui-slider-track.ui-mini {
	height: 12px;
	top: 8px;
}
.ui-slider-track .ui-slider-bg {
	height: 100%;
}
/* High level of specificity to override button margins in grids */
.ui-slider-track .ui-btn.ui-slider-handle {
	position: absolute;
	z-index: 1;
	top: 50%;
	width: 28px;
	height: 28px;
	margin: -15px 0 0 -15px;
	outline: 0;
	padding: 0;
}
.ui-slider-track.ui-mini .ui-slider-handle {
	height: 14px;
	width: 14px;
	margin: -8px 0 0 -8px;
}
select.ui-slider-switch {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
div.ui-slider-switch {
	display: inline-block;
	height: 32px;
	width: 5.8em;
	top: 0;
}
/* reset the clearfix */
div.ui-slider-switch:before,
div.ui-slider-switch:after {
	display: none;
	clear: none;
}
div.ui-slider-switch.ui-mini {
	height: 29px;
	top: 0;
}
.ui-slider-inneroffset {
	margin: 0 16px;
	position: relative;
	z-index: 1;
}
.ui-slider-switch.ui-mini .ui-slider-inneroffset {
	margin: 0 15px 0 14px;
}
.ui-slider-switch .ui-btn.ui-slider-handle {
	margin: 1px 0 0 -15px;
}
.ui-slider-switch.ui-mini .ui-slider-handle {
	width: 25px;
	height: 25px;
	margin: 1px 0 0 -13px;
	padding: 0;
}
.ui-slider-handle-snapping {
	transition: left 70ms linear;
}
.ui-slider-switch .ui-slider-label {
	position: absolute;
	text-align: center;
	width: 100%;
	overflow: hidden;
	font-size: 16px;
	top: 0;
	line-height: 2;
	min-height: 100%;
	white-space: nowrap;
	cursor: pointer;
}
.ui-slider-switch.ui-mini .ui-slider-label {
	font-size: 14px;
}
.ui-slider-switch .ui-slider-label-a {
	z-index: 1;
	left: 0;
	text-indent: -1.5em;
}
.ui-slider-switch .ui-slider-label-b {
	z-index: 0;
	right: 0;
	text-indent: 1.5em;
}
/* The corner radii for ui-slider-switch/track can be specified in theme CSS. The bg and handle inherits. */
.ui-slider-track .ui-slider-bg,
.ui-slider-switch .ui-slider-label,
.ui-slider-switch .ui-slider-inneroffset,
.ui-slider-handle {
	border-radius: inherit;
}
.ui-field-contain div.ui-slider-switch {
	margin: 0;
}
@media (min-width: 28em) {
	/* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
	.ui-field-contain div.ui-slider-switch,
	.ui-field-contain.ui-hide-label div.ui-slider-switch {
		display: inline-block;
		width: 5.8em;
	}
}	
/* slider tooltip
-----------------------------------------------------------------------------------------------------------*/
.ui-slider-popup {
	width: 64px;
	height: 64px;
	font-size: 36px;
	padding-top: 14px;
	opacity: 0.8;
	position: absolute !important;
	text-align: center;
	z-index: 100;
}
.ui-slider-track .ui-btn.ui-slider-handle {
	font-size: .9em;
	line-height: 30px;
}
.ui-rangeslider {
	margin: .5em 0;
}
.ui-rangeslider:before,
.ui-rangeslider:after {
	content: "";
	display: table;
}
.ui-rangeslider:after {
	clear: both;
}
.ui-rangeslider .ui-slider-input.ui-rangeslider-last {
	float: right;
}
.ui-rangeslider .ui-rangeslider-sliders {
	position: relative;
	overflow: visible;
	height: 30px;
	margin: 0 68px;
}
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track {
	position: absolute;
	top: 6px;
	right: 0;
	left: 0;
	margin: 0;
}
.ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track {
	top: 8px;
}
.ui-rangeslider .ui-slider-track:first-child .ui-slider-bg {
	display: none;
}
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
	background-color: transparent;
	background: none;
	border-width: 0;
	height: 0;
}
/* this makes ie6 and ie7 set height to 0 to fix z-index problem */
html >/**/body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
	height: 15px;
	border-width: 1px;
}
html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:first-child {
	height: 12px;
}
/* Hide the second label (the first is moved outside the div) */
div.ui-rangeslider label {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.ui-field-contain .ui-rangeslider input.ui-slider-input,
.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input,
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders,
.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
	margin-top: 0;
	margin-bottom: 0;
}
.ui-input-text,
.ui-input-search {
	margin: .5em 0;
	border-width: 1px;
	border-style: solid;
}
.ui-input-text input,
.ui-input-search input,
textarea.ui-input-text {
	padding: .4em;
	line-height: 1.4em;
	display: block;
	width: 100%;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	outline: 0;
}
.ui-input-text input,
.ui-input-search input {
	margin: 0;
	min-height: 2.2em;
	text-align: left; /* Opera aligns type="date" right by default */
	border: 0;
	background: transparent none;
	-webkit-appearance: none;
	border-radius: inherit;
}
textarea.ui-input-text {
	overflow: auto;
	resize: vertical;
}
.ui-mini .ui-input-text input,
.ui-mini .ui-input-search input,
.ui-input-text.ui-mini input,
.ui-input-search.ui-mini input,
.ui-mini textarea.ui-input-text,
textarea.ui-mini {
	font-size: 14px;
}
/* Same margin for mini textareas as other mini sized widgets (12.5/14 * 0.5em) */
.ui-mini textarea.ui-input-text,
textarea.ui-mini {
	margin: .446em 0;
}
.ui-input-has-clear,
.ui-input-search {
	position: relative;
}
/* Padding on the div instead of input because of browser spinners etc. */
.ui-input-has-clear {
	padding-right: 2.25em;
}
.ui-input-has-clear input {
	padding-right: 0;
	/* Autofill on Chrome has bg color so we unset corners right as well. */
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
/* Search icon */
.ui-input-search input {
	padding-left: 1.75em;
}
.ui-input-search:after {
	position: absolute;
	left: .3125em;
	top: 50%;
	margin-top: -7px;
	content: "";
	background-position: center center;
	background-repeat: no-repeat;
	width: 14px;
	height: 14px;
	filter: Alpha(Opacity=50);
	opacity: .5;
}
.ui-input-search.ui-input-has-clear .ui-btn.ui-input-clear,
.ui-input-text.ui-input-has-clear .ui-btn.ui-input-clear {
	position: absolute;
	right: 0;
	top: 50%;
	margin: -14px .3125em 0;
	border: 0;
	background-color: transparent;
}
.ui-input-search .ui-input-clear-hidden,
.ui-input-text .ui-input-clear-hidden {
	display: none;
}
/* Resolves issue #5166: Added to support issue introduced in Firefox 15. We can likely remove this in the future. */
.ui-input-text input::-moz-placeholder,
.ui-input-search input::-moz-placeholder,
textarea.ui-input-text::-moz-placeholder {
	color: #aaa;
}
/* Same for IE10 */
.ui-input-text input:-ms-input-placeholder,
.ui-input-search input:-ms-input-placeholder,
textarea.ui-input-text:-ms-input-placeholder {
	color: #aaa;
}
/* Resolves issue #5131: Width of textinput depends on its type,
for Android 4.1 */
.ui-input-text input[type=number]::-webkit-outer-spin-button {
	margin: 0;
}
/* Resolves issue #5756: Textinput in IE10 has a default clear button */
.ui-input-text input::-ms-clear,
.ui-input-search input::-ms-clear {
	display: none;
}
.ui-input-text input:focus,
.ui-input-search input:focus {
	box-shadow: none;
}
.ui-textinput-autogrow-resize {
	transition: height 0.25s;
}
.ui-flipswitch {
	display: inline-block;
	vertical-align: middle;
	width: 5.875em; /* Override this and padding-left in next rule if you use labels other than "on/off" and need more space */
	height: 1.875em;
	border-width: 1px;
	border-style: solid;
	margin: .5em 0;
	overflow: hidden;
	transition-property: padding, width, background-color, color, border-color;
	transition-duration: 100ms;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
}
.ui-flipswitch.ui-flipswitch-active {
	padding-left: 4em;  /* Override this and width in previous rule if you use labels other than "on/off" and need more space */
	width: 1.875em;
}
.ui-flipswitch-input {
	position: absolute;
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	border: 0;
	outline: 0;
	filter: Alpha(Opacity=0);
	opacity: 0;
}
.ui-flipswitch .ui-btn.ui-flipswitch-on,
.ui-flipswitch .ui-flipswitch-off {
	float: left;
	height: 1.75em;
	margin: .0625em;
	line-height: 1.65em;
}
.ui-flipswitch .ui-btn.ui-flipswitch-on {
	width: 1.75em;
	padding: 0;
	text-indent: -2.6em; /* Override this to center text if you use a label other than "on" */
	text-align: left;
	border-width: 1px;
	border-style: solid;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: inherit;
	overflow: visible;
	color: inherit;
	text-shadow: inherit;
}
.ui-flipswitch .ui-flipswitch-off {
	padding: 1px;
	text-indent: 1em; /* Override this to center text if you use a label other than "off" */
}
@media (min-width: 28em) {
	.ui-field-contain > label + .ui-flipswitch {
		display: inline-block;
		width: 5.875em; /* If you override the width for .ui-flipswitch you should repeat the same value here */
		-ms-box-sizing: content-box;
		box-sizing: content-box;
	}
	.ui-field-contain .ui-flipswitch.ui-flipswitch-active {
		width: 1.875em;
	}
}	
.ui-table {
	border: 0;
	border-collapse: collapse;
	padding: 0;
	width: 100%;
}
.ui-table th,
.ui-table td {
	line-height: 1.5em;
	text-align: left;
	padding: .4em .5em;
	vertical-align:top;
}
.ui-table th .ui-btn,
.ui-table td .ui-btn {
	line-height: normal;
}
.ui-table th {
	font-weight: bold;
}
.ui-table caption {
	text-align: left;
	margin-bottom: 1.4em;
	opacity: .5;
}
/*
 Styles for the table columntoggle mode
*/
.ui-table-columntoggle-btn {
	float: right;
	margin-bottom: .8em;
}
/* Remove top/bottom margins around the fieldcontain on check list */
.ui-table-columntoggle-popup fieldset {
	margin:0;
}
.ui-table-columntoggle {
	clear: both;
}
/* Hide all prioritized columns by default */
@media only all {
	th.ui-table-priority-6,
	td.ui-table-priority-6,
	th.ui-table-priority-5,
	td.ui-table-priority-5,
	th.ui-table-priority-4,
	td.ui-table-priority-4,
	th.ui-table-priority-3,
	td.ui-table-priority-3,
	th.ui-table-priority-2,
	td.ui-table-priority-2,
	th.ui-table-priority-1,
	td.ui-table-priority-1 {
		display: none;
	}
}
/* Preset breakpoints if ".ui-responsive" class added to table */
/* Show priority 1 at 320px (20em x 16px) */
@media screen and (min-width: 20em) {
	.ui-table-columntoggle.ui-responsive th.ui-table-priority-1,
	.ui-table-columntoggle.ui-responsive td.ui-table-priority-1 {
		display: table-cell;
	}
}
/* Show priority 2 at 480px (30em x 16px) */
@media screen and (min-width: 30em) {
	.ui-table-columntoggle.ui-responsive th.ui-table-priority-2,
	.ui-table-columntoggle.ui-responsive td.ui-table-priority-2 {
		display: table-cell;
	}
}
/* Show priority 3 at 640px (40em x 16px) */
@media screen and (min-width: 40em) {
	.ui-table-columntoggle.ui-responsive th.ui-table-priority-3,
	.ui-table-columntoggle.ui-responsive td.ui-table-priority-3 {
		display: table-cell;
	}
}
/* Show priority 4 at 800px (50em x 16px) */
@media screen and (min-width: 50em) {
	.ui-table-columntoggle.ui-responsive th.ui-table-priority-4,
	.ui-table-columntoggle.ui-responsive td.ui-table-priority-4 {
		display: table-cell;
	}
}
/* Show priority 5 at 960px (60em x 16px) */
@media screen and (min-width: 60em) {
	.ui-table-columntoggle.ui-responsive th.ui-table-priority-5,
	.ui-table-columntoggle.ui-responsive td.ui-table-priority-5 {
		display: table-cell;
	}
}
/* Show priority 6 at 1,120px (70em x 16px) */
@media screen and (min-width: 70em) {
	.ui-table-columntoggle.ui-responsive th.ui-table-priority-6,
	.ui-table-columntoggle.ui-responsive td.ui-table-priority-6 {
		display: table-cell;
	}
}
/* Unchecked manually: Always hide */
.ui-table-columntoggle th.ui-table-cell-hidden,
.ui-table-columntoggle td.ui-table-cell-hidden,
.ui-table-columntoggle.ui-responsive th.ui-table-cell-hidden,
.ui-table-columntoggle.ui-responsive td.ui-table-cell-hidden {
	display: none;
}
/* Checked manually: Always show */
.ui-table-columntoggle th.ui-table-cell-visible,
.ui-table-columntoggle td.ui-table-cell-visible,
.ui-table-columntoggle.ui-responsive th.ui-table-cell-visible,
.ui-table-columntoggle.ui-responsive td.ui-table-cell-visible {
	display: table-cell;
}
/*
 Styles for the table columntoggle mode
*/
.ui-table-reflow td .ui-table-cell-label,
.ui-table-reflow th .ui-table-cell-label { 
	display: none;
}
/* Mobile first styles: Begin with the stacked presentation at narrow widths */ 
@media only all {
	/* Hide the table headers */ 
	.ui-table-reflow thead td, 
	.ui-table-reflow thead th {
		display: none;
	}
	/* Show the table cells as a block level element */ 
	.ui-table-reflow td,
	.ui-table-reflow th { 
		text-align: left;
		display: block;
	}
	/* Add a fair amount of top margin to visually separate each row when stacked */  
	.ui-table-reflow tbody th {
		margin-top: 3em;
	}
	/* Make the label elements a percentage width */ 
	.ui-table-reflow td .ui-table-cell-label,
	.ui-table-reflow th .ui-table-cell-label { 
		padding: .4em; 
		min-width: 30%; 
		display: inline-block;
		margin: -.4em 1em -.4em -.4em;
	}
	/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */ 
	.ui-table-reflow th .ui-table-cell-label-top,
	.ui-table-reflow td .ui-table-cell-label-top {
		display: block;
		padding: .4em 0;
		margin: .4em 0;
		text-transform: uppercase;
		font-size: .9em;
		font-weight: normal;
	}
}
/* Breakpoint to show as a standard table at 560px (35em x 16px) or wider */ 
@media ( min-width: 35em ) {
	/* Fixes table rendering when switching between breakpoints in Safari <= 5. See https://github.com/jquery/jquery-mobile/issues/5380 */
	.ui-table-reflow.ui-responsive {
		display: table-row-group;
	}
	/* Show the table header rows */ 
	.ui-table-reflow.ui-responsive td,
	.ui-table-reflow.ui-responsive th,
	.ui-table-reflow.ui-responsive tbody th,
	.ui-table-reflow.ui-responsive tbody td,
	.ui-table-reflow.ui-responsive thead td,
	.ui-table-reflow.ui-responsive thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell */ 
	.ui-table-reflow.ui-responsive td .ui-table-cell-label,
	.ui-table-reflow.ui-responsive th .ui-table-cell-label { 
		display: none;
	}
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */ 
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/ 
@media ( max-width: 35em ) {
	.ui-table-reflow.ui-responsive td,
	.ui-table-reflow.ui-responsive th {
		width: 100%;
		box-sizing: border-box;
		float: left;
		clear: left;
	}
}
/* Panel */
.ui-panel {
	width: 17em;
	min-height: 100%;
	max-height: none;
	border-width: 0;
	position: absolute;
	top: 0;
	display: block;
}
.ui-panel-closed {
	width: 0;
	max-height: 100%;
	overflow: hidden;
	visibility: hidden;
}
.ui-panel-fixed {
	position: fixed;
	bottom: -1px; /* Fixes gap on Chrome for Android */
	padding-bottom: 1px;
}
.ui-panel-display-reveal {
	z-index: 1;
}
.ui-panel-display-push {
	z-index: 999;
}
.ui-panel-display-overlay {
	z-index: 1001; /* Fixed toolbars have z-index 1000 */
}
.ui-panel-inner {
	padding: 1em;
}
/* Container, page and wrapper */
.ui-panel-page-container {
	overflow-x: visible;
}
.ui-panel-page-container-themed .ui-page-active {
	background: none;
}
.ui-panel-wrapper {
	position: relative;
	min-height: inherit;
	border: 0;
	overflow-x: hidden;
	z-index: 999;
}
/* Fixed toolbars */
.ui-panel-fixed-toolbar {
	overflow-x: hidden;
}
/* Dismiss */
.ui-panel-dismiss {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 1002;
	display: none;
}
.ui-panel-dismiss-open {
	display: block;
}
/* Animate class is added to panel, wrapper and fixed toolbars */
.ui-panel-animate {
	transition: transform 300ms ease;
}
/* Fix for Windows Phone issue #6349: unset the transition for transforms in case of fixed toolbars. */
@media screen and ( max-device-width: 768px ) {
	.ui-page-header-fixed .ui-panel-animate.ui-panel-wrapper,
	.ui-page-footer-fixed .ui-panel-animate.ui-panel-wrapper,
	.ui-panel-animate.ui-panel-fixed-toolbar {
		-ms-transition: none;
	}
	/* We need a transitionend event ... */
	.ui-panel-animate.ui-panel-fixed-toolbar {
		-ms-transition: -ms-transform 1ms;
		-ms-transform: rotate(0deg);
	}
}
/* Hardware acceleration for smoother transitions on WebKit browsers */
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
}
/* Panel positioning (for overlay and push) */
/* Panel left closed */
.ui-panel-position-left {
	left: -17em;
}
/* Panel left closed animated */
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
	left: 0;
	transform: translate3d(-17em,0,0);
}
/* Panel left open */
.ui-panel-position-left.ui-panel-display-reveal, /* Unset "panel left closed" for reveal */
.ui-panel-open.ui-panel-position-left {
	left: 0;
}
/* Panel left open animated */
.ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-push {
	transform: translate3d(0,0,0);
	-moz-transform: none;
}
/* Panel right closed */
.ui-panel-position-right {
	right: -17em;
}
/* Panel right closed animated */
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
	right: 0;
	transform: translate3d(17em,0,0);
}
/* Panel right open */
.ui-panel-position-right.ui-panel-display-reveal, /* Unset "panel right closed" for reveal */
.ui-panel-position-right.ui-panel-open {
	right: 0;
}
/* Panel right open animated */
.ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-push {
	transform: translate3d(0,0,0);
	-moz-transform: none;
}
/* Wrapper and fixed toolbars positioning (for reveal and push) */
/* Panel left open */
.ui-panel-page-content-position-left {
	left: 17em;
	right: -17em;
}
/* Panel left open animated */
.ui-panel-animate.ui-panel-page-content-position-left {
	left: 0;
	right: 0;
	transform: translate3d(17em,0,0);
}
/* Panel right open */
.ui-panel-page-content-position-right {
	left: -17em;
	right: 17em;
}
/* Panel right open animated */
.ui-panel-animate.ui-panel-page-content-position-right {
	left: 0;
	right: 0;
	transform: translate3d(-17em,0,0);
}
/* Dismiss model open */
.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
	left: 17em;
}
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
	right: 17em;
}
/* Shadows and borders */
.ui-panel-display-reveal {
	box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-position-right.ui-panel-display-reveal {
	box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-display-overlay {
	box-shadow: 5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-position-right.ui-panel-display-overlay {
	box-shadow: -5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-open.ui-panel-position-left.ui-panel-display-push {
	border-right-width: 1px;
	margin-right: -1px;
}
.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
	margin-left: 1px;
	width: auto;
}
.ui-panel-open.ui-panel-position-right.ui-panel-display-push {
	border-left-width: 1px;
	margin-left: -1px;
}
.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
	margin-right: 1px;
	width: auto;
}
/* Responsive: wrap on wide viewports once open */
@media (min-width:55em) {
	.ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-left {
		margin-right: 17em;
	}
	.ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-right {
		margin-left: 17em;
	}
	.ui-responsive-panel .ui-panel-page-content-open {
		width: auto;	
	}
	.ui-responsive-panel .ui-panel-dismiss-display-push,
	.ui-responsive-panel.ui-page-active ~ .ui-panel-dismiss-display-push {
		display: none;
	}
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}

.ui-collapsible-heading .ui-btn {
	font-size: .9em;
}

.ui-btn-icon-notext:after {
	text-indent: 0px;
}

.ui-input-text {
	border: 2px solid #eee !important;
}

.ui-slider-input {
	border: 2px solid #eee !important;
}
/*!
* jQuery Mobile 1.4.0-rc.1
* Git HEAD hash: 4b6462bccfe0e4fc3337bd24f17c76c6b5cb0e62 <> Date: Thu Oct 24 2013 20:08:54 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
*/


/* Globals */
/* Font
-----------------------------------------------------------------------------------------------------------*/
html {
	font-size: 100%;
}
body,
input,
select,
textarea,
button,
.ui-btn {
	font-size: 0.94em;
	line-height: 1.3;
	font-family: var(--trebble-font),sans-serif;
	font-display: auto;
}
legend,
.ui-input-text input,
.ui-input-search input {
	color: inherit;
	text-shadow: inherit;
}

h3 {
	font-weight: normal;
}
/* Form labels (overrides font-weight bold in bars, and mini font-size) */
.ui-mobile label,
div.ui-controlgroup-label {
	font-weight: normal;
	font-size: 16px;
}
/* Separators
-----------------------------------------------------------------------------------------------------------*/
/* Field contain separator (< 28em) */
.ui-field-contain {
	/*
	border-bottom-color: #828282;
	border-bottom-color: rgba(0,0,0,.15);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	*/
}
/* Table opt-in classes: strokes between each row, and alternating row stripes */
/* Classes table-stroke and table-stripe are deprecated in 1.4. */
.table-stroke thead th,
.table-stripe thead th,
.table-stripe tbody tr:last-child {
	border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.table-stroke tbody th,
.table-stroke tbody td {
	border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
	border-bottom: 1px solid rgba(0,0,0,.05);
}
.table-stripe.table-stroke tbody tr:last-child th,
.table-stripe.table-stroke tbody tr:last-child td {
	border-bottom: 0;
}
.table-stripe tbody tr:nth-child(odd) td,
.table-stripe tbody tr:nth-child(odd) th {
	background-color: #eeeeee; /* non-RGBA fallback  */
	background-color: rgba(0,0,0,.04);
}
/* Buttons
-----------------------------------------------------------------------------------------------------------*/
.ui-btn,
label.ui-btn {
	font-weight: bold;
	border-width: 1px;
	border-style: solid;
}
.ui-btn:link {
	text-decoration: none !important;
}
.ui-btn-active {
	cursor: pointer;
}
/* Corner rounding
-----------------------------------------------------------------------------------------------------------*/
/* Class ui-btn-corner-all deprecated in 1.4 */
.ui-corner-all {
	border-radius: 						0em;
}
/* Buttons */
.ui-btn-corner-all,
.ui-btn.ui-corner-all,
/* Slider track */
.ui-slider-track.ui-corner-all,
/* Flipswitch */
.ui-flipswitch.ui-corner-all,
/* Count bubble */
.ui-li-count {
	border-radius: 						0em;
}
/* Icon-only buttons */
.ui-btn-icon-notext.ui-btn-corner-all,
.ui-btn-icon-notext.ui-corner-all {
	border-radius: 0em;
}
/* Radius clip workaround for cleaning up corner trapping */
.ui-btn-corner-all,
.ui-corner-all {
	-webkit-background-clip: padding;
	background-clip: padding-box;
}
/* Popup arrow */
.ui-popup.ui-corner-all > .ui-popup-arrow-guide {
	left: .6em;
	right: .6em;
	top: .6em;
	bottom: .6em;
}

/* Icons
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-icon-left:after,
.ui-btn-icon-right:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after,
.ui-btn-icon-notext:after {
	background-color: 					#666;
	background-color: 					rgba(0,0,0,.3);
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 0em;
}
/* Alt icons */
.ui-alt-icon.ui-btn:after,
.ui-alt-icon .ui-btn:after,
html .ui-alt-icon.ui-checkbox-off:after,
html .ui-alt-icon.ui-radio-off:after,
html .ui-alt-icon .ui-checkbox-off:after,
html .ui-alt-icon .ui-radio-off:after {
	background-color: 					#666;
	background-color: 					rgba(0,0,0,.15);
}
/* No disc */
.ui-nodisc-icon.ui-btn:after,
.ui-nodisc-icon .ui-btn:after {
	background-color: transparent;
}
/* Icon shadow */
.ui-shadow-icon.ui-btn:after,
.ui-shadow-icon .ui-btn:after {
	box-shadow: 0 1px 0 					rgba(255,255,255,.3);
}
/* Checkbox and radio */
.ui-btn.ui-checkbox-off:after,
.ui-btn.ui-checkbox-on:after,
.ui-btn.ui-radio-off:after,
.ui-btn.ui-radio-on:after {
	display: block;
	width: 18px;
	height: 18px;
	margin: -9px 2px 0 2px;
}
.ui-checkbox-off:after,
.ui-btn.ui-radio-off:after {
	filter: Alpha(Opacity=30);
	opacity: .3;
}
.ui-btn.ui-checkbox-off:after,
.ui-btn.ui-checkbox-on:after {
	border-radius: .0em;
}
.ui-radio .ui-btn.ui-radio-on:after {
	background-image: none;
	background-color: #fff;
	width: 8px;
	height: 8px;
	border-width: 5px;
	border-style: solid; 
}
.ui-alt-icon.ui-btn.ui-radio-on:after,
.ui-alt-icon .ui-btn.ui-radio-on:after {
	background-color: #000;
}
/* Loader */
.ui-icon-loading {
	background: url(c0efd0d52ee91747303f.gif);
	background-size: 2.875em 2.875em;
}

/* Disabled
-----------------------------------------------------------------------------------------------------------*/
/* Class ui-disabled deprecated in 1.4. :disabled not supported by IE8 so we use [disabled] */
.ui-disabled,
.ui-state-disabled,
button[disabled],
.ui-select .ui-btn.ui-state-disabled {
	filter: Alpha(Opacity=30);
	opacity: .3;
	cursor: default !important;
	pointer-events: none;
}
/* Focus state outline
-----------------------------------------------------------------------------------------------------------*/
.ui-btn:focus,
.ui-btn.ui-focus {
	outline: 0;
}
/* Unset box-shadow in browsers that don't do it right */
.ui-noboxshadow .ui-shadow,
.ui-noboxshadow .ui-shadow-inset,
.ui-noboxshadow .ui-overlay-shadow,
.ui-noboxshadow .ui-shadow-icon.ui-btn:after,
.ui-noboxshadow .ui-shadow-icon .ui-btn:after,
.ui-noboxshadow .ui-focus,
.ui-noboxshadow .ui-btn:focus,
.ui-noboxshadow  input:focus,
.ui-noboxshadow .ui-panel {
	box-shadow: none !important;
}
.ui-noboxshadow .ui-btn:focus,
.ui-noboxshadow .ui-focus {
	outline-width: 1px;
	outline-style: auto;
}

.ui-slider, .ui-slider-track {
	border: 0px;
}

.ui-slider-handle {
	border-radius: 0px;
}
html .ui-bar-a,html .ui-page-theme-a .ui-bar-inherit,html .ui-bar-a .ui-bar-inherit,html .ui-body-a .ui-bar-inherit,html body .ui-group-theme-a .ui-bar-inherit{background:#232323;border-color:#232323;color:#fff;font-weight:bold}
html .ui-bar-a{border-width:1px;border-style:solid}
html .ui-overlay-a,html .ui-page-theme-a,html .ui-page-theme-a .ui-panel-wrapper{background:#f9f9f9;border-color:#bbb;color:#333}
html .ui-body-a,html .ui-page-theme-a .ui-body-inherit,html .ui-bar-a .ui-body-inherit,html .ui-body-a .ui-body-inherit,html body .ui-group-theme-a .ui-body-inherit,html .ui-panel-page-container-a{background:#fff;border-color:#232323;color:#333}
html .ui-body-a{border-width:1px;border-style:solid}
html .ui-page-theme-a a,html .ui-bar-a a,html .ui-body-a a,html body .ui-group-theme-a a{color:#383838;font-weight:bold}
html .ui-page-theme-a a:visited,html .ui-bar-a a:visited,html .ui-body-a a:visited,html body .ui-group-theme-a a:visited{color:#383838}
html .ui-page-theme-a a:hover,html .ui-bar-a a:hover,html .ui-body-a a:hover,html body .ui-group-theme-a a:hover{color:#383838}
html .ui-page-theme-a a:active,html .ui-bar-a a:active,html .ui-body-a a:active,html body .ui-group-theme-a a:active{color:#383838}
html .ui-page-theme-a .ui-btn,html .ui-bar-a .ui-btn,html .ui-body-a .ui-btn,html body .ui-group-theme-a .ui-btn,html body .ui-btn.ui-btn-a,html .ui-page-theme-a .ui-btn:visited,html .ui-bar-a .ui-btn:visited,html .ui-body-a .ui-btn:visited,html body .ui-group-theme-a .ui-btn:visited,html body .ui-btn.ui-btn-a:visited{background:#232323;border-color:#232323;color:#fff}
html .ui-page-theme-a .ui-btn:hover,html .ui-bar-a .ui-btn:hover,html .ui-body-a .ui-btn:hover,html body .ui-group-theme-a .ui-btn:hover,html body .ui-btn.ui-btn-a:hover{background: var(--trebble-primary);border-color: var(--trebble-primary);color:#fff}
html .ui-page-theme-a .ui-btn:active,html .ui-bar-a .ui-btn:active,html .ui-body-a .ui-btn:active,html body .ui-group-theme-a .ui-btn:active,html body .ui-btn.ui-btn-a:active{background:#383838;border-color:#383838;color:#fff}
html .ui-page-theme-a .ui-btn.ui-btn-active,html .ui-bar-a .ui-btn.ui-btn-active,html .ui-body-a .ui-btn.ui-btn-active,html body .ui-group-theme-a .ui-btn.ui-btn-active,html body .ui-btn.ui-btn-a.ui-btn-active,html .ui-page-theme-a .ui-flipswitch-active,html .ui-bar-a .ui-flipswitch-active,html .ui-body-a .ui-flipswitch-active,html body .ui-group-theme-a .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,html .ui-page-theme-a .ui-slider-track .ui-btn-active,html .ui-bar-a .ui-slider-track .ui-btn-active,html .ui-body-a .ui-slider-track .ui-btn-active,html body .ui-group-theme-a .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-a .ui-btn-active{background-color:#383838;border-color:#383838;color:#fff}
html .ui-page-theme-a .ui-checkbox-on:after,html .ui-bar-a .ui-checkbox-on:after,html .ui-body-a .ui-checkbox-on:after,html body .ui-group-theme-a .ui-checkbox-on:after,html .ui-btn.ui-checkbox-on.ui-btn-a:after,html background-color: primary_color{border-color:#232323;color:#fff}
html .ui-page-theme-a .ui-radio-on:after,html .ui-bar-a .ui-radio-on:after,html .ui-body-a .ui-radio-on:after,html body .ui-group-theme-a .ui-radio-on:after,html .ui-btn.ui-radio-on.ui-btn-a:after{background-color:#232323;color:#fff}

html .ui-bar-b,html .ui-page-theme-b .ui-bar-inherit,html .ui-bar-b .ui-bar-inherit,html .ui-body-b .ui-bar-inherit,html body .ui-group-theme-b .ui-bar-inherit{background: var(--trebble-primary);border-color: var(--trebble-primary);color:#fff;font-weight:bold;/* background: -webkit-linear-gradient(left, #D72926 0%, #D86B28 130%); */}
html .ui-bar-b{border-width:1px;border-style:solid}
html .ui-overlay-b,html .ui-page-theme-b,html .ui-page-theme-b .ui-panel-wrapper{background:#f9f9f9;border-color:#bbb;color:#333}
html .ui-body-b,html .ui-page-theme-b .ui-body-inherit,html .ui-bar-b .ui-body-inherit,html .ui-body-b .ui-body-inherit,html body .ui-group-theme-b .ui-body-inherit,html .ui-panel-page-container-b{background:#fff;border-color:var(--trebble-primary);color:#333}
html .ui-body-b{border-width:1px;border-style:solid}
html .ui-page-theme-b a,html .ui-bar-b a,html .ui-body-b a,html body .ui-group-theme-b a{color:var(--trebble-primary);font-weight:bold}
html .ui-page-theme-b a:visited,html .ui-bar-b a:visited,html .ui-body-b a:visited,html body .ui-group-theme-b a:visited{color:var(--trebble-primary)}
html .ui-page-theme-b a:hover,html .ui-bar-b a:hover,html .ui-body-b a:hover,html body .ui-group-theme-b a:hover{color:var(--trebble-primary)}
html .ui-page-theme-b a:active,html .ui-bar-b a:active,html .ui-body-b a:active,html body .ui-group-theme-b a:active{color:var(--trebble-primary)}
html .ui-page-theme-b .ui-btn,html .ui-bar-b .ui-btn,html .ui-body-b .ui-btn,html body .ui-group-theme-b .ui-btn,html body .ui-btn.ui-btn-b,html .ui-page-theme-b .ui-btn:visited,html .ui-bar-b .ui-btn:visited,html .ui-body-b .ui-btn:visited,html body .ui-group-theme-b .ui-btn:visited,html body .ui-btn.ui-btn-b:visited{background:var(--trebble-primary);border-color:var(--trebble-primary);color:#fff}
/*html .ui-page-theme-b .ui-btn:hover,html .ui-bar-b .ui-btn:hover,html .ui-body-b .ui-btn:hover,html body .ui-group-theme-b .ui-btn:hover,html body .ui-btn.ui-btn-b:hover{background:var(--trebble-primary);border-color:var(--trebble-primary);color:#fff}*/
html .ui-page-theme-b .ui-btn:active,html .ui-bar-b .ui-btn:active,html .ui-body-b .ui-btn:active,html body .ui-group-theme-b .ui-btn:active,html body .ui-btn.ui-btn-b:active{background:var(--trebble-primary);border-color:var(--trebble-primary);color:#fff}
html .ui-page-theme-b .ui-btn.ui-btn-active,html .ui-bar-b .ui-btn.ui-btn-active,html .ui-body-b .ui-btn.ui-btn-active,html body .ui-group-theme-b .ui-btn.ui-btn-active,html body .ui-btn.ui-btn-b.ui-btn-active,html .ui-page-theme-b .ui-flipswitch-active,html .ui-bar-b .ui-flipswitch-active,html .ui-body-b .ui-flipswitch-active,html body .ui-group-theme-b .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-b.ui-flipswitch-active,html .ui-page-theme-b .ui-slider-track .ui-btn-active,html .ui-bar-b .ui-slider-track .ui-btn-active,html .ui-body-b .ui-slider-track .ui-btn-active,html body .ui-group-theme-b .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-b .ui-btn-active{background-color:var(--trebble-primary);border-color:var(--trebble-primary);color:#fff}
html .ui-page-theme-b .ui-checkbox-on:after,html .ui-bar-b .ui-checkbox-on:after,html .ui-body-b .ui-checkbox-on:after,html body .ui-group-theme-b .ui-checkbox-on:after,html .ui-btn.ui-checkbox-on.ui-btn-b:after,html background-color: primary_color{border-color:var(--trebble-primary);color:#fff}
html .ui-page-theme-b .ui-radio-on:after,html .ui-bar-b .ui-radio-on:after,html .ui-body-b .ui-radio-on:after,html body .ui-group-theme-b .ui-radio-on:after,html .ui-btn.ui-radio-on.ui-btn-b:after{background-color:var(--trebble-primary);color:#fff}

html .ui-bar-c,html .ui-page-theme-c .ui-bar-inherit,html .ui-bar-c .ui-bar-inherit,html .ui-body-c .ui-bar-inherit,html body .ui-group-theme-c .ui-bar-inherit{background:#f2f2f2;border-color:#f2f2f2;color:#000;font-weight:bold}
html .ui-bar-c{border-width:1px;border-style:solid}
html .ui-overlay-c,html .ui-page-theme-c,html .ui-page-theme-c .ui-panel-wrapper{background:#f9f9f9;border-color:#bbb;color:#333}
html .ui-body-c,html .ui-page-theme-c .ui-body-inherit,html .ui-bar-c .ui-body-inherit,html .ui-body-c .ui-body-inherit,html body .ui-group-theme-c .ui-body-inherit,html .ui-panel-page-container-c{background:#000;border-color:#f2f2f2;color:#333}
html .ui-body-c{border-width:1px;border-style:solid}
html .ui-page-theme-c a,html .ui-bar-c a,html .ui-body-c a,html body .ui-group-theme-c a{color:#eee;font-weight:bold}
html .ui-page-theme-c a:visited,html .ui-bar-c a:visited,html .ui-body-c a:visited,html body .ui-group-theme-c a:visited{color:#eee}
html .ui-page-theme-c a:hover,html .ui-bar-c a:hover,html .ui-body-c a:hover,html body .ui-group-theme-c a:hover{color:#eee}
html .ui-page-theme-c a:active,html .ui-bar-c a:active,html .ui-body-c a:active,html body .ui-group-theme-c a:active{color:#eee}
html .ui-page-theme-c .ui-btn,html .ui-bar-c .ui-btn,html .ui-body-c .ui-btn,html body .ui-group-theme-c .ui-btn,html body .ui-btn.ui-btn-c,html .ui-page-theme-c .ui-btn:visited,html .ui-bar-c .ui-btn:visited,html .ui-body-c .ui-btn:visited,html body .ui-group-theme-c .ui-btn:visited,html body .ui-btn.ui-btn-c:visited{background:#f2f2f2;border-color:#f2f2f2;color:#000}
html .ui-page-theme-c .ui-btn:hover,html .ui-bar-c .ui-btn:hover,html .ui-body-c .ui-btn:hover,html body .ui-group-theme-c .ui-btn:hover,html body .ui-btn.ui-btn-c:hover{background:#eee;border-color:#eee;color:#000}
html .ui-page-theme-c .ui-btn:active,html .ui-bar-c .ui-btn:active,html .ui-body-c .ui-btn:active,html body .ui-group-theme-c .ui-btn:active,html body .ui-btn.ui-btn-c:active{background:#eee;border-color:#eee;color:#000}
html .ui-page-theme-c .ui-btn.ui-btn-active,html .ui-bar-c .ui-btn.ui-btn-active,html .ui-body-c .ui-btn.ui-btn-active,html body .ui-group-theme-c .ui-btn.ui-btn-active,html body .ui-btn.ui-btn-c.ui-btn-active,html .ui-page-theme-c .ui-flipswitch-active,html .ui-bar-c .ui-flipswitch-active,html .ui-body-c .ui-flipswitch-active,html body .ui-group-theme-c .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-c.ui-flipswitch-active,html .ui-page-theme-c .ui-slider-track .ui-btn-active,html .ui-bar-c .ui-slider-track .ui-btn-active,html .ui-body-c .ui-slider-track .ui-btn-active,html body .ui-group-theme-c .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-c .ui-btn-active{background-color: #E0E0E0;border-color: #E0E0E0;color: #000;}
html .ui-page-theme-c .ui-checkbox-on:after,html .ui-bar-c .ui-checkbox-on:after,html .ui-body-c .ui-checkbox-on:after,html body .ui-group-theme-c .ui-checkbox-on:after,html .ui-btn.ui-checkbox-on.ui-btn-c:after,html background-color: primary_color{border-color:#f2f2f2;color:#000}
html .ui-page-theme-c .ui-radio-on:after,html .ui-bar-c .ui-radio-on:after,html .ui-body-c .ui-radio-on:after,html body .ui-group-theme-c .ui-radio-on:after,html .ui-btn.ui-radio-on.ui-btn-c:after{background-color:#f2f2f2;color:#000}

html .ui-bar-d,html .ui-page-theme-d .ui-bar-inherit,html .ui-bar-d .ui-bar-inherit,html .ui-body-d .ui-bar-inherit,html body .ui-group-theme-d .ui-bar-inherit{background:#b95752;border-color:#b95752;color:#fff;font-weight:bold}
html .ui-bar-d{border-width:1px;border-style:solid}
html .ui-overlay-d,html .ui-page-theme-d,html .ui-page-theme-d .ui-panel-wrapper{background:#f9f9f9;border-color:#bbb;color:#333}
html .ui-body-d,html .ui-page-theme-d .ui-body-inherit,html .ui-bar-d .ui-body-inherit,html .ui-body-d .ui-body-inherit,html body .ui-group-theme-d .ui-body-inherit,html .ui-panel-page-container-d{background:#fff;border-color:#b95752;color:#333}
html .ui-body-d{border-width:1px;border-style:solid}
html .ui-page-theme-d a,html .ui-bar-d a,html .ui-body-d a,html body .ui-group-theme-d a{color:#e76e66;font-weight:bold}
html .ui-page-theme-d a:visited,html .ui-bar-d a:visited,html .ui-body-d a:visited,html body .ui-group-theme-d a:visited{color:#e76e66}
html .ui-page-theme-d a:hover,html .ui-bar-d a:hover,html .ui-body-d a:hover,html body .ui-group-theme-d a:hover{color:#e76e66}
html .ui-page-theme-d a:active,html .ui-bar-d a:active,html .ui-body-d a:active,html body .ui-group-theme-d a:active{color:#e76e66}
html .ui-page-theme-d .ui-btn,html .ui-bar-d .ui-btn,html .ui-body-d .ui-btn,html body .ui-group-theme-d .ui-btn,html body .ui-btn.ui-btn-d,html .ui-page-theme-d .ui-btn:visited,html .ui-bar-d .ui-btn:visited,html .ui-body-d .ui-btn:visited,html body .ui-group-theme-d .ui-btn:visited,html body .ui-btn.ui-btn-d:visited{background:#b95752;border-color:#b95752;color:#fff}
html .ui-page-theme-d .ui-btn:hover,html .ui-bar-d .ui-btn:hover,html .ui-body-d .ui-btn:hover,html body .ui-group-theme-d .ui-btn:hover,html body .ui-btn.ui-btn-d:hover{background:#e76e66;border-color:#e76e66;color:#fff}
html .ui-page-theme-d .ui-btn:active,html .ui-bar-d .ui-btn:active,html .ui-body-d .ui-btn:active,html body .ui-group-theme-d .ui-btn:active,html body .ui-btn.ui-btn-d:active{background:#e76e66;border-color:#e76e66;color:#fff}
html .ui-page-theme-d .ui-btn.ui-btn-active,html .ui-bar-d .ui-btn.ui-btn-active,html .ui-body-d .ui-btn.ui-btn-active,html body .ui-group-theme-d .ui-btn.ui-btn-active,html body .ui-btn.ui-btn-d.ui-btn-active,html .ui-page-theme-d .ui-flipswitch-active,html .ui-bar-d .ui-flipswitch-active,html .ui-body-d .ui-flipswitch-active,html body .ui-group-theme-d .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-d.ui-flipswitch-active,html .ui-page-theme-d .ui-slider-track .ui-btn-active,html .ui-bar-d .ui-slider-track .ui-btn-active,html .ui-body-d .ui-slider-track .ui-btn-active,html body .ui-group-theme-d .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-d .ui-btn-active{background-color:#e76e66;border-color:#e76e66;color:#fff}
html .ui-page-theme-d .ui-checkbox-on:after,html .ui-bar-d .ui-checkbox-on:after,html .ui-body-d .ui-checkbox-on:after,html body .ui-group-theme-d .ui-checkbox-on:after,html .ui-btn.ui-checkbox-on.ui-btn-d:after,html background-color: primary_color{border-color:#b95752;color:#fff}
html .ui-page-theme-d .ui-radio-on:after,html .ui-bar-d .ui-radio-on:after,html .ui-body-d .ui-radio-on:after,html body .ui-group-theme-d .ui-radio-on:after,html .ui-btn.ui-radio-on.ui-btn-d:after{background-color:#b95752;color:#fff}

html .ui-bar-e,html .ui-page-theme-e .ui-bar-inherit,html .ui-bar-e .ui-bar-inherit,html .ui-body-e .ui-bar-inherit,html body .ui-group-theme-e .ui-bar-inherit{background:#457b87;border-color:#457b87;color:#fff;font-weight:bold}
html .ui-bar-e{border-width:1px;border-style:solid}
html .ui-overlay-e,html .ui-page-theme-e,html .ui-page-theme-e .ui-panel-wrapper{background:#f9f9f9;border-color:#bbb;color:#333}
html .ui-body-e,html .ui-page-theme-e .ui-body-inherit,html .ui-bar-e .ui-body-inherit,html .ui-body-e .ui-body-inherit,html body .ui-group-theme-e .ui-body-inherit,html .ui-panel-page-container-e{background:#fff;border-color:#457b87;color:#333}
html .ui-body-e{border-width:1px;border-style:solid}
html .ui-page-theme-e a,html .ui-bar-e a,html .ui-body-e a,html body .ui-group-theme-e a{color:#579aa9;font-weight:bold}
html .ui-page-theme-e a:visited,html .ui-bar-e a:visited,html .ui-body-e a:visited,html body .ui-group-theme-e a:visited{color:#579aa9}
html .ui-page-theme-e a:hover,html .ui-bar-e a:hover,html .ui-body-e a:hover,html body .ui-group-theme-e a:hover{color:#579aa9}
html .ui-page-theme-e a:active,html .ui-bar-e a:active,html .ui-body-e a:active,html body .ui-group-theme-e a:active{color:#579aa9}
html .ui-page-theme-e .ui-btn,html .ui-bar-e .ui-btn,html .ui-body-e .ui-btn,html body .ui-group-theme-e .ui-btn,html body .ui-btn.ui-btn-e,html .ui-page-theme-e .ui-btn:visited,html .ui-bar-e .ui-btn:visited,html .ui-body-e .ui-btn:visited,html body .ui-group-theme-e .ui-btn:visited,html body .ui-btn.ui-btn-e:visited{background:#457b87;border-color:#457b87;color:#fff}
html .ui-page-theme-e .ui-btn:hover,html .ui-bar-e .ui-btn:hover,html .ui-body-e .ui-btn:hover,html body .ui-group-theme-e .ui-btn:hover,html body .ui-btn.ui-btn-e:hover{background:#579aa9;border-color:#579aa9;color:#fff}
html .ui-page-theme-e .ui-btn:active,html .ui-bar-e .ui-btn:active,html .ui-body-e .ui-btn:active,html body .ui-group-theme-e .ui-btn:active,html body .ui-btn.ui-btn-e:active{background:#579aa9;border-color:#579aa9;color:#fff}
html .ui-page-theme-e .ui-btn.ui-btn-active,html .ui-bar-e .ui-btn.ui-btn-active,html .ui-body-e .ui-btn.ui-btn-active,html body .ui-group-theme-e .ui-btn.ui-btn-active,html body .ui-btn.ui-btn-e.ui-btn-active,html .ui-page-theme-e .ui-flipswitch-active,html .ui-bar-e .ui-flipswitch-active,html .ui-body-e .ui-flipswitch-active,html body .ui-group-theme-e .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-e.ui-flipswitch-active,html .ui-page-theme-e .ui-slider-track .ui-btn-active,html .ui-bar-e .ui-slider-track .ui-btn-active,html .ui-body-e .ui-slider-track .ui-btn-active,html body .ui-group-theme-e .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-e .ui-btn-active{background-color:#579aa9;border-color:#579aa9;color:#fff}
html .ui-page-theme-e .ui-checkbox-on:after,html .ui-bar-e .ui-checkbox-on:after,html .ui-body-e .ui-checkbox-on:after,html body .ui-group-theme-e .ui-checkbox-on:after,html .ui-btn.ui-checkbox-on.ui-btn-e:after,html background-color: primary_color{border-color:#457b87;color:#fff}
html .ui-page-theme-e .ui-radio-on:after,html .ui-bar-e .ui-radio-on:after,html .ui-body-e .ui-radio-on:after,html body .ui-group-theme-e .ui-radio-on:after,html .ui-btn.ui-radio-on.ui-btn-e:after{background-color:#457b87;color:#fff}

html .ui-bar-f,html .ui-page-theme-f .ui-bar-inherit,html .ui-bar-f .ui-bar-inherit,html .ui-body-f .ui-bar-inherit,html body .ui-group-theme-f .ui-bar-inherit{background:#544972;border-color:#544972;color:#fff;font-weight:bold}
html .ui-bar-f{border-width:1px;border-style:solid}
html .ui-overlay-f,html .ui-page-theme-f,html .ui-page-theme-f .ui-panel-wrapper{background:#f9f9f9;border-color:#bbb;color:#333}
html .ui-body-f,html .ui-page-theme-f .ui-body-inherit,html .ui-bar-f .ui-body-inherit,html .ui-body-f .ui-body-inherit,html body .ui-group-theme-f .ui-body-inherit,html .ui-panel-page-container-f{background:#fff;border-color:#544972;color:#333}
html .ui-body-f{border-width:1px;border-style:solid}
html .ui-page-theme-f a,html .ui-bar-f a,html .ui-body-f a,html body .ui-group-theme-f a{color:#695b8e;font-weight:bold}
html .ui-page-theme-f a:visited,html .ui-bar-f a:visited,html .ui-body-f a:visited,html body .ui-group-theme-f a:visited{color:#695b8e}
html .ui-page-theme-f a:hover,html .ui-bar-f a:hover,html .ui-body-f a:hover,html body .ui-group-theme-f a:hover{color:#695b8e}
html .ui-page-theme-f a:active,html .ui-bar-f a:active,html .ui-body-f a:active,html body .ui-group-theme-f a:active{color:#695b8e}
html .ui-page-theme-f .ui-btn,html .ui-bar-f .ui-btn,html .ui-body-f .ui-btn,html body .ui-group-theme-f .ui-btn,html body .ui-btn.ui-btn-f,html .ui-page-theme-f .ui-btn:visited,html .ui-bar-f .ui-btn:visited,html .ui-body-f .ui-btn:visited,html body .ui-group-theme-f .ui-btn:visited,html body .ui-btn.ui-btn-f:visited{background:#544972;border-color:#544972;color:#fff}
html .ui-page-theme-f .ui-btn:hover,html .ui-bar-f .ui-btn:hover,html .ui-body-f .ui-btn:hover,html body .ui-group-theme-f .ui-btn:hover,html body .ui-btn.ui-btn-f:hover{background:#695b8e;border-color:#695b8e;color:#fff}
html .ui-page-theme-f .ui-btn:active,html .ui-bar-f .ui-btn:active,html .ui-body-f .ui-btn:active,html body .ui-group-theme-f .ui-btn:active,html body .ui-btn.ui-btn-f:active{background:#695b8e;border-color:#695b8e;color:#fff}
html .ui-page-theme-f .ui-btn.ui-btn-active,html .ui-bar-f .ui-btn.ui-btn-active,html .ui-body-f .ui-btn.ui-btn-active,html body .ui-group-theme-f .ui-btn.ui-btn-active,html body .ui-btn.ui-btn-f.ui-btn-active,html .ui-page-theme-f .ui-flipswitch-active,html .ui-bar-f .ui-flipswitch-active,html .ui-body-f .ui-flipswitch-active,html body .ui-group-theme-f .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-f.ui-flipswitch-active,html .ui-page-theme-f .ui-slider-track .ui-btn-active,html .ui-bar-f .ui-slider-track .ui-btn-active,html .ui-body-f .ui-slider-track .ui-btn-active,html body .ui-group-theme-f .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-f .ui-btn-active{background-color:#695b8e;border-color:#695b8e;color:#fff}
html .ui-page-theme-f .ui-checkbox-on:after,html .ui-bar-f .ui-checkbox-on:after,html .ui-body-f .ui-checkbox-on:after,html body .ui-group-theme-f .ui-checkbox-on:after,html .ui-btn.ui-checkbox-on.ui-btn-f:after,html background-color: primary_color{border-color:#544972;color:#fff}
html .ui-page-theme-f .ui-radio-on:after,html .ui-bar-f .ui-radio-on:after,html .ui-body-f .ui-radio-on:after,html body .ui-group-theme-f .ui-radio-on:after,html .ui-btn.ui-radio-on.ui-btn-f:after{background-color:#544972;color:#fff}

html .ui-bar-g,html .ui-page-theme-g .ui-bar-inherit,html .ui-bar-g .ui-bar-inherit,html .ui-body-g .ui-bar-inherit,html body .ui-group-theme-g .ui-bar-inherit{background:#704b62;border-color:#704b62;color:#fff;font-weight:bold}
html .ui-bar-g{border-width:1px;border-style:solid}
html .ui-overlay-g,html .ui-page-theme-g,html .ui-page-theme-g .ui-panel-wrapper{background:#f9f9f9;border-color:#bbb;color:#333}
html .ui-body-g,html .ui-page-theme-g .ui-body-inherit,html .ui-bar-g .ui-body-inherit,html .ui-body-g .ui-body-inherit,html body .ui-group-theme-g .ui-body-inherit,html .ui-panel-page-container-g{background:#fff;border-color:#704b62;color:#333}
html .ui-body-g{border-width:1px;border-style:solid}
html .ui-page-theme-g a,html .ui-bar-g a,html .ui-body-g a,html body .ui-group-theme-g a{color:#8c5e7a;font-weight:bold}
html .ui-page-theme-g a:visited,html .ui-bar-g a:visited,html .ui-body-g a:visited,html body .ui-group-theme-g a:visited{color:#8c5e7a}
html .ui-page-theme-g a:hover,html .ui-bar-g a:hover,html .ui-body-g a:hover,html body .ui-group-theme-g a:hover{color:#8c5e7a}
html .ui-page-theme-g a:active,html .ui-bar-g a:active,html .ui-body-g a:active,html body .ui-group-theme-g a:active{color:#8c5e7a}
html .ui-page-theme-g .ui-btn,html .ui-bar-g .ui-btn,html .ui-body-g .ui-btn,html body .ui-group-theme-g .ui-btn,html body .ui-btn.ui-btn-g,html .ui-page-theme-g .ui-btn:visited,html .ui-bar-g .ui-btn:visited,html .ui-body-g .ui-btn:visited,html body .ui-group-theme-g .ui-btn:visited,html body .ui-btn.ui-btn-g:visited{background:#704b62;border-color:#704b62;color:#fff}
html .ui-page-theme-g .ui-btn:hover,html .ui-bar-g .ui-btn:hover,html .ui-body-g .ui-btn:hover,html body .ui-group-theme-g .ui-btn:hover,html body .ui-btn.ui-btn-g:hover{background:#8c5e7a;border-color:#8c5e7a;color:#fff}
html .ui-page-theme-g .ui-btn:active,html .ui-bar-g .ui-btn:active,html .ui-body-g .ui-btn:active,html body .ui-group-theme-g .ui-btn:active,html body .ui-btn.ui-btn-g:active{background:#8c5e7a;border-color:#8c5e7a;color:#fff}
html .ui-page-theme-g .ui-btn.ui-btn-active,html .ui-bar-g .ui-btn.ui-btn-active,html .ui-body-g .ui-btn.ui-btn-active,html body .ui-group-theme-g .ui-btn.ui-btn-active,html body .ui-btn.ui-btn-g.ui-btn-active,html .ui-page-theme-g .ui-flipswitch-active,html .ui-bar-g .ui-flipswitch-active,html .ui-body-g .ui-flipswitch-active,html body .ui-group-theme-g .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-g.ui-flipswitch-active,html .ui-page-theme-g .ui-slider-track .ui-btn-active,html .ui-bar-g .ui-slider-track .ui-btn-active,html .ui-body-g .ui-slider-track .ui-btn-active,html body .ui-group-theme-g .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-g .ui-btn-active{background-color:#8c5e7a;border-color:#8c5e7a;color:#fff}
html .ui-page-theme-g .ui-checkbox-on:after,html .ui-bar-g .ui-checkbox-on:after,html .ui-body-g .ui-checkbox-on:after,html body .ui-group-theme-g .ui-checkbox-on:after,html .ui-btn.ui-checkbox-on.ui-btn-g:after,html background-color: primary_color{border-color:#704b62;color:#fff}
html .ui-page-theme-g .ui-radio-on:after,html .ui-bar-g .ui-radio-on:after,html .ui-body-g .ui-radio-on:after,html body .ui-group-theme-g .ui-radio-on:after,html .ui-btn.ui-radio-on.ui-btn-g:after{background-color:#704b62;color:#fff}

html .ui-bar-h,html .ui-page-theme-h .ui-bar-inherit,html .ui-bar-h .ui-bar-inherit,html .ui-body-h .ui-bar-inherit,html body .ui-group-theme-h .ui-bar-inherit{background:#b18456;border-color:#b18456;color:#fff;font-weight:bold}
html .ui-bar-h{border-width:1px;border-style:solid}
html .ui-overlay-h,html .ui-page-theme-h,html .ui-page-theme-h .ui-panel-wrapper{background:#f9f9f9;border-color:#bbb;color:#333}
html .ui-body-h,html .ui-page-theme-h .ui-body-inherit,html .ui-bar-h .ui-body-inherit,html .ui-body-h .ui-body-inherit,html body .ui-group-theme-h .ui-body-inherit,html .ui-panel-page-container-h{background:#fff;border-color:#b18456;color:#333}
html .ui-body-h{border-width:1px;border-style:solid}
html .ui-page-theme-h a,html .ui-bar-h a,html .ui-body-h a,html body .ui-group-theme-h a{color:#dda56c;font-weight:bold}
html .ui-page-theme-h a:visited,html .ui-bar-h a:visited,html .ui-body-h a:visited,html body .ui-group-theme-h a:visited{color:#dda56c}
html .ui-page-theme-h a:hover,html .ui-bar-h a:hover,html .ui-body-h a:hover,html body .ui-group-theme-h a:hover{color:#dda56c}
html .ui-page-theme-h a:active,html .ui-bar-h a:active,html .ui-body-h a:active,html body .ui-group-theme-h a:active{color:#dda56c}
html .ui-page-theme-h .ui-btn,html .ui-bar-h .ui-btn,html .ui-body-h .ui-btn,html body .ui-group-theme-h .ui-btn,html body .ui-btn.ui-btn-h,html .ui-page-theme-h .ui-btn:visited,html .ui-bar-h .ui-btn:visited,html .ui-body-h .ui-btn:visited,html body .ui-group-theme-h .ui-btn:visited,html body .ui-btn.ui-btn-h:visited{background:#b18456;border-color:#b18456;color:#fff}
/*html .ui-page-theme-h .ui-btn:hover,html .ui-bar-h .ui-btn:hover,html .ui-body-h .ui-btn:hover,html body .ui-group-theme-h .ui-btn:hover,html body .ui-btn.ui-btn-h:hover{background:#dda56c;border-color:#dda56c;color:#fff}*/
html .ui-page-theme-h .ui-btn:active,html .ui-bar-h .ui-btn:active,html .ui-body-h .ui-btn:active,html body .ui-group-theme-h .ui-btn:active,html body .ui-btn.ui-btn-h:active{background:#dda56c;border-color:#dda56c;color:#fff}
html .ui-page-theme-h .ui-btn.ui-btn-active,html .ui-bar-h .ui-btn.ui-btn-active,html .ui-body-h .ui-btn.ui-btn-active,html body .ui-group-theme-h .ui-btn.ui-btn-active,html body .ui-btn.ui-btn-h.ui-btn-active,html .ui-page-theme-h .ui-flipswitch-active,html .ui-bar-h .ui-flipswitch-active,html .ui-body-h .ui-flipswitch-active,html body .ui-group-theme-h .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-h.ui-flipswitch-active,html .ui-page-theme-h .ui-slider-track .ui-btn-active,html .ui-bar-h .ui-slider-track .ui-btn-active,html .ui-body-h .ui-slider-track .ui-btn-active,html body .ui-group-theme-h .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-h .ui-btn-active{background-color:#dda56c;border-color:#dda56c;color:#fff}
html .ui-page-theme-h .ui-checkbox-on:after,html .ui-bar-h .ui-checkbox-on:after,html .ui-body-h .ui-checkbox-on:after,html body .ui-group-theme-h .ui-checkbox-on:after,html .ui-btn.ui-checkbox-on.ui-btn-h:after,html background-color: primary_color{border-color:#b18456;color:#fff}
html .ui-page-theme-h .ui-radio-on:after,html .ui-bar-h .ui-radio-on:after,html .ui-body-h .ui-radio-on:after,html body .ui-group-theme-h .ui-radio-on:after,html .ui-btn.ui-radio-on.ui-btn-h:after{background-color:#b18456;color:#fff}


html .ui-bar-t,html .ui-page-theme-t .ui-bar-inherit,html .ui-bar-t .ui-bar-inherit,html .ui-body-t .ui-bar-inherit,html body .ui-group-theme-t .ui-bar-inherit{background:transparent;border-color:transparent;color:#fff;font-weight:bold}
html .ui-bar-t{border-width:1px;border-style:solid}
html .ui-overlay-t,html .ui-page-theme-t,html .ui-page-theme-t .ui-panel-wrapper{background:#f9f9f9;border-color:#bbb;color:#333}
html .ui-body-t,html .ui-page-theme-t .ui-body-inherit,html .ui-bar-t .ui-body-inherit,html .ui-body-t .ui-body-inherit,html body .ui-group-theme-t .ui-body-inherit,html .ui-panel-page-container-t{background:#fff;border-color:transparent;color:#333}
html .ui-body-t{border-width:1px;border-style:solid}
html .ui-page-theme-t a,html .ui-bar-t a,html .ui-body-t a,html body .ui-group-theme-t a{color:var(--trebble-primary);font-weight:bold}
html .ui-page-theme-t a:visited,html .ui-bar-t a:visited,html .ui-body-t a:visited,html body .ui-group-theme-t a:visited{color:var(--trebble-primary)}
/*html .ui-page-theme-t a:hover,html .ui-bar-t a:hover,html .ui-body-t a:hover,html body .ui-group-theme-t a:hover{color:var(--trebble-primary)}*/
html .ui-page-theme-t a:active,html .ui-bar-t a:active,html .ui-body-t a:active,html body .ui-group-theme-t a:active{color:var(--trebble-primary)}
html .ui-page-theme-t .ui-btn,html .ui-bar-t .ui-btn,html .ui-body-t .ui-btn,html body .ui-group-theme-t .ui-btn,html body .ui-btn.ui-btn-t,html .ui-page-theme-t .ui-btn:visited,html .ui-bar-t .ui-btn:visited,html .ui-body-t .ui-btn:visited,html body .ui-group-theme-t .ui-btn:visited,html body .ui-btn.ui-btn-t:visited{background:transparent;border-color:transparent;color:#fff}
/*html .ui-page-theme-t .ui-btn:hover,html .ui-bar-t .ui-btn:hover,html .ui-body-t .ui-btn:hover,html body .ui-group-theme-t .ui-btn:hover,html body .ui-btn.ui-btn-t:hover{background:var(--trebble-primary);border-color:var(--trebble-primary);color:#fff}*/
html .ui-page-theme-t .ui-btn:active,html .ui-bar-t .ui-btn:active,html .ui-body-t .ui-btn:active,html body .ui-group-theme-t .ui-btn:active,html body .ui-btn.ui-btn-t:active{background:var(--trebble-primary);border-color:var(--trebble-primary);color:#fff}
html .ui-page-theme-t .ui-btn.ui-btn-active,html .ui-bar-t .ui-btn.ui-btn-active,html .ui-body-t .ui-btn.ui-btn-active,html body .ui-group-theme-t .ui-btn.ui-btn-active,html body .ui-btn.ui-btn-t.ui-btn-active,html .ui-page-theme-t .ui-flipswitch-active,html .ui-bar-t .ui-flipswitch-active,html .ui-body-t .ui-flipswitch-active,html body .ui-group-theme-t .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-t.ui-flipswitch-active,html .ui-page-theme-t .ui-slider-track .ui-btn-active,html .ui-bar-t .ui-slider-track .ui-btn-active,html .ui-body-t .ui-slider-track .ui-btn-active,html body .ui-group-theme-t .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-t .ui-btn-active{background-color:var(--trebble-primary);border-color:var(--trebble-primary);color:#fff}
html .ui-page-theme-t .ui-checkbox-on:after,html .ui-bar-t .ui-checkbox-on:after,html .ui-body-t .ui-checkbox-on:after,html body .ui-group-theme-t .ui-checkbox-on:after,html .ui-btn.ui-checkbox-on.ui-btn-t:after,html background-color: primary_color{border-color:transparent;color:#fff}
html .ui-page-theme-t .ui-radio-on:after,html .ui-bar-t .ui-radio-on:after,html .ui-body-t .ui-radio-on:after,html body .ui-group-theme-t .ui-radio-on:after,html .ui-btn.ui-radio-on.ui-btn-t:after{background-color:var(--trebble-primary);color:#fff}



@font-face {
	font-family: 'Trebblefont';
	font-display: auto;
	font-style: normal;
	font-weight: 300;
	src:
	url(080b936412b0f4d68f94.woff2) format('woff2'),
	url(e8942b7ee2ff1bec1fe2.woff) format('woff');
  }
  
  @font-face {
	font-family: 'Trebblefont';
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	src:
	url(080b936412b0f4d68f94.woff2) format('woff2'),
	url(e8942b7ee2ff1bec1fe2.woff) format('woff');
  }
  
  @font-face {
	font-family: 'Trebblefont';
	font-display: auto;
	font-style: normal;
	font-weight: 600;
	src: 
	url(2e7dac2bdfef5a52db90.woff2) format('woff2'),
	url(27173345204143a53856.woff) format('woff');
  }
  
  @font-face {
	font-family: 'Trebblefont';
	font-display: auto;
	font-style: normal;
	font-weight: 700;
	src: 
	url(2e7dac2bdfef5a52db90.woff2) format('woff2'),
	url(27173345204143a53856.woff) format('woff');
  }
  
  @font-face {
	font-family: 'Trebblefont';
	font-display: auto;
	font-style: normal;
	font-weight: 900;
	src: 
    url(6ac06db70f74bce1d485.woff2) format('woff2');
  }



/* Use the following CSS code if you want to have a class per icon */
/*Instead of a list of all class selectors,
 *you can use the generic selector below, but it's slower:
 *[class*="fui-"]:after { */
.ui-icon-flat-video:after,
.ui-icon-flat-time:after,
.ui-icon-flat-settings:after,
.ui-icon-flat-plus:after,
.ui-icon-flat-new:after,
.ui-icon-flat-menu:after,
.ui-icon-flat-man:after,
.ui-icon-flat-mail:after,
.ui-icon-flat-lock:after,
.ui-icon-flat-location:after,
.ui-icon-flat-heart:after,
.ui-icon-flat-eye:after,
.ui-icon-flat-cross:after,
.ui-icon-flat-cmd:after,
.ui-icon-flat-checkround:after,
.ui-icon-flat-checkmark:after,
.ui-icon-flat-calendar:after,
.ui-icon-flat-bubble:after,
.ui-icon-flat-volume:after,
.ui-icon-flat-camera:after {
  font-family: "Flat-UI-Icons-24";
  font-size: 14px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: none;

}

.ui-icon-flat-video:after {
  content: "\e000"; }

.ui-icon-flat-time:after {
  content: "\e001"; }

.ui-icon-flat-settings:after {
  content: "\e002"; }

.ui-icon-flat-plus:after {
  content: "\e003"; }

.ui-icon-flat-new:after {
  content: "\e005"; }

.ui-icon-flat-menu:after {
  content: "\e006"; }

.ui-icon-flat-man:after {
  content: "\e007"; }

.ui-icon-flat-mail:after {
  content: "\e008"; }

.ui-icon-flat-lock:after {
  content: "\e009"; }

.ui-icon-flat-location:after {
  content: "\e00a"; }

.ui-icon-flat-heart:after {
  content: "\e00b"; }

.ui-icon-flat-eye:after {
  content: "\e00c"; }

.ui-icon-flat-cross:after {
  content: "\e00d"; }

.ui-icon-flat-cmd:after {
  content: "\e00e"; }

.ui-icon-flat-checkround:after {
  content: "\e00f"; }

.ui-icon-flat-checkmark:after {
  content: "\e010"; }

.ui-icon-flat-calendar:after {
  content: "\e011"; }

.ui-icon-flat-bubble:after {
  content: "\e012"; }

.ui-icon-flat-volume:after {
  content: "\e013"; }

.ui-icon-flat-camera:after {
  content: "\e004"; }

html .ui-page-theme-a .ui-btn,html .ui-bar-a .ui-btn,html .ui-body-a .ui-btn,html body .ui-group-theme-a .ui-btn,html body .ui-btn.ui-btn-a,html .ui-page-theme-a .ui-btn:visited,html .ui-bar-a .ui-btn:visited,html .ui-body-a .ui-btn:visited,html body .ui-group-theme-a .ui-btn:visited,html body .ui-btn.ui-btn-a:visited {
    color: #bdc3c7;
}

.ui-navbar li .ui-btn {
    
    font-weight: 400;
    /*font-weight: 100;*/
    padding: 12px;
    font-size: 15px;

}

html .ui-page-theme-c .ui-btn.ui-btn-active,html .ui-bar-c .ui-btn.ui-btn-active,html .ui-body-c .ui-btn.ui-btn-active,html body .ui-group-theme-c .ui-btn.ui-btn-active,html body .ui-btn.ui-btn-c.ui-btn-active,html .ui-page-theme-c .ui-flipswitch-active,html .ui-bar-c .ui-flipswitch-active,html .ui-body-c .ui-flipswitch-active,html body .ui-group-theme-c .ui-flipswitch-active,html body .ui-flipswitch.ui-bar-c.ui-flipswitch-active,html .ui-page-theme-c .ui-slider-track .ui-btn-active,html .ui-bar-c .ui-slider-track .ui-btn-active,html .ui-body-c .ui-slider-track .ui-btn-active,html body .ui-group-theme-c .ui-slider-track .ui-btn-active,html body div.ui-slider-track.ui-body-c .ui-btn-active {
    background-color: #E0E0E0;
    border-color: #E0E0E0;
    color: #5e6163;
}
html .ui-page-theme-c .ui-btn,html .ui-bar-c .ui-btn,html .ui-body-c .ui-btn,html body .ui-group-theme-c .ui-btn,html body .ui-btn.ui-btn-c,html .ui-page-theme-c .ui-btn:visited,html .ui-bar-c .ui-btn:visited,html .ui-body-c .ui-btn:visited,html body .ui-group-theme-c .ui-btn:visited,html body .ui-btn.ui-btn-c:visited {
    background: #f2f2f2;
    border-color: #f2f2f2;
    color: #5e6163
}

/**
 * Swiper 3.4.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * 
 * http://www.idangero.us/swiper/
 * 
 * Copyright 2017, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 * 
 * Licensed under MIT
 * 
 * Released on: March 10, 2017
 */
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
  float: left;
}
.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
  touch-action: pan-y;
}
.swiper-wp8-vertical {
  touch-action: pan-x;
}
/* Arrows */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%27%20fill%3D%27%23007aff%27%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%27%20fill%3D%27%23007aff%27%2F%3E%3C%2Fsvg%3E");
  right: 10px;
  left: auto;
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
}
/* Pagination Styles */
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
  background: #fff;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000;
}
.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 5px 0;
  display: block;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}
/* Progress */
.swiper-pagination-progress {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progress .swiper-pagination-progressbar {
  background: #007aff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
  transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progress {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-container-vertical > .swiper-pagination-progress {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-progress.swiper-pagination-white {
  background: rgba(255, 255, 255, 0.5);
}
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
  background: #fff;
}
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
  background: #000;
}
/* 3D Container */
.swiper-container-3d {
  -o-perspective: 1200px;
  perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
  /* Safari 4+, Chrome */
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-right {
  /* Safari 4+, Chrome */
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-top {
  /* Safari 4+, Chrome */
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-bottom {
  /* Safari 4+, Chrome */
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}
/* Coverflow */
.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
  /* Windows 8 IE 10 fix */
  -ms-perspective: 1200px;
}
/* Cube + Flip */
.swiper-container-cube,
.swiper-container-flip {
  overflow: visible;
}
.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
}
.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  backface-visibility: hidden;
}
/* Cube */
.swiper-container-cube .swiper-slide {
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  filter: blur(50px);
  z-index: 0;
}
/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%20120%20120%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%3Cdefs%3E%3Cline%20id%3D%27l%27%20x1%3D%2760%27%20x2%3D%2760%27%20y1%3D%277%27%20y2%3D%2727%27%20stroke%3D%27%236c6c6c%27%20stroke-width%3D%2711%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2830%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2860%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2890%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%28120%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%28150%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.37%27%20transform%3D%27rotate%28180%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.46%27%20transform%3D%27rotate%28210%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.56%27%20transform%3D%27rotate%28240%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.66%27%20transform%3D%27rotate%28270%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.75%27%20transform%3D%27rotate%28300%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.85%27%20transform%3D%27rotate%28330%2060%2C60%29%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%20120%20120%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%3Cdefs%3E%3Cline%20id%3D%27l%27%20x1%3D%2760%27%20x2%3D%2760%27%20y1%3D%277%27%20y2%3D%2727%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2711%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2830%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2860%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2890%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%28120%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%28150%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.37%27%20transform%3D%27rotate%28180%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.46%27%20transform%3D%27rotate%28210%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.56%27%20transform%3D%27rotate%28240%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.66%27%20transform%3D%27rotate%28270%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.75%27%20transform%3D%27rotate%28300%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.85%27%20transform%3D%27rotate%28330%2060%2C60%29%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}

.mention_name{
	font-size:16px;
	}
.mention_username{
	font-weight:400;
	font-size: 16px;
	color:#fff;
	}
.mention_image{
	float: left;
	margin-right: 5px;
	border-radius: 3px;
	width: 20px;
	height: 20px;
	}
.active .mention_username{
	color:#fff;
	}
/* 
 * 	Core Owl Carousel CSS File
 *	v1.3.2
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
/* display none until init */
.owl-carousel{
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
	overflow: hidden;
	position: relative;
	width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
	transition: height 500ms ease-in-out;
}
	
.owl-carousel .owl-item{
	float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
	cursor: pointer;
}
.owl-controls {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:none 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}


/*
* 	Owl Carousel Owl Demo Theme 
*	v1.3.2
*/

.owl-theme .owl-controls{
	margin-top: 10px;
	text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
	color: #FFF;
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
	margin: 5px;
	padding: 3px 10px;
	font-size: 12px;
	border-radius: 30px;
	background: #869791;
	filter: Alpha(Opacity=50);/*IE7 fix*/
	opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
	text-decoration: none;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
	display: block;
	width: 12px;
	height: 12px;
	margin: 5px 7px;
	filter: Alpha(Opacity=50);/*IE7 fix*/
	opacity: 0.5;
	border-radius: 20px;
	background: #869791;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
	height: auto;
	width: auto;
	color: #FFF;
	padding: 2px 10px;
	font-size: 12px;
	border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
	min-height: 150px;
	background: none no-repeat center center
}
/* 
 *  Owl Carousel CSS3 Transitions 
 *  v1.3.2
 */

.owl-origin {
	-webkit-perspective: 1200px;
	-webkit-perspective-origin-x : 50%;
	-webkit-perspective-origin-y : 50%;
	-moz-perspective : 1200px;
	-moz-perspective-origin-x : 50%;
	-moz-perspective-origin-y : 50%;
	perspective : 1200px;
}
/* fade */
.owl-fade-out {
  z-index: 10;
  animation: fadeOut .7s both ease;
}
.owl-fade-in {
  animation: fadeIn .7s both ease;
}
/* backSlide */
.owl-backSlide-out {
  animation: backSlideOut 1s both ease;
}
.owl-backSlide-in {
  animation: backSlideIn 1s both ease;
}
/* goDown */
.owl-goDown-out {
  animation: scaleToFade .7s ease both;
}
.owl-goDown-in {
  animation: goDown .6s ease both;
}
/* scaleUp */
.owl-fadeUp-in {
  animation: scaleUpFrom .5s ease both;
}

.owl-fadeUp-out {
  animation: scaleUpTo .5s ease both;
}
/* Keyframes */
/*empty*/
@keyframes empty {
  0% {opacity: 1}
}
@keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}
@keyframes backSlideOut {
  25% { opacity: .5; transform: translateZ(-500px); }
  75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@keyframes backSlideIn {
  0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
  75% { opacity: .5; transform: translateZ(-500px); }
  100% { opacity: 1; transform: translateZ(0) translateX(0); }
}
@keyframes scaleToFade {
  to { opacity: 0; transform: scale(.8); }
}
@keyframes goDown {
  from { transform: translateY(-100%); }
}
@keyframes scaleUpFrom {
  from { opacity: 0; transform: scale(1.5); }
}
@keyframes scaleUpTo {
  to { opacity: 0; transform: scale(1.5); }
}
.ct-double-octave:after,.ct-major-eleventh:after,.ct-major-second:after,.ct-major-seventh:after,.ct-major-sixth:after,.ct-major-tenth:after,.ct-major-third:after,.ct-major-twelfth:after,.ct-minor-second:after,.ct-minor-seventh:after,.ct-minor-sixth:after,.ct-minor-third:after,.ct-octave:after,.ct-perfect-fifth:after,.ct-perfect-fourth:after,.ct-square:after{content:"";clear:both}.ct-double-octave:after,.ct-double-octave:before,.ct-golden-section:after,.ct-major-eleventh:after,.ct-major-eleventh:before,.ct-major-second:after,.ct-major-second:before,.ct-major-seventh:after,.ct-major-seventh:before,.ct-major-sixth:after,.ct-major-sixth:before,.ct-major-tenth:after,.ct-major-tenth:before,.ct-major-third:after,.ct-major-third:before,.ct-major-twelfth:after,.ct-major-twelfth:before,.ct-minor-second:after,.ct-minor-second:before,.ct-minor-seventh:after,.ct-minor-seventh:before,.ct-minor-sixth:after,.ct-minor-sixth:before,.ct-minor-third:after,.ct-minor-third:before,.ct-octave:after,.ct-octave:before,.ct-perfect-fifth:after,.ct-perfect-fifth:before,.ct-perfect-fourth:after,.ct-perfect-fourth:before,.ct-square:after,.ct-square:before{content:""}.ct-label{fill:rgba(0,0,0,.4);color:rgba(0,0,0,.4);font-size:.75rem;line-height:1}.ct-chart-bar .ct-label,.ct-chart-line .ct-label{display:block;display:flex}.ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-vertical.ct-start{align-items:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-label.ct-vertical.ct-end{align-items:flex-end;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{align-items:center;justify-content:flex-end;text-align:right;text-anchor:end}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{align-items:center;justify-content:flex-start;text-align:left;text-anchor:end}.ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-point{stroke-width:10px;stroke-linecap:round}.ct-line{fill:none;stroke-width:4px}.ct-area{stroke:none;fill-opacity:.1}.ct-bar{fill:none;stroke-width:10px}.ct-slice-donut{fill:none;stroke-width:60px}.ct-series-a .ct-bar,.ct-series-a .ct-line,.ct-series-a .ct-point,.ct-series-a .ct-slice-donut{stroke:#d70206}.ct-series-a .ct-area,.ct-series-a .ct-slice-pie{fill:#d70206}.ct-series-b .ct-bar,.ct-series-b .ct-line,.ct-series-b .ct-point,.ct-series-b .ct-slice-donut{stroke:#f05b4f}.ct-series-b .ct-area,.ct-series-b .ct-slice-pie{fill:#f05b4f}.ct-series-c .ct-bar,.ct-series-c .ct-line,.ct-series-c .ct-point,.ct-series-c .ct-slice-donut{stroke:#f4c63d}.ct-series-c .ct-area,.ct-series-c .ct-slice-pie{fill:#f4c63d}.ct-series-d .ct-bar,.ct-series-d .ct-line,.ct-series-d .ct-point,.ct-series-d .ct-slice-donut{stroke:#d17905}.ct-series-d .ct-area,.ct-series-d .ct-slice-pie{fill:#d17905}.ct-series-e .ct-bar,.ct-series-e .ct-line,.ct-series-e .ct-point,.ct-series-e .ct-slice-donut{stroke:#453d3f}.ct-series-e .ct-area,.ct-series-e .ct-slice-pie{fill:#453d3f}.ct-series-f .ct-bar,.ct-series-f .ct-line,.ct-series-f .ct-point,.ct-series-f .ct-slice-donut{stroke:#59922b}.ct-series-f .ct-area,.ct-series-f .ct-slice-pie{fill:#59922b}.ct-series-g .ct-bar,.ct-series-g .ct-line,.ct-series-g .ct-point,.ct-series-g .ct-slice-donut{stroke:#0544d3}.ct-series-g .ct-area,.ct-series-g .ct-slice-pie{fill:#0544d3}.ct-series-h .ct-bar,.ct-series-h .ct-line,.ct-series-h .ct-point,.ct-series-h .ct-slice-donut{stroke:#6b0392}.ct-series-h .ct-area,.ct-series-h .ct-slice-pie{fill:#6b0392}.ct-series-i .ct-bar,.ct-series-i .ct-line,.ct-series-i .ct-point,.ct-series-i .ct-slice-donut{stroke:#f05b4f}.ct-series-i .ct-area,.ct-series-i .ct-slice-pie{fill:#f05b4f}.ct-series-j .ct-bar,.ct-series-j .ct-line,.ct-series-j .ct-point,.ct-series-j .ct-slice-donut{stroke:#dda458}.ct-series-j .ct-area,.ct-series-j .ct-slice-pie{fill:#dda458}.ct-series-k .ct-bar,.ct-series-k .ct-line,.ct-series-k .ct-point,.ct-series-k .ct-slice-donut{stroke:#eacf7d}.ct-series-k .ct-area,.ct-series-k .ct-slice-pie{fill:#eacf7d}.ct-series-l .ct-bar,.ct-series-l .ct-line,.ct-series-l .ct-point,.ct-series-l .ct-slice-donut{stroke:#86797d}.ct-series-l .ct-area,.ct-series-l .ct-slice-pie{fill:#86797d}.ct-series-m .ct-bar,.ct-series-m .ct-line,.ct-series-m .ct-point,.ct-series-m .ct-slice-donut{stroke:#b2c326}.ct-series-m .ct-area,.ct-series-m .ct-slice-pie{fill:#b2c326}.ct-series-n .ct-bar,.ct-series-n .ct-line,.ct-series-n .ct-point,.ct-series-n .ct-slice-donut{stroke:#6188e2}.ct-series-n .ct-area,.ct-series-n .ct-slice-pie{fill:#6188e2}.ct-series-o .ct-bar,.ct-series-o .ct-line,.ct-series-o .ct-point,.ct-series-o .ct-slice-donut{stroke:#a748ca}.ct-series-o .ct-area,.ct-series-o .ct-slice-pie{fill:#a748ca}.ct-square{display:block;position:relative;width:100%}.ct-square:before{display:block;float:left;width:0;height:0;padding-bottom:100%}.ct-square:after{display:table}.ct-square>svg{display:block;position:absolute;top:0;left:0}.ct-minor-second{display:block;position:relative;width:100%}.ct-minor-second:before{display:block;float:left;width:0;height:0;padding-bottom:93.75%}.ct-minor-second:after{display:table}.ct-minor-second>svg{display:block;position:absolute;top:0;left:0}.ct-major-second{display:block;position:relative;width:100%}.ct-major-second:before{display:block;float:left;width:0;height:0;padding-bottom:88.8888888889%}.ct-major-second:after{display:table}.ct-major-second>svg{display:block;position:absolute;top:0;left:0}.ct-minor-third{display:block;position:relative;width:100%}.ct-minor-third:before{display:block;float:left;width:0;height:0;padding-bottom:83.3333333333%}.ct-minor-third:after{display:table}.ct-minor-third>svg{display:block;position:absolute;top:0;left:0}.ct-major-third{display:block;position:relative;width:100%}.ct-major-third:before{display:block;float:left;width:0;height:0;padding-bottom:80%}.ct-major-third:after{display:table}.ct-major-third>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-perfect-fourth:before{display:block;float:left;width:0;height:0;padding-bottom:75%}.ct-perfect-fourth:after{display:table}.ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-perfect-fifth:before{display:block;float:left;width:0;height:0;padding-bottom:66.6666666667%}.ct-perfect-fifth:after{display:table}.ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-sixth{display:block;position:relative;width:100%}.ct-minor-sixth:before{display:block;float:left;width:0;height:0;padding-bottom:62.5%}.ct-minor-sixth:after{display:table}.ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-golden-section{display:block;position:relative;width:100%}.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-golden-section:after{display:table;clear:both}.ct-golden-section>svg{display:block;position:absolute;top:0;left:0}.ct-major-sixth{display:block;position:relative;width:100%}.ct-major-sixth:before{display:block;float:left;width:0;height:0;padding-bottom:60%}.ct-major-sixth:after{display:table}.ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-seventh{display:block;position:relative;width:100%}.ct-minor-seventh:before{display:block;float:left;width:0;height:0;padding-bottom:56.25%}.ct-minor-seventh:after{display:table}.ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-seventh{display:block;position:relative;width:100%}.ct-major-seventh:before{display:block;float:left;width:0;height:0;padding-bottom:53.3333333333%}.ct-major-seventh:after{display:table}.ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-octave{display:block;position:relative;width:100%}.ct-octave:before{display:block;float:left;width:0;height:0;padding-bottom:50%}.ct-octave:after{display:table}.ct-octave>svg{display:block;position:absolute;top:0;left:0}.ct-major-tenth{display:block;position:relative;width:100%}.ct-major-tenth:before{display:block;float:left;width:0;height:0;padding-bottom:40%}.ct-major-tenth:after{display:table}.ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}.ct-major-eleventh{display:block;position:relative;width:100%}.ct-major-eleventh:before{display:block;float:left;width:0;height:0;padding-bottom:37.5%}.ct-major-eleventh:after{display:table}.ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-twelfth{display:block;position:relative;width:100%}.ct-major-twelfth:before{display:block;float:left;width:0;height:0;padding-bottom:33.3333333333%}.ct-major-twelfth:after{display:table}.ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}.ct-double-octave{display:block;position:relative;width:100%}.ct-double-octave:before{display:block;float:left;width:0;height:0;padding-bottom:25%}.ct-double-octave:after{display:table}.ct-double-octave>svg{display:block;position:absolute;top:0;left:0}
    .infiniteListInnerContainer{
        background-color: inherit;
        height: 0%;
        width: 100%;
        overflow: visible;
        position: relative;
    }
    
    .infiniteListOuterContainer{
        background-color: inherit;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
        width: 100%;
        height: 100%;
    }
    
.infiniteListInnerContainer > div {
	    background-color: inherit;
	    position: absolute;
        width: 100%;
        left : 0px;
        right: 0px;
        -webkit-transform: translateZ(0);
        
        
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-direction: row;

	    display: -webkit-flex;
	    -webkit-justify-content: center;
	    -webkit-align-items: center;
}

@font-face {
  font-family: 'fontello';
  src: url(2db8181e67ff5f00addd.eot?46098763);
  src: url(2db8181e67ff5f00addd.eot?46098763#iefix) format('embedded-opentype'),
       url(80b74a0a326a0e039b6a.woff?46098763) format('woff'),
       url(cb23ce5a3225d088639f.ttf?46098763) format('truetype'),
       url(ee730d25a539fb0fdc0c.svg?46098763#fontello) format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?46098763#fontello') format('svg');
  }
}
*/
 
 [class^="fontello-icon-"]:before, [class*=" fontello-icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.fontello-icon-paypal:before { content: '\e87f'; } /* '' */
.fontello-icon-android:before { content: '\e880'; } /* '' */
.fontello-icon-plus-1:before { content: '\e86f'; } /* '' */
.fontello-icon-gplus:before { content: '\e881'; } /* '' */
.fontello-icon-plus:before { content: '\e80d'; } /* '' */
.fontello-icon-minus-1:before { content: '\e870'; } /* '' */
.fontello-icon-minus:before { content: '\e80e'; } /* '' */
.fontello-icon-html5:before { content: '\e883'; } /* '' */
.fontello-icon-ie:before { content: '\e882'; } /* '' */
.fontello-icon-call:before { content: '\e884'; } /* '' */
.fontello-icon-grooveshark:before { content: '\e885'; } /* '' */
.fontello-icon-spotify:before { content: '\e886'; } /* '' */
.fontello-icon-google:before { content: '\e887'; } /* '' */
.fontello-icon-youtube:before { content: '\e888'; } /* '' */
.fontello-icon-email:before { content: '\e889'; } /* '' */
.fontello-icon-itunes:before { content: '\e88a'; } /* '' */
.fontello-icon-left-big:before { content: '\e83b'; } /* '' */
.fontello-icon-left:before { content: '\e872'; } /* '' */
.fontello-icon-up:before { content: '\e874'; } /* '' */
.fontello-icon-up-big:before { content: '\e839'; } /* '' */
.fontello-icon-right:before { content: '\e873'; } /* '' */
.fontello-icon-right-big:before { content: '\e83a'; } /* '' */
.fontello-icon-down-big:before { content: '\e83c'; } /* '' */
.fontello-icon-down:before { content: '\e871'; } /* '' */
.fontello-icon-home-1:before { content: '\e85a'; } /* '' */
.fontello-icon-home:before { content: '\e800'; } /* '' */
.fontello-icon-pause-1:before { content: '\e876'; } /* '' */
.fontello-icon-pause:before { content: '\e829'; } /* '' */
.fontello-icon-fast-fw:before { content: '\e82d'; } /* '' */
.fontello-icon-fast-bw:before { content: '\e82c'; } /* '' */
.fontello-icon-stop:before { content: '\e828'; } /* '' */
.fontello-icon-up-dir:before { content: '\e843'; } /* '' */
.fontello-icon-play-1:before { content: '\e875'; } /* '' */
.fontello-icon-play-3:before { content: '\e827'; } /* '' */
.fontello-icon-right-dir:before { content: '\e841'; } /* '' */
.fontello-icon-down-dir:before { content: '\e853'; } /* '' */
.fontello-icon-left-dir:before { content: '\e842'; } /* '' */
.fontello-icon-star-3:before { content: '\e87d'; } /* '' */
.fontello-icon-star-2:before { content: '\e86c'; } /* '' */
.fontello-icon-star:before { content: '\e803'; } /* '' */
.fontello-icon-star-1:before { content: '\e858'; } /* '' */
.fontello-icon-star-empty:before { content: '\e804'; } /* '' */
.fontello-icon-star-empty-1:before { content: '\e859'; } /* '' */
.fontello-icon-th-list-1:before { content: '\e87e'; } /* '' */
.fontello-icon-th-list:before { content: '\e80b'; } /* '' */
.fontello-icon-heart-empty:before { content: '\e802'; } /* '' */
.fontello-icon-heart:before { content: '\e801'; } /* '' */
.fontello-icon-music:before { content: '\e836'; } /* '' */
.fontello-icon-cog:before { content: '\e822'; } /* '' */
.fontello-icon-attention:before { content: '\e81f'; } /* '' */
.fontello-icon-attention-1:before { content: '\e862'; } /* '' */
.fontello-icon-cog-alt:before { content: '\e823'; } /* '' */
.fontello-icon-pencil:before { content: '\e85f'; } /* '' */
.fontello-icon-ok:before { content: '\e86d'; } /* '' */
.fontello-icon-cancel:before { content: '\e80c'; } /* '' */
.fontello-icon-cancel-1:before { content: '\e86e'; } /* '' */
.fontello-icon-cw:before { content: '\e879'; } /* '' */
.fontello-icon-list-add:before { content: '\e86a'; } /* '' */
.fontello-icon-list:before { content: '\e86b'; } /* '' */
.fontello-icon-warning:before { content: '\e897'; } /* '' */
.fontello-icon-thumbs-up-2:before { content: '\e893'; } /* '' */
.fontello-icon-thumbs-down-2:before { content: '\e894'; } /* '' */
.fontello-icon-tags-1:before { content: '\e892'; } /* '' */
.fontello-icon-tag-1:before { content: '\e891'; } /* '' */
.fontello-icon-star-empty-2:before { content: '\e88f'; } /* '' */
.fontello-icon-basket:before { content: '\e89a'; } /* '' */
.fontello-icon-shuffle-1:before { content: '\e89c'; } /* '' */
.fontello-icon-play:before { content: '\e89d'; } /* '' */
.fontello-icon-pause-2:before { content: '\e89e'; } /* '' */
.fontello-icon-off:before { content: '\e8a3'; } /* '' */
.fontello-icon-list-3:before { content: '\e8a2'; } /* '' */
.fontello-icon-fast-forward:before { content: '\e89f'; } /* '' */
.fontello-icon-fast-backward:before { content: '\e8a0'; } /* '' */
.fontello-icon-facebook-1:before { content: '\e8a6'; } /* '' */
.fontello-icon-eye-1:before { content: '\e890'; } /* '' */
.fontello-icon-credit-card:before { content: '\e8a5'; } /* '' */
.fontello-icon-comment-alt:before { content: '\e896'; } /* '' */
.fontello-icon-asterisk:before { content: '\e8a4'; } /* '' */
.fontello-icon-headphones-1:before { content: '\e89b'; } /* '' */
.fontello-icon-align-justify-1:before { content: '\e8a1'; } /* '' */
.fontello-icon-comment-2:before { content: '\e895'; } /* '' */
.fontello-icon-cogs:before { content: '\e899'; } /* '' */
.fontello-icon-cog-1:before { content: '\e898'; } /* '' */
.fontello-icon-eye:before { content: '\e838'; } /* '' */
.fontello-icon-tag:before { content: '\e812'; } /* '' */
.fontello-icon-tags:before { content: '\e813'; } /* '' */
.fontello-icon-retweet:before { content: '\e81a'; } /* '' */
.fontello-icon-comment:before { content: '\e81b'; } /* '' */
.fontello-icon-comment-1:before { content: '\e860'; } /* '' */
.fontello-icon-chat:before { content: '\e81c'; } /* '' */
.fontello-icon-chat-1:before { content: '\e861'; } /* '' */
.fontello-icon-trash:before { content: '\e820'; } /* '' */
.fontello-icon-down-open:before { content: '\e83d'; } /* '' */
.fontello-icon-left-open:before { content: '\e83e'; } /* '' */
.fontello-icon-right-open:before { content: '\e83f'; } /* '' */
.fontello-icon-up-open:before { content: '\e840'; } /* '' */
.fontello-icon-arrows-cw:before { content: '\e826'; } /* '' */
.fontello-icon-left-open-mini:before { content: '\e869'; } /* '' */
.fontello-icon-to-end-alt:before { content: '\e82a'; } /* '' */
.fontello-icon-right-open-mini:before { content: '\e868'; } /* '' */
.fontello-icon-to-start-alt:before { content: '\e82b'; } /* '' */
.fontello-icon-up-open-mini:before { content: '\e867'; } /* '' */
.fontello-icon-down-open-big:before { content: '\e866'; } /* '' */
.fontello-icon-list-2:before { content: '\e877'; } /* '' */
.fontello-icon-left-open-big:before { content: '\e865'; } /* '' */
.fontello-icon-right-open-big:before { content: '\e864'; } /* '' */
.fontello-icon-up-open-big:before { content: '\e863'; } /* '' */
.fontello-icon-align-justify:before { content: '\e830'; } /* '' */
.fontello-icon-list-1:before { content: '\e82f'; } /* '' */
.fontello-icon-equalizer:before { content: '\e87b'; } /* '' */
.fontello-icon-spin3:before { content: '\e845'; } /* '' */
.fontello-icon-spin4:before { content: '\e846'; } /* '' */
.fontello-icon-menu:before { content: '\e821'; } /* '' */
.fontello-icon-comment-empty:before { content: '\e81d'; } /* '' */
.fontello-icon-chat-empty:before { content: '\e81e'; } /* '' */
.fontello-icon-download-cloud:before { content: '\e818'; } /* '' */
.fontello-icon-upload-cloud:before { content: '\e819'; } /* '' */
.fontello-icon-angle-left:before { content: '\e84f'; } /* '' */
.fontello-icon-angle-right:before { content: '\e850'; } /* '' */
.fontello-icon-angle-up:before { content: '\e851'; } /* '' */
.fontello-icon-angle-down:before { content: '\e852'; } /* '' */
.fontello-icon-desktop:before { content: '\e857'; } /* '' */
.fontello-icon-laptop:before { content: '\e856'; } /* '' */
.fontello-icon-tablet:before { content: '\e855'; } /* '' */
.fontello-icon-mobile:before { content: '\e854'; } /* '' */
.fontello-icon-smile:before { content: '\e833'; } /* '' */
.fontello-icon-frown:before { content: '\e834'; } /* '' */
.fontello-icon-meh:before { content: '\e835'; } /* '' */
.fontello-icon-help:before { content: '\e80f'; } /* '' */
.fontello-icon-info:before { content: '\e810'; } /* '' */
.fontello-icon-attention-alt:before { content: '\e847'; } /* '' */
.fontello-icon-mic:before { content: '\e848'; } /* '' */
.fontello-icon-mute:before { content: '\e849'; } /* '' */
.fontello-icon-ellipsis:before { content: '\e832'; } /* '' */
.fontello-icon-ellipsis-vert:before { content: '\e831'; } /* '' */
.fontello-icon-thumbs-up-alt:before { content: '\e816'; } /* '' */
.fontello-icon-thumbs-down-alt:before { content: '\e817'; } /* '' */
.fontello-icon-facebook:before { content: '\e88b'; } /* '' */
.fontello-icon-facebook-rect:before { content: '\e88c'; } /* '' */
.fontello-icon-twitter:before { content: '\e88d'; } /* '' */
.fontello-icon-twitter-bird:before { content: '\e88e'; } /* '' */
.fontello-icon-picture:before { content: '\e809'; } /* '' */
.fontello-icon-globe:before { content: '\e82e'; } /* '' */
.fontello-icon-videocam:before { content: '\e807'; } /* '' */
.fontello-icon-headphones:before { content: '\e84d'; } /* '' */
.fontello-icon-video:before { content: '\e808'; } /* '' */
.fontello-icon-thumbs-up:before { content: '\e814'; } /* '' */
.fontello-icon-thumbs-up-1:before { content: '\e85d'; } /* '' */
.fontello-icon-thumbs-down:before { content: '\e815'; } /* '' */
.fontello-icon-thumbs-down-1:before { content: '\e85e'; } /* '' */
.fontello-icon-user:before { content: '\e805'; } /* '' */
.fontello-icon-users:before { content: '\e806'; } /* '' */
.fontello-icon-cd:before { content: '\e844'; } /* '' */
.fontello-icon-cd-1:before { content: '\e87c'; } /* '' */
.fontello-icon-attach:before { content: '\e811'; } /* '' */
.fontello-icon-upload:before { content: '\e85c'; } /* '' */
.fontello-icon-download:before { content: '\e85b'; } /* '' */
.fontello-icon-camera:before { content: '\e80a'; } /* '' */
.fontello-icon-shuffle:before { content: '\e825'; } /* '' */
.fontello-icon-loop-alt:before { content: '\e87a'; } /* '' */
.fontello-icon-loop:before { content: '\e878'; } /* '' */
.fontello-icon-volume-off:before { content: '\e84a'; } /* '' */
.fontello-icon-volume-down:before { content: '\e84b'; } /* '' */
.fontello-icon-volume-up:before { content: '\e84c'; } /* '' */
.fontello-icon-search:before { content: '\e837'; } /* '' */
.fontello-icon-wrench:before { content: '\e824'; } /* '' */
.fontello-icon-block:before { content: '\e84e'; } /* '' */
/*!
  Ionicons, v1.5.2
  Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
  https://twitter.com/benjsperry  https://twitter.com/ionicframework
  MIT License: https://github.com/driftyco/ionicons
*/
@font-face { font-family: "Ionicons"; src: url(1910df90f17aac225518.eot?v=1.5.2); src: url(1910df90f17aac225518.eot?v=1.5.2#iefix) format("embedded-opentype"), url(f666d1cbea5c1917574c.ttf?v=1.5.2) format("truetype"), url(00a5c85816b03feed685.woff?v=1.5.2) format("woff"), url(0cd35e0b939e25abc076.svg?v=1.5.2#Ionicons) format("svg"); font-weight: normal; font-style: normal; }
.ion, .ion-loading-a, .ion-loading-b, .ion-loading-c, .ion-loading-d, .ion-looping, .ion-refreshing, .ion-ios7-reloading, .ionicons, .ion-alert:before, .ion-alert-circled:before, .ion-android-add:before, .ion-android-add-contact:before, .ion-android-alarm:before, .ion-android-archive:before, .ion-android-arrow-back:before, .ion-android-arrow-down-left:before, .ion-android-arrow-down-right:before, .ion-android-arrow-forward:before, .ion-android-arrow-up-left:before, .ion-android-arrow-up-right:before, .ion-android-battery:before, .ion-android-book:before, .ion-android-calendar:before, .ion-android-call:before, .ion-android-camera:before, .ion-android-chat:before, .ion-android-checkmark:before, .ion-android-clock:before, .ion-android-close:before, .ion-android-contact:before, .ion-android-contacts:before, .ion-android-data:before, .ion-android-developer:before, .ion-android-display:before, .ion-android-download:before, .ion-android-drawer:before, .ion-android-dropdown:before, .ion-android-earth:before, .ion-android-folder:before, .ion-android-forums:before, .ion-android-friends:before, .ion-android-hand:before, .ion-android-image:before, .ion-android-inbox:before, .ion-android-information:before, .ion-android-keypad:before, .ion-android-lightbulb:before, .ion-android-locate:before, .ion-android-location:before, .ion-android-mail:before, .ion-android-microphone:before, .ion-android-mixer:before, .ion-android-more:before, .ion-android-note:before, .ion-android-playstore:before, .ion-android-printer:before, .ion-android-promotion:before, .ion-android-reminder:before, .ion-android-remove:before, .ion-android-search:before, .ion-android-send:before, .ion-android-settings:before, .ion-android-share:before, .ion-android-social:before, .ion-android-social-user:before, .ion-android-sort:before, .ion-android-stair-drawer:before, .ion-android-star:before, .ion-android-stopwatch:before, .ion-android-storage:before, .ion-android-system-back:before, .ion-android-system-home:before, .ion-android-system-windows:before, .ion-android-timer:before, .ion-android-trash:before, .ion-android-user-menu:before, .ion-android-volume:before, .ion-android-wifi:before, .ion-aperture:before, .ion-archive:before, .ion-arrow-down-a:before, .ion-arrow-down-b:before, .ion-arrow-down-c:before, .ion-arrow-expand:before, .ion-arrow-graph-down-left:before, .ion-arrow-graph-down-right:before, .ion-arrow-graph-up-left:before, .ion-arrow-graph-up-right:before, .ion-arrow-left-a:before, .ion-arrow-left-b:before, .ion-arrow-left-c:before, .ion-arrow-move:before, .ion-arrow-resize:before, .ion-arrow-return-left:before, .ion-arrow-return-right:before, .ion-arrow-right-a:before, .ion-arrow-right-b:before, .ion-arrow-right-c:before, .ion-arrow-shrink:before, .ion-arrow-swap:before, .ion-arrow-up-a:before, .ion-arrow-up-b:before, .ion-arrow-up-c:before, .ion-asterisk:before, .ion-at:before, .ion-bag:before, .ion-battery-charging:before, .ion-battery-empty:before, .ion-battery-full:before, .ion-battery-half:before, .ion-battery-low:before, .ion-beaker:before, .ion-beer:before, .ion-bluetooth:before, .ion-bonfire:before, .ion-bookmark:before, .ion-briefcase:before, .ion-bug:before, .ion-calculator:before, .ion-calendar:before, .ion-camera:before, .ion-card:before, .ion-cash:before, .ion-chatbox:before, .ion-chatbox-working:before, .ion-chatboxes:before, .ion-chatbubble:before, .ion-chatbubble-working:before, .ion-chatbubbles:before, .ion-checkmark:before, .ion-checkmark-circled:before, .ion-checkmark-round:before, .ion-chevron-down:before, .ion-chevron-left:before, .ion-chevron-right:before, .ion-chevron-up:before, .ion-clipboard:before, .ion-clock:before, .ion-close:before, .ion-close-circled:before, .ion-close-round:before, .ion-closed-captioning:before, .ion-cloud:before, .ion-code:before, .ion-code-download:before, .ion-code-working:before, .ion-coffee:before, .ion-compass:before, .ion-compose:before, .ion-connection-bars:before, .ion-contrast:before, .ion-cube:before, .ion-disc:before, .ion-document:before, .ion-document-text:before, .ion-drag:before, .ion-earth:before, .ion-edit:before, .ion-egg:before, .ion-eject:before, .ion-email:before, .ion-eye:before, .ion-eye-disabled:before, .ion-female:before, .ion-filing:before, .ion-film-marker:before, .ion-fireball:before, .ion-flag:before, .ion-flame:before, .ion-flash:before, .ion-flash-off:before, .ion-flask:before, .ion-folder:before, .ion-fork:before, .ion-fork-repo:before, .ion-forward:before, .ion-funnel:before, .ion-game-controller-a:before, .ion-game-controller-b:before, .ion-gear-a:before, .ion-gear-b:before, .ion-grid:before, .ion-hammer:before, .ion-happy:before, .ion-headphone:before, .ion-heart:before, .ion-heart-broken:before, .ion-help:before, .ion-help-buoy:before, .ion-help-circled:before, .ion-home:before, .ion-icecream:before, .ion-icon-social-google-plus:before, .ion-icon-social-google-plus-outline:before, .ion-image:before, .ion-images:before, .ion-information:before, .ion-information-circled:before, .ion-ionic:before, .ion-ios7-alarm:before, .ion-ios7-alarm-outline:before, .ion-ios7-albums:before, .ion-ios7-albums-outline:before, .ion-ios7-americanfootball:before, .ion-ios7-americanfootball-outline:before, .ion-ios7-analytics:before, .ion-ios7-analytics-outline:before, .ion-ios7-arrow-back:before, .ion-ios7-arrow-down:before, .ion-ios7-arrow-forward:before, .ion-ios7-arrow-left:before, .ion-ios7-arrow-right:before, .ion-ios7-arrow-thin-down:before, .ion-ios7-arrow-thin-left:before, .ion-ios7-arrow-thin-right:before, .ion-ios7-arrow-thin-up:before, .ion-ios7-arrow-up:before, .ion-ios7-at:before, .ion-ios7-at-outline:before, .ion-ios7-barcode:before, .ion-ios7-barcode-outline:before, .ion-ios7-baseball:before, .ion-ios7-baseball-outline:before, .ion-ios7-basketball:before, .ion-ios7-basketball-outline:before, .ion-ios7-bell:before, .ion-ios7-bell-outline:before, .ion-ios7-bolt:before, .ion-ios7-bolt-outline:before, .ion-ios7-bookmarks:before, .ion-ios7-bookmarks-outline:before, .ion-ios7-box:before, .ion-ios7-box-outline:before, .ion-ios7-briefcase:before, .ion-ios7-briefcase-outline:before, .ion-ios7-browsers:before, .ion-ios7-browsers-outline:before, .ion-ios7-calculator:before, .ion-ios7-calculator-outline:before, .ion-ios7-calendar:before, .ion-ios7-calendar-outline:before, .ion-ios7-camera:before, .ion-ios7-camera-outline:before, .ion-ios7-cart:before, .ion-ios7-cart-outline:before, .ion-ios7-chatboxes:before, .ion-ios7-chatboxes-outline:before, .ion-ios7-chatbubble:before, .ion-ios7-chatbubble-outline:before, .ion-ios7-checkmark:before, .ion-ios7-checkmark-empty:before, .ion-ios7-checkmark-outline:before, .ion-ios7-circle-filled:before, .ion-ios7-circle-outline:before, .ion-ios7-clock:before, .ion-ios7-clock-outline:before, .ion-ios7-close:before, .ion-ios7-close-empty:before, .ion-ios7-close-outline:before, .ion-ios7-cloud:before, .ion-ios7-cloud-download:before, .ion-ios7-cloud-download-outline:before, .ion-ios7-cloud-outline:before, .ion-ios7-cloud-upload:before, .ion-ios7-cloud-upload-outline:before, .ion-ios7-cloudy:before, .ion-ios7-cloudy-night:before, .ion-ios7-cloudy-night-outline:before, .ion-ios7-cloudy-outline:before, .ion-ios7-cog:before, .ion-ios7-cog-outline:before, .ion-ios7-compose:before, .ion-ios7-compose-outline:before, .ion-ios7-contact:before, .ion-ios7-contact-outline:before, .ion-ios7-copy:before, .ion-ios7-copy-outline:before, .ion-ios7-download:before, .ion-ios7-download-outline:before, .ion-ios7-drag:before, .ion-ios7-email:before, .ion-ios7-email-outline:before, .ion-ios7-expand:before, .ion-ios7-eye:before, .ion-ios7-eye-outline:before, .ion-ios7-fastforward:before, .ion-ios7-fastforward-outline:before, .ion-ios7-filing:before, .ion-ios7-filing-outline:before, .ion-ios7-film:before, .ion-ios7-film-outline:before, .ion-ios7-flag:before, .ion-ios7-flag-outline:before, .ion-ios7-folder:before, .ion-ios7-folder-outline:before, .ion-ios7-football:before, .ion-ios7-football-outline:before, .ion-ios7-gear:before, .ion-ios7-gear-outline:before, .ion-ios7-glasses:before, .ion-ios7-glasses-outline:before, .ion-ios7-heart:before, .ion-ios7-heart-outline:before, .ion-ios7-help:before, .ion-ios7-help-empty:before, .ion-ios7-help-outline:before, .ion-ios7-home:before, .ion-ios7-home-outline:before, .ion-ios7-infinite:before, .ion-ios7-infinite-outline:before, .ion-ios7-information:before, .ion-ios7-information-empty:before, .ion-ios7-information-outline:before, .ion-ios7-ionic-outline:before, .ion-ios7-keypad:before, .ion-ios7-keypad-outline:before, .ion-ios7-lightbulb:before, .ion-ios7-lightbulb-outline:before, .ion-ios7-location:before, .ion-ios7-location-outline:before, .ion-ios7-locked:before, .ion-ios7-locked-outline:before, .ion-ios7-loop:before, .ion-ios7-loop-strong:before, .ion-ios7-medkit:before, .ion-ios7-medkit-outline:before, .ion-ios7-mic:before, .ion-ios7-mic-off:before, .ion-ios7-mic-outline:before, .ion-ios7-minus:before, .ion-ios7-minus-empty:before, .ion-ios7-minus-outline:before, .ion-ios7-monitor:before, .ion-ios7-monitor-outline:before, .ion-ios7-moon:before, .ion-ios7-moon-outline:before, .ion-ios7-more:before, .ion-ios7-more-outline:before, .ion-ios7-musical-note:before, .ion-ios7-musical-notes:before, .ion-ios7-navigate:before, .ion-ios7-navigate-outline:before, .ion-ios7-paper:before, .ion-ios7-paper-outline:before, .ion-ios7-paperplane:before, .ion-ios7-paperplane-outline:before, .ion-ios7-partlysunny:before, .ion-ios7-partlysunny-outline:before, .ion-ios7-pause:before, .ion-ios7-pause-outline:before, .ion-ios7-paw:before, .ion-ios7-paw-outline:before, .ion-ios7-people:before, .ion-ios7-people-outline:before, .ion-ios7-person:before, .ion-ios7-person-outline:before, .ion-ios7-personadd:before, .ion-ios7-personadd-outline:before, .ion-ios7-photos:before, .ion-ios7-photos-outline:before, .ion-ios7-pie:before, .ion-ios7-pie-outline:before, .ion-ios7-play:before, .ion-ios7-play-outline:before, .ion-ios7-plus:before, .ion-ios7-plus-empty:before, .ion-ios7-plus-outline:before, .ion-ios7-pricetag:before, .ion-ios7-pricetag-outline:before, .ion-ios7-pricetags:before, .ion-ios7-pricetags-outline:before, .ion-ios7-printer:before, .ion-ios7-printer-outline:before, .ion-ios7-pulse:before, .ion-ios7-pulse-strong:before, .ion-ios7-rainy:before, .ion-ios7-rainy-outline:before, .ion-ios7-recording:before, .ion-ios7-recording-outline:before, .ion-ios7-redo:before, .ion-ios7-redo-outline:before, .ion-ios7-refresh:before, .ion-ios7-refresh-empty:before, .ion-ios7-refresh-outline:before, .ion-ios7-reload:before, .ion-ios7-reloading:before, .ion-ios7-reverse-camera:before, .ion-ios7-reverse-camera-outline:before, .ion-ios7-rewind:before, .ion-ios7-rewind-outline:before, .ion-ios7-search:before, .ion-ios7-search-strong:before, .ion-ios7-settings:before, .ion-ios7-settings-strong:before, .ion-ios7-shrink:before, .ion-ios7-skipbackward:before, .ion-ios7-skipbackward-outline:before, .ion-ios7-skipforward:before, .ion-ios7-skipforward-outline:before, .ion-ios7-snowy:before, .ion-ios7-speedometer:before, .ion-ios7-speedometer-outline:before, .ion-ios7-star:before, .ion-ios7-star-half:before, .ion-ios7-star-outline:before, .ion-ios7-stopwatch:before, .ion-ios7-stopwatch-outline:before, .ion-ios7-sunny:before, .ion-ios7-sunny-outline:before, .ion-ios7-telephone:before, .ion-ios7-telephone-outline:before, .ion-ios7-tennisball:before, .ion-ios7-tennisball-outline:before, .ion-ios7-thunderstorm:before, .ion-ios7-thunderstorm-outline:before, .ion-ios7-time:before, .ion-ios7-time-outline:before, .ion-ios7-timer:before, .ion-ios7-timer-outline:before, .ion-ios7-toggle:before, .ion-ios7-toggle-outline:before, .ion-ios7-trash:before, .ion-ios7-trash-outline:before, .ion-ios7-undo:before, .ion-ios7-undo-outline:before, .ion-ios7-unlocked:before, .ion-ios7-unlocked-outline:before, .ion-ios7-upload:before, .ion-ios7-upload-outline:before, .ion-ios7-videocam:before, .ion-ios7-videocam-outline:before, .ion-ios7-volume-high:before, .ion-ios7-volume-low:before, .ion-ios7-wineglass:before, .ion-ios7-wineglass-outline:before, .ion-ios7-world:before, .ion-ios7-world-outline:before, .ion-ipad:before, .ion-iphone:before, .ion-ipod:before, .ion-jet:before, .ion-key:before, .ion-knife:before, .ion-laptop:before, .ion-leaf:before, .ion-levels:before, .ion-lightbulb:before, .ion-link:before, .ion-load-a:before, .ion-loading-a:before, .ion-load-b:before, .ion-loading-b:before, .ion-load-c:before, .ion-loading-c:before, .ion-load-d:before, .ion-loading-d:before, .ion-location:before, .ion-locked:before, .ion-log-in:before, .ion-log-out:before, .ion-loop:before, .ion-looping:before, .ion-magnet:before, .ion-male:before, .ion-man:before, .ion-map:before, .ion-medkit:before, .ion-merge:before, .ion-mic-a:before, .ion-mic-b:before, .ion-mic-c:before, .ion-minus:before, .ion-minus-circled:before, .ion-minus-round:before, .ion-model-s:before, .ion-monitor:before, .ion-more:before, .ion-mouse:before, .ion-music-note:before, .ion-navicon:before, .ion-navicon-round:before, .ion-navigate:before, .ion-network:before, .ion-no-smoking:before, .ion-nuclear:before, .ion-outlet:before, .ion-paper-airplane:before, .ion-paperclip:before, .ion-pause:before, .ion-person:before, .ion-person-add:before, .ion-person-stalker:before, .ion-pie-graph:before, .ion-pin:before, .ion-pinpoint:before, .ion-pizza:before, .ion-plane:before, .ion-planet:before, .ion-play:before, .ion-playstation:before, .ion-plus:before, .ion-plus-circled:before, .ion-plus-round:before, .ion-podium:before, .ion-pound:before, .ion-power:before, .ion-pricetag:before, .ion-pricetags:before, .ion-printer:before, .ion-pull-request:before, .ion-qr-scanner:before, .ion-quote:before, .ion-radio-waves:before, .ion-record:before, .ion-refresh:before, .ion-refreshing:before, .ion-reply:before, .ion-reply-all:before, .ion-ribbon-a:before, .ion-ribbon-b:before, .ion-sad:before, .ion-scissors:before, .ion-search:before, .ion-settings:before, .ion-share:before, .ion-shuffle:before, .ion-skip-backward:before, .ion-skip-forward:before, .ion-social-android:before, .ion-social-android-outline:before, .ion-social-apple:before, .ion-social-apple-outline:before, .ion-social-bitcoin:before, .ion-social-bitcoin-outline:before, .ion-social-buffer:before, .ion-social-buffer-outline:before, .ion-social-designernews:before, .ion-social-designernews-outline:before, .ion-social-dribbble:before, .ion-social-dribbble-outline:before, .ion-social-dropbox:before, .ion-social-dropbox-outline:before, .ion-social-facebook:before, .ion-social-facebook-outline:before, .ion-social-foursquare:before, .ion-social-foursquare-outline:before, .ion-social-freebsd-devil:before, .ion-social-github:before, .ion-social-github-outline:before, .ion-social-google:before, .ion-social-google-outline:before, .ion-social-googleplus:before, .ion-social-googleplus-outline:before, .ion-social-hackernews:before, .ion-social-hackernews-outline:before, .ion-social-instagram:before, .ion-social-instagram-outline:before, .ion-social-linkedin:before, .ion-social-linkedin-outline:before, .ion-social-pinterest:before, .ion-social-pinterest-outline:before, .ion-social-reddit:before, .ion-social-reddit-outline:before, .ion-social-rss:before, .ion-social-rss-outline:before, .ion-social-skype:before, .ion-social-skype-outline:before, .ion-social-tumblr:before, .ion-social-tumblr-outline:before, .ion-social-tux:before, .ion-social-twitter:before, .ion-social-twitter-outline:before, .ion-social-usd:before, .ion-social-usd-outline:before, .ion-social-vimeo:before, .ion-social-vimeo-outline:before, .ion-social-windows:before, .ion-social-windows-outline:before, .ion-social-wordpress:before, .ion-social-wordpress-outline:before, .ion-social-yahoo:before, .ion-social-yahoo-outline:before, .ion-social-youtube:before, .ion-social-youtube-outline:before, .ion-speakerphone:before, .ion-speedometer:before, .ion-spoon:before, .ion-star:before, .ion-stats-bars:before, .ion-steam:before, .ion-stop:before, .ion-thermometer:before, .ion-thumbsdown:before, .ion-thumbsup:before, .ion-toggle:before, .ion-toggle-filled:before, .ion-trash-a:before, .ion-trash-b:before, .ion-trophy:before, .ion-umbrella:before, .ion-university:before, .ion-unlocked:before, .ion-upload:before, .ion-usb:before, .ion-videocamera:before, .ion-volume-high:before, .ion-volume-low:before, .ion-volume-medium:before, .ion-volume-mute:before, .ion-wand:before, .ion-waterdrop:before, .ion-wifi:before, .ion-wineglass:before, .ion-woman:before, .ion-wrench:before, .ion-xbox:before { display: inline-block; font-family: "Ionicons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.ion-spin, .ion-loading-a, .ion-loading-b, .ion-loading-c, .ion-loading-d, .ion-looping, .ion-refreshing, .ion-ios7-reloading { animation: spin 1s infinite linear; }
@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); } }
.ion-loading-a { animation-timing-function: steps(8, start); }

.ion-alert:before { content: "\f101"; }

.ion-alert-circled:before { content: "\f100"; }

.ion-android-add:before { content: "\f2c7"; }

.ion-android-add-contact:before { content: "\f2c6"; }

.ion-android-alarm:before { content: "\f2c8"; }

.ion-android-archive:before { content: "\f2c9"; }

.ion-android-arrow-back:before { content: "\f2ca"; }

.ion-android-arrow-down-left:before { content: "\f2cb"; }

.ion-android-arrow-down-right:before { content: "\f2cc"; }

.ion-android-arrow-forward:before { content: "\f30f"; }

.ion-android-arrow-up-left:before { content: "\f2cd"; }

.ion-android-arrow-up-right:before { content: "\f2ce"; }

.ion-android-battery:before { content: "\f2cf"; }

.ion-android-book:before { content: "\f2d0"; }

.ion-android-calendar:before { content: "\f2d1"; }

.ion-android-call:before { content: "\f2d2"; }

.ion-android-camera:before { content: "\f2d3"; }

.ion-android-chat:before { content: "\f2d4"; }

.ion-android-checkmark:before { content: "\f2d5"; }

.ion-android-clock:before { content: "\f2d6"; }

.ion-android-close:before { content: "\f2d7"; }

.ion-android-contact:before { content: "\f2d8"; }

.ion-android-contacts:before { content: "\f2d9"; }

.ion-android-data:before { content: "\f2da"; }

.ion-android-developer:before { content: "\f2db"; }

.ion-android-display:before { content: "\f2dc"; }

.ion-android-download:before { content: "\f2dd"; }

.ion-android-drawer:before { content: "\f310"; }

.ion-android-dropdown:before { content: "\f2de"; }

.ion-android-earth:before { content: "\f2df"; }

.ion-android-folder:before { content: "\f2e0"; }

.ion-android-forums:before { content: "\f2e1"; }

.ion-android-friends:before { content: "\f2e2"; }

.ion-android-hand:before { content: "\f2e3"; }

.ion-android-image:before { content: "\f2e4"; }

.ion-android-inbox:before { content: "\f2e5"; }

.ion-android-information:before { content: "\f2e6"; }

.ion-android-keypad:before { content: "\f2e7"; }

.ion-android-lightbulb:before { content: "\f2e8"; }

.ion-android-locate:before { content: "\f2e9"; }

.ion-android-location:before { content: "\f2ea"; }

.ion-android-mail:before { content: "\f2eb"; }

.ion-android-microphone:before { content: "\f2ec"; }

.ion-android-mixer:before { content: "\f2ed"; }

.ion-android-more:before { content: "\f2ee"; }

.ion-android-note:before { content: "\f2ef"; }

.ion-android-playstore:before { content: "\f2f0"; }

.ion-android-printer:before { content: "\f2f1"; }

.ion-android-promotion:before { content: "\f2f2"; }

.ion-android-reminder:before { content: "\f2f3"; }

.ion-android-remove:before { content: "\f2f4"; }

.ion-android-search:before { content: "\f2f5"; }

.ion-android-send:before { content: "\f2f6"; }

.ion-android-settings:before { content: "\f2f7"; }

.ion-android-share:before { content: "\f2f8"; }

.ion-android-social:before { content: "\f2fa"; }

.ion-android-social-user:before { content: "\f2f9"; }

.ion-android-sort:before { content: "\f2fb"; }

.ion-android-stair-drawer:before { content: "\f311"; }

.ion-android-star:before { content: "\f2fc"; }

.ion-android-stopwatch:before { content: "\f2fd"; }

.ion-android-storage:before { content: "\f2fe"; }

.ion-android-system-back:before { content: "\f2ff"; }

.ion-android-system-home:before { content: "\f300"; }

.ion-android-system-windows:before { content: "\f301"; }

.ion-android-timer:before { content: "\f302"; }

.ion-android-trash:before { content: "\f303"; }

.ion-android-user-menu:before { content: "\f312"; }

.ion-android-volume:before { content: "\f304"; }

.ion-android-wifi:before { content: "\f305"; }

.ion-aperture:before { content: "\f313"; }

.ion-archive:before { content: "\f102"; }

.ion-arrow-down-a:before { content: "\f103"; }

.ion-arrow-down-b:before { content: "\f104"; }

.ion-arrow-down-c:before { content: "\f105"; }

.ion-arrow-expand:before { content: "\f25e"; }

.ion-arrow-graph-down-left:before { content: "\f25f"; }

.ion-arrow-graph-down-right:before { content: "\f260"; }

.ion-arrow-graph-up-left:before { content: "\f261"; }

.ion-arrow-graph-up-right:before { content: "\f262"; }

.ion-arrow-left-a:before { content: "\f106"; }

.ion-arrow-left-b:before { content: "\f107"; }

.ion-arrow-left-c:before { content: "\f108"; }

.ion-arrow-move:before { content: "\f263"; }

.ion-arrow-resize:before { content: "\f264"; }

.ion-arrow-return-left:before { content: "\f265"; }

.ion-arrow-return-right:before { content: "\f266"; }

.ion-arrow-right-a:before { content: "\f109"; }

.ion-arrow-right-b:before { content: "\f10a"; }

.ion-arrow-right-c:before { content: "\f10b"; }

.ion-arrow-shrink:before { content: "\f267"; }

.ion-arrow-swap:before { content: "\f268"; }

.ion-arrow-up-a:before { content: "\f10c"; }

.ion-arrow-up-b:before { content: "\f10d"; }

.ion-arrow-up-c:before { content: "\f10e"; }

.ion-asterisk:before { content: "\f314"; }

.ion-at:before { content: "\f10f"; }

.ion-bag:before { content: "\f110"; }

.ion-battery-charging:before { content: "\f111"; }

.ion-battery-empty:before { content: "\f112"; }

.ion-battery-full:before { content: "\f113"; }

.ion-battery-half:before { content: "\f114"; }

.ion-battery-low:before { content: "\f115"; }

.ion-beaker:before { content: "\f269"; }

.ion-beer:before { content: "\f26a"; }

.ion-bluetooth:before { content: "\f116"; }

.ion-bonfire:before { content: "\f315"; }

.ion-bookmark:before { content: "\f26b"; }

.ion-briefcase:before { content: "\f26c"; }

.ion-bug:before { content: "\f2be"; }

.ion-calculator:before { content: "\f26d"; }

.ion-calendar:before { content: "\f117"; }

.ion-camera:before { content: "\f118"; }

.ion-card:before { content: "\f119"; }

.ion-cash:before { content: "\f316"; }

.ion-chatbox:before { content: "\f11b"; }

.ion-chatbox-working:before { content: "\f11a"; }

.ion-chatboxes:before { content: "\f11c"; }

.ion-chatbubble:before { content: "\f11e"; }

.ion-chatbubble-working:before { content: "\f11d"; }

.ion-chatbubbles:before { content: "\f11f"; }

.ion-checkmark:before { content: "\f122"; }

.ion-checkmark-circled:before { content: "\f120"; }

.ion-checkmark-round:before { content: "\f121"; }

.ion-chevron-down:before { content: "\f123"; }

.ion-chevron-left:before { content: "\f124"; }

.ion-chevron-right:before { content: "\f125"; }

.ion-chevron-up:before { content: "\f126"; }

.ion-clipboard:before { content: "\f127"; }

.ion-clock:before { content: "\f26e"; }

.ion-close:before { content: "\f12a"; }

.ion-close-circled:before { content: "\f128"; }

.ion-close-round:before { content: "\f129"; }

.ion-closed-captioning:before { content: "\f317"; }

.ion-cloud:before { content: "\f12b"; }

.ion-code:before { content: "\f271"; }

.ion-code-download:before { content: "\f26f"; }

.ion-code-working:before { content: "\f270"; }

.ion-coffee:before { content: "\f272"; }

.ion-compass:before { content: "\f273"; }

.ion-compose:before { content: "\f12c"; }

.ion-connection-bars:before { content: "\f274"; }

.ion-contrast:before { /* IE 9 */ /* Chrome, Safari, Opera */        transform: rotate(270deg); content: "\f275"; }

.ion-cube:before { content: "\f318"; }

.ion-disc:before { content: "\f12d"; }

.ion-document:before { content: "\f12f"; }

.ion-document-text:before { content: "\f12e"; }

.ion-drag:before { content: "\f130"; }

.ion-earth:before { content: "\f276"; }

.ion-edit:before { content: "\f2bf"; }

.ion-egg:before { content: "\f277"; }

.ion-eject:before { content: "\f131"; }

.ion-email:before { content: "\f132"; }

.ion-eye:before { content: "\f133"; }

.ion-eye-disabled:before { content: "\f306"; }

.ion-female:before { content: "\f278"; }

.ion-filing:before { content: "\f134"; }

.ion-film-marker:before { content: "\f135"; }

.ion-fireball:before { content: "\f319"; }

.ion-flag:before { content: "\f279"; }

.ion-flame:before { content: "\f31a"; }

.ion-flash:before { content: "\f137"; }

.ion-flash-off:before { content: "\f136"; }

.ion-flask:before { content: "\f138"; }

.ion-folder:before { content: "\f139"; }

.ion-fork:before { content: "\f27a"; }

.ion-fork-repo:before { content: "\f2c0"; }

.ion-forward:before { content: "\f13a"; }

.ion-funnel:before { content: "\f31b"; }

.ion-game-controller-a:before { content: "\f13b"; }

.ion-game-controller-b:before { content: "\f13c"; }

.ion-gear-a:before { content: "\f13d"; }

.ion-gear-b:before { content: "\f13e"; }

.ion-grid:before { content: "\f13f"; }

.ion-hammer:before { content: "\f27b"; }

.ion-happy:before { content: "\f31c"; }

.ion-headphone:before { content: "\f140"; }

.ion-heart:before { content: "\f141"; }

.ion-heart-broken:before { content: "\f31d"; }

.ion-help:before { content: "\f143"; }

.ion-help-buoy:before { content: "\f27c"; }

.ion-help-circled:before { content: "\f142"; }

.ion-home:before { content: "\f144"; }

.ion-icecream:before { content: "\f27d"; }

.ion-icon-social-google-plus:before { content: "\f146"; }

.ion-icon-social-google-plus-outline:before { content: "\f145"; }

.ion-image:before { content: "\f147"; }

.ion-images:before { content: "\f148"; }

.ion-information:before { content: "\f14a"; }

.ion-information-circled:before { content: "\f149"; }

.ion-ionic:before { content: "\f14b"; }

.ion-ios7-alarm:before { content: "\f14d"; }

.ion-ios7-alarm-outline:before { content: "\f14c"; }

.ion-ios7-albums:before { content: "\f14f"; }

.ion-ios7-albums-outline:before { content: "\f14e"; }

.ion-ios7-americanfootball:before { content: "\f31f"; }

.ion-ios7-americanfootball-outline:before { content: "\f31e"; }

.ion-ios7-analytics:before { content: "\f321"; }

.ion-ios7-analytics-outline:before { content: "\f320"; }

.ion-ios7-arrow-back:before { content: "\f150"; }

.ion-ios7-arrow-down:before { content: "\f151"; }

.ion-ios7-arrow-forward:before { content: "\f152"; }

.ion-ios7-arrow-left:before { content: "\f153"; }

.ion-ios7-arrow-right:before { content: "\f154"; }

.ion-ios7-arrow-thin-down:before { content: "\f27e"; }

.ion-ios7-arrow-thin-left:before { content: "\f27f"; }

.ion-ios7-arrow-thin-right:before { content: "\f280"; }

.ion-ios7-arrow-thin-up:before { content: "\f281"; }

.ion-ios7-arrow-up:before { content: "\f155"; }

.ion-ios7-at:before { content: "\f157"; }

.ion-ios7-at-outline:before { content: "\f156"; }

.ion-ios7-barcode:before { content: "\f323"; }

.ion-ios7-barcode-outline:before { content: "\f322"; }

.ion-ios7-baseball:before { content: "\f325"; }

.ion-ios7-baseball-outline:before { content: "\f324"; }

.ion-ios7-basketball:before { content: "\f327"; }

.ion-ios7-basketball-outline:before { content: "\f326"; }

.ion-ios7-bell:before { content: "\f159"; }

.ion-ios7-bell-outline:before { content: "\f158"; }

.ion-ios7-bolt:before { content: "\f15b"; }

.ion-ios7-bolt-outline:before { content: "\f15a"; }

.ion-ios7-bookmarks:before { content: "\f15d"; }

.ion-ios7-bookmarks-outline:before { content: "\f15c"; }

.ion-ios7-box:before { content: "\f15f"; }

.ion-ios7-box-outline:before { content: "\f15e"; }

.ion-ios7-briefcase:before { content: "\f283"; }

.ion-ios7-briefcase-outline:before { content: "\f282"; }

.ion-ios7-browsers:before { content: "\f161"; }

.ion-ios7-browsers-outline:before { content: "\f160"; }

.ion-ios7-calculator:before { content: "\f285"; }

.ion-ios7-calculator-outline:before { content: "\f284"; }

.ion-ios7-calendar:before { content: "\f163"; }

.ion-ios7-calendar-outline:before { content: "\f162"; }

.ion-ios7-camera:before { content: "\f165"; }

.ion-ios7-camera-outline:before { content: "\f164"; }

.ion-ios7-cart:before { content: "\f167"; }

.ion-ios7-cart-outline:before { content: "\f166"; }

.ion-ios7-chatboxes:before { content: "\f169"; }

.ion-ios7-chatboxes-outline:before { content: "\f168"; }

.ion-ios7-chatbubble:before { content: "\f16b"; }

.ion-ios7-chatbubble-outline:before { content: "\f16a"; }

.ion-ios7-checkmark:before { content: "\f16e"; }

.ion-ios7-checkmark-empty:before { content: "\f16c"; }

.ion-ios7-checkmark-outline:before { content: "\f16d"; }

.ion-ios7-circle-filled:before { content: "\f16f"; }

.ion-ios7-circle-outline:before { content: "\f170"; }

.ion-ios7-clock:before { content: "\f172"; }

.ion-ios7-clock-outline:before { content: "\f171"; }

.ion-ios7-close:before { content: "\f2bc"; }

.ion-ios7-close-empty:before { content: "\f2bd"; }

.ion-ios7-close-outline:before { content: "\f2bb"; }

.ion-ios7-cloud:before { content: "\f178"; }

.ion-ios7-cloud-download:before { content: "\f174"; }

.ion-ios7-cloud-download-outline:before { content: "\f173"; }

.ion-ios7-cloud-outline:before { content: "\f175"; }

.ion-ios7-cloud-upload:before { content: "\f177"; }

.ion-ios7-cloud-upload-outline:before { content: "\f176"; }

.ion-ios7-cloudy:before { content: "\f17a"; }

.ion-ios7-cloudy-night:before { content: "\f308"; }

.ion-ios7-cloudy-night-outline:before { content: "\f307"; }

.ion-ios7-cloudy-outline:before { content: "\f179"; }

.ion-ios7-cog:before { content: "\f17c"; }

.ion-ios7-cog-outline:before { content: "\f17b"; }

.ion-ios7-compose:before { content: "\f17e"; }

.ion-ios7-compose-outline:before { content: "\f17d"; }

.ion-ios7-contact:before { content: "\f180"; }

.ion-ios7-contact-outline:before { content: "\f17f"; }

.ion-ios7-copy:before { content: "\f182"; }

.ion-ios7-copy-outline:before { content: "\f181"; }

.ion-ios7-download:before { content: "\f184"; }

.ion-ios7-download-outline:before { content: "\f183"; }

.ion-ios7-drag:before { content: "\f185"; }

.ion-ios7-email:before { content: "\f187"; }

.ion-ios7-email-outline:before { content: "\f186"; }

.ion-ios7-expand:before { content: "\f30d"; }

.ion-ios7-eye:before { content: "\f189"; }

.ion-ios7-eye-outline:before { content: "\f188"; }

.ion-ios7-fastforward:before { content: "\f18b"; }

.ion-ios7-fastforward-outline:before { content: "\f18a"; }

.ion-ios7-filing:before { content: "\f18d"; }

.ion-ios7-filing-outline:before { content: "\f18c"; }

.ion-ios7-film:before { content: "\f18f"; }

.ion-ios7-film-outline:before { content: "\f18e"; }

.ion-ios7-flag:before { content: "\f191"; }

.ion-ios7-flag-outline:before { content: "\f190"; }

.ion-ios7-folder:before { content: "\f193"; }

.ion-ios7-folder-outline:before { content: "\f192"; }

.ion-ios7-football:before { content: "\f329"; }

.ion-ios7-football-outline:before { content: "\f328"; }

.ion-ios7-gear:before { content: "\f195"; }

.ion-ios7-gear-outline:before { content: "\f194"; }

.ion-ios7-glasses:before { content: "\f197"; }

.ion-ios7-glasses-outline:before { content: "\f196"; }

.ion-ios7-heart:before { content: "\f199"; }

.ion-ios7-heart-outline:before { content: "\f198"; }

.ion-ios7-help:before { content: "\f19c"; }

.ion-ios7-help-empty:before { content: "\f19a"; }

.ion-ios7-help-outline:before { content: "\f19b"; }

.ion-ios7-home:before { content: "\f32b"; }

.ion-ios7-home-outline:before { content: "\f32a"; }

.ion-ios7-infinite:before { content: "\f19e"; }

.ion-ios7-infinite-outline:before { content: "\f19d"; }

.ion-ios7-information:before { content: "\f1a1"; }

.ion-ios7-information-empty:before { content: "\f19f"; }

.ion-ios7-information-outline:before { content: "\f1a0"; }

.ion-ios7-ionic-outline:before { content: "\f1a2"; }

.ion-ios7-keypad:before { content: "\f1a4"; }

.ion-ios7-keypad-outline:before { content: "\f1a3"; }

.ion-ios7-lightbulb:before { content: "\f287"; }

.ion-ios7-lightbulb-outline:before { content: "\f286"; }

.ion-ios7-location:before { content: "\f1a6"; }

.ion-ios7-location-outline:before { content: "\f1a5"; }

.ion-ios7-locked:before { content: "\f1a8"; }

.ion-ios7-locked-outline:before { content: "\f1a7"; }

.ion-ios7-loop:before { content: "\f32d"; }

.ion-ios7-loop-strong:before { content: "\f32c"; }

.ion-ios7-medkit:before { content: "\f289"; }

.ion-ios7-medkit-outline:before { content: "\f288"; }

.ion-ios7-mic:before { content: "\f1ab"; }

.ion-ios7-mic-off:before { content: "\f1a9"; }

.ion-ios7-mic-outline:before { content: "\f1aa"; }

.ion-ios7-minus:before { content: "\f1ae"; }

.ion-ios7-minus-empty:before { content: "\f1ac"; }

.ion-ios7-minus-outline:before { content: "\f1ad"; }

.ion-ios7-monitor:before { content: "\f1b0"; }

.ion-ios7-monitor-outline:before { content: "\f1af"; }

.ion-ios7-moon:before { content: "\f1b2"; }

.ion-ios7-moon-outline:before { content: "\f1b1"; }

.ion-ios7-more:before { content: "\f1b4"; }

.ion-ios7-more-outline:before { content: "\f1b3"; }

.ion-ios7-musical-note:before { content: "\f1b5"; }

.ion-ios7-musical-notes:before { content: "\f1b6"; }

.ion-ios7-navigate:before { content: "\f1b8"; }

.ion-ios7-navigate-outline:before { content: "\f1b7"; }

.ion-ios7-paper:before { content: "\f32f"; }

.ion-ios7-paper-outline:before { content: "\f32e"; }

.ion-ios7-paperplane:before { content: "\f1ba"; }

.ion-ios7-paperplane-outline:before { content: "\f1b9"; }

.ion-ios7-partlysunny:before { content: "\f1bc"; }

.ion-ios7-partlysunny-outline:before { content: "\f1bb"; }

.ion-ios7-pause:before { content: "\f1be"; }

.ion-ios7-pause-outline:before { content: "\f1bd"; }

.ion-ios7-paw:before { content: "\f331"; }

.ion-ios7-paw-outline:before { content: "\f330"; }

.ion-ios7-people:before { content: "\f1c0"; }

.ion-ios7-people-outline:before { content: "\f1bf"; }

.ion-ios7-person:before { content: "\f1c2"; }

.ion-ios7-person-outline:before { content: "\f1c1"; }

.ion-ios7-personadd:before { content: "\f1c4"; }

.ion-ios7-personadd-outline:before { content: "\f1c3"; }

.ion-ios7-photos:before { content: "\f1c6"; }

.ion-ios7-photos-outline:before { content: "\f1c5"; }

.ion-ios7-pie:before { content: "\f28b"; }

.ion-ios7-pie-outline:before { content: "\f28a"; }

.ion-ios7-play:before { content: "\f1c8"; }

.ion-ios7-play-outline:before { content: "\f1c7"; }

.ion-ios7-plus:before { content: "\f1cb"; }

.ion-ios7-plus-empty:before { content: "\f1c9"; }

.ion-ios7-plus-outline:before { content: "\f1ca"; }

.ion-ios7-pricetag:before { content: "\f28d"; }

.ion-ios7-pricetag-outline:before { content: "\f28c"; }

.ion-ios7-pricetags:before { content: "\f333"; }

.ion-ios7-pricetags-outline:before { content: "\f332"; }

.ion-ios7-printer:before { content: "\f1cd"; }

.ion-ios7-printer-outline:before { content: "\f1cc"; }

.ion-ios7-pulse:before { content: "\f335"; }

.ion-ios7-pulse-strong:before { content: "\f334"; }

.ion-ios7-rainy:before { content: "\f1cf"; }

.ion-ios7-rainy-outline:before { content: "\f1ce"; }

.ion-ios7-recording:before { content: "\f1d1"; }

.ion-ios7-recording-outline:before { content: "\f1d0"; }

.ion-ios7-redo:before { content: "\f1d3"; }

.ion-ios7-redo-outline:before { content: "\f1d2"; }

.ion-ios7-refresh:before { content: "\f1d6"; }

.ion-ios7-refresh-empty:before { content: "\f1d4"; }

.ion-ios7-refresh-outline:before { content: "\f1d5"; }

.ion-ios7-reload:before, .ion-ios7-reloading:before { content: "\f28e"; }

.ion-ios7-reverse-camera:before { content: "\f337"; }

.ion-ios7-reverse-camera-outline:before { content: "\f336"; }

.ion-ios7-rewind:before { content: "\f1d8"; }

.ion-ios7-rewind-outline:before { content: "\f1d7"; }

.ion-ios7-search:before { content: "\f1da"; }

.ion-ios7-search-strong:before { content: "\f1d9"; }

.ion-ios7-settings:before { content: "\f339"; }

.ion-ios7-settings-strong:before { content: "\f338"; }

.ion-ios7-shrink:before { content: "\f30e"; }

.ion-ios7-skipbackward:before { content: "\f1dc"; }

.ion-ios7-skipbackward-outline:before { content: "\f1db"; }

.ion-ios7-skipforward:before { content: "\f1de"; }

.ion-ios7-skipforward-outline:before { content: "\f1dd"; }

.ion-ios7-snowy:before { content: "\f309"; }

.ion-ios7-speedometer:before { content: "\f290"; }

.ion-ios7-speedometer-outline:before { content: "\f28f"; }

.ion-ios7-star:before { content: "\f1e0"; }

.ion-ios7-star-half:before { content: "\f33a"; }

.ion-ios7-star-outline:before { content: "\f1df"; }

.ion-ios7-stopwatch:before { content: "\f1e2"; }

.ion-ios7-stopwatch-outline:before { content: "\f1e1"; }

.ion-ios7-sunny:before { content: "\f1e4"; }

.ion-ios7-sunny-outline:before { content: "\f1e3"; }

.ion-ios7-telephone:before { content: "\f1e6"; }

.ion-ios7-telephone-outline:before { content: "\f1e5"; }

.ion-ios7-tennisball:before { content: "\f33c"; }

.ion-ios7-tennisball-outline:before { content: "\f33b"; }

.ion-ios7-thunderstorm:before { content: "\f1e8"; }

.ion-ios7-thunderstorm-outline:before { content: "\f1e7"; }

.ion-ios7-time:before { content: "\f292"; }

.ion-ios7-time-outline:before { content: "\f291"; }

.ion-ios7-timer:before { content: "\f1ea"; }

.ion-ios7-timer-outline:before { content: "\f1e9"; }

.ion-ios7-toggle:before { content: "\f33e"; }

.ion-ios7-toggle-outline:before { content: "\f33d"; }

.ion-ios7-trash:before { content: "\f1ec"; }

.ion-ios7-trash-outline:before { content: "\f1eb"; }

.ion-ios7-undo:before { content: "\f1ee"; }

.ion-ios7-undo-outline:before { content: "\f1ed"; }

.ion-ios7-unlocked:before { content: "\f1f0"; }

.ion-ios7-unlocked-outline:before { content: "\f1ef"; }

.ion-ios7-upload:before { content: "\f1f2"; }

.ion-ios7-upload-outline:before { content: "\f1f1"; }

.ion-ios7-videocam:before { content: "\f1f4"; }

.ion-ios7-videocam-outline:before { content: "\f1f3"; }

.ion-ios7-volume-high:before { content: "\f1f5"; }

.ion-ios7-volume-low:before { content: "\f1f6"; }

.ion-ios7-wineglass:before { content: "\f294"; }

.ion-ios7-wineglass-outline:before { content: "\f293"; }

.ion-ios7-world:before { content: "\f1f8"; }

.ion-ios7-world-outline:before { content: "\f1f7"; }

.ion-ipad:before { content: "\f1f9"; }

.ion-iphone:before { content: "\f1fa"; }

.ion-ipod:before { content: "\f1fb"; }

.ion-jet:before { content: "\f295"; }

.ion-key:before { content: "\f296"; }

.ion-knife:before { content: "\f297"; }

.ion-laptop:before { content: "\f1fc"; }

.ion-leaf:before { content: "\f1fd"; }

.ion-levels:before { content: "\f298"; }

.ion-lightbulb:before { content: "\f299"; }

.ion-link:before { content: "\f1fe"; }

.ion-load-a:before, .ion-loading-a:before { content: "\f29a"; }

.ion-load-b:before, .ion-loading-b:before { content: "\f29b"; }

.ion-load-c:before, .ion-loading-c:before { content: "\f29c"; }

.ion-load-d:before, .ion-loading-d:before { content: "\f29d"; }

.ion-location:before { content: "\f1ff"; }

.ion-locked:before { content: "\f200"; }

.ion-log-in:before { content: "\f29e"; }

.ion-log-out:before { content: "\f29f"; }

.ion-loop:before, .ion-looping:before { content: "\f201"; }

.ion-magnet:before { content: "\f2a0"; }

.ion-male:before { content: "\f2a1"; }

.ion-man:before { content: "\f202"; }

.ion-map:before { content: "\f203"; }

.ion-medkit:before { content: "\f2a2"; }

.ion-merge:before { content: "\f33f"; }

.ion-mic-a:before { content: "\f204"; }

.ion-mic-b:before { content: "\f205"; }

.ion-mic-c:before { content: "\f206"; }

.ion-minus:before { content: "\f209"; }

.ion-minus-circled:before { content: "\f207"; }

.ion-minus-round:before { content: "\f208"; }

.ion-model-s:before { content: "\f2c1"; }

.ion-monitor:before { content: "\f20a"; }

.ion-more:before { content: "\f20b"; }

.ion-mouse:before { content: "\f340"; }

.ion-music-note:before { content: "\f20c"; }

.ion-navicon:before { content: "\f20e"; }

.ion-navicon-round:before { content: "\f20d"; }

.ion-navigate:before { content: "\f2a3"; }

.ion-network:before { content: "\f341"; }

.ion-no-smoking:before { content: "\f2c2"; }

.ion-nuclear:before { content: "\f2a4"; }

.ion-outlet:before { content: "\f342"; }

.ion-paper-airplane:before { content: "\f2c3"; }

.ion-paperclip:before { content: "\f20f"; }

.ion-pause:before { content: "\f210"; }

.ion-person:before { content: "\f213"; }

.ion-person-add:before { content: "\f211"; }

.ion-person-stalker:before { content: "\f212"; }

.ion-pie-graph:before { content: "\f2a5"; }

.ion-pin:before { content: "\f2a6"; }

.ion-pinpoint:before { content: "\f2a7"; }

.ion-pizza:before { content: "\f2a8"; }

.ion-plane:before { content: "\f214"; }

.ion-planet:before { content: "\f343"; }

.ion-play:before { content: "\f215"; }

.ion-playstation:before { content: "\f30a"; }

.ion-plus:before { content: "\f218"; }

.ion-plus-circled:before { content: "\f216"; }

.ion-plus-round:before { content: "\f217"; }

.ion-podium:before { content: "\f344"; }

.ion-pound:before { content: "\f219"; }

.ion-power:before { content: "\f2a9"; }

.ion-pricetag:before { content: "\f2aa"; }

.ion-pricetags:before { content: "\f2ab"; }

.ion-printer:before { content: "\f21a"; }

.ion-pull-request:before { content: "\f345"; }

.ion-qr-scanner:before { content: "\f346"; }

.ion-quote:before { content: "\f347"; }

.ion-radio-waves:before { content: "\f2ac"; }

.ion-record:before { content: "\f21b"; }

.ion-refresh:before, .ion-refreshing:before { content: "\f21c"; }

.ion-reply:before { content: "\f21e"; }

.ion-reply-all:before { content: "\f21d"; }

.ion-ribbon-a:before { content: "\f348"; }

.ion-ribbon-b:before { content: "\f349"; }

.ion-sad:before { content: "\f34a"; }

.ion-scissors:before { content: "\f34b"; }

.ion-search:before { content: "\f21f"; }

.ion-settings:before { content: "\f2ad"; }

.ion-share:before { content: "\f220"; }

.ion-shuffle:before { content: "\f221"; }

.ion-skip-backward:before { content: "\f222"; }

.ion-skip-forward:before { content: "\f223"; }

.ion-social-android:before { content: "\f225"; }

.ion-social-android-outline:before { content: "\f224"; }

.ion-social-apple:before { content: "\f227"; }

.ion-social-apple-outline:before { content: "\f226"; }

.ion-social-bitcoin:before { content: "\f2af"; }

.ion-social-bitcoin-outline:before { content: "\f2ae"; }

.ion-social-buffer:before { content: "\f229"; }

.ion-social-buffer-outline:before { content: "\f228"; }

.ion-social-designernews:before { content: "\f22b"; }

.ion-social-designernews-outline:before { content: "\f22a"; }

.ion-social-dribbble:before { content: "\f22d"; }

.ion-social-dribbble-outline:before { content: "\f22c"; }

.ion-social-dropbox:before { content: "\f22f"; }

.ion-social-dropbox-outline:before { content: "\f22e"; }

.ion-social-facebook:before { content: "\f231"; }

.ion-social-facebook-outline:before { content: "\f230"; }

.ion-social-foursquare:before { content: "\f34d"; }

.ion-social-foursquare-outline:before { content: "\f34c"; }

.ion-social-freebsd-devil:before { content: "\f2c4"; }

.ion-social-github:before { content: "\f233"; }

.ion-social-github-outline:before { content: "\f232"; }

.ion-social-google:before { content: "\f34f"; }

.ion-social-google-outline:before { content: "\f34e"; }

.ion-social-googleplus:before { content: "\f235"; }

.ion-social-googleplus-outline:before { content: "\f234"; }

.ion-social-hackernews:before { content: "\f237"; }

.ion-social-hackernews-outline:before { content: "\f236"; }

.ion-social-instagram:before { content: "\f351"; }

.ion-social-instagram-outline:before { content: "\f350"; }

.ion-social-linkedin:before { content: "\f239"; }

.ion-social-linkedin-outline:before { content: "\f238"; }

.ion-social-pinterest:before { content: "\f2b1"; }

.ion-social-pinterest-outline:before { content: "\f2b0"; }

.ion-social-reddit:before { content: "\f23b"; }

.ion-social-reddit-outline:before { content: "\f23a"; }

.ion-social-rss:before { content: "\f23d"; }

.ion-social-rss-outline:before { content: "\f23c"; }

.ion-social-skype:before { content: "\f23f"; }

.ion-social-skype-outline:before { content: "\f23e"; }

.ion-social-tumblr:before { content: "\f241"; }

.ion-social-tumblr-outline:before { content: "\f240"; }

.ion-social-tux:before { content: "\f2c5"; }

.ion-social-twitter:before { content: "\f243"; }

.ion-social-twitter-outline:before { content: "\f242"; }

.ion-social-usd:before { content: "\f353"; }

.ion-social-usd-outline:before { content: "\f352"; }

.ion-social-vimeo:before { content: "\f245"; }

.ion-social-vimeo-outline:before { content: "\f244"; }

.ion-social-windows:before { content: "\f247"; }

.ion-social-windows-outline:before { content: "\f246"; }

.ion-social-wordpress:before { content: "\f249"; }

.ion-social-wordpress-outline:before { content: "\f248"; }

.ion-social-yahoo:before { content: "\f24b"; }

.ion-social-yahoo-outline:before { content: "\f24a"; }

.ion-social-youtube:before { content: "\f24d"; }

.ion-social-youtube-outline:before { content: "\f24c"; }

.ion-speakerphone:before { content: "\f2b2"; }

.ion-speedometer:before { content: "\f2b3"; }

.ion-spoon:before { content: "\f2b4"; }

.ion-star:before { content: "\f24e"; }

.ion-stats-bars:before { content: "\f2b5"; }

.ion-steam:before { content: "\f30b"; }

.ion-stop:before { content: "\f24f"; }

.ion-thermometer:before { content: "\f2b6"; }

.ion-thumbsdown:before { content: "\f250"; }

.ion-thumbsup:before { content: "\f251"; }

.ion-toggle:before { content: "\f355"; }

.ion-toggle-filled:before { content: "\f354"; }

.ion-trash-a:before { content: "\f252"; }

.ion-trash-b:before { content: "\f253"; }

.ion-trophy:before { content: "\f356"; }

.ion-umbrella:before { content: "\f2b7"; }

.ion-university:before { content: "\f357"; }

.ion-unlocked:before { content: "\f254"; }

.ion-upload:before { content: "\f255"; }

.ion-usb:before { content: "\f2b8"; }

.ion-videocamera:before { content: "\f256"; }

.ion-volume-high:before { content: "\f257"; }

.ion-volume-low:before { content: "\f258"; }

.ion-volume-medium:before { content: "\f259"; }

.ion-volume-mute:before { content: "\f25a"; }

.ion-wand:before { content: "\f358"; }

.ion-waterdrop:before { content: "\f25b"; }

.ion-wifi:before { content: "\f25c"; }

.ion-wineglass:before { content: "\f2b9"; }

.ion-woman:before { content: "\f25d"; }

.ion-wrench:before { content: "\f2ba"; }

.ion-xbox:before { content: "\f30c"; }

@font-face {
	font-family: 'Pe-icon-7-stroke';
	src:url(1d449ea50ab8389ee078.eot?d7yf1v);
	src:url(1d449ea50ab8389ee078.eot?#iefixd7yf1v) format('embedded-opentype'),
		url(11f7c073b050d62afb33.woff?d7yf1v) format('woff'),
		url(7233a7aee250f9b77fba.ttf?d7yf1v) format('truetype'),
		url(09c6a96523589cb91799.svg?d7yf1v#Pe-icon-7-stroke) format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="pe-7s-"], [class*=" pe-7s-"] {
	display: inline-block;
	font-family: 'Pe-icon-7-stroke';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pe-7s-album:before {
	content: "\e6aa";
}
.pe-7s-arc:before {
	content: "\e6ab";
}
.pe-7s-back-2:before {
	content: "\e6ac";
}
.pe-7s-bandaid:before {
	content: "\e6ad";
}
.pe-7s-car:before {
	content: "\e6ae";
}
.pe-7s-diamond:before {
	content: "\e6af";
}
.pe-7s-door-lock:before {
	content: "\e6b0";
}
.pe-7s-eyedropper:before {
	content: "\e6b1";
}
.pe-7s-female:before {
	content: "\e6b2";
}
.pe-7s-gym:before {
	content: "\e6b3";
}
.pe-7s-hammer:before {
	content: "\e6b4";
}
.pe-7s-headphones:before {
	content: "\e6b5";
}
.pe-7s-helm:before {
	content: "\e6b6";
}
.pe-7s-hourglass:before {
	content: "\e6b7";
}
.pe-7s-leaf:before {
	content: "\e6b8";
}
.pe-7s-magic-wand:before {
	content: "\e6b9";
}
.pe-7s-male:before {
	content: "\e6ba";
}
.pe-7s-map-2:before {
	content: "\e6bb";
}
.pe-7s-next-2:before {
	content: "\e6bc";
}
.pe-7s-paint-bucket:before {
	content: "\e6bd";
}
.pe-7s-pendrive:before {
	content: "\e6be";
}
.pe-7s-photo:before {
	content: "\e6bf";
}
.pe-7s-piggy:before {
	content: "\e6c0";
}
.pe-7s-plugin:before {
	content: "\e6c1";
}
.pe-7s-refresh-2:before {
	content: "\e6c2";
}
.pe-7s-rocket:before {
	content: "\e6c3";
}
.pe-7s-settings:before {
	content: "\e6c4";
}
.pe-7s-shield:before {
	content: "\e6c5";
}
.pe-7s-smile:before {
	content: "\e6c6";
}
.pe-7s-usb:before {
	content: "\e6c7";
}
.pe-7s-vector:before {
	content: "\e6c8";
}
.pe-7s-wine:before {
	content: "\e6c9";
}
.pe-7s-cloud-upload:before {
	content: "\e68a";
}
.pe-7s-cash:before {
	content: "\e68c";
}
.pe-7s-close:before {
	content: "\e680";
}
.pe-7s-bluetooth:before {
	content: "\e68d";
}
.pe-7s-cloud-download:before {
	content: "\e68b";
}
.pe-7s-way:before {
	content: "\e68e";
}
.pe-7s-close-circle:before {
	content: "\e681";
}
.pe-7s-id:before {
	content: "\e68f";
}
.pe-7s-angle-up:before {
	content: "\e682";
}
.pe-7s-wristwatch:before {
	content: "\e690";
}
.pe-7s-angle-up-circle:before {
	content: "\e683";
}
.pe-7s-world:before {
	content: "\e691";
}
.pe-7s-angle-right:before {
	content: "\e684";
}
.pe-7s-volume:before {
	content: "\e692";
}
.pe-7s-angle-right-circle:before {
	content: "\e685";
}
.pe-7s-users:before {
	content: "\e693";
}
.pe-7s-angle-left:before {
	content: "\e686";
}
.pe-7s-user-female:before {
	content: "\e694";
}
.pe-7s-angle-left-circle:before {
	content: "\e687";
}
.pe-7s-up-arrow:before {
	content: "\e695";
}
.pe-7s-angle-down:before {
	content: "\e688";
}
.pe-7s-switch:before {
	content: "\e696";
}
.pe-7s-angle-down-circle:before {
	content: "\e689";
}
.pe-7s-scissors:before {
	content: "\e697";
}
.pe-7s-wallet:before {
	content: "\e600";
}
.pe-7s-safe:before {
	content: "\e698";
}
.pe-7s-volume2:before {
	content: "\e601";
}
.pe-7s-volume1:before {
	content: "\e602";
}
.pe-7s-voicemail:before {
	content: "\e603";
}
.pe-7s-video:before {
	content: "\e604";
}
.pe-7s-user:before {
	content: "\e605";
}
.pe-7s-upload:before {
	content: "\e606";
}
.pe-7s-unlock:before {
	content: "\e607";
}
.pe-7s-umbrella:before {
	content: "\e608";
}
.pe-7s-trash:before {
	content: "\e609";
}
.pe-7s-tools:before {
	content: "\e60a";
}
.pe-7s-timer:before {
	content: "\e60b";
}
.pe-7s-ticket:before {
	content: "\e60c";
}
.pe-7s-target:before {
	content: "\e60d";
}
.pe-7s-sun:before {
	content: "\e60e";
}
.pe-7s-study:before {
	content: "\e60f";
}
.pe-7s-stopwatch:before {
	content: "\e610";
}
.pe-7s-star:before {
	content: "\e611";
}
.pe-7s-speaker:before {
	content: "\e612";
}
.pe-7s-signal:before {
	content: "\e613";
}
.pe-7s-shuffle:before {
	content: "\e614";
}
.pe-7s-shopbag:before {
	content: "\e615";
}
.pe-7s-share:before {
	content: "\e616";
}
.pe-7s-server:before {
	content: "\e617";
}
.pe-7s-search:before {
	content: "\e618";
}
.pe-7s-film:before {
	content: "\e6a5";
}
.pe-7s-science:before {
	content: "\e619";
}
.pe-7s-disk:before {
	content: "\e6a6";
}
.pe-7s-ribbon:before {
	content: "\e61a";
}
.pe-7s-repeat:before {
	content: "\e61b";
}
.pe-7s-refresh:before {
	content: "\e61c";
}
.pe-7s-add-user:before {
	content: "\e6a9";
}
.pe-7s-refresh-cloud:before {
	content: "\e61d";
}
.pe-7s-paperclip:before {
	content: "\e69c";
}
.pe-7s-radio:before {
	content: "\e61e";
}
.pe-7s-note2:before {
	content: "\e69d";
}
.pe-7s-print:before {
	content: "\e61f";
}
.pe-7s-network:before {
	content: "\e69e";
}
.pe-7s-prev:before {
	content: "\e620";
}
.pe-7s-mute:before {
	content: "\e69f";
}
.pe-7s-power:before {
	content: "\e621";
}
.pe-7s-medal:before {
	content: "\e6a0";
}
.pe-7s-portfolio:before {
	content: "\e622";
}
.pe-7s-like2:before {
	content: "\e6a1";
}
.pe-7s-plus:before {
	content: "\e623";
}
.pe-7s-left-arrow:before {
	content: "\e6a2";
}
.pe-7s-play:before {
	content: "\e624";
}
.pe-7s-key:before {
	content: "\e6a3";
}
.pe-7s-plane:before {
	content: "\e625";
}
.pe-7s-joy:before {
	content: "\e6a4";
}
.pe-7s-photo-gallery:before {
	content: "\e626";
}
.pe-7s-pin:before {
	content: "\e69b";
}
.pe-7s-phone:before {
	content: "\e627";
}
.pe-7s-plug:before {
	content: "\e69a";
}
.pe-7s-pen:before {
	content: "\e628";
}
.pe-7s-right-arrow:before {
	content: "\e699";
}
.pe-7s-paper-plane:before {
	content: "\e629";
}
.pe-7s-delete-user:before {
	content: "\e6a7";
}
.pe-7s-paint:before {
	content: "\e62a";
}
.pe-7s-bottom-arrow:before {
	content: "\e6a8";
}
.pe-7s-notebook:before {
	content: "\e62b";
}
.pe-7s-note:before {
	content: "\e62c";
}
.pe-7s-next:before {
	content: "\e62d";
}
.pe-7s-news-paper:before {
	content: "\e62e";
}
.pe-7s-musiclist:before {
	content: "\e62f";
}
.pe-7s-music:before {
	content: "\e630";
}
.pe-7s-mouse:before {
	content: "\e631";
}
.pe-7s-more:before {
	content: "\e632";
}
.pe-7s-moon:before {
	content: "\e633";
}
.pe-7s-monitor:before {
	content: "\e634";
}
.pe-7s-micro:before {
	content: "\e635";
}
.pe-7s-menu:before {
	content: "\e636";
}
.pe-7s-map:before {
	content: "\e637";
}
.pe-7s-map-marker:before {
	content: "\e638";
}
.pe-7s-mail:before {
	content: "\e639";
}
.pe-7s-mail-open:before {
	content: "\e63a";
}
.pe-7s-mail-open-file:before {
	content: "\e63b";
}
.pe-7s-magnet:before {
	content: "\e63c";
}
.pe-7s-loop:before {
	content: "\e63d";
}
.pe-7s-look:before {
	content: "\e63e";
}
.pe-7s-lock:before {
	content: "\e63f";
}
.pe-7s-lintern:before {
	content: "\e640";
}
.pe-7s-link:before {
	content: "\e641";
}
.pe-7s-like:before {
	content: "\e642";
}
.pe-7s-light:before {
	content: "\e643";
}
.pe-7s-less:before {
	content: "\e644";
}
.pe-7s-keypad:before {
	content: "\e645";
}
.pe-7s-junk:before {
	content: "\e646";
}
.pe-7s-info:before {
	content: "\e647";
}
.pe-7s-home:before {
	content: "\e648";
}
.pe-7s-help2:before {
	content: "\e649";
}
.pe-7s-help1:before {
	content: "\e64a";
}
.pe-7s-graph3:before {
	content: "\e64b";
}
.pe-7s-graph2:before {
	content: "\e64c";
}
.pe-7s-graph1:before {
	content: "\e64d";
}
.pe-7s-graph:before {
	content: "\e64e";
}
.pe-7s-global:before {
	content: "\e64f";
}
.pe-7s-gleam:before {
	content: "\e650";
}
.pe-7s-glasses:before {
	content: "\e651";
}
.pe-7s-gift:before {
	content: "\e652";
}
.pe-7s-folder:before {
	content: "\e653";
}
.pe-7s-flag:before {
	content: "\e654";
}
.pe-7s-filter:before {
	content: "\e655";
}
.pe-7s-file:before {
	content: "\e656";
}
.pe-7s-expand1:before {
	content: "\e657";
}
.pe-7s-exapnd2:before {
	content: "\e658";
}
.pe-7s-edit:before {
	content: "\e659";
}
.pe-7s-drop:before {
	content: "\e65a";
}
.pe-7s-drawer:before {
	content: "\e65b";
}
.pe-7s-download:before {
	content: "\e65c";
}
.pe-7s-display2:before {
	content: "\e65d";
}
.pe-7s-display1:before {
	content: "\e65e";
}
.pe-7s-diskette:before {
	content: "\e65f";
}
.pe-7s-date:before {
	content: "\e660";
}
.pe-7s-cup:before {
	content: "\e661";
}
.pe-7s-culture:before {
	content: "\e662";
}
.pe-7s-crop:before {
	content: "\e663";
}
.pe-7s-credit:before {
	content: "\e664";
}
.pe-7s-copy-file:before {
	content: "\e665";
}
.pe-7s-config:before {
	content: "\e666";
}
.pe-7s-compass:before {
	content: "\e667";
}
.pe-7s-comment:before {
	content: "\e668";
}
.pe-7s-coffee:before {
	content: "\e669";
}
.pe-7s-cloud:before {
	content: "\e66a";
}
.pe-7s-clock:before {
	content: "\e66b";
}
.pe-7s-check:before {
	content: "\e66c";
}
.pe-7s-chat:before {
	content: "\e66d";
}
.pe-7s-cart:before {
	content: "\e66e";
}
.pe-7s-camera:before {
	content: "\e66f";
}
.pe-7s-call:before {
	content: "\e670";
}
.pe-7s-calculator:before {
	content: "\e671";
}
.pe-7s-browser:before {
	content: "\e672";
}
.pe-7s-box2:before {
	content: "\e673";
}
.pe-7s-box1:before {
	content: "\e674";
}
.pe-7s-bookmarks:before {
	content: "\e675";
}
.pe-7s-bicycle:before {
	content: "\e676";
}
.pe-7s-bell:before {
	content: "\e677";
}
.pe-7s-battery:before {
	content: "\e678";
}
.pe-7s-ball:before {
	content: "\e679";
}
.pe-7s-back:before {
	content: "\e67a";
}
.pe-7s-attention:before {
	content: "\e67b";
}
.pe-7s-anchor:before {
	content: "\e67c";
}
.pe-7s-albums:before {
	content: "\e67d";
}
.pe-7s-alarm:before {
	content: "\e67e";
}
.pe-7s-airplay:before {
	content: "\e67f";
}


/* HELPER CLASS 
 * -------------------------- */

/* FA based classes */

/*! Modified from font-awesome helper CSS classes - PIXEDEN
 *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (CSS: MIT License)
 */

/* makes the font 33% larger relative to the icon container */
.pe-lg {
  font-size: 1.3333333333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.pe-2x {
  font-size: 2em;
}
.pe-3x {
  font-size: 3em;
}
.pe-4x {
  font-size: 4em;
}
.pe-5x {
  font-size: 5em;
}
.pe-fw {
  width: 1.2857142857142858em;
  text-align: center;
}
.pe-ul {
  padding-left: 0;
  margin-left: 2.142857142857143em;
  list-style-type: none;
}
.pe-ul > li {
  position: relative;
}
.pe-li {
  position: absolute;
  left: -2.142857142857143em;
  width: 2.142857142857143em;
  top: 0.14285714285714285em;
  text-align: center;
}
.pe-li.pe-lg {
  left: -1.8571428571428572em;
}
.pe-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eeeeee;
  border-radius: .1em;
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.pe.pull-left {
  margin-right: .3em;
}
.pe.pull-right {
  margin-left: .3em;
}
.pe-spin {
  animation: spin 2s infinite linear;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.pe-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  transform: rotate(90deg);
}
.pe-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  transform: rotate(180deg);
}
.pe-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  transform: rotate(270deg);
}
.pe-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  transform: scale(-1, 1);
}
.pe-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  transform: scale(1, -1);
}
.pe-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.pe-stack-1x,
.pe-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.pe-stack-1x {
  line-height: inherit;
}
.pe-stack-2x {
  font-size: 2em;
}
.pe-inverse {
  color: #ffffff;
}

/* Custom classes / mods - PIXEDEN */
.pe-va {
  vertical-align: middle;
}

.pe-border {
  border: solid 0.08em #eaeaea;
}

[class^="pe-7s-"], [class*=" pe-7s-"] {
  display: inline-block;
}
@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  animation-name: pulse;
}

@keyframes rubberBand {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  animation-name: rubberBand;
}

@keyframes shake {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  animation-name: shake;
}

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  transform-origin: top center;
  animation-name: swing;
}

@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes wobble {
  0% {
    transform: none;
  }

  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  100% {
    transform: none;
  }
}

.wobble {
  animation-name: wobble;
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-name: bounceIn;
  animation-duration: .75s;
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  100% {
    transform: none;
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  100% {
    transform: none;
  }
}

.bounceInLeft {
  animation-name: bounceInLeft;
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    transform: none;
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  animation-name: bounceInUp;
}

@keyframes bounceOut {
  20% {
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  animation-name: bounceOut;
  animation-duration: .75s;
}

@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  animation-name: bounceOutDown;
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  animation-name: bounceOutLeft;
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  animation-name: bounceOutRight;
}

@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  animation-name: bounceOutUp;
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInDownBig {
  animation-name: fadeInDownBig;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInRightBig {
  animation-name: fadeInRightBig;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInUpBig {
  animation-name: fadeInUpBig;
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  animation-name: fadeOutDown;
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  animation-name: fadeOutLeft;
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  animation-name: fadeOutRight;
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  animation-name: fadeOutUp;
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  animation-name: fadeOutUpBig;
}

@keyframes flip {
  0% {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
  }

  100% {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  backface-visibility: visible;
  animation-name: flip;
}

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transition-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    transform: perspective(400px);
  }
}

.flipInX {
  backface-visibility: visible !important;
  animation-name: flipInX;
}

@keyframes flipInY {
  0% {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transition-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    transform: perspective(400px);
  }
}

.flipInY {
  backface-visibility: visible !important;
  animation-name: flipInY;
}

@keyframes flipOutX {
  0% {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  animation-name: flipOutX;
  animation-duration: .75s;
  backface-visibility: visible !important;
}

@keyframes flipOutY {
  0% {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  100% {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  backface-visibility: visible !important;
  animation-name: flipOutY;
  animation-duration: .75s;
}

@keyframes lightSpeedIn {
  0% {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in;
}

@keyframes rotateIn {
  0% {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    transform-origin: center;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  animation-name: rotateIn;
}

@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  animation-name: rotateInDownLeft;
}

@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  animation-name: rotateInDownRight;
}

@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  animation-name: rotateInUpLeft;
}

@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  animation-name: rotateInUpRight;
}

@keyframes rotateOut {
  0% {
    transform-origin: center;
    opacity: 1;
  }

  100% {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  animation-name: rotateOut;
}

@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
}

@keyframes rotateOutDownRight {
  0% {
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  animation-name: rotateOutDownRight;
}

@keyframes rotateOutUpLeft {
  0% {
    transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}

@keyframes rotateOutUpRight {
  0% {
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  animation-name: rotateOutUpRight;
}

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.rollIn {
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  animation-name: rollOut;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  animation-name: zoomInDown;
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  animation-name: zoomInLeft;
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  animation-name: zoomInRight;
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  animation-name: zoomInUp;
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

.zoomOut {
  animation-name: zoomOut;
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  animation-name: zoomOutDown;
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  100% {
    opacity: 0;
    transform: scale(.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}

.zoomOutLeft {
  animation-name: zoomOutLeft;
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  100% {
    opacity: 0;
    transform: scale(.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}

.zoomOutRight {
  animation-name: zoomOutRight;
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutUp {
  animation-name: zoomOutUp;
}

@keyframes slideInDown {
  0% {
    transform: translateY(-100%);
    visibility: visible;
  }

  100% {
    transform: translateY(0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
    visibility: visible;
  }

  100% {
    transform: translateX(0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    visibility: visible;
  }

  100% {
    transform: translateX(0);
  }
}

.slideInRight {
  animation-name: slideInRight;
}

@keyframes slideInUp {
  0% {
    transform: translateY(100%);
    visibility: visible;
  }

  100% {
    transform: translateY(0);
  }
}

.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideOutDown {
  0% {
    transform: translateY(0);
  }

  100% {
    visibility: hidden;
    transform: translateY(100%);
  }
}

.slideOutDown {
  animation-name: slideOutDown;
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    visibility: hidden;
    transform: translateX(-100%);
  }
}

.slideOutLeft {
  animation-name: slideOutLeft;
}

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
  }

  100% {
    visibility: hidden;
    transform: translateX(100%);
  }
}

.slideOutRight {
  animation-name: slideOutRight;
}

@keyframes slideOutUp {
  0% {
    transform: translateY(0);
  }

  100% {
    visibility: hidden;
    transform: translateY(-100%);
  }
}

.slideOutUp {
  animation-name: slideOutUp;
}

@font-face {
  font-family: 'trebble2';
  src: url(d9bfcf77b43b016b99d8.eot?16568893);
  src: url(d9bfcf77b43b016b99d8.eot?16568893#iefix) format('embedded-opentype'),
       url(c19992f5fee38e217dc8.woff?16568893) format('woff'),
       url(ae67789c09ec00e24aea.ttf?16568893) format('truetype'),
       url(8eda9ae6daedec63eb5c.svg?16568893#trebble2) format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'trebble2';
    src: url('../font/trebble2.svg?16568893#trebble2') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "trebble2";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-headphones:before { content: '\e804'; } /* '' */
.icon-headphones-1:before { content: '\e810'; } /* '' */
.icon-signal:before { content: '\e801'; } /* '' */
.icon-dot-3:before { content: '\e802'; } /* '' */
.icon-mic:before { content: '\e803'; } /* '' */
.icon-cd:before { content: '\e805'; } /* '' */
.icon-comment:before { content: '\e807'; } /* '' */
.icon-chat-1:before { content: '\e806'; } /* '' */
.icon-chat:before { content: '\e800'; } /* '' */
.icon-group:before { content: '\e808'; } /* '' */
.icon-group-circled:before { content: '\e80a'; } /* '' */
.icon-torso:before { content: '\e80b'; } /* '' */
.icon-comment-1:before { content: '\e80d'; } /* '' */
.icon-comment-alt:before { content: '\e80c'; } /* '' */
.icon-warning:before { content: '\e80f'; } /* '' */
.icon-rss:before { content: '\e80e'; } /* '' */
.icon-user:before { content: '\e809'; } /* '' */
.icon-resize-full:before { content: '\e81b'; } /* '' */
.icon-resize-full { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe81b;&nbsp;'); }
@font-face {
  font-family: 'trebble2';
  src: url(01886c5843c915f601be.eot?29355844);
  src: url(01886c5843c915f601be.eot?29355844#iefix) format('embedded-opentype'),
       url(d85e0e8bbd942592f15a.woff?29355844) format('woff'),
       url(bbd8485b2bb36a4787e9.ttf?29355844) format('truetype'),
       url(746d9fd07272974ead41.svg?29355844#trebble2) format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'trebble2';
    src: url('../font/trebble2.svg?29355844#trebble2') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "trebble2";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-chat:before { content: '\e800'; } /* '' */
.icon-signal:before { content: '\e801'; } /* '' */
.icon-dot-3:before { content: '\e802'; } /* '' */
.icon-mic:before { content: '\e803'; } /* '' */
.icon-headphones:before { content: '\e804'; } /* '' */
.icon-cd:before { content: '\e805'; } /* '' */
.icon-chat-1:before { content: '\e806'; } /* '' */
.icon-comment:before { content: '\e807'; } /* '' */
.icon-group:before { content: '\e808'; } /* '' */
.icon-user:before { content: '\e809'; } /* '' */
.icon-group-circled:before { content: '\e80a'; } /* '' */
.icon-torso:before { content: '\e80b'; } /* '' */
.icon-comment-alt:before { content: '\e80c'; } /* '' */
.icon-comment-1:before { content: '\e80d'; } /* '' */
.icon-rss:before { content: '\e80e'; } /* '' */
.icon-warning:before { content: '\e80f'; } /* '' */
.icon-headphones-1:before { content: '\e810'; } /* '' */
.icon-star:before { content: '\e811'; } /* '' */
.icon-info:before { content: '\e812'; } /* '' */
.icon-download:before { content: '\e813'; } /* '' */
.icon-th-list:before { content: '\e814'; } /* '' */
.icon-star-empty:before { content: '\e815'; } /* '' */
.icon-align-justify:before { content: '\e816'; } /* '' */
.icon-spin3:before { content: '\e817'; } /* '' */
.icon-spin5:before { content: '\e818'; } /* '' */
.icon-spin1:before { content: '\e819'; } /* '' */
.icon-spin6:before { content: '\e81a'; } /* '' */
.icon-resize-full:before { content: '\e81b'; } /* '' */
@font-face {
  font-family: 'trebble4';
  src: url(a1dde9505c339f45c4f1.eot?42978213);
  src: url(a1dde9505c339f45c4f1.eot?42978213#iefix) format('embedded-opentype'),
       url(11602de03fb1e7a8c5c3.woff2?42978213) format('woff2'),
       url(99677aa03e14f4279c25.woff?42978213) format('woff'),
       url(df2abac8deb1d0087513.ttf?42978213) format('truetype'),
       url(5879bfa7a03ae3d70236.svg?42978213#fontello) format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?42978213#fontello') format('svg');
  }
}
*/
 
 [class^="trebble4-"]:before, [class*=" trebble4-"]:before {
  font-family: "trebble4";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.trebble4-bookmark:before { content: '\e800'; } /* '' */
.trebble4-bookmark-empty:before { content: '\f097'; } /* '' */
@font-face {
  font-family: 'trebble-carousel-icon';
  src: url(b689360d113e58a93978.eot?10727516);
  src: url(b689360d113e58a93978.eot?10727516#iefix) format('embedded-opentype'),
       url(34809e79d6c0b197891a.woff2?10727516) format('woff2'),
       url(144b3072ad3714163ba5.woff?10727516) format('woff'),
       url(7454e5ddcdf0bdcfca6e.ttf?10727516) format('truetype'),
       url(9b5a44d46e0a0f6aa488.svg?10727516#trebble-carousel-icon) format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'trebble-carousel-icon';
    src: url('../font/trebble-carousel-icon.svg?10727516#trebble-carousel-icon') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "trebble-carousel-icon";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-carousel_icon:before { content: '\caec'; } /* '쫬' */
@font-face {
  font-family: 'fontello';
  src: url(d2b0d217557364bcbc4c.eot?58174053);
  src: url(d2b0d217557364bcbc4c.eot?58174053#iefix) format('embedded-opentype'),
       url(a464c7b4e38c3308fefa.woff2?58174053) format('woff2'),
       url(8ef7eb5d05523274382d.woff?58174053) format('woff'),
       url(33127147e5ab8b50fe76.ttf?58174053) format('truetype'),
       url(22fdd50009c865bfd9fb.svg?58174053#fontello) format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?58174053#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-remove-silence:before { content: '\e700'; } /* '' */
.icon-enhance-speech:before { content: '\e803'; } /* '' */
.icon-remove-background-noise:before { content: '\e804'; } /* '' */
.icon-deepcut-clean:before { content: '\e805'; } /* '' */
.icon-remove-filler-word:before { content: '\e806'; } /* '' */
.icon-clarity-sparks:before { content: '\e807'; } /* '' */

@font-face {
  font-family: 'soundwave';
  src:
    url(dcbb138bfd4ffcf707c4.ttf?b12loq) format('truetype'),
    url(5db13e1aef5c0d763696.woff?b12loq) format('woff'),
    url(d6513afe5025e2b83574.svg?b12loq#soundwave) format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="soundwave-"], [class*=" soundwave-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'soundwave' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.soundwave-strikethrough2:before {
  content: "\e918";
}
.soundwave-next_1:before {
  content: "\e915";
}
.soundwave-redo-1:before {
  content: "\e914";
}
.soundwave-text_select1:before {
  content: "\e912";
}
.soundwave-text_select2:before {
  content: "\e913";
}
.soundwave-highlighter3:before {
  content: "\e911";
}
.soundwave-highlighter2:before {
  content: "\e910";
}
.soundwave-highlight:before {
  content: "\e90f";
}
.soundwave-redo:before {
  content: "\e90b";
}
.soundwave-undo:before {
  content: "\e90c";
}
.soundwave-cut:before {
  content: "\e90d";
}
.soundwave-move-trash:before {
  content: "\e90e";
}
.soundwave-backspace-icon:before {
  content: "\e90a";
}
.soundwave-headphones:before {
  content: "\e909";
}
.soundwave-multi-select:before {
  content: "\e904";
}
.soundwave-text-selection:before {
  content: "\e903";
}
.soundwave-option-apple-key:before {
  content: "\e906";
}
.soundwave-shift-apple-key:before {
  content: "\e907";
}
.soundwave-drag-indicator:before {
  content: "\e902";
}
.soundwave-live-transcribe-svgrepo-com-2:before {
  content: "\e916";
}
.soundwave-noise-reduction:before {
  content: "\e900";
}
.soundwave-command-apple-key:before {
  content: "\e908";
}
.soundwave-strikethrough1:before {
  content: "\e917";
}
.soundwave-strikethrough:before {
  content: "\e905";
}
.soundwave-sound-wave:before {
  content: "\e901";
}

@font-face {
	font-family: 'icomoon';
	src:url(dab47f6ae976a9aab100.eot?-fkwl1b);
	src:url(dab47f6ae976a9aab100.eot?#iefix-fkwl1b) format('embedded-opentype'),
		url(ad742495eaedbc8aea21.ttf?-fkwl1b) format('truetype'),
		url(e974e890398fc1fdab77.woff?-fkwl1b) format('woff'),
		url(72842b8091ea9271214e.svg?-fkwl1b#icomoon) format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-trebble-icon-2ton{
}

.icon-trebble-icon-2ton .path1:before {
	content: "\e60b";
	
}
.icon-trebble-icon-2ton .path2:before {
	content: "\e60c";
	margin-left: -1em;

}
.icon-trebble-icon-2ton .path3:before {
	content: "\e60d";
	margin-left: -1em;
}
.icon-trebble-icon-2ton .path4:before {
	content: "\e60e";
	margin-left: -1em;
}
.icon-trebble-icon-2ton .path5:before {
	content: "\e60f";
	margin-left: -1em;
	/*color: rgb(48, 48, 48);*/
	opacity: 0.2;
}
.icon-trebble-icon-2ton .path6:before {
	content: "\e610";
	margin-left: -1em;
	/*color: rgb(48, 48, 48);*/
	opacity: 0.2;
}
.icon-trebble-icon-2ton .path7:before {
	content: "\e611";
	margin-left: -1em;
	/*color: rgb(48, 48, 48);*/
	opacity: 0.2;
}
.icon-trebble-icon-2ton .path8:before {
	content: "\e612";
	margin-left: -1em;
	/*color: rgb(48, 48, 48);*/
	opacity: 0.2;
}
.icon-trebble-icon-2ton .path9:before {
	content: "\e613";
	margin-left: -1em;
	/*color: rgb(48, 48, 48);*/
	opacity: 0.2;
}
.icon-trebble-icon-2ton .path10:before {
	content: "\e614";
	margin-left: -1em;
	/*color: rgb(48, 48, 48);*/
	opacity: 0.2;
}
.icon-trebble-icon-2ton .path11:before {
	content: "\e615";
	margin-left: -1em;
	/*color: rgb(48, 48, 48);*/
	opacity: 0.2;
}
.icon-trebble-icon-1ton .path1:before {
	content: "\e600";
	color: rgb(68, 68, 68);
}
.icon-trebble-icon-1ton .path2:before {
	content: "\e601";
	margin-left: -1em;
	color: rgb(68, 68, 68);
}
.icon-trebble-icon-1ton .path3:before {
	content: "\e602";
	margin-left: -1em;
	color: rgb(68, 68, 68);
}
.icon-trebble-icon-1ton .path4:before {
	content: "\e603";
	margin-left: -1em;
	color: rgb(68, 68, 68);
}
.icon-trebble-icon-1ton .path5:before {
	content: "\e604";
	margin-left: -1em;
	color: rgb(68, 68, 68);
}
.icon-trebble-icon-1ton .path6:before {
	content: "\e605";
	margin-left: -1em;
	color: rgb(68, 68, 68);
}
.icon-trebble-icon-1ton .path7:before {
	content: "\e606";
	margin-left: -1em;
	color: rgb(68, 68, 68);
}
.icon-trebble-icon-1ton .path8:before {
	content: "\e607";
	margin-left: -1em;
	color: rgb(68, 68, 68);
}
.icon-trebble-icon-1ton .path9:before {
	content: "\e608";
	margin-left: -1em;
	color: rgb(68, 68, 68);
}
.icon-trebble-icon-1ton .path10:before {
	content: "\e609";
	margin-left: -1em;
	color: rgb(68, 68, 68);
}
.icon-trebble-icon-1ton .path11:before {
	content: "\e60a";
	margin-left: -1em;
	color: rgb(68, 68, 68);
}
@font-face {
  font-family: 'icomoon-trebble-logo';
  src:  url(0c8bd2b1899c569916fe.eot?6a9c60);
  src:  url(0c8bd2b1899c569916fe.eot?6a9c60#iefix) format('embedded-opentype'),
  url(5bd14e8cb6d134d1a3d5.ttf?6a9c60) format('truetype'),
  url(ef0d5e780b868a7a0c9a.woff?6a9c60) format('woff'),
  url(98b8e467a6694fa1391d.svg?6a9c60#icomoon) format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-trebbleLogo"], [class*=" icon-trebbleLogo"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon-trebble-logo' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-trebbleLogo:before {
  font-family: 'icomoon-trebble-logo' !important;
  content: "\e900";
  width: auto;
}

@font-face {
  font-family: 'fontello';
  src: url(f581418ac73f97709442.eot?99942359);
  src: url(f581418ac73f97709442.eot?99942359#iefix) format('embedded-opentype'),
       url(14a820156ac99be377e2.woff2?99942359) format('woff2'),
       url(aba996c4e5daf3bfeef7.woff?99942359) format('woff'),
       url(baa763b75f9bc02f6dde.ttf?99942359) format('truetype'),
       url(2b911a5f99b625abdc85.svg?99942359#fontello) format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?99942359#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-trebblelogoshortwhite:before { content: '\e800'; width: -moz-fit-content; width: fit-content; } /* '' */
.icon-trebblelogofull:before { content: '\e801'; width: -moz-fit-content; width: fit-content;} /* '' */


/*# sourceMappingURL=styles.css.map*/