/* -------------------------------------------------------------------------- */
/*                                   IMPORTS                                  */
/* -------------------------------------------------------------------------- */
@import url('https://cdn.jsdelivr.net/npm/trix@2.1.0/dist/trix.min.css');

/* -------------------------------------------------------------------------- */
/*                               COLOUR SCHEMES                               */
/* -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-blue: #559bfb;
    --bs-indigo: #323f9e;
    --bs-purple: #816bff;
    --bs-pink: #ff63a5;
    --bs-red: #e85347;
    --bs-orange: #ffa353;
    --bs-yellow: #f4bd0e;
    --bs-green: #1ee0ac;
    --bs-teal: #20c997;
    --bs-cyan: #09c2de;
    --bs-white: #fff;
    --bs-gray: #8091a7;
    --bs-gray-dark: #2b3748;
    --bs-gray-100: #ebeef2;
    --bs-gray-200: #e5e9f2;
    --bs-gray-300: #dbdfea;
    --bs-gray-400: #b7c2d0;
    --bs-gray-500: #8091a7;
    --bs-gray-600: #3c4d62;
    --bs-gray-700: #344357;
    --bs-gray-800: #2b3748;
    --bs-gray-900: #1f2b3a;
    --bs-primary: #733aea;
    --bs-secondary: #364a63;
    --bs-success: #0fca7a;
    --bs-info: #058efc;
    --bs-warning: #fd9722;
    --bs-danger: #f2426e;
    --bs-light: #e5e9f2;
    --bs-dark: #1f2b3a;
    --bs-gray: #8091a7;
    --bs-lighter: #f5f6fa;
    --bs-primary-rgb: 115, 58, 234;
    --bs-secondary-rgb: 54, 74, 99;
    --bs-success-rgb: 15, 202, 122;
    --bs-info-rgb: 5, 142, 252;
    --bs-warning-rgb: 253, 151, 34;
    --bs-danger-rgb: 242, 66, 110;
    --bs-light-rgb: 229, 233, 242;
    --bs-dark-rgb: 31, 43, 58;
    --bs-gray-rgb: 128, 145, 167;
    --bs-lighter-rgb: 245, 246, 250;
    --bs-primary-text-emphasis: #223e64;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #065131;
    --bs-info-text-emphasis: #023965;
    --bs-warning-text-emphasis: #653c0e;
    --bs-danger-text-emphasis: #611a2c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #ddebfe;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #cff4e4;
    --bs-info-bg-subtle: #cde8fe;
    --bs-warning-bg-subtle: #ffead3;
    --bs-danger-bg-subtle: #fcd9e2;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #bbd7fd;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #9feaca;
    --bs-info-border-subtle: #9bd2fe;
    --bs-warning-border-subtle: #fed5a7;
    --bs-danger-border-subtle: #fab3c5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: Roboto, sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0));
    --bs-body-font-family: Roboto, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.65;
    --bs-body-color: #526484;
    --bs-body-color-rgb: 82, 100, 132;
    --bs-body-bg: #f5f6fa;
    --bs-body-bg-rgb: 245, 246, 250;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(82, 100, 132, 0.75);
    --bs-secondary-color-rgb: 82, 100, 132;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-color: rgba(82, 100, 132, 0.5);
    --bs-tertiary-color-rgb: 82, 100, 132;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-heading-color: #364a63;
    --bs-link-color: #8e61ee;
    --bs-link-color-rgb: 142, 97, 238;
    --bs-link-decoration: none;
    --bs-link-hover-color: #6d33e9;
    --bs-link-hover-color-rgb: 109, 51, 233;
    --bs-link-hover-decoration: none;
    --bs-code-color: #ff63a5;
    --bs-highlight-bg: #fcf8e3;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dbdfea;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 5px;
    --bs-border-radius-xl: 8px;
    --bs-border-radius-xxl: 12px;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 3px 12px 1px rgba(43, 55, 72, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(43, 55, 72, 0.15);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(43, 55, 72, 0.25);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(85, 155, 251, 0.25);
    --bs-form-valid-color: #0fca7a;
    --bs-form-valid-border-color: #0fca7a;
    --bs-form-invalid-color: #f2426e;
    --bs-form-invalid-border-color: #f2426e;

    /* ---------------------------- easyadmin colours --------------------------- */
    --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: "JetBrains Mono", ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-family-base: var(--font-family-sans-serif);

    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 24px;
    --font-size-xxxl: 28px;

    --shadow-md: 0 4px 6px -1px rgb(15, 23, 43, 0.1), 0 2px 4px -2px rgb(15, 23, 42, 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(15, 23, 43, 0.1), 0 4px 6px -4px rgb(15, 23, 42, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.2), 0 8px 10px -6px rgba(15, 23, 42, 0.2);

    --width-sm: 576px;
    --width-md: 768px;
    --width-lg: 992px;
    --width-xl: 1200px;
    --width-xxl: 1400px;

    --zindex-modal-backdrop: 2020;

    --form-tabs-gutter-x: 5px;

    --text-primary-color: var(--text-color);
    --text-secondary-color: var(--text-muted);
    --text-tertiary-color: var(--gray-400);
    --border-primary-color: var(--gray-500);
    --border-secondary-color: var(--gray-300);
    --border-tertiary-color: var(--gray-100);
    --primary-bg: var(--gray-300);
    --secondary-bg: var(--gray-100);
    --tertiary-bg: var(--gray-50);

    --body-max-width: 1440px;
    --body-bg: var(--white);
    --responsive-header-bg: var(--gray-50);
    --responsive-header-border-color: var(--gray-200);
    --responsive-header-logo-color: var(--gray-800);
    --responsive-table-label-color: var(--gray-500);
    --responsive-table-row-border-color: var(--gray-300);
    --sidebar-max-width: 230px;
    --sidebar-bg: var(--gray-50);
    --sidebar-border-color: var(--gray-200);
    --sidebar-logo-color: var(--gray-800);
    --sidebar-padding-left: 10px;
    --sidebar-padding-right: 10px;
    --sidebar-menu-items-padding-left: 6px;
    --sidebar-menu-items-padding-right: 10px;
    --sidebar-menu-color: var(--gray-700);
    --sidebar-menu-badge-bg: var(--indigo-100);
    --sidebar-menu-badge-color: var(--gray-500);
    --sidebar-menu-badge-active-bg: var(--color-primary);
    --sidebar-menu-badge-active-color: var(--indigo-50);
    --sidebar-menu-submenu-color: var(--gray-600);
    --sidebar-menu-header-color: var(--gray-400);
    --sidebar-menu-icon-color: var(--gray-500);
    --sidebar-menu-active-item-bg: var(--gray-200);
    --sidebar-menu-active-item-color: var(--color-primary);
    --sidebar-menu-compact-hover-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --resize-handler-width: 10px;
    --content-section-border-color: var(--gray-200);
    --resize-handler-hover-bg: var(--indigo-600);
    --content-search-input-bg: var(--body-bg);
    --content-search-icon-color: var(--gray-500);
    --content-search-reset-button-bg: var(--gray-300);
    --content-search-reset-button-color: var(--gray-600);
    --content-search-reset-button-hover-bg: var(--gray-600);
    --content-search-reset-button-hover-color: var(--gray-200);
    --content-top-border-color: var(--gray-200);
    --content-bg: var(--white);
    --content-padding-left: 15px;
    --content-padding-right: 15px;
    --lg-content-padding-left: 35px;
    --lg-content-padding-right: 25px;
    --lg-content-padding-bottom: 45px;
    --user-avatar-icon-bg: var(--gray-200);
    --user-avatar-icon-color: var(--gray-500);
    --user-name-color: var(--gray-500);
    --user-menu-impersonated-link-color: var(--color-primary);
    --popover-bg: var(--gray-100);
    --popover-border-color: var(--gray-300);
    --popover-color: var(--text-color);
    --popover-shadow: var(--shadow-xl);
    --popover-max-width: 480px;
    --dropdown-toggle-bg: var(--white);
    --dropdown-toggle-color: var(--gray-600);
    --dropdown-toggle-border-color: var(--gray-300);
    --dropdown-toggle-hover-border-color: var(--gray-400);
    --dropdown-bg: var(--white);
    --dropdown-color: var(--gray-600);
    --dropdown-border-color: var(--gray-200);
    --dropdown-link-color: var(--gray-700);
    --dropdown-link-hover-bg: var(--gray-100);
    --dropdown-icon-color: var(--gray-600);
    --dropdown-settings-icon-color: var(--gray-400);
    --dropdown-settings-active-item-bg: var(--gray-100);
    --dropdown-settings-active-item-color: var(--color-primary);
    --dropdown-settings-active-item-shadow: inset 0 0 0 1px #5368d580; /* color is --color-primary with 50% alpha */
    --datagrid-noresults-placeholder-bg: var(--gray-100);
    --datagrid-hidden-results-gradient-bg: var(--gray-50);
    --table-thead-color: var(--gray-800);
    --table-cell-color: var(--gray-600);
    --table-thead-marker-color: var(--gray-400);
    --table-cell-border-color: var(--gray-200);
    --table-hover-cell-bg: var(--gray-50);
    --table-selected-cell-bg: var(--indigo-50);
    --table-thead-sorted-color: var(--gray-900);
    --table-thead-sorted-marker-color: var(--color-primary);
    --datalist-border-color: var(--gray-200);
    --datalist-label-color: var(--gray-500);
    --datalist-value-color: var(--gray-600);
    --pagination-color: var(--gray-600);
    --pagination-hover-border-color: var(--gray-300);
    --pagination-disabled-color: var(--gray-400);
    --pagination-active-bg: var(--color-primary);
    --pagination-active-color: var(--white);
    --field-language-badge-border-color: var(--gray-300);
    --field-country-flag-border-color: var(--gray-200);
    --modal-bg: var(--white);
    --modal-border-color: var(--gray-200);
    --modal-header-bg: var(--gray-50);
    --modal-header-border-color: var(--gray-300);
    --modal-footer-bg: var(--gray-100);
    --modal-title-color: var(--gray-700);
    --detail-label-tooltip-underline-color: var(--gray-400);
    --form-label-color: var(--gray-800);
    --form-control-bg: var(--white);
    --form-control-disabled-bg: var(--gray-200);
    --form-control-disabled-color: var(--gray-600);
    --form-input-border-color: var(--gray-300);
    --form-input-error-border-color: var(--red-600);
    --form-input-hover-border-color: var(--gray-400);
    --form-input-shadow: 0 1px 2px 0 var(--gray-50);
    --form-input-hover-shadow: 0 0 0 4px var(--gray-100);
    --form-input-error-shadow: 0 0 0 3px var(--red-100);
    --form-input-text-color: var(--gray-700);
    --form-input-group-text-bg: var(--form-control-bg);
    --form-input-group-text-border-color: var(--form-input-border-color);
    --form-switch-bg: var(--body-bg);
    --form-switch-border-color: var(--gray-400);
    --form-switch-checked-bg: var(--indigo-500);
    --form-type-check-input-border-color: var(--gray-400);
    --form-type-check-input-box-shadow: 0 1px 2px 0 var(--gray-50);
    --form-type-check-input-checked-bg: var(--indigo-500);
    --form-type-text-editor-toolbar-bg: var(--white);
    --form-type-text-editor-toolbar-button-color: var(--gray-600);
    --form-type-text-editor-toolbar-button-hover-color: var(--gray-100);
    --form-type-text-editor-toolbar-button-active-bg: var(--gray-200);
    --form-type-text-editor-toolbar-button-active-color: var(--gray-700);
    --form-type-text-editor-dialog-bg: var(--white);
    --form-type-text-editor-dialog-box-shadow: 0 4px 12px var(--gray-300);
    --form-type-text-editor-content-pre-bg: var(--gray-200);
    --form-type-text-editor-content-pre-color: var(--text-color);
    --form-type-collection-item-collapsed-hover-bg: var(--gray-100);
    --form-type-autocomplete-dropdown-bg: var(--white);
    --form-type-autocomplete-dropdown-input-wrapper-bg: var(--gray-100);
    --form-type-autocomplete-dropdown-input-border-color: var(--form-input-border-color);
    --form-type-autocomplete-dropdown-active-item-bg: var(--gray-200);
    --form-type-autocomplete-close-button-bg: var(--gray-500);
    --form-type-autocomplete-close-button-hover-bg: var(--gray-700);
    --form-type-autocomplete-optgroup-bg: var(--body-bg);
    --form-type-autocomplete-optgroup-color: var(--gray-500);
    --form-type-autocomplete-multi-item-bg: var(--gray-100);
    --form-type-autocomplete-multi-item-border-color: var(--white);
    --form-type-autocomplete-multi-item-remove-button-hover-bg: var(--gray-200);
    --form-global-error-bg: var(--red-100);
    --form-global-error-color: var(--color-danger);
    --form-global-error-border: 1px solid transparent;
    --form-help-color: var(--gray-600);
    --form-help-error-color: var(--gray-800);
    --form-help-active-color: var(--gray-800);
    --form-tabs-border-color: var(--gray-200);
    --form-tabs-help-color: var(--gray-600);
    --form-column-header-color: var(--gray-700);
    --form-column-help-color: var(--gray-600);
    --form-column-icon-color: var(--gray-500);
    --form-fieldset-header-color: var(--gray-700);
    --form-fieldset-help-color: var(--gray-600);
    --form-fieldset-border-color: var(--gray-200);
    --form-fieldset-header-border-color: var(--gray-200);
    --form-fieldset-icon-color: var(--gray-500);
    --form-fieldset-collapse-marker-color: var(--gray-400);
    --form-collection-item-collapse-marker-color: var(--gray-400);
    --badge-border: 0;
    --badge-boolean-false-bg: var(--gray-200);
    --badge-boolean-false-box-shadow: inset 0 0 0 1px var(--gray-300);
    --badge-boolean-false-color: var(--text-color);
    --badge-boolean-true-bg: var(--color-primary);
    --badge-boolean-true-box-shadow: none;
    --badge-boolean-true-color: var(--white);
    --badge-success-bg: var(--green-100);
    --badge-success-box-shadow: none;
    --badge-success-color: var(--text-green-600);
    --badge-warning-bg: var(--yellow-100);
    --badge-warning-box-shadow: none;
    --badge-warning-color: var(--text-yellow-600);
    --badge-danger-bg: var(--red-100);
    --badge-danger-box-shadow: none;
    --badge-danger-color: var(--text-red-600);
    --badge-info-bg: var(--blue-100);
    --badge-info-box-shadow: none;
    --badge-info-color: var(--text-blue-600);
    --badge-primary-bg: var(--indigo-100);
    --badge-primary-box-shadow: none;
    --badge-primary-color: var(--text-indigo-600);
    --badge-secondary-bg: var(--gray-200);
    --badge-secondary-box-shadow: none;
    --badge-secondary-color: var(--gray-600);
    --badge-light-bg: var(--gray-50);
    --badge-light-box-shadow: none;
    --badge-light-color: var(--text-color);
    --badge-dark-bg: var(--gray-900);
    --badge-dark-box-shadow: none;
    --badge-dark-color: var(--gray-50);
    --badge-outline-box-shadow: inset 0 0 0 1px var(--gray-300);
    --badge-outline-color: var(--datalist-value-color);
    --alert-primary-bg: var(--indigo-100);
    --alert-primary-color: var(--indigo-800);
    --alert-primary-border-color: var(--indigo-200);
    --alert-secondary-bg: var(--gray-100);
    --alert-secondary-color: var(--gray-800);
    --alert-secondary-border-color: var(--gray-200);
    --alert-success-bg: var(--emerald-100);
    --alert-success-color: var(--emerald-900);
    --alert-success-border-color: var(--emerald-200);
    --alert-info-bg: var(--sky-100);
    --alert-info-color: var(--sky-800);
    --alert-info-border-color: var(--sky-200);
    --alert-warning-bg: var(--orange-100);
    --alert-warning-color: var(--orange-800);
    --alert-warning-border-color: var(--orange-200);
    --alert-danger-bg: var(--rose-100);
    --alert-danger-color: var(--rose-800);
    --alert-danger-border-color: var(--rose-200);
    --alert-light-bg: var(--white);
    --alert-light-color: var(--gray-800);
    --alert-light-border-color: var(--gray-200);
    --alert-dark-bg: var(--gray-800);
    --alert-dark-color: var(--gray-50);
    --alert-dark-border-color: var(--gray-500);
    --button-bg: var(--white);
    --button-color: var(--gray-700);
    --button-hover-color: var(--gray-800);
    --button-active-color: var(--gray-800);
    --button-border-color: var(--gray-300);
    --button-hover-border-color: var(--gray-300);
    --button-shadow:
        /* border */
        0 0 0 1px var(--gray-300),
        /* drop shadow md (--gray-900) */
        0 1px 1px 0 hsla(222, 47%, 11%, 0.1),
        /* drop shadow lg (--gray-700) */
        0 2px 5px 0 hsla(215, 25%, 27%, 0.1);
    --button-hover-shadow:
        /* border */
        0 0 0 1px var(--gray-300),
        /* drop shadow md (--gray-900) */
        0 1px 1px 0 hsla(222, 47%, 11%, 0.1),
        /* drop shadow lg (--gray-700) */
        0 2px 5px 0 hsla(215, 25%, 27%, 0.1),
        /* drop shadow xl (--gray-700) */
        0 3px 9px 0 hsla(215, 25%, 27%, 0.1);
    --button-active-shadow:
        /* border */
        0 0 0 1px var(--gray-300),
        /* ring */
        0 0 0 4px var(--gray-200),
        /* drop shadow md (--gray-900) */
        0 1px 1px 0 hsla(222, 47%, 11%, 0.1),
        /* drop shadow lg (--gray-700) */
        0 2px 5px 0 hsla(215, 25%, 27%, 0.1),
        /* drop shadow xl (--gray-700) */
        0 3px 9px 0 hsla(215, 25%, 27%, 0.1);
    --button-active-primary-shadow:
        /* border */
        0 0 0 1px var(--gray-300),
        /* ring */
        0 0 0 4px var(--indigo-200),
        /* drop shadow md (--gray-900) */
        0 1px 1px 0 hsla(222, 47%, 11%, 0.1),
        /* drop shadow lg (--gray-700) */
        0 2px 5px 0 hsla(215, 25%, 27%, 0.1),
        /* drop shadow xl (--gray-700) */
        0 3px 9px 0 hsla(215, 25%, 27%, 0.1);
    --button-primary-bg: var(--color-primary);
    --button-primary-color: var(--text-on-primary);
    --button-secondary-bg: var(--white);
    --button-secondary-color: var(--button-color);
    --button-info-bg: var(--color-info);
    --button-info-color: var(--white);
    --button-success-bg: var(--color-success);
    --button-success-color: var(--white);
    --button-danger-bg: var(--color-danger);
    --button-danger-color: var(--white);
    --button-warning-bg: var(--color-warning);
    --button-warning-color: var(--white);
    --text-color: var(--gray-800);
    --text-color-rgb: 30, 41, 59;
    --text-color-dark: hsl(229, 24%, 21%);
    --text-color-light: hsl(215, 14%, 67%);
    --box-shadow-lg: 0 10px 15px -3px hsla(222, 47%, 11%, 0.1), 0 4px 6px -2px hsla(222, 47%, 11%, 0.05); /* it uses --gray-900 */
    --content-panel-bg: hsl(210, 45%, 98%);
    --fieldset-bg: hsl(210, 30%, 97%);
    --code-color: #c44c34;
    --code-editor-string-color: #032f62;
    --code-editor-keyword-color: #d73a49;
    --code-editor-comment-color: #22863a;
    --code-editor-definition-color: #e36209;
    --code-editor-variable-color: var(--form-input-text-color);
    --code-editor-number-color: var(--form-input-text-color);
    --code-editor-argument-color: #6f42c1;
    --code-editor-key-color: #005cc5;
    --code-editor-attribute-color: #22863a;
    --code-editor-addition-bg: #e6ffed;
    --code-editor-deletion-bg: #ffeef0;
    --code-editor-selection-bg: #d7d7d7;

    --page-login-bg: var(--gray-100);
    --page-login-form-bg: var(--white);
    --page-login-form-control-bg: var(--form-control-bg);
    --page-login-form-control-border-color: var(--form-input-border-color);
    --page-login-form-control-button-bg: var(--button-primary-bg);

    --zindex-700: 777;
    --zindex-800: 888;
    --zindex-900: 999;
    --zindex-1050: 1050;

    --text-blue-600: hsl(206, 91%, 30%);
    --text-green-600: hsl(159, 75%, 21%);
    --text-indigo-600: hsl(231, 48%, 45%);
    --text-red-600: hsl(338, 71%, 37%);
    --text-yellow-600: hsl(20, 94%, 30%);

    --color-primary: hsl(230, 61%, 58%); /* custom shade between indigo-400 and indigo-500 */
    --color-success: hsl(157, 69%, 38%);
    --color-info: hsl(201, 94%, 37%);
    --color-warning: hsl(30, 81%, 47%);
    --color-danger: var(--red-600);
    --color-danger-rgb: 220, 38, 38;

    --highlight-bg: #FEFF3F;
    --highlight-color: var(--text-color);

    --text-on-primary: var(--white);
    --text-muted: var(--gray-500);

    --link-color: hsl(230, 60%, 60%);
    --link-color-rgb: 92, 112, 214;
    --link-hover-color: hsl(230, 60%, 75%);
    --link-hover-color-rgb: 153, 166, 230;
    --link-hover-decoration: none;
    --link-danger-color: var(--red-600);
    --link-danger-hover-color: var(--red-500);

    --border-radius: 4px;
    --border-radius-lg: 8px;
    --border-radius-sm: 2px;
    --border-width: 1px;
    --border-style: solid;
    --border-color: hsl(213, 24%, 91%);
}

