:root {
    --rz-primary: #006225;
    --rz-secondary: #bb892d;
    --rz-success: #00b344;
    --rz-danger: #F4443A;
}

.help-text ul {
    list-style: disc;
    padding-left: 1em;
    margin-left: 1em;
    padding-right: 1em;
    margin-right: 1em;
}

/* The angle the highlight has travelled around the outline. Registering it as an
   <angle> is what lets it be interpolated - a plain custom property can't animate. */
@property --pulse-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Styling the element (e.g., a notification dot) */
.pulse-element {

    --pulse-width: 3px; /* Thickness of the outline */
    --pulse-color: 187, 137, 45; /* Highlight colour */
    --pulse-tail: 140deg; /* How much of the outline the highlight covers */

    background-color: #de5448; /* A red color */

    position: relative;
    z-index: 1;

}

/* The travelling outline. It rides on the element's own edge rather than outside
   it, so nothing can clip it no matter how tight the container is. */
.pulse-element::after {

    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    /* The ring below is carved out of the padding, so the padding has to sit
       inside the box. Set it here rather than relying on a global reset. */
    box-sizing: border-box;

    /* A single bright arc in a conic gradient. Spinning the gradient's start
       angle walks that arc around the element. */
    background: conic-gradient(from var(--pulse-angle),
    rgba(var(--pulse-color), 0) 0deg,
    rgba(var(--pulse-color), 0) calc(360deg - var(--pulse-tail)),
    rgba(var(--pulse-color), 1) 350deg,
    rgba(var(--pulse-color), 0) 360deg);

    /* Punch out the middle so only a border-width ring of the gradient shows. */
    padding: var(--pulse-width);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;

    animation: pulse 2s infinite linear; /* Apply the animation */

}

/* Defining the animation using keyframes */
@keyframes pulse {
    to {
        --pulse-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pulse-element::after {
        animation: none;
        background: rgba(var(--pulse-color), 1);
    }
}

.hcp-line {
    margin-top: 8px;
    margin-bottom: 5px;
    /*border-radius: 50%;*/
    opacity: 50%;
    border-color: #bb892d;
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

/* First item colors */
/*noinspection CssUnresolvedCustomProperty*/
.account-selectbar .rz-button:nth-child(1) {
    --rz-selectbar-selected-background-color: var(--rz-secondary);
    --rz-selectbar-selected-color: var(--rz-on-secondary);
}

/* Second item colors */
/*noinspection CssUnresolvedCustomProperty*/
.account-selectbar .rz-button:nth-child(2) {
    --rz-selectbar-selected-background-color: var(--rz-primary);
    --rz-selectbar-selected-color: var(--rz-on-primary);
}


/* First item colors */
/*noinspection CssUnresolvedCustomProperty*/
.yes-no-selectbar .rz-button:nth-child(1) {
    --rz-selectbar-selected-background-color: var(--rz-success);
    --rz-selectbar-selected-color: var(--rz-on-success);
}

/* Second item colors */
/*noinspection CssUnresolvedCustomProperty*/
.yes-no-selectbar .rz-button:nth-child(2) {
    --rz-selectbar-selected-background-color: var(--rz-danger);
    --rz-selectbar-selected-color: var(--rz-on-danger);
}