/* ---------------------------------------------------------------------------
   Sing Song Radio - station skin
   ---------------------------------------------------------------------------
   The look of the neon sign in the logo, applied to every public page.

   This file is layered OVER the vendor main.css and never edits it, so a future
   script update cannot wipe the design out. The first block below is written by
   hand; the long block after it is the vendor's own rules re-stated with the
   station's colours, so nothing is left painted in the old navy.

   Palette taken from the station artwork:
     ground   #05000e / #010007      pink  #c82b72 core, #e3608c highlight
     panel    #0c0620                blue  #4facf9
     text     #fceffe (lavender white)
   The accent itself is --ssr-base, which follows the colour picked in the
   admin panel, so changing it there still changes the site.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. The vendor's own rules, re-stated in the station palette.
   Generated from main.css - do not hand edit, it is regenerated on a re-skin.
--------------------------------------------------------------------------- */

a:hover {
    color:var(--ssr-base);
}
.border--base {
    border:1px solid var(--ssr-base) !important;
}
.text--dark {
    color:#0a0420 !important;
}
.text--base {
    color:var(--ssr-base) !important;
}
.bg--primary {
    background-color:#0a0420 !important;
}
.bg--dark {
    background-color:#0a0420 !important;
}
.bg--base {
    background-color:var(--ssr-base) !important;
}
.glass--bg,
.pagination .page-item .page-link,
.custom--card,
.custom--modal .modal-content,
.d-widget {
    background-color:rgba(var(--ssr-base-rgb), 0.1);
}
.glass--bg-two {
    background-color:rgba(5, 0, 14, 0.1);
}
.overlay--one::before {
    background-color:#0c0620;
}
.overlay--two::before {
    background-color:#0c0620;
}
a.text-white:hover {
    color:var(--ssr-base) !important;
}
.custom--accordion .accordion-item {
    border:1px solid rgba(var(--ssr-base-rgb), 0.5);
}
.custom--accordion .accordion-button {
    background-color:rgba(var(--ssr-base-rgb), 0.15);
}
.custom--accordion .accordion-button:not(.collapsed) {
    background-color:var(--ssr-base);
}
.custom--tab .nav-item .nav-link {
    background-color:#0c0620;
}
.custom--tab .nav-item .nav-link.active {
    background-color:var(--ssr-base);
    border-color:var(--ssr-base);
}
.page-breadcrumb li:first-child::before {
    color:var(--ssr-base);
}
.page-breadcrumb li a:hover {
    color:var(--ssr-base);
}
.progress-bar {
    background-color:var(--ssr-base);
}
.video-btn {
    background-color:var(--ssr-base);
}
.video-btn::before,
.video-btn::after {
    background-color:var(--ssr-base);
}
.cursor {
    background-color:var(--ssr-base);
}
.cursor-follower {
    border:1px solid var(--ssr-base);
}
.pagination .page-item.active .page-link {
    background-color:var(--ssr-base);
}
.pagination .page-item .page-link {
    border:1px solid rgba(var(--ssr-base-rgb), 0.25);
}
.preloader {
    background-color:#0c0620;
}
.preloader__inner .logo-area .equalizer .equalizer-item {
    background-color:#0c0620;
}
.preloader__inner .logo-area .logo-name {
    color:var(--ssr-base);
}
.preloader__inner .loading-bar {
    background-color:#070212;
}
.preloader__inner .loading-bar::after {
    background-color:var(--ssr-base);
}
.btn--dark {
    background-color:#0a0420;
}
.btn--base {
    background-color:var(--ssr-base);
}
.btn--custom::after {
    background-color:#0c0620;
}
.btn-outline--dark {
    color:#0a0420;
    border-color:#0a0420;
}
.btn-outline--dark:hover {
    background-color:#0a0420;
}
.btn-outline--base {
    color:var(--ssr-base);
    border:1px solid var(--ssr-base);
}
.btn-outline--base:hover {
    background-color:var(--ssr-base);
}
.btn-shadow--dark {
    box-shadow:0 0 6px 1px rgba(10, 4, 32, 0.35);
}
.btn-shadow--base {
    box-shadow:0 0 6px 1px rgba(var(--ssr-base-rgb), 0.35);
}
.badge--dark {
    background-color:rgba(10, 4, 32, 0.15);
    border:1px solid #0a0420;
    color:#0a0420;
}
.badge--base {
    background-color:rgba(var(--ssr-base-rgb), 0.15);
    border:1px solid var(--ssr-base);
    color:var(--ssr-base);
}
.custom--table thead {
    background-color:rgba(5, 0, 14, 0.75);
}
.custom--table tbody tr:nth-child(even) {
    background-color:rgba(5, 0, 14, 0.25);
}
.form--control {
    border:1px solid var(--ssr-base);
    background-color:#0c0620;
}
.form--control:focus {
    background-color:#0c0620;
    border-color:var(--ssr-base) !important;
    box-shadow:0 0 5px rgba(var(--ssr-base-rgb), 0.35);
}
.form--control:placeholder-shown {
    background-color:rgba(5, 0, 14, 0.35);
}
.form--control.style--two {
    background-color:#0c0620;
}
.form--control[readonly] {
    background-color:#0c0620;
}
.select {
    background-color:#0c0620;
}
.input-group-text {
    background-color:var(--ssr-base);
    border-color:var(--ssr-base);
}
.custom--card {
    border:1px solid rgba(var(--ssr-base-rgb), 0.25);
}
.custom--card .card-header {
    background-color:rgba(5, 0, 14, 0.45);
}
.header.menu-fixed .header__bottom {
    background-color:#0c0620;
}
.header .main-menu li.menu_has_children:hover>a::before {
    color:var(--ssr-base);
}
.header .main-menu li a.active,
.header .main-menu li a:hover,
.header .main-menu li a:focus {
    color:var(--ssr-base);
}
.header .main-menu li .sub-menu {
    background-color:var(--ssr-base);
    border:2px solid var(--ssr-base);
}
.header .main-menu li .sub-menu li a::before {
    background-color:var(--ssr-base);
}
.header .main-menu li .sub-menu li a:hover {
    background-color:rgba(var(--ssr-base-rgb), 0.05);
}
.header .nav-right .select option {
    background-color:#0c0620;
}
.header-login-btn {
    color:#0c0620;
    border:1px solid var(--ssr-base);
    background-color:var(--ssr-base);
}
.header-login-btn:hover {
    background-color:rgba(var(--ssr-base-rgb), 0.35);
    box-shadow:0 0 5px 2px rgba(var(--ssr-base-rgb), 0.5);
}
.header-login-btn:hover i {
    color:var(--ssr-base);
}
.header-login-btn i {
    color:#0c0620;
}
.hero-slider .slick-dots li.slick-active button {
    background-color:var(--ssr-base);
}
.equalizer-item {
    background-image:-moz-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background-image:-webkit-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background-image:-ms-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
}
.inner-hero::after {
    background-image:-moz-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background-image:-webkit-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background-image:-ms-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background:var(--ssr-base);
    background:-webkit-linear-gradient(to bottom, rgba(5, 0, 14, 0.15), #4facf9);
    background:linear-gradient(to bottom, rgba(5, 0, 14, 0.15), #4facf9);
}
.audio-player .timeline .progress {
    background:var(--ssr-base);
}
.controls .right {
    background-image:-moz-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background-image:-webkit-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background-image:-ms-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
}
.play-container::after {
    border:2px solid var(--ssr-base);
    background-color:#070212;
}
.view-details-btn {
    background-color:var(--ssr-base);
}
.schedule-card__thumb::before {
    background-image:-moz-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background-image:-webkit-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background-image:-ms-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
}
.schedule-card__thumb .schedule-btn {
    background-color:var(--ssr-base);
}
.audio-player.style--two .play-container {
    background-color:var(--ssr-base);
}
.event-card {
    background-color:rgba(5, 0, 14, 0.45);
    border:1px solid rgba(var(--ssr-base-rgb), 0.45);
}
.event-card:hover {
    box-shadow:0 3px 15px 1px rgba(var(--ssr-base-rgb), 0.25);
}
.event-card-two::after {
    background-image:-moz-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background-image:-webkit-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
    background-image:-ms-linear-gradient(7deg, #e3608c 0%, #4facf9 100%);
}
.date-select-form .date-select-btn {
    background-color:var(--ssr-base);
}
.ui-widget-content {
    background:#0c0620;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    background:#0c0620;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background:var(--ssr-base);
    border-color:var(--ssr-base);
}
.rj-single:hover {
    box-shadow:0 5px 15px 2px rgba(var(--ssr-base-rgb), 0.45);
}
.rj-single .thumb::after {
    background:var(--ssr-base);
    background:-webkit-linear-gradient(to bottom, rgba(5, 0, 14, 0.15), #4facf9);
    background:linear-gradient(to bottom, rgba(5, 0, 14, 0.15), #4facf9);
}
.rj-single .thumb .social-links li a {
    background-color:var(--ssr-base);
}
.profile-wrapper {
    background-color:rgba(5, 0, 14, 0.45);
}
.profile-wrapper .thumb {
    box-shadow:0 5px 15px 1px rgba(var(--ssr-base-rgb), 0.3);
}
.profile-wrapper .thumb::after {
    background:var(--ssr-base);
    background:-webkit-linear-gradient(to bottom, rgba(5, 0, 14, 0.15), rgba(108, 0, 146, 0.65));
    background:linear-gradient(to bottom, rgba(5, 0, 14, 0.15), rgba(108, 0, 146, 0.65));
}
.resume-card .icon {
    background-color:var(--ssr-base);
}
.brand-item {
    background-color:rgba(5, 0, 14, 0.15);
}
.contact-wrapper {
    background-color:rgba(5, 0, 14, 0.25);
}
.contact-item .icon {
    background-color:var(--ssr-base);
}
.contact-item .content p a:hover {
    color:var(--ssr-base);
}
.d-widget {
    border:2px solid rgba(var(--ssr-base-rgb), 0.15);
}
.d-widget:hover {
    border-color:var(--ssr-base);
}
.d-widget:hover .d-widget__amount::after {
    background-color:var(--ssr-base);
}
.d-widget__icon {
    background-color:#0c0620;
}
.d-widget__icon i {
    color:var(--ssr-base);
    text-shadow:0 0 15px rgba(var(--ssr-base-rgb), 0.5);
}
.d-widget__amount::after {
    background-color:rgba(var(--ssr-base-rgb), 0.15);
}
.profile-thumb .avatar-edit label {
    background-color:var(--ssr-base);
}
.qr-code-wrapper {
    background-color:rgba(5, 0, 14, 0.45);
}
.qr-code {
    background-color:rgba(5, 0, 14, 0.45);
}
.qr-code-copy-form input[type="submit"] {
    background-color:var(--ssr-base);
}
.custom--file-upload::before {
    background-color:var(--ssr-base);
}
.single-reply {
    background-color:rgba(5, 0, 14, 0.65);
}
.footer {
    background-color:#0c0620;
}
.footer::before {
    background-color:#0c0620;
}
.social-links-list li a {
    background-color:var(--ssr-base);
}
.footer-short-list li a:hover {
    color:var(--ssr-base);
}
.scroll-to-top {
    background-color:var(--ssr-base);
}
.poll-box {
    background-color:#070212;
    border:1px solid rgba(var(--ssr-base-rgb), 0.45);
}
.poll-open-btn {
    box-shadow:5px 0 5px rgba(var(--ssr-base-rgb), 0.45);
}
.custom-radio input[type=radio]:checked~label::before {
    border-color:var(--ssr-base);
}
.custom-radio label::after {
    background-color:var(--ssr-base);
}
@media (max-width: 1199px) {
    .navbar-collapse {
        background-color:#0a0420;
    }
    .header-bg {
        background-color:#0a0420;
    }
}

/* ---------------------------------------------------------------------------
   2. The station skin itself. Written by hand, and last so it has the say.
--------------------------------------------------------------------------- */


:root {
    --ssr-ground: #05000e;
    --ssr-ground-deep: #010007;
    --ssr-panel: #0c0620;
    --ssr-panel-soft: rgba(255, 255, 255, .035);
    --ssr-line: rgba(200, 43, 114, .28);
    --ssr-line-soft: rgba(255, 255, 255, .08);
    --ssr-pink: #c82b72;
    --ssr-pink-light: #e3608c;
    --ssr-blue: #4facf9;
    --ssr-text: #fceffe;
    --ssr-muted: rgba(252, 239, 254, .62);
    --ssr-glow: 0 0 22px rgba(var(--ssr-base-rgb), .35);
}

/* ---- ground ------------------------------------------------------------ */

body {
    background-color: var(--ssr-ground);
    color: var(--ssr-text);
}

/* Two soft lamps behind the page, the way the sign lights the wall it hangs
   on. Fixed, so scrolling does not drag them around. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background:
        radial-gradient(60% 45% at 12% 0%, rgba(var(--ssr-base-rgb), .18), transparent 70%),
        radial-gradient(55% 45% at 92% 8%, rgba(79, 172, 249, .14), transparent 70%);
}

.preloader,
.body-overlay {
    background-color: var(--ssr-ground-deep);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ssr-ground-deep);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--ssr-pink), var(--ssr-blue));
    border-radius: 10px;
}

/* ---- type -------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ssr-text);
}

p, li, span, td, th, label {
    color: inherit;
}

.text-muted,
.text--small,
.section-header p,
.footer-content p {
    color: var(--ssr-muted) !important;
}

/* The section headings pick up the sign's magenta-to-blue sweep. */
.section-header .section-title,
.section-title {
    background: linear-gradient(90deg, var(--ssr-pink-light) 0%, var(--ssr-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- header ------------------------------------------------------------ */
/* Matched to the background of the logo so the sign sits on its own ground. */

.header__bottom,
.header.menu-fixed .header__bottom {
    background-color: #06010c;
    border-bottom: 1px solid var(--ssr-line);
    -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}

.header__top {
    background-color: var(--ssr-ground-deep);
    border-bottom: 1px solid var(--ssr-line-soft);
}

.site-logo img {
    filter: drop-shadow(0 0 14px rgba(var(--ssr-base-rgb), .45));
}

.header .main-menu li a {
    color: var(--ssr-text);
}

.header .main-menu li a:hover,
.header .main-menu li.active > a {
    color: var(--ssr-pink-light);
}

.header .main-menu li .sub-menu {
    background-color: var(--ssr-panel);
    border: 1px solid var(--ssr-line);
}

/* ---- panels ------------------------------------------------------------ */
/* Everything the vendor draws as a card gets the same smoked-glass panel with
   a thin lit edge, which is what holds the pages together visually. */

.custom--card,
.glass--bg,
.glass--bg-two,
.event-card,
.rj-single,
.schedule-card,
.deposit-card,
.d-widget,
.blog-item,
.contact-item,
.pricing-item,
.podcast-item,
.testimonial-item,
.package-card,
.custom--modal .modal-content,
.custom--accordion .accordion-item,
.table--responsive--md,
.dashboard-widget {
    background-color: var(--ssr-panel);
    border: 1px solid var(--ssr-line-soft);
    border-radius: 14px;
    -webkit-box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    -webkit-transition: border-color .3s, box-shadow .3s, transform .3s;
    -o-transition: border-color .3s, box-shadow .3s, transform .3s;
    transition: border-color .3s, box-shadow .3s, transform .3s;
}

.custom--card:hover,
.event-card:hover,
.rj-single:hover,
.schedule-card:hover,
.blog-item:hover,
.podcast-item:hover,
.package-card:hover {
    border-color: var(--ssr-line);
    -webkit-box-shadow: 0 18px 50px rgba(0, 0, 0, .45), var(--ssr-glow);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), var(--ssr-glow);
}

.custom--card .card-header,
.custom--modal .modal-header,
.custom--modal .modal-footer {
    background-color: transparent;
    border-color: var(--ssr-line-soft);
}

/* ---- buttons ----------------------------------------------------------- */

.btn--base,
.btn--base:focus {
    background-image: linear-gradient(100deg, var(--ssr-pink) 0%, var(--ssr-blue) 140%);
    background-color: var(--ssr-pink);
    border: 0;
    color: #fff;
    -webkit-box-shadow: var(--ssr-glow);
    box-shadow: var(--ssr-glow);
}

.btn--base:hover {
    background-image: linear-gradient(100deg, var(--ssr-pink-light) 0%, var(--ssr-blue) 140%);
    color: #fff;
    -webkit-box-shadow: 0 0 30px rgba(var(--ssr-base-rgb), .55);
    box-shadow: 0 0 30px rgba(var(--ssr-base-rgb), .55);
}

.btn--outline,
.btn.btn-outline--base {
    border: 1px solid var(--ssr-line);
    color: var(--ssr-text);
    background-color: transparent;
}

.btn--outline:hover,
.btn.btn-outline--base:hover {
    background-color: rgba(var(--ssr-base-rgb), .16);
    border-color: var(--ssr-pink-light);
    color: #fff;
}

/* ---- forms ------------------------------------------------------------- */

.form--control,
.form-control,
.custom--select,
select.form-select,
textarea.form-control {
    background-color: rgba(255, 255, 255, .04);
    border: 1px solid var(--ssr-line-soft);
    color: var(--ssr-text);
    border-radius: 10px;
}

.form--control:focus,
.form-control:focus,
.custom--select:focus {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--ssr-pink-light);
    color: var(--ssr-text);
    -webkit-box-shadow: 0 0 0 3px rgba(var(--ssr-base-rgb), .18);
    box-shadow: 0 0 0 3px rgba(var(--ssr-base-rgb), .18);
}

.form--control::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder {
    color: rgba(252, 239, 254, .4);
}

.form--control::placeholder,
.form-control::placeholder {
    color: rgba(252, 239, 254, .4);
}

.input-group-text {
    background-color: rgba(255, 255, 255, .04);
    border-color: var(--ssr-line-soft);
    color: var(--ssr-muted);
}

/* ---- tables, lists, pagination ----------------------------------------- */

.table thead th {
    background-color: rgba(255, 255, 255, .04);
    color: var(--ssr-text);
    border-color: var(--ssr-line-soft);
}

.table tbody td {
    border-color: var(--ssr-line-soft);
    color: var(--ssr-text);
}

.pagination .page-item .page-link {
    background-color: var(--ssr-panel);
    border: 1px solid var(--ssr-line-soft);
    color: var(--ssr-text);
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
    background-color: var(--ssr-pink);
    border-color: var(--ssr-pink);
    color: #fff;
}

hr,
.custom--accordion .accordion-item,
.footer-bottom {
    border-color: var(--ssr-line-soft);
}

/* ---- footer ------------------------------------------------------------ */

.footer,
.footer::before {
    background-color: var(--ssr-ground-deep);
}

.footer {
    border-top: 1px solid var(--ssr-line);
}

.footer a {
    color: var(--ssr-muted);
}

.footer a:hover {
    color: var(--ssr-pink-light);
}

/* ---- the neon frame ----------------------------------------------------- */
/* The banner artwork is a lit tube around the artwork. The same idea marks the
   hero and any section asking for it, without a background image. */

.neon-frame,
.hero .onair-card {
    position: relative;
    border-radius: 18px;
}

.neon-frame::after,
.hero .onair-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, var(--ssr-pink) 0%, var(--ssr-blue) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Vendor overlays were tuned for the old navy; on this ground they only need
   to darken, not tint. */
.overlay--one::before,
.overlay--two::before {
    background-color: rgba(1, 0, 7, .72);
}