/* =============================================
Patch ext-js 3.4.0 pour que le masque passe au dessus des windows.
============================================= */
.ext-el-mask {
	z-index: 20000;
}

/* =============================================
Patch pour augmenter la taille réservée d'un TabPanel avant qu'il ne wrappe à la ligne. 5000 px par défaut dans ExtJs.
 On augmente à 40000 (on doit être capable d'accepter au moins 50 onglets ! merci gadz).
============================================= */
#lyra ul.x-tab-strip {
	width: 40000px;
}

/* =============================================
 * Rend les cellules des grilles sélectionnables sous Firefox, Opéra et Chrome
 ============================================= */
.x-grid3-row td {
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
}

/* =============================================
	Style pour Ext.ux.MultiSelectTreePanel
============================================== */
.x-dd-drag-ghost .x-tree-node-indent,.x-dd-drag-ghost .x-tree-ec-icon {
	display: inline !important;
}

/* =============================================
	A CLASSER
============================================== */
/* Marges des fieldsets ExtJs */
#lyra fieldset.x-fieldset {
	margin: 5px 5px 10px 5px;
	overflow: visible;
}

/* Peut-etre obsolete, commenté pour voir les impacts.
.x-window-dlg .ext-mb-content {
	overflow: auto;
	height: 1%;
}
*/

/* From iconCombo, can be used anywhere we want some text to have an icon in front of it */
.x-line-with-icon {
    background-repeat: no-repeat !important;
    background-position: 3px 50% !important;
    padding-left: 24px;
    /*disable width set by icon cls*/
    width: inherit !important;
}

/* =============================================
	Magic search
============================================== */
.result-highlight {
	background-color : #F7FF3C;
	 /*ATTENTION sera modifiee dynamiquement par Extjs*/
}

.result-detail {
	padding-left : 20px;
}

.x-panel-header .breadcrumb { 
	list-style: none; 
	overflow: hidden; 
}

.x-panel-header .breadcrumb li { 
	float: left; 
}

.x-panel-header .breadcrumb li .selected{ 
	text-decoration:none;
}

.x-panel-header .breadcrumb li a {
	text-decoration:underline;
	color: #333333;	
	padding: 0px 0px 0px 0px;
	position: relative; 
	display: block;
	float: left;
}

.x-panel-header .breadcrumb li a:hover {
	color: #000000;
}

/* =============================================
	Menus contextuels
============================================== */
/* Item principal d'un menu */
#lyra .main-item {
	font-weight: bold;
}

/* =============================================
	Panel de contact du support
============================================== */
div.support {
	font-size: 11px;
	border-width: 20px;
	color: white;
	padding-top: 10px;
	padding-left: 60px;
	padding-bottom: 0px;
	text-align: left;
	border-left-style: solid;
	border-left-color: #507EA1;
	border-left-width: 13px;
	background-position: right;
	background-repeat: no-repeat;
}

div.toptest {
	background-color: #CC0033;
	color: white;
	width: 100%;
	height: 40px;
	border: 1px solid white;
}

/* =============================================
	Classes CSS utilitaires
============================================== */
/** Cacher un objet */
.cache {
	position: absolute;
	top: -5000px;
	left: 0;
	z-index: 1;
	overflow: hidden;
	display: none;
}

/* Curseur en forme de main pour une zone cliquable */
.hand-cursor {
	cursor: pointer;
	cursor: hand; /* pour compatibilit? avec IE 5.5 ou anterieur*/
}

/* =============================================
	Paramètrages globaux des formulaires
============================================== */
.requiredField {
	color: red;
	font-style: italic;
}

/* =============================================
	Paramètrages de grilles spécifiques
============================================== */
/* Affichage d'une cellule d'historique dont l'utilisateur est un utilisateur acquéreur*/
.x-grid3-row td.x-grid3-cell.log-admin {
	font-weight: bold;
}

/* Affichage d'une cellule d'historique dont l'utilisateur est un utilisateur marchand*/
.x-grid3-row td.x-grid3-cell.log-merchant {
	
}