[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #99c3fd;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #6fdfaf;
    --bs-info-text-emphasis: #69bbfd;
    --bs-warning-text-emphasis: #fec17a;
    --bs-danger-text-emphasis: #f78ea8;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #111f32;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #032818;
    --bs-info-bg-subtle: #011c32;
    --bs-warning-bg-subtle: #331e07;
    --bs-danger-bg-subtle: #300d16;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #335d97;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #097949;
    --bs-info-border-subtle: #035597;
    --bs-warning-border-subtle: #985b14;
    --bs-danger-border-subtle: #912842;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #99c3fd;
    --bs-link-hover-color: #adcffd;
    --bs-link-color-rgb: 153, 195, 253;
    --bs-link-hover-color-rgb: 173, 207, 253;
    --bs-code-color: #ffa1c9;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #78eccd;
    --bs-form-valid-border-color: #78eccd;
    --bs-form-invalid-color: #f19891;
    --bs-form-invalid-border-color: #f19891;

    /* ---------------------------- easyadmin colours --------------------------- */
    --text-primary-color: var(--text-color);
    --text-secondary-color: var(--text-muted);
    --text-tertiary-color: var(--true-gray-600);
    --border-primary-color: var(--true-gray-600);
    --border-secondary-color: var(--true-gray-700);
    --border-tertiary-color: var(--true-gray-800);
    --primary-bg: var(--true-gray-600);
    --secondary-bg: var(--true-gray-800);
    --tertiary-bg: var(--true-gray-900);

    --shadow-md: 0 4px 6px -1px rgb(0, 0, 0, 0.3), 0 2px 4px -2px rgb(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0, 0, 0, 0.3), 0 4px 6px -4px rgb(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --body-bg: var(--true-gray-950);
    --responsive-header-bg: var(--true-gray-800);
    --responsive-header-border-color: var(--true-gray-600);
    --responsive-header-logo-color: var(--true-gray-300);
    --responsive-table-label-color: var(--true-gray-500);
    --responsive-table-row-border-color: var(--true-gray-700);
    --sidebar-bg: var(--true-gray-900);
    --sidebar-border-color: var(--true-gray-800);
    --sidebar-logo-color: var(--true-gray-200);
    --sidebar-menu-color: var(--true-gray-300);
    --sidebar-menu-badge-bg: var(--true-gray-800);
    --sidebar-menu-badge-color: var(--true-gray-300);
    --sidebar-menu-badge-active-bg: var(--blue-800);
    --sidebar-menu-badge-active-color: var(--true-gray-300);
    --sidebar-menu-submenu-color: var(--true-gray-400);
    --sidebar-menu-header-color: var(--true-gray-400);
    --sidebar-menu-icon-color: var(--true-gray-400);
    --sidebar-menu-active-item-bg: var(--true-gray-300);
    --sidebar-menu-active-item-color: var(--true-gray-950);
    --sidebar-menu-compact-hover-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --resize-handler-hover-bg: var(--indigo-400);
    --content-section-border-color: var(--true-gray-700);
    --content-search-input-bg: var(--body-bg);
    --content-search-icon-color: var(--true-gray-500);
    --content-search-reset-button-bg: var(--true-gray-800);
    --content-search-reset-button-color: var(--true-gray-300);
    --content-search-reset-button-hover-bg: var(--true-gray-700);
    --content-search-reset-button-hover-color: var(--true-gray-200);
    --content-top-border-color: var(--true-gray-700);
    --content-bg: var(--true-gray-900);
    --user-avatar-icon-bg: var(--true-gray-700);
    --user-avatar-icon-color: var(--true-gray-400);
    --user-name-color: var(--true-gray-400);
    --user-menu-impersonated-link-color: var(--color-primary);
    --popover-bg: var(--true-gray-900);
    --popover-border-color: var(--true-gray-700);
    --popover-color: var(--text-color);
    --popover-shadow: var(--shadow-xl);
    --popover-max-width: 480px;
    --dropdown-toggle-bg: var(--true-gray-800);
    --dropdown-toggle-color: var(--true-gray-200);
    --dropdown-toggle-border-color: var(--true-gray-700);
    --dropdown-toggle-hover-border-color: var(--true-gray-600);
    --dropdown-bg: var(--true-gray-900);
    --dropdown-color: var(--true-gray-300);
    --dropdown-border-color: var(--true-gray-700);
    --dropdown-link-color: var(--true-gray-300);
    --dropdown-link-hover-bg: var(--true-gray-800);
    --dropdown-icon-color: var(--true-gray-400);
    --dropdown-settings-icon-color: var(--true-gray-500);
    --dropdown-settings-active-item-bg: var(--true-gray-950);
    --dropdown-settings-active-item-color: var(--color-primary);
    --dropdown-settings-active-item-shadow: inset 0 0 0 1px var(--true-gray-800);
    --datagrid-noresults-placeholder-bg: var(--true-gray-700);
    --datagrid-hidden-results-gradient-bg: var(--true-gray-700);
    --table-thead-color: var(--true-gray-200);
    --table-cell-color: var(--true-gray-300);
    --table-thead-marker-color: var(--true-gray-500);
    --table-cell-border-color: var(--true-gray-800);
    --table-hover-cell-bg: var(--true-gray-900);
    --table-selected-cell-bg: rgba(3, 102, 214, 0.25);
    --table-thead-sorted-color: var(--color-primary);
    --table-thead-sorted-marker-color: var(--color-primary);
    --datalist-border-color: var(--true-gray-600);
    --datalist-label-color: var(--true-gray-400);
    --datalist-value-color: var(--true-gray-300);
    --pagination-color: var(--true-gray-400);
    --pagination-hover-border-color: var(--true-gray-600);
    --pagination-active-bg: var(--blue-500);
    --pagination-active-color: var(--white);
    --field-language-badge-border-color: var(--true-gray-600);
    --field-country-flag-border-color: var(--true-gray-600);
    --modal-bg: var(--true-gray-800);
    --modal-border-color: var(--true-gray-600);
    --modal-header-bg: var(--true-gray-900);
    --modal-header-border-color: var(--true-gray-600);
    --modal-footer-bg: var(--true-gray-700);
    --modal-title-color: var(--true-gray-400);
    --pagination-disabled-color: var(--true-gray-600);
    --detail-label-tooltip-underline-color: var(--true-gray-500);
    --form-label-color: var(--true-gray-300);
    --form-control-bg: var(--true-gray-900);
    --form-control-disabled-bg: var(--true-gray-900);
    --form-control-disabled-color: var(--true-gray-500);
    --form-input-border-color: var(--true-gray-700);
    --form-input-error-border-color: var(--red-500);
    --form-input-hover-border-color: var(--true-gray-500);
    --form-input-shadow: none;
    --form-input-hover-shadow: none;
    --form-input-error-shadow: 0 0 0 3px var(--red-900);
    --form-input-text-color: var(--true-gray-200);
    --form-input-group-text-bg: var(--true-gray-800);
    --form-input-group-text-border-color: var(--true-gray-600);
    --form-switch-bg: var(--true-gray-600);
    --form-switch-border-color: var(--true-gray-700);
    --form-switch-checked-bg: var(--blue-600);
    --form-type-check-input-border-color: var(--true-gray-400);
    --form-type-check-input-box-shadow: 0 1px 2px 0 var(--true-gray-800);
    --form-type-check-input-checked-bg: var(--blue-600);
    --form-type-text-editor-toolbar-bg: var(--true-gray-800);
    --form-type-text-editor-toolbar-button-color: var(--true-gray-400);
    --form-type-text-editor-toolbar-button-hover-color: var(--true-gray-700);
    --form-type-text-editor-toolbar-button-active-bg: var(--true-gray-700);
    --form-type-text-editor-toolbar-button-active-color: var(--true-gray-300);
    --form-type-text-editor-dialog-bg: var(--true-gray-800);
    --form-type-text-editor-dialog-box-shadow: 0 4px 12px var(--true-gray-900);
    --form-type-text-editor-content-pre-bg: var(--true-gray-800);
    --form-type-text-editor-content-pre-color: var(--true-gray-300);
    --form-type-collection-item-collapsed-hover-bg: var(--true-gray-800);
    --form-type-autocomplete-dropdown-bg: var(--true-gray-800);
    --form-type-autocomplete-dropdown-input-wrapper-bg: var(--true-gray-900);
    --form-type-autocomplete-dropdown-input-border-color: transparent;
    --form-type-autocomplete-dropdown-active-item-bg: var(--true-gray-700);
    --form-type-autocomplete-close-button-bg: var(--true-gray-500);
    --form-type-autocomplete-close-button-hover-bg: var(--true-gray-800);
    --form-type-autocomplete-optgroup-bg: var(--form-type-autocomplete-dropdown-bg);
    --form-type-autocomplete-optgroup-color: var(--true-gray-400);
    --form-type-autocomplete-multi-item-bg: var(--true-gray-700);
    --form-type-autocomplete-multi-item-border-color: var(--true-gray-500);
    --form-type-autocomplete-multi-item-remove-button-hover-bg: var(--true-gray-800);
    --form-global-error-bg: transparent;
    --form-global-error-color: var(--red-400);
    --form-global-error-border: 1px solid var(--red-400);
    --form-help-color: var(--true-gray-500);
    --form-help-error-color: var(--true-gray-200);
    --form-help-active-color: var(--true-gray-300);
    --form-tabs-border-color: var(--true-gray-600);
    --form-tabs-help-color: var(--true-gray-500);
    --form-column-header-color: var(--true-gray-300);
    --form-column-help-color: var(--true-gray-500);
    --form-column-icon-color: var(--true-gray-400);
    --form-fieldset-header-color: var(--true-gray-300);
    --form-fieldset-help-color: var(--true-gray-500);
    --form-fieldset-border-color: var(--true-gray-700);
    --form-fieldset-header-border-color: var(--true-gray-600);
    --form-fieldset-icon-color: var(--true-gray-400);
    --form-fieldset-collapse-marker-color: var(--true-gray-500);
    --form-collection-item-collapse-marker-color: var(--true-gray-500);
    --badge-box-shadow: inset 0 0 0 1px rgba(245, 245, 245, 0.3);
    --badge-boolean-false-bg: rgba(245, 245, 245, 0.1);
    --badge-boolean-false-box-shadow: inset 0 0 0 1px rgba(245, 245, 245, 0.3);
    --badge-boolean-false-color: var(--true-gray-200);
    --badge-boolean-true-bg: rgba(3, 102, 214, 0.18);
    --badge-boolean-true-box-shadow: inset 0 0 0 1px rgba(90, 168, 252, 0.3);
    --badge-boolean-true-color: rgb(90, 168, 252);
    --badge-success-bg: rgba(22, 135, 0, 0.18);
    --badge-success-box-shadow: inset 0 0 0 1px rgba(39, 236, 0, 0.3);
    --badge-success-color: var(--green-300);
    --badge-warning-bg: rgba(251, 202, 4, 0.18);
    --badge-warning-box-shadow: inset 0 0 0 1px rgba(250, 201, 5, 0.3);
    --badge-warning-color: var(--yellow-400);
    --badge-danger-bg: rgba(182, 2, 5, 0.18);
    --badge-danger-box-shadow: inset 0 0 0 1px rgba(253, 155, 157, 0.3);
    --badge-danger-color: var(--red-300);
    --badge-info-bg: rgba(3, 102, 214, 0.18);
    --badge-info-box-shadow: inset 0 0 0 1px rgba(90, 168, 252, 0.3);
    --badge-info-color: rgb(90, 168, 252);
    --badge-primary-bg: rgba(3, 102, 214, 0.18);
    --badge-primary-box-shadow: inset 0 0 0 1px rgba(90, 168, 252, 0.3);
    --badge-primary-color: rgb(90, 168, 252);
    --badge-secondary-bg: rgba(245, 245, 245, 0.1);
    --badge-secondary-box-shadow: inset 0 0 0 1px rgba(245, 245, 245, 0.3);
    --badge-secondary-color: var(--true-gray-200);
    --badge-light-bg: rgba(255, 255, 255, 0.18);
    --badge-light-box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    --badge-light-color: rgb(255, 255, 255);
    --badge-dark-bg: rgba(0, 0, 0, 0.18);
    --badge-dark-box-shadow: inset 0 0 0 1px rgba(153, 153, 153, 0.3);
    --badge-dark-color: rgb(153, 153, 153);
    --badge-outline-box-shadow: inset 0 0 0 1px var(--true-gray-500);
    --badge-outline-color: var(--datalist-value-color);
    --alert-primary-bg: var(--indigo-900);
    --alert-primary-color: var(--indigo-100);
    --alert-primary-border-color: var(--indigo-800);
    --alert-secondary-bg: var(--true-gray-700);
    --alert-secondary-color: var(--true-gray-300);
    --alert-secondary-border-color: var(--true-gray-600);
    --alert-success-bg: var(--emerald-800);
    --alert-success-color: var(--emerald-100);
    --alert-success-border-color: var(--emerald-700);
    --alert-info-bg: var(--sky-800);
    --alert-info-color: var(--sky-100);
    --alert-info-border-color: var(--sky-700);
    --alert-warning-bg: var(--orange-800);
    --alert-warning-color: var(--orange-100);
    --alert-warning-border-color: var(--orange-700);
    --alert-danger-bg: var(--red-800);
    --alert-danger-color: var(--red-100);
    --alert-danger-border-color: var(--red-700);
    --alert-light-bg: var(--true-gray-300);
    --alert-light-color: var(--true-gray-800);
    --alert-light-border-color: var(--true-gray-200);
    --alert-dark-bg: var(--true-gray-900);
    --alert-dark-color: var(--true-gray-200);
    --alert-dark-border-color: var(--true-gray-700);
    --button-bg: var(--true-gray-600);
    --button-color: var(--true-gray-200);
    --button-hover-color: var(--true-gray-100);
    --button-active-color: var(--true-gray-100);
    --button-border-color: var(--true-gray-600);
    --button-hover-border-color: var(--true-gray-600);
    --button-shadow: 0 0 0 1px var(--true-gray-700);
    --button-hover-shadow: 0 0 0 1px var(--true-gray-500);
    --button-active-shadow: 0 0 0 1px var(--true-gray-600);
    --button-active-primary-shadow:
        /* border */
        0 0 0 1px var(--true-gray-700),
        /* ring */
        0 0 0 4px var(--blue-600);
    --button-primary-bg: var(--blue-600);
    --button-primary-color: var(--text-on-primary);
    --button-secondary-bg: var(--true-gray-800);
    --button-secondary-color: var(--button-color);
    --button-info-bg: var(--color-info);
    --button-info-color: var(--white);
    --button-success-bg: var(--color-success);
    --button-success-color: var(--white);
    --button-danger-bg: var(--color-danger);
    --button-danger-color: var(--white);
    --button-warning-bg: var(--color-warning);
    --button-warning-color: var(--white);
    --text-color: var(--true-gray-300);
    --text-color-rgb: 212, 212, 212;
    --text-color-dark: var(--true-gray-200);
    --text-color-light: var(--true-gray-400);
    --box-shadow-lg: 0 10px 15px -3px hsla(222, 47%, 11%, 0.1), 0 4px 6px -2px hsla(222, 47%, 11%, 0.05); /* it uses --true-gray-900 */
    --content-panel-bg: hsl(210, 45%, 98%);
    --fieldset-bg: hsl(210, 30%, 97%);
    --code-color: #c44c34;
    --code-editor-string-color: #a5d6ff;
    --code-editor-keyword-color: #ff7b72;
    --code-editor-comment-color: #7ee787;
    --code-editor-definition-color: #e36209;
    --code-editor-variable-color: var(--form-input-text-color);
    --code-editor-number-color: var(--form-input-text-color);
    --code-editor-argument-color: #d2a8ff;
    --code-editor-key-color: #a5d6ff;
    --code-editor-attribute-color: #7ee787;
    --code-editor-addition-bg: rgba(46, 160, 67, 0.3);
    --code-editor-deletion-bg: rgba(218, 54, 51, 0.3);
    --code-editor-selection-bg: #203E6F;

    --page-login-bg: var(--true-gray-800);
    --page-login-form-bg: var(--true-gray-700);
    --page-login-form-control-bg: var(--true-gray-800);
    --page-login-form-control-border-color: var(--true-gray-600);
    --page-login-form-control-button-bg: var(--blue-700);

    --text-blue-600: hsl(206, 91%, 30%);
    --text-green-600: hsl(159, 75%, 21%);
    --text-indigo-600: hsl(231, 48%, 45%);
    --text-red-600: hsl(338, 71%, 37%);
    --text-yellow-600: hsl(20, 94%, 30%);

    --color-primary: hsl(213deg 94% 71%);
    --color-success: hsl(157, 69%, 38%);
    --color-info: hsl(201, 94%, 37%);
    --color-warning: hsl(30, 81%, 47%);
    --color-danger: var(--red-500);
    --bs-danger-rgb: 239, 68, 68;

    --highlight-bg: #FEFF3F;
    --highlight-color: var(--true-gray-900);

    --text-on-primary: var(--white);
    --text-muted: var(--true-gray-500);

    --link-color: var(--blue-400);
    --link-hover-color: var(--blue-300);
    --link-hover-decoration: none;

    --border-color: hsl(213, 24%, 91%);
}

/* -------------------------------------------------------------------------- */
/*                                   DETAIL                                   */
/* -------------------------------------------------------------------------- */

/* Detail Page styles
/* ------------------------------------------------------------------------- */
.ea-detail .form-column .form-fieldset-body {
  padding-bottom: 7px;
  padding-top: 5px;
}

.ea-detail .form-column .form-fieldset-body.without-header {
  padding-bottom: 10px;
  padding-top: var(--bs-gutter-x);
}

.ea-detail .field-group {
  display: flex;
  margin-bottom: 12px;
}

.ea-detail .field-group .field-label {
  color: var(--form-label-color);
  font-size: var(--font-size-base);
  font-weight: 500;
  margin: 0 15px 0 0;
  padding: 0 0 1px 0;
  text-align: right;
  width: 130px;
}

.ea-detail .field-group .field-label:empty {
  display: none;
}

.ea-detail .field-group .field-label div[data-bs-toggle="tooltip"] {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--detail-label-tooltip-underline-color);
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.tooltip.ea-detail-label-tooltip {
  --bs-tooltip-max-width: 350px;
  --bs-tooltip-border-radius: var(--border-radius);
  --bs-tooltip-padding-x: 20px;
  --bs-tooltip-padding-y: 10px;
  --bs-tooltip-opacity: 1;
}

.tooltip.ea-detail-label-tooltip .tooltip-inner {
  font-size: 13px;
  text-align: start;
}

.ea-detail .field-group .field-value {
  flex: 1;
  min-width: 66%;
}

.ea-detail .field-group.field-textarea .field-value,
.ea-detail .field-group.field-text_editor .field-value {
  max-height: 350px;
  max-width: 80ch;
  overflow-y: auto;
}

/* for boolean fields, flip the label <-> value order because the label is
     usually a medium-long string of text and the value is always tiny (YES/NO) */
.ea-detail .field-group.field-boolean {
  flex-direction: row-reverse;
}

.ea-detail .field-group.field-boolean .field-label {
  flex: 1;
  min-width: 66%;
  margin: 0 0 0 15px;
  text-align: left;
}

.ea-detail .field-group.field-boolean .field-value {
  flex: unset;
  min-width: 0;
  text-align: right;
  width: 130px;
}

/* -------------------------------------------------------------------------- */
/*                                 PROPERTIES                                 */
/* -------------------------------------------------------------------------- */

/* Properties (the styles applied to properties in INDEX and DETAIL pages)
/* -------------------------------------------------------------------------  */

/* Array field */
.field-array ul {
  margin-bottom: 0;
  padding-left: 1.2em;
}

.field-array li+li {
  margin-top: 4px;
}

/* Avatar field */
.field-avatar .image-avatar {
  border-radius: var(--border-radius);
  border: 0;
  box-shadow: none;
}

/* Boolean field */
.field-boolean .badge {
  min-width: 33px;
  text-transform: uppercase;
}

/* Boolean values don't use "true = green, false = red" on purpose because being FALSE
     or TRUE can be good or bad depending on the context, so red/green doesn't always work */
.field-boolean .badge-boolean-false {
  background: var(--badge-boolean-false-bg);
  border: 0;
  box-shadow: var(--badge-boolean-false-box-shadow);
  color: var(--badge-boolean-false-color);
}

.field-boolean .badge-boolean-true {
  background: var(--badge-boolean-true-bg);
  border: 0;
  box-shadow: var(--badge-boolean-true-box-shadow);
  color: var(--badge-boolean-true-color);
}

/* CodeEditor field */
.field-code_editor .form-widget {
  flex: 1;
}

.field-code_editor dt {
  max-height: 480px;
  overflow-y: auto;
}

/* Collection field */
.form-widget-compound .collection-empty {
  margin-bottom: 10px;
  padding-top: 5px;
}

.form-group.field-collection label:empty {
  display: none;
}

/* this is the label of each array elements (it's probably OK to always hide it) */
.form-group.field-array .form-widget .form-group {
  padding: 6px 0;
}

.form-group.field-array .form-widget .form-group label {
  display: none;
}

.form-group.field-array .field-collection-item+.field-collection-item {
  margin-top: 5px;
}

.form-group.field-array .field-collection-item {
  display: flex;
}

.form-group.field-collection .accordion {
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 0 1px var(--form-input-border-color);
}

.form-group.field-collection .accordion .form-group {
  padding: 0;
}

.form-group.field-collection .accordion-header {
  padding-right: 28px;
  position: relative;
}

.form-group.field-collection .accordion-header:hover {
  background: var(--form-type-collection-item-collapsed-hover-bg);
  box-shadow: inset 0 0 0 1px var(--form-input-border-color);
}

.form-group.field-collection .accordion-header .accordion-button {
  font-size: var(--font-size-base);
}

.form-group.field-collection .accordion-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 var(--form-input-border-color);
}

