/* Bootstrap pdding and margin classes */
/* from bootstrap */
.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}


/** MISC */
/**
    Global CSS for TIS2 MyService2 Application
*/

:focus-visible{
    outline:none;
}

.visible {
    opacity: 1;
}
.hidden {
    opacity: 0;
    pointer-events: none;
}

.close-btn {
    position: absolute;
    z-index: 2;    
    height: 1rem;
}
.close-btn i {
    font-size: 1rem;
    margin: -0.5rem -8px;
}

/* General Styles */
#TIS2Body {
    padding: 2rem;
    margin: 7rem 0 5rem 0;
}

#TIS2ReportBody {
    padding: 0rem;
    margin: 0rem 0 0rem 0;
}
:focus-visible{
    outline:none;
}

.default-spacer {
    margin-top: 1rem;
}

.lv_field_area {
    position: relative;
}

.lv_field_label {
    font-weight: 600;
}

.lv_field_value {
}


/* Bosch PreLoader */
.bosch-loader {
    margin: 45vh auto 0 auto;
    width: 10rem;
    height: 5rem;
}

.bosch-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    z-index: 99;
    background-color: #fff;
}

.a-activity-indicator.-small {
    margin: 0 auto;
}

#TIS2Footer {
    position: fixed;
    height: 3.125rem;
    background-color: #fff;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}
/*#TIS2Footer {
    position: fixed;
    height: 1.5rem;
    background-color: #fff;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
    padding-left: 10px;
    border-width: 1px 0 0 0;
    border-color: var(--base-major__enabled__default__fill);
    border-style: solid;
}*/

body {
    margin-bottom: 50px;
}

.tablePagination {
    display: flex;
    border-top: 1px solid #ccc;
    margin-top: 0.5rem;
    padding: 0.25rem 0;
    align-items: center;
}

    .tablePagination nav {
        display: flex;
        margin-left: auto;
        gap: 0.5rem;
        align-items: center;
    }

.detailviewselectize label {
    margin-top: -2.75rem !important;
    margin-left: 1rem !important;
    position: absolute !important;
    z-index: 2 !important;
}

.detailviewselectize div.selectize-input {
    padding-bottom: 0px !important;
    padding-top: 16px !important;
    padding-left: 16px !important;
    padding-right: 0px !important;
    min-height: 3rem !important;
}

.detailviewselectize div.item {
    height: 2rem !important;
    font-size: 1rem !important;
}

.detailviewselectize div.option {
    padding-left:1rem !important;
    font-size: 1rem !important;
}

.detailviewselectize div.selectize-control {
    border-bottom: .0625rem solid var(--neutral__enabled__front__default) !important;
}