/* Affichage d'une cellule d'historique dont l'utilisateur est un utilisateur buyer*/
.x-grid3-row td.x-grid3-cell.log-buyer {
	font-style: italic;
}

/* Affichage d'une ligne d'historique d'une transaction d'origine, ou d'un commerçant clôturé dans une table de commerçants, ou d'un contrat non autorisé à l'association*/
body#lyra .x-grid3-row td.x-grid3-cell.forbidden-provider,body#lyra .x-grid3-row td.x-grid3-cell.log-trs-origine,body#lyra .x-grid3-row td.x-grid3-cell.closed-merchant,body#lyra .x-grid3-row td.x-grid3-cell.closed-shop,body#lyra .x-grid3-row td.x-grid3-cell.forbidden-contract
	{
	font-style: italic;
	filter: alpha(opacity =       50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

/* Style des empty text*/
body#lyra div input.x-form-empty-field {
	color : gray;
}

body#lyra div input.x-form-empty-field-customize {
	color : gray!important;
	font-style: italic!important;
	font-size: 70%!important;
}

/* Check-box "semi-cochée" pour gérer les 3 états*/
body#lyra a.semi_cochee img.x-menu-item-icon {
	filter: alpha(opacity =       50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

body#lyra div.x-form-item.disabled-item {
	filter: alpha(opacity =       50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

/* Mise en retrait d'une ligne dans une table (concrètement en italique et semi-transparent pour le moment)*/
body#lyra .x-grid3-row td.x-grid3-cell.subdued-cell {
	font-style: italic;
	filter: alpha(opacity =       50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

/* Style différent pour les droits d'un user sur d'autres commerçants que celui dans la gestion duquel on se trouve dans le bo banque*/
body#lyra .x-grid3-row td.x-grid3-cell.special-cell {
	font-style: italic;
	filter: alpha(opacity =       50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

/* =============================================
	Fenêtre d'historique des actions sur un pdv
============================================== */
/* Ligne d'information détaillée dans la fenêtre d'historique*/
label span.log_detail {
	color: #15428B;
	font-weight: bold;
}

/*=============================================================
		Affichage des icon de typecarte dans les tab contrat (merchant & admin)
 ============================================================= */
img.tabcontrat-typecarte {
	height: 16px;
	vertical-align: middle;
	padding-left: 5px;
	margin-right: 5px;
}

/*=============================================
		Textes Onglet Personnalisation
============================================== */
.texte-legende {
	font-style: italic;
	margin-top: 5px;
	margin-bottom: 15px;
}

.texte-legal-logos {
	color: #808080;
	font-style: italic;
	font-size: 90%;
	margin-top: 15px;
	margin-bottom: 5px;
}


/* =============================================
	Page de mot de passe expiré
============================================== */
div#expiredPwd div div {
	padding: 5px 5px 5px 5px;
}

#newPassword1,label[for=newPassword1] {
	margin-top: 5px;
}

/* =============================================
	Style des labels dans les fieldsets
============================================== */
body#lyra div.x-fieldset-body label.message {
	color: #15428B;
	font-size: 11px;
}

body#lyra.ext-ie  div.x-fieldset-body label.message {
	line-height: 1.5em;
}

body#lyra form.x-panel-body.x-form label.message {
	color: #15428B;
	font-size: 11px;
}

body#lyra form.x-panel-body.x-form label.header, .header-top-margin {
    color: #333;
	font-size: 11px;
    font-family: verdana;
    font-weight: bold;
    background-color: #e2e2e2;
    display: block;
    margin-bottom: 5px;
}

body#lyra form.x-panel-body.x-form label.header-top-margin {
    margin-top: 20px;
}

body#lyra label.message ul.apparent li{
	list-style : square;
	margin: 10px 0 10px 25px;
}

/* =============================================
	Items des panneaux d'action (liens clicables)
============================================== */
img.action_item {
	vertical-align: middle;
}

