:root {
    --scale-header-approx-height: 84px;
    --large-container: 1504px;
    --medium-container: 1295px;
    --small-container: 1039px;
    --extra-small-container: 500px;
}

scale-telekom-header a:hover {
    text-decoration: none;
}

scale-telekom-footer {
    position: initial;
    margin-top: auto;
}

html, body {
    width: 100%;
    padding: 0;
    margin: 0;
    min-height: 100%;
    display: flex;
    scroll-padding-top: 130px;
}

body {
    flex-direction: column;
    overflow-x: hidden;
}

main {
    flex: 1;
    margin-bottom: 100px;
}

.sidebar-content-wrapper {
    flex: 1;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
}

.content-footer-container {
    display: flex;
    flex-flow: column;
    flex: 1;
}


/*
    --width: unset; is required because the layout otherwise overflows...
    this is a bug in the scale-library and has to be fixed like this until it is fixed there
*/
.mobile-nav-flyout {
    --duration: 0;
    --top: 0;
    --height: 100vh;
    --background: var(--telekom-color-background-canvas);
    --width: unset;
}

/* MARK: Breadcrum Bar */
.breadcrumbbar {
    padding-top: 6px;
    padding-bottom: 6px
}

.breadcrumb {
    padding: 3px 0;
    margin: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
}

.breadcrumb > li {
    display: inline-flex;
    align-items: center;
    color: var(--telekom-color-text-and-icon-additional);
}

.breadcrumb > li > a {
    color: var(--telekom-color-text-and-icon-standard);
}

.breadcrumb > li > a:hover {
    color: var(--telekom-color-primary-standard);
    text-underline-offset: 3px;
}

.breadcrumb > li:first-child scale-icon-navigation-right-condensed {
    display: none !important;
}

.breadcrumb > .active {
    color: #e20074
}

.breadcrumb-small {
    font-size: 15px;
    padding-top: 5px;
    padding-bottom: 5px
}

.breadcrumb-small > li + li:before {
    padding: 0 10px 0 6px
}

.screen-reader-text {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    color: white;
    opacity: 0;
}

.screen-reader-text:focus {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}

/* MARK: Modal */
.modal-open {
    overflow: hidden
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 6000;
    -webkit-overflow-scrolling: touch;
    outline: 0
}

.modal:empty {
    display: none
}

.modal.fade .modal-dialog {
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
    transition: transform .3s ease-out
}

.modal.in .modal-dialog {
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 12px
}

.modal-content {
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .75);
    background-clip: padding-box;
    outline: 0
}

.modal-content .close {
    margin-top: 10px;
    margin-right: 10px
}

.modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.in {
    opacity: .8
}

.modal-header {
    padding: 12px;
    border-bottom: 1px solid #b2b2b2
}

.modal-title {
    text-align: center
}

.modal-body {
    position: relative;
    padding: 12px
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

@media (min-width: 786px) {
    .modal-dialog {
        width: 600px;
        margin: 24px auto
    }

    .modal-small {
        width: 480px
    }
}

@media (min-width: 1024px) {
    .modal-large {
        width: 840px
    }
}


a:has(#hwdb-logo) {
    display: flex;
}

#hwdb-logo {
    height: 80%;
    width: 80%;
    margin: 0 auto;
}

.center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.grid-with-table-style {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: var(--scl-spacing-16);
}

.grid-with-table-style > * {
    margin-bottom: var(--scl-spacing-16);
    padding-bottom: var(--scl-spacing-16);
}

.grid-with-table-style > *:not(.no-border) {
    border-bottom: 1px solid var(--telekom-color-ui-border-standard);
}

.grid-with-table-style .full-row {
    grid-column: 1 / span 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

/* Device-Header Edit-Icon korrekt ausrichten */
h1[data-testid="device-name-heading"] .edit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

h1[data-testid="device-name-heading"] .edit-link scale-icon-action-edit {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

.inactiveLink {
    pointer-events: none;
    cursor: default;
}

.notification-container {
    display: flex;
    flex-flow: column;
    gap: var(--scl-spacing-12);
    margin-bottom: var(--scl-spacing-16);
}

.input-field-stack {
    display: flex;
    flex-flow: column;
    gap: var(--scl-spacing-12);
}

.with-required-asterisk::part(label)::after,
.with-required-asterisk label::after,
label:has(.with-required-asterisk)::after {
    content: "*";
    color: red;
}

.privacy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.privacy-row a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.float-right {
    float: right;
}

.img-frame-preview {
    width: 180px;
    height: 180px;
}

#center-wrapper {
    margin: 0 auto;
    width: auto;
}

label.required:after {
    content: "*";
    color: red;
}

.val {
    width: 300px;
}

#topBtn {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 200;
}

.show {
    display: block;
}

.contact-attribute {
    width: 100%;
}

.contact-key {
    width: 20%;
}

.contact-value {
    width: 80%;
}

/* MARK: FAQ Styling */
.faq_container {
    display: flex;
    justify-content: center;
    gap: 2rem
}

