:root {
    --pcs-input-muted-color: #f5f5f5;

    --pcs-payment-input-fontsize: 1.875rem;
    --pcs-amount-input-fontsize: 2.813rem;
}

/* CUSTOM FORM INPUT */
.custom-form-input+.select2.select2-container {display: block;}
.custom-form-input+.select2.select2-container .select2-selection {
    border: none;
}
.custom-form-input,
.custom-form-input+.select2.select2-container {
    -moz-appearance:none;
    -webkit-appearance: none;
    appearance: none;
    background: unset!important;
    font-size: 1.875rem;
    text-align: center;
    height: 100px;
    width: 100%;
    padding: 1.625rem 0;
    border-radius: 0;}
    .custom-form-input.text-left,
    .custom-form-input.text-left+.select2.select2-container {text-align: left;}
    .custom-form-input.custom-form-sm,
    .custom-form-input.custom-form-sm+.select2.select2-container {
        height: 60px;
        padding: 0.625rem;}

    .custom-form-input:placeholder-shown,
    .custom-form-input:placeholder-shown+.select2.select2-container {border-bottom-color: #f5f5f5;}
    select.custom-form-input:invalid,
    select.custom-form-input:invalid+.select2.select2-container,
    select.custom-form-input:invalid+.select2.select2-container .select2-selection__rendered {
        font-weight: unset;
        border-color: #f5f5f5!important;}
    select.custom-form-input:invalid+.select2.select2-container .select2-selection {
        font-weight: unset;
        color: #b4b4b4!important;}
    select.custom-form-input+.select2.select2-container .select2-selection {border: none!important;}

    @font-face {
        font-family: 'FontAwesome';
        src: url('../fonts/fa-solid-900.eot'); /* IE9 Compat Modes */
        src: url('../fonts/fa-solid-900.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('../fonts/fa-solid-900.woff2') format('woff2'), /* Super Modern Browsers */
            url('../fonts/fa-solid-900.woff') format('woff'), /* Pretty Modern Browsers */
            url('../fonts/fa-solid-900.ttf') format('truetype'), /* Safari, Android, iOS */
            url('../images/fa-solid-900.svg#svgFontName') format('svg'), /* Legacy iOS */
    }
    .custom-form-select {
        position:relative}
        .custom-form-select:before {
            z-index: 1;
            content: '\f078';
            font-family: FontAwesome;
            color: #b4b4b4;
            display: inline-block;
            position: absolute;
            font-size: 0.675rem;
            right: 1rem;
            top: calc(50% - 0.3375rem);
            pointer-events: none;
        }

    select.custom-form-input::after {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
    }

    /* On restyle le chevron du sélecteur pour matcher avec les chevrons simples */
    select.custom-form-input,
    select.custom-form-input+.select2.select2-container .select2-selection .select2-selection__arrow {bottom: 40px;}
    select.custom-form-input+.select2.select2-container .select2-selection .select2-selection__arrow b {
        height: 13px; /*Height should be double border thickness*/
        border: none;
        position: relative;
    }

    select.custom-form-input
    select.custom-form-input+.select2.select2-container .select2-selection .select2-selection__arrow b::before,
    select.custom-form-input+.select2.select2-container .select2-selection .select2-selection__arrow b::after {
        position: absolute;
        display: block;
        content:"";
        border: 6.5px solid rgba(255, 255, 255, 0); /*Adjust chevron size*/}

    /*Change the four instances of 'top' below to rotate chevron*/
    /*Use (top/right/bottom/left) where you want the back of the chevron to be*/
    select.custom-form-input+.select2.select2-container .select2-selection .select2-selection__arrow b::before {
        top: 0;
        border-top-color: #b4b4b4; /*Chevron color*/
    }

    select.custom-form-input+.select2.select2-container .select2-selection .select2-selection__arrow b::after {
        top: -3px; /* Adjust thickness*/
        border-top-color: #fff; /* Match chevron background color */
    }

    /* Variation pour formulaire plus petit */
    select.custom-form-input.custom-form-sm+.select2.select2-container .select2-selection .select2-selection__arrow {top: 12px; bottom:unset;}
    select.custom-form-input.custom-form-sm+.select2.select2-container .select2-selection .select2-selection__arrow b {height: 11px; top: 28%;}
    select.custom-form-input.custom-form-sm+.select2.select2-container .select2-selection .select2-selection__arrow b::after {top: -2px;}
    select.custom-form-input.custom-form-sm+.select2.select2-container .select2-selection .select2-selection__arrow b::before, select.custom-form-input+.select2.select2-container .select2-selection .select2-selection__arrow b::after {border-width: 5.5px ;}

.custom-form-label, .select-label-alike {
    display: block;
    text-align: left;
    margin-bottom: 0;
    font-weight: 550;
    border: none;}
    .select-label-alike:focus, .select-label-alike:focus-visible {
        outline: none;}

/* 
* DEBUT PLACEHOLDER STYLE
* Définition pour modifier le style des placeholders des éléments de formulaires
* (on ne peut pas le définir pour plusieurs classes en même temps)
*/
/* Chrome/Opera/Safari */
.custom-form-input::-webkit-input-placeholder {
    color: #b4b4b4!important;
    font-weight: 400 !important;}
/* Firefox 19+ */
.custom-form-input::-moz-placeholder {
    color: #b4b4b4!important;
    font-weight: 400 !important;}
/* IE 10+ */
.custom-form-input:-ms-input-placeholder {
    color: #b4b4b4!important;
    font-weight: 400 !important;}
/* Firefox 18- */
.custom-form-input:-moz-placeholder {
    color: #b4b4b4!important;
    font-weight: 400 !important;}

.custom-form-input::placeholder {
    color: #b4b4b4!important;
    font-weight: 400 !important;}
/* Chrome/Opera/Safari */
.custom-form-input::-webkit-input-placeholder+.select2.select2-container {
    color: #b4b4b4!important;
    font-weight: 400 !important;}
/* Firefox 19+ */
.custom-form-input::-moz-placeholder+.select2.select2-container {
    color: #b4b4b4!important;
    font-weight: 400 !important;}
/* IE 10+ */
.custom-form-input:-ms-input-placeholder+.select2.select2-container {
    color: #b4b4b4!important;
    font-weight: 400 !important;}
/* Firefox 18- */
.custom-form-input:-moz-placeholder,
.custom-form-input:-moz-placeholder+.select2.select2-container {
    color: #b4b4b4!important;
    font-weight: 400 !important;}

.custom-form-input::placeholder+.select2.select2-container {
    color: #b4b4b4!important;
    font-weight: 400 !important;}
/* 
* FIN PLACEHOLDER STYLE
*/

/*
* DEBUT FOCUS STYLE
* (on ne peut pas le définir pour plusieurs classes en même temps)
*/
.custom-form-input:focus-visible {
    outline: none;
    border-bottom-style: dotted;}
.custom-form-input:focus-visible+.select2.select2-container {
    outline: none;
    border-bottom-style: dotted;}
select.custom-form-input+.select2.select2-container.select2-container--open {
    outline: none;
    border-bottom-style: dotted;}
select.custom-form-input+.select2.select2-container.select2-container--open .select2-selection {background: unset;}
/*
* FIN FOCUS STYLE
*/

.amount-input {position: relative;}
.amount-input::after {
    content:"\20ac";
    font-size: 1.875rem;
    color: #b4b4b4;
    right: 3rem;
    top:25%;
    position: absolute;}

.amount-input input {font-size: 2.813rem}
.amount-input input:placeholder-shown {font-size: 1.875rem}

.error {
    display:none;
    color: #f05050;}
    .form-group.has-error .error {display: block;}
    .form-group.has-error .custom-form-input,
    .form-group.has-error select.custom-form-input+.select2.select2-container {
        border-bottom-color: #f55753!important;}

/*
* DEBUT STYLING SELECT2
*/
.select2-container--open .select2-dropdown--below.select2-dropdown {
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    padding-top: 5px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);}
    .select2-search--dropdown {
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 4px;}
        .select2-search--dropdown .select2-search__field {
            background: #ffffff !important;
            vertical-align: baseline;
            line-height: 28px;
            border-radius: 2px;
            border: none;
            font-size: 12px;
            border: 1px solid rgba(0, 0, 0, 0.07) !important;}

/* REDUCING FONT SIZE FOR WEBVIEW */
.custom-form-label.custom-form-sm, .select-label-alike.text-sm {font-size: 0.865rem;}
.custom-form-input.custom-form-sm,
.custom-form-input.custom-form-sm+.select2.select2-container {
    font-size: 1.25rem;
    height: 60px;
    padding: 0.675rem 0;}

/* On restyle le chevron du sélecteur pour matcher avec les chevrons simples */
select.custom-form-input.custom-form-sm+.select2.select2-container .select2-selection .select2-selection__arrow {bottom: 40px;}
select.custom-form-input.custom-form-sm+.select2.select2-container .select2-selection .select2-selection__arrow b {
    height: 13px; /*Height should be double border thickness*/
}

select.custom-form-input.custom-form-sm+.select2.select2-container .select2-selection .select2-selection__arrow b::before,
select.custom-form-input.custom-form-sm+.select2.select2-container .select2-selection .select2-selection__arrow b::after {
    border-width: 6.5px; /*Adjust chevron size*/}
select.custom-form-input.custom-form-sm+.select2.select2-container .select2-selection .select2-selection__arrow b::after {
    top: -3px; /* Adjust thickness*/
}

/*
* FIN STYLING SELECT2
*/


/*
* DEBUT STYLING CAPADDRESS
*/
.custom-form-input.cap__input-success {
    border: none;
    border-bottom: 2px solid #34eaad;}

.custom-form-input.cap__input-error {
    border: none;
    border-bottom: 2px solid #f55753;}
/*
* FIN STYLING CAPADDRESS
*/

/* =============================================
================================================
================================================
================================================ 
================================================ */

/*
* DEBUT STYLING CUSTOM-INPUT-GREY
*/
.custom-form-group-grey {
    margin: 1.5rem 0 1rem;
    padding: 0.875rem;
    background: rgba(238, 236, 236, 1);
    border-radius: 0.875rem;}
.custom-form-label-grey {
    display: block;
    text-align: center;}

.custom-form-input-grey,
.custom-form-input-grey+.select2.select2-container {
    font-size: 1.188rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    padding: 0.313rem 0;
    background: rgba(238, 236, 236, 0.8);
    border-bottom: 2px solid rgba(238, 236, 236, 0.8);}
    .custom-form-input-grey.text-left,
    .custom-form-input-grey.text-left+.select2.select2-container {text-align: left;}
    .custom-form-input-grey:placeholder-shown {border-bottom-color: #808080;}

/* 
* DEBUT PLACEHOLDER STYLE
* Définition pour modifier le style des placeholders des éléments de formulaires
* (on ne peut pas le définir pour plusieurs classes en même temps)
*/
/* Chrome/Opera/Safari */
.custom-form-input-grey::-webkit-input-placeholder {
    color: #808080!important;
    font-weight: 400 !important;
    border-bottom-color: #808080;}
/* Firefox 19+ */
.custom-form-input-grey::-moz-placeholder {
    color: #808080!important;
    font-weight: 400 !important;
    border-bottom-color: #808080;}
/* IE 10+ */
.custom-form-input-grey:-ms-input-placeholder {
    color: #808080!important;
    font-weight: 400 !important;
    border-bottom-color: #808080;}
/* Firefox 18- */
.custom-form-input-grey:-moz-placeholder {
    color: #808080!important;
    font-weight: 400 !important;
    border-bottom-color: #808080;}
.custom-form-input-grey::placeholder {
    color: #808080!important;
    font-weight: 400 !important;
    border-bottom-color: #808080;}
/* Chrome/Opera/Safari */
.custom-form-input-grey::-webkit-input-placeholder+.select2.select2-container {
    color: #808080!important;
    font-weight: 400 !important;
    border-bottom-color: #808080;}
/* Firefox 19+ */
.custom-form-input-grey::-moz-placeholder+.select2.select2-container {
    color: #808080!important;
    font-weight: 400 !important;
    border-bottom-color: #808080;}
/* IE 10+ */
.custom-form-input-grey:-ms-input-placeholder+.select2.select2-container {
    color: #808080!important;
    font-weight: 400 !important;
    border-bottom-color: #808080;}
/* Firefox 18- */
.custom-form-input-grey:-moz-placeholder,
.custom-form-input-grey:-moz-placeholder+.select2.select2-container {
    color: #808080!important;
    font-weight: 400 !important;
    border-bottom-color: #808080;}
.custom-form-input-grey::placeholder+.select2.select2-container {
    color: #808080!important;
    font-weight: 400 !important;
    border-bottom-color: #808080;}
/* 
* FIN PLACEHOLDER STYLE
*/

/*
* DEBUT FOCUS STYLE
* (on ne peut pas le définir pour plusieurs classes en même temps)
*/
.custom-form-input-grey:focus-visible {
    outline: none;
    border-bottom-color: #808080;
    border-bottom-style: dotted;}
.custom-form-input-grey:focus-visible+.select2.select2-container {
    outline: none;
    border-bottom-color: #808080;
    border-bottom-style: dotted;}
select.custom-form-input-grey+.select2.select2-container.select2-container--open {
    outline: none;
    border-bottom-color: #808080;
    border-bottom-style: dotted;}
select.custom-form-input-grey+.select2.select2-container.select2-container--open .select2-selection {background: unset;}
/*
* FIN FOCUS STYLE
*/

/*
* FIN STYLING CUSTOM-INPUT-GREY
*/

/* CUSTOM BS SWITCH SIZE */
.custom-switch.custom-switch-lg {
    padding-bottom: 1rem;
    padding-left: 2.25rem;}
    .custom-switch.custom-switch-lg .custom-control-label {
        padding-left: 0.75rem;
        padding-top: 0.15rem;}
        .custom-switch.custom-switch-lg .custom-control-label:before {
            border-radius: 1rem;
            height: 1.5rem;
            width: 2.5rem;}
        .custom-switch.custom-switch-lg .custom-control-label:after {
            border-radius: .65rem;
            height: calc(1.5rem - 4px);
            width: calc(1.5rem - 4px);}
    .custom-switch.custom-switch-lg .custom-control-input:checked ~.custom-control-label::after {
        transform: translateX(1rem);
    }

.custom-switch.custom-switch-xxl {
    padding-bottom: 1rem;
    padding-left: 2.25rem;}
    .custom-switch.custom-switch-xxl .custom-control-label {
        padding-left: 0.75rem;
        padding-top: 0.15rem;}
        .custom-switch.custom-switch-xxl .custom-control-label:before {
            border-radius: 1.5rem;
            height: 2.25rem;
            width: 3.75rem;}
        .custom-switch.custom-switch-xxl .custom-control-label:after {
            border-radius: 1rem;
            height: 1.75rem;
            width: 1.75rem;
            top: 8.5px;
            left: calc(-1.75rem - 3px);}
    .custom-switch.custom-switch-xxl .custom-control-input:checked ~.custom-control-label::after {
        transform: translateX(calc(1.75rem - 5px));
    }

.custom-switch .custom-control-label::before {background-color: #AAAAAA;}
.custom-switch .custom-control-label::after {background-color: #fff;}