/**
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.com/pickadate.js/themes.htm#default
 */
/**
 * Colors used:
 *
 * #0089ec -> Base blue
 * #b1dcfb -> Hover blue bg
 *
 * #0059bc -> Dark blue for "today" tag
 * #aaa    -> Light grey for "today" tag if disabled
 *
 * #f5f5f5 -> Dimmed grey bg for disabled days
 * #ddd    -> Less dimmed grey for text in disabled & outfocus days
 *
 * #777    -> Grey for calendar border
 * #888    -> Slightly lighter grey for calendar top border
 *
 * #999    -> Medium grey used for year & weekday labels
 *
 * #e20    -> Red used for "clear" icon
 *
 * #000    -> Black
 * #fff    -> White
 *
 */
/**
 * When the calendar is open
 */
/* Prevent the page from scrolling */
/*body*/.pickadate__active { overflow: hidden; }
/* And add the "active" state to the input */
/*input*/.pickadate__input--active { border-color: #0089ec !important; }
/**
 * The holder that fills the entire screen
 */
.pickadate__holder { /* The base font-size */
    font-size: 16px; line-height: 1.2; color: #000; position: fixed; z-index: 10000; width: 100%; height: 100%; 
    /* Fade out the background, then immediately hide the holder */
    -webkit-transition: background .15s ease-out, top 0s .2s;
 -moz-transition: background .15s ease-out, top 0s .2s;
 transition: background .15s ease-out, top 0s .2s;
}
/**
 * The frame that bounds the calendar
 */
.pickadate__frame { min-width: 256px; max-width: 666px; width: 100%; margin: 0 auto; position: absolute; /* Allow the frame to be scrolled in case the screen is too small */
    overflow: auto; -webkit-overflow-scrolling: touch; 
    /* Animate the frame in and out of view */
    -webkit-transition: all .15s ease-out;
 -moz-transition: all .15s ease-out;
 transition: all .15s ease-out;
}
/**
 * Make the calendar holder and frame fullscreen
 */
.pickadate__holder, .pickadate__frame { top: 100%; bottom: 0; left: 0; right: 0; }
/**
 * When the calendar opens
 */
.pickadate__holder--opened { /* Show a translucent black background (order is important for IE) */
    background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)"; /* IE8 */  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000, endColorstr=#1E000000); /* IE6 & 7 */
zoom: 1; background: rgba(0, 0, 0, .32); /* Normal browsers */ 
    /* Animate in the background */
    -webkit-transition: background .15s ease-out;
 -moz-transition: background .15s ease-out;
 transition: background .15s ease-out;
}
/* Bring the holder and frame into view */
.pickadate__holder--opened, .pickadate__holder--opened .pickadate__frame { top: 0; }
/**
 * The calendar wrapper
 */
.pickadate__wrap { display: table; width: 100%; height: 100%; }
/**
 * The calendar itself
 */
