/* font-face */
@font-face {
    font-family: 'ralewayregular';
    src: url('font/raleway-regular-webfont.eot');
    src: url('font/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/raleway-regular-webfont.woff') format('woff'),
         url('font/raleway-regular-webfont.ttf') format('truetype'),
         url('font/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* base */

HTML { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

BODY { margin: 0; padding: 0; font-family:arial; font-size: 1em; }
BUTTON, BUTTON:hover { 
	padding:0.4em 0.5em 0.6em 0.5em; margin: 0.2em 0; text-shadow: none; border: 0; font-size: 1em; background: #d5d5d5; border-radius: 0.25em; box-shadow: 0 -0.25em 0 #b9b9b9 inset; 
}
H1, H2, H3, H4, H5, H6 {
	font-family: 'Ralewayregular', Arial, "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif; font-weight: normal;
}
H1 { font-size: 1.5em; }
H2 { font-size: 1.25em; }
H3 { font-size: 1.125em; }
H4 { font-size: 1em;font-weight: bold }
LABEL  { margin: 0 0 0.25em 0; font-size: 1em; display: inline-block; color:#A8A8A8; }
FOOTER { font-size: 0.75em; }
P { margin: 0; color:#999; font-family:arial, sans-serif; }
FORM { margin: 0 }

input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input[type="email"], input[type="tel"], TEXTAREA, SELECT
{ background-image: none; padding: .4em; font-size: 1em; width: 95%; line-height: 1.4em; outline: 0; border-radius:0.25em; border:1px solid #CCCCCC; font-family: Arial, helvetica, sans-serif; }
select {width:100%; background:white; /*margin-bottom:0.5em;*/}


input[type="date"], 
input[type="time"]
{ width: auto }

/*fields sizes*/
INPUT.very-short-field {width:10%}
INPUT.short-field {width:25%}
INPUT.medium-field {width:47%}
INPUT.long-field {width:75%}
INPUT.auto-size-field {width:95%}

/* global */
.container { -webkit-user-select: none; }
.screen { padding: 0 }

.company-logo { width: 100%; display: inline-block; vertical-align: middle; font: 0/0 serif; text-shadow: none; color: transparent; background-size:25%; background-position: center; background-repeat: no-repeat; box-sizing:border-box; }
.company-logo IMG { padding-top: 25%; }


/* loader */
.ui-loader-background { position: absolute; z-index:9999; top:0; left:0; width:0; height: 0 }
.ui-loader {padding: 10px; width: 48px; height:48px; }
.ui-loading {color:#fff; font:normal 14px Arial, Helvetica, sans-serif;  background:transparent url(images/ui-loading.gif) no-repeat center center; height:48px; width:48px}
.ui-loading SPAN {display:none}

/* global */
.informations { display:none ;padding: 1em 1em; color:#000; font-size: 0.9em; font-family: 'Ralewayregular', Arial, "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif; }
.fields-area { padding: 0 1.25em 1.25em 1.25em }
.vui-screen-document .fields-area { padding: 0 0 0 0 } /* cancel left and right padding inside document */


/* wizard */
.wizard-area .informations H2 { display: none; }
.wizard-area .informations SPAN:first-of-type { display: block; font-family: arial; font-size: inherit; color: inherit  } /* in case informations area include another span */
.wizard-area .header-level4, 
.wizard-area .header-level5, 
.wizard-area H3 
{ /*padding: 0.5em;*/ }
.wizard-area .fields-area H2 { margin: 0; font-size: 0.9em; font-weight: normal; color:#2568ef; font-family:arial; }
.wizard-area .fields-area H4,
.wizard-area .fields-area H5 { margin: 0.5em 0; font-family:arial, sans-serif; font-size:0.9em }
.wizard-area UL.task-operators { padding: 1em }
.wizard-area UL.task-operators LI { font-size: 0.9em; list-style:disc}
.wizard-area .section {padding: 0.375em 0 1em 0;}

/* section */
.section H2 { margin: 0; font: normal 1.2em 'ralewayregular', arial, helvetica, sans-serif; }
.section-highlighted H2 {color: #2f77ef; }
.section .subsection H2 {font-size:1em}	


/* action summary & history */
.action-history { padding: 0; font-size: 0.7em; }
.action-summary { padding: 0.125em 0.5em; }
.action-history .action-summary { background: #f1f1f1; border: 1px solid #e5e5e5; float: left; margin: 1.25em 0; }


/* form components */
.entry-inline LABEL { font-size: 1em; margin: 0; color:#000; font-weight: normal;  }
.radiogroup LABEL, 
.checkboxgroup LABEL { margin-top: 0.75em; display: inline }


/* tabular css */
.vui-css-table { display:table;  }
.vui-css-row { display:table-row ; }
.vui-css-cell { display:table-cell ;  width:500% }

.vui-minwidth { width: 1%;  }
/*.vui-fullwidth { width: 100% }*/
.vui-fullwidth { width: 100% }
.vui-centerh { text-align: center }
.vui-centerv { vertical-align: middle }

/* indicators */
.vui-indicator { width:2.2em; height: 2.2em; line-height: 2.2em; border-radius:1.1em; text-align: center; display:inline-block;  }
.vui-indicator SPAN { font-size:1.1em; color:#fff; font-weight:normal; display:inline-block;  }
.vui-indicator-critical { background: #DB3C3E }
.vui-indicator-warning { background: #e69138; }
.vui-indicator-info { background: #6399f3; }

/* offsets */
.vui-offset-mainheader { display:block; height: 3em; }
.vui-offset-subheader { display:block; height: 3.4em; }
.vui-offset-breadcrumb { display:block; height: 3em; }

/* header  */
.vui-header { display:block; position: fixed; top:0; left: 0; width: 100%; font-size: 1em }
.vui-header { background: #333; color: #fff }
.vui-header h1,
.vui-header h2
 { overflow: hidden; margin:0; font-size: 0.9em; font-weight: normal; display: block; max-height:1.2em; color:#fff; }
.vui-header h2 { color: #6399f3;  }

.vui-header  .vui-css-cell { vertical-align: middle }
.vui-header  .vui-minwidth a { display: block; font-size: 1.4em; padding: 0.5em 1em; color: #fff; text-decoration: none; }

/* subheader  */
.vui-subheader { background: #eee; border-bottom:1px solid #999; }
.vui-subheader .vui-minwidth a { color: #666 }
.vui-subheader label { display:none } 
.vui-subheader input, 
.vui-subheader select  
{ border: 0; margin:0.5em 0; font-size: 0.9em }
.vui-subheader BUTTON, .vui-subheader BUTTON:active {margin:0.2em}

.vui-subheader  .vui-css-cell:first-of-type { padding-left: 1em ; }
.vui-subheader  .vui-css-cell:last-of-type { padding-right: 1em }

.vui-subheader .actions { padding-right: 1em }
.vui-subheader .actions BUTTON { display:none }
/* LK ; undisplay button CREATE */
.vui-subheader .actions BUTTON.action-create {  display:block; color: #fff; background: #00CC66; font-size: 0.9em; padding: 0.8em 0.8em 0.8em 0.8em; border-radius: 0.3em; box-shadow: 0 -0.3em 0 #00954A inset; display:none }
.vui-subheader BUTTON.action-filter, 
.vui-subheader BUTTON.action-sorter { padding:0.8em 1em; text-align:right; box-shadow: 0 -0.25em 0 #b9b9b9 inset; }

.vui-subheader BUTTON.vui-active { background: #2f77ef; color:#fff; box-shadow: none }

/* breadcrumb */
.vui-breadcrumb { background: #eee; color:#666;  }
.vui-breadcrumb a { color:#666!important;  }

.vui-breadcrumb .path ul { list-style-type:none; padding:0; margin:0 }
.vui-breadcrumb .path li { display:inline-block; color:#999;   }
.vui-breadcrumb .path li:before { content: "/"; color:#aaa; }
.vui-breadcrumb .path a { color: #333!important; text-decoration: none; display:inline-block; font-size: 0.9em; padding:0 0.8em!important; font-weight: bold }
.vui-breadcrumb .path a.parent { font-size: 1.2em; }
.vui-breadcrumb .path span { padding-left:0.8em; font-size:0.9em }

/* menus */
.vui-menu { border: 5px solid #434343; border-top: 0 none; background: #393939; padding: 3em 0; display: none; }
.vui-menu .vui-menu-close { font-size:0.8em; text-align:center; text-transform:uppercase; background: #434343; color: #848484; padding: 1em 0 }

.vui-menu h3{ font-size: 1em; padding: 0 1em; color:#6399f3;}
.vui-menu ul { margin: 0; list-style-type: square;}
.vui-menu li { font-size: 0.9em; color:#fff;  }
.vui-menu a { text-decoration: none; color:#fff; display: block; padding:0.7em;   }
.vui-menu button { font-family: 'Ralewayregular', Arial; font-size:1em; margin: 0.5em 0; text-shadow: none; border: 0; font-size: 1em; border-radius: 0em; padding: 0.8em 0 ; width: 100%; background:transparent !important; color:#fff; text-align:left; border-bottom:1px solid #fff; box-shadow:none !important  }

.vui-menu .button1 SPAN,
.vui-menu .button2 SPAN,
.vui-menu .button3 SPAN {float:left; padding-top:0.5em}
.vui-menu .action-header::after { content: "\e362"; color:#6399f3; float:right; font-family: 'vmobile'; font-size:1.7em}
.vui-menu .action-saveandclose::after { content: "\e372"; color:#00CC66; float:right; font-family: 'vmobile'; font-size:1.7em}
.vui-menu .action-save::after { content: "\e372"; color:#00CC66; float:right; font-family: 'vmobile'; font-size:1.7em}
.vui-menu .action-close::after { content: "\e36e"; color:#DB3C3E; float:right; font-family: 'vmobile'; font-size:1.7em}
.vui-menu .action-sendinformationmail::after { content: "\e0ec"; color:#6399f3; float:right; font-family: 'vmobile'; font-size:1.7em}
.vui-menu .action-help::after { content: "\e359"; color:#6399f3; float:right; font-family: 'vmobile'; font-size:1.7em}
.vui-menu .action-logout::after { content: "\e290"; color:#DB3C3E; float:right; font-family: 'vmobile'; font-size:1.7em}
.vui-menu .action-history::after { content: "\e103"; color:#6399f3; float:right; font-family: 'vmobile'; font-size:1.7em}
.vui-menu .action-abort::after { content: "\e41f"; color:#DB3C3E; float:right; font-family: 'vmobile'; font-size:1.7em}
.vui-menu .action-reminder::after { content: "\e109"; color:#00CC66; float:right; font-family: 'vmobile'; font-size:1.7em}

/* options menu */
#vui-opt-menu ul { list-style-type: none; padding: 1em }

/* breadcrumb menu */
#vui-breadcrumb-menu .streamline-entry {   }
#vui-breadcrumb-menu .streamline-entry a,
#vui-breadcrumb-menu .streamline-entry strong { padding: 0.75em; display: block  }

#vui-breadcrumb-menu ul { padding-left:0; list-style-position:inside; }
#vui-breadcrumb-menu ul li { padding-left: 0.5em; }
#vui-breadcrumb-menu ul li:nth-child(1) { padding-left: 0.5em; }
#vui-breadcrumb-menu ul li:nth-child(2) { padding-left: 1em; }
#vui-breadcrumb-menu ul li:nth-child(3) { padding-left: 1.5em; }
#vui-breadcrumb-menu ul li:nth-child(4) { padding-left: 2em; }
#vui-breadcrumb-menu ul li:nth-child(5) { padding-left: 2.5em; }
#vui-breadcrumb-menu ul li:nth-child(6) { padding-left: 3em; }
#vui-breadcrumb-menu ul li:nth-child(7) { padding-left: 3.5em; }
#vui-breadcrumb-menu ul li:nth-child(8) { padding-left: 4em; }
#vui-breadcrumb-menu ul li:nth-child(9) { padding-left: 4.5em; }
#vui-breadcrumb-menu ul li:nth-child(10) { padding-left: 5em; }

/* helper */
.vui-helper { background-color: #E4FAAD; display: none; left: 0; padding: 0.75em; position: fixed; right: 0; top: 48px; z-index:1000; color: #1A7412; font-family: "HelveticaNeue", Helvetica, Arial, sans-serif; font-size: 0.8em; border:1px solid #7BB672; }
.vui-helper-title { font-weight: bold; }
.vui-helper-close { float: right; vertical-align: middle; background-color:#1A7412; border-radius:0.3em; margin-top:0.5em}
.vui-helper-close SPAN {border-radius: 0.125em; color: #e5e5e5; font-size: 0.8em; font-weight: bold; padding: 0.2em 0.25em; text-transform: uppercase; display:block }




/* default content */
.vui-content { padding: 0; font-size: 1em}
.vui-content ul { list-style-type: none; margin: 0; padding: 0 0 0 0.9em }
.vui-content .vui-nullvalue { font-style: italic; font-size:0.8em }
.vui-content .empty { font-size:0.8em; padding: 1em; color: #aaa }


/* form */
.vui-screen-form UL { list-style-type: none; margin:0; padding:0 }
.vui-screen-form LI { display: inline; }

.form-area .informations P { padding:0; font-size: inherit; font-family: inherit; color: inherit  }

/* warning */
.warning { padding: 1em; font-size: 14px; width: 100% }

/* helper */
.vui-info-handler { vertical-align: super; display: inline-block; background-color: transparent; border-radius: 1em; text-align:center; margin-left: 0.4em; color: #c5c5c5; border: 1px solid #c5c5c5; font-family: 'Ralewayregular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.9em; font-weight: bolder; width:1.8em; height:1.8em; line-height:1.8em}
.vui-noinfo-handler { display: none; }

/* field required & error */
.mandatory { font-weight: normal }
.mandatory SPAN { display: none } /* if exists, remove old school mandatory star */
.mandatory::after { content: " *"; color: #2f77ef; font-size: 1.4em;  }
.vui-error SPAN { font-family: Arial, sans-serif; color: #fff; background-color: #DB3C3E; font-weight: normal; border-radius: 0.375em; font-size: 0.9em; display: inline-block; padding: 0.25em 0.5em; margin: 0.5em 0 0.75em 0; }


/* button area */
.button-area { padding: 0 1.25em; }
.button-area UL { padding:0; list-style-type:none }
.button-area LI { padding-bottom:0.4em; display: block }
.button-area BUTTON { display: block; width:100%; color: #fff; background: #00CC66; font-size:1em; box-shadow: 0 -0.25em 0 #00AC55 inset; font-family: 'ralewayregular', arial, sans-serif; padding: 0.8em 0.5em 1em  }
.button-area BUTTON.button1 { background: #2568ef; box-shadow: 0 -0.25em 0 #0F4BCA inset;  } /* blue */
.button-area BUTTON.button2 { background: #DB3C3E; box-shadow: 0 -0.25em 0 #9F1114 inset;  } /* red */
.button-area BUTTON.button3 { background: #00CC66; box-shadow: 0 -0.25em 0 #00AC55 inset;  } /* green */


/* resource table view */
.vui-resource-table-view BUTTON.action-create {  color: #fff; background: #00CC66; box-shadow: 0 -0.25em 0 #0cad5c inset;  }

/* authentication form */
.EzsSecurity-authenticationForm { padding: 1.25em; background-image: none); background-repeat: no-repeat; background-position: center 0 }
.EzsSecurity-authenticationForm HEADER,
.EzsSecurity-authenticationForm .vui-offset { display: none }
.EzsSecurity-authenticationForm UL { margin: 0; padding: 0 }
.EzsSecurity-authenticationForm UL LI { display: block }
.EzsSecurity-authenticationForm LABEL { margin-top: 1em;  }
.EzsSecurity-authenticationForm INPUT[type="text"] { display: block  }
.EzsSecurity-authenticationForm BUTTON.action-login { display: block; width: 100%; background: #00CC66; box-shadow: 0 -0.25em 0 #00AC55 inset;  }
.EzsSecurity-authenticationForm BUTTON.action-passwordLost { display: block; padding: 0; margin: 1em 0 0 0; background: transparent; font-size: 1em; color:#A8A8A8; text-align:left; text-decoration:underline; font-family: arial; box-shadow:none; }
.EzsSecurity-authenticationForm .button-area {padding: 1em 0;}

/* process list */
.mobile-home .vui-header H1 { padding-left: 1em } 
.mobile-home .vui-content A { text-decoration: none } 
.mobile-home .vui-content .vui-css-table { width: 100%; }
.mobile-home .vui-content .vui-css-row { background-color:#f2f2f2; }
.mobile-home .vui-content .vui-css-cell { border-bottom: 1px solid #ddd  }
.mobile-home .vui-content .icon { width: 1%; padding: 0.6em; font-size:1.5em; color:#3d3d3d; }
.mobile-home .vui-content .label { font-size: 1em; vertical-align: center }
.mobile-home .vui-content .label A { color: #1c1c1c; display: block; padding: 1em 0.3em 1em 0  }
.mobile-home .vui-content .indicator { width: 1%; padding: 0.6em; color:#fff  }
/* LK ; undisplay the button CREATE" */
/* .mobile-home .vui-content .action { width: 1%; padding: 0.4em 0.4em 0.4em 0 ;} */
.mobile-home .vui-content .action { width: 1%; padding: 0.4em 0.4em 0.4em 0; display: none }
.mobile-home .vui-content .action A { display:block; color: #fff; background: #00CC66; font-size: 0.9em; padding: 0.8em 0.8em 1em 0.8em; border-radius: 0.3em; box-shadow: 0 -0.25em 0 #00954A inset; }

.vui-subheader .popup-menu-handler { display: none }

/* views */
.list-view .detail .popup-menu-handler,
.links-view .detail .popup-menu-handler,
.thumbnails-view .detail .popup-menu-handler { float:left; margin-right: 5px }

.list-view .detail .title A,
.links-view .detail .title A,
.thumbnails-view .detail .title A { text-decoration: none; }

.list-view .detail .title A H4,
.links-view .detail A H4,
.thumbnails-view .detail A H4 { text-decoration: none }

.list-view .detail .title H4 IMG,
.links-view .detail H4 IMG,
.thumbnails-view .detail H4 IMG { margin-right:5px; }

/*--list-view--*/

/* listview default styles */
.list-view { margin:0; padding:0 0 0 3px; }
.list-view .detail { display:block; width:auto; height:auto; border:0 none; margin:0 7px 7px 0; }
.list-view .detail .detail-header,
.list-view .detail .detail-main { display: table; width: 100%; border-spacing: 0; border-collapse: collapse; }
.list-view .detail .actions,
.list-view .detail .browse { width:1%; white-space: nowrap; padding:0  }
.list-view .detail .reference { display:table-cell; width: auto }
.list-view .detail .state { display:table-cell; text-align:right; width: auto ;  color: #000000;}
.list-view .detail .thumbnail { float: left; margin-right: 0.3em; }
.list-view .detail .thumbnail IMG { background-position: center center; background-repeat:no-repeat; background-size: cover; width: 3em; height: 3em; border:0 }
.list-view .detail .has-thumbnail H4 { padding-top:0.25em;  }
.list-view .detail .title H4 { display:inline; margin:0.1em;; }
.list-view .detail .title H4 IMG { margin-right:0.2em; }
.list-view .detail .title P { }
.list-view .detail P,
.list-view .detail .property { margin:0.2em 0; }
.list-view .detail .extended-properties { color: #777; }
.list-view .main-actions { margin:0.2em 0; }
.list-view .detail .attachments STRONG {display:block;}
.list-view .detail .attachments A { display: inline; font-size:0.9em; font-family:arial,sans-serif; padding: 0.2em 0; margin:0.2em 0 }
.list-view .detail .attachments IMG { margin: 0.25em 0 }

/* enlarge listview item sensible zone */
.list-view .detail .title A { padding:0 0 0 0; display: block; min-height: 0 }
/* .list-view .detail .title A { padding:0.25em 0 0.5em 0; display: block; min-height: 1.5em } */
.list-view .detail .title H4 { display:block; padding-top: 0 }
.list-view .detail .title P { display:block }

/* listview default font size */
.list-view .detail .details-handle,
.list-view .detail .reference,
.list-view .detail .state,
.list-view .detail P,
.list-view .detail .property,
.list-view .detail .attachments,
.list-view .detail .path { font-size: 0.8em }

/* listview custom styles */
.list-view .detail { border-bottom: 1px solid #ddd; padding-left:0.375em; padding-bottom:0.375em;}
.list-view .detail a { text-decoration: none; color: #6633FF; font-weight:bold  ; font: normal 1.25em 'ralewayregular', arial, helvetica, sans-serif; }
.list-view .detail .reference { color: #000000; font-weight:bold ; padding: 0.6em 0.5em 0.4em 0;  }
.list-view .detail .state {  color: #000000; text-align: right; padding: 0.5em 1em 0.4em;  }
.list-view .detail .title H4 { margin:0; font-size: 0.8em;  }
.list-view .detail .title P { font-size: 0.7em; color:#000;   }
.list-view .detail .properties, 
.detail .date, 
.detail .actor, 
.detail .path, 
.detail .property, 
.detail .attachments { color:#808080; font-weight:bold ; margin:0.4em 0; }
.list-view .detail STRONG { font-weight: normal; color: #777 }
/* LK , j'ai mis display:none pour masquer le detail qui me sert a trier par ordre decroissant les DI */
.list-view .detail .details-handle { display:none; margin:0.4em 0;  }
.list-view .detail .details-handle A { margin:0.4em 0; text-decoration: none; font-size: 0.8em; text-transform:uppercase; color:#fff; background-color:#bbb; border-radius:0.3em; padding:0.5em; font-weight:bold  }
.list-view .detail .details {  padding: 0; display: none }
.list-view .detail UL { margin:0.4em; }
.list-view .detail .property, 
.list-view .detail LI { margin:0; font-family:arial; list-style:disc;}

.list-view .detail .browse { vertical-align: middle; }
.list-view .detail .browse A { display: block; font-size: 1.4em; padding: 0.5em 1em; color: #000; text-decoration: none; }

.list-view .detail .details {  display: none }
.list-view .details-visible .details { display: block }
.list-view .details-visible .details-handle A { background-color:#6399f3 }

/* added for CP , to display color by status */
.list-view .cellorange{ border-bottom: 1px solid #ddd; padding-left:0.375em; padding-bottom:0.375em; background-color:#f39c12;}
.list-view .cellvert{ border-bottom: 1px solid #ddd; padding-left:0.375em; padding-bottom:0.375em; background-color:#2ecc71;}
.list-view .cellrouge{ border-bottom: 1px solid #ddd; padding-left:0.375em; padding-bottom:0.375em; background-color:#e74c3c;}



/* fullscreen views */
.list-view-fullscreen { padding: 0 }

/* view filters & sorter */
.view-filter .filter-field,
.view-filter .filter-operator,
.view-filter .filter-value { display: block; margin-bottom: 0.25em }

.view-filter .filter-label { display:none }
.view-filter .filter .action-add { display:block; width:100%; background:#2568ef; box-shadow: 0 -0.25em 0 #0F4BCA inset; color:#fff; margin:0.5em 0; padding: 0.8em 0.5em 1em }
.view-filter .button-area BUTTON.action-initialize { background: #ee2929; box-shadow: 0 -0.25em 0 #B70F0F inset; }

.view-filter .applied-filter { display: block; vertical-align: middle; padding:0.5em 0;  }
.view-filter .applied-filter BUTTON { background: transparent; box-shadow: none; padding:0 0.5em 0 0; margin: 0 0 0.1em 0; vertical-align: text-bottom; }
.view-filter .applied-filter BUTTON SPAN { display:none }
.view-filter .applied-filter BUTTON::after { content: "\e60c"; float:right; font-family: 'vmobile'; font-size:1.4em; color:#b9b9b9}



/* document */
.vui-screen-document { padding: 0 }
.vui-screen-document .section { padding: 0.375em 0.5em 1em 0.5em; border-left: 0.375em solid transparent; }
.vui-screen-document .section-highlighted { border-color: #2f77ef; }

/* document history */
.mobile-WorkflowInstanceHistory .list-view .detail .title H4 { font-size:1em }
.mobile-WorkflowInstanceHistory .list-view .detail .title P { font-size:0.8em }

/* wizard */
.vui-screen-wizard .wizard-area { }
.vui-screen-wizard .wizard-area .picture,
.vui-screen-wizard .wizard-area .informations H2 { display: none } /* New document is moved inside the main header */
.vui-screen-wizard .fields-area H3 { margin: 0; font-weight: normal; padding: 0; color:#000; font-size: 0.9em; font-family: 'Ralewayregular', Arial, "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif; }  } /* fix : information zone is mapped here, apply same style than .informations but cancel paading inherited from .fields-area */
.vui-screen-wizard .section { border-left:0 none }
.vui-screen-wizard .action-cancel { background: #DB3C3E; color: #fff; box-shadow: 0 -0.25em 0 #9F1114 inset; }

/* components */

/*---popup menu---*/

/* handler */
.popup-menu-handler, 
.popup-menu-handler IMG,
.popup-menu-handler SPAN { display:inline-block; height:32px; line-height:32px; vertical-align:middle }
/* left image is hidden by defaut */
.popup-menu-handler .button-imgl { display:none }
/* left part */
.popup-menu-handler SPAN { background:url(images/popup-menu-handler-left-mobile.png) repeat-x left center; padding:0 5px; border-right:1px solid transparent  } 
.popup-menu-handler SPAN A { color:#000; text-decoration: none; font-size: 0.9em }
.popup-menu-handler SPAN input[type='checkbox'] { border:0; }
/* right part (trick: hide left border of the image) */
.popup-menu-handler .button-imgr { width:32px; background:url(images/popup-menu-handler-right-mobile.png) no-repeat right center; cursor:pointer; border-left:1px solid transparent; margin-left:0 }
/* when only dropdown menu is displayed (no text nor input) */
.popup-menu-handler-dropdown-only SPAN { display:none }
.popup-menu-handler-dropdown-only .button-imgr{ border:0 none; width:35px }




/*--popup menu--*/
.popup-menu-background { position: fixed; z-index: 9998; top: 0; left: 0; opacity: 0.5; background-color: #000; }
.popup-menu { position: fixed; z-index: 9999; background-color: #fff; border-radius:0.2em ; }
.popup-menu UL { display:block; margin:0; padding:0; list-style:none; }
.popup-menu LI { margin:0; border-top:1px solid #dedede }
.popup-menu LI.first { border:0 none }
.popup-menu LI A { display:block; padding:0.8em; text-decoration:none; font-size:1.4em; color:#000 }

.popup-menu .popup-menu-close { font-size:0.6em; text-align:center; text-transform:uppercase }
.popup-menu .popup-menu-separator { background-image:url(images/popupmenu_separator.png); background-repeat:repeat-x; background-position:left center;	padding:0; height:5px; margin:0 3px; }
.popup-menu .popup-menu-separator IMG { min-width:100px; height:5px!important; vertical-align:middle; }


/*---selectors---*/

/* both views */
.vui-selector-content .detail .title H4,
.vui-selector-basket-content .detail .title H4 { font-size: 1em }
.vui-selector-content .detail .title P,
.vui-selector-basket-content .detail .title P { font-size: 0.8em }

/* selection view */
.vui-selector-content .detail-selectable .actions { display:none }
.vui-selector-content .detail-selectable .title { padding-left:32px; background:transparent url(images/vui-selector-selectable.png) no-repeat 8px center;  }
.vui-selector-content .detail-selected .title { background-image:url(images/vui-selector-selected.png) }

/* selection basket view */
.vui-selector-basket-content .detail .actions { display:none }
.vui-selector-basket-content .detail .title { padding-left:32px; background:transparent url(images/vui-selector-deletable.png) no-repeat 8px center;  }
 
/* search filter */
.vui-subheader .vui-search-filter-change {background-color: #FDFDC7; color: #FF7E00;}

/* once elements are selected */
.vui-single-selector-field BUTTON.action-delete { background: transparent; box-shadow: none; padding:0 0.5em 0 0; margin: 0; }
.vui-single-selector-field BUTTON.action-delete SPAN { display:none }
.vui-single-selector-field BUTTON.action-delete::after { content: "\e60c"; float:right; font-family: 'vmobile'; font-size:1.4em; color:#b9b9b9}

.vui-single-selector-field BUTTON.action-more,
.vui-multiple-selector-field BUTTON.action-more { width:2.4em; height:2em; color:#000; }
.vui-single-selector-field BUTTON.action-more SPAN,
.vui-multiple-selector-field BUTTON.action-more SPAN { display:none }
.vui-single-selector-field BUTTON.action-more::after,
.vui-multiple-selector-field BUTTON.action-more::after { content: "..."; font-weight:bold; font-size:1em }

.vui-single-selector-field SPAN { font-size:0.8em; } 

.vui-multiple-selector-field BUTTON,
.vui-multiple-selector-field .vui-indicator { vertical-align: middle } /* align button and indicator */

.vui-multiple-selector-field UL { display:inline }
.vui-multiple-selector-field LI { font-size:0.8em; display:inline-block }
.vui-multiple-selector-field LI::after { content: ","; padding-right:0.4em }
.vui-multiple-selector-field LI:last-of-type::after { content: none }
.vui-multiple-selector-field .vui-selector-more-item::after { content: "..."!important } /*override previous line*/


/* file upload */

.vui-file-upload .list-view .detail { border:0; padding: 0; margin: 0 }
.vui-file-upload .list-view .detail .title { font-size: 0.8em;  }
.vui-file-upload .list-view .detail .title A { color: #2f77ef;  }
.vui-file-upload .list-view .detail .title H4 { display:inline; margin:0.6em 0 }
.vui-file-upload .list-view .detail .title P { display:inline; font-weight: bold; color: #777; margin-left:0.5em }

.vui-file-upload BUTTON.action-add {vertical-align:middle;}
.vui-file-upload BUTTON.action-add SPAN { display:none }
.vui-file-upload BUTTON.action-add::after { content: "\e2c1"; float:right; font-family: 'vmobile'; font-size:1.2em}

/* datetime */
.datetime-field DIV { display:inline-block }
.datetime-field LABEL { margin:0; padding-right:0.3em } /* override default label behavior */
.datetime-field STRONG { padding:0 0.1em }
.datetime-field SELECT { width: auto }

.date-field,
.time-field
{ vertical-align: middle }

.date-field INPUT[type="date"] { width:8em }
.time-field INPUT[type="time"] { width:6em }

SPAN.prefix-label { display: block; font-size:9px }



/* period */
.period-field-inline { display:inline }

/* captcha */
.captcha IMG { margin-right: 1em }
.captcha BUTTON SPAN { display:none }
.captcha BUTTON::after { content: "\e60b"; float:right; font-family: 'vmobile'; font-size:1.4em}
.captcha INPUT { display:block }

/* dynamic table */
/*  preview inside document */
.vui-resource-table-view .vui-indicator {float:right; margin-top:0.2em} 
/*  edit table entry form */
.dyntable-form .section-highlighted:first-of-type { border-color: transparent }
.dyntable-form .section-highlighted>H2 { display: none } /* hide first level H2, title is already displayed in title bar */
.dyntable-form .fields-area:first-of-type { padding:0 }

/* document parallel tasks */
.document-activities p { padding:0.4em; display: block }
.document-activities p a { display: block }
.document-activities { background: #f1f1f1; border-left: .4em solid #c5c5c5; }


/* override some buttons color */
.buttons-group UL { list-style-type:none; padding:0; margin:0 }
.buttons-group BUTTON.action-save, 
.buttons-group BUTTON.action-saveandclose
{ background: #00CC66/*#2568ef*/; color: #fff;  box-shadow: 0 -0.25em 0 #00954A inset; }
.buttons-group BUTTON.action-terminate {background:#2568ef; box-shadow: 0 -0.25em 0 #0F4BCA inset;}

/* treeview */
.treeview { height:100%; padding:0px}
.treeview TABLE TABLE {padding-left:8px}

/* treeview icons */
.treeview .tv_dots_hbd { background-image: url(images/tree/tv_dots_hbd.gif); }
.treeview .tv_dots_hd { background-image: url(images/tree/tv_dots_hd.gif); }
.treeview  .tv_dots_hb { width: 16px; background-image: url(images/tree/tv_dots_hb2.gif); background-repeat:repeat-y; background-position:0px 0px}

.treeview .tv_minus_hbd { background-image: url(images/tree/tv_minus_hbd.gif); cursor:pointer}
.treeview .tv_minus_hd { background-image: url(images/tree/tv_minus_hd.gif);  cursor:pointer}
.treeview .tv_minus_d { background-image: url(images/tree/tv_minus_d.gif);  cursor:pointer}
.treeview .tv_minus_bd { background-image: url(images/tree/tv_minus_bd.gif);  cursor:pointer}

.treeview .tv_plus_hbd { background-image: url(images/tree/tv_plus_hbd.gif);  cursor:pointer}
.treeview .tv_plus_hd { background-image: url(images/tree/tv_plus_hd.gif);  cursor:pointer}
.treeview .tv_plus_bd { background-image: url(images/tree/tv_plus_bd.gif);  cursor:pointer}
.treeview .tv_plus_d { background-image: url(images/tree/tv_plus_d.gif);  cursor:pointer}

.treeview .tv_dots_hbd,.treeview .tv_dots_hd,.treeview .tv_minus_hbd,.treeview .tv_minus_hd,.treeview .tv_minus_d,.treeview .tv_minus_bd,.treeview .tv_plus_hbd,.treeview .tv_plus_hd,.treeview .tv_plus_bd,.treeview .tv_plus_d { height: 40px; width: 16px;vertical-align: center;	padding :0px; font-size:1px; display:block}

.treeview .ico_opndfold { background-image: url(images/tree/ico_opndfold.gif); }
.treeview .ico_clsdfold { background-image: url(images/tree/ico_clsdfold.gif); }
.treeview .ico_opndfold,.treeview .ico_clsdfold {height: 20px; width: 16px;	vertical-align: center;	padding :0px; font-size:1px; }

/*treeview label*/
.treenode, .treenode LABEL { font-family: arial,sans serif; font-size:12px; font-weight:normal; padding:0px 0px 0px 25px; text-decoration:none; cursor:pointer; vertical-align:middle}
.treenode IMG { margin-left:-22px }

	/* links */
	.treenode A { text-decoration:none; white-space:normal; }
	.treenode A:link , .treenode A:visited { text-decoration:none !important; color:#2f77ef}
	.treenode A:hover { text-decoration:none !important; color:#2f77ef }
	.treenode A:active { text-decoration :none !important; color:#2f77ef }
	
	
/* autocomplete list */
.vui-combobox { white-space: nowrap; width: 100%; display: block; background: transparent; border: 1px solid #cdcdcd; border-radius: 0.25em; display: table }
.vui-combobox INPUT[type="text"] { display: table-cell; width:98%; border: 0 none; border-radius: 0 }
.vui-combobox INPUT.has-selected-items::-webkit-input-placeholder { color: #000 }
.vui-combobox .action { display: table-cell; width: 1px; vertical-align: middle; }

.vui-combobox BUTTON,
.vui-combobox-items BUTTON { background: transparent; box-shadow: none; border: 0 none; margin: 0; padding: 0; outline: none; vertical-align: baseline }
.vui-combobox BUTTON SPAN,
.vui-combobox-items BUTTON SPAN { display: none }

.vui-combobox BUTTON.action-delete { padding-left: 0.5em }
.vui-combobox BUTTON.action-opener { text-align: right; width: 2em; padding-right: 0.5em }
.vui-combobox BUTTON.action-opener::before { font-family: arial; font-size: 0.8em; color: #cdcdcd; content: "\25bc"; }

.vui-combobox-menu, 
.vui-combobox-value { margin-top: 0.8em; padding: 0; border-collapse: collapse }
.vui-combobox-menu LI,
.vui-combobox-value LI { display: block; padding: 0.75em; font-size: 1em; background:#f5f5f5; }
.vui-combobox-item { border-bottom: 1px solid #e5e5e5;  }
.vui-combobox-item INPUT[type="checkbox"] { margin-right: 0.5em  }
.vui-combobox-item LABEL { margin:0; color: #000; padding: 0; display: block  }

.vui-combobox-menu LABEL,
.vui-combobox-group { font-weight: bold; color: #b9b9b9 }
.vui-combobox-menu .vui-combobox-item { border-bottom: 0 }

.vui-combobox-selected-items { padding: 0.25em 0.75em }

.vui-combobox BUTTON.action-delete,
.vui-combobox-items BUTTON.action-delete { vertical-align: bottom }
.vui-combobox BUTTON.action-delete::after,
.vui-combobox-items BUTTON.action-delete::after { content: "\e60c"; float:right; font-family: 'vmobile'; font-size:1.4em; color:#b9b9b9; }

.vui-combobox-selected-items BUTTON { background: transparent; box-shadow: none; border: 0 none; margin: 0; padding: 0; outline: none; vertical-align: baseline }
.vui-combobox-selected-items BUTTON.action-delete SPAN { display: none }
.vui-combobox-selected-items BUTTON.action-delete {  padding-right: 0.15em; vertical-align: bottom }
.vui-combobox-selected-items BUTTON.action-delete::after { content: "\e60c"; float:right; font-family: 'vmobile'; font-size:1.4em; color:#b9b9b9; }

.vui-combobox-selected-items-min UL { display:inline; padding-left: 0 }
.vui-combobox-selected-items-min LI { font-size:0.8em; display:inline-block; padding-right:0.4em }
.vui-combobox-selected-items-min LI::after { content: "," }
.vui-combobox-selected-items-min LI:last-of-type::after { content: none }
.vui-combobox-selected-items-min .vui-selector-more-item::after { content: "..."!important } /*override previous line*/

.vui-combobox-selected-items-min BUTTON.action-show,
.vui-combobox-selected-items-full BUTTON.action-hide  { margin: 0; text-decoration: none; font-size: 0.8em; text-transform:uppercase; color:#fff; background-color:#bbb; border-radius:0.3em; padding:0.4em; font-weight:bold  }

.vui-combobox-selected-items-full UL { padding-left: 0 }
.vui-combobox-selected-items-full LI { display: block; padding: 0.75em 0; font-size: 1em; border-bottom: 1px solid #e5e5e5 }
.vui-combobox-selected-items-full BUTTON.action-delete { padding-right: 0.25em }
.vui-combobox-selected-items-full BUTTON.action-hide { margin-top: 0.75em }
.vui-combobox-selected-items-full LI:last-of-type { border: 0 none }



	
@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */
  .company-logo { background-image: url(images/company-logo/480px.jpg); }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */
  .company-logo { background-image: url(images/company-logo/720px.jpg); }
}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */
  .company-logo { background-image: url(images/company-logo/720px.jpg); }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */
  .company-logo { background-image: url(images/company-logo/1280px.jpg); }
}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */
  .company-logo { background-image: url(images/company-logo/1280px.jpg); }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */
  .company-logo { background-image: url(images/company-logo/1280px.jpg); }
}