/* Google font */
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

/* DEFAULTS
----------------------------------------------------------*/

/* The emerging W3C standard
   that is currently Firefox-only */
* {
  scrollbar-width: thin;
  scrollbar-color: Grey LightGrey;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 8px;
}
*::-webkit-scrollbar-track {
  background: LightGrey;
}
*::-webkit-scrollbar-thumb {
  background-color: Grey;
  border-radius: 20px;
  /*border: 3px solid LightGrey;*/
}

*:focus { outline: none; }

html {
  min-height: 100%;
  font-family: 'Lato', sans-serif;
  font-size: 10pt;
  font-weight: normal;
}

body   
{
  /*background: #b6b7bc;*/
  background: #fff;
  font-size: 10pt;
  font-weight: normal;
  font-family: 'Lato', sans-serif;
  margin: 0px;
  padding: 0px;
  color: #133e59;
}

.mono-space { font-family: 'Source Code Pro', monospace; }
.monospace { font-size: 10pt; font-family:'Ubuntu Mono', monospace; }

.chkList1 img, .chkList2 img { /*margin-right: 15px;*/ }
.chkList1 input[type="checkbox"] { margin-left: 5px; margin-right: 5px; }
.chkList2 input[type="checkbox"] { margin-left: 15px; margin-right: 5px; }
.chkList1 input[type="checkbox"]:checked,
.chkList2 input[type="checkbox"]:checked { outline:4px solid #00FF00; outline-offset: -1px; margin-right: 5px; }
.chkList1 label { margin-right: 20px; white-space: nowrap; }

.hLimit100 { max-height: 100px; overflow-y: auto; border: 1px solid #ccc; }
.hLimit150 { max-height: 150px; overflow-y: auto; border: 1px solid #ccc; }
.hLimit250 { max-height: 250px; overflow-y: auto; border: 1px solid #ccc; }
.hLimit400 { max-height: 400px; /*max-width: 600px;*/ overflow-y: auto; border: 1px solid #E2E2E2; padding: 5px; }

/* The emerging W3C standard
   that is currently Firefox-only */
.smallScroll {
  scrollbar-width: thin;
  scrollbar-color: Grey LightGrey;
  
  -webkit-font-smoothing: antialiased;
}

/* Works on Chrome/Edge/Safari */
.smallScroll::-webkit-scrollbar {
  width: 8px;
}
.smallScroll::-webkit-scrollbar-track {
  background: LightGrey;
}
.smallScroll::-webkit-scrollbar-thumb {
  background-color: Grey;
  border-radius: 20px;
  /*border: 3px solid LightGrey;*/
}



a:link, a:visited { color: #133e59; }
a:hover { color: #1d60ff; text-decoration: none; }
a:active { color: #034af3; }

/*for FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
{   
  border : 0px;
} 
/*for IE8 */
input[type="submit"]:focus, input[type="button"]:focus
{     
  outline : none; 
}
    
p { margin-bottom: 10px; line-height: 1.6em; }

/* Affiche gauche droite sur la même ligne */
.leftOfLine { margin-bottom: 0; margin-top: 0; line-height: 1em; text-align: left; width: 69%; display: inline-block; }
.rightOfLine { margin-bottom: 0; margin-top: 0; line-height: 1em; text-align: left; width: 25%; display: inline-block; }
.rightOfLineOption { margin-bottom: 0; margin-top: 0; line-height: 1em; text-align: right; width: 25%; display: inline-block; }

input[type="radio"], input[type="radio"]+label img { vertical-align: middle; }

/* Boite Note */
.Note {
  color: #808080;
  /*background: none repeat scroll 0 0 #FFF9D9;*/

  /*border: 1px solid #FFD700;*/
  border-radius: 4px 4px 4px 4px;

  /*margin: 5px;*/
  padding: 3px 5px 3px 5px;
  margin-right: 10px;
  /*position: relative;*/
  text-align: justify;
  white-space: normal;
  font-size: 0.8em;
}

.hCenter { text-align: center !important; }
.hRight { text-align: right; }

.vMiddle { vertical-align: middle !important; }
.vMiddleM { vertical-align: middle!important; }
.vTop { vertical-align: top !important; }
.vBottom { vertical-align: bottom !important; }

div.vMiddle > * {
    vertical-align:middle;
}

.OneLine { white-space: nowrap; }

/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}


h1.SiteTittle
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h1.SiteTittle:before
{
  content: '\204E\2051\204E';
  color: #90ee90; /*lightgreen*/
  margin-right: 20px;
}

h1.SiteTittle:after
{
  content: '\204E\2051\204E';
  color: #90ee90; /*lightgreen*/
  margin-left: 20px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-weight: bold;
    font-size: 1.1em;
    margin: 20px 0 10px 0px;
    color: #800080; /*rgba(128,0,128,1);*/
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    /*width: 870px;*/
    background-color: #fff;
    /*margin: 20px auto 0px auto;*/
    /*border: 1px solid #496077;*/
    border: 0;
}

.pageVoucher
{
    width: 850px;
    background-color: #fff;
    /*margin: 20px auto 0px auto;*/
    /*border: 1px solid #496077;*/
    border: 0;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #133e59;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 1.5em;
}

.main
{
    padding: 0px 10px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.subBackOfficeWide {
  padding: 10px 10px 10px 10px;
  color: #000;
  background-color: #fff;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
  color: #fff;
  background-color: #133e59;
  padding: 10px 0 10px 0;
  /*margin: 100vh auto 0 auto;*/
  line-height: normal;
  background-color: #133e59;
  color: white;
  font-size: 0.8em;
  font-weight: normal;
  font-family: 'Lato', sans-serif;
  text-align: center;
  vertical-align: middle;
  position:absolute;
  bottom:0;
  /*height: 30px;*/
  width: 100%;
}
a.footer { color: White; }
a.footer:link, a.footer:visited { color: #fff; text-decoration: none; }

/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#133e59;
    width:100%;
    border-top: 1px solid #666;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #133e59;
    border: 1px #133e59 solid;
    color: #fff; /*#dde4ec;*/
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #4788b0;
    color: #fff;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #4788b0;
    color: #fff;
    text-decoration: none;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

.consigne:before { content: '• '; }
.consigne { font-weight: bold; }

.floatRight { float: right; }

/* Popup
----------------------------------------------------------*/

/* Popup
---------------------------------------------*/

.modalPopup p { vertical-align: middle; }
.modalPopup img { vertical-align: middle; }

.modalPopup500 p { vertical-align: middle; }

.modalBackground {
	background-color: Black;
	filter: alpha(opacity=50);
	opacity: 0.5;
	z-index: 11 !important;
}

.modalBackgroundOver {
	background-color: Black;
	filter: alpha(opacity=50);
	opacity: 0.5;
	z-index: 9909 !important;
}

.modalPopup {
	background-color:#FFFFFF;
	border: 2px solid #133e59;
  border-radius: 4px 4px 4px 4px;
	width: auto !important;
	min-width:350px;
	min-height:140px;
	/*max-height:620px;*/
	max-height:95vh;
	z-index: 9901 !important;
}

.modalPopupEditMessage 
{
	background-color:#fff;
	border: 1px solid #133e59;

  border-radius: 4px 4px 4px 4px;
	min-width:80vw;
	max-width:95vw;
	width: auto;
	height:90vh;
	z-index: 9911 !important;
	overflow: hidden;
}

.modalPopupFixed 
{
	background-color:#FFFFFF;
	border: 2px solid #133e59;
  border-radius: 4px 4px 4px 4px;
	width: auto !important;
	z-index: 9901 !important;
}

.modalPopupOver {
	background-color:#FFFFFF;
	border: 2px solid #133e59;
  border-radius: 4px 4px 4px 4px;
	width: auto !important;
	min-width:350px;
	min-height:140px;
	/*max-height:620px;*/
	max-height:95vh;
	z-index: 9911 !important;
}

.modalPopup500 {
	background-color:#FFFFFF;
	border: 1px solid #133e59;
	
  border-radius: 4px 4px 4px 4px;
	width: 500px !important;
	min-width:350px;
	min-height:140px;
	/*max-height:620px;*/
	z-index: 9901 !important;
}

.modalPopupAuto {
	background-color:#FFFFFF;
	border: 1px solid #133e59;

  border-radius: 4px 4px 4px 4px;
	min-width:500px;
	min-height:140px;
	/*max-height:620px;*/
	z-index: 9901 !important;
}

.modalPopupAuto750 
{
	background-color:#FFFFFF;
	border: 1px solid #133e59;

  border-radius: 4px 4px 4px 4px;
	min-width:500px;
	max-width:95vw;
	/*width: 50%;*/
	min-height:140px;
	max-height:95vh;
	z-index: 9901 !important;
	overflow: auto;
}

.modalPopup750 
{
	background-color:#FFFFFF;
	border: 1px solid #133e59;

  border-radius: 4px 4px 4px 4px;
	min-width:500px;
	max-width:95vw;
	min-height:140px;
	max-height:95vh;
	z-index: 9901 !important;
	overflow: auto;
}

.modalPopup_Content {
	padding: 10px 10px 10px 10px;
  white-space: nowrap;
  vertical-align: middle;
	/*max-height:550px;*/
	overflow: auto;
}

.modalPopup_ContentScroll {
	margin: 10px 10px 10px 10px;
  white-space: nowrap;
  vertical-align: middle;
	max-height:85vh;
	overflow: auto;
	overscroll-behavior: contain;
	
	/*** Firefox scrollbar ***/
	/*scrollbar-color: #888 #eee;*/
  scrollbar-width: thin;
  padding-right: 15px;
	
	/*** Webkit scrollbar ***/
}

.wrap { white-space: normal; }

.border1px { border: 1px solid #133e59; }

.modalPopup_Title {
  color: #FFF;
  font-weight: bold;
  background: #133e59;
  border: 1px solid #133e59;
  padding: 3px 5px 3px 5px;
  Cursor: move;
}

.modalPopup_FixedTitle {
  color: #FFF;
  font-weight: bold;
  background: #133e59;
  border: 1px solid #133e59;
  padding: 3px 5px 3px 5px;
}

.modalPopup_FixedTitle img { vertical-align: middle; }

.modalPopup500_Title {
  color: #FFF;
  font-weight: bold;
  background: #133e59;
  border: 1px solid #133e59;
  padding: 2px 5px 2px 5px;
  Cursor: move;
}

.modalPopup500_FixedTitle {
  color: #FFF;
  font-weight: bold;
  background: #133e59;
  border: 1px solid #133e59;
  padding: 2px 5px 2px 5px;
}

.bkgFiltre { background-color: #133e59; color: white; }
a.bkgFiltre:link, a.bkgFiltre:visited { color: #fff; text-decoration: none; }


/* Input
----------------------------------------------------------*/

input, select, textarea {
  margin: 1px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

input.passwordEntry { width: 300px; border: 1px solid #ccc; padding: 1px 3px 1px 3px; }

input.popEntry { width: 300px; border: 1px solid #ccc; padding: 1px 3px 1px 3px; }
input.popEntry50 { width: 50px; border: 1px solid #ccc; text-align: center; }
input.popEntry150 { width: 150px; border: 1px solid #ccc; text-align: center; }
input.popEntry100 { width: 100px; border: 1px solid #ccc; text-align: center; }
input.popEntry200 { width: 200px; border: 1px solid #ccc; text-align: left; }
input.popEntry300 { width: 300px; border: 1px solid #ccc; text-align: left; }
input.popEntry400 { width: 400px; border: 1px solid #ccc; text-align: left; }

select.popEntry200, .modalPopup_Content select.popEntry200  { width: 200px; border: 1px solid #ccc; text-align: left; }

textarea.popEntry, textarea.popEntry100, textarea.popEntry200, textarea.popEntry400 {
  padding: 1px 3px 1px 3px;
  border: 1px solid #ccc;
  font-family: 'Lato', sans-serif;
  font-size: 1em;
  font-weight: normal;
}

textarea.popEntry {
  width: 300px;
}

textarea.popEntry100 {
  width: 100px;
}

textarea.popEntry200 {
  width: 200px;
}

textarea.popEntry400 {
  width: 400px;
}

input.popEntryC { width: 90px; border: 1px solid #ccc; text-align: center; }
select.popEntryC, .modalPopup_Content select.popEntryC { width: 90px; border: 1px solid #ccc; text-align: center; }
select.cboNormal, .modalPopup_Content select.cboNormal { width: 150px; border: 1px solid #ccc; text-align: left; }
.modalPopup_Content select { width: 300px; border: 1px solid #ccc; }

label.popLabel { min-width: 75px; display:inline-block; }
label.popLabel90 { min-width: 90px; display:inline-block; }
label.popLabel100 { min-width: 120px; display:inline-block; }
label.popLabel200 { min-width: 200px; display:inline-block; }

.modifLabel { font-size: 0.8rem; color: #888888; display: inline-block; }

.lightBlue { background: #EFF3FB; }
.lightRed { background: #F7DED9; }
.lightRed .aspNetDisabled { background: #F7DED9 !important; }
.lightGreen { background: #DFEADE; }

.uppercase { text-transform: uppercase; }

.imageBlock { display: inline-block; vertical-align: middle; }

/* BOUTON
----------------------------------------------------------*/

.aspNetDisabled { color: #C0C0C0 !important; background: #F2F2F2 !important; border-color: #C0C0C0 !important; }
aspNetDisabled:hover { text-decoration: none !important; color: #C0C0C0 !important; border-color: #C0C0C0 !important; }

.BtnAction200 { min-width: 200px !important; }
.BtnAction150 { min-width: 150px !important; }
.BtnAction, .BtnActionNP  { min-width: 90px; }
.BtnActionSmall { min-width: 30px; }

.BtnAction, .BtnAction200, .BtnAction150, .BtnActionNP, .BtnActionSmall
{
  font-weight: normal;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  display: inline-block;
  /*height: 25px;*/
  /*line-height:50px;*/
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.BtnAction, .BtnAction200, .BtnAction150
{
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 0;
  border-right: 0;
  padding: 2px 3px 2px 3px;
  margin: 2px 2px 2px 0;
}

.BtnActionNP, .BtnActionSmall
{
  border: 1px solid #133e59;
  padding: 1px 3px 1px 3px;
  margin-bottom: 2px;
}

.BtnAction[disabled], .BtnActionNP[disabled] { color: #C0C0C0 !important; background: #F2F2F2 !important; border-color: #C0C0C0 !important; }

.BtnAction:hover, .BtnActionNP:hover { text-decoration: none; color: #fff; border-color: #fff; background-color: #4788b0; }
.BtnAction:link, .BtnAction:visited, .BtnActionNP:link, .BtnActionNP:visited{ text-decoration: none; color: #fff }


/* Couleur San Damiano
----------------------------------------------------------*/

.bkgFiltre { background-color: #133e59; color: white; }
.bkgMenu { background-color: #133e59; color: white; height: 3em; }
.bkgLink { background-color: #133e59; color: white; text-decoration: none; border: 1px solid #133e59; }

.btnMenu { background-color: #133e59; color: white; height: 3em; min-width: 210px; }

.Fixed { position:fixed !important; }

/* GridView Style
------------------------------------------*/

.mGrid {
  background-color: White;
  margin: 10px 0 10px 0;
  border: solid 1px #133e59;
  border-collapse: collapse;
}
.mGrid td {
  padding: 4px;
  border-right: solid 1px #B2C5EB;
  color: Black;
}
.mGrid th {
  padding: 4px;
  color: White;
  border-left: solid 1px #133e59;
  font-size: 1rem;
  font-weight: bold;
  background: #133e59;
}
.mGrid .alt { background: #EFF3FB; padding: 4px; }
.mGrid .row { background: White; }
.mGrid .mGridRow { background: White; }
.mGrid .empty { background: White; }
.mGrid .pgr { background: #133e59; border: solid 1px #133e59; }
.mGrid .pgr table { margin: 0; padding: 0; }
.mGrid .pgr td { padding: 2px; border-width: 0; font-weight: bold; color: Gray; }
.mGrid .pgr a { color: White; text-decoration: none; }
.mGrid .pgr a:hover { color: Black; text-decoration: none; }
.mGrid th a { color: White; text-decoration: underline; }
.mGrid th a:hover { color: Black; text-decoration: underline; }

.mGrid .borderTop { border-right: solid 1px #B2C5EB !important; border-top: 1px dotted #133e59 !important; border-bottom: none !important; }

.mGridAuto {
  background-color: White;
  margin: 10px 0 10px 0;
  border: solid 1px #133e59;
  border-collapse: collapse;
}
.mGridAuto td {
  padding: 4px;
  border-right: solid 1px #B2C5EB;
  color: Black;
}
.mGridAuto td {
  text-align: center;
}
.mGridAuto td:first-child {
  text-align: left;
}
.mGridAuto th {
  padding: 4px;
  color: White;
  border-left: solid 1px #133e59;
  font-size: 1rem;
  font-weight: bold;
  background: #133e59;
}
.mGridAuto .alt { background: #EFF3FB; padding: 4px; }
.mGridAuto .row { background: White; }
.mGridAuto .mGridAutoRow { background: White; }
.mGridAuto .empty { background: White; }
.mGridAuto .pgr { background: #133e59; border: solid 1px #133e59; }
.mGridAuto .pgr table { margin: 0; padding: 0; }
.mGridAuto .pgr td { padding: 2px; border-width: 0; font-weight: bold; color: Gray; }
.mGridAuto .pgr a { color: White; text-decoration: none; }
.mGridAuto .pgr a:hover { color: Black; text-decoration: none; }
.mGridAuto th a { color: White; text-decoration: underline; }
.mGridAuto th a:hover { color: Black; text-decoration: underline; }

.mGridAuto .borderTop { border-right: solid 1px #B2C5EB !important; border-top: 1px dotted #133e59 !important; border-bottom: none !important; }



.mGridListbox {
  background-color: White;
  margin: 5px 0 5px 0;
  /*border: solid 1px #133e59;*/
  border: none;
  height: 100%;
  border-collapse: collapse;
}
.mGridListbox td {
  padding: 4px 0 4px 0;
  /*border-right: solid 1px #B2C5EB;*/
  /*color: Black;*/
  font-size: 1rem;
}
.mGridListbox th {
  padding: 4px;
  color: White;
  border-left: solid 1px #133e59;
  font-size: 1rem;
  font-weight: bold;
  background: #133e59;
}
.mGridListbox .alt { background: #EFF3FB; padding: 4px; color: #133e59; }
.mGridListbox .row { background: White; color: #133e59; }
.mGridListbox .empty { background: White; }
.mGridListbox .pgr { background: #133e59; border: solid 1px #133e59; }
.mGridListbox .pgr table { margin: 0; padding: 0; }
.mGridListbox .pgr td { padding: 2px; border-width: 0; font-weight: bold; color: Gray; }
.mGridListbox .pgr a { color: White; text-decoration: none; }
.mGridListbox .pgr a:hover { color: Black; text-decoration: none; }
.mGridListbox th a { color: White; text-decoration: underline; }
.mGridListbox th a:hover { color: Black; text-decoration: underline; }



/* Hover au dessus d'une ligne de GridView
------------------------------------------*/

.myHoverClass {
    color: White;
    background-color: #133e59; /*#E2DED6;*/
    cursor: pointer; 
}

.GridHover {
    background-color: #EFF3FB!important;
}


/* Voucher
----------------------------------------------------------*/

.NoMargin { margin :0; padding: 0; line-height: 1px; } /* pour eviter les espaces entre les images, sinon line-height=17px */

.DecouperIci
{
  background-image: url('../Images/DecouperIci.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.VoucherItem
{
  background-image: url('../Images/FondVoucher.png');
  background-repeat: no-repeat;
  background-size: contain;
  color: #000;
}

.BonAchatItem, .TicketRepasItem
{
  background-image: url('../Images/FondBonAchat.png');
  background-repeat: no-repeat;
  background-size: contain;
  color: #000;
}

.dvTable {
  display: table;
}
.dvColonne {
  display: table-cell;
  padding: 0 40px 0 0;
  vertical-align: top;
}
.dvHelpColonne {
  display: table-cell;
  padding: 0 10px 0 10px;
  vertical-align: top;
}

.dvColonne20 {
  display: table-cell;
  padding: 0 20px 0 0;
  vertical-align: top;
}

.dvColonne150 {
  display: table-cell;
  padding: 0 20px 0 0;
  vertical-align: top;
  width: 150px;
}

.divTableVoucher { display: table; }
.divColonneVoucherT1 { display:table-cell; margin: 0px; padding-top: 30px; width: 240px!important; height: 240px; vertical-align: top; text-align: center;  }
.divColonneVoucherT2 { display:table-cell; margin: 0px; padding-top: 30px; width: 200px!important; height: 240px; vertical-align: top; text-align: center;  }

.divTableM { display: table; border-spacing: 20px 10px; }
.divColonneM { display:table-cell; padding: 10px; }
.divRowM { display: table-row; }

@supports (display: flex)
{
  .divTableM 
  {
    /*display: grid;*/
    /*grid-template-columns: repeat(auto-fit, minmax(250px, max-content));*/
    /*grid-gap: 20px 10px;*/
    /*margin: 10px;*/

    display: flex;
    flex-wrap: wrap;
  }

  .divColonneM
  {
    margin: 5px;
    padding: 10px; 
    vertical-align: top;
    min-width: 250px;
  }
}

.colMaxHeight200 {
  Height: 250px; 
  overflow-y: auto; 
 
  background: #fff;
  border: 1px solid #E0DFDA;
  
	/*** Firefox scrollbar ***/
	/*scrollbar-color: #888 #eee;*/
  scrollbar-width: thin;
  padding-right: 15px;
}

.filterBox { border: 1px solid #ccc; padding: 5px 10px 5px 10px; width: max-content; }
.filterBoxM { border: 1px solid #ccc; padding: 5px 10px 5px 10px; width: 95vw; }

.vignette, div.vignette { background: #F3F2ED; /*border: 1px solid #E0DFDA;*/ /*border-radius : 3px;*/ box-shadow: 0 1px 1px 0 rgba(60,64,67,.08),0 1px 3px 1px rgba(60,64,67,.16); }

.MgTop1 { margin-top: 1px; }
.MgTop2 { margin-top: 2px; }
.MgTop5 { margin-top: 5px; }
.MgTop8 { margin-top: 8px; }
.MgTop10 { margin-top: 10px; }

.MgBottom5 { margin-bottom: 5px; }
.MgBottom8 { margin-bottom: 8px; }

.MgLeft20 { margin-left: 20px; }

.fntBig { font-family: 'PT Sans Narrow'; font-size: 16pt; font-weight: bolder; }
.fntMiddle { font-family: 'PT Sans Narrow'; font-size: 14pt; font-weight: bolder; }
.fntSmall { font-family: 'PT Sans Narrow'; font-size: 10pt; }
.fntSmallBold { font-family: 'PT Sans Narrow'; font-size: 12pt; font-weight: bolder; }
.fntBarree, .fntBarree span { text-decoration:line-through; }

.line90 { line-height: 1em; }

.qrcode { margin: 17px 0 0 -3px; }

.red { color: Red; }
.green { color: Green; }

.helpImage 
{
  /*border: 1px dotted #C0C0C0;*/
  padding: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.BlocGestion {
  margin: 10px 0px 10px 0px;
  padding: 5px;
  border: none;
}

.BlocGestion hr, hr.BlocGestion {
  background-color: #133e59;
  color: #133e59;
  height: 1px;
  margin: 10px 0 10px 0px;
  border: 0;
}

.Separator hr, hr.Separator {
  background-color: #808080;
  color: #808080;
  height: 1px;
  margin: 10px 0 10px 0px;
  border: 0;
}

.SeparatorC0 hr, hr.SeparatorC0 {
  background-color: #C0C0C0;
  color: #C0C0C0;
  height: 1px;
  margin: 10px 0 10px 0px;
  border: 0;
}

.MenuSeparator hr, hr.MenuSeparator {
  background-color: #C0C0C0;
  color: #C0C0C0;
  height: 1px;
  margin: 0;
  border: 0;
}

.OptionSeparator hr, hr.OptionSeparator {
  background-color: #E6E6E6;
  color: #E6E6E6;
  height: 1px;
  margin: 5px 20px 0 15px;
  border: 0;
}

.OptionSeparator10 hr, hr.OptionSeparator10 {
  background-color: #E6E6E6;
  color: #E6E6E6;
  height: 1px;
  margin: 10px 20px 0 15px;
  border: 0;
}

.OptionSeparator1010 hr, hr.OptionSeparator1010 {
  background-color: #E6E6E6;
  color: #E6E6E6;
  height: 1px;
  margin: 10px 20px 10px 15px;
  border: 0;
}

/* Gestion du média : Ecran/Impression
----------------------------------------------------------*/

@media print {
    .pageBreak { page-break-after: always; }
    .hideOnPrint { display: none; }
    .hideHeaderOnPrint { display: none; }
}

@media screen {
    .pageBreak { border-top: 1px solid red; }
    .hideOnPrint { border-bottom: 1px solid #133e59; padding: 0 0 10px 20px; margin-bottom: 20px; background-color: #F5F5F5; }
    .hideHeaderOnPrint { }
}


/* Place les boutons des menus verticalement sur mobiles */
@media screen and (max-width: 750px) {
  div.menuSeparator {
      display:inline;
  }
  div.menuSeparator:after {
      content:"\a";
      white-space: pre;
  }
}

/* Place les boutons des menus horizontalement sur tablettes ou ecrans */
@media screen and (min-width: 751px) {
  div.menuSeparator {
    display: inline-block;
    width: 15px;
  }
}

@media print {
  #footer {
    display: block;
    width:100%;        
    position:absolute;
    left:0;
    bottom:0;        
  }
   
  @page {
    @bottom-right {
      content: counter(page) " / " counter(pages);
    }
  }
}

@media screen {
   #footer {
      display: block;
      width:100%;        
   }
}

/* Facture
----------------------------------------------------------*/

.TDEmetteur 
{
  width: 47%;
  background-color: #CCCCCC;
  
  border: 1px solid #133e59; 
  padding: 5px;
  
  vertical-align: top;
}

.TDClient 
{
  width: 47%;
  background-color: #fff;
  
  border: 1px solid #133e59; 
  padding: 5px;
  
  vertical-align: top;
}

.TDPaiementInfo 
{
  width: 47%;
  background-color: #fff;

  padding: 5px;
  
  vertical-align: top;
}

.TDTotal
{
  width: 47%;
  background-color: #fff;

  padding: 5px;
  
  vertical-align: top;
  text-align: right;
  
  font-size: 16pt;
  font-weight: bold;
}

.TDComment 
{
  width: 100%;
  background-color: #fff;
}
  
.TDNumFacture
{
  font-size: 18pt;
  font-weight: bold;
}
  
.spanConsigne 
{
  display: inline-block;
  width: 370px;
}
  
.spanInfo 
{
  display: inline-block;
  width: 50px;
}  

.spanBanque 
{
  display: inline-block;
  width: 120px;
  text-align: left;
}

.EnValeur
{
  font-size: 14pt;
  font-weight: bold;
}

/* Progress popup
------------------------------------------*/

.popProgress
{
  position: fixed;
  z-index: 10002;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  background-color: Black;
  filter: opacity(20);
  opacity: 0.2;
  -moz-opacity: 0.2;
}

.popCenter 
{
  position: fixed;
  top: 50vh;
  left: 50vw;
  z-index: 10010;
  margin-top: -50px;
  margin-left: -50px;
  padding: 20px;
  width: 80px;
  background-color: #fff;
  border-radius: 10px;
}
/*.popCenter img { height: 128px; width: 128px; }*/

/*----------------------------------------------------------
* Radio Button List                                       */
.radioList input[type=radio] { }

/* Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label */
.radioList input[type=radio] + label {
    display:inline-block;
    vertical-align: middle;
    margin: 0 10px 0 3px;
}

/* Accordion
------------------------------------------*/

.accHeader {  
  background-color: #66cccc; 
  color: black;

  background-image: url('../Images/Down.gif');
  background-repeat: no-repeat;
  background-position: 4px center;

  border: 1px solid #66cccc; 
  padding: 4px 4px 4px 24px;  
  margin-top: 4px;
  cursor: pointer;
}  

.accContent {  
  background-color: white;  
  color: black;  
  border-left: 1px dotted #133e59;  
  border-right: 1px dotted #133e59;  
  border-bottom: 1px dotted #133e59;  
  padding: 10px;  
}  

.accHeaderSelected {  
  background-color: #133e59;  
  color: white;  

  background-image: url('../Images/select.png');
  background-repeat: no-repeat;
  background-position: 4px center;

  border: 1px solid black;  
  padding: 4px 4px 4px 24px;  
  margin-top: 4px;
}  
        
/* Calendrier
-----------------------------------------*/

.WB_calendar .ajax__calendar_container {
    background-color: #ffffff;
    border: 1px solid #646464;
    color: #000000;
}

.WB_calendar .ajax__calendar_footer {
    border-top: 1px solid #f5f5f5;
}

.WB_calendar .ajax__calendar_dayname {
    border-bottom: 1px solid #f5f5f5;
}

.WB_calendar .ajax__calendar_day {
    border: 1px solid #ffffff;
}

.WB_calendar .ajax__calendar_month {
    border: 1px solid #ffffff;
}

.WB_calendar .ajax__calendar_year {
    border: 1px solid #ffffff;
}

.WB_calendar .ajax__calendar_active .ajax__calendar_day {
    background-color: #edf9ff;
    border-color: #0066cc;
    color: #0066cc;
}

.WB_calendar .ajax__calendar_active .ajax__calendar_month {
    background-color: #edf9ff;
    border-color: #0066cc;
    color: #0066cc;
}

.WB_calendar .ajax__calendar_active .ajax__calendar_year {
    background-color: #edf9ff;
    border-color: #0066cc;
    color: #0066cc;
}

.WB_calendar .ajax__calendar_today .ajax__calendar_day {
    border-color: #0066cc;
}

.WB_calendar .ajax__calendar_today .ajax__calendar_month {
    border-color: #0066cc;
}

.WB_calendar .ajax__calendar_today .ajax__calendar_year {
    border-color: #0066cc;
}

.WB_calendar .ajax__calendar_other .ajax__calendar_day {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #646464;
}

.WB_calendar .ajax__calendar_other .ajax__calendar_year {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #646464;
}

.WB_calendar .ajax__calendar_hover .ajax__calendar_day {
    background-color: #edf9ff;
    border-color: #daf2fc;
    color: #0066cc;
}

.WB_calendar .ajax__calendar_hover .ajax__calendar_month {
    background-color: #edf9ff;
    border-color: #daf2fc;
    color: #0066cc;
}

.WB_calendar .ajax__calendar_hover .ajax__calendar_year {
    background-color: #edf9ff;
    border-color: #daf2fc;
    color: #0066cc;
}

.WB_calendar .ajax__calendar_hover .ajax__calendar_title {
    color: #0066cc;
}

.WB_calendar .ajax__calendar_hover .ajax__calendar_today {
    color: #0066cc;
}

/* styles for invalid dates as defined by startDate and endDate*/
.WB_calendar .ajax__calendar_invalid .ajax__calendar_day {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #cccccc;
    cursor: default;
    text-decoration: none; /*line-through;*/
}

.WB_calendar .ajax__calendar_invalid .ajax__calendar_month {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #646464;
    cursor: default;
    text-decoration: line-through;
}

.WB_calendar .ajax__calendar_invalid .ajax__calendar_year {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #646464;
    cursor: default;
    text-decoration: line-through;
}

.WB_calendar .ajax__calendar_invalid .ajax__calendar_today {
    cursor: default;
    visibility: hidden;
}