body {
	/* background-color: rgb(196, 196, 196); */
	background-color: #FFFFFF;
}
* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.nl {
	margin-bottom: 10px;
}

x-neg {
	color: rgb(175, 0, 0);
}
x-pos {
	color: rgb(255, 254, 216);
}


/* Styles for UI fields */
.field-api-key {
	background: #d4d4d4;
	border-radius: 10px;
	padding: 10px;
	border: 2px solid #73AD21;
}
.field-stat {
	color: white;
	background: #585858;
	border-radius: 8px;
	padding: 0px 10px 0px 10px;
	border: 2px solid #385510;
	font-family: monospace;
	line-height: 150%;
}
.field-date {
	color: white;
	background: #585858;
	border-radius: 10px;
	padding: 0px 10px 0px 10px;
	border: 2px solid #385510;
	font-family: monospace;
}
.field-url {
	color: white;
	background: #555;
	border-radius: 10px;
	padding: 2px 8px 2px 8px;
	border: 2px solid #ffffff;
	font-family: monospace;
	font-size: 14px;

	cursor: pointer;
}
.field-blank {
	/* color: white; */
	/* background: #555; */
	border-radius: 10px;
	padding: 2px 8px 2px 8px;
	border: 2px solid #ffffff;
	font-family: monospace;
	font-size: 14px;
}

.field-receipt {
	color: white;
	background: #585858;
	border-radius: 10px;
	padding: 0px 10px 0px 10px;
	border: 2px solid #385510;
	font-family: monospace;
}

.field-creds {
	color: white;
	background: #858585;
	border-radius: 10px;
	padding: 8px 10px 8px 10px;
	border: 2px solid #385510;
	font-family: Inter;
	font-size:32px;
}


/* Styles for Popups */
.popupholder {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	pointer-events: none
}
.popup {
	max-width: 500px;
	min-height: 200px;
	padding: 20px;
	margin: auto;
	background-color: rgb(0, 173, 173);
	border-radius: 30px;
	border: 4px solid rgb(0, 95, 95);
	display: none;
	z-index: 1500;
	pointer-events: all;
}

.copyable {

}

.copyflag::after {
	padding-left:0.2em;
	color:#888;
	content: " \f24d";
	font-family: "FontAwesome";
	font-size: 80%;
	font-weight: 400;
}
.copyable:hover .copyflag::after,
.copyflag:hover::after {
	color:#000;
}



/* Shitbox w3schools tooltips */
/* Tooltip container */
.tooltip {
	position: relative;
	/* display: inline-block; */
	/* border-bottom: 1px dotted black; */
	/* If you want dots under the hoverable text */
}
.tooltipflag::after {
	vertical-align: top;
	line-height: 150%;
	/* color:#777; */
	content: "\00a0\f29c";
	font-family: "FontAwesome";
	font-size: 70%;
	font-weight: 400;
}
/* permit tooltip as parent of flagged element or as the flagged element itself */
.tooltip:hover .tooltipflag::after,
.tooltip:hover.tooltipflag::after {
	content: "\00a0\f059";
}

/* Tooltip text */
.tooltip .tooltiptext {
	display: inline;
	visibility: hidden;
	/* width: 120px; */
	background-color: #1d5372;
	border: 2px solid #00111b;
	color: #fff;
	text-align: center;
	padding: 10px 10px;
	border-radius: 6px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 2000;
	bottom: 125%;
	left: 50%;
	/* margin-left: -calc(50%); */
	font-family: Inter;
	font-size: 16px;
	white-space: nowrap;
	transform: translateX(-50%);

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
	user-select: none;
	pointer-events: none;
	line-height: 1.4em;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: #00111b transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.ttheader {
    width: 100%;
    text-align: center;
    font-size: 120%;
    font-weight: 700;
}
.ttwarning {
    color: lightcoral;
    font-weight: bold;
}

@media (max-width: 768px) {
	.tooltip{
		position: static;
	}
	.tooltip .tooltiptext {
		display: none;
	}
}


/* Futzing with the template */
.forceactive {
	color: #fff;
	border-color: #3521b5;
	background-color: #3521b5;
	pointer-events: none;
	cursor: default;
}