@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
15,715 lines • 613 kB
CSS
@charset "UTF-8";
/**
* ATTENTION: This file is auto generated by using "themeFactory".
* But you still can change the content of this file on the very top.
*/
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/*
* Utilities
*/
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/*
* Utilities
*/
/*
* DrawerList component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-drawer-list {
--drawer-list-height: 2rem;
--drawer-list-padding-horizontal: 1rem;
--drawer-list-focus-border-width: 0.125rem;
--drawer-list-text-padding: 0.5rem;
--drawer-list-height--small: 1.5rem;
--drawer-list-height--medium: 2.5rem;
--drawer-list-height--large: 3rem;
--drawer-list-option-inner-background: var(--color-white);
--drawer-list-list-background: var(--color-white);
--drawer-list-list-line-height: var(--line-height-basis);
--drawer-list-option-disabled-background: var(--color-white);
--drawer-list-option-disabled-color: var(--color-black-20);
--drawer-list-group-title-color: var(--color-black-80);
--drawer-list-group-title-bg: var(--color-lavender);
display: block;
position: relative;
width: inherit;
min-width: inherit;
font-size: var(--font-size-small);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__portal {
--drawer-list-width: 16rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__portal__style {
position: absolute;
transition: all 300ms var(--easing-default);
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-drawer-list__portal__style {
transition: none !important;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__portal__style {
z-index: calc(var(--modal-z-index, 3200) + 300);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__portal__style--fixed {
position: fixed;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__root {
width: inherit;
min-width: inherit;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__root--portal {
position: absolute;
top: 0;
left: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__content {
width: 100%;
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__list {
position: absolute;
z-index: 3;
top: 0;
bottom: auto;
left: 0;
right: 0;
width: inherit;
min-width: inherit;
margin: 0;
padding: 0;
font-size: var(--font-size-basis);
line-height: var(--drawer-list-list-line-height);
background-color: var(--drawer-list-list-background);
transform: translateY(0);
transition: transform 200ms, opacity 160ms ease-out;
}
.eufemia-scope--10_104_0 .dnb-spacing .dnb-drawer-list__options li.dnb-drawer-list__option {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__options {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
max-height: 90vh;
padding: 0;
list-style: none;
background-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options {
min-height: 2rem;
max-height: 70vh;
transition: max-height 300ms var(--easing-default);
overflow-y: auto;
overscroll-behavior: contain;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options {
scroll-behavior: auto;
}
}
.eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: auto;
scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
}
@supports not (scrollbar-color: auto) {
.eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:vertical {
width: var(--scrollbar-track-width, 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:horizontal {
height: var(--scrollbar-track-width, 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
background-color: var(--scrollbar-track-color, #eee);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color, #888);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color, #666);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
}
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options {
transition-duration: 0.01ms;
}
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-drawer-list--scroll .dnb-drawer-list__options, .eufemia-scope--10_104_0 .dnb-drawer-list--scroll.dnb-drawer-list--no-animation .dnb-drawer-list__options {
transition: none !important;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--opened .dnb-drawer-list__options {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-drawer-list--opened .dnb-drawer-list__options {
scroll-behavior: auto;
}
}
.eufemia-scope--10_104_0 .dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options {
scroll-behavior: auto;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__group {
padding: 0;
margin: 0;
list-style: none;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__group-title {
display: block;
padding: 0.5rem 1rem;
color: var(--drawer-list-group-title-color);
background-color: var(--drawer-list-group-title-bg);
font-weight: var(--font-weight-medium);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option {
position: relative;
cursor: pointer;
margin: 0;
padding: 0;
color: inherit;
outline: none;
background-color: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: repeat(10, -webkit-min-content);
grid-template-rows: repeat(10, min-content);
outline: none;
margin: 0;
padding: 1rem;
color: inherit;
background-color: var(--drawer-list-option-inner-background);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option__inner > * {
align-self: self-start;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option__item {
display: block;
text-overflow: ellipsis;
grid-column: 1;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option__item--horizontal {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option__item > .dnb-icon {
vertical-align: initial;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option__item .dnb-anchor {
display: inline-block;
margin-right: 0.5rem;
word-break: break-word;
font-size: inherit;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-drawer-list__option__suffix {
grid-column: 2;
grid-row: 1/-1;
justify-self: end;
align-self: center;
}
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option--ignore {
cursor: default;
pointer-events: none;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option[disabled] {
--drawer-list-option-inner-background: var(
--drawer-list-option-disabled-background
);
color: var(--drawer-list-option-disabled-color);
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__triangle {
position: absolute;
top: calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2);
left: auto;
right: 0;
pointer-events: none;
margin: 0 var(--drawer-list-padding-horizontal);
width: calc(var(--drawer-list-height) / 2);
height: calc(var(--drawer-list-height) / 2);
z-index: -1;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__triangle::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(var(--drawer-list-height) / 2);
height: calc(var(--drawer-list-height) / 2);
transform: translateY(60%) rotate(45deg);
border: 1px solid var(--color-black-border);
background-color: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--triangle-position-left .dnb-drawer-list__triangle {
left: 0;
right: auto;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--top .dnb-drawer-list__triangle {
top: auto;
bottom: calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2 - 2px);
transform: rotate(180deg);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--top .dnb-drawer-list__triangle::before {
transform: translateY(65%) rotate(45deg);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--is-popup.dnb-drawer-list--right {
position: absolute;
left: auto;
right: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
left: -0.5rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
right: -0.5rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--opened .dnb-drawer-list__list {
z-index: 100;
display: flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--opened .dnb-drawer-list__list:not(.dnb-drawer-list--opened .dnb-drawer-list__list--no-animation) {
animation: drawer-list-slide-top-down 200ms ease-out 1 forwards;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-drawer-list--opened .dnb-drawer-list__list, .eufemia-scope--10_104_0 .dnb-drawer-list--opened .dnb-drawer-list__list--no-animation {
animation-duration: 1ms !important;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--hidden .dnb-drawer-list__list {
display: none;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--bottom .dnb-drawer-list__list {
top: 0;
bottom: auto;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--top .dnb-drawer-list__list {
top: auto;
bottom: var(--drawer-list-height);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__portal .dnb-drawer-list--bottom .dnb-drawer-list__list {
top: var(--drawer-list-height);
bottom: auto;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__portal .dnb-drawer-list--small .dnb-drawer-list__list {
top: var(--drawer-list-height--small);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--small.dnb-drawer-list--top .dnb-drawer-list__list {
bottom: var(--drawer-list-height--small);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
left: -0.75rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
right: -0.75rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__portal .dnb-drawer-list--medium .dnb-drawer-list__list {
top: var(--drawer-list-height--medium);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--medium.dnb-drawer-list--top .dnb-drawer-list__list {
bottom: var(--drawer-list-height--medium);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
left: -0.25rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
right: -0.25rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__portal .dnb-drawer-list--large .dnb-drawer-list__list {
top: var(--drawer-list-height--large);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--large.dnb-drawer-list--top .dnb-drawer-list__list {
bottom: var(--drawer-list-height--large);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--large .dnb-drawer-list__triangle {
margin: 0 1.25rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
left: -0.25rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
right: -0.25rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list {
/* stylelint-disable-next-line */
}
.eufemia-scope--10_104_0 .dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
left: auto;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__root > .dnb-drawer-list--right {
position: absolute;
right: 0;
left: auto;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__portal .dnb-drawer-list--right {
right: 100%;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__portal .dnb-drawer-list--top .dnb-drawer-list__list {
top: auto;
bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list:not(.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation) {
animation: drawer-list-slide-top-up 150ms ease-out 1 forwards;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list, .eufemia-scope--10_104_0 .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation {
animation-duration: 1ms !important;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--action-menu .dnb-drawer-list__option__inner {
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
left: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
right: 0;
}
}
@keyframes drawer-list-scale-in {
from {
opacity: 0;
transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width)));
}
to {
opacity: 1;
transform: scale(1) translateX(0);
}
}
@keyframes drawer-list-scale-out {
from {
opacity: 1;
transform: scale(1) translateX(0);
}
to {
opacity: 0;
transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width)));
}
}
@keyframes drawer-list-slide-top-down {
from {
opacity: 0;
transform: translateY(calc(1px - var(--drawer-list-height)));
pointer-events: none;
}
to {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
@keyframes drawer-list-slide-top-up {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(calc(1px - var(--drawer-list-height)));
}
}
@keyframes drawer-list-slide-bottom-down {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(calc(1px + var(--drawer-list-height)));
}
}
@keyframes drawer-list-slide-bottom-up {
from {
opacity: 0;
transform: translateY(calc(1px + var(--drawer-list-height)));
pointer-events: none;
}
to {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
/*
* ScrollView component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-scroll-view {
overflow-x: auto;
overflow-y: auto;
overscroll-behavior: contain;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-scroll-view {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-scroll-view {
scroll-behavior: auto;
}
}
.eufemia-scope--10_104_0 .dnb-scroll-view {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: auto;
scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
}
@supports not (scrollbar-color: auto) {
.eufemia-scope--10_104_0 .dnb-scroll-view::-webkit-scrollbar:vertical {
width: var(--scrollbar-track-width, 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-scroll-view::-webkit-scrollbar:horizontal {
height: var(--scrollbar-track-width, 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-scroll-view::-webkit-scrollbar {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
background-color: var(--scrollbar-track-color, #eee);
}
.eufemia-scope--10_104_0 .dnb-scroll-view::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color, #888);
}
.eufemia-scope--10_104_0 .dnb-scroll-view::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color, #666);
}
.eufemia-scope--10_104_0 .dnb-scroll-view::-webkit-scrollbar-thumb {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
}
}
.eufemia-scope--10_104_0 .dnb-scroll-view {
overscroll-behavior: auto;
}
.eufemia-scope--10_104_0 .dnb-scroll-view[tabindex="0"]:focus {
outline: none;
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-scroll-view[tabindex="0"]:focus {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-text-counter .dnb-icon {
margin-right: 0;
font-size: 0;
transition: margin 200ms var(--easing-default), font-size 400ms var(--easing-default);
}
.eufemia-scope--10_104_0 .dnb-text-counter--exceeded .dnb-icon {
margin-right: 0.5rem;
font-size: var(--font-size-basis--em);
}
/*
* Accordion component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-accordion {
--accordion-border-width: 0.0625rem;
--accordion-border-radius: 0.5rem;
--accordion-easing: var(--easing-default);
--accordion-header-margin-vertical: 1.25rem;
--accordion-header-margin-vertical--description: 0.75rem;
--accordion-header-wrapper-margin: 1rem;
--accordion-header-wrapper-margin--icon-right: 1rem;
--accordion-header-icon-gutter: 1rem;
--accordion-header-icon-margin: 1rem;
--accordion-header-icon-alignment: flex-start;
--accordion-title-font-weight: var(--font-weight-basis);
--accordion-title-font-weight--expanded: var(--font-weight-medium);
--accordion-content-margin: 1rem 0 0 0;
--accordion-content-padding: 0;
position: relative;
display: flex;
flex-direction: column;
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-accordion__header {
display: flex;
align-items: center;
cursor: pointer;
outline: none;
border: var(--accordion-border-width) solid transparent;
border-radius: var(--accordion-border-radius);
}
.eufemia-scope--10_104_0 .dnb-accordion__header * {
pointer-events: none;
}
.eufemia-scope--10_104_0 .dnb-accordion__header--prevent-click {
pointer-events: none;
}
.eufemia-scope--10_104_0 .dnb-accordion__header__wrapper {
display: flex;
flex-direction: column;
width: 100%;
margin: var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;
}
.eufemia-scope--10_104_0 .dnb-accordion__header--description .dnb-accordion__header__wrapper {
margin-top: var(--accordion-header-margin-vertical--description);
margin-bottom: var(--accordion-header-margin-vertical--description);
}
.eufemia-scope--10_104_0 .dnb-accordion__header__container {
margin: 0 1rem;
}
.eufemia-scope--10_104_0 .dnb-accordion__header__icon {
align-self: var(--accordion-header-icon-alignment);
margin: var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);
font-size: var(--font-size-small);
line-height: var(--line-height-small);
transition: transform 400ms var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-accordion__header__icon {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-accordion__header--description .dnb-accordion__header__icon {
margin-top: var(--accordion-header-margin-vertical--description);
}
.eufemia-scope--10_104_0 .dnb-accordion__header--icon-right {
justify-content: space-between;
}
.eufemia-scope--10_104_0 .dnb-accordion__header--icon-right .dnb-accordion__header__icon {
margin-right: var(--accordion-header-icon-margin);
margin-left: var(--accordion-header-icon-gutter);
order: 3;
}
.eufemia-scope--10_104_0 .dnb-accordion__header--icon-right .dnb-accordion__header__container {
order: 1;
}
.eufemia-scope--10_104_0 .dnb-accordion__header--icon-right .dnb-accordion__header__wrapper {
order: 2;
margin-right: 0;
margin-left: var(--accordion-header-wrapper-margin--icon-right);
}
.eufemia-scope--10_104_0 .dnb-accordion__header--icon-right .dnb-accordion__header__wrapper + .dnb-accordion__header__container {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-accordion__header--icon-right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-accordion__header--expanded {
--accordion-title-font-weight: var(
--accordion-title-font-weight--expanded
);
}
.eufemia-scope--10_104_0 .dnb-accordion__header__title {
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
font-weight: var(--accordion-title-font-weight);
}
.eufemia-scope--10_104_0 .dnb-accordion__header__description {
font-size: var(--font-size-small);
line-height: var(--line-height-small);
font-weight: var(--font-weight-basis);
}
.eufemia-scope--10_104_0 .dnb-accordion__header__title + .dnb-accordion__header__description {
margin-top: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-accordion__header__description + .dnb-accordion__header__title {
margin-top: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon {
transform: rotate(-180deg);
}
.eufemia-scope--10_104_0 .dnb-accordion__content {
display: flex;
width: 100%;
will-change: height;
transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-accordion__content {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-accordion__content__inner {
width: 100%;
margin: var(--accordion-content-margin);
padding: var(--accordion-content-padding);
}
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container {
transition: min-height 1s var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container .dnb-accordion {
position: static;
max-width: 60rem;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container .dnb-accordion__header {
width: 40%;
}
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container .dnb-accordion__content {
margin-left: 1rem;
transition: opacity 1s var(--accordion-easing);
}
}
@media screen and (min-width: 40.00625em) and (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container .dnb-accordion__content {
transition-duration: 0.01ms;
}
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container .dnb-accordion__content__inner {
margin-top: 0;
}
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon {
transform: rotate(-90deg);
}
}
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container .dnb-accordion-group__children {
max-width: 60rem;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container .dnb-accordion-group__children {
position: relative;
display: flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content {
position: absolute;
z-index: 10;
top: 0;
right: 0;
width: 60%;
}
}
.eufemia-scope--10_104_0 .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon {
transition: none;
}
/*
* Anchor
*
*/
/*
* Anchor mixins
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 button.dnb-anchor {
cursor: pointer;
line-height: calc(var(--line-height-basis) + 0.125rem);
border: none;
background: none;
-webkit-appearance: none;
appearance: none;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor {
--anchor-underline-thickness: 0.0938rem;
--anchor-icon-gutter: 0.25em;
--anchor-icon-separator: '\2060';
--anchor-icon-position: translateY(-0.175em);
display: inline;
padding: 0.05575em 0;
font-size: var(--font-size-basis);
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: currentcolor;
text-decoration-thickness: var(--anchor-underline-thickness);
text-underline-offset: 0.25em;
border-radius: 0;
}
.eufemia-scope--10_104_0 sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, .eufemia-scope--10_104_0 sub :where(:not(.dnb-anchor--no-style)).dnb-anchor {
padding: 0 0.025em;
}
.eufemia-scope--10_104_0 .dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor, .eufemia-scope--10_104_0 .dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--x-large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--medium :where(:not(.dnb-anchor--no-style)).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor {
font-size: inherit;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
background-color: transparent;
transition: none;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible, .eufemia-scope--10_104_0 .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
outline: none;
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .eufemia-scope--10_104_0 .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover), .eufemia-scope--10_104_0 .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:active {
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:active, .eufemia-scope--10_104_0 .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:active.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor {
transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out, background 200ms ease-in-out;
}
.eufemia-scope--10_104_0 [data-visual-test-wrapper] :where(:not(.dnb-anchor--no-style)).dnb-anchor {
transition: none;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon {
display: inline;
vertical-align: middle;
white-space: nowrap;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg {
vertical-align: baseline;
transform: scale(2) var(--anchor-icon-position);
font-size: 0.5em;
width: 2em;
height: 1em;
pointer-events: none;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon {
display: none;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child::after {
content: var(--anchor-icon-separator);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg {
margin-right: calc(var(--anchor-icon-gutter) * 2);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child::before {
content: var(--anchor-icon-separator);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg {
margin-left: calc(var(--anchor-icon-gutter) * 2);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default {
font-size: 0.8888888889em;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast {
color: var(--color-white);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)) {
color: var(--anchor-color--contrast);
box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
color: var(--anchor-color--contrast);
box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
}
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:active {
color: var(--color-white);
background-color: transparent;
box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:focus-visible {
color: var(--color-white);
background-color: transparent;
outline: none;
--border-color: var(--color-white);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--disabled, .eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor[aria-disabled=true], .eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor[disabled] {
color: var(--anchor-color--disabled);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor {
--anchor-underline-thickness: 0.0938rem;
--anchor-icon-gutter: 0.25em;
--anchor-icon-separator: '\2060';
--anchor-icon-position: translateY(-0.175em);
display: inline;
padding: 0.05575em 0;
font-size: var(--font-size-basis);
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: currentcolor;
text-decoration-thickness: var(--anchor-underline-thickness);
text-underline-offset: 0.25em;
border-radius: 0;
}
.eufemia-scope--10_104_0 sup :not(.dnb-anchor--no-style).dnb-anchor, .eufemia-scope--10_104_0 sub :not(.dnb-anchor--no-style).dnb-anchor {
padding: 0 0.025em;
}
.eufemia-scope--10_104_0 .dnb-p :not(.dnb-anchor--no-style).dnb-anchor, .eufemia-scope--10_104_0 .dnb-lead :not(.dnb-anchor--no-style).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--x-large :not(.dnb-anchor--no-style).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--large :not(.dnb-anchor--no-style).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--medium :not(.dnb-anchor--no-style).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--basis :not(.dnb-anchor--no-style).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor, .eufemia-scope--10_104_0 .dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor {
font-size: inherit;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
background-color: transparent;
transition: none;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:focus-visible, .eufemia-scope--10_104_0 .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
outline: none;
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .eufemia-scope--10_104_0 .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover), .eufemia-scope--10_104_0 .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:active {
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:active, .eufemia-scope--10_104_0 .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:active.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor {
transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out, background 200ms ease-in-out;
}
.eufemia-scope--10_104_0 [data-visual-test-wrapper] :not(.dnb-anchor--no-style).dnb-anchor {
transition: none;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon {
display: inline;
vertical-align: middle;
white-space: nowrap;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg {
vertical-align: baseline;
transform: scale(2) var(--anchor-icon-position);
font-size: 0.5em;
width: 2em;
height: 1em;
pointer-events: none;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon {
display: none;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child::after {
content: var(--anchor-icon-separator);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg {
margin-right: calc(var(--anchor-icon-gutter) * 2);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child::before {
content: var(--anchor-icon-separator);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg {
margin-left: calc(var(--anchor-icon-gutter) * 2);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default {
font-size: 0.8888888889em;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast {
color: var(--color-white);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)) {
color: var(--anchor-color--contrast);
box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
color: var(--anchor-color--contrast);
box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
}
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:active {
color: var(--color-white);
background-color: transparent;
box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:focus-visible {
color: var(--color-white);
background-color: transparent;
outline: none;
--border-color: var(--color-white);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--disabled, .eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor[aria-disabled=true], .eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor[disabled] {
color: var(--anchor-color--disabled);
}
}
.eufemia-scope--10_104_0 .dnb-anchor--hover {
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 .dnb-anchor--hover, .eufemia-scope--10_104_0 .dnb-section .dnb-anchor--hover.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 .dnb-anchor--active {
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 .dnb-anchor--active, .eufemia-scope--10_104_0 .dnb-section .dnb-anchor--active.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 .dnb-anchor--focus {
background-color: transparent;
transition: none;
}
.eufemia-scope--10_104_0 .dnb-anchor--focus, .eufemia-scope--10_104_0 .dnb-section .dnb-anchor--focus.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 .dnb-anchor--focus {
outline: none;
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 .dnb-anchor--no-underline, .eufemia-scope--10_104_0 .dnb-section .dnb-anchor--no-underline.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 .dnb-anchor--no-radius, .eufemia-scope--10_104_0 .dnb-anchor--no-radius:hover, .eufemia-scope--10_104_0 .dnb-anchor--no-radius:active, .eufemia-scope--10_104_0 .dnb-anchor--no-radius:focus-visible {
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-anchor--no-animation {
transition: none;
}
.eufemia-scope--10_104_0 a.dnb-button {
transition: none;
}
.eufemia-scope--10_104_0 .dnb-skeleton > .dnb-anchor,
.eufemia-scope--10_104_0 .dnb-anchor.dnb-skeleton {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 .dnb-skeleton > .dnb-anchor .dnb-icon,
.eufemia-scope--10_104_0 .dnb-anchor.dnb-skeleton .dnb-icon {
filter: grayscale(100%) opacity(0.3);
}
/*
* Autocomplete component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-autocomplete {
--autocomplete-width: 16rem;
--autocomplete-height: 2rem;
--autocomplete-height--small: 1.5rem;
--autocomplete-height--medium: 2.5rem;
--autocomplete-height--large: 3rem;
--autocomplete-padding-horizontal: 1rem;
--autocomplete-focus-border-width: 0.125rem;
--autocomplete-text-padding: 0.5rem;
--autocomplete-border-radius: 0.25rem;
display: inline-flex;
align-items: center;
font-size: var(--font-size-small);
line-height: var(--autocomplete-height);
}
.eufemia-scope--10_104_0 .dnb-autocomplete__inner {
display: inline-flex;
flex-direction: column;
margin: 0;
padding: 0;
width: auto;
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--right .dnb-autocomplete__inner {
align-items: flex-end;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__shell {
position: relative;
width: var(--autocomplete-width);
margin: 0;
padding: 0;
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__row {
display: inline-flex;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--small {
line-height: var(--autocomplete-height--small);
}
.eufemia-scope--10_104_0 .dnb-autocomplete--medium {
line-height: var(--autocomplete-height--medium);
}
.eufemia-scope--10_104_0 .dnb-autocomplete--large {
line-height: var(--autocomplete-height--large);
}
.eufemia-scope--10_104_0 .dnb-autocomplete__icon {
display: inline-flex;
justify-content: center;
pointer-events: none;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__show-all .dnb-drawer-list__option__inner {
display: flex;
justify-content: center;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item {
display: flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-icon {
align-self: center;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__input {
display: inline-flex;
align-items: center;
outline: none;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__input,
.eufemia-scope--10_104_0 .dnb-autocomplete__input .dnb-input__inner,
.eufemia-scope--10_104_0 .dnb-autocomplete__input .dnb-input__shell,
.eufemia-scope--10_104_0 .dnb-autocomplete__input .dnb-input__input {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--opened .dnb-input__submit-button__button .dnb-icon {
transform: rotate(180deg);
transform-origin: 50% 50%;
}
.eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
--border-color: var(--color-black-55);
--border-width: 0.0625rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
transition: transform 400ms ease-out;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
transition-duration: 1ms !important;
}
.eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input__inner__element {
position: relative;
z-index: 3;
cursor: text;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input {
padding-right: 0 !important;
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input {
padding-right: 2.5rem !important;
}
}
.eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input__inner__element.dnb-p {
white-space: nowrap;
padding: 0 0.5rem;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input__inner__element.dnb-p {
display: none;
}
}
.eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input__inner__element.dnb-p, .eufemia-scope--10_104_0 .dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element {
margin-right: 2.5rem !important;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p {
padding-right: 3rem;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input {
padding-right: 1rem;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--disabled .dnb-input__inner__element {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__text {
order: 1;
position: relative;
z-index: 4;
width: 100%;
height: inherit;
line-height: inherit;
padding: 0 var(--autocomplete-text-padding) 0 0;
overflow: hidden;
color: inherit;
text-align: left;
text-overflow: ellipsis;
font-size: var(--font-size-basis);
}
.eufemia-scope--10_104_0 .dnb-autocomplete__text__inner {
display: inline-block;
width: 100%;
height: inherit;
padding: 0;
overflow: hidden;
white-space: nowrap;
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
text-overflow: inherit;
text-align: inherit;
}
.eufemia-scope--10_104_0 .dnb-autocomplete > .dnb-form-label {
margin-right: 1rem;
line-height: var(--line-height-basis);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-autocomplete {
flex-wrap: wrap;
}
.eufemia-scope--10_104_0 .dnb-autocomplete > .dnb-form-label {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
}
.eufemia-scope--10_104_0 .dnb-autocomplete--stretch {
display: flex;
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--stretch .dnb-autocomplete__inner {
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--stretch .dnb-autocomplete__row, .eufemia-scope--10_104_0 .dnb-autocomplete--stretch .dnb-autocomplete__inner, .eufemia-scope--10_104_0 .dnb-autocomplete--stretch .dnb-autocomplete__shell {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--stretch .dnb-form-label + .dnb-autocomplete__inner {
width: auto;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--vertical.dnb-autocomplete--stretch .dnb-autocomplete__inner {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-form-row--horizontal .dnb-autocomplete--stretch {
width: 100%;
}
.eufemia-scope--10_104_0 label + .dnb-autocomplete[class*=__form-status] {
vertical-align: top;
}
.eufemia-scope--10_104_0 label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
top: -0.375rem;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__inner > .dnb-form-status {
order: 2;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--vertical {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*=__status] {
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*=__status] > .dnb-form-label {
margin-top: 0.25rem;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-autocomplete {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-autocomplete > .dnb-form-label {
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-autocomplete__helper {
display: none;
}
}
.eufemia-scope--10_104_0 .dnb-autocomplete__list .dnb-drawer-list__option__item > span {
padding-right: 0.125em;
}
/*
* Avatar component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-avatar {
--avatar-font-size--small: var(--font-size-x-small);
--avatar-font-size--medium: var(--font-size-basis);
--avatar-font-size--large: var(--font-size-x-large);
--avatar-font-size--x-large: var(--font-size-x-large);
--avatar-line-height--small: var(--line-height-x-small);
--avatar-line-height--medium: var(--line-height-basis);
--avatar-line-height--large: var(--line-height-large);
--avatar-line-height--x-large: var(--line-height-large);
--avatar-width--small: 1.5rem;
--avatar-height--small: 1.5rem;
--avatar-width--medium: 2rem;
--avatar-height--medium: 2rem;
--avatar-width--large: 4rem;
--avatar-height--large: 4rem;
--avatar-width--x-large: 5rem;
--avatar-height--x-large: 5rem;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
border-radius: 50%;
font-weight: var(--font-weight-medium);
line-height: 1;
background-color: var(--background-color);
color: var(--color);
}
.eufemia-scope--10_104_0 .dnb-avatar[style*="--background-color"] {
background-color: var(--background-color, var(--color-emerald-green));
}
.eufemia-scope--10_104_0 .dnb-avatar[style*="--color"] {
color: var(--color, var(--color-pistachio));
}
.eufemia-scope--10_104_0 .dnb-avatar, .eufemia-scope--10_104_0 .dnb-core-style .dnb-avatar {
line-height: var(--line-height-large);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-small {
width: var(--avatar-width--small);
height: var(--avatar-height--small);
font-size: var(--avatar-font-size--small);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-small, .eufemia-scope--10_104_0 .dnb-core-style .dnb-avatar--size-small {
line-height: var(--avatar-line-height--small);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-small .dnb-icon--auto {
font-size: 0.75rem;
}
.eufemia-scope--10_104_0 .dnb-avatar--size-medium {
width: var(--avatar-width--medium);
height: var(--avatar-height--medium);
font-size: var(--avatar-font-size--medium);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-medium, .eufemia-scope--10_104_0 .dnb-core-style .dnb-avatar--size-medium {
line-height: var(--avatar-line-height--medium);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-medium .dnb-icon--auto {
font-size: 1.25rem;
}
.eufemia-scope--10_104_0 .dnb-avatar--size-large {
width: var(--avatar-width--large);
height: var(--avatar-height--large);
font-size: var(--avatar-font-size--large);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-large, .eufemia-scope--10_104_0 .dnb-core-style .dnb-avatar--size-large {
line-height: var(--avatar-line-height--large);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-large .dnb-icon--auto {
font-size: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-avatar--size-x-large {
width: var(--avatar-width--x-large);
height: var(--avatar-height--x-large);
font-size: var(--avatar-font-size--x-large);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-x-large, .eufemia-scope--10_104_0 .dnb-core-style .dnb-avatar--size-x-large {
line-height: var(--avatar-line-height--x-large);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-x-large .dnb-icon--auto {
font-size: 2.75rem;
}
.eufemia-scope--10_104_0 .dnb-avatar__group {
--avatar-font-size-left--small: var(--font-size-x-small);
--avatar-font-size-left--medium: var(--font-size-small);
--avatar-font-size-left--large: var(--font-size-large);
--avatar-font-size-left--x-large: var(--font-size-large);
display: inline-flex;
justify-content: flex;
flex-direction: row;
}
.eufemia-scope--10_104_0 .dnb-avatar__group .dnb-avatar {
--border-color: var(--color-black-3);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-avatar__group .dnb-avatar--size-small {
margin-left: -0.5rem;
}
.eufemia-scope--10_104_0 .dnb-avatar__group .dnb-avatar--size-medium {
margin-left: -0.75rem;
}
.eufemia-scope--10_104_0 .dnb-avatar__group .dnb-avatar--size-large {
margin-left: -1rem;
}
.eufemia-scope--10_104_0 .dnb-avatar__group .dnb-avatar--size-x-large {
margin-left: -1.5rem;
}
.eufemia-scope--10_104_0 .dnb-avatar__group .dnb-avatar:nth-of-type(2) {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-avatar__group--elements-left {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-avatar__group--elements-left--size-small {
font-size: var(--avatar-font-size-left--small);
margin-left: 0.125rem;
}
.eufemia-scope--10_104_0 .dnb-avatar__group--elements-left--size-medium {
font-size: var(--avatar-font-size-left--medium);
margin-left: 0.125rem;
}
.eufemia-scope--10_104_0 .dnb-avatar__group--elements-left--size-large {
font-size: var(--avatar-font-size-left--large);
margin-left: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-avatar__group--elements-left--size-x-large {
font-size: var(--avatar-font-size-left--x-large);
margin-left: var(--spacing-xx-small);
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-badge {
display: inline-flex;
flex-flow: row wrap;
white-space: nowrap;
justify-content: center;
align-content: center;
align-items: center;
font-weight: var(--font-weight-medium);
font-size: var(--font-size-x-small);
}
.eufemia-scope--10_104_0 .dnb-badge__root {
position: relative;
display: inline-flex;
vertical-align: middle;
flex-shrink: 0;
}
.eufemia-scope--10_104_0 .dnb-badge__root .dnb-badge {
display: flex;
overflow: hidden;
position: absolute;
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-badge--variant-notification {
color: var(--color-white);
background-color: var(--color-fire-red);
padding: 0 0.25rem;
min-width: 1.5rem;
height: 1.5rem;
border-radius: 0.75rem;
}
.eufemia-scope--10_104_0 .dnb-badge--variant-information {
--badge-information-color: var(--figma-color-text-neutral);
padding: 0.125rem 0.5rem;
border-radius: 0.5rem;
background-color: var(--badge-information-bg);
color: var(--badge-information-color, inherit);
}
.eufemia-scope--10_104_0 .dnb-badge--subtle {
background-color: var(--badge-information-subtle-bg);
color: var(--badge-information-subtle-color, var(--badge-information-color));
--border-color: var(--badge-information-subtle-border);
--border-width: 0.0625rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-badge--horizontal-left {
left: 0;
}
.eufemia-scope--10_104_0 .dnb-badge--horizontal-right {
right: 0;
}
.eufemia-scope--10_104_0 .dnb-badge--vertical-bottom {
bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-badge--vertical-top {
top: 0;
}
.eufemia-scope--10_104_0 .dnb-badge--inline.dnb-badge--vertical-top {
transform: translateY(-25%);
}
.eufemia-scope--10_104_0 .dnb-badge--inline.dnb-badge--vertical-bottom {
transform: translateY(25%);
}
.eufemia-scope--10_104_0 .dnb-badge--status-default {
--badge-information-bg: var(--figma-color-decorative-first-subtle);
--badge-information-subtle-bg: var(
--figma-color-decorative-first-muted
);
--badge-information-subtle-border: var(
--figma-color-decorative-first-subtle
);
}
.eufemia-scope--10_104_0 .dnb-badge--status-neutral {
--badge-information-bg: var(--figma-color-background-neutral-bold);
--badge-information-subtle-bg: var(
--figma-color-background-neutral-subtle
);
--badge-information-subtle-border: var(
--figma-color-stroke-neutral-bold
);
}
.eufemia-scope--10_104_0 .dnb-badge--status-positive {
--badge-information-bg: var(--figma-color-background-positive);
--badge-information-color: var(--figma-color-text-neutral-inverse);
--badge-information-subtle-bg: var(
--figma-color-background-positive-subtle
);
--badge-information-subtle-color: var(--figma-color-text-positive);
--badge-information-subtle-border: var(--figma-color-stroke-positive);
}
.eufemia-scope--10_104_0 .dnb-badge--status-warning {
--badge-information-bg: var(--figma-color-background-warning);
--badge-information-subtle-bg: var(
--figma-color-background-warning-subtle
);
--badge-information-subtle-color: var(--figma-color-text-warning-bold);
--badge-information-subtle-border: var(--figma-color-stroke-warning);
}
.eufemia-scope--10_104_0 .dnb-badge--status-negative {
--badge-information-bg: var(--figma-color-background-error);
--badge-information-color: var(--figma-color-text-neutral-inverse);
--badge-information-subtle-bg: var(
--figma-color-background-error-subtle
);
--badge-information-subtle-color: var(--figma-color-text-destructive);
--badge-information-subtle-border: var(--figma-color-stroke-error);
}
/*
* Breadcrumb component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-breadcrumb {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__bar.dnb-section {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__list.dnb-section {
display: flex;
margin: 0;
padding: 0;
list-style: none;
flex-flow: row wrap;
align-items: center;
row-gap: 1rem;
column-gap: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item {
display: flex;
align-items: center;
padding: 0.5rem 0;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item__span {
display: flex;
align-items: center;
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item__span__icon {
margin-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item .dnb-anchor {
line-height: 1.5rem;
padding: 0;
position: relative;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item .dnb-anchor::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale(1.25, 2);
border: 0.5rem solid transparent;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item:first-child .dnb-anchor {
border-left: none;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item:first-child .dnb-anchor .dnb-icon svg {
margin-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__multiple {
display: flex;
flex-direction: column;
transition: height 400ms var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-breadcrumb__multiple {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
transform: translateX(-1rem);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item {
transform: translateX(0);
}
.eufemia-scope--10_104_0 .dnb-breadcrumb {
/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
transition: none;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb {
/* stylelint-enable */
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
display: none;
}
}
@media screen and (min-width: 60.00625em) {
.eufemia-scope--10_104_0 .dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle {
display: none;
}
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__collapse {
display: flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section {
flex-direction: column;
align-items: flex-start;
row-gap: 0;
margin: 0.5rem 0;
margin-left: 1.5rem;
padding: 0;
}
/*
* Button component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 {
--button-icon-size: 1rem;
--button-height: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-button {
--button-font-size: var(--font-size-basis);
--button-font-size-small: var(--font-size-small);
--button-icon-size--small: 0.75rem;
--button-icon-size--medium: 1.5rem;
--button-icon-size--large: 2rem;
--button-icon-gutter: 0.5rem;
--button-width: 2.5rem;
--button-width--small: 1.5rem;
--button-height--small: 1.5rem;
--button-width--medium: 2rem;
--button-height--medium: 2rem;
--button-width--large: 3rem;
--button-height--large: 3rem;
--button-border-width: 0.0625rem;
--button-border-width--hover: 0.1875rem;
--button-border-radius: calc(var(--button-height) / 2);
--button-border-radius--control-button: 0.25rem;
--button-padding-left: 0;
--button-padding-right: 0;
--button-padding-icon: 1rem;
--button-padding--default: 1.5rem;
--button-padding--small: 1rem;
--button-padding--medium: 1rem;
--button-padding--large: 2rem;
--button-icon-margin-top: 0;
--button-icon-margin-left: 0;
--button-icon-margin-right: 0;
position: relative;
cursor: pointer;
white-space: nowrap;
}
.eufemia-scope--10_104_0 .dnb-button--wrap {
overflow-wrap: break-word;
white-space: normal;
}
.eufemia-scope--10_104_0 .dnb-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--button-width);
height: auto;
padding: 0 var(--button-padding-right) 0 var(--button-padding-left);
border: none;
border-radius: var(--button-border-radius);
text-align: left;
font-size: var(--font-size-small);
font-weight: var(--font-weight-regular);
-webkit-text-decoration: none;
text-decoration: none;
box-shadow: none;
}
.eufemia-scope--10_104_0 .dnb-button, .eufemia-scope--10_104_0 .dnb-core-style .dnb-button {
line-height: var(--button-height);
}
.eufemia-scope--10_104_0 .dnb-button__text {
margin: 0.5rem 0;
font-size: var(--button-font-size);
line-height: var(--line-height-basis);
color: inherit;
transform: translateY(-0.03125rem);
}
.eufemia-scope--10_104_0 .dnb-button__text [data-os=linux] {
transform: translateY(-0.035rem);
}
.eufemia-scope--10_104_0 .dnb-button__alignment {
display: inline-block;
width: 0;
}
.eufemia-scope--10_104_0 .dnb-button__bounding {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform: scale(1.1, 1.4);
background-color: transparent;
border-radius: var(--button-border-radius);
}
.eufemia-scope--10_104_0 .dnb-button--size-small {
--button-height: var(--button-height--small);
width: var(--button-width--small);
font-size: var(--button-font-size-small);
}
.eufemia-scope--10_104_0 .dnb-button--size-small .dnb-button__text {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--size-small {
--button-padding-left: var(--button-padding--small);
--button-padding-right: var(--button-padding--small);
}
.eufemia-scope--10_104_0 .dnb-button--size-medium {
--button-height: var(--button-height--medium);
width: var(--button-width--medium);
}
.eufemia-scope--10_104_0 .dnb-button--size-medium .dnb-button__text {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--size-medium {
--button-padding-left: var(--button-padding--medium);
--button-padding-right: var(--button-padding--medium);
}
.eufemia-scope--10_104_0 .dnb-button--control-before.dnb-button--size-medium {
line-height: var(--button-height);
}
.eufemia-scope--10_104_0 .dnb-button--control-after.dnb-button--size-medium {
line-height: var(--button-height);
}
.eufemia-scope--10_104_0 .dnb-button--size-large {
--button-height: var(--button-height--large);
--button-padding-icon: 1.5rem;
width: var(--button-width--large);
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--size-large {
--button-padding-left: var(--button-padding--large);
--button-padding-right: var(--button-padding--large);
}
.eufemia-scope--10_104_0 .dnb-button {
/* stylelint-disable-next-line */
}
.eufemia-scope--10_104_0 .dnb-button--has-text {
--button-padding-left: var(--button-padding--default);
--button-padding-right: var(--button-padding--default);
width: auto;
}
.eufemia-scope--10_104_0 .dnb-button__icon {
margin: var(--button-icon-margin-top) var(--button-icon-margin-right) 0 var(--button-icon-margin-left);
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--icon-position-left {
--button-padding-left: var(--button-padding-icon);
--button-icon-margin-right: var(--button-icon-gutter);
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--icon-position-right {
--button-padding-right: var(--button-padding-icon);
--button-icon-margin-left: var(--button-icon-gutter);
}
.eufemia-scope--10_104_0 .dnb-button--icon-size-small {
--button-icon-size: var(--button-icon-size--small);
}
.eufemia-scope--10_104_0 .dnb-button--icon-size-medium {
--button-icon-size: var(--button-icon-size--medium);
}
.eufemia-scope--10_104_0 .dnb-button--icon-size-large {
--button-icon-size: var(--button-icon-size--large);
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon {
order: 2;
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon .dnb-button__text {
order: 1;
}
.eufemia-scope--10_104_0 .dnb-button:not(.dnb-button--has-text) .dnb-button__icon {
width: inherit;
}
.eufemia-scope--10_104_0 .dnb-button__icon.dnb-icon svg:not([width]):not([height]) {
width: var(--button-icon-size);
height: var(--button-icon-size);
}
.eufemia-scope--10_104_0 [href] > .dnb-button__icon.dnb-icon {
line-height: var(--button-font-size);
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon {
order: 1;
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
order: 2;
}
.eufemia-scope--10_104_0 .dnb-button--stretch {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-button--control-before {
border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
}
.eufemia-scope--10_104_0 .dnb-button--control-after {
border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
}
.eufemia-scope--10_104_0 .dnb-button--reset {
margin: 0;
padding: 0;
width: auto;
height: auto;
overflow: visible;
border: none;
border-radius: 0;
background-color: transparent;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
color: inherit;
font: inherit;
text-align: inherit;
line-height: inherit;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--reset:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--reset:hover:not([disabled]) {
box-shadow: none;
border: none;
}
.eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):focus, .eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):active {
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):active {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
html[data-whatinput=mouse] .eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):active {
box-shadow: none;
color: inherit;
border: none;
}
.eufemia-scope--10_104_0 .dnb-button[type=button], .eufemia-scope--10_104_0 .dnb-button[type=reset], .eufemia-scope--10_104_0 .dnb-button[type=submit] {
appearance: none;
/* stylelint-disable-next-line */
-moz-appearance: none;
/* stylelint-disable-next-line */
-webkit-appearance: none;
}
.eufemia-scope--10_104_0 .dnb-button[disabled] {
cursor: not-allowed;
outline: none;
}
.eufemia-scope--10_104_0 .dnb-form-row--vertical .dnb-form-row__content > .dnb-button {
align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text {
white-space: nowrap;
}
.eufemia-scope--10_104_0 .dnb-button + .dnb-form-status {
margin-top: 0.5rem;
}
/* Firefox includes a hidden border which messes up button dimensions */
.eufemia-scope--10_104_0 button.dnb-button::-moz-focus-inner {
border: none;
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-card__heading {
font-size: var(--font-size-basis);
font-weight: var(--font-weight-medium);
}
.eufemia-scope--10_104_0 .dnb-card + .dnb-card__heading {
margin-top: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-card__title {
padding-bottom: 1rem;
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
}
.eufemia-scope--10_104_0 .dnb-card:not([style*="--space-"]) .dnb-card__title {
padding: 1rem;
}
.eufemia-scope--10_104_0 .dnb-card.dnb-section {
background-color: var(--background-color);
}
.eufemia-scope--10_104_0 .dnb-card .dnb-section {
z-index: 1;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-card {
--nested-space-l: calc(var(--padding-left, 0px) * -1);
--nested-space-r: calc(var(--padding-right, 0px) * -1);
}
.eufemia-scope--10_104_0 .dnb-card .dnb-section::after {
--left: var(--nested-space-l);
--width: calc(100% - var(--nested-space-r) * 2);
}
}
.eufemia-scope--10_104_0 .dnb-card--filled.dnb-card.dnb-section {
--background-color: var(--outline-color);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-card--responsive.dnb-section::before {
left: var(--left);
--outline: 99vw 0 0 0 var(--background-color),
198vw 0 0 0 var(--background-color),
297vw 0 0 0 var(--background-color),
396vw 0 0 0 var(--background-color),
0 var(--outline-width) 0 0 var(--outline-color),
99vw var(--outline-width) 0 0 var(--outline-color),
0 calc(var(--outline-width) * -1) 0 0 var(--outline-color),
99vw calc(var(--outline-width) * -1) 0 0 var(--outline-color),
198vw var(--outline-width) 0 0 var(--outline-color),
198vw calc(var(--outline-width) * -1) 0 0 var(--outline-color);
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-card + .dnb-card--responsive:not([class*=space__top])::before {
top: var(--outline-width);
}
.eufemia-scope--10_104_0 .dnb-card + .dnb-card--responsive:not([class*=space__top]) {
background: linear-gradient(to left, var(--background-color), var(--background-color)) no-repeat 0 var(--outline-width);
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card--responsive {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card--responsive::before {
top: var(--outline-width);
z-index: 0;
background-color: transparent;
}
}
.eufemia-scope--10_104_0 .dnb-card .dnb-flex-container:has(> .dnb-card__title + .dnb-scroll-view) {
align-items: stretch;
flex-wrap: nowrap;
}
.eufemia-scope--10_104_0 .dnb-card--filled .dnb-scroll-view {
clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
}
.eufemia-scope--10_104_0 .dnb-card > .dnb-flex-container > .dnb-space:has(> .dnb-scroll-view) {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-card > .dnb-flex-container--align-stretch > .dnb-button {
align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-card[style*="--outset"].dnb-space[style]:not(.dnb-card) {
padding-left: calc(var(--padding-left) * (1 - var(--outset)));
padding-right: calc(var(--padding-right) * (1 - var(--outset)));
}
.eufemia-scope--10_104_0 .dnb-card[style*="--outset"].dnb-card > .dnb-flex-container {
margin-left: calc(var(--padding-left, var(--spacing-medium)) * -1 * var(--outset));
margin-right: calc(var(--padding-right, var(--spacing-medium)) * -1 * var(--outset));
}
.eufemia-scope--10_104_0 .dnb-card--auto-indent:has(+ .dnb-card, + * + .dnb-card, + * + * + .dnb-card, + .dnb-help-button__content + .dnb-section + .dnb-card):not([class*=space__bottom]) {
margin-bottom: var(--spacing-small);
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-card--auto-indent:has(+ .dnb-card:not([style*="--outset"]), + * + .dnb-card:not([style*="--outset"]), + * + * + .dnb-card:not([style*="--outset"]), + .dnb-help-button__content + .dnb-section + .dnb-card:not([style*="--outset"])):not([class*=space__left]) {
margin-left: var(--spacing-medium);
}
}
/*
* Checkbox component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 {
--checkbox-width--medium: 1.5rem;
--checkbox-height--medium: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-checkbox {
--checkbox-border-radius: 0.25rem;
--checkbox-gfx-border-radius__indeterminate: 0.125rem;
--checkbox-width--large: 2rem;
--checkbox-height--large: 2rem;
--checkbox-gfx-height__indeterminate: 0.625rem;
--checkbox-gfx-width__indeterminate: 0.625rem;
--checkbox-gfx-height__indeterminate--large: 0.875rem;
--checkbox-gfx-width__indeterminate--large: 0.875rem;
--checkbox-border-width: 0.09375rem;
--checkbox-color-gfx-on: black;
--checkbox-color-gfx-off: white;
--checkbox-color-background-on: white;
--checkbox-color-background-off: white;
--checkbox-color-border-on: black;
--checkbox-color-border-off: black;
--checkbox-border-width--disabled: 0.125rem;
--checkbox-color-gfx--disabled: grey;
--checkbox-color-background-on--disabled: lightgrey;
--checkbox-color-background-off--disabled: lightgrey;
--checkbox-color-border-on--disabled: grey;
--checkbox-color-border-off--disabled: grey;
--checkbox-color-gfx__indeterminate--disabled: grey;
--checkbox-color-background--active: lightgrey;
--checkbox-color-border--active: transparent;
--checkbox-border-width--hover: 0.125rem;
--checkbox-color-gfx--hover: grey;
--checkbox-color-background--hover: white;
--checkbox-color-border-on--hover: grey;
--checkbox-color-border-off--hover: grey;
--checkbox-color-gfx--focus: grey;
--checkbox-color-background--focus: lightgrey;
--checkbox-border-width--error: 0.125rem;
--checkbox-color-gfx--error: lavenderblush;
--checkbox-color-gfx--error-contrast: red;
--checkbox-color-background-on--error: red;
--checkbox-color-background--error-contrast: lavenderblush;
--checkbox-color-border--error: red;
--checkbox-color-gfx-indeterminate--error: red;
--checkbox-color-gfx--error--hover: red;
--checkbox-color-background--error--hover: lavenderblush;
--checkbox-color-border--error--hover: red;
--checkbox-color-background-indeterminate: grey;
--checkbox-color-gfx-indeterminate: darkgray;
--checkbox-color-background-indeterminate--active: grey;
--checkbox-color-border-indeterminate--active: white;
--checkbox-color-gfx-indeterminate--active: white;
--checkbox-bounding--medium: 1.75, 1.75;
display: inline-flex;
flex-direction: column;
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-checkbox__inner {
display: inline-flex;
flex-direction: column;
align-self: center;
}
.eufemia-scope--10_104_0 .dnb-checkbox__shell {
-webkit-user-select: none;
user-select: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: var(--checkbox-width--medium);
height: var(--checkbox-height--medium);
}
.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__shell {
width: var(--checkbox-width--large);
height: var(--checkbox-height--large);
}
.eufemia-scope--10_104_0 .dnb-checkbox__button {
display: inline-block;
border: var(--checkbox-border-width) solid transparent;
}
.eufemia-scope--10_104_0 .dnb-checkbox__focus {
display: none;
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__focus {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-checkbox__focus, .eufemia-scope--10_104_0 .dnb-checkbox__button {
position: relative;
z-index: 4;
width: calc(var(--checkbox-width--medium) - 0.25rem);
height: calc(var(--checkbox-height--medium) - 0.25rem);
border-radius: var(--checkbox-border-radius);
}
.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__focus, .eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__button {
width: var(--checkbox-width--large);
height: var(--checkbox-height--large);
border-radius: var(--checkbox-border-radius);
}
.eufemia-scope--10_104_0 .dnb-checkbox__gfx {
position: absolute;
z-index: 5;
top: auto;
left: auto;
width: calc(var(--checkbox-width--medium) - 0.5rem);
height: calc(var(--checkbox-height--medium) - 0.5rem);
shape-rendering: geometricprecision;
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.eufemia-scope--10_104_0 .dnb-checkbox--large {
line-height: var(--checkbox-height--large);
}
.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__gfx {
width: calc(var(--checkbox-width--large) - 0.5rem);
height: calc(var(--checkbox-height--large) - 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input {
opacity: 0;
position: absolute;
top: auto;
left: auto;
z-index: 6;
width: var(--checkbox-width--medium);
height: var(--checkbox-height--medium);
margin: 0;
padding: 0;
border: 0;
transform: scale(var(--checkbox-bounding--medium));
}
.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__input {
width: var(--checkbox-width--large);
height: var(--checkbox-height--large);
transform: scale(1);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]) {
cursor: pointer;
}
.eufemia-scope--10_104_0 .dnb-checkbox .dnb-form-label {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-checkbox__order {
display: inline-flex;
align-items: baseline;
}
.eufemia-scope--10_104_0 .dnb-checkbox__suffix {
order: 4;
}
.eufemia-scope--10_104_0 .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner {
order: 2;
}
.eufemia-scope--10_104_0 .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label {
order: 1;
padding-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status {
order: 3;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner {
order: 1;
}
.eufemia-scope--10_104_0 .dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label {
order: 2;
padding-left: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-checkbox--label-position-right .dnb-checkbox__order + .dnb-form-status {
order: 3;
vertical-align: top;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-checkbox {
/*
* Color scheme
*/
/** Normal state **/
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:checked ~ .dnb-checkbox__gfx, .eufemia-scope--10_104_0 .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__gfx {
opacity: 1;
transform: scale(1);
color: var(--checkbox-color-gfx-on);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:checked ~ .dnb-checkbox__button, .eufemia-scope--10_104_0 .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__button {
background-color: var(--checkbox-color-background-on);
border-color: var(--checkbox-color-border-on);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
opacity: 0;
transform: scale(0.8);
color: var(--checkbox-color-gfx-off);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
background-color: var(--checkbox-color-background-off);
border-color: var(--checkbox-color-border-off);
transition: background-color 100ms ease-out;
}
.eufemia-scope--10_104_0 .dnb-checkbox__input ~ .dnb-checkbox__indeterminate {
position: absolute;
z-index: 5;
width: var(--checkbox-gfx-width__indeterminate);
height: var(--checkbox-gfx-height__indeterminate);
transform: scale(0.85);
opacity: 0;
background-color: var(--checkbox-color-gfx-indeterminate);
border-radius: var(--checkbox-gfx-border-radius__indeterminate);
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:indeterminate ~ .dnb-checkbox__indeterminate {
transform: scale(1);
opacity: 1;
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:indeterminate:checked ~ .dnb-checkbox__button {
background-color: transparent;
border-color: var(--checkbox-color-border-off);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:indeterminate:hover ~ .dnb-checkbox__gfx, .eufemia-scope--10_104_0 .dnb-checkbox__input:indeterminate:checked ~ .dnb-checkbox__gfx, .eufemia-scope--10_104_0 .dnb-checkbox__input:indeterminate:checked:hover ~ .dnb-checkbox__gfx {
color: transparent;
}
.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__input:indeterminate ~ .dnb-checkbox__indeterminate {
width: var(--checkbox-gfx-width__indeterminate--large);
height: var(--checkbox-gfx-height__indeterminate--large);
}
.eufemia-scope--10_104_0 .dnb-checkbox {
/** Disabled state **/
}
.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button {
border-width: var(--checkbox-border-width--disabled);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .eufemia-scope--10_104_0 .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
background-color: var(--checkbox-color-background-on--disabled);
border-color: var(--checkbox-color-border-on--disabled);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__gfx, .eufemia-scope--10_104_0 .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__gfx {
color: var(--checkbox-color-gfx--disabled);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
border-color: var(--checkbox-color-border-off--disabled);
background-color: var(--checkbox-color-background-off--disabled);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:indeterminate ~ .dnb-checkbox__indeterminate {
background-color: var(--checkbox-color-gfx__indeterminate--disabled);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:indeterminate ~ .dnb-checkbox__gfx {
color: transparent;
}
.eufemia-scope--10_104_0 .dnb-checkbox {
/** Active state **/
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button {
background-color: var(--checkbox-color-background--active);
border-color: var(--checkbox-color-border--active);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, .eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled])[data-checked=true]:active ~ .dnb-checkbox__gfx {
color: var(--checkbox-color-gfx-on);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):indeterminate:active ~ .dnb-checkbox__button {
background-color: var(--checkbox-color-background-indeterminate--active);
border-color: var(--checkbox-color-border-indeterminate--active);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):indeterminate:active ~ .dnb-checkbox__indeterminate {
background-color: var(--checkbox-color-gfx-indeterminate--active);
}
.eufemia-scope--10_104_0 .dnb-checkbox {
/** Hover state **/
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):not(:active):hover ~ .dnb-checkbox__button {
border-color: var(--checkbox-color-border-off--hover);
background-color: var(--checkbox-color-background--hover);
border-width: var(--checkbox-border-width--hover);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:hover ~ .dnb-checkbox__gfx {
color: var(--checkbox-color-gfx--hover);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):checked:hover ~ .dnb-checkbox__button, .eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled])[data-checked=true]:hover ~ .dnb-checkbox__button {
border: var(--checkbox-border-width--hover) solid var(--checkbox-color-border-on--hover);
}
.eufemia-scope--10_104_0 .dnb-checkbox {
/** Focus state **/
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__button {
border: none;
background-color: var(--checkbox-color-background--focus);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__gfx {
color: var(--checkbox-color-gfx--focus);
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__button .dnb-checkbox__focus, .eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
display: block;
}
.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__indeterminate {
background-color: var(--checkbox-color-gfx--focus);
}
.eufemia-scope--10_104_0 .dnb-checkbox {
/** Error state **/
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button {
border: none;
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
display: block;
--border-color: var(--checkbox-color-border--error);
--border-width: var(--checkbox-border-width--error);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked=true] {
border-color: var(--checkbox-color-border--error--hover);
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button {
background-color: var(--checkbox-color-background--error--hover);
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
color: var(--checkbox-color-gfx--error--hover);
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
color: var(--checkbox-color-gfx--error);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__button {
border: none;
background-color: var(--checkbox-color-background--error-contrast);
--border-color: var(--checkbox-color-border--error);
--border-width: calc(var(--checkbox-border-width--hover));
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__gfx {
color: var(--checkbox-color-gfx--error-contrast);
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, .eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true] ~ .dnb-checkbox__button {
background-color: var(--checkbox-color-background-on--error);
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
color: var(--checkbox-color-gfx--error-contrast);
background-color: var(--checkbox-color-gfx--error-contrast);
border-radius: var(--checkbox-border-radius);
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not(:active):not(:hover) ~ .dnb-checkbox__indeterminate {
background-color: var(--checkbox-color-gfx-indeterminate--error);
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not(:indeterminate) ~ .dnb-checkbox__indeterminate {
background-color: var(--checkbox-color-gfx-indeterminate--error);
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:hover:not(:active) ~ .dnb-checkbox__indeterminate {
background-color: var(--checkbox-color-gfx--error--hover);
}
.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):hover ~ .dnb-checkbox__gfx {
color: var(--checkbox-color-gfx--error--hover);
}
.eufemia-scope--10_104_0 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before {
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button {
border-color: var(--skeleton-color);
}
.eufemia-scope--10_104_0 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__gfx {
color: var(--skeleton-color);
}
.eufemia-scope--10_104_0 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__indeterminate {
background-color: var(--skeleton-color);
}
/*
* CopyOnClick component
*
*/
.eufemia-scope--10_104_0 .dnb-copy-on-click--cursor, .eufemia-scope--10_104_0 .dnb-copy-on-click--cursor * {
cursor: copy;
}
/*
* Import all flag icons (SVG) via CSS
*
* License: MIT
* Repo: https://github.com/lipis/flag-icons
* Source: https://github.com/lipis/flag-icons/blob/main/css/flag-icons.css
* Currently using v7.3.2. Please update the version used when changing version.
*
* Theoretically, we could use the flag-icons package to import the flags (@import '../../../assets/css/flag-icons.css'),
* but since we only use the 1x1 flag icons, we want to use the CSS instead.
* This lowers the overall footprint of the package and the amount of work the compilers needs to do.
*
* There are a couple of projects which has had issues with the flag-icons package.
* Where their bundler did change the path from 'flag-icons/flags/1x1/xx.svg' to './flag-icons/flags/1x1/xx.svg'
* so it did add a './' in front of the path, which is not a valid path.
* Therefore we include these SVGs in our assets folder, and point to them with a valid path.
*/
.eufemia-scope--10_104_0 .fi-xx.fis {
background-image: url("../../../assets/flags/1x1/xx.svg");
}
.eufemia-scope--10_104_0 .fi-ad.fis {
background-image: url("../../../assets/flags/1x1/ad.svg");
}
.eufemia-scope--10_104_0 .fi-ae.fis {
background-image: url("../../../assets/flags/1x1/ae.svg");
}
.eufemia-scope--10_104_0 .fi-af.fis {
background-image: url("../../../assets/flags/1x1/af.svg");
}
.eufemia-scope--10_104_0 .fi-ag.fis {
background-image: url("../../../assets/flags/1x1/ag.svg");
}
.eufemia-scope--10_104_0 .fi-ai.fis {
background-image: url("../../../assets/flags/1x1/ai.svg");
}
.eufemia-scope--10_104_0 .fi-al.fis {
background-image: url("../../../assets/flags/1x1/al.svg");
}
.eufemia-scope--10_104_0 .fi-am.fis {
background-image: url("../../../assets/flags/1x1/am.svg");
}
.eufemia-scope--10_104_0 .fi-ao.fis {
background-image: url("../../../assets/flags/1x1/ao.svg");
}
.eufemia-scope--10_104_0 .fi-aq.fis {
background-image: url("../../../assets/flags/1x1/aq.svg");
}
.eufemia-scope--10_104_0 .fi-ar.fis {
background-image: url("../../../assets/flags/1x1/ar.svg");
}
.eufemia-scope--10_104_0 .fi-as.fis {
background-image: url("../../../assets/flags/1x1/as.svg");
}
.eufemia-scope--10_104_0 .fi-at.fis {
background-image: url("../../../assets/flags/1x1/at.svg");
}
.eufemia-scope--10_104_0 .fi-au.fis {
background-image: url("../../../assets/flags/1x1/au.svg");
}
.eufemia-scope--10_104_0 .fi-aw.fis {
background-image: url("../../../assets/flags/1x1/aw.svg");
}
.eufemia-scope--10_104_0 .fi-ax.fis {
background-image: url("../../../assets/flags/1x1/ax.svg");
}
.eufemia-scope--10_104_0 .fi-az.fis {
background-image: url("../../../assets/flags/1x1/az.svg");
}
.eufemia-scope--10_104_0 .fi-ba.fis {
background-image: url("../../../assets/flags/1x1/ba.svg");
}
.eufemia-scope--10_104_0 .fi-bb.fis {
background-image: url("../../../assets/flags/1x1/bb.svg");
}
.eufemia-scope--10_104_0 .fi-bd.fis {
background-image: url("../../../assets/flags/1x1/bd.svg");
}
.eufemia-scope--10_104_0 .fi-be.fis {
background-image: url("../../../assets/flags/1x1/be.svg");
}
.eufemia-scope--10_104_0 .fi-bf.fis {
background-image: url("../../../assets/flags/1x1/bf.svg");
}
.eufemia-scope--10_104_0 .fi-bg.fis {
background-image: url("../../../assets/flags/1x1/bg.svg");
}
.eufemia-scope--10_104_0 .fi-bh.fis {
background-image: url("../../../assets/flags/1x1/bh.svg");
}
.eufemia-scope--10_104_0 .fi-bi.fis {
background-image: url("../../../assets/flags/1x1/bi.svg");
}
.eufemia-scope--10_104_0 .fi-bj.fis {
background-image: url("../../../assets/flags/1x1/bj.svg");
}
.eufemia-scope--10_104_0 .fi-bl.fis {
background-image: url("../../../assets/flags/1x1/bl.svg");
}
.eufemia-scope--10_104_0 .fi-bm.fis {
background-image: url("../../../assets/flags/1x1/bm.svg");
}
.eufemia-scope--10_104_0 .fi-bn.fis {
background-image: url("../../../assets/flags/1x1/bn.svg");
}
.eufemia-scope--10_104_0 .fi-bo.fis {
background-image: url("../../../assets/flags/1x1/bo.svg");
}
.eufemia-scope--10_104_0 .fi-bq.fis {
background-image: url("../../../assets/flags/1x1/bq.svg");
}
.eufemia-scope--10_104_0 .fi-br.fis {
background-image: url("../../../assets/flags/1x1/br.svg");
}
.eufemia-scope--10_104_0 .fi-bs.fis {
background-image: url("../../../assets/flags/1x1/bs.svg");
}
.eufemia-scope--10_104_0 .fi-bt.fis {
background-image: url("../../../assets/flags/1x1/bt.svg");
}
.eufemia-scope--10_104_0 .fi-bv.fis {
background-image: url("../../../assets/flags/1x1/bv.svg");
}
.eufemia-scope--10_104_0 .fi-bw.fis {
background-image: url("../../../assets/flags/1x1/bw.svg");
}
.eufemia-scope--10_104_0 .fi-by.fis {
background-image: url("../../../assets/flags/1x1/by.svg");
}
.eufemia-scope--10_104_0 .fi-bz.fis {
background-image: url("../../../assets/flags/1x1/bz.svg");
}
.eufemia-scope--10_104_0 .fi-ca.fis {
background-image: url("../../../assets/flags/1x1/ca.svg");
}
.eufemia-scope--10_104_0 .fi-cc.fis {
background-image: url("../../../assets/flags/1x1/cc.svg");
}
.eufemia-scope--10_104_0 .fi-cd.fis {
background-image: url("../../../assets/flags/1x1/cd.svg");
}
.eufemia-scope--10_104_0 .fi-cf.fis {
background-image: url("../../../assets/flags/1x1/cf.svg");
}
.eufemia-scope--10_104_0 .fi-cg.fis {
background-image: url("../../../assets/flags/1x1/cg.svg");
}
.eufemia-scope--10_104_0 .fi-ch.fis {
background-image: url("../../../assets/flags/1x1/ch.svg");
}
.eufemia-scope--10_104_0 .fi-ci.fis {
background-image: url("../../../assets/flags/1x1/ci.svg");
}
.eufemia-scope--10_104_0 .fi-ck.fis {
background-image: url("../../../assets/flags/1x1/ck.svg");
}
.eufemia-scope--10_104_0 .fi-cl.fis {
background-image: url("../../../assets/flags/1x1/cl.svg");
}
.eufemia-scope--10_104_0 .fi-cm.fis {
background-image: url("../../../assets/flags/1x1/cm.svg");
}
.eufemia-scope--10_104_0 .fi-cn.fis {
background-image: url("../../../assets/flags/1x1/cn.svg");
}
.eufemia-scope--10_104_0 .fi-co.fis {
background-image: url("../../../assets/flags/1x1/co.svg");
}
.eufemia-scope--10_104_0 .fi-cr.fis {
background-image: url("../../../assets/flags/1x1/cr.svg");
}
.eufemia-scope--10_104_0 .fi-cu.fis {
background-image: url("../../../assets/flags/1x1/cu.svg");
}
.eufemia-scope--10_104_0 .fi-cv.fis {
background-image: url("../../../assets/flags/1x1/cv.svg");
}
.eufemia-scope--10_104_0 .fi-cw.fis {
background-image: url("../../../assets/flags/1x1/cw.svg");
}
.eufemia-scope--10_104_0 .fi-cx.fis {
background-image: url("../../../assets/flags/1x1/cx.svg");
}
.eufemia-scope--10_104_0 .fi-cy.fis {
background-image: url("../../../assets/flags/1x1/cy.svg");
}
.eufemia-scope--10_104_0 .fi-cz.fis {
background-image: url("../../../assets/flags/1x1/cz.svg");
}
.eufemia-scope--10_104_0 .fi-de.fis {
background-image: url("../../../assets/flags/1x1/de.svg");
}
.eufemia-scope--10_104_0 .fi-dj.fis {
background-image: url("../../../assets/flags/1x1/dj.svg");
}
.eufemia-scope--10_104_0 .fi-dk.fis {
background-image: url("../../../assets/flags/1x1/dk.svg");
}
.eufemia-scope--10_104_0 .fi-dm.fis {
background-image: url("../../../assets/flags/1x1/dm.svg");
}
.eufemia-scope--10_104_0 .fi-do.fis {
background-image: url("../../../assets/flags/1x1/do.svg");
}
.eufemia-scope--10_104_0 .fi-dz.fis {
background-image: url("../../../assets/flags/1x1/dz.svg");
}
.eufemia-scope--10_104_0 .fi-ec.fis {
background-image: url("../../../assets/flags/1x1/ec.svg");
}
.eufemia-scope--10_104_0 .fi-ee.fis {
background-image: url("../../../assets/flags/1x1/ee.svg");
}
.eufemia-scope--10_104_0 .fi-eg.fis {
background-image: url("../../../assets/flags/1x1/eg.svg");
}
.eufemia-scope--10_104_0 .fi-eh.fis {
background-image: url("../../../assets/flags/1x1/eh.svg");
}
.eufemia-scope--10_104_0 .fi-er.fis {
background-image: url("../../../assets/flags/1x1/er.svg");
}
.eufemia-scope--10_104_0 .fi-es.fis {
background-image: url("../../../assets/flags/1x1/es.svg");
}
.eufemia-scope--10_104_0 .fi-et.fis {
background-image: url("../../../assets/flags/1x1/et.svg");
}
.eufemia-scope--10_104_0 .fi-fi.fis {
background-image: url("../../../assets/flags/1x1/fi.svg");
}
.eufemia-scope--10_104_0 .fi-fj.fis {
background-image: url("../../../assets/flags/1x1/fj.svg");
}
.eufemia-scope--10_104_0 .fi-fk.fis {
background-image: url("../../../assets/flags/1x1/fk.svg");
}
.eufemia-scope--10_104_0 .fi-fm.fis {
background-image: url("../../../assets/flags/1x1/fm.svg");
}
.eufemia-scope--10_104_0 .fi-fo.fis {
background-image: url("../../../assets/flags/1x1/fo.svg");
}
.eufemia-scope--10_104_0 .fi-fr.fis {
background-image: url("../../../assets/flags/1x1/fr.svg");
}
.eufemia-scope--10_104_0 .fi-ga.fis {
background-image: url("../../../assets/flags/1x1/ga.svg");
}
.eufemia-scope--10_104_0 .fi-gb.fis {
background-image: url("../../../assets/flags/1x1/gb.svg");
}
.eufemia-scope--10_104_0 .fi-gd.fis {
background-image: url("../../../assets/flags/1x1/gd.svg");
}
.eufemia-scope--10_104_0 .fi-ge.fis {
background-image: url("../../../assets/flags/1x1/ge.svg");
}
.eufemia-scope--10_104_0 .fi-gf.fis {
background-image: url("../../../assets/flags/1x1/gf.svg");
}
.eufemia-scope--10_104_0 .fi-gg.fis {
background-image: url("../../../assets/flags/1x1/gg.svg");
}
.eufemia-scope--10_104_0 .fi-gh.fis {
background-image: url("../../../assets/flags/1x1/gh.svg");
}
.eufemia-scope--10_104_0 .fi-gi.fis {
background-image: url("../../../assets/flags/1x1/gi.svg");
}
.eufemia-scope--10_104_0 .fi-gl.fis {
background-image: url("../../../assets/flags/1x1/gl.svg");
}
.eufemia-scope--10_104_0 .fi-gm.fis {
background-image: url("../../../assets/flags/1x1/gm.svg");
}
.eufemia-scope--10_104_0 .fi-gn.fis {
background-image: url("../../../assets/flags/1x1/gn.svg");
}
.eufemia-scope--10_104_0 .fi-gp.fis {
background-image: url("../../../assets/flags/1x1/gp.svg");
}
.eufemia-scope--10_104_0 .fi-gq.fis {
background-image: url("../../../assets/flags/1x1/gq.svg");
}
.eufemia-scope--10_104_0 .fi-gr.fis {
background-image: url("../../../assets/flags/1x1/gr.svg");
}
.eufemia-scope--10_104_0 .fi-gs.fis {
background-image: url("../../../assets/flags/1x1/gs.svg");
}
.eufemia-scope--10_104_0 .fi-gt.fis {
background-image: url("../../../assets/flags/1x1/gt.svg");
}
.eufemia-scope--10_104_0 .fi-gu.fis {
background-image: url("../../../assets/flags/1x1/gu.svg");
}
.eufemia-scope--10_104_0 .fi-gw.fis {
background-image: url("../../../assets/flags/1x1/gw.svg");
}
.eufemia-scope--10_104_0 .fi-gy.fis {
background-image: url("../../../assets/flags/1x1/gy.svg");
}
.eufemia-scope--10_104_0 .fi-hk.fis {
background-image: url("../../../assets/flags/1x1/hk.svg");
}
.eufemia-scope--10_104_0 .fi-hm.fis {
background-image: url("../../../assets/flags/1x1/hm.svg");
}
.eufemia-scope--10_104_0 .fi-hn.fis {
background-image: url("../../../assets/flags/1x1/hn.svg");
}
.eufemia-scope--10_104_0 .fi-hr.fis {
background-image: url("../../../assets/flags/1x1/hr.svg");
}
.eufemia-scope--10_104_0 .fi-ht.fis {
background-image: url("../../../assets/flags/1x1/ht.svg");
}
.eufemia-scope--10_104_0 .fi-hu.fis {
background-image: url("../../../assets/flags/1x1/hu.svg");
}
.eufemia-scope--10_104_0 .fi-id.fis {
background-image: url("../../../assets/flags/1x1/id.svg");
}
.eufemia-scope--10_104_0 .fi-ie.fis {
background-image: url("../../../assets/flags/1x1/ie.svg");
}
.eufemia-scope--10_104_0 .fi-il.fis {
background-image: url("../../../assets/flags/1x1/il.svg");
}
.eufemia-scope--10_104_0 .fi-im.fis {
background-image: url("../../../assets/flags/1x1/im.svg");
}
.eufemia-scope--10_104_0 .fi-in.fis {
background-image: url("../../../assets/flags/1x1/in.svg");
}
.eufemia-scope--10_104_0 .fi-io.fis {
background-image: url("../../../assets/flags/1x1/io.svg");
}
.eufemia-scope--10_104_0 .fi-iq.fis {
background-image: url("../../../assets/flags/1x1/iq.svg");
}
.eufemia-scope--10_104_0 .fi-ir.fis {
background-image: url("../../../assets/flags/1x1/ir.svg");
}
.eufemia-scope--10_104_0 .fi-is.fis {
background-image: url("../../../assets/flags/1x1/is.svg");
}
.eufemia-scope--10_104_0 .fi-it.fis {
background-image: url("../../../assets/flags/1x1/it.svg");
}
.eufemia-scope--10_104_0 .fi-je.fis {
background-image: url("../../../assets/flags/1x1/je.svg");
}
.eufemia-scope--10_104_0 .fi-jm.fis {
background-image: url("../../../assets/flags/1x1/jm.svg");
}
.eufemia-scope--10_104_0 .fi-jo.fis {
background-image: url("../../../assets/flags/1x1/jo.svg");
}
.eufemia-scope--10_104_0 .fi-jp.fis {
background-image: url("../../../assets/flags/1x1/jp.svg");
}
.eufemia-scope--10_104_0 .fi-ke.fis {
background-image: url("../../../assets/flags/1x1/ke.svg");
}
.eufemia-scope--10_104_0 .fi-kg.fis {
background-image: url("../../../assets/flags/1x1/kg.svg");
}
.eufemia-scope--10_104_0 .fi-kh.fis {
background-image: url("../../../assets/flags/1x1/kh.svg");
}
.eufemia-scope--10_104_0 .fi-ki.fis {
background-image: url("../../../assets/flags/1x1/ki.svg");
}
.eufemia-scope--10_104_0 .fi-km.fis {
background-image: url("../../../assets/flags/1x1/km.svg");
}
.eufemia-scope--10_104_0 .fi-kn.fis {
background-image: url("../../../assets/flags/1x1/kn.svg");
}
.eufemia-scope--10_104_0 .fi-kp.fis {
background-image: url("../../../assets/flags/1x1/kp.svg");
}
.eufemia-scope--10_104_0 .fi-kr.fis {
background-image: url("../../../assets/flags/1x1/kr.svg");
}
.eufemia-scope--10_104_0 .fi-kw.fis {
background-image: url("../../../assets/flags/1x1/kw.svg");
}
.eufemia-scope--10_104_0 .fi-ky.fis {
background-image: url("../../../assets/flags/1x1/ky.svg");
}
.eufemia-scope--10_104_0 .fi-kz.fis {
background-image: url("../../../assets/flags/1x1/kz.svg");
}
.eufemia-scope--10_104_0 .fi-la.fis {
background-image: url("../../../assets/flags/1x1/la.svg");
}
.eufemia-scope--10_104_0 .fi-lb.fis {
background-image: url("../../../assets/flags/1x1/lb.svg");
}
.eufemia-scope--10_104_0 .fi-lc.fis {
background-image: url("../../../assets/flags/1x1/lc.svg");
}
.eufemia-scope--10_104_0 .fi-li.fis {
background-image: url("../../../assets/flags/1x1/li.svg");
}
.eufemia-scope--10_104_0 .fi-lk.fis {
background-image: url("../../../assets/flags/1x1/lk.svg");
}
.eufemia-scope--10_104_0 .fi-lr.fis {
background-image: url("../../../assets/flags/1x1/lr.svg");
}
.eufemia-scope--10_104_0 .fi-ls.fis {
background-image: url("../../../assets/flags/1x1/ls.svg");
}
.eufemia-scope--10_104_0 .fi-lt.fis {
background-image: url("../../../assets/flags/1x1/lt.svg");
}
.eufemia-scope--10_104_0 .fi-lu.fis {
background-image: url("../../../assets/flags/1x1/lu.svg");
}
.eufemia-scope--10_104_0 .fi-lv.fis {
background-image: url("../../../assets/flags/1x1/lv.svg");
}
.eufemia-scope--10_104_0 .fi-ly.fis {
background-image: url("../../../assets/flags/1x1/ly.svg");
}
.eufemia-scope--10_104_0 .fi-ma.fis {
background-image: url("../../../assets/flags/1x1/ma.svg");
}
.eufemia-scope--10_104_0 .fi-mc.fis {
background-image: url("../../../assets/flags/1x1/mc.svg");
}
.eufemia-scope--10_104_0 .fi-md.fis {
background-image: url("../../../assets/flags/1x1/md.svg");
}
.eufemia-scope--10_104_0 .fi-me.fis {
background-image: url("../../../assets/flags/1x1/me.svg");
}
.eufemia-scope--10_104_0 .fi-mf.fis {
background-image: url("../../../assets/flags/1x1/mf.svg");
}
.eufemia-scope--10_104_0 .fi-mg.fis {
background-image: url("../../../assets/flags/1x1/mg.svg");
}
.eufemia-scope--10_104_0 .fi-mh.fis {
background-image: url("../../../assets/flags/1x1/mh.svg");
}
.eufemia-scope--10_104_0 .fi-mk.fis {
background-image: url("../../../assets/flags/1x1/mk.svg");
}
.eufemia-scope--10_104_0 .fi-ml.fis {
background-image: url("../../../assets/flags/1x1/ml.svg");
}
.eufemia-scope--10_104_0 .fi-mm.fis {
background-image: url("../../../assets/flags/1x1/mm.svg");
}
.eufemia-scope--10_104_0 .fi-mn.fis {
background-image: url("../../../assets/flags/1x1/mn.svg");
}
.eufemia-scope--10_104_0 .fi-mo.fis {
background-image: url("../../../assets/flags/1x1/mo.svg");
}
.eufemia-scope--10_104_0 .fi-mp.fis {
background-image: url("../../../assets/flags/1x1/mp.svg");
}
.eufemia-scope--10_104_0 .fi-mq.fis {
background-image: url("../../../assets/flags/1x1/mq.svg");
}
.eufemia-scope--10_104_0 .fi-mr.fis {
background-image: url("../../../assets/flags/1x1/mr.svg");
}
.eufemia-scope--10_104_0 .fi-ms.fis {
background-image: url("../../../assets/flags/1x1/ms.svg");
}
.eufemia-scope--10_104_0 .fi-mt.fis {
background-image: url("../../../assets/flags/1x1/mt.svg");
}
.eufemia-scope--10_104_0 .fi-mu.fis {
background-image: url("../../../assets/flags/1x1/mu.svg");
}
.eufemia-scope--10_104_0 .fi-mv.fis {
background-image: url("../../../assets/flags/1x1/mv.svg");
}
.eufemia-scope--10_104_0 .fi-mw.fis {
background-image: url("../../../assets/flags/1x1/mw.svg");
}
.eufemia-scope--10_104_0 .fi-mx.fis {
background-image: url("../../../assets/flags/1x1/mx.svg");
}
.eufemia-scope--10_104_0 .fi-my.fis {
background-image: url("../../../assets/flags/1x1/my.svg");
}
.eufemia-scope--10_104_0 .fi-mz.fis {
background-image: url("../../../assets/flags/1x1/mz.svg");
}
.eufemia-scope--10_104_0 .fi-na.fis {
background-image: url("../../../assets/flags/1x1/na.svg");
}
.eufemia-scope--10_104_0 .fi-nc.fis {
background-image: url("../../../assets/flags/1x1/nc.svg");
}
.eufemia-scope--10_104_0 .fi-ne.fis {
background-image: url("../../../assets/flags/1x1/ne.svg");
}
.eufemia-scope--10_104_0 .fi-nf.fis {
background-image: url("../../../assets/flags/1x1/nf.svg");
}
.eufemia-scope--10_104_0 .fi-ng.fis {
background-image: url("../../../assets/flags/1x1/ng.svg");
}
.eufemia-scope--10_104_0 .fi-ni.fis {
background-image: url("../../../assets/flags/1x1/ni.svg");
}
.eufemia-scope--10_104_0 .fi-nl.fis {
background-image: url("../../../assets/flags/1x1/nl.svg");
}
.eufemia-scope--10_104_0 .fi-no.fis {
background-image: url("../../../assets/flags/1x1/no.svg");
}
.eufemia-scope--10_104_0 .fi-np.fis {
background-image: url("../../../assets/flags/1x1/np.svg");
}
.eufemia-scope--10_104_0 .fi-nr.fis {
background-image: url("../../../assets/flags/1x1/nr.svg");
}
.eufemia-scope--10_104_0 .fi-nu.fis {
background-image: url("../../../assets/flags/1x1/nu.svg");
}
.eufemia-scope--10_104_0 .fi-nz.fis {
background-image: url("../../../assets/flags/1x1/nz.svg");
}
.eufemia-scope--10_104_0 .fi-om.fis {
background-image: url("../../../assets/flags/1x1/om.svg");
}
.eufemia-scope--10_104_0 .fi-pa.fis {
background-image: url("../../../assets/flags/1x1/pa.svg");
}
.eufemia-scope--10_104_0 .fi-pe.fis {
background-image: url("../../../assets/flags/1x1/pe.svg");
}
.eufemia-scope--10_104_0 .fi-pf.fis {
background-image: url("../../../assets/flags/1x1/pf.svg");
}
.eufemia-scope--10_104_0 .fi-pg.fis {
background-image: url("../../../assets/flags/1x1/pg.svg");
}
.eufemia-scope--10_104_0 .fi-ph.fis {
background-image: url("../../../assets/flags/1x1/ph.svg");
}
.eufemia-scope--10_104_0 .fi-pk.fis {
background-image: url("../../../assets/flags/1x1/pk.svg");
}
.eufemia-scope--10_104_0 .fi-pl.fis {
background-image: url("../../../assets/flags/1x1/pl.svg");
}
.eufemia-scope--10_104_0 .fi-pm.fis {
background-image: url("../../../assets/flags/1x1/pm.svg");
}
.eufemia-scope--10_104_0 .fi-pn.fis {
background-image: url("../../../assets/flags/1x1/pn.svg");
}
.eufemia-scope--10_104_0 .fi-pr.fis {
background-image: url("../../../assets/flags/1x1/pr.svg");
}
.eufemia-scope--10_104_0 .fi-ps.fis {
background-image: url("../../../assets/flags/1x1/ps.svg");
}
.eufemia-scope--10_104_0 .fi-pt.fis {
background-image: url("../../../assets/flags/1x1/pt.svg");
}
.eufemia-scope--10_104_0 .fi-pw.fis {
background-image: url("../../../assets/flags/1x1/pw.svg");
}
.eufemia-scope--10_104_0 .fi-py.fis {
background-image: url("../../../assets/flags/1x1/py.svg");
}
.eufemia-scope--10_104_0 .fi-qa.fis {
background-image: url("../../../assets/flags/1x1/qa.svg");
}
.eufemia-scope--10_104_0 .fi-re.fis {
background-image: url("../../../assets/flags/1x1/re.svg");
}
.eufemia-scope--10_104_0 .fi-ro.fis {
background-image: url("../../../assets/flags/1x1/ro.svg");
}
.eufemia-scope--10_104_0 .fi-rs.fis {
background-image: url("../../../assets/flags/1x1/rs.svg");
}
.eufemia-scope--10_104_0 .fi-ru.fis {
background-image: url("../../../assets/flags/1x1/ru.svg");
}
.eufemia-scope--10_104_0 .fi-rw.fis {
background-image: url("../../../assets/flags/1x1/rw.svg");
}
.eufemia-scope--10_104_0 .fi-sa.fis {
background-image: url("../../../assets/flags/1x1/sa.svg");
}
.eufemia-scope--10_104_0 .fi-sb.fis {
background-image: url("../../../assets/flags/1x1/sb.svg");
}
.eufemia-scope--10_104_0 .fi-sc.fis {
background-image: url("../../../assets/flags/1x1/sc.svg");
}
.eufemia-scope--10_104_0 .fi-sd.fis {
background-image: url("../../../assets/flags/1x1/sd.svg");
}
.eufemia-scope--10_104_0 .fi-se.fis {
background-image: url("../../../assets/flags/1x1/se.svg");
}
.eufemia-scope--10_104_0 .fi-sg.fis {
background-image: url("../../../assets/flags/1x1/sg.svg");
}
.eufemia-scope--10_104_0 .fi-sh.fis {
background-image: url("../../../assets/flags/1x1/sh.svg");
}
.eufemia-scope--10_104_0 .fi-si.fis {
background-image: url("../../../assets/flags/1x1/si.svg");
}
.eufemia-scope--10_104_0 .fi-sj.fis {
background-image: url("../../../assets/flags/1x1/sj.svg");
}
.eufemia-scope--10_104_0 .fi-sk.fis {
background-image: url("../../../assets/flags/1x1/sk.svg");
}
.eufemia-scope--10_104_0 .fi-sl.fis {
background-image: url("../../../assets/flags/1x1/sl.svg");
}
.eufemia-scope--10_104_0 .fi-sm.fis {
background-image: url("../../../assets/flags/1x1/sm.svg");
}
.eufemia-scope--10_104_0 .fi-sn.fis {
background-image: url("../../../assets/flags/1x1/sn.svg");
}
.eufemia-scope--10_104_0 .fi-so.fis {
background-image: url("../../../assets/flags/1x1/so.svg");
}
.eufemia-scope--10_104_0 .fi-sr.fis {
background-image: url("../../../assets/flags/1x1/sr.svg");
}
.eufemia-scope--10_104_0 .fi-ss.fis {
background-image: url("../../../assets/flags/1x1/ss.svg");
}
.eufemia-scope--10_104_0 .fi-st.fis {
background-image: url("../../../assets/flags/1x1/st.svg");
}
.eufemia-scope--10_104_0 .fi-sv.fis {
background-image: url("../../../assets/flags/1x1/sv.svg");
}
.eufemia-scope--10_104_0 .fi-sx.fis {
background-image: url("../../../assets/flags/1x1/sx.svg");
}
.eufemia-scope--10_104_0 .fi-sy.fis {
background-image: url("../../../assets/flags/1x1/sy.svg");
}
.eufemia-scope--10_104_0 .fi-sz.fis {
background-image: url("../../../assets/flags/1x1/sz.svg");
}
.eufemia-scope--10_104_0 .fi-tc.fis {
background-image: url("../../../assets/flags/1x1/tc.svg");
}
.eufemia-scope--10_104_0 .fi-td.fis {
background-image: url("../../../assets/flags/1x1/td.svg");
}
.eufemia-scope--10_104_0 .fi-tf.fis {
background-image: url("../../../assets/flags/1x1/tf.svg");
}
.eufemia-scope--10_104_0 .fi-tg.fis {
background-image: url("../../../assets/flags/1x1/tg.svg");
}
.eufemia-scope--10_104_0 .fi-th.fis {
background-image: url("../../../assets/flags/1x1/th.svg");
}
.eufemia-scope--10_104_0 .fi-tj.fis {
background-image: url("../../../assets/flags/1x1/tj.svg");
}
.eufemia-scope--10_104_0 .fi-tk.fis {
background-image: url("../../../assets/flags/1x1/tk.svg");
}
.eufemia-scope--10_104_0 .fi-tl.fis {
background-image: url("../../../assets/flags/1x1/tl.svg");
}
.eufemia-scope--10_104_0 .fi-tm.fis {
background-image: url("../../../assets/flags/1x1/tm.svg");
}
.eufemia-scope--10_104_0 .fi-tn.fis {
background-image: url("../../../assets/flags/1x1/tn.svg");
}
.eufemia-scope--10_104_0 .fi-to.fis {
background-image: url("../../../assets/flags/1x1/to.svg");
}
.eufemia-scope--10_104_0 .fi-tr.fis {
background-image: url("../../../assets/flags/1x1/tr.svg");
}
.eufemia-scope--10_104_0 .fi-tt.fis {
background-image: url("../../../assets/flags/1x1/tt.svg");
}
.eufemia-scope--10_104_0 .fi-tv.fis {
background-image: url("../../../assets/flags/1x1/tv.svg");
}
.eufemia-scope--10_104_0 .fi-tw.fis {
background-image: url("../../../assets/flags/1x1/tw.svg");
}
.eufemia-scope--10_104_0 .fi-tz.fis {
background-image: url("../../../assets/flags/1x1/tz.svg");
}
.eufemia-scope--10_104_0 .fi-ua.fis {
background-image: url("../../../assets/flags/1x1/ua.svg");
}
.eufemia-scope--10_104_0 .fi-ug.fis {
background-image: url("../../../assets/flags/1x1/ug.svg");
}
.eufemia-scope--10_104_0 .fi-um.fis {
background-image: url("../../../assets/flags/1x1/um.svg");
}
.eufemia-scope--10_104_0 .fi-us.fis {
background-image: url("../../../assets/flags/1x1/us.svg");
}
.eufemia-scope--10_104_0 .fi-uy.fis {
background-image: url("../../../assets/flags/1x1/uy.svg");
}
.eufemia-scope--10_104_0 .fi-uz.fis {
background-image: url("../../../assets/flags/1x1/uz.svg");
}
.eufemia-scope--10_104_0 .fi-va.fis {
background-image: url("../../../assets/flags/1x1/va.svg");
}
.eufemia-scope--10_104_0 .fi-vc.fis {
background-image: url("../../../assets/flags/1x1/vc.svg");
}
.eufemia-scope--10_104_0 .fi-ve.fis {
background-image: url("../../../assets/flags/1x1/ve.svg");
}
.eufemia-scope--10_104_0 .fi-vg.fis {
background-image: url("../../../assets/flags/1x1/vg.svg");
}
.eufemia-scope--10_104_0 .fi-vi.fis {
background-image: url("../../../assets/flags/1x1/vi.svg");
}
.eufemia-scope--10_104_0 .fi-vn.fis {
background-image: url("../../../assets/flags/1x1/vn.svg");
}
.eufemia-scope--10_104_0 .fi-vu.fis {
background-image: url("../../../assets/flags/1x1/vu.svg");
}
.eufemia-scope--10_104_0 .fi-wf.fis {
background-image: url("../../../assets/flags/1x1/wf.svg");
}
.eufemia-scope--10_104_0 .fi-ws.fis {
background-image: url("../../../assets/flags/1x1/ws.svg");
}
.eufemia-scope--10_104_0 .fi-ye.fis {
background-image: url("../../../assets/flags/1x1/ye.svg");
}
.eufemia-scope--10_104_0 .fi-yt.fis {
background-image: url("../../../assets/flags/1x1/yt.svg");
}
.eufemia-scope--10_104_0 .fi-za.fis {
background-image: url("../../../assets/flags/1x1/za.svg");
}
.eufemia-scope--10_104_0 .fi-zm.fis {
background-image: url("../../../assets/flags/1x1/zm.svg");
}
.eufemia-scope--10_104_0 .fi-zw.fis {
background-image: url("../../../assets/flags/1x1/zw.svg");
}
.eufemia-scope--10_104_0 .fi-arab.fis {
background-image: url("../../../assets/flags/1x1/arab.svg");
}
.eufemia-scope--10_104_0 .fi-cefta.fis {
background-image: url("../../../assets/flags/1x1/cefta.svg");
}
.eufemia-scope--10_104_0 .fi-cp.fis {
background-image: url("../../../assets/flags/1x1/cp.svg");
}
.eufemia-scope--10_104_0 .fi-dg.fis {
background-image: url("../../../assets/flags/1x1/dg.svg");
}
.eufemia-scope--10_104_0 .fi-eac.fis {
background-image: url("../../../assets/flags/1x1/eac.svg");
}
.eufemia-scope--10_104_0 .fi-es-ct.fis {
background-image: url("../../../assets/flags/1x1/es-ct.svg");
}
.eufemia-scope--10_104_0 .fi-es-ga.fis {
background-image: url("../../../assets/flags/1x1/es-ga.svg");
}
.eufemia-scope--10_104_0 .fi-es-pv.fis {
background-image: url("../../../assets/flags/1x1/es-pv.svg");
}
.eufemia-scope--10_104_0 .fi-eu.fis {
background-image: url("../../../assets/flags/1x1/eu.svg");
}
.eufemia-scope--10_104_0 .fi-gb-eng.fis {
background-image: url("../../../assets/flags/1x1/gb-eng.svg");
}
.eufemia-scope--10_104_0 .fi-gb-nir.fis {
background-image: url("../../../assets/flags/1x1/gb-nir.svg");
}
.eufemia-scope--10_104_0 .fi-gb-sct.fis {
background-image: url("../../../assets/flags/1x1/gb-sct.svg");
}
.eufemia-scope--10_104_0 .fi-gb-wls.fis {
background-image: url("../../../assets/flags/1x1/gb-wls.svg");
}
.eufemia-scope--10_104_0 .fi-ic.fis {
background-image: url("../../../assets/flags/1x1/ic.svg");
}
.eufemia-scope--10_104_0 .fi-pc.fis {
background-image: url("../../../assets/flags/1x1/pc.svg");
}
.eufemia-scope--10_104_0 .fi-sh-ac.fis {
background-image: url("../../../assets/flags/1x1/sh-ac.svg");
}
.eufemia-scope--10_104_0 .fi-sh-hl.fis {
background-image: url("../../../assets/flags/1x1/sh-hl.svg");
}
.eufemia-scope--10_104_0 .fi-sh-ta.fis {
background-image: url("../../../assets/flags/1x1/sh-ta.svg");
}
.eufemia-scope--10_104_0 .fi-un.fis {
background-image: url("../../../assets/flags/1x1/un.svg");
}
.eufemia-scope--10_104_0 .fi-xk.fis {
background-image: url("../../../assets/flags/1x1/xk.svg");
}
/*
* CountryFlag component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-icon:has(.dnb-country-flag) {
display: inline-flex;
justify-content: center;
}
.eufemia-scope--10_104_0 .dnb-country-flag {
display: inline-flex;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-country-flag__size--auto {
--size: 1em;
}
.eufemia-scope--10_104_0 .dnb-country-flag__size--xx-small {
--size: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-country-flag__size--x-small {
--size: 0.75rem;
}
.eufemia-scope--10_104_0 .dnb-country-flag__size--small {
--size: 1rem;
}
.eufemia-scope--10_104_0 .dnb-country-flag__size--medium {
--size: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-country-flag__size--large {
--size: 2rem;
}
.eufemia-scope--10_104_0 .dnb-country-flag__size--x-large {
--size: 2.5rem;
}
.eufemia-scope--10_104_0 p .dnb-country-flag, .eufemia-scope--10_104_0 h1 .dnb-country-flag, .eufemia-scope--10_104_0 h2 .dnb-country-flag, .eufemia-scope--10_104_0 h3 .dnb-country-flag, .eufemia-scope--10_104_0 h4 .dnb-country-flag {
vertical-align: sub;
}
.eufemia-scope--10_104_0 .dnb-country-flag__flag {
border-radius: 50%;
width: var(--size);
height: var(--size);
}
.eufemia-scope--10_104_0 .dnb-country-flag__shape--square .dnb-country-flag__flag {
border-radius: unset;
}
/*
* DatePicker component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-date-picker {
--date-picker-input-height: 2rem;
--date-picker-day-width: 2rem;
--date-picker-day-horizontal-spacing: 4px;
display: inline-flex;
align-items: center;
column-gap: var(--spacing-small);
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-date-picker__inner {
display: inline-flex;
flex-direction: column;
line-height: var(--date-picker-input-height);
}
.eufemia-scope--10_104_0 .dnb-date-picker__row {
display: inline-flex;
}
.eufemia-scope--10_104_0 .dnb-date-picker__shell {
position: relative;
top: 0;
display: inline-flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input__wrapper {
display: inline-flex;
white-space: nowrap;
height: inherit;
}
.eufemia-scope--10_104_0 .dnb-date-picker__triangle {
pointer-events: none;
position: absolute;
top: calc(2px - var(--date-picker-input-height) / 2);
left: 0;
right: auto;
margin: 0 1.5rem;
width: calc(var(--date-picker-input-height) / 2);
height: calc(var(--date-picker-input-height) / 2);
overflow: hidden;
}
.eufemia-scope--10_104_0 .dnb-date-picker__triangle::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(var(--date-picker-input-height) / 2);
height: calc(var(--date-picker-input-height) / 2);
transform: translateY(60%) rotate(45deg);
border: 1px solid var(--color-black-border);
background-color: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-date-picker__container {
width: -webkit-min-content;
width: min-content;
position: relative;
top: auto;
}
.eufemia-scope--10_104_0 .dnb-date-picker__container table {
position: relative;
z-index: 1;
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-date-picker__container table.dnb-no-focus:focus {
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-date-picker__container table.dnb-no-focus:focus {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-date-picker__container:not(.dnb-date-picker__container--show-footer) .dnb-date-picker__calendar::after {
content: none;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input,
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input,
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input {
display: inline-block;
width: auto;
margin: 0;
padding: 0 0.125rem;
transform: translateY(0);
outline: none;
font-family: var(--font-family-monospace);
text-align: center;
border: none;
background: transparent;
overflow: visible;
white-space: nowrap;
}
@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) and (not (-ms-ime-align: auto)) and (not (-moz-appearance: none)) {
.eufemia-scope--10_104_0 .dnb-date-picker__input,
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input,
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input {
margin: 0 -4px;
}
}
@supports (-ms-ime-align: auto) {
.eufemia-scope--10_104_0 .dnb-date-picker__input,
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input,
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input {
margin: 0 -5px;
}
}
@supports (-webkit-touch-callout: none) {
.eufemia-scope--10_104_0 .dnb-date-picker__input:not(*:root),
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(*:root),
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input:not(*:root) {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input,
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input,
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input {
text-indent: -2px;
}
}
@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
.eufemia-scope--10_104_0 .dnb-date-picker__input:not(*:root),
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(*:root),
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input:not(*:root) {
margin: 0 -4px;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input:first-of-type:not(*:root),
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(*:root),
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input:first-of-type:not(*:root) {
margin-left: 0.8rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input:last-of-type:not(*:root),
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(*:root),
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input:last-of-type:not(*:root) {
margin-right: 2.2rem;
}
}
.eufemia-scope--10_104_0 .dnb-date-picker__input--small.dnb-date-picker__input--small, .eufemia-scope--10_104_0 .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input, .eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small, .eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input {
padding-right: 0.125rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input--small:last-of-type:not(*:root),
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(*:root),
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small:last-of-type:not(*:root) {
margin-right: 2.2rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input--medium.dnb-date-picker__input--medium, .eufemia-scope--10_104_0 .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input, .eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium, .eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input {
padding-right: 0.125rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input--medium:last-of-type:not(*:root),
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(*:root),
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(*:root) {
margin-right: 3.2rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input--large.dnb-date-picker__input--large, .eufemia-scope--10_104_0 .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input, .eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large, .eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input {
padding-right: 0.125rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input--large:last-of-type:not(*:root),
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(*:root),
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large:last-of-type:not(*:root) {
margin-right: 4rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__input--label-alignment-right,
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--label-alignment-right,
.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--label-alignment-right {
flex-flow: row-reverse;
width: -webkit-fit-content;
width: fit-content;
}
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type, .eufemia-scope--10_104_0 .dnb-date-picker__input:first-of-type {
margin-left: 0.8rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type, .eufemia-scope--10_104_0 .dnb-date-picker__input:last-of-type {
margin-right: 2.2rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__shell {
display: none;
}
.eufemia-scope--10_104_0 .dnb-date-picker--show-input .dnb-input__shell {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell {
box-shadow: none;
}
.eufemia-scope--10_104_0 .dnb-input__submit-button button:focus ~ .dnb-date-picker__input__wrapper {
display: block;
}
.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element, .eufemia-scope--10_104_0 .dnb-input__submit-element > .dnb-date-picker .dnb-input__submit-element {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-date-picker__views {
display: flex;
-webkit-user-select: none;
user-select: none;
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-date-picker__views {
flex-direction: column;
}
}
.eufemia-scope--10_104_0 .dnb-date-picker__calendar {
position: relative;
padding: 1rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__calendar::after {
content: "";
position: absolute;
bottom: 0;
width: calc(100% - 2rem);
height: 1px;
}
.eufemia-scope--10_104_0 .dnb-date-picker__header {
min-height: 2.5rem;
line-height: var(--line-height-basis);
-webkit-user-select: text;
user-select: text;
}
.eufemia-scope--10_104_0 .dnb-date-picker__addon, .eufemia-scope--10_104_0 .dnb-date-picker__header {
position: relative;
display: flex;
justify-content: space-between;
padding-bottom: 1rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__addon::after, .eufemia-scope--10_104_0 .dnb-date-picker__header::after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
}
.eufemia-scope--10_104_0 .dnb-date-picker__addon {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
gap: 1rem;
padding: 1rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__addon::after {
left: 1rem;
width: calc(100% - 2rem);
}
.eufemia-scope--10_104_0 .dnb-date-picker__footer {
position: relative;
display: flex;
justify-content: space-between;
padding: 1rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__labels__day {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__labels, .eufemia-scope--10_104_0 .dnb-date-picker__days {
min-width: 18rem;
max-width: 18rem;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day, .eufemia-scope--10_104_0 .dnb-date-picker__labels__day {
display: flex;
flex-basis: 14.2857142857%;
justify-content: center;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day {
position: relative;
width: var(--date-picker-day-width);
height: var(--date-picker-day-width);
margin: var(--date-picker-day-horizontal-spacing) 0;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day .dnb-button {
position: absolute;
top: 0;
width: var(--date-picker-day-width);
height: var(--date-picker-day-width);
white-space: nowrap;
box-shadow: none;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day .dnb-button__bounding {
border-radius: 0;
transform: scale(1.28);
}
.eufemia-scope--10_104_0 .dnb-date-picker__day .dnb-button__text {
transform: translateY(0);
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--selectable:hover {
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date .dnb-button, .eufemia-scope--10_104_0 .dnb-date-picker__day--end-date .dnb-button {
z-index: 1;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date, .eufemia-scope--10_104_0 .dnb-date-picker__day--end-date {
position: relative;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date::after, .eufemia-scope--10_104_0 .dnb-date-picker__day--end-date::after {
content: "";
position: absolute;
top: 0;
width: calc(var(--date-picker-day-width) / 2);
height: 100%;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date::after {
left: auto;
right: 0;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--end-date::after {
left: 0;
right: auto;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date.dnb-date-picker__day--end-date::after {
content: none;
}
.eufemia-scope--10_104_0 .dnb-date-picker .rtl {
direction: rtl;
}
.eufemia-scope--10_104_0 .dnb-date-picker .rtl .dnb-date-picker__prev::before {
transform: scaleX(-1);
}
.eufemia-scope--10_104_0 .dnb-date-picker .rtl .dnb-date-picker__next::before {
transform: scaleX(-1);
}
.eufemia-scope--10_104_0 .dnb-date-picker__inner > .dnb-form-status {
order: 2;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker--vertical {
display: flex;
align-items: flex-start;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-date-picker > .dnb-form-label {
line-height: var(--line-height-basis);
margin-right: 0;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-date-picker {
flex-wrap: wrap;
}
.eufemia-scope--10_104_0 .dnb-date-picker > .dnb-form-label {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
}
.eufemia-scope--10_104_0 .dnb-date-picker--stretch {
display: flex;
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-date-picker--stretch .dnb-date-picker__inner, .eufemia-scope--10_104_0 .dnb-date-picker--stretch .dnb-date-picker__shell {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-form-row--horizontal .dnb-date-picker--stretch {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status] {
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status] > .dnb-form-label {
margin-top: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button {
border-radius: 50%;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-date-picker {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-date-picker > .dnb-form-label {
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-date-picker__helper {
display: none;
}
}
.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton {
visibility: hidden;
}
.eufemia-scope--10_104_0 .dnb-date-picker__fieldset:not([class*=space__top]), .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-date-picker__fieldset:not([class*=space__bottom]), .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-date-picker__fieldset:not([class*=space__left]), .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__left]) {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-date-picker__fieldset:not([class*=space__right]), .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__right]) {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-date-picker__fieldset, .eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__fieldset {
padding: 0;
border: none;
}
.eufemia-scope--10_104_0 .dnb-date-picker__portal {
--date-picker-input-height: 2rem;
--date-picker-day-width: 2rem;
--date-picker-day-horizontal-spacing: 4px;
--popover-z-index: calc(var(--modal-z-index) + 10);
line-height: var(--date-picker-input-height);
}
@keyframes date-picker-slide-down {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes date-picker-slide-up {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/*
* Dialog component
*
*/
/*
* Utilities
*/
/*
* Modal component
*
*/
@keyframes show-modal {
from {
opacity: 0.1;
transform: translate3d(0, -1rem, 0);
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes hide-modal {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 1rem, 0);
opacity: 0;
}
}
@keyframes show-drawer {
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes hide-drawer-left {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(-20rem, 0, 0);
opacity: 0;
}
}
@keyframes hide-drawer-top {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, -20rem, 0);
opacity: 0;
}
}
@keyframes hide-drawer-bottom {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 20rem, 0);
opacity: 0;
}
}
@keyframes hide-drawer-right {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(20rem, 0, 0);
opacity: 0;
}
}
@keyframes show-modal-overlay {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes hide-modal-overlay {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.eufemia-scope--10_104_0 .dnb-dialog {
--dialog-min-width: 320px;
--dialog-avg-width: 60vw;
--dialog-max-width: 49rem;
--dialog-confirm-max-width: 40rem;
--dialog-spacing: 2rem;
--dialog-spacing-minus: -2rem;
--dialog-radius: 0.5rem;
--dialog-padding: calc(var(--dialog-spacing) * 1.75);
position: relative;
border-radius: var(--dialog-radius);
box-shadow: var(--shadow-default);
-webkit-user-select: text;
user-select: text;
border: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background: var(--dialog-background);
max-height: 100vh;
overflow: hidden;
}
.eufemia-scope--10_104_0 .dnb-dialog > .dnb-scroll-view {
height: 100%;
max-height: 90vh;
}
.eufemia-scope--10_104_0 .dnb-dialog__inner {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.eufemia-scope--10_104_0 .dnb-dialog--information {
width: var(--dialog-avg-width);
min-width: var(--dialog-min-width);
max-width: var(--dialog-max-width);
}
.eufemia-scope--10_104_0 .dnb-dialog--confirmation {
max-width: var(--dialog-confirm-max-width);
margin-left: 1rem;
margin-right: 1rem;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-dialog--auto-fullscreen {
width: 100%;
height: 100vh;
max-width: 100%;
max-height: 100vh;
border-radius: 0;
box-shadow: none;
margin: auto 0;
}
}
.eufemia-scope--10_104_0 .dnb-dialog--fullscreen {
width: 100%;
height: 100vh;
max-width: 100%;
max-height: 100vh;
border-radius: 0;
box-shadow: none;
margin: auto 0;
}
.eufemia-scope--10_104_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
padding-bottom: calc(var(--dialog-spacing) * 2);
}
.eufemia-scope--10_104_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
padding-left: var(--dialog-padding);
padding-right: var(--dialog-padding);
}
@media screen and (max-width: 72em) {
.eufemia-scope--10_104_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
padding-left: calc(var(--dialog-spacing));
padding-right: calc(var(--dialog-spacing));
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
padding-left: calc(var(--dialog-spacing) / 2);
padding-right: calc(var(--dialog-spacing) / 2);
}
}
.eufemia-scope--10_104_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section {
margin-top: calc(var(--dialog-spacing));
margin-bottom: calc(var(--dialog-spacing) / 2);
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section {
margin-top: calc(var(--dialog-spacing) / 2);
}
}
.eufemia-scope--10_104_0 .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner {
padding: calc(var(--dialog-spacing));
}
.eufemia-scope--10_104_0 .dnb-dialog__align--centered .dnb-dialog__inner {
align-items: center;
justify-content: center;
}
.eufemia-scope--10_104_0 .dnb-dialog__align--centered .dnb-dialog__title, .eufemia-scope--10_104_0 .dnb-dialog__align--centered.dnb-dialog--confirmation .dnb-dialog__content {
text-align: center;
}
.eufemia-scope--10_104_0 .dnb-dialog__content {
position: relative;
z-index: 1;
}
.eufemia-scope--10_104_0 .dnb-dialog__actions {
padding-top: 1.5rem;
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 1rem;
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-dialog--information .dnb-dialog__actions {
justify-content: left;
}
.eufemia-scope--10_104_0 .dnb-dialog__align--center .dnb-dialog__content {
align-items: center;
text-align: center;
}
.eufemia-scope--10_104_0 .dnb-dialog__align--right .dnb-dialog__content {
align-items: flex-end;
text-align: right;
}
.eufemia-scope--10_104_0 .dnb-dialog__title ~ .dnb-dialog__content {
padding-top: calc(var(--dialog-spacing) / 2);
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-dialog__title {
font-size: var(--font-size-large) !important;
line-height: var(--line-height-medium) !important;
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-dialog__title {
font-size: var(--font-size-medium) !important;
line-height: var(--line-height-lead) !important;
}
}
.eufemia-scope--10_104_0 .dnb-dialog--information .dnb-dialog__title {
margin-bottom: var(--spacing-small) !important;
}
.eufemia-scope--10_104_0 .dnb-dialog--confirmation .dnb-dialog__title {
margin-bottom: var(--spacing-x-small) !important;
}
.eufemia-scope--10_104_0 .dnb-dialog__navigation.dnb-section {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.eufemia-scope--10_104_0 .dnb-dialog--spacing .dnb-dialog__navigation.dnb-section {
position: sticky;
top: 0;
left: 0;
z-index: 99;
}
.eufemia-scope--10_104_0 .dnb-dialog--spacing .dnb-dialog__navigation.dnb-section.dnb-dialog__navigation--sticky {
z-index: 2999;
}
.eufemia-scope--10_104_0 .dnb-dialog .dnb-dialog__navigation--sticky::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
box-shadow: var(--shadow-default);
}
.eufemia-scope--10_104_0 .dnb-dialog .dnb-dialog__navigation:not(.dnb-dialog__navigation--sticky)::after {
color: transparent;
}
.eufemia-scope--10_104_0 .dnb-dialog--spacing .dnb-dialog__navigation.dnb-section {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-dialog--spacing .dnb-dialog__navigation.dnb-section + .dnb-dialog__title {
margin-top: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-dialog .dnb-dialog__navigation--sticky::before {
left: calc(-1 * var(--dialog-padding));
right: calc(-1 * var(--dialog-padding));
box-shadow: var(--shadow-default-x) var(--shadow-default-y) 8px 0 var(--shadow-default-color);
}
@media screen and (max-width: 72em) {
.eufemia-scope--10_104_0 .dnb-dialog .dnb-dialog__navigation--sticky::before {
left: calc(-1 * var(--dialog-spacing));
right: calc(-1 * var(--dialog-spacing));
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-dialog .dnb-dialog__navigation--sticky::before {
left: calc(-1 * var(--dialog-spacing) / 2);
right: calc(-1 * var(--dialog-spacing) / 2);
}
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-dialog {
animation: show-modal var(--modal-animation-duration) ease-out;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-dialog--hide {
animation: hide-modal 220ms ease-in-out forwards;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-dialog {
animation-duration: 0.01ms !important;
}
}
.eufemia-scope--10_104_0 .dnb-dialog--no-animation {
animation-duration: 0ms !important;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-dialog--no-animation-on-mobile {
animation-delay: 0ms !important;
animation-duration: 0ms !important;
}
}
.eufemia-scope--10_104_0 .dnb-dialog__body {
padding-bottom: calc(var(--dialog-spacing) * 2);
margin-bottom: calc(var(--dialog-spacing-minus) * 2);
}
.eufemia-scope--10_104_0 .dnb-dialog__header::after {
top: -500%;
height: 600%;
}
.eufemia-scope--10_104_0 .dnb-dialog__header [class*=dnb-h--], .eufemia-scope--10_104_0 .dnb-dialog__header .dnb-modal__title {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-dialog__header [class*=dnb-h--]:not([class*=__top]), .eufemia-scope--10_104_0 .dnb-dialog__header .dnb-modal__title:not([class*=__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-dialog__header [class*=dnb-h--]:not([class*=__bottom]), .eufemia-scope--10_104_0 .dnb-dialog__header .dnb-modal__title:not([class*=__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-dialog--spacing .dnb-dialog__header .dnb-tabs {
margin-top: 3.5rem;
}
.eufemia-scope--10_104_0 .dnb-dialog__icon {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-dialog__icon__primary.dnb-icon--border {
--icon-border-positioning--default: var(--dialog-icon-positioning);
color: var(--dialog-icon-color);
}
.eufemia-scope--10_104_0 .dnb-dialog__icon__primary.dnb-icon--border svg {
z-index: 1;
position: relative;
}
.eufemia-scope--10_104_0 .dnb-dialog__icon__primary.dnb-icon--border::after {
border: none;
background-color: var(--dialog-icon-background);
}
.eufemia-scope--10_104_0 .dnb-dialog__icon__primary.dnb-dialog__icon--warning {
--dialog-icon-color: var(--dialog-icon-color--warning);
--dialog-icon-background: var(--dialog-icon-background--warning);
}
.eufemia-scope--10_104_0 .dnb-dialog__icon__primary.dnb-dialog__icon--info {
--dialog-icon-color: var(--dialog-icon-color--info);
--dialog-icon-background: var(--dialog-icon-background--info);
}
.eufemia-scope--10_104_0 .dnb-dialog__icon ~ .dnb-dialog__header {
margin-top: 1.5rem;
}
@supports (-webkit-touch-callout: none) {
@media (max-height: 40em) {
.eufemia-scope--10_104_0 .dnb-dialog .dnb-scroll-view {
max-height: 82vh;
}
}
}
/*
* Drawer component
*
*/
/*
* Utilities
*/
/*
* Modal component
*
*/
@keyframes show-modal {
from {
opacity: 0.1;
transform: translate3d(0, -1rem, 0);
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes hide-modal {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 1rem, 0);
opacity: 0;
}
}
@keyframes show-drawer {
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes hide-drawer-left {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(-20rem, 0, 0);
opacity: 0;
}
}
@keyframes hide-drawer-top {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, -20rem, 0);
opacity: 0;
}
}
@keyframes hide-drawer-bottom {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 20rem, 0);
opacity: 0;
}
}
@keyframes hide-drawer-right {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(20rem, 0, 0);
opacity: 0;
}
}
@keyframes show-modal-overlay {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes hide-modal-overlay {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.eufemia-scope--10_104_0 .dnb-drawer {
--drawer-width: 40vw;
--drawer-min-width: 384px;
--drawer-max-width: 40rem;
--drawer-spacing: 2rem;
--drawer-spacing-minus: -2rem;
position: relative;
max-height: 100vh;
width: 100%;
height: 100vh;
max-width: 100%;
max-height: 100vh;
border-radius: 0;
box-shadow: none;
width: var(--drawer-width);
min-width: var(--drawer-min-width);
max-width: var(--drawer-max-width);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-drawer {
--drawer-width: 100vw;
--drawer-min-width: none;
--drawer-max-width: none;
}
}
.eufemia-scope--10_104_0 .dnb-drawer {
box-shadow: var(--shadow-default);
-webkit-user-select: text;
user-select: text;
border: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-drawer--auto-fullscreen {
width: 100%;
height: 100vh;
max-width: 100%;
max-height: 100vh;
border-radius: 0;
box-shadow: none;
}
}
.eufemia-scope--10_104_0 .dnb-drawer__inner {
position: relative;
display: flex;
flex-direction: column;
z-index: 10;
/**
NB: Do not use "overflow-x: hidden;" in here,
(overflowing one direction, will influence the other – we can't just have one at a time)
To make the Drawer scroll, we use .dnb-scroll-view
*/
width: 100%;
min-height: calc(100% - var(--header-height, 0));
/** Sets the color on scroll overflow (at the bottom) */
background-color: var(--modal-background-color, transparent);
}
.eufemia-scope--10_104_0 .dnb-drawer__align--centered .dnb-drawer__inner {
align-items: center;
justify-content: center;
}
.eufemia-scope--10_104_0 .dnb-drawer__content {
position: relative;
z-index: 1;
}
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__content {
padding: 0 var(--drawer-spacing);
}
@media screen and (min-width: 80.00625em) {
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__content {
padding: 0 calc(var(--drawer-spacing) * 1.75);
}
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__content {
padding: 0 calc(var(--drawer-spacing) / 1.333333);
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__content {
padding: 0 calc(var(--drawer-spacing) / 2);
}
}
.eufemia-scope--10_104_0 .dnb-drawer__align--center .dnb-drawer__content {
align-items: center;
text-align: center;
}
.eufemia-scope--10_104_0 .dnb-drawer__align--right .dnb-drawer__content {
align-items: flex-end;
text-align: right;
}
.eufemia-scope--10_104_0 .dnb-drawer--top, .eufemia-scope--10_104_0 .dnb-drawer--bottom {
max-width: 100%;
width: 100vw;
height: 40vh;
}
@media screen and (max-height: 40em) {
.eufemia-scope--10_104_0 .dnb-drawer--top, .eufemia-scope--10_104_0 .dnb-drawer--bottom {
height: 100vw;
min-height: auto;
max-height: auto;
}
}
.eufemia-scope--10_104_0 .dnb-drawer--fullscreen {
width: 100%;
height: 100vh;
max-width: 100%;
max-height: 100vh;
border-radius: 0;
box-shadow: none;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer {
opacity: 0.1;
animation: show-drawer var(--modal-animation-duration) ease-out forwards;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer--left {
transform: translate3d(-20rem, 0, 0);
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer--right {
transform: translate3d(20rem, 0, 0);
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer--top {
transform: translate3d(0, -20rem, 0);
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer--bottom {
transform: translate3d(0, 20rem, 0);
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer--hide.dnb-drawer--left {
animation: hide-drawer-left var(--modal-animation-duration) ease-in-out forwards;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer--hide.dnb-drawer--right {
animation: hide-drawer-right var(--modal-animation-duration) ease-in-out forwards;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer--hide.dnb-drawer--top {
animation: hide-drawer-top var(--modal-animation-duration) ease-in-out forwards;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-drawer--hide.dnb-drawer--bottom {
animation: hide-drawer-bottom var(--modal-animation-duration) ease-in-out forwards;
}
.eufemia-scope--10_104_0 .dnb-drawer--no-animation {
animation-duration: 0ms !important;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-drawer {
animation-duration: 0.01ms !important;
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-drawer--no-animation-on-mobile {
animation-duration: 0ms !important;
}
}
.eufemia-scope--10_104_0 .dnb-drawer__root {
align-items: flex-start;
justify-content: flex-start;
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-drawer__title {
font-size: var(--font-size-large) !important;
line-height: var(--line-height-medium) !important;
}
}
.eufemia-scope--10_104_0 .dnb-drawer__title ~ .dnb-drawer__content {
padding-top: calc(var(--drawer-spacing) / 1.333333);
}
.eufemia-scope--10_104_0 .dnb-drawer .dnb-drawer__header [class*=dnb-h--], .eufemia-scope--10_104_0 .dnb-drawer .dnb-drawer__header .dnb-drawer__title {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer .dnb-drawer__header [class*=dnb-h--]:not([class*=__top]), .eufemia-scope--10_104_0 .dnb-drawer .dnb-drawer__header .dnb-drawer__title:not([class*=__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer .dnb-drawer__header [class*=dnb-h--]:not([class*=__bottom]), .eufemia-scope--10_104_0 .dnb-drawer .dnb-drawer__header .dnb-drawer__title:not([class*=__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer .dnb-drawer__header::after {
top: -500%;
height: 600%;
}
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__header {
padding: 0 var(--drawer-spacing);
}
@media screen and (min-width: 80.00625em) {
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__header {
padding: 0 calc(var(--drawer-spacing) * 1.75);
}
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__header {
padding: 0 calc(var(--drawer-spacing) / 1.333333);
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__header {
padding: 0 calc(var(--drawer-spacing) / 2);
}
}
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
margin-top: var(--drawer-spacing);
}
.eufemia-scope--10_104_0 .dnb-drawer__body {
padding-bottom: calc(var(--drawer-spacing) * 2);
margin-bottom: calc(var(--drawer-spacing-minus) * 2);
}
@supports (-webkit-touch-callout: none) {
.eufemia-scope--10_104_0 .dnb-drawer__body {
padding-bottom: calc(var(--drawer-spacing-minus) * 8);
}
}
.eufemia-scope--10_104_0 .dnb-drawer__navigation.dnb-section {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
position: sticky;
top: 0;
left: 0;
z-index: 99;
}
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
z-index: 2999;
}
.eufemia-scope--10_104_0 .dnb-drawer .dnb-drawer__navigation--sticky::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
box-shadow: var(--shadow-default);
}
.eufemia-scope--10_104_0 .dnb-drawer .dnb-drawer__navigation:not(.dnb-drawer__navigation--sticky)::after {
color: transparent;
}
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
margin: var(--drawer-spacing) 0;
padding: 0 var(--drawer-spacing);
}
@media screen and (min-width: 80.00625em) {
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
padding: 0 calc(var(--drawer-spacing) * 1.75);
}
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
padding: 0 calc(var(--drawer-spacing) / 1.333333);
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
padding: 0 calc(var(--drawer-spacing) / 2);
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-drawer--no-animation-on-mobile {
animation-delay: 0ms !important;
animation-duration: 0ms !important;
}
}
/*
* Dropdown component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-dropdown {
--dropdown-width: 16rem;
--dropdown-height: 2rem;
--dropdown-height--small: 1.5rem;
--dropdown-height--medium: 2.5rem;
--dropdown-height--large: 3rem;
--dropdown-padding-horizontal: 1rem;
--dropdown-focus-border-width: 0.125rem;
--dropdown-error-border-width: 0.125rem;
--dropdown-text-padding: 0.5rem;
--dropdown-button-padding: 0 1rem;
--dropdown-border-radius: 0.25rem;
--dropdown-foreground-color-primary: var(--color-black-55);
--dropdown-foreground-color-error: var(--color-fire-red);
--dropdown-background-color-disabled: var(--color-black-3);
--dropdown-background-color-error-active: var(--color-fire-red-8);
display: inline-flex;
align-items: center;
font-size: var(--font-size-small);
line-height: var(--dropdown-height);
}
.eufemia-scope--10_104_0 .dnb-dropdown__inner {
display: inline-flex;
flex-direction: column;
margin: 0;
padding: 0;
width: auto;
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-dropdown__shell {
position: relative;
width: var(--dropdown-width);
height: var(--dropdown-height);
margin: 0;
padding: 0;
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-dropdown__row {
display: inline-flex;
}
.eufemia-scope--10_104_0 .dnb-dropdown__icon {
position: relative;
order: 2;
display: inline-flex;
justify-content: center;
pointer-events: none;
}
.eufemia-scope--10_104_0 .dnb-dropdown__trigger {
position: relative;
z-index: 1;
-webkit-user-select: none;
user-select: none;
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-dropdown__trigger.dnb-button {
padding: var(--dropdown-button-padding);
border-radius: var(--dropdown-border-radius);
}
.eufemia-scope--10_104_0 .dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button {
padding: 0;
border-radius: 50%;
}
.eufemia-scope--10_104_0 .dnb-dropdown__text {
order: 1;
position: relative;
z-index: 4;
display: inline-block;
width: 100%;
overflow: hidden;
color: inherit;
text-align: left;
text-overflow: ellipsis;
line-height: inherit;
font-size: var(--font-size-basis);
}
.eufemia-scope--10_104_0 .dnb-dropdown__text__inner {
display: inherit;
overflow: hidden;
white-space: nowrap;
text-overflow: inherit;
}
.eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger {
--border-color: var(--dropdown-foreground-color-error);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) {
color: var(--dropdown-foreground-color-error);
--border-color: var(--dropdown-foreground-color-error);
--border-width: var(--dropdown-error-border-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) .dnb-dropdown__icon .dnb-icon {
color: var(--dropdown-foreground-color-error);
}
.eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:active:not([disabled]) {
color: var(--dropdown-foreground-color-error);
background-color: var(--dropdown-background-color-error-active);
}
.eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger, .eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__icon {
color: var(--dropdown-foreground-color-error);
}
.eufemia-scope--10_104_0 .dnb-dropdown > .dnb-form-status {
transform: translateY(-0.4375rem);
}
.eufemia-scope--10_104_0 .dnb-dropdown--icon-position-left .dnb-dropdown__text {
order: 2;
padding-right: 0;
padding-left: var(--dropdown-text-padding);
}
.eufemia-scope--10_104_0 .dnb-dropdown--icon-position-left .dnb-dropdown__icon {
order: 1;
}
.eufemia-scope--10_104_0 .dnb-dropdown--icon-position-right .dnb-dropdown__text {
padding-right: var(--dropdown-text-padding);
}
.eufemia-scope--10_104_0 .dnb-dropdown--independent-width .dnb-dropdown__shell {
width: auto;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-dropdown--action-menu .dnb-dropdown__trigger.dnb-button {
padding-left: 0.5rem;
padding-right: 0.5rem;
border-radius: 50%;
}
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text {
padding: 0 0.5rem;
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text {
width: 0;
padding: 0;
}
}
.eufemia-scope--10_104_0 .dnb-dropdown--icon-position-left .dnb-button--tertiary ~ .dnb-drawer-list__root--portal {
left: -0.5rem;
}
.eufemia-scope--10_104_0 .dnb-dropdown--icon-position-right .dnb-button--tertiary ~ .dnb-drawer-list__root--portal {
left: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-dropdown .dnb-button--tertiary.dnb-button--active {
box-shadow: none;
}
.eufemia-scope--10_104_0 .dnb-dropdown .dnb-button--tertiary .dnb-button__text {
margin: 0 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-dropdown .dnb-button--tertiary .dnb-button__text::after {
bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text, .eufemia-scope--10_104_0 .dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-dropdown .dnb-button--tertiary {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-dropdown .dnb-button--tertiary:focus::before {
left: 0 !important;
right: 0 !important;
}
.eufemia-scope--10_104_0 .dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell, .eufemia-scope--10_104_0 .dnb-dropdown--is-popup .dnb-dropdown__trigger {
padding: 0;
width: var(--dropdown-height);
height: var(--dropdown-height);
}
.eufemia-scope--10_104_0 .dnb-dropdown--is-popup .dnb-dropdown__icon {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options {
min-height: 1rem;
}
.eufemia-scope--10_104_0 .dnb-dropdown--is-popup .dnb-drawer-list__root {
width: var(--dropdown-width);
}
.eufemia-scope--10_104_0 .dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell, .eufemia-scope--10_104_0 .dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger {
width: var(--dropdown-height--small);
}
.eufemia-scope--10_104_0 .dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell, .eufemia-scope--10_104_0 .dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger {
width: var(--dropdown-height--medium);
}
.eufemia-scope--10_104_0 .dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell, .eufemia-scope--10_104_0 .dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger {
width: var(--dropdown-height--large);
}
.eufemia-scope--10_104_0 .dnb-dropdown--small .dnb-dropdown__shell, .eufemia-scope--10_104_0 .dnb-dropdown--small .dnb-dropdown__trigger {
height: var(--dropdown-height--small);
}
.eufemia-scope--10_104_0 .dnb-dropdown--small, .eufemia-scope--10_104_0 .dnb-dropdown--small .dnb-dropdown__trigger.dnb-button {
line-height: var(--dropdown-height--small);
}
.eufemia-scope--10_104_0 .dnb-dropdown--medium .dnb-dropdown__shell, .eufemia-scope--10_104_0 .dnb-dropdown--medium .dnb-dropdown__trigger {
height: var(--dropdown-height--medium);
}
.eufemia-scope--10_104_0 .dnb-dropdown--medium, .eufemia-scope--10_104_0 .dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button {
line-height: var(--dropdown-height--medium);
}
.eufemia-scope--10_104_0 .dnb-dropdown--large .dnb-dropdown__shell, .eufemia-scope--10_104_0 .dnb-dropdown--large .dnb-dropdown__trigger {
height: var(--dropdown-height--large);
}
.eufemia-scope--10_104_0 .dnb-dropdown--large, .eufemia-scope--10_104_0 .dnb-dropdown--large .dnb-dropdown__trigger.dnb-button {
line-height: var(--dropdown-height--large);
}
.eufemia-scope--10_104_0 .dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text {
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-dropdown > .dnb-form-label {
margin-right: 1rem;
line-height: var(--line-height-basis);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-dropdown {
flex-wrap: wrap;
}
.eufemia-scope--10_104_0 .dnb-dropdown > .dnb-form-label {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
}
.eufemia-scope--10_104_0 .dnb-dropdown--stretch {
display: flex;
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-dropdown--stretch .dnb-dropdown__inner {
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-dropdown--stretch .dnb-dropdown__row, .eufemia-scope--10_104_0 .dnb-dropdown--stretch .dnb-dropdown__inner, .eufemia-scope--10_104_0 .dnb-dropdown--stretch .dnb-dropdown__shell {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-dropdown--stretch .dnb-form-label + .dnb-dropdown__inner {
width: auto;
}
.eufemia-scope--10_104_0 .dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-form-row--horizontal .dnb-dropdown--stretch {
width: 100%;
}
.eufemia-scope--10_104_0 label + .dnb-dropdown[class*=__form-status] {
vertical-align: top;
}
.eufemia-scope--10_104_0 label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
top: -0.375rem;
}
.eufemia-scope--10_104_0 .dnb-dropdown__inner > .dnb-form-status {
order: 2;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-dropdown--vertical {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status] {
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-dropdown:not(.dnb-dropdown--vertical)[class*=__status] > .dnb-form-label {
margin-top: 0.25rem;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-dropdown {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-dropdown > .dnb-form-label {
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-dropdown__helper {
display: none;
}
}
.eufemia-scope--10_104_0 .dnb-drawer-list--triangle-position-left .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle {
margin-left: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--triangle-position-right .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle {
margin-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-flex-container {
--gap: 0;
--horizontal-gap: 0;
display: flex;
row-gap: var(--gap);
}
.eufemia-scope--10_104_0 .dnb-flex-container--direction-horizontal {
flex-direction: row;
margin-right: calc(var(--horizontal-gap) * -1);
}
.eufemia-scope--10_104_0 .dnb-flex-container--direction-vertical {
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-flex-container--justify-flex-start {
justify-content: flex-start;
}
.eufemia-scope--10_104_0 .dnb-flex-container--justify-flex-end {
justify-content: flex-end;
}
.eufemia-scope--10_104_0 .dnb-flex-container--justify-center {
justify-content: center;
}
.eufemia-scope--10_104_0 .dnb-flex-container--justify-space-between {
justify-content: space-between;
}
.eufemia-scope--10_104_0 .dnb-flex-container--justify-space-around {
justify-content: space-around;
}
.eufemia-scope--10_104_0 .dnb-flex-container--justify-space-evenly {
justify-content: space-evenly;
}
.eufemia-scope--10_104_0 .dnb-flex-container--align-flex-start {
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-flex-container--align-flex-end {
align-items: flex-end;
}
.eufemia-scope--10_104_0 .dnb-flex-container--align-center {
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-flex-container--align-stretch {
align-items: stretch;
}
.eufemia-scope--10_104_0 .dnb-flex-container--align-baseline {
align-items: baseline;
}
.eufemia-scope--10_104_0 .dnb-flex-container--align-self-flex-start {
align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-flex-container--align-self-flex-end {
align-self: flex-end;
}
.eufemia-scope--10_104_0 .dnb-flex-container--align-self-center {
align-self: center;
}
.eufemia-scope--10_104_0 .dnb-flex-container--align-self-baseline {
align-self: baseline;
}
.eufemia-scope--10_104_0 .dnb-flex-container--align-self-stretch {
align-self: stretch;
}
.eufemia-scope--10_104_0 .dnb-flex-container--wrap {
flex-wrap: wrap;
}
.eufemia-scope--10_104_0 .dnb-flex-container--row-gap-xx-small {
--gap: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-flex-container--row-gap-x-small {
--gap: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-flex-container--row-gap-small {
--gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-flex-container--row-gap-medium {
--gap: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-flex-container--row-gap-large {
--gap: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-flex-container--row-gap-x-large {
--gap: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-flex-container--row-gap-xx-large {
--gap: var(--spacing-xx-large);
}
.eufemia-scope--10_104_0 .dnb-flex-container--spacing-xx-small {
--horizontal-gap: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-flex-container--spacing-x-small {
--horizontal-gap: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-flex-container--spacing-small {
--horizontal-gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-flex-container--spacing-medium {
--horizontal-gap: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-flex-container--spacing-large {
--horizontal-gap: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-flex-container--spacing-x-large {
--horizontal-gap: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-flex-container--spacing-xx-large {
--horizontal-gap: var(--spacing-xx-large);
}
.eufemia-scope--10_104_0 .dnb-flex-container__hr.dnb-hr {
width: 100%;
color: var(--color-black-8);
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-flex-item--grow {
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-flex-item--shrink {
flex-shrink: 1;
}
.eufemia-scope--10_104_0 .dnb-flex-item--align-self-flex-start {
align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-flex-item--align-self-flex-end {
align-self: flex-end;
}
.eufemia-scope--10_104_0 .dnb-flex-item--align-self-center {
align-self: center;
}
.eufemia-scope--10_104_0 .dnb-flex-item--align-self-baseline {
align-self: baseline;
}
.eufemia-scope--10_104_0 .dnb-flex-item--align-self-stretch {
align-self: stretch;
}
.eufemia-scope--10_104_0 .dnb-flex-item--responsive {
--sizeCount--default: 12;
--size--default: var(--small);
}
.eufemia-scope--10_104_0 .dnb-flex-container[data-media-key=small] .dnb-flex-item--responsive {
--size: var(--small, var(--medium));
}
.eufemia-scope--10_104_0 .dnb-flex-container[data-media-key=medium] .dnb-flex-item--responsive {
--size: var(--medium, var(--large));
}
.eufemia-scope--10_104_0 .dnb-flex-container[data-media-key=large] .dnb-flex-item--responsive {
--size: var(--large, var(--medium));
}
.eufemia-scope--10_104_0 .dnb-flex-item--responsive {
--flex-basis: calc(
100% / var(--sizeCount, var(--sizeCount--default)) *
var(--size, var(--size--default))
);
flex-grow: 0;
flex-basis: var(--flex-basis);
max-width: var(--flex-basis);
}
.eufemia-scope--10_104_0 .dnb-flex-stack + .dnb-flex-stack {
margin-top: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-flex-stack > .dnb-button {
align-self: flex-start;
}
/*
* FormLabel component
*
*/
.eufemia-scope--10_104_0 .dnb-form-label {
display: inline-block;
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-form-label[for] {
width: -webkit-fit-content;
width: fit-content;
}
.eufemia-scope--10_104_0 .dnb-form-label {
text-align: left;
vertical-align: baseline;
white-space: pre-wrap;
word-break: normal;
font-size: var(--font-size-basis);
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-form-label--vertical {
display: block;
margin-right: 0;
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-form-label--interactive {
cursor: pointer;
}
.eufemia-scope--10_104_0 .dnb-form-label[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 legend.dnb-form-label {
display: inline-block;
}
/*
* FormRow component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-form-row, .eufemia-scope--10_104_0 .dnb-form-row.dnb-section {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-form-row {
align-items: baseline;
}
.eufemia-scope--10_104_0 .dnb-form-row__content {
display: inline-flex;
flex: 1;
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content {
align-items: baseline;
}
.eufemia-scope--10_104_0 .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content .dnb-form-label {
white-space: nowrap;
}
.eufemia-scope--10_104_0 .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content--wrap {
display: block;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-form-row:not(.dnb-form-row--vertical) {
flex-direction: column;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label {
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content {
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content > .dnb-form-label {
margin-top: 1rem;
}
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-form-row--centered.dnb-form-row:not(.dnb-form-row--vertical) .dnb-form-row__content {
align-items: center;
}
}
.eufemia-scope--10_104_0 .dnb-form-row--vertical > .dnb-form-row__label {
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-form-row--vertical > .dnb-form-row__content, .eufemia-scope--10_104_0 .dnb-form-row--vertical.dnb-form-row:not(.dnb-form-row--nested) {
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-form-row--vertical-label {
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-form-row > .dnb-form-status {
margin: 0.5rem 0;
}
.eufemia-scope--10_104_0 .dnb-form-row > .dnb-form-row__label--vertical {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-form-row > .dnb-form-row__label--vertical ~ .dnb-form-row__content {
grid-column: column1-start/column1-end;
}
.eufemia-scope--10_104_0 .dnb-form-row__label-dummy {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-form-row__fieldset:not([class*=space__top]), .eufemia-scope--10_104_0 .dnb-core-style .dnb-form-row__fieldset:not([class*=space__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-form-row__fieldset:not([class*=space__bottom]), .eufemia-scope--10_104_0 .dnb-core-style .dnb-form-row__fieldset:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-form-row__fieldset:not([class*=space__left]), .eufemia-scope--10_104_0 .dnb-core-style .dnb-form-row__fieldset:not([class*=space__left]) {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-form-row__fieldset:not([class*=space__right]), .eufemia-scope--10_104_0 .dnb-core-style .dnb-form-row__fieldset:not([class*=space__right]) {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-form-row__fieldset, .eufemia-scope--10_104_0 .dnb-core-style .dnb-form-row__fieldset {
padding: 0;
border: none;
width: 100%;
}
/*
* FormSet component
*
*/
/*
* FormStatus component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-form-status {
--form-status-radius: 0.25rem;
display: flex;
opacity: 1;
}
.eufemia-scope--10_104_0 .dnb-form-status__shell {
display: flex;
justify-content: flex-start;
align-items: flex-start;
min-width: inherit;
border-radius: var(--form-status-radius);
}
.eufemia-scope--10_104_0 .dnb-form-status__text {
max-width: var(--prose-max-width);
padding: 0.625rem 1rem;
cursor: text;
}
.eufemia-scope--10_104_0 button .dnb-form-status__text {
cursor: inherit;
}
.eufemia-scope--10_104_0 .dnb-form-status__text {
color: inherit;
line-height: var(--line-height-small);
font-size: var(--font-size-small);
}
.eufemia-scope--10_104_0 .dnb-form-status__text .dnb-ul,
.eufemia-scope--10_104_0 .dnb-form-status__text .dnb-anchor {
font-size: inherit;
}
.eufemia-scope--10_104_0 .dnb-form-status__text .dnb-ul:not([class*=dnb-space__left]) {
padding-left: 1rem;
}
.eufemia-scope--10_104_0 .dnb-spacing .dnb-form-status__text .dnb-ul:not([class*=dnb-space__bottom]) .dnb-li {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-spacing .dnb-form-status__text .dnb-ul:not([class*=dnb-space__bottom]) {
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-form-status__text {
white-space: normal;
}
.eufemia-scope--10_104_0 .dnb-icon + .dnb-form-status__text {
padding-left: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-form-status__shell > .dnb-icon {
display: flex;
justify-content: center;
align-items: center;
margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em;
}
.eufemia-scope--10_104_0 .dnb-form-status__size--large .dnb-form-status__text {
padding-top: 1.125rem;
padding-bottom: 1.125rem;
}
.eufemia-scope--10_104_0 .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon {
margin-top: 0.6666666em;
margin-bottom: 0.6666666em;
}
.eufemia-scope--10_104_0 .dnb-form-status--stretch {
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-form-status--stretch .dnb-form-status__shell {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-form-status[hidden] {
display: none;
}
/*
* GlobalError component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-global-error {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
}
.eufemia-scope--10_104_0 .dnb-global-error--center {
display: grid;
place-content: center;
height: 80vh;
}
.eufemia-scope--10_104_0 .dnb-global-error__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
/* for large screens */
width: 100%;
max-width: var(--layout-large);
padding: var(--spacing-large);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-global-error__inner {
padding: 0 var(--spacing-x-small);
}
}
.eufemia-scope--10_104_0 .dnb-global-error__inner {
text-align: center;
}
.eufemia-scope--10_104_0 .dnb-global-error__inner__content {
max-width: 37rem;
}
.eufemia-scope--10_104_0 .dnb-global-error__links {
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 2rem;
}
.eufemia-scope--10_104_0 .dnb-global-error__links .dnb-anchor {
font-size: var(--font-size-medium);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-global-error__links {
flex-direction: column;
gap: 1rem;
}
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-global-error h1 {
font-size: var(--font-size-large);
}
}
/*
* GlobalStatus component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-global-status.dnb-section {
display: block;
}
.eufemia-scope--10_104_0 .dnb-global-status__shell {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-global-status__shell.dnb-height-animation--hidden {
overflow-y: clip;
}
.eufemia-scope--10_104_0 .dnb-global-status__shell .dnb-hr, .eufemia-scope--10_104_0 .dnb-spacing .dnb-global-status__shell .dnb-hr:not([class*=dnb-space__bottom]) {
margin: 0 0 0 1rem;
}
.eufemia-scope--10_104_0 .dnb-global-status__shell .dnb-hr::after, .eufemia-scope--10_104_0 .dnb-spacing .dnb-global-status__shell .dnb-hr:not([class*=dnb-space__bottom])::after {
top: calc(var(--thickness) * -1);
}
.eufemia-scope--10_104_0 .dnb-global-status__title {
position: relative;
cursor: text;
min-height: 2.5rem;
display: flex;
align-items: center;
padding: 1.5rem 5rem 1.5rem 2.5rem;
font-size: var(--font-size-basis);
}
.eufemia-scope--10_104_0 .dnb-global-status__title .dnb-p, .eufemia-scope--10_104_0 .dnb-spacing .dnb-global-status__title .dnb-p, .eufemia-scope--10_104_0 .dnb-spacing .dnb-global-status__title .dnb-p:not([class*=dnb-space]) {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-global-status__message {
cursor: text;
z-index: 1;
}
.eufemia-scope--10_104_0 .dnb-global-status__message__content {
display: flex;
flex-direction: column;
padding: 0 0 0.5rem 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-global-status__message__content > .dnb-ul:first-child > li:first-child {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-global-status__message__content .dnb-p, .eufemia-scope--10_104_0 .dnb-spacing .dnb-global-status__message__content .dnb-p, .eufemia-scope--10_104_0 .dnb-spacing .dnb-global-status__message__content .dnb-p:not([class*=dnb-space]) {
display: inline-block;
margin: 0;
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-global-status__icon {
position: absolute;
top: 0;
left: 0;
margin-top: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-global-status__close-button, .eufemia-scope--10_104_0 .dnb-global-status__close-button.dnb-button--tertiary {
position: absolute;
z-index: 1;
right: 1rem;
left: auto;
}
.eufemia-scope--10_104_0 .dnb-modal__content__inner .dnb-global-status__close-button {
right: 0;
}
.eufemia-scope--10_104_0 .dnb-global-status__content {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-global-status__content .dnb-ul, .eufemia-scope--10_104_0 .dnb-spacing .dnb-global-status__content .dnb-ul, .eufemia-scope--10_104_0 .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*=dnb-space]) {
margin: 0;
padding-left: 1rem;
}
.eufemia-scope--10_104_0 .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type, .eufemia-scope--10_104_0 .dnb-spacing .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type, .eufemia-scope--10_104_0 .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*=dnb-space]) .dnb-anchor:last-of-type {
margin-left: 0.5rem;
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-grid-container {
display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
grid-auto-flow: dense;
row-gap: var(--row-gap, 0);
column-gap: var(--column-gap, 0);
}
.eufemia-scope--10_104_0 .dnb-grid-container--row-gap-x-small {
--row-gap: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-grid-container--row-gap-small {
--row-gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-grid-container--row-gap-medium {
--row-gap: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-grid-container--row-gap-large {
--row-gap: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-grid-container--column-gap-x-small {
--column-gap: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-grid-container--column-gap-small {
--column-gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-grid-container--column-gap-medium {
--column-gap: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-grid-container--column-gap-large {
--column-gap: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-grid-container {
--grid-columns: var(--small-columns, 4);
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-grid-container {
--grid-columns: var(--medium-columns, 6);
}
}
@media screen and (min-width: 60.00625em) {
.eufemia-scope--10_104_0 .dnb-grid-container {
--grid-columns: var(--large-columns, 12);
}
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-grid-container__disabled--small {
display: unset;
}
}
@media screen and (min-width: 40.00625em) and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-grid-container__disabled--medium {
display: unset;
}
}
@media screen and (min-width: 72.00625em) {
.eufemia-scope--10_104_0 .dnb-grid-container {
--grid-columns: var(--large-columns, 12);
}
.eufemia-scope--10_104_0 .dnb-grid-container__disabled--large {
display: unset;
}
}
.eufemia-scope--10_104_0 .dnb-grid-item {
grid-column: var(--start-c)/var(--end-c);
--start-c: var(--small-c-s, 1);
--end-c: var(--small-c-e, calc(var(--grid-columns) + 1));
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-grid-item {
--start-c: var(--medium-c-s, 1);
--end-c: var(--medium-c-e, calc(var(--grid-columns) + 1));
}
}
@media screen and (min-width: 60.00625em) {
.eufemia-scope--10_104_0 .dnb-grid-item {
--start-c: var(--large-c-s, 1);
--end-c: var(--large-c-e, calc(var(--grid-columns) + 1));
}
}
.eufemia-scope--10_104_0 .dnb-grid-item--full-width {
--start-c: 0;
--end-c: var(--grid-columns);
}
/*
* Heading Component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-heading__debug {
color: var(--color-black-20);
font-weight: var(--font-weight-basis);
}
.eufemia-scope--10_104_0 .dnb-heading__debug .dnb-code {
color: var(--color-black);
font-size: 12px !important;
}
.eufemia-scope--10_104_0 .dnb-heading__context {
display: block;
padding: 1rem 0 2rem;
}
/*
* HeightAnimation component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-height-animation {
--height-animation-duration: var(--duration, 400ms);
--height-animation: height var(--height-animation-duration)
var(--easing-default) var(--delay, 0ms);
will-change: height;
transition: var(--height-animation);
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-height-animation, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-height-animation * {
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-height-animation {
--height-animation-duration: 0.01ms;
transition-duration: 0.01ms !important;
}
}
.eufemia-scope--10_104_0 .dnb-height-animation--animating {
overflow-y: hidden;
}
@supports (overflow-y: clip) {
.eufemia-scope--10_104_0 .dnb-height-animation--animating {
overflow-y: clip;
}
}
.eufemia-scope--10_104_0 .dnb-height-animation--hidden {
display: none;
}
.eufemia-scope--10_104_0 .dnb-height-animation--show-overflow {
overflow: visible;
}
/*
* HelpButton component
*
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.eufemia-scope--10_104_0 .dnb-help-button.dnb-help-button__inline--open {
--border-color: var(--color-emerald-green);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline svg {
will-change: transform;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline svg:nth-of-type(2) {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
opacity: 0;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline--open svg:nth-of-type(1) {
opacity: 0;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline--open svg:nth-of-type(2) {
animation: rotate-icon-in 400ms var(--easing-default) forwards;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
opacity: 0;
animation: animate-question 400ms var(--easing-default) 200ms forwards;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
animation: rotate-icon-out 400ms var(--easing-default) forwards;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-help-button__inline svg {
animation-duration: 0ms;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-help-button__inline svg {
animation-duration: 0.01ms !important;
}
}
@keyframes rotate-icon-in {
from {
opacity: 0;
transform: rotate(0deg);
}
to {
opacity: 1;
transform: rotate(90deg);
}
}
@keyframes rotate-icon-out {
0% {
opacity: 1;
transform: rotate(90deg);
}
30% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(0deg);
}
}
@keyframes animate-question {
from {
opacity: 0;
transform: rotate(10deg);
}
to {
opacity: 1;
transform: rotate(0deg);
}
}
.eufemia-scope--10_104_0 .dnb-help-button__content .dnb-section {
--background-color: var(--help-button-content-background);
--rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-help-button__content .dnb-section .dnb-p {
max-width: var(--prose-max-width);
transition: transform 400ms var(--easing-default) 40ms;
transform: translate3d(0, -0.5rem, 0);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-help-button__content .dnb-section .dnb-p {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-help-button__content {
--help-button-indent-width: var(--card-outline-width);
}
.eufemia-scope--10_104_0 :not(.dnb-card) .dnb-help-button__content .dnb-section {
--outset-left: calc(
var(--spacing-medium) + var(--help-button-indent-width)
);
--outset-right: calc(
var(--spacing-medium) + var(--help-button-indent-width)
);
}
.eufemia-scope--10_104_0 .dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
transform: translate3d(0, 0, 0);
}
/*
* HelpButton component
*
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
/*
* HelpButton component
*
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.eufemia-scope--10_104_0 .dnb-help-button.dnb-help-button__inline--open {
--border-color: var(--color-emerald-green);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline svg {
will-change: transform;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline svg:nth-of-type(2) {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
opacity: 0;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline--open svg:nth-of-type(1) {
opacity: 0;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline--open svg:nth-of-type(2) {
animation: rotate-icon-in 400ms var(--easing-default) forwards;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
opacity: 0;
animation: animate-question 400ms var(--easing-default) 200ms forwards;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
animation: rotate-icon-out 400ms var(--easing-default) forwards;
}
.eufemia-scope--10_104_0 .dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-help-button__inline svg {
animation-duration: 0ms;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-help-button__inline svg {
animation-duration: 0.01ms !important;
}
}
@keyframes rotate-icon-in {
from {
opacity: 0;
transform: rotate(0deg);
}
to {
opacity: 1;
transform: rotate(90deg);
}
}
@keyframes rotate-icon-out {
0% {
opacity: 1;
transform: rotate(90deg);
}
30% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(0deg);
}
}
@keyframes animate-question {
from {
opacity: 0;
transform: rotate(10deg);
}
to {
opacity: 1;
transform: rotate(0deg);
}
}
.eufemia-scope--10_104_0 .dnb-help-button__content .dnb-section {
--background-color: var(--help-button-content-background);
--rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-help-button__content .dnb-section .dnb-p {
max-width: var(--prose-max-width);
transition: transform 400ms var(--easing-default) 40ms;
transform: translate3d(0, -0.5rem, 0);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-help-button__content .dnb-section .dnb-p {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-help-button__content {
--help-button-indent-width: var(--card-outline-width);
}
.eufemia-scope--10_104_0 :not(.dnb-card) .dnb-help-button__content .dnb-section {
--outset-left: calc(
var(--spacing-medium) + var(--help-button-indent-width)
);
--outset-right: calc(
var(--spacing-medium) + var(--help-button-indent-width)
);
}
.eufemia-scope--10_104_0 .dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
transform: translate3d(0, 0, 0);
}
.eufemia-scope--10_104_0 .dnb-help-button .dnb-button__bounding {
transform: scale(1.5);
}
/*
* Icon component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-icon {
display: inline-block;
vertical-align: middle;
font-size: 1rem;
line-height: 1rem;
color: inherit;
width: 1em;
height: 1em;
}
.eufemia-scope--10_104_0 .dnb-icon img, .eufemia-scope--10_104_0 :where(.dnb-core-style) .dnb-icon img, .eufemia-scope--10_104_0 .dnb-icon svg, .eufemia-scope--10_104_0 :where(.dnb-core-style) .dnb-icon svg {
width: inherit;
height: inherit;
shape-rendering: geometricprecision;
vertical-align: top;
}
.eufemia-scope--10_104_0 .dnb-icon svg[width="100%"] {
width: inherit;
}
.eufemia-scope--10_104_0 .dnb-icon svg[height="100%"] {
height: inherit;
}
.eufemia-scope--10_104_0 .dnb-icon--inherit-color svg:not([fill]), .eufemia-scope--10_104_0 .dnb-icon--inherit-color svg [fill] {
fill: currentcolor;
}
.eufemia-scope--10_104_0 .dnb-icon--inherit-color svg [stroke] {
stroke: currentcolor;
}
.eufemia-scope--10_104_0 .dnb-icon--small {
font-size: 0.75rem;
}
.eufemia-scope--10_104_0 .dnb-icon--default {
font-size: 1rem;
}
.eufemia-scope--10_104_0 .dnb-icon--medium {
font-size: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-icon--large {
font-size: 2rem;
}
.eufemia-scope--10_104_0 .dnb-icon--x-large {
font-size: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-icon--xx-large {
font-size: 3rem;
}
.eufemia-scope--10_104_0 .dnb-icon--custom-size {
width: auto;
height: auto;
line-height: 0;
}
.eufemia-scope--10_104_0 .dnb-icon--auto {
font-size: 1em;
}
.eufemia-scope--10_104_0 .dnb-icon--custom-size svg[width="24"] path, .eufemia-scope--10_104_0 .dnb-icon--auto svg[width="24"] path, .eufemia-scope--10_104_0 .dnb-icon--large svg[width="24"] path, .eufemia-scope--10_104_0 .dnb-icon--x-large svg[width="24"] path, .eufemia-scope--10_104_0 .dnb-icon--xx-large svg[width="24"] path {
vector-effect: non-scaling-stroke;
}
.eufemia-scope--10_104_0 .dnb-icon--auto > .dnb-icon--wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
}
.eufemia-scope--10_104_0 h1 > .dnb-icon, .eufemia-scope--10_104_0 h2 > .dnb-icon, .eufemia-scope--10_104_0 h3 > .dnb-icon, .eufemia-scope--10_104_0 h4 > .dnb-icon, .eufemia-scope--10_104_0 h5 > .dnb-icon, .eufemia-scope--10_104_0 h6 > .dnb-icon {
vertical-align: middle;
}
.eufemia-scope--10_104_0 p > .dnb-icon {
vertical-align: inherit;
}
.eufemia-scope--10_104_0 .dnb-icon.dnb-skeleton::before, .eufemia-scope--10_104_0 .dnb-icon.dnb-skeleton::after {
content: none !important;
}
.eufemia-scope--10_104_0 .dnb-icon.dnb-skeleton {
color: var(--skeleton-color) !important;
}
/*
* InfoCard component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-info-card {
display: flex;
flex-direction: row;
position: relative;
padding: 1rem;
overflow: hidden;
background: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-info-card::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
border: 1px solid var(--color-black-8);
}
.eufemia-scope--10_104_0 .dnb-info-card, .eufemia-scope--10_104_0 .dnb-info-card::after {
border-radius: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-info-card--centered {
flex-direction: column;
align-items: center;
text-align: center;
}
.eufemia-scope--10_104_0 .dnb-info-card--centered:not(.dnb-info-card--stretch) {
margin: auto;
}
.eufemia-scope--10_104_0 .dnb-info-card--shadow {
box-shadow: var(--shadow-default);
}
.eufemia-scope--10_104_0 .dnb-info-card__content {
flex-direction: column;
margin-top: 0.1875rem;
}
.eufemia-scope--10_104_0 .dnb-info-card:not(.dnb-info-card--stretch), .eufemia-scope--10_104_0 .dnb-info-card__content {
max-width: var(--prose-max-width);
}
.eufemia-scope--10_104_0 .dnb-info-card--centered .dnb-info-card__content {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-info-card__icon {
color: var(--color-emerald-green);
}
.eufemia-scope--10_104_0 .dnb-info-card__image {
height: 4rem;
width: 4rem;
}
.eufemia-scope--10_104_0 .dnb-info-card__buttons {
display: flex;
flex-flow: row wrap;
}
.eufemia-scope--10_104_0 .dnb-info-card--centered .dnb-info-card__buttons {
flex-direction: column;
align-items: center;
text-align: center;
}
/*
* InputMasked component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-input-masked--guide {
font-family: var(--font-family-monospace);
}
.eufemia-scope--10_104_0 .dnb-input-masked input::placeholder {
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-input-masked--hide-controls[type=number]::-webkit-outer-spin-button, .eufemia-scope--10_104_0 .dnb-input-masked--hide-controls[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-input-masked--hide-controls[type=number] {
-webkit-appearance: textfield;
appearance: textfield;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask__fieldset:not([class*=space__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask__fieldset:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask__fieldset:not([class*=space__left]) {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask__fieldset:not([class*=space__right]) {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask__fieldset {
padding: 0;
border: none;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask__fieldset--horizontal {
display: inline-flex;
flex-flow: row wrap;
align-items: baseline;
gap: 1rem;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask__input.dnb-input__input {
display: inline-block;
width: auto;
margin: 0;
padding: 0 0.125rem;
transform: translateY(0);
outline: none;
font-family: var(--font-family-monospace);
text-align: center;
border: none;
background: transparent;
overflow: visible;
white-space: nowrap;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask__input.dnb-input__input:first-of-type {
padding-left: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask__input.dnb-input__input:last-of-type {
padding-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-input--medium .dnb-multi-input-mask__input.dnb-input__input, .eufemia-scope--10_104_0 .dnb-input--large .dnb-multi-input-mask__input.dnb-input__input {
padding: 0 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask {
width: -webkit-fit-content;
width: fit-content;
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input,
.eufemia-scope--10_104_0 .dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter {
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight,
.eufemia-scope--10_104_0 .dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight {
color: var(--color-black);
}
/*
* Input component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-input {
--input-font-size: var(--font-size-basis);
--input-font-size--small: var(--font-size-basis);
--input-font-size--medium: var(--font-size-basis);
--input-font-size--large: var(--font-size-medium);
--input-padding: 1rem;
--input-padding--small: 1rem;
--input-padding--medium: 1rem;
--input-padding--large: 1rem;
--input-height: 2rem;
--input-height--small: 1.5rem;
--input-height--medium: 2.5rem;
--input-height--large: 3rem;
--input-background-color: var(--color-white);
display: inline-flex;
align-items: center;
font-size: var(--input-font-small);
line-height: var(--input-height);
text-align: left;
}
.eufemia-scope--10_104_0 .dnb-input__inner {
display: inline-flex;
flex-direction: column;
width: auto;
}
.eufemia-scope--10_104_0 .dnb-input__shell {
position: relative;
display: flex;
align-items: center;
border: var(--input-border-width) solid var(--color-sea-green);
}
.eufemia-scope--10_104_0 .dnb-input__row {
display: inline-flex;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-input__input {
border: none;
outline: none;
word-break: normal;
position: relative;
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-input__input[disabled] {
-webkit-user-select: none;
user-select: none;
opacity: 1;
}
.eufemia-scope--10_104_0 .dnb-input__shell, .eufemia-scope--10_104_0 .dnb-input__input {
height: var(--input-height);
border-radius: var(--input-border-radius);
}
.eufemia-scope--10_104_0 .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input__input {
width: 100%;
padding-left: var(--input-padding);
padding-right: var(--input-padding);
}
.eufemia-scope--10_104_0 .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input__input, .eufemia-scope--10_104_0 .dnb-input input.dnb-input__input {
padding-top: 0;
padding-bottom: 0;
color: inherit;
background-color: transparent;
font-size: var(--input-font-size);
line-height: inherit;
}
.eufemia-scope--10_104_0 .dnb-input__placeholder {
pointer-events: none;
position: absolute;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.eufemia-scope--10_104_0 .dnb-input__border {
display: flex;
border-radius: var(--b-radius, var(--input-border-radius));
--border-color: var(--b-color, var(--input-border-color));
--border-width: var(--b-width, var(--input-border-width));
box-shadow: var(--b-inset, var(--input-border-inset, inset)) 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-input--disabled .dnb-input__border {
--border-color: var(--input-border-color--disabled);
--border-width: var(--input-border-width--disabled);
box-shadow: var(--input-border-inset--disabled, inset) 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-input__border:focus-within {
--b-color: var(--input-border-color--active);
--b-width: var(--input-border-width--active);
--b-inset: var(--input-border-inset--active);
--b-radius: var(--input-border-radius--active);
}
.eufemia-scope--10_104_0 .dnb-input__border:hover, .eufemia-scope--10_104_0 .dnb-input__border.hover {
--b-color: var(--input-border-color--hover);
--b-width: var(--input-border-width--hover);
--b-inset: var(--input-border-inset--hover);
}
.eufemia-scope--10_104_0 .dnb-input__border:has(.dnb-input__input:-webkit-autofill) {
--b-color: var(--input-border-color);
--b-inset: var(--input-border-inset--active);
}
.eufemia-scope--10_104_0 .dnb-input__border:has(.dnb-input__input:autofill) {
--b-color: var(--input-border-color);
--b-inset: var(--input-border-inset--active);
}
.eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__border:has(.dnb-input__input:-webkit-autofill) {
--b-color: var(--input-border-color__error);
}
.eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__border:has(.dnb-input__input:autofill) {
--b-color: var(--input-border-color__error);
}
.eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__border {
--b-color: var(--input-border-color__error);
--b-width: var(--input-border-width__error);
}
.eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__border:focus-within {
--b-color: var(--input-border-color__error);
--b-width: var(--input-border-width__error--active);
--b-inset: var(--input-border-inset--active);
--b-radius: var(--input-border-radius--active);
}
.eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__border:hover:has(.dnb-input__input:-webkit-autofill) {
--b-color: var(--input-border-color__error);
--b-width: var(--input-border-width__error--hover);
--b-inset: var(--input-border-inset--hover);
}
.eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__border:hover, .eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__border:hover:has(.dnb-input__input:autofill), .eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__border.hover {
--b-color: var(--input-border-color__error);
--b-width: var(--input-border-width__error--hover);
--b-inset: var(--input-border-inset--hover);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-input__border:focus-within {
--b-color: var(--input-border-color--focus);
--b-width: var(--input-border-width--focus);
--b-inset: var(--input-border-inset--focus);
--b-radius: var(--input-border-radius--focus);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-input__status--error .dnb-input__border:focus-within {
--b-color: var(--input-border-color__error--focus);
--b-width: var(--input-border-width--focus);
--b-inset: var(--input-border-inset--focus);
--b-radius: var(--input-border-radius--focus);
}
.eufemia-scope--10_104_0 .dnb-input input.dnb-input__input[type=file] {
line-height: calc(var(--input-height) - 2px);
}
.eufemia-scope--10_104_0 .dnb-input__input::-webkit-search-cancel-button {
display: none;
}
.eufemia-scope--10_104_0 .dnb-input__input::-ms-clear {
display: none;
}
.eufemia-scope--10_104_0 .dnb-input ::-webkit-file-upload-button {
cursor: pointer;
outline: none;
color: var(--color-sea-green);
}
.eufemia-scope--10_104_0 .dnb-input ::-webkit-file-upload-button:active, .eufemia-scope--10_104_0 .dnb-input ::-webkit-file-upload-button:hover {
color: var(--color-emerald-green);
}
.eufemia-scope--10_104_0 .dnb-input--has-submit-element .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input--has-submit-element .dnb-input__input, .eufemia-scope--10_104_0 .dnb-input--has-clear-button .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input--has-clear-button .dnb-input__input {
padding-right: calc(var(--input-padding) * 2.5);
}
.eufemia-scope--10_104_0 .dnb-input--password .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input--password .dnb-input__input {
margin-right: 2.5rem;
padding-right: 0;
}
.eufemia-scope--10_104_0 .dnb-input--password .dnb-input__placeholder::-ms-clear, .eufemia-scope--10_104_0 .dnb-input--password .dnb-input__input::-ms-clear {
display: none;
}
.eufemia-scope--10_104_0 .dnb-input--password .dnb-input__placeholder::-ms-reveal, .eufemia-scope--10_104_0 .dnb-input--password .dnb-input__input::-ms-reveal {
display: none;
}
.eufemia-scope--10_104_0 .dnb-input--password .dnb-input__placeholder {
padding-right: 4rem;
}
.eufemia-scope--10_104_0 .dnb-input--password .dnb-input__input {
font-family: var(--font-family-monospace);
}
.eufemia-scope--10_104_0 .dnb-input__suffix {
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-input__submit-element {
z-index: 3;
margin-left: calc(var(--input-height) * -1);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-input__submit-element .dnb-button--input-button {
width: var(--input-height);
height: var(--input-height);
line-height: var(--input-height);
}
.eufemia-scope--10_104_0 .dnb-input__submit-button {
position: relative;
align-self: center; /* IE needs this to stay centered */
}
.eufemia-scope--10_104_0 .dnb-input__submit-button__button {
border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
}
.eufemia-scope--10_104_0 .dnb-input > .dnb-form-label {
line-height: var(--line-height-basis);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-input {
flex-wrap: wrap;
}
.eufemia-scope--10_104_0 .dnb-input > .dnb-form-label {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
}
.eufemia-scope--10_104_0 .dnb-input:not(.dnb-input--vertical)[class*=__status] {
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-input:not(.dnb-input--vertical)[class*=__status] > .dnb-form-label {
margin-top: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-input--small {
line-height: var(--input-height--small);
}
.eufemia-scope--10_104_0 .dnb-input--small .dnb-input__shell,
.eufemia-scope--10_104_0 .dnb-input--small .dnb-input__input {
height: var(--input-height--small);
}
.eufemia-scope--10_104_0 .dnb-input--small .dnb-input__placeholder,
.eufemia-scope--10_104_0 .dnb-input--small .dnb-input__input {
padding-left: var(--input-padding--small);
padding-right: var(--input-padding--small);
font-size: var(--input-font-size--small);
}
.eufemia-scope--10_104_0 .dnb-input--small .dnb-input__submit-element {
margin-left: calc(var(--input-height--small) * -1);
}
.eufemia-scope--10_104_0 .dnb-input--small .dnb-input__submit-element .dnb-button--input-button {
width: var(--input-height--small);
height: var(--input-height--small);
line-height: var(--input-height--small);
}
.eufemia-scope--10_104_0 .dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input--small.dnb-input--has-submit-element .dnb-input__input, .eufemia-scope--10_104_0 .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input--small.dnb-input--has-clear-button .dnb-input__input {
padding-right: calc(var(--input-padding--small) * 2);
}
.eufemia-scope--10_104_0 .dnb-input--medium {
line-height: var(--input-height--medium);
}
.eufemia-scope--10_104_0 .dnb-input--medium .dnb-input__shell,
.eufemia-scope--10_104_0 .dnb-input--medium .dnb-input__input {
height: var(--input-height--medium);
}
.eufemia-scope--10_104_0 .dnb-input--medium .dnb-input__placeholder,
.eufemia-scope--10_104_0 .dnb-input--medium .dnb-input__input {
padding-left: var(--input-padding--medium);
padding-right: var(--input-padding--medium);
font-size: var(--input-font-size--medium);
}
.eufemia-scope--10_104_0 .dnb-input--medium .dnb-input__submit-element {
margin-left: calc(var(--input-height--medium) * -1);
}
.eufemia-scope--10_104_0 .dnb-input--medium .dnb-input__submit-element .dnb-button--input-button {
width: var(--input-height--medium);
height: var(--input-height--medium);
line-height: var(--input-height--medium);
}
.eufemia-scope--10_104_0 .dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input, .eufemia-scope--10_104_0 .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input {
padding-right: calc(var(--input-padding--medium) * 3);
}
.eufemia-scope--10_104_0 .dnb-input--large {
line-height: var(--input-height--large);
}
.eufemia-scope--10_104_0 .dnb-input--large .dnb-input__shell,
.eufemia-scope--10_104_0 .dnb-input--large .dnb-input__input {
height: var(--input-height--large);
}
.eufemia-scope--10_104_0 .dnb-input--large .dnb-input__placeholder,
.eufemia-scope--10_104_0 .dnb-input--large .dnb-input__input {
padding-left: var(--input-padding--large);
padding-right: var(--input-padding--large);
font-size: var(--input-font-size--large);
}
.eufemia-scope--10_104_0 .dnb-input--large .dnb-input__submit-element {
margin-left: calc(var(--input-height--large) * -1);
}
.eufemia-scope--10_104_0 .dnb-input--large .dnb-input__submit-element .dnb-button--input-button {
width: var(--input-height--large);
height: var(--input-height--large);
line-height: var(--input-height--large);
}
.eufemia-scope--10_104_0 .dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input--large.dnb-input--has-submit-element .dnb-input__input, .eufemia-scope--10_104_0 .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input--large.dnb-input--has-clear-button .dnb-input__input {
padding-right: calc(var(--input-padding--large) * 3.5);
}
.eufemia-scope--10_104_0 .dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element {
margin-left: calc(var(--input-height--large) - 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-input__align--center .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input__align--center .dnb-input__input {
text-align: center;
}
.eufemia-scope--10_104_0 .dnb-input__align--right .dnb-input__placeholder, .eufemia-scope--10_104_0 .dnb-input__align--right .dnb-input__input {
text-align: right;
}
.eufemia-scope--10_104_0 .dnb-input--clear.dnb-input__submit-element {
opacity: 0;
transition: opacity 200ms ease-in-out;
}
.eufemia-scope--10_104_0 .dnb-input--clear.dnb-input__submit-element .dnb-button {
width: var(--input-height--small);
height: var(--input-height--small);
border-radius: var(--button-border-radius);
}
.eufemia-scope--10_104_0 .dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon {
margin: auto;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] {
cursor: default;
}
.eufemia-scope--10_104_0 .dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button {
width: 1rem;
height: 1rem;
}
.eufemia-scope--10_104_0 .dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button, .eufemia-scope--10_104_0 .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button {
width: var(--input-height--small);
height: var(--input-height--small);
}
.eufemia-scope--10_104_0 .dnb-input[data-has-content=true] .dnb-input--clear {
opacity: 1;
}
.eufemia-scope--10_104_0 .dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
margin-right: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
margin-right: 2rem;
}
.eufemia-scope--10_104_0 .dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
margin-right: 3rem;
}
.eufemia-scope--10_104_0 .dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
margin-right: 3.5rem;
}
.eufemia-scope--10_104_0 .dnb-input__inner > .dnb-form-status {
order: 2;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-input--vertical {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-input--stretch {
display: flex;
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-input--stretch .dnb-input__inner {
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-input--stretch .dnb-input__inner, .eufemia-scope--10_104_0 .dnb-input--stretch .dnb-input__shell {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-input--stretch .dnb-form-label + .dnb-input__inner {
width: auto;
}
.eufemia-scope--10_104_0 .dnb-input--vertical.dnb-input--stretch .dnb-input__inner {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-form-row--horizontal .dnb-input--stretch {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-input__icon {
order: 0;
position: absolute;
z-index: 2;
left: 1rem;
right: auto;
top: 0;
bottom: 0;
margin: auto;
}
.eufemia-scope--10_104_0 .dnb-input--icon-position-right .dnb-input__icon {
order: 1;
left: auto;
right: 1rem;
}
.eufemia-scope--10_104_0 .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .eufemia-scope--10_104_0 .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder {
padding-left: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .eufemia-scope--10_104_0 .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
padding-right: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input, .eufemia-scope--10_104_0 .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder {
padding-left: 3rem;
}
.eufemia-scope--10_104_0 .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input, .eufemia-scope--10_104_0 .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
padding-right: 3rem;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-input__input {
caret-color: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-input[data-input-state=focus] .dnb-input__placeholder {
display: none;
}
.eufemia-scope--10_104_0 .dnb-input--keep-placeholder[data-input-state=focus] .dnb-input__placeholder {
display: block;
color: var(--color-black-20);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-input {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-input__row {
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-input > .dnb-form-label {
margin-bottom: 0.5rem;
}
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-list--variant-basic {
--item-padding: 1rem;
--item-height: 4rem;
--item-rounded-corner: 1.5rem;
--item-row-gap: 0.5rem;
--item-chevron-margin: 1rem;
--item-chevron-height: 1.5rem;
--item-outline-width: 0.0625rem;
--item-outline-color: var(--color-black-8);
--item-navigation-color: var(--color-sea-green);
--item-navigation-color--active: var(--color-emerald-green);
--item-icon-color: var(--item-navigation-color);
--item-pending-color: var(--color-black-3);
--item-background-color: var(--color-white);
--item-selected-background-color: var(
--internal-color-background-selected-subtle,
var(--item-background-color)
);
border-radius: var(--item-rounded-corner);
}
.eufemia-scope--10_104_0 .dnb-list__item {
position: relative;
z-index: 1;
row-gap: 0;
}
.eufemia-scope--10_104_0 .dnb-list__item::after {
content: "";
position: absolute;
top: calc(var(--item-outline-width) * -1);
right: calc(var(--item-outline-width) * -1);
bottom: calc(var(--item-outline-width) * -1);
left: calc(var(--item-outline-width) * -1);
left: 0;
right: 0;
z-index: 10;
border-radius: inherit;
pointer-events: none;
border: var(--item-outline-width) solid var(--item-outline-color);
}
.eufemia-scope--10_104_0 .dnb-list__item {
--item-grid-template-columns: auto auto auto minmax(0, 1fr)
minmax(0, 1fr) auto auto;
--item-grid-template-areas: 'chevron-left start icon title center end chevron-right'
'footer footer footer footer footer footer footer';
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-list__item {
--item-grid-template-areas: 'chevron-left start icon title center chevron-right'
'chevron-left end end end end chevron-right'
'footer footer footer footer footer footer';
}
.eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__start):has(.dnb-list__item__title), .eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__icon) {
--item-grid-template-areas: 'chevron-left start icon title center chevron-right'
'chevron-left . . end end .'
'footer footer footer footer footer footer';
}
}
@media screen and (max-width: 25em) {
.eufemia-scope--10_104_0 .dnb-list__item {
--item-grid-template-areas: 'chevron-left start icon title title chevron-right'
'chevron-left center center center center chevron-right'
'chevron-left end end end end chevron-right'
'footer footer footer footer footer footer';
}
.eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__start):has(.dnb-list__item__title), .eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__icon) {
--item-grid-template-areas: 'chevron-left start icon title title chevron-right'
'chevron-left . . center center .' 'chevron-left . . end end .'
'footer footer footer footer footer footer';
}
}
.eufemia-scope--10_104_0 .dnb-list__item:not(:has(.dnb-list__item__center)) {
--item-grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
}
.eufemia-scope--10_104_0 .dnb-list__item, .eufemia-scope--10_104_0 .dnb-list__item__accordion__header {
display: grid;
grid-template: var(--item-grid-template-areas)/var(--item-grid-template-columns);
place-content: center;
align-items: center;
min-height: var(--item-height);
padding: calc(var(--item-padding)) 0;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__overline) .dnb-list__item__center, .eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__overline) .dnb-list__item__end {
place-self: end;
}
}
.eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__overline) .dnb-list__item__icon, .eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__overline) .dnb-list__item__chevron {
place-self: end;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__subline) .dnb-list__item__center, .eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__subline) .dnb-list__item__end {
place-self: start;
}
}
.eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__subline) .dnb-list__item__title, .eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__subline) .dnb-list__item__icon, .eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__subline) .dnb-list__item__chevron {
place-self: start;
}
.eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__footer), .eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-list__item__footer) .dnb-list__item__accordion__header {
padding-bottom: 0;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-list__item:not(.dnb-list__item__accordion):has(.dnb-list__item__center), .eufemia-scope--10_104_0 .dnb-list__item:not(.dnb-list__item__accordion):has(.dnb-list__item__end), .eufemia-scope--10_104_0 .dnb-list__item__accordion__header:has(.dnb-list__item__center), .eufemia-scope--10_104_0 .dnb-list__item__accordion__header:has(.dnb-list__item__end) {
row-gap: var(--item-row-gap);
}
}
.eufemia-scope--10_104_0 .dnb-list__item {
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-list__item:first-of-type {
border-top-left-radius: var(--item-rounded-corner);
border-top-right-radius: var(--item-rounded-corner);
}
.eufemia-scope--10_104_0 .dnb-list__item:last-of-type {
border-bottom-left-radius: var(--item-rounded-corner);
border-bottom-right-radius: var(--item-rounded-corner);
}
.eufemia-scope--10_104_0 .dnb-list--separated .dnb-list__item {
border-radius: var(--item-rounded-corner);
}
.eufemia-scope--10_104_0 .dnb-list__item {
background-color: var(--item-background-color);
}
.eufemia-scope--10_104_0 .dnb-list__item--selected {
background-color: var(--item-selected-background-color);
}
.eufemia-scope--10_104_0 .dnb-list__item__title, .eufemia-scope--10_104_0 .dnb-list__item__icon, .eufemia-scope--10_104_0 .dnb-list__item__start, .eufemia-scope--10_104_0 .dnb-list__item__center, .eufemia-scope--10_104_0 .dnb-list__item__end, .eufemia-scope--10_104_0 .dnb-list__item__overline, .eufemia-scope--10_104_0 .dnb-list__item__subline, .eufemia-scope--10_104_0 .dnb-list__item__footer-separator, .eufemia-scope--10_104_0 .dnb-list__item__footer {
display: flex;
align-items: center;
z-index: 10;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-list__item__end .dnb-list__item__subline {
place-self: end;
}
}
.eufemia-scope--10_104_0 .dnb-list__item__title {
grid-area: title;
flex-direction: column;
align-items: flex-start;
gap: 0.125rem;
}
.eufemia-scope--10_104_0 .dnb-list__item__icon {
grid-area: icon;
}
.eufemia-scope--10_104_0 .dnb-list__item__start {
grid-area: start;
}
.eufemia-scope--10_104_0 .dnb-list__item__center {
grid-area: center;
}
.eufemia-scope--10_104_0 .dnb-list__item__end {
flex-direction: column;
grid-area: end;
justify-self: start;
align-items: flex-end;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-list__item__end {
align-items: flex-start;
}
}
.eufemia-scope--10_104_0 .dnb-list__item__footer-separator {
grid-area: footer;
margin-top: var(--item-padding);
place-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-list__item__footer-separator.dnb-space__top--zero {
margin-top: var(--item-padding);
}
.eufemia-scope--10_104_0 .dnb-list__item__footer {
grid-area: footer;
margin-top: var(--item-padding);
padding: var(--item-padding);
}
.eufemia-scope--10_104_0 .dnb-list__item:last-of-type:not(.dnb-list__item__accordion--open) .dnb-list__item__footer {
border-bottom-left-radius: var(--item-rounded-corner);
border-bottom-right-radius: var(--item-rounded-corner);
}
.eufemia-scope--10_104_0 .dnb-list__item__subline--description {
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-list__item__action--href a .dnb-anchor__launch-icon, .eufemia-scope--10_104_0 .dnb-list__item__chevron {
display: flex;
align-items: center;
grid-area: chevron-right;
height: var(--item-chevron-height);
margin-right: var(--item-chevron-margin);
}
.eufemia-scope--10_104_0 .dnb-list__item--chevron-left .dnb-list__item__action--href a .dnb-anchor__launch-icon, .eufemia-scope--10_104_0 .dnb-list__item--chevron-left .dnb-list__item__chevron {
grid-area: chevron-left;
margin-right: 0;
margin-left: var(--item-chevron-margin);
}
.eufemia-scope--10_104_0 .dnb-list__item .dnb-checkbox .dnb-form-label,
.eufemia-scope--10_104_0 .dnb-list__item .dnb-radio .dnb-radio__order .dnb-form-label {
padding-left: var(--item-padding);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-form-label) .dnb-list__item__end {
display: flex;
margin-left: calc(var(--item-padding) * 2 + 0.5rem);
}
}
.eufemia-scope--10_104_0 .dnb-list__item--selection:has(.dnb-checkbox__input), .eufemia-scope--10_104_0 .dnb-list__item--selection:has(.dnb-radio__input) {
overflow: clip;
overflow-clip-margin: var(--item-outline-width);
}
.eufemia-scope--10_104_0 .dnb-list__item--selection .dnb-checkbox__input {
--checkbox-bounding--medium: 100;
}
.eufemia-scope--10_104_0 .dnb-list__item--selection .dnb-radio__input {
--radio-bounding--medium: 100;
}
.eufemia-scope--10_104_0 .dnb-list__item:has(.dnb-anchor__launch-icon) .dnb-list__item__chevron {
display: none;
}
.eufemia-scope--10_104_0 .dnb-list__item__chevron:where(.dnb-list__item__accordion .dnb-list__item__chevron) .dnb-icon {
transition: transform 400ms var(--easing-default);
transform: rotate(90deg);
}
.eufemia-scope--10_104_0 .dnb-list__item__chevron:where(.dnb-list__item__accordion--open .dnb-list__item__chevron) .dnb-icon {
transform: rotate(270deg);
}
.eufemia-scope--10_104_0 .dnb-list__item__action {
cursor: pointer;
outline: none;
}
.eufemia-scope--10_104_0 .dnb-list__item__action .dnb-icon {
color: var(--item-icon-color);
}
.eufemia-scope--10_104_0 .dnb-list__item__action--href a {
display: grid;
grid-template: var(--item-grid-template-areas)/var(--item-grid-template-columns);
grid-column: 1/-1;
grid-row: 1/-1;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-list__item__action:not(.dnb-list__item--disabled):hover, .eufemia-scope--10_104_0 .dnb-list__item__action:not(.dnb-list__item--disabled):focus-visible {
--item-outline-color: var(--item-navigation-color);
--item-outline-width: 0.125rem;
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-list__item__action:not(.dnb-list__item--disabled):active {
--item-outline-color: var(--item-navigation-color--active);
--item-icon-color: var(--item-navigation-color--active);
--item-outline-width: 0.0625rem;
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-list__item:not(.dnb-list__item--disabled):has(.dnb-list__item__accordion__header:hover), .eufemia-scope--10_104_0 .dnb-list__item:not(.dnb-list__item--disabled):has(.dnb-list__item__accordion__header:focus-visible) {
--item-outline-color: var(--item-navigation-color);
--item-outline-width: 0.125rem;
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-list__item:not(.dnb-list__item--disabled):has(.dnb-list__item__accordion__header:active) {
--item-outline-color: var(--item-navigation-color--active);
--item-icon-color: var(--item-navigation-color--active);
--item-outline-width: 0.0625rem;
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-list__item__accordion {
display: flex;
align-items: stretch;
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-list__item__accordion .dnb-hr::after {
left: var(--item-outline-width);
right: var(--item-outline-width);
}
.eufemia-scope--10_104_0 .dnb-list__item__accordion__header {
position: relative;
cursor: pointer;
outline: none;
}
.eufemia-scope--10_104_0 .dnb-list__item__accordion__header .dnb-icon {
color: var(--item-icon-color);
}
.eufemia-scope--10_104_0 .dnb-list__item__accordion__content {
display: flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-list__item.dnb-skeleton .dnb-icon {
color: var(--skeleton-color);
}
.eufemia-scope--10_104_0 .dnb-list__item--pending {
pointer-events: none;
overflow: clip;
}
.eufemia-scope--10_104_0 .dnb-list__item--disabled {
cursor: not-allowed;
color: var(--color-black-20);
--item-navigation-color: var(--color-sea-green-30);
--item-navigation-color--active: var(--color-sea-green-30);
--item-icon-color: var(--color-sea-green-30);
--item-outline-color: var(--color-black-8);
}
.eufemia-scope--10_104_0 .dnb-list__item--disabled .dnb-list__item__accordion__header {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-list__item--disabled a {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-list__item__action--href a:visited {
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-list__item__pending {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-image: repeating-linear-gradient(-45deg, var(--item-pending-color) 1px 2px, transparent 0 6px);
}
.eufemia-scope--10_104_0 .dnb-list__container {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.eufemia-scope--10_104_0 .dnb-list--inset-outline .dnb-list__container .dnb-list__item::after {
top: 0;
right: 0;
bottom: 0;
left: 0;
bottom: calc(var(--item-outline-width) * -1);
}
.eufemia-scope--10_104_0 .dnb-list--inset-outline .dnb-list__container .dnb-list__item:last-of-type::after {
bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-card .dnb-list__container .dnb-list__item:first-of-type, .eufemia-scope--10_104_0 .dnb-card .dnb-list__container .dnb-list__item:last-of-type {
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-card .dnb-list__container .dnb-list__item:not(:hover):not(:focus-visible)::after, .eufemia-scope--10_104_0 .dnb-card .dnb-list__container .dnb-list__item:not(.dnb-list__item__action):not(.dnb-list__item__accordion)::after {
border-right: none;
border-left: none;
}
.eufemia-scope--10_104_0 .dnb-card .dnb-list__container .dnb-list__item:not(:hover):not(:focus-visible):first-of-type::after, .eufemia-scope--10_104_0 .dnb-card .dnb-list__container .dnb-list__item:not(.dnb-list__item__action):not(.dnb-list__item__accordion):first-of-type::after {
border-top: none;
}
.eufemia-scope--10_104_0 .dnb-card .dnb-list__container .dnb-list__item:not(:hover):not(:focus-visible):last-of-type::after, .eufemia-scope--10_104_0 .dnb-card .dnb-list__container .dnb-list__item:not(.dnb-list__item__action):not(.dnb-list__item__accordion):last-of-type::after {
border-bottom: none;
}
.eufemia-scope--10_104_0 .dnb-scroll-view .dnb-list__container {
padding-right: calc(var(--scrollbar-track-width) * 2);
}
.eufemia-scope--10_104_0 .dnb-card:has(.dnb-scroll-view .dnb-list__container) {
padding-right: calc(var(--padding-right) - var(--scrollbar-track-width) * 2);
}
/*
* Logo Component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-logo,
.eufemia-scope--10_104_0 .sbanken-logo {
display: inline-flex;
vertical-align: baseline;
font-size: inherit;
line-height: var(--line-height-xx-small--em);
}
.eufemia-scope--10_104_0 .dnb-logo svg,
.eufemia-scope--10_104_0 .sbanken-logo svg {
fill: currentcolor;
shape-rendering: geometricprecision;
}
.eufemia-scope--10_104_0 .dnb-logo,
.eufemia-scope--10_104_0 .sbanken-logo {
height: 1em;
}
.eufemia-scope--10_104_0 .dnb-logo--has-size,
.eufemia-scope--10_104_0 .sbanken-logo--has-size {
width: auto;
height: auto;
}
.eufemia-scope--10_104_0 .dnb-logo--inherit-size,
.eufemia-scope--10_104_0 .sbanken-logo--inherit-size {
height: inherit;
}
.eufemia-scope--10_104_0 .dnb-logo svg:not([width], [height]), .eufemia-scope--10_104_0 .sbanken-logo svg:not([width], [height]) {
width: inherit;
height: inherit;
}
/*
* Modal component
*
*/
/*
* Utilities
*/
/*
* Modal component
*
*/
@keyframes show-modal {
from {
opacity: 0.1;
transform: translate3d(0, -1rem, 0);
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes hide-modal {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 1rem, 0);
opacity: 0;
}
}
@keyframes show-drawer {
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes hide-drawer-left {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(-20rem, 0, 0);
opacity: 0;
}
}
@keyframes hide-drawer-top {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, -20rem, 0);
opacity: 0;
}
}
@keyframes hide-drawer-bottom {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 20rem, 0);
opacity: 0;
}
}
@keyframes hide-drawer-right {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(20rem, 0, 0);
opacity: 0;
}
}
@keyframes show-modal-overlay {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes hide-modal-overlay {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.eufemia-scope--10_104_0 {
--modal-z-index: 3000;
--modal-animation-duration: 300ms;
}
html[data-dnb-modal-active] .eufemia-scope--10_104_0 {
-webkit-user-select: none;
user-select: none;
}
html[data-dnb-modal-active] .eufemia-scope--10_104_0 .eufemia-portal-root {
-webkit-user-select: text;
user-select: text;
}
.eufemia-scope--10_104_0 .dnb-modal__content {
position: fixed;
top: 0;
left: 0;
z-index: calc(var(--modal-z-index) + 1);
display: flex;
align-items: center;
justify-content: center;
max-width: 100vw;
width: 100%;
height: 100%;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-modal__content--auto-fullscreen {
height: auto;
}
}
.eufemia-scope--10_104_0 .dnb-modal__content--fullscreen {
align-items: flex-start;
justify-content: flex-start;
}
.eufemia-scope--10_104_0 .dnb-modal__content--fullscreen .dnb-modal__content__content {
height: auto;
}
.eufemia-scope--10_104_0 .dnb-modal__content--left, .eufemia-scope--10_104_0 .dnb-modal__content--top {
align-items: flex-start;
justify-content: flex-start;
}
.eufemia-scope--10_104_0 .dnb-modal__content--right {
align-items: flex-start;
justify-content: flex-end;
}
.eufemia-scope--10_104_0 .dnb-modal__content--bottom {
align-items: flex-end;
justify-content: flex-start;
}
.eufemia-scope--10_104_0 .dnb-modal__vertical-alignment--top {
padding-top: 5vh;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-modal__overlay {
position: fixed;
z-index: var(--modal-z-index);
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.eufemia-scope--10_104_0 .dnb-modal-root__inner .dnb-modal__overlay {
animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards;
}
.eufemia-scope--10_104_0 .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
animation: show-modal-overlay var(--modal-animation-duration) ease-out;
}
.eufemia-scope--10_104_0 .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards;
}
.eufemia-scope--10_104_0 .dnb-modal {
/* stylelint-disable-next-line */
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-modal__overlay, .eufemia-scope--10_104_0 .dnb-modal__overlay--no-animation {
animation-delay: 0ms !important;
animation-duration: 0ms !important;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-modal__overlay {
animation-duration: 0.01ms !important;
}
}
.eufemia-scope--10_104_0 .dnb-modal-root__inner {
position: relative;
z-index: calc(var(--modal-z-index) + 1);
}
.eufemia-scope--10_104_0 .dnb-modal-root__inner ~ .dnb-modal-root__inner {
z-index: calc(var(--modal-z-index) + 2);
}
.eufemia-scope--10_104_0 .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner {
z-index: calc(var(--modal-z-index) + 3);
}
.eufemia-scope--10_104_0 .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner ~ .dnb-modal-root__inner {
z-index: calc(var(--modal-z-index) + 4);
}
.eufemia-scope--10_104_0 .dnb-modal__close-button {
z-index: calc(var(--modal-z-index) + 1);
}
.eufemia-scope--10_104_0 .dnb-modal__header__bar.dnb-section {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/*
* NumberFormat Component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-number-format {
display: inline-block;
position: relative;
speak-as: numbers;
color: inherit;
white-space: nowrap;
}
.eufemia-scope--10_104_0 .dnb-number-format .dnb-sr-only::before {
content: attr(data-text);
}
.eufemia-scope--10_104_0 .dnb-number-format__prefix, .eufemia-scope--10_104_0 .dnb-number-format__suffix {
white-space: normal;
}
.eufemia-scope--10_104_0 .dnb-number-format.dnb-anchor {
cursor: pointer;
}
.eufemia-scope--10_104_0 .dnb-number-format--selectall {
cursor: text;
}
.eufemia-scope--10_104_0 .dnb-number-format__visible {
position: relative;
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-number-format--selected .dnb-number-format__visible {
color: var(--color-black);
background-color: var(--color-mint-green);
}
.eufemia-scope--10_104_0 .dnb-number-format__selection {
position: absolute;
z-index: 1;
top: 0;
left: 0;
opacity: 0;
-webkit-user-select: none;
user-select: none;
}
.eufemia-scope--10_104_0 .dnb-number-format--selected .dnb-number-format__selection {
z-index: 3;
-webkit-user-select: all;
user-select: all;
}
.eufemia-scope--10_104_0 .dnb-number-format--monospace {
font-family: var(--font-family-monospace);
}
.eufemia-scope--10_104_0 .dnb-number-format.dnb-skeleton, .eufemia-scope--10_104_0 .dnb-skeleton .dnb-number-format {
-webkit-text-fill-color: var(--skeleton-color);
}
/*
* Pagination component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-pagination {
display: flex;
flex-direction: column-reverse;
}
.eufemia-scope--10_104_0 .dnb-pagination__bar, .eufemia-scope--10_104_0 .dnb-pagination__loadbar, .eufemia-scope--10_104_0 .dnb-pagination__bar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-pagination__page, .eufemia-scope--10_104_0 .dnb-pagination__loadbar {
min-height: 6rem;
}
.eufemia-scope--10_104_0 .dnb-pagination__bar {
margin-top: 1rem;
margin-bottom: 1rem;
}
.eufemia-scope--10_104_0 .dnb-pagination--left .dnb-pagination__bar {
justify-content: flex-start;
}
.eufemia-scope--10_104_0 .dnb-pagination--center .dnb-pagination__bar {
justify-content: center;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-pagination--center .dnb-pagination__bar {
justify-content: flex-start;
}
}
.eufemia-scope--10_104_0 .dnb-pagination--right .dnb-pagination__bar {
justify-content: flex-end;
}
.eufemia-scope--10_104_0 .dnb-pagination__bar__wrapper {
display: flex;
flex-flow: column wrap;
row-gap: 0.5rem;
}
@media screen and (min-width: 72.00625em) {
.eufemia-scope--10_104_0 .dnb-pagination--layout-horizontal .dnb-pagination__bar__wrapper {
flex-flow: row-reverse wrap;
justify-content: space-between;
flex: 1;
}
}
.eufemia-scope--10_104_0 .dnb-pagination--center .dnb-pagination__bar__wrapper {
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-pagination--right .dnb-pagination__bar__wrapper {
align-items: flex-end;
}
.eufemia-scope--10_104_0 .dnb-pagination__bar__inner {
gap: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-pagination__button {
max-width: 3.5rem;
}
.eufemia-scope--10_104_0 .dnb-pagination__button--large-number {
max-width: unset;
}
.eufemia-scope--10_104_0 .dnb-pagination__loadbar {
cursor: default;
display: flex;
align-items: center;
justify-content: center;
}
.eufemia-scope--10_104_0 .dnb-pagination__indicator {
cursor: default;
display: flex;
flex-direction: column;
justify-content: center;
min-height: inherit;
}
.eufemia-scope--10_104_0 .dnb-pagination__indicator__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: show-page 300ms ease-out forwards;
}
.eufemia-scope--10_104_0 .dnb-pagination__dots {
align-self: flex-end;
}
.eufemia-scope--10_104_0 .dnb-pagination__marker {
pointer-events: none;
position: relative;
height: 1px;
width: 1px;
margin: -1px 0 0 -1px;
overflow: hidden;
}
.eufemia-scope--10_104_0 .dnb-pagination__marker td, .eufemia-scope--10_104_0 .dnb-pagination__marker__inner {
padding: 0 !important;
width: 1px;
height: 1px;
opacity: 0;
}
.eufemia-scope--10_104_0 .dnb-pagination__bar__skip {
display: flex;
column-gap: 1.5rem;
}
@keyframes show-page {
from {
transform: translate3d(0, -8px, 0);
opacity: 0.1;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 {
--popover-z-index: 1000;
}
.eufemia-scope--10_104_0 .dnb-popover {
--inner-space: 0.75rem;
--popover-border-radius: 0.5rem;
position: absolute;
z-index: var(--popover-z-index);
}
.eufemia-scope--10_104_0 .dnb-popover--inside-modal .dnb-popover {
z-index: calc(var(--modal-z-index) + var(--popover-z-index));
}
.eufemia-scope--10_104_0 .dnb-popover {
display: flex;
min-width: 320px;
padding: 0 calc(var(--inner-space) * 2);
}
.eufemia-scope--10_104_0 .dnb-popover--no-inner-space {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-popover {
color: var(--popover-text-color);
background-color: var(--popover-background-color);
border-radius: var(--popover-border-radius);
box-shadow: var(--shadow-default);
}
.eufemia-scope--10_104_0 .dnb-popover--show-outline.dnb-popover::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: var(--popover-border-radius);
box-shadow: 0 0 0 1px var(--popover-outline-color);
}
.eufemia-scope--10_104_0 .dnb-popover {
opacity: 0;
visibility: hidden;
transition: opacity 200ms var(--easing-default);
}
.eufemia-scope--10_104_0 .dnb-popover--active {
visibility: visible;
animation: show-popover 200ms var(--easing-default) forwards;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-popover--active, .eufemia-scope--10_104_0 .dnb-popover--active.dnb-popover--no-animation {
animation-duration: 0ms;
}
.eufemia-scope--10_104_0 .dnb-popover--hide {
visibility: visible;
animation: hide-popover 200ms var(--easing-default) forwards;
}
.eufemia-scope--10_104_0 .dnb-popover--hide.dnb-popover--no-animation {
animation: hide-popover 1ms linear forwards;
}
.eufemia-scope--10_104_0 .dnb-popover--fixed {
position: fixed;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-popover--hide {
animation: hide-popover 1ms linear 1s forwards;
}
.eufemia-scope--10_104_0 .dnb-popover__portal {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.eufemia-scope--10_104_0 .dnb-popover__content {
position: relative;
display: flex;
flex-direction: column;
max-width: calc(var(--prose-max-width) - 64px);
padding: calc(var(--inner-space) * 2) 0 calc(var(--inner-space) * 2);
}
.eufemia-scope--10_104_0 .dnb-popover--no-max-width .dnb-popover__content {
max-width: none;
}
.eufemia-scope--10_104_0 .dnb-popover--no-inner-space .dnb-popover__content {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-popover__portal .dnb-popover {
margin: 0 16px;
}
.eufemia-scope--10_104_0 .dnb-popover__title {
display: flex;
padding-right: 2rem;
}
.eufemia-scope--10_104_0 .dnb-popover__title strong, .eufemia-scope--10_104_0 .dnb-core-style .dnb-popover__title strong {
font-weight: var(--font-weight-medium);
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-popover__body {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-popover__body:not(:first-child) {
margin-top: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-popover__arrow {
position: absolute;
pointer-events: none;
margin: 0;
width: 1rem;
height: 1rem;
overflow: hidden;
}
.eufemia-scope--10_104_0 .dnb-popover__arrow::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 1rem;
height: 1rem;
background-color: var(--popover-background-color);
border: none;
transform: translateY(70%) rotate(45deg);
}
.eufemia-scope--10_104_0 .dnb-popover--show-outline .dnb-popover__arrow::before {
box-shadow: 0 0 0 1px var(--popover-outline-color);
}
.eufemia-scope--10_104_0 .dnb-popover__arrow__placement--bottom {
top: -1rem;
}
.eufemia-scope--10_104_0 .dnb-popover__arrow__placement--top {
bottom: -1rem;
transform: rotate(180deg);
}
.eufemia-scope--10_104_0 .dnb-popover__arrow__placement--left {
right: -1rem;
transform: rotate(90deg);
}
.eufemia-scope--10_104_0 .dnb-popover__arrow__placement--right {
left: -1rem;
transform: rotate(270deg);
}
.eufemia-scope--10_104_0 .dnb-popover__arrow__arrow--left {
align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-popover__arrow__arrow--right {
align-self: flex-end;
}
.eufemia-scope--10_104_0 .dnb-popover__close.dnb-button {
position: absolute;
top: var(--inner-space);
right: var(--inner-space);
color: inherit;
-webkit-user-select: none;
user-select: none;
}
.eufemia-scope--10_104_0 .dnb-popover__close.dnb-button:hover {
opacity: 0.7;
}
@keyframes show-popover {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hide-popover {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
}
}
/*
* ProgressIndicator component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-progress-indicator {
--progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
--progress-indicator-circular-circle: 314.159265359%;
--progress-indicator-circular-circle-offset--min: 314.159265359%;
--progress-indicator-circular-circle-offset--max: 1%;
--progress-indicator-circular-size: 2rem;
--progress-indicator-circular-stroke-width: calc(
var(--progress-indicator-circular-size) / 8
);
--progress-indicator-circular-background-color: grey;
--progress-indicator-circular-bar-color: var(--color-black);
--progress-indicator-linear-size: 0.5rem;
--progress-indicator-linear-background-color: grey;
--progress-indicator-linear-bar-color: var(--color-black);
position: relative;
display: inline-flex;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--vertical {
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--horizontal {
justify-content: center;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__label {
display: inline-flex;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__label .dnb-p {
align-self: center;
}
.eufemia-scope--10_104_0 .dnb-spacing .dnb-progress-indicator .dnb-p,
.eufemia-scope--10_104_0 .dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]) {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--horizontal .dnb-progress-indicator__label {
padding-left: 1rem;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label {
padding-left: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
padding-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--inside .dnb-progress-indicator__label {
position: absolute;
width: 100%;
justify-content: center;
padding: var(--progress-indicator-circular-stroke-width);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--small {
--progress-indicator-circular-size: 1rem;
--progress-indicator-linear-size: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--medium {
--progress-indicator-circular-size: 1.5rem;
--progress-indicator-linear-size: 1rem;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--large {
--progress-indicator-circular-size: 3.5rem;
--progress-indicator-linear-size: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--huge {
--progress-indicator-circular-size: 20rem;
--progress-indicator-linear-size: 2rem;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular {
position: relative;
width: var(--progress-indicator-circular-size);
height: var(--progress-indicator-circular-size);
transform: rotate(-90deg);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular svg:not(:root) {
overflow: visible;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__background-padding {
display: block;
height: 100%;
padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__background {
display: block;
height: 100%;
background-color: transparent;
border-radius: 50%;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__line {
animation-duration: 2s;
animation-delay: 200ms;
animation-timing-function: var(--progress-indicator-timing);
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__line {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__line.background {
stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__line.light {
animation-name: progress-indicator-circular-line-light;
stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle);
stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__line.dark {
animation-name: progress-indicator-circular-line-dark;
stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle);
stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__line.paused {
animation-play-state: paused;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark {
transition: stroke-dashoffset 600ms var(--progress-indicator-timing);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__circle {
stroke-linecap: round;
stroke-width: var(--progress-indicator-circular-stroke-width);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
stroke: var(--progress-indicator-circular-background-color);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
stroke: var(--progress-indicator-circular-bar-color);
stroke-width: calc(var(--progress-indicator-circular-stroke-width) - 0.5px);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__linear {
background-color: var(--progress-indicator-linear-background-color);
position: relative;
overflow: hidden;
width: 100%;
will-change: transform;
height: var(--progress-indicator-linear-size);
border-radius: calc(var(--progress-indicator-linear-size) / 2);
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__linear__bar {
background-color: var(--progress-indicator-linear-bar-color);
width: 100%;
position: absolute;
left: 0;
bottom: 0;
top: 0;
transform-origin: left;
border-radius: inherit;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__linear__bar-transition {
transition: transform 0.2s linear;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-progress-indicator__linear__bar-transition {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__linear__bar1-animation {
width: auto;
animation: progress-indicator-linear-bar-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-progress-indicator__linear__bar1-animation {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
.eufemia-scope--10_104_0 .dnb-progress-indicator__linear__bar2-animation {
width: auto;
animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-progress-indicator__linear__bar2-animation {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-progress-indicator__linear__bar1-animation {
left: -35%;
right: 100%;
animation-duration: 0ms;
animation-iteration-count: 0;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-progress-indicator__linear__bar2-animation {
left: -200%;
right: 100%;
animation-duration: 0ms;
animation-iteration-count: 0;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator, .eufemia-scope--10_104_0 .dnb-progress-indicator--visible {
opacity: 0;
animation: progress-indicator-fade-in 200ms ease-out 1 forwards;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible) {
animation: progress-indicator-fade-out 600ms ease-out 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-progress-indicator {
animation-duration: 0.01ms !important;
}
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-progress-indicator {
opacity: 1;
animation-duration: 0ms;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--no-animation, .eufemia-scope--10_104_0 .dnb-progress-indicator--no-animation.dnb-progress-indicator--complete {
animation-duration: 0ms;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-progress-indicator__bar-transition {
transition: none;
}
.eufemia-scope--10_104_0 .dnb-progress-indicator--full-width {
width: 100%;
min-width: 1rem;
}
@keyframes progress-indicator-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes progress-indicator-fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes progress-indicator-circular-line-light {
0% {
stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min);
}
50% {
stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min);
}
100% {
stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max);
}
}
@keyframes progress-indicator-circular-line-dark {
0% {
stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min);
}
50% {
stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max);
}
100% {
stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max);
}
}
@keyframes progress-indicator-linear-bar-1 {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes progress-indicator-linear-bar-2 {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
/*
* Radio component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 {
--radio-width--medium: 1.5rem;
--radio-height--medium: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-radio {
--radio-dot--medium: 0.75rem;
--radio-dot--large: 1.125rem;
--radio-width--large: 2rem;
--radio-height--large: 2rem;
--radio-border-width: 0.09375rem;
--radio-color-dot-on: black;
--radio-color-background-on: white;
--radio-color-border-on: black;
--radio-color-background-off: white;
--radio-color-border-off: black;
--radio-border-width--disabled: 0.125rem;
--radio-color-dot-on--disabled: lightgrey;
--radio-color-background--disabled: white;
--radio-color-border-on--disabled: lightgrey;
--radio-color-border-off--disabled: lightgrey;
--radio-color-dot-on--active: lightgrey;
--radio-color-border-on--active: lightgrey;
--radio-color-background-off--active: lightgrey;
--radio-color-border-off--active: transparent;
--radio-border-width--hover: 0.125rem;
--radio-border-width-on--hover: 0.125rem;
--radio-color-dot-on--hover: lightgrey;
--radio-color-background-on--hover: lightgrey;
--radio-color-background-off--hover: lightgrey;
--radio-border-width--focus: 0.125rem;
--radio-color-background-on--focus: var(--color-white);
--radio-color-background-off--focus: lightgrey;
--radio-color-dot-on--error: red;
--radio-color-border-on--error: red;
--radio-color-border--error-hover: red;
--radio-color-background-off--error-hover: lavenderblush;
--radio-color-background-on--error-hover: lavenderblush;
--radio-color-dot-on--error-hover: lavenderblush;
--radio-focus-ring-width--error: var(--focus-ring-width);
--radio-bounding--medium: 1.75, 1.5;
--radio-bounding--large: 1.25, 1.12;
display: inline-flex;
flex-direction: column;
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-radio__inner {
display: inline-flex;
flex-direction: column;
align-self: center;
}
.eufemia-scope--10_104_0 .dnb-radio__shell {
position: relative;
-webkit-user-select: none;
user-select: none;
display: flex;
align-items: center;
flex-shrink: 0;
justify-content: center;
width: var(--radio-width--medium);
height: var(--radio-height--medium);
}
.eufemia-scope--10_104_0 .dnb-radio__focus, .eufemia-scope--10_104_0 .dnb-radio__button, .eufemia-scope--10_104_0 .dnb-radio__dot {
position: absolute;
z-index: 4;
}
.eufemia-scope--10_104_0 .dnb-radio__button {
border: var(--radio-border-width) solid transparent;
}
.eufemia-scope--10_104_0 .dnb-radio__focus {
display: none;
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-radio__focus {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-radio__focus, .eufemia-scope--10_104_0 .dnb-radio__button {
width: calc(var(--radio-width--medium) - 0.25rem);
height: calc(var(--radio-height--medium) - 0.25rem);
border-radius: 50%;
}
.eufemia-scope--10_104_0 .dnb-radio--large .dnb-radio__focus, .eufemia-scope--10_104_0 .dnb-radio--large .dnb-radio__button {
width: var(--radio-width--large);
height: var(--radio-height--large);
}
.eufemia-scope--10_104_0 .dnb-radio__dot {
width: var(--radio-dot--medium);
height: var(--radio-dot--medium);
border-radius: 50%;
background-color: var(--radio-color-dot-on);
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.eufemia-scope--10_104_0 .dnb-radio--large .dnb-radio__dot {
width: var(--radio-dot--large);
height: var(--radio-dot--large);
}
.eufemia-scope--10_104_0 .dnb-radio__input {
opacity: 0;
position: absolute;
top: auto;
left: auto;
z-index: 5;
width: var(--radio-width--medium);
height: var(--radio-height--medium);
margin: 0;
padding: 0;
border: 0;
transform: scale(var(--radio-bounding--medium));
}
.eufemia-scope--10_104_0 .dnb-radio--large .dnb-radio__input {
width: var(--radio-width--large);
height: var(--radio-height--large);
transform: scale(var(--radio-bounding--large));
}
.eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]) {
cursor: pointer;
}
.eufemia-scope--10_104_0 .dnb-radio__order {
display: inline-flex;
align-items: baseline;
}
.eufemia-scope--10_104_0 .dnb-radio-group--column .dnb-radio__order {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-radio__row {
display: inline-flex;
}
.eufemia-scope--10_104_0 .dnb-radio__suffix {
order: 3;
}
.eufemia-scope--10_104_0 .dnb-radio__suffix .dnb-modal__trigger {
margin-top: -0.25rem;
margin-bottom: -0.25rem;
}
.eufemia-scope--10_104_0 .dnb-radio-group__suffix {
font-size: var(--font-size-basis);
}
.eufemia-scope--10_104_0 .dnb-radio--large {
line-height: var(--radio-height--large);
}
.eufemia-scope--10_104_0 .dnb-radio--large .dnb-radio__suffix {
line-height: var(--radio-height--large);
}
.eufemia-scope--10_104_0 .dnb-radio--large .dnb-radio__shell {
width: var(--radio-width--large);
height: var(--radio-height--large);
}
.eufemia-scope--10_104_0 .dnb-radio .dnb-form-label {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner {
order: 2;
}
.eufemia-scope--10_104_0 .dnb-radio--label-position-left .dnb-radio__order .dnb-form-label {
order: 1;
padding-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner {
order: 1;
}
.eufemia-scope--10_104_0 .dnb-radio--label-position-right .dnb-radio__order .dnb-form-label {
order: 2;
padding-left: 0.5rem;
}
.eufemia-scope--10_104_0 :not(.dnb-radio-group) > .dnb-form-label + .dnb-radio {
vertical-align: top;
}
.eufemia-scope--10_104_0 .dnb-radio .dnb-form-status {
order: 4;
margin-top: 0.375rem; /* 6/16 */
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-radio + .dnb-form-status {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.eufemia-scope--10_104_0 .dnb-radio > .dnb-form-status {
transform: translateY(0.25rem); /* 4/16 */
}
.eufemia-scope--10_104_0 .dnb-radio-group {
--radio-group-row-gap: 0.5rem;
--radio-group-column-gap: 1rem;
display: inline-flex;
}
.eufemia-scope--10_104_0 .dnb-radio-group, .eufemia-scope--10_104_0 .dnb-radio-group__fieldset, .eufemia-scope--10_104_0 .dnb-radio-group__shell {
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-radio-group fieldset:not([class*=space__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-radio-group fieldset:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-radio-group fieldset:not([class*=space__left]) {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-radio-group fieldset:not([class*=space__right]) {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-radio-group fieldset {
padding: 0;
border: none;
}
.eufemia-scope--10_104_0 .dnb-radio-group--column .dnb-radio {
display: flex;
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-radio-group .dnb-radio:last-of-type {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-radio-group__shell {
display: flex;
flex-wrap: wrap;
column-gap: var(--radio-group-column-gap);
row-gap: var(--radio-group-row-gap);
}
.eufemia-scope--10_104_0 .dnb-radio-group__shell > .dnb-form-status {
margin-top: 0;
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-radio-group--column .dnb-radio-group__shell {
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-radio {
/*
* Color scheme
*/
/** Normal state **/
}
.eufemia-scope--10_104_0 .dnb-radio__input:checked ~ .dnb-radio__button, .eufemia-scope--10_104_0 .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
background-color: var(--radio-color-background-on);
border-color: var(--radio-color-border-on);
}
.eufemia-scope--10_104_0 .dnb-radio__input:checked ~ .dnb-radio__dot, .eufemia-scope--10_104_0 .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
opacity: 1;
transform: scale(1);
}
.eufemia-scope--10_104_0 .dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot {
opacity: 0;
transform: scale(0.8);
}
.eufemia-scope--10_104_0 .dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
background-color: var(--radio-color-background-off);
border-color: var(--radio-color-border-off);
}
.eufemia-scope--10_104_0 .dnb-radio {
/** Disabled state **/
}
.eufemia-scope--10_104_0 .dnb-radio__input[disabled] ~ .dnb-radio__button {
border-width: var(--radio-border-width--disabled);
}
.eufemia-scope--10_104_0 .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .eufemia-scope--10_104_0 .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
border-color: var(--radio-color-border-on--disabled);
background-color: var(--radio-color-background--disabled);
}
.eufemia-scope--10_104_0 .dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .eufemia-scope--10_104_0 .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--disabled);
}
.eufemia-scope--10_104_0 .dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button:not(.dnb-skeleton) {
border-color: var(--radio-color-border-off--disabled);
background-color: var(--radio-color-background--disabled);
}
.eufemia-scope--10_104_0 .dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton::before {
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton {
border-color: var(--skeleton-color);
}
.eufemia-scope--10_104_0 .dnb-radio {
/** Active state **/
}
.eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
border-color: var(--radio-color-border-on--active);
}
.eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--active);
}
.eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--active);
border-color: var(--radio-color-border-off--active);
}
.eufemia-scope--10_104_0 .dnb-radio {
/** Hover state **/
}
.eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--hover);
}
.eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__button, .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__button {
background-color: var(--radio-color-background-on--hover);
border-width: var(--radio-border-width-on--hover);
}
.eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--hover);
border-width: var(--radio-border-width--hover);
}
.eufemia-scope--10_104_0 .dnb-radio {
/** Focus state **/
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
border-width: var(--radio-border-width--focus);
border: none;
}
.eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
display: block;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
background-color: var(--radio-color-background-on--focus);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__dot, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--focus, var(--focus-ring-color));
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--focus);
}
.eufemia-scope--10_104_0 .dnb-radio {
/** Error state **/
}
.eufemia-scope--10_104_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
border: none;
}
.eufemia-scope--10_104_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
display: block;
--border-color: var(--radio-color-border-on--error);
--border-width: var(--radio-focus-ring-width--error);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-radio__focus {
--border-color: var(--radio-color-border--error-hover);
--border-width: var(--radio-focus-ring-width--error);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .eufemia-scope--10_104_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--error);
}
.eufemia-scope--10_104_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .eufemia-scope--10_104_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--error-hover);
}
.eufemia-scope--10_104_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__button, .eufemia-scope--10_104_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__button {
background-color: var(--radio-color-background-on--error-hover);
}
.eufemia-scope--10_104_0 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--error-hover);
}
/*
* Section component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 {
--section-z-index: 1;
}
.eufemia-scope--10_104_0 .dnb-section {
position: relative;
isolation: isolate;
display: flow-root;
--breakout--on: visible;
--breakout--off: hidden;
--rounded-corner--value: 0.5rem;
--outline: 0 0 0 var(--outline-width, 1px)
var(--outline-color, transparent);
--outline-none: 0 0 0 0 transparent;
--top: 0;
--left: -100vw;
--width: 100vw;
--height: 100%;
--color-transparent: transparent;
--rounded-corner--small: 0;
--rounded-corner--medium: 0;
--rounded-corner--large: 0;
color: var(--text-color, black);
border-radius: var(--rounded-corner, 0);
}
.eufemia-scope--10_104_0 .dnb-section[style*="--background-color"] {
background-color: var(--background-color, white);
}
.eufemia-scope--10_104_0 .dnb-section::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
box-shadow: var(--drop-shadow, var(--outline-none)), var(--outline, var(--outline-none));
border-radius: var(--rounded-corner, 0);
}
.eufemia-scope--10_104_0 .dnb-section::after {
content: "";
visibility: var(--breakout, hidden);
position: absolute;
z-index: -15;
left: var(--left);
top: var(--top);
width: var(--width);
height: var(--height);
color: var(--background-color, currentcolor);
background-color: currentcolor;
--box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
box-shadow: var(--box-shadow);
border-radius: var(--rounded-corner, 0);
}
.eufemia-scope--10_104_0 .dnb-section:not([style*="--breakout"]) {
--breakout: var(--breakout--on);
}
.eufemia-scope--10_104_0 .dnb-section[style*="--outset"].dnb-space[style]:not(.dnb-card) {
padding-left: calc(var(--padding-left) * (1 - var(--outset)));
padding-right: calc(var(--padding-right) * (1 - var(--outset)));
}
.eufemia-scope--10_104_0 .dnb-section[style*="--outset"]::before {
margin-left: calc(var(--outset-left, var(--padding-left)) * -1 * var(--outset));
margin-right: calc(var(--outset-right, var(--padding-right)) * -1 * var(--outset));
background-color: inherit;
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-section {
--breakout: var(--breakout--small, var(--breakout--fallback));
--outset: var(--outset--small, var(--outset--fallback));
--background-color--value: var(--background-color--small);
--text-color--value: var(--text-color--small);
--outline-color: var(--outline-color--small);
--outline-width: var(--outline-width--small);
--drop-shadow: var(--drop-shadow--small);
--rounded-corner: var(
--rounded-corner--small,
var(--rounded-corner--fallback)
);
}
}
@media screen and (max-width: 60em) and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-section {
--breakout: var(--breakout--medium, var(--breakout--fallback));
--outset: var(--outset--medium, var(--outset--fallback));
--background-color--value: var(--background-color--medium);
--text-color--value: var(--text-color--medium);
--outline-color: var(--outline-color--medium);
--outline-width: var(--outline-width--medium);
--drop-shadow: var(--drop-shadow--medium);
--rounded-corner: var(
--rounded-corner--medium,
var(--rounded-corner--fallback)
);
}
}
@media screen and (min-width: 60.00625em) {
.eufemia-scope--10_104_0 .dnb-section {
--breakout: var(--breakout--large, var(--breakout--fallback));
--outset: var(--outset--large, var(--outset--fallback));
--background-color--value: var(--background-color--large);
--text-color--value: var(--text-color--large);
--outline-color: var(--outline-color--large);
--outline-width: var(--outline-width--large);
--drop-shadow: var(--drop-shadow--large);
--rounded-corner: var(
--rounded-corner--large,
var(--rounded-corner--fallback)
);
}
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section::after {
z-index: -14;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section::after {
z-index: -13;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section::after {
z-index: -12;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
z-index: -11;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
z-index: -10;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
z-index: -9;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
z-index: -8;
}
.eufemia-scope--10_104_0 .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
z-index: -7;
}
.eufemia-scope--10_104_0 .dnb-section--spacing-x-small {
padding-top: var(--spacing-x-small);
padding-bottom: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-section--spacing-small {
padding-top: var(--spacing-small);
padding-bottom: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-section--spacing-medium {
padding-top: var(--spacing-medium);
padding-bottom: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-section--spacing, .eufemia-scope--10_104_0 .dnb-section--spacing-large {
padding-top: var(--spacing-large);
padding-bottom: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-section--spacing-x-large {
padding-top: var(--spacing-x-large);
padding-bottom: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-section--spacing-xx-large {
padding-top: var(--spacing-xx-large);
padding-bottom: var(--spacing-xx-large);
}
/*
* Skeleton component
*
* Skeleton
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-skeleton {
--skeleton-delay: 5s;
--skeleton-duration: 1.5s;
--skeleton-iteration-count: 20;
}
.eufemia-scope--10_104_0 .dnb-skeleton img,
.eufemia-scope--10_104_0 .dnb-skeleton video {
filter: brightness(0%) contrast(0%) opacity(0.5);
}
.eufemia-scope--10_104_0 .dnb-skeleton--block {
display: block;
}
.eufemia-scope--10_104_0 .dnb-skeleton--overflow {
overflow: hidden;
}
.eufemia-scope--10_104_0 .dnb-skeleton--grey {
filter: grayscale(100%);
}
.eufemia-scope--10_104_0 .dnb-skeleton--shape {
pointer-events: none;
position: relative;
overflow-x: hidden;
color: transparent;
background: transparent;
box-shadow: none !important;
}
.eufemia-scope--10_104_0 .dnb-skeleton--shape.dnb-skeleton::before, .eufemia-scope--10_104_0 .dnb-skeleton--shape.dnb-skeleton::after {
content: "" !important;
position: absolute !important;
z-index: 100 !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border-radius: inherit;
background: none !important;
box-shadow: none !important;
}
.eufemia-scope--10_104_0 .dnb-skeleton--shape.dnb-skeleton::before {
background-color: var(--skeleton-color) !important;
}
.eufemia-scope--10_104_0 .dnb-skeleton--shape.dnb-skeleton::after {
background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
background-repeat: repeat !important;
background-size: 100% !important;
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
animation: skeletonLinearAnimation var(--skeleton-duration) linear var(--skeleton-iteration-count) var(--skeleton-delay);
}
.eufemia-scope--10_104_0 .dnb-skeleton--code pre,
.eufemia-scope--10_104_0 .dnb-skeleton--code pre *,
.eufemia-scope--10_104_0 .dnb-skeleton--code code,
.eufemia-scope--10_104_0 .dnb-skeleton--code code *,
.eufemia-scope--10_104_0 .dnb-skeleton--font pre,
.eufemia-scope--10_104_0 .dnb-skeleton--font pre *,
.eufemia-scope--10_104_0 .dnb-skeleton--font code,
.eufemia-scope--10_104_0 .dnb-skeleton--font code * {
--font-family-monospace: 'DNBMonoSkeleton' !important;
font-family: var(--font-family-monospace) !important;
font-style: unset !important;
box-shadow: none !important;
}
.eufemia-scope--10_104_0 .dnb-skeleton--font-only, .eufemia-scope--10_104_0 .dnb-skeleton--font, .eufemia-scope--10_104_0 .dnb-skeleton--font .dnb-skeleton--show-font, .eufemia-scope--10_104_0 .dnb-skeleton--font .dnb-p {
pointer-events: none;
--font-family-default: 'DNBSkeleton' !important;
font-family: var(--font-family-default) !important;
font-style: unset !important;
}
.eufemia-scope--10_104_0 .dnb-skeleton--font-only::marker, .eufemia-scope--10_104_0 .dnb-skeleton--font::marker, .eufemia-scope--10_104_0 .dnb-skeleton--font .dnb-skeleton--show-font::marker, .eufemia-scope--10_104_0 .dnb-skeleton--font .dnb-p::marker {
color: var(--skeleton-color);
}
.eufemia-scope--10_104_0 .dnb-skeleton--font, .eufemia-scope--10_104_0 .dnb-skeleton--font .dnb-skeleton--show-font, .eufemia-scope--10_104_0 .dnb-skeleton--font .dnb-p {
background-position-y: 50% !important;
background-repeat: no-repeat !important;
background-size: 30rem 100% !important;
-webkit-text-fill-color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important;
background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
--border-color: var(--skeleton-color);
background-color: var(--skeleton-color) !important;
background-position-x: 30rem;
animation: skeletonFontAnimation 5s linear infinite var(--skeleton-delay);
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-skeleton--font, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-skeleton--font .dnb-skeleton--show-font, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-skeleton--font .dnb-p {
animation: none !important;
}
.eufemia-scope--10_104_0 .dnb-skeleton__figure {
position: relative;
border-radius: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-skeleton__figure--circle {
width: 4rem;
height: 4rem;
border-radius: 50%;
}
.eufemia-scope--10_104_0 .dnb-skeleton__figure--product {
display: flex;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-skeleton__figure--product .dnb-skeleton__figure--circle + div {
width: 50%;
margin-left: 1rem;
}
.eufemia-scope--10_104_0 .dnb-skeleton--no-animation .dnb-skeleton, .eufemia-scope--10_104_0 .dnb-skeleton--no-animation .dnb-skeleton::after, .eufemia-scope--10_104_0 .dnb-skeleton--no-animation * .dnb-skeleton::after {
animation: none !important;
}
@keyframes skeletonLinearAnimation {
0% {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
50% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
100% {
clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
}
}
@keyframes skeletonFontAnimation {
0% {
background-position-x: 30rem;
}
100% {
background-position-x: -30rem;
}
}
@font-face {
font-family: DNBSkeleton;
src: url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNB-Skeleton-Regular.woff2") format("woff2"), url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNB-Skeleton-Regular.woff") format("woff"), url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNB-Skeleton-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: DNBSkeleton;
src: url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNB-Skeleton-Medium.woff2") format("woff2"), url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNB-Skeleton-Medium.woff") format("woff"), url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNB-Skeleton-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: DNBSkeleton;
src: url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNB-Skeleton-Bold.woff2") format("woff2"), url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNB-Skeleton-Bold.woff") format("woff"), url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNB-Skeleton-Bold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: DNBMonoSkeleton;
src: url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNBMono-Skeleton-Regular.woff2") format("woff2"), url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNBMono-Skeleton-Regular.woff") format("woff"), url("https://assets.dnb.no/shared/fonts/1.0.0/dnb/skeleton/DNBMono-Skeleton-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: fallback;
}
/*
* SkipContent component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-skip-content--visible {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-skip-content .dnb-button {
margin: 1rem 0;
}
.eufemia-scope--10_104_0 .dnb-skip-content__focus:focus {
position: relative;
}
.eufemia-scope--10_104_0 .dnb-skip-content__focus:focus::before {
content: "";
position: absolute;
top: var(--focus-ring-width);
right: var(--focus-ring-width);
bottom: var(--focus-ring-width);
left: var(--focus-ring-width);
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-skip-content__focus:focus::before {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-skip-content__return:not(.dnb-skip-content__return--active) button.dnb-sr-only {
display: none;
}
/*
* Slider component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-slider {
--slider-track-height: 0.25rem;
--slider-thumb-size: 2rem;
--slider-button-size: 1.5rem;
--slider-space: 1rem;
--slider-line-before: black;
--slider-line-after: gray;
--slider-line-before--disabled: dimgray;
--slider-line-after--disabled: lightgray;
--slider-marker: var(--slider-line-before);
--slider-marker-height: calc(var(--slider-thumb-size) * 0.75);
--slider-marker-width: 0.125rem;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
display: flex;
font-size: var(--font-size-small);
line-height: var(--slider-thumb-size);
}
.eufemia-scope--10_104_0 .dnb-slider--stretch {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-slider--vertical {
display: flex;
width: auto;
height: 100%;
min-width: inherit;
min-height: inherit;
}
.eufemia-scope--10_104_0 .dnb-slider__wrapper {
display: inline-flex;
flex-direction: column;
flex: 1;
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__wrapper {
align-items: center;
width: auto;
height: 100%;
}
.eufemia-scope--10_104_0 .dnb-slider__inner {
display: inline-flex;
height: var(--slider-thumb-size);
}
.eufemia-scope--10_104_0 .dnb-slider__suffix {
align-self: center;
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__suffix {
padding-left: 0;
padding-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-slider__marker {
position: absolute;
top: 0;
bottom: 0;
z-index: 3;
margin: auto;
width: var(--slider-marker-width);
height: var(--slider-marker-height);
background-color: var(--slider-marker);
}
.eufemia-scope--10_104_0 .dnb-slider__marker:focus {
outline: none;
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-slider__marker:focus {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-slider__marker::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
transform: scale(10, 1);
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__marker {
top: auto;
right: 0;
bottom: auto;
left: 0;
height: var(--slider-marker-width);
width: var(--slider-marker-height);
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__marker::before {
transform: scale(1, 10);
}
.eufemia-scope--10_104_0 .dnb-slider__track {
touch-action: none;
position: relative;
flex: 1;
margin: 0 calc(var(--slider-space) * 1.5);
min-width: 2rem;
cursor: pointer;
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__track {
margin: calc(var(--slider-space) * 1.5) 0;
min-height: 2rem;
min-width: auto;
}
.eufemia-scope--10_104_0 .dnb-slider--no-buttons .dnb-slider__track {
margin: 0 calc(var(--slider-space));
}
.eufemia-scope--10_104_0 .dnb-slider--no-buttons.dnb-slider--vertical .dnb-slider__track {
margin: calc(var(--slider-space)) 0;
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__inner {
flex-direction: column;
width: var(--slider-thumb-size);
height: inherit;
min-width: inherit;
min-height: inherit;
}
.eufemia-scope--10_104_0 .dnb-slider__line {
position: absolute;
left: 0;
top: 50%;
margin: 0 calc(0px - var(--slider-space));
height: var(--slider-track-height);
transform: translate3d(0, -50%, 0);
background-color: var(--slider-line-before);
border-radius: var(--slider-track-height);
}
.eufemia-scope--10_104_0 .dnb-slider__line__before {
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-slider__line__after {
z-index: 1;
right: 0;
background-color: var(--slider-line-after);
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__line {
width: var(--slider-track-height);
height: auto;
left: 50%;
top: 0;
margin: calc(0px - var(--slider-space)) 0;
transform: translate3d(-50%, 0, 0);
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__line__before {
top: 0;
bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__line__after {
bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-slider__thumb {
box-shadow: var(--shadow-sharp);
}
.eufemia-scope--10_104_0 .dnb-slider__button-helper, .eufemia-scope--10_104_0 .dnb-slider__thumb {
position: absolute;
left: 0;
top: 0;
z-index: 4;
display: flex;
justify-content: center;
transform: translate3d(-50%, 0, 0);
border-radius: 50%;
}
.eufemia-scope--10_104_0 .dnb-slider__button-helper,
.eufemia-scope--10_104_0 .dnb-slider__button-helper .dnb-button,
.eufemia-scope--10_104_0 .dnb-slider__thumb,
.eufemia-scope--10_104_0 .dnb-slider__thumb .dnb-button {
height: var(--slider-thumb-size);
width: var(--slider-thumb-size);
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__thumb {
transform: translate3d(0, -50%, 0);
}
.eufemia-scope--10_104_0 .dnb-slider__button.dnb-button--size-small {
height: var(--slider-button-size);
width: var(--slider-button-size);
line-height: var(--slider-button-size);
transform: translateY(0.25rem);
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-slider__button.dnb-button--size-small {
transform: translateX(0.25rem);
}
.eufemia-scope--10_104_0 .dnb-slider__state--disabled .dnb-slider__track, .eufemia-scope--10_104_0 .dnb-slider__state--disabled .dnb-slider__thumb, .eufemia-scope--10_104_0 .dnb-slider__state--disabled .dnb-slider__line {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-slider__state--animate .dnb-slider__thumb, .eufemia-scope--10_104_0 .dnb-slider__state--animate .dnb-slider__line {
transition: left 250ms var(--easing-default), top 250ms var(--easing-default), bottom 250ms var(--easing-default), right 250ms var(--easing-default), box-shadow 250ms var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-slider__state--animate .dnb-slider__thumb, .eufemia-scope--10_104_0 .dnb-slider__state--animate .dnb-slider__line {
transition-duration: 0.01ms;
}
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-slider__thumb, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-slider__line {
transition: none !important;
}
.eufemia-scope--10_104_0 .dnb-slider__button-helper {
pointer-events: none;
z-index: 2;
opacity: 0;
transform: translate3d(0.0625rem, 0, 0);
}
.eufemia-scope--10_104_0 .dnb-slider__button-helper:not(:disabled):focus ~ .dnb-button {
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-slider__button-helper:not(:disabled):focus ~ .dnb-button {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-slider > .dnb-form-label {
align-self: flex-start;
margin-right: 1rem;
line-height: var(--slider-thumb-size);
}
.eufemia-scope--10_104_0 .dnb-slider > .dnb-form-label--vertical {
margin-right: 0;
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-slider__label--vertical {
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-slider__label--vertical.dnb-slider--vertical {
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-slider__label--vertical.dnb-slider--vertical .dnb-form-label {
text-align: center;
width: 100%;
margin-right: 0;
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-slider .dnb-form-status {
order: 2;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-slider--vertical .dnb-form-status {
margin-top: 1rem;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-slider {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-slider > .dnb-form-label {
margin-bottom: 0.5rem;
}
}
.eufemia-scope--10_104_0 .dnb-slider.dnb-skeleton .dnb-slider__line, .eufemia-scope--10_104_0 .dnb-slider.dnb-skeleton .dnb-slider__marker, .eufemia-scope--10_104_0 .dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line {
background-color: var(--skeleton-color);
}
.eufemia-scope--10_104_0 .dnb-slider.dnb-skeleton .dnb-slider__track::before, .eufemia-scope--10_104_0 .dnb-slider.dnb-skeleton .dnb-slider__track::after, .eufemia-scope--10_104_0 .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::before, .eufemia-scope--10_104_0 .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::after {
background-color: var(--skeleton-color);
}
/*
* Space component
*
* TODO: Set spacing in the theme file, as theme comes later in the stack
*
*/
/*
* Utilities
*/
/** NB: Because CSS specificity ".dnb-core-style .dnb-space"
has to come before the next ".dnb-space"
*/
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--zero {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-small {
margin-top: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--x-small {
margin-top: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--small {
margin-top: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--medium {
margin-top: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--large {
margin-top: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small {
margin-top: calc(var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--x-large {
margin-top: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large {
margin-top: var(--spacing-xx-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-small {
margin-top: calc(var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--small {
margin-top: calc(var(--spacing-x-large) + var(--spacing-medium));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--medium {
margin-top: calc(var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large {
margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small {
margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-large {
margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large-x2 {
margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-small {
margin-top: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--small {
margin-top: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--medium {
margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large {
margin-top: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small {
margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-large {
margin-top: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--zero {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-small {
margin-right: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--x-small {
margin-right: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--small {
margin-right: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--medium {
margin-right: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--large {
margin-right: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small {
margin-right: calc(var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--x-large {
margin-right: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large {
margin-right: var(--spacing-xx-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-small {
margin-right: calc(var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--small {
margin-right: calc(var(--spacing-x-large) + var(--spacing-medium));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--medium {
margin-right: calc(var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large {
margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small {
margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-large {
margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large-x2 {
margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-small {
margin-right: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--small {
margin-right: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--medium {
margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large {
margin-right: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small {
margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-large {
margin-right: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--zero {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-small {
margin-bottom: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--x-small {
margin-bottom: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--small {
margin-bottom: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--medium {
margin-bottom: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--large {
margin-bottom: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small {
margin-bottom: calc(var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--x-large {
margin-bottom: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large {
margin-bottom: var(--spacing-xx-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-small {
margin-bottom: calc(var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--small {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-medium));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--medium {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-large {
margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large-x2 {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-small {
margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--small {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--medium {
margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small {
margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-large {
margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--zero {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-small {
margin-left: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--x-small {
margin-left: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--small {
margin-left: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--medium {
margin-left: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--large {
margin-left: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small {
margin-left: calc(var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--x-large {
margin-left: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large {
margin-left: var(--spacing-xx-large);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-small {
margin-left: calc(var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--small {
margin-left: calc(var(--spacing-x-large) + var(--spacing-medium));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--medium {
margin-left: calc(var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large {
margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small {
margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-large {
margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large-x2 {
margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-small {
margin-left: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--small {
margin-left: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--medium {
margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large {
margin-left: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small {
margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-large {
margin-left: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
}
/* stylelint-disable */
.eufemia-scope--10_104_0 .dnb-space--no-collapse {
display: flow-root;
}
.eufemia-scope--10_104_0 .dnb-space--stretch {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-space--inline {
display: inline-block;
}
.eufemia-scope--10_104_0 .dnb-space__top--zero {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-small {
margin-top: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-space__top--x-small {
margin-top: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-space__top--small {
margin-top: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-space__top--medium {
margin-top: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-space__top--large {
margin-top: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-space__top--large.dnb-space__top--x-small {
margin-top: calc(var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-space__top--x-large {
margin-top: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large {
margin-top: var(--spacing-xx-large);
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large.dnb-space__top--x-small {
margin-top: calc(var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large.dnb-space__top--small {
margin-top: calc(var(--spacing-x-large) + var(--spacing-medium));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large.dnb-space__top--medium {
margin-top: calc(var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large.dnb-space__top--large {
margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large.dnb-space__top--large.dnb-space__top--x-small {
margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large.dnb-space__top--x-large {
margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large-x2 {
margin-top: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large-x2.dnb-space__top--x-small {
margin-top: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large-x2.dnb-space__top--small {
margin-top: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large-x2.dnb-space__top--medium {
margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large-x2.dnb-space__top--large {
margin-top: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large-x2.dnb-space__top--large.dnb-space__top--x-small {
margin-top: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__top--xx-large-x2.dnb-space__top--x-large {
margin-top: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__right--zero {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-small {
margin-right: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-space__right--x-small {
margin-right: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-space__right--small {
margin-right: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-space__right--medium {
margin-right: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-space__right--large {
margin-right: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-space__right--large.dnb-space__right--x-small {
margin-right: calc(var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-space__right--x-large {
margin-right: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large {
margin-right: var(--spacing-xx-large);
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large.dnb-space__right--x-small {
margin-right: calc(var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large.dnb-space__right--small {
margin-right: calc(var(--spacing-x-large) + var(--spacing-medium));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large.dnb-space__right--medium {
margin-right: calc(var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large.dnb-space__right--large {
margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large.dnb-space__right--large.dnb-space__right--x-small {
margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large.dnb-space__right--x-large {
margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large-x2 {
margin-right: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large-x2.dnb-space__right--x-small {
margin-right: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large-x2.dnb-space__right--small {
margin-right: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large-x2.dnb-space__right--medium {
margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large-x2.dnb-space__right--large {
margin-right: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large-x2.dnb-space__right--large.dnb-space__right--x-small {
margin-right: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__right--xx-large-x2.dnb-space__right--x-large {
margin-right: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--zero {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-small {
margin-bottom: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-space__bottom--x-small {
margin-bottom: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-space__bottom--small {
margin-bottom: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-space__bottom--medium {
margin-bottom: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-space__bottom--large {
margin-bottom: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-space__bottom--large.dnb-space__bottom--x-small {
margin-bottom: calc(var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--x-large {
margin-bottom: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large {
margin-bottom: var(--spacing-xx-large);
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large.dnb-space__bottom--x-small {
margin-bottom: calc(var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large.dnb-space__bottom--small {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-medium));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large.dnb-space__bottom--medium {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large.dnb-space__bottom--large {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large.dnb-space__bottom--large.dnb-space__bottom--x-small {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large.dnb-space__bottom--x-large {
margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large-x2 {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-small {
margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large-x2.dnb-space__bottom--small {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large-x2.dnb-space__bottom--medium {
margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large-x2.dnb-space__bottom--large {
margin-bottom: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large-x2.dnb-space__bottom--large.dnb-space__bottom--x-small {
margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-large {
margin-bottom: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__left--zero {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-small {
margin-left: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-space__left--x-small {
margin-left: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-space__left--small {
margin-left: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-space__left--medium {
margin-left: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-space__left--large {
margin-left: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-space__left--large.dnb-space__left--x-small {
margin-left: calc(var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-space__left--x-large {
margin-left: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large {
margin-left: var(--spacing-xx-large);
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large.dnb-space__left--x-small {
margin-left: calc(var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large.dnb-space__left--small {
margin-left: calc(var(--spacing-x-large) + var(--spacing-medium));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large.dnb-space__left--medium {
margin-left: calc(var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large.dnb-space__left--large {
margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large.dnb-space__left--large.dnb-space__left--x-small {
margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large.dnb-space__left--x-large {
margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large-x2 {
margin-left: calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large-x2.dnb-space__left--x-small {
margin-left: calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large-x2.dnb-space__left--small {
margin-left: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large-x2.dnb-space__left--medium {
margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large-x2.dnb-space__left--large {
margin-left: calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large-x2.dnb-space__left--large.dnb-space__left--x-small {
margin-left: calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__left--xx-large-x2.dnb-space__left--x-large {
margin-left: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
}
.eufemia-scope--10_104_0 .dnb-space__reset:not([class*=space__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-space__reset:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-space__reset:not([class*=space__left]) {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-space__reset:not([class*=space__right]) {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-space[style*="--space-t-"] {
padding-top: var(--padding-top, 0);
}
.eufemia-scope--10_104_0 .dnb-space[style*="--space-r-"] {
padding-right: var(--padding-right, 0);
}
.eufemia-scope--10_104_0 .dnb-space[style*="--space-b-"] {
padding-bottom: var(--padding-bottom, 0);
}
.eufemia-scope--10_104_0 .dnb-space[style*="--space-l-"] {
padding-left: var(--padding-left, 0);
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-space {
--padding-right: var(--space-r-s);
--padding-left: var(--space-l-s);
--padding-top: var(--space-t-s);
--padding-bottom: var(--space-b-s);
}
}
@media screen and (max-width: 60em) and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-space {
--padding-right: var(--space-r-m);
--padding-left: var(--space-l-m);
--padding-top: var(--space-t-m);
--padding-bottom: var(--space-b-m);
}
}
@media screen and (min-width: 60.00625em) {
.eufemia-scope--10_104_0 .dnb-space {
--padding-right: var(--space-r-l);
--padding-left: var(--space-l-l);
--padding-top: var(--space-t-l);
--padding-bottom: var(--space-b-l);
}
}
.eufemia-scope--10_104_0 span.dnb-space--no-collapse > span {
display: block;
}
/* stylelint-enable */
/*
* Stat Component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-stat--tone-positive {
color: var(--color-success-green);
}
.eufemia-scope--10_104_0 .dnb-stat--tone-negative {
color: var(--color-fire-red);
}
.eufemia-scope--10_104_0 .dnb-stat__content {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
line-height: var(--line-height-basis--em);
word-break: keep-all;
}
.eufemia-scope--10_104_0 .dnb-stat__content-item:not([class*=space__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__content-item:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__content-item:not([class*=space__left]) {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__content-item:not([class*=space__right]) {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__content-item {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-stat__content-item--vertical {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-stat__label:not([class*=space__bottom]) {
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-stat__label--plain {
color: var(--color-black-80);
}
.eufemia-scope--10_104_0 .dnb-stat__label--subtle {
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-stat__label [class*=dnb-h--]:not([class*=space__top]), .eufemia-scope--10_104_0 .dnb-spacing .dnb-stat__label [class*=dnb-h--]:not([class*=space__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__label [class*=dnb-h--]:not([class*=space__bottom]), .eufemia-scope--10_104_0 .dnb-spacing .dnb-stat__label [class*=dnb-h--]:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__label [class*=dnb-h--]:not([class*=space__left]), .eufemia-scope--10_104_0 .dnb-spacing .dnb-stat__label [class*=dnb-h--]:not([class*=space__left]) {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__label [class*=dnb-h--]:not([class*=space__right]), .eufemia-scope--10_104_0 .dnb-spacing .dnb-stat__label [class*=dnb-h--]:not([class*=space__right]) {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__label [class*=dnb-h--], .eufemia-scope--10_104_0 .dnb-spacing .dnb-stat__label [class*=dnb-h--] {
font-size: inherit;
font-weight: inherit;
}
.eufemia-scope--10_104_0 .dnb-stat__root:not([class*=space__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__root:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__root:not([class*=space__left]) {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__root:not([class*=space__right]) {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-stat__root {
display: grid;
}
.eufemia-scope--10_104_0 .dnb-stat__root--content-label > .dnb-stat__label {
order: 2;
}
.eufemia-scope--10_104_0 .dnb-stat__root--content-label > .dnb-stat__content-item {
order: 1;
}
.eufemia-scope--10_104_0 .dnb-stat__info {
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-stat__info--plain {
color: var(--color-black-80);
}
.eufemia-scope--10_104_0 .dnb-stat__info--subtle {
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-stat__info--prominent {
color: var(--color-black-80);
font-weight: var(--font-weight-medium);
}
.eufemia-scope--10_104_0 .dnb-stat__text {
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-stat .dnb-sr-only::before {
content: attr(data-text);
}
.eufemia-scope--10_104_0 .dnb-stat__amount, .eufemia-scope--10_104_0 .dnb-stat__sign {
font-weight: inherit;
}
.eufemia-scope--10_104_0 .dnb-stat__sign {
margin-right: 0.2em;
}
.eufemia-scope--10_104_0 .dnb-stat__currency {
margin-left: 0.2em;
}
.eufemia-scope--10_104_0 .dnb-stat__prefix, .eufemia-scope--10_104_0 .dnb-stat__suffix {
white-space: normal;
}
.eufemia-scope--10_104_0 .dnb-stat__trend {
display: inline-flex;
padding: 0.25rem 0.5rem;
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
font-weight: var(--font-weight-medium);
border-radius: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-stat__trend-content {
display: inline-flex;
align-items: center;
gap: 0.125rem;
}
.eufemia-scope--10_104_0 .dnb-stat__trend--positive {
color: var(--color-success-green);
background-color: var(--color-mint-green-25);
}
.eufemia-scope--10_104_0 .dnb-stat__trend--negative {
color: var(--color-fire-red);
background-color: var(--color-fire-red-8);
}
.eufemia-scope--10_104_0 .dnb-stat__trend--neutral {
color: var(--color-black-80);
background-color: var(--color-mint-green-25);
}
.eufemia-scope--10_104_0 .dnb-stat__rating {
display: inline-flex;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-stat__rating--stars {
height: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-stat__rating--progressive {
height: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-stat__rating-stars {
display: inline-flex;
gap: 0.125rem;
align-items: flex-end;
}
.eufemia-scope--10_104_0 .dnb-stat__rating-star {
position: relative;
display: inline-block;
flex-shrink: 0;
width: 0.75rem;
height: 0.75rem;
}
.eufemia-scope--10_104_0 .dnb-stat__rating-fill {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: var(--dnb-stat-rating-fill, 0%);
overflow: hidden;
pointer-events: none;
}
.eufemia-scope--10_104_0 .dnb-stat__rating-icon {
display: block;
width: 100%;
height: 100%;
}
.eufemia-scope--10_104_0 .dnb-stat__rating-icon path {
fill: currentcolor;
}
.eufemia-scope--10_104_0 .dnb-stat__rating-icon--base {
color: var(--color-black-20);
}
.eufemia-scope--10_104_0 .dnb-stat__rating-icon--active {
color: var(--color-black-80);
}
.eufemia-scope--10_104_0 .dnb-stat__rating-progressive {
display: inline-flex;
align-items: flex-end;
gap: 0.125rem;
}
.eufemia-scope--10_104_0 .dnb-stat__rating-progressive-step {
display: inline-block;
width: 0.25rem;
height: var(--dnb-stat-rating-step-height, 0.25rem);
border-radius: 0.0625rem;
background: linear-gradient(to right, var(--color-black-80) var(--dnb-stat-rating-step-fill, 0%), var(--color-black-20) var(--dnb-stat-rating-step-fill, 0%));
}
/*
* StepIndicator component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-step-indicator {
--step-indicator-trigger-background: var(--color-black-3);
--step-indicator-trigger-content-background: var(--color-white);
--step-indicator-check-bg: var(--color-pistachio);
--step-indicator-check-color: var(--color-success-green);
--step-indicator-current-border: var(--color-black-80);
--padding-top: 0;
--padding-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__sidebar {
display: none;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__list {
padding: 0;
margin: 0;
list-style: none;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__trigger {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__trigger__button {
--button-height: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__trigger__button .dnb-button__text {
margin: 0;
transform: none;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__trigger__button .dnb-button__icon {
--button-icon-margin-top: 0.25rem;
transition: transform 400ms var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-step-indicator__trigger__button .dnb-button__icon {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-step-indicator__trigger__button--expanded .dnb-button__icon {
transform: rotate(180deg);
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item__wrapper {
display: flex;
gap: 1rem;
padding-bottom: 1rem;
position: relative;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item__wrapper::before {
content: "";
display: block;
position: absolute;
top: 0.25rem;
left: 0.71875rem;
width: 0.0625rem;
height: 100%;
background-color: var(--color-black-20);
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item__bullet {
display: flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
width: 1.5rem;
height: 1.5rem;
z-index: 0;
border-radius: 50%;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item__bullet--check, .eufemia-scope--10_104_0 .dnb-step-indicator__item__bullet--empty, .eufemia-scope--10_104_0 .dnb-step-indicator__item__bullet--current {
background-color: var(--step-indicator-check-bg);
border-width: 0.0625rem;
border-style: solid;
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item__bullet--check {
font-size: 0.875rem;
color: var(--step-indicator-check-color);
border-color: var(--step-indicator-check-color);
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item__bullet--empty {
color: var(--color-black-20);
background-color: var(--color-white);
border-color: var(--color-black-20);
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item__bullet--current {
border-width: 0.1875rem;
border-color: var(--step-indicator-current-border);
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item__bullet.dnb-skeleton {
border-width: 0.0625rem;
border-color: var(--color-black-20);
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item-content {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item-content__number {
font-size: var(--font-size-basis);
white-space: nowrap;
margin-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item-content__wrapper {
font-size: var(--font-size-basis);
display: flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item__icon {
opacity: 1;
transition: opacity 400ms ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-step-indicator__item__icon {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item__icon--hidden {
opacity: 0;
transition-timing-function: ease-out;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__item:last-child .dnb-step-indicator__item__wrapper::before {
display: none;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-step-indicator__item__icon {
transition-duration: 1ms !important;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__button {
white-space: normal;
text-align: left;
align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-step-indicator__button.dnb-anchor {
padding: 0;
line-height: inherit;
}
/*
* Switch component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-switch {
--switch-width--medium: 2.5rem;
--switch-height--medium: 1.5rem;
--switch-width--large: 3.25rem;
--switch-height--large: 2rem;
--switch-border-width--medium: 0.0625rem;
--switch-border-width--large: 0.125rem;
display: inline-flex;
flex-direction: column;
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-switch__inner {
display: inline-flex;
flex-direction: column;
justify-content: center;
font-size: var(--font-size-basis);
}
.eufemia-scope--10_104_0 .dnb-switch__shell {
position: relative;
display: flex;
align-items: center;
-webkit-user-select: none;
user-select: none;
}
.eufemia-scope--10_104_0 .dnb-switch--large {
line-height: var(--switch-height--large);
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__shell {
height: var(--switch-height--large);
}
.eufemia-scope--10_104_0 .dnb-switch__row {
display: inline-flex;
align-items: center;
height: var(--switch-height--medium);
}
.eufemia-scope--10_104_0 .dnb-switch__focus, .eufemia-scope--10_104_0 .dnb-switch__button {
position: absolute;
z-index: 4;
border-radius: 50%;
}
.eufemia-scope--10_104_0 .dnb-switch__button {
left: 0;
width: var(--switch-height--medium);
height: var(--switch-height--medium);
background-color: lightgrey;
border: var(--switch-border-width--medium) solid transparent;
transition: transform 160ms ease-out 125ms;
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__button {
width: var(--switch-height--large);
height: var(--switch-height--large);
border-width: var(--switch-border-width--large);
}
.eufemia-scope--10_104_0 .dnb-switch__focus {
display: none;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__focus {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-switch {
/*
* When switched OFF
* aka when the switch is not :checked
*/
}
.eufemia-scope--10_104_0 .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
transform: translateX(0);
transform: translateX(calc(0px - var(--switch-border-width--medium)));
}
.eufemia-scope--10_104_0 .dnb-switch {
/*
* When switched ON
* aka when the switch is :checked
*/
}
.eufemia-scope--10_104_0 .dnb-switch__input:checked ~ .dnb-switch__button {
transform: translateX(1rem);
transform: translateX(calc(var(--switch-width--medium) - 1.5rem + var(--switch-border-width--medium)));
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
transform: translateX(calc(0px - var(--switch-border-width--large)));
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__button {
transform: translateX(calc(var(--switch-width--large) - 2rem + var(--switch-border-width--large)));
}
.eufemia-scope--10_104_0 .dnb-switch__background {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
width: var(--switch-width--medium);
height: calc(var(--switch-height--medium) - 0.5rem);
background-color: grey;
border-radius: calc(var(--switch-height--medium) - 0.25rem);
}
.eufemia-scope--10_104_0 .dnb-switch__background::after {
content: "";
position: absolute;
transition: transform 0.3s ease-out, position 0.3s ease-out;
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__background {
width: var(--switch-width--large);
height: calc(var(--switch-height--large) - 0.75rem);
border-radius: calc(var(--switch-height--large) - 0.375rem);
}
.eufemia-scope--10_104_0 .dnb-switch__input {
opacity: 0;
position: absolute;
left: 0;
right: 0;
z-index: 5;
display: block;
width: var(--switch-width--medium);
height: var(--switch-height--medium);
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__input {
width: var(--switch-width--large);
height: var(--switch-height--large);
}
.eufemia-scope--10_104_0 .dnb-switch__input {
margin: 0;
padding: 0;
border: 0;
}
.eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]) {
cursor: pointer;
}
.eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus, .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {
display: block;
}
.eufemia-scope--10_104_0 .dnb-switch .dnb-form-label {
padding-right: 0.5rem;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-switch__order {
display: inline-flex;
}
.eufemia-scope--10_104_0 .dnb-switch__suffix {
order: 4;
}
.eufemia-scope--10_104_0 .dnb-switch--label-position-left .dnb-switch__suffix {
padding-left: 1rem;
}
.eufemia-scope--10_104_0 .dnb-switch--label-position-left .dnb-switch__order .dnb-switch__inner {
order: 2;
}
.eufemia-scope--10_104_0 .dnb-switch--label-position-left .dnb-switch__order .dnb-form-label {
order: 1;
align-self: center;
}
.eufemia-scope--10_104_0 .dnb-switch--label-position-left .dnb-switch__order .dnb-form-status {
order: 3;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-switch--label-position-right .dnb-switch__order .dnb-switch__inner {
order: 1;
}
.eufemia-scope--10_104_0 .dnb-switch--label-position-right .dnb-switch__order .dnb-form-label {
order: 2;
padding-left: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-switch--label-position-right .dnb-switch__order .dnb-form-status {
order: 3;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-switch.dnb-skeleton .dnb-switch__input[disabled] ~ .dnb-switch__button, .eufemia-scope--10_104_0 .dnb-switch.dnb-skeleton .dnb-switch__input[disabled] ~ .dnb-switch__background::after {
border-color: var(--skeleton-color);
}
.eufemia-scope--10_104_0 .dnb-switch.dnb-skeleton .dnb-switch__input[disabled] ~ .dnb-switch__background {
background-color: var(--skeleton-color);
}
.eufemia-scope--10_104_0 .dnb-switch.dnb-skeleton .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after {
content: "";
border-color: var(--skeleton-color--contrast);
}
.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
display: block;
--border-color: red;
--border-width: var(--focus-ring-width, 0.125rem);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
background-color: tomato;
--border-color: red;
--border-width: var(--focus-ring-width, 0.125rem);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
@supports (-ms-ime-align: auto) {
.eufemia-scope--10_104_0 .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
transform: translateX(0);
}
.eufemia-scope--10_104_0 .dnb-switch__input:checked ~ .dnb-switch__button {
transform: translateX(calc(var(--switch-width--medium) - 1.5rem));
}
}
/*
* Table component
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.eufemia-scope--10_104_0 .dnb-table,
.eufemia-scope--10_104_0 .dnb-table__container {
--table-border-width: 0.0625rem;
--table-border: var(--table-border-width) solid var(--table-border-color);
--table-outline-width: 0.0625rem;
--table-outline: var(--table-outline-width) solid
var(--table-outline-color);
--table-outline-radius: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-table {
display: table;
table-layout: auto;
width: 100%;
margin-top: 0;
margin-bottom: 0.5rem;
border-spacing: 0;
border-collapse: collapse;
}
.eufemia-scope--10_104_0 .dnb-table--fixed {
table-layout: fixed;
width: auto;
}
.eufemia-scope--10_104_0 .dnb-table--no-wrap {
white-space: nowrap;
}
.eufemia-scope--10_104_0 .dnb-table > caption {
position: relative;
caption-side: bottom;
padding: 0.5rem 0 0.5rem 1rem;
font-size: var(--font-size-basis);
background-color: var(--color-white);
text-align: left;
}
.eufemia-scope--10_104_0 .dnb-table > caption::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -0.0625rem;
bottom: 0;
z-index: 1;
pointer-events: none;
top: calc(var(--table-border-width) * -1);
right: 0;
border-top: var(--table-border);
}
.eufemia-scope--10_104_0 .dnb-table > caption:last-child::after {
right: 0;
}
.eufemia-scope--10_104_0 .dnb-table--outline {
position: relative;
clip-path: inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);
z-index: 1;
}
.eufemia-scope--10_104_0 .dnb-table--outline, .eufemia-scope--10_104_0 .dnb-table--outline::after {
border-radius: var(--table-outline-radius);
}
.eufemia-scope--10_104_0 .dnb-table--outline::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
z-index: 3;
border: var(--table-outline);
}
.eufemia-scope--10_104_0 .dnb-table--outline > caption, .eufemia-scope--10_104_0 .dnb-table--outline > caption::after {
border-radius: 0 0 var(--table-outline-radius) var(--table-outline-radius);
}
.eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child,
.eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last {
clip-path: none;
}
.eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::before, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::after, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::before, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::after, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th::before, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th::after, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td::before, .eufemia-scope--10_104_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td::after {
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-table.dnb-skeleton > * {
-webkit-text-fill-color: var(--skeleton-color);
}
.eufemia-scope--10_104_0 .dnb-card--no-inner-space .dnb-table {
--table-outline-color: transparent;
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable {
color: var(--color-sea-green);
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
opacity: 0;
transition: opacity 200ms ease-out, transform 500ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
transition-duration: 0.01ms;
}
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
transition: none;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button {
position: relative;
z-index: 1;
align-items: flex-end;
box-shadow: none;
line-height: inherit;
margin: 0;
padding: 0;
padding-right: 0.5rem;
color: inherit;
font-weight: var(--font-weight-medium);
text-align: inherit;
font-size: inherit;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text {
margin: 0;
font-size: inherit;
line-height: inherit;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
right: 0;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon {
align-self: flex-end;
margin-top: auto;
margin-bottom: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__alignment, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__alignment {
vertical-align: top;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after {
opacity: 1;
color: var(--color-sea-green);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) {
color: var(--color-sea-green);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon {
opacity: 1;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
opacity: 0;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
content: "";
position: absolute;
top: -0.5rem;
bottom: -0.5rem;
left: -1rem;
right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
right: -0.5rem;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, .eufemia-scope--10_104_0 :not(.dnb-table--active) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, .eufemia-scope--10_104_0 :not(.dnb-table--active) html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, .eufemia-scope--10_104_0 :not(.dnb-table--active) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, .eufemia-scope--10_104_0 :not(.dnb-table--active) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon {
opacity: 1;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after {
opacity: 1;
color: inherit;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after {
visibility: visible;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: -0.5rem;
bottom: 0;
right: -0.5rem;
height: inherit;
border-radius: inherit;
outline: none;
}
html[data-whatinput=mouse] .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: -0.5rem;
bottom: 0;
right: -0.5rem;
height: inherit;
border-radius: inherit;
outline: none;
}
html[data-whatinput=touch] .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
content: "";
position: absolute;
top: -0.5rem;
bottom: -0.5rem;
left: -1rem;
right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
right: -0.5rem;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]) {
color: var(--color-sea-green);
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
visibility: hidden;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right], .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable[align=right] {
padding-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button {
flex-direction: row-reverse;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right {
padding-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon {
margin-left: -0.5rem;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text {
padding-right: 0;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after {
right: 0;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after {
opacity: 0;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon {
opacity: 1;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
color: var(--color-sea-green);
opacity: 1;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after {
opacity: 0;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
visibility: visible;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after {
visibility: hidden;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon {
transform: rotate(180deg);
transform-origin: 50% 50%;
}
.eufemia-scope--10_104_0 .dnb-table .dnb-table__th .dnb-table__help-button, .eufemia-scope--10_104_0 .dnb-table > thead > tr > th .dnb-table__help-button {
margin-left: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-table > thead > .dnb-table--no-wrap .dnb-table__sort-button {
white-space: nowrap;
}
/*
* Table component
*
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.eufemia-scope--10_104_0 .dnb-table__th__horizontal {
display: flex;
align-items: flex-end;
}
.eufemia-scope--10_104_0 .dnb-table__th, .eufemia-scope--10_104_0 .dnb-table thead th {
background-color: var(--table-th-background-color);
}
.eufemia-scope--10_104_0 .dnb-table tbody tr:has(th:first-child + td:last-child) th[scope=row] {
--table-th-background-color: initial;
}
.eufemia-scope--10_104_0 .dnb-table tbody tr th[scope=row] + td:last-child {
width: 100%;
}
/*
* Table component
*
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__td::after,
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__th::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -0.0625rem;
bottom: 0;
z-index: 1;
pointer-events: none;
border: var(--table-border);
border-bottom: none;
}
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__td:last-child::after,
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__th:last-child::after {
right: 0;
}
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__td:first-child::after,
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__th:first-child::after {
border-left: none;
}
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__td:last-child::after,
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__th:last-child::after {
border-right: none;
}
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__td::after,
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__th::after {
border-top: none;
}
.eufemia-scope--10_104_0 .dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__td::after,
.eufemia-scope--10_104_0 .dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__th::after {
border-top: var(--table-border);
}
.eufemia-scope--10_104_0 .dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__td::after,
.eufemia-scope--10_104_0 .dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__th::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -0.0625rem;
bottom: 0;
z-index: 1;
pointer-events: none;
border-top: var(--table-border);
}
.eufemia-scope--10_104_0 .dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__td:last-child::after,
.eufemia-scope--10_104_0 .dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__th:last-child::after {
right: 0;
}
.eufemia-scope--10_104_0 .dnb-table {
/* stylelint-disable */
}
.eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child, .eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::after, .eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child, .eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::before, .eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::after, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::after, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::after, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::after, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child::before, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child::after {
border-top-left-radius: var(--table-outline-radius);
}
.eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child, .eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::after, .eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child, .eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::before, .eufemia-scope--10_104_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::after, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::after, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::after, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::after, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child::before, .eufemia-scope--10_104_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child::after {
border-top-right-radius: var(--table-outline-radius);
}
.eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child,
.eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last {
clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
}
.eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::after, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::after, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::after, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::after {
border-bottom-left-radius: var(--table-outline-radius);
}
.eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::after, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::after, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::after, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::before, .eufemia-scope--10_104_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::after {
border-bottom-right-radius: var(--table-outline-radius);
}
.eufemia-scope--10_104_0 .dnb-table {
/* stylelint-enable */
}
.eufemia-scope--10_104_0 .dnb-table__td--no-spacing,
.eufemia-scope--10_104_0 .dnb-table td.dnb-table__td--no-spacing {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-table__td--spacing-horizontal,
.eufemia-scope--10_104_0 .dnb-table td.dnb-table__td--spacing-horizontal {
padding-top: 0;
padding-bottom: 0;
}
/*
* Table component
*
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.eufemia-scope--10_104_0 .dnb-table > tbody > tr, .eufemia-scope--10_104_0 .dnb-table .dnb-table__tr, .eufemia-scope--10_104_0 .dnb-table .dnb-table__tr--even {
background-color: var(--color-black-3);
}
.eufemia-scope--10_104_0 .dnb-table > tbody > tr:not(.dnb-table__tr--even):nth-of-type(2n), .eufemia-scope--10_104_0 .dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n), .eufemia-scope--10_104_0 .dnb-table .dnb-table__tr--odd {
background-color: var(--color-white);
}
/*
* Table component
*
*/
.eufemia-scope--10_104_0 .dnb-table thead th, .eufemia-scope--10_104_0 .dnb-table tbody td, .eufemia-scope--10_104_0 .dnb-table__th, .eufemia-scope--10_104_0 .dnb-table__td {
position: relative;
border-spacing: 0;
word-break: keep-all;
}
/*
* Table component
*
*/
.eufemia-scope--10_104_0 .dnb-table tr.sticky {
position: sticky;
z-index: 4;
transform: translate3d(0, var(--table-offset, 0), 0);
}
.eufemia-scope--10_104_0 .dnb-table tr.sticky.css-position {
top: var(--table-top, 0);
}
.eufemia-scope--10_104_0 .dnb-table tr.sticky.is-sticky th::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6px;
box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
clip-path: inset(6px 0 -48px 0);
}
/*
* Table component
*
*/
.eufemia-scope--10_104_0 .dnb-table__container {
position: relative;
}
.eufemia-scope--10_104_0 .dnb-table__container::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
z-index: 3;
border: var(--table-outline);
}
.eufemia-scope--10_104_0 .dnb-table__container, .eufemia-scope--10_104_0 .dnb-table__container::after {
border-radius: var(--table-outline-radius);
}
.eufemia-scope--10_104_0 .dnb-table__container, .eufemia-scope--10_104_0 .dnb-table__container__body, .eufemia-scope--10_104_0 .dnb-table__container__head, .eufemia-scope--10_104_0 .dnb-table__container__foot {
display: flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-table__container__body .dnb-table:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-table__container__body .dnb-table__size--large .dnb-table__th {
padding-top: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-table__container__body .dnb-table {
position: relative;
}
.eufemia-scope--10_104_0 .dnb-table__container__body .dnb-table::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
border-bottom: var(--table-border);
}
.eufemia-scope--10_104_0 .dnb-table__container__body .dnb-table {
/* stylelint-disable */
}
.eufemia-scope--10_104_0 .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after,
.eufemia-scope--10_104_0 .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after,
.eufemia-scope--10_104_0 .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after,
.eufemia-scope--10_104_0 .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after {
border-top: none;
}
.eufemia-scope--10_104_0 .dnb-table__container__body .dnb-table {
/* stylelint-enable */
}
.eufemia-scope--10_104_0 .dnb-table__container__head {
padding: 2rem 1rem 0;
}
.eufemia-scope--10_104_0 .dnb-table__container__head--empty {
padding: 0;
min-height: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*=space__top]) {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-table__container__foot {
padding: 1rem;
padding-bottom: 1.25rem;
}
.eufemia-scope--10_104_0 .dnb-table__container__foot--empty {
padding: 0;
min-height: 1rem;
}
.eufemia-scope--10_104_0 .dnb-table__container .dnb-table__scroll-view {
clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
}
@supports (-webkit-appearance: none) and (not (-moz-appearance: meterbar)) {
.eufemia-scope--10_104_0 .dnb-table__container::after {
bottom: calc(var(--table-outline-width) * -1);
}
.eufemia-scope--10_104_0 .dnb-table__container:has(.dnb-table__container__foot--empty)::after {
bottom: 0;
}
}
.eufemia-scope--10_104_0 .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
overflow: visible;
}
.eufemia-scope--10_104_0 .dnb-card .dnb-table__container {
width: 100%;
}
/*
* Table component
*
*/
.eufemia-scope--10_104_0 .dnb-table {
--table-accordion-background: var(--color-white);
--table-accordion-header-background: var(--color-white);
--table-accordion-border-width: 0.0625rem;
--table-accordion-border-color: var(--color-black-20);
--table-accordion-border: var(--table-accordion-border-width) solid
var(--table-accordion-border-color);
--table-accordion-icon-color: var(--color-sea-green);
--table-accordion-icon-color--active: var(--color-emerald-green);
--table-accordion-icon-color--disabled: var(--color-sea-green-30);
--table-accordion-outline-color: var(--color-emerald-green);
--table-accordion-outline-width: var(--focus-ring-width);
--table-accordion-outline-background--active: var(--color-pistachio);
}
.eufemia-scope--10_104_0 .dnb-table__th.dnb-table__th__button-icon.dnb-table__th {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-table__th.dnb-table__th__button-icon,
.eufemia-scope--10_104_0 .dnb-table__th.dnb-table__th__button-icon div {
width: 3.5rem;
}
.eufemia-scope--10_104_0 .dnb-table__size--medium .dnb-table__th.dnb-table__th__button-icon,
.eufemia-scope--10_104_0 .dnb-table__size--medium .dnb-table__th.dnb-table__th__button-icon div {
width: 3rem;
}
.eufemia-scope--10_104_0 .dnb-table__size--small .dnb-table__th.dnb-table__th__button-icon,
.eufemia-scope--10_104_0 .dnb-table__size--small .dnb-table__th.dnb-table__th__button-icon div {
width: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-table__th.dnb-table__th__button-icon,
.eufemia-scope--10_104_0 .dnb-table__th.dnb-table__th__button-icon div {
text-indent: -300vw;
}
.eufemia-scope--10_104_0 .dnb-table__td.dnb-table__td__button-icon.dnb-table__td {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-table__td.dnb-table__td__button-icon {
-webkit-user-select: none;
user-select: none;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable .dnb-table__button {
display: flex;
justify-content: center;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable .dnb-table__button .dnb-icon {
color: var(--table-accordion-icon-color);
transition: transform 500ms var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-table__tr--clickable .dnb-table__button .dnb-icon {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr--no-animation .dnb-table__button .dnb-icon, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-table__tr--clickable .dnb-table__button .dnb-icon {
transition: none !important;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable, .eufemia-scope--10_104_0 .dnb-table__tr__accordion-content {
position: relative;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr--expanded, .eufemia-scope--10_104_0 .dnb-table__tr__accordion-content {
z-index: 3;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable:active, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-table__tr--clickable:focus, .eufemia-scope--10_104_0 .dnb-table__tr--clickable:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
z-index: 5;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr--expanded .dnb-table__button .dnb-icon {
transform: rotate(180deg);
}
.eufemia-scope--10_104_0 .dnb-table--border .dnb-table__tr--clickable.dnb-table__tr--expanded td::after {
border-bottom: none;
border-left: none;
border-right: none;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) {
outline: none;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td::before {
content: "";
position: absolute;
z-index: 3;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
border: var(--table-accordion-outline-width) solid transparent;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before {
border-left: none;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:last-of-type)::before {
border-right: none;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td::before {
border-color: var(--table-accordion-outline-color);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__button-icon .dnb-icon {
color: var(--table-accordion-icon-color--active);
}
.eufemia-scope--10_104_0 .dnb-table--border tbody .dnb-table__tr--clickable:not(.dnb-table__tr--expanded):not(.dnb-table__tr--last) .dnb-table__td::before {
bottom: calc(var(--table-border-width) * -1);
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
background-color: var(--color-white);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td::before {
border-color: var(--focus-ring-color);
border-width: var(--focus-ring-width);
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before {
left: 0;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:last-of-type::before {
right: 0;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before,
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before {
border-color: var(--table-accordion-outline-color);
border-width: var(--table-accordion-border-width);
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td {
background-color: var(--table-accordion-outline-background--active);
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__button-icon .dnb-icon {
color: var(--table-accordion-icon-color--active);
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td {
background-color: var(--table-accordion-header-background);
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before {
border: none;
border-top: var(--table-accordion-border);
}
html:not([data-whatinput=keyboard]) .eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) {
background-color: var(--table-accordion-header-background);
}
html:not([data-whatinput=keyboard]) .eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before {
border: none;
border-top: var(--table-accordion-border);
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable.dnb-table__tr--disabled .dnb-table__td__button-icon .dnb-icon {
color: var(--table-accordion-icon-color--disabled);
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content__inner {
overflow: hidden;
will-change: height;
transition: height 400ms var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content__inner {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content__inner__spacing {
padding: 1rem;
transform: translateY(-10px);
transition: transform 500ms var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content__inner__spacing {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content__inner {
position: relative;
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
transform: translateY(0);
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
transition: none;
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
background-color: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content--expanded + .dnb-table__tr--clickable .dnb-table__td::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -0.0625rem;
bottom: 0;
z-index: 1;
pointer-events: none;
border-top: var(--table-accordion-border);
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content--expanded + .dnb-table__tr--clickable .dnb-table__td:last-child::after {
right: 0;
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content--single > td {
padding: 0 !important;
width: calc(100% - 3.5rem);
}
.eufemia-scope--10_104_0 .dnb-table__size--medium .dnb-table__tr__accordion-content--single > td {
width: calc(100% - 3rem);
}
.eufemia-scope--10_104_0 .dnb-table__size--small .dnb-table__tr__accordion-content--single > td {
width: calc(100% - 2.5rem);
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content--single > td::before {
content: "";
position: absolute;
top: auto;
left: 0;
right: 0;
bottom: calc(var(--table-accordion-border-width) * -1);
pointer-events: none;
border-bottom: var(--table-accordion-border);
}
.eufemia-scope--10_104_0 .dnb-table--outline .dnb-table__tr__accordion-content--single:last-of-type td::before {
border-bottom: none;
}
.eufemia-scope--10_104_0 .dnb-table--border .dnb-table__tr__accordion-content--single td::after {
border-top: none;
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content--single > td.dnb-table__td {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl,
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl dt {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-table__tr__accordion-content.dnb-table__tr .dnb-table__td {
background-color: var(--table-accordion-background);
/**
* Safari on iOS and macOS has problems on animating when vertical-align is baseline.
* What happens is that the td is not 0, even the content inside is 0. With vertical top, we omit that.
* But we do not need baseline in this tr > td, so we reset it.
*/
vertical-align: top;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable:not(.dnb-table__tr--disabled) {
cursor: pointer;
}
.eufemia-scope--10_104_0 .dnb-table__tr--clickable:has(.dnb-table + .dnb-table__tr__accordion-content--animating) {
-webkit-user-select: none;
user-select: none;
}
.eufemia-scope--10_104_0 .dnb-table__td-wrapper {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-spacing .dnb-table p,
.eufemia-scope--10_104_0 .dnb-spacing .dnb-table ul,
.eufemia-scope--10_104_0 .dnb-spacing .dnb-table ol,
.eufemia-scope--10_104_0 .dnb-spacing .dnb-table dl,
.eufemia-scope--10_104_0 .dnb-spacing .dnb-table pre {
margin-top: 0;
margin-bottom: 0;
}
/*
* Tabs component
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.eufemia-scope--10_104_0 .dnb-tabs {
--tablist-border-color--default: grey;
--tab-title-font-weight: var(--font-weight-regular);
--tab-title-font-size: var(--font-size-basis);
--tab-title-font-color: dimgray;
--tab-title-background--hover: darkgrey;
--tab-title-color--hover: inherit;
--tab-title-border--hover: black;
--tab-title-background--disabled: inherit;
--tab-title-color--disabled: lightgrey;
--tab-title-border--active-selected: black;
--tab-title-color--active-selected: black;
--tab-title-font-weight--selected: var(--font-weight-medium);
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs {
position: relative;
z-index: 1;
display: flex;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs, .eufemia-scope--10_104_0 .dnb-tabs__tabs.dnb-section--spacing {
padding-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist {
display: flex;
flex: 0 1 auto;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist:focus {
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist:focus {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist:focus {
border-radius: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist {
overflow-x: auto;
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist {
scroll-behavior: auto;
}
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist {
overscroll-behavior: contain;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist {
scroll-behavior: smooth;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: auto;
scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
}
@supports not (scrollbar-color: auto) {
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical {
width: var(--scrollbar-track-width, 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal {
height: var(--scrollbar-track-width, 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist::-webkit-scrollbar {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
background-color: var(--scrollbar-track-color, #eee);
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color, #888);
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color, #666);
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
}
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist {
/* Hide scrollbar for Chrome, Safari */
/* stylelint-disable-next-line */
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist::-webkit-scrollbar {
display: none;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs__tablist {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs--left .dnb-tabs__tabs__tablist {
justify-content: flex-start;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs--right .dnb-tabs__tabs__tablist {
flex: 1;
justify-content: flex-end;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs--center .dnb-tabs__tabs__tablist {
flex: 1;
justify-content: center;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs::before {
content: "";
position: absolute;
z-index: -1;
bottom: 0;
width: 100%;
height: 1px;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs--no-border::before {
content: none;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs--breakout::before {
left: -100vw;
width: 100vw;
}
.eufemia-scope--10_104_0 .dnb-tabs__tabs:not(.dnb-section)::before {
background-color: var(--tablist-border-color--default);
box-shadow: 100vw 0 0 0 var(--tablist-border-color--default);
}
.eufemia-scope--10_104_0 .dnb-tabs__scroll-nav-button {
position: absolute;
z-index: 2;
right: -2px;
}
.eufemia-scope--10_104_0 .dnb-tabs__scroll-nav-button:first-of-type {
left: -2px;
right: auto;
}
.eufemia-scope--10_104_0 .dnb-tabs__scroll-nav-button {
display: none;
opacity: 0;
pointer-events: none;
transition: opacity 600ms ease-out;
}
.eufemia-scope--10_104_0 .dnb-tabs__scroll-nav-button--visible {
display: flex;
pointer-events: initial;
opacity: 1;
}
.eufemia-scope--10_104_0 .dnb-tabs__scroll-nav-button--hide {
pointer-events: none;
opacity: 0 !important;
}
.eufemia-scope--10_104_0 .dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type {
border-radius: 0 50% 50% 0;
}
.eufemia-scope--10_104_0 .dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type {
border-radius: 50% 0 0 50%;
}
.eufemia-scope--10_104_0 .dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus {
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-tabs__button, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button {
position: relative;
z-index: 1;
}
.eufemia-scope--10_104_0 .dnb-tabs__button:has(.dnb-badge), .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:has(.dnb-badge) {
margin-right: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-tabs__button, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button {
user-select: none;
/* stylelint-disable-next-line */
-webkit-user-select: none;
margin: 0;
padding: 0 0.125rem; /* 1/16*4 */
background-color: transparent;
border-bottom: 1px solid transparent;
cursor: pointer;
outline: none;
border: none;
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
-webkit-text-decoration: none;
text-decoration: none;
white-space: nowrap;
transition: margin 400ms ease-out;
}
.eufemia-scope--10_104_0 .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button__title {
font-weight: var(--tab-title-font-weight);
font-size: var(--tab-title-font-size);
text-align: center;
display: block;
color: var(--tab-title-font-color);
padding: 0.5rem 0 0.25rem;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tabs__button__title:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button__title:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tabs__button__title:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button__title:hover:not([disabled]) {
color: var(--tab-title-color--hover);
}
.eufemia-scope--10_104_0 .dnb-tabs__button__title .dnb-icon, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button__title .dnb-icon {
font-size: var(--font-size-small);
transform: translateY(-0.125rem);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tabs__button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tabs__button:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:hover:not([disabled]) {
background-color: var(--tab-title-background--hover);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tabs__button:hover:not([disabled])::after, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:hover:not([disabled])::after {
height: 2px;
border-radius: 2px;
background-color: var(--tab-title-border--hover);
}
.eufemia-scope--10_104_0 .dnb-tabs__button .dnb-dummy, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button .dnb-dummy {
display: flex;
flex-direction: column;
height: 0;
visibility: hidden;
overflow: hidden;
}
.eufemia-scope--10_104_0 .dnb-tabs__button .dnb-dummy, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button .dnb-dummy {
margin-top: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-tabs__button::after, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 1px;
}
.eufemia-scope--10_104_0 .dnb-tabs__button[disabled], .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button[disabled] {
background-color: var(--tab-title-background--disabled);
}
.eufemia-scope--10_104_0 .dnb-tabs__button[disabled] .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button[disabled] .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs__button__title {
color: var(--tab-title-color--disabled);
}
.eufemia-scope--10_104_0 .dnb-tabs__button span[hidden], .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button span[hidden] {
font-weight: var(--tab-title-font-weight--selected);
}
.eufemia-scope--10_104_0 .dnb-tabs__button, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button {
/* stylelint-disable no-descending-specificity */
}
.eufemia-scope--10_104_0 .dnb-tabs__button:focus::before, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:focus::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: -0.5rem;
bottom: 0;
right: -0.5rem;
height: inherit;
border-radius: inherit;
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-tabs__button:focus::before, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:focus::before {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-tabs__button:focus, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:focus {
overflow: visible;
}
.eufemia-scope--10_104_0 .dnb-tabs__button:focus::before, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:focus::before {
top: 0.5rem;
left: -0.375rem;
right: -0.375rem;
bottom: 0.5rem;
border-radius: 1.5rem;
background-color: var(--tab-focus-background-color, none);
}
.eufemia-scope--10_104_0 .dnb-tabs__button:not([disabled]):active::after, .eufemia-scope--10_104_0 .dnb-tabs__button:not([disabled]).selected::after, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:not([disabled]):active::after, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:not([disabled]).selected::after {
height: 2px;
border-radius: 2px;
background-color: var(--tab-title-border--active-selected);
}
.eufemia-scope--10_104_0 .dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs__button__title {
color: var(--tab-title-color--active-selected);
}
.eufemia-scope--10_104_0 .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs__button__title {
font-weight: var(--tab-title-font-weight--selected);
}
.eufemia-scope--10_104_0 .dnb-tabs__button, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs__button {
/* stylelint-enable no-descending-specificity */
}
.eufemia-scope--10_104_0 .dnb-tabs__button__snap {
display: flex;
padding: 0 1rem 0 1.5rem;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-tabs__button__snap {
padding: 0 1rem;
}
}
.eufemia-scope--10_104_0 .dnb-tabs__button__snap:first-of-type {
padding-left: 0;
}
.eufemia-scope--10_104_0 .dnb-tabs__button__snap:last-of-type {
padding-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-tabs__button__snap {
will-change: padding;
transition: padding 1s var(--easing-default);
}
.eufemia-scope--10_104_0 .dnb-tabs__button__snap:has(.dnb-badge) {
margin-right: -0.5rem;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus {
margin-left: 0.5rem;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-tabs__button__snap:last-of-type.focus {
/* stylelint-disable */
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus {
margin-right: 0.5rem;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-tabs__button__snap:last-of-type.focus {
/* stylelint-enable */
}
.eufemia-scope--10_104_0 .dnb-tabs__cached {
opacity: 1;
transition: opacity 1s var(--easing-default);
}
.eufemia-scope--10_104_0 .dnb-tabs__cached--hidden {
opacity: 0;
visibility: hidden;
height: 0 !important;
overflow: hidden;
}
.eufemia-scope--10_104_0 .dnb-tabs__cached--hidden * {
height: 0 !important;
}
.eufemia-scope--10_104_0 .dnb-tabs {
/* stylelint-disable */
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-tabs .dnb-tabs__cached, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-tabs .dnb-tabs__button, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-tabs .dnb-tabs__button__snap, html[data-visual-test] .eufemia-scope--10_104_0 .dnb-tabs .dnb-tabs__scroll-nav-button {
transition: none !important;
}
.eufemia-scope--10_104_0 .dnb-tabs {
/* stylelint-enable */
}
.eufemia-scope--10_104_0 .dnb-tabs__content {
padding-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-tabs__content:focus {
position: relative;
}
.eufemia-scope--10_104_0 .dnb-tabs__content:focus::before {
content: "";
position: absolute;
z-index: calc(var(--section-z-index) + 1);
pointer-events: none;
top: 0.125rem;
bottom: -0.5rem;
left: -0.5rem;
right: -0.5rem;
max-width: 100vw;
border-radius: 0.5rem;
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-tabs__content:focus::before {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-tabs__button__title > .dnb-badge {
position: absolute;
top: auto;
margin-left: 0.25rem;
}
/*
* Tag component
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
/*
* Tag mixins
*
*/
.eufemia-scope--10_104_0 .dnb-tag {
--tag-icon-color: var(--color-sea-green);
--tag-icon-border-color: var(--tag-icon-color);
}
.eufemia-scope--10_104_0 .dnb-tag.dnb-button {
-webkit-appearance: none;
appearance: none;
background-color: var(--color-black-8);
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-tag.dnb-button .dnb-button__text {
font-size: var(--font-size-x-small);
transform: none;
}
.eufemia-scope--10_104_0 .dnb-tag:not(.dnb-tag--interactive) {
-webkit-user-select: unset;
user-select: unset;
cursor: unset;
}
.eufemia-scope--10_104_0 .dnb-tag:not(.dnb-tag--interactive) .dnb-button__text {
cursor: text;
}
.eufemia-scope--10_104_0 .dnb-tag--interactive.dnb-button {
color: var(--color-sea-green);
background-color: var(--color-pistachio);
--border-color: var(--color-sea-green);
--border-width: 0.0625rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--interactive.dnb-button:focus-visible[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--interactive.dnb-button:focus-visible:not([disabled]) {
outline: none;
--border-color: var(--color-emerald-green);
--border-width: var(--focus-ring-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
--tag-icon-color: var(--color-emerald-green);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--interactive.dnb-button:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
--border-color: var(--color-emerald-green);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
--tag-icon-color: var(--color-emerald-green);
}
.eufemia-scope--10_104_0 .dnb-tag--interactive.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--interactive.dnb-button:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-tag--interactive.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--interactive.dnb-button:active:not([disabled]) {
background-color: var(--color-mint-green-50);
--border-color: transparent;
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
--tag-icon-color: var(--color-sea-green);
}
.eufemia-scope--10_104_0 .dnb-tag--interactive.dnb-button[disabled] {
color: var(--color-sea-green-30);
background-color: var(--color-white);
--border-color: var(--color-sea-green-30);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button, .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button {
padding-right: 0.25rem;
--tag-icon-fill: var(--tag-icon-fill-color);
--tag-icon-stroke: var(--tag-icon-stroke-color);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button:focus-visible[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button:focus-visible[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button:focus-visible:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button:focus-visible:not([disabled]) {
--tag-icon-fill: var(--tag-icon-stroke-color);
--tag-icon-stroke: var(--tag-icon-fill-color);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button:hover:not([disabled]) {
--tag-icon-fill: var(--tag-icon-stroke-color);
--tag-icon-stroke: var(--tag-icon-fill-color);
}
.eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button:active[disabled], .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button:active:not([disabled]), .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button:active:not([disabled]) {
--tag-icon-fill: var(--tag-icon-stroke-color);
--tag-icon-stroke: var(--tag-icon-fill-color);
}
.eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button svg, .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button svg {
border-radius: 50%;
outline: 0.0625rem solid var(--tag-icon-border-color);
outline-offset: -0.0625rem;
}
.eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path, .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path {
fill: var(--tag-icon-fill);
}
.eufemia-scope--10_104_0 .dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path, .eufemia-scope--10_104_0 .dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path {
stroke: var(--tag-icon-stroke);
}
.eufemia-scope--10_104_0 .dnb-tag--addable {
--tag-icon-fill-color: var(--tag-icon-color);
--tag-icon-stroke-color: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-tag--addable svg {
transform: rotate(45deg);
}
.eufemia-scope--10_104_0 .dnb-tag--removable {
--tag-icon-fill-color: var(--color-white);
--tag-icon-stroke-color: var(--tag-icon-color);
}
.eufemia-scope--10_104_0 .dnb-tag__group {
display: inline-flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/**
* Styles for TermDefinition
*/
.eufemia-scope--10_104_0 .dnb-term-definition {
--inner-space: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-term-definition__trigger:not(:hover) {
color: inherit;
}
.eufemia-scope--10_104_0 .dnb-term-definition__trigger:not(:focus-visible):not(:active):not(:hover):not(.dnb-anchor--hover) {
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: var(--anchor-color);
text-decoration-thickness: 2.5px;
text-underline-offset: 0.3125em;
}
.eufemia-scope--10_104_0 .dnb-term-definition .dnb-popover__title strong::first-letter {
text-transform: uppercase;
}
/*
* Textarea component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-textarea {
--textarea-border-radius: 0.25rem;
--textarea-rows: 2;
--textarea-background-color: var(--color-white);
--textarea-placeholder-color: grey;
--textarea-size--small: 0.25rem;
--textarea-size--medium: 0.5rem;
--textarea-size--large: 0.75rem;
display: inline-flex;
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-textarea__inner {
display: inline-flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-textarea__shell {
display: inline-flex;
position: relative;
font-size: var(--font-size-basis);
}
.eufemia-scope--10_104_0 .dnb-textarea__shell::after {
--size: 0.5rem;
--bg-size: cover;
--bg-pos: 0;
pointer-events: none;
position: absolute;
z-index: 2;
bottom: 0;
right: 0;
width: var(--size);
height: var(--size);
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-width=".5" d="m1 7 6-6M3.5 7 7 3.5M6 7l1-1"/></svg>');
background-size: var(--bg-size);
background-position: var(--bg-pos) var(--bg-pos);
background-color: var(--textarea-background-color);
}
.eufemia-scope--10_104_0 .dnb-textarea__resize--medium .dnb-textarea__shell::after {
content: "";
}
.eufemia-scope--10_104_0 .dnb-textarea__resize--large .dnb-textarea__shell::after {
content: "";
--size: 1rem;
--bg-size: 60%;
--bg-pos: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-textarea__autoresize .dnb-textarea__shell::after {
content: none;
}
.eufemia-scope--10_104_0 .dnb-textarea__state {
position: absolute;
z-index: 1;
top: calc(var(--textarea-size-vertical) * -1);
left: calc(var(--textarea-size-horizontal) * -1);
bottom: calc(var(--textarea-size-vertical) * -1);
right: calc(var(--textarea-size-vertical) * -1);
background-color: var(--textarea-background-color);
--border-color: var(--textarea-border-color);
--border-width: var(--textarea-border-width);
box-shadow: var(--textarea-border-inset, inset) 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
border-radius: var(--textarea-border-radius);
}
.eufemia-scope--10_104_0 .dnb-textarea__row {
display: inline-flex;
margin: var(--textarea-size-vertical) var(--textarea-size-vertical) var(--textarea-size-vertical) var(--textarea-size-horizontal);
}
.eufemia-scope--10_104_0 .dnb-textarea__suffix.dnb-suffix {
padding-left: 1rem;
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea {
position: relative;
z-index: 2;
width: 100%;
cursor: auto;
border: none;
margin: 0;
padding: 0;
outline: none;
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
color: var(--textarea-color, var(--color-black));
background-color: var(--textarea-background-color, var(--color-white));
overflow-y: auto;
overscroll-behavior: contain;
}
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-textarea__textarea {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html:not([data-visual-test]) .eufemia-scope--10_104_0 .dnb-textarea__textarea {
scroll-behavior: auto;
}
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: auto;
scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
}
@supports not (scrollbar-color: auto) {
.eufemia-scope--10_104_0 .dnb-textarea__textarea::-webkit-scrollbar:vertical {
width: var(--scrollbar-track-width, 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea::-webkit-scrollbar:horizontal {
height: var(--scrollbar-track-width, 0.5rem);
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea::-webkit-scrollbar {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
background-color: var(--scrollbar-track-color, #eee);
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color, #888);
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color, #666);
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea::-webkit-scrollbar-thumb {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
}
}
@-moz-document url-prefix() {
.eufemia-scope--10_104_0 .dnb-textarea__textarea {
overflow-x: clip !important;
}
}
.eufemia-scope--10_104_0 .dnb-textarea__placeholder {
pointer-events: none;
position: absolute;
z-index: 3;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--textarea-rows, 2);
cursor: auto;
border: none;
margin: 0;
padding: 0;
outline: none;
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
color: var(--textarea-color, var(--color-black));
background-color: var(--textarea-background-color, var(--color-white));
color: var(--textarea-placeholder-color);
background-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea, .eufemia-scope--10_104_0 .dnb-textarea__placeholder {
text-align: left;
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea:-webkit-autofill {
box-shadow: 0 0 0 10em var(--textarea-background-color, var(--color-white)) inset;
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea:autofill {
box-shadow: 0 0 0 10em var(--textarea-background-color, var(--color-white)) inset;
}
.eufemia-scope--10_104_0 .dnb-textarea__align--right .dnb-textarea__textarea, .eufemia-scope--10_104_0 .dnb-textarea__align--right .dnb-textarea__placeholder {
text-align: right;
}
.eufemia-scope--10_104_0 .dnb-textarea, .eufemia-scope--10_104_0 .dnb-textarea__size--small {
--textarea-size-vertical: var(--textarea-size--small);
--textarea-size-horizontal: 1rem;
}
.eufemia-scope--10_104_0 .dnb-textarea__size--medium {
--textarea-size-vertical: var(--textarea-size--medium);
--textarea-size-horizontal: 1rem;
}
.eufemia-scope--10_104_0 .dnb-textarea__size--large {
--textarea-size-vertical: var(--textarea-size--large);
--textarea-size-horizontal: 1rem;
}
.eufemia-scope--10_104_0 .dnb-textarea__autoresize .dnb-textarea__textarea {
resize: none;
}
.eufemia-scope--10_104_0 .dnb-textarea--disabled .dnb-textarea__textarea, .eufemia-scope--10_104_0 .dnb-textarea__textarea[disabled] {
-webkit-user-select: none;
user-select: none;
}
.eufemia-scope--10_104_0 .dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar, .eufemia-scope--10_104_0 .dnb-textarea__textarea[disabled]::-webkit-scrollbar {
width: 0;
}
.eufemia-scope--10_104_0 .dnb-textarea__inner > .dnb-form-status {
order: 2;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label {
margin-top: var(--textarea-size-vertical);
}
.eufemia-scope--10_104_0 .dnb-textarea--vertical {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-textarea:not(.dnb-textarea--vertical)[class*=__status] {
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-textarea:not(.dnb-textarea--vertical)[class*=__status] > .dnb-form-label {
margin-top: 0.25rem;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-textarea {
flex-wrap: wrap;
}
.eufemia-scope--10_104_0 .dnb-textarea > .dnb-form-label {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
}
.eufemia-scope--10_104_0 .dnb-textarea--stretch {
display: flex;
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-textarea--stretch .dnb-textarea__inner {
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-textarea--stretch .dnb-textarea__shell, .eufemia-scope--10_104_0 .dnb-textarea--stretch .dnb-textarea__inner, .eufemia-scope--10_104_0 .dnb-textarea--stretch .dnb-textarea__textarea {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-textarea--stretch .dnb-form-label + .dnb-textarea__inner {
width: auto;
}
.eufemia-scope--10_104_0 .dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-textarea--keep-placeholder.dnb-textarea--focus .dnb-textarea__placeholder {
--textarea-placeholder-color: var(--textarea-placeholder-color--focus);
display: block;
}
.eufemia-scope--10_104_0 .dnb-form-row--horizontal .dnb-textarea--stretch {
width: 100%;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-textarea {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-textarea > .dnb-form-label {
margin-bottom: 0.5rem;
}
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-textarea__textarea {
caret-color: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-textarea.dnb-skeleton .dnb-textarea__inner {
border-radius: var(--textarea-border-radius);
}
.eufemia-scope--10_104_0 .dnb-textarea.dnb-skeleton .dnb-textarea__state, .eufemia-scope--10_104_0 .dnb-textarea.dnb-skeleton .dnb-textarea__textarea {
visibility: hidden;
}
/*
* Timeline component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-timeline {
display: flex;
flex-direction: column;
padding: 0;
list-style: none;
}
.eufemia-scope--10_104_0 .dnb-timeline__item__label {
display: flex;
align-items: center;
padding: 0;
text-align: left;
}
.eufemia-scope--10_104_0 .dnb-timeline__item__label__icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
height: auto;
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-timeline__item__label__title {
cursor: text;
}
.eufemia-scope--10_104_0 .dnb-timeline__item__content {
padding-bottom: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-timeline__item__content__subtitle {
cursor: text;
font-size: var(--font-size-x-small);
font-weight: var(--font-weight-basis);
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-timeline__item__content__info {
padding-top: var(--spacing-x-small);
}
/*
* ToggleButton component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-toggle-button {
display: inline-flex;
align-items: center;
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-toggle-button__inner {
display: inline-flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__shell {
position: relative;
left: 0;
-webkit-user-select: none;
user-select: none;
}
.eufemia-scope--10_104_0 .dnb-toggle-button--vertical {
flex-direction: column;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__component {
padding-right: 0.5rem;
display: inline-flex;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button.dnb-button--has-text {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox {
margin-left: -0.5rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__input {
pointer-events: none;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__button {
display: unset;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__focus, .eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__button {
width: calc(var(--checkbox-width--medium) - 0.5rem);
height: calc(var(--checkbox-height--medium) - 0.5rem);
border-width: 0.0625rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__dot {
width: calc(var(--checkbox-width--medium) - 1rem);
height: calc(var(--checkbox-height--medium) - 1rem);
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__gfx {
width: calc(var(--checkbox-width--medium) - 0.75rem);
height: calc(var(--checkbox-height--medium) - 0.75rem);
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-radio {
margin-left: -0.5rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-radio__input {
pointer-events: none;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-radio__focus, .eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-radio__button {
width: calc(var(--radio-width--medium) - 0.5rem);
height: calc(var(--radio-height--medium) - 0.5rem);
border-width: 0.0625rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-radio__dot {
width: calc(var(--radio-width--medium) - 1rem);
height: calc(var(--radio-height--medium) - 1rem);
}
.eufemia-scope--10_104_0 :not(.dnb-toggle-button-group) > .dnb-form-label + .dnb-toggle-button {
vertical-align: top;
}
.eufemia-scope--10_104_0 .dnb-toggle-button .dnb-form-status {
order: 2;
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button .dnb-form-label {
margin-right: 1rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group {
--toggle-button-group-column-gap: 1rem;
--toggle-button-group-row-gap: 1rem;
display: inline-flex;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group, .eufemia-scope--10_104_0 .dnb-toggle-button-group__fieldset, .eufemia-scope--10_104_0 .dnb-toggle-button-group__shell {
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group fieldset:not([class*=space__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group fieldset:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group fieldset:not([class*=space__left]) {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group fieldset:not([class*=space__right]) {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group fieldset {
padding: 0;
border: none;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group--column .dnb-toggle-button {
display: flex;
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group .dnb-toggle-button:last-of-type {
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group__shell {
display: flex;
flex-direction: column;
row-gap: var(--toggle-button-group-row-gap);
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group__shell__children {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: var(--toggle-button-group-column-gap);
row-gap: var(--toggle-button-group-row-gap);
order: 1;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group__shell__children--row {
flex-direction: row;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group__shell__children--column {
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group__shell > .dnb-form-status {
order: 2;
transform: translateY(-0.5rem);
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label {
margin-top: 0.5rem;
align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group .dnb-alignment-helper {
line-height: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group__suffix {
font-size: var(--font-size-basis);
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-form-label + .dnb-toggle-button {
transform: translateY(-0.5rem);
}
}
/*
* Tooltip component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 {
--tooltip-z-index: 1100;
}
.eufemia-scope--10_104_0 .dnb-tooltip {
--inner-space: 0;
--tooltip-border-radius: 1rem;
z-index: var(--tooltip-z-index);
}
.eufemia-scope--10_104_0 .dnb-popover--inside-modal .dnb-tooltip {
z-index: calc(var(--modal-z-index) + var(--tooltip-z-index));
}
.eufemia-scope--10_104_0 .dnb-tooltip {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: auto;
text-align: center;
border-radius: var(--tooltip-border-radius);
box-shadow: var(--shadow-default);
}
.eufemia-scope--10_104_0 .dnb-tooltip--large {
padding: 0.25rem 0;
}
.eufemia-scope--10_104_0 .dnb-tooltip .dnb-popover__content {
min-width: 2rem;
min-height: 1.5rem;
padding: 0 1rem;
}
.eufemia-scope--10_104_0 .dnb-tooltip .dnb-popover__arrow__placement--right {
left: -13px;
top: auto !important;
}
.eufemia-scope--10_104_0 .dnb-tooltip .dnb-popover__arrow__placement--left {
right: -13px;
top: auto !important;
}
/*
* Upload component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-upload {
--upload-background: white;
--upload-background--active: lightgray;
--upload-border: gray;
--upload-border--active: black;
--upload-border-width: 2px;
--upload-list-border: black;
--upload-icon--default: black;
--upload-icon--warning: red;
--upload-highlight: lightyellow;
--upload-text--primary: black;
--upload-text--secondary: black;
position: relative;
display: flex;
flex-grow: 1;
flex-direction: column;
padding: var(--spacing-medium);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-upload {
padding: var(--spacing-medium) var(--spacing-small);
}
}
.eufemia-scope--10_104_0 .dnb-upload {
background-color: var(--upload-background);
border-radius: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-upload__outline {
content: "";
pointer-events: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 0.5rem;
stroke: var(--upload-border);
stroke-width: 0.1875rem;
}
.eufemia-scope--10_104_0 .dnb-upload--active .dnb-upload__outline {
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
width: calc(100% + var(--upload-border-width));
height: calc(100% + var(--upload-border-width));
stroke: var(--upload-border--active);
}
.eufemia-scope--10_104_0 .dnb-upload--active .dnb-upload__outline rect {
stroke-width: 0.25rem;
stroke-dasharray: 0;
}
.eufemia-scope--10_104_0 .dnb-upload--active {
background-color: var(--upload-background--active);
}
.eufemia-scope--10_104_0 .dnb-upload__file-input {
position: absolute;
visibility: hidden;
width: 1px;
height: 1px;
}
.eufemia-scope--10_104_0 .dnb-upload__file-list {
position: relative;
padding: 0;
margin-top: var(--spacing-medium);
margin-bottom: 0;
list-style: none;
}
.eufemia-scope--10_104_0 .dnb-upload__file-list::before, .eufemia-scope--10_104_0 .dnb-upload__file-cell::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background-color: var(--upload-list-border);
}
.eufemia-scope--10_104_0 .dnb-upload__file-cell {
position: relative;
padding: var(--spacing-small) 0;
/** Highlight Animation */
transition: background-color;
transition-duration: 1.5s;
transition-timing-function: var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
.eufemia-scope--10_104_0 .dnb-upload__file-cell {
transition-duration: 0.01ms;
}
}
.eufemia-scope--10_104_0 .dnb-upload__file-cell::after {
top: auto;
}
.eufemia-scope--10_104_0 .dnb-upload__file-cell__content {
display: flex;
column-gap: var(--spacing-small);
justify-content: space-between;
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-upload__file-cell__content__left {
display: flex;
column-gap: var(--spacing-small);
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-upload__file-cell__content__left .dnb-icon {
color: var(--upload-icon--default);
}
.eufemia-scope--10_104_0 .dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon {
color: var(--upload-icon--warning);
}
.eufemia-scope--10_104_0 .dnb-upload__file-cell--highlight {
background-color: var(--upload-highlight);
}
.eufemia-scope--10_104_0 .dnb-upload__file-cell__text-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-upload__file-cell__text-container--loading {
font-size: var(--font-size-basis);
}
.eufemia-scope--10_104_0 .dnb-upload__file-cell__text-container .dnb-button {
justify-content: flex-start;
}
.eufemia-scope--10_104_0 .dnb-upload__text.dnb-p {
color: var(--upload-text--secondary);
}
.eufemia-scope--10_104_0 .dnb-upload__accepted-file-types-table.dnb-table {
width: -webkit-fit-content;
width: fit-content;
}
.eufemia-scope--10_104_0 .dnb-upload__accepted-file-types-table.dnb-table thead th {
font-weight: var(--font-weight-medium);
font-size: var(--font-size-basis);
padding-top: 0;
}
.eufemia-scope--10_104_0 .dnb-upload__accepted-file-types-table.dnb-table thead th:first-child {
padding-left: 0;
}
.eufemia-scope--10_104_0 .dnb-upload__accepted-file-types-table.dnb-table tbody td:first-child {
padding-left: 0;
}
.eufemia-scope--10_104_0 .dnb-upload--compact {
padding: 0;
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-upload--compact .dnb-upload__text {
color: var(--color-black-55);
font-size: var(--font-size-small);
}
.eufemia-scope--10_104_0 .dnb-upload--compact .dnb-help-button__content .dnb-section {
margin-bottom: 1rem;
}
/*
* VisuallyHidden component
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-visually-hidden--focusable:not(:focus, :focus-within) {
-webkit-user-select: none !important;
user-select: none !important;
-webkit-touch-callout: none !important;
pointer-events: none !important;
position: absolute !important;
clip-path: inset(50%) !important;
max-width: 1px !important;
max-height: 1px !important;
overflow: hidden !important;
white-space: nowrap !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
/**
* NB: The content below is auto generated by the "themeFactory".
* You may want to update it by running "yarn build" locally.
*/
/*
* Accordion theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-accordion {
--accordion-border-width: 0;
--accordion-border-radius: 0;
--accordion-header-margin-vertical: 1rem;
--accordion-header-margin-vertical--description: 0.5rem;
--accordion-header-wrapper-margin--icon-right: calc(
1.5rem - var(--sb-accordion-frame-width)
);
--sb-accordion-header-border-radius--expanded: 0.125rem 0.125rem 0 0;
--sb-accordion-header-border-radius--hover: 0.125rem;
--sb-accordion-header-border-radius--hover-expanded: 0.125rem 0.125rem 0
0;
--accordion-header-icon-gutter: 0.5rem;
--accordion-header-icon-margin: calc(
1.5rem - var(--sb-accordion-frame-width)
);
--sb-accordion-frame-color: transparent;
--sb-accordion-frame-width: 0.1875rem;
--sb-accordion-frame-width--active: 0rem;
--sb-accordion-content-padding-left: calc(
3.5rem - var(--sb-accordion-frame-width)
);
--sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
--accordion-content-margin: 0;
--accordion-content-padding: 0 1rem 1rem
var(--sb-accordion-content-padding-left);
color: var(--sb-color-text);
}
.eufemia-scope--10_104_0 .dnb-accordion__header, .eufemia-scope--10_104_0 .dnb-accordion__content {
background-color: var(--sb-accordion-background, transparent);
border-left: var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-accordion__header:focus-visible[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-accordion__header:focus-visible:not([disabled]) {
outline: none;
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
z-index: 1;
border-radius: 0.125rem;
background-color: var(--sb-color-blue-light-3);
color: var(--border-color);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon {
color: var(--border-color);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-accordion__header:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-accordion__header:hover:not([disabled]) {
background-color: var(--sb-color-violet-light-2);
border-radius: var(--sb-accordion-header-border-radius--hover);
}
.eufemia-scope--10_104_0 .dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-accordion__header:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-accordion__header:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-accordion__header:active:not([disabled]) {
background-color: var(--sb-color-white);
--border-color: ;
--border-width: 0.0625rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
--border-color: var(--sb-color-violet);
border-left-width: var(--sb-accordion-frame-width--active);
padding-left: calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active));
}
.eufemia-scope--10_104_0 .dnb-accordion__header__icon, .eufemia-scope--10_104_0 .dnb-accordion__header__container {
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-accordion__header--icon-right {
--accordion-header-icon-margin: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-accordion__header--icon-right + .dnb-accordion__content {
--sb-accordion-content-padding-left: calc(
1.5rem - var(--sb-accordion-frame-width)
);
--accordion-content-padding: 0 1rem 1rem
var(--sb-accordion-content-padding-left);
}
.eufemia-scope--10_104_0 .dnb-accordion__header[disabled] * {
color: var(--sb-color-gray-dark-2);
}
.eufemia-scope--10_104_0 .dnb-accordion--expanded {
--sb-accordion-background: var(--sb-color-violet-light-4);
--sb-accordion-frame-color: var(--sb-color-violet);
--sb-accordion-frame-width--active: 0.125rem;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-accordion--expanded > .dnb-accordion__header:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-accordion--expanded > .dnb-accordion__header:hover:not([disabled]) {
border-radius: var(--sb-accordion-header-border-radius--hover-expanded);
}
.eufemia-scope--10_104_0 .dnb-accordion--expanded > .dnb-accordion__header--expanded {
border-radius: var(--sb-accordion-header-border-radius--expanded);
}
.eufemia-scope--10_104_0 .dnb-accordion--expanded > .dnb-accordion__content {
border-radius: var(--sb-accordion-content-border-radius);
}
.eufemia-scope--10_104_0 .dnb-accordion--expanded > .dnb-accordion__header[disabled],
.eufemia-scope--10_104_0 .dnb-accordion--expanded > .dnb-accordion__header[disabled] + .dnb-accordion__content {
--sb-accordion-background: var(--sb-color-gray-light-2);
--sb-accordion-frame-color: var(--sb-color-gray-dark-2);
}
/*
* Anchor mixins
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor {
--anchor-underline-thickness: 0.125rem;
--anchor-background: transparent;
--anchor-color--contrast: var(--sb-color-text);
--anchor-color--disabled: var(--sb-color-gray-dark);
--anchor-background-gutter-left: 0.25rem;
--anchor-background-gutter-right: 0.25rem;
--anchor-icon-position: translateY(-0.125em);
font-weight: var(--font-weight-medium);
color: var(--sb-color-gray-dark-3);
padding: 0.15625em 0;
border-radius: 0.5em;
box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default {
font-size: 1em;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
--anchor-background: var(--sb-color-green-dark);
color: var(--sb-color-text);
transition: none;
border-radius: 0.5em;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
--anchor-background: var(--sb-color-green-dark);
color: var(--sb-color-text);
transition: none;
border-radius: 0.5em;
}
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:active {
--anchor-background: var(--sb-color-green);
color: var(--sb-color-text);
transition: none;
border-radius: 0.5em;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
color: var(--sb-color-blue-dark);
background-color: var(--sb-color-blue-light-3);
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor {
--anchor-icon-gutter: 0.125em;
--anchor-icon-separator: '\00a0';
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left, .eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right {
text-decoration-color: var(--sb-color-green-dark);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
--anchor-background-gutter-right: 0rem;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
content: var(--anchor-icon-separator);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
--anchor-background-gutter-left: 0rem;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
content: var(--anchor-icon-separator);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor {
--anchor-icon-gutter: 0.125em;
--anchor-icon-separator: '\00a0';
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left, .eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right {
text-decoration-color: var(--sb-color-green-dark);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
--anchor-background-gutter-right: 0rem;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
content: var(--anchor-icon-separator);
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
--anchor-background-gutter-left: 0rem;
}
.eufemia-scope--10_104_0 :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
content: var(--anchor-icon-separator);
}
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor {
--anchor-underline-thickness: 0.125rem;
--anchor-background: transparent;
--anchor-color--contrast: var(--sb-color-text);
--anchor-color--disabled: var(--sb-color-gray-dark);
--anchor-background-gutter-left: 0.25rem;
--anchor-background-gutter-right: 0.25rem;
--anchor-icon-position: translateY(-0.125em);
font-weight: var(--font-weight-medium);
color: var(--sb-color-gray-dark-3);
padding: 0.15625em 0;
border-radius: 0.5em;
box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default {
font-size: 1em;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
--anchor-background: var(--sb-color-green-dark);
color: var(--sb-color-text);
transition: none;
border-radius: 0.5em;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
--anchor-background: var(--sb-color-green-dark);
color: var(--sb-color-text);
transition: none;
border-radius: 0.5em;
}
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:active {
--anchor-background: var(--sb-color-green);
color: var(--sb-color-text);
transition: none;
border-radius: 0.5em;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
color: var(--sb-color-blue-dark);
background-color: var(--sb-color-blue-light-3);
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor {
--anchor-icon-gutter: 0.125em;
--anchor-icon-separator: '\00a0';
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left, .eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right {
text-decoration-color: var(--sb-color-green-dark);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
--anchor-background-gutter-right: 0rem;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
content: var(--anchor-icon-separator);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
--anchor-background-gutter-left: 0rem;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
content: var(--anchor-icon-separator);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):not(.dnb-anchor--inline) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor {
--anchor-icon-gutter: 0.125em;
--anchor-icon-separator: '\00a0';
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left, .eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right {
text-decoration-color: var(--sb-color-green-dark);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
--anchor-background-gutter-right: 0rem;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
content: var(--anchor-icon-separator);
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
--anchor-background-gutter-left: 0rem;
}
.eufemia-scope--10_104_0 :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
content: var(--anchor-icon-separator);
}
}
}
.eufemia-scope--10_104_0 .dnb-anchor--hover {
--anchor-background: var(--sb-color-green-dark);
color: var(--sb-color-text);
transition: none;
border-radius: 0.5em;
}
.eufemia-scope--10_104_0 .dnb-anchor--active {
--anchor-background: var(--sb-color-green);
color: var(--sb-color-text);
transition: none;
border-radius: 0.5em;
}
.eufemia-scope--10_104_0 .dnb-anchor--focus {
background-color: transparent;
transition: none;
}
.eufemia-scope--10_104_0 .dnb-anchor--focus, .eufemia-scope--10_104_0 .dnb-section .dnb-anchor--focus.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
.eufemia-scope--10_104_0 .dnb-anchor--focus {
outline: none;
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
border-radius: 0.25em;
color: var(--sb-color-blue-dark);
background-color: var(--sb-color-blue-light-3);
border-radius: 0.25em;
}
.eufemia-scope--10_104_0 .dnb-anchor--no-radius, .eufemia-scope--10_104_0 .dnb-anchor--no-radius:hover, .eufemia-scope--10_104_0 .dnb-anchor--no-radius:active, .eufemia-scope--10_104_0 .dnb-anchor--no-radius:focus-visible {
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-anchor--inline {
text-decoration-color: currentcolor;
}
/*
* Autocomplete theme for sbanken
* TODO: this theme is just a preliminary fix to avoid dnb colors
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-autocomplete__show-all .dnb-drawer-list__option__inner {
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, .eufemia-scope--10_104_0 .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
--border-color: var(--sb-color-violet);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
color: transparent;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__shell, .eufemia-scope--10_104_0 .dnb-autocomplete__input {
border-radius: var(--autocomplete-border-radius);
}
.eufemia-scope--10_104_0 .dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
--border-color: var(--sb-color-red);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-autocomplete__root .dnb-drawer-list__option--focus, .eufemia-scope--10_104_0 .dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) {
font-weight: var(--font-weight-basis);
}
.eufemia-scope--10_104_0 .dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) {
color: var(--sb-color-gray-dark-2);
}
.eufemia-scope--10_104_0 .dnb-autocomplete__root .dnb-drawer-list__option--selected:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__item:nth-of-type(n + 2), .eufemia-scope--10_104_0 .dnb-autocomplete__root .dnb-drawer-list__option--selected:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__item:nth-of-type(n + 2) .dnb-anchor {
color: var(--sb-color-white);
}
.eufemia-scope--10_104_0 .dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
font-weight: var(--font-weight-bold);
}
/*
* Avatar theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-avatar {
--avatar-font-size--large: var(--font-size-x-large);
--avatar-font-size--x-large: var(--font-size-x-large);
--color: var(--sb-color-white);
}
.eufemia-scope--10_104_0 .dnb-avatar--primary {
--background-color: var(--sb-color-purple-alternative);
}
.eufemia-scope--10_104_0 .dnb-avatar--secondary {
--background-color: var(--sb-color-violet-light);
}
.eufemia-scope--10_104_0 .dnb-avatar--tertiary {
--background-color: var(--sb-color-violet-light-2);
--color: var(--sb-color-purple-alternative);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-large {
font-weight: var(--sb-font-weight-basis);
font-family: var(--font-family-heading);
}
.eufemia-scope--10_104_0 .dnb-avatar--size-x-large {
font-weight: var(--sb-font-weight-basis);
font-family: var(--font-family-heading);
}
.eufemia-scope--10_104_0 .dnb-avatar__group {
--avatar-font-size-left--medium: var(--font-size-basis);
--avatar-font-size-left--large: var(--sb-font-size-medium--plus);
--avatar-font-size-left--x-large: var(--sb-font-size-medium--plus);
}
/*
* WIP: Figma design tokens for the badge component
*
* Exactly how design tokens from figma will be integrated is still not decided. So this file
* is just a temporary solution that separates design tokens from the rest of the styles.
* These colors should eventually end up being properly defined design variables.
*
* Pending design pattern:
* - Point the figma variable to existing css variables from `properties.scss` where possible.
* - Name the variable with a `--figma-` prefix followed by kebab case figma token name.
* - E.g. "Color/Stroke/Neutral-Bold` -> "--figma-color-stroke-neutral-bold"
* - Using dashes in figma "folders" might be an issue i.e. "Neutral-Bold" above.
* - Perhaps we should also use underscores, or camel case?
* - "--figma-color-stroke-neutral_bold"
* - "--figma_color_stroke_neutral-bold"
* - "--figma-color-stroke-neutralBold"
* - Name the figma primitive used by the token in a comment.
*/
/*
* Badge design tokens
*
* These are the figma design variables used by the "information" variant of the badge component.
* The naming, prefix, location, and anything else is subject to change.
*/
.eufemia-scope--10_104_0 .dnb-badge {
--figma-color-decorative-first-subtle: #d2baff;
--figma-color-decorative-first-muted: var(--sb-color-violet-light-4);
--figma-color-background-neutral-bold: var(--color-black-20);
--figma-color-background-neutral-subtle: var(--color-black-3);
--figma-color-stroke-neutral-bold: var(--color-black-20);
--figma-color-text-neutral: var(--color-black-80);
--figma-color-text-neutral-inverse: var(--color-white);
--figma-color-background-positive: var(--color-success-green);
--figma-color-text-positive: var(--color-success-green);
--figma-color-background-positive-subtle: #ebf4f2;
--figma-color-stroke-positive: var(--color-success-green);
--figma-color-background-warning: var(--color-accent-yellow);
--figma-color-text-warning-bold: #805b0e;
--figma-color-background-warning-subtle: var(--color-sand-yellow);
--figma-color-stroke-warning: var(--color-accent-yellow);
--figma-color-background-error: #d52525;
--figma-color-text-destructive: #d52525;
--figma-color-background-error-subtle: #fceeee;
--figma-color-stroke-error: #d52525;
}
/*
* Sbanken Breadcrumb theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-breadcrumb .dnb-button__text {
font-weight: var(--font-weight-medium);
color: var(--sb-color-text);
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item {
padding: 0;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item__span {
padding: 0.5rem 0;
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item__span__icon {
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item__span .dnb-p {
color: var(--sb-color-gray-dark-3);
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text {
font-weight: var(--font-weight-medium);
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text {
color: var(--sb-color-text);
}
.eufemia-scope--10_104_0 .dnb-breadcrumb__list.dnb-section {
row-gap: 0;
}
/*
* Button theme
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.eufemia-scope--10_104_0 .dnb-button--tertiary {
--button-tertiary-focus-left: -0.5rem;
--button-tertiary-focus-right: -0.5rem;
--button-tertiary-focus-overflow--icon-top: -0.5rem;
--button-tertiary-underline-left: var(
--button-tertiary-underline-overflow
);
--button-tertiary-underline-right: var(
--button-tertiary-underline-overflow
);
--button-tertiary-underline-overflow: 0;
--button-tertiary-underline-overflow--icon: calc(
(var(--button-icon-gutter) + var(--button-icon-size)) * -1
);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary .dnb-button__text {
position: relative;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary .dnb-button__text::after {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: 0.095rem;
border-radius: 0.0475rem;
color: var(--color-sea-green);
background-color: currentcolor;
bottom: -0.0625rem;
color: transparent;
transition: color 250ms ease-in-out;
}
.eufemia-scope--10_104_0 [data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text::after {
transition: none;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary .dnb-button__text::after {
left: var(--button-tertiary-underline-left);
right: var(--button-tertiary-underline-right);
}
.eufemia-scope--10_104_0 .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
content: none;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:focus-visible[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:focus-visible:not([disabled]) {
outline: none;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:focus-visible:not([disabled])::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: var(--button-tertiary-focus-left);
bottom: 0;
right: var(--button-tertiary-focus-right);
height: inherit;
border-radius: inherit;
outline: none;
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text::after {
visibility: hidden;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text::after {
visibility: visible;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:active:not([disabled]) {
outline: initial;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-button--tertiary:active:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) {
box-shadow: none;
}
html[data-whatintent=touch] .eufemia-scope--10_104_0 .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html[data-whatintent=touch] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
transition: none;
visibility: visible;
opacity: 1;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
visibility: hidden;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--has-text {
--button-padding-left: 0;
--button-padding-right: 0;
--button-icon-margin-top: calc(
(var(--button-height) - var(--button-icon-size)) / 2
);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--icon-position-top {
--button-tertiary-focus-left: var(
--button-tertiary-focus-overflow--icon-top
);
--button-tertiary-focus-right: var(
--button-tertiary-focus-overflow--icon-top
);
flex-direction: column;
border-radius: 0.5rem;
vertical-align: middle;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text {
--button-icon-margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon {
align-self: center;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text {
margin-top: 0;
margin-bottom: 0.25rem;
font-size: var(--font-size-x-small);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text {
font-size: var(--font-size-small);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment {
order: 3;
height: 0;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-size-medium, .eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-size-large {
--button-tertiary-underline-overflow--icon: var(
--button-tertiary-underline-overflow
);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left {
--button-tertiary-focus-right: -1rem;
--button-tertiary-underline-left: var(
--button-tertiary-underline-overflow--icon
);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
--button-tertiary-focus-left: -1rem;
--button-tertiary-underline-right: var(
--button-tertiary-underline-overflow--icon
);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text) {
--button-tertiary-focus-left: 0;
--button-tertiary-focus-right: 0;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-button--tertiary:hover:focus .dnb-button__text::after {
visibility: hidden;
}
.eufemia-scope--10_104_0 .dnb-button {
--button-background--focus: var(--sb-color-blue-light-3);
--button-border-radius--control-button: 3rem;
--button-padding--large: 1.5rem;
--button-primary-shadow: var(--sb-shadow-medium);
--button-primary-shadow--hover: var(--sb-shadow-medium);
--button-primary-color: var(--sb-color-white);
--button-primary-color--hover: var(--sb-color-purple-alternative);
--button-primary-color--active: var(--sb-color-white);
--button-primary-color--disabled: var(--sb-color-gray-dark-2);
--button-primary-background: var(--sb-color-purple-alternative);
--button-primary-background--hover: var(--sb-color-green);
--button-primary-background--active: var(--sb-color-purple-alternative);
--button-primary-background--disabled: var(--sb-color-gray-light);
--button-primary-border--hover: transparent;
--button-secondary-color: var(--sb-color-purple-alternative);
--button-secondary-color--hover: var(--sb-color-purple-alternative);
--button-secondary-color--active: var(--sb-color-purple-alternative);
--button-secondary-color--disabled: var(--sb-color-gray-dark);
--button-secondary-background: var(--sb-color-white);
--button-secondary-background--hover: var(--sb-color-green);
--button-secondary-background--active: var(--sb-color-white);
--button-secondary-border: var(--button-secondary-border--default);
--button-secondary-border--default: var(--sb-color-purple-alternative);
--button-secondary-border--hover: var(
--button-secondary-border--default
);
--button-secondary-border--active: var(
--button-secondary-border--default
);
--button-secondary-border--disabled: var(--sb-color-gray-light);
--button-tertiary-color: var(--sb-color-violet);
--button-tertiary-border: var(--sb-color-violet);
border: none;
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--size-large {
--button-padding-icon: 1rem;
}
.eufemia-scope--10_104_0 .dnb-button--primary {
color: var(--button-primary-color);
background-color: var(--button-primary-background);
box-shadow: var(--button-primary-shadow);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--primary:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--primary:hover:not([disabled]) {
color: var(--button-primary-color--hover);
background-color: var(--button-primary-background--hover);
--border-color: var(--button-primary-border--hover);
--border-width: 0.0625rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--button-primary-shadow--hover);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-button--primary:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--primary:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-button--primary:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--primary:active:not([disabled]) {
color: var(--button-primary-color--active);
background-color: var(--button-primary-background--active);
}
.eufemia-scope--10_104_0 .dnb-button--secondary {
color: var(--button-secondary-color);
background-color: var(--button-secondary-background);
--border-color: var(--button-secondary-border);
--border-width: 0.0625rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--secondary:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--secondary:hover:not([disabled]) {
--button-secondary-border: var(--button-secondary-border--hover);
color: var(--button-secondary-color--hover);
background-color: var(--button-secondary-background--hover);
}
.eufemia-scope--10_104_0 .dnb-button--secondary:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--secondary:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-button--secondary:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--secondary:active:not([disabled]) {
--button-secondary-border: var(--button-secondary-border--active);
color: var(--button-secondary-color--active);
background-color: var(--button-secondary-background--active);
}
.eufemia-scope--10_104_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before, .eufemia-scope--10_104_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after {
box-shadow: none;
border: none;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover:not([disabled]) {
box-shadow: none;
border: none;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--primary:focus-visible[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--secondary:focus-visible[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--primary:focus-visible:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--secondary:focus-visible:not([disabled]) {
color: var(--sb-color-blue-dark);
background-color: var(--button-background--focus);
outline: none;
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-button[disabled] {
--button-primary-shadow: 0 0 transparent;
--button-primary-color: var(--button-primary-color--disabled);
--button-primary-background: var(
--button-primary-background--disabled
);
--button-secondary-color: var(--button-secondary-color--disabled);
--button-secondary-border--default: var(
--button-secondary-border--disabled
);
}
.eufemia-scope--10_104_0 .dnb-button:not([disabled]).dnb-button__status--error {
--button-primary-shadow--hover: 0 0 transparent;
--button-primary-color: var(--sb-color-white);
--button-primary-color--hover: var(--sb-color-red);
--button-primary-color--active: var(--sb-color-white);
--button-primary-background: var(--sb-color-red);
--button-primary-background--hover: var(--sb-color-magenta-light-3);
--button-primary-background--active: var(--sb-color-red);
--button-primary-border--hover: var(--sb-color-red);
--button-secondary-color: var(--sb-color-red);
--button-secondary-color--hover: var(--sb-color-red);
--button-secondary-color--active: var(--sb-color-red);
--button-secondary-background--hover: var(--sb-color-magenta-light-3);
--button-secondary-border--default: var(--sb-color-red);
--button-tertiary-color: var(--sb-color-red);
--button-tertiary-border: var(--sb-color-red);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary {
--button-tertiary-focus-overflow--icon-top: 0;
--button-tertiary-underline-overflow: -0.5rem;
--button-tertiary-underline-overflow--icon: calc(
(
var(--button-icon-gutter) + var(--button-icon-size) - var(
--button-tertiary-underline-overflow
)
) * -1
);
--button-tertiary-underline-bottom: -0.5rem;
--button-tertiary-text-bottom--icon: 0.5rem;
--button-tertiary-text-top--icon: 0;
color: var(--button-tertiary-color);
background-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary .dnb-button__text::after {
height: 0.0625rem;
bottom: var(--button-tertiary-underline-bottom);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--has-text.dnb-button--icon-position-top {
--button-padding-left: calc(
var(--button-tertiary-underline-overflow) * -1
);
--button-padding-right: calc(
var(--button-tertiary-underline-overflow) * -1
);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--has-text.dnb-button--icon-position-top .dnb-button__text {
margin-top: var(--button-tertiary-text-top--icon);
margin-bottom: var(--button-tertiary-text-bottom--icon);
font-size: var(--button-font-size);
}
.eufemia-scope--10_104_0 .dnb-button--tertiary.dnb-button--size-large {
--button-tertiary-underline-bottom: -0.75rem;
--button-tertiary-underline-overflow: -1.5rem;
--button-tertiary-text-bottom--icon: 0.75rem;
--button-tertiary-text-top--icon: 0.25rem;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:hover:not([disabled]):not(:focus-visible) .dnb-button__text::after {
color: var(--button-tertiary-border);
transition: none;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text) {
--focus-ring-width: 0.0625rem;
--sb-shadow-medium: 0 0 transparent;
color: var(--sb-color-blue-dark);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text)::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: var(--button-tertiary-focus-left);
bottom: 0;
right: var(--button-tertiary-focus-right);
height: inherit;
border-radius: inherit;
outline: none;
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
border-color: transparent;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text)::before {
background-color: var(--button-background--focus);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text) > * {
z-index: 2;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:focus-visible[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:focus-visible:not([disabled]) {
color: var(--sb-color-blue-dark);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:focus-visible:not([disabled])::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: var(--button-tertiary-focus-left);
bottom: 0;
right: var(--button-tertiary-focus-right);
height: inherit;
border-radius: inherit;
outline: none;
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color), var(--sb-shadow-medium);
border-color: transparent;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:focus-visible:not([disabled])::before {
background-color: var(--button-background--focus);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--tertiary:focus-visible:not([disabled]) > * {
z-index: 2;
}
.eufemia-scope--10_104_0 .dnb-button--tertiary[disabled] {
color: var(--sb-color-gray-dark);
}
.eufemia-scope--10_104_0 .dnb-button--on-dark-background {
--button-primary-color: var(--sb-color-text);
--button-primary-color--hover: var(--sb-color-purple-alternative);
--button-primary-color--active: var(--sb-color-purple-alternative);
--button-primary-background: var(--sb-color-green);
--button-primary-background--hover: var(--sb-color-violet-light-2);
--button-primary-background--active: var(--sb-color-violet-light-3);
--button-secondary-color: var(--sb-color-white);
--button-secondary-color--hover: var(--sb-color-purple-alternative);
--button-secondary-color--active: var(--sb-color-purple-alternative);
--button-secondary-background: transparent;
--button-secondary-background--hover: var(--sb-color-violet-light-2);
--button-secondary-background--active: var(--sb-color-violet-light-3);
--button-secondary-border--default: var(--sb-color-green);
--button-secondary-border--hover: var(--sb-color-violet-light);
--button-secondary-border--active: var(--sb-color-violet-light);
--button-tertiary-color: var(--sb-color-white);
--button-tertiary-border: var(--sb-color-green);
}
.eufemia-scope--10_104_0 {
--card-outline-color: var(--border-color, var(--sb-color-gray-light));
--card-outline-width: 0.0625rem;
--card-background-color: var(--sb-color-white);
}
.eufemia-scope--10_104_0 .dnb-card .dnb-card {
--rounded-corner: 0.375rem;
}
/*
* Checkbox theme for Sbanken
*
*/
.eufemia-scope--10_104_0 .dnb-checkbox {
--checkbox-border-width: 0.0625rem;
--checkbox-color-gfx-on: var(--sb-color-violet-light);
--checkbox-color-gfx-off: var(--sb-color-white);
--checkbox-color-background-on: var(--sb-color-white);
--checkbox-color-background-off: var(--sb-color-white);
--checkbox-color-border-on: var(--sb-color-violet);
--checkbox-color-border-off: var(--sb-color-violet);
--checkbox-border-width--disabled: 0.0625rem;
--checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
--checkbox-color-background-off--disabled: var(--sb-color-gray-light);
--checkbox-color-background-on--disabled: var(--sb-color-gray-light);
--checkbox-color-border-on--disabled: var(--sb-color-gray-dark);
--checkbox-color-border-off--disabled: var(--sb-color-gray-dark);
--checkbox-color-gfx__indeterminate--disabled: var(--sb-color-gray-dark);
--checkbox-color-background--active: var(--sb-color-white);
--checkbox-color-border--active: var(--sb-color-gray);
--checkbox-border-width--hover: 0.125rem;
--checkbox-color-gfx--hover: var(--sb-color-violet-light);
--checkbox-color-background--hover: var(--sb-color-violet-light-3);
--checkbox-color-border-on--hover: var(--sb-color-violet);
--checkbox-color-border-off--hover: var(--sb-color-violet);
--checkbox-color-gfx--focus: var(--focus-ring-color);
--checkbox-color-background--focus: var(--sb-color-blue-light-3);
--checkbox-border-width--error: 0.0625rem;
--checkbox-color-gfx--error: var(--sb-color-magenta);
--checkbox-color-gfx--error-contrast: var(--sb-color-magenta);
--checkbox-color-background-on--error: var(--sb-color-white);
--checkbox-color-background--error-contrast: var(
--sb-color-magenta-light-2
);
--checkbox-color-border--error: var(--sb-color-magenta);
--checkbox-color-gfx--error--hover: var(--sb-color-magenta);
--checkbox-color-background--error--hover: var(
--sb-color-magenta-light-3
);
--checkbox-color-border--error--hover: transparent;
--checkbox-color-background-indeterminate: var(--sb-color-white);
--checkbox-color-gfx-indeterminate: var(--sb-color-violet);
--checkbox-color-background-indeterminate--active: var(--color-white);
--checkbox-color-border-indeterminate--active: var(--sb-color-gray);
--checkbox-color-gfx-indeterminate--active: var(--sb-color-violet);
--checkbox-color-gfx-indeterminate--error: var(--sb-color-magenta);
--checkbox-gfx-width__indeterminate: 0.875rem;
--checkbox-gfx-height__indeterminate: 0.125rem;
--checkbox-gfx-height__indeterminate--large: 0.25rem;
--checkbox-gfx-width__indeterminate--large: 1.5rem;
--checkbox-border-radius: 0;
--checkbox-gfx-border-radius__indeterminate: 0rem;
}
/*
* Drawer theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-dialog {
--dialog-background: var(--sb-color-white);
--dialog-icon-positioning: -0.5rem;
--dialog-radius: 0.25rem;
--dialog-icon-color--info: var(--sb-color-violet);
--dialog-icon-color--warning: var(--sb-color-red);
--dialog-icon-background--info: var(--sb-color-green-light-2);
--dialog-icon-background--warning: var(--sb-color-magenta-light-2);
}
.eufemia-scope--10_104_0 .dnb-dialog__icon {
margin-top: calc(var(--dialog-icon-positioning) * -1);
margin-bottom: calc(var(--dialog-icon-positioning) * -1);
}
@media screen and (max-width: 60em) and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-dialog__title {
font-size: var(--sb-font-size-medium--plus) !important;
line-height: var(--line-height-medium) !important;
}
}
/*
* Dropdown theme
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.eufemia-scope--10_104_0 .dnb-dropdown {
--dropdown-border-radius: 0.5rem;
--dropdown-height: 2.5rem;
--dropdown-error-border-width: 0.125rem;
--dropdown-button-padding: 0 0.75rem 0 0.5rem;
--dropdown-foreground-color-primary: var(--sb-color-gray-dark-2);
--dropdown-foreground-color-error: var(--sb-color-red);
--dropdown-background-color-disabled: var(--sb-color-gray-light);
--dropdown-background-color-error-active: var(--sb-color-white);
}
.eufemia-scope--10_104_0 .dnb-dropdown__icon {
color: var(--sb-color-text);
}
.eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary) {
--border-color: var(--dropdown-foreground-color-primary);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
color: var(--sb-color-gray-dark-3);
line-height: var(--dropdown-height);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):hover:not([disabled]) {
--border-color: var(--sb-color-violet);
--border-width: 2px;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
color: var(--sb-color-gray-dark-3);
background-color: var(--sb-color-white);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):hover:not([disabled]) .dnb-dropdown__icon {
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus[disabled] {
cursor: not-allowed;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]) {
color: var(--sb-color-blue-dark);
background-color: var(--sb-color-blue-light-3);
}
.eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]) {
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]), html[data-whatinput=keyboard] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]) {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]) .dnb-dropdown__icon, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__trigger:not(.dnb-button--tertiary):focus:not([disabled]) .dnb-dropdown__icon {
color: var(--sb-color-blue-dark);
}
.eufemia-scope--10_104_0 .dnb-dropdown__trigger.dnb-button--active {
--border-color: var(--dropdown-foreground-color-primary);
--border-width: 0.125rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius) 0 0;
}
.eufemia-scope--10_104_0 .dnb-dropdown__trigger[disabled] {
color: var(--sb-color-gray-dark-2);
background-color: var(--sb-color-gray-light);
--border-color: var(--dropdown-foreground-color-primary);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-dropdown__trigger[disabled] .dnb-dropdown__icon {
color: inherit;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger:hover:not([disabled]) {
--border-color: var(--dropdown-foreground-color-error);
--border-width: var(--dropdown-error-border-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-dropdown--top .dnb-dropdown__trigger.dnb-button--active {
border-radius: 0 0 var(--dropdown-border-radius) var(--dropdown-border-radius);
}
/*
* FormLabel theme
*
*/
.eufemia-scope--10_104_0 .dnb-form-label {
color: var(--sb-color-text);
}
/*
* FormRow theme
*
*/
/*
* FormStatus theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-form-status__shell {
color: var(--sb-color-text);
}
.eufemia-scope--10_104_0 .dnb-form-status--error .dnb-form-status__shell {
background-color: var(--sb-color-magenta-light-2);
}
.eufemia-scope--10_104_0 .dnb-form-status--info .dnb-form-status__shell {
background-color: var(--sb-color-green-light-2);
}
.eufemia-scope--10_104_0 .dnb-form-status--marketing .dnb-form-status__shell {
background-color: var(--sb-color-violet-light-4);
}
.eufemia-scope--10_104_0 .dnb-form-status--warn .dnb-form-status__shell {
background-color: var(--sb-color-yellow-light-3);
}
.eufemia-scope--10_104_0 .dnb-form-status__variant--outlined.dnb-form-status--error .dnb-form-status__shell {
--border-color: var(--sb-color-red);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-form-status__variant--outlined.dnb-form-status--warn .dnb-form-status__shell {
--border-color: var(--sb-color-yellow-dark);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-form-status__variant--outlined.dnb-form-status--info .dnb-form-status__shell {
--border-color: var(--sb-color-green-dark-2);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-form-status__variant--outlined.dnb-form-status--marketing .dnb-form-status__shell {
--border-color: var(--sb-color-violet-light);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
/*
* GlobalStatus theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-global-status__close-button {
display: none;
}
@media screen and (max-width: 72em) {
.eufemia-scope--10_104_0 .dnb-global-status__title {
padding-right: 2.5rem;
}
}
.eufemia-scope--10_104_0 .dnb-global-status--error .dnb-global-status__content .dnb-hr {
--hr-color: var(--sb-color-red);
}
.eufemia-scope--10_104_0 .dnb-global-status--info .dnb-global-status__content .dnb-hr {
--hr-color: var(--sb-color-green-dark-2);
}
.eufemia-scope--10_104_0 .dnb-global-status--warning .dnb-global-status__content .dnb-hr {
--hr-color: var(--sb-color-yellow-dark);
}
.eufemia-scope--10_104_0 .dnb-global-status--success .dnb-global-status__content .dnb-hr {
--hr-color: var(--sb-color-green-dark-3);
}
/*
* Help button theme for Sbanken
*
*/
.eufemia-scope--10_104_0 .dnb-help-button__content {
--help-button-content-background: var(--sb-color-green);
}
.eufemia-scope--10_104_0 .dnb-help-button__content .dnb-section {
--card-outline-width: 0;
}
/*
* Input theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-input__border--tokens {
--input-border-color: var(--sb-color-gray-dark-2);
--input-border-color--hover: var(--sb-color-violet);
--input-border-color--active: var(--sb-color-violet);
--input-border-color--focus: var(--focus-ring-color);
--input-border-color--disabled: var(--sb-color-gray);
--input-border-color__error: var(--sb-color-red);
--input-border-color__error--focus: var(--sb-color-red);
--input-border-width: 0.0625rem;
--input-border-width--hover: 0.125rem;
--input-border-width--active: 0.0625rem;
--input-border-width--disabled: 0.0625rem;
--input-border-width--focus: var(--focus-ring-width);
--input-border-width__error: 0.0625rem;
--input-border-width__error--hover: 0.125rem;
--input-border-width__error--active: 0.0625rem;
--input-border-inset: inset;
--input-border-inset--hover: inset;
--input-border-inset--active: inset;
--input-border-inset--focus: inset;
--input-border-inset--disabled: inset;
--input-border-radius: 0.5rem;
--input-border-radius--active: 1.5rem;
--input-border-radius--focus: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-input {
--input-height: 2.5rem;
--input-color: var(--input-color--default);
--input-color--default: var(--sb-color-text);
--input-color--active: var(--sb-color-text);
--input-button-border-color: var(--input-border-color);
--input-button-border-width: var(--input-border-width);
--input-button-border-radius: var(--input-border-radius);
}
.eufemia-scope--10_104_0 .dnb-input__shell {
background-color: var(--input-background-color);
transition: border-radius 0.25s ease-out;
border: none;
color: var(--input-color);
}
.eufemia-scope--10_104_0 .dnb-input__submit-button__button {
--button-secondary-color: var(--sb-color-violet);
--button-secondary-color--active: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-input__placeholder {
color: var(--sb-color-gray-dark-3);
}
.eufemia-scope--10_104_0 .dnb-input[data-input-state=disabled] .dnb-input__shell,
.eufemia-scope--10_104_0 .dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon,
.eufemia-scope--10_104_0 .dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-input__placeholder {
color: var(--sb-color-gray-dark-2);
}
.eufemia-scope--10_104_0 .dnb-input[data-input-state=disabled] .dnb-input__shell {
-webkit-text-fill-color: currentcolor;
background-color: var(--sb-color-gray-light);
}
.eufemia-scope--10_104_0 .dnb-input:not([data-input-state=disabled])[data-input-state=focus] {
--input-color: var(--input-color--active);
--input-button-border-color: var(--input-border-color--active);
--input-button-border-radius: var(--input-border-radius--active);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-input:not([data-input-state=disabled])[data-input-state=focus] {
--input-button-border-color: var(--input-border-color--focus);
--input-button-border-width: var(--input-border-width--focus);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-input:not([data-input-state=disabled])[data-input-state=focus].dnb-input__status--error {
--input-button-border-color: var(
--input-border-color__error--focus
);
}
.eufemia-scope--10_104_0 .dnb-input:not([data-input-state=disabled]).dnb-input__status--error {
--input-color--default: var(--sb-color-red);
--input-color--active: var(--sb-color-text);
--input-button-border-color: var(--sb-color-red);
}
.eufemia-scope--10_104_0 .dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button {
--button-secondary-background--hover: var(--sb-color-red);
--button-secondary-color--hover: var(--sb-color-white);
--button-secondary-color--active: var(--sb-color-red);
}
.eufemia-scope--10_104_0 .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible) {
background-color: transparent;
box-shadow: none;
border-radius: 0 var(--input-button-border-radius) var(--input-button-border-radius) 0;
}
.eufemia-scope--10_104_0 .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):hover, .eufemia-scope--10_104_0 .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):active {
border: var(--input-button-border-width) solid var(--input-button-border-color);
border-left: none;
padding-left: var(--input-button-border-width);
}
/**
* List Sbanken theme
*
*/
.eufemia-scope--10_104_0 .dnb-list--variant-basic {
--item-outline-color: var(--border-color, var(--sb-color-gray-light));
--item-background-color: var(--sb-color-white);
--item-selected-background-color: var(
--internal-color-background-selected-subtle,
var(--sb-color-gray-light)
);
--item-navigation-color: var(--sb-color-violet);
--item-navigation-color--active: var(--sb-color-purple-alternative);
--item-icon-color: var(--item-navigation-color);
--item-pending-color: var(--sb-color-gray-light-3);
}
.eufemia-scope--10_104_0 .dnb-list__item--disabled {
color: var(--sb-color-gray-dark-2);
--item-navigation-color: var(--sb-color-gray-dark-2);
--item-navigation-color--active: var(--sb-color-gray-dark-2);
--item-icon-color: var(--sb-color-gray-dark-2);
--item-outline-color: var(--sb-color-gray-light);
}
/*
* Logo Component
*
*/
.eufemia-scope--10_104_0 .sbanken-logo {
color: var(--sb-color-text);
}
.eufemia-scope--10_104_0 .sbanken-logo--inherit-color {
color: currentcolor;
}
/*
* Pagination theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-pagination__bar__skip .dnb-button--tertiary:not([disabled]) .dnb-button__text {
color: var(--sb-color-text);
}
.eufemia-scope--10_104_0 .dnb-core-style .dnb-pagination__button.dnb-button, .eufemia-scope--10_104_0 .dnb-pagination__button.dnb-button {
--button-primary-color: var(--sb-color-white);
--button-primary-color--active: var(--sb-color-white);
--button-primary-background: var(--sb-color-violet);
--button-primary-background--hover: var(--sb-color-violet-light-4);
--button-primary-background--active: var(--sb-color-violet);
--button-primary-border--hover: var(--sb-color-violet);
--button-secondary-background--hover: var(--sb-color-white);
--button-secondary-border--default: var(--sb-color-gray);
--button-secondary-border--hover: var(--sb-color-violet);
--button-secondary-border--active: var(--sb-color-gray);
}
.eufemia-scope--10_104_0 .dnb-pagination__dots {
color: var(--sb-color-text);
}
.eufemia-scope--10_104_0 .dnb-popover--theme-light {
--popover-text-color: var(--sb-color-black);
--popover-background-color: var(--sb-color-white);
--popover-outline-color: var(--sb-color-gray-light);
}
.eufemia-scope--10_104_0 .dnb-popover--theme-dark {
--popover-text-color: var(--sb-color-white);
--popover-background-color: var(--sb-color-gray-dark-3);
--popover-outline-color: var(--sb-color-gray-dark-3);
}
/*
* ProgressIndicator theme for Sbanken
*
*/
.eufemia-scope--10_104_0 .dnb-progress-indicator {
--progress-indicator-circular-background-color: var(
--sb-color-gray-light-2
);
--progress-indicator-circular-bar-color: var(
--sb-color-purple-alternative
);
--progress-indicator-linear-background-color: var(
--sb-color-gray-light-2
);
--progress-indicator-linear-bar-color: var(
--sb-color-purple-alternative
);
}
/*
* Radio theme for Sbanken
*
*/
.eufemia-scope--10_104_0 .dnb-radio {
--radio-dot--medium: 0.875rem;
--radio-dot--large: 1.5rem;
--radio-border-width: 0.0625rem;
--radio-color-dot-on: var(--sb-color-violet);
--radio-color-background-on: var(--sb-color-white);
--radio-color-border-on: var(--sb-color-violet);
--radio-color-background-off: var(--sb-color-white);
--radio-color-border-off: var(--sb-color-violet);
--radio-border-width--disabled: 0.0625rem;
--radio-color-dot-on--disabled: var(--sb-color-gray-dark);
--radio-color-background--disabled: var(--sb-color-gray-light);
--radio-color-border-on--disabled: var(--sb-color-gray-dark);
--radio-color-border-off--disabled: var(--sb-color-gray-dark);
--radio-color-dot-on--active: var(--sb-color-violet-light);
--radio-color-border-on--active: var(--sb-color-gray-dark-2-neutral);
--radio-color-background-off--active: var(--sb-color-white);
--radio-color-border-off--active: var(--sb-color-gray);
--radio-color-dot-on--hover: var(--sb-color-violet);
--radio-border-width-on--hover: 0.0625rem;
--radio-color-background-on--hover: var(--sb-color-violet-light-3);
--radio-color-background-off--hover: var(--sb-color-violet-light-3);
--radio-border-width--focus: 0.1875rem;
--radio-color-background-on--focus: var(--sb-color-blue-light-3);
--radio-color-background-off--focus: var(--sb-color-blue-light-3);
--radio-color-dot-on--error: var(--sb-color-magenta);
--radio-color-border-on--error: var(--sb-color-magenta);
--radio-color-border--error-hover: var(--sb-color-red);
--radio-color-background-off--error-hover: var(
--sb-color-magenta-light-2
);
--radio-color-background-on--error-hover: var(
--sb-color-magenta-light-2
);
--radio-color-dot-on--error-hover: var(--sb-color-red);
--radio-focus-ring-width--error: var(--radio-border-width);
}
.eufemia-scope--10_104_0 .dnb-section {
--background-color: var(--sb-color-white);
--outline-color--value: var(--sb-color-gray-light-2);
}
.eufemia-scope--10_104_0 .dnb-section--transparent {
--background-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-section--default, .eufemia-scope--10_104_0 .dnb-section--divider {
--text-color: var(--text-color--value, var(--sb-color-text));
--background-color: var(
--background-color--value,
var(--sb-color-violet-light-4)
);
}
.eufemia-scope--10_104_0 .dnb-section--white {
--text-color: var(--sb-color-text);
--background-color: var(--sb-color-white);
}
.eufemia-scope--10_104_0 .dnb-section--error {
--text-color: var(--sb-color-text);
--background-color: var(--sb-color-magenta-light-2);
}
.eufemia-scope--10_104_0 .dnb-section--info {
--text-color: var(--sb-color-text);
--background-color: var(--sb-color-green-light-2);
}
.eufemia-scope--10_104_0 .dnb-section--warning {
--text-color: var(--sb-color-text);
--background-color: var(--sb-color-yellow-light-3);
}
.eufemia-scope--10_104_0 .dnb-section--success {
--text-color: var(--sb-color-text);
--background-color: var(--sb-color-green-light-2);
}
.eufemia-scope--10_104_0 .dnb-skeleton {
--skeleton-color: var(--sb-color-gray-light-2);
--skeleton-color--contrast: var(--sb-color-white);
}
/*
* Slider theme for Sbanken
*
*/
.eufemia-scope--10_104_0 .dnb-slider {
--slider-line-before: var(--sb-color-purple-alternative);
--slider-line-after: var(--sb-color-gray-light);
--slider-line-before--disabled: var(--sb-color-gray);
--slider-line-after--disabled: var(--sb-color-gray-light);
}
.eufemia-scope--10_104_0 .dnb-slider__marker :hover {
background-color: var(--sb-color-violet);
}
/*
* StepIndicator theme
* Warning, this is just a stop-gap theming to avoid dnb brand colors. This component is not fully "Sbanken-ready"
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-step-indicator {
--step-indicator-trigger-background: var(--sb-color-gray-light-3);
--step-indicator-trigger-content-background: var(--sb-color-white);
--step-indicator-check-bg: var(--sb-color-violet-light-4);
--step-indicator-check-color: var(--sb-color-violet);
--step-indicator-current-border: var(--sb-color-text);
}
/*
* Switch theme for Sbanken
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-switch {
--switch-width--medium: 3.75rem;
--switch-height--medium: 2rem;
--switch-width--large: 5rem;
--switch-height--large: 2.625rem;
--switch-border-width--medium: 0.0625rem;
--switch-border-width--large: 0.0625rem;
--switch-spacing-height--medium: 0.375rem;
--switch-spacing-width--medium: 0.25rem;
--switch-spacing-height--large: 0.5rem;
--switch-spacing-width--large: 0.25rem;
--switch-content-width: 1.125rem;
--switch-content-spacing--medium: 0.5rem;
--switch-content-spacing--large: 0.875rem;
--button-dimension--medium: calc(
var(--switch-height--medium) - var(--switch-spacing-height--medium)
);
--button-dimension--large: calc(
var(--switch-height--large) - var(--switch-spacing-height--large)
);
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__row {
height: var(--switch-height--large);
}
.eufemia-scope--10_104_0 .dnb-switch__background {
height: 100%;
background-color: var(--sb-color-gray);
border-radius: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-switch__background::after {
color: var(--sb-color-text);
font-size: var(--sb-font-size-small);
content: "Av";
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__background {
height: 100%;
border-radius: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__background::after {
font-size: var(--sb-font-size-basis);
}
.eufemia-scope--10_104_0 .dnb-switch__button {
width: var(--button-dimension--medium);
height: var(--button-dimension--medium);
background-color: var(--sb-color-white);
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__button {
width: var(--button-dimension--large);
height: var(--button-dimension--large);
}
.eufemia-scope--10_104_0 .dnb-switch {
/* stylelint-disable no-descending-specificity */
/*
* When switched ON
*/
}
.eufemia-scope--10_104_0 .dnb-switch__input:checked ~ .dnb-switch__button {
transform: translateX(calc(var(--switch-width--medium) - var(--button-dimension--medium) - var(--switch-spacing-width--medium)));
}
.eufemia-scope--10_104_0 .dnb-switch__input:checked ~ .dnb-switch__background {
background-color: var(--sb-color-violet-light);
}
.eufemia-scope--10_104_0 .dnb-switch__input:checked ~ .dnb-switch__background::after {
color: var(--sb-color-white);
content: "På";
transform: translateX(var(--switch-content-spacing--medium));
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__button {
transform: translateX(calc(var(--switch-width--large) - var(--button-dimension--large) - var(--switch-spacing-width--large)));
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__background::after {
transform: translateX(var(--switch-content-spacing--large));
}
.eufemia-scope--10_104_0 .dnb-switch {
/*
* When switched OFF
*/
}
.eufemia-scope--10_104_0 .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
transform: translateX(var(--switch-spacing-width--medium));
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
transform: translateX(var(--switch-spacing-width--large));
}
.eufemia-scope--10_104_0 .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
transform: translateX(calc(var(--switch-width--medium) - var(--switch-content-width) - var(--switch-content-spacing--medium)));
}
.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
transform: translateX(calc(var(--switch-width--large) - var(--switch-content-width) - var(--switch-content-spacing--large)));
}
.eufemia-scope--10_104_0 .dnb-switch {
/*
* On disabled state
*
*/
}
.eufemia-scope--10_104_0 .dnb-switch__input[disabled] ~ .dnb-switch__background {
background-color: var(--sb-color-gray);
}
.eufemia-scope--10_104_0 .dnb-switch__input[disabled] ~ .dnb-switch__background::after {
color: var(--sb-color-gray-dark);
}
.eufemia-scope--10_104_0 .dnb-switch__input[disabled] ~ .dnb-switch__button {
background-color: var(--sb-color-gray-light);
}
.eufemia-scope--10_104_0 .dnb-switch__input[disabled]:checked ~ .dnb-switch__background {
background-color: var(--sb-color-violet);
opacity: 0.3;
}
.eufemia-scope--10_104_0 .dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after {
color: var(--sb-color-white);
}
.eufemia-scope--10_104_0 .dnb-switch__input[disabled]:checked ~ .dnb-switch__button {
background-color: var(--sb-color-white);
}
.eufemia-scope--10_104_0 .dnb-switch {
/*
* On focus state
*
*/
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
outline: initial;
box-shadow: none;
}
html[data-whatinput=""] .eufemia-scope--10_104_0 html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
box-shadow: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):checked:focus ~ .dnb-switch__button {
background-color: var(--focus-ring-color);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
outline: initial;
box-shadow: none;
}
html[data-whatinput=""] .eufemia-scope--10_104_0 html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
box-shadow: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background {
background-color: var(--sb-color-blue-light-3);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background::after {
color: var(--focus-ring-color);
font-weight: var(--sb-font-weight-bold);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus {
--border-color: var(--focus-ring-color);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-switch {
/*
* On hover state
*
*/
}
.eufemia-scope--10_104_0 .dnb-switch__background:hover, .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked):hover ~ .dnb-switch__background {
color: var(--sb-color-violet);
background-color: var(--sb-color-violet-light-3);
--border-color: var(--sb-color-violet);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-switch__background:hover::after, .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked):hover ~ .dnb-switch__background::after {
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-switch__background {
background-color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-switch {
/*
* On error state
*
*/
}
.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
background-color: var(--sb-color-white);
--border-color: var(--sb-color-red);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__background {
background-color: var(--sb-color-magenta-light-2);
--border-color: var(--sb-color-red);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after {
color: var(--sb-color-red);
}
.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background {
background-color: var(--sb-color-magenta);
box-shadow: none;
}
.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked:hover ~ .dnb-switch__background {
background-color: var(--sb-color-red);
}
.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked) ~ .dnb-switch__button .dnb-switch__focus {
--border-color: var(--sb-color-red);
--border-width: 0.0625rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus {
box-shadow: none;
}
.eufemia-scope--10_104_0 .dnb-switch {
/* stylelint-enable no-descending-specificity */
}
/*
* Table theme
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-table {
--table-th-background-color: var(--sb-color-white);
text-align: left;
}
.eufemia-scope--10_104_0 .dnb-table__th, .eufemia-scope--10_104_0 .dnb-table thead th {
padding: 0.5rem 1.5rem 0.25rem;
font-weight: var(--font-weight-medium);
}
.eufemia-scope--10_104_0 .dnb-table .dnb-table__tr--even {
background-color: var(--sb-color-gray-light-3);
}
.eufemia-scope--10_104_0 .dnb-table__td, .eufemia-scope--10_104_0 .dnb-table tbody .dnb-table__th, .eufemia-scope--10_104_0 .dnb-table tbody td, .eufemia-scope--10_104_0 .dnb-table tbody th {
padding: 1rem 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__td::after,
.eufemia-scope--10_104_0 .dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__th::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -0.0625rem;
bottom: 0;
z-index: 1;
pointer-events: none;
border-top: var(--table-border);
}
.eufemia-scope--10_104_0 .dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__td:last-child::after,
.eufemia-scope--10_104_0 .dnb-table thead + tbody .dnb-table__tr:first-child .dnb-table__th:last-child::after {
right: 0;
}
.eufemia-scope--10_104_0 .dnb-table {
/* BUTTONS INSIDE TABLE */
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button {
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
bottom: -0.0625rem;
left: 0;
opacity: 0;
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after {
color: var(--sb-color-violet);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) {
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]) {
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: -0.5rem;
bottom: 0;
right: -0.5rem;
height: inherit;
border-radius: inherit;
outline: none;
}
html[data-whatinput=mouse] .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: -0.5rem;
bottom: 0;
right: -0.5rem;
height: inherit;
border-radius: inherit;
outline: none;
}
html[data-whatinput=touch] .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .eufemia-scope--10_104_0 html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
top: -0.375rem;
bottom: -0.25rem;
left: -0.6875rem;
right: -0.4375rem;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
top: -0.375rem;
bottom: -0.25rem;
left: -0.6875rem;
right: -0.4375rem;
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible {
color: var(--sb-color-blue-dark);
}
.eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after {
visibility: hidden;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-table,
.eufemia-scope--10_104_0 .dnb-table__container {
--table-border-color: var(--sb-color-gray-light-2);
--table-outline-color: var(--sb-color-gray-light-2);
--table-accordion-border-color: var(--sb-color-gray-light-2);
--table-accordion-header-background: var(--sb-color-gray-light-2);
--table-accordion-icon-color: var(--sb-color-text);
--table-accordion-icon-color--active: var(--sb-color-violet);
--table-accordion-icon-color--disabled: var(--sb-color-gray-dark-2);
--table-accordion-outline-color: var(--sb-color-violet);
--table-accordion-outline-width: var(--table-accordion-border-width);
--table-accordion-outline-background--active: var(
--sb-color-gray-light-2
);
background-color: var(--sb-color-white);
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-table,
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-table__container {
--table-border-color: blue;
--table-outline-color: red;
--table-accordion-border-color: green;
}
/*
* Tabs theme for Sbanken
*
*/
.eufemia-scope--10_104_0 .dnb-tabs {
--tablist-border-color--default: var(--sb-color-gray-light-2);
--tab-focus-background-color: var(--sb-color-blue-light-3);
--tab-title-font-color: var(--sb-color-gray-dark-3);
--tab-title-font-weight: var(--font-weight-regular);
--tab-title-font-size: var(--font-size-basis);
--tab-title-background--hover: var(--sb-color-violet-light-4);
--tab-title-color--hover: var(--sb-color-violet);
--tab-title-border--hover: var(--sb-color-violet-light-4);
--tab-title-background--disabled: var(--sb-color-gray-light-2);
--tab-title-color--disabled: var(--sb-color-gray-dark-2);
--tab-title-border--active-selected: var(--sb-color-violet);
--tab-title-color--active-selected: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-tabs__button, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs .dnb-tabs__button {
padding: 0 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-tabs__button:focus::before, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs .dnb-tabs__button:focus::before {
z-index: -1;
}
.eufemia-scope--10_104_0 .dnb-tabs__button, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs .dnb-tabs__button {
/* stylelint-disable no-descending-specificity */
}
.eufemia-scope--10_104_0 .dnb-tabs__button:focus .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs .dnb-tabs__button:focus .dnb-tabs__button__title {
color: var(--sb-color-blue-dark);
}
.eufemia-scope--10_104_0 .dnb-tabs__button:not([disabled]).selected:focus .dnb-tabs__button__title, .eufemia-scope--10_104_0 .dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected:focus .dnb-tabs__button__title {
color: var(--sb-color-blue-dark);
}
/*
* Textarea theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-textarea {
--textarea-border-color: var(--sb-color-gray-dark-2);
--textarea-border-width: 0.0625rem;
--textarea-background-color: var(--color-white);
--textarea-color: var(--textarea-color--default);
--textarea-color--default: var(--color-black);
--textarea-color--active: var(--color-black);
--textarea-placeholder-color: var(--sb-color-gray-dark-3);
--textarea-placeholder-color--focus: var(--sb-color-gray-dark-3);
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea {
background-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-textarea__state {
transition: border-radius 0.25s ease-out;
}
.eufemia-scope--10_104_0 .dnb-textarea__resize--medium .dnb-textarea__shell::after {
opacity: 0.1;
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
--textarea-border-color: var(--sb-color-violet);
--textarea-border-width: 0.125rem;
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus {
--textarea-color: var(--textarea-color--active);
}
.eufemia-scope--10_104_0 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state {
--textarea-border-color: var(--sb-color-violet);
--textarea-border-radius: 1.5rem;
outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state {
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-textarea--disabled {
--textarea-color: var(--sb-color-gray-dark-2);
--textarea-background-color: var(--sb-color-gray-light);
--textarea-border-color: var(--sb-color-gray-dark-2);
}
.eufemia-scope--10_104_0 .dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) {
--textarea-color--default: var(--sb-color-red);
--textarea-color--active: var(--color-black);
}
.eufemia-scope--10_104_0 .dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) ~ .dnb-textarea__state {
--textarea-border-color: var(--sb-color-red);
}
/*
* ToggleButton theme for Sbanken
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-toggle-button__button {
background-color: var(--sb-color-white);
color: var(--sb-color-violet);
--border-color: var(--sb-color-violet);
--border-width: 0.09375rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-toggle-button__button:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-toggle-button__button:hover:not([disabled]) {
background-color: var(--sb-color-violet-light-3);
color: var(--sb-color-violet);
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-toggle-button__button:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-toggle-button__button:active:not([disabled]) {
--border-color: var(--sb-color-violet-light-3);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
background-color: var(--sb-color-violet);
color: var(--sb-color-violet-light-3);
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button[disabled] {
--border-color: var(--sb-color-gray-light);
--border-width: 0.09375rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
color: var(--sb-color-gray-dark);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button {
background-color: transparent;
border-color: var(--focus-ring-color);
box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot {
background-color: var(--focus-ring-color);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__button {
background-color: transparent;
border-color: var(--focus-ring-color);
box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx {
color: var(--focus-ring-color);
}
.eufemia-scope--10_104_0 .dnb-toggle-button {
/* stylelint-disable no-descending-specificity */
}
.eufemia-scope--10_104_0 .dnb-toggle-button--checked .dnb-toggle-button__button[disabled] {
--border-color: var(--sb-color-gray-light);
--border-width: 0.09375rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
background-color: var(--sb-color-gray-light);
color: var(--sb-color-gray-dark);
}
.eufemia-scope--10_104_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active) {
background-color: var(--sb-color-violet);
color: var(--sb-color-white);
box-shadow: none;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) {
background-color: var(--sb-color-violet);
color: var(--sb-color-white);
--border-color: var(--sb-color-violet);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]) {
--border-color: var(--sb-color-violet-light-3);
--border-width: 0.125rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
background-color: var(--sb-color-violet);
color: var(--sb-color-violet-light-3);
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus {
color: var(--sb-color-blue-dark-2);
background-color: var(--sb-color-blue-light-2);
}
.eufemia-scope--10_104_0 .dnb-toggle-button {
/* stylelint-enable no-descending-specificity */
}
/*
* Tooltip theme for Sbanken
*
*/
/*
* Upload theme for Sbanken
*
*/
.eufemia-scope--10_104_0 .dnb-upload {
--upload-background: var(--sb-color-white);
--upload-background--active: var(--sb-color-violet-light-4);
--upload-border: var(--sb-color-gray-dark-2);
--upload-border--active: var(--sb-color-violet);
--upload-list-border: var(--sb-color-gray);
--upload-icon--default: var(--sb-color-violet);
--upload-icon--warning: var(--sb-color-red);
--upload-highlight: var(--sb-color-yellow-light-3);
--upload-text--primary: var(--sb-color-text);
--upload-text--secondary: var(--sb-color-gray-dark-3);
}
/*
* ScrollView theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-drawer-list {
--drawer-list-height: 2.5rem;
--drawer-list-options-border-radius: 0 0 0.5rem 0.5rem;
--drawer-list-options-border-radius-reversed: 0.5rem 0.5rem 0 0;
--drawer-list-option-border-width: 0.125rem;
--drawer-list-option-border-color: transparent;
--drawer-list-option-inner-border-display: none;
--drawer-list-option-inner-background: transparent;
--drawer-list-list-background: var(--sb-color-white);
--drawer-list-list-option-background: transparent;
--drawer-list-option-disabled-background: var(--sb-color-gray-light);
--drawer-list-option-disabled-color: var(--sb-color-gray-dark);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__list {
margin-top: calc(-1 * var(--drawer-list-option-border-width));
border-radius: var(--drawer-list-options-border-radius);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__list:focus-visible {
outline: var(--sb-color-blue-dark) solid var(--drawer-list-option-border-width);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option__inner {
overflow: visible;
padding: 1rem 0.75rem;
margin: 0 var(--drawer-list-option-border-width);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option__inner::before {
content: "";
display: block;
position: absolute;
top: -1px;
left: 0.5rem;
width: calc(100% - 1rem);
height: 1px;
--border-color: var(--sb-color-gray-dark);
--border-width: 0.125rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__options {
--border-color: var(--sb-color-gray-dark-2);
--border-width: var(--drawer-list-option-border-width);
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
border-radius: var(--drawer-list-options-border-radius);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__group-title {
position: relative;
z-index: -1;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option {
box-shadow: inset 0 0 0 var(--drawer-list-option-border-width) var(--drawer-list-option-border-color);
background: var(--drawer-list-list-option-background);
z-index: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option__item.item-nr-1 {
font-weight: var(--font-weight-medium);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-drawer-list__option:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-drawer-list__option:hover:not([disabled]) {
--drawer-list-option-border-color: var(--sb-color-violet);
z-index: 1;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-drawer-list__option:hover:not([disabled]) .dnb-drawer-list__option__inner::before {
display: var(--drawer-list-option-inner-border-display);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-drawer-list__option:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-drawer-list__option:active:not([disabled]) {
--drawer-list-option-border-color: var(--sb-color-violet);
z-index: 1;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option:active:not([disabled]) .dnb-drawer-list__option__inner::before, html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-drawer-list__option:active:not([disabled]) .dnb-drawer-list__option__inner::before {
display: var(--drawer-list-option-inner-border-display);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option--selected {
--drawer-list-list-option-background: var(--sb-color-violet);
color: var(--sb-color-white);
border-right-color: var(--sb-color-gray-dark-2);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option--selected.last-item {
border-bottom-color: var(--sb-color-gray-dark-2);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::before {
display: var(--drawer-list-option-inner-border-display);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::after {
content: "";
grid-column: 2;
grid-row: 1/-1;
justify-self: end;
align-self: center;
width: 1rem;
height: 1rem;
background-size: cover;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk5OTYgMTEuMDU3M0wxNC42NjY2IDIuMzkwNjdMMTUuNjA5MyAzLjMzMzM0TDUuOTk5OTYgMTIuOTQyN0wwLjM5MDYyNSA3LjMzMzM0TDEuMzMzMjkgNi4zOTA2N0w1Ljk5OTk2IDExLjA1NzNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-drawer-list__option--selected .dnb-drawer-list__option__suffix {
z-index: 2;
background-color: var(--drawer-list-list-option-background);
}
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option.first-item .dnb-drawer-list__option__inner::before {
content: none;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option.last-item {
border-radius: var(--drawer-list-options-border-radius);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option:focus-visible, .eufemia-scope--10_104_0 .dnb-drawer-list__option--focus {
--drawer-list-option-border-color: var(--sb-color-blue-dark);
--drawer-list-list-option-background: var(--sb-color-blue-light-3);
color: var(--sb-color-blue-dark);
font-weight: var(--sb-font-weight-medium);
z-index: 1;
/* stylelint-disable no-descending-specificity */
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option:focus-visible .dnb-drawer-list__option__inner, .eufemia-scope--10_104_0 .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner {
--drawer-list-option-inner-background: transparent;
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option:focus-visible .dnb-drawer-list__option__inner::before, .eufemia-scope--10_104_0 .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before {
display: var(--drawer-list-option-inner-border-display);
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option:focus-visible .dnb-drawer-list__option__inner::after, .eufemia-scope--10_104_0 .dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::after {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk5OTYgMTEuMDU3M0wxNC42NjY2IDIuMzkwNjdMMTUuNjA5MyAzLjMzMzM0TDUuOTk5OTYgMTIuOTQyN0wwLjM5MDYyNSA3LjMzMzM0TDEuMzMzMjkgNi4zOTA2N0w1Ljk5OTk2IDExLjA1NzNaIiBmaWxsPSIjMDA1Q0ZGIi8+Cjwvc3ZnPgo=");
}
.eufemia-scope--10_104_0 .dnb-drawer-list__option:focus-visible, .eufemia-scope--10_104_0 .dnb-drawer-list__option--focus {
/* stylelint-enable no-descending-specificity */
}
.eufemia-scope--10_104_0 .dnb-drawer-list__triangle {
display: none;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--top .dnb-drawer-list__list {
border-radius: var(--drawer-list-options-border-radius-reversed);
margin-top: 0;
margin-bottom: calc(-1 * var(--drawer-list-option-border-width));
}
.eufemia-scope--10_104_0 .dnb-drawer-list--top .dnb-drawer-list__options {
border-radius: var(--drawer-list-options-border-radius-reversed);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--top .dnb-drawer-list__option.last-item {
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-drawer-list--top .dnb-drawer-list__option.first-item {
border-radius: var(--drawer-list-options-border-radius-reversed);
}
.eufemia-scope--10_104_0 .dnb-drawer-list--top .dnb-drawer-list__option--selected.first-item {
border-top-color: var(--sb-color-gray-dark-2);
}
.eufemia-scope--10_104_0 .dnb-text-counter.dnb-p {
color: var(--sb-color-gray-dark);
}
.eufemia-scope--10_104_0 .dnb-text-counter--exceeded.dnb-p {
color: var(--sb-color-red);
}
/*
* DatePicker theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input {
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input ~ .dnb-date-picker--separator {
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled]) {
color: var(--color-black);
}
.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled]) ~ .dnb-date-picker--separator {
color: var(--color-black);
}
.eufemia-scope--10_104_0 .dnb-date-picker__addon::after, .eufemia-scope--10_104_0 .dnb-date-picker__calendar::after {
background-color: var(--color-black-8);
}
.eufemia-scope--10_104_0 .dnb-date-picker__header {
--gap: 0.25rem;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: var(--gap);
}
.eufemia-scope--10_104_0 .dnb-date-picker__header::after {
background-color: var(--color-black-8);
}
.eufemia-scope--10_104_0 .dnb-date-picker__header--only-month-label {
justify-content: center;
margin-bottom: 1rem;
}
.eufemia-scope--10_104_0 .dnb-date-picker__header__row {
min-width: 60%;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: space-between;
}
.eufemia-scope--10_104_0 .dnb-date-picker__header__row--year {
min-width: calc(40% - var(--gap));
}
.eufemia-scope--10_104_0 .dnb-date-picker__header__nav .dnb-button {
box-shadow: none;
}
.eufemia-scope--10_104_0 .dnb-date-picker__header__title {
text-transform: capitalize;
text-align: center;
font-size: var(--font-size-basis);
font-weight: var(--font-weight-medium);
color: var(--color-black-80);
}
.eufemia-scope--10_104_0 .dnb-date-picker__labels__day {
text-transform: capitalize;
font-weight: var(--font-weight-medium);
color: var(--color-black-80);
}
.eufemia-scope--10_104_0 .dnb-date-picker__day, .eufemia-scope--10_104_0 .dnb-date-picker__labels__day {
text-align: center;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--today .dnb-button {
font-weight: var(--font-weight-medium);
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--today .dnb-button::after {
content: "";
position: absolute;
bottom: 0.1875rem;
height: 0.2188em;
width: 0.2188em;
pointer-events: none;
border-radius: 50%;
background-color: currentcolor;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--preview .dnb-button, .eufemia-scope--10_104_0 .dnb-date-picker__day--inactive .dnb-button, .eufemia-scope--10_104_0 .dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) .dnb-button:not(:hover) {
background-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--preview:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date), .eufemia-scope--10_104_0 .dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) {
background-color: var(--color-mint-green-50);
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive)::after, .eufemia-scope--10_104_0 .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive)::after {
background-color: var(--color-mint-green-50);
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive) .dnb-button, .eufemia-scope--10_104_0 .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive) .dnb-button {
color: var(--color-mint-green-25);
background-color: var(--color-emerald-green);
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover, .eufemia-scope--10_104_0 .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover {
box-shadow: none;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-date-picker__day--start-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-date-picker__day--end-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]) {
color: var(--color-mint-green-25);
background-color: var(--color-emerald-green);
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--disabled .dnb-button {
-webkit-text-decoration: line-through;
text-decoration: line-through;
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--inactive .dnb-button {
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-date-picker__day--inactive .dnb-button[disabled], .eufemia-scope--10_104_0 .dnb-date-picker__day--disabled .dnb-button[disabled] {
box-shadow: none;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-date-picker__day--inactive .dnb-button[disabled] {
cursor: default;
}
.eufemia-scope--10_104_0 .dnb-date-picker--opened .dnb-input .dnb-input__shell, .eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
--border-color: var(--color-sea-green);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary, .eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary {
color: var(--color-white);
background-color: var(--color-sea-green);
}
.eufemia-scope--10_104_0 .dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary::after, .eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary::after {
background-color: inherit;
}
.eufemia-scope--10_104_0 .dnb-date-picker__status--error:not(.dnb-date-picker--opened) .dnb-form-label:hover ~ .dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
--border-color: var(--color-fire-red);
--border-width: 0.125rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
/*
* Modal theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-drawer {
background: var(--color-white);
}
/*
* FormSet theme
*
*/
/*
* GlobalError theme
*
*/
/*
* Icon theme
*
*/
.eufemia-scope--10_104_0 .dnb-icon {
--icon-border-positioning: var(--icon-border-positioning--default, -25%);
}
.eufemia-scope--10_104_0 .dnb-icon--border {
position: relative;
vertical-align: baseline;
}
.eufemia-scope--10_104_0 .dnb-icon--border::after {
content: "";
position: absolute;
left: var(--icon-border-positioning);
right: var(--icon-border-positioning);
top: var(--icon-border-positioning);
bottom: var(--icon-border-positioning);
margin: auto;
border-radius: 50%;
border: 0.0875rem solid;
border-color: currentcolor;
}
/*
* Modal theme
*
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-modal__overlay {
--modal-overlay-bg: rgb(0 0 0 / 32%);
background-color: var(--modal-overlay-bg);
}
/*
* Np theme is provided
*
*/
/*
* Timeline theme
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
/*
* Button mixins
*
*/
.eufemia-scope--10_104_0 .dnb-timeline {
--timeline-icon-height--small: 1.5rem;
--timeline-icon-width--small: 1.5rem;
--timeline-icon-border-radius--small: calc(
var(--timeline-icon-height--small) / 2
);
--timeline-icon-height--medium: 2rem;
--timeline-icon-width--medium: 2rem;
--timeline-icon-border-radius--medium: calc(
var(--timeline-icon-height--medium) / 2
);
--timeline-icon-width-diff: calc(
(
var(--timeline-icon-width--medium) - var(
--timeline-icon-width--small
)
) / 2
);
--timeline-border-spacing: var(--spacing-small);
--timeline-border-spacing--icon-adjusted: calc(
var(--timeline-icon-width-diff) + var(--timeline-border-spacing)
);
}
.eufemia-scope--10_104_0 .dnb-timeline__item {
margin-left: var(--timeline-icon-width-diff);
}
.eufemia-scope--10_104_0 .dnb-timeline__item__label__icon {
width: var(--timeline-icon-width--small);
line-height: var(--timeline-icon-height--small);
border-radius: var(--timeline-icon-border-radius--small);
color: var(--color-black-80);
background-color: var(--color-white);
--border-color: var(--color-black-80);
--border-width: 0.0625rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-timeline__item__label__title {
margin-left: var(--timeline-border-spacing--icon-adjusted);
font-size: var(--font-size-small);
line-height: var(--line-height-small);
}
.eufemia-scope--10_104_0 .dnb-timeline__item__content {
margin-left: calc(var(--timeline-icon-width--small) / 2);
padding-left: calc(var(--timeline-icon-width--small) / 2 + var(--timeline-border-spacing--icon-adjusted));
border-left: 1px dashed var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-timeline__item--completed .dnb-timeline__item__content {
border-left: 1px solid var(--color-black-80);
}
.eufemia-scope--10_104_0 .dnb-timeline__item--completed .dnb-timeline__item__label__title {
color: var(--color-black-80);
}
.eufemia-scope--10_104_0 .dnb-timeline__item--current .dnb-timeline__item__content {
margin-left: calc(var(--timeline-icon-width--medium) / 2);
padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing));
}
.eufemia-scope--10_104_0 .dnb-timeline__item--current .dnb-timeline__item__label__title {
margin-left: var(--timeline-border-spacing);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-timeline__item--current .dnb-timeline__item__label__icon {
width: var(--timeline-icon-width--medium);
line-height: var(--timeline-icon-height--medium);
border-radius: var(--timeline-icon-border-radius--medium);
}
.eufemia-scope--10_104_0 .dnb-timeline__item--current {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
font-weight: var(--font-weight-basis);
color: var(--color-black-55);
}
.eufemia-scope--10_104_0 .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
color: var(--color-black-55);
background-color: var(--color-black-3);
--border-color: var(--color-black-3);
--border-width: 0.0625rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-timeline__item:only-child {
margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-timeline__item:last-child .dnb-timeline__item__content {
border-left: none;
}
/*
* ScrollView theme
*
*/
/*
* Utilities
*/
/**
* ATTENTION: This file is auto generated by using "themeFactory".
* But you still can change the content of this file on the very top.
*/
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-forms-field-array-selection {
--row-gap: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-forms-field-array-selection--variant-button {
--row-gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options {
display: flex;
flex-flow: column;
row-gap: var(--row-gap);
}
.eufemia-scope--10_104_0 .dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
line-height: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-array-selection--options-layout--horizontal .dnb-forms-field-array-selection__options {
display: flex;
flex-flow: row wrap;
column-gap: var(--spacing-small);
row-gap: var(--row-gap);
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
margin-bottom: 0;
}
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-forms-field-date-of-birth__month .dnb-forms-field-block__contents {
width: 10.75rem;
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-forms-field-date-of-birth__month .dnb-forms-field-block__contents {
width: 8rem;
}
}
.eufemia-scope--10_104_0 .dnb-forms-field-expiry .dnb-multi-input-mask {
width: var(--forms-field-width--small);
}
.eufemia-scope--10_104_0 .dnb-forms-field-expiry .dnb-multi-input-mask .dnb-input__shell {
justify-content: center;
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-forms-field-number {
--number-control-button-border-color: black;
--number-control-button-border-color--hover: darkgrey;
--number-control-button-border-color--focus: darkgrey;
--number-control-button-border-width--focus: 0.125rem;
--number-control-button-background-color--hover: grey;
--number-control-button-color--hover: black;
--number-control-button-background-color--active: black;
--number-control-button-color--active: lightgrey;
--number-control-button--error: red;
--number-control-button--error-contrast: white;
--number-control-button-width--small: 2rem;
--number-control-button-width--medium: 2.5rem;
--number-control-button-width--large: 3rem;
--forms-field-block--number-control-buttons-width--small: calc(
var(--number-control-button-width--small) * 2
);
--forms-field-block--number-control-buttons-width--medium: calc(
var(--number-control-button-width--medium) * 2
);
--forms-field-block--number-control-buttons-width--large: calc(
var(--number-control-button-width--large) * 2
);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input__input {
align-items: center;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border {
border-radius: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border, .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover, .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within {
box-shadow: none;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls > .dnb-input__border--root {
--input-border-inset: ;
--input-border-inset--hover: ;
--input-border-inset--active: ;
--input-border-inset--focus: ;
--input-border-inset--disabled: ;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled],
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]),
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]) {
background-color: var(--number-control-button-background-color--hover);
color: var(--number-control-button-color--hover);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled], .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]), .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]) {
background-color: var(--number-control-button-background-color--active);
color: var(--number-control-button-color--active);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before,
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after {
color: var(--number-control-button--error);
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover[disabled],
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover:not([disabled]),
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]) {
background-color: var(--number-control-button--error-contrast);
color: var(--number-control-button--error);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled], .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled] {
cursor: not-allowed;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]), .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]) {
background-color: var(--number-control-button--error);
color: var(--number-control-button--error-contrast);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled],
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled] {
color: var(--number-control-button--error-contrast);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled],
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled] {
background-color: var(--color-black-3);
color: var(--color-black-20);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small {
--field-block-content-width: calc(
var(--forms-field-width--small) +
var(--forms-field-block--number-control-buttons-width--small)
);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before,
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after {
width: var(--number-control-button-width--small);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium {
--field-block-content-width: calc(
var(--forms-field-width--medium) +
var(--forms-field-block--number-control-buttons-width--medium)
);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before,
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after {
width: var(--number-control-button-width--medium);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large {
--field-block-content-width: calc(
var(--forms-field-width--large) +
var(--forms-field-block--number-control-buttons-width--large)
);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before,
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after {
width: var(--number-control-button-width--large);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-before,
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-after {
width: var(--number-control-button-width--large);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch {
/* stylelint-disable-next-line no-descending-specificity */
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-input__border {
flex-grow: 1;
}
@media screen and (max-width: 15em) {
.eufemia-scope--10_104_0 .dnb-forms-field-number .dnb-input__shell {
width: 90%;
}
}
.eufemia-scope--10_104_0 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button {
color: var(--color-fire-red);
}
.eufemia-scope--10_104_0 .dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover {
color: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-forms-field-phone-number__country-code {
width: calc(var(--forms-field-width--medium) - 2rem);
}
.eufemia-scope--10_104_0 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
width: calc(var(--forms-field-width--medium) - 2rem);
}
.eufemia-scope--10_104_0 .dnb-forms-field-phone-number__number {
flex: 1;
}
.eufemia-scope--10_104_0 .dnb-forms-field-phone-number .dnb-form-label {
max-width: 14ch;
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-forms-field-postal-code-and-city__postal-code {
flex: 0 5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-postal-code-and-city__city {
flex: 1;
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label {
align-self: center;
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label, .eufemia-scope--10_104_0 .dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label {
align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
line-height: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list {
--outline-color: var(--color-black-8);
--outline-width: 0.0625rem;
--list-padding: 1rem;
--list-height: 4rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio-group__shell {
row-gap: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio-group__fieldset {
border-radius: 0.5rem;
--border-color: var(--outline-color);
--border-width: var(--outline-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
background-color: var(--color-white);
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio {
justify-content: center;
padding: calc((var(--list-height) - 1.5rem) / 2) var(--list-padding);
overflow: clip;
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-radio__input {
-webkit-appearance: none;
appearance: none;
transform: none;
left: calc(var(--list-padding) * -1);
width: 100vw;
height: var(--list-height);
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio .dnb-form-label {
padding-left: var(--list-padding);
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio {
position: relative;
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection__variant--radio-list .dnb-radio:not(:first-of-type)::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--outline-color);
height: var(--outline-width);
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection .dnb-forms-field-block__contents {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-forms-field-selection .dnb-radio-group .dnb-height-animation, .eufemia-scope--10_104_0 .dnb-forms-field-selection .dnb-radio-group > .dnb-flex-container, .eufemia-scope--10_104_0 .dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation, .eufemia-scope--10_104_0 .dnb-forms-field-selection .dnb-toggle-button-group > .dnb-flex-container {
width: 100%;
flex-grow: 1;
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label {
align-items: baseline;
}
@media screen and (max-width: 15em) {
.eufemia-scope--10_104_0 .dnb-forms-field-string .dnb-input__shell {
width: 90%;
}
}
.eufemia-scope--10_104_0 .dnb-forms-field-upload .dnb-help-button__content .dnb-section {
--outset-left: calc(var(--spacing-medium));
--outset-right: calc(var(--spacing-medium));
margin-left: var(--upload-border-width);
margin-right: var(--upload-border-width);
}
.eufemia-scope--10_104_0 .dnb-forms-field-upload .dnb-help-button__content .dnb-section::before {
z-index: 0;
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 {
--forms-field-width--small: 5rem;
--forms-field-width--medium: 11rem;
--forms-field-width--large: 21rem;
--forms-field-label-max-width--large: var(--prose-max-width);
}
.eufemia-scope--10_104_0 fieldset.dnb-forms-field-block:not([class*=space__top]) {
margin-top: 0;
}
.eufemia-scope--10_104_0 fieldset.dnb-forms-field-block:not([class*=space__bottom]) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 fieldset.dnb-forms-field-block:not([class*=space__left]) {
margin-left: 0;
}
.eufemia-scope--10_104_0 fieldset.dnb-forms-field-block:not([class*=space__right]) {
margin-right: 0;
}
.eufemia-scope--10_104_0 fieldset.dnb-forms-field-block {
padding: 0;
border: none;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid {
display: grid;
grid-template-columns: minmax(-webkit-min-content, var(--block-content-width, auto));
grid-template-columns: minmax(min-content, var(--block-content-width, auto));
grid-template-areas: "label" "help" "contents" "indicator" "status";
}
.eufemia-scope--10_104_0 .dnb-forms-field-block {
--label-margin: 0.25rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block--label-height-small {
--label-margin: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block--label-height-medium {
--label-margin: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block--label-height-large {
--label-margin: 0.7rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block--width-stretch {
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block--width-stretch label.dnb-form-label {
max-width: none;
}
@media screen and (min-width: 25.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block--width-custom {
width: calc(var(--dnb-forms-field-block-width));
}
.eufemia-scope--10_104_0 .dnb-forms-field-block--width-small {
width: var(--forms-field-width--small);
}
.eufemia-scope--10_104_0 .dnb-forms-field-block--width-medium {
width: var(--forms-field-width--medium);
}
.eufemia-scope--10_104_0 .dnb-forms-field-block--width-large {
width: var(--forms-field-width--large);
}
}
.eufemia-scope--10_104_0 .dnb-forms-field-block:not([class*="--content-width"]) {
--max-width: var(--forms-field-label-max-width--large);
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__label, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label {
grid-area: label;
display: flex;
max-width: var(--forms-field-label-max-width--large);
align-items: center;
margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__label__description, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label__description {
vertical-align: top;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__label__content:has(+ .dnb-help-button), .eufemia-scope--10_104_0 .dnb-forms-field-block__label__description:has(+ .dnb-help-button), .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label__content:has(+ .dnb-help-button), .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label__description:has(+ .dnb-help-button) {
margin-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description) .dnb-help-button, .eufemia-scope--10_104_0 .dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label:has(+ .dnb-help-button)) .dnb-forms-field-block__label__content, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description) .dnb-help-button, .eufemia-scope--10_104_0 .dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label:has(+ .dnb-help-button)) .dnb-forms-field-block__label.dnb-form-label__content, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label:has(+ .dnb-help-button)) .dnb-forms-field-block__label__content, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description, .dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+ .dnb-help-button), .dnb-forms-field-block__label.dnb-form-label:has(+ .dnb-help-button)) .dnb-forms-field-block__label.dnb-form-label__content {
margin-right: 0.3em;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__label .dnb-help-button__word-joiner, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label .dnb-help-button__word-joiner {
margin-left: 0.45em;
white-space: nowrap;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__label .dnb-help-button__word-joiner::before, .eufemia-scope--10_104_0 .dnb-forms-field-block__label.dnb-form-label .dnb-help-button__word-joiner::before {
content: "";
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
flex-wrap: wrap;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label {
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label {
margin-right: 1rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label {
margin-top: var(--label-margin);
margin-bottom: var(--label-margin);
}
@media screen and (max-width: 40em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label {
margin-bottom: calc(var(--label-margin) + 0.5rem);
}
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, -webkit-min-content), var(--dnb-forms-field-block-layout-width-max, -webkit-max-content)) auto;
grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto;
grid-template-areas: "label contents" ". help" ". indicator" ". status";
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content {
--help-button-indent-width: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section {
--rounded-corner: 0.25rem;
align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
align-self: end;
}
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__indicator {
grid-area: indicator;
position: relative;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__indicator .dnb-forms-submit-indicator__content {
position: absolute;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__help {
grid-area: help;
display: flex;
flex-flow: column;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__help .dnb-section {
margin-bottom: 1rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__help .dnb-section > .dnb-p--lead {
margin-bottom: 0.5rem;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section {
margin-top: 0.5rem;
margin-bottom: 0;
}
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__status {
grid-area: status;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__status .dnb-form-status__shell {
margin-top: var(--field-block-status-margin-top, 0.5rem);
margin-bottom: var(--field-block-status-margin-bottom, 0);
max-width: var(--prose-max-width);
}
@media screen and (max-width: 15em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block__status {
width: 90%;
}
}
.eufemia-scope--10_104_0 .dnb-forms-field-block--status-position-above .dnb-forms-field-block__grid {
grid-template-areas: "label" "help" "status" "contents" "indicator";
}
.eufemia-scope--10_104_0 .dnb-forms-field-block--status-position-above {
--field-block-status-margin-top: 0;
--field-block-status-margin-bottom: 0.5rem;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block--status-position-above .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
grid-template-areas: "label status" ". contents" ". help" ". indicator";
}
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__contents {
grid-area: contents;
display: flex;
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-stretch {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-custom {
--field-block-content-width: calc(
var(--dnb-forms-field-block-content-width)
);
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-small {
--field-block-content-width: var(--forms-field-width--small);
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-medium {
--field-block-content-width: var(--forms-field-width--medium);
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-large {
--field-block-content-width: var(--forms-field-width--large);
}
@media screen and (min-width: 25.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-custom, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-small, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-medium, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-large {
max-width: var(--field-block-content-width, none);
}
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-custom, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-small, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-medium, .eufemia-scope--10_104_0 .dnb-forms-field-block__contents--width-large {
width: var(--field-block-content-width, -webkit-max-content);
width: var(--field-block-content-width, max-content);
}
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__composition--vertical .dnb-forms-field-block__contents {
display: flex;
flex-flow: column;
row-gap: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
display: flex;
flex-flow: row;
column-gap: var(--spacing-small);
flex-wrap: wrap;
row-gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents > .dnb-forms-field-block--width-stretch {
flex: 1;
}
@media screen and (min-width: 25.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
align-items: flex-end;
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center] {
align-items: center;
}
}
@media screen and (max-width: 25em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {
row-gap: var(--spacing-x-small);
flex-flow: column;
}
}
@media screen and (max-width: 25em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-submit-indicator {
display: none;
}
}
@media screen and (min-width: 25.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-field-block__composition > .dnb-forms-field-block__grid > .dnb-forms-field-block__contents .dnb-forms-submit-indicator {
display: none;
}
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-forms-button-row {
display: flex;
flex-flow: row;
flex-wrap: wrap;
gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-card + .dnb-forms-button-row:not([class*=space__top]), .eufemia-scope--10_104_0 .dnb-card + .dnb-button--primary:not([class*=space__top]) {
margin-top: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-card + .dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top], .eufemia-scope--10_104_0 .dnb-card + .dnb-button--primary:not([class*=space__top]) .dnb-button[class*=space__top] {
margin-top: 0;
}
@media screen and (min-width: 40.00625em) {
.eufemia-scope--10_104_0 .dnb-card:not([style*="--outset"]) + .dnb-forms-button-row:not([class*=space__left]), .eufemia-scope--10_104_0 .dnb-card:not([style*="--outset"]) + .dnb-button--primary:not([class*=space__left]) {
margin-left: var(--spacing-medium);
}
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]) {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-main-heading + .dnb-help-button__content .dnb-section {
margin-top: 1rem;
}
.eufemia-scope--10_104_0 .dnb-forms-section-block {
--block-outline-color: var(--color-black-8);
--block-outline-width: var(--card-outline-width);
}
.eufemia-scope--10_104_0 .dnb-forms-section-block--error:has(.dnb-form-status--error):not(.dnb-forms-section-block--variant-basic) {
--block-outline-color: var(--color-fire-red);
--block-outline-width: 0.0625rem;
}
.eufemia-scope--10_104_0 .dnb-forms-section-block:not(.dnb-height-animation--hidden) {
display: flex;
flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-forms-section-block__inner {
flex: 1;
outline: none;
transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
transform: translateY(-2.5rem);
}
.eufemia-scope--10_104_0 .dnb-forms-section-block__inner .dnb-dl .dnb-dd {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-section-block--variant-basic {
--border-color: transparent;
--block-outline-color: transparent;
}
.eufemia-scope--10_104_0 .dnb-forms-section-block--variant-filled .dnb-forms-section-block__inner {
--space: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-forms-section-block--no-animation .dnb-forms-section-block__inner {
transform: translateY(0);
}
.eufemia-scope--10_104_0 .dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner {
transform: translateY(-0.5rem);
}
.eufemia-scope--10_104_0 .dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner {
transform: translateY(0);
}
.eufemia-scope--10_104_0 .dnb-forms-section-block .dnb-card, .eufemia-scope--10_104_0 .dnb-card .dnb-forms-section-block .dnb-card {
--card-outline-color: var(--block-outline-color);
--card-outline-width: var(--block-outline-width);
}
.eufemia-scope--10_104_0 .dnb-forms-section-block .dnb-card--filled.dnb-section, .eufemia-scope--10_104_0 .dnb-card .dnb-forms-section-block .dnb-card--filled.dnb-section {
--background-color: var(--color-lavender);
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]) {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
margin-bottom: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-forms-sub-heading + .dnb-help-button__content .dnb-section {
margin-top: 1rem;
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator {
--padding-left: 0.5em;
--font-animation: font-size var(--font-animation-duration, 400ms)
var(--easing-default);
--opacity-animation: opacity var(--opacity-animation-duration, 0ms)
var(--easing-default) var(--opacity-animation-delay, 0ms);
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator:has(.dnb-forms-submit-indicator__label) {
--font-animation-duration: 400ms;
--opacity-animation-duration: 400ms;
--opacity-animation-delay: 250ms;
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator {
display: inline;
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator__label {
padding: 0.5em 0;
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content {
align-items: center;
font-size: 0;
opacity: 0;
line-height: 1em;
will-change: font-size opacity;
transition: var(--font-animation), var(--opacity-animation);
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b {
padding-left: 0.125em;
color: var(--dots-color, currentColor);
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b:nth-of-type(1) {
padding-left: var(--padding-left);
animation-delay: 50ms;
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b:nth-of-type(2) {
animation-delay: 200ms;
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b:nth-of-type(3) {
animation-delay: 400ms;
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b {
opacity: 0.2;
animation-name: submit-indicator-dot;
animation-iteration-count: infinite;
animation-duration: 1.3s;
animation-delay: 200ms;
}
html[data-visual-test] .eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b {
animation: none;
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator__content b {
font-weight: var(--font-weight-bold);
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator--state-pending .dnb-forms-submit-indicator__content {
font-size: 1em;
opacity: 1;
}
.eufemia-scope--10_104_0 .dnb-forms-submit-indicator--inline-wrap .dnb-forms-submit-indicator__content {
display: flex;
--padding-left: 0.25em;
}
.eufemia-scope--10_104_0 .dnb-button .dnb-forms-submit-indicator__content {
cursor: inherit;
}
@keyframes submit-indicator-dot {
0% {
opacity: 0.2;
}
15% {
opacity: 1;
}
50% {
opacity: 1;
}
60% {
opacity: 0.3;
}
100% {
opacity: 0.2;
}
}
@keyframes submit-indicator-success {
0% {
opacity: 0.2;
font-size: 1em;
}
20% {
opacity: 1;
font-size: 1em;
}
80% {
opacity: 1;
}
85% {
opacity: 0.3;
font-size: 1em;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
font-size: 0;
}
}
.eufemia-scope--10_104_0 .dnb-forms-iterate__element {
outline: none;
}
.eufemia-scope--10_104_0 .dnb-forms-iterate:has(.dnb-forms-iterate__element.dnb-space__top--small) {
--block-gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-forms-iterate:has(.dnb-forms-iterate__element.dnb-space__top--medium) {
--block-gap: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-forms-iterate:has(.dnb-forms-iterate__element.dnb-space__top--large) {
--block-gap: var(--spacing-large);
}
.eufemia-scope--10_104_0 .dnb-forms-iterate > .dnb-forms-iterate__element:has(> .dnb-forms-section-block) {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-iterate > .dnb-forms-iterate__element:has(> .dnb-forms-section-block) .dnb-forms-section-block__inner {
margin-bottom: var(--block-gap, var(--spacing-large));
}
.eufemia-scope--10_104_0 .dnb-forms-iterate > .dnb-forms-iterate__element:has(> .dnb-forms-section-block):has(~ .dnb-forms-iterate__element) ~ .dnb-hr {
margin-top: 0;
margin-bottom: var(--block-gap);
}
.eufemia-scope--10_104_0 .dnb-forms-value-upload__item .dnb-progress-indicator {
display: inline-flex;
vertical-align: middle;
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 {
--forms-value-width--small: 30ch;
--forms-value-width--medium: 40ch;
--forms-value-width--large: var(--prose-max-width);
--forms-value-label-max-width--large: var(--prose-max-width);
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt, .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) > .dnb-dd > .dnb-dl, .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt:empty,
.eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dd:empty {
display: none;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd {
margin-bottom: var(--spacing-medium);
transition: margin-bottom 300ms var(--easing-default);
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type, .eufemia-scope--10_104_0 .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:has(~ .dnb-dt:empty ~ .dnb-dd:empty) {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block {
display: block;
font-size: var(--font-size-basis);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block:not(.dnb-forms-value-block__composition--horizontal) .dnb-forms-value-block__content {
display: block;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block--inline:not([class*=__composition]) {
display: inline-block;
font-size: inherit;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__label, .eufemia-scope--10_104_0 .dnb-forms-value-block__label strong {
font-weight: var(--font-weight-medium);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__label {
max-width: var(--forms-value-label-max-width--large);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__label .dnb-help-button__word-joiner {
margin-left: 0.45em;
white-space: nowrap;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__label .dnb-help-button__word-joiner::before {
content: "";
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__label:empty {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__help {
display: flex;
flex-flow: column;
}
.eufemia-scope--10_104_0 .dnb-card .dnb-forms-value-block__help {
flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__help .dnb-section {
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__help .dnb-section > .dnb-p--lead {
margin-bottom: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__placeholder {
color: var(--color-black-80);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-stretch {
width: 100%;
}
@media screen and (min-width: 25.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-small {
max-width: var(--forms-value-width--small);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-medium {
max-width: var(--forms-value-width--medium);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__content--max-width-large {
max-width: var(--forms-value-width--large);
}
}
.eufemia-scope--10_104_0 .dnb-forms-value-block span.dnb-height-animation {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
display: flex;
flex-flow: row;
flex-wrap: wrap;
row-gap: var(--row-gap, var(--spacing-medium));
column-gap: var(--column-gap, 0);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-none {
--column-gap: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small {
--column-gap: var(--spacing-xx-small);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small {
--column-gap: var(--spacing-x-small);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small {
--column-gap: var(--spacing-small);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium {
--column-gap: var(--spacing-medium);
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large {
--column-gap: var(--spacing-large);
}
@media screen and (min-width: 25.00625em) {
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
align-items: flex-start;
}
}
@media screen and (max-width: 25em) {
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)) {
--row-gap: var(--spacing-x-small);
flex-flow: row wrap;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
flex-flow: column;
}
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
/* stylelint-disable */
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl, .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl {
margin: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl > .dnb-dd, .eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl > .dnb-dd {
margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content .dnb-dt:empty ~ .dnb-dd {
margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
/* stylelint-enable */
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block {
display: flex;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label__content) {
margin-right: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label__content):has(> .dnb-forms-value-block__label:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content)):has(.dnb-forms-value-block__content) {
flex-direction: row-reverse;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__label__content):has(> .dnb-forms-value-block__label:not(.dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content)):has(.dnb-forms-value-block__content) > .dnb-forms-value-block__label {
margin-left: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
/* stylelint-disable */
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl .dnb-forms-value-block__help .dnb-section, .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl .dnb-forms-value-block__help .dnb-section {
margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl > .dnb-dt, .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl > .dnb-dt {
display: inline;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl > .dnb-dd, .eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl > .dnb-dd {
width: 100%;
}
.eufemia-scope--10_104_0 .dnb-forms-summary-list .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content {
/* stylelint-enable */
}
.eufemia-scope--10_104_0 .dnb-forms-value-block__help--next-line {
display: flex;
flex-basis: 100%;
}
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-forms-wizard-layout {
display: flex;
flex-flow: column wrap;
justify-content: stretch;
align-items: stretch;
column-gap: var(--spacing-x-large);
}
.eufemia-scope--10_104_0 .dnb-forms-wizard-layout__indicator {
flex: 0;
margin-bottom: 2rem;
}
.eufemia-scope--10_104_0 .dnb-forms-wizard-layout__contents {
flex: 1;
}
.eufemia-scope--10_104_0 .dnb-forms-wizard-layout__contents .dnb-forms-step {
outline: none;
}
.eufemia-scope--10_104_0 .dnb-forms-wizard-layout__contents .dnb-forms-step > .appear-fx,
.eufemia-scope--10_104_0 .dnb-forms-wizard-layout__contents .dnb-forms-button-row > .appear-fx {
--appear-opacity: 0;
--appear-offset: -0.25rem;
opacity: var(--appear-opacity);
transform: translate3d(var(--appear-offset), 0, 0);
animation: appear 600ms var(--easing-default) forwards;
animation-delay: calc(var(--element-index, 0) * 30ms);
}
@keyframes appear {
0% {
opacity: var(--appear-opacity);
transform: translate3d(var(--appear-offset), 0, 0);
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media screen and (max-width: 60em) {
.eufemia-scope--10_104_0 .dnb-forms-wizard-layout {
flex-direction: column;
justify-content: stretch;
align-items: stretch;
}
.eufemia-scope--10_104_0 .dnb-forms-wizard-layout__contents {
flex-basis: auto;
}
}
.eufemia-scope--10_104_0 .dnb-forms-test-element {
display: flex;
width: 100%;
border: 1px dashed #808080;
border-radius: 0.5rem;
color: #909090;
padding: 0.5rem 1rem;
}
/**
* NB: The content below is auto generated by the "themeFactory".
* You may want to update it by running "yarn build" locally.
*/
/*
* Utilities
*/
.eufemia-scope--10_104_0 .dnb-forms-field-number {
--number-control-button-border-color: var(--sb-color-purple-alternative);
--number-control-button-border-color--hover: var(
--sb-color-purple-alternative
);
--number-control-separator-color: var(--sb-color-violet-light-3);
--number-control-button-border-color--focus: var(--focus-ring-color);
--number-control-button-border-width--focus: var(--focus-ring-width);
--number-control-button-background-color--hover: var(
--sb-color-violet-light-3
);
--number-control-button-color--hover: var(--sb-color-purple-alternative);
--number-control-button-background-color--active: var(--sb-color-purple);
--number-control-button-color--active: var(--sb-color-violet-light-3);
--number-control-button--error: var(--sb-color-red);
--number-control-button--error-contrast: var(--sb-color-magenta-light-2);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button.dnb-button--size-small {
--button-height--small: 2.5rem;
--button-width--small: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input {
position: relative;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input::before, .eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input::after {
content: "";
position: absolute;
top: 0.25rem;
bottom: 0.25rem;
border-left: 1px solid var(--number-control-separator-color);
z-index: 1;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input::before {
left: -1px;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input::after {
right: -1px;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-input__border--root {
--input-border-color: var(--number-control-button-border-color);
--input-border-color--hover: var(
--number-control-button-border-color--hover
);
--input-border-color--active: var(
--number-control-button-border-color--active
);
--input-border-radius: var(--input-border-radius--active);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:not(:disabled):active ~ .dnb-input::before {
z-index: -1;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:not(:disabled):active {
z-index: 1;
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input__status--error {
--number-control-separator-color: var(
--number-control-button--error-contrast
);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled {
--number-control-separator-color: var(--sb-color-gray-dark);
}
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled],
.eufemia-scope--10_104_0 .dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled] {
color: var(--sb-color-gray-dark);
background-color: var(--sb-color-gray-light);
}
.eufemia-scope--10_104_0 .dnb-forms-field-block__label__description {
color: var(--sb-color-gray-dark);
font-size: var(--font-size-small);
}
.eufemia-scope--10_104_0 .dnb-forms-field-block:not([class*="--label-height-"]) {
--label-margin: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-forms-section-block--variant-filled .dnb-forms-section-block__inner {
--space: var(--spacing-small);
}
/* Sbanken theme */