/* RUI CSS variables */
:root {
    --rui-body-bg-with-display-blocks: #F5F8FF;
    --rui-btn-border-radius: 16px;
    --rui-btn-border-style: solid;
    --rui-btn-border-width: 1px;
    --rui-btn-box-shadow: none;
    --rui-btn-font-size-md: 13px;
    --rui-btn-font-weight: 500;
    --rui-btn-line-height-md: 1.42857143;
    --rui-btn-padding-md: 5px 11px;
    --rui-btn-primary-bg-hover: #0648b1;
    --rui-btn-primary-bg: #085ce5;
    --rui-btn-primary-border: #085ce5;
    --rui-btn-primary-fg-hover: #fff;
    --rui-btn-primary-fg: #fff;
    --rui-btn-secondary-bg-disabled: #e9e9e9;
    --rui-btn-secondary-bg-hover: #e8edff;
    --rui-btn-secondary-bg: #fff;
    --rui-btn-secondary-border-disabled: #cdcdcd;
    --rui-btn-secondary-border: #aec8f5;
    --rui-btn-secondary-fg-disabled: #999;
    --rui-btn-secondary-fg-hover: #2f648f;
    --rui-btn-secondary-fg: #085ce5;
    --rui-content-primary-bg: #fff;
    --rui-display-block-bg: white;
    --rui-display-block-border-color: #dbe2ff;
    --rui-display-block-border-radius: 8px;
    --rui-display-block-padding: 17px;
    --rui-font-family: "Noto Sans", Roboto, Arial, -apple-system, system-ui, sans-serif;
    --rui-font-family-chrome: Gellix, "Noto Sans", Roboto, Arial, -apple-system, system-ui, sans-serif;
    --rui-font-size: 13px;
    --rui-font-weight: 400;
    --rui-form-disabled-bg: #eee;
    --rui-function-title: #06185f;
    --rui-function-view-padding: 15px;
    --rui-function-view-title-size: 26px;
    --rui-line: #e0e8f5;
    --rui-main-header-bg: #203660;
    --rui-notification-error-accent: #dc796a;
    --rui-notification-error-bg: #fde1df;
    --rui-notification-info-accent: #5b8adc;
    --rui-notification-info-bg: #ebf2ff;
    --rui-notification-info-fg: #666;
    --rui-notification-warning-accent: #dbaa24;
    --rui-notification-warning-bg: #f8edd8;
    --rui-outline-offset-btn: 0;
    --rui-outline-style: solid;
    --rui-outline-width: 1px;
    --rui-text-bright: #203660;
    --rui-text-error: #e13329;
    --rui-text-regular: #09175b;
}

/* General section */
html,
body {
    margin: 0;
}

body {
    position: fixed;
    width: 100%;
    height: 100%;
}

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

