html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #222;
}
* {
  box-sizing: border-box;
}

body,
th,
td,
li,
dt,
dd,
input,
textarea,
select,
option {
  font-family: Meiryo, sans-serif;
  font-size: 11px;
  line-height: 14px;
}

body > div {
  display: none;
}

/* ---------- INLINE ---------- */
.hide {
  display: none;
}

.comment,
.comment * {
  font-size: 11px;
  line-height: 13px;
}
.mini,
.mini * {
  font-size: 10px !important;
  line-height: 11px !important;
}

.red {
  color: #c00;
}
.green {
  color: #060;
}
.error {
  background: #fdd;
}
nobr {
  display: inline-block;
}
.nobr {
  white-space: nowrap;
}

/* ---------- ANCHOR ---------- */
a,
a:visited {
  display: inline-block;
  color: #08d;
  text-decoration: none;
  padding: 0 3px;
  border-radius: 4px;
}
a:hover,
a:focus,
a:active {
  color: #000 !important;
  background: #fe9;
}
a[title] {
  background: #cfb;
}
a.disabled {
  background: transparent !important;
  color: #dcc !important;
}

a[target='_blank'] {
  position: relative;
  padding-right: 16px;
}
a[target='_blank']::before,
a[target='_blank']::after {
  position: absolute;
  right: 0;
  display: inline-block;
}
a[target='_blank']::before {
  content: '';
  margin: 4px 3px 0 0;
  width: 8px;
  height: 8px;
  border: solid 1px #06f;
  border-radius: 2px;
  background: #fff;
  box-shadow: -1px 1px 0 0 #8af;
}
a[target='_blank']::after {
  content: 'N';
  margin: -3px -3px 0 0;
  font-size: 12px;
  color: #06f;
  font-weight: bold;
  -webkit-text-stroke: 1px #fff;
  text-shadow: -1px 1px 0 #fff;
}

a[target='_blank'][href^='http']::before {
  border: solid 1px #f60;
  box-shadow: -1px 1px 0 0 #fa8;
}
a[target='_blank'][href^='http']::after {
  content: '➡';
  transform: rotate(-45deg);
  color: #f60;
}

/* ---------- HOLIZON LINE ---------- */
hr {
  margin: 5px 0;
  height: 1px;
  border: solid 0 #666;
  border-top-width: 1px;
}
hr.bold {
  border-top-width: 2px;
}
hr.double {
  border-style: double;
  border-top-width: 3px;
}
hr.dash {
  border-style: dashed;
}
hr.dot {
  border-style: dotted;
}
hr.narrow {
  margin: 2px 0;
}

/* ---------- TABLE --------- */
table {
  border-collapse: collapse;
  margin: 3px;
}
td,
th {
  border: solid 1px #888;
  padding: 3px 5px;
}
th {
  background: #ddd;
}

table.display {
  border: none;
  margin: 0;
}
table.display th,
table.display td {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}
.t_l {
  text-align: left;
}
.t_c {
  text-align: center;
}
.t_r {
  text-align: right;
}
.v_t {
  vertical-align: top;
}
.v_m {
  vertical-align: middle;
}
.v_b {
  vertical-align: bottom;
}

/* ---------- LIST --------- */
ul,
li,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}
li {
  margin: 0 0 0 10px;
  padding: 0 3px 0 0;
}

/* ---------- FORM --------- */
:root {
  --input-background: #cfc;
  --input-background-hover: #cef;
  --input-background-focus: #ffc;
  --input-border: solid 1px #888;

  --button-background-off: #eee;
  --button-background-on: #fe8;
  --button-background-2off: #fcc;
  --button-background-2on: #bff;
  --button-background-disabled: #edd;

  --button-border-off: solid 1px #999;
  --button-border-on: solid 1px #cc9;
  --button-border-2off: solid 1px #c88;
  --button-border-2on: solid 1px #66f;
  --button-border-disabled: dashed 1px #caa;

  --map-rotate: 0;

  --h3-background: #263f26;
  --h3-textcolor: #8c8;
  --h3-background-light: #575;
  --h3-textcolor-light: #cfc;
}

form {
  display: inline-block;
  margin: 0;
  padding: 0;
}
input[type='file'] {
  width: 60px;
}
input[type='color'] {
  margin: 2px 3px;
}
*[class^='input'] {
  display: inline-block;
}

/* --- FORM > TEXT --- */
textarea,
input[type='text'],
input[type='number'],
input[type='date'],
input[type='password'],
input[type='file'],
*[class^='input'] {
  background: var(--input-background);
  border: var(--input-border);
  border-radius: 2px;
  padding: 0 2px;
  width: 120px;
}

textarea:hover,
input[type='text']:hover,
input[type='number']:hover,
input[type='date']:hover,
input[type='password']:hover,
input[type='file']:hover,
*[class^='input']:hover {
  background: var(--input-background-hover);
}

textarea:focus,
input[type='text']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='password']:focus,
input[type='file']:focus {
  background: var(--input-background-focus);
}

input[type='number'] {
  appearance: none;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- FORM > SELECT --- */
select {
  background: var(--input-background);
  border: var(--input-border);
  border-radius: 2px;
  cursor: pointer;
  padding: 0 4px;
  height: 21px;
  vertical-align: middle;
}
option {
  background: #fff;
}
select:focus,
select:hover,
input[type='file']:focus,
input[type='file']:hover {
  background: var(--input-background);
}

/* --- FORM > BUTTON --- */
input[type='button'],
input[type='submit'],
input[type='reset'] {
  cursor: pointer;
  background: var(--button-background-off);
  border: var(--button-border-off);
  padding: 2px 5px;
  min-width: 35px;
  border-radius: 2px;
}

input[type='submit'] {
  font-weight: bold;
}
input[type='submit']:disabled {
  font-weight: normal;
}

/* --- FORM > RANGE-BOX --- */
input[type='range'] {
  display: inline-block;
  padding: 0;
  vertical-align: text-bottom;
}

/* --- FORM > CHECK-BOX --- */
/* off */
input[type='radio'] {
  cursor: pointer;
  padding: 0;
  margin: 0 -15px 0 2px;
  vertical-align: middle;
}
input[type='checkbox'] {
  cursor: pointer;
  padding: 0;
  margin: 2px 2px;
  vertical-align: middle;
}
input + label,
a.radio {
  cursor: pointer;
  background: var(--button-background-off);
  border: var(--button-border-off);
  border-radius: 4px;
  display: inline-block;
  margin: 2px 0;
  padding: 1px 3px;
}
label {
  cursor: pointer;
}

/* off -> ON */
input[type='button']:hover,
input[type='button']:focus,
input[type='submit']:hover,
input[type='reset']:focus,
input[type='submit']:hover,
input[type='reset']:focus,
input:focus + label,
input:hover + label,
input + label:hover,
a.radio:hover {
  background: var(--button-background-2on);
  border: var(--button-border-2on);
}

/* ON */
input:checked + label,
a.radio:focus {
  background: var(--button-background-on);
  border: var(--button-border-on);
}

/* ON -> off */
input[type='checkbox']:checked:focus + label,
input[type='checkbox']:checked:hover + label,
input[type='checkbox']:checked + label:hover {
  background: var(--button-background-2off) !important;
  border: var(--button-border-2off) !important;
}

/* ON -> ON */
input[type='radio']:checked:focus + label {
  background: var(--button-background-2on) !important;
  border: var(--button-border-2on) !important;
}
input[type='radio']:checked:hover + label,
input[type='radio']:checked + label:hover {
  cursor: auto;
}

/*  DISABLED  */
input[type='text']:disabled,
textarea:disabled,
select:disabled,
input[type='button']:disabled,
input[type='submit']:disabled,
input[type='radio']:disabled,
input[type='checkbox']:disabled,
input:disabled + label {
  cursor: not-allowed;
  opacity: 0.5 !important;
  background: var(--button-background-disabled) !important;
  border: var(--button-border-disabled) !important;
}

input[type='range']:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━ Z-INDEX ━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --header-z: 90;
  --map-list-z: 98;
  --ads-z: 99;

  --side-z: 2;
  --photo-ex-z: 99;

  --map-z: 1;
  --map-div-z: 1;
  --map-svg-z: 2;
  --map-img-map-z: 10;
  --map-img-shadow-z: 11;
  --map-img-grid-z: 12;
  --map-img-road-z: 20;
  --map-img-water-z: 21;
  --map-img-waterS-z: 22;
  --map-img-lave-z: 23;
  --map-img-cliff-z: 24;
  --map-img-landmark-z: 25;
  --map-img-saferock-z: 26;
  --map-name-road-z: 30;
  --map-foods-z: 31;
  --map-name-water-z: 32;
  --map-name-land-z: 33;
  --map-photo-z: 41;
  --map-marker-z: 51;

  --map-grid-axis-z: 79;
  --map-gridW-z: 78;
  --map-gridH-z: 77;

  --map-addNewPin-z: 80; /* 画像ピン新規ドロップ */
  --map-coords-z: 81; /* 座標フロート */

  --rdm-z: 999;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━ HEADER ━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --min-w: 980px;
  --header-h: 24px;
  --header-title-h: 24px;
  --header-content-h: 62px;
  --header-menu-thumb-w: 62px;
  --header-menu-title-w: 56px;
  --header-menu-input-min-w: 130px;
  --header-menu-input-max-w: 320px;
  --ads-w: 350px;
}

#header {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--header-z);
  width: 100%;
  height: var(--header-h);
  overflow: hidden;
  font: normal 11px/14px Meiryo, sans-serif;
  border-bottom: solid 2px #000;
  background: #fff;
}
#header > hr {
  margin: 0;
  display: none;
}

