/* style.scss */ /** * Variables */ /** * Mobile & Desktop Common Styles */ .calentim-container, .calentim-container-mobile { font-size: 15px; float: left; font-family: "proxima-nova", "Avenir Next", "Roboto", "Helvetica Nue", Helvetica, Arial, sans-serif; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 9999; -webkit-font-smoothing: antialiased; font-kerning: normal; -webkit-font-kerning: normal; -webkit-text-size-adjust: 100%; } .calentim-container:focus, .calentim-container-mobile:focus { box-shadow: none; outline: none; } .calentim-container .calentim-input, .calentim-container-mobile .calentim-input { margin: 5px; border: 1px solid #ddd; overflow: hidden; background: white; box-shadow: 0px 0px 13px -5px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; } .calentim-container .calentim-input.calentim-input-vertical-range, .calentim-container-mobile .calentim-input.calentim-input-vertical-range { flex-direction: row; } .calentim-container .calentim-input.calentim-input-vertical-range .calentim-left, .calentim-container-mobile .calentim-input.calentim-input-vertical-range .calentim-left { border-right: 1px solid #ddd; } .calentim-container .calentim-input.calentim-input-vertical-range .calentim-right, .calentim-container-mobile .calentim-input.calentim-input-vertical-range .calentim-right { background: #fff; position: relative; display: flex; flex-direction: column; flex: 1; } .calentim-container .calentim-input.calentim-input-vertical-range .calentim-right .calentim-ranges, .calentim-container-mobile .calentim-input.calentim-input-vertical-range .calentim-right .calentim-ranges { border-top: none; display: flex; flex-direction: column; padding: 0; padding-bottom: 24px; overflow-y: auto; overflow-x: hidden; flex: 1; } .calentim-container .calentim-input.calentim-input-vertical-range .calentim-right .calentim-ranges .calentim-range-header-container, .calentim-container-mobile .calentim-input.calentim-input-vertical-range .calentim-right .calentim-ranges .calentim-range-header-container { padding: 8px 12px; } .calentim-container .calentim-input.calentim-input-vertical-range .calentim-right .calentim-ranges .calentim-range, .calentim-container-mobile .calentim-input.calentim-input-vertical-range .calentim-right .calentim-ranges .calentim-range { flex: 0; padding: 8px 12px; margin: 3px 6px; background: ghostwhite; border: 1px solid #ddd; border-radius: 3px; } .calentim-container .calentim-input.calentim-input-vertical-range .calentim-right .calentim-ranges .calentim-range.calentim-range-selected, .calentim-container-mobile .calentim-input.calentim-input-vertical-range .calentim-right .calentim-ranges .calentim-range.calentim-range-selected { background: #e65665; color: white; } .calentim-container .calentim-input.calentim-input-vertical-range .calentim-right .calentim-footer, .calentim-container-mobile .calentim-input.calentim-input-vertical-range .calentim-right .calentim-footer { border-top: 1px solid #ddd; flex: 0; } .calentim-container .calentim-input .calentim-header, .calentim-container-mobile .calentim-input .calentim-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px 20px 10px 20px; border-bottom: 1px solid #ddd; } .calentim-container .calentim-input .calentim-header .calentim-header-separator, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-separator { float: left; display: block; margin: 0; margin-top: -2px; padding: 0 16px; color: aliceblue; font-size: 32px; } .calentim-container .calentim-input .calentim-header .calentim-header-start, .calentim-container .calentim-input .calentim-header .calentim-header-end, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end { float: left; white-space: nowrap; display: block; margin-right: 10px; text-align: left; } .calentim-container .calentim-input .calentim-header .calentim-header-start .calentim-header-start-day, .calentim-container .calentim-input .calentim-header .calentim-header-start .calentim-header-end-day, .calentim-container .calentim-input .calentim-header .calentim-header-end .calentim-header-start-day, .calentim-container .calentim-input .calentim-header .calentim-header-end .calentim-header-end-day, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-start-day, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-end-day, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-start-day, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-end-day { float: left; font-size: 2.5em; color: #e65665; margin-top: -10px; margin-right: 8px; font-weight: 100; text-align: left; } .calentim-container .calentim-input .calentim-header .calentim-header-start .calentim-header-start-date, .calentim-container .calentim-input .calentim-header .calentim-header-start .calentim-header-end-date, .calentim-container .calentim-input .calentim-header .calentim-header-end .calentim-header-start-date, .calentim-container .calentim-input .calentim-header .calentim-header-end .calentim-header-end-date, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-start-date, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-end-date, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-start-date, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-end-date { font-size: 0.9em; color: #A6AAB3; display: inline-block; } .calentim-container .calentim-input .calentim-header .calentim-header-start .calentim-header-start-weekday, .calentim-container .calentim-input .calentim-header .calentim-header-start .calentim-header-end-weekday, .calentim-container .calentim-input .calentim-header .calentim-header-end .calentim-header-start-weekday, .calentim-container .calentim-input .calentim-header .calentim-header-end .calentim-header-end-weekday, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-start-weekday, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-end-weekday, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-start-weekday, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-end-weekday { font-size: 0.7em; color: #c9c9d1; } .calentim-container .calentim-input .calentim-calendars, .calentim-container-mobile .calentim-input .calentim-calendars { position: relative; display: flex; box-sizing: border-box; } .calentim-container .calentim-input .calentim-calendars .calentim-month-selector, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector { position: absolute; display: none; border: 0px solid #fff; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; } .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ms-month, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ms-month, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ms-month, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ms-month { background: #eee; height: 33.33%; width: 25%; font-weight: bold; display: flex; align-items: center; justify-content: center; box-sizing: border-box; float: left; outline: 1px solid #ddd; word-break: break-word; word-wrap: break-word; text-transform: capitalize; } .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ms-month.current, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ms-month.current, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ms-month.current, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ms-month.current { background: #e65665; color: white; } .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ms-month:hover, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ms-month:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ms-month:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ms-month:hover { background: #ed828d; cursor: pointer; color: white; } .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year, .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-next, .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-prev, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-next, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-prev, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-next, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-prev, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-next, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-prev { margin: 0px; background: #eee; height: 33.33%; width: 20%; align-items: center; justify-content: center; font-weight: bold; display: flex; float: left; box-sizing: border-box; outline: 1px solid #ddd; text-transform: uppercase; word-wrap: break-word; word-break: break-all; } .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year.current, .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-next.current, .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-prev.current, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year.current, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-next.current, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-prev.current, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year.current, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-next.current, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-prev.current, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year.current, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-next.current, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-prev.current { background: #e65665; color: white; } .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year:hover, .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-next:hover, .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-prev:hover, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year:hover, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-next:hover, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-prev:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-next:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-prev:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-next:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-prev:hover { background: #ed828d; cursor: pointer; color: white; } .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-next, .calentim-container .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-prev, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-next, .calentim-container .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-prev, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-next, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year-prev, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-next, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year-prev { font-size: 2.65em; background: white; color: #e65665; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar { flex: 1; float: left; border-right: 1px solid #ddd; box-sizing: border-box; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar.no-border-right, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar.no-border-right { border-right: none; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-dayofweek, .calentim-container .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-day, .calentim-container .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-disabled, .calentim-container .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-weeknumber, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-dayofweek, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-day, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-disabled, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-weeknumber { width: calc(100% / 8); } @media all and (-ms-high-contrast: none) { .calentim-container .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-dayofweek, .calentim-container .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-day, .calentim-container .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-disabled, .calentim-container .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-weeknumber, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-dayofweek, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-day, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-disabled, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar.calentim-calendar-weeknumbers .calentim-days-container .calentim-weeknumber { width: calc((100% / 8) - 1px); } } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title { text-align: center; font-weight: 300; flex: 0; color: #424242; text-transform: capitalize; border-bottom: none; padding: 6px 12px; display: flex; align-items: center; justify-content: space-between; font-size: 1.2em; margin-bottom: 10px; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-prev, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-next, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-prev, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-next { font-size: 1em; cursor: hand; cursor: pointer; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-prev i, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-next i, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-prev i, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-next i { cursor: pointer; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-prev i:hover, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-next i:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-prev i:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-next i:hover { text-shadow: 1px 2px 3px #eee; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-prev, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-prev { float: left; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title span { flex: 1; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title span .calentim-month-switch:hover, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title span .calentim-year-switch:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title span .calentim-month-switch:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title span .calentim-year-switch:hover { color: #ed828d; cursor: hand; cursor: pointer; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-next, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title .calentim-next { float: right; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container { display: flex; flex-wrap: wrap; flex-direction: row; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-dayofweek, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-weeknumber, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-dayofweek, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-weeknumber { width: calc(100% / 7); text-align: center; padding: 3px; font-size: .76em; font-weight: 600; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; border: 1px solid #eee; border-width: 1px 0 0 1px; } @media all and (-ms-high-contrast: none) { .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-dayofweek, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-weeknumber, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-dayofweek, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-weeknumber { width: calc((100% / 7) - 1px); } } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-dayofweek span, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day span, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled span, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-weeknumber span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-dayofweek span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-weeknumber span { pointer-events: none; display: block; padding: 3px 3px 3px 4px; border-radius: 4px; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-dayofweek, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-dayofweek { text-transform: uppercase; font-size: 0.6em; font-weight: 600; color: #454647; border: none; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-weeknumber, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-weeknumber { background-color: ghostwhite; color: #212121; border-right: 1px solid #ddd; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day { cursor: pointer; overflow: hidden; color: #212121; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; box-sizing: border-box; transition: background-color .1s ease-out; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-disabled-open, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-disabled-open { cursor: default; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-start, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-end, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-start, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-end { background: #ed828d; color: white; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-disabled, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-start.calentim-disabled, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-end.calentim-disabled, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-disabled, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-start.calentim-disabled, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-end.calentim-disabled { background: rgba(230, 86, 101, 0.7); color: #e4e5e6; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-disabled.calentim-not-in-month, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-start.calentim-disabled.calentim-not-in-month, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-end.calentim-disabled.calentim-not-in-month, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-disabled.calentim-not-in-month, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-start.calentim-disabled.calentim-not-in-month, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-end.calentim-disabled.calentim-not-in-month { color: #fff; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-disabled span, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-start.calentim-disabled span, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-end.calentim-disabled span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-disabled span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-start.calentim-disabled span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-end.calentim-disabled span { background: transparent !important; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-start, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-start { background: #e65665; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-start span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-start span { background: #e65665; border-radius: 4px; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-end, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-end { background: #e65665; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-end span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-selected.calentim-end span { background: #e65665; border-radius: 4px; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-hovered:not(.calentim-selected), .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-hovered:not(.calentim-selected) { background-color: #c8e1ff; color: black; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-hovered:not(.calentim-selected) span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-hovered:not(.calentim-selected) span { background-color: #c8e1ff; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-hovered:not(.calentim-selected).calentim-disabled, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-hovered:not(.calentim-selected).calentim-disabled { opacity: .66; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-today, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-today { color: #e65665; font-weight: bold; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-today.calentim-hovered, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-today.calentim-hovered { color: black; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-today.calentim-selected, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day.calentim-today.calentim-selected { color: white; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day:hover:not(.calentim-hovered):not(.calentim-selected), .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day:hover:not(.calentim-hovered):not(.calentim-selected) { background: gainsboro; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled.calentim-disabled-range, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled.calentim-disabled-range { color: #e4e5e6; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled.calentim-disabled-range.calentim-not-in-month, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled.calentim-disabled-range.calentim-not-in-month { background: #f5f6f7; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled:not(.calentim-not-in-month), .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled:not(.calentim-not-in-month) { background: #f5f6f7; color: #e4e5e6; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled:not(.calentim-day), .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled:not(.calentim-day) { background: #f5f6f7; color: #e4e5e6; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-weekend, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-weekend { color: #212121; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-next, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-prev, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-next, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-prev { cursor: pointer; font-size: 1.25em; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-next:hover, .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-prev:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-next:hover, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-prev:hover { text-shadow: 1px 2px 3px #eee; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-next, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-next { float: right; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar .calentim-prev, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-prev { float: left; } .calentim-container .calentim-input .calentim-calendars .calentim-calendar:last-child, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar:last-child { border-right: none; } .calentim-container .calentim-input .calentim-timepickers, .calentim-container-mobile .calentim-input .calentim-timepickers { border-top: 1px solid #ddd; text-align: left; display: flex; flex-direction: row; background: ghostwhite; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker { box-sizing: border-box; padding: 6px 5px; flex: 1 0 auto; display: flex; flex-direction: row; border-right: 1px solid #ddd; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker:last-child, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker:last-child { border-right: none; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-hour-minute-seperator, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-hour-minute-seperator { display: flex; color: #e65665; font-size: 1.8em; font-weight: bold; align-items: center; justify-content: center; margin: 0 .1em; margin-top: -2px; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm { display: flex; flex-direction: column; margin-left: 5px; font-size: 0.7em; font-weight: bold; color: #6a6e71; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-timepicker-ampm-am, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-timepicker-ampm-am { flex: 1; border: 1px solid #ddd; border-radius: 4px 4px 0 0; background: white; border-bottom: none; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-timepicker-ampm-am:hover, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-timepicker-ampm-am:hover { cursor: pointer; cursor: hand; background: #f8f8ff; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-timepicker-ampm-pm, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-timepicker-ampm-pm { flex: 1; border: 1px solid #ddd; border-radius: 0 0 4px 4px; background: white; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-timepicker-ampm-pm:hover, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-timepicker-ampm-pm:hover { cursor: pointer; cursor: hand; background: #f8f8ff; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-ampm-selected, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-ampm-selected { background: #e65665; border-color: #e65665; color: white; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-ampm-selected:hover, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-ampm .calentim-ampm-selected:hover { background: #e65665; color: white; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper { flex: 1; display: flex; flex-direction: column; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper .calentim-timepicker-hours, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper .calentim-timepicker-hours { flex-wrap: nowrap; display: flex; flex-direction: column; position: relative; padding: 0; margin: 0; line-height: 1.4em; height: 4.2em; box-sizing: border-box; color: #ddd; border-radius: 4px 0 0 4px; border: 1px solid #ddd; border-right: none; text-align: center; background: white; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper .calentim-timepicker-hours .calentim-hour-selected-prev, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper .calentim-timepicker-hours .calentim-hour-selected-prev { transform: perspective(4em) rotateX(30deg); color: #424242; opacity: .5; transform-origin: bottom; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper .calentim-timepicker-hours .calentim-hour-selected, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper .calentim-timepicker-hours .calentim-hour-selected { color: #424242; font-size: 1.5em; font-weight: bold; background: #fff; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper .calentim-timepicker-hours .calentim-hour-selected-next, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper .calentim-timepicker-hours .calentim-hour-selected-next { transform: perspective(4em) rotateX(-30deg); color: #424242; opacity: .5; transform-origin: top; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper { flex: 1; display: flex; flex-direction: column; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper .calentim-timepicker-minutes, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper .calentim-timepicker-minutes { flex-wrap: nowrap; display: flex; flex-direction: column; position: relative; line-height: 1.4em; height: 4.2em; padding: 0; margin: 0; box-sizing: border-box; color: #ddd; background: white; border-radius: 4px 0 0 4px; border: 1px solid #ddd; border-right: none; text-align: center; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper .calentim-timepicker-minutes .calentim-minute-selected-prev, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper .calentim-timepicker-minutes .calentim-minute-selected-prev { transform: perspective(4em) rotateX(30deg); color: #424242; opacity: .5; transform-origin: bottom; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper .calentim-timepicker-minutes .calentim-minute-selected, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper .calentim-timepicker-minutes .calentim-minute-selected { color: #424242; font-size: 1.5em; font-weight: bold; background: #fff; box-shadow: inset 0 0 10px 100px white; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper .calentim-timepicker-minutes .calentim-minute-selected-next, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper .calentim-timepicker-minutes .calentim-minute-selected-next { transform: perspective(4em) rotateX(-30deg); color: #424242; opacity: .5; transform-origin: top; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows, .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows { display: flex; flex-direction: column; align-items: center; justify-content: center; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows .calentim-timepicker-hours-up, .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows .calentim-timepicker-minutes-up, .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows .calentim-timepicker-hours-up, .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows .calentim-timepicker-minutes-up, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows .calentim-timepicker-hours-up, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows .calentim-timepicker-minutes-up, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows .calentim-timepicker-hours-up, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows .calentim-timepicker-minutes-up { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px; background: white; border: 1px solid #ddd; background: white; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows .calentim-timepicker-hours-down, .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows .calentim-timepicker-minutes-down, .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows .calentim-timepicker-hours-down, .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows .calentim-timepicker-minutes-down, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows .calentim-timepicker-hours-down, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows .calentim-timepicker-minutes-down, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows .calentim-timepicker-hours-down, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows .calentim-timepicker-minutes-down { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px; background: white; border: 1px solid #ddd; background: white; border-top: none; } .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows > div:hover, .calentim-container .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows > div:hover, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows > div:hover, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows > div:hover { background: whitesmoke; cursor: pointer; cursor: hand; } .calentim-container .calentim-input .calentim-ranges, .calentim-container-mobile .calentim-input .calentim-ranges { border-top: 1px solid #ddd; clear: both; padding: 10px; text-align: left; } .calentim-container .calentim-input .calentim-ranges i, .calentim-container-mobile .calentim-input .calentim-ranges i { float: left; color: #6a6e71; font-size: 14px; margin-right: 5px; margin-top: 1px; } .calentim-container .calentim-input .calentim-ranges .calentim-range-header, .calentim-container-mobile .calentim-input .calentim-ranges .calentim-range-header { font-size: 0.8em; color: #6a6e71; display: inline-block; margin-right: 5px; font-weight: bold; } .calentim-container .calentim-input .calentim-ranges .calentim-range, .calentim-container-mobile .calentim-input .calentim-ranges .calentim-range { display: inline-block; color: #ed828d; margin: 3px; font-size: 0.7em; cursor: pointer; font-weight: bold; } .calentim-container .calentim-input .calentim-ranges .calentim-range:hover, .calentim-container-mobile .calentim-input .calentim-ranges .calentim-range:hover { text-decoration: underline; } .calentim-container .calentim-input .calentim-ranges .calentim-range.calentim-range-selected, .calentim-container-mobile .calentim-input .calentim-ranges .calentim-range.calentim-range-selected { color: #f03a47; } .calentim-container .calentim-input .calentim-ranges .calentim-range.calentim-range-selected:hover, .calentim-container-mobile .calentim-input .calentim-ranges .calentim-range.calentim-range-selected:hover { text-decoration: none; } .calentim-container.calentim-hidden-calendar .calentim-input .calentim-timepickers { border-top: none; } .calentim-container.calentim-hidden-calendar .calentim-box-arrow-top:after { border-bottom-color: ghostwhite; } .calentim-container .calentim-input .calentim-footer { text-align: right; } .calentim-container .calentim-input .calentim-footer .calentim-apply { background: #ed828d; border: none; padding: 6px 18px; color: white; font-family: "proxima-nova", "Avenir Next", "Roboto", "Helvetica Nue", Helvetica, Arial, sans-serif; font-size: 12px; margin: 6px; border-radius: 3px; } .calentim-container .calentim-input .calentim-footer .calentim-apply:disabled { background: #c9c9d1; color: gray; } .calentim-container .calentim-input .calentim-footer .calentim-cancel { background: #c9c9d1; border: none; padding: 6px 18px; color: #6a6e71; margin: 6px; font-family: "proxima-nova", "Avenir Next", "Roboto", "Helvetica Nue", Helvetica, Arial, sans-serif; font-size: 12px; margin-right: 0px; border-radius: 3px; } /** * Mobile styles */ .calentim-container-mobile.calentim-hidden-calendar .calentim-input .calentim-timepickers { max-width: 100%; border-bottom: none; border-top: none; } .calentim-container-mobile.calentim-hidden-calendar .calentim-input .calentim-footer { width: 100%; background: white; } .calentim-container-mobile .calentim-input { margin: 0; border: 0; border-radius: 0; position: fixed; bottom: 0; right: 0; left: 0; z-index: 9999; margin: 6px; border-radius: 6px; box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5); border: 1px solid #ddd; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-content: center; overflow-y: hidden; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input { bottom: 0; overflow-y: hidden; flex-wrap: wrap; } } .calentim-container-mobile .calentim-input .calentim-header { box-sizing: border-box; padding: 12px; order: 0; display: flex; flex: 0 0 auto; flex-flow: nowrap; background: ghostwhite; justify-content: space-between; align-items: center; font-size: 1em; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-header { width: 50%; float: right; order: 2; padding: 6px 8px 7px 8px; border-left: 1px solid #ddd; font-size: .857em; } } .calentim-container-mobile .calentim-input .calentim-header .calentim-header-separator { padding: 0; margin: 0; display: flex; color: lightsteelblue; margin-top: 2px; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-header .calentim-header-separator { flex: 1 0 auto; } } .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end { margin: 0; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end { width: 50%; min-width: 0; padding: 0 0px; } } .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-start-day, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-end-day, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-start-day, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-end-day { font-size: 2.8em; margin: -10px; font-weight: 400; } .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-start-date, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-end-date, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-start-date, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-end-date { font-size: 1em; color: #424242; font-weight: 500; } .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-start-weekday, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-end-weekday, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-start-weekday, .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-end-weekday { font-size: 0.8em; color: #424242; font-weight: 400; line-height: 10px; } .calentim-container-mobile .calentim-input .calentim-header .calentim-header-start .calentim-header-start-day { margin-right: 8px; margin-left: 0; float: left; } .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end { text-align: right; } .calentim-container-mobile .calentim-input .calentim-header .calentim-header-end .calentim-header-end-day { float: right; margin-left: 8px; margin-right: 0; } .calentim-container-mobile .calentim-input .calentim-calendars { order: 2; flex: 1 1 auto; background: white; display: flex; flex-direction: column; overflow: scroll; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-calendars { width: 50%; order: 0; } } .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector { border-bottom: 1px solid #ddd; } .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ms-month, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ms-month { flex: 1 1 33.33%; height: 25%; } .calentim-container-mobile .calentim-input .calentim-calendars .calentim-month-selector .calentim-ys-year, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-year-selector .calentim-ys-year { flex: 1 1 20%; height: 33.33%; } .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar { border-right: none; display: block; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar { border: none; } } .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar:first-child .calentim-title { border-top: none; } .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title { background: ghostwhite; align-items: center; font-size: 1.25em; justify-content: space-between; display: flex; border-top: 1px solid #ddd; color: #424242; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-title { box-sizing: border-box; padding: 8px; } } .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container { padding: 10px 4px; } .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-dayofweek, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled { min-height: calc((100% - 48px) / 8); font-size: 0.8572em; position: relative; justify-content: center; align-items: stretch; display: flex; } .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-dayofweek span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-day span, .calentim-container-mobile .calentim-input .calentim-calendars .calentim-calendar .calentim-days-container .calentim-disabled span { flex: 1; align-items: center; justify-content: center; display: flex; } .calentim-container-mobile .calentim-input .calentim-ranges { background: white; order: 2; flex: 1 0 auto; align-items: flex-end; margin: 0px; padding: 4px; border: none; text-align: center; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-ranges { width: 50%; box-sizing: border-box; flex: 1 1 0; border-left: 1px solid #ddd; overflow-y: scroll; min-height: 50px; } } .calentim-container-mobile .calentim-input .calentim-ranges i { font-size: 20px; display: none; } .calentim-container-mobile .calentim-input .calentim-ranges .calentim-range-header { font-size: 0.9em; display: none; } .calentim-container-mobile .calentim-input .calentim-ranges .calentim-range { font-size: 0.85em; padding: 4px 8px; background: #e65665; font-weight: 400; color: white; border-radius: 21px; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-ranges .calentim-range { border-radius: 6px; display: block; margin: 4px; } } .calentim-container-mobile .calentim-input .calentim-filler { display: none; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-filler { display: block; box-sizing: border-box; flex-grow: 1; margin-bottom: auto; border-left: 1px solid #ddd; min-height: 100px; order: 3; } } .calentim-container-mobile .calentim-input .calentim-ranges + .calentim-filler { display: none; } .calentim-container-mobile .calentim-input .calentim-footer { order: 3; flex: 0 0 auto; text-align: center; padding: 6px 6px 7px 6px; background: ghostwhite; border-top: 1px solid #ddd; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-footer { width: 50%; box-sizing: border-box; border-left: 1px solid #ddd; margin-top: auto; } } .calentim-container-mobile .calentim-input .calentim-footer button { font-size: 15px; font-family: "proxima-nova", "Avenir Next", "Roboto", "Helvetica Nue", Helvetica, Arial, sans-serif; padding: 4px; font-weight: 400; outline: none; border: none; border-radius: 4px; width: calc((100% - 10px)/2); } .calentim-container-mobile .calentim-input .calentim-footer button.calentim-apply { background: #f03a47; color: white; margin-left: 7px; font-weight: 500; border: 1px solid #f03a47; } .calentim-container-mobile .calentim-input .calentim-footer button.calentim-apply[disabled=disabled], .calentim-container-mobile .calentim-input .calentim-footer button.calentim-apply:disabled { background: #c9c9d1; color: #A6AAB3; border: 1px solid #A6AAB3; } .calentim-container-mobile .calentim-input .calentim-footer button.calentim-cancel { background: transparent; color: #f03a47; border: 1px solid #f03a47; box-sizing: border-box; } .calentim-container-mobile .calentim-input .calentim-timepickers { order: 2; flex: 0 0 auto; background: ghostwhite; font-size: 1em; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-timepickers { border-top: none; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; font-size: 1.125em; order: 2; } } .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-hour-minute-seperator { margin-top: 0px; color: #6a6e71; font-size: 1.8em; font-weight: bold; } @media screen and (orientation: landscape) { .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-hour-minute-seperator { margin-top: 0px; font-size: 1.4em; } } .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper .calentim-timepicker-hours { font-size: 21px; border: 1px solid #ddd; border-radius: 3px; /*background: linear-gradient(to bottom, #e8e8ef 0%, #fff 45%, #d8d8df 100%); box-shadow: inset 0 2px 10px 1px #424242;*/ } .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hours-wrapper .calentim-timepicker-hours .calentim-hour-selected { background: whitesmoke; border-radius: 2px; box-shadow: none; border: 1px solid #ddd; margin: 0 2px; } .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper .calentim-timepicker-minutes { font-size: 21px; border: 1px solid #ddd; border-radius: 3px; /*box-shadow: inset 0 2px 10px 1px #424242; background: linear-gradient(to bottom, #e8e8ef 0%, #fff 45%, #d8d8df 100% );*/ } .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minutes-wrapper .calentim-timepicker-minutes .calentim-minute-selected { background: whitesmoke; border-radius: 2px; box-shadow: none; border: 1px solid #ddd; margin: 0 2px; } .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-hour-arrows, .calentim-container-mobile .calentim-input .calentim-timepickers .calentim-timepicker .calentim-timepicker-minute-arrows { display: none; } .calentim-container-mobile.calentim-inline { box-sizing: border-box; } .calentim-container-mobile.calentim-inline .calentim-input { position: static; box-shadow: none; box-sizing: border-box; } .calentim-container-mobile.calentim-inline .calentim-input .calentim-footer { display: none !important; } .calentim-container-mobile.calentim-inline .calentim-input.calentim-hidden-calendar .calentim-timepickers { max-width: 100%; border-top-width: 0 !important; } @media screen and (orientation: landscape) { .calentim-container-mobile.calentim-inline .calentim-input { flex-direction: column; flex-wrap: wrap; } .calentim-container-mobile.calentim-inline .calentim-input .calentim-calendars { order: 0; flex: 1 0 auto; width: calc(50% - 1px); border-left: none; border-right: 1px solid #ddd; } .calentim-container-mobile.calentim-inline .calentim-input .calentim-header { order: 1; flex: 0 1 auto; width: calc(50% - 1px); border-left: none; border-right: 1px solid #ddd; border-bottom: none; } .calentim-container-mobile.calentim-inline .calentim-input .calentim-timepickers { order: 2; flex: 0 0 auto; max-width: 50%; border-left: none; } .calentim-container-mobile.calentim-inline .calentim-input .calentim-timepickers .calentim-timepicker-ampm { width: 7vmin; } .calentim-container-mobile.calentim-inline .calentim-input .calentim-ranges { order: 3; flex: 0 1 auto; width: 50%; border-left: none; } } .calentim-open { overflow: hidden; } .calentim-no-anim { transition: all 0s ease !important; } .calentim-popup { position: absolute; display: none; top: 0; left: 0; margin-top: -10px; } .calentim-box-arrow-top { width: 22px; height: 22px; z-index: 12; margin-left: 0; position: absolute; top: 0px; } .calentim-box-arrow-top:after, .calentim-box-arrow-top:before { bottom: calc(100% - 6px); left: 27px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .calentim-box-arrow-top:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 10px; margin-left: -10px; } .calentim-box-arrow-top:before { border-color: rgba(184, 184, 184, 0); border-bottom-color: #ddd; border-width: 11px; margin-left: -11px; } .calentim-box-arrow-bottom { width: 22px; height: 22px; z-index: 12; margin-left: 0; position: absolute; bottom: 0px; } .calentim-box-arrow-bottom:after, .calentim-box-arrow-bottom:before { bottom: -15px; left: 27px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .calentim-box-arrow-bottom:after { border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width: 11px; margin-left: -11px; } .calentim-box-arrow-bottom:before { border-color: rgba(184, 184, 184, 0); border-top-color: #ddd; border-width: 10px; margin-left: -10px; } .calentim-box-arrow-left { width: 22px; height: 22px; z-index: 12; margin-top: -11px; position: absolute; left: 0px; } .calentim-box-arrow-left:after, .calentim-box-arrow-left:before { left: -15px; top: 27px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .calentim-box-arrow-left:after { border-color: rgba(255, 255, 255, 0); border-right-color: #ffffff; border-width: 11px; margin-right: -11px; } .calentim-box-arrow-left:before { border-color: rgba(184, 184, 184, 0); border-right-color: #ddd; border-width: 10px; margin-right: -10px; } .calentim-box-arrow-right { width: 22px; height: 22px; z-index: 12; margin-top: -11px; position: absolute; right: 0px; } .calentim-box-arrow-right:after, .calentim-box-arrow-right:before { right: -15px; top: 27px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .calentim-box-arrow-right:after { border-color: rgba(255, 255, 255, 0); border-left-color: #ffffff; border-width: 11px; margin-left: -11px; } .calentim-box-arrow-right:before { border-color: rgba(184, 184, 184, 0); border-left-color: #ddd; border-width: 10px; margin-left: -10px; } .calentim-no-scroll::-webkit-scrollbar { display: none; } .calentim-no-scroll::-moz-scrollbar { display: none; } .calentim-no-scroll::-o-scrollbar { display: none; } .calentim-no-scroll::-google-ms-scrollbar { display: none; } .calentim-no-scroll::-khtml-scrollbar { display: none; }