.form-group.field-collection .field-collection-item-first .accordion-item,
.form-group.field-collection .field-collection-item-first .accordion-header {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.form-group.field-collection .field-collection-item-last .accordion-item,
.form-group.field-collection .field-collection-item-last .accordion-header {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.form-group.field-collection .field-collection-item.field-collection-item-last .accordion-item {
  box-shadow: none;
}

.form-group.field-collection .accordion-item .form-group {
  align-items: flex-start;
  display: flex;
  padding: 12px 0;
}

.form-group.field-collection .accordion-item .form-group>label,
.form-group.field-collection .accordion-item .form-group legend.col-form-label {
  font-weight: 500;
  margin: 3px 10px 0 0;
  padding: 0;
  width: 20%;
}

.form-group.field-collection .accordion-item .accordion-body .form-widget {
  flex: 1;
}

.form-group.field-collection .accordion-button,
.form-group.field-collection .accordion-button:hover {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-color);
  flex: 1;
  padding: 8px 7px;
}

.form-group.field-collection .accordion-button:after {
  /* hides the default collapse marker */
  display: none;
}

.form-group.field-collection .accordion-button i {
  transition: transform .2s ease-in-out;
}

.form-group.field-collection .accordion-button:not(.collapsed) i {
  transform: rotate(90deg);
}

.form-group.field-collection .accordion-button .form-collection-item-collapse-marker {
  color: var(--form-collection-item-collapse-marker-color);
  margin: 0 8px 0 4px;
}

.form-group.field-collection .field-collection-add-button {
  margin-top: 5px;
}

.form-group.field-collection .field-collection-delete-button {
  position: absolute;
  top: 1px;
  right: 5px;
}

/* Color field */
.field-color .color-sample {
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gray-300);
  display: inline-block;
  height: 19px;
  width: 45px;
}

