@charset "utf-8";

* {
    padding: 0;
    margin: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}
:root {
    /*opacity: .6;*/
    --warning: #ec971f;
    --success: #398439;
    --info: #31b0d5;
    --danger: #d9534f;
    --Red: #FF0000;
    --black: #0a0a0a;
    --default: #999999;
    --primary: #204d74;
    --dark: #3D464D;
}

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: "苹方", "微软雅黑", "Open Sans", sans-serif;
    font-size: 15px;
}

body {
    width: 100%;
    height: 100%;
    line-height: 1.5;
}

body:before {
    content: "";
    position: fixed;
    left: 0;
    top: -10px;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    z-index: 100;
}

.overflow {
    overflow: auto;
    width: 100% !important;
    height: 100%;
}

.html-body-overflow {
    overflow-x: hidden;
    overflow-y: hidden;
}

body, ul {
    margin: 0;
    padding: 0
}

li {
    list-style: none
}

a {
    text-decoration: none;
}
a:hover{
  cursor: pointer;
}

.a-none {
    text-decoration: none !important;
    outline: none !important;
}

a.a-underline {
    text-decoration: underline !important;
}

/*input.form-control,*/
input.form-control.focus-color:focus {
    border-color: #79859b;
    box-shadow: 0 0 5px 0 #79859b;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: bold !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
    font-family: "苹方", "微软雅黑", "sans-serif";
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
    font-weight: normal;
    line-height: 1;
    color: #999999;
}

.my-title {
    font-weight: bold;
    font-family: "苹方", "微软雅黑", "sans-serif";
}

.opacity-half {
    opacity: .5;
}

.opacity-little {
    opacity: .8;
}

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    /*padding-top: 330px;*/
    /*background-color: #34495e;*/
    background-color: rgb(35, 35, 35);

}

#loading > i,
#loading > span {
    opacity: .8;
}

.cursor-default {
    cursor: default !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-text {
    cursor: text !important;
}

.cursor-move {
    cursor: move !important;
}

.disabled {
    pointer-events: none;
}

.bg-null {
    background-image: none !important;
    background-color: transparent !important;
}

.blur {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.opacity {
    opacity: 1 !important;
}

.opacity0 {
    opacity: 0 !important;
}

.color-transparent, .color-transparent > th {
    color: transparent !important;
}

.strong {
    font-family: "苹方", sans-serif;
    font-weight: bold !important;
}

.uppercase {
    text-transform: uppercase;
}

.normal {
    font-weight: normal;
}

.row.no-padding {
    margin-left: 0;
    margin-right: 0;
}

.row.no-padding [class^="col-"] {
    padding: 0;
}

.mode {
    border: 1px solid red !important;
}

.all {
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 0;
    position: relative;
}

.emt {
    width: 100%;
    height: 1500px;
    border: 1px solid red;
    position: relative;
}

.transition-false {
    --transition: none;
}

.transition-true {
    --transition: all 300ms;
}

.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.Index0 {
    z-index: 0 !important;
}

.Index1 {
    z-index: 1 !important;
}

.Index2 {
    z-index: 2 !important;
}

.Index99 {
    z-index: 99 !important;
}

.Index100 {
    z-index: 100 !important;
}

.Index888 {
    z-index: 888 !important;
}

.Index999 {
    z-index: 999 !important;
}

.Index1000 {
    z-index: 1000 !important;
}

/*<editor-fold desc="<-- Ready-to-Use CSS | Div 常用阴影样式和按钮 输入框样式 --> ">*/

.drop-shadow.top {
    box-shadow: 0 -4px 2px -2px rgba(0, 0, 0, 0.4);
}

.drop-shadow.right {
    box-shadow: 4px 0 2px -2px rgba(0, 0, 0, 0.4);
}

.drop-shadow.bottom {
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.4);
}

.drop-shadow.left {
    box-shadow: -4px 0 2px -2px rgba(0, 0, 0, 0.4);
}

.emphasize-dark {
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .35);
}

.emphasize-light {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .25);
}

.emphasize-inset {
    box-shadow: inset 0 0 7px 4px rgba(255, 255, 255, .5);
}

.emphasize-border {
    box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .5);
}

.embossed-light {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.embossed-heavy {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.3),
    0 1px 1px rgba(255, 255, 255, 0.9);
}

.gradient-light-linear {
    background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}

.gradient-dark-linear {
    background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, 0));
}

.gradient-light-radial {
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}

.gradient-dark-radial {
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}

.light-rounded {
    border-radius: 3px;
}

.heavy-rounded {
    border-radius: 8px;
}

.full-rounded {
    border-radius: 50%;
}

.barrel-rounded {
    border-radius: 20px/60px;
}

.metro {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    background: #08C;

    /* Font styles */
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.metro:hover {
    background: #0AF;
}

.metro.three-d {
    position: relative;
    box-shadow: 1px 1px #53A7EA,
    2px 2px #53A7EA,
    3px 3px #53A7EA;
    transition: all 0.1s ease-in;
}

.metro.three-d:active {
    box-shadow: none;
    top: 3px;
    left: 3px;
}

.modern {
    display: inline-block;
    margin: 10px;
    padding: 8px 15px;
    background: #B8ED01;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    transition: all 0.3s ease-out;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.3),
    0 0 4px 1px rgba(0, 0, 0, 0.2);

    /* Font styles */
    text-decoration: none;
    text-shadow: 0 1px rgba(255, 255, 255, 0.7);
}

.modern:hover {
    background: #C7FE0A;
}

.embossed-link {
    box-shadow: inset 0 3px 2px rgba(255, 255, 255, .22),
    inset 0 -3px 2px rgba(0, 0, 0, .17),
    inset 0 20px 10px rgba(255, 255, 255, .12),
    0 0 4px 1px rgba(0, 0, 0, .1),
    0 3px 2px rgba(0, 0, 0, .2);
}

.modern.embossed-link {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.3),
    0 0 4px 1px rgba(0, 0, 0, 0.2),
    inset 0 3px 2px rgba(255, 255, 255, .22),
    inset 0 -3px 2px rgba(0, 0, 0, .15),
    inset 0 20px 10px rgba(255, 255, 255, .12),
    0 0 4px 1px rgba(0, 0, 0, .1),
    0 3px 2px rgba(0, 0, 0, .2);
}

.modern.embossed-link:active {
    box-shadow: inset 0 -2px 1px rgba(255, 255, 255, 0.2),
    inset 0 3px 2px rgba(0, 0, 0, 0.12);
}

.socle {
    position: relative;
    z-index: 2;
}

.socle:after {
    content: "";
    z-index: -1;
    position: absolute;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7);
    top: -6px;
    bottom: -6px;
    right: -6px;
    left: -6px;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

.depth {
    display: block;
    border: 1px solid silver;
    background: linear-gradient(#eee, #fff);
    transition: all 0.3s ease-out;
    padding: 5px;
    color: #555;
}

.depth:focus {
    outline: none;
    background-position: 0 -1.7em;
}

.mac {
    display: block;
    border: none;
    border-radius: 20px;
    padding: 5px 8px;
    color: #333;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2),
    0 0 4px rgba(0, 0, 0, 0.1);
}

.mac:focus {
    outline: none;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2),
    0 0 4px rgba(0, 0, 0, 0.1),
    0 0 5px 1px #51CBEE;
}

.line {
    display: block;
    border: none;
    color: #333;
    background: transparent;
    border-bottom: 1px dotted black;
    padding: 5px 2px 0 2px;
}

.line:focus {
    outline: none;
    border-color: #51CBEE;
}

/*</editor-fold>*/

/*<editor-fold desc="<-- DIY Plug-ins | 自定义模块组件 --> ">*/

/*  自定义容器滚动条    */
.my-panel-diy {
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 300ms linear;
}

.my-panel-diy::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: rgba(225, 224, 228, 0.15);
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    cursor: pointer;
}

.my-panel-diy::-webkit-scrollbar-track:hover {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    background-color: rgba(225, 224, 228, 0.3);
    border-radius: 10px;
    cursor: pointer;
}

.my-panel-diy::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
    border-radius: 10px;
}

.my-panel-diy::-webkit-scrollbar-thumb {
    background-color: rgba(71, 78, 91, 0.1);
    border: 1px solid rgba(181, 181, 181, 0.4);
    border-radius: 10px;
    cursor: pointer;
}

.my-panel-diy::-webkit-scrollbar-thumb:hover {
    background-color: rgba(71, 78, 91, 0.14);
    border: 1px solid rgba(181, 181, 181, 0.8);
    cursor: pointer;
    border-radius: 10px;
}

.my-panel-diy::-webkit-scrollbar-thumb:active {
    background-color: rgba(71, 78, 91, 0.3);
    border: 1px solid rgba(181, 181, 181, 1);
    border-radius: 10px;
}

.my-panel-diy-w {
    overflow-y: scroll;
    overflow-x: hidden;
    transition: all 300ms linear;
}

.my-panel-diy-w::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    cursor: pointer;
}

.my-panel-diy-w::-webkit-scrollbar-track:hover {
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .5);
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    cursor: pointer;
}

.my-panel-diy-w::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
    border-radius: 10px;
}

.my-panel-diy-w::-webkit-scrollbar-thumb {
    background-color: rgba(71, 78, 91, 0.3);
    border: 1px solid rgba(181, 181, 181, 0.3);
    border-radius: 10px;
    cursor: pointer;
}

