:where(html[data-datakar-ui="legacy"]) { --dk-font-sans: "Datakar Ravi", Arial, Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "DejaVu Sans", sans-serif; } :where(html[data-datakar-ui="legacy"]) .global-search-input { block-size: max(42px, 2.55rem); line-height: 1.5; } :where(html[data-datakar-ui="legacy"]) .date-page { padding-block:var(--dk-space-5) 0;container-type:inline-size } :where(html[data-datakar-ui="legacy"]) .date-hero { padding-block:0 var(--dk-space-2) } :where(html[data-datakar-ui="legacy"]) .date-hero-topline { display:grid;grid-template-columns:minmax(0,1fr) 5rem;align-items:start;gap:var(--dk-space-4) } :where(html[data-datakar-ui="legacy"]) .date-heading { display:flex;align-items:center;gap:var(--dk-space-2);margin:0;font-size:1.25rem;line-height:1.6;font-weight:var(--dk-font-weight-bold) } :where(html[data-datakar-ui="legacy"]) .date-heading::before { content:"";flex:0 0 auto;width:5px;height:16px;border-radius:var(--dk-radius-pill);background:var(--dk-color-primary) } :where(html[data-datakar-ui="legacy"]) .date-intro, :where(html[data-datakar-ui="legacy"]) .date-about p { max-width:64ch;margin:var(--dk-space-3) 0 0;color:var(--dk-color-text-soft);line-height:1.9 } :where(html[data-datakar-ui="legacy"]) .date-text-link { color:var(--dk-color-link);text-decoration:none;font-size:var(--dk-font-size-sm);font-weight:var(--dk-font-weight-bold);white-space:nowrap } :where(html[data-datakar-ui="legacy"]) .date-text-link:hover, :where(html[data-datakar-ui="legacy"]) .date-text-link:focus-visible { text-decoration:underline;text-underline-offset:.18em } :where(html[data-datakar-ui="legacy"]) .date-docs-link { display:inline-block;max-inline-size:100%;margin-top:var(--dk-space-3);white-space:normal;overflow-wrap:anywhere } :where(html[data-datakar-ui="legacy"]) .date-section { margin-top:var(--dk-space-7);scroll-margin-top:92px } :where(html[data-datakar-ui="legacy"]) .date-form { display:grid;gap:var(--dk-space-5);margin-top:var(--dk-space-4);padding:clamp(.6rem,4vw,1.1rem) } :where(html[data-datakar-ui="legacy"]) .calendar-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dk-space-4) } :where(html[data-datakar-ui="legacy"]) .date-input-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dk-space-3) } :where(html[data-datakar-ui="legacy"]) .date-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-inline-size:18rem;gap:var(--dk-space-2) } :where(html[data-datakar-ui="legacy"]) .date-actions .dk-button { min-inline-size:0;padding-inline:.5rem } :where(html[data-datakar-ui="legacy"]) .date-results { margin-top:var(--dk-space-4);padding:0;overflow:hidden } :where(html[data-datakar-ui="legacy"]) .date-placeholder { padding: var(--dk-space-6) var(--dk-space-4); min-block-size: calc(var(--date-placeholder-lines, 1) * 1lh + 2 * var(--dk-space-6)); line-height: 1.5; color: var(--dk-color-muted); text-align: center; } :where(html[data-datakar-ui="legacy"]) .date-result-content { display:grid } :where(html[data-datakar-ui="legacy"]) .calendar-result { padding:var(--dk-space-4);border-bottom:1px solid var(--dk-color-border) } :where(html[data-datakar-ui="legacy"]) .calendar-result.primary-result { background:color-mix(in srgb,var(--dk-color-primary) 6%,var(--dk-color-surface)) } :where(html[data-datakar-ui="legacy"]) .calendar-label { display:block;color:var(--dk-color-muted);font-size:var(--dk-font-size-sm) } :where(html[data-datakar-ui="legacy"]) .calendar-date { display:block;margin-top:.25rem;font-size:var(--dk-font-size-md);font-weight:var(--dk-font-weight-bold);line-height:1.6 } :where(html[data-datakar-ui="legacy"]) .calendar-numeric { display:block;margin-top:.2rem;color:var(--dk-color-text-soft);font-size:var(--dk-font-size-sm) } :where(html[data-datakar-ui="legacy"]) .result-row { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--dk-space-4);padding:.85rem var(--dk-space-4);border-bottom:1px solid var(--dk-color-border) } :where(html[data-datakar-ui="legacy"]) .result-row span { color:var(--dk-color-muted) } :where(html[data-datakar-ui="legacy"]) .result-row strong { text-align:end } :where(html[data-datakar-ui="legacy"]) .copy-row { padding:var(--dk-space-4) } :where(html[data-datakar-ui="legacy"]) .date-about { padding-bottom:var(--dk-space-2) } :where(html[data-datakar-ui="legacy"]) .date-results.is-updated { animation:dk-date-pop 360ms var(--dk-ease-standard) } @keyframes dk-date-pop{0%{transform:translateY(2px);opacity:.82}100%{transform:none;opacity:1}} @media(max-width:620px){ :where(html[data-datakar-ui="legacy"]) .date-page { padding-block-start:var(--dk-space-4) } :where(html[data-datakar-ui="legacy"]) .date-section { margin-top:var(--dk-space-6) } :where(html[data-datakar-ui="legacy"]) .calendar-grid, :where(html[data-datakar-ui="legacy"]) .date-input-grid { grid-template-columns:1fr } :where(html[data-datakar-ui="legacy"]) .result-row { grid-template-columns:1fr;gap:.25rem } :where(html[data-datakar-ui="legacy"]) .result-row strong { text-align:start } } @media(prefers-reduced-motion:reduce){ :where(html[data-datakar-ui="legacy"]) .date-results.is-updated { animation:none } } :where(html[data-datakar-ui="legacy"]) #date-form [aria-invalid="true"] { border-color: var(--dk-color-error); } :where(html[data-datakar-ui="legacy"]) .date-error { color: var(--dk-color-error); } :where(html[data-datakar-ui="legacy"]) .date-copy-status:not(:empty) { margin-block-start: .75rem; } :where(html[data-datakar-ui="legacy"]) .date-copy-recovery { display: grid; gap: var(--dk-space-3); margin-block-start: var(--dk-space-4); } :where(html[data-datakar-ui="legacy"]) .date-copy-recovery textarea { min-height: 10rem; resize: vertical; } :where(html[data-datakar-ui="legacy"]) .date-copy-recovery button { justify-self: start; } :where(html[data-datakar-ui="legacy"]) h1.date-heading { display: block; position: relative; padding-inline-start: calc(5px + var(--dk-space-2)); font-size: clamp(1.5rem, 3vw, 1.75rem); } :where(html[data-datakar-ui="legacy"]) h1.date-heading::before { position: absolute; inset-inline-start: 0; inset-block-start: .48em; } :where(html[data-datakar-ui="legacy"]) .date-form, :where(html[data-datakar-ui="legacy"]) .date-results { min-width:0;overflow-wrap:anywhere } @media (max-width:380px) { :where(html[data-datakar-ui="legacy"]) .date-text-link { white-space:normal;overflow-wrap:anywhere; } :where(html[data-datakar-ui="legacy"]) .date-heading { min-width:0;max-width:100%;overflow-wrap:anywhere; } :where(html[data-datakar-ui="legacy"]) .date-actions .dk-button { min-width:0;max-width:100%; } } :where(html[data-datakar-ui="legacy"]) [data-tool-first] .date-hero-topline { row-gap:.5rem; } :where(html[data-datakar-ui="legacy"]) [data-tool-first] .date-hero-topline > a { inline-size: 5rem; max-inline-size: 100%; overflow-wrap: anywhere; white-space: normal; } :where(html[data-datakar-ui="legacy"]) [data-tool-first] .tool-essential { margin-block: .75rem 0; max-width: 37rem; line-height: 1.75; min-block-size: calc(var(--date-disclosure-lines, 2) * 1lh); } :where(html[data-datakar-ui="legacy"]) [data-tool-first] :is(.date-hero) + section { margin-block-start:1.25rem; } @container (max-width: 32rem) { :where(html[data-datakar-ui="legacy"]) .date-hero { --date-disclosure-lines: 3; } } @container (max-width: 24rem) { :where(html[data-datakar-ui="legacy"]) .date-hero-topline { grid-template-columns: minmax(0, 1fr); } :where(html[data-datakar-ui="legacy"]) .date-hero { --date-disclosure-lines: 4; } } @container (max-width: 21rem) { :where(html[data-datakar-ui="legacy"]) .date-placeholder { --date-placeholder-lines: 2; } } @container (max-width: 19rem) { :where(html[data-datakar-ui="legacy"]) h1.date-heading { min-block-size: 2lh; } :where(html[data-datakar-ui="legacy"]) .date-hero { --date-disclosure-lines: 5; } :where(html[data-datakar-ui="legacy"]) .calendar-grid, :where(html[data-datakar-ui="legacy"]) .date-input-grid { grid-template-columns: minmax(0, 1fr); } :where(html[data-datakar-ui="legacy"]) .date-actions .dk-button { min-block-size: calc(2lh + 1.4rem + 2px); } } @container (max-width: 15rem) { :where(html[data-datakar-ui="legacy"]) .date-hero { --date-disclosure-lines: 6; } :where(html[data-datakar-ui="legacy"]) .date-placeholder { --date-placeholder-lines: 3; } :where(html[data-datakar-ui="legacy"]) .date-actions { grid-template-columns: minmax(0, 1fr); } } @container (max-width: 12rem) { :where(html[data-datakar-ui="legacy"]) h1.date-heading { min-block-size: 3lh; } :where(html[data-datakar-ui="legacy"]) .date-hero { --date-disclosure-lines: 8; } :where(html[data-datakar-ui="legacy"]) .date-placeholder { --date-placeholder-lines: 4; } :where(html[data-datakar-ui="legacy"]) .date-form legend, :where(html[data-datakar-ui="legacy"]) .date-today-dates dd { min-block-size: 2lh; } :where(html[data-datakar-ui="legacy"]) .date-today .dk-button { min-block-size: calc(3lh + 1.4rem + 2px); } } @container (max-width: 10rem) { :where(html[data-datakar-ui="legacy"]) .date-hero { --date-disclosure-lines: 9; } } @container (max-width: 9rem) { :where(html[data-datakar-ui="legacy"]) h1.date-heading { min-block-size: 4lh; } :where(html[data-datakar-ui="legacy"]) .date-hero { --date-disclosure-lines: 11; } :where(html[data-datakar-ui="legacy"]) .date-placeholder { --date-placeholder-lines: 5; } :where(html[data-datakar-ui="legacy"]) .date-section > .date-heading { min-block-size: 2lh; align-items: start; } :where(html[data-datakar-ui="legacy"]:lang(fa)) .date-today .dk-button { min-block-size: calc(4lh + 1.4rem + 2px); } } :where(html[data-datakar-ui="legacy"]) .date-month-field .dk-select-menu { max-height: min(300px, 44vh, var(--date-month-menu-room, 44vh)); overscroll-behavior-y: contain; } :where(html[data-datakar-ui="legacy"]) .date-month-field[data-month-menu-above] .dk-select-menu { top: auto; bottom: calc(100% + .4rem); transform-origin: bottom center; } :where(html[data-datakar-ui="legacy"]) .date-choice-field { position: relative; min-width: 0; } :where(html[data-datakar-ui="legacy"]) .date-choice-field .dk-input { block-size: max(var(--dk-input-min-height), 2.65rem); line-height: 1.5; } :where(html[data-datakar-ui="legacy"]) .date-choices { position: absolute; z-index: var(--dk-z-dropdown); inset-block-start: calc(100% + min(.4rem, 10px)); inset-inline-start: 0; inline-size: max(100%, min(17rem, calc(100vw - 5rem))); max-block-size: min(24rem, var(--date-choices-room, 45vh)); padding: .4rem; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--dk-color-border); border-radius: var(--dk-radius-md); background: var(--dk-color-surface); color: var(--dk-color-text); box-shadow: var(--dk-shadow-md); font-size: var(--dk-font-size-sm); } :where(html[data-datakar-ui="legacy"]) .date-choice-field[data-choices-above] .date-choices { inset-block-start: auto; inset-block-end: calc(100% + min(.4rem, 10px)); } :where(html[data-datakar-ui="legacy"]) .date-year-choices { max-block-size: var(--date-choices-room, none); } :where(html[data-datakar-ui="legacy"]) .date-input-grid:has([data-year-inline]) { align-items: start; } :where(html[data-datakar-ui="legacy"]) .date-choice-field[data-year-inline] .date-year-choices { position: static; inline-size: 100%; max-block-size: none; overflow: visible; } :where(html[data-datakar-ui="legacy"]) .date-day-field .date-choices { inset-inline-start: auto; inset-inline-end: 0; } :where(html[data-datakar-ui="legacy"]) .date-choices-title { margin: 0 0 .25rem; font-weight: var(--dk-font-weight-bold); text-align: center; } :where(html[data-datakar-ui="legacy"]) .date-choices-navigation { display: grid; grid-template-columns: min(2.5rem, 44px) minmax(0, 1fr) min(2.5rem, 44px); align-items: center; gap: .2rem; margin-block-end: .3rem; text-align: center; } :where(html[data-datakar-ui="legacy"]) .date-choices-grid, :where(html[data-datakar-ui="legacy"]) .date-choices-grid [role="row"] { display: grid; gap: .2rem; } :where(html[data-datakar-ui="legacy"]) .date-year-choices [role="row"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(html[data-datakar-ui="legacy"]) .date-day-choices [role="row"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } :where(html[data-datakar-ui="legacy"]) .date-day-unavailable { margin-block-end: .35rem; } :where(html[data-datakar-ui="legacy"]) .date-choices button { inline-size: 100%; min-block-size: max(2.3rem, 40px); padding: 0; border: 1px solid var(--dk-color-border); border-radius: var(--dk-radius-sm); background: var(--dk-color-surface); color: var(--dk-color-text); outline-offset: -3px; cursor: pointer; } :where(html[data-datakar-ui="legacy"]) .date-choices button:disabled { color: var(--dk-color-muted); background: var(--dk-color-surface-soft); opacity: .7; cursor: default; } :where(html[data-datakar-ui="legacy"]) .date-choices button:enabled:hover, :where(html[data-datakar-ui="legacy"]) .date-choices [aria-selected="true"] button { background: var(--dk-color-surface-soft); border-color: var(--dk-color-focus); } :where(html[data-datakar-ui="legacy"]) .date-choices button[aria-current="true"] { font-weight: var(--dk-font-weight-bold); text-decoration: underline; text-underline-offset: .2em; } :where(html[data-datakar-ui="legacy"]) .date-today { margin-block-start: var(--dk-space-4); padding: clamp(.75rem, 4vw, var(--dk-space-4)); font-size: var(--dk-font-size-md); } :where(html[data-datakar-ui="legacy"]) .date-today button { inline-size: min(100%, 14rem); padding-inline: .6rem; overflow-wrap: anywhere; } :where(html[data-datakar-ui="legacy"]) .date-today-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--dk-space-2); margin-block: 0 var(--dk-space-3); } :where(html[data-datakar-ui="legacy"]) .date-today-dates dt { color: var(--dk-color-muted); font-size: var(--dk-font-size-sm); } :where(html[data-datakar-ui="legacy"]) .date-today-dates dd { margin: 0; font-weight: var(--dk-font-weight-bold); overflow-wrap: anywhere; } @media (max-width: 620px) { :where(html[data-datakar-ui="legacy"]) .date-choices { inline-size: 100%; } :where(html[data-datakar-ui="legacy"]) .date-choices button, :where(html[data-datakar-ui="legacy"]) .date-choices-navigation { font-size: min(.9375rem, 7vw); } } @media (max-height: 360px) { :where(html[data-datakar-ui="legacy"]) .global-header { position: static; } }