@font-face {
    font-family: bw-muli-black;
    src: url("../fonts/woff/Muli-Black.woff") format('woff'),
    url("../fonts/otf/Muli-Black.otf") format('opentype'),
    url("../fonts/ttf/Muli-Black.ttf") format('truetype');

}

@font-face {
    font-family: bw-muli-black-italic;
    src: url('../fonts/otf/Muli-BlackItalic.otf') format('opentype'),
    url('../fonts/ttf/Muli-BlackItalic.ttf') format('truetype'),
    url('../fonts/woff/Muli-BlackItalic.woff') format('woff');
}

@font-face {
    font-family: bw-muli-bold;
    src: url('../fonts/otf/Muli-Bold.otf') format('opentype'),
    url('../fonts/ttf/Muli-Bold.ttf') format('truetype'),
    url('../fonts/woff/Muli-Bold.woff') format('woff');
}

@font-face {
    font-family: bw-muli-bold-italic;
    src: url('../fonts/otf/Muli-BoldItalic.otf') format('opentype'),
    url('../fonts/ttf/Muli-BoldItalic.ttf') format('truetype'),
    url('../fonts/woff/Muli-BoldItalic.woff') format('woff');
}

@font-face {
    font-family: bw-muli-extra-bold;
    src: url('../fonts/otf/Muli-ExtraBold.otf') format('opentype'),
    url('../fonts/ttf/Muli-ExtraBold.ttf') format('truetype'),
    url('../fonts/woff/Muli-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: bw-muli-extra-bold-italic;
    src: url('../fonts/otf/Muli-ExtraBoldItalic.otf') format('opentype'),
    url('../fonts/ttf/Muli-ExtraBoldItalic.ttf') format('truetype'),
    url('../fonts/woff/Muli-ExtraBoldItalic.woff') format('woff');
}

@font-face {
    font-family: bw-muli-extra-light;
    src: url('../fonts/otf/Muli-ExtraLight.otf') format('opentype'),
    url('../fonts/ttf/Muli-ExtraLight.ttf') format('truetype'),
    url('../fonts/woff/Muli-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: bw-muli-extra-light-italic;
    src: url('../fonts/otf/Muli-ExtraLightItalic.otf') format('opentype'),
    url('../fonts/ttf/Muli-ExtraLightItalic.ttf') format('truetype'),
    url('../fonts/woff/Muli-ExtraLightItalic.woff') format('woff');
}

@font-face {
    font-family: bw-muli-italic;
    src: url('../fonts/otf/Muli-Italic.otf') format('opentype'),
    url('../fonts/ttf/Muli-Italic.ttf') format('truetype'),
    url('../fonts/woff/Muli-Italic.woff') format('woff');
}

@font-face {
    font-family: bw-muli-light;
    src: url('../fonts/otf/Muli-Light.otf') format('opentype'),
    url('../fonts/ttf/Muli-Light.ttf') format('truetype'),
    url('../fonts/woff/Muli-Light.woff') format('woff');
}

@font-face {
    font-family: bw-muli-regular;
    src: url('../fonts/otf/Muli-Regular.otf') format('opentype'),
    url('../fonts/ttf/Muli-Regular.ttf') format('truetype'),
    url('../fonts/woff/Muli-Regular.woff') format('woff');
}

@font-face {
    font-family: bw-muli-semi-bold;
    src: url('../fonts/otf/Muli-SemiBold.otf') format('opentype'),
    url('../fonts/ttf/Muli-SemiBold.ttf') format('truetype'),
    url('../fonts/woff/Muli-SemiBold.woff') format('woff');
}

@font-face {
    font-family: bw-mercury-regular;
    src: url('../fonts/otf/Mercury.otf') format('opentype'),
    url('../fonts/ttf/Mercury.ttf') format('truetype'),
    url('../fonts/woff/Mercury.woff') format('woff');
}

@font-face {
    font-family: bw-mercury-bold;
    src: url('../fonts/otf/Mercury-Bold.otf') format('opentype'),
    url('../fonts/ttf/Mercury-Bold.ttf') format('truetype'),
    url('../fonts/woff/Mercury-Bold.woff') format('woff');
}

/******************************************************
    CUSTOM INPUT
*****************************************************/

.customDivInput, .customDivSelect {
    display: block;
    height: 52px;
    border: 1px solid #DDE2E8;
    padding: 0 8px;
    position: relative;
    border-radius: 4px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: #FFFFFF;
    box-shadow: inset 0 1px 3px 0 rgba(15, 28, 58, 0.25);
    color: #0F1C3A;
}

.customDivInput input.baseInput {
    border: none;
    font-size: 0.938em;
    font-family: bw-muli-regular;
    outline: 0;
    margin-top: 21px;
    margin-left: 16px;
    width: 95%;
}

.invalidFieldValue {
    border-color: #FF0000;
    box-shadow: none;
}

.baseLabel {
    font-size: 0.625em;
    position: absolute;
    transform-origin: top left;
    padding-left: 16px;
    transform: translate(0, 20px) scale(1);
    transition: all .1s ease-in-out;
    font-family: bw-muli-semi-bold;
    color: #0F1C3A;
}

.mandatory::after {
    content: "*";
}

.reference::before {
    content: "*";
}

.numberReference::before {
    content: "¹";
}

.percent::after {
    content: "%";
}

.euros::after {
    content: "€";
}

.customDivInput.active select {
    transform: translate(0, 9px) scale(1);
    color: #5334C4;
}

.customDivInput.active label.baseLabel {
    transform: translate(0, 9px) scale(1);
    color: #5334C4;
}

/* new select */

.customDivSelect:focus {
    border: solid 1px #5334C4;
    box-shadow: none;
    outline: none;
}

.customDivSelect.customElementSelected span.customDropDownLabel {
    transform: translate(0, -10px) scale(1);
    color: #5334C4;
}

span.customDropDownLabelRemovable:not([data-dropdownselectedvalue=""]) + span.customDropDownLabel {
    transform: translate(0, -10px) scale(1);
    color: #5334C4;
}

.customSelectElement, .customSelectButtonElement {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: bw-muli-regular;
    cursor: pointer;
}

.customSelectElement:hover, .customSelectButtonElement:hover {
    background-color: #5334C4;
    color: #ffffff;
}

.customSelect {
    width: 100%;
}

.customDropDownLabel {
    position: absolute;
    top: 20px;
    padding-left: 16px;
    font-size: 10px;
    color: #0F1C3A;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    font-family: bw-muli-semi-bold;
    cursor: pointer;
}

.customDropDownLabelRemovableHidden {
    display: none;
    top: 20px;
    padding-left: 16px;
    font-size: 10px;
    color: #0F1C3A;
    font-family: bw-muli-semi-bold;
}

.customDropDownLabelRemovableShow {
    position: absolute;
    top: 25px;
    padding-left: 16px;
    font-size: 15px;
    color: #0F1C3A;
    font-family: bw-muli-regular;
    cursor: pointer;
}

.customDropDownArrow {
    position: absolute;
    right: 40px;
    top: 19px;
}

.customDropDownArrowNoTooltips {
    position: absolute;
    bottom: 15px;
    right: 19px;
}

.customDropDownArrowNoTooltipsColor {
    color: #5334C4;
}

.customDropDownArrowRotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.tooltipsColorOk {
    color: #15f348;
}

.tooltipsColorKo {
    color: red;
}

.tooltipsCard{
	width:250px;
}

/* CUSTOM INPUT WITH PREFIX ELEM */

.prefixSymbol {
    padding-left: 16px;
    font-size: 16px;
    font-family: bw-muli-regular;
    color: #0F1C3A;
    line-height: 16px;
    font-weight: 900;
    display: none;
}

.customDivInput input.baseInputPrefixSymbol {
    border: none;
    font-size: 0.938em;
    font-family: bw-muli-regular;
    outline: 0;
    margin-top: 21px;
    width: 75%;
}

.customDivInput.active .prefixSymbol {
    display: inline;
}

.infoIcon {
    bottom: 12px;
    position: absolute;
    right: 16px;
}

.infoIconItsme {
    position: absolute;
    right: 25px;
    top: 15px;
}

.tooltipsColor {
    color: #5334C4;
}

.tooltipsColor:hover {
    opacity: 0.8;
}

.customTooltip {
    position: relative;
    top: 10px;
    visibility: hidden;
    background-color: #5334C4;
    text-align: center;
    color: #fff;
    width: 100%;
    border-radius: 4px;
    z-index: 1;
    font-size: 0.938em;
    font-family: bw-muli-regular;
    padding: 5px;
}

.customTooltipSelect {
    position: relative;
    top: 54px;
    visibility: hidden;
    background-color: #5334C4;
    text-align: center;
    color: #fff;
    width: 100%;
    border-radius: 4px;
    z-index: 1;
    font-size: 0.938em;
    font-family: bw-muli-regular;
    padding: 5px;
}

.customTooltip::after, .customTooltipSelect::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    right: 8px;
    margin-left: -5px;
    border-width: 9px;
    border-style: solid;
    border-color: transparent transparent #5334C4 transparent;
}

.customTooltipSelectVisible {
    visibility: visible;
}

.customTooltipBulletPoint {
    text-align: left;
}

.infoIconItsme:hover + .customTooltip {
    visibility: visible;
}

.infoIcon:hover + .customTooltip {
    visibility: visible;
}

/* INPUT NOT PREFIX BUT TOOLTIPS */

.customDivInput input.baseInputToolTips {
    border: none;
    font-size: 0.938em;
    font-family: bw-muli-regular;
    outline: 0;
    margin-top: 21px;
    margin-left: 16px;
    width: 75%;
}

/* BUTTON CHECK */

button:focus {
    outline: 0;
}

.customDivSelectButton {
    outline: none;
    cursor: pointer;
}

.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    background: #5334C4;
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 20px;
    display: none;
}