h1 {
  display: inline-block;
  margin: 0;
  padding: 2px 0 0 0;
  font: bold 20px/24px Meiryo, sans-serif;
}
h2 {
  display: inline-block;
  margin: 0;
  padding: 0;
  font: bold 14px/16px Meiryo, sans-serif;
}

#title {
  height: 24px;
  background: #241;
  overflow: hidden;
}
#title,
#title * {
  color: #eee;
}

#lastup {
  text-decoration: underline !important;
}

/* ----- HEADER CONTENT ----- */
#header > table {
  width: 100vw;
  margin: 1px;
}
#header > table td {
  padding: 0;
  border: none;
}
#header > table th {
  border: none;
}

#map_thumb {
  position: relative;
  width: var(--header-menu-thumb-w);
  min-width: var(--header-menu-thumb-w);
  max-width: var(--header-menu-thumb-w);
  height: var(--header-menu-thumb-w);
  display: none;
}
#map_thumb > #map_show_area {
  position: absolute;
  border: solid 1px #ff0;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
}
#map_thumb > img {
  max-width: 100%;
  max-height: 100%;
}

.map_menu_title {
  width: var(--header-menu-title-w);
  min-width: var(--header-menu-title-w);
  max-width: var(--header-menu-title-w);
  padding: 3px;
  background: transparent;
  text-align: right;
}
.map_menu_content {
  min-width: var(--header-menu-input-min-w);
  max-width: var(--header-menu-input-max-w);
  height: auto;
}

#map_menu {
  min-height: calc(var(--map-content-h) / 3);
}
#map_loc {
}

@keyframes colorChange {
  0% {
    color: #ff0000;
  }
  25% {
    color: #00ff00;
  }
  50% {
    color: #0000ff;
  }
  75% {
    color: #800080;
  }
  100% {
    color: #ff0000;
  }
}
#map_kook_link {
  cursor: pointer;
  font-weight: bold;
  color: #00c;
  text-decoration: underline;
  padding-right: 0;
  animation: colorChange 1s infinite steps(4, jump-start);
  transition: none;
}
#map_kook_link:hover {
  animation-play-state: paused;
  color: #000 !important;
  background-color: #fff !important;
}
#map_kook_link::after {
  content: none;
}
#map_kook_link::before {
  content: none;
}

#map_menu > input[type='text'],
#map_loc > input[type='text'] {
  width: 130px;
  height: 20px;
  word-wrap: nowrap;
}
#map_loc_opt {
  white-space: nowrap;
}
#map_list {
  display: none;
  position: fixed;
  top: 26px;
  left: 1px;
  z-index: var(--map-list-z);
  width: 270px;
  height: 200px;
  overflow-y: scroll;
  border: solid 3px #000;
  padding: 4px 4px 35px 4px;
  background: #fffc;
  cursor: normal;
  pointer-events: auto !important;
}
#map_list.open {
  display: block;
}
#map_list > input {
  display: inline-block;
  opacity: 0;
  position: relative;
  margin: 0;
}

#map_list > label {
  display: inline-block;
  position: relative;
  margin: -14px 0 -1px 0;
  width: 100%;
  border-width: 2px;
  padding: 2px 4px;
  font-weight: bold;
  line-height: 15px;
  overflow: hidden;
}
#map_list > label.old {
  border-color: #c88;
}

#map_list > input:not(:checked) + label:not(:hover):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: #fff6 !important;
  width: 100%;
  height: 40px;
}
#map_list > label > div {
  margin: 0 -2px -2px 0;
  display: block;
  font-size: 10px;
  line-height: 11px;
  transform: scale(0.9);
  transform-origin: right;
  text-align: right;
}
#map_list > label > div:nth-child(2n-1) {
  text-align: left;
}
#map_list > label > div:nth-child(2n) {
  text-align: right;
}

/* hover */
#map_list > input:focus + label,
#map_list > label:hover {
  padding: 1px 3px;
  border-width: 3px;
}
#map_list > label:hover,
#map_list > label:hover > div {
  color: #fff;
  text-shadow: #00c -1px -1px 1px, #00c -1px 0px 1px, #00c -1px 1px 1px, #00c 0px -1px 1px, #00c 0px 0px 1px, #00c 0px 1px 1px, #00c 1px -1px 1px,
    #00c 1px 0px 1px, #00c 1px 1px 1px;
}

/* selected */
#map_list > input:checked + label {
  padding: 1px 3px !important;
  border-width: 3px !important;
  border-color: #fc4 !important;
}
#map_list > input:checked + label,
#map_list > input:checked + label > div,
#map_list > input:checked:focus + label,
#map_list > input:checked:focus + label > div {
  color: #fff;
  text-shadow: #e60 -1px -1px 1px, #e60 -1px 0px 1px, #e60 -1px 1px 1px, #e60 0px -1px 1px, #e60 0px 0px 1px, #e60 0px 1px 1px, #e60 1px -1px 1px,
    #e60 1px 0px 1px, #e60 1px 1px 1px;
}

/* ads */
#ads {
  width: calc(var(--ads-w) + 2px);
  padding-left: 2px !important;
}
#ads_ul {
  border: solid 0 #000;
  list-style: none;
}
#ads_ul > li {
  position: relative;
  display: none;
  width: var(--ads-w);
  height: var(--header-content-h);
  margin: 0;
}
#ads_ul > li::before {
  position: absolute;
  top: -1px;
  right: 5px;
  content: attr(number);
}

#ads_ul > li::after {
  position: absolute;
  top: -2px;
  content: '';
  width: var(--ads-w);
  height: 2px;
  background: linear-gradient(to right, rgb(0, 102, 255) 0%, rgb(0, 204, 102) 100%, rgb(0, 0, 0) 100%);
}

#ads_ul[transion='false'] {
  border: none !important;
  animation: none !important;
}
#ads_ul[transion='false'] > li::before {
  display: none !important;
}

#ads_ul.c1 li:nth-child(1),
#ads_ul.c2 li:nth-child(2),
#ads_ul.c3 li:nth-child(3),
#ads_ul.c4 li:nth-child(4),
#ads_ul.c5 li:nth-child(5) {
  display: block;
  animation: ads_content var(--sec) linear 0s 1 both;
}
@keyframes ads_content {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  97% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#ads_ul.c1 li:nth-child(1)::after,
#ads_ul.c2 li:nth-child(2)::after,
#ads_ul.c3 li:nth-child(3)::after,
#ads_ul.c4 li:nth-child(4)::after,
#ads_ul.c5 li:nth-child(5)::after {
  animation: ads_after_bar var(--sec) linear 0s 1;
}
@keyframes ads_after_bar {
  0% {
    width: var(--ads-w);
  }
  100% {
    width: 0;
  }
}

#ads ul.relocated {
  position: fixed;
  z-index: var(--ads-z);
  top: calc(var(--header-h) + 10px);
  left: calc(100vw - var(--ads-w) - 20px);
}
#ads ul.relocated li {
  width: calc(var(--ads-w) + 10px);
  padding: 3px 5px;
  background: #ffffffef;
  box-shadow: 0 0 3px 2px #000;
}
#ads ul.relocated li::after {
  position: relative;
  top: 8px;
  content: '* Click here again to move back this notice to origin position.';
  margin: 2px -2px;
  padding: 2px;
  background: #ffcd;
  box-shadow: 0 0 2px 1px #000;
}

#devbtn {
  position: fixed;
  top: 0;
  right: 0;
  width: 3px;
  height: 3px;
}
#devbtn:hover {
  background: #fff;
}

#devlog {
  background: #fff;
  padding: 2px 3px;
}
#header #devlog {
  position: fixed;
  bottom: 1px;
  right: 0;
  width: 500px;
  height: calc(100vh - var(--header-title-h));
  background: #fffe;
  border: solid 2px #0009;
  padding: 2px 3px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━ LEFT ━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --side-closed-w: 22px;
  --side-d: 150px;
  --side-w: 200px;
  --side-title-h: 27px;
  --side-title-bgc: linear-gradient(#fff, #ddd);
  --side-menu-bgi: linear-gradient(#eee, #ccc);
  --side-menu-bgi-h: linear-gradient(#dff, #6cf);
  --side-menu-bgi-c: linear-gradient(#fe4, #ffe);
  --side-menu-cls-bgi: linear-gradient(#fee, #fcc);
  --side-menu-cls-bgi-c: linear-gradient(#ddd, #888);
  --side-menu-hover-w: 150px;
}

#side {
  position: fixed;
  top: var(--header-h);
  left: 0;
  z-index: var(--side-z);
  display: inline-block;
  width: var(--side-closed-w);
  height: calc(100vh - var(--header-h));
  border-right: solid 2px #000;
  background: #666;
  display: none !important;
}
#side.alldisp {
  width: calc(var(--side-closed-w) + var(--side-d));
}
#side.open {
  width: calc(var(--side-closed-w) + var(--side-w));
}

.noUserID {
  color: #d00;
}

/* ---------- SIDEBAR - MENU ---------- */

#side > #side_menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  display: inline-block !important;
  width: var(--side-closed-w);
  height: calc(100vh - var(--header-h));
}
#side_menu > input {
  display: none;
}
#side_menu > label {
  display: inline-block;
  position: relative;
  left: calc(-1 * var(--side-menu-hover-w));
  margin: 0 -3px 1px -3px;
  padding: 3px;
  width: calc(var(--side-closed-w) + var(--side-menu-hover-w));

  border-radius: 0 4px 4px 0;
  background: var(--side-menu-bgi);
  text-align: right;
}
#side_menu > label::before {
  content: attr(text);
  display: inline-block;
  width: calc(var(--side-menu-hover-w) - 10px);
  font-weight: bold;
  white-space: nowrap;
}
#side_menu > label::after {
  content: attr(icon);
  display: inline-block;
  width: var(--side-closed-w);
}

