/*
* DNB Textarea
*
*/
/**
 * 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 FormLabel
*
*/
/**
 * 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-form-label {
  font-family: 'Fedra Sans Std', sans-serif;
  font-family: var(--font-family-default);
  font-weight: normal;
  font-weight: var(--font-weight-default);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5rem;
  color: #333;
  color: var(--color-black-80, #333);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum";
          font-feature-settings: "lnum";
  /**
  * 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-form-label *,
  .dnb-form-label ::before,
  .dnb-form-label ::after {
    background-repeat: no-repeat;
    /* 1 */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 2 */ }
  .dnb-form-label ::before,
  .dnb-form-label ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
 * FormLabel component
 *
 */
.dnb-form-label {
  display: inline-block;
  width: auto;
  margin: 0;
  margin-right: 1rem;
  vertical-align: baseline;
  color: inherit; }
  .dnb-form-label--vertical {
    display: block;
    margin-right: 0;
    margin-bottom: 0.5rem; }
  .dnb-form-label[for]:not([disabled]) {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer; }
  .dnb-form-label[disabled] {
    cursor: not-allowed; }

/*
* DNB FormStatus
*
*/
/**
 * 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-form-status {
  font-family: 'Fedra Sans Std', sans-serif;
  font-family: var(--font-family-default);
  font-weight: normal;
  font-weight: var(--font-weight-default);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5rem;
  color: #333;
  color: var(--color-black-80, #333);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum";
          font-feature-settings: "lnum";
  /**
  * 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-form-status *,
  .dnb-form-status ::before,
  .dnb-form-status ::after {
    background-repeat: no-repeat;
    /* 1 */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 2 */ }
  .dnb-form-status ::before,
  .dnb-form-status ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
 * FormStatus component
 *
 */
.dnb-form-status {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 2rem;
  min-height: var(--input-height); }
  .dnb-form-status__shell {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 1rem;
    border-radius: calc(2rem / 2);
    border-radius: var(--input-border-radius); }
  .dnb-form-status--text {
    padding: 0.25rem 1rem;
    padding: calc(0.5rem / 2) 1rem;
    cursor: text;
    color: #14555a;
    color: var(--color-emerald-green);
    line-height: 1.5rem; }
  .dnb-icon + .dnb-form-status--text {
    padding-left: 0.5rem; }
  .dnb-form-status__shell > .dnb-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 1.5em;
    height: 1.5em;
    margin-left: 0.5rem;
    color: inherit;
    font-size: 1rem;
    border-radius: 50%;
    border: 1px solid;
    border-color: currentColor; }
  .dnb-form-status[hidden] {
    display: none; }
  .dnb-form-status--fade-in {
    height: 0;
    opacity: 0;
    -webkit-animation: fade-in 600ms ease-out 1 200ms forwards;
            animation: fade-in 600ms ease-out 1 200ms forwards; }

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
    height: 0; }
  to {
    opacity: 1;
    height: 2rem;
    height: var(--input-height); } }

@keyframes fade-in {
  from {
    opacity: 0;
    height: 0; }
  to {
    opacity: 1;
    height: 2rem;
    height: var(--input-height); } }

