/**


 * 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;


}


}