/*
* DNB Grid
*
*/
/**
 * 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-grid {
  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-grid *,
  .dnb-grid ::before,
  .dnb-grid ::after {
    background-repeat: no-repeat;
    /* 1 */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 2 */ }
  .dnb-grid ::before,
  .dnb-grid ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
 * Grid element
 *
 */
/*
 * Grid and units
 */
.dnb-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0; }

.dnb-grid__cell {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1em;
  line-height: 1rem;
  padding: 0;
  margin: 9; }

.dnb-grid--flex-cells > .dnb-grid__cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.dnb-grid--top {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }

.dnb-grid--bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; }

.dnb-grid--center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.dnb-grid--justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.dnb-grid--justify-space-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.dnb-grid__cell--top {
  -ms-flex-item-align: start;
      align-self: flex-start; }

.dnb-grid__cell--bottom {
  -ms-flex-item-align: end;
      align-self: flex-end; }

.dnb-grid__cell--center {
  -ms-flex-item-align: center;
      align-self: center; }

.dnb-grid__cell--auto-size {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none; }

.dnb-grid--fit > .dnb-grid__cell {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

.dnb-grid--full > .dnb-grid__cell {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%; }

.dnb-grid--1of2 > .dnb-grid__cell {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%; }

.dnb-grid--1of3 > .dnb-grid__cell {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%; }

.dnb-grid--1of4 > .dnb-grid__cell {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%; }

@media screen and (min-width: 40em) {
  .dnb-small-grid--fit > .dnb-grid__cell {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }
  .dnb-small-grid--full > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%; }
  .dnb-small-grid--1of2 > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%; }
  .dnb-small-grid--1of3 > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%; }
  .dnb-small-grid--1of4 > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%; } }

@media screen and (min-width: 50em) {
  .dnb-med-grid--fit > .dnb-grid__cell {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }
  .dnb-med-grid--full > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%; }
  .dnb-med-grid--1of2 > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%; }
  .dnb-med-grid--1of3 > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%; }
  .dnb-med-grid--1of4 > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%; } }

@media screen and (min-width: 60em) {
  .dnb-large-grid--fit > .dnb-grid__cell {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }
  .dnb-large-grid--full > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%; }
  .dnb-large-grid--1of2 > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%; }
  .dnb-large-grid--1of3 > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%; }
  .dnb-large-grid--1of4 > .dnb-grid__cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%; } }

.dnb-grid--gutters {
  margin: -0.5rem 0 0.5rem -0.5rem; }

.dnb-grid--gutters > .dnb-grid__cell {
  padding: 0.5rem 0 0 0.5rem; }

.dnb-grid--gutters-l {
  margin: -1.5rem 0 1.5rem -1.5rem; }

.dnb-grid--gutters-l > .dnb-grid__cell {
  padding: 1.5rem 0 0 1.5rem; }

.dnb-grid--gutters-xl {
  margin: -2rem 0 2rem -2rem; }

.dnb-grid--gutters-xl > .dnb-grid__cell {
  padding: 2rem 0 0 2rem; }

@media screen and (min-width: 40em) {
  .dnb-small-grid--gutters {
    margin: -0.5rem 0 0.5rem -0.5rem; }
  .dnb-small-grid--gutters > .dnb-grid__cell {
    padding: 0.5rem 0 0 0.5rem; }
  .dnb-small-grid--gutters-l {
    margin: -1.5rem 0 1.5rem -1.5rem; }
  .dnb-small-grid--gutters-l > .dnb-grid__cell {
    padding: 1.5rem 0 0 1.5rem; }
  .dnb-small-grid--gutters-xl {
    margin: -2rem 0 2rem -2rem; }
  .dnb-small-grid--gutters-xl > .dnb-grid__cell {
    padding: 2rem 0 0 2rem; } }

@media screen and (min-width: 50em) {
  .dnb-med-grid--gutters {
    margin: -0.5rem 0 0.5rem -0.5rem; }
  .dnb-med-grid--gutters > .dnb-grid__cell {
    padding: 0.5rem 0 0 0.5rem; }
  .dnb-med-grid--gutters-l {
    margin: -1.5rem 0 1.5rem -1.5rem; }
  .dnb-med-grid--gutters-l > .dnb-grid__cell {
    padding: 1.5rem 0 0 1.5rem; }
  .dnb-med-grid--gutters-xl {
    margin: -2rem 0 2rem -2rem; }
  .dnb-med-grid--gutters-xl > .dnb-grid__cell {
    padding: 2rem 0 0 2rem; } }

@media screen and (min-width: 60em) {
  .dnb-large-grid--gutters {
    margin: -0.5rem 0 0.5rem -0.5rem; }
  .dnb-large-grid--gutters > .dnb-grid__cell {
    padding: 0.5rem 0 0 0.5rem; }
  .dnb-large-grid--gutters-l {
    margin: -1.5rem 0 1.5rem -1.5rem; }
  .dnb-large-grid--gutters-l > .dnb-grid__cell {
    padding: 1.5rem 0 0 1.5rem; }
  .dnb-large-grid--gutters-xl {
    margin: -2rem 0 2rem -2rem; }
  .dnb-large-grid--gutters-xl > .dnb-grid__cell {
    padding: 2rem 0 0 2rem; } }

.u-full {
  width: 100% !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: none !important;
          flex: none !important; }

.u-1of2 {
  width: 50% !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: none !important;
          flex: none !important; }

.u-1of3 {
  width: 33.33333% !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: none !important;
          flex: none !important; }

.u-2of3 {
  width: 66.6667% !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: none !important;
          flex: none !important; }

.u-1of4 {
  width: 25% !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: none !important;
          flex: none !important; }

.u-3of4 {
  width: 75% !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: none !important;
          flex: none !important; }

@media screen and (min-width: 40em) {
  .u-small-full {
    width: 100% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-small-1of2 {
    width: 50% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-small-1of3 {
    width: 33.33333% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-small-2of3 {
    width: 66.6667% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-small-1of4 {
    width: 25% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-small-3of4 {
    width: 75% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; } }

@media screen and (min-width: 50em) {
  .u-med-full {
    width: 100% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-med-1of2 {
    width: 50% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-med-1of3 {
    width: 33.33333% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-med-2of3 {
    width: 66.6667% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-med-1of4 {
    width: 25% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-med-3of4 {
    width: 75% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; } }

@media screen and (min-width: 60em) {
  .u-large-full {
    width: 100% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-large-1of2 {
    width: 50% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-large-1of3 {
    width: 33.33333% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-large-2of3 {
    width: 66.6667% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-large-1of4 {
    width: 25% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; }
  .u-large-3of4 {
    width: 75% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important; } }
