:root {

/********************************************
	UNIVERSAL STYLE  
********************************************/

	--pageheader-background: rgba(255,255,255,0.2);
		/*linear-gradient(135deg, rgba(255,255,255,1) 28%, rgba(255,255,255,0.2) 28% 100%);*/
		/*ORIG: linear-gradient(135deg, rgba(255,255,255,1) 28%, rgba(255,255,255,0.2) 28% 73%, rgba(255,255,255,1) 73%); */

	--pagefooter-background: rgba(255,255,255,0.2);
	/* ORIG: linear-gradient(135deg, rgba(255,255,255,1) 28%, rgba(255,255,255,0.2) 28% 73%, rgba(255,255,255,1) 73%); */
	/* linear-gradient(135deg, rgba(255,255,255,1) 35%,  rgba(102,180,255,0.1) 0%, rgba(255,255,255,0.01) 52%, rgba(20,180,210,0.1) 70%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%); 

	linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 11%), linear-gradient(180deg, rgba(03,36,89,1) 10%, rgba(43,76,129,0.4) 84%, rgba(255,255,255,0.1) 300%), 
	linear-gradient(90deg, rgba(03,36,89,.8) 40%, rgba(43,76,129,0.1) 104%, rgba(255,255,255,0.1) 200%)	*/

	--navfooter-background: rgba(255, 255, 255, 0.05); 

	--pagelogo-background: rgba(var(--theme-rgb-primary-1000), 0);
    /* rgba(255, 255, 255, 0.1); */
	/*linear-gradient(180deg, rgba(03,36,89,1) 0%, rgba(43,76,129,0.4) 84%, rgba(255,255,255,0.1) 100%)*/


/********************************************
	CUSTOM STYLE 
********************************************/	
/* dark: 0.75, darker: 0.50, darkest: 0.25 */
		
	--dark-shade-100: 0.9; 
	--dark-shade-200: 0.8; 
	--dark-shade-300: 0.7; 
	--dark-shade-400: 0.6; 
	--dark-shade-500: 0.5; 
	--dark-shade-600: 0.4;
	--dark-shade-700: 0.3;
	--dark-shade-800: 0.2;
    --dark-shade-900: 0.1;
	
	--light-shade-100: 1.1; 
	--light-shade-200: 1.2; 
	--light-shade-300: 1.3; 
	--light-shade-400: 1.4; 
	--light-shade-500: 1.5; 
	--light-shade-600: 1.6;
	--light-shade-700: 1.7;
	--light-shade-800: 1.8;
	--light-shade-900: 2;	
    --gray-black: 30, 30, 30;

	--bg-base-rgb: var(--bg-base-red), var(--bg-base-green), var(--bg-base-blue);
	--bg-base2-rgb: var(--bg-base2-red), var(--bg-base2-green), var(--bg-base2-blue);

	--bg-base-rgb-light-shade-100: calc(var(--bg-base-red) * var(--light-shade-100)), calc(var(--bg-base-green) * var(--light-shade-100)), calc(var(--bg-base-blue) * var(--light-shade-100));
	--bg-base-rgb-light-shade-200: calc(var(--bg-base-red) * var(--light-shade-200)), calc(var(--bg-base-green) * var(--light-shade-200)), calc(var(--bg-base-blue) * var(--light-shade-200));
	--bg-base-rgb-light-shade-300: calc(var(--bg-base-red) * var(--light-shade-300)), calc(var(--bg-base-green) * var(--light-shade-300)), calc(var(--bg-base-blue) * var(--light-shade-300));
	--bg-base-rgb-light-shade-400: calc(var(--bg-base-red) * var(--light-shade-400)), calc(var(--bg-base-green) * var(--light-shade-400)), calc(var(--bg-base-blue) * var(--light-shade-400));
	--bg-base-rgb-light-shade-500: calc(var(--bg-base-red) * var(--light-shade-500)), calc(var(--bg-base-green) * var(--light-shade-500)), calc(var(--bg-base-blue) * var(--light-shade-500));
	--bg-base-rgb-light-shade-600: calc(var(--bg-base-red) * var(--light-shade-600)), calc(var(--bg-base-green) * var(--light-shade-600)), calc(var(--bg-base-blue) * var(--light-shade-600));
	--bg-base-rgb-light-shade-700: calc(var(--bg-base-red) * var(--light-shade-700)), calc(var(--bg-base-green) * var(--light-shade-700)), calc(var(--bg-base-blue) * var(--light-shade-700));
	--bg-base-rgb-light-shade-800: calc(var(--bg-base-red) * var(--light-shade-800)), calc(var(--bg-base-green) * var(--light-shade-800)), calc(var(--bg-base-blue) * var(--light-shade-800));
	--bg-base-rgb-light-shade-900: calc(var(--bg-base-red) * var(--light-shade-900)), calc(var(--bg-base-green) * var(--light-shade-900)), calc(var(--bg-base-blue) * var(--light-shade-900));

	--bg-base-rgb-dark-shade-100: calc(var(--bg-base-red) * var(--dark-shade-100)), calc(var(--bg-base-green) * var(--dark-shade-100)), calc(var(--bg-base-blue) * var(--dark-shade-100));	
	--bg-base-rgb-dark-shade-200: calc(var(--bg-base-red) * var(--dark-shade-200)), calc(var(--bg-base-green) * var(--dark-shade-200)), calc(var(--bg-base-blue) * var(--dark-shade-200));
	--bg-base-rgb-dark-shade-300: calc(var(--bg-base-red) * var(--dark-shade-300)), calc(var(--bg-base-green) * var(--dark-shade-300)), calc(var(--bg-base-blue) * var(--dark-shade-300));
	--bg-base-rgb-dark-shade-400: calc(var(--bg-base-red) * var(--dark-shade-400)), calc(var(--bg-base-green) * var(--dark-shade-400)), calc(var(--bg-base-blue) * var(--dark-shade-400));
	--bg-base-rgb-dark-shade-500: calc(var(--bg-base-red) * var(--dark-shade-500)), calc(var(--bg-base-green) * var(--dark-shade-500)), calc(var(--bg-base-blue) * var(--dark-shade-500));
	--bg-base-rgb-dark-shade-600: calc(var(--bg-base-red) * var(--dark-shade-600)), calc(var(--bg-base-green) * var(--dark-shade-600)), calc(var(--bg-base-blue) * var(--dark-shade-600));
	--bg-base-rgb-dark-shade-700: calc(var(--bg-base-red) * var(--dark-shade-700)), calc(var(--bg-base-green) * var(--dark-shade-700)), calc(var(--bg-base-blue) * var(--dark-shade-700));
	--bg-base-rgb-dark-shade-800: calc(var(--bg-base-red) * var(--dark-shade-800)), calc(var(--bg-base-green) * var(--dark-shade-800)), calc(var(--bg-base-blue) * var(--dark-shade-800));	

	--bg-base2-rgb-light-shade-100: calc(var(--bg-base2-red) * var(--light-shade-100)), calc(var(--bg-base2-green) * var(--light-shade-100)), calc(var(--bg-base2-blue) * var(--light-shade-100));
	--bg-base2-rgb-light-shade-200: calc(var(--bg-base2-red) * var(--light-shade-200)), calc(var(--bg-base2-green) * var(--light-shade-200)), calc(var(--bg-base2-blue) * var(--light-shade-200));
	--bg-base2-rgb-light-shade-300: calc(var(--bg-base2-red) * var(--light-shade-300)), calc(var(--bg-base2-green) * var(--light-shade-300)), calc(var(--bg-base2-blue) * var(--light-shade-300));
	--bg-base2-rgb-light-shade-400: calc(var(--bg-base2-red) * var(--light-shade-400)), calc(var(--bg-base2-green) * var(--light-shade-400)), calc(var(--bg-base2-blue) * var(--light-shade-400));
	--bg-base2-rgb-light-shade-500: calc(var(--bg-base2-red) * var(--light-shade-500)), calc(var(--bg-base2-green) * var(--light-shade-500)), calc(var(--bg-base2-blue) * var(--light-shade-500));
	--bg-base2-rgb-light-shade-600: calc(var(--bg-base2-red) * var(--light-shade-600)), calc(var(--bg-base2-green) * var(--light-shade-600)), calc(var(--bg-base2-blue) * var(--light-shade-600));
	--bg-base2-rgb-light-shade-700: calc(var(--bg-base2-red) * var(--light-shade-700)), calc(var(--bg-base2-green) * var(--light-shade-700)), calc(var(--bg-base2-blue) * var(--light-shade-700));
	--bg-base2-rgb-light-shade-800: calc(var(--bg-base2-red) * var(--light-shade-800)), calc(var(--bg-base2-green) * var(--light-shade-800)), calc(var(--bg-base2-blue) * var(--light-shade-800));
	--bg-base2-rgb-light-shade-900: calc(var(--bg-base2-red) * var(--light-shade-900)), calc(var(--bg-base2-green) * var(--light-shade-900)), calc(var(--bg-base2-blue) * var(--light-shade-900));

	--bg-base2-rgb-dark-shade-100: calc(var(--bg-base2-red) * var(--dark-shade-100)), calc(var(--bg-base2-green) * var(--dark-shade-100)), calc(var(--bg-base2-blue) * var(--dark-shade-100));	
	--bg-base2-rgb-dark-shade-200: calc(var(--bg-base2-red) * var(--dark-shade-200)), calc(var(--bg-base2-green) * var(--dark-shade-200)), calc(var(--bg-base2-blue) * var(--dark-shade-200));
	--bg-base2-rgb-dark-shade-300: calc(var(--bg-base2-red) * var(--dark-shade-300)), calc(var(--bg-base2-green) * var(--dark-shade-300)), calc(var(--bg-base2-blue) * var(--dark-shade-300));
	--bg-base2-rgb-dark-shade-400: calc(var(--bg-base2-red) * var(--dark-shade-400)), calc(var(--bg-base2-green) * var(--dark-shade-400)), calc(var(--bg-base2-blue) * var(--dark-shade-400));
	--bg-base2-rgb-dark-shade-500: calc(var(--bg-base2-red) * var(--dark-shade-500)), calc(var(--bg-base2-green) * var(--dark-shade-500)), calc(var(--bg-base2-blue) * var(--dark-shade-500));
	--bg-base2-rgb-dark-shade-600: calc(var(--bg-base2-red) * var(--dark-shade-600)), calc(var(--bg-base2-green) * var(--dark-shade-600)), calc(var(--bg-base2-blue) * var(--dark-shade-600));
	--bg-base2-rgb-dark-shade-700: calc(var(--bg-base2-red) * var(--dark-shade-700)), calc(var(--bg-base2-green) * var(--dark-shade-700)), calc(var(--bg-base2-blue) * var(--dark-shade-700));

	--bg-base-red-stepdown40: calc( (var(--bg-base-red) - 40)  * var(--dark-shade-300) );
	--bg-base-green-stepdown40: calc( (var(--bg-base-green) - 40)  * var(--dark-shade-300) ); 
	--bg-base-blue-stepdown40: calc( (var(--bg-base-blue) - 40)  * var(--dark-shade-300) ); 
	--bg-base-green-stepdown20: calc( (var(--bg-base-green) - 20)  * var(--dark-shade-300) ); 
	--bg-base-blue-stepdown20: calc( (var(--bg-base-blue) - 20)  * var(--dark-shade-300) ); 

    --bg-base-stepdn-40-20-20: var(--bg-base-red-stepdown40), var(--bg-base-green-stepdown20), var(--bg-base-blue-stepdown20);
    --bg-base-stepdn-40-40-20: var(--bg-base-red-stepdown40), var(--bg-base-green-stepdown40), var(--bg-base-blue-stepdown20);
    --bg-base-stepdn-40-40-40: var(--bg-base-red-stepdown40), var(--bg-base-green-stepdown40), var(--bg-base-blue-stepdown40);
    --bg-base-stepdn-40-20-40: var(--bg-base-red-stepdown40), var(--bg-base-green-stepdown20), var(--bg-base-blue-stepdown40);
    --bg-base-stepdn-20-40-40: var(--bg-base-red-stepdown20), var(--bg-base-green-stepdown40), var(--bg-base-blue-stepdown40);

	--theme-rgb-primary-1000: calc( var(--theme-r-primary-900) * var(--dark-shade-100)), calc(var(--theme-g-primary-900) * var(--dark-shade-100)), calc(var(--theme-b-primary-900) * var(--dark-shade-100) );
	--theme-rgb-success-1000: calc( var(--theme-r-success-900) * var(--dark-shade-100)), calc(var(--theme-g-success-900) * var(--dark-shade-100)), calc(var(--theme-b-success-900) * var(--dark-shade-100) );
	--theme-rgb-info-1000: calc( var(--theme-r-info-900) * var(--dark-shade-100)), calc(var(--theme-g-info-900) * var(--dark-shade-100)), calc(var(--theme-b-info-900) * var(--dark-shade-100) );
	--theme-rgb-warning-1000: calc( var(--theme-r-warning-900) * var(--dark-shade-100)), calc(var(--theme-g-warning-900) * var(--dark-shade-100)), calc(var(--theme-b-warning-900) * var(--dark-shade-100) );	
	--theme-rgb-danger-1000: calc( var(--theme-r-danger-900) * var(--dark-shade-100)), calc(var(--theme-g-danger-900) * var(--dark-shade-100)), calc(var(--theme-b-danger-900) * var(--dark-shade-100) );	
	
	--theme-rgb-primary-1100: calc( var(--theme-r-primary-900) * var(--dark-shade-200)), calc(var(--theme-g-primary-900) * var(--dark-shade-200)), calc(var(--theme-b-primary-900) * var(--dark-shade-200) );
	--theme-rgb-success-1100: calc( var(--theme-r-success-900) * var(--dark-shade-200)), calc(var(--theme-g-success-900) * var(--dark-shade-200)), calc(var(--theme-b-success-900) * var(--dark-shade-200) );
	--theme-rgb-info-1100: calc( var(--theme-r-info-900) * var(--dark-shade-200)), calc(var(--theme-g-info-900) * var(--dark-shade-200)), calc(var(--theme-b-info-900) * var(--dark-shade-200) );
	--theme-rgb-warning-1100: calc( var(--theme-r-warning-900) * var(--dark-shade-200)), calc(var(--theme-g-warning-900) * var(--dark-shade-200)), calc(var(--theme-b-warning-900) * var(--dark-shade-200) );	
	--theme-rgb-danger-1100: calc( var(--theme-r-danger-900) * var(--dark-shade-200)), calc(var(--theme-g-danger-900) * var(--dark-shade-200)), calc(var(--theme-b-danger-900) * var(--dark-shade-200) );	
	
	--theme-rgb-primary-1200: calc( var(--theme-r-primary-900) * var(--dark-shade-300)), calc(var(--theme-g-primary-900) * var(--dark-shade-300)), calc(var(--theme-b-primary-900) * var(--dark-shade-300) );
	--theme-rgb-success-1200: calc( var(--theme-r-success-900) * var(--dark-shade-300)), calc(var(--theme-g-success-900) * var(--dark-shade-300)), calc(var(--theme-b-success-900) * var(--dark-shade-300) );
	--theme-rgb-info-1200: calc( var(--theme-r-info-900) * var(--dark-shade-300)), calc(var(--theme-g-info-900) * var(--dark-shade-300)), calc(var(--theme-b-info-900) * var(--dark-shade-300) );
	--theme-rgb-warning-1200: calc( var(--theme-r-warning-900) * var(--dark-shade-300)), calc(var(--theme-g-warning-900) * var(--dark-shade-300)), calc(var(--theme-b-warning-900) * var(--dark-shade-300) );	
	--theme-rgb-danger-1200: calc( var(--theme-r-danger-900) * var(--dark-shade-300)), calc(var(--theme-g-danger-900) * var(--dark-shade-300)), calc(var(--theme-b-danger-900) * var(--dark-shade-300) );	

	--theme-rgb-secondary: 80, 80, 80;
	--theme-rgb-black: 10, 10, 10;
	--theme-rgb-white: 220, 220, 225;
	
	
  /* Themed Glow Styles */
  
	--thin-glow:  0 0 0px 1px rgba(var(--bg-base-rgb), 0.5), /* inner color */
				0 0 2px 4px rgba(var(--bg-base-rgb), 0.2), /* middle */
				0 0 2px 7px rgba(var(--bg-base-rgb), 0.1); /* outer color */
				
	--medium-glow: 0 0 0px 2px rgba(var(--bg-base-rgb), 0.4), /* inner color */
				0 0 6px 6px rgba(var(--bg-base-rgb), 0.2), /* middle */
				0 0 14px 9px rgba(var(--bg-base-rgb), 0.2); /* outer */ 
				
/* --thick-glow */

/* Text Glow Styles */
 
	--text-glow-color: 255, 255, 255;
	--text-contrast-glow-color: var(--theme-rgb-warning-1100); /*0, 127, 187;*/

	--text-thinnest-glow: 0px 0px 3px rgba(var(--text-glow-color), 0.3), 0px 0px 3px rgba(var(--text-glow-color), 0.3);

	--text-thinner-glow: 0px 0px 4px rgba(var(--text-glow-color), 0.5), 0px 0px 4px rgba(var(--text-glow-color), 0.5), 0px 0px 4px rgba(var(--text-glow-color), 0.5);

	--text-thin-glow: 0px 0px 4px rgba(var(--text-glow-color), 1), 0px 0px 4px rgba(var(--text-glow-color), 1), 0px 0px 4px rgba(var(--text-glow-color), 1), 0px 0px 4px rgba(var(--text-glow-color), 1), 0px 0px 4px rgba(var(--text-glow-color), 1), 0px 0px 4px rgba(var(--text-glow-color), 1), 0px 0px 4px rgba(var(--text-glow-color), 1), 0px 0px 4px rgba(var(--text-glow-color), 1);
	
	/*--text-thin-contrast-glow: 0px 0px 4px rgba(var(--text-contrast-glow-color), 0.9), 0px 0px 4px rgba(var(--text-contrast-glow-color), 1), 0px 0px 4px rgba(var(--text-contrast-glow-color), 1), 0px 0px 4px rgba(var(--text-contrast-glow-color), 1), 0px 0px 4px rgba(var(--text-contrast-glow-color), 1), 0px 0px 4px rgba(var(--text-contrast-glow-color), 1), 0px 0px 4px rgba(var(--text-contrast-glow-color), 1), 0px 0px 4px rgba(var(--text-contrast-glow-color), 0.9);*/
	/*--text-thinnest-contrast-glow: 0px 0px 3px rgba(var(--text-contrast-glow-color), 0.3), 0px 0px 3px rgba(var(--text-contrast-glow-color), 0.3);*/
    --text-thinner-contrast-glow: 0px 0px 4px rgba(var(--text-contrast-glow-color), 0.5), 0px 0px 4px rgba(var(--text-contrast-glow-color), 0.5), 0px 0px 4px rgba(var(--text-contrast-glow-color), 0.5);

	--text-medium-glow: 0px 0px 9px rgba(var(--text-glow-color), 1), 0px 0px 9px rgba(var(--text-glow-color), 1), 0px 0px 9px rgba(var(--text-glow-color), 1), 0px 0px 9px rgba(var(--text-glow-color), 1);

	--text-thick-glow: 0px 0px 18px rgba(var(--text-glow-color), 1), 0px 0px 18px rgba(var(--text-glow-color), 1), 0px 0px 18px rgba(var(--text-glow-color), 1), 0px 0px 18px rgba(var(--text-glow-color), 1), 0px 0px 18px rgba(var(--text-glow-color), 1), 0px 0px 18px rgba(var(--text-glow-color), 1), 0px 0px 18px rgba(var(--text-glow-color), 1); 
 
 	--text-horizontal-glow: 
		4px 0px 4px rgba(var(--text-glow-color), 1), 
		-4px 0px 4px rgba(var(--text-glow-color), 1), 

		8px 0px 10px rgba(var(--text-glow-color), 1), 
		8px 0px 10px rgba(var(--text-glow-color), 1), 
		8px 0px 10px rgba(var(--text-glow-color), 1), 	
		10px 0px 10px rgba(var(--text-glow-color), 1), 
		10px 0px 10px rgba(var(--text-glow-color), 1), 		
		-5px 0px 10px rgba(var(--text-glow-color), 1), 
		-5px 0px 10px rgba(var(--text-glow-color), 1);

	
 /* --text-thick-glow */
 
 
/* Border Styles */
	--semitransparent-border:  0 0 0px 5px rgba(var(--bg-base-rgb), 0.4); 

	--semitransparent-border-shiftright:  1px 0 0px 5px rgba(var(--bg-base-rgb), 0.4); 

	--pagesidebar-background: 
		linear-gradient(45deg, rgba(var(--bg-base-stepdn-40-20-20), 0.6) 9.2% 39%, rgba(var(--bg-base-rgb), 0.5) 60%, rgba(var(--bg-base-rgb), 0.6) 90%, rgba(var(--bg-base-rgb), 0.3)  100%),
		linear-gradient(90deg, rgba(var(--bg-base-stepdn-40-40-40), 0.9) 9%, rgba(var(--bg-base-stepdn-40-20-40), 0.7) 65%, rgba(var(--bg-base-stepdn-40-20-20), 0.3) 96%, rgba(var(--bg-base-stepdn-40-20-40), 0.1));


/* Button common styles */

	--btn-opacity-color-1: 1;
	--btn-opacity-gradient-1: 0.6;
	--btn-opacity-gradient-2: 0.05;

	--btn-hover-opacity-color-1: 1;
	--btn-hover-opacity-gradient-1: 0.7;
	--btn-hover-opacity-gradient-2: 0.05;

	--btn-transparency-color-1: 0.2;
	--btn-transparency-gradient-1: 0.3;
	--btn-transparency-gradient-2: 0.05;

	--btn-hover-transparency-color-1: 0.5;
	--btn-hover-transparency-gradient-1: 0.4;
	--btn-hover-transparency-gradient-2: 0.2;
	
	--btn-stop-gradient-1: 1%;
	--btn-stop-gradient-2: 25%;

	--btn-hover-stop-gradient-1: 1%;
	--btn-hover-stop-gradient-2: 45%;
	
	--btn-icon-stop-gradient-1: 1%;
	--btn-icon-stop-gradient-2: 40%;
	
	--theme-rgb-btn-color-primary-1: var(--theme-rgb-primary-900);
	--theme-rgb-btn-gradient-primary-1: var(--theme-rgb-info);
	--theme-rgb-btn-gradient-primary-2: var(--theme-rgb-primary-1100);
	--theme-rgb-btn-gradient-primary-3: var(--theme-rgb-info);

	--theme-rgb-btn-color-success-1: var(--theme-rgb-success-900);
	--theme-rgb-btn-gradient-success-1: var(--theme-rgb-danger);
	--theme-rgb-btn-gradient-success-2: var(--theme-rgb-success-1100);
	--theme-rgb-btn-gradient-success-3: var(--theme-rgb-danger);
	
	--theme-rgb-btn-color-info-1: var(--theme-rgb-info-900);
	--theme-rgb-btn-gradient-info-1: var(--theme-rgb-danger);
	--theme-rgb-btn-gradient-info-2: var(--theme-rgb-info-1100);
	--theme-rgb-btn-gradient-info-3: var(--theme-rgb-danger);
	
	--theme-rgb-btn-color-warning-1: var(--theme-rgb-warning-900);
	--theme-rgb-btn-gradient-warning-1: var(--theme-rgb-info);
	--theme-rgb-btn-gradient-warning-2: var(--theme-rgb-warning-1100);
	--theme-rgb-btn-gradient-warning-3: var(--theme-rgb-info);
	
	--theme-rgb-btn-color-danger-1: var(--theme-rgb-danger-900);
	--theme-rgb-btn-gradient-danger-1: var(--theme-rgb-info);
	--theme-rgb-btn-gradient-danger-2: var(--theme-rgb-danger-1100);
	--theme-rgb-btn-gradient-danger-3: var(--theme-rgb-info);
} 
/********************************************
* END of groot ;-) 
********************************************/

