/* GT7 Theme Editor mock preview: the older app family (Time, Info). These apps ignore the --g7-*
   variables (the theme reaches them through explicit rules on body, .g7-button and the icon classes),
   use a 16 px base font and paint a radial gradient behind the screens. Every value measured on the
   real apps at 480 x 272 and 320 x 240. */

:root {
  --g7-color-yes: #21891f;
  --g7-color-no: #e22f22;
  --g7-color-active: #229edf;
  --g7-color-warning: #ed6c02;
  --g7-color-disabled: #959595;
  --g7-background-color: #303030;
  --g7-text-color: #f2f2f2;
  --g7-text-color-active: var(--g7-color-active);
  --g7-border-radius: 7px;
  --g7-border-width: 1px;
  --g7-border-color: #9b9b9b;
  --g7-border-color-active: var(--g7-color-active);
  --g7-button-background-color: #404040a0;
  --g7-button-background-color-active: #229edf80;
  --g7-font-size: 6vw;
}

body {
  background-color: #000;
  background-image: radial-gradient(farthest-side at 10% 50%, #153d6a 20%, #0b141d 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

/* type scale of the older apps (fixed pixels, not viewport based) */
.h4 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.text-huge { font-size: 5rem; }
.text-medium { font-size: 27px; }
.text-bottom { line-height: 1.2; }
.g7-timer-value { line-height: 1.2; }
.g7-timer-value, .g7-timer-text { text-align: center; }
.text-right { text-align: right; }
.text-success { color: #28a745; }
.text-danger { color: #dc3545; }
.text-muted { color: #6c757d; }
.text-green { color: #008000; }
.text-red { color: #ff0000; }
.border { border: 1px solid #dee2e6 !important; } /* bootstrap utility with !important on the device: a theme's .g7-button border does not reach these buttons, its background and radius do */
.rounded-10 { border-radius: 10px; }
.bg-white-20 { background-color: rgba(255, 255, 255, .2); }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.ml-3 { margin-left: 1rem; }
.mr-3 { margin-right: 1rem; }
.mt-2 { margin-top: .5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.pt-3 { padding-top: 1rem; }
.pb-3 { padding-bottom: 1rem; }
.h-75 { height: 75%; }
.h-40 { height: 40%; }
.h-10 { height: 10%; }
.w-40 { width: 40%; }
.justify-content-end { justify-content: flex-end; }
.flex-fill { flex: 1 1 auto; }

/* buttons of the older apps carry no background or border of their own (the theme's .g7-button rule adds them) */
.g7-button { cursor: pointer; }
.vd-l { width: 1px; height: 75%; border-left: 1px solid #808080; }

/* ---- idle (Time and Info share it) ---- */
.g7-idle-bg { justify-content: normal; }
.g7-idle-language { width: 48px; height: 48px; box-sizing: content-box; } /* a theme border grows the box like on the device */

/* ---- message screens ---- */
.g7-deny-icon, .g7-error-icon, .g7-locked-icon { color: #ff0000; }
.g7-unlock-icon, .g7-success-icon { color: #008000; }

/* ---- Time: duration select and confirm ---- */
.g7-time-select-bg .g7-time-select-btn-1, .g7-time-select-bg .g7-time-select-btn-2, .g7-time-select-bg .vd-l { visibility: hidden; }
.g7-confirm-btn-1, .g7-confirm-btn-5 { display: flex; justify-content: center; align-items: center; }

/* ---- Time: selection (a table with 5px spacing that fills the screen; 27px text rows and bordered button cells) ---- */
.g7-selection-bg { height: 272px; } /* the older app keeps its 272px root on the Light device too: the table fills the root, not the viewport (bottom row cut off, as on the device) */
.g7-selection-bg table { border-collapse: separate; border-spacing: 5px; line-height: normal; }
.g7-selection-bg td { padding: 1px; vertical-align: middle; }

/* ---- Time: timer (the device draws a countdown ring on the canvas; the preview leaves it empty) ---- */
.g7-timer-bg canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } /* the device's canvas covers the texts; the preview lets them be dragged */

/* ---- Info ---- */
.g7-info-btn-1, .g7-info-btn-2, .g7-info-btn-5 { display: block; }