body {
    --font-size--large: 18px;
    --font-size--regular: 14px;
    --font-size--small: 12px;
    --font-size--smaller: 10px;
    --playbar--background: rgba(231,231,231,1);
    --gap: 1rem;
    --line-offset: calc(var(--gap) / 2);
    --line-thickness: 1px;
    --line-color: #e1e1e1;
    --default-border-color: #e1e1e1;
    --not-playing-color:#A1A1A1;
    --mobile-social--background:#eee;
    --chords--background:#858585;
    --mobile-premium-intro-banner--background:#eaeaea;
    --mobile-premium-intro-banner-border--color:#ddd;
    --active-chord--background:#ddd;
    --repeat-button-icon--color:#fff;

}
body.dark {
    --chords--background:#3b3c48;
    --playbar--background: #3b414d;
    --default-border-color: #434954;
    --line-color: #434954;
    --active-chord--background:#393D45;
    --repeat-button-icon--color:#fff;
}
@media (prefers-color-scheme: dark) {
    body.auto.dark {
        --chords--background:#3b3c48;
        --playbar--background: #3b414d;
        --default-border-color: #434954;
        --line-color: #434954;
        --active-chord--background:#393D45;
        --repeat-button-icon--color:#fff;
    }
}
.mobile-song--header {
    background: var(--box-background);
    border-radius: 10px;
    font-size: 14px;
    padding:15px;
    position: relative;
}
.mobile-song--header .action-icons {
    position: absolute;
    right: 14px;
    bottom:10px;
    display: flex;
    gap: 20px;
    align-items: center;
}
.mobile-song--header .back-button {
    position: absolute;
    right: 15px;
    top:15px;
    color:var(--primary-color);
    display: flex;
    align-items: normal;
}
.mobile-song--header .back-button i {
    font-size: 16px;
    margin-right: 6px;
}
.mobile-song--header h2 {
    font-size: 18px;
}
.mobile-song--header h3 {
    font-size: 14px;
}
.mobile-song--header .wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.mobile-song--header .wrap h3 {
    margin-bottom: 0;
}
.mobile-song--header .action-icons a {
    cursor: pointer;
}
.zabrenkaj-audio-player {
    border: 1px solid var(--box-background);
    background: var(--box-background);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;

}
.youtube-branding {
    font-size: 32px;
    color: var(--not-playing-color);
    display: flex;
}
.zabrenkaj-audio-player--top {
    display: flex;
    justify-content: space-between;

}
.zabrenkaj-audio-player--song-title {
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
}
.zabrenkaj-audio-player .play-button {
    font-size: 37px;
    cursor: pointer;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s; /* Safari */
    flex:1;
}
.zabrenkaj-audio-player .play-button:active {
    /*transform: scale(1.2);*/
}
.zabrenkaj-audio-player .play-button i {
    color:var(--not-playing-color);
}

