: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;}

    /* Le `!important` est nécessaire pour repasser devant la bordure de validation posée par le
       thème de marque (`.custom-form-input {border-bottom: 2px solid <succès> !important}`), sans
       quoi un champ encore vide s'afficherait comme rempli. Les états `has-error` restent
       prioritaires, leur sélecteur étant plus spécifique. */
    .custom-form-input:placeholder-shown,
    .custom-form-input:placeholder-shown+.select2.select2-container {border-bottom-color: #f5f5f5!important;}
    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("../@fortawesome/fontawesome-free/webfonts/fa-solid-900-O_N8Fqe.eot");
        src: url("../@fortawesome/fontawesome-free/webfonts/fa-solid-900-O_N8Fqe.eot") format('embedded-opentype'),
            url("../@fortawesome/fontawesome-free/webfonts/fa-solid-900-6-bjlXH.woff2") format('woff2'),
            url("../@fortawesome/fontawesome-free/webfonts/fa-solid-900-Vm3vpoW.woff") format('woff'),
            url("../@fortawesome/fontawesome-free/webfonts/fa-solid-900-4rxPtDt.ttf") format('truetype'),
            url("../@fortawesome/fontawesome-free/webfonts/fa-solid-900-M_ZtD6e.svg") format('svg');
    }
    .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;
    }

    /* Chevron unique : Select2 masque le sien et reprend, sur son propre conteneur, le
       chevron des selects natifs (cf. `.custom-form-select:before`). */
    select.custom-form-input+.select2.select2-container .select2-selection .select2-selection__arrow {
        display: none;
    }
    select.custom-form-input+.select2.select2-container:after {
        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;
    }

.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 {
    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;}

/* Champ en erreur signalé uniquement par sa bordure (sans message textuel pour les valeurs
   manquantes) : évite que l'apparition/disparition des messages ne déforme le formulaire à
   chaque frappe. Cf. templates/ccpclassic/components/_display_validation_error.html.twig */
.form-group-default.has-error > .form-control,
.form-group-default.has-error > .form-control:focus {
    border: 1px solid #f05050;
    box-shadow: none;}

/*
* 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;}

/*
* 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;}

.ts-dropdown {
    background-color: white !important;
    margin-top: -12px !important;
}

.ts-control {
    padding: 0 !important;
    box-shadow: none !important;
}