/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	STATS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#STATS, #LINEAGES, #CLUBS, #CELL_CULTURES, #MENUACTIONS, #ID_CARD .info_container #DATA {
	
	display: flex;
	flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}




.stat_tile {
	
	position: relative;
	
	height: 80px;
	width: 80px;
	
	padding: 10px;
	
	border-radius: 10px;
	
	background-color: rgba(0,0,0,.07);
	
	overflow: hidden;
	
	pointer-events: none;
}



.stat_tile div {
	
	height: auto;
	width: 100%;
	
	margin: 0px;
	
	background-color: transparent;
	
	border-radius: 0px;
	
	hyphens: auto;
	overflow-wrap: break-word;
}





/*    DESKTOP    */
@media not (pointer: coarse) {
	.stat_tile:hover {
		background-color: rgba(0,0,0,.1);
	}
	
	/*    ACTIVE STATE    */
	.active:hover {
		background-color: rgba(255,255,255,.8);
		filter: invert(1);
	}

	.stat_tile:hover div {
		border-radius: 0px;
		background-color: transparent;
	}
}	


/*    ACTIVE STATE    */
.stat_tile:active, .active {
	background-color: rgba(255,255,255,.8);
	filter: invert(1);	
}

/*    SEMI-ACTIVE STATE    */
.semi_active {
	border: 2px solid rgba(0,0,0,.8);
	padding: 8px;
}

.stat_tile:active .emoji, .active .emoji, .stat_tile:active .flag, .active .flag {
	filter: invert(1);	
}




/*    DATA    */
.stat_tile {
	
	font-size: 28px;
	line-height: 80%;
	font-weight: bold;
}


/*    METRIC    */
.stat_tile div:nth-of-type(1) {
	
	font-size: 18px;
	line-height: 100%;
}



/*    VERY BIG DATA    */
.very_big_data div:nth-of-type(1) {
	
	font-size: 42px;
	line-height: 80%;
}



/*    BIG DATA    */
.big_data div:nth-of-type(1) {
	
	font-size: 36px;
	line-height: 80%;
}

/*    MEDIUM DATA    */
.medium_data div:nth-of-type(1) {
	
	font-size: 24px;
	line-height: 80%;
}



/*    SMALLER DATA    */
.small_data div:nth-of-type(1) {
	
	font-size: 18px;
	line-height: 100%;
}


/*    EVEN SMALLER DATA    */
.smaller_data div:nth-of-type(1) {
	
	font-size: 14px;
	line-height: 100%;
}


/*    EVEN SMALLER DATA    */
.flag_data {
	
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	
	border: 1px solid rgba(0,0,0,.07);
}



/*    INTERACTIVE    */
.interactive {
	
	pointer-events: all;
	cursor: pointer;
	
	background-image: url(../images/stats_detail.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 15px;
	background-origin: content-box;
}




/*    METABLOKS CATEGORY TILE	*/
.metabloks {
	
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    
	pointer-events: all;
	cursor: pointer;
	
	font-size: 10px;
	line-height: 120%;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
}


/* 	ACTIVE CATEGORY MARKER  */
.metabloks div {
	
	position: absolute;
	
	height: 6px;
	width: 6px;
	
	margin-top: 50px;
	margin-left: 0px;
	
	padding: 0px;
	
	border-radius: 50%;
	
	background-color: white;
	border: 1px solid white;
}	


@media not (pointer: coarse) {
	
	.metabloks:hover {
		
		background-image: linear-gradient(to right,rgba(0,0,0,.1) 0%,rgba(0,0,0,.1) 0%);
	}
	
	.metabloks:hover div {
		
		border-radius: 50%;
	}	
}


.metabloks:active {
	
	background-color: white !important;
	
	filter: invert(1) saturate(0);
	
	color: black;
}





/*    LABEL    */
.stat_tile div:nth-of-type(2) {
	
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 100%;
	font-weight: normal;
	
	padding-top: 10px;
}





/*    CAROUSEL    */
.carousel {
	
	display: none;
	
	pointer-events: all;
	cursor: pointer;
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	LINEAGES AND CLUBS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#LINEAGES, #CLUBS, #CELL_CULTURES {
	
	margin-top: 0px;
	margin-bottom: 0px;
}


#LINEAGES .stat_tile, #CLUBS .stat_tile, #CELL_CULTURES .stat_tile {
	
	height: 90px;
	
	display: inline-block;
}



