:root
{
  --dark-blue: #048;
  --blue: #08c;
  --blue-hover: #0ae;
  --red: #c00;
  --red-hover: #e00;
  --orange: #f80;
  --orange-hover: #fa0;
  --green: #4a4;
  --green-hover: #6c6;

  --burger-bgcolor: transparent;
  --burger-color: var(--blue);

  --hmenu-color-light:  #39c;
  --hmenu-color-light2: #48b;
  --hmenu-color-dark:   #069;

  --vmenu-bgcolor: #eee;
  --vmenu-bdcolor: #ccc;
  --vmenu-title-bgcolor: #ccc;
  --vmenu-title-color:   #000;
  --vmenu-a-bgcolor: #eee;
  --vmenu-a-color:   #000;
  --vmenu-ahover-bgcolor: #fc6;
  --vmenu-ahover-color:   #000;

  --message-bgcolor: #afa;
  --message-bdcolor: #0c0;
  --error-bgcolor: #faa;
  --error-bdcolor: var(--red);

  --h1-color: #6d98cb;

  --list-create-bgcolor: #ddf;
  --list-create-color:   #048;
  --list-create-hover-bgcolor: #4af;
  --list-create-hover-color:   #fff;
  --list-tr-hover-bgcolor: #fc6;
  --list-icon-color: var(--blue);
  --list-icon-hover-color: #4af;

  --field-bdcolor: #aaa;
  --field-focus-bdcolor: var(--blue);
  --field-focus-shcolor: #4af;

  --submit-bgcolor: var(--blue);
  --submit-color:   #fff;
  --submit-bdcolor: #04a;
  --submit-hover-bgcolor: #4af;
  --submit-hover-color:   var(--submit-color);
  --submit-hover-bdcolor: var(--submit-bgcolor);
  --submit-hover-shcolor: var(--submit-hover-bgcolor);

  --button-bgcolor: #ccc;
  --button-color:   #000;
  --button-bdcolor: #aaa;
  --button-hover-bgcolor: #ddd;
  --button-hover-color:   var(--button-color);
  --button-hover-bdcolor: #bbb;
  --button-hover-shcolor: var(--button-hover-bgcolor);

  --reset-bgcolor: var(--button-bgcolor);
  --reset-color:   var(--button-color);
  --reset-bdcolor: var(--button-bgcolor);
  --reset-hover-bgcolor: var(--button-hover-bgcolor);
  --reset-hover-color:   var(--button-hover-color);
  --reset-hover-bdcolor: var(--button-hover-bdcolor);
  --reset-hover-shcolor: var(--button-hover-shcolor);

  --form-label-width: 80px;
  --form-label-margin-right: 10px;
  --form-field-margin-top: 3px;
}

@font-face
{
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(rsc/material-icons.woff2) format("woff2");
}

/*
@font-face
{
  font-family: "Material Symbols";
  font-style: normal;
  font-weight: 400;
  src: url(rsc/material-symbols.woff2) format("woff2");
}
*/

.icon, .symbol
{
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 20px !important;
  text-align: center !important;
  text-transform: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: "liga";
  -moz-osx-font-smoothing: grayscale;
}

.icon
{
  font-family: "Material Icons" !important;
}

/*
.symbol
{
  font-family: "Material Symbols" !important;
}
*/

html, body { height:100vh; }

body { font-family:Arial,Verdana,sans-serif; margin:0px; padding:0px; }

* { box-sizing:border-box; }
a, a:hover, a:focus, a:active { text-decoration:none; }
img { border:0px; }
form { margin:0px; }
input[type=text], input[type="number"], input[type="email"], input[type="password"],
input[type="button"], input[type="submit"], textarea, button /*, select*/ { -webkit-appearance:none; -moz-appearance:none; appearance:none; }
input, textarea, select, button { border-radius:0px; }
input[type="radio"] { border-radius:50%; }

.btn, .btn-primary { display:inline-block; font-size:10pt; line-height:20px; padding:7px 15px; text-align:center; text-decoration:none; cursor:pointer; }
.btn .icon, .btn-primary .icon { margin-right:5px; vertical-align:bottom !important; }
.btn { background-color:var(--button-bgcolor); color:var(--button-color); border:1px solid var(--button-bdcolor); }
.btn:hover { background-color:var(--button-hover-bgcolor); color:var(--button-hover-color); border-color:var(--button-hover-bdcolor); box-shadow:0px 0px 3px var(--butto-hover-shcolor); }
.btn-primary { background-color:var(--submit-bgcolor); color:var(--submit-color); border:1px solid var(--submit-bdcolor); }
.btn-primary:hover { background-color:var(--submit-hover-bgcolor); color:var(--submit-hover-color); border-color:var(--submit-hover-bdcolor); box-shadow:0px 0px 3px var(--submit-hover-shcolor); }

header, .hmenu, #body, #foot { width:100%!important; clear:both; }
#body { position:relative; }
#body, .vmenu { min-height:100%; }
#btnmenu, .burger, .bgmenu { display:none; }

/*
//==============================================================================
// Login
//==============================================================================
*/

