.cpiWebApps{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}

.cpiWebApps body{
background-color: #ffffff;
}

.cpiWebApps hr.layout{
clear: both;
background-color: #7797C1;
border: none;
height: 1px;
}

.cpiWebApps strong{
font-size: 110%;
font-weight: normal;
}

.cpiWebApps #page{
padding: 10px;
border: 1px solid #ffffff;
clear: both;
}

.cpiWebApps span.link{
cursor:pointer;
text-decoration:underline;
}

.cpiWebApps span.button{
cursor:pointer;
}

.cpiWebApps form.standard select{
background-color: #ffffff;
border: 1px solid #295A99;
margin: 5px;
padding: 2px;
color: #1B3C66;
}

.cpiWebApps form.standard button, .cpiWebApps form.standard input[type=submit], .cpiWebApps form.standard input[type=button]{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:normal;
line-height: normal;
background-color: #ffffff;
border: 1px solid #295A99;
margin: 5px;
padding: 2px;
color: #295A99;
}

.cpiWebApps form.standard input[type=text], .cpiWebApps form.standard input[type=password]{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:normal;
line-height: normal;
background-color: #ffffff;
border: 1px solid #295A99;
margin: 5px;
padding: 2px;
width:200px;
height: 18px;
color: #1B3C66;
}



.cpiWebApps div.fakeInput{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:normal;
line-height: normal;
display:block;
position:relative;
background-color: #ffffff;
border: 1px solid #295A99;
margin: 5px;
padding: 2px 2px 2px 3px;
width:200px;
text-align: left;
height: 18px;
overflow: hidden;
color: #3584E6;
text-decoration: underline;
cursor:pointer;
}

.cpiWebApps form.standard textarea{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:normal;
line-height: normal;
background-color: #ffffff;
border: 1px solid #295A99;
margin: 5px;
padding: 2px;
width:200px;
color: #1B3C66;
}

.cpiWebApps form.standard label{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:normal;
line-height: normal;
display: block;
margin: 5px;
padding: 2px;
color: #295A99;
}

.cpiWebApps .corrected{
border-color: #ff8800 !important;
}
.cpiWebApps .uncorrectable{
border-color: #FF1111 !important;
}

// DATA TABLE

.cpiWebApps table.data{
border: 0px solid #E6F1FF;
border-collapse:separate;
}

.cpiWebApps table.data td{
padding: 2px 5px 2px 5px;
}

.cpiWebApps table.data tr.headers > td{
background-color: #ffffff;
font-weight: normal;
color: #295A99;
text-align: left;
padding: 0px 10px 0px 5px;
}
.cpiWebApps table.data tr.headers.simple > td{
border-bottom: 1px solid #7797C1 !important;
}
.cpiWebApps table.data tr.filters > td{
background-color: #ffffff;
font-weight: normal;
color: #295A99;
padding: 0 4px 2px 3px;
height: 20px;
}
.cpiWebApps table.data tr.filters > td a{
color: #ffffff;
}
.cpiWebApps table.data tr.filters input{
margin: 1px;
padding: 1px;
border: 1px solid #295A99;
height:17px;
line-height:normal;
color: #3584E6;
}
.cpiWebApps table.data tr.filters span.button{
  float:right;
  margin: 1px 0px 1px 0px;
  padding: 0px;
  width: 18px;
  height: 18px;
}
.cpiWebApps table.data tr.filters button span.ui-icon-plus{
  background-position:-19px -133px;
  height: 10px;
  width: 10px;
}

