jdp-overlay {
height: 0;
width: 0;
}
@media only screen and (max-width: 481px) {
jdp-overlay {
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
background-color: rgba(0, 0, 0, 0.3);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
}
jdp-container {
-moz-animation: jdpOpenAnimation 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-animation: jdpOpenAnimation 0.3s cubic-bezier(0.23, 1, 0.32, 1);
animation: jdpOpenAnimation 0.3s cubic-bezier(0.23, 1, 0.32, 1);
background: #fff;
border-radius: 4px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
direction: rtl;
display: none;
max-width: 307.875px;
min-width: 307.875px;
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;
}
@media only screen and (max-width: 481px) {
jdp-container {
-moz-animation: jdpOpenAnimationMobile 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-animation: jdpOpenAnimationMobile 0.3s cubic-bezier(0.23, 1, 0.32, 1);
animation: jdpOpenAnimationMobile 0.3s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 4px 4px 0 0;
bottom: 0 !important;
left: 50% !important;
max-width: 100%;
min-width: 280px;
top: unset !important;
transform: translateX(-50%) !important;
width: 100%;
}
}
jdp-container,
jdp-container *,
jdp-container :after,
jdp-container :before {
   z-index: 99999999999999999999999999999999999 !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
jdp-container .jdp-icon-minus,
jdp-container .jdp-icon-plus {
border: 1px solid #e6e6e6;
border-radius: 4px;
cursor: pointer;
display: inline-block;
flex: none;
overflow: hidden;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
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: 50%;
}
jdp-container .jdp-years {
width: 40%;
}
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: none;
padding: 0;
text-align: center;
vertical-align: initial;
width: 100%;
}
jdp-container .jdp-month:active,
jdp-container .jdp-month:focus,
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-time:active,
jdp-container .jdp-time: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-year:active,
jdp-container .jdp-year: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 {
outline: none;
}
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: none;
padding: 0;
}
jdp-container .jdp-month:hover,
jdp-container .jdp-time:hover,
jdp-container .jdp-year:hover {
filter: brightness(0.9);
}
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: menulist;
-moz-appearance: menulist;
cursor: pointer;
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: 0.5rem 0 0;
text-align: left;
width: 100%;
}
jdp-container .jdp-day,
jdp-container .jdp-day-name {
background: none;
border: 1px solid transparent;
color: rgba(0, 0, 0, 0.9);
display: inline-block;
flex-basis: 14.2857143%;
font-weight: 400;
height: 31px;
justify-content: center;
line-height: 31px;
margin: 2px 0;
position: relative;
text-align: center;
width: 14.2857143%;
}
jdp-container .jdp-day-name.today,
jdp-container .jdp-day.today {
border-color: rgba(0, 0, 0, 0.3);
}
jdp-container .jdp-day-name.selected,
jdp-container .jdp-day.selected {
background-color: #569ff7 !important;
color: #fff !important;
opacity: 1 !important;
}
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;
}
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: 4px;
cursor: pointer;
transition: 0.1s linear;
}
jdp-container .jdp-day:not(.disabled-day):hover {
background: rgba(0, 0, 0, 0.1);
transform: scale(1.15);
z-index: 1;
}
jdp-container .jdp-day-name {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0;
cursor: default;
font-size: 90%;
font-weight: 900;
}
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: 0.5rem 0.5rem 0;
width: 100%;
}
@media only screen and (max-width: 481px) {
jdp-container .jdp-footer {
margin: 0.5rem 0;
}
}
jdp-container .jdp-btn-close,
jdp-container .jdp-btn-empty,
jdp-container .jdp-btn-today {
background: #569ff7;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 90%;
font-weight: 400;
padding: 0.3em 0.6em;
text-align: center;
}
@media only screen and (max-width: 481px) {
jdp-container .jdp-btn-close,
jdp-container .jdp-btn-empty,
jdp-container .jdp-btn-today {
font-size: 100%;
padding: 0.5em 0.8em;
}
}
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;
}
@media only screen and (max-width: 481px) {
jdp-container .jdp-btn-today ~ .jdp-btn-empty {
margin-left: auto;
margin-right: 1em;
}
}
jdp-container .jdp-time-container {
display: flex;
padding: 0;
}
jdp-container .jdp-time-container .jdp-time {
flex: auto;
margin: 0 0.5rem;
position: relative;
}
jdp-container .jdp-time-container .jdp-time select {
background: rgba(0, 0, 0, 0.03);
border-radius: 5px;
padding: 0.5rem 1rem 0.5rem 7px;
}
jdp-container .jdp-time-container .jdp-time:after {
content: ":";
font-size: 1.5rem;
height: 100%;
position: absolute;
right: -0.7rem;
top: 50%;
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% {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes jdpOpenAnimation {
0% {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(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;
}
}