* {
  font-size: 1rem;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-shadow: 0px 0px 4px 1px #fff inset;
          box-shadow: 0px 0px 4px 1px #fff inset;
  font-family: "Noto Serif", "Century Schoolbook", Georgia, Times, serif;
  background-repeat: repeat;
}

body {
  background-repeat: repeat;
}

img, ul, li {
  margin: 0px;
  border: 0px;
  padding: 0px;
}

.accessKey {
  color: #fff;
}

.background-blue-dark {
  background-color: #003;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12px, rgba(0, 0, 153, 0.2) 12px, rgba(0, 0, 153, 0.2) 36px, rgba(0, 0, 153, 0.4) 36px, rgba(0, 0, 153, 0.4) 60px, rgba(0, 0, 153, 0.2) 60px, rgba(0, 0, 153, 0.2) 84px, rgba(255, 255, 255, 0) 84px, rgba(255, 255, 255, 0) 96px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12px, rgba(0, 0, 153, 0.2) 12px, rgba(0, 0, 153, 0.2) 36px, rgba(0, 0, 153, 0.4) 36px, rgba(0, 0, 153, 0.4) 60px, rgba(0, 0, 153, 0.2) 60px, rgba(0, 0, 153, 0.2) 84px, rgba(255, 255, 255, 0) 84px, rgba(255, 255, 255, 0) 96px);
}

.background-blue-white {
  background-color: #fff;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12px, rgba(0, 0, 153, 0.2) 12px, rgba(0, 0, 153, 0.2) 36px, rgba(0, 0, 153, 0.4) 36px, rgba(0, 0, 153, 0.4) 60px, rgba(0, 0, 153, 0.2) 60px, rgba(0, 0, 153, 0.2) 84px, rgba(255, 255, 255, 0) 84px, rgba(255, 255, 255, 0) 96px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12px, rgba(0, 0, 153, 0.2) 12px, rgba(0, 0, 153, 0.2) 36px, rgba(0, 0, 153, 0.4) 36px, rgba(0, 0, 153, 0.4) 60px, rgba(0, 0, 153, 0.2) 60px, rgba(0, 0, 153, 0.2) 84px, rgba(255, 255, 255, 0) 84px, rgba(255, 255, 255, 0) 96px);
}

.background-red-white {
  background-color: #fff;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12px, rgba(153, 0, 0, 0.2) 12px, rgba(153, 0, 0, 0.2) 36px, rgba(153, 0, 0, 0.4) 36px, rgba(153, 0, 0, 0.4) 60px, rgba(153, 0, 0, 0.2) 60px, rgba(153, 0, 0, 0.2) 84px, rgba(255, 255, 255, 0) 84px, rgba(255, 255, 255, 0) 96px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12px, rgba(153, 0, 0, 0.2) 12px, rgba(153, 0, 0, 0.2) 36px, rgba(153, 0, 0, 0.4) 36px, rgba(153, 0, 0, 0.4) 60px, rgba(153, 0, 0, 0.2) 60px, rgba(153, 0, 0, 0.2) 84px, rgba(255, 255, 255, 0) 84px, rgba(255, 255, 255, 0) 96px);
}

.background-red-blue {
  background-color: #ccc;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12px, rgba(153, 0, 0, 0.2) 12px, rgba(153, 0, 0, 0.2) 36px, rgba(153, 0, 0, 0.4) 36px, rgba(153, 0, 0, 0.4) 60px, rgba(153, 0, 0, 0.2) 60px, rgba(153, 0, 0, 0.2) 84px, rgba(255, 255, 255, 0) 84px, rgba(255, 255, 255, 0) 96px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12px, rgba(0, 0, 153, 0.2) 12px, rgba(0, 0, 153, 0.2) 36px, rgba(0, 0, 153, 0.4) 36px, rgba(0, 0, 153, 0.4) 60px, rgba(0, 0, 153, 0.2) 60px, rgba(0, 0, 153, 0.2) 84px, rgba(255, 255, 255, 0) 84px, rgba(255, 255, 255, 0) 96px);
}

