html { font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; }

body { background-color: #F8F7F3; color: #333; font-family: Arial, sans-serif; font-feature-settings: "palt" 1; }

body, div, p, header, footer, h1, h3, ul, li, dl, dt, dd, blockquote { margin: 0; padding: 0; }

button, .btn_btn { border: none; cursor: pointer; padding: 0.4em 0.5em; appearance: none; border-radius: 2px; box-sizing: border-box; }
button:disabled, .btn_btn:disabled { pointer-events: none; }

input, textarea { font-size: 0.875rem; box-sizing: border-box; padding: 0.4em 0.5em; line-height: 1.2; border: 1px solid #cacccc; border-radius: 2px; background-color: #E9E8E4; }
input:focus, textarea:focus { border-color: #32360d; }
input::placeholder, textarea::placeholder { color: #67625C; }

a, .txt_btn { color: #1a6cd7; cursor: pointer; background-color: transparent; }
a:hover, .txt_btn:hover { color: #C00; }

select { font-size: 1rem; padding: 0.2em 0.3em; }

textarea { width: 100%; height: 7.5em; }

section { padding: 10px; }

article { margin-bottom: 2.5em; }

dl { margin: 0; }

dt { color: #555; font-size: 85%; }

dd { margin: 0.4em 0 1.2em; }

footer #copyright { text-align: center; padding: 1em 0 2em; font-size: 0.75rem; color: #7b7472; }
footer #copyright a { color: #333; }

footer, section, #main, .formhead-inner, .twopain { max-width: 1200px; margin: 0 auto; }

header h1 { font-size: 4rem; text-align: center; padding: 1em 0; color: #817777; font-family: 'Josefin Sans', sans-serif; letter-spacing: -0.05em; }
header h1 img { display: block; width: 136px; height: auto; margin: 10px auto; }

.stdcolor, .formhead button, .btnbox button, .caption-inner button, .tagselect .tagselect-save, .tagselect .tagselect-edit { background-color: #4D4A47; color: #FFF; }
.stdcolor:disabled, .formhead button:disabled, .btnbox button:disabled, .caption-inner button:disabled, .tagselect .tagselect-save:disabled, .tagselect .tagselect-edit:disabled { background-color: #ccc; cursor: default; }

.onlysp { display: none; }

.mini { font-size: 0.75rem; }

.mb1em { margin-bottom: 1em; }

.preline { white-space: pre-line; }

.msg, .err { text-align: center; color: #FFF; padding: 0.5em 0; }

.msg { background-color: #7FB321; }

.err { background-color: #F00; }

#app { padding: 0 10px; }

#noteedit { margin-bottom: 0; padding-top: 70px; background-color: #F8F7F3; }

.formhead { position: fixed; top: 0; left: 0; right: 0; padding: 10px 0; box-sizing: border-box; background-color: rgba(245, 245, 245, 0.82); z-index: 50; }
.formhead input { width: calc(100% - 146px); }
.formhead button { font-size: 0.875rem; line-height: 1.2; margin-left: 2px; }
.formhead button:hover { opacity: 0.9; }

button.viewbtn { width: 24px; height: 24px; border-radius: 3px; border: 3px solid #4D4A47; box-sizing: border-box; margin-left: 0; margin-right: 2px; }
button.viewbtn.source { background: linear-gradient(0.25turn, #FFF, #FFF 55%, #999 55%, #999); }
button.viewbtn.double { background: linear-gradient(0.25turn, #FFF, #FFF 45%, #999 45%, #999 55%, #FFF 55%, #FFF); }
button.viewbtn.html { background: linear-gradient(0.25turn, #999, #999 45%, #FFF 45%, #FFF); }

.twopain { display: flex; justify-content: space-between; }

textarea.mdinput, div.mdoutput { width: 50%; min-height: 80vh; overflow: auto; vertical-align: top; box-sizing: border-box; }

.source textarea.mdinput { width: 100%; padding: 0; }
.source div.mdoutput { display: none; }

.html textarea.mdinput { display: none; }
.html div.mdoutput { width: 100%; padding: 0; }

textarea.mdinput { border: none; border-right: 1px solid #ccc; resize: none; background-color: #f6f6f6; font-family: 'Monaco', courier, monospace; padding: 0 20px 0 0; line-height: 1.5; tab-size: 2; padding: 5px; }

div.mdoutput { padding: 0 0 0 20px; word-break: break-all; }
div.mdoutput h1 { font-size: 2rem; }
div.mdoutput h2 { font-size: 1.5rem; }
div.mdoutput h3 { font-size: 1.2rem; }
div.mdoutput h1, div.mdoutput h2, div.mdoutput h3 { line-height: 1.1; margin: 0 0 0.75rem; }
div.mdoutput h4 { font-size: 1rem; }
div.mdoutput h5 { font-size: 1rem; font-weight: normal; }
div.mdoutput h4, div.mdoutput h5 { line-height: 1.1; margin: 0 0 0.5rem; }
div.mdoutput ul, div.mdoutput ol { margin-left: 1em; margin-bottom: 1.5em; }
div.mdoutput li { margin-bottom: 0.5em; }
div.mdoutput pre { position: relative; line-height: 1.5; }
div.mdoutput pre code { display: block; overflow: auto; }
div.mdoutput code { color: #EEE; background-color: #1d2020; display: inline-block; padding: 0.5em; position: relative; font-size: 0.875rem; }
div.mdoutput code .copybtn { height: 14px; width: 14px; padding: 2px 0; font-size: 0.75rem; }
div.mdoutput blockquote { border-left: #817777 6px solid; margin: 0; padding: 0 0 0 1em; }
div.mdoutput ul:has(input[type=checkbox]) { margin-left: 0; list-style: none; }
div.mdoutput ul:has(input[type=checkbox]) li { text-indent: -1.5em; padding-left: 1.5em; }
div.mdoutput ul:has(input[type=checkbox]) input[type=checkbox] { margin: 0 0.5em 0 0; }
div.mdoutput p, div.mdoutput hr { margin-bottom: 1em; }
div.mdoutput table { border-collapse: collapse; padding: 0; table-layout: fixed; color: #000; background-color: #fff; }
div.mdoutput table thead { border-bottom: 3px solid #838383; }
div.mdoutput table th, div.mdoutput table td { padding: 0.4em 0.7em; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; }
div.mdoutput table th:last-child, div.mdoutput table td:last-child { border-right: 0 none; }
div.mdoutput a.linkbox { display: flex; word-break: break-all; text-decoration: none; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px; background-color: #fff; margin: 10px 0; }
div.mdoutput a.linkbox .linkbox-imgbox { width: 80px; height: 80px; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; min-width: 80px; }
div.mdoutput a.linkbox .linkbox-imgbox img { object-fit: cover; position: absolute; width: auto; height: 100%; }
div.mdoutput a.linkbox .linkbox-txtbox { height: 73px; display: block; position: relative; box-sizing: border-box; padding: 7px 10px 0; font-size: 0.875rem; overflow: hidden; }
div.mdoutput a.linkbox .linkbox-txtbox strong { display: block; margin-bottom: 3px; }
div.mdoutput a.linkbox + br { display: none; }

.copybtn { position: absolute; top: 0; right: 0; opacity: 0; transition: opacity .3s; height: 18px; width: 18px; cursor: pointer; padding: 5px 2px; font-family: "Font Awesome 6 Pro"; font-weight: 900; color: #FFF; }
.copybtn.active { opacity: 1; }
.copybtn::before { content: "Copied"; position: absolute; /* vertically center */ top: 50%; transform: translateY(-50%); /* move to right */ right: 100%; margin-right: 5px; /* and add a small left margin */ /* basic styles */ border-radius: 5px 5px 0 5px; background: #666; text-align: center; font-weight: normal; font-size: 0.75rem; opacity: 0; /* hide by default */ transition: opacity .3s; width: 0; overflow: hidden; white-space: nowrap; }
.copybtn.click::before { opacity: 1; padding: 2px 7px; min-width: 3.5em; }

.popup, .nowloading { position: fixed; backdrop-filter: blur(3px); left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.5); }

.nowloading { z-index: 100; }
.nowloading .nowloading-inner { max-width: min(90vw, 520px); text-align: center; background-color: rgba(255, 255, 255, 0.9); padding: 1.2em 1.5em; border-radius: 4px; box-shadow: 0 3px 16px rgba(0, 0, 0, 0.12); }
.nowloading p { margin: 0.3em 0; }
.nowloading .nowloading-note { color: #67625C; font-size: 0.875rem; line-height: 1.6; text-align: left; }
.nowloading button { margin-top: 0.8em; padding: 0.45em 1em; }

.btnbox { text-align: center; margin: 1em 0; }
.btnbox button { margin: 0 10px; padding: 0.55em 0.8em; line-height: 1.2; font-size: 1em; box-sizing: border-box; border-radius: 3px; }

.tagfilter { display: flex; list-style: none; flex-wrap: wrap; }
.tagfilter .tagfilter-btn { background-color: #EEE; color: #67625C; padding: 5px 7px; border-radius: 2px; line-height: 1.1; margin: 0 5px 5px 0; }
.tagfilter .tagfilter-btn.active { background-color: #888; color: #FFF; }
.tagfilter .tagfilter-btn i { font-size: 0.82em; }

.searchform { flex: 1 1 250px; margin-bottom: 5px; text-align: right; }
.searchform .searchform-main { margin-bottom: 4px; }
.searchform input { width: 200px; }
.searchform button { width: 50px; }

.addtag { padding: 0.4em 0.7em; background-color: #79bb78; color: #FFF; }

#filelist .filelisthead { display: flex; justify-content: space-between; margin-bottom: 10px; }
#filelist .filelisthead .tagfilter { width: calc(100% - 250px); }

.pagination select { margin-right: 0.5em; }
.pagination button { background-color: #EEE; color: #67625C; }
.pagination button:disabled { color: #bdbdbd; }
.pagination button.active, .pagination button:hover { background-color: #67625C; color: #FFF; }

.filelist, .taglist { border-collapse: collapse; }
.filelist th, .filelist td, .taglist th, .taglist td { border-bottom: 1px solid #CCC; text-align: left; padding: 5px 0.5em; font-weight: normal; }
.filelist thead th, .taglist thead th { font-size: 0.75rem; color: #888; }
.filelist tbody td:not(:last-child), .taglist tbody td:not(:last-child) { border-right: 1px solid #CCC; }
.filelist tbody .txt_btn .fa-solid, .filelist tbody .tag .fa-solid, .taglist tbody .txt_btn .fa-solid, .taglist tbody .tag .fa-solid { margin-right: 0.5em; }
.filelist .checkboxtd, .taglist .checkboxtd { padding: 5px 5px 5px 1em; width: 1%; font-size: 1rem; }
.filelist tr.disable, .taglist tr.disable { opacity: 0.3; }
.filelist .labelselect, .taglist .labelselect { width: 3em; }
.filelist .dragging, .taglist .dragging { background-color: #eee; }
.filelist caption, .taglist caption { caption-side: bottom; text-align: right; padding-top: 10px; }

.caption-inner { padding-top: 15px; padding-left: 1em; display: flex; }
.caption-inner i { margin-right: 1em; }
.caption-inner button { margin-left: 5px; }

.filelist { width: 100%; }
.filelist .edittag { background-color: #67625C; color: #FFF; }
.filelist span.sortbtn { cursor: pointer; }

.taglist { margin: 0 auto; }
.taglist td.tagid { cursor: move; }

.removetag { margin-left: 0.5em; }

.tagselectbox { margin: 5px; max-width: 50%; }
.tagselectbox h3 { font-size: 1.9rem; margin-bottom: 0.5em; text-align: center; font-weight: normal; text-shadow: #FFF 1px 0 10px; }
.tagselectbox h3 span { font-size: 1.25rem; font-weight: bold; color: #555; }

.tagselect { list-style: none; display: flex; flex-wrap: wrap; }
.tagselect li { margin: 5px; }
.tagselect .tagselect-under { text-align: center; width: 100%; }
.tagselect .togletag, .tagselect .tagselect-edit { font-size: 1rem; line-height: 1.4; }

.tag { line-height: 1.4em; border-radius: 0.7em; padding: 0 0 0 10px; font-size: 0.875rem; display: inline-block; margin-right: 0.5em; }
.tag button { background-color: transparent; }

.labelselect option:nth-of-type(2), .tag.taggroup0, .togletag.active.taggroup0, .tagfilter-btn.active.taggroup0 { background-color: #f1aaca; }

@media screen and (min-width: 941px) { .togletag.taggroup0:hover, .tagfilter-btn.taggroup0:hover { background-color: #f1aaca; } }
.labelselect option:nth-of-type(3), .tag.taggroup1, .togletag.active.taggroup1, .tagfilter-btn.active.taggroup1 { background-color: #f1b48a; }

@media screen and (min-width: 941px) { .togletag.taggroup1:hover, .tagfilter-btn.taggroup1:hover { background-color: #f1b48a; } }
.labelselect option:nth-of-type(4), .tag.taggroup2, .togletag.active.taggroup2, .tagfilter-btn.active.taggroup2 { background-color: #fadd9f; }

@media screen and (min-width: 941px) { .togletag.taggroup2:hover, .tagfilter-btn.taggroup2:hover { background-color: #fadd9f; } }
.labelselect option:nth-of-type(5), .tag.taggroup3, .togletag.active.taggroup3, .tagfilter-btn.active.taggroup3 { background-color: #fdf9aa; }

@media screen and (min-width: 941px) { .togletag.taggroup3:hover, .tagfilter-btn.taggroup3:hover { background-color: #fdf9aa; } }
.labelselect option:nth-of-type(6), .tag.taggroup4, .togletag.active.taggroup4, .tagfilter-btn.active.taggroup4 { background-color: #e0eba8; }

@media screen and (min-width: 941px) { .togletag.taggroup4:hover, .tagfilter-btn.taggroup4:hover { background-color: #e0eba8; } }
.labelselect option:nth-of-type(7), .tag.taggroup5, .togletag.active.taggroup5, .tagfilter-btn.active.taggroup5 { background-color: #bddba6; }

@media screen and (min-width: 941px) { .togletag.taggroup5:hover, .tagfilter-btn.taggroup5:hover { background-color: #bddba6; } }
.labelselect option:nth-of-type(8), .tag.taggroup6, .togletag.active.taggroup6, .tagfilter-btn.active.taggroup6 { background-color: #99cfa5; }

@media screen and (min-width: 941px) { .togletag.taggroup6:hover, .tagfilter-btn.taggroup6:hover { background-color: #99cfa5; } }
.labelselect option:nth-of-type(9), .tag.taggroup7, .togletag.active.taggroup7, .tagfilter-btn.active.taggroup7 { background-color: #94d3f4; }

@media screen and (min-width: 941px) { .togletag.taggroup7:hover, .tagfilter-btn.taggroup7:hover { background-color: #94d3f4; } }
.labelselect option:nth-of-type(10), .tag.taggroup8, .togletag.active.taggroup8, .tagfilter-btn.active.taggroup8 { background-color: #99b3db; }

@media screen and (min-width: 941px) { .togletag.taggroup8:hover, .tagfilter-btn.taggroup8:hover { background-color: #99b3db; } }
.labelselect option:nth-of-type(11), .tag.taggroup9, .togletag.active.taggroup9, .tagfilter-btn.active.taggroup9 { background-color: #9b8ec1; }

@media screen and (min-width: 941px) { .togletag.taggroup9:hover, .tagfilter-btn.taggroup9:hover { background-color: #9b8ec1; } }
.labelselect option:nth-of-type(12), .tag.taggroup10, .togletag.active.taggroup10, .tagfilter-btn.active.taggroup10 { background-color: #c99cc6; }

@media screen and (min-width: 941px) { .togletag.taggroup10:hover, .tagfilter-btn.taggroup10:hover { background-color: #c99cc6; } }
.labelselect option:nth-of-type(13), .tag.taggroup11, .togletag.active.taggroup11, .tagfilter-btn.active.taggroup11 { background-color: #dea4c6; }

@media screen and (min-width: 941px) { .togletag.taggroup11:hover, .tagfilter-btn.taggroup11:hover { background-color: #dea4c6; } }
#subnav a, #subnav button { text-decoration: none; font-size: 1rem; }
#subnav button:disabled { color: #aaa; cursor: default; }

#toppage p { margin-bottom: 1em; word-break: break-all; }
#toppage #loginbtnbox { text-align: center; margin: 0 0 3em; }
#toppage #loginbtnbox a.btn_btn { text-decoration: none; background-color: #1a6cd7; color: #FFF; font-size: 1.25rem; border-radius: 5px; }
#toppage #loginbtnbox a.btn_btn i { margin-right: 0.5em; }
#toppage #loginbtnbox a.btn_btn span { font-size: 1rem; }
#toppage #loginbtnbox a.btn_btn:hover { opacity: 0.9; }

#cheatsheet { display: flex; }
#cheatsheet h3 { margin-bottom: 0.5em; }
#cheatsheet section { margin: 0; width: 50%; box-sizing: border-box; }
#cheatsheet dt { color: #777; }
#cheatsheet dd { margin-bottom: 1em; position: relative; margin: 0 0 10px; }
#cheatsheet dd:hover pre { background-color: #eee; }
#cheatsheet pre { padding: 10px 0; width: 100%; overflow: auto; margin: 0; }
#cheatsheet .copybtn { color: #555; top: -28px; right: 0; }
#cheatsheet .copybtn::before { background: #cecece; }

#bannerbox { max-width: 728px; margin: 15px auto 0; }

@media screen and (max-width: 1200px) { #main { padding: 0 10px; } }
@media screen and (max-width: 940px) { .tablewrap { overflow: auto hidden; will-change: scroll-position, transform; }
  .tablewrap > table.filelist { width: 940px; }
  .tablewrap > table.taglist { width: 420px; }
  #filelist .filelisthead { flex-flow: column; flex-direction: column-reverse; }
  #filelist .filelisthead .tagfilter { width: 100%; }
  #filelist .filelisthead .addtag { margin-bottom: 15px; }
  input, textarea { font-size: 1rem; }
  .formhead { padding: 10px; }
  #noteedit { padding-top: 70px; }
  .searchform { flex: initial; text-align: left; }
  .searchform input { width: calc(100% - 50px); vertical-align: middle; }
  .searchform button { line-height: 1.7; }
  .caption-inner { width: 800px; }
  .tagselect { max-width: 80%; }
  .onlysp { display: block; }
  .onlypc { display: none; }
  .msg, .err { text-align: left; padding: 0.5em; }
  .msg br, .err br { display: none; }
  #subnav a, #subnav button { font-size: 0.875rem; }
  textarea.mdinput { padding: 0 10px 0 0; }
  div.mdoutput { padding: 0 0 0 10px; }
  div.mdoutput ul, div.mdoutput ol { margin-left: 1.2em; }
  .copybtn { opacity: 1; }
  #cheatsheet { display: block; }
  #cheatsheet section { width: 100%; }
  #sortbtns { padding-right: 0.5em; }
  #sortbtns button { font-size: 1rem; } }