/* Fonts */
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-thin.ttf"); font-weight: 100; font-style: normal; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-thin-italic.ttf"); font-weight: 100; font-style: italic; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-light.ttf"); font-weight: 200; font-style: normal; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-light-italic.ttf"); font-weight: 200; font-style: italic; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-regular.ttf"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-regular-italic.ttf"); font-weight: normal; font-style: italic; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-bold.ttf"); font-weight: bold; font-style: normal; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-bold-italic.ttf"); font-weight: bold; font-style: italic; }

@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-bold.ttf"); font-weight: bold; font-style: normal; }

:root 
{    
    --app-max-width: 1000px;
    --topbar-height: 3rem;
    --menu-width: 18rem;
    
    --color-main: #e30019;
    --color-white: #ffffff;
    --color-white-transparent: #ffffff50;
    --color-black: #1e292e;
    --color-black-shadow: #0c111380;
    --color-black-transparent: #1e292ed0;
    --color-gray-dark: #2d353b;
    --color-gray: #3f4951;
    --color-gray-light: #6e818d;
    --color-red: #e30019;
    --color-green: #33ba40;
    --color-green-dark: #126e1b;
    --color-yellow: #ffbc0b;
    --color-orange: #fd7e13;
    --color-blue: #03A9F4;

    --color-teal: #009688;
}

* { margin: 0; padding: 0; outline: none; box-sizing: border-box; vertical-align: middle; text-align: left; font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; }
html { font-size: 18px; }
html, body { height: 100%; width: 100%; }
body { touch-action: pan-x pan-y; position: relative; user-select: none; background-color: var(--color-gray-dark); color: var(--color-white); overflow-x: hidden; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;  -webkit-user-select: none; }
body.remove-scroll { overflow-y: hidden; }

