.date{position:relative;color:#333}.date .month{font-size:14px;text-align:center;margin-top:10px}.date .month .icon-angle-left{float:left;padding-left:10px}.date .month .icon-angle-right{float:right;padding-right:10px}.date .month i:hover,.date .month span:hover{cursor:pointer}.date .weekdays{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:14px;margin-top:10px}.date .weekdays li{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center}.date .days{display:-webkit-box;display:-ms-flexbox;display:flex}.date .days li{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:14px;text-align:center;margin-top:10px;line-height:30px}.date .days li span:hover{cursor:pointer}.date .days li span{display:inline-block;width:30px;height:30px;position:relative}.date .days li span .circle{position:absolute;width:5px;height:5px;background-color:#5fb878;border-radius:50%;right:0;top:0}.date .days li .active{display:inline-block;width:30px;height:30px;border-radius:50%;background-color:#459fff}.date .days li .other-month{color:#d2d2d2}.date .days li .active{color:#fff}.date .popup{width:100%;position:absolute;top:-9px;background-color:#fff;border:1px solid #e4e7ed;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);overflow:hidden}.date .popup .popup-header{text-align:center;border:1px solid #e4e7ed;padding:10px 15px}.date .popup .popup-header .icon-d-arrow-left{float:left}.date .popup .popup-header .icon-d-arrow-right{float:right}.date .popup .popup-header i:hover,.date .popup .popup-header span:hover{cursor:pointer}.date .popup ul{overflow:hidden;padding:10px 0}.date .popup ul li{width:25%;float:left;text-align:center;padding:10px 0}.date .popup ul li span{display:inline-block;padding:5px 10px}.date .popup ul li .active{background-color:#459fff;color:#fff}.date .popup ul li span:hover{cursor:pointer}.date .year-popup ul li{width:33.333%}