.my-panel-diy-w::-webkit-scrollbar-thumb:hover {
    background-color: rgba(71, 78, 91, 0.5);
    border: 1px solid rgba(181, 181, 181, 0.8);
    cursor: pointer;
    border-radius: 10px;
}

.my-panel-diy-w::-webkit-scrollbar-thumb:active {
    background-color: rgba(71, 78, 91, 0.3);
    border: 1px solid rgba(181, 181, 181, 1);
    border-radius: 10px;
}

/*-----------------------------------*/

.heg10 {
    height: 10% !important;
}

.heg15 {
    height: 15% !important;
}

.heg20 {
    height: 20% !important;
}

.heg25 {
    height: 25% !important;
}

.heg30 {
    height: 30% !important;
}

.heg35 {
    height: 35% !important;
}

.heg40 {
    height: 40% !important;
}

.heg45 {
    height: 45% !important;
}

.heg50 {
    height: 50% !important;
}

.heg55 {
    height: 55% !important;
}

.heg60 {
    height: 60% !important;
}

.heg65 {
    height: 65% !important;
}

.heg70 {
    height: 70% !important;
}

.heg75 {
    height: 75% !important;
}

.heg80 {
    height: 80% !important;
}

.heg85 {
    height: 85% !important;
}

.heg90 {
    height: 90% !important;
}

.heg95 {
    height: 95% !important;
}

.heg100 {
    height: 100% !important;
}

/* ----------------  列表&网格布局切换组件 --------------- */

#my-layout {
    list-style-type: none;
    padding: 0;
    width: 100%;
    float: left;
}

.item {
    /*border: 1px solid rgba(121, 133, 155, 0.5);*/
}

/* 显示为列表时的样式 */
.item-list > .item {
    margin: 8px;
    padding: 1em;
    font-size: 1em;
    border-radius: 4px;
    height: 55px;
    background-color: #f5f5f5;
    transition: transform 300ms linear, background 300ms linear;
}

/* 显示为列表时的拖拽占位符 */
.item-list > .item + .item-placeholder {
    height: 45px;
    font-size: 1em;
    border: 2px dashed rgba(121, 133, 155, 0.5);
    border-radius: 4px;
    margin: 8px;
    background: rgba(255, 238, 159, 0.3);
}

/* 显示为网格时的样式 */
.item-grid > .item {
    margin: 5px;
    float: left;
    padding: 10px;
    /*padding-top: 70px;*/
    width: 23%;
    height: 165px;
    color: #79859b;
    text-align: center;
    border-radius: 2px;
    background-color: #f5f5f5;
    transition: transform 300ms ease, background 300ms ease;
}

/* 显示为网格时的拖拽占位符 */
.item-grid > .item + .item-placeholder {
    width: 23%;
    height: 165px;
    border: 2px dashed rgba(121, 133, 155, 0.5);
    border-radius: 2px;
    margin: 5px;
    float: left;
    background: rgba(255, 238, 159, 0.3);

}

#my-layout > .item:hover {
    transform: scale(.95);
    background-color: #ebebeb;
}

#my-layout .block:hover {
    background-color: #ebebeb;
    /*background: #FECA40;*/
    transform: scale(.85);
}

#my-layout .item:active,
#my-layout .item:focus {
    background-color: #d6d6d6;
}

/* #my-layout的item 拖拽区域 */
.theMove {
    cursor: pointer !important;
}

.theMove:active {
    cursor: move !important;
}

/* 自定义checkbox的label容器 */
.checkBox-label {
    border: 2px solid #79859b;
    background-color: white;
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
    /*transition: all .3s;*/
    transform: scale(1);
}

.checkBox-label:hover {
    background-color: #f5f5f5;
    transform: scale(1);

}

.checkBox-label:active {
    transform: scale(.95);
    box-shadow: inset 0px 0px 5px #b3b3b3;
}

/* 自定义checkbox的图标 */
.checkBox-Diy {
    font-size: 1.15em;
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
}

input[name='checkbox']:checked + .checkBox-Diy {
    visibility: visible;
    opacity: 1;
}

/*</editor-fold>*/

/*<editor-fold desc=" <-- DIY Colors | 自定义的字体色/背景色 --> ">*/

