#tinymce-editor{
    word-wrap:break-word;
    word-break:break-all;
}

#latest-use {
    height: 0;
    overflow: hidden;
}


*[disabled],
.disabled {
    cursor: not-allowed;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}


.iconfont {
    font-size: inherit!important;
}
.iconfont.iconfont-2x {
    font-size: 2rem!important;
}
.iconfont.font-normal {
    font-weight: normal!important;
}
.iconfont.iconfont-circle {
    border: 2px solid currentColor;
    border-radius: 100%;
    padding: 5px;
    margin-right: 5px;
}
.iconfont.iconfont-2x.iconfont-circle {
    border-width: 3px;
}
a, a:visited {
    color: #585858;
    text-decoration: none;
}
a:hover {
    color: #006abe;
    text-decoration: none;
}
a.link-default,
a.link-default:visited {
    color: #157dd3;
}
a.link-primary,
a.link-primary:visited {
    color: #006abe;
}
a.link-error,
a.link-error:visited {
    color: #e6162d;
}
a.link-default:hover,
a.link-primary:hover,
a.link-error:hover {
    text-decoration: underline;
}
.link-muted,
.link-muted:visited {
    color: #999;
}
.link-muted:hover {
    color: inherit;
}
.btn.link-btn,
.btn.link-btn:hover {
    color: #157dd3;
    border: 0;
    background-color: transparent;
}
.btn.link-btn:hover {
    text-decoration: underline;
}

abbr {
    text-decoration: none;
    border-bottom: 1px dotted;
    cursor: help;
}
h1 {
    font-size: 2rem;
    margin-top: 0;
}
h2 {
    font-size: 1.8rem;
    margin-top: 0;
}
h3 {
    font-size: 1.35rem;
    margin-top: 0;
}
h4 {
    font-size: 1.15rem;
    margin-top: 0;
}
p {
    margin: 0 0 1rem 0;
}
ul, ol {
    margin: 0;
    padding: 0;
}
ul.inline > li {
    display: inline-block;
}
fieldset {
    margin: 0;
    border: 1px solid #d6d9d9;
}
fieldset > legend {
    padding: 0 8px;
    font-weight: 600;
}
fieldset > .field-body {
    padding: 8px;
}
template {
    display: none;
}

button:focus,
textarea:focus,
input:focus {
  outline: 0;
}

.btn,
a.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    color: #585858;
    background-color: #e4e4e4;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    font-size: .9rem;
    padding: 8px 16px;
    border-radius: 2px;
    line-height: 1;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color .25s;
}

.btn:hover,
a.btn:hover {
    border-color: #b8b8b8;
    color: #242424;
    background-color: #d0d0d0;
    text-decoration: none;
}

.btn.btn-primary,
.btn.btn-primary:visited,
a.btn.btn-primary,
a.btn.btn-primary:visited {
    border-color: #006abe;
    color: #fff;
    background-color: #006abe;
}
.btn.btn-primary:hover,
a.btn.btn-primary:hover {
    border-color: #0051b7;
    background-color: #0051b7;
    text-decoration: none;
}

.btn.btn-outline,
.btn.btn-outline:visited,
a.btn.btn-outline,
a.btn.btn-outline:visited {
    border-color: #999;
    color: #585858;
    background-color: #fff;
}
.btn.btn-outline:hover,
a.btn.btn-outline:hover {
    color: #242424;
    border-color: #777;
    text-decoration: none;
}
.btn-outline.btn-inverse,
.btn-outline.btn-inverse:hover {
    border-color: #fff;
    background-color: transparent;
    color: #fff;
}
.btn-outline.border-2x {
    border-width: 2px;
}

.btn.btn-info,
.btn.btn-info:visited,
a.btn.btn-info,
a.btn.btn-info:visited {
    border-color: #3eb4d8;
    color: #fff;
    background-color: #48c5eb;
}
.btn.btn-info:hover,
a.btn.btn-info:hover {
    border-color: #36a3c4;
    background-color: #34aed3;
    text-decoration: none;
}
.btn.btn-error,
.btn.btn-error:visited,
a.btn.btn-error,
a.btn.btn-error:visited {
  border-color: #cf0d24;
    color: #fff;
    background-color: #e6162d;
}
.btn.btn-error:hover,
a.btn.btn-error:hover {
    border-color: #c7152a;
    background-color: #d8172d;
    text-decoration: none;
}

.btn.btn-sm {
    font-size: .8em;
    padding: 7px 10px;
}
.btn.btn-xs {
    font-size: .75em;
    padding: 5px 6px;
}
.btn.btn-lg {
    font-size: 1em;
    padding: 12px 20px;
}
.btn.btn-block {
    display: block;
    width: 100%;
}
.btn.btn-loading.btn-block {
    display: flex;
}

.btn.disabled,
.btn.disabled:hover,
.btn[disabled],
.btn[disabled]:hover {
    color: #a8a8a8;
    text-shadow: .5px .5px 0 #f8f8f8;
    background-color: #e9e9e9;
    border-color: #c4c4c4;
    cursor: not-allowed;
}
.btn-wrap > .btn + .btn {
    margin-left: 15px;
}
.btn-loading::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: url(../../images/web/xloading.svg) center center transparent;
    background-size: 100%;
    /* 在加了 loading 图标后，让按钮大小保持不变 */
    margin: -2px 4px -2px 0;
    /* 动起来 */
    -webkit-animation: xloading 1s steps(12, end) infinite;
    animation: xloading 1s steps(12, end) infinite;
}

.btn-group {
    display: inline-flex;
    vertical-align: middle;
}
.btn-group > .btn {
    flex: 0 1 auto;
}
.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn + .btn {
    margin-left: -1px;
}

input[type=file] {
    display: block;
}

.row.row-layout > [class*='col-'] + .col-xs-12 {
    margin-top: .6rem;
}

.form-group.form-group-item-center > .row {
    align-items: center;
}
.form-group > .row + .row {
    margin-top: 1rem;
}
.form-group .row > label {
    font-weight: 600;
}
.form-group:not(.static-form-group) .row > label {
    line-height: 2.435;
}
.form-group .row-textarea > label {
    margin-top: 8px;
}
.form-group .row > label.control-label,
.form-group .row > label.option-label {
    line-height: inherit;
}
.form-group.form-group-item-center .row > label {
    line-height: 1.8;
}
.form-group + .form-group {
    margin-top: 1rem;
}

.select2-container.select2-container--default .select2-selection--multiple {
    border-color: #d2d6d6;
    border-radius: .125rem;
    padding: .275rem .5rem;
}
.select2-container.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #006abe;
}
.select2-container.select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 0;
    margin-left: 0;
    padding: .25rem 0;
}
.select2-container.select2-container--default .select2-dropdown {
    border-color: #006abe;
    border-radius: .125rem;
}
.select2-container.select2-container--default.select2-container--open .select2-dropdown--below {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}
.select2-container.select2-container--default.select2-container--open .select2-dropdown--above {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.select2-container.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #006abe;
}
.select2-container.select2-container--default .select2-results__option--selected {
    background-color: #f2f2f4;
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: .125rem;
    margin: .15rem .3rem .15rem 0;
    font-size: .9em;
    border-color: #b4b6b6;
    background-color: #f2f2f4;
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    padding: 0 6px;
    border-right-color: #b4b6b6;
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    display: inline-block;
    padding: .125rem .4rem;
}

.form-control {
    position: relative;
    display: block;
    width: 100%;
    height: calc(2.15rem + 5px);
    padding: .5rem .875rem;
    font-size: .9rem;
    color: #242424;
    border: 1px solid #d2d6d6;
    border-radius: .125rem;
    background-color: #fff;
    transition: border-color .15s ease-in-out;
    -webkit-appearance: none;
}
.form-control:focus {
    border-color: #006abe;
}
.form-control:required,
.form-control:invalid {
    border-color: #f68b87;
    background-color: #fff8f1;
}
.form-control.readonly,
.form-control[readonly],
.form-control.readonly:focus,
.form-control[readonly]:focus,
.form-control.disabled,
.form-control[disabled],
.form-control.disabled:focus,
.form-control[disabled]:focus {
    border-color: #d2d6d6;
    background-color: #f6f6f6;
    color: #999;
}
.form-control.readonly,
.form-control[readonly],
.form-control.readonly:focus,
.form-control[readonly]:focus {
    color: inherit;
}
.form-control.readonly.bg-default,
.form-control[readonly].bg-default,
.form-control.readonly.bg-default:focus,
.form-control[readonly].bg-default:focus {
    background-color: #fff;
}
.form-control::placeholder {
    color: #b9b9bb;
    opacity: 1;
}
.form-control.form-control-lg {
    padding: .7rem .875rem;
    height: 3.3rem;
    font-size: 1.3rem;
}
.form-control.form-control-xl {
    height: 3.8rem;
    font-size: 1.8rem;
}
.form-control.form-control-inverse {
    border-color: #fff;
}

/* Safari */
input[type="search"],
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance:none;
}
select:focus {
    outline: 0;
}
select.form-control {
    padding-right: 28px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") right 12px center no-repeat #fff;
    background-size: 8px 10px;
    line-height: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
}
textarea.form-control,
textarea.form-control.form-control-lg,
textarea.form-control.form-control-xl {
    height: auto;
    resize: none;
}
input[type=text][disabled],
input[type=search][disabled],
input[type=number][disabled],
input[type=url][disabled]
input[type=tel][disabled] {
    background-color: #f2f2f2;
}
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.input-group > .form-control,
.row-control-group .input-group > .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-lg > .form-control {
    height: calc(2.5rem + 2px);
    padding: .715rem .8rem;
    font-size: 1rem;
    border-top-left-radius: .15rem;
    border-bottom-left-radius: .15rem;
}
.input-group-lg > .form-control:focus {
    z-index: 9;
}
.input-group-lg > textarea.form-control {
    height: auto;
}

.input-group-xl > .form-control {
    height: calc(3.25rem + 2px);
    padding: .75rem 1rem;
    font-size: 1.15rem;
    border-top-left-radius: .15rem;
    border-bottom-left-radius: .15rem;
}

.input-group .sp-replacer {
    border: 1px solid #d6d9d9;
    padding-left: 8px;
    padding-right: 6px;
    display: flex;
    align-items: center;
}
.input-group .sp-replacer + .form-control {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-prepend {
    display: flex;
}
.input-group-prepend + input.form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}
.input-group-append {
    display: flex;
    margin-left: -1px;
}
.input-group-append > .btn,
.input-group-append > .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group-append > select {
    height: 100%;
}
.input-group-text {
    display: flex;
    align-items: center;
    background-color: #e8e8e8;
    color: #242424;
    padding: .15rem .7rem;
    border: 1px solid #d2d6d6;
    user-select: none;
    -webkit-user-select: none;
}
.input-group-append > .input-group-text {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
.input-group-prepend > .input-group-text {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.input-group-lg .input-group-append > .input-group-text {
    padding: .15rem .85rem;
    font-size: 1.05em;
}

.callout {
	position: absolute;
	max-width: 20em;
	padding: .5em 1em;
	margin: .6em 0 0 0;
	border-radius: 2px;
	background-color: #fff2e5;
	color: #301c0a;
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
	font-size: .8em;
	transform: scale(0);
	transition: .2s transform;
}

.callout:before {
	content: "";
	position: absolute;
	top: -.45em;
	left: 1.5em;
	padding: .35em;
	background: inherit;
	border: inherit;
	border-right: 0;
	border-bottom: 0;
	transform: rotate(45deg);
}

.callout.expanded {
    transform: scale(1);
	transition: .3s cubic-bezier(.25,.1,.3,1.5) transform;
	transform-origin: 1.4em -.4em;
}

.container.container-fw-xs {
    padding: 0!important;
    overflow: hidden;
}
.row.row-control-group {
    line-height: 1.5;
}
.row-control-group:not(.no-margin) > [class*='col-'] + [class*='col-'] {
    margin-top: 10px;
}
.row-control-group .form-control,
.row-control-group .btn {
    width: 100%;
}
.flex-direction-row {
    flex-direction: row
}
.flex-direction-column {
    flex-direction: column;
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.monospace {
    font-family: Consolas, Menlo, Monaco, courier, monospace;
}

.progress {
    display: flex;
    font-size: .8rem;
    background-color: #fff;
    padding: 2px;
    height: 1.2rem;
    border-radius: 20px;
    border: 1px solid #d8d8d8;
    overflow: hidden;
}
.progress.progress-lg {
    height: 2.5rem;
    padding: 4px;
}
.progress-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #006abe;
    border-radius: 20px;
    color:#242424;
    width: 0;
    text-shadow:1px 0 rgba(255,255,255,.5);
    text-align: center;
    white-space: nowrap;
    transition: width .6s ease;
}
.progress-bar.progress-bar-full-width {
    width: 100%;
}
.progress-bar.progress-bar-success {
    background-color: #52df8a;
}
.progress-bar.progress-bar-error {
    background-color: #e6162d;
    color: #fff;
    text-shadow: none;
}

.progress-bar.progress-bar-animated {
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
}
.progress-bar.progress-bar-striped {
    background-image: linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 2rem 2rem;
}
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 2rem 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 2rem 0;
  }
}

.img-fw-xs {
    width: 100%;
}
.img-circle {
    border-radius: 100%;
}
.img-rounded {
    border-radius: 6px;
}
.img-responsive,
.img-preview {
    max-width: 100%;
    height: auto;
}
.align-right {
    text-align: right;
}

.tooltip {
    position: absolute;
    z-index: 999;
    display: block;
    margin: 0;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .8rem;
    word-wrap: break-word;
}

.tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.tooltip-arrow {
    position: absolute;
    display: block;
    width: .8rem;
    height: .4rem;
}
.tooltip-inner {
    max-width: 200px;
    padding: .15rem .4rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 2px;
}
.tooltip-inner > a,
.tooltip-inner > a:visited {
    color: currentColor!important;
    text-decoration: underline;
}
.tooltip[x-placement^=top] {
    padding: .4rem 0
}
.tooltip[x-placement^=top] .tooltip-arrow {
    bottom: 0;
}
.tooltip[x-placement^=top] .tooltip-arrow::before {
    top: 0;
    border-width: .4rem .4rem 0;
    border-top-color: #000;
}
.tooltip[x-placement^=bottom] {
    padding: .5rem 0;
}
.tooltip[x-placement^=bottom] .tooltip-arrow {
    top: .1rem;
}
.tooltip[x-placement^=bottom] .tooltip-arrow::before {
    bottom: 0;
    border-width: 0 .4rem .4rem;
    border-bottom-color: #000;
}
.tooltip[x-placement^=left] {
    padding: 0 .5rem;
}
.tooltip[x-placement^=left] .tooltip-arrow {
    right: .1rem;
    width: .4rem;
    height: .8rem;
}
.tooltip[x-placement^=left] .tooltip-arrow::before {
    left: 0;
    border-width: .4rem 0 .4rem .4rem;
    border-left-color: #000;
}
.tooltip[x-placement^=right] {
    padding: 0 .5rem;
}
.tooltip[x-placement^=right] .tooltip-arrow {
    left: .1rem;
    width: .4rem;
    height: .8rem;
}
.tooltip[x-placement^=right] .tooltip-arrow::before {
    right: 0;
    border-width: .4rem .4rem .4rem 0;
    border-right-color: #000;
}
.dropdown-container {
    position: relative;
}
.dropdown-panel {
    position: absolute;
    display: none;
    text-align: left;
    margin-top: 3px;
    z-index: 9999;
}
.dropdown-panel.with-caret {
    margin-top: 10px;
}
.dropdown-panel.with-caret::before,
.dropdown-panel.with-caret::after {
    content: '';
    position: absolute;
    border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}
