@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
@import url(https://fonts.googleapis.com/css?family=Roboto:900);
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap')

@font-face {
    font-family: 'nexa_lightregular';
    src: url('./../../fonts/nlight/nexa_light-webfont.eot');
    src: url('./../../fonts/nlight/nexa_light-webfont.eot?#iefix') format('embedded-opentype'), url('./../../fonts/nlight/nexa_light-webfont.woff2') format('woff2'), url('./../../fonts/nlight/nexa_light-webfont.woff') format('woff'), url('./../../fonts/nlight/nexa_light-webfont.ttf') format('truetype'), url('./../../fonts/nlight/nexa_light-webfont.svg#nexa_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nexa_boldregular';
    src: url('./../../fonts/nbold/nexa_bold-webfont.eot');
    src: url('./../../fonts/nbold/nexa_bold-webfont.eot?#iefix') format('embedded-opentype'), url('./../../fonts/nbold/nexa_bold-webfont.woff2') format('woff2'), url('./../../fonts/nbold/nexa_bold-webfont.woff') format('woff'), url('./../../fonts/nbold/nexa_bold-webfont.ttf') format('truetype'), url('./../../fonts/nbold/nexa_bold-webfont.svg#nexa_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nexa_bookregular';
    src: url('./../../fonts/nbook/nexa_book-webfont.eot');
    src: url('./../../fonts/nbook/nexa_book-webfont.eot?#iefix') format('embedded-opentype'), url('./../../fonts/nbook/nexa_book-webfont.woff2') format('woff2'), url('./../../fonts/nbook/nexa_book-webfont.woff') format('woff'), url('./../../fonts/nbook/nexa_book-webfont.ttf') format('truetype'), url('./../../fonts/nbook/nexa_book-webfont.svg#nexa_bookregular') format('svg');
    font-weight: normal;
    font-style: normal;
}







.nexaTR{
    font-family:nexa_lightregular, "Open Sans", Arial, Verdana, sans-serif;
}
.nexaDR{
    font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
}
.nexaKR{
    font-family:nexa_bookregular, "Open Sans", Arial, Verdana, sans-serif;
}


* {
  box-sizing: border-box;
}
body {
    margin:0;
    font: normal 16px / 1.2 "Open Sans", Arial, Verdana, sans-serif ;
    background-color: #f1f1f1;
    text-align: center;
}




/*layout and common*/
.admin{
    position:fixed;
	font-size:.8em;
    z-index:88 ;
    background-color:green;
    cursor:pointer;
	display:block;
	text-align:left;
}

.menu-block, .menu-chevron-block{
    height:40px;
    border-right: 1px solid #ededed  ;
    width:25%;
    /*background-color:silver;*/
    cursor:pointer;
}
.mnuText{
    font-size:85%;
}

#menus, #chevrons {
    width:80%;
}
.menu-block-bot {
    height:30px;
}
.soc-med-img-narrow{
	display:none;
    width:22px;
	margin-right:.5em;
}
.soc-med-img-wide{
	display:none;
    width:22px;
	margin-right:.5em;
}
#ghost-pod{
    position:absolute;
    margin:auto;
    left:0; right:0;
    top:-900px;
	z-index:120;
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    background:green;
}
#page-head-strip{
	height:15px;
}
#page-head {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	background-color:gray;
}
.person-name{
    font-size:2em;
    padding:.3em 0;
}
.person-detail{
    font-size:1.2em;
    padding:.5em 0;
}
.person-sub{
    font-size:.7em;
}
#page-head-personal{
    font-family:nexa_bookregular, "Open Sans", Arial, Verdana, sans-serif;
}
#personal-detail{
    display:inline-block;
    width:100%;
    border:0px solid cyan;
}
.menu-over{
    background-color: mediumslateblue;
    color:white !important;
}
.menu-out{
    background-color: lightGray;
    color: darkslateblue;
}
.menu-block{
    display:flex;
	flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:80%;
}
.menu-block-top-img0{
	background:url("./../timp/nav_st_b.png");
}
.menu-block-top-img1{
	background:url("./../timp/nav_fo_b.png");	
}
.menu-block-top-img2{
	background:url("./../timp/nav_sp_b.png");	
}
.menu-block-top-img3{
	background:url("./../timp/nav_mp_b.png");	
}
.menu-block-top-inner{
	width:40%;
	height:40%;
	background-position: center;
	background-repeat:no-repeat;
	background-size: contain;
}
.menu-block, .menu-block:link, .menu-block:visited, .menu-block:hover{
    text-decoration:none;
    color:darkslateblue;
}
.menu-chevron-block{
    background-color:transparent;
    border-right: 1px solid transparent;
}
.chevron-down {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 50px 0 50px;
    border-color: #123456 transparent transparent transparent;
    visibility:hidden;
}
.menuHighLight{
    background-color:mediumseagreen;
}
.chevronHighLight{
    border-top-color:mediumseagreen;
}
#img-foot{
	border-radius:4px;
}