.monospace { font-family: "Courier New", Courier, monospace; }
.selectable { user-select: text; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrap { white-space: normal !important; }
.nomargin { margin: 0 !important; }
.noborder { border: 0 !important; }
.nopad { padding: 0 !important; }
.autowidth { width: auto !important; }
.pad { padding: 1rem !important; }
.pad-width { padding-left: 1rem !important; padding-right: 1rem !important; }
.pad-height { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.inline { display: inline-block !important; }
.justify { text-align: justify !important; }
.left { text-align: left !important; }
.center { text-align: center !important; }
.right { text-align: right !important; }
.bold { font-weight: bold !important; }
.uppercase { text-transform: uppercase; }
.text-success { color: var(--color-green); }
.text-warning { color: var(--color-yellow); }
.text-danger { color: var(--color-red); }
.light { font-weight: 200 !important; }
.extra-light { font-weight: 100 !important; }
.small-text { font-size: .8em; }
.underline { text-decoration: underline; }
.pointer { cursor: pointer; }
.hidden { display: none !important; }

.note { font-size: .9rem; color: var(--color-gray-light); font-weight: 200; }
.info-message { font-size: 1.2rem; color: var(--color-gray-light); font-weight: 100; margin: 1.2rem 0; padding-left: 2.2rem; background: transparent url("../img/icons/info.png") 0 0 no-repeat; background-size: auto 1.6rem; line-height: 1.6rem; }
.info-message.tip { background-image: url("../img/icons/tip.png"); font-size: .9rem; font-weight: 200; color: var(--color-white); }
.info-message.success { background-image: url("../img/icons/success.png"); font-weight: 200; font-size: 1.2rem; color: var(--color-green); }
.info-message.warning { background-image: url("../img/icons/warning.png"); font-weight: bold; font-size: 1.2rem; color: var(--color-yellow); }
.info-message.danger { background-image: url("../img/icons/danger.png"); font-weight: bold; font-size: 1.4rem; color: var(--color-red); line-height: 1.6rem; }
i.icon { display: inline-block; width: 1em; height: 1em; background-position: center center; background-repeat: no-repeat; background-size: 100%; }
i.icon.large { width: 2.2rem; height: 2.2rem; }
i.icon.extra-large { width: 4rem; height: 5rem; }
i.icon.info { background-image: url("../img/icons/info.png"); }
i.icon.tip { background-image: url("../img/icons/tip.png"); }
i.icon.question { background-image: url("../img/icons/question.png"); }
i.icon.success { background-image: url("../img/icons/success.png"); }
i.icon.warning { background-image: url("../img/icons/warning.png"); }
i.icon.danger { background-image: url("../img/icons/danger.png"); }
i.icon.security{ background-image: url("../img/icons/security.png"); }
i.icon.image { background-image: url("../img/icons/btn-image.png"); }
i.icon.attachment { background-image: url("../img/icons/btn-attachment.png"); }
i.icon.picture { background-image: url("../img/icons/btn-image.png"); }
i.icon.video { background-image: url("../img/icons/btn-video.png"); }
i.icon.label { background-image: url("../img/icons/icon-label.png"); }
i.icon.camera { background-image: url("../img/icons/btn-camera.png"); }
i.icon.technical-data { background-image: url("../img/icons/icon-technical-data.png"); }

.embossed { box-shadow: .2rem .2rem .5rem var(--color-black-shadow), inset .2rem .2rem .5rem var(--color-white-transparent); }

.box { background: var(--color-gray-dark); padding: 1.5rem 1rem; margin: 1rem 0; border-radius: .5rem; }
.box h3 { margin: 0 0 1.5rem 0; }
.box p.note { margin: 0 0 1.5rem 0; }

.search-box { text-align: center; margin-bottom: 1rem; }

br { content: ""; display: block; height: .6rem; }
br.small { height: .3rem; }
br.big { height: 1.2rem; }
hr { border: 0; width: 100%; height: 1px; background: var(--color-gray); margin: 1.2rem 0; }
hr.small { margin: .6rem 0; }
hr.big { height: 3px; }
hr.dotted { border-top: 2px dotted var(--color-gray); height: 2px; background: transparent; }
a { text-decoration: none; }
.link { color: var(--color-white); cursor: pointer; font-weight: 200!important; font-size: .9rem; }
.link:hover, .link:active { text-decoration: underline; }
h1 { font-size: 2.2rem; font-weight: 100; margin-bottom: 1rem; }
h2 { font-size: 1.8rem; font-weight: 100; margin: 1rem 0; }
h3 { font-size: 1.4rem; margin: 1rem 0; font-weight: 200; }
p { margin: .8rem 0; }
ul.list, ol.list { margin-left: 2rem; }
.list li { margin-bottom: .6rem; }
sup { font-weight: 200; padding-left: .15em; }
pre { font-family: "Courier New", Courier, monospace; white-space: pre-wrap; color: var(--color-gray-light); }

/* Forms */
fieldset { display: block; padding: .75rem 0; border: 0; }

.row { display: table-row; }
.row > .col { display: table-cell; vertical-align: middle; }

input, textarea, select, button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; }
::placeholder, select:invalid, input[type="date"]:invalid, input[type="datetime-local"]:invalid, input[type="time"]:invalid { color: var(--color-gray-light); font-weight: 200; font-style: italic; text-transform: uppercase; }
input[type="url"]::placeholder  { text-transform: lowercase;}
::-webkit-inner-spin-button, ::-webkit-clear-button, ::-webkit-search-cancel-button { display: none; }
:-webkit-autofill { box-shadow: 0 0 100px 1000px var(--color-gray) inset !important; -webkit-text-fill-color: var(--color-gray-light) !important; font-weight: bold; border: 1px solid var(--color-gray-light); }
:disabled { opacity: .5; cursor: not-allowed !important; }

label { display: block; margin: .4rem 0; color: var(--color-white); font-weight: 100; padding-right: 1rem; line-height: 1.4rem; } 
label.inline { line-height: 2.4rem !important; }
input, select, textarea { color: var(--gray-light); height: 2.4rem; margin: .4rem 0; line-height: 2.4rem; border-radius: .6rem; border: 1px solid var(--color-gray); font-size: .9rem; padding: 0 1rem; background-color: var(--color-gray); width: 100%; max-width: 25rem; }
input:focus, select:focus, textarea:focus { border-color: var(--color-gray-light); }
input.l, select.l { max-width: 40rem !important; }
input.m, select.m { max-width: 13rem !important; }
input.s, select.s { max-width: 11rem !important; }
input.xs, select.xs { max-width: 6rem !important; }

textarea { height: 10rem; line-height: 1.2rem; padding: 1rem; resize: none; }
select, input[type="search"], input[type="password"], input[type="email"], input[type="url"], input.icon { padding-left: 2.6rem; background-repeat: no-repeat; background-position: left .8rem center; background-size: auto 1.2rem; }
select { background-image: url("../img/icons/input-down.png"); background-position: right .8rem center; padding-left: 1rem; padding-right: 2.6rem; }

input[type="search"] { background-image: url("../img/icons/input-search.png"); }
input[type="password"] { background-image: url("../img/icons/input-password.png"); }
input[type="email"] { background-image: url("../img/icons/input-email.png"); }
input[type="url"] { background-image: url("../img/icons/input-url.png"); text-transform: lowercase; }
::-webkit-calendar-picker-indicator { background: left center no-repeat; background-size: 1.2rem; height: 2rem; width: 1.5rem; color: transparent; }
input[type="date"] { max-width: 10rem; min-width: 9rem; padding-right: 0; }
input[type="datetime-local"] { max-width: 13rem; padding-right: 0; }
input[type="time"] { max-width: 7rem; padding-right: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { background-image: url("../img/icons/input-date.png"); }
input.icon.project-code { background-image: url("../img/icons/icon-project.png"); }
input.icon.pin { background-image: url("../img/icons/icon-pin.png"); }
input.icon.username { background-image: url("../img/icons/input-username.png"); }
input.icon.email { background-image: url("../img/icons/input-email.png"); }

input.switch { display: inline-block; position: relative; margin: 1rem .2rem; height: 1.2rem; width: 2.6rem; border-radius: .8rem; background: var(--color-gray); border: 0; cursor: pointer; transition: .4s ease-in-out; }
input.switch:after { content: ""; position: absolute; top: -.2rem; left: -.2rem; display: block; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-white); transition: .2s ease-in-out; }
input.switch:checked { background-color: var(--color-green); }
input.switch:checked:after { left: 1.2rem; }
input.switch + label { display: inline-block; line-height: 2.4rem; padding-left: .5rem; color: var(--color-white); font-weight: normal; text-transform: none; cursor: pointer; }

input[type="file"] { width: .1px; height: .1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
input[type="file"] + label.button { color: var(--color-white); }

input[type="checkbox"].checkbox { margin: 0; padding: 0; font: inherit; color: var(--color-gray-light); width: 1.2em; height: 1.2em; border: 0.1em solid var(--color-gray-light); border-radius: 0.15em; transform: translateY(-0.075em); display: grid; place-content: center; cursor: pointer; }
input[type="checkbox"].checkbox::before { content: ""; width: 0.65em; height: 0.65em; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--color-white); transform-origin: bottom left; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
input[type="checkbox"].checkbox:checked::before { transform: scale(1); }
input[type="checkbox"].checkbox + label { position: relative; margin: 0; padding: 0; padding-left: 1.8rem; cursor: pointer; }
input[type="checkbox"].checkbox + label::before { content: ""; position: absolute; left: .2rem; top: 0; width: 1.2rem; height: 1.2rem; border-radius: .2rem; background-repeat: no-repeat; background-size: .8rem; background-position: center center; background-color: var(--color-gray-light); }
input[type="checkbox"].checkbox.has-plate-image + label.has-plate-image::before { background-image: url("../img/icons/icon-label.png"); }
input[type="checkbox"].checkbox.has-asset-image + label.has-asset-image::before { background-image: url("../img/icons/btn-camera.png"); }
input[type="checkbox"].checkbox.has-technical-data + label.has-technical-data::before { background-image: url("../img/icons/icon-technical-data.png"); }
input[type="checkbox"].checkbox.has-attachment + label.has-attachment::before { background-image: url("../img/icons/btn-attachment.png"); }

/* :is(button, .button) { display: inline-block; text-align: center; text-decoration: none; text-transform: uppercase; margin: .4rem .2rem .4rem 0; font-size: .9rem; font-weight: bold; height: 2.4rem; color: var(--color-white); line-height: 2.4rem; border-radius: .5rem; padding: 0 1.6rem; cursor: pointer; border: 1px solid transparent; background-color: var(--color-gray-light); box-shadow: .2rem .2rem .5rem var(--color-black-shadow), inset .2rem .2rem .5rem var(--color-white-transparent); } */
:is(button, .button) { display: inline-block; text-align: center; text-decoration: none; text-transform: uppercase; margin: .4rem .2rem .4rem 0; font-size: .9rem; font-weight: bold; height: 2.4rem; color: var(--color-white); line-height: 2.4rem; border-radius: .5rem; padding: 0 1.6rem; cursor: pointer; border: 1px solid var(--color-gray); background-color: transparent; }
:is(button, .button):hover, :is(button, .button):active, :is(button, .button):focus { border-color: var(--color-white); }

:is(button, .button):last-child { margin-right: 0; }
:is(button, .button).delete, :is(button, .button).confirm, :is(button, .button).secondary { border: 1px solid transparent; box-shadow: .2rem .2rem .5rem var(--color-black-shadow), inset .2rem .2rem .5rem var(--color-white-transparent); }
:is(button, .button).delete:active, :is(button, .button).confirm:active, :is(button, .button).secondary:active { box-shadow: inset .2rem .2rem .5rem var(--color-black-transparent); }
:is(button, .button).delete { color: var(--color-white); background-color: var(--color-red); }
:is(button, .button).confirm { color: var(--color-white); background-color: var(--color-green); }
:is(button, .button).secondary { color: var(--color-white); background-color: var(--color-blue); border: 1px solid transparent; }

:is(button, .button).icon { padding-left: 2.8rem; background-repeat: no-repeat; background-position: left 1.1rem center; background-size: auto 1.2rem; }
:is(button, .button).icon.icon-only { font-size: 0; background-position: center center; width: 2.4rem; padding: 0; }
:is(button, .button).icon.save { background-image: url("../img/icons/btn-save.png"); }
:is(button, .button).icon.update { background-image: url("../img/icons/btn-update.png"); }
:is(button, .button).icon.delete { background-image: url("../img/icons/btn-delete.png"); }
:is(button, .button).icon.edit { background-image: url("../img/icons/edit.png"); }
:is(button, .button).icon.back { background-image: url("../img/icons/btn-back.png"); }
:is(button, .button).icon.add { background-image: url("../img/icons/btn-add.png"); }
:is(button, .button).icon.filter { background-image: url("../img/icons/btn-filter.png"); }
:is(button, .button).icon.logout { background-image: url("../img/icons/btn-logout.png"); }
:is(button, .button).icon.camera { background-image: url("../img/icons/btn-camera.png"); }
:is(button, .button).icon.close { background-image: url("../img/icons/btn-close.png"); }
:is(button, .button).icon.download { background-image: url("../img/icons/btn-download.png"); }
:is(button, .button).icon.lock { background-image: url("../img/icons/btn-lock.png"); }
:is(button, .button).icon.unlock { background-image: url("../img/icons/btn-unlock.png"); }
:is(button, .button).icon.excel { background-image: url("../img/icons/btn-excel.png"); }
:is(button, .button).icon.zip { background-image: url("../img/icons/btn-zip.png"); }
:is(button, .button).icon.copy { background-image: url("../img/icons/btn-copy.png"); }
:is(button, .button).icon.direction { background-image: url("../img/icons/btn-direction.png"); }
:is(button, .button).icon.image { background-image: url("../img/icons/btn-image.png"); }
:is(button, .button).icon.attachment { background-image: url("../img/icons/btn-attachment.png"); }
:is(button, .button).icon.ai { background-image: url("../img/icons/icon-ai.png"); }
:is(button, .button).icon.rotate-left { background-image: url("../img/icons/rotate-left.png"); }
:is(button, .button).icon.rotate-right { background-image: url("../img/icons/rotate-right.png"); }
:is(button, .button).icon.rotate-180 { background-image: url("../img/icons/rotate-180.png"); }

:is(button, .button).delete.remove { color: var(--color-white); border: 1px solid var(--color-gray); background-color: transparent; box-shadow: none; }
:is(button, .button).delete.remove:hover, :is(button, .button).delete.remove:active { border-color: var(--color-white); }

.list-item { border-bottom: 1px solid var(--color-gray); padding: 1rem; }
.list-item:last-child { border: 0; }

.pagination-nav { text-align: left !important; border-top: 3px solid var(--color-gray-light); padding: 1rem 0; }
.pagination-nav button { margin: 0 .5rem; }
.pagination-nav label { display: inline-block; line-height: 2.4rem; padding: 0 .5rem; margin: 0; }

.data-table-container { width: 100%; overflow-x: scroll; border: 1px solid var(--color-gray-light); border-radius: 5px; margin: 1.5rem 0; max-height: 400px; }
.data-table-container.auto-height { max-height: max-content; }

table.data { display: table; width: 100%; border-spacing: 0; }
table.data tr { display: table-row; border-collapse: collapse; vertical-align: middle; }
table.data tr th, 
table.data tr td { display: table-cell; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--color-gray); padding: .6rem 1rem; white-space: nowrap; }
table.data tr th { font-weight: bold; border-bottom-width: 3px; }
table.data tr th.right-border, table.data tr td.right-border { border-right: 1px solid var(--color-gray); }
table.data tr td .inputbox { margin-bottom: 0; }
table.data tbody tr:last-child th,
table.data tbody tr:last-child td { border: 0; }
table.data thead.fixed tr th { position: sticky; top: 0; background: var(--color-black); }
table.data.compact tr td { padding: .2rem .4rem }

table.summary { display: table; width: 100%; border-spacing: 0; }
table.summary tr { display: table-row; border-collapse: collapse; vertical-align: middle; }
table.summary tr th, 
table.summary tr td { display: table-cell; vertical-align: middle; padding: .4em; border-bottom: 1px solid var(--color-gray); }
table.summary tr th { color: var(--color-gray-light); font-weight: 200; padding-right: 1rem; }
table.summary tr:last-child th,
table.summary tr:last-child td { border: 0; }

table.summary tr.inner-row td,
table.summary tr.inner-row th { font-size: .8em; background-color: var(--color-gray); }
table.summary tr.inner-row :first-child { margin-left: 1rem; }

.progress-bar-container { width: 100%; padding: 1.2rem; }
.progress-bar { width: 100%; position: relative; background: var(--color-gray); height: 1rem; border-radius: .5rem; }
.progress-bar .progress-bar-value { display: inline-block; position: absolute; top: 0; background-color: var(--color-main); height: 1rem; border-radius: .5rem; }
.progress-bar .progress-bar-value.danger { background-color: var(--color-red); }
.progress-bar .progress-bar-value.success { background-color: var(--color-green); }
.progress-bar .progress-bar-value.warning { background-color: var(--color-yellow); }

/* Layout */
#app { width: 100%; min-height: 100%; }
#app-topbar { position: sticky; top: 0; height: var(--topbar-height); background: var(--color-gray); overflow: hidden; z-index: 10;  max-width: var(--app-max-width); margin: 0 auto; }
#app-topbar .app-topbar-content { max-width: var(--app-max-width); margin: 0 auto; position: relative; overflow: hidden; height: 100%; background: var(--color-gray); background-image: url("../img/icons/header-background.svg"); background-repeat: no-repeat; background-size: auto 100%; background-position: 68px center; border-bottom: 1px solid var(--color-gray-black); }
#app-topbar a.home { font-size: 0; position: absolute; left: 0; display: inline-block; width: 5rem; height: var(--topbar-height); background: url("../img/sew-white.png") center center no-repeat; background-size: 75% auto; background-color: var(--color-main); }
#app-topbar a.home:hover { background-size: 80% auto; }
#app-topbar h1 { display: inline-block; margin-left: 2.3rem; padding: 0 var(--topbar-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.6rem; color: var(--color-white); font-weight: 200; line-height: var(--topbar-height); }
#app-topbar .toggle-menu { position: absolute; top: 0; right: 0; display: inline-block; width: var(--topbar-height); height: var(--topbar-height); cursor: pointer; background: url("../img/icons/menu.png") center center no-repeat; background-size: 1.4rem auto; font-size: 0; }
#app-topbar .toggle-menu:hover, #app-topbar .toggle-menu:active { background-color: #00000022; }

#app-page { position: relative; padding: 1.5rem 1rem; max-width: var(--app-max-width); margin: 0 auto; background-color: var(--color-black); min-height: 94vh; }
#app-page.sticky { position: sticky; }
#app-page > h1 { font-size: 2rem; text-align: center; }

#app-menu { position: fixed; top: var(--topbar-height); right: max(0px, calc((100vw - var(--app-max-width)) / 2)); width: var(--menu-width); max-height: 100%; overflow: hidden; overflow-y: auto; background: var(--color-black); border: 1px solid var(--color-gray); border-top: 0; transform: translateY(-100%); transition: transform 500ms; z-index: 4; }
#app-menu hr { margin: .3em 0!important; }
#app-menu .menu-item { text-decoration: none; color: var(--color-white); position: relative; display: block; padding: .7rem 1rem; line-height: 1.6rem; font-weight: 200; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-left: .4rem solid transparent; font-size: 1rem; }
#app-menu .menu-item.icon { padding-left: 3.3rem; background-image: url("../img/icons/nav-unknown.png"); background-position: .9rem center; background-size: 1.6rem auto; background-repeat: no-repeat;  }
#app-menu .menu-item.nav:hover { background-color: var(--color-main); }
#app-menu .menu-item.nav:active { background-color: var(--color-main); }
#app-menu .menu-item.nav.selected { background-color: var(--color-gray-dark); border-color: var(--color-main); font-weight: bold; }

#app.menu-on #app-menu { transform: translateY(0); box-shadow: .1rem .2rem .5rem var(--color-black-shadow); }
#app.menu-on #app-page::after { content: ""; position: absolute; display: block; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--color-black); z-index: 3; opacity: .9; } 
#app.menu-on #app-footer { display: none; } 

/* Dialogs */
.loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; background-color: var(--color-black-transparent); overflow: hidden; }
.loader p { font-weight: 200; text-align: center; }
.loader:before { content: ""; display: block; width: 100%; height: var(--topbar-height); background-color: var(--color-main); animation: animateLoader 3s ease-in infinite alternate-reverse; }
@keyframes animateLoader 
{
    0% { width: 100%; }
    100% { width: 0; }
}

