/* 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-light-italic.ttf"); font-weight: bold; font-style: italic; }

:root 
{    
    --topbar-height: 50px;
    --sidebar-width: 290px;
    
    --color-main: #0c4da2;
    --color-mainShadow: #0c4ea2c0;
    --color-secondary: #339af0;
    --color-black: #343a40;
    --color-white: #ffffff;
    --color-transparentWhite: #ffffffc0;
    --color-shadowLight: #00000030;
    --color-shadow: #00000045;
    --color-shadowDark: #00000060;   
    --color-shadowExtraDark: #00000090;   
    --color-icons: #63696f;
    
    --color-gray0: #f8f9fa;
    --color-gray1: #f1f3f5;
    --color-gray2: #e9ecef;
    --color-gray3: #dee2e6;
    --color-gray4: #ced4da;
    --color-gray5: #adb5bd;
    --color-gray6: #868e96;
    --color-gray7: #495057;
    
    --color-red: #ec2330;
    --color-pink: #e64980;
    --color-grape: #cc5de8;
    --color-violet: #845ef8;
    --color-indigo: #5c7cf9;
    --color-blue: #339af0;
    --color-cyan: #22b8cf; 
    --color-teal: #20c997;   
    --color-green: #41c057;
    --color-greenDark: #107c41;
    --color-lime: #94d82e;
    --color-yellow: #ffd43b;
    --color-yellowLight: #fff3bf;
    --color-orange: #fd7e13;    
    --color-orangeDark: #dc4c2c;    
}

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

.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; }
.extra-light { font-weight: 100; }
.small-text { font-size: .8em; }
.link { color: var(--color-main); cursor: pointer; }
.underline { text-decoration: underline; }
.pointer { cursor: pointer; }
.highlighted { background-color: var(--color-yellowLight); }
.hidden { display: none; }


.note { font-size: .9rem; color: var(--color-gray6); font-weight: 200; }
.info-message { font-size: 1.2rem; color: var(--color-gray7); font-weight: 200; margin: 1.2rem 0; padding: .1rem .1rem .1rem 2.2rem; background: transparent url("../img/icons/info.png") 0 0 no-repeat; background-size: auto 1.6rem; }
.info-message.tip { background-image: url("../img/icons/tip.png"); font-weight: 200; font-size: .9rem; background-color: var(--color-gray1); border-radius: .5rem; padding: .8rem .8rem .8rem 2.6rem; background-position: .6rem center; }
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"); }

.box { background: linear-gradient(-45deg, var(--color-gray0) 0%, var(--color-gray1) 100%); padding: 1.5rem 1rem; margin: 1.2rem 0; border-radius: .5rem; box-shadow: 0.1rem 0.2rem 0.5rem var(--color-shadowLight); }
.box h3 { margin: 0 0 1.5rem 0; }
.box p.note { margin: 0 0 1.5rem 0; }
.box.flat { background: var(--color-gray0); box-shadow: none; margin: 1rem 0; }

br { content: ""; display: block; height: 0.6rem; }
br.small { height: 0.3rem; }
br.big { height: 1.2rem; }
hr { border: 0; width: 100%; height: 1px; background: var(--color-gray3); margin: 1.2rem 0; }
hr.small { margin: 0.6rem 0; }
hr.big { height: 3px; }
hr.dotted { border-top: 2px dotted var(--color-gray3); height: 2px; background: transparent; }
a { color: var(--color-main); }
h1 { font-size: 2.2rem; font-weight: 100; margin-bottom: 1rem; }
h2 { font-size: 1.8rem; font-weight: 200; margin: 1rem 0; }
h3 { font-size: 1.4rem; margin: 1rem 0; }
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; padding: 1rem; background: var(--color-gray1); border-radius: .6rem; }

/* Forms */
fieldset { position: relative; display: block; margin: 0 auto; padding: 0 0 .5rem 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 { color: var(--color-gray5); font-weight: 200; font-style: italic; }
::-webkit-inner-spin-button,
::-webkit-clear-button,
::-webkit-search-cancel-button { display: none; }
:-webkit-autofill { transition: background-color infinite linear 0; -webkit-text-fill-color: var(--color-gray5); box-shadow: 0 0 0 1000px var(--color-gray0) inset; padding: 0 !important; text-align: center; font-weight: bold; }
:disabled { opacity: .4; cursor: not-allowed !important; }

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

textarea { height: 12rem; max-width: 40rem; line-height: 1.2rem; padding: 1rem; }
textarea.m { max-width: 25rem; height: 8rem; }
select,
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
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"); border-radius: 2rem; }
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"); }
input[type="date"] { max-width: 12rem; padding-right: 0; background-image: url("../img/icons/input-date.png"); }
input[type="datetime-local"] { max-width: 14rem; padding-right: 0; background-image: url("../img/icons/input-date-time.png"); }
::-webkit-calendar-picker-indicator { background: url("../img/icons/input-down.png") center center no-repeat; background-size: 1rem; height: 2rem; width: 1.4rem; color: transparent; }
input[type="time"] { max-width: 8rem; padding-right: 0; background-image: url("../img/icons/input-time.png"); }
input.icon.username { background-image: url("../img/icons/input-username.png"); }
input.icon.barcode { background-image: url("../img/icons/input-barcode.png"); }
input.icon.email { background-image: url("../img/icons/input-email.png"); }
input.icon.euro { background-image: url("../img/icons/input-euro.png"); }

input.switch { display: inline-block; position: relative; margin: 1rem 0.2rem; height: 1.2rem; width: 2.6rem; border-radius: .8rem; background: var(--color-gray4); border: 0; cursor: pointer; transition: .4s ease-in-out; box-shadow: inset 0.1rem 0.2rem 0.5rem var(--color-shadow); }
input.switch:after { content: ""; position: absolute; top: -0.2rem; left: -0.2rem; display: block; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-white); transition: .2s ease-in-out; box-shadow: 0.1rem 0.2rem 0.5rem 0.1rem var(--color-shadow); }
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-gray7); font-weight: normal; text-transform: none; cursor: pointer; }

