/* grid system */
.row {
}
.row:after,.row:before {
    display: table;
    content: " "
}
.row:after {
    clear: both
}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 8px;
    padding-right: 8px;
}
.row .col-1:first-child,
.row .col-2:first-child,
.row .col-3:first-child,
.row .col-4:first-child,
.row .col-5:first-child,
.row .col-6:first-child,
.row .col-7:first-child,
.row .col-8:first-child,
.row .col-9:first-child,
.row .col-10:first-child,
.row .col-11:first-child,
.row .col-12:first-child{
    padding-left: 0;
}

.row .col-1:last-child,
.row .col-2:last-child,
.row .col-3:last-child,
.row .col-4:last-child,
.row .col-5:last-child,
.row .col-6:last-child,
.row .col-7:last-child,
.row .col-8:last-child,
.row .col-9:last-child,
.row .col-10:last-child,
.row .col-11:last-child,
.row .col-12:last-child{
    padding-right: 0;
}

.col-12 {
    width: 100%;
}

.col-11 {
    width: 91.66666667%;
}

.col-10 {
    width: 83.33333333%;
}

.col-9 {
    width: 75%;
}

.col-8 {
    width: 66.66666667%;
}

.col-7 {
    width: 58.33333333%;
}

.col-6 {
    width: 50%;
}

.col-5 {
    width: 41.66666667%;
}

.col-4 {
    width: 33.33333333%;
}

.col-3 {
    width: 25%;
}

.col-2 {
    width: 16.66666667%;
}

.col-1 {
    width: 8.33333333%;
}

.col-pull-12 {
    right: 100%;
}

.col-pull-11 {
    right: 91.66666667%;
}

.col-pull-10 {
    right: 83.33333333%;
}

.col-pull-9 {
    right: 75%;
}

.col-pull-8 {
    right: 66.66666667%;
}

.col-pull-7 {
    right: 58.33333333%;
}

.col-pull-6 {
    right: 50%;
}

.col-pull-5 {
    right: 41.66666667%;
}

.col-pull-4 {
    right: 33.33333333%;
}

.col-pull-3 {
    right: 25%;
}

.col-pull-2 {
    right: 16.66666667%;
}

.col-pull-1 {
    right: 8.33333333%;
}

.col-pull-0 {
    right: auto;
}

.col-push-12 {
    left: 100%;
}

.col-push-11 {
    left: 91.66666667%;
}

.col-push-10 {
    left: 83.33333333%;
}

.col-push-9 {
    left: 75%;
}

.col-push-8 {
    left: 66.66666667%;
}

.col-push-7 {
    left: 58.33333333%;
}

.col-push-6 {
    left: 50%;
}

.col-push-5 {
    left: 41.66666667%;
}

.col-push-4 {
    left: 33.33333333%;
}

.col-push-3 {
    left: 25%;
}

.col-push-2 {
    left: 16.66666667%;
}

.col-push-1 {
    left: 8.33333333%;
}

.col-push-0 {
    left: auto;
}

.col-offset-12 {
    margin-left: 100%;
}

.col-offset-11 {
    margin-left: 91.66666667%;
}

.col-offset-10 {
    margin-left: 83.33333333%;
}

.col-offset-9 {
    margin-left: 75%;
}

.col-offset-8 {
    margin-left: 66.66666667%;
}

.col-offset-7 {
    margin-left: 58.33333333%;
}

.col-offset-6 {
    margin-left: 50%;
}

.col-offset-5 {
    margin-left: 41.66666667%;
}

.col-offset-4 {
    margin-left: 33.33333333%;
}

.col-offset-3 {
    margin-left: 25%;
}

.col-offset-2 {
    margin-left: 16.66666667%;
}

.col-offset-1 {
    margin-left: 8.33333333%;
}

.col-offset-0 {
    margin-left: 0%;
}

.full-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}


