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

/*  general  */
    /*   use: color: rgb(var(--sc_blue));  */
    :root {
      --sc_blue: 59,119,153; 
      --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_30: 30,30,30;
      --sc_background_40: 40,40,40;
    }
	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) rgb(15,15,15); 
        scrollbar-width: thin;
    }
	body,div,tr,td,select,textarea,input,option {
        font-family:  'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        font-size: 15.4px;
    }
	form { 
        padding:0; margin:0; 
    }
	img { 
        border: none; 
    }
	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;
    }
    .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;  
    }
    input, textarea, select {
        margin: 1px; 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);
    }
    #sclk_saveBtn {
        margin-top: 25px;
    }
    
    /* input buttons */
	.btnSubmit {
        background: rgba(0,87,130,0.8) !important; 
        color: rgb(255,255,255) !important; 
        width: 120px; 
        padding: 5px;
        border: none; 
        cursor: pointer;
        display: flex;
        align-items: baseline; justify-content: center;
        box-sizing: border-box;
        -webkit-appearance: none;
    }
    .btnSubmit:hover {
        background: rgba(0,87,130,1) !important; 
    }
    .btnSubmit.btnSubmit_bigger {
        height: 45px;
        display: flex;
        align-items: center;
        margin: 10px 0;
        font-size: 19px;
        border-radius: 5px;
        width: 100%;
    }
    .btnSubmit_inactive {
        background: rgba(50,50,50,1.00); 
        color: rgb(140,140,140); 
        width: 120px; 
        padding: 5px;
        border:none; 
        display: flex;
        align-items: baseline; justify-content: center;
        box-sizing: border-box;
        -webkit-appearance: none;
    }
	.btnCancel {
        background: rgba(50,50,50,1.00); 
        color: rgb(140,140,140); 
        width: 120px; 
        padding: 5px;
        margin: 0 0 0 30px;
        border:none; 
        display: flex;
        align-items: baseline; 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); 
        width: 120px; 
        padding: 5px;
        border:none; 
        display: flex;
        align-items: baseline; 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;
    }
    
    .sclkArtistAdmin2_songEdit_sliders div.sliderLabels {
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
    }
    .sclkArtistAdmin2_songEdit_sliders div.sliderLabels div {
        font-size: 14px;
        opacity: 0.9;
    }
    .sclkArtistAdmin2_songEdit_sliders:hover div.sliderLabels div {
        font-size: 14px;
        opacity: 1;
        color: rgb(var(--sc_primary_text));
    }
    

    /* visuals */
    .sclk_bigNumbers {
        font-size: 36px;
    }
    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;
    }
    
    /* line break in any display:flex setup */
    .break {
      flex-basis: 100%;
      height: 0;
      justify-content: center;
    }
    
    /* PAYPAL smart buttons */
    #smart-button-container {
        max-width: 360px;
    }
    
		
/* toggle button */
    .toggleBox {display: flex; align-items: center; }
    .toggleBox input[type=checkbox]{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% - 1px); transform: translateX(-100%);}
    .toggleBox .labelBox:active:after {width:26px;}
    
	
/* ajax */
	.ajaxLoading {
        text-align:center; 
        padding:15px; 
        font-size:17px; 
        opacity:0.4; 
        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:1200px) {
        #sclk_pageHead #sclk_pageTitle { font-size: 65px; }
    }
    @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;
        -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_shadow {
        z-index: 9002; 
        position: fixed; 
        top: 0; bottom: 0; right: 0; left: 0; 
        background: rgba(0,0,0,0.7); 
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
        display:none; opacity: 0;
    }
    #popupBox {
        z-index: 9003; 
        position: fixed;
        top: 0; bottom: 0; right: 0; left: 0; 
        overflow-x: hidden; overflow-y: auto; 
        background: rgb(30,30,30); 
        /* -webkit-overflow-scrolling: touch;  to ensure smooth momentum scrolling on ios (was jittery before) */
        transition: .4s linear;
        display: none;
    }
    #popupBox_closeBtn {
        z-index: 9004;
        position: fixed;
        top: 0; right: 0;
        padding: 15px;
        font-size: 17px;
        color: white;
        background: black;
        cursor: pointer;
        opacity: 0.9;
        display: none;
    }
	#popupBox #dialog {
		padding: 20px;
	}
	#popupBox #dialog #text {
		margin: 0 auto 30px;
		text-align: center;
		font-size: 18px;
	}
	#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;
	}
    
    /* media */
    @media (min-width:601px) {    /* desktop version */
        #popupBox {
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);    /* center fixed position */
            width: 600px; height: 600px;
            max-width: 100vW; max-height: 100%;
            border: solid 2px rgb(22,22,22);
            border-radius: 8px;
        }
    }
    @media (max-width:600px) {    /* mobile version */
        #popupBox { width: 90vW !important; margin: auto;  }
        #popupBox.fullsizeMobile { width: 100vW !important; height: 100vH !important; }
    }
    


/* *********************************
	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 {
        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 {
        font-size: 12px;
        opacity:0; 
        transition: 0.2s ease-out;
        cursor: pointer;
    }
    .sidebar_commentBox:hover .sidebar_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; 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: 800px;
        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;
    }
    #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 .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;
    }