/* Country field */
.field-country .country-flag {
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--field-country-flag-border-color);
  margin: 0 6px 1px 0;
  max-height: 17px;
  vertical-align: text-top;
}

.datagrid .field-country>span+span,
.datalist .field-country dd>span+span {
  margin-left: 10px;
}

.field-country .ts-control .country-name-flag,
.field-country .ts-dropdown-content .country-name-flag .country-flag {
  margin-bottom: 0;
}

.field-country .ts-wrapper.multi .ts-control>div {
  margin-bottom: 5px;
}

.field-country .ts-wrapper.multi .ts-control .country-name-flag {
  margin-right: 25px;
}

.field-country .ts-wrapper.multi.plugin-remove_button .item .remove {
  border-color: var(--form-type-autocomplete-multi-item-border-color);
}

/* Currency field */
.field-currency .badge-currency {
  border: 2px solid var(--gray-300);
  display: inline-block;
  font-size: 12px;
  padding: 2px 4px;
  text-transform: uppercase;
}

/* Date, Time and DateTime fields */
.field-datetime input[type="datetime-local"].form-control,
.field-date input[type="date"].form-control,
.field-time input[type="time"].form-control {
  width: auto;
  max-width: 100%;
}

/* Language field */
.field-language .badge-language {
  border: 2px solid var(--field-language-badge-border-color);
  box-shadow: none;
  display: inline-block;
  font-size: 12px;
  padding: 2px 4px;
  text-transform: uppercase;
}