.dnb-textarea {
  font-family: 'Fedra Sans Std', sans-serif;
  font-family: var(--font-family-default);
  font-weight: normal;
  font-weight: var(--font-weight-default);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5rem;
  color: #333;
  color: var(--color-black-80, #333);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum";
          font-feature-settings: "lnum";
  /**
  * 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-textarea *,
  .dnb-textarea ::before,
  .dnb-textarea ::after {
    background-repeat: no-repeat;
    /* 1 */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 2 */ }
  .dnb-textarea ::before,
  .dnb-textarea ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
* Textarea component
*
*/
/*
* Textarea theme
*
*/
/**
 * This file is only used to make themes independent
 * so that they can get imported individually, without the core styles
 *
 */
/*
 * Utilities
 */
:root {
  --textarea-text-color: var(--color-sea-green);
  --textarea-text-color--focus: var(--color-sea-green);
  --textarea-text-color--changed: var(--color-emerald-green);
  --textarea-text-color--disabled: var(--color-sea-green-alt-30);
  --textarea-background-color: var(--color-white);
  --textarea-background-color--focus: var(--color-white);
  --textarea-background-color--changed: var(--color-white);
  --textarea-background-color--disabled: var(--color-mint-green-12); }

.dnb-textarea__textarea {
  border-radius: 0.5rem;
  /* IE11 fix */ }
  .dnb-textarea__textarea,
  .dnb-textarea--virgin .dnb-textarea__textarea,
  .dnb-textarea--initial .dnb-textarea__textarea {
    color: #007272;
    color: var(--textarea-text-color);
    background-color: #fff;
    background-color: var(--textarea-background-color); }
  .dnb-textarea--dirty .dnb-textarea__textarea {
    color: #14555a;
    color: var(--textarea-text-color--changed);
    background-color: #fff;
    background-color: var(--textarea-background-color--changed); }
  .dnb-textarea--focus .dnb-textarea__textarea, .dnb-textarea__textarea:focus, .dnb-textarea__textarea:hover {
    outline: none; }
    .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]), .dnb-textarea__textarea:focus:not([disabled]), .dnb-textarea__textarea:hover:not([disabled]) {
      color: #007272;
      color: var(--textarea-text-color--focus);
      background-color: #fff;
      background-color: var(--textarea-background-color--focus); }
      .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not(.status--error), .dnb-textarea__textarea:focus:not([disabled]):not(.status--error), .dnb-textarea__textarea:hover:not([disabled]):not(.status--error) {
        -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #14555a;
        -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #14555a;
                box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #14555a;
                box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #14555a;
        -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
                box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
        /* IE11 fix */ }
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not(.status--error), .dnb-textarea__textarea:focus:not([disabled]):not(.status--error), .dnb-textarea__textarea:hover:not([disabled]):not(.status--error) {
            -webkit-box-shadow: 0 0 0 0.125rem #14555a;
                    box-shadow: 0 0 0 0.125rem #14555a;
            -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
                    box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
  .dnb-textarea__textarea[disabled],
  .dnb-textarea--disabled .dnb-textarea__textarea {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    color: #b3dada;
    color: var(--textarea-text-color--disabled);
    background-color: #f4fbf9;
    background-color: var(--textarea-background-color--disabled);
    -webkit-box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 0.5625rem #b3dada;
    -webkit-box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 calc(0.5rem + 0.0625rem) #b3dada;
            box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 0.5625rem #b3dada;
            box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 calc(0.5rem + 0.0625rem) #b3dada;
    -webkit-box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30);
            box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30); }
    .dnb-textarea__textarea[disabled]::-webkit-scrollbar,
    .dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar {
      width: 0; }
  .dnb-textarea__textarea.status--error,
  .dnb-textarea__textarea .dnb-textarea__status--error {
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
    -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red);
            box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
  .dnb-textarea__textarea ::-moz-selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--textarea-text-color--focus);
    text-shadow: none; }
  .dnb-textarea__textarea ::selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--textarea-text-color--focus);
    text-shadow: none; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .dnb-textarea__textarea {
      -ms-overflow-style: -ms-autohiding-scrollba;
      -webkit-box-shadow: 0 0 0 0.0625rem #008484;
              box-shadow: 0 0 0 0.0625rem #008484;
      -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt);
              box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt); } }

.dnb-textarea__placeholder {
  color: #007272;
  color: var(--textarea-text-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-line-clamp: var(--textarea-rows, 2); }

.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea, .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:hover {
  -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
  -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
          box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
          box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
  -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red);
          box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }

.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder,
.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
  display: none; }

