:root {
    --main-color: rgb(122, 79, 207);
    --secondary-color: rgb(50, 52, 53);
    --gray-color: rgb(172, 172, 172);

    --mdc-theme-primary: var(--main-color);
    --mdc-theme-on-primary: #ffffff;

    --mdc-theme-secondary: var(--secondary-color);
    --mdc-theme-on-secondary: #ffffff;

    --mdc-switch-track-color: var(--gray-color);
    --mdc-switch-selected-track-color: var(--gray-color);
    --mdc-switch-selected-thumb-color: var(--gray-color);
    --mdc-switch-selected-hover-color: var(--gray-color);
    --mdc-switch-selected-pressed-color: var(--gray-color);
    --mdc-switch-selected-hover-color: var(--gray-color);

    --mdc-text-field-label-ink-color: var(--main-color);
    --mdc-text-field-label-floating-color: var(--main-color);
    --mdc-text-field-ink-color: var(--main-color);
    --mdc-text-field-outline-color: var(--main-color);
}

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

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

@font-face {
    font-family: 'Roboto Mono';
    src: url('/fonts/roboto-mono/RobotoMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('/fonts/roboto-mono/RobotoMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

body, html {
    font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

button {
    font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)) !important;
    color: rgba(0, 0, 0, 0.87);
}

.sideBySideNoGap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sideBySide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.sideBySideAttached {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    max-width: fit-content;
}

.mdc-dialog .mdc-dialog__surface{
    width: auto; 
    max-width: 80vw;
    overflow-x: hidden;
}

.mdc-text-field--focused .mdc-floating-label {
    color: var(--main-color) !important; /* Für schwebende Labels beim Fokus */
}
.mdc-select--focused .mdc-floating-label {
    color: var(--main-color) !important; /* Für schwebende Labels bei Drop-Downs */
}

.mdc-menu {
    max-height: var(--mdc-menu-max-height) !important;
    overflow-y: auto !important;
}

.mdc-tab__text-label { /* Disable UPPER-case text in Tabs */
    text-transform: none !important;
}

.smui-accordion .smui-accordion__panel > .smui-accordion__header .smui-accordion__header__title {
    line-height: 1.5 !important;
    height: 50px !important;
}
.smui-accordion .smui-accordion__header__title {
    display: flex !important;
    align-items: center !important;
}
.smui-accordion .smui-accordion__panel.smui-accordion__panel--open>.smui-paper__content {
    height: auto;
    padding: 0px 15px 10px;
}
.smui-paper {
    padding: 10px 16px;
}

*, *::before, *::after {
    box-sizing: inherit;
}