.zabrenkaj-audio-player .play-time {
    font-size:var(--font-size--small);
}
.zabrenkaj-audio-player .play-button.active i {
    color: var(--primary-color);
}
.zabrenkaj-audio-player .play-button {
    position: relative;
    width: 37px;
    height: 36px;
    transition: opacity 300ms ease;
}
.zabrenkaj-audio-player .play-button i {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    transition: opacity 300ms ease;
    background-color: var(--repeat-button-icon--color);
    border-radius: 50%;
}
.zabrenkaj-audio-player .play-button.playback-speed {
    position: relative;
    background: var(--not-playing-color);
    color:var(--repeat-button-icon--color);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 13px;
}
.zabrenkaj-audio-player .play-button.playback-speed.active, .zabrenkaj-audio-player .play-button.playback-speed.active:hover {
    background: var(--primary-color);
    opacity: 1;
}
.zabrenkaj-audio-player .play-button.playback-speed i {
    font-size: 16px;
    color: var(--repeat-button-icon--color);
    background: transparent;
    top: 10px;
}
    .zabrenkaj-audio-player .play-button.playback-speed .circular-menu__item {
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
        background: var(--primary-color);
        border-radius: 100%;
        box-shadow: 0 5px 5px rgba(0,0,0,0.25);
        color: #fff;
        width: 40px;
        height: 40px;
        position: absolute;
        transform: translate3d(0, 0, 0);
        transition-property: transform, opacity, box-shadow;
        transition-duration: 0.18s;
        font-size: 13px;
    }
    .zabrenkaj-audio-player .play-button.playback-speed .circular-menu__item:hover {
        box-shadow: 0 7px 7px rgba(0,0,0,0.3);
    }
    .zabrenkaj-audio-player .play-button.playback-speed.active .circular-menu__item {
        opacity: 1;
    }
    .zabrenkaj-audio-player .play-button.playback-speed.active .circular-menu__item:nth-of-type(1) {
        transition-duration: 0.18s;
    }
    .zabrenkaj-audio-player .play-button.playback-speed.active .circular-menu__item:nth-of-type(2) {
        transition-duration: 0.28s;
    }
    .zabrenkaj-audio-player .play-button.playback-speed.active .circular-menu__item:nth-of-type(3) {
        transition-duration: 0.38s;
    }
    .zabrenkaj-audio-player .play-button.playback-speed.active .circular-menu__item:nth-of-type(4) {
        transition-duration: 0.48s;
    }
    .zabrenkaj-audio-player .play-button.playback-speed.active .circular-menu__item:nth-of-type(5) {
        transition-duration: 0.58s;
    }
    .zabrenkaj-audio-player .play-button.playback-speed .circular-menu__item:hover {
        /*color: #dc143c;
        background: #f08080;*/
    }
    .zabrenkaj-audio-player .play-button.playback-speed.circular-menu__item:active,
    .zabrenkaj-audio-player .play-button.playback-speed.circular-menu__item:focus {
        /*color: #8b0000;*/
    }

.zabrenkaj-audio-player .play-button:hover {
    opacity: 0.8;
}
.zabrenkaj-audio-player .play-button.paused .pause {
    opacity: 0;
}
.zabrenkaj-audio-player .play-button.playing .pause {
    opacity: 1;
}
.zabrenkaj-audio-player .play-bar {
    width: 100%;
    background: var(--playbar--background);
    height: 6px;
    position: relative;
    border-radius: 10px;
    flex: 1 1;
}
.zabrenkaj-audio-player .play-bar .inner {
    position: absolute;
    width: 0%;
    height: 100%;
    border-radius: 10px;
    background: var(--primary-color);
}
.zabrenkaj-audio-player--play-bar {
    display: flex;
}
.zabrenkaj-audio-player .timeframe {
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 11px;
    color: var(--text-grey);
    margin-top:8px;
}
.zabrenkaj-audio-player .timeframe .middle {
    font-size: 14px;
}
.zabrenkaj-audio-player--controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top:20px;
    margin-bottom:15px;
}

.pametni-pomik-strani-divide {
    border-top:1px solid var(--not-playing-color);
    margin-bottom:20px;
    text-align: center;
    position: relative;
}
.pametni-pomik-strani-divide .inner {
    background: var(--primary-color);
    color:white;
    font-size: 9px;
    display: inline-block;
    padding:2px 10px 2px 10px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: absolute;
    transform: translate(-50%, 0%);
    top:0;
    left:50%;
    opacity: 0;
    transition: opacity 300ms ease;
}
.pametni-pomik-strani-divide.active {
    border-top:1px solid var(--primary-color);
}
.pametni-pomik-strani-divide.active .inner {
    opacity: 1;
}
.bottom-mobile-menu {
    position: fixed;
    bottom:-400px;
    left:0;
    right:0;
    background: var(--box-background);
    min-height: 300px;
    z-index: 100;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    backdrop-filter: blur(10px);
    transition: height 2s ease-out;
    padding:25px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border: 1px solid var(--default-border-color);
}
.bottom-mobile-menu .top {
    display: flex;
    justify-content: space-between;
}
.bottom-mobile-menu .top h5 {
    font-size: var(--font-size--large);
}
.bottom-mobile-menu .top a {
    cursor: pointer;
}
.bottom-mobile-menu .filters {
    margin-top:20px;
}
.bottom-mobile-menu .filters .filters--list {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;


}
.mobile-bottom-actions {
    position: fixed;
    bottom: 0;
    left:0px;
    right:0px;
    background: var(--box-background);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    backdrop-filter: blur(10px);
    transition: height 2s ease-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border: 1px solid var(--default-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;

}
.mobile-bottom-actions .section .top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
    height: 46px;
}
.mobile-bottom-actions .section {
    text-align: center;
    padding:0 5px 4px 5px
}
.mobile-bottom-actions .section .top {
    margin-top:4px;
}

