html {
  height: 100%;
  --main-width: 1320px;
  --fontsize12: 12px;
  --ccolor: #282c37;
  --descolor: #666;
  --light: #fff;
  --tag: #c1121f;
  --tag-hover: #780000;
  --link: #669bbc;
  --button-secondary-text: #000;
  --secondary: #fdf0d5;
  --secondary-hover: #ffb703;
}
.main-container {
    width: 100%; 
    max-width: var(--main-width); 
    margin: auto; 
    flex-grow:1;
}
.cursor-pointer {
  cursor: pointer;
}

label.error {
  color: red;
  margin-top: 5px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  padding-right: 10px;
  padding-left: 10px;
}

.btn-info {
  color: #fff;
}

.btn-info:hover {
  color: #fff;
}

.hide {
  display: none;
}

div {
  word-break: break-all;
  /*支持IE，chrome，FF不支持*/
  word-wrap: break-word;
  /*支持IE，chrome，FF*/
}

body {
  font-family: "Microsoft YaHei";
  background: #f2f2f2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flip-x {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
}

.flip-y {
  -moz-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
}

*:focus {
  outline: none;
}

textarea {
  resize: none;
}

.shadow {
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#333,direction=120,strength=3);
  -moz-box-shadow: 0px 0px 12px #333;
  -webkit-box-shadow: 0px 0px 12px #333;
  box-shadow: 0px 0px 12px #333;
}
.button-secondary {
  color: var(--button-secondary-text);
  background-color: var(--secondary);
  border: 0;
  border-radius: 0%;
}
.button-secondary:hover {
  color: var(--light);
  background-color: var(--secondary-hover);
}
.button-secondary:active {
  color: var(--light) !important;
  background-color: var(--secondary-hover) !important;
}
.top-nav-container {
  width: 100%;
  background: #393d49 !important;
  border-bottom: 2px solid #333;
  height: 30px;
}

.header-container {
  background-color: #fff;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 20px;
}

.header {
  max-width: var(--main-width);
  margin: auto;
}

.footer-container {
  width: 100%;
  border-top: 1px solid #e2e2e2;
  margin-top: 20px;
}

.footer {
  max-width: var(--main-width);
  padding: 10px;
  margin: auto;
}

.footer .footer-link {
  text-align: center;
}

.footer .footer-link a {
  text-decoration: none;
  color: var(--ccolor);
  padding: 0px 5px;
}

.footer .footer-link a:hover {
  color: #777;
}

.copyright {
  color: var(--ccolor);
  text-align: center;
  font-size: var(--fontsize12);
}

.copyright a {
  color: var(--bs-primary);
  text-decoration: none;
}

.media {
  padding-bottom: 18px;
  margin: 25px 0px;
  border-bottom: 1px dotted #e2e2e2;
}

.media .media-heading {
  margin-bottom: 10px;
}

.media .media-heading a {
  color: var(--ccolor);
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}

.media .media-heading a:hover {
  color: var(--ccolor);
  text-decoration: none;
}

.media .text-main {
  padding: 4px 0px 0px 0px;
  font-size: var(--fontsize12);
}

.media .media-body .text-description {
  text-indent: 2em;
  line-height: 26px;
  font-size: var(--fontsize12);
}

.media-left {
  padding-right: 20px;
}

.media-left a img {
  width: 180px;
  height: 120px;
}

.right-group {
  margin: 0px;
  padding: 15px;
  border: 0px;
  border-radius: 0px;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.right-item .glyphicon {
  color: var(--bs-primary);
}

.right-item:first-child {
  border: 0px;
  font-size: 14px;
  padding: 0px 0px 10px 0px;
  border-bottom: 1px dotted #e2e2e2;
  margin-bottom: 5px;
}

a.right-item {
  border: 0px;
  padding: 5px 0px;
  color: var(--ccolor);
  display: block;
  text-decoration: none;
  font-size: var(--fontsize12);
}

a.right-item img {
  float: left;
  width: 40%;
  margin-right: 10px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=3);
  -moz-box-shadow: 0px 0px 12px #ccc;
  -webkit-box-shadow: 0px 0px 12px #ccc;
  box-shadow: 0px 0px 12px #ccc;
}

