body {
    background-color: #fff;
}
a {
    color: #222222;
}

.navbar .left,.navbar .right {
    color: #666666;
}

/**搜索栏**/
.searchbar-wrap{
    position: absolute;
    left: 0;
    right: 0;
}
.searchbar-wrap .left{
    position: absolute;
    left: 10px;
    top: 12px;
    z-index: 9;
}
.searchbar-wrap .left,.searchbar-wrap .right{
    color: #666666;
}

.searchbar-wrap .searchbar {
    padding-left: 44px;
    padding-right: 10px;
}

/******/
.popup {
    background-color: #fff;
}

.navbar {
    background-color: #fff;
    color: #222222;
}

.navbar a {
    color: #222222;
}
.navbar .left {
    padding-left: 5px;
}

.color-red {
    color: #dd2727;
}

.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.text-center{
    text-align: center;
}

/**锁定背景**/
.backdrop {
    position: absolute;
    /*position: fixed;*/
    top: 0;
    left: 0;
    z-index: 5001;
    bottom: 0;
    right: 0;
    /*width: 100%;*/
    /*height: 100%;*/
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.1s opacity linear;
    transition: 0.1s opacity linear;
}
.backdrop.visible {
    visibility: visible;
}
.backdrop.active {
    opacity: 1;
}
/** Panel 面板 **/
.panel-navbar {
    height: 44px;
    top:0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    font-size: 17px;
    position: absolute;
    margin: 0;
    z-index: 500;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #fff;
}

.panel-navbar .left {
    margin-right: 10px;
}
.panel-navbar .left, .panel-navbar .right {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transform: translate3d(0,0,0);
}
.panel-navbar .center, .panel-navbar .left, .panel-navbar .right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}
.panel-navbar .left, .panel-navbar .right{
    -webkit-transform: translate3d(0,0,0);
}

html.pixel-ratio-3 .panel-navbar:after {
    -webkit-transform: scaleY(.33);
    transform: scaleY(.33);
}
.panel-navbar:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #c4c4c4;
    z-index: 15;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    backface-visibility: hidden;
}

.panel-navbar,.panel-navbar a {
    color: #222222;
}

.panel-navbar-inner{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.panel-navbar-inner{
    left: 0;
    padding: 0 8px;
    box-sizing: border-box;
}
/**加载动画**/
.spinner {
    text-align: center;
}

.spinner > div {
    width: 12px;
    height: 12px;
    background-color: #0EA2F8;/*#67CF22*/

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 40% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
      }
}

/***底部加载动画***/
.infinite-scroll-preloader {
    margin-top:10px;
    margin-bottom: 10px;
    text-align: center;
}
.infinite-scroll-preloader .preloader {
    width:24px;
    height:24px;
}

/***  页面开始加载动画  ****/
.ui-loading-block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    background: transparent;
    text-align: center
}

.ui-loading-cnt {
    width: 300px;
    height: 60px;
    position: absolute;
    display: inline-block;
    left: 50%;
    top: 40%;
    margin-top: -30px;
    margin-left: -150px;
    color: #000;
    text-align: center;
    font-size: 16px;
    text-shadow: none;
    font-weight: normal
}

.ui-loading-bright {
    height: 30px;
    display: block;
    background: url("../i/ajax-loader.gif");
    background-repeat: no-repeat;
    text-shadow: none;
    background-position: center center;
    font-weight: normal
}

/***  Toast  ****/
.toast {
    width: 100%;
    position: absolute;
    left: 0;
    top:48%;
    transform-origin: 0px 0px 0px;
    opacity: 10;
    transform: scale(1, 1);
    z-index: 99999;
    visibility: hidden;
}

.toast-showing {
    visibility: visible;
}
.toast-hidden {
    visibility: hidden;
}

.toast .toast-body{
    width:180px;
    display:block;
    padding:8px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    border:1px solid transparent;
    background-color:rgba(0,0,0,0.7);
    border-radius:4px;
    color:white;
    font-size:14px;
}

