:root{
	--color-mode: 'light';
	--light-mode-bg: #F7FAFC;
	--light-mode-text: #000000;
/* 	--dark-mode-bg: #121212; */
	--dark-mode-bg: #1a1a1a;
	--dark-mode-text: #e0e0e0;
	--light-mode-alink: #0154A7;
	--dark-mode-alink: #A4C5F9;
	--white-color: #ffffff;
	--black-color: #000000;
	--aw-blue: #0057AD;
	--blue-light-access: #0054A8;
	--tr-odd-light: rgba(0, 0, 0, 0.05); /* #f2f2f2 */
	--tr-odd-dark: #474747; 
	--btg-card-title-light: #dddddd;
	--btg-card-title-dark: #525252;
	--btg-card-title-text-light: #2b2b2b;
	--btg-card-title-text-dark: #fff;
	--btg-card-border-light: #ddd;
	--btg-card-border-dark: #525252;
	--jumbotron-light: #e9ecef;
	--jumbotron-dark: #333;

	--light-mode-header-bg: url('../images/aw_header_bg.png');
	--dark-mode-header-bg: url('../images/aw_header_bg_dark.png');

	--cc-profile-menu-grad1-light: #fbfbfb;
	--cc-profile-menu-grad2-light: #c8c8c8;
	--cc-profile-menu-grad1-dark: #6a6a6a;
	--cc-profile-menu-grad2-dark: #282828;

	--cc-profile-menu-link-color-light: #282828;
	--cc-profile-menu-link-color-dark: #fff;
	
	
	--aw-gray: #4c4c4c;
	--alt-blue: #3399FE;
	--alt-gray: #4e5359;
	--alt-gray2: #d0d0d0;
	--alt-gray3: #333;
	--alt-gray4: #aeaeae;
	--alt-gray5: #888;
	--alt-gray6: #555;
	--alt-gray7: #252525;
	--alt-gray8: #151515;
	--alt-gray9: #565656;
	--alt-gray10: #9F9F9F;
	--alt-gray11: #C0C3C4;
	--alt-gray12: #8F9295;
	--alt-gray13: #6f7478;
	--alt-white: #FAFAFA;
	--alt-white2: #EFEFEF;
	--shadow: #bbb;
	--transparent: 'transparent';
	--hidden: none;
	--inline: inline;
	--sun-icon: '\f185';
	--moon-icon: '\f186';
	--x-icon: '\f00d';
	
	
	--background: var(--light-mode-bg);
	--header-bg: var(--white-color);
	--header-links: var(--alt-gray);
	--header-menu-bg: var(--alt-gray2);
	--header-menu-btn: var(--alt-gray4);
	--header-menu-dropdown: var(--alt-gray2);
	--header-menu-dropdown-btn: var(--alt-gray4);
	--header-menu-dropdown-text: var(--alt-gray3);
	--focus: var(--alt-blue);
	--text-color: var(--light-mode-text);
	--inverse-text-color: var(--dark-mode-text);
	--alink-color: var(--light-mode-alink);
	--body-text: var(--black-color);
	--theme-blue-text: var(--aw-blue);
	--theme-blue: var(--aw-blue);
	--theme-alt-blue : var(--alt-blue);
	--theme-gray: var(--aw-gray);
	--light-item: var(--white-color);
	--dark-item: var(--black-color);
	--lm-logo: var(--inline);
	--dm-logo: var(--hidden);
	--h1: var(--aw-blue);
	--tabtab: var(--alt-gray5);
	--card: var(--white-color);
	--dropshadow: var(--shadow);
	--col-monthly: var(--alt-white);
	--col-today: var(--alt-white2);
	--tr-odd: var(--tr-odd-light);
	--gray-text: var(--alt-gray13);
	--gray-notice-bg: var(--alt-white2);
	--cm-tab-icon: var(--moon-icon);
	--cm-switch-icon: var(--sun-icon);
	--cm-tab-text: var(--white-color);
	--cc-menu-dropshadow: #bbb;
	--focus-label: #ccc;
	--form-focus-color: rgba(128, 189, 255, 0.75);
	--red-font: #ee0000;
	--btg-card-title-bg: var(--btg-card-title-light);
	--btg-card-title-text: var(--btg-card-title-text-light);
	--btg-card-border: var(--btg-card-border-light);
	--jumbotron: var(--jumbotron-light);

	--header-bg-img: var(--light-mode-header-bg);
	
	--cc-profile-menu-grad1: var(--cc-profile-menu-grad1-light);
	--cc-profile-menu-grad2: var(--cc-profile-menu-grad2-light);
	--cc-profile-menu-link-color: var(--cc-profile-menu-link-color-light);
	
}



