/* # Theming */
/* ## Basic pallet definition for theming --*/
:root {

    /* --- Theme Color Pallet -- */
    /* --- Theme Spacing Pallet -- */
    /* --- Theme Shadows/Elevation Pallet -- */
    /* --- Theme Font Pallet -- */
    --i4d-core-font-family-display: Arial,  Helvetica, sans-serif;
    --i4d-core-font-family-heading: Arial, Helvetica, sans-serif;
    --i4d-core-font-family-body: sans-serif;
    --i4d-core-font-family-ui: Arial, Helvetica, sans-serif;
}

/* -- ## Alias definitions for the application -- */
/* -- Alias should reference only basic pallet values */
/* -- Use only Alias definition in application -- */
:root {
    --i4d-light-background: #ffffff;
    --i4d-info-background-color: #4b5569;
    --i4d-main-background-color: #f5f5f5;
    --i4d-accent-background-color: #363636;
    --i4d-secondary-background-color: #555555;
    --i4d-opacity-background-color: rgba(54, 54, 54, 0.9);
    --i4d-red-color: #da0907;
    --i4d-text-danger: #f94700;
    --i4d-green-color: #7eb732;
    --i4d-orange-color: #f0ad4e;
    --i4d-blue-color: #3a9ce4;
    --i4d-border-color: #363636;
    --i4d-border-color-inverted: #ffffff;
    --i4d-border-dimm-color-inverted: #ddd;
    --i4d-text-color-inverted: #ffffff;
    --i4d-text-dimm-color-inverted: #f5f5f5;
    --i4d-text-color: #333333;
    --i4d-dimm-text-color: #6b6b6b;
    --i4d-accent-text-color-inverted: #ddd;
    --i4d-dim-light-background: #e3e4e5;
    --i4d-dark-gray: #6b6b6b;
    --i4d-gray: #ccc;
    --i4d-wf-red: #db2f00;

    /* general */
    --i4d-body-background: #f5f5f5;
    --i4d-font-family: Arial, Helvetica, sans-serif;
    --i4d-accent-color: #da0907;
    /* header */
    --i4d-header-background: #363636;
    --i4d-header-border-color: #6b6b6b;
    --i4d-header-text-color: #dddddd;
    --i4d-tab-header-background: #555555;
    --i4d-tab-header-foreground: #ffffff;
    --i4d-tab-header-hover-background: #979797;
    --i4d-tab-header-hover-foreground: #ffffff;

    /* sidebar */
    --i4d-side-menu-g-background: #363636;
    --i4d-side-menu-g-border-color: #555555;
    --i4d-side-menu-g-item-background: #00000000;
    --i4d-side-menu-g-item-hover: #555555;
    --i4d-side-menu-g-separator-color: #979797;
    --i4d-side-menu-c-background: #555555;
    --i4d-side-menu-c-item-hover: #363636;
    --i4d-side-menu-c-border-color: #363636;
    --i4d-spy-nav-background: #555555;
    --i4d-spy-nav-hover-background: #363636;

    /* buttons */
    --i4d-general-button-action-color: #da0907;
    --i4d-general-button-background-color: #363636;
    --i4d-editor-action-button-foreground: #ffffff;
    --i4d-panel-button-icon-color: #ffffff;

    /* panels */
    --i4d-dynamic-tab-header-background: #555555;
    --i4d-dynamic-tab-header-foreground: #ffffff;
    --i4d-dynamic-tab-background: #363636;
    --i4d-dynamic-tab-border-color: #363636;
    --i4d-component-info-foreground: #cccccc;
    --i4d-panel-collapse-btn-background: #363636;
    --i4d-panel-collapse-btn-foreground: #ffffff;
    --i4d-side-menu-g-item-active: #da0907;

    /* controls */
    --i4d-accordion-area-background: #363636;
    --i4d-accordion-area-border-color: #555555;
    --i4d-accordion-area-header-background: #363636;
    --i4d-accordion-area-header-border-color: #363636;
    --i4d-accordion-area-header-foreground: #e5b369;
    --i4d-panel-label-foreground: #cccccc;
    --i4d-property-value-border-color: #6b6b6b;
    --i4d-property-value-border-color--active:#ffc876;
    --i4d-property-value-background: #363636;
    --i4d-property-value-foreground: #ffffff;
    --i4d-panel-card-background: #333333;
    --i4d-properties-container-foreground: #ffffff;
    --i4d-toolbox-icon-text-color: #dddddd;
    --i4d-toolbox-icon-color: #dddddd;

    /* components */
    --i4d-sidebar-icon-accent-color: #ff9800;
    --i4d-sidebar-icon-color: #ffffff;
    --i4d-header-icon-accent-color: #ff9800;
    --i4d-header-icon-color: #ffffff;
    --i4d-action-icon-accent-color: #ff9800;
    --i4d-action-icon-color: #ffffff;
    --i4d-icon-undo-color: #03a9f4;
    --i4d-icon-redo-color: #ff9800;
    --i4d-control-border-color: #6b6b6b;
    --i4d-editor-action-button-fill: #db2f00;
    --i4d-action-card-title-foreground: #363636;
    --i4d-action-card-text-foreground: #363636;
    --i4d-action-project-text-foreground: #363636;
    --i4d-action-project-background: #f5f5f5;

    /* hint's messenges */
    --i4d-ui-warning: #ff9800;

}

/*login consent*/
:root {
    --i4d-welcome-title-foreground:#555555;
    --i4d-login-label-foreground:#555555;
    --i4d-login-form-border-color:#ccc;
    --i4d-login-button-background:#da0808;
    --i4d-login-button-foreground: #ffffff;
    --i4d-login-button-hover-background:#363636;
    --i4d-consent-button-background:#da0808;
    --i4d-consent-button-foreground: #ffffff;
    --i4d-consent-button-hover-background:#363636;
    --i4d-error-color: #ff3d00;
    --i4d-error-message-color: #F44336;
}

/*designer and control-center*/
.i4d-landing-logo {
    background-image: url(./logo.png);
    background-size: contain;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    margin-left: 5px;
}

/*login consent*/
.i4d-designer-logo {
    background-image: url(./logo-wide.png);
    height: 48px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: 60px;
    animation: fadeSlideDown 0.3s;
}