/***
* Material Symbols for all Radzen buttons
***/
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url('./fonts/MaterialSymbols.woff2') format('woff2');
}

/***
* text field component behavior definitions
***/
div.text-field-group {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    padding: 0.2rem 0;
}

.text-field-control,
input.rz-inputtext.text-field-control {
    position: relative;
    border: 1px solid var(--scl-color-background-darker);
    border-radius: var(--telekom-radius-standard);
    height: 2.75rem;
    padding-left: 0.75rem;
    transition: all var(--telekom-motion-duration-animation) step-end;
    transition: background var(--telekom-motion-duration-animation) ease;
    transition: border-color var(--telekom-motion-duration-animation) ease;
}

    .text-field-control[disabled],
    .text-field-control[disabled] + label {
        cursor: not-allowed;
        border-color: var(--telekom-color-ui-border-disabled);
        color: var(--telekom-color-text-and-icon-disabled);
        background: none;
    }

    .text-field-control.labeled,
    .text-field-control.rz-inputtext.labeled {
        padding-top: 0.75rem;
    }

    .text-field-control:hover,
    .text-field-group div.rz-calendar input.rz-inputtext.text-field-control:hover {
        background: var(--scl-color-background-light);
        border: 1px solid #222 !important;
    }

    .text-field-control:focus {
        background: var(--telekom-color-ui-white);
        outline: solid 2px var(--telekom-color-functional-focus-inverted);
        outline-offset: 1px;
    }

    .text-field-control.labeled::placeholder {
        color: transparent;
    }

.text-field-control {
    color: var(--telekom-color-text-and-icon-standard);
}

.text-field-group > option {
    margin: 0;
}

.text-field-group > input[readonly] {
    border-color: var(--border-color-readonly);
    background-color: var(--background-readonly);
}

select.text-field-control {
    padding-left: 0.75rem;
}


input[disabled].text-field-control {
    color: var(--scl-color-text-disabled);
}

label.text-field-label {
    position: relative;
    height: 0;
    width: fit-content;
    font-size: 0.75rem;
    color: black;
    top: 0.2rem;
    left: calc(0.75rem + 1px);
    transition: all var(--telekom-motion-duration-transition) ease;
    transform-origin: top left;
}

div.text-field-group .text-field-control:not(:focus):placeholder-shown + label.text-field-label {
    transform: translateY(8px) scale(1.4);
    color: var( --telekom-color-text-and-icon-additional);
    pointer-events: none;
    opacity: 1;
}

div.text-field-group div.text-field-actions {
    position: relative;
    height: 0;
    text-align: end;
}

    div.text-field-group div.text-field-actions.comparer {
        text-align: start;
        display: flex;
        justify-content: space-between;
    }

    div.text-field-group div.text-field-actions .text-field-button-wrapper {
        position: relative;
        display: inline-flex;
        justify-content: space-between;
        height: 2.75rem;
    }

        div.text-field-group div.text-field-actions .text-field-button-wrapper button {
            background: transparent;
            padding-left: 0;
            padding-right: 0;
        }

div.text-field-button-wrapper button > span.rz-button-box > i.rzi {
    min-width: unset;
    min-height: unset;
}

div.text-field-button-wrapper > button > span.rz-button-box > i.rzi:hover {
    color: var(--telekom-color-primary-standard);
}

/*Accordion*/
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms;
}

    .accordion-content[aria-hidden="false"] {
        grid-template-rows: 1fr;
    }

.accordion-content-wrapper {
    overflow: hidden;
    margin-top: 0.5rem;
}

    .accordion-content-wrapper:has(.navbar-warning) {
        margin-top: 0;
    }

.navbar-warning {
    align-items: center;
    height: 2.75rem;
    display: flex;
    gap: 0.5rem;
    color: var(--telekom-color-primary-standard);
}

.accordion {
    color: black;
}

    .accordion:has(.navbar-warning) {
        min-height: 1px;
    }

.accordion-trigger {
    background: transparent;
    box-shadow: none;
    border: 0;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
}

    .accordion-trigger:hover {
        color: #c00063;
        cursor: pointer;
    }

    .accordion-trigger:has(h5) > i {
        padding-top: 0.6rem;
    }

    .accordion-trigger > i {
        padding-top: 0.5rem;
    }

/***
* DateTimePicker
***/
.rz-datepicker-trigger .rzi-calendar:before {
    content: "date_range";
}

.calender-icon {
    border-left: 1px solid var(--telekom-color-ui-border-disabled);
    border-radius: unset;
}

.rt-datepicker .text-field-group.datepicker .text-field-control {
    padding-right: 4rem;
}

.rz-datepicker .rz-datepicker-trigger.rz-button.rz-button-icon-only {
    padding-right: 1.25rem;
    height: 2.75rem;
    border-left: 1px solid var(--scl-color-background-darker);
    border-radius: 0;
    padding-left: 0.25rem;
}

