@import 'https://fonts.googleapis.com/css?family=Open+Sans';

@font-face {
	font-family: 'OCR A Extended';
    src: url('font/OCRAExtended.woff2') format('woff2'),
        url('font/OCRAExtended.woff') format('woff'),
        url('font/OCRAExtended.svg#OCRAExtended') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: 'Open Sans', sans-serif;
	/* line-height: 1.75em; */
	font-size: 16px;
	background-color: #222;
	color: #aaa;
	padding: 30px;
}

.ocr {
	font-family: 'OCR A Extended';
}

.simple-container {
	max-width: 675px;
	margin: 0 auto;
	padding-top: 70px;
	padding-bottom: 20px;
}

.simple-print {
	fill: white;
	stroke: white;
}
.simple-print svg {
	height: 100%;
}

.simple-close {
	color: white;
	border-color: white;
}

.simple-ext-info {
	border-top: 1px solid #aaa;
}

p {
	font-size: 16px;
}

h1 {
	font-size: 30px;
	line-height: 34px;
}

h2 {
	color: white;
	font-size: 30px;
	line-height: 20px;
	padding-top: 5px;
}

h3 {
	color: white;
	font-size: 16px;
	line-height: 27px;
	padding-top: 15px;
	padding-bottom: 15px;
}

hr {
	height: 1px;
	background-color: #222;
	border: none;
	width: 100%;
	margin: 0px;
}

a[href] {
	color: white;
}

a[href]:hover {
	color: #aaa;
}

img {
	max-width: 100%;
}

li {
	line-height: 1.5em;
}

aside,
[class *= "sidebar"],
[id *= "sidebar"] {
	max-width: 90%;
	margin: 0 auto;
	border: 1px solid lightgrey;
	padding: 5px 15px;
}

@media (min-width: 1921px) {
	body {
		font-size: 18px;
	}
}

/* --------------------------- */
/* Vanta-Added */
.overcell{
	width: 300px;
	border: 1px solid rgba(255, 255, 255, .5);
}

.overrow{
	border: 1px solid rgba(255, 255, 255, .5);
}

.innercell-bottom-left {
	text-align:left;
	padding: 0px 0px 5px 5px;
	vertical-align:bottom;
}

.innercell-bottom-right {
	text-align:right;
	padding: 5px 5px 0px 0px;
	vertical-align:bottom;
}

/* Tooltip container */
.tooltip {
  cursor:unset;
}

.planett{ 
	cursor:pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 200px;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position:absolute;
  opacity: 0;
  transition: opacity 1s;
  font-size: 18px;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

.planettt {
	visibility: hidden; /* Hidden by default */
	width: 200px;
	background-color: black;
	color: #ffffff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	position:absolute;
	inset-inline-start:10px;
	opacity: 0;
	transition: opacity 1s;
	font-size: 18px;
	z-index: 1; /* Ensure tooltip is displayed above content */
}

.planett-show {
	visibility: visible;
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.planett:hover .planettt {
  visibility: visible;
  opacity: 1;
}

/* Flip cards */
.card {
	width: 220px;
	height: 374px;
	perspective: 1000px;
	transition: transform .5s;
	transform-style: preserve-3d;
}

.card.flipped {
	transform: rotateY( 180deg );
}

.card-front, .card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

.card-back {
	transform: rotateY(180deg);
	font-size:15px;
	padding: 5px;
}

/* Background Colors */
.strk{
	background-color: #330000;
}

.ewo{
	background-color: #333300;
}

.intr{
	background-color: #00331A;
}

.mult{
	background-color: #333333;
}

/* Text size */
.text21 {
	font-size: 21px;
}

.text16 {
	font-size: 16px;
}

.text14 {
	font-size: 14px;
}

.text12 {
	font-size: 12px;
}

/* Padding */
.pad25 {
	padding: 25px;
}

.padt50 {
	padding-top: 50px;
}

.pad10 {
	padding: 10px;
}

.pad0 {
	padding: 0px;
}

td {
	padding: 5px;
	text-align:center;
}

/* V-Align */
.vtop {
	vertical-align: top;
}

/* Text-Align */
.tcenter {
	text-align: center;
}

/* Text Color */
.twhite {
	color: white;
}

/* Filtering */
.plane, .family {
	overflow: hidden;
	display: none;
}

.show {
	display: inline-flex;
}

.active{
	background-color: #777;
	color: #000;
}

.family {
	border: 1px black;
}

select, option{
	font-size: 16px;
	color: white;
	background: #222;
	border: 2px solid #dddddd;
	padding: 10px;
	/* transition: 0.4s; */
}

option {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}

button {
	font-size: 16px;
	color: white;
	background: #222;
	border: 2px solid #dddddd;
	padding: 10px;
}

button:hover{
	cursor: pointer;
}