body {
    margin: 0;
    padding: 0;
    color: #242424;
    font-size: 16px;
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
    line-height: 1.8
}

*,*::before,*::after {
    box-sizing: border-box
}

*[disabled] {
    cursor: not-allowed
}

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

button,input,optgroup,select,textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

.iconfont {
    font-size: inherit !important
}

.iconfont.iconfont-2x {
    font-size: 2rem !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: #3bb76d;
    text-decoration: none
}

a.link-default,a.link-default:visited {
    color: #157dd3
}

a.link-primary,a.link-primary:visited {
    color: #3bb76d
}

a.link-default:hover,a.link-primary: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
}

fieldset {
    margin: 0;
    border: 1px solid #d6d9d9
}

fieldset>legend {
    padding: 0 8px;
    font-weight: 600
}

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;
    box-shadow: 0 1px 1px 0 #e8e8e8 inset;
    text-align: center;
    user-select: none;
    -webkit-user-select: none
}

.btn:hover,a.btn:hover {
    border-color: #b8b8b8;
    color: #242424;
    background-color: #d0d0d0;
    box-shadow: 1px 1px 4px 0 #ddd inset;
    text-decoration: none
}

.btn.btn-primary,.btn.btn-primary:visited,a.btn.btn-primary,a.btn.btn-primary:visited {
    border-color: #119e49;
    color: #fff;
    background-color: #3bb76d;
    box-shadow: 0 0 2px 0 #20c161 inset
}

.btn.btn-primary:hover,a.btn.btn-primary:hover {
    border-color: #0e873c;
    background-color: #119e49;
    box-shadow: 0 0 2px 0 #20c161 inset;
    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;
    box-shadow: none
}

.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;
    box-shadow: 0 0 2px 0 #56c5e7 inset
}

.btn.btn-info:hover,a.btn.btn-info:hover {
    border-color: #36a3c4;
    background-color: #34aed3;
    box-shadow: 0 0 2px 0 #4ebee0 inset;
    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;
    box-shadow: 0 0 2px 0 #eb233b inset
}

.btn.btn-error:hover,a.btn.btn-error:hover {
    border-color: #c7152a;
    background-color: #d8172d;
    box-shadow: 0 0 2px 0 #dd1a31 inset;
    text-decoration: none
}

.btn.btn-sm {
    font-size: .8em;
    padding: 7px 10px
}

.btn.btn-xs {
    font-size: .75em;
    padding: 5px 8px
}

.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;
    box-shadow: none;
    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%;
    margin: -2px 4px -2px 0;
    -webkit-animation: xloading 1s steps(12,end) infinite;
    animation: xloading 1s steps(12,end) infinite
}

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;
    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
}

.form-control {
    position: relative;
    display: block;
    width: 100%;
    height: calc(2.15rem + 2px);
    padding: .5rem .875rem;
    font-size: .9rem;
    color: #242424;
    border: 1px solid #d2d6d6;
    border-radius: .125rem;
    background-color: #fff;
    transition: border-color .175s ease-in-out,box-shadow .175s ease-in-out,-webkit-box-shadow .175s ease-in-out;
    -webkit-appearance: none
}

.form-control:focus,.form-control:required,.form-control:invalid {
    border-color: #119e49;
    box-shadow: 0 0 2px 0 rgba(110,233,131,0.85)
}

.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;
    box-shadow: none
}

.form-control.readonly,.form-control[readonly],.form-control.readonly:focus,.form-control[readonly]:focus {
    color: inherit
}

.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
}

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,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='0045'%3E%3Cpathfill='%23333'd='M20L02h4zm05L03h4z'/%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 {
    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>textarea.form-control {
    height: auto
}

.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-append {
    display: flex;
    margin-left: -1px
}

.input-group-append>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.input-group-append>select {
    height: 100%
}

.input-group-append>.input-group-text {
    display: flex;
    align-items: center;
    background-color: #e8e8e8;
    color: #242424;
    padding: .15rem .7rem;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border: 1px solid #d2d6d6
}

.input-group-lg .input-group-append>.input-group-text {
    padding: .15rem .85rem;
    font-size: 1.05em
}

.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%
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: .9rem;
    margin-bottom: 20px
}

table td,table th {
    padding: 12px;
    border: 1px solid #e4e8ee;
    line-height: 1.5
}

table td {
    background-color: #fff;
    word-break: break-all
}