.displayCircle {
    display: block;
}

.checkedCustomButtonLabel {
    font-size: 15px;
    position: relative;
    font-family: bw-muli-regular;
    color: #0F1C3A;
}

.checkedCustomSelectButtonLabel {
    position: relative;
    left: 50px;
    top: 15px;
}

.checkedOtherButtonIcon {
    font-size: 32px;
    position: absolute;
    left: 15px;
    top: 25px;
}

.checkedCustomButtonIcon {
    font-size: 32px;
    position: absolute;
    left: 15px;
    top: 12px;
}

.placeChecked {
    position: relative;
    top: -3px;
}

.checkedCustomButton {
    height: 56px;
    border-radius: 4px;
    line-height: 24px;
    position: relative;
    border: none;
    padding-left: 24px;
    padding-right: 24px;
    background-color: #F2F4F7;
    margin-top: 10px;
    margin-right: 10px;
}

.checkedCustomButtonSelected {
    background-color: #5334C4;
}

.checkedCustomButtonInvalid {
    height: 56px;
    border-radius: 4px;
    line-height: 24px;
    position: relative;
    border: solid 1px #FF0000;
    padding-left: 24px;
    padding-right: 24px;
    background-color: #F2F4F7;
    margin-top: 10px;
    margin-right: 10px;
}