.lock-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 30; background-color: var(--color-black-transparent); text-align: center; }
.lock-page .dialog { background: var(--color-gray-dark); border: 1px solid var(--color-gray-light); padding: 1rem; border-radius: .8rem; margin: 3rem auto; display: inline-block; box-shadow: .2rem .2rem .5rem var(--color-black-shadow); width: 500px; max-width: 80%; overflow: hidden; }
.lock-page .dialog .dialog-content { position: relative; padding: 4.5rem .5rem 1.2rem .5rem; background: url("../img/icons/info.png") center .3rem no-repeat; background-size: 3rem auto; min-height: 4rem; overflow: auto; text-align: center; }
.lock-page .dialog .dialog-content * { text-align: center; }
.lock-page .dialog .dialog-content h3 { margin-top: 0; }
.lock-page .dialog .dialog-content.question { background-image: url("../img/icons/question.png"); }
.lock-page .dialog .dialog-content.warning { background-image: url("../img/icons/warning.png"); }
.lock-page .dialog .dialog-content.danger { background-image: url("../img/icons/danger.png"); }
.lock-page .dialog .dialog-content.success { background-image: url("../img/icons/success.png"); }
.lock-page .dialog .dialog-content.spinner { padding-top: 6rem; background-image: none; }
.lock-page .dialog .dialog-content.spinner::before { content: ""; position: absolute; top: 1rem; left: calc(50% - 1.2rem); width: 2.4rem; height: 2.4rem; border: .4rem solid  var(--color-main); border-bottom-color: transparent; border-radius: 50%; animation: dialogoBoxSpinner 1s linear infinite;}
.lock-page .dialog .dialog-actions { padding: 1rem; padding-bottom: 0; border-top: 1px solid var(--color-gray-light); text-align: center; }