@media (prefers-color-scheme: dark) {
  :root {
    --color-mode: 'dark';
  }
  
  :root:not([data-user-color-scheme]) {
    --background: var(--dark-mode-bg);
    --header-bg: var(--aw-gray);
    --header-links: var(--white-color);
    --header-menu-bg: var(--alt-gray);
    --header-menu-btn: var(--alt-gray6);
    --header-menu-dropdown: var(--alt-gray6);
    --header-menu-dropdown-btn: var(--alt-gray3);
    --header-menu-dropdown-text: var(--alt-white);
    --focus: var(--alt-blue);
    --text-color: var(--dark-mode-text);
    --inverse-text-color: var(--light-mode-text);
    --alink-color: var(--dark-mode-alink);
	--body-text: var(--white-color);
	--theme-blue-text: var(--dark-mode-alink);
	--theme-blue: var(--alt-blue);
	--theme-alt-blue : var(--aw-blue);
	--theme-gray: var(--dark-mode-text);
	--light-item: var(--black-color);
	--dark-item: var(--dark-mode-text);
	--lm-logo: var(--hidden);
	--dm-logo: var(--inline);
	--h1: var(--dark-mode-text);
	--tabtab: var(--dark-mode-text);
	--card: var(--alt-gray3);
	--dropshadow: var(--transparent);
	--col-monthly: var(--alt-gray7);
	--col-today: var(--alt-gray8);
	--tr-odd: var(--tr-odd-dark);
	--gray-text: var(--alt-gray11);
	--gray-notice-bg: var(--alt-gray3);
	--cm-tab-icon: var(--sun-icon);
	--cm-switch-icon: var(--moon-icon);
	--cm-tab-text: var(--dark-mode-text);
	--cc-menu-dropshadow: var(--transparent);
	--focus-label: #595959;
	--form-focus-color: rgba(128, 189, 255, 1);
	--red-font: #ff6a6a;
	--btg-card-title-bg: var(--btg-card-title-dark);
	--btg-card-title-text: var(--btg-card-title-text-dark);
	--btg-card-border: var(--btg-card-border-dark);
	--jumbotron: var(--jumbotron-dark);

	--header-bg-img: var(--dark-mode-header-bg);

	--cc-profile-menu-grad1: var(--cc-profile-menu-grad1-dark);
	--cc-profile-menu-grad2: var(--cc-profile-menu-grad2-dark);
	--cc-profile-menu-link-color: var(--cc-profile-menu-link-color-dark);
	}
	
}

