body{
    background: #f4f4f4;
}
.vote-title{
    text-align: center;
    color: red;
    position: relative;
}
.vote-title .hr-bg{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: red;
}
.vote-time{
    font-size: 1rem;
    display: inline-block;
    background: #f4f4f4;;
    position: relative;
    padding: 0 10px;
}
.vote-time strong{
    font-size: 2.5rem;
    font-weight: normal;
    vertical-align: middle;
}
.vote-items{
    padding: 10px;
    background-color: #e5e5e5;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.vote-items label{
    height: 40px;
    line-height: 40px;
    display: block;
    color: #666;
    font-size: 1.4rem;
}

.vote-items.template1 .votes { margin: 0 -10px; font-size: 0;}
.vote-items.template1 .votes>li {position: relative;border: 1px solid #ccc; margin: 9px 9px; display: inline-block; vertical-align: top;}
.vote-items.template1 .votes>li.active .status{width: 100%;position: absolute;left: 0;bottom:-24px;line-height: 24px;height: 24px;text-align: center;color:#ec6d6c;}
.vote-items.template1 .votes>li.active .status small{font-size: 0.8rem;}
.vote-items.template1 .vote-item-thumb { font-size: 0; width: 100%; background-color: #fff; text-align: center; padding: 9px 9px 0 9px;overflow: hidden;}
.vote-items.template1 .vote-item-thumb img{
    max-width: 100%;
    max-height: 100%;
}
.vote-items.template0 .votes{ border: 1px solid #d5d5d5; }
.vote-items.template0 .votes>li { border-top: 1px solid #ddd; background-color: white; }
.vote-items.template0 .votes>li:first-child { border: none; }

/*初始状态, 已关闭或未开始*/
.vote-items .vote-control,
.vote-items .vote-btn.vote,
.vote-items .select,
.vote-items .result{
    display: none;
}
.vote-items .g-cloumn{
    display: block;
}
.vote-items .vote-btn.vote:before{
    content: '投票';
}

/*投票结束*/
.vote-items.showRank .voted-rank{
    display: block;
}

/*投票中*/
.vote-items.runing .vote-control,
.vote-items.runing .vote-btn.vote,
.vote-items.runing .select{
    display: block;
}
.vote-items.runing .g-cloumn{
    /*display: none;*/
}
.vote-items.runing .voted-btn{
    display: none;
}

/*已投票 界面显示逻辑*/
.vote-items.voted .select{
    display: none;
}
.vote-items.voted .voted-btn{
    display: block;
}
.vote-items.voted.showResult .voted-btn{
    display: none;
}
.vote-items.voted.showResult .result{
    display: block;
}
.vote-items.voted .vote-btn.vote:before{
    content: '已投票';
}

.votes .title{
    line-height: 1.5em;
    text-align: center;
    background-color: white;
    font-size: 1.6rem;
    padding: 10px;
    box-sizing: content-box;
    word-break: break-all;
}
.votes .description{
    line-height: 1.5em;
    padding: 10px;
    background-color: white;
    font-size: 1.2rem;
    border-top: 1px solid #ccc;
    box-sizing: content-box;
    word-break: break-all;
}
.vote-control{
    height: 56px;
    line-height: 56px;
    border-top: 1px solid #ccc;
    background-color: #f4f4f4;
    text-align: center;
}
.vote-control .vote-btn{
    margin: auto;
    position: relative;
    top: 50%;
    margin-top: -18px;
}
.vote-control .counts{
    font-size: 1.6rem;
    color: #999;
}
.voted-rank.elect { padding: 10px; position: relative; background-color: #f4f4f4; }
.voted-rank.elect i { display: inline-block; width: 30px; height: 30px; line-height: 30px; background-color: #999; text-align: center; color: white; font-size: 1.6rem; }
.voted-rank.elect .counts { display: inline-block; font-size: 1.6rem; position: absolute; top: 50%; right: 10px; margin-top: -0.8rem; line-height: 1.6rem;}
.votes>li:nth-child(1) .voted-rank.elect i{
    background-color: #fe5b00;
}
.votes>li:nth-child(2) .voted-rank.elect i{
    background-color: #ff8b00;
}
.votes>li:nth-child(3) .voted-rank.elect i{
    background-color: #ffd000;
}

.info-outer{
    display: -webkit-inline-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px 0;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}
.info-outer .select{
    margin-left: 10px;
    width: 20px;
    height: 20px;
}
.info-outer .select.radio{
    border-radius: 10px;
}
.info-outer .vote-item-thumb {
    margin-right: 10px;
    margin-left: 10px;
    text-align: center;
}
.info-outer .vote-item-thumb img {
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
}
.info-outer .title{
    line-height: 1.8rem;
    height: auto;
    text-align: left;
    -webkit-box-flex:1;
    -webkit-flex:1;
    flex: 1;
    overflow: hidden;
}
li .info-outer .title small{
    float: right;
    display: none;
    color: #ec6d6c;
    font-size: 1.2rem;
}
li.active .info-outer .title small{
    display: inline-block;
}

.vote-general-item .result { padding: 4px 10px 14px; height: 14px; box-sizing: content-box; font-size: 12px; }
.result .counts { float: right; width: 6em; text-align: right; line-height: 10px; white-space: nowrap; }
.result .progressbar { margin-right: 7em; height: 13px; line-height: 14px; background-color: #f4f4f4; color: #fff; position: relative; }
.result .progressbar>div { display: inline-block; }
.result .progressbar .percent { color: #e84a4a; vertical-align: top; font-size: 12px; position: absolute;left: 100%;margin-left: 5px;}
.result .progressbar .done { height: 100%; width: 80%; background-color: #e84a4a; position: relative;}
.result .progressbar.inner .percent{
    right: 5px;
    left: initial;
    color: white;
}

.vote-btn,.js_login_show{
    height: 36px;
    line-height: 36px;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    font-size: 1.6rem;
    color: white;
    background-color: #ccc;
    border:none;
}
.js_login_show{
    margin: 20px 0 10px;
    height: 45px;
    line-height: 45px;
    background-color: #e64c4e;
}
.vote-btn.vote{
    margin: 20px 0 10px;
    height: 45px;
    line-height: 45px;
}
.vote-btn.active{
    background-color: #e64c4e;
}
.vote-btn-round{
    width: 72px;
    border-radius: 23px;
}
.counts:after{
    content: '票';
}
.vote-btn-outer{
    padding: 0 10px;
}
.radio,.checkbox{
    border: 1px solid #ccc;
    background-color: #ddd;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.radio.active{
    border-color: #e84a4a;
    background-color: #e84a4a;
}
.checkbox{
    border-radius: 2px;
}
.checkbox.active{
    background-size: contain;
    border: none;
    background-color: #e84a4a;
    background-image: url('../images/checked.png');
}
.checkbox-round{
    width: 72px;
    height: 36px;
    border-radius: 18px;
    margin: auto;
    background-color: initial;
    background-image: url('../images/selecticon.png');
    top: 50%;
    position: relative;
    margin-top: -18px;
    background-position-x: 50%;
    background-position-y: 0;
}
.checkbox-round.active{
    background-position-y: -72px;
}

/* ==========================================================================
   Remodal's style
   ========================================================================== */
.remodal { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #FFFFFF; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: #2b2e38; display: none; font-family: 'Microsoft yahei', '微软雅黑', Tahoma, Verdana, Arial, sans-serif; }
.remodal.remodal-message { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; line-height: 60px; width: 200px; height: 60px; }

/* remodal content style */
.remodal p { text-align: left; font-size: 13px; margin-left: 50px; background-repeat: no-repeat; -webkit-background-size: 30px; color: #666; }
.remodal p span.icon-box { width: 20px; height: 20px; display: block; position: absolute; top: 20px; left: 15px; }
.remodal p span.success { background-image: url("../images/vote-icon.png"); background-position: 0 0; }
.remodal p span.error { background-image: url("../images/vote-icon.png"); background-position: 0 -20px; }
.remodal p span.alert { background-image: url("../images/vote-icon.png"); background-position: 0 -20px; }

/* Close button */
.remodal-close { display: block; overflow: visible; width: 35px; height: 35px; padding: 0; cursor: pointer; transition: color 0.2s; text-decoration: none; color: #95979c; border: 0; outline: 0; background: transparent; }
button.remodal-close-message { position: absolute; font-size: 21px; line-height: 35px; margin: -17px 0 0 0; top: 50%; right: 0; }
.remodal-close:hover,
.remodal-close:focus { color: #2b2e38; }

/* 验证码 */
.ui-popup-modal .ui-dialog { border-radius: 0; border: none;}
.ui-popup-modal .ui-dialog-title { font-size: 1.6rem; font-weight: normal; }
.ui-popup-modal .ui-dialog-footer { padding: 0; border-top: 1px solid #e5e5e5; }
.ui-popup-modal .ui-dialog-button { width: 100%; }
.ui-popup-modal .ui-dialog-footer button { border: none; width: 50%; padding: 16px 0; margin: 0; color: #666; border-radius: 0;}
.ui-popup-modal .ui-dialog-footer button:first-child { border-right: 1px solid #e5e5e5; }
.ui-popup-modal .captcha-content .success { background-image: url("../images/vote-icon.png"); background-repeat: no-repeat; background-position: 0 0; }
.remodal .captcha-content { width: 225px; height: 40px; margin: 55px 20px; border: 1px solid #e4e4e4; background-image: url("../images/vote-icon.png"); -webkit-background-size: 20px; background-size: 20px; background-repeat: no-repeat; background-position: 8px -50px; overflow: hidden; }
.remodal .captcha-content input.captcha-txt { float: right; width: 60px; border: none; background: transparent; height: 40px; overflow: hidden; line-height: 42px; }
.remodal .captcha-content .captcha-icon { float: right; width: 20px; height: 20px; margin: 10px; }
.remodal .captcha-content .success { background-image: url("../images/vote-icon.png"); background-repeat: no-repeat; background-position: 0 0; }
.remodal .captcha-content .error { background-image: url("../images/vote-icon.png"); background-repeat: no-repeat; background-position: 0 -20px; }
.remodal .captcha-content .captcha-image { float: right; width: 90px; height: 40px; overflow: hidden; background-color: #eee; }
.remodal .captcha-content .captcha-image img { margin-right: -1px; margin-top: -1px; cursor: pointer; height: 100%; width: 100%; }

/*投票搜索*/
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1;
}
.vote-items{
    padding-top: 15px;
}
.vote-items .search-title{
    overflow: hidden;
    padding-bottom: 10px;
}
.vote-items .search-title h3 {
    line-height: 30px;
    font-weight: 100;
    float: left;
    color: #666;
    font-size: 1.4rem;
}
.vote-items .search-title .search-box{
    float: right;
    position: relative;
}
.vote-items .search-title .search-box input{
    width: 200px;
    height: 30px;
    line-height: 30px;
    font-size: 1.2rem;
    border: 1px solid #BEBEBE;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    text-indent: 2em;
    padding-right: 8px;
}
.vote-items .search-title .search-toggle,
.vote-items .search-title .search-box .search-btn{
    width: 16px;
    height: 18px;
    color:#999;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAkCAYAAAGf7Ah0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1NjczNjBGOTMzQzcxMUU3QjczNEYyNkI3RUM1OEQ5QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1NjczNjBGQTMzQzcxMUU3QjczNEYyNkI3RUM1OEQ5QyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU2NzM2MEY3MzNDNzExRTdCNzM0RjI2QjdFQzU4RDlDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU2NzM2MEY4MzNDNzExRTdCNzM0RjI2QjdFQzU4RDlDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AHE7AwAABDVJREFUeNpinDlzJgMUdABxBRMDAlSACJDAVyRBsAA3Ej8ZWQsIzAUIIEaooR0wM1iAGCSSDlUxiQmJAwK5IIH/SAKMIAFGJIH/AAEEMzQbiDVAWqASkkD8DKQYZMk0IM5Cc85zqEn/QUYeY8ADQAqWwOwD4mogNoKyQZgRIIAYkUJLGoj3APFaIK6BCbIg6QbZqQnl/wBiDpgV/9G8xgCV/A9TcA6H+0CaBEEKqvB4QhqkYAcOSQkgvgJS4I9DwXOYGzYBcSsQfwNiASCuhzrwHUwBAzSAuID4AxA3Qh34GxTKAAGEHFAwe59D2Reg4QECFlD6DRCLImuABaQUED8F4jAsYYYOfkP1McIMEINqJqQRBliB2BQWQUzQdNXNQBo4DaV1QAYsB2I7BvIAE8iAOCA2B+IkEjT+A+JdQHwJObH5Q9kyeDSuhqphA2J35HhmgBoAMugJEHcB8XekjHEZGkOhQHwVGhOfkKMRHZRBMTagg5Rn/gMEEHpCgoFyUFYA4gQgXgDEs4D4Hq48jQw2Q50MKpvsgfg+lL4LFTdGNwDZC7ASShWI72CxDJRhzgBxHxAXo7vgGlIuvoPD76AMZQbERUCsjmyAAbQwYSQyBToC8Q1kA84D8WQSEtEBKJ2C7IVKEpPwDCDORA7EryQaMAkWbkxkZiIuXOmAWCCPboAniQYshIUbE7R+2kaCZn4g5oFmOLAB2VCJB0Qa8AFaGfxD9gIL1F+38WgUgCb3j8hehhnwF5oSVaCKdgOxA1RTNbSof4/kBW1cscAINR1UP+yHamoB4kdQOVhyvwLEeriiEeQ/XSQNjNAyEwYUofRFctPBA2iWBxcBAAF6L3uXBoIoiB8iGFBTaClaxNZGsBBEiaAQxSZaKFbapBQtbLQRtBAbEbFSSGslNuJHIVzwK3+BCLHSJlgoMZUI+t7xO1mPu+QIuQwMLBuyO3d7b95skCOZGKX+J0NWbE54LTygFVrVUoofRgwX08XGWHDC82pMJjEt9dwN4ZuwzFxoAQNsagsTwhkWj5HSLiqsZZOeOvnPIG14jTU3qwk4N1ruPIucWLUjL2xByDfi3skS/wRoEZ0JUyhN0O7rhTxvwqauXsm6fwIyfGCKYTpZFEhSmypm1xSwzlhby60VLdzvYJZI7giIM7liRY+SMf5yBcSYWGyAgA+PbToC9o0c3RGxgB0jvxdcAe5NRMPKUYSb7wmnGc+RPh0BmhJ7+CHNOXXXeXMtwSXGQ8InrxG9cCaHwnba15XXNGrAAt6i1v6AD9xVsuIMQtSYxoVF4Sdn1xViw1bKusjGWeNqtU0aCNWMphCSQvkqDvZjsAy9c1u03LSRONV8TnmYvqB47odLaEJjS79nroCR+eFYeMMbbOO6U6LqHptrONdChStAUADRi1uv8J6rcpxonG2yGodnPupljkKZ+wVaaOiQ0yvh/QAAAABJRU5ErkJggg==) no-repeat center;
    background-size: 80%;
}
.vote-items .search-title .search-box .search-btn{
    display: block;
    position: absolute;
    left: 10px;
    top: 6px;
}
.vote-items .search-title .search-toggle{
    float: right;
    margin-top: 5px;
    width: 20px;
    height: 20px;
}
.vote-items .search-tip{
    display: none;
    text-align: center;
    color:#999;
    line-height: 200px;
}