@keyframes dialogoBoxSpinner{ 
    to { transform: rotate(1turn); }
}

.lock-page .image-viewer { position: relative; display: block; margin: 1vh auto; width: 98vw; height: 98vh; background-repeat: no-repeat; background-position: center top; background-size: contain; }
.lock-page .image-viewer button { position: absolute; right: 1rem; top: .5rem; }

/* APPmapp */
#app.login form { max-width: 25rem; margin: 1rem auto; padding: 0 1rem; }

.link.icon.arrow-right { background-image: url("../img/icons/arrow-right.png"); background-repeat: no-repeat; background-size: 1rem; background-position: center right; padding-right: 1.2rem; }
.font-size-small { font-size: .9rem; font-weight: 100; line-height: 1.5rem; }
.nomargin-bottom { margin-bottom: 0; }
.accordion a.link { font-weight: 400!important; text-decoration: underline; }

.italic { font-style: italic; }
p.icon { padding-left: 1.3rem; background-position: left center; background-repeat: no-repeat; background-size: .9rem; }
p.icon.marker { background-image: url("../img/icons/marker.png"); }
p.icon.calendar { background-image: url("../img/icons/calendar.png"); }
p.icon.info { background-image: url("../img/icons/info2.png"); }
p.icon.asset { background-image: url("../img/icons/asset.png"); }
p.icon.electronic { background-image: url("../img/icons/electronic.png"); }


