html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow-x: hidden; background-color: #f0f0f0; color: #333; font-family: Arial, sans-serif; } app-scan, app-loader, app-nosupport, app-user-password-reset, app-userselect, app-login, app-pin, app-pattern, app-root, app-popups, app-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } app-loader { display: flex; align-items: center; justify-content: center; background: #fff; } app-loader .spinner { width: 50px; height: 50px; border: 5px solid #ccc; border-top: 5px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; margin: auto; } app-nosupport .grid { display:grid; height: 100%; } app-nosupport .grid .grid_content { margin: auto; } body.startup app-scan, body.startup app-user-password-reset, body.startup app-userselect, body.startup app-login, body.startup app-pin, body.startup app-pattern, body.startup app-root { display: none; } body app-user-password-reset, body app-userselect, body app-loader, body app-nosupport, body app-login, body app-pin, body app-pattern { color:white; background: linear-gradient(135deg, #4A90E2, #9013FE); } app-user-password-reset { z-index: 600; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } app-loader { z-index: 900; } app-nosupport { z-index: 800; } app-popups { z-index: 700; } app-overlay { z-index: 650; } app-user-password-reset { z-index: 600; } app-userselect { z-index: 550; } app-login { z-index: 500; } app-pin, app-pattern { z-index: 400; } app-scan { z-index: 350; } app-settings { z-index: 300; } app-nav { z-index: 200; } app-ios-install-prompt { z-index: 150; } app-header { z-index: 150; } app-global-popups { z-index: 125; } app-main { z-index: 100; width: 100%;} app-userselect { flex-direction: column; align-items: center; justify-content: center; } app-userselect .auth-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; text-align: center; } app-userselect .user-select-list { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 300px; } app-userselect .user-select-entry { background: #f5f5f5; padding: 1rem; border-radius: 8px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: background 0.2s; color: #666; } app-userselect .user-select-entry:hover { background: #d8d8d8; } app-userselect .user-select-entry .user-name { font-size: 1.1rem; font-weight: 500; } app-userselect .user-select-entry .user-email { font-size: 0.9rem; } app-userselect .user-select-entry .user-role { font-size: 0.7rem; } app-userselect .auth-alt-login { margin-top: 2rem; font-size: 0.9rem; cursor: pointer; text-decoration: underline; } app-userselect .auth-alt-login:hover { color: #ffffff; } app-user-password-reset .page_wrapper { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; color: black; } app-user-password-reset .reset_box { width: calc( 100% - 60px ); max-width: 400px; padding: 30px; background: white; border-radius: 8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); display: grid; } app-user-password-reset .reset_box .reset_option { display: grid; padding: 10px 0px; } app-user-password-reset h2 { margin-top: 0; text-align: center; font-weight: 400; } app-user-password-reset input { padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 5px; width: 100%; box-sizing: border-box; } app-user-password-reset button.finish_button { width: 100%; padding: 12px; background: #4A90E2; border: none; border-radius: 15px; font-size: 16px; cursor: pointer; color: white; margin-top: 20px; } app-user-password-reset .password-field-wrap .password-inline { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; background: #fff; overflow: hidden; } app-user-password-reset .password-field-wrap .password-inline input { flex: 1; padding: 8px; border: none; font-size: 13px; font-family: Arial, sans-serif; color: #333; background: transparent; } app-user-password-reset .password-field-wrap .password-inline .toggle-password { background: none; border: none; padding: 0 12px; height: 100%; font-size: 16px; color: #555; cursor: pointer; display: flex; align-items: center; justify-content: center; } app-user-password-reset .password-field-wrap .generate-password { margin-top: 5px; background: #007bff; border: 1px solid #bbb; color: white; padding: 6px 12px; font-size: 13px; border-radius: 5px; cursor: pointer; transition: background 0.2s ease; font-family: Arial, sans-serif; } app-user-password-reset .password-field-wrap .generate-password:hover { background: #0056b3; border-color: #0056b3; } app-user-password-reset .password-field-wrap .password-strength { display: inline-block; font-size: 12px; color: #666; margin-left: 10px; } app-user-password-reset .password-field-wrap .password-strength .level.strength-0 { color: #a00; } app-user-password-reset .password-field-wrap .password-strength .level.strength-1 { color: #c60; } app-user-password-reset .password-field-wrap .password-strength .level.strength-2 { color: #aa0; } app-user-password-reset .password-field-wrap .password-strength .level.strength-3 { color: #4a0; } app-user-password-reset .password-field-wrap .password-strength .level.strength-4, app-user-password-reset .password-field-wrap .password-strength .level.strength-5 { color: #080; } app-login { display: none; position: fixed; height: 100%; width: 100%; top: 0; left: 0; justify-content: center; align-items: center; } app-login .auth_wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: transparent; } app-login .auth_wrapper .auth_container { border-radius: 15px; padding: 40px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); background-color: white; width: 90%; max-width: 400px; text-align: center; } app-login .auth_wrapper .logo_container { margin-bottom: 30px; } app-login .auth_wrapper .logo_container .logo { max-width: 150px; height: auto; } app-login .auth_wrapper .login_form form { display: flex; flex-direction: column; gap: 15px; } app-login .auth_wrapper .login_input { padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 5px; width: 100%; box-sizing: border-box; } app-login .auth_wrapper .login_input:focus { border-color: #4A90E2; outline: none; box-shadow: 0 0 4px rgba(74, 144, 226, 0.8); } app-login .auth_wrapper .login_button { padding: 12px; font-size: 1rem; background: #4A90E2; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s; } app-login .auth_wrapper .login_button:hover { background: #357ABD; } app-login .auth_wrapper .login_button:disabled, app-login .auth_wrapper .login_button:disabled:hover, app-login .auth_wrapper .login_button:active, app-login .auth_wrapper .login_button:active:hover { background: #CCC; } app-pattern .user_pattern_input_wrapper { display: flex; flex-direction: column; align-items: center; background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); width: 90%; max-width: 400px; margin: auto; } app-pattern .pattern_setup_container { text-align: center; width: 100%; } app-pattern #pattern_prompt , app-pattern #pattern_welcome_name { font-size: 1.5rem; margin-bottom: 20px; color: #333; } app-pattern .pattern_container { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 20px; justify-content: center; } app-pattern .line_container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } app-pattern .pattern_dot { width: 60px; height: 60px; background: #E5E5E5; border: 2px solid #333; border-radius: 50%; display: inline-block; touch-action: none; transition: background 0.3s; justify-self: center; } app-pattern .pattern_dot.active { background: #4A90E2; } app-pattern .line { position: absolute; background: #4A90E2; transform-origin: top left; height: 4px; } app-pin .user_pin_input_wrapper { display: flex; flex-direction: column; align-items: center; background: white; padding: 20px 20px 30px 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); width: 90%; max-width: 400px; margin: auto; } app-pin .pin_setup_container { text-align: center; width: 100%; } app-pin #pin_prompt, app-pin #pin_welcome_name { font-size: 1.5rem; margin-bottom: 20px; color: #333; } app-pin .pin_display { background: #fff; border: 2px solid #333; border-radius: 10px; padding: 15px 25px; font-size: 3rem; letter-spacing: 12px; color: #333; text-align: center; margin-bottom: 20px; height: 50px; user-select: none; } app-pin .pin_numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; justify-items: center; margin-bottom: 15px; } app-pin .pin_numpad button { width: 64px; height: 64px; background: #E5E5E5; border: 2px solid #333; border-radius: 50%; font-size: 1.5rem; color: #333; cursor: pointer; transition: background 0.3s; } app-pin .pin_numpad button:hover { background: #8cbaf0; color: #fff; scale: 1.05; } app-pin .pin_numpad button:active { background: #4A90E2; color: #fff; scale: 1.15; } app-pin .login_as_diffrent_user, app-pattern .login_as_diffrent_user { margin-top: 2rem; font-size: 0.9rem; cursor: pointer; text-decoration: underline; color: #666; } app-popups:not(:empty)::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(3px); z-index: 701; pointer-events: none; } app-popups:not(:empty) { display: flex; flex-direction: column-reverse; position: fixed; inset: 0; overflow-y: auto; align-items: center; pointer-events: none; scroll-behavior: smooth; z-index: 702; gap: 1rem; margin: 10px 0px; height: calc(100% - 20px); } popup { background: white; width: calc( 100% - 20px ); margin: 0px 10px; max-width: 500px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); pointer-events: auto; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; z-index: 702; min-height: fit-content; } popup.minimized { overflow: hidden; } popup .popup-header { background: #f6f6f6; padding: 1rem; font-weight: bold; border-bottom: 1px solid #ddd; user-select: none; } popup .popup-body { padding: 1rem; border-bottom: 1px solid #eee; } popup .popup-footer { padding: 0.75rem 1rem; text-align: right; } popup.minimized .popup-body, popup.minimized .popup-footer { display: none; } popup .popup-footer { display: flex; justify-content: space-evenly; gap: 1rem; padding: 0.75rem 1rem; } .popup-footer button { min-width: 100px; padding: 12px 0; font-size: 16px; font-weight: 600; border: none; border-radius: 6px; background: #3c88ec; color: white; cursor: pointer; transition: all 0.2s ease-in-out; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .popup-footer button:hover { background: #2f6fd0; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } .popup-footer button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } app-header { position: fixed; top: 0; left: 0; width: 100%; height: 56px; background: white; border-bottom: 1px solid #ccc; } #app-body-wrapper { display: flex; margin-top: 56px; height: calc(100vh - 56px); width: 100%; overflow: hidden; } app-nav { margin: 0; padding: 12px; position: fixed; top: 56px; height: calc(100% - 80px); left: 0; width: 400px; max-width: 90vw; background: white; box-shadow: 2px 0 8px rgba(0,0,0,0.2); transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-x: hidden; } app-nav.slide-left:not(.hidden) { transform: translateX(0%); } app-nav .menu-row { margin: 10px 0; padding: 14px 16px; background: linear-gradient(to right, #edf2ff, #dce6ff); border-radius: 8px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; font-size: 18px; font-weight: 500; color: #2c3e50; } app-nav .menu-row:hover { transform: translateX(4px); background: linear-gradient(to right, #dce6ff, #c3d4ff); box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); } app-nav .menu-row .menu-main { display: flex; align-items: center; flex: 1; gap: 10px; } app-nav .menu-row .menu-icon, icon { width: 28px; font-size: 22px; text-align: center; color: #3b5998; } app-nav .menu-row .menu-actions { display: none; position: absolute; left: -150px; top: 0; height: 100%; flex-direction: row; background: #f4f4f4; border-top-left-radius: 8px; border-bottom-left-radius: 8px; overflow: hidden; column-gap: 10px; } app-nav .menu-row .menu-actions.small { left: -75px; } app-nav .menu-row .menu-actions .btn-unload, .btn-update { padding: 10px; min-width: 60px; background: #ccc; border: none; font-size: 14px; display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; border-radius: 15px; color: white; } app-nav .menu-row .menu-actions .btn-unload { background: #ff7070; } app-nav .menu-row .menu-actions .btn-update { background: #70c1ff; } #app-wss-status { height: 6px; width: 100%; background: linear-gradient(to bottom, rgba(0,0,255,0.8), rgba(0,0,255,0.6), white 8px); transition: background 0.3s ease; } #app-wss-status.online { background: linear-gradient(to bottom, rgba(0,128,0,0.8), rgba(0,255,0,0.6), white 8px); transition: background 0.3s ease; } #app-wss-status.offline { background: linear-gradient(to bottom, rgba(128,0,0,0.8), rgba(255,0,0,0.6), white 8px); transition: background 0.3s ease; } #app-progress-status { position: fixed; top: 6px; left: 0; height: 4px; width: 0%; background: linear-gradient(to right, #007bff, #00d4ff); z-index: 999; transition: width 0.5s ease; pointer-events: none; } #app-progress-status .shimmer { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: rgba(255, 255, 255, 0.4); filter: blur(4px); animation: shimmer 1.2s linear infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(200%); } } app-header .flex { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px; justify-content: space-between; } @media only screen and (max-width: 768px) { app-header .flex .menu-button.flex { max-width: 400px; overflow: hidden; } } .menu-button { font-size: 26px; cursor: pointer; user-select: none; transition: transform 0.2s ease; padding-bottom: 9px; } .menu-button:hover { transform: scale(1.2); } #app-header-text { font-weight: 600; font-size: 18px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 4px; } app-settings { position: fixed; top: 56px; right: 0; height: calc(100% - 80px); width: 400px; max-width: 90vw; background: white; box-shadow: -2px 0 8px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease-in-out; overflow-y: auto; padding: 1rem; } app-settings.slide-right:not(.hidden) { transform: translateX(0%); } .settings-option { margin-bottom: 1rem; } .settings-logout-wrap { display: flex; justify-content: space-between; gap: 10px; } .settings-switch-user-wrap { display: flex; margin-bottom: 15px } .settings-logout-button, .settings-switch-user-button { flex: 1; background: linear-gradient(to right, #ffdddd, #ffeaea); border: none; border-radius: 8px; padding: 14px; text-align: center; font-weight: bold; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s, box-shadow 0.2s; } .settings-logout-button:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .settings-option-text { font-weight: 600; margin-bottom: 8px; text-align: center; } .slider-container { text-align: center; } .slider { position: relative; display: flex; justify-content: space-between; align-items: center; width: 300px; height: 50px; background-color: #ddd; border-radius: 25px; overflow: hidden; margin: auto; } .slider-option { height: 50px; flex: 1; border: none; background: none; font-size: 16px; cursor: pointer; z-index: 2; transition: color 0.3s; -webkit-tap-highlight-color: transparent; } .slider-option:hover { color: #007bff; } .slider-indicator { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #9bdeff; border-radius: 25px; z-index: 1; transition: transform 0.3s ease-in-out; } .settings_resync_app_wrap { text-align: center; } .settings_resync_app_button { padding: 12px 24px; border-radius: 8px; border: none; background: linear-gradient(to right, #d1e8ff, #b0d6ff); font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); } .settings_resync_app_button:hover { background: linear-gradient(to right, #b0d6ff, #90c4ff); transform: translateY(-1px); } app-header .header-icon { font-size: 20px; cursor: pointer; padding: 6px; border-radius: 6px; transition: background 0.2s; user-select: none; } app-header .header-icon:hover { background: rgba(0,0,0,0.05); } .header-icon svg { transition: transform 0.2s ease; height: 30px; max-width: 30px; outline: none; } .header-icon svg:hover { transform: scale(1.2); fill: #007bff; outline: none; } #app_loader_text { margin-bottom: 1em; } app-main .page-wrapper.active-page { width: 100%; height: 100%; } app-main .page-wrapper.active-page .page_inner_wrapper { width: 100%; height: 100%; } app-main .page-wrapper .page_inner_wrapper.no-permission-wrapper { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #444; height: 400px; max-height: calc(100% - 20px); } app-main .page-wrapper .page_inner_wrapper.no-permission-wrapper .no-permission-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.7; } app-main .page-wrapper .page_inner_wrapper.no-permission-wrapper .no-permission-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; } app-main .page-wrapper .page_inner_wrapper.no-permission-wrapper .no-permission-text { font-size: 1rem; color: #666; } @media only screen and (max-width: 600px) { #app-header-info { display:none; } } app-main .page_inner_wrapper { display: none; } app-main .page_inner_wrapper.open { display: flex; overflow-y: auto; overflow-x: hidden; } app-popups .popup-body textarea { width: calc(100% - 6px); } app-ios-install-prompt .install-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; } app-ios-install-prompt .install-modal-content { background: #1c1c1e; color: #fff; padding: 20px; width: calc( 100% - 40px ); font-family: sans-serif; text-align: center; border-top-left-radius: 10px; border-top-right-radius: 10px; } app-ios-install-prompt .install-steps div { margin-top: 10px; } app-ios-install-prompt #close-install-modal { margin-top: 20px; background: none; border: 1px solid #ccc; color: #ccc; padding: 5px 10px; cursor: pointer; } app-ios-install-prompt { position: fixed; bottom: 0; width: 100%; } app-ios-install-prompt .install-steps .install-steps-line { display: flex; justify-content: center; gap: 5px; } app-root button.button.button-primary, app-global-popups button.button.button-primary { text-align: center; padding: 6px 12px; border-radius: 8px; border: none; background: linear-gradient(to right, #d1e8ff, #b0d6ff); font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); min-width: fit-content; } app-root button.button.button-primary:hover, app-global-popups button.button.button-primary:hover { background: linear-gradient(to right, #c7e1ff, #a6ccff); } app-root button.button.button-primary:active, app-global-popups button.button.button-primary:active { background: linear-gradient(to right, #b6d6ff, #95c2ff); } app-root button.button.button-primary.button-warn, app-global-popups button.button.button-primary.button-warn { background: linear-gradient(to right, #ffe6e6, #ffd1d1); } app-root button.button.button-primary.button-warn:hover, app-global-popups button.button.button-primary.button-warn:hover { background: linear-gradient(to right, #ffd1d1, #ffb3b3); } app-root button.button.button-primary.button-warn:active, app-global-popups button.button.button-primary.button-warn:active { background: linear-gradient(to right, #ffbfc0, #ffa6a6); } app-scan { justify-content: center; } app-scan .qr_gray_overlay { position: fixed; width: 100%; height: 100%; background: rgba(214,214,214,0.8); } app-scan .qr_inner { position: fixed; width: calc(100% - 80px); height: calc(100% - 80px); margin: 20px; padding: 20px; background: #afafaf; border: 1px solid #ccc; border-radius: 15px; max-width: 500px; } app-scan .qr_inner .qr_scanner { width: calc( 100% - 8px ); aspect-ratio: 1 / 1; background: black; border-radius: 25px; position: relative; overflow: hidden; border: 4px solid black; display: flex; flex-direction: column; justify-content: center; align-items: center; } app-scan .qr_inner .qr_zoom { position: relative; width: 100%; margin: 10px 0px; height: 30px; } app-scan .qr_inner .qr_zoom input.qr_zoom_input { width: 100%; appearance: none; background: transparent; position: relative; border: 2px solid #b0d6ff; border-radius: 50px; cursor: pointer; } app-scan .qr_inner .qr_zoom input.qr_zoom_input::-webkit-slider-thumb { appearance: none; height: 24px; width: 24px; background: transparent; position: relative; } app-scan .qr_inner .qr_zoom .qr_zoom_label { position: relative; top: -35px; margin-left: -2.5px; width: 40px; height: 24px; text-align: center; font-weight: bold; color: black; background: linear-gradient(to right, #d1e8ff, #b0d6ff); border-radius: 50%; line-height: 24px; pointer-events: none; transform: translateX(-50%); transition: left 0.1s ease; padding: 5px; } app-scan .qr_inner .qr_pointer_overlay { position: absolute; width: calc(100% - 100px); aspect-ratio: 1 / 1; left: 50px; top: 50px; } app-scan .qr_inner .qr_pointer_overlay .qr_pointer_overlay_top_left { position: absolute; top: 0; left: 0; width: 25%; height: 25%; border-top: 2px solid red; border-left: 2px solid red; border-top-left-radius: 50%; } app-scan .qr_inner .qr_pointer_overlay .qr_pointer_overlay_top_right { position: absolute; top: 0; right: 0; width: 25%; height: 25%; border-top: 2px solid red; border-right: 2px solid red; border-top-right-radius: 50%; } app-scan .qr_inner .qr_pointer_overlay .qr_pointer_overlay_bottom_left { position: absolute; bottom: 0; left: 0; width: 25%; height: 25%; border-bottom: 2px solid red; border-left: 2px solid red; border-bottom-left-radius: 50%; } app-scan .qr_inner .qr_pointer_overlay .qr_pointer_overlay_bottom_right { position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; border-bottom: 2px solid red; border-right: 2px solid red; border-bottom-right-radius: 50%; } app-scan .qr_scanner_close { text-align: center; margin: 20px; } app-scan .qr_scanner_close button.button { padding: 10px 20px; } app-scan .qr_inner .qr_scanner .qr_video_feed { height: 100%; position: absolute; z-index: -1; } app-scan .qr_inner .qr_scanner canvas { height: 100%; } app-scan .qr_feedback { display: grid; margin-top: 20px; background: #c6c6c6; padding: 10px; border-radius: 10px; } app-global-popups { position: fixed; height: 0px; width: 0px; } app-global-popups .global_popup { position: fixed; height: 100%; width: 100%; top: 57px; display: none; } app-global-popups .global_popup.global_popups_loader { z-index: 130 } app-global-popups .global_popup .global_popup_bg { position: fixed; height: calc(100% - 56px); width: 100%; background: rgba(214, 214, 214, 0.8); z-index: 5; } app-global-popups .global_popup .global_popup_inner_load_wrapper { position: fixed; width: 100%; height: 100%; display: flex; z-index: 6; } app-global-popups .global_popup .global_popup_inner_load_wrapper .global_popup_inner_load_innder { margin: auto; scale: 5; } app-global-popups .global_popup .global_popup_inner_wrapper { position: fixed; width: calc(100% - 60px); height: calc(100% - 116px); background: white; margin: 20px; padding: 10px; border-radius: 10px; overflow-y: auto; z-index: 7; } app-global-popups .global_popup_inner_wrapper .global_popup_inner_close { position: fixed; right: 20px; top: 75px; border: 1px solid gray; border-radius: 50%; width: 20px; height: 20px; display: flex; cursor: pointer; padding: 5px; margin: 5px; background: white; } app-global-popups .global_popup_inner_wrapper .global_popup_inner_close div { margin: auto; } @media only screen and (min-width: 768px) { app-global-popups .global_popup_inner_wrapper .global_popup_flex_row { width: 100%; display: flex; justify-content: space-between; gap: 15px; } app-global-popups .global_popup_inner_wrapper .global_popup_flex_row { margin: 10px 0px; } app-global-popups .global_popup_inner_wrapper .global_popup_inner_qr_and_buttons, app-global-popups .global_popup_inner_wrapper .global_popup_inner_qr_and_buttons .global_popup_flex_row { max-width: 320px; } } app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_image, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_basic_info, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_extended_info, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_attributes, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_amount_info, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_stocks, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_qr_and_buttons, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_shelf_life_bar { margin: auto; margin-top: 0px; flex: 1; } app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_basic_info { margin-top: 25px; } app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_basic_info_name_long { font-size: larger; } app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_basic_info_name_short { font-size: xx-large; } app-global-popups .global_popup_inner_wrapper .global_popup_flex_row.shelve_life_bar { max-height: 50px; height: 50px; } app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_qr_and_buttons { display: grid; } app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info { display: grid; height: 100%; } app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .global_popup_inner_basic_info, app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .global_popup_inner_extended_info, app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .global_popup_inner_attributes, app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .global_popup_inner_amount_info, app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .global_popup_inner_stocks { display: grid; height: fit-content; gap: 10px; } @media only screen and (max-width: 768px) { app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_image, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_basic_info, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_extended_info, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_attributes, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_amount_info, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_stocks, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_qr_and_buttons { margin-bottom: 20px; } app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_basic_info_name_short { font-size: larger; font-weight: bold; } app-global-popups .global_popup_inner_wrapper .global_popup_inner_qr_and_buttons .global_popup_flex_row { display: flex; width: 100%; } app-global-popups .global_popup_inner_wrapper .global_popup_inner_qr_and_buttons .global_popup_flex_row .global_popup_inner_qr_and_buttons_qr, app-global-popups .global_popup_inner_wrapper .global_popup_inner_qr_and_buttons .global_popup_flex_row .global_popup_inner_qr_and_buttons_qr_dot { display: flex; } app-global-popups .global_popup_inner_wrapper .global_popup_inner_qr_and_buttons .global_popup_flex_row .global_popup_inner_qr_and_buttons_qr img, app-global-popups .global_popup_inner_wrapper .global_popup_inner_qr_and_buttons .global_popup_flex_row .global_popup_inner_qr_and_buttons_qr_dot img { max-height: 150px; max-width: 80%; margin: auto; } app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_amount_info.more_info { display: flex; flex-wrap: wrap; } app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_amount_info.more_info .global_popup_inner_amount_info_fust_code, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_amount_info.more_info .global_popup_inner_amount_info_total_amount, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_amount_info.more_info .global_popup_inner_amount_info_amount_of_units, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_amount_info.more_info .global_popup_inner_amount_info_amount_per_unit, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_amount_info.more_info .global_popup_inner_amount_info_lose_amount, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_amount_info.more_info .global_popup_inner_amount_info_amount_per_bunch, app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_amount_info.more_info .global_popup_inner_amount_info_checked_in_amount { flex-basis: calc(50% - 5px); } } @media only screen and (min-width: 768px) { app-global-popups .global_popup_inner_wrapper .global_popup_flex_row .global_popup_inner_basic_info { } } app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .attribute_icon { display: inline-block; min-width: 25px; margin: auto; max-width: 25px; max-height: 25px; overflow: visible; } app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .global_popup_flex_row .attribute_icon .custom_tooltip { display: none; position: absolute; background: white; border-radius: 5px; padding: 5px 10px; z-index: 100; font-size: 13px; border: 1px solid gray; } app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .global_popup_flex_row .attribute_icon.show-tooltip .custom_tooltip, app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .global_popup_flex_row .attribute_icon:hover .custom_tooltip { display: block; } app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .global_popup_inner_image img { max-width: 100%; max-height: 300px; } app-global-popups .global_popup_inner_wrapper .global_popup_inner.products_info .global_popup_inner_qr_and_buttons img { max=width: 150px; max-height: 150px; } .fln-loader.bar { display: flex; justify-content: center; margin: 0 auto; width: 100px; height: 15px; text-align: center; font-size: 10px; } .fln-loader.bar > div { height: 100%; width: 4.66px; display: inline-block; float: left; margin-left: 2px; -webkit-animation: inlineloaderdelay 0.8s infinite ease-in-out; -moz-animation: inlineloaderdelay 0.8s infinite ease-in-out; -o-animation: inlineloaderdelay 0.8s infinite ease-in-out; -ms-animation: inlineloaderdelay 0.8s infinite ease-in-out; animation: inlineloaderdelay 0.8s infinite ease-in-out; } .fln-loader.bar .bar1 { background-color: #754fa0; } .fln-loader.bar .bar2 { background-color: #09b7bf; -webkit-animation-delay: -0.7s; -moz-animation: inlineloaderdelay 0.7s; -o-animation: inlineloaderdelay 0.7s; -ms-animation: inlineloaderdelay 0.7s; animation-delay: -0.7s; } .fln-loader.bar .bar3 { background-color: #90d36b; -webkit-animation-delay: -0.6s; -moz-animation: inlineloaderdelay 0.6s; -o-animation: inlineloaderdelay 0.6s; -ms-animation: inlineloaderdelay 0.6s; animation-delay: -0.6s; } .fln-loader.bar .bar4 { background-color: #f2d40d; -webkit-animation-delay: -0.5s; -moz-animation: inlineloaderdelay 0.5s; -o-animation: inlineloaderdelay 0.5s; -ms-animation: inlineloaderdelay 0.5s; animation-delay: -0.5s; } .fln-loader.bar .bar5 { background-color: #fcb12b; -webkit-animation-delay: -0.4s; -moz-animation: inlineloaderdelay 0.4s; -o-animation: inlineloaderdelay 0.4s; -ms-animation: inlineloaderdelay 0.4s; animation-delay: -0.4s; } .fln-loader.bar .bar6 { background-color: #ed1b72; -webkit-animation-delay: -0.3s; -moz-animation: inlineloaderdelay 0.3s; -o-animation: inlineloaderdelay 0.3s; -ms-animation: inlineloaderdelay 0.3s; animation-delay: -0.3s; } @-webkit-keyframes inlineloaderdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.05); -moz-animation: scaleY(0.05); -o-animation: scaleY(0.05); -ms-animation: scaleY(0.05); transform: scaleY(0.05); } 20% { -webkit-transform: scaleY(1); -moz-animation: scaleY(1); -o-animation: scaleY(1); -ms-animation: scaleY(1); transform: scaleY(1); } } @keyframes inlineloaderdelay { 0%, 40%, 100% { transform: scaleY(0.05); -webkit-transform: scaleY(0.05); -moz-animation: scaleY(0.05); -o-animation: scaleY(0.05); -ms-animation: scaleY(0.05); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); -moz-animation: scaleY(1); -o-animation: scaleY(1); -ms-animation: scaleY(1); } } .fln-loader.round { text-align: center; margin: 0 auto; display: block; height: 32px; width: 32px; -webkit-animation: fln-loader-alt-1 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: fln-loader-alt-1 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } .fln-loader.round::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: auto; margin: auto; width: 8px; height: 8px; background: #FF0000; border-radius: 50%; -webkit-animation: fln-loader-alt-2 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: fln-loader-alt-2 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } .fln-loader.round::after { content: ""; display: block; position: absolute; top: 0; left: auto; bottom: 0; right: 0; margin: auto; width: 8px; height: 8px; background: #0000FF; border-radius: 50%; -webkit-animation: fln-loader-alt-3 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: fln-loader-alt-3 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } .fln-loader.round span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; } .fln-loader.round span::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: auto; right: 0; margin: auto; width: 8px; height: 8px; background: #FFA500; border-radius: 50%; -webkit-animation: fln-loader-alt-4 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: fln-loader-alt-4 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } .fln-loader.round span::after { content: ""; display: block; position: absolute; top: auto; left: 0; bottom: 0; right: 0; margin: auto; width: 8px; height: 8px; background: #00FFFF; border-radius: 50%; -webkit-animation: fln-loader-alt-5 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: fln-loader-alt-5 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes fln-loader-alt-1 { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes fln-loader-alt-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes fln-loader-alt-2 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(24px, 0, 0) scale(.5); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } @keyframes fln-loader-alt-2 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(24px, 0, 0) scale(.5); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @-webkit-keyframes fln-loader-alt-3 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(-24px, 0, 0) scale(.5); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } @keyframes fln-loader-alt-3 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-24px, 0, 0) scale(.5); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @-webkit-keyframes fln-loader-alt-4 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(0, 24px, 0) scale(.5); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } @keyframes fln-loader-alt-4 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, 24px, 0) scale(.5); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @-webkit-keyframes fln-loader-alt-5 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(0, -24px, 0) scale(.5); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } @keyframes fln-loader-alt-5 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -24px, 0) scale(.5); } 100% { transform: translate3d(0, 0, 0) scale(1); } }