.rollerNumber-frame{
	font-family:nexa_boldregular;
	font-size:2.8em;
	color:transparent;
	display:inline-block;
	position:relative;
}
.rollNumber-frame, .rollNumber{
	font-family:nexa_boldregular, "Open Sans";
	font-size:1.4rem;
}
.rollNumber-frame{
	position:relative;
	color:darkgray;
	border:2px solid purple;
}
.rollNumber{
	position:absolute;
	top:0;
	left:0;
	color:red;
}


#notice-close{
	font-size:2em;
	font-weight:bold;
	position:absolute;
	right:.1em;
	top:-.3em;
	cursor:pointer;
}

.hide-during-load{
	visibility:hidden;
}
.displayNone{
    display:none;
}
.displayInitial{
    display:initial;
}
.widthWide{
    width:660px;
    max-width:95%;
    background-color:transparent;
}
.widthNarrow{
    width:300px;
    background:transparent;
}
.primary{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:top;
    background-color:#f0f0f0;
}
.cage-margin{
    margin:0 20px;
}
.cage-aside{
    border:0px solid orange;
    background-color:#f0f0f0;
	margin-top:1em;
}
.aside-box-holder{
    margin-top:2.1em;
    padding-bottom:1em;
    background-color:#dbdbdb;
    border:1px solid transparent; /*prevent margin collapse. Normally this is transparent*/
}
.aside-box {
    display:flex;
    flex-direction:column;

    margin-top:1em;
    margin-bottom:1em;transparent
    background-color: ;
    border:1px solid transparent; /*prevent margin collapse. Normally this is transparent*/
}
.info-head{
    font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
    font-size:1.2em;
    margin:1em .8em 0;
    color:#033974;
    border:1px solid transparent;
}
.info-detail{
    margin: .5em 1em 0;
    font-size:.8em;
    border:1px solid transparent;
}
.aside-display{
    margin-top:.8em;
	border:0px dashed purple;
}
.std-cnr1{
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}
.std-cnr2{
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.std-cnr3{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.std-cnr5{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.std-cnr5a{
    -webkit-border-top-right-radius: 0;
    -moz-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}
.lower-panel{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    background-color:#d3d3d3;
    margin-top:1em;
}



/* knob slider */
.kSlider{
	position:absolute; top:0; left:0; 
	padding:.1em .3em; 
	background-color:#fcb427;
	color:transparent;
	border-radius:2px 0 0 2px;
}
.knob{
	position:relative;
	padding:.1em.3em;
	cursor:pointer; 
}
.knob-hi{
	color:#145873;
}
.knob-lo{
	color:gray;
}
.kSwitchBox{
	display:inline-block;
	font-weight:normal;
}
.kSwitchFrame{
	display:flex;
	position:relative;
	overflow:hidden;
	border-radius:3px;
	background-color:white;
	text-align:center;
	border:1px solid lightgray; 
}
#kSwitchPassing .kSlider, #kSwitchPassing .knob{
	padding:.6em .3em;
}
#kSwitchNetGun, #kSwitchDivNat{
	font-size:.6em;
}



/*drop down box*/
#drop-list-bin{
    border:0px solid red;
    position: absolute;
    z-index:855;
    margin: auto;
    display: block;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}