.checkedCustomButtonIconSelected {
    filter: invert(1);
}

.checkedCustomButtonLabelSelected {
    color: #FFFFFF;
}

/* custom button */

.customPrimaryButton {
    height: 42px;
    border: 1px solid #5334C4;
    border-radius: 4px;
    color: #FFFFFF;
    font-family: "bw-muli-regular";
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    background-color: #5334C4;
    padding: 10px;
}

.customPrimaryButton:hover {
    color: #FFFFFF;
}

.customPrimaryButton:disabled {
    opacity: 0.2;
    height: 40px;
}

.customPrimaryButtonDisabled {
    opacity: 0.2;
    height: 40px;
    cursor: not-allowed !important;
}

.customSecondaryButton {
    height: 42px;
    border: 1px solid #5334C4;
    border-radius: 4px;
    color: #5334C4;
    font-family: "bw-muli-regular";
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    background-color: #FFFFFF;
}

.customSecondaryButton:hover {
    opacity: 0.8;
    height: 40px;
}

.customSecondaryButton:disabled {
    opacity: 0.2;
    height: 40px;
}

/* custom checkbox */

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 1.95em;
    cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #616A7D;
    background: #fff;
    border-radius: 4px;
}

/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
    content: ' ';
    white-space: pre;
    position: absolute;
    top: 4px;
    left: 4px;
    height: 16px;
    width: 16px;
    font-size: 14px;
    line-height: 24px;
    background-color: #5334C4;
    border-radius: 2px;
}

/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}

[type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}