table tbody tr:hover {
    background-color: #f8f8f8
}

table tbody tr:hover th,table tbody tr:hover td {
    background-color: transparent
}

table th {
    background-color: #f4f4f8;
    white-space: nowrap
}

table pre {
    white-space: pre-wrap
}

.table-responsive table td,.table-responsive table th {
    word-break: normal
}

pre {
    font-size: .9rem;
    font-family: Consolas,Monaco,courier,monospace;
    margin-top: 0;
    line-height: 1.5
}

code {
    font-size: .9rem;
    font-family: Consolas,Monaco,courier,monospace;
    background-color: #f6f6f9;
    padding: 3px 5px;
    margin: 0 1px;
    color: #e6162d;
    border-radius: 2px;
    white-space: nowrap;
    vertical-align: baseline;
    line-height: 1.5;
    outline: 0
}

kbd {
    font-size: .9rem;
    font-family: Consolas,Monaco,courier,monospace;
    background-color: #f6f6f9;
    border: 1px solid #999;
    padding: 3px 5px 3px 5px;
    margin: 0 1px;
    color: #242424;
    border-radius: 2px;
    line-height: 1.5;
    outline: 0
}

.monospace {
    font-family: Consolas,Monaco,courier,monospace
}

hr {
    border: 0;
    border-top: 1px solid #e8e8e8;
    margin-top: 30px;
    margin-bottom: 30px;
    box-sizing: content-box
}

.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: #3bb76d;
    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-circle {
    border-radius: 100%
}

.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
}

.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: .215rem;
    border-top: .3rem solid;
    border-right: .3rem solid transparent;
    border-bottom: 0;
    border-left: .3rem 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
}

.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: 0
}

.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: .7rem .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: #e2f8e7;
    border-color: #aed3b6
}

.alert-info {
    color: #0e7d9e;
    background-color: #d6f1fa;
    border-color: #22b7e4
}

.alert-error {
    color: #5a1019;
    background-color: #ffeff0;
    border-color: #f2c4c8
}

.alert a {
    color: inherit
}

.alert a.alert-link {
    font-weight: 600
}

.alert a:hover {
    text-decoration: underline
}

.alert ol,.alert ul {
    margin-left: 20px
}

.alert p {
    margin-bottom: 0
}

.alert-heading {
    font-size: 1rem;
    color: inherit;
    margin-top: 0;
    margin-bottom: .15rem
}

.pure-tip {
    color: #585858;
    font-size: .9rem
}

.pure-tip a,.pure-tip a:visited {
    color: #157dd3
}

.pure-tip a:hover {
    text-decoration: underline
}

.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
}

.pt-1 {
    padding-top: 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: #3bb76d
}

.text-muted {
    color: #999
}

.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
}

.align-self-start {
    align-self: flex-start
}

.align-self-stretch {
    align-self: stretch
}

.hidden {
    display: none !important
}

.block {
    display: block !important
}

.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-entry {
    font-size: 1rem;
    text-align: justify
}

.post-entry h2 {
    font-size: 1.5em;
    font-weight: 300;
    margin-top: 1.5em;
    line-height: 1.5;
    border-bottom: 1px solid #e8e8e8
}

.post-entry h3 {
    font-size: 1.1em;
    margin-bottom: .5em;
    margin-top: 1.5em
}

.post-entry h3>.iconfont {
    font-weight: 400
}

.post-entry ul,.post-entry ol {
    margin-left: 3em;
    margin-bottom: 2em;
    padding-right: 1rem
}

.post-entry ul>li+li,.post-entry ol>li+li {
    margin-top: .5rem
}

.post-entry a,.post-entry a:visited {
    color: #157dd3
}

.post-entry a:hover {
    text-decoration: underline
}

.content-header {
    border-bottom: 1px solid #dde0d8;
    padding: 15px
}

.content-container {
    padding-top: 30px;
    padding-bottom: 60px;
    min-height: 400px
}

.content-container aside {
    margin-top: 20px
}

aside>.aside-box+.aside-box {
    margin-top: 1rem
}

.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: #ddd;
    border-radius: 2px;
    line-height: 1
}

.label.label-success {
    color: #fff;
    background-color: #3bb76d
}

.label.label-error {
    color: #fff;
    background-color: #e6162d
}

.label.label-info {
    color: #fff;
    background-color: #48c5eb
}

.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: #3bb76d
}

