/*using vtoast: https://www.cssscript.com/animated-toast-popup/*/
/* @import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap'); */
/* @import url("https://use.typekit.net/suj5oyt.css"); now loaded in meta.php seperately as it was blocking give flash of unstyled content */

/* Section: Global Stuff */

*{
    outline: none;
    border: 0;
}

@media (hover: none) {
    body{
        -moz-user-select: none; 
        -webkit-user-select: none; 
        user-select: none; 
        /* Users cannot select anything on the screen. This prevents highlighting text when dragging things. */
    }
}

html {
    scroll-behavior: smooth;
    /* below code puts scrollbars for vertical all the time */
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
    overscroll-behavior: contain;
  }

body{
    padding:0;
    margin:0;
    font-family: MavenProEmbedded, Maven Pro, Lato;
    font-size: 1.7vmin;
    overscroll-behavior: contain;
}

.disable-scroll{
    overflow: hidden;
    overscroll-behavior: none;
    scroll-behavior: unset;
    overflow-y: scroll;
}

.small-head-container h2{
    font-size: 4vmin;
}

body .notyf__ripple{
    border-radius: 0;
}

.menu-mobile-toggle{
    display: none;
}
.clear-both{
    clear: both;
}
.row{
    /* has spacing from top and bottom (no padding)
    useful to seperate vertical items/rows */
    margin: 2vmin 0;
    clear: both;
}

.back-btn{
    cursor:pointer;
}

.bvselect-powered{
    opacity: 0;
}


body .bv_ul_inner{
    border-radius: 1vmin;
}

body .bv_ul_inner li img{
    max-width: unset;
    width: 5vmin;
    height: 5vmin;
    object-fit: cover; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
    border-radius: 10vmin;
    bottom: unset;
}

.bv_jazzi_opt_val{
    vertical-align: middle;
    padding-top: 2vmin;
}

#country_sel + .bv_mainselect .bv_ul_inner .bv_jazzi_opt_val{
    padding-top:0;
}

body .bv_ul_inner li{
    font-size: inherit;
    line-height: 2.5vmin;
    overflow: auto;
    font-family: MavenProEmbedded, Maven Pro, Lato;
}

.hide-on-desktop{
    display: none;
}

.breadcrumb-item{
    color: #C9C7C8;
}

.breadcrumb-item::after{
    content: '/';
    margin-left: 0.5vmin;
}

.breadcrumb-item:hover{
    color: white;
}

.breadcrumb-item:hover::after{
    color: #C9C7C8;
}

.well{
    padding: 1.5vmin;
    box-shadow: inset 0 0px 8vmin #C9C7C82E, 0 0 0.5vmin #C9C7C8;
    border-radius: 1.2vmin;
}

.error_msg{
    color: red;
    font-size: 1.5vmin;
    max-width: 75%;
    margin: 0.5vmin;
}


.well.error_msg{
    margin-left:auto;
    margin-right:auto;
    margin-top:2vmin;
}

.mt-1{
    margin-top:1vmin;
}

.mt-2{
    margin-top:2vmin;
}

.mt-5{
    margin-top:5vmin;
}

.mb-15{
    margin-bottom:15vmin;
}

.fake-link{
    color:#15BAED;
    cursor:pointer;
}

#parallax_head{
    transition: background-position-y 0.01s ease-in-out;
}

#parallax_head video{
    height:100%;
    object-fit: cover;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

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

.text-white{
    color: white;
}

.heading-style-1{
    font-size: 3vmin;
    margin: 1vmin 0;
}

.tabbed-nav{
    color: #E05B4A;
    font-weight: bold;
    font-size: 1.8vmin;
    margin-left: -2.5vmin;
}

.tabbed-nav span{
    border-bottom: 2px solid transparent;
    padding-bottom: 1.25vmin;
    margin-left: 2.5vmin;
    display: inline-block;
    cursor: pointer;
}

.tabbed-nav span.active{
    border-bottom: 2px solid #E05B4A;
}


.tabbed-content{
    display: none;
}

.tabbed-content.active-content{
    display: block;
}

.aboutpage{
    line-height: 1.8;
}

.aboutpage p{
    text-align: justify;
}

.aboutpage .logo{
    max-width: 20vh;
    display: block;
    margin: 0 auto;
}

.aboutpage .right-side{
    align-self: center;
}


.content-container.padded-10{
    padding-left:10vmin;
    padding-right:10vmin;
}

.fake-link2{
    font-style: normal;
    font-weight: bold;
    font-size: 1.55vmin;
    line-height: 1.8vmin;
    cursor: pointer;
}
.fake-link2 i.fas,.fake-link2 i.fa{
    margin-right: 0.5vmin;
}



a{
    text-decoration: unset;
    color:#15A4D9;
}

@font-face{
    font-family: 'MavenProEmbedded';
    src: url('//cdn.jazzi.net/assets/fonts/MavenPro-VariableFont_wght.ttf');
}

.blocking-loading{
    position: fixed;
    top:0;
    left:0;
    display:block;
    background: url('//cdn.jazzi.net/assets/imgs/loading32.svg') center center no-repeat, rgba(0, 0, 0, 0.75);
    width:100%;
    height:100%;
    z-index: 2;
}

.transparent-loading{
    position: absolute;
    top:0;
    left:0;
    display:block;
    background: url('//cdn.jazzi.net/assets/imgs/loading32.svg') center center no-repeat,transparent;
    width:100%;
    height:100%;
}

.hidden{
    display: none;
}


.small-text{
    font-size: 1.65vmin;
    font-weight: normal;
}

.form-ctrls{
    margin-top:2vmin;
}

.loading{
    background-image: url('//cdn.jazzi.net/assets/imgs/loading32.svg');
    background-size: auto 60%;
    background-repeat: no-repeat;
    position: relative;
    background-position: right 3vmin center;
}

.collection-list{
    display: flex;
    flex-wrap: wrap;
    user-select: none;
    margin-left:-2vmin;
    margin-right: -2vmin;
}

.collection-list:empty::after{
    background-image:url('//cdn.jazzi.net/assets/imgs/information-icon.svg');
    background-size: 2vmin;
    background-repeat: no-repeat;
    background-position: left top 0.15vmin;
    padding-left:3vmin;
    content:'No collections found!';
    display: block;
    position: relative;
}

.collection-list:empty{
    margin-left: 0;
    margin-right: 0;
}

.collection-tile{
    text-align: center;
    display: inline-block;
    margin:2vmin;
    cursor: pointer;
    position: relative;
    width: 20vmin;
}

.collection-tile .name{
    font-weight: 600;
    font-size: 2vmin;
    color: #231E21;
    margin-top:1vmin;
    max-width: 90%;
    margin-left:auto;
    margin-right: auto;
}



.collection-tile .side-play-btn{
    background-image: url('//cdn.jazzi.net/assets/imgs/player/side_play_btn.svg');
    height: 4vmin;
    width: 4vmin;
    position: absolute;
    top: 15vmin;
    right: 1vmin;
    background-size: 4vmin 4vmin;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8vmin;
    box-shadow: 0 0 0.5vmin rgba(0, 0, 0, 0.233);
    opacity: 0.8;
    transition: all 0.1s ease-in-out;
    z-index: 1;
    background-color: #00000029;
}


.collection-tile:hover .side-play-btn{
    opacity: 1;
}

.collection-tile .side-play-btn.processing::after{
    background-image: url('//cdn.jazzi.net/assets/imgs/loading32.svg');
    background-size: 100%;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.1s ease-in;
}

.collection-tile .coll-heart-btn{
    display: none;
    /* we are hiding the collection heart button due to look and feel changes done in april 2022 */
    background-image: url('//cdn.jazzi.net/assets/imgs/player/unhearted.svg');
    height: 2vmin;
    width: 2vmin;
    position: absolute;
    top: 1vmin;
    right: 1vmin;
    background-size: 2vmin 2vmin;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.1s ease-in-out;
    opacity: 0.8;
    z-index:1;
}

.collection-tile .coll-heart-btn.unhearted{
    background-image: url('//cdn.jazzi.net/assets/imgs/player/unhearted.svg');
}

.collection-tile:hover .coll-heart-btn{
    opacity: 0;
    display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px){
    /* So that touchscreens do not have sticky heart icon */
    .collection-tile .coll-heart-btn.unhearted:hover{
        background-image: url('//cdn.jazzi.net/assets/imgs/player/hearted.svg');
    }
    .collection-tile .coll-heart-btn.hearted:hover{
        background-image: url('//cdn.jazzi.net/assets/imgs/player/unhearted.svg');
    }
    .outline-btn2:hover{
        border-color: 1px solid white;
        background-color: white;
        color: #2D2A2C;
        cursor: pointer;
    }
    .outline-btn:hover{
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.233);
    }
    .transparent-btn:hover{
        background: white;
        color: #E05B4A;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.233);
    }
    #player .shuffle-btn:hover,
    #player .volume-button:hover,
    #player .end-controls .show-playlist:not(.disabled):hover,
    #player .show-full-player-btn:hover
    {
        color:#f5a136;
    }
}

.collection-tile .coll-heart-btn.hearted{
    background-image: url('//cdn.jazzi.net/assets/imgs/player/hearted.svg');
}