.cpiWebApps table.data tr.paginator > td{
background-color: #ffffff;
color: #295A99;
border-top: 1px dotted #295A99;
text-align: center;
padding: 2px;
line-height: normal;
}
.cpiWebApps table.data tr.paginator input{
display:inline;
margin: 0px;
padding: 1px;
border: 1px solid #295A99;
width: 50px;
height: 17px;
font-size: inherit;
line-height:normal;
color:#1B3C66;
}
.cpiWebApps table.data tr.paginator button{
  margin: 1px 0px 1px 0px;
  padding: 0px;
  width: 18px;
  height: 18px;
}
.cpiWebApps table.data tr.paginator button span.ui-icon-triangle-1-w{
  background-position:-99px -19px;
  height: 10px;
  width: 10px;
}
.cpiWebApps table.data tr.paginator button span.ui-icon-triangle-1-e{
  background-position:-35px -20px;
  height: 10px;
  width: 10px;
}

.cpiWebApps table.data tr.lines > td{
border-top-width: 1px;
border-top-style: none;
border-top-color: #7797C1;
color:#1B3C66;
}
.cpiWebApps table.data tr.lines > td.fields > span{
display:block;
width: 100%;
max-width: 100%;
height:21px;
max-height:21px;
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;
padding-top:1px;
}

.cpiWebApps table.data tr.lines > td.actions > span{
float:right;
}

.cpiWebApps table.data tr.totals > td{
background-color: #ffffff;
color: #cc0000;
border-top: 1px solid #7797C1;
}

.cpiWebApps table.data tr.lines:nth-child(even) > td{
background: #ffffff;
}
.cpiWebApps table.data tr.lines:nth-child(odd) > td{
background: #E6F1FF;
}
.cpiWebApps table.data thead tr:nth-last-child(1) > td{
border-bottom:1px solid #7797C1;
}
.cpiWebApps table.data tr.highlight > td{
background: #FFF7EB;
}
.cpiWebApps table.data tr.lines:hover > td{
background: #FFF7EB;
}
.cpiWebApps table.data tr.selected > td{
background: #FFCC88 !important;
}
.cpiWebApps table.data tr.lines td.id{
text-align:right;
vertical-align:middle;
padding-right: 5px;
border-right: 1px solid #D6E9FF;
}
.cpiWebApps table.data td.int{
text-align:right;
vertical-align:middle;
padding-right: 5px;
border-right: 1px solid #D6E9FF;
}
.cpiWebApps table.data td.number{
text-align:right;
vertical-align:middle;
padding-right: 5px;
border-right: 1px solid #D6E9FF;
}
.cpiWebApps table.data td.thumbnail{
text-align:left;
vertical-align:middle;
}


.cpiWebApps table.data tr.orderByFields > td{
background-color: #ffffff;
color: #295A99;
border-top: 1px solid #7797C1;
padding: 2px;
line-height: normal;
font-size:10px;
}

.cpiWebApps table.data tr.orderByFields > td select{
background-color: #ffffff;
border: 1px solid #D6E9FF;
color: #1B3C66;
margin:0px;
padding:0px;
}


/* DATAGRID */
/* Table style */

form.cpiDatagrid > table{
  border: 0px solid #E6F1FF;
  border-collapse:separate;
  table-layout:fixed;
}

/* Default td */
form.cpiDatagrid > table td{
  padding: 2px 5px 2px 5px;
}

