:root {
    --background: rgba(57, 68 ,70 ,1);
    --text-color: rgba(255, 255, 255, 0.9);
    --link-color: rgba(255, 255, 255, 0.7);
    --accent-color2: rgb(95, 15, 64);
    --accent-color: rgb(15, 76, 92);
    --nav-color: rgba(24, 70, 197, 0.520);
    --sidebar:rgba(62, 81, 90, 1);
	--box-color:rgba(255, 255, 255, 0.1);
	--grey-color: rgba(54, 54, 54, 1);
    --radius: 15px;
	--sidebar-width: clamp(260px, 18vw, 320px);
}
:root:has(.theme > [value="dark"]:checked) {
    --background: rgba(246,249,251,1);
    --text-color: ;
    --link-color: ;
    --accent-color: rgba(24, 70, 197, 1);
    --accent-color2: ;
    --nav-color:rgba(24, 70, 197, 0.123);

}

@font-face {
    font-family: "Dosisbold";
    src: url("../fonts/Dosis-VariableFont_wght.ttf");
}
/*scrollbar*/
::-webkit-scrollbar {
	width: 0.5rem;
	height: 0.5em;
}
::-webkit-scrollbar-track {
	background: var(--accent-color);
}
::-webkit-scrollbar-thumb {
	background: var(--accent-color);
	border-radius: 100vw;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--accent-color2);
}
body {
    font-family: Dosisbold, Arial, sans-serif;
    font-weight: 800;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    background-color: var(--background);
    color: var(--text-color);
    font-size: 18px;
}
img, .card-image:first-child img {
    border-radius: var(--radius);
}
.logo rect {
    fill: var(--text-color);
    transition: all 0.3s ease-in;
    display: inline-block;    
    -webkit-transition: fill .4s ease-in;
	-moz-transition: fill .4s ease-in;
	-o-transition: fill .4s ease-in;
	transition: fill .4s ease-in;
}
.logo svg:hover rect {
    fill: url(#gradient);
}
/*main*/
main {
    overflow: hidden;
    position: relative;
    min-height: 80vh;
    width: 100%;
    margin-bottom: 12px;
}
#main-content :is(.page) {
    margin-top: 60px;
    margin-right: 15px;
}
#content-first .block {
    display: block;
    padding: 0.75rem;
}
.node__content {
    text-transform: initial;
}
.content-status {
  margin-bottom: 20px;
}
/*basic*/
.is-sfontsize{
    font-size: 12px;
}
.is-mfontsize{
	font-size: 21px;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    padding-bottom: 0.4rem;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.8rem;
    font-weight: bold;
}
h3 {
    font-size: 1.3rem;
}
p {
    margin: 0.3rem 0;
}
strong {
  color: var(--text-color);
  font-weight: 700;
  /*color: #fff;*/
  font-weight: bolder;
}
a:hover ,.tabs a:hover {
    color: var(--accent-color2);
}
.heightmax {
    height: 100%;
}
a, .tabs a {
    color: var(--text-color);
}
.tabs.is-toggle li:last-child a {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
.tabs.is-toggle li:first-child a {
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
}
.absolute {
   position: absolute;
}
.is-label  {
	top: 0;
	left: 0;
}
.not-label {
    padding: 0 1.5rem 1.5rem 1.5rem;
}
.label:not(:last-child) {
    margin-bottom: .3em;
}
.button {
    background: #0f4c5c;
    border-color: transparent;
    color: var(--text-color);
    border-radius: var(--radius);
}
.button:hover {
    color: #ffffff;
    border-color: transparent;
    background: #5f0f40;
}
.field.field--name-field-name-user {
    text-transform: uppercase;
}
.field--name-field-facebook ::before {
    content: "\F020C";
    display: inline-block;
    font: normal normal normal 24px / 1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    font-size: 23px;
}
.field--name-field-tiktok ::before {
    content: "\F020C";
    display: inline-block;
    font: normal normal normal 24px / 1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    font-size: 23px;
}
.field--name-field-instagram ::before {
    content: "\F02FE";
    display: inline-block;
    font: normal normal normal 24px / 1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    font-size: 23px;
}
iframe#youtube-field-player {
    aspect-ratio: 16 / 9;
    width: 100%;
}
/*==== color ====*/
.is-primary{
    background-color: var(--accent-color)!important;
}
.is-textcolor {
	color: var(--text-color);
}
.image-widget {
  display: flex;
}
.image-widget-data {
  flex: 1 1 16rem;
  max-width: 100%;
}
/*header*/
header {
    position: relative;
}
div#block-dmusicv2-views-block-livedj-block-6, div#block-dmusicv2-views-block-livedj-block-5-2 {
    position: relative;
    left: 0;
    margin: 0;
}
.live-content-now {
    margin: auto;
    display: flex;
    justify-content: space-around;
    gap: 11px;
    align-content: flex-start;
    align-items: center;
}
.view-next, .view-now {
    z-index: 1;
}
.view-now .label {
    background: var(--accent-color2);
}
.onair-dot {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    background: #ff3aa6;
    margin-right: 8px;
    box-shadow: 0 0 0 0 rgba(255, 58, 166, .6);
    animation: pulse 2.2s infinite;
}
.onair-dot::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #ffffff;
}