.collection-tile::after{
    display: block;
    content:'';
    height: 20vmin;
    position: absolute;
    top:0;
    width: 100%;
    background-image:linear-gradient(to left, black 10%, transparent);
    border-radius: 1vmin;
    transition: all 0.1s ease-in-out;
    opacity: 0.15;
    z-index: 0;
}

.collection-tile:hover::after{
    opacity: 0.25;
}

img.city-img{
    height: 20vmin;
    width: 20vmin;
    display: inline-block;
    border-radius: 1vmin;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.233);
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}

.nf404{
    font-weight: lighter;
}

.nf404 .exclaim-icon i{
    font-size: 12vmin;
    color: #D63754;
}

.sub-not-active{
    max-width: 60vmin;
    margin-left:auto;
    margin-right:auto;
}

.sub-not-active p,
.sub-not-active .exclaim-icon,
.sub-not-active h2{
    text-align: center;
}

.center-cropped{
    object-fit: cover; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
    height: 10vmin;
    width: 10vmin;
}


.dp-show-edit.fully-round,
.fully-round{
    border-radius: 100%;
}

::placeholder{
    font-family: 'MavenProEmbedded';
    font-weight: 400;
    color: #b4b4b4;
}

* {
    outline: 0;
    box-sizing: border-box;
}


input[type=text],
input[type=search]{
    border-radius: 1vmin;
    border:0;
    padding: 1.2vmin 1.5vmin;
}

input.search-filter-input{
    border:0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.289);
    margin-bottom: 2vmin;
    border-radius: 0;
    background-image: url('//cdn.jazzi.net/assets/imgs/player/search-black.svg');
    width: 99%;
    background-position: left center;
    background-size: auto 43%;
    padding-left: 2.5vmin;
    background-repeat: no-repeat;
    margin-top:3vmin;
}

.simple-flex{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
}

.simple-flex > div{
    flex: 1 1 2px;
}

.simple-flex .left-side{
    flex-grow: 2;
}

.simple-flex .left-side.slimmer-flex-grow{
    flex-grow: 1.5;
}

.right-side.with-border{
    border-left: 5px solid gray;
    padding: 0 3vmin;
    border-left: 1px solid #80808021;
    margin: 0 5vmin;
}

.dark-input{
    background-color:#CACEB82B;
}

textarea{
    display: block;
    border-radius: 1vmin;
    border:0;
    padding: 1.2vmin 1.5vmin;
    min-height: 5vmin;
    margin-top: 1vmin;
}


textarea.tinymce-enabled + div{
    margin-top:1.25vmin;
}

textarea.feedback-text{
    min-height: 20vmin;
    min-width: 50vw;
    border: 1px solid silver;
    font-size: 2vmin;
}

.content-container{
    padding: 2vmin 5vmin;
    max-width: 100%;
    position: relative;
}


/* Basic Range Input */


/* http://danielstern.ca/range.css/#/ */
input[type=range] {
    width: 100%;
    margin: 0.6vmin 0;
    background-color: transparent;
    -webkit-appearance: none;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
    background: rgba(35, 30, 33, 0.78);
    border: 0.2px solid #010101;
    border-radius: 1.3px;
    width: 100%;
    height: 0.3vmin;
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb {
    margin-top: -0.8px;
    width: 1.5vmin;
    height: 1.5vmin;
    background: #292f36;
    border: 0.1vmin solid #ffffff;
    border-radius: 2vmin;
    cursor: pointer;
    -webkit-appearance: none;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #312a2e;
  }
  input[type=range]::-moz-range-track {
    background: rgba(35, 30, 33, 0.78);
    border: 0.2px solid #010101;
    border-radius: 1.3px;
    width: 100%;
    height: 0.3vmin;
    cursor: pointer;
  }
  input[type=range]::-moz-range-thumb {
    width: 1.5vmin;
    height: 1.5vmin;
    background: #292f36;
    border: 0.1vmin solid #ffffff;
    border-radius: 2vmin;
    cursor: pointer;
  }
  input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 4.1vmin 0;
    color: transparent;
    width: 100%;
    height: 0.3vmin;
    cursor: pointer;
  }
  input[type=range]::-ms-fill-lower {
    background: #151214;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
  }
  input[type=range]::-ms-fill-upper {
    background: rgba(35, 30, 33, 0.78);
    border: 0.2px solid #010101;
    border-radius: 2.6px;
  }
  input[type=range]::-ms-thumb {
    width: 1.5vmin;
    height: 1.5vmin;
    background: #292f36;
    border: 0.1vmin solid #ffffff;
    border-radius: 2vmin;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
  }
  input[type=range]:focus::-ms-fill-lower {
    background: rgba(35, 30, 33, 0.78);
  }
  input[type=range]:focus::-ms-fill-upper {
    background: #312a2e;
  }
  /*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
  how to remove the virtical space around the range input in IE*/
  @supports (-ms-ime-align:auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type=range] {
      margin: 0;
      /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
  }

/* Modal */

/**************************\
  Basic Modal Styles
\**************************/

.modal {
    
  }
  
  .modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:3;
  }
  
  .modal__container {
    background-color: #fff;
    padding: 3vmin;
    min-width: 40vw;
    max-width: 80vw;
    max-height: 90vh;
    border-radius: 0.5vmin;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0.5vmin 0.5vmin 50.5vmin #0000007a;
    scroll-behavior: smooth;
  }
  
  .modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    color:#D63754;
    box-sizing: border-box;
  }
  
  .modal__close {
    background: transparent;
    border: 0;
  }
  
  .modal__header .modal__close:before { content: "\2715"; }
  
  .modal__content {
    margin-top: 2vmin;
    
    line-height: 1.5;
    color: rgba(0,0,0,.8);
    padding-bottom: 2vmin;
  }

  .modal__footer{
      padding-bottom:2vmin;
  }
  
  .modal__btn {
    font-size: .875rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background-color: #e6e6e6;
    color: rgba(0,0,0,.8);
    border-radius: .25rem;
    border-style: none;
    border-width: 0;
    cursor: pointer;
    -webkit-appearance: button;
    text-transform: none;
    overflow: visible;
    line-height: 1.15;
    margin: 0;
    will-change: transform;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out,-webkit-transform .25s ease-out;
  }
  
  .modal__btn:focus, .modal__btn:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  
  .modal__btn-primary {
    background-color: #00449e;
    color: #fff;
  }

.modal-back-btn{
    color:#AFAFAF;
}

.modal-back-btn:hover{
    color:#818181;
}

  /**************************\
    Demo Animation Style
  \**************************/
  @keyframes mmfadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  
  @keyframes mmfadeOut {
      from { opacity: 1; }
        to { opacity: 0; }
  }
  
  @keyframes mmslideIn {
    from { transform: translateY(15%); }
      to { transform: translateY(0); }
  }
  
  @keyframes mmslideOut {
      from { transform: translateY(0); }
      to { transform: translateY(-10%); }
  }
  
  .micromodal-slide {
    display: none;
  }
  
  .micromodal-slide.is-open {
    display: block;
  }
  
  .micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  
  .micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
  }
  
  .micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  
  .micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
  }
  
  .micromodal-slide .modal__container,
  .micromodal-slide .modal__overlay {
    will-change: transform;
  }

/**
 * @file sellect.js is micro-library.
 * Scaffolded with generator-microjs
 * @author Lidia Freitas <lidiafreitas.me@gmail.com>
 */


.sellect-element{
    border: none;
    height: 18px;
    background: none;
}


.sellect-container{
    border: 1px solid #ccc;
    padding: 5px 5px 0 5px;
    border-radius: 3px;
    margin-top: 5px;
    position: relative;
}

.sellect-destination-list{
    display: inline-block;
}

.sellect-destination-list .sellect-item{
    margin: 0 5px 5px 0;
    background-color: #e5e5e5;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 2px;
    padding: 0 5px 2px;
    display: inline-block;
}
.sellect-destination-list .sellect-item .sellect-close-icon{
    margin-left: 0.5vmin;
    margin-right: 0.2vmin;
}

.sellect-origin-list{
    overflow: auto;
    max-height: 0;
    opacity: 0;
    transition: opacity 1.1s ease, max-height .2s ease;
}

.sellect-origin-list.open{
    max-height: 138px;
    opacity: 1;
}


.sellect-origin-list .sellect-item{
    display: block;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
    margin-right: 5px;
}

.sellect-origin-list .sellect-item:last-child{
    margin-bottom: 5px;
}

.sellect-origin-list .sellect-item:hover,
.sellect-origin-list .sellect-item.active{
    background: #e2e2e2;
}

.sellect-origin-list .sellect-item .sellect-close-icon{
    display: none;
}

.sellect-arrow-icon{
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    padding: 8px;
}


/* Section: Header */

.header{
    min-height: 5vmin;
    background-color: #231E21;
    padding: 1vmin 2vmin;
    display:flex;
    flex-direction: row;
    position: fixed;
    top:0;
    width:100%;
    box-sizing: border-box;
    box-shadow: 0 0 18px black;
    z-index:5;
}

.header .logo_img{
    height: 5vmin;
    width: auto;
    justify-self: flex-start;
}

.header.bigger-logo .logo_img{
    height: 8vmin;
}