.mobile-bottom-actions .section .top a, .mobile-bottom-actions .section .top button {
    font-size: 34px;
    color:var(--main-title-color);
    cursor: pointer;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s; /* Safari */
    position: relative;
    touch-action: manipulation; /* prevent double tap zoom on iOS */
}


.mobile-bottom-actions .section .top a:active, .mobile-bottom-actions .section .top a:focus,
.mobile-bottom-actions .section .top button:active, .mobile-bottom-actions .section .top button:focus {
    transform: scale(1.06);
}
.mobile-bottom-actions .section button {
    color:var(--main-title-color);
}
.mobile-bottom-actions .section .top .middle {
    font-size: 13px;
    color:var(--primary-color);
}
.mobile-bottom-actions .section label {
}
.mobile-bottom-actions .section label, .mobile-bottom-actions .section .label, .mobile-bottom-actions .section .top .label {
    font-size: 12px;
    margin-bottom: 0.5rem;
}
.mobile-bottom-actions .section .label, .mobile-bottom-actions .section .top .label {
    display: block;
    width: 100%;
}
.mobile-bottom-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    gap: var(--gap);
}
.mobile-bottom-actions .section  {
    position: relative;
}
.manual-page-scroll-container {
    transition: opacity 300ms ease;
}
.manual-page-scroll-container.hidden {
    opacity: 0.3;
}


.mobile-bottom-actions .section::before,
.mobile-bottom-actions .section::after {
    content: '';
    position: absolute;
    background-color: var(--line-color);
    z-index: 1;
}


.mobile-bottom-actions .section::after {
    /*inline-size: 100vw;
    block-size: var(--line-thickness);
    inset-inline-start: 0;
    inset-block-start: calc(var(--line-offset) * -1);*/
}


