/* Define the Vazirmatn font */ @font-face { font-family: 'Vazirmatn'; src: url('font/VazirMatn/Vazirmatn-Regular.woff2') format('woff2'), font-weight: normal; font-style: normal; } jdp-overlay { width: 0px; height: 0px; } @media only screen and (max-width: 481px) { jdp-overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: none; } } jdp-container { position: absolute; max-width: 307.875px; min-width: 307.875px; background: #fff; display: none; direction: rtl; padding: 0.5rem 0; box-shadow: 1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; -ms-touch-action: manipulation; touch-action: manipulation; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -moz-animation: jdpOpenAnimation 300ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation: jdpOpenAnimation 300ms cubic-bezier(0.23, 1, 0.32, 1); animation: jdpOpenAnimation 300ms cubic-bezier(0.23, 1, 0.32, 1); font-family: 'Vazirmatn', sans-serif; /* Apply Vazirmatn font */ } @media only screen and (max-width: 481px) { jdp-container { max-width: 100%; width: 100%; left: 50% !important; bottom: 0% !important; top: unset !important; transform: translateX(-50%) !important; min-width: 280px; border-radius: 4px 4px 0 0; -moz-animation: jdpOpenAnimationMobile 300ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation: jdpOpenAnimationMobile 300ms cubic-bezier(0.23, 1, 0.32, 1); animation: jdpOpenAnimationMobile 300ms cubic-bezier(0.23, 1, 0.32, 1); } } 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-plus, jdp-container .jdp-icon-minus { display: inline-block; text-align: center; cursor: pointer; vertical-align: middle; overflow: hidden; flex: none; text-decoration: none; border: 1px solid #e6e6e6; border-radius: 4px; } jdp-container .jdp-icon-plus svg, jdp-container .jdp-icon-minus svg { width: 1.5rem; height: 1.5rem; padding: 0.25rem; vertical-align: middle; } jdp-container .jdp-icon-plus.not-in-range, jdp-container .jdp-icon-minus.not-in-range { cursor: not-allowed; } jdp-container .jdp-icon-plus.not-in-range svg, jdp-container .jdp-icon-minus.not-in-range svg { opacity: 0.3; } jdp-container .jdp-years, jdp-container .jdp-months { display: -webkit-inline-box; display: -webkit-flex; display: -ms-inline-flexbox; display: inline-flex; margin: 0 2.5%; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); } jdp-container .jdp-months { width: 50%; } jdp-container .jdp-years { width: 40%; } jdp-container .jdp-year, jdp-container .jdp-year input, jdp-container .jdp-year select, 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 { width: 100%; height: auto; text-align: center; background: #fff; border: none; border-radius: 0; padding: 0; margin: 0; display: inline-block; font-family: inherit; vertical-align: initial; font-weight: 300; color: inherit; line-height: inherit; outline: none; font-family: 'Vazirmatn', sans-serif; /* Apply Vazirmatn font */ } jdp-container .jdp-year:focus, jdp-container .jdp-year:active, jdp-container .jdp-year input:focus, jdp-container .jdp-year input:active, jdp-container .jdp-year select:focus, jdp-container .jdp-year select:active, jdp-container .jdp-month:focus, jdp-container .jdp-month:active, jdp-container .jdp-month input:focus, jdp-container .jdp-month input:active, jdp-container .jdp-month select:focus, jdp-container .jdp-month select:active, jdp-container .jdp-time:focus, jdp-container .jdp-time:active, jdp-container .jdp-time input:focus, jdp-container .jdp-time input:active, jdp-container .jdp-time select:focus, jdp-container .jdp-time select:active { outline: none; } jdp-container .jdp-year option, jdp-container .jdp-year input option, jdp-container .jdp-year select option, jdp-container .jdp-month option, jdp-container .jdp-month input option, jdp-container .jdp-month select option, jdp-container .jdp-time option, jdp-container .jdp-time input option, jdp-container .jdp-time select option { font-size: 95%; min-height: 1.3rem; outline: none; padding: 0; } jdp-container .jdp-year:hover, jdp-container .jdp-month:hover, jdp-container .jdp-time:hover { filter: brightness(0.9); } jdp-container .jdp-year input, jdp-container .jdp-month input, jdp-container .jdp-time input { cursor: text; -webkit-appearance: none; -moz-appearance: textfield; } jdp-container .jdp-year input::-webkit-outer-spin-button, jdp-container .jdp-year input::-webkit-inner-spin-button, jdp-container .jdp-month input::-webkit-outer-spin-button, jdp-container .jdp-month input::-webkit-inner-spin-button, jdp-container .jdp-time input::-webkit-outer-spin-button, jdp-container .jdp-time input::-webkit-inner-spin-button { -webkit-appearance: none; } jdp-container .jdp-year select, jdp-container .jdp-month select, jdp-container .jdp-time select { cursor: pointer; position: relative; -webkit-appearance: menulist; -moz-appearance: menulist; } jdp-container .jdp-days { padding: 0.5rem 5px; outline: 0; text-align: left; width: 100%; display: inline-block; display: -ms-flexbox; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-around; } jdp-container .jdp-day, jdp-container .jdp-day-name { background: none; border: 1px solid transparent; font-weight: 400; width: 14.2857143%; flex-basis: 14.2857143%; height: 31px; line-height: 31px; margin: 2px 0; display: inline-block; position: relative; justify-content: center; text-align: center; color: #393939; font-size: 15px; font-family: 'Vazirmatn', sans-serif; /* Apply Vazirmatn font */ } jdp-container .jdp-day.today, jdp-container .jdp-day-name.today { border-color: #959ea9; } jdp-container .jdp-day.selected, jdp-container .jdp-day-name.selected { background-color: #569ff7 !important; color: #fff !important; opacity: 1 !important; } jdp-container .jdp-day.last-week, jdp-container .jdp-day.holly-day, jdp-container .jdp-day-name.last-week, jdp-container .jdp-day-name.holly-day { color: #f44336; } jdp-container .jdp-day.not-in-month { opacity: 0.4; } jdp-container .jdp-day.disabled-day { opacity: 0.15; cursor: not-allowed; } jdp-container .jdp-day:not(.disabled-day) { cursor: pointer; border-radius: 4px; transition: linear 0.1s; } 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 { border-radius: 0; font-weight: 700; font-size: 13px; cursor: default; } jdp-container .jdp-footer { padding: 0.5rem 0.5rem 0 0.5rem; outline: 0; width: 100%; display: inline-block; display: -ms-flexbox; display: flex; flex-wrap: nowrap; -ms-flex-wrap: nowrap; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 481px) { jdp-container .jdp-footer { margin: 0.5rem 0; } } jdp-container .jdp-btn-today, jdp-container .jdp-btn-empty, jdp-container .jdp-btn-close { background: #e6e6e6; font-size: 14px; padding: 0.3em 0.6em; border-radius: 5px; font-weight: 400; display: inline-block; text-align: center; color: #000; cursor: pointer; font-family: 'Vazirmatn', sans-serif; } @media only screen and (max-width: 481px) { jdp-container .jdp-btn-today, jdp-container .jdp-btn-empty, jdp-container .jdp-btn-close { padding: 0.5em 0.8em; font-size: 100%; } } jdp-container .jdp-btn-today.disabled-btn, jdp-container .jdp-btn-empty.disabled-btn, jdp-container .jdp-btn-close.disabled-btn { opacity: 0.2; cursor: not-allowed; } @media only screen and (max-width: 481px) { jdp-container .jdp-btn-today ~ .jdp-btn-empty { margin-right: 1em; margin-left: auto; } } 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 { padding: 0.5rem 1rem 0.5rem 7px; background: rgba(0, 0, 0, 0.03); border-radius: 5px; } jdp-container .jdp-time-container .jdp-time:after { content: ":"; position: absolute; right: -0.7rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; height: 100%; } jdp-container .jdp-time-container .jdp-time:first-child:after { display: none; } jdp-container .jdp-time-container.jdp-only-time .jdp-time select { padding: 0.8rem 1rem 0.8rem 7px; font-size: 1.5rem; } jdp-container .jdp-time-container.jdp-only-time .jdp-time:after { position: absolute; right: -0.8rem; font-size: 2.3rem; } @-webkit-keyframes jdpOpenAnimation { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes jdpOpenAnimation { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @-webkit-keyframes jdpOpenAnimationMobile { from { bottom: -10%; opacity: 0; } to { bottom: 0%; opacity: 1; } } @keyframes jdpOpenAnimationMobile { from { margin-bottom: -20%; opacity: 0; } to { margin-bottom: 0%; opacity: 1; } } .jdp-years, .jdp-month { font-size: 17px !important; }