/* Some dropdowns are having transparent headers with this
.bg-brand-gradient {
	background: transparent; 
}*/

.page-wrapper {
	background: transparent; 
}

.page-content-wrapper {
	background: transparent !important; 
}

.page-content-wrapper .subheader {
	background: rgba(255, 255, 255, 0.65); 
	backdrop-filter: blur(5px);
	padding: 0.75em;
	border-radius: 5px;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
	text-shadow: var(--text-thick-glow);
}

.page-logo { 
	background: var(--pagelogo-background);
}

.nav-function-fixed .nav-footer {
	background: var(--navfooter-background);	
}

.page-header {
	background: var(--pageheader-background);
	backdrop-filter: blur(6px);	
}

.page-sidebar {
	background: var(--pagesidebar-background);
	backdrop-filter: blur(3px);	
	box-shadow: var(--thin-shadow);
}

.page-footer {
	background: var(--pagefooter-background); 
	backdrop-filter: blur(3px);
    color: rgb(var(--gray-black)) !important;
    text-shadow: var(--text-medium-glow);
}

.page-footer span, .page-footer a { color: rgb(var(--gray-black)) !important; }

.info-card img.cover {
	opacity: 1;
}

.page-header .header-icon .fal {
	/*TODO: border-radius: 50px; 
	background: var(--text-glow-color);*/
	text-shadow: var(--text-thick-glow), 0 0 4px white, 0 0 4px white, 0 0 3px white;
    color: rgb(calc(--theme-rgb-primary-1100));
}