.background-red-blue-white {
  background-color: #fff;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12px, rgba(153, 0, 0, 0.2) 12px, rgba(153, 0, 0, 0.2) 36px, rgba(153, 0, 0, 0.4) 36px, rgba(153, 0, 0, 0.4) 60px, rgba(153, 0, 0, 0.2) 60px, rgba(153, 0, 0, 0.2) 84px, rgba(255, 255, 255, 0) 84px, rgba(255, 255, 255, 0) 96px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12px, rgba(0, 0, 153, 0.2) 12px, rgba(0, 0, 153, 0.2) 36px, rgba(0, 0, 153, 0.4) 36px, rgba(0, 0, 153, 0.4) 60px, rgba(0, 0, 153, 0.2) 60px, rgba(0, 0, 153, 0.2) 84px, rgba(255, 255, 255, 0) 84px, rgba(255, 255, 255, 0) 96px);
}

.button-close-popup {
  margin: 0.5rem;
}

.color-blue {
  color: #003;
}
.color-bright-blue {
  color: #9cf;
}
.color-gray {
  color: #666;
}
.color-green {
  color: #090;
}
.color-orange {
  color: #fc9;
}
.color-silver {
  color: #ccc;
}

.dd-background-image {
  display: inline-block;
  height: 1.2rem;
  width: 63%;
}