body.login { height:calc(100vh - 60px); background-color:#e5e5e5; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:12px; margin:30px; }

body.login #border { background-color:#fff; border:1px solid #98aab1; width:100%; height:100%; }
body.login #border tr { vertical-align:middle; }
body.login #border td { text-align:center; }
body.login #border #logo { display:block; max-width:90%; max-height:150px; margin:30px auto; }

#login { text-align:center; }
#login form { margin:0px; }
#login table { width:360px; max-width:80vw; margin:30px auto 20vh auto; background-color:#fff; border:2px solid #069; }
#login table tr { vertical-align:middle; }
#login table th, #login table td { font-size:10pt; padding:2px 10px; }
#login table thead tr td { background-color:#069; color:#ffa34f; font-weight:bold; padding:5px; text-align:center; }
#login table th { padding-right:0px; text-align:right; }
#login table tfoot tr td { text-align:center; }
#login label { white-space:nowrap; font-weight:bold; }
#login input { font-size:12pt; font-weight:bold; vertical-align:middle; }
#login input[type="text"], #login input[type="password"] { width:100%; height:35px; line-height:35px; padding:0px 5px 0px 28px; background-color:#fff; background-repeat:no-repeat; background-position:2px center; border:1px solid #069; border-left:5px solid #069; color:#000; }
#login input[type="text"]:focus, #login input[type="password"]:focus { border-color:var(--field-focus-bdcolor); box-shadow:0px 0px 3px var(--field-focus-shcolor); }
#login input[type="text"] { background-image:url(rsc/ico-login.png); }
#login input[type="password"] { background-image:url(rsc/ico-pass.png); }
#login .memoriser label { font-weight:normal; }
#login input[type="submit"] { width:100%; height:35px; padding:0px 10px; background-color:var(--submit-bgcolor); color:var(--submit-color); border:1px solid var(--submit-bdcolor); }
#login input[type="submit"]:hover { background-color:var(--submit-hover-bgcolor); color:var(--submit-hover-color); border-color:var(--submit-hover-bdcolor); box-shadow:0px 0px 3px var(--submit-hover-shcolor); cursor:pointer; }

#confirm { width:300px; background-color:#eeeeee; border:1px solid #98aab1; font-size:12px; margin:20vh auto; }
#confirm .message { margin:20px; text-align:left; }
#confirm .boutons { margin:20px; text-align:right; }
#confirm .boutons a { width:80px; background-color:#e0e0e0; border:1px solid #98aab1; color:#808080; font-weight:bold; margin-left:10px; padding:5px 10px; text-align:center; text-decoration:none; }
#confirm .boutons a:hover { background-color:#ffcc66; }

/*
//==============================================================================
// Header
//==============================================================================
*/

header { display:block; height:65px; background:linear-gradient(90deg,#fff,#b6c5ee); }
header > img { width:500px; height:55px; object-fit:contain; object-position:left center; margin:5px 10px 0px 10px; float:left; }
header #messages { width:500px; max-width:calc(100% - 20px); height:55px; margin:5px 10px 0px 10px; float:left; overflow:auto; border:1px solid var(--hmenu-color-dark); }
header #messages ul { margin:0px 10px 0px 20px; padding:0px; font-size:8pt; }
header #messages li { margin:3px 0px; }
header #messages a { color:#008; }
header #messages a:hover { color:var(--blue); text-decoration:underline; }
header #messages .objet { color:var(--blue); font-weight:bold; }

/*
//==============================================================================
// Appels entrants
//==============================================================================
*/

#appels-entrants { position:fixed; top:0px; left:0px; right:0px; z-index:9999; display:block; width:100%; min-height:0px; background-color:rgba(0,0,0,0.7); color:#fff; transition:all 0.3s ease; }
#appels-entrants ul { margin:10px 20px; padding:0px; list-style:none; }
#appels-entrants ul li { line-height:20px; margin:0px; padding:0px; }
#appels-entrants ul li a { color:#fff; }
#appels-entrants ul li a i { color:#ccc; }
#appels-entrants ul li a:hover { color:var(--blue); }
#appels-entrants ul li a:hover i { color:#06a; }

/*
//==============================================================================
// Menu horizontal
//==============================================================================
*/

.hmenu { height:24px; position:sticky; top:0px; z-index:100; font-size:0px; list-style:none; margin:0px; padding:0px; background:linear-gradient(var(--hmenu-color-light),var(--hmenu-color-light2)); border-top:1px solid var(--hmenu-color-light); border-bottom:1px solid var(--hmenu-color-dark); }
.hmenu { overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:thin; }
.hmenu li, .hmenu::before, .hmenu::after { display:inline-block; height:22px; line-height:22px; margin:0px; padding:0px; vertical-align:middle; }
.hmenu li > * { display:block; color:#fff; font-size:10pt; padding:0px 20px; }
.hmenu li a:hover { background-color:var(--hmenu-color-light); }
.hmenu li span { color:rgba(255,255,255,0.3); cursor:not-allowed; }
.hmenu::before, .hmenu::after { width:40px; content:""; }
.hmenu li, .hmenu::before { border-right:1px solid var(--hmenu-color-dark); }
.hmenu li, .hmenu::after { border-left:1px solid var(--hmenu-color-light); }

/*
//==============================================================================
// Menu vertical
//==============================================================================
*/

.vmenu { position:absolute; z-index:1; background-color:var(--vmenu-bgcolor); border-right:1px solid var(--vmenu-bdcolor); list-style:none; }
.vmenu, .vmenu li, .vmenu li > * { display:block; margin:0px; padding:0px; }
.vmenu { width:135px; padding-bottom:20px; }
.vmenu li { border-bottom:1px solid var(--vmenu-bdcolor); font-size:8pt; }
.vmenu li.title, .vmenu li > * { height:22px; line-height:22px; text-indent:8px; white-space:nowrap; overflow:hidden; text-overflow:"…"; }
.vmenu li.title { background-color:var(--vmenu-title-bgcolor); color:var(--vmenu-title-color); font-weight:bold; cursor:default; }
.vmenu li a { background-color:var(--vmenu-a-bgcolor); color:var(--vmenu-a-color); position:relative; }
.vmenu li a:hover { background-color:var(--vmenu-ahover-bgcolor); color:var(--vmenu-ahover-color); }
.vmenu li.end { border-bottom:0px; }
.vmenu.inactif li.title { color:#999; cursor:not-allowed; }
.vmenu li > span { color:#aaa; cursor:not-allowed; }
.vmenu li a span { display:block; min-width:20px; height:20px; line-height:20px; position:absolute; top:1px; right:4px; background-color:var(--red); color:#fff; border-radius:10px; font-size:10px; font-weight:normal; text-align:center; text-indent:0px; }

/*
//==============================================================================
// Page
//==============================================================================
*/

#body #page { width:auto !important; padding:10px 15px 10px 150px; position:relative; font-size:8pt; }
#body #page h1 {width:800px;max-width:100%;position:relative;margin:0px 0px 10px 0px;padding:0px 0px 10px 15px;color:var(--h1-color);font-size:16pt;background-repeat:no-repeat;background-position:0px 8px;}
#body #page h1 {background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='10'><rect fill='%23000' x='0' y='0' width='2' height='2'/><rect fill='%23000' x='4' y='4' width='2' height='2'/><rect fill='%23000' x='0' y='8' width='2' height='2'/></svg>");}
#body #page h1::before {content:"";display:block;width:5px;height:5px;position:absolute;right:0px;bottom:0px;border-radius:50%;background-color:var(--h1-color);}
#body #page h1::after {content:"";display:block;width:100%;height:6px;position:absolute;left:0px;bottom:2px;background:linear-gradient(90deg,var(--h1-color),transparent);border-bottom:1px solid var(--h1-color);}

#body br {clear:both;}

.clear {clear:both;height:1px;overflow:hidden;}

#info_telecopies { position:absolute; left:0px; top:129px; z-index:100; width:134px; height:20px; line-height:20px; text-indent:8px; }
#info_telecopies { background-color:#cc0000; color:#ffffff; font-size:8pt; font-weight:bold; }

/*
//==============================================================================
// Footer
//==============================================================================
*/

#foot { display:none; height:65px; position:fixed; left:0px; bottom:0px; z-index:2; background-color:#fff; font-family:Verdana,Arial,sans-serif; font-size:10px; line-height:16px; }
#foot .copyright { padding:5px 0px; text-align:center; }
#foot .copyright, #foot .copyright a { color:#aaa; }
#foot .copyright a { }
#foot .copyright a:hover { text-decoration:underline; }

/*
//==============================================================================
// Filtres
//==============================================================================
*/

.filtres { width:100%!important; }
.filtres, .filtres * { font-family:MS Sans Serif,Arial,Verdana,sans-serif; font-size:8pt; vertical-align:middle; }
.filtres { line-height:20px; }
.filtres form > div, .filtres form #filtres_complementaires > div { display:inline-block; float:none!important; margin:2px 10px 2px 0px!important; }
.filtres form > br { display:none; }
.filtres form > div > .action { margin:0px !important; }
.filtres form > div > .action a { display:inline-block; margin:0px 10px 0px 0px; font-size:10pt; }
.filtres label, .filtres input, .filtres select, .filtres textarea, .filtres .multiselect, .filtres .filtres_complementaires { display:inline-block; margin:0px; }
.filtres label, .filtres input, .filtres select, .filtres .multiselect, .filtres .filtres_complementaires { height:20px; line-height:18px; padding:0px 2px; }
.filtres input, .filtres textarea, .filtres select, .filtres button { border:1px solid var(--field-bdcolor); border-radius:0px; transition:all 0.15s ease; }
.filtres input[type="checkbox"], .filtres input[type="radio"] { accent-color:var(--submit-bgcolor); }
.filtres input:focus, .filtres textarea:focus, .filtres select:focus, .filtres button:focus { border:1px solid var(--field-focus-bdcolor); box-shadow:0px 0px 3px var(--field-focus-shcolor); }
.filtres textarea { padding:1px 2px; line-height:15px; }
.filtres button[type="submit"], .filtres input[type="submit"], .filtres input.submit { line-height:normal; padding:0px 3px; background-color:var(--submit-bgcolor); color:var(--submit-color); border-color:var(--submit-bdcolor); }
.filtres button[type="submit"] { width:22px; height:20px; line-height:18px; padding:0px; font-size:0px; text-align:center; }
.filtres button[type="submit"]::before { content:"filter_alt"; display:inline-block; width:18px; height:18px; line-height:18px; font-family:"Material Icons" !important; font-size:15px; text-align:center; vertical-align:top; }
.filtres button[type="submit"]:hover, .filtres input[type="submit"]:hover, .filtres input.submit:hover { background-color:var(--submit-hover-bgcolor); color:var(--submit-hover-color); border-color:var(--submit-hover-bdcolor); box-shadow:0px 0px 3px var(--submit-hover-shcolor); cursor:pointer; }
.filtres input[type="button"] { background-color:var(--button-bgcolor); color:var(--button-color); border-color:var(--button-bdcolor); }
.filtres input[type="button"]:hover { background-color:var(--button-hover-bgcolor); color:var(--button-hover-color); border-color:var(--button-hover-bdcolor); box-shadow:0px 0px 3px var(--button-hover-shcolor); cursor:pointer; }
.filtres select option.titre { color:#aaaaaa; }
.filtres select option.none { color:#a00000; }
.filtres select[multiple] { position:absolute; height:auto; }
.filtres .multiselect { width:20px; background-color:var(--button-bgcolor); color:var(--button-color); border:1px solid var(--button-bdcolor); padding:0px; text-align:center; cursor:pointer; }
.filtres .multiselect:hover { background-color:var(--button-hover-bgcolor); color:var(--button-hover-color); border-color:var(--button-hover-bdcolor); box-shadow:0px 0px 3px var(--button-hover-shcolor); }
.filtres .filtres_complementaires { line-height:18px; padding:0px 5px; background-color:var(--button-bgcolor); color:var(--button-color); border:1px solid var(--button-bdcolor); font-style:normal!important; font-weight:normal!important; cursor:pointer!important; }
.filtres .filtres_complementaires:hover { background-color:var(--button-hover-bgcolor); color:var(--button-hover-color); border-color:var(--button-hover-bdcolor); box-shadow:0px 0px 3px var(--button-hover-shcolor); cursor:pointer; }
.filtres #filtres_complementaires { display:none; background-color:#f8f8f8; border:1px solid #ddd; padding:5px 10px; }
.filtres .filtres_raz a { display:inline-block; height:20px; line-height:18px; padding:0px 5px 0px 3px; background-color:var(--reset-bgcolor); border:1px solid var(--reset-bdcolor); color:var(--reset-color); }
.filtres .filtres_raz a .icon { width:18px!important; height:18px!important; line-height:18px!important; vertical-align:top!important; }
.filtres .filtres_raz a:hover { background-color:var(--reset-hover-bgcolor); border-color:var(--reset-hover-bdcolor); color:var(--reset-hover-color); box-shadow:0px 0px 3px var(--reset-hover-shcolor); }

.statut { color:#aaa; font-size:10pt; font-weight:bold; margin:10px 0px; }
.statut a { color:#008; font-weight:bold; }
.statut a:hover { color:#fa8; }
.statut a img { vertical-align:middle; }

/*
//==============================================================================
// Liste
//==============================================================================
*/

.list, .list table { width:100%!important; }
.list h2 {font-family:Verdana,Arial,sans-serif;font-size:12pt;font-weight:bold;margin:5px 0px;}
.list table {border-collapse:collapse;font-family:Verdana,Arial,sans-serif;font-size:8pt;margin:10px 0px;}
.list table colgroup col {width:100px;text-align:left;}
.list table tr {vertical-align:middle;}
.list table tr > * {background-clip:padding-box;border:1px solid #aaa;}
.list table th {background-color:#ccc;padding:0px;text-align:center;}
.list table th sup {font-size:6pt;vertical-align:top;}
.list table td {padding:2px 4px;}
.list table tr.r0 {background-color:#fff;}
.list table tr.r1 {background-color:#eee;}
.list table th[hover=1]:hover {background-color:#fc6;}
.list table tr.suppr td {color:#aaa;}
.list table th a {display:flex;min-height:36px;line-height:12px;padding:0px 4px;color:#000;text-decoration:none;align-items:center;justify-content:center;}
.list table th a:hover {background-color:#bbb;color:#000;text-decoration:none;}
.list table th a img {width:7px;height:4px;margin:2px 0px 0px 5px;vertical-align:middle;}
.list table th.action {width:80px;color:#888;text-align:center;}
.list table td.action { text-align:center; white-space:nowrap; }
.list table td.action a { display:inline-block; }
.list table td.action .icon { margin:0px 2px; transition:all 0.2s ease; }
.list table td img {width:16px;height:16px;border:0px;margin:0px 3px;vertical-align:middle;}
.list table td .icon.up, .list table td .icon.down {color:#444;}
.list table td.create {padding:0px;text-align:left;}
.list table td.create a {display:block;padding:4px 4px;line-height:16px;background-color:var(--list-create-bgcolor);color:var(--list-create-color);font-weight:bold;text-align:left;text-decoration:none;}
.list table td.create a:hover {background-color:var(--list-create-hover-bgcolor);color:var(--list-create-hover-color);}
.list table td.create a .icon {margin-right:3px;}
.list table td.empty {padding:4px 4px;line-height:16px;cursor:default;}
.list table tr.input td {background-color:#ddf;padding:0px;}
.list table tr.input td input,
.list table tr.input td select {font-family:Verdana,Arial,sans-serif;font-size:8pt;vertical-align:middle;}
.list table tr.input td input {background-color:transparent;border:0px;}
.list table tr.input td select {background-color:#ddf;}
.list table input[type="checkbox"] { height:16px; accent-color:var(--submit-bgcolor); border:1px solid var(--field-bdcolor); margin:4px 2px; vertical-align:middle; }
.list table tr.total {background-color:#ccc;font-weight:bold;}
.list table tr.total td {cursor:default;}
p.rowcount {color:#888;font-style:italic;margin:5px 0px;}

.list table td.has-actions { position:relative; }
.list table td.has-actions .action { display:flex; flex-direction:column; align-items:center; justify-content:center; width:0px; overflow:hidden; position:absolute; top:0px; right:-1px; bottom:0px; z-index:2; margin:0; transition:all 0.2s linear; background-color:rgba(255,255,255,0.8); }
.list table td.has-actions:hover .actions { width:24px; margin-right:-24px; }
.list table td.has-actions .action a { display:block; margin:0; background-color:transparent; opacity:0.0; transition:opacity 0.3s ease 0.2s; }
.list table td.has-actions:hover .action a { opacity:1.0; }
.list table td.has-actions .action a.pdf { }
.list table td.has-actions .action a.email { }

.list table td.has-actions .action { flex-direction:row; justify-content:left; }
.list table td.has-actions:hover .action { width:48px; margin-right:-48px; }
.list table td.has-actions.a4:hover .action { width:96px; margin-right:-96px; }
.list table td.has-actions.a6:hover .action { width:144px; margin-right:-144px; }
.list table td.has-actions:hover .action > span { display:flex; flex-direction:row; justify-content:left; margin:0px 5px 0px 2px; }
.list table td.has-actions:hover .action > span > span { display:flex; flex-direction:row; justify-content:left; color:#666; font-size:8pt; font-weight:normal; }

/*
//==============================================================================
// Popup
//==============================================================================
*/

#popup { display:flex; opacity:0.0; visibility:hidden; position:fixed; left:0px; top:0px; right:0px; bottom:0px; z-index:9999; overflow:hidden; background-color:rgba(0,0,0,0.4); align-items:center; justify-content:center; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:opacity; transition:0.4s ease-in-out; }
#popup.opened { opacity:1.0; visibility:visible; transition:0.4s; }
#popup .popup-window { width:600px; max-width:90%; position:relative; background-color:#fff; border:1px solid #666; box-shadow:2px 2px 5px #333; }
#popup .popup-window a.close { width:24px; height:24px; line-height:24px; position:absolute; top:0px; right:0px; background-color:#c00; color:#fff; font-weight:bold; text-align:center; text-decoration:none; }
#popup .popup-window a.close:hover { background-color:#d00; }
#popup #popup-content { padding:15px 20px; }
#popup h3 { font-size:10pt; margin:0px 0px 15px 0px; }
#popup .form { width:100%; min-width:unset; max-width:unset; }
#popup .form form { margin:0px; }
#popup .form label { width:70px; margin-left:0; }
#popup .form input, #popup .form textarea { width:calc(100% - 80px); max-width:unset; }
#popup .form textarea.message { height:150px; }
#popup .form .pj a { color:var(--blue); text-decoration:none; }
#popup .form .pj a:hover { color:var(--blue-hover); }
#popup .form .pj img { margin-right:5px; vertical-align:middle; }
#popup .form button { width:auto; height:auto; line-height:25px; margin-top:var(--form-field-margin-top); margin-right:10px; padding:0px 20px; cursor:pointer; }
#popup .form button.btn-submit { background-color:var(--submit-bgcolor); color:var(--submit-color); border:1px solid var(--submit-bdcolor); }
#popup .form button.btn-submit:hover { background-color:var(--submit-hover-bgcolor); color:var(--submit-hover-color); border-color:var(--submit-hover-bdcolor); }

/*
//==============================================================================
// Icônes
//==============================================================================
*/

.action a       .icon { background-color:#ddd; color:var(--list-icon-color); }
.action a:hover .icon { color:var(--list-icon-hover-color); }
.action a       .icon.edit { background-color:var(--blue); color:#fff; }
.action a:hover .icon.edit { background-color:var(--blue-hover); color:#fff; }
.action a       .icon.delete { background-color:var(--red); color:#fff; }
.action a:hover .icon.delete { background-color:var(--red-hover); color:#fff; }
.action a       .icon.print { background-color:var(--blue); color:#fff; }
.action a:hover .icon.print { background-color:var(--blue-hover); color:#fff; }
.action a       .icon.cancel { background-color:var(--orange); color:#fff; }
.action a:hover .icon.cancel { background-color:var(--orange-hover); color:#fff; }
.action a       .icon.shipping { background-color:#4cc; color:#fff; }
.action a:hover .icon.shipping { background-color:#6ee; color:#fff; }
.action a       .icon.batchnum { background-color:#c4c; color:#fff; }
.action a:hover .icon.batchnum { background-color:#e6e; color:#fff; }
.action a       .icon.generate { background-color:var(--green); color:#fff; }
.action a:hover .icon.generate { background-color:var(--green-hover); color:#fff; }
.action a       .icon.tranfer-to { background-color:var(--green); color:#fff; }
.action a:hover .icon.tranfer-to { background-color:var(--green-hover); color:#fff; }
.action a       .icon.more { background-color:var(--blue); color:#fff; }
.action a:hover .icon.more { background-color:var(--blue-hover); color:#fff; }
.action a       .icon.email { background-color:var(--green); color:#fff; }
.action a:hover .icon.email { background-color:var(--green-hover); color:#fff; }
.action a       .icon.password { background-color:var(--orange); color:#fff; }
.action a:hover .icon.password { background-color:var(--orange-hover); color:#fff; }

/*
//==============================================================================
// Sheetnav
//==============================================================================
*/

#sheetnav { width:300px; max-width:100%; display:grid; grid-template-columns:50% 50%; grid-gap:20px; margin:10px 0px; }
#sheetnav > * { display:block; line-height:20px; font-size:10pt; font-weight:bold; }
#sheetnav a { color:var(--dark-blue); }
#sheetnav a:hover { color:var(--blue); }
#sheetnav span { color:#ccc; }
#sheetnav a:first-child { text-align:left; }
#sheetnav a:first-child span { float:left; margin-right:5px; }
#sheetnav a:last-child { text-align:right; }
#sheetnav a:last-child span { float:right; margin-left:5px; }

/*
//==============================================================================
// Action
//==============================================================================
*/

div.action a, div.action span, span.action a { display:block; font-size:10pt; font-weight:bold; line-height:20px; margin:2px 0px; }
div.action a, span.action a { color:var(--dark-blue); }
div.action a:hover, span.action a:hover { color:var(--blue); }
div.action span { color:#ccc; }
div.action img, span.action img { vertical-align:middle; }
div.action a .icon { vertical-align:sub!important; }

/*
//==============================================================================
// Form
//==============================================================================
*/

.form { min-width:800px; max-width:100%; }
.form form { margin:0px 0px 10px 0px; }
.form fieldset { border:1px solid #aaa; margin:0px; padding:5px 15px 15px 15px; }
.form fieldset legend { font-size:8pt; font-weight:bold; }
.form, .form input, .form select, .form textarea { font-family:MS Sans Serif,Arial,Verdana,sans-serif; font-size:10pt; }
.form label, .form input, .form select, .form u, .form .readonly, .form .alert, .form .btn, .form a.add_option, .form span.checkbox { display:inline-block; height:25px; line-height:25px; vertical-align:top; }
.form label { width:var(--form-label-width); margin-right:var(--form-label-margin-right); white-space:nowrap; overflow:hidden; text-overflow:":"; text-indent:1px; }
.form input { padding:0px 5px; }
.form select { padding:0px 5px; }
.form textarea { line-height:19px; padding:2px 5px; }
.form .readonly, .form .alert { height:auto; min-height:25px; line-height:19px; padding:3px 0px; }
.form input, .form textarea, .form select, .form .readonly, .form .alert { max-width:calc(100% - var(--form-label-width) - var(--form-label-margin-right)); }
.form .fullwidth { width:calc(100% - var(--form-label-width) - var(--form-label-margin-right)); }
.form .has-add-option, .form .has-btn { max-width:calc(100% - var(--form-label-width) - var(--form-label-margin-right) - 28px); }
.form input, .form textarea, .form select, .form button { background-color:#fff; border:1px solid var(--field-bdcolor); }
.form input:focus, .form textarea:focus, .form select:focus { border:1px solid var(--field-focus-bdcolor); box-shadow:0px 0px 3px var(--field-focus-shcolor); }
.form input[disabled=disabled], .form textarea[disabled=disabled], .form select[disabled=disabled] { background-color:#ddd; }
.form label, .form input, .form textarea, .form select, .form u, .form .readonly, .form .alert, .form .btn, .form a.add_option, .form span.checkbox { margin-top:var(--form-field-margin-top); }
.form label.inline { display:inline-block; float:none; width:auto; margin:var(--form-field-margin-top) 20px 0px 0px; white-space:normal; }
.form label.ancien { color:#aaa; }
.form span.checkbox { color:#666; font-size:8pt; font-style:normal; margin-left:30px; white-space:nowrap; }
.form span.checkbox input[type="checkbox"] { max-width:unset; height:unset; margin:0px; padding:0px; vertical-align:text-bottom; }
.form span.checkbox label { margin:0px; }
.form .alert { background-color:#fdd; border:1px dotted #c00; color:#c00; padding:4px 8px; }
.form u, .form .btn, .form a.add_option { margin-left:3px; text-decoration:none; }
.form .btn, .form a.add_option { width:25px; border:1px solid var(--field-bdcolor); padding:0px; text-align:center; }
.form .btn.search { margin-left:-5px; }
.form .btn .icon { display:block!important; margin:2px auto 0px auto; }
.form input.button, .form button.button { height:35px; line-height:normal; margin:10px 10px 0px 0px; padding:0px 20px; }
.form input[type="submit"], .form button[type="submit"] { background-color:var(--submit-bgcolor); color:var(--submit-color); border-color:var(--submit-bdcolor); }
.form input[type="submit"]:hover, .form button[type="submit"]:hover { background-color:var(--submit-hover-bgcolor); color:var(--submit-hover-color); border-color:var(--submit-hover-bdcolor); box-shadow:0px 0px 3px var(--submit-hover-shcolor); cursor:pointer; }
.form input[type="button"], .form .btn, .form a.add_option { background-color:var(--button-bgcolor); color:var(--button-color); border-color:var(--button-bdcolor); text-align:center; }
.form input[type="button"]:hover, .form .btn:hover, .form a.add_option:hover { background-color:var(--button-hover-bgcolor); color:var(--button-hover-color); border-color:var(--button-hover-bdcolor); box-shadow:0px 0px 3px var(--button-hover-shcolor); cursor:pointer; }
.form h2 { display:block; width:auto; margin:6px 0px 3px 0px; padding:5px 10px; clear:both; background-color:#eee; border-bottom:1px solid #ddd; font-size:8pt; font-weight:bold; }
.form img { vertical-align:middle; }
.form .historique { color:#aaa; font-family:Arial; font-size:7pt; margin:10px 0px 0px 0px; }
.form .historique a { display:block; line-height:14px; color:#aaa; margin-bottom:5px; text-decoration:none; }
.form .historique a .icon { width:14px!important; height:14px!important; line-height:14px!important; font-size:12px!important; vertical-align:bottom!important; background-color:#aaa; color:#fff; }
.form span.nbcar { color:#aaa; font-size:8pt; font-style:italic; padding-left:5px; }

/*
//==============================================================================
// Tabnav
//==============================================================================
*/

#tab { position:relative; width:100%!important; margin-bottom:15px; }
#tab::before { content:""; display:block; width:100%; height:26px; }
#tab #tabnav { position:absolute; left:1px; top:0px; right:1px; z-index:2; display:block; height:34px; font-size:0px; margin:0px; padding:0px; list-style-type:none; white-space:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:#ccc #ddd; }
#tab #tabnav li { display:inline-block; min-width:80px; margin:0px 0px 0px 5px; padding:0px; border:1px solid #aaa; border-bottom:0px; border-radius:5px 5px 0px 0px; text-align:center; vertical-align:top; }
#tab #tabnav li { height:26px; background-color:#eee; font-family:Arial,Verdana,sans-serif; font-size:11px; font-weight:bold; }
#tab #tabnav li.active { height:27px; background-color:#fff; position:relative; z-index:3; }
#tab #tabnav li span,
#tab #tabnav li a { display:block; width:100%!important; height:25px; line-height:25px; padding:0px 10px; background-color:transparent; border-radius:4px 4px 0px 0px; color:#999; transition:all 0.1s ease; }
#tab #tabnav li span { color:#000; }
#tab #tabnav li a:hover { background-color:#ddd; color:#666; }
#tab #tabnav li a.inactif { cursor:not-allowed; }
#tab #tabbody { position:relative; z-index:1; border:1px solid #aaa; padding:10px; }
#tab #tabbody > h2 { font-size:8pt; margin:0px 0px 10px 0px; }
#tab #tabbody fieldset { border:0px; margin:0px; padding:0px; }
#tab #tabbody fieldset legend { display:none; }
#tab #tabbody .form { width:100% !important; }
#tab #tabbody .form form { margin:0px; }

.success, .ok { color:#00cc00; font-weight:bold; }
.error, .ko { color:#cc0000; font-weight:bold; }

#message, #erreur { position:absolute; width:30vw; left:35vw; top:40vh; z-index:1000; font-size:10pt; }
#message > span, #erreur > span { position:absolute; right:0px; top:0px; width:24px; height:24px; line-height:23px; color:#fff; font-weight:bold; text-align:center; text-indent:2px; cursor:pointer; }
#message > div, #erreur > div { padding:4% 8%; text-align:center; }

#message { background-color:var(--message-bgcolor); border:2px solid var(--message-bdcolor); }
#message > span { background-color:var(--message-bdcolor); }
#erreur { background-color:var(--error-bgcolor); border:2px solid var(--error-bdcolor); }
#erreur > span { background-color:var(--error-bdcolor); }

#historique { width:500px; max-width:calc(100% - 40px); height:0px; position:absolute; overflow:hidden; transition:height 0.5s ease; }
#historique.visible { height:170px; }
#historique div { width:100%; max-height:150px; overflow-x:visible; overflow-y:auto; }
#historique table { width:100%; border-collapse:collapse; font-size:7pt; margin:0px; }
#historique table col.date { width:70px; text-align:center; }
#historique table col.heure { width:45px; text-align:center; }
#historique table col.utilisateur { width:205px; text-align:left; }
#historique table col.action { width:80px; text-align:center; }
#historique table td:first-child { text-align:center; }
#historique table td:first-child+td { text-align:center; }
#historique table td:first-child+td+td { text-align:left; }
#historique table td:first-child+td+td+td { text-align:center; }
#historique table tr > * { color:#666; padding:2px 5px; }
#historique table tr th { background-color:#ddd; }
#historique table tr.r0 td { background-color:#fff; }
#historique table tr.r1 td { background-color:#f8f8f8; }
#historique table tr:hover td { background-color:#eee; }
#historique div, #historique table tr > * { border:1px solid #ccc; }
#historique table tr:first-child > * { border-top:0px; }
#historique table tr:last-child > * { border-bottom:0px; }
#historique table tr > *:first-child { border-left:0px; }
#historique table tr > *:last-child { border-right:0px; }

#confirm,
#error { width:450px; max-width:90vw; background-color:#eee; border:1px solid #aaa; margin:20vh auto; }
#confirm .message,
#error .message { margin:20px; text-align:left; color:#222; font-weight:bold; }
#confirm .boutons,
#error .boutons { margin:20px; text-align:right; }
#confirm .boutons a,
#error .boutons a { width:80px; background-color:#e0e0e0; border:1px solid #aaa; color:#666; font-weight:bold; margin-left:10px; padding:5px 10px; text-align:center; }
#confirm .boutons a:hover,
#error .boutons a:hover { background-color:#fc6; }

#error { background-color:#fee; border:1px solid var(--red); color:var(--red); font-weight:bold; }
#boutons > div { display:grid; grid-template-columns:repeat(4,1fr); grid-gap:20px; margin-top:20px; }
#boutons > div > a { display:block; width:100%; min-width:160px; border:2px solid #000000; color:#000000; font-size:10pt; font-weight:bold; margin:0px; padding:15px 30px; text-align:center; cursor:pointer; }
#boutons > div > a > .icon { width:32px!important; height:32px!important; line-height:32px!important; font-size:28px!important; margin-right:10px; }
#boutons .valider { background-color:#0a0; border-color:#0a0; color:#fff; }
#boutons .actif .valider:hover { background-color:#6d6; color:#040; box-shadow:0px 0px 5px #6d6; }
#boutons .enregistrer { background-color:#06a; border-color:#06a; color:#fff; }
#boutons .actif .enregistrer:hover { background-color:#8ac; color:#024; box-shadow:0px 0px 5px #66d; }
#boutons .supprimer { background-color:#a00; border-color:#a00; color:#fff; }
#boutons .actif .supprimer:hover { background-color:#d66; color:#400; box-shadow:0px 0px 5px #d66; }
#boutons .quitter { background-color:#666; border-color:#666; color:#fff; }
#boutons .actif .quitter:hover { background-color:#999; color:#222; box-shadow:0px 0px 5px #ccc; }
#boutons .inactif > a { opacity:0.3; cursor:not-allowed; }
#boutons .valider_inactif, #boutons span.valider { cursor:not-allowed; background-color:#cdc; border-color:#8a8; color:#8a8; }
#boutons .enregistrer_inactif, #boutons span.enregistrer { cursor:not-allowed; background-color:#ccd; border-color:#88a; color:#88a; }
#boutons .supprimer_inactif, #boutons span.supprimer { cursor:not-allowed; background-color:#dcc; border-color:#a88; color:#a88; }
#boutons .quitter_inactif, #boutons span.quitter { cursor:not-allowed; background-color:#ddd; border-color:#999; color:#999; }
#boutons .cpv_promo_inactif, #boutons span.cpv_promo { cursor:not-allowed; background-color:#ddd; border-color:#888; color:#888; }

.CommMenu {width:310px;position:absolute;visibility:hidden;background-color:#eeeeee;border:2px outset;padding:1px;}
.CommMenu form {margin:0px;padding:0px;}
.CommMenu a {display:block;float:left;width:60px;height:60px;background-color:#eeeeee;background-repeat:no-repeat;background-position:center;border:1px solid #eeeeee;}
.CommMenu a:hover {background-color:#e4e7ef;border:1px solid #0a246a;}
.CommMenu a.imprimante {background-image:url(ico48-imprimante.png);}
.CommMenu a.email {background-image:url(ico48-email.png);}
.CommMenu a.telecopie {background-image:url(ico48-telecopie.png);}
.CommMenu a.courrier {background-image:url(ico48-courrier.png);}
.CommMenu a.pdf {background-image:url(ico48-pdf.png);}

.CommSend {width:650px;}
.CommSend label {width:65px;}

.form input[type="submit"], .form input[type="button"],
.form button[type="submit"], .form button[type="button"],
#boutons a, #boutons span, #boutons button,
#boutons input[type="submit"], #boutons input[type="button"] { transition:all 0.3s ease; }

/*
//==============================================================================
// Select2
//==============================================================================
*/

.select2-container
{
  width: 500px !important;
  margin-top: 3px !important;
}

.select2-container .select2-selection--single
{
  height: 25px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered
{
  padding-left: 5px !important;
}

.select2-container--default .select2-selection--single
{
  border: 1px solid #aaa !important;
  border-radius: 0px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow
{
  height: 22px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered
{
  color: #000 !important;
  font-family: MS Sans Serif,Arial,Verdana,sans-serif !important;
  font-size: 10pt !important;
  line-height: 22px !important;
}

.select2-dropdown
{
  margin-top: -3px;
}

.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field
{
  border-color: #aaa !important;
  border-radius: 0px !important;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple
{
  border-radius: 0px !important;
}

.select2-container--open .select2-dropdown--below
{
  background-color: #fafafa;
  border-radius: 0px !important;
}

.select2-results__option
{
  color: #000 !important;
  font-family: MS Sans Serif,Arial,Verdana,sans-serif !important;
  font-size: 10pt !important;
  padding: 2px 5px !important;
}

.select2-results__option.select2-results__message
{
  color: #666 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered i,
.select2-results__option i
{
  color: #888 !important;
  font-style: normal !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected]
{
  color: #fff !important;
}

.select2-container--default .select2-results__option--highlighted i,
.select2-container--default .select2-results__option--highlighted[aria-selected] i
{
  color: #ccc !important;
}

/*
//==============================================================================
// Screen
//==============================================================================
*/

@media screen
{
  #InfoEdition, #InfoImpression { display:none; visibility:hidden; }
}

/*
//==============================================================================
// Print
//==============================================================================
*/

@media print
{
  header, .hmenu, .vmenu, #foot, .filtres, .radgfx { display:none; position:relative; }
  #body { position:relative; background-image:none; }
  #body #page { float:none; padding:0px; }
  #body #page h1 { background:none; color:#000000; padding:0px; }
  #tabnav { display:none; }
  #tabbody { border:0px; padding:0px; }

  .list table { border-right:1px; }
  .list table th a, .list table th a:hover { color:#000000; }
  .list table th a img { display:none; visibility:hidden; }
  .list table td.create, .list table th.action, .list table td.action { display:none; visibility:hidden; }
  div.action { display:none; visibility:hidden; }
  .noprint { display:none; visibility:hidden; }

  #InfoEdition, #InfoImpression { display:block; visibility:visible; }
  #InfoEdition { width:4.0cm; float:right; text-align:right; font-style:italic; }
}

/*
//==============================================================================
// Smartphone
//==============================================================================
*/

@media (max-width: 992px)
{
  .icon { width:28px!important; height:28px!important; font-size:20px!important; line-height:28px!important; }

  body.login { height:70vh; margin:0px; background-color:#fff; }
  body.login #border { border:0px; }
  #login table { width:320px; max-width:80vw; }
  #login table th, #login table td { display:block; padding:5px 10px; }
  #login table th { text-align:left; }
  #login table tfoot tr th { display:none; }
  #login input.text { width:100%; height:30px; line-height:30px; font-size:14pt; }

  header { height:56px; position:fixed; z-index:101; background-size:auto 40px!important; }
  header > img { max-width:calc(100% - 80px); height:46px; }
  header #messages { display:none; }
  .hmenu { height:34px; position:fixed; top:56px; z-index:101; }
  .hmenu li, .hmenu::before, .hmenu::after { height:32px; line-height:32px; }
  .hmenu li > * { font-size:12pt; }
  #btnmenu, .burger { position:fixed; right:0px; top:0px; width:60px; height:56px; }
  #btnmenu { z-index:103; display:block; margin:0px; opacity:0.0; }
  .burger { z-index:102; display:flex; flex-direction:column; flex-wrap:wrap; justify-content:space-between; padding:16px 12px; overflow:hidden; background-color:var(--burger-bgcolor); }
  .burger > span { display:block; width:100%; height:4px; background-color:var(--burger-color); border-radius:2px; transition:all 0.2s ease; }
  .bgmenu { position:fixed; left:0px; right:0px; top:56px; bottom:0px; z-index:104; margin:0px; color:rgba(255,255,255,0.0); background-color:rgba(0,0,0,0.6); }
  #btnmenu ~ .bgmenu { display:none; }
  #btnmenu:checked ~ .bgmenu { display:block; }
  #btnmenu ~ .burger>span:nth-child(1) { transform-origin:top left; }
  #btnmenu ~ .burger>span:nth-child(3) { transform-origin:bottom left; }
  #btnmenu:checked ~ .burger>span:nth-child(1) { transform:translateX(7px) translateY(-2px) rotate(45deg); }
  #btnmenu:checked ~ .burger>span:nth-child(2) { transform:translateX(40px); opacity:0.0; }
  #btnmenu:checked ~ .burger>span:nth-child(3) { transform:translateX(7px) translateY(1px) rotate(-45deg); }
  .vmenu { position:fixed; right:0px; top:56px; z-index:105; display:block; width:60vw; height:calc(100vh - 56px); background-color:#fff; box-sizing:border-box; overflow-y:scroll; overflow-x:hidden; scrollbar-width:thin; box-shadow:-3px 3px 5px rgba(0,0,0,0.5); transition:all 0.3s ease; }
  .vmenu::-webkit-scrollbar { display:none; }
  .vmenu li { font-size:12pt; }
  .vmenu li.title, .vmenu li > * { height:36px; line-height:36px; }
  .vmenu li a span { top:8px; right:8px; }
  #btnmenu         ~ .vmenu { transform:translateX(110%); }
  #btnmenu:checked ~ .vmenu { transform:translateX(0px);  }
  #body #page { padding:100px 10px 10px 10px; }
  #body #page h1 { font-size:12pt; }

  #message, #erreur { width:80vw; left:10vw; }

  .filtres { max-height:15vh; overflow-x:hidden; overflow-y:auto; }
/*
  .filtres form > div, .filtres form #filtres_complementaires > div { display:block; }
*/
  .list { overflow-x:auto; overflow-y:visible; margin-top:15px; box-shadow:0px 0px 2px #000; }
  .list.no-scroll { overflow-x:visible; margin-top:0px; box-shadow:none; }
  .list table { min-width:150vw; margin:0px; }
  .list.no-scroll table { min-width:unset; }

  .form { min-width:unset; }
  .form fieldset { padding:5px 10px 10px 10px; }
  .form h2 { margin-top:30px; font-size:12pt; }
  .form label { display:block; width:100%!important; height:22px; line-height:22px; font-size:12pt; margin-top:10px; margin-right:0px; padding:0px; }
  .form label, .form u { color:#888; }
  .form label.inline { width:auto!important; color:#000; }
  .form label.empty { display:none; }
  .form input[type="text"], .form textarea, .form select, .form .readonly { width:100%!important; max-width:100%; }
  .form input, .form select, .form u, .form .readonly, .form .btn, .form a.add_option, .form label.inline { height:40px; line-height:40px; font-size:14pt; }
  .form textarea { font-size:14pt; line-height:22px; }
  .form input.button, .form button.button { height:45px; font-size:14pt; }
  .form .has-add-option, .form .has-btn { max-width:calc(100% - 47px)!important; }
  .form .has-unit { max-width:calc(100% - 50px)!important; }
  .form .btn, .form a.add_option { width:40px; }
  .form a.btn .icon { margin-top:5px; }
  .form span.checkbox { margin-left:0px; margin-top:2px; }
  .form span.checkbox, .form span.checkbox label { height:20px; line-height:20px; }
  .form span.checkbox input[type="checkbox"] { width:unset; max-width:unset; height:unset; line-height:unset; margin:2px 2px; padding:unset; }
  .form .btn2 { display:grid; grid-template-columns:60% 40%; margin-top:20px; }
  .form .btn2 > * { max-width:100%!important; margin-top:0px!important; }
  .form .btn2 *:last-child { margin-right:0px!important; }

  .select2-container .select2-selection--single,
  .select2-container--default .select2-selection--single .select2-selection__arrow { height:40px!important; }
  .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:40px!important; }
  .select2-container--default .select2-selection--single .select2-selection__rendered,
  .select2-container--default .select2-search--dropdown .select2-search__field { font-size:14pt!important; }

  #tab::before { height:32px; }
  #tab #tabnav { height:40px; }
  #tab #tabnav li { height:32px; font-size:14px; }
  #tab #tabnav li.active { height:33px; }

  #boutons > div { grid-template-columns:repeat(1,1fr); }
}

/*
//==============================================================================
// iPad
//==============================================================================
*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
{
  .hmenu { height:32px; }
  .hmenu li, .hmenu a, .hmenu::before, .hmenu::after { height:30px; line-height:30px; }
  .hmenu li a { font-size:12pt; padding:0px 15px; }
  .hmenu::before { width:20px; }
  .hmenu::after { width:10px; }

  .vmenu li.title { height:24px; line-height:24px; }
  .vmenu li > * { height:32px; line-height:32px; }
  .vmenu li.title, .vmenu li a { font-size:10pt; }

  #message, #erreur { width:60vw; left:20vw; }

  .filtres, .filtres * { font-size:10pt; }
  .filtres { line-height:25px; }
  .filtres form > div, .filtres form #filtres_complementaires > div { margin:4px 15px 4px 0px!important; }
  .filtres label, .filtres input, .filtres select, .filtres .multiselect, .filtres .filtres_complementaires { height:25px; line-height:25px; padding:0px 4px; }
  .filtres .multiselect { width:25px; }

  .list table th, .list table td { padding:4px 5px; }
  .list table tr td a .icon { width:24px!important; height:24px!important; font-size: 18px!important; line-height:24px!important; border-radius:2px; }
  .list table td input[type="checkbox"] { width:24px; height:24px; }

  .form input, .form select, .form textarea { font-size:11pt; }
  .form label, .form input, .form select, .form u, .form .readonly, .form .btn, .form a.add_option { height:32px; line-height:32px; }
  .form label, .form input, .form textarea, .form select, .form u, .form .readonly, .form .btn, .form a.add_option { margin:5px 0px 0px 0px; }
  .form input, .form select { padding:0px 5px; }
  .form textarea { padding:3px 5px; line-height:21px; }
  .form u, .form .btn, .form a.add_option { margin-left:3px; }
  .form .btn, .form a.add_option { width:32px; }
}


:root
{
  --vert: #9ac331;
  --vert50p: #cce198;
  --gris-fonce: #333;

  --burger-color: #fff;

  --hmenu-color-light:  var(--gris-fonce);
  --hmenu-color-light2: #111;
  --hmenu-color-dark:   #000;

  --vmenu-title-bgcolor: var(--vert);
  --vmenu-title-color:   #fff;
  --vmenu-ahover-bgcolor: var(--gris-fonce);
  --vmenu-ahover-color:   #fff;

  --h1-color: var(--vert);

  --list-create-bgcolor: var(--vert50p);
  --list-create-color:   var(--gris-fonce);
  --list-create-hover-bgcolor: var(--vert);
  --list-create-hover-color:   #fff;
  --list-tr-hover-bgcolor: var(--vert50p);
  --list-icon-color: var(--gris-fonce);
  --list-icon-hover-color: #000;

  --field-bdcolor: #aaa;
  --field-focus-bdcolor: var(--gris-fonce);
  --field-focus-shcolor: var(--gris-fonce);

  --submit-bgcolor: var(--vert);
  --submit-color:   var(--gris-fonce);
  --submit-bdcolor: var(--gris-fonce);
  --submit-hover-bgcolor: var(--gris-fonce);
  --submit-hover-color:   #fff;
  --submit-hover-bdcolor: #000;
}

body.login { background-color: #222; }
body.login #border { background-color: #000; border: 1px solid #444; }
body.login #border #logo { max-height: 80px; }
#login table { border-color: #222; }
#login table thead tr td { background-color: #000; color: #fff; }
#login input[type="text"], #login input[type="password"] { border-color: #222; }
#login input[type="text"]:focus, #login input[type="password"]:focus { border-color: var(--vert); }

header { background: #000; }
.hmenu a:hover { color: var(--vert); }

#body #page h1
{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='10'><rect fill='%239ac331' x='0' y='0' width='2' height='2'/><rect fill='%239ac331' x='4' y='4' width='2' height='2'/><rect fill='%239ac331' x='0' y='8' width='2' height='2'/></svg>");
}

/*
//==============================================================================
// Commandes/devis
// Liste : masquer les colonnes Client livré, BP, Utilisateur et ARC/PF
// Entête : masquer le relevé de compte
//==============================================================================
*/

.list table.commandes colgroup col.c4,
.list table.commandes th:first-child+th+th+th,
.list table.commandes td:first-child+td+td+td,
.list table.commandes colgroup col.c8,
.list table.commandes th:first-child+th+th+th+th+th+th+th,
.list table.commandes td:first-child+td+td+td+td+td+td+td,
.list table.commandes colgroup col.c10,
.list table.commandes th:first-child+th+th+th+th+th+th+th+th+th,
.list table.commandes td:first-child+td+td+td+td+td+td+td+td+td,
.list table.commandes colgroup col.c12,
.list table.commandes th:first-child+th+th+th+th+th+th+th+th+th+th,
.list table.commandes td:first-child+td+td+td+td+td+td+td+td+td+td,
.list table.commandes td.action a .icon.shipping,
#ReleveReCompte { display:none!important; }