.nav-footer .nav-footer-buttons .fal {
	text-shadow: var(--text-thinnest-glow);
}

.page-header .header-icon img  {
	box-shadow: 0 0 5px 2px rgba(var(--text-glow-color), 1);
}

.page-header .dropdown-icon-menu a {
	box-shadow: 0 0 5px 2px rgba(var(--text-glow-color), 1);
	background: rgba(255, 255, 255, 0.2);
}

.page-header .search #search-field {
	color: black;
	box-shadow: 0 0 2px 0px rgba(var(--text-glow-color), 1);
}

.page-header .search #search-field:hover {
	box-shadow: 0 0 3px 1px rgba(var(--text-glow-color), 1);
}

.page-header .search #search-field[placeholder] {
	color: black;
}

.page-content .page-breadcrumb {
	text-shadow: var(--text-thin-glow);
	background: rgba(255, 255, 255, 0.65); 
	backdrop-filter: blur(3px);
	padding-left: 0.75em;
	padding-right: 0.75em;
	border-radius: 3px;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.subheader .subheader-title, 
.subheader .subheader-title small,
.subheader .subheader-title .subheader-icon {
	text-shadow: var(--text-medium-glow);
	color: black!important;
}

.vcron-page-header {
    top: -54px;
    box-shadow: var(--thin-shadow);
    border-bottom-color: rgba(0, 223, 237, 1);
    border-bottom-width: 30px;
    transition: top 1s;
}

.vcron-page-header:hover {
    top: 0;
    border-bottom-width: 0;
}

.vcron-main-section {
    top: -50px
}

.vcron-titlebar-10 {
    background-color: rgba(255,255,255,0.5);
    border: 1px solid white;
    border-radius: 20px;
    line-height: 180%;
    padding: 0 26px 0 16px
}

.vcron-narrative-10 {
    overflow: auto;
    margin: 10px;
}

.vcron-narrative-10 h2 {
    font-size: 14pt !important;
}

.vcron-narrative-10 p {
    font-size: 12pt !important;
}

.vcron-narrative-10::-webkit-scrollbar-track {
    background: blue;
/* Not supported yet scrollbar-color: red yellow; */
}

.vcron-overflow-y { overflow-y: auto; }

.vcron-card-body-10-title { font-size: 20px; font-weight: 600; }

.vcron-card-body-10-subtitle { font-size: 16px; font-weight: 300; }

.vcron-card-body-10-header { font-size: 14px; font-weight: 300; }

.vcron-card-body-10-caption { font-size: 12px; }

.vcron-card-body-10-normal { font-size: 14px;  }

.vcron-card-body-10-small { font-size: 12px; }

/****************************************************
* APPLY  THEME TO OTHER UI COMPONENTS
*****************************************************/
/********************************************
*	START Panel UI
********************************************/
.panel { 
	background: transparent !important; 
	box-shadow: var(--thin-shadow);
}

.panel-hdr {
	color: rgb(var(--gray-black));
	background: 
		linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(var(--bg-base-rgb-light-shade-200), 0.1) , rgba(var(--bg-base-rgb-light-shade-200), 0.6) 99%, rgba(var(--bg-base2-rgb-light-shade-300), 0.95) 99%),
		linear-gradient(0deg, rgba(var(--bg-base-rgb-light-shade-300), 0.6) 3%, rgba(var(--bg-base-rgb-light-shade-200), 0.3) 20%);
		
	border-top: 1px solid rgba(255,255,255, 0.6);
	border-left: 1px solid rgba(255,255,255, 0.3);
	backdrop-filter: blur(3px);
	border-bottom-width: 0; /* overrides app.bundle.css */
    text-shadow: var(--text-thin-glow);
}