.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: #3bb76d
}

.options-inverse .custom-checkbox:checked+label:before,.options-inverse .custom-radio:checked+label:before {
    border-color: #fff
}

.custom-checkbox:disabled+label,.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: #3bb76d;
    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: #3bb76d
}

.custom-radio:checked:disabled+label:after {
    background-color: #b8b8b8
}

.row-list>.row+.row {
    margin-top: 15px
}

.row-list>.row>label {
    font-weight: 600
}

.login-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: .9rem;
    color: #999;
    line-height: 1.6
}

.login-wrap>i.iconfont {
    font-size: 1.6em !important;
    color: #585858
}

.login-wrap>a {
    margin: 0 4px
}

.signup-container {
    background: #f6f9f9
}

.signup-form-wrap {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 30px;
    border-radius: 4px
}

.join-flow {
    position: relative;
    margin: 0 0 40px 0;
    display: flex;
    justify-content: space-between;
    counter-reset: step
}

.join-flow::after {
    content: '';
    position: absolute;
    display: block;
    border-top: 4px solid #f8f8f8;
    top: 21px;
    left: 20px;
    right: 20px;
    z-index: 1
}

.join-flow>li {
    list-style: none;
    text-align: center;
    font-size: .9rem;
    color: #ccc
}

.join-flow>li.active {
    color: #585858
}

.join-flow>li::before {
    position: relative;
    display: block;
    counter-increment: step;
    content: counter(step);
    background-color: #f8f8f8;
    font-size: 1.35em;
    font-weight: 600;
    width: 44px;
    height: 44px;
    line-height: 44px;
    margin: 0 auto 10px auto;
    text-align: center;
    border-radius: 100%;
    z-index: 2
}

.why-join-list {
    list-style: none;
    color: #585858;
    margin-bottom: 30px;
    margin-left: 10px;
    font-size: .95rem
}

.why-join-list>li+li {
    margin-top: 10px
}

.why-join-list>li::before {
    content: '\e642';
    font-family: 'iconfont';
    font-weight: 600;
    margin-right: 8px
}

.member-body {
    padding-top: 15px;
    padding-bottom: 15px
}

.member-info-box {
    display: flex;
    align-items: center;
    background-color: #3bb76d;
    color: #fff;
    padding: 18px 15px;
    line-height: 1.5
}

.member-info-box>img {
    margin-right: 10px;
    border-radius: 100%;
    border: 3px solid #fff;
    background-color: #fff
}

.member-info-brief h4 {
    font-size: 1rem;
    letter-spacing: -.5px;
    margin: 0
}

.signature,.signature>a,.signature>a:visited {
    color: inherit;
    font-size: .8rem;
    margin: 0
}

.member-menu {
    position: relative;
    border: 1px solid #ddd;
    margin-top: -1px;
    padding-top: 10px;
    padding-bottom: 10px
}

.member-menu::before {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    border-top: 1px solid #3bb76d
}

.member-menu>li {
    list-style: none
}

.member-menu>li.active>a,.member-menu>li.active>a:hover {
    font-weight: 600;
    color: #3bb76d;
    background-color: #fff;
    cursor: default
}

.member-menu>li>a,.member-menu>li>a:visited {
    display: block;
    padding: 8px 22px;
    font-size: .9rem;
    background-color: #fff
}

.member-menu>li>a:hover {
    background-color: #f8f8f8;
    font-weight: 600
}

.member-menu>li>a>i {
    display: inline-block;
    width: 36px;
    text-align: center
}

.member-content {
    border: 1px solid #ddd;
    border-radius: 2px
}

.member-content+.member-content {
    margin-top: 15px
}

.member-content-title {
    font-size: .9rem;
    background-color: #f8f8f8;
    border-bottom: 1px solid #dfdfdf;
    margin: 0
}

.member-content-title>span {
    display: inline-block;
    padding: 10px 15px
}

.member-content-body {
    font-size: .9rem;
    padding: 20px
}

.member-content-body p {
    margin-bottom: 0
}

.member-content-body p+p {
    margin-top: .6rem
}

.activation-wrap {
    background-color: #f9faf9;
    border: 1px solid #ddd;
    padding: 30px;
    border-radius: 4px
}

.activation-wrap h2 {
    font-size: 1.5rem
}

.activation-actions {
    color: #999;
    font-size: .95rem;
    padding-left: 26px
}

.activation-faq {
    margin-left: 30px
}