a.right-item:hover {
  color: #000;
}

a.right-item:focus {
  color: #000;
}

.navbar-nav li a {
  font-size: 16px;
}

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

.text-a: hover {
  color: var(--link);
}

.text-main {
  color: var(--link);
  font-size: var(--fontsize12);
}

.glyphicon {
  color: #ccc;
}

.text-main .text-main-tags a {
  color: var(--tag);
  text-decoration: none;
  font-size: var(--fontsize12);
}

.text-main .text-main-tags a:hover {
  color: var(--tag-hover);
}

.content-title {
  font-size: 18px;
  line-height: 32px;
  font-weight: bold;
  color: var(--ccolor);
  margin-top: 0px;
}

.content-container {
  padding: 15px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.acontent {
  padding: 15px 0px;
  font-size: 14px;
}

.acontent ul li p {
  text-indent: 0;
}

.acontent ol li p {
  text-indent: 0;
}

.acontent p {
  text-indent: 2em;
  line-height: 2;
}

.acontent ul li{
  line-height: 2;
  margin-left: 2em;
}

.acontent ol li {
  line-height: 2;
  margin-left: 2em;
}

.acontent img {
  display: block;
  max-width: 90%;
  padding: 0px;
  margin: 5px auto;
}

.acontent h2 {
  font-size: 16px;
  font-weight: bold;
  text-indent: 2em;
  margin-bottom: 1rem;
}

.acontent h3,
.acontent h4,
.acontent h5,
.acontent h6,
.acontent h7,
.acontent h8,
.acontent h9 {
  font-size: 14px;
  font-weight: bold;
  text-indent: 2em;
  margin-bottom: 1rem;
}

.acontent a {
  text-decoration: none;
}

.breadcrumb {
  border-radius: 0px;
  margin: 0px;
  padding: 15px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fontsize12);
}

.breadcrumb a {
  color: var(--ccolor);
  text-decoration: none;
  font-size: var(--fontsize12);
}

.breadcrumb a:hover {
  color: #555;
}

.return {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: var(--fontsize12);
  color: var(--bs-primary);
  text-decoration: none;
}

.return:hover {
  color: var(--bs-primary-hover);
  text-decoration: none;
}

.return:focus {
  color: var(--bs-primary-hover);
  text-decoration: none;
}