[data-user-color-scheme='dark'] {
	--background: var(--dark-mode-bg);
	--header-bg: var(--aw-gray);
	--header-links: var(--white-color);
	--header-menu-bg: var(--alt-gray3);
	--header-menu-btn: var(--alt-gray6);
	--header-menu-dropdown: var(--alt-gray6);
	--header-menu-dropdown-btn: var(--alt-gray3);
	--header-menu-dropdown-text: var(--alt-white);
	--focus: var(--alt-blue);
    --text-color: var(--dark-mode-text);
    --inverse-text-color: var(--light-mode-text);
    --alink-color: var(--dark-mode-alink);
	--body-text: var(--white-color);
	--theme-blue-text: var(--dark-mode-alink);
	--theme-blue: var(--alt-blue);
	--theme-alt-blue : var(--aw-blue);
	--theme-gray: var(--dark-mode-text);
	--light-item: var(--black-color);
	--dark-item: var(--dark-mode-text);
	--lm-logo: var(--hidden);
	--dm-logo: var(--inline);
	--h1: var(--dark-mode-text);
	--tabtab: var(--dark-mode-text);
	--card: var(--alt-gray3);
	--dropshadow: var(--transparent);
	--col-monthly: var(--alt-gray7);
	--col-today: var(--alt-gray8);
	--tr-odd: var(--tr-odd-dark);
	--gray-text: var(--alt-gray11);
	--gray-notice-bg: var(--alt-gray3);
	--cm-tab-icon: var(--sun-icon);
	--cm-switch-icon: var(--moon-icon);
	--cm-tab-text: var(--dark-mode-text);
	--cc-menu-dropshadow: var(--transparent);
	--focus-label: #595959;
	--form-focus-color: rgba(128, 189, 255, 1);
	--red-font: #ff6a6a;
	--btg-card-title-bg: var(--btg-card-title-dark);
	--btg-card-title-text: var(--btg-card-title-text-dark);
	--btg-card-border: var(--btg-card-border-dark);
	--jumbotron: var(--jumbotron-dark);

	--header-bg-img: var(--dark-mode-header-bg);

	--cc-profile-menu-grad1: var(--cc-profile-menu-grad1-dark);
	--cc-profile-menu-grad2: var(--cc-profile-menu-grad2-dark);
	--cc-profile-menu-link-color: var(--cc-profile-menu-link-color-dark);

}

.no-js .cm-tab {
  display: none;
}

.cm-tab{
	position: fixed;
/* 	left: -14.5rem; */
	left: 0;
	bottom: -3.6rem;
	max-width: 100vw;
/* 	background-color: var(--aw-gray); */
	color: var(--cm-tab-text);
/* 	border-top-right-radius: 15px; */
	-webkit-transition: all 1.0s ease;
	-moz-transition: all 1.0s ease;
	-ms-transition: all 1.0s ease;
	-o-transition: all 1.0s ease;
	transition: all 1.0s ease; 
	z-index: 2;
}

.cm-tab.tab-open{
	transform: translate(0, -3rem);
}

.cm-tab-header{
	display: inline-block;
	padding-top: 10px;
}

.cm-tab-btn{
	display: inline-block;
	text-align: left;
	padding: 5px 10px 0 10px;
	font-size: 1.5rem;
	font-weight: 300;
	background-color: var(--aw-gray);
	border-top-right-radius: 15px;
	text-align: center;
	width: 44px;
	height: 44px;
	border: none;
	color: var(--cm-tab-text);
}

.cm-tab-btn:after{
	font-family: 'Font Awesome 5 Pro';
	content: var(--cm-tab-icon);
}

.cm-tab-btn.tab-open:after{
	font-family: 'Font Awesome 5 Pro';
	content: var(--x-icon);
}

.user-toggle {
	display: block;
	background-color: var(--aw-gray);
	border-top-right-radius: 15px;
	
}

.user-toggle.tab-open{
	display: block;
}

.user-toggle .toggle-button {
  display: inline-flex;
  visibility: hidden;
  background-color: var(--aw-gray);
  border: none;
  font: inherit;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  color: var(--dark-mode-text);
  border-top-right-radius: 15px;
}

.user-toggle.tab-open .toggle-button{
	visibility: visible;
}

.toggle-button__icon:after {
	font-family: 'Font Awesome 5 Pro';
	content: var(--cm-tab-icon);
/*
	width: 1.2em; 
	height: 1.2em;
*/
	margin: 0 0 0 0.5em;
	font-weight: 900;
	
	transform: translateY(1px); /* Optical adjustment */
	transition: filter 500ms ease-in-out;
}

.toggle-button:focus {
  outline: 1px solid var(--button-background);
  outline-offset: 0.5rem;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-left: 15px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3399FE;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 9px;
/*   background-color: white; */
  -webkit-transition: .4s;
  transition: .4s;
  
  font-family: 'Font Awesome 5 Pro';
	content: var(--cm-switch-icon);
	font-weight: 900;
	transform: translateY(1px); /* Optical adjustment */
}

input:checked + .slider {
  background-color: #ccc;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  color: var(--header-bg);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.header-first-bar[data-user-color-scheme='dark'] {
	display: none !important;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* IE10+ CSS styles go here */
	
/*
	cm-tab {
	  display: none;
	  visibility: hidden;
	}
*/