@keyframes pulse{
  0%{
    box-shadow: 0 0 0 0 rgba(255,58,166,.6);
  }
  70%{
    box-shadow: 0 0 0 12px rgba(255,58,166,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(255,58,166,0);
  }
}
.banner {
    min-height: 250px;
    position: relative;
    /* padding-bottom: 70px; */
    width: 100%;
    background: #2B3940;
    border-radius: var(--radius);
}
div#block-dmusicv2-views-block-livedj-block-5-2, #block-dmusicv2-views-block-livedj-block-6 {
    z-index: 2;
}
.banner.onair {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.banner .columns.is-mobile {
    position: absolute;
    bottom: -30px;
    padding: 0 0px 0 25px;
    width: 100%;
}
.banner-title {
    max-width: 250px;
    font-size: 2.8rem;
    line-height: 2.5rem;
    font-weight: 600;
}
.blob {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}
svg#blob {
    height: 250px;
    fill: rgb(62 81 90 / 30%);
}
.is-sfontsize.is-hour {
    font-size: 20px;
}
.pg-name.is-mfontsize {
    margin-top: 25px;
}
.view-next-now .label {
    margin-top: 12px;
}
/*navbar*/
a:hover {
    color: var(--text-color);
}
.navbar-burger:hover {
    background-color: var(--accent-color2);
}
.navbar-burger a {
	color: var(--text-color);
}
.navbar-burger {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 36px;
    color: var(--text-color);
    z-index: 99;
    background: var(--accent-color2);
    border-radius: var(--radius);
    padding: 0 0 8px 8px;
}
.navbar-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.navbar {
    background-color: transparent;
    background-image: linear-gradient(179deg, rgba(19, 19, 19, 0.4), rgba(19, 19, 19, 0.5));
    position: absolute;
    width: 100%;
    height: 60px;
}
.navbar a{
    color: var(--link-color);
}

