@dnb/eufemia 9.23.0-beta.3 → 9.23.0-beta.4

package/es/components/date-picker/style/dnb-date-picker.css

@@ -150,6 +150,198 @@
           -ms-flex: none;
               flex: none; } }
 
+/*
+* DNB Tooltip
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-tooltip {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-tooltip *,
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Tooltip component
+*
+*/
+.dnb-tooltip {
+  position: absolute;
+  z-index: 3100;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 1rem;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 200ms ease-out;
+  transition: opacity 200ms ease-out; }
+  .dnb-tooltip--large {
+    padding: 0.25rem 1rem; }
+  .dnb-tooltip--animate_position {
+    -webkit-transition: all 300ms ease-in-out, opacity 200ms ease-out;
+    transition: all 300ms ease-in-out, opacity 200ms ease-out; }
+  .dnb-tooltip--active {
+    visibility: visible;
+    /*
+      because of the first "show" we also use animation
+      also, use forwards because of the usage of visibility
+    */
+    -webkit-animation: show-tooltip 200ms ease-out forwards;
+            animation: show-tooltip 200ms ease-out forwards; }
+  html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
+    -webkit-animation: show-tooltip 1ms ease-out forwards;
+            animation: show-tooltip 1ms ease-out forwards; }
+  .dnb-tooltip--hide {
+    visibility: visible;
+    -webkit-animation: hide-tooltip 200ms ease-in-out forwards;
+            animation: hide-tooltip 200ms ease-in-out forwards; }
+  .dnb-tooltip--hide.dnb-tooltip--no-animation {
+    -webkit-animation: hide-tooltip 1ms ease-out forwards;
+            animation: hide-tooltip 1ms ease-out forwards; }
+  .dnb-tooltip--fixed {
+    position: fixed; }
+  html[data-visual-test] .dnb-tooltip--hide {
+    -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
+            animation: hide-tooltip 1ms ease-out 1s forwards; }
+  .dnb-tooltip__content {
+    min-width: 2rem;
+    min-height: 1.5rem;
+    padding: 0; }
+  .dnb-tooltip__arrow {
+    position: absolute;
+    pointer-events: none;
+    margin: 0;
+    width: 1rem;
+    height: 0.5rem;
+    overflow: hidden; }
+    .dnb-tooltip__arrow::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 1rem;
+      height: 1rem;
+      -webkit-transform: translateY(70%) rotate(45deg);
+              transform: translateY(70%) rotate(45deg); }
+    .dnb-tooltip__arrow__position--bottom {
+      top: -0.5rem; }
+    .dnb-tooltip__arrow__position--top {
+      bottom: -0.5rem;
+      -webkit-transform: rotate(180deg);
+              transform: rotate(180deg); }
+    .dnb-tooltip__arrow__position--left {
+      right: -0.75rem;
+      margin-right: 3px;
+      -webkit-transform: rotate(90deg);
+              transform: rotate(90deg); }
+    .dnb-tooltip__arrow__position--right {
+      left: -0.75rem;
+      margin-left: 3px;
+      -webkit-transform: rotate(270deg);
+              transform: rotate(270deg); }
+    .dnb-tooltip__arrow__arrow--left {
+      -ms-flex-item-align: start;
+          align-self: flex-start; }
+    .dnb-tooltip__arrow__arrow--right {
+      -ms-flex-item-align: end;
+          align-self: flex-end; }
+
+@-webkit-keyframes show-tooltip {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+@keyframes show-tooltip {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+@-webkit-keyframes hide-tooltip {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0;
+    visibility: hidden; } }
+
+@keyframes hide-tooltip {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0;
+    visibility: hidden; } }
+
 /*
 * DNB FormStatus
 *
@@ -711,6 +903,185 @@ button.dnb-button::-moz-focus-inner {
           -ms-flex: none;
               flex: none; } }
 
+/*
+* DNB Tooltip
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-tooltip {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-tooltip *,
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Tooltip component
+*
+*/
+.dnb-tooltip {
+  position: absolute;
+  z-index: 3100;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 1rem;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 200ms ease-out;
+  transition: opacity 200ms ease-out; }
+  .dnb-tooltip--large {
+    padding: 0.25rem 1rem; }
+  .dnb-tooltip--animate_position {
+    -webkit-transition: all 300ms ease-in-out, opacity 200ms ease-out;
+    transition: all 300ms ease-in-out, opacity 200ms ease-out; }
+  .dnb-tooltip--active {
+    visibility: visible;
+    /*
+      because of the first "show" we also use animation
+      also, use forwards because of the usage of visibility
+    */
+    -webkit-animation: show-tooltip 200ms ease-out forwards;
+            animation: show-tooltip 200ms ease-out forwards; }
+  html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
+    -webkit-animation: show-tooltip 1ms ease-out forwards;
+            animation: show-tooltip 1ms ease-out forwards; }
+  .dnb-tooltip--hide {
+    visibility: visible;
+    -webkit-animation: hide-tooltip 200ms ease-in-out forwards;
+            animation: hide-tooltip 200ms ease-in-out forwards; }
+  .dnb-tooltip--hide.dnb-tooltip--no-animation {
+    -webkit-animation: hide-tooltip 1ms ease-out forwards;
+            animation: hide-tooltip 1ms ease-out forwards; }
+  .dnb-tooltip--fixed {
+    position: fixed; }
+  html[data-visual-test] .dnb-tooltip--hide {
+    -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
+            animation: hide-tooltip 1ms ease-out 1s forwards; }
+  .dnb-tooltip__content {
+    min-width: 2rem;
+    min-height: 1.5rem;
+    padding: 0; }
+  .dnb-tooltip__arrow {
+    position: absolute;
+    pointer-events: none;
+    margin: 0;
+    width: 1rem;
+    height: 0.5rem;
+    overflow: hidden; }
+    .dnb-tooltip__arrow::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 1rem;
+      height: 1rem;
+      -webkit-transform: translateY(70%) rotate(45deg);
+              transform: translateY(70%) rotate(45deg); }
+    .dnb-tooltip__arrow__position--bottom {
+      top: -0.5rem; }
+    .dnb-tooltip__arrow__position--top {
+      bottom: -0.5rem;
+      -webkit-transform: rotate(180deg);
+              transform: rotate(180deg); }
+    .dnb-tooltip__arrow__position--left {
+      right: -0.75rem;
+      margin-right: 3px;
+      -webkit-transform: rotate(90deg);
+              transform: rotate(90deg); }
+    .dnb-tooltip__arrow__position--right {
+      left: -0.75rem;
+      margin-left: 3px;
+      -webkit-transform: rotate(270deg);
+              transform: rotate(270deg); }
+    .dnb-tooltip__arrow__arrow--left {
+      -ms-flex-item-align: start;
+          align-self: flex-start; }
+    .dnb-tooltip__arrow__arrow--right {
+      -ms-flex-item-align: end;
+          align-self: flex-end; }
+
+@keyframes show-tooltip {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+@keyframes hide-tooltip {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0;
+    visibility: hidden; } }
+
 /*
 * DNB FormLabel
 *
@@ -1561,6 +1932,185 @@ legend.dnb-form-label {
           -ms-flex: none;
               flex: none; } }
 
+/*
+* DNB Tooltip
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-tooltip {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-tooltip *,
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Tooltip component
+*
+*/
+.dnb-tooltip {
+  position: absolute;
+  z-index: 3100;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 1rem;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 200ms ease-out;
+  transition: opacity 200ms ease-out; }
+  .dnb-tooltip--large {
+    padding: 0.25rem 1rem; }
+  .dnb-tooltip--animate_position {
+    -webkit-transition: all 300ms ease-in-out, opacity 200ms ease-out;
+    transition: all 300ms ease-in-out, opacity 200ms ease-out; }
+  .dnb-tooltip--active {
+    visibility: visible;
+    /*
+      because of the first "show" we also use animation
+      also, use forwards because of the usage of visibility
+    */
+    -webkit-animation: show-tooltip 200ms ease-out forwards;
+            animation: show-tooltip 200ms ease-out forwards; }
+  html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
+    -webkit-animation: show-tooltip 1ms ease-out forwards;
+            animation: show-tooltip 1ms ease-out forwards; }
+  .dnb-tooltip--hide {
+    visibility: visible;
+    -webkit-animation: hide-tooltip 200ms ease-in-out forwards;
+            animation: hide-tooltip 200ms ease-in-out forwards; }
+  .dnb-tooltip--hide.dnb-tooltip--no-animation {
+    -webkit-animation: hide-tooltip 1ms ease-out forwards;
+            animation: hide-tooltip 1ms ease-out forwards; }
+  .dnb-tooltip--fixed {
+    position: fixed; }
+  html[data-visual-test] .dnb-tooltip--hide {
+    -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
+            animation: hide-tooltip 1ms ease-out 1s forwards; }
+  .dnb-tooltip__content {
+    min-width: 2rem;
+    min-height: 1.5rem;
+    padding: 0; }
+  .dnb-tooltip__arrow {
+    position: absolute;
+    pointer-events: none;
+    margin: 0;
+    width: 1rem;
+    height: 0.5rem;
+    overflow: hidden; }
+    .dnb-tooltip__arrow::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 1rem;
+      height: 1rem;
+      -webkit-transform: translateY(70%) rotate(45deg);
+              transform: translateY(70%) rotate(45deg); }
+    .dnb-tooltip__arrow__position--bottom {
+      top: -0.5rem; }
+    .dnb-tooltip__arrow__position--top {
+      bottom: -0.5rem;
+      -webkit-transform: rotate(180deg);
+              transform: rotate(180deg); }
+    .dnb-tooltip__arrow__position--left {
+      right: -0.75rem;
+      margin-right: 3px;
+      -webkit-transform: rotate(90deg);
+              transform: rotate(90deg); }
+    .dnb-tooltip__arrow__position--right {
+      left: -0.75rem;
+      margin-left: 3px;
+      -webkit-transform: rotate(270deg);
+              transform: rotate(270deg); }
+    .dnb-tooltip__arrow__arrow--left {
+      -ms-flex-item-align: start;
+          align-self: flex-start; }
+    .dnb-tooltip__arrow__arrow--right {
+      -ms-flex-item-align: end;
+          align-self: flex-end; }
+
+@keyframes show-tooltip {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+@keyframes hide-tooltip {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0;
+    visibility: hidden; } }
+
 /*
 * DNB FormStatus
 *
@@ -2274,6 +2824,185 @@ legend.dnb-form-label {
           -ms-flex: none;
               flex: none; } }
 
+/*
+* DNB Tooltip
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-tooltip {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-tooltip *,
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Tooltip component
+*
+*/
+.dnb-tooltip {
+  position: absolute;
+  z-index: 3100;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 1rem;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 200ms ease-out;
+  transition: opacity 200ms ease-out; }
+  .dnb-tooltip--large {
+    padding: 0.25rem 1rem; }
+  .dnb-tooltip--animate_position {
+    -webkit-transition: all 300ms ease-in-out, opacity 200ms ease-out;
+    transition: all 300ms ease-in-out, opacity 200ms ease-out; }
+  .dnb-tooltip--active {
+    visibility: visible;
+    /*
+      because of the first "show" we also use animation
+      also, use forwards because of the usage of visibility
+    */
+    -webkit-animation: show-tooltip 200ms ease-out forwards;
+            animation: show-tooltip 200ms ease-out forwards; }
+  html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
+    -webkit-animation: show-tooltip 1ms ease-out forwards;
+            animation: show-tooltip 1ms ease-out forwards; }
+  .dnb-tooltip--hide {
+    visibility: visible;
+    -webkit-animation: hide-tooltip 200ms ease-in-out forwards;
+            animation: hide-tooltip 200ms ease-in-out forwards; }
+  .dnb-tooltip--hide.dnb-tooltip--no-animation {
+    -webkit-animation: hide-tooltip 1ms ease-out forwards;
+            animation: hide-tooltip 1ms ease-out forwards; }
+  .dnb-tooltip--fixed {
+    position: fixed; }
+  html[data-visual-test] .dnb-tooltip--hide {
+    -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
+            animation: hide-tooltip 1ms ease-out 1s forwards; }
+  .dnb-tooltip__content {
+    min-width: 2rem;
+    min-height: 1.5rem;
+    padding: 0; }
+  .dnb-tooltip__arrow {
+    position: absolute;
+    pointer-events: none;
+    margin: 0;
+    width: 1rem;
+    height: 0.5rem;
+    overflow: hidden; }
+    .dnb-tooltip__arrow::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 1rem;
+      height: 1rem;
+      -webkit-transform: translateY(70%) rotate(45deg);
+              transform: translateY(70%) rotate(45deg); }
+    .dnb-tooltip__arrow__position--bottom {
+      top: -0.5rem; }
+    .dnb-tooltip__arrow__position--top {
+      bottom: -0.5rem;
+      -webkit-transform: rotate(180deg);
+              transform: rotate(180deg); }
+    .dnb-tooltip__arrow__position--left {
+      right: -0.75rem;
+      margin-right: 3px;
+      -webkit-transform: rotate(90deg);
+              transform: rotate(90deg); }
+    .dnb-tooltip__arrow__position--right {
+      left: -0.75rem;
+      margin-left: 3px;
+      -webkit-transform: rotate(270deg);
+              transform: rotate(270deg); }
+    .dnb-tooltip__arrow__arrow--left {
+      -ms-flex-item-align: start;
+          align-self: flex-start; }
+    .dnb-tooltip__arrow__arrow--right {
+      -ms-flex-item-align: end;
+          align-self: flex-end; }
+
+@keyframes show-tooltip {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+@keyframes hide-tooltip {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0;
+    visibility: hidden; } }
+
 /*
 * DNB FormStatus
 *