#calendar-demo{width:100%}
.calendar-overlay{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(10,10,10,.7);z-index:100001;overflow:hidden;display:none}
.calendar-wrapper{font-family:Roboto;font-size:14px;position:relative;width: 85%;margin: 0 auto;}
span.calendar-date-wrapper{color: #ffffff;text-align:center;background: #663200;letter-spacing: 1px;padding:5px 29px;font-weight: 600;font-family: 'Noto Sans',sans-serif;}
.calendar-wrapper.picker{position:absolute;left:50%;bottom:24px;min-width:280px;opacity:1;overflow:hidden;-o-border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-o-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-webkit-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);-o-box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);-moz-box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);-webkit-box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);transition:transform .25s ease,opacity .25s ease;-o-transition:-o-transform .25s ease,opacity .25s ease;-moz-transition:-moz-transform .25s ease,opacity .25s ease;-webkit-transition:-webkit-transform .25s ease,opacity .25s ease}
.calendar-wrapper.picker.load{opacity:0;-o-transform:translateX(-50%) scale(1.05);-moz-transform:translateX(-50%) scale(1.05);-webkit-transform: translateX(-50%) scale(1.05); transform:translateX(-50%) scale(1.05);}
.calendar-head-card{font-size:18px;padding:16px}
.calendar-head-card .calendar-year,.calendar-head-card .calendar-date-wrapper{color:#dcdcdc;display:block}
.calendar-head-card .calendar-date-wrapper{font-size:30px;cursor:pointer}
.calendar-head-card .calendar-date-wrapper:hover{color:#fff}
.calendar-container{background-color:#fff;padding:10px;user-select:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;width:100%}
.calendar-top-selector{display:table;width:100%;color:#323232;background: #f1e9d6;}
.calendar-top-selector span{display:table-cell;text-align:center;font-weight:700;font-size: 16px;cursor:pointer;padding: 5px 0px;font-family: 'Noto Sans',sans-serif;}
.calendar-top-selector .calendar-curr-month{}
.calendar-next,.calendar-prev{font-family:'Times New Roman';font-size:24px;width:14%;color:#323232}
.calendar-grid{position:relative;overflow:hidden;transition:all .25s ease;-o-transition:all .25s ease;-moz-transition:all .25s ease;-webkit-transition:all .25s ease}
.calendar-grid .calendar-labels{display:table;width:100%;visibility:visible;opacity:1;transition:opacity .25s ease;-o-transition:opacity .25s ease;-moz-transition:opacity .25s ease;-webkit-transition:opacity .25s ease}
.calendar-grid .calendar-labels.invis{visibility:hidden;opacity:0}
.calendar-grid .calendar-labels span{display:table-cell;width:14%;text-align:center;color: #c1235b;font-size:15px;padding: 5px 0 4px;vertical-align:middle;font-weight: bold;font-family: 'Noto Sans',sans-serif;background: #ffd7f3;border: 1px solid white;}
.calendar-grid .calendar-date-holder{position:relative;width:100%;height:170px;overflow:hidden}
.calendar-date-holder .calendar-dates{position:absolute;display:table;left:0;width:100%;transition:margin-left .3s cubic-bezier(0.4,0.0,0.2,1),transform .3s ease,opacity .3s ease;-o-transition:margin-left .3s cubic-bezier(0.4,0.0,0.2,1),transform .3s ease,opacity .3s ease;-moz-transition:margin-left .3s cubic-bezier(0.4,0.0,0.2,1),transform .3s ease,opacity .3s ease;-webkit-transition:margin-left .3s cubic-bezier(0.4,0.0,0.2,1),transform .3s ease,opacity .3s ease}
.calendar-date-holder .calendar-dates.hasmonths{position:absolute;top:0;left:0;opacity:0;-o-transform:scale(.5);-moz-transform:scale(.5);-webkit-transform:scale(.5);transform:scale(.5);}
.calendar-date-holder .calendar-dates.left{margin-left:-260px}
.calendar-date-holder .calendar-dates.right{margin-left:260px}
.calendar-date-holder .calendar-dates.months{position:relative;opacity:1}
.calendar-date-holder .calendar-dates.months.load{position:absolute;top:0;left:0;opacity:0;-o-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);transform:scale(1.5);}
.calendar-date-holder .calendar-dates .cal-row{display:table-row}
.calendar-date-holder .calendar-dates .date{display:table-cell;width:14%;text-align:center;color:#0a0a0a;font-size: 17px;}
.calendar-date-holder .calendar-dates .date a{text-decoration:none;display:block;color:inherit;font-family: 'Noto Sans',sans-serif;padding: 3px;margin:1px;font-size: 16px;outline:none;border:2px solid transparent;transition:all .3s;-o-transition:all .3s;-moz-transition:all .3s;-webkit-transition:all .3s;}
.calendar-date-holder .calendar-dates .date.disabled a{cursor:not-allowed;color:#c8c8c8}
.calendar-date-holder .calendar-dates .date:not(.disabled):not(.selected) a:hover{background: #fff6d2; border: 1px solid #fff6d2;}
.calendar-date-holder .calendar-dates .date:not(.disabled):not(.selected) a:active{border-color:#323232}
.calendar-date-holder .calendar-dates .date.current a{color:#fff;font-weight:700}
.calendar-date-holder .calendar-dates .date.pm,.calendar-dates .date.nm{color:#bdbdbd}
.calendar-date-holder .calendar-dates .date.selected a{color:#000; font-weight: 600}
.calendar-date-holder .calendar-dates .date.month a{display:block;padding:24px 0}
.calendar-wrapper[data-theme='blue'] .calendar-head-card{background-color:#124aa4}
.calendar-wrapper[data-theme='blue'] .calendar-date-holder .calendar-dates .date.current a{color:#1976d2}
.calendar-wrapper[data-theme='blue'] .calendar-date-holder .calendar-dates .date.selected a{border-color: #f2b2d3;}
.calendar-wrapper[data-theme='blue'] .calendar-date-holder .calendar-dates .date.selected a:hover{border-color: #ba2458;background: #ffd7f3;}
.calendar-wrapper[data-theme='blue'] .calendar-date-holder .calendar-dates .date.selected.current a{color: #ba2458;}
.calendar-wrapper[data-theme='red'] .calendar-head-card{background-color:#c62828}
.calendar-wrapper[data-theme='red'] .calendar-date-holder .calendar-dates .date.current a{color:#d32f2f}
.calendar-wrapper[data-theme='red'] .calendar-date-holder .calendar-dates .date.selected a{border-color:#d32f2f}
.calendar-wrapper[data-theme='red'] .calendar-date-holder .calendar-dates .date.selected a:hover{border-color:#b71c1c}
.calendar-wrapper[data-theme='red'] .calendar-date-holder .calendar-dates .date.selected.current a{color:#d32f2f}
.calendar-wrapper[data-theme='purple'] .calendar-head-card{background-color:#6a1b9a}
.calendar-wrapper[data-theme='purple'] .calendar-date-holder .calendar-dates .date.current a{color:#7b1fa2}
.calendar-wrapper[data-theme='purple'] .calendar-date-holder .calendar-dates .date.selected a{border-color:#7b1fa2}
.calendar-wrapper[data-theme='purple'] .calendar-date-holder .calendar-dates .date.selected a:hover{border-color:#4a148c}
.calendar-wrapper[data-theme='purple'] .calendar-date-holder .calendar-dates .date.selected.current a{color:#7b1fa2}
.calendar-wrapper[data-theme='indigo'] .calendar-head-card{background-color:#283593}
.calendar-wrapper[data-theme='indigo'] .calendar-date-holder .calendar-dates .date.current a{color:#303f9f}
.calendar-wrapper[data-theme='indigo'] .calendar-date-holder .calendar-dates .date.selected a{border-color:#303f9f}
.calendar-wrapper[data-theme='indigo'] .calendar-date-holder .calendar-dates .date.selected a:hover{border-color:#1a237e}
.calendar-wrapper[data-theme='indigo'] .calendar-date-holder .calendar-dates .date.selected.current a{color:#303f9f}
.calendar-wrapper[data-theme='teal'] .calendar-head-card{background-color:#00695c}
.calendar-wrapper[data-theme='teal'] .calendar-date-holder .calendar-dates .date.current a{color:#00796b}
.calendar-wrapper[data-theme='teal'] .calendar-date-holder .calendar-dates .date.selected a{border-color:#00796b}
.calendar-wrapper[data-theme='teal'] .calendar-date-holder .calendar-dates .date.selected a:hover{border-color:#004d40}
.calendar-wrapper[data-theme='teal'] .calendar-date-holder .calendar-dates .date.selected.current a{color:#00796b}
.calendar-wrapper[data-theme='green'] .calendar-head-card{background-color:#2e7d32}
.calendar-wrapper[data-theme='green'] .calendar-date-holder .calendar-dates .date.current a{color:#388e3c}
.calendar-wrapper[data-theme='green'] .calendar-date-holder .calendar-dates .date.selected a{border-color:#388e3c}
.calendar-wrapper[data-theme='green'] .calendar-date-holder .calendar-dates .date.selected a:hover{border-color:#1b5e20}
.calendar-wrapper[data-theme='green'] .calendar-date-holder .calendar-dates .date.selected.current a{color:#388e3c}
body[datepicker-display='on']{overflow:hidden}
@media(max-width:767px){        .calendar-wrapper {
    width: 100%;
}}
@media (max-width: 350px) {.calendar-wrapper{max-width:100%}}