#app .page-title { display: flex; column-gap: 1rem; align-items: center; margin-bottom: 1rem;  }
#app .page-title.accordion { padding-left: 2rem; background-image: url("../img/icons/accordion-arrow-down.png"); background-size: 1.6rem; background-repeat: no-repeat; background-position: left center; cursor: pointer; }
#app .page-title.accordion.open { background-image: url("../img/icons/accordion-arrow-right.png"); }
#app .page-title h1{ margin: 0; }

.accounts-management .account, .subsidiary .subsidiary { display: grid; grid-column-gap: 10px; grid-template-columns: 2.5rem auto 2.5rem; align-items: center; }
.accounts-management .account .avatar, .subsidiary .subsidiary .avatar { display: inline-block; width: 2.4rem; height: 2.4rem; line-height: 2.4rem; border-radius: 50%; text-align: center; font-size: .9rem; color: var(--color-white); background-color: var(--color-main); }
.accounts-management .account .description, .subsidiary .description { font-size: .9rem; font-weight: 200; color: var(--color-gray-light); }
.accounts-management .account .info { max-width: 13rem; }
.accounts-management .badge { padding: .8rem; border-radius: .2rem; font-size: 0; font-weight: 200; background-color: var(--color-red); text-wrap: nowrap; background-size: 1.1rem; background-position: center center; background-repeat: no-repeat; }
.accounts-management .badge.device-lost{ background-image: url("../img/icons/security.png"); }
.accounts-management .badge.not-activated{  background-color: var(--color-orange); background-image: url("../img/icons/account-not-verified.png"); }