.panel-hdr:hover h1,
.panel-hdr:hover h2,
.panel-hdr:hover h3,
.panel-hdr:hover h4 /* We include h1, h2... to be specific to override */
{
    text-shadow: var(--text-thinner-contrast-glow);
    color: white !important;
    font-weight: normal
}

.panel-hdr.bandshaade {
    background-image: linear-gradient(180deg, rgba(var(--bg-base-rgb-light-shade-600), 0.8) 0.5%, 
		rgba(var(--bg-base-rgb-light-shade-200), 0.4),
		
			rgba(var(--bg-base-rgb-dark-shade-200), 0.5) 30%, 
				rgba(var(--bg-base-rgb-dark-shade-300), 0.7) 50% 60%, 
			rgba(var(--bg-base-rgb-dark-shade-100), 0.5) 80%,  
			
		rgba(var(--bg-base-rgb-light-shade-600), 0.5));
		
    background-color: rgba(var(--bg-base2-rgb), 0.5);
}

.panel-hdr.bandgloss {
	/*background-image: 
		linear-gradient(180deg, rgba(var(--bg-base-rgb-light-shade-200), 0.4) 1%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.9) 40% 54%, rgba(255, 255, 255, 0)),
		linear-gradient(180deg, rgba(255, 255, 255, 0.1) 70%, rgba( var(--bg-base-rgb-light-shade-200), 0.3), rgba( var(--bg-base-rgb-light-shade-500), 0.6)) ;*/
	background-color: rgba(var(--bg-base2-rgb), 0.4);
}

.panel .card { box-shadow: 0 0 0px 5px rgb(255 255 255 / 30%) } /* 3rd param defines solid shadow/border, no blur */

.panel-container {
	background: 
		linear-gradient(180deg, rgba(255, 255, 255, 0) 97%, rgba(var(--bg-base-rgb-light-shade-500), 0.2) 98.5%, rgba(var(--bg-base-rgb-light-shade-500), 0.8)), /* bottom gradient */
		linear-gradient(180deg, rgba(var(--bg-base-rgb-light-shade-300), 0.4) 10%, rgba(var(--bg-base-rgb-light-shade-200), 0.2) 40% 60%, rgba(var(--bg-base-rgb-light-shade-200), 0.4) 90%); /* side gradient */

	border-left: 1px solid rgba(255,255,255, 0.2);
}

.page-content .panel {
	border-bottom-width: 0  !important; /* overrides app.bundle.css */
}

.panel-content {
	/* Causes dropdown-menu to go under subsequently created panels
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(5px); */
	border-radius: 3px !important; 
	margin: 0 5px 15px;
    padding-left: 10px; padding-right: 10px;
    padding-bottom: 16px;
}

.frame-wrap {background: transparent }

.panel-tag { 
	border-radius: 0px; 
	backdrop-filter: blur(10px);
	background-color: #eef7fdef;
}

.panel.panel-locked:not(.panel-fullscreen) .panel-hdr h2:before {
    /* overrides app.bundle.css */
    text-shadow: none;
    color: lightgray;
}
.panel.lock-icon-hidden h2:before {
    /* overrides app.bundle.css */
    visibility: hidden;
}

/*.panel-toolbar.small-icon .btn-panel.js-panel-fullscreen, .panel-toolbar.small-icon .btn-panel[data-action=panel-fullscreen]*/
.tiny-toolbar-icon .panel-toolbar .btn-panel {
    /* overrides app.bundle.css */
    width: 10px;
    height: 10px;
}

/********************************************
*	END Panel UI
********************************************/
/***
*	START DropDown  Menu UI
***/
.dropdown-menu {
	/*background: rgba(255, 255, 255, 0.5) !important;*/
	background: linear-gradient( 330deg, rgba(var(--bg-base2-rgb-light-shade-400), 0.4) 10%, rgba(255, 255, 255, 0.3) 95%) !important;
	backdrop-filter: blur(10px) !important;
	box-shadow:  0 0 0px 6px rgba(var(--bg-base2-rgb-light-shade-300), 0.4), 4px 5px 10px rgba(100, 100, 100, 0.9); 
}

.dropdown-item.disabled {
	color: rgb(57, 57, 57);
	background-color: rgba(185,185,185, 0.9);
}	

.dropdown-menu .dropdown-header, .dropdown-menu .dropdown-divider {
	color: var(--theme-primary-900);
	background-color: rgba(var(--theme-rgb-primary-100), 0.4);
}