div.m2-dialog {
    height: 100vh;
    width: 100vw;
    backdrop-filter: blur(0.25rem);
    background-color: hsl(213deg 5% 46% / 25.1%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: grid;
}

div.m2-dialog dialog {
    z-index: 3;
    justify-self: center;
    align-self: center
}

div.m2-dialog-level-2 {
    height: 100vh;
    width: 100vw;
    backdrop-filter: blur(0.25rem);
    background-color: hsl(213deg 5% 46% / 25.1%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    display: grid;
}

div.m2-dialog-level-2 dialog {
    z-index: 3;
    justify-self: center;
    align-self: center
}

div.m2-dialog-level-3 {
    height: 100vh;
    width: 100vw;
    backdrop-filter: blur(0.25rem);
    background-color: hsl(213deg 5% 46% / 25.1%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    display: grid;
}

div.m2-dialog-level-3 dialog {
    z-index: 3;
    justify-self: center;
    align-self: center
}



/*--------------*/
/* Bosch Loader */
/*--------------*/


.-primary, .-secondary, :root{
--tis-dark-grey: #525F6B;
--tis-light-grey: #BFC0C2;
--tis-light-grey-50: #DFDFE0;
--tis-light-blue: #008ECF;
--tis-dark-grey-menue: #BFC0C2;

--tis-loader-top-box-color1: var(--tis-dark-grey); /* --g-red-50 */
--tis-loader-top-box-color2: var(--tis-light-grey); /* --g-blue-50 */
--tis-loader-bottom-box-color1: var(--tis-light-blue); /* --g-purple-50 */
--tis-loader-bottom-box-color2: var(--tis-light-grey); /* --g-green-50*/
}

.a-activity-indicator__top-box {
    background-color: var(--tis-loader-top-box-color1);
}

@keyframes top-box-animation-small {
    0%,to {
        transform: translate(0)
    }

    12.5% {
        transform: translate(-16px)
    }

    24.99% {
        background-color: var(--tis-loader-top-box-color1);
        transform: translate(0)
    }

    25% {
        background-color: var(--tis-loader-top-box-color2)
    }

    37.5% {
        transform: translateY(-16px)
    }

    50% {
        transform: translate(0)
    }

    62.5% {
        transform: translate(-16px)
    }

    74.99% {
        background-color: var(--tis-loader-top-box-color2);
        transform: translate(0)
    }

    75% {
        background-color: var(--tis-loader-top-box-color1)
    }

    87.5% {
        transform: translateY(-16px)
    }
}



.a-activity-indicator__bottom-box {
    background-color: var(--tis-loader-bottom-box-color1);
}

@keyframes bottom-box-animation-small {
    0%,to {
        transform: translate(0);
        background-color: var(--tis-loader-bottom-box-color1)
    }

    12.5% {
        transform: translate(16px);
        z-index: 2
    }

    25% {
        transform: translate(0);
        z-index: 2
    }

    37.5% {
        transform: translateY(16px);
        z-index: 0
    }

    49.99% {
        transform: translate(0);
        z-index: 0;
        background-color: var(--tis-loader-bottom-box-color1)
    }

    50% {
        background-color: var(--tis-loader-bottom-box-color2)
    }

    62.5% {
        transform: translate(16px);
        z-index: 2
    }

    75% {
        transform: translate(0);
        z-index: 2
    }

    87.5% {
        transform: translateY(16px);
        z-index: 0
    }

    99.99% {
        background-color: var(--tis-loader-bottom-box-color2)
    }
}


/*------------*/

/* SKID */
.skidMyProfile {
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    border-radius: 5px;
    padding: 5px;
    max-width: 400px;
    height: 6rem;
    z-index: 0;
    right: 2rem;
    top: 22rem;
    width: 18rem;
    display: inline-block;
    float: right;
    text-align: left;
    background-color: white;
    font-family: boschsans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    margin-right: 0px;
}

.skidMyProfileHide {
    opacity: 0;
}

.skidMyProfile p {
    padding: 0 15px;
    color: #828282;
    margin: 0 0 9px;
    font-size: inherit;
}

.skidMyProfile img {
    max-width: 200px;
    height: auto;
}

.skidMyProfile a {
    position: absolute;
    top: 20px;
    right: 15px;
    text-transform: uppercase;
    font-family: "Bosch Sans Light",sans-serif;
    font-weight: bold;
    font-size: 90%;
    color: #007bc0;
    text-decoration: none;
}

#skidLogo {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 120px;
}

#skidEmail {
    position: absolute;
    color: #828282;
    bottom: 10px;
    left: 16px;
}

.detail-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 500ms ease;
}

    .detail-wrapper.expanded {
        /* large enough to accommodate content; using a high value for smooth expansion */
        max-height: 386px;
    }

.scale-wrapper {
    transform: scale(0.75); /* 75% size */
    transform-origin: top left; /* pivot point */
    /* optional: to avoid clipping if it shrinks/grows */
    display: inline-block;
}

/*Copy On Rightclick*/

.copy-tooltip {
    position: absolute;
    background: var(--g-green-75);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    z-index: 9999;
}

    .copy-tooltip.show {
        opacity: 1;
        transform: translateY(-10px); /* float up */
    }

body.modal-open {
    position: fixed;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    width: 100%;
}


/* CL Dynamic table */
:root {
    --cl-dt-col-w: 10.5rem;
    --cl-dt-min-row-h: 45px;
}

.cl-dt-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    float:left;
}

.cl-dt-hits {
    color: #333;
    font-size: 14px;
}

.cl-dt-grid-wrap {
    width: 100%;
    max-height: calc(100vh - 25rem);
    overflow: auto;
    background: white;
}

.cl-dt-row {
    display: grid;
/*    grid-template-columns: 9rem repeat(7, minmax(0, 1fr)) 4rem 8rem;*/
    align-items: start;
    grid-auto-rows: minmax(var(--cl-dt-min-row-h), auto);
    gap: 0;
    min-width: 105rem; /* Min. groesse der tabelle */
}