input[type="file"] { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }

:is(button, .button) { display: inline-block; text-align: center; text-decoration: none; text-transform: uppercase; margin: .5rem 0; font-size: 0.9rem; font-weight: bold; height: 2.4rem; color: var(--color-white); line-height: 2.4rem; border-radius: 0.5rem; padding: 0 1.6rem; cursor: pointer; border: 1px solid transparent; background-color: var(--color-gray6); margin-right: 0.5rem; width: 100%; max-width: 25rem;}
:is(button, .button):last-child { margin-right: 0; }
:is(button .button):hover { box-shadow: 0.1rem 0.2rem 0.5rem var(--color-shadowDark); }
:is(button, .button):focus { border-color: var(--color-shadowDark); }
:is(button, .button):active { box-shadow: none; }
:is(button, .button).flat { display: inline-block; text-align: center; text-decoration: none; text-transform: uppercase; font-size: 0.9rem; height: 2.4rem; line-height: 2.4rem; padding: 0 1.6rem; cursor: pointer; width: 100%; max-width: 25rem; background-color: transparent; }
:is(button, .button).flat:focus, :is(button, .button):active { border-color: transparent; }
:is(button, .button).main { color: var(--color-white); background-color: var(--color-main); }
:is(button, .button).secondary { color: var(--color-white); background-color: var(--color-secondary); }
: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).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.delete { background-image: url("../img/icons/btn-delete.png"); }
:is(button, .button).icon.refresh { background-image: url("../img/icons/btn-refresh.png"); }
:is(button, .button).icon.back { background-image: url("../img/icons/btn-back.png"); }
:is(button, .button).icon.prev { background-image: url("../img/icons/btn-prev.png"); }
:is(button, .button).icon.next { background-image: url("../img/icons/btn-next.png"); }
:is(button, .button).icon.search { background-image: url("../img/icons/btn-search.png"); }
:is(button, .button).icon.settings { background-image: url("../img/icons/btn-settings.png"); }
:is(button, .button).icon.close { background-image: url("../img/icons/btn-close.png"); }
:is(button, .button).icon.clear { background-image: url("../img/icons/btn-clear.png"); }
:is(button, .button).icon.add { background-image: url("../img/icons/btn-add.png"); }
:is(button, .button).icon.add-notes { background-image: url("../img/icons/btn-add-notes.png"); background-size: 1.8rem; }
:is(button, .button).icon.logout { background-image: url("../img/icons/btn-logout.png"); }
:is(button, .button).icon.edit-account { background-image: url("../img/icons/btn-edit-account.png"); }
:is(button, .button).icon.download { background-image: url("../img/icons/btn-download.png"); }
:is(button, .button).icon.edit { background-image: url("../img/icons/btn-edit.png"); }
:is(button, .button).flat.icon.back { background-image: url("../img/icons/arrow-left.png"); background-size: 2rem; min-width: 3rem; }

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

