/* *********************************
	Main elements
***********************************/	

/*  general  */
    /*   use: color: rgb(var(--sc_blue));  */
    :root {
      --sc_blue: 59,119,153; 
	  --sc_blue_bright_2: 93,144,175;
      --sc_blue_bright: 65,131,168;
      --sc_blue_intense: 0,87,130;
      --sc_blue_link: 97,164,201,0.8;
      --sc_primary_text: 255,255,255;
      --sc_primary_background: 0,0,0;
      --sc_secondary_background: 20,20,20;
	  --sc_background_25: 25,25,25;
      --sc_background_30: 30,30,30;
	  --sc_background_35: 35,35,35;
      --sc_background_40: 40,40,40;
	  --sc_background_50: 50,50,50;
	  --sc_background_60: 60,60,60;
	  --sc_red_background: 201,30,33;
	  --sc_green_background: 45, 115, 45;
    }
	
	html {
	  font-size: 10px;
	}

	body {
        padding: 0;  margin:0; 
        background: rgb(0,0,0); color: rgba(255,255,255,0.8);
        scrollbar-color: dark;
        scrollbar-track-color: rgb(15,15,15);
        scrollbar-face-color: rgb(35,35,35);
        scrollbar-arrow-color: rgb(15,15,15);
        scrollbar-color: rgb(35,35,35); 
        scrollbar-width: thin;
    }
	
	::-webkit-scrollbar { width: 10px; background: rgb(var(--sc_secondary_background)); background: none; }
	::-webkit-scrollbar-track { background: rgb(var(--sc_secondary_background)); background: none; }
	::-webkit-scrollbar-thumb {border-radius: 6px; background-color: rgb(40,40,40); }
	::-webkit-scrollbar-corner { background: rgb(var(--sc_secondary_background)); background: none; opacity: 0.5;}
	
	body,div,tr,td,select,textarea,input,option {
        font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        font-size: 1.54rem;
    }
	form { 
        padding:0; margin:0; display: contents;
    }
	img { 
        border: none; 
    }
	h1,h2,h3,h4,h5,h6 {
		margin: 0;
		padding: 0;
		font-weight: normal;
		font-size: 100%;
	}
	.lazybg {
		background-image: none !important;
	}
	a, a:link, a:visited { 
        color: rgba(97,164,201,0.8); 
        text-decoration:none; 
        cursor: pointer;
    }
    a:hover { 
        color: rgba(97,164,201,1); 
        text-decoration: underline; 
    }
    #sclk_framework_content {
        touch-action: manipulation;
    }
    .textAsLink {
        color: rgba(97,164,201,0.8); 
        cursor: pointer;
    }
    .textAsLink:hover {
        color: rgba(97,164,201,1); 
        text-decoration: underline; 
    }
    .linkAsText {
      color: rgba(255,255,255,0.8) !important;
      text-decoration: none !important;
	  cursor: pointer;
    }
    .linkAsText:hover {
      color: rgba(255,255,255,1) !important;  
    }
    .linkAsTextColor {
      color: rgba(255,255,255,0.8) !important;
      cursor: pointer;
    }
    .linkAsTextColor:hover {
      color: rgba(255,255,255,1) !important;  
    }
	.linkTextUnderline {
      color: rgb(var(--sc_primary_text)) !important;
      cursor: pointer;
    }
	.linkTextUnderline:hover {
      text-decoration: underline;
    }
    .linkAsTextColor:hover {
      color: rgba(255,255,255,1) !important;  
    }
	.clk_loadPlaylist {
		cursor: pointer;
	}
    .sclk_button_blue {
        background: rgba(var(--sc_blue),0.9) !important;
        color: white !important;
    }
    .sclk_button_blue:hover {
        background: rgba(var(--sc_blue),1) !important;
    }
    .sclk_button_gray {
        background: rgb(45,45,45) !important;
        color: rgba(255,255,255,0.7) !important;
    }
    .sclk_button_gray:hover {
        background: rgb(55,55,55) !important;
    }
	.sclk_button_grayActive {
        background: rgb(80,80,80) !important;
        color: rgba(255,255,255,0.9) !important;
    }
    .sclk_button_grayActive:hover {
        background: rgb(90,90,90) !important;
    }
	.sclk_button_red {
        background: rgb(var(--sc_red_background)) !important;
        color: rgba(255,255,255,0.8) !important;
    }
    .sclk_button_red:hover {
    	color: rgba(255,255,255,1) !important;
    }
	.sclk_button_white {
        background: rgba(255,255,255,0.85) !important;
        color: rgb(0,0,0) !important;
    }
    .sclk_button_white:hover {
		background: rgb(255,255,255) !important;
    }
	@media (max-width: 600px) {
    	.sclk_button_white { background: rgb(255,255,255) !important; font-weight: 500; }
    }
    input, textarea, select {
		box-sizing: border-box;
		max-width: 92vw;
        margin: 1px 0; padding: 2px; 
        border-spacing: 0;
        border: solid 1px rgb(60,60,60);
        background: rgb(50,50,50);
        color: rgb(210,210,210);
    }
    input:focus, textarea:focus, select:focus {
        outline: none;
        border: solid 1px rgb(80,80,80);
        background: rgb(60,60,60);
        color: rgb(240,240,240);
    }
	input[type="text"][readonly] {
	   opacity: 0.5;
	}
	.ui-autocomplete {
		z-index: 9003; /* for jquery autocomplete */
	}
    #sclk_saveBtn {
        margin-top: 25px;
    }
	
	ol, ul {
		margin: 0 20px 5px 20px;
		padding: 0 20px 5px 20px;
	}
	@media (max-width: 600px) {
    	ol, ul { margin: 0 10px 5px 10px; padding: 0 10px 5px 10px; }
    }
    
    /* for mobile: hide elements that are dektop-only (optional: show alternative instead) */
	@media (max-width: 600px) {
        .sclk_desktopOnly { display: none; }
        .sclk_mobileOnly { display: block; }
		.sclk_mobileOnly_flex { display: flex; }
		.sclk_mobileOnly_grid { display: grid; }
    }
    @media (max-width: 500px) {
        .sclk_noMobile_500 { display: none; }
        .sclk_mobile_500 { display: inline-block; }
    }
	
	/* for CF dump */
	table.cfdump_struct td {
		background-color: rgb(237 156 3) !important;
    	color: rgb(40, 40, 40);
	}
    
    /* input buttons */
	.btnSubmit {
        background: rgba(var(--sc_blue_intense), 0.8); 
        color: rgb(255,255,255); 
        min-width: 130px;
		height: 32px;
		border-radius: 4px; 
        padding: 0 10px;
        border: none; 
        cursor: pointer;
        display: flex;
        align-items: center; justify-content: center;
        box-sizing: border-box;
        -webkit-appearance: none;
		white-space: nowrap;
    }
    .btnSubmit:hover {
        background: rgba(var(--sc_blue_intense), 1);
    }
	.btnSubmit.btnSubmit_callToAction {
		min-width: auto;
		padding: 0 15px;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.7px;
		white-space: nowrap;
		text-transform: uppercase;
		color: rgba(255,255,255,0.9);
	}
	.btnSubmit.btnSubmit_callToAction:hover {
		color: rgba(255,255,255,1);
	}
	.btnSubmit.btnSubmit_callToAction i {
		margin-right: 8px;
	}
    .btnSubmit.btnSubmit_bigger, .btnSubmit_inactive.btnSubmit_bigger {
        height: 45px;
        display: flex;
        align-items: center;
        margin: 10px 0;
        font-size: 19px;
        border-radius: 5px;
        width: 100%;
    }
	.btnSubmit_hidden {
		display: none;
	}
    .btnSubmit_inactive {
        background: rgba(50,50,50,1.00); 
        color: rgb(140,140,140); 
        min-width: 130px;
		height: 32px;
		border-radius: 4px; 
        padding: 0 10px;
        border:none; 
        display: flex;
        align-items: center; justify-content: center;
        box-sizing: border-box;
        -webkit-appearance: none;
    }
	.btnCancel {
        background: rgba(50,50,50,1.00); 
        color: rgb(140,140,140); 
        min-width: 130px;
		height: 32px;
		border-radius: 4px; 
        padding: 0 10px;
        margin: 0 0 0 30px;
        border:none; 
        display: flex;
        align-items: center; justify-content: center;
        box-sizing: border-box;
        -webkit-appearance: none;
        cursor: pointer;
    }
    .btnCancel:hover {
        background: rgb(60,60,60);
        color: rgb(240,240,240); 
    }
    .btnLowkey {
        background: rgba(50,50,50,1.00); 
        color: rgb(140,140,140); 
        min-width: 130px;
		height: 32px;
		border-radius: 4px; 
        padding: 0 10px;
        border:none; 
        display: flex;
        align-items: center; justify-content: center;
        box-sizing: border-box;
        -webkit-appearance: none;
        cursor: pointer;
    }
    .btnLowkey:hover {
        background: rgb(60,60,60);
        color: rgb(240,240,240); 
    }
    .btnMobileBig {
        background: rgba(0,87,130,1.00) !important; 
        background:rgb(var(--sc_blue_intense)) !important; 
        color: rgb(255,255,255) !important; 
        padding: 5px;
        margin: 10px auto;
        width: 94vw;
        height: 42px;
        font-size: 17px;
        border-radius: 5px;
        display: block;
        border: none; 
        cursor: pointer;
        -webkit-appearance: none;
    }
    @media (max-width:600px) {
       .btnSubmit, .btnSubmit_inactive, .btnCancel { margin: 0 5px 5px 5px; }
       /*select { -webkit-appearance: none; }*/
    }
	::placeholder { 
        color: rgb(140,140,140);
    }
	:-ms-input-placeholder {
        color: rgb(140,140,140);
    }
	::-ms-input-placeholder {
        color: rgb(140,140,140);
    }  
    .sclk_link, .clk_openFancy, .clk_openFancyHeight {
        cursor: pointer;
    }
    
    /* sliders (like song edit > character) */
    input.sclk_slider[type=range] {
        -webkit-appearance: none;
        width: 100%;
        height: 5px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 5px;
        background: rgb(50,50,50);
        outline: none;
        transition: .2s;
    }
    
    input.sclk_slider[type=range]:hover {
        background: rgb(60,60,60);
    }
    input.sclk_slider[type=range]:hover::-webkit-slider-thumb {
        width: 17px;
        height: 17px;
        border-radius: 8.5px;
    }
    
    input.sclk_slider[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 7.5px;
        background: rgb(114,178,213);
        cursor: pointer;
        transition: .2s;
    }
    input.sclk_slider[type=range]::-moz-range-thumb {
        width: 15px;
        height: 15px;
        border-radius: 7.5px;
        background: rgb(114,178,213);
        cursor: pointer;
    }
    
    .sclk_sliderBox div.sliderLabels {
        padding: 8px 0;
        display: flex;
        justify-content: space-between;
    }
    .sclk_sliderBox div.sliderLabels div {
        font-size: 14px;
        opacity: 0.9;
        transition: 0.2s;
    }
    .sclk_sliderBox:hover div.sliderLabels div {
        font-size: 14px;
        opacity: 1;
        color: rgb(var(--sc_primary_text));
    }
    .sclk_sliderBox div span {
        font-size: 13px;
        opacity: 0.6;
        padding: 3px;
    }
    
    .clk_openPopupBox {
        cursor: pointer;
    }
    
    /* long field ellipsis */
    .sclk_ellipsis {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
    }

    /* visuals */
    .sclk_bigNumbers {
        font-size: 36px;
    }
	.sclk_bigNumbers_31 {
		font-size: 31px;
		margin-right: 11px;
	}
    span.sclk_bigNumbers {
        font-size: 36px;
        padding: 0 10px;
    }
    i.greenCheck {
        color: rgba(0,204,0,1.00);
        width: 22px;
        text-align: center;
    }
    i.redX {
        color: rgba(204,0,0,1.00);
        width: 22px;
        text-align: center;
    }
    i.grayMinus {
        color: rgba(120,120,120,1.00);
        width: 22px;
        text-align: center;
    }
	.sclk_new_feature {
		display: inline;
		position: absolute;
		margin-left: 7px;
		padding: 0 3px;
		border-radius: 3px;
		background: red;
		color: white;
		font-size: 10px;
		font-weight: 500;
	}
	.sclk_new_feature.menuNav {
		left: 26px;
		top: 35px;
		z-index: 2;
		opacity: 0.85; 
	 }   
	.sclk_new_feature_small {
		font-size: 13px !important;
		display: initial;
		vertical-align: super;
		background: rgba(var(--sc_red_background));
	}
    .break {  /* line break in any display:flex setup */
      flex-basis: 100%;
      height: 0;
      justify-content: center;
    }
	
	/* SC CONNECT */
	.sc_connectBtn {
		height: 28px;
		min-width: 28px;
		box-sizing: border-box;
		padding: 0 3px;
		color: rgba(var(--sc_primary_background),0.9) !important;
		background: rgba(var(--sc_primary_text),0.85);
		border: solid 1px rgb(15,15,15);
		border-radius: 5px;
		display: inline-flex; align-items: center; justify-content: center; gap: 7px;
		font-size: 12px;
		font-weight: 300;
		letter-spacing: -0.6px;
	}
	.sc_connectBtn font {
		display: contents;
		color: red;
	}
	.sc_connectBtn_bigger {
		font-size: 16px;
	}
	a.sc_connectBtn:hover, .sc_connectBtn_bigger:hover {
		color: rgba(var(--sc_primary_background),1) !important;
		background: rgba(var(--sc_primary_text),1);
		text-decoration: none;
		cursor: pointer;
	}
	
	.sc_connect_big {
		background: rgba(var(--sc_primary_text),0.9);
		margin-left: 10px; 
		padding: 0 7px; 
		font-size: 22px; 
		opacity: 0.9;
	}
	.sc_connect_short {
		font-size: 11px;
		min-width: 0;
		width: 22px;
		height: 14px;
		border-radius: 3px;
		color: rgba(var(--sc_primary_background), 0.95) !important;
		background: rgba(var(--sc_primary_text), 0.8);
		margin: 0 7px 0 0;
		padding: 0;
	}
    
    /* PAYPAL smart buttons */
    #smart-button-container {
        max-width: 360px;
    }
	
	/* STRIPE checkout button */
	#checkout_stripe_button { position: relative; font-size: 21px;  }
	#checkout_stripe_button div { position: absolute; right: 14px; padding-top: 4px; height: 18px; }
	#checkout_stripe_button div img { height: 100%; } 
	#checkout_stripe_button #btnApplePay { padding-left: 2px; opacity: 0.65; }
	#checkout_stripe_button:hover #btnApplePay { opacity: 0.75; }
    
		
