* {
	font-family:Electrolize;	
	box-sizing: border-box;
	outline:none !important;
	font-variant-ligatures: none;
}
a{ text-transform:uppercase; }
.attribute, .bonus{
	cursor:pointer;
	-webkit-transition: all 500ms;
    transition: all 500ms;
}
.attribute:hover, .bonus:hover{
	color:#;
}
.archived {
	color:# !important;
}
.awardCharacter{
	position:relative;
}
.awardContent{
	flex-direction:column;width:100%;
}
.awardContent > div{
	width:100%;
}
.awardThumbWrap{
	position:relative;
}
.awardThumbWrap > *{
	pointer-events:none;
}
.awardThumbWrap.off {
	box-shadow:inset 0px 5px 3px black;
}
.awardThumbWrap.off .overlay{
	opacity:0.9;
	order:99;
}
.awardThumbWrap .overlay{
	opacity:0;
	background-color:#;
	position:absolute;
	top:0;
	bottom:0.4rem;
	right:0;
	left:0;
}
.awardThumbWrap:hover{
	
	cursor:pointer;
	border-color:#;
}
.boardContainer, .gridWrap{
	display:flex;
	flex-wrap:wrap;
	align-items: flex-start;
}
.boardContainer{
	justify-content:center;
}

.boardContainer > .gridWrap{
	flex: 1 1 35%;
}
.boardName {
	width:100%;
	z-index:1;
	min-width:10rem;
}
body{
	padding:0;
	margin:0;
	height:100vh;
	overflow-x:hidden;
	background-color:#;
}
h1{
	margin:0;
	padding:3rem;
}
html { font-size: 89.5%; } 
/*
input,button{
	border-radius:1em;
	border:1px solid silver;
	padding:1em;
	margin:0.5em;
	width:100%;
	min-height:1.5em;
	font-size:115%;max-width:14em;
}
button:hover{
	cursor:pointer;
	background-color:#e5f1fb;
}
*/
button {
	border:0 none;
	border-radius:0.1rem;
	position:relative;
	padding:1rem;
	min-width:8rem;
	margin:0.5rem;
	color:#;
	font-size:1.4rem;
	font-weight:bold;
	cursor:pointer;
	z-index:1;
    background-color: #;
    -webkit-box-shadow:0 2px 4px #;
	box-shadow:0 2px 4px #;
	text-transform:uppercase;
	overflow:hidden;
    text-shadow: 0 1px 2px #;
}
button:disabled, button.off {
	color: lightgrey;
	background-color:#;	
	pointer-events:none !important;
}
button:focus, input:focus, select:focus {
	outline: none !important;
}
button:before {
	content: '';
    width: 102%;
    height: 101%;
    position: absolute;
    left: -103%;
    top: 0;
	background-color:# !important;
    z-index: -1;
    -webkit-transition: 250ms;
    transition: 250ms;    
	-ms-transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-o-transform: translateX(0);
    transform: translateX(0);
    will-change: transform;
}
button:active {	
	-webkit-box-shadow:0 1px 2px #;	
	box-shadow:0 1px 2px #;	
}
button:hover:before, button:active:before, button.toggle.on:active:before, button.toggle.on:before,button.toggle.on:hover:before{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-box-shadow:-3px 3px 5px #;
	box-shadow:-3px 3px 5px #;
}
button.toggle.on:hover{
	
}
button.toggle:hover:before, button.toggle:active:before{
	-webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-box-shadow:-3px 3px 5px #;
	box-shadow:-3px 3px 5px #;
	
}
button.mini{
	padding: 0.2rem;
	margin: 0.2rem;
	max-height: 3.75rem;
	height: 2.6rem;
	min-width: 2.6rem;
}
#budgetList {
	display:grid;grid-template-columns: auto 1fr auto auto;margin:0.5rem;color:#;grid-gap:0.5rem;
}
#budgetList a {
	color:#;
	
}
.bold {
	font-weight:bold;	
}
.caps{
	text-transform:uppercase;	
}
.characterImg{
	position:absolute;
	top:0;
	right:0;
	background-repeat:no-repeat;
	height: 6rem;
	width: 100%;
	max-width:22rem;
	transform: scaleX(-1);
	z-index: -1;
	background-position-y: 50%;
	background-size:cover;
}
.characterName{
	padding: 0.5rem;
    font-size: 4rem;
    height:6rem;
    color: #;
	text-transform: uppercase;
	text-align: left;
	text-shadow:0 2px 1px #;
	white-space: nowrap;
	overflow-x: initial;
	overflow-y: initial;
}
.childBtn{
	position:absolute;
	opacity:0;
	pointer-events:none;
    -webkit-transition: 250ms;
    transition: 250ms;
}
.childBtn.open{
	opacity:1;
	pointer-events:all;
	position:relative;
}
.childBtnContainer{
    position: absolute;
    transform: translateX(-6rem);
    opacity:0;
    pointer-events:none;
    z-index:-1;
}
.childBtnContainer.open{
    position: relative;
    transform: none;
    opacity:1;
    pointer-events:all;
    z-index:10;

}
.clickable:hover{
	color:#;
	cursor:pointer;	
}
.clock, .clockHand{
	width:100%;
	height:100%;
	margin:auto;
	position:absolute;
	transition: all .5s ease-in-out;	
}
.clockHand {
	stroke-linecap: round;
	stroke:#;
}
.clock, .clock > *, .clockHand, .clockTimeWrapper{
	user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.clock path{
	fill:#;
	stroke:#;	
}
.clock path:hover{
	fill:#;
	stroke:#;	
}
.clock text{
	fill:#;
}
.clockTimeWrapper {
	min-width:22rem;
}
.clockTime:hover {
	cursor:pointer;
	color:#;	
}
.clock text, .clock text>*, .clockHand, .clockHand >* {
	pointer-events:none;
}
.clockHand.hour > *, .clockHand.hour{
	
	fill:#;
	stroke:#;	
}
.clock.hidden, .clockHand.hidden {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 0s 0.7s, opacity 0.5s ease-in-out;
	transition: visibility 0s 0.7s, opacity 0.5s ease-in-out;
}
.clock.visible, .clockHand.visible
{
	visibility: visible;
	opacity: 1;	
	-webkit-transition:  opacity 0.7s ease-in-out;
	transition: opacity 0.7s ease-in-out;	
}
.confirmPop {
	background-image: linear-gradient(to right, #, black );
	background-color: #;
	border-top:0.1rem solid #;
	border-bottom:0.1rem solid #;
	color:#;
	font-size: 2rem;
	position:fixed;
	padding: 1rem 6rem;
	top:50%;
	text-transform: uppercase;
	width:calc(100% + 8rem);
	-ms-transform: translateX(-150%) translateY(50);
	-webkit-transform: translateX(-150%) translateY(50);
	-moz-transform: translateX(-150%) translateY(50);
	-o-transform: translateX(-150%) translateY(50);
    transform: translateX(-150%) translateY(-50%);
	pointer-events:none;
	-webkit-transition: all 500ms;
    transition: all 500ms;
}
.confirmPop.show
{
	-ms-transform: translateX(-4rem) translateY(50);
	-webkit-transform: translateX(-4rem) translateY(50);
	-moz-transform: translateX(-4rem) translateY(50);
	-o-transform: translateX(-4rem) translateY(50);
    transform: translateX(-4rem) translateY(-50%);
	pointer-events:all;	
}
.critter:before{
	content:'Critter';
	position: absolute;	
	-ms-transform: rotateZ(-90deg) translateX(-100%);
	-webkit-transform: rotateZ(-90deg) translateX(-100%);
	-moz-transform: rotateZ(-90deg) translateX(-100%);
	-o-transform: rotateZ(-90deg) translateX(-100%);
	transform: rotateZ(-90deg) translateX(-100%);
	background-color:#;
	transform-origin: left top 0.2rem;
	border: 0.2rem solid #;
	color: #;
	font-weight: bold;
	padding: 0 0.1rem;
	left: -1.8rem;
	text-shadow: 0 1px 2px #;
	top: -0.1rem;
	margin: 0;
	min-width: 5.2rem;
	text-align: center;
	font-size: 1.2rem;
}

.Damage.gridWrap{
	max-width:40rem;
	flex-direction:column;
	justify-content: flex-start;
}
.damageTrack{	
	margin:0 0.5rem;
}
.damageTrack,.trackWrap {
	min-width:9.25rem;
	max-width:18.5rem;
	display:flex;
	flex-wrap:wrap;
}
.damageTrack .subtitle{
	font-size:1rem;
	text-align:left;
	width:100%;
	color:#;
}
.damageTrackWrap{
	align-items:flex-start !important;flex-wrap:nowrap !important;
}
.datePickImg {
    height: 2.5rem;
    width: 2.5rem;
    vertical-align: bottom;
    margin:0.2rem;
}
.dateWrap{
	margin-right:5rem !important;	
}
.dateWrap > .irDatePickerSpan {
	right:-4rem;
}
.dateWrap > .irDatePickerSpan.open{
	right:initial;
	left:-0.5rem;
	top:-0.5rem;
}
.dateTimeWrap {	
	margin-right:8rem !important;	
}
.dateTimeWrap > .irDatePickerSpan {
	right:-7rem;
}
.dateTimeWrap > .irDatePickerSpan.open{
	right:0;
}
.desc {
	margin-top:0.5rem;
	max-height:0;
	overflow:hidden;
	-webkit-transition: all 500ms;
    transition: all 500ms;
}
.desc.show {
	max-height:100rem;
}

#descriptionPop  .section{
	min-width:initial;
	width: calc(100% - 2rem);
	max-width:initial;
	background-color:#;
	-webkit-box-shadow:0 0 #;
	box-shadow:0 0 #;
	-webkit-transition: none;
    transition: none;
}
#descriptionPop  .section .category{
	display:block !important;
}
#descriptionPop .section:hover, #detailPopSection .section:hover, #detailPopPickers .section:hover, #detailModPopSection .section:hover  {
	cursor:default;
	background-color:#;
	-webkit-box-shadow:0 0 #;
	box-shadow: 0 0 #;
}
.descriptionPop .title{
	padding:0;
	text-align:left;
	font-size:2rem;
	border-bottom:0.1rem solid #;
}
.descriptionPop .subtitle{
	text-align:right;
	border-bottom:0 none;
}
.descriptionPop .desc, .descriptionPop .info, .descriptionPop .properties{
	text-align:left;	
	font-size:1.4rem;
}
.descriptionPop .properties  td {
	width: 33%;
	white-space: nowrap;
	padding-right: 1rem;
}
.descriptionPop .source{
	right:1rem;
}
#descriptionPopContainer {
	max-height: calc(100vh - 7rem);	
}
#descriptionPopContainer.hasEquip {
	max-height: calc(100vh - 14rem);	
}
.detail{
	color: #;
	padding:0 1rem;
	text-indent:-1rem;
	padding-left:2rem;
	-webkit-transition: all 0.5s;
    transition: all 0.5s;
    margin:0.25rem 0;
}
.detail > *
{
	text-indent:0rem;
}
.detail:hover{
	color:#;
	cursor:pointer;
}