.drop-list-bin-RP{
    width:110%;
}
.drop-list-bin-FO{
    width:95%;
    top:1.9em !important;
}
.drop-list-bin-MP{
    width:95%;
    top:2em !important;
}
#drop-list-head{
    display:flex;
    justify-content:space-between;
    background-color:brown;
    font-size:1.2em;
    font-weight:bold;
}
.drop-list-head-RP{
    background-color:#6d2077;
}
.drop-list-head-text{
	font-size:.8em;
    padding:.6em 0;
}
#drop-list-crate {
    list-style-type:none;
    margin:0;
    padding:.5em 1em 1em;
    width:100%;
    background:lightslategray;
}
.dropDown-row{
    cursor:pointer;
    padding:.3em 0;
	font-size:.9em;
    border-bottom:1px solid green;
	text-align:left;
	color:white;
}
.dropDown-row-over{
	background-color:gray;
	/*font-weight:bold;*/
}
.dropDown-row-out{
	color:white;
	background-color:revert;
	/*font-weight:normal;*/
}
#dropItem_MORE {
    padding:.5em 0 0 0;
    border:0px solid purple;
	text-align:center;
}
.moreButt{
	font-size:1.5em;
	font-weight:bold;
    color:white !important;
	background-color:transparent !important;
}	
.compareFO-meet{
    margin-right:.3em;
    text-align:left;
    font-size:.8em;
	font-weight:bold;
    overflow:hidden;
	max-width:30%;
	border:0px solid yellow;
}
.compareFO-findButt{
    cursor:pointer;
    color:#797979;
	font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
}
.compareFO-clear{
    cursor:pointer;
    color:white;
    font-weight:bold;
    font-size:1.6em;
    margin-left:.4em;


    /* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* Rotate Origin
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;*/
}
.compareFO-empty{
    cursor:pointer;
    color:white;
    font-weight:bold;
    font-size:1.3em;
    margin-left:.4em;
}	
.compareFO-element{
	position:relative;
	border:0px solid purple;
	width:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:center;
	margin:2% 0;
	padding:2% 0;
	background:#768fb7;
	
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.drop-close {
    border:0px solid purple;
    padding:0 .4em;
    cursor:pointer;
    font-size:1.8em;
}


/*jq Dialog Box*/
.ui-dialog{
	font-family:nexa_bookregular !important;
	
	/*set outside border of dialog box*/
	padding:1px !important;
	
	z-index: 1001 !important;
}
.ui-widget.ui-widget-content{
	/*set outside border of dialog box*/
	border:0px solid orange !important;	
}
.ui-dialog .ui-dialog-content{
	/*permit names to flow down*/
    overflow:visible !important;
}
.ui-dialog-titlebar{	
	/*title panel formatting*/
    background-color:dimGray !important;
	font-size:1.3em;
}


/* common headings */
.switch-child{
    cursor:pointer;
}
.hide-delay{
    opacity:0;

    -webkit-transition: all 2.5s ease;
    -moz-transition: all 2.5s ease;
    -o-transition: all 2.5s ease;
    transition: all 2.5s ease;

}
.show-delay{
    visibility:visible;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.img-page-head-wide{
	width:200px;
	position:auto;
	top:0;
}
.img-page-head-narr{
	width:100px;
	position:relative;
	top:12px;
}


.person-stats{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	border-bottom:1px solid whitesmoke;
}


/* RP landing page*/
.lanButt{
	border:1px solid gray;
	padding:.1em;
	margin:.1em .2em;
	background-color:white;
	cursor:pointer;
	font-family:"open sans";
}
#notice{
    position:absolute;
    z-index:70;
    top:-15px;
    margin:auto;
    left:0; right:0;
    width:50%;
    border:0px solid darkgray;
    color:white;
    background-color:#6d2077;
    padding:.8em 0;
    display:none;
}
.curtain{
	position: absolute;
	z-index: 10;
	display: none;
	width: 95%;

	max-width:500px;
	top:4px;
	text-align:center;
	margin:auto;
	left:0; right:0;
	background-color: #272727;
	border:0px solid gray;
}
.curtain-head{
	display:flex;
	justify-content:center;
	background-color: #6d2077;
	color:white;
	padding:.75em 0;
	font-weight:bold;
}




/*FO page compare*/
#compareFO-panel{
    font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
    display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	margin-top:1em;
	display:none;
    background-color:#f0f0f0;
}
.compareFO-DDanchor{
    position:absolute;
    border:0px solid red;
    width:100%;
	top:-.4em;
	z-index:-3;
}
#tomato-box{
    left: 50%;
    transform: translate(-50%, 0);
    z-index:860;
    width:100% !important;
    max-width:650px;

    background-color: dimGray;
    color:whitesmoke;
	
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	
    border:1px solid #c5c5c5;
    display:none;
}
.tomato-close{
    font-size:1.5em;
    padding:.3em .5em;
    cursor:pointer;
}
#tomato-save{
    cursor:pointer;
	font-weight:bold;
	margin:1em 0 .4em 0;
	background-color:#001964;
	border:0px solid purple;
	padding:.1em .8em;
}
.compareFO-input-frame{
	width:50%;
	text-align:left;
	position:relative;
}
.compareFO-input{
    idth:75%;
    outline:none;
    border:none;
	padding:0.2em;
	/*font-family:nexa_bookregular, "Open Sans";*/
}
.compareFO-bib{
	position:absolute;
	font-size:.6em;
	font-weight:bold;
	color:#001964;
	background:transparent;
	left:0;
	top:2.7em;
}
.compareFO-percent{
    display:none;
    border:1px solid green;
}
#compareFO-user-display{
	position:relative;
	background:lightgray;
	border:0px solid purple;
	text-align:left;
	overflow:hidden;
	white-space: nowrap;
	font-size:.8em;
	padding: .2em 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;		
}
#compareFO-user-display-txt{
	ackground:gray;
	opacity:0;
}	
#compareFO-user-display-ellipsis{
	position:absolute;
	right:0; 
	cursor:pointer;
	border:0px solid green;
	display:flex;
}
.compareFO-user-display-ellipsis-dots{	
	font-weight:bold;
}
.compareFO-user-display-ellipsis-text{
}
.compareFO-percentLine{
    display:none;
}
.compareFO-compareDiv{
    display:none;
}	
.magnifyingG{
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	background-color:#111a60;
	color:transparent;	
}