.activation-faq li>p:first-child {
    font-weight: 600;
    margin-bottom: 0
}

.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-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: #3bb76d;
    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 {
    position: relative;
    overflow: hidden
}

.uploader-content .btn input[type=file] {
    position: absolute;
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0
}

.uploader-content .btn 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;
    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-sm {
    font-size: .95rem
}

.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
}

.breadcrumb>li {
    display: inline-block
}

.breadcrumb>li:not(:first-child)::before {
    content: '/';
    display: inline-block;
    margin: 0 10px
}

.page-header {
    padding-top: 16px;
    padding-bottom: 10px;
    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 {
    box-shadow: none;
    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)
}

.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: #3bb76d;
    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: #3bb76d;
    font-size: .8rem
}

.search-result-summary {
    color: #585858;
    font-size: .8rem;
    margin-bottom: 0
}

.link-ad img {
    display: inline-block;
    border-radius: 8px;
    max-width: 100%;
    height: auto
}

.hot-tool-section {
    position: relative;
    padding-top: 10px;
    padding-bottom: 50px;
    background-color: #f2f4f2;
    margin-top: 0
}

.hot-tool-section.with-ads {
    padding-top: 8px
}

.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-list {
    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: #3bb76d;
    border-color: #3bb76d;
    font-weight: 400;
    background-color: transparent
}

.tool-list {
    padding: 0;
    list-style: none
}

.tool-list .tool-item {
    position: relative;
    border: 1px solid #e8e8e8;
    font-size: 1rem;
    border-radius: 2px;
    transition: all .3s;
    overflow: hidden
}

.tool-list .tool-item:hover {
    border-color: #ddd
}

.tool-list>li+li {
    margin-top: 10px
}

.hot-tool-section .tool-list>li {
    margin-top: 10px
}

.hot-tool-section .tool-list .tool-item {
    background-color: #fff;
    padding: 20px 20px 18px 20px
}

.tool-item-header {
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    background: linear-gradient(45deg,#fafafa,#f6f6f6);
    padding: 10px 15px;
    line-height: 1;
    border-bottom: 1px solid #e8e8e8
}

.hot-tool-section .tool-item-header {
    background: transparent;
    border: 0 none;
    padding: 0
}

.tool-item-header img {
    margin-right: 8px;
    border-radius: 6px;
    background-color: #fff;
    width: 40px
}

.hot-tool-section .tool-item-header a,.hot-tool-section .tool-item-header a:visited {
    padding: 30px 0 0 72px;
    bottom: 64px
}

.tool-item-header a,.tool-item-header a:visited {
    position: absolute;
    padding: 22px 0 0 66px;
    color: currentColor;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100
}

.tool-item-header a:hover {
    color: #3bb76d
}

.tool-item-header>.row {
    position: relative;
    z-index: 9
}

.tool-item-header h3 {
    margin: 0;
    padding: 0;
    font-size: 1.2em
}

.hot-tool-section .tool-item-header h3 {
    font-size: 1.3em
}

.tool-item-body {
    position: relative;
    color: #585858;
    padding: 20px;
    text-align: justify;
    font-size: .95em
}

.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;
    padding: 13px 20px;
    border-top: 1px solid #eaeaea;
    font-size: .9rem
}

.hot-tool-section .tool-item-footer {
    margin-top: 18px;
    padding: 18px 0 0 0;
    line-height: 1;
    box-shadow: 0 -1px 0 0 #fff,0px -2px 0px 0 rgba(200,200,200,.15)
}

.hot-tool-section .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 0 #fff,-2px -2px 0px rgba(200,200,200,.15)
}

.link-muted,.link-muted:visited {
    color: #999
}

.link-muted:hover {
    color: inherit
}

.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,.tool-title>i.iconfont {
    font-weight: 400
}

.tool-meta {
    font-size: .9rem;
    color: #999;
    margin-bottom: 10px
}

.tool-meta>span+span {
    margin-left: 15px
}

.tool-meta>span>a {
    font-size: inherit;
    color: inherit
}

.tool-meta>span>a:hover {
    color: #3bb76d
}

.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: 1em 1.5em;
    text-align: justify
}

.tool-desc-entry h2 {
    font-size: 1.6em;
    font-weight: 400;
    margin-top: 0;
    border-bottom: 1px solid #e8e8e8
}

.tool-desc-entry *~h2 {
    margin-top: 30px
}