.HomeCenterText {
    font-size: calc(100% + 3vw);
    font-weight: 700;
    border: 1px #00000082;
    border-radius: 8px;
    background: #00000082;
    color: white;
    padding: 10px;
}

scale-link.no-visited {
    --color-visited: var(--telekom-color-text-and-icon-link-standard);
    --color-line-visited: var(--telekom-color-text-and-icon-link-standard);
}

.icon-cropper {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
}

.device-icon {
    padding: 5px;
    border: 2px solid black;
    border-radius: 50%;
    max-width: 100%;
    max-height: 100%;
}

.device-icon:hover {
    border-color: #ea0a8e;
}

.logo-cropper {
    width: 180px;
    height: 60px;
    align-items: center;
}

.logo-icon {
    padding: 5px;
    max-width: 100%;
    max-height: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

.module-cropper {
    width: 30px;
    height: 30px;
}

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

.top-table-options {
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.search-options {
    display: flex;
    justify-content: flex-end;
    gap: var(--scl-spacing-8);
    flex-wrap: wrap;
    align-items: center;
}

header {
    background-color: white;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.15);
    top: 0;
    height: 96px;
    width: 100%;
    z-index: 1000;
}

.scale-table-container scale-link {
    --color-visited: var(--color);
}

/* overrides jquery-ui.css */
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 0px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
    border-top: 1px solid #c5c5c5;
    background: #ffffff;
}

.doc-style-sidebar {
    position: sticky;
    top: var(--scale-header-approx-height);
    /* Height is window height minus header height minus padding */
    height: calc(100vh - var(--scale-header-approx-height) - 2rem);
    overflow-y: auto;
    padding: 1rem;
    width: max-content;
}

.doc-style-sidebar scale-sidebar-nav-item {
    width: 100%;
    display: inline-block;
}

.doc-style-sidebar scale-sidebar-nav-item a:hover {
    text-decoration: unset;
    color: var(--color-hover);
}

.container-scale-size {
    max-width: var(--medium-container);
    margin: 0 auto;
    padding: 0 2rem;
}

.heading-and-main-action {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

@media only screen and (max-width: 1039px) {
    .container-scale-size {
        margin: 0 auto;
        padding: 0 1rem;
    }
}


@media (max-width: 785px) {
    html {
        overflow-x: hidden;
    }

    body {
        position: relative;
    }

    .sidebar-content-wrapper {
        display: flex;
        flex-flow: column;
    }

    .doc-style-sidebar {
        position: block;
        top: unset;
        height: auto !important;
        overflow-y: auto;
        padding: 1rem;
        width: -webkit-fill-available;
        width: -moz-available;
        width: stretch;
        width: fill-available;
    }

    .doc-style-sidebar scale-sidebar-nav::part(list),
    scale-sidebar-nav::part(list) {
        display: contents;
    }

    .doc-style-sidebar .hide-when-collapsed {
        display: none;
    }
}


/* MARK: Modifications to Scale */
scale-telekom-mega-menu-column::part(base) {
    /* This is a temporary fix for a bug in the scale library, refer to  */
    flex-direction: row !important;
}

scale-telekom-mega-menu div.scale-telekom-mega-menu-container {
    row-gap: var(--scl-spacing-64);
}

scale-telekom-mega-menu div.scale-telekom-mega-menu-container scale-telekom-mega-menu-column:nth-child(6),
scale-telekom-mega-menu div.scale-telekom-mega-menu-container scale-telekom-mega-menu-column:nth-child(11) {
    grid-column: 2 / span 3;
}

.scale-telekom-footer a:hover {
    /* This is already set by scale, but a more specific rule from components.css overwrites scale, so must be overwritten here again.
    This specific rule canot be removed, because many <a> elements depend on it for styling */
    color: var(--font-color);
    text-decoration: none;
}

/* Reserve header height before hydration to prevent layout shift (CLS).
   Values mirror the Scale header's own breakpoint steps so the reserved
   space matches the final header height at every viewport width. */
scale-telekom-header:not(.hydrated) {
    display: block;
    min-height: 60px; /* below 1040px */
}

@media (min-width: 1040px) {
    scale-telekom-header:not(.hydrated) {
        min-height: 84px;
    }
}

@media (min-width: 1296px) {
    scale-telekom-header:not(.hydrated) {
        min-height: 96px;
    }
}

@media (min-width: 1680px) {
    scale-telekom-header:not(.hydrated) {
        min-height: 120px;
    }
}

/* MARK: WHCM Adjustments */
@media only screen and (prefers-contrast: more) {
    scale-telekom-header,
    scale-telekom-header scale-telekom-mega-menu {
        border: 2px solid transparent;
    }

    .device-icon,
    .logo-icon,
    #qualificationInfoPopup {
        /* This is done to make logos clearly visible in WHCM (high contrast mode) */
        background-image: url("/static/images/device/white.6c67190e25fa.jpg");
    }


    scale-button:focus, scale-link:focus, a:focus, button:focus {
        outline: 1px solid white;
    }

    scale-button:hover, scale-link:focus, a:hover, button:hover {
        outline: 1px solid white;
    }

    scale-telekom-header {
        border: 2px solid transparent;
    }
}