/* Text editor field */
.field-text_editor dt {
  max-height: 480px;
  overflow-y: auto;
}

/* -------------------------------------------------------------------------- */
/*                                    FORMS                                   */
/* -------------------------------------------------------------------------- */

input[disabled] {
  cursor: not-allowed;
}

.form-inline {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
}

/* Base form groups */
.form-group {
  padding: 0 0 24px;
}

.form-group label,
.form-group legend.col-form-label {
  color: var(--form-label-color);
  font-size: var(--font-size-base);
  /* font-weight: 500; */
  margin: 0;
  padding: 0 0 8px 0;
}

.form-check .form-check-input {
  border-color: var(--form-type-check-input-border-color);
  height: 15px;
  width: 15px;
}

.form-check:not(.form-switch) .form-check-input:not(:checked) {
  background-color: unset;
}

/* Used in checkbox and radio buttons */
label.form-check-label {
  cursor: pointer;
  font-weight: normal;
}

.form-group label.form-check-label.required:after {
  display: none;
}

.form-widget .form-check+.form-check {
  margin-top: 5px;
}

.form-group label.required:after,
.form-group .col-form-label.required:after {
  background: var(--color-danger);
  border-radius: 50%;
  content: '';
  display: inline-block;
  filter: opacity(75%);
  position: relative;
  right: -2px;
  top: -8px;
  z-index: var(--zindex-700);
  height: 4px;
  width: 4px;
}