.tool-desc-entry h3 {
    font-size: 1.2em;
    margin-top: 0
}

.tool-desc-entry *~h3 {
    margin-top: 30px;
    margin-bottom: 12px
}

.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 -55px bottom -55px 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.3em;
    margin: 0 0 10px 0
}

.more-tool-title::before {
    content: '#';
    font-weight: 300;
    font-size: .9em;
    margin-right: 5px
}

.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 6px 0;
    padding-left: 15px
}

.more-tool-view-more {
    font-size: .9em;
    color: #999;
    padding-left: 15px;
    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: #3bb76d
}

.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 #3bb76d;
    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-wrap+.tool-content-wrap {
    margin-top: .6rem
}

.tool-content-wrap.bg-gray {
    background-color: #f7f7f4
}

.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
}

.letter-container>.tool-content-wrap>h3 {
    font-size: 1.2rem;
    border-left: 4px solid #3bb76d;
    margin-left: -15px;
    margin-bottom: .2rem;
    padding-left: 11px;
    line-height: 1.5
}

.letter-container>.tool-content-wrap>h3>span {
    font-weight: 400;
    font-size: .5em;
    color: #999;
    margin-left: .5rem
}

.letter-container>.tool-content-wrap>h4 {
    margin-bottom: .3rem;
    font-size: 1rem;
    border-bottom: 1px solid #eee
}

.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 {
    margin: 0 2px
}

.pornhub-text:focus {
    outline: 0
}

.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/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
}

.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: #3bb76d
}

.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/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 {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 2px;
    background-color: #fff;
    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: #3bb76d
}

.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: #3bb76d;
    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>.btn+.btn {
    margin-left: 5px
}

.reference-wrap>h3 {
    margin-bottom: .2rem;
    font-size: 1.2rem
}

.reference-wrap>h3~h3 {
    margin-top: 1rem
}

.reference-wrap>h3>small {
    font-weight: 400;
    font-size: .75em;
    color: #999;
    margin-left: .5rem
}

.reference-wrap table tr td:hover {
    color: #3bb76d
}

.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;
    white-space: pre-wrap;
    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
}

.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;
    background: #fff;
    min-height: auto;
    line-height: 1.5;
    border: 0
}

.form-control-group-body .CodeMirror.CodeMirror-focused,.form-control-group-body .form-control:focus {
    border: 0;
    box-shadow: none
}

.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
}

.most-populars {
    font-size: .85rem;
    margin-top: 5px;
    color: #777
}

.most-populars a,.most-populars a:visited {
    color: inherit
}

.most-populars a:hover {
    color: #3bb76d
}

.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: #3bb76d
}

.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
}

.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.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: #3bb76d
}

.list-table td a:hover,.httpstatus-table td a:hover {
    text-decoration: underline
}

.list-table td.table-lead {
    text-align: center;
    background-color: #f6f8f0;
    font-size: .85rem;
    padding-top: 12px;
    padding-bottom: 12px
}

.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: #3bb76d
}

.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: #3bb76d;
    width: 70px;
    font-size: .9em
}

.error-ico {
    display: none
}

.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: #3bb76d
}

.pswd-strength>span.pswd-middle {
    background-color: #f29587
}

.pswd-strength>span.pswd-weak {
    background-color: #e6162d
}

.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: 0;
    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%;
    box-shadow: none;
    font-size: .9rem;
    border-radius: 0
}

.rate-result,.unit-result {
    font-size: 1.2rem;
    font-weight: 600
}

.unit-result-item {
    border: 1px solid #157dd3;
    background-color: #fff;
    border-radius: 2px;
    margin-bottom: 1rem;
    overflow: hidden
}

.unit-result-item>label {
    display: block;
    padding: .5rem .75rem;
    font-size: .9rem;
    background-color: #157dd3;
    color: #fff
}

.unit-result-value {
    font-size: 1.5rem;
    padding: .75rem;
    background-color: #fff
}

.screenshot-detail {
    font-size: .9rem;
    padding: 1rem 0
}

.screenshot-detail h4 {
    margin-bottom: 1rem;
    color: #3bb76d
}

.screenshot-detail>p>label {
    width: 70px;
    font-weight: 600
}

.screenshot-output-wrap {
    text-align: left
}

.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
}

.text-converted-result {
    max-height: 500px;
    min-height: 220px;
    height: auto;
    background-color: #f8f8f8;
    overflow: scroll
}