a.action_item {
	margin-left: 7px;
	line-height: 1.8;
}

/* =============================================
	Statistics
============================================== */
div.statistics .informationsItem {
	border-style: none none solid solid;
	border-width: 1px;
	border-color: #bbb;
	margin:5px 0px 0px 0px;
	padding: 0px 0px 0px 5px;
}

div.statistics .informationsItem h1{
	color: #00337D;
}

div.statistics .informationsItem p{
	padding-left: 10px;
}

div.statistics .section h1{
	color: #474747;
	font-size: 1.3em;
	padding-left: 10px;
}

div.statistics .section .chart{
	border-style: none none solid solid;
	border-width: 1px;
	border-color: #bbb;
	margin:10px 0px 0px 0px;
	padding: 0px 0px 0px 5px;
}

div.statistics .section .chart .footerLabel{
	color: #777777;
    font-style: italic;
    text-align: right;
    padding-right: 10px;
    font-size: 10;
}



/*============================================================*/
/*                Fixes for srite icons						  */
/*============================================================*/

/*
 * Change css for tab in order to manage sprites icon
 */

.x-window-tl .x-window-header {
	padding-top: 0px !important;
	padding-bottom: 1px !important;
	margin-top: 5px;
	margin-bottom: 3px;
	height: inherit;
	width: inherit;
}

.x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner {
	padding-bottom: 1px !important;
}

body span.x-tab-strip-text{
	padding-top: 0px !important;
	padding-bottom: 3px !important;
	margin-top: 4px;
	margin-bottom: 2px;
	height: inherit;
	width: inherit;
}



/*
 * Adapt to bigger reseau icons, with 2 selectors : one generic + one very specific to override the padding-left property for icons in window title (see .x-window-tl .x-panel-icon).
 * See for example http://css-tricks.com/specifics-on-css-specificity/ for css specificity calculation.
 */
div.reseau-icon-sepa, .x-window-tl div.reseau-icon-sepa {
	padding-left: 35px !important;
}
div.reseau-icon-sepa_v2, .x-window-tl div.reseau-icon-sepa_v2 {
	padding-left: 35px !important;
}
div.reseau-icon-hobex_dd, .x-window-tl div.reseau-icon-hobex_dd {
	padding-left: 35px !important;
}
div.reseau-icon-paylib, .x-window-tl div.reseau-icon-paylib {
	padding-left: 38px !important;
}

div.reseau-icon-atomcc, .x-window-tl div.reseau-icon-atomcc {
	padding-left: 35px !important;
}

div.reseau-icon-eps, .x-window-tl div.reseau-icon-eps {
	padding-left: 26px !important;
}

div.reseau-icon-securetrading, .x-window-tl div.reseau-icon-securetrading {
	padding-left: 60px !important;
}

div.reseau-icon-upi, .x-window-tl div.reseau-icon-upi {
	padding-left: 36px !important;
}

div.reseau-icon-hdfccc, .x-window-tl div.reseau-icon-hdfccc {
	padding-left: 36px !important;
}

div.reseau-icon-samsung_pay, .x-window-tl div.reseau-icon-samsung_pay {
	padding-left: 40px !important;
}

.x-combo-list-item.inherited-width{
	width: inherit;
}


.inherited-width{
	width: inherit;
}

.initial-width{
	width: initial;
}


/*============================================================*/
/* Fixes to display a html block (e.g. preview html from user input) */
/*============================================================*/

.html-display ul, .html-display ol {
    padding-left: 40px;
    margin: 1em 0px;
}

.html-display ul{
	list-style-type: disc;
}

.html-display ol {
	list-style-type: decimal;
}

/*====================================================*/
/*            customer communication center			  */
/*====================================================*/

/* Styles for severity icons */
.notif-info {
	background-position: center center;
	background-repeat: no-repeat;
}

.notif-warn {
	background-position: center center;
	background-repeat: no-repeat;
}

.notif-error {
	background-position: center center;
	background-repeat: no-repeat;
}

