/*通用样式原子类*/

.orange {
    color: #f60
}

.dark-gray {
    color: #666
}

.gray {
    color: #999
}

.red {
    color: #f30 !important
}

.blue {
    color: blue !important
}

.green {
    color: green !important
}

.vm {
    vertical-align: middle
}

.fl {
    float: left !important
}

.fr {
    float: right !important
}

.tl {
    text-align: left
}

.tc {
    text-align: center
}

.tr {
    text-align: right
}

.bz {
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.fs0 {
    font-size: 0
}

.fs12 {
    font-size: 12px
}

.fs14 {
    font-size: 14px
}

.fs16 {
    font-size: 16px
}

.fs20 {
    font-size: 20px
}

.fs24 {
    font-size: 24px
}

.z1 {
    z-index: 1
}

.z2 {
    z-index: 2
}

.z3 {
    z-index: 3
}

.z4 {
    z-index: 4
}

.z5 {
    z-index: 5
}

.z6 {
    z-index: 6
}

.zF {
    z-index: 999
}

.hide {
    display: none
}

.border-box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.clearfix:after,
.f-cb:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden
}

.clearfix,
.f-cb {
    *zoom: 1
}

.f-tc {
    text-align: center !important
}

.f-tl {
    text-align: left !important
}

.f-tr {
    text-align: right !important
}

.text-gray {
    color: #999
}

.text-red {
    color: #ff4343
}

.text-green {
    color: #12d24d
}

.text-white {
    color: #fff
}

.text-blue {
    color: #0099fc
}

.bg-gray {
    background: #f2f2f2
}

.bg-red {
    background: #ff4343
}

.bg-green {
    background: #12d24d
}

.bg-blue {
    background: #0099fc
}

.bg-white {
    background: #fff
}

.f-fl,
.flt {
    float: left
}

.f-fr,
.frt {
    float: right
}