.detail label{
	color: #;
	font-size:1.1rem !important;
	font-variant-caps: normal;
	white-space:normal;
	padding:0;
}
.detail:hover label{	
	color:#;
}
#detailModPopSection .desc{
	text-align:left;
	max-height:10rem;
	overflow-y:auto;
}
#detailModPopSection .properties,#detailModPopSection .info{
	text-align:left;
}
#detailModPopSection .title{
	text-align:left;
	padding:0.5rem;
}
#detailModPopSection .subtitle{
	text-align: right;
	border-bottom: 0 none;
	border-top: 0.1rem solid #;
	color:white;
}
#detailModPopTitle{
	padding-bottom:0;
}
#detailModPopPickers .subtitle{
	font-size: 1.4rem;
	border-bottom: 1px solid #;
	text-transform: uppercase;
	white-space: nowrap;
	color: #;
	text-align: left;
	padding:0.25rem;
}
.detailModPopList{
text-align:left;padding:1rem;font-size:1.4rem;
}
#detailPop .section{
	max-width:100%;	
}
#detailPopSection .desc{
	text-align:left;
	max-height: 40vh;
	overflow-y:auto;
}
#detailPopSection .properties,#detailPopSection .info{
	text-align:left;
}
#detailPopSection .title{
	text-align:left;
	padding:0.5rem;
}
#detailPopSection .subtitle{
	text-align: right;
	border-bottom: 0 none;
	border-top: 0.1rem solid #;
	color:white;
}
#detailPop .title{
	padding:1rem 1rem 0 1rem;
}
#detailPopTitle{
	padding-bottom:0;
}
#detailPopPickers .subtitle{
	font-size: 1.4rem;
	border-bottom: 1px solid #;
	text-transform: uppercase;
	white-space: nowrap;
	color: #;
	text-align: left;
	padding:0.25rem;
}
#detailPopPickers .sums{
	justify-content:flex-end;
	color:white;	
}
.detailPop .section:hover{
	cursor: initial;
	background-color: #;
	-webkit-box-shadow: initial;
	box-shadow: initial;
}
#descriptionPopBonus, #descriptionPopNote {
	
	color: #;
	font-size: 1.4rem;
}
#descriptionPopNote {
	font-style: italic;
}
#diceRollPop{
	
	background-color:#;
}
.disabled {
	pointer-events:none;
	color:# !important;
	cursor:default;
}
.divider {
	font-size: 2.4rem;
	background-image: linear-gradient(to right, #, black );
	background-color: #;
	text-transform: uppercase;
	width: calc(100% + 8rem);
	font-weight: bold;
	padding: 1rem;
	color: #;
	-webkit-box-shadow: 0 2px 4px #;
	box-shadow: 0 2px 4px #;
	text-shadow: 0 2px 1px #;
	margin: 1rem 0;
	padding-left: 5rem;
	-ms-transform: translateX(-4rem);
	-webkit-transform: translateX(-4rem);
	-moz-transform: translateX(-4rem);
	-o-transform: translateX(-4rem);
	transform: translateX(-4rem);
	border:0.2rem solid #;
	z-index:0;
}
.edgeNothing{
	width:100%;
	border-bottom:1px solid #;
	text-align: center;	
}
.fire{	
  	animation: fire 50ms infinite;
 	-webkit-animation: fire 50ms infinite;
}
.fileWrap, .file{
	cursor:pointer;
	
}
 .fileWrap:after{
	width: 2rem;
	height: 2rem;
	bottom: 0;
	right:0;
	text-align: center;
	position: absolute;
	color: #;
	padding: 0.5rem;
	pointer-events: none;
	font-size: 1.4rem;
}
.fileWrap:after{	
	content: '+';
}
.flex {display:flex;justify-content:center;flex-wrap:wrap;align-items:inherit;}

.flexDetail .detail b {
	color: #;
}
.flexSpacer {width:100%;}
.footer{padding: 1rem 0;
	border-top: 0.1rem solid #;
	margin-top: 1rem;
}
form {
	height:100%;
	width:100%;
	top:0;
}
.glitchDiv{
	width:100%;
	border-bottom:1px solid #;
	text-align: center;
}
.grandtotal{
	color:#;
}
.grid {
	display:grid;
}

.grid.show {	
	display: grid;
}
.gridOverlay{
	border: 1px solid #;
    border-width: 1px 0 0 1px;
    position:absolute;
    top:0;
}
.gridOverlay.isometric {	
	transform: rotatez(-60deg) skewY(30deg);
}
.gridOverlay.isometric .mapData {	
	transform: rotatez(60deg) skewY(-30deg);
}

.gridOverlay.hide > .square
{
	border-color:transparent !important;
}
.gridOverlay .square{
	border: 1px solid #;
    border-width: 0 1px 1px 0;
    float: left;
    justify-content:center;
    align-items:center;
    
}.gridOverlay .square:hover{
	box-shadow: inset 0 2px 2px #;
	cursor:pointer;
}
.gridOverlay .squarePreview{
	border: 1px solid transparent;
    border-width: 0 1px 1px 0;
    float: left;
    justify-content:center;
    align-items:center;
    
}
.gridWrap{
	padding:0.5rem 0.5rem 0;
	justify-content: center;
	position:relative;
	z-index: 0;
	flex:1;
	min-width:15rem;
}
.gridWrap .titleWrap{
	justify-content:flex-start;
	align-items:center;
	padding:0.2rem;
	
}
.gridWrap .title{
	width:initial;
	padding:0;
	padding-left:0.5rem;
}
#groupsDiv .subtitle{
	font-size:1.2rem;
	border-bottom:0 none;
	color:white;
}
#groupsDiv .section{
	width: 100%;
	max-width: 100%;
}
#groupsDiv .thumb{
	margin-left:0.5rem;
}
#groupsDiv .thumbWrap{
	position:relative;
}
#groupsDiv .thumbLabel, .awardCharacter .thumbLabel{
	position:absolute;left:0.1rem;bottom:0.1rem;
}
.highlight,.highlight>*{
	color:#;
	background-color:#;
}
::selection {
	color:#;
  background: #; /* WebKit/Blink Browsers */
}
::-moz-selection {
	color:#;
  background: #; /* Gecko Browsers */
}
.fullImage{
	width:100%;
	height:100%;
}
.hitsDiv{	
	width:100%;
	border-bottom:1px solid #;
	text-align: center;
}
.imgBtn {
	display:flex;
	flex-direction:column;	
	align-items:center;
	cursor:pointer;
	position:relative;
	margin:0 0.5rem 0.2rem;
	width:3.5rem;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;
}
.imgBtn > *{
	pointer-events:none;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;
	
}
.imgBtn:hover img, .imgBtn:hover label{
	top:-1px;
}
.imgBtn label {
	color:#;
	font-family: Jura;
	font-variant-caps: all-petite-caps;
	position:relative;
	cursor:pointer;
	font-size:1rem;
}
.imgBtn img {
	width:2.6rem;
	height:2.6rem;	
	position:relative;
	cursor:pointer;
}
.inactive{
	filter: grayscale(1);
}