body.win #side_menu > input:hover + label {
  background: var(--side-menu-bgi-h);
  animation: sidemenu_anime 0.2s ease-out 0.1s 1 normal both;
}

#side_menu > input:checked + label {
  left: calc(-1 * var(--side-menu-hover-w)) !important;
  margin-left: 0;
  border-radius: 0;
  background: var(--side-menu-bgi-c);
}

#side_menu > #sidemenu_cls + label {
  background: var(--side-menu-cls-bgi);
  color: #e00;
}
#side_menu > #sidemenu_cls:checked + label {
  background: var(--side-menu-cls-bgi-c);
}
#side_menu > #sidemenu_cls:checked + label::after {
  content: '❎';
}

#side.alldisp > #side_menu > label {
  left: 0 !important;
}

@keyframes sidemenu_anime {
  0% {
    left: calc(-1 * var(--side-menu-hover-w));
  }
  100% {
    left: 0;
  }
}

/* ---------- SIDEBAR - TITLE ---------- */
#side h2#side_title {
  display: none;
  position: relative;
  left: var(--side-closed-w);
  width: calc(var(--side-w) - 2px);
  height: var(--side-title-h);
  border-bottom: solid 1px #888;
  background: var(--side-title-bgc);
  padding: 0;
  font-size: 15px;
  line-height: var(--side-title-h);
  text-align: center;
}
#side h3 {
  margin: 6px 0 3px 0;
  border-top: solid 2px #000;
  padding: 5px 4px 4px 4px;
  background: var(--h3-background-light);
  color: var(--h3-textcolor-light);
}
#side_title a {
  position: absolute;
}
#side_title a.prev {
  left: 0;
}
#side_title a.next {
  right: 0;
}

#side > div:not(#side_menu) {
  display: none;
  position: relative;
  left: var(--side-closed-w);
  width: calc(var(--side-w) - 2px);
  height: calc(100vh - var(--header-h) - var(--side-title-h));
  padding: 3px 1px 100px 1px;
  background: #fff;
  scrollbar-width: thin;
  overflow-x: hidden;
  overflow-y: auto;
}
#side.open > #side_title,
#side.open.cls > #side_cls,
#side.open.cfg > #side_cfg,
#side.open.loc > #side_loc,
#side.open.loh > #side_loh,
#side.open.shr > #side_shr,
#side.open.pnl > #side_pnl,
#side.open.clf > #side_clf,
#side.open.pin > #side_usr,
#side.open.rci > #side_usr,
#side.open.upi > #side_upi,
#side.open.myd > #side_usr,
#side.open.rdm > #side_rdm,
#side.open.upd > #side_upd,
#side.open.beta > #side_beta,
#side.open.dev > #side_dev {
  display: block !important;
}

/* ---------- GROUP ---------- */
#group_list > table {
  margin: 0;
}
#group_list > table th,
#group_list > table td {
  padding: 2px;
  border-color: #999;
}
#group_list > table tr > td:nth-child(1) {
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#group_list > table tr > td:nth-child(2) > * {
  margin: 0;
  padding: 0;
  font-size: 10px;
}
#group_list > table tr > td:nth-child(3) {
  font-size: 8px;
}

/* ---------- CONFIG ---------- */
#cfg_zoom_area {
  position: relative;
  font-size: 9px;
  height: 35px;
}
body.firefox #cfg_zoom_area {
  margin-bottom: -7px;
}
body.chrome #cfg_zoom_area {
  margin-bottom: -3px;
}
body.edge #cfg_zoom_area {
  margin-bottom: -10px;
}
body.opera #cfg_zoom_area {
  margin-bottom: -8px;
}

body.firefox #cfg_zoom {
  width: 175px;
  margin: -2px 0 -5px 2px;
}
body.chrome #cfg_zoom {
  width: 180px;
  margin: 0 0 -2px 0;
}
body.edge #cfg_zoom {
  width: 173px;
  margin: -2px 0 -5px 3px;
}
body.opera #cfg_zoom {
  width: 175px;
  margin: 0 0 0px 3px;
}

span[id^='cfg_zoom_'] {
  display: inline-block;
  width: 13px;
  text-align: center;
}
span#cfg_zoom_05 {
  margin-left: 2px;
}

span[id^='cfg_zoom_'] {
  width: 23px;
}
span#cfg_zoom_05 {
  margin-left: -3px;
}
span#cfg_zoom_x {
  display: block;
  width: 180px;
  margin: -4px 0;
  color: #39f;
}

.subLayer {
  position: relative;
  margin: -2px 0 0 4px;
  border-left: double 3px #666;
  padding: 1px 0 0 4px;
  opacity: 0.3;
}
input:checked + .subLayer,
input:checked + label + .subLayer {
  opacity: 1;
}

.cfg_fil_value {
  display: inline-block;
  width: 30px;
  text-align: right;
}
.cfg_fil_bar {
  width: 150px;
}

/* ---------- Photos ---------- */
.profile_stat {
  margin: -2px;
  padding: 2px 6px;
  background: #030;
  color: #7d7;
}
.profile_stat * {
  color: #7d7;
}

#side_usr a {
  color: #06c;
}
#side_usr li {
  list-style: none;
  padding: 4px 2px;
  margin: 0;
  border-bottom: solid 1px #484;
  font-size: 12px;
  line-height: 15px;
}
#side_usr hr {
  border-top: dashed 1px #484;
}
#side_usr input[type='radio'] {
  display: none;
}

#side_usr > div {
  padding: 5px;
}
#side_usr .time {
  font-size: 11px;
  line-height: 11px;
}
#side_usr a {
  padding: 3px;
}
#side_usr img {
  max-width: 180px;
  max-height: 120px;
  margin-bottom: -4px;
}
#side_usr .comment {
  font-size: 12px;
  line-height: 14px;
}
#side_usr li.ex {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--photo-ex-z);
  width: 100vw;
  height: 100vh;
  background: rgba(0, 20, 0, 0.9);
  padding: 7px 12px;
  color: #fff;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
}
#side_usr li.ex .time {
  font-size: 12px;
  line-height: 18px;
}
#side_usr li.ex .time br {
  display: none;
}
#side_usr li.ex .time b {
  display: inline-block;
  margin-left: 15px;
}
#side_usr li.ex .exlink {
  background: transparent !important;
  padding: 0;
}
#side_usr li.ex .exlink img {
  width: auto;
  max-width: 100%;
  max-height: 65vh;
  border: solid 1px #fff;
  margin: 5px 0;
}
#side_usr li.ex #photo_ex {
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
}
#side_usr li.ex #photo_ex a:nth-child(1) {
  color: #f33;
}
#side_usr li.ex #photo_ex a:nth-child(2) {
  color: #4f4;
}
#side_usr li.ex #photo_ex a:nth-child(4) {
  color: #4ff;
}
#side_usr li.ex .comment {
  text-align: left;
  font-size: 13px;
  line-height: 16px;
}
#side_usr li.ex textarea {
  width: 100%;
  height: 100px;
}

#side_usr li.warn {
  background: #fba;
}
#side_usr li.warn img {
  max-width: 32px;
  float: left;
}
#side_usr li.warn strong {
  color: #f00;
}

#side_usr li.postAdmin {
  background: #fba;
}
#side_usr li.postAdmin.ex {
  background: rgba(40, 0, 0, 0.9);
}

/* ---------- UPDATE NOTE ---------- */
#side_upd dd {
  border: solid 0px #000;
  border-width: 0 0 1px 0;
  padding: 4px 3px 6px 3px;
}
#side_upd dd:first-line {
  font-size: 12px;
  line-height: 20px;
  font-style: italic;
  text-decoration: underline;
}

/* ---------- PHOTO UPLOADER ---------- */
.noUserID + #pForm {
  display: none;
}
.noUserID.hide + #pForm {
  display: block;
}

#pForm strong {
  color: #e40;
  text-decoration: underline;
  letter-spacing: 1px;
}
#pForm #pForm_pinM {
  width: 90px;
}
#pForm .filePreview {
  width: 210px;
  min-height: 100px;
  text-align: center;
}
#pForm .filePreview div {
  font-size: 10px !important;
  line-height: 12px;
  text-align: left;
}
#pForm .filePreview img {
  margin: 2px !important;
}
#pForm #pForm_text:before {
  content: attr(prefix);
  display: block;
  font-weight: bold;
}
#pForm textarea {
  width: 185px;
  height: 100px;
}
#pForm #pForm_warn + label {
  color: #900;
}
#pForm #pForm_warn:checked + label {
  color: #f00;
}
#pForm #pForm_conf_subm * {
  vertical-align: middle;
}

#pForm.check .chkHide,
#pForm.check .fileDrop::before,
#pForm.check input.file {
  display: none !important;
}
#pForm.check input[type='text'] {
  opacity: 1 !important;
  height: auto;
  border: none !important;
  background: transparent !important;
}
#pForm.check .fileDrop {
  background: transparent !important;
  padding-top: 5px !important;
}
#pForm.check .fileDrop * {
  height: auto;
}
#pForm.check #pForm_text {
  white-space: pre-line;
}
#pForm.check #pForm_text:before {
  content: '';
}

