table,tr,th,td {
	border: 1px solid black;
	border-collapse: collapse;
}

.table,.table th,.table td {
	border: 3px solid black;
	padding: 3px;
}

.th, .td {
	padding: 5px 5px 5px 5px;
}

.padding {
	padding: 10px;
}

.width_530px {
        width: 530px;
}

.fixed_header {
        table-layout: fixed;
        border-collapse: collapse;
}
.fixed_header tbody {
        display: block;
        width: 100%;
        overflow-y: auto;
	overflow-x: hidden;
//        height: 600px;
	height: calc(100vh - 120px);
}
.fixed_header thead tr {
        display: block;
}
.fixed_header tfoot tr {
	display: block;
}

.date tbody {
	overflow: visible;
	box-sizing: border-box;
	height: 100px;
	width: 200px;
}

.arial {
	font-family: Arial, Helvetica, sans-serif;
}

.bold {
	font-weight: bold;
}

.xp,.diff {
	text-align: right;
}

.levelup {
	background-color: lime;
	position: relative;
	cursor: pointer;
}

.overflow {
	background-color: yellow;
}

.levelup .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1000;
}

.tipleft {
  left: -50px;
}

.tiptop {
  top: -50px;
}

.tipbottom {
  top: +30px;
}

.levelup:hover .tooltiptext {
	visibility: visible;
	cursor: pointer;
}

.calculated {
	color: red;
	font-style: italic;
}

.normal {
	color: black;
}

.date {
	width: 200px;
}
.xp {
	width: 200px;
}
.diff {
	width: 100px;
}
 .name {
	width: 300px;
}

.right {
	text-align: right;
	padding: 2px;
}

.border-all {
	border: 3px solid black !important;
}

.border-sides {
	border-left: 3px solid black !important;
	border-right: 3px solid black !important;
}

.border-left {
	border-left: 3px solid black !important;
}

.border-right {
	border-right: 3px solid black !important;
}

.yep {
	background-color: lime !important;
}

.nope {
}

.separator-block {
	background-color: black;
}

.header-block {
	background-color: lightgray;
	text-align: center;
	font-size: 16px;
}

.empty {
	background-color: gray;
	border: none;
}

.empty2 {
	background-color: gray;
	font-family: Arial;
	font-size: 24px;
	text-align: center;
	vertical-align: middle;
}

.empty3 {
	background-color: pink;
	border: none;
}
.none {
	border: none;
}

.cell {
	text-align: left;
	vertical-align: top;
	font-size: 12px;
	height: 32px !important;
	width: 32px !important;
}

.cell2 {
	text-align: center;
	font-family: Arial;
	font-size: 12px;
	height: 12px;
	width: 32px;
}

.cell3 {
	font-family: Arial;
	font-size: 24px;
	text-align: center;
	vertical-align: top;
	height: 32px;
	width: 32px;
	cursor: pointer;
}

.shadow {
	background-color: lightgray;
}

.cell4 {
        font-family: Arial;
        font-size: 24px;
        text-align: center;
        vertical-align: top;
        height: 32px;
        width: 32px;
        cursor: not-allowed;
	background-color: lightgray;
}

.myimg {
	height: auto;
	width: 100%;
	// object-fit: fill;
	display: block;
}

.kryptoimage {
	height: 100%;
	width: 100%;
	object-fit: fill;
	display: block;
}

#letter {
	position: fixed;
	top: 100;
	left: 100;
	z-index: 1000;
}

.noborders {
	border: none;
}