/* Headers */
form.cpiDatagrid > table > thead > tr > td{
  background-color: #ffffff;
  font-weight: normal;
  color: #295A99;
  text-align: left;
  padding: 0px 10px 0px 5px;
}
form.cpiDatagrid > table thead tr:nth-last-child(1) > td{
  border-bottom:1px solid #7797C1;
  padding-bottom: 1px;
}
/* Filters */
form.cpiDatagrid > table > thead > tr.filters > td{
background-color: #ffffff;
font-weight: normal;
color: #295A99;
padding: 0 0 2px 0;
height: 20px;
}
form.cpiDatagrid > table > thead > tr.filters > td > input{
margin: 1px;
padding: 1px;
border: 1px solid #295A99;
height:17px;
width: auto;
line-height:normal;
color: #3584E6;
}
/* Paginator */
form.cpiDatagrid > table > thead > tr.paginator > td{
background-color: #ffffff;
color: #295A99;
border-top: 1px dotted #295A99;
text-align: center;
padding: 2px;
line-height: normal;
}
form.cpiDatagrid > table > thead > tr.paginator > td input{
display:inline;
margin: 0px;
padding: 1px;
border: 1px solid #295A99;
width: 50px;
height: 17px;
font-size: inherit;
line-height:normal;
color:#1B3C66;
}
form.cpiDatagrid > table > thead > tr.paginator > td > span.first{
	display: inline-block;
	position: relative;
	top:3px;
	width:16px;
	height:16px;
	cursor:pointer;
	background-image:url(../images/ui/jquery_icons.png);
	background-position: -80px -160px;
}
form.cpiDatagrid > table > thead > tr.paginator > td > span.prev{
  display: inline-block;
  position: relative;
  top:3px;
  width:16px;
  height:16px;
  cursor:pointer;
  background-image:url(../images/ui/jquery_icons.png);
  background-position: -48px -160px;
}
form.cpiDatagrid > table > thead > tr.paginator > td > span.next{
  display: inline-block;
  position: relative;
  top:3px;
  width:16px;
  height:16px;
  cursor:pointer;
  background-image:url(../images/ui/jquery_icons.png);
  background-position: -32px -160px;
}
form.cpiDatagrid > table > thead > tr.paginator > td > span.last{
  display: inline-block;
  position: relative;
  top:3px;
  width:16px;
  height:16px;
  cursor:pointer;
  background-image:url(../images/ui/jquery_icons.png);
  background-position: -64px -160px;
}
/* Footer */
form.cpiDatagrid > table > tfoot > tr > td{
background-color: #ffffff;
color: #295A99;
border-top: 1px solid #7797C1;
padding: 2px;
line-height: normal;
font-size:10px;
}
form.cpiDatagrid > table > tfoot > tr > td > select{
background-color: #ffffff;
border: 1px solid #D6E9FF;
color: #1B3C66;
margin:0px;
padding:0px;
}

form.cpiDatagrid > table > tfoot > tr > td > span{
display:inline-block;
float:right;
background-color: #ffffff;
color: #1B3C66;
margin:0px;
padding:0px;
}
form.cpiDatagrid > table > tfoot > tr > td > span > a{
background-color: #ffffff;
color: #1B3C66;
margin:0 3px 0 3px;
padding:0px;
text-decoration:none;
cursor:pointer;
}
form.cpiDatagrid > table > tfoot > tr > td > span > a:hover{
text-decoration:underline;
}
form.cpiDatagrid > table > tfoot > tr > td > span > a.disabled{
	color:#aaaaaa !important;
}
form.cpiDatagrid > table > tfoot > tr > td > span > a.disabled:hover{
text-decoration:none !important;
cursor:default !important;
}

form.cpiDatagrid > table > tfoot > tr > td > span > a.submit{
  color:#007700;
}
form.cpiDatagrid > table > tfoot > tr > td > span > a.cancel{
  color:#AA3333;
}

form.cpiDatagrid > table > tfoot > tr > td > span > span.separator{
text-decoration:none !important;
cursor:default !important;
}



/* Cells */
form.cpiDatagrid > table > tbody > tr > td{
  color:#1B3C66;
}
form.cpiDatagrid > table > tbody > tr > td > span{
  display:block;
  width: 100%;
  max-width: 100%;
  height:21px;
  max-height:21px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  padding-top:1px;
}

/* Cells interactivity */
form.cpiDatagrid > table > tbody > tr:nth-child(even) > td{
background: #ffffff;
}
form.cpiDatagrid > table > tbody > tr:nth-child(odd) > td{
background: #E6F1FF;
}
form.cpiDatagrid > table > tbody > tr:hover > td{
background: #FFF7EB;
}
form.cpiDatagrid > table > tbody > tr.selected > td{
background: #F07746 !important;
border-right-color: #FFA480 !important;
color: #ffffff;
}

