@charset "utf-8";
/* CSS Document */

:root 
{
	/* My themes */
	
	/** ---------------------------------------- LIGHT THEME ---------------------------------------- */ 
	
	--light-color-surface-header-100: linear-gradient(to right, #28BBEB, #FF637E);
	
	--light-color-text-header-100: #FFFFFF; /* Banner Headers w/ special surface */ /* White */
	--light-color-text-header-200: #606167; /* Page Headers w/ no special surface */ /* Dark Grey */

	--light-color-text-body-active-200: #333333; /* Main body text w/ no special surface */ /* Darkest Grey */
	/* bodyLink */ /* a */
	--light-color-text-body-active-300: #666666; /* Main body text w/ special surface */ /* Dark Grey */
	/* a */
	--light-color-text-body-active-400: #919191; /* Main body text w/ special surface */ /* Dark Grey 666666 || 919191*/
	
	--light-color-text-body-inactive-200: #cccccc; /* Inactive Main body text w/ no special surface */ /* Light Grey */

	--light-color-text-btn-active-200: #FFFFFF; /* Main body text w/ button active surface */ /* White */

	--light-color-text-btn-inactive-200: #cccccc; /* Inactive Main body text w/ no special surface */ /* Light Grey */
	
	--light-color-surface-body-100: #FFFFFF; /* The main body text */ /* White */
	
	--light-color-surface-btn-active-100: #e95a44; /* The button surface for main links */ /* Orange */

	--light-color-surface-btn-active-300: #2196F3; /* The button surface for main control buttons */ /* Blue */

	--light-color-surface-btn-inactive-300: #cccccc; /* The inactive button surface for main control buttons */ /* Blue */
	
	--light-color-surface-btn-active-hover-100: #FD6A62; /* The button surface for main links */ /* Orange */
	
	/** ---------------------------------------- DARK THEME ---------------------------------------- */ 
	
	/* REVIEW LATER  --dark-color-text-header-100: #FFFFFF; /* Banner Headers w/ special surface */ /* White */
	--dark-color-text-header-200: #FFFFFF; /* Page Headers w/ no special surface */ /* White */

	--dark-color-text-body-active-200: #D3D3D3; /* Main body text w/ no special surface */ /* Lightest Grey */
	/* bodyLink */ /* a */
	--dark-color-text-body-active-300: #919191;  /* Main body text w/ special surface */ /* Light Grey */
	
	--dark-color-text-body-inactive-200: #666666; /* Inactive Main body text w/ no special surface */ /* Medium Grey */
	
	--dark-color-text-btn-active-200: #FFFFFF; /* Main body text w/ btn active surface */ /* White */
	
	--dark-color-text-btn-inactive-200: #666666; /* Inactive Main body text w/ no special surface */ /* Medium Grey */
	
	--dark-color-surface-body-100: #121212; /* The main body text */ /* Dark Grey */
	
	--dark-color-surface-btn-active-100: #a688fa; /* The button surface for main links */ /* Purple */

	--dark-color-surface-btn-active-300: #a688fa; /* The button surface for main control buttons */ /* Purple */

	--dark-color-surface-btn-inactive-300: #46424f; /* The inactive button surface for main control buttons */ /* Grey */
	
	--dark-color-surface-btn-active-hover-100: #ba9ffb; /* The button surface for main links */ /* Purple  */ 
}


/* BANNER HEADER SURFACE */

.header-wrapper-tall,
.header-wrapper-short
{
	background: var(--light-color-surface-header-100);
	color: var(--light-color-text-header-100);
}

/* BANNER HEADER Text */


.label-text,
.header-wrapper-tall a,
.header-wrapper-short a,
.settingRow b
{
	color: var(--light-color-text-header-100);
}

/* BODY HEADER TEXT */

h1,
h2,
.header-wrapper-tall a:hover,
.header-wrapper-short a:hover
/* Header Text Hover */
{
	color: var(--light-color-text-header-200);
}
	




/* Main Body Static */

.container
{
	background-color: var(--light-color-surface-body-100);
	color: var(--light-color-text-body-active-200);
}

/* Main Body Links */

.jsToggle-light
{
	color: var(--light-color-text-body-active-300);
}
.jsToggle-light:hover
{
	color: var(--light-color-text-body-active-200);
}

.jsToggle-dark
{
	color: var(--dark-color-text-body-active-300);
}
.jsToggle-dark:hover
{
	color: var(--dark-color-text-body-active-200);
}

a
{
	color: var(--light-color-text-body-active-300);
}

/* Main Body Links Hover */

.text-title,
a:hover
{
	color: var(--light-color-text-body-active-200);
}

/* Main Body Links */

.bodyLink
{
	color: var(--light-color-surface-btn-active-100);
}

/* Button Links */

#filters li span
{
	color: var(--light-color-text-body-active-300);
	background-color: var(--light-color-surface-body-100);
}

#filters li span.active,
.label-bg,
.btn
{
	color: var(--light-color-surface-body-100);
	background-color: var(--light-color-surface-btn-active-100);
}

/* Button Links Hover */

.btn:hover
{
	background-color: var(--light-color-surface-btn-active-hover-100);
}



/** ---------------------------------------- Individual Color Styles ---------------------------------------- */ 

.settingRow 
{

	border-bottom: 1px solid var(--light-color-text-body-active-200);
}

#id_rowText_audioVolume,
#id_volume_Label
/* Has 4 color states: Active Light, Active Dark, Inactive Light, Inactive Dark */
{
	color: var(--light-color-text-body-inactive-200); 			/* Inactive light */
}

     

.toggle 
{
  background-color: var(--light-color-text-btn-inactive-200);	/* Inactive light */
}

.sliderBtn,
.rangeSlider
{
	background-color: var(--light-color-surface-btn-active-300);
	accent-color: var(--light-color-surface-btn-active-300);
}

.sliderBtn_Sound
{
	background-color: var(--light-color-surface-btn-inactive-300);	/* Inactive light */
}

.toggle:before 
{
  background-color: var(--light-color-text-btn-active-200); 		/* white */
}

input:checked + .toggle 
{
	background-color: var(--light-color-surface-btn-active-300); 
}

input:focus + .toggle 
{
	box-shadow: 0 0 1px var(--light-color-surface-btn-active-300);
}