.mobile-bottom-actions .section::before {
    inline-size: var(--line-thickness);
    block-size: 100vh;
    inset-inline-start: calc(var(--line-offset) * -1);
}
.close-mobile-menu i {font-size: 22px}
.close-mobile-menu {
    font-size: var(--font-size--regular);
}
.mobile-social {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin:10px 0 0 0;
    border-radius: 10px;
    font-size: 14px;
    padding: 0px;
    position: relative;
    /* border: 1px solid var(--default-border-color);*/
}
.mobile-social a {
    color: var(--main-title-color);
    font-size: var(--font-size--regular);
}
.mobile-social a label {
    color: var(--main-title-color);
}
.mobile-social .sign__group {

    margin-bottom: 0;
}
.song {
    background: transparent;
}
.desktop-view {
    display: flex;
    flex-direction: column;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #adb5bd;
}
.slick-slider {
    z-index: 10;
}
.slider.center {
    margin-top:30px;
}
.custom-switch .custom-control-label::after {
    cursor: pointer;
}
.custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: var(--box-background);
    border: var(--not-playing-color) solid 1px;
}
.custom-switch .custom-control-label::after {
    background-color:var(--not-playing-color);
}
body.modal-open {padding:0 !important}
@media (min-width: 1200px) {
    .player-volume-wrap {
        margin-top:40px;
    }

    .mobile-bottom-actions .section .top {
        margin-top: 8px;
        margin-bottom: 4px;
    }
    .mobile-bottom-actions .desktop-view .top .name-middle {
        margin-bottom: 0;
        display: block;
    }
    .mobile-bottom-actions .section .top .label {
        display: inline-block;
    }
    .mobile-bottom-actions .name, .mobile-bottom-actions .section .label {
        display: none;
    }
    .mobile-bottom-actions .section label, .mobile-bottom-actions .section .label, .mobile-bottom-actions .section .top .label {
        margin-bottom: 0rem;
    }
    .desktop-view {
        line-height: 14px;
    }
    .mobile-bottom-actions label {
        margin-bottom: 0;
    }
    .hide-desktop-content {
        display: block;
    }
    .pametni-pomik-strani-divide {
        margin-top:30px;
        margin-bottom: 30px;
    }
    .mobile-bottom-actions {
        position: sticky;
        visibility: visible;
        bottom:0;
    }
    .mobile-social {
        display: none;
    }
    .mobile-bottom-actions + #anchor {
        visibility: hidden;
    }
    .zabrenkaj-audio-player {
        position: sticky;
        right: 0;
        width: 100%;
        margin-left: auto;
        top: 130px;
        z-index: 10;
    }
    .relative {
        position: relative;
    }
    .desktop {
        display: block;
        margin-top:20px;
        margin-bottom:25px;
        position: sticky;
        top: 110px;
        z-index: 10;
    }
    .mobile {
        display: none;
    }
    #song-content {
        margin-left: 0px;
    }

    .song-header-right {
        position: absolute;
        right: 10px;
        top: 0px;
    }
    .song-buttons {
        position: relative;
        right: 0px;
        top: 0px;
    }
    .rounded-edges {
        border-radius: 15px;
    }
    .mobile-song--header {
        display: none;
    }
    .song-switches {
        padding-top:0;
    }
    .mobile-wrap-adjustments {
        top:130px;
    }
    .zabrenkaj-audio-player--song-title-mobile {
        display: none;
    }
    .zabrenkaj-audio-player--song-title {
        display: block;
    }

}
@media (max-width: 1200px) {
    .zabrenkaj-audio-player--controls {
        gap: 15px;
        margin-top: 10px;
        margin-bottom: 0;
    }
    .zabrenkaj-audio-player--song-title {
        display: none;
    }
    .zabrenkaj-audio-player--song-title-mobile {
        display: block;
        font-size: 16px;
        text-align: center;
        margin-top:3px;
    }
    .zabrenkaj-audio-player--mobile-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobile-index-subscription-banner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--mobile-premium-intro-banner--background);
        padding: 15px 20px 15px 20px;
        margin-bottom: 0;
        border:1px solid var(--mobile-premium-intro-banner-border--color);
    }
    .mobile-index-subscription-banner h5 {
        color: var(--main-title-color);
        font-size: 16px;
        margin-bottom:0;
        font-weight: 600;
    }
    .mobile-index-subscription-banner label {
        font-size: 12px;
        margin: 0;
        color: var(--main-title-color);
    }
    .mobile-index-subscription-banner .fancy-button span  {
        font-size: 16px;
        text-transform: capitalize;
        font-weight: 500;

    }
    .mobile-index-subscription-banner .bg-gradient1 span, .mobile-index-subscription-banner .bg-gradient1:before {
        background: #DE5000;
        background: linear-gradient(to right, #DE5000 0%, #DE5000 80%, #DE5000 100%);
    }
    .mobile-index-subscription-banner .left  {
        line-height: 14px;
        display: flex;

    }
    .mobile-index-subscription-banner .left img  {
        width: 100%;
        max-width: 30px;
        max-height: 30px;
        margin-right: 15px;

    }

    #item-sidebar {
        display: none !important;
    }
    .zabrenkaj-main-order-rule {
        width: 100%;
        flex: 100% !important;
        max-width: 100% !important;
    }
    .mobile-bottom-actions .desktop-view .name-middle, .mobile-bottom-actions .section .top .desktop-view .name-middle.label {
        margin-bottom: 0;
        display: none;
    }
    .mobile-bottom-actions  .name {
        display: block;
    }


    .desktop {
        display: none;
        visibility: hidden;
    }
    .mobile {
        position: sticky;
        top: 70px;
        background: var(--body-background);
        z-index: 10;
        padding-top:8px;
        padding-bottom: 8px;
        margin: 15px 0 20px 0;
    }
    .modal-content {
        margin: 0;
    }

    .mobile-song--header {
        display: block;
    }
    .zabrenkaj-audio-player  {
        display: flex;
    }
    .hide-desktop-content {
        display: none !important;
    }

    #song-content {
        margin-left:0;
    }
    .article.song-page {
        margin-top:10px;
    }

    .sign__group.sign__group--link label {
        font-size: var(--font-size--regular);
        position: relative;
        cursor: pointer;

        line-height: 22px;
        margin: 0;
    }
    .icon-gap {
        height: 23px;
        width: 35px;
        display: inline-block;
    }
    .added {
        left:-100px;

    }
    .added:after, .added:before {
        left:74%;
    }
    .player-volume-wrap {
        min-width: 160px;
    }
}

