*, *:before, *:after { box-sizing: border-box; } body { line-height: 1.6; font-family: 'Inter', sans-serif; } .location-search { position: relative; max-width: 38rem; margin: 1rem auto; padding: 0 1rem; } .location-search__input { width: 100%; border: 1px solid #ddd; border-radius: 0.75rem; padding: 0.75rem 0.875rem; font: inherit; } .location-search__dropdown { position: absolute; left: 1rem; right: 1rem; top: calc(100% + 0.25rem); background: #fff; border: 1px solid #ddd; border-radius: 0.75rem; max-height: 18rem; overflow: auto; z-index: 5; } .location-search__results { list-style: none; margin: 0; padding: 0; } .location-search__item { width: 100%; border: 0; border-bottom: 1px solid #f0f0f0; background: transparent; text-align: left; padding: 0.625rem 0.75rem; font: inherit; cursor: pointer; } .location-search__item:hover { background: #fafafa; } .location-search__state { padding: 0.75rem; color: #666; } p { margin: 0; } p + p { margin-top: 1rem; } .text--numeric { font-variant: tabular-nums; letter-spacing: -0.03em; } .text--center { text-align: center; } .text--arabic { font-family: 'Noto Sans Arabic', Inter, sans-serif; line-height: 1; } .text--time { font-size: 1.5em; } .table-wrapper { padding: 0 2rem; max-width: 66%; margin: auto; } @media (max-width: 768px) { .table-wrapper { max-width: 100%; padding: 0 1rem; } .salath-table { font-size: 1.375rem; } .clock { font-size: 3rem; } } .salath-table { font-size: 2rem; font-weight: 600; width: 100%; vertical-align: middle; } td { padding: 0.25rem 0.5rem; } .cell-names { white-space: nowrap; } .cell-times { white-space: nowrap; text-align: right; } .salath-name { } .current { color: tomato; } .salath-name + .salath-name:before { content: '/'; opacity: 0.25; margin: 0 0.5em; } .salath-time { font-weight: 700; } .clock { font-size: 4rem; font-weight: bold; } .current-salath { font-weight: bold; font-size: 1.5rem; }