/**
 * @copyright Marktplatz Design und Software GmbH
 * @author Marouane Edghoughi <med@marktplatz-agentur.de>
 * @date 17.10.2024 12:00
 * @description: This file contains the global styles for the Marktplatz application.
 * It defines color palettes for light and dark themes, custom font faces,
 * and styles for various MudBlazor components to ensure a consistent look and feel.
 */

/* 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;
}

:root {
    /* border radius */
    --mp-border-radius-small: 6px;
    --mp-border-radius-large: 20px;

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

/*  ===============================   */
/*       Default Color Palettes       */
/*  ===============================   */

/* Light mode palette */
.light-theme-default {
    --mp-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;
    
    /* sidebar */
    --mp-sidebar-bg: #FFFFFF;
    --mp-sidebar-text: #23252A;
    --mp-sidebar-link: #0064D3;
    
    /* texts */
    --mp-text: #23252A;
    --mp-text-invert: #FFFFFF;
    --mp-text-disabled: #6f7888;

    /* table */
    --mp-table-header-text: var(--mp-text-invert);
    --mp-table-header-bg: var(--mp-primary);
    --mp-table-body-text: #2D3035;
    --mp-table-odd-row-bg: #FFFFFF;
    --mp-table-even-row-bg: #D9E1EA;

    /* html editor */
    --mp-editor-button: ;
    --mp-editor-button-content: ;
    --mp-editor-button-content-disabled: ;

    /* input checkbox borer */
    --mp-input-checkbox: #8b96a5;
}