/* Form widgets (inputs, selects, etc.) */
.form-widget {}

.form-widget .form-help {
  color: var(--form-help-color);
  display: block;
  font-size: var(--font-size-sm);
  margin-top: 5px;
  transition: color 0.5s ease;
}

.form-widget:focus-within .form-help {
  color: var(--form-help-active-color);
}

.form-widget input.form-control,
.form-widget textarea.form-control,
.form-widget .form-select {
  /* background-color: var(--form-control-bg); */
  background-repeat: no-repeat;
  /* see https://github.com/EasyCorp/EasyAdminBundle/issues/5197 */
  /* border: 1px solid var(--form-input-border-color); */
  box-shadow: var(--form-input-shadow);
  color: var(--form-input-text-color);
  font-size: .875rem;
  height: 30px;
  padding: 3px 7px 4px;
  white-space: nowrap;
  word-break: keep-all;
  transition: box-shadow .08s ease-in, color .08s ease-in;
}

.form-widget input.form-control.is-invalid,
.form-widget textarea.form-control.is-invalid,
.form-widget .form-select.is-invalid,
.field-collection-item.field-collection-item-complex.is-invalid,
.form-widget input.form-control.is-invalid:focus,
.form-widget textarea.form-control.is-invalid:focus,
.form-widget .form-select.is-invalid:focus,
.field-collection-item.field-collection-item-complex.is-invalid:focus {
  background-image: none;
  border: 1px solid var(--form-input-error-border-color);
  box-shadow: var(--form-input-error-shadow);
}

.form-widget input.form-check-input.is-invalid {
  border: 1px solid var(--form-input-error-border-color);
  box-shadow: var(--form-input-error-shadow);
}

.form-widget .form-control:disabled,
.form-widget .form-control[readonly],
.form-widget .form-select:disabled,
.form-widget .form-select[readonly] {
  background-color: var(--form-control-disabled-bg);
  border-color: var(--form-input-border-color) !important;
  box-shadow: none !important;
  color: var(--form-control-disabled-color);
  cursor: not-allowed;
}

body.ea-dark-scheme .form-widget .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-widget .form-select[multiple] {
  height: auto;
  background-image: none;
  padding: 0;
}

.form-widget input.form-check-input {
  border: 1px solid var(--form-type-check-input-border-color);
  box-shadow: var(--form-type-check-input-box-shadow);
}

.form-widget input.form-control:focus,
.form-widget textarea.form-control:focus,
.form-widget .form-select:focus,
.form-widget .custom-file-input:focus~.custom-file-label,
.form-widget input.form-check-input:focus {
  border-color: var(--form-input-hover-border-color);
  box-shadow: var(--form-input-hover-shadow);
  outline: 0;
}

.form-check-input:checked {
  background-color: var(--form-type-check-input-checked-bg);
}

