/* ------------------------------------------------
* 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 --------------------------------------------------*/
#IBSG-Tabbed.tabbedPane, body > .wd_CMFM-IBSG-Generator, body > .wd_CMFM-IBSG-Convertor { width: 1152px; margin: 0 auto 24px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

@media only screen and (max-width: 1199px) { #IBSG-Tabbed.tabbedPane, body > .wd_CMFM-IBSG-Generator, body > .wd_CMFM-IBSG-Convertor { 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) { #IBSG-Tabbed.tabbedPane, body > .wd_CMFM-IBSG-Generator, body > .wd_CMFM-IBSG-Convertor { 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) { #IBSG-Tabbed.tabbedPane, body > .wd_CMFM-IBSG-Generator, body > .wd_CMFM-IBSG-Convertor { 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  --------------------------------------------------*/
#IBSG-Tabbed.tabbedPane { margin-top: 25px; }

.wd_CMFM-IBSG-Generator > header, .wd_CMFM-IBSG-Convertor > header { margin-top: 25px; margin-bottom: 25px; }

.wd_CMFM-IBSG-Generator .form-group, .wd_CMFM-IBSG-Convertor .form-group { overflow: hidden; }

.wd_CMFM-IBSG-Generator label, .wd_CMFM-IBSG-Convertor label { display: block; position: relative; }

.wd_CMFM-IBSG-Generator label::before, .wd_CMFM-IBSG-Convertor label::before { position: relative; margin-right: 10px; top: 5px; }

.wd_CMFM-IBSG-Generator input.account-part, .wd_CMFM-IBSG-Convertor input.account-part { width: auto; float: left; }

.wd_CMFM-IBSG-Generator input.account-part + span, .wd_CMFM-IBSG-Convertor input.account-part + span { float: left; display: inline-block; height: 50px; line-height: 50px; padding: 0 5px; font-weight: 700; }

.wd_CMFM-IBSG-Generator footer, .wd_CMFM-IBSG-Convertor footer { clear: both; padding-top: 30px; text-align: center; overflow: hidden; }

.wd_CMFM-IBSG-Generator footer label, .wd_CMFM-IBSG-Convertor footer label { margin-bottom: 0; }

.wd_CMFM-IBSG-Generator footer button, .wd_CMFM-IBSG-Convertor footer button { float: none; }

.wd_CMFM-IBSG-Generator .leftColumn, .wd_CMFM-IBSG-Convertor .leftColumn { float: left; clear: left; width: 48%; }

@media only screen and (max-width: 767px) { .wd_CMFM-IBSG-Generator .leftColumn, .wd_CMFM-IBSG-Convertor .leftColumn { width: auto; display: block; clear: left; float: none; } }

.wd_CMFM-IBSG-Generator .rightColumn, .wd_CMFM-IBSG-Convertor .rightColumn { float: left; margin-left: 4%; width: 48%; }

@media only screen and (max-width: 767px) { .wd_CMFM-IBSG-Generator .rightColumn, .wd_CMFM-IBSG-Convertor .rightColumn { margin-left: 0; width: auto; display: block; clear: left; float: none; } }

@media only screen and (max-width: 767px) { .wd_CMFM-IBSG-Generator fieldset, .wd_CMFM-IBSG-Convertor fieldset { border: 0; background: none; padding: 0; } }

@media only screen and (max-width: 767px) { .wd_CMFM-IBSG-Generator fieldset input[type=text], .wd_CMFM-IBSG-Convertor fieldset input[type=text] { padding-right: 5px; padding-left: 5px; } }

.wd_CMFM-IBSG-Generator fieldset .account-part[maxlength="3"], .wd_CMFM-IBSG-Convertor fieldset .account-part[maxlength="3"] { width: 60px; }

.wd_CMFM-IBSG-Generator fieldset .account-part[maxlength="2"], .wd_CMFM-IBSG-Convertor fieldset .account-part[maxlength="2"] { width: 55px; }

@media only screen and (max-width: 767px) { body { padding-left: 15px; padding-right: 15px; }
  #IBSG-Tabbed.tabbedPane { padding-left: 0; padding-right: 0; } }

/*# sourceMappingURL=IbanBicStickerGenerator.css.map */