/*FO page items*/
#head-spacer{
    height:.5em ;
    border-bottom:0px solid #dbdbdb;
	xbackground-color:tan;
}
#compareFO-launch{
    border: 1px solid navy;
    background: #dbdbdb;
	/*font-weight:bold;*/
    padding: .6em 0;
    cursor: pointer;
}
.compareFO-userShow{
    display:inline-block;
    cursor:pointer;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
	padding:0 .3em;
}

.img-heading{
	position:relative;
    font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
    display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:end;
	
	xheight:1.8em;	
    margin-top: 1.5em;
	
    padding: 0 .3em .25em .3em;
	border:0px solid red;
}

.img-head-title{
	position: relative;
	z-index: 13;
	font-size:.75em;
	text-align:left;
	
	top:10px;
	left:-2px; 
	border-radius: 2px;
	padding: 0 .4em;
	border:1px solid #b8b8b8 ;

	-webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.15);
	-moz-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.15);
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.15);
	
	background-color: #dbdbdb;
	xvisibility:hidden;
}
sup { vertical-align: top; font-size: 0.6em; }



.fo-img-pod{
	font-size:0;
	position:relative;
	overflow:hidden;
	border:0px solid red;
}
.fo-img {
    max-width:100%;
    border:0px solid lightgray;
    margin-top:12px;
}
.fo-img-olay {
    position: absolute;
    width: 100%;
    top: 0;
    left: -800px;
    z-index: 20;
    border:0px solid purple;;
}
#fo-img-compare {
    position: absolute;
    top: 0;
    z-index: 25;
    font-size:initial;
	/*display and opacity set as per end of fadeOut*/
	display:none;
	opacity:0;
	eft:100px;
	border:2px solid green;
	
}
.fo-img-sandwichBoard{
    position:absolute;
    top:28%;
    left:3.60%;
	
    font-size:55%;
    /*line-height:.95em;*/
	font-family:nexa_boldregular, "Open Sans";
		
    border:1px solid gray;
    background:#c8c8c8;
    padding:.1em;
	
	opacity:.9;
	
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;	
}
.fo-img-alt {
    position: absolute;
    width: 100%;
    height:100%;
    top: 0;
    font-size:initial;
    left:-800px;
    z-index: 25;
    border:0px solid green;
}
.fo-img-alt-text{
    position:absolute;
    top:28%;
	left:7%;
    border:1px solid #7d7d7d;
    background:#c8c8c8;
    padding:0 .4em 0 .1em;
	font-size:.8em;
	font-style:italic;
	word-wrap: break-word;
}
.fo-img-nat {
    position: absolute;
    width: 100%;
    height:100%;
    top: 0;
    font-size:initial;
    left:-800px;
    z-index: 25;
	word-wrap: break-word;
}
.fo-img-secondary{
	/*border:2px solid purple;*/
}
.nation-hili{
	display:inline-block;
	color:red;
}
.std-frame1{
    border:2px solid #dddddd;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 3px;
}
.std-frame2{
    border: 1px solid #aeaeae;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.frameShadow{	
	-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.15);	
}
.fo-img-shader{
    position:relative;
    background-color:white;
}
.shader{
    position:absolute;
    top:0;
    height:100%;
    width:0;
    z-index:10;	

	-webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;	
	
	/*gradient shading
	https://cssgradient.io/*/
	opacity:.3;
	background: rgb(170,185,228);
	background: linear-gradient(90deg, rgba(170,185,228,1) 0%, rgba(74,99,172,1) 100%);
	/*
	Trad coloured shading
    opacity:.2;
    background-color:#4a63ac;
	*/


}
.rhombus{	
    position:absolute;
	visibility:hidden;
    border:1px solid #001964;
    z-index:30;
	font-size:initial;
	color:white;
	background-color:#2397c8;
	width:1.5%    ;
	bottom:2%;

	
	/* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* Rotate Origin */
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;	
}
.fo-foot-text{
    font-size:.85em;
	color:#414b67;
    padding:0 0 .4em 0;
    text-align:right;
    margin-right:.8em;
	font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
}
.oppSexSlider-pod{
    display:inline-block;
    width:90%;
    background-color:purple;
    margin-bottom:.2em; /* arbitrary, stops load bounce*/
}
.keyNumber {
    font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
    color:#033974;
    border-bottom:1px solid #033974;
    font-size:2.8em;
    margin-top:0;
}




.soc-med-pod{
    cursor:pointer;
}
#soc-med-pod-wide{
    padding:.6em .2em;
}
#soc-med-frame{
    display:none;
}
.soc-med-item{
	width:20%;
	min-width:40px;
	max-width:60px;
	padding:.4em .3em;
	border:0px solid green;
	cursor:pointer;
}



#oppSexSlider{
	color:white;
	background-color:#001964;
	width:0;
	padding:.8em 0 .8em .3em;
	font-weight:bold;
	font-family:nexa_boldregular, Open Sans, Arial, Verdana, sans-serif;
	border-right:1px solid lightgray;
}




