@font-face{
    font-family:Metropolis-Light;
    src:url(font/Metropolis-Light.woff2) format("woff2"),url(font/Metropolis-Light.woff) format("woff"),url(font/Metropolis-Light.eot?#iefix) format("eot")
}
@font-face{
    font-family:Metropolis-ExtraLight;
    src:url(font/Metropolis-ExtraLight.woff2) format("woff2"),url(font/Metropolis-ExtraLight.woff) format("woff"),url(font/Metropolis-ExtraLight.eot?#iefix) format("eot")
}
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
/*a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
    /*font:inherit;
    font-size:100%;
    margin:0;
    padding:0;
    vertical-align:baseline;
    border:0
}*/
/* HTML5 display-role reset for older browsers */
/*article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block
}
body{
    line-height:1
}
blockquote,q{
    quotes:none
}
blockquote:after,blockquote:before,q:after,q:before{
    content:"";
    content:none
}
table{
    border-spacing:0;
    border-collapse:collapse
}
input{
    outline:none
}*/
/*:root{
    */
    /*--border-color: #0c0c0c;
    */
    /*--text-color: #a0a0a1;
    */
    /*--inactive-text-color: #494749;
    */
    /*--icon-color: #6e6e6e;
    */
    /*--inactive-icon-color: #242024;
    */
    /*--inactive-month-color: #030303;
    */
    /*--text-iverse-color: #000000;
    */
    /*--day-background-hover-color: #4796D7;
    */
    /*--background-color: #000000;
    */
    /*
}
*/
/*:root{
    */
    /*--border-color: #F0F0F3;
    */
    /*--text-color: #5D5D5E;
    */
    /*--inactive-text-color: #B6B4B6;
    */
    /*--icon-color: #919191;
    */
    /*--inactive-icon-color: #DBD7DB;
    */
    /*--inactive-month-color: #FCF9FC;
    */
    /*--text-iverse-color: #fff;
    */
    /*!*--day-background-hover-color: #4796D7;
    *!*/
    /*--day-background-hover-color: #99d74d;
    */
    /*--background-color: #fff;
    */
    /*
}
*/
.days-container{
    position:relative;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:420px;
    height:240px;
    background-color:#fff
}
.days-page{
    position:absolute;
    overflow:visible;
    width:420px;
    height:0;
    -webkit-transition-timing-function:cubic-bezier(0,0,.78,1);
    transition-timing-function:cubic-bezier(0,0,.78,1);
    -webkit-transition-duration:.23s;
    transition-duration:.23s;
    -webkit-transition-property:-webkit-transform;
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-property:transform,-webkit-transform;
    will-change:transform
}
.days-page.prev2{
    -webkit-transform:translateY(-400px);
    transform:translateY(-400px)
}
.days-page.prev{
    -webkit-transform:translateY(-200px);
    transform:translateY(-200px)
}
.days-page.prev-short-week{
    -webkit-transform:translateY(-160px);
    transform:translateY(-160px)
}
.days-page.next-short-week{
    -webkit-transform:translateY(160px);
    transform:translateY(160px)
}
.days-page.next{
    -webkit-transform:translateY(200px);
    transform:translateY(200px)
}
.days-page.next2{
    -webkit-transform:translateY(400px);
    transform:translateY(400px)
}
.void-day{
    z-index:-1;
    height:1px
}
.day,.void-day{
    position:relative;
    float:left;
    width:60px
}
.day{
    font-family:Metropolis-Light,sans-serif;
    font-size:14px;
    line-height:40px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height:40px;
    -webkit-transition-timing-function:cubic-bezier(0,0,.78,1);
    transition-timing-function:cubic-bezier(0,0,.78,1);
    -webkit-transition-duration:.23s;
    transition-duration:.23s;
    -webkit-transition-property:background-color;
    transition-property:background-color;
    text-align:center;
    color: #000;
    background-color: #FFF;
    will-change:background-color;
}
.curr .day{
    background-color:#fff;
    outline: none;
}
.day:before{
    font-family:Metropolis-ExtraLight,sans-serif;
    font-size:9px;
    line-height:11px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:11px;
    content:attr(data-month);
    text-align:center;
    text-transform:uppercase
}
.no-touch .day:hover:before{
    opacity:0
}
.no-touch .day:hover{
    cursor:pointer
}
.no-touch .day:hover:after{
    font-family:Metropolis-Light,sans-serif;
    font-size:14px;
    line-height:37px;
    position:absolute;
    top:0;
    left:10px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    color: #FFF;
    width:40px;
    height:40px;
    content:attr(data-day-num);
    border: 2px solid #4e80e8;
    border-radius:40px;
    background-color: #4e80e8;
}
.no-touch .day.active:hover:after{
    background-color: #4e80e8;
}
.no-touch .day.curr:hover:after{
    background-color:#fff
}
.day.active:after{
    line-height:37px;
    left:10px;
    width:40px;
    border: 2px solid #4e80e8;
    border-radius:40px;
}
.day.active:after,.day.activeRange:after{
    font-family:Metropolis-Light,sans-serif;
    font-size:14px;
    position:absolute;
    top:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height:40px;
    content:attr(data-day-num);
    color:#fff;
    background-color: #4e80e8;
}
.day.activeRange:after{
    line-height:40px;
    z-index:4;
    left:0;
    width:60px
}
.day.activeRange.first:before,.day.activeRange.last:before{
    line-height:40px;
    position:absolute;
    z-index:2;
    top:0;
    left:10px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:80px;
    height:40px;
    content:"";
    border-radius:40px;
    background-color: #4e80e8;
}
.day.activeRange.first:after,.day.activeRange.last:after{
    z-index:3;
    background-color:transparent
}
.day.activeRange.last:before{
    left:0;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    width:50px
}
.no-touch .day.activeRange:hover:before{
    height:40px;
    opacity:1;
    background-color: #4e80e8;
}
.no-touch .day.activeRange:hover:after{
    font-family:Metropolis-Light,sans-serif;
    font-size:14px;
    line-height:37px;
    position:absolute;
    top:0;
    left:10px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:40px;
    height:40px;
    content:attr(data-day-num);
    color: #ffffff;
    border: 2px solid #4e80e8;
    border-radius:40px;
    background-color: #4e80e8;
}
.day.disable-day{
    color:#b6b4b6
}
.no-touch .day.disable-day:hover{
    cursor:default
}
.no-touch .day.disable-day:hover:after,.no-touch .day.disable-day:hover:before{
    content:none
}
.header{
    position:relative;
    width:100%;
    height:80px
}
.choose-date-container{
    font-family:Metropolis-ExtraLight,sans-serif;
    position:absolute;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:180px;
    height:80px;
    padding:20px 20px 0
}
.from-date{
    left:0
}
.to-date{
    right:24px
}
.single>.to-date{
    display:none
}
.date-label,.date-placeholder{
    line-height:20px;
    display:inline-block;
    width:100%;
    height:20px;
    color:#5d5d5e
}
.date-label{
    font-size:11px;
    text-align:left;
    text-transform:uppercase
}
.date-placeholder{
    font-size:16px;
    text-align:left;
    position:relative;
    margin-top:11px 
    /*color: var(--inactive-text-color);
    */
}
.date-label+.date-placeholder{
    margin-top:0
}
.date-placeholder.active:before{
    font-family:Metropolis-ExtraLight,sans-serif;
    font-size:12px;
    position:absolute;
    top:15px;
    content:attr(data-weekday);
    color:#b6b4b6
}
.date-placeholder.active:after{
    font-family:Metropolis-ExtraLight,sans-serif;
    font-size:34px;
    line-height:35px;
    position:absolute;
    top:1px;
    left:-45px;
    width:40px;
    height:40px;
    content:attr(data-day);
    text-align:left;
    color:#5d5d5e
}
.date-placeholder.active{
    margin-left:45px
}
.icon-right-arrow{
    font-size:16px;
    line-height:20px;
    position:absolute;
    top:30px;
    left:50%;
    width:60px;
    height:20px;
    margin-left:-30px;
    text-align:center;
    color:#dbd7db
}
.single>.icon-right-arrow{
    display:none
}
.calendar{
    position:relative;
    overflow:hidden;
    width:420px;
    /*height: 400px;
    */
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    background-color:#fff;
    -webkit-box-shadow:0 0 6px #888;
    box-shadow:0 0 6px #888
}
.calendar:after,.calendar:before{
    position:absolute;
    display:block;
    width:0;
    height:0;
    border-style:solid
}
.calendar.top-left-triangle:after{
    top:-20px;
    left:10px;
    content:"";
    border-width:10px;
    border-color:transparent transparent #fff
}
.calendar.top-left-triangle:before{
    top:-22px;
    left:9px;
    content:"";
    border-width:11px;
    border-color:transparent transparent #cfcfd2
}
.calendar.top-right-triangle:after{
    top:-20px;
    right:10px;
    content:"";
    border-width:10px;
    border-color:transparent transparent #fff
}
.calendar.top-right-triangle:before{
    top:-22px;
    right:9px;
    content:"";
    border-width:11px;
    border-color:transparent transparent #cfcfd2
}
.calendar.bottom-left-triangle:after{
    bottom:-20px;
    left:10px;
    content:"";
    border-width:10px;
    border-color:#fff transparent transparent
}
.calendar.bottom-left-triangle:before{
    bottom:-22px;
    left:9px;
    content:"";
    border-width:11px;
    border-color:#cfcfd2 transparent transparent
}
.calendar.bottom-right-triangle:after{
    right:10px;
    bottom:-20px;
    content:"";
    border-width:10px;
    border-color:#fff transparent transparent
}
.calendar.bottom-right-triangle:before{
    right:9px;
    bottom:-22px;
    content:"";
    border-width:11px;
    border-color:#cfcfd2 transparent transparent
}
.calendar.bottom-left-triangle,.calendar.bottom-right-triangle,.calendar.top-left-triangle,.calendar.top-right-triangle{
    overflow:visible
}
.choose-month-container{
    position:absolute;
    z-index:100;
    bottom:0;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:100%;
    height:280px;
    padding:20px 10px;
    background-color:#fff
}
.choose-month-label{
    position:relative;
    display:inline-block;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:20px 10px;
    cursor:pointer;
    text-align:center;
    color:#5d5d5e
}
.choose-month-label,.choose-month-label.active:before{
    font-family:Metropolis-ExtraLight,sans-serif;
    font-size:18px;
    line-height:40px;
    width:80px;
    height:40px
}
.choose-month-label.active:before{
    position:absolute;
    left:0;
    content:attr(data-val);
    color:#fff;
    border-radius:40px;
    background-color:#26a69a
}
.no-touch .choose-month-label:hover:before{
    font-family:Metropolis-ExtraLight,sans-serif;
    font-size:18px;
    line-height:37px;
    position:absolute;
    left:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:80px;
    height:40px;
    content:attr(data-val);
    color:#5d5d5e;
    border:2px solid #26a69a;
    border-radius:40px;
    background-color:#fff
}
.month-name-container{
    position:relative;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:100%;
    height:60px;
    padding:20px;
    border-top:1px solid #f0f0f3
}
.month-year-label{
    font-family:Metropolis-ExtraLight,sans-serif;
    font-size:18px;
    line-height:20px;
    display:inline-block;
    width:100%;
    height:20px;
    text-align:center;
    color:#5d5d5e
}
.double .month-year-label{
    float:left;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:280px;
    padding-right:20px
}
.double .month-year-label+.month-year-label{
    padding-right:0;
    padding-left:20px
}
.month-title,.year-title{
    cursor:pointer
}
.no-month .month-title,.no-year .year-title{
    cursor:default
}
.icon-left-triangle,.icon-right-triangle{
    font-size:17px;
    position:absolute;
    display:inline-block;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:20px;
    cursor:pointer;
    color:#919191
}
.icon-left-triangle{
    left:20px;
    text-align:left
}
.icon-right-triangle{
    right:20px;
    text-align:right
}
.monthChoose .icon-left-triangle,.monthChoose .icon-right-triangle{
    display:none
}
.monthChoose .month-title{
    color:#b6b4b6
}
.yearChoose .icon-left-triangle,.yearChoose .icon-right-triangle{
    display:none
}
.yearChoose .year-title{
    color:#b6b4b6
}
.week-name-container{
    font-family:Metropolis-ExtraLight,sans-serif;
    font-size:11px;
    position:relative;
    width:100%;
    color: #000;
    border-bottom:1px solid #f0f0f3;
}
.week-label,.week-name-container{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height:20px
}
.week-label{
    line-height:20px;
    float:left;
    width:60px;
    text-align:center;
    text-transform:uppercase
}
.choose-year-container{
    position:absolute;
    z-index:100;
    bottom:0;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:100%;
    height:280px;
    padding:20px 10px;
    background-color:#fff
}
.choose-year-label{
    position:relative;
    display:inline-block;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:20px 10px;
    cursor:pointer;
    text-align:center;
    color:#5d5d5e
}
.choose-year-label,.choose-year-label.active:before{
    font-family:Metropolis-ExtraLight,sans-serif;
    font-size:18px;
    line-height:40px;
    width:80px;
    height:40px
}
.choose-year-label.active:before{
    position:absolute;
    left:0;
    content:attr(data-val);
    color:#fff;
    border-radius:40px;
    background-color:#26a69a
}
.no-touch .choose-year-label:hover:before{
    font-family:Metropolis-ExtraLight,sans-serif;
    font-size:18px;
    line-height:37px;
    position:absolute;
    left:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:80px;
    height:40px;
    content:attr(data-val);
    color:#5d5d5e;
    border:2px solid #26a69a;
    border-radius:40px;
    background-color:#fff
}
.icon-bottom-triangle,.icon-top-triangle{
    font-size:18px;
    position:absolute;
    left:50%;
    width:100px;
    height:25px;
    margin-left:-50px;
    cursor:pointer;
    text-align:center;
    color:#919191
}
.icon-top-triangle{
    top:15px
}
.icon-bottom-triangle{
    bottom:0
}
.double .days-container{
    width:300px;
    border-right:1px solid #f0f0f3
}
.double .days-container+.days-container{
    overflow:hidden;
    /*padding-left: 20px;
    */
    border-left:20px solid #fff
}
.double .days-page{
    width:280px
}
.double .day,.double .void-day{
    width:40px
}
.double .day.active:after,.double .day:hover:after{
    left:0
}
.double .day.activeRange:after{
    width:40px
}
.double .day.activeRange.first:before,.double .day.activeRange.last:before{
    left:0;
    width:60px
}
.double .day.activeRange.first:before{
    width:40px;
    border-top-right-radius:0;
    border-bottom-right-radius:0
}
.double .day.activeRange.last:before{
    left:-20px
}
.double .day.activeRange:hover:after{
    left:0
}
.double .days-container{
    float:left
}
.days-container+.days-container{
    float:right
}
.double .choose-date-container{
    width:270px
}
.double .choose-date-container+.choose-date-container{
    padding-left:40px
}
.double.calendar{
    width:600px
}
.double .choose-month-label,.double .choose-month-label.active:before,.double .choose-month-label:hover:before{
    width:120px
}
.double .week-label{
    width:40px
}
.double .week-name-container{
    float:left;
    width:300px
}
.double .week-name-container+.week-name-container{
    padding-left:20px
}
.double .choose-year-label,.double .choose-year-label.active:before,.no-touch .double .choose-year-label:hover:before{
    width:120px
}
@font-face{
    font-family:picker-font;
    src:url(font/picker-font.eot);
    src:url(font/picker-font.eot?#iefix) format("eot"),url(font/picker-font.woff) format("woff"),url(font/picker-font.ttf) format("truetype"),url(font/picker-font.svg#picker-font) format("svg")
}
.icon:before{
    font-family:picker-font;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-style:normal;
    -webkit-font-feature-settings:normal;
    font-feature-settings:normal;
    font-variant:normal;
    font-weight:400;
    text-decoration:none;
    text-transform:none
}
.icon-bottom-triangle:before{
    content:"\E001"
}
.icon-left-triangle:before{
    content:"\E002"
}
.icon-right-arrow:before{
    content:"\E003"
}
.icon-right-triangle:before{
    content:"\E004"
}
.icon-top-triangle:before{
    content:"\E005"
}