.arrow-button-pos {
	margin-top: 18px;
}

/* styles for messages rendering*/
.message-summary-icon {
	height: 16px;
	width: 16px;
	margin-top: 10px;
	margin: auto;
	font-weight: bold;
}

.message-icon {
	height: 16px;
	width: 16px;
	margin-right: 5px;
	font-weight: bold;
}

.message-summary-title {
	font-family: Arial;
	font-size: 14px;
	float: left;
	font-weight: bold;
	margin-top: 12px;
	white-space: normal;
	word-break: break-word;
	word-wrap: break-word;
	text-align: left;
}

.message-title {
	font-family: Arial;
	font-size: 13px;
	float: left;
	font-weight: bold;
	margin-top: 2px;
	white-space: normal;
	word-break: break-word;
	word-wrap: break-word;
	text-align: left;
	margin-left: 8px;
}

.message-summary-date {
	font-family: Arial;
	font-size: 12px;
	text-align: right;
	font-style: italic;
	margin-right: 0px;
	margin-top: 12px;
	white-space: normal;
}

.message-date {
	font-family: Arial;
	font-size: 13px;
	text-align: right;
	font-style: italic;
	margin-right: 10px;
	margin-top: 2px;
	white-space: normal;
}

.message-summary-text {
	font-family: Arial;
	font-size: 12px;
	white-space: normal !important;
	margin-top: 5px;
	margin-right: 0px;
	margin-left: 5px;
	margin-bottom: 5px;
	text-align: left;
}

.message-no-message {
	font-family: Arial;
	font-size: 13px;
	text-align: center;
	color: lightgrey;
	font-style: italic;
	line-height: 57.5px;
}

.message-text {
	font-family: Arial;
	font-size: 13px;
	white-space: normal !important;
	margin-top: 15px;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 5px;
	text-align: left;
	height: auto;
	overflow-y: auto;
}

.message-text * {
	padding: revert;
	margin: revert;
}

.message-text ol {
	list-style: decimal;
}

.message-text ul {
	list-style: disc;
}

.message-read {
	color: DarkGrey;
}

.greyed-icon {
	opacity: 0.5;
	filter: alpha(opacity = 50);
}

.pointer {
	background-image: url(../images/notifier/point_blue.png);
	position: absolute;
	width: 19px;
	height: 12px;
	top: -9px;
	left: 325px;
	z-index: 99999;
}	

/* styles for counter badge*/
.counter-abs-wrapper {
	position: absolute;
	overflow: visible;
}

.counter-wrap {
	position: relative;
	right: 5px;
}

.counter-wrapper {
	position: relative;
	right: 5px;
}

.counter-content {
	text-align: center;
	top: 0px;
	left: 0px;
	font-family: Sans-serif;
	color: white;
	border: 1px solid red;
    background-color: red;
    border-radius: 3px;
	font-size: 10px;
	font-weight: bold;
	margin-top: 1px;
	margin-left: -1px;
	margin-right: -1px;
}

.hack-grid3-cell-inner {
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	padding: 3px 3px 3px 5px;
	white-space: normal;
}

.notif-detail-panel {
	overflow-y: auto !important;
}

.notif-detail-panel .x-panel-body, .notif-detail-panel form {
	background:  #dfe8f6;
	border: none;
}

.notif-detail-panel form {
	margin-left: 15px;
}

.notif-row {
	border-right-color: #fff !important;
}

/*=============================================
        CSS Pour le wizard
==============================================*/
.ext-ux-wiz-Header {
    background-color:white;
    border-bottom:1px solid #99BBE8;
}

.ext-ux-wiz-Header-title {
    font-weight: bold;
    padding: 4px 0px 0px 4px;
}

.ext-ux-wiz-Header-step {
    color:#767676;
    text-align:right;
    padding:2px 4px 0px 0px;
}

.ext-ux-wiz-Header-stepIndicator-container {
    float:right;    
    margin-right:6px;
    margin-top:8px;
}