/* Cells specialization */
form.cpiDatagrid > table > tbody > tr > td.id{
text-align:right;
vertical-align:middle;
padding-right: 5px;
border-right: 1px solid #D6E9FF;
}
form.cpiDatagrid > table > tbody > tr > td.int{
text-align:right;
vertical-align:middle;
padding-right: 5px;
border-right: 1px solid #D6E9FF;
}
form.cpiDatagrid > table > tbody > tr > td.number{
text-align:right;
vertical-align:middle;
padding-right: 5px;
border-right: 1px solid #D6E9FF;
}
form.cpiDatagrid > table > tbody > tr > td.thumbnail{
text-align:left;
vertical-align:middle;
}

form.cpiDatagrid > table > tbody > tr > td.empty{
background-color:transparent !important;
padding-left:0;
padding-right:0;
}

/* FORM */
/* Tabs */
form.cpiForm > div.groupsTabs{
padding:0 3px 0 3px;
}
form.cpiForm > div.groupsTabs > span{
	display: inline-block;
	padding: 0px 6px 0px 6px;
  border: 1px solid #6D87A8;
	border-bottom:none;
	border-top-width:3px;
	height:19px;
	margin:0 3px 0 3px;
	text-align:center;
	cursor:pointer;
	-moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  color:#295A99;
  background-color:#ffffff;
}
form.cpiForm > div.groupsTabs > span:hover{
	border-top-color:#1E3047;
	color:#295A99;
	background-color:#ffffff;
}
form.cpiForm > div.groupsTabs > span.selected{
  border-top-color:#295A99;
  background: #E6F1FF !important;
  color:#295A99;
}

/* Fields table */
form.cpiForm > table{
margin-left:auto;
margin-right:auto;
width:100%;
background-color:#E6F1FF;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-top: 3px solid #295A99;
}
form.cpiForm > table > tbody > tr > td.label{
vertical-align:top;
}
form.cpiForm > table > tbody > tr > td.field{
vertical-align:bottom;
}
form.cpiForm > table > tbody > tr > td.help{
vertical-align:bottom;
padding:0px;
}
form.cpiForm > table > tbody > tr > td:nth-child(1){
text-align:right;
}
form.cpiForm > table > tbody > tr > td:nth-child(2){
text-align:left;
}
/* Buttons div */
form.cpiForm > div.buttons{
}

/* Controls */
form.cpiForm select,
form.cpiForm input,
form.cpiForm textarea,
form.cpiForm button,
form.cpiForm label,
form.cpiForm div.fakeInput,
form.cpiForm span.fakeInput{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:normal;
line-height: normal;
background-color: #ffffff;
border: 1px solid #295A99;
margin: 5px;
padding: 2px;
color: #1B3C66;
}

form.cpiForm input[type=text], form.cpiForm input[type=password]{
width:200px;
height: 18px;
}

form.cpiForm textarea{
}

form.cpiForm label{
border:none;
display: block;
color: #295A99;
background-color:transparent;
}

form.cpiForm button{
color: #295A99;
cursor: pointer;
padding-bottom: 1px;
border-bottom-width: 2px;
padding-top: 1px;
border-top-width: 2px;
}
form.cpiForm button.submit{
float: right;
margin-right:10px;
border-color:#007700;
}
form.cpiForm button.cancel{
float: left;
margin-left:10px;
border-color:#AA3333;
}
form.cpiForm div.fakeInput{
display:block;
position:relative;
padding: 2px 2px 2px 3px;
width:200px;
text-align: left;
height: 18px;
overflow: hidden;
color: #3584E6;
text-decoration: underline;
cursor:pointer;
}
form.cpiForm div.fakeInput.erasable{
width:180px;
border-right:none !important;
margin-right:0 !important;
float:left;
}
form.cpiForm div.fakeInput.eraser{
width:14px;
border-left:none !important;
margin-left:0 !important;
float:left;
}
form.cpiForm div.eraser span.ui-icon {
display:block;
position:relative;
right:2px;
top:1px;
}

