﻿@charset "UTF-8";

/*Region Colors*/
    /*see https://brand.zeiss.com/cmsPublic/brandportal/de/basic-design-elements/colors.html */

* {
    /*ZEISS Brand*/
    --color-black: rgb(0, 0, 0);
    --color-white: rgb(255, 255, 255);
    --color-gray-0: rgb(051, 051, 051);
    --color-gray-1: rgb(077, 077, 077);
    --color-gray-2: rgb(102, 102, 102);
    --color-gray-3: rgb(127, 127, 127);
    --color-gray-4: rgb(155, 155, 155);
    --color-gray-5: rgb(188, 188, 188);
    --color-gray-6: rgb(223, 223, 223);
    --color-gray-7: rgb(246, 246, 246);
    --color-arctic: rgb(198, 218, 242);
    --color-steel: rgb(141, 170, 200);
    --color-sky-blue: rgb(106, 176, 226);
    --color-azur: rgb(005, 094, 210);
    --color-saphire: rgb(076, 107, 177);
    --color-aqua: rgb(036, 074, 134);
    --color-light-blue: rgb(242, 245, 248);
    --color-purple-red: rgb(167, 2, 64);
    /*zui custom colors*/
    --zui-color-gs-120: rgb(7, 9, 13);
    --zui-color-gs-115: rgb(22, 29, 34);
    --zui-color-gs-110: rgb(26, 35, 41);
    --zui-color-gs-105: rgb(38, 46, 54);
    --zui-color-gs-100: rgb(53, 61, 69);
    --zui-color-gs-95: rgb(64, 73, 82);
    --zui-color-gs-90: rgb(85, 94, 107);
    --zui-color-gs-85: rgb(98, 108, 122);
    --zui-color-gs-80: rgb(130, 141, 158);
    --zui-color-gs-70: rgb(165, 177, 194);
    --zui-color-gs-60: rgb(193, 203, 217);
    --zui-color-gs-50: rgb(209, 217, 229);
    --zui-color-gs-40: rgb(221, 227, 237);
    --zui-color-gs-35: rgb(228, 235, 242);
    --zui-color-gs-30: rgb(237, 242, 247);
    --zui-color-gs-20: rgb(245, 247, 250);
    --zui-color-gs-10: rgb(255, 255, 255);
    --zui-color-pb-120: rgb(0, 41, 175);
    --zui-color-pb-110: rgb(0, 62, 205);
    --zui-color-pb-100: rgb(0, 80, 242);
    --zui-color-pb-90: rgb(46, 122, 245);
    --zui-color-pb-80: rgb(92, 157, 255);
    --zui-color-pb-70: rgb(133, 182, 255);
    --zui-color-pb-60: rgb(166, 201, 255);
    --zui-color-sc-r-110: rgb(224, 71, 71);
    --zui-color-sc-r-100: rgb(237, 83, 83);
    --zui-color-sc-r-90: rgb(252, 96, 96);
    --zui-color-sc-p-110: rgb(235, 67, 173);
    --zui-color-sc-p-100: rgb(242, 81, 183);
    --zui-color-sc-p-90: rgb(255, 104, 199);
    --zui-color-sc-b-110: rgb(0, 152, 230);
    --zui-color-sc-b-100: rgb(0, 166, 251);
    --zui-color-sc-b-90: rgb(49, 185, 255);
    --zui-color-sc-g-110: rgb(41, 193, 146);
    --zui-color-sc-g-100: rgb(58, 210, 163);
    --zui-color-sc-g-90: rgb(78, 233, 185);
    --zui-color-sc-y-110: rgb(239, 185, 43);
    --zui-color-sc-y-100: rgb(253, 202, 64);
    --zui-color-sc-y-90: rgb(255, 213, 98);
    --zui-color-sc-o-110: rgb(233, 120, 71);
    --zui-color-sc-o-100: rgb(239, 131, 84);
    --zui-color-sc-o-90: rgb(247, 137, 90);
    --zui-color-ac-pu-110: rgb(194, 45, 247);
    --zui-color-ac-pu-100: rgb(202, 65, 252);
    --zui-color-ac-pu-90: rgb(209, 100, 248);
    --zui-color-ac-v-110: rgb(107, 75, 235);
    --zui-color-ac-v-100: rgb(119, 86, 251);
    --zui-color-ac-v-90: rgb(133, 102, 255);
    --zui-color-ac-tu-110: rgb(58, 199, 206);
    --zui-color-ac-tu-100: rgb(69, 215, 222);
    --zui-color-ac-tu-90: rgb(88, 222, 228);
    --zui-color-ac-db-110: rgb(115, 143, 186);
    --zui-color-ac-db-100: rgb(133, 161, 204);
    --zui-color-ac-db-90: rgb(154, 179, 219);
    --zui-color-ac-cg-110: rgb(48, 187, 76);
    --zui-color-ac-cg-100: rgb(56, 205, 86);
    --zui-color-ac-cg-90: rgb(72, 217, 101);
    --zui-color-ac-l-110: rgb(158, 217, 41);
    --zui-color-ac-l-100: rgb(168, 228, 49);
    --zui-color-ac-l-90: rgb(180, 242, 59);
    --zui-color-ac-br-110: rgb(162, 123, 84);
    --zui-color-ac-br-100: rgb(183, 141, 101);
    --zui-color-ac-br-90: rgb(195, 156, 119);
    /*custom colors*/
    --color-zmc-gray-0: rgb(62, 62, 62);
    --color-interaction-active: rgb(0, 82, 170);
    --color-border: rgb(239, 239, 239);
    --color-toprow-inbox: rgb(75, 78, 82);
    --color-toprow-user: rgb(248, 248, 248);
    --color-dropdown-menu-item: rgb(114, 114, 114);
    --color-backdrop: rgba(64, 64, 64, 0.3);
    --color-version: rgb(154, 155, 156);
    --color-copyright: rgb(116, 118, 120);
    --color-button-outline: rgb(0, 139, 208);
    --zmc-body-font-size: 1em;
    --zmc-body-font-weight: 400;
    --zmc-body-line-height: 1.5;
    --zmc-icon-font-size: 0.8em;
    --zmc-top-menu-text-size: 0.875em;
    --zmc-topbar-line-height: 1rem;
    --zmc-navitem-font-size: 0.9em;
    --zmc-topbar-height: 3rem;
    --zmc-border-b-100: rgb(0, 166, 251);
    --zmc-border-g-5: rgb(188, 188, 188);
    --zmc-background-b-100: rgb(0, 166, 251);
    --zmc-background-b-200: rgb(0, 139, 208);
    --zmc-color-icon-brand: #0078d4;
    --zmc-color-icon-brand-hover: #025fa6;
    --zmc-color-highlight-serialnumber: rgba(0, 120, 212, 0.8);
    --zmc-color-grid-background-hover: rgba(0,0,0,.02);
    --zmc-myaccount-icon-color: #3c3c3c;
    --zmc-color-nav-item-default: rgba(0, 0,0, 0.8);
    --zmc-color-nav-item-secondary-border-bottom: rgba(0,120,212,1);
    --zmc-color-nav-link-active: #0071c1;
    --zmc-color-nav-link-border-bottom: #dee2e6;
    --zmc-color-button-foreground: #323130;
    --zmc-color-button-background-hover: #f3f2f1;
    --zmc-color-button-icon: rgba(0, 0, 0, .9);
    --zmc-color-button-text-primary: #0071c1;
    --zmc-padding-side-14: 14%;
    --zmc-card-button-bgcolor-primary: #0078d4;
    --zmc-card-button-bgcolor-primary-hover: #005a9e;
    --color-sky-mist: rgb(230, 242, 251);
    --color-ocean-breeze: rgb(204, 228, 246);
    --color-lime-zest: rgb(217, 233, 6);
    --color-azure-wave: rgb(0, 120, 212);
    --color-forest-green: rgb(0, 128, 0);
    --color-crimson-flame: rgb(255, 0, 0);
    --color-sunset-orange: rgb(255, 140, 0);
    --color-slate-gray: rgb(140, 140, 140);
    --color-blush-pink: rgb(242, 206, 206);
    /*
        #region New defined colors
    */
    --zmcw-border-input: rgb(206, 212, 218);
    --zmcw-border-input-focus: rgb(134, 183, 254);
    --zmcw-border-input-active: rgb(134, 183, 254);
    --zmcw-border-input-icon: rgb(139, 139, 139);
    --zmcw-list-item-hovered: rgb(233, 236, 239);
}
 
    /*#region shared*/
    * {
    box-sizing: border-box;
}