.header.bigger-logo .menu a.header-link{
    padding: 3vmin 1.8vmin;
}

.header .menu{
    margin-left:auto;
    justify-self: flex-end;
}

.displayPp{
    margin-left: 2vmin;
    display: inline-block;    
    padding-right: 1vmin;
    cursor: pointer;
    height: 100%;
}

.displayPp #user_profile{    
    display: inline-block;
    height: 100%;
}

.displayPp img{
    height: 3vmin;
    width: 3vmin;
    border-radius: 4vmin;
    vertical-align: middle;
    object-fit: cover; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
}


.header .menu a.header-link{
    display: inline-block;
    font-size: 2.2vmin;
    color:white;
    padding:1.8vmin ;
}

.header .menu a.header-link i.fas{
    margin-right:0.75vmin;
}

.outline-btn{
    border-radius: 12px;
    font-size: 2.5vmin;
    font-style: normal;
    font-weight: bold;
    color: #E05B4A;
    padding:2vmin 4vmin;
    border:2px solid #e05b4a42;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.08s ease-in;
}

.outline-btn:disabled{
    opacity: 0.5;
}

.outline-btn2{
    border: 1px solid #ffffffde;
    border-radius: 5vmin;
    padding: 1vmin 2vmin;
    background-color: #2D2A2C;
    color: #ffffffde;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.outline-btn2.text-yellow{
    border-color: #F5A136;
}


.transparent-btn{
    border-radius: 12px;
    font-size: 2.5vmin;
    font-style: normal;
    font-weight: bold;
    color:white;
    padding:2vmin 4vmin;
    border:2px solid white;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.08s ease-in;
}

button i.fa, button i.fas, button i.far{
    margin-right:0.7vmin;
}

.blue-btn{
    background: #15A4D9;
    border-radius: 12px;
    font-size: 2.5vmin;
    font-style: normal;
    font-weight: bold;
    color:white;
    padding:2vmin 4vmin;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.233);
    border:0;
    cursor: pointer;
    position: relative;
}
.blue-btn:hover{
    background: #15a5d9e5;
}

.blue-btn[data-supertitle]::after{
    content: attr(data-supertitle);
    position: absolute;
    color:black;
    background: #F6A136;
    font-weight: 400;
    padding: 0.5vmin;
    top: -20%;
    right: -25%;
    border-radius: 7px;
    font-size: 90%;
    display: block;
}
.blue-btn[data-supertitle]:hover::after{
    background: #d48a2f;
}

.with-arrow::after{
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f30b";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    margin-left:10px;
    transition: margin 0.1s linear;
}

.with-arrow:hover::after{
    margin-left:12px;
    margin-right:-2px;
}

.with-reverse-arrow::before{
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f30a";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    margin-right:10px;
    transition: margin 0.1s linear;
}

.with-reverse-arrow:hover::before{
    margin-right:12px;
    margin-left:-2px;
}

.processing-state::before, .success-state::before, .error-state::before{
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    margin-right: 10px;
    transition: margin 0.1s linear;
}

.processing-state::before{
    content: "\f110";
    animation: fa-spin 2s infinite linear;
}

.success-state::before{
    content: "\f058";
}

.error-state::before{
    content: "\f057";
}

.small-btn{
    font-size: 1.25vmin;
    padding:1.2vmin 2.4vmin;
}

.round-icon{
    font-size: 0.7rem;
    height: 2.2rem;
    width: 2.2rem;
    border-radius: 3rem;
    background-color: white;
    color: #231E21;
    margin-right: 1vmin;
    display: inline-block;
    padding-top: 0.7rem;
    text-align: center;
}

section:first-of-type{
    padding-top: 3vmin;
}

section{
    max-width: 85vw;
    margin: 2vmin auto;
    padding:1vmin 0;
}

.hero-img-description{
    font-style: normal;
    font-weight: 500;
    font-size: 2vmin;
    line-height: 2.6vmin;
    color: #FFFFFF;
    margin-top: -1vmin;
    line-height: 1.5;
}

section:last-of-type{
    padding-bottom:25vmin;
}

.inline-block{
    display: inline-block;
}

.page_content{
    min-height:calc(100vh - 6vmin);
    position: relative;
}
form{
    box-sizing: border-box;
    font-size:2vmin;
}



form label{
    width: 100%;
    display: block;
    margin-bottom:2vmin;
    font-weight: bold;
}

form label .text-input{
    display: block;
    border-radius: 0.5vmin;
    border:0;
    padding: 0.8vmin 1vmin;
    margin-top:0.5vmin;
    width: 100%;
    box-sizing: border-box;
}

.float-right{
    float:right;
}


/* Section: Footer*/

.footer{
    background-color: #14A6D9;
    color:white;
    min-height:2vmin;
    padding-bottom: 1.5vmin;
    padding-left: 2vmin;
    padding-right: 2vmin;
    position: relative;
    z-index:2;
    font-size: 2.5vmin;
}

.footer:not(.wedge-footer){
    padding-top: 1.5vmin;
}

.footer_menus{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    z-index: 2;
    position: relative;
    margin-top:-2vmin;
}
.footer_menus p{
    font-size: 1.6vmin;
}
.footer .sep{
    color:gray;
    margin-left:15px;
    font-size: 1.2rem;
}

.footer a{
    color:inherit;
    margin-left:15px;
}

.social_icons{
    margin-top:2.5vmin;
}

.footer_logo{
    margin-top: 1.5vmin;
    height: 8vmin;
}

.footer.wedge-footer::before{
    background-image: url("//cdn.jazzi.net/assets/imgs/footer-wedge.svg");
    background-size: 130vw auto;
    background-repeat: no-repeat;
    position: absolute;
    top: -37vmin;
    left: 0;
    height: 150%;
    width: 100%;
    content: "";
    z-index: 1;
    background-position-x: left -3vmin;
}







/*Home Page*/

html.homehtml{
    overflow-y: hidden;
}
.home-page{
    height: 100vh;
}

.tall-head{
    min-height: 100%;
    background-image: url('//cdn.jazzi.net/assets/imgs/tallhead-bg.jpg') ;
    background-color: black;
    background-size: cover;
    background-position-x: right;
    background-position-y: -35px , center;
    background-repeat: no-repeat;
    color:white;
    position: relative;
}

.tall-head::after{
    min-height:50%;
    display: block;
    content:'';
    background:linear-gradient(transparent, black);
    width:100%;
    position: absolute;
    bottom: 0;
}
.tall-head-container{
    position: absolute;
    bottom: 4vmin;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.reverse-flex{
    flex-direction: row-reverse;
}

.tall-head-container .blue-btn{
    text-align: center;
    min-width: 20vmin;
    display: inline-block;
    margin: 1vmin;
}

.tall-head img.homepage-logo{
    height:12vmin;
    position: absolute;
    top: 20vmin;
    left: 20vmin;
}

.section{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-evenly;
    min-height:24vmin;
    padding: 0vmin 20vmin;
    background-color: black;
    position: relative;
    overflow:visible;
}

.section h3{
    font-style: normal;
    font-weight: bold;
    font-size: min(5.5vmin, 32px);
    line-height: 6vmin;
    color: #FFFFFF;
    margin-bottom:10px;
}

.section > div{
    flex: 1 1 0px;
    text-align: center;
    align-self: center;
    z-index:3;
}

.section1 h3,
.section2 h3,
.section3 h3{
    border-radius: 3vmin;
    padding:2vmin;
    text-align: center;
    margin-top:0;
    margin-bottom:2.5vmin;
}

.section1 h3{
    background-color: #D63854;
}

.section2 h3{
    background-color: #14A6D9;
}

.section3 h3{
    background-color: #F5A136;
}

.section p{
    font-style: normal;
    font-weight: 500;
    font-size: 2.5vmin;
    line-height: 3.25vmin;
    color: #FFFFFF;
    max-width:100%;
    margin-top:10px;
}

section p{
    font-style: normal;    
    line-height:1.25;
}


.section img{
    height:50vmin;
}

.section:nth-child(even) .left-side{
    text-align: left;
}

.section:nth-child(odd) .right-side{
    text-align: left;
}

.section1{
    padding-top:10vmin;
}
.section1::after{
    background-image: url('//cdn.jazzi.net/assets/imgs/section1wave.svg');
    background-size: 100vh 100vw;
    background-position: center;
    background-repeat: repeat-x;
    position: absolute;
    top: 0vmin;
    left: 0;
    height: 100%;
    width: 100%;
    content: "";
    z-index: 2;
}

.section2{
    background-image: url('//cdn.jazzi.net/assets/imgs/section2bg.svg');
    background-position: right 20vw center;
    background-size: 35vw auto;
    background-repeat: no-repeat;
}

.section3{
    background-image: url('//cdn.jazzi.net/assets/imgs/section3bg.svg');
    background-position: left 20vw center;
    background-size: 30vw auto;
    background-repeat: no-repeat;
    padding-bottom:7vmin;
}


/* Demo Popup */

.demo-popup .modal__overlay{
    z-index: 5;
}

.demo-popup .modal__title{
    color: #AFAFAF;
}

.demo-popup #demo_interface{
    background-color: unset;
    color:white;
}