.transparent-bg {
    /* 背景颜色透明 (背景图片无效) */
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

.transparent-color {
    /* 字体颜色透明 */
    color: transparent;
}

.orange:hover {
    background-color: #f19932;
}

.orange {
    background-color: #f4b162;
    color: #ffffff !important;
}

.panel-orange {
    border: 1px solid #f4b162;
}

.panel-orange > .panel-heading {
    background-color: #f4b162;
    color: #ffffff !important;
}

.blue:hover {
    background-color: #4aa3de;
}

.blue {
    background-color: #75b9e6;
    color: #ffffff !important;
}

.panel-blue {
    border: 1px solid #75b9e6;
}

.panel-blue > .panel-heading {
    background-color: #75b9e6;
    color: #ffffff !important;
}

.magenta:hover {
    background-color: #e0237c;
}

.magenta {
    background-color: #e65097;
    color: #ffffff !important;
}

.panel-magenta {
    border: 1px solid #e65097;

}

.panel-magenta > .panel-heading {
    background-color: #e65097;
    color: #ffffff !important;
}

.purple:hover {
    background-color: #9269d6;
}

.purple {
    background-color: #af91e1;
    color: #ffffff;
}

.panel-purple {
    border: 1px solid #af91e1;

}

.panel-purple > .panel-heading {
    background-color: #af91e1;
    color: #ffffff;
}

.red:hover {
    background-color: #f35454;
}

.red {
    background-color: #f68484;
    color: #ffffff !important;
}

.panel-red {
    border: 1px solid #f68484;

}

.panel-red > .panel-heading {
    background-color: #f68484;
    color: #ffffff !important;
}

.brown:hover {
    background-color: #c2a26f;
}

.brown {
    background-color: #d1b993;
    color: #ffffff !important;
}

.panel-brown {
    border: 1px solid #d1b993;
}

.panel-brown > .panel-heading {
    background-color: #d1b993;
    color: #ffffff !important;
}

.teal:hover {
    background-color: #73c4b1;
}

.teal {
    background-color: #97d3c5;
}

.panel-teal {
    border: 1px solid #97d3c5;
    color: #ffffff !important;
}

.panel-teal > .panel-heading {
    background-color: #97d3c5;
    color: #ffffff !important;
}

.green:hover {
    background-color: #4ac77c;
}

.green {
    background-color: #71d398;
    color: #ffffff !important;
}

.panel-green {
    border: 1px solid #71d398;
}

.panel-green > .panel-heading {
    background-color: #71d398;
    color: #ffffff !important;
}

.panel-dark {
    border: 1px solid #79859b
}

.panel-dark > .panel-heading {
    background-color: #79859b;
    color: #ffffff !important;
}

.modal-content {
    overflow: hidden;
}

.modal-header {
    padding: 10px 15px;

}

.dark-bg2 {
    background-image: -webkit-linear-gradient(top, #9eaed8 0, #8693B7 100%);
    background-image: -o-linear-gradient(top, #9eaed8 0, #8693B7 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9eaed8), to(#8693B7));
    background-image: linear-gradient(to bottom, #9eaed8 0, #8693B7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #8693B7;
    color: #ffffff;
}

.modal-lightdark > .modal-header {
    background-color: #8693B7;
    border-color: #808caf;
    color: #ffffff;
}

.modal-lightdark > .modal-header .close {
    color: #fff;
}

.orange a, .blue a, .magenta a, .red a, .purple a, .green a, .brown a, .panel-orange a, .panel-blue a, .panel-magenta a, .panel-red a, .panel-purple a, .panel-green a, .panel-brown a, .panel-orange .panel-controls a, .panel-blue .panel-controls a, .panel-magenta .panel-controls a, .panel-red .panel-controls a, .panel-purple .panel-controls a, .panel-green .panel-controls a, .panel-brown .panel-controls a {
    color: #ffffff !important;
}

.color-red {
    color: #f68484 !important;
}

.color-blue {
    color: #75b9e6 !important;
}

.color-green {
    color: #71d398 !important;
}

.color-yellow {
    color: #ffcc66 !important;
}

.color-orange {
    color: #f4b162 !important;
}

.color-white {
    color: #ffffff !important;
}

.color-teal {
    color: #97d3c5 !important;
}

.color-dark {
    color: #79859b !important;
}

.color-black {
    color: #000000 !important;

}

.color-pink {
    color: #f78db8 !important;
}

.color-lime {
    color: #a8db43 !important;
}

.color-magenta {
    color: #e65097 !important;
}

.color-purple {
    color: #af91e1 !important;
}

.color-brown {
    color: #d1b993 !important;
}

.color-gray {
    color: #555555 !important;
}

.color-grayspr {
    color: #f3f5f6 !important;
}

/*</editor-fold>*/

/*--------------------*/
.white-bg {
    color: #768399;
    background-color: #ffffff !important;
}

.panel-white:nth-last-child(1) {
    border-bottom: none;
}

.panel-white {
    border-bottom: 1px solid #ddd;
}

.dyc-title {
    border-bottom: 1px solid #ddd;
}

.static-bg {
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    background-color: rgba(240, 239, 243, 0.53) !important;
}

.my-nav > li:hover a {
    background-color: white;
}

.panel-white > .panel-heading,
.panel-white > .panel-body,
.panel-white > .panel-footer {
    background-color: #ffffff;
}

.set-icon {
    padding: 5px 8px;
    opacity: .3 !important;
    transition: var(--transition);
}

.set-icon:hover {
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 1 !important;
}

button.white-bg, a.white-bg {
    border: 1px solid #8697b4;
    transition: all;
    transition-duration: .15s;
}

button.white-bg:hover, a.white-bg:hover {
    color: #606c81;
    background-color: rgba(146, 159, 181, 0.1);
}

.red-bg {
    color: #ffffff;
    background-color: #f68484;
}

.danger-red {
    color: #cc0000;
}

.alert-red {
    color: #cc0000;
    background-color: rgba(246, 132, 132, 0.15);
}

button.red-bg:hover, a.red-bg:hover {
    color: #ffffff;
    background-color: #f35454;
}

.blue-bg {
    color: #ffffff;
    background-color: #75b9e6;
}

.green-bg {
    color: #ffffff;
    background-color: #71d398;
}

.green-bg-opacity {
    color: #ffffff;
    background-color: rgba(113, 211, 152, 0.7);
}

.error-bg {
    background-color: rgba(255, 0, 0, 0.12) !important;
    border: 1px solid rgba(214, 0, 0, 0.5) !important;
    box-shadow: 0 0 8px 1px rgba(214, 0, 0, 0.25), inset 0 0 10px rgba(73, 0, 0, 0);
}

.yellow-bg {
    color: #ffffff;
    background-color: #ffcc66;
}

.yellow-bg-opacity {
    color: #ffffff;
    background-color: rgba(255, 204, 102, 0.7);
}

.orange-bg {
    color: #ffffff;
    background-color: #f4b162;
}

.purple-bg {
    color: #ffffff;
    background-color: #af91e1;
}

.purple-bg-opacity {
    color: #ffffff;
    background-color: rgba(175, 145, 225, 0.7);
}

.pink-bg {
    color: #ffffff;
    background-color: #f78db8;
}

.lime-bg {
    color: #ffffff;
    background-color: #a8db43;
}

.magenta-bg {
    color: #ffffff;
    background-color: #e65097;
}

.teal-bg {
    color: #ffffff;
    background-color: #97d3c5;
}

.brown-bg {
    color: #ffffff;
    background-color: #d1b993;
}

.gray-bg {
    color: #768399;
    background-color: #e4e9eb !important;
}

.lightgray-bg {
    background-color: #f5f5f5;
    color: rgba(48, 59, 84, 0.8);
}

.dark-bg {
    color: #ffffff;
    background-color: #79859b;
}

.lightdark-bg {
    color: #2C4077;
    background-color: rgba(209, 216, 236, 0.7);
}

.panel-dark.panel-default > .panel-heading {
    background-color: #79859b;
}

button.dark-bg, a.dark-bg {
    border: 1px solid #646e80;
    outline: none;
}

button.dark-bg:hover, a.dark-bg:hover {
    color: #ffffff;
    background-color: #606c81;
    outline: none;
}

button.dark-bg:active, a.dark-bg:active {
    color: #ffffff;
    background-color: #4e596a;
    outline: none !important;
}

button.dark-bg:focus, a.dark-bg:focus {
    color: #ffffff;
    outline: none;
}

.btn-dark {
    background-image: -webkit-linear-gradient(top, #798aa4 0, #606c81 100%);
    background-image: -o-linear-gradient(top, #798aa4 0, #606c81 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#798aa4), to(#606c81));
    background-image: linear-gradient(to bottom, #798aa4 0, #606c81 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #637085;
    color: #ffffff;
}

.btn-lightdark {
    background-image: -webkit-linear-gradient(top, #9eaed8 0, #7d89ab 100%);
    background-image: -o-linear-gradient(top, #9eaed8 0, #7d89ab 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9eaed8), to(#7d89ab));
    background-image: linear-gradient(to bottom, #9eaed8 0, #7d89ab 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #8693B7;
    color: #ffffff;
}

.btn-lightdark:hover {
    background-image: none;
    background-color: #8b99be;
    color: #ffffff;
}

.btn-dark:hover {
    background-color: #606c81;
    background-position: 0 -15px;
    color: #ffffff;
}

.btn-lightdark.active, .btn-lightdark:active {
    background-color: #8693B7;
    border-color: #8693B7;
    outline: none !important;
    background-image: none;
}

.btn-lightdark.focus, .btn-lightdark:focus {
    border-color: #8693B7;
    background-color: #606c81;
    background-image: none;
    color: #ffffff;

}

.btn-dark.active, .btn-dark:active {
    /*background-color: #525d6e;*/
    background-color: #606c81;
    border-color: #606c81;
    outline: none !important;
    background-image: none;
    /*background-image: none;*/
}

.btn-dark.focus, .btn-dark:focus {
    border-color: #424b59;
    background-color: #606c81;
    background-image: none;
}

.danger {
    background-color: var(--danger);
}

.success {
    background-color: var(--success);
}

.warning {
    background-color: var(--warning);
}

.info {
    background-color: var(--info);
}

.default {
    background-color: var(--default);
}

.primary {
    background-color: var(--primary);
}

.tip-danger {
    color: var(--danger);
}

.tip-success {
    color: var(--success);
}

.tip-warning {
    color: var(--warning);
}

.tip-info {
    color: var(--info);
}

.tip-default {
    color: var(--default);
}

.tip-primary {
    color: var(--primary);
}

.bg-default {
    background: #f5f5f5;
}

.bg-orange2 {
    color: #ffffff;
    background: #f0652a;
}

.btn-orange2 {
    background-image: -webkit-linear-gradient(top, #f0652a 0, #dd5d27 100%);
    background-image: -o-linear-gradient(top, #f0652a 0, #dd5d27 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0652a), to(#dd5d27));
    background-image: linear-gradient(to bottom, #f0652a 0, #dd5d27 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #f6672b;
    color: #ffffff;
}

.btn-orange2:hover {
    background: #c35222 !important;
    border-color: #c35222;

    background-position: 0 -15px;
    color: #ffffff;
    background-image: none;
}

.btn-dark.active, .btn-dark:active {
    background-color: #606c81;
    border-color: #606c81;
    outline: none !important;
    background-image: none;
}

/*.btn-orange2.focus, .btn-orange2:focus {*/
/*border-color: #833817;*/
/*background-color: #833817;*/
/*background-image: none;*/
/*}*/

.bg-white {
    background: #ffffff;
}

/*---- Nice 渐变背景 ----*/
.bg-linear-1 {
    background: #282537;
    background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
}

.bg-linear-2 {
    background: #092756;
    background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -o-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -ms-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
}

.bg-linear-3 {
    background-image: linear-gradient(#8b9da9, #fff6e4);
    box-shadow: inset 0 0 100px hsla(0, 0%, 0%, .3);
}

.bg-linear-4 {
    background: rgb(105, 155, 200);
    background: -moz-radial-gradient(top left, ellipse cover, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
    background: -webkit-gradient(radial, top left, 0px, top left, 100%, color-stop(0%, rgba(105, 155, 200, 1)), color-stop(57%, rgba(181, 197, 216, 1)));
    background: -webkit-radial-gradient(top left, ellipse cover, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
    background: -o-radial-gradient(top left, ellipse cover, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
    background: -ms-radial-gradient(top left, ellipse cover, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
    background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#699bc8', endColorstr='#b5c5d8', GradientType=1);
}

.bg-linear-5 {
    background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
}

.bg-linear-6 {
    background: rgb(244, 226, 156);
    background: -moz-linear-gradient(-45deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), -moz-linear-gradient(left, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), -webkit-linear-gradient(left, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
    background: -o-linear-gradient(-45deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), -o-linear-gradient(left, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), -ms-linear-gradient(left, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
    background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);

}

.bg-linear-7 {
    background: rgba(214, 0, 0, 0.5) !important;
}

.bg-linear-8 {
    background: #ffcc66 !important;
}

.bg-linear-9 {
    background: #f4b162 !important;
}

.bg-linear-10 {
    background: #af91e1 !important;
}

.bg-linear-11 {
    background: #f78db8 !important;
}

.bg-linear-12 {
    background: #a8db43 !important;
}

.bg-linear-13 {
    background: #97d3c5 !important;
}

.bg-linear-14 {
    background: #d1b993 !important;
}

/*</editor-fold>*/

/*<editor-fold desc="<-- Margins | 自定义外边距样式 -->">*/
/* ------------------ Margins | 自定义外边距样式 --------------------*/
.ma {
    margin: 0 auto !important;
}

.m0 {
    margin: 0 !important;
}

.m5 {
    margin: 5px !important;
}

.m10 {
    margin: 10px !important;
}

.m15 {
    margin: 15px !important;
}

.m20 {
    margin: 20px !important;
}

.m25 {
    margin: 25px !important;
}

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

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

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

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

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

.mt25 {
    margin-top: 25px !important;
}

.mt50 {
    margin-top: 50px !important;
}

.mt60 {
    margin-top: 60px !important;
}

.mt70 {
    margin-top: 70px !important;
}

.mt80 {
    margin-top: 80px !important;
}

.mt90 {
    margin-top: 90px !important;
}

.mt100 {
    margin-top: 100px !important;
}

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

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

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

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

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

.mr25 {
    margin-right: 25px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.mr35 {
    margin-right: 35px !important;
}

.mr40 {
    margin-right: 40px !important;
}

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

.mb1 {
    margin-bottom: 1px !important;
}

.mb2 {
    margin-bottom: 2px !important;
}

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

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

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

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

.mb25 {
    margin-bottom: 25px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb35 {
    margin-bottom: 35px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb45 {
    margin-bottom: 45px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.ml0 {
    margin-left: 0 !important;
}

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

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

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

.ml50 {
    margin-left: 50px !important;
}

.ml60 {
    margin-left: 60px !important;
}

.ml70 {
    margin-left: 70px !important;
}

.ml75 {
    margin-left: 75px !important;
}

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

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

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

.ml25 {
    margin-left: 25px !important;
}

/*</editor-fold>*/

/*<editor-fold desc="<-- Sizes | 自定义字体尺寸 -->">*/
/* ------------------ Sizes | 自定义字体尺寸 --------------------*/
.sx {
    font-weight: 500 !important;
}

.slight {
    font-weight: 600 !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.small-caps {
    font-variant: all-small-caps !important;
}

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

.s13 {
    font-size: 13px !important;
}

.s14 {
    font-size: 14px !important;
}

.s15 {
    font-size: 15px !important;
}

.s16 {
    font-size: 16px !important;
}

.s17 {
    font-size: 17px !important;
}

.s18 {
    font-size: 18px !important;
}

.s19 {
    font-size: 19px !important;
}

.s20 {
    font-size: 20px !important;
}

.s24 {
    font-size: 24px !important;
}

.s25 {
    font-size: 25px !important;
}

.s26 {
    font-size: 26px !important;
}

.s27 {
    font-size: 27px !important;
}

.s28 {
    font-size: 28px !important;
}

.s29 {
    font-size: 29px !important;
}

.s30 {
    font-size: 30px !important;
}

.s32 {
    font-size: 32px !important;
}

.s42 {
    font-size: 42px !important;
}

.s48 {
    font-size: 48px !important;
}

.s55 {
    font-size: 55px !important;
}

.s58 {
    font-size: 58px !important;
}

.s64 {
    font-size: 64px !important;
}

.vat {
    vertical-align: top !important;
}

.vam {
    vertical-align: middle !important;
}

.vab {
    vertical-align: bottom !important;
}

/*</editor-fold>*/

/*<editor-fold desc="<-- Paddings | 自定义内边距样式 -->">*/
/* ------------------ Paddings | 自定义内边距样式 --------------------*/
.p0 {
    padding: 0 !important;
}

.p5 {
    padding: 5px !important;
}

.p10 {
    padding: 10px !important;
}

.p15 {
    padding: 15px !important;
}

.p20 {
    padding: 20px !important;
}

.p25 {
    padding: 25px !important;
}

.p30 {
    padding: 30px !important;
}

.p35 {
    padding: 35px !important;
}

.p40 {
    padding: 40px !important;
}

.p45 {
    padding: 45px !important;
}

.p50 {
    padding: 50px !important;
}

.p55 {
    padding: 55px !important;
}

.p60 {
    padding: 60px !important;
}

.p70 {
    padding: 70px !important;
}

.pt0 {
    padding-top: 0 !important;
}

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

.pt7 {
    padding-top: 7px !important;
}

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

.pt15 {
    padding-top: 15px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt25 {
    padding-top: 25px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt35 {
    padding-top: 35px !important;
}

.pt50 {
    padding-top: 50px !important;
}

.pt60 {
    padding-top: 60px !important;
}

.pt70 {
    padding-top: 70px !important;
}

.pr0 {
    padding-right: 0 !important;
}

.pr5 {
    padding-right: 5px !important;
}

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

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

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

.pr25 {
    padding-right: 25px !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

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

.pb10 {
    padding-bottom: 10px !important;
}

.pb15 {
    padding-bottom: 15px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb25 {
    padding-bottom: 25px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb35 {
    padding-bottom: 35px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb45 {
    padding-bottom: 45px !important;
}

.pb50 {
    padding-bottom: 50px !important;
}

.pb55 {
    padding-bottom: 55px !important;
}

.pb60 {
    padding-bottom: 60px !important;
}

.pb65 {
    padding-bottom: 65px !important;
}

.pb70 {
    padding-bottom: 70px !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pl5 {
    padding-left: 5px !important;
}

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

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

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

.pl25 {
    padding-left: 25px !important;
}

/*</editor-fold>*/

/*<editor-fold desc="<-- Percent widths | 自定义元素宽度 -->">*/
/* ------------------ Percent widths | 自定义元素宽度 --------------------*/
.per5 {
    width: 5% !important;
}

.per10 {
    width: 10% !important;
}

.per15 {
    width: 15% !important;
}

.per20 {
    width: 20% !important;
}

.per25 {
    width: 25% !important;
}

.per30 {
    width: 30% !important;
}

.per35 {
    width: 35% !important;
}

.per40 {
    width: 40% !important;
}

.per45 {
    width: 45% !important;
}

.per50 {
    width: 50% !important;
}

.per55 {
    width: 55% !important;
}

.per60 {
    width: 60% !important;
}

.per65 {
    width: 65% !important;
}

.per70 {
    width: 70% !important;
}

.per75 {
    width: 75% !important;
}

.per80 {
    width: 80% !important;
}

.per85 {
    width: 85% !important;
}

.per90 {
    width: 90% !important;
}

.per95 {
    width: 95% !important;
}

.per100 {
    width: 100% !important;
}

/*</editor-fold>*/

/*<editor-fold desc="<-- Borders | 自定义元素边框样式 -->">*/
/* ------------------ Borders | 自定义元素边框样式 --------------------*/
.b {
    border: 1px solid #e7e7e2;
}

.b-dark {
    border: 1px solid rgba(109, 131, 151, 0.71);
    box-shadow: 0px 1px 5px rgba(136, 163, 188, 0.3);
}

.bt {
    border-top: 1px solid #e7e7e2;
}

.br {
    border-right: 1px solid #e7e7e2;
}

.bb {
    border-bottom: 1px solid #e7e7e2;
}

.bl {
    border-left: 1px solid #e7e7e2;
}

.btlr {
    border-top-left-radius: 4px;
}

.btrr {
    border-top-right-radius: 4px;
}

.bblr {
    border-bottom-left-radius: 4px;
}

.bbrr {
    border-bottom-right-radius: 4px;
}

.brall {
    border-radius: 4px;
}

.brn {
    border-radius: 0px !important;
}

.bn {
    border: none !important;
}

.bsn {
    box-shadow: none !important;
}

/*</editor-fold>*/

/*<editor-fold desc="<-- Contextual colors | 自定义 a 标签元素颜色风格 -->">*/
/* ------------------ Contextual colors | 自定义 a 标签元素颜色风格 --------------------*/

.text-muted {
    color: #999999 !important;
}

.text-primary {
    color: #75b9e6;
}

a.text-primary:hover {
    color: #4aa3de;
}

.text-success {
    color: #71d398;
}

a.text-success:hover {
    color: #4ac77c;
}

.text-info {
    color: #97d3c5;
}

a.text-info:hover {
    color: #73c4b1;
}

.text-warning {
    color: #f4b162;
}

a.text-warning:hover {
    color: #f19932;
}

.text-danger {
    color: #E74C3C;
}

a.text-danger:hover {
    color: #f35454;
}

.text-yellow {
    color: #ffcc66;
}

a.text-yellow:hover {
    color: #ffbb33;
}

.text-orange {
    color: #f4b162;
}

a.text-orange:hover {
    color: #f19932;
}

.text-dark {
    color: #79859b;
}

a.text-dark:hover {
    color: #606c81;
}

.text-brown {
    color: #d1b993;
}

a.text-brown:hover {
    color: #c2a26f;
}

.text-pink {
    color: #f78db8;
}

a.text-pink:hover {
    color: #f45d9a;
}

.text-magenta {
    color: #e65097;
}

a.text-magenta:hover {
    color: #e0237c;
}

.text-lime {
    color: #a8db43;
}

a.text-lime:hover {
    color: #90c526;
}

/*</editor-fold>*/

/*<editor-fold desc="<-- Positions | 自定义元素布局定位系列 -->">*/
/* ------------------ Positions | 自定义元素布局定位系列 --------------------*/
.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed;
}

.fixed-top {
    position: fixed;
    top: 0;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
}

.flex {
    display: flex !important;
}

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

.flex-space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-column {
    display: flex !important;
    flex-flow: column;
}

.inline-flex {
    display: inline-flex !important;
}

.flex.nowrap, .inline-flex.nowrap {
    flex-wrap: nowrap !important;
}

.flex.left, .inline-flex.left {
    justify-content: left !important;
}

.flex.right, .inline-flex.right {
    justify-content: right !important;
}

.flex.center, .inline-flex.center {
    justify-content: center !important;
    align-items: center !important;
}

.flex1 {
    flex: 1;
}

.flex10 {
    flex: 0 0 10%;
}

.flex15 {
    flex: 0 0 15%;
}

.flex20 {
    flex: 0 0 20%;

}

.flex30 {
    flex: 0 0 30%;

}

.flex40 {
    flex: 0 0 40%;

}

.flex50 {
    flex: 0 0 50%;

}

.flex60 {
    flex: 0 0 60%;

}

.flex70 {
    flex: 0 0 70%;

}

.flex80 {
    flex: 0 0 80%;

}

.flex90 {
    flex: 0 0 90%;

}

.flxAll {
    flex: 0 0 100%;

}

/*</editor-fold>*/

/* 自定义按钮 */

.demo_con {
    width: 960px;
    margin: 40px auto 0;
}

.button {
    width: 140px;
    line-height: 38px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 1px #333;
    border-radius: 5px;
    margin: 0 20px 20px 0;
    position: relative;
    overflow: hidden;
}

.button:nth-child(6n) {
    margin-right: 0;
}

.btn.gray {
    color: #8c96a0;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #dce1e6;
    box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
    background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
    background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
    background: linear-gradient(top, #f2f3f7, #e4e8ec);
}

.btn.black {
    color: #f9f9f9;
    border: 1px solid #333;
    box-shadow: 0 1px 2px #8b8b8b inset, 0 -1px 0 #3d3d3d inset, 0 -2px 3px #8b8b8b inset;
    background: -webkit-linear-gradient(top, #656565, #4c4c4c);
    background: -moz-linear-gradient(top, #656565, #4a4a4a);
    background: linear-gradient(top, #656565, #4a4a4a);
}

.btn.red {
    border: 1px solid #b42323;
    box-shadow: 0 1px 2px #e99494 inset, 0 -1px 0 #954b4b inset, 0 -2px 3px #e99494 inset;
    background: -webkit-linear-gradient(top, #d53939, #b92929);
    background: -moz-linear-gradient(top, #d53939, #b92929);
    background: linear-gradient(top, #d53939, #b92929);
}

.btn.yellow {
    border: 1px solid #d2a000;
    box-shadow: 0 1px 2px #fedd71 inset, 0 -1px 0 #a38b39 inset, 0 -2px 3px #fedd71 inset;
    background: -webkit-linear-gradient(top, #fece34, #d8a605);
    background: -moz-linear-gradient(top, #fece34, #d8a605);
    background: linear-gradient(top, #fece34, #d8a605);
}

.btn.green {
    border: 1px solid #64c878;
    box-shadow: 0 1px 2px #b9ecc4 inset, 0 -1px 0 #6c9f76 inset, 0 -2px 3px #b9ecc4 inset;
    background: -webkit-linear-gradient(top, #90dfa2, #84d494);
    background: -moz-linear-gradient(top, #90dfa2, #84d494);
    background: linear-gradient(top, #90dfa2, #84d494);
}

.btn.blue {
    border: 1px solid #1e7db9;
    box-shadow: 0 1px 2px #8fcaee inset, 0 -1px 0 #497897 inset, 0 -2px 3px #8fcaee inset;
    background: -webkit-linear-gradient(top, #42a4e0, #2e88c0);
    background: -moz-linear-gradient(top, #42a4e0, #2e88c0);
    background: linear-gradient(top, #42a4e0, #2e88c0);
}

.round,
.side,
.tags {
    padding-right: 30px;

    display: flex;

}

.round:after {
    position: absolute;
    display: inline-block;
    content: "\003c";
    top: 50%;
    right: 10px;
    margin-top: -10px;
    width: 17px;
    height: 20px;
    padding-left: 3px;
    line-height: 18px;
    font-size: 10px;
    font-weight: normal;
    border-radius: 10px;
    text-shadow: -2px 0 1px #333;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.gray.round:after {
    box-shadow: 1px 0 1px rgba(255, 255, 255, 1) inset, 1px 0 1px rgba(0, 0, 0, .2);
    background: -webkit-linear-gradient(top, #dce1e6, #dde2e7);
    background: -moz-linear-gradient(top, #dce1e6, #dde2e7);
    background: linear-gradient(top, #dce1e6, #dde2e7);
    text-shadow: -2px 0 1px #fff;
}

.black.round:after {
    box-shadow: 1px 0 1px rgba(255, 255, 255, .5) inset, 1px 0 1px rgba(0, 0, 0, .9);
    background: -webkit-linear-gradient(top, #333, #454545);
    background: -moz-linear-gradient(top, #333, #454545);
    background: linear-gradient(top, #333, #454545);
}

.red.round:after {
    box-shadow: 1px 0 1px rgba(255, 255, 255, .6) inset, 1px 0 1px rgba(130, 25, 25, .9);
    background: -webkit-linear-gradient(top, #b12222, #b42323);
    background: -moz-linear-gradient(top, #b12222, #b42323);
    background: linear-gradient(top, #b12222, #b42323);
}

.yellow.round:after {
    box-shadow: 1px 0 1px rgba(255, 255, 255, .8) inset, 1px 0 1px rgba(148, 131, 4, .9);
    background: -webkit-linear-gradient(top, #cf9d00, #d2a000);
    background: -moz-linear-gradient(top, #cf9d00, #d2a000);
    background: linear-gradient(top, #cf9d00, #d2a000);
}

.green.round:after {
    box-shadow: 1px 0 1px rgba(255, 255, 255, .8) inset, 1px 0 1px rgba(51, 126, 66, .9);
    background: -webkit-linear-gradient(top, #64c878, #6dcb80);
    background: -moz-linear-gradient(top, #64c878, #6dcb80);
    background: linear-gradient(top, #64c878, #6dcb80);
}

.blue.round:after {
    box-shadow: 1px 0 1px rgba(255, 255, 255, .8) inset, 1px 0 1px rgba(18, 85, 128, .9);
    background: -webkit-linear-gradient(top, #1e7db9, #2b85bd);
    background: -moz-linear-gradient(top, #1e7db9, #2b85bd);
    background: linear-gradient(top, #1e7db9, #2b85bd);
}

.side:after {
    position: absolute;
    display: inline-block;
    content: "\00bb";
    top: 3px;
    right: -4px;
    width: 38px;
    height: 30px;
    font-weight: normal;
    line-height: 26px;
    border-radius: 0 0 5px 5px;
    text-shadow: -2px 0 1px #333;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.gray.side:after {
    text-shadow: -2px 0 1px #fff;
    border-top: 1px solid #d4d4d4;
    box-shadow: -2px 0 1px #eceef1 inset;
    background: -webkit-linear-gradient(right, #e1e6ea, #f2f2f6 60%);
    background: -moz-linear-gradient(right, #e1e6ea, #f2f2f6 60%);
    background: linear-gradient(right, #e1e6ea, #f2f2f6 60%);
}

.black.side:after {
    border-top: 1px solid #222;
    box-shadow: -2px 0 1px #606060 inset;
    background: -webkit-linear-gradient(right, #373737, #555 60%);
    background: -moz-linear-gradient(right, #373737, #555 60%);
    background: linear-gradient(right, #373737, #555 60%);
}

.red.side:after {
    border-top: 1px solid #aa1e1e;
    box-shadow: -2px 0 1px #c75959 inset;
    background: -webkit-linear-gradient(right, #b82929, #d73f3f 60%);
    background: -moz-linear-gradient(top, #b82929, #d73f3f 60%);
    background: linear-gradient(top, #b82929, #d73f3f 60%);
}

.yellow.side:after {
    border-top: 1px solid #ba8f06;
    box-shadow: -2px 0 1px #deb842 inset;
    background: -webkit-linear-gradient(right, #d5a406, #fdc40b 60%);
    background: -moz-linear-gradient(right, #d5a406, #fdc40b 60%);
    background: linear-gradient(right, #d5a406, #fdc40b 60%);
}

.green.side:after {
    border-top: 1px solid #53b567;
    box-shadow: -2px 0 1px #8ad599 inset;
    background: -webkit-linear-gradient(right, #69ca7c, #91e5a5 60%);
    background: -moz-linear-gradient(right, #69ca7c, #91e5a5 60%);
    background: linear-gradient(right, #69ca7c, #91e5a5 60%);
}

.blue.side:after {
    border-top: 1px solid #1971a8;
    box-shadow: -2px 0 1px #559dca inset;
    background: -webkit-linear-gradient(right, #2482bd, #3fa2e0 60%);
    background: -moz-linear-gradient(right, #2482bd, #3fa2e0 60%);
    background: linear-gradient(right, #2482bd, #3fa2e0 60%);
}

.tags:after {
    font-weight: normal;
    position: absolute;
    display: inline-block;
    content: "FREE";
    top: -3px;
    right: -33px;
    color: #fff;
    text-shadow: none;
    width: 85px;
    height: 25px;
    line-height: 28px;
    -webkit-transform: rotate(45deg) scale(.7, .7);
    -moz-transform: rotate(45deg) scale(.7, .7);
    transform: rotate(45deg) scale(.7, .7);
}

.gray.tags:after {
    background: #8c96a0;
    border: 2px solid #fff;
}

.black.tags:after {
    background: #333;
    border: 2px solid #777;
}

.red.tags:after {
    background: #b42323;
    border: 2px solid #df4141;
}

.yellow.tags:after {
    background: #d2a000;
    border: 2px solid #fcc100;
}

.green.tags:after {
    background: #64c878;
    border: 2px solid #9bebac;
}

.blue.tags:after {
    background: #1e7db9;
    border: 2px solid #54b1e9;
}

.btn.rarrow,
.btn.larrow {
    overflow: visible;
}

.rarrow:after,
.rarrow:before,
.larrow:after,
.larrow:before {
    position: absolute;
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.rarrow:before {
    width: 27px;
    height: 27px;
    top: 6px;
    right: -13px;
    clip: rect(auto auto 26px 2px);
}

.rarrow:after {
    top: 6px;
    right: -12px;
    clip: rect(auto auto 26px 2px);
}

.gray.rarrow:before {
    background: #d6dbe0;
}

.gray.rarrow:after {
    box-shadow: 0 1px 0 #fff inset, -1px 0 0 #b7babd inset;
    background: -webkit-linear-gradient(top left, #f2f3f7, #e4e8ec);
    background: -moz-linear-gradient(top left, #f2f3f7, #e4e8ec);
    background: linear-gradient(top left, #f2f3f7, #e4e8ec);
}

.black.rarrow:before {
    background: #333;
}

.black.rarrow:after {
    box-shadow: 0 1px 0 #8B8B8B inset, -1px 0 0 #3d3d3d inset, -2px 0 0 #8B8B8B inset;
    background: -webkit-linear-gradient(top left, #656565, #4C4C4C);
    background: -moz-linear-gradient(top left, #656565, #4C4C4C);
    background: linear-gradient(top left, #656565, #4C4C4C);
}

.red.rarrow:before {
    background: #B42323;
}

.red.rarrow:after {
    box-shadow: 0 1px 0 #E99494 inset, -1px 0 0 #954B4B inset, -2px 0 0 #E99494 inset;
    background: -webkit-linear-gradient(top left, #D53939, #B92929);
    background: -moz-linear-gradient(top left, #D53939, #B92929);
    background: linear-gradient(top left, #D53939, #B92929);
}

.yellow.rarrow:before {
    background: #D2A000;
}

.yellow.rarrow:after {
    box-shadow: 0 1px 0 #FEDD71 inset, -1px 0 0 #A38B39 inset, -2px 0 0 #FEDD71 inset;
    background: -webkit-linear-gradient(top left, #FECE34, #D8A605);
    background: -moz-linear-gradient(top left, #FECE34, #D8A605);
    background: linear-gradient(top left, #FECE34, #D8A605);
}

.green.rarrow:before {
    background: #64C878;
}

.green.rarrow:after {
    box-shadow: 0 1px 0 #B9ECC4 inset, -1px 0 0 #6C9F76 inset, -2px 0 0 #B9ECC4 inset;
    background: -webkit-linear-gradient(top left, #90DFA2, #84D494);
    background: -moz-linear-gradient(top left, #90DFA2, #84D494);
    background: linear-gradient(top left, #90DFA2, #84D494);
}

.blue.rarrow:before {
    background: #1E7DB9;
}

.blue.rarrow:after {
    box-shadow: 0 1px 0 #8FCAEE inset, -1px 0 0 #497897 inset, -2px 0 0 #8FCAEE inset;
    background: -webkit-linear-gradient(top left, #42A4E0, #2E88C0);
    background: -moz-linear-gradient(top left, #42A4E0, #2E88C0);
    background: linear-gradient(top left, #42A4E0, #2E88C0);
}

.larrow:before {
    top: 6px;
    left: -13px;
    width: 27px;
    height: 27px;
    clip: rect(2px 26px auto auto);
}

.larrow:after {
    top: 6px;
    left: -12px;
    clip: rect(2px 26px auto auto);
}

.gray.larrow:before {
    background: #d6dbe0;
}

.gray.larrow:after {
    box-shadow: 0 -1px 0 #b7babd inset, 1px 0 0 #fff inset;
    background: -webkit-linear-gradient(top left, #f2f3f7, #e4e8ec);
    background: -moz-linear-gradient(top left, #f2f3f7, #e4e8ec);
    background: linear-gradient(top left, #f2f3f7, #e4e8ec);
}

.black.larrow:before {
    background: #333;
}

.black.larrow:after {
    box-shadow: 0 -1px 0 #3d3d3d inset, 0 -2px 0 #8B8B8B inset, 1px 0 0 #8B8B8B inset;
    background: -webkit-linear-gradient(top left, #656565, #4C4C4C);
    background: -moz-linear-gradient(top left, #656565, #4C4C4C);
    background: linear-gradient(top left, #656565, #4C4C4C);
}

.red.larrow:before {
    background: #B42323;
}

.red.larrow:after {
    box-shadow: 0 -1px 0 #954B4B inset, 0 -2px 0 #E99494 inset, 1px 0 0 #E99494 inset;
    background: -webkit-linear-gradient(top left, #D53939, #B92929);
    background: -moz-linear-gradient(top left, #D53939, #B92929);
    background: linear-gradient(top left, #D53939, #B92929);
}

.yellow.larrow:before {
    background: #D2A000;
}

.yellow.larrow:after {
    box-shadow: 0 -1px 0 #A38B39 inset, 0 -2px 0 #FEDD71 inset, 1px 0 0 #FEDD71 inset;
    background: -webkit-linear-gradient(top left, #FECE34, #D8A605);
    background: -moz-linear-gradient(top left, #FECE34, #D8A605);
    background: linear-gradient(top left, #FECE34, #D8A605);
}

.green.larrow:before {
    background: #64C878;
}

.green.larrow:after {
    box-shadow: 0 -1px 0 #6C9F76 inset, 0 -2px 0 #B9ECC4 inset, 1px 0 0 #B9ECC4 inset;
    background: -webkit-linear-gradient(top left, #90DFA2, #84D494);
    background: -moz-linear-gradient(top left, #90DFA2, #84D494);
    background: linear-gradient(top left, #90DFA2, #84D494);
}

.blue.larrow:before {
    background: #1E7DB9;
}

.blue.larrow:after {
    box-shadow: 0 -1px 0 #497897 inset, 0 -2px 0 #8FCAEE inset, 1px 0 0 #8FCAEE inset;
    background: -webkit-linear-gradient(top left, #42A4E0, #2E88C0);
    background: -moz-linear-gradient(top left, #42A4E0, #2E88C0);
    background: linear-gradient(top left, #42A4E0, #2E88C0);
}

.gray:hover {
    background: -webkit-linear-gradient(top, #fefefe, #ebeced);
    background: -moz-linear-gradient(top, #f2f3f7, #ebeced);
    background: linear-gradient(top, #f2f3f7, #ebeced);
}

.black:hover {
    background: -webkit-linear-gradient(top, #818181, #575757);
    background: -moz-linear-gradient(top, #818181, #575757);
    background: linear-gradient(top, #818181, #575757);
}

.red:hover {
    background: -webkit-linear-gradient(top, #eb6f6f, #c83c3c);
    background: -moz-linear-gradient(top, #eb6f6f, #c83c3c);
    background: linear-gradient(top, #eb6f6f, #c83c3c);
}

.yellow:hover {
    background: -webkit-linear-gradient(top, #ffd859, #e3bb38);
    background: -moz-linear-gradient(top, #ffd859, #e3bb38);
    background: linear-gradient(top, #ffd859, #e3bb38);
}

.green:hover {
    background: -webkit-linear-gradient(top, #aaebb9, #82d392);
    background: -moz-linear-gradient(top, #aaebb9, #82d392);
    background: linear-gradient(top, #aaebb9, #82d392);
}

.blue:hover {
    background: -webkit-linear-gradient(top, #70bfef, #4097ce);
    background: -moz-linear-gradient(top, #70bfef, #4097ce);
    background: linear-gradient(top, #70bfef, #4097ce);
}

.gray:active {
    top: 1px;
    box-shadow: 0 1px 3px #a8abae inset, 0 3px 0 #fff;
    background: -webkit-linear-gradient(top, #e4e8ec, #e4e8ec);
    background: -moz-linear-gradient(top, #e4e8ec, #e4e8ec);
    background: linear-gradient(top, #e4e8ec, #e4e8ec);
}

.black:active {
    top: 1px;
    box-shadow: 0 1px 3px #111 inset, 0 3px 0 #fff;
    background: -webkit-linear-gradient(top, #424242, #575757);
    background: -moz-linear-gradient(top, #424242, #575757);
    background: linear-gradient(top, #424242, #575757);
}

.red:active {
    top: 1px;
    box-shadow: 0 1px 3px #5b0505 inset, 0 3px 0 #fff;
    background: -webkit-linear-gradient(top, #b11a1a, #bf2626);
    background: -moz-linear-gradient(top, #b11a1a, #bf2626);
    background: linear-gradient(top, #b11a1a, #bf2626);
}

.yellow:active {
    top: 1px;
    box-shadow: 0 1px 3px #816b1f inset, 0 3px 0 #fff;
    background: -webkit-linear-gradient(top, #d3a203, #dba907);
    background: -moz-linear-gradient(top, #d3a203, #dba907);
    background: linear-gradient(top, #d3a203, #dba907);
}

.green:active {
    top: 1px;
    box-shadow: 0 1px 3px #4d7254 inset, 0 3px 0 #fff;
    background: -webkit-linear-gradient(top, #5eac6e, #72b37e);
    background: -moz-linear-gradient(top, #5eac6e, #72b37e);
    background: linear-gradient(top, #5eac6e, #72b37e);
}

.blue:active {
    top: 1px;
    box-shadow: 0 1px 3px #114566 inset, 0 3px 0 #fff;
    background: -webkit-linear-gradient(top, #1a71a8, #1976b1);
    background: -moz-linear-gradient(top, #1a71a8, #1976b1);
    background: linear-gradient(top, #1a71a8, #1976b1);
}

.gray.side:hover:after {
    background: -webkit-linear-gradient(right, #e7ebee, #f8f8f8 60%);
    background: -moz-linear-gradient(right, #e7ebee, #f8f8f8 60%);
    background: linear-gradient(right, #e7ebee, #f8f8f8 60%);
}

.black.side:hover:after {
    background: -webkit-linear-gradient(right, #555, #6f6f6f 60%);
    background: -moz-linear-gradient(right, #555, #6f6f6f 60%);
    background: linear-gradient(right, #555, #6f6f6f 60%);
}

.red.side:hover:after {
    background: -webkit-linear-gradient(right, #c43333, #dc4949 60%);
    background: -moz-linear-gradient(right, #c43333, #dc4949 60%);
    background: linear-gradient(right, #c43333, #dc4949 60%);
}

.yellow.side:hover:after {
    background: -webkit-linear-gradient(right, #e1b21a, #fbc71d 60%);
    background: -moz-linear-gradient(right, #e1b21a, #fbc71d 60%);
    background: linear-gradient(right, #e1b21a, #fbc71d 60%);
}

.green.side:hover:after {
    background: -webkit-linear-gradient(right, #85da95, #94e0a5 60%);
    background: -moz-linear-gradient(right, #85da95, #94e0a5 60%);
    background: linear-gradient(right, #85da95, #94e0a5 60%);
}

.blue.side:hover:after {
    background: -webkit-linear-gradient(right, #338fc8, #56b2eb 60%);
    background: -moz-linear-gradient(right, #338fc8, #56b2eb 60%);
    background: linear-gradient(right, #338fc8, #56b2eb 60%);
}

.gray.side:active:after {
    top: 4px;
    border-top: 1px solid #9fa6ab;
    box-shadow: -1px 0 1px #a8abae inset;
    background: -webkit-linear-gradient(right, #e4e8ec, #e4e8ec 60%);
    background: -moz-linear-gradient(right, #e4e8ec, #e4e8ec 60%);
    background: linear-gradient(right, #e4e8ec, #e4e8ec 60%);
}

.black.side:active:after {
    box-shadow: -1px 0 1px #111 inset;
    background: -webkit-linear-gradient(right, #414040, #4d4c4c 60%);
    background: -moz-linear-gradient(right, #414040, #4d4c4c 60%);
    background: linear-gradient(right, #414040, #4d4c4c 60%);
}

.red.side:active:after {
    box-shadow: -1px 0 1px #4b0707 inset;
    background: -webkit-linear-gradient(right, #b11a1a, #b11a1a 60%);
    background: -moz-linear-gradient(right, #b11a1a, #b11a1a 60%);
    background: linear-gradient(right, #b11a1a, #b11a1a 60%);
}

.yellow.side:active:after {
    box-shadow: -1px 0 1px #816b1f inset;
    background: -webkit-linear-gradient(right, #d3a203, #dba907 60%);
    background: -moz-linear-gradient(right, #d3a203, #dba907 60%);
    background: linear-gradient(right, #d3a203, #dba907 60%);
}

.green.side:active:after {
    box-shadow: -1px 0 1px #33663d inset;
    background: -webkit-linear-gradient(right, #63a870, #72b37e 60%);
    background: -moz-linear-gradient(right, #63a870, #72b37e 60%);
    background: linear-gradient(right, #63a870, #72b37e 60%);
}

.blue.side:active:after {
    box-shadow: -1px 0 1px #114566 inset;
    background: -webkit-linear-gradient(right, #1a71a8, #1976b1 60%);
    background: -moz-linear-gradient(right, #1a71a8, #1976b1 60%);
    background: linear-gradient(right, #1a71a8, #1976b1 60%);
}

.gray.rarrow:hover:after,
.gray.rarrow:hover:after {
    background: -webkit-linear-gradient(top left, #fefefe, #ebeced);
    background: -moz-linear-gradient(top left, #fefefe, #ebeced);
    background: linear-gradient(top left, #fefefe, #ebeced);
}

.black.rarrow:hover:after,
.black.larrow:hover:after {
    background: -webkit-linear-gradient(top left, #818181, #575757);
    background: -moz-linear-gradient(top left, #818181, #575757);
    background: linear-gradient(top left, #818181, #575757);
}

.red.rarrow:hover:after,
.red.larrow:hover:after {
    background: -webkit-linear-gradient(top left, #eb6f6f, #c83c3c);
    background: -moz-linear-gradient(top left, #eb6f6f, #c83c3c);
    background: linear-gradient(top left, #eb6f6f, #c83c3c);
}

.yellow.rarrow:hover:after,
.yellow.larrow:hover:after {
    background: -webkit-linear-gradient(top left, #ffd859, #e3bb38);
    background: -moz-linear-gradient(top left, #ffd859, #e3bb38);
    background: linear-gradient(top left, #ffd859, #e3bb38);
}

.green.rarrow:hover:after,
.green.larrow:hover:after {
    background: -webkit-linear-gradient(top left, #aaebb9, #82d392);
    background: -moz-linear-gradient(top left, #aaebb9, #82d392);
    background: linear-gradient(top left, #aaebb9, #82d392);
}

.blue.rarrow:hover:after,
.blue.larrow:hover:after {
    background: -webkit-linear-gradient(top left, #70bfef, #4097ce);
    background: -moz-linear-gradient(top left, #70bfef, #4097ce);
    background: linear-gradient(top left, #70bfef, #4097ce);
}

.gray.rarrow:active:after,
.gray.larrow:active:after {
    background: -webkit-linear-gradient(top left, #e4e8ec, #e4e8ec);
    background: -moz-linear-gradient(top left, #e4e8ec, #e4e8ec);
    background: linear-gradient(top left, #e4e8ec, #e4e8ec);
}

.black.rarrow:active:after,
.black.larrow:active:after {
    background: -webkit-linear-gradient(top left, #424242, #575757);
    background: -moz-linear-gradient(top left, #424242, #575757);
    background: linear-gradient(top left, #424242, #575757);
}

.red.rarrow:active:after,
.red.larrow:active:after {
    background: -webkit-linear-gradient(top left, #b11a1a, #bf2626);
    background: -moz-linear-gradient(top left, #b11a1a, #bf2626);
    background: linear-gradient(top left, #b11a1a, #bf2626);
}

.yellow.rarrow:active:after,
.yellow.larrow:active:after {
    background: -webkit-linear-gradient(top left, #d3a203, #dba907);
    background: -moz-linear-gradient(top left, #d3a203, #dba907);
    background: linear-gradient(top left, #d3a203, #dba907);
}

.green.rarrow:active:after,
.green.larrow:active:after {
    background: -webkit-linear-gradient(top left, #63a870, #72b37e);
    background: -moz-linear-gradient(top left, #63a870, #72b37e);
    background: linear-gradient(top left, #63a870, #72b37e);
}

.blue.rarrow:active:after,
.blue.larrow:active:after {
    background: -webkit-linear-gradient(top left, #1a71a8, #1976b1);
    background: -moz-linear-gradient(top left, #1a71a8, #1976b1);
    background: linear-gradient(top left, #1a71a8, #1976b1);
}

.gray.rarrow:active:after {
    box-shadow: 0 1px 0 #b7babd inset, -1px 0 0 #b7babd inset;
}

.gray.larrow:active:after {
    box-shadow: 0 -1px 0 #b7babd inset, 1px 0 0 #b7babd inset;
}

.black.rarrow:active:after {
    box-shadow: 0 1px 0 #333 inset, -1px 0 0 #333 inset;
}

.black.larrow:active:after {
    box-shadow: 0 -1px 0 #333 inset, 1px 0 0 #333 inset;
}

.red.rarrow:active:after {
    box-shadow: 0 1px 0 #640909 inset, -1px 0 0 #640909 inset;
}

.red.larrow:active:after {
    box-shadow: 0 -1px 0 #640909 inset, 1px 0 0 #640909 inset;
}

.yellow.rarrow:active:after {
    box-shadow: 0 1px 0 #816b1f inset, -1px 0 0 #816b1f inset;
}

.yellow.larrow:active:after {
    box-shadow: 0 -1px 0 #816b1f inset, 1px 0 0 #816b1f inset;
}

.green.rarrow:active:after {
    box-shadow: 0 1px 0 #4d7254 inset, -1px 0 0 #4d7254 inset;
}

.green.larrow:active:after {
    box-shadow: 0 -1px 0 #4d7254 inset, 1px 0 0 #4d7254 inset;
}

.blue.rarrow:active:after {
    box-shadow: 0 1px 0 #114566 inset, -1px 0 0 #114566 inset;
}

.blue.larrow:active:after {
    box-shadow: 0 -1px 0 #114566 inset, 1px 0 0 #114566 inset;
}

#consoleLog {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 400px;
    height: 720px;
    border-radius: 4px;
    border: 1px solid rgba(221, 221, 221, 0.5);
    background-color: rgba(4, 21, 5, 0.95);
    /*box-shadow:0 5px 15px 0 #111111;*/
    z-index: 999999;
    overflow-y: auto;
    padding: 5px;
}

.console {
    color: #FFFFFF;
    padding: 2px 5px;
    margin-bottom: 5px;
}

.console-warning {
    border: 1px solid rgba(236, 151, 31, 0.8);
    background-color: rgba(236, 151, 31, 0.25);
}

.console-default {
}

.console-success {
    border: 1px solid rgba(57, 132, 57, 0.8);
    background-color: rgba(57, 132, 57, 0.25);

}

.console-danger {
    border: 1px solid rgba(255, 0, 0, 0.8);
    background-color: rgba(255, 0, 0, 0.25);

}

/* ============================== 自定义 checkbox & radio 美化样式 ==============================*/
.btn-group-sm > .btn, .btn-sm {
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.2 !important;
    border-radius: 3px;
}
.zxtg-text{
  color: white !important;
}

.checkbox-inline[data-toggle='checkbox'] {
    margin-right: 5px !important;
    margin-left: 20px;
}

/*label[data-toggle='checkbox'] {*/
/*margin-left: 15px !important;*/
/*}*/

[data-toggle='checkbox'] {
    padding: 0;
    margin: 0;
}

[data-toggle='radio'] > input[type='radio'],
[data-toggle='checkbox'] > input[type='checkbox'] {
    position: absolute;
    opacity: 0;
}

[data-toggle='radio'] > span,
[data-toggle='checkbox'] > span {
    display: inline-block;
    position: relative;
    font-size: 15px;
    font-family: "微软雅黑", sans-serif;
    padding: 0 5px;
    vertical-align: middle;
}

[data-toggle='radio'] > span.nothing,
[data-toggle='checkbox'] > span.nothing {
    display: inline-block;
    position: relative;
    font-size: 15px;
    font-family: "微软雅黑", sans-serif;
    padding: 0;
    height: 23px;
    vertical-align: middle;
}

/* 复选框样式 */
[data-toggle='checkbox'] > span:before {
    width: 18px;
    height: 18px;
    display: inline-block;
    top: 2px;
    left: -19px;
    margin-right: 3px;
    position: absolute;
    content: "";
    vertical-align: middle;
    border-radius: 0;
    border: 1px solid #969696;
    background-color: #FFF;
    cursor: pointer;
    transition: border-color 200ms, background-color 200ms;
}

/* 复选框中的勾 */
[data-toggle='checkbox'] > span:after {
    content: '';
    position: absolute;
    width: 5px;
    height: 10px;
    color: #FFF;
    border-bottom: 2px solid;
    border-right: 2px solid;
    left: -9px;
    top: 50%;
    margin-top: -3px;
    display: inline-block;
    transform-origin: center;
    cursor: pointer;
    transform: translate(-50%, -30%) rotate(45deg);
    -webkit-transform: translate(-50%, -30%) rotate(45deg);
    opacity: 0;
    transition: opacity 200ms;
}

/* 单选框样式 */
[data-toggle='radio'] > span:before {
    width: 18px;
    height: 18px;
    display: inline-block;
    top: 2px;
    left: -20px;
    margin-right: 3px;
    position: absolute;
    content: "";
    vertical-align: middle;
    border-radius: 50%;
    border: 1px solid #878787;
    cursor: pointer;
    background-color: #FFF;
    transition: border-color 300ms;
}

/* 单选框选中时的样式 */
[data-toggle='radio'] > span:after {
    width: 18px;
    height: 18px;
    display: inline-block;
    top: 2px;
    left: -20px;
    margin-right: 3px;
    position: absolute;
    content: "";
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 200ms, background-color 200ms;
    transform-origin: center;
    transform: scale(0);
}

/* 单选框选中时 */
[data-toggle='radio'] > input[type='radio']:checked + span:before {
    border-color: #175995;
}

[data-toggle='radio'] > input[type='radio']:checked + span:after {
    background-color: #175995;
    transform: scale(0.55);
}

/* 复选框风格样式定义 */
[data-toggle='checkbox'][data-style='default'] > input[type='checkbox']:checked + span:before {
    background-color: #FFFFFF;
    border-color: #000000;
}

[data-toggle='checkbox'][data-style='default'] > input[type='checkbox']:checked + span:after {
    color: #000;
}

[data-toggle='radio'][data-style='default'] > input[type='radio']:hover + span:before,
[data-toggle='radio'][data-style='default'] > input[type='radio']:focus + span:before,
[data-toggle='checkbox'][data-style='default'] > input[type='checkbox']:hover + span:before,
[data-toggle='checkbox'][data-style='default'] > input[type='checkbox']:focus + span:before {
    /*border-color: #000000;*/
    background-color: #f5f5f5;
    box-shadow: 0 0 1px 0 #111111;
}


[data-toggle='checkbox'][data-style='blue'] > input[type='checkbox']:hover + span:before,
[data-toggle='checkbox'][data-style='blue'] > input[type='checkbox']:focus + span:before {
    border-color: #175995;
}

[data-toggle='checkbox'][data-style='blue'] > input[type='checkbox']:checked + span:before {
    background-color: #175995;
    border-color: #175995;
}

[data-toggle='checkbox'][data-style='blue'] > input[type='checkbox']:hover + span:before,
[data-toggle='checkbox'][data-style='blue'] > input[type='checkbox']:focus + span:before {
    border-color: #175995;
}

[data-toggle='checkbox'][data-style='green'] > input[type='checkbox']:checked + span:before {
    background-color: #009688;
    border-color: #009688;
}

[data-toggle='checkbox'][data-style='green'] > input[type='checkbox']:hover + span:before,
[data-toggle='checkbox'][data-style='green'] > input[type='checkbox']:focus + span:before {
    border-color: #009688;
}

[data-toggle='checkbox'][data-style='red'] > input[type='checkbox']:checked + span:before {
    background-color: #ff0000;
    border-color: #ff0000;
}

[data-toggle='checkbox'][data-style='red'] > input[type='checkbox']:hover + span:before,
[data-toggle='checkbox'][data-style='red'] > input[type='checkbox']:focus + span:before {
    border-color: #ff0000;
}

[data-toggle='checkbox'][data-style='yellow'] > input[type='checkbox']:checked + span:before {
    background-color: #FFB800;
    border-color: #FFB800;
}

[data-toggle='checkbox'][data-style='yellow'] > input[type='checkbox']:hover + span:before,
[data-toggle='checkbox'][data-style='yellow'] > input[type='checkbox']:focus + span:before {
    border-color: #FFB800;
}

[data-toggle='checkbox'][data-style='black'] > input[type='checkbox']:checked + span:before {
    background-color: #393D49;
    border-color: #393D49;
}

[data-toggle='checkbox'][data-style='black'] > input[type='checkbox']:hover + span:before,
[data-toggle='checkbox'][data-style='black'] > input[type='checkbox']:focus + span:before {
    border-color: #393D49;
}

[data-toggle='checkbox'][data-style='cadetblue'] > input[type='checkbox']:checked + span:before {
    background-color: #53868B;
    border-color: #53868B;
}

[data-toggle='checkbox'][data-style='cadetblue'] > input[type='checkbox']:hover + span:before,
[data-toggle='checkbox'][data-style='cadetblue'] > input[type='checkbox']:focus + span:before {
    border-color: #53868B;
}

[data-toggle='checkbox'][data-style='cyan'] > input[type='checkbox']:checked + span:before {
    background-color: #2F4056;
    border-color: #2F4056;
}

[data-toggle='checkbox'][data-style='cyan'] > input[type='checkbox']:hover + span:before,
[data-toggle='checkbox'][data-style='cyan'] > input[type='checkbox']:focus + span:before {
    border-color: #2F4056;
}

/* 复选框选中时显示勾 */
[data-toggle='checkbox'] > input[type='checkbox']:checked + span:after {
    opacity: 1;
}

/* ------------  单选框和复选框禁用状态时的样式 ------------- */

[data-toggle='radio'] > input[type='radio']:disabled + span:before,
[data-toggle='radio'] > input[type='radio']:disabled + span:hover:before,
[data-toggle='radio'] > input[type='radio']:disabled + span:after,
[data-toggle='radio'] > input[type='radio']:disabled + span:hover:after,
[data-toggle='radio'] > input[type='radio']:disabled + span:hover,
[data-toggle='radio'] > input[type='radio']:disabled + span,
[data-toggle='checkbox'] > input[type='checkbox']:disabled + span:before,
[data-toggle='checkbox'] > input[type='checkbox']:disabled + span:hover:before,
[data-toggle='checkbox'] > input[type='checkbox']:disabled + span:after,
[data-toggle='checkbox'] > input[type='checkbox']:disabled + span:hover:after,
[data-toggle='checkbox'] > input[type='checkbox']:disabled + span:hover,
[data-toggle='checkbox'] > input[type='checkbox']:disabled + span {
    opacity: 0.7;
    cursor: not-allowed;
}

[data-toggle='radio'] > input[type='radio']:disabled + span::selection,
[data-toggle='checkbox'] > input[type='checkbox']:disabled + span::selection {
    background-color: transparent;
}

[data-toggle='checkbox'] > input[type='checkbox']:disabled {
    cursor: not-allowed;
}

/*-----------------------------------
           表格按钮风格定义
------------------------------------*/

.btn.btn-blue {
    background-color: #2F85DC;
    color: #FFFFff;
    border-color: #2a78c6;
    cursor: pointer;
}

.btn.btn-blue:hover {
    color: #f4f4f4;
    background-color: #2a78c6;
}

.btn.btn-blue:focus {
    color: #f4f4f4;
    background-color: #2a78c6;
    outline: 1px dashed rgba(0, 0, 0, 0.62);
    outline-offset: -4px;
}

.btn.table-green {
    background-color: #008000;
    color: #FFF;
    border-color: #008000;
    padding: 8px 12px;
    cursor: pointer;
}

.btn.table-green:hover {
    color: #f4f4f4;
    background-color: #008000;
}

.btn.table-green:focus {
    color: #f4f4f4;
    background-color: #008000;
    outline: 1px dashed rgba(0, 0, 0, 0.62);
    outline-offset: -4px;
}

.btn.table-red {
    background-color: #D5424A;
    color: #FFFFff;
    border-color: #D5424A;
    padding: 8px 12px;
    cursor: pointer;
}

.btn.table-red:hover {
    color: #f4f4f4;
    background-color: #c73e45;
}

.btn.table-red:focus {
    color: #f4f4f4;
    background-color: #b3373e;
    outline: 1px dashed rgba(0, 0, 0, 0.62);
    outline-offset: -4px;
}

.btn.table-default {
    background-color: #fff;
    color: #111111;
    border-color: #666;
    /*padding: 6px 12px;*/
    cursor: pointer;
    border-radius: 2px;
}

.btn.table-default:hover {
    color: #000000;
    background-color: #F2F2F2;
}

.btn.table-default:focus {
    color: #000000;
    background-color: #f5f5f5;
    outline: 1px dashed rgba(0, 0, 0, 0.5);
    outline-offset: -4px;
}