/* Dark mode palette */
.dark-theme-default {
    --mp-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;
    
    /* sidebar */
    --mp-sidebar-bg: #1b1d20;
    --mp-sidebar-text: #F2F3F5;
    --mp-sidebar-link: #1DAEFF;
    
    /* texts */
    --mp-text: #F2F3F5;
    --mp-text-invert: #374652;
    --mp-text-disabled: #8b96a5;

    /* table */
    --mp-table-header-text: var(--mp-text-invert);
    --mp-table-header-bg: var(--mp-primary);
    --mp-table-body-text: #E4E4E4;
    --mp-table-odd-row-bg: #313940;
    --mp-table-even-row-bg: #374652;

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

/*  ==============================   */
/*       Custom Color Palettes       */
/*  ==============================   */

/* Light mode palette */
.light-theme {
    --mp-background: #F2F3F5;
    --mp-component-background: #FFFFFF;
    --mp-component-border: #D8E0E8;
    --mp-element-background: #E9EEF2;
    --mp-primary: #085080;
    --mp-primary-hover: #105888;
    --mp-accent: #3C506E;
    --mp-error: #CA3838;
    --mp-success: #237D21;
    --mp-warning: #fe9803;

    --mp-hinweis: #E6F2F5;
    --mp-hinweis-invert: #085080;

    /* sidebar */
    --mp-sidebar-bg: #FFFFFF;
    --mp-sidebar-text: #23252A;
    --mp-sidebar-link: #085080;

    /* texts */
    --mp-text: #23252A;
    --mp-text-invert: #FFFFFF;
    --mp-text-disabled: #6f7888;

    /* table */
    --mp-table-header-text: var(--mp-text-invert);
    --mp-table-header-bg: var(--mp-primary);
    --mp-table-body-text: #2D3035;
    --mp-table-odd-row-bg: #FFFFFF;
    --mp-table-even-row-bg: #EEF3F6;

    /* html editor */
    --mp-editor-button: ;
    --mp-editor-button-content: ;
    --mp-editor-button-content-disabled: ;

    /* input checkbox borer */
    --mp-input-checkbox: #8B96A5;
}

/* Dark mode palette */
.dark-theme {
    --mp-background: #1D232A;
    --mp-component-background: #26313A;
    --mp-component-border: #32414C;
    --mp-element-background: #2F3B45;
    --mp-primary: #4FB3C8;
    --mp-primary-hover: #6CC4D6;
    --mp-accent: #A8D0D8;
    --mp-error: #FF5E5E;
    --mp-success: #67F87F;
    --mp-warning: #fec168;
    --mp-hinweis: #0E3B44;
    --mp-hinweis-invert: #A8D0D8;

    /* sidebar */
    --mp-sidebar-bg: #161B20;
    --mp-sidebar-text: #F2F3F5;
    --mp-sidebar-link: #4FB3C8;

    /* texts */
    --mp-text: #F2F3F5;
    --mp-text-invert: #1D232A;
    --mp-text-disabled: #8b96a5;

    /* table */
    --mp-table-header-text: var(--mp-text-invert);
    --mp-table-header-bg: var(--mp-primary);
    --mp-table-body-text: #E4E4E4;
    --mp-table-odd-row-bg: #26313A;
    --mp-table-even-row-bg: #2F3B45;

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

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}

.full-height-layout {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

/* Footer - Marktplatz Signet */
.mp-footer-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 20px !important;
    margin-top: 40px !important;
}
.mp-footer-container .theme-logo {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    
}
.mp-footer-container .theme-logo.fade {
    opacity: 0;
}

/* Set text colors */
.mud-typography-default,
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-body1,
.mud-typography-body2 {
    color: var(--mp-text) !important;
    transition: var(--mp-default-transition) !important;
}

/* Mud typography styling */
.mud-typography-h1 {
    position: relative;
    margin-bottom: 18px !important;
}
.mud-typography-h1:after {
    position: absolute;
    content: '';
    width: 60px;
    height: 4px;
    background-color: var(--mp-primary);
    left: 0;
    bottom: -8px;
    transition: var(--mp-default-transition) !important;
}

/* Customize app background */
.mud-main-content {
    /*height: 100% !important;*/
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}

/* App Bar */
.mud-appbar {
    color: var(--mp-text) !important;
    background-color: var(--mp-element-background) !important;
    border-bottom: 4px solid var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-appbar .mud-icon-button svg {
    fill: var(--mp-sidebar-text) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-appbar .appbar-menu-btn {
    margin-right: 20px !important;
    width: 64px !important;
    height: 100% !important;
    border-radius: unset !important;
    background-color: var(--mp-sidebar-bg) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-appbar .mud-toolbar-gutters {
    padding-left: 0 !important;
}
.mud-appbar .app-signet {
    margin-right: 10px;
}

.mud-appbar .switch-theme {
    font-weight: bold !important;
    color: var(--mp-primary) !important;
    cursor: pointer;
    transition: var(--mp-default-transition) !important;
}
.mud-appbar .switch-theme:hover {
    text-decoration: underline;
}

/* Add border radius to culture flags */
.language-selector img,
.language-selector svg,
.language-popover img {
    border-radius: 3px !important;
}

/* Klasse zum Deaktivieren von Interaktion / Drag */
.mp-no-interaction {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-user-drag: none !important; /* WebKit */
    user-drag: none !important;          /* Legacy */
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: default !important;
}

/* Sicherstellen, dass Bilder / Links innerhalb nicht gezogen werden (WebKit + Klarheit) */
.mp-no-interaction img,
.mp-no-interaction a {
    -webkit-user-drag: none !important;
    user-drag: none !important;
    pointer-events: none !important; /* optional: verhindert Klicks auch auf Kindern */
    draggable: false; /* nur als Hinweis; nicht von CSS umgesetzt */
}

/*  =============================   */
/*       Component: Sidebar         */
/*  =============================   */

.mud-drawer {
    color: var(--mp-sidebar-text) !important;
    background-color: var(--mp-sidebar-bg) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-drawer .mud-drawer-content .mud-nav-item svg {
    fill: var(--mp-sidebar-text) !important;
    transition: var(--mp-default-transition) !important;
}

.mud-drawer .mud-drawer-content .mud-nav-item:hover .mud-nav-link {
    color: var(--mp-sidebar-link) !important;
    transition: all 0.2s ease-in-out !important;
}
.mud-drawer .mud-drawer-content .mud-nav-item:hover svg {
    fill: var(--mp-sidebar-link) !important;
    transition: all 0.2s ease-in-out !important;
}

.mud-drawer .mud-drawer-content .mud-nav-item .mud-nav-link.active {
    color: var(--mp-sidebar-link) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-drawer .mud-drawer-content .mud-nav-item .mud-nav-link.active svg {
    fill: var(--mp-sidebar-link) !important;
}

    /* Customize MudGrid => used as Component Container */
.mud-paper:not(.mud-popover):not(.mud-picker-inline-paper):not(.mud-picker.mud-picker-paper) {
    padding: 20px !important;
    background-color: var(--mp-component-background) !important;
    border: 1px solid var(--mp-component-border) !important;
    border-radius: var(--mp-border-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}

.mud-paper:not(.mud-popover):not(.mud-picker-inline-paper):not(.mud-picker.mud-picker-paper).login-wrapper {
    padding: 40px !important;
    border: 2px solid var(--mp-component-border) !important;
    border-radius: 20px !important;
    box-shadow: 0px 508px 142px 0px rgba(0, 0, 0, 0.00), 0px 325px 130px 0px rgba(0, 0, 0, 0.01), 0px 183px 110px 0px rgba(0, 0, 0, 0.03), 0px 81px 81px 0px rgba(0, 0, 0, 0.05), 0px 20px 45px 0px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}
.mud-paper:not(.mud-popover):not(.mud-picker-inline-paper):not(.mud-picker.mud-picker-paper).login-wrapper.no-padding {
    padding: unset !important;
}

/* Login overlay */
.login-wrapper .login-overlay {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 40px !important;
    background-color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}

/*  =============================   */
/*      Component: MudTable         */
/*  =============================   */

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

/*  table toolbar   */
.mud-table .mud-table-toolbar {
    border-top-left-radius: var(--mp-border-radius-small) !important;
    border-top-right-radius: var(--mp-border-radius-small) !important;
    background-color: var(--mp-element-background) !important;
    transition: var(--mp-default-transition) !important;
}

/*  table header    */
.mud-table .mud-table-head {
    overflow: hidden !important;
    background-color: var(--mp-table-header-bg) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table .mud-table-head .mud-table-cell:first-child {
    border-top-left-radius: var(--mp-border-radius-small) !important;
}
.mud-table .mud-table-head .mud-table-cell:last-child {
    border-top-right-radius: var(--mp-border-radius-small) !important;
}
.mud-table .mud-table-head tr th {
    color: var(--mp-table-header-text) !important;
    font-family: 'Lato-Bold';
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table .mud-table-head tr th .mud-icon-button {
    color: var(--mp-table-header-text) !important;
    transition: var(--mp-default-transition) !important;
}

/*  activity state indicator    */
.mud-table-root .mud-table-head .mud-table-cell.row-state-header {
    width: 10px;
}
.mud-table-root .mud-table-body .mud-table-cell.row-state-wrapper {
    position: relative;
    width: 10px;
}
.mud-table-root .mud-table-body .mud-table-cell.row-state-wrapper .row-state {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 6px;
    height: 95%;
    transition: var(--mp-default-transition);
}
.mud-table-root .mud-table-body .mud-table-cell.row-state-wrapper .row-state.active {
    background-color: var(--mp-success);
}
.mud-table-root .mud-table-body .mud-table-cell.row-state-wrapper .row-state.inactive {
    background-color: var(--mp-error);
}
.mud-table-root .mud-table-body .mud-table-cell.row-state-wrapper .row-state.row-selected {
    background-color: var(--mp-primary);
}

/*  table body text */
.mud-table-root .mud-table-body .mud-table-cell {
    color: var(--mp-table-body-text) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table-root .mud-table-body .mud-table-cell:first-child .mud-icon-button {
    color: var(--mp-table-body-text) !important;
    transition: var(--mp-default-transition) !important;
}

/*  table rows styling  */
.mud-table.mud-table-striped .mud-table-container
.mud-table-root .mud-table-body .mud-table-row:nth-child(odd) {
    background-color: var(--mp-table-odd-row-bg) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table-hover.mud-table-striped .mud-table-container
.mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd):hover {
    filter: brightness(0.95);
    cursor: pointer;
}

.mud-table.mud-table-striped .mud-table-container
.mud-table-root .mud-table-body .mud-table-row:nth-child(even) {
    background-color: var(--mp-table-even-row-bg) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table-hover.mud-table-striped .mud-table-container
.mud-table-root .mud-table-body .mud-table-row:nth-of-type(even):hover {
    filter: brightness(0.95);
    cursor: pointer;
}

.mud-table.mud-table-striped .mud-table-container
.mud-table-root .mud-table-head .mud-table-row .mud-table-cell,
.mud-table.mud-table-striped .mud-table-container
.mud-table-root .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: none !important;
}

/* empty row styling */
.mud-table .mud-table-container .mud-table-root .mud-table-body .mud-table-empty-row {
    background-color: var(--mp-table-odd-row-bg) !important;
    transition: var(--mp-default-transition) !important;
}

/*  table footer    */
.mud-table-root .mud-table-foot {
    background-color: var(--mp-element-background) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table-root .mud-table-foot .mud-table-cell {
    color: var(--mp-table-body-text) !important;
    transition: var(--mp-default-transition) !important;
}

/*  table pagination    */
.mud-table .mud-pagination-toolbar,
.mud-table-pagination-toolbar {
    border-top: none !important;
}



/* Customize MudLink */
.mud-link {
    font-weight: bold !important;
    color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-link:hover {
    text-decoration: underline !important;
}

/*  ==========================   */
/*       Expansion Panels        */
/*  ==========================   */

.mud-expansion-panels {
    border-radius: var(--mp-border-radius-small) !important;
    overflow: hidden !important;
}

.mud-expansion-panels .mud-expand-panel {
    background-color: var(--mp-element-background) !important;
    transition: var(--mp-default-transition) !important;
}

.mud-expansion-panels .mud-expand-panel .mud-expand-panel-header {
    color: var(--mp-text-invert) !important;
    background-color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-expansion-panels .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text svg {
    fill: var(--mp-text-invert) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-expansion-panels .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text .mud-typography {
    color: var(--mp-text-invert) !important;
    transition: var(--mp-default-transition) !important;
}

/*  ==========================   */
/*      Input Components         */
/*  ==========================   */

.mud-input-label {
    color: var(--mp-text) !important;
    font-family: "Lato-Bold" !important;
    font-size: 15px !important;
}

.required-input-label {
    color: var(--mp-hinweis-invert) !important;
    transition: var(--mp-default-transition) !important;
}

.mud-input {
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-input.mud-typography-input {
    font-family: "Lato-Light" !important;
}
.mud-input.mud-input-outlined {
    border-radius: var(--mp-border-radius-small) !important;
}

.mud-input>input.mud-input-root-outlined {
    padding: 14px !important;
}

/* muss noch verbessert werden */
div.mud-input-slot.mud-input-root-outlined {
    padding: 14px !important;
}

/* MudSelect */
.mud-popover.mud-popover-open {
    overflow-y: hidden !important;
}
.mud-popover.mud-paper {
    padding: 0 !important;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: 2px !important;
    border-color: var(--mp-component-border) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-input-control:not(.mud-input-error) .mud-input.mud-input-outlined:hover .mud-input-outlined-border,
.mud-input-control:not(.mud-input-error) .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mp-primary) !important;
}

/* invalid MudBlazor input */
.mud-input-control.mud-input-error .mud-input-helper-text.mud-input-error {
    font-size: 14px !important;
    transition: var(--mp-default-transition) !important;
}
.mud-input-control.mud-input-error .mud-input-control-helper-container {
    padding: unset !important;
}
.mud-input-control.mud-input-error .mud-input-outlined-border {
    border-color: var(--mp-error) !important;
    border-width: 2px !important;
}
.mud-input-control.required-field .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mp-error) !important;
}

/*  date picker */
.mp-datepicker {
    padding: 14px !important;
    font-family: "Lato-Regular" !important;
    color: var(--mp-text) !important;
    background-color: var(--mp-background) !important;
    border: 2px solid var(--mp-component-border) !important;
    border-radius: var(--mp-border-radius-small) !important;
    transition: var(--mp-default-transition) !important;
    outline: none !important;
}
.mp-datepicker:hover,
.mp-datepicker:focus {
    border-color: var(--mp-primary) !important;
}

/* input textarea */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--mp-component-border) !important;
    border-style: solid !important;
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}
.ql-toolbar.ql-snow {
    border-width: 2px !important;
    border-top-right-radius: var(--mp-border-radius-small) !important;
    border-top-left-radius: var(--mp-border-radius-small) !important;
}

.ql-toolbar.ql-snow .ql-formats .ql-picker.ql-header .ql-picker-label::before {
    color: var(--mp-text) !important;
    transition: var(--mp-default-transition) !important;
}

.ql-toolbar.ql-snow .ql-formats svg {
    fill: var(--mp-text) !important;
    transition: var(--mp-default-transition) !important;
}
.ql-container.ql-snow {
    border-width: 0px 2px 2px 2px !important;
    border-bottom-right-radius: var(--mp-border-radius-small) !important;
    border-bottom-left-radius: var(--mp-border-radius-small) !important;
}

/*.ql-container.ql-snow:hover,*/
/*.ql-container.ql-snow p:focus {*/
/*    border-color: var(--mp-primary) !important;*/
/*    transition: var(--mp-default-transition) !important;*/
/*}*/

/* ==========================   */
/*      Component: Mud Icons    */
/* ==========================   */
.mud-icon-root.mud-svg-icon,
[class*="mud-"][class*="-text"] {
    transition: var(--mp-default-transition) !important;
}

/*  =============================   */
/*      Component: MudButton        */
/*  =============================   */

.mud-icon-button.mud-button {
    border-radius: var(--mp-border-radius-small) !important;
}

.mud-button {
    padding: 16px 30px !important;
}

.mud-button-filled {
    transition: var(--mp-default-transition) !important;
}

.mud-button-filled.mud-button-filled-success {
    background-color: var(--mp-success) !important;
}

.mud-button-filled.mud-button-filled-primary {
    background-color: var(--mp-primary) !important;
}

.mud-button-filled.mud-button-filled-secondary {
    background-color: var(--mp-accent) !important;
}

.mud-button-filled {
    box-shadow: unset !important;
}

.mud-button .mud-button-label {
    font-size: 15px !important;
    text-transform: none !important;
}

.mud-button-filled.mud-button-filled-primary .mud-button-label,
.mud-button-filled.mud-button-filled-secondary .mud-button-label {
    color: var(--mp-text-invert) !important;
    transition: var(--mp-default-transition) !important;
}

/* button disabled state */
.mud-button-root:disabled .mud-button-label,
.mud-button-filled:disabled .mud-button-label,
.mud-button:disabled .mud-button-label {
    color: var(--mp-text) !important;
}

/* mud tabbar */
.mud-tabs-tabbar {
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-tab.mud-tab-active {
    color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-tabs-tabbar .mud-tab-slider {
    background: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}

/* mud proggress */
.mud-progress-linear.mud-progress-linear-color-primary:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--mp-primary) !important;
}


/* MapComponent */
/* Modal Form */


/* EditMap Component */

.mapbox-container .map-control-container .zoom-control {
    position: relative;
    display: flex;
    flex-direction: column;
    /*border-radius: 10px;*/
}
.mapbox-container .map-control-container .zoom-control .zoom-in {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.mapbox-container .map-control-container .zoom-control .zoom-out {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.mapbox-container .map-control-container .zoom-control hr {
    position: absolute;
    margin: auto 4px;
    top: calc(50% - 1px);
    width: 80%;
    height: 2px;
    border-radius: 5px;
    color: #FFFFFF;
    z-index: 1500;
}

.mp-modal-container .mp-modal-content .mp-modal-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.mp-modal-container .mp-modal-content .mp-modal-footer button {
    padding: 16px 30px;
    outline: none;
    border: none;
    border-radius: var(--mp-border-radius-small);
    transition: var(--mp-default-transition);
}
.mp-modal-container .mp-modal-content .mp-modal-footer button.save {
    color: var(--mp-text-invert);
    background-color: var(--mp-primary);
}
.mp-modal-container .mp-modal-content .mp-modal-footer button.save:hover {
    /*background-color: #1a7aeb;*/
}
.mp-modal-container .mp-modal-content .mp-modal-footer button.save:disabled {
    background-color: #66a6f2;
}

/* custom */
.truncate-text {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Style News Drag Items */
.news-drag-item .drag-item-type {
    padding: 10px;
    border-radius: var(--mp-border-radius-small);
    background-color: var(--mp-background);
    transition: var(--mp-default-transition);
}

/* MudDivider */
.mud-divider {
    border-width: 2px !important;
    border-color: var(--mp-component-border) !important;
    transition: var(--mp-default-transition) !important;
}

/*  ====================================   */
/*      Component: Mud Color Picker        */
/*  ====================================   */
.mud-picker:not(.mud-input-control-input-container) .mud-input {
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}

.mud-picker .mud-input-control-input-container > .mud-input {
    background-color: var(--mp-element-background) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-popover .mud-paper {
    background-color: var(--mp-element-background) !important;
    transition: var(--mp-default-transition) !important;
}

/*  ===================================   */
/*      Component: Mud File Upload        */
/*  ===================================   */
.mud-file-upload .file-upload-dropzone {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    background-color: var(--mp-background) !important;
    border: 2px dashed var(--mp-component-border) !important;
    border-radius: var(--mp-border-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-file-upload .file-upload-dropzone:hover {
    border-color: var(--mp-primary) !important;
    cursor: pointer;
}

/*  ===============================   */
/*      Component: Mud Tabs           */
/*  ===============================   */
.mud-tabs .mud-tab.mud-tab-active {
    border-bottom: 4px solid var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-tabs .mud-tab:hover {
    color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-tabs .mud-tab {
    font-family: 'Lato-Bold' !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/*  =============================   */
/*      Component: Mud Alerts       */
/*  =============================   */
.mud-alert {
    border-radius: var(--mp-border-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-alert .mud-alert-message,
.mud-alert .mud-alert-message .mud-typography {
    color: var(--mp-text-invert) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-alert.mud-alert-filled-success {
    background-color: var(--mp-success) !important;
}
.mud-alert.mud-alert-filled-error {
    background-color: var(--mp-error) !important;
}
.mud-alert.mud-alert-filled-warning {
    background-color: var(--mp-warning) !important;
}
.mud-alert.mud-alert-filled-info {
    background-color: var(--mp-primary) !important;
}
.mud-alert .mud-alert-icon svg {
    fill: var(--mp-text-invert) !important;
    transition: var(--mp-default-transition) !important;
}