/* GT7 Theme Editor: Central Locker mock stylesheet. Our own stylesheet for the preview of the Central Locker
   app (a newer app generation than the other Leisure apps: it reads no --g7-* variables). Every value is
   measured on the real app; no Gantner code. The real app scopes each screen's rules to its component
   (class plus an attribute); here each screen's section carries a scope class (cl-idle, cl-lockers,
   cl-symbol, cl-countdown, cl-number) so a rule keeps the same specificity as on the device and a theme or
   a user's custom CSS wins or loses as it does there. */

body { font-size: 1rem; line-height: 1.5; text-align: left; color: #fff; background-color: #061a40; font-family: "Noto Sans Light", sans-serif; font-weight: 500; }
ul { margin-top: 0; margin-bottom: 1rem; }
img, svg { vertical-align: middle; }
svg { overflow: hidden; }
/* the app's root element fills the screen with position: fixed (the browser then draws the screens on their own
   layer, which also decides how text is antialiased): each screen section does the same */
section.g7-screen { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: auto; height: auto; }
/* the theme picture spans the screen width at its own proportions (no cover crop as in the other apps) */
img.background { height: auto; object-fit: fill; }

/* app-wide utilities the screens use */
.text-red { color: #e32a2c; }
.text-red-disabled { color: #804d4d; }
.border-red-disabled { border-color: #804d4d !important; }
.font-weight-bold { font-weight: 700 !important; }
.g7-info-icon { color: #fff; }
.g7-error-icon { color: red; }
.g7-countdown-clockmarks-post { stroke: #95c221; }
.g7-countdown-clockmarks-pre { stroke: rgba(149, 194, 33, .32); }
.g7-button:active { color: #a3a8ac; opacity: .7; }

/* idle */
.cl-idle .idle-main { position: absolute; top: 0; bottom: 33vh; left: 0; right: 0; display: flex; width: 100vw; height: 67vh; text-align: center; color: #fff; }
.cl-idle .idle-main-text { display: flex; flex-direction: column; width: 100vw; color: #fff; align-items: center; justify-content: center; padding: 0 22vw; }
.cl-idle .idle-main-welcome-text { display: flex; width: 100%; justify-content: center; font-size: 7vw; }
.cl-idle .idle-main-present-identification-text { display: flex; width: 100%; justify-content: center; font-size: 5vw; margin: .5rem 0 0; }
.cl-idle .idle-main-icon { position: absolute; top: 0; bottom: 0; left: 78vw; right: 0; width: 22vw; display: flex; color: #fff; align-items: center; justify-content: center; }
.cl-idle .idle-footer { position: fixed; width: 100vw; height: 33vh; left: 0; bottom: 0; background-color: #03002b; color: #fff; }
.cl-idle .idle-footer-date-time { height: 33vh; display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 5vw; line-height: 1; }
.cl-idle .idle-clock { font-size: 5vw; }
.cl-idle .idle-footer-icon { width: 100vw; height: 33vh; text-align: center; padding: 1.5vh 0 0; }
.cl-idle .idle-footer-icon-with-numpad { width: 78vw; }
.cl-idle .idle-footer-pin { position: fixed; bottom: 0; right: 0; width: 22vw; height: 33vh; border-left: 1px solid rgba(132, 146, 166, .21); text-align: center; padding: 1.5vh 0 0; }
.cl-idle .number-pad-svg-container { position: absolute; right: 7vw; }
.cl-idle .pad-without-text { top: 8vh; width: 8vw; }
.cl-idle .double-chevron-down-svg-container { position: absolute; top: 7.5vh; width: 20vw; height: 19vh; left: 40vw; }
.cl-idle .scheme-dark { background-color: #03002b; color: #fff; }

/* locker selection */
.cl-lockers .locker-selection-main { position: absolute; top: 0; bottom: 33vh; left: 0; right: 0; display: flex; width: 100vw; height: 80vh; text-align: center; color: #fff; }
.cl-lockers .locker-selection-arrow { position: relative; top: 0; left: 0; width: 12vw; height: 65vh; padding: 1.7rem 0 0; }
.cl-lockers .single-chevron-svg-container { position: relative; top: 20vh; left: 4vw; width: 4vw; height: 13.2vh; }
.cl-lockers .locker-selection-locker-tiles { width: 76vw; height: 55vh; margin: 1.7rem 0 1rem; position: relative; list-style-type: none; padding: 0; }
.cl-lockers .locker-tile { position: absolute; top: 0; width: 37vw; height: 55vh; margin: 0 .5rem; border: 1px solid #FFFFFF; border-radius: 4px; background: #03002b; }
.cl-lockers .locker-tile:nth-child(1) { margin: 0 .5rem 0 0; left: 0; }
.cl-lockers .locker-tile:nth-child(2) { margin: 0 0 0 .5rem; right: 0; }
.cl-lockers .locker-tile-header { width: 33.4vw; height: 14vh; position: relative; margin: .5rem .5rem 0; }
.cl-lockers .locker-tile-header-lock-status { position: absolute; left: 0; }
.cl-lockers .locker-tile-header-status { position: absolute; left: 26.6vw; }
.cl-lockers .locker-tile-main { min-height: 25vh; display: flex; justify-content: center; align-items: center; margin: 0 .5rem; }
.cl-lockers .locker-label { max-width: 100%; font-size: 8vw; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; line-break: anywhere; }
.cl-lockers .locker-tile-footer { display: flex; justify-content: flex-end; align-items: flex-end; margin: 0 .5rem .5rem 0; }
.cl-lockers .lock-open-svg-container { width: 7.8vw; height: 14vh; }
.cl-lockers .locker-selection-footer { position: fixed; width: 100vw; height: 20vh; left: 0; bottom: 0; margin: .2rem 0; }
.cl-lockers .footer-icons-container { position: relative; width: 100vw; height: 20vh; }
.cl-lockers .footer-icon-container { display: inline-block; position: absolute; width: 24vw; height: 20vh; border-right: 1px solid #42526e; }
.cl-lockers .footer-icon-container:last-child { border-right: none; }
.cl-lockers .magnifying-glass-svg-container { position: absolute; top: 2.5vh; right: 6.1vw; width: 8.5vw; height: 15vh; }
.cl-lockers .cancel-svg-container { position: absolute; top: 3vh; right: 8.5vw; width: 8vw; height: 14vh; }

/* messages with the icon on the left (locker opened = info message, denied) */
.cl-symbol .symbol-main { height: 100vh; width: 100vw; display: flex; }
.cl-symbol .symbol-container { display: inline-flex; justify-content: flex-end; align-items: center; height: 100vh; width: 20vw; margin: 0 2rem; }
.cl-symbol .text-container { display: inline-flex; justify-content: flex-start; align-items: center; height: 100vh; width: 80vw; margin: 0 1rem 0 0; }
.cl-symbol .symbol-text { font-size: 6vw; line-height: 17vh; text-align: start; }

/* countdown */
.cl-countdown .countdown { height: 100vh; width: 100vw; }
.cl-countdown .countdown-pre { height: 100vh; width: 100vw; display: flex; }
.cl-countdown .clock-container { display: inline-flex; justify-content: flex-end; align-items: center; height: 100vh; width: 40vw; margin: 0 2rem; }
.cl-countdown .clock-svg-container { width: 27.8vw; height: 50vh; }
.cl-countdown .clock-text { font-size: 8vw; text-align: center; }
.cl-countdown .text-container-pre { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100vh; width: 60vw; }
.cl-countdown .countdown-text { font-size: 6vw; line-height: 17vh; text-align: start; }

/* PIN entry: the PIN process's screen (app-sync-screen-number-input), its component's rules */
.cl-number .number-input-main { display: flex; height: 100vh; width: 100vw; }
.cl-number .number-pin-pad { display: flex; height: 100vh; width: 50vw; padding: 1.7rem 1.3rem 1.7rem 0; justify-content: flex-end; flex-wrap: wrap; align-content: space-between; }
.cl-number .number-key { display: flex; height: 17.6vh; width: 13.2vw; justify-content: center; align-items: center; border: 2px solid #42526E; border-radius: 3px; font-size: 7.3vw; line-height: 17vh; text-align: center; margin: 0 0 0 .4rem; background-color: #03002b; }
.cl-number .number-key:active { background: #EFF2F7; }
.cl-number .number-key-placeholder { display: flex; height: 17.6vh; width: 13.2vw; }
.cl-number .number-key-del { color: #e32a2c; border-color: #e32a2c; }
.cl-number .number-input-display { display: flex; height: 80vh; width: 50vw; flex-direction: column; flex-grow: 1; align-items: flex-end; padding: 1.7rem 1.7rem 0 0; overflow-wrap: anywhere; }
.cl-number .number-title { display: flex; font-size: 1.2rem; text-align: center; }
.cl-number .number-input-display-footer { position: fixed; width: 48vw; height: 20vh; right: 0; bottom: 0; margin: .2rem 0; }
.cl-number .footer-icons-container { position: relative; right: 0; width: 48vw; height: 20vh; }
.cl-number .footer-icon-container { display: inline-block; position: absolute; width: 24vw; height: 20vh; border-right: 1px solid #42526e; }
.cl-number .footer-icon-container:last-child { border-right: none; }
.cl-number .cancel-svg-container { position: absolute; top: 3vh; right: 8.5vw; width: 8vw; height: 14vh; }
.cl-number .confirm-svg-container { position: absolute; top: 3vh; right: 6.1vw; width: 8vw; height: 14vh; }
.cl-number .input-field-container { display: flex; justify-content: center; align-items: center; margin-top: 2rem; width: 100%; }
.cl-number .input-field { display: flex; align-items: center; border: 2px solid #42526E; border-radius: 6px; background: #03002b; padding: .7rem 1.2rem; min-width: 18vw; width: 340px; max-width: 90vw; min-height: 3.5rem; font-size: 2rem; position: relative; }
.cl-number .input-value { flex: 1; color: #fff; font-size: 1rem; letter-spacing: .3vw; word-break: break-all; display: flex; align-items: center; flex-wrap: wrap; max-width: 220px; }
.cl-number .input-value svg { margin-right: .1rem; margin-bottom: .3rem; }
.cl-number .toggle-btn { display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: .5rem; width: 1.4rem; height: 1.4rem; }