@import url("basic.css");
@import url("PL3toPLw.css");
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosanssc/v36/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYw.ttf) format('truetype')
}
* {
    font-family: MonospaceTypewriter, 'Noto Sans SC';
}
.text-center{
    text-align: center;
}
p{
    margin: 0px;
}
table{
    
    margin-inline-start: auto;
    margin-inline-end: auto;
}



.tooltipBox {
    position: relative
}
  
.tooltipBox:hover .tooltip {
    opacity: 1
}


.achi {
    border: solid 3px black;
    background-size: contain;
    width: 75px;
    height: 75px;
    background-color: gray;
    border-radius: 10%;
    padding: 5px;
    color: white;
    text-shadow: 0px 0px 12px black;
    font-size: 12px
}
  
.achiunlocked{
    background: darkgreen;
}


.tooltip {
    pointer-events: none;
    text-align: center;
    width: 150px;
    font-size: 12px;
    line-height: 1.2;
    bottom: 100%;
    left: 50%;
    margin-bottom: 5px;
    transform: translateX(-50%);
    padding: 7px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.5s;
    position: absolute;
    z-index: 20000;
    background-color: rgba(0, 0, 0, 0.75);
    color: white ;
    font-size: 14px
  }
  
  .tooltip:after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: white transparent transparent transparent
  }

  .sticky{
    position: sticky; 
    background: var(--color-text-invert)
  }
  
.light_red {
	color: #f55;
}

.red {
	color: red;
}

.orange {
	color: #f50;
}

.yellow {
	color: #fb0;
}

.gold {
	color: #fe0;
}

.limegreen {
	color: #00ff00;
}

.green {
	color: #00bb00;
}

.light_green {
	color: lightgreen;
}

.sky {
	color: skyblue;
}

.cyan {
	color: #07f;
}

.magenta {
	color: #f08;
}

.gray {
	color: gray
}