.demo-popup #demo_interface .artists-list{
    margin-left:unset;
    margin-right:unset;
}

.demo-popup #demo_interface .artist-holder .artist-name{
    color: white;
}

.demo-popup section:last-of-type{
    padding-bottom:5vmin;
}

.demo-popup .modal__container{
    background-color: #231E21;
    box-shadow: 0.5vmin 0.5vmin 50.5vmin #9292927a;
    height: 90vh;
}

.demo-popup #demo_interface div.track.currently-playing{
    background-color: black;
}


.demo-popup section#demo_tracks,
.demo-popup section#demo_artists,
.demo-popup section#demo_cities{
    max-width: 100vmin;
}

/* Jazz Radio */

.radio-popup .modal__overlay{
    z-index: 5;
}

.radio-popup .modal__close {
    color: #AFAFAF;
}  

.radio-popup .modal__title{
    color: #AFAFAF;
    margin-left:-6vmin;
}

.radio-popup #jazzi_radio{
    background-color: unset;
    color:white;
    padding:1vmin 5vmin;
}

.radio-popup .modal__container{
    background-color: #231E21;
    box-shadow: 0.5vmin 0.5vmin 50.5vmin #9292927a;
    min-width: 80vw;
}

#jazzi_radio .currently-playing img.artwork{
    object-fit: contain;
    object-position: center;
    height: 45vh;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    box-shadow: 112px 101px 300px 3px #80808038;
    display: block;
    background: black;
    margin-bottom:1vmin;
}

#jazzi_radio{
    text-align:center;
}

#jazzi_radio .track-name{
    font-size: 3vmin;
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom:1vmin;
}


#jazzi_radio .track-artist,
#jazzi_radio .track-album,
#jazzi_radio .track-city,
#jazzi_radio .radio-runtime{
    font-size: 2vmin;
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#jazzi_radio .track-artist::before{
    content: 'Artist:';
}
#jazzi_radio .track-album::before{
    content: 'Album:';
}
#jazzi_radio .track-city::before{
    content: 'City:';
}

#jazzi_radio .radio-runtime{
    margin: 1vmin 0;
}


/*Signup Page*/

.small-head{
    min-height: 20vmin;
    background-image: url('//cdn.jazzi.net/assets/imgs/tallhead-bg.jpg') ;
    background-color: black;
    background-size: cover;
    background-position-x: right;
    background-position-y: -35px , center;
    background-repeat: no-repeat;
    color:white;

}

.small-head-container{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-around;
    min-height: 5vmin;
    padding-bottom: 2vmin;
    padding-top: 12vmin;
    color:white;
    max-width: 85vw;
    margin:0 auto;
}

.small-head-container > div{
    flex: 1 1 2px;
}

.small-head-container .right-side img{
    height:10vmin;
}

.small-head-container .left-side{
    flex-grow: 2;
}


.small-head-container .left-side p{
    font-size:3.5vmin;
    font-weight: 700;
    line-height: 4.0vmin;
    margin-top: 5px;
    margin-bottom: 2vmin;
}

.small-head-container .left-side p.small-text{
    font-size: 1.8vmin;
    font-weight: normal;
    line-height: 1;
    margin-top:10px;
}

.small-head-container .left-side p strong{
    color: #15A4D9;
}

.small-head-container .right-side{
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.signup-page.page_content,
.demo-page.page_content{
    background-color:black;
    color:white;
    padding-bottom:5px;
}

.signup-page section{
    max-width: 90vmin;
}

.pretty{
    margin:10px 0;
    font-size: 1.75vmin;
}

.validated-input{
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: auto 60%;
}

.validated-input.loading-bg{
    background-image: url('//cdn.jazzi.net/assets/imgs/loading32.svg');
}

.validated-input.valid-tick-bg{
    background-image: url('//cdn.jazzi.net/assets/imgs/smalltick.png');
}

.validated-input.invalid-cross-bg{
    background-image: url('//cdn.jazzi.net/assets/imgs/smallcross.png');
}

button:disabled{
    cursor: not-allowed;
    opacity: 0.75;
}


/*Demo Page*/
#demo_interface{
    border-radius: 5vmin;
    max-width: 120vmin;
    margin: -2vmin auto;
    background-color:white;
    color: black;
}


#demo_interface .demo-track-progress{
    height: 0px;
    background: silver;
    width: 100%;
    column-span: all;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    transition: height 0.55s cubic-bezier(0.075, 0.82, 0.165, 1);
    accent-color: red;
}
#demo_interface progress {
    color: red;
    -webkit-appearance: none;
}

#demo_interface progress::-webkit-progress-bar{
    background-color: silver;
}

#demo_interface progress::-moz-progress-bar{
    background-color: red;
}

#demo_interface progress::-webkit-progress-value{
    background-color: red;
}

body.isSafari #demo_interface .demo-track-progress{
    display: block;
    position: fixed;
    top: 0;
    z-index: 5;
}

#demo_interface #subheading{
    padding-top:1vmin;
    text-align: center;
    margin-bottom: -1vmin;
}

#demo_tracks .tracks-list{
    table-layout: fixed;
}


#demo_interface div.track{
    transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color:transparent;
}

#demo_interface div.track.currently-playing{
    background-color: #f5f7f5;
}

.artist-holder::after{
    content: '\f00c';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    height:100%;
    width: 100%;
    opacity: 0;
    border-radius: 1vmin;
    position: absolute;
    top: 0;
    left:0;
    padding-top:2.75vmin;
    font-size: 5vmin;
    color: #15A4D9;
    transition: opacity 0.23;
    z-index: -1;
}

.artist-holder.selected-artist::after{
    opacity:0.7;
    z-index: unset;
}
.artist-holder.selected-artist .artist-img{
    filter: brightness(70%);
}

#demo_interface .artist-holder .artist-name{
    transition: color 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.artist-holder.selected-artist .artist-name{
    color:#15A4D9;
}

#demo_interface div.track.currently-playing .demo-track-progress{
    height: 4px;    
}

#demo_tracks .tracks-list .track.hide-demo-track{
    height:0;
    overflow: hidden;
    display: none;
}

#demo_tracks .tracks-list .track > div,
#demo_tracks .tracks-list .track-list-head > *{
    padding: 1.45vmin 2%;
}

#demo_tracks .tracks-list .track-list-head > *:first-child{
    /* useful for the fixed table-layout: ; */
    width: 15%;
}

#demo_tracks .tracks-list .track-list-head > *:not(:first-child){
    /* useful for the fixed table-layout: ; */
    width: 28%;
}

section#demo_tracks,
section#demo_artists,
section#demo_cities{
    max-width: 95vmin;
}


#demo_interface .artists-list{
    display: grid;
    grid-template-columns: repeat( auto-fit, 19vmin );
    margin-bottom:2vmin;
    place-content: center;
}

.smaller.artist-holder .artist-img{
    height:10vmin;
    width: 10vmin;
}

.smaller.artist-holder{
    margin: 2vmin 3vmin;
    position: relative;
}
.signup-cta{
    margin-top:15vmin;
}

section#demo_artists h2{
    margin-bottom:5vmin;
}

section#demo_artists,
section#demo_cities{
    margin:1vmin auto;
}

section#demo_cities{
    display: none; 
    /* added for look and feel changes may 2022 */
    margin-bottom: -2vmin;
}




/*Player Page*/

.tippy-menu .tippy-menu-item{
    display: block;
    padding:0.5vmin 0.8vmin;
    color: #15A4D9;
    border-radius: 0.75vmin;
    font-size: 1.7vmin;
    cursor: pointer;
}

.tippy-menu .tippy-menu-item:hover,
.tippy-menu .tippy-menu-item:focus,
.tippy-menu .tippy-menu-item:active{
    color: white;
    background-color: #15A4D9;
}

.tippy-menu .tippy-menu-item .fas{
    margin-right: 0.75vmin;
    color: #d9d9d9;
    vertical-align: text-bottom;
}

.tippy-menu .tippy-menu-item:hover .fas,
.tippy-menu .tippy-menu-item:focus .fas,
.tippy-menu .tippy-menu-item:active .fas{
    color: white;
}




.player-nav{
    width: 30vmin;
    background-color: #231E21;
    color:white;
    padding: 3vmin 0;
    box-sizing: border-box;
    position: fixed;
    top:0;
    min-height:100vh;
    float:left;
    z-index:3;
    overflow: hidden;
    overscroll-behavior: contain 
}

.player-nav .player-social-media-container{
    position: absolute;
    bottom: 9.8vmin;
    padding-left:1vmin;
    width: 100%;
}
.player-nav .player-social-media-container a{
    color: #ffffffde;
    margin: 0vmin 2vmin;
    font-size: 2.5vmin;
}

.player-nav .player-nav-container{
    display: block;

    width: 30vmin;
    min-height: 50vh;
    max-height: 85vh;
    overflow-x: hidden;
    overflow-y:auto;
}

.player-nav .player-nav-logo{
    max-width: 75%;
    margin-bottom: 5vmin;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    clear: both;
    display: block;
}

.player-nav a.nav-item{
    color:white;
    padding:2% 10%;
    font-size:1.75vmin;
    display: block;
}

.player-nav a.nav-item.higher-one{
    margin: 3vmin 1vmin;
    display: block;
}