/*    LINEAGE NAME    */
#LINEAGES .stat_tile .lineage_name, #CELL_CULTURES .stat_tile .cell_culture_color {
	
	height: 30px; 
	width: 30px; 
	
	margin-top: -2px;
	margin-bottom: -3px;
	
	border-radius: 50%;
	
	display: flex; 
	justify-content: center;
	align-items: center;
	
	font-size: 18px;
	line-height: 100%;
	
	background-color: #333; 
	color: white;
}

/*    LINEAGE LIGHTSTRIP    */
#LINEAGES .stat_tile .lightstrip {
		
	height: 5px;
	width: 100%;
	
	margin-top: 12px;
	
	padding-top: 0px;
	
	border-radius: 4px;
	
	overflow: hidden;
		
	display: flex;
}


#LINEAGES .lightstrip div {
	
	flex-grow: 1;
}



/*    LABEL    */
#LINEAGES .stat_tile div:nth-of-type(3) {
	
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 100%;
	font-weight: normal;
	
	padding-top: 5px;
}



/*    DON'T INVERT IN ACTIVE STATE    */
#LINEAGES .stat_tile:active .lineage_name, #LINEAGES .stat_tile:active .lightstrip, #CELL_CULTURES .stat_tile:active .cell_culture_color {
	filter: invert(1);
}


/*    CLUB NAME    */
#CLUBS .stat_tile div:nth-of-type(1) {
	
	line-height: 95%;
}


/*    F1 TEAM LOGO    */
#LINEAGES .stat_tile div img {
	
	height: 100%;
	margin-top: 0px;
}








/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MINI ID CARD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#mini_ID_card {
	
	position: absolute;
	
	min-width: 100px;
	
	padding: 10px;
	padding-top: 7px;
	
	background-color: gray;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 8px;
	
	font-size: 11px;
	line-height: 120%;
	color: black;
	text-align: left;
	
	animation: pop_open .1s 0s forwards;
	
	z-index: 1000001;
}


#mini_ID_card .tag {

	display: inline-block; 
	
	margin-top: 0px; 
	margin-bottom: 3px; 
	margin-right: 6px;
	
	padding: 3px; 
	padding-left: 6px; 
	padding-right: 6px; 
	
	border-radius: 3px; 
	
	background-color: rgba(0,0,0,.1); 
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}


#mini_ID_card h2, #mini_ID_card h3 {
	
	font-family: Helvetiva, sans-serif;
		
	font-size: 18px;
	line-height: 100%;
	/* white-space: nowrap; */
		
	margin-top: 3px;
	margin-bottom: 8px;	
}


/* 	METABLOKS TITLE	 */
#mini_ID_card h3 {
		
	margin-top: 5px;
		
	padding-right: 5px;	
		
	font-size: 18px;
	line-height: 100%;
	white-space: normal;
	
/* 	text-transform: uppercase; */
}

#mini_ID_card img {
	
	min-height: 120px;
	min-width: 100%;
	
	margin-top: 0px;
	
	background-color: rgba(0,0,0,.3);
	
	border-radius: 6px;
}

#mini_ID_card h2 img {
	
	min-height: auto;
	min-width: auto;
	
	height: 14px;
	
	margin-top: 0px;
	
	background-color: transparent;
	
	border-radius: 0px;
}



#mini_ID_card #ACTIONS {
	
	width: 100%;
	
	margin-top: 15px;
}