.dropdown-panel.with-caret::before {
    top: -8px;
    right: 20px;
	border-bottom: 8px solid #d0d0d0;
}
.dropdown-panel.with-caret::after {
	right: 20px;
	top: -7px;
    border-bottom: 8px solid #fff;
}
.dropdown-panel.entrance-panel.with-caret::before {
    border-bottom-color: #393939;
}
.dropdown-panel.entrance-panel.with-caret::after {
    border-bottom-color: #393939;
}

.dropbefore::before {
    content: '';
    margin-right: .275rem;
}
.dropright.dropbefore::before {
    margin-right: .4rem;
    margin-left: .175rem;
}
.dropright::before,
.dropright::after {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: .3rem solid;
    border-right: 0;
    border-bottom: .3rem solid transparent;
    border-top: .3rem solid transparent;
}
.dropright:not(.dropbefore)::after {
    content: '';
    margin-left: .275rem;
}

.dropdown::before,
.dropdown::after {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: .215em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
.dropdown:not(.dropbefore)::after {
    content: '';
    margin-left: .275rem;
}
.dropdown.btn:not(.dropbefore)::after {
    content: '';
    margin-left: .5rem;
}
.dropup::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .275rem;
    vertical-align: .215rem;
    border-top: 0;
    border-right: .3rem solid transparent;
    border-bottom: .3rem solid;
    border-left: .3rem solid transparent;
}

.btn-more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0px solid #ddd;
    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent;
    border-radius: 100%;
    overflow: hidden;
    cursor: pointer;
}
.btn-more:focus,
.btn-more:active {
    background-color: #f2f4f2;
    color: #242424;
}
.btn-more::before {
    position: relative;
    top: -7px;
    content: "\2026";
    font-size: 2em;
    height: 10px;
    line-height: 6px;
    color: #777;
    border: 0px solid red
}
.btn-more:hover::before {
    color: #242424;
}

.datepicker {
    cursor: pointer;
}

.card-wrap + .card-wrap {
    margin-top: 1em;
}
.card {
    box-shadow: 2px 2px 9px #e8e8e8;
    border: 0px solid #eee;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
}
.card.card-sm {
    font-size: .9em;
}
.card-image {
    display: block;
}
.card-image img {
    display: block;
    max-width: 100%;
    height: auto;
}
.card-body,
.card-footer {
    padding: 1em;
    line-height: 1.5;
}
.card-title {
    font-size: 1em;
    margin-bottom: .3em;
}
.card-title a {
    color: inherit;
}
.card a:hover {
    text-decoration: underline;
}
.card-footer a {
    color: #157dd3;
}

.tabs {
    position: relative;
    margin-bottom: 15px;
    list-style: none;
}
.tabs > li {
    position: relative;
    display: inline-block;
    color: #585858;
    margin-right: 15px;
    margin-bottom: 10px;
    border-bottom: 2px solid transparent;
    background-color: #fff;
    font-size: .9rem;
    cursor: pointer;
}
.tabs > li:focus {
    outline: none;
}
.tabs > li.active {
    color: #242424;
    font-weight: 600;
    border-bottom-color: #f29587;
}
.tabs > li > a {
    display: block;
    padding: 4px 4px;
    color: inherit;
    text-decoration: none;
}
.tabs > li > a:hover {
    color: #000;
}
.tabs i.iconfont {
    font-weight: 400;
}
.tab-content {
    display: none;
}
.list-group {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    line-height: 1.4;
}
.list-group.hoverable > .list-group-item:hover {
    background-color: #f8f8f8;
}
.list-group-item {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: .6rem 1.2rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
}
.list-group-item:first-child {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}
.list-group-item.list-group-item-header {
    background-color: #f6f6f8;
}
a.list-group-item:hover {
    background-color: #f8f8f8;
    color: #242424;
}
.list-group-item-img-top .list-group-item {
    align-items: flex-start;
}
.list-group-with-img > .list-group-item.list-group-item-header {
    padding-top: .8rem;
    padding-bottom: .8rem;
}
.list-group-with-img > .list-group-item > img {
    border-radius: 4px;
    margin-right: .5rem;
}

.collapsable,
.fadable {
    display: none;
}

.highlight-error {
    background-color: #f8dddf;
}
.highlight-regex {
    background-color: #f04848;
    color: #fff;
}
.highlight-regex-next {
    background-color: #398fc0;
    color: #fff;
}
.alert {
    position: relative;
    padding: .875rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: .95rem;
    border: 1px solid transparent;
    border-radius: .125rem;
}
.row .alert {
    margin-top: 0;
    margin-bottom: 0;
}
.alert-success {
    color: #1c462d;
    background-color: #e9ffe7;
    border-color: #abd3b4;
}
.alert-info {
    color: #028ddd;
    background-color: #f4f9fd;
    border-color: #6dbde2;
}
.alert-error {
    color: #5a1019;
    background-color: #ffeff0;
    border-color: #f2c4c8;
}
.alert a {
    color: inherit;
    text-decoration: underline;
}
.alert a.alert-link {
    font-weight: 600;
}
.alert ol,
.alert ul {
    margin-left: 2.5em;
    margin-bottom: .75em;
}
.alert p {
    margin-bottom: .5em;
}
.alert > *:last-child {
    margin-bottom: 0;
}
.alert-heading {
    font-size: 1.2rem;
    font-weight: normal;
    color: inherit;
    margin-top: 0;
    margin-bottom: .5em;
}

ul.row, ol.row {
    list-style: none;
    padding: 0;
}

.font-weight-normal {
    font-weight: normal;
}
.mb-0 {
    margin-bottom: 0!important;
}
.mb-1 {
    margin-bottom: 1rem!important;
}
.mb-2 {
    margin-bottom: 2rem!important;
}
.mt-0 {
    margin-top: 0!important;
}
.mt-1 {
    margin-top: 1rem!important;
}
.mt-2 {
    margin-top: 2rem!important;
}
.pa-0 {
    padding: 0!important;
}
.pa-1 {
    padding: 1rem!important;
}
.pt-1 {
    padding-top: 1rem!important;
}
.pl-1 {
    padding-left: 1rem!important;
}

.required::after {
    content: '*';
    color: #e6162d;
    position: relative;
    top: -3px;
    left: 3px;
}

.text-center {
    text-align: center;
}
.text-left  {
    text-align: left;
}
.text-right  {
    text-align: right;
}
.text-error {
    color: #e6162d;
}
.text-success {
    color: #006abe;
}
.text-info {
    color: #48c5eb;
}
.text-warning {
    color: #e9994b;
}
.text-muted {
    color: #999;
}
.text-lg {
    font-size: 2rem;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-or {
    font-size: .9em;
    font-weight: 300;
    color: #999;
    margin: 0 1rem;
    line-height: 1;
}
.font-normal {
    font-weight: normal;
}
.custom-error {
    display: none;
    position: relative;
    font-size: .85em;
    padding-left: 1.35em;
    margin-top: .5em;
    color: #e6162d;
    text-align: justify;
    line-height: 1.35;
}
.custom-error::before {
    position: absolute;
    display: inline-block;
    content: '\e836';
    font-family: "iconfont";
    left: 1px;
    top: 0;
    width: 1em;
    height: 1em;
}

.align-self-start {
    align-self: flex-start;
}
.align-self-stretch {
    align-self: stretch;
}
.hidden {
    display: none!important;
}
.block {
    display: block!important;
}

.dt-message {
    position: fixed;
    top: 50px;
    font-size: .9rem;
    text-align: center;
    padding: 8px;
    width: 100%;
    z-index: 15000;
}
.dt-message-wrap {
    margin: .5rem 0;
    width: 100%;
    opacity: 0;
    transition: height .2s ease-in-out, padding .2s ease-in-out;
}
.dt-message-body {
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: .75rem 1rem;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    line-height: 1.35;
}
.dt-message-body > i.iconfont {
    margin-right: 5px;
}
.dt-message-body > i.loading {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background: url(../../images/web/loading-4dots.svg) center center transparent;
    background-size: 100%;
    -webkit-animation: ani-load-loop 1.2s linear infinite;
    animation: ani-load-loop 1.2s linear infinite;
}
@keyframes ani-load-loop {
    0% {
        transform:rotate(0);
    }
    50% { transform:rotate(180deg)
    }
    to {
        transform:rotate(1turn)
    }
}

.post-section {
    background-color: #f2f2f4;
}
.tag-list-header {
    text-align: center;
}
.tag-list-header h1 {
    margin: 0;
    font-weight: normal;
    font-size: 1.2rem;
}
.tag-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1em 0;
}
.tag-list > a {
    border: 1px solid #eee;
    border-radius: 24px;
    padding: .2em 1.2em;
    margin: .75em 1em;
    font-size: .8em;
    background-color: #fff;
}
.post-item {
    padding: 1.25em 1.25em;
    background-color: #fff;
}
.post-item + .post-item {
    margin-top: .5em;
}
.link-post-image {
    display: block;
    border-radius: 2px;
    overflow: hidden;
}
.link-post-image img {
    display: block;
}
.post-title {
    font-weight: 500;
    margin-bottom: 5px;
}
.post-item .post-title {
    font-size: 1.2em;
    line-height: 1.3;
}
.post-item .post-title a {
    display: block;
    color: currentColor;
    transition: all .25s;
}
.post-item .post-title a:hover {
    color: #006abe;
}
.text-modifier {
    font-size: .65em;
    font-weight: normal;
    border-radius: 2px;
    line-height: 1;
    padding: .4em .4em .3em .4em;
    vertical-align: 3px;
}
.text-sticky {
    background-color: #f0c417;
    color: #fff;
}
.text-editor-choice {
    background-color: #e6162d;
    color: #fff;
}
.text-original {
    display: inline-block;
    font-size: .8em;
    padding: 2px 7px;
    margin-right: 6px;
    border: 1px solid #d4d4d4;
    border-radius: 16px;
    line-height: 1.2;
}
.post-meta {
    font-size: .8em;
    color: #999;
}
.post-meta > span:not(:last-child) {
    margin-right: 1em;
}
.post-meta a {
    color: currentColor;
}
.post-excerpt {
    font-size: .9em;
    margin-top: .5em;
    text-align: justify;
}
.post-excerpt a {
    color: #157dd3;
}
.post-excerpt a:hover {
    text-decoration: underline;
}
.post-excerpt > ol,
.post-excerpt > ul {
    margin-bottom: 1rem;
    margin-left: 2.5rem;
}

.post-excerpt > *:last-child {
    margin-bottom: 0;
}

.post-header {
    margin-bottom: 2rem;
}
.post-header.with-bottom-line {
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
}
.post-header > h1 {
    font-size: 2em;
    font-weight: 400;
    margin-bottom: 0;
}
.post-header > .post-subtitle {
    font-weight: 300;
}
.post-header img,
.post-entry img {
    max-width: 100%;
    height: auto;
}
.post-single {
    padding: 1.5em 1em 1em 1em;
    background-color: #fff;
    box-shadow: 1px 1px 4px #eee;
}
.post-single .post-title {
    font-size: 1.35em;
    line-height: 1.3;
}
.post-share {
    position: fixed;
    top: 34%;
    margin-left: -8em;
    font-size: .8em;
    text-align: center;
    color: #b1b6be;
}
.post-entry {
    font-size: 1rem;
    text-align: justify;
}
.post-single .post-entry {
    font-size: .95rem;
    margin-top: 1.25rem;
}
.post-entry * ~ h2 {
    margin-top: 1.5em;
}
.post-entry h2 {
    font-size: 1.35em;
    line-height: 1.5;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: .2em;
    margin-bottom: 1em;
}
.post-entry * ~ h3 {
    margin-top: 1.5em;
}
.post-entry h3 {
    font-size: 1.1em;
    margin-bottom: 1em;
}
.post-entry h3 > .iconfont {
    font-weight: 400;
}
.post-entry h4 {
    font-size: 1em;
    margin-bottom: 1em;
}
.post-entry ul,
.post-entry ol {
    margin-left: 3em;
    margin-bottom: 1em;
    padding-right: 1rem;
    line-height: 1.6;
}
.post-entry ul > li + li,
.post-entry ol > li + li {
    margin-top: .3em;
}
.post-entry figure {
    text-align: center;
    padding: 0;
    margin: 0 0 2em 0;
}
.post-entry img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.post-entry figure figcaption {
    display: inline-block;
    font-size: .9em;
    text-align: center;
    color: #aaa;
    margin-top: 6px;
    border-bottom: 1px solid #e8e8e8;
}

.post-entry a,
.post-entry a:visited {
    color: #157dd3;
}
.post-entry a:hover {
    text-decoration: underline;
}
.post-entry blockquote {
    color: #585858;
    background-color: #f6f7f7;
    margin: 0 0 2em 0;
    padding: 1.25em 1.5em;
    font-size: .95em;
    font-weight: 300;
}
.post-entry blockquote > *:last-child {
    margin-bottom: 0;
}
.post-entry > *:last-child {
    margin-bottom: 0;
}

.post-origin {
    color: #585858;
    border: 1px solid #e2e5e9;
    background-color: #f7fbff;
    padding: 1em;
    margin-top: 1em;
    font-size: .8em;
    word-break: break-all;
}