.form-check-input:focus {
  box-shadow: var(--form-input-hover-shadow);
}

.form-widget .form-control+.input-group-append {
  color: var(--gray-600);
  height: 30px;
}

.form-widget .form-control+.input-group-append i {
  color: var(--gray-600);
}

.form-widget input.form-control[data-ea-align=right] {
  text-align: right;
}

.form-widget input.form-control.is-invalid[data-ea-align=right] {
  padding-right: 30px;
}

.form-widget textarea.form-control {
  height: auto;
  line-height: 1.6;
  white-space: pre-wrap;
}

.form-widget .form-select {
  background-position: right 5px center;
  padding: 3px 28px 4px 7px;
}

.ts-dropdown.form-select {
  height: auto;
}

/* Checkbox widgets */
.form-widget .form-check {
  margin: 0;
  padding: 0;
}

label.form-check-label {
  margin: 0;
  padding: 0 0 0 5px;
}

.form-check .form-check-input {
  float: none;
  margin-left: 0;
  margin-top: 2px;
}

.form-check-inline+.form-check-inline {
  margin-left: 15px;
}

/* in Bootstrap custom file widgets, the label is used to simulate the file input */
.field-file .custom-file,
.field-file .custom-file-input {
  height: 30px;
}

.field-file .custom-file label.custom-file-label {
  height: 30px;
  margin: 0;
  max-width: 350px;
  overflow: hidden;
  padding: 3px 7px 5px;
  text-align: left;
}

.field-file .custom-file label.custom-file-label:after {
  color: var(--text-color);
  content: "\f07c";
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-size: 17px;
  height: 28px;
  line-height: 28px;
  padding: 0 8px;
  vertical-align: middle;
}

/* Date-time widgets */
.field-date .form-widget,
.field-time .form-widget,
.field-datetime .form-widget {
  margin: 0;
}

.datetime-widget select,
.datetime-widget .input-group>.form-select {
  min-width: max-content;
  -webkit-appearance: none;
  /* needed for Safari */
}

.datetime-widget+.datetime-widget {
  margin-left: 10px;
}

.datetime-widget select+select {
  margin-left: 4px;
}

.datetime-widget-time select {
  margin: 0 0 0 2px;
}

.datetime-widget-time select:first-child {
  margin-left: 0;
}

.datetime-widget-time select:last-child {
  margin-right: 0;
}

/* Utilities to create common form fields (long, short, etc.) */
.short .form-widget {
  flex: 0 0 20% !important;
}

.long .form-control,
.large .form-control {
  max-width: unset !important;
}

.large .input.form-control {
  font-size: 18px !important;
}

.large textarea.form-control {
  height: 500px;
  max-width: unset !important;
}

.code input.form-control,
.code textarea.form-control {
  font-family: monospace !important;
}

.field-group .long .form-control,
.field-group .large .form-control {
  flex: 0 0 100% !important;
  max-width: unset !important;
}

.field-group .large textarea.form-control {
  flex: 0 0 100% !important;
  height: 500px;
  max-width: unset !important;
}

/* Form tabs */
.form-tabs-tablist .nav-tabs {
  background: transparent;
  border: 0;
  box-shadow: 0 2px 0 var(--form-tabs-border-color);
  margin: 0px 0px 20px;
  padding-left: 0px;
}

.form-tabs-tablist .nav-tabs a,
.form-tabs-tablist .nav-tabs a:hover {
  border: 0;
  color: var(--text-color);
  font-size: var(--font-size-base);
  font-weight: 500;
  margin: 0;
  padding: 4px 14px 8px;
}

.form-tabs-tablist .nav-tabs .nav-item:first-child a,
.form-tabs-tablist .nav-tabs .nav-item:first-child a:hover {
  padding-left: 0;
}

.form-tabs-tablist .nav-tabs .tab-nav-item-icon {
  color: var(--text-muted);
  margin-right: 5px;
}

.form-tabs-tablist .nav-tabs .nav-link:focus-visible {
  box-shadow: none;
  outline: 0;
}

.form-tabs-tablist .nav-tabs .nav-link.active {
  background: transparent;
  color: var(--link-color);
  position: relative;
}

.form-tabs-tablist .nav-tabs .nav-link.active .tab-nav-item-icon {
  color: var(--link-color);
}

.form-tabs-tablist .nav-tabs .nav-link.active:before {
  content: '';
  width: 100%;
  height: 2px;
  background: var(--body-bg);
  position: absolute;
  bottom: -2px;
  left: 0;
}

.form-tabs-tablist .nav-tabs .nav-link.active:after {
  content: '';
  width: calc(100% - 2 * var(--form-tabs-gutter-x));
  height: 2px;
  background: var(--link-color);
  position: absolute;
  bottom: -2px;
  left: var(--form-tabs-gutter-x);
}

.form-tabs-tablist .nav-tabs .nav-item:first-child .nav-link.active:after {
  width: calc(100% - var(--form-tabs-gutter-x));
  left: 0;
}

.form-tabs-tablist .nav-tabs .nav-item .badge {
  line-height: 1;
  margin-left: 4px;
  padding: 3px 6px;
}

.form-tabs-content .tab-help {
  color: var(--form-tabs-help-color);
  margin-top: -10px;
  margin-bottom: 15px;
}

/* Form columns */
.form-column .form-column-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.form-column .form-column-title .form-column-title-content {
  align-items: center;
  display: flex;
  color: var(--form-column-header-color);
  font-size: 17px;
  font-weight: bold;
  padding: 0 0 2px;
}

.form-column .form-column-title .form-column-icon {
  color: var(--form-column-icon-color);
  margin-right: 10px;
}

.form-column .form-column-title .form-column-help {
  color: var(--form-column-help-color);
  flex: 1;
  margin: 0;
}

.form-column .field-form_fieldset {
  margin-bottom: var(--bs-gutter-x);
}

.form-column .form-fieldset {
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 0 1px var(--form-fieldset-border-color);
}

.form-column .form-fieldset-header {
  box-shadow: none;
  padding: calc(var(--bs-gutter-x) - 5px) var(--bs-gutter-x) calc(var(--bs-gutter-x) / 2);
}

.form-column .form-fieldset-header :has(.form-fieldset-title-content.collapsed) {
  padding-top: calc(var(--bs-gutter-x) / 2);
}

.form-column .form-fieldset-header .form-fieldset-title .form-fieldset-title-content {
  box-shadow: none;
  padding: 0;
}

.form-column .form-fieldset-header .form-fieldset-title .form-fieldset-help {
  margin-top: 2px;
}

.form-column .form-fieldset-body {
  padding: 5px var(--bs-gutter-x) 0;
}

.form-column .form-fieldset-body.without-header {
  padding: var(--bs-gutter-x) var(--bs-gutter-x) 0;
}

/* Form fieldsets */
.field-form_fieldset {
  margin-bottom: calc(1.5 * var(--bs-gutter-x));
  /* not a typo; don't use --bs-gutter-y here */
}

.form-section-empty {
  padding: 25px 10px 25px;
}

.form-fieldset-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: nowrap;
  padding: 0 0 15px;
  position: relative;
}

.form-fieldset-header .form-fieldset-collapse-marker {
  color: var(--form-fieldset-collapse-marker-color);
  font-size: 90%;
  margin: 0 10px 0 2px;
  transform: rotate(90deg);
  transition: transform .2s ease-in-out;
}

.form-fieldset-header .form-fieldset-title {
  flex: 1;
}

.form-fieldset-header .form-fieldset-title .form-fieldset-title-content {
  align-items: center;
  box-shadow: 0 1px 0 var(--form-fieldset-header-border-color);
  display: flex;
  color: var(--form-fieldset-header-color);
  font-size: 17px;
  font-weight: bold;
  padding: 0 0 5px;
}

.form-fieldset-header .form-fieldset-title .form-fieldset-title-content .not-collapsible {
  cursor: default;
}

.form-fieldset-header .form-fieldset-title .form-fieldset-title-content .collapsed .form-fieldset-collapse-marker {
  transform: rotate(0deg);
}

.form-fieldset-header .form-fieldset-title .form-fieldset-title-content .collapsible::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.form-fieldset-header .form-fieldset-title .form-fieldset-icon {
  color: var(--form-fieldset-icon-color);
  margin-right: 10px;
}

.form-fieldset-header .form-fieldset-title .form-fieldset-help {
  color: var(--form-fieldset-help-color);
  margin-top: 6px;
}

/* Form actions ("Save changes", "Delete", etc.) */
.form-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.form-actions .btn {
  margin-left: 10px;
}

/* Form errors */
.has-error .form-help,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: var(--form-help-error-color);
}