.div-board {
  cursor: pointer;
  display: inline-block;
  height: 128px;
  width: 128px;
  -webkit-box-shadow: 0px 0px 1px 1px #666 inset;
          box-shadow: 0px 0px 1px 1px #666 inset;
  background-color: #006;
  background-image: repeating-linear-gradient(0deg, #fff, rgba(255, 255, 255, 0.75) 2.5%, rgba(0, 0, 102, 0.25) 3%, rgba(255, 255, 255, 0) 3.5%, rgba(255, 255, 255, 0) 4%, rgba(0, 0, 102, 0.25) 4.5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 95%, rgba(0, 0, 102, 0.25) 95.5%, rgba(255, 255, 255, 0.75) 96%, rgba(255, 255, 255, 0) 96.5%, rgba(0, 0, 102, 0.25) 97%, #fff 97.5%, #fff 100%), repeating-linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.75) 2.5%, rgba(0, 0, 102, 0.25) 3%, rgba(255, 255, 255, 0) 3.5%, rgba(255, 255, 255, 0) 4%, rgba(0, 0, 102, 0.25) 4.5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 95%, rgba(0, 0, 102, 0.25) 95.5%, rgba(255, 255, 255, 0.75) 96%, rgba(255, 255, 255, 0) 96.5%, rgba(0, 0, 102, 0.25) 97%, #fff 97.5%, #fff 100%), repeating-linear-gradient(0deg, #fff, #fff 3%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, #fff 97%, #fff 100%), repeating-linear-gradient(90deg, #fff, #fff 3%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, #fff 97%, #fff 100%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), #ccc 1%, rgba(255, 255, 255, 0) 2%), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), #ccc 1%, rgba(255, 255, 255, 0) 2%);
}

.div-info {
  display: block;
  font-size: 0.8rem;
  text-align: left;
  margin: 0 1rem;
  padding: 0.2rem;
}

.div-info ul, li {
  font-size: 0.75rem;
}

.div-main {
  background-color: #fff;
  text-align: center;
  padding: 0;
  width: 100%;
}

.div-setting {
  display: block;
  font-size: 0.8rem;
  text-align: left;
  margin: 0;
}

.div-setting-header {
  background-color: rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  padding: 0.2rem;
  cursor: pointer;
}

.filter-grayscale {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.filter-hue-rotate-270 {
  -webkit-filter: hue-rotate(270deg);
          filter: hue-rotate(270deg);
}

.filter-hue-rotate-90 {
  -webkit-filter: hue-rotate(90deg);
          filter: hue-rotate(90deg);
}

.font-size-0-9-rem {
  font-size: 0.9rem;
}

.font-weight-bold {
  font-weight: bold;
}

.font-weight-nomal {
  font-weight: normal;
}

.grid-area-board {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: board;
  grid-row: 3;
  grid-column: 1;
  background-color: rgba(255, 255, 255, 0.6);
  display: -ms-grid;
  display: grid;
      grid-template-areas: "card card card card" "card card card card" "card card card card";
  grid-gap: 0px;
  padding: 0;
  margin: 0;
}

.grid-area-header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: header;
  grid-row: 1;
  grid-column: 1;
  font-size: 2rem;
  font-weight: bold;
  font-family: Courgette, "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-shadow: 0.05rem 0.05rem 0.1rem #000, 0 0 2rem #666, 0 0 0.2rem #006;
  background-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  padding-bottom: 0.5rem;
}

.grid-area-status {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: status;
  grid-row: 2;
  grid-column: 1;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: 0px 0px 1px 1px rgba(51, 51, 51, 0.6) inset;
          box-shadow: 0px 0px 1px 1px rgba(51, 51, 51, 0.6) inset;
  text-align: left;
  padding: 0.2rem 0.3rem;
  margin: auto 0;
  width: auto;
}

.grid-main {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'header' 'status' 'board';
  margin: auto;
  padding: 12px;
}

.img-board {
  visibility: hidden;
  opacity: 0;
  height: 128px;
  width: 128px;
  outline: 1px solid rgba(0, 0, 0, 0.25);
  outline-offset: -1px;
}

.img-button {
  display: inline-block;
  height: 1.2rem;
  width: auto;
  margin: 0 0.1rem;
  vertical-align: -0.2rem;
  cursor: pointer;
}

.img-button-big {
  height: 2rem;
  width: auto;
}

.img-language {
  height: 1rem;
  width: auto;
}

.note {
  font-size: inherit;
  text-decoration: underline;
}

.popup {
  position: relative;
  display: inline-block;
}

.popup .tooltip-popup {
  font-size: 0.8rem;
  position: absolute;
  display: inline-block;
  visibility: hidden;
  z-index: 1;
  left: 0;
  top: 0.5rem;
  width: 512px;
  height: auto;
  background-color: #003;
  -webkit-box-shadow: 0px 0px 1px 1px rgba(51, 51, 51, 0.6);
          box-shadow: 0px 0px 1px 1px rgba(51, 51, 51, 0.6);
  color: #fff;
  border: 0.05rem solid #fff;
  border-radius: 0.33em;
  text-align: center;
  margin: 0px;
  padding: 0.4rem;
  color: #ccc;
  opacity: 1;
}

.span-status, .status-label {
  font-size: 2rem;
}

.span-difficulty {
  font-size: 0.9rem;
  margin: 1rem;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-popup a, address {
  color: inherit;
  font-size: 0.7rem;
  display: inline;
  padding: 0;
}

.tooltip-popup dl {
  padding: 0.2rem 0;
}

.tooltip-popup dl, dt, dd {
  font-size: inherit;
  margin: 0;
  padding: 0;
}

.tooltip-popup dd, dt {
  display: inline-block;
}

.tooltip-popup dt {
  padding-left: 2%;
  width: 35%;
  cursor: pointer;
}

.tooltip-popup .credits {
  display: inline-block;
  font-size: 0.7rem;
  text-shadow: 0.05rem 0.05rem 0.1rem #000, 0 0 2rem #666, 0 0 0.2rem #006;
  margin: 0px;
  font-style: italic;
  padding: 0.3rem;
}

.tooltip-popup .div-setting {
  padding: 0.2rem;
}

.tooltip-popup .header {
  font-size: 2rem;
  margin: 0px;
  padding-bottom: 0.5rem;
  font-family: Courgette, "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.tooltip-popup .subheader {
  font-size: 1.2rem;
  margin: 0px;
  padding-bottom: 0.2rem;
}

.tooltip-popup button {
  font-size: 0.9rem;
  font-family: "Noto Serif", "Century Schoolbook", Georgia, Times, serif;
  border-radius: 0.2rem;
  padding: 0.1rem 0.25rem;
  cursor: pointer;
}

.tooltip-popup .header, .subheader {
  text-shadow: 0.05rem 0.05rem 0.1rem #000, 0 0 2rem #666, 0 0 0.2rem #006;
  background-color: rgba(255, 255, 255, 0.25);
  display: block;
}

.tooltip .tooltip-text {
  font-size: 0.8rem;
  position: absolute;
  visibility: hidden;
  z-index: 2;
  left: 0;
  top: 1.5rem;
  width: 7.5rem;
  height: auto;
  background-color: #003;
  -webkit-box-shadow: 0px 0px 1px 1px rgba(51, 51, 51, 0.6);
          box-shadow: 0px 0px 1px 1px rgba(51, 51, 51, 0.6);
  color: #ccc;
  border: 0.05rem solid #fff;
  border-radius: 0.33em;
  text-align: center;
  margin-left: 0;
  padding: 0.4rem;
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltip-text::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 0.4rem;
  margin-left: 0;
  border-width: 0.25rem;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

#dl-setting-background, #dl-setting-imagecount, #dl-setting-images-selected, #dl-setting-language {
  visibility: hidden;
  height: 0px;
}

#header-close-popup-help, #header-close-popup-settings {
  cursor: move;
}
/*# sourceMappingURL=style.css.map */