#mini_ID_card .button_primary, #mini_ID_card .button_secondary, #mini_ID_card .button_placeholder, #mini_ID_card input {
		
	height: auto;
	width: 100%;
	
	margin-top: 10px;
	margin-bottom: 0px;
	
	padding: 13px;
	padding-left: 15px;
	padding-right: 15px;

	background-color: black;
	
    border: 1px solid black;
    border-radius: 5px; 
    
    font-family: Roboto, Helvetica, Arial, 'Sans serif';
    font-size: 14px;
    line-height: 100%;
    font-weight: 600;
    color: white;
	
	display: flex; 
	justify-content: center;
	align-items: center;
}


#mini_ID_card .button_secondary {
		
	background-color: transparent;
	
	border: 1px solid black;
	
	color: black;
	font-weight: 400;
	
	padding: 12px;
	padding-left: 15px;
	padding-right: 15px;
}


#mini_ID_card .button_placeholder {
	
	position: relative;
	
	margin-top: -42px;
	
	font-weight: 400;
	color: rgba(0,0,0,.5);
	
	border: none;
	
	background-color: rgba(0,0,0,.1);
	
	pointer-events: none;
}


	

#mini_ID_card span {
		
	display: flex; 
	justify-content: flex-start;
	align-items: center;
	
	white-space: nowrap;
}


#mini_ID_card span .color {
	
	height: 11px;
	width: 11px;
	flex-shrink: 0;
	
	margin-left: 5px;
	
	border-radius: 50%;
	
	display: inline-block;
	
	background-color: black;
	
	pointer-events: all;
	cursor: pointer;
}


#mini_ID_card #DESKTOP_HINTS {
	
	margin-top: 10px; 
	
	opacity: .5;
	
	font-style: italic;
}	


/* 	SLIGHTLY BIGGER TEXT ON MOBILE	 */
@media (pointer: coarse) {
	
	#mini_ID_card {
		
		min-width: 160px;
		max-width: 200px;
		
		font-size: 14px;
		line-height: 120%;
	}
		
	#mini_ID_card h2 {
		
		font-size: 24px;
	}
	
	#mini_ID_card h2 img {
		
		height: 18px;
	}
}


	

#mini_ID_card .button_primary:active, #mini_ID_card .button_secondary:active {
	
	filter: invert(1);
}





#mini_ID_card .countdown_bar {
		
	height: 2px;
	width: calc(100% - 4px);	
	
	margin-top: 10px;
	margin-left: 2px;
	
	display: flex;
	justify-content: flex-end;
		
	background-color: rgba(0,0,0,.1); 
	
	border-radius: 1px;
}

#mini_ID_card .countdown_bar div {
		
	height: 100%;
	width: 0%;	
		
	background-color: rgba(0,0,0,.8); 
	
	border-radius: 10px;
}



@keyframes pop_open {
	0% { transform: scale(1); opacity: 0; }
	1% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}



@keyframes countdown {
	0% { width: 100%; }
	100% { width: 0%; }
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	
	M A C R O    I D    C A R D
	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#ID_CARD {
	
	position: fixed;
	
	height: 700px;
	width: 400px;
	
	top: 50vh;	
	left: 50vw;	
	
	margin-top: -350px;
	margin-left: -200px;
	
	padding: 20px;
	
	color: black;
	
	background-color: white;
	background-size: cover;
	
	overflow: hidden;
	
	user-select: none;
	-webkit-user-select: none;

	z-index: 1000000;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MACRO ID CARD: DNA LOAD SPINNER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#LOAD {
	
	position: fixed;
	
	height: 50px;
	width: 100px;
	
	top: 50%;
	left: 50%;
	
	margin-top: -25px;
	margin-left: -50px;
	
	background-image: url(../images/DNA.gif);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	
	z-index: 0;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MACRO ID CARD: INFO CONTAINER (DATA)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*	ID CARD INFO AND DATA	*/
#ID_CARD .info_container {
	
	position: absolute;
	
	top: 20px;
	
	height: 80%;
	width: calc(100% - 40px);	
	
	pointer-events: none;
	
	z-index: 2;
}


