html, body {
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
        "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif;
}
.regular { font-weight: 400; }
.thinner { font-weight: 300; }

.row-select { color: #f47417; }
.list-item-selected { background-color: #f7f7f7; }

/*.divTable {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
}
.divTable-stretch {width: 100%;}
.divTableHead { display: table-header-group; }
.divTableFoot { display: table-footer-group; }
.divTableBody { display: table-row-group; }
.divTableBody > .divTableRow:nth-child(odd) { background-color: #f9f9f9; }
.divTableRow { display: table-row; }
.divTableRow:hover, .divTableRow:nth-child(odd):hover { background-color: #eee; }
.divTableTH, .divTableTD { display: table-cell; padding: .5rem; }
.divTableTH { border-bottom: 1px double #ccc; }*/
/*****************************************************************************/
.divTable {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between!important;
    position: relative;
    border-spacing: 0;
}
.divTable-stretch {
    width: 100%;
}
.divTableHead, .divTableFoot, .divTableRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between!important;
    width: 100%;
    position: relative;
}
.divTableRow:nth-child(even) {
    background-color: #fafafa;
}
.divTableHead { border-bottom: 1px double #ccc; }
.divTableBody {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
}
.divTableTD {
    align-self: center;
    padding: .5rem;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.multi-flex-item-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
/*****************************************************************************/
/* component-specs */
#component-specs > div > div > div.divTableTD:nth-child(1) {
    flex: 0 1 calc(48%);
    border-right: 1px solid #ccc;
}
#component-specs > div > div > div.divTableTD:nth-child(2) {
    flex: 0 1 calc(48%);
}
#component-specs > div > div > div.divTableTD:nth-child(3) {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
}
/*****************************************************************************/
div.filelist-table > div > div > div.divTableTD:nth-child(1) {
    flex: 0 0 calc(70% - 2rem);
}
div.filelist-table > div > div > div.divTableTD:nth-child(2) {
    flex: 0 1 calc(30% - 2rem);
    text-align: right;
}
div.filelist-table > div > div > div.divTableTD:nth-child(3) {
    padding: 0;
    margin: 0;
    flex: 0 0 4rem;
}
/*****************************************************************************/
#qri-cover-body {
    position: fixed;
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    justify-content: space-around;
    background-color: #f5f5f5;
    overflow: hidden;
    z-index: 3000;
}
#qri-cover-body > #login-box, #qri-cover-body > #login-box > img {
    align-self: center;
    width: 300px;
}
/*****************************************************************************/
/*.navbar {
    display: flex;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    margin-bottom: 0;
    background-color: #f7f7f7;
}
.navbar > button {
    -webkit-appearance: button;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    line-height: 46px;
    padding: 0 1.25rem;
    background: 0 0;
    border: 1px solid transparent;
    border-radius: .25rem;
}*/
/*****************************************************************************/
.qri-sidebar {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 140px;
    height: 100%;
    z-index: 2000;
    background-color: #666;
    box-shadow: inset -2px 0px 6px -2px rgba(0,0,0,0.5);    -webkit-box-shadow: inset -2px 0px 6px -2px rgba(0,0,0,0.5);    -moz-box-shadow: inset -2px 0px 6px -2px rgba(0,0,0,0.5);
}
.qri-sidebar > ul {
    -webkit-flex-direction: column!important;
    -ms-flex-direction: column!important;
    flex-direction: column!important;
}
.qri-sidebar > ul > li {
    width: 140px;
    background-color: #666;
    border-bottom: 1px solid #ccc;
    /*margin-left: -110px;*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    transition-delay: 200ms;
    box-shadow: inset -2px 0px 6px -2px rgba(0,0,0,0.5);    -webkit-box-shadow: inset -2px 0px 6px -2px rgba(0,0,0,0.5);    -moz-box-shadow: inset -2px 0px 6px -2px rgba(0,0,0,0.5);
}
.qri-sidebar > ul > li:hover {
    /*margin-left: 0;*/
    box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.5);   -webkit-box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.5);   -moz-box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.5);
}
.qri-sidebar > ul > li > a {
    /*color: #1797F4;*/
    /*color: #f47417;*/
    color: #eee;
    display: flex;
    justify-content: space-around;
}
.qri-sidebar > ul > li > a:hover, .qri-sidebar > ul > li > a:focus {
    /*background-color: #f5f5f5;*/
    color: #666;
}
.qri-sidebar > ul > li > a > i {
    margin-left: auto;
    align-self: center;
}
#qri-logo {
    background-color: #e2e2e2;
    height: 50px;
    display: flex;
    justify-content: space-around;
}
#qri-logo > img {
    height: 50px;
    align-self: center;
}
/*****************************************************************************/
#main-container-fluid {
    margin-left: 140px;
    height: 100%;
}
/*****************************************************************************/
#Home, #Settings {
    /*top: 0;*/
    height: 100%;
}
/*****************************************************************************/
/* MODAL  */
#objectsModal.form-group.required .control-label:after {
  content:"*";
  color:red;
  margin-left: 4px;
}
/*****************************************************************************/
/* PANEL GROUP */
#qri-col-one, #qri-col-two { padding: 0; }

