:root {
  --classic-body-bg: #EEE;
  --classic-code-bg: #F7F7F7;
  --classic-tp-bg: #E6F3FF;
  --classic-hr-color: #BED8EA;
  --classic-a-color: #08C;
  --classic-input-border: #CCC;
  --classic-success-color: green;
  --classic-failure-color: red;
  --classic-notice-color: #177cb0;
  --classic-info-box-border: red;
  --classic-topic-status-border: #BED8EA;
  --classic-topic-status-color: #7CB1DB;

  --userimg-shadow-color: #ccc;
  --btn-box-shadow-color-1: rgba(255, 255, 255, 0.2);
  --btn-box-shadow-color-2: rgba(0, 0, 0, 0.05);
}

[data-hu60-color-scheme='dark'] {
  --classic-body-bg: #EEE;
  --classic-code-bg: #161b22;
  --classic-tp-bg: #0d1117;
  --classic-hr-color: #BED8EA;
  --classic-a-color: #08C;
  --classic-input-border: #CCC;
  --classic-success-color: green;
  --classic-failure-color: red;
  --classic-notice-color: #177cb0;
  --classic-info-box-border: #CC66CC;
  --classic-topic-status-border: #BED8EA;
  --classic-topic-status-color: #7CB1DB;

  --userimg-shadow-color: #ccc;
  --btn-box-shadow-color-1: rgba(255, 255, 255, 0.2);
  --btn-box-shadow-color-2: rgba(0, 0, 0, 0.05);
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body, div {
  margin: 0;
  padding: 0;
}

/*加载谷歌字体*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url(MaterialIcons-Regular.woff2) format('woff2'),
  url(MaterialIcons-Regular.woff) format('woff'),
  url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

body {
  background-color: var(--classic-body-bg);
}

p {
  margin: 0px;
  padding: 2px 1px 2px 1px;
}

.tp {
  margin: 0px;
  background-color: var(--classic-tp-bg);
}

hr {
  height: 1px;
  border: 1px solid var(--classic-hr-color);
  border-left: none;
  border-right: none;
}

a {
  text-decoration: none;
  color: var(--classic-a-color);
}

img, input, textarea {
  max-width: 100%;
  vertical-align: middle;
}

textarea {
  width: calc(100% - 10px);
  height: 100px;
  font-size: 16px;
  margin: 8px 5px;
  box-sizing: border-box;
}

input {
  font-size: 16px;
}

input[name="editReason"] {
  border: 1px solid var(--classic-input-border);
  width: calc(100% - 95px);
}

#ubbHelp {
  display: inline-block;
}  

pre, textarea {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

ol, ul {
  margin: 0px;
}

.text-success {
  color: var(--classic-success-color);
}

.text-failure {
  color: var(--classic-failure-color);
}

.text-notice {
  color: var(--classic-notice-color);
}

.info-box {
  text-align: center;
  border: solid var(--classic-info-box-border) 1px;
}

button, input[type=submit], input[type=button] {
  border-radius: 4px;
  box-shadow: var(--btn-box-shadow-color-1) 0px 1px 0px 0px inset, var(--btn-box-shadow-color-2) 0px 1px 2px 0px;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 14px;
  padding: 5px 8px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.video {
  width: 600px;
  height: 400px;
  border: none;
  max-width: 100%;
}

.audio {
  width: 600px;
  border: none;
  max-width: 100%;
}

.hu60_code code, .markdown-body pre code {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
}
.hu60_code code {
  background-color: var(--classic-code-bg);
  font-size: 13.6px;
}
.hu60_code {
  padding: 0px !important;
}

latex-js {
  display: inline-block;
}

.topic-content, .chat-content, .floor-content, .floor_content {
  position: relative;
  overflow: hidden;
  padding: 5px;
}

.userimg {
  box-shadow: 0 0 5px var(--userimg-shadow-color);
  margin-top: 5px;
  margin-right: 5px;
}

.hu60_face {
  box-shadow: none !important;
}

.topic-status {
  display:inline-block;
  border: 1px solid var(--classic-topic-status-border);
  font-size: 12px;
  line-height: 12px;
  color: var(--classic-topic-status-color);
  padding: 2px;
  border-radius: 3px;
}