.UploadViewport {
    border: 1px solid;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
}

.UploadControlBar {

}

.UploadModal {
    margin-top: -200px;
}

@font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello.eot?63484501');
    src: url('../fonts/fontello.eot?63484501#iefix') format('embedded-opentype'),
    url('../fonts/fontello.woff2?63484501') format('woff2'),
    url('../fonts/fontello.woff?63484501') format('woff'),
    url('../fonts/fontello.ttf?63484501') format('truetype'),
    url('../fonts/fontello.svg?63484501#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}


.cdn-icon
{
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* You can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-scissors:before { content: '\e800'; } /* '' */
.icon-zoom-in:before { content: '\e801'; } /* '' */
.icon-zoom-out:before { content: '\e802'; } /* '' */
.icon-search:before { content: '\e803'; } /* '' */
.icon-star:before { content: '\e804'; } /* '' */
.icon-star-empty:before { content: '\e805'; } /* '' */
.icon-star-half:before { content: '\e806'; } /* '' */
.icon-star-half-alt:before { content: '\e807'; } /* '' */
.icon-heart-empty:before { content: '\e808'; } /* '' */
.icon-heart:before { content: '\e809'; } /* '' */
.icon-left-open:before { content: '\e80a'; } /* '' */
.icon-right-open:before { content: '\e80b'; } /* '' */
.icon-left-big:before { content: '\e80c'; } /* '' */
.icon-right-big:before { content: '\e80d'; } /* '' */
.icon-cancel:before { content: '\e80e'; } /* '' */
.icon-ok:before { content: '\e80f'; } /* '' */
.icon-plus:before { content: '\e810'; } /* '' */
.icon-minus:before { content: '\e811'; } /* '' */
.icon-angle-left:before { content: '\f104'; } /* '' */
.icon-angle-right:before { content: '\f105'; } /* '' */

.icon-concern-on {
    font-size:36px;
    font-weight:bold;
    color:#87b725;
}

.icon-concern-off {
    font-size:36px;
    font-weight:bold;
    color:#fff;
}

.tabs-off{
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    display: flex;/* NEW, Spec - Opera 12.1, Firefox 20+ */
    height: calc(100% - 50px);;
}
.tabs-off>ul{
    padding: 0px;
    border: 0px;
    margin-left: 30px;
}
.tabs-off>ul>li{
    float: none;
    list-style:none;
    border: 1px solid #cccccc;
    width: 30px;
    height: 120px;
    padding: 1px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    background-color: #CCCCCC;
}
.tabs-off>ul>li.active{
    background-color: #87b725;
}

.tabs-off>div{
    width: 100%;
}

.tabs{
    float: left;
    margin-top: 10px;
    margin-left: auto;
    margin-right:auto;
    width: 100%;
    height: 98%;
    /*background-color: rgba(78, 147, 26, 0.36);*/
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    border: 1px solid #CCCCCC;
    padding-top: 10px;
}

.tabs>ul{
    float: left;
    padding: 0px;
    border: 0px;
}
.tabs>ul>li{
    float: left;
    list-style:none;
    width: 120px;
    height: 30px;
    padding: 1px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    background-color: #eee;
    color: #666;
    font-weight: bold;
    line-height: 30px;
    margin-right: 20px;

}
.tabs>ul>li.active{
    background-color: #87b725;
    color: whitesmoke;
}
.tabs>div{
    float: left;
    display: none;
    width: 100%;
    height: calc(100% - 50px);
}

/*用户端*/
.customer-tabs{
    float: left;
    margin-top: 10px;
    height: 98%;
    /*background-color: rgba(78, 147, 26, 0.36);*/
    padding-left: 8px;
    padding-right: 8px;
    position: relative;
    width: 100%;
}

.customer-tabs>ul{
    float: left;
    padding: 0px;
    border: 0px;
    width: 100%;
}
.customer-tabs>ul>li{
    float: left;
    list-style:none;
    border: 1px solid #ffffff;
    width: calc(20% - 5px);
    height: 30px;
    padding: 1px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    background-color: #eee;
    line-height: 25px;
    margin-right: 5px;
}
.customer-tabs>ul>li.active{
    background-color: #87b725;
    color: #FFFFFF;
}
.customer-tabs>ul>li.disabled{
    background-color: #eee;
    color: #FFFFFF;
    cursor: not-allowed;
}

.customer-tabs>div{
    float: left;
    display: none;
    width: 100%;
}


span.num{
     width: 24px;
     height: 24px;
     font-size: 10px;
     background-color: #f00;
     background-image: -webkit-linear-gradient(top, #f00, #600); /* Chrome 10+, Saf5.1+, iOS 5+ */
     background-image:    -moz-linear-gradient(top, #f00, #600); /* FF3.6+ */
     background-image:     -ms-linear-gradient(top, #f00, #600); /* IE10 */
     background-image:      -o-linear-gradient(top, #f00, #600); /* Opera 11.10+ */
     color:#fff;
     font-family:Verdana;
     font-weight:normal;
     /*padding:2px 5px;*/
     border:2px solid #fff;
     border-radius:25px;
     position:absolute;
     /*margin-top:-5px;*/
     margin-left:-10px;
     box-shadow: 0 2px 3px 0px rgba(0,0,0,1);
     text-shadow: -1px -1px 0 #000;
 }

li>span.num{
    width: 24px;
    height: 24px;
    font-size: 10px;
    background-color: #f00;
    background-image: -webkit-linear-gradient(top, #f00, #600); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, #f00, #600); /* FF3.6+ */
    background-image:     -ms-linear-gradient(top, #f00, #600); /* IE10 */
    background-image:      -o-linear-gradient(top, #f00, #600); /* Opera 11.10+ */
    color:#fff;
    font-family:Verdana;
    font-weight:normal;
    /*padding:2px 5px;*/
    border:2px solid #fff;
    border-radius:25px;
    position:absolute;
    margin-top:25px;
    margin-left:-20px;
    box-shadow: 0 2px 3px 0px rgba(0,0,0,1);
    text-shadow: -1px -1px 0 #000;
}

span.notification-icon{
font-family: Ratchicons,sans-serif !important;
}

.btn-block{
    background-color: rgb(135, 183, 37);
}