#ID_CARD .info_container #DATA {
		
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	
}



#ID_CARD .info_container #DATA .stat_tile {
	
	width: calc((400px - 40px - 30px) / 4);
	
	font-size: 18px;
	line-height: 100%;
	font-weight: 400;	
}



#ID_CARD .info_container #DATA .stat_tile div:nth-of-type(1) {
	
	
}


/*    INTERACTIVE    */
#ID_CARD .info_container #DATA .interactive {

	background-image: url(../images/id_detail.png);
}


#ID_CARD .info_container #DATA .stat_tile div .flags {
	
	display: grid;
	justify-content: flex-start;
	align-items: flex-start;
	grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}



#ID_CARD .info_container #DATA .stat_tile .ethnicity_mix div {
	
	width: 100%;
	
	margin: 0px;
	margin-bottom: 2px;
	
	padding: 0px;
	
	font-size: 12px; 
	line-height: 100%;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	grid-template-columns: none;
	gap: 3px;
}

	

/*   LANGUAGE FLAGS   */
#ID_CARD .info_container #DATA .stat_tile div .flags .flag, #ID_CARD .info_container #DATA .stat_tile .ethnicity_mix div .flag {
	
	position: relative;
	
	padding: 0px;
	
	width: 100%; 
	max-height: 18px;
	max-width: 18px;
	padding-bottom: 100%; 
	height: 0; 
	overflow: hidden;
	
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}


/*   DNA PERCENTAGE FLAGS   */
#ID_CARD .info_container #DATA .stat_tile .ethnicity_mix div .flag {
	
	height: 12px;
	width: 12px;
	
	padding-bottom: 0%; 
}	



/*   EYE GAZE STATS MINIATURES   */
#ID_CARD .info_container #DATA .stat_tile .eye_gaze_miniature {
	
	height: 10px; 
	width: 17px; 
	
	position: absolute;
	
	margin-top: -13px;
	margin-left: 40px;
	
	display: flex; 
	justify-content: center;
	align-items: center;
	gap: 1px;	
}

#ID_CARD .info_container #DATA .stat_tile .eye_gaze_miniature:nth-of-type(2) {

	margin-top: -18px;
}

#ID_CARD .info_container #DATA .stat_tile .eye_gaze_miniature div {
	
	height: 8px; 
	width: 8px;
	
	padding: 0px;

	border: 1px solid black;
	border-radius: 50%;
	
	display: flex; 
	justify-content: center;
	align-items: center;	
}

#ID_CARD .info_container #DATA .stat_tile .eye_gaze_miniature div div {
	
	height: 3px; 
	width: 3px;

	background-color: black;
	border-radius: 50%;	
}




/*   FULL SCREEN HEIGHT ID CARD ON SCREENS THAT ARE LESS-ISH TALL THAN ID CARD   */
@media screen and (max-height: 750px) {
	
	#ID_CARD {
		height: 100vh;	
		top: 0px;
		margin-top: 0px;
	}		
}


/*   FULL SCREEN WIDTH ID CARD ON SCREENS THAT ARE LESS-ISH WIDE THAN ID CARD   */
@media screen and (max-width: 450px) {
	
	#ID_CARD {
		width: 100vw;
		left: 0px;
		margin-left: 0px;
	}	
	
	#ID_CARD .info_container #DATA .stat_tile {
		width: calc((100vw - 40px - 30px) / 4);
	}	
}


/*   FULL SCREEN ID CARD ON VERTICAL SCREENS THAT ARE LESS THAN 500PX WIDE   */
@media (orientation:portrait) and (max-width: 500px) {
	
	#ID_CARD {
		height: 100vh;
		width: 100vw;
		
		top: 0px;
		left: 0px;
		
		margin-top: 0px;
		margin-left: 0px;
	}	
	
	#ID_CARD .info_container #DATA .stat_tile {
		width: calc((100vw - 40px - 30px) / 4);
	}
}	

