*{
    margin: 0;padding: 0;
}
body,button,a,input,select,textarea {
    font-family: Arial;
}

.text-bold {
    font-weight: bold;
}
.text-shadow {
    text-shadow: var(--text-shadow-color) 0px 1px 2px;
}
.padding{
    padding: 1rem;
}
.padding-lr{
    padding: 0 1rem;
}
.padding-l{
    padding-left: 1rem;
}
.padding-tb{
    padding: 1rem 0;
}
html{
    font-size: 16px;
    height: 100%;
    --body-bg-color: #333333;
    --text-color:#aaaaaa;
    --text-active-color:#5791ff;
    --a-color:#bbbbbb;
    --a-hover-color:#ffffff;
    --text-shadow-color:#000000;
    --line-color:rgba(0, 0, 0, 0.15);
    --input-bg-color:#333333;
    --input-text-color:#dddddd;
    --box-shadow-black-color:rgba(0, 0, 0, 0.5);
    --box-shadow-white-color:rgba(255, 255, 255, 0.25);
    --btn-text-color:#dddddd;
    --btn-active-text-color:#ffffff;
    --btn-text-shadow-color:rgba(0, 0, 0, 0.5);
    --btn-bg-color-from:#656565;
    --btn-bg-color-to:#434343;
    --btn-green-bg-color-from:#28A745;
    --btn-green-bg-color-to:#179634;
    --btn-blue-bg-color-from:#3571ee;
    --btn-blue-bg-color-to:#2460dd;
    --btn-red-bg-color-from:#ed4656;
    --btn-red-bg-color-to:#DC3545;
    --btn-orange-bg-color-from:#ee9411;
    --btn-orange-bg-color-to:#dd8300;
    --btn-purple-bg-color-from:#A546AD;
    --btn-purple-bg-color-to:#94359C;
    --panel-bg-color: #434343;
    --block-bg-color: #333333;
    --switch-open-handle-color:#dddddd;
    --label-bg-color:#333333;
    --alert-bg-color:#888888;
}
body{
    background: var(--body-bg-color);
    color:var(--text-color);
    font-size: 1rem;
    transition: all 0.2s;
    min-width: 1084px;
    padding-top: 3.4rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    height: calc(100% - 3.5rem);
}
body.show-sidebar{
    padding-left: 11.5rem;
}
body.show-sidebar .mb-sidebar{
    width: 11rem;
}

/* other */
.hide{
    display: none;
}
a{
    text-decoration: none;
    color:var(--a-color);
}
a:hover{
    color: var(--a-hover-color);
}
.iconfont{
    font-size: 1rem;
}

.mb-title{
    text-shadow: var(--text-shadow-color) 0px 1px 2px;
    color: var(--a-color);
    padding: 0.8rem 0;
}
.text-underline{
    text-decoration: underline;
}


/*mb-topbar*/
.mb-topbar{
    width: 100%;
    min-width: 700px;
    position: fixed;top: 0;left: 0;right: 0;
    z-index: 9999;
}
.mb-topbar.mb-panel{
    padding:0.4rem 1rem;
    width: calc(100% - 2rem);
    border-radius: 0;
}
.mb-topbar a{
    text-decoration: none;
}
.mb-logo{
    width: 160px;
    position: relative;
    display: inline-block;
}
.mb-logo .toggle{
    cursor: pointer;
    position: absolute;top: 0;right: 0;
}
ul.mb-breadcrumb{
    display: inline-block;
    padding-left: 0.5rem;
    margin-left: 0.5rem;
    position: relative;
    list-style: none;
}
ul.mb-breadcrumb::before{
    position: absolute;top: 50%;left: 0px;transform: translateY(-50%);
    content: '';
    width: 1px;height: 1rem;
    background: var(--line-color);
}
ul.mb-breadcrumb li{
    position: relative;
    display: inline-block;
}
ul.mb-breadcrumb li:not(:first-child){
    padding-left: 0.9rem;
}
ul.mb-breadcrumb li:not(:first-child)::before{
    position: absolute;top: 50%;left: 0;transform: translateY(-50%);
    content: '〉';
    color: var(--line-color);
}
ul.mb-breadcrumb li a.active{
    color: var(--text-active-color);
}


/*mb-sidebar*/
.mb-sidebar.mb-panel{
    width: 0px;
    height: 100%;
    border-radius: 0;
    position: fixed;top: 0;left: 0;
    z-index: 8888;
    transition: all 0.2s;
    overflow-y: auto;
}
.mb-sidebar a{
    text-decoration: none;
}
.mb-sidebar ul{
    list-style: none;
    /*padding:0.3rem 1rem;*/
}