.options {
    list-style: none
}

.options.inline {
    line-height: 1
}

.options.inline>li {
    display: inline-block;
    margin-right: 15px;
    margin-top: 3px
}

.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: #3bb76d;
    color: #3bb76d
}

.option:checked+label::after {
    border-right-color: #3bb76d;
    border-bottom-color: #3bb76d
}

.option:not(:checked)+label:hover {
    color: currentColor;
    border-color: #3bb76d
}

.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 {
    border: 2px dashed #4d88a5;
    padding: 15px;
    background-color: #f6f8f9;
    text-align: center;
    overflow-y: scroll
}

.img-output-container:hover {
    border-color: #47a8d8
}

.placeholder-wrap,.img-output-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 245px;
    margin: 0 auto
}

.placeholder-wrap {
    color: #babfce;
    background-color: #fff
}

.placeholder-wrap.barcode-placeholder-wrap,.img-output-wrap.barcode-img-output-wrap {
    min-height: 160px
}

.placeholder-wrap.douyin-placeholder-wrap,.img-output-wrap.douyin-img-output-wrap {
    min-height: 200px;
    height: auto
}

.img-output-wrap canvas,.img-output-wrap img,.img-output-wrap svg {
    max-width: 100%;
    height: auto;
    margin: 0 auto
}

.placeholder-text {
    font-weight: 300;
    font-size: .9rem
}

.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%
}

.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 .5rem 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: #3bb76d;
    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: #3bb76d;
    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 0 #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: #3bb76d;
    background-color: #3bb76d
}

.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
}

.shares {
    margin-top: 8px;
    font-size: .8rem;
    color: #777
}

a.share-to,a.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
}

.share-to-wechat {
    background-color: #52df8a
}

.share-to-wechat:hover {
    background-color: #3bb76d
}

.share-to-wechat-title {
    display: flex;
    align-items: center;
    margin-bottom: 30px
}

.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;
    box-shadow: 0 1px 1px 0 rgba(144,144,173,0.15) inset
}

.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
}

.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: 0;
    color: #e6162d
}

.text-page-not-found-en {
    color: #a8a8a8;
    font-size: .9rem
}

.page-errro-btn-wrap {
    margin-top: 30px
}

.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
}

.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__close {
    position: absolute;
    font-family: inherit;
    font-size: 1.8rem;
    color: inherit;
    width: 2rem;
    height: 2rem;
    top: 5px;
    right: 5px
}

.tingle-modal__close:hover {
    color: #3bb76d
}

.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: #3bb76d
}

.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-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(0) rotateY(0);
        transform: perspective(120px) rotateX(0) rotateY(0)
    }

    50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }

    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(0) rotateY(0);
        transform: perspective(120px) rotateX(0) rotateY(0)
    }

    50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }

    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,0);
        transform: rotate3d(0,0,1,0)
    }

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

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

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

@media only screen and (min-width: 576px) {
    .code-snapshot-top-option-container>.top-option-item+.top-option-item {
        margin-left:3rem;
        margin-top: 0
    }
}