.dropdown-multilevel > .dropdown-menu {
	background-image: linear-gradient( 330deg, rgba(var(--bg-base2-rgb-light-shade-400), 0.8) 10%, rgba(255, 255, 255, 0.7) 95%) !important; 
	backdrop-filter: blur(5px) !important;
	border-radius: 3px;
	box-shadow:  0 0 0px 3px rgba(var(--bg-base2-rgb-light-shade-300), 0.5), 4px 5px 10px rgba(100, 100, 100, 0.9); 
}

.dropdown-item:hover {
	color: rgb(var(--bg-base-rgb-dark-shade-500));
	background: linear-gradient(120deg, rgba(var(--theme-rgb-primary-800), 0.3), rgba(255, 255, 255, 0.8) 98%); 
	box-shadow:  2px 2px 2px 2px rgba(100, 100, 100, 0.1); 
	/* causes menu items to jiggle
	border: 0px solid rgb(var(--bg-base2-rgb-dark-shade-100));
	border-width: 0 0 1px 0; */
}

.dropdown-multilevel > .dropdown-item:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 10%,  rgba(var(--bg-base-rgb-light-shade-700), 0.3)) !important; 
	color: white;
}

/********************************************
*	END DropDown  Menu UI
********************************************/

/********************************************
*	START Quick Menu UI
********************************************/
.vcron-menu-primary-10 .menu-header {
    background-color: rgba(var(--theme-rgb-success-1000), 0.95);
    border-radius: 20px 20px 0 0;
    padding-top: 0.5rem; padding-bottom: 0.5rem;
    font-size: 14px !important;
}

.vcron-menu-primary-10 li { background-color: rgba(var(--theme-rgb-primary-1000), 0.95) }

    .vcron-menu-primary-10 li.active { background-color: rgba(var(--theme-rgb-warning-1200), 0.8); backdrop-filter: blur(15px); }

.vcron-menu-primary-10 li a { padding-left: 10px !important; /*color: burlywood*/ }

/*.vcron-menu-primary-10 li.active > a { padding-left: 10px !important; box-shadow: inset 3px 0 0 #ffc241 !important; color: white }*/
/********************************************
*	END Quick Menu UI
********************************************/

/********************************************
*	START Misc UI
********************************************/
/********************************************
*	END Misc UI
********************************************/

/********************************************
*	START Minified Navigation UI
********************************************/
/* Flyout menu that controls background, also just below menu title*/
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul {
    padding-top: 3rem;  /* 3.75 orig */
    background: linear-gradient(180deg, rgba(var(--bg-base-rgb-dark-shade-200),1) 4%, rgba(var(--bg-base-rgb-dark-shade-200),0) 4%),
      /*For menu title */ linear-gradient(90deg, rgba(var(--bg-base-rgb-dark-shade-100), 0.5) 48%, rgba(255, 255, 255, 0.2)),
      linear-gradient(320deg, rgba(var(--bg-base2-rgb-dark-shade-100), 0.5), rgba(var(--bg-base-rgb-light-shade-100), 0.8), rgba(var(--bg-base-rgb-dark-shade-100), 0.8) 35%, rgba(var(--bg-base-rgb-dark-shade-100), 1) 75%);
    backdrop-filter: blur(5px); /* No effect: box-shadow:  */
    z-index: 2000;
}

/* Flyout menu that can cast a shadow*/
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > li:hover > ul {
	box-shadow: var(--semitransparent-border-shiftright), 7px 8px 12px rgba(100, 100, 100, 0.9);
}

/* Doesnt seem to work
Flyout menu item text 
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > .nav-link-text {
	color: red;
	padding: 1px 0 1px 0;
} */

/* For minified fly-out left call-out pointer */
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul:before { 
	/* box-shadow: glows div area not its symbol */
	/*background: rgba(var(--bg-base-rgb), 0.95)); */
	color: rgba(var(--bg-base-rgb-dark-shade-100), 0.95);
}


/* START For minified fly-out menu TITLE */
/*
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > li:hover > a > .nav-link-text {
	/inconsistent gap appears border-bottom: 1px solid rgba(var(--bg-base-rgb-light-shade-400), 0.3);/
}*/

/* orig: .nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a > .nav-link-text { */
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a > .nav-link-text:not(:last-child) {
	margin-top: -1.78rem;
	background: rgba(var(--bg-base-rgb-dark-shade-200), 1);
	height: 73%;
	color: rgb(var(--bg-base2-rgb-light-shade-100));
	border: 0px solid rgb(var(--bg-base2-rgb-dark-shade-100));
	border-width: 0 0 1px 0;	
}
/* Affects single item flyout menu
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > li:hover > a > .nav-link-text:last-child {
    background: #947505;
}*/
/* END For minified fly-out menu TITLE */

/* For highlighted menu item */
.nav-menu li > ul li a:hover {
    color: white;

	/* jiggles list: 
	border: 0px solid rgb(var(--bg-base2-rgb-dark-shade-100));
	border-width: 1px 0 1px 0; */
}


/********************************************
*	END Minified Navigation UI
********************************************/

/********************************************
*	START Page Sidebar Navigation UI
********************************************/
.mod-nav-link:not(.nav-function-top):not(.nav-function-minify):not(.mod-hide-nav-icons) ul.nav-menu:not(.nav-menu-compact) > li > ul:before {
    border-left: 1px solid #b12c6a;
}

.page-sidebar .nav-menu .fal {
	color: rgb(--var(--theme-warning));
}
/********************************************
*	END Page Sidebar Navigation UI
********************************************/

/********************************************
*	START Buttons
********************************************/

/* START Default styles */
.btn.btn-primary:not(.rounded-circle) {
	background-color: rgba(var(--theme-rgb-btn-color-primary-1), var(--btn-opacity-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-primary-1), var(--btn-opacity-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-primary-2), var(--btn-opacity-gradient-2)) var(--btn-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.6) .05%, rgba(255,255,255,0) 100%) !important;
}

.btn.btn-success:not(.rounded-circle) {
	background-color: rgba(var(--theme-rgb-btn-color-success-1), var(--btn-opacity-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-success-1), var(--btn-opacity-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-success-2), var(--btn-opacity-gradient-2)) var(--btn-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-success-3),0.6) .05%, rgba(255,255,255,0) 100%) !important;
}

.btn.btn-info:not(.rounded-circle) {
	background-color: rgba(var(--theme-rgb-btn-color-info-1), var(--btn-opacity-color-1)) !important; 
	background-image:linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-info-1), var(--btn-opacity-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-info-2), var(--btn-opacity-gradient-2)) var(--btn-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-info-3),0.6) .05%, rgba(255,255,255,0) 100%) !important;
}

.btn.btn-warning:not(.rounded-circle) {
	background-color: rgba(var(--theme-rgb-btn-color-warning-1), var(--btn-opacity-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-warning-1), var(--btn-opacity-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-warning-2), var(--btn-opacity-gradient-2)) var(--btn-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-warning-3),0.6) .05%, rgba(255,255,255,0) 100%) !important;
}

.btn.btn-danger:not(.rounded-circle) {
	background-color: rgba(var(--theme-rgb-btn-color-danger-1), var(--btn-opacity-color-1)) !important; 	
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-danger-1), var(--btn-opacity-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-danger-2), var(--btn-opacity-gradient-2)) var(--btn-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-danger-3),0.6) .05%, rgba(255,255,255,0) 100%) !important;
}

.btn.btn-secondary:not(.rounded-circle) {
	background-color: var(--theme-secondary);
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-info-1), var(--btn-opacity-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-info-2), var(--btn-opacity-gradient-2)) var(--btn-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-info-3),0.6) .05%, rgba(255,255,255,0) 100%) !important;
}

.btn.btn-dark:not(.rounded-circle) {
	background-color: rgb(var(--theme-rgb-black), 1);
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-primary-1), var(--btn-opacity-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-primary-2), var(--btn-opacity-gradient-2)) var(--btn-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.9) .05%, rgba(255,255,255,0) 100%) !important;
}

.btn.btn-light:not(.rounded-circle) {
	color: black;
	background-color: rgb(190, 190, 215, 1);
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-primary-1), var(--btn-opacity-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-primary-2), var(--btn-opacity-gradient-2)) var(--btn-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.9) .05%, rgba(255,255,255,0) 100%) !important;
}

.btn-default:not(.rounded-circle) {
	color: lightgray;
	background-color: rgb(190, 190, 215, 1);
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-primary-1), var(--btn-opacity-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-primary-2), var(--btn-opacity-gradient-2)) var(--btn-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.9) .05%, rgba(255,255,255,0) 100%) !important;
}

/* END Default styles */