.inactive > img{
	filter:grayscale(1);
}
.initBlock {
	border:0.2rem solid #;	
	margin:0.2rem 1rem;
	margin-left:2.4rem;
	position: relative;
	z-index: 2;
	-webkit-box-shadow:0 2px 4px #;
	box-shadow:0 2px 4px #;
	background-color:#;
}
.initBlock .imgBtn{
	margin:0.2rem;
}

.noSelect{
	pointer-events:none;
	cursor:default;
}
.npc:before{
	content: 'NPC';
	position: absolute;
	-ms-transform: rotateZ(-90deg) translateX(-100%);
	-webkit-transform: rotateZ(-90deg) translateX(-100%);
	-moz-transform: rotateZ(-90deg) translateX(-100%);
	-o-transform: rotateZ(-90deg) translateX(-100%);
	transform: rotateZ(-90deg) translateX(-100%);
	background-color: #;
	transform-origin: left top 0.2rem;
	border: 0.2rem solid #;
	color: #;
	font-weight: bold;
	padding: 0 0.1rem;
	left: -1.8rem;
	text-shadow: 0 1px 2px #;
	top: -0.1rem;
	margin: 0;
	min-width: 5.2rem;
	text-align: center;
	font-size: 1.2rem;
}
#hoverPop{
	opacity:0;
	position:absolute;
	pointer-events:none;
	transition-delay: 0s;
	color:#;
    background-color:#;
	min-width:4rem;
	text-shadow:0 1px #;
	top:0;
	left:0;
    z-index:2000;
    padding:0.5rem;
    border-radius:0.5rem;
	box-shadow:0 2px 5px #;
	max-width:100vw;
	text-transform:uppercase;
}
#hoverPop.show{
	-webkit-transition: opacity 500ms;
    transition: opacity 500ms;
	opacity:1;
	transition-delay: 0.8s;
}
.info, .info .table td, .grid div {font-size:1.2rem;}
.initBlock.selected {
	background-color:#;
}
.initBlock.endTurn{
	-webkit-box-shadow: inset 0px 35px 21px #;
	box-shadow: inset 0px 9rem 5rem #;
}
.initBlock.endTurn:before{
}
input, textarea, select{
	border:0 none;
	background-color:# !important;
	border-radius:0;
	padding:1.4rem 1rem 0.2rem;
	color:#;
	font-size:1.4rem;
	flex:1;	
	min-height:3.5rem;
	-webkit-appearance: none;
	-moz-box-shadow:inset 0px 11px 12px #;
	-webkit-box-shadow: inset 0px 11px 12px #;
	box-shadow: inset 0px 11px 12px #;
	-webkit-transition: all 500ms;
    transition: all 500ms;
    z-index:10;
    width: 100%;
    margin:0;
}
input[type=checkbox], input[type=radio]{
	display:none;
}
input[type=checkbox] + label, input[type=radio] + label
{
	font-family: Electrolize;
	font-size:1.6rem;
}
input[type=checkbox]:checked + label:before {
	content: "\2713";
	color: #;
	background-color: # !important;
	text-shadow: 1px 2px 1px #;
	-webkit-box-shadow:inset 0px 4px 12px #;
	box-shadow:inset 0px 4px 12px #;	
}
input[type=radio]:checked + label:before{
	content: "\2022";
	color: #;
	background-color: # !important;
	text-shadow: 1px 2px 1px #;
	-webkit-box-shadow:inset 0px 4px 12px #;
	box-shadow:inset 0px 4px 12px #;	
}
input[type=checkbox]:checked:disabled + label:before, input[type=radio]:checked:disabled + label:before,input[type=number]:checked:disabled + label:before{
	color: lightgrey;
	background-color: #444 !important;	
	border-color: lightgrey !important;
}
input[type=checkbox] + label::before{
	content: ".";
	font-weight:bold;
	display:inline-block;
	width:2rem;
	height:2rem;
	margin:0.3rem;
	position:relative;	
    text-align: center;
    text-decoration:none !important;
    line-height:2rem;
	left:0;
	text-shadow:none;
	color: #;
	background-color:# !important;	
	-webkit-box-shadow: inset 0px 11px 12px #;
	box-shadow: inset 0px 11px 12px #;
	-webkit-transition: all 500ms;
    transition: all 500ms;
    border:0.1rem solid #;
}
input[type=radio] + label::before{
	content: ".";
	font-family: Verdana;
	font-weight:normal;
	font-size: 2rem;
	display:inline-block;
	width:2rem;
	height:2rem;
	margin:0.3rem;
	border-radius:2rem;
	position:relative;	
    text-align: center;
    text-decoration:none !important;
    line-height:2rem;
	left:0;
	color: #;
	text-shadow:none;
	background-color:# !important;	
	-webkit-box-shadow:	inset 0px 11px 12px #;
	box-shadow: inset 0px 11px 12px #;
    border:0.1rem solid #;
}
input[type=color]{
	padding:0.5rem;	
}

input:focus, textarea:focus, select:focus {
	-webkit-box-shadow:inset 0px 4px 12px #;	
	box-shadow:inset 0px 4px 12px #;	
	border-color:#;
}
input:focus + .inputLabel:before,textarea:focus + .inputLabel:before,select:focus + .inputLabel:before {
	width:calc(100% + 0.2rem);	
	height:60%;
}
input:focus + .inputLabel:after,textarea:focus + .inputLabel:after, select:focus + .inputLabel:after{
	width:calc(100% + 0.2rem);		
	height:60%;
}
input:focus + .inputLabel,textarea:focus + .inputLabel,select:focus + .inputLabel {	
	color:#;	
}
input[type=hidden] + .inputLabel, textarea[type=hidden] + .inputLabel, select[type=hidden] + .inputLabel, input[type=checkbox]:disabled + label, input[type=number]:disabled + label
{
	color:lightgrey !important;
}
input[type=hidden] + .inputLabel:before,input[type=hidden] + .inputLabel:after
{
	width:0 !important;
	height:0 !important;
}
input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range] > *{
	-webkit-user-modify: read-write !important;
}
input[type="range" i] {
	background:#;	
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 2px 2px #;
  border: 1px solid #;
  height: 1rem;
  width: 2rem;
  border-radius: 3px;
  background: #;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.5rem;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #;
}
input[type=range]::-moz-range-track {
  width: 95%;
  height: 0.5rem;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: inset 0px 2px 2px #;
  background: #;
  border: 0.1rem solid #;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 2px 2px #;
  border: 1px solid #;
  height: 1rem;
  width: 2rem;
  border-radius: 0rem;
  background-color: #;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background:  #;
  border: 0.1rem solid #;
  border-radius: 0rem;
  box-shadow:inset 0px 2px 2px #;
}
input[type=range]::-ms-fill-upper {
  background:  #;
  border: 0.1rem solid #;
  border-radius: 0rem;
  box-shadow: inset 0px 2px 2px #;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 2px 2px #;
  border: 0.1rem solid #;
  height: 1rem;
  width: 2rem;
  border-radius: 0rem;
  background-color: #;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}
.inputLabel:before {
	content:'';
	width:2rem;
	height:2rem;
	position:absolute;
	background-color:#;	
    top: -0.3rem;
    z-index: -1;
	-webkit-transition: all 500ms;
    transition: all 500ms;
    left:-0.1rem;
}
.inputLabel:after {
	content:'';
	width:2rem;
	height:2rem;
	position:absolute;
	background-color:#;	
    bottom: 0.1rem;
    z-index: -1;
	-webkit-transition: all 500ms;
    transition: all 500ms;
    right:-0.1rem;
}
.inputLabel {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0.2rem !important;
    font-family:Jura !important;
    font-variant-caps: all-petite-caps !important;
    left: 0 !important;
    color: # !important;
    text-shadow: 0 2px 1px # !important;
	-webkit-transition: all 500ms;
    transition: all 500ms;
    padding:0 0.5rem !important;
    pointer-events:none;
    white-space:nowrap !important;
}
	
.inputWrap, .checkWrap, .selectWrap, .fileWrap, .dateWrap, .dateTimeWrap{
	margin:1em;
	position:relative;
	text-align: left;
}
.inputWrap.hidden, .checkWrap.hidden, .selectWrap.hidden, .fileWrap.hidden{
	margin:0;
}
.irDatePickerSpan {
	white-space:nowrap;
	position:absolute;
	top:0.4rem;	
}

.irDatePickerSpan.open{	
	white-space:nowrap;
	position:relative;
	top:initial;
	overflow: visible;
	max-height:3.5rem;
	z-index:200;
}
.irDatePickerSpan.open + label{
	display:none;
	
}
.journalEntry{
	width:calc(100% - 0.4rem);
	padding:0.2rem;
	margin:0.2rem;
	justify-content: space-between;
	border-bottom: solid 0.1rem #;
}
.journalEntry:hover{
	cursor:pointer;
	color:#;
	background-color:#;
}

.journalEntry > div {
	font-size:1.4rem;
	
}
#journalPop {
	min-width:100%;
	min-height:100vh;
	margin:0;
	background-color: rgba(0, 0, 0,0.8) !important;
}
#journalPopEntry, #journalPopEntryEdit{
	flex:0;
	opacity:0;
	position:relative;
	overflow:hidden;
	display: flex;
    flex-direction: column;
}
#journalPopEntry.open, #journalPopEntryEdit.open{
	flex:16;
	opacity:1;
	overflow:auto;
}
#journalPopList{	
	border-right:0.1rem solid #;
	flex-direction: column;
	flex-wrap:nowrap;
	justify-content: flex-start;
	color:#;	
	flex:16;
	height: calc(100vh - 12rem);
	overflow-y:auto;
}
.journalPopListWrap{
	min-width:15rem;
	max-width:25rem;
	justify-content:flex-start;
	flex-direction:column;
	background-color: rgba(0, 0, 0,1) !important;
	z-index:2;
	flex:6;
}
.journalPopListWrap .subtitle{
	text-align:left;
	margin-top:0.5rem;
	color:#;	
	border-bottom:0.1rem solid #;
}
#journalPopEntryEditWrap{
	justify-content:flex-start;
	flex:16;
	flex-direction:column;
	height:calc(100vh - 12rem);
	background-color:#;
	z-index:0;
	
}
#journalPopTitle{
	padding:0.5rem;
	padding-left:1rem;
	text-align:left;
	font-size:2rem;
	border-bottom:0.1rem solid #;
}
.journalWrap {position:relative;}
.journalWrap > div {
	height:100%;
	max-height:100vh;
}
#journalPopEntryWrap{
	height:calc(100vh - 12rem);
	overflow-y:auto;
	position:relative;
	flex:16;
}
#journalPopListBtn, #journalPopCloseListBtn{
	display:none;
	opacity:0;
}