.player-nav a.nav-item.higher-one{
    font-weight: bold;
}

.player-nav a.nav-item.higher-one img{
    margin-right:1.5vmin;
    vertical-align: sub;
    width: 2vmin;
}

.player-nav a.nav-item.create-collection{
    width:100%;
    padding: 1.5vmin 1.57vmin;
    font-size:1.75vmin;
    font-weight: bold;
    background-color: #F5A136;
    display: block;
    position: relative;
    color:black;
    box-sizing: border-box;
}

.player-nav a.nav-item.create-collection:after{
    display: inline-block;
    right: 2vmin;
    content: '+';
    font-size: 4vmin;
    position: absolute;
    top: 0;
    font-weight: 400;
}

.player-nav a.nav-fav-artist{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.player-nav h2{
    font-weight: bold;
    margin-bottom: 1vmin;
    font-size:1.9vmin;
    padding: 0% 10%;
    margin-top: 4.5vmin;
    color: #f5a136;
}
.top-bar{
    width: calc(100vw - 30vmin);
    /* height: 5.5vmin; */
    height:auto;
    position: fixed;
    top:0;
    left: 30vmin;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.25);
    overflow: auto;
    box-sizing: border-box;
    /* padding-right:4vmin; */
    color:black;
    background-color: white;
    z-index:3;
}

.top-bar .right-flange{
    vertical-align: middle;    
    display: inline-block;
    position: absolute;
    right: 2.5vmin;
    top: 0.25vmin;
    
}

.top-bar #cart_icon{
    display: inline-block;
    vertical-align: middle;
    font-size:2.5vmin;
    background-image: url('//cdn.jazzi.net/assets/imgs/player/cart.svg');
    background-size: contain;
    background-repeat: no-repeat;
    height: 2.8vmin;
    width: 2.8vmin;
    padding: 1vmin;
    cursor:pointer;
}

.top-bar .user_profile{
    padding: 1vmin;
    font-size: 1.8vmin;
    font-weight: bold;
    display: inline-block;
    cursor:pointer;
    color:black;
}

.top-bar .user_profile a{
    color:black;
}

.top-bar .user_profile img{
    border-radius: 5vmin;
    width: 3vmin;
    height: 3vmin;
    vertical-align: middle;
    margin-right:0.5vmin;
    object-fit: cover; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
}

.top-bar .user_profile .user_name{
    vertical-align: middle;
}




#player_content{
    display: inline-block;
    margin-top:5.5vmin;
    position: relative;
    width: calc(100% - 30vmin);
    overflow-x: hidden;
    padding-bottom: 8vmin;
    margin-left: 30vmin;
    user-select:none;
    min-height: calc(100vh - 5.5vmin);
}

.content-container:last-of-type{
    padding-bottom: 10vmin;
} 


/* Section: Zoom Image Modal */

img[bigimg]{
    cursor: pointer;
}

.big-img-modal-content img{
    max-width: 100%;
    max-height: 80vmin;
}

.modal.zoomed-img-modal .modal__content{
    margin-top: unset;
    padding-bottom: unset;
    line-height: unset;
}

.modal.zoomed-img-modal .modal__container{
    max-height: 95vh;
    padding: 1vmin;
    min-width: unset;
}

.modal.zoomed-img-modal .modal-back-btn{
    display: none;
}

.modal.zoomed-img-modal .modal__header{
    margin-bottom: 2px;
}

.modal.zoomed-img-modal .modal__close{
    position: absolute;
    right: 2.5vmin;
    top: 2vmin;
    color: white;
    font-weight: bold;
    font-size: 4vmin;
    text-shadow: 0 0 2px black;
}


/* Section: Track Info Modal */

.track-info-modal-content{
    margin-top:4.5vmin;
}

.track-info-modal-content .dp-show-edit{
    height:10vmin;
    width: 10vmin;
    float:left;
    vertical-align: middle;
    margin-right:2vmin;
    margin-top: -0.25vmin;
}

/* Section: Dashboard */

section.dashboard{
    padding-top: 15vmin;
    max-width: 1250px;
    padding-bottom: 50vmin;
}

#huge_user_info{
    display: flex;
    direction: ltr;
    align-items: center;
    justify-content: center;
}



#huge_user_info .mid-info-holder{
    flex-grow:1;
    padding-left:15vmin;
}


#huge_user_info .huge-name{
    font-size: 9.5vmin;
}

#huge_user_info .user-type{
    font-size: 2vmin;
    padding-left:1.5vmin;
    font-weight: 100;
}

#dashboard_widgets{
    display: flex;
    direction: ltr;
    margin-top: 10vmin;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-basis: 45%;
}

#dashboard_widgets .widget{
    flex-grow: 1;
    padding: 4vmin 7vmin;
}

#dashboard_widgets .widget h3{
    font-size: 3vmin;
    margin-left:-2vmin;
    padding-bottom: 2vmin;
    margin-bottom: 2vmin;
    border-bottom: 1px solid #15a5da3a;
}




/* Section: Admin Dash */


.upload-progress-indicator{
    position: fixed;
    top:0;
    left:0;
    width: 0vw;
    background-color: #F6A136;
    height: 2px;
    z-index: 50;
}

#add_new_city{
    display: none;
}

.dp-show-edit{
    font-size: 1.2vmin;
    text-align: center;
    position: relative;
    overflow: auto;
    height: 20vmin;
    width: 20vmin;
    display: block;
    border-radius: 1vmin;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.233);
    margin: 1vmin auto;
    overflow: hidden;
}

.dp-show-edit img{
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
}

.dp-show-edit .dp-edit-overlay{
    display: flex;
    align-items: center;
    position: absolute;
    height:100%;
    width: 100%;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    background-color: rgba(0, 0, 0, 0.285);
}

.dp-show-edit .dp-edit-overlay button{
    vertical-align: middle;
    margin-top:0;
}

.dp-show-edit:hover .dp-edit-overlay{
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.285);
}

.dp-show-edit button{
    margin-top: 2vmin;
    display: block;
    margin-left:auto;
    margin-right:auto;
}

.artists-sort-list, .cities-sort-list{
    max-width: 85vmin;
    display: grid;
    grid-template-columns: repeat( 3, minmax(25vmin, 1fr) );
}


.socials-embed{
    margin-bottom:20px;
}

/* Section: Player Home */


.player-shell{
    display: flex;
}

#all_collections{
    position: relative;
}

.solid-line-after{
    border-bottom: 2px inset rgb(245, 245, 245);
}

.dotted-line-after{
    border-bottom: 2px dotted rgb(245, 245, 245);
}

h3.city-title-in-home{
    color: #D63754;
}

.filter-bar{
    background-color: #15A4D9;
    padding: 1vmin 4vmin;
    font-weight: bold;
    color:black;
    width: 100%;
    display: block;
    overflow: visible;
}

.filter-bar.shaded-in-red{
    background: linear-gradient(90deg, #D63754 25.56%, #F5A037 100%);
    color:white;
}


.filter-bar input::placeholder{
    font-weight: bold;
    color:black;
}


.filter-bar .filter-tools{
    position: relative;
    height: 8.5vmin;
    margin-bottom: 1vmin;
}


.filter-bar .sellect-container{
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    margin-right:5vmin;
    width: calc(48% - 5vmin);
    margin-top: 1vmin;
    display:inline-block;
    background-color:white;
    vertical-align: top;
    font-weight: normal;
    padding: 1vmin;
    z-index: 1;
    border-radius: 1vmin;
    border: 0;
}

.filter-bar .sellect-container .sellect-arrow-icon{
    top: 0.5vmin;
    right:0.75vmin;
}

.filter-bar .sellect-container .sellect-destination-list .sellect-item{
    margin:0;
    margin-right: 0.2vmin;
    background-color: #F5A136;
    border-color: #F5A136;
    border-radius: 1vmin;
    color: white;
}

.filter-bar p{
    margin: 1.5vmin 0;
    color:white;
}

.filter-bar .view-description{
    font-size: 1.5vmin;
    font-weight: normal;
}

.filter-bar .sellect-origin-list.open {
    margin-top: 0.3vmin;
}

.filter-bar .sellect-destination-list .sellect-item{
    color:#3a3a3a;
    user-select: none;
}

.filter-bar .sellect-destination-list .sellect-item i.fa{
    color: white;
    font-size: 1.2vmin;
}

.tracks-list.in-coll-modal{
    font-size: 1.5vmin;
}

.tracks-list.in-coll-modal .track{
    padding: 0.6vmin 1vmin;
    cursor: unset;
}

.tracks-list.in-coll-modal .track:hover{
    cursor: unset;
}

#tracks-list.tracks-list.in-coll-modal .track:hover,
#demo_interface #tracks-list.tracks-list .track:hover{
    box-shadow: unset;
    cursor: unset;
}

.tracks-list.in-coll-modal .track-list-head{
    font-size: 1.8vmin;
}


.tracks-list.tracks-list.in-coll-modal .track > div, .tracks-list.tracks-list.in-coll-modal .track-list-head > *{
    padding: 1vmin 2vw;
}

.tracks-list .artist span,
.tracks-list .artist a,
.tracks-list .album a,
.tracks-list .album span{
    color: #d63754;
    display: inline-block;
}

