@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
/* ------------------------------------------------
* 1.1. Primary Colors
--------------------------------------------------*/
/* ------------------------------------------------
* 1.2. Secondary Colors
--------------------------------------------------*/
/* ------------------------------------------------
* 1.3. Web-only greys
--------------------------------------------------*/
/* ------------------------------------------------
* 1.4. Colours for graphs and illustrations
--------------------------------------------------*/
/* ------------------------------------------------
* 1.5. Widget Colours
--------------------------------------------------*/
/* ------------------------------------------------
* 2.1. Blue-Grey - Primary Action - buttonType01
--------------------------------------------------*/
/* ------------------------------------------------
* 2.2. Soft-Grey - Action - buttonType02
--------------------------------------------------*/
/* ------------------------------------------------
* 2.3. Ruby - Call to Action - buttonType03
--------------------------------------------------*/
/* ------------------------------------------------
* 2.4. Links
--------------------------------------------------*/
/* ------------------------------------------------
* 2.5. Input
--------------------------------------------------*/
/* ------------------------------------------------
* 3.1. Definitions of content widths
--------------------------------------------------*/
/* ------------------------------------------------
* 3.2. Definitions of content gutters
--------------------------------------------------*/
/* ------------------------------------------------
* 3.3. Definition of Breakpoints for Media Queries
--------------------------------------------------*/
/* ------------------------------------------------
* 3.4. Definition of grid elements
--------------------------------------------------*/
/* ------------------------------------------------
* 4.1. Prefix for icons
--------------------------------------------------*/
/* ------------------------------------------------
* 4.2. Codes for icons
--------------------------------------------------*/
/* ==========================================================================
   @mixins
   ========================================================================== */
/*
 * Documentation about mixin with SASS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins
 * 
 * ------------------------------------------------------
 * Table of Contents
 * ------------------------------------------------------
 * 
 * 1. Mixins Global
 *    1.1. (V)Align Center for element [align-center($orientation)]
 *    1.2. Text Color for the different state of a link <a>
 *    1.3. Calculation element (percent value and other value like em, pc etc...)
 *    1.4. Alignment placeholder
 *    1.5. Font-Face code generator
 * 
 * 2. Mixins for Media Queries
 *    2.1. Media Queries "min-width" [at-least($device-width)]
 *    2.2. Media Queries "max-width" [until($device-width)]
 *    2.3. Media Queries "max-width" and "min-width" [for-device($device)]
 *    2.4. Media Queries retina devices
 *    2.5. Media Queries "min-width" [from-device($device-width)]
 * 
 * 3. Mixins for Print
 *    3.1. Media Queries for Print [print($value)]
 *    3.2. Shortcut for hidde Element only for Print [no-print]
 * 
 * 4. Mixins for Grid
 * 
 * 5. Mixins for Animation
 *    5.1. Keyframes
 * 
 * 6. Mixins for Icon Font
 *    6.1. Icon After
 * 
 */
/* -------------------------------------------------------------
   * 1.1. (V)Align Center for element [align-center($orientation)]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 1.2. Text Color for the different state of a link <a>
   ---------------------------------------------------------------*/
/* ---------------------------------------------------------------------------
   * 1.3. Calculation element (percent value and other value like em, pc etc...)
   -----------------------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 1.4. Alignment placeholder
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 1.5. Font-Face code generator
   ---------------------------------------------------------------*/
/* 
    * -------------------------------------------
    * Example the code taht we use:
    * -------------------------------------------
     
      @include font-face-belfius('BelfiusNormalLight', 
          'belfiusnormal_light.woff',
          'belfiusnormal_light.ttf',
          'belfiusnormal_light.svg', 
          'belfiusnormal_regular.eot',
         normal, normal
      );
    
    ---------------------------------------------
    */