.journalHeader{
	justify-content:space-between;
	flex-wrap:wrap;
	position:sticky;
	top:0;
	background-color: rgba(0, 0, 0,0.8) !important;
}
.journalType, .journalTime, .journalTitle, .journalText{
    text-shadow: 0 2px 1px #;
    color: #;
	font-size:1.2rem;
    padding:0.5rem;
}
.journalTitle
{
	border-bottom:0.1rem solid #;
	font-size:3rem;
	text-align:left;
	text-transform:uppercase;	
	width:100%;font-family: VT323;
}
 .journalTitle div{
 	font-family: VT323;
 }
.journalText {	
	font-size:1.4rem;
	overflow-y:auto;
	text-indent:0.5rem;
	text-align:left;
	white-space:pre-line;
}
label {	
    padding:0 0.5rem;
    text-shadow: 0 2px 1px #;
    color: #;
    font-family:Jura;
    font-variant-caps: all-petite-caps;
    white-space:nowrap;
}
.layerBall{
	height:25%;
	width:25%;
	border:0.1rem solid #;
	background-color:#;
	border-radius:50rem;
	margin:0.1rem;
	box-sizing: border-box;
}
.layerContainer{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	position:relative;
	bottom:120%;
	left:100%;
	z-index:20;
	height:inherit;
	width:inherit;
	opacity:0;
	pointer-events:none;
}
.layerContainer.Player > div:nth-child(1){
	background-color: #;
	border-color:#;
}
.layerContainer.GM> div:nth-child(2){
	background-color: #;
}
.layerContainer.Map> div:nth-child(3){
	background-color: #;
}
.load{
	overflow:hidden;
	width:60vw;
	height:8px;
	padding:1px;
	background-color:#;
	position: relative;
	top: 50%;
	left: 20vw;
}
.load:before{
	content:'';
	position:absolute;
	height:8px;
	width:10px;
	animation-name:load;
	animation-duration:500ms;
	animation-fill-mode: forwards;
	background-color:#;
	z-index:2000;
}
.loading{
	overflow:hidden;
	width:60vw;
	height:8px;
	padding:1px;
	background-color:#;
	position: relative;
	top: 50%;
	left: 20vw;
}
.loading:before{
	content:'';
	position:absolute;
	height:8px;
	width:10px;
	animation-name:loading;
	animation-duration:500ms;
	animation-fill-mode: forwards;
	background-color:#;
	z-index:2000;
}
.mainBtn{
	width:12rem;
}
.mapColorPalette{
	position: sticky;
	top: 3.3rem;
	z-index: 10;
	background-color: #;	
}
.mapContainer{
	font-size:1.2rem;
	position:relative;
	overflow-x: auto;
	overflow-y: hidden;
	height:auto;
	opacity:0;
	-webkit-transition: all 500ms;
    transition: all 500ms;
}
.mapContainer.show{
	opacity:1;
}
.mapData{
	position:relative;
	width:inherit;
	height:inherit;		
	-moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.mapData.dragging > .mapToken{
	width:150%;
	left:-25%;
	top:-35%;
	z-index:20;
	background-color:#;
}
.mapData.dragging > .layerContainer{
	opacity:1;
}
.mapData.dragging:before{
	position:absolute;
	content:'';
	top:-4rem;
	left:calc(50% - 2rem);
	width: 0; 
	height: 0; 
	border-left: 2rem solid transparent;
	border-right: 2rem solid transparent;
	border-top: 2rem solid #;
	z-index:200;
}
.mapToken{
	position:relative;
	width:120%;
	height:auto;
	top:-25%;
	left:-10%;
	border-radius:100%;
	border:0.1rem solid #;	
	z-index:10;
	box-shadow:0 2px 4px #;
	-moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
	border:0.15rem solid #;
	background-color:#;
}
.mapToken.PC{
	background-color:#;
	border:0.15rem solid #;
}
.mapToken:hover{	
	width:150%;
	left:-25%;
	top:-35%;
	z-index:20;
	background-color:#;
}
.mapToken:hover + .layerContainer 
{
	opacity:1;
}
#mapTokenOptions{
	display:flex;	
	align-items:center;
	justify-content:center;
}
#mapTokenDelete{
	border:0.1rem solid #;
	background-color:#;
	margin:0.5rem;
	padding:1rem;
}
#mapTokenDelete:hover{
	cursor:pointer;	
	position:relative;
	top:-0.1rem;
	-webkit-box-shadow:0.1rem .4rem 0.3rem # !important;
	box-shadow: 0.1rem 0.4rem 0.3rem # !important;
}
.medIcon {
	width:3rem;
	height:3rem;	
}

.messengerPop .title{
	font-family:VT323;
	font-size:3.6rem;
}
.messengerPop .subtitle{
	font-family:VT323;
	font-size:2.4rem;
	border-bottom:0.1rem solid #;
	text-align:left;
	padding:0 2rem;
	color:#;
}
#messengerPopupIntro{
	width:100%;
	text-align:left;
	padding:2rem;
	font-family:VT323;
	font-size:1.8rem;
}
.messageFooter{
	position:fixed;
	bottom:0;
	width:100%;
	border-top:0.1rem solid #;
	z-index:30;
	flex-wrap:nowrap;
	align-items:center;	
}
.messagePopUsers{
align-items: flex-end;
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
max-width: calc(100vw - 6rem);
}
.messagePopUsers.hide{
	display:none;
}
.messageText{
	color:#;
	font-family:VT323;
	font-size:2.4rem;
	resize: none;
	background-color:# !important;
	box-shadow:none;
}
.messageUserIcon{
	display:flex;
	justify-content:center;
	flex-direction:column;
	align-items: flex-start;
	position:relative;
}
.messageUserIcon .x{
	top: -0.25rem;
	right: 1.4rem;
}
.messageUserIcon label{
	padding:0;
	position: absolute;
	bottom: 0;
}
.messageUserIcon img, .threadUserImages img{
	max-height: 7rem;
	filter: grayscale(1);
}
.messageCounter{
	position: absolute;
	background-color: #;
	color: #;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2rem;
	font-size: 1rem;
	top: -0.5rem;
	right: -0.5rem;
	height: 2rem;
	width: 2rem;
	opacity: 0;
	border: 0.1rem solid #;
}
.messageCounter.show{
	opacity:1;
}
.messengerPop{
	width:100%;
	height:100vh;
	margin:0 !important;
	margin-top:0 !important;
	box-shadow:none;
	background-color:rgba(0, 0, 0,0.8) !important;
	font-size:1rem;
	color:#;
	right:0;
	left:0;
	top:0;
	bottom:0;
	max-height:100vh !important;
	max-width:100vw !important;
	
}
.noSelect{
	-webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;
	
}
.nothingDiv{
	width:100%;
	border-bottom:1px solid #;
	text-align: center;
}
.noWrap {
	flex-wrap:none;
	white-space:nowrap;
	
}
optgroup {
	color:#;
	background-color:#;
}
option {
	color:#;	
}
.panelWrap{
	-ms-transform: translateY(-120%);
-webkit-transform: translateY(-120%);
-moz-transform: translateY(-120%);
-o-transform: translateY(-120%);
   transform: translateY(-120%);
    -webkit-transition: 250ms !important;
    transition: 250ms !important;   
    opacity:0; 
    overflow:hidden;
    max-height:0;
    padding:0 !important;
    margin:0 !important;
    border:0 none;
}
.panelWrap.show{
	opacity:1;
	overflow:initial;
	max-height:100%;
	-ms-transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-o-transform: translateY(0);
    transform: translateY(0);    
	padding:1rem !important;
    margin:1rem !important;
   	border:0.2rem solid black !important;
}