.mb-sidebar ul:first-child{
    margin-top: 4rem;
}
.mb-sidebar ul:last-child{
    margin-bottom: 3rem;
}
.mb-sidebar ul li{
    padding:0.3rem 1rem;
    overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis;
    position: relative;
}
.mb-sidebar ul li:last-child::after{
    position: absolute;bottom:0px;left: 0px;
    content: '';
    width: 100%;height: 1px;
    background: var(--line-color);
}

.mb-sidebar ul li a,
.mb-sidebar ul li .iconfont{
    font-size: 0.9rem;
    transition: all 0.1s;
}

.mb-sidebar ul li a.active{
    color: var(--text-active-color);
}
.mb-sidebar ul li:hover a.active{
    color: var(--text-active-color);
}
.mb-sidebar ul li:hover a{
    padding-left: 2px;
    color: var(--a-hover-color);
}

/* mb-panel */

.mb-panel{
    background: var(--panel-bg-color);
    border-radius: 5px;
    box-shadow: var(--box-shadow-black-color) 0px 2px 5px,
                inset var(--box-shadow-white-color) 0px 1px 0px;
}
.mb-block{
    background: var(--block-bg-color);
    border-radius: 5px;
}

/* mb-line */

.mb-line {
    position: relative;
    height: 1rem;
}
.mb-line::after{
    content: '';
    position: absolute;top:0.5rem;left: 0px;
    width: 100%;height: 1px;background: var(--line-color);
}
.mb-line-dashed{
    position: relative;
    height: 0.6rem;
    width: 100%;
}
.mb-line-dashed::after{
    content: '';
    position: absolute;top:0.3rem;left: 0px;
    width: 100%;height: 1px;
    border-top: 1px dashed var(--line-color);
}

/* mb-nav */

ul.mb-nav{
    list-style: none;
    border-bottom: 1px solid var(--line-color);
}
ul.mb-nav li{
    display: inline-block;
    padding: 10px;
    cursor: pointer;
}
ul.mb-nav li:hover{
    color: var(--a-hover-color);
}
ul.mb-nav li.active{
    color: var(--text-active-color);
    position: relative;
}
ul.mb-nav li.active::after{
    content: "";
    position: absolute;bottom: -1px;left: 10px;
    width: calc(100% - 20px);
    height: 2px;background: var(--text-active-color);
}

/* mb-btn */

button.mb-btn,
a.mb-btn {
    border:none;
    cursor: pointer;
    height: 1.7rem;
    padding: 0 0.4rem;
    min-width: 1.8rem;
    font-size: 0.9rem;
    color: var(--btn-text-color);
    text-shadow: var(--btn-text-shadow-color) 0px 1px 2px;
    background: linear-gradient(var(--btn-bg-color-from), var(--btn-bg-color-to));
    border-radius: 5px;
    transition: all 0.1s;
    /*-webkit-user-select:none; -moz-user-select:none;user-select:none;*/
    box-shadow: var(--box-shadow-black-color) 0px 2px 5px,
                inset var(--box-shadow-white-color) 0px 1px 0px;
    outline: none;
    display: inline-block;
}
a.mb-btn{
    text-align: center;
    padding:0 0.4rem;
    min-width: 1rem;
    line-height: 1.7rem;
    text-decoration: none;
}
button.mb-btn:hover,
a.mb-btn:hover{
    /*transform: scale(1.04);*/
    color: var(--btn-active-text-color);
}
button.mb-btn:active,
a.mb-btn:active {
    color: var(--btn-active-text-color);
    text-shadow:none;
    box-shadow: var(--box-shadow-black-color) 0px 0px 5px inset,
                var(--box-shadow-white-color) 0px 1px 0px;
    outline: none;
}
button.mb-btn:focus{
    outline: none;
}
button.mb-btn .iconfont,
a.mb-btn .iconfont{
    font-size: 0.9rem;
}

button.mb-btn.btn-green,
a.mb-btn.btn-green {
    /*background: #28A745;*/
    background: linear-gradient(var(--btn-green-bg-color-from), var(--btn-green-bg-color-to));
}

button.mb-btn.btn-blue,
a.mb-btn.btn-blue {
    /*background: #4680FF;*/
    background: linear-gradient(var(--btn-blue-bg-color-from), var(--btn-blue-bg-color-to));
}

button.mb-btn.btn-red,
a.mb-btn.btn-red {
    /*background: #DC3545;*/
    background: linear-gradient(var(--btn-red-bg-color-from), var(--btn-red-bg-color-to));
}