.post-neighbour {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: 1em;
}
.post-neighbour > div {
    color: #ccc;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.post-neighbour > div,
.post-neighbour > a,
.post-neighbour > a:visited {
    width: 100%;
    font-size: .9em;
    line-height: 1.6;
    color: currentColor;
}
.post-neighbour > a:hover {
    background-color: #f9faf9;
}
.post-neighbour * + * {
    margin-top: .5em;
}
.post-neighbour strong {
    margin-right: .5em;
}

.post-tags {
    display: flex;
    color: #999;
    font-size: .8rem;
    border-top: 0px solid #eee;
    border-bottom: 0px solid #eee;
    padding-top: 0em;
    padding-bottom: 0em;
    margin-top: 1em;
}
.post-tag-list {
    list-style: none;
}
.post-tag-list > li {
    display: inline-block;
    margin-right: .5em;
}
.post-tag-list > li > a {
    color: inherit;
}
.post-tag-list > li > a:hover {
    text-decoration: underline;
}

.post-section .aside-box {
    background-color: #fff;
    line-height: 1.5;
    font-size: .95em;
    box-shadow: 1px 1px 4px #eee;
}
.aside-box-title {
    font-size: 1em;
    border-bottom: 1px solid #e8e8e8;
    padding: .75em 1em;
    margin: 0;
}
.aside-box-title .iconfont {
    font-weight: normal;
}
.category-list {
    list-style: none;
    padding: .5em 0;
    margin: 0;
}
.category-list > li > a,
.category-list > li > a:visited {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 2px solid transparent;
    padding: .5em 1em;
}
.category-list > li > a:hover {
    border-color: currentColor;
    background-color: #f9faf9;
}
.category-list .post-count {
    color: #999;
    font-size: .9em;
}

.article-list {
    list-style: none;
    padding: .5em 0;
    margin: 0;
}
.article-list > li > a,
.article-list > li > a:visited {
    display: block;
    border-left: 2px solid transparent;
    padding: .5em 1em;
    color: currentColor;
}
.article-list > li > a:hover {
    color: #006abe;
    border-color: #006abe;
    background-color: #f9faf9;
}
.article-list > li > a > small {
    display: block;
    color: #999;
    margin-top: 3px;
}
.tag-cloud {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 1em;
}
.tag-cloud > a {
    font-size: .85em;
    border: 1px solid #eee;
    background-color: #f9faf9;
    padding: 3px 10px;
    margin: 6px;
    border-radius: 24px;
}
.hot-tool-list {
    list-style: none;
}
.hot-tool-list > li > a,
.hot-tool-list > li > a:visited {
    display: flex;
    align-items: center;
    padding: 1em;
}
.hot-tool-list > li > a:hover {
    background-color: #f9faf9;
}
.hot-tool-list > li > a > img {
    margin-right: 8px;
    border-radius: 4px;
}

.post-section-header {
    background-color: #fff;
    border-bottom: 1px solid #e8e8e8;
    font-size: 1rem;
    padding: .75em 1em;
    line-height: 1.5;
}
.post-section-title {
    font-size: .9em;
    margin: 0;
}
.post-section-description {
    font-size: .8em;
    color: #999
}
.related-posts {
    margin-top: .6rem;
}
.related-posts .post-title {
    font-size: 1em;
}
.related-posts .post-excerpt {
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display:-webkit-box;
}
.post-section-footer {
    background-color: #fff;
    border-top: 1px solid #e8e8e8;
    font-size: 1rem;
    padding: 1em;
    line-height: 1.5;
    text-align: center;
}

.category-section {
    background: #f2f2f4;
    padding: 1rem 0;
}
.category-info-header {
    padding: 1em;
}
.category-info-title {
    display: flex;
    align-items: center;
    line-height: 1;
}
.category-icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background-color: #242424;
    background: linear-gradient(0deg, #242424, #585858);
    color: #fff;
    width: 48px;
    height: 48px;
    font-size: 1.75em;
    margin-right: 10px;
    border: 2px solid #fff;
    border-radius: 8px;
}
.category-info-title h1 {
    font-size: 1.5em;
    margin: 0;
}
.category-summary {
    margin-top: 1em;
    text-align: justify;
}
.category-tools {
    border-radius: 2px;
    box-shadow: 1px 1px 2px #ddd;
    overflow: hidden;
}
.category-list-text {
    font-weight: bold;
    padding: 1em;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}
.category-aside .aside-box {
    background-color: #fff;
    box-shadow: 1px 1px 2px #ddd;
}
.recom-tools {
    list-style: none;
}
.recom-tools > li > a {
    display: flex;
    align-items: center;
    padding: .75em 1em;
    font-size: .9em;
    line-height: 1.2;
}
.recom-tools > li > a:hover {
    background-color: #f9faf9;
}
.recom-tools > li > a img {
    margin-right: .75em;
    border-radius: 4px;
}

.content-header {
    border-bottom: 1px solid #dde0d8;
    padding: 15px;
}
.content-container {
    padding: 1rem .5rem;
    min-height: 400px;
}
.content-container aside {
    margin-top: 20px;
}
.aside-box + .aside-box:not(.is_stuck) {
    margin-top: .75em;
}
aside > .aside-box.with-img img {
    width: 100%;
}

.related-tool-wrap {
    margin-top: 1rem;
    font-size: .9rem;
}
.related-tool-wrap > a,
.related-tool-wrap > a:visited {
    color: currentColor;
    margin-right: 1rem;
}
.related-tool-wrap > a:last-child {
    margin-right: 0;
}
.related-tool-wrap > a:hover {
    text-decoration: underline;
}

.hero {
    position: relative;
    padding-top: 40px;
    padding-bottom: 20px;
    background: url(../../images/web/hero-circle.svg) right -12px center no-repeat #e1ebf1;
    background-size: 55%;
}
.hero-content {
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    color: #000;
}
.hero-content h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    line-height: 1.5;
}
.hero img {
    display: block;
    margin: 0 auto;
}
.lead {
    color: inherit;
    font-size: 1rem;
}

label {
    display: inline-block;
}
.label {
    display: inline-block;
    font-size: .9rem;
    padding: 5px 8px;
    width: auto!important;
    color: #585858;
    background-color: #e8e8e8;
    border-radius: 2px;
    line-height: 1;
}
.label.label-sm {
    font-size: .8rem;
    padding: 4px 5px;
}
.label.label-success {
    color: #fff;
    background-color: #006abe;
}
.label.label-error {
    color: #fff;
    background-color: #e6162d;
}
.label.label-info {
    color: #fff;
    background-color: #48c5eb;
}

.label-category > a {
    display: block;
    color: #fff;
    background-color: #68d1c8;
    padding: 5px 6px 4px 6px;
    font-size: .8em;
    border-radius: 2px;
    line-height: 1;
}
.custom-checkbox + label:before,
.custom-radio + label:before {
    content: '';
    order: -2;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    background-color: white;
    border: 1px solid #b8b8b8;
    border-radius: 2px;
}
.options-inverse .custom-checkbox + label:before,
.options-inverse .custom-radio + label:before {
    border-color: #fff;
}
.custom-radio + label:before {
    border-radius: 100%;
}
.custom-checkbox:hover + label:before,
.custom-radio:hover + label:before {
    border-color: #006abe;
}
.options-inverse .custom-checkbox:hover + label:before,
.options-inverse .custom-radio:hover + label:before {
    border-color: #fff;
}
.custom-checkbox:checked + label:before,
.custom-radio:checked + label:before {
    border-color: #006abe;
}
.options-inverse .custom-checkbox:checked + label:before,
.options-inverse .custom-radio:checked + label:before {
    border-color: #fff;
}
.options > li > input.custom-checkbox:disabled + label,
.options > li > input.custom-radio:disabled + label {
    color: #999;
    cursor: not-allowed;
}
.custom-checkbox:disabled + label:before,
.custom-radio:disabled + label:before {
    background: #e8e8e8;
    border-color: #b8b8b8;
}
.custom-checkbox:checked + label:after {
    order: -1;
    content: '\e642';
    font-family: iconfont;
    font-weight: 700;
    font-size: 1rem;
    width: 16px;
    color: #006abe;
    margin-left: -22px;
    margin-right: 6px;
}
.custom-checkbox:checked:disabled + label:after {
    color: #b8b8b8;
}
.custom-radio:checked + label:after {
    order: -1;
    content: '';
    margin-left: -18px;
    margin-right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #006abe;
}
.custom-radio:checked:disabled + label:after {
    background-color: #b8b8b8;
}

.row-list > .row + .row {
    margin-top: 15px;
}
.row-list > .row > label {
    font-weight: 600;
}

/**
 * Captcha
 */
.captcha {
    height: 35px;
    display: block;
    cursor: pointer;
    border: 1px solid #ccc;
}
.captcha.captcha-lg {
    height: 42px;
}
a.captcha-refresh {
    color: #999;
    font-size: .9rem;
}
a.captcha-refresh:hover {
    text-decoration: underline;
}

/**
 * Uploader
 */
 .uploader-wrap {
     position: relative;
     border: 2px dashed #ddd;
     background-color: #f9faf9;
     width: 100%;
     padding-top: 60px;
     padding-bottom: 40px;
     text-align: center;
     line-height: 1.5;
 }
 .uploader-wrap.active {
     border-color: #006abe;
     border-style: solid;
 }
 .uploader-content {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
 .uploader-content.align-start {
     justify-content: flex-start;
     align-items: flex-start;
 }
 .uploader-content .btn,
 .uploader-content .link {
     position: relative;
     overflow: hidden;
 }
 .uploader-content .link input {
     cursor: pointer;
 }
 .uploader-content .btn input[type=file],
 .uploader-content .link input[type=file] {
     position: absolute;
     opacity: 0;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: 0;
 }
 .uploader-content .btn input[type=file]::after,
 .uploader-content .link input[type=file]::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: 0;
     cursor: pointer;
 }
 .uploader-content .text-or {
     margin: 1rem 0;
 }
 .uploader-content a,
 .uploader-content a:visited {
     color: #157dd3;
     font-size: .9em;
 }
 .uploader-content a:not(.link) {
     font-weight: 300;
 }
 .uploader-content a:hover {
     text-decoration: underline;
 }
 .uploader-desc {
     font-weight: 300;
     font-size: .9rem;
     padding: 0 15px;
     margin-top: 15px;
     margin-bottom: 0;
 }
 .uploader-desc.uploader-desc-sm {
     font-size: .95rem;
 }

 /**
  * Pagination
  */
.pagination {
    list-style: none;
    display: flex;
}
.pagination > li + li {
    margin-left: .5rem;
}
.pagination > li > span,
.pagination > li > a,
.pagination > li > a:visited {
    display: block;
    padding: .4rem .7em;
    font-size: .9em;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #999;
    line-height: 1;
    transition: all .3s;
}
.pagination > li > a:hover,
.pagination > li.active > span {
    background-color: #f8f9f8;
    border-color: #006abe;
    color: #006abe;
}
.pagination.flex-end {
    justify-content: flex-end;
}

.pagination-simple {
    justify-content: space-between;
}
.pagination.pagination-simple > li > a,
.pagination.pagination-simple > li > a:visited {
    border: 1px solid #eee;
    background-color: #f9faf9;
    font-weight: bold;
    color: #585858;
    padding: .5em 1.35em;
    border-radius: 24px;
    line-height: inherit;
    letter-spacing: 1px;
}
.pagination.pagination-simple > li > a:hover {
    color: currentColor;
    border-color: #999;
}

/**
 * Breadcrumb
 */
.breadcrumb-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e8e8e8;
 }
.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
.breadcrumb > li {
    display: inline-block;
}
.breadcrumb > li:not(:first-child)::before {
    content: '/';
    display: inline-block;
    margin: 0 10px;
}

/**
 * Page header
 */
.page-header {
    padding-top: 16px;
    padding-bottom: 12px;
    background-color: #242424;
}
.site-title {
    margin: 0;
    padding: 0;
    line-height: 1;
}
.site-title > a {
    display: inline-block;
}
.site-title img {
    width: 145px;
    height: auto
}
.search-form .form-control {
    border: 0;
    color: #fff;
    background-color: rgba(255,255,255,.12);
    transition: all .4s;
}
.search-form .form-control:focus {
    color: #242424;
    background-color: #fff;
}
.btn-search {
    border-color: #fff;
    border-right: 0;
}
.hot-search-wrap {
    font-size: .85rem;
    color: #ccc;
}
.hot-search-list {
    list-style: none;
    margin: 3px 0 0 0;
    padding: 0;
}
.hot-search-list > li {
    display: inline-block;
}
.hot-search-list > li + li {
    margin-left: 10px;
}
.hot-search-list > li > a,
.hot-search-list > li > a:visited {
    color: inherit;
}
.hot-search-list > li > a:hover {
    color: #fff;
}

.link-explore-categories {
    display: inline-block;
    font-size: .9rem;
    padding: 9px 10px 8px 6px;
    margin-left: 4px;
    color: #fff;
    border-radius: 2px;
}
.link-explore-categories:hover,
.link-explore-categories:active,
.link-explore-categories:focus {
    background-color: #fff;
    color: #242424;
}

.category-panel {
    right: 0;
    border: 1px solid #d0d0d0;
    background-color: #fff;
    width: 150px;
    padding: 5px 0;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(56,56,56,.15)
}

.item-remove-panel {
    right: 8px;
    width: 136px;
    border: 1px solid #d0d0d0;
    background-color: #fff;
    padding: 4px 0;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(56,56,56,.15);
}
.item-remove-panel.favorite-item-remove-panel {
    width: 82px;
}
.item-remove-panel a {
    display: block;
    font-size: .85rem;
    text-align: center;
}

.dropdown-menu {
    list-style: none;
}
.dropdown-menu > li > a,
.dropdown-menu > li > a:visited {
    display: block;
    line-height: 1;
    padding: 10px 15px;
    font-size: .9rem;
}
.dropdown-menu > li > a:hover {
    background-color: #006abe;
    color: #fff;
    font-weight: 600;
}
.dropdown-menu > li > a > i.iconfont {
    margin-right: 3px;
}
.dropdown-menu > li > a:hover > i.iconfont {
    font-weight: 400;
}
.dropdown-menu > li.line {
    border-top: 1px solid #e4e4e4;
    margin-top: 5px;
    margin-bottom: 5px;
}

main > section + section {
    margin-top: 30px;
}
.category-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #000;
    line-height: 1;
}
.category-title > a,
.category-title > a:visited {
    color: #999;
    font-size: .9rem;
    font-weight: normal;
}
.category-title > a:hover {
    color: #585858;
}
.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.button-group > .btn {
    width: 48%;
    margin-bottom: 15px;
}

.highlight {
    color: #e6162d;
}
.search-header {
    padding: 20px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e8e8e8;
}
.search-header h1 {
    font-size: 1.1rem;
    margin-bottom: 0;
}
.search-meta {
    font-size: .85rem;
    color: #999;
}
.search-result {
    padding: 10px;
}
.search-result-item {
    line-height: 1.5;
}
.search-result-item + .search-result-item {
    margin-top: 15px;
}
.search-result-title {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
}
.search-result-title a,
.search-result-title a:visited {
    color: #242424;
}
.search-result-title a:hover {
    text-decoration: underline;
}
.search-result-url {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.search-result-url > img {
    width: 20px;
    border-radius: 100%;
    margin-right: 4px;
}
.search-result-url > a,
.search-result-url > a:visited {
    color: #006abe;
    font-size: .8rem;
}
.search-result-summary {
    color: #585858;
    font-size: .8rem;
    margin-bottom: 0;
}

.ad-wrap {
    background-color: #fff;
    padding: .5rem;
    box-shadow: 1px 1px 2px #ddd;
}

.link-ad {
    position: relative;
    display: block;
    border-radius: 2px;
    overflow: hidden;
}
.link-ad::after {
    position: absolute;
    content: '广告';
    bottom: 0;
    right: 0;
    background-color: rgba(248,248,248,.9);
    color: rgba(108,108,108,.7);
    font-size: 12px;
    line-height: 1.2;
    padding: 3px 3px 2px 4px;
    border-top-left-radius: 2px;
}
.link-ad img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: all .3s;
}
.link-ad:hover img {
    transform: scale(1.02);
}