.pc:before{
	content:'PC';
	position: absolute;	
	-ms-transform: rotateZ(-90deg) translateX(-100%);
	-webkit-transform: rotateZ(-90deg) translateX(-100%);
	-moz-transform: rotateZ(-90deg) translateX(-100%);
	-o-transform: rotateZ(-90deg) translateX(-100%);
	transform: rotateZ(-90deg) translateX(-100%);
	background-color: #;
	transform-origin: left top 0.2rem;
	border: 0.2rem solid #;
	color: #;
	font-weight: bold;
	padding: 0 0.1rem;
	left: -1.8rem;
	text-shadow: 0 1px 2px #;
	top: -0.1rem;
	margin: 0;
	min-width: 5.2rem;
	text-align: center;
	font-size: 1.2rem;
}
.popup{
	position:fixed;
	right:0;
	top:0;
	transform:translateY(-150%);
	-webkit-transition: all 500ms;
    transition: all 500ms;
    background-color:#;
    border:0.2rem solid #;
    overflow-y: auto;
	overflow-x: hidden;
	max-height:100%;
	-webkit-box-shadow:0.5rem 1rem 0.4rem #;
	box-shadow: 0.5rem 1rem 0.4rem #;
	left:50%;
	margin-top:0.4rem;
	-ms-transform: translateY(-150%) translateX(-50%);
	-webkit-transform: translateY(-150%) translateX(-50%);
	-moz-transform: translateY(-150%) translateX(-50%);
	-o-transform: translateY(-150%) translateX(-50%);
	transform:translateY(-150%) translateX(-50%);
}
.properties {
	width:100%;
}
.over{
	color:#;
}
.popup.mobile{
		width:100% !important;
		min-width:100% !important;
		max-width:100% !important;
		margin:0;
		bottom:0;
		max-height:100% !important;
	}
.pageSubtitle{
		border-bottom:0.1rem solid #;
		padding: 0 1rem;
		width:100%;
		margin:1rem 0;		
		font-size:2.2rem;
		color:#;
		text-transform: uppercase;
		vertical-align:bottom;
		display: flex;
		align-items: center;
}
.parentBtn{
	position:relative;
}
.parentBtn.open{
	opacity:0;
	position:absolute;
}
.pContent{
	font-size:1.2rem;
}
.playerCharacterPopTrack .trackBox{
	background-color:#;
}
.playerCharacterPopTrack .statusBox{	
	background-color:#;
}
.playerCharacterPopTrack .trackBox.fill{
	background-color:#;
}
.playerCharacterPop .playerTab{
	padding:0.5rem;
	background-color:#;
}
.playerCharacterPop .playerTab.selected{
	background-color:#;
}
#popupBackground {
	background-color: #;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	overflow: none;
	-webkit-overflow-scrolling: none;
	-webkit-transition: all 500ms;
    transition: all 500ms;
    z-index:-20;
}
#popupBackground.show{
	opacity: 0.8;
}
.popup.descriptionPop, .popup.diceRollInfoPop{
	left:0;
	top:0;
	right:0;
	max-width:720px;
	-ms-transform: translateY(0) translateX(-102%);
	-webkit-transform: translateY(0) translateX(-102%);
	-moz-transform: translateY(0) translateX(-102%);
	-o-transform: translateY(0) translateX(-102%);
	transform:translateY(0) translateX(-102%);
}
.popup.descriptionPop.show, .popup.diceRollInfoPop.show{
	-ms-transform: translateY(0) translateX(0%);
	-webkit-transform: translateY(0) translateX(0%);
	-moz-transform: translateY(0) translateX(0%);
	-o-transform: translateY(0) translateX(0%);
	transform:translateY(0) translateX(0%);
}
.popup.mapDataPop{
	left:50%;
	top:50%;
	right:0;
	max-width:640px;
	margin-top:0.4rem;
	-ms-transform: translateY(-50%) translateX(102%);
	-webkit-transform: translateY(-50%) translateX(102%);
	-moz-transform: translateY(-50%) translateX(102%);
	-o-transform: translateY(-50%) translateX(102%);
	transform:translateY(-50%) translateX(102%);
}
.popup.mapDataPop.show{
	-ms-transform: translateY(-50%) translateX(0%);
	-webkit-transform: translateY(-50%) translateX(0%);
	-moz-transform: translateY(-50%) translateX(0%);
	-o-transform: translateY(-50%) translateX(0%);
	transform:translateY(-50%) translateX(0%);
}
.popup.descriptionPop  .shadow{
	-webkit-box-shadow: initial !important;
	box-shadow: initial !important;
}

.popup.search,.popup.info{
	left:50%;
	margin-top:0.4rem;
	-ms-transform: translateY(-150%) translateX(-50%);
	-webkit-transform: translateY(-150%) translateX(-50%);
	-moz-transform: translateY(-150%) translateX(-50%);
	-o-transform: translateY(-150%) translateX(-50%);
	transform:translateY(-150%) translateX(-50%);
}
.popup.search.show,.popup.info.show, .popup.show{
	-ms-transform: translateY(0) translateX(-50%);
	-webkit-transform: translateY(0) translateX(-50%);
	-moz-transform: translateY(0) translateX(-50%);
	-o-transform: translateY(0) translateX(-50%);
	transform:translateY(0) translateX(-50%);
	
}
.popupContent {
	text-align:center;
}
.popupHeader {
	position:relative;
}

.popupTitle{
	color:#;
	padding:0.5rem;
	padding-left:1rem;
	text-align:left;
	font-size:2rem;
	border-bottom:0.1rem solid #;
}
.portraitThumb{
	height:120px;
	width:auto;
	border: 0.2rem solid #;
	margin: 0 0.2rem;
	-webkit-transition: all 500ms;
    transition: all 500ms;
}
.portraitThumb:hover{
	border-color:#;
	cursor:pointer;
}
.portraitThumbWrap{
	position:relative;
}
.pTitle{
	text-transform:uppercase;
	font-size:1.8rem;
	color:#;
	font-weight:bold;
	padding:0.3rem 0;
	border-bottom:1px solid #;
}
.pTitle:hover{
	cursor:pointer;
}
.pWrap{	
	overflow-x:auto;
	padding:0.5rem;
	background-color: #;
	margin:0.5rem;
	-webkit-box-shadow:0 2px 4px #;
	box-shadow: 0 2px 4px #;
	width:auto;
	display:inline-table;	
	max-width:100vw;
	z-index:0;
}
.pWrap p {
	color: #;
	background-color: #;
	margin: 0;
	padding: 0;
	font-size:1.4rem;
	width:0;
	height:0;
	overflow:hidden;
}
.pWrap p.show{
	width:initial;
	height:initial;
	padding:0.5rem;
}
.pccontainer{
	margin:0.5rem;
	background-color:#;
	padding:0.5rem;
	-webkit-box-shadow: 0 2px 4px #;
	box-shadow: 0 2px 4px #;	
	max-width:52rem;
	text-align: left;
	width:100%;
}
.pcimg{
	position:absolute;
	top:0;
	right:0;
	background-repeat:no-repeat;
	height: 7rem;
	width: calc(100% - 2.2rem);
	max-width: 22rem;
	transform: scaleX(-1);
	z-index: -1;
	background-position-y: 50%;
	margin-right: 2.2rem;
	background-size:cover;
}
.pcname{
	padding: 0.5rem;
    font-size: 4.5rem;
    color: #;
	text-transform: uppercase;
	text-align: left;
	text-shadow:0 2px 1px #;
	white-space: nowrap;
	overflow-x: initial;
	overflow-y: initial;
}
.pcrow{
	display: flex;
	color: #;
	background-color: #;
	border-top: 0.1rem solid #;
	padding: 0.5rem;
	font-size: 1.1rem;
}
.pcrow b {
	color:#;
	text-transform: uppercase;
	white-space:nowrap;
}
.pctable{
	width:100%;
	border-bottom: 1px solid #;
	display: none;
	overflow-x: auto;
	max-width:36rem;
	min-width:18rem;
}
.pctable.show {
    display: inline-table;
    table-layout: fixed;
}
.pctable thead td{
	border-top:0.1rem solid #;
}
.pctableWrap{
	max-width:38rem;
}
.pcvalue{		
	position: relative;
	top: -1rem;
	left: 1rem;
	text-align: left;
	height: 0;
}
.pcvalue span {
	color:#;
}
#pickAdeptPowerPop{
	max-width: 45rem;
	min-width:34rem;
}
#pickArmorPop{
	max-width: 46rem;
	min-width:38rem;
	overflow-y: hidden;
}
#pickBiowarePop{
	max-width: 31rem;
	min-width:28rem;
	overflow-y: hidden;
}
#pickCharacterPop{
	max-width: 41rem;
	min-width:37rem;
	overflow-y: hidden;
}
#pickCyberdeckPop{
	max-width: 35rem;
	min-width:32rem;
	overflow-y: hidden;
}
#pickCyberwarePop{
	max-width: 40rem;
	min-width:30rem;
	overflow-y: hidden;
}
#pickCyberwareAttachmentPop{
	max-width: 40rem;
	min-width:30rem;
	overflow-y: hidden;
}
#pickDronePop{
	max-width: 42rem;
	min-width:34rem;
	overflow-y: hidden;
}
#pickGearPop{
	max-width: 40rem;
	min-width:30rem;
	overflow-y: hidden;
}
#pickQualityPop{
	max-width: 66rem;
	min-width:45rem;
}
#pickSkillPop{
	max-width: 39rem;
	min-width: 33rem;
}
#pickSpellPop{
	max-width: 45rem;
	min-width: 42rem;
}
#pickVehiclePop {
	max-width: 39rem;
	min-width: 29rem;
	overflow-y: hidden;
}
#pickWeaponPop{
	max-width: 39rem;
	min-width: 35rem;
	overflow-y: hidden;
}
.playerCharacterPop{
	min-width:39rem;
	background-color:#;
}
.playerCharacterPop .detail{
}
.playerCharacterPopAttributes .pctableWrap{
	margin:0.5rem;
}
.playerCharacterPopTrack .gridWrap{
	background-color:initial;
	margin:0;
}
.playerCharacterPopTrack {
	display:block;
}
.playerCharacterPopTrack .subtitle,  .playerCharacterPopModifiers .subtitle
{
	font-size: 1rem;
	text-align: center;
	width: 100%;
	color: #;
}
 .playerCharacterPopModifiers .subtitle{
 	border-bottom:1px solid #;
	text-align: left;
	margin-top:0.5rem;
	text-indent:1rem;
 }
  .playerCharacterPopModifiers .detail{
  	padding:0 0.1rem !important;
  }
  