/* START Hover styles */
.btn.btn-primary:not(.rounded-circle):hover {
	background-color: rgba(var(--theme-rgb-btn-color-primary-1), var(--btn-hover-opacity-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-primary-1), var(--btn-hover-opacity-gradient-1)) var(--btn-hover-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-primary-2), var(--btn-hover-opacity-gradient-2)) var(--btn-hover-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-primary-3),1) .05%, rgba(255,255,255,0) 120%) !important;
}

.btn.btn-success:not(.rounded-circle):hover {
	background-color: rgba(var(--theme-rgb-btn-color-success-1), var(--btn-hover-opacity-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-success-1), var(--btn-hover-opacity-gradient-1)) var(--btn-hover-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-success-2), var(--btn-hover-opacity-gradient-2)) var(--btn-hover-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-success-3),1) .05%, rgba(255,255,255,0) 120%) !important;
}

.btn.btn-info:not(.rounded-circle):hover {
	background-color: rgba(var(--theme-rgb-btn-color-info-1), var(--btn-hover-opacity-color-1)) !important; 
	background-image:linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-info-1), var(--btn-hover-opacity-gradient-1)) var(--btn-hover-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-info-2), var(--btn-hover-opacity-gradient-2)) var(--btn-hover-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-info-3),1) .05%, rgba(255,255,255,0) 120%) !important;
}

.btn.btn-warning:not(.rounded-circle):hover {
	background-color: rgba(var(--theme-rgb-btn-color-warning-1), var(--btn-hover-opacity-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-warning-1), var(--btn-hover-opacity-gradient-1)) var(--btn-hover-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-warning-2), var(--btn-hover-opacity-gradient-2)) var(--btn-hover-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-warning-3),1) .05%, rgba(255,255,255,0) 120%) !important;
}

.btn.btn-danger:not(.rounded-circle):hover {
	background-color: rgba(var(--theme-rgb-btn-color-danger-1), var(--btn-hover-opacity-color-1)) !important; 	
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-danger-1), var(--btn-hover-opacity-gradient-1)) var(--btn-hover-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-danger-2), var(--btn-hover-opacity-gradient-2)) var(--btn-hover-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-danger-3),1) .05%, rgba(255,255,255,0) 120%) !important;
}

.btn.btn-secondary:not(.rounded-circle):hover {
	background-color: var(--theme-secondary);
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-info-1), var(--btn-hover-opacity-gradient-1)) var(--btn-hover-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-info-2), var(--btn-hover-opacity-gradient-2)) var(--btn-hover-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-info-3),1) .05%, rgba(255,255,255,0) 120%) !important;
}

.btn.btn-dark:not(.rounded-circle):hover {
	background-color: rgb(var(--theme-rgb-black), 1);
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-primary-1), var(--btn-hover-opacity-gradient-1)) var(--btn-hover-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-primary-2), 0.1) var(--btn-hover-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-primary-3),1) .05%, rgba(255,255,255,0) 120%) !important;
}

.btn.btn-light:not(.rounded-circle):hover {
	color: black;
	background-color: rgb(var(--theme-rgb-white), 1);
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-btn-gradient-primary-1), var(--btn-hover-opacity-gradient-1)) var(--btn-hover-stop-gradient-1), rgba(var(--theme-rgb-btn-gradient-primary-2), 0.1) var(--btn-hover-stop-gradient-2)),
		radial-gradient(ellipse closest-side at 50% 96%, rgba(var(--theme-rgb-btn-gradient-primary-3),1) .05%, rgba(255,255,255,0) 120%) !important;
}
/* END Hover styles */

/* START Semi-transparent buttons */
.btn.btn-outline-primary {
	background-color: rgba(var(--theme-rgb-btn-color-primary-1), var(--btn-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-primary-1200), var(--btn-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-primary-1100), var(--btn-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
	backdrop-filter: blur(5px);
}
.btn.btn-outline-success {
	background-color: rgba(var(--theme-rgb-btn-color-success-1), var(--btn-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-success-1200), var(--btn-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-success-1100), var(--btn-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-info {
	background-color: rgba(var(--theme-rgb-btn-color-info-1), var(--btn-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-info-1200), var(--btn-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-info-1100), var(--btn-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-warning {
	background-color: rgba(var(--theme-rgb-btn-color-warning-1), var(--btn-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-warning-1200), var(--btn-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-warning-1100), var(--btn-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-danger {
	background-color: rgba(var(--theme-rgb-btn-color-danger-1), var(--btn-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-danger-1200), var(--btn-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-danger-1100), var(--btn-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-secondary {
	background-color: rgba(var(--theme-rgb-secondary),0.3) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-secondary), var(--btn-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-secondary), var(--btn-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-dark {
	background-color: rgba(var(--theme-rgb-black), 0.3) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-black), 0.4) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-black), 0.2) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-light {
	background-color: rgba(var(--theme-rgb-white), 0.3) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-white), 0.4) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-white), 0.2) var(--btn-stop-gradient-2)) !important;
}


.btn.btn-outline-primary:hover {
	background-color: rgba(var(--theme-rgb-btn-color-primary-1), var(--btn-hover-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-primary-1200), var(--btn-hover-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-primary-1100), var(--btn-hover-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-success:hover {
	background-color: rgba(var(--theme-rgb-btn-color-success-1), var(--btn-hover-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-success-1200), var(--btn-hover-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-success-1100), var(--btn-hover-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-info:hover {
	background-color: rgba(var(--theme-rgb-btn-color-info-1), var(--btn-hover-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-info-1200), var(--btn-hover-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-info-1100), var(--btn-hover-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-warning:hover {
	background-color: rgba(var(--theme-rgb-btn-color-warning-1), var(--btn-hover-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-warning-1200), var(--btn-hover-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-warning-1100), var(--btn-hover-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-danger:hover {
	background-color: rgba(var(--theme-rgb-btn-color-danger-1), var(--btn-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-danger-1200), var(--btn-hover-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-danger-1100), var(--btn-hover-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-secondary:hover {
	background-color: rgba(var(--theme-rgb-secondary), var(--btn-hover-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-secondary), var(--btn-hover-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-secondary), var(--btn-hover-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-dark:hover {
	background-color: rgba(var(--theme-rgb-black), var(--btn-hover-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-black), var(--btn-hover-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-black), var(--btn-hover-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}
.btn.btn-outline-light:hover {
	background-color: rgba(var(--theme-rgb-white), var(--btn-hover-transparency-color-1)) !important; 
	background-image: linear-gradient(0deg, rgba(var(--theme-rgb-white), var(--btn-hover-transparency-gradient-1)) var(--btn-stop-gradient-1), rgba(var(--theme-rgb-white), var(--btn-hover-transparency-gradient-2)) var(--btn-stop-gradient-2)) !important;
}

/* END Semi-transparent buttons */


/*** More decorative styles ***/
.btn {
	position: relative; /* Solves issue with .btn::before position: absolute */
	border-radius: 4px;
}

.btn:not(.btn-light) { /* default for all buttons except light */
	color: white;
	text-shadow: 1px 1px 2px rgba(10,10,10,0.8);
}

.btn:hover { /* default for all buttons on hover */
	border-top-color: rgba(10,10,10,0.4);
	border-left-color:  rgba(10,10,10,0.4);
	border-right-color:  rgba(10,10,10,0.3);
	border-bottom-color:  rgba(10,10,10,0.3); 
	text-shadow: 1px 1px 2px rgba(10,10,10,0.5);
}

.btn.btn-sm, button.btn.btn-xs {
	background-image: linear-gradient(180deg, rgba(255,255,255, 0.8), rgba(255,255,255, 0) 30% );
}

.btn.btn-pills {
	border-radius: 30px;
}

/* Removed button from button.btn to render <a> tags with .btn class */
.btn::before {
	content: "";
	background-color: rgba(255, 255, 255, 0.2);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 1%, rgba(255, 255, 255, 0) 90%);
	position: absolute; /* Position absolute causes highlight to exceed button width where div parent is wider than button as is the case with modal response.
						   This is now solved by setting .btn to position relative */
	top: 0; 
	height: 44%;
	left: 0; right: 0;
	border-radius: 3px 3px 0 0 !important;
}

.btn:hover::before {
	height: 48%;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 1%, rgba(255, 255, 255, 0) 90%);
	border-radius: 3px 3px 0 0 !important;
}

.btn.btn-pills::before { /* ie btn-pill default styles */
	background-color: none;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 1%, rgba(255, 255, 255, 0) 90%);
	border-radius: inherit;
	left: 12px; right: 12px;
}

.btn.btn-pills:not(.btn-lg, .btn-sm, .btn-xs)::before { /* default size */
	left: 10px; right: 10px;
}

.btn.btn-pills.btn-sm::before {
	left: 8px; right: 8px;
}

.btn.btn-pills.btn-xs::before {
	left: 6px; right: 6px;
}

.btn.btn-pills.btn-lg:hover::before { 
	left: 10px; right: 10px;
}

.btn.btn-pills:not(.btn-lg, .btn-sm, .btn-xs):hover::before { /* default size */
	left: 8px; right: 8px;
}

.btn.btn-pills.btn-sm:hover::before { 
	left: 6px; right: 6px;
}

.btn.btn-pills.btn-xs:hover::before {
	left: 4px; right: 4px;
}

button.btn.btn-sm:not(.btn-pills)::before {
	background-color: rgba(255,255,255,0.15);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 1%, rgba(255, 255, 255, 0) 90%);
}

.btn.btn-icon::before {
	content: "";
	background-color: rgba(255, 255, 255, 0.25);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
	position: absolute;
	top: 0; 
	height: 48%; 
	left: 0; right: 0;
}

.btn.btn-icon:hover::before {
	height: 52%;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 1%, rgba(255, 255, 255, 0) 91%);
}

.btn.btn-icon.rounded-circle::before { /* default for all rounded-circle */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 92%, from(rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 0)));
	left: 8px; right:8px; 
	border-radius: inherit;
}

.btn.btn-icon.rounded-circle:not(.btn-lg, .btn-sm, .btn-xs)::before { /* selects rounded buttons with default size */
	left: 6px; right:6px;
}

.btn.btn-icon.rounded-circle.btn-sm::before, .btn.btn-icon.rounded-circle.btn-xs::before {
	left: 3px; right: 3px; /* change default setting for small sizes of rounded-circle */
}

/* hover styles */

.btn.btn-icon.rounded-circle.btn-lg:hover::before { /* selects rounded buttons from large to default size */
	left: 6px; right: 6px;
}

.btn.btn-icon.rounded-circle:not(.btn-lg, .btn-sm, .btn-xs):hover::before { /* selects rounded buttons with default size */
	left: 4px; right: 4px;
}

.btn.btn-icon.rounded-circle.btn-sm:hover::before, .btn.btn-icon.rounded-circle.btn-xs:hover::before {
	left: 2px; right: 2px;
}

.btn.btn-icon.rounded-circle.btn-primary {
	background-color: rgba(var(--theme-rgb-btn-color-primary-1), var(--btn-opacity-color-1)) !important; 
	background-image: radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.2) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.5), rgba(255,255,255,0) 340%) !important;
}
.btn.btn-icon.rounded-circle.btn-success {
	background-color: rgba(var(--theme-rgb-btn-color-success-1), var(--btn-opacity-color-1)) !important; 
	background-image: radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-success-3),0.2) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-success-3),0.5), rgba(255,255,255,0) 340%) !important;
}
.btn.btn-icon.rounded-circle.btn-info {
	background-color: rgba(var(--theme-rgb-btn-color-info-1), var(--btn-opacity-color-1)) !important; 
	background-image: radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-info-3),0.2) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-info-3),0.5), rgba(255,255,255,0) 340%) !important;
}
.btn.btn-icon.rounded-circle.btn-warning {
	background-color: rgba(var(--theme-rgb-btn-color-warning-1), var(--btn-opacity-color-1)) !important; 
	background-image: radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-warning-3),0.2) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-warning-3),0.5), rgba(255,255,255,0) 340%) !important;
}
.btn.btn-icon.rounded-circle.btn-danger {
	background-color: rgba(var(--theme-rgb-btn-color-danger-1), var(--btn-opacity-color-1)) !important; 	
	background-image: radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-danger-3),0.2) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-danger-3),0.5), rgba(255,255,255,0) 340%) !important;
}
.btn.btn-icon.rounded-circle.btn-secondary {
	background-color: var(--theme-secondary);
	background-image: radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-info-3),0.2) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-info-3),0.5), rgba(255,255,255,0) 340%) !important;
}
.btn.btn-icon.rounded-circle.btn-dark {
	background-color: rgb(var(--theme-rgb-black), 0.9);
	background-image: radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.2) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.5), rgba(255,255,255,0) 340%) !important;
}
.btn.btn-icon.rounded-circle.btn-light {
	color: black;
	background-color: rgb(200, 200, 235, 0.9);
	background-image: radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.2) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 88%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.5), rgba(255,255,255,0) 340%) !important;
}


