@font-face { font-family: "Industry"; 
             src: url('/fonts/Industry-Book.eot');
             src: url('/fonts/Industry-Book.woff') format('woff');
             src: url('/fonts/Industry-Book.ttf') format('truetype'); 
}
@font-face { font-family: 'Industry'; 
             src: url('/fonts/Industry-BookItalic.eot');
             src: url('/fonts/Industry-BookItalic.woff') format('woff');
             src: url('/fonts/Industry-BookItalic.ttf') format('truetype');
             font-style: italic; 
}
@font-face { font-family: 'Industry'; 
             src: url('/fonts/Industry-Bold.eot');
             src: url('/fonts/Industry-Bold.woff') format('woff');
             src: url('/fonts/Industry-Bold.ttf') format('truetype');
             font-weight: bold; 
}
@font-face { font-family: 'Industry'; 
             src: url('/fonts/Industry-BoldItalic.eot');
             src: url('/fonts/Industry-BoldItalic.woff') format('woff');
             src: url('/fonts/Industry-BoldItalic.ttf') format('truetype');
             font-weight: bold;
             font-style: italic; 
}

:root {
    --bg-light: #F2F1EE;
    --bg-medium: #bbb9b2;
    --bg-dark: #53524D;
    --bg-logo-dark: #3b3a37;
    --bg-super-light: #f9f8f7;
    --border-light: #ddd9d0;
    --border-medium: #bbb9b2;
    
    --brand-color-dark: #444;
    --brand-color-light: #ffc72c;
    --brand-color-light-shade: #ecae00;
    --brand-color-light-bright: #ffd150;
    --main-font-color: #444;
    
    --action-color: #0d3ff4;
    --action-color: #1992FF; /* juvo works blue */
    --action-color: #2f59f6; /* darkish blue */
    --action-color: #ffc72c;
    --action-color-dark-old: #082bb1;
    --action-color-dark: #3b3a37;
    --action-color-light: #4067f7;
    --action-color-light: #ffd96e;
      
    
    --nav-tier-1: #111;
    --jobs-nav-side-margin: 0px;
    --nav-slide: 0.25s;
    --font-family: "Industry",Verdana,Arial,Helvetica,sans-serif;
    
    --odd-row-bg: #F3F5FE;
    --hover-bg: #E7ECFE;
    --hover-bg: #fff3d0; 
    --hover-border-color: #0D3FF4;
}


.util-icon {
    --icon-size: 24px;
    background-image: url(/images/icons-utility-24-dark.png);
    background-repeat: no-repeat;
    background-size: calc(30 * var(--icon-size));
    width: var(--icon-size);
    height: var(--icon-size);
    display: inline-block;
}
.util-icon.size-16 {
    --icon-size: 16px;
}
.util-icon.size-12 {
    --icon-size: 12px;
}
.util-icon.yellow {
    background-image: url(/images/icons-utility-24-yellow.png);
}
.util-icon.edit {
    background-position: 0px 0px;
}
.util-icon.swap {
    background-position: calc(0px - var(--icon-size)) 0px;
}
             

