/* GT7 Theme Editor mock preview: the Time & Attendance app (Corporate Security line). The app reads
   no --g7-* variables; a theme reaches it through explicit class rules. The device configuration
   paints the function-button, header and balance colours inline; the mock carries the same inline
   colours so `auto` in the theme keeps them. Every value measured on the real app at 480 x 272 and
   320 x 240 (its layout is pixel based and only re-flows). */

body {
  background-color: #003863;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 700; line-height: 1.2; }
h1 { font-size: 4rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
.text-medium { font-size: 1rem; }
.text-left { text-align: left; }
.text-red { color: #ff0000; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.position-relative { position: relative; }
.mx-2 { margin-left: .5rem; margin-right: .5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.mx-5 { margin-left: 3rem; margin-right: 3rem; }
.ml-3 { margin-left: 1rem; }
.h-75 { height: 75%; }
.h-50 { height: 50%; }
.flex-wrap { flex-wrap: wrap; }
.align-content-stretch { align-content: stretch; }
.justify-content-end { justify-content: flex-end; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }
.fa-4x { font-size: 4em; }

/* the stock outline shadow behind the big texts (theme option "Textschatten") */
.g7-time, .g7-date, .g7-time-small, .g7-taa-content-text { text-shadow: -1px 0 0 #000, 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 0 7px #000; }

/* ---- screen frame ---- */
.g7-taa-screenconainer { display: flex; flex-direction: column; overflow: hidden; }
.g7-taa-screen-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 16px; }
.g7-taa-screen-content.align-items-center { padding-top: 22px; }
.g7-taa-welcome-screen > div { display: flex; }
.g7-taa-welcome-screen > div > div { flex-grow: 1; }
.taa-time-colon { display: inline-block; position: relative; font-size: .9em; text-align: center; }
.g7-time .taa-time-colon { width: 16px; top: -4px; }
.g7-time-small .taa-time-colon { width: 5px; top: -1px; }
h3.g7-taa-content-text { margin-bottom: 14px; text-align: center; }
h3.g7-time-small { text-align: center; }

/* header of the function, choice and balances screens (colour per view, painted inline) */
.g7-taa-screen-header { margin: 0 10%; height: 32px; border-radius: 0 0 8px 8px; text-align: center; }
.g7-taa-screen-header-inner { display: flex; justify-content: center; margin: .1rem 0 .4rem; height: 24px; }
.g7-taa-screen-header-inner-icon { display: block; width: 16px; height: 24px; }
.g7-taa-screen-header-inner-text { display: flex; flex-direction: column; margin: 0 .5rem; height: 1.4em; overflow: hidden; font-weight: 700; }
.g7-action-home { position: absolute; top: 0; right: 0; padding: 5px 10px; opacity: .6; text-align: center; display: block; line-height: 1; cursor: pointer; }
.g7-action-switchlanguage { position: absolute; top: 0; left: calc(1rem / 3); padding: 4px; opacity: .6; width: 24px; height: 24px; display: block; line-height: 1; cursor: pointer; }
section[data-screen="welcome"] .g7-taa-screen-header { display: none; }
html.g7-discreet section[data-screen="welcome"] .g7-taa-screen-header { display: block; }

/* ---- welcome: the function buttons ---- */
.g7-taa-buttonbar { display: flex; height: 64px; }
.g7-taa-buttoncontainer { flex: 1 1 0; display: flex; margin-left: 4px; padding-top: 6px; }
.g7-taa-buttoncontainer:last-child { margin-right: 4px; }
.g7-taa-button { position: relative; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; height: 58px; border-radius: 4px 4px 0 0; color: #fff; cursor: pointer; }
.g7-taa-button-icon-container { display: flex; justify-content: center; }
.g7-taa-button-stripe { position: absolute; left: 0; right: 0; top: 68px; height: 5px; display: block; }
.g7-taa-button-icon { display: flex; justify-content: center; font-size: 1.2em; width: 1em; height: 1em; }
.g7-taa-button-icon svg { display: block; width: 1em; height: 1em; }
.g7-taa-button-icon-large { font-size: 2em; }
.g7-taa-button-text { display: flex; justify-content: center; font-size: 1rem; line-height: 1; text-align: center; }

/* ---- choose reason ---- */
.g7-choice-buttonarea { display: flex; flex-wrap: wrap; flex-grow: 1; }
.g7-choice-buttoncontainer { width: 33.3333%; height: 33.3333%; padding: 8px; display: flex; flex-direction: column; }
.g7-choice-button { position: relative; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; border-radius: .3rem; background-color: #4682b4; text-align: center; cursor: pointer; }
.g7-choice-button-text { font-size: 13px; line-height: 1.5; font-weight: 700; color: #fff; text-decoration: none; }

/* ---- granted and denied messages ---- */
.g7-granted-bg, .g7-denied-bg { padding: 16px; }
.g7-icon-container { display: block; text-align: center; margin-bottom: .5rem; }
.g7-symbol-text.g7-taa-content-text { font-weight: 700; margin-bottom: .5rem; }

/* ---- balances ---- */
.g7-balances-container { justify-content: flex-start; padding: 16px 16px 0; }
.g7-balances-item { display: flex; padding: 2px 6px; margin-bottom: 2px; }
.g7-balance-key { flex: 1 1 auto; }
.g7-balance-value { text-align: right; }
.g7-balance-buttonbar { display: flex; margin: 0 2.5%; height: 46px; border-radius: 8px 8px 0 0; opacity: .9; }
.g7-third { width: 33.3333%; display: flex; flex-direction: column; justify-content: center; }
.g7-balance-button-nav { display: block; position: relative; padding: 8px 0 6px; text-align: center; color: #4682b4; cursor: pointer; }

/* ---- language ---- */
.g7-language-bg { background-color: #fff; opacity: .8; padding: 16px; }
.g7-language-language-option { cursor: pointer; }
.g7-language-language-option-icon { display: block; width: 32px; height: 32px; }
.g7-language-btn-5 { display: block; cursor: pointer; }