.tracks-list .artist a:hover,
.tracks-list .album a:hover{
    /* border-bottom: 3px solid #d63754 */
   
}
.play-btn-cell{
    vertical-align: middle;
}

button.play-track{
    background-color: #D63754;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);    
    color: #CFCFCF;
    border-radius: 10vmin;
    height: 5vmin;
    width: 5vmin;
    text-align: center;
    padding:0;
    border:0;
    cursor: pointer;
    margin:1vmin 0;
    margin-left:3vmin;
    transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

button.play-track.pause{
    background-color: #F5A136;
}

button.play-track.pause::after{
    content: '\f04c';
    color:white;
}

button.play-track.processing-play::after{
    content: '';
}

button.play-track.processing-play{
    background-image: url('//cdn.jazzi.net/assets/imgs/loading32.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

button.play-track:hover{
    color:white;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.45);  
}

.play-track::after{
    content: '\f04b';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

h1 .show-tippy-from-title.fas{
    font-size: 0.5em;
    padding-bottom: 2px;
    display: inline-block;
    vertical-align: middle;
    color:rgb(185, 185, 185);
    transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

h1 .show-tippy-from-title.fas:hover{
    color:black;
    transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}





/* Section: Edit Collection */

input.collection-name-edit::placeholder{
    color: white;
}
input.collection-name-edit{
    border-radius: 0;
    border:0;
    padding: 0;
    background-color:transparent;
    color:white;
    font-size: 4vmin;
    border-bottom: 2px solid #15A4D9;
    transition: all 0.25s ease-in;
    padding-bottom: 1vmin;
}
input.collection-name-edit:focus{
    border-bottom: 2px solid #F5A136;
}

.filter-bar h2{
    color: white;
}

.filter-bar.edit-collection .back-btn{
    color:white;
}

.tracks-list{
    display: table;
    font-size: 2vmin;
    margin-top: 5vmin;
    margin-left:auto;
    margin-right:auto;
    user-select: none;
    width: 100%;
}

.tracks-list.no-search-results::after{
    background-image:url('//cdn.jazzi.net/assets/imgs/information-icon.svg');
    background-size: 2vmin;
    background-repeat: no-repeat;
    background-position: left top 0.15vmin;
    padding-left:3vmin;
    content:'No results found! Please try to remove some search terms.';
    display: block;
    position: relative;
    font-size: 2vmin;
}

.tracks-list .track{
    display: table-row;
    padding: 1vmin 0;
    border-radius: 5vmin;
    position: relative;
}

#tracks-list.tracks-list .track:hover{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.233);
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
}

.tracks-list .track .name{
    font-weight: bold;
}

.tracks-list .track > div{
    display: table-cell;
    padding: 2vmin 4vw;
    vertical-align: middle;
}

.tracks-list.smaller-padding-in-tracks{
    margin-top:1vmin;
}

.tracks-list.smaller-padding-in-tracks .track > div{
    padding: 1vmin 1vw;
}

.tracks-list .track-list-head{
    color:#E05B4A;
    display:table-header-group;
    font-weight: bold;
    font-size: 3vmin;
}

.tracks-list .track-list-body{
    display: table-row-group;
}

.tracks-list .track-list-body:empty{
    display: table-caption;
    position: absolute;
    padding-top:2vmin;
}

.tracks-list .track-list-body:empty::before{
    content: '\f05a';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;;
    display: table-cell;
    column-span: all;
    text-align: center;
    padding-right: 1.5vmin;
}

.tracks-list .track-list-body:empty::after{
    content: 'No tracks added to this list yet';
    display: table-cell;
    column-span: all;
    text-align: center;
}
.view-coll .tracks-list .track-list-body:empty::after{
    content: 'No tracks added to this collection yet. To add tracks, please edit this collection';
}

.tracks-list .track-list-head > *{
    padding: 3vmin 7vw;
    display:table-cell;
    padding-left:1vw;
}

.tracks-list .track.hidden,
.tracks-list .track.hidden-from-search-view{
    display: none;
}


.tracks-list .track .actions .track-action{
    color:#C4C4C4;
    cursor: pointer;
    padding: 1vmin 1.5vmin;
    text-align: center;
    position: relative;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px){
    /* prevent sticky hover after click*/
    .tracks-list .track .actions .track-action:hover{
        color:#E05B4A;
    }
}

.track .actions .track-action.action-like-unlike-track.hearted{
    color:#E05B4A;
}

.tracks-list .track .actions .track-action.action-add-to-playlist::after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f055';
    position: absolute;
    left: 2.6vmin;
    top: 2.4vmin;
    font-size: 1.4vmin;
    background-color: white;
    border-radius: 3vmin;
    border: 0;
}


#all-tracks-list{
    position: fixed;
    right: -100vw;
    transition: right 0.1s ease-in-out;
    top: 5.5vmin;
    background-color:white;
    padding:3vmin;
    box-shadow: -14px 0px 14px rgba(0, 0, 0, 0.133);
    width: 58%;
    height: calc(100vh - 5.5vmin);
}
#all-tracks-list.visible{
    right:0;
}

#all-tracks-list .tracks-list{
    min-width: 100%;
    padding-left: 0.25vmin;
    padding-right: 0.25vmin;
}

#all-tracks-list .tracks-list .track:hover{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.233);
    cursor: pointer;    
}

#all-tracks-list .tracks-list .track .name::before{
    content: '\f055';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline;
    position: absolute;
    left:2.5vmin;
    color: #F5A136;
    opacity: 0;
    transition: all 0.075s ease-in-out;
    top: 41%;
}

#all-tracks-list .tracks-list .track.just-added .name::before{
    content: '\f058';
    color:green;
    opacity: 1;
}

#all-tracks-list .tracks-list .track:hover .name::before{
    opacity: 1;
}

#all-tracks-list .scrollable-pane{
    max-height: 78vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Section: New Collection */

.create-collection{
    margin: 5vmin auto;
}

input.collection-name-new{
    border-radius: 0;
    border:0;
    padding: 0;
    background-color:transparent;
    font-size: 4vmin;
    border-bottom: 2px solid #15A4D9;
    transition: all 0.25s ease-in;
    padding-bottom: 1vmin;
}



/* Section: Player */

#player, #player audio {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 3;
    background-color: #231E21;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.333);
    color: white;
    font-size: 2.5vmin;
    max-height: 10vmin;
    transition: max-height .13s ease-out, height .13s ease-out;
    will-change: height max-height;
}

#player.closed{
    max-height: 0;
}

#player.fullscreen .fullscreen-top-nav{
    max-height: 7vh;
    width: 100%;
    padding: 4vmin 10%;
    position: absolute;
    top:0;
    opacity: 1;
    color:white;
    height: auto;
    font-size: 2vmin;
}


#player.fullscreen{
    max-height: 100%;
    height:100%;
}

#player.fullscreen .bottom-elements{
    width:100%;
    position: absolute;
    bottom:0;
    background-color: inherit;
    z-index:1;
}

#player .fullscreen-elements,
#player .fullscreen-top-nav{
    opacity: 0;
    height:0px;
    width:0px;
    transition: opacity .5s ease-in-out;
    overflow: hidden;
}

#player.fullscreen .fullscreen-elements{
    position: absolute;
    margin-left: 10%;
    margin-right: 0%;
    opacity: 1;
    top:15%;
    display: block;
    height:auto;
    width:40%;
    overflow: visible;
}

#player .fullscreen-elements .fullscreen-artwork{
    object-fit: contain;
    object-position: center;
    height: 59vh;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    box-shadow: 112px 101px 300px 3px #80808038;
    display: block;
    background:black;
}

#player .fullscreen-elements .fullscreen-track-details{
    font-size: 3vmin;
    margin-top:1vmin;
    width: 70%;
    display: inline-block;
}

#player .fullscreen-elements .fullscreen-track-details .track-name{
    font-size: 3vmin;
    display:block;
}

#player .fullscreen-elements .fullscreen-track-details .track-name:hover{
    cursor:pointer;
    color: #F5A136;
}

#player .fullscreen-elements .fullscreen-track-details .track-artist,
#player .fullscreen-elements .fullscreen-track-details .track-album{
    font-size: 2vmin;
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #F5A136;
}

#player .fullscreen-elements .fullscreen-track-details .track-artist a,
#player .fullscreen-elements .fullscreen-track-details .track-album a{
    color: #F5A136;
}

#player .fullscreen-elements .fullscreen-track-details .track-artist::before{
    content: 'by ';
    color:white;
}

#player .fullscreen-elements .fullscreen-track-details .track-album:not(:empty):before{
    content: 'Album: ';
    color:white;
}

#player .fullscreen-elements .fullscreen-track-runtime{
    display: inline-block;
    width: 30%;
    text-align: right;
    vertical-align: top;
    padding-right: 5px;
    margin-top: 1vmin;
}

#player .fullscreen-playlist-nav{
    position: absolute;
    width: 34%;
    top: calc(59vh + 15%);
    margin-top: 1.5vmin;
    right: 10%;
    margin-top: 2.5vmin;
    font-size: 2vmin;
}

#player .fullscreen-playlist-runtime{
    position: absolute;
    right: 0;
    top: 0;
}