.playerCharacterPopModifiers b {
	white-space:initial;
	
}
.playerCharacterAmmo{
	padding:0.5rem;
}
.pickTable {
	 max-height: calc(100vh - 12rem);
}
.pushDiv{
	width:100%;
	border-bottom:1px solid #;
	text-align: center;
}
.quickBtns{
	display:flex;
	padding-top: 0.5rem;
	-webkit-transition: transform 0.5s;
    transition: transform 0.5s;
    justify-content: flex-end;
    max-width:calc(100% - 6rem);
    width:calc(100% - 6rem);
    flex-wrap:wrap-reverse;
}
.quickBtns.fixed{	
	position: fixed;
	right: 0;
	top: -3.4rem;
	z-index: 50;
	-ms-transform: translateY(100%);
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
	background-color: rgba(0,0,0,0.6);
	padding: 0.4rem 0;
	width: 100%;
	max-width:initial;
}
.quickBtns.fixed #navTopBtn{
	opacity:1;
	pointer-events:all;
}
.quickBtns.fixed label{	
	display:none;
}
.radioWrap label{
	display:flex;
	align-items:center;
	
}
.right {
	text-align:right;	
}
.section {
	padding:1rem;
	min-width:22rem;
	max-width:27rem;
	color:#;
	background-color:#;
	margin:1rem;
	-webkit-box-shadow:0 2px 4px #;
	box-shadow:0 2px 4px #;
	font-size:1.2rem;
	-webkit-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
    position:relative;
    border:0.2rem solid #;
}
.section.nohover:hover{
	cursor:default;
	background-color:#;
	-webkit-box-shadow:0 2px 4px #;
	box-shadow:0 2px 4px #;
}
.section:hover {
	cursor:pointer;
	background-color:#;
	-webkit-box-shadow:0 8px 8px #;
	box-shadow:0 8px 8px #;
}
.section.panelWrap:hover {
	cursor:default;
	background-color:#;
	-webkit-box-shadow:0 0 #;
	box-shadow: 0 0 #;
}
.section .category, .tableWrap .category {
	display:block;
	position: absolute;
	left: 0.1rem;
    font-family:Jura;
    font-variant-caps: all-petite-caps;
    color: grey;
    padding-left:0.2rem;
    font-size:1rem;
    top: -0.1rem;
    font-weight:bold;
    display:none;
}
.section .source, .tableWrap .source {
	display:block;
	position: absolute;
	right: 0.1rem;
    font-family:Jura;
    font-variant-caps: all-petite-caps;
    color: grey;
    padding-right:0.2rem;
    font-size:1rem;
    top: -0.1rem;
}
.select::after {
	content: '';
	border-left: .6rem solid transparent;
	border-right: .6rem solid transparent;
	border-top: 0.6rem solid #66ccff;
	height: 0;
	margin-top: 3rem;
	position: absolute;
	right: 2rem;
	width: 0;
	z-index: 20;
	pointer-events: none;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.1rem;
    text-overflow: '';
    padding-right:3rem;
    min-width:15rem;
}

.selectWrap:after{
	width: 2rem;
	height: 2rem;
	bottom: 0;
	text-align: center;
	position: absolute;
	color: #;
	padding: 0.5rem;
	pointer-events: none;
	font-size: 1.4rem;
	right:0;
}
.selectWrap:after{	
	content: '+';
}
select::-ms-expand {
    display: none;
}
.shadow {
	-webkit-box-shadow:0.6rem 1rem 0.3rem black !important;
	box-shadow: 0.6rem 1rem 0.3rem black !important;
	
}
.smallIcon {
	width:2.2rem;
	height:2.2rem;	
}
.spacer {
	width:100%;
	
}

.square.red{
	background-color:rgba(102, 0, 21,0.6);
	-webkit-box-shadow:inset 0px 2px 2px #;
	box-shadow: inset 0px 2px 2px #;
}

.square.orange{
	background-color:rgba(255, 153, 0,0.6);
	-webkit-box-shadow:inset 0px 2px 2px #;
	box-shadow: inset 0px 2px 2px #;
}

.square.yellow{
	background-color:rgba(230, 230, 0,0.6);
	-webkit-box-shadow:inset 0px 2px 2px #;
	box-shadow: inset 0px 2px 2px #;
}

.square.green{
	background-color:rgba(0, 153, 51,0.6);
	-webkit-box-shadow:inset 0px 2px 2px #;
	box-shadow: inset 0px 2px 2px #;
}

.square.blue{
	background-color:rgba(0, 0, 179,0.6);
	-webkit-box-shadow:inset 0px 2px 2px #;
	box-shadow: inset 0px 2px 2px #;
}
.square.purple{
	background-color:rgba(102, 0, 204,0.6);
	-webkit-box-shadow:inset 0px 2px 2px #;
	box-shadow: inset 0px 2px 2px #;
}
.star {
	position:absolute;
	z-index:5;
	top:1.2rem;
	right:0.5rem;
}
.star img{
	pointer-events:none;
	width:1.5rem;
	height:1.5rem;
}
.star:hover{
	top:1.1rem;
	cursor:pointer;
}
.Status.gridWrap{
	justify-content:flex-start !important;
	min-width:12rem;
	flex-direction:column;
}
.statusBox{
	width: 3rem;
	height: 3rem;
	border: 0.1rem solid #;
	display:flex;
	justify-content:center;
	align-items:center;
	color: #;
	-webkit-box-shadow:inset 0px 4px 12px #;
	box-shadow:inset 0px 4px 12px #;		
	background-color:#;
}
.statusBox:hover{
	cursor:pointer;
}
.statusBoxWrap{
	flex-wrap: nowrap;justify-content: flex-start;
	align-items: center;
	margin: 0.2rem 1rem 0;
	height: 3.5rem;	
}
.statusBoxWrap .inputWrap{
	margin-right:0;
}
.statusBox.fill{
	background-color:#;
	-webkit-box-shadow:inset 0px 6px 12px #;
	box-shadow: inset 0px 6px 12px #;
}
.statusIcon{
	width:2rem;
	height:2rem;
	pointer-events:none;	
	-webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;
}
.statusTrack {
	justify-content:flex-start;
	flex-direction:column;
	margin:0.2rem;
	
}
.statusTrack .subtitle{
	font-size:0.75rem !important;
	text-align:left !important;
	color:#;
	border-bottom:0 none;
	max-width:4rem;
	padding-left:0.75rem;
}
.subtitle{
	font-size:1.4rem;
	text-transform: uppercase;
	white-space:nowrap;
	color: #;
}
.sumDiv{
	width:100%;
	border-top:1px solid #;
	text-align: right;
}
.tab, .playerTab  {
	background-color:#;
	color:#;
	position:relative;
	flex:2;
	font-family:Jura;
	padding:1rem;
	font-size:1rem;
	text-align:center;
	text-transform:uppercase;
	border-top:0.1rem solid #;
	border-right:0.1rem solid #;
	border-bottom:0.1rem solid #;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	text-shadow:0 1px 1px #;
}
.tab[disabled], .playerTab[disabled]{
	color:# !important;
	pointer-events:none;
}
.tab:hover, .playerTab:hover {	
	background-color:#;
	color:#;
	cursor:pointer;
}
.tabFillLeft{
	border-top:0.1rem solid transparent;
	border-bottom:0.1rem solid #;
	border-right:0.1rem solid #;
	flex:8;
}
.tabFillRight{
	border-top:0.1rem solid transparent;
	border-bottom:0.1rem solid #;
	flex:1;
	
}
.tab.selected, .playerTab.selected {
	background-color:#;
	color:#;
	border-bottom:0.1rem solid transparent;
	cursor:default;
	box-shadow:none;
	box-shadow: 4px 3px 10px #;
	position: relative;
	z-index: 20;
}