/* -------------------------------------------------------------
   * 2.1. Media Queries "min-width" [at-least($device-width)]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 2.2. Media Queries "max-width" [until($device-width)]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 2.3. Media Queries "max-width" and "min-width" 
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 2.4. Media Queries retina devices 
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 2.5. Media Queries "min-width" [from-device($device-width)]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 3.1. Media Queries for Print [print($value)]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 3.2. Shortcut for hidde Element only for Print [no-print]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 5.1. Keyframes
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 5.2. Single-Animation
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 6.1. Icon After
   ---------------------------------------------------------------*/
/* ==========================================================================
   @functions
   ========================================================================== */
/*
 * Documentation about function with SASS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#function_directives
 * 
 * ------------------------------------------------------
 * Table of Contents
 * ------------------------------------------------------
 * 
 * 1. Grid Column(s) Size
 *    
 * 
 */
/* ------------------------------------------------
 * 2.1. Container Base
 --------------------------------------------------*/
/* ------------------------------------------------
 * 2.2. Container Base Spaced Mobile
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.1. Column 1on2 
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.2. Column 1on3 
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.3. Column 2on3 
 --------------------------------------------------*/
html {
  font-size: 14px; }

body {
  background: #FAFAFA; }

h1, h2, h3 {
  color: #d1184d; }

h1, h2, h3, h4 {
  /*line-height: 1.2;*/
  margin-bottom: 9px; }

h1 {
  font-size: 2.35rem; }

h2 {
  font-size: 1.75rem; }

h3 {
  font-size: 1.45rem; }

h4 {
  font-size: 1.143rem;
  font-weight: bold;
  font-family: Montserrat; }

h5 {
  font-size: 0.857rem;
  color: #979faa; }

p {
  margin-bottom: 15px; }

ul {
  overflow: visible; }
  ul li {
    list-style-type: disc;
    margin-left: 15px; }
    ul li::before {
      content: none; }

.grid {
  width: 1152px;
  margin: 0 auto;
  position: relative; }

[class^='col-'], [class*=' col-'] {
  float: left;
  /*background: grey;*/
  height: 100%;
  /*padding: 5px;*/
  /*border: 2px solid white;*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 10px; }
  [class^='col-'] > .content, [class*=' col-'] > .content {
    padding: 11px 18px;
    margin-left: 10px;
    margin-right: 10px; }
  [class^='col-'].group-1 > .content, [class*=' col-'].group-1 > .content {
    margin-left: 0;
    margin-right: 0; }
  [class^='col-'] > .content--bordered, [class*=' col-'] > .content--bordered {
    border: 2px solid #D2D2D7;
    border-radius: 3px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden; }
  [class^='col-'] > .content--zero-margin, [class*=' col-'] > .content--zero-margin {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0; }

.col-12 {
  width: calc(100%); }

.col-11 {
  width: calc((100%/12)*11); }

.col-10 {
  width: calc((100%/12)*10); }

.col-9 {
  width: calc((100%/12)*9); }

.col-8 {
  width: calc((100%/12)*8); }

.col-7 {
  width: calc((100%/12)*7); }

.col-6, .col-half {
  width: calc(100%/2); }

.group-1.col-half--left > .content {
  height: 100%;
  margin-right: 5px; }

.group-1.col-half--right > .content {
  height: 100%;
  margin-left: 5px; }

.col-5 {
  width: calc((100%/12)*5); }

.col-4 {
  width: calc((100%/12)*4); }

.col-3 {
  width: calc((100%/12)*3); }

.col-2 {
  width: calc((100%/12)*2); }

.col-1 {
  width: calc(100%/12); }

.mt-15 {
  margin-top: 15px; }

.bond__title {
  margin-bottom: 16px; }

.tooltip-well {
  background: lightgrey;
  border-radius: 3px;
  padding: 13px 16px;
  position: relative; }
  .tooltip-well .content {
    margin: 0;
    padding: 0; }
    .tooltip-well .content h3 {
      color: inherit; }
  .tooltip-well--top::before {
    content: '';
    position: absolute;
    left: 30px;
    top: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 6px 5px;
    border-color: transparent transparent lightgrey transparent; }

.table {
  width: 100%; }
  .table tr td {
    padding-top: 6px;
    padding-bottom: 6px; }
    .table tr td.icon-col {
      width: 30px; }
  .table.table--bordered tr {
    border-bottom: 1px solid lightgrey; }

.par-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2; }

.bond__risks > .content {
  overflow-y: auto; }

.icon_size {
  width: 170px; }

.riskLevelFSMA--withLabel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0 15px 4px; }
  .riskLevelFSMA--withLabel .icon_size {
    width: 44px !important;
    height: auto;
    display: block; }
  .riskLevelFSMA--withLabel h4 {
    margin: 0;
    line-height: 1; }

.risk-meter {
  list-style-type: none; }
  .risk-meter > li {
    display: block;
    float: left;
    padding: 15px;
    font-size: 16px;
    margin: 0;
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    border-left: 1px solid lightgrey; }
    .risk-meter > li:last-of-type {
      border-right: 1px solid lightgrey; }
    .risk-meter > li::before {
      content: none; }
    .risk-meter > li.active {
      color: #d1184d;
      font-size: 24px; }

.promo > h3 {
  display: inline-block;
  width: 100%;
  line-height: 100%; }
  .promo > h3 > i, .promo > h3 > span {
    vertical-align: middle; }
  .promo > h3 > .belfius-icon-discount {
    font-size: 3rem; }

[data-dialog-text] {
  cursor: pointer;
  position: relative;
  color: #435c6b;
  font-size: 14px; }

.dialog {
  position: absolute;
  background: #e3dcd3;
  border-radius: 3px;
  padding: 15px;
  width: 300px;
  border: 1px solid #c3bbaf;
  z-index: 999; }
  @media (max-width: 767px) {
    .dialog {
      left: 5px;
      right: 5px;
      width: auto; } }
  .dialog .dialog-content {
    font-family: Arial;
    font-size: 14px;
    line-height: 20px;
    color: #435c6b;
    font-weight: normal; }
    .dialog .dialog-content .close-button {
      position: absolute;
      top: 7px;
      right: 7px;
      cursor: pointer;
      color: grey; }
      .dialog .dialog-content .close-button::before {
        content: '\e613';
        font-family: BelfiusIconFont; }

@media (max-width: 1151px) {
  .grid {
    width: 100%;
    padding: 16px; }
  .col-half {
    margin-bottom: 25px; }
  [class^='col-']:not(.col-half), [class*=' col-']:not(.col-half) {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 25px; }
  [class^='col-']:not(.col-half) > .content, [class*=' col-']:not(.col-half) > .content {
    margin-left: 0;
    margin-right: 0; }
  .par-2 {
    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto; } }

@media (max-width: 767px) {
  html {
    font-size: 14px; }
  h1 {
    font-size: 1.714rem; }
  h2 {
    font-size: 1.429rem; }
  h3 {
    font-size: 1.286rem; }
  .grid {
    width: 100%;
    padding: 16px; }
  .group-1.col-half > .content {
    margin-left: 0;
    margin-right: 0; }
  [class^='col-'], [class*=' col-'] {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 25px; }
  [class^='col-'] > .content, [class*=' col-'] > .content {
    margin-left: 0;
    margin-right: 0; }
  .risk-meter > li {
    padding: 12px; } }

.dialog-trigger--sidebar + .dialog,
.dialog-trigger--sidebar ~ .dialog {
  width: 240px;
  max-width: calc(100% - 20px);
  right: 10px;
  left: auto; }
  .dialog-trigger--sidebar + .dialog .dialog-content .close-button,
  .dialog-trigger--sidebar ~ .dialog .dialog-content .close-button {
    top: 10px;
    right: 10px; }