/* CSS General */

/* DISABLES TEXT SELECTION */

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


/* CENTER PIECE */

/* {margin:0;padding:0}
/* mac hide \*/

html, body, .container {
	height:				100%;
	width:				100%;
}
/* end hide */

body  {
    margin-left:      	0;
	margin-top:       	0;

    background-color:	#eeeeee;

	/* FADE IN FUNCTION */
	opacity:			0;
   	transition: 		opacity 0.3s;
	-webkit-transition: opacity 0.3s; /* Safari */
}



.level1 {
   	display:		table;
    width:			100%;
	height:			100%;
}

.level2 {
   	display: 		table-cell;
    text-align: 	center;
   	vertical-align: middle;
	height: 		100%;
}

.level3 {
   	display:		inline-block;
    vertical-align: middle;
}






.thinLine {
	display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0; 
}





/* Container holding the image and the text */
.container {
	position:	relative;
}

.flex {
	position:	relative;
	display: inline-block;
	flex-wrap: wrap;
}

/* Bottom centered text on top of image */
.img-capture {
	position: 		absolute;
	z-index:		10;
	bottom:			2px;
	background-color: white;
	color: 			black;
	text-align:		center;
	width:			100%;

	font-family:	Arial;
	font-size: 		9px;
	letter-spacing:	1px;
	font-weight:	bold;
	text-transform:	uppercase;
	padding-left:	2px;
	padding-right:	2px;
}

/* Placement of edit button on top of picture */
.editBut {
	position:			absolute;
	z-index:			10;
	top: 				0px;
	padding-right:		15px;
	
	max-width:			0;
	max-height: 		0;
}

/* Placement of mute button on top of picture */
.muteBut {
	position:			absolute;
	z-index:			10;
	top: 				0px;
	right:				55px;
	
	max-width:			0;
	max-height: 		0;
}




.mobMenu {
	letter-spacing:	2px;
	font-size:		11px;
	font-weight:	normal;
	white-space:	nowrap;
	padding:		5px;
	text-transform:	uppercase;
	font-family:	Arial;
	line-height:	20px;
}



/* CLASS VALUE */
.<td height="16.6%"Circle {
	width: 					50px;
	height: 				50px;
	background: 			#9999FF;
	-moz-border-radius: 	25px;
	-webkit-border-radius:	25px;
	border-radius: 			25px;
	position:				relative;
	z-index: 				0;
}

.massiveText {
	font-family:	Verdana, Arial, Helvetica, sans-serif;
	font-size:		11px;
	color:			#0066cc;
	vertical-align: middle;
	font-variant: 	small-caps;
	white-space: 	pre-wrap;
	line-height: 	16px;
	font-weight:	normal;
	display:		block;
}




/* INPUTS
	*/
		/* To prevent highlighted border around input types	
		
		STILL NOT FULLY WORKING 8/24/20
		
		*/
		
