/* CSS FOR MOBILE DEVICES 
	More info here:
	https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

	normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css

	 * 1. Change the default font family in all browsers (opinionated).
	 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: 				sans-serif; /* 1 */
  -ms-text-size-adjust: 	100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */

	/* Set full height: http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height */
    /* body will set it's height based on its parent, which is html */
  height:					100%;

  /* set full width as well */
  width:					100%;
}


/* apply a natural box layout model to all elements, but allowing components to change
	http://www.paulirish.com/2012/box-sizing-border-box-ftw/; 
*/

html,body {
  box-sizing:				border-box;
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
    /* min-height is needed for pages that might scroll, ie they may contain _more_ than 100% of viewport height */
  	min-height: 			100%;

/* FADE IN FUNCTION */
	opacity:				0;
   	transition: 			opacity 0.3s;
	-webkit-transition: 	opacity 0.3s; /* Safari */
	
    font-family:			'Roboto', sans-serif !important;
    font-size:				18px;
	letter-spacing: 		2px;

  /* needed to prevent unwanted scroll-bars */
	padding: 				0px !important;
  	margin: 				0px !important;

	/* LS */
	margin-top:				20px !important;
	
	
	/* temp */
	background-color:		#0066cc; /* Escrimeur solid blue color */
	color:					#fff;
}





/*
	for Contents Container below menu
*/
.topPad {
	position:				relative;
	top:					100px;
}








/*
	No highlights
*/

:focus, img, a, a:hover, a:click, a:visited {
    outline:				none !important;
	border:					none;
  	text-decoration:		none;
	color:					inherit;

    -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;
}


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;
}



/* CHECKBOXES */

.myCheckbox label {
  display: 			inline-block;
  padding:			10px;
  white-space: 		nowrap;
  color:			#fff;
  text-transform:	uppercase;
  letter-spacing:	0.2em;
  font-size:		smaller;
}

.myCheckbox input {
  vertical-align: 	middle;
}

.myCheckbox label span {
  vertical-align: 	middle;
  white-space:		nowrap;
}




/* TEXT OPTIONS */

.titlePage {
	white-space:	nowrap !important;
	font-size:		5vh;
	letter-spacing: 0.1em;
	font-weight: 	bold;
	text-transform:	uppercase;
}

.titleLarge {

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

.nameLarge {
	font-family: 	Geneva, Arial, Helvetica, sans-serif;
	font-size:	 	2vh;
	font-variant: 	small-caps;
}

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

.smallLabel {
	font-size:		1.5vh;
	letter-spacing:	0.06vh;
	color: 			#fff;
	font-family:	Arial;
	text-transform:	uppercase;
}


.txtWarning {
	font-size: 		5vw;
	letter-spacing: 1vw;
	text-transform:	uppercase;
	font-weight:	bold;
}

.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;
}


.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;
}










/* BUTTONS */

.btnSizePub {
	min-width:		7vh;
	width:			7vh;
	vertical-align:	middle;
	padding-top:	5vw;
	padding-bottom:	5vw;
}

.btnSizeLarge {
	min-width:		15vh;
	width:			15vh;
	height:			auto;
	vertical-align:	middle;
}

/* Placement of edit button on top of picture */
.editBut {
	position:	absolute;
	z-index:	10;
	top: 		1vh;
	right:		20vw;
	
	max-width:	0;
	max-height: 0;
}

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





.logoStyle {
	width: 			20vh;
	padding:		3%;
	z-index:		10;
}

.portraitStyle {
	width: 			100%;
	height:			35vh;
	object-fit: 	cover;
}




/* Center the Loader Wheel */

/* FOR MOBILE */
#loader {
	position:			absolute;
	top:				0;
	bottom:				0;
    left: 				0;
	right: 				0;
    margin: 			auto;

	transform:			translate(-50%, -50%);

	border-radius:		50%;
	
	border: 			5vw solid #f3f3f3;
	border-top:			5vw solid #3498db;
  
	width: 				20vw;
	height: 			20vw;
  
    -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 }
}



