.input-field {
    position: relative;
    margin-top: 0rem;
    margin-bottom: 0rem;
    background-color: #ffffff45;
}

.button-switch-on {
    background-color: rgb(224, 32, 32);
}

.button-switch-on .switch-circle {
    border-color: rgb(224, 32, 32);
    transform: translate3d(1.4em, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

.list-horizontal li {
    margin-right: 1em;
}

.list-vertical li {
    margin-bottom: 1em;
}

.slider li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.slider li.hider {
    margin: 0em !important;
    margin-right: 0em !important;
}

.slider li.selected {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.slider li.selected .class-card-item .classcard-bg {
    background-size: 20em;
    background-position: -3000% 20%;
}

.slider li.selected .class-card-item {
    /* background-color: #191922; */
}

.slider li.selected .class-card-item .level-2-bg {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, #865b15), color-stop(60%, #282828), color-stop(75%, rgba(40, 40, 40, 0.75)), to(transparent));
    background-image: linear-gradient(90deg, #865b15 10%, #282828 60%, rgba(40, 40, 40, 0.75) 75%, transparent);
}

.slider li.selected .class-card-item .level-1-bg {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, #22502c), color-stop(60%, #282828), color-stop(75%, rgba(40, 40, 40, 0.75)), to(transparent));
    background-image: linear-gradient(90deg, #22502c 10%, #282828 60%, rgba(40, 40, 40, 0.75) 75%, transparent);
}

.slider li.selected .class-card-item .level-3-bg {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, #873733), color-stop(60%, #282828), color-stop(75%, rgba(40, 40, 40, 0.75)), to(transparent));
    background-image: linear-gradient(90deg, #873733 10%, #282828 60%, rgba(40, 40, 40, 0.75) 75%, transparent);
}

.slider li.selected .class-card-item .level-0-bg {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, #16162e), color-stop(70%, #29293b), to(transparent));
    background-image: linear-gradient(90deg, #16162e 10%, #29293b 70%, transparent);
}

/* .list-horizontal .classes{
    padding-left: 1.5em !important;
} */



/* @media screen and (max-width: 767px) {
  .list-horizontal {
    padding-left: 2em !important;
  }
} */


@media screen and (max-width: 478px) {
    .small-phone {
        font-size: 0.7em !important;
    }
}


.body {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

/* Remove scrollbar space */
/* body, 
 ::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
} */

.stroke-box,
.zone-box,
.fpm-circle {
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.stroke-box.highselected {
    background-image: url('../images/Stroke-high-active.png');
}

.stroke-box.midselected {
    background-image: url('../images/Stroke-med-active.png');
}

.stroke-box.shortselected {
    background-image: url('../images/Stroke-short-active.png');
}



.zone-box._5selected {
    background-image: url('../images/Zone-5-active.png');
}

.zone-box._3selected {
    background-image: url('../images/Zone-3-active.png');
}

.zone-box._2selected {
    background-image: url('../images/Zone-2-active.png');
}

.zone-box._1selected {
    background-image: url('../images/Zone-1-active.png');
}

.zone-box._4selected {
    background-image: url('../images/Zone-4-active.png');
}

.modal {
    will-change: auto !important;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    /* Remove scrollbar space */
    background: transparent;
    /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #000000;
}



.class-card-overlay .info i,
.series-card-item .info i {
    display: block;
    padding: 0.7em 0.8em 0.7em 1em;
}

.maxWidth10 {
    max-width: 10em;
    overflow: hidden
}

.maxWidth5 {
    max-width: 5em;
    overflow: hidden
}

.maxWidth15 {
    max-width: 15em;
    overflow: hidden
}

.minHeight2 {
    min-height: 2em;
}

.maxHeight10 {
    max-height: 10em;
    overflow: hidden
}

.maxHeight5 {
    max-height: 5em;
    overflow: hidden
}

.maxHeight15 {
    max-height: 15em;
    overflow: hidden
}

.blank-indicator {
    width: 5px;
    background-color: #00000000;
}

.workoutsUserImg {
    width: 100%;
    height: 100%;
    background-size: 100%;
    border-radius: 0.3em;
}

.progress-bar .progress {
    margin: 0rem 0 0rem 0;
}

.f50 {
    font-size: 50%;
}

.pb0 {
    padding-bottom: 0 !important
}

.pt0 {
    padding-top: 0 !important
}

.text-l small {
    font-weight: normal !important;
}

button.btn-new,
[type='button'].btn-new,
[type='reset'].btn-new {
    border: 2px solid;
    cursor: pointer;
    -webkit-appearance: button;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

* {
    padding: 0;
    margin: 0;
    /* line-height: 100%; */
}

a:visited {
    color: #ccc;
    background-color: transparent;
}

a:focus {
    color: #777;
    background-color: transparent;
}

a:hover {
    color: #fff;
    background-color: transparent;
}

a:active {
    color: #888;
    background-color: transparent;
}



.single-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 121%;
}

.double-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 120%;
}

#data-resistance-tag-bottom .selected {
    width: 100%;
    background-color: #d60000;
    color: #fff;
    font-weight: 700;
}

#data-resistance-tag .selected {
    width: auto;
    background-color: #d60000;
    color: #fff;
    font-weight: 700;
}

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
    /*padding-bottom: calc(env(safe-area-inset-bottom) - 10px);*/
}

.safe-area-left {
    padding-left: env(safe-area-inset-left);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right);
}

.safe-area-all {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 5em;
    height: 5em;
}

.lds-ellipsis div {
    position: absolute;
    top: 2em;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: #e02020;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

@media screen and (width: 601px) {
    .default-container {
        font-size: 1.06em;
    }

    .class-container {
        font-size: 0.95em;
    }

    /* 
    .defaultbg {
        border-color: hsla(0, 0%, 100%, 0.1);
        background-color: #171721;
    } */
    /* .defaultbg,
    .defaultbg-r8,
    defaultbg-r4 {
        border-color: hsla(0, 0%, 100%, 0.1);
        background-color: rgba(38, 38, 45, 0.97);
    } */


}

.collapsible {
    padding-bottom: 0 !important;
}

/*
.class-description {
    --scrollbar-width: 8px;
    --mask-height: 8px;
    overflow-y: auto;
    padding-bottom: var(--mask-height);
    --mask-image-content: linear-gradient(to bottom,
            transparent,
            black var(--mask-height),
            black calc(100% - var(--mask-height)),
            transparent);
    --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;
    --mask-image-scrollbar: linear-gradient(black, black);
    --mask-size-scrollbar: var(--scrollbar-width) 100%;
    mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
    mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
    mask-position: 0 0, 100% 0;
    mask-repeat: no-repeat, no-repeat;
}*/

.cssanimation,
.cssanimation span {
    animation-duration: 5s;
    animation-fill-mode: both;
}

.cssanimation span {
    display: inline-block
}

.cssanimationFast {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.cssanimationFast,
.cssanimationFast div {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.cssanimation span {
    display: inline-block
}

.fadeInBottom {
    animation-name: fadeInBottom
}

.fadeInBottomScale {
    animation-name: fadeInBottomScale
}

@keyframes fadeInBottomScale {
    from {
        opacity: 0;
        transform: translateY(100%) scale(1.5);
        -webkit-transform: translateY(100%) scale(1.5);
        -moz-transform: translateY(100%) scale(1.5);
    }

    to {
        opacity: 1;
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
    }
}

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
    }

    to {
        opacity: 1;
    }
}

.dialer:hover {
    background-color: hsla(0, 0%, 100%, 0.1) !important;
}

.dialer:active {
    background-color: hsla(0, 0%, 100%, 0.3) !important;
}

.vc-logo-text {
    width: 8em;
    height: 7em;
    background-image: url('../images/logo-vc-text.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    -o-object-fit: contain;
    object-fit: contain;
}

.vc-logo-text-big {
    width: 14em;
    height: 12em;
}

.vc-logo-text-tv {
    width: 20em;
    height: 16em;
}

.vc-left-top {
    background-position: left top;
}

.code-box .text-xxl {
    font-size: 3.2em;
}

.leaderboard-item {
    border: none;
    /* background-color: rgba(0, 0, 0, 0.5); */
    background-color: rgba(23, 23, 33, 0.5);
}

.leaderboard-list {
    border-radius: 0.6em;
}

.leaderboard-item-me {
    background-color: rgba(0, 0, 0, 0.5);
}

@media screen and (width: 640px) and (min-height: 1000px) and (max-height: 1072px)  {
    .friendsorstats-slider {
        min-height: 36svw;
    }

    .grid-link.quickstats {
        min-height: 23svw;
    }
    .user-widget-grid {
        min-height: 35svw;
    }
}

.gamecanvasstroke-wrapper {
    padding: 0 !important;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.gamecanvasstroke.collideRed {
    background-color: rgba(255, 0, 0, 0.282);
    /* animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    perspective: 1000px; */
  }
  
  .gamecanvasstroke.trans {
    background-color: rgba(255, 255, 255, 0);
  }
  
  .gamecanvasstroke.clone {
    background-color: rgba(78, 120, 255, 0.1);
  }
  
  .gamecanvasstroke.focus {
    background-color: #fff;
  }

.gamecanvasstroke.shaking {
    background-color: rgb(255, 255, 255);
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
}

.colorgray {
    color: #ffffff45;
  }

.colorblack {
    color: rgb(0, 0, 0) !important;
  }

@keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }