scale-table td {
    white-space: initial;
}

scale-table col.attribute-col {
    width: 19%;
}

sclae-table col.attribute-col.singe {
    width: 25%;
}

scale-table col.value-col {
    width: 27%;
}

scale-table col.value-col.single {
    width: 75%;
}

scale-table {
    margin-bottom: var(--scl-spacing-32);
}

a.edit-link {
    color: inherit;
    text-decoration: none;
}

a.edit-link:hover {
    color: var(--telekom-color-text-and-icon-link-standard);
    text-decoration: none;
}

#cert_icons {
    display: flex;
    flex-wrap: wrap;
}

#cert_icons img {
    height: 70px;
    width: auto;
    margin: 10px;
}

.flex-and-wrap-container {
    display: flex;
    gap: var(--scl-spacing-16);
    flex-wrap: wrap;
}

.transparent {
    opacity: 0;
}

.device_images_container {
    display: flex;
    justify-content: center;
    height: 380px;
}

.device_images {
    display: flex;
    align-self: center;
    max-width: 100%;
    max-height: 380px;
    height: auto;
    align-content: center;
    text-align: center;
}

.device_info {
    display: flex;
    flex-direction: column;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 10px;
    height: 100%;
    padding: var(--scl-spacing-12);
}

.communication_left_name {
    display: flex;
    width: 75%;
    justify-content: space-between;
}

.contact_info {
    display: flex;
    flex-direction: column;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 10px;
    height: 100%;
    padding: 0 var(--scl-spacing-12);
}

.contact_info_buttons {
    display: flex;
    flex-direction: column;
    padding-top: 7px;
}

.contact_info_row {
    display: flex;
    flex-direction: row;
    margin-top: 3px;
    margin-bottom: 5px;
}

.contact_info_row::part(base) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contact_info_row scale-icon-navigation-external-link,
.contact_info_row scale-icon-communication-email,
.contact_info_row scale-icon-communication-phone-number,
.contact_info_row scale-icon-content-international{
    vertical-align: middle;
    transform: scale(0.8);
    transform-origin: center;
}

.device_overview {
    display: flex;
    flex-direction: column;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 10px;
    height: auto;
    margin-top: 40px;
    padding: var(--scl-spacing-12);
}

.device_headline {
    margin-top: 10px;
    padding-bottom: 4px;
    font-size: 28px;
    font-weight: bold;
}

.device_detail_useful_information {
    margin-bottom: var(--scl-spacing-16);
}

.device_detail_useful_information .vertically-centered {
    margin: auto 0;
    text-align: right;
    font-weight: var(--telekom-typography-font-weight-bold);
}


.attribute_values {
    text-align: right;
    font-weight: bold;
}

.highlight-fade {
  animation: highlightFade 1.2s;
}

@keyframes highlightFade {
  0%   { background: #f7acd7; }
  80%  { background: #f7acd7; }
  100% { background: transparent; }
}

.visible {
    display: block;
}

.invisible {
    display: none;
}

/* MARK: Popup stuff */

/* Popup container */
.quali_popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}


/* The actual popup (appears on top) */
.quali_popup .exclamation {
    color: var(--telekom-color-text-and-icon-functional-danger)
}

.quali_popup .popuptext {
    width: 200px;
    border: 1px solid #C4C4C4;
    color: #ffffff;
    background-color: #ffffff;
    text-align: center;
    border-radius: 4px;
    padding: 5px 5px 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    margin-left: -109px;
    font-family: TeleNeo, sans-serif;
}

/* Popup arrow */
.quali_popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #e2e2e2 transparent transparent transparent;
}

.fadein {
    animation: fadeIn 0.5s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Popup stuff end */

/* MARK: Layout */
.dd_nav_headline {
    padding: 14px 0px 12px;
    font-size: 20px;
}

.avoid_user_select {
    user-select: none;
}

.dd_attribute_headline {
    font-size: 20px;
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 10px;
}

.dd_upper_row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: var(--scl-spacing-16);
}