/* PASSING */
#passing-pod{
    display:flex; flex-wrap: wrap; justify-content:center; align-items:center;
	font-family:nexa_boldregular, "Open Sans";
    padding:.3em 1em;
	margin:2em 0 1em 0;
}
.passing-switch{
	padding:.5em;
	border:1px solid gray;
	cursor:pointer;
	color:#033974;
}
.passing-switch-left{
	border-radius: 5px 0 0 5px;
	border-width: 1px 0 1px 1px;
}
.passing-switch-right{
	border-radius: 0 5px 5px 0;
	border-width: 1px 1px 1px 0;
}
.passing-switch-on{
	background-color:#fcb427;
}
.passing-switch-off{
	background-color:#e6e6e6;
}
#passing-dataFrame{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	border: 0px solid orange;
	margin-top:1em  ;
	color:#033974;
}
.passing-dataBlock{
	padding:.3em;
	background-color:lightgray;
	margin:0 .3em;
}
.passing-ampersand{
	 padding:0 .3em 0 .3em;
	 font-size:2em;
	 font-family:nexa_bookregular, "Open Sans";
}



/* sp page*/
#watch-split-pod {
	top:21%; left:9%; width:49%; height:62%;
}
#watch-speed-pod{
	position:absolute;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	font-size:initial;
	top:20%;
	left:52.5%;
	width:17.1%;
	height:62%;
	border:0px solid red;
	color:whitesmoke;
}	
.watch-text-pod {
	border:0px solid purple;
	width:37%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	height:100%;
}
.watch-text-head-split, #watch-text-head-speed{
	color:#61aae8;
	font-weight:bold;
}
.watch-digits-split {
	position:relative;
	font-weight:bold;
	opacity:0;
}
.watch-digits-speed{
	position:relative;
	font-weight:bold;	
	width:75%;
}
.watch-text-foot-split, .watch-text-foot-speed{
	color:#61aae8;
	font-style:italic;
}
.watch-text{
	font-size:50%;
}



#medianNetTime{
    display: inline-block;
    margin-bottom:.4em;
}
.sp-img-heading{
    font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
    font-weight: bold;
    color: peru;
    margin-top: 1.5em;
    text-align: left;
    padding: 0 0 .25em .3em;
}
.splitSpeed-img-holder{
    overflow:hidden;
    height:200px;
    min-height:165px;
    background-position:center;
    background-size:cover;
    border:0px solid black;
	
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;		
}
.sp-img-fore{
    position:relative;
    width:100%;
    left: 50%;
    top:8%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    border:0px solid red;
}
.split-text-pod{
    position:absolute;
    color:white;
    top:14%;
    width:25%;
    overflow:hidden;
    border:0px solid orange;
}
.split-head-text{
	font-size:.8em;
	font-weight:bold;
}
#split-text-left{
    left:18.5%;
}
#split-text-right{
    left:56.5%;
}
.split-text{
    font-family:"Open Sans", Arial, Verdana, sans-serif;
    line-height:1.2em;
    font-weight:bold;
}
.split-units{
	font-size:.7em;
}
#speed-pod-text{
	position:relative;
	border:0px solid purple;
	height:100%;
	width:100%;
}
#speed-pod-text-top{
	position:absolute;
	-webkit-perspective:900px;
	perspective:900px;
	width:100%;
	bottom:35%;
	border:0px solid red;
}
#speed-pod-text-top-word{
	font-family:Roboto, Open Sans;
	font-size:3.8em;
	font-weight:bold;
	line-height:.4em;
	transform:rotateX(67deg) rotateY(0deg);
	color:#ebebeb;
	text-shadow:2px 2px #5c5c5c;
}
#speed-pod-text-bot{
	position:absolute;
	-webkit-perspective:900px;
	perspective:900px;
	width:100%;
	bottom:8%;
	border:0px solid red;
}
#speed-pod-text-bot-word{
	font-family:Roboto, Open Sans;
	font-size:4.5em;
	font-weight:bold;
	line-height:.4em;
	transform:rotateX(67deg) rotateY(0deg);
	color:#ebebeb;
	text-shadow:2px 2px #5c5c5c;
}
.kph{
    font-size:.5em;
}
#beye-back{
	position:relative;
	overflow-y:hidden;
	background-color:#e1e7e2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;	
}
.beye-leg-item{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	font-size:.7em;
	border:0px solid red;
	font-family:nexa_boldregular, "Open Sans";
	color:#164578;	
}
.beye-leg-item-dot{
	margin-right:.2em;
	display: inline-block;
	width: 11px;
	height: 10px;
}
.beye-leg-item-text{
	
}
.be-slat{
	width: 10px;
	height: 162px;
	position: absolute;
	
	top: 58px;
	font-size: 0.5em;
	text-align: center;
	color: lightgray;
	background-color:gray;
	opacity:0;
	border:0px solid white;
}
.beye-hili{
	background: gray;
	opacity:.8;
}
.be-hint{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 95.5%;
	color: #033974;
	font-size: 0.7em;
	display: inline-block;
	width: 610px;
	border:10px solid red;
}
#beyeHint-pod{
	border:0px solid red;
	font-size:.7em;
	height:34px;
	color:#164578;
	padding: .2em 0 0 0;
	font-family:nexa_boldregular, "Open Sans";
}
.be-hint-others{
	display:inline-block;
	font-weight:bold;
	background-color:#cccccc;
	font-size:.9em;
	font-family:nexa_lightregular, "Open Sans";
	position:relative;
	top:.4em;
	line-height:1em;
}
.be-secs-adrift{
	position:absolute;
	top:-1em;
	left: 50%; 
	transform: translate(-50%, -50%); 
	z-index:50;
	font-weight:bold;
	background-color:#cccccc;
	font-size:.6em;
	font-family:nexa_lightregular, "Open Sans";
}
.be-hint-lines{
	display:inline-flex;
	flex-direction:column;
	align-items:center;
}
.be-hint-line1{
	font-size:.7em;
	font-style:italic;
	line-height:.6em;
}
.be-hint-hero{
	ackground-color:gray;
	color:red;
	ont-weight:bold;
	padding:0 .2em;
	order-radius:2px;
	ont-size:.9em;
}
.be-hint-secs{
	font-weight:bold;
	background-color:#cccccc;
	font-size:.9em;
	/*font-style: italic;*/
	font-family:nexa_lightregular, "Open Sans";
}