html, body {
    font-family: 'ZEISSFrutigerNextW1G-Reg', arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    margin: 0;
}

[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

.table-navigation {
    margin: 5px 0 0 0;
}

.panel-default {
    background-color: transparent;
    margin: 0px 0px 60px 0px;
}

.panel-default {
    background-color: transparent;
    margin: 0px 0px 20px 0px;
}

.padding-1 {
    padding: 1rem;
}

.changelog {
    margin: 2rem 2rem 0 2rem
}

.bg-info {
    background-color: var(--zmc-color-highlight-serialnumber) !important;
    text-align: center;
    margin: auto 0.35em;
    font-family: 'ZEISSFrutigerNextW1G-Reg', arial, sans-serif;
    font-weight: normal;
    font-style: normal;
}

.badge-border-info {
    font-family: 'ZEISSFrutigerNextW1G-Reg', arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    background-color: transparent !important;
    color: black !important;
    border: 1px solid var(--zmc-color-highlight-serialnumber) !important;
    border-radius: 10px !important;
    text-align: center;
    margin: auto 0.35em;
}

.bg-warning {
    background-color: darkorange !important;
    text-align: center;
    margin: auto 0.35em;
    font-family: 'ZEISSFrutigerNextW1G-Reg', arial, sans-serif;
    font-weight: normal;
    font-style: normal;
}

.badge-border-warning {
    font-family: 'ZEISSFrutigerNextW1G-Reg', arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    background-color: transparent !important;
    color: black !important;
    border: 1px solid darkorange !important;
    border-radius: 10px !important;
    text-align: center;
    margin: auto 0.35em;
}

.sub-siteid-items {
    margin-top: 0.2rem;
    font-size: 1rem;
    background-color: transparent;
    color: var(--zmc-color-nav-link-active);
}

.machine-information-item {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    margin-top: 0.2rem;
    font-size: 1rem;
    background-color: transparent;
}

.serial-number-item {
    color: var(--zmc-color-nav-link-active);
    padding-right: 4px;
}

    .serial-number-item:hover {
        text-decoration: underline
    }

.serial-number-separator {
    margin-top: 0.2rem;
    font-size: 1rem;
    background-color: transparent;
    color: var(--zmc-color-nav-link-active);
}

.duplicate-hint {
    margin-top: 0.5rem;
    background-color: darkorange;
    border: 1px solid darkorange;
    width: 250px;
    text-align: center;
    opacity: .9;
}

strong, th {
    font-family: 'ZEISSFrutigerNextW1G-Bold', arial, sans-serif;
    font-weight: normal;
    font-style: normal;
}

.bi-check-circle {
    color: var(--zmc-color-button-icon);
}

.bi-dash-circle {
    color: var(--color-purple-red);
}

.table-content-center {
    text-align: center;
}

.text-align-end {
    text-align: end;
}

.m-auto {
    margin: auto;
}

.d-flex {
    display: flex;
}

.border-0 {
    border: none;
}

.bg-gray-02 {
    background-color: rgba(0,0,0,0.02);
}

.icon-center {
    display: flex;
    margin: auto;
    width: 225px;
    height: 225px;
}

    .icon-center .responsive {
        width: 100%;
        height: 100%;
    }

.tabs-anchor {
    color: var(--zui-color-sc-b-110);
    white-space: normal;
    letter-spacing: .02857em;
    opacity: .8;
}

    .tabs-anchor:hover {
        color: var(--zui-color-sc-b-110);
        opacity: 1;
    }

.input-text,
.select-text {
    box-shadow: none;
    border-radius: 0;
    border: 1px solid var(--color-border);
}

    .input-text:not([readonly]):hover,
    .select-text:not([readonly]):hover {
        border: 1px solid rgba(0,0,0,.2);
    }

    .input-text:disabled:hover,
    .select-text:disabled:hover {
        border: 1px solid var(--color-border);
    }

    .input-text:focus,
    .select-text:focus {
        box-shadow: none;
        border: 1px solid var(--color-border);
    }

    .input-text:not([readonly]):focus,
    .select-text:not([readonly]):focus {
        /*border-left: 3px solid var(--zui-color-sc-b-100);*/
    }

.default-image {
    display: block;
    width: 10rem;
    height: 8rem;
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.default-image-show {
    transition-delay: 1s;
    display: block;
    width: 38rem;
    height: auto;
    border: 1px solid var(--color-border);
}

.upload-image {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    border: 1px solid var(--color-border);
    margin: 0.5rem 0;
}

.upload-image-disabled {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    margin: 0.5rem 0;
    background-color: rgba(0, 0, 0, 0.06);
    border-color: rgba(118, 118, 118, 0.3);
    pointer-events: none;
    cursor: not-allowed;
}

.upload-image .label {
    width: auto;
    display: flex;
    margin: 0.5em;
    cursor: pointer;
    height: auto;
}

.upload-img-notification {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

    .upload-img-notification .warning {
        display: flex;
        margin: auto auto 0 0;
    }

.upload-file {
    width: 100%;
    border: 2px dashed var(--zui-color-gs-50);
    border-radius: 0px;
    padding: 0;
}

.upload-file-disabled {
    width: 100%;
    border: 2px dashed var(--zui-color-gs-50);
    border-radius: 0px;
    padding: 0;
    pointer-events: none;
    opacity: .4;
}

    .upload-file .label,
    .upload-file-disabled .label {
        width: auto;
        min-height: 4rem;
        display: flex;
        margin: 0.5em;
        transition: border 300ms ease;
        cursor: pointer;
    }

    .upload-file .label-small,
    .upload-file-disabled .label-small {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0.5em;
        transition: border 300ms ease;
        cursor: pointer;
    }

    .upload-file .img-information,
    .upload-file-disabled .img-information {
        padding: 0;
    }


    .upload-file .title,
    .upload-file-disabled .title {
        transition: 200ms color;
        font-size: large;
        margin: auto;
        display: inline-block;
        width: 100%;
    }

.upload-file:hover {
    border: 2px solid var(--zui-color-gs-50);
}

.upload-file .card,
.upload-file-disabled .card {
    border: 0px;
}

.upload-file .image-container,
.upload-file-disabled .image-container {
    display: flex;
    flex-direction: row;
}

    .upload-file .image-container .remove-file,
    .upload-file-disabled .image-container .remove-file {
        margin: auto 0.5em;
    }

    .upload-file .image-container .metadata,
    .upload-file-disabled .image-container .metadata {
        margin-top: 0.5em;
    }

.upload-file .upload-img-notification,
.upload-file-disabled .upload-img-notification {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

    .upload-file .upload-img-notification .notification,
    .upload-file-disabled .upload-img-notification .notification {
        margin: auto 0;
        width: auto;
        display: flex;
    }

    .upload-file .upload-img-notification .warning,
    .upload-file-disabled .upload-img-notification .warning {
        display: flex;
        margin: auto auto 0 0;
    }

.upload-file-input-margin {
    margin-top: 5px
}

.upload-file .remove-file,
.upload-file-disabled .remove-file {
    margin: auto 1rem;
}

.inputfile {
    border: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    height: 100%;
}

.input-file-attachment {
    color: black;
    margin-left: 0.5rem;
}

.input-file-attachment-warning {
    color: darkorange;
    margin-left: 0.5rem;
}

.borderless {
    border: none;
}

.container-border-secondary {
    border-radius: 0;
    border: 1px solid var(--color-border);
}

.border-bottom-secondary {
    border: none;
    border-bottom: 1px solid var(--color-border);
}

.height-4em {
    max-height: 4em;
}

.border-Left-primary-2px {
    border: none;
    border-radius: 0;
    border-left: 2px solid var(--zmc-color-button-icon);
}

.border-Left-secondary-2px {
    border: none;
    border-radius: 0;
    border-left: 2px solid var(--color-border);
}

.opacity-6 {
    opacity: .6;
}

.container-border-secondary {
    border-radius: 0;
    border: 1px solid var(--color-border);
}

.border-bottom-secondary {
    border: none;
    border-bottom: 1px solid var(--color-border);
}

.height-4em {
    max-height: 4em;
}

.height-6em {
    max-height: 6em;
}

.height-8n5em {
    max-height: 8.5em;
}

.border-Left-primary-2px {
    border: none;
    border-radius: 0;
    border-left: 2px solid var(--zmc-color-button-icon);
}

.border-Left-secondary-2px {
    border: none;
    border-radius: 0;
    border-left: 2px solid var(--color-border);
}

.opacity-6 {
    opacity: .6;
}

.container-border-secondary {
    border-radius: 0;
    border: 1px solid var(--color-border);
}

.border-bottom-secondary {
    border: none;
    border-bottom: 1px solid var(--color-border);
}

.height-4em {
    max-height: 4em;
}

.height-6em {
    max-height: 6em;
}

.height-8n5em {
    max-height: 8.5em;
}

.border-Left-primary-2px {
    border: none;
    border-radius: 0;
    border-left: 2px solid var(--zmc-color-button-icon);
}

.border-Left-secondary-2px {
    border: none;
    border-radius: 0;
    border-left: 2px solid var(--color-border);
}

.opacity-6 {
    opacity: .6;
}

.height-auto {
    height: auto;
}

.padding-0 {
    padding: 0;
}

.display-none {
    display: none;
}

.border1red {
    border: 1px solid red;
}

.form-control,
.form-select {
    border-radius: 0;
    margin: 0.5rem 0;
}

    .form-control:focus {
        box-shadow: none;
    }

.text-stroke {
    -webkit-text-stroke: .5px;
}

i[disabled],
i:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

.align-middle {
    vertical-align: middle;
}

.area-4rem {
    max-height: 4rem;
}

.area-6rem {
    max-height: 6rem;
}

.area-8rem {
    max-height: 8rem;
}

.area-10rem {
    max-height: 10rem;
}

.area-12rem {
    max-height: 12rem;
}

.area-14rem {
    max-height: 14rem;
}

.area-16rem {
    max-height: 16rem;
}

.area-18rem {
    max-height: 18rem;
}

.dots-loader {
    pointer-events: none;
    width: 1rem;
    height: 4px;
    background: radial-gradient(circle closest-side,var(--color-gray-3) 50%,#0000) 0 0/33% 100% space;
    clip-path: inset(0 100% 0 0);
    animation: d1 1s steps(4) infinite;
}

.blobimage-container {
    display: block;
    height: 10rem;
    max-width: 12rem;
    cursor: pointer;
    position:relative;
}

.img-responsive {
    width: auto;
    max-width: 70%;
    height: 70%;
}

@keyframes d1 {
    to {
        clip-path: inset(0 -34% 0 0)
    }
}

.centered-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bi-arrow-right-circle {
    font-size: 1em;
}

.datasource-header {
    margin-top: 3rem;
    font-family: 'ZEISSFrutigerNextW1G-Bold', arial, sans-serif;
    font-weight: normal;
    font-style: normal;
}

.position-right {
    margin: auto 0 auto auto !important;
}

.position-left {
    margin: auto auto auto 0 !important;
}

.form-check-input {
    cursor: pointer;
}

.title-medium {
    font-family: 'ZEISSFrutigerNextW1G-Medium', arial, sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
}

mark {
    background-color: var(--color-lime-zest);
    color: black;
    padding: 0;
}

.mark-bg {
    background-color: var(--color-lime-zest) !important;
}

.spinner-fixed {
    position: fixed;
    top: 50%;
    left: 50%;
}

/*#endregion shared*/