.hot-tool-section {
    position: relative;
    padding-top: 10px;
    padding-bottom: 50px;
    background-color: #f2f4f2;
    margin-top: 0;
}
.hot-tool-wrap {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px 10px 10px 10px;
}
.hot-tool-wrap .category-title {
    font-size: 1.2rem;
}
.hot-tool-wrap .tool-grid {
    margin-top: -10px;
}
.hot-category-wrap {
    margin: 40px auto 0 auto;
    text-align: center;
}
.hot-category-wrap h3 {
    position: relative;
    margin-bottom: 10px;
    font-weight: 300;
}
.hot-category-wrap h3::after {
    content: '';
    position: absolute;
    top: 20px;
    border-top: 1px solid #fff;
    display: block;
    width: 100%;
    z-index: -1;
}
.hot-category-wrap h3 > span {
    position: relative;
    background-color: #f2f4f2;
    padding: 0 15px;
}
.hot-category-list {
    list-style: none;
}
.hot-category-list > li {
    display: inline-block;
}
.hot-category-list > li > a,
.hot-category-list > li > a:hover {
    display: block;
    font-size: .9rem;
    font-weight: 300;
    border: 2px solid #fff;
    background-color: rgba(255,255,255,.5);
    color: #242424;
    padding: 6px 14px;
    margin: 10px;
}
.hot-category-list > li > a:hover {
    color: #006abe;
    border-color: #006abe;
    font-weight: 400;
    background-color: transparent;
}
.tool-grid {
    padding: 0;
    list-style: none;
}
.tool-item {
    position: relative;
}
.tool-grid .tool-item {
    border: 1px solid #e8e8e8;
    font-size: 1rem;
    border-radius: 2px;
    transition: all .3s;
    overflow: hidden;
}
.tool-grid .tool-item:hover {
    border-color: #ddd;
}
.tool-grid > li + li {
    margin-top: 10px;
}
.ad-banner-section {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
.ad-banner-section a,
.ad-banner-section a:visited {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    overflow: hidden;
}
.ad-banner-section a > img {
    max-width: 100%;
    height: auto;
    transition: all .4s;
}
.ad-banner-section a:hover > img {
    transform: scale(1.02);
}

.ad-append {
    display: none;
    margin-top: .5rem;
    font-size: .8rem;
    line-height: 1.5;
    color: #e6162d;
}

.hot-tool-section .tool-grid > li {
    margin-top: 10px;
}
.hot-tool-section .tool-grid .tool-item {
    background-color: #fff;
    padding: 20px 20px 18px 20px;
}
.tool-item-header {
    display: flex;
    align-items: center;
    background-color: #fff;
    line-height: 1;
}
.tool-grid .tool-item-header {
    padding: 10px 15px;
    background-color: #f8f8f8;
    background: linear-gradient(45deg, #fafafa, #f6f6f6);
    border-bottom: 1px solid #e8e8e8;
}
.hot-tool-section .tool-grid .tool-item-header {
    background: transparent;
    border: 0 none;
    padding: 0;
}
.tool-item-header img {
    margin-right: 10px;
    border-radius: 6px;
    background-color: #fff;
    width: 40px;
}
.tool-item-header a,
.tool-item-header a:visited {
    display: block;
    color: currentColor;
}
.tool-item-header a:hover {
    color: #006abe;
}
.tool-item-header > .row {
    position: relative;
    z-index: 9;
}
.tool-item-header h2,
.tool-item-header h3 {
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
}
.hot-tool-section .tool-item-header h3 {
    font-size: 1.3em;
}
.tool-item-body {
    position: relative;
    color: #585858;
    text-align: justify;
}
.tool-grid .tool-item-body {
    padding: 1.25em 1.25em 0 1.25em;
    font-size: .95em;
}
.tool-list .tool-item-body {
    margin-top: 1em;
}
.tool-item-body > p {
    margin-bottom: 0;
}
.hot-tool-section .tool-item-body {
    padding: 0;
    margin-top: 10px;
    font-size: inherit;
}
.tool-item-footer {
    position: relative;
    margin-top: 15px;
    font-size: .9rem;
}
.tool-item-footer.with-subtools {
    background-color: #f8f8fa;
    padding: 1rem;
}
.tool-item-footer.with-subtools > label {
    font-size: .85em;
    font-weight: bold;
    color: #999;
}
.tool-grid .tool-item-footer {
    padding: 13px 20px;
    border-top: 1px solid #eaeaea;
}
.hot-tool-section .tool-grid .tool-item-footer {
    margin-top: 18px;
    padding: 18px 0 0 0;
    line-height: 1;
    box-shadow: 0px -1px 0px 0 #fff, 0px -2px 0px 0 rgba(200,200,200,.15);
}
.hot-tool-section .tool-grid .tool-item-footer::before {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    top: -6px;
    left: 15px;
    transform: rotate(45deg);
    border-top: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    background-color: #fff;
    box-shadow: -1px -1px 0px #fff, -2px -2px 0px rgba(200,200,200,.15);
}
.sub-tool-entries {
    list-style: none;
    margin-top: .25rem;
}
.sub-tool-entries > li {
    display: inline-block;
    margin-right: 1em;
    font-weight: 300;
    line-height: 2;
}
.sub-tool-entries > li::before {
    content: '#';
    color: #ccc;
    padding: 0 3px;
    font-weight: 300;
    font-size: .9em;
}

.tool-list {
    list-style: none;
}
.tool-list > .tool-item {
    background-color: #fff;
    padding: 2rem;
}
.tool-list > .tool-item + .tool-item {
    border-top: 1px solid #eee;
}

.more-tool-list > li {
    margin-bottom: 15px;
}

.tool-main {
    padding-top: 40px;
}
.tool-title {
    color: #000;
    font-size: 1.5rem;
    margin-bottom: 0;
    margin-top: 0;
}
.category-title i.iconfont,
.category-info-title i.iconfont,
.tool-title > i.iconfont {
    font-weight: 400;
}
.tool-meta {
    font-size: .9rem;
    color: #999;
    margin-bottom: 10px;
}
.tool-meta {
    display: flex;
    align-items: center;
}
.tool-meta > span {
    display: inline-flex;
}
.tool-meta > span > * + * {
    margin-left: 4px;
}
.tool-meta > span + span {
    margin-left: 15px;
}
.tool-meta > span > a {
    font-size: inherit;
    color: inherit;
}
.tool-meta > span > a:hover {
    color: #006abe;
}
.tool-summary {
    text-align: justify;
}
.tool-desc {
    border: 1px solid #ddd;
    border-radius: 2px;
    overflow: hidden;
}
.tool-desc-heading {
    padding: 8px 16px;
    background-color: #f7f9fb;
    border-bottom: 1px solid #ddd;
}
.tool-desc-heading strong {
    font-size: .95rem;
}
.tool-desc-entry {
    font-size: 1rem;
    padding: 1.5em;
    text-align: justify;
}
.tool-desc-entry h2 {
    font-size: 1.4em;
    margin-top: 0;
    line-height: 1.6;
    border-bottom: 1px solid #e8e8e8;
    line-height: 1.35;
}
.tool-desc-entry * ~ h2 {
    margin-top: 30px;
}
.tool-desc-entry h3 {
    font-size: 1.1em;
    margin-top: 0;
}
.tool-desc-entry * ~ h3 {
    margin-top: 30px;
    margin-bottom: 12px;
}
.tool-desc-entry h2,
.tool-desc-entry h3,
.tool-desc-entry h4 {
    text-align: left;
}
.tool-desc-entry .anchor,
.tool-desc-entry .anchor:visited {
    margin-left: -32px;
    font-weight: 400;
    color: currentColor;
    line-height: 1;
}
.tool-desc-entry .anchor:hover {
    text-decoration: none;
}
.tool-desc-entry .anchor > span {
    visibility: hidden;
}
.tool-desc-entry .anchor > span::after {
    content: "\e7c6";
    font-family: iconfont;
    font-size: 1.75rem;
}
.tool-desc-entry h2:hover > .anchor > span,
.tool-desc-entry h3:hover > .anchor > span,
.tool-desc-entry h4:hover > .anchor > span {
    visibility: visible;
}
.tool-desc-entry a,
.tool-desc-entry a:visited {
    color: #157dd3;
}
.tool-desc-entry a:hover {
    text-decoration: underline;
}
.tool-desc-entry p:last-child {
    margin-bottom: 0;
}
.tool-desc-entry ul,
.tool-desc-entry ol {
    margin-left: 2em;
}
.tool-desc-entry ul:not(:last-child),
.tool-desc-entry ol:not(:last-child) {
    margin-bottom: 1rem;
}
.tool-desc-entry ul > li + li,
.tool-desc-entry ol > li + li {
    margin-top: 5px;
}
.tool-desc-entry figure {
    text-align: center;
    padding: 0;
    margin: 0 0 2.5em 0;
}
.tool-desc-entry img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.tool-desc-entry figure figcaption {
    display: inline-block;
    font-size: .9em;
    text-align: center;
    color: #aaa;
    margin-top: 6px;
    border-bottom: 1px solid #e8e8e8;
}
.tool-desc-entry blockquote {
    color: #585858;
    background-color: #f6f7f7;
    font-size: .95em;
    font-weight: 300;
    padding: 20px 25px;
    margin: 0 0 2em 0;
}
.tool-desc-entry blockquote p {
    margin-bottom: 0
}
.tool-desc-entry blockquote p + p,
.tool-desc-entry blockquote p + ul,
.tool-desc-entry blockquote p + ol,
.tool-desc-entry blockquote ul + p,
.tool-desc-entry blockquote ol + p {
    margin-top: .7rem;
}
.tool-desc-footer {
    padding-left: 1.5em;
    padding-right: 1.5em;
}
.tool-last-updated {
    font-size: .8em;
    color: #999;
}

.text-option-line {
    position: relative;
    font-size: .9rem;
    color: #585858;
    margin: 1rem 0;
}
.text-option-line > span {
    background-color: #f7f7f4;
    padding: 0 .5rem 0 0;
    position: relative;
    z-index: 10;
}
.text-option-line::after {
    content: '';
    position: absolute;
    display: block;
    border-top: 1px solid #e8e8e8;
    width: 100%;
    top: 12px;
    z-index: 1;
}

a.link-more-tool,
a.link-more-tool:visited {
    display: block;
    background: url(../../images/web/bg-abfo.png) right -85px bottom -85px no-repeat #fdfffe;
    background-size: contain;
    border: 1px solid #e4e4e4 ;
    font-size: .9rem;
    padding: 22px;
    line-height: 1.5;
    border-radius: 2px;
    transition: all .4s;
}
a.link-more-tool:hover {
    color: #242424;
    border-color: #ccc;
}
a.link-more-tool.link-more-tool-1:hover {
    background-color: #f7fdff;
}
a.link-more-tool.link-more-tool-2:hover {
    background-color: #fff7f9;
}
a.link-more-tool.link-more-tool-3:hover {
    background-color: #fcfaed;
}
a.link-more-tool.link-more-tool-4:hover {
    background-color: #f3f8f2;
}
.more-tool-title {
    position: relative;
    line-height: 1;
    font-size: 1.35em;
    margin: 0 0 .75rem 0;
}
.more-tool-title::before {
    content: '#';
    font-weight: 300;
    font-size: .9em;
    margin-right: 6px;
}
.link-more-tool-1 .more-tool-title {
    color: #1f596d;
}
.link-more-tool-2 .more-tool-title {
    color: #c04f4f;
}
.link-more-tool-3 .more-tool-title {
    color: #bead3a;
}
.link-more-tool-4 .more-tool-title {
    color: #308a24;
}

.more-tool-badget {
    position: absolute;
    display: inline-block;
    top: -8px;
    margin-left: 8px;
}
.more-tool-short-desc {
    margin: 0 0 .75rem 0;
    padding-left: 1rem;
}
.more-tool-view-more {
    font-size: .9em;
    color: #999;
    padding-left: 1rem;
    line-height: 1;
}
a.link-more-tool:hover .more-tool-view-more {
    color: currentColor;
}
a.link-short-url {
    color: #242424;
    text-decoration: underline;
    margin-right: 8px;
}
a.link-short-url:hover {
    color: #006abe;
}
.feature-section {
    background-color: #f9faf9;
    background-size: cover;
    border-top: 1px solid #e8e8e8;
    padding: 40px 0;
}
.feature-header {
    text-align: center;
}
.feature-header h3 {
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 0;
}
.feature-header h4 {
    font-size: 1.1rem;
    font-weight: 300;
    color: #585858;
    margin-top: 0;
    padding: 0 15px;
    line-height: 1.5;
    letter-spacing: 1px;
}
.feature-header h4::after {
    content: '';
    display: block;
    width: 25%;
    border-top: 2px solid #006abe;
    margin: 15px auto 40px auto;
}
.feature-list {
    list-style: none;
}
.feature-list li {
    padding: 0 20px;
}
.feature-list li > h4 {
    font-size: 1.1rem;
    margin-bottom: 0;
}
.feature-list li > p {
    color: #585858;
    padding-left: 22px;
    font-weight: 300;
    text-align: justify;
}
.feature-list li > p strong {
    font-weight: 400;
}

.tool-footer {
    margin-top: 20px;
}
.tool-content-wrap {
    background-color: #fdfae9;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 2px;
}
.tool-content-body {
    padding: 15px;
}

.tool-content-body > .table-responsive {
    margin-left: -16px;
    margin-right: -16px;
    width: auto;
}
.tool-content-wrap + .tool-content-wrap {
    margin-top: .6rem;
}
.tool-content-wrap > .tool-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    height: 52px;
    background-color: #f8f3e1;
    border-bottom: 1px solid #ddd;
}
.tool-content-wrap.bg-gray > .tool-content-header {
    background-color: #eeeeeb;
}.tool-content-wrap.bg-white > .tool-content-header {
    background-color: #f8f8f8;
}
.tool-content-wrap.bg-black > .tool-content-header {
    background-color: black;
}
.tool-content-header i.iconfont {
    font-weight: normal;
}
.tool-content-header > h2,
.tool-content-header > h3,
.tool-content-header > h4 {
    margin: 0;
    line-height: 1;
    font-size: 1rem;
}
.tool-content-wrap.bg-gray {
    background-color: #f7f7f4;
}.tool-content-wrap.bg-white {
    background-color: #fff;
}
.tool-content-wrap.bg-black {
    border-color: black;
    background-color: black;
    color: #fff;
}
.tool-content-result-wrap {
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 20px;
    border-radius: 2px;
}
.tool-content-wrap .nit-title {
    font-size: 1.2rem;
    border-left: 4px solid #006abe;
    margin-left: -15px;
    margin-bottom: 1rem;
    padding-left: 11px;
    line-height: 1.5;
}
.tool-content-wrap .nit-title > span {
    font-weight: 400;
    font-size: .5em;
    color: #999;
    margin-left: .5rem;
}
.tool-content-wrap > h4 {
    margin-bottom: .3rem;
    font-size: 1rem;
    border-bottom: 1px solid #eee;
}

.page-nav-box h2 {
    font-size: .8rem;
    margin: 0 0 .25em 0;
    color: #585858;
}
.dx-menu {
    position: relative;
}
.dx-menu li {
    font-size: .95em;
    list-style: none;
    line-height: 2;
}
.dx-menu.simple-menu li {
    font-size: .9em;
    line-height: 1.8;
}
.dx-menu::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px;
    background-color: #f4f6f4;
    opacity: .8;
}
.dx-menu > li + li {
    margin-top: .5em;
}
.dx-menu.simple-menu > li + li {
    margin-top: .2em;
}
.dx-menu > li > ul {
    font-size: .9em;
}
.dx-menu:not(.simple-menu) > li {
    font-weight: bold;
}
.dx-menu > li::before {
    width: 6px;
    height: 6px;
}
.dx-menu > li > ul > li {
    font-weight: normal;
}
.dx-menu a {
    position: relative;
    display: block;
    color: currentColor;
    padding-left: 1.5em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.dx-menu > li > ul > li > a {
    padding-left: 3em;
    padding-right: 1em;
}
.dx-menu li.active > a,
.dx-menu a:hover {
    color: #006abe;
    background-color: #f8f9f8;
}
.dx-menu a::before {
    position: absolute;
    content: '';
    left: 4px;
    top: 50%;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    margin-right: .75em;
    background-color: currentColor;
}
.dx-menu > li > ul a::before {
    width: 4px;
    height: 4px;
    left: 26px;
    margin-top: -2px;
}

.glossary-list {
    border-top: 1px solid #ddd;
    padding-top: 2em;
    padding-bottom: 2em;
}
.glossary-word-list + .glossary-word-list {
    border-top: 1px solid #e8e8e8;
    margin-top: .7em;
    padding-top: .7em;
}
.glossary-word-list > p {
    margin-bottom: 0;
}
.glossary-word-list > p > strong {
    margin-right: .5em;
}
a.glossary-index {
    color: inherit;
    font-size: 1.2em;
}
.http-status-code-group + .http-status-code-group {
    margin-top: 2rem;
}
.http-status-code-list > .row {
    font-size: .9em;
    padding-top: 1em;
    padding-bottom: 1em;
    color: #585858;
}
.http-status-code-list > .row:hover {
    background-color: #fafafa;
    color: inherit;
}
.http-status-code-list > .row > strong {
    font-size: 1.1em;
    letter-spacing: 1px;
}
.http-status-code-list > .row:first-child {
    border-top: 2px solid #ddd;
}
.http-status-code-list > .row:last-child {
    border-bottom: 1px solid #ddd;
}
.http-status-code-list > .row + .row {
    border-top: 1px dotted #ddd;
}
.http-status-code-detail {
    line-height: 1.5;
}
.http-status-code-detail > div + div {
    margin-top: 5px;
}
.tool-content-wrap .http-status-code-group .nit-title {
    font-weight: 400;
    margin-bottom: 0;
}
.pornhub-text-wrap {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    margin: 0 auto;
    line-height: 1;
    font-size: 48px;
    font-weight: bold;
    font-family: Helvetica,Arial,sans-serif;
    background-color: black;
}
.pornhub-text-wrap.flex-direction-column {
    align-items: stretch;
}
.pornhub-text {
    margin: 0 2px;
}
.pornhub-text:focus {
    outline: 0;
}
.pornhub-text-wrap.flex-direction-column > .pornhub-text + .pornhub-text {
    margin-top: 3px;
}
.pornhub-highlight {
    background-color: #f90;
    color: #000;
    border-radius: 6px;
    padding: 8px;
}
label .pornhub-highlight {
    border-radius: 2px;
    padding: 4px;
    margin: 0 2px;
    font-weight: 600;
    font-size: .9em;
}
.color-preview-text {
    font-size: .9rem;
    line-height: 1.5;
    margin-bottom: 10px;
    color: #777;
}
.color-preview-area {
    position: relative;
    border: 1px solid #e8e8e8;
    height: 194px;
}
.color-preview-area > i,
.color-preview-area::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
.color-preview-area::after {
    background: url(../../images/web/transparent.png) repeat #fff;
    z-index: 0;
}
.dark-inverse {
    color: #fff;
}
.palette-item {
    border: 1px solid transparent;
    font-size: .9rem;
    text-align: center;
    padding: 5px 0;
    margin: 7px 0;
    cursor: pointer;
}
.palette-item:hover {
    border-color: #48c5eb;
    outline: rgba(72, 197, 235, .4) solid thick;
}

.text-line-stat-wrap {
    border: 1px solid #d6d9d9;
    border-radius: 2px;
    padding: 1rem 1.25rem;
    margin-bottom: .5rem;
    background-color: #f6f6f9;
    font-size: .9rem;
}
.text-line-stat-wrap > p {
    margin-bottom: 0;
}
.text-line-stat-wrap > p > span {
    font-size: 1.5em;
}

.id-card-number {
    font-size: 1.05em;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
}

.timestamp-convert-wrap > fieldset {
    padding: .5rem 1rem 1rem 1rem;
    background-color: #fff;
}
.timestamp-convert-wrap > fieldset + fieldset {
    margin-top: 1.2rem;
}
.timestamp-convert-wrap > fieldset > legend {
    font-size: 1.2rem;
}
.current-timestamp {
    font-size: 1.2em;
    font-weight: 700;
    color: #e6162d;
    letter-spacing: 1px;
}
.time-convert-result-wrap {
    font-size: .95rem;
    margin-top: .8rem;
    color: #006abe;
}
.time-convert-result {
    font-size: 1.05em;
}
.date-input-row [class^=col-xs]:nth-child(-n + 3) {
    margin-bottom: .6rem;
}

.image-clip-preview-wrap {
    padding: 5px;
    border: 1px solid #d8d8d8;
    background: #fff;
    border-radius: 4px;
}
.image-round-preview,
.image-clip-preview {
    position: relative;
    width: 100%;
    height: 100%;
}
.image-clip-preview::before,
.image-clip-preview::after {
    position: absolute;
    content: '';
    display: block;
    z-index: 999;
}
.image-clip-preview::before {
    top: 33.33%;
    width: 100%;
    height: 33.33%;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
}
.image-clip-preview::after {
    left: 33.33%;
    width: 33.33%;
    height: 100%;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
}
.image-round-preview img,
.image-clip-preview img {
    position: absolute;
    width: 100%;
    z-index: 200;
}
.image-clip-operation {
    padding: .75rem 1.25rem 1rem 1.25rem;
    margin-top: 25px;
}
.image-round-operation {
    padding: 1rem 1.75rem 1.25rem .25rem;
    margin-top: 25px;
}
.image-clip-step {
    font-size: .85rem;
    line-height: normal;
}
.image-clip-step h4 {
    font-size: 1em;
    margin: 0 0 4px 0;
}
.image-clip-step + .image-clip-step {
    margin-top: 1.2rem;
}
.image-clip-tip {
    margin-top: 5px;
}
.bg-transparent {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.bg-transparent::before {
    content: attr(data-placeholder);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-shadow: 0 0 2px #666;
    z-index: 100;
}
.bg-transparent::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../../images/web/transparent.png) repeat #fff;
    z-index: 0;
}
.wechat-qrcode-result {
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    background-color: #f8f8f8;
    text-align: center;
    padding: 2rem 0;
}
.provice-panel {
    top: 42px;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 2px;
    background-color: rgb(255,255,255);
    box-shadow: 0 0 10px rgba(56,56,56,.15);
}
.provice-panel > .row + .row {
    margin-top: .5rem;
}
.provice-panel h3 {
    font-size: 1rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    margin-bottom: 0;
}
.province-list > li {
    list-style: none;
    display: inline-block;
    margin-right: .5rem;
}
.province-list > li > a {
    display: block;
    padding: .25rem .5rem;
    font-size: 1rem;
    border: 1px solid transparent;
}
.province-list > li > a:hover {
    border-color: #006abe;
}
.oil-price-box {
    font-size: 1rem;
    border: 1px solid #48c5eb;
    background-color: #f5fdff;
    border-radius: 2px;
    overflow: hidden;
}
.oil-price-box + .oil-price-box {
    margin-top: 1rem;
}
.oil-price-box.oil-no-price-box {
    border-color: #ddd;
    background-color: #f8f8f8;
    color: #999;
    cursor: not-allowed;
}
.oil-label, .oil-price {
    text-align: center;
    padding: .6rem 0;
}
.oil-label {
    position: relative;
}
.oil-label::after {
    content: '';
    position: absolute;
    display: inline-block;
    top: 24%;
    border-left: 18px solid #f5fdff;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    right: -18px;
}
.oil-no-price-box .oil-label::after {
    border-left-color: #f8f8f8;
}
.oil-label > span:first-child {
    font-size: 2.4em;
    margin-right: .1em;
}
.oil-label > span:last-child {
    font-size: .9em;
}
.oil-price > span:nth-child(2) {
    font-size: 2.4em;
}
.oil-price {
    background-color: #dbf5fd;
    color: #e6162d;
    text-shadow: 1px 1px 0 #fff;
}
.oil-no-price-box .oil-price {
    background-color: #eee;
}
.oil-no-price-box .oil-price > span {
    font-size: 2.2em;
    color: #999;
}
.district-wrap > .row > div + div {
    margin-top: 1rem;
}
.district-item {
    border: 1px solid #ddd;
    padding: 1.5rem;
    border-radius: 4px;
    background: #fff;
    background: linear-gradient(-30deg, #f6f6f8, #fafafd);
    box-shadow: -1px -1px 0 rgba(255,255,255,.8) inset;
}
.district-item > h4 {
    font-size: 1.2rem;
    margin-bottom: .6rem;
}
.district-item > ul {
    margin-left: 2.75rem;
    color: #585858;
}
.district-item > ul > li {
    list-style: square;
}
.district-item > ul > li + li {
    margin-top: .5rem;
}
.district-item > ul > li > label {
    width: 70px;
    font-weight: 600;
}

.action-history-wrap {
    position: relative;
}
.history-panel {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background-color: #fff;
    padding: 10px 14px;
    min-width:120px;
    line-height: 1;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
}
.history-panel::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 20px;
    border-top: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    background-color: #fff;
    width: 8px;
    height: 8px;
    transform: rotate(-45deg);
}
.history-panel > a {
    display: block;
    font-size: .9rem;
    padding: 6px 0;
    color: inherit;
}
.history-panel > a:hover {
    color: #006abe;
    font-weight: 600;
}
.result-header {
    margin-bottom: 1rem;
}
.result-header h3 {
    margin: 0;
}
.result-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
h3.result-title {
    font-size: 1.2rem;
    margin-top: 30px;
}
h4.result-title {
    font-size: 1.1rem;
    margin-top: 30px;
}
.result-indicator {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    padding: 1rem;
    height:320px;
    border:2px dashed #ccc;
    font-weight: 300;
    font-size: 1rem;
    color: #585858;
    background-color: #f8f8f8;
}
.result-indicator img {
    max-width: 100%;
    height: auto;
}
.no-result-section {
    margin-top: 1rem;
}
.no-result {
    border: 1px dashed #e4e8ee;
    padding: 30px 10px;
    font-size: .9rem;
    color: #585858;
    background-color: #f9f9ff;
    text-align: center;
}
.no-result.has-error {
    color: #e6162d;
}
.keep-space {
    display: flex;
}
.keep-space > * + * {
    margin-left: .5em;
}