/* toggle button */
    .toggleBox {display: flex; flex-flow: wrap; align-items: center;}
    .toggleBox input[type=checkbox]{height:0; width:0; visibility:hidden; display:none;}
	.toggleBox input[type=radio]{height:0; width:0; visibility:hidden; display:none;}
    .toggleBox .labelBox {text-indent: -9999px; width:36px; height:20px; flex-shrink: 0; background:grey; display:inline-block; border-radius:18px; position:relative;}
    .toggleBox .labelBox:after {content:''; position:absolute; top:1px; left:1px; width:18px; height:18px; background:#fff; border-radius: 18px; transition: 0.3s;}
    .toggleBox input:checked + .labelBox {background:#4dc44d;}
    .toggleBox input:checked + .labelBox:after {left: calc(100% - 18px); /*transform: translateX(-100%);*/}
    .toggleBox .labelBox:active:after {width:20px;}
    
	
/* ajax */
	.ajaxLoading {
        text-align:center; 
        padding: 5px 5px 40px 5px; 
        font-size: 22px; 
        opacity: 0.6; 
        display: none;
    }
    /* to have manual alternative for crawler like Google */
    .ajaxManual {
        display: flex; align-items: center; justify-content: center;
        height: 80px;
    }
    .ajaxManual span {
        padding: 20px;
    }
    
/* whole page 'processing' */
    #form_processing_wrapper {
        display:flex; align-items: center; justify-content: center;
        padding-top: 100px;
    }
    #form_processing {
        display: grid; grid-row-gap: 30px;
        text-align: center;
    }
    #form_processing_icon {
        font-size: 80px; color: rgb(70,141,210); font-weight: bold;
    }
    #form_processing_text {
        font-size: 20px;
        opacity: 0.6;
    }
	