.accounts-management .account .info div, .accounts-management .actions-container { display: flex; column-gap: .5rem; align-items: center; }
.accounts-management .actions-container { row-gap: .5rem; flex-wrap: wrap; }

#filter-modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--color-black-transparent); z-index: 99; overflow: scroll; }
#filter-modal form, #filter-modal .table-container { max-width: 330px; margin: 3% auto; }
#filter-modal .table-container tr td{ word-break: break-all; }
.accounts-management #filter-modal form fieldset { display: flex; column-gap: .5rem; align-items: center; margin: .5rem 0; }

#app.account-activate form{ max-width: 25rem; margin: 0 auto; }

.filter.has-filter { position: relative; }
.filter.has-filter::before { content: ""; position: absolute; top: -.2rem; right: -.2rem; width: .7rem; height: .7rem; border-radius: 50%; background-color: var(--color-green); animation: pulse 1s infinite ease-in-out alternate; }
@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.5); } 
}

#app.projects #list { margin: 1rem 0; }
#app.projects #list .project { cursor: pointer; padding: .5rem; border-radius: .3rem; }
#app.projects #list .project:hover, #app.projects #list .project:active { background-color: var(--color-gray-dark); }
#app.projects #list .project p { color: var(--color-white); }
#app.projects #list hr { margin: .5rem; }

#app.projects #filter { display: flex; column-gap: .5rem; align-items: end; flex-wrap: wrap; }
#app.projects #filter section,
#app.projects #filter section > section { display: flex; column-gap: 1rem; flex-wrap: wrap; align-items: end; }
#app.projects #filter section > section { flex-wrap: nowrap; }
#app.projects #filter fieldset[data-role] { flex-grow: 1; }
   