.muted-param {
    font-size: .85em;
    color: #999;
}

.linux-command-list {
    list-style: none;
    align-items: stretch;
}
.linux-command-list > li {
    margin-bottom: 1rem;
}
.linux-command-list > li > a,
.linux-command-list > li > a:visited {
    display: block;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    padding: .75rem;
    line-height: 1.5;
    height: 100%;
}
.linux-command-list > li > a:hover {
    border-color: #006abe;
}
.related-command-list {
    list-style: none;
    line-height: 2;
}
.emoji-list {
    margin-top: -1em;
}
.emoji-list > li {
    list-style: none;
    margin-top: 1em;
}
.emoji-item {
    position: relative;
    background-color: #f2f4f2;
    border: 1px solid #ddd;
    padding: .8em 1em;
    line-height: 1.2;
    transition: all .2s;
}
.emoji-item:hover {
    background-color: #fff;
    border-color: #ccc;
}
.emoji-item .emoji {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
    margin-bottom: .5em;
}
.emoji-item .emoji > em {
    font-size: 1.5em;
    font-style: normal;
    transition: all .1s;
}
.emoji-item .emoji > em:hover {
    font-size: 1.6em;
}
.emoji-item .emoji > a,
.emoji-item .emoji > a:visited {
    font-size: .75em;
    color: #ccc;
}
.emoji-item .emoji > a:hover {
    color: #585858;
}
.emoji-item .emoji-title {
    font-size: .8em;
    margin-bottom: 0;
    color: #585858;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-list > li {
    list-style: none;
    margin-left: -1px;
    margin-top: -1px;
    overflow: hidden;
}
.symbol-list > li > a,
.symbol-list > li > a:visited {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    background-color: #f2f4f2;
    border: 1px solid #ccc;
    color: #0e7d9e;
    font-size: 1.2em;
    z-index: 1;
}
.symbol-list > li > a:hover {
    background-color: #fff;
    border-color: #006abe;
    color: #006abe;
    font-size: 1.4em;
    z-index: 2;
}
.computer-english-index-wrap {
    padding: .8rem 1.2rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    background-color: #f8f8f8;
}
.computer-english-indices {
    margin: 5px 0 0 -5px;
    list-style: none;
}
.computer-english-indices > li {
    margin: .25rem .5rem .25rem 0;
    line-height: 1.5;
}
.computer-english-indices > li > span {
    cursor: not-allowed;
}
.computer-english-indices > li > a,
.computer-english-indices > li > a:visited {
    color: #157dd3;
    padding: 3px 6px;
    border-radius: 2px;
}
.computer-english-indices > li > a:hover,
.computer-english-indices > li.active > a,
.computer-english-indices > li.active > a:hover {
    background-color: #f29587;
    color: #fff;
}
.table-computer-english > tbody > tr > td:nth-child(3),
.table-named-colors > tbody > tr > td:nth-child(5),
.table-colors > tbody > tr > td:nth-child(3),
.table-colors > tbody > tr > td:nth-child(6) {
    font-family: Consolas, Monaco, courier, monospace;
}
.computer-english-example-list {
    margin: 0 0 0 1.3em;
}
.computer-english-example-list > li + li {
    margin-top: 1.3em;
}
.computer-english-example-list > li {
    line-height: 1.5;
}
.computer-english-example-list > li .example-cn {
    color: #585858;
    font-size: .85em;
    margin-top: .3em;
}