[type="checkbox"]:disabled:checked + label:after {
    color: #999;
}

[type="checkbox"]:disabled + label {
    color: #aaa;
}

/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
    border: 1px solid #5334C4;
}

/* all */
.customElementSelected {
    border: solid 1px #5334C4;
    box-shadow: none;
}

/* remvove required or vincalid box shadow on ff */
input:required {
    box-shadow: none;
}

input:invalid {
    box-shadow: none;
}

/* remove cross in ie input */
input::-ms-clear {
    display: none;
}

/* disabled arrow on html input type number */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */

}

body, html {
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -o-text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

/**** link *****/

a:hover {
    color: inherit;
    text-decoration: none;
}

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

/***********************************
PROGRESSION BAR
*****************/

.vl {
    border-left: 1px solid #DDE2E8;
    height: 38px;
    margin-top: 15px;
}

.mainProgress {
    width: 100%;
    background-color: #F2F4F7;
    padding-right: 0px;
    padding-left: 0px;
    border-radius: 4px;
    height: 70px;
    text-align: center;
}

.progressElem {
    width: 33%;
    height: 100%;
}

.blockProgress {
    height: 70px;
}

.progressBarCustom {
    height: 3px;
    position: absolute;
    top: 67px;
    width: 100%;
}

.progressBarCustomLeft {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0px;
}

.progressBarCustomRight {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 4px;
}

.progressBarCustomMiddle {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.progress-bar {
    background-color: #5334C4;
}

.positionProgressNumero {
    position: absolute;
    top: 16px;
    left: 24px;
}

.positionProgressLabel {
    position: absolute;
    top: 22px;
    left: 60px;

}

.positionProgressStep {
    position: absolute;
    right: 10px;
    bottom: 5px;
}

.progressBar00 {
    width: 0%;
}

.progressBar33 {
    width: 33%;
}

.progressBar50 {
    width: 50%;
}

.progressBar66 {
    width: 66%;
}

.progressBar100 {
    width: 100%;
}

.positionValidatedStep {
    position: absolute;
    right: 10px;
    top: 22px;
}

.sizeValidatedStep {
    font-size: 12px;
}

/*****************************************************
MAIN CONTAINER
****************************************/

.mainContainer {
    top: -35px;
    position: relative;
    padding-right: 0px;
    padding-left: 0px;
    width: 700px;
}

.mainSimpleContainer {
    position: relative;
    padding-right: 0px;
    padding-left: 0px;
    width: 700px;
}

.myNoGutter {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.mainData {
    padding-right: inherit;
    padding-left: inherit;
}

.mainContainerContent{
  background: #F2F4F7;
    border-radius: 4px;
    border: #F2F4F7;
    border-style: solid;
    border-top: none;
}


/******************************************************
    HEADER
*****************************************************/

.headerAttention {

    background-color: #0F1C3A;
}

.headerSimple {
    height: 88px;
    background-color: #5334C4;
}

.headerSimplePosition {
    padding-left: 25px;
    padding-top: 19px;
}

.headerWarningPosition {
    padding-left: 43px;
    padding-bottom: 15px;
}

.headerCivilite {
    color: #FFFFFF;
    font-family: "bw-muli-semi-bold";
    font-size: 15px;
    line-height: 24px;
}


.headerColorBand {
    height: 116px;
    background-color: #5334C4;
    padding: 16px;
}

.headerColorBandThin {
    height: 52px;
    background-color: #5334C4;
    padding: 16px;
}

.headerTextAlignCenter {
    text-align: center;
}

.logoRetailerPosition {

}

.logoRetailerPosition::before {
    
}

.imgLogoBw {
    height: 70px;
    margin-left: 5px;
}


.positionGoBackHeader {
    width: 30%;
    padding-left: 40px;
}

.positionLogo {
    width: 40%;
    justify-content: center;
    height: 70px;
}

.positionLogoGOback {
    padding-bottom: 10px;
    padding-top: 10px;
}


/**********************************
title
***********************/

.primaryTitle {
    font-family: bw-mercury-regular;
    font-size: 20px;
    line-height: 27px;
    font-weight: bold;
    color: #0F1C3A;
}

.infoNextPageTitle {
    color: #727E88;
    font-family: bw-muli-semi-bold;
    font-size: 15px;
    line-height: 19px;
    text-align: center;
}

.descriptionLabel {
    color: #616A7D;
    font-family: "bw-muli-semi-bold";
    font-size: 15px;
    line-height: 19px;
}


.optinLabel {
    color: #616A7D;
    font-family: "bw-muli-regular";
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
}

.optinPosLink {
    padding-left: 25px;
}

.totalAmountTitle {
    color: #474747;
    font-family: "bw-muli-semi-bold";
    font-size: 13px;
    line-height: 24px;
}

.totalAmountValue {
    color: #474747;
    font-family: "bw-muli-regular";
    font-size: 20px;
    font-weight: bold;
    line-height: 24px;
}

.infoNextPageBox {
    width: 245px;
}

.titleSection {
    margin-top: 20px;
    margin-bottom: 10px;
}

.titleHeaderPrimaryWarning {
    color: #FFFFFF;
    font-family: bw-muli-regular;
    font-size: 28px;
    line-height: 35px;
    text-align: center;
}

.titleHeaderSecondaryWarning {
    color: #FFFFFF;
    font-family: "bw-muli-semi-bold";
    font-size: 14px;
    line-height: 18px;
}

.titleProgressActive {
    color: #5334C4;
}

.titleProgressNumber {
    font-family: bw-muli-regular;
    font-size: 30px;
    line-height: 38px;
    font-weight: bold;
}

.titleProgressLabel {
    font-family: bw-muli-regular;
    font-size: 15px;
    line-height: 19px;
    font-weight: bold;
}

.titleProgressStep {
    font-family: bw-muli-regular;
    font-size: 11px;
    line-height: 14px;
    font-weight: bold;
}

/***************************
IDENTIFICATION LABEL
**************************/

.titleIdentificationFailed {
    font-family: bw-muli-regular;
    font-size: 19px;
    line-height: 19px;
    font-weight: bold;
}


/*****************************
LINK BUTTON
********************************/


.linkButton2 {
    background: none;
    border: none;
    color: #28a745;
    cursor: pointer;
    padding-left: 0px;
}

.linkButton2:hover {
    background: none;
    border: none;
    color: #28a745;
    text-decoration: underline;
    cursor: pointer;
    padding-left: 0px;
}




/************************
TECHNICAL ERROR 
*********************/

.decisionBlock {
    padding-left: 15px;
    padding-right: 15px;
}

.decisonBlockMainLabelPos {
    padding-top: 30px;
    padding-bottom: 30px;
}

.decisionMainLabel {
    color: #0F1C3A;
    font-family: bw-mercury-bold;
    font-size: 20px;
    line-height: 27px;
}

.decisionSecondaryLabel {
    color: #616A7D;
    font-family: bw-muli-semi-bold;
    font-size: 16px;
    line-height: 24px;
}

.technicalErrorImgPos {
    padding-top: 20px;
}

.technicalErrorLink {
    text-decoration: underline;
}

.technicalErrorLink:hover {
    text-decoration: underline;
}


/***************************
ANGLE BRACKET
**************************/

.headerAngleBracket {
    color: #FFFFFF;
    padding-right: 15px;
}


/*******************************
RESPONSIVE DESIGN
*************/

@media screen and (max-width: 767px) {

    .customDivInput, .checkedCustomButton, .customButton, .customDivSelect {
        margin-right: 0px;
    }

    .mainContainer {
        top: 0px;
    }

    .headerColorBand {
        height: unset;
    }

    .headerColorBandThin {
        height: 0px;
        background-color: unset;
        padding: 0px;
    }

    .mainContainer, .mainSimpleContainer {
        width: unset;
    }

    .headerSimplePosition {
        padding-left: unset;
    }

    .checkedCustomButton, .customButton {
        width: 100%;
    }

    .loanBoxArrowRotate {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    .marginSpecial {
        padding-top: 0px;
    }

}

@media screen and (max-width: 991px) {

    .headerColorBand {
        padding: 0;
    }

    .headerColorBandThin {
        padding: 0;
    }

}

@media screen and (max-width: 1199px) {

    .headerSimplePosition {
        padding-left: 0;
    }

    .positionGoBackHeader {
        padding-left: 10px;
    }

}

@media screen and (min-width: 767px) {

    .responsivePadding {
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 20px;
    }

}