/* elements */
body,
select,
input,
textarea {
    font-family: 'Calibri', sans-serif;
}

/* index.html - Forms */
select,
input,
textarea {
    font-size: 15px;
}

form.index {
    width: 700px;
    padding: 1em;
}

label.index,
label.orderForm {
    display: inline-block;
    width: 170px;
    text-align: right;
}

label + textarea {
    vertical-align: top;
}

input,
textarea,
select.index {
    width: 300px;
    margin: 5px;
}

/* Properties */
.dark_stripe {
    background-color: #dddddd;
}

.bold {
    font-weight: bold;
}

.reduced_font {
    font-size: 12px;
}

.none {
    display: none;
}

.display {
    display: block;
}

.invisible {
    opacity: 0;
}

.pointer {
    cursor: pointer;
}

.gray-text {
    color: gray;
}

.selected {
    border: 2px solid cornflowerblue;
}

.green-bg {
    background-color: palegreen;
}

.yellow-bg {
    background-color: #fff347;
}

.error {
    font-family: "Courier New", Courier, monospace;
}

.red-bg {
    background-color: lightcoral;
}

.orange-bg {
    background-color: lightsalmon;
}

.failedParameter {
    border: 2px solid red;
}

input[type="radio"],
input[type="checkbox"] {
    margin-left: 180px;
}

input[type="radio"] + label,
input[type="radio"],
input[type="checkbox"] + label,
input[type="checkbox"] {
    width: auto;
}

/* Tables */
table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

table.parameter>thead th,
table.edit>thead th, 
table.initialization>thead th,
table.barcode>thead th  {
    position: sticky;
}

table.parameter>thead th,
table.initialization>thead th,
table.barcode>thead th {
    top: 0px;
}

table.edit>thead th {
    top: 40px;
}

thead th {
    box-shadow: inset 0 2px #bbbbbb,
        inset 0 -2px #bbbbbb;
    background-color: #ffffff;
    border: 1px solid #bbbbbb;
}

td,
th {
    border: 1px solid #bbbbbb;
    text-align: left;
    padding: 8px;
    word-wrap: break-word;
}

table tr:nth-child(odd) {
    background-color: #ffffff;
}

table tr:nth-child(even) {
    background-color: #dddddd;
}

/* Edit Ribbon */
.ribbon {
    position: sticky;
    top: 0px;
    background-color: white;
    z-index: 10;
}

.icon {
    padding: 5px;
}

.icon:hover,
.icon:active {
    background-color: #b8b8b8;
}

/* Legend */
table.legend {
    width: 225px;
}

@media print {
    .ribbon {
        display: none;
    }

    .legend {
        display: none;
    }

    .sidebar {
        display: none;
    }
}

/* navbar */
.navbar {
    margin: -8px -8px 0 -8px;
    padding: 0;
    width: 100%;
}

.navbar, .navbarSubmenu {
    background-color: #dddddd;
    list-style-type: none;
}

.navbar a {
    display: inline-block;
}

.navbarSubmenu a {
    display: block;
}

.navbar a, .navbarSubmenu a{
    color: black;
    padding: 10px;
    text-decoration: none;
}

.navbar a:hover:not(.active),
.currentLink {
    background-color: #b8b8b8;
}

.navbarHoverable {
    position: relative;
    display: inline-block;
}

.navbarSubmenu {
    width: inherit;
    display: none;
    position: absolute;
    z-index: 1;
}

.navbarHoverable:hover .navbarSubmenu {
    display: block;
}