/* Theia own site (27.09.2026): wheel for the booking start time, see public/assets/js/time-wheel.js. The panel lives in : rules of div.page-booking div.input-item would restyle every div, span and button inside. */ .time-wheel { position: absolute; z-index: 10001; /* over the Zalo button (#arcontactus, 10000), under the header menu */ display: none; box-sizing: border-box; padding: 12px; background: #fff; border: 1px solid #d8d8d8; border-radius: 2px; box-shadow: 0 12px 32px rgba(72, 72, 72, .16); font-family: Roboto, sans-serif; } .time-wheel.is-open { display: block; animation: time-wheel-in .16s ease-out; } @keyframes time-wheel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .time-wheel__cols { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 240px; height: 200px; /* 5 rows of 40px */ margin: 0 auto; } .time-wheel__cols::before { /* the band of the picked row */ content: ""; position: absolute; left: 0; right: 0; top: 80px; height: 40px; background: #f1f0ed; border-top: 1px solid rgba(155, 126, 61, .45); border-bottom: 1px solid rgba(155, 126, 61, .45); pointer-events: none; } .time-wheel__col { position: relative; flex: 1 1 0; height: 200px; margin: 0; padding: 80px 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); -webkit-tap-highlight-color: transparent; } .time-wheel__col::-webkit-scrollbar { display: none; } .time-wheel__col:focus-visible { box-shadow: inset 0 0 0 1px #9b7e3d; } .time-wheel__col li { height: 40px; line-height: 40px; text-align: center; font-size: 18px; font-weight: 400; color: #9a9a9a; scroll-snap-align: center; cursor: pointer; user-select: none; transition: color .12s; } .time-wheel__col li.is-picked { color: #484848; font-size: 22px; font-weight: 600; } .time-wheel__colon { position: relative; flex: 0 0 auto; font-size: 22px; font-weight: 600; line-height: 40px; color: #9b7e3d; } .time-wheel__done { display: block; width: 100%; margin-top: 12px; padding: 11px 16px; border: 0; border-radius: 2px; background: #896f51; color: #fff; font-family: Roboto, sans-serif; font-size: 14px; font-weight: 600; line-height: 22px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; } .time-wheel__done:hover { background: #615446; }