button.mb-btn.btn-orange,
a.mb-btn.btn-orange {
    background: linear-gradient(var(--btn-orange-bg-color-from), var(--btn-orange-bg-color-to));
}

button.mb-btn.btn-purple,
a.mb-btn.btn-purple {
    background: linear-gradient(var(--btn-purple-bg-color-from), var(--btn-purple-bg-color-to));
}

/* mb-tag */
.mb-tag{
    display: inline-block;
    font-size: 0.8rem;
    padding: 0 0.2rem;
    color: #ffffff;
    background: var(--btn-bg-color-from);
}
.mb-tag.tag-green{
    background: linear-gradient(var(--btn-green-bg-color-from), var(--btn-green-bg-color-to));
}
.mb-tag.tag-blue{
    background: linear-gradient(var(--btn-blue-bg-color-from), var(--btn-blue-bg-color-to));
}
.mb-tag.tag-red{
    background: linear-gradient(var(--btn-red-bg-color-from), var(--btn-red-bg-color-to));
}
.mb-tag.tag-orange{
    background: linear-gradient(var(--btn-orange-bg-color-from), var(--btn-orange-bg-color-to));
}
.mb-tag.tag-purple{
    background: #94359C;
}



/* mb-option */

.mb-option {
    cursor: pointer;
    display: inline-block;
    padding: 0 0.5rem;
    line-height: 1.6rem;
    height: 1.6rem;
    margin-right: 0.5rem;
    font-size: 1rem;
    background: var(--panel-bg-color);
    border-radius: 5px;
    -webkit-user-select:none; -moz-user-select:none;user-select:none;
    box-shadow: var(--box-shadow-black-color) 0px 2px 5px,
                inset var(--box-shadow-white-color) 0px 1px 0px;
}
.mb-option:last-child{
    margin-right: 0px;
}
.mb-option:active {
    color: var(--btn-active-text-color);
    box-shadow: var(--box-shadow-black-color) 0px 0px 5px inset,
                var(--box-shadow-white-color) 0px 1px 0px;
}
.mb-option.active {
    color: var(--btn-active-text-color);
    box-shadow: var(--box-shadow-black-color) 0px 0px 5px inset,
                var(--box-shadow-white-color) 0px 1px 0px;
    background: linear-gradient(var(--btn-blue-bg-color-from), var(--btn-blue-bg-color-to));
}

/* mb-switch */

.mb-switch {
    width: 40px;
    height: 24px;
    background:var(--input-bg-color);
    border-radius: 24px;
    position: relative;
    cursor: pointer;
    box-shadow: var(--box-shadow-black-color) 0px 0px 5px inset,
                var(--box-shadow-white-color) 0px 1px 0px;
}

.mb-switch::after {
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    left: 1px;
    top: 1px;
    background: var(--panel-bg-color);
    border-radius: 22px;
    box-shadow: 0px 1px 2px var(--btn-text-shadow-color);
}

.mb-switch.open {
    background: linear-gradient(var(--btn-blue-bg-color-from), var(--btn-blue-bg-color-to));
}

.mb-switch.open::after {
    left: 16px;
    background: var(--switch-open-handle-color);
    animation: switchOpen 0.2s ease;
}

@keyframes switchOpen {
    from {
      left: 1px;
  }

  to {
      left: 16px;
  }
}

.mb-switch.close::after {
    left: 1px;
    animation: switchClose 0.2s ease;
}

@keyframes switchClose {
    from {
      left: 16px;
  }

  to {
      left: 1px;
  }
}


