/* Set padding to keep content from hitting the edges */
.body-content { margin-top: 5px; padding-left: 15px; padding-right: 15px; }

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt { white-space: normal; }

/* Set width on the form input elements since they're 100% wide by default */
textarea.multi-line { min-height: 360px; }
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }


body { font-family: 'Microsoft Yahei','微软雅黑','宋体',\5b8b\4f53,Tahoma,Arial,Helvetica,STHeiti; margin: 0; background-color: #fff }

.hot a { color: #F34925; }
p { line-height: 24px }
textarea { padding: 5px; }
.btn { margin-left: 2px; margin-right: 2px; }
pre code { max-height: 2000px; overflow-y: auto; }
.mt10 { margin-top: 10px; }
.mb10 { margin-bottom: 10px; }
.mt5 { margin-top: 5px; }
.mb5 { margin-bottom: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-10 { margin-bottom: 10px; }
.mt-5 { margin-top: 5px; }
.mb-5 { margin-bottom: 5px; }
h4 { padding-left: 5px; color: #66be8c; margin-bottom: 10px; line-height: 30px; margin-top: 5px; }
.line-24 { line-height: 24px }
.pre { position: relative; margin-bottom: 24px; border-radius: 3px; border: 1px solid #C3CCD0; background: #FFF; overflow: hidden; }
.code { display: block; padding: 12px 24px; overflow-y: auto; font-weight: 300; font-size: 0.8em; }
    .code .has-numbering { margin-left: 21px; }
.pre-numbering { position: absolute; top: 0; left: 0; width: 20px; padding: 12px 2px 12px 0; border-right: 1px solid #C3CCD0; border-radius: 3px 0 0 3px; background-color: #EEE; text-align: right; font-size: 0.8em; color: #AAA; }
.red { color: red }
.py-tran-result { text-align: left; overflow: auto; height: auto; color: #000; font-size: 16px; line-height: 25px; max-height: 500px; }
    .py-tran-result em { display: inline-block; padding: 5px; float: left; border: 1px #999 solid; text-align: center; margin: 2px; height: 55px; line-height: 25px; font-family: verdana; font-style: normal; }
    .py-tran-result em { border: 0; border-bottom: 1px #ff3300 dashed; font-style: normal; }
    .py-tran-result i { color: blue; font-style: normal; }
.f30 { font-size: 30px; }
.f24 { font-size: 24px; }
.f20 { font-size: 20px; }
.f14 { font-size: 14px; }
.f12 { font-size: 12px }
.YaHei { font-family: "Microsoft YaHei" }
.fl { display: inline-block; float: left; }
.fr { display: inline-block; float: right !important }
.mb20 { margin-bottom: 20px }
.break { word-break: break-all; word-wrap: break-word; }
.w30 { width: 30px; }
.w50 { width: 50px; }
.w70 { width: 70px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w150 { width: 150px; }
.w180 { width: 180px; }
.min150 { min-width: 150px; }
.w400 { width: 400px; }
.w800 { width: 750px; }
.w220 { width: 220px; }
.w20 { width: 20px; }
a { text-decoration: none }
#outValue { background: #eee; }
.page { margin-bottom: 10px; padding: 5px 10px; line-height: 1.8; border-radius: 0 2px 2px 0; background-color: #fafafa; }
.success { border-left: 5px solid #16b777; }
.danger { border-left: 5px solid #dc3545; }
.primary { border-left: 5px solid #ffc107; }
.warning { border-left: 5px solid #0d6efd; }
.info { border-left: 5px solid #0dcaf0; }
 .site-idea { margin: 30px 0; font-weight: 300 }
.site-idea li { font-size: 14px }
    .site-idea li div { padding: 25px; line-height: 24px; border: 1px solid #d2d2d2 }
.site-idea .layui-field-title { border-color: #d2d2d2 }
    .site-idea .layui-field-title legend { margin: 0 20px 20px 0; padding: 0 20px; text-align: center }
.page h2 { color: #198754; }
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link { border: none; border-bottom: solid 2px #198754; }
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { border: none; border-bottom: solid 2px #fff; }
.page-link.active, .active > .page-link { background-color: #198754; border: #198754 1px solid; }
a, .pagination a { text-decoration: none; color: #198754 }
.tag { font-size: 18px; display: inline-block; background-color: #e7e7e7; border-radius: 10px; padding: 5px 8px; margin:5px auto ; margin-right: 8px; text-decoration: none; }
.slabel { font-size: 18px; color: #cbac59; margin-right: 8px; }
.card:hover { background-color: #fafafa; border: 1px solid #32CD32; }

.bg-white-overlay { color: #fff; background-color: rgba(244,246,250,.24) }

.bg-dark-overlay { color: #fff; background-color: rgba(35,46,60,.24) }

.bg-cover { background-repeat: no-repeat; background-size: cover; background-position: center }

.bg-facebook { color: #fff !important; background: #3b5998 !important }

.text-facebook { color: #3b5998 !important }

.bg-twitter { color: #fff !important; background: #1da1f2 !important }

.text-twitter { color: #1da1f2 !important }

.bg-linkedin { color: #fff !important; background: #0a66c2 !important }

.text-linkedin { color: #0a66c2 !important }

.bg-google { color: #fff !important; background: #dc4e41 !important }

.text-google { color: #dc4e41 !important }

.bg-youtube { color: #fff !important; background: red !important }

.text-youtube { color: red !important }

.bg-vimeo { color: #fff !important; background: #1ab7ea !important }

.text-vimeo { color: #1ab7ea !important }

.bg-dribbble { color: #fff !important; background: #ea4c89 !important }

.text-dribbble { color: #ea4c89 !important }

.bg-github { color: #fff !important; background: #181717 !important }

.text-github { color: #181717 !important }

.bg-instagram { color: #fff !important; background: #e4405f !important }

.text-instagram { color: #e4405f !important }

.bg-pinterest { color: #fff !important; background: #bd081c !important }

.text-pinterest { color: #bd081c !important }

.bg-vk { color: #fff !important; background: #6383a8 !important }

.text-vk { color: #6383a8 !important }

.bg-rss { color: #fff !important; background: orange !important }

.text-rss { color: orange !important }

.bg-flickr { color: #fff !important; background: #0063dc !important }

.text-flickr { color: #0063dc !important }

.bg-bitbucket { color: #fff !important; background: #0052cc !important }

.text-bitbucket { color: #0052cc !important }

.bg-tabler { color: #fff !important; background: #206bc4 !important }

.text-tabler { color: #206bc4 !important }

.bg-blue { background: #206bc4 }

.text-blue { color: #206bc4 !important }

.bg-blue-lt { color: #206bc4 !important; background: rgba(32,107,196,.1) !important }

.bg-azure { background: #4299e1 }

.text-azure { color: #4299e1 !important }

.bg-azure-lt { color: #4299e1 !important; background: rgba(66,153,225,.1) !important }

.bg-indigo { background: #4263eb }

.text-indigo { color: #4263eb !important }

.bg-indigo-lt { color: #4263eb !important; background: rgba(66,99,235,.1) !important }

.bg-purple { background: #ae3ec9 }

.text-purple { color: #ae3ec9 !important }

.bg-purple-lt { color: #ae3ec9 !important; background: rgba(174,62,201,.1) !important }

.bg-pink { background: #d6336c }

.text-pink { color: #d6336c !important }

.bg-pink-lt { color: #d6336c !important; background: rgba(214,51,108,.1) !important }

.bg-red { background: #d63939 }

.text-red { color: #d63939 !important }

.bg-red-lt { color: #d63939 !important; background: rgba(214,57,57,.1) !important }

.bg-orange { background: #f76707 }

.text-orange { color: #f76707 !important }

.bg-orange-lt { color: #f76707 !important; background: rgba(247,103,7,.1) !important }

.bg-yellow { background: #f59f00 }

.text-yellow { color: #f59f00 !important }

.bg-yellow-lt { color: #f59f00 !important; background: rgba(245,159,0,.1) !important }

.bg-lime { background: #74b816 }

.text-lime { color: #74b816 !important }

.bg-lime-lt { color: #74b816 !important; background: rgba(116,184,22,.1) !important }

.bg-green { background: #2fb344 }

.text-green { color: #2fb344 !important }

.bg-green-lt { color: #2fb344 !important; background: rgba(47,179,68,.1) !important }

.bg-teal { background: #0ca678 }

.text-teal { color: #0ca678 !important }

.hanzi span, .bg-teal-lt { color: #0ca678 !important; background: rgba(12,166,120,.1) !important }

.bg-cyan { background: #17a2b8 }

.text-cyan { color: #17a2b8 !important }

.bg-cyan-lt { color: #17a2b8 !important; background: rgba(23,162,184,.1) !important }

.bg-dark { background: #232e3c }

.text-dark { color: #232e3c !important }

.bg-dark-lt { color: #232e3c !important; background: rgba(35,46,60,.1) !important }

.bg-muted { background: #656d77 }

.text-muted { color: #656d77 !important }

.bg-muted-lt { color: #656d77 !important; background: rgba(101,109,119,.1) !important }

.bg-white { background: #fff }

.text-white { color: #fff !important }

.bg-white-lt { color: #fff !important; background: rgba(255,255,255,.1) !important }

.avatar-lg .badge:empty { width: 1.25rem; height: 1.25rem }

.avatar-xl { --tblr-avatar-size: 7rem }

    .avatar-xl .badge:empty { width: 1.75rem; height: 1.75rem }

.avatar-2xl { --tblr-avatar-size: 11rem }

.hanzi span, .avatar { --tblr-avatar-size: 2.5rem; position: relative; width: var(--tblr-avatar-size); height: var(--tblr-avatar-size); font-size: calc(var(--tblr-avatar-size)/ 2.8571429); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; color: #656d77; text-align: center; vertical-align: bottom; background: #f0f2f6 no-repeat center / cover; border-radius: 4px; }
.hanzi span, .avatar-xl { --tblr-avatar-size: 7rem; }
.hanzi span, .avatar-rounded { border-radius: 100rem; }
.f48 { font-size: 48px; }
.hanzi span, .f72 { font-size: 72px; }
.f54 { font-size: 54px; }
.msgError { color: #d9534f; }
.form-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}
.auto-wrap-text { word-wrap: break-word; }
canvas { border: 1px solid #a0a0a0; margin-top: 10px; width: 100%; height: auto; border-radius: 5px; }
pre { display: block; padding: 9.5px; margin: 0 0 10px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #FFF0F5; border: 1px solid #ccc; border-radius: 4px; }
.code1, .code2 { padding: 2px 4px; font-size: 90%; color: #000000; }
.code1 { background-color: #87CEFA; }
.code2 { background-color: #ffff00; }