Top Users
$listens)
{
if($listens>0 && $i<=5)
{
$usr = $db->queryrow("SELECT * FROM users WHERE id=? LIMIT 1", [ $uid ] );
echo '
'.strtoupper(substr($usr['name'],0,1)).'
'.$usr['name'].''.$usr['company'].' • '.$listens.' plays
';
$i++;
}
}
?>*/
.newpopup.calpopup {
max-width: 600px;
padding: 20px;
border:1px solid #ccc;
color: rgb(195, 195, 201);
background-color: rgb(54, 54, 60);
}
.newpopup.calpopup strong {
display: block;
margin: 0px 0px 10px 0px;
color: #fff;
font-weight: 500;
}
.newpopup.calpopup hr {
border-top:0px;
border-left:0px;
border-right:0px;
margin: 20px 0px;
}
.newpopup.calpopup span {
display: inline-block;
text-transform: uppercase;
border-radius: 50px;
font-size: 14px;
padding: 4px 8px;
color: #fff;
font-weight: 500;
background-color: aliceblue;
}
.newpopup.calpopup span.low {
background-color: rgb(34, 197, 94);
}
.newpopup.calpopup span.medium {
background-color: rgb(234, 179, 8);
}
.newpopup.calpopup span.high {
background-color: rgb(239, 68, 68);
}
.newpopup.calpopup a {
display: inline-block;
margin: 0px 10px 0px 0px;
color: #fff;
font-weight: 500;
border-radius: 5px;
border:1px solid #fff;
padding: 8px 15px;
}
.newpopup.calpopup a svg {
height: 16px;
display: inline-block;
vertical-align: middle;
}
.newpopup form {
margin-bottom: 40px;
max-height: 700px;
padding: 3px 3px 3px 3px;
overflow-y: auto;
scrollbar-width: thin; /* For Firefox */
scrollbar-color: #4a4a4a #1a1a1a; /* thumb and track colors */
}
/* WebKit (Chrome, Safari, Edge) */
.newpopup form ::-webkit-scrollbar {
width: 12px;
}
.newpopup form ::-webkit-scrollbar-track {
background: #4a4a4a;
border-radius: 4px;
}
.newpopup form ::-webkit-scrollbar-thumb {
background-color: #4a4a4a;
border-radius: 4px;
border: 2px solid #1a1a1a; /* optional padding inside track */
}
.selecttype {
display: block;
border: 1px solid #36363c;
background-color: #36363c;
text-align: center;
padding: 30px 0px;
border-radius: 10px;
font-weight: 500;
color: #fff;
cursor: pointer;
}
.selecttype.user.active {
border: 1px solid #ef4444;
background-color: #3b2a2d;
color: #fca5a5;
}
.selecttype.creator.active {
border: 1px solid #3b82f6;
background-color: #29303f;
color: #93c5fd;
}
.selecttype.trial.active {
border: 1px solid #108b00;
background-color:rgba(16,139,0,0.20);
color: #84bc7d;
}
.selecttype input[type=radio] {
display: none;
}
.typeform {
display: none;
}
.typeform.active {
display: block;
}
/* Hide default checkbox */
.newpopup label input[type="checkbox"], .styled {
display: none;
}
/* Style the custom checkbox */
.newpopup label .checkmark, .checkmark {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgb(32, 148, 243); /* blue border */
border-radius: 4px;
position: relative;
margin-right: 8px;
vertical-align: middle;
background-color: rgba(255,255,255,0.00);
cursor: pointer;
}
.showssml {
font-weight: 300!important;
}
/* Create the checkmark */
.newpopup label input[type="checkbox"]:checked + .checkmark, .styled:checked + .checkmark {
background-color: rgb(32, 148, 243); /* blue background */
border-color: rgb(32, 148, 243);
}
.newpopup label input[type="checkbox"]:checked + .checkmark::after, .styled:checked + .checkmark::after {
content: '';
position: absolute;
left: 5px;
top: 2px;
width: 3px;
height: 6px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(31deg);;
}
.cblist label {
font-weight: 500;
font-size: 14px;
display: block;
margin: 0px 0px 10px 0px;
}
.newpopup input[type=submit] {
float: right;
font-weight: 500;
width: auto;
margin: 0px 0px 0px 20px;
color: #fff;
background-color: rgb(37, 99, 235);
}
.newpopup .cancel {
float: right;
font-weight: 500;
font-size: 14px;
width: auto;
border-radius: 5px;
border: 1px solid #fff;
padding: 10px 15px;
color: #fff;
transition: all 0.2s;
background-color: #4b5563;
}
.newpopup .cancel:hover {
background-color: rgb(107, 114, 128);
color: #000;
}
.playerpreview {
margin: 20px 0px 0px 0px;
list-style: none;
}
.playerpreview .handle {
cursor: pointer;
background-color: rgba(0,0,0,0.80);
border-radius: 100px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.playerpreview li {
display: flex;
gap: 1em;
padding: 20px 20px 14px 20px;
margin: 0px 0px 10px 0px;
border-radius: 5px;
background-color: rgb(54, 54, 60);
font-size: 14px;
font-weight: 500;
}
.playerpreview li .play {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
width: 50px;
}
.playerpreview li input {
margin: 0px 0px 0px -9px;
padding: 5px 6px;
border: 1px solid #fff;
}
.playerpreview li .play svg {
width: 30px;
}
.playerpreview li .name {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
width: 200px;
line-height: 23px;
}
.playerpreview li .deleteaudio {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
width: 100px;
text-align: right;
}
.playerpreview li .deleteaudio a {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 5px;
text-align: center;
}
.playerpreview li .deleteaudio a:hover {
background-color: #27272a;
}
.playerpreview li .deleteaudio a svg {
height: 16px;
color: #fca5a5;
margin: 6px 0px 0px 0px ;
}
.playerpreview li .waveform {
flex:1;
}
.nevershow {
position: fixed!important;
top: -1000px!important;
left: -10000px!important;
height: 0px!important;
overflow: hidden!important;
opacity: 0!important;
display: none!important;
list-style: none!important;
}
.nevershow li {
list-style: none!important;
height: 0px!important;
overflow: hidden!important;
}
.delcal, .editcal, .deluser, .edituser {
float: right;
display: inline-block;
margin: 0px 0px 0px 10px;
width: 30px;
height: 30px;
text-align: center;
border-radius: 5px;
background-color: rgb(39, 39, 42);
transition: all 0.2s;
}
.editcal:hover, .edituser:hover {
background-color: #2d333e;
}
.delcal:hover, .deluser:hover {
background-color: #3c2e32;
}
.editcal svg, .edituser svg {
color: rgb(96, 165, 250);
height: 16px;
margin: 7px 0px 0px 0px;
}
.delcal svg, .deluser svg {
color: rgb(248, 113, 113);
height: 16px;
margin: 7px 0px 0px 0px;
}
.allcategories {
list-style: none;
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.allcategories li {
flex: 0 0 19%; /* 100% / 3 items = 33.333% */
box-sizing: border-box; /* includes padding/border in width */
text-align: center;
position: relative;
}
.allcategories li a {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
}
.allcategories li strong {
display: block;
margin: 10px 0px 0px 0px;
}
.allcategories li em {
display: block;
margin: 10px 0px 0px 0px;
color: rgb(195, 195, 201);
font-size: 12px;
font-style: normal;
}
.back {
color: #fff;
font-size: 14px;
font-weight: 500;
}
.back svg {
display: inline-block;
height: 16px;
color: #fff;
vertical-align: middle;
margin: 0px 0px 0px 0px;
}
.jinglelist {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.jinglelist li {
flex: 0 0 calc(33.333% - 1rem); /* 3 items per row, accounting for gap */
box-sizing: border-box; /* ensures padding/borders don’t break layout */
transition: all 0.2s;
padding: 20px!important;
position: relative;
}
.jinglelist li:hover {
background-color: #000;
}
.jinglelist li svg {
display: inline-block;
height: 30px;
color: rgb(195, 195, 201);
margin: 0px 10px 0px 0px;
}
.jinglelist li a {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
}
.jinglelist li .activeon {
width: calc(100% - 40px);
text-align: center;
position: absolute;
bottom:18px;
}
.jinglelist li .activeon div {
display: inline-block;
margin: 0px 4px 0px;
}
.jinglelist li strong {
display: inline-block;
height: 60px;
color: #fff;
font-size: 14px;
font-weight: 500;
width: calc(100% - 40px);
}
.jinglelist li strong span {
display: block;
font-weight: normal;
color: rgb(195, 195, 201)
}
.jinglelist li div {
margin: 0px 0px 0px 0px;
font-size: 12px;
color: rgb(195, 195, 201)
}
.jinglelist li div em {
float: right;
}
.filter {
position: relative;
display: block;
margin: 0px 0px 20px 0px;
}
.filter svg {
position: absolute;
z-index: 100;
left: 10px;
color: rgb(195, 195, 201);
height: 16px;
top: 15px;
}
.filter input {
position: relative;
z-index: 99;
border: 1px solid #36363c;
padding: 15px 20px 15px 40px;
background-color: #27272a;
border-radius: 8px;
color: #fff;
width: calc(100% - 62px);
}
.schedule {
list-style: none;
display: flex;
gap: 1em;
}
.schedule > li {
flex: 1;
background-color: #141418;
padding: 10px;
}
.schedule > li strong {
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
}
.schedule > li strong.left {
color: rgba(255,255,255,0.70);
float: left;
}
.schedule > li ul {
margin: 25px 0px 0px 0px;
list-style: none;
}
.schedule > li ul li {
display: block;
padding: 5px 10px;
background-color: #36363c;
border-radius: 5px;
margin: 5px 0px;
font-size: 12px;
}
.g {
color: rgb(195, 195, 201)!important;
}
.tril1 {
color: #4ade80!important;
}
.tril2 {
color: #c084fc!important;
}
.tril3 {
color: #facc15!important;
}
.tril4 {
color: #fb923c!important;
}
.schedulefilter h2 {
flex: none;
flex-shrink: 0;
display: inline-block;
width: 220px;
}
.schedulefilter div, .filterjingles div {
flex-shrink: 0;
display: inline-block;
width: 220px;
flex: none;
}
.schedulefilter span, .filterjingles span {
flex: 1;
vertical-align: middle;
text-align: center;
}
.schedulefilter span label, .filterjingles span label {
display: inline-block;
font-size: 12px;
vertical-align: middle;
margin: 0px 10px;
}
.message {
position: fixed;
bottom: -200px;
right: 30px;
display: inline-block;
padding: 20px;
width: 300px;
border-radius: 10px;
transition: all 0.4s;
}
.message.show {
bottom: 30px;
}
.message strong {
display: block;
}
.message.error {
background-color:rgba(209,0,3,1.00);
color: #fff;
}
.hidessml.hide {
display: none;
}
.multiselect input {
width: auto;
}
.multiselectboxcontainer {
display: inline-block;
overflow: hidden;
width: calc(100% - 200px);
margin: 10px 0px 0px 0px;
}
.multiselectbox {
display: none;
overflow: hidden;
}
.multiselectbox.show {
display: block;
overflow: hidden;
}
.multiselect {
float: left;
width: auto;
background-color: rgba(243,243,243,1.00);
border: 1px solid #ccc;
border-radius: 5px;
padding: 3px 5px;
margin: 0px 5px 5px 0px!important;
color: #000!important;
}
.multiselect input {
display: none;
}
.multiselect.selected {
background-color: rgba(15,209,0,1.00);
border: 1px solid rgba(29,85,0,1.00);
color: #fff;
}
.multiselect.new {
background-color: rgba(0,110,201,1.00);
border: 1px solid rgba(0,110,201,1.00);
color: #fff;
font-weight: bold;
cursor: pointer;
}
.showbox {
display: inline-block;
background: rgba(175,175,175,0.60);
border-radius: 5px;
cursor: pointer;
padding: 5px 10px;
font-style: normal;
}
.showdetails strong {
cursor: pointer;
}
.showdetails strong:hover {
color: rgb(96, 165, 250);
}
.catanalytics h2 span {
float: right;
color: rgb(195, 195, 201);
font-size: 14px;
font-weight: normal;
}
.catanalytics li {
display: flex;
gap: 10px;
font-size: 14px;
padding: 10px 0px;
}
.catanalytics li span {
}
.catanalytics li span.col1 {
width: 30px;
flex-shrink: 0;
font-weight: 500;
}
.catanalytics li span.col2 {
flex-shrink: 0;
width: 40px;
color: rgb(156, 163, 175);
}
.catanalytics li span.col2 svg {
height: 12px;
}
.catanalytics li span.col3 {
flex: 1;
min-width: none;
}
.catanalytics li span.col4 {
flex-shrink: 0;
width: 100px;
text-align: right;
color: #fff;
font-weight: 500;
}
.catanalytics li span.col5 {
flex-shrink: 0;
width: 100px;
text-align: right;
color: rgb(156, 163, 175);
}
.questionscontainer p {
text-align: center;
color: rgb(195, 195, 201);
}
.question {
background-color: rgb(54, 54, 60);
padding: 20px;
color: #fff!important;
border-radius: 8px;
margin: 0px 0px 10px 0px;
}
.question strong {
font-size: 14px!important;
}
.question input, .question select, .question textarea {
border: 1px solid #fff;
margin: 5px 0px 5px 0px;
}
.surveys {
list-style: none;
margin: 40px 0px 0px 0px;
}
.surveys li {
display: block;
border: 1px solid #fff;
border-radius: 8px;
color: rgb(195, 195, 201);
padding: 15px;
background-color: rgb(39, 39, 42);
margin: 0px 0px 20px 0px;
}
.surveys li p {
color: rgb(195, 195, 201);
}
.surveys li strong em {
font-size: 12px;
font-weight: 500;
display: inline-block;
vertical-align: middle;
border-radius: 10px;
margin: 0px 0px 0px 20px;
padding: 3px 8px;
font-style: normal;
}
.surveys li strong em.concept {
color: rgb(250, 204, 21);
border: 1px solid rgb(250, 204, 21);
}
.surveys li strong em.live {
color: #fff;
border: 1px solid rgb(22, 163, 74);
background-color: rgb(22, 163, 74);
}
.surveys li strong em.done {
color: #fff;
border: 1px solid rgb(37, 99, 235);
background-color: rgb(37, 99, 235);
}
.surveys li strong {
font-size: 18px;
display: block;
color: #fff;
margin: 0px 0px 10px 0px;
}
.surveys li span {
font-size: 14px;
display: inline-block;
margin: 0px 20px 0px 0px;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
white-space: nowrap;
}
.custom-select {
position: relative;
display:inline-block;
width: 100%;
}
.cs-button {
font-family: "Inter", system-ui;
width: 100%;
text-align: left;
font-size: 14px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid rgb(54, 54, 60);
background: rgb(54, 54, 60);
color:rgb(195, 195, 201);
cursor: pointer;
}
/* Default: down chevron (SVG), rotates when open */
.cs-button::after {
content: "";
position: absolute;
right: 12px;
top: 50%;
width: 14px;
height: 14px;
transform: translateY(-50%) rotate(0deg);
opacity: 0.9;
pointer-events: none; /* don't block clicks */
/* Inline SVG chevron (down). Change %23bbb to another hex for different shade */
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
transition: transform 150ms ease, opacity 120ms ease;
}
.cs-button:hover::after { opacity: 1; }
/* Rotate chevron up when open */
.cs-button[aria-expanded="true"]::after {
transform: translateY(-50%) rotate(180deg);
}
.custom-select {
margin: 5px 0px 25px 0px;
}
.cs-button:hover {
border: 1px solid rgb(54, 54, 60);
background: rgb(54, 54, 60);
}
.cs-button:focus {
border: 1px solid rgb(255, 255, 255);
outline-offset: 2px;
}
.cs-listbox {
position: absolute;
left: 0;
right: 0;
margin-top: 6px;
border: 1px solid #444;
border-radius: 10px;
background: #2b2b2b;
color:#fff;
max-height: 400px;
overflow-y: auto;
padding: 6px;
box-shadow: 0 10px 20px rgba(0,0,0,.35);
z-index: 1000;
}
.cs-listbox[hidden] {
display:none;
}
/* Options */
.cs-option {
list-style: none;
padding: 10px 12px 10px 36px;
border-radius: 8px;
cursor: pointer;
position: relative;
font-size: 14px;
}
.cs-option:hover, .cs-option.is-active {
background:#3a3a3a;
}
.cs-option[aria-selected="true"]::before {
content: "✓";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
}
/* Groups */
.cs-group {
list-style: none;
margin: 2px 0;
}
.cs-group-header {
display:flex;
align-items:center;
gap:8px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
user-select: none;
}
.cs-group-header:hover, .cs-group-header.is-active {
background:#383838;
}
.cs-caret {
display:inline-block;
width: 1em;
text-align:center;
font-size: 11px;
font-family: ui-monospace, Menlo, monospace;
}
.cs-group-label {
font-size: 14px;
color:#e4e4e4;
font-weight: 600;
}
.cs-group-options {
margin: 4px 0 6px 0;
padding-left: 0;
}
.cs-group-options .cs-option {
padding-left: 40px;
} /* indent in group */
/* Disabled option (optional) */
.cs-option[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
}
/* Custom scrollbar for the dropdown list */
.cs-listbox {
/* Firefox */
scrollbar-width: thin;
scrollbar-color: #666 #1a1a1a;
/* Optional nice-to-haves */
scrollbar-gutter: stable; /* avoids layout shift when bar appears (supported in modern browsers) */
overscroll-behavior: contain; /* prevents page from scrolling when you hit the ends */
}
/* Chrome / Edge / Safari */
.cs-listbox::-webkit-scrollbar {
width: 10px; /* thickness */
}
.cs-listbox::-webkit-scrollbar-track {
background: #1a1a1a; /* track color */
border-radius: 10px;
}
.cs-listbox::-webkit-scrollbar-thumb {
background: #555; /* thumb color */
border-radius: 10px;
border: 2px solid #1a1a1a; /* gives the thumb some breathing room */
}
.cs-listbox::-webkit-scrollbar-thumb:hover { background: #6b6b6b; }
.cs-listbox::-webkit-scrollbar-thumb:active { background: #8a8a8a; }
/* High-contrast users: let the OS handle it */
@media (forced-colors: active) {
.cs-listbox { scrollbar-color: auto; }
}
.confirmmssg {
padding: 30px;
border: 1px solid #fff;
}
.confirmmssg strong {
color: #fff;
font-weight: 600;
border-bottom: 1px solid #fff;
display: block;
font-size: 20px;
padding: 15px 0px;
margin: 0px 0px 15px 0px;
}
.confirmmssg em {
font-weight: 500;
font-style: normal;
}
.confirmmssg .btn {
background-color: rgb(37, 99, 235, 1.0);
border: 0px;
border-radius: 5px;
text-align: center;
vertical-align: middle;
color: #fff;
display: inline-block;
width: auto;
padding: 5px 15px 5px 10px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
cursor: pointer;
margin: 0px 8px 0px 0px;
}
.confirmmssg .btn.accept {
color: rgba(0,189,27,1.00);
background-color: rgba(0,189,27,0.10);
border: 1px solid rgba(0,189,27,1.00);
}
.confirmmssg .btn.reject {
color: rgba(248, 113, 113,1.00);
background-color: rgba(248, 113, 113,0.10);
border: 1px solid rgba(248, 113, 113,1.00);
}
.confirmmssg .btn.reject svg {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
color: rgba(248, 113, 113,1.00);
}
.confirmmssg .btn.accept svg {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
color: rgba(0,189,27,1.00);
}
.newpopup .cs-button {
border: 1px solid #fff;
}
.surveytest {
max-width: 600px;
color: #fff!important;
background-color: rgb(39, 39, 42);
}
.surveytest form {
max-height: 560px!important;
margin: 0px!important;
}
.surveytest .block {
background-color: rgb(54, 54, 60);
margin: 0px 0px 10px 0px;
}
.surveytest .block em, .surveytest .block strong {
display: block;
margin: 0px 0px 10px 0px;
}
.surveytest .block em {
font-size: 14px;
font-weight: 500;
font-style: normal;
}
.surveytest .block strong {
font-size: 16px;
font-weight: 500;
font-style: normal;
}
.surveytest .block label {
display: block;
margin: 0px 0px 10px 0px;
font-weight: normal!important;
}
.surveytest .block strong i {
display: inline-block;
margin: 0px 0px 0px 6px;
vertical-align: middle;
color: rgb(248, 113, 113);
}
.surveytest .block input {
display: inline-block;
vertical-align: middle;
margin: 0px 5px 0px 0px;
}
.surveytest .block textarea {
border: 1px solid #fff;
background-color: rgb(39, 39, 42);
margin: 0px;
}
.rating {
vertical-align: middle;
}
.surveytest .block .rating label {
vertical-align: middle;
display: inline-block;
border-radius: 100px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
border: 2px solid #fff;
color: #fff;
font-weight: 500!important;
margin: 0px 5px 0px 0px;
transition: all 0.2s;
cursor: pointer;
}
.surveytest .block .rating label:hover {
border: 2px solid rgb(32, 148, 243);
}
.surveytest .block .rating label input {
display: none;
}
.surveytest .block .rating label:has(> input:checked){
border: 2px solid rgb(32, 148, 243);
background:rgb(32, 148, 243);
}
.warning {
border-radius: 8px;
padding: 8px;
border: 1px solid rgba(221,172,0,1.00);
color: 1px solid rgba(221,172,0,1.00);
background-color: rgba(221,172,0,0.30);
text-align: center;
}
.tabs {
display: flex;
border-radius: 8px;
border: 4px solid rgb(39, 39, 42);
background-color: rgb(39, 39, 42);
gap: 1em;
margin: 0px 0px 30px 0px;
}
.tabs li {
flex: 1;
padding: 5px 10px;
text-align: center;
color: rgb(161, 161, 170);
border-radius: 8px;
background-color: rgb(39, 39, 42);
font-weight: 500;
transition: all 0.2s;
font-size: 14px;
list-style: none;
cursor: pointer;
}
.tabs li.dummy {
background-color: rgb(39, 39, 42)!important;
color: rgb(161, 161, 170)!important;
cursor: default;
}
.tabs li svg {
height: 14px;
width: 14px;
display: inline-block;
vertical-align: middle;
margin: -2px 10px 0px 0px;
}
.tabs li.active {
background-color: rgb(0, 0, 0);
color: #fff;
}
.tabs li:hover {
background-color: rgba(31,31,31,1.00);
color: #fff;
}
.tabcontainer .tab {
display: none;
}
.tabcontainer .tab.active {
display: block;
}
.tabcontainer .tab .block {
background-color: rgb(26, 26, 26);
border:1px solid rgb(51, 51, 51);
color: #fff;
}
.tabcontainer .tab .block .subttl {
font-size: 12px;
opacity: 0.8;
}
.tabcontainer .tab .block svg {
display: inline-block;
vertical-align: middle;
margin: -2px 10px 0px 0px;
}
.system .block strong {
display: inline-block;
vertical-align: middle;
width: 300px;
font-size: 14px;
}
.system .block em {
display: inline-block;
font-style: normal;
vertical-align: middle;
width: 600px;
font-size: 14px;
}
.banners {
list-style: none;
display: flex;
gap:1em;
}
.banners li {
position: relative;
display: inline-block;
flex: 1;
max-width: 400px;
border-radius: 10px;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.banners li img {
width: 100%;
border-radius: 10px;
}
.banners li a {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 120px;
z-index: 1000;
}
.banners a.delete {
position: relative;
width: 20px;
height: 20px;
top: auto;
left: auto;
float: right;
border:1px solid rgb(248, 113, 113);
border-radius: 8px;
padding: 4px;
text-align: center;
line-height: 20px;
transition: all 0.2s;
}
.banners a.delete svg {
width: 14px;
height: 14px;
color: rgb(248, 113, 113);
text-align: center;
margin: -2px 0px 0px 0px!important;
}
.banners a.delete:hover {
background-color: rgb(248, 113, 113);
}
.banners a.delete:hover svg {
color: #1a1a1a!important;
}
.banners strong {
display: block;
margin: 5px 0px 10px 0px;
}
.banners .activeon {
position: absolute;
bottom: 19px;
width: 100%;
}
.auto-refresh-control {
display: flex;
align-items: center;
gap: 0.75rem;
}
.auto-refresh-label {
font-size: 0.875rem;
color: var(--dark-text-secondary);
}
.toggle-switch {
position: relative;
display: inline-flex;
height: 1.5rem;
width: 2.75rem;
align-items: center;
border-radius: 9999px;
background-color: #4b5563;
transition: background-color 0.2s;
cursor: pointer;
border: none;
padding: 10px 0px;
}
.toggle-switch.active {
background-color: #22c55e;
}
.toggle-slider {
display: inline-block;
height: 1rem;
width: 1rem;
transform: translateX(0.25rem);
border-radius: 50%;
background-color: white;
transition: transform 0.2s;
}
.toggle-switch.active .toggle-slider {
transform: translateX(1.5rem);
}
.toggle-status {
font-size: 0.75rem;
font-weight: 500;
color: #6b7280;
}
.toggle-status.active {
color: #22c55e;
}
.controls-left {
position: relative;
z-index: 100000;
float: left;
}
.categories {
list-style: none;
max-width: 700px;
}
.categories > li {
background-color: rgba(255,255,255,0.05);
padding: 5px 10px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.30);
margin: 0px 0px 5px 0px;
}
ul.categories a {
display: inline-block!important;
width: 350px;
vertical-align: middle;
}
ul.categories a.delete {
display: inline-block!important;
width: 25px;
vertical-align: middle;
color: rgb(248, 113, 113);
}
ul.categories a.delete svg {
height: 14px;
width: 14px;
}
.categories > li > a {
width: 383px;
}
.categories li {
transition: all 0.2s;
}
.categories li:hover {
border: 1px solid #fff;
}
.categories .activeon {
display: inline-block;
width: 100px;
vertical-align: middle;
}
.categories > li span {
font-size: 18px;
display: inline-block;
vertical-align: middle;
margin: 0px 6px 0px 0px;
}
.categories > li a {
display: block;
color: #fff;
text-decoration: none;
font-size: 14px;
}
.categories > li ul {
list-style: none;
margin: 5px 0px 0px 22px;
}
.categories > li ul li {
background-color: rgba(255,255,255,0.05);
padding: 5px 10px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.30);
margin: 0px 0px 5px 0px;
}
.categories .controls-left {
float: right;
margin: 1px 11px 0px 0px;
}
.categories .toggle-status {
font-size: 10px!important;
}
.categories .toggle-switch {
height: 20px;
width: 35px;
}
.categories .toggle-slider {
height: 12px;
width: 12px;
transform: translateX(0.4rem);
}
.categories .toggle-switch.active .toggle-slider {
transform: translateX(1.1rem);
}
.categories ul ul .controls-left {
margin: -1px 0px 0px 0px;
}
.categories ul .toggle-status {
margin: 0px 2px 0px 0px;
}
.categories .toggle-status.active {
margin: 0px 6px 0px 0px;
}
.cateditor form {
display: flex;
gap: 1em;
}
.cateditor .left, .cateditor .right {
flex:1;
}
.cateditor .right {
border-left: 1px solid #ccc;
padding: 0px 0px 0px 30px;
}
.cateditor .right strong {
color: #fff;
font-weight: 500;
margin: 0px 0px 20px 0px;
display: block;
}
.cateditor .right label {
font-weight: normal;
font-size: 14px;
margin: 0px 0px 10px 0px;
}
.ulrights {
display: none;
}
.ulrights.show {
display: block;
}
.ua {
background-color: rgba(255,255,255,0.10);
padding: 10px;
border-radius: 8px;
margin: 0px 0px 10px 0px;
}
.getSchedule {
color: #fff;
float: right;
margin: 0px 10px 0px;
}
.weeknr {
color: #fff;
float: right;
margin: 0px 10px 0px;
}
.mobile {
display: none;
}
@media only screen and (max-width: 800px) {
.mobile {
display: inline-block;
}
.header img {
max-height: 40px;
margin: 0px 0px 0px 20px;
}
.mobile.menu {
display: inline-block;
position: absolute;
right: 20px;
top: 21px;
color: #fff;
border: 1px solid #fff;
width: 30px;
height: 30px;
text-align: center;
line-height: 38px;
border-radius: 8px;
}
.mobile.menu span {
font-size: 20px;
}
.logout {
margin: 10px 90px 0px 0px;
}
.login > div {
width: 90%;
margin: 0px 5%;
top: calc(50% - 260px);
}
.login .snap {
font-size: 16px;
height: 75px;
width: 230px;
}
.login form h1 {
color: #fff;
font-size: 38px;
font-weight: 600;
letter-spacing: -4px;
line-height: 48px;
margin: 0px 0px 24px 0px;
}
.login .bringer-masked-media {
background-color: #ed345e;
padding: 100px 30px 30px 30px;
}
.login form input {
font-size: 20px;
letter-spacing: -0.8px;
font-weight: 500;
line-height: 38px;
padding: 6px 20px 6px 50px;
width: calc(100% - 140px);
margin: 0px 0px 20px 0px;
}
.login form span i {
position: absolute;
top: 18px;
left: 19px;
color: #fff;
font-size: 20px;
}
.login form button {
font-weight: 500;
margin: 0px 0px 20px 0px;
height: 52px;
line-height: 60px;
padding: 0px 20px;
}
.login form button span {
font-size: 24px;
}
.leftnav {
display: none;
}
.leftnav.open {
display: block;
z-index: 1000;
top: 68px;
width: 100%;
background-color: #000;
padding: 0px 0px;
}
.leftnav > a {
display: none;
}
.leftnav li a {
padding: 13px 10px;
text-align: right;
}
.leftnav li a svg {
height: 25px;
margin: -3px 0px 0px 12px;
float: right;
}
.maincontent {
position: fixed;
left: 0;
height: 100vh;
width: calc(100vw);
}
.addboardSmall > ul, .calenderSmall ul {
display: block;
}
.addboardSmall > ul > li, .calenderSmall ul li {
margin: 0px 0px 10px 0px;
padding: 15px 15px 5px 15px;
}
.maincontent .content {
padding: 20px;
height: calc(100vh - 108px);
}
.analyticsSmall > div {
display: block;
}
.analyticsSmall > div > div {
margin: 0px 0px 20px 0px;
}
.flexbox {
display: block;
}
.flexbox > div.ws {
width: 200px;
height: 180px;
}
.schedulefilter h2 {
width: 100%;
font-size: 20px;
}
.schedulefilter span label, .filterjingles span label {
display: inline-block;
font-size: 12px;
vertical-align: middle;
margin: 0px;
width: 49%;
text-align: left;
}
.schedulefilter div, .filterjingles div {
width: auto;
margin: 8px 0px 0px 0px;
float: right;
}
.schedulefilter h2 span, .schedulefilter h2 .getSchedule {
font-size: 10px;
margin: 0px;
}
.weeknr {
margin: 0px 5px!important;
}
.allcategories {
flex-wrap: wrap;
}
.allcategories li {
flex: 0 0 calc(50% - 8px);
padding: 20px!important;
}
.schedule {
display: block;
}
.schedule > li {
margin: 0px 0px 10px 0px;
}
.block {
padding: 20px
}
.addboardBig div ul {
list-style: none;
margin: 10px -20px 0px -20px;
}
.addboardBig div ul li.f {
font-size: 12px;
}
.addboardBig ul.first {
display: block;
margin: 30px 0px;
}
.addboardBig ul.first li {
margin: 0px 0px 10px 0px;
}
.addboardBig div ul li {
display: block;
padding: 5px 20px;
}
.addboardBig div ul li span.s {
flex-shrink: 0;
width: 50px;
text-align: center;
float: right;
}
.addboardBig div ul li span {
font-size: 10px!important;
}
.addboardBig .downloadfile, .addboardBig .deletefile {
width: 36px;
height: 34px
}
.addboardBig div ul li span.m {
margin: 0px 6px 0px 0px;
}
.addboardBig {
margin: 0px 0px 40px 0px;
}
.track-item {
align-items: flex-start;
gap: 0.75rem;
display: flex;
}
.position-badge, .album-cover {
width: 2rem!important;
height: 2rem!important;
}
.format-badge {
display: none!important;
}
.track-item {
padding: 10px;
}
.track-column {
width: 400px;
}
#tracksColumn1, #tracksColumn2 {
margin: 0px -24px;
width: calc(100% - 30px);
}
.chart-container {
margin: 0px 0px 40px 0px;
}
.calfilter .date {
line-height: 36px;
width: 220px;
font-size: 17px;
}
.allCal {
display: block;
margin: 0px 0px 0px 0px;
}
.allCal li {
width: 100%;
margin: 0px 0px 10px 0px;
}
.searchbox {
margin: 0px 30px 10px 10px;
width: calc(100% - 20px);
}
.nomob {
display: none;
}
.reqblock li strong {
display: inline-block;
width: calc(100% - 100px);
font-size: 14px;
line-height: 24px;
}
.export {
float: none;
background-color: rgb(32, 148, 243);
border-radius: 8px;
padding: 10px 15px;
font-weight: 500;
font-size: 12px;
color: #fff;
margin: 0px 20px 20px 0px;
display: inline-block;
}
.selectall {
margin: 10px 0px 0px 0px;
}
.maincontent .content {
padding: 20px 20px 80px 20px;
height: calc(100vh - 158px);
}
.flex {
display: block;
}
.flex li {
margin: 0px 0px 10px 0px;
}
.users {
display: block;
}
.users li {
margin: 0px 0px 10px 0px;
overflow: hidden;
}
.newpopup {
padding: 25px 25px 25px 25px;
height: 80vh;
overflow: hidden;
}
.newpopup form {
max-height: none;
height: 90%;
}
.system .block strong {
margin: 8px 0px 0px 0px;
}
.system .block em {
width: 100%;
}
.banners {
display: block;
}
.banners li {
margin: 0px 0px 10px 0px;
}
.launchSurvey, .editsurvey, .deletesurvey, .testsurvey, .endsurvey, .completedsurvey, .showsurveyreport {
float: right;
background-color: #000;
color: rgb(34, 197, 94);
font-size: 10px;
font-weight: 500;
padding: 4px 10px 4px 0px;
border-radius: 5px;
vertical-align: middle;
border: 1px solid rgb(34, 197, 94);
margin: 0px 3px;
}
.testsurvey {
display: none;
}
.editsurvey {
color: rgb(140,143,148);
border: 1px solid rgb(140,143,148);
}
.deletesurvey {
color: rgb(248, 113, 113);
border: 1px solid rgb(248, 113, 113);
}
.testsurvey {
color: rgb(59, 130, 246);
border: 1px solid rgb(59, 130, 246);
}
.showsurveyreport {
color:rgba(0,157,223,1.00);
border: 1px solid rgba(0,157,223,1.00);
}
.endsurvey {
color: rgb(206, 76, 19);
border: 1px solid rgb(206, 76, 19);
}
.completedsurvey {
color: rgb(19, 206, 204);
border: 1px solid rgb(19, 206, 204);
}
.tril-header {
margin: 10px 0px 0px 0px;
}
.tril-main {
display: block!important;
}
.messages-list {
width: 100%!important;
}
.messages-list .btn {
display: inline-block!important;
align-items: center!important;
justify-content: center!important;
padding: 5px 5px!important;
border-radius: 0.375rem!important;
font-weight: 500!important;
border: none!important;
cursor: pointer!important;
transition: all 0.2s!important;
font-size: 10px!important;
min-height: 32px!important;
}
.messages-list button svg {
display: inline-block!important;
height: 17px!important;
margin: -2px 3px 0px 0px!important;
vertical-align: middle!important;
}
.messages-list .space-x-2 > * + * {
margin-left: 3px!important;
}
.message-item {
padding: 1rem 1rem 1rem 2rem!important;
}
.reply, .delete, .cancelreply {
max-width: 80px!important;
font-size: 10px!important;
max-height: 36px!important;
}
.form-textarea {
font-size: 12px!important;
}
.message-detail {
margin: 0px 0px 60px 0px;
}
}