/* 	THREE TILES	 */
@media screen and (max-width: 374px) {
	
	#ID_CARD .info_container #DATA .stat_tile {

		width: calc((100vw - 40px - 20px) / 3);
	}	
}


/*	IFRAME	*/
#ID_CARD iframe {
	
	height: 100%;
	width: 100%;
	
	margin: 0px;
	padding: 0px;
	
	border: none;
	
	background-color: transparent;
}	





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MACRO ID CARD: PIC CONTAINER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*	ID CARD PICS	*/
#ID_CARD .pic_container {
	
	position: absolute;
	
	bottom: 40px;
	left: 0px;
	
	height: calc(100% - 40px);
	width: calc(100% - 0px);	
	
	display: flex;
	justify-content: space-around;
	align-items: flex-end;

	z-index: 1;
}


@media not (pointer: coarse) {
	#ID_CARD .pic_container {
		/* overflow-x: scroll; */
	}
}


#ID_CARD .pic_container .PIC, #ID_CARD .pic_container .HOLOGRAM {
	
	transform-origin: bottom center;	
	
	/* content-visibility: auto;
	contain-intrinsic-size: 80px; */
}




/*	FAMILY TREE	*/
#ID_CARD .pic_container .family_tree {
	
	height: calc(60px * 5);
	width: 100%;
	
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}


#ID_CARD .pic_container .family_tree .generation {
	
	height: 60px;
	width: 100%;
	
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
}


#ID_CARD .pic_container .family_tree .generation .pseudo {
	
	height: 30px; 
	width: 20px;
}


#ID_CARD .pic_container .family_tree .generation .connector_line {
	
	position: absolute;
	
	height: 21px;
	
	pointer-events: none;

	visibility: hidden;
}

#ID_CARD .pic_container .family_tree .generation .connector_line .horizontal {
	
	width: 100%;
	height: 1px;
	
	background-color: silver;
	
	overflow: hidden;
}


#ID_CARD .pic_container .family_tree .generation .connector_line .vertical {
	
	width: 1px;
	height: 100%;
	
	margin-left: 50%;
	
	background-color: silver;
	
	overflow: hidden;
}



#ID_CARD .pic_container .family_tree .generation .connector_line .horizontal div {
	
	width: 100%;
	height: 1px;
	
	background: transparent;
	border-top: 1px dotted white;
	border-bottom: 1px dotted white;
}

#ID_CARD .pic_container .family_tree .generation .connector_line .vertical div {

	width: 1px;
	height: 100%;
	
	margin-left: 0px;
	
	background: transparent;
	border-left: 1px dotted white;
	border-right: 1px dotted white;
}

/*	FAMILY TREE DELAYED APPEARANCE	*/
@keyframes family_tree_delay {
	0% { visibility: hidden; }
	99% { visibility: hidden; }
	100% { visibility: visible; }
}







/*	DESCENDANTS	*/
#ID_CARD .pic_container .descendants_tree {
	
	height: calc(60px * 6);
	width: 100%;
	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


#ID_CARD .pic_container .descendants_tree .generation {
	
	height: 60px;
	width: 100%;
	
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
}

#ID_CARD .pic_container .descendants_tree .generation .PIC, #ID_CARD .pic_container .descendants_tree .generation .HOLOGRAM  {
	
	margin-bottom: 1px;
}	

#ID_CARD .pic_container .descendants_tree .generation .separator_line {
	
	position: absolute;
	
	height: 1px;
	width: calc(100% - 40px);

	border-bottom: 1px dashed rgba(0,0,0,.3);
}








/*	PIC TAGS	*/
#ID_CARD .pic_container .pic_tag {
	
	position: absolute;
	
	display: flex; 
	justify-content: center;
	
	margin-top: -10px; 
	
	transform-origin: top left;
	
	z-index: -1;
	
	pointer-events: none;
}

