: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(71, 89, 92, 1);
	--box-color:rgb(255 255 255 / 18%);
	--grey-color: rgba(54, 54, 54, 1);
    --radius: 15px;
	--sidebar-width: 22.2dvw;
}
: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;
}
strong {
  color: #fff;
  font-weight: bold;
  text-decoration: underline;
}
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;
}
.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*/
.banner {
    background: url("/banner/radio.png") center center / cover no-repeat;
    min-height: 460px;
    position: relative;
    padding-bottom: 70px;
}
.banner .columns.is-mobile {
    position: absolute;
    bottom: -30px;
    padding: 0 0px 0 25px;
    width: 100%;
}
/*navbar*/
.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);
}
.navbar-item:not(.is-hoverable), .navbar-link {
    margin: 10px 0;
}
.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;
}
.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-dropdown{
       transform-origin: top center;
       animation: rotateMenu 500ms ease-in-out forwards;
	   
}  
/* 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: 24px;
}
.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: 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);
    max-width: 85%;
    width: fit-content;
    border-radius: var(--radius) 0;
    padding: 0 10px;
    margin: 0;
    font-size: 24px;
    z-index: 1;
}
.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);
}
.table thead td, .table thead th {
	color: var(--text-color);
}
.js .dropbutton-widget {
	background-color: #444444;
}
td.is-active {
  background-color: #4a4a4a;
}
/*media scroller*/
.media-scroller {
    display: grid;
    grid-auto-flow: column;
    gap: 26px;
    overflow-y: auto;
    overscroll-behavior-inline: contain;
    position: relative;
    scroll-behavior: smooth;
	anchor-name: --carousel;
}
.media-scroller::scroll-button(right), .media-scroller::scroll-button(left) {
    content: '\f054';
    background: var(--accent-color2);
    border-radius: 50%;
    height: 40px;
    width: 40px;
    z-index: 2;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    position: fixed;
    position-anchor: --carousel;
    position-area: right center;
    translate: -50%;
    font-family: "Font Awesome 5 free";
	font-weight: 900;
    font-size: 20px;
}
.media-scroller::scroll-button(left) {
    content: '\f053';
    position-area: left center;
    translate: 50%;
}
.media-scroller::scroll-button(right):disabled, .media-scroller::scroll-button(left):disabled {
    opacity: 0.5;
    cursor: auto;
}
.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;
}
.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%;
}
.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;
    display: flex;
    align-items: center;
    background: var(--accent-color2);
    width: 100%;
    padding: 10px 10px 0px 10px;
	border-radius: var(--radius);
    flex-wrap: wrap;
}
.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: -5.5em;
    left: -2.6em;
    border-radius: var(--radius);
    height: 2.6em;
    background: #0f4c5c;
    padding: 10px;
    transform: rotate(270deg);
    z-index: 999;
}
.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;
}
.dropdown.playlist {
    display: inline-flex;
    position: initial;
    vertical-align: top;
}
#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;
}
.songlist .cover {
    width: 50px;
    height: 50px;
}
/*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;
}
.gin--vertical-toolbar .sidebar {
    left: 67px;
	top: 60px;
	height: auto;
}
/* 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;
    }
	.songlist .lable-song {
	  width: 100%;
	}
	img.song-cover {
		width: 63px;
	}
	.next, .live .now {
	  margin: 0px 8px 0 8px;
	  width: 96.5%;
	}
	#playlist-drop {
		bottom: 92%;
	}
    .playlist-new {
        position: fixed;
        bottom: 10px;
        z-index: 99;
        width: 96vw;
        left: 7px;
		right: 7px;
    }
    div#navbarLink {
        background: var(--sidebar);
        margin-top: 9px;
        z-index: 2;
        height: max-content;
    }
	/*.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-element {
		width: calc(94vw);
	}
	.column.is-32 {
		max-width: 90px;
	}
	.content-song.columns {
		width: 100%;
	}

}
@media screen and (min-width: 992px) {
	.media-scroller {
		grid-auto-columns: calc(32.3% - (13px / 2));
	}
	
}
@media screen and (min-width: 1024px) {
	.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;
    }
	.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;
    }
    div#navbarLink {
		margin-left: 20dvw;
		padding-left: 50px;
	}
	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;
        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;
	}
}