form.cpiForm span.fakeInput{
display:inline-block;
position:relative;
padding: 2px 2px 2px 3px;
width:auto;
text-align: left;
height: 18px;
overflow: hidden;
color: #3584E6;
text-decoration: none;
cursor:pointer;
}
form.cpiForm span.fakeInput.bool{
text-decoration:none !important;
padding:0;
height:20px !important;
width:204px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-top-width:3px;
}
form.cpiForm span.fakeInput.bool span.boolOn,
form.cpiForm span.fakeInput.bool span.boolOff{
display:inline-block;
padding:1px 4px 0 4px;
background-color:#cccccc;
color:#eeeeee;
border:none;
height:19px;
width:94px;
overflow:hidden;
text-align:center;
}
form.cpiForm span.fakeInput.bool span.boolOn{
-moz-border-radius-topleft:3px;
border-top-left-radius:3px;
}
form.cpiForm span.fakeInput.bool span.boolOff{
-moz-border-radius-topright:3px;
border-top-right-radius:3px;
}
form.cpiForm span.fakeInput.bool span.boolOn.selected{
color:#3584E6;
background-color:#ffffff;
border-right: 1px solid #3584E6;
width:93px;
}
form.cpiForm span.fakeInput.bool span.boolOff.selected{
color:#3584E6;
background-color:#ffffff;
border-left: 1px solid #3584E6;
width:93px;
}

/* Separator */
form.cpiForm > hr{
background-color:#7797C1;
border:none;
clear:both;
height:1px;
margin: 0 0 6px 0;
}
/* Buttons div */
form.cpiForm > div{
}


/* SEPARATORS */
.cpiWebApps div.verticalSeparator{
	position:absolute;
	width:1px;
	background-color:#1B3C66;
	margin: 0 5px 0 4px;
}



/* ICONS */

.cpiWebApps table.icons{
border:none;
}
.cpiWebApps div.icon{
display:table-cell !important;
position: relative;
cursor:pointer;
border: 1px solid #eeeeee;
padding: 5px;
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100px;
text-align:center;
vertical-align:middle;
font-size: 13px;
color:#295A99;
background-color: #ffffff;
}
.cpiWebApps div.icon.highlight{
background-color: #E6F1FF;
border-color: #7797C1;
color:#295A99;
}

.cpiWebApps table.simple-bordered-table{
  border: 1px solid #cccccc;
  border-collapse: collapse;
}
.cpiWebApps table.simple-bordered-table td{
  border: 1px solid #cccccc;
  border-collapse: collapse;
  padding: 2px 5px 2px 5px;
}
.cpiWebApps table.simple-bordered-table td.header{
  font-weight:bold;
}



/* TOOLBAR */
.cpiWebApps div.toolbar{
	padding: 3px;
	background-color: transparent;
	border-bottom: 1px solid #295A99;
	margin-bottom: 5px;
}
.cpiWebApps div.toolbar button{
	border: none;
	background-color: transparent;
	color: #295A99;
	cursor:pointer;
	font-weight:normal;
}


/* SABLIER */
.cpiWebApps div.waiting{
	width: 16px;
	height: 16px;
	background: url('../images/ui/sablier.gif');
	background-repeat: no-repeat;
	background-position: center center;
	padding: 20px;
	margin: auto auto auto auto;
}

/* CLASSES DE TEXTE */
.cpiWebApps font.error{
color: red;
font-weight: bold;
}

/* SCROLLBARS */
.cpiWebApps ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.cpiWebApps ::-webkit-scrollbar:vertical {
    background-color: #F0F0F0;
    border-top: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
}

.cpiWebApps ::-webkit-scrollbar-thumb:vertical {
    min-width: 20px;
    border-top: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    background-color:#D0E2FF;
}