table {
    background-color: transparent;
}
th {
    text-align: left;
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 8px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 6px;
    line-height: 1.2;
    vertical-align: middle;
    border-top: 1px solid #ddd;
    text-align: center;
}
.table > thead > tr > th {
    vertical-align: middle;
    border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
    border-top: 0;
}
.table > tbody + tbody {
    border-top: 2px solid #ddd;
}
.table .table {
    background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 2px;
}
.table-bordered {
    border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    border-bottom-width: 1px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}
table col[class*="col-"] {
    position: static;
    display: table-column;
    float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
    position: static;
    display: table-cell;
    float: none;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
    background-color: #f5f5f5;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
    background-color: #dff0d8;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
    background-color: #d9edf7;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
    background-color: #fcf8e3;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
    background-color: #f2dede;
}
.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}
@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
    .table-responsive > .table {
        margin-bottom: 0;
    }
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap;
    }
    .table-responsive > .table-bordered {
        border: 0;
    }
    .table-responsive > .table-bordered > thead > tr > th:first-child,
    .table-responsive > .table-bordered > tbody > tr > th:first-child,
    .table-responsive > .table-bordered > tfoot > tr > th:first-child,
    .table-responsive > .table-bordered > thead > tr > td:first-child,
    .table-responsive > .table-bordered > tbody > tr > td:first-child,
    .table-responsive > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0;
    }
    .table-responsive > .table-bordered > thead > tr > th:last-child,
    .table-responsive > .table-bordered > tbody > tr > th:last-child,
    .table-responsive > .table-bordered > tfoot > tr > th:last-child,
    .table-responsive > .table-bordered > thead > tr > td:last-child,
    .table-responsive > .table-bordered > tbody > tr > td:last-child,
    .table-responsive > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0;
    }
    .table-responsive > .table-bordered > tbody > tr:last-child > th,
    .table-responsive > .table-bordered > tfoot > tr:last-child > th,
    .table-responsive > .table-bordered > tbody > tr:last-child > td,
    .table-responsive > .table-bordered > tfoot > tr:last-child > td {
        border-bottom: 0;
    }
}

.no-padding{
    padding :0 !important;
}

input.input-strong {
    font-size: 24px;
    line-height: 28px;
    height: 60px;
    font-weight: 600;
}


.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.input-group-addon:last-child {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell;
}


/* Spacements */
/* spacement top & bottom */
.m-none {
    margin: 0 !important;
}

.m-auto {
    margin: 0 auto !important;
}

.m-xs {
    margin: 5px !important;
}

.m-sm {
    margin: 10px !important;
}

.m-md {
    margin: 15px !important;
}

.m-lg {
    margin: 20px !important;
}

.m-xl {
    margin: 25px !important;
}

.m-xlg {
    margin: 30px !important;
}

/* spacement top	*/
.mt-none {
    margin-top: 0 !important;
}

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

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

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

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

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

.mt-xlg {
    margin-top: 30px !important;
}

/* spacement bottom	*/
.mb-none {
    margin-bottom: 0 !important;
}

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

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

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

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

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

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

/* spacement left	*/
.ml-none {
    margin-left: 0 !important;
}

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

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

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

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

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

.ml-xlg {
    margin-left: 30px !important;
}

/* spacement right	*/
.mr-none {
    margin-right: 0 !important;
}

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

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

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

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

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

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

/* Spacement Padding */
.p-none {
    padding: 0 !important;
}

.p-xs {
    padding: 5px !important;
}

.p-sm {
    padding: 10px !important;
}

.p-md {
    padding: 15px !important;
}

.p-lg {
    padding: 20px !important;
}

.p-xl {
    padding: 25px !important;
}

.p-xlg {
    padding: 30px !important;
}

/* spacement top	*/
.pt-none {
    padding-top: 0 !important;
}

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

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

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

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

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

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

/* spacement bottom	*/
.pb-none {
    padding-bottom: 0 !important;
}

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

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

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

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

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

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

/* spacement left	*/
.pl-none {
    padding-left: 0 !important;
}

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

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

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

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

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