.nav-icon {
    --icon-size: 16px;
    opacity: 0.7;
    background-image: url(/images/icons-24-white.png);
    background-repeat: no-repeat;
    background-size: calc(30 * var(--icon-size));
    width: var(--icon-size);
    height: var(--icon-size);
    display: inline-block;
}
.nav-icon.size-18 {
    --icon-size: 18px;
}
.nav-icon.size-20 {
    --icon-size: 20px;
}
.nav-icon.size-22 {
    --icon-size: 22px;
}
.nav-icon.size-24 {
    --icon-size: 24px;
}
.nav-icon.dark {
    background-image: url(/images/icons-24-dark.png);
}
.nav-icon.Bridge {
    background-position: 0px 0px;
}
.nav-icon.Building {
    background-position: calc(0px - var(--icon-size)) 0px;
}
.nav-icon.Other {
    background-position: calc(0px - 2 * var(--icon-size)) 0px;
}
.nav-icon.truck {
    background-position: calc(0px - 3 * var(--icon-size)) 0px;
}
.nav-icon.checkbox {
    background-position: calc(0px - 4 * var(--icon-size)) 0px;
    opacity: 1;
}
.nav-icon.checkbox.checked {
    background-position: calc(0px - 5 * var(--icon-size)) 0px;
}
.nav-icon.settings {
    background-position: calc(0px - 6 * var(--icon-size)) 0px;
}
.nav-icon.left {
    background-position: calc(0px - 7 * var(--icon-size)) 0px;
}
.nav-icon.right {
    background-position: calc(0px - 8 * var(--icon-size)) 0px;
}
.nav-icon.user {
    background-position: calc(0px - 9 * var(--icon-size)) 0px;
}
.nav-icon.add {
    background-position: calc(0px - 10 * var(--icon-size)) 0px;
}
.nav-icon.alert {
    background-position: calc(0px - 11 * var(--icon-size)) 0px;
}
.nav-icon.history {
    background-position: calc(0px - 12 * var(--icon-size)) 0px;
}
.nav-icon.chart {
    background-position: calc(0px - 13 * var(--icon-size)) 0px;
}
.nav-icon.summary {
    background-position: calc(0px - 14 * var(--icon-size)) 0px;
}
.nav-icon.temp {
    background-position: calc(0px - 15 * var(--icon-size)) 0px;
}
.nav-icon.cube {
    background-position: calc(0px - 16 * var(--icon-size)) 0px;
}
.nav-icon.graph,
.nav-icon.power {
    background-position: calc(0px - 17 * var(--icon-size)) 0px;
}
.nav-icon.device {
    background-position: calc(0px - 18 * var(--icon-size)) 0px;
}
.nav-icon.checkmark {
    -background-color: #aaa;
    background-position: calc(0px - 4 * var(--icon-size)) 0px;
}
.nav-icon.checkmark.checked {
    opacity: 1;
    background-position: calc(0px - 19 * var(--icon-size)) 0px;
}
.nav-icon.email {
    background-position: calc(0px - 20 * var(--icon-size)) 0px;
}
.nav-icon.validate {
    background-position: calc(0px - 21 * var(--icon-size)) 0px;
}
.nav-icon.data {
    background-position: calc(0px - 22 * var(--icon-size)) 0px;
}
.nav-icon.archive {
    background-position: calc(0px - 23 * var(--icon-size)) 0px;
}
.nav-icon.inbox {
    background-position: calc(0px - 24 * var(--icon-size)) 0px;
}
.nav-icon.exit {
    background-position: calc(0px - 25 * var(--icon-size)) 0px;
}
.nav-icon.home {
    background-position: calc(0px - 26 * var(--icon-size)) 0px;
}
.nav-icon.sms {
    background-position: calc(0px - 27 * var(--icon-size)) 0px;
}
.nav-icon.down {
    background-position: calc(0px - 28 * var(--icon-size)) 0px;
}
.nav-icon.up {
    background-position: calc(0px - 29 * var(--icon-size)) 0px;
}

.nav-icon.crane-add {
    background-position: calc(0px - 0 * var(--icon-size)) calc(0px - 1 * var(--icon-size));
}
.nav-icon.logger-add {
    background-position: calc(0px - 1 * var(--icon-size)) calc(0px - 1 * var(--icon-size));
}
.nav-icon.logger-unknown {
    background-position: calc(0px - 2 * var(--icon-size)) calc(0px - 1 * var(--icon-size));
}
.nav-icon.logger {
    background-position: calc(0px - 3 * var(--icon-size)) calc(0px - 1 * var(--icon-size));
}
.nav-icon.error {
    background-position: 0 0;
    background-image: url(/images/error.png);
    background-size: calc(1 * var(--icon-size));
}


.float-container {
    overflow: auto;
}

.clear {
    clear: both;
}