.panel, .panel-heading, .panel-title, .panel-group, .panel-group .panel {
    margin-bottom: 0;
    border-radius: 0;
    border: 0;
}
.panel-heading {
    z-index: 1010;
    box-shadow: 0px 2px 10px -4px rgba(0,0,0,0.5);  -webkit-box-shadow: 0px 2px 10px -4px rgba(0,0,0,0.5);  -moz-box-shadow: 0px 2px 10px -4px rgba(0,0,0,0.5);
}
.panel-body, .panel-collapse {
    z-index: 1000;
}
/*****************************************************************************/
#headingTwo > form > div { padding-left: 1rem; }

#headingOne {
    display: flex;
    justify-content: space-around;
    color: white;
    background-color: #f47417;
}
#headingOne > h3 {
    margin-right: auto;
    align-self: center;
    line-height: 30px;
}

#headingTwo {
    display: flex;
    justify-content: space-around;
    color: white;
    /*background-color : #707070;*/
    background-color: #e86109;
}
#headingTwo > h3 {
    margin-right: auto;
    align-self: center;
}
#headingTwo > form {
    margin-left: auto;
    align-self: center;
}

#headingThree {
    display: flex;
    justify-content: space-around;
    background-color: #1797F4;
    padding: 0;
}
#headingThree > ul > li {
    align-self: center;
}
#headingThree > ul.nav-pills > li > a {
    border-radius: 0;
    padding: 15px;
    color: white;
}
#headingThree > ul.nav-pills > li.active > a:hover {
    color: white;
}
#headingThree > ul.nav-pills > li > a:hover {
    color: #337ab7;
}

#components-panel { margin-top: 0px; }

/*****************************************************************************/
table#objects > tbody, table#components > tbody { cursor: pointer !important; }
table#objects, table#components {
    white-space: pre-wrap;
}
table#objects td, table#components td {
    text-overflow: ellipsis;
    word-break: break-all;
}
/*****************************************************************************/
#info-panel-body { border-left: 1px solid silver; }

#cover-tabs {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 1px;
    width: calc(100% - 1px);
    height: calc(100% - 8px);
    text-align: center;
    padding-top: 33%;
    background-color: white;
}

div.qri-tab-row {
    display: flex;
    width: 100%;
}
div.qri-tab-row > #gallery-links, div.qri-tab-row > #remark-container {
    width: 50%;
}
div.qri-tab-row > #qri-specs-button-group {
    margin-left: auto;
    align-self: center;
}