#player .fullscreen-playlist-runtime::before{
    content: 'Playlist Runtime: ';
}

@media only screen and (min-width: 1025px){
    #player.fullscreen .playlist-holder,
    #player.fullscreen .playlist-holder.visible{
        position: absolute;
        top: 15%;
        height: 59vh;
        border: 2px solid black;
        right: 10%;
        width: 34%;
        opacity: 1;
        border-radius: 8px;
        background-color: #2d2a2c;
        transition: unset;
    }

    #player.fullscreen .playlist-holder #playlist-tracks-list.tracks-list{
        max-height:50vh;
    }

    #player .playlist-holder.disable-transitions{
        transition: unset;
    }

    /* #player.fullscreen .show-playlist{
        display: none;
    } */

    #player .end-controls .show-playlist.disabled{
        opacity: 0.2;
        cursor:not-allowed;
    }
    #player .end-controls .show-playlist.disabled.text-yellow{
        color:white;
    }
}

button.play-btn{
    background-color: #D63754;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);    
    color: #CFCFCF;
    border-radius: 10vmin;
    height: 5vmin;
    width: 5vmin;
    text-align: center;
    padding:0;
    border:0;
    cursor: pointer;
    margin:1vmin 0;
    transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

button.play-btn.pause{
    background-color: #F5A136;
}

button.play-btn.pause::after{
    content: '\f04c';
    color:white;
}

button.play-btn.processing-play::after{
    content: '\f';
}

button.play-btn.processing-play{
    background-image: url('//cdn.jazzi.net/assets/imgs/loading32.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

button.play-btn:hover{
    color:white;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.45);  
}

.play-btn::after{
    content: '\f04b';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

button.next-prev-btn{
    background: transparent;
    border:0;
    color:#878787;
    font-size: 2vmin;
    cursor: pointer;
}

button.next-prev-btn:hover{
    color:white;
}

button.next-prev-btn:disabled {
    color: #8787871a;
    cursor: not-allowed;
}

button.next-prev-btn i.fas{
    margin:2vmin;
    vertical-align: middle;
}

#player .progress{
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    height: 0.5vmin;
    border: 0;
    background-color:#F5A037;
    position: relative;
    cursor: pointer;
    transition: height 0.2s linear;
}

#player:hover .progress{
    height: 1vmin;
}

#player .progress span{
    background-color:#E05B4A;
    height:100%;
    display: block;
    
}


#player .shuffle-btn,
#player .volume-button,
#player .repeat-btn,
#player .show-full-player-btn{ 
    position: relative;   
    overflow: visible;
    display: inline-block;
    margin: 0 1vmin;
    vertical-align: middle;
    min-width: 3vmin;
    text-align: center;
}

#player .shuffle-btn i,
#player .volume-button i,
#player .repeat-btn i,
#player .show-full-player-btn i,
#player .show-playlist:not(.disabled) i{ 
    cursor: pointer;
}

#player .end-controls .show-playlist{
    margin: 0 1vmin;
}

#player .end-controls .show-playlist i{
    transition: color 0.2s ease-in-out;
    vertical-align: middle;
}

#player .show-full-player-btn{
    transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#player.fullscreen .show-full-player-btn{
    transform: rotate(180deg); 
    color:#f5a136;
}


#player .volume-button .volume-range{
    transform: rotate(270deg);
    display: none;
    position: absolute;
    top:-10vmin;
    left:-6vmin;
    width: 14vmin;
    background-color:#0c0c0c;
    padding: 1vmin;
    height: 5vmin;
    border-radius: 1vmin;
}

#player .volume-button .volume-range input{
    width: 100%;
}

#player .volume-button.visible .volume-range{
    display: block;
}

#player .volume-button.visible{
    color:#f5a136;
}

#player .track-details{
    width: 29%;
    display: inline-block;
    margin-left:1%;
    vertical-align: middle;
}

#player .track-dp{
    display: inline-block;
    width: 4.5vmin;
    height: 4.5vmin;
    vertical-align: top;
    margin-right: 1vmin;
    cursor: pointer;
}

#player .track-dp.hidden{
    display: none;
}

#player .name-and-artist{
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 5.5vmin);
}

#player .track-name{
    display: inline-block;
    font-size: 2vmin;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}

#player .artist-name{
    color: #F5A136;
    font-size: 1.5vmin;
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-top: 0.5vmin;
}

#player .artist-name a{
    color: #F5A136;
}


#player .middle-controls{
    display: inline-block;
    margin: 0 auto;
    width: 40%;
    text-align: center;
}

#player .end-controls{
    display: inline-block;
    width: 29%;
    text-align: right;
    margin-right:1%;
}



.text-yellow{
    color: #F5A136;
}

#player .playlist-holder{
    position: fixed;
    width: 30vw;
    right: -30vw;
    opacity: 0.001;
    height: auto;
    padding: 1vmin;
    transition: all ease-in-out 0.2s;
    bottom: 7.5vh;
    background-color:rgba(35,30,33,0.9);
    max-height: calc(100vh - 30vmin);
    overflow-y: hidden;
    overflow-x: hidden;
    border-top-left-radius: 1vmin;
}

#player .playlist-holder #playlist-tracks-list.tracks-list{
    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
}


#player .playlist-holder:hover{
    background-color: rgba(35,30,33,1);
}

#player .playlist-holder:empty::before, #player .playlist-holder .tracks-list:empty::before{
    content: 'Your playlist is empty. You can add tracks by browsing through the collections in the Player Home section.';
    font-size: 1.4vmin;
    padding: 2vmin;
    display: block;
}

#player .playlist-holder.visible{
    right: 0;
    opacity: 1;
    transition: all ease-in-out 0.2s;
    box-shadow: 0px 0 2vmin rgba(0, 0, 0, 0.25);
}

#player .playlist-holder .tracks-list .track > div,
#player .playlist-holder .tracks-list .track > span {
    padding: 1vmin 0;
    display: table-cell;
}

#player .playlist-holder .tracks-list{
    margin:0;
    padding:2vmin;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
}

#player .playlist-holder .tracks-list .track .name{
    width: 99%;
    cursor: pointer;
}

#player .playlist-holder .tracks-list .track .name:hover{
    color: #dbad71;
}

#player .playlist-holder .tracks-list .track .fa-grip-horizontal {
    color: rgb(110, 110, 110);
    cursor: grab;
    padding-right: 2vmin;
}

#player .playlist-holder .playback-list{
    padding: 1.5vmin;
    display:flex;
    align-items: center;
    border-bottom: 2px solid #ffffff4a;
}

#player .playlist-holder .playback-list .dp-show-edit{
    width:3vmin;
    min-width: 3vmin;
    min-height: 3vmin;
    height:3vmin;
    margin-bottom: unset;
    margin-top: unset;
    border-radius: 0.35vmin; 
}

#player .playlist-holder .playback-list .name{
    flex-grow:1;
    margin-left:1vmin;
    font-size: 2vmin;
    max-width: calc(100% - 4vmin);;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color:white;
}

/* Section: View Collection */

.collection-deets .collection-name{
    font-style: normal;
    font-weight: bold;
    font-size: 4vmin;
    line-height: 4.5vmin;
    display:block;
    
}

.view-coll .tracks-list #tracks-list-body .track{
    cursor: unset;
}

.view-coll .tracks-list #tracks-list-body .track:hover{
    cursor: unset;
}

.view-coll .tracks-list #tracks-list-body .track:hover{
    box-shadow: unset;
    cursor: unset;
}

.view-coll .tracks-list #tracks-list-body .track button{
    float:right;
}


.collection-deets{
    position: relative;
}

.collection-deets .fake-link2{
    display: inline-block;
    color:#C9C7C8;
    margin-top:2.5vmin;
}

.collection-deets .fake-link2:hover{
    color:white;
}

.collection-deets > .simple-flex{
    margin-bottom: 1vmin;
}

.collection-deets .dp-show-edit{
    float:left;
    height: 9vmin;
    width: 9vmin;
    vertical-align: middle;
    margin-right:2vmin;
}


.big-actions{
    position: absolute;
    bottom:-5vmin;
    z-index:1;
}