.f-pr {
    position: relative
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.f-pa {
    position: absolute
}

.f-cp {
    cursor: pointer
}

.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.f-hs::-webkit-scrollbar {
    height: 0;
    width: 0
}

.pl10 {
    padding-left: 10px !important
}

.pl15 {
    padding-left: 15px !important
}  

.pl20 {
    padding-left: 20px !important
}

.pr10 {
    padding-right: 10px !important
}

.pr15 {
    padding-right: 15px !important
}

.pr20 {
    padding-right: 20px !important
}

.pt5 {
    padding-top: 5px !important
}

.pt10 {
    padding-top: 10px !important
}

.pb5 {
    padding-bottom: 5px !important
}

.ml0 {
    margin-left: 0 !important
}

.ml5 {
    margin-left: 5px !important
}

.ml10 {
    margin-left: 10px !important
}

.ml15 {
    margin-left: 15px !important
}

.ml20 {
    margin-left: 20px !important
}

.ml100 {
    margin-left: 100px !important
}

.ml120 {
    margin-left: 120px !important
}

.ml130 {
    margin-left: 130px !important
}

.ml140 {
    margin-left: 140px !important
}

.ml150 {
    margin-left: 150px !important
}

.mr0 {
    margin-right: 0px !important
}

.mr5 {
    margin-right: 5px !important
}

.mr10 {
    margin-right: 10px !important
}

.mr15 {
    margin-right: 15px !important
}

.mr20 {
    margin-right: 20px !important
}

.mt0 {
    margin-top: 0px !important
}

.mt5 {
    margin-top: 5px !important
}

.mt10 {
    margin-top: 10px !important
}

.mt15 {
    margin-top: 15px !important
}

.mt20 {
    margin-top: 20px !important
}

.mb0 {
    margin-bottom: 0px !important
}

.mb5 {
    margin-bottom: 5px !important
}

.mb10 {
    margin-bottom: 10px !important
}

.mb15 {
    margin-bottom: 15px !important
}

.mb20 {
    margin-bottom: 20px !important
}

.w60 {
    width: 60px !important
}

.w100 {
    width: 100px !important 
}

.w110 {
    width: 110px !important
}

.w120 {
    width: 120px !important
}

.w130 {
    width: 130px !important
}

.w140 {
    width: 140px !important
}

.w150 {
    width: 150px !important
}

.w200 {
    width: 200px !important
}

.w300 {
    width: 300px !important
}

.w400 {
    width: 400px !important
}

.w500 {
    width: 500px !important
}

.lh30{
    line-height: 30px !important
}

.hide{
    display: none !important
}

/*后台布局*/

body,
html {
    height: 100%;
}

a:hover,
a:active,
a:focus {
    outline: none;
    text-decoration: none;
}

.bg-normal,.bg-wx {
    background: #44b549
}

.bg-mobile{
    background: #5B98F1
}

.bg-warn,.bg-lock{
    background: #FF5722
}

/*页面容器*/

.layout-body {
    position: relative;
    overflow: hidden;
}

/*顶部导航*/

.main-header {
    position: absolute;
    width: 100%;
    background-color: white;
    z-index: 1000;
}

.main-header>.navbar {
    margin-bottom: 0;
    margin-left: 100px;
    border: none;
    min-height: 50px;
    border-radius: 0;
    -webkit-transition: margin-left .3s ease-in-out;
    -o-transition: margin-left .3s ease-in-out;
    transition: margin-left .3s ease-in-out;
}

.main-header>.navbar:before {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: #eeeeee;
}

.main-header .navbar-custom-menu,
.main-header .navbar-right {
    float: right;
    height: 50px;
}

.main-header .search-btn {
    display: inline-block;
    color: #333;
    border-right: 1px solid #eeeeee;
    padding-right: 15px;
}

@media screen and (max-width:640px){
    .main-header .search-btn{
        display: none;
    }
}


.main-header .search-btn input {
    height: 50px;
    border: 0;
    background: transparent !important;
    padding-left: 0;
    margin-left: 12px;
    color: #666;
    width: 200px;
}

.main-header .index-btn,
.main-header .dropdown-nav-btn {
    display: inline-block;
    width: 64px;
    height: 50px;
    font-size: 15px;
    line-height: 49px;
    color: #666;
    text-align: center;
    border-right: 1px solid #eeeeee;
}

.dropdown-nav-btn {
    margin-left: -4px;
}

.main-header .index-btn:hover,
.main-header .dropdown-nav-btn:hover {
    background-color: #f9f9f9;
}

.main-header .sidebar-toggle:focus,
.main-header .sidebar-toggle:active {
    background: transparent
}

.navbar-custom-menu .messages-menu .dropdown-toggle {
    width: 127px;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 20px;
    position: relative;
}

.navbar-custom-menu .messages-menu .dropdown-toggle i {
    font-size: 16px;
    margin-right: 5px;
    margin-left: 5px;
}

.navbar-custom-menu .messages-menu .dropdown-toggle .right-icon {
    position: absolute;
    right: 3px;
    top: 17px;
}

.navbar-custom-menu .messages-menu .dropdown-menu a {
    line-height: 26px;
}

.navbar-custom-menu .dropdown-menu .divider {
    margin: 5px 0;
}

.navbar-nav {
    float: left;
    margin: 0;
}

.navbar-nav>li {
    float: left;
}

.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

.navbar-nav .open .dropdown-menu{
    background-color: white;
}


/*页面主体*/

.content-wrapper {
    position: absolute;
    left: 230px;
    right: 0;
    top: 50px;
    bottom: 0;
    width: auto;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #ecf0f5;
    z-index: 800;
    -webkit-transition: -webkit-transform .3s ease-in-out, left .3s ease-in-out, width .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out, left .3s ease-in-out, width .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out, .3s ease-in-out, width .3s ease-in-out;
    transition: -transform .3s ease-in-out, left .3s ease-in-out, width .3s ease-in-out
}

.content-wrapper .content {
    margin: 15px 15px 0 15px;
    background-color: white;
    min-height: -webkit-calc(100vh - 140px);
    min-height: -moz-calc(100vh - 140px);
    min-height: calc(100vh - 140px);
    padding-bottom: 15px;
}

.content-wrapper .content-footer {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    color: #BFBFC3;
    font-weight: bold;
    height: 60px;
    line-height: 60px;
}


/*侧边导航*/

.main-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100%;
    background-color: #273543;
    width: 100px;
    z-index: 1001;
    text-align: center;
    overflow: hidden;
    -webkit-transition: -webkit-transform .3s ease-in-out, left .3s ease-in-out, width .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out, left .3s ease-in-out, width .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out, .3s ease-in-out, width .3s ease-in-out;
    transition: -transform .3s ease-in-out, left .3s ease-in-out, width .3s ease-in-out
}

.main-sidebar-second {
    position: fixed;
    top: 50px;
    left: 100px;
    min-height: 100%;
    background-color: white;
    width: 129px;
    z-index: 810;
    border-right: 1px solid #eeeeee;
    -webkit-transition: -webkit-transform .3s ease-in-out, left .3s ease-in-out, width .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out, left .3s ease-in-out, width .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out, .3s ease-in-out, width .3s ease-in-out;
    transition: -transform .3s ease-in-out, left .3s ease-in-out, width .3s ease-in-out
}