/* TO MAKE A GREYSCALE FILTER FOR IMAGES */

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


.fencerBlockSmall {
	display:			inline-block;
	padding:			1.7%;
	max-width:			100%;
	min-width:			100%;
	width: 				100%;
	margin:				1%;
}

/* 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;
}


/* A LINKS
		HOVER */
		
a {
	text-decoration: none;
}

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

@media (hover: hover) {
  	a:hover {
  		color: blue;
	}
}




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

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

.USFA, .ageGroup {
	white-space:	nowrap;
	font-size:		2.7vh;
	letter-spacing:	0.2vh;
	line-height:	3.5vh;
}

.weaponHoriz {
	position:	absolute;
	left:		-5vw;
	top:		6vh;

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

	z-index:	0;

	transform: 	rotate(-45deg);
}

.contentsTbl {
	margin-left:	20px;
	margin-right:	25px;
	margin-top:		50px;
}

.copyrightTbl {
	margin-top:		25px;
}

.mobMenu {
	letter-spacing:	0.1vh;
	font-size:		1.8vh;
	font-weight:	normal;
	white-space:	nowrap;
	text-transform:	uppercase;
	font-family:	Arial;
	line-height:	3vh;
}

.copyRight {
	opacity: 		0.5;
	font-family:	Arial, Helvetica, sans-serif;
	font-size:		15px;
	letter-spacing: 3px;
	text-transform:	uppercase;
	white-space:	nowrap;
}

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

.finishYear {
	position:	relative;
	height:		5vh;
	top:		-0.7vh;
}







/* FOR FENCER CARD */

.hand {
	position:		absolute;
	left:			10px;
	top: 			105px;
	z-index:		0;
	
	font-size: 		70px;
	letter-spacing:	0px;
	font-family:	Geneva, Arial, Helvetica, sans-serif;
	font-weight:	800;
	opacity: 		0.25;
	max-width: 		0;
	max-height: 	0;
	width: 			0;
	height: 		0;
}

.levelSkillsLarge {
	position:		absolute;
	top: 			100px;
	font-size: 		150px;
	font-weight:	800;
	z-index:		0;
}




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


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

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

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

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

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

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




/* 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 {
	top:				-0.2em;
	border-radius:		50%;
	background-color:	white;
	padding-top:		0.5em;
	text-shadow: 		none !important;
	line-height:		0.7em;
	letter-spacing:		0px !important;
	font-size: 			1.8em;
}


.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 */


/* level B */
.gageBatBox {
	position:		relative;
	z-index:		0;
	
	max-width:		0;
	width:			0;
	max-height:		0;
	height:			0;
}



.gageBatAndChargeBox {
	position:		relative;
	display:		table-cell;
	width: 			0;
	height: 		0;
	padding-bottom: 55px;
}

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

.gageBatChargeValue {
	position:		relative;
	font-family:	Arial;
	font-weight:	400;
	color:			#fff;
	text-shadow: 	1px 1px 2px #666;
	letter-spacing:	0px;
	font-size:		25px;
	top: 			-40px;
	left: 			10px;
}







/* 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;
}

.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:		1.1em;
	font-weight:	900;
	margin-top:		-5px;
	color: 			#3366CC;
	white-space:	nowrap;
}

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


/* MAIN CONTAINER FOR CENTERED CONTENTS */
.mainContainer {
	padding: 				20px !important;
  	margin: 				20px !important;
}

.moto {
	display: 				block;
	white-space:			nowrap;
	font-weight: 			300;
	letter-spacing: 		2px;
	text-transform:			uppercase;
	font-size: 				70%;
	text-align:				center;
}










.title {
	font-size:				35px;
	font-weight:			800;
	text-transform:			uppercase;
	white-space:			nowrap;
	letter-spacing:			2px;
	opacity:				0.85;
}

/* FANCY CHECKBOX
	/* https://codeburst.io/pure-css3-input-as-the-ios-checkbox-8b6347d5cefb */