.nav-link.active{
    color: var(--accent-color)!important;
    text-shadow: -3px 5px 3px rgba(0,0,0,0.52);
}
.navbar-center {
    justify-content: center;
    display: flex;
    width: 100%;
}
.navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
	background-color: #fafafa1c;
    color: var(--accent-color2);
    text-shadow: 0px 0px 5px #cfbcc0;
    border-radius: var(--radius);
}
.navbar-link:not(.is-arrowless)::after {
    border-color: #bfc1c1;
}
a.navbar-item:hover .navbar-link:not(.is-arrowless)::after {
	border-color: var(--accent-color2);
    text-shadow: 0px 0px 5px #cfbcc0;
}
.logo img {
    height: 150px;
    width: auto;
    margin-left: 20px;
}
.navbar-item, .navbar-link {
  padding: .4rem .75rem;
  color: var(--text-color);
}
.navbar-item img {
  max-height: 50px;
  width: 80px;
}
nav#block-dmusicv2-socialemedia {
    margin-bottom: 12px;
}
.navbar-item.has-dropdown.is-active .navbar-link, .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link {
    background-color: #fafafa1c;
    color: var(--accent-color2);
    text-shadow: 0px 0px 5px #cfbcc0;
    border-radius: var(--radius);
}
.navbar-start, .navbar-menu {
	height: 100%;
}
nav#block-beatmusicv1-account-menu {
    margin: auto;
    text-align: center;
    display: inline-block;
}
nav#block-beatmusicv1-account-menu a {
    padding: 5px;
}
.navbar-social a {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    font-size: 40px;
}
.number-title {
	word-break: normal;
	padding: 2px;
	color: var(--text-color);
}
.navbar-dropdown2{
       transform-origin: top center;
       animation: rotateMenu 500ms ease-in-out forwards;
	   
}  
.navbar-dropdown2 {
    font-size: .875rem;
    padding-bottom: .5rem;
    padding-top: .5rem;
}
/* animation */
@keyframes slideDown {
  0% { 
    opacity: 0;
    transform: translateY(-60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rotateMenu {
    0% {
      transform: rotateX(-90deg);
    }
    70% {
      transform: rotateX(20deg);
    }
    100% {
      transform: rotateX(0deg);
    }
}
@keyframes rotateX {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}
@keyframes scroll-title {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
/*calandar*/
.fc-slats tr {
    height: 45px;
}
/*poll*/
.form-radio .form-item > label, .form-checkboxes .form-item > label {
  background-color: #9B9393C2;
  padding: 5px 15px;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-block;
  width: 100%;
  border: 2px solid #b3aeaeab;
  font-size: 16px;
}
.form-radio .form-item, .form-checkboxes .form-item {
    /*height: 45px; */
    /*display:inline-block;*/
    /*width: 100%*/
}
.form-radio .form-item input[type=checkbox], .form-checkboxes .form-item input[type=checkbox]{
    display:none;
}
.form-radio .form-item input[type=checkbox]:checked ~ label, .form-checkboxes .form-item input[type=checkbox]:checked ~ label {
    border: 2px solid rgb(136 6 86);
    background: var(--accent-color2);
}
.fc-.content-sli tr {
    height: 45px;
}
.approval-poll-view-form {
	display: block !important;
}
.poll-view-form {
  display: none;
}
.poll dl {
    margin: 12px 0;
}
.poll .bar {
    background-color: #ddd;
    height: 1.3em;
    border-radius: var(--radius);
}
.poll .bar .foreground{
    background-color: var(--accent-color2);
    height: 1.3em;
    border-radius: var(--radius);
}
.poll .choice-title {
    margin-top: 5px;
}
.poll .total, .poll .poll-question, .poll .percent {
    display: none;
}
.poll-view {
    display: none;
}
.poll-box-view.card {
  min-height: 16.5rem;
}
/*card/box*/
.card {
	width: 100%;
	border-radius: var(--radius);
}
.box {
	border-radius: var(--radius);
}
.right {
    display: flex;
    justify-content: flex-end;
}
.left {
	display: flex;
	justify-content: flex-start;
}
.flex {
	display: flex;
	padding-top: 10px;
	justify-content: space-between;
}
.title {
    margin-top: 0;
    margin-bottom: 0.5em!important;
	color: var(--text-color);
}
.card-content-new {
    background: linear-gradient(180deg, hsl(0 0% 0% /0), hsl(0 0% 0% / 0.3) 20%, hsl(0 0% 0% / 0.5));
    position:absolute;
	bottom: 0px;
	width: 100%;
    padding: 1rem;
	transform: translateY(40%);
	transition: transform 500ms ease;
}
.card-new .views-field-field-name-user {
  border: 1px solid var(--text-color);
  padding: 1px 5px;
  border-radius: var(--radius);
  margin-bottom: 5px;
  width: max-content;
  font-weight: bold;
  position: absolute;
  top: 1em;
  right: 1em;
}
.card-content-new .views-field-field-tags {
	color: var(--accent-color2);
	text-shadow: 0 0 0.4rem #cfbcc0;
	font-weight: bold;
}
.card-new {
	position: relative;
	transition: transform 500ms ease;
	overflow: hidden;
	border-radius: var(--radius);
}
.card-content-new a, .card-content-new {
    color: var(--text-color);
}
.card-image-new:first-child img {
    border-radius: var(--radius);
}
.card-image-new {
    display: block;
    position: relative;
    padding: 0;
    margin-bottom: -9px;
    /* margin: 0; */
}
.card-image-new img {
    width: 100%;
}
.card-audio-new {
    height: 180px;
    background-color: var(--box-color);
    display: block;
    position: relative;
}
.card .field--name-field-dj-image {
  margin: 16px 16px 10px 16px;
}

.card .col-right {
  padding-top: 5px;
}
/*.card-content-new .title a::after {
	content: "";
	background: #e32f00;
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 4px;
	transform: scaleX(0);
	transition: transform 500ms ease;
	transform-origin: left;
}*/
.card-images-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #3d3d3d8c;
  border-radius: var(--radius);
  overflow-y: auto;
  width: 100%;
}
.card-content-new .title {
	position: relative;
	width: max-content;
    max-width: 100%;
}
.card-new:hover .title a::after {
	transform: scaleX(1);
}
.card-new:hover .card-content-new, .card-new:active .card-content-new {
	transform: translateY(0);
	transition-delay: 500ms;
}
.card-content-new > *:not(.title) {
    opacity: 0;
    transition: opacity 500ms linear;
}
.card-new:hover .card-content-new > *, .card-new:active .card-content-new > *:not(.title) {
    opacity: 1;
	transition-delay: 500ms;
}
.card-content .field__label {
    margin-bottom: 12px;
    font-size: 22px;
}
.box-new {
    height: 54px;
    width: 100%;
    background: rgb(15 76 92 / 91%);
    position: relative;
    display: flex;
    border: 2px solid var(--accent-color2);
    border-radius: var(--radius);
    margin-bottom: 5px;
}
.card-content.is-label {
    margin-top: 28px;
}
.card-content.not-label.flex {
	flex-direction: column;
	height: 90%;
}
.pad {
    margin: 1rem;
}
.col-right .field--name-field-name-user {
    font-size: 2rem;
}
.prog .field--name-field-day2{
    font-size: 25px;
}
.prog .date-recur-occurrences {
    font-size: 25px;
    margin-bottom: 26px;
}
/* user page*/
.userp .field--name-user-picture.field__item {
    background: var(--accent-color);
    border-radius: var(--radius);
}
/* title*/
.main-title::before, .content-title::before {
    content: '';
    position: absolute;
    top: 0;
	right: 1px;
	width: 30px;
    height: 100%;
    background-color: var(--accent-color);
    z-index: 0;
    border-radius: 0px var(--radius) var(--radius) var(--radius);
    -ms-transform: skewy(-20deg);
    -webkit-transform: skewy(-20deg);
    transform: skewx(-20deg);
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 0% 100%;
}
.main-title, .content-title {
    display: inline-block;
	padding: 0.2em 3em 0.2em 2em;
    position: relative;
	border-radius: var(--radius) 0 var(--radius) var(--radius);
    background-color: var(--accent-color);
	isolation: isolate;
	font-size: 24px;
}
.content-title {
    margin: 20px 0;
}
.main-title::after, .content-title::after {
  content: ' ';
  height: 90px;
  width: 77px;
  background: url(../images/title-item.svg) no-repeat;
    background-size: auto;
  bottom: 0px;
  top: 0;
  position: absolute;
  background-size: 32px;
  margin-left: 78px;
  right: -98px;
}
/*flex*/
.flex {
    display: flex;
    padding-top: 10px;
    justify-content: left;
}

.audio .flex, .card-content-new .flex {
	justify-content: space-between;
}
/*sidebar*/
.live {
    width: 100%;
}
.live .now, .next {
    background: #ffffff2e;
    border-radius: var(--radius);
    width: 100%;
    margin: 0 0 10px 0;
	/*padding-bottom: 5px;*/
    position: relative;
}
.label {
    background: var(--accent-color);
    color: var(--text-color);
    width: fit-content;
    border-radius: var(--radius);
    padding: 0 10px;
    margin: 5px;
    font-size: 24px;
    z-index: 1;
}
#main-content .label:not(.poll-label) {
	position: absolute;
}
.live .is-flex-grow-1 {
	margin: 45px 15px 15px 15px;
}
/*box*/
.box, .card, .table, .card-new {
	background-color: var(--box-color);
	color: var(--text-color);
}
.poll-box-view.card-new {
    /* height: 100%; */
    padding-bottom: 6px;
}
.table thead td, .table thead th {
	color: var(--text-color);
}
.js .dropbutton-widget {
	background-color: #444444;
}
td.is-active {
  background-color: #4a4a4a;
}
/*media scroller*/
/* Zorg dat absolute buttons kunnen */
.block-views-blocktop-30-slideshow-block-2 {
    position: relative;
}
.media-scroller {
    display: grid;
    grid-auto-flow: column;
    gap: 26px;
    overflow: hidden;
    overscroll-behavior-inline: contain;
    position: relative;
    scroll-behavior: smooth;
	anchor-name: --carousel;

}
.media-scroller-wrap > .scroll-button {
    display: none;
}
/* ✅ Zelfde styling voor pseudo buttons én echte fallback buttons */
@supports selector(.media-scroller::scroll-button(right)) {
  .media-scroller::scroll-button(right),
  .media-scroller::scroll-button(left) {
    background: var(--accent-color2);
    border-radius: 100vw;
    height: 40px;
    width: 40px;
    z-index: 2;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    position: absolute;
    position-anchor: --carousel;
    translate: 50%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
  }
	.media-scroller::scroll-button(right) {
        content: '\f054';
        position-area: right center;
        translate: -40%;
    }
    .media-scroller::scroll-button(left) {
        content: '\f053';
        position-area: left center;
        translate: 30%;
    }
  .media-scroller::scroll-button(right):disabled,
  .media-scroller::scroll-button(left):disabled{
    opacity: 0.5;
    cursor: auto;
  }
}
.media-scroller-wrap{ position: relative; }

/* ✅ Fallback (Firefox): echte buttons met exact dezelfde look */
@supports not selector(.media-scroller::scroll-button(right)) {
  .media-scroller-wrap > .scroll-button{
    background: var(--accent-color2);
    border-radius: 100vw;
    height: 40px;
    width: 40px;
    z-index: 2;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
	display: block;
	padding: 5px 15px;
  }

  .media-scroller-wrap > .scroll-button.right{
    right: 0;
    transform: translate(50%, -50%);
  }

  .media-scroller-wrap > .scroll-button.left{
    left: 0;
    transform: translate(-50%, -50%);
  }

  .media-scroller-wrap > .scroll-button:disabled{
    opacity: 0.5;
    cursor: auto;
  }
}

.grid-1 {
    grid-auto-columns: 100%;
}
.view-next-now .is-flex-grow-1 {
    min-width: 180px;
}
.promo {
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
    top: 12px;
}
.banner img {
    width: auto;
    max-height: 221px;
    margin-left: 10px;
}
.media-element {
  position: relative;
  margin: 10px 0;
  padding: 0;
  border-radius: var(--radius);

}
.media-element img {
  border-radius: var(--radius);
  object-fit: cover;
}
/* top 30 slide */
.content-slide {
  background: linear-gradient(180deg,hsl(0 0% 0%/0),hsl(0 0% 0%/0.3) 20%,hsl(0 0% 0%/0.5));
  position: absolute;
  bottom: -2.7px;
  width: 100%;
  padding: 1rem 0.5rem 0.2rem 0.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
}
.slide-pos {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 20px;
  color: white;
  background: var(--accent-color);
  padding: 1px 10px;
  border-radius: var(--radius);
}
.snap-inline {
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 0px;
}
.snap-inline > * {
	scroll-snap-align: start;
}
/*tabs*/
.tabs.is-toggle li.is-active a {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}
.dp-results-card .table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
  background-color: #5f0f4047;
}
.dp-results-card .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(2n) {
  background-color: var(--accent-color2);
}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
  background-color: var(--accent-color);
}
/* up/down/new */
.up::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f077";
    color: #6dd400;
}
.down::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f078";
    color: #ed3624;
}
.same::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f7a4";
    color: #fad322;
}
.new::before {
    font-family: "Font Awesome 5 Free" ;
    font-weight: 900;
    content: "\f067";
    color: #fd7015;
}
.re-entry::before {
  font-family: 'font awesome 5 free';
  font-weight: 900;
  content: "\f079";
  color: #01c9ea;
}
.down, .up, .new, .same, .re-entry {
    color: transparent;
}
/* form */
.form-item{
    position:relative;
    margin: 1.5em 0
}
.form-item input:not(.checkbox, .button){
    width: 100%;
    padding:10px;
    border: 1px solid rgb(255, 255, 255, 0.25);
    background: var(--box-color);
    color: var(--text-color);
    border-radius: var(--radius);
    outline: none;
    font-size: 1em;
    transition: 0.5s;
}
.form-item input:not(.checkbox, .button) ~ label, .form-item textarea ~ label{
    position: absolute;
    left: 0;
    color: rgb(255,255,255, 0.25);
    padding: 10px;
    pointer-events: none;
    font-size: 1em;
    transition: 0.5s;
    top: 0;
}
.form-item input:valid:not(.checkbox, .button) ~ label {
    color:#e32f00;
    transform: translateX(10px) translateY(-7px);
    font-size: 0.7em;
    padding: 0 10px;
    background: var(--box-color);
    border-radius: var(--radius);
    letter-spacing: 0.2em;
}
.form-item input:valid:not(.checkbox, .button),
.form-item input:focus:not(.checkbox, .button) {
    border: 1px solid #b42b07;
    outline: none;
}
.form-item textarea{
    width: 100%;
    padding:10px;
    border: 1px solid rgb(255, 255, 255, 0.25);
    background: var(--box-color);
    color: var(--text-color);
    border-radius: var(--radius);
    outline: none;
    font-size: 1em;
    transition: 0.5s;
	block-size: 5lh;
}
.form-item textarea:valid ~ label,
.form-item textarea:focus ~ label {
    color:#e32f00;
    transform: translateX(10px) translateY(-7px);
	-moz-transform: translateX(10px) translateY(-7px);
    font-size: 0.7em;
    padding: 0 10px;
    background: var(--box-color);
    border-radius: 4px;
    letter-spacing: 0.2em;
}
.form-item textarea:valid,
.form-item textarea:focus {
    border: 1px solid #b42b07;
    outline: none;
}
.form-item, .form-actions {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
.input::placeholder, .select select::placeholder, .textarea::placeholder {
  color: rgba(255, 255, 255, 0.59);
}
.box.admin dl dt {
    height: 32px;
}
.box.admin dl dd {
    font-size: 12px;
}
.text-low {
    text-transform: initial;
}
.box.admin dl dd::after {
    content: " ";
    height: 1px;
    background: black;
    width: 100%;
    display: table;
    clear: both;
    margin-bottom: 16px;
}
.admin .table td, .admin .table th {
    height: 50px;
}
#sliding-popup {
    bottom: 0px !important;
    height: auto !important;
    border-radius: var(--radius);
    width: calc(100% - 10px);
    margin: 5px;
    /*border: 1px solid var(--accent-color);*/
}
input[type="file"] {
  color: var(--grey-color);
  border: 1px solid #fff;
  border-radius: var(--radius);
  padding: 5px;
}
input{
	color: #000;
}
.input.date, .input.time, .input.number {
	width: auto;
}
.message{
	background-color: none;
}
/*********** Baseline, reset styles ***********/
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  height: 16px;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
  background-color: #b3aeaeab;
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -4px; /* Centers thumb on the track */
  background-color: #ffffff;
  border-radius: 0.5rem;
  height: 1rem;
  width: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {
  outline: 1px solid #ffffff;
  outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
  background-color: #b3aeaeab;
  border-radius: 0.5rem;
  height: 0.8rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  background-color: #ffffff;
  border: none; /*Removes extra border that FF applies*/
  border-radius: 0.5rem;
  height: 1rem;
  width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb{
  outline: 1px solid #ffffff;
  outline-offset: 0.125rem;
}
/* player*/
.audio i {
    color: var(--text-color);
    font-size: 35px;
}
.player {
    border-top: 2px #fff solid;
    padding: 15px;
    width: 100%;
}
a.button {
    color: #fff;
	padding: 8px;
}
.button-audio.flex {
    width: 100%;
}
.card-content-new .flex {
    justify-content: space-between;
}
.lable-song.animation .animations-title {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-title 15s linear infinite;
    -webkit-animation: scroll-title 15s linear infinite;
    animation: scroll-title 15s linear infinite;
}
.lable-song .title, .lable-song .artist {
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    padding-inline: 0 100px;
    /* text-overflow: ellipsis; */
    /* max-width: 18rem; */
    /* margin-left: 10px; */
    width: max-content;
}
.player .cover img {
    height: 80px;
    width: 80px;
    padding: 0;
    margin-right: 15px;
}
a.button.playNow {
    border-radius: var(--radius);
    background: var(--accent-color);
    border: none;
    box-shadow: 0px 0px 6px 3px #68666670;
    color: var(--text-color);
}
a.button.playNow:hover {
    color: var(--text-color);
    box-shadow: 0px 0px 6px 3px #fff8f870;
}
.audio {
    position: relative;
    align-items: center;
    background: var(--accent-color2);
    width: 100%;
    padding: 10px 10px 0px 10px;
	border-radius: var(--radius);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.content_audio {
    position: fixed;
    z-index: 100;
    bottom: 10px;
    width: calc(100vw / 3 - 50px);

}
.song-cover.cover {
    min-width: 70px;
    max-width: 80px;
}
.lable-song {
    height: max-content;
    overflow: hidden;
    margin-left: 10px;
    /*width: 15.6vw;*/
	width: calc(var(--sidebar-width) - 118px);
}
.lable-song.animation{
	margin: 15px 5px;
}
.content-song.columns {
    margin-bottom: 0;
    height: 9vh;
}
.volume-popup {
    display: none;
}
.volume-popup.open {
    display: block;
    position: absolute;
    top: -5em;;
    left: -2.6em;
    border-radius: var(--radius);
    /* height: 2.6em; */
    background: #0f4c5c;
    padding: 10px;
    transform: rotate(270deg);
    z-index: 999;
    border: 0;
}
.volume-class {
  display: flex;
  position: relative;
}
a.btn {
    color: #fff;
	padding: 8px;
}
.btn-add {
  position: absolute;
  top: -55px;
  right: 10px;
  background: var(--accent-color);
  border-radius: var(--radius);
  padding: 10px 15px;
}
.playlist {
    position: relative;
    top: 5px;
}
.dropdown.playlist {
    display: inline-flex;
    position: initial;
    vertical-align: top;
	padding-left: 10px;
}
#playlist-drop {
    width: 100%;
    bottom: 200px;
    padding: 15px 5px;
}
.button-playlist {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: var(--accent-color);
  color: var(--text-color);
  border-radius: var(--radius);
  margin-bottom: 7px;
}
.btn.just-voted { transform: scale(1.12); }

.songlist .cover {
    width: 50px;
    height: 50px;
}
/*tv*/
.tv-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 18, 0.8);
  z-index: 99999;
}
.tv-modal.is-open { display: flex; }
.tv-panel {
    width: min(960px, 95vw);
    background: rgb(15 76 92 / 51%);
    border: var(--sidebar);
    border-radius: 12px;
    overflow: hidden;
}
.tv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 12px;
  color: #d8ecff;
}
.tv-close {
  border: 1px solid #3c628d;
  background: #0b2038;
  color: #d8ecff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
#tvVideo {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}

@media (max-width: 640px) {
  a.btn.tv { width: 54px; height: 54px; border-radius: 14px; }
  #tv-modal.modal { width: 96vw; border-radius: 12px; }
}


/*admin tools*/
body.toolbar-horizontal .navbar, body.toolbar-tray-open .navbar {
    top: 60px;
}
.toolbar-fixed .now-dj-new {
  top: 30px;
}
.toolbar-tray-open .now-dj-new {
  top: 70px;
}

/* Footer */
.footer {
    background-color: var(--accent-color2);
    & a {
        color: var(--text-color);
    }
    & strong {
        color: var(--text-color);
    }
}
.footer a, .footer a:hover {
	color: var(--text-color);
}
footer .navbar-start {
    margin-left: auto;
}
/*Firefox*/
@-moz-document url-prefix() {
	.volume-popup.open {
	  top: -6em;
	  left: -3.6em;
	}
	@media screen and (min-width: 992px) {
		.sidebar {
		  height: 95.1svh;
		}
	}
}
/*screens*/
@media (min-width: 765px) {
    .flex {
        display: flex;
    }
	#content-first .block {
		width: 33.3333%;
	}
}
@media screen and (min-width: 769px), print {
   .column.is-32 {
        flex: none;
        width: 95px;
    }
}
/* mobile*/
@media (max-width: 991.98px){
    .navbar {
        align-items: start!important;
    }
	.view-top-30-slideshow .media-element {
		width: calc(94vw);
	}
	.sidebar {
		display: none;
	}
	.is-active {
		display: block;
	}
	.songlist .lable-song {
	  width: 100%;
	}
	img.song-cover {
		width: 63px;
	}
	.is-flex-grow-1 {
        padding: 40px 0 19px 16px;
    }
	.pg-name.is-mfontsize {
		margin-top: 5px;
	}
	.next, .live .now {
	  margin: 0px 8px 0 8px;
	  width: 96.5%;
	}
	.banner-title {
		font-size: 1.5rem;	
	}
	#playlist-drop {
		bottom: 92%;
	}
    .playlist-new {
        position: fixed;
        bottom: 10px;
        z-index: 99;
        width: 96vw;
        left: 7px;
		right: 7px;
    }
	.sidebar#navbarLink {
		background: var(--sidebar);
        z-index: 2;
		position: fixed;
		top: 0;
		bottom: 0;
		height: 100%;
		width: 17rem;
	}
	a.navbar-burger.is-active {
		left: 18rem;
	}
	/*.navbar-start {
		background: var(--sidebar);
	}*/
	.navbar a i{
		font-size: 36px;
	}
	.is-margin8 {
		margin: 0 8px;
	}
    .logo svg {
        height: 50px;
        z-index: 999;
        position: relative;
        width: max-content;
		margin: 4px 10px;
    }
    .live {
        margin-top: 20px;
    }
	.live img {
		width: 110px;
	}
	.media-scroller {
		margin: 0 5px;
	}
	.column.is-32 {
		max-width: 90px;
	}
	.content-song.columns {
		width: 100%;
	}
