/* ----------------------------- */
/* == custom                 */
/* ----------------------------- */
body {
    /*min-width: 767px;*/
    line-height: 1.44;
    font-size: 1.3rem;
}
iframe { width:100%; }
#ifrm1 { width: 100%; height:500px; }

/* ACCESSIBILITE */
/* A appliquer sur tout texte qui doit être lu par les assistances vocales sans être visible A l'écran */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/* =================
    Menu Bleu Responsive (Select)
=================  */
/* Style the button that is used to open and close the collapsible content */
.navigationConsulterResponsive .collapsible {
    background-color: #17479E;
    color: #fff;
    cursor: pointer;
    padding: 18px 20px;
    width: 100%;
    border: none;
    border-top: 1px solid #fff;
    text-align: left;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
}
.navigationConsulterResponsive .collapsible br {
	display: none;
}
.navigationConsulterResponsive.active {
    -webkit-box-shadow: 0px 0px 8px 3px rgba(18,32,59,0.2);
    -moz-box-shadow: 0px 0px 8px 3px rgba(18,32,59,0.2);
    box-shadow: 0px 0px 8px 3px rgba(18,32,59,0.2);
}

/* surcouche pour le text-decoration contenu dans default.css */
#main .navigationConsulterResponsive .collapsible {
    text-decoration: none !important;
}

.navigationConsulterResponsive .collapsible:after {
    content: url("../../img/q4x/fleche-bas.svg"); /* Unicode character for "plus" sign (+) */
    width: 15px;
    height: 15px;
    float: right;
    margin-left: 5px;
    transition: all .3s;
    transform: rotate(0);
}

.navigationConsulterResponsive .collapsible.active:after {
    content: url("../../img/q4x/fleche-bas.svg"); /* Unicode character for "minus" sign (-) */
    transform: rotate(180deg);
}

/* surcouche pour le focus contenu dans default.css */
#main .navigationConsulterResponsive .collapsible:focus {
    border: none !important;
    border-top: 1px solid #fff !important;
}

/* Style the collapsible content. Note: hidden by default */
.navigationConsulterResponsive .content-collapse {
    max-height: 0;
    overflow: hidden;
    transition: all 0.2s ease-out;
    visibility: hidden;
}

.navigationConsulterResponsive .content-collapse ul {
    border: 1px solid #e4e4e4;
}
.navigationConsulterResponsive .content-collapse ul li {
    padding: 5px;
}
.navigationConsulterResponsive .content-collapse ul li:not(:last-child) {
    border-bottom: 1px solid #e4e4e4;
}
.navigationConsulterResponsive .content-collapse ul li a {
    display: block;
    padding: 18px;
    color: #4a4a4a;
    text-transform: uppercase;
    font-size: 15px;
}
.navigationConsulterResponsive .content-collapse ul li a br {
	display: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.navigationConsulterResponsive .content-collapse ul li:hover,
.navigationConsulterResponsive .content-collapse ul li a:focus,
.navigationConsulterResponsive a.subnav__item--active {
    background-color: #F2F2F2;
    color: #000;
    font-weight: bold;
    text-decoration: none !important;
}

@media (min-width: 768px) {
    .navigationConsulterResponsive {
        display: none;
        visibility: hidden;
    }
}

@media (max-width: 767px) {
    .navigationConsulterResponsive {
        display: block;
        visibility: visible;
    }

    .navigationConsulterResponsive + .subnav {
        display: none;
        visibility: hidden;
    }
}


@media only screen and (max-width: 767px) {
    body {
        max-width: 767px;
        margin: 0;
        width: 100%;
        min-width: inherit;
    }
}

body.modal-open {
    min-height: 100vh;
}

.content {
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
    padding: 0 2rem;
    max-width: 98rem;
    line-height: 1.44;
}

@media screen and (-ms-high-contrast: active),
       screen and (-ms-high-contrast: none) {
    .content {width: 100%;}
}

@media only screen and (max-width: 767px) {
    #main.content {
        padding: 0 1rem;
        max-width: 767px;
        margin: 0;
    }
}

_:-ms-lang(x), .content {
    max-width: 975px;
}

.main-heading {
    margin-bottom: 30px;
    margin-bottom: 3rem;
}
.main-heading .ttl-1 br {
	display: none;
}

.main-heading .convert {
    color: #FFFFFF;
    text-decoration: underline;
    position: absolute;
    right: 50px;
    top: 35px;
}