.fileDrop {
  position: relative;
  background: #fff !important;
  padding-top: 16px !important;
}
body.drag .fileDrop {
  background: #ffe6e6 !important;
}
body.drag .fileDrop.dragover {
  background: #fff0bf !important;
}
.fileDrop::before {
  content: attr(txtNormal);
  position: absolute;
  top: 2px;
  left: 3px;
  text-decoration: underline;
  font-size: 10px;
  line-height: 12px;
  color: #080;
}
body.drag .fileDrop::before {
  content: attr(txtDrag);
  color: #e00;
}
body.drag .fileDrop.dragover::before {
  content: attr(txtOver);
  color: #e00;
  font-weight: bold;
}
.fileDrop input[type='file'] {
  width: 70px !important;
  border: none !important;
  background: transparent !important;
}

/* PIN DROP POINTER */
#pFormPin {
  display: none;
  position: absolute;
  top: calc(50vh + 44px);
  left: calc(50vw - 132px);
  filter: hue-rotate(-140deg);
}
#pFormPin.set {
  display: inline-block;
}

/* PIN DROP POINTER (DROPED ) */
#map > [id^='map_'] > [id$='pFormPinConf'] {
  position: absolute;
  display: none;
  width: 32px;
  margin: -30px 0 0 -16px;
  filter: hue-rotate(-80deg);
}
#map > [id^='map_'] > [id$='pFormPinConf'].set {
  display: inline-block;
  z-index: var(--map-addNewPin-z);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━ CENTER ━━━━━━━━━━━━━━━━━━━━━━━━━ */
#map {
  position: fixed;
  top: var(--header-h);
  z-index: var(--map-z);
  height: calc(100vh - var(--header-h));
  display: inline-block;
  border: none;
  background: #666;
  overflow: scroll;
  scrollbar-width: thin;
  user-select: none;
  left: 0 !important;
}
#map.move {
  cursor: grabbing;
}

#map.getPos * {
  pointer-events: none;
}
#map.getPos > div > img[id$='map'] {
  pointer-events: auto !important;
  cursor: crosshair;
}

[id^='map_'] > div {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[id^='map_'] > div * {
  pointer-events: auto;
}
[id^='map_'] > [id$='photo'] > span {
  pointer-events: auto !important;
  cursor: pointer;
}
[id^='map_'] > [id$='marker'] > [id$='marker_0'] {
  pointer-events: auto !important;
  cursor: pointer;
}

/* #side:not(.open) + #map {
  left: var(--side-closed-w);
  width: calc(100vw - var(--side-closed-w));
}
#side.alldisp + #map {
  left: calc(var(--side-closed-w) + var(--side-d));
  width: calc(100vw - var(--side-closed-w) - var(--side-d));
}
#side.open + #map {
  left: calc(var(--side-closed-w) + var(--side-w));
  width: calc(100vw - var(--side-closed-w) - var(--side-w));
} */

#map {
  width: 100%;
}
/* ----- MAP ----- */
#map > * {
  position: absolute;
  display: none;
  transform-origin: left top;
}
#map > *.show {
  display: block;
  top: 0;
  left: 0;
}
#map > div {
  z-index: var(--map-div-z);
}
#map > svg {
  background: #fff;
  z-index: var(--map-svg-z);
}

/* 座標系 */
#map [id^='grid_scale_'] {
  display: block;
  position: -webkit-sticky;
  position: sticky;
}
#map [id^='grid_scale_'] > * {
  position: absolute;
  width: 28px;
  text-align: center;
  border-radius: 5px;
  padding: 1px 3px;
  font-size: 9px;
  line-height: 9px;
}
#map [id^='grid_scale_'] > *.grid_lat {
  color: #ffe;
  background: #e00;
  border-color: #000;
  text-shadow: none;
  opacity: 0.9;
}
#map [id^='grid_scale_'] > *.grid_long {
  color: #dff;
  background: #00e;
  border-color: #000;
  text-shadow: none;
  opacity: 0.9;
}

#map > #grid_scale_axis {
  top: 0;
  left: 0;
  z-index: var(--map-grid-axis-z);
  border-radius: 0 0 5px 0;
  width: 50px;
  height: 50px;
  margin: 0 -50px -50px 0;
  display: none;
}
#map > #grid_scale_W {
  top: 0;
  width: 100%;
  z-index: var(--map-gridW-z);
  height: 15px;
  margin-bottom: -15px !important;
}
#map > #grid_scale_H {
  left: 0;
  width: 15px;
  z-index: var(--map-gridH-z);
  height: 100%;
}

#grid_scale_axis.false,
#grid_scale_W.false,
#grid_scale_H.false {
  opacity: 0;
}

#grid_scale_axis > * {
  font: normal 11px/11px Meiryo, Arial;
  opacity: 1;
}
#grid_scale_axis > #N_UP {
  top: 0px;
  left: -1px;
  width: 36px;
  height: 32px;
  background: #000;
  border-radius: 0;
  font-size: 10px !important;
  line-height: 10px !important;
  color: #fff;
}

#grid_scale_axis > #N_UP::first-line {
  color: #e44;
  font-weight: bold;
  font-size: 13px;
}
#grid_scale_axis > *:nth-child(2) {
  top: 0px;
  left: 3px;
  width: 32px;
  height: 12px;
  border-radius: 0 0 0 5px;
  transform: rotate(-90deg);
  transform-origin: right top;
}
#grid_scale_axis > *:nth-child(3) {
  top: 32px;
  left: 0px;
  width: 35px;
  height: 12px;
  border-radius: 0 0 5px 0;
}
#grid_scale_W > * {
  margin: 0 0 0 -12px;
}
#grid_scale_H > * {
  margin: 26px 0 0 0;
  transform: rotate(-90deg);
  transform-origin: 0% 0%;
}

/* ----- MAP LAYER ----- */
#map > [id^='map_'] {
  overflow: hidden;
}

#map > [id^='map_'] > * {
  position: absolute;
  top: 0;
  left: 0;
  font: normal 11px/12px Meiryo, sans-serif;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
  margin: auto;
}

[id^='map_'] > div {
  width: 100%;
  height: 100%;
}

[id^='map_'] > img[id$='map'] {
  z-index: var(--map-img-map-z);
}
[id^='map_'] > img[id$='shadow'] {
  z-index: var(--map-img-shadow-z);
}
[id^='map_'] > img[id$='grid'] {
  z-index: var(--map-img-grid-z);
}
[id^='map_'] > img[id$='road'] {
  z-index: var(--map-img-road-z);
}
[id^='map_'] > img[id$='water'] {
  z-index: var(--map-img-water-z);
}
[id^='map_'] > img[id$='water_scent'] {
  z-index: var(--map-img-waterS-z);
}
[id^='map_'] > img[id$='lava'] {
  z-index: var(--map-img-lava-z);
}
[id^='map_'] > img[id$='cliff'] {
  z-index: var(--map-img-cliff-z);
}
[id^='map_'] > img[id$='landmark'] {
  z-index: var(--map-img-landmark-z);
}
[id^='map_'] > img[id$='saferock'] {
  z-index: var(--map-img-saferock-z);
}
[id^='map_'] > div[id$='road_name'] {
  z-index: var(--map-name-road-z);
}
[id^='map_'] > div[id$='water_name'] {
  z-index: var(--map-name-water-z);
}
[id^='map_'] > div[id$='land_name'] {
  z-index: var(--map-name-land-z);
}
[id^='map_'] > div[id$='foods'] {
  z-index: var(--map-foods-z);
}
[id^='map_'] > div[id$='photo'] {
  z-index: var(--map-photo-z);
}
[id^='map_'] > div[id$='marker'] {
  z-index: var(--map-coords-z);
}

[id^='map_'].svg > *[id$='marker'],
[id^='map_'].svg > *[id$='photo'],
[id^='map_'].svg ~ svg {
  display: block;
}

[id^='map_'] > *[id$='water'].false ~ [id$='water_name'],
[id^='map_'] > *[id$='landmark'].false ~ [id$='land_name'],
[id^='map_'] > *[id$='road'].false ~ [id$='road_name'],
[id^='map_'] > *[id$='foods'].false ~ [id$='foods'],
[id^='map_'].svg > *,
[id^='map_'] > *.false {
  display: none;
}

[id^='map_'] > *.nam_false:not(.QA) > span > span.nam,
[id^='map_'] > *.pos_false:not(.QA) > span > span.pos,
[id^='map_'] > *.nam_false + *.QA > span > span.nam,
[id^='map_'] > *.pos_false + *.QA > span > span.pos {
  visibility: hidden;
}

[id^='map_'] > [id$='marker'] {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: -7px 0 0-7px !important;
}
[id^='map_'] > [id$='marker'] > [id$='line_sun'],
[id^='map_'] > [id$='marker'] > [id$='line_moon'],
[id^='map_'] > [id$='marker'] > [id$='line_star'] {
  display: block !important;
}

/* ----- SCALE ----- */
.zoom_050 {
  transform: scale(0.25);
}
.zoom_075 {
  transform: scale(0.5625);
}
.zoom_100 {
  transform: scale(1);
}
.zoom_125 {
  transform: scale(1.5625);
}
.zoom_150 {
  transform: scale(2.25);
}
.zoom_175 {
  transform: scale(3.0625);
}
.zoom_200 {
  transform: scale(4);
}

.zoom_225 {
  transform: scale(5.0625);
}
.zoom_250 {
  transform: scale(6.25);
}
.zoom_275 {
  transform: scale(7.5625);
}
.zoom_300 {
  transform: scale(9);
}