/* footer */
	.footerDiv {
        display:none; 
        width:1200px; 
        margin-left:auto; margin-right:auto; padding:40px 0 10px 0; 
        color:#6f6f6f;
    }
    
/* scroll to top */
    #scrollToTop {
        position: fixed;
        bottom: 98px; right: 20px;
        z-index: 1000;
        cursor: pointer;
        display: none;
    }
    #scrollToTop_button {
        display: flex; align-items: center; justify-content: center;
        height: 45px; width: 45px;
        border-radius: 3px;
        background: rgb(250,250,250); color: rgb(90,90,90);
        font-size: 22px;
    }
    #scrollToTop_button:hover {
        background: rgb(255,255,255); color: rgb(60,60,60);
    }


/* success results in popups */
    #popup_done_status {
        display: flex; align-items: center; justify-content: center;
        min-height: 250px; min-width: 300px;
        font-size: 17px;
        padding: 10px;
        background: rgb(35,35,35);
    }
    

/* back button on top of pages (like the 'back' button in the app */
    .back_button_like_app {
        font-size: 19px;
    }

    
/* *********************************
	PAGE HEAD
***********************************/  
    #sclk_pageHead {
        position: relative; z-index: 1;
        display: flex; justify-content: center;
        align-items: center;
        width: 100%; 
        height: 31vw;
        min-height: 350px; max-height: 600px;
        background-color: rgba(30,30,30,1.00); background-position: center center; background-size: cover;
        background-image: linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(60,60,60,1) 100%);
        color: rgba(255,255,255,1.00);
    }
    #sclk_pageHead #sclk_pageTitle {
        position: absolute;
        bottom: 0; 
        margin: auto; padding-bottom: 85px;
        box-sizing: border-box;
        height: 80%; max-width: 98%;
        display: flex;
        align-items: flex-end;
        text-align: center;
        font-size: 80px;
        font-weight: 700;
        filter: drop-shadow(3px 3px 9px rgb(35,35,35));
        z-index: 2;
    }
    #sclk_pageHead_fader {
        position: absolute;
        top:0; right:0; bottom:0; left:0;
        z-index: 1;
        background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.4) 65%,rgba(0,0,0,1) 100%);
    }

    
    /* input forms in any page_header */
    #sclk_pageHead input, #sclk_pageHead textarea, #sclk_pageHead select {
        border: rgba(220,220,220,1.00) solid 1px;
        background: rgb(245,245,245);
        color: rgb(60,60,60);
    }
    
    /* search page */
    #sclk_pageTitleInput {
        position: absolute;
        bottom: 100px;
        z-index: 2;
        visibility: hidden;
    }
    #sclk_pageTitleInput #search-description {
        bottom: 90px;
    }
    .clk_showSearchBox i {
        font-size: 19px;
        margin-left: 15px;
        cursor: pointer;
        opacity: 0.8;
    }
    .clk_showSearchBox:hover i {
        opacity: 1;
    }
    
    /* media */
    @media (max-width: 1400px) {
        #sclk_pageHead #sclk_pageTitle { font-size: 55px; }
    }
    @media (max-width:900px) {
        #sclk_pageHead #sclk_pageTitle { font-size: 50px; padding-bottom: 70px; } 
    }
    @media (max-width:600px) {
        #sclk_pageHead #sclk_pageTitle { font-size: 35px; }
    }
	

