/* ** persian-datepicker - v1.2.0 ** Reza Babakhani ** http://babakhani.github.io/PersianWebToolkit/docs/datepicker ** Under MIT license */ /* ========================================================= AniX - Persian Datepicker WooCommerce Checkout / Flatsome ========================================================= */ /* --------------------------------------------------------- Checkout Date Field --------------------------------------------------------- */ #deposit_date_field { position: relative; } #deposit_date_field .anix-persian-date-input { direction: rtl; text-align: right; cursor: pointer; background-color: #fff; } /* --------------------------------------------------------- Datepicker Container --------------------------------------------------------- */ .pdp-default { position: absolute !important; z-index: 999999 !important; width: 270px !important; padding: 8px !important; background: #fff !important; border: 1px solid #ddd !important; border-radius: 8px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; direction: rtl !important; font-family: inherit, Tahoma, Arial, sans-serif !important; font-size: 13px !important; color: #333 !important; box-sizing: border-box !important; } /* همه عناصر داخل Datepicker */ .pdp-default *, .pdp-default *::before, .pdp-default *::after { box-sizing: border-box !important; } /* --------------------------------------------------------- Header --------------------------------------------------------- */ .pdp-default .pdp-header { position: relative; width: 100% !important; height: 42px !important; line-height: 42px !important; margin-bottom: 5px; background: #f7f7f7 !important; border-radius: 6px !important; text-align: center !important; font-size: 14px !important; font-weight: 600 !important; } /* --------------------------------------------------------- Month / Year --------------------------------------------------------- */ .pdp-default .monthYear { display: flex !important; align-items: center !important; justify-content: center !important; height: 42px !important; line-height: 42px !important; gap: 5px; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; } /* --------------------------------------------------------- Previous / Next --------------------------------------------------------- */ .pdp-default .prevArrow, .pdp-default .nextArrow { position: absolute !important; top: 7px !important; width: 28px !important; height: 28px !important; line-height: 28px !important; text-align: center !important; cursor: pointer !important; border-radius: 5px !important; font-size: 15px !important; transition: background-color .15s ease, color .15s ease; } .pdp-default .prevArrow { right: 6px !important; } .pdp-default .nextArrow { left: 6px !important; } .pdp-default .prevArrow:hover, .pdp-default .nextArrow:hover { background: #eee !important; } /* disabled */ .pdp-default .prevArrow.disabled, .pdp-default .nextArrow.disabled { opacity: .35 !important; cursor: default !important; } /* --------------------------------------------------------- Days of Week --------------------------------------------------------- */ .pdp-default .dows { display: flex !important; flex-wrap: wrap !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .pdp-default .dows .cell { display: flex !important; align-items: center !important; justify-content: center !important; width: calc(100% / 7) !important; height: 30px !important; line-height: 30px !important; padding: 0 !important; margin: 0 !important; font-size: 11px !important; font-weight: 600 !important; color: #777 !important; } /* --------------------------------------------------------- Days --------------------------------------------------------- */ .pdp-default .days { display: flex !important; flex-wrap: wrap !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .pdp-default .days > div { display: flex !important; flex-wrap: wrap !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .pdp-default .days .cell { display: flex !important; align-items: center !important; justify-content: center !important; width: calc(100% / 7) !important; height: 31px !important; line-height: 31px !important; padding: 0 !important; margin: 0 !important; border-radius: 5px !important; font-size: 12px !important; } /* روز عادی */ .pdp-default .day { cursor: pointer !important; transition: background-color .15s ease, color .15s ease; } /* hover */ .pdp-default .day:hover { background-color: #f0f0f0 !important; } /* --------------------------------------------------------- Today --------------------------------------------------------- */ .pdp-default .day.today { font-weight: 700 !important; border: 1px solid #2271b1 !important; } /* --------------------------------------------------------- Selected Day --------------------------------------------------------- */ .pdp-default .day.selday { background-color: #2271b1 !important; color: #fff !important; font-weight: 600 !important; } /* --------------------------------------------------------- Friday --------------------------------------------------------- */ .pdp-default .day.friday { color: #d63638 !important; } .pdp-default .day.selday.friday { color: #fff !important; } /* --------------------------------------------------------- Empty cells --------------------------------------------------------- */ .pdp-default .nul { visibility: hidden !important; pointer-events: none !important; } /* --------------------------------------------------------- Disabled days --------------------------------------------------------- */ .pdp-default .disday { opacity: .35 !important; cursor: default !important; } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ .pdp-default .pdp-footer { width: 100% !important; min-height: 32px !important; height: auto !important; margin-top: 5px !important; padding-top: 6px !important; border-top: 1px solid #eee !important; text-align: center !important; font-size: 12px !important; } .pdp-default .goToday { display: inline-block !important; color: #2271b1 !important; text-decoration: none !important; cursor: pointer !important; } .pdp-default .goToday:hover { color: #135e96 !important; text-decoration: underline !important; } /* --------------------------------------------------------- Month / Year Selection --------------------------------------------------------- */ .pdp-default .monthSelect, .pdp-default .yearSelect { position: absolute !important; z-index: 20 !important; top: 42px !important; right: 0 !important; width: 100% !important; max-height: 220px !important; margin: 0 !important; padding: 6px !important; overflow-y: auto !important; background: #fff !important; border: 1px solid #ddd !important; border-radius: 6px !important; box-shadow: 0 5px 20px rgba(0, 0, 0, .12) !important; list-style: none !important; } /* Month items */ .pdp-default .monthSelect li { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: calc(33.333% - 6px) !important; height: 32px !important; margin: 3px !important; padding: 3px !important; border-radius: 4px !important; cursor: pointer !important; font-size: 11px !important; } /* Year items */ .pdp-default .yearSelect li { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: calc(33.333% - 6px) !important; height: 30px !important; margin: 3px !important; padding: 3px !important; border-radius: 4px !important; cursor: pointer !important; font-size: 11px !important; } /* Hover */ .pdp-default .monthSelect li:hover, .pdp-default .yearSelect li:hover { background-color: #f0f0f0 !important; } /* Selected */ .pdp-default .monthSelect li.selected, .pdp-default .yearSelect li.selected { background-color: #2271b1 !important; color: #fff !important; } /* Disabled month */ .pdp-default .monthSelect li.disableMonth { opacity: .35 !important; cursor: default !important; } /* --------------------------------------------------------- Mobile --------------------------------------------------------- */ @media (max-width: 549px) { .pdp-default { width: 260px !important; max-width: calc(100vw - 20px) !important; } } .datepicker-plot-area{-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none}.datepicker-plot-area .datepicker-time-view .down-btn,.datepicker-plot-area .datepicker-time-view .up-btn{transition:all 100ms ease}.datepicker-plot-area .datepicker-day-view .table-days td.disabled span,.datepicker-plot-area .datepicker-year-view .year-item-disable,.datepicker-plot-area .datepicker-month-view .month-item-disable{border-radius:0}.datepicker-plot-area .datepicker-time-view .down-btn,.datepicker-plot-area .datepicker-time-view .up-btn{border-radius:0;border-top-left-radius:0;border-top-right-radius:0}.datepicker-plot-area .datepicker-time-view .down-btn{border-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.datepicker-plot-area,.datepicker-plot-area .datepicker-time-view>.time-segment{border-radius:0}.datepicker-plot-area .datepicker-day-view .table-days td span,.datepicker-plot-area .datepicker-year-view .year-item,.datepicker-plot-area .datepicker-month-view .month-item,.datepicker-plot-area .datepicker-navigator .pwt-btn-next,.datepicker-plot-area .datepicker-navigator .pwt-btn-switch,.datepicker-plot-area .datepicker-navigator .pwt-btn-prev{border-radius:0}.datepicker-plot-area{box-shadow:0 5px 10px rgba(0,0,0,0.2)}.datepicker-plot-area .datepicker-day-view .table-days td span,.datepicker-plot-area .datepicker-year-view .year-item,.datepicker-plot-area .datepicker-month-view .month-item,.datepicker-plot-area .datepicker-day-view .table-days td.disabled span,.datepicker-plot-area .datepicker-year-view .year-item-disable,.datepicker-plot-area .datepicker-month-view .month-item-disable,.datepicker-plot-area .datepicker-time-view>.time-segment,.datepicker-plot-area .datepicker-time-view .down-btn,.datepicker-plot-area .datepicker-time-view .up-btn,.datepicker-plot-area .datepicker-time-view input,.datepicker-plot-area .datepicker-navigator .pwt-btn-next,.datepicker-plot-area .datepicker-navigator .pwt-btn-switch,.datepicker-plot-area .datepicker-navigator .pwt-btn-prev,.datepicker-plot-area .toolbox .pwt-btn-submit,.datepicker-plot-area .toolbox .pwt-btn-calendar,.datepicker-plot-area .toolbox .pwt-btn-today{cursor:pointer}.datepicker-plot-area .datepicker-day-view .table-days td span,.datepicker-plot-area .datepicker-year-view .year-item,.datepicker-plot-area .datepicker-month-view .month-item{font:14px;background-color:#fff;color:#333;border:0;text-shadow:none}.datepicker-plot-area .datepicker-day-view .table-days td.disabled span,.datepicker-plot-area .datepicker-year-view .year-item-disable,.datepicker-plot-area .datepicker-month-view .month-item-disable{background-color:#f1f1f1;color:#ccc;border:none;text-shadow:none;cursor:default}.datepicker-plot-area .datepicker-day-view .table-days td.today span{background-color:#333;color:#fff;border:0;text-shadow:none}.datepicker-plot-area .datepicker-day-view .table-days td span.other-month{background-color:"";color:#ccc;border:none;text-shadow:none}.datepicker-plot-area .datepicker-day-view .table-days td.selected span,.datepicker-plot-area .datepicker-year-view .year-item.selected,.datepicker-plot-area .datepicker-month-view .month-item.selected{background-color:#005299;color:#fff;border:none;text-shadow:1px 1px 1px #000}.datepicker-plot-area .datepicker-day-view .table-days td.selected span .datepicker-plot-area .datepicker-day-view .table-days td:hover,.datepicker-plot-area .datepicker-day-view .table-days td span:hover,.datepicker-plot-area .datepicker-year-view .year-item:hover,.datepicker-plot-area .datepicker-month-view .month-item:hover{background-color:#007be6;color:#fff;border:0;text-shadow:none}.datepicker-container{display:block;position:absolute;z-index:100000;top:0;direction:ltr}.datepicker-container.pwt-hide{display:none}.datepicker-plot-area{box-sizing:border-box;overflow:hidden;min-height:70px;display:block;width:200px;min-width:200px;padding:3px;position:absolute;font:12px tahoma;border:1px solid #ccc;background-color:#fff}.datepicker-plot-area.datepicker-state-only-time{padding:0}.datepicker-plot-area table,.datepicker-plot-area th,.datepicker-plot-area td{border:0;background:none}.datepicker-plot-area *{text-align:center;color:#333}.datepicker-plot-area .datepicker-day-view,.datepicker-plot-area .datepicker-month-view,.datepicker-plot-area .datepicker-year-view{display:block;width:100%;float:left;min-height:200px;margin:0}.datepicker-plot-area-inline-view{display:block;width:100%;position:static;float:left}.datepicker-plot-area .datepicker-time-view{display:block;float:left;width:100%;padding:5px;background:#f9f9f9;border-top:1px solid #f1f1f1}.datepicker-plot-area .datepicker-time-view>.time-segment{display:block;width:22%;float:left;overflow:hidden}.datepicker-plot-area .datepicker-time-view>.time-segment:hover .down-btn,.datepicker-plot-area .datepicker-time-view>.time-segment:hover .up-btn{font-weight:bold}.datepicker-plot-area .datepicker-time-view .divider{display:block;width:3%;height:60px;line-height:60px;float:left;overflow:hidden;font:12px bold}.datepicker-plot-area .datepicker-time-view .divider span{height:60px;line-height:60px}.datepicker-plot-area .datepicker-time-view .down-btn,.datepicker-plot-area .datepicker-time-view .up-btn{display:block;float:left;width:100%;margin:0;height:20px;line-height:22px;color:#ccc}.datepicker-plot-area .datepicker-time-view .down-btn:hover,.datepicker-plot-area .datepicker-time-view .up-btn:hover{background-color:rgba(250,250,250,0.3);color:#807f7f}.datepicker-plot-area .datepicker-time-view input{display:block;width:90%;margin:0 5%;height:20px;padding:0;outline:none;border:none;background:transparent}.datepicker-plot-area.datepicker-state-only-time .datepicker-time-view{padding:0 5px;margin:0}.datepicker-plot-area.datepicker-state-only-time .datepicker-time-view>.time-segment,.datepicker-plot-area.datepicker-state-only-time .datepicker-time-view>.divider{padding:5px 0}.datepicker-plot-area.datepicker-state-no-meridian .datepicker-time-view>.time-segment{width:31.33%}.datepicker-plot-area.datepicker-state-no-meridian .datepicker-time-view>.meridian-divider{display:none}.datepicker-plot-area.datepicker-state-no-second .datepicker-time-view>.time-segment{width:31.33%}.datepicker-plot-area.datepicker-state-no-second .datepicker-time-view>.second-divider{display:none}.datepicker-plot-area.datepicker-state-no-meridian.datepicker-state-no-second .datepicker-time-view>.time-segment{width:48%}.datepicker-plot-area.datepicker-state-no-meridian.datepicker-state-no-second .datepicker-time-view>.second-divider,.datepicker-plot-area.datepicker-state-no-meridian.datepicker-state-no-second .datepicker-time-view>.meridian-divider{display:none}.datepicker-plot-area .datepicker-day-view .table-days{width:100%;float:left;direction:rtl}.datepicker-plot-area .datepicker-day-view .table-days td{width:14.2%;height:26px;padding:0;margin:0;position:relative}.datepicker-plot-area .datepicker-day-view .table-days td .alter-calendar-day{font-style:normal;position:absolute;font-size:8.5px;bottom:0;right:2px;color:#f1f1f1}.datepicker-plot-area .datepicker-day-view .table-days td span{display:block;width:100%;height:26px;line-height:26px;padding:0;margin:0}.datepicker-plot-area .datepicker-day-view .month-grid-box{display:block;width:100%;float:right;min-height:180px;margin:8px 0}.datepicker-plot-area .datepicker-day-view .month-grid-box .header{display:block;width:100%;float:left;padding-bottom:8px}.datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row{display:block;width:100%;height:25px;float:left}.datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell{display:block;width:14.2%;height:25px;float:right;line-height:25px;font:11px;font-weight:bold;color:#333}.datepicker-plot-area .datepicker-year-view,.datepicker-plot-area .datepicker-month-view{padding-top:10px}.datepicker-plot-area .datepicker-year-view .year-item,.datepicker-plot-area .datepicker-month-view .month-item{display:block;width:33.333333%;margin:2px 0 0;float:right;height:42px;line-height:42px}.datepicker-plot-area .datepicker-navigator{display:block;width:100%;float:left}.datepicker-plot-area .datepicker-navigator .pwt-btn-next,.datepicker-plot-area .datepicker-navigator .pwt-btn-switch,.datepicker-plot-area .datepicker-navigator .pwt-btn-prev{display:block;float:left;height:28px;line-height:28px;font-weight:bold;background-color:rgba(250,250,250,0.1);color:#333}.datepicker-plot-area .datepicker-navigator .pwt-btn-next:hover,.datepicker-plot-area .datepicker-navigator .pwt-btn-switch:hover,.datepicker-plot-area .datepicker-navigator .pwt-btn-prev:hover{background-color:rgba(250,250,250,0.3)}.datepicker-plot-area .datepicker-navigator .pwt-btn-next{display:block;width:15%;float:left}.datepicker-plot-area .datepicker-navigator .pwt-btn-switch{display:block;width:66%;margin:0 2%;float:left}.datepicker-plot-area .datepicker-navigator .pwt-btn-prev{display:block;width:15%;float:left}.datepicker-plot-area .toolbox{display:block;float:left;width:100%;margin-top:5px}.datepicker-plot-area .toolbox .pwt-btn-submit,.datepicker-plot-area .toolbox .pwt-btn-calendar,.datepicker-plot-area .toolbox .pwt-btn-today{background-color:rgba(250,250,250,0.1);float:right;display:block;font-weight:bold;font-size:11px;height:24px;line-height:24px;white-space:nowrap;margin:0 auto;margin-left:5px;padding:0 5px;min-width:50px}.datepicker-plot-area .toolbox .pwt-btn-submit:hover,.datepicker-plot-area .toolbox .pwt-btn-calendar:hover,.datepicker-plot-area .toolbox .pwt-btn-today:hover{background-color:rgba(250,250,250,0.3)}.datepicker-plot-area .datepicker-navigator{display:block;width:100%;float:left}.datepicker-plot-area .datepicker-navigator .pwt-btn-next,.datepicker-plot-area .datepicker-navigator .pwt-btn-switch,.datepicker-plot-area .datepicker-navigator .pwt-btn-prev{display:block;float:left;height:28px;line-height:28px;font-weight:bold;background-color:rgba(250,250,250,0.1);color:#333}.datepicker-plot-area .datepicker-navigator .pwt-btn-next:hover,.datepicker-plot-area .datepicker-navigator .pwt-btn-switch:hover,.datepicker-plot-area .datepicker-navigator .pwt-btn-prev:hover{background-color:rgba(250,250,250,0.3)}.datepicker-plot-area .datepicker-navigator .pwt-btn-next{display:block;width:15%;float:left}.datepicker-plot-area .datepicker-navigator .pwt-btn-switch{display:block;width:66%;margin:0 2%;float:left}.datepicker-plot-area .datepicker-navigator .pwt-btn-prev{display:block;width:15%;float:left}.datepicker-container.pwt-mobile-view{position:fixed;width:100%;height:100%;top:0;left:0;bottom:0;overflow:hidden;transition:all 1s}.datepicker-container.pwt-mobile-view.pwt-hide{top:100vh;height:0}.datepicker-container.pwt-mobile-view .datepicker-plot-area.datepicker-state-only-time .pwt-btn-submit{color:#fff;background:#ccc}.datepicker-container.pwt-mobile-view .datepicker-plot-area{position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0}.datepicker-container.pwt-mobile-view .datepicker-plot-area .table-days td,.datepicker-container.pwt-mobile-view .datepicker-plot-area .table-days td span{height:44px;line-height:44px;font-size:14px}.datepicker-container.pwt-mobile-view .datepicker-plot-area .datepicker-year-view .year-item,.datepicker-container.pwt-mobile-view .datepicker-plot-area .datepicker-month-view .month-item{height:70px;line-height:70px}.datepicker-container.pwt-mobile-view .datepicker-plot-area [class*='pwt-btn']{height:48px;line-height:48px}.datepicker-container.pwt-mobile-view .datepicker-plot-area .pwt-btn-today{float:left}.datepicker-container.pwt-mobile-view .datepicker-plot-area.datepicker-state-only-time{background:rgba(0,0,0,0.7);border:0;padding-top:60%}.datepicker-container.pwt-mobile-view .datepicker-plot-area.datepicker-state-only-time .pwt-btn-submit{margin-right:5px}.datepicker-container.pwt-mobile-view .datepicker-plot-area.datepicker-state-only-time .datepicker-time-view input{height:40px;line-height:40px;font-size:24px;margin:5px 0}.datepicker-container.pwt-mobile-view .datepicker-plot-area.datepicker-state-only-time .datepicker-time-view .divider,.datepicker-container.pwt-mobile-view .datepicker-plot-area.datepicker-state-only-time .datepicker-time-view .divider span{font-size:16px;display:block;height:144px;line-height:144px}.datepicker-container.pwt-mobile-view .datepicker-plot-area.datepicker-state-only-time .datepicker-time-view .down-btn,.datepicker-container.pwt-mobile-view .datepicker-plot-area.datepicker-state-only-time .datepicker-time-view .up-btn{height:48px;line-height:48px}.datepicker-container.pwt-mobile-view .datepicker-time-view input{height:32px;line-height:34px;font-size:18px}.datepicker-container.pwt-mobile-view .datepicker-time-view .divider,.datepicker-container.pwt-mobile-view .datepicker-time-view .divider span{height:120px;line-height:120px}.datepicker-container.pwt-mobile-view .datepicker-time-view .down-btn,.datepicker-container.pwt-mobile-view .datepicker-time-view .up-btn{height:40px;line-height:40px} /*# sourceMappingURL=persian-datepicker.min.css.map */