.big-actions .big-action{
    background:transparent;
    border:0;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.big-actions .big-action img{
    height: 13vmin;
    transition: all 0.2s ease-in;
}

.big-actions .big-action:hover img,
.big-actions .big-action:hover::after,
.big-actions .big-action img:hover{
    transform: scale(1.04);
}

.big-actions .big-action.processing::after{
    background-image: url('//cdn.jazzi.net/assets/imgs/loading32.svg');
    background-size: 70%;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: -0.68vmin;
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s ease-in;
}

/* Section: Cities */


.cities-list{
    margin-left:-5vmin;
    margin-right: -5vmin;
}

.city-holder{
    display: inline-block;
    margin: 3vmin 5vmin;
    font-size: 1.65vmin;
    text-align: center;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.city-holder .city-name{
    font-weight: bold;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    color: black;
    margin-top: 0.5vmin;
}

.city-holder:hover{
    transform: scale(1.1);
}


.city-holder .city-img{
    border-radius: 50%;
    height: 15vmin;
    width: 15vmin;
}

.city-holder .city-curator,
.artist-holder .artist-associated-city{
    font-weight: lighter;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    color: rgb(61, 61, 61);
    margin-top: 0.35vmin;
    font-size: 1.5vmin;
}

.collection-deets .breadcrumbs{
    padding-top:1.35vmin;
}

.collection-deets .city-curator,
.collection-deets .artist-associated-city,
.collection-deets .album-associated-artist,
.collection-deets .album-ensemble-name{
    font-size: 1.5vmin;
    font-weight: 200;
    color: #dedede;
    padding-top:0.5vmin;
}




.tracks-list:empty::after{
    background-image:url('//cdn.jazzi.net/assets/imgs/information-icon.svg');
    background-size: 2vmin;
    background-repeat: no-repeat;
    background-position: left top 0.15vmin;
    padding-left:3vmin;
    content:'No tracks found!';
    display: block;
    position: relative;
    font-size: 2vmin;
}


/* Section: Artists */


.artists-list{
    margin-left:-5vmin;
    margin-right: -5vmin;
}

#artists_tab_content .artists-list:empty{
    margin: 0;
}

.artists-list:empty::after{
    background-image:url('//cdn.jazzi.net/assets/imgs/information-icon.svg');
    background-size: 2vmin;
    background-repeat: no-repeat;
    background-position: left top 0.15vmin;
    padding-left:3vmin;

    content:'No artists found!';
    display: block;
    position: relative;
}

.artist-holder{
    display: inline-block;
    margin: 3vmin 5vmin;
    font-size: 1.65vmin;
    text-align: center;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.artist-holder .artist-name{
    font-weight: bold;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    color: black;
}

.artist-holder:hover{
    transform: scale(1.1);
}


.artist-holder .artist-img{
    border-radius: 50%;
    height: 15vmin;
    width: 15vmin;
    object-fit: cover;
    object-position: center;
}





.collection-deets .artist-name,
.collection-deets .city-name{
    font-style: normal;
    font-weight: bold;
    font-size: 3vmin;
    line-height: 4vmin;
    display: block;
    padding-top:0.5vmin;
}

/* Section: Player Search */

.top-bar .search-bar{
    width: calc(100% - 15vmin);
    box-sizing: border-box;
    padding-left:6vmin;
    background-size: 2.25vmin 1.8vmin;
    background-image: url('//cdn.jazzi.net/assets/imgs/player/search-black.svg');
    color:black;
    font-size: 1.8vmin;
    height: 5.5vmin;
    border:0;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: left 2vmin center;
}

#search_display.show{
    max-height:20vmin;
    opacity:1;
    user-select:none;
}

#search_display.show:not(:empty){ 
    height:auto;
    max-height:75vmin;
    border-top: 1px groove #ebe7e7;
}

#search_display.loading-icon{
    background-image:url('//cdn.jazzi.net/assets/imgs/loading32.svg');
    background-position: center center;
    background-size: 6.4vmin;
    background-repeat: no-repeat;
    min-height: 10vmin;
}

#search_display{
    display: block;
    max-height: 0;
    min-height:0;
    width: 100%;
    opacity: 0;
    transition: max-height 0.65s cubic-bezier(0.075, 0.82, 0.165, 1), min-height 0.75s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 1.25s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color:white;
    overflow-x: hidden;
    overflow-y: auto;
}

#search_display .nf404{
    padding: 5vmin;
    text-align: center;
}

#search_display .nf404 .exclaim-icon i{
    font-size: 6vmin;
    padding-bottom:2vmin;
}


.search-results-hori-scroll{
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    position: relative;
    width: 100%;
    padding: 1vmin 0;
}

.search-results-hori-scroll .search-single-item{
    scroll-snap-align: start;
    margin-left:0;
    padding-left:2vmin;
}

.hori-scroll-element-container{
    height: auto;
    width: 100%;
    position: relative;
    scroll-behavior: smooth;
}

.search-single-item{
    display:inline-block;
}

.hori-scroll-element-container .search-results-hori-scroll > div.search-single-item:first-child{
    padding-left: 6vmin;
}

.hori-scroll-element-container .search-results-hori-scroll > div.search-single-item:last-child{
    padding-right: 6vmin;
}

.scroll-overlay-arrow {
    width: 5.5vmin;
    height: 100%;
    min-height: 2.5vmin;
    background-color: white;
    background-color: rgb(255 255 255);
    position: absolute;
    top: 0;
    z-index: 2;
    cursor: pointer;
    color: #f5a136;
    background-position: center;
    background-size: 1.5vmin;
    background-repeat: no-repeat;
}

.scroll-overlay-arrow.right-arrow{
    right: 0;
    /* background: transparent linear-gradient( to right, transparent 15%, rgba(85, 84, 84, 0.863) ); */
    border-left:1px solid #f0f8ff99;
    background-image: url('//cdn.jazzi.net/assets/imgs/player/caret-right-solid.svg');
}

.scroll-overlay-arrow.left-arrow{
    left: 0;
    /* background: transparent linear-gradient( to left, transparent 15%, rgba(85, 84, 84, 0.863) ); */
    border-right:1px solid #f0f8ff99;
    background-image: url('//cdn.jazzi.net/assets/imgs/player/caret-left-solid.svg');
}


/* Smaller items for search bar results */
#search_display .collection-tile img.city-img{
    height:15vmin;
    width: 15vmin;
}

#search_display .collection-tile:after{
    height:15vmin;
}

#search_display .collection-tile{
    margin:1vmin;
    width: 15vmin;
    height: 20vmin;
    vertical-align: top;
}

#search_display .collection-tile .name{
    white-space: unset;
}

#search_display .collection-tile .side-play-btn{
    top:10vmin;
}

#search_display .city-img,
#search_display .artist-img{
    height:10vmin;
    width: 10vmin;
}
#search_display .city-holder,
#search_display .artist-holder{
    margin:1vmin 2vmin;
}

/* Add to Collection Modal */
.add-to-collection-list .pretty{
    display: block;
    margin: 2vmin 0;
    font-size: 1.2em;
    opacity: 1;
    transition: opacity 0.25s ease-out;
    height:auto;
}

.add-to-collection-list .pretty.hidden{
    transition: opacity 0.25s ease-out;
    opacity: 0;
    height: 0;
    display: block;
    width:0;
    overflow: hidden;
    margin:0;
    padding:0;
}

.add-to-collection-list{
    min-height:19em;
}

#new_coll_name{
    position: absolute;
    display: inline-block;
    font-weight: 400;
    opacity: 1;
    z-index: 3;
    font-size: 1em;
    top: -3px;
    left: 1.5em;
    height: auto;
}


/* Section: Cart */

.filter-bar.shaded-in-gray{
    /* background: linear-gradient(90deg, #8080805e 25.56%, #8080805e 100%); */
    background:#80808038;
    color:black;
}

.filter-bar.shaded-in-gray .fake-link2{
    color: black;
}

.filter-bar.shaded-in-gray .fake-link2:hover{
    color: #d63854;
}

.filter-bar.shaded-in-yellow{
    /* background: linear-gradient(90deg, #8080805e 25.56%, #8080805e 100%); */
    background:#f5a136;
    color:black;
}

.filter-bar.shaded-in-yellow .fake-link2{
    color: black;
}

.filter-bar.shaded-in-yellow .fake-link2:hover{
    color: #d63854;
}

.cart-checkout-container{
    margin: 3vmin 4vw;
}

.cart-checkout-container > div.payment-disclaimer {
    font-size: 2vmin;
    padding: 1vmin 0.5vmin;
}

.cart-checkout-info{
    background-color: #F5A136;
    color: black;
    border-radius: 10px;
    box-shadow: 0 0 48px #0000001a;
    
}

.cart-checkout-info .simple-flex{
    align-items: center;
}

.cart-checkout-info .cart-total{
    font-size: 3vmin;
    display: inline-block;
    clear:both;
    width: 100%;
    font-weight: bold;
}
.cart-checkout-info .track-count{
    display: inline-block;
    clear:both;
    margin-top: 0.5vmin;

}

.cart-checkout-info .simple-flex > div:not(:empty){
    padding: 2vmin 4vw;
}

.cart-checkout-info .simple-flex .right-side{
    text-align: right;
}

/* Section: Feedback */
.feedback-check{
    font-size: 7em;
    color: #f5a136;
    margin-top: 7vmin;
}


/* Section: Tracks */

.track .year-n-price{
    margin-top:0.5vmin;
}
.track .year-n-price > *,
.track .artist .city{
    color: #696969;
    font-weight: normal;
    font-size: 1.75vmin;
}

.track .city{
    margin-top:0.7vmin;
}

.track .year-n-price .year:not(:empty){
    border-right: 1px solid #e4e4e4;
    padding-right: 0.75vmin;
    margin-right: 0.75vmin;
}

.track .year-n-price .price{
    cursor: pointer;
}

.track .year-n-price .price:not(:empty):before{
    font-weight: 300;
    content: "$";
}

.track .year-n-price .price:not(:empty):after{
    font-weight: 300;
    content: " USD";
}


.track .year-n-price .price:hover,
.track .year-n-price .download-track:hover{
    color: black;
}

.track .album:empty::before{
    content:'None';
    color: #696969;
}