html {
    /* Fix mobile click delay caused by fancy touch gestures - https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action */
    touch-action: pan-y;
}

body {
    box-sizing: border-box;
    overscroll-behavior-y: contain; /* Prevent scroll/pull-to-refresh on Chrome in PWA mode */
    -webkit-overflow-scrolling: touch; /* Same but for iOS? */

    /* Fix mobile click delay caused by fancy touch gestures - https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action */
    touch-action: pan-y;

    /*padding: 3px;*/
}
.player-wrapper {
    border: 0px solid;
    height: 100vh; /* Fallback */
    height: 100dvh;
    box-sizing: border-box;
    min-width: 0; /** Trick to make flexbox text-truncate work and the flex-grow part not overflow page in the player_bottom_bar */

    padding-left: env(safe-area-inset-left, 0rem);
    padding-right: env(safe-area-inset-right, 0rem);

    transition: background-image 100ms ease-in-out;

    -webkit-overflow-scrolling: touch; /* Prevent scroll/pull-to-refresh on Safari in PWA mode */

    /*min-height: -webkit-fill-available; !* Respect iOS "safe area" so it leaves padding for the iOS Home Bar *!*/
    /*padding-bottom: env(safe-area-inset-bottom, 20px);*/

    /*background-image: url('/static/stations/playerbg.svg');*/

    /* for logos:
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    */

    /* For images, and gradients */
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/

    /** Three different background modes
    for logos - contain, no-repeat, center
    for textures - auto, center, repeat.
    for images - auto, center, no-repeat
     */

    /*background: #222222 !important;*/
    /*z-index: -3;*/

    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

h1.station-name {
    line-height: revert;
    margin: 0;
}
.top-station-logo {
    min-height: 48px;
    min-width: 48px;
    width: 5vh;
    height: 100%;
    object-fit: cover;
}

/* Background positioning styles */
.bg-pos-cover {
    /* For images, and gradients */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.bg-pos-contain {
    /* For logos, gradients */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.bg-pos-tiles {
    /* For textures */
    background-size: initial;
    background-repeat: repeat;
    background-position: center;
}

.player-wrapper::before {
    /*background-image: url('/static/stations/playerbg2.svg');*/
    background-size: cover;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.2;
}

.player-content-panel {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px); /*grayscale(50%) brightness(40%);*/
    border-radius: 5px;
    /*margin-bottom: 1rem;*/
}

#streams-select {
    text-overflow: ellipsis;
    background: rgba(255,255,255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z'%3E%3C/path%3E%3C/svg%3E") right .75rem center/8px 10px no-repeat;
}

/*a {*/
/*    color: #ffffff !important;*/
/*    font-weight: 600;*/
/*}*/

.text-overflow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.metadata {
    font-size: 1.2rem;
    line-height: 1.6rem;
    pointer-events: none;
    /** All 3 needed for ellipsis to work */
}

.metadata-song {
    z-index: 5;
    /*color: black;*/
    /*text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;*/
    pointer-events: none;
    /*background: rgba(160, 160, 160, 0.3);*/
    /*margin-top: 30vh;*/
    /*margin-top: -35vh;*/
    /*padding:  0.25rem 0.75rem;*/
    /*border-radius: 1rem;*/
    text-align: left;
}

.metadata-artist {
    /*line-height: 1.4rem;*/
    font-weight: 200;
}
.metadata-title {
    /*line-height: 1.8rem;*/
}
.metadata-artwork {
    height: 100%;
    /*padding: .375rem .5rem;*/
    /*border: 1px solid black;*/
    /*border-radius: 3px;*/
}

.history-artist {
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 200;
}
.history-title {
    font-size: 1.2rem;
    line-height: 1.4rem;
}
.history-song {
    font-size: 1.2rem;
    line-height: 1.4rem;
}
.history-album {
    font-size: 1.2rem;
    line-height: 1.4rem;
}

.history-artwork {
    height: 2.5rem;
    width: 2.5rem;
}


#player_bottom_bar {
    max-height: 4.2rem;
    min-height: 4.2rem;
    overflow-x: hidden;
    overflow-y: visible;
    text-overflow: ellipsis;
    background: rgba(0, 0, 0, 0.1);
}

#player_bottom_navtabs {
    max-height: 5rem;
    min-height: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: max(env(safe-area-inset-bottom, 0.5rem), 0.5rem);  /* Equivalent on mt-2, but put it here for readability since we use env() below for the bottom */
    /* Made padding-top same as the padding-bottom just to keep it centered on iOS in PWA mode.*/
    padding-bottom: max(env(safe-area-inset-bottom, 0.5rem), 0.5rem); /* Adjust bottom up for different safe area on iOS in PWA mode */
    /*background: rgba(0, 0, 0, 0.5);*/
}
/*#player_bottom_navtabs > button {*/
/*    padding-top: 0.5rem;  !* Equivalent on mt-2, but put it here for readability since we use env() below for the bottom *!*/
/*    margin-bottom: max(env(safe-area-inset-bottom, 0.5rem), 0.5rem);*/
/*}*/