/* mb-input */
/* mb-select */
/* mb-textarea */
input.mb-input,
select.mb-select,
textarea.mb-textarea{
    font-size: 1rem;
    color: var(--input-text-color);
    background: var(--input-bg-color);
    height: 1.8rem;line-height: 1.8rem;
    width: calc(100% - 0.8rem);
    border: none;
    outline: none;
    padding: 0 0.4rem;
    border-radius: 5px;
    box-shadow: var(--box-shadow-black-color) 0px 0px 5px inset,
                var(--box-shadow-white-color) 0px 1px 0px;
}
input.mb-input:-webkit-autofill {    /*去掉谷歌浏览器的input黄色背景色*/
    transition:background-color 5000s ease-in-out 0s;
    text-fill-color: var(--input-text-color);
    -webkit-text-fill-color: var(--input-text-color);
}
input.mb-input:focus,
select.mb-select:focus,
textarea.mb-textarea:focus{
    outline: none;
}
select:-moz-focusring {     /*去掉火狐浏览器select选中时的虚线外边框*/
    color: transparent;
    text-shadow: 0 0 0 var(--input-text-color);
}
textarea.mb-textarea{
    resize: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 1.2rem;
    border-radius: 5px;
    min-height: 5rem;
}
select.mb-select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding-right: 1.5rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADjklEQVRoQ+1YQWhcVRS9pz/piJQEacCFENCFC5FKV12HSkJJbKrOfy/NIoKQRTcVFyIUiqlYShEXulGsCJYQ894fLbSR0GyycBXoSokDLqQUuhALogYLJb+nvPAnTKaZznv//1JS/t/NzLn3nnPvu/fdP5A9/mCP85dKwJOuYFWBqgIFM1AdoYIJLGxeVaBwCgs6eLoqQBLW2lhE3gbwP4DV9fX1+bm5ufsFE5XLPOMzBeAoyYMAfhSRBaVU2nK4XYH5+fmB/v7+HwC83hHtFxF5Qyl1KxeLnEbW2mGSVwG81uHi51qtNj45Ofmf+35bgDHmcwCnd4tH8k4URRP1en0tJ58gs0ajcSRN0yUAQ134XNBan+kU8Fc3g8zJPQDvxHG8GMQmEJwkyRTJ70RkfzdTkv9qrQe3BbizliSJO1c+Tf2xUuqjQF5ecGPMHAAv37VabcAdo/Yj9CuAV30ikVx01VBK3fPB98JYa122vxeRt3ph3e8kb2qtX9xxhJIkmclK5+PDYdY2Nzcnpqen7/ga7IZbWFgY6uvrWxKRI75+AMzGcfzNDgHugzHmPICt5vB83GQ6ppT6zRO/A2atfUVElkVk2Nee5HYDPyQgEzEL4EsRiTydbpA8rrVe9cRvwYwxYwAaInLA0y4leUprfakdv2vTGmNGAFwt6rwbMWPMrIh8BWCfJ/muSeo6dXKW94tms/l+t5vbWuuq+pmIvOdJ3MEeeUwfOTbzNBjJ6wDqSqmNdpLW2gMkGwDGAsj3HBQ9537oiMvIuaYeVUrddp+ttS+IyIqIuKb1fdzec7LXqO4pwEXLlqpzAM76Rif5J4DxzP4nAM8H2H6itfaK5SWgFdjnmu8gedeJB/CMJ/ngdSVIgCORLVrLAJ7zJOUFI/l3FEXHQhfGYAGZiJfSNHUiXvZi1wNE8veM/B+h/nIJyBpzkOQVACOhQdvxJFcBvKmU+iePn9wCMhERyW8BzOQJTvIygHfb37BC/RQS0Apmrf1ARC56ruNbg0lEPlRKfRpKuBNfigDnNEmSCZJGRJ7tQcq9a+s4jt0GWvgpTUDW3IfSNF3pNvPd3RBF0Wi9Xnfv2aU8pQrI+sLdutdE5HAHwxsicqJ1O5fCPuDMBsVzSxtJt3G2JtRqs9n8+nH8PVN6BYKUlgCuBJSQxEIuqgoUSl8JxlUFSkhiIRdVBQqlrwTjqgIlJLGQiz1fgQcaqV5Ab1j5FgAAAABJRU5ErkJggg==);
    background-position:right 0.45rem top 50%;
    background-repeat: no-repeat;
    background-size: 0.8rem 0.8rem;
}