.btn.btn-icon.rounded-circle.btn-primary:hover {
	background-color: rgba(var(--theme-rgb-btn-color-primary-1), var(--btn-opacity-color-1)) !important; 
	background-image: radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.3) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.6), rgba(255,255,255,0) 250%) !important;
}
.btn.btn-icon.rounded-circle.btn-success:hover {
	background-color: rgba(var(--theme-rgb-btn-color-success-1), var(--btn-opacity-color-1)) !important; 
	background-image: radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-success-3),0.3) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-success-3),0.6), rgba(255,255,255,0) 250%) !important;
}
.btn.btn-icon.rounded-circle.btn-info:hover {
	background-color: rgba(var(--theme-rgb-btn-color-info-1), var(--btn-opacity-color-1)) !important; 
	background-image: radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-info-3),0.3) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-info-3),0.6), rgba(255,255,255,0) 250%) !important;
}
.btn.btn-icon.rounded-circle.btn-warning:hover {
	background-color: rgba(var(--theme-rgb-btn-color-warning-1), var(--btn-opacity-color-1)) !important; 
	background-image: radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-warning-3),0.3) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-warning-3),0.6), rgba(255,255,255,0) 250%) !important;
}
.btn.btn-icon.rounded-circle.btn-danger:hover {
	background-color: rgba(var(--theme-rgb-btn-color-danger-1), var(--btn-opacity-color-1)) !important; 	
	background-image: radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-danger-3),0.3) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-danger-3),0.6), rgba(255,255,255,0) 250%) !important;
}
.btn.btn-icon.rounded-circle.btn-secondary:hover {
	background-color: var(--theme-secondary);
	background-image: radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-info-3),0.3) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-info-3),0.6), rgba(255,255,255,0) 250%) !important;
}
.btn.btn-icon.rounded-circle.btn-dark:hover {
	background-color: black;
	background-image: radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.3) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.6), rgba(255,255,255,0) 300%) !important;
}
.btn.btn-icon.rounded-circle.btn-light:hover {
	color: black;
	background-color: rgb(200, 200, 235, 0.6);
	background-image: radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.3) 10%, rgba(255,255,255,0) 80%),
		 radial-gradient(circle closest-side at 50% 82%, rgba(var(--theme-rgb-btn-gradient-primary-3),0.6), rgba(255,255,255,0) 300%) !important;
}
/********************************************
*	END Buttons
********************************************/

/****************************************************
* START of SKIN STYLES
*****************************************************/
.glass-skin {
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px) !important;
}

.glass-skin.glass-blur10, .glass-skin .glass-blur10, .glass-panel  .glass-blur10 {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px) !important;
}

.glass-skin.glass-blur5, .glass-skin .glass-blur5, .glass-panel .glass-blur5 {
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px) !important;
}

.glass-skin.glass-saturated, .glass-skin .glass-saturated, .glass-panel .glass-saturated  {
	backdrop-filter: saturate(130%) blur(6px);
	-webkit-backdrop-filter: blur(3px) !important;
}