input, select, textarea{
    -ms-box-sizing:		content-box;
    -moz-box-sizing:	content-box;
    box-sizing:			content-box;
    -webkit-box-sizing:	content-box; 
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

input:focus, textarea:focus, select:focus, img:focus, img, a, a:hover, a:click, a:visited {

    outline:			none !important;
	border:				none;
  	text-decoration:	none;
  	color: 				transparent;

    -o-user-select: 		none;
    -webkit-touch-callout: 	none;
    -webkit-user-select: 	none;
    -khtml-user-select: 	none;
    -moz-user-select: 		none;
    -ms-user-select: 		none;
    user-select: 			none;
	
	-webkit-tap-highlight-color: transparent;
}











.inputTextLong {
	width: 			310px;
	font-family:    Verdana, Arial, Helvetica, sans-serif;
	font-size:		13px;
	color:			#0066cc;
	letter-spacing: 0px;
	font-variant: 	small-caps;

}

.inputTextShort {
	width: 			65px;
	font-family:    Verdana, Arial, Helvetica, sans-serif;
	font-size:		13px;
	color:			#0066cc;
	letter-spacing: 0px;
	font-variant:	small-caps;
}

.inputTextMedium {
	width: 			195px;
	font-family:    Verdana, Arial, Helvetica, sans-serif;
	font-size:		13px;
	color:			#0066cc;
	letter-spacing: 0px;
	font-variant: 	small-caps;
}

.inputRequired {
	color:				#3366CC !important;
	font-size:			12px;
}


/* FOR SIGNATURES ETC */

.inputInitials {

	margin-left:	7px;
	margin-top: 	10px;
	min-width:		30px;
	max-width:		30px;
	width:			30px;
	
	padding:		5px;
			
	text-align:		center;
	vertical-align:	middle;

	font-size: 		24px;
	font-family:	Courier New, Courier, mono;
	font-style:		italic;
	font-weight:	600;
	letter-spacing:	1px;
	text-transform:	uppercase;

	color:			#3366CC !important;
}


.drpSearch {
	border: 		thin outset white;
	box-shadow: 	0px 2px 8px 0px rgba(0,0,0,0.2);

	font-family:	Verdana;
	text-transform:	capitalize;
}

.drpSearchBdays {
	border: 			thin inset #eeeeee;
	font-size: 			10px;
	letter-spacing: 	2px;
	color:				#003366;
	text-transform: 	uppercase;
	padding:			2px;
	font-weight:		bold;
	background-color:	#eeeeee;
}
/* end DROPDOWN BOXES */

.fancy {
    height:		20px;
    padding:	3px;
	border:		none;
	color:		#0066cc;
	font-weight:bold;
	font-size:	14px;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 			0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/* end INPUTS */





.textOnTop {
	position: 		absolute;
	top:			3px;
	left: 			7px;
	color:			#ffffff;
	font-size:		14px;
	letter-spacing: 1px;
	font-weight:	bold;
	z-index:		100;
	text-transform: uppercase;
}



.tblBordered {
		border-collapse:	collapse;
		border: 			thin inset #dddddd;
		border-spacing: 	0;
		color:				#006699;
}

.tblBorderedPrint {
		border-collapse:	collapse;
		border: 			thin inset #dddddd;
		border-spacing: 	0;
		color:				#000000;
		font-size: 			14px;
}


.tdNoBorder {
		border-width: 0;
		border: none;
}

p, td  {

	font-size:      12px;
	font-family:    Arial;
	color:			#333333;
	font-variant:	small-caps;
	text-align:	    left;
}




/* BUTTON STYLES  */

.btnSizeLarge {
	min-width:		50px;
	width:			50px;

	padding-top:	5px;
	padding-bottom:	5px;
}

.btnStartOver {
	background-color:	#6666CC;
	width: 				130px;
	color:				#fff;
}


.btnSubmit {
	background-color:	#669999;
	width: 				130px;
	color:				#000;
}

.btnGo {
	background-color:	#CCCCFF;
	width: 				40px;
	color:				#000;
}


.btnUploadImage {

	background-color:	#CC9900;
	width: 				200px;
	color:				#fff;
}

.btnUpdate1 {
	background-color:	#CCCC00;
	width: 				200px;
	height: 			22px;
	color:				#000;
}

.btnUpdate2 {
	background-color:	#99CC33;
	width: 				200px;
	height: 			22px;
	color:				#000;
}

.btnCreate2 {
	background-color:	#FFCCFF;
	width: 				200px;
	height: 			22px;
	color:				#000;
}

.btnMain {
	background-color:	#CCCCFF;
	width: 				130px;
	height:				auto;
	color:				#000;
}


.btnMainLarge {
	background-color:	#6699CC;
	width: 				200px;
	height:				auto;
	color:				#FFF;
	padding:			5px;
}

.btnPage {
	background-color:	#dddddd;
	opacity:			0.5;
	width: 				18px;
	font-size: 			11px;
	padding-left: 		0px;
	padding-right: 		0px;
	padding-top: 		7px;
	padding-bottom: 	20px;
	font-weight:		normal;
	font-family:		Arial, Helvetica, sans-serif;
	color:				#000;
}

.btnAddNew {
	background-color:	#CCCCCC;
	width: 				130px;
	color:				#000;
}


/*end  BUTTON STYLES  */




.copyRight {
	opacity: 		0.75;
	font-family:	Arial, Helvetica, sans-serif;
	font-size:		9px;
	color:			#000;
	letter-spacing: 3px;
	text-transform:	uppercase;
}



/* TEXT OPTIONS */

.txtBlock {
	font-family: 	Verdana, Arial, Helvetica, sans-serif;
	font-size:		13px;
	letter-spacing: 1px;
	font-variant: 	small-caps;
	white-space:	normal;
	line-height: 	20px;
	max-width: 		90%;
	font-weight:	normal;
}

.txtBlockTD {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:	10px;
	color:#333333;
	letter-spacing: 1px;
	vertical-align: middle;
	text-align: left;
	font-variant: small-caps;
	white-space: pre-wrap;
	line-height: 14px;
	max-width: 650px;
	vertical-align: middle;
}


.titlePage {
	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:	 	40px;
	letter-spacing: 1px;
	font-weight: 	bold;
	text-transform:	uppercase;
}

.titlePubForm {

	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:		large;
	letter-spacing: 5px;
	color:       	#fff;
	text-transform:	uppercase;
	opacity:		0.75;
	padding:		5px;
	padding-left:	10px;
	padding-right:	10px;
}


.titlePageLarge {

	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:	 	120px;
	letter-spacing: 1px;
	color:       	#0066cc;
	font-weight: 	bold;
	text-transform:	uppercase;
}

.titleLarge {

	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:	 	24px;
	letter-spacing: 3px;
	font-weight: 	bold;
	opacity:		0.75;
}

.titlePageSmall {

	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:	 	24px;
	letter-spacing: 1px;
	color:       	#669900;
	font-weight: 	bold;
	opacity:		1;
	text-transform:	uppercase;
	line-height:	24px;

}


.nameLarge {

	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:	 	20px;
	color:       	#0066cc;
}

.nameLarge30 {

	font-family:	Geneva, Arial, Helvetica, sans-serif;
	font-size:		30px;
	color: 			#0066CC; 
	font-weight: 	bold;
	text-transform:	uppercase;
	text-decoration:none;
	line-height: 	35px;
}


.cellData {

	font-family:    Verdana, Arial, Helvetica, sans-serif;
	font-size:		12px;
	color:			#0066cc;
	letter-spacing: 1;
	font-variant: 	small-caps;
	max-width: 		200px;
	white-space: 	pre-wrap;
	overflow-wrap:	break-word;
	word-wrap:		break-word;
	line-height:    18px;
}

.cellDataHigh {

	font-family:    Verdana, Arial, Helvetica, sans-serif;
	font-size:		14px;
	color:			#0066cc;
	letter-spacing: 1;
	font-variant: 	small-caps;
	
	white-space: 	pre-wrap;
	overflow-wrap:	break-word;
	word-wrap:		break-word;
	
	line-height:    18px;
	font-weight:	600;
}

.cellDataInput {

	font-family:    Verdana, Arial, Helvetica, sans-serif;
	font-size:		13px;
	color:			#0066cc;
	font-variant: 	small-caps;
	max-width: 		300px;
	white-space: 	nowrap;
}

.infoCell {

	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:		11px;
	color:			#009900;
	letter-spacing: 1px;
	white-space:	nowrap;
}

.titleSection {

	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:		20px;
	font-weight:	bold;
	color: 			#0066cc;
	letter-spacing: 4px;
	opacity:		0.5;
	text-transform:	uppercase;
}

.menuTitle {

	font-family: 	Arial;
	font-size:		14px;
	font-weight:	bold;
	color: 			#0066cc;
	letter-spacing: 1px;
	line-height:	5px;
}

.topMenu {

	font-family: Arial;
	font-size:	12px;
	color:#6666CC;
	font-weight: bold;
	letter-spacing: 0px;
}

.percentInput { position:relative; }
.percentInput span { position: absolute; right: 4px; top:2px; }
.num_percent { text-align: right; padding-right: 12px; }




/* for Row highlighting */

tr.rowAlternate td {
	background-color:	#ddd;
}

tr.gold td {
	background-color: 	gold;
}

tr.silver td {
	background-color: 	silver;
}

tr.bronze td {
	background-color:	#FF9900;
}




.pattern {
	min-height:	50px;
	min-width:	50px;
}

#bgHalfFilled {
	background-image:	repeating-linear-gradient(45deg, #fff, #fff 3px, #669900 5px, #669900 8px);
	opacity:			0.25;
}


#bgFilled {
	background-color:	#669900;
	opacity:			0.75;
	text-align:			center;
	font-size:			28px;
	font-weight:		bold;
	text-decoration:	none;
	letter-spacing:		0;

}

#bgEmpty {
	background-color:	#ffffff;
	opacity:			0.25;
}