@media (min-width: 1201px) and (max-width: 1267px) {
    .switch-wrap .custom-control-label {
        font-size: 14px;
        padding-top:2px;
    }
}
@media (min-width: 970px) and (max-width: 992px) {
    .article.song-page {
        margin-top:30px;
    }
}
@media (max-width: 968px) {
    .premium-banner {margin-top:0 !important; display: none;}
}
@media (min-width: 968px) {
    .premium-banner {
        background: var(--mobile-premium-intro-banner--background);
        padding: 15px 20px 15px 20px;
        margin-bottom: 0;
        border:1px solid var(--mobile-premium-intro-banner-border--color);
    }
    .premium-banner:hover h5 {
        color: var(--main-title-color);
    }
    .premium-banner:hover label {
        color: var(--main-title-color);
    }
    .premium-banner h5 {
        color: var(--main-title-color);
        font-size: 16px;
        margin-bottom:0;
        font-weight: 600;
    }
    .premium-banner label {
        font-size: 12px;
        margin: 0;
        color: var(--main-title-color);
    }
    .premium-banner .fancy-button span  {
        font-size: 16px;
        text-transform: capitalize;
        font-weight: 500;

    }
    .premium-banner .left  {
        line-height: 14px;

    }
    .mobile-index-subscription-banner {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .premium-banner {margin-top:10px;}
    .lyrics-wrapper {
        font-size:14px;
    }
    body.modal-open {
        overflow:hidden;
    }
    .mobile {
        top: 130px;
    }
}

.player-volume {
    width: 100%;
    height: 20px;
    position: relative;
    margin: 0 auto;
}
.player-volume i {
    position: absolute;
    margin-top: -6px;
    color: var(--not-playing-color);
}
.player-volume i.fa-volume-down {

}
.player-volume i.fa-volume-up {

    right: 0;
}

.mobile .player-volume {
    min-width: 120px;
    margin-top: 28px;
}

.volume {
    position: absolute;
    left: 24px;
    margin: 0 auto;
    height: 5px;
    width:67%;
    background: var(--not-playing-color);
    border-radius: 15px;
}
.volume .ui-slider-range-min {
    height: 5px;
    width: 67%;
    position: absolute;
    background: var(--primary-color);
    border: none;
    border-radius: 10px;
    outline: none;
}
.volume .ui-slider-handle {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: var(--primary-color);
    position: absolute;
    margin-left: -8px;
    margin-top: -8px;
    cursor: pointer;
    outline: none;
}

.fixed {
    position: fixed;
}
.modal {
    padding: 0 !important;
}