input.apple-switch {
	position: 				relative;
	appearance: 			none;
	outline: 				none;
	width: 					50px;
	height: 				30px;
	background-color: 		#fff;
	border: 				1px solid #99ccff;
	border-radius: 			50px;
	box-shadow: 			inset -20px 0 0 0 #fff;
	transition-duration:	200ms;
}

input.apple-switch:after {
	content: 				"";
	position: 				absolute;
	top: 					1px;
	left: 					1px;
	width: 					26px;
	height: 				26px;
	background-color:		transparent;
	border-radius: 			50%;
	box-shadow: 			2px 4px 6px rgba(0,0,0,0.2);
}

input.apple-switch:checked {
	border-color: 			#99ccff;
	box-shadow: 			inset 20px 0 0 0 #99ccff;
}

input.apple-switch:checked:after {
	left: 					20px;
	box-shadow: 			-2px 4px 3px rgba(0,0,0,0.5);
}

input, select, textarea {
	padding:				7px;
	margin:					2px;
}

input[type=text],[type=tel],[type=email]{
	height:					40px;
}

select {
	height:					42px;
}


input[type=text],[type=password], [type=tel], [type=email], select, textarea {
	width: 					100%;
	height:					50px;
	margin-top:				5px;
}

.medium {
	max-width:				65%;
}

.short {
	max-width:				16%;
}


/* 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 */
}


td {
	padding:			2%;
}


.logo {
	width: 				100%;
	padding:			10px;
}

.logoSmall {
	width: 				75%;
	opacity: 			0.9;
}


.mobButtonBlock {
	display:			inline-block;
	vertical-align:		middle;
	margin:				10px;
}

.btnSizePub {
	width:				75px;
	height:				auto;
	padding:			5px;
}


.label {
	font-size:			12px;
	padding:			10px;
	white-space:		nowrap;
	text-transform:		uppercase;
}

.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;

}


.tblBordered {
		border-collapse:	collapse;
		border: 			thin inset #eee;
		border-spacing: 	0;
		color:				#fff;
}


/* IMAGES */
.imgLogo {
		width:				auto;
		height:				100px;
		margin-left:		10px;
}


.navbarPos {
	padding-right:			10px;
}


.menu {
		position:			fixed;
		top:				0;
		width:				100%;
		z-index:			10;
}






/* Keeps screen in portrait mode
		https://stackoverflow.com/questions/38359782/how-to-lock-viewport-to-portrait-orientation-in-html5-css3

@media screen and (orientation: landscape) {
	html {
		/* Rotate the content container */
		transform:			rotate(-90deg);
        transform-origin:	left top;
        /* Set content width to viewport height */
        width: 				100vh;
        /* Set content height to viewport width */
        height: 			100vw;
        overflow-x: 		hidden;
        position: 			absolute;
        top: 				100%;
        left: 				0;
	}
}

@viewport {  
	orientation: portrait;  
}  


/* Makes image container fit screen width
	https://stackoverflow.com/questions/45283365/full-width-container-on-mobile
*/
@media screen and (max-width: 760px){
	.container{ width: 90vw; margin: 0; padding: 15px; }
}	
	
*/




/* LS. For drop-down menus to work
	https://stackoverflow.com/questions/18023493/bootstrap-dropdown-sub-menu-missing	
*/
.dropdown-submenu {
  	position:		relative;
}
.dropdown-submenu .dropdown-menu {
  	top: 			0;
  	left: 			100%;
  	margin-top:		-1px;
}
.navbar-nav li:hover > ul.dropdown-menu {
	display:		block;
	font-size: 		85%;
	border: 		0;
}
  
.navbarPos {
	padding-right:	20px;
}


/*
	LS
	https://stackoverflow.com/questions/50668594/remove-border-color-for-navbar-toggler-hamburger-icon-in-bootstrap-using-css
*/
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline:		none;
    box-shadow:		none;
}