.player-bottom-bar-metadata-container {
    /*max-width: 65vw;*/
    /*min-width: 0; !* Flexbox truncated text solution - https://css-tricks.com/flexbox-truncated-text/ *!*/
}

.bottom_navtab_button > span.glyphicons {
    font-size: 1.6rem;
}

.bottom_navtab_button {
    /* Reset <button> styles in 2 easy steps */
    all: unset;
    outline: revert;

    vertical-align: middle;
    font-size: 1.0rem;
    /*margin: 1rem 2rem;*/
}

.bottom_navtab_button:active {
    color: #505050;
}
.bottom_navtab_button-active {
    color: #4cdda8;
}

.btn-pwang {
    /*background-color: #6c757d;*/
    /*border-color: #545b62;*/
    color: #fafafa;
}

a.btn-pwang {
    color: #fafafa !important;
}

.btn-pwang:hover {
    border-color: #545b62;
    background-color: #5a6268;
    color: #fafafa;
    text-decoration: none;
}

/*a {*/
/*    color: #fafafa;*/
/*}*/
/*a:hover {*/
/*    text-decoration: underline;*/
/*    color: #fafafa;*/
/*}*/

.playerbar-btn {
    background-color: #6c757d;
    color: #fafafa;
    font-size: 1.5rem;
    min-height: 100%;
    cursor: pointer;
    border-radius: .25rem;
    padding: .375rem .5rem;
    border: 1px solid transparent;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.playerbar-btn:hover {
    border-color: #545b62;
    background-color: #5a6268;
    color: #fafafa;
    text-decoration: none;
}

#playerbar-playbtn {
    line-height: 1.0rem;
    width: 56px;
}

#playerbar-volbtn {
    width: 56px;
    min-width: 56px;
}

.playerbar-spinner {
    height: 1.7rem;
}

.playback-icon-inner {
    /*display: none;*/
    max-height: 2.4rem;
    width: auto;
}

.bigplay {
    background-image: url('/static/stations/playerplaybg.svg');
    background-size: cover;
    padding: 36px;
    min-height: 20vh;
    min-width: 20vh;
    cursor: pointer;
}

.bigplay2 {
    background-image: url('/static/stations/playerplaybg.svg');
    background-size: cover;
    padding: 36px;
    cursor: pointer;
}

.playcursor {
    cursor: pointer;
}
.spinner
{
    animation: spin 4s infinite linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.float-spinner {
    position: absolute;
}

#audio-viz {
    z-index: 1;
    /*position: absolute;*/
    /*width: 90%;*/
    /*height: 50%;*/
    /*width: 90%;*/
    /*height: 55%;*/
    /*top: 20%;*/
    cursor: pointer;

    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
/*.viz-primary*/
/*{*/
    /*color: rgb(64, 222, 164);*/
/*}*/

/*.viz-secondary*/
/*{*/

/*}*/
/*.viz-min*/
/*{*/
    /*color: rgb(0, 100.0, 0);*/
/*}*/

/*.viz-weight*/
/*{*/
    /*color: rgb(0, 1.0, 0);*/
/*}*/


.viz-primary
{
    color: rgb(64, 222.0, 164);
}
.viz-secondary
{

}

.viz-min
{
    color: rgb(64, 100.0, 164);
}

.viz-weight
{
    color: rgb(1.0, 2.0, 1.0);
}


/* The slider itself */
.volslider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 4px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  border-radius: 18px;
  outline: none; /* Remove outline */
  /*opacity: 0.7;*/ /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .1s; /* 0.2 seconds transition on hover */
  transition: opacity .1s;
}