.nodata {
    margin-top:12px;
    margin-bottom: 12px;
    text-align: center;
}

/** r-dialog **/
.r-dialog {
    position: absolute;
    max-width: 92%
}

.r-dialog-wrap {
    position: relative;
    background: rgba(0,0,0,0.7);
    background-clip: padding-box;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 1px 1px 1px #000;
    padding: 10px
}

.r-dialog-header-title {
    color: #fff;
    text-align: center
}

.r-dialog-header-load {
    text-align: center;
    background: url("../i/alert-loading.gif");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
    width: 50px;
    height: 53px;
    margin: auto
}

.r-dialog-header-alert,.r-dialog-header-ok {
    text-align: center;
    background: url("../i/alert-icons.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 50px;
    height: 53px;
    margin: auto
}

.r-dialog-header-alert {
    background-position: 0 -53px
}

.r-dialog-header-ok {
    background-position: 0 0
}

.r-dialog-content {
    padding: 1em 0 .2em;
    font-size: .8em;
    color: #fff;
    overflow: hidden;
    text-align: center
}

.r-dialog-footer {
    height: 26px;
    line-height: 26px;
    padding-left: 15px;
    text-align: center
}

.r-dialog-footer a {
    display: inline-block;
    margin: 0 15px 15px 0;
    height: 26px;
    line-height: 26px;
    padding: 0 30px;
    font-size: 14px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
}

.r-dialog-footer a:link,.r-dialog-footer a:visited,.r-dialog-footer a:hover {
    color: #fff;
    text-decoration: none
}

.r-dialog-ok,.r-dialog-ok:hover {
    background: #fba733;
    color: #fff
}

.r-dialog-cancel,.r-dialog-cancel:hover {
    color: #fff
}

.r-dialog-mask {
    position: fixed;
    _position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=30);
    opacity: .3
}

/***数量输入框***/
.p-quantity {
    line-height: 35px;
    width: 120px;
}

.p-quantity .quantity-form {
    position: relative;
    /*overflow: hidden;*/
    height: 100%;
    width: 100%;
}

.p-quantity .quantity-form a:link {
    text-underline: none;
    text-decoration: none;
}

.p-quantity .quantity-form a:hover{
    background-color: #ddd;
    text-underline: none;
    text-decoration: none;
}

.p-quantity .decrement,.p-quantity .increment {
    border: 1px solid #cacbcb;
    border-right: 0;
    height: 33px;
    line-height: 33px;
    width: 30px;
    text-align: center;
    color: #666;
    margin: 0;
    background: #fff
}

.p-quantity .decrement:hover,.p-quantity .increment:hover {
    text-decoration: none
}

.p-quantity .decrement.disabled,.p-quantity .increment.disabled {
    cursor: default;
    color: #e9e9e9
}

.p-quantity .decrement {
    float: left
}

.p-quantity .increment {
    float: right;
    border: 1px solid #cacbcb;
    border-left: 0;
    color: #666
}

.p-quantity .itxt {
    position: absolute;
    left: 30px;
    top: 0;
    border: 1px solid #cacbcb;
    width: 55px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    padding: 1px;
    margin: 0;
    font-size: 16px;
    font-family: verdana;
    color: #333;
    -webkit-appearance: none;
    border-radius: 0;
}
.p-quantity .itxt:focus{
    border: 1px solid #ff9500;
}

/*****/
label.label-checkbox input[type="checkbox"]:checked + i.icon-form-checkbox,
label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
    border: none;
    background-color: #dd2727;
}
label.label-checkbox input[type="checkbox"]:checked + i.icon-form-checkbox:after,
label.label-checkbox input[type="radio"]:checked + i.icon-form-checkbox:after {
    background: no-repeat center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23ffffff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E");
    -webkit-background-size: 12px 9px;
    background-size: 12px 9px;
}