@media only screen and (max-width: 767px) {
    .main-heading {
        margin-bottom: 2rem;
    }
    /* Correction de la largeur sur IE */
    .main-heading.consulter {
        max-width: 767px;
    }

    .main-heading .ttl-1 {
        padding: 2rem;
        padding: 20px;
    }
}

.ttl-1 {
    background-color: #17479E;
    display: block;
    margin: 0;
    padding: 32px 30px;
    padding: 3.2rem 3rem;
    font-family: "LatoBold", Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 26px;
    line-height: 2.6rem;
    color: #FFFFFF;
    text-transform: uppercase;
}

.ttl-2 {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 15px;
    line-height: 1.5rem;
    margin-bottom: 30px;
    margin-bottom: 3rem;
    text-transform: uppercase;
}

#main-footer {
    padding: 20px 0;
    padding: 2rem 0;
    margin-top: 60px;
    margin-top: 6rem;
    background-color: #F2F2F2;
}
#q4m-tpl #main-footer { margin-top: 3rem; }

.visually-hidden, .collapse__body.collapse__body--close, .operations .collapse__body .col:nth-child(1) span,
    .incidents .collapse__body .col:nth-child(1) span {
    position: absolute;
    border: 0;
    height: 1px;
    width: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.logo-wrapper {
    display: inline-block;
    margin: 0 15px 0 0;
    margin: 0 1.5rem 0 0;
}

.logo-wrapper .logo {
    width: 50px;
    max-height: 50px;
    background-color: #17479E;
}

.overFlowHidden {
    overflow: hidden !important
}

.badge {
    position: relative;
    display: inline-block;
    width: 20px;
    width: 2rem;
    height: 20px;
    height: 2rem;
    border-radius: 50%;
}

.badge.badge--primary {
    background-color: #17479E;
    color: #FFFFFF;
}

.badge.badge--secondary {
    background-color: #F2F2F2;
    color: #000000;
}

.badge.badge--danger {
    background-color: #ff0000;
    color: #FFFFFF;
}

.badge>span {
    line-height: 1;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.placeholder {
    color: #a9a9a9;
}

.twitter-typeahead {
    width: 100%;
}

.twitter-typeahead .placeholder {
    width: auto !important;
    max-width: 100%;
}

.tt-menu {
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-size: 1.5rem;
    border-left: 1px solid #E4E4E4;
    border-right: 1px solid #E4E4E4;
    border-bottom: 1px solid #E4E4E4;
}

.tt-suggestion {
    padding: 14px;
    padding: 1.4rem;
    background-color: #FFFFFF;
}

.tt-suggestion+.tt-suggestion {
    border-top: 1px solid #E4E4E4;
}

.tt-suggestion:hover, .tt-suggestion.tt-cursor {
    cursor: pointer;
    background-color: #F2F2F2;
}

.avoirs {
    text-transform: capitalize;
    font-weight: bold;
}

.account-resume2.account-resume--insurance .title h3 {
	text-transform: capitalize;
}

.account-resume2 .stripe .col-1 .title h3 {
    text-transform: capitalize;
}

.account-resume2.account-resume--credit .stripe .col-1 .title h3 {
	text-transform: none;
}

.account-resume2.account-resume--credit .stripe .col-2 .colonnes .amount span.lib {
	text-transform: none;
}

.account-resume2.account-resume--loan .stripe .col-2 .colonnes .amount span.lib {
	text-transform: none;
}

.account-resume2.account-resume--loan .stripe .col-1 .title h3 {
	text-transform: none;
}

.account-resume2 .stripe .col-2 .colonnes .amount span.lib {
	text-transform: capitalize;
}

@media only screen and (max-width: 767px) {
    /* taille de la pub pour IE */
    #main .img-ban {
        max-width: 767px;
    }
    .avoirs {
        display: flex;
        flex-direction: column;
    }
}

@media ( min-width : 768px) {
    .img-ban {
        margin: 20px 0 50px 0;
    }
    .avoirs {
        margin: 40px 0 10px 0;
        margin: 4rem 0 1rem 0;
    }
    .avoirs span {
        display: inline-block;
        margin-right: 20px;
    }
    .avoirs .grey {
        color: #6E6E6E;
        margin-left: 20px;
        text-transform: none;
        font-weight: normal;
    }
    .avoirs .access {
        position: absolute;
        right: 25px;
        text-decoration: underline;
        text-transform: none;
        font-weight: normal;
    }
    .avoirs .wauto {
        width: auto;
    }
}

@media only screen and (max-width:480px) {
    .services h2, .products h2 {
        padding-left: 20px;
    }

    /* Reduire l'espace sous les avoirs */
    .avoirs {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 2rem;
        padding-left: 0.25em;
    }
}

.lib-compte, .lib-compte-emetteur, .lib-compte-receveur,
    .lib-compte-pays, .lib-compte-devise {
    width: 300px;
}

#main div.lireAccordion.alignTop {
    top: 2px;
}