/* ----- TEXT SIZE ADJUST ----- */
[id^='map_'] > div span {
  display: block;
  letter-spacing: 0.5px;
}
[id^='map_'] > div > span {
  position: absolute;
  min-width: 100px;
  min-height: 24px;
}

.zoom_050 [id$='_name'] span {
  font-size: 16px;
  line-height: 18px;
}
.zoom_075 [id$='_name'] span {
  font-size: 16px;
  line-height: 18px;
}
.zoom_100 [id$='_name'] span {
  font-size: 11px;
  line-height: 12px;
}
.zoom_125 [id$='_name'] span {
  font-size: 10px;
  line-height: 10px;
  scale: 0.9;
  font-weight: bold;
}
.zoom_150 [id$='_name'] span {
  font-size: 10px;
  line-height: 10px;
  scale: 0.8;
  font-weight: bold;
}
.zoom_175 [id$='_name'] span {
  font-size: 10px;
  line-height: 10px;
  scale: 0.7;
  font-weight: bold;
}
.zoom_200 [id$='_name'] span {
  font-size: 10px;
  line-height: 10px;
  scale: 0.6;
  font-weight: bold;
}

[id^='map_'].zoom_050 > [id$='_name'] > span.not050,
[id^='map_'].zoom_075 > [id$='_name'] > span.not075,
[id^='map_'].zoom_100 > [id$='_name'] > span.not100,
[id^='map_'].zoom_125 > [id$='_name'] > span.not125,
[id^='map_'].zoom_150 > [id$='_name'] > span.not150,
[id^='map_'].zoom_175 > [id$='_name'] > span.not175,
[id^='map_'].zoom_200 > [id$='_name'] > span.not200,
[id^='map_'] > [id$='_name'] > span.onlyZoom {
  display: none;
}

[id^='map_'].zoom_200 > [id$='_name'] > span.onlyMaxZoom {
  display: block;
}
[id^='map_'] > [id$='_name'] > span[class^='only'] > span.nam {
  font-weight: normal !important;
  scale: 0.5px;
}

div[id^='map_'] div span.nam,
div[id^='map_'] div span.pos {
  text-shadow: black -1px -1px 1px, black -1px 0px 1px, black -1px 1px 1px, black 0px -1px 1px, black 0px 0px 1px, black 0px 1px 1px, black 1px -1px 1px,
    black 1px 0px 1px, black 1px 1px 1px;
}
div[id^='map_'].zoom_100 div span.nam,
div[id^='map_'].zoom_100 div span.pos {
  text-shadow: black -1px -1px 2px, black -1px 0px 2px, black -1px 1px 2px, black 0px -1px 2px, black 0px 0px 2px, black 0px 1px 2px, black 1px -1px 2px,
    black 1px 0px 2px, black 1px 1px 2px;
}
div[id^='map_'].zoom_075 div span.nam,
div[id^='map_'].zoom_075 div span.pos {
  letter-spacing: 1px;
  text-shadow: black -2px -2px 4px, black -2px 0px 4px, black -2px 2px 4px, black 0px -2px 4px, black 0px 0px 4px, black 0px 2px 4px, black 2px -2px 4px,
    black 2px 0px 4px, black 2px 2px 4px;
}
div[id^='map_'].zoom_050 div span.nam,
div[id^='map_'].zoom_050 div span.pos {
  letter-spacing: 1px;
  text-shadow: black -4px -4px 7px, black -4px 0px 7px, black -4px 4px 7px, black 0px -4px 7px, black 0px 0px 7px, black 0px 4px 7px, black 4px -4px 7px,
    black 4px 0px 7px, black 4px 4px 7px;
}

div[id^='map_'].zoom_075 [id$='photo'] * {
  transform: scale(1.15);
}
div[id^='map_'].zoom_050 [id$='photo'] * {
  transform: scale(1.3);
}

/* ----- TEXT COLOR OVERRIDE ----- */
div.color_usage {
  display: block;
  position: absolute;
  right: 0;
  top: -18px;
  background: #333;
  line-height: 11px;
  padding: 2px;
  float: right;
  border-radius: 4px 0 0 4px;
}

[id^='map_'] > [id$='_name'] > span.big > span.nam {
  font-weight: bold;
  scale: 1.5;
  height: 1.3em;
  line-height: 1.1em;
}
[id^='map_'] > [id$='_name'] > span > span.nam > b {
  font-weight: bold;
  scale: 1.5;
  height: 1.5em;
  line-height: 1.3em;
  display: inline-block;
}

[id^='map_'] > [id$='land_name'] > span,
div.color_usage > span.landmark {
  color: #fe0;
}
[id^='map_'] > [id$='land_name'] > span.mud,
div.color_usage > span.mud {
  color: #fb5;
}
div.color_usage > span.mud > b {
  display: inline-block;
  margin: 1px 2px 0 2px;
  width: 7px;
  height: 7px;
  border: solid 2px #fe0;
  background: #8a3500;
}
[id^='map_'] > [id$='land_name'] > span.mt,
div.color_usage > span.mt {
  color: #f88;
}

/* 人类建筑 */
[id^='map_'] > [id$='land_name'] > span.building,
div.color_usage > span.building {
  color: #f88;
}
/* 咸水水域 */
[id^='map_'] > [id$='land_name'] > span.ocean,
div.color_usage > span.ocean {
  color: #9bf;
}
/* 淡水水域 */
[id^='map_'] > [id$='land_name'] > span.river,
div.color_usage > span.river {
  color: #0cf;
}

[id^='map_'] > [id$='land_name'] > span.tp,
div.color_usage > span.tp,
[id^='map_'] > [id$='land_name'] > span > span > u {
  color: #faf;
}

[id^='map_'] > [id$='water_name'] > span,
div.color_usage > span.water {
  color: #00f0f0;
}
[id^='map_'] > [id$='water_name'] > span.river,
div.color_usage > span.river {
  color: #0cf;
}
[id^='map_'] > [id$='road_name'] > span,
div.color_usage > span.road {
  color: #9dff00;
}
[id^='map_'] > [id$='road_name'] > span.trail,
div.color_usage > span.trail {
  color: #52f646;
}
[id^='map_'] > [id$='road_name'] > span.ditch,
div.color_usage > span.ditch {
  color: #52d59e;
}
[id^='map_'] > [id$='road_name'] > span.cave,
div.color_usage > span.cave {
  color: #f9ecc6;
}

[id^='map_'] > [id$='water_name'] > span span.c1 {
  color: #0aa;
}
[id^='map_'] > [id$='water_name'] > span span.c2 {
  color: #09f;
}
[id^='map_'] > [id$='land_name'] > span span.c1 {
  color: #aa0;
}
[id^='map_'] > [id$='land_name'] > span span.c2 {
  color: #fa2;
}

/* ----- FOODS ----- */
#foods_list label {
  position: relative;
  margin-right: 3px;
}
#foods_list label::after {
  float: left;
  font-size: 12px !important;
  line-height: 14px !important;
}

div[id$='foods']::after {
  content: '';
  display: none;
}
div[id$='foods'] > span::after {
  position: relative;
  top: -50%;
  display: inline-block;
  margin-top: -15px;
  height: 24px;
  font-size: 18px;
  line-height: 26px;
  overflow: hidden;
}

div[id$='foods'] > span.L1::after {
  padding-right: 25px;
}
div[id$='foods'] > span.L2::after {
  padding-right: 50px;
}
div[id$='foods'] > span.R1::after {
  padding-left: 25px;
}
div[id$='foods'] > span.R2::after {
  padding-left: 50px;
}

div[id$='foods'] > span {
  display: none;
  z-index: 1;
  min-width: 24px;
  min-height: 24px;
}
div[id$='foods'] > span > span {
  width: 100%;
  height: 100%;
  border: dashed 1px #fff;
}
div[id$='foods'] > span:not(.square) > span {
  border-radius: 50%;
}
div[id$='foods'] > span.dev > span {
  display: none !important;
}

div[id$='foods'].Boar > .Boar,
div[id$='foods'].Chicken > .Chicken,
div[id$='foods'].Deer > .Deer,
div[id$='foods'].Frog > .Frog,
div[id$='foods'].Goat > .Goat,
div[id$='foods'].Rabbit > .Rabbit,
div[id$='foods'].Coastal > .Coastal,
div[id$='foods'].Tenonto > .Tenonto,
div[id$='foods'].Agave > .Agave,
div[id$='foods'].Coconut > .Coconut,
div[id$='foods'].Mango > .Mango,
div[id$='foods'].Marygold > .Marygold,
div[id$='foods'].Melon > .Melon,
div[id$='foods'].Mt_Ash > .Mt_Ash,
div[id$='foods'].Mushroom > .Mushroom,
div[id$='foods'].Orange > .Orange,
div[id$='foods'].Potato > .Potato,
div[id$='foods'].Pumpkin > .Pumpkin,
div[id$='foods'].Radish > .Radish,
div[id$='foods'].Sumac > .Sumac,
div[id$='foods'].Sunchoke > .Sunchoke,
div[id$='foods'].Salt > .Salt,
div[id$='foods'].Sanctuary > .Sanctuary,
div[id$='foods'].Migration > .Migration,
div[id$='foods'].Swamps > .Swamps,
div[id$='foods'].Highlands > .Highlands {
  display: block;
  z-index: 1;
}

div[id$='foods'].Salt > .Salt {
  width: 32px !important;
  height: 32px !important;
  z-index: 2;
}

