/**
 * @copyright Marktplatz Design und Software GmbH
 * @author Marouane Edghoughi <med@marktplatz-agentur.de>
 * @date 07.01.2025 12:00
 * @description: This file is intended to hold the required styles in order to override Radzen components
 */

/* Font faces declaration */
@font-face {
    font-family: 'Lato-Light';
    src: url('fonts/Lato-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato-Regular';
    src: url('fonts/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato-Bold';
    src: url('fonts/Lato-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Light mode palette */
.light-theme {
    --mp-app-background: #F2F3F5;
    --mp-component-background: #FFFFFF;
    --mp-component-border: #D9E1EA;
    --mp-element-background: #E8E8E8;
    --mp-primary: #0064D3;
    --mp-primary-hover: #1a74d7;
    --mp-accent: #5F5F5F;
    --mp-error: #CA3838;
    --mp-success: #237D21;
    --mp-warning: #fe9803;
    --mp-hinweis: #DEFFFF;
    --mp-hinweis-invert: #007E7E;
    --mp-text: #23252A;
    --mp-text-invert: #FFFFFF;
    --mp-text-disabled: #6f7888;
    
    /* border radius */
    --corner-radius-small: 6px;
    
    /* table */
    --mp-table-header: #23252A;
    --mp-table-row-even: #D9E1EA;
    --mp-table-row-odd: #FFFFFF;
    --mp-table-row-selectable: #cce0f6;
    --mp-table-row-edit: #0064D3;
    
    /* html editor */
    --mp-editor-button: ;
    --mp-editor-button-content: ;
    --mp-editor-button-content-disabled: ;
    
    /* input checkbox borer */
    --mp-input-checkbox: #8b96a5;
    
    /* default transition */
    --mp-default-transition: all 0.3s ease-in-out;
}

/* Dark mode palette */
.dark-theme {
    --mp-app-background: #23252A;
    --mp-component-background: #313940;
    --mp-component-border: #374652;
    --mp-element-background: #374652;
    --mp-primary: #1DAEFF;
    --mp-primary-hover: #007bce;
    --mp-accent: #E4E4E4;
    --mp-error: #FF5E5E;
    --mp-success: #67F87F;
    --mp-warning: #fec168;
    --mp-hinweis: #005E5E;
    --mp-hinweis-invert: #5DFFFF;
    --mp-text: #F2F3F5;
    --mp-text-invert: #374652;
    --mp-text-disabled: #8b96a5;

    /* border radius */
    --corner-radius-small: 6px;

    /* table */
    --mp-table-header: #1DAEFF;
    --mp-table-row-even: #374652;
    --mp-table-row-odd: #313940;
    --mp-table-row-selectable: #0c4666;
    --mp-table-row-edit: #FFFFFF;

    /* input checkbox borer */
    --mp-input-checkbox: #F2F3F5;

    /* default transition */
    --mp-default-transition: all 0.3s ease-in-out;
}

:root:has(.light-theme) {
    background-color: #F2F3F5 !important;
    transition: all 0.3s ease-in-out !important;
}
:root:has(.dark-theme) {
    background-color: #23252A !important;
    transition: all 0.3s ease-in-out !important;
}

.rz-layout {
    height: 100% !important;
}

/* set backgrounds */
.rz-layout,
.rz-body,
.rz-footer {
    background-color: var(--mp-app-background) !important;
    transition: var(--mp-default-transition) !important;
}

/* header styling */
.rz-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center;
    height: 70px !important;
    padding: 0 20px 0 0 !important;
    flex-wrap: wrap;
    background-color: var(--mp-component-border) !important;
    border-bottom: 2px solid var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}

.rz-header .rz-sidebar-toggle {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 70px !important;
    height: 70px !important;
    color: #FFFFFF !important;
    background-color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-header .rz-sidebar-toggle:hover {
    border-radius: 0 !important;
    background-color: var(--mp-primary-hover) !important;
}

.rz-header .logo {
    height: 40px !important;
    width: auto !important;
    pointer-events: none !important;
}
.rz-header .state-logo {
    height: 40px !important;
    width: auto !important;
    pointer-events: none !important;
}
.rz-header .rz-text-body2 {
    margin-block-start: unset !important;
    margin-block-end: unset !important;
}

.rz-header .switch-mode {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    align-items: center !important;
}
.rz-header .switch-mode .rz-text-body1 {
    margin-block-start: unset !important;
    margin-block-end: unset !important;
}
.rz-header .switch-mode .rz-button {
    color: var(--mp-primary) !important;
}
.rz-header .switch-mode .rz-button:hover .rz-button-text {
    transition: var(--mp-default-transition) !important;
    text-decoration: underline !important;
}

/* sidebar styling */
.rz-sidebar {
    background-color: var(--mp-app-background) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-sidebar .rz-panel-menu {
    background-color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper {
    background-color: unset !important;
}

.rz-panel-menu .rz-navigation-item {
    border-block-end: unset !important;
    border-radius: 0 !important;
}
.rz-panel-menu .rz-navigation-item .rz-navigation-item-text {
    font-size: 1rem;
    color: #F2F3F5 !important;
}

.rz-panel-menu .rz-navigation-item .rz-navigation-item-link {
    background: unset !important;
    background-color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-panel-menu .rz-navigation-item .rz-navigation-item-link:hover {
    background-color: var(--mp-primary-hover) !important;
}
.rz-panel-menu .rz-navigation-item .rz-navigation-item-link.active {
    background-color: var(--mp-primary-hover) !important;
}
.rz-panel-menu .rz-navigation-item .rz-navigation-item-link i {
    color: #F2F3F5 !important;
}


.component-bg {
    background-color: var(--mp-component-background) !important;
    transition: var(--mp-default-transition) !important;
}

/* login container section */
.login-container {
    width: 100%;
    max-width: 1100px;
    overflow: hidden !important;
    border: 2px solid var(--mp-component-border) !important;
    transition: var(--mp-default-transition) !important;
}
.login-container .rz-form-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.login-container .rz-form-row .rz-label,
.login-container .rz-form-row .rz-form-input-wrapper {
    flex: 0 !important;
}

.rz-link,
.rz-link:focus {
    color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-link:hover {
    color: var(--mp-primary-hover) !important;
}

.login-container .register  {
    padding: 0 !important;
    background-color: transparent !important;
}
.login-container .rz-register .rz-button:not(.rz-state-disabled):not(:active):hover {
    background-image: unset !important;
    background-size: unset !important;
}
.login-container .rz-register .rz-button .rz-button-text {
    color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.login-container .rz-register .rz-button .rz-button-text:hover {
    color: var(--mp-primary-hover) !important;
}

.login-container .login-overlay-bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45) url("../images/jb-login-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: overlay;
}

.login-container .logo {
    width: 70%;
    height: auto;
    pointer-events: none;
}

/* styling footer */
.rz-footer {
    padding: 2rem !important;
}
.rz-footer .login-signet-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.rz-footer .login-signet-wrapper .login-signet {
    width: 70px !important;
    height: auto !important;
    pointer-events: none;
}


/* set typography style */
* {
    font-family: 'Lato-Regular';
}

.rz-text-h1,
.rz-text-h2,
.rz-text-h3 {
    font-family: 'Lato-Bold' !important;
    outline: none !important;
    transition: var(--mp-default-transition) !important;
}

.rz-text-h1 {
    position: relative;
    font-size: 2.5rem;
    color: var(--mp-text) !important;
}
.rz-text-h1:after {
    position: absolute;
    content: '';
    width: 60px;
    height: 4px;
    background-color: var(--mp-primary);
    left: 0;
    bottom: -8px;
    transition: var(--mp-default-transition) !important;
}

.rz-text-h2 {
    font-size: 1.8rem;
}

.rz-text-h3 {
    font-size: 1.5rem;
    font-weight: 400;
}

/* disable ripple effect */
.rz-ripple {
    animation: none !important;
    transition: none !important;
}

/* style radzen buttons */
.rz-button:not(.rz-datepicker-trigger) {
    padding: 16px 30px !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
    box-shadow: none !important;
}
.rz-button .rz-button-box .rz-button-text {
    font-size: 1rem !important;
}

.rz-button.rz-primary {
    color: var(--mp-text-invert) !important;
    background-color: var(--mp-primary) !important;
}
.rz-button.rz-secondary,
.rz-button.rz-success {
    color: var(--mp-text-invert) !important;
    background-color: var(--mp-success) !important;
}
.rz-button.rz-danger {
    color: var(--mp-text-invert) !important;
    background-color: var(--mp-error) !important;
}

.rz-button.rz-warning {
    color: var(--mp-text-invert) !important;
    background-color: var(--mp-warning) !important;
}

.rz-button.rz-variant-text {
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--mp-text) !important;
    background-color: transparent !important;
    transition: var(--mp-default-transition) !important;
}

.rz-button.rz-state-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* search section styling */
.search-accordion {
    margin-bottom: 40px;
}
.search-accordion > div:first-child {
    border-radius: var(--corner-radius-small) var(--corner-radius-small) 0 0 !important;
}
.search-accordion > div:only-child {
    border-radius: var(--corner-radius-small) !important;
}

.search-accordion .rz-accordion-header {
    background-color: var(--mp-primary) !important;
}
.search-accordion .rz-accordion-header a {
    color: #FFFFFF !important;
}

.search-accordion .rz-accordion-content {
    background-color: var(--mp-component-border) !important;
    border-radius: 0 0 var(--corner-radius-small) var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}

.search-accordion .rz-row .rz-col {
    padding: 20px !important;
    background-color: var(--mp-component-background) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}

.search-accordion .search-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
}

/* content container */
.content-container {
    padding: 20px !important;
    background-color: var(--mp-component-background) !important;
    border: 1px solid var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}

/* radzen form components */
.rz-label {
    color: var(--mp-text) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    transition: var(--mp-default-transition) !important;
}

.rz-text-body1.required-validator {
    margin-bottom: 0 !important;
    font-size: 0.90rem !important;
    color: var(--mp-hinweis-invert) !important;
    transition: var(--mp-default-transition) !important;
}

.rz-textbox,
.rz-dropdown,
.rz-datepicker .rz-inputtext,
.rz-numeric .rz-numeric-input {
    height: unset !important;
    padding: 8px !important;
    background-color: var(--mp-app-background) !important;
    border-width: 2px !important;
    border-color: var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-textarea {
    padding: 8px !important;
    background-color: var(--mp-app-background) !important;
    border-width: 2px !important;
    border-color: var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-textbox:disabled,
.rz-textarea:disabled,
.rz-dropdown:disabled,
.rz-datepicker .rz-inputtext:disabled,
.rz-numeric:has(.rz-numeric-input:disabled) {
    color: var(--mp-text-disabled) !important;
}
.rz-textbox:focus,
.rz-textbox:focus,
.rz-dropdown:focus,
.rz-datepicker .rz-inputtext:focus,
.rz-numeric:has(.rz-numeric-input:focus) {
    border-color: var(--mp-primary) !important;
}
.rz-textbox:not(:disabled):not(.rz-state-disabled):focus,
.rz-textarea:not(:disabled):not(.rz-state-disabled):focus,
.rz-dropdown:not(:disabled):not(.rz-state-disabled):focus,
.rz-datepicker .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
.rz-numeric:not(:disabled):not(.rz-state-disabled):focus {
    box-shadow: unset !important;
    outline: unset !important;
    outline-offset: unset !important;
}

.rz-dropdown {
    cursor: pointer !important;
}

.rz-datepicker .rz-button {
    position: absolute !important;
    padding: 0 !important;
    inset-block-start: 50% !important;
    inset-inline-end: .625rem !important;
    transform: translateY(-50%);
}

.rz-numeric {
    height: unset !important;
    border: 2px solid var(--mp-component-border) !important;
    background-color: unset !important;
    transition: var(--mp-default-transition) !important;
}
.rz-numeric .rz-numeric-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    color: var(--mp-primary) !important;
    inset-inline-end: 10px !important;
}
.rz-numeric .rz-numeric-up {
    inset-block-start: 8px !important;
}
.rz-numeric .rz-numeric-down {
    inset-block-end: 8px !important;
}
.rz-numeric .rz-numeric-button .rzi {
    font-size: 22px !important;
}
.rz-numeric .rz-button:not(.rz-state-disabled):before {
    display: none !important;
}


/* radzen checkbox */
.rz-chkbox {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    border: 2px solid var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-chkbox:hover {
    border-color: var(--mp-primary) !important;
}
.rz-chkbox:has(.rz-state-active):hover {
    border-color: var(--mp-component-border) !important;
}

.rz-chkbox .rz-chkbox-box {
    width: 18px !important;
    height: 18px !important;
    margin: auto !important;
    box-shadow: unset !important;
    border-radius: 3px !important;
    border: unset !important;
    background-color: var(--mp-app-background) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-chkbox .rz-chkbox-box.rz-state-active {
    background-color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}

.rz-chkbox .rz-chkbox-box .rzi-check:before {
    transition: var(--mp-default-transition) !important;
}

.rz-chkbox .rz-chkbox-box:after,
.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled):after {
    display: none !important;
}

.rz-checkbox .rz-chkbox-label {
    color: var(--mp-text) !important;
    transition: var(--mp-default-transition) !important;
}

/* radzen radio */
.radio-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin: 5px;
    border: 1px solid var(--mp-input-checkbox);
    border-radius: 50%;
    transition: var(--mp-default-transition);
}
.radio-btn input {
    appearance: none !important;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    transition: var(--mp-default-transition);
}
.radio-btn:has(input:checked) {
    border: 1px solid var(--mp-primary);
}
.radio-btn input:after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--mp-primary);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: var(--mp-default-transition);
}
.radio-btn input:checked:after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* radzen radio button list */
.rz-radio-button-list-horizontal {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.rz-radio-btn {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
}
.rz-radio-btn .rz-radiobutton {
    width: 24px !important;
    height: 24px !important;
}

.rz-radio-btn .rz-radiobutton .rz-radiobutton-box {
    border-width: 1px !important;
}

.rz-radio-btn .rz-radiobutton .rz-radiobutton-box .rzi-circle-on {
    background-color: var(--mp-primary) !important;
    transition: background-color 0.3s ease-in-out !important;
}
.rz-radio-btn .rz-radiobutton .rz-radiobutton-box .rzi {
    width: 12px !important;
    height: 12px !important;
}
.rz-radio-btn .rz-radiobutton .rz-radiobutton-box::after {
    content: none !important;
    display: none !important;
}

.rz-radio-btn .rz-radiobutton-label {
    margin-block: unset !important;
    margin-inline: unset !important;
    cursor: pointer;
    align-self: center !important;
}

/* radzen switch */
.rz-switch {
    width: 48px !important;
    min-width: 48px !important;
    height: 28px !important;
    border: 2px solid var(--mp-component-border) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-switch .rz-switch-circle {
    inset-block-start: unset !important;
    inset-inline-start: unset !important;
    inset-inline-end: unset !important;
    inset-block-end: unset !important;
    box-shadow: unset !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--mp-component-background) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-switch .rz-switch-circle:before {
    width: 22px !important;
    height: 22px !important;
    inset-inline-start: unset !important;
    margin-block-start: unset !important;
    transform: translate(1px, -50%) !important;
    background: var(--mp-component-border) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-switch.rz-switch-checked .rz-switch-circle:before {
    transform: translate(calc(100% - 1px), -50%) !important;
    background: var(--mp-primary) !important;
}

.rz-switch .rz-switch-circle:hover:not(.rz-disabled):before,
.rz-switch.rz-switch-checked .rz-switch-circle:hover:not(.rz-disabled):before {
    box-shadow: unset !important;
}

/* radzen table */
.rz-datatable {
    border: 0 !important;
    border-radius: var(--corner-radius-small) !important;
}

.rz-grid-table thead th {
    background-color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-grid-table thead th:first-child {
    border-top-left-radius: var(--corner-radius-small) !important;
}
.rz-grid-table thead th:last-child {
    border-top-right-radius: var(--corner-radius-small) !important;
}

.rz-grid-table thead th>div:not(.rz-cell-filter) {
    padding: 10px !important;
}
.rz-grid-table thead th .rz-column-title,
.rz-grid-table thead th .rz-column-title .rz-link,
.rz-grid-table thead th .rz-column-title .rz-link:focus {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    padding-inline: unset !important;
    transition: var(--mp-default-transition) !important;
}

.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td,
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) td.rz-frozen-cell-left-inner::after,
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td.match-selectable-design::after {
    background-color: var(--mp-table-row-even) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td,
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) td.rz-frozen-cell-left-inner::after,
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td.match-selectable-design::after {
    background-color: var(--mp-table-row-odd) !important;
    transition: var(--mp-default-transition) !important;
}

.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight)>td.rz-frozen-cell-left:before,
.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight)>td.rz-frozen-cell-left-inner:before,
.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight)>td.rz-frozen-cell-right-inner:before {
    background-color: unset !important;
}

.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.match-selectable-design,
.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-right:after,
.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-right-inner:after {
    background-color: var(--mp-table-row-selectable) !important;
    transition: var(--mp-default-transition) !important;
}

.rz-selectable tbody tr.rz-data-row .rz-cell-data > .edit-remark {
    padding: 10px;
    margin-top: 10px;
    background-color: var(--mp-component-background);
    border-radius: var(--corner-radius-small);
    transition: var(--mp-default-transition);
}

.rz-grid-table .action-column {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
}

.rz-grid-table .rz-data-row .table-action-btn {
    padding: 0 !important;
    color: var(--mp-table-row-edit) !important;
    background-color: unset !important;
    transition: var(--mp-default-transition) !important;
}
.rz-grid-table .rz-data-row .table-action-btn:hover {
    color: var(--mp-primary-hover) !important;
    background-color: unset !important;
}
.rz-grid-table .rz-data-row .table-action-btn.delete {
    color: var(--mp-error) !important;
}
.rz-grid-table .rz-data-row .table-action-btn i {
    font-size: 2rem !important;
}

/*.rz-grid-table .rz-data-row .table-edit-btn,*/
/*.rz-grid-table .rz-data-row .table-delete-btn {*/
/*    padding: 0 !important;*/
/*}*/

.rz-grid-table .rz-data-row:last-of-type {
    border-radius: 0 0 var(--corner-radius-small) var(--corner-radius-small) !important;
}

.rz-pager {
    padding: 10px !important;
    background-color: var(--mp-app-background) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-pager .rz-dropdown {
    background-color: var(--mp-component-background) !important;
}

/* details view */
.details-view-control {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 20px !important;

    /* action bar transitions */
    transform: translateY(0) !important;
    transition: transform 0.3s ease-in-out !important;
}
.details-view-control .action-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
}
.details-view-control.sticky-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 10px !important;
    background-color: var(--mp-component-background) !important;
    border-radius: var(--corner-radius-small) !important;
    border: 1px solid var(--mp-component-border) !important;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;

    /* action bar transitions */
    transform: translateY(20px) !important;
}
/* unset overflow for parents in order to apply sticky positionning */
.rz-layout,
.rz-body,
.rz-tabview-panels,
.rz-tabview-panel {
    overflow: unset !important;
}

/* style tags (Radzen Chips) */
.rz-dropdown.rz-dropdown-chips {
    padding: 4px !important;
}
.rz-dropdown-chips .rz-chip {
    padding-inline: unset !important;
    padding-block: unset !important;
    padding: 10px !important;
    background-color: var(--mp-primary) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-dropdown-chips .rz-chip .rz-chip-text {
    color: var(--mp-text-invert) !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    transition: var(--mp-default-transition) !important;
}
.rz-dropdown-chips .rz-chip .rz-button {
    padding: unset !important;
    background-color: transparent !important;
}
.rz-dropdown-chips .rz-chip .rz-button i {
    color: var(--mp-text-invert) !important;
    transition: var(--mp-default-transition) !important;
}

/* style hinweis */
.hinweis {
    display: flex !important;
    padding: 20px !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 10px !important;
    background-color: var(--mp-hinweis) !important;
    border: 1px solid var(--mp-hinweis-invert) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.hinweis .rz-text-body1 {
    color: var(--mp-text) !important;
    transition: var(--mp-default-transition) !important;
}

/* style html editor */
.rz-html-editor {
    min-height: 350px !important;
    border: 2px solid var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-html-editor:focus-within {
    outline: unset !important;
    outline-offset: unset !important;
    border-color: var(--mp-primary) !important;
}
.rz-html-editor .rz-html-editor-toolbar {
    padding: 14px !important;
    border-bottom: 2px solid var(--mp-component-border) !important;
    background-color: var(--mp-component-border) !important;
    transition: var(--mp-default-transition) !important;
}

.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-button {
    cursor: pointer !important;
    background-color: var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-button i {
    color: var(--mp-text) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-button:disabled {
    cursor: not-allowed !important;
}
.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-button:disabled i {
    color: var(--mp-text-disabled) !important;
}

/* color picker */
.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker-trigger {
    cursor: pointer !important;
    background-color: var(--mp-component-border) !important;
}
.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-colorpicker {
    background-color: var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}

.rz-colorpicker-popup {
    border: 1px solid var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    background-color: var(--mp-component-background) !important;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

.rz-colorpicker-popup .rz-colorpicker-rgba .rz-color-box .rz-numeric {
    padding: 0 !important;
}
.rz-colorpicker-popup .rz-colorpicker-rgba .rz-color-box .rz-numeric button {
    display: none !important;
}

.rz-colorpicker-popup .rz-colorpicker-button button {
    padding: 8px 15px !important;
}
/* end color picker */

.rz-html-editor .rz-html-editor-content {
    padding: 14px !important;
    background-color: var(--mp-app-background) !important;
    transition: var(--mp-default-transition) !important;
}


/* style tabview navigation */
.rz-tabview-nav li:hover {
    color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-tabview-nav li:hover:after {
    background-color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-tabview-nav .rz-tabview-selected {
    color: var(--mp-primary) !important;
}
.rz-tabview-nav li.rz-tabview-selected:after {
    background-color: var(--mp-primary) !important;
}

.rz-tabview.rz-tabview-top>.rz-tabview-panels {
    border-top: 1px solid var(--mp-component-border);
    transition: var(--mp-default-transition);
}

/* style icons on nutzerverwalung table */
i.active {
    font-size: 28px !important;
    color: var(--mp-success) !important;
    transition: var(--mp-default-transition) !important;
}
i.inactive {
    font-size: 28px !important;
    color: var(--mp-error) !important;
    transition: var(--mp-default-transition) !important;
}

/* style checkbox list */
.checkbox-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}
.rz-checkbox-list-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.rz-checkbox {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}
.checkbox-list .rz-checkbox .rz-chkbox-template {
    color: var(--mp-text) !important;
    transition: var(--mp-default-transition) !important;
}
.checkbox-list .rz-button {
    padding: 5px !important;
    background-color: var(--mp-error) !important;
    transition: var(--mp-default-transition) !important;
}
.checkbox-list .rz-button .rz-button-box i {
    color: var(--mp-text-invert) !important;
    transition: var(--mp-default-transition) !important;
}

/* style notifications */
.rz-notification-icon.rzi-check {
    color: var(--mp-text-invert) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-notification-success .rz-notification-item {
    color: var(--mp-text-invert) !important;
    background-color: var(--mp-success) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-notification-error .rz-notification-item {
    color: var(--mp-text-invert) !important;
    background-color: var(--mp-error) !important;
    transition: var(--mp-default-transition) !important;
}

/* style dialogs */
.rz-dialog {
    background-color: var(--mp-component-background) !important;
    border: 1px solid var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
}
.rz-dialog .rz-dialog-titlebar {
    background-color: var(--mp-component-background) !important;
}
.rz-dialog .rz-dialog-titlebar .rz-dialog-titlebar-icon span {
    cursor: pointer;
}

/* setting pointer events to none prevents flickering on mouse leave */
/*.rz-tooltip {
    pointer-events: none !important;
}*/
.rz-tooltip .info-tooltip {
    font-size: 16px;
    white-space: normal !important; 
    word-break: break-word !important; 
    max-width: 400px;
    overflow-wrap: break-word !important;
    display: block;
    word-wrap: break-word; 
    word-break: break-word; 
    line-height: 1.5; 
}

/* style file elements */
.rz-datalist-content {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

.rz-datalist-data {
    padding: 14px !important;
    background-color: var(--mp-app-background) !important;
    border: 1px solid var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-datalist-data > li {
    padding: unset !important;
    margin: unset !important;
    border: unset !important;
    border-radius: unset !important;
    background-color: unset !important;
}

.rz-datalist-data .file-icon {
    display: flex !important;
    justify-content: center !important;
    width: 35px !important;
    height: auto !important;
}
.rz-datalist-data .file-icon svg {
    fill: var(--mp-primary) !important;
}

.rz-datalist-data .file-details {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.rz-datalist-data .file-details .file-name {
    color: var(--mp-text) !important;
    font-size: 1rem !important;
    font-family: 'Lato-Light' !important;
    transition: var(--mp-default-transition) !important;
}
.rz-datalist-data .file-details .file-size {
    color: var(--mp-text) !important;
    font-size: 0.8rem !important;
    transition: var(--mp-default-transition) !important;
}

.rz-datalist-data .file-details .file-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

.rz-datalist-data .file-details .file-actions .rz-button {
    padding: 0 !important;
    background-color: transparent !important;
    transition: var(--mp-default-transition) !important;
    cursor: pointer !important;
    border: none !important;
}
.rz-datalist-data .file-details .file-actions .rz-button .rz-button-box svg {
    width: 16px !important;
    height: 16px !important;
    transition: var(--mp-default-transition) !important;
}
.rz-datalist-data .file-details .file-actions .rz-button.delete .rz-button-box svg {
    fill: var(--mp-error) !important;
}
.rz-datalist-data .file-details .file-actions .rz-button.download .rz-button-box svg {
    fill: var(--mp-success) !important;
}

/* drag & drop dialog */
.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-content {
    margin-top: 20px !important;
}

.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-content .rz-fileupload-files {
    background-color: unset !important;
    padding: unset !important;
}

.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-content .rz-fileupload-files .rz-fileupload-row {
    padding: 14px !important;
    background-color: var(--mp-app-background) !important;
    border: 2px solid var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-content .rz-fileupload-files .rz-fileupload-row div:last-of-type {
    display: none !important;
}

.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-buttonbar {
    padding: 0 !important;
    background-color: var(--mp-app-background) !important;
    border: 2px solid var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-buttonbar:hover {
    border-color: var(--mp-primary) !important;
}
.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-buttonbar .rz-fileupload-choose {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 30px !important;
    height: 150px !important;
    background-color: unset !important;
    transition: var(--mp-default-transition) !important;
}
.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-buttonbar .rz-fileupload-choose input {
    width: 100%;
    height: 100%;
}
.rz-dialog .rz-dialog-content .rz-fileupload .rz-button {
    font-size: 0.95rem !important;
}

.text-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*-webkit-line-clamp: 3;*/ /* Limit to 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    height: auto;
}

.text-preview-bemerkungen {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    height: auto;
}