@-webkit-keyframes skTag {
  33% {
    margin-right: 0 10px;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
  50% {
    border: 0;
    border-radius: 50%;
    font-size: 1.5em;
    color: #42b983;
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
  }
  100% {
    zoom: 1.2;
  }
}
@keyframes skTag {
  33% {
    margin-right: 0 10px;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
  50% {
    border: 0;
    border-radius: 50%;
    font-size: 1.5em;
    color: #42b983;
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
  }
  100% {
    zoom: 1.2;
  }
}
@-webkit-keyframes skAct {
  33% {
    zoom: 1.1;
    margin-right: 0 10px;
    opacity: 0.899;
    -webkit-transform: rotateZ(-80deg);
            transform: rotateZ(-80deg);
  }
  50% {
    zoom: 1.2;
    border: 0;
    opacity: 0.5;
    -webkit-transform: rotateZ(-120deg);
            transform: rotateZ(-120deg);
  }
  77% {
    zoom: 1.3;
    opacity: 0;
  }
}
@keyframes skAct {
  33% {
    zoom: 1.1;
    margin-right: 0 10px;
    opacity: 0.899;
    -webkit-transform: rotateZ(-80deg);
            transform: rotateZ(-80deg);
  }
  50% {
    zoom: 1.2;
    border: 0;
    opacity: 0.5;
    -webkit-transform: rotateZ(-120deg);
            transform: rotateZ(-120deg);
  }
  77% {
    zoom: 1.3;
    opacity: 0;
  }
}
@-webkit-keyframes showBtn {
  0% {
    border-radius: 50%;
    zoom: 0.001;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    border-radius: 4px;
    zoom: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes showBtn {
  0% {
    border-radius: 50%;
    zoom: 0.001;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    border-radius: 4px;
    zoom: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes skTxta {
  0% {
    opacity: 0.7;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  33% {
    padding-left: 1px;
    opacity: 0.765;
    -webkit-transform: scale(0.999);
            transform: scale(0.999);
  }
  50% {
    padding-top: 1px;
    opacity: 0.8;
    -webkit-transform: scale(0.997);
            transform: scale(0.997);
  }
  80% {
    opacity: 0.765;
    -webkit-transform: scale(0.998);
            transform: scale(0.998);
  }
  100% {
    opacity: 0.7;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes skTxta {
  0% {
    opacity: 0.7;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  33% {
    padding-left: 1px;
    opacity: 0.765;
    -webkit-transform: scale(0.999);
            transform: scale(0.999);
  }
  50% {
    padding-top: 1px;
    opacity: 0.8;
    -webkit-transform: scale(0.997);
            transform: scale(0.997);
  }
  80% {
    opacity: 0.765;
    -webkit-transform: scale(0.998);
            transform: scale(0.998);
  }
  100% {
    opacity: 0.7;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes drpGlobe {
  33% {
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
    opacity: 0.9;
  }
  50% {
    top: 50%;
    font-size: 1.5em;
    opacity: 0.7;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
  77% {
    opacity: 0.9;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
  100% {
    opacity: 1;
  }
}
@keyframes drpGlobe {
  33% {
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
    opacity: 0.9;
  }
  50% {
    top: 50%;
    font-size: 1.5em;
    opacity: 0.7;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
  77% {
    opacity: 0.9;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes showHint {
  0% {
    zoom: 1;
    opacity: 0.999;
    -webkit-transform: skew(20deg);
            transform: skew(20deg);
  }
  33% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  50% {
    zoom: 0.999;
    color: #f9fafc;
    opacity: 0.8;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  77% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    color: #99a9bf;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    zoom: 1;
    opacity: 0.1;
    -webkit-transform: skew(30deg);
            transform: skew(30deg);
  }
}
@keyframes showHint {
  0% {
    zoom: 1;
    opacity: 0.999;
    -webkit-transform: skew(20deg);
            transform: skew(20deg);
  }
  33% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  50% {
    zoom: 0.999;
    color: #f9fafc;
    opacity: 0.8;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  77% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    color: #99a9bf;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    zoom: 1;
    opacity: 0.1;
    -webkit-transform: skew(30deg);
            transform: skew(30deg);
  }
}
@-webkit-keyframes tfIcon {
  50% {
    font-size: 1em;
    opacity: 0;
  }
}
@keyframes tfIcon {
  50% {
    font-size: 1em;
    opacity: 0;
  }
}
.clearfix::after {
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  content: '.';
}
.clearfix {
  zoom: 1;
}
.line {
  clear: both;
  height: 1px;
  background-color: #42b983;
}
.light-line {
  clear: both;
  height: 1px;
  background-color: #87d86b;
}
.text-line-40 {
  position: relative;
  font-size: 0.8em;
  letter-spacing: 1px;
  text-align: center;
  color: #42b983;
}
.text-line-40::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40%;
  height: 1px;
  background-color: #87d86b;
  content: '';
}
.text-line-40::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 40%;
  height: 1px;
  background-color: #87d86b;
  content: '';
}
.text-line-35 {
  position: relative;
  font-size: 0.8em;
  letter-spacing: 1px;
  text-align: center;
  color: #42b983;
}
.text-line-35::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 35%;
  height: 1px;
  background-color: #87d86b;
  content: '';
}
.text-line-35::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 35%;
  height: 1px;
  background-color: #87d86b;
  content: '';
}
.tdu {
  color: #42b983;
  text-decoration: none;
}
.tdu:hover {
  text-decoration: underline;
}
.btn-default {
  color: #8492a6 !important;
  text-align: center;
}
.btn-default:hover,
.btn-default:focus {
  border-color: #42b983 !important;
  color: #42b983 !important;
}
.btn-act {
  border-color: rgba(66,185,131,0.8) !important;
  color: rgba(66,185,131,0.8) !important;
}
.btn-act:focus,
.btn-act:hover {
  border-color: rgba(66,185,131,0.8) !important;
}
.btn-act i {
  color: rgba(66,185,131,0.8);
}
.btn-can {
  color: #99a9bf !important;
  background-color: #fff !important;
  transition: all 0.15s;
}
.btn-can:hover,
.btn-can:focus {
  border-color: #99a9bf !important;
  color: #8492a6 !important;
}
.btn-pub {
  color: #fff !important;
  background-color: #42b983 !important;
  border-color: #42b983 !important;
  transition: all 0.2s;
}
.btn-pub:hover,
.btn-pub:focus {
  color: #fff !important;
  background-color: #f7ba2a !important;
  border-color: #f7ba2a !important;
}
.c-form input,
.c-form textarea {
  color: #42b983;
}
.c-form input:hover,
.c-form textarea:hover,
.c-form input:focus,
.c-form textarea:focus {
  border-color: #42b983;
}
.c-form input::-webkit-input-placeholder,
.c-form textarea::-webkit-input-placeholder {
  font-size: 0.8em;
}
.c-form input:-ms-input-placeholder,
.c-form textarea:-ms-input-placeholder {
  font-size: 0.8em;
}
.c-form input::placeholder,
.c-form textarea::placeholder {
  font-size: 0.8em;
}
.c-form button {
  font-size: 0.8em;
  color: #8492a6;
  transition: all 0.2s;
}
.c-form button:hover,
.c-form button:focus {
  border-color: #42b983;
  color: #42b983;
}
.c-form .is-error input,
.c-form .is-error textarea {
  border-color: #ff7352 !important;
}
.c-form .el-form-item__error {
  color: #ff7352;
}
.c-form .el-form-item__label::before {
  content: '' !important;
}
.c-form .is-checked span,
.c-form .is-indeterminate span {
  border-color: #42b983 !important;
  background-color: #42b983 !important;
  transition: all 0.3s ease;
}
.c-form .el-radio__inner:hover,
.c-form .el-radio__inner:focus {
  border-color: #42b983 !important;
}
.c-form .el-checkbox__inner:hover,
.c-form .el-checkbox__inner:focus,
.c-form .el-checkbox__inner:visited {
  border-color: #42b983 !important;
}
.c-form .is-focus span {
  border-color: #42b983 !important;
}
.c-form .is-focus span:hover,
.c-form .is-focus span:focus {
  border-color: #42b983 !important;
}
.c-quill .ql-editor {
  min-height: 300px;
  border: 1px solid #c0ccda;
  border-radius: 5px;
  color: #42b983;
}
.c-msg .el-message__closeBtn:hover {
  color: #42b983;
}
.c-confirm .el-message-box__header i:hover,
.c-confirm .el-message-box__header i:focus {
  color: #42b983;
}
.c-popper .hover {
  color: #f9fafc;
  background-color: #42b983 !important;
}
.c-popper .selected {
  background-color: #42b983 !important;
}
.c-popper li:hover {
  color: #f9fafc;
  background-color: #42b983 !important;
}
.c-popper li:focus {
  background-color: #42b983 !important;
}
.c-reply .el-dialog__header>span {
  color: #8492a6;
}
.c-reply .el-dialog__header i:hover,
.c-reply .el-dialog__header i:focus {
  color: #42b983;
}
.c-reply .header {
  color: #8492a6;
  margin-bottom: 10px;
}
.c-reply .header .receiver {
  font-weight: bold;
  letter-spacing: 2px;
  color: #42b983;
}
.c-tags {
  display: inline-block;
}
.c-tags>i {
  color: rgba(66,185,131,0.8);
}
.c-tags .tag {
  margin-right: 5px;
  border-color: #c0ccda;
  color: #8492a6;
  background-color: inherit;
  cursor: pointer;
}
.c-tags .tag:hover {
  -webkit-animation: skTag 1s cubic-bezier(1, 0.8, 0.5, 1);
          animation: skTag 1s cubic-bezier(1, 0.8, 0.5, 1);
}
.c-progress .el-progress-circle__path {
  stroke: #42b983 !important;
}
.c-progress .el-progress__text {
  color: #42b983;
}
.c-select .el-input__inner:focus {
  border-color: #42b983 !important;
}
.c-dialog i:hover,
.c-dialog i:focus {
  color: #42b983 !important;
}
.c-loading svg circle {
  stroke: #42b983 !important;
}
.c-loading .el-loading-text {
  color: #42b983 !important;
}
.c-note {
  border: 1px solid #87d86b;
}
.c-note .el-notification__closeBtn:hover {
  color: #42b983;
}
.el-alert {
  border-radius: 0;
}
.el-date-picker__header button:hover,
.el-date-picker__header span:hover,
.el-date-picker__header button:focus,
.el-date-picker__header span:focus {
  color: #42b983 !important;
}
.el-picker-panel__content .el-date-table td {
  border-color: #42b983 !important;
}
.el-picker-panel__content .el-date-table td:hover,
.el-picker-panel__content .el-date-table td:focus {
  border-radius: 50%;
  border: 1px solid #42b983 !important;
  color: #42b983 !important;
  background-color: #fff !important;
  transition: all 0.5s ease;
}
.el-picker-panel__content .el-date-table .current:not(.disabled),
.el-picker-panel__content .el-date-table .today {
  border-radius: 50%;
  border: 1px solid #42b983 !important;
  color: #fff !important;
  background-color: #42b983 !important;
}
.el-picker-panel__content .el-date-table .today::before {
  border-top-color: #42b983 !important;
}
.el-picker-panel__content .el-month-table .cell:hover,
.el-picker-panel__content .el-year-table .cell:hover,
.el-picker-panel__content .el-month-table .cell:focus,
.el-picker-panel__content .el-year-table .cell:focus {
  border-radius: 50%;
  border: 1px solid #42b983 !important;
  color: #42b983 !important;
  background-color: #fff !important;
  transition: all 0.7s ease;
}
.el-picker-panel__content .el-month-table .current:not(.disabled) .cell,
.el-picker-panel__content .el-year-table .current:not(.disabled) .cell {
  border-radius: 50%;
  border: 1px solid #42b983 !important;
  color: #fff !important;
  background-color: #42b983 !important;
}
.el-dropdown-menu .el-dropdown-menu__item {
  font-size: 0.8em;
  color: #8492a6;
}
.el-dropdown-menu .el-dropdown-menu__item i {
  margin-right: 5px;
}
.el-dropdown-menu .el-dropdown-menu__item:hover {
  color: #fff;
  background-color: #42b983;
}
.el-dropdown-menu a {
  text-decoration: none;
}
.el-transfer button:not(.is-disabled) {
  border-color: #42b983 !important;
  color: #fff !important;
  background-color: #42b983 !important;
}
.el-transfer button:not(.is-disabled):hover {
  background-color: #42b983 !important;
}
.c-table .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding: 0 20px;
  margin-bottom: 20px;
}
.c-table .header .search {
  width: 300px;
}
.c-table .header .actions button {
  margin-left: 20px;
  border: 0;
  border-radius: 5px;
  color: #fff;
}
.c-table .header .actions button:hover {
  -webkit-animation: rotateBtn 0.5s cubic-bezier(1, 0.5, 0.8, 1);
          animation: rotateBtn 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.c-table .header .actions .add {
  background-color: #64c0ff;
}
.c-table .header .actions .edit {
  background-color: #87d86b;
}
.c-table .header .actions .destroy {
  background-color: #ffc741;
}
.c-table .header .actions .refresh {
  background-color: #ff7352;
}
.c-table .main {
  color: #8492a6;
  width: 100%;
}
.c-table .main .actions .cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.c-table .main .actions .cell button {
  padding: 10px;
  width: 33px;
  height: 33px;
  border-radius: 33px;
  text-align: center;
}
.c-table .main .horizontal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.c-table .main .horizontal .el-form-item {
  width: 100%;
  margin-right: 0;
  margin-bottom: 0;
}
.c-table .footer {
  margin: 20px 0;
}
.c-table .footer .el-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.c-table .footer .el-pagination button:not(.disabled):hover,
.c-table .footer .el-pagination button:not(.disabled) > i:hover,
.c-table .footer .el-pagination button:not(.disabled):focus,
.c-table .footer .el-pagination button:not(.disabled) > i:focus {
  color: #42b983;
}
.c-table .footer .el-pagination .el-pager li:not(.active):hover {
  color: #42b983;
}
.c-table .footer .el-pagination .el-pager li.active {
  border-color: #42b983;
  background-color: #42b983;
}
@-webkit-keyframes rotateBtn {
  16% {
    border-radius: 7px;
  }
  33% {
    border-radius: 10px;
    -webkit-transform: rotateZ(-75deg);
            transform: rotateZ(-75deg);
  }
  50% {
    border-radius: 20px;
    font-size: 1em;
  }
  77% {
    -webkit-transform: rotateZ(75deg);
            transform: rotateZ(75deg);
  }
  100% {
    border-radius: 5px;
  }
}
@keyframes rotateBtn {
  16% {
    border-radius: 7px;
  }
  33% {
    border-radius: 10px;
    -webkit-transform: rotateZ(-75deg);
            transform: rotateZ(-75deg);
  }
  50% {
    border-radius: 20px;
    font-size: 1em;
  }
  77% {
    -webkit-transform: rotateZ(75deg);
            transform: rotateZ(75deg);
  }
  100% {
    border-radius: 5px;
  }
}
body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'monaco', 'menlo', serif, sans-serif;
  font-size: 16px;
  background-color: #fff;
}
#app {
  height: 100%;
}
/* login */
.df-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  background-color: #1f2d3d;
}
/* header */
.df-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: 50px;
  padding: 0 20px;
  border-bottom: 3px solid #42b983;
  line-height: 50px;
  color: #42b983;
  background-color: #fff;
}
.df-header .logo > a {
  text-decoration: none;
  color: #42b983;
}
.df-header .user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.df-header .user .name {
  position: relative;
  margin: 0 30px 0 20px;
  text-shadow: 1px 1px 1px #808080;
  color: #1f2d3d;
}
.df-header .user .name::before {
  position: absolute;
  top: 0;
  left: -15px;
  color: #ffc741;
  content: '\201C';
}
.df-header .user .name::after {
  position: absolute;
  top: 0;
  right: -15px;
  color: #ffc741;
  content: '\201D';
}
.df-header .user .menu {
  height: 50px;
  overflow: hidden;
}
.df-header .user .menu .avatar {
  width: 40px;
  height: 40px;
  margin-top: 5px;
  border-radius: 40px;
  cursor: pointer;
}
/* main */
.df-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  min-height: 100%;
}
.df-main .df-content {
  width: 100%;
  padding: 20px;
}
.df-main .df-content .breadcrumb {
  margin-bottom: 20px;
}
.df-main .df-content .breadcrumb a {
  text-decoration: none;
}
.df-main .df-content .breadcrumb a:hover {
  color: #f7ba2a !important;
}
.df-main .df-content .breadcrumb i {
  margin-right: 2px;
}
/* home */
.df-home .statistics {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.df-home .statistics .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 25%;
  margin-right: 50px;
  padding: 20px;
  border: 1px solid #eff2f7;
  border-radius: 3px;
  text-align: center;
}
.df-home .statistics .box i {
  font-size: 5em;
  color: #42b983;
}
.df-home .statistics .box i:hover {
  cursor: pointer;
  -webkit-animation: tfIcon 4s ease;
          animation: tfIcon 4s ease;
}
.df-home .statistics .box span {
  margin-top: 20px;
  font-size: 2em;
  color: #8492a6;
}
.df-home .main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin-top: 50px;
}
.df-home .main .lately {
  width: 25%;
}
.df-home .main .lately .billboard {
  margin-bottom: 20px;
  border-bottom: 1px solid #eff2f7;
  color: #8492a6;
}
.df-home .main .lately .billboard i {
  margin-right: 20px;
  color: #ff7352;
}
.df-home .main .lately .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 10px 0;
}
.df-home .main .lately .item .publish-time {
  font-size: 0.7em;
  color: #8492a6;
}
.df-home .main .lately .item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 40px;
}
/* user */
.df-user-wrapper .avatar-wrapper {
  position: absolute;
  top: 20%;
  left: 20%;
}
.df-user-wrapper .avatar-wrapper .avatar {
  width: 200px;
  height: 200px;
  border-radius: 200px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  cursor: pointer;
}
.df-user-wrapper .df-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.df-user-wrapper .df-user .item {
  margin: 0 auto;
  padding: 10px 0;
}
.df-user-wrapper .df-user .item label {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #8492a6;
}
.df-user-wrapper .df-user .item p {
  display: inline-block;
  margin: 0;
  padding: 10px;
  border-bottom: 1px dashed #87d86b;
  color: #42b983;
}
.df-user-wrapper .df-user .item p .default {
  color: #f7ba2a;
}
/* 诗文详情 */
.df-poemView,
.df-appreciationView {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #eff2f7;
  color: #8492a6;
}
.df-poemView .title,
.df-appreciationView .title {
  margin: 10px 0;
  font-size: 2em;
}
.df-poemView .poem,
.df-appreciationView .poem {
  font-size: 0.8em;
  margin-bottom: 5px;
}
.df-poemView .info,
.df-appreciationView .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  font-size: 0.8em;
}
.df-poemView .info .item,
.df-appreciationView .info .item {
  margin-right: 10px;
}
.df-poemView .info .item i,
.df-appreciationView .info .item i {
  margin-right: 5px;
}
.df-poemView .main,
.df-appreciationView .main {
  padding: 20px 0;
  word-break: break-all;
}
.df-poemView a,
.df-appreciationView a {
  text-decoration: none;
  color: #42b983;
}