/*    TAGS CONTENT	*/
#ID_CARD .pic_container .pic_tag div {
	
	display: inline-block;
	margin: 0 auto;
	
	padding: 3px; 
	padding-left: 6px; 
	padding-right: 6px; 
	
	border-radius: 3px; 
	
	background-color: #F2F2F2; 
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	
	font-size: 12px;
	line-height: 120%;
	color: rgba(0,0,0,.6);
	white-space: nowrap;
}

/*    INTERACTIVE TAGS (TO SHOW INHERITANCE)	*/
#ID_CARD .pic_container .pic_tag div div {
	
	margin-top: -3px;
	margin-bottom: -3px;
	margin-left: -6px;
	margin-right: -6px;
	
	padding: 3px; 
	padding-left: 6px; 
	padding-right: 6px;
	
	pointer-events: all; 
	cursor: pointer;
}

/*    INTERACTIVE TAGS ARROWS	*/
#ID_CARD .pic_container .pic_tag div div .parent_1_arrow, #ID_CARD .pic_container .pic_tag div div .parent_2_arrow {
	
	display: inline-block;
	
	height: 15px;
	width: 15px;
	
	margin-left: 5px;
	margin-right: -2px;
	
	background-image: url(../images/arrow.png);
	background-position: center 3px;
	background-size: 70%;
	background-repeat: no-repeat;
	background-color: transparent;
	
	opacity: .6;
	
	pointer-events: none;
	
	transform: scaleX(-1);
}

#ID_CARD .pic_container .pic_tag div div .parent_2_arrow {
	
	margin-left: -2px;
	margin-right: 5px;
	
	transform: none;
}

/*    INTERACTIVE TAGS INHERITANCE NUMBERS	*/
#ID_CARD .pic_container .pic_tag div div .number {
	
	margin-left: 5px;
	margin-right: -2px;
	
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 4px;
	padding-right: 4px;
	
	font-size: 11px;
	line-height: 120%;
	font-weight: 400;
	
	border: 1px dotted rgba(0,0,0,.3);
	border-radius: 4px;

	pointer-events: none;
}





/*	EXPAND / CONTRACT	*/
#ID_CARD .pic_container .expand, #ID_CARD .pic_container .contract {
	
	position: absolute;
	
	height: 40px;
	width: 40px;
	
	bottom: 0px;
	right: 15px;

	background-color: rgba(255,255,255,.8);
	background-image: url(../images/actions/expand_active.png);
	background-position: center center;
	background-size: 80%;
	background-repeat: no-repeat;
	
	border-radius: 10px;
	
	z-index: 1;
	
	pointer-events: all;
	cursor: pointer;
}

#ID_CARD .pic_container .contract {

	top: 15px;
	bottom: auto;
	
	background-image: url(../images/actions/collapse_active.png);
}




@media not (pointer: coarse) {
	#ID_CARD .pic_container .pic_tag div div:hover {
		background-color: rgba(0,0,0,.1);
	}
	
	#ID_CARD .pic_container .expand {
		background-image: url(../images/actions/expand.png);
	}
	
	#ID_CARD .pic_container .contract {
		background-image: url(../images/actions/collapse.png);
	}
	
	#ID_CARD .pic_container .expand:hover {
		background-image: url(../images/actions/expand_active.png);
	}
	
	#ID_CARD .pic_container .contract:hover {
		background-image: url(../images/actions/collapse_active.png);
	}
}

#ID_CARD .pic_container .pic_tag div div:active {
	background-color: rgba(255,255,255,.8);
	color: black;
	filter: invert(1);	
}

#ID_CARD .pic_container .pic_tag div div:active .parent_1_arrow, #ID_CARD .pic_container .pic_tag div div:active .parent_2_arrow {
	opacity: 1;
	filter: invert(0);	
}

#ID_CARD .pic_container .pic_tag div div:active .number {
	border: 1px solid transparent;
}

/*	F1 TEAM NAMES	*/
#ID_CARD .pic_container .pic_tag img {
	
	height: 10px;
	margin-top: 2px;
}