table    {border-collapse:collapse;}
.table, .pctable, .grid {
	border-bottom:1px solid #;
	display:none;
	overflow-x: auto;
}
table.ird *  {text-align:center;vertical-align:middle;text-decoration:none;color:#;}
table.ird .selectedDate > *,table.ird .selectedDate {color: #;background-color: #;}
table.ird td  {font-size:1.5rem;border:1px solid #;background-color:#;text-decoration:none;cursor:pointer;}
table.ird td.date:hover  {background-color: #;}
table.ird .date  {height:3.5rem;width:3.5rem;}
table.ird select  {font-size:1.5rem;background-color:#;height:3rem;}
table.ird option  {font-size:1.2rem;background-color:#;text-align:left;}
.table .selected > *{
	background-color:#;
	border-bottom: 0.1rem solid #;
}
.table.show {	
	display: block;
}
.table td, .pctable td, .grid div {
	color:#;
	font-size:1rem;
	padding:0.2rem;
	border-bottom: 0.1rem solid #;
}
.table thead td, .table thead tr,.pctable thead td, .pctable thead tr, .grid .head  {
	background-color:black !important;
	font-weight:bold;
	text-transform:uppercase;
	color:#;
	border-bottom:1px solid #;
	border-top:1px solid #;
	font-size:1.2rem;
}
.table tr:nth-child(even), .pctable tr:nth-child(even) {
    background-color: #;
}
.table tr:nth-child(odd), .pctable tr:nth-child(odd) {
    background-color: #;
}
.tableTitle{
	text-transform:uppercase;
	font-size:1.8rem;
	color:#;
	font-weight:bold;
	padding:0.3rem 0;
	text-align:left;
}
.tableTitle:hover{
	cursor:pointer;
}
.tableWrap, .pctableWrap{
	padding:0.5rem;
	background-color: #;
	margin:0.5rem;
	-webkit-box-shadow:0 2px 4px #;
	box-shadow: 0 2px 4px #;
	display:inline-table;
}
td {
	width:-moz-fit-content;
}
td.hide{
	display:none;
}
.tdc {
	text-align:center;
}

.tdl {
	text-align:left;
}
.tdr {
	text-align:right;
}
#testsLimitsTable .title{
	padding:0;
	color:#;
	text-align:left;
	font-size:2.2rem;
	border:0 none;
}
#testsLimitsTable .subtitle{
	padding:1rem;
	color:#;
	text-align:center;
	font-size:1.6rem;
	border:0 none;
    font-family:Jura;
    white-space:normal;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}
#testsLimitsTable .section{
	width:calc(100% - 2rem);
	max-width:100vw;
}
#testsLimitsTable .section:hover{
	background-color:#;
	
}
#testsLimitsTable .subtitle > *{
	position:relative;
}
#testsLimitsTable .container{
	margin-bottom:3rem;
	padding:1rem;
}
#testsLimitsTable .skillTest, #testsLimitsTable .limitTest, #testsLimitsTable .intervalTest
{
	border-top:0.1rem solid #;
	margin:2rem 0.5rem;
}
#testsLimitsTable .attributeTest, #testsLimitsTable .thresholdTest
{
	border-bottom:0.1rem solid #;
	margin:2rem 0.5rem;
}
#testsLimitsTable .attributeTest:after, #testsLimitsTable .thresholdTest:after,  #testsLimitsTable .intervalTest:after,
#testsLimitsTable .skillTest:after, #testsLimitsTable .limitTest:after
{
	position:absolute;
	left:0;
	right:0;
	color:#;
    font-family:Jura;
    font-variant-caps: all-petite-caps;
    font-size:1.4rem;
}
#testsLimitsTable .attributeTest:after
{
	top:2rem;
	content:'Attribute';
}
#testsLimitsTable .thresholdTest:after
{
	top:2rem;
	content:'Threshold';
}
#testsLimitsTable .limitTest:after
{
	top:-2rem;
	content:'Limit';
}
#testsLimitsTable .skillTest:after
{
	top:-2rem;
	content:'Skill';
}
#testsLimitsTable .intervalTest:after
{
	top:-2rem;
	content:'Interval';
}
#testsLimitsTable .tableWrap{
	display:block;
}
#testsLimitsTable .table.show{
	display:inline-table;
	width:100%;
}
.thumb{
	border:0.2rem solid #;
	
}
.title{
	font-size:1.6rem;
	color:#;
	text-transform: uppercase;
}

.titleUnderline{
	border-bottom:0.1rem solid #;
}
.threadWrap {
	font-size:2rem;
	min-height:7rem;
	display:flex;
	position:relative;
	justify-content:space-between;
	flex-wrap:wrap;
	padding:0.25rem 1rem;
	margin:0.5rem;
	margin-left:2rem;
}
.threadWrap.pulse:before{
	content:'!';
	font-size:3rem;
	border-radius:2rem;
	height:2rem;
	width:2rem;
	background-color:transparent;
	color:#;
	left:-2rem;
	margin-top:2rem;
	position:absolute;
	font-family:VT323;	
  	animation: bounce 2s infinite;
 	-webkit-animation: bounce 2s infinite;
}
.threadWrap > *, .threadMessageWrap > *{	
	font-family:VT323;
}
.threadWrap:hover{
	cursor:pointer;
	color:#;
	background-color:#;
}
.threadWrap:hover .threadUserImages{
	z-index:0;
}
.threadWrap:hover .threadUserImages img{
	opacity:0.5;
}
.threadUsers, .threadMessageUser {
	font-family:VT323;
	font-size:1.2rem;
	font-style: italic;
	z-index:2;
	text-align: left;
}
.threadUserImages{
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}
.threadMessage{
	width:100%;
	text-align: left;
	font-size:2rem;
	z-index:2;
}
.threadMessage .portraitThumb{
	overflow:hidden;
}
.threadMessageWrap{
	flex-wrap:wrap;
	margin:1rem 0.1rem;
	padding: 1rem;	
	max-width:65%;
	width:100%;
	border-top:0.1rem solid #;
}
.threadMessageWrap.left{
	margin-right:35%;
	border-right: 0.1rem solid #;
}
.threadMessageWrap.right{
	margin-left:35%;
	border-left: 0.1rem solid #;
}
.threadDate, .threadMessageDate{
	font-family:VT323;
	font-size:1.1rem;
	z-index:2;
}

.threadNotification{
	font-family:VT323;
	font-size:1.2rem;
	color: #;
	padding: 0.1em 0.3em;
	text-align:center;
}
.threadNotificationWrap{
	padding:1em;
}
.trackBox{
	width: 3rem;
	height: 3rem;
	border: 0.1rem solid #;
	text-align: end;
	padding-top: 1.6rem;
	color: #;
	padding-right: 0.2rem;
	-webkit-box-shadow:inset 0px 4px 12px #;
	box-shadow:inset 0px 4px 12px #;		
	background-color:#;
}
.trackBox.ammo{
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	width: 1.4rem;
	margin: 0.2rem 0;
	height: 2.6rem;
}
.trackBox.fill{
	background-color:#;
	-webkit-box-shadow:inset 0px 6px 12px #;
	box-shadow: inset 0px 6px 12px #;
}
.trackControls {
	padding:0.5rem 0;
	width:100%;
}
.trackControls > *{
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
}