.main-sidebar .treeview-toggle {
    text-align: center;
    font-size: 14px;
    background-color: #28394a;
    padding: 5px 0;
    color: #7c838a;
}

.main-sidebar .team-logo {
    margin: 9px auto;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background-size: cover;
    background-position: 50% 50%;
    background-color: #fff;
}

.sidebar {
    padding-bottom: 10px
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0
}

.sidebar-menu>li {
    position: relative;
    margin: 0;
    padding: 0
}

.main-sidebar .sidebar-menu .treeview-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 0px
}

.main-sidebar .sidebar-menu>li>a {
    position: relative;
    padding: 12px 5px 12px 5px;
    display: block;
    color: #c8c9cc
}

.main-sidebar .sidebar-menu>li:hover>a {
    color: white;
    background: #434e6c
}

.main-sidebar .sidebar-menu>li.active>a {
    color: white;
    background: #434e6c
}

.main-sidebar-second .sidebar-menu>li>a {
    display: block;
    font-size: 14px;
    color: #323233 !important;
    font-weight: 600;
    padding: 15px 15px 15px 30px;
    position: relative;
}

.main-sidebar-second .direction-toggle {
    position: absolute;
    right: 10px;
    top: 11px;
    background-color: #f5f7f9;
    color: #c2c2c2;
    border: 1px solid #efefef;
    border-right: none;
    cursor: pointer;
    padding: 3px 4px 3px 3px;
}

.main-sidebar-second .sidebar-menu>li>.treeview-menu a:hover {
    color: #3773da;
}

.main-sidebar-second .sidebar-menu>li>.treeview-menu>li a {
    position: relative;
    display: block;
    color: #323233;
    text-align: left;
    line-height: 32px;
    padding-left: 18px;
    font-size: 13px;
    margin: 5px 10px 5px 10px;
}

.main-sidebar-second .active a {
    background-color: #ebedf0;
}

.main-sidebar-second li.treeview-two>a>i {
    color: #878787;
    font-weight: normal;
    margin-right: 3px;
    margin-left: -13px;
}

.main-sidebar-second .sidebar-menu>li>.treeview-menu li.treeview-three a {
    padding-left: 30px !important;
}

.main-sidebar-second .sidebar-menu .treeview-menu {
    margin-top: 10px;
}