div[id$='foods'].Chicken > .Chicken > span {
  border: dashed 3px #fff;
  background: #fff4;
}
div[id$='foods'].Rabbit > .Rabbit > span {
  border: dashed 3px #fff;
  background: #fff4;
}
div[id$='foods'].Boar > .Boar > span {
  border: dashed 3px #fe0;
  background: #9606;
}
div[id$='foods'].Deer > .Deer > span {
  border: dashed 3px #fff;
  background: #c204;
}
div[id$='foods'].Goat > .Goat > span {
  border: dashed 3px #fff;
  background: #00f4;
}
div[id$='foods'].Frog > .Frog > span {
  border: dashed 3px #0fa;
  background: #040b;
}
div[id$='foods'].Coastal > .Coastal > span {
  border: dashed 3px #0ff;
  background: #05b7;
}
div[id$='foods'].Tenonto > .Tenonto > span {
  border: dashed 3px #0f0;
  background: #0005;
}

div[id$='foods'].Agave > .Agave > span {
  border: dashed 3px #cf4;
  background: #bf73;
}
div[id$='foods'].Coconut > .Coconut > span {
  border: dashed 3px #521;
  background: #fed5;
}
div[id$='foods'].Mango > .Mango > span {
  border: dashed 3px #f30;
  background: #fc35;
}
div[id$='foods'].Marygold > .Marygold > span {
  border: dashed 3px #fe0;
  background: #ff53;
}
div[id$='foods'].Melon > .Melon > span {
  border: dashed 3px #efc;
  background: #8f64;
}
div[id$='foods'].Mt_Ash > .Mt_Ash > span {
  border: dashed 3px #c00;
  background: #e335;
}
div[id$='foods'].Mushroom > .Mushroom > span {
  border: dashed 3px #516;
  background: #e8f4;
}
div[id$='foods'].Orange > .Orange > span {
  border: dashed 3px #fdc;
  background: #fe95;
}
div[id$='foods'].Potato > .Potato > span {
  border: dashed 3px #620;
  background: #ffd4;
}
div[id$='foods'].Pumpkin > .Pumpkin > span {
  border: dashed 3px #fff;
  background: #0005;
}
div[id$='foods'].Radish > .Radish > span {
  border: dashed 3px #fff;
  background: #7f74;
}
div[id$='foods'].Sumac > .Sumac > span {
  border: dashed 3px #fff;
  background: #f554;
}
div[id$='foods'].Sunchoke > .Sunchoke > span {
  border: dashed 3px #fff;
  background: #fff4;
}

div[id$='foods'].Salt > .Salt > span {
  background: #fefefea8;
  border: solid 2px #000;
}

div[id$='foods'].Sanctuary > .Sanctuary > span {
  background: #004cff94;
  border: solid 2px #fff;
}
div[id$='foods'].Migration > .Migration > span {
  background: #0a56;
  border: dashed 5px #8f0;
}
div[id$='foods'].Swamps > .Swamps > span {
  background: #0d59;
}
div[id$='foods'].Highlands > .Highlands > span {
  background: #eb69;
}

.Chicken::after {
  content: '🐔';
}
.Rabbit::after {
  content: '🐰';
}
.Boar::after {
  content: '🐷';
  font-size: 16px !important;
}
.Deer::after {
  content: '🦌';
  font-size: 24px !important;
  line-height: 33px !important;
}
.Goat::after {
  content: '🐐';
  font-size: 24px !important;
  line-height: 33px !important;
}
.Frog::after {
  content: '🐸';
}
.Coastal::after {
  content: '🐢🦀';
}
.Tenonto::after {
  content: '🦖';
  font-size: 24px;
  filter: saturate(0%) brightness(80%) contrast(150%);
}

.Agave::after {
  content: '🌵';
}
.Coconut::after {
  content: '🥥';
}
.Mango::after {
  content: '🥭';
}
.Marygold::after {
  content: '🌻';
}
.Melon::after {
  content: '🍈';
}
.Mt_Ash::after {
  content: '🍒';
  filter: brightness(130%);
}
.Mushroom::after {
  content: '🍄';
  filter: contrast(120%);
}
.Orange::after {
  content: '🍊';
  filter: brightness(150%);
}
.Potato::after {
  content: '🥔';
}
.Pumpkin::after {
  content: '🎃';
}
.Sunchoke::after {
  content: '🌼';
}
.Sumac::after {
  content: '🌿';
  filter: hue-rotate(-110deg) saturate(90%);
}
.Radish::after {
  content: '🌱';
}

.Salt::after {
  color: #000;
  height: 28px !important;
  font-size: 20px !important;
  line-height: 28px !important;
  content: '盐';
}

.Migration::after {
  content: '↗️';
  filter: brightness(150%);
}
.Sanctuary::after {
  content: '幼龙';
  color: #fff;
  filter: brightness(150%);
}

/* ----- ROTATE ----- */
:root {
  --map-rotate: 0deg;
  --map-tilt: 0deg;
  --map-codeFloat-top: 40px;
  --map-codeFloat-left: 31px;
}

body.tilt > #map {
  transform: perspective(2000px) rotateX(var(--map-tilt)) rotate(var(--map-rotate, 0deg));
  transform-origin: center center;
}

[id^='map_'].nameKeepRot > div[id$='_name'] > span {
  transform: rotate(calc(var(--map-rotate) * -1)) !important;
  transform-origin: unset;
}

[id^='map_'].nameKeepRot > div[id$='photo'] > span i.pin {
  transform: rotate(calc(var(--map-rotate) * -1)) scale(0.5) !important;
}
[id^='map_'].nameKeepRot > div[id$='photo'] > span:hover i.pin,
[id^='map_'].nameKeepRot > div[id$='photo'] > span.pin_big i.pin {
  transform: rotate(calc(var(--map-rotate) * -1)) !important;
}

[id^='map_'].nameKeepRot *[code]:not([id$='marker_0'])::before {
  transform: rotate(calc(var(--map-rotate) * -1)) !important;
  top: var(--map-codeFloat-top) !important;
  left: var(--map-codeFloat-left) !important;
  transform-origin: unset;
}

/* ---------- CURRENT LOCATION ---------- */
[id^='map_'] > [id$='marker'].false {
  display: block;
}
[id^='map_'] > [id$='marker'].false * {
  display: none;
}
[id^='map_'] > [id$='marker'] * {
  color: #fff;
  position: absolute;
}

[id$='marker'] > [id*='marker'] {
  color: #fff;
  font: normal 12px/12px 'Meiryo', sans-serif;
  text-shadow: black -1px -1px 0px, black -1px 1px 0px, black 1px -1px 0px, black 1px 1px 0px;
}

[id$='marker'] > [id*='line'] {
  margin: -2px 0 0 2px;
  height: 1px;
  border-top: dashed 2px #fff;
  box-shadow: 0 0 2px 0 #000;
  background: #0003;
}

[id$='marker'] > [id$='marker_2'] {
  color: #f8f8f8;
}
[id$='marker'] > [id$='marker_3'] {
  color: #efefef;
}
[id$='marker'] > [id$='marker_4'] {
  color: #e8e8e8;
}
[id$='marker'] > [id$='marker_5'] {
  color: #dfdfdf;
}
[id$='marker'] > [id$='marker_6'] {
  color: #d8d8d8;
}
[id$='marker'] > [id$='marker_7'] {
  color: #cfcfcf;
}
[id$='marker'] > [id$='marker_8'] {
  color: #c8c8c8;
}
[id$='marker'] > [id$='marker_9'] {
  color: #bfbfbf;
}
[id$='marker'] > [id$='marker_10'] {
  color: #b8b8b8;
}
[id$='marker'] > [id$='line_2'] {
  border-color: #f8f8f8;
}
[id$='marker'] > [id$='line_3'] {
  border-color: #efefef;
}
[id$='marker'] > [id$='line_4'] {
  border-color: #e8e8e8;
}
[id$='marker'] > [id$='line_5'] {
  border-color: #dfdfdf;
}
[id$='marker'] > [id$='line_6'] {
  border-color: #d8d8d8;
}
[id$='marker'] > [id$='line_7'] {
  border-color: #cfcfcf;
}
[id$='marker'] > [id$='line_8'] {
  border-color: #c8c8c8;
}
[id$='marker'] > [id$='line_9'] {
  border-color: #bfbfbf;
}
[id$='marker'] > [id$='line_10'] {
  border-color: #b8b8b8;
}
[id$='marker'] > [id$='sun'] {
  box-shadow: none;
  border-top: dashed 2px #fd8;
  opacity: 0.75;
}
[id$='marker'] > [id$='moon'] {
  box-shadow: none;
  border-top: dashed 2px #bef;
  opacity: 0.75;
}
[id$='marker'] > [id$='star'] {
  box-shadow: none;
  border: solid 1px #fff;
  border-radius: 14px;
  width: 26px;
  height: 26px;
  line-height: 26px !important;
  font-size: 23px !important;
}