.pickadate__calendar { display: table-cell; vertical-align: middle; background: #fff; padding: 1em; }
/**
 * The calendar table of dates
 */
.pickadate__table { text-align: center; border-collapse: collapse; border-spacing: 0; table-layout: fixed; font-size: inherit; width: 100%; margin-top: .5em; }
/* Remove browser stylings on a table cell */
.pickadate__table td { margin: 0; padding: 0; }
/**
 * The header containing the month and year tags/selectors
 */
.pickadate__header { text-align: center; position: relative; }
.pickadate__nav--prev, .pickadate__nav--next { position: absolute; top: -.1em; padding: .5em; margin: -.5em; text-align: center; min-width: 24px; height: 24px; line-height: 26px; }
.pickadate__nav--prev { left: 0; }
.pickadate__nav--next { right: 0; }
.pickadate__month, .pickadate__year { font-weight: 500; display: inline-block; }
.pickadate__year { color: #999; font-size: .8em; font-style: italic; margin-left: .5em; }
.pickadate__select--month, .pickadate__select--year { font-size: .8em; border: 1px solid #ccc; height: 2.5em; padding: .66em .25em; /* For firefox */ margin-top: -.5em; }
.pickadate__select--month { width: 35%; }
.pickadate__select--year { width: 22.5%; margin-left: .5em; }
.pickadate__select--month:focus, .pickadate__select--year:focus { border-color: #0089ec; }
/**
 * The weekday labels
 */
.pickadate__weekday { width: 14.285714286%; /* 100/7 */ font-size: .75em; padding-bottom: .25em; color: #999; font-weight: 500; }
/**
 * The days on the calendar
 */
.pickadate__day { padding: .33em 0 .25em; font-weight: 100; border: 1px solid #fff; margin-bottom: 1px; }
/**
 * The various states of a day
 */
.pickadate__day--today { color: #0089ec; position: relative; }
.pickadate__day--today:before { content: " "; position: absolute; top: 2px; right: 2px; width: 0; height: 0; border-top: .5em solid #0059bc; border-left: .5em solid transparent; }
.pickadate__day--selected, .pickadate__day--selected:hover { border-color: #0089ec; }
.pickadate__day--highlighted { background: #fff; }
.pickadate__day--disabled:before { border-top-color: #aaa; }
.pickadate__day--outfocus { color: #ddd; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; }
/**
 * The footer containing the "today" and "clear" buttons
 */
.pickadate__footer { text-align: center; margin: .25em 0 -.75em; }
.pickadate__button--today, .pickadate__button--clear { border: 1px solid #fff; background: #fff; font-size: .8em; padding: .66em 0; margin: 0 2.5%; font-weight: bold; width: 40%; }
.pickadate__button--today:before, .pickadate__button--clear:before { position: relative; display: inline-block; height: 0; }
.pickadate__button--today:before { content: " "; margin-right: .45em; top: -.05em; width: 0; border-top: .66em solid #0059bc; border-left: .66em solid transparent; }
.pickadate__button--clear:before { content: "\D7"; margin-right: .35em; top: -.1em; color: #e20; vertical-align: top; font-size: 1.1em; }
.pickadate__button--today:focus, .pickadate__button--clear:focus { background: #b1dcfb; border-color: #0089ec; outline: none; }
/**
 * The hover effect on any buttons
 */
.pickadate__day--infocus:hover, .pickadate__day--outfocus:hover, .pickadate__nav--prev:hover, .pickadate__nav--next:hover, .pickadate__button--today:hover, .pickadate__button--clear:hover { cursor: pointer; color: #000; background: #b1dcfb; }
.pickadate__day--disabled, .pickadate__day--disabled:hover { background: #f5f5f5; border-color: #f5f5f5; color: #ddd; cursor: default; }
.pickadate__day--highlighted:hover, .pickadate__holder--focused .pickadate__day--highlighted { background: #0089ec; color: #fff; }
/**
 * Adjust the calendar for not so tiny screens
 * by just increasing the font size a bit
 */
@media (min-height: 342px) {
 .pickadate__calendar {
 font-size: 1.25em;
}
}
/**
 * For bigger viewports, adjust the calendar
 * to not cover the entire screen
 */
@media (min-height: 424px) {
    /* Align the frame to the bottom, rather than top */
    .pickadate__frame {
 overflow: visible;
 top: auto;
 bottom: -100%;
}
 .pickadate__holder--opened .pickadate__frame {
 top: auto;
 bottom: 0;
}
    /* Remove the calendar middle-aligned styling */
    .pickadate__wrap,  .pickadate__calendar {
 display: block;
}
 .pickadate__calendar {
        /* Increase the font size a bit more */
        font-size: 1.33em;
        /* Add the borders except the bottom one */
        border: 1px solid #777;
 border-top-color: #888;
 border-bottom-width: 0;
        /* Make 'em rounded at the top corners */
        -webkit-border-radius: 6px 6px 0 0;
 -moz-border-radius: 6px 6px 0 0;
 border-radius: 6px 6px 0 0;
        /* And finally, add a nice shadow */
        -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, .24);
 -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, .24);
 box-shadow: 0 12px 36px 16px rgba(0, 0, 0, .24);
}
    /* Increase the spacing a tad */
    .pickadate__table {
 margin-top: .75em;
}
 .pickadate__weekday {
 padding-bottom: .5em;
}
 .pickadate__footer {
 margin: .5em 0 -.5em;
}
}
/**
 * For bigger monitors still, move it away
 * from the bottom edge of the screen
 * and round the top and bottom corners.
 */
@media (min-height: 542px) {
 .pickadate__frame {
 margin-bottom: 5%;
}
 .pickadate__calendar {
 font-size: 1.5em;
 border-bottom-width: 1px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}
}