/*	ID CARD PICS	*/
#ID_CARD .pic_container .PIC .mouth {
	
	/* transform: none !important; */
}

#ID_CARD .pic_container .PIC .eyes {
	
	/* opacity: 1 !important; */
}

#ID_CARD .pic_container .PIC .legs, #ID_CARD .pic_container .PIC .leg {
	
	/* animation: none !important; */
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MACRO ID CARD: DOT INDICATORS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*	ID CARD DOTTIES	*/
#ID_CARD .dots_container {
	
	position: absolute;
	
	bottom: 8px;
	
	height: 20px;
	width: calc(100% - 40px);
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	transform-origin: center center;
	
	z-index: 2;
}

#ID_CARD .dots_container div {
	
	height: 6px;
	width: 6px;
	
	border-radius: 50%;
	
	background-color: rgba(0,0,0,.07);
	
	cursor: pointer;
}

#ID_CARD .dots_container .active {

	background-color: rgba(255,255,255,.8);
	filter: invert(1);
	
	pointer-events: none;
}


@media not (pointer: coarse) {
	#ID_CARD .dots_container div:hover {
		outline: 3px solid rgba(0,0,0,.07);
	}
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MACRO ID CARD: CLOSE AND BACK
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*	ID CARD CLOSE BUTTON	*/
#ID_CARD #CLOSE  {
	
	position: absolute;
	
	top: 14.5px;	/* 5px */
	right: 10px;	/* 5px */
	
	height: 50px;
	width: 50px;
	
	background-image: url(../images/close.png);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	
	cursor: pointer;
	
	z-index: 3;
}	


@media not (pointer: coarse) {
	
	#ID_CARD #CLOSE:hover  {
		background-image: url(../images/close_tag.png);
		background-size: 60%;
	}
}	



/*	ID CARD BACK BUTTON	*/
#ID_CARD #BACK {
	
	display: inline-block;
	
	height: 32px;
	width: 32px;
	
	margin-right: 16px;
		
	background-image: url(../images/back.png);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	
	cursor: pointer;
	
	pointer-events: all;
}	

@media not (pointer: coarse) {
	
	#ID_CARD #BACK:hover  {
		
	}
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MACRO ID CARD: TITLE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*	ID CARD INFO AND STATS	*/
#ID_CARD .info_container h1, #ID_CARD .info_container h2 {
	
	margin-top: 0px;
	margin-bottom: 30px;
	
	padding-right: 40px;
	
	font-family: Helvetiva, sans-serif;
	font-size: 42px;
	line-height: 100%;
}


#ID_CARD .info_container h1 {
	
	font-size: 56px;
	line-height: 100%;
}



#ID_CARD h3 {
	
	margin-top: 0px;
	margin-bottom: 10px;
	
	padding-right: 40px;
	
	font-size: 24px;
	line-height: 100%;
	
	cursor: default;
}	



#ID_CARD h2 img {
	
	height: 28px;
	margin-top: 0px;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MACRO ID CARD: CONTEXTUAL ACTIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#ID_CARD .info_container #DATA .action_trigger {
	
	height: 40px;
	width: 40px;
	
	overflow: visible;
	
	background-image: url(../images/takoyaki.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	
	pointer-events: all;
	cursor: pointer;
	
	z-index: 3;
}	



#ID_CARD .info_container #DATA #CONTEXTUAL_ACTIONS {
	
	position: absolute;
	
	width: auto;
	
	padding: 10px;
	padding-bottom: 0px;
	
	background-color: white;

	border-radius: 10px;
		
	display: none;
	
	z-index: 3;
}

#ID_CARD .info_container #DATA #CONTEXTUAL_ACTIONS .button {
	
	margin-bottom: 10px;
	
	padding-right: 20px;
	
	white-space: nowrap;
}


#ID_CARD #COVER_UP {
	
	position: fixed;
	
	top: 0px;
	left: 0px;
	
	height: 100%;
	width: 100%;
	
	display: none;
	
	cursor: default;
	pointer-events: all;
	
	z-index: 2;
	
	background-color: rgba(255,255,255,0);
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MACRO ID CARD: ANIMATIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*	ID CARD ANIMATION	*/