textarea.dnb-textarea {
  border-radius: 0.5rem;
  /* IE11 fix */ }
  textarea.dnb-textarea,
  .dnb-textarea--virgin textarea.dnb-textarea,
  .dnb-textarea--initial textarea.dnb-textarea {
    color: #007272;
    color: var(--textarea-text-color);
    background-color: #fff;
    background-color: var(--textarea-background-color); }
  .dnb-textarea--dirty textarea.dnb-textarea {
    color: #14555a;
    color: var(--textarea-text-color--changed);
    background-color: #fff;
    background-color: var(--textarea-background-color--changed); }
  .dnb-textarea--focus textarea.dnb-textarea, textarea.dnb-textarea:focus, textarea.dnb-textarea:hover {
    outline: none; }
    .dnb-textarea--focus textarea.dnb-textarea:not([disabled]), textarea.dnb-textarea:focus:not([disabled]), textarea.dnb-textarea:hover:not([disabled]) {
      color: #007272;
      color: var(--textarea-text-color--focus);
      background-color: #fff;
      background-color: var(--textarea-background-color--focus); }
      .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
        -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #14555a;
        -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #14555a;
                box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #14555a;
                box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #14555a;
        -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
                box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
        /* IE11 fix */ }
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
            -webkit-box-shadow: 0 0 0 0.125rem #14555a;
                    box-shadow: 0 0 0 0.125rem #14555a;
            -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
                    box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
  textarea.dnb-textarea[disabled],
  .dnb-textarea--disabled textarea.dnb-textarea {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    color: #b3dada;
    color: var(--textarea-text-color--disabled);
    background-color: #f4fbf9;
    background-color: var(--textarea-background-color--disabled);
    -webkit-box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 0.5625rem #b3dada;
    -webkit-box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 calc(0.5rem + 0.0625rem) #b3dada;
            box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 0.5625rem #b3dada;
            box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 calc(0.5rem + 0.0625rem) #b3dada;
    -webkit-box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30);
            box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30); }
    textarea.dnb-textarea[disabled]::-webkit-scrollbar,
    .dnb-textarea--disabled textarea.dnb-textarea::-webkit-scrollbar {
      width: 0; }
  textarea.dnb-textarea.status--error,
  textarea.dnb-textarea .dnb-textarea__status--error {
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
    -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red);
            box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
  textarea.dnb-textarea ::-moz-selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--textarea-text-color--focus);
    text-shadow: none; }
  textarea.dnb-textarea ::selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--textarea-text-color--focus);
    text-shadow: none; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    textarea.dnb-textarea {
      -ms-overflow-style: -ms-autohiding-scrollba;
      -webkit-box-shadow: 0 0 0 0.0625rem #008484;
              box-shadow: 0 0 0 0.0625rem #008484;
      -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt);
              box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt); } }

:root {
  --textarea-vertical-correction: 0.25rem;
  --textarea-padding-width: 0.5rem;
  --textarea-border-inner: 0 0 0 var(--textarea-padding-width)
    var(--color-white); }

.dnb-textarea {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0.5rem;
  margin: var(--textarea-padding-width); }
  .dnb-textarea__shell {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative; }
  .dnb-textarea__placeholder {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    padding: var(--textarea-padding-width);
    padding-top: 0.25rem;
    padding-top: calc( 0.5rem - 0.25rem);
    padding-top: calc(var(--textarea-padding-width) - var(--textarea-vertical-correction));
    padding-top: calc( var(--textarea-padding-width) - var(--textarea-vertical-correction));
    padding-bottom: 0.25rem;
    padding-bottom: var(--textarea-vertical-correction);
    line-height: 1.5rem; }
  .dnb-textarea__textarea {
    border: none;
    border-radius: 1px;
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.5625rem #008484;
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.0625rem) #008484;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.5625rem #008484;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.0625rem) #008484;
    -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt);
            box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt);
    padding: 0.5rem;
    padding: var(--textarea-padding-width);
    padding-top: 0.25rem;
    padding-top: calc( 0.5rem - 0.25rem);
    padding-top: calc(var(--textarea-padding-width) - var(--textarea-vertical-correction));
    padding-top: calc( var(--textarea-padding-width) - var(--textarea-vertical-correction));
    padding-bottom: 0.25rem;
    padding-bottom: var(--textarea-vertical-correction);
    line-height: 1.5rem; }
  .dnb-textarea__placeholder, .dnb-textarea__textarea {
    text-align: left; }
  .dnb-textarea__align--right .dnb-textarea__textarea,
  .dnb-textarea__align--right .dnb-textarea__placeholder {
    text-align: right; }
  .dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder,
  .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
    opacity: 0.5; }
  .dnb-textarea__form-status .dnb-form-status {
    margin: 1rem 0 0 -0.5rem;
    margin: 1rem 0 0 calc(1px - 1px - 0.5rem);
    margin: 1rem 0 0 calc(0px - var(--textarea-padding-width));
    margin: 1rem 0 0 calc(1px - 1px - var(--textarea-padding-width)); }

