/*动画*/
/*被选中那一天的动画*/
@keyframes flexDate_shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
}
@-webkit-keyframes flexDate_shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
}
@keyframes flexDate_hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}
@-webkit-keyframes flexDate_hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}
/*进度条上动画*/
@keyframes flexDate_bubble {
    0%{
        transform: scale(0.5);
    }
    20%{
        transform: scale(0.6);
    }
    40%{
        transform: scale(0.7);
    }
    60%{
        transform: scale(0.8);
    }
    80%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
}
@-webkit-keyframes flexDate_bubble {
    0%{
        transform: scale(0.5);
    }
    20%{
        transform: scale(0.6);
    }
    40%{
        transform: scale(0.7);
    }
    60%{
        transform: scale(0.8);
    }
    80%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes flexDate_progress-bar-stripes {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 0;
    }
}
@-webkit-keyframes flexDate_progress-bar-stripes {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 0;
    }
}
/*年月日入场动画*/
@keyframes flexDate_vanishIn {
    0% {
        opacity: 0;
        transform-origin: 0% 100%;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: scaleY(1);
    }
}
@-webkit-keyframes flexDate_vanishIn {
    0% {
        opacity: 0;
        transform-origin: 0% 100%;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: scaleY(1);
    }
}
@keyframes flexDate_zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}
@-webkit-keyframes flexDate_zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}
@keyframes flexDate_rotateIn {
    0% {
        opacity: 0;
        transform-origin: 100% 100%;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: scaleY(1);
    }
}
@-webkit-keyframes flexDate_rotateIn {
    0% {
        opacity: 0;
        transform-origin: 100% 100%;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: scaleY(1);
    }
}
/*卡片入场动画*/
@keyframes flexDate_left2Right {
    0%{
        margin-left:-100%;
    }
    100%{
        margin-left:0;
    }
}
@-webkit-keyframes flexDate_left2Right {
    0%{
        margin-left:-100%;
    }
    100%{
        margin-left:0;
    }
}
@keyframes flexDate_right2Left {
    0%{
        margin-left:0;
    }
    100%{
        margin-left:-100%;
    }
}
@-webkit-keyframes flexDate_right2Left {
    0%{
        margin-left:0;
    }
    100%{
        margin-left:-100%;
    }
}
/*time和oper入场*/
@-webkit-keyframes flexDate_fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes flexDate_fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
/*容器入场动画*/
@keyframes flexDate_fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 25%, 0);
        transform: translate3d(0, 25%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes flexDate_fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 25%, 0);
        transform: translate3d(0, 25%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.flexDate_rotateIn{
    animation: flexDate_rotateIn 0.5s;
    -webkit-animation: flexDate_rotateIn 0.5s;
}
.flexDate_fadeInUp{
    animation: flexDate_fadeInUp 0.5s;
    -webkit-animation: flexDate_fadeInUp 0.5s;
}
.flexDate_left2Right{
    animation:flexDate_left2Right 0.5s;
    -webkit-animation:flexDate_left2Right 0.5s;
}
.flexDate_right2Left{
    animation:flexDate_right2Left 0.5s;
    -webkit-animation:flexDate_right2Left 0.5s;
}
.flexDate_vanishIn{
    animation: flexDate_vanishIn 0.5s;
    -webkit-animation: flexDate_vanishIn 0.5s;
}
.flexDate_zoomIn{
    animation:flexDate_zoomIn 0.5s ;
    -webkit-animation:flexDate_zoomIn 0.5s ;
}
.flexDate_shake{
    animation: flexDate_shake 0.5s;
    -webkit-animation:flexDate_shake 0.5s;
}
.flexDate_fadeInLeft{
    animation: flexDate_fadeInLeft 0.5s ;
    -webkit-animation:flexDate_fadeInLeft 0.5s ;
}

.flexDate_container{
    position: absolute;
    top:200px;
    left:350px;
    font-family:'微软雅黑', Verdana, sans-serif, '宋体', serif;
    padding:5px;
    display: none;
    z-index:999;
}
.flexDate_container ul{
    list-style: none;
    margin:0;
    padding:0;
}
.flexDate_header b{
    font-weight:normal;
}
.flexDate_leftBorder,.flexDate_rightBorder{
    position: absolute;
    width: 255px;
    height:100%;
    z-index: -1;
    top:0;
    left:0;
    background-color: #000000;
    opacity:0.2;
    filter:alpha(opacity=20);
    border-radius: 2px;
}
.flexDate_rightBorder{
    left:auto;
    right:0;
}
.flexDate_left,.flexDate_right{
    background-color: #dfdfdf;
    display: inline-block;
    vertical-align: top;
    *display: inline;;*zoom:1;
    position: relative;
}
.flexDate_right{
    margin-left:10px;
}
.flexDate_header{
    height:33px;
    line-height:33px;
    background-color: #199352;
    color:white;
    font-size: 16px;
    width: 245px;
    text-align: center;
    position: relative;
}
.flexDate_header>span{
    cursor: pointer;
}
.flexDate_month{
    margin-left:15px;
}
.flexDate_header>i{
    position: absolute;
    top:8px;
    cursor: pointer;
    width:17px;
    height:18px;
}
.flexDate_lArrow{
    left:12px;
    background: url(../images/icons.png) no-repeat 0 0;
}
.flexDate_rArrow{
    right:12px;
    background: url(../images/icons.png) no-repeat -17px 0;
}
/*body*/
.flexDate_body{
    position: relative;
    padding-top:190px;
    width:245px;
}
/*日期*/
.flexDate_dateCard{
    background-color: #fff;
    color:#666666;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    width: 245px;
    box-sizing: border-box;
    transition: margin-left 0.5s;
    padding-bottom:1px;
}
.flexDate_dateCard>ul{
    overflow: hidden;
}
.flexDate_dateCard>ul>li{
    float: left;
    width:25px;
    height:25px;
    line-height:25px;
    margin-left:7px;
    text-align: center;
    cursor: pointer;
    border:1px solid transparent;
    border-radius: 50%;
    transition: all 0.2s;
}
.flexDate_dateCard>ul:first-child>li{
    font-weight:bold;
    cursor: default;
}
.flexDate_dateCard>ul>li:hover{
    border-color:#199352;
    background-color: #ffffff;
    color:#666666;
}



.flexDate_dateCard>ul:first-child>li:hover{
    border-color: transparent;
}
li.flexDate_selecting{
    background-color: #199352;
}
li.flexDate_selecting{
    color:white;
}
.flexDate_dateCard>ul>li.flexDate_rightFlat{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.flexDate_dateCard>ul>li.flexDate_leftFlat{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/*其他月份的日期*/
.flexDate_others{
    color:#bbbbbb;
}
/*年份选择包裹和月份包裹*/
.flexDate_yearWrapper,.flexDate_monthWrapper,.flexDate_dateWrapper{
    position: absolute;
    width:245px;
    height:190px;
    top:0;
    left:0;
    padding-top:1px;
    background-color: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
    display: none;
    white-space: nowrap;
}
.flexDate_yearCard,.flexDate_monthCard{
    width:100%;
    height:100%;
    overflow: hidden;
    display: inline-block;
    transition: margin-left 0.5s;
}
.flexDate_yearCard li{
    float: left;
    margin-left:15px;
    margin-top:3px;
    cursor: pointer;
    font-size: 14px;
    width:40px;
    height:40px;
    line-height:40px;
    border-radius: 50%;
    text-align: center;
    border:1px solid transparent;
    color:#666666;
    transition: all 0.3s;
}
.flexDate_monthCard li{
    float: left;
    margin-left:15px;
    margin-top:15px;
    cursor: pointer;
    font-size: 14px;
    width:40px;
    height:40px;
    line-height:40px;
    border-radius: 50%;
    text-align: center;
    border:1px solid transparent;
    color:#666666;
    transition: all 0.3s;
}
.flexDate_yearCard>li:hover,.flexDate_monthCard>li:hover{
    border-color:#199352;
    background-color: #ffffff;
    color:#666666;
}
li.flexDate_cur{
    color:#199352;
    font-weight:bold;
}
li.flexDate_selected{
    background-color: #199352;
    color:white;
}
ul>li.flexDate_disabled{
    color:white;
    background-color: #dfdfdf;
    border-color: transparent;
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
}
.flexDate_body ul>li.flexDate_disabled:hover{
    cursor: not-allowed;
    border-color: transparent;
    background-color: #dfdfdf;
    color:white;
}
/*时间*/
.flexDate_time{
    margin-top:1px;
    background-color: #fff;
    overflow: hidden;
    padding:1px 0 5px 0;
}
.flexDate_time>div{
    float: left;
}
.flexDate_timeShow{
    font-size: 14px;
    color:#666666;
    width:100px;
    text-align: center;
}
.flexDate_timeShow>span{
    cursor: pointer;
    padding:0 1px;
    vertical-align: middle;
}
.flexDate_slide{
    border-bottom:2px solid #199352;
}
.flexDate_timePicker{
    width:145px;
    text-indent:2px;
}
.flexDate_bar{
    display: inline-block;
    width:130px;
    height:5px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
    vertical-align: middle;
    border-radius: 1px;
}
/*进度条的进度*/
.flexDate_pro{
    height:100%;
    background-color: #199352;
    background-image: -webkit-linear-gradient(135deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(135deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent);
    background-image: linear-gradient(135deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent);
    background-size: 20px 15px;
    background-repeat: repeat-x;
    border-radius: 1px;
    width:90px;
    animation: flexDate_progress-bar-stripes 3s linear infinite;
    -webkit-animation: flexDate_progress-bar-stripes 3s linear infinite;
}
.flexDate_ball{
    position: absolute;
    top:0;
    left:90px;
    cursor: pointer;

}
.flexDate_ball:hover>em{
    animation-play-state:paused ;
    -webkit-animation-play-state:paused ;
}

.flexDate_ball>em{
    position: absolute;
    z-index: 0;
    top:-9px;
    left:-12px;
    width:24px;
    height:24px;
    background-color: #199352;
    opacity:0.25;
    filter:alpha(opacity=25);
    border-radius: 50%;
    animation: flexDate_bubble 1s infinite alternate;
    -webkit-animation: flexDate_bubble 1s infinite alternate;
}
.flexDate_ball>i{
    position: absolute;
    z-index: 1;
    width:12px;
    height:12px;
    top:-3px;
    left:-6px;
    background-color: #199352;
    border-radius: 50%;
    vertical-align: top;
}
/*操作按钮*/
.flexDate_oper{
    margin-top:1px;
    background-color: #fff;
    text-align: right;
    padding:5px;
}
.flexDate_oper>a{
    text-decoration: none;
    font-size: 12px;
    display: inline-block;
    width:50px;
    height:23px;
    line-height:23px;
    text-align: center;
    background-color: #199352;
    color:white;
    border-radius: 2px;
}
.flexDate_oper>a:hover{
    opacity:0.9;
    filter:alpha(opacity=90);
}

/*提示框*/
.flexDate_tip{
    position: absolute;
    top:50%;
    left:50%;
    margin:-30px 0 0 -60px;
    display:none;
    animation:flexDate_zoomIn 0.5s forwards;
    -webkit-animation:flexDate_zoomIn 0.5s forwards;
}
.flexDate_tip>.flexDate_tipBg{
    position: absolute;
    width:100%;
    height:100%;
    z-index:-1;
    background-color: #199352;
    opacity:0.8;
    filter:alpha(opacity=80);
    border-radius: 2px;
}
.flexDate_tip>p{
    box-sizing: border-box;
    margin:0;
    padding:15px 10px;
    width:120px;
    color:white;
    font-size: 14px;
    text-align: center;
}