.main-sidebar-second .direction-right {
    left: 128px;
    background: #fff;
    transform: rotate(180deg);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.head-img {
    width: 30px;
    height: 30px;
    border-radius: 30px;
}

.layui-admin-tip-box {
    display: none;
    position: relative;
    font-size: 12px;
    position: relative;
    padding: 10px 20px 10px 30px;
    border-radius: 10px;
    margin-top: 10px;
    color: #666;
}

.layui-admin-tip-box .close-btn {
    position: absolute;
    top: 2px;
    right: 12px;
}

.layui-admin-tip-box.bg-info {
    color: #337ab7;
}

.layui-admin-tip-box.bg-primary {
    color: white;
}

.layui-admin-tip-box.bg-success {
    color: #009688;
    ;
}

.layui-admin-tip-box.bg-warning {
    color: #666;
}

.layui-admin-tip-box.bg-danger {
    color: #a94442;
}





/*layui兼容代码*/

.layui-elem-field legend {
    width: auto;
    border-bottom: none;
    font-size: 16px;
}

.layui-tab a:hover {
    color: #38f;
}

.layui-elem-field {
    margin: 15px 15px 10px 15px;
}

.layui-elem-quote {
    padding: 10px;
}

.layui-btn {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.layui-btn-xs {
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
    font-size: 12px;
}

.layui-btn .layui-icon {
    font-size: 16px;
}

.layui-form-label {
    font-size: 12px;
    margin-bottom: 0;
    padding: 5px 10px;
}

.layui-form-mid {
    padding: 5px 0!important;
    font-size: 12px;
}

.layui-input,
.layui-select,
.layui-textarea {
    height: 30px;
    line-height: 30px\9;
    font-size: 12px;
}

.layui-input:focus,
.layui-textarea:focus {
    border: 1px solid #38f !important;
}

.layui-form-select dl dd,
.layui-form-select dl dt {
    line-height: 30px;
    font-size: 12px;
}

.layui-form-select dl {
    top: 36px;
}

.layui-form-selectup dl {
    top: auto;
    bottom: 36px;
}

.layui-input-block {
    min-height: 30px;
}

.layui-form-item .layui-form-checkbox {
    margin-top: 0;
}

.layui-form-item .layui-form-checkbox[lay-skin=primary] {
    margin-top: 6px;
}

.layui-form-switch {
    margin-top: 3px;
}

.layui-form-radio {
    margin-top: 1px;
}

.layui-form-radio *{
    font-size: 12px;
}

.layui-form-checkbox span{
    font-size: 12px;
}

.layui-form-pane .layui-form-label {
    padding: 4px 15px;
    height: 30px;
    line-height: 22px;
}

.layui-form-pane .layui-form-radio {
    margin-top: 1px;
}

.layui-form-pane .layui-form-switch {
    margin-top: 3px;
}

.layui-table td,
.layui-table th {
    font-size: 12px;
    padding: 8px 10px;
    text-align: center;
}

.layui-tab-title {
    padding: 10px 10px 0 10px;
}

.layui-tab-brief .layui-tab-title {
    padding: 0;
}

.layui-tab.layui-tab-card {
    box-shadow: none;
    border: none;
}

.layui-admin-breadcrumb {
    visibility: visible;
    padding: 10px 15px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    border-bottom: 1px solid #e6e6e6;
    background-color: rgba(242, 242, 242, 0.3);
}

.layui-admin-breadcrumb a cite {
    color: #666;
    font-style: normal;
}

.layui-admin-breadcrumb span {
    margin: 0 10px;
    color: #999;
}

.layui-table th {
    text-align: center;
}

.layui-admin-body {
    position: relative;
    padding: 10px 15px;
    line-height: 24px;
}

.layui-admin-tip {
    line-height: 30px;
    height: 30px;
    padding: 0 10px;
}

.layui-admin-empty-table {
    color: red;
    text-align: center;
    line-height: 50px !important;
    font-weight: bold;
}

.layui-admin-field-title {
    display: inline-block;
    width: 100%;
    padding: 6px 10px;
    background-color: #f8f8f8;
    margin-bottom: 15px;
    font-size: 12px;
    box-sizing: border-box;
}

.layui-admin-field-title .left {
    float: left;
    height: 24px;
    line-height: 24px;
}

.layui-admin-field-title .title {
    display: inline-block;
    font-size: 14px;
    position: relative;
    padding-left: 11px;
    position: relative;
}

.layui-admin-field-title .title:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0px;
    width: 3px;
    height: 12px;
    background-color: #38f;
}

.layui-admin-field-title .subtitle {
    margin-left: 20px;
    display: inline-block;
}

.layui-admin-field-title .right {
    float: right;
}

.layui-admin-field-title .right a {
    color: #999;
}

.layui-admin-field-title .right a.active {
    color: rgb(51, 136, 255);
}

.layui-admin-separator {
    margin: 0 10px;
    color: #999;
}



/*laydate*/

.layui-laydate {
    font-size: 12px !important;
}

.layui-laydate .layui-laydate-main {
    width: 240px;
}

.layui-laydate .layui-laydate-content td,
.layui-laydate .layui-laydate-content th {
    width: 32px;
    height: 30px;
    padding: 5px;
}

.layui-laydate .layui-laydate-header {
    line-height: 24px;
    padding: 6px 70px 5px;
}

.layui-laydate .layui-laydate-header i {
    top: 6px;
    font-size: 15px;
}

.layui-laydate .layui-laydate-footer {
    height: 40px;
}

.layui-laydate .laydate-footer-btns {
    top: 7px;
}

.layui-laydate-footer span.laydate-btns-time {
    line-height: 12px;
}






/*模板组件*/

.layui-input-group-addon {
    font-size: 12px;
    display: table-cell;
}

.layui-upload-input {
    color: #999;
}

.layui-upload-img-boxs {
    margin-top: 10px;
}

.layui-upload-img-boxs .img-box {
    border: 1px solid #e6e6e6;
    position: relative;
    padding: 4px;
    display: inline-block;
    margin-right: 20px;
}

.layui-upload-img-boxs .img-box img {
    width: 70px;
}

.layui-upload-img-boxs .close {
    position: absolute;
    top: -6px;
    right: -16px;
}

.layui-search-pane {
    text-align: left;
    background-color: #f8f8f8;
    padding: 20px 15px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.layui-search-pane .layui-form-label {
    width: 110px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.layui-search-pane .layui-search-item {
    margin-bottom: 10px;
}

.layui-search-pane .layui-btn {
    padding: 0 15px;
}

.layui-unit{
    display: inline-block;
    height: 30px;
    line-height: 30px;
}

.layui-avatar-img{
    height: 38px;
    border-radius: 50%;
}

.btn-coupon-recharge {
    background: #ffc000 !important;
    border-color: #ffc000 !important;
    color: #fff !important;
}

.btn-coupon-consum {
    background: #5fb878 !important;
    border-color: #5fb878 !important;
    color: #fff !important;
}

.btn-coupon-order {
    background: #44abf7 !important;
    border-color: #44abf7 !important;
    color: #fff !important;
}

.btn-coupon-goods {
    background: #ed675f !important;
    border-color: #ed675f !important;
    color: #fff !important;
}

/*复制链接*/
.copy-hide-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -100;
}

/*分页样式*/

.pagination p {
    margin: 0;
    cursor: pointer
}

.pagination {
    height: 40px;
}

.pagination a {
    display: block;
    float: left;
    margin-right: 10px;
    padding: 2px 12px;
    height: 24px;
    border: 1px #ccc solid;
    background: #fff;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    line-height: 24px;
}

.pagination a:hover {
    color: #077ee3;
    background: white;
    border: 1px #077ee3 solid;
}

.pagination a.cur {
    border: 1px solid #077ee3;
    background: #077ee3;
    color: #fff;
}

.pagination p {
    float: left;
    padding: 2px 12px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    color: #bbb;
    border: 1px #ccc solid;
    background: #fcfcfc;
    margin-right: 8px;
    cursor: not-allowed;
}

.pagination p.pageRemark {
    border-style: none;
    background: none;
    margin-right: 0px;
    padding: 4px 0px;
    color: #666;
}

.pagination p.pageRemark b {
    margin: 0 5px;
    color: #666;
}

.pagination p.pageEllipsis {
    border-style: none;
    background: none;
    padding: 4px 0px;
    color: #808080;
}

.pagination .dates li {
    font-size: 14px;
    margin: 20px 0
}

.pagination .dates li span {
    float: right
}

/*编辑器样式兼容*/

.layui-admin-body .edui-tab-nav .edui-tab-item.edui-active .edui-tab-text {
    padding: 6px 12px;
    line-height: 16px;
}

.layui-admin-body .edui-tab-nav .edui-tab-item .edui-tab-text {
    padding: 6px 12px;
    line-height: 16px;
}

/*规则通用样式*/

.rule-list {
    max-width: 600px
}

.coupon-list-item {
    display: flex;
    padding: 20px;
    border: 1px solid #e6e6e6;
    position: relative;
    margin:5px 0;
    justify-content: space-around;
}

.rule-list-item,
.coupon-list-item,
.ticket-list-item,
.sign-list-item,
.oncecard-list-item,
.balance-list-item {
    position: relative;
    padding: 10px 15px;
    margin-bottom: 10px;
    background-color: #fdfeff;
    border: solid 1px #eee;
    height: auto;
    display: inline-block;
    width: calc(100% - 32px);
}

.rule-list-item:hover,
.coupon-list-item:hover,
.ticket-list-item:hover,
.sign-list-item:hover,
.oncecard-list-item:hover,
.balance-list-item:hover {
    border-color: #1890ff;
}

.remove-rule,
.remove-sign,
.remove-coupon,
.remove-ticket,
.remove-balance,
.remove-oncecard {
    position: absolute;
    right: 8px;
    top: 0;
    color: #bbb;
    font-size: 24px;
    cursor: pointer
}

.btn-add-rule,
.btn-add-sign,
.btn-add-coupon,
.btn-add-ticket,
.btn-add-balance,
.btn-add-oncecard {
    width: 100%;
}

.oncecard-list-item .layui-form-select,
.balance-list-item .layui-form-select {
    width: 200px;
    float: left;
}

.coupon-list-item .layui-form-select {
    width: 180px;
    float: left;
}

/*滚动条*/

.zl-scrollBarBox{
    height:100%;
    position:absolute;
    background:#f3f3f3;
}

.zl-scrollBar{
    position:absolute;
    left:0;
    top:0;
    background:#848484;
    transition:background 0.3s;
}

.zl-scrollBar.zl-verticalBar{
    min-height:10px;
}

.zl-scrollBar.zl-horizontalBar{
    min-width:10px;
}

.zl-scrollBar:hover{
    background:#000;
}

.zl-scrollContentDiv{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    padding:0 !important;
    margin:0 !important;
    top:0;
    left:0;
}

/*兼容thinkphp5调试样式*/

#think_page_trace_open {
    z-index: 10000;
}