input.serialNumber { padding: 0 0.5rem; font-family: "Roboto Condensed"; font-size: 1.5rem; font-weight: 600; }

.mountingPosition, .terminalBoxPosition { position: relative; height: 9rem; width: 8rem; background-repeat: no-repeat; background-position: center .5rem; background-size: 7rem auto; }
.terminalBoxPosition { background-position: center 2.25rem; background-size: 5rem auto; }
.mountingPosition::after, .terminalBoxPosition::after { content: ""; position: absolute; left: 0; bottom: 0; right: 0; line-height: 1.5rem; text-align: center; font-size: .8rem; font-weight: 600; }

.mountingPosition.m1 { background-image: url("../img/icons/m1.png"); }
.mountingPosition.m2 { background-image: url("../img/icons/m2.png"); }
.mountingPosition.m3 { background-image: url("../img/icons/m3.png"); }
.mountingPosition.m4 { background-image: url("../img/icons/m4.png"); }
.mountingPosition.m5 { background-image: url("../img/icons/m5.png"); }
.mountingPosition.m6 { background-image: url("../img/icons/m6.png"); }

.mountingPosition.m1::after { content: "M1"; }
.mountingPosition.m2::after { content: "M2"; }
.mountingPosition.m3::after { content: "M3"; }
.mountingPosition.m4::after { content: "M4"; }
.mountingPosition.m5::after { content: "M5"; }
.mountingPosition.m6::after { content: "M6"; }

.terminalBoxPosition.left { background-image: url("../img/icons/terminal-box-left.png"); }
.terminalBoxPosition.bottom { background-image: url("../img/icons/terminal-box-bottom.png"); background-position: center 1.5rem; }
.terminalBoxPosition.right { background-image: url("../img/icons/terminal-box-right.png"); }
.terminalBoxPosition.top { background-image: url("../img/icons/terminal-box-top.png"); background-position: center 1.5rem; }
.terminalBoxPosition.bottom, .terminalBoxPosition.top { background-size: 3.5rem auto; }

.terminalBoxPosition.left::after { content: "0° - Left"; }
.terminalBoxPosition.bottom::after { content: "90° - Bottom"; }
.terminalBoxPosition.right::after { content: "180° - Right"; }
.terminalBoxPosition.top::after { content: "270° - Top"; }

.mountingPositionSelector, .terminalBoxPositionSelector { display: flex; flex-wrap: wrap; gap: .5rem; } 
.mountingPositionSelector input[type="radio"], .terminalBoxPositionSelector input[type="radio"] { position: absolute; width: 0; height: 0; opacity: 0; }
.mountingPositionSelector input[type="radio"] + label, .terminalBoxPositionSelector input[type="radio"] + label { margin: 0!important; opacity: .6; cursor: pointer; margin: 5px; border-radius: .5rem; border: 1px solid var(--color-gray); }
.mountingPositionSelector .mountingPosition, .terminalBoxPositionSelector .terminalBoxPosition { height: 9.5rem; }
.mountingPositionSelector .mountingPosition::after, .terminalBoxPositionSelector .terminalBoxPosition::after { border-top: 1px dashed var(--color-gray); }
.mountingPositionSelector input[type="radio"]:hover + label, .terminalBoxPositionSelector input[type="radio"]:hover + label { border: 1px solid var(--color-white); padding: 3px; opacity: .9; }
.mountingPositionSelector input[type="radio"]:checked + label, .terminalBoxPositionSelector input[type="radio"]:checked + label { border: 3px solid var(--color-white); padding: 3px; opacity: 1; }

/* @media */
@media screen and (min-width: 767px) 
{
    .accounts-management .account .info { max-width: unset; }
    #filter-modal form, #filter-modal .table-container { max-width: fit-content; padding: 1.5rem 2rem; }

    #app.projects #filter fieldset[data-role] { flex-grow: 0; }
    #access-keys section input { max-width: 25rem; }
}

@media screen and (max-width: 767px) 
{
    #app-page > h1 { display: none; } /* Hide main title */ 

    .media-heading { display: block; text-align: center; }
    .media-heading .picture { margin: 0 auto 1rem auto; }            
    .media-heading .text :is(h1, h3, p, div) { text-align: center; }
}

@media(min-width: 530px)
{
    #app-topbar .app-topbar-content{ background-position: 5rem center; }
}

@media screen and (max-width: 1023px) 
{
    html { font-size: 16px; } 
}

@media print
{
    #app-topbar,
    #app-menu { display: none; }
    #app-page { margin-left: 0; }
}