/* *********************************
	IMAGE OPTIMIZATION
***********************************/ 
    .img_enhance {
        filter: brightness(1.1) saturate(1.2);
    }
	
    
/* *********************************
	HORIZONTAL SCROLL (scroll colors for dark mode)
***********************************/ 
	.scrolling-wrapper-center::before, .scrolling-wrapper-center::after {
	  content: '';  /* Insert pseudo-element */
	  margin: auto; /* Make it push flex items to the center, while the scoller flex can keep its flex-start */
	}
    .scrolling-wrapper {
        display: flex;
        flex-wrap: nowrap;
		justify-content: flex-start;
        overflow-x: auto;
		overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* to ensure smooth momentum scrolling on ios (was jittery before) */
    }
    .scroll-item {
        flex: 0 0 auto;
    }
    .scrolling-wrapper::-webkit-scrollbar {width:10px; background:rgb(20,20,20);}
    .scrolling-wrapper::-webkit-scrollbar-track {background-color:rgb(20,20,20);}
    .scrolling-wrapper::-webkit-scrollbar-thumb {border-radius:8px; background-color:rgb(30,30,30);}

    
/* *********************************
	POP-UP BOX
***********************************/ 
	#popupBox_wrapper {
		z-index: 9003; 
		position: fixed;
        top: 0; bottom: 0; right: 0; left: 0; 
		display: flex;
		align-items: center; justify-content: center;
		background: rgba(var(--sc_primary_background),0.7); 
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
		display: none;
	}
    #popupBox {
        z-index: 9004; 
		position: relative;
        overflow-x: hidden; overflow-y: auto; 
        background: rgb(var(--sc_background_30)); 
        /* -webkit-overflow-scrolling: touch;  to ensure smooth momentum scrolling on ios (was jittery before) */
        display: none;
		transition: height 0.4s ease-in-out;
    }
	#popupBox_body {
		padding: 20px 20px 50px 20px;
	}
    #popupBox_closeBtn {
        z-index: 9005;
        position: fixed;
        top: 10px; right: 10px;
		display: flex; align-items: center; justify-content: center;
		height: 34px; width: 34px;
		border-radius: 17px;
        font-size: 17px;
        color: rgba(var(--sc_primary_text),0.9); 
        background: rgba(var(--sc_primary_background),0.6); 
        cursor: pointer;
    }
	#popupBox_closeBtn:hover {
        color: rgb(var(--sc_primary_text)); 
        background: rgb(var(--sc_primary_background)); 
    }
	
	/* poupBox dialog box (confirm) */
	#popupBox #dialog {
		padding: 20px;
	}
	#popupBox #dialog #text {
		margin: 0 auto 30px;
		text-align: center;
		font-size: 18px;
	}
	#popupBox #dialog #note {
		margin: 0 auto 30px;
		text-align: center;
		font-size: 13px;
		opacity: 0.45;
	}
	#popupBox #dialog .emoji { 
		width: 100%;
		margin: 0 auto 30px ;
		display: flex;
  		justify-content: center;
	}
	#popupBox #dialog #buttons { 
		width: 80%;
		margin: 0 auto 30px ;
		display: flex;
  		justify-content: center;
		gap: 20px;
	}
	
	/* poupBox standard grid */
	#popupBox #popupGrid {
		padding: 20px 20px 40px 20px;
		display: grid;
		grid-row-gap: 20px;
	}
	#popupBox #popupGrid.popUpGrid_centered div {
		display: flex;
		justify-content: center;
	}
	#popupBox #popupGrid .bigIcon {
		font-size: 45px;
		opacity: 0.4;
	}
	#popupBox #popupGrid .bigText {
		font-size: 17px;
	}
    
    /* media */
    @media (min-width: 601px) {    /* desktop version (default dimensions are overwritten by script) */
        #popupBox {
            width: 600px; height: 600px;
            max-width: 100vW; max-height: 100%;
            border: solid 2px rgb(var(--sc_background_30));
            border-radius: 8px;
        }
    }
    @media (max-width: 600px) {    /* mobile version (add !important to overwrite jquery generated dimensions) */
        #popupBox { width: 90vW !important; margin: auto;  }
        #popupBox.fullsizeMobile { 
			width: 100vw !important;
			height: 100% !important;
			position: fixed;
			top: 0; right: 0; bottom: 0; left: 0;
			overflow-y: auto;	
			background: rgba(var(--sc_primary_background),1);
		}
    }
  
 /* *********************************
	POP-UP BOX VARIATION (LIKE SC CONNECT)
***********************************/ 
	#popupBox_header_darker {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 15px 20px 25px 20px;
		background: rgba(var(--sc_primary_background),0.6);
	}
	#popupBox_header_darker .popHead1 {
		display: flex;
		align-items: center;
		font-size: 24px;
		font-weight: 300;
		max-width: 100%; overflow: hidden; white-space: nowrap;
		text-overflow: ellipsis;
		color: rgba(var(--sc_primary_text),0.9);
	}
	#popupBox_header_darker .popHead2 {
		font-size: 14px;
		max-width: 100%; overflow: hidden; white-space: nowrap;
		text-overflow: ellipsis;
		color: rgba(var(--sc_primary_text), 0.4);
	}
	
	/* icons to explain (like on SC CONNECT) */
	#popupBox_instructionsIcons_box {
		display: flex;
		flex-wrap: nowrap;
		gap: 30px;
		justify-content: center;
		margin: 0 auto 30px auto;
	}
	#popupBox_instructionsIcons_box div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: 14px; 
	}
	#popupBox_instructionsIcons_box span {
		font-size: 14.5px;
		opacity: 0.9;
	}
	#popupBox_instructionsIcons_box i {
		font-size: 35px;
	}
	#popupBox_instructionsIcons_box i.smaller {
		font-size: 22px;
		opacity: 0.5;
	}
	
	/* text description to explain */
	.popupBox_instructions_box {
		margin: 0 auto 20px auto;
		padding: 10px;
		border-radius: 8px;
		background: rgba(var(--sc_primary_text),0.1);
	}
	.popupBox_instructions_box ul {
		padding: 10px 0 10px 20px;
		padding: 10px 0 0 20px;
	}
	.popupBox_instructions_box ul li {
		padding: 4px 0;
	}
	
	/* simliar box with lists only, no other background */
	.popupBox_listedItems_box {
		margin: 0 auto 20px auto;
		padding: 10px;
	}
	.popupBox_listedItems_box ul {
		padding: 10px 0 10px 20px;
		padding: 10px 0 0 20px;
	}
	.popupBox_listedItems_box ul li {
		padding: 4px 0;
	}