.pagination-nav { text-align: left !important; border-top: 3px solid var(--color-gray2); 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: auto; border: 1px transparent; border-radius: 5px; padding: .5rem 0 0 0; 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-gray3); padding: .6rem 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.data tr th { font-weight: bold; border-bottom-width: 3px; }
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 tbody tr { cursor: pointer; }
table.data tbody tr.disabled{ cursor: not-allowed; }
table.data tbody tr:nth-child(odd):not(.no-background-color) { background-color: var(--color-gray0); }
table.data tbody tr:hover:not(.row-details) { background-color: #0c4da220; }
table.data tr th { font-weight: bold; border-bottom-width: 3px; }
table.data tr th { border-bottom-width: 1px; }



table.summary { display: table; width: 100%; border-spacing: 0; }
table.summary tr { display: table-row; border-collapse: collapse; vertical-align: top; }
table.summary tr th, 
table.summary tr td { display: table-cell; vertical-align: top; padding: .6em; border-bottom: 1px solid var(--color-gray3); }
table.summary tr th { color: var(--color-gray5); 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-gray0); }
table.summary tr.inner-row :first-child { margin-left: 1rem; }

.progress-bar-container { width: 100%; padding: 1.2rem; }
.progress-bar { width: 100%; position: relative; }
.progress-bar { width: 100%; position: relative; background: var(--color-gray3); 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 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#app-topbar { position: sticky; top: 0; margin-left: var(--sidebar-width); height: var(--topbar-height); background: var(--color-white); border-bottom: 1px solid var(--color-gray4); overflow: hidden; z-index: 10; }
#app-topbar { display: none; } /* only on small screen */
#app-topbar h1 { display: inline-block; width: 100%; padding: 0 var(--topbar-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 18px; color: var(--color-main); font-weight: bold; line-height: var(--topbar-height); }
#app-topbar .toggle-sidebar { display: none; }        
#app-page { position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 0; margin-left: var(--sidebar-width); padding: 1rem; overflow-y: scroll; touch-action: pan-x pan-y; }

#app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); height: 100%; overflow: hidden; overflow-y: auto; background: var(--color-white); border-right: 1px solid var(--color-gray4); }
#app-sidebar h1 { background-color: var(--color-white); background-image: url('/img/logo.png'); background-size: 10rem; background-repeat: no-repeat; background-position: center center; color: var(--color-white); text-align: center; padding: 2rem; font-weight: 200; font-size: 1.6rem; margin: 0; }
#app-sidebar h3 { margin: .6rem 0 0 0; padding: .5rem 1rem; font-size: 1rem; line-height: 1.2rem; color: var(--color-main); font-weight: normal; }
#app-sidebar hr { margin: .6em 0; }
#app-sidebar a { text-decoration: none; color: var(--color-black); }
#app-sidebar .nav { position: relative; display: block; padding: .5rem 1rem; line-height: 1.8rem; font-weight: 200; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-left: .4rem solid transparent; font-size: .9rem; }
#app-sidebar .nav.icon { padding-left: 2.8rem; background-image: url("../img/icons/nav-unknown.png"); background-position: .9rem center; background-size: 1.4rem auto; background-repeat: no-repeat;  }
#app-sidebar .nav:hover { background-color: var(--color-gray0); border-color: var(--color-main); }
#app-sidebar .nav:active { background-color: var(--color-gray2); border-color: var(--color-main); }
#app-sidebar .nav.selected { background-color: var(--color-gray2); border-color: var(--color-main); font-weight: bold; }

/* Dialogs */
.loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; background-color: var(--color-transparentWhite); overflow: hidden; }
.loader:before { content: ""; display: block; width: 100%; height: 15px; 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-shadow); text-align: center; }
dialog { position: fixed; display: block; bottom: 0; width: 100%; border: 0; z-index: 20; }
dialog.messagebox { padding: 90px 25px 25px 25px; background: #fff; background-repeat: no-repeat; background-position: 20px 20px; background-size: auto 56px; border-top: 5px solid #e1e3eb }
dialog.messagebox.error { background-image: url("../img/ico-error.png"); border-color: #e11b12; }
dialog.messagebox.warning { background-image: url("../img/ico-warning.png"); border-color: #ff9800; }
dialog.messagebox.info { background-image: url("../img/ico-info.png"); border-color: #0099de; }
dialog.messagebox.success { background-image: url("../img/ico-success.png"); border-color: #0aad45; }
dialog.messagebox h2 { font-weight: normal; font-size: 32px; color: #1d1e22; }
dialog.messagebox p { margin: 10px 0; font-size: 15px; color: #757c87; }
dialog.messagebox button { margin-top: 10px; }
dialog.messagebox .actions { display: flex; column-gap: .5rem; }

.lock-page .overlay { background: var(--color-white); padding: 1.5rem; border-radius: .8rem; margin: 5vh 5vw; width: 90vw; height: 90vh; overflow: hidden; overflow-y: auto; }

.spinner, .spinner:before, .spinner:after { border-radius: 50%; width: 1rem; height: 1rem; animation-fill-mode: both; animation: animateSpinner 2s infinite ease-in-out; }
.spinner { color: var(--color-main); margin: 3rem auto .5rem auto; position: relative; transform: translateZ(0); animation-delay: -0.3s; }
.spinner:before, .spinner:after { content: ""; position: absolute; top: 0; }
.spinner:before { left: -1.4rem; animation-delay: -0.6s; }
.spinner:after { left: 1.4rem; }
@keyframes animateSpinner 
{
  0%, 80%, 100% { box-shadow: 0 -1rem 0 -1rem; }
  40% { box-shadow: 0 -1rem 0 0; }
}

/* Small screen (phone and tablet) */
@media screen and (max-width: 1023px) 
{
    html { font-size: 16px; }   
    #app-topbar { margin-left: 0; display: block; }    
    #app-page { margin-left: 0; margin-top: var(--topbar-height);}
    #app-sidebar { top: var(--topbar-height); transform: translateX(-100%); transition: transform 500ms; border: 0; }
    #app-sidebar h1 { display: none; }
    #app-topbar .toggle-sidebar { position: absolute; 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: 18px auto; font-size: 0; }
    #app-topbar .toggle-sidebar:hover, #app-topbar .toggle-sidebar:active { background-color: var(--color-gray1); }
    #app.sidebar-on #app-sidebar { padding-bottom: var(--topbar-height); transform: translateX(0); box-shadow: 0 -5px 25px 0 var(--color-shadowDark); }
    #app.sidebar-on #app-topbar .toggle-sidebar { background-image: url("../img/icons/menu-close.png"); }
    #app.sidebar-on #app-page { opacity: .25; } 
}

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