jdp-overlay { height: 0; width: 0; } jdp-container { -moz-animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) jdpOpenAnimation; -webkit-animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) jdpOpenAnimation; animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) jdpOpenAnimation; background: #fff; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.15); direction: rtl; display: none; width: 280px; overflow: hidden; padding: 0.5rem 0; position: absolute; -ms-touch-action: manipulation; touch-action: manipulation; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; transform-origin: bottom; } jdp-container, jdp-container *, jdp-container :after, jdp-container :before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } jdp-container .jdp-icon-minus, jdp-container .jdp-icon-plus { outline: 1px solid rgb(232 244 242); outline-offset: -1px; border-radius: 6px; cursor: pointer; display: flex; flex: none; overflow: hidden; text-align: center; text-decoration: none; vertical-align: middle; transition: all 0.2s; width: 24px; height: 24px; align-items: center; justify-content: center; } jdp-container .jdp-icon-minus:hover, jdp-container .jdp-icon-plus:hover { background-color: rgb(232 244 242); } jdp-container .jdp-icon-minus svg, jdp-container .jdp-icon-plus svg { height: 1.5rem; padding: 0.25rem; vertical-align: middle; width: 1.5rem; } jdp-container .jdp-icon-minus.not-in-range, jdp-container .jdp-icon-plus.not-in-range { cursor: not-allowed; } jdp-container .jdp-icon-minus.not-in-range svg, jdp-container .jdp-icon-plus.not-in-range svg { opacity: 0.3; } jdp-container .jdp-months, jdp-container .jdp-years { fill: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0.9); display: -webkit-inline-box; display: -webkit-flex; display: -ms-inline-flexbox; display: inline-flex; font-size: 120%; margin: 0 2.5%; } jdp-container .jdp-months { width: 40%; margin-right: 1rem; } jdp-container .jdp-years { width: 40%; margin: 0.5rem 1.2rem 0.8rem 0; } jdp-container .jdp-month, jdp-container .jdp-month input, jdp-container .jdp-month select, jdp-container .jdp-time, jdp-container .jdp-time input, jdp-container .jdp-time select, jdp-container .jdp-year, jdp-container .jdp-year input, jdp-container .jdp-year select { background: #fff; border: none; border-radius: 0; color: inherit; display: inline-block; font-family: inherit; font-size: inherit; font-weight: 300; height: auto; line-height: inherit; margin: 0; outline: 0; padding: 0; text-align: center; vertical-align: initial; width: 100%; font-feature-settings: "ss01"; } jdp-container .jdp-month input:active, jdp-container .jdp-month input:focus, jdp-container .jdp-month select:active, jdp-container .jdp-month select:focus, jdp-container .jdp-month:active, jdp-container .jdp-month:focus, jdp-container .jdp-time input:active, jdp-container .jdp-time input:focus, jdp-container .jdp-time select:active, jdp-container .jdp-time select:focus, jdp-container .jdp-time:active, jdp-container .jdp-time:focus, jdp-container .jdp-year input:active, jdp-container .jdp-year input:focus, jdp-container .jdp-year select:active, jdp-container .jdp-year select:focus, jdp-container .jdp-year:active, jdp-container .jdp-year:focus { outline: 0; } jdp-container .jdp-month input option, jdp-container .jdp-month option, jdp-container .jdp-month select option, jdp-container .jdp-time input option, jdp-container .jdp-time option, jdp-container .jdp-time select option, jdp-container .jdp-year input option, jdp-container .jdp-year option, jdp-container .jdp-year select option { font-size: 95%; min-height: 1.3rem; outline: 0; padding: 0; } jdp-container .jdp-month input, jdp-container .jdp-time input, jdp-container .jdp-year input { -webkit-appearance: none; -moz-appearance: textfield; cursor: text; } jdp-container .jdp-month input::-webkit-inner-spin-button, jdp-container .jdp-month input::-webkit-outer-spin-button, jdp-container .jdp-time input::-webkit-inner-spin-button, jdp-container .jdp-time input::-webkit-outer-spin-button, jdp-container .jdp-year input::-webkit-inner-spin-button, jdp-container .jdp-year input::-webkit-outer-spin-button { -webkit-appearance: none; } jdp-container .jdp-month select, jdp-container .jdp-time select, jdp-container .jdp-year select { -webkit-appearance: none; -moz-appearance: none; cursor: pointer; appearance: none; position: relative; } jdp-container .jdp-days { -ms-flex-pack: justify; display: inline-block; display: -ms-flexbox; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; justify-content: space-around; outline: 0; padding: 8px 12px; text-align: left; width: 100%; border-top: 1px solid #e8e8e8; } jdp-container .jdp-day, jdp-container .jdp-day-name { background: 0 0; border: 1px solid transparent; color: rgba(0,0,0,.65); display: block; font-weight: 400; height: 24px; justify-content: center; line-height: 22px; margin: 2px 6px; position: relative; text-align: center; width: 24px; font-feature-settings: "ss01"; } jdp-container .jdp-day-name.today, jdp-container .jdp-day.today { border-color: var(--color-primary-100); color: var(--color-primary-100); font-weight: 700; } .dark jdp-container .jdp-day-name.selected, .dark jdp-container .jdp-day.selected, jdp-container .jdp-day-name.selected, jdp-container .jdp-day.selected { background-color: var(--color-primary-100) !important; color: #fff !important; opacity: 1 !important; } .dark jdp-container .jdp-day-name.holly-day, .dark jdp-container .jdp-day-name.last-week, .dark jdp-container .jdp-day.holly-day, .dark jdp-container .jdp-day.last-week, jdp-container .jdp-day-name.holly-day, jdp-container .jdp-day-name.last-week, jdp-container .jdp-day.holly-day, jdp-container .jdp-day.last-week { color: #f44336; } .dark jdp-container .jdp-day.not-in-month, jdp-container .jdp-day.not-in-month { opacity: 0.4; } jdp-container .jdp-day.disabled-day { cursor: not-allowed; opacity: 0.15; } jdp-container .jdp-day:not(.disabled-day) { border-radius: 6px; cursor: pointer; transition: 0.1s linear; } jdp-container .jdp-day:not(.disabled-day):hover { background: rgb(232 244 242); } jdp-container .jdp-day-name { background-color: rgb(0 0 0 / 0%); border-radius: 6px; cursor: default; } jdp-container .jdp-footer { -ms-flex-pack: justify; display: inline-block; display: -ms-flexbox; display: flex; flex-wrap: nowrap; -ms-flex-wrap: nowrap; justify-content: space-between; outline: 0; padding: 6px 12px 0; width: 100%; border-top: 1px solid #e8e8e8; } jdp-container .jdp-btn-close, jdp-container .jdp-btn-empty, jdp-container .jdp-btn-today { background: #00877000; border-radius: 5px; color: var(--color-primary-100); cursor: pointer; display: inline-block; font-size: 90%; font-weight: 400; padding: 0.3em 0.6em; text-align: center; } jdp-container .jdp-btn-close.disabled-btn, jdp-container .jdp-btn-empty.disabled-btn, jdp-container .jdp-btn-today.disabled-btn { cursor: not-allowed; opacity: 0.2; } jdp-container .jdp-time-container { display: flex; padding: 6px 12px 12px 12px; } jdp-container .jdp-time-container .jdp-time { flex: auto; margin: 0 0.5rem; position: relative; } jdp-container .jdp-time-container .jdp-time select { border: 1px solid rgb(232 244 242); border-radius: 6px; appearance: none; transition: all 0.2s; } jdp-container .jdp-time-container .jdp-time select:hover { background-color: rgb(232 244 242); } jdp-container .jdp-time-container .jdp-time:after { content: ":"; font-size: 1.5rem; height: 100%; position: absolute; right: -0.7rem; transform: translateY(-50%); } jdp-container .jdp-time-container .jdp-time:first-child:after { display: none; } jdp-container .jdp-time-container.jdp-only-time .jdp-time select { font-size: 1.5rem; padding: 0.8rem 1rem 0.8rem 7px; } jdp-container .jdp-time-container.jdp-only-time .jdp-time:after { font-size: 2.3rem; position: absolute; right: -0.8rem; } @-webkit-keyframes jdpOpenAnimation { 0% { transform: scaleY(.8); transform-origin: 0% 0%; opacity: 0 } to { transform: scaleY(1); transform-origin: 0% 0%; opacity: 1 } } @keyframes jdpOpenAnimation { 0% { transform: scaleY(.8); transform-origin: 0% 0%; opacity: 0 } to { transform: scaleY(1); transform-origin: 0% 0%; opacity: 1 } } @-webkit-keyframes jdpOpenAnimationMobile { 0% { bottom: -10%; opacity: 0; } to { bottom: 0; opacity: 1; } } @keyframes jdpOpenAnimationMobile { 0% { margin-bottom: -20%; opacity: 0; } to { margin-bottom: 0; opacity: 1; } } .dark jdp-container .jdp-days { border-color: var(--dark-color-surface-400); } .dark jdp-overlay { background-color: #181f2c; } .dark jdp-container { background: var(--dark-color-background); border-color: #2c3950; box-shadow: 0 2px 8px rgba(0,0,0,.15); color: #fff; } .dark jdp-container .jdp-icon-minus, .dark jdp-container .jdp-icon-plus { outline-color: var(--dark-color-surface-600); } .dark jdp-container .jdp-icon-minus:hover, .dark jdp-container .jdp-icon-plus:hover { background-color: var(--dark-color-surface-600); } .dark jdp-container .jdp-months, .dark jdp-container .jdp-years { fill: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9); } .dark jdp-container .jdp-month, .dark jdp-container .jdp-month input, .dark jdp-container .jdp-month select, .dark jdp-container .jdp-time, .dark jdp-container .jdp-time input, .dark jdp-container .jdp-time select, .dark jdp-container .jdp-year, .dark jdp-container .jdp-year input, .dark jdp-container .jdp-year select { background: var(--dark-color-background); color: var(--dark-color-text-primary); } .dark jdp-container .jdp-day, .dark jdp-container .jdp-day-name { border: 1px solid transparent; color: var(--dark-color-text-primary); } .dark jdp-container .jdp-day-name.today, .dark jdp-container .jdp-day.today { border-color: var(--color-primary-100); } .dark jdp-container .jdp-day.disabled-day { opacity: 0.15; } .dark jdp-container .jdp-day:not(.disabled-day):hover { background-color: var(--dark-color-surface-600); color: #fff; } .dark jdp-container .jdp-footer { border-color: var(--dark-color-surface-400); } .dark jdp-container .jdp-btn-close, .dark jdp-container .jdp-btn-empty, .dark jdp-container .jdp-btn-today { color: rgb(255 255 255 / 65%); } .dark jdp-container .jdp-btn-close:hover, .dark jdp-container .jdp-btn-empty:hover, .dark jdp-container .jdp-btn-today:hover { color: rgb(255, 255, 255); } .dark jdp-container .jdp-btn-close.disabled-btn, .dark jdp-container .jdp-btn-empty.disabled-btn, .dark jdp-container .jdp-btn-today.disabled-btn { opacity: 0.2; } .dark jdp-container .jdp-time-container .jdp-time select:hover { background-color: var(--dark-color-surface-600); color: #fff; } .dark jdp-container .jdp-time-container .jdp-time select { border: 1px solid var(--dark-color-surface-600); }