/* *********************************
	SIDE BAR  (shopping cart, comments)
***********************************/ 
    #sidebarShadow {
        position: fixed; 
        top: 0; bottom: 0; right: 0; left: 0; 
        background: rgba(0,0,0,0.7); 
        z-index: 9002; 
        display:none; opacity: 0;
    }
	#sidebarBox {
        position: fixed; 
        width: 400px; 
        padding: 0; 
        top: 0; right: -405px; bottom: 0; 
        z-index: 9003; 
        overflow-x: hidden; overflow-y: auto; 
        background: rgba(45,45,47,1); 
        box-shadow: 3px 0 12px 3px rgba(25,25,35,0.06), inset -1px 0 0 rgb(55,55,55);
        -webkit-overflow-scrolling: touch; /* to ensure smooth momentum scrolling on ios (was jittery before) */
    }
    
    /* media */
    @media (max-width:600px) {
        #sidebarBox { width: 100vW; right: -100vW; }
    }
    
    /* headline w/ close button */
    #sidebarBox_headline {
        display: flex; align-items: center; justify-content: space-between;
        padding: 20px;
        font-size: 20px;
        background: rgb(24,24,24);
        color: rgb(180,180,180);
    }
    #sidebarBox_closeBtn {
        font-size: 20px;
        opacity: 0.6; 
        cursor: pointer;
    }
    #sidebarBox_closeBtn:hover {
        opacity: 1;
    }
    
    