/*
[id$=marker].marker_0 > :not([id$="_0"]),

[id$=marker].marker_1 > [id$="_5"],	[id$=marker].marker_1 > [id$="_4"],	[id$=marker].marker_1 > [id$="_3"],	[id$=marker].marker_1 > [id$="_2"],
[id$=marker].marker_2 > [id$="_5"],	[id$=marker].marker_2 > [id$="_4"],	[id$=marker].marker_2 > [id$="_3"],
[id$=marker].marker_3 > [id$="_5"],	[id$=marker].marker_3 > [id$="_4"],
[id$=marker].marker_4 > [id$="_5"],

[id$=marker].marker_1 > [id$="_10"],	[id$=marker].marker_1 > [id$="_9"],	[id$=marker].marker_1 > [id$="_8"],	[id$=marker].marker_1 > [id$="_7"],	[id$=marker].marker_1 > [id$="_6"],
[id$=marker].marker_2 > [id$="_10"],	[id$=marker].marker_2 > [id$="_9"],	[id$=marker].marker_2 > [id$="_8"],	[id$=marker].marker_2 > [id$="_7"],	[id$=marker].marker_2 > [id$="_6"],
[id$=marker].marker_3 > [id$="_10"],	[id$=marker].marker_3 > [id$="_9"],	[id$=marker].marker_3 > [id$="_8"],	[id$=marker].marker_3 > [id$="_7"],	[id$=marker].marker_3 > [id$="_6"],
[id$=marker].marker_4 > [id$="_10"],	[id$=marker].marker_4 > [id$="_9"],	[id$=marker].marker_4 > [id$="_8"],	[id$=marker].marker_4 > [id$="_7"],	[id$=marker].marker_4 > [id$="_6"],
[id$=marker].marker_5 > [id$="_10"],	[id$=marker].marker_5 > [id$="_9"],	[id$=marker].marker_5 > [id$="_8"],	[id$=marker].marker_5 > [id$="_7"],	[id$=marker].marker_5 > [id$="_6"],
[id$=marker].marker_6 > [id$="_10"],	[id$=marker].marker_6 > [id$="_9"],	[id$=marker].marker_6 > [id$="_8"],	[id$=marker].marker_6 > [id$="_7"],
[id$=marker].marker_7 > [id$="_10"],	[id$=marker].marker_7 > [id$="_9"],	[id$=marker].marker_7 > [id$="_8"],
[id$=marker].marker_8 > [id$="_10"],	[id$=marker].marker_8 > [id$="_9"],
[id$=marker].marker_9 > [id$="_10"]	{ display:none; }
*/

[id$='marker'].mAnim_true > [id$='marker_0'] {
  color: transparent;
  text-shadow: none;
}
[id$='marker'].mAnim_true > [id$='marker_0']:not(:hover)::before,
[id$='marker'].mAnim_true > [id$='marker_0']::after {
  display: inline-block;
  position: absolute;
  top: 5px !important;
  left: 5px !important;
  border: solid 1px #f00;
  border-radius: 100px;
  line-height: 120px;
  vertical-align: middle;
  color: #f00 !important;
  min-width: 0;
  padding: 0;
  opacity: 0;
}
[id$='marker'].mAnim_true > [id$='marker_0']:not(:hover)::before {
  content: '';
  animation: my_loc 3s linear 1.5s infinite both;
}
[id$='marker'].mAnim_true > [id$='marker_0']::after {
  content: '●';
  animation: my_loc 3s linear 0s infinite both;
}
@keyframes my_loc {
  0% {
    opacity: 0;
    background: rgba#f00;
    width: 10px;
    height: 10px;
    line-height: 10px;
    margin: -5px 0 0 -5px;
  }
  33% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    background: #f00;
  }
  100% {
    opacity: 0;
    background: #f00;
    width: 120px;
    height: 120px;
    line-height: 120px;
    margin: -60px 0 0 -60px;
  }
}

[id$='marker'] > [id$='_member'] {
  font-size: 14px;
  margin: 2px 0 0 -4px;
}
[id$='marker'] > [id$='_member']::before {
  top: -49px !important;
  left: -75px !important;
  width: 150px;
  line-height: 13px;
  font-weight: normal;
}
[id$='marker'] > [id$='_member']::before {
  top: -49px !important;
  left: -75px !important;
  width: 150px;
  line-height: 13px;
  font-weight: normal;
}
[id$='marker'] > [id$='_member'] > span {
  animation: mempos 1s linear 0s infinite alternate both;
}
@keyframes mempos {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#markerHistory td {
  padding: 1px 5px !important;
}
#markerHistory a {
  padding: 3px 0 !important;
}
#markerHistory + div {
  font-size: 12px !important;
  line-height: 14px !important;
}
#markerHistory + div hr {
  margin: 3px 0 !important;
}

/* ---------- PHOTO PINS ---------- */
[id^='map_'] > [id$='photo'] > span {
  text-align: center;
  min-width: 0;
  min-height: 0;
}

i.pin {
  position: absolute;
  width: 32px;
  height: 32px;
  font-style: normal;
}

/* 座標フロート */
*[code]::before {
  display: none;
  position: absolute;
  left: -27px;
  z-index: var(--map-coords-z);
  min-width: 60px;
  content: attr(code);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: bold;
  line-height: 11px;
  color: #000 !important;
  text-shadow: none;
  white-space: pre;
}
*[code]:hover:before {
  display: inline-block;
}

/* 画像ピン */
[id^='map_'] > [id$='photo'] > span i.pin {
  margin: -22px 0 0 -11px;
  line-height: 23px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-shadow: none;
  cursor: pointer;
  transform: scale(0.5);
  transform-origin: bottom center;
}
[id^='map_'] > [id$='photo'] > span:hover i.pin,
[id^='map_'] > [id$='photo'] > span.pin_big i.pin {
  transform: scale(1);
  opacity: 1;
}
[id^='map_'] > [id$='photo'] [code]:before {
  top: -40px;
  left: -31px;
}
[id^='map_'] > [id$='photo'] [code].pin_big:before {
  display: inline-block;
}
[id^='map_'] > [id$='marker'] > [id*='marker'][code]:before {
  top: -18px;
  left: -31px;
}
[id^='map_'] > [id$='marker'] > [id*='line'][code]:before {
  top: -20px;
  left: calc(50% - 34px);
}

/* サイドバーのやつ？ */
#side_usr i.pin {
  position: relative !important;
  float: left;
  margin: -1px 2px -1px -4px;
}

/* ----- 特定地図用ギミック ----- 		    top   right  btm   left */
div#map_r2 > img[id='r2:cliff'] {
  margin-top: 0px;
  clip: rect(666px 1000px 999px 0px);
}
div#map_r2.zoom_125 > img[id='r2:cliff'],
div#map_r2.zoom_150 > img[id='r2:cliff'] {
  margin-top: 333px;
  clip: rect(333px 1000px 666px 0px);
}
div#map_r2.zoom_175 > img[id='r2:cliff'],
div#map_r2.zoom_200 > img[id='r2:cliff'] {
  margin-top: 674px;
  clip: rect(0px 1000px 333px 0px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━ README ━━━━━━━━━━━━━━━━━━━━━━━━━ */
#rdm {
  display: none;
  position: fixed;
  top: 2vh;
  left: 2vw;
  z-index: var(--rdm-z);
  width: 96vw;
  height: 95vh;
  border: solid 6px #353;
  border-radius: 10px;
  background: rgba(0, 10, 0, 0.95);
  padding: 0;
  color: #8c8;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.7);
}
#rdm a,
#rdm a:visited {
  color: #6cf;
}

/* #rdm.open {
  display: inline-block;
} */

#rdm * {
  line-height: 15px;
  font-size: 13px;
  font-family: Meiryo, sans-serif;
  letter-spacing: 0.5px;
}
#rdm *.important,
#rdm *.important * {
  font-size: 18px !important;
  line-height: 22px !important;
}
body.ja #rdm * {
  font-size: 12px;
}

#rdm > * {
  width: 100%;
}

#rdm > h2 {
  margin: 2px 0 0 0;
  font-size: 24px !important;
  line-height: 40px !important;
  letter-spacing: 5px;
  color: #575;
  text-indent: 13px;
}
body.map #rdm > h2 {
  position: absolute;
  top: 0;
  box-shadow: -7px 25px 20px -12px #000;
}

#rdm > #rdm_text {
  position: absolute;
  top: 40px;
  border: solid 2px #353;
  border-width: 2px 0;
  height: calc(95vh - 92px);
  overflow-y: auto;
  padding: 7px 9px 70px 9px;
}
#rdm > #rdm_close {
  position: absolute;
  bottom: 0;
  margin: 0;
  height: 50px;
  line-height: 45px !important;
  padding-top: 3px;
  color: #8c8;
  text-align: center !important;
  box-shadow: -7px -25px 20px -12px #000;
  overflow: hidden;
}

/*
body.ios > #rdm > h2,
body.android > #rdm > h2,
*/
#rdm > h2 {
  box-shadow: none !important;
}
/*
body.ios > #rdm > #rdm_text,
body.android > #rdm > #rdm_text,
*/
#rdm > #rdm_text {
  top: 80px !important;
  box-shadow: none !important;
  border: none !important;
}
/*
body.ios > #rdm > #rdm_text > dl:last-child,
body.android > #rdm > #rdm_text > dl:last-child,
*/
#rdm > #rdm_text > dl:last-child {
  margin-bottom: 120px !important;
}
/*
body.ios > #rdm > #rdm_close,
body.android > #rdm > #rdm_close,
*/
#rdm > #rdm_close {
  top: 32px !important;
  height: 50px !important;
  box-shadow: -7px 25px 20px -12px #000 !important;
  border-bottom: solid 2px #353 !important;
}

#rdm label {
  display: block;
  background: #263f26;
  border: none;
  margin: 6px -8px;
  padding: 0;
}
#rdm label > h3 {
  padding: 2px 6px;
  margin: 0;
  font-size: 16px !important;
  line-height: 32px;
}
#rdm input[type='radio'],
#rdm input[type='radio'] + label + dl {
  display: none;
}
#rdm input[type='radio']:checked + label + dl {
  display: contents;
}

#rdm dl {
  margin: 4px 0 20px 5px;
}
#rdm dt {
  background: #232823;
  padding: 5px 4px;
}
#rdm dt {
  color: #9d9;
  font-weight: bold;
}
#rdm dt::before {
  content: '* ';
}