#piechart_3d {
	height:320px;
}
#pieSpecLegend{
	display:flex;
	justify-content:space-around;
	font-size:.7em;
	color:white;
	border:0px solid purple;
	position:absolute;
	bottom:2%;
	left:50%;
    transform: translate(-50%, 0);
	
	z-index:4;
	font-family:"open Sans";
	font-weight:bold;
	width:60%;
}
.pieSpeclegend-dot{
	height: 30px;
	width: 38px;
	border-radius: 50%;
	display:flex; flex-direction:column; justify-content:center; align-items:center;
}




/* map page */
#map-head-pod {
	background-color:#001964;
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-family:nexa_boldregular, "Open Sans";
	margin:0 0 0.1em 0;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}
.map-head-butt{
	border:0px solid red;
	display:inline-block;
	cursor:pointer;
	background-color:#2397C9      ;
	color:whitesmoke;
	padding:.4em;
	margin:1em;
	font-family:nexa_boldregular, "Open Sans";
	font-size:.8em;
	z-index:10;
}
#map-friend-text{
	position:relative;
	border:0px solid red;
	display:inline-block;
	color:#ececec;
	font-size:.8em;
	margin:.6em 0;
	border:0px solid red;
	height:100%;
}
.map-friend-text-engine{
	font-size:.9em;
}	
#mapFriendInput{
    border:0;
    outline:none;
}
.mapMark{
    position:absolute;
    z-index:49;
    display:none;
    opacity:.95;
	display:none;
}
.mapArrow {
    position:absolute;
    z-index:50                ;
    visibility:hidden;
}
.map-friend-text2{
    font-size:.7em;
	margin-top:.2em;
	font-family:nexa_bookregular, "Open Sans";
}
.histo-shell__{
	display:inline-block;
	border:0px solid red;
}
.histo-box {
	display:flex;
	flex-direction:column;
	align-items:center;
	background-color:#dbdbdb;
	border:0px solid orange;
}
.histo-frame{
	font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
	position:relative;
	display:inline-block;
	border-left:1px solid gray;
	border-bottom:1px solid gray;
	margin:0 1.2em;
}
#histo-engine{
	display:flex;
	flex-direction:row;
	align-items:end;
	height:12em;          /******************************/
}
.histoPipe{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	width:2.6em;              /******************************/
	border:1px solid #fcb427;
	border-bottom:0;
	margin:0 .5em;
	color:white;	
	
	background: -webkit-linear-gradient(#c7181f , #920a1d);
	/* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#c7181f , #920a1d);
	/* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#c7181f , #920a1d);
	/* For Firefox 3.6 to 15 */
	background: linear-gradient(#0a213b, #3f6186);

	-webkit-border-radius: 5 5 0 0;
	-moz-border-radius: 5 5 0 0;
	border-radius: 5px 5px 0 0;
	
	-webkit-box-shadow: 5px 2px 5px -3px rgba(0,0,0,0.44); 
	box-shadow: 5px 2px 5px -3px rgba(0,0,0,0.44);
}
.histoPipe-text-bottom{
	color:whitesmoke;
	font-size:.7em;
	margin-bottom:.2em;
}
.histoPipe-last{
	margin-right:.5em;
}
.histoPipe-text{
	font-size:.7em;
	padding-top:.3em;
}
.histo-tail{
	font-size:.8rem;
	font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
	margin:.5em 0;
	width:88%;
	height:3rem;
}
.histo-tail-text{
	position:absolute;
	bottom:-2.6em;
	font-size:.8rem;
	line-height:.8rem;
	color:#033974;
}
.histo-axis-mark{
	position:absolute;
	font-size:.7em;
	border-top:2px solid gray;
}
.histo-axis-mark div{
	position:relative;
	top:-.7em;
	left:.3em;
	background-color:#dbdbdb;
	padding-left:.2em;
}
.histo-speed-unit{
	font-size:.70em;
	color:lightgray;
	font-style:italic;
}

#crossMat-pod{
	position:absolute;
	z-index:58;
	font-family:nexa_bookregular, "Open Sans", Arial, Verdana, sans-serif;
	top:12%; left:5%;
	border:0px solid red;
	border-radius:4px;
	box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.45);
	visibility:hidden;
	width:70%;
}
.crossMat-trig{
	cursor:pointer;
	color:#fcb247;
	border-bottom:1px dashed gray;	
}
.crossMat-img{
	width:100%;
	border-radius:7px;
	display:none;
}	
.crossMat-idxButt {
	position:absolute;
	font-size:2em;
	font-weight:bold;
	font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
	bottom:2%;
	line-height:.7em;
	background-color: whitesmoke;
	border:0px solid red;
	cursor:pointer;
	border-radius:3px;
	padding: 0 .3em;	
}
#crossMat-close{
	position:absolute; top:2%; right:2%;
	font-size:.8em;
	font-weight:bold;
	font-family:nexa_boldregular, "Open Sans", Arial, Verdana, sans-serif;
	line-height:.7em;
	cursor:pointer;
	color:darkgray;
}
#crossMat-controls{
	position:absolute; top:0; left:0;
	z-index:55;
	height:100%;
	width:100%;
	font-size:initial;
	border:0px solid red;
}
#crossMat-words{
	position:absolute; top:0; left:0;
	height:100%;
	width:100%;
	font-size:initial;
	border:0px solid orange;	
}
#crossMat-text-10{
	font-size:.6em;
	margin-top:.4em;
	border:0px solid green;
}
#crossMat-text-20{
	border:0px solid peru;
	margin:.2em 2.5em 0 2.5em;
	font-size:1.2em;
	font-style:italic;
}
#crossMat-text-30{
	margin:.1em 0 .2em 0;
	color:#444444;
}
#crossMat-text-40{
	position:relative;
	top:-0.3em;
	font-size:.6em;
}
#crossMat-text-50{
	position:absolute;
	bottom:17%;
	font-size:1.3em;
}
#crossMat-text-60{
	position:absolute;
	bottom:4%;
	font-size:.7em;
}