@media only screen and (min-width: 768px) {
    .page-header {
        padding-top:25px;
        padding-bottom: 20px
    }

    .site-title img {
        width: auto
    }

    main>section+section {
        margin-top: 40px
    }

    .hero {
        padding-top: 40px;
        padding-bottom: 0;
        background-position: right -112px center;
        border-bottom: 2px solid #f4f4f4
    }

    .hero-content h2 {
        font-size: 2.2rem;
        font-weight: 400
    }

    .lead {
        font-size: 1.4em;
        font-weight: 300;
        letter-spacing: 1px;
        margin-bottom: 15px
    }

    .alert {
        padding: 1rem 1.25rem
    }

    .form-group>.row>label.control-label:not(.text-left) {
        text-align: right
    }

    .button-group {
        justify-content: flex-start
    }

    .button-group.button-group-center {
        justify-content: center
    }

    .button-group>.btn {
        width: auto;
        margin-bottom: 0
    }

    .button-group>.btn+.btn {
        margin-left: 15px
    }

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

    .row.row-control-group {
        align-items: flex-start
    }

    .row-control-group:not(.no-margin)>[class*='col-']+[class*='col-'] {
        padding-left: 0;
        margin-top: 0
    }

    .row-list>.row>label {
        text-align: right
    }

    .uploader-wrap {
        padding-top: 90px;
        padding-bottom: 90px
    }

    .uploader-content {
        flex-direction: row
    }

    .uploader-content .text-or {
        margin: 0 1rem
    }

    .uploader-desc {
        font-size: 1.1rem
    }

    .tabs::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: 1px solid #e4e4e4;
        z-index: 1
    }

    .tabs>li {
        margin-right: 0;
        margin-bottom: 0;
        border-bottom: 0
    }

    .tabs>li:first-child {
        margin-left: 10px
    }

    .tabs>li.active {
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        border-bottom: 0;
        background-color: #fff;
        z-index: 2
    }

    .tabs>li.active::before {
        content: '';
        position: absolute;
        left: -1px;
        right: -1px;
        top: -1px;
        border-top: 3px solid #f29587
    }

    .tabs>li>a {
        padding: 9px 12px
    }

    .content-header {
        padding: 40px 0
    }

    .post-header>h1 {
        font-size: 2.5em
    }

    .post-header>.post-subtitle {
        font-size: 1.15em
    }

    .post-header,.post-entry {
        padding-left: 0;
        padding-right: 0
    }

    .post-entry h2 {
        font-size: 2em
    }

    .post-entry h3 {
        font-size: 1.2em
    }

    .hot-tool-section {
        padding-top: 40px
    }

    .hot-tool-section .tool-item-body {
        height: 85px
    }

    .hot-tool-section .tool-item-header h3 {
        font-size: 1.2em;
        letter-spacing: -.5px
    }

    .hot-category-wrap {
        width: 65%
    }

    .hot-tool-wrap {
        padding: 25px 20px 20px 20px
    }

    .tool-list>li+li {
        margin-top: 0;
        margin-bottom: 20px
    }

    .hot-tool-section .tool-list>li {
        margin-top: 16px;
        margin-bottom: 0
    }

    .tool-item-header {
        padding: 10px 16px
    }

    .tool-item-header a,.tool-item-header a:visited,.hot-tool-section .tool-item-header a,.hot-tool-section .tool-item-header a:visited {
        position: static;
        padding: 0;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto
    }

    .tool-item-body {
        height: 125px;
        overflow: hidden
    }

    .tool-item-footer {
        margin-top: 15px
    }

    .tool-title {
        font-size: 2.2rem
    }

    .tool-meta {
        font-size: 1rem
    }

    .tool-summary {
        font-size: 1.125rem
    }

    .tool-desc-entry {
        padding: 2em 2.25em
    }

    .tool-desc-entry h2 {
        font-size: 2em
    }

    .tool-desc-entry h3 {
        font-size: 1.2em
    }

    .tool-desc-entry ul,.tool-desc-entry ol {
        margin-left: 3em
    }

    .tool-desc-footer {
        padding-left: 2.2em;
        padding-right: 2.2em
    }

    .pornhub-logo-options {
        width: 60%;
        margin: 0 auto
    }

    .feature-section {
        padding: 60px 0
    }

    .feature-header h3 {
        font-size: 1.8rem;
        font-weight: 400
    }

    .feature-header h4 {
        font-size: 1.4rem;
        line-height: inherit;
        padding: 0
    }

    .feature-header h4::after {
        width: 12%
    }

    .feature-list li>h4 {
        font-size: 1.25rem;
        font-weight: 400
    }

    .feature-list li>p {
        padding-left: 25px;
        padding-right: 15px
    }

    .content-container aside {
        margin-top: 0
    }

    .aside-about {
        font-size: .9rem;
        padding-left: 1.5rem
    }

    .track-info-header {
        padding: 1rem 1.5rem 0 1.5rem
    }

    .track-title {
        font-size: 2rem
    }

    .track-meta {
        font-size: .9rem
    }

    .track-info-body {
        padding: 0 1rem 1rem 1.5rem
    }

    .track-list {
        font-size: 1rem;
        margin-left: .8rem;
        margin-right: .8rem;
        margin-top: 2rem
    }

    .track-list>li:not(:last-child)>div:last-child {
        padding-bottom: 1rem
    }

    .track-list>li::before {
        top: -1px
    }

    .track-list>li::after {
        top: 4px
    }

    .track-list>li:first-child::before {
        width: 22px;
        height: 22px;
        left: -12px;
        top: -4px
    }

    .track-list>li:first-child::after {
        width: 10px;
        height: 10px;
        left: -6px;
        top: 2px
    }

    .track-list.signed-in>li:first-child::after {
        font-size: 1em;
        left: -9px;
        top: -5px
    }

    .search-header {
        padding: 30px 0;
        margin-bottom: 20px
    }

    .search-header h1 {
        font-size: 1.8rem;
        margin-bottom: 0
    }

    .search-result {
        border: 1px solid #e8e8e8;
        border-radius: 2px;
        padding: 30px;
        background: #fafafa
    }

    .search-result-item+.search-result-item {
        margin-top: 25px
    }

    .search-result-title {
        font-size: 1.2rem
    }

    .search-result-summary {
        font-size: .9rem
    }

    .tool-content-wrap {
        padding: 30px
    }

    .tool-content-wrap+.tool-content-wrap {
        margin-top: 1rem
    }

    .letter-container>.tool-content-wrap>h3 {
        font-size: 1.35rem;
        margin-left: -30px;
        padding-left: 26px
    }

    .domain-more-info {
        font-size: 1rem;
        padding-left: 48px
    }

    .domain-content-wrap {
        padding: 40px
    }

    .domain-content-wrap h3 {
        font-size: 1.5rem
    }

    .domain-whois>p>label {
        width: 66px;
        margin-right: 15px
    }

    .domain-whois>p>span {
        width: auto
    }

    .chinese-amount-words {
        font-size: 2rem
    }

    .chinese-amount-words>li {
        margin-right: 2.2rem
    }

    .form-control-group-matches {
        margin-top: 0;
        height: 100%
    }

    .logo-icon-list {
        margin-top: -10px
    }

    .link-icon,.link-icon:visited {
        padding: 11px
    }

    .link-icon>img {
        width: 36px
    }

    .random-numbers>b {
        width: 15%
    }

    .placeholder-wrap,.img-output-wrap {
        height: 245px
    }

    .placeholder-wrap.barcode-placeholder-wrap,.img-output-wrap.barcode-img-output-wrap {
        height: auto
    }

    .barcode-buttons {
        display: flex;
        justify-content: space-between
    }

    .barcode-buttons>.btn+.btn {
        margin-left: 15px;
        margin-top: 0
    }

    .pm25-title {
        font-size: 1.5rem
    }

    .weather-subtitle {
        font-size: 1.6rem
    }

    .weather-7-days>li,.weather-7-days>li:first-child {
        width: 12.428265%;
        margin-bottom: 0
    }

    .weather-24-hours-chart {
        padding: 40px 30px 20px 30px
    }

    .btn.btn-exchange {
        font-size: 1.2rem
    }

    .rate-result {
        font-size: 2rem
    }

    .timestamp-convert-wrap>fieldset {
        padding: .8rem 1.2rem 1.2rem 1.2rem
    }

    .timestamp-convert-wrap>fieldset>legend {
        font-size: 1.4rem
    }

    .time-convert-result-wrap {
        font-size: 1.5rem
    }

    .date-input-row [class^=col-xs]:nth-child(-n+3) {
        margin-bottom: 0
    }

    .source-code-wrap {
        padding: 2.25rem
    }

    .source-code-watermark {
        bottom: 5px;
        right: 12px;
        width: 146px
    }

    .district-wrap>.row>div {
        margin-bottom: 1rem
    }

    .district-wrap>.row>div+div {
        margin-top: 0
    }

    .image-info-list>li>label {
        width: 25%
    }

    .info-list>li>span {
        width: 75%
    }

    .base64-convert-result-item {
        padding: 1.5rem
    }

    .modal-wechat-qrcode .tingle-modal-box {
        width: 28%
    }

    .modal-icon .tingle-modal-box {
        width: 40%
    }

    .tingle-modal-box__content,.tingle-modal-box__footer {
        padding: 2rem
    }

    .feedback-param {
        padding-left: 3.5rem
    }
}

@media only screen and (min-width: 992px) {
    .random-numbers>b {
        width:10%;
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 575px) {
    .btn-block-xs {
        display:block;
        width: 100%
    }

    .btn-block-xs+.btn-block-xs {
        margin-top: .7rem
    }

    .button-group>.btn.btn-block-xs {
        width: 100%;
        margin-bottom: 0
    }

    hr {
        margin-top: 15px;
        margin-bottom: 15px
    }
}

section.tool-content-container {
    margin: 0 0 35px 0
}