.glass-skin.glass-blackgreen, .glass-skin .glass-blackgreen, .glass-panel .glass-blackgreen {
	/*background: rgba(0, 0, 0, 0.1);*/
	background: linear-gradient(322deg, #090b0a, #090b0a0f 70%),
		linear-gradient(178deg, #02010f, #02010f00 70%),
		linear-gradient(0deg, #0a4010, #0a40100e 80%) !important;
}

.glass-skin.glass-blackblue, .glass-skin .glass-blackblue, .glass-panel .glass-blackblue {
	/*background: rgba(0, 0, 0, 0.1);*/
	background: linear-gradient(322deg, #090b0a, #090b0a0f 70%),
		linear-gradient(178deg, #02010f, #02010f00 70%),
		linear-gradient(0deg, #0654e3, #0654e30e 80%) !important;
}

.glass-skin.glass-white, .glass-skin .glass-white, .glass-panel .glass-white {
	background: linear-gradient(322deg, #098bfb24, #09fbfa02 70%),
		linear-gradient(178deg, #f2f1ff, #f2f1ff00 70%),
		linear-gradient(40deg, #ccd8f3, #ccd8f302 60%) !important;
}

.glass-skin.glass-blue, .glass-skin .glass-blue, .glass-panel .glass-blue {
	background: linear-gradient(322deg, #00100a, #00100a0f 70%),
		linear-gradient(178deg, #008aff, #008aff00 70%),
		linear-gradient(0deg, #0a40f0, #0a0f050e 80%) !important;
}

.glass-skin.glass-blueviolet, .glass-skin .glass-blueviolet, .glass-panel .glass-blueviolet {
background:
	linear-gradient(322deg, #ba4aff, #ba4aff00 70%),
    linear-gradient(178deg, #008aff, #008aff00 70%),
    linear-gradient(24deg, #00ffc6, #00ffc600 35%) !important;
}

.glass-skin.glass-blueorange, .glass-skin .glass-blueorange, .glass-panel .glass-blueorange {
background:
	linear-gradient(340deg, #01a7d7, #01a7d700 60%),
    linear-gradient(220deg, #d69dea, #d69dea00 60%),
    linear-gradient(45deg, #ed802b, #ed802b00 100%) !important;
}

.glass-skin.glass-grayblue, .glass-skin .glass-grayblue, .glass-panel .glass-grayblue {
background:
	linear-gradient(340deg, #9392a0, #9392a000 60%),
    linear-gradient(220deg, #a0dbdd, #a0dbdd00 80%),
    linear-gradient(45deg, #d1dfe2, #d1dfe200 100%),
	linear-gradient(25deg, #0000c4, #0000c400 100%) !important; 
}

.glass-hdr.glass-whitebump {
/* background: linear-gradient(180deg, rgba(230, 253, 253, 1) 1%, rgba(252, 253, 253, 0.8) 28%, rgba(252, 253, 253, 0.6) 40%, rgba(252, 253, 253, 0) 58%),
	linear-gradient(90deg, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0.8) 30%, rgba(250, 253, 250, 0.2)); */
	color: dimgray;
	background: 
		linear-gradient(180deg, rgba(230, 253, 253, 1) 1%, rgba(230, 253, 253, 0.3) 20%, rgba(255, 255, 255, 0.7) 45% 60%, rgba(245, 245, 245, 0.5) 75%, rgba(255, 255, 255, 0.1)),
		linear-gradient(360deg, rgba(255, 255, 255, 0) 10%, rgba( 200,250, 240, 0.4) , rgba( 255, 255, 255, 0) 90%),
		linear-gradient(360deg, rgba(250, 213, 253, 0.9) 2%, rgba( 253, 243, 255, 0.4) 20%, rgba( 255, 255, 255, 0.1));
}

.glass-hdr.glass-white {
	color: dimgray;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1%, rgba(255, 255, 255, 0.8) 30%, rgba(250, 253, 250, 0.2)); 
}

.glass-clear-white {
	background: rgba(255, 255, 255, 0.2) !important;
}

.glass-panel {
	background: transparent !important;
}

.glass-panel .panel-hdr{
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.glass-panel .panel-container{
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/* Start Form Entries */

.form-check-input, .form-select, .form-control, .custom-select, 
.dataTable-selector, .dataTable-input {
	border: none;
	outline: none;
	box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.6) !important;
}

.form-check-input:focus, .form-select:focus, .form-control:focus, .custom-select:focus, 
.dataTable-selector:focus, .dataTable-input:focus {
    border-color: rgb(--var(--theme-rgb-primary)) !important;
	box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.6) !important;
}

/* select.form-control option:first-child:before, 
select.form-control option:last-child:after { DOESNT WORK for built in drop down
	content: "ABC";
	background: green;
} 
select.form-control option{
	background: yellow;
	line-height: 20px; DOESNT WORK for built in drop down
	height: 30px; DOESNT WORK for built in drop down
} */

/* End Form Entries */

/* Start Date Picker */

.flatpickr-calendar {
	width: 350px;
	padding: 12px;
	background: transparent !important;
	backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
	background: rgba(255, 255, 255, 0.8) !important;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1%, rgba(255, 255, 255, 0.8) 30%, rgba(250, 253, 250, 0.2)); 
	box-shadow: var(--thin-shadow) !important;
}

.flatpickr-calendar .flatpickr-innerContainer {
	margin: 9px !important;
	font-size: 0.9rem !important;
	color: black !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-current-month {
	width: 80% !important;
}

.flatpickr-calendar .flatpickr-weekdays {
    background: rgba(255, 255, 255, 0.6) !important;
}

.flatpickr-calendar .flatpickr-months .numInputWrapper {
	margin-left: 20px !important;
}

.flatpickr-calendar .flatpickr-months span.flatpickr-prev-month, 
.flatpickr-calendar .flatpickr-months span.flatpickr-next-month {
	padding-top: 16px;
}



/* End Date Picker */

/* Start Tables */
/* START TODO:
.table-responsive::-webkit-scrollbar {
    width: px; / width of the entire scrollbar /
}
.table-responsive::-webkit-scrollbar-thumb {
    background-color: blue; / color of the scroll thumb /
    border-radius: 20px; / roundness of the scroll thumb /
    border: 3px solid orange; / creates padding around scroll thumb /
}*/

/* End Tables */

/****************************************************
* END of SKIN STYLES
*****************************************************/
/* DEFAULT COLOR THEME WISTERIA
--theme-rgb-primary-50: 204,191,223;
--theme-rgb-primary-100: 190,174,215;
--theme-rgb-primary-200: 177,157,206;
--theme-rgb-primary-300: 163,140,198;
--theme-rgb-primary-400: 150,123,189;
--theme-rgb-primary-500: 136,106,181;
--theme-rgb-primary-600: 122,89,173;
--theme-rgb-primary-700: 110,78,158;
--theme-rgb-primary-800: 98,70,141;
--theme-rgb-primary-900: 86,61,124;
--theme-rgb-success-50: 122,236,224;
--theme-rgb-success-100: 99,233,219;
--theme-rgb-success-200: 77,229,213;
--theme-rgb-success-300: 55,226,208;
--theme-rgb-success-400: 33,223,203;
--theme-rgb-success-500: 29,201,183;
--theme-rgb-success-600: 26,179,163;
--theme-rgb-success-700: 23,156,142;
--theme-rgb-success-800: 19,134,122;
--theme-rgb-success-900: 16,112,102;
--theme-rgb-info-50: 154,207,250;
--theme-rgb-info-100: 130,196,248;
--theme-rgb-info-200: 106,184,247;
--theme-rgb-info-300: 81,173,246;
--theme-rgb-info-400: 57,161,244;
--theme-rgb-info-500: 33,150,243;
--theme-rgb-info-600: 13,138,238;
--theme-rgb-info-700: 12,124,213;
--theme-rgb-info-800: 10,110,189;
--theme-rgb-info-900: 9,96,165;
--theme-rgb-warning-50: 255,235,193;
--theme-rgb-warning-100: 255,227,167;
--theme-rgb-warning-200: 255,219,142;
--theme-rgb-warning-300: 255,210,116;
--theme-rgb-warning-400: 255,202,91;
--theme-rgb-warning-500: 255,194,65;
--theme-rgb-warning-600: 255,186,40;
--theme-rgb-warning-700: 255,178,14;
--theme-rgb-warning-800: 244,165,0;
--theme-rgb-warning-900: 218,148,0;
--theme-rgb-danger-50: 254,183,217;
--theme-rgb-danger-100: 254,158,203;
--theme-rgb-danger-200: 254,133,190;
--theme-rgb-danger-300: 254,107,176;
--theme-rgb-danger-400: 253,82,163;
--theme-rgb-danger-500: 253,57,149;
--theme-rgb-danger-600: 253,32,135;
--theme-rgb-danger-700: 252,7,122;
--theme-rgb-danger-800: 231,2,110;
--theme-rgb-danger-900: 206,2,98;

orig: 
--dark-shade-100: 0.9; 
--dark-shade-200: 0.8; 
--dark-shade-300: 0.7; 
--dark-shade-400: 0.6; 
--dark-shade-500: 0.5; 
--dark-shade-600: 0.4;
--dark-shade-700: 0.3;
--dark-shade-800: 0.1;

--light-shade-100: 1.2; 
--light-shade-200: 1.4; 
--light-shade-300: 1.6; 
--light-shade-400: 1.7; 
--light-shade-500: 1.9; 
--light-shade-600: 2.2;
--light-shade-700: 2.5;
--light-shade-800: 2.75;
--light-shade-900: 3;

*/