/* WHAT-IF OPERATIONS */
#butt-advanced{		
	position:absolute;
	bottom:.3rem;
	right:27px;
	display:inine-block;
	border:0px solid #85ac6e;
	background-color:#618440;
	color:whitesmoke;
	font-size:.7em;
	font-weight:bold;
	border-radius:3px;
	padding:.3em;
	cursor:pointer;	
	z-index:60;	
}
#whatif-loader {
	position:absolute;
	z-index:60   ;
	top:0;
	left:50%;
	transform:translateX(-50%);
	font-size:initial;
	display:flex;
	flex-direction:column;
	align-items:center;
	margin-top:1em;
	border:1px solid lightgray;
	border-radius:6px;
	width:80%;
	background:linear-gradient(to right, #dedede, #b8b8b8);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	padding:0 0 .5em 0;
	display:none;
}	
#whatif-loader-buttons{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-around;
	border:0px solid pink;
	padding: .3em 0;
	border:0px solid orange;
}
.whatif-loader-button {		
	background:#618440;
	color:whitesmoke;
	border-radius:4px;
	cursor:pointer;
	padding:.2em;
}
#input-disabler{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgb(0, 0 ,0, 0.7);
	display:none;	
}	
#whatif-warning-notice{
	position:absolute;
	z-index:90;
	background:linear-gradient(to left, #dedede, #b8b8b8);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	color:black;
	text-align:center;
	border:1px solid gray;
	border-radius:6px;
	width:40%;	
	/*top:10%;*/
	left:10%;
	cursor:pointer;
	display:none;
}	
#whatif-warning-notice-close{
	position:absolute;
	top:0;
	right:.2em;
	cursor:pointer;
	font-weight:bold;
	font-size:1.8em;
}
.whatif-warning-notice-hili{
	font-family: 'nexa_boldregular';
	/*font-family: 'nexa_lightregular';*/
	/*ont-family: 'nexa_bookregular';*/
	
	background:#618440;
	color:whitesmoke;
	display:inline-block;
	padding:.1em;
	margin-top:.2em;
	border-radius:3px;
}
#whatif-time{
	outline:none;
	border:none;
}
#different-time-text1{
	font-weight:bold;
	max-width:80%;
	display:inline-block;
}
#whatif-loader-dist{
	font-size:.85em;
	text-decoration: underline;
	cursor:pointer;
	margin:1em;
}
#whatif-help-button{
	cursor:pointer;	
}	
#whatif-help-panel{		
	position:absolute;
	z-index:70;
	width:70%;
	top:0;
	background-color:#e5e5e5;
	
	left:50%;
	transform:translateX(-50%);
	
	border:1px solid gray;
	border-radius:4px; 
	display:none;
	font-size:.8em;
}
#whatif-help-panel-close{
	position:absolute;
	top:.2em;
	right:.8em;
	cursor:pointer;
}
.whatif-image-half {
	width: 15px; /* Half of the image width */
	height: 15px; /* Full height of the image */
	background-image: url('./../timp/help_times.png'); /* Replace with your image path */
	background-size: 45px 15px; /* Original size of the image after it is rolled onto page? */
}
.whatif-image-close {
	width: 20px; /* Half of the image width */
	height: 20px; /* Full height of the image */
	background-image: url('./../timp/help_times.png'); /* Replace with your image path */
	background-size: 60px 20px; /* Original size of the image after it is rolled onto page? */
}




