@font-face {
    font-family: basier;
    src: url('https://ja-ja.co/font/basiersquare-regular-webfont.ttf');
}

@font-face {
    font-family: triptych;
    src: url('https://ja-ja.co/font/Triptych-Roman.otf');
}

@font-face {
    font-family: italic;
    src: url('https://ja-ja.co/font/Triptych-Italick.otf');
}


@font-face {
    font-family: archia;
    src: url('https://ja-ja.co/font/archia-regular-webfont.ttf');
}

body {
	color: #000;
	font-family: basier, maison, arial, sans-serif;
	font-size: 12pt;
	text-align: center;
	letter-spacing:1px;
	background: #fff;
	padding: 0;
	margin: 0 auto;
}

a:link { color:#0074ff; text-decoration:none; outline:none; cursor: url("https://img.icons8.com/wired/30/000000/hand-cursor.png"), auto;}
a:visited { color:#0074ff; text-decoration:none; outline:none; }
a:hover { color:#04E890; text-decoration:underline; outline:none; }
a:active { color:#0074ff; text-decoration:none; outline:none; }

.heading {font-size:12pt;
}

#container tr { list-style: none; }
#container .buttons { margin-bottom: 10px; }

#container .list tr { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }
#container .grid tr { width: 26.66%; height: 50px;}

.titlebar {
	padding-left:10%;
	float:left;
	text-align: left;
}

.searchbar {
	padding-right:10%;
	float:right;
}

h1{
        font-size:18pt;
        font-family: basier;
        font-weight: normal;
        font-style: normal;
        max-width:600px;
        text-align: left;
        padding-left:100px;
        width:90%;
        letter-spacing: 0px;
        position:absolute;
        top:75px;
        left:0;
        color:#eee;
        z-index: 200;
}

#left-nav {
display: block;
position: fixed;
top: 20px;
z-index: 100;
margin: 0 0 0 25px;
}

#moon {
display: block;
position: absolute;
top: 20px;
z-index: 150;
margin: 0 0 0 22px;
}


tr:hover {
  background-color:none;
}

th:hover {
	color:#04E890;
	}

thead {font-size:9pt;
}

.column {
width: 50%;
float: left;
}

.table {
  width: 100%;
  margin-bottom: 0.5rem;
  color: black;
}

.table th,
.table td {
  padding: 0.0rem;
  vertical-align: center;
  border-top: 1px solid #04E890;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #04E890;
}

.table tbody + tbody {
  border-top: 2px solid #04E890;
}

.table-sm th,
.table-sm td {
  padding: 0rem;
}

.table-bordered {
  border: 1px solid black;
  border-collapse: collapse;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #000;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 0px;
}

.table-clean th,
.table-clean td {
  width:50%;
  border: 0px solid #0074ff;
  padding-bottom:200px;
  font-size:14pt;
}

.table-grid {
	width:100%;
	margin:0 auto;
}

.dataTables_filter {
     display: none;
}

.dataTables_info {
     display: none;
}

.zoom {
  padding: 0px;
  transition: transform 0s;
  height: 30px;
  margin: 0 auto;
  transform-origin: left top;
}

.zoom:hover {
  -ms-transform: scale(10); /* IE 9 */
  -webkit-transform: scale(10); /* Safari 3-8 */
  transform: scale(12); 
}

.gridimg {
  width: 100%;
  padding-bottom: 12px;
}

.hiddenRow {
    padding: 0 !important;
}
.hidden{display:none;visibility:hidden}

.color{height:30px;}

.nav{
    position:fixed;
    z-index:999;
    top:0;
    left:0;
    width:90%;
    padding:.556rem 60px;
    background-color:#000;
    background-color:var(--body-color);
    font-size: 12pt;
}

.nav .nav__list{
    position:relative;
    display:flex;
    justify-content:space-between
}

.nav__list{
    list-style:none
}

.special-link{
    display:inline-block;
    text-decoration:none;
    position:relative
}
.special-link__text{
    color:#fff;
    color:var(--base-color)
}
.special-link__bg2{
    position:absolute;
    z-index:-1;
    border:3px solid #fff;
    border-color:var(--base-color);
    width:calc(100% + 1em);
    height:2em;
    top:60%;
    left:50%;
    transform:translate(-50%,-50%) rotate(-10deg);
    border-radius:40%
}
.special-link:nth-of-type(1) .special-link__bg{
    transform:translate(-50%,-50%) rotate(0deg)
}
.special-link:nth-of-type(2) .special-link__bg{
    transform:translate(-50%,-50%) rotate(0deg)
}
.special-link:nth-of-type(3) .special-link__bg{
    transform:translate(-50%,-50%) rotate(0deg)
}