/* Material Design CSS for calendar.js, version: 2018-03-14 */ .calendar-box { display: none; width: 301px; background: #fff; position: absolute; z-index: 100; padding: 0; font-family: Roboto, sans-serif; box-shadow: 0 19px 60px rgba(0, 0, 0, .3), 0 15px 20px rgba(0, 0, 0, .22) } .calendar-box select { height: 36px; line-height: 36px; font-family: Roboto, sans-serif; font-size: 15px; text-transform: uppercase; font-weight: 500; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-outline: 0; -moz-outline: 0; outline: 0; padding: 0; color: white; background: transparent; border: 0; text-align: center; cursor: pointer; transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } .calendar-box select:hover { background: rgba(255, 255, 255, 0.3); } .calendar-box select:-moz-focusring { color: transparent; text-shadow: 0 0 0 white; } .calendar-box select.calendar-month { width: 90px; margin-right: 3px; } .calendar-box select.calendar-year { width: 70px; } .calendar-box .calendar-cancel { font-family: Roboto, sans-serif; font-size: 15px; border: 0; width: auto; margin: 10px; padding: 0 12px; float: right; text-decoration: none; color: inherit; text-transform: uppercase; height: 36px; background: transparent; text-align: center; line-height: 36px; cursor: pointer; transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } .calendar-box .calendar-cancel:hover { background: rgba(0, 0, 0, 0.14); } .calendar-box table { border-collapse: collapse; width: 100%; font-weight: normal; font-size: 13px; } .calendar-box td.months, .calendar-box td.years { width: 25%; text-align: center; box-sizing: border-box; padding: 0; vertical-align: top; } .calendar-box td.months a, .calendar-box td.years a { text-decoration: none; line-height: 42px; height: 43px; display: block; padding-right: 1px; box-sizing: border-box; color: #777; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } .calendar-box td.days { width: 43px; height: 43px; padding: 3px; box-sizing: border-box; text-align: center; } .calendar-box td.days a { text-decoration: none; line-height: 36px; height: 37px; width: 37px; display: block; padding-right: 1px; border-radius: 50%; box-sizing: border-box; color: #777; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } .calendar-box td a:hover { background: rgba(3, 169, 244, 0.3); } .calendar-box td.selected a { background: rgb(3, 169, 244); color: white; } .calendar-box td.days.today a { border: 1px solid rgb(3, 169, 244); } .calendar-box td.days.today a:hover { border: 1px solid transparent; } .calendar-box tr.header td { color: #aaa; text-transform: uppercase; width: 43px; height: 43px; box-sizing: border-box; text-align: center; } .calendar-box td { background: #f4f6f8; } .calendar-box td.future { color: #606060; } .calendar-box .calendar-title { text-align: center; white-space: nowrap; padding: 10px 56px; background: #03a9f4; font-weight: 500; font-size: 16px; line-height: 36px; color: white; position: relative; } .calendar-box .calendar-title a { display: inline-block; text-decoration: none; color: inherit; text-transform: uppercase; height: 36px; padding: 0 12px; transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } .calendar-box .calendar-title a:hover { background: rgba(255, 255, 255, 0.3); } .calendar-box .calendar-title a.prev { position: absolute; left: 10px; padding: 0; width: 36px; } .calendar-box .calendar-title a.next { position: absolute; right: 10px; padding: 0; width: 36px; } .calendar-box .calendar-title a.prev:after { content: "chevron_left"; } .calendar-box .calendar-title a.next:after { content: "chevron_right"; } .calendar-box .calendar-title a.prev:after, .calendar-box .calendar-title a.next:after { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; }