/* WIDTH RESPONDERS */
@media only screen and (min-width: 400px) {
    #admin {
        background-color: #9ACD32;  /* =============== PRE GREEN */ 
    }
	.dropDown-row{
		font-size:.9em;
	}	
	.img-head-title{
		font-size:0.8em;
		top:6px;	
	}
	.fo-img-alt-text{
		font-size:68%;
	}
    .drop-list-bin-RP{
        width:100%;
    }	
	#speed-pod-text-top-word{
		font-size:4em;
	}	
	#speed-pod-text-bot-word{
		font-size:5em;
	}
	#crossMat-pod{
		width:50%;
	}
	.map-friend-text-engine{
		font-size:1em;
	}
}@media only screen and (min-width: 600px) {
    #admin {
        background-color: yellow;  /* =============== YELLOW */ 
    }
	.dropDown-row{
		font-size:1em;
	}	
    .menu-block, .menu-chevron-block{
        height:50px;
    }
    .mnuText{
        font-size:100%;
    }
    #menus, #chevrons {
        width:80%;
    }
    .menu-block-bot {
        height:30px;
    }	
    .drop-list-bin-RP{
        width:80%;
    }
	.rhombus{
		width:1.5%;
		bottom:2%;
	}
	.img-head-title{
		font-size:0.9em;
		top:6px;	
	}
	.fo-img-alt-text{
		font-size:75%;
	}		
	.watch-text{
		font-size:70%;
	}
	#map-friend-text{
		font-size:.9em;
	}
	.map-head-butt{
		font-size:1em;
		border:0px solid yellow;
	}	
	#speed-pod-text-top-word{
		font-size:4.7em;
	}
	#speed-pod-text-bot-word{
		font-size:6em;
	}
	#kSwitchNetGun, #kSwitchDivNat{
	font-size:.7em;
	}
	#crossMat-pod{
		width:35%;
	}	
}@media only screen and (min-width: 770px) {
    #admin {
        background-color: orange;  /* =============== ORANGE */ 
    }
    .menu-block, .menu-chevron-block{
        height:60px;
    }
    .mnuText{
        font-size:100%;
    }
    #menus, #chevrons {
        width:75%;
    }
    .menu-block-bot {
        height:30px;
    }
    .curtain {
		width:75%; 
    }
	.drop-list-bin-RP{
        width:75%;
    }
    .fo-img-sandwichBoard{
        font-size:70%;
    }
	.rhombus{
		width:1.5%;
		bottom:2%;
	}
	.img-head-title{
		font-size:0.9em;
		top:5px;	
	}		
	.watch-text{
		font-size:80%;
	}
	#speed-pod-text-top-word{
		font-size:5.7em;
	}
	#speed-pod-text-bot-word{
		font-size:7em;
	}	
	#kSwitchNetGun, #kSwitchDivNat{
	font-size:.8em;
	}
	#crossMat-pod{
		width:35%;
	}	
}@media only screen and (min-width: 1030px) {
    #admin {
        background-color: red; /* =============== RED */ 
    }
    .menu-block, .menu-chevron-block{
        height:60px;
    }
    .mnuText{
        font-size:100%;
    }
    #menus, #chevrons {
        width:70%;
    }
    .menu-block-bot {
        height:30px;
    }
    .drop-list-bin-RP{
        width:75%;
    }
	.rhombus{
		width:1.5%;
		bottom:2%;
	}
	.img-head-title{
		font-size:1em;	
		top:5px;
	}	
	.watch-text{
		font-size:90%;
		top:22px;
	}
	#map-friend-text{
		font-size:1em;
	}
	#speed-pod-text-top-word{
		font-size:6em;
	}
	#speed-pod-text-bot-word{
		font-size:8em;
	}
	#crossMat-pod{
			width:30%;
	}