﻿/* ------------------------------------------------
* 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. Green - 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
 --------------------------------------------------*/
.wd-CMFM-DTMP {
  width: 1152px;
  margin: 0 auto 24px auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }
  @media only screen and (max-width: 1199px) {
    .wd-CMFM-DTMP {
      width: -webkit-calc(100% - (2 * 24px));
      width: -moz-calc(100% - (2 * 24px));
      width: -ms-calc(100% - (2 * 24px));
      width: -o-calc(100% - (2 * 24px));
      width: calc(100% - (2 * 24px)); } }
  @media only screen and (max-width: 1007px) {
    .wd-CMFM-DTMP {
      width: -webkit-calc(100% - (2 * 34px));
      width: -moz-calc(100% - (2 * 34px));
      width: -ms-calc(100% - (2 * 34px));
      width: -o-calc(100% - (2 * 34px));
      width: calc(100% - (2 * 34px));
      margin: 0px auto 36px auto; } }
  @media only screen and (max-width: 767px) {
    .wd-CMFM-DTMP {
      width: 100%;
      padding-left: 15px;
      padding-right: 15px; } }

/* ------------------------------------------------
 * 2.2. Container Base Spaced Mobile
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.1. Column 1on2 
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.2. Column 1on3 
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.3. Column 2on3 
 --------------------------------------------------*/
@media only screen and (max-width: 1007px) {
 }
@media only screen and (max-width: 767px) {
 }

@media only screen and (max-width: 1007px) {
 }
@media only screen and (max-width: 767px) {
 }

@media only screen and (max-width: 1007px) {
 }
@media only screen and (max-width: 767px) {
 }

@media only screen and (max-width: 1007px) {
 }
@media only screen and (max-width: 767px) {
 }

@media only screen and (max-width: 1007px) {
 }

@media only screen and (max-width: 1007px) {
 }

html[lang=fr] .wd-CMFM-DTMP input[type=text], html[lang=nl] .wd-CMFM-DTMP input[type=text], html[lang=en] .wd-CMFM-DTMP input[type=text] {
  background-image: none; }

.wd-CMFM-DTMP {
  margin-top: 25px;
  margin-bottom: 25px; }
  .wd-CMFM-DTMP > header {
    margin-bottom: 15px; }
  .wd-CMFM-DTMP label > .HelpTip {
    float: none;
    margin-top: 0; }
  .wd-CMFM-DTMP #result-simulator {
    position: relative; }
    .wd-CMFM-DTMP #result-simulator > .empty-element {
      display: block;
      position: relative;
      background-color: #e3dcd3;
      border: 2px dashed #c3bbaf;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border-radius: 10px;
      margin-top: 25px;
      margin-bottom: 25px;
      padding-top: 25px;
      padding-bottom: 25px; }
      .wd-CMFM-DTMP #result-simulator > .empty-element::before {
        font-family: 'FontAwesome';
        content: '\f0f1';
        display: inline-block;
        position: relative;
        color: #c3bbaf;
        text-align: center;
        line-height: 50px;
        width: 50px;
        height: 50px;
        font-size: 25px;
        border: 1px dotted #c3bbaf;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); }
    .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information) {
      position: relative;
      padding: 30px;
      margin-top: 25px;
      overflow: visible;
      background-color: #00a7a6;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border-radius: 10px;
      color: #fff; }
      .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information) h2 {
        margin-bottom: 15px;
        color: #fff;
        line-height: 30px; }
        .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information) h2::before {
          font-family: 'FontAwesome';
          content: '\f0f1';
          margin-right: 10px;
          border: 2px solid #fff;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          display: inline-block; }
      .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)::before {
        content: '';
        position: absolute;
        top: -40px;
        width: 0;
        height: 0;
        border: 20px transparent solid;
        border-bottom-color: #00a7a6;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); }
      .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)::after {
        content: '';
        visibility: hidden;
        display: block;
        font-size: 0;
        clear: both;
        height: 0; }
      .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)#dtmp_LessThan75000 {
        background-color: #e7803f; }
        .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)#dtmp_LessThan75000::before {
          border-bottom-color: #e7803f; }
      .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)#dtmp_RentAndSell {
        background-color: #00a7a6; }
        .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)#dtmp_RentAndSell::before {
          border-bottom-color: #00a7a6; }
      .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)#dtmp_Sell {
        background-color: #efb434; }
        .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)#dtmp_Sell::before {
          border-bottom-color: #efb434; }
      .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)#dtmp_Rent {
        background-color: #7a8d9b; }
        .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)#dtmp_Rent::before {
          border-bottom-color: #7a8d9b; }
      .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)#dtmp_Basic {
        background-color: #89a2b6; }
        .wd-CMFM-DTMP #result-simulator > div:not(#dtmp_information)#dtmp_Basic::before {
          border-bottom-color: #89a2b6; }

/*# sourceMappingURL=DiagnosticToolMedicalProfessional.css.map */