.dd_tab_cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dd_tab_attributes {
    columns: 3;
    column-gap: 1rem;
    column-rule: 1px solid #C4C4C4;
}

.dd_group_element {
    break-inside: avoid;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.dd_tab_cols > :first-child {
    border-right: 1px solid #C4C4C4;
    padding-right: 1rem;
    margin-right: 1rem;
}


/* MARK: Table setup */
.table_dd {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--scl-spacing-8);
    row-gap: var(--scl-spacing-16);
}

.table_dd .full-row {
    grid-column: 1 / span 2;
}

.table_dd .value-column {
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.btn-tiny {
    padding: 7px 6px 7px;
    margin-top: -5px;
    margin-right: 20px;
}

.edit-btn {
    margin-top: 10px
}

.contact-flex-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: auto;
    margin-bottom: auto;
}

/* MARK: Image Slider */
.imageSlider {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    max-height: 100%;
    margin: 0 auto;
}

.slider-image {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 105%;
    height: 105%;
    opacity: 1;
    z-index: 0;
    transition: transform 800ms;
    transform: scale(1);
}

.control {
    position: absolute;
    top: 50%;
    margin-top: -24px;
    z-index: 55;
}

.control label svg {
    width: 48px;
    height: 48px;
    fill: #474747;
    stroke: currentColor;
    stroke-width: 0;
}

.control label svg:hover {
    transition: all .2s ease;
    fill: #000;
}

.control label {
    z-index: 0;
    display: none;
    cursor: pointer;
    opacity: 0.5;
}

.control label:hover {
    opacity: 1.0;
}

.next {
    right: 1%;
}

.previous {
    left: 1%;
}

.slider-pagination {
    display: flex;
    width: 100%;
    left: 0;
    text-align: center;
}

.slider-pagination label {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    margin: -25px 2px;
    border: solid 1px rgb(71, 71, 71);
    cursor: pointer;
}

.download-sync-group {
    margin-top: auto;
}

scale-menu-flyout-item i {
    width: 1rem;
}

.media-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    justify-items: end;
    padding: var(--scl-spacing-8) 0;
    border-bottom: 1px solid var(--telekom-color-ui-border-standard);
    margin-bottom: var(--scl-spacing-8);
    gap: var(--scl-spacing-16);
}

.media-row img {
    width: 40px;
}

@media only screen and (max-width: 1400px) {
    .dd_tab_attributes {
        columns: 2
    }
}

@media only screen and (max-width: 1023px) {
    .dd_upper_row {
        grid-template-columns: 2fr 1fr;
    }

    .device_images_container {
        grid-column: 1 / span 2;
    }

    .dd_tab_cols > :first-child {
        border: none;
        padding: 0;
        margin: 0;
    }

    .dd_lower_row {
        display: block;
    }

    .device_navigation {
        position: initial;
    }

    .dd_tab_cols {
        display: block;
    }

    .contact-flex-container {
        flex-direction: row;
    }
    .dd_tab_attributes {
        columns: 1;
    }

}

@media only screen and (max-width: 785px) {
    .dd_upper_row {
        display: block;
    }


}

.device-bottom-button-container {
    margin-top: auto;
}

.device-scale-menu {
    float: inline-start;
    margin: 5px;
}

/* Flyout-Items: Icon und Text auf gleicher Höhe */
.device-scale-menu scale-menu-flyout-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

/* Icons perfekt auf Text-Höhe justieren */
.device-scale-menu scale-menu-flyout-item scale-icon-action-download {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
    display: inline-flex;
    vertical-align: middle;
    transform: translateY(-0.15em);
}

.device-scale-menu scale-menu-flyout-item span {
    display: inline-flex;
    align-items: center;
}

/* Alle Scale-Icons im Flyout feinjustieren */
.device-scale-menu scale-menu-flyout-item scale-icon-action-edit{
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
    display: inline-flex;
    vertical-align: middle;
    transform: translateY(-0.15em);
}