#misc-files-list > div > div.divTableBody > div > div:nth-child(1), #calibration-files-list > div > div.divTableBody > div > div:nth-child(1), #images-files-list > div > div.divTableBody > div > div:nth-child(1) { width: 70%; }
/*****************************************************************************/
div#qricode {
    display: flex;
    margin: 1rem;
    width: 300px;
    height: 300px;
}
/*****************************************************************************/
div.drag-and-drop-zone {
  width: 100%;
  height: auto;
  position: relative;
  margin: 10px auto;
  text-align: center;
  padding: 1rem;
}
div#drag-and-drop-zone-misc{
  border: 3px teal dashed;
}
div#drag-and-drop-zone-calibration{
  border: 3px lightsalmon dashed;
}
div#drag-and-drop-zone-images{
  border: 3px firebrick dashed;
}
div.or { padding: 1rem; }
#misc-file, #calibration-file, #image-file {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.drag-and-drop-zone > div.fman > label > span.btn { color: white; border: 0; }
#drag-and-drop-zone-misc > div.fman > label > span.btn { background-color: teal; }
#drag-and-drop-zone-calibration > div.fman > label > span.btn { background-color: lightsalmon; }
#drag-and-drop-zone-images > div.fman > label > span.btn { background-color: firebrick; }
/*****************************************************************************/
#notifications_wrapper {
  position: absolute;
  bottom: 8px;
  left: 20px;
  right: 20px;
  width: auto;
  max-height: 30%;
  z-index: 3000 !important;
}
#notifications > .alert {
  display: none;
}

#Settings > div {
    display: flex;
    flex-direction: row;
    height: 100%;
    background-color: #eee;
    padding: 2rem;
}
#settings-nav {
    margin-right: 2rem;
}
#settings-tabs {
    flex: 1;
}
#settings-specs {
    display: flex;
    flex-direction: column;
}
#settings-specs > div {
    display: flex;
    flex-direction: row;
}
#settings-specs > div#settings-specs-lists {
    display: flex;
    flex-direction: row;
}
#settings-specs > div#settings-specs-lists > div {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#settings-specs > div#settings-specs-lists > div > ul {
    display: block;
    flex: 1;
    align-self: stretch;
    margin: 1rem;
    padding: .5rem;
    border-radius: 4px;
    background-color: white;
}
#settings-specs > div#settings-specs-lists > div > ul > li {
    border: 1px solid transparent;
    cursor: pointer;
    padding: .5rem;
    border-radius: 4px;
    min-height: 32px;
}
#settings-specs > div#settings-specs-lists > div > h5 {
    margin: auto;
}
#settings-specs > div#settings-specs-lists > div > div {
    display: flex;
    flex: 1;
    justify-content: space-around;
    margin-bottom: 1rem;
}
#settings-specs > div#settings-specs-lists > div > div > div {
    margin: auto;
}
#settings-specs-list-save {
    display: flex;
}
#settings-specs-list-save > button {
    margin-right: 1rem;
    margin-left: auto;
}

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

@media(max-width:768px) {
    html, body {
        overflow: auto;
    }
    .qri-sidebar {
        position: fixed;
        display: flex;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        z-index: 2000;
        background-color: #666;
        box-shadow: none;
    }
    .qri-sidebar > ul {
        display: flex;
        -webkit-flex-direction: row!important;
        -ms-flex-direction: row!important;
        flex-direction: row!important;
    }
    .qri-sidebar > ul > li {
        width: 140px;
        background-color: #666;
        border-bottom: none;
        border-right: 1px solid #eee;
        /*margin-left: -110px;*/
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        transition-delay: 200ms;
        box-shadow: none;
    }
    .qri-sidebar > ul > li:hover {
        /*margin-left: 0;*/
        box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.5);   -webkit-box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.5);   -moz-box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.5);
    }
    .qri-sidebar > ul > li > a {
        /*color: #1797F4;*/
        /*color: #f47417;*/
        color: #eee;
        display: flex;
        justify-content: space-around;
    }
    .qri-sidebar > ul > li > a:hover, .qri-sidebar > ul > li > a:focus {
        /*background-color: #f5f5f5;*/
        color: #666;
    }
    .qri-sidebar > ul > li > a > i {
        margin-left: auto;
        align-self: center;
    }
    #qri-logo {
        display: none;
    }
    #main-container-fluid {
        margin-left: 0;
        margin-top: 40px;
    }
    #settings-specs > div#settings-specs-lists {
        display: flex;
        flex-direction: column;
    }
}
@media(max-width:992px) {}