.cl-dt-cell {
    padding: 10px 12px;
    box-sizing: border-box;
    border-bottom: 1px solid #71767c;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    background: #fff;
    display: flex;
    align-items: center;
    min-height: var(--cl-dt-min-row-h);
    /* show xxx... */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.cl-dt-header {
    position: sticky;
    top: 0;
    z-index: 3;
}

    .cl-dt-header .cl-dt-cell {
        font-weight: 700;
        border-bottom: 1px solid #000;
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .cl-dt-header .cl-dt-cell:focus {
            outline: 3px solid rgba(0,120,215,0.12);
        }

.cl-dt-cell.cl-dt-first {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
/*    box-shadow: 2px 0 6px rgba(0,0,0,0.04);*/
}

.cl-dt-header .cl-dt-cell.cl-dt-first {
    z-index: 5;
}

.cl-dt-cell.cl-dt-last{
    position: sticky;
    z-index: 2;
    background: #fff;
}

.cl-dt-cell.cl-dt-last {
    right: 0rem;
}

.cl-dt-header .cl-dt-cell.cl-dt-last {
    z-index: 5;
}

.cl-dt-sort-indicator {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    margin-left: auto;
    opacity: 0.7;
}

.cl-dt-sort-asc .cl-dt-sort-indicator {
    border-bottom: 9px solid #333;
}

.cl-dt-sort-desc .cl-dt-sort-indicator {
    border-top: 9px solid #333;
}

.cl-dt-row.cl-dt-data:nth-child(even) .cl-dt-cell {
    background: #fbfbfb;
}

.cl-dt-flexcontainer{
    display:flex;
}

.cl-dt-pagesize-dropdown{
    display:flex;
}

    .cl-dt-pagesize-dropdown > div {
        align-self: center;
        margin-right: 1rem;
    }

cl-dt-mark {
    background: #ffea8a;
    padding: 0 2px;
    border-radius: 2px;
}

@media (max-width: 720px) {
    .cl-dt-grid-wrap {
        max-height: none;
        overflow: visible;
    }

    .cl-dt-row.cl-dt-header {
        display: none;
    }

    .cl-dt-row {
        display: block;
        min-width: 0;
        margin: 10px 0;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .cl-dt-cell {
        display: flex;
        justify-content: space-between;
        border: none;
        padding: 10px 14px;
        white-space: normal;
    }

        .cl-dt-cell::before {
            content: attr(data-label);
            font-weight: 600;
            margin-right: 12px;
            color: #333;
        }

        .cl-dt-cell.cl-dt-first {
            position: static;
            box-shadow: none;
            background: #f7f7f7;
            border-radius: 8px 8px 0 0;
            border-bottom: 1px solid #ddd;
        }

        .cl-dt-cell.cl-dt-last {
            position: static;
            box-shadow: none;
            background: #f7f7f7;
            border-radius: 8px 8px 0 0;
            border-bottom: 1px solid #ddd;
        }

        .cl-dt-cell:last-child {
            border-bottom: none;
        }
}

.cl-dt-table-pagination,
.cl-dt-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Anpassung muss noch dynamisch umgesetzt werden*/
/*.cl-dt-last2 {
    width: 6rem;
    height: 2.8rem;
}
.cl-dt-last {
    width: 8rem;
    height: 2.8rem;
}*/

.cl-dt-last .o-split-button {
    position:absolute;
}

/*.cl-dt-last button {
    padding: 0.2rem;
}
*/

#CLDynamicTable_actionContentTemplate{
    display:none;
}

/* Additional elements/container */
.cl-btngroup-action-top {
    position: absolute;
    right: 2rem;
    top: 15.2rem;
}
.cl-btngroup-action-bottom {
    position: absolute;
    right: 2rem;
    /*    bottom: 0rem;*/
    margin-top: 1rem;
}

.m-dialog[open].large {
    --max-dialog-width: 60rem;
}

/* m Table extensions*/
.cl-m-table{
    width:100%;
}
.cl-m-table td {
    vertical-align: top;
    border-color: var(--tis-light-grey);
}
.cl-m-table-small td {
    height: auto;
    min-height: 1.8rem;
    padding: 0 !important;
}
.cl-m-table-first-bold td:first-child{
    font-weight:600;
}
.cl-m-table-first-bold td.cl-m-table-td-no-border {
    border-color: #fff;
}

/*Warranty check*/
div.warranty-check-serial-number {
    display: flex;
    flex-wrap: wrap;
}

    div.warranty-check-serial-number .separator { /*separator*/
        /*        padding-top: 18px;*/
        margin-left: 0.2rem;
        margin-right: 0.2rem;
        font-weight: 400;
        font-size: 2rem;
    }

    div.warranty-check-serial-number .separator {
        display: none;
    }

    div.warranty-check-serial-number .plant,
    div.warranty-check-serial-number .fd,
    div.warranty-check-serial-number .serialnumber,
    div.warranty-check-serial-number .ttnr {
        flex-basis: 95%;
        max-width: 20rem;
    }

    div.warranty-check-serial-number .ttnr {
        margin-right: 0rem;
    }

.warranty-check-btn-container {
    margin-right: 9rem;
}

@media (min-width: 660px) {
    .warranty-check-btn-container {
        margin-right: 0rem;
    }

    div.warranty-check-serial-number .separator {
        display: inline;
    }

    div.warranty-check-serial-number .plant {
        min-width: 7rem;
        flex-basis: 20%;
    }

    div.warranty-check-serial-number .fd {
        min-width: 10rem;
        flex-basis: 16%;
    }

    div.warranty-check-serial-number .serialnumber {
        min-width: 7rem;
        flex-basis: 17%;
    }

    div.warranty-check-serial-number .ttnr {
        min-width: 10rem;
        flex-basis: 20%;
    }

    div.warranty-check-serial-number .ttnr {
        margin-right: 1rem;
    }

    div.warranty-check-serial-number button {
        margin-right: 0;
    }
}

div.warranty-check-serial-number > .small input {
    padding-left: unset;
    padding-right: unset;
}

div.warranty-check-serial-number > .small label {
    margin: unset;
    max-width: 100%;
}

div.warranty-check-serial-number span.small { /*separator*/
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.step-legal-warranty .m-step-indicator__label {
    font-size: 0.8rem;
}

/* Warranty table styles */
.warranty-check .k-grid-table {
    margin-bottom: 1rem;
}

@media (width > 51.9rem) {
    .warranty-check .k-grid-table {
        height: auto;
        width: 100%;
        border-spacing: 0;
    }

        .warranty-check .k-grid-table tr.k-master-row {
            width: 100%;
        }

        .warranty-check .k-grid-table tr th {
            width: 10%;
            max-width: 0;
            padding: 8px 12px;
            font-size: 14px;
            line-height: 1.42857;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
        }

        .warranty-check .k-grid-table tr td {
            width: 10%;
            max-width: 0;
            padding: 8px 12px;
            font-size: 14px;
            line-height: 1.42857;
            overflow: hidden;
            text-overflow: ellipsis;
            border-top: 1px solid rgba(0,0,0,0.5);
        }
}


/* #region Responsive table */
@media (width < 52rem) {

    /* Variante mit Header, wenn die erste Zeile der Tabelle Header-Zellen enthält */
    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        display: block;
    }

    .table-responsive tr {
        border-bottom: 1px solid #ccc;
    }

    .table-responsive thead {
        display: none;
    }

    .table-responsive td {
        display: flex;
        justify-content: start;
        padding-left: 42vw;
        position: relative;
    }

    .table-responsive td::before {
        content: attr(data-label);
        font-weight: bold;
        position: absolute;
        left: 1rem;
    }

    /* Variante ohne Header, wenn die erste Zeile der Tabelle keine Header-Zellen enthält */
    .table-responsive-noheader table,
    .table-responsive-noheader tbody,
    .table-responsive-noheader th,
    .table-responsive-noheader td,
    .table-responsive-noheader tr {
        display: block;
    }

    .table-responsive-noheader tr {
        border-top: 1px solid grey;
    }

    .table-responsive-noheader tr:first-child {
        display: none;
    }

    .table-responsive-noheader tr:not(:first-child) td {
        display: flex;
        justify-content: start;
        padding-left: 30%;
        position: relative;
    }

    .table-responsive-noheader tr:not(:first-child) td::before {
        content: attr(data-label);
        font-weight: bold;
        position: absolute;
        left: 1rem;
    }
    /* Optional: Stil für die erste Spalte, wenn kein Header vorhanden ist */
    .tablestyle01 .table-responsive td:first-child,
    .tablestyle02 .table-responsive td:first-child,
    .tablestyle02 .table-responsive-noheader td:first-child,
    .tablestyle01 .table-responsive-noheader td:first-child,
    .tablestyle01.table-responsive td:first-child,
    .tablestyle02.table-responsive td:first-child,
    .tablestyle02.table-responsive-noheader td:first-child,
    .tablestyle01.table-responsive-noheader td:first-child {
        background: linear-gradient(90deg, #a22460 10%, #feb536 90%);
        font-weight: bold;
    }
}
/* #endregion */

.fieldlist-value {
    font-weight: bold;
}

.grid-view-header{
    display:flex;
    gap:2rem;
}

.grid-view-header-buttons{
    flex-basis: 10%;
    min-width: 12rem;
}

.grid-view-filter-section-container {
    flex-basis: 90%
}

.grid-view-filter-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0 1rem;
}

.grid-view-filter-item{
    margin-bottom:1rem;
}

.grid-view-filter-checkbox-item {
    flex: 1 1 25%;
    padding:0.5rem 0.5rem 0.5rem 0.5rem;
    min-width: 16rem;
    height:3rem;
}

.selectable-tile-grey-border {
    border-color: var(--base-major__enabled__default__fill) !important;
}
    .selectable-tile-grey-border::before {
        border:0!important;
    }

/* OLD icon style */
.icon-image {
    background-color: #007bc0;
}
.grid-view-filter-item-full-width {
    grid-column: 1 / -1;
    margin: 0 0 0.5rem 0;
}

.request-footer {
    width: calc(100% - 5.5rem);
    position: fixed;
    /* bottom: 1.5rem */
    bottom: 3rem;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    border-width: 1px 0 0 0;
    border-color: var(--base-pure__enabled__pressed__fill);
    border-style: solid;
    background: white;
}
    .request-footer > .footer-buttons {
        margin: 0.5rem 1.5rem;
        display:flex;
        gap:1rem;
    }
/*.request-footer {
    width: calc(100% - 5.5rem);
    position: fixed;
    bottom: 1.5rem;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    border-width: 1px 0 0 0;
    border-color: var(--base-major__enabled__default__fill);
    border-style: solid;
    background: white;
}*/

.request-status-container {
    column-count: 2;
}
    .request-status-container > * {
        height: 4.75rem;
    }

@media (max-width: 1560px) {
    .request-status-container {
        column-count: 1;
    }
        .request-status-container > * {
            height:unset;
        }
}

.service-operation-picker-line {
    display: flex;
    min-height: 3.5rem;
}
.service-operation-picker-left-box {
    width: 2.5rem;
    min-width: 2.5rem;
    display: flex;
    align-items: center;
    background-color: var(--g-gray-90);
}
.service-operation-picker-right-box-top {
    display: flex;
    align-items: center;
    background-color: var(--g-gray-90);
    width:100%;
}
.service-operation-picker-right-box-bottom {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    width:100%;
}
.service-operation-picker-arrow {
    margin: 0 0.5rem;
    color: var(--g-blue-60);
}
div.service-operation-picker-item-selected {
    background-color: var(--g-blue-50);
    color: white;
    padding: 0.5rem;
    margin: 1px 0;
    border-radius: 0.25rem
}
p.service-operation-picker-item-selected {
    background-color: var(--g-blue-50);
    color: white;
    margin: 0;
}
p.service-operation-picker-item-deselected {
    color: var(--g-blue-60);
}

.request-device-part-table-x-button {
    color: var(--nested-pure__enabled__default__front,var(--accent-pure__enabled__default__front));
    min-height: 2.5rem;
    align-items: center;
    display: flex;
}

#modal-summary-body table tr{
    cursor:default;
}

.hide-background-element {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #fff;
    z-index: 3;
    opacity: 0.6;
}


.cl-sub-h {
    margin-top: 3.5rem;
}

.cl-control-underline {
    border-bottom: .0625rem solid var(--nested-minor__enabled__default__front,var(--base-minor__enabled__default__front)) !important;
}