@keyframes open_id_card {

    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}


@keyframes close_id_card {

    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}










/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	HOLOGRAM
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*    HOLOGRAM    */
.HOLOGRAM {
	
	height: auto;
	width: auto;
}



/*    HEAD    */
.HOLOGRAM .head {
	
	
}


/*    EYES AND PUPIL    */
.HOLOGRAM .head .eyes, .HOLOGRAM .head .eyes .eye div  {
	
	opacity: .6;
}


/*    MOUTH    */
.HOLOGRAM .head .mouth {
	
	opacity: .6;
}


/*    LEGS    */
.HOLOGRAM .legs, .HOLOGRAM .tenno_crown {
	
	opacity: .8;
}




@media not (pointer: coarse) {
	
	.HOLOGRAM:hover .eyes .eye {
	
		padding-top: 0px;
	}
}



@keyframes hologram_flicker {

	0% { opacity: .85; }
	
	49% { opacity: .85; }
	50% { opacity: .7; }
	55% { opacity: .7; }
	56% { opacity: .85; }
		
	100% { opacity: .85; }
}

@keyframes hologram_head_and_leg_blur {

	0% { filter: blur(.2px); }
	
	49% { filter: blur(.2px); }
	50% { filter: blur(.6px); }
	55% { filter: blur(.6px); }
	56% { filter: blur(.2px); }
		
	100% { filter: blur(.2px); }
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	CONNECTOR LINES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#svg_container {
	
	width: 100%;
	height: 100%;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	z-index: 2;
}


#ID_CARD #svg_container_for_pics {
	
	position: absolute;
	
	bottom: 0px;
	left: 0px;
	
	height: calc(100% - 0px);
	width: calc(100% - 0px);
	
	pointer-events: none;	

	z-index: 0;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	HEATMAPS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#HEAT_MAP_CONTROLLER {
	
	position: absolute;
	
	height: 60px;
	width: 60%;
	
	transition: bottom .2s ease-out;

	padding: 10px;
	
	border-radius: 20px;
	background-color: rgba(255,255,255,.95);
	border: 1px solid rgba(0,0,0,.3);
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	z-index: 1000;
}


#HEAT_MAP_CONTROLLER select  {
	
	width: 75%;
	
	font-size: 18px;
	text-align: center;
	color: rgba(0,0,0,.8);
	
	padding: 5px;
	
	border-radius: 10px;
	border: 1px dotted rgba(0,0,0,.3);
	
	outline: none;
	box-shadow: none;
	
	appearance: none;
	
	background-color: transparent;
	background-image: url(../images/caret.png);
	background-repeat: no-repeat;
	background-position: center right;
	background-size: contain;
}	


#HEAT_MAP_CONTROLLER select:focus  {
	
	outline: none;
}	


#HEAT_MAP_CONTROLLER #CLOSE  {
	
	height: 30px;
	width: 30px;
	
	margin-left: 20px;
	
	background-image: url(../images/close.png);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	
	cursor: pointer;
}	


.heatmap_circle {
	
	position: absolute;
	
	height: 100px;
	width: 100px;
	
	border-radius: 50%;
	
	background-image: url(../images/games/heatmap_circle.svg);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	
	pointer-events: none;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	INHERITANCE TRAIL 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#ID_CARD .trail_marker {
	
	position: absolute;
	
	border-radius: 50%;
	
	background-image: url(../images/games/trail_marker.png);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	
	transform-origin: center center;
	
	pointer-events: none;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PROPERTY MARKER 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/




#ID_CARD .property_marker {
	
	position: absolute;
	
	display: flex;
	justify-content: center;
	align-items: center;

	border: 1px dashed black;
	background-color: rgba(0,0,0,.05);
	
	font-size: 12px;
	line-height: 100%;
		
	pointer-events: none;
	
	z-index: 1;
}