.circle {
    color: 				white;
    background-color: 	#aaa;
    border-radius:		50%;
    font-size: 			14px;
	padding-top:	    9px;
	padding-bottom:	    9px;
	padding-right:      2px;
}


.cross {

    position: relative;
    display: inline-block;
	opacity: 0.5;
	padding-right: 3px;
}

.cross::before, .cross::after {

    content: '';
    width: 90%;
    position: absolute;
	right: 0;
    top: 40%;
    border-bottom: 3px solid white;
}

.cross::before {

    -webkit-transform: skewY(-20deg);
    transform: skewY(-20deg);

}

.cross::after {

    -webkit-transform: skewY(20deg);
    transform: skewY(20deg);
}

.valueLabel {
	font-size:		10px;
	opacity:		0.5;
	text-transform:	uppercase;
	letter-spacing:	1px;
}

.value {
	font-size:		14px;
	text-transform:	uppercase;
	color:			#006699;
	font-weight:	bold;
	letter-spacing:	0;
}


.parent {
			position: 	relative;
			top: 		0;
			left: 		0;
}

.flag {
			position:	absolute;
			bottom: 	-3px;
			left: 		0;
			z-index:	2;
}

.close {
			position:	absolute;
			top: 		0;
			right: 		3px;
			z-index:	2;
}