.trackMinus, .trackPlus{
	cursor:pointer;
	width:3rem;
	height:3rem;
	align-items:center;
	padding:0;
	color:#;
	font-size: 1.8rem;
}
.trackMinus[disabled=disabled], .trackPlus[disabled=disabled]{
	pointer-events:none;
	color:# !important;
	cursor:default;
}
.transition{	
	-webkit-transition: all 500ms;
    transition: all 500ms;	
}
.typeTag{
	opacity:0;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	position: relative;	
	background-color:#;
	border: 0.2rem solid #;
	color: #;
	font-weight: bold;
	padding: 0 0.1rem;
	text-shadow: 0 1px 2px #;
	margin: 0 auto;
	min-height: 1.7rem;
	text-align: center;
	font-size: 1.2rem;
}
.typeTag.show{	
	opacity:1;
}
.typeTag.pc{	
	background-color: #;
}
#userList .thumb:hover{
	cursor:pointer;
	border-color:#;	
}
.x {
	font-size: 1.8rem;
	color: #;
	padding: 0.2rem 0.5rem;
	position: absolute;
	right: 0;
	font-weight: bold;
	-ms-transform: scaleX(1.5);
	-webkit-transform: scaleX(1.5);
	-moz-transform: scaleX(1.5);
	-o-transform: scaleX(1.5);
	transform: scaleX(1.5);
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	z-index:50;
}
.x:hover{
	color: #;
	cursor: pointer;	
	-ms-transform: scaleX(1.5) rotateZ(180deg);
	-webkit-transform: scaleX(1.5) rotateZ(180deg);
	-moz-transform: scaleX(1.5) rotateZ(180deg);
	-o-transform: scaleX(1.5) rotateZ(180deg);
	transform: scaleX(1.5) rotateZ(180deg);
	text-shadow: 0px -2px 2px #;
}


/*
 * Nav Menu
 */
.expandable:after {
	content: '\203A';
	top: -1rem;
	position: relative;
}

nav {
	width:100%;
	padding:0.3rem 0rem 0.1rem;
	display:flex;
	justify-content:space-between;
}
#nav * {
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	font-size:2.6rem;
}

.navButton {
	border: 0 none;
	min-width: 3rem;
	z-index: 50;
	position: relative;
	min-height: 3rem;
	height: 3rem;
	font-size: 2.4rem;
	padding: 0;
	line-height: 3.2rem;
	content:'◨'
}
.navButton.back{
	font-size:2.2rem;
}
.navButtonDummy{	
	min-height: 3rem;
	width:0rem;
	min-width:0rem;
	max-width:0rem;
	overflow:hidden;
	height: 3rem;
	font-size: 2.4rem;
	line-height: 3.2rem;
}


.navMenu a {
	color: #;
	text-decoration: none;
	display: block;
	outline: none;
	white-space:nowrap;
}

.navMenu span {
	vertical-align: super;
	padding: 0 1rem;
	font-family:"Permanent Marker";
    text-shadow: 0 0.2rem 0.2rem #;
	text-transform: initial;
	top: 0.5rem;
	position: relative;
	line-height: 1.5rem;
}

.navMenu {
	position: absolute;
	left: 0;
	top:0;
	text-align: left;
	-ms-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
	border:0.2rem solid #;
	-webkit-box-shadow: 0 0.6rem 1.2rem #;
	box-shadow: 0 0.6rem 1.2rem #;
	-ms-transform-origin: top;
	-webkit-transform-origin: top;
	-o-transform-origin: top;
	transform-origin: top;
	background-color:# !important;
}
.navMenu ul {
	margin:0;
	padding:0;
}

.navMenu.show {
	-ms-transform: translateX(0);
	-webkit-transform:translateX(0);
	-moz-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
	display: block;
}
.navMenu li {
	list-style: none;
	padding: 0.3rem 0.5rem 0.3rem 0.3rem;
}

.navMenu li:hover {
	cursor: pointer;
	background-color:#;
	padding: 0.3rem 0.3rem 0.3rem 0.5rem;
}
.navPageTitle{
	position: absolute;
	left: 8rem;
	font-size: 3.6rem;
	top: -0.4rem;
	z-index: -1;
	font-family:"Permanent Marker";
	text-shadow: 2px 2px 0px #;
	color: #;
	overflow: hidden;
	white-space: nowrap;
	padding-right:1rem;
}
.navPageTitle.home
{
	left:4rem;
}
#navTopBtn {
	opacity:0;
	pointer-events:none;
}


/*
 * Status popup 
 */
#StatusBox {
	position: fixed;
	bottom: 0;
	right: 0.4rem;
	width: 24rem;
	max-width:calc(100% - 0.8rem);
	height: auto;
	margin-top: 0.4rem;
	z-index: 1000;
}

.statusBase {
	position: relative;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	opacity: 0;
	min-height: 60px;
	-webkit-box-shadow:0 6px 12px #;
	box-shadow: 0 6px 12px #;
	width: auto;
	padding: 16px;
	font-size:1.6rem;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	z-index: 15000;
}

.statusBase:nth-of-type(1) {
	margin-top: 0;
}

.statusError {
	background-color: #;
	color: #;
}

.statusInfo {
	background-color: #;
	color: #;
}

.statusWarn {
	background-color: #007af5;
	color: #;
}

.statusSuccess {
	background-color: #;
	color: #;
}

.statusBtn {
	float: right;
	top: 3px;
	right: 3px;
	width: 25px;
	height: 25px;
	display: table-cell;
	vertical-align: center;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	font-weight: bold;
	line-height: 25px;
}

.statusBtn:hover {
	filter: brightness(40%);
	cursor: pointer;
}
.white {
	color:#;
}
@media (max-width: 640px) {	
	html{font-size:72.5%;}
	.long {
		display:none;
	}
	.journalPopListWrap{
		position: absolute;
		left: 0;
		transform: translateX(-100%);
		
	}
	#journalPopListBtn, #journalPopCloseListBtn{
		display:block;
		opacity:1;
	}
	.journalPopListWrap.open{
		transform: translateX(0);
		min-width:100%;
		width:100%;
	}
	.navPageTitle{
		font-size: 3.2rem;
		z-index: -1;
		top: initial;
		white-space: initial;
		line-height: 16pt;
		padding-right: 1rem;
		height: 4rem;
		display: flex;
		align-items: center;
	}
	
	#pickAdeptPowerPop, 
	#pickArmorPop,
	#pickBiowarePop,
	#pickCharacterPop,
	#pickCyberdeckPop,
	#pickCyberwarePop,
	#pickCyberwareAttachmentPop,
	#pickDronePop, 
	#pickGearPop, 
	.playerCharacterPop,
	#pickQualityPop,
	#pickSkillPop,
	#pickSpellPop,
	#pickVehiclePop,
	#pickWeaponPop{
		min-width:initial;	
}
	.popup{
		width:100%;
		min-width:98%;
		margin:0;
		max-height: 100%;
	}
	.popup.search, .popup.info {
    	margin-top: 0;
	}
	.pWrap, .tableWrap, .pctableWrap {
		-webkit-transition: all ease 0.3s;
		-moz-transition: all ease 0.3s;
		transition: all ease 0.3s;
	}
	.tab{
		min-width:25%;
		border:0.1rem solid #;
		margin:0.2rem;
	}
	.tab.selected{
		box-shadow:none;
		background-color:#;
		border:0.1rem solid #;
	}
	.tabFillLeft{
		display:none;
	}
}

@media (max-width: 400px) {
	html{font-size:65.5%;}
	.damageTrackWrap{
		flex-wrap:wrap !important;
	}
}
@media (min-height: 3839px) and (min-width: 2159px)
{
	html{font-size:158%}
}
@media (min-height: 1079px) and (min-width: 1919px)
{
	html{font-size:124%}
	.mainBtn{height:20vh;width:20vw;font-size:2vw}
	.mainBtn .medIcon {height:10vh;width:10vw;}
	.popup.descriptionPop, .popup.diceRollInfoPop{max-width:1080px;}
}
@-webkit-keyframes bounce {
  0%       { top:-0.5rem; }
  25%, 75% { top:-0.25rem; }
  50%      { top:0rem; }
  100%     { top:-0.5rem;}
}
@keyframes bounce {
  0%       { top:-0.5rem; }
  25%, 75% { top:-0.25rem; }
  50%      { top:0rem; }
  100%     { top:-0.5rem;}
}

@-webkit-keyframes fire {
  0%       { transform:translateY(0); }
  50%      {  transform:translateY(-1vh); }
  100%     { transform:translateY(0);}
}
@keyframes fire {
  0%       { transform:translateY(0); }
  50%      {  transform:translateY(-1vh); }
  100%     { transform:translateY(0);}
}
@-webkit-keyframes load {
  0%       { width:0; }
  100%     { width:50%;}
}
@keyframes load {
  0%       { width:0; }
  100%     { width:50%;}
}
@-webkit-keyframes loading {
  0%       { width:50%; }
  100%     { width:100%;}
}
@keyframes loading {
  0%       { width:50%; }
  100%     { width:100%;}
}
@-moz-keyframes bounce {
  0%       { top:-0.5rem; }
  25%, 75% { top:-0.25rem; }
  50%      { top:0rem; }
  100%     { top:-0.5rem;}
}
@keyframes pulse {
0% {
    filter:brightness(100%);
    -webkit-filter:brightness(100%);
  }
  50% {
    filter:brightness(120%);
    -webkit-filter:brightness(120%);
  }
  100% {
    filter:brightness(100%);
    -webkit-filter:brightness(100%);
  }
}