#rdm dd {
  color: #8c8;
  margin: 3px 0;
  border: solid 0px #353;
  padding: 2px 0 8px 8px;
  line-height: 14px;
}
#rdm dd#saferock {
  background: url(/img/deceased_on_rock.jpg) top right no-repeat;
  text-shadow: 1px 0 0px #000, 0 1px 0px #000, -1px 0 0px #000, 0 -1px 0px #000, 2px 0 2px #000, 0 2px 2px #000, -2px 0 2px #000, 0 -2px 2px #000;
}
#rdm dd + dd {
  margin-bottom: 15px;
  border-top-width: 2px;
}

#rdm.log dd:first-line {
  font-size: 13px;
  line-height: 30px;
  font-weight: bold;
  text-decoration: underline;
}

#rdm ul {
  margin: 0 0 3px 8px;
}
#rdm ul li {
  margin: 6px 0 6px 5px;
  border: solid 0px #353;
  padding-left: 0;
  line-height: 15px;
}
#rdm ul.thumbs li {
  display: inline-block;
  margin: 5px 15px 5px 5px;
  border: none;
  width: 300px;
  white-space: nowrap;
}
#rdm ul.thumbs li a {
  display: inline-block;
  margin: 0 4px 0 -4px;
  float: left;
}
#rdm ul.thumbs img {
  vertical-align: middle;
  margin: 2px 0;
}
#rdm ul.thumbs li::after {
  content: '';
  display: block;
  clear: both;
}

#rdm table {
  margin: 0;
  border-collapse: collapse;
}
#rdm th {
  background: #000;
  color: #7b7;
  border: solid 1px #465;
  vertical-align: top;
  padding: 2px 5px;
}
#rdm td {
  color: #7b7;
  border: solid 1px #465;
  vertical-align: top;
  padding: 2px 5px;
}

#rdm hr {
  border-color: #353;
  border-style: dashed;
  margin: 5px 0;
}
#rdm strong {
  display: inline-block;
  color: #e80;
}
#rdm #noteMsg {
  color: #eee;
  line-height: 18px;
  letter-spacing: 1px;
}

body.ja #rdm dd,
body.ja #rdm li {
  line-height: 17px;
}

#rdm_close > * {
  display: inline-block;
  vertical-align: middle;
}
#rdm_close div {
  margin-left: 5px;
  line-height: 13px;
  text-align: left;
}

#rdm_close input,
#rdm_close label {
  position: relative;
  display: inline-block;
  border: solid 1px #464;
  border-radius: 4px;
  background: #121;
  padding: 0 4px;
  color: #6a6 !important;
  font-weight: bold;
}
#rdm_close input {
  z-index: var(--rdm-z);
}
#rdm_close input[type='button'] {
  font-size: 16px;
  width: 140px;
  height: 32px;
  font-weight: bold;
}
#rdm_close label {
  margin-left: -22px;
  padding: 1px 4px 1px 25px;
  font-size: 11px;
  line-height: 14px;
}

#rdm_close input[type='checkbox'] + label:hover,
#rdm_close input[type='checkbox']:checked + label,
#rdm_close input[type='button']:hover {
  border: solid 1px #474;
  background: #575 !important;
  color: #cfc !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━ URL DECORDED IMAGES ━━━━━━━━━━━━━━━━━━━━━━━━━ */
i {
  display: inline-block;
}

i.pin {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAADE0lEQVRYhb2XW0tUYRSGnzV7O9pYjIfGnNLQUTMjOlh2LqJADCIsuumiq0IJ6gf0F7oMKjoRZBFJSUFhCRUdoKgLgxRNpROEokyJWoTjuLrYW+iAzv72ZA9s5uZlrYfFXt/+BgxR1d2qel5Ve1V11H16VbVJVXeb1hODxjVAI+OJQ7R3wJse0EnIyoRIPqxZ7vzCJeCciLz4ZwKqWg+cZyg+n1NN0D8IyeQflQQWLoCGA7CocBg4JiJX0hZQ1V3AWT59LubcNRgYmj4cCEBhBA7uhYrSONAoIjdnqh9I0bwAaODLcDFnrs7cHGBy0slcvQ3fvucDDapa4lsAOALU03wXhuIpor9I9A/CzVaAWqAxHYHDxL/C23femk+RTEJX39TEjqpqlrGAqq4FinjRDt++mwkAjIzBs1cAc4HtxgJAJRNJaO90xmrKeAJ630MiAVDqRyCDoXjqF286VJ0pDI8C5PsRGGBkDBIT/gQAFLAtgA4/At3khZ2Tzi+FEcgO+RMQkQ/kht+RG/bXPDMIVeUQzOgTkT5jAQBsu4lt6/wJ5IZh1TKA5pliqc6Bh2xYPYltmzW3bVhaBvNzAR77FhCRJ4TmvGRpmZlAeC6sqALL6haRNt8CLpc5sMf52nklWgCVMYCLqaJeBFqJ5HWxqNBbc8uCJTHIDH4EWtMWEJEPBAIP2Fc3tdMzE8qCDdUAj0SkM20Bl2aWlX+lKJo6GVsMeeEfwHUvhT0JiMhTbLuFfXUwL3v6YDADarcC3BKRe/9MwOUWlbEJKkqZdi2jBVBe4mQ94llARO5gWc/YuXlqv38nMwg7NoFlvRYRT+M3EnA5S0WJs2KhP+4YCxdAzUqAkyYFTQVaCATusLHaaWi5W5EdgvWrIJhxH7gxawIiMg60UFIEFaXOeW9ZEI3AxmqAGyIyOmsCrsQlbLuPlVVQHIW8sDP67NBrEblgWs9YwOUEscWOQFU5bKkBOO2zljmqmqOqbdrZo9rZo6rapqo5/03AldiviQnVRELdv27/H1V9rqrt6dQwvGn8xXGce79vfgJf5/zQLSmW+QAAAABJRU5ErkJggg==);
}

i.pin.warn {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAADeklEQVRYhb2W3W8UVRjGn3P2o+2WamQX6bBuyzYEgjEBrdqLGuNNId4QSIrhhmjihZgQCAlccOWlJvgHaGyiqaaKBAiRgGlhWwll+dpsq0C4aHfb1B3azLalHzA7H+e8XjSF1l1nd2aLTzLJmTlvnvc373vmnGFwKS0W24MtOOhrQDtA6wEAjM3QAk+xjOxaPzZxwY0fqzRQDTe+E9jqP17Txj6q283h38ZXzdsZCf0SwbhNZwsP5NexmdzNNQPIhZW9de/5u0OdvKGmnTvGmkmJpxdIF4N0KJKb6K4aQI1EP6xt83W/dIJHfE2VFUzmCfOnxKI+ID/ZpOXOOsU6vs5I/cZXA1F+tP4gK0rel9oJ1pIFa8miL7VztWmEof5j37pgCz/26OWNmz0DhOoDn9e8j93Bd4vDdu0/X3K8rMDrDLW7WLsI+A55BuA+fBY64NxzJ4U6GQIRdiQL1LoGUMONb/u3QPEp3gFYA0dwB6+r2dD4gWsAgn9b8M2Kv9L/VPAtBoDHXQNwLgOsoXoA/goAQtg1AEFOSo2qBhATABHdcw3ATHpoPawewExJCG67B1DmpsZEhrKkVwFhEewRNt6kaSOuAQBAGuguJGTJud4z+0qOV8oYJJgzoscphyMAkUgYSZQsQUfrUMnxKoBbEozRgGeATfnJa2ZapuWshzZYBPM2ZaPao17PAAAg8rJLvyRc59cvEzBN35aL85cLYKa4bNzg46F91MxCq/eF573/VwskwUhS3l6wL5bzL1sBZW5qzB5Fr5kubkNH61DJ/lt/EuwH8qoyO3W/agAAsGfEj4Wr8glWrEen41jvJ2FN2j9U4l2xtB2xHvNcM1EmTpSJE5Zonl3Lz63fm0lre+23Sn0rPursnOgx7lDZz8FMEexR+dOaAyh59aJ5l6WFurQxldqI5CzBuCFHlbx6es0BAEBPW6eMgaUidLQOgTJxUCb+bCEaf0jIYXzpxtMVwOO8es5IUVJOF2/PNEcwbyKl6fqvLwzgDcA0rovvrL+K58xhiScJ+c326emFFwYAAIqmfl/ol1OwVqxHQSj003g0/3eXWz9PP3xWAl8Yg88BzFsEK4GvvHh5AlhcnD9duCLTy/d6nxxenJ//xYuXZ6kbop3WlWYSyc2UCyt7/9fky5o73DS6cDKmVuNR9jR00tOfxadgtK4aj38A7H+aqJ+LEHMAAAAASUVORK5CYII=);
}

i.rainbow {
  width: 10px;
  height: 10px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAsUlEQVQYlWXOvQqCUBjG8f/pY3BVEIqcnBwdBSG3xoZuoMXVrqUa3LoM6RaCriCaHNoaFAmEoIbDOXr0GV9+PM8rGOS98o8gsuFdaLDwN0zFFYCkxQ6tMdRIgRhwAPeh4QxghAIJisbroPwJAymQVmW/UWQkLcQVBDVF47Gvz8x/W7jB9/Lppu3QAscCagADLZ93ImCiu105mValRjuJTvlrLTrYi2pCogNG4yARoBDAHydXQfzEYzBlAAAAAElFTkSuQmCC);
}

#reCapIcon * {
  scale: 0.8;
}