.has-error .form-widget input.form-control,
.has-error .form-widget textarea.form-control,
.has-error .form-widget .form-select,
.has-error .ea-fileupload .input-group,
.has-error .btn.input-file-container,
.has-error .CodeMirror,
.has-error .ea-text-editor-wrapper {
  box-shadow: var(--form-input-error-shadow);
}

.has-error .ea-fileupload .input-group {
  border-radius: var(--border-radius);
}

.global-invalid-feedback {
  background: var(--form-global-error-bg);
  border: var(--form-global-error-border);
  border-radius: var(--border-radius);
  color: var(--form-global-error-color);
  font-size: 14px;
  margin: 5px 0;
  padding: 6px 12px;
}

form .invalid-feedback {
  color: var(--color-danger);
  font-size: 1em;
  font-weight: 500;
  padding-top: 6px;
}

.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:not([type="checkbox"]):invalid~.form-check-label {
  color: inherit;
}

form .invalid-feedback .badge-danger {
  font-size: 0.6875rem;
  margin-right: 2px;
  padding: 3px 4px;
}

form .invalid-feedback>.d-block+.d-block {
  margin-top: 5px;
}

/* Form group inputs */
.input-group-text {
  background-color: var(--form-input-group-text-bg);
  border: 1px solid var(--form-input-group-text-border-color);
  box-shadow: var(--form-input-box-shadow);
  color: var(--form-input-text-color);
  height: 30px;
  padding: 3px 10px 5px;
}

.input-group button,
.input-group button:hover,
.input-group button:active,
.input-group button:focus {
  height: 28px;
  margin-top: 1px;
}

.input-group-append {
  margin-left: 0;
}

.input-group-prepend {
  margin-right: 0;
}

/* fileupload widgets */
.ea-fileupload .custom-file {
  height: 30px;
}

.ea-fileupload .input-group {
  flex-wrap: nowrap;
}

.ea-fileupload .input-group .btn,
.ea-fileupload .input-group .btn:hover {
  background: var(--form-input-group-text-bg);
  box-shadow: none !important;
  border-radius: 0;
  color: var(--text-color);
  font-size: 17px;
  height: 28px;
  line-height: 28px;
  margin: 0;
  padding: 0 8px;
  vertical-align: middle;
}

.ea-fileupload .input-group .btn:first-child,
.ea-fileupload .input-group .btn:hover:first-child {
  margin-left: 5px;
}

.ea-fileupload .input-group .btn:last-child,
.ea-fileupload .input-group .btn:hover:last-child {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.ea-fileupload .custom-file-input {
  cursor: pointer;
  height: calc(1.5em + .75rem + 2px);
  margin: 0;
  overflow: hidden;
  opacity: 0;
  position: relative;
  width: 100%;
  z-index: 2;
}

.ea-fileupload .custom-file-label {
  background: var(--form-control-bg);
  border-radius: var(--border-radius);
  border: 1px solid var(--form-input-border-color);
  box-shadow: var(--form-input-shadow);
  color: var(--form-input-text-color);
  height: 30px;
  left: 0;
  margin: 0 !important;
  overflow: hidden;
  padding: 3px 40px 3px 7px !important;
  position: absolute;
  text-align: left !important;
  text-overflow: ellipsis;
  top: 0;
  white-space: nowrap;
  width: 100% !important;
}

.ea-fileupload .custom-file-label::after {
  display: none;
}

.ea-fileupload .input-group-text {
  background: var(--form-input-group-text-bg);
  border: 1px solid var(--form-input-border-color);
  box-shadow: none;
  color: var(--text-muted);
  height: 30px;
  padding: 7px 0 7px 7px;
  position: absolute;
  right: 0;
  z-index: 3;
}

.ea-fileupload .fileupload-list {
  height: auto;
  margin-top: 7px;
  padding: 0;
}

.ea-fileupload .fileupload-list .fileupload-table {
  width: 100%;
}

.ea-fileupload .fileupload-list .fileupload-table td {
  padding: 3px 7px;
  border-radius: 3px;
}

.ea-fileupload .fileupload-list .fileupload-table td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

.ea-fileupload .fileupload-list .fileupload-table tr:nth-child(odd) td {
  background-color: #f5f7ff;
}

.ea-fileupload .fileupload-list .fileupload-table td.file-size {
  color: #4e566d;
}

/* Image/file vich uploads */
.ea-vich-image img {
  box-shadow: 0 0 0 4px var(--white), 0px 0px 4px 3px var(--gray-600);
  margin: 6px 4px 12px;
  max-height: 300px;
  max-width: 100%;
}

.ea-vich-file-name {
  display: block;
  margin: 4px 0 8px;
}

.ea-vich-file-name .fa {
  font-size: 18px;
}

/* this element should use 'display: flex', but that doesn't work with
 the CSS trick used to customize the <input type="file" /> fields. */

.ea-vich-image-actions>div,
.ea-vich-file-actions>div {
  float: left;
  margin-right: 4px;
}

.ea-vich-image-actions:after,
.ea-vich-file-actions:after {
  clear: left;
  content: "";
  display: block;
}

.ea-vich-image-actions .field-checkbox,
.ea-vich-file-actions .field-checkbox {
  padding-top: 4px;
}

.ea-vich-image-actions .form-widget {
  flex-basis: 100%;
}

/* This CSS trick allows to customize the <input type="file" /> field entirely
 as explained in https://gist.github.com/barneycarroll/5244258 */
.input-file-container {
  overflow: hidden;
  position: relative;
}

.input-file-container [type=file] {
  cursor: inherit;
  display: block;
  font-size: 999px;
  filter: opacity(0);
  min-height: 100%;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
}

/* Fix "Browse" button for regular file inputs */
.form-control::file-selector-button,
.form-control::-webkit-file-upload-button {
  color: var(--button-secondary-color);
  background-color: var(--button-secondary-bg);
  box-shadow: var(--button-shadow);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button,
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: var(--button-secondary-bg);
  box-shadow: var(--button-hover-shadow);
}

/* -------------------------------------------------------------------------- */
/*                            FORM-TYPE-TEXT-EDITOR                           */
/* -------------------------------------------------------------------------- */
.ea-text-editor-wrapper {
  background: var(--form-control-bg);
  border: 1px solid var(--form-input-border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--form-input-shadow);
  padding: 7px;
}
.ea-text-editor-wrapper:focus,
.ea-text-editor-wrapper:focus-within {
  border-color: var(--form-input-hover-border-color);
  box-shadow: var(--form-input-hover-shadow);
  outline: 0;
}
trix-toolbar {
  background:  var(--form-type-text-editor-toolbar-bg);
  border-bottom: 1px solid var(--form-input-border-color);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  margin: -7px -7px 10px;
  padding: 0;
}
trix-toolbar .trix-button-row {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
trix-toolbar .trix-button-group {
  border: 0;
  margin-bottom: 0;
}
trix-toolbar .trix-button {
  border: 0;
  color: var(--form-type-text-editor-toolbar-button-color);
  margin: 0;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: 0;
}
trix-toolbar .trix-button:hover {
  background: var(--form-type-text-editor-toolbar-button-hover-color);
}
trix-toolbar .trix-button.trix-active {
  background: var(--form-type-text-editor-toolbar-button-active-bg);
  color: var(--form-type-text-editor-toolbar-button-active-color);
}
trix-toolbar .trix-button.trix-button--icon {
  height: 32px;
  width: 32px;
}
trix-toolbar .trix-button.trix-button--icon::before {
  background-size: 22px;
  background-position: center;
  float: left;
  height: 32px;
  width: 32px;
  text-indent: -999em;
}
.ea-dark-scheme trix-toolbar .trix-button.trix-button--icon::before {
  filter:  invert(1);
}
trix-editor {
  border: 1px solid #dbdfea;
  padding: 3px;
}

trix-toolbar .trix-dialog {
  background: var(--form-type-text-editor-dialog-bg);
  box-shadow: var(--form-type-text-editor-dialog-box-shadow);
  border: 0;
  font-size:  12px;
}

.trix-content pre {
  background-color: var(--form-type-text-editor-content-pre-bg);
  border-radius: var(--border-radius);
  color: var(--form-type-text-editor-content-pre-color);
  font-family:  var(--font-family-monospace);
}

/* there's no way to disable buttons from the Trix toolbar except by hiding them via CSS
 see https://github.com/basecamp/trix/issues/402 */
trix-toolbar .trix-button-group--file-tools,
trix-toolbar .trix-button-group--history-tools {
  display: none;
}
@media(min-width: 1200px) {
  trix-toolbar .trix-button-group--history-tools {
      display: flex;
  }
}