input.mb-input:disabled,
select.mb-select:disabled,
button.mb-btn:disabled{
    color: var(--text-color);
    opacity: 0.7;
}
select.mb-select option{
    font-size: 0.8rem;
    background: var(--input-bg-color);
}
input[type='file'].mb-input{
    cursor: pointer;
    font-size: 0.8rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*mb-radio*/
/*mb-checkbox*/
.mb-radio label,
.mb-checkbox label{
    position: relative;
    display: inline-block;
    padding:0.2rem 0.8rem 0.2rem 1.2rem;
    cursor: pointer;
}
.mb-radio input[type="radio"],
.mb-checkbox input[type="checkbox"]{
    margin: 0;padding:0;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}
.mb-radio input[type="radio"]:after,
.mb-checkbox input[type="checkbox"]:after{
    width: 0.9rem;height: 0.9rem;
    content: "";position: absolute;top:50%;left: 0;transform: translateY(-50%);z-index: 2;
    background: var(--body-bg-color);
    border-radius: 50%;
    box-shadow: var(--box-shadow-black-color) 0px 0px 5px inset,
                var(--box-shadow-white-color) 0px 1px 0px;
}
.mb-checkbox input[type="checkbox"]:after{
    border-radius: 3px;
}
.mb-radio input[type="radio"]:checked:after,
.mb-checkbox input[type="checkbox"]:checked:after{
    background: var(--btn-blue-bg-color-from);
    box-shadow: 0px 0px 5px 0px var(--btn-blue-bg-color-from);
}
.mb-radio input[type="radio"]:disabled:after,
.mb-checkbox input[type="checkbox"]:disabled:after{
    background: var(--label-bg-color);
    opacity: 0.5;
}

/*mb-input-group*/
.mb-input-group{
    display: flex;
}
.mb-input-group .group-item:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.mb-input-group .group-item:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.mb-input-group .mb-label{
    padding: 0rem 0.4rem;
    line-height: 1.8rem;height: 1.8rem;
    background: var(--label-bg-color);
    border-radius: 0;
}
.mb-input-group .mb-input,
.mb-input-group .mb-select{
    width: 1%;
    flex: 1 1 auto;
    border-radius: 0;
}
.mb-input-group .mb-btn{
    padding: 0rem 0.4rem;
    line-height: 1.8rem;height: 1.8rem;
    /*background: var(--label-bg-color);*/
    border-radius: 0;
}

/*mb-textarea-group*/
.mb-textarea-group{
    display: flex;
    flex-direction: column;
}
.mb-textarea-group .mb-label{
    width: calc(100% - 1.2rem);
    padding: 0.2rem 0.6rem;
    background: var(--label-bg-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.mb-textarea-group .mb-label + .mb-textarea{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}




/* mb-table */

.mb-table{
    width:100%;overflow: auto;
    padding:1rem 0;
}
.mb-table table{
    margin:0 auto;border-collapse:collapse;
}
.mb-table table thead{
    text-shadow: var(--text-shadow-color) 0px 1px 2px;
    color: var(--a-color);
}
.mb-table tbody tr{
    /*border-top: 1px solid var(--line-color);*/
}
.mb-table tbody tr:hover{
    color: var(--a-hover-color);
    background: var(--label-bg-color);
}
.mb-table table tr td{
    margin: 0;
    padding:0.2rem 0.5rem;
    min-width: 80px;
    /*max-width: 260px;*/
    word-wrap: break-word;
    transition: all 0.1s;
    border: 1px solid var(--line-color);
}
.mb-table tbody tr:hover td:not(:last-child){
    /*transform: scale(1.03);*/
    
}

/* mb-pagination */

.mb-pagination{
    display: inline-block;
    font-size: 0.9rem;
    color: var(--text-color);
}
.mb-pagination.mb-select{
    width: auto;
    height: 1.7rem;line-height: 1.7rem;
    font-size: 0.9rem;
}

ul.mb-pagination{
    list-style: none;
    margin: 0;padding: 0;
}
ul.mb-pagination li{
    display: inline-block;
    padding:0.5rem 0.1rem;
}
ul.mb-pagination li a {
    text-decoration: none;
    padding:0.2rem 0.6rem;
    background: var(--panel-bg-color);
    border-radius: 5px;
    -webkit-user-select:none; -moz-user-select:none;user-select:none;
    box-shadow: var(--box-shadow-black-color) 0px 2px 5px,
                inset var(--box-shadow-white-color) 0px 1px 0px;
}

ul.mb-pagination li:active a {
    color: var(--btn-active-text-color);
    box-shadow: var(--box-shadow-black-color) 0px 0px 5px inset,
                var(--box-shadow-white-color) 0px 1px 0px;
}

ul.mb-pagination li.active a {
    cursor: default;
    color: var(--btn-active-text-color);
    box-shadow: var(--box-shadow-black-color) 0px 0px 5px inset,
                var(--box-shadow-white-color) 0px 1px 0px;
    background: linear-gradient(var(--btn-blue-bg-color-from), var(--btn-blue-bg-color-to));
}

ul.mb-pagination li.disabled a {
    cursor: default;
    box-shadow: var(--box-shadow-black-color) 0px 0px 5px inset,
                var(--box-shadow-white-color) 0px 1px 0px;
}
ul.mb-pagination li.disabled a:hover {
    color: var(--a-color);
}



/* mb-alert */

.mb-alert{
    width: 100%;height: 100%;
    position: fixed;top:0;left: 0;z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mb-alert::after{
    width: 100%;height: 100%;background: var(--alert-bg-color);
    content:'';position: absolute;top:0;left: 0;
    opacity: 0.5;
    -webkit-animation: mb-alertbg-effect 0.2s ease-in-out;
    animation: mb-alertbg-effect 0.2s ease-in-out;
}
@-webkit-keyframes mb-alertbg-effect {
    0% {
      opacity: 0;
  }
  100% {
      opacity: 0.2;
  }
}
@keyframes mb-alertbg-effect {
    0% {
      opacity: 0;
  }
  100% {
      opacity: 0.2;
  }
}
.mb-alert .mb-panel{
    width: 260px;
    position: relative;z-index: 2;
    display: flex;flex-direction: column;
    font-size: 0.9rem;
    -webkit-animation: mb-alert-effect 0.2s ease-in-out;
    animation: mb-alert-effect 0.2s ease-in-out;
}
@-webkit-keyframes mb-alert-effect {
    0% {
      transform: rotateX(90deg);
  }
  100% {
      transform: rotateX(0deg);
  }
}
@keyframes mb-alert-effect {
    0% {
      transform: rotateX(90deg);
  }
  100% {
      transform: rotateX(0deg);
  }
}
.mb-alert .mb-panel .title{
    position: relative;overflow: hidden;
    padding:0.5rem 0.8rem 0 0.8rem;
    text-shadow: var(--text-shadow-color) 0px 1px 2px;
    color:var(--text-color);
}
.mb-alert .mb-panel .content{
    min-height: 45px;max-height: 200px;overflow-y: auto;
    padding:0rem 0.8rem;
    color: var(--input-text-color);
}
.mb-alert .mb-panel .btn-box{
    padding:0.8rem;
}
.mb-alert .mb-panel .btn-box button.mb-btn{
    margin-left: 1rem;
}




/*mb-alert-selector*/

.mb-alert.mb-alert-selector .mb-panel{
    width: 560px;
}
.mb-alert.mb-alert-selector .mb-panel .title{
    padding-top: 0.8rem;
    padding-bottom: 0.3rem;
}

.mb-alert.mb-alert-selector .mb-panel .content{
    min-height: 200px;
    max-height: 400px;
    overflow: auto;
}
.mb-alert.mb-alert-selector .mb-panel .content .tip{
    width: 100%;height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mb-alert.mb-alert-selector .mb-table tbody tr{
    color: var(--text-color);
}
.mb-alert.mb-alert-selector .mb-table tbody tr.active{
    color: var(--btn-active-text-color);
    background: linear-gradient(var(--btn-blue-bg-color-from), var(--btn-blue-bg-color-to));
}
.mb-alert.mb-alert-selector .mb-table tbody tr td img{
    height: 40px;
}

.mb-alert.mb-alert-selector .pagination-box{
    padding:8px 0px;
}
.mb-alert.mb-alert-selector ul.mb-pagination li{
    padding:5px 3px;
}

/*mb-alert-date*/

.mb-alert-date .mb-panel{
    width: 350px;
}
.mb-alert-date .alert-date-input{
    display: flex;
    flex-wrap:wrap;
}
.mb-alert-date .input-item{
    flex: 0 0 33.3333%;
    padding: 0.2rem 0;
}
.mb-alert-date .mb-input-group{
    padding: 0 0.5rem;
}
.mb-alert-date label.mb-label{
    color: var(--text-color);
}
.mb-alert-date .alert-date-picker{
    position: relative;
    -webkit-user-select:none; -moz-user-select:none;user-select:none;
}
.mb-alert-date .date-prev{
    cursor: pointer;
    position: absolute;top: 0;left: 0;
    transition: all 0.2s;
    height: 100%;width: 2rem;
    display: flex;align-items: center;justify-content: center;
    border-radius: 0 5px 5px 0;
}
.mb-alert-date .date-next{
    cursor: pointer;
    position: absolute;top: 0;right: 0;
    transition: all 0.2s;
    height: 100%;width: 2rem;
    display: flex;align-items: center;justify-content: center;
    border-radius: 5px 0 0 5px;
}
.mb-alert-date .date-prev:hover,
.mb-alert-date .date-next:hover{
    color: var(--a-hover-color);
    background: var(--label-bg-color);
}

.mb-alert-date .date-picker{
    display: flex;
    flex-wrap:wrap;
    padding: 0 2rem;
}
.mb-alert-date .picker-item{
    flex: 0 0 20%;
    text-align: center;
    padding: 0.2rem 0;
    cursor: pointer;
    -webkit-user-select:none; -moz-user-select:none;user-select:none;
    transition: all 0.2s;
    border-radius: 5px;
}
.mb-alert-date .alert-date-picker .picker-item:hover{
    color: var(--a-hover-color);
    background: var(--label-bg-color);
}


/* mb-loading */
.mb-alert.mb-alert-loading .mb-panel{
    width: auto;padding:0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mb-loading {
    font-size: 20px;
    color: var(--mb-style-light-title);
    width: 1em;
    height: 1em;
    border: .2em solid transparent;
    border-top-color: currentcolor;
    border-radius: 50%;
    -webkit-animation: 1s mb-loading-effect linear infinite;
    animation: 1s mb-loading-effect linear infinite;
    position: relative;
}
.mb-loading:before {
    content: '';
    display: block;
    width: inherit;
    height: inherit;
    position: absolute;
    top: -.2em;
    left: -.2em;
    border: .2em solid currentcolor;
    border-radius: 50%;
    opacity: .5;
}
@-webkit-keyframes mb-loading-effect {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}
@keyframes mb-loading-effect {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}


/* .mb-editor */

.editor-tool{
    display: flex;
    padding: 0.3rem;
    flex-wrap:wrap;
    background: var(--label-bg-color);
    border-radius: 5px 5px 0 0;
}
.editor-tool .mb-btn{
    margin-left: 0.3rem;
    margin-bottom: 0.3rem;
    position: relative;
}
.editor-tool .mb-btn .color-panel{
    position: absolute;top: 32px;left: 0;
    width: 150px;display: none;
    padding: 0.3rem;
    cursor: default;
    z-index: 2;
}
.editor-tool .mb-btn .color-panel .color-box{
    display: flex;
    flex-wrap: wrap;
}
.editor-tool .mb-btn .color-panel .color-box .item{
    width: 25px;height: 25px;cursor: pointer;
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
    text-shadow: none;
    text-align: center;line-height: 25px;
}
.editor-tool .mb-btn .color-panel .color-box .item:hover,
.editor-tool .mb-btn .color-panel .color-box .item:active{
    background: var(--label-bg-color);
}
.editor-tool .mb-btn input[type="file"]{
    position: absolute;top: 0;left: 0;
    width: 100%;height: 100%;
    opacity: 0;
    cursor: pointer;
}


.editor-tool .line{
    padding:0 0.3rem;
}

.editor-content{
    min-height: 200px;
    max-height: 440px;
    overflow-y: auto;
    outline: none;
    padding: 0.5rem;
    word-wrap:break-word;
    background: var(--input-bg-color);
    border-radius:0 0 5px 5px;
    box-shadow: var(--box-shadow-black-color) 0px 0px 5px inset,
                var(--box-shadow-white-color) 0px 1px 0px;
}
.editor-content ul,
.editor-content ol{
    margin-left: 1rem;
}

.editor-content .mb-table{
    padding-bottom: 4rem;
    padding-top: 1rem;
    position: relative;
}
.editor-content .mb-table table{
    table-layout: fixed;
    word-break: break-all;
}
.editor-content .mb-table tr:hover{
    color: var(--text-color);
    background: none;
}
.editor-content .mb-table td{
    position: relative;
}
.editor-content .mb-table td .table-toolbar{
    position: absolute;bottom: 0;right: 0;
    -webkit-user-select:none; -moz-user-select:none;user-select:none;
    z-index: 2;
    opacity: 0.2;
}
.editor-content .mb-table td .table-toolbar:hover{
    opacity: 0.8;
}
.editor-content .mb-table td .table-toolbar .toolbar-box{
    position: absolute;top: 27px;right: 0;
    width: 230px;
    padding: 0.3rem 0 0 0;
    cursor: default;
    display: none;
    z-index: 2;
}
.editor-content .mb-table td .table-toolbar .toolbar-box .mb-panel{
    display: flex;
    flex-wrap: wrap;
    padding: 0.3rem 0.3rem 0 0.3rem;
}
.editor-content .mb-table td .table-toolbar .toolbar-box .mb-panel .item{
    cursor: pointer;
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
    text-shadow: none;
    padding: 0 0.2rem;
    border-radius: 5px;
    color: var(--a-color);
}
.editor-content .mb-table td .table-toolbar .toolbar-box .mb-panel .item:hover,
.editor-content .mb-table td .table-toolbar .toolbar-box .mb-panel .item:active{
    background: var(--label-bg-color);
    color: var(--a-hover-color);
}


/*.mb-log*/

.mb-log{
    width: 512px;
    height: 400px;
    padding: 0.5rem 0;
    background: rgba(40,41,35,0.9);
    border-radius: 5px 5px 0 0;
    position: fixed;bottom: 0;right: 0.5rem;z-index: 999;
    transition: all 0.2s;
    color: #aaaaaa;
}
.mb-log:hover{
    background: rgba(40,41,35,1);
}
.mb-log .title{
    display: flex;
    padding: 0 1rem 0.5rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.mb-log .title .left{
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-shadow: var(--text-shadow-color) 0px 1px 2px;
}
.mb-log .title .right{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.mb-log .content{
    height: 340px;
    word-break: break-all;
    overflow-y: auto;
    font-size: 14px;
    padding: 0.8rem 1rem;
    outline: none;
}
.mb-log .content p{
    position: relative;
    padding-left: 70px;
    padding-bottom: 5px;
}
.mb-log .content p .time{
    position: absolute;top: 0;left: 0;
}

.mb-log .color-yellow{
    color: #E7DB74;
}
.mb-log .color-pink{
    color: #F92472;
}
.mb-log .color-green{
    color: #28A745;
}

.mb-log .toggle{
    cursor: pointer;
}
.mb-log .clear,.mb-log .delete{
    cursor: pointer;
    margin-left: 1rem;
}

.mb-log.minisize{
    height: 35px;
}
.mb-log.minisize .toggle{
    transform:rotate(180deg);
    -moz-transform:rotate(180deg);    /* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg);  /* Opera */
}



/* .mb-row */

.mb-row {
    display: flex;
    position: relative;
    padding:0.3rem 0;
}
.mb-row.mb-row-title{
    padding: 0;
}

.mb-col {
    flex: 1;
    display: flex;
}

.width-1of1 {
    flex: 0 0 100%;
}

.width-1of2 {
    flex: 0 0 50%;
}

.width-1of3 {
    flex: 0 0 33.3333%;
}

.width-2of3 {
    flex: 0 0 66.6666%;
}

.width-1of4 {
    flex: 0 0 25%;
}

.width-3of4 {
    flex: 0 0 75%;
}

.width-1of5 {
    flex: 0 0 20%;
}

.width-2of5 {
    flex: 0 0 40%;
}

.width-3of5 {
    flex: 0 0 60%;
}

.width-4of5 {
    flex: 0 0 80%;
}

.width-1of6 {
    flex: 0 0 16.6666%;
}

.width-1of7 {
    flex: 0 0 14.2857%;
}

.width-1of8 {
    flex: 0 0 12.5%;
}

.width-3of8 {
    flex: 0 0 37.5%;
}

.width-1of9 {
    flex: 0 0 11.1111%;
}

.width-2of9 {
    flex: 0 0 22.2222%;
}

.width-4of9 {
    flex: 0 0 44.4444%;
}

.width-1of10 {
    flex: 0 0 10%;
}

.width-3of10 {
    flex: 0 0 30%;
}

.width-1of12 {
    flex: 0 0 8.3333%;
}

.width-5of12 {
    flex: 0 0 41.6666%;
}

.width-7of12 {
    flex: 0 0 58.3333%;
}

.width-1of15 {
    flex: 0 0 6.6666%;
}

.width-2of15 {
    flex: 0 0 13.3333%;
}

.width-4of15 {
    flex: 0 0 26.6666%;
}

.width-3of16 {
    flex: 0 0 18.75%;
}

.width-11of20 {
    flex: 0 0 55%;
}

.width-5of28 {
    flex: 0 0 17.8571%;
}

.width-7of30 {
    flex: 0 0 23.3333%;
}

.width-11of30 {
    flex: 0 0 36.6666%;
}

.width-19of30 {
    flex: 0 0 63.3333%;
}

.width-1of36 {
    flex: 0 0 2.7777%;
}

.width-47of360 {
    flex: 0 0 13.0555%;
}

.align-lt {
    justify-content: flex-start;
    align-items: flex-start;
}

.align-lm {
    justify-content: flex-start;
    align-items: center;
}

.align-lb {
    justify-content: flex-start;
    align-items: flex-end;
}

.align-ct {
    justify-content: center;
    align-items: flex-start;
}

.align-cm {
    justify-content: center;
    align-items: center;
}

.align-cb {
    justify-content: center;
    align-items: flex-end;
}

.align-rt {
    justify-content: flex-end;
    align-items: flex-start;
}

.align-rm {
    justify-content: flex-end;
    align-items: center;
}

.align-rb {
    justify-content: flex-end;
    align-items: flex-end;
}