.startcontent, .login, .tril1 .startcontent {
    background-image: url("/images/ssmlbg.jpg")!important;
}
.tablist li div > img {
    width: 100%;
}

#content #nav ul.nav > li > strong, #content #nav ul.nav > li > a, #content #nav ul .fas, .tablist li strong, #postrequest strong, .tab .wavelist .ttlbox, .browselist li span {
  color: #f33183!important;
}


.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 {
  border: 4px solid #f33183 !important;
  background-color: #f33183;
}
.ui-widget.ui-widget-content, .ui-slider-horizontal .ui-slider-range {
  background-color: #f33183 !important;
}
#post .send, .updpass input.btn {
    background-image: url('/images/submit_ssml.png');
}
#content #nav #info {
    background-image: url('/images/dlzip_ssml.png');
}
.browselist li.catsplitter span {
    border: 1px solid #f33183!important;
}


.wavelist .playnow, .browselist .startlist {
    background-image: url('/images/ssml_play.png');
}
.wavelist .filelnk, .browselist .filelnk {
    background-image: url('/images/ssml_download.png');
}
.wavelist .notdownloaded,.browselist .notdownloaded {
    background-image: url('/images/ssml_notdownloaded.png');
}
.wavelist .playnow.stop, .browselist .startlist.stop {
    background-image: url('/images/ssml_pauze.png');
}
.wavelist .downloaded, .browselist .downloaded {
    background-image: url('/images/ssml_downloaded.png');
}
/*
.browselist li strong {
    font-size: 12px;
    margin: -14px 0px 00px 0px;
}
.browselist li span {
    height: 37px;
}
.browselist li {
    background-size: 100% 100%;
}
.browselist li span.ply {
    padding: 8px 0px 0px 0px;
}
*/


.tablist {
    height: 380px;
}
.tablist li .sub {
    display: block;
}

.tablist li {
    height: 380px;
}

.groups {
    margin: 0px 5px 21px 5px!important;
    width: calc(33% - 10px)!important;
}
.headers.small {
    height: 57px;
    margin: -20px 0px 30px 0px;
}
.headers.small li, .headers.small .startcontent, .headers.small .startcontent > div {
    height: 20px;
    text-align: center;
    font-size: 18px;
    width: 100%;
    padding: 0px;
}
.groups span {
    color: #f33183!important;
}

@media only screen and (max-width: 899px) {

    .headers.small {
        display: none;
    }
    
}







body {
    --h: 348;
    --s: 60%;
    --l: 52%;
    --dark: #fff;
    --dark-hover: rgba(225,225,225,0.50);
    --light: hsl(var(--h) var(--s) 99%);
    --gap: 1.5rem;
}


.blue {
  --h: 206;
  --s: 42%;
  --l: 56%;
}


/* Circle of Ffths */
.cf {
  aspect-ratio: 1;
  margin-block: var(--gap) 0;
  width: 250px;
}
.cf-arcs {
  transform: rotate(-15deg);
  transform-origin: 50% 50%;;
}
.cf-arcs path {
    fill:#282828;
  stroke: #f33183;
}
.cf-arcs a.active path {
    fill:#f33183;
  stroke:#f33183;
}

.cf-arcs path:hover {
  fill: var(--dark-hover);
}
.cf-text-inner,
.cf-text-middle {
  fill: #ccc;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-weight: 500;
  letter-spacing: -0.065em;
  pointer-events: none;
  text-anchor: middle;
}
a.cofKey {
    position: relative;
    z-index: 1000;
}
a .cf-text-inner,
a .cf-text-middle {
  fill: #f33183;
}
a.active .cf-text-inner,
a.active .cf-text-middle {
  fill: #fff;
}
.cf-text-inner {
  font-size: 10px;
  font-weight: bold;
    }
.cf-text-middle {
  font-size: 18px;
  font-weight: bold;
}

/* Flat and Sharp Positions */
.cf-flat-1 {
  transform: translate(10px, -2.5px);
}
.cf-flat-2 {
  transform: translate(13px, -7.5px);
}
.cf-flat-3 {
  transform: translate(16px, -1px);
}
.cf-flat-4 {
  transform: translate(19px, -5.5px);
}
.cf-flat-5{
  transform: translate(22px, 1px);
}
.cf-sharp-1 {
  transform: translate(10px, -7.5px);
}
.cf-sharp-2 {
  transform: translate(13px, -3px);
}
.cf-sharp-3 {
  transform: translate(16px, -9px);
}
.cf-sharp-4 {
  transform: translate(19px, -4.5px);
}
.cf-sharp-5 {
  transform: translate(22px, 0.5px);
}
.cf-sharp-6{
  transform: translate(25px, -6px);
}

.cf use {
  pointer-events: none;
}
.cf [baseline-shift="super"] {
  font-size: 80%;
}



#content #nav ul.nav > li > strong, #content #nav ul.nav > li > a {
	color: #fff!important;
}

#content #nav ul.nav li ul li a:hover {
	color:#f33183!important;
}