.pl-xlg {
    padding-left: 30px !important;
}

/* spacement right	*/
.pr-none {
    padding-right: 0 !important;
}

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

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

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

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

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

.pr-xlg {
    padding-right: 30px !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

/* override noUislider */
.noUi-background {
    background: #0088cc;
    box-shadow: none;
}

.noUi-horizontal {
    height: 3px;
    margin-left: 10px;
}

.noUi-horizontal .noUi-handle {
    width: 22px;
    height: 22px;
    left: -11px;
    top: -11px;
}

[disabled] .noUi-handle {
    background: #8f8f94;
}

.noUi-handle {
    border: none;
    border-radius: 50%;
    background: #0088cc;
    cursor: default;
    box-shadow: none;
}

.noUi-target {
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.noUi-handle:before,.noUi-handle:after {
    content: none;
}

.noUi-origin {
    background: #aaa;
}

/* override ratchet */
.bar .fe {
    position: relative;
    z-index: 99;
    padding-top: 10px;
    padding-bottom: 10px;
}

p.desc {
    font-size: 12px;
}

.btn-block {
    padding: 12px 0;
}

.badge {
    padding: 3px 10px;
}

.segmented-control.primary {
    border-color: #428bca;
}

.segmented-control.primary .control-item {
    color: #0088cc;
    border-color: #428bca;
}

.segmented-control.primary .control-item.active {
    color: #fff;
    background: #0088cc;
}

.info-card {
    position: relative;
    display: table;
    overflow: hidden;
    font-size: 12px;
    font-weight: 400;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.info-card .card-item {
    display: table-cell;
    width: 1%;
    padding-top: 6px;
    padding-bottom: 7px;
    overflow: hidden;
    line-height: 1;
    color: #333;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left: 1px solid #ccc;
}
.info-card .card-item:first-child {
    border-left-width: 0;
}

.info-card.primary {
    border-color: #428bca;
}

.info-card.primary .card-item {
    color: #0088cc;
    border-color: #428bca;
}

.table-view.select .table-view-cell > .btn {
    display: none;
    -webkit-transition: all;
    -moz-transition: all;
    transition: all;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
}

.table-view.select .table-view-cell.selected{
    background-color: rgba(0, 136, 204, 0.4);
}
.table-view.select .table-view-cell.selected > .btn {
    position: absolute;
    display: block;
    height: 100%;
    right: 1px;
    border-radius: 0;
    -webkit-transition: all;
    -moz-transition: all;
    transition: all;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
}

.table-view-divider {
    position: relative;
}

.table-view-divider>.badge {
    position: absolute;
    top: 50%;
    right: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.badge.badge-num{
    background-color: transparent;
    height: 100%;
    padding: 0 8px;
}

.badge.badge-num:before{
    position: relative;
}

.badge.badge-num > span.num-text,
.badge.badge-num > a{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
     transform: translateY(-50%);
}

.badge.badge-num > span.num-text{
    padding: 4px 8px;
    font-size: 14px;
    height: 24px;
    border-top: 1px solid #929292;
    border-bottom: 1px solid #929292;
    color: #0088cc;
}

.badge.badge-num > a {
    position: relative;
    display: inline-block;
    padding: 4px 8px;
    font-size: 14px;
    height: 24px;
    cursor: pointer;
    background-color: white;
    border-radius: 0 5px 5px 0;
    color: #929292;
    background-color: rgba(247, 247, 247, .98);
    border: 1px solid #929292;
    -webkit-transition: all;
    -moz-transition: all;
    transition: all;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
}

.badge.badge-num > a:first-child{
    border-radius: 5px 0 0 5px;
}

.badge.badge-num > .cover-left,
.badge.badge-num > .cover-right{
    position: absolute;
    width: 50%;
    height: 100%;
    background: transparent;
    left: 0;
}
.badge.badge-num > .cover-right{
    left:inherit;
    right: 0;
}

.modal.horiaontal {
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.modal.horiaontal.active {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    width: 100%;
}

.fade {
    opacity: 0;
    display: none;
    transition: opacity 1s;
    -moz-transition: opacity 1s; /* Firefox 4 */
    -webkit-transition: opacity 1s; /* Safari 和 Chrome */
    -o-transition: opacity 1s; /* Opera */
}

.fade.open {
    opacity: 1;
    display: block;
    transition: opacity 1s;
    -moz-transition: opacity 1s; /* Firefox 4 */
    -webkit-transition: opacity 1s; /* Safari 和 Chrome */
    -o-transition: opacity 1s; /* Opera */
}
/** start global *****/
a,img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}

html,body {
    -webkit-user-select: none; /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
header.bar.bar-nav {
  -webkit-transform: translateZ(0);
}
/** end global *****/

/**订制 **/
.fade.send-settings,.fade.purchase-settings {
    padding-left: 10px;
}

.fade.send-settings .row,.fade.purchase-settings .row {
    margin-left: -18px;
}

.link-control{
    display: none;
}
.link-control.visible{
    display: block;
}

li i.li-icon {
    margin: 10px 10px 0 0;
}

.table-view-cell.media .circle {
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid #000;
    width: 35px;
    height: 35px;
    color: #000;
}

.table-view-cell.media .circle.circle-primary {
    color: #fff;
    background-color: #428bca;
    border: 1px solid #428bca;
}

.table-view-cell.media .circle.circle-positive {
    color: #fff;
    background-color: #5cb85c;
    border: 1px solid #85AF85;
}

.table-view-cell.media .circle.circle-negative {
    color: #fff;
    background-color: #D0D0D0;
    border: 1px solid #B9B9B9;
}

.table-view-cell.media .circle-content {
    font-size: 10px;
    max-height: 35px;
    line-height: 35px;
    display: block;
    text-align: center;
}

@-webkit-keyframes progress-bar-stripes {
    from {background-position: 40px 0}
    to {background-position: 0 0}
}
@-o-keyframes progress-bar-stripes {
    from {background-position: 40px 0}
    to {background-position: 0 0}
}
@keyframes progress-bar-stripes {
    from {background-position: 40px 0}
    to {background-position: 0 0}
}

.progress {
    height: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress.progress-bg{
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: none;
    background-color: #f5f5f5;
    z-index: -1;
}


.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #428bca;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width .6s ease;
    transition: width .6s ease;
}


.progress-bar-striped,.progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%,
        rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent );
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%,
        rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent );
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%,
        rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent );
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px
}

/* .progress-bar.active,.progress.active .progress-bar { */
/*     -webkit-animation: progress-bar-stripes 2s linear infinite; */
/*     -o-animation: progress-bar-stripes 2s linear infinite; */
/*     animation: progress-bar-stripes 2s linear infinite */
/* } */

.progress-bar-success {
  background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}


/*** keyboard ****/
.keyboard {
    position: fixed;
    bottom: -320px;
    height: 320px;
    width: 100%;
    left: 0;
    transition: bottom .25s;
    -moz-transition: bottom .25s; 
    -webkit-transition: bottom .25s; 
    -o-transition: bottom .25s; 
}

.keyboard.active {
    transition: bottom .25s;
    -moz-transition: bottom .25s; /* Firefox 4 */
    -webkit-transition: bottom .25s; /* Safari 和 Chrome */
    -o-transition: bottom .25s; /* Opera */
    z-index: 11;
    bottom: 0;
}

.keyboard-backdrop {
    display: none;
    content:" ";
    position:fixed;
    background-color : rgba(42, 34, 34, 0.42); 
    height : 100%;
    width : 100%;
    top :0;
}

.keyboard.active .keyboard-backdrop{
    display: block;
}

.keyboard .content {
    padding-left: 5%;
    padding-right: 5%;
    text-align: center;
}

.keyboard div.row {
    margin: auto;
}


.keyboard .keyboard-button { 
    border-radius: 3px;
    overflow: hidden;
    white-space: nowrap;
    outline: none;
    font-size: 18px;
    font-weight: bolder;
    margin: 4px 0;
    width: 100%;
    height: 54px;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: 1px solid #929292;
    padding: 0;
}

.keyboard .keyboard-button.key-ok{
    border-color: #0073b3;
}

.form-control.keyboard-result{
    margin: 6px 0;
    height: 54px;
    line-height: 2em;
    font-size: 24px;
    font-weight: bold;
    border: 1px solid #929292;
    border-radius:3px 0 0 3px;
    color: #222;
    opacity: 1;
}

.btn.key-clear{
    width: 100%;
    margin: 6px 0;
    height: 54px;
    border-left: none;
    border-radius: 0 3px 3px 0;
    outline: none;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    font-size: 16px;
}


 /* execute page (new) */

 .my-stock {
     background: #0088cc;
     overflow: hidden;
     position: fixed;
     top: 0;
     left: 0;
     text-align: center;
     width: 100%;
     -webkit-transition: all 0.4s ease 0s;
     -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
     transition: all 0.4s ease 0s;
     z-index: 99;
     border-bottom: 1px solid #ddd;
 }

.my-stock .main-info{
    position: relative;
}

.my-stock .user-info {
    position: absolute;
    font-size: 12px;
    color: #fff;
    left: 8px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: left;
    max-width: 80px;
}

.my-stock .user-info > p{
    margin: 0 0 0 27px;
    /* float: left; */
    color: #eee;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-stock .user-info  img{
    width: 25px;
    height: 25px;
    margin-top: 3px;
    vertical-align:bottom;
    border-radius:25px;
    opacity: .8;
}


.my-stock .week-info {
    position: absolute;
    right: 8px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.my-stock .week-info > h4{
    position: relative;
    margin: 0;
    color: #FFFFFF;
    padding: 2px 12px;
}


.my-stock .week-info .progress.progress-bg{
    background-color: rgba(0, 0, 0, 0.15);
}

.my-stock .week-info .progress-bar{
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #5cb85c;
}


.my-stock-qty {
    margin: 0;
    color: #FFFFFF;
    /* line-height: 30px; */
    font-size: 32px;
    padding-top: 2px;
}

.my-stock-qty > small,
.my-profit > small,
.chain > li .role.real > .stock > h4 > small{
    margin: 4px;
    font-size: 12px;
    font-weight: normal;
}

.my-profit{
    color: #eeeeee;
    margin-bottom: 12px;
}

.my-stock > ul {
    background: #EFEFF4;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.my-stock > ul > li {
    float: left;
    list-style: none outside none;
    padding: 4px 0;
    width: 50%;
    position: relative;
}

.my-stock > ul > li:not(last-child):before {
    background: none repeat scroll 0 0 #dddddd;
    content: "";
    height: 30px;
    margin-top: -15px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
}

.my-stock > ul:before {
    border-bottom: 9px solid #EFEFF4;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    content: "";
    left: 50%;
    margin-left: -9px;
    position: absolute;
    top: -8px;
}

.my-stock li > p {
    color: #0088cc;
    font-size: 18px;
    font-weight: 600;
}

.my-stock li > p > i {
    color: #777777;
    float: left;
    font-size: 12px;
    font-style: normal;
    width: 100%;
    margin-top: -4px;
    font-weight: normal;
}

.row.action-bottom {
    position: fixed;
    padding: 0 8px;
    height: 55px;
    width: 100%;
    
    bottom: 0;
    background-color: #EFEFF4;
}

.row.action-bottom > .col-6 {
    padding: 4px 8px;
    border-top: 1px solid #dddddd;
}

.row.action-bottom > .col-6:first-child {
    border-right: 1px solid #dddddd;
}

.row.action-bottom > .col-6 > button {
    margin: 0;
}

.chain{
    padding: 0;
    background: url("data:image/svg+xml;utf8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='38px' height='60px'%3e%3cg%3e%3crect width='38' height='60' fill='%23fafafa' /%3e%3cline x1='18.5' y1='0' x2='18.5' y2='60' fill='none' stroke='%23000' stroke-opacity='.3' stroke-dasharray='7,7'/%3e%3c/g%3e%3c/svg%3e") repeat-y center;
}
.chain > li{
    list-style: none;
    width: 100%;
    text-align: center;
}

.chain > li .way{
    height: 66px;
    margin: 0 20px;
    position: relative;
}

@media (min-width:400px){
    .chain > li .way{
        height: 90px;
        margin: 0 30px;
    }
}

.chain > li .role.visual{
    background: #f5f5f5;
    border: 1px dashed #8E8E8E;
    border-radius: 3px;
    padding: 8px;
    width: 40%;
    display: inline-block;
    box-shadow: 2px 2px 6px rgba(0,0,0,.15);
}

.chain > li .role.visual > p{
    /*font-size: 20px;*/
    /*line-height: 20px;*/
    margin: 0;
}

.chain > li .role > .stock{
    background: #eee;
    border: 1px solid #c5c5c5;
    border-radius: 2px;
    display: inline-block;
    color: #777;
    width: 40%;
    box-shadow: 2px 2px 6px rgba(0,0,0,.15);
}

.chain > li .role > .stock.mine{
    background: #0088cc;
    border: 1px solid #0067A0;
    color: #fff;
}

.chain > li .role > .stock > p{
    margin: 0;
    color: #fff;
    font-size: 12px;
    background: rgba(0,0,0,.15);
    /* border-bottom: 1px solid #D2D2D2; */
}

.chain > li .role.real > .stock > h4{
    margin: 0;
    padding: 6px 0;
    font-size: 16px;
}

.chain > li .sender,
.chain > li .order{
    position: absolute;
}

.chain > li .order,
.chain > li .sender{
    top: 50%;
    left: 0;
    width: 50%;
    text-align: left;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%);
    overflow: hidden;
}

.chain > li .sender{
    right: 0;
    left: inherit;
    text-align: right;
}

.chain > li .sender.week1{
    top: 25%;
}

.chain > li .sender.week2{
    top: 75%;
}

.chain > li .sender > p,
.chain > li .order > p{
    display: inline-block;
    margin: 0;
    font-size: 12px;
    padding: 2px 9px 3px;
    line-height: 1;
    background-color: #eeeeee;
    border-radius: 100px;
    border : 1px dotted #DDDDDD;
}

.chain > li .sender:after,
.chain > li .order:after{
    content: " ";
    position: absolute;
    width: 100%;
    top: 50%;
    left: 6px;
    border-bottom: 1px dotted #DDDDDD;
    z-index: -1;
}

.chain > li .order:after{
    left: initial;
    right: 6px;
}

.chain > li .sender:before,
.chain > li .order:before{
    content: "\e920";
    font-family: "emicon";
    position: absolute;
    font-size: 14px;
    background: #838F94;
    border-radius: 50%;
    line-height: 1em;
    width: 1em;
    top: 50%;
    left: 0;
    padding: 2px;
    text-align: center;
    z-index: 0;
    color: #fff;
    -webkit-transform: translate(0, -50%) scale(0.6);
    -moz-transform: translate(0, -50%) scale(0.6);
    transform: translate(0, -50%) scale(0.6);
}

.chain > li .order:before{
    content: "\e922";
    left: initial;
    right: 0;
}
/* end execute page (new) */

.bg-primary{
    background-color: #0088CC;
    color: #FFFFFF;
}

button.btn{
    -webkit-tap-highlight-color:transparent;
}


.table-view.select .table-view-cell{
    margin-left: 11px;
}
.table-view.select .table-view-cell:not(:last-of-type){
    background-image: none;
    border-bottom: 1px solid #c8c7cc;
    margin-left: 11px;
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}