.datepicker .text-field-actions .text-field-button-wrapper:last-child {
    margin-right: 2rem;
}

.rz-datepicker-header {
    height: 4rem;
}

.rz-calendar-header {
    background-color: var(--background);
    border-radius: var(--rz-border-radius);
}

.rz-calendar-view-container {
    padding-bottom: .5rem;
    padding-top: .5rem;
}

.rz-calendar .rz-calendar-header .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled) {
    &:hover {
        background-color: var( --telekom-color-background-surface-subtle);
    }
}

.rz-calendar .rz-calendar-title .rz-dropdown-label {
    display: flex;
    align-items: center;
}

.rz-datepicker-header > a {
        padding-top: 0.5rem;
}

.rz-calendar-view td {
    border: unset;
}

    .rz-calendar-view td .rz-state-default.rz-calendar-today.rz-state-focused {
        background-color: var(--scl-color-background-light);
        color: var(--rz-datepicker-calendar-color);
    }

    .rz-calendar-view td .rz-state-default.rz-calendar-today {
        background-color: var(--scl-color-background-light);
        color: var(--rz-datepicker-calendar-color);
        border-radius: var(--rz-border-radius-2);
    }

    .rz-calendar-view td .rz-state-default.rz-state-active,
    .rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused {
        background-color: var(--telekom-color-primary-standard);
        color: var(--background);
        border-radius: var(--rz-border-radius-2);
    }

        .rz-datepicker-popup-container .rz-timepicker {
            background-color: var( --telekom-color-background-surface-subtle)
        }

    .rz-datepicker-popup-container .rz-timepicker .rz-numeric,
    .rz-datepicker-popup-container .rz-timepicker .rz-numeric .rz-numeric-button-icon {
        background-color: var(--telekom-color-background-canvas);
    }

.rz-calendar-view-container .rz-calendar-view .rz-calendar-today.rz-state-focused {
    color: #fff;
    background-color: var(--telekom-color-primary-standard);
    box-shadow: none;
}

.rz-calendar-view.rz-calendar-month-view .rz-state-default {
    border-radius: var(--rz-border-radius-2);
}

.rz-calendar-view-container .rz-calendar-view .rz-calendar-today.rz-state-focused:hover,
.rz-calendar-view.rz-calendar-month-view .rz-state-default:hover {
    background-color: #b2005c;
    color: #fff;
}