.nameOnTop {
			vertical-align: bottom;
}



/* A LINKS
		HOVER */
a {
	color:#336699;

	text-decoration: none;
	
	padding-top:	3px;
	padding-bottom:	3px;
	
	padding-left:	0px;
	padding-right:	5px;
}


/* LS disabled 3/22/22

a:hover {
	color: 			  #000;
	opacity:		  0.50;
	background-color: white;
}

*/

/* TO DISABLE LINKS OTHERS */
a.disabled {
  pointer-events: none;
  cursor: default;
}


.chkFancy {

  /* 1.5-sized Checkboxes */
  -ms-transform: 		scale(1.5); /* IE */
  -moz-transform: 		scale(1.5); /* FF */
  -webkit-transform: 	scale(1.5); /* Safari and Chrome */
  -o-transform: 		scale(1.5); /* Opera */
  padding: 				5px;

}



.followUpSource {
	max-width: 		0;
	width:			0;
	max-height:		0;
	height:			0;

	position:		relative;
	left:			450px;

	z-index:		0;
	white-space:	nowrap;
	
	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:	 	50px;
	letter-spacing: 8px;
	font-weight: 	bold;
	text-transform:	uppercase;
}

.followUpSourceHello {
	color:       	#0066cc;  /* #669900  for green*/
}

.followUpSourceSignin {
	color:       	#669900;
}



.drpDown {

	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:	 	14px;
	color:       	#0066cc;

	text-transform:	capitalize;
	text-decoration:none;
}	



<!-- DIVIDER OR HR -->

.dividerFaded {
	color:				#ddd;
	background-color:	#ddd;
	border:				none;
	height:				1px;
}




.oddrow {
	border-style:			none none solid;
	border-collapse:		collapse;
	background-color:		rgb(229, 237, 250);
	padding: 				4px;
}

.evenrow {
	border-style:			none none solid;
	border-collapse: 		collapse;
	background-color:		rgb(238, 242, 246);
	padding: 				4px;
}


<!-- ENTHUSIASM FOR DROP-DOWNS

.enthNeutral {
	background-color:	#dddddd !important;
	color: 				#000;
}

.enthLacking {
	background-color:	#fff !important;
	color:				#ddd;
}

.enthLow {
	background-color:	#FFFF00 !important;
	color: #000;
}

.enthHigh {
	background-color:	#99CC00 !important;
	color: #fff;
}


.roundPlate {
	
	border-radius:	50%;
	max-width:		75px;
	max-height:		75px;
	height:			75px;
	width:			75px;
	box-shadow: 	2px 5px 7px #ccc;
	opacity:		1;
	text-align:		center;
}

.ptsOnPlate {
	color:			#fff;
	position:		relative;
	top:			22px;
	font-size:		30px;
	z-index:		10;
	opacity:		1 !important;
	font-weight:	bold;
}




















/* NEW STUFF */

.txtLabel {
	font-size: 		10px;
	letter-spacing: 1px;
	text-transform:	uppercase;
	display: 		inline;
	vertical-align: middle;
}

.txtWarning {
	font-size: 		18px;
	letter-spacing: 1px;
	text-transform:	uppercase;
	font-weight:	bold;
	display: 		inline;
	vertical-align: middle;
}

