/* Minification failed. Returning unminified contents.
(74,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(80,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(89,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(116,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(163,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(164,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(170,21): run-time error CSS1039: Token not allowed after unary operator: '-breadcrumb-font-size'
(182,21): run-time error CSS1039: Token not allowed after unary operator: '-breadcrumb-font-size'
(186,19): run-time error CSS1039: Token not allowed after unary operator: '-breadcrumb-divider'
(1923,28): run-time error CSS1036: Expected expression, found '['
(1991,28): run-time error CSS1036: Expected expression, found '['
 */
html {
    margin: 0;
    padding: 0;
    /*
      Fix jumping page when scrollbar appears or disappears
       see: https://aykevl.nl/2014/09/fix-jumping-scrollbar
       This has the side-effects that it will hide the right part of the page as the scrollbar hides that part, and it will disable horizontal scrolling.
       An even better fix would be to copy the implementation in https://codepen.io/anon/pen/NPgbKP, however, this is difficult as the Views are a complete mess right now. (see: #87 and #88)

      Update 2023-05-16 (see #325):
      This fix has been temporarily disabled to allow the creation of the _Layout.cshtml in LabWebPortalCore.
      It is intended that this fix will be re-enabled at the completion if this ticket.
    */
    /* width: 100vw; */
    /* overflow-x: hidden; */
}

body {
    background-color: #fff;
    color: #000;
    font-size: 1em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0 0 2em 0;
}

.main-body, .main-body-width {
    width: 980px !important;
    margin-left: auto;
    margin-right: auto;
}

.full-width-main-body {
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
}

.jHtmlArea iframe {
    background-color: #fff;
    color: #000;
    font-size: 1em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.sort-table {
    cursor: pointer;
}

#zeiss-logo
{
    padding-top: 5px;
    padding-bottom: 15px;
}

/**
 * Allows for a form button to be styled as a link.
 *
 * Eg:
 * <form class="button-link"><button type="submit">Add</button</form>
 */

form.button-link {
    display: inline;
}

form.button-link button {
    /* Make button look like link */
    background: none !important;
    border: none;
    padding: 0 !important;
    cursor: pointer;
    /* Give button same style as link */
    color: var(--dark);
    outline: none;
    text-decoration: none;
}

a.icon-link {
    color: var(--dark);
    text-decoration: none;
}

a.icon-link:hover {
    text-decoration: none;
}

.inconspicuous-links a {
    color: var(--dark);
    outline: none;
    text-decoration: none;
}

form.button-link button:hover {
    text-decoration: underline;
}


.link-section {
    border: solid 1px #FFFFFF;
    padding: 15px;
    margin: 15px 15px 15px 0px;
}

.link-section.container {
    max-width: 980px;
}

.link-section-index {
    height: 100%;
    border: solid 1px #FFFFFF;
    padding: 5px;
}

.link-section a {
    color: var(--dark);
    outline: none;
    text-decoration: none;
}

.link-section a:hover
{
    text-decoration: none;
}

.link-section:hover
{
    background: #EEEEFF;
    border: solid 1px #DDDDFF;
    border-radius: 5px;
}

.home-link {
    height: 100%;
    width: 100%;
    text-align: center;
}

.home-link-index {
    display: block;
    height: 100%;
    width: 100%;
    text-align: left;
}

.home-image {
    position: relative;
    height: 100%;
    width: 30%;
    left: 2.5%;
    top: 2px;
}

/* Modifies bootstrap breadcrumb styling */
ol.breadcrumb {
    padding: inherit;
    background-color: inherit;
    padding-left: 0;
    margin-bottom: 0;
}

:root {
    --breadcrumb-font-size: 1rem;
    --breadcrumb-divider: "/";
}

/* Modifies bootstrap breadcrumb styling */
ol.breadcrumb a {
    color: #b1b1b1;
    font-size: var(--breadcrumb-font-size);
}

/* Modifies bootstrap breadcrumb styling */
.breadcrumb-item {
    /* allow .breadcrumb-item::before to align vertically */
    display: flex;
}

/* Modifies bootstrap breadcrumb styling */
.breadcrumb-item + .breadcrumb-item::before {
    color: #b1b1b1 !important;
    font-size: var(--breadcrumb-font-size);
    /* align vertically with breadcrumb-item */
    display: flex;
    align-items: center;
    content: var(--breadcrumb-divider) !important;
}

/* Allow bootstrap icons to be flipped.  Example: `<i class="bi-rewind-fill icon-flipped"></i>` */
.icon-flipped::before {
    transform: scaleX(-1);
}

.icon-button:hover {
    text-shadow: 0 0 4px rgba(38,143,255,.5);
}

.icon-button:active {
    text-shadow: 0 0 4px rgba(38,143,255, 1);
}

.font-smaller {
    font-size: smaller;
}

.font-smaller input {
    font-size: smaller;
}

/* This can be removed when we move to bootstrap 5 */
.gap-1 {
    gap: 0.25rem !important;
}

/* This can be removed when we move to bootstrap 5 */
.gap-2 {
    gap: 0.5rem !important;
}

/* This can be removed when we move to bootstrap 5 */
.gap-3 {
    gap: 1rem !important;
}


.center
{
margin-left:auto;
margin-right:auto;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clearfix {
    overflow: auto;
}

.index-title
{
    font-size: 1.3em;
    font-weight: bolder;
}

.index-subtitle
{
    font-size: 1.3em;
    padding-left: 5px;
}

.page-superuser {
    font-size: 32px;
    font-weight: bold;
    display: inline-block;
    color: #212529;
}

.page-superuser p {
    margin-bottom: 0px;
}

.page-title {
    padding-top: 20px;
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #212529;
    /*
    padding-bottom:0px;
    margin-bottom:0px;
        */
}

.page-subtitle {
    /*
    margin-top: 0px;
    padding-top: 0px;
    */
    font-size: 17px;
    color: #212529;
}

.page-detail {
    font-size: 18px;
    margin-bottom: 24px;
    margin-left: 15px;
}

section.main-content div.page-subtitle {
    margin-left: 15px;
    font-weight: bold;
}

.section-image {
    width: 30%;
}

.section-info {
    margin-left:50px;
}

.section-title {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 18px;
}

.section-category {
    font-weight: bold;
    font-size: 24px;
    margin-left: 15px;
}

.service {
    margin-left: 15px;
}

.service img
{
    padding-bottom: 10px;
}

.section-detail {
    font-size: 18px;
}

.section-detail ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}

.section-detail ul > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

.service-detail ul {
    padding-left: 15px;
}

.service-detail li
{
    padding-left: 30px;
}

.home-services-title
{
    /* padding-top: 40px; */
    font-size: 22px;
    font-weight: bold;
}

.home-services-detail {
    font-size: 16px;
}

.home-services-item-title {
    font-size: 16px;
    font-weight: bold;
}

.service-page-table {
    width: 980px;
    padding-top: 10px;
}

.navlinks {
    display:block;
    height: 20px;
    color: #b1b1b1;
}
    .navlinks a {
        font-size: 0.925em;
    }

img {
    border: none;
}

table.admin {
    width: 100%;
    border-collapse: collapse;
}

table.admin.width-auto {
    width: auto;
}

.admin.dark th {
    background-color: #E5E5E5;
}

table.admin.center th {
    text-align: center;
}

table.admin th {
    margin: 0;
    text-align: left;
    padding: 5px;
    padding-right: 15px;
    border-bottom: solid 2px #777;
    font-weight: bold;
    font-size: 16px;
}

table.admin td {
    margin: 0;
    padding: 5px;
    padding-right: 15px;
    border-top: solid 1px #777;
    font-size: 14px;
}

table.admin td.total-row {
    font-size: 16px;
}

table.admin td.total-row {
    font-weight: bold;
    border-top: thick 3px #777;
    border-bottom: double 5px #777;
}

/* this should be more specific:*/
table.admin tbody > tr:hover {
    background-color: #eee;
}

table.admin td.no-border {
    border: none;
}

table.admin th.no-border {
    border: none;
}

table td.editor-label {
    padding-right: 1em
}

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: bold;
}