.app_hidden {
    display: none;
    visibility: hidden !important;
}

form div.formline span.app_erreur {
    margin-top: 5px;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: normal;
    color: #ff0000;
    padding: 0px 5px;
    padding: 0px 0.5rem;
}
/* Message d'erreur */
.app_erreur {
    color: #ff0000;
}

/*classe css pour le disabled*/
.disabled {
    background: #ccc;
}

/* Pour les displayTable, afin que les libelles d'entete de colonne ne soient pas colles au bordure du tableau */
#main table.dataNum thead .thSpan, #main table.dataStr thead .thSpan,
    #main table.dataNum tfoot .thSpan {
    padding: 0px 4px;
    padding: 0px 0.4rem;
    vertical-align: middle;
}

/* Pour les displayTable, surcharge les tailles fixe cinquieme du default.css */
#main th.cinquieme {
    width: 20%;
}

/* Pour les displayTable pour IE 7 et 8, surcharge la taille du caption pour plus quil ny ait despace*/
#main table caption span.webaccess {
    padding: 0px;
}

#navH #middleContent ul li.current2 a {
    text-decoration: underline;
}

/*classe pour  html:input typt text pour un code postal*/
.codePostal {
    width: 40px !important;
}

thead>tr>th#statut, .montantTotal {
    text-align: right;
}

.reject {
    color: #D0141B;
    cursor: default;
}

.inactiveLink {
    pointer-events: none;
    cursor: default;
}

/**
    * Suppression de la croix des champs input pour IE
    * Selecteur specifique au projet Arbitrage Libre C2-CPAT 
    */
#formArbitrageLibre input[type=text]::-ms-clear {
    display: none;
}

@media only screen and (max-width: 767px) {
    /* Masquer le lien "Convertir en francs" */
    .convert {
        display: none;
        visibility: hidden;
    }
}

#main .validForm {
    display: none;
}

#main .validForm h2 {
    float: none;
    margin-top: 3rem;
    margin-bottom: 2.5rem;
}

/* */
.menu-gerer-responsive-notify-badge{
	display: inline-block;
    position: absolute;
    left: 60px;
}

/*classe pour la notification de nombre de document a signer - lien sous le soufflet */
.content-soufflet-notify-badge{
	position: absolute;
    margin-left: -25px;
    display: inline-block;
}

/*classe pour la notification de nombre de document Ã  signer - titre de soufflet */
@media screen and (max-width: 304px) {
    .title-soufflet-notify-badge{
	position: absolute;
	top: 47px;
	display: inline-block;
	}
}

@media screen and (max-width: 309px) and (min-width: 305px) {
    .title-soufflet-notify-badge{
	position: absolute;
	top: 40px;
	display: inline-block;
	}
}

@media screen and (max-width: 330px) and (min-width: 310px) {
    .title-soufflet-notify-badge{
	position: absolute;
	top: 31px;
	display: inline-block;
	}
}

@media screen and (max-width: 347px) and (min-width: 331px) {
    .title-soufflet-notify-badge{
	position: absolute;
	top: 25px;
	display: inline-block;
	}
}

@media screen and (min-width: 348px) {
    .title-soufflet-notify-badge{
	position: absolute;
	top: 23px;
	display: inline-block;
	}
}

@media screen and (max-width: 380px) and (min-height: 640px) {
    .title-soufflet-notify-badge{
	position: absolute;
	top: 38px;
	display: inline-block;
	}
}

@media screen and (max-width: 320px) and (max-height: 600px) {
    .title-soufflet-notify-badge{
	position: absolute;
	top: 45px;
	display: inline-block;
	}
}

/* Pour MOB */
@media screen and (max-width: 767.5px) {
	#q4m-tpl #main.content { padding:0; }
}