/* Mouse-over effects */
.volslider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.volslider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  border-radius: 18px;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #7be1bc; /* Cyan background */
  cursor: pointer; /* Cursor on hover */
}

.volslider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  border-radius: 18px;
  background: #7be1bc; /* Cyan background */
  cursor: pointer; /* Cursor on hover */
}

.volslider-container {
    position: relative;
}

.editor-sidebar {
    max-height: 100vh;
    min-width: 300px;
}


.editor-top-group {
    overflow-y: scroll;
}

.editor-footer-butons-group {
    /*position: absolute;*/
    /*bottom: 0;*/
    /*min-width: 280px;*/
    background: #ffffff;
}

.bg-preset-radiobutton {
    width: 64px;
    height: 64px;
    background-size: cover;
    appearance: none;
    /*-webkit-user-select: none;*/
    /*-moz-user-select: none;*/
    /*-ms-user-select: none;*/
    /*user-select: none;*/
}

input[type=radio].bg-preset-radiobutton {
  /*position: absolute;*/
  /*opacity: 0;*/
  /*cursor: pointer;*/
  /*height: 0;*/
  /*width: 0;*/
    appearance: none;
    border: 1px solid #dee2e6;
    width: 64px;
    height: 64px;
    cursor: pointer;
}
input[type=radio].bg-preset-radiobutton:checked  {
    /*border: 3px solid #4cdda8;*/
    border: 3px solid #007bff;
}

.bg-preset-peachy {
    background-image: url('/static/stations/images/player/bg-peachy.svg');
}
.bg-preset-watermelon {
    background-image: url('/static/stations/images/player/bg-watermelon.svg');
}
.bg-preset-soda {
    background-image: url('/static/stations/images/player/bg-soda.svg');
}
.bg-preset-honeydew {
    background-image: url('/static/stations/images/player/bg-honeydew.svg');
}
.bg-preset-radiomast {
    background-image: url('/static/stations/images/player/bg-radiomast.svg');
}
.bg-preset-curtains {
    background-image: url('/static/stations/images/player/bg-sine2.png');
}
.bg-preset-cleave {
    background-image: url('/static/stations/images/player/bg-cleave.svg');
}
.bg-preset-stripes {
    background-image: url('/static/stations/images/player/bg-stripes.png');
}
.bg-preset-virtualcity {
    background-image: url('/static/stations/images/player/bg-virtualcity.webp');
}
.bg-preset-grain {
    background-image: url('/static/stations/images/player/bg-grain.png');
}

.bg-preset-none {
    background-image: url('/static/stations/images/player/bg-none.svg');
}

.bg-preset-custom-picker {
    background-image: url('/static/stations/images/player/bg-custom.svg');
}

.font-metropolis {

}

.font-default h1 {
    margin-bottom: 0.3rem; /* Aligning the station name with the logo better */
}

.font-transitional {
    font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    font-weight: normal;
    line-height: revert;
}

.font-transitional h1 {
    margin-top: 0.3rem;
}

.font-industrial {
    font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    font-weight: normal;
    line-height: revert;
}
.font-industrial h1 {
    margin-top: 0.3rem;
}

.font-rounded_sans {
    font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
    font-weight: normal;
    line-height: revert;
}

.font-humanist {
    font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    font-weight: normal;
    line-height: revert;

}
.font-antique {
    font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
    font-weight: normal;
    line-height: revert;

}
.font-didone {
    font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
    font-weight: normal;

}
.font-geometric_humanist {
    font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-weight: normal;
    line-height: revert;

}
.font-neo_grotesque {
    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    font-weight: normal;
    line-height: revert;

}
.font-monospace_slab_serif {
    font-family: 'Nimbus Mono PS', 'Courier New', monospace;
    font-weight: normal;
    line-height: revert;
}

.invert {
    filter: invert(1);
}