/* *********************************
	SIDE BAR - COMMENTS
***********************************/ 
    .sidebar_comments_stickyTop {
        position: -webkit-sticky; position: sticky; top: 0;
        height: 130px;
        background: rgb(24,24,24);
        transition: 0.3s ease-out;
        z-index: 1;
    }
    #sidebar_comments_headline {
        font-size: 21px;
    }
    #sidebar_comments_count {
        margin-left: 20px; 
        opacity: 0.7;
        font-size: 15.5px;
    }
    #sidebar_comments_postForm {
        display: flex; align-items: center;
        padding-left: 20px;
    }
    .sidebar_newComment {
        width: 300px; height: 20px;
        padding: 4px;
        transition: 0.3s ease-out;
    }
    .sidebar_comments_submitDiv {
        display: none;
    }
    
    /* inside - listed comments boxes */
    #sidebar_commentsList_wrapper {
        margin-top: 20px;
    }
    .sidebar_commentBox {
		position: relative;
        display: grid; 
        grid-template-columns: 40px 1fr 12px;
        grid-column-gap: 15px;
        margin: 5px 0; padding: 15px 5px 15px 10px;
        background: rgba(47,47,49,1); 
        transition: 0.15s;
    }
    .sidebar_commentBox:hover {
        background: rgba(55,55,57,1); 
    }
    
    /* approval */
    .sidebar_comment_notApproved {
        padding: 10px;
        background: rgba(65,65,67,1); 
        background: rgb(var(--sc_blue));
        text-align: center;
    }
    .sidebar_comment_notApproved div {
        font-size: 14px;
        padding-bottom: 5px;
    }
    .sidebar_comment_notApproved div i {
        padding-right: 10px;
        color: rgb(255, 144, 132);
    }
    .sidebar_comment_notApproved span {
        font-size: 14px;
        padding: 0 5px;
    }
    
    /* inside - regular comments box */
    .sidebar_comment_picture {
        width: 40px; height: 40px;
        border-radius: 20px;
        background-size: cover; background-position:center center; background-repeat: no-repeat;
    }
    .sidebar_comment_head {
        display: flex; align-items: baseline;
    }
    .sidebar_comment_name {
        font-weight: 600;
        font-size: 16px;
    }
    .sidebar_comment_date {
        padding-left: 20px;
        font-size: 12px;
        opacity: 0.6;
    }
    .sidebar_comment_songtitle {
        padding: 2px 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
        font-size: 12px;
        color: rgb(255,255,255,0.5);
    }
    .sidebar_comment_comment {
        padding-top: 8px;
        line-height: 17px; 
        word-break: break-word; white-space: pre-wrap;
    }
    .sidebar_comment_delete {
		position: absolute;
		right: 16px;
		top: 16px;
        font-size: 12px;
        opacity:0; 
        transition: 0.2s ease-out;
        cursor: pointer;
    }
    .sidebar_commentBox:hover .sidebar_comment_delete {
        opacity: 1;
    }


/* *********************************
	COMMENTS (NEW VERSION 2023)
***********************************/ 
	
	/* header section */
	#sclk_comments_disabled {
		padding: 50px 0; 
		text-align: center;
	}
	#sclk_comments_disabled #sclk_comments_closeBtn {
		position: absolute; 
		top: 40px; 
		right: 30px;
	}
	#sclk_comments_logIn a {
		padding: 0 4px;
	}
	#sclk_comments_header {
		display: flex; justify-content: space-between; align-items: baseline;
		margin-bottom: -10px;
	}
    #sclk_comments_header_text {
		font-size: 21px;
    }
    #sclk_comments_header_count {
        margin-left: 20px; 
        opacity: 0.7;
        font-size: 15.5px;
    }
	#sclk_comments_closeBtn {
		opacity: 0.7;
		font-size: 17px;
		cursor: pointer;
	}
	#sclk_comments_closeBtn:hover {
		opacity: 1;
	}
	#sclk_comments_closeBtn i {
		width: auto !important;
		margin: 0;
	}
    #sclk_comments_postForm {
        display: grid;
		grid-template-columns: 1fr 20px;
		grid-column-gap: 20px;
		align-items: end;
		margin-bottom: -10px;
    }
    #sclk_comments_postForm textarea {
		width: 100%;
		padding: 7px;
		border-radius: 5px;
		background: rgba(var(--sc_primary_text),0.1);
		border: solid 1px rgba(var(--sc_primary_text),0.08);
    }
	#sclk_comments_postForm textarea.textarea_transparent {
		background: rgba(var(--sc_primary_text),0.05);
	}
	#sclk_comments_postForm textarea:focus {
        outline: none;
        border: solid 1px rgba(var(--sc_primary_text),0.12);
		background: rgba(var(--sc_primary_text),0.22);
    }
	.sclk_comments_signature_box {
		text-align: right;
		display: none;
	}
	.sclk_comments_signature {
		margin: 10px 0 0 0;
		padding: 4px 5px;
		border-radius: 5px;
		font-size: 14px;
    }
	#sclk_comments_postForm input[type=submit] {
		min-width: 100%;
		margin: 0;
		background: rgba(var(--sc_primary_text),0.05);
		border: solid 1px rgba(var(--sc_primary_text),0.1);
	}
	.sclk_comments_submit {
		display: none;
	}
	.sclk_comments_submitBtn {
		width: 26px;
		height: 26px;
		border-radius: 13px;
		display: flex;
    	align-items: center; justify-content: center;
		background: rgb(var(--sc_blue));
		cursor: pointer;
	}
	.sclk_comments_submitBtn i {
		font-size: 12px;
		width: 12px !important;
		height: 12px !important;
		margin: 0 !important;
		padding: 0 !important;
		color: rgba(255,255,255,0.8);
	}
	.sclk_comments_submitBtn:hover i {
		color: rgba(255,255,255,1);
	}

    
    /* inside - listed comments boxes */
    #sclk_commentsList_wrapper {
        margin-top: 20px;
    }
    .sclk_commentBox {
		position: relative;
        display: grid; 
        grid-template-columns: 40px 1fr;
        grid-column-gap: 15px;
        margin: 5px 0; padding: 15px 5px 15px 10px;
        background: rgba(var(--sc_primary_text),0.06);
    	border-radius: 5px;
        transition: 0.15s;
    }
    .sclk_commentBox:hover {
        background: rgba(var(--sc_primary_text),0.08);
    }
    
    /* approval */
    .sclk_comment_notApproved {
        padding: 10px;
        background: rgba(var(--sc_blue_bright),0.35);
    	border-radius: 8px 8px 0 0;
        text-align: center;
    }
    .sclk_comment_notApproved div {
        font-size: 14px;
        padding-bottom: 5px;
    }
    .sclk_comment_notApproved div i {
        padding-right: 10px;
        color: rgb(255, 144, 132);
    }
    .sclk_comment_notApproved span {
        font-size: 14px;
        padding: 0 5px;
    }
    
    /* inside - regular comments box */
    .sclk_comment_picture {
        width: 40px; height: 40px;
        border-radius: 20px;
        background-size: cover; background-position:center center; background-repeat: no-repeat;
    }
    .sclk_comment_head {
        display: flex; align-items: baseline;
    }
    .sclk_comment_name {
        font-weight: 600;
        font-size: 16px;
    }
    .sclk_comment_date {
        padding-left: 20px;
        font-size: 12px;
        opacity: 0.6;
    }
    .sclk_comment_songtitle {
        padding: 2px 0;
		max-width: 70vw;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
        font-size: 12px;
        color: rgb(var(--sc_primary_text),0.5);
    }
    .sclk_comment_comment {
        padding-top: 8px;
        line-height: 22px; 
        word-break: break-word; white-space: pre-wrap;
    }
    .sclk_comment_delete {
		position: absolute;
		right: 16px;
		top: 16px;
        font-size: 12px;
        opacity:0; 
        transition: 0.2s ease-out;
        cursor: pointer;
    }
    .sclk_commentBox:hover .sclk_comment_delete {
        opacity: 1;
    }
	
	
