/* general */
body {
  margin: 0 0 auto;
  padding: 8px;
}

.container-centered {
  text-align: center;
}

.break-words {
  -ms-word-break: break-all;
  -ms-word-wrap: break-all;
  -webkit-word-break: break-word;
  -webkit-word-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

hr {
  clear: both;
}

/* root/general */
.logo {
  vertical-align: middle;
}

.page-root .box {
  min-width: 256px;
  max-width: 768px;
  width: 100%;
}

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

.page-root table td {
  /* TODO: align td contents... how? */
}

.page-root .box-container {
  margin-bottom: 8px;
}

.box {
  display: inline-block;
  border: 1px solid;
}

.box-title {
  text-align: left;
  font-size: large;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.box-title a {
  text-decoration: none;
}

.box-content {
  text-align: left;
  padding: 0.5em;
}

/* banner */
div.banner {
  clear: both;
}

div.banner img {
  max-width: 100%;
  height: auto;
}

/* header */
div.header {
  clear: both;
}

div.header h1 {
  margin: 0;
}

div.header p {
  margin: 0;
}

/* footer */
.footer {
  font-size: small;
  clear: both;
}

.footer .disclaimer {
  font-size: x-small;
}

/* board */
div.mode {
  text-align: center;
  width: 100%;
}

/* post */
.thread {
  display: block;
}

.reply-container, .post.reply {
  display: table;
  margin-bottom: 2px;
}

div.post-dash {
  float: left;
  font-weight: bolder;
  font-size: 1.75em;
}

span.post-board {
  font-weight: bolder;
  font-size: large;
}

span.post-subject {
  font-weight: bolder;
}

span.post-name {
  font-weight: bold;
}

span.post-hashid-hash {
  border-radius: 2px;
}

div.file-info {
  display: block;
}

div.file-thumb {
  display: block;
  float: left;
  margin-right: 25px;
}

div.file-thumb img {
  display: block;
}

div.post-info {
  display: inline-block;
}

span.post-id a {
  text-decoration: none;
}

div.post div.post-message-wrapper {
  display: block;
}

div.reply div.post-message-wrapper {
  display: block;
  margin-left: 25px;
}

div.post-message {
  display: block;
  margin: 1em 0px;
}

div.post-message .spoiler {
  color: transparent;
  text-decoration: none;
}

div.post-message .spoiler:hover {
  color: inherit;
  text-shadow: none;
}

div.post-message pre {
  margin: 0px;
  padding-bottom: 12px;
  overflow-x: scroll;
}

.post-message .banned {
  font-weight: bold;
}

.catalog {
  text-align: center;
}

div.post-catalog {
  display: inline-block;
  width: 150px;
  max-height: 320px;
  text-align: center;
  margin: 8px;
  vertical-align: top;
  overflow: hidden;
}

.post-catalog-id {
  display: block;
  font-size: small;
}

div.post-catalog-meta {
  display: block;
  font-size: small;
}

div.post-catalog-title {
  display: block;
  font-size: small;
}

span.post-catalog-subject {
  font-weight: bold;
}

/* deleteform */
div.deleteform-group {
  float: right;
}

/* menubar */
.menubar {
  margin-bottom: 32px;
}

.menubar select {
  font-size: 100%;
  padding: 0px;
  border: none;
}

.menubar .boardlist {
  float: left;
}

.menubar .boardmenu {
  float: right;
}

.menubar-detached {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  background: inherit;
}

/* dropdown menu */
a.dd-menu-btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: transform 0.1s;
}

a.dd-menu-btn-open {
  transform: rotate(90deg);
}

div.dd-menu {
  position: absolute;
}

div.dd-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

div.dd-menu li {
  cursor: pointer;
  position: relative;
  padding: 2px 4px;
}

/* post preview */
div.post-preview {
  position: fixed;
}

div.post-preview > div.post {
  display: table;
  margin-bottom: 0px;
}

div.post-preview > div.post.reply > div.reply  {
  margin-bottom: 0px;
}

/* forms */
.form {
  text-align: left;
  overflow-x: auto;
}

.form td {
  vertical-align: middle;
}

.form-post table {
  margin: 0 auto;
}

.form-report table {
  margin: 0 auto;
}

.form-login table {
  margin: 0 auto;
}

.form-import fieldset {
  display: inline-block;
  vertical-align: top;
}

.form-rebuild fieldset {
  display: inline-block;
  vertical-align: top;
}

.form-list {
  font-family: sans-serif;
  font-size: x-small;
}

.form-list ul {
  margin: 0;
  padding: 0;
}

.form-list ul li {
  margin-left: 1em;
}

div.h-captcha {
  min-width: 303px;
  min-height: 81px;
}

/* manage */
.form-manage table, .form-manage th, .form-manage td {
  border-collapse: collapse;
}

table.form-manage-table {
  width: 100%;
  margin: 4px auto 4px auto;
}

.form-manage th {
  text-align: left;
}

.form-manage td {
  text-align: left;
  vertical-align: top;
}

.form-manage td * {
  padding: 0px;
}

/* animations */
@keyframes marquee {
  0%   { transform: translate(100%, 0); }
  100% { transform: translate(-100%, 0); }
}

/* gallery component */
.gallery-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: auto;
  max-height: 100vh;
}

.gallery-item {
  flex: 1 0 auto;
  margin: 1px;
  padding: 0;
  max-width: 100%;
  justify-content: center;
}

.gallery-image {
  width: 100%;
  object-fit: contain;
  object-position: center;
}