textarea.dnb-textarea {
  display: inline-block;
  margin: 0.5rem;
  margin: var(--textarea-padding-width);
  border: none;
  border-radius: 1px;
  -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.5625rem #008484;
  -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.0625rem) #008484;
          box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.5625rem #008484;
          box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.0625rem) #008484;
  -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt);
          box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt);
  padding: 0.5rem;
  padding: var(--textarea-padding-width);
  padding-top: 0.25rem;
  padding-top: calc( 0.5rem - 0.25rem);
  padding-top: calc(var(--textarea-padding-width) - var(--textarea-vertical-correction));
  padding-top: calc( var(--textarea-padding-width) - var(--textarea-vertical-correction));
  padding-bottom: 0.25rem;
  padding-bottom: var(--textarea-vertical-correction);
  line-height: 1.5rem;
  border-radius: 0.5rem;
  /* IE11 fix */ }
  textarea.dnb-textarea,
  .dnb-textarea--virgin textarea.dnb-textarea,
  .dnb-textarea--initial textarea.dnb-textarea {
    color: #007272;
    color: var(--textarea-text-color);
    background-color: #fff;
    background-color: var(--textarea-background-color); }
  .dnb-textarea--dirty textarea.dnb-textarea {
    color: #14555a;
    color: var(--textarea-text-color--changed);
    background-color: #fff;
    background-color: var(--textarea-background-color--changed); }
  .dnb-textarea--focus textarea.dnb-textarea, textarea.dnb-textarea:focus, textarea.dnb-textarea:hover {
    outline: none; }
    .dnb-textarea--focus textarea.dnb-textarea:not([disabled]), textarea.dnb-textarea:focus:not([disabled]), textarea.dnb-textarea:hover:not([disabled]) {
      color: #007272;
      color: var(--textarea-text-color--focus);
      background-color: #fff;
      background-color: var(--textarea-background-color--focus); }
      .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
        -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #14555a;
        -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #14555a;
                box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #14555a;
                box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #14555a;
        -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
                box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
        /* IE11 fix */ }
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
            -webkit-box-shadow: 0 0 0 0.125rem #14555a;
                    box-shadow: 0 0 0 0.125rem #14555a;
            -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
                    box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
  textarea.dnb-textarea[disabled],
  .dnb-textarea--disabled textarea.dnb-textarea {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    color: #b3dada;
    color: var(--textarea-text-color--disabled);
    background-color: #f4fbf9;
    background-color: var(--textarea-background-color--disabled);
    -webkit-box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 0.5625rem #b3dada;
    -webkit-box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 calc(0.5rem + 0.0625rem) #b3dada;
            box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 0.5625rem #b3dada;
            box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 calc(0.5rem + 0.0625rem) #b3dada;
    -webkit-box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30);
            box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30); }
    textarea.dnb-textarea[disabled]::-webkit-scrollbar,
    .dnb-textarea--disabled textarea.dnb-textarea::-webkit-scrollbar {
      width: 0; }
  textarea.dnb-textarea.status--error,
  textarea.dnb-textarea .dnb-textarea__status--error {
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
    -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red);
            box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
  textarea.dnb-textarea ::-moz-selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--textarea-text-color--focus);
    text-shadow: none; }
  textarea.dnb-textarea ::selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--textarea-text-color--focus);
    text-shadow: none; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    textarea.dnb-textarea {
      -ms-overflow-style: -ms-autohiding-scrollba;
      -webkit-box-shadow: 0 0 0 0.0625rem #008484;
              box-shadow: 0 0 0 0.0625rem #008484;
      -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt);
              box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt); } }
  label + textarea.dnb-textarea[class*='__form-status'] {
    vertical-align: baseline; }

.dnb-form-row--vertical > .dnb-textarea {
  -webkit-transform: translateY(2px);
          transform: translateY(2px); }

.dnb-form-row:not(.dnb-form-row--vertical):not(.dnb-form-row--vertical) > .dnb-textarea, .dnb-form-row--horizontal:not(.dnb-form-row--vertical) > .dnb-textarea {
  -webkit-transform: translateY(-0.25rem);
  -webkit-transform: translateY(calc(1px - 1px - 0.25rem));
          transform: translateY(-0.25rem);
          transform: translateY(calc(1px - 1px - 0.25rem));
  -webkit-transform: translateY(calc(0px - var(--textarea-vertical-correction)));
  -webkit-transform: translateY(calc(1px - 1px - var(--textarea-vertical-correction)));
          transform: translateY(calc(0px - var(--textarea-vertical-correction)));
          transform: translateY(calc(1px - 1px - var(--textarea-vertical-correction)));
  margin-top: 0; }