.reference-wrap h2 {
    margin-bottom: .3rem;
    font-size: 1.75rem;
    font-weight: 400;
}
.reference-wrap h3 {
    margin-bottom: .2rem;
    font-size: 1.2rem;
}
.reference-wrap h2 ~ h2,
.reference-wrap h3 ~ h3 {
    margin-top: 1rem;
}
.reference-wrap h2 > small,
.reference-wrap h3 > small {
    font-weight: 400;
    font-size: .75em;
    color: #ccc;
    margin-left: .5rem;
}
.reference-wrap h2 > small {
    font-size: .6em;
}
.reference-wrap table tfoot td {
    font-size: .9rem;
    color: #585858;
    background-color: #f8f8f8;
    padding-top: 1em;
    padding-bottom: 1em;
}

.related-beian-table {
    font-size: .85rem;
    color: #425879;
}
.related-beian-table td {
    text-align: center;
}

.httpstatus-overview {
    padding-left: 35px;
}
.httpstatus-overview .label {
    font-size: .8rem;
    font-weight: 600;
}
.httpstatus-overview > .row-list > .row {
    line-height: 1.2;
}
.label-list {
    display: flex;
    align-content: center;
    color: #585858;
}
.label-list > * + * {
    margin-left: .5rem;
}
.text-response-headers {
    font-size: 1rem;
    margin-bottom: .5rem;
}
.raw-response-headers {
    margin-top: 20px;
}
.raw-response-headers > a {
    font-size: 1rem;
}
pre.pre-content.random-numbers {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 15px;
}
.random-numbers > b {
    width: 20%;
    font-size: 1.1rem;
    text-align: center;
}
pre.pre-content {
    padding: 10px 5px 10px 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: .9rem;
    border: 1px solid #ddd;
    word-break: break-all;
    background-color: #fff;
    max-height: 500px;
    overflow: scroll;
}
pre.pre-content::before {
    content: none;
}
pre.pre-content.ws-pre {
    white-space: pre;
}
pre.pre-content > code {
    margin: 0;
    padding: 0;
}
.terminal-char {
    color: #b8b8b8;
    margin-right: 5px;
    user-select: none;
    -webkit-user-select: none;
}

.form-control-group {
    border: 1px solid #ddd;
    border-radius: 2px;
    overflow: hidden;
}
.form-control-group-header {
    border-bottom: 1px solid #ddd;
    background-color: #f7f9fb;
    padding: 10px 15px;
    font-size: .95rem;
}
.form-control-group-header.flexible {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.form-control-group-body .CodeMirror,
.form-control-group-body .form-control {
    border-radius: 0;
    line-height: 1.5;
    border: 0;
}
.form-control-group-body:not(.with-code-editor) .CodeMirror,
.form-control-group-body:not(.with-code-editor) .form-control {
    background: #fff;
    min-height: auto;
}
.form-control-group-body.with-code-editor .CodeMirror-gutters {
    border-right-width: 0;
    background-color: #fefff9;
}
.form-control-group-body > pre {
    margin: 0;
}
.form-control-group-body .CodeMirror.CodeMirror-focused,
.form-control-group-body .form-control:focus {
    border: 0;
}
.form-control-group-body-regex .CodeMirror pre {
    font-size: 1rem;
}
.form-control-group-body-regex .CodeMirror {
    padding: 8px 0 0 0;
    height: 80px;
}
.form-control-group-body-regex .CodeMirror pre.CodeMirror-line {
    font-weight: 600;
    letter-spacing: .5px;
}
.form-control-group-body-regex .CodeMirror pre.CodeMirror-placeholder,
.form-control-group-body-subject .CodeMirror pre.CodeMirror-placeholder {
    margin-top: 0;
}
.form-control-group-body-subject .CodeMirror {
    padding: 10px 0;
    height: 400px;
}
.form-control-group-body-code .CodeMirror {
    padding: 12px 4px;
    height: auto;
}
.form-control-group-body-code.form-control-group-body-code-sm .CodeMirror {
    line-height: 1.35;
}
.form-control-group-body-code.form-control-group-body-code-sm .CodeMirror pre {
    font-size: .85em;
}
.form-control-group-inner {
    background: #f9faf9;
}
.form-control-group-inner > pre {
    margin: 0;
    height: 360px;
    padding: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow: scroll;
}
.msg-block + .msg-block {
    margin-top: .5em;
}
.form-control-group-footer {
    border-top: 1px solid #ddd;
    background-color: #f6f6f6;
    padding: 10px 15px;
    font-size: .95rem;
}
.most-populars {
    font-size: .85rem;
    margin-top: 5px;
    color: #777;
}
.most-populars a,
.most-populars a:visited {
    color: inherit
}
.most-populars a:hover {
    color: #006abe;
}
.most-populars a + a {
    margin-left: 5px;
}
.height450 {
    height: 450px;
}
.form-control-group-matches {
    margin-top: 1rem;
}
pre.regex-matches {
    padding: 10px 5px 10px 15px;
    margin: 0;
    font-size: .9rem;
    background-color: #fdfffe;
    line-height: 1.8;
    height: 100%;
    overflow: scroll;
}
.word-count-result-wrap {
    padding: .75rem 0;
}
.word-count-result-wrap > p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem 1.35rem;
    margin-bottom: 0;
    font-size: .9rem;
}
.word-count-result-wrap > p:not(.word-count-total):hover {
    background-color: #f8f8f8;
}
.word-count-result-wrap > p.word-count-total {
    font-size: 1.2rem;
    margin-bottom: .75rem;
    border-bottom: 1px dashed #ddd;
}
.word-count-result-wrap > p:nth-child(2) {
    color: #e6162d;
}
.word-count-result-wrap > p:nth-child(3) {
    color: #5a1019;
}
.word-count-result-wrap > p:nth-child(4) {
    color: #157dd3;
}
.word-count-result-wrap > p:nth-child(5) {
    color: #006abe;
}
.word-count-result-wrap > p > span {
    font-size: 1.35em;
    letter-spacing: 1px;
    font-style: italic;
}

.code-snapshot-top-option-container {
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: .5rem;
}
.code-snapshot-top-option-container > .top-option-item + .top-option-item {
    margin-top: .5rem;
}
.top-option-item > .row > label + div {
    margin-left: .5rem;
}
.source-code-wrap {
    position: relative;
    padding: 1.25rem;
    background-color: transparent;
}
.code-snapshot-option-container {
    border: 2px solid #fff;
    border-radius: 2px;
    margin-bottom: .5rem;
}
.code-snapshot-option-container .option-title {
    font-size: 1rem;
    margin: 0;
    padding: .5rem .75rem;
    border-bottom: 2px solid #fff;
}
.code-snapshot-option-wrap {
    font-size: .85em;
    padding: 1.25rem;
}
.source-code-window {
    position: relative;
    overflow: hidden;
}
.source-code-watermark {
    position: absolute;
    bottom: 4px;
    right: 10px;
    width: 96px;
}
.source-code-watermark img {
    max-width: 100%;
}
.win-control {
    display: none;
    position: relative;
    height: 40px;
    padding: 10px 16px;
    z-index: 20;
}
.win-control > i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
}
.win-control > i + i {
    margin-left: 8px;
}
.win-control > i:nth-child(1) {
    background-color: #FF5F56;
}
.win-control > i:nth-child(2) {
    background-color: #FFBD2E;
}
.win-control > i:nth-child(3) {
    background-color: #27C93F;
}
.source-code-window .CodeMirror {
    height: auto;
    min-height: 346px;
    margin-top: -40px;
    padding: 45px 13px 10px 13px;
    line-height: 1.5;
    box-shadow: none;
}
.source-code-window .CodeMirror .CodeMirror-cursor {
    border-width: 2px;
}

.canvas-wrap {
    position: relative;
    overflow: hidden;
}
.canvas-wrap canvas {
    display: block;
    background-color: #f6f6f6;
    max-width: 100%;
    height: auto
}
.canvas-options {
    position: absolute;
    left: -2px;
    top: -2px;
    background-color: rgba(255,255,255,.9);
    padding: .5rem .75rem;
    border: 2px solid #999;
    border-bottom-right-radius: 1rem;
}
.canvas-operations {
    position: absolute;
    right: .4rem;
    top: .4rem;
    background-color: rgba(200,200,200,.4);
    padding: .4rem
}

.fn-container {
    padding: 3rem 0;
    background: #fdfae9;
}
.fn-error {
    margin-top: calc(-4rem - 1px);
    margin-bottom: 2rem;
    display: none;
}
.fn-list > .fn-item + .fn-item {
    margin-top: .5rem;
}
.fn-remove {
    padding-top: .5rem;
}
.fn-option-panel {
    width: 300px;
    right: 0;
    top: 40px;
    box-shadow: 0 0 10px rgba(56,56,56,.15);
}
.form-group.fn-option-form {
    font-size: .9em;
}
.form-group.fn-option-form > .row + .row {
    margin-top: .75rem;
}
.fn-canvas-wrap {
    border-top: 2px solid rgba(24,24,24,.4);
    border-bottom: 2px solid rgba(24,24,24,.4);
}

.device-viewport {
    background-color: #157dd3;
    color: #fff;
    text-align: center;
    padding: 4rem 2rem;
    margin-top: -1px;
}
.device-viewport > h3 {
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 2rem;
    margin-top: 0;
    line-height: 1;
}
.viewport-info {
    display: flex;
    justify-content: center;
    font-size: 3rem;
}
.viewport-info > * {
    margin: 0 1rem;
}
.viewport-info > div {
    line-height: .8;
}
.viewport-info > div > small {
    display: block;
    font-weight: 100;
    font-size: .5em;
    color: rgba(255,255,255,.75);
}
.viewport-symbol {
    font-size: .85em;
}
.device-feature-wrap {
    margin: 3rem auto 0 auto;
}
.device-feature-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
    line-height: 1.5;
}
.device-feature-title > small {
    display: block;
    font-size: .5em;
    font-weight: normal;
    color: #999;
}
.feature-item {
    background-color: #f4f8fa;
    height: 100%;
}
.feature-item > h4 {
    margin-bottom: 0;
    padding: 1rem;
    background-color: #242424;
    color: #fff;
    line-height: 1;
}
.feature-item > ul {
    list-style: none;
    padding: 0 1rem;
}
.feature-item > ul > li {
    display: flex;
    align-items: center;
    padding: .75rem 0;
}
.feature-item > ul:not(.single) > li {
    justify-content: space-between;
}
.feature-item > ul > li + li {
    border-top: 1px solid #e8e8ee;
}
.feature-item > ul > li > .iconfont {
    margin-right: 5px;
    font-weight: bold;
}

.device-user-agent {
    background-color: #f4f8fa;
    margin-top: 1rem;
    padding: 2rem 0 1rem 0;
}
.device-user-agent-text {
    font-size: 1rem;
    font-weight: 300;
}

.info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.info-list > li {
    display: flex;
}
.info-list > li + li {
    margin-top: 5px;
}
.image-info-list > li > label {
    width: 30%;
    font-weight: 600;
}
.info-list > li > span {
    width: 70%;
}

.response-header-table {
    margin-top: 8px;
}
.httpstatus-table {
    border: 2px solid #e4e8ee;
}
.httpstatus-table td a {
    color: #157dd3;
}
.httpstatus-table > tbody > tr > td,
.httpstatus-table > thead > tr > th {
    border-left: 0;
    border-right: 0;
}
.httpstatus-table > thead > tr > th:first-child,
.httpstatus-table > tbody > tr > td:first-child {
    padding-left: 20px;
}
.link-redirect-chain {
    position: relative;
    padding-left: 32px;
    display: inline-block;
}
.link-redirect-chain::before {
    position: absolute;
    content: '\21b3';
    left: 10px;
    color: #242424;
}
.wp-theme-result {
    border-top: 6px solid #e8e8e8;
    padding: 1.2rem 0;
}
.wp-theme-name {
    font-size: 1.75rem;
    margin: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e8e8e8;
}
.wp-theme-details > .row {
    border-bottom: 1px solid #e8e8e8;
    padding: .75rem 0;
}
.wp-theme-details > .row > label {
    font-weight: 600;
}
.wp-theme-details a,
.wp-theme-details a:visited {
    color: #157dd3;
}
.wp-theme-details a:hover {
    text-decoration: underline;
}

.response-header-wrap {
    position: absolute;
    right: -2px;
    top: 36px;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    background-color:#fff;
    background: linear-gradient(0, #fafafa, #fdfdfd, #fff);
    padding: 15px 20px 15px 15px;
    margin-top: 5px;
    width: 350px;
    text-align: left;
    z-index: 99;
    box-shadow: 0 0 8px 1px #e8e8e8;
}
.response-header-wrap::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 40px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background-color: #fff;
    transform: rotate(-45deg);
}
.redirect-list-title {
    font-size: 1.3rem;
    margin-top: 3rem;
    margin-bottom: 15px;
}
.redirect-item + .redirect-item {
    margin-top: 30px;
}
.redirect-counter {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    padding-bottom: 0;
    border-bottom: 1px solid #e8e8e8;
}
.response-header-list {
    list-style: none;
    font-size: .9rem;
}
.response-header-list > li + li {
    margin-top: 6px;
}
.response-header-list > li > label {
    width: 100px;
    margin-right: 1rem;
    text-align: right;
    font-weight: 600;
}
.list-table {
    color: #425879;
}
.list-table th {
    background-color: #fff;
    text-align: right;
    width: 27.5%;
}
.list-table th > small {
    font-weight: 400;
}
.list-table.sha-table th {
    width: auto;
}
.sha-table tbody tr td:nth-child(3),
.sha-table tbody tr td:nth-child(4) {
    text-align: center;
}
.list-table td a {
    color: #006abe;
}
.list-table td a:hover,
.httpstatus-table td a:hover {
    text-decoration: underline;
}
.list-table tr td.table-lead {
    text-align: center;
    background-color: #f6f8f0;
    font-size: .85rem;
    padding-top: 12px;
    padding-bottom: 12px;
}
.list-table tr.table-lead td,
.list-table tr.table-lead th {
    background-color: #f6f8f0;
}
.tool-desc-entry ol.alexa-rank {
    list-style: none;
    margin-left: 0;
    counter-reset: step;
    border-top: 3px solid #f2f2f4;
    border-bottom: 2px solid #f2f2f4;
}
.alexa-rank > li {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: .75em .75em .75em 2.5em;
}
ol.alexa-rank > li + li {
    border-top: 1px solid #f2f2f4;
    margin: 0;
}
.alexa-rank > li:hover {
    background-color: rgba(220,220,220,.1);
}
.alexa-rank > li::before {
    position: absolute;
    counter-increment: step;
    content: counter(step);
    font-style: italic;
    font-size: 1.05em;
    left: .5em;
    font-weight: bold;
    color: #585858;
}
.alexa-rank > li:nth-child(1)::before {
    color: #e6162d;
}
.alexa-rank > li:nth-child(2)::before {
    color: #f04848;
}
.alexa-rank > li:nth-child(3)::before {
    color: #f29587;
}
.alexa-rank > li > div {
    width: 100%;
}
.alexa-rank > li > div:first-child {
    font-weight: bold;
}
.alexa-rank > li > div:last-child {
    font-size: .9em;
    margin-top: 5px;
}
.alexa-rank > li > div > a {
    display: inline-block;
}
.alexa-rank > li > div > a + a {
    margin-left: 1em;
}
.alexa-rank > li > div > a[rel*=external]::after {
    content: '\e7bb';
    font-family: iconfont;
}