.btnSizePub {
	min-width:		40px;
	min-height:		40px;
	width:			40px;
	height:			40px;
	vertical-align:	middle;
	padding-top:	10px;
	padding-bottom: 10px;
}

.logoStyle {
	width: 			150px;
	padding:		10px;
	z-index:		2;
}

.portraitStyle {
	width: 		100%;
	height:		300px;
	object-fit: cover;
}





	/* SPINNER WHEEL ON LOAD */
	#loader {
		position: 			absolute;
		left: 				50%;
		top: 				50%;
		z-index:			1;
		margin: 			-75px 0 0 -75px;

	  	border: 			16px solid #f3f3f3;
  		border-radius:		50%;
	  	border-top:			16px solid #3498db;
  
  		width: 				75px;
	  	height: 			75px;
  
  		-webkit-animation:	spin 0.5s linear infinite;
	  	animation: 			spin 0.5s linear infinite;
 	}

	/* HIDDEN CONTENT FOR LOADER */
	#myDiv {
		display: 			none;
	}

	@-webkit-keyframes spin {
		0% { -webkit-transform: rotate(0deg);}
		100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	/* Add animation to "page content" */
	.animate-bottom {
		position: relative;
		-webkit-animation-name: animatebottom;
		-webkit-animation-duration: 1s;
		animation-name: animatebottom;
		animation-duration: 1s
	}

	@-webkit-keyframes animatebottom {
		from { bottom:-100px; opacity:0 } 
		to { bottom:0px; opacity:1 }
	}

	@keyframes animatebottom { 
		from{ bottom:-100px; opacity:0 } 
		to{ bottom:0; opacity:1 }
	}






.addTitle {
	
	font-size: 		20px;
	white-space:	nowrap;
	text-transform:	uppercase;
	font-weight:	bold;
	letter-spacing:	5px;
	padding:		7px;
	color:			#6699CC;
}




/* TO MAKE A GREYSCALE FILTER FOR IMAGES */

.greyScale {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: 		grayscale(100%);
}




	/* TOOLTIPS */

	.tooltip:hover .tooltiptext {
		display: 		block;
	}

	.tooltiptext {
		position: 		absolute;
		z-index: 		100;
		margin-left: 	125px;
		margin-top:		-10px;
		
		display: 		none;
		background: 	#fff;
		color:			#000;
		opacity:		1;
			
		text-align:		left;
		font-size:		11px;
		letter-spacing: 1px;
		line-height:	20px;
			
		max-width:		250px;
		
		padding: 		5px;
			
		border-radius: 	3px;
		box-shadow: 	0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 5px 100px 0 rgba(0, 0, 0, 0.19);
  
		font-family:	Verdana, Arial, Helvetica, sans-serif;
	}

	.tooltip {
		margin:			5px;
	}








.fencerBlockSmall {
	display:			inline-block;
	border-radius:		2%;
/*	box-shadow: 		3px 3px 5px #ccc; */
	padding:			0.5%;
	min-width:			100%;
	max-width:			100%;
	width:				100%;
	margin-top:			-3px;
	margin-bottom:		-3px;
}

.USFA, .ageGroup {
	font-size: 		0.7vw;
	letter-spacing:	0.05vw;
	padding-left:	0.2vw;
}

.weaponHoriz {
	position:	absolute;
	left:		-30px;
	top:		50px;
	max-width:	0;
	max-height:	0;
	z-index:	0;
	transform: 	rotate(-45deg);
}

.finishYear {
	height:		18px;
	position:	relative;
	top:		-5px;
}


.natAbility {
	position:	absolute;
	left:		35%;
	bottom:		45%;
	width:		0;
	max-width:	0;
	height:		0;
	max-height:	0;
	opacity:	0.75;
}








/* skills */

.levelSkillsLarge {
	position:		absolute;
	right:			130px;
	top: 			-25px;
	z-index:		0;
	
	font-size: 		200px;
	font-family:	Geneva, Arial, Helvetica, sans-serif;
	font-weight:	bold;
	opacity: 		1;
	max-width: 		0;
	max-height: 	0;
	width: 			0;
	height: 		0;

}

.levelSkillsLabel {
	position:		absolute;
	right:			100px;
	top: 			107px;
	z-index:		0;

	font-size:		10px;
	letter-spacing: 2px;
	font-weight: 	bold;
	text-transform: uppercase;
	color: 			#fff;
	opacity:		0.75;

	max-width: 		0;
	max-height: 	0;
	width: 			0;
	height: 		0;
}




/* GAGES */

.gagePoints {

	position:		relative;
	color:			#fff;
	text-shadow: 	2px 2px 4px #333;
		
	font-size:		200%;
	font-weight:	600;
	
	text-align:		center;
	justify-content:center;
	line-height:	90%;
  	align-items: 	center;

  	vertical-align:	middle;
	padding:		5px;

}

.hoursBadge {
	border-radius:		30px;
	background-color:	white;
	padding:			15px 8px 8px 8px;
	text-shadow: 		none !important;
	line-height:		0.7em;
}

.cTokensContainer {
	position:	relative;
	text-align:	center;
}

.cTokensValue {
	position:		absolute;
	top:			50%;
	left:			50%;
	font-size:		200%;
	font-weight:	600;
	display: 		flex;
	color:			#fff;
	text-shadow: 	2px 2px 4px #000;
}



/* BATTERY */

.gageBatBox {
	position:	relative;
	max-width:	0;
	width:		0;
	max-height:	0;
	height:		0;
	z-index:	0;
}

.gageBatAndChargeBox {
	position:		relative;
	display:		table-cell;
}

.gageBatCharge {
	position:		absolute;
	max-width:		0;
	width:			0;
	max-height:		0;
	height:			0;
	left:			5px;
	top:			3px;
	opacity:		0.75;
}

.gageBatChargeValue {
	position:		absolute;
	top:			30%;
	display:		table-cell;
	width:			100%;

	z-index:		10;
	
	font-family:	Arial;
	font-weight:	600;
	color:			#fff;
	text-shadow: 	2px 2px 4px #000;
	text-align:		center;

	letter-spacing:	1px;
	font-size:		150%;
}









/* BLINKING DOT */
	/*
		https://dev.to/ekafyi/blinking-dots-a-quick-look-at-css-animation-31gf
		with LS modificaitons 10/2/20
	
	 */

.dot {
  width: 			var(--dot-size);
  height: 			var(--dot-size);
  border-radius:	50%;
}

/* --- Animation --- */
/* Define animation keyframes */

@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.dot--main {
  animation: blink 1s infinite;
}

/* Use frames with "from" and "to" */
@keyframes choppyBlink {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* --- Sample Usage --- */

.live {
  --dot-size: 		0.5rem;
  --offline-color:	#999;
  display: 			inline-flex;
  align-items: 		center;
  padding: 			.5rem 1rem;
}

.live .dot {
  margin-right: .5rem;
}


.color {
    -webkit-animation:	up-right 1s infinite;
    -moz-animation: 	up-right 1s infinite;
    -o-animation: 		up-right 1s infinite;
    animation: 			up-right 1s infinite;
}

.green {
    background-color:	#339900;
}

.blue {
    background-color:	#33CCCC;
}

.red {
    background-color:	#FF3300;
}


/* CURSORS */
.grab {
	cursor: 		-webkit-grab;
	cursor: 		grab;
}


.skillGuidanceBlock {
	font-size:		12px;
	line-height: 	20px;
	letter-spacing: 1px;
}


.highlightTextBlock {
	font-size:		larger;
	font-weight:	600;
	letter-spacing: 0.03em;
	line-height:	1.5em;
}

.deHighlightTextBlock {
	opacity:		0.5 !important;
}



.blink_me {
  animation: blinker 1s linear infinite;
}

.blink_me {
  animation: blinker 1s linear infinite;
}



@keyframes blinker {
  50% {
    opacity: 0;
  }
}


.weekdayShort {
	font-weight:		bold;
	font-size:			1.2em;
	letter-spacing:		0.07em;
	font-weight:		900;
	text-transform:		uppercase;
	color:				green;
}


/* for highting values */
.numValue {
	font-size:		150%;
	font-weight:	900;
	margin-top:		-5px;
	color: 			#3366CC;
	white-space:	nowrap;
}

.noSizeInline {
	display:		inline-block;
	width:			0px;
	height:			0px;
	z-index:		0;
}




	/* https://www.w3schools.com/howto/howto_css_zoom_hover.asp */
	.zoom {
		z-index:				10 !important;
		text-align:				center;
		transition: 			transform .3s; /* Animation */
 		margin: 				0 auto;
	}
	.zoom:hover {
		position:				relative;
  		transform: 				scale(2); /* (Note: if the zoom is too large, it will go outside of the viewport) */
	}
	
	.click {
		cursor: pointer;
	}