/* ==========================================================================   $BASE-PICKER   ========================================================================== *//* ==========================================================================   $VARIABLES   ========================================================================== *//** * Base colors *//** * Backgrounds *//** * Borders *//** * Buttons *//** * Picker base *//** * Date picker options *//** * Theme configurations *//* ==========================================================================   $MIXINS   ========================================================================== *//** * Common picker item states *//** * Opacity *//** * Vendor prefixes *//** * Note: the root picker element should __NOT__ be styled * more than what’s here. Style the `.picker__holder` instead. */.picker {    font-size: 16px;    text-align: left;    line-height: 1.2;    color: #333333;    position: absolute;    z-index: 10000;}/** * The picker input element. */.picker__input {    cursor: default;}/** * When the picker is opened, the input element is “activated”. */.picker__input.picker__input--active {    border-color: #4E5055;}/** * The holder is the only “scrollable” top-level container element. */.picker__holder {    width: 100%;    overflow-y: auto;    -webkit-overflow-scrolling: touch;}/*! * Default mobile-first, responsive styling for pickadate.js * Demo: http://amsul.github.io/pickadate.js/themes.htm#default *//* ==========================================================================   $VARIABLES   ========================================================================== *//** * Base colors *//** * Backgrounds *//** * Borders *//** * Buttons *//** * Picker base *//** * Date picker options *//** * Theme configurations *//* ==========================================================================   $MIXINS   ========================================================================== *//** * Common picker item states *//** * Opacity *//** * Vendor prefixes *//** * Make the holder and frame fullscreen. */.picker__holder,.picker__frame {    bottom: 0;    left: 0;    right: 0;    top: 100%;}/** * The holder should overlay the entire screen. */.picker__holder {    position: fixed;    -webkit-transition: background 0.15s ease-out, top 0s 0.15s;    -moz-transition: background 0.15s ease-out, top 0s 0.15s;    transition: background 0.15s ease-out, top 0s 0.15s;}/** * The frame that bounds the box contents of the picker. */.picker__frame {    position: absolute;    margin: 0 auto;    min-width: 256px;    max-width: 666px;    width: 100%;    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);    -moz-opacity: 0;    opacity: 0;    -webkit-transition: all 0.15s ease-out;    -moz-transition: all 0.15s ease-out;    transition: all 0.15s ease-out;}@media (min-height: 33.875em) {    .picker__frame {        overflow: visible;        top: auto;        bottom: -100%;        max-height: 80%;    }}@media (min-height: 40.125em) {    .picker__frame {        margin-bottom: 7.5% !important;    }}/** * The wrapper sets the stage to vertically align the box contents. */.picker__wrap {    display: table;    width: 100%;    height: 100%;}@media (min-height: 33.875em) {    .picker__wrap {        display: block;    }}/** * The box contains all the picker contents. */.picker__box {    background: #ffffff;    display: table-cell;    vertical-align: middle;}@media (min-height: 26.5em) {    .picker__box {        font-size: 1.25em;    }}@media (min-height: 33.875em) {    .picker__box {        display: block;        font-size: 1.33em;        border: 1px solid #777777;        border-top-color: #898989;        border-bottom-width: 0;        -webkit-border-radius: 5px 5px 0 0;        -moz-border-radius: 5px 5px 0 0;        border-radius: 5px 5px 0 0;        -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);        -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);        box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);    }}@media (min-height: 40.125em) {    .picker__box {        font-size: 1.5em;        border-bottom-width: 1px;        -webkit-border-radius: 5px;        -moz-border-radius: 5px;        border-radius: 5px;    }}/** * When the picker opens... */.picker--opened .picker__holder {    top: 0;    background: transparent;    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";    zoom: 1;    background: rgba(0, 0, 0, 0.32);    -webkit-transition: background 0.15s ease-out;    -moz-transition: background 0.15s ease-out;    transition: background 0.15s ease-out;}.picker--opened .picker__frame {    top: 0;    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";    filter: alpha(opacity=100);    -moz-opacity: 1;    opacity: 1;}@media (min-height: 33.875em) {    .picker--opened .picker__frame {        top: auto;        bottom: 0;    }}/** * For `large` screens, transform into an inline picker. *//* ==========================================================================   $BASE-DATE-PICKER   ========================================================================== *//* ==========================================================================   $VARIABLES   ========================================================================== *//** * Base colors *//** * Backgrounds *//** * Borders *//** * Buttons *//** * Picker base *//** * Date picker options *//** * Theme configurations *//* ==========================================================================   $MIXINS   ========================================================================== *//** * Common picker item states *//** * Opacity *//** * Vendor prefixes *//** * The picker box. */.picker__box {    padding: 0 1em;}/** * The header containing the month and year stuff. */.picker__header {    text-align: center !important;    position: relative;    margin-top: .75em;}/** * The month and year labels. */.picker__month,.picker__year {    font-weight: 500;    display: inline-block;    margin-left: .25em;    margin-right: .25em;}.picker__year {    color: #999999;    font-size: .8em;    font-style: italic;}/** * The month and year selectors. */select.picker__select--month,select.picker__select--year {    font-size: .8em;    border: 1px solid #b7b7b7;    margin-left: .25em;    margin-right: .25em !important;    margin-top: -0.5em;    float: none !important;    display: inline-block !important;}.picker__select--month {    width: 35% !important;}.picker__select--year {    width: 22.5% !important;}.picker__select--month:focus,.picker__select--year:focus {    border-color: #2ECC71;}/** * The month navigation buttons. */.picker__nav--prev,.picker__nav--next {    position: absolute;    top: -0.33em;    padding: .5em 1.33em;    width: 1em;    height: 1em;}.picker__nav--prev {    left: -1em;    padding-right: 1.5em;}.picker__nav--next {    right: -1em;    padding-left: 1.5em;}.picker__nav--prev:before,.picker__nav--next:before {    content: " ";    border-top: .5em solid transparent;    border-bottom: .5em solid transparent;    border-right: 0.75em solid #000000;    width: 0;    height: 0;    display: block;    margin: 0 auto;}.picker__nav--next:before {    border-right: 0;    border-left: 0.75em solid  #000000;}.picker__nav--prev:hover,.picker__nav--next:hover,.picker__nav--prev:focus,.picker__nav--next:focus {    cursor: pointer;    color: #fff;    background: #E5E5E5;}.picker__nav--disabled,.picker__nav--disabled:hover,.picker__nav--disabled:before,.picker__nav--disabled:before:hover {    cursor: default;    background: none;    border-right-color: #f5f5f5;    border-left-color: #f5f5f5;}/** * The calendar table of dates */.picker__table {    text-align: center;    border-collapse: collapse;    border-spacing: 0;    table-layout: fixed;    font-size: inherit;    width: 100%;    margin-top: .75em;    margin-bottom: .5em;}@media (min-height: 33.875em) {    .picker__table {        margin-bottom: .75em;    }}.picker__table thead th,.picker__table thead th:first-child,.picker__table thead th:last-child {    text-align: center;    border: none;    background: none;    border-radius: none;    -moz-border-radius: none;}.picker__table td {    text-align: center;    margin: 0;    padding: 0;    border: none;}/** * The weekday labels */.picker__weekday {    width: 14.285714286%;    font-size: .75em;    padding-bottom: .25em;    color: #999999;    font-weight: 500;    /* Increase the spacing a tad */}@media (min-height: 33.875em) {    .picker__weekday {        padding-bottom: .5em;    }}/** * The days on the calendar */.picker__day {    padding: .3125em 0;    font-weight: 200;    border: 1px solid transparent;}.picker__day--today {    color: #419A1E;    position: relative;}.picker__day--today:before {    content: " ";    position: absolute;    top: 2px;    right: 2px;    width: 0;    height: 0;    border-top: 0.5em solid #419A1E;    border-left: .5em solid transparent;}.picker__day--selected,.picker__day--selected:hover {    border-color: #4E5055;}.picker__day--highlighted {    background: #4E5055;    color: #ffffff;}.picker__day--disabled:before {    border-top-color: #aaaaaa;}.picker__day--outfocus {    color: #dddddd;    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=66)";    filter: alpha(opacity=66);    -moz-opacity: 0.66;    opacity: 0.66;}.picker__day--infocus:hover,.picker__day--outfocus:hover {    cursor: pointer;    background: #E5E5E5;}.picker__day--highlighted:hover,.picker--focused .picker__day--highlighted {    background: #4E5055;    color: #ffffff;}.picker__day--disabled,.picker__day--disabled:hover {    background: #f5f5f5;    border-color: #f5f5f5;    color: #dddddd;    cursor: default;}.picker__day--highlighted.picker__day--disabled,.picker__day--highlighted.picker__day--disabled:hover {    background: #bbbbbb;}/** * The footer containing the "today" and "clear" buttons. */.picker__footer {    text-align: center;}.picker__button--today,.picker__button--clear,.picker__button--close {    border: 1px solid #ffffff;    background: #ffffff;    font-size: .8em;    padding: .66em 0;    font-weight: bold;    width: 50%;    display: inline-block;    vertical-align: bottom;}.picker__button--today:hover,.picker__button--clear:hover,.picker__button--close:hover {    cursor: pointer;    background: #E5E5E5;    border-bottom-color: #E5E5E5;}.picker__button--today:focus,.picker__button--clear:focus,.picker__button--close:hover {    background: #E5E5E5;    border-color: #E5E5E5;    color: #fff;    outline: none;}.picker__button--today:before,.picker__button--clear:before {    position: relative;    display: inline-block;    height: 0;}.picker__button--today:before {    content: " ";    margin-right: .45em;    top: -0.05em;    width: 0;    border-top: 0.66em solid #419A1E;    border-left: .66em solid transparent;}.picker__button--clear:before {    content: "\D7";    margin-right: .35em;    top: -0.1em;    color: #ee2200;    vertical-align: top;    font-size: 1.1em;}/* ==========================================================================   $DEFAULT-DATE-PICKER   ========================================================================== *//* ==========================================================================   $VARIABLES   ========================================================================== *//** * Base colors *//** * Backgrounds *//** * Borders *//** * Buttons *//** * Picker base *//** * Date picker options *//** * Theme configurations *//* ==========================================================================   $MIXINS   ========================================================================== *//** * Common picker item states *//** * Opacity *//** * Vendor prefixes */