.domain-more-info {
    font-size: .9rem;
    color: #585858;
}
.domain-more-info > p:last-child {
    margin-bottom: 0;
}
.domain-content-wrap {
    position: relative;
    background:#f9f9ff;
    border: 1px solid #ddd;
    padding: 30px;
    margin-top: 15px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.domain-content-wrap::before {
    position: absolute;
    content: '';
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    border-top: 5px solid #242424;
}
.domain-content-error-wrap::before {
    border-top-color: #e6162d;
}
.domain-content-success-wrap::before {
    border-top-color: #006abe;
}
.domain-content-wrap a,
.domain-content-wrap a:visited {
    color:#157dd3;
}
.domain-content-wrap a:hover {
    text-decoration: underline;
}
.domain-content-wrap h3 {
    font-size: 1.2rem;
}
.domain-whois {
    margin-bottom: 1rem;
}
.domain-whois > p {
    margin-bottom: 5px;
    display: flex;
}
.domain-whois > p > label {
    width: 22%;
    margin-right: 10px;
    font-weight: 600;
    text-align: right;
}
.domain-whois > p > span {
    width: 78%;
}
.domain-registars {
    font-size: .9rem;
}
.convert-result-list {
    font-size: .9rem;
}
.convert-result-item {
    background-color: #f2f4f2;
    border: 1px solid #ddd;
    padding: 5px 10px;
}
.convert-result-item + .convert-result-item {
    margin-top: 10px;
}
.optimize-compare {
    font-size: .8em;
    color: #999;
    text-align: center;
}
.optimize-compare > span {
    margin: 0 .5rem;
}
.base64-convert-result-item {
    padding: 1rem;
}
.base64-img-wrap {
    position: relative;
    max-height: 200px;
    padding: 0;
    overflow: hidden;
}
.base64-heigh-img-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(180deg, rgba(255,255,255,.0), #f2f4f2);
}
.base64-img-wrap img {
    max-width: 100%;
    height: auto;
    border: 2px solid #585858;
    padding: .3rem;
    background-color: #fff;
    border-radius: 8px;
}
.txt-base64 {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}
.converted-size {
    display: inline-block;
    color: #006abe;
    width: 70px;
    font-size: .9em;
}
.error-ico {
    display: none;
}
.table-shortcut tr td label {
    color: #babfce;
    font-size: .85em;
}
.table-shortcut tr td kbd {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #585858;
    border-color: #e4e4e4;
    border-radius: 4px;
    box-shadow: 0 1px 0 #dadadd;
    line-height: 1;
    padding: 2px 6px;
}
.table-shortcut tr:hover td kbd {
    color: #000;
}

.pswd-strength {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 120px;
    margin: 0 auto;
    font-size: .8rem;
}
.pswd-strength::after {
    content: attr(data-text);
    flex-shrink: 0;
    margin-left: 4px;
    color: #585858;
    white-space: nowrap;
}
.pswd-strength > span {
    width: 15%;
    height: 4px;
    background-color: #d8d8d8;
}
.pswd-strength > span + span {
    margin-left: 2px;
}
.pswd-strength > span.pswd-strong {
    background: #006abe;
}
.pswd-strength > span.pswd-middle {
    background-color: #f29587;
}
.pswd-strength > span.pswd-weak {
    background-color: #e6162d;
}

.email-template-group {
    border-bottom: 2px solid #ddd;
}
.email-template-group-item {
    border-top: 1px solid #ddd;
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 1.5;
}
.reference-wrap .email-template-group-item h3 {
    margin-top: .5rem;
    font-size: 1.3rem;
}
.email-template-group-item h3 > a,
.email-template-group-item h3 > a:visited {
    display: block;
    color: currentColor;
}
.email-template-group-item h3 > a:hover {
    color: #157dd3;
}
.email-template-meta {
    font-size: .8em;
    color: #999;
    margin-bottom: .75em;
}
.email-template-meta > span + span {
    margin-left: 1em;
}
.email-template-body > pre {
    font-family: inherit;
}
.email-template-body > h3 {
    font-size: 1em;
}

.paypal-service-charge-list {
    margin: .7em 0 0 1.8em;
    list-style: none;
}
.paypal-service-charge-list > li {
    position: relative;
}
.paypal-service-charge-list > li + li {
    margin-top: .3em;
}
.paypal-service-charge-list > li::before {
    position: absolute;
    content: '';
    left: -18px;
    top: 10px;
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 100%;
}
.paypal-service-charge-list > li:nth-child(1):before {
    background-color: #006abe;
}
.paypal-service-charge-list > li:nth-child(2):before {
    background-color: #f05d6e;
}
.paypal-service-charge-list > li:nth-child(3):before {
    background-color: #73d5f3;
}
.paypal-service-charge-list > li label {
    width: 80px;
    font-weight: bold;
}
.paypal-service-charge-list > li a {
    margin-left: .35em;
    font-size: .8em;
}

.pm25-result {
    background-color: #e8e8eb;
    background-image: url(../../images/web/bg-cloud.png);
    background-image: url(../../images/web/bg-cloud.png), linear-gradient(135deg, #e8e8eb, #d8d8d8);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 1rem;
}
.pm25-wrap {
    padding: 20px;
    color: #000;
}
.pm25-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
}
.pm25-title > span.pm25-value {
    font-size: 2.25em;
    font-weight: 400;
    line-height: 1;
}
.aqi-info {
    font-size: .9rem;
    padding-left: 3px;
}
.aqi-info > p {
    margin-bottom: 6px;
}
.aqi-update {
    font-size: .8rem;
    padding-left: 3px;
    margin-top: 1rem;
    color: #585858;
}
.pollutant-wrap {
    background-color: rgba(136, 146, 156, 0.25);
    color: #242424;
    border-radius: 4px;
    padding: 18px 24px;
}
.pollutant-wrap h3 {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(238,238,238,.6);
    font-size: 1.1rem;
}
.pollutant-wrap ul {
    font-size: .95rem;
    color: inherit;
}
.pollutant-wrap ul > li + li {
    margin-top: 5px;
}
.pollutant-wrap small {
    color: #585858;
}

.weather-header {
    position: relative;
    background-color: #f6fbff;
    background-image: url(../../images/web/bg-cloud.png);
    background-image: url(../../images/web/bg-cloud.png), linear-gradient(135deg, #f6fbff, #d6eeff);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
}
.weather-realtime {
    padding: 20px 20px;
}
.aq-graph {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    right: 5px;
    bottom: 5px;
    text-align: center;
    border: 5px solid #fff;
    border-radius: 100%;
    background-color: #157dd3;
    width: 88px;
    height: 88px;
    overflow: hidden;
}
.aq-value {
    font-size: 2.25rem;
    font-weight: 600;
    margin-top: -20px;
    color: #fff;
}
.aq-value.small {
    font-size: 1rem;
    margin-top: -16px;
}
.aq-text {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #000;
    color: #fff;
    padding: 0 0 4px 0;
    font-size: .7rem;
    text-align: center;
    letter-spacing: -.5px;
}
.weather-title {
    color: #157dd3;
    font-size: 2.25rem;
    margin-bottom: 5px;
    line-height: 1;
}
.weather-title > span {
    padding: 0 .5rem;
}
.celsius-symbol {
    font-weight: 400;
    font-size: .6em;
}
.weather-info {
    margin-left: 38px;
    font-size: .9rem;
    color: #585858;
}
.weather-info + .weather-info {
    margin-top: 4px;
}
.weather-date > span + span,
.weather-info > span + span {
    margin-left: 10px;
}
.weather-date {
    margin-left: 38px;
    margin-bottom: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #585858;
}
.weather-update {
    margin-left: 38px;
    margin-top: 20px;
    font-size: .8rem;
    color: #999;
}
.weather-subtitle {
    font-size: 1.2rem;
    margin: 1.5rem 0 0 0;
}
.weather-subtitle > i {
    font-weight: 400;
}
.weather-index {
    background-color: rgba(16, 37, 61, 0.4);
    color: #fff;
    border-radius: 4px;
    border-bottom-right-radius: 20px;
    padding: 20px 25px;
}
.weather-index .weather-subtitle {
    margin: 0 0 12px 0;
    padding-bottom: 1px;
    font-size: 1.1rem;
    border-bottom: 1px solid #ddd;
}
.weather-index .weather-subtitle > span {
    padding-bottom: 5px;
    border-bottom: 2px solid #ddd;
}
.weather-index-list {
    font-size: .9rem;
    color: inherit;
}
.weather-index-list > li + li {
    margin-top: 5px;
}
.weather-24-hours-chart {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: rgba(24, 46, 78, 0.05);
    background-image: url(../../images/web/bg-cloud.png);
    background-position: center -50px;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px 15px 10px 10px;
}
.weather-7-days {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.weather-7-days > li {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    margin-bottom: 15px;
    width: 30%;
    font-size: .9rem;
    background-color: #f6fbff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    line-height: 1;
    transition: all .3s;
}
.weather-7-days > li:first-child {
    width: 100%;
}
.weather-7-days > li:hover {
    border-color: #22b7e4;
}
.weather-7-days > li > span + span {
    margin-top: .8rem;
}
.weather-7-days > li > span.weather-week {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .5px;
}
.weather-7-days > li > span.weather-week > small {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0;
    color: #999;
}
.weather-7-days > li > span.weather-value {
    font-size: .9rem;
    letter-spacing: -.5px;
}

.btn.btn-exchange {
    color: #157dd3;
    background-color: #f8f8f8;
    padding: 0;
    height: 100%;
    font-size: .9rem;
    border-radius: 0;
}
.rate-result {
    font-size: 1.2rem;
    font-weight: 600;
}
.unit-result-header {
    margin-bottom: 1.5em;
}
.unit-result-header > h3 {
    margin-bottom: 0;
}

.screenshot-detail {
    font-size: .9rem;
}
.screenshot-detail h4 {
    margin-bottom: 1rem;
    color: #006abe;
}
.screenshot-detail > p > label {
    width: 70px;
    font-weight: 600;
}
.screenshot-output-wrap {
    width: 100%;
}
.screenshot-error {
    padding: 1rem;
    font-size: 1.2rem;
    color: #e6162d;
    text-align: center;
}
.screenshot-failed {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 245px;
}
.arrow-box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #157dd3;
    text-shadow: 0 1px 0 #fff;
    line-height: 1.2;
    width: 100%;
    min-height: 60px;
    border-radius: 6px;
    font-weight: 300;
    font-size: 1.5em;
    letter-spacing: 2px;
}
.arrow-positions > li {
    width: 40%;
}

.hz-list {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    list-style: none;
    margin: 0!important;
    padding: 0;
}
.hz-list > li {
    width: 25%;
    margin: 1em 0;
    text-align: center;
}
.hz-list.three-col-xs > li {
    width: 33.3333333%;
}
.hz-list > li > ruby {
    display: block;
    font-family: "KaiTi";
    font-size: 2em;
    color: #000;
    line-height: 1;
}
.hz-list > li > ruby > rt {
    padding: 5px;
    font-family: Consolas, Menlo, Monaco, courier, monospace;
}
.hz-list > li > small {
    color: #585858;
}

.text-converted-result {
    max-height: 500px;
    min-height: 220px!important;
    height: auto;
    background-color: #f8f8f8!important;
    overflow: scroll;
}
.options {
    list-style: none;
}
.options.inline {
    line-height: 1.2;
}
.options.inline > li {
    display: inline-block;
    margin-right: 15px;
    margin-top: 3px;
}
.options.inline > li:last-child {
    margin-right: 0;
}
.options > li label + i.iconfont {
    margin-left: 5px;
}
.options > li label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.options > li input[type=radio],
.options > li input[type=checkbox] {
    position: absolute;
    opacity: 0;
}
.options > li input[type=radio] + label,
.options > li input[type=checkbox] + label {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.option + label {
    color: #585858;
    border: 1px solid #d4d4d4;
    padding: 4px 10px 4px 9px;
    background-color: #fff;
    font-size: .9em;
}
.options.options-lg .option + label {
    padding: 10px 16px 10px 16px;
    font-size: 1em;
}
.option + label::after {
    position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid #d4d4d4;
    border-bottom: 6px solid #d4d4d4;
}
.option:checked + label {
    border-color: #006abe;
    color: #006abe;
}
.option:checked + label::after {
    border-right-color: #006abe;
    border-bottom-color: #006abe;
}
.option:not(:checked) + label:hover {
    color: currentColor;
    border-color: #006abe;
}

.feedback-param {
    padding-left: .5rem;
}
.feedback-form .options.inline > li {
    margin-right: 0;
    margin-top: 0;
}
.feedback-form .options.inline > li + li {
    margin-left: 1.4rem;
}
.feedback-form .options.options-lg .option + label {
    padding: 12px 18px 12px 18px
}

.format-option-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
}
.httpstatus-heading {
    font-weight: 600;
    border-bottom: 2px solid #ddd;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.httpstatus-body .label {
    font-size: .85rem;
    font-weight: 600;
}

.qrcode-wrap img {
    border: 1px solid #585858;
}
.form-group-qrcode {
    display: none;
}
.result-title + .img-output-container {
    margin-top: 0;
}
.img-output-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    border: 2px dashed #4d88a5;
    padding: 1rem;
    background-color: #f6f8f9;
    overflow-y: scroll;
}
.img-output-container:hover {
    border-color: #47a8d8;
}
.img-output-container.douyin-img-output-container {
    min-height: 245px;
}
.img-output-container.qrcode-img-output-container {
    min-height: 278px;
}
.img-placeholder {
    color: #babfce;
    font-weight: 300;
}
.img-output-wrap canvas,
.img-output-wrap img,
.img-output-wrap svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.barcode-img-output-container .img-output-wrap {
    max-height: 480px;
}

.barcode + .barcode {
    margin-top: 1rem;
}
.barcode-buttons > .btn {
    display: block;
    width: 100%;
}
.barcode-buttons > .btn + .btn {
    margin-top: 10px;
}
.qrcode-tip {
    position: relative;
    border: 1px solid #e8e8e8;
    margin-top: 15px;
    background-color: #fafafd;
    padding: 15px 20px 15px 35px;
    text-align: justify;
    font-size: .9rem;
    font-weight: 300;
    color: #999;
}
.qrcode-tip::before {
    position: absolute;
    content: '\e836';
    font-family: "iconfont";
    left: 12px;
}
.qrcode-option-tip {
    font-size: .9rem;
    font-weight: 300;
    color: #999;
    margin-bottom: 15px;
}
.logo-icon-list {
    margin-top: -16px;
}
.link-icon,
.link-icon:visited {
    display: block;
    padding: 12px;
    margin-top: 16px;
    border: 1px solid #e4e4e4;
    transition: all .3s;
}
.link-icon:hover {
    border-color: #585858;
}
.link-icon > img {
    display: block;
    margin: 0 auto;
    width: 24px;
    height: auto;
    border-radius: 100%;
}

.meta-tag-form-group a[data-example],
.meta-tag-form-group a[data-example]:visited {
    color: #157dd3;
    margin-right: .35rem;
}
.meta-tag-form-group a[data-example]:hover {
    color: #242424;
}

.tool-powered-by {
    font-size: .8rem;
    color: #999;
    text-align: center;
}
.tool-powered-by a,
.tool-powered-by a:visited {
    color: inherit;
}
.print-date {
    font-size: .9rem;
    text-align: right;
}
.track-info-header {
    position: relative;
    padding: 1rem 0.5rem 0 0.75rem;
}
.track-title {
    margin-bottom: .3rem;
    margin-top: 0;
    color: #000;
    font-size: 1.1rem;
    line-height: 1.5;
}
.track-title > span {
    letter-spacing: 1px;
}
.track-meta {
    font-size: .8rem;
    padding-left: 2px;
    color: #585858;
}
.track-meta > span {
    margin-right: 1.5rem;
}
.track-meta > span:last-child {
    margin-right: 0;
}
.track-info-status {
    position: absolute;
    right: 2rem;
    top: 1.3rem;
    color: currentColor;
    background-color: #eee;
    padding: .6rem 1rem;
    border-radius: 1.5rem;
    font-size: .9rem;
    font-weight: 600;
    line-height:1;
}
.track-info-status-success {
    color: #006abe;
    background-color: #e2f8e7;
}
.track-info-status-error {
    color: #e6162d;
    background-color: #f8dddf;
}
.domain-content-wrap a.link-track-error,
.domain-content-wrap a:hover.link-track-error {
    color: inherit;
    text-decoration: none;
}
.track-info-body {
    padding: 0 .5rem .5rem .75rem;
}
.track-list {
    list-style: none;
    margin-left: .5rem;
    margin-right: .5rem;
    margin-top: 1.5rem;
    font-size: .9rem;
}
.track-list > li {
    position: relative;
    padding-left: 2em;
    line-height: 1.5;
    border-left: 2px solid transparent;
}
.track-list > li:first-child {
    color: #f90;
    font-weight: 600;
}
.track-list.signed-in > li:first-child {
    color: #006abe;
    font-weight: 600;
}
.track-list > li:not(:last-child) {
    border-left-color: #ccc;
    padding-bottom: 1.2rem;
}
.track-list > li > .track-time {
    font-size: .9em;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    letter-spacing: .5px;
    margin-bottom: 3px;
    line-height: 1;
}
.track-list > li:not(:first-child) > .track-time {
    color: #585858;
}
.track-list > li:not(:last-child) > div:last-child {
    border-bottom: 1px solid #eee;
    padding-bottom: .75rem;
}
.track-list > li::before,
.track-list > li::after {
    content: '';
    position: absolute;
    display: block;
    border-radius: 100%;
}
.track-list > li::before {
    top: -2px;
    left: -9px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 2px solid #999;
    box-shadow: 0 2px 0 0px #f7f7f4, 0 -2px 0 0px #f7f7f4;
}
.track-list > li:first-child::before {
    border-color: #f90;
}
.track-list > li:first-child::after {
    background-color: #f90;
}
.track-list.signed-in > li:first-child::before {
    border-color: #006abe;
    background-color: #006abe;
}
.track-list.signed-in > li:first-child::after {
    content: '\e642';
    font-family: iconfont;
    font-size: .9em;
    color: #fff;
    width: 0;
    height: 0;
    left: -7px;
    top: -3px;
}
.track-list > li:first-child::before,
.track-list > li:last-child::before {
    box-shadow: none;
}
.track-list > li::after {
    top: 3px;
    left: -4px;
    width: 6px;
    height: 6px;
    background-color: #999;
}
.track-list > li:last-child::before {
    width: 22px;
    height: 22px;
    left: -12px;
    top: -4px;
}
.track-list > li:last-child::after {
    content: '\e66e';
    font-family: iconfont;
    font-size: .8em;
    color: #999;
    width: 0;
    height: 0;
    left: -7px;
    top: -2px;
}

.wk-tool-info {
    background-color: #fefeff;
    border: 1px solid #bbb8b8;
    padding: 1.5rem;
    border-radius: .25rem;
}
.wk-tool-info h3 {
    font-weight: normal;
    font-size: 1.25rem;
    margin-bottom: .5rem;
}
.wk-tool-links {
    display: flex;
    align-items: center;
    font-size: .9em;
    padding-left: 1.6rem;
}
.wk-tool-links > a,
.wk-tool-links > a:visited {
    display: inline-flex;
    align-items: center;
    color: currentColor;
}
.wk-tool-links > a:hover {
    color: #157dd3;
}
.wk-tool-links a + a {
    margin-left: 1.5em;
}
.wk-tool-links > a > svg {
    margin-right: 4px;
}
.wk-main-frame {
    border-bottom: 2px solid #ccc;
    border-top: 2px solid #ccc;
    height: 604px;
    overflow: hidden;
}

.shares {
    margin-top: 8px;
    font-size: .8rem;
    color: #777;
}
.share-to,
.share-to:visited,
.share-to:hover {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 23px;
    color: #fff;
    border-radius: 100%;
    font-size: .85rem;
    transition: all .3s;
    text-align: center;
}
.share-to + .share-to {
    margin-left: 6px;
}
.post-share .share-to {
    display: block;
    background-color: #fff;
    width: 34px;
    height: 34px;
    line-height: 34px;
    color: #b1b6be;
    font-size: 1.2rem;
    margin-top: 12px;
    box-shadow: 0 2px 4px rgba(180,180,180,.4);
}
.post-share .share-to:hover {
    color: #fff;
}
.post-share .share-to + .share-to {
    margin-left: 0;

}

.share-to-wechat {
    background-color: #52df8a;
}
.share-to-wechat:hover {
    background-color: #006abe;
}
.share-to-wechat-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    text-align: left;
    line-height: 1.5;
}
.share-to-wechat-title > img {
    margin-right: 8px;
}
.tingle-modal-box__content .share-to-wechat-title > h4 {
    margin-bottom: 0;
}
.share-to-weibo {
    background-color: #f05d6e;
}
.share-to-weibo:hover {
    background-color: #E6162D;
}
.share-to-qq {
    background-color: #73d5f3;
}
.share-to-qq:hover {
    background-color: #48c5eb;
}
.share-to-qzone {
    background-color: #ffcd00;
}
.share-to-qzone:hover {
    background-color: #f0c417;
}
.share-tips {
    font-size: .9rem;
    font-weight: 300;
}
.page-qrcode-container {
    margin-bottom: .5rem;
}