.jha-bright-text-label {
    color: var(--rui-text-bright, #203660);
    font-weight: 600;
}

.jha-red-text-label {
    color: var(--rui-text-error, #e13329);
    font-weight: 600;
}

.jha-text-centered {
    text-align: center;
}

.fps-logo {
    height: 50px;
    background-color: var(--rui-main-header-bg, #203660);
    position: relative;
}

.fps-logo .fps-logo-img {
    height: 50px;
    padding: 8px 37px;
}

/* Layout section */
.fps-container {
    overflow: auto;
    height: 100%;
    background-color: var(--rui-body-bg-with-display-blocks, #F5F8FF);
}

.rui-function-view {
    padding: var(--rui-function-view-padding, 15px);
}

.rui-function-view .rui-function-view-title {
    color: var(--rui-function-title, #06185f);
    font-family: var(--rui-font-family-chrome, Gellix, "Noto Sans", Roboto, Arial, -apple-system, system-ui, sans-serif);
    font-size: var(--rui-function-view-title-size, 26px);
    font-weight: 600;
    padding: 10px 0px 20px;
}

.rui-function-view .rui-display-block {
    background: var(--rui-display-block-bg, white);
    border-radius: var(--rui-display-block-border-radius, 8px);
    display: flex;
    flex-direction: column;
    padding: var(--rui-display-block-padding, 17px);
    box-shadow: 1px 1px 1px 0px var(--rui-display-block-border-color, #dbe2ff);
    font-family: var(--rui-font-family, "Noto Sans", Roboto, Arial, -apple-system, system-ui, sans-serif);
    font-size: var(--rui-font-size, 13px);
    font-weight: var(--rui-font-weight, 400);
}

/* Buttons section */
.rui-btn {
    background-image: none;
    border-radius: var(--rui-btn-border-radius, 16px);
    border-style: var(--rui-btn-border-style, solid);
    border-width: var(--rui-btn-border-width, 1px);
    box-shadow: var(--rui-btn-box-shadow, none);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: var(--rui-font-family-chrome, Gellix, "Noto Sans", Roboto, Arial, -apple-system, system-ui, sans-serif);
    font-size: var(--rui-btn-font-size-md, 13px);
    font-weight: var(--rui-btn-font-weight, 500);
    line-height: var(--rui-btn-line-height-md, 1.42857143);
    margin-bottom: 0;
    min-height: 32px;
    min-width: 38px;
    padding: var(--rui-btn-padding-md, 5px 11px);
    position: relative;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    transition: background 0.25s;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

.rui-btn>span {
    position: relative;
    top: 1px;
    padding: 0 4px;
}

.rui-btn-secondary {
    background-color: var(--rui-btn-secondary-bg, #fff);
    border-color: var(--rui-btn-secondary-border, #aec8f5);
    color: var(--rui-btn-secondary-fg, #085ce5);
}

.rui-btn-secondary:hover {
    background-color: var(--rui-btn-secondary-bg-hover, #e8edff);
    border-color: var(--rui-btn-secondary-border, #aec8f5);
    color: var(--rui-btn-secondary-fg-hover, #2f648f);
}

.rui-btn-primary {
    background-color: var(--rui-btn-primary-bg, #085ce5);
    border-color: var(--rui-btn-primary-border, #085ce5);
    color: var(--rui-btn-primary-fg, #fff);
}

.rui-btn-primary:hover {
    background-color: var(--rui-btn-primary-bg-hover, #0648b1);
    border-color: var(--rui-btn-primary-bg-hover, #0648b1);
    color: var(--rui-btn-primary-fg-hover, #fff);
}

.rui-btn-primary:disabled {
    background-color: var(--rui-btn-secondary-bg-disabled, #e9e9e9);
    border-color: var(--rui-btn-secondary-border-disabled, #cdcdcd);
    color: var(--rui-btn-secondary-fg-disabled, #999);
    cursor: not-allowed;
}

/* Inline notifications */
.rui-inline-notification {
    background-color: var(--rui-notification-info-bg, #ebf2ff);
    border-radius: 10px;
    margin: 0 0 15px 0;
    padding: 15px;
}

.rui-inline-notification-error {
    background-color: var(--rui-notification-error-bg, #fde1df);
}

.rui-inline-notification-warning {
    background-color: var(--rui-notification-warning-bg, #f8edd8);
}

.rui-inline-notification .rui-inline-notification-container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    top: 1px;
    color: var(--rui-notification-info-fg, #666);
}

.rui-inline-notification-icon {
    margin-right: 10px;
}

.rui-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
    display: inline-block;
    color: var(--rui-notification-info-accent, #5b8adc);
}

.rui-icon-error {
    color: var(--rui-notification-error-accent, #dc796a);
}

.rui-icon-warning {
    color: var(--rui-notification-warning-accent, #dbaa24);
}

.rui-icon-information:before {
    content: "\2139";
}

.rui-icon-error:before {
    content: "\274e";
}

.rui-icon-warning:before {
    content: "\26a0";
}

/* Form fields */
.rui-form-label {
    color: var(--rui-text-regular, #09175b);
    font-family: var(--rui-font-family, "Noto Sans", Roboto, Arial, -apple-system, system-ui, sans-serif);
    font-size: var(--rui-font-size, 13px);
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}

.rui-form-field {
    background-color: var(--rui-content-primary-bg, #fff);
    border: 1px solid var(--rui-line, #e0e8f5);
    border-radius: 6px;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--rui-text-regular, #09175b);
    display: block;
    font-family: var(--rui-font-family, "Noto Sans", Roboto, Arial, -apple-system, system-ui, sans-serif);
    font-size: var(--rui-font-size, 13px);
    padding: 10px 14px;
    width: 100%;
}

.rui-form-field:focus {
    border-color: var(--rui-btn-primary-border, #085ce5);
    outline: none;
}