.live-content-next {display: none;}

}
@media screen and (max-width: 1023px) {
	.navbar-menu {
        background-color: #ffffff00;
        box-shadow: none;
    }
}
@media screen and (min-width: 992px) {
	.media-scroller.grid-3 {
		grid-auto-columns: calc(32.3% - (13px / 2));
	}
	
}
@media screen and (min-width: 1024px) {
	.gin--vertical-toolbar .sidebar {
		left: 67px;
		top: 60px;
		height: auto;
	}
	.sidebar {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        background-color: var(--sidebar);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 101;
		height: 100svh;
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform .5s ease;
        padding: 5px;
        box-shadow: 0 0 20px 8px rgb(0 0 0 / 8%);
        border-radius: 0 var(--radius) var(--radius) 0;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
	.navbar-item, .navbar-link {
        align-items: center;
        display: block;
    }
	header {
        padding-left: calc(var(--sidebar-width) + 2px);
        margin: 0px 22px 0 22px;
    }
	.navbar-dropdown2 {
        display: none;
    }
	.navbar-item.is-active .navbar-dropdown2, .navbar-item.is-hoverable:focus .navbar-dropdown2, .navbar-item.is-hoverable:focus-within .navbar-dropdown2, .navbar-item.is-hoverable:hover .navbar-dropdown2 {
        display: block;
    }
	.toolbar-fixed .sidebar {
        height: 93.3svh;
    }
    .sidebar {
        transform: translateX(0);
    }
	.navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
	  background-color: var(--box-color);
	  color: var(--text-color);
	} 
	.navbar-dropdown {
	  background-color: var(--grey-color);
	}
	.navbar-menu {
		animation: rotateX 500ms ease-in-out forwards;
	}
	.columns {
		display: flex;
	}
	.card-images-bg .label {
		font-size: 16px;
	}
	.form-radio .form-item > label, .form-checkboxes .form-item > label {
		font-size: 16px;
	}
	    
	.live img {
		width: 10svw;
	}
    .navbar-burger {
        display: none;
    }

	a.navbar-item.ext {
		float: left;
		top: 5px;
	}
	
	.is-margin8 {
		max-width: none!important;
		padding-left: 32px;
		padding-right: 26px;
		width: 100%;
	}
    .auto {
        margin-bottom: auto!important;
        flex-direction: column!important;
    }
	.card-images-bg .label {
		font-size: 22px;
	}
    ul.navbar-nav, #main-content :is(.page) {
        padding-left: 34px;
    }
        div#main-content {
        /* padding: 0 0 70px 22dvw; */
        padding-left: var(--sidebar-width);
        /*margin: 75px 0 0 0;*/
    }
    .logo {
        padding: 15px;
        margin: 0 auto;
    }
    .playlist-new {
        width: 100%;
    }
	.navbar-dropdown {
		border-radius: var(--radius);
	}
	footer .navbar-start {
		width: max-content;
	}
}
/* pc */
@media (min-width: 1400px){

	.footer {
		padding-left: 30dvw;
		padding-bottom: 0;
	}
}