img.picture { max-width: 100%; margin-bottom: .5rem; border-radius: .2rem; }
img.image-preview, video.video-preview { max-width: 8rem; cursor: pointer; border: 1px solid var(--color-gray); border-radius: .2rem; }
img.image-preview:hover, video.video-preview:hover { border-color: var(--color-white); }
video.video-preview { max-height: 10rem; }

.list-item-container { margin: 0 0 .5rem 0; display: flex; column-gap: 1rem; align-items: center; }
.list-item.attachment { display: grid; grid-column-gap: .5rem; padding: .5rem 0; overflow: hidden; grid-template-columns: minmax(2.5rem, 4rem) minmax(5rem, 100%); }
.list-item.attachment.clickable { grid-template-columns: minmax(2.5rem, 4rem) minmax(5rem, 12rem); width: fit-content; padding: .5rem!important; border-radius: .3rem; border: 1px solid var(--color-gray); align-items: center; cursor: pointer; }
.list-item.attachment.clickable > * { cursor: pointer; }
.list-item.attachment.clickable:hover { border: 1px solid var(--color-white); }

.hithere { animation: hithere 1s ease-in-out; }
@keyframes hithere 
{
    30% { transform: scale(1.05); }
    40%, 60% { transform: rotate(-10deg) scale(1.05); }
    50% { transform: rotate(10deg) scale(1.05); }
    70% { transform: rotate(0deg) scale(1.05); }
    100% { transform: scale(1); }
}

.video-viewer { display: block; margin: 0 auto; max-width: 100%; max-height: 100%; }
.countContainer { display: flex; column-gap: .5rem; }

.assetTypeContainer, .warehouseStockContainer { display: flex; column-gap: .5rem; }
input[type="radio"].assetType, input[type="radio"].warehouseStock { width: .1px; height: .1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
input[type="radio"].assetType + label, input[type="radio"].warehouseStock + label { position: relative; margin: 0!important; height: 9rem; width: 8rem; background-repeat: no-repeat; background-position: center 1.4rem; background-size: 4.5rem auto; font-size: 0; }
input[type="radio"].assetType + label::after, input[type="radio"].warehouseStock +label::after { content: ""; position: absolute; left: 0; bottom: 0; right: 0; line-height: 1.5rem; text-align: center; font-size: .8rem; font-weight: 600; border-top: 1px dashed var(--color-gray); }

input[type="radio"].assetType.motor + label { background-image: url("../img/icons/asset.png"); }
input[type="radio"].assetType.electronic + label { background-image: url("../img/icons/electronic.png"); }
input[type="radio"].warehouseStock.production + label { background-image: url("../img/icons/warehouse-stock-production.png"); }
input[type="radio"].warehouseStock.warehouse + label { background-image: url("../img/icons/warehouse-stock-warehouse.png"); }

input[type="radio"].assetType.motor + label::after { content: "Motor"; }
input[type="radio"].assetType.electronic + label::after { content: "Electronic"; }
input[type="radio"].warehouseStock.production + label::after { content: "Production"; }
input[type="radio"].warehouseStock.warehouse + label::after { content: "Warehouse"; }

input[type="radio"].assetType + label, input[type="radio"].warehouseStock + label { opacity: .6; cursor: pointer; border-radius: .5rem; border: 1px solid var(--color-gray); }
input[type="radio"].assetType:hover + label, input[type="radio"].warehouseStock:hover + label { border: 1px solid var(--color-white); padding: 3px; opacity: .9; }
input[type="radio"].assetType:checked + label, input[type="radio"].warehouseStock:checked + label { border: 3px solid var(--color-white); padding: 3px; opacity: 1; }

.lock-page .overlay { position: relative; margin: 1vh auto; width: 95vw; height: 98vh; background-color: var(--color-gray); border-radius: 0.3rem; overflow: hidden; overflow-y: auto; }
.lock-page .overlay .header { margin: 0; padding: .5rem 1rem; display: flex; gap: .5rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-gray-light); flex-wrap: nowrap; }
.lock-page .overlay .download, .lock-page .overlay .close { display: inline-block; padding: 0; width: 2rem; height: 2rem; background-position: center center; background-size: 1.5rem; background-repeat: no-repeat; }
.lock-page .overlay .download { margin-right: .5rem; background-image: url("/img/icons/btn-download.png");  }
.lock-page .overlay .close  { background-image: url("/img/icons/btn-close.png"); }
.lock-page .overlay .close:hover, .lock-page .overlay .download:hover { background-color: var(--color-black); border-radius: .2rem; }
.lock-page .overlay .body { padding: 1rem 1.5rem; }
.lock-page .overlay .footer { padding: .5rem 1rem; border-top: 1px solid var(--color-gray-light); text-align: center; }
.lock-page .overlay img, .lock-page .overlay video, .lock-page .overlay canvas { display: block; margin: 1vh auto; max-width: 90vw; max-height: 80vh; border-radius: .3rem; }
.lock-page .overlay :is(button, .button):not(.confirm, .delete) { border: 1px solid var(--color-white); }