/* Android 4.4 DeskClock: icon tabs without an underline (DeskClockTabStyle uses item_background), alarm cards,
   the round footer buttons and the dark RadialTimePicker. 1 dp = 0.906 px. */
.jbclock-app{background:#1c1e20}
.jbclock-tabs button.active::after{display:none}
.jbclock-tabs button:active{background:#ffffff26}
.kdc-page{display:flex;flex-direction:column;height:100%;min-height:0;position:relative}
.kdc-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding-bottom:4px}
.kdc-list::-webkit-scrollbar{display:none}
.kdc-alarm{border-bottom:0;position:relative}
.kdc-alarm.expanded{background:#ffffff0c}
.kdc-top{display:flex;align-items:center;margin:10.87px 10.87px 0}
.kdc-time{border:0;background:none;padding:0;color:#fff;font:300 43.49px/1.1 RobotoLight,RobotoICS,sans-serif;display:flex;align-items:baseline;gap:2px}
.kdc-time b{font:700 12.68px RobotoCondensed,'Roboto Condensed',RobotoICS,sans-serif;margin-left:1.81px}
.kdc-alarm.off .kdc-time{color:#ffffff80}
.kdc-time:active{background:#ffffff26}
/* alarm_time.xml's Switch is the Holo one of the Settings rows with android:thumbTextPadding="10dip" instead of 12: the
   thumb is 4 dp and the track 8 dp narrower. The thumb is placed in the switch itself, outside .settings-app too. */
.kdc-switch{margin-left:auto}
.screen .kdc-switch.holo-switch{position:relative;flex:none;width:88.79px!important;min-width:88.79px!important}
.screen .kdc-switch.holo-switch .switch-label{width:67.95px}
.screen .kdc-switch.holo-switch.on .switch-label{left:25.36px}
.kdc-body{position:relative}
.kdc-delete{position:absolute;right:0;top:0;border:0;background:none;padding:7.25px;z-index:1}
.kdc-delete img{width:28.99px;height:28.99px;display:block}
.kdc-expand{padding-top:2px}
.kdc-label{display:block;max-width:calc(100% - 60px);border:0;background:none;padding:10.87px 10.87px 10.87px 16.31px;color:#ffffff80;font:400 16.31px RobotoICS,sans-serif;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kdc-label.set{color:#fff}
.kdc-checkrow{display:flex;align-items:center;gap:2px;height:43.49px;border:0;background:none;padding:0 0 0 9.06px;color:#ffffff80;font:400 16.31px RobotoICS,sans-serif}
.kdc-checkrow.on{color:#fff}
.kdc-check{width:28.99px;height:28.99px}
.kdc-days{display:flex;height:43.49px;margin:0 9.06px}
.kdc-day{flex:1;min-width:0;border:0;background:none;color:#ffffff80;font:400 14.5px RobotoCondensed,'Roboto Condensed',RobotoICS,sans-serif;position:relative;padding:0}
.kdc-day::after{content:'';position:absolute;left:7.25px;right:7.25px;bottom:7.25px;height:1.81px;background:#ffffff1a}
.kdc-day.on{color:#fff;font-weight:700}
.kdc-day.on::after{background:#33b5e5cc}
.kdc-tone-row{display:flex;align-items:center;height:57.98px;margin:0 14.5px 0 9.06px}
.kdc-tone{flex:1;min-width:0;display:flex;align-items:center;gap:1.81px;border:0;background:none;padding:0;color:#fff;font:400 16.31px RobotoICS,sans-serif;text-align:left;height:100%}
.kdc-tone img{width:28.99px;height:28.99px}
.kdc-tone span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kdc-vibrate{flex:none}
.kdc-strip{display:flex;align-items:center;width:100%;height:43.49px;border:0;background:none;padding:0;position:relative;text-align:left;color:#fff}
.kdc-strip::after{content:'';position:absolute;left:7.25px;right:7.25px;bottom:0;height:.9px;background:#ffffff28}
.kdc-strip img{width:43.49px;height:28.99px;object-fit:contain;flex:none}
.kdc-summary{display:flex;gap:6px;min-width:0;margin-right:94px;font:12.68px RobotoICS,sans-serif;white-space:nowrap;overflow:hidden}
.kdc-summary-label{color:#ffffff80;overflow:hidden;text-overflow:ellipsis}
.kdc-summary-days{color:#fff;font-weight:700}
.kdc-empty{position:absolute;inset:0 0 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#ffffff4c;font:300 32.6px RobotoLight,RobotoICS,sans-serif}
.kdc-empty img{width:86.98px;height:86.98px;opacity:.3}
.kdc-footer{flex:none;position:relative;display:flex;align-items:center;justify-content:center;height:79.73px;background:linear-gradient(0deg,#1c1e20,#1c1e2000)}
.kdc-add,.kdc-round{width:50.74px;height:50.74px;border:0;border-radius:50%;background:#606060;display:grid;place-items:center;padding:0}
.kdc-add:active,.kdc-round:active{background:#909090}
.kdc-add img,.kdc-round img{width:28.99px;height:28.99px}
.kdc-menu{position:absolute;right:7.25px;top:50%;transform:translateY(-50%);width:43.49px;height:43.49px;border:0;background:none}
.kdc-menu img{width:28.99px;height:28.99px}
.jbclock-footer.kdc-clock-footer{height:79.73px;border-top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.jbclock-footer.kdc-clock-footer button{flex:none}
.jbclock-footer.kdc-clock-footer .kdc-round{width:50.74px;height:50.74px}
.jbclock-footer.kdc-clock-footer button:last-child{justify-self:end;width:43.49px;height:43.49px;margin-right:7.25px}
/* RadialTimePicker, dark theme: #363636 header (96 dp, 60 sp digits, the selected field red), the #404040 circle
   (270 dp) with white numbers, the #ff3333 hand, a #808080 line and the Done button. */
.kdc-picker{position:absolute;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;background:#363636;color:#fff;box-shadow:0 8px 24px #000a;overflow:hidden}
.kdc-picker-header{height:86.98px;display:flex;align-items:center;justify-content:center;gap:2px;font:300 54.36px/1 RobotoLight,RobotoICS,sans-serif}
.kdc-picker-header button{border:0;background:none;color:#fff;font:inherit;padding:0 2px}
.kdc-picker-header button.sel{color:#ff3333}
.kdc-picker-header .kdc-picker-ampm{font:400 14.5px RobotoICS,sans-serif;margin-left:5.44px;align-self:center}
.kdc-dial{position:relative;margin:0 auto;background:#404040;border-radius:0;touch-action:none;cursor:pointer}
.kdc-dial::before{content:'';position:absolute;inset:0;border-radius:50%;background:#404040}
.kdc-hand{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kdc-num{position:absolute;transform:translate(-50%,-50%);font:400 14.5px RobotoICS,sans-serif;color:#fff;pointer-events:none}
.kdc-num.inner{font-size:12.68px;color:#ffffffcc}
.kdc-num.sel{color:#fff;font-weight:700}
.kdc-dial-ampm{position:absolute;bottom:7.25px;width:36.24px;height:36.24px;border:0;border-radius:50%;background:#ffffff1a;color:#fff;font:400 12.68px RobotoICS,sans-serif}
.kdc-dial-ampm.left{left:7.25px}.kdc-dial-ampm.right{right:7.25px}
.kdc-dial-ampm.sel{background:#ff3333}
.kdc-picker-done{display:block;width:100%;height:43.49px;border:0;border-top:.9px solid #808080;background:none;color:#fff;font:400 12.68px RobotoICS,sans-serif}
.kdc-picker-done:active{background:#ffffff26}

/* ---- The 4.2/4.3 DeskClock pages the 4.4 alarms build on (loaded after the rules above) ---- */
/* Android 4.2/4.3 DeskClock (dark, Roboto Thin clock, AndroidClockMono counters, CircleTimerView). */
@font-face{font-family:RobotoThin;src:url('assets/Roboto-Thin.ttf') format('truetype')}
@font-face{font-family:AndroidClockMonoThin;src:url('assets/AndroidClockMono-Thin.ttf') format('truetype')}
@font-face{font-family:AndroidClockMonoLight;src:url('assets/AndroidClockMono-Light.ttf') format('truetype')}
@font-face{font-family:AndroidClockMonoBold;src:url('assets/AndroidClockMono-Bold.ttf') format('truetype')}
.jbclock-app{background:#000;color:#fff;display:flex;flex-direction:column;overflow:hidden}
.jbclock-tabs{flex:none;height:43px;display:flex;background:#000;border-bottom:1px solid #ffffff1a}
.jbclock-tabs button{flex:1;border:0;background:none;display:grid;place-items:center;position:relative}
.jbclock-tabs button img{width:29px;height:29px}
.jbclock-tabs button.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:#33b5e5}
.jbclock-tabs button:active{background:#33b5e544}
.jbclock-pager{flex:1;min-height:0;overflow:hidden;touch-action:pan-y}
.jbclock-track{display:flex;height:100%;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.jbclock-page{flex:0 0 100%;min-width:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
.jbclock-page>*{flex:1;min-height:0;display:flex;flex-direction:column}
.jbclock-footer{flex:none;height:43px;display:flex;border-top:1px solid #ffffff28;margin-top:auto}
.jbclock-footer button{flex:1;border:0;background:none;color:#fff;font:700 14px RobotoICS,sans-serif;text-transform:uppercase;display:grid;place-items:center}
.jbclock-footer button+button{border-left:1px solid #ffffff28}
.jbclock-footer button:disabled{color:#ffffff4d}
.jbclock-footer button:active:not(:disabled){background:#33b5e544}
.jbclock-footer button img{width:29px;height:29px}
.jbclock-footer.clock-buttons button{flex:0 0 58px}.jbclock-footer.clock-buttons button:nth-child(2){margin:0 auto}.jbclock-footer.clock-buttons button+button{border-left:0}
/* Clock page: bold hours with thin minutes (big_bold / big_thin, 120dp). */
.jbclock-clock{align-items:center}
.jbclock-time{margin-top:auto;display:flex;align-items:baseline;line-height:1;white-space:nowrap}
.jbclock-hours{font:700 96px/1 RobotoICS,Roboto,sans-serif;letter-spacing:-2px}
.jbclock-minutes{font:96px/1 RobotoThin,RobotoICS,sans-serif;letter-spacing:-2px}
.jbclock-time small{font:700 14px RobotoICS,sans-serif;margin-left:4px;text-transform:uppercase}
.jbclock-date{margin:6px 0 auto;display:flex;align-items:center;gap:8px;font:700 13px 'Roboto Condensed',RobotoICS,sans-serif;text-transform:uppercase;letter-spacing:.3px}
.jbclock-next{display:flex;align-items:center;gap:2px;color:#ffffff80}
.jbclock-next img{width:14px;height:14px}
/* Timer setup (TimerSetupView): H MM SS filled from the right, a 3 x 4 keypad, Cancel | Start. */
.jbclock-setup-display{flex:none;display:flex;align-items:baseline;justify-content:center;gap:1px;padding:22px 8px 8px;font:300 52px/1 AndroidClockMonoLight,RobotoICS,sans-serif;color:#ffffff4d;border-bottom:1px solid #ffffff28;margin:0 14px}
.jbclock-setup-display span.on{color:#fff}
.jbclock-setup-display small{font:700 13px RobotoICS,sans-serif;margin:0 6px 0 2px;text-transform:uppercase;color:inherit}
.jbclock-backspace{align-self:center;margin-left:4px;border:0;background:none;padding:6px}
.jbclock-backspace img{width:29px;height:29px}
.jbclock-keypad{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;padding:6px 14px}
.jbclock-keypad button{border:0;background:none;color:#fff;font:300 32px RobotoICS,sans-serif}
.jbclock-keypad button:active{background:#33b5e544}
/* CircleTimerView frame with 32dp margins and corner buttons. */
.jbclock-timers{overflow-y:auto}
.jbclock-timer{flex:none;padding:0 29px}
.jbclock-circle-frame{position:relative;width:100%;aspect-ratio:1;max-height:62vh;margin:8px auto 0;display:grid;place-items:center}
.jbclock-circle{position:absolute;inset:0;width:100%;height:100%}
.jbclock-count{font:300 46px/1 AndroidClockMonoThin,RobotoICS,sans-serif;white-space:nowrap}
.jbclock-count.stopwatch{font-size:40px}
.jbclock-timer.done .jbclock-count{font:700 26px RobotoICS,sans-serif;color:#ff4444;text-transform:uppercase}
.jbclock-label{position:absolute;top:62%;display:flex;align-items:center;gap:4px;font-size:13px;color:#ffffff80}
.jbclock-label img{width:16px;height:16px;opacity:.7}
.jbclock-corner{position:absolute;bottom:0;width:50px;height:50px;border:0;background:none;display:grid;place-items:center}
.jbclock-corner.left{left:0}.jbclock-corner.right{right:0}
.jbclock-corner img{width:29px;height:29px}
.jbclock-center{position:absolute;bottom:0;left:50%;transform:translateX(-50%);border:0;background:none;color:#fff;font:700 15px RobotoICS,sans-serif;text-transform:uppercase;padding:9px 12px}
.jbclock-corner:active,.jbclock-center:active{background:#33b5e544}
.jbclock-stopwatch .jbclock-circle-frame{width:calc(100% - 58px)}
.jbclock-laps{flex:1;min-height:0;overflow-y:auto;margin:6px 0 0;padding:0 14px;list-style:none;border-top:1px solid #ffffff1a}
.jbclock-laps li{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;padding:6px 4px;font:15px AndroidClockMonoLight,RobotoICS,sans-serif;border-bottom:1px solid #ffffff12}
.jbclock-laps li span:first-child{color:#ffffff80;font-family:RobotoICS,sans-serif}
.jbclock-laps li span:last-child{text-align:right;color:#ffffff80}
.jbclock-clock>.jbclock-footer{align-self:stretch}
/* World clock (dp x 0.9): world_clock_list_item rows 32 dp in, two cities each (medium_space 24 / 8 dp), the 60 dp bold
   hours with light minutes, the 14 sp bold condensed label; CitiesActivity: the 8 / 32 dp padded list, 64 dp
   city_list_item rows (24 sp bold condensed name, 16.2px time in clock_gray, the check box) under 14 sp header letters. */
.jbclock-clock.has-cities .jbclock-time{margin-top:21.6px}
.jbclock-clock.has-cities .jbclock-date{margin-bottom:0}
.jbclock-world{flex:1;min-height:0;align-self:stretch;overflow-y:auto;scrollbar-width:none;padding:0 28.8px}
.jbclock-city-row{display:flex}
.jbclock-city{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:21.6px 0 7.2px}
.jbclock-city-time{display:flex;align-items:baseline;line-height:1;white-space:nowrap}
.jbclock-city-time b{font:700 54px/1 RobotoICS,Roboto,sans-serif;margin-right:16.2px}
.jbclock-city-time span{font:54px/1 RobotoLight,RobotoICS,sans-serif}
.jbclock-city-time small{font:700 12.6px 'Roboto Condensed',RobotoICS,sans-serif;margin-left:3.6px;text-transform:uppercase}
.jbclock-city-label{display:flex;gap:3.6px;max-width:100%;margin-top:1.8px;font:700 12.6px 'Roboto Condensed',RobotoICS,sans-serif;text-transform:uppercase;white-space:nowrap}
.jbclock-city-label span{overflow:hidden;text-overflow:ellipsis}
.jbclock-city-label em{font-style:normal;color:#ffffff80}
.jbclock-cities{background:#000}
.jbclock-ab{flex:none;height:43.2px;display:flex;align-items:center;background:#1a1a1a;border-bottom:1.8px solid #33b5e5}
.jbclock-ab h2{flex:1;margin:0;font:400 16.2px RobotoICS,sans-serif;color:#fff}
.jbclock-up{display:flex;align-items:center;height:100%;padding:0 7.2px 0 0;border:0;background:none}
.jbclock-up img:first-child{width:14.4px;height:28.8px}
.jbclock-up img+img{width:28.8px;height:28.8px}
.jbclock-ab-menu{width:43.2px;height:100%;border:0;background:none;display:grid;place-items:center}
.jbclock-ab-menu img{width:28.8px;height:28.8px}
.jbclock-ab button:active{background:#33b5e544}
.jbclock-city-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:0 28.8px 0 7.2px}
.jbclock-city-header{margin:0;padding:7.2px 7.2px 3.6px;border-bottom:1.8px solid #ffffff33;font:700 12.6px RobotoICS,sans-serif;color:#fff;text-transform:uppercase}
.jbclock-city-item{display:flex;align-items:center;width:100%;min-height:57.6px;padding:0 7.2px;border:0;background:none;text-align:left;color:#fff}
.jbclock-city-item:active{background:#33b5e544}
.jbclock-city-item span{flex:1;min-width:0;display:flex;flex-direction:column}
.jbclock-city-item b{font:700 21.6px 'Roboto Condensed',RobotoICS,sans-serif;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jbclock-city-item small{font:16.2px RobotoICS,sans-serif;color:#ffffff80;text-transform:uppercase}
.jbclock-city-item img{flex:none;width:28.8px;height:28.8px}