fieldset {
    margin-bottom: 10px;
}

.lwp-breadcrumb {
    margin-left: 15px;
}

.lwp-breadcrumb, .lwp-breadcrumb a, .lwp-breadcrumb a:visited {
    color: #AAAAAA;
    margin-top: 5px;
    font-size: 14px;
    text-decoration: none;

}

.lwp-breadcrumb a:hover
{
    color: #AAAAAA;
    text-decoration: underline;
}

.partition-header {
    font-weight: bold;
}

.partition-c1 {
    padding-right: 20px;
}

.section-move-up {
    width: 16px;
    height: 16px;
    background: url("/Images/up.png");
    border: none;
    margin: 0;
    padding: 0;
}

.section-move-down {
    width: 16px;
    height: 16px;
    background: url("/Images/down.png");
    border: none;
    margin: 0;
    padding: 0;
}

.section-placeholder {
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.selectable {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin: 1px;
    cursor: pointer;
}

.selectableUnique {
    cursor: pointer;
}

.selected {
    border: solid 2px #6666DD;
    border-radius: 5px;
    background-color: #F5F5FF;
}

.selected:hover {
    border: solid 2px #222299;
    border-radius: 5px;
    background-color: #E0E0FF;
}

.catalog-section {
    padding:10px;
    margin-bottom:10px;
    border: solid 1px #555577;
    border-radius: 5px;
}

.catalog-toggle-section {
    display:none;
    font-family: Verdana;
    font-size: 10px;
}

.progress {
    margin-top: 5px;
}

.progress-selected {
    height: 60px;
    color: white;
    padding-left: 7px;
    padding-right: 30px;
    background-color: #9999EE;
}

.progress-not-selected {
    height: 60px;
    color: white;
    padding-left: 7px;
    padding-right: 30px;
    background-color: #222299;
}

.catalog-level-0 {
    font-weight: bold;
}

.catalog-level-1 {
    font-style: italic;
    background-color: white;
    text-decoration-color: black;
    /* text-decoration: underline; */
}

.admin .catalog-level-0 {
    font-weight: bold;
    font-style: normal;
    padding-left: 0px;
}

.admin .catalog-level-1 {
    font-weight: bold;
    font-style: normal;
    padding-left: 35px;
}

.admin .catalog-level-2 {
    font-weight: bold;
    font-style: normal;
    padding-left: 70px;
}

.td-catalog-level-0 {
    color: white;
    background-color:#686868;
}

.td-catalog-level-1 {
    color: black;
    background-color:white;
    font-weight: bold;
}

.customise-option-title {
    text-align: right;
    width: 100px;
    padding-right: 5px;
}

.listing-table table {
    border-collapse: collapse;
}

.listing-table td {
    padding: 3px;
    margin: 0;
    border-bottom: 1px solid black;
}

.listing-table .center{
    text-align: center
}

/* Audit related styles*/
.audit-documents {
    margin-left: 15px;
}

.audit-item {
    text-align: center;
}

.audit-link {
    text-decoration: none;
}

.audit-overall-container {
    display: flex;
    margin-left: auto;
}

.audit-overall {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.audit-status {
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-left: 20px;
    color: black;
}

.audit-status-text {
    text-align: left !important;
    padding-left: 15px;
    margin-left: 0px;
}

.audit-status.compliant {
    background-color: #A9D08E;
    color: white;
}

.audit-status.missing {
    background-color: #FFD966;
    color: white;
}

.audit-status.non-compliant {
    background-color: #C00000;
    color: white;
}

.audit-status.upcoming-audit {
    background-color: #305496;
    color: white;
}

.audit-entry {
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    width: 25px;
    height: 25px;
}

.audit-home {
    position: absolute;
    right: 0;
    margin-top: 0;
    margin-right: calc(2.5%);
    text-align: center;
    width: 25px;
    height: 98%;
}

.audit {
    z-index: 1;
}

.audit.compliant {
    background-color: #A9D08E;
}

.audit.missing {
    background-color: #FFD966;
}

.audit.non-compliant {
    background-color: #C00000;
}

.audit.upcoming-audit {
    background-color: #305496;
}

.audit-text {
    text-align: center;
    line-height: 25px;
    color: white;
    font-weight: bold;
}

.audit-legend {
    display: table;
    width: 40%;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    border: 1px solid black;
    margin-left: auto;
}

.audit-legend .legend-menu {
    display: flex;
}

.audit-legend .legend-menu .audit-entry {
    margin-right: 10px;
}

.audit-box {
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    color: white;
    margin: 5px auto 5px auto;
    font-weight: bold;
    min-width: 100px;
    font-size: 11px;
}

.legend-menu div div div.audit-box {
    min-width: 180px;
    font-size: 14px;
}

.rounded-rectangle {
    border-radius: 5px;
}

.relative {
    position: relative;
}

/**
    Consumables table
*/

.scroll-table-container {
    position: relative;
    width: 100%;
}

.scroll-table {
    margin-left: calc( 3 * 170px); /*elements are 170px wide, add 0.25px worth of spacing on each side*/
    overflow-x: scroll;
    overflow-y: visible;
    width: calc(100% - 450px);
}

.scroll-table-fit-on-page {
    width: calc(100% - 420px); /* 100% - margin-left; */
    margin-left: 420px;
}

.scroll-table table {
    border-collapse: collapse;
}

.scroll-table td {
    width: 30px;
    height: 50px;
    overflow: hidden;
    white-space: nowrap;
    padding: 10px;
    border-left: 5px solid lightgray;
    border-right: 5px solid lightgray;
    border-bottom: 5px solid lightgray;
}

.scroll-table .admin td {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.scroll-table table tbody tr:first-child td {
    border-top: 0;
}

.scroll-table table tr:last-child td {
    border-bottom: 0;
}

.scroll-table table tr td:first-child,
.scroll-table table tr th:first-child {
    border-left: 0;
}

.scroll-table table tr td:last-child,
.scroll-table table tr th:last-child {
    border-right: 0;
}

.scroll-table th {
    width: 30px;
    overflow: hidden;
    white-space: nowrap;
}

.consumable-heading {
    height: 20px;
}

.admin th.consumable-heading {
    height: 26px;
}

.scroll-table .fixed-column.consumable-heading {
    top: 162px; /*Vertical columns is 200px. Heading is 20. Total padding is also 20. 2px to accomodate for border spacing. 162  = 200 - 20 - 20 + 2*/
}

.scroll-table .admin .fixed-column.consumable-heading {
    top: 175px; /*Vertical columns is 200px. Heading is 20. Total padding is also 20. 2px to accomodate for border spacing. 162  = 200 - 20 - 20 + 2*/
}

.dark-consumable-heading {
    height: 20px;
    background-color: black;
    color: white;
}

.consumable-customer {
    margin-left: 15px;
}

.consumable-customer .bold-consumable-heading {
    height: 20px;
    font-weight: bold;
    text-align:left;
    padding-left:0px !important;
}

.scroll-table .fixed-column.dark-consumable-heading {
    top: 162px; /*Vertical columns is 200px. Heading is 20. Total padding is also 20. 2px to accomodate for border spacing. 162  = 200 - 20 - 20 + 2*/
}

.scroll-table .fixed-column {
    position: absolute;
    width: 150px;
    padding: 0px;
    top: auto;

}

/** Need to add a margin to the fixed positioned cells in ereryone except the first row because tables do this and we need the borders to line up properly*/
.scroll-table table tr:first-child .fixed-column:nth-child(1) {
    margin-top: 0;
}
.scroll-table table tr:first-child .fixed-column:nth-child(2) {
    margin-top: 0;
}
.scroll-table table tr:first-child .fixed-column:nth-child(3) {
    margin-top: 0;
}

.scroll-table .fixed-column:nth-child(1) {
    width: 270px;
    left: 0;
    border-left: 0;
    border-right: 0;
    font-weight: bold;
    margin-top: 3px;
}

.scroll-table .fixed-column:nth-child(2) {
    width: 130px;
    left: 290px;
    border-left: 0;
    border-right: 0;
    text-align: center;
    margin-top: 3px;
}

.scroll-table .fixed-column:nth-child(2).heading {
    width: 120px;
    margin-left: 5px;
}

.scroll-table .fixed-column:nth-child(3) {
    width: 50px;
    left: 440px;
    border-left: 0;
    border-right: 0;
    text-align: center;
    margin-top: 3px;
}

.scroll-table .admin .fixed-column:nth-child(1) {
    width: 200px;
    margin-top: 0px;
}

.scroll-table .admin .fixed-column:nth-child(2) {
    width: 150px;
    left: 200px;
    margin-top: 0px;
}

.scroll-table .admin .fixed-column:nth-child(3) {
    width: 70px;
    left: 350px;
    margin-top: 0px;
}

.scroll-table th:not(.fixed-column) {
    height: 200px;
    white-space: nowrap;
}

.scroll-table th:not(.fixed-column) .contents {
    transform: translate(20px, 56px) rotate(270deg);

    width: 100px;
    padding-top: 7px;
    padding-bottom: 45px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
}

.scroll-table th:not(.fixed-column) .contents p{
    background-color: lightgray;
    height: 30px;
    width: 200px;
    text-align: left;
    padding: 5px 7px;
    line-height: 30px;
    margin: 5px;
}

.scroll-table th:not(.fixed-column).left {
    margin-left:5px;
}

.scroll-table th:not(.fixed-column).right {
    margin-right: 5px;
}

.scroll-table .consumable-contents {
    width: 100%;
    display: flex;
    margin-left: 0px;
    text-align: center;
}

.scroll-table .admin .consumable-contents {
    height: 40px;
    width: 100px;
}

.scroll-table .admin th .contents p {
    background-color: transparent;
}

.scroll-table .consumable-entry {
    width: 50%;
    height: 20px;
    margin-bottom: 10px;
}

.scroll-table .consumable-entry.left {
    margin-right: 2px;
    margin-left: -2px;
}

.scroll-table .consumable-entry.right {
    margin-left: 2px;
    margin-right: -2px;
}

.consumable-pdf {
    height: 20px;
}

/** Consumables - Customer */

.consumable-customer table {
    border-collapse: collapse;
    width: 100%;
}

.consumable-customer th {
    padding: 10px;
    font-weight:normal;
}

.consumable-customer th:not(:first-child) {
    text-align: center;
}

.consumable-customer td {
    height: 40px;
    border-top: 1px solid black;
}

.consumable-customer td:first-child {
    font-weight: bold;
}

.consumable-customer td:not(:first-child) {
    text-align: center;
}

.consumable-contents .consumable-entry {

}

.consumable-customer .consumable-pdf {
    height: 20px;
}

.ff-status-img {
    text-align: center;
    width: 25px;
}

.ff-status-icon {
    width: 20px;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
}


.table-freeform th {
    text-transform: uppercase;
    padding-right: 20px;
}

.table-freeform td {
    padding-right: 20px;
}


.freeform-error {
    width: auto;
    /* background-color: #FFAAAA; */
}

.factsheet-table th {
    border-right: white 4px solid;
}

.audit-table .audit-description {
    text-align: left !important;
}

.th-left {
    text-align: left !important;
}

.th-center {
    text-align: center !important;
}

/**/
/* Flash message styles */
/**/

.flash-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.flash-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.flash-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.flash-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.flash {
    padding: 0.5rem 1rem;
    margin: 1rem auto;
    border: 1px solid transparent;
    border-radius: .25rem;

    position: -webkit-sticky;
    position: sticky;
    top: 1rem;
    z-index: 99;
}

.flash-close {
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.flash-close:hover {
    opacity: 1;
}

button.flash-close {
    cursor: pointer;
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: .70rem 1.25rem;
    color: inherit;
}


/**/
/* Adding Layers to AR Coating stacks */
/**/

tr.layer-action-bar > td {
    padding: 0;
}

tr.layer-action-bar > td > span {
    display: block;
    background-color: #f2f2f2;
    margin-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    cursor: pointer;
    font-size: 0.75em;
    font-weight: bold;
    color: grey;
    text-shadow: 0 1px 0 lightgrey;
    opacity: 0.5;
}

tr.layer-action-bar > td > span:hover {
    opacity: 1;
}

/**/
/* Thickness and max adjustment input box sizing for AR Coating Stacks */
/**/

tr > td > .maxThicknessCorrectionPercentage {
    width: 3em;
}

tr > td > .thickness {
    width: 5em;
}

tr > td > .maxThicknessCorrectionEpilogue {
    display: inline
}

/**/
/* Adds a pulsing effect to an element */
/* This can be used to alert the user to a change in the UI */
/* Eg. if a UI element is added, updated, or moved */
/**/

.pulsate {
    animation: pulsate 0.5s ease-out;
    animation-iteration-count: 1;
}

@keyframes pulsate {
    0% { opacity: 0; }
    33% { opacity: 1; }
    66% { opacity: 0; }
    100% { opacity: 1; }
}

/**/
/* Styles a bunch of links in a div */
/* Adds a | between the links and some padding */
/**/
.nav {
    margin-left: 10px;
    font-size: 16px;
}

.actions ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.actions li {
    display: inline-block;
}


.actions li + li:before {
    padding: 0 8px;
    content: "|";
    display: inline-block;
}

.action-buttons li + li {
    margin-left: 1rem;
}

.action-buttons li + li:before {
    content: none;
}

/**/
/* Relative sizing */
/**/
.rem-3 {
    width: 3rem;
}

.rem-4 {
    width: 4rem;
}

/**/
/* Undoes the reboot by bootstrap on dd elements*/
/**/

.table dl {
    margin: 0;
}

.table dd {
    margin-bottom: 0;
}
#wrapper-selector {
    left: 0;
    right: 0;
    padding-bottom: 20px;
    margin: 0 auto;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.wrapper-selector-dot {
    width: 20px;
    display:inline-block;
}

.page-main-img-area {
    height: 448px; /* home page image height */
    position: relative;
    /* home page image height */
}

img.page-main-img {
    position: absolute;
    margin: auto;
    width: 1900px;
    height: 448px; /* home page image height */
    left: 0;
    right: 0;
}

.banner-image-and-text-container {
    min-height: 66px;
}

.image-overlay-text {
    min-height: 66px;
    position: absolute;
    bottom: 0px;
    left: 15px;
    display: inline;
    z-index: 2;
    font-weight: bold;
}

.image-overlay-text p {
    padding: 15px;
    margin: 0px;
    font-size: 24px;
    background-color: white;
}

.section-image-overlay-new {
    position: absolute;
    top: 0px;
    right: 5px;
    display: inline;
    font-weight: bold;
    font-size: 16px;
}

    .section-image-overlay-new p {
        margin: 0px 15px 0px 0px;
        font-size: 24px;
        color: red;
    }

.footer-right {
    float: right;
}

.footer-right span {
    padding-left: 2em;
}

.scrollable table tbody tr td img {
    width: 250px;
    height: 150px;
}

.scrollable {
    margin-left: 30px;
    margin-right: 30px;
}

.img-center {
    display: block;
    margin: auto;
}

.m-15 {
    margin-left: 15px;
    margin-right: 15px;
}

.width-auto {
    width: auto;
}

.width-100 {
    width:100%;
}

.width-80 {
    width: 80%;
}

.width-75 {
    width: 75%;
}

.width-67 {
    width: 67%;
}

.width-60 {
    width: 60%;
}

.width-40 {
    width: 40%
}

.width-33 {
    width:33%;
}

.width-25 {
    width: 25%;
}

.width-20 {
    width: 20%;
}

.width-10 {
    width: 10%;
}

.bg-white {
    background-color: white;
}

.sticky {
    top: 0px;
    position: sticky;
}

#topnav container {
    width: 30% !important;
}

.left-50 {
    margin-left: 50%;
}

.flex {
    display: flex;
}

.home-carousel-image {
    width: 80%;
    height: 175px;
}

.home-carousel-title {
    font-size: 1.4em;
    text-align:left;
    padding-bottom:20px;
}

table.labprocess {
    width: 100%;
    border-collapse: collapse;
}

    table.labprocess.center th {
        text-align: center;
    }

    table.labprocess th {
        margin: 0;
        text-align: left;
        padding: 5px;
        padding-right: 15px;
        border-bottom: solid 2px #777;
    }

    table.labprocess td {
        margin: 0;
        padding: 5px;
        padding-right: 15px;
        border-top: solid 1px #777;
    }

/* this should be more specific:*/
    table.labprocess tbody > tr:hover {
        background-color: #eee;
    }

table.admin th:nth-child(1) {
    font-weight: bold !important;
}

table.admin td:nth-child(1) {
    font-weight: bold !important;
    text-align:left !important;
}

.table-freeform th:nth-child(2) {
    font-weight: bold !important;
}

.table-freeform td:nth-child(2) {
    font-weight: bold !important;
}


.center-page-width {
    width: 980px;
}

.container.center-page-width {
    width: 980px;
}

.full-page-width {
    position: absolute;
    width: 1900px;
    left: 0px;
    right: 0px;
    margin: auto;
    padding-left: 0px;
    padding-right: 0px;
}

div.full-page-width.audit-status {
    padding-top:0px;
    padding-bottom:0px;
}

div.full-page-width.audit-status h3{
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top:0px;
    margin-bottom:0px;
    text-align:center;
}

.btn.btn-header {
    background-color: buttonface;
    color: #000;
}

.btn.btn-header:hover {
    background-color: #141e8d;
    color: #FFF;
}

.btn.btn-zeiss {
    background-color: buttonface;
    color: #000;
}

.btn.btn-zeiss:hover {
    background-color: #141e8d;
    color: #FFF;
}

.btn.btn-zeiss.selected {
    background-color: #141e8d;
    color: #FFF;
}

a.catalog-button-black span {
    color: white;
    background-color: #646464;
}

.audit-banner{
    z-index: -1;
    width: 100% !important;
}

.audit-banner .section-title {
    margin-top: 10px;
    margin-bottom: 10px;
}

.audit-section-title {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 18px;
}

.audit-section-detail {
    font-size: 11px;
}

.audit-section-detail table tr td a div.audit-box {
    margin:3px;
    border-radius:5px;
}



.col-3.audit-section-item {
    padding-left: 0px;
    padding-right: 30px;
}

.audit-dropdown-btn {
    background-color: transparent;
    color: #6AB0E2;
    padding: 10px;
    font-size: 11px;
    border: none;
    cursor: pointer;
}

    .audit-dropdown-btn:hover, .audit-dropdown-btn:focus {
        background-color: transparent;
    }

.extra-audit-dropdown {
    position: relative;
    display: inline-block;
}

.extra-audit-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.show {
    display: block;
}

.right{
    float:right;
}

.audit-upcoming {
    width: 100%;
    border: 5px solid blue;
    overflow: hidden;
    display: flex;
    margin-bottom: 20px;
}

.audit-upcoming-left {
    padding-left: 10px;
    width: 50%;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.audit-upcoming-right {
    width: 50%;
    float: right;
    text-align: right;
    padding-right: 10px;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.audit-table-row {
    height:250px;
}

.audit-table-download {
    width:100%;

}

.audit-table-download th {
    text-align:left;
}

.audit-document h3 {
    font-size:18px;
}

.service-item-title {
    font-weight: bold;
}

.service-item-subtitle {
    padding-bottom: 40px;
}

div.col-4.service-item {
    width: 400px;
}

.grey_background {
    background-color: #f2f2f2;
}

.text-small {
    font-size: 10px;
}

.banner-container {
    display: table;
}

.banner-img {
    width: 100%;
    height:100%;
}

.banner-center {
    width: 980px !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.banner-background {
    background-image: url('/Images/banner/background-banner.jpg');
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: auto;
    background-color: black;
}

.banner-background-left {
    display: table-cell;
    background-image: url('/Images/Banner/leftsideforeground.png');
    background-size: cover;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
}

.banner-background-right {
    display: table-cell;
    background-image: url('/Images/Banner/rightsideforeground.png');
    background-size: cover;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    max-height: 100vmin;
}

.banner-foreground {
    background-image: url('/Images/Banner/effects.png');
    position: absolute;
    top: 0px;
    left: 15px;
    right: 0px;
    z-index: 1;
    margin: 0px;
    display: inline;
    height: 100%;
    width: 100%;
    overflow:hidden;
}

@media (max-width: 1000px) {
    .banner-background-left {
        display: none;
    }

    .banner-background-right {
        display: none;
    }

}

    .banner-small-background {
        background-image: url('/Images/Banner/top_layer4.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .banner-small-background img {
        width: 900px;
        margin-left: 40px;
        margin-right: 40px;
    }

    .link-section-background {
        background-color: #6AB0E2;
        background-size: cover;
    }

    .image-overlay-text-no-background {
        background-color: transparent;
        color: white;
        position: absolute;
        top: 10px;
        left: 30px;
    }

    .home-services-overlay-title {
        font-size: 3em;
        font-weight: bold;
    }

    .home-services-overlay-subtitle {
        font-size: 2.3em;
        padding-bottom: 20px;
    }

    .home-services-overlay-button.btn {
        font-size: 2em;
        color: white;
        background: #6ab0e2;
    }

    .hidden {
        display: none;
    }

.login-solution-title {
    font-weight: bold;
    font-size: 20px;
    color: #212529;
}

.login-solution-detail {
    font-size: 16px;
    color: #212529;
}

/* This fixes a problem with bootstrap file inputs where the file name is longer than the input and flows onto a new line */
label.custom-file-label {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.code-block {
    background-color: #F6F6F6; /* A ZEISS primary colour */
    tab-size: 4;
}

.cursor-pointer {
    cursor: pointer;
}

/* ensure that an element has a 1-to-1 aspect ratio, i.e. it remains square */
.aspect-1-to-1-container {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 100% = 1:1 aspect ratio. Can be adjusted */
}
.aspect-1-to-1-container > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* used in Views\Shared\VueComponents\ArTuner\brute-force-plot-form.cshtml */
.brute-force-plot-form .form-group .heatmap-range-grid {
    display: grid;
    margin-left: -5px;
    margin-right: -5px;
    grid-auto-columns: 1fr;
}
.brute-force-plot-form .form-group .heatmap-range-grid > div {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
}
.brute-force-plot-form .form-group .heatmap-range-grid .head {
    margin-top: 1em;
    height: 0.7em; /* height set manually to accomodate the hack below */
}
.brute-force-plot-form .form-group .heatmap-range-grid .head > div {
    /* This is a hack to make a cell that spans all rows, as you can't yet do that when using an implicit grid */
    position: absolute;
    margin-top: -1em;
}
.brute-force-plot-form .form-group .heatmap-range-grid .resolution-head {
    margin-top: 0.4em;
    grid-row-start: 1;
    grid-row-end: 2;
    height: 0.7em;
}
.brute-force-plot-form .form-group .heatmap-range-grid .resolution {
    grid-row-start: 2;
    grid-row-end: 3;
}
.brute-force-plot-form .form-group .heatmap-range-grid .lower-bound-head {
    grid-row-start: 3;
    grid-row-end: 4;
}
.brute-force-plot-form .form-group .heatmap-range-grid .lower-bound {
    grid-row-start: 4;
    grid-row-end: 5;
}
.brute-force-plot-form .form-group .heatmap-range-grid .upper-bound-head {
    grid-row-start: 5;
    grid-row-end: 6;
}
.brute-force-plot-form .form-group .heatmap-range-grid .upper-bound {
    grid-row-start: 6;
    grid-row-end: 7;
}

/* used in Views\Shared\VueComponents\MultiDimensionalPlot\data-slice-slider.cshtml */
.data-slice-slider {
    position: relative;
    margin-bottom: 3em;
}
.data-slice-slider .vue-slider-marks {
    visibility: hidden;
}
.data-slice-slider .vue-slider-dot {
    cursor: pointer;
}

/* used in Views\Shared\VueComponents\MultiDimensionalPlot\multi-dimensional-plot.cshtml*/
.multi-dimensional-plot {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "left right";
}
.multi-dimensional-plot .vue-slider-dot {
    cursor: pointer;
}
.multi-dimensional-plot .dim-sliders-table {
    display: grid;
    grid-template-columns: [header-start] fit-content(60%) [header-end slider-start] 1fr [slider-end];
    grid-auto-rows: max-content;
}
.multi-dimensional-plot .dim-sliders-table .row {
    /* flatten inner elements into outer outer div to allow them to work in the grid, while still being able to apply hover effects to each row */
    /* based on: https://newdevzone.com/posts/css-grid-how-to-select-row-to-add-hover-effect */
    /* archive: https://web.archive.org/web/20220815012016/https://newdevzone.com/posts/css-grid-how-to-select-row-to-add-hover-effect */
    display: contents;
}
.multi-dimensional-plot .dim-sliders-table .row:hover > div {
    /* replicate bootstrap table-hover formatting (no css variables are available for this) */
    color: #212529;
    background-color: rgba(0,0,0,.075);
}
.multi-dimensional-plot .dim-sliders-table .axis-slider-header {
    grid-column: header-start / header-end;
    font-weight: bold;
}
.multi-dimensional-plot .dim-sliders-table .row .axis-slider {
    grid-column: slider-start / slider-end;
}
.multi-dimensional-plot .dim-sliders-table .row > div {
    padding: 0.75rem;
}
.multi-dimensional-plot .extra-dim-slider {
    margin-bottom: 3em;
}
.multi-dimensional-plot .grid-left {
    grid-area: left;
}
.multi-dimensional-plot .grid-right {
    grid-area: right;
    width: 400px;
}
.multi-dimensional-plot .axes-order-table-container {
    padding: 0 0.5rem 1rem 0.5rem;
}
.multi-dimensional-plot .axes-order-table {
    margin: 0;
}
.multi-dimensional-plot .axes-order-table th {
    width: 25%;
    text-align: center;
    padding: 0.75rem;
    border-top: none;
}
.multi-dimensional-plot .axes-order-table .draggable-axes-container {
    padding: 0;
}
.multi-dimensional-plot .axes-order-table .draggable-axis {
    display: inline-block;
    overflow: hidden;
    padding: 0;
    float: left;
}
.multi-dimensional-plot .axes-order-table .draggable-axis .card {
    margin: 10%;
}
.multi-dimensional-plot .axes-order-table .draggable-axis .card-body {
    padding: 10%;
}
.multi-dimensional-plot .plot-notes {
    padding: 0 0.5rem 1rem 0.5rem;
}

/* used in Views\Shared\VueComponents\MultiDimensionalPlot\colour-adjuster.cshtml*/
.heatmap-colour-adjuster {
    display: grid;
    grid-template-columns: [left-start] 1fr [left-end right-start] 1fr [right-end];
    column-gap: 16px; /* prevent sliders from overlapping */
}
.heatmap-colour-adjuster .left {
    grid-column: left-start / left-end;
}
.heatmap-colour-adjuster .right {
    grid-column: right-start / right-end;
}
.heatmap-colour-adjuster .full-width {
    grid-column: left-start / right-end;
}

/* This is used by Vue.js to hide templates until they can be mounted */
[v-cloak] {
    display: none;
}

/**********************************************************************************
 * Styles for enabling Bootstrap's `input-group-sm` class for `custom-file` class
 **********************************************************************************/

.input-group-sm > .custom-file {
    height: initial;
}

.input-group-sm > .custom-file > .form-control {
    padding: 0;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm > .custom-file > .custom-file-label {
    display: initial;
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    line-height: 1.5;
    height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm > .custom-file > .custom-file-label::after {
    padding: 0.25rem 0.5rem;
}

/**************************************************************************
 * Styles for enabling Bootstrap's `input-group-sm` class for input groups
 **************************************************************************/

.input-group-sm > .input-group-text:not(:first-child):not(:last-child) {
    padding: 0.25rem 0.5rem;
    margin: 0 -1px;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: 0;
}

/********************************
 * Small dropdown lists
 ********************************/

.dropdown-menu.dropdown-menu-small {
    font-size: 0.85rem;
    padding: 0;
}
.dropdown-menu.dropdown-menu-small .dropdown-item {
    padding: 0.25rem 1rem;
}

/********************************
 * Utility styles
 ********************************/

.width-sm {
    width: 3.2rem !important;
}

.width-5 {
    width: 5rem !important;
}

.width-6 {
    width: 6rem !important;
}

.hide-if-empty:empty {
    display: none;
}

.subtle-abbr[title], .subtle-abbr[data-original-title] {
    cursor: help;
    text-decoration: none;
}

.pre-wrap {
    white-space: pre-wrap;
}

.shrink-table-column {
    width: 1px;
    white-space: nowrap;
}

.table-grouped-hover tbody:hover {
    color: #212529;
    background-color: rgba(0,0,0,.075);
}

.stacked-table-cell { /* stack two small values one atop the other inside a table cell */
    cursor: help;
    display: flex;
    flex-direction: column;
    line-height: 90%;
    margin-top: -1em; /* arbitrary. just needs to be big enough */
    margin-bottom: -1em;
}
.stacked-table-cell > div {
    font-size: 0.8em;
}

.artuner-playground-layout {
    width: 97% !important;
    margin-left: 1%;
    margin-right: 1%;
}

.dropdown:hover > .dropdown-menu {
    display: block !important;
}
.dropdown:not(:hover) > .dropdown-menu {
    /* Without this, clicking will make it sticky */
    /* Note: We could also fix this with pointer-events: none, but in some cases we want to make use of click events */
    display: none !important;
}

.ARStackLayerEditor table th {
    vertical-align: middle !important;
    padding: 0.25rem !important;
}

.ARStackLayerEditor table td {
    vertical-align: middle !important;
}

header.container {
    padding: 0 12px;
}

.fixed-width-980 {
    width: 980px !important;
}

.multipart-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.multipart-header-start {
    justify-content: start;
}
.multipart-header-space-between {
    justify-content: space-between;
}

.overflow-visible { /* missing from Bootstrap 4 */
    overflow: visible !important;
}

/* Fix glitchy hover behaviour in bootstrap dropdown menus */
.dropdown-menu {
    margin: 0 !important;
}

body
{

}

#topnav div, .header div
{

}

#topnav img
{
    vertical-align: middle;
}

.navlinks a
{
    color: #b1b1b1;
}

.navlinks a:hover
{
    color: black;
}

div.navlinks {
    margin-bottom: 5px;
}

#frm-search
{
    border: none;
    display:inline;
    padding: 0;
    margin: 0;
}

.submitarrow {
    padding: 0px;
    background: none;
    border: none;
    font-weight: bold;
    vertical-align: middle;
}

.submitarrow img {
    padding: 0px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.whiteonbluebutton {
    padding: 0px;
    background: #6AB0E2;
    border: none;
    font-weight: bold;
    vertical-align: middle;
    width:100%;
}



/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
    font-family: "ZEISS Frutiger Next","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

textarea.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}