.comments-container {
  padding: 15px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.comments-container textarea {
  width: 100%;
  margin: 10px 0px 10px 0px;
  border: 1px solid var(--bs-primary);
  padding: 10px;
  border-radius: 4px;
}

.comments-container .comment-header {
  color: var(--bs-primary);
  font-size: 14px;
  padding: 10px 0px 10px 0px;
  text-decoration: none;
  display: block;
}

.comments-container .comment-header:hover {
  color: #23527c;
}

.submit-container {
  text-align: right;
}

.comment-list {
  margin-bottom: 10px;
  font-size: var(--fontsize12);
}

.comment-list span {
  color: var(--bs-primary);
  padding-right: 5px;
}

.comment-list span.glyphicon {
  color: #ccc;
}

.comment-list time {
  color: #ccc;
  padding-right: 5px;
}

.comment-list a {
  color: var(--bs-primary);
  text-decoration: none;
}

.comment-list a:hover {
  color: #5dc1fb;
}

.comment-list ul {
  margin: 5px 0px 5px 15px;
  padding: 0px;
}

.comment-list .comment-list-parent {
  margin: 0px;
}

.comment-list ul li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.comment-list ul li .comment-target {
  text-align: right;
}

.comment-list ul .comment-list-item-parent {
  border-bottom: 1px solid #e8e8e8;
  padding: 15px 0 5px 0;
}

.comment-list a.submit-target {
  background: var(--bs-primary);
  color: var(--light);
  border-radius:0%;
  padding: 5px 10px;
  text-decoration: none;
}

.comment-list a.submit-target:hover {
  background: var(--bs-primary-hover);
}

.comment-list a.submit-target-cancel {
  background: var(--secondary);
  color: var(--button-secondary-text);
  border-radius:0%;
  padding: 5px 10px;
  text-decoration: none;
}

.comment-list a.submit-target-cancel:hover {
  background: var(--secondary-hover);
  color: var(--light);
}

.verificationCodeImage {
  cursor: pointer;
}

.verificationCode {
  border: 1px solid var(--bs-primary);
  width: 64px;
  padding: 4px;
  margin: 0px 5px;
}

.flashimages {
  width: 100%;
  margin: 0px 0px 20px 0px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#888,direction=120,strength=3);
  -moz-box-shadow: 0px 0px 12px #888;
  -webkit-box-shadow: 0px 0px 12px #888;
  box-shadow: 0px 0px 12px #888;
}

.flashimages .flashimages-container {
  width: 100%;
  position: relative;
}

.flashimages .flashimages-container img {
  width: 100%;
}

.flashimages .flashimages-container .flashimages-description {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 0.8% 15px;
  background-image: url(../Image/tm.png);
  color: #fff;
  font-size: var(--fontsize12);
}

.listdiv {
  padding: 15px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.loadmore-div {
  text-align: center;
  padding: 10px 0px;
}

.loadmore-div #loadmore {
  color: var(--bs-primary);
  text-decoration: none;
  line-height: 2;
  border-radius: 3px;
}

.user-centre-menu {
  margin: 0;
  list-style: none;
  padding: 15px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.user-centre-menu li {
  font-size: 14px;
  padding: 6px 12px;
  margin: 5px 10px 5px 0;
}

.user-centre-menu li a {
  color: var(--ccolor);
  text-decoration: none;
}

.user-centre-menu li.current {
  background: #393d49 !important;
  color: #fff;
}

.user-centre-menu li.current a {
  color: #fff;
}

.user-centre-content {
  padding: 15px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.control-span {
  padding-top: 7px;
  margin-bottom: 0;
  display: inline-block;
}

.user-centre-content .user-centre-content-list {
  padding: 0px;
  margin: 0px;
}

.user-centre-content .user-centre-content-list li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  border-bottom: 1px dotted #e2e2e2;
}

.user-centre-content .user-centre-content-list li p {
  font-size: var(--fontsize12);
}

.user-centre-content .user-centre-content-list li p .comment-username {
  color: var(--bs-primary);
}

.user-centre-content .user-centre-content-list li h4 span {
  font-size: 14px;
}

.user-centre-content .user-centre-content-list li h4 a {
  color: var(--ccolor);
  text-decoration: none;
  font-size: 14px;
}

.user-centre-content .user-centre-content-list li .right-tools {
  display: block;
  float: right;
}

.user-centre-content .user-centre-content-list li .right-tools a {
  text-decoration: none;
}

.user-centre-content .user-centre-content-list li .right-tools .glyphicon {
  color: #337ab7;
}

.user-centre-content .user-centre-filter {
  padding-bottom: 20px;
  border-bottom: 1px dotted #e2e2e2;
}

.to-top {
  position: fixed;
  right: 50%;
  top: 50%;
  margin-top: 200px;
  margin-right: -690px;
  width: 24px;
  text-align: center;
  background: #393d49 !important;
  padding: 5px 2px;
  display: none;
}

.to-top a {
  color: #fff;
  text-decoration: none;
  font-size: var(--fontsize12);
}

.friend-link {
  line-height: 24px;
  padding: 10px 0;
}

.friend-link span {
  font-weight: bold;
}

.friend-link a {
  padding: 0 10px;
  text-decoration: none;
  color: var(--descolor);
}

.index-group {
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.index-group-title {
  font-size: 14px;
  padding: 15px;
  border-bottom: 1px dotted #e2e2e2;
  margin-bottom: 5px;
}

.index-group-title a {
  float: right;
  text-decoration: none;
  font-size: var(--fontsize12);
}

.index-group-content {
  padding: 0 15px 15px 15px;
}

.index-group-content ul {
  margin: 0px;
  padding: 0px;
}

.index-group-content ul li {
  margin: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 0px;
  font-size: 14px;
}
.index-group-content ul li a:first-child {
  float: left;
  margin-right: 3px;
}
.index-group-content ul li a {
  color: var(--ccolor);
  text-decoration: none;
}

.index-group-content ul li a:hover {
  color: #000;
}

.index-group-content ul li span:last-child {
  float: right;
  color: var(--descolor);
}

.index-group-content ul li span.bi {
  float: left;
  margin-right: 3px;
}

.tag-content a {
  display: block;
  float: left;
  padding: 3px 8px;
  margin: 5px;
  background: #f2f2f2;
  color: var(--ccolor);
  font-size: var(--fontsize12);
  text-decoration: none;
}

.tag-content a:hover {
  background: var(--bs-primary);
  color: #fff;
}

.userdiv {
  padding: 8px 0;
  font-size: var(--fontsize12);
}

.userinfo-lv {
  float: left;
  padding: 5px 0;
  width: 50%;
}

.userinfo-exp {
  float: left;
  padding: 5px 0;
  width: 100%;
}

.userinfo-type {
  float: right;
  width: 50%;
  padding: 5px 0;
}

.userinfo-portrait {
  width: 56px;
  height: 56px;
  overflow: hidden;
  float: left;
}

.userinfo-portrait img {
  width: 100%;
  height: 100%;
}

.userinfo {
  padding-left: 68px;
  height: 56px;
  margin-bottom: 10px;
}

.userinfo a {
  text-decoration: none;
}

.userinfo div {
  padding-bottom: 15px;
}

.userinfo div:last-child {
  padding-bottom: 0px;
}

.userinfo .nickname a {
  color: var(--ccolor);
  font-weight: bold;
}

.listtable .twoline {
  font-size: var(--fontsize12);
  line-height: 16px;
  white-space: nowrap;
}

.listtable {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
}

.listtable td,
th {
  padding: 5px;
}

.listtable tr {
  border-bottom: 1px solid #e7e7e7;
}

.listtable a {
  color: var(--ccolor);
  text-decoration: none;
}

.listtable a:hover {
  color: #000;
}

.listtable .postdate {
  color: var(--descolor);
}

.forums-filters {
  border: 1px solid #e2e2e2;
  padding: 15px 10px;
  margin-bottom: 10px;
  position: relative;
}

.forums-filters h1 {
  font-size: 16px;
  font-weight: bold;
  margin: 0px;
  padding: 0 0 8px 0;
}

.forums-filters span {
  font-size: var(--fontsize12);
}

.forums-filters a {
  position: absolute;
  right: 10px;
  top: 20px;
}

.forums-filters button {
  position: absolute;
  right: 10px;
  top: 20px;
  border:none;
  background-color: var(--bs-primary);
  color: var(--light);
}

.forums-filters button:hover {
  background-color: var(--bs-primary-hover);
}
.forums-filters button:active {
  background-color: var(--bs-primary-hover) !important;
}

.post-container {
  width: 100%;
  max-width: 100%;
}

.post-container .post-portrait {
  width: 50px;
  float: left;
}

.post-container .post-portrait img {
  width: 100%;
}
.post-container .post-title .postdate {
  color: #666;
  font-size: 0.75rem;
}
.post-bar {
  text-align: right;
}

.post-bar a {
  text-decoration: none;
  color: #ccc;
}

.post-bar a:hover {
  color: var(--bs-primary);
}

.post-title h1 {
  font-size: 18px;
  font-weight: bold;
  color: var(--ccolor);
  margin-top: 0px;
  margin-bottom: 0.25rem;
}

.post-content {
  font-size: 14px;
}

.post-content h2 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 1rem;
}

.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.post-content h7,
.post-content h8,
.post-content h9 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 1rem;
}

.post-content p {
  text-indent: 2em;
  line-height: 2;
}

.post-content ul li{
  line-height: 2;
  margin-left: 2em;
}

.post-content ol li {
  line-height: 2;
  margin-left: 2em;
}

.post-content a {
  text-decoration: none;
}

.post-content img {
  display: block;
  max-width: 90%;
  padding: 0;
  margin: 5px auto;
}

.list-pagination {
  text-align: right;
}

.list-pagination .pagination {
  margin: 10px 0 0 0;
}

.index-imgs {
  float: left;
  width: 50%;
  height: 92px;
  margin: 5px 0;
  color: var(--descolor);
  font-size: var(--fontsize12);
  line-height: 20px;
  padding-right: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.index-imgs .index-imgcontent-img img {
  height: 76px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=3);
  -moz-box-shadow: 0px 0px 12px #ccc;
  -webkit-box-shadow: 0px 0px 12px #ccc;
  box-shadow: 0px 0px 12px #ccc;
  display: block;
  float: left;
  margin-right: 15px;
  margin-top: 7px;
}

.index-imgs .index-imgcontent-title {
  font-size: 14px;
  text-decoration: none;
  color: var(--ccolor);
  line-height: 28px;
}

.index-imgs .index-imgcontent-title:hover {
  color: #000;
}

.index-imgs span {
  color: var(--ccolor);
}

.index-items {
  float: left;
  width: 50%;
  margin: 5px 0;
  padding-right: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index-items a {
  font-size: 14px;
  color: var(--ccolor);
  text-decoration: none;
}

.forums .forum {
  width: 50%;
  float: left;
  margin-bottom: 15px;
  display: flex;
}

.forum-image {
  width: 42px;
  float: left;
  flex-shrink: 0;
}

.forum-image img {
  width: 100%;
}

.forum-info {
  float: left;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forum-info .forum-name {
  display: block;
  line-height: 24px;
  text-decoration: none;
  color: var(--bs-body-color);
  font-size: var(--fontsize12);
  font-weight: bold;
}

.forum-info .forum-quantity {
  display: block;
  line-height: 24px;
  font-size: var(--fontsize12);
}

.forum-info .new-post {
  line-height: 24px;
  font-size: var(--fontsize12);
  text-decoration: none;
}

@media (max-width: 768px) {
  .index-items {
    width: 100%;
  }

  .index-imgs {
    width: 100%;
    height: auto;
  }

  .forums .forum {
    width: 100%;
    padding: 10px 0;
    margin-bottom: 0;
  }
}

@media (max-width: 520px) {
  .index-imgs .index-imgcontent-img {
    display: none;
  }

  .index-imgs {
    margin: 5px 0;
  }

  .index-group-content ul li a:first-child {
    display: none;
  }
}

.right-group .user-items {
  padding: 8px 0px;
}

.right-group .user-items a {
  width: 36px;
  display: block;
  margin-right: 5px;
  margin-bottom: 10px;
  float: left;
  font-size: var(--fontsize12);
  text-decoration: none;
}

.right-group .user-items a span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.right-group .user-items a img {
  width: 36px;
  height: 36px;
}

.userinfo .signin .label-info {
  cursor: pointer;
}

.form-control {
  font-size: var(--fontsize12);
}

.form-select {
  font-size: var(--fontsize12);
}

.tool-bar {
  text-align: right;
  padding: 7px;
}

.tool-bar .tool-bar-item {
  cursor: pointer;
  display: inline-block;
  width: 33px;
  height: 33px;
  border-radius: 4px;
  border: 1px solid #ccc;
  position: relative;
  margin-left: 4px;
}
.tool-bar .tool-bar-button {
    display:inline-block;
    vertical-align: top;
    padding-top: 1px;
    margin-left: 4px;
}

.tool-bar .tool-bar-item .bi {
  position: absolute;
  font-size: 18px;
}

.tool-bar .wechat-item {
  border-color: #7bc549;
  color: #7bc549;
}

.tool-bar .wechat-item:hover {
  color: #fff;
  background: #7bc549;
}

.tool-bar .wechat-item .bi {
  top: 2px;
  left: 7px;
}

.tool-bar .sina-weibo-item {
  border-color: #ff763b;
  color: #ff763b;
}

.tool-bar .sina-weibo-item:hover {
  color: #fff;
  background: #ff763b;
}

.tool-bar .sina-weibo-item .bi {
  top: 3px;
  left: 7px;
}

.tool-bar .zan-item {
  border-color: #db4437;
  color: #db4437;
}

.tool-bar .zan-item .bi {
  top: 5px;
  left: 8px;
  font-size: 16px;
}

.tool-bar .qq-item {
  border-color: #56b6e7;
  color: #56b6e7;
}

.tool-bar .qq-item:hover {
  color: #fff;
  background: #56b6e7;
}

.tool-bar .qq-item .bi {
  top: 2px;
  left: 8px;
}

.tool-bar .favorite-item {
  border-color: orange;
  color: orange;
}

.tool-bar .favorite-item .bi {
  top: 1px;
  left: 7px;
}

.tool-bar .zan-item:hover {
  color: #c7254e;
}

.tool-bar .favorite-item:hover {
  color: orange;
}

.share-box {
  width: 200px;
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
  position: absolute;
  background: #fff;
  z-index: 999;
  color: #282c37;
  top: 50px;
  left: -86px;
}

.share-box img {
  display: block;
  margin-top: 10px;
  margin: auto;
}

.tool-bar p.success {
  color: green;
}

.tool-bar p.fail {
  color: red;
}

.content-items {
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.content-items li a {
  text-decoration: none;
  color: var(--ccolor);
  font-size: var(--fontsize12);
  display: block;
  padding: 5px 0;
}

.content-items ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 16px;
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.login-form {
  width: 100%;
  max-width: 480px;
  padding: 16px;
  margin: auto;
  margin-top: 48px;
}

.login-form-head {
  text-align: center;
}

.login-form h1 {
  margin-top: 0;
  margin-bottom: 32px;
}

.login-form .form-group {
  margin-bottom: 24px;
}

.register-form {
  width: 100%;
  max-width: 480px;
  padding: 16px;
  margin: auto;
  margin-top: 48px;
}

.register-form-head {
  text-align: center;
}

.register-form h1 {
  margin-top: 0;
  margin-bottom: 32px;
}

.register-form .form-group {
  margin-bottom: 24px;
}

.post-reference p:last-child {
  margin-bottom: 0;
}

.fs-7 {
  font-size: 0.75rem;
}

.latest-comments {
  margin: 0;
  padding: 0;
}

.latest-comments li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: 6px;
}

.latest-comments li img {
  width: 40px;
  border-radius: 0.25rem;
  margin-top: 2px;
}

.latest-comments li div {
  width: 0;
  flex-grow: 1;
  padding-left: 0.75rem;
}

.latest-comments li p {
  margin-top: 0;
  margin-bottom: 0;
  word-break: break-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
  font-size: 0.75rem;
}

.latest-comments li p span:last-child {
  color: #ccc;
  padding-left: 4px;
}

#PortraitView {
    position: relative;
}

#PortraitView img {
    width: 128px;
    height: 128px;
}

#resetfile {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: block;
    position: absolute;
    top: 0;
    left: 108px;
    background: red;
    text-decoration: none;
    text-align: center;
    color: white;
}

.content-image:hover {
    cursor: zoom-in;
}

.carousel-inner .carousel-item img {
    max-width: 90%;
}

.carousel-control-prev, .carousel-control-next {
    width: 3%;
}

@media (max-width: 520px) {
  .carousel-inner .carousel-item img {
    max-width: 80%;
  }
  .carousel-control-prev, .carousel-control-next {
    width: 6%;
  }
}