/* *********************************
    PHOTO GALLERIES
***********************************/
    .sclk_photoGallery {
        display: flex; flex-wrap: wrap;
        width: 99vW; max-width: 100%;
        margin: 0 auto;
    }
    
    /* picture box */
    .sclk_photoGallery .photobox {
        box-sizing: border-box;
        width: 25%;
        padding: 3px;
        position: relative;
    }
    .sclk_photoGallery .photobox div {
        color: rgba(255,255,255,0.9);
        filter: drop-shadow(1px 1px 5px rgb(35,35,35));
    }
    .sclk_photoGallery .picture {
        width: 100%;
        height: 0; padding-bottom: 100%; /* makes it square */
        background-size: cover; background-position:center center; background-repeat: no-repeat;
        background-color: rgb(0,0,0);
        cursor: pointer;
    }
    
    /* layover */
    .sclk_photoGallery    .photobox .layover {
        position: absolute;
        top:0; right:0; bottom:0; left:0;
        background-color: rgba(0,0,0,0.5);
        z-index: 1;
        opacity: 0;
        transition: 0.15s ease-in-out;
    }
    .sclk_photoGallery    .photobox:hover .layover {
        opacity: 1;
    }
    .sclk_photoGallery    .photobox .layover span {
        position: absolute;
        top: 19px; right: 5px;
        font-size: 18.5px;
        opacity: 0.9;
        cursor: pointer;
    }
    .sclk_photoGallery    .photobox .layover i {
        margin: 0 8px;
    }
    .sclk_photoGallery    .photobox .layover .photoTitle {
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
        font-size: 18.5px;
    }
    
    /* media */
    @media (max-width:600px) {
        .sclk_photoGallery .photobox { width: 50%; padding: 2px; }
        .sclk_photoGallery .photobox:hover .layover { display: none; }
    }
    
 
 /* *********************************
	VIDEOS
***********************************/
    #sclk_videoBox {
        /*width: 66vW; */
		width: auto;
		max-width: 1040px;
        height: 37vW; max-height: 585px; /* 16:9 ratio format*/
        margin: 0 auto;
        background-size: cover; background-position:center center; background-repeat: no-repeat;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        position: relative;
    }
    #sclk_video_dummyPic {
        display: none; /* to test if img src is available */
    }
    #sclk_video_title {
        position: absolute;
        top: 10px; left: 10px;
        width: 90%;
        font-size: 18px; font-weight: 500;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        filter: drop-shadow(3px 3px 9px rgb(35,35,35));
    }
    #sclk_video_youtubePlayBtn {
        height: 48px; width: 68px;
        background-size: contain; background-position:center center; background-repeat: no-repeat;
        background-image: url('/images/brand/otherBrands/yt_icon_mono_light.png');
    }
    #sclk_videoBox:hover #sclk_video_youtubePlayBtn {
        background-image: url('/images/brand/otherBrands/yt_icon_rgb.png');
    }
    
    /* media */
    @media (max-width:900px) {
        #sclk_videoBox { width: 85vW; height: 48vW; }
    }
    @media (max-width:600px) {
        #sclk_video_youtubePlayBtn { background-image: url('/images/brand/otherBrands/yt_icon_rgb.png'); }
    }
    
    #sclk_videoBox.sclk_videoBlogs {
        max-width: 770px;
        max-height: 450px;
        margin: 20px auto;
    }
    #sclk_video_vimeoPlayer {
        width: 100%; 
        height: 100%;
    }
 
 
 /* *********************************
	TAG CLOUD (song info and artist - about)
***********************************/
    .tagCloud2 {
        display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly;
    }
    .tagCloud2 .cloudItem {
        padding: 2px; margin: 1px 3px;
        white-space: nowrap; 
        text-decoration: none;
    }
    .tagCloud2 .cloudItem:hover {
        color: rgb(255,255,255);
        background: rgb(0,87,130); 
        background: rgb(var(--sc_blue_intense));
    }
    .tagCloud2 .cloudS10 {font-size: 13.5px; color: rgb(95,95,95); }
    .tagCloud2 .cloudS20 {font-size: 14px; color: rgb(95,95,95);}
    .tagCloud2 .cloudS30 {font-size: 14.5px; color: rgb(100,100,100); }
    .tagCloud2 .cloudS40 {font-size: 15px; color: rgb(110,110,110); }
    .tagCloud2 .cloudS50 {font-size: 16px; color: rgb(120,120,120); }
    .tagCloud2 .cloudS60 {font-size: 17px; color: rgb(130,130,130); }
    .tagCloud2 .cloudS70 {font-size: 18px; color: rgba(140,140,140); }
    .tagCloud2 .cloudS80 {font-size: 20px; color: rgba(160,160,160); }
    .tagCloud2 .cloudS90 {font-size: 22.5px; color: rgba(170,170,170); }
    .tagCloud2 .cloudS100 {font-size: 25px; color: rgba(180,180,180); }
 
  
 /* *********************************
	PLAYLIST PAGE
***********************************/
    .playlistPageWrapper {
        margin: 40px 0; 
        background: rgb(12,12,12);
    }
    .playlistPageWrapper .playlistWrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .playlistPageWrapper .playlist_search {
        margin: 0 auto;
        padding: 50px 0;
        display: flex;
        justify-content: center;
        background-color: rgb(20, 20, 20);
    }
    .playlistPageWrapper .playlist_header {
        padding: 15px;
        font-size: 25px;
        color: rgba(255,255,255,0.90);
    }
    .playlistPageWrapper .playlistBox {
        margin: 15px 5px;
    }
    @media (max-width:600px) {
        .playlistPageWrapper .playlist_search {padding: 30px 0;}
    }
 

 /* *********************************
	BOTTOM SHEET
***********************************/

     #sclk_framework_sheet {
        z-index: 9001; /* sclk_navigation has 9000 */
        position: fixed;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        left: 0px;
        top: 100%;
        width: 100%;
        height: 100%;
        height: -webkit-fill-available;
		display: none;
    }
    #sclk_framework_sheet .content { 
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;;
    }
    #sclk_framework_sheet #level1, #sclk_framework_sheet #level2, #sclk_framework_sheet #level3 {
        position: fixed;
        left: 100%;
        top: 125%;
        width: 100%;
        height: 100%;
        background-color: black;
        overflow-x: hidden;
        overflow-y: auto;
        touch-action: manipulation;
    }
    #sclk_framework_sheet #level1_content, #sclk_framework_sheet #level2_content, #sclk_framework_sheet #level3_content  {
         position: sticky;
     }
    #sclk_framework_sheet #level1 {
        left: 0;
        z-index: 1;
    }
    #sclk_framework_sheet #level2 {
        z-index: 2;
    }
    #sclk_framework_sheet #level3 {
        z-index: 3;
    }
	#sclk_framework_sheet #level1 del {
		text-decoration: line-through;
		text-decoration-color: red;
		text-decoration-thickness: 3px;
		font-size: 18px;
		margin: 0 8px 0 5px;
    	opacity: 0.72;
	}
	#sclk_framework_sheet #level1 .discountedPrice {
	    font-size: 11px;
		opacity: 0.5;
		padding: 6px 0 0 9px;
	}
    #sclk_framework_sheet .sheetNav {
        z-index: 4;
        position: absolute;
        top: 0;
        height: 25px;
        width: 100vW;
        padding: 15px;
        font-size: 25px;
        --fa-primary-color: rgb(255,255,255); /* custom property font-awesome */
        --fa-secondary-color: rgb(0,0,0); /* custom property font-awesome */
        --fa-secondary-opacity: 0.7;
    }
    #sclk_framework_sheet .sheetNav_lowerLevel {
        z-index: 4;
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        height: 25px;
        width: 100vW;
        padding: 15px 15px 10px 15px;
        background: black;
        font-size: 19px;
    }
    
    

 /* *********************************
	BOTTOM SHEET PLAYLIST
***********************************/

    #playlistForm #playlistEntry {
        display: grid; 
        grid-template-columns: 1fr 65px; 
        margin: 0 10px;
    }
    #playlistForm #playlistTitle {
        height: 32px;
        margin: auto 2px;
        border-radius: 5px;
        padding: 4px;
        font-size: 17px;
        background: rgb(255,255,255);
        color: black;
    }
    #playlistCheckmark {
        display: table; 
        margin: 70px auto 20px;
    }
    #playlistCheckmark_sub {
        margin: 0 auto 50px;
        display: table;
        font-size: 17px;
        font-weight: 500;
        color: rgb(250,250,250);
    }
    #playlistAdded_action {
        display: grid; 
        grid-template-columns: 80px 1fr; 
        margin: 0 10px;
    }
    #playlistAdded_action #close {
        width: 70px;
        color: black !important;
        background: rgb(250,250,250) !important;
    }
    #playlistAdded_action #goTo {
        width: -webkit-fill-available;
    }
	
 /* *********************************
	MUSIC STORE
***********************************/	
	.discount {
		text-decoration: line-through;
		text-decoration-color: red;
		text-decoration-thickness: 2px;
		margin-right: 5px;
		opacity: 0.7;
	}
	.discountedPrice {
		font-size: 11px;
		opacity: 0.5;
	}