.tool-share {
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 12px;
    background-color: #f8f8f8;
}
.tool-share h2 {
    font-size: 1rem;
    margin: 0;
}
.tool-url {
    position: relative;
    font-size:.9rem;
    border: 1px solid #d8d8d8;
    padding: .3rem .5rem;
    border-radius: 2px;
    background-color: #fff;
}
.tool-url > .btn {
    position: absolute;
    right: .3rem;
    top: .3rem;
    font-size: .8rem;
    padding: 6px 6px;
    z-index: 10;
}
.tool-url::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 80%;
    background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.8) 10%, #fff);
    right: 42px;
    top: 10%;
    z-index: 5;
}
.relative {
    position: relative;
}
.relative .btn-copy {
    position: absolute;
    right: 15px;
    bottom: 7px;
}
a.btn-copy:hover {
    text-decoration: none;
}

.chinese-amount-words-wrap {
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 20px 30px;
}
.chinese-amount-words {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    font-size: 1.5rem;
    line-height: 1.5;
}
.chinese-amount-words + .chinese-amount-words {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
}
.chinese-amount-words > li {
    margin-right: 1.75rem;
}

.page-error {
    padding-top: 60px;
    padding-bottom: 60px;
}
.page-error h1 {
    font-size: 1.5rem;
    margin-bottom: 0px;
    color: #e6162d;
}
.text-page-not-found-en {
    color: #a8a8a8;
    font-size: .9rem;
}
.page-errro-btn-wrap {
    margin-top: 30px;
}

/**
 * Page footer
 */
.page-footer {
    font-size: .8rem;
    padding-top: 30px;
    padding-bottom: 30px;
    color: #fff;
    background-color: #17434d;
    text-align: center;
}
.page-footer a,
.page-footer a:visited {
    color: #fff;
}
.page-footer a:hover {
    text-decoration: underline;
}

/**
 * tingle dialog
 */
.modal-wechat-qrcode .tingle-modal-box {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.page-qrcode-container img {
    margin: 0 auto;
}
.tingle-modal-box__content {
    position: relative;
    padding: 1rem;
}
.tingle-modal-box__content h4,
.tingle-modal-box__content .tingle-modal-title {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.2rem;
}
.tingle-modal-box__content .modal-header {
    margin-bottom: 1rem;
}
.tingle-modal-box__content .modal-header.underline {
    padding-bottom: .5rem;
    border-bottom: 1px solid #e8e8e8;
}
.tingle-modal-box__content .modal-header h4 {
    margin: 0;
    line-height: 1;
}
.tingle-modal-box__content > *:last-child {
    margin-bottom: 0;
}
.tingle-modal__close {
    position: absolute;
    font-family: inherit;
    font-size: 1.8rem;
    color: #585858;
    width: 2rem;
    height: 2rem;
    top: 5px;
    right: 5px;
}
.tingle-modal-box__footer > .btn + .btn {
    margin-left: .75rem
}
.tingle-modal__close:hover {
    color: inherit;
}

/**
 * Custom File input
 */
.custom-file {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    cursor: pointer;
}
.custom-file::after,
.custom-file::before {
    content: '';
    display: table;
}
.custom-file-input {
    position: absolute;
    display: block;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
}
.custom-file-control {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    height: auto;
    white-space: nowrap;
    color: #777;
    font-weight: 400;
    font-size: .9rem;
    padding: 4px 6px;
    border-radius: 2px;
    line-height: 1.8;
    -webkit-user-select: none;
    user-select: none;
}
.custom-file-lg .custom-file-control {
    padding: 7px 6px;
}
.custom-file-lg .custom-file-control::after {
    padding: 7px 12px;
}
.custom-file-control::after {
    content: '浏览...';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    color: #666;
    border: 0 solid #d6d9d9;
    border-left-width: 1px;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    background-color: #e8e8e8;
    padding: 4px 12px;
    line-height: 1.8;
}
.custom-file-control:active,
.custom-file-control:focus,
.custom-file-control:hover,
.custom-file-input:focus ~ .custom-file-control {
    border-color: #006abe;
}
.custom-file-control:hover::after {
    color: #242424;
}
.custom-file-control img {
    max-width: 100%;
    width: 24px;
    height: auto;
}
.custom-file-control .filename-preview {
    padding: 0 6px;
}

/**
 * Loading
 */
.loading-section {
    padding: 40px;
    font-size: .9rem;
    display: none;
}
.loading-section .loading {
    margin-right: 10px;
}
.loading {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #58c3e4;
    -webkit-animation: loading 1.15s infinite ease-in-out;
    animation: loading 1.15s infinite ease-in-out;
}
@-webkit-keyframes loading {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}
@keyframes loading {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

.loading-box.editor-loading {
    justify-content: center;
    height: 346px;
}
.loading-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: .9rem;
    color: #585858;
    line-height: 1;
}
.loading-rect {
    display: inline-block;
	height: 26px;
	font-size: .9em;
    margin-right: 8px;
}
.loading-rect > i {
	display: inline-block;
	height: 100%;
	width: 4px;
	background-color: rgba(85, 102, 102, .8);
	-webkit-animation: loading-rect-animate 1.2s infinite ease-in-out;
	animation: loading-rect-animate 1.2s infinite ease-in-out;
}
.loading-rect > i + i {
    margin-left: 3px;
}
.loading-rect > i:nth-child(2) {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}
.loading-rect > i:nth-child(3) {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}
.loading-rect > i:nth-child(4) {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}
.loading-rect > i:nth-child(5) {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}
@-webkit-keyframes loading-rect-animate {
	0%,
	40%,
	100% {
		-webkit-transform: scaleY(0.4);
		transform: scaleY(0.4);
	}
	20% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
}
@keyframes loading-rect-animate {
	0%,
	40%,
	100% {
		-webkit-transform: scaleY(0.4);
		transform: scaleY(0.4);
	}
	20% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
}

@-webkit-keyframes xloading{
  0%{
    -webkit-transform:rotate3d(0, 0, 1, 0deg);
            transform:rotate3d(0, 0, 1, 0deg);
  }
  100%{
    -webkit-transform:rotate3d(0, 0, 1, 360deg);
            transform:rotate3d(0, 0, 1, 360deg);
  }
}
@keyframes xloading{
  0%{
    -webkit-transform:rotate3d(0, 0, 1, 0deg);
            transform:rotate3d(0, 0, 1, 0deg);
  }
  100%{
    -webkit-transform:rotate3d(0, 0, 1, 360deg);
            transform:rotate3d(0, 0, 1, 360deg);
  }
}

.loading-text {
    display: inline-flex;
    align-items: center;
    font-size: .95rem;
    color: #585858;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}
.loading-text::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: url(../../images/web/xloading.svg) center center transparent;
    background-size: 100%;
    margin-right: 4px;
    /* 动起来 */
    -webkit-animation: xloading 1s steps(12, end) infinite;
    animation: xloading 1s steps(12, end) infinite;
}

.xspinner {
    background: url(../../images/web/throbber.svg) 0 0 no-repeat transparent;
    height: 16px;
    line-height: 16px;
    font-size: .95em;
    padding-left: 24px;
    user-select: none;
    -webkit-user-select: none;
}

.green-btn{
    border: 2px solid #2c7800!important;
    background-color: #2c7800!important;
    color: white !important;
}