/***
* steam date picker behavior, based on textfield
***/
    .rz-calendar .text-field-label {
        top: 0.28rem;
    }

    span.rz-calendar > .text-field-control.rz-inputtext.labeled {
        padding-bottom: 0;
    }

    .text-field-group.datepicker.datefilter .text-field-control {
        padding-left: 2rem;
    }

    .text-field-group.datepicker .text-field-control.datefilter {
        padding-left: 2rem;
    }

    .text-field-group.datepicker .text-field-control {
        padding-right: 4rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .rz-datepicker > .rz-inputtext.text-field-control.labeled:disabled {
        box-shadow: none;
    }
    /*Select Dropdown*/
    .text-field-group:has(select):has(.text-field-actions) select {
        /* for Firefox */
        -moz-appearance: none;
        /* for Safari, Chrome, Opera */
        -webkit-appearance: none;
        padding-right: 2rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .text-field-button-wrapper:has(button.select-dropdown) {
        pointer-events: none;
    }

    select.text-field-control:focus {
        outline: none;
        border-block-color: none;
    }

    select {
        -moz-appearance: none;
        background: transparent;
        border: none;
    }

    .rz-state-highlight select {
        background-color: var(--telekom-color-background-canvas);
    }



    ::-ms-reveal {
        display: none;
    }

    .dialog-options-panel {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        background: var( --telekom-color-background-canvas);
        border-top: var( --telekom-line-weight-standard) solid var( --telekom-color-ui-subtle);
        box-shadow: #000000 0 0 var(--offset) 0, #000000 0 var(--offset) 4px 0, #000000 0 4px 12px 0;
        box-shadow: rgba(0, 0, 0, 0.24) 0 0 var(--offset) 0, rgba(0, 0, 0, 0.24) 0 var(--offset) 4px 0, rgba(0, 0, 0, 0.26) 0 4px 12px 0;
    }
    /* TextBox Hint */
    .helper-text,
    .text-field-group .helper-text {
        align-items: center;
        column-gap: 5px;
        display: flex;
        font-size: 0.75rem;
        padding-top: 0.5rem;
    }

    .text-field-group .info {
        color: var( --telekom-color-text-and-icon-functional-informational );
    }

    .text-field-group .warning {
        color: var( --telekom-color-functional-warning-standard);
    }

    .text-field-group .error {
        color: var( --telekom-color-functional-danger-standard);
    }

    .text-field-group .success {
        color: var( --telekom-color-functional-success-standard);
    }

    .text-field-control.info {
        border-color: var( --telekom-color-text-and-icon-functional-informational );
        color: var(--telekom-color-text-and-icon-standard);
    }

    .text-field-control.warning {
        border-color: var( --telekom-color-functional-warning-standard);
        color: var(--telekom-color-text-and-icon-standard);
    }

    .text-field-control.error {
        border-color: var( --telekom-color-functional-danger-standard);
        color: var(--telekom-color-text-and-icon-standard);
    }

    .text-field-control.success {
        border-color: var( --telekom-color-functional-success-standard);
        color: var(--telekom-color-text-and-icon-standard);
    }

    .text-field-control.info:hover {
        border-color: var( --telekom-color-text-and-icon-functional-informational );
    }

    .text-field-control.warning:hover {
        border-color: var( --telekom-color-functional-warning-standard);
    }

    .text-field-control.error:hover {
        border-color: var( --telekom-color-functional-danger-standard);
    }

    .text-field-control.success:hover {
        border-color: var( --telekom-color-functional-success-standard);
    }

    .text-field-control.warning:hover {
        background: var(--scl-color-background-light);
        border: 1px solid var( --telekom-color-functional-warning-standard) !important;
    }

    .text-field-group .helper-text:focus {
        background: var(--telekom-color-ui-white);
        outline: solid 2px var(--telekom-color-functional-focus-inverted);
        outline-offset: 1px;
    }

    .dialog-options-panel .container-liquid {
        padding-left: 0;
        padding-right: 0;
    }

        .dialog-options-panel .container-liquid .col-l-6:first-of-type {
            padding-left: 0;
        }

        .dialog-options-panel .container-liquid .col-l-6:last-of-type {
            padding-right: 0;
        }

    /* Border to help with accessibility */
    .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus {
        border: 2px solid var(--telekom-color-primary-standard);
    }

/***
* steam-switch 
***/
    .steam-switch-label-wrapper {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .steam-switch {
        position: relative;
        display: inline-block;
        cursor: pointer;
        width: 2.625rem;
        min-width: 2.625rem;
        height: 1.5rem;
        offset: var(--offset);
        vertical-align: middle;
    }

        .steam-switch:focus-visible {
            outline: solid 2px var(--telekom-color-functional-focus-inverted);
            border-radius: calc(5 * var(--telekom-radius-standard));
            outline-offset: 2px;
        }

        .steam-switch .steam-switch-toggle {
            position: absolute;
            cursor: pointer;
            background: var(--telekom-color-ui-faint);
            border-radius: calc(5* var(--rz-border-radius));
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
            z-index: 1;
        }

        .steam-switch.steam-disabled .steam-switch-toggle {
            background: var(--telekom-color-ui-disabled);
        }

        .steam-switch.steam-disabled .steam-switch-toggle,
        .steam-switch.steam-disabled .steam-switch-iotext {
            color: var(--telekom-color-text-and-icon-disabled);
            cursor: not-allowed;
        }

        .steam-switch .steam-switch-toggle .steam-switch-thumb {
            height: 1.125rem;
            width: 1.125rem;
            margin-top: 0.175rem;
            margin-inline-start: var(--offset);
            border-radius: calc(5 * var(--rz-border-radius));
            background-color: white;
            transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
            transition-duration: var(--telekom-motion-duration-immediate);
            box-shadow: #000000 0 0 var(--offset) 0, #000000 0 var(--offset) 4px 0, #000000 0 4px 12px 0;
            box-shadow: rgba(0, 0, 0, 0.24) 0 0 var(--offset) 0, rgba(0, 0, 0, 0.24) 0 var(--offset) 4px 0, rgba(0, 0, 0, 0.26) 0 4px 12px 0;
        }

        .steam-switch.steam-disabled .steam-switch-toggle .steam-switch-thumb {
            background: var(--telekom-color-ui-faint);
            box-shadow: var(--telekom-shadow-raised-standard);
        }

        .steam-switch.steam-switch-checked .steam-switch-toggle {
            background-color: var(--telekom-color-primary-standard);
        }

            .steam-switch.steam-switch-checked .steam-switch-toggle .steam-switch-thumb {
                margin-left: 0.2rem;
                transform: translateX(1.2rem);
            }

        .steam-switch .steam-switch-iotext {
            position: absolute;
            color: var(--telekom-text-style-small-bold);
            top: 0;
            left: 0;
            height: 1.5rem;
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: calc(50% - var(--offset));
            font: var(--telekom-text-style-small-bold);
            line-height: var(--telekom-typography-line-spacing-none);
            transition-timing-function: cubic-bezier(0.4, 0, 0, 1);
            transition-duration: 100ms;
            z-index: 2;
        }

        .steam-switch.steam-switch-checked .steam-switch-iotext {
            margin-left: var(--offset);
            color: var(--telekom-color-text-and-icon-white-standard);
        }

.steam-switch .steam-switch-label {
    background: transparent;
}

/***
* switch in aligned table context 
***/

td[style*="text-align:center"] > span.rz-cell-data .steam-switch-label-wrapper {
    display: flex;
    justify-content: center;
}

td[style*="text-align:left"] > span.rz-cell-data .steam-switch-label-wrapper {
    display: flex;
    justify-content: left;
}

td[style*="text-align:right"] > span.rz-cell-data .steam-switch-label-wrapper {
    display: flex;
    justify-content: right;
}

/***
* radzen-split-button 
***/

    .rz-splitbutton-menu {
        border-width: 0;
        margin-top: -1px;
    }

    .rz-button.rz-primary.rz-splitbutton-menubutton {
        margin-left: 0;
        border-left-width: 0;
    }

    .rz-splitbutton-menu .rz-menuitem {
        border-bottom-width: 0;
    }

        .rz-splitbutton-menu .rz-menuitem:first-child {
            border-top-left-radius: var(--rz-button-border-radius);
            border-top-right-radius: var(--rz-button-border-radius);
        }

        .rz-splitbutton-menu .rz-menuitem:last-child {
            border-bottom-width: 1px;
            border-bottom-left-radius: var(--rz-button-border-radius);
            border-bottom-right-radius: var(--rz-button-border-radius);
        }
    
    .steam-helper-hidden-accessible {
        opacity: 0;
        height: 0;
    }

/*****
Steam Radzen Grid
*****/
    .rz-data-grid .rz-group-header {
        display: block;
        height: 2.75rem;
    }

    .rz-data-grid.rz-has-pager .rz-group-header {
        border: 0;
        background-color: var(--background);
        height: auto;
    }

    .rz-data-grid .rz-pager-pages .rz-pager-page {
        font-size: 0.75rem;
    }

    .rz-pager-element .rzi {
        font-size: 1.25rem;
        height: 1rem;
        width: 1rem;
        line-height: 1.25rem;
    }

    .rz-data-grid .rz-pager-element:not(.rz-state-active):not(.rz-state-disabled) {
        background: var(--background);
        border: 1px solid var(--scl-color-background-darker);
        border-radius: var(--telekom-radius-standard);
    }

    .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before {
        content: "expand_more";
    }

    .rz-multiselect-items-wrapper {
        max-height: 20rem !important;
    }

    .rz-multiselect-header:hover {
        border-top-right-radius: var(--rz-border-radius);
        border-top-left-radius: var(--rz-border-radius);
        color: var(--background);
        background-color: var(--telekom-color-primary-standard);
    }

    .rz-multiselect-item.rz-state-highlight:hover,
    .rz-multiselect-items li.rz-state-highlight:hover {
        color: var(--background);
        background-color: var(--telekom-color-primary-standard);
    }

/*****
checkbox
*****/
    .rz-chkbox-box {
        border-radius: var(--telekom-radius-small);
        border-width: 1px;
        border-color: rgba(0, 0, 0, 0.44);
    }

        .rz-chkbox-box.rz-state-active, .rz-chkbox-box .rzi-check {
            background: var(--telekom-color-primary-standard);
            color: var(--background);
        }

    .rz-multiselect-header {
        border-bottom: 1px solid var(--scl-color-background-darker);
    }

        .rz-multiselect-header:hover, .rz-multiselect-item:hover {
            cursor: pointer;
        }

    .rz-state-highlight, .rz-state-highlight:focus, .rz-multiselect-items li.rz-state-highlight {
        background-color: var(--background);
    }

/*******
steam tags
*********/

.steam-tag-list {
    display: flex;
    flex-wrap: wrap;
    line-height: 2.5rem;
    column-gap: 0.5rem;
}

    .steam-tag button.rz-button {
        padding-right: 0.25rem;
    }

    .steam-tag:hover button.rz-button {
        background-color: var(--rz-secondary);
    }

    .steam-tag button button.rz-button:hover {
        background-color: var(--background);
        color: var(--telekom-color-primary-standard);
        border: none;
    }

    .steam-tag .rz-button.rz-secondary.rz-shade-default {
        background-color: var(--background);
    }

    .steam-tag button button.rz-button-icon-only {
        border: none;
    }

.steam-tag.strikeoutEntry .rz-button:not(.rz-button-icon-only) > .rz-button-box {
    text-decoration: line-through;
}

/***
* standalone helper-text
***/
.helper-text {
    font-size: 0.75rem;
}

/***
* Radzen button styles
***/
.rz-button.rz-light:focus-visible, .rz-calendar-view-container:focus-visible  {
    outline-color: var(--telekom-color-primary-standard);
}