<?php
/* Copyright (C) 2004-2013  Laurent Destailleur     <eldy@users.sourceforge.net>
 * Copyright (C) 2006       Rodolphe Quiedeville    <rodolphe@quiedeville.org>
 * Copyright (C) 2007-2012  Regis Houssin           <regis.houssin@capnetworks.com>
 * Copyright (C) 2011       Philippe Grand          <philippe.grand@atoo-net.com>
 * Copyright (C) 2012       Juanjo Menent           <jmenent@2byte.es>
 *
 * Copyright (C) 2013-2014  Nicolas Rivera          <theme@creajutsu.com>
 * Copyright (C) 2015       Serge Azout             <contact@msmobile.fr>
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/**
 *      \file       htdocs/theme/becreative/style.css.php
 *      \brief      File for CSS style sheet becreative
 */

//if (! defined('NOREQUIREUSER')) define('NOREQUIREUSER','1');  // Not disabled because need to load personalized language
//if (! defined('NOREQUIREDB'))   define('NOREQUIREDB','1');    // Not disabled to increase speed. Language code is found on url.
if ( ! defined('NOREQUIRESOC')) define('NOREQUIRESOC', '1');
//if (! defined('NOREQUIRETRAN')) define('NOREQUIRETRAN','1');  // Not disabled because need to do translations
if ( ! defined('NOCSRFCHECK')) define('NOCSRFCHECK', 1);
if ( ! defined('NOTOKENRENEWAL')) define('NOTOKENRENEWAL', 1);
if ( ! defined('NOLOGIN')) define('NOLOGIN', 1); // File must be accessed by logon page so without login
if ( ! defined('NOREQUIREMENU')) define('NOREQUIREMENU', 1);
if ( ! defined('NOREQUIREHTML')) define('NOREQUIREHTML', 1);
if ( ! defined('NOREQUIREAJAX')) define('NOREQUIREAJAX', '1');

session_cache_limiter(FALSE);

$res=@include("../../main.inc.php"); // For root directory
if ( ! $res && file_exists($_SERVER['DOCUMENT_ROOT']."/main.inc.php")) $res=@include($_SERVER['DOCUMENT_ROOT']."/main.inc.php"); // Use on dev env only
if ( ! $res) $res=@include("../../../main.inc.php"); // For "custom" directory

// Load user to have $user->conf loaded (not done into main because of NOLOGIN constant defined)
if (empty($user->id) && ! empty($_SESSION['dol_login'])) $user->fetch('', $_SESSION['dol_login']);


// Define css type
header('Content-type: text/css');
// Important: Following code is to avoid page request by browser and PHP CPU at
// each Dolibarr page access.
if (empty($dolibarr_nocache)) header('Cache-Control: max-age=3600, public, must-revalidate');
else header('Cache-Control: no-cache');

// On the fly GZIP compression for all pages (if browser support it). Must set the bit 3 of constant to 1.
if (isset($conf->global->MAIN_OPTIMIZE_SPEED) && ($conf->global->MAIN_OPTIMIZE_SPEED & 0x04)) {
    ob_start("ob_gzhandler");
}

if (GETPOST('lang')) $langs->setDefaultLang(GETPOST('lang')); // If language was forced on URL
if (GETPOST('theme')) $conf->theme=GETPOST('theme'); // If theme was forced on URL
$langs->load("main", 0, 1);
$right=($langs->trans("DIRECTION")=='rtl' ?'left':'right');
$left=($langs->trans("DIRECTION")=='rtl' ?'right':'left');

$path=''; // This value may be used in future for external module to overwrite theme
$theme='becreative'; // Value of theme

if ( ! empty($conf->global->MAIN_OVERWRITE_THEME_RES)) {
    $path='/' .$conf->global->MAIN_OVERWRITE_THEME_RES;
    $theme=$conf->global->MAIN_OVERWRITE_THEME_RES;
}



$dol_hide_topmenu=$conf->dol_hide_topmenu;
$dol_optimize_smallscreen=$conf->dol_optimize_smallscreen;
$dol_no_mouse_hover=$conf->dol_no_mouse_hover;
$dol_use_jmobile=$conf->dol_use_jmobile;


// Define reference colors
// Example: Light grey: $colred=235;$colgreen=235;$colblue=235;
// Example: Pink:       $colred=230;$colgreen=210;$colblue=230;
// Example: Green:      $colred=210;$colgreen=230;$colblue=210;
// Example: Ocean:      $colred=220;$colgreen=220;$colblue=240;
//$conf->global->THEME_ELDY_ENABLE_PERSONALIZED=0;
//$user->conf->THEME_ELDY_ENABLE_PERSONALIZED=0;
//var_dump($user->conf->THEME_ELDY_RGB);
$colred =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_RGB)?235:hexdec(substr($conf->global->THEME_ELDY_RGB, 0, 2))):(empty($user->conf->THEME_ELDY_RGB)?235:hexdec(substr($user->conf->THEME_ELDY_RGB, 0, 2)));
$colgreen=empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_RGB)?235:hexdec(substr($conf->global->THEME_ELDY_RGB, 2, 2))):(empty($user->conf->THEME_ELDY_RGB)?235:hexdec(substr($user->conf->THEME_ELDY_RGB, 2, 2)));
$colblue =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_RGB)?235:hexdec(substr($conf->global->THEME_ELDY_RGB, 4, 2))):(empty($user->conf->THEME_ELDY_RGB)?235:hexdec(substr($user->conf->THEME_ELDY_RGB, 4, 2)));

// Colors
$isred=max(0, (2*$colred-$colgreen-$colblue)/2); // 0 - 255
$isgreen=max(0, (2*$colgreen-$colred-$colblue)/2); // 0 - 255
$isblue=max(0, (2*$colblue-$colred-$colgreen)/2); // 0 - 255
$colorbackhmenu1=($colred-3).',' .($colgreen-3).',' .($colblue-3); // topmenu
$colorbackhmenu2=($colred+5).',' .($colgreen+5).',' .($colblue+5);
$colorbackvmenu1=($colred+15).',' .($colgreen+16).',' .($colblue+17); // vmenu
$colorbackvmenu1b=($colred+5).',' .($colgreen+6).',' .($colblue+7); // vmenu (not menu)
$colorbackvmenu2=($colred-15).',' .($colgreen-15).',' .($colblue-15);
$colorbacktitle1=($colred-5).',' .($colgreen-5).',' .($colblue-5); // title of array
$colorbacktitle2=($colred-15).',' .($colgreen-15).',' .($colblue-15);
$colorbacktabcard1=($colred+15).',' .($colgreen+16).',' .($colblue+17); // card
$colorbacktabcard2=($colred-15).',' .($colgreen-15).',' .($colblue-15);
$colorbacktabactive=($colred-15).',' .($colgreen-15).',' .($colblue-15);
$colorbacklineimpair1=(244+round($isred/3)).',' .(244+round($isgreen/3)).',' .(244+round($isblue/3)); // line impair
$colorbacklineimpair2=(250+round($isred/3)).',' .(250+round($isgreen/3)).',' .(250+round($isblue/3)); // line impair
$colorbacklineimpairhover=(230+round(($isred+$isgreen+$isblue)/9)).',' .(230+round(($isred+$isgreen+$isblue)/9)).',' .(230+round(($isred+$isgreen+$isblue)/9)); // line impair
$colorbacklinepair1='255,255,255'; // line pair
$colorbacklinepair2='255,255,255'; // line pair
$colorbacklinepairhover=(230+round(($isred+$isgreen+$isblue)/9)).',' .(230+round(($isred+$isgreen+$isblue)/9)).',' .(230+round(($isred+$isgreen+$isblue)/9));
//$colorbackbody='#ffffff url('.$img_head.') 0 0 no-repeat;';
$colorbackbody='#fcfcfc';
$colortext='40,40,40';
$colortexttopmenu='#ffffff';
$fontsize=empty($conf->dol_optimize_smallscreen)?'12':'14';
$fontsizesmaller=empty($conf->dol_optimize_smallscreen)?'11':'14';

// Eldy colors
if (empty($conf->global->THEME_ELDY_ENABLE_PERSONALIZED)) {
    $conf->global->THEME_ELDY_TOPMENU_BACK1='140,160,185'; // topmenu
    $conf->global->THEME_ELDY_TOPMENU_BACK2='236,236,236';
    $conf->global->THEME_ELDY_VERMENU_BACK1='255,255,255'; // vmenu
    $conf->global->THEME_ELDY_VERMENU_BACK1b='230,232,232'; // vmenu (not menu)
    $conf->global->THEME_ELDY_VERMENU_BACK2='240,240,240';
    $conf->global->THEME_ELDY_BACKTITLE1='140,160,185'; // title of arrays
    $conf->global->THEME_ELDY_BACKTITLE2='230,230,230';
    $conf->global->THEME_ELDY_BACKTABCARD2='210,210,210'; // card
    $conf->global->THEME_ELDY_BACKTABCARD1='234,234,234';
    $conf->global->THEME_ELDY_BACKTABACTIVE='234,234,234';
    //$conf->global->THEME_ELDY_BACKBODY='#ffffff url('.$img_head.') 0 0 no-repeat;';
    $conf->global->THEME_ELDY_BACKBODY='#fcfcfc;';
    $conf->global->THEME_ELDY_LINEIMPAIR1='242,242,242';
    $conf->global->THEME_ELDY_LINEIMPAIR2='248,248,248';
    $conf->global->THEME_ELDY_LINEIMPAIRHOVER='238,246,252';
    $conf->global->THEME_ELDY_LINEPAIR1='255,255,255';
    $conf->global->THEME_ELDY_LINEPAIR2='255,255,255';
    $conf->global->THEME_ELDY_LINEPAIRHOVER='238,246,252';
    $conf->global->THEME_ELDY_TEXT='50,50,130';

    if ($dol_use_jmobile) {
        $conf->global->THEME_ELDY_BACKTABCARD1='245,245,245'; // topmenu
        $conf->global->THEME_ELDY_BACKTABCARD2='245,245,245';
        $conf->global->THEME_ELDY_BACKTABACTIVE='245,245,245';
    }
}

$colorbackhmenu1 =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_TOPMENU_BACK1)?$colorbackhmenu1: $conf->global->THEME_ELDY_TOPMENU_BACK1) :(empty($user->conf->THEME_ELDY_TOPMENU_BACK1)?$colorbackhmenu1: $user->conf->THEME_ELDY_TOPMENU_BACK1);
$colorbackhmenu2 =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_TOPMENU_BACK2)?$colorbackhmenu2: $conf->global->THEME_ELDY_TOPMENU_BACK2) :(empty($user->conf->THEME_ELDY_TOPMENU_BACK2)?$colorbackhmenu2: $user->conf->THEME_ELDY_TOPMENU_BACK2);
$colorbackvmenu1 =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_VERMENU_BACK1)?$colorbackvmenu1: $conf->global->THEME_ELDY_VERMENU_BACK1) :(empty($user->conf->THEME_ELDY_VERMENU_BACK1)?$colorbackvmenu1: $user->conf->THEME_ELDY_VERMENU_BACK1);
$colorbackvmenu1b =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_VERMENU_BACK1b)?$colorbackvmenu1: $conf->global->THEME_ELDY_VERMENU_BACK1b) :(empty($user->conf->THEME_ELDY_VERMENU_BACK1b)?$colorbackvmenu1b: $user->conf->THEME_ELDY_VERMENU_BACK1b);
$colorbackvmenu2 =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_VERMENU_BACK2)?$colorbackvmenu2: $conf->global->THEME_ELDY_VERMENU_BACK2) :(empty($user->conf->THEME_ELDY_VERMENU_BACK2)?$colorbackvmenu2: $user->conf->THEME_ELDY_VERMENU_BACK2);
$colorbacktitle1 =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_BACKTITLE1) ?$colorbacktitle1: $conf->global->THEME_ELDY_BACKTITLE1) :(empty($user->conf->THEME_ELDY_BACKTITLE1)?$colorbacktitle1: $user->conf->THEME_ELDY_BACKTITLE1);
$colorbacktitle2 =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_BACKTITLE2) ?$colorbacktitle2: $conf->global->THEME_ELDY_BACKTITLE2) :(empty($user->conf->THEME_ELDY_BACKTITLE2)?$colorbacktitle2: $user->conf->THEME_ELDY_BACKTITLE2);
$colorbacktabcard1 =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_BACKTABCARD1) ?$colorbacktabcard1: $conf->global->THEME_ELDY_BACKTABCARD1) :(empty($user->conf->THEME_ELDY_BACKTABCARD1)?$colorbacktabcard1: $user->conf->THEME_ELDY_BACKTABCARD1);
$colorbacktabcard2 =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_BACKTABCARD2) ?$colorbacktabcard2: $conf->global->THEME_ELDY_BACKTABCARD2) :(empty($user->conf->THEME_ELDY_BACKTABCARD2)?$colorbacktabcard2: $user->conf->THEME_ELDY_BACKTABCARD2);
$colorbacktabactive =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_BACKTABACTIVE)?$colorbacktabactive: $conf->global->THEME_ELDY_BACKTABACTIVE):(empty($user->conf->THEME_ELDY_BACKTABACTIVE)?$colorbacktabactive: $user->conf->THEME_ELDY_BACKTABACTIVE);
$colorbacklineimpair1=empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_LINEIMPAIR1) ?$colorbacklineimpair1: $conf->global->THEME_ELDY_LINEIMPAIR1):(empty($user->conf->THEME_ELDY_LINEIMPAIR1)?$colorbacklineimpair1: $user->conf->THEME_ELDY_LINEIMPAIR1);
$colorbacklineimpair2=empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_LINEIMPAIR2) ?$colorbacklineimpair2: $conf->global->THEME_ELDY_LINEIMPAIR2):(empty($user->conf->THEME_ELDY_LINEIMPAIR2)?$colorbacklineimpair2: $user->conf->THEME_ELDY_LINEIMPAIR2);
$colorbacklineimpairhover=empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_LINEIMPAIRHOVER) ?$colorbacklineimpairhover: $conf->global->THEME_ELDY_LINEIMPAIRHOVER):(empty($user->conf->THEME_ELDY_LINEIMPAIRHOVER)?$colorbacklineimpairhover: $user->conf->THEME_ELDY_LINEIMPAIRHOVER);
$colorbacklinepair1 =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_LINEPAIR1) ?$colorbacklinepair1: $conf->global->THEME_ELDY_LINEPAIR1) :(empty($user->conf->THEME_ELDY_LINEPAIR1)?$colorbacklinepair1: $user->conf->THEME_ELDY_LINEPAIR1);
$colorbacklinepair2 =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_LINEPAIR2) ?$colorbacklinepair2: $conf->global->THEME_ELDY_LINEPAIR2) :(empty($user->conf->THEME_ELDY_LINEPAIR2)?$colorbacklinepair2: $user->conf->THEME_ELDY_LINEPAIR2);
$colorbacklinepairhover =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_LINEPAIRHOVER) ?$colorbacklinepairhover: $conf->global->THEME_ELDY_LINEPAIRHOVER) :(empty($user->conf->THEME_ELDY_LINEPAIRHOVER)?$colorbacklinepairhover: $user->conf->THEME_ELDY_LINEPAIRHOVER);
$colorbackbody =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_BACKBODY) ?$colorbackbody: $conf->global->THEME_ELDY_BACKBODY) :(empty($user->conf->THEME_ELDY_BACKBODY)?$colorbackbody: $user->conf->THEME_ELDY_BACKBODY);
$colortext =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_TEXT) ?$colortext: $conf->global->THEME_ELDY_TEXT) :(empty($user->conf->THEME_ELDY_TEXT)?$colortext: $user->conf->THEME_ELDY_TEXT);
$fontsize =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_FONT_SIZE1) ?$fontsize: $conf->global->THEME_ELDY_FONT_SIZE1) :(empty($user->conf->THEME_ELDY_FONT_SIZE1)?$fontsize: $user->conf->THEME_ELDY_FONT_SIZE1);
$fontsizesmaller =empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED)?(empty($conf->global->THEME_ELDY_FONT_SIZE2) ?$fontsize: $conf->global->THEME_ELDY_FONT_SIZE2) :(empty($user->conf->THEME_ELDY_FONT_SIZE2)?$fontsize: $user->conf->THEME_ELDY_FONT_SIZE2);

// No hover by default, we keep only if we set var THEME_ELDY_USE_HOVER
if (( ! empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED) && empty($user->conf->THEME_ELDY_USE_HOVER)) || (empty($user->conf->THEME_ELDY_ENABLE_PERSONALIZED) && empty($conf->global->THEME_ELDY_USE_HOVER))) {
    $colorbacklineimpairhover='';
    $colorbacklinepairhover='';
}

// Set text color to black or white
$tmppart=explode(',', $colorbackhmenu1);
$tmpval=( ! empty($tmppart[0]) ? (int) $tmppart[0] : 0)+( ! empty($tmppart[1]) ? (int) $tmppart[1] : 0)+( ! empty($tmppart[2]) ? (int) $tmppart[2] : 0);
if ($tmpval <=360) $colortextbackhmenu='FFF';
else $colortextbackhmenu='444';
$tmppart=explode(',', $colorbackvmenu1);
$tmpval=( ! empty($tmppart[0]) ? (int) $tmppart[0] : 0)+( ! empty($tmppart[1]) ? (int) $tmppart[1] : 0)+( ! empty($tmppart[2]) ? (int) $tmppart[2] : 0);

if ($tmpval <=360) {
    $colortextbackvmenu='FFF';
}

else {
    $colortextbackvmenu='444';
}

$tmppart=explode(',', $colorbacktitle1);
$tmpval=( ! empty($tmppart[0]) ? (int) $tmppart[0] : 0)+( ! empty($tmppart[1]) ? (int) $tmppart[1] : 0)+( ! empty($tmppart[2]) ? (int) $tmppart[2] : 0);

if ($tmpval <=360) {
    $colortexttitle='FFF';
    $colorshadowtitle='000';
}

else {
    $colortexttitle='444';
    $colorshadowtitle='FFF';
}

$tmppart=explode(',', $colorbacktabcard1);
$tmpval=( ! empty($tmppart[0]) ? (int) $tmppart[0] : 0)+( ! empty($tmppart[1]) ? (int) $tmppart[1] : 0)+( ! empty($tmppart[2]) ? (int) $tmppart[2] : 0);

if ($tmpval <=340) {
    $colortextbacktab='FFF';
}

else {
    $colortextbacktab='444';
}


$usecss3=true;
if ($conf->browser->name =='ie' && round($conf->browser->version, 2) < 10) $usecss3=false;
elseif ($conf->browser->name =='iceweasel') $usecss3=false;
elseif ($conf->browser->name =='epiphany') $usecss3=false;

foreach($conf->modules as $val) {
    $mainmenuused.=',' .(isset($moduletomainmenu[$val])?$moduletomainmenu[$val]:$val);
}

$mainmenuusedarray=array_unique(explode(',', $mainmenuused));

$generic=1;
$divalreadydefined=array('home', 'companies', 'products', 'commercial', 'accountancy', 'project', 'tools', 'members', 'shop', 'agenda', 'holiday', 'bookmark', 'cashdesk', 'ecm', 'geoipmaxmind', 'gravatar', 'clicktodial', 'paypal', 'webservices', 'becreative');

foreach($mainmenuusedarray as $val) {
    print "/* ------" . $val ."-------- */\n";
    if (empty($val) || in_array($val, $divalreadydefined)) continue;

    // Search img file in module dir
    $found=0;
    $url='';

    foreach($conf->file->dol_document_root as $dirroot) {
        if (file_exists($dirroot."/" .$val."/img/" .$val.".png")) {
            $url=dol_buildpath('/' .$val.'/img/' .$val.'.png', 1);
            $found=1;
            break;
        }
    }

    if ( !$found) {
        $url=dol_buildpath($path.'/theme/' .$theme.'/img/menus/generic' .$generic.".png", 1);
        $found=1;
        if ($generic < 4) $generic++;
        print "/* A mainmenu entry but img file " .$val.".png not found (check /" .$val."/img/" .$val.".png), so we use a generic one */\n";
    }

    if ($found) {
        print "div.mainmenu." .$val." {\n";
        print " background-image: url(" .$url.");\n";
        print " height:1em;\n";
        print "}\n";
    }
}

function col_brightness($hex, $steps ) {

    $steps =max(-255, min(255, $steps ));

    $hex =str_replace('#', '', $hex );

    if (strlen($hex )==3) {
        $hex =str_repeat(substr($hex, 0, 1), 2) . str_repeat(substr($hex, 1, 1), 2) . str_repeat(substr($hex, 2, 1), 2);
    }

    $color_parts =str_split($hex, 2);
    $return ='#';

    foreach ($color_parts as $color ) {
        $color =hexdec($color );
        $color =max(0, min(255, $color + $steps ));
        $return .=str_pad(dechex($color ), 2, '0', STR_PAD_LEFT);
    }


    return sanitize_hex_color($return );
}

function sanitize_hex_color($color ) {

    if (''===$color ) {
        return '';
    }

    // make sure the color starts with a hash
    $color ='#' . ltrim($color, '#');

    // 3 or 6 hex digits, or the empty string.
    if (preg_match('|^#([A-Fa-f0-9]{3}){1,2}$|', $color )) {
        return $color;
    }

    return null;

}


$col2 =$conf->global->BECREATIVE_COL2;
$col2_lighter =col_brightness($col2, 20);
$btn_txt ="#FFFFFF";

?>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    background-color: #f1f5f9;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #1e293b;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 13px !important;
}

img {
    max-width: 100%;
    height: auto;
}

/* Fix overlapping */
.box, .fiche {
    max-width: 100%;
    overflow-x: auto;
}

/* body .company_logo {
    background-color: <?=$conf->global->BECREATIVE_COL_LOGO_BCKGRD?>;
}
*/
body div.vmenu .blockvmenulogo {
    background-color: <?=$conf->global->BECREATIVE_COL_LOGO_BCKGRD?> !important;
}

#id-right {
    background-color: #f2f2f3 !important;
}

/* css-imane */
#id-container {
    background-color: #F6F8FA;
}

/* end */
}

body .fiche div.tabBar table {
    border: 1px solid transparent !important;
}

.fichecenter table.boxtable,
.fichecenter table.noborder {
    border-collapse: initial;
}

.opacitytransp {
    opacity: 0;
}

div.liste_titre {
    border-bottom: 1px solid #376c9b;
}

body th.liste_titre,
body tr.liste_titre,
body .liste_titre_filter,
body tr.liste_titre tr,
body tr.box_titre,
body div.liste_titre,
body tr.box_titre * {
    background-color: #e9e9e9;
    background: #e9e9e9 !important;
    color: #3b8cd2 !important;
}

body th.liste_titre *,
body tr.liste_titre *,
body tr.box_titre *,
body div.liste_titre * {
    color: #3b8cd2;
}

body div.liste_titre input {
    color: #080808;
}

.pictowarning,
.pictopreview {
    padding-left: 4px;
}

.paddingright {
    padding-right: 4px;
}

.icon-plus-filter,
.icon-plus-filter-cancel {
    margin: 0 1px;
}

body .select2-container .select2-choice>.select2-chosen,
body tr.liste_titre input,
textarea {
    color: #080808 !important;
}

body table tr th {
    font-weight: bold;
}

#id-left form[action*="list.php"] {
    border: none;
}

body div.tabBar table.noborder[summary=list_of_modules] tr.liste_titre td {
    padding: .3em .5em;
}

body div.tabBar table {
    border-left: none !important;
    border-right: none !important;
}

body .table-border,
body .table-border-col,
body .table-key-border-col,
body .table-val-border-col,
body div.border,
body div.border div div.tagtd,
body table.border,
body table.border td,
body table.dataTable {
    border: 1px solid #d6d6d6;
}

.boxstats {
    background: #ffffff;
}

body table tr.pair,
table.noborder tr.oddeven:nth-child(odd) {
    background-color: #e9e9e9;
}

.tabBar table tr:nth-child(odd) {
    background-color: #e9e9e9;
}

.tabBar table tr:nth-child(odd) tr {
    background-color: #e9e9e9;
}

table.boxtable tr:nth-child(odd):not(.box_titre) {
    background-color: #e9e9e9;
}

.minwidth100 {
    max-width: 100% !important;
}

.tabBar table tr:nth-child(even) {
    background-color: #ffffff;
}

.tabBar table tr:nth-child(even) tr {
    background-color: #ffffff;
}

body div.tabs .tabsElem a.tabactive {
    color: #ffffff;
    background: #245d8f;
}

#otherboxes tr td {
    padding-top: 8px;
}

body table tr.liste_titre td.liste_titre input[name*=button_search],
body table tr.liste_titre td.liste_titre input[name*=button_removefilter] {
    position: absolute;
    z-index: 2;
    width: 24px;
    margin: -3px 0 0 0px;
    left: 0;
    padding: 0;
    top: 0;
    background: none !important;

}

.div-table-responsive-no-min>table {
    width: 99.99% !important;
}

.div-table-responsive-no-min {
    overflow: auto;
}

div.fiche>form>div.div-table-responsive,
div.fiche>form>div.div-table-responsive-no-min {
    overflow-x: auto;
}

body .icon-plus-filter,
body .icon-plus-filter-cancel {
    color: <?=$conf->global->BECREATIVE_COL2 ?> !important;
}

.icon-plus-filter-cancel:before,
.icon-plus-filter:before {
    background: #fff;
    border-radius: 50%;
    float: left;
}

table tr.liste_titre td.liste_titre .icon-plus-filter,
table tr.liste_titre td.liste_titre .icon-plus-filter-cancel {
    font-size: 1.2em !important;
}

div#tmenu_tooltip .tmenudiv li {
    border: 1px solid #1e4b72;
    border-left: 1px solid #2f70a9;
    border-top: none;
}

div#tmenu_tooltip .tmenudiv li a.tmenuimage:hover,
div#tmenu_tooltip .tmenudiv li:hover {
    background-color: #608FBE;
}

div#tmenu_tooltip .tmenudiv li:hover {
    background-color: #608FBE;
}

div#tmenu_tooltip .tmenudiv {
    border-left: 1px solid transparent;
}

div#id-left div.vmenu {
    background-color: #f0f4f8;
    /* Light background for contrast */
    background: #f0f4f8;
    width: 100% !important;
    background-size: 150% 150%;
    height: 100%;
    padding-top: 10px;

    <?php if (GETPOST('optioncss', 'aZ09')=='print') {
        ?>display: none;
        <?php
    }

    else {
        ?>display: inline-table;
        <?php
    }

    ?>
}

div#id-left div.vmenu>* {
    background: transparent;
    background-color: transparent;
}

div#id-left {
    background-color: ##16c2c2;
}

div#id-left div.vmenu .company_logo,
div#id-left div.vmenu .blockvmenulogo {
    border-bottom: 1px solid transparent;
    padding: .5em;
}

div#id-left .vmenu>nav {
    border-top: 1px solid transparent;
    border-bottom: 1px solid #245d8f;
}

div#blockvmenusearch {
    /*padding: 7px 3px;*/
    border-top: 1px solid #efeaea;
    border-bottom: 1px solid #efeaea;
    display: grid;
}

div#blockvmenuhelp * {
    background-color: transparent;
}

div#blockvmenuhelp {
    background-color: #efeaea;
    border-top: 1px solid transparent;
}

div div#blockvmenubookmarks {
    background-color: transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #efeaea;
    padding: .5em;
    float: initial;
}

.select2-results {
    width: 100% !important;
}

.select2-container--open .select2-dropdown--below {
    min-width: 250px !important;
}

div div#blockvmenubookmarks table td:first-child {
    text-align: center;
}

div#blockvmenuhelp *,
div#blockvmenubookmarks * {
    color: #ffffff;
}

div#id-top {
    <?php if (GETPOST('optioncss', 'aZ09')=='print') {
        ?>display: none;
        <?php
    }

    ?>
}


div#tmenu_tooltip .tmenudiv li a.tmenuimage .mainmenuaspan,
div#id-left div.vmenu a.vsmenu,
div#id-left div.vmenu .mainmenuhspan,
div#id-top div.login_block * {}

div.info {
    color: #333;
}

div.blockvmenusearch input[type=text] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #1b5486;
    color: #09355b;
}

div.blockvmenusearch input[type=submit] {
    width: 18%;
}

@media screen and (max-width: 1280px) {
    .login_block .login {
        font-size: 1em !important;
    }
}














div#blockvmenubookmarks span.select2 * {
    color: #999;
}

div#blockvmenubookmarks span.select2.select2-container {
    width: 98px !important;
}

#filetreeauto ul.ecmjqft {
    position: relative;
}

#filetree ul.ecmjqft {
    position: relative;
}

body table.liste tr:nth-child(even) {
    background-color: #FFFFFF;
}

body table.liste tr:nth-child(odd) {
    background-color: #e9e9e9;
}

.attacharea input[type=file] {
    width: auto;
}

.fiche.modules div.divsearchfield {
    float: left;
    margin: 4px 12px 4px 2px;
    padding-left: 2px;
}

img.photouserphoto {
    height: 14px;
    width: auto;
}

div.login_block img.photouserphoto {
    height: 16px;
    width: auto;
}

.inline-block.login_block_elem.login_block_elem_name {
    float: right;
    font-size: 10px;
}

div.login_block .login_block_other {
    line-height: 13px;
}

.arearef .pagination li.pagination span {
    background-color: #3b8cd2;

}

dl.dropdown {
    margin: 0px;
    margin-left: 2px;
    margin-right: 2px;
    padding: 0px;
    vertical-align: middle;
    display: inline-block;
    position: initial;
    background: #09355b;
}

.dropdown dd,
.dropdown dt {
    margin: 0px;
    padding: 0px;
}

.dropdown ul {
    margin: -1px 0 0 0;
    text-align: left;
}

.dropdown dd {
    position: relative;
    z-index: 2;
}

.dropdown dt a {
    display: block;
    overflow: hidden;
    border: 0;
}

.dropdown dt a span,
.multiSel span {
    cursor: pointer;
    display: inline-block;
    padding: 0 3px 2px 0;
}

.dropdown dd ul {
    background-color: #245d8f;
    border: 1px solid #888;
    display: none;
    right: 0px;
    /* pop is align on right */
    padding: 2px 15px 2px 5px;
    position: absolute;
    top: 2px;
    list-style: none;
    max-height: 264px;
    overflow: auto;
}

.dropdown span.value {
    display: none;
}

.dropdown dd ul li {
    white-space: nowrap;
    font-weight: normal;
    padding: 2px;
}

.dropdown dd ul li input[type="checkbox"] {
    margin-right: 3px;
}

.dropdown dd ul li a,
.dropdown dd ul li span {
    padding: 3px;
    display: block;
}

.dropdown dd ul li span {
    color: #888;
}

.dropdown dd ul li a:hover {
    background-color: #fff;
}

dl.dropdown:after {
    content: none !important;
}

table.tagtable.liste[summary="list_of_modules"] {
    width: 100%;
}

.boxtable td.tdboxstats div.boxstatsindicator .boxstatsborder {
    display: inline-block;
    margin: .2em;
    border: 1px solid #608FBE;
    text-align: center;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    border-radius: 5px !important;
    padding: .5em;
}

.boxtable td.tdboxstats {
    background: #fff;
}

.boxtable div.boxstatsindicator {
    display: inline-block;
}

.boxclose.right.nowraponall {
    white-space: nowrap;
}

.boxclose.right.nowraponall .linkobject.boxfilter {
    margin-right: 10px;
}

.nographyet {
    content: url(<?php echo dol_buildpath($path.'/theme/becreative/img/nographyet.svg',1) ?>);
    display: inline-block;
    opacity: 0.1;
    background-repeat: no-repeat;
}

#id-right>.fiche>table.notopnoleftnoright .pagination .paginationafterarrows form[name="projectform"] select,
#id-right .notopnoleftnoright .pagination .paginationafterarrows form[name="projectform"] input {
    font-size: 14px;
}

#id-right>.fiche table.notopnoleftnoright div.pagination>ul {
    list-style: none;
}

.fiche>form>table.notopnoleftnoright {
    background: #f2f2f3;
}

.fiche>form>table.notopnoleftnoright[summary] {
    display: inline-block;
}

.fiche>form>table.notopnoleftnoright tr td:first-child {
    border: none;
    color: #608FBE;
    font-size: 1.6em;
    text-transform: none;
    white-space: nowrap;
}

.fiche>form>table.notopnoleftnoright {
    margin-bottom: 0 !important;
}

#id-right>.fiche>table.notopnoleftnoright tr td:first-child,
#id-right>.fiche>table.notopnoleftnoright tr td:first-child .titre {
    white-space: nowrap;
}

font.vsmenudisabled.vsmenudisabledmargin {
    color: #b9b9b9;
    font-size: 12px;
}



/* ============================================================================== */
/*  jFileTree                                                                     */
/* ============================================================================== */

.ecmfiletree {
    width: 99%;
    height: 99%;
    background: #FFF;
    padding-left: 2px;
    font-weight: normal;
}

.fileview {
    width: 99%;
    height: 99%;
    background: #FFF;
    padding-left: 2px;
    padding-top: 4px;
    font-weight: normal;
}

div.filedirelem {
    position: relative;
    display: block;
    text-decoration: none;
}

ul.filedirelem {
    padding: 2px;
    margin: 0 5px 5px 5px;
}

ul.filedirelem li {
    list-style: none;
    padding: 2px;
    margin: 0 10px 20px 10px;
    width: 160px;
    height: 120px;
    text-align: center;
    display: block;
    float: left;
    border: solid 1px #DDDDDD;
}

ul.ecmjqft {
    line-height: 16px;
    padding: 0px;
    margin: 0px;
    font-weight: normal;
}

ul.ecmjqft li {
    list-style: none;
    padding: 0px;
    padding-left: 20px;
    margin: 0px;
    white-space: nowrap;
    display: block;
}

ul.ecmjqft a {
    line-height: 24px;
    vertical-align: middle;
    color: #333;
    padding: 0px 0px;
    font-weight: normal;
    display: inline-block !important;
}

ul.ecmjqft a:active {
    font-weight: bold !important;
}

ul.ecmjqft a:hover {
    text-decoration: underline;
}

div.ecmjqft {
    vertical-align: middle;
    display: inline-block !important;
    text-align: right;
    float: right;
    right: 4px;
    clear: both;
}

div#ecm-layout-west {
    width: 380px;
    vertical-align: top;
}

div#ecm-layout-center {
    width: calc(100% - 390px);
    vertical-align: top;
    float: right;
}

.ecmjqft LI.directory {
    font-weight: normal;
    background: url(<?php echo dol_buildpath($path.'/theme/common/treemenu/folder2.png',1) ?>) left top no-repeat;
}

.ecmjqft LI.expanded {
    font-weight: normal;
    background: url(<?php echo dol_buildpath($path.'/theme/common/treemenu/folder2-expanded.png) left top no-repeat;

    ',1) ?> }
 .ecmjqft LI.wait {
        font-weight: normal;
        background: url(<?php echo dol_buildpath($path.'/theme/eldy/img/working.gif) left top no-repeat;
        ',1) ?> }


        #id-left #inner-content-div .select2-container--default .select2-selection--single {
            border: 1px solid #245d8f;
            background-color: #fff;
        }

        .clearboth {
            clear: both;
        }

        img.userphotosmall {
            border-radius: 6px;
            width: 12px;
            height: 12px;
            background-size: contain;
            vertical-align: middle;
            background-color: #FFF;
        }


        input[type="button"].button,
        a.butActionRefused {
            background-color: #dd4b39 !important;
            border-color: #d43f3a !important;
            color: #fff !important;
        }

        input[type="button"].button:hover,
        a.butActionRefused:hover {
            background-color: #ef2431 !important;
            border-color: #ac2925 !important;
            box-shadow: none;
        }

        input[type="button"].button:focus,
        a.butActionRefused:focus {
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .5) !important;
        }


        input[type="submit"].button,
        a.butAction {
            background-color: #09355b !important;
            border-color: #09355b !important;
            color: #fff !important;
        }

        input[type="submit"].button:hover,
        a.butAction:hover {
            background-color: #3b8cd2 !important;
            border-color: #3b8cd2 !important;
            box-shadow: none !important;
        }

        input[type="submit"].button:focus,
        a.butAction:focus {
            box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, .5) !important;
        }


        input[type="submit"].button,
        input[type="button"].button,
        a.butAction,
        a.butActionRefused {
            margin-bottom: 0;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            border: 1px solid transparent;
            border-radius: .25rem;
        }






























        #id-left div.vmenu a.vsmenu:hover {
            background-color: transparent !important;
        }

        #id-left div.vmenu ul.vmenu li>div:hover {
            background-color: #608FBE !important;
        }

        #id-left div.vmenu a[data-actif="nc_actif_element"]:hover {
            /* background-color: #37b8c4 !important; */
        }

        a[data-actif="nc_actif_element"] {
            /* background: #36C6D3; */
            color: #fff !important;
        }

        div[data-actif="nc_actif_element"] {
            background: #125188;
        }

        div[data-actif="nc_actif_element"] a {
            color: #fff !important;
        }

        body #id-left div.vmenu li.menu_titre>div {
            padding: 3px 1.6em;
        }

        body #id-left div.vmenu li.menu_titre>div.menu_contenu2 {
            padding: 3px 2.3em;
        }

        body #id-left div.vmenu li.menu_titre>div.menu_contenu3 {
            padding: 3px 3em;
        }

        #tmenu_tooltip .tmenudiv,
        #tmenu_tooltip .tmenu {
            float: left;
        }

        div#id-top div.login_block .login_block_other {
            font-size: 12px;
        }

        div#id-top div.login_block .login_block_user>div {
            float: right;
        }

        body #id-left div.vmenu li.menu_titre a * {
            line-height: 18px;
        }

        body #id-left div.vmenu li.menu_titre>a {
            padding: 7px 0 7px 2px;
        }

        body select option:disabled {
            color: #e3e3e3 !important;
        }

        div div#blockvmenubookmarks select {
            width: 100%;
        }

        body #id-left div.vmenu li.menu_titre a {
            display: inline-block;
            width: 100%;
        }

        body #id-left div.vmenu li.menu_titre {
            padding: 0;
        }

        body #tmenu_tooltip .tmenudiv li a.tmenuimage .mainmenu {
            color: #f7f7f7;
        }

        #id-left a:active,
        #id-left a:link,
        #id-left a:visited {
            color: #16c1c3;
        }

        body #tmenu_tooltip .tmenudiv li.tmenusel {
            background-color: #125188;
        }

        body #tmenu_tooltip .tmenudiv li.tmenusel a.tmenuimage .mainmenuaspan {
            color: #ffffff;
        }

        body #tmenu_tooltip .tmenudiv li.tmenusel div.mainmenu {
            color: #ffffff;
        }

        #id-left div.vmenu {
            width: 100px !important;
        }

        .fixed-menu #id-right {
            width: 100%;
        }

        #tiptip_holder #tiptip_content,
        .conteneur,
        body.fixed-menu #id-right {
            font-size: 1.2rem;
        }

        div.icon-engin_chantier:before {
            content: "\e603";
        }

        div.mainvmenu.icon-cmpProd:before {
            content: "\e60e";
        }

        div.mainvmenu.icon-arvAchat:before {
            content: "\e62e";
        }

        .icon-transferorders:before {
            content: '\e615';
        }

        div.mainvmenu.icon-lrh:before {
            content: "\e611";
        }

        div.mainvmenu.icon-resource:before {
            content: "\e61a";
        }

        .minwidth100 {
            min-width: 100px;
        }

        .minwidth200 {
            min-width: 200px;
        }

        .minwidth300 {
            min-width: 300px;
        }

        .maxwidth100 {
            max-width: 100px;
        }

        .maxwidth200 {
            max-width: 200px;
        }

        .maxwidth300 {
            max-width: 300px;
        }

        input[type=submit],
        button,
        .button,
        .butAction,
        .butActionDelete,
        .butActionRefused,
        div.tabs .tabsElem a {
            /* background: <?=$col2?>;
    color: <?=$btn_txt?>;*/

            background: #09355b !important;
            color: #FFFFFF !important;
        }

        input[type=submit]:link,
        button:link,
        .button:link,
        .butAction:link,
        .butActionDelete:link,
        .butActionRefused:link,
        div.tabs .tabsElem a:link {
            background: <?=$col2?>;
            color: <?=$btn_txt?>;
            font-size: 12px;
        }

        input[type=submit]:visited,
        button:visited,
        .button:visited,
        .butAction:visited,
        .butActionDelete:visited,
        .butActionRefused:visited,
        div.tabs .tabsElem a:visited {
            background: <?=$col2?>;
            color: <?=$btn_txt?>;
        }

        input[type=submit]:hover,
        button:hover,
        .button:hover,
        .butAction:hover,
        .butActionDelete:hover,
        .butActionRefused:hover,
        div.tabs .tabsElem a:hover {
            background: <?=$col2_lighter?>;
            color: <?=$btn_txt?>;


        }

        input[type=submit]:active,
        button:active,
        .button:active,
        .butAction:active,
        .butActionDelete:active,
        .butActionRefused:active,
        div.tabs .tabsElem a:active {
            /* background: <?=$col2?>;
            color: <?=$btn_txt?>; */
            background: #09355b !important;
            color: #FFFFFF !important;
        }


        .icon-plus-filter,
        .icon-plus-filter-cancel,
        .dpInvisibleButtons {
            background: transparent;
            color: <?=$col2?>;
        }

        .icon-plus-filter:link,
        .icon-plus-filter-cancel:link,
        .dpInvisibleButtons:link {
            background: transparent;
            color: <?=$col2?>;
        }

        .icon-plus-filter:visited,
        .icon-plus-filter-cancel:visited,
        .dpInvisibleButtons:visited {
            background: transparent;
            color: <?=$col2?>;
        }

        .icon-plus-filter:hover,
        .icon-plus-filter-cancel:hover,
        .dpInvisibleButtons:hover {
            background: transparent;
            color: <?=$col2_lighter?>;
        }

        .icon-plus-filter:active,
        .icon-plus-filter-cancel:active,
        .dpInvisibleButtons:active {
            background: transparent;
            color: <?=$col2_lighter?>;
        }

        @media only screen and (max-width: 64em),
        only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-device-width: 1280px),
        not all,
        only screen and (max-device-width: 1280px) and (min-resolution: 120dpi) {
            #tmenu_tooltip {
                font-size: <?=$conf->global->BECREATIVE_S_HEADER_FONT_SIZE?>;
            }

            #id-left {
                font-size: <?=$conf->global->BECREATIVE_S_VMENU_FONT_SIZE?>;
            }
        }















































        /* NEW */

        .centpercent {
            width: 100%;
        }

        .quatrevingtpercent,
        .inputsearch {
            width: 80%;
        }

        .soixantepercent {
            width: 60%;
        }

        textarea.centpercent {
            width: 96%;
        }

        #upbuttons-nav ul li {
            padding: .5em 1em;
            white-space: nowrap;
        }

        /* For table into table into card */
        div.ficheaddleft tr.liste_titre:first-child td table.nobordernopadding td {
            padding: 0 0 0 0;
        }

        div.nopadding {
            padding: 0 !important;
        }

        .containercenter {
            display: table;
            margin: 0px auto;
        }

        #pictotitle {
            margin-right: 8px;
            margin-bottom: 4px;
        }

        .pictoobjectwidth {
            width: 14px;
        }

        .pictosubstatus {
            padding-left: 2px;
            padding-right: 2px;
        }

        .pictostatus {
            width: 15px;
            vertical-align: middle;
            margin-top: -3px
        }

        .pictowarning,
        .pictopreview {
            padding-left: 3px;
        }

        .pictoedit,
        .pictowarning,
        .pictodelete {
            vertical-align: text-bottom;
        }

        .fiche img.pictoedit {
            opacity: 0.7;
        }

        .colorthumb {
            padding-left: 1px !important;
            padding-right: 1px;
            padding-top: 1px;
            padding-bottom: 1px;
            width: 44px;
            text-align: center;
        }

        div.attacharea {
            padding-top: 18px;
            padding-bottom: 10px;
        }

        div.attachareaformuserfileecm {
            padding-top: 0;
            padding-bottom: 0;
        }

        div.arearef {
            padding-top: 2px;
            margin-bottom: 10px;
            padding-bottom: 7px;
        }

        div.arearefnobottom {
            padding-top: 2px;
            padding-bottom: 4px;
        }

        div.heightref {
            min-height: 80px;
        }

        div.divphotoref {
            padding-right: 20px;
        }

        div.paginationref {
            padding-bottom: 10px;
        }

        div.statusref {
            float: right;
            padding-left: 12px;
            margin-top: 8px;
            margin-bottom: 10px;
            clear: both;
        }

        div.statusref img {
            padding-left: 8px;
            padding-right: 9px;
            vertical-align: text-bottom;
        }

        div.statusrefbis {
            padding-left: 8px;
            padding-right: 9px;
            vertical-align: text-bottom;
        }

        img.photoref,
        div.photoref {
            border: 1px solid #CCC;
            -webkit-box-shadow: 2px 2px 4px #ccc;
            box-shadow: 2px 2px 4px #ccc;
            padding: 4px;
            height: 80px;
            width: 80px;
            object-fit: contain;
        }

        img.fitcontain {
            object-fit: contain;
        }

        div.photoref {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        img.photorefnoborder {
            padding: 2px;
            height: 48px;
            width: 48px;
            object-fit: contain;
            border: 1px solid #AAA;
            border-radius: 100px;
        }

        .underrefbanner {}

        .underbanner {
            border-bottom: 2px solid rgb(120, 120, 120);
        }

        .tdhrthin {
            margin: 0;
            padding-bottom: 0 !important;
        }

        /* END For table into table into card */
        body.onlinepaymentbody div.fiche {
            /* For online payment page */
            margin: 20px !important;
        }

        div.fiche>table:first-child {
            margin-bottom: 15px !important;
        }

        div.fichecenter {
            /* margin-top: 10px; */
            width: 100%;
            clear: both;
            /* This is to have div fichecenter that are true rectangles */
        }

        div.fichecenterbis {
            margin-top: 8px;
        }

        div.fichethirdleft {
            float: left;
            width: 50%;
        }

        div.fichetwothirdright {
            float: right;
            width: 50%;
        }

        div.fichehalfleft {
            float: left;
            width: 50%;
        }

        div.fichehalfright {
            float: right;
            width: 50%;
        }

        div.ficheaddleft {
            padding-left: 16px;
        }

        div.firstcolumn div.box {
            padding-right: 10px;
        }

        div.secondcolumn div.box {
            padding-left: 10px;
        }

        .butActionNew,
        .butActionNewRefused,
        .butActionNew:link,
        .butActionNew:visited,
        .butActionNew:hover,
        .butActionNew:active {
            text-decoration: none;
            text-transform: uppercase;
            font-weight: normal;

            margin: 0em 0.3em 0 0.3em !important;
            padding: 0.2em 0.7em 0.3em;
            font-family: roboto, arial, tahoma, verdana, helvetica;
            display: inline-block;
            /* text-align: center; New button are on right of screen */
            cursor: pointer;
            /*color: #fff !important;
    background: rgb(60,70,100);
    border: 1px solid rgb(60,70,100);*/
            border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);

            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;

            padding-top: 0 !important;
        }

        a.butActionNew>span.fa-plus-circle,
        a.butActionNew>span.fa-plus-circle:hover {
            padding-left: 6px;
            font-size: 1.5em;
            border: none;
            box-shadow: none;
            webkit-box-shadow: none;
        }

        a.butActionNewRefused>span.fa-plus-circle,
        a.butActionNewRefused>span.fa-plus-circle:hover {
            padding-left: 6px;
            font-size: 1.5em;
            border: none;
            box-shadow: none;
            webkit-box-shadow: none;
        }

        .butActionNew *,
        .butActionNewRefused *,
        .butActionNew *:link,
        .butActionNew *:visited,
        .butActionNew *:hover,
        .butActionNew *:active {
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            padding-top: 0 !important;
        }

        .span-icon-multicompany {
            width: auto !important;
        }

        div#s2id_receivercc,
        div#s2id_receiver {
            min-width: 400px;
            width: auto;
        }

        div.tabsAction.upbuttonsdiv {
            position: initial !important;
            bottom: initial !important;
            right: initial !important;
            background-color: initial !important;
            padding: .5em 0 !important;
            border: initial !important;
            border-radius: initial !important;
            margin: initial !important;
            opacity: initial !important;
            display: block !important;
        }

        div.tabsAction.upbuttonsdiv .divButAction a {
            padding: .5em 1em !important;
        }

        .tabBar .tagtd tr:nth-child(odd),
        body tr td tr:nth-child(odd) {
            background-color: transparent !important;
        }

        #blockvmenusearch .select2.select2-container {
            width: 100% !important;
        }

        body #id-left div.vmenu li.menu_titre>div>span.vsmenu {
            color: #ededed;
        }

        .login_table .span-icon-multicompany {
            width: auto !important;
        }

        .dashboardlinelatecoin {
            float: right;
            position: relative;
            text-align: right;
            top: -24px;
            padding: 1px 2px 1px 2px;
            border-radius: .25em;
            background-color: #9f4705;
            padding: 0px 5px 0px 5px;
            /* top: -26px; */
        }

        span.dashboardlineko {
            color: #FFF;
            font-size: 80%;
        }

        .boxstats130 {
            width: 158px;
            height: 48px;
            padding: 3px;
        }

        .boxstatscontent {
            padding: 3px;
        }

        .boxstats,
        .boxstats130,
        .boxstatscontent {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .boxstats {
            padding: 3px;
            width: 103px;
        }

        body #id-left div.vmenu li.menu_titre>div.menu_top {
            padding: 0 !important;
        }

        body #id-left div.vmenu li.menu_titre>div.menu_end {
            padding: 0 !important;
        }

        .tmenuend {
            display: none;
        }

        select.flat.selectlimit {
            max-width: 62px;
        }

        .selectlimit,
        .marginrightonly {
            margin-right: 10px !important;
        }

        .marginleftonly {
            margin-left: 10px !important;
        }

        .nomarginleft {
            margin-left: 0px !important;
        }

        .selectlimit,
        .selectlimit:focus {
            border-left: none !important;
            border-top: none !important;
            border-right: none !important;
            outline: none;
        }

        .strikefordisabled {
            text-decoration: line-through;
        }

        .widthdate {
            width: 130px;
        }

        .cursorpointer {
            cursor: pointer;
        }

        .cursormove {
            cursor: move;
        }


        /*---------------------------------------------*/
        .cke_reset {
            min-width: 250px;
        }

        .flexcontainer {
            display: inline-flex;
            flex-flow: row wrap;
            justify-content: flex-start;
        }

        .thumbstat {
            flex: 1 1 116px;
        }

        .thumbstat150 {
            flex: 1 1 170px;
        }

        .thumbstat,
        .thumbstat150 {
            /* flex-grow: 1; */
            /* flex-shrink: 1; */
            /* flex-basis: 140px; */
            display: inline;
            width: 100%;
            justify-content: flex-start;
            align-self: flex-start;
        }

        /*
 *  Boxes
 */

        .ficheaddleft div.boxstats {
            border: none;
        }

        .boxstatsborder {
            border: 1px solid #CCC !important;
        }

        .boxstats,
        .boxstats130 {
            display: inline-block;
            margin: 3px;
            border: 1px solid #CCC;
            text-align: center;
            border-radius: 2px;
        }

        .boxstats,
        .boxstats130,
        .boxstatscontent {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .boxstats {
            padding: 3px;
            width: 103px;
        }

        .boxstats130 {
            width: 158px;
            height: 48px;
            padding: 3px
        }

        .boxstatscontent {
            padding: 3px;
        }

        div.fichecenter {
            display: block !important;
        }

        #upbuttons-nav ul {
            top: -36px !important;
        }

        #upbuttons-nav ul li>a,
        #upbuttons-nav ul li>span {
            box-shadow: 2px 2px 4px #565656;
        }

        /*---------------------------------------------*/

        /*----------------------08/09-----------------------*/
        .select2-container *,
        .select2-results * {
            font-size: <?=$conf->global->BECREATIVE_S_VMENU_FONT_SIZE?>;
        }

        /*--------------------END 08/09---------------------*/

        /*----------------------08/09 - 2-----------------------*/
        .butActionRefused {
            cursor: not-allowed !important;
            color: #999 !important;
            border: 1px solid #ccc;
            -moz-box-sizing: border-box;
            background: #7d7d7d21 !important;
        }

        /*--------------------END 08/09 - 2---------------------*/
        /*----------------------17/10-----------------------*/
        body .jnotify-container {
            top: 0px !important;
            right: 0 !important;
        }

        /*--------------------END 17/10---------------------*/

        /*----------------------30/11-----------------------*/
        .select2-container-multi-dolibarr .select2-choices-dolibarr .select2-search-choice-dolibarr {
            padding: 2px 5px 1px 5px;
            margin: 0 0 2px 3px;
            position: relative;
            line-height: 13px;
            color: #333;
            cursor: default;
            border: 1px solid #aaaaaa;
            border-radius: 3px;
            -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
            background-clip: padding-box;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-color: #e4e4e4;
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
            background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
            background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
            background-image: linear-gradient(to bottom, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
        }

        .select2-container-multi-dolibarr .select2-choices-dolibarr .select2-search-choice-dolibarr a {
            font-weight: normal;
        }

        .select2-container-multi-dolibarr .select2-choices-dolibarr li {
            float: left;
            list-style: none;
        }

        .select2-container-multi-dolibarr .select2-choices-dolibarr {
            height: auto !important;
            height: 1%;
            margin: 0;
            padding: 0 5px 0 0;
            position: relative;
            cursor: text;
            overflow: hidden;
        }

        /*----------------------END 30/11-----------------------*/
        /*----------------------31/01/2019-----------------------*/
        div.mainmenu.tmenudisabled {
            display: none;
        }

        @media only screen and (max-width: 64em),
        only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-device-width: 1280px),
        not all,
        only screen and (max-device-width: 1280px) and (min-resolution: 120dpi) {
            #tmenu_tooltip .tmenudiv li {
                width: auto !important;
            }

        }

        /* --------------- edit by imane 31/07/2019 ------------------*/

        .login_block_other img.img_right {
            height: 20px;
            margin: 12px 0;
            cursor: pointer;

        }

        .login_block_other img.img_right:hover {}

        @media only screen and (max-width: 1290px) {
            .child_div {
                width: 50% !important;
            }
        }


        @media only screen and (min-width: 1080px) {
            .logo {
                width: 25%;
            }

        }


        @media only screen and (max-width: 750px) {
            .logo {
                width: 150px !important;
            }

            .login_block_other>.inline-block {
                display: none;
            }

            img.img_right {
                display: block !important;
            }

        }

        @media only screen and (min-width: 751px) {
            .logo {
                width: 12%;
            }

            .login_block_other {
                display: block !important;
            }

            .login_block_other>.inline-block {
                display: inline-block !important;
            }

            .inline-block {
                display: inline-block !important;
            }

            img.img_right {
                display: none;
            }

        }



        @media only screen and (max-width: 692px) {
            .child_div {
                width: 100% !important;
            }

            .child_div>div {
                margin-left: 15px;
                /*margin-left: 2.5%*/
                ;
            }

        }


        form[action*="list.php"] {
            float: left;
            width: 100%;
        }

        li.li-visited {
            background-color: #a9a9a936;
            margin-right: 0px !important;
            margin-left: 0px !important;
            border-radius: 3px;
            border-right: 5px solid #ef2a37;
        }

        /*----------------------END 31/07/2019-----------------------*/



        /*----------------------END 31/01-----------------------*/





        /*----------------------    12/02/19-----------------------*/
        .flexcontainer {
            display: inline-flex;
            flex-flow: row wrap;
            justify-content: flex-start;
        }

        .thumbstat {
            min-width: 150px;
        }

        .thumbstat150 {
            min-width: 168px;
            max-width: 169px;
        }

        .thumbstat,
        .thumbstat150 {
            flex-grow: 1;
            flex-shrink: 0;
        }

        .butAction,
        .butActionDelete,
        .butActionRefused,
        .button,
        button,
        input[type=image],
        input[type=submit],
        select {
            font-size: 12px;
        }

        /*----------------------END 31/02/19-----------------------*/





        /*---------------------- 23/04/19 -----------------------*/
        dl.dropdown * {
            color: #FFFFFF !important;
        }

        table .dropdown dt a span,
        .multiSel span {
            padding: 0px 3px 2px 3px;
        }

        .dropdown dd ul li a:hover,
        .dropdown dt a {
            color: #000 !important;
        }

        .jnotify-container {
            font-size: 11px;
        }

        .jnotify-container .jnotify-notification a.jnotify-close {
            font-size: initial;
        }

        /*---------------------- END 23/04/19 -----------------------*/


        /* css-imane */

        /*---------------------- 16/07/19 -----------------------*/
        div.tmenudiv ul.tmenu {
            max-width: 200px !important;
        }

        /* Updated Sidebar Card Style */
        /* Updated Sidebar Card Style with High Specificity */
        #id-left .vmenu li.tmenu,
        #id-left .vmenu li.tmenusel {
            padding: 8px 12px;
            margin: 6px 12px !important;
            text-align: left !important;
            list-style: none;
            background: #fff;
            border-radius: 8px !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
            border: 1px solid #e1e4e8;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            position: relative;
        }

        /* Active Item Style */
        #id-left .vmenu li.tmenusel {
            background-color: #e3f2fd !important;
            border: 1px solid #90caf9 !important;
            color: #1565c0 !important;
        }

        /* Hover Effect */
        #id-left .vmenu li.tmenu:hover,
        #id-left .vmenu li.tmenusel:hover {
            background-color: #f1f8e9 !important;
            border-color: #2196f3 !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
        }

        /* Icon Container Styling */
        #id-left .vmenu li.tmenu a.tmenuimage,
        #id-left .vmenu li.tmenusel a.tmenuimage {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px !important;
            height: 32px !important;
            background-color: #eee;
            border-radius: 6px !important;
            margin-right: 12px;
            flex-shrink: 0;
            color: #545766;
            /* Default icon color if not white */
        }

        #id-left .vmenu li.tmenusel a.tmenuimage {
            background-color: #545766 !important;
            /* Fallback active bg */
        }

        /* Force icons to be white */
        #id-left .vmenu li.tmenu a.tmenuimage .fa,
        #id-left .vmenu li.tmenusel a.tmenuimage .fa {
            color: #fff !important;
            font-size: 16px;
        }

        /* Image icons: invert to white */
        #id-left .vmenu li.tmenu a.tmenuimage img,
        #id-left .vmenu li.tmenusel a.tmenuimage img {
            filter: brightness(0) invert(1);
            width: 20px;
            height: auto;
        }

        /* Chevron for Dropdown */
        #id-left .vmenu li.tmenu::after,
        #id-left .vmenu li.tmenusel::after {
            content: '\f078';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            right: 15px;
            font-size: 10px;
            color: #aaa;
            transition: transform 0.2s;
        }

        #id-left .vmenu li.tmenusel::after {
            transform: rotate(180deg);
            color: #1565c0;
        }

        /* --- Specific Module Colors (Nth-Child) --- */
        /* 1. Dashboard */
        #id-left .vmenu li.tmenu:nth-child(1) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(1) a.tmenuimage {
            background-color: #448aff !important;
        }

        /* 2. Point of Sale */
        #id-left .vmenu li.tmenu:nth-child(2) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(2) a.tmenuimage {
            background-color: #2ecc71 !important;
        }

        /* 3. Shift */
        #id-left .vmenu li.tmenu:nth-child(3) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(3) a.tmenuimage {
            background-color: #5e35b1 !important;
        }

        /* 4. Customers */
        #id-left .vmenu li.tmenu:nth-child(4) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(4) a.tmenuimage {
            background-color: #2980b9 !important;
        }

        /* 5. Suppliers */
        #id-left .vmenu li.tmenu:nth-child(5) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(5) a.tmenuimage {
            background-color: #e74c3c !important;
        }

        /* 6. Financial */
        #id-left .vmenu li.tmenu:nth-child(6) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(6) a.tmenuimage {
            background-color: #3f51b5 !important;
        }

        /* 7. Bank */
        #id-left .vmenu li.tmenu:nth-child(7) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(7) a.tmenuimage {
            background-color: #f39c12 !important;
        }

        /* 8. Products */
        #id-left .vmenu li.tmenu:nth-child(8) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(8) a.tmenuimage {
            background-color: #e91e63 !important;
        }

        /* 9. Inventory */
        #id-left .vmenu li.tmenu:nth-child(9) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(9) a.tmenuimage {
            background-color: #00bcd4 !important;
        }

        /* 10. Sales */
        #id-left .vmenu li.tmenu:nth-child(10) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(10) a.tmenuimage {
            background-color: #9b59b6 !important;
        }

        /* 11. Purchase */
        #id-left .vmenu li.tmenu:nth-child(11) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(11) a.tmenuimage {
            background-color: #e67e22 !important;
        }

        /* 12. Accounting */
        #id-left .vmenu li.tmenu:nth-child(12) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(12) a.tmenuimage {
            background-color: #0288d1 !important;
        }

        /* 13. Tax */
        #id-left .vmenu li.tmenu:nth-child(13) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(13) a.tmenuimage {
            background-color: #d32f2f !important;
        }

        /* 14. Expenses */
        #id-left .vmenu li.tmenu:nth-child(14) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(14) a.tmenuimage {
            background-color: #fbc02d !important;
        }

        /* 15. Reports */
        #id-left .vmenu li.tmenu:nth-child(15) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(15) a.tmenuimage {
            background-color: #8e24aa !important;
        }

        /* 16. Payroll */
        #id-left .vmenu li.tmenu:nth-child(16) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(16) a.tmenuimage {
            background-color: #27ae60 !important;
        }

        /* 17. Sales Reports */
        #id-left .vmenu li.tmenu:nth-child(17) a.tmenuimage,
        #id-left .vmenu li.tmenusel:nth-child(17) a.tmenuimage {
            background-color: #1976d2 !important;
        }

        /* 18. Admin Tools (Grey) */
        #id-left .vmenu li.tmenu:last-child a.tmenuimage,
        #id-left .vmenu li.tmenusel:last-child a.tmenuimage {
            background-color: #757575 !important;
        }

        /* Admin separator */
        #id-left .vmenu li.tmenu:last-child {
            margin-top: 20px !important;
            border-top: 1px solid #ddd;
        }

        .top-menu-10 {
            background: #09355b;
            height: 44px;

            #inner-content-sousmenu .slimScrollDiv {
                min-height: 0px !important;
            }

            /* --- menu-top icon_right --- */

            span.fa-print {
                padding: 5px;
                background: #FFA87D !important;
                border-radius: .65rem !important;
            }

            span.valignmiddle.atoplogin:hover {

                bottom: 5px;
            }

            span.fa-question-circle {
                padding: 5px;
                background: #22d3d6;
                border-radius: .65rem !important;
            }

            span.fa-sign-out-alt {
                padding: 8px 6px;
                background: #FF7588;
                border-radius: .65rem !important;
            }

            span.fa-sign-out {
                padding: 5px;
                background: #FF7588;
                border-radius: .65rem !important;
            }

            div.login_block {
                display: -webkit-box !important;
            }

            a.vsmenu {
                font-size: 11px !important;
            }

            /* --- logo --- */
            .logo {
                height: 44px;
                width: 12%;
                background: #9ea2a514;
                padding: 4px;
                background: white;
                border-bottom: 3px solid #09355b;
                border-top: 3px solid #09355b;
                border-top-right-radius: 33px;
                border-bottom-right-radius: 33px;
                text-align: center;
                float: left;
            }

            .logo img.mycompany {
                height: auto;
                width: auto;
                padding-right: 20px;
                /*float: left;*/
                max-height: 30px;
            }

            /* */
            .notopnoleftnoright td:first-child {
                width: 1.2em;
                padding-right: .5em;
                padding: 0px;
            }

            .fiche>table.notopnoleftnoright:nth-child(2) tr,
            .fiche>table[summary] tr {
                border: none;
                color: #608FBE;
                font-size: 1.6em;
                text-transform: none;
                font-weight: 700;
                white-space: nowrap;
            }

            .child_div a:hover {
                color: #09355b !important
            }

            body.body.bodylogin {
                background-image: url(<?php echo dol_buildpath($path.'/becreative/img/background_login_1.jpg',1) ?>) !important;
                background-repeat: round;
            }


            /* ---- css input --- */

            .dropdown {
                border: none !important;
            }

            li.tmenu a.tmenuimage {
                color: #545766 !important;
            }

            li.tmenusel a.tmenuimage {
                color: #545766 !important;
            }

            img.icon-menu {
                margin-right: 10px;
            }

            img.icon-menu:hover {
                cursor: pointer;
                background-color: #e9e9e95e;
                border-radius: 2px;
            }

            img.icon-menu {
                height: 34px;
                width: 30px;
                margin-left: 5px;
            }


            .dropdown:after {
                content: none !important;
            }

            .mainmenuaspan {
                font-size: 11px;
            }

            a.vsmenu {
                font-size: 11px;
            }

            a.dropdown-toggle.login-dropdown-a {
                color: white !important;
            }

            /*---------------------- END 16/07/19 -----------------------*/
            /* Login */

            .bodylogin {
                background: #f0f0f0;
                display: table;
                position: absolute;
                height: 100%;
                width: 100%;
                font-size: 1em;
            }

            .login_center {
                display: table-cell;
                vertical-align: middle;
            }

            .login_vertical_align {
                padding: 10px;
                padding-bottom: 80px;
            }

            form#login {
                padding-bottom: 30px;
                font-size: 14px;
                vertical-align: middle;
            }

            .login_table_title {
                max-width: 530px;
                color: #eee !important;
                padding-bottom: 20px;
                text-shadow: 1px 1px #444;
            }

            .login_table label {
                text-shadow: 1px 1px 1px #FFF;
            }

            .login_table {
                margin: 0px auto;
                /* Center */
                padding-left: 6px;
                padding-right: 6px;
                padding-top: 16px;
                padding-bottom: 12px;
                max-width: 560px;
                background-color: #FFFFFF;
                -webkit-box-shadow: 0 2px 23px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(60, 60, 60, 0.15);
                box-shadow: 0 2px 23px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(60, 60, 60, 0.15);

                border-radius: 5px;
                /*border-top:solid 1px rgba(180,180,180,.4);
    border-left:solid 1px rgba(180,180,180,.4);
    border-right:solid 1px rgba(180,180,180,.4);
    border-bottom:solid 1px rgba(180,180,180,.4);*/
            }

            .login_table input#username,
            .login_table input#password,
            .login_table input#securitycode {
                border: none;
                border-bottom: solid 1px rgba(180, 180, 180, .4);
                padding: 5px;
                margin-left: 5px;
                margin-top: 5px;
                margin-bottom: 5px;
            }

            .login_table input#username:focus,
            .login_table input#password:focus,
            .login_table input#securitycode:focus {
                outline: none !important;
            }

            .login_table .trinputlogin {
                font-size: 1.2em;
                margin: 8px;
            }

            .login_table .tdinputlogin {
                background-color: transparent;
                /* border: 2px solid #ccc; */
                min-width: 220px;
                border-radius: 2px;
            }

            .login_table .tdinputlogin .fa {
                padding-left: 10px;
                width: 14px;
                font-size: 10px;
            }

            .login_table .tdinputlogin input#username,
            .login_table .tdinputlogin input#password {
                font-size: 1em;
            }

            .login_table .tdinputlogin input#securitycode {
                font-size: 1em;
            }

            .login_main_home {
                word-break: break-word;
            }

            .login_main_message {
                text-align: center;
                max-width: 570px;
                margin-bottom: 22px;
            }

            .login_main_message .error {
                /* border: 1px solid #caa; */
                padding: 10px;
            }

            div#login_left,
            div#login_right {
                display: inline-block !important;
                min-width: 245px;
                padding-top: 10px;
                padding-left: 16px;
                padding-right: 16px;
                text-align: center;
                vertical-align: middle;
            }

            div#login_right select#entity {
                margin-top: 10px;
            }

            table.login_table tr td table.none tr td {
                padding: 2px;
            }

            table.login_table_securitycode {
                border-spacing: 0px;
            }

            table.login_table_securitycode tr td {
                padding-left: 0px;
                padding-right: 4px;
            }

            #securitycode {
                min-width: 60px;
            }

            #img_securitycode {
                border: 1px solid #DDDDDD;
            }

            #img_logo,
            .img_logo {
                max-width: 170px;
                max-height: 90px;
            }

            div.backgroundsemitransparent {
                background: rgba(255, 255, 255, 0.6);
                padding-left: 10px;
                padding-right: 10px;
            }

            div.login_block {
                position: absolute;
                text-align: right;
                right: 0;
                top: 0;
                line-height: 10px;
            }

            div.login_block a {
                color: #FFFFFF;
                display: inline-block;
            }

            div.login_block table {
                display: inline;
            }

            div.login {
                white-space: nowrap;
                font-weight: bold;
                float: right;
            }

            div.login a {
                color: #000000;
            }

            div.login a:hover {
                color: #000000;
                text-decoration: underline;
            }

            .login_block_elem a span.atoplogin,
            .login_block_elem span.atoplogin {
                vertical-align: middle;
            }

            div.login_block_user {
                display: inline-block;
            }

            div.login_block_other {
                display: inline-block;
                clear: both;
            }

            div.login_block_other {
                padding-top: 0;
                text-align: right;
                margin-right: 8px;
            }

            .login_block_elem {
                float: right;
                vertical-align: top;
                padding: 0px 3px 0px 4px !important;
                line-height: 44px;
                height: 44px;
            }

            .atoplogin,
            .atoplogin:hover {
                color: #FFFFFF !important;
            }

            .login_block_getinfo {
                text-align: center;
            }

            .login_block_getinfo div.login_block_user {
                display: block;
            }

            .login_block_getinfo .atoplogin,
            .login_block_getinfo .atoplogin:hover {
                color: #333 !important;
                font-weight: normal !important;
            }

            .alogin,
            .alogin:hover {
                font-weight: normal !important;
                padding-top: 2px;
            }

            .alogin:hover,
            .atoplogin:hover {
                text-decoration: underline !important;
            }

            span.fa.atoplogin,
            span.fa.atoplogin:hover {
                font-size: 16px;
                text-decoration: none !important;
            }

            .atoplogin #dropdown-icon-down,
            .atoplogin #dropdown-icon-up {
                font-size: 0.9em;
            }

            span#dropdown-icon-up {
                display: none;
            }

            img.login,
            img.printer,
            img.entity {
                /* padding: 0px 0px 0px 4px; */
                /* margin: 0px 0px 0px 8px; */
                text-decoration: none;
                color: white;
                font-weight: bold;
            }

            .userimg.atoplogin img.userphoto,
            .userimgatoplogin img.userphoto {
                /* size for user photo in login bar */
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background-size: contain;
                background-size: contain;
            }

            img.userphoto {
                /* size for user photo in lists */
                border-radius: 9px;
                width: 18px;
                height: 18px;
                background-size: contain;
                vertical-align: middle;
            }

            img.userphotosmall {
                /* size for user photo in lists */
                border-radius: 6px;
                width: 12px;
                height: 12px;
                background-size: contain;
                vertical-align: middle;
                background-color: #FFF;
            }

            .span-icon-user {
                background-image: url(/nc-sites/newthem_10/htdocs/theme/eldy/img/object_user.png);
                background-repeat: no-repeat;
            }

            .span-icon-password {
                background-image: url(/nc-sites/newthem_10/htdocs/theme/eldy/img/lock.png);
                background-repeat: no-repeat;
            }



            /*
 * Dropdown
 */

            .open>.dropdown-menu {
                /*, #topmenu-login-dropdown:hover .dropdown-menu*/
                display: block;
            }

            .dropdown-menu {
                box-shadow: none;
                border-color: #eee;
            }

            .dropdown-menu {
                position: absolute;
                top: 100%;
                left: 0;
                z-index: 1000;
                display: none;
                float: left;
                min-width: 160px;
                padding: 5px 0;
                margin: 2px 0 0;
                font-size: 14px;
                text-align: left;
                list-style: none;
                background-color: #fff;
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                border: 1px solid #ccc;
                border: 1px solid rgba(0, 0, 0, .15);
                border-radius: 4px;
                -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
                box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
            }



            /*
* MENU Dropdown
*/
            .login_block.usedropdown .logout-btn {
                display: none;
            }

            .tmenu .open.dropdown,
            .login_block .open.dropdown,
            .tmenu .open.dropdown,
            .login_block .dropdown:hover {
                background: rgba(0, 0, 0, 0.1);
            }

            .tmenu .dropdown-menu,
            .login_block .dropdown-menu {
                position: absolute;
                right: 0;
                <?php echo $left;
                ?>: auto;
                line-height: 1.3em;
            }

            .tmenu .dropdown-menu,
            .login_block .dropdown-menu .user-body {
                border-bottom-right-radius: 4px;
                border-bottom-left-radius: 4px;
            }

            .user-body {
                color: #333;
            }

            .side-nav-vert .user-menu .dropdown-menu {
                border-top-right-radius: 0;
                border-top-left-radius: 0;
                padding: 1px 0 0 0;
                border-top-width: 0;
                width: 300px;
            }

            .side-nav-vert .user-menu .dropdown-menu {
                margin-top: 0;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }

            .side-nav-vert .user-menu .dropdown-menu>.user-header {
                height: 175px;
                padding: 10px;
                text-align: center;
                white-space: normal;
            }

            .dropdown-user-image {
                border-radius: 50%;
                vertical-align: middle;
                z-index: 5;
                height: 90px !important;
                width: 90px !important;
                border: 3px solid;
                border-color: transparent;
                border-color: rgba(255, 255, 255, 0.2);
                max-width: 100%;
                max-height: 100%;
            }

            .dropdown-menu>.user-header {
                background: rgb(9, 53, 91);
            }

            .dropdown-menu>.user-footer {
                background-color: #f9f9f9;
                padding: 10px;
            }

            .user-footer:after {
                clear: both;
            }

            .dropdown-menu>.user-body {
                padding: 15px;
                border-bottom: 1px solid #f4f4f4;
                border-top: 1px solid #dddddd;
                white-space: normal;
            }

            #topmenu-login-dropdown {
                padding: 0 5px 0 5px;
            }

            #topmenu-login-dropdown a:hover {
                text-decoration: none;
            }

            #topmenuloginmoreinfo-btn {
                display: block;
                text-aling: right;
                color: #666;
                cursor: pointer;
            }

            #topmenuloginmoreinfo {
                display: none;
                clear: both;
                font-size: 0.95em;
            }

            .button-top-menu-dropdown {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
            }

            .user-footer .button-top-menu-dropdown {
                color: #666666;
                border-radius: 0;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
                border-width: 1px;
                background-color: #f4f4f4;
                border-color: #ddd;
            }




            /* * * * * * * * * * * * * * * * * * * 26/09/2019 * * * */

            .center {
                text-align: center;
                margin: 0px auto;
            }

            .notopnoleftnoright td.titre_right .select2-container {
                max-width: 200px;
            }

            #id-container.becreativeenuvisible #id-right {
                width: calc(100vw - 110px);
            }

            #id-container.becreativeenuvisible .side-nav {
                display: block;
            }

            #id-container.becreativeenuhidden #id-right {
                width: 100%;
            }

            #id-container.becreativeenuhidden .side-nav {
                display: none;
            }

            span.becreativeiconopenmenu {
                display: none;
            }

            div.sous-menu ul.vmenu {
                padding-bottom: 20px;
            }

            @media only screen and (max-width: 64em),
            only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-device-width: 1280px),
            not all,
            only screen and (max-device-width: 1280px) and (min-resolution: 120dpi) {
                #id-container.becreativeenuvisible #id-right {
                    width: 100%;
                }

                .fixed-menu #id-left {
                    box-shadow: 3px 0 6px -2px #bfbaba;
                    transform: initial !important;
                }

                #id-container .side-nav {
                    display: none;
                }

                #id-left .vmenu li.tmenu,
                #id-left .vmenu li.tmenusel {
                    position: relative;
                }

                span.becreativeiconopenmenu {
                    display: block;
                    position: absolute;
                    left: 0px;
                    top: 0;
                    padding: 2px 5px;
                    font-size: 10px;
                    cursor: pointer;
                    color: #9e9e9e;
                }

                span.becreativeiconopenmenu:hover {
                    background: #545766;
                    color: #fff;
                }
            }

            .widthpictotitle {
                width: 32px;
            }

            /* * * * * * * * * * * * * * * * * * * END 26/09/2019 * */












            /* <style type="text/css" > */
            /* * * * * * * * * * * * * * * * * * * Version 11 of Dolibarr * */
            body div.tabs .tabsElem a.tabactive {
                color: #ffffff !important;
                background: #245d8f !important;
            }

            .badge {
                display: inline-block;
                padding: .1em .35em;
                font-size: 80%;
                font-weight: 700 !important;
                line-height: 1;
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline;
                border-radius: .25rem;
                transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                border-width: 2px;
                border-style: solid;
                border-color: rgba(255, 255, 255, 0);
                box-sizing: border-box;
            }

            .badge-secondary,
            .tabs .badge {
                color: #fff !important;
                background-color: #3b8cd2;
            }

            .badge-pill,
            .tabs .badge {
                padding-right: .5em;
                padding-left: .5em;
                border-radius: 0.25rem;
            }

            .marginleftonlyshort {
                margin-left: 4px !important;
            }

            input:disabled,
            textarea:disabled,
            select[disabled='disabled'] {
                background: #eee;
            }

            div#moretabsList,
            div#moretabsListaction {
                z-index: 5;
            }

            .h1 .small,
            .h1 small,
            .h2 .small,
            .h2 small,
            .h3 .small,
            .h3 small,
            h1 .small,
            h1 small,
            h2 .small,
            h2 small,
            h3 .small,
            h3 small {
                font-size: 65%;
            }

            .h1 .small,
            .h1 small,
            .h2 .small,
            .h2 small,
            .h3 .small,
            .h3 small,
            .h4 .small,
            .h4 small,
            .h5 .small,
            .h5 small,
            .h6 .small,
            .h6 small,
            h1 .small,
            h1 small,
            h2 .small,
            h2 small,
            h3 .small,
            h3 small,
            h4 .small,
            h4 small,
            h5 .small,
            h5 small,
            h6 .small,
            h6 small {
                font-weight: 400;
                line-height: 1;
                color: #777;
            }

            .wordbreakimp {
                word-break: break-word;
            }

            .marginleft2 {
                margin-left: 2px;
            }

            .marginright2 {
                margin-right: 2px;
            }

            .nobackground,
            .nobackground tr {
                background: unset !important;
            }

            .text-warning {
                color: #a37c0d
            }

            body[class*="colorblind-"] .text-warning {
                color: #a37c0d
            }

            .text-success {
                color: #28a745
            }

            body[class*="colorblind-"] .text-success {
                color: #37de5d
            }

            .text-danger {
                color: #9f4705
            }

            .editfielda span.fa-pencil-alt,
            .editfielda span.fa-trash {
                color: #ccc !important;
            }

            .editfielda span.fa-pencil-alt:hover,
            .editfielda span.fa-trash:hover {
                color: rgb(0, 0, 0) !important;
            }

            .fa-toggle-on,
            .fa-toggle-off {
                font-size: 2em;
            }

            .websiteselectionsection .fa-toggle-on,
            .websiteselectionsection .fa-toggle-off,
            .asetresetmodule .fa-toggle-on,
            .asetresetmodule .fa-toggle-off {
                font-size: 1.5em;
                vertical-align: text-bottom;
            }

            .badge-status {
                font-size: 1em;
                padding: .19em .35em;
                /* more than 0.19 generate a change into heigth of lines */
            }

            /* WARNING colorblind */
            body[class^="colorblind-"] .badge-warning {
                background-color: #e4e411;
            }

            body[class^="colorblind-"] a.badge-warning.focus,
            body[class^="colorblind-"] a.badge-warning:focus {
                box-shadow: 0 0 0 0.2rem rgba(228, 228, 17, 0.5);
            }

            body[class^="colorblind-"] a.badge-warning:focus,
            a.badge-warning:hover {
                background-color: #cbcb00;
            }

            .font-status0 {
                color: #fff !important;
            }

            .font-status1 {
                color: #bc9526 !important;
            }

            /* COLORBLIND STATUS1 */
            body[class*="colorblind-"] .badge-status1 {
                color: #000 !important;
                background-color: #e4e411;
            }

            body[class*="colorblind-"] .font-status1 {
                color: #e4e411 !important;
            }

            body[class*="colorblind-"] .badge-status1.focus,
            body[class*="colorblind-"] .badge-status1:focus {
                outline: 0;
                box-shadow: 0 0 0 0.2rem rgba(228, 228, 17, 0.5);
            }

            body[class*="colorblind-"] .badge-status1:focus,
            body[class*="colorblind-"] .badge-status1:hover {
                color: #000 !important;
            }

            .font-status2 {
                color: #e6f0f0 !important;
            }

            .font-status3 {
                color: #fff !important;
            }

            .font-status4 {
                color: #55a580 !important;
            }

            /* COLORBLIND STATUS4 */
            body[class*="colorblind-"] .badge-status4 {
                color: #000 !important;
                background-color: #37de5d;
            }

            body[class*="colorblind-"] .font-status4 {
                color: #37de5d !important;
            }

            body[class*="colorblind-"] .badge-status4.focus,
            body[class*="colorblind-"] .badge-status4:focus {
                outline: 0;
                box-shadow: 0 0 0 0.2rem rgba(55, 222, 93, 0.5);
            }

            body[class*="colorblind-"] .badge-status4:focus,
            body[class*="colorblind-"] .badge-status4:hover {
                color: #000 !important;
            }

            .font-status5 {
                color: #fff !important;
            }

            .font-status6 {
                color: #cad2d2 !important;
            }

            .font-status7 {
                color: #fff !important;
            }

            /* COLORBLIND STATUS7 */
            body[class*="colorblind-"] .badge-status7 {
                color: #212529 !important;
                border-color: #37de5d;
                background-color: #fff;
            }

            body[class*="colorblind-"] .font-status7 {
                color: #fff !important;
            }

            body[class*="colorblind-"] .badge-status7.focus,
            body[class*="colorblind-"] .badge-status7:focus {
                outline: 0;
                box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
            }

            body[class*="colorblind-"] .badge-status7:focus,
            body[class*="colorblind-"] .badge-status7:hover {
                color: #212529 !important;
                border-color: #1ec544;
            }

            .font-status9 {
                color: #e7f0f0 !important;
            }

            .divintdwithtwolinesmax {
                width: 75px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            .twolinesmax {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            table[summary="list_of_modules"] .fa-cog {
                font-size: 1.5em;
            }

            .linkedcol-element {
                min-width: 100px;
            }

            .img-skinthumb {
                width: 160px;
                height: 100px;
            }

            .pictowarning {
                /* vertical-align: text-bottom; */
                /* color: #a37c0d; */
            }

            .pictoerror {
                color: #9f4705;
            }

            .pictomodule {
                width: 14px;
            }

            /*
 * BTN LINK
 */
            .btn-link {
                margin-right: 5px;
                border: 1px solid #ddd;
                color: #333;
                padding: 5px 10px;
                border-radius: 1em;
                text-decoration: none !important;
            }

            .btn-link:hover {
                background-color: #ddd;
                border: 1px solid #ddd;
            }

            /* rule to reduce top menu - 2nd reduction: Reduce width of top menu icons again */
            @media only screen and (max-width: 751px)

            /* reduction 2 */
                {

                .btnTitle,
                a.btnTitle {
                    display: inline-block;
                    padding: 4px 4px 4px 4px;
                    min-width: unset;
                }
            }

            .imgforviewmode {
                color: #aaa;
            }

            div.pagination li:first-child a.btnTitle {
                margin-left: 10px;
            }

            .noborderspacing {
                border-spacing: 0;
            }

            .confirmquestions .tagtr .tagtd:not(:first-child) {
                padding-left: 10px;
            }

            .confirmquestions {
                margin-top: 5px;
            }

            .trforbreak td {
                font-weight: bold;
                border-bottom: 1pt solid black !important;
                /* background-color: #e9e4e6 !important; */
            }

            div.liste_titre {
                padding-left: 3px;
            }

            .shadow {
                -webkit-box-shadow: 2px 2px 5px #CCC !important;
                box-shadow: 2px 2px 5px #CCC !important;
            }

            .opened-dash-board-wrap {
                margin-bottom: 25px;
            }

            div.divphotoref>a>.photowithmargin {
                /* Margin right for photo not inside a div.photoref frame only */
                margin-right: 15px;
            }

            table.table-fiche-title .col-title div.titre {
                line-height: 40px;
            }

            table.table-fiche-title {
                margin-bottom: 5px;
            }

            div.backgreypublicpayment {
                background-color: #f0f0f0;
                padding: 20px;
                border-bottom: 1px solid #ddd;
            }

            .backgreypublicpayment a {
                color: #222 !important;
            }

            .poweredbypublicpayment {
                float: right;
                top: 8px;
                right: 8px;
                position: absolute;
                font-size: 0.8em;
                color: #222;
                opacity: 0.3;
            }

            .bordertransp {
                background-color: transparent;
                background-image: none;
                border: none;
                font-weight: normal;
            }

            .websitebar input#previewpageurl {
                line-height: 1em;
            }

            .treeview .hover {
                color: rgb(10, 20, 100) !important;
                text-decoration: underline !important;
            }

            #comment .comment-edit {
                width: 100px;
                text-align: center;
                vertical-align: middle;
            }

            #comment .comment-edit:hover {
                background: rgba(0, 184, 148, 0.8);
            }

            dd.dropdowndd ul li {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .searchpage .tagtr .tagtd {
                padding-bottom: 3px;
            }

            .searchpage .tagtr .tagtd .button {
                background: unset;
                border: unset;
            }

            .dropdown-toggle {
                text-decoration: none !important;
            }

            .dropdown-toggle::after {
                /* font part */
                font-family: "Font Awesome 5 Free";
                font-size: 0.7em;
                font-weight: 900;
                font-style: normal;
                font-variant: normal;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                text-align: center;
                text-decoration: none;
                margin: auto 3px;
                display: inline-block;
                content: "\f078";
                -webkit-transition: -webkit-transform .2s ease-in-out;
                -ms-transition: -ms-transform .2s ease-in-out;
                transition: transform .2s ease-in-out;
            }

            .open>.dropdown-toggle::after {
                transform: rotate(180deg);
            }


            #topmenu-global-search-dropdown .dropdown-menu {
                width: 300px;
                max-width: 100%;
            }

            div#topmenu-global-search-dropdown,
            div#topmenu-bookmark-dropdown {
                line-height: 46px;
            }

            a.top-menu-dropdown-link {
                padding: 8px;
            }

            .dropdown-menu a.top-menu-dropdown-link {
                color: rgb(10, 20, 100) !important;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
                display: block;
                margin: 5px 0px;
            }

            .dropdown-item {
                display: block !important;
                box-sizing: border-box;
                width: 100%;
                padding: .25rem 1.5rem .25rem 1rem;
                clear: both;
                font-weight: 400;
                color: #212529 !important;
                text-align: inherit;
                background-color: transparent;
                border: 0;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
            }

            .dropdown-item::before {
                /* font part */
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                font-style: normal;
                font-variant: normal;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                text-align: center;
                text-decoration: none;
                margin-right: 5px;
                display: inline-block;
                content: "\f0da";
                color: rgba(0, 0, 0, 0.3);
            }

            .dropdown-item.active,
            .dropdown-item:hover,
            .dropdown-item:focus {
                color: #FFFFFF !important;
                text-decoration: none;
                background: rgb(68, 68, 90);
            }

            /*
* SEARCH
*/
            .dropdown-search-input {
                width: 100%;
                padding: 10px 35px 10px 20px;
                background-color: transparent;
                font-size: 14px;
                line-height: 16px;
                box-sizing: border-box;
                color: #575756;
                background-color: transparent;
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-size: 16px 16px;
                background-position: 95% center;
                border-radius: 50px;
                border: 1px solid #c4c4c2 !important;
                transition: all 250ms ease-in-out;
                backface-visibility: hidden;
                transform-style: preserve-3d;
            }

            .dropdown-search-input::placeholder {
                color: color(#575756 a(0.8));
                letter-spacing: 1.5px;
            }

            .hidden-search-result {
                display: none !important;
            }

            /*
 * Component: Info Box
 * -------------------
 */
            .info-box {
                display: block;
                position: relative;
                min-height: 90px;
                background: #fff;
                width: 100%;
                box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.1);
                border-radius: 2px;
                margin-bottom: 15px;
            }

            .info-box.info-box-sm {
                min-height: 80px;
                margin-bottom: 10px;
            }

            .info-box small {
                font-size: 14px;
            }

            .info-box .progress {
                background: rgba(0, 0, 0, 0.2);
                margin: 5px -10px 5px -10px;
                height: 2px;
            }

            .info-box .progress,
            .info-box .progress .progress-bar {
                border-radius: 0;
            }

            .info-box .progress .progress-bar {
                float: left;
                width: 0;
                height: 100%;
                font-size: 12px;
                line-height: 20px;
                color: #fff;
                text-align: center;
                background-color: #337ab7;
                -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
                box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
                -webkit-transition: width .6s ease;
                -o-transition: width .6s ease;
                transition: width .6s ease;
            }

            .info-box-icon {
                border-top-left-radius: 2px;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 2px;
                display: block;
                overflow: hidden;
                float: left;
                height: 60px;
                width: 60px;
                text-align: center;
                font-size: 24px;
                line-height: 60px;
                background: rgba(0, 0, 0, 0.2);
            }

            .info-box-sm .info-box-icon {
                height: 40px;
                width: 40px;
                font-size: 18px;
                line-height: 40px;
            }

            .info-box-icon>img {
                max-width: 100%;
            }

            .info-box-icon-text {
                box-sizing: border-box;
                display: block;
                position: absolute;
                width: 90px;
                bottom: 0px;
                color: #ffffff;
                background-color: rgba(0, 0, 0, 0.1);
                cursor: default;
                font-size: 10px;
                line-height: 15px;
                padding: 0px 3px;
                text-align: center;
                opacity: 0;
                -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
                transition: opacity 0.5s, visibility 0s 0.5s;
            }

            .info-box-sm .info-box-icon-text {
                overflow: hidden;
                width: 80px;
            }

            .info-box:hover .info-box-icon-text {
                opacity: 1;
            }

            .info-box-content {
                padding: 5px 10px;
                margin-left: 90px;
            }

            .info-box-sm .info-box-content {
                margin-left: 80px;
            }

            .info-box-number {
                display: block;
                font-weight: bold;
                font-size: 18px;
            }

            .progress-description,
            .info-box-text,
            .info-box-title {
                display: block;
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .info-box-title {
                text-transform: uppercase;
                font-weight: bold;
            }

            .info-box-text {
                font-size: 0.92em;
            }

            .info-box-text:first-letter {
                text-transform: uppercase
            }

            a.info-box-text {
                text-decoration: none;
            }

            .info-box-more {
                display: block;
            }

            .progress-description {
                margin: 0;
            }

            /* ICONS INFO BOX */
            .info-box-icon {
                background-color: #eee !important;
                opacity: 0.95;
            }

            .bg-infoxbox-project {
                color: #6c6a98 !important;
            }

            .bg-infoxbox-action {
                color: #b46080 !important;
            }

            .bg-infoxbox-propal,
            .bg-infoxbox-facture,
            .bg-infoxbox-commande {
                color: #99a17d !important;
            }

            .bg-infoxbox-supplier_proposal,
            .bg-infoxbox-invoice_supplier,
            .bg-infoxbox-order_supplier {
                color: #599caf !important;
            }

            .bg-infoxbox-contrat {
                color: #469686 !important;
            }

            .bg-infoxbox-bank_account {
                color: #c5903e !important;
            }

            .bg-infoxbox-adherent {
                color: #79633f !important;
            }

            .bg-infoxbox-expensereport {
                color: #79633f !important;
            }

            .bg-infoxbox-holiday {
                color: #755114 !important;
            }

            .fa-dol-action:before {
                content: "\f073";
            }

            .fa-dol-propal:before,
            .fa-dol-supplier_proposal:before {
                content: "\f2b5";
            }

            .fa-dol-facture:before,
            .fa-dol-invoice_supplier:before {
                content: "\f571";
            }

            .fa-dol-project:before {
                content: "\f0e8";
            }

            .fa-dol-commande:before,
            .fa-dol-order_supplier:before {
                content: "\f570";
            }

            .fa-dol-contrat:before {
                content: "\f1e6";
            }

            .fa-dol-bank_account:before {
                content: "\f19c";
            }

            .fa-dol-adherent:before {
                content: "\f0c0";
            }

            .fa-dol-expensereport:before {
                content: "\f555";
            }

            .fa-dol-holiday:before {
                content: "\f5ca";
            }

            /* USING FONTAWESOME FOR WEATHER */
            .info-box-weather .info-box-icon {
                background: rgba(0, 0, 0, 0.08) !important;
            }

            .fa-weather-level0:before {
                content: "\f185";
                color: #cccccc;
            }

            .fa-weather-level1:before {
                content: "\f6c4";
                color: #cccccc;
            }

            .fa-weather-level2:before {
                content: "\f0c2";
                color: #cccccc;
            }

            .fa-weather-level3:before {
                content: "\f740";
                color: #cccccc;
            }

            .fa-weather-level4:before {
                content: "\f0e7";
                color: #b91f1f;
            }

            /* USING IMAGES FOR WEATHER INTEAD OF FONT AWESOME */
            /* For other themes just uncomment this part */
            /*.info-box-weather-level0,
.info-box-weather-level1,
.info-box-weather-level2,
.info-box-weather-level3,
.info-box-weather-level4 {
    background-position: 15px 50%;
    background-repeat: no-repeat;
}
.info-box-weather .info-box-icon{
    display: none !important;
}
.info-box-weather-level0 {
    background-image: url("img/weather/weather-clear.png");
}
.info-box-weather-level1 {
    background-image: url("img/weather/weather-few-clouds.png");
}
.info-box-weather-level2 {
    background-image: url("img/weather/weather-clouds.png");
}
.info-box-weather-level3 {
    background-image: url("img/weather/weather-many-clouds.png");
}
.info-box-weather-level4 {
    background-image: url("img/weather/weather-storm.png");
}*/
            .box-flex-container {
                display: flex;
                /* or inline-flex */
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                margin: 0 0 0 -15px;
                /*justify-content: space-between;*/
            }

            .box-flex-item {
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: auto;
                width: 280px;
                margin: 5px 0px 0px 15px;
            }

            .box-flex-item.filler {
                margin: 0px 0px 0px 15px !important;
                height: 0;
            }

            /* Disabled. This break the responsive on smartphone
.box{
    overflow: visible;
}
*/

            .progress * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            .progress {
                height: 20px;
                overflow: hidden;
                background-color: #f5f5f5;
                background-color: rgba(128, 128, 128, 0.1);
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
            }

            .progress.spaced {
                margin-bottom: 20px;
            }

            .progress-bar {
                float: left;
                width: 0;
                height: 100%;
                font-size: 12px;
                line-height: 20px;
                color: #fff;
                text-align: center;
                background-color: #337ab7;
                -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
                box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
                -webkit-transition: width .6s ease;
                -o-transition: width .6s ease;
                transition: width .6s ease;
            }

            .progress-group>.progress {
                clear: both;
            }

            .progress,
            .progress>.progress-bar {
                -webkit-box-shadow: none;
                box-shadow: none;
            }

            .progress,
            .progress>.progress-bar,
            .progress .progress-bar,
            .progress>.progress-bar .progress-bar {
                border-radius: 1px;
            }

            /* size variation */
            .progress.sm,
            .progress-sm {
                height: 10px;
            }

            .progress.sm,
            .progress-sm,
            .progress.sm .progress-bar,
            .progress-sm .progress-bar {
                border-radius: 1px;
            }

            .progress.xs,
            .progress-xs {
                height: 7px;
            }

            .progress.xs,
            .progress-xs,
            .progress.xs .progress-bar,
            .progress-xs .progress-bar {
                border-radius: 1px;
            }

            .progress.xxs,
            .progress-xxs {
                height: 3px;
            }

            .progress.xxs,
            .progress-xxs,
            .progress.xxs .progress-bar,
            .progress-xxs .progress-bar {
                border-radius: 1px;
            }

            /* Vertical bars */
            .progress.vertical {
                position: relative;
                width: 30px;
                height: 200px;
                display: inline-block;
                margin-right: 10px;
            }

            .progress.vertical>.progress-bar {
                width: 100%;
                position: absolute;
                bottom: 0;
            }

            .progress.vertical.sm,
            .progress.vertical.progress-sm {
                width: 20px;
            }

            .progress.vertical.xs,
            .progress.vertical.progress-xs {
                width: 10px;
            }

            .progress.vertical.xxs,
            .progress.vertical.progress-xxs {
                width: 3px;
            }

            .progress-group .progress-text {
                font-weight: 600;
            }

            .progress-group .progress-number {
                float: right;
            }

            /* Remove margins from progress bars when put in a table */
            .table tr>td .progress {
                margin: 0;
            }

            .progress-bar-light-blue,
            .progress-bar-primary {
                background-color: #3c8dbc;
            }

            .progress-striped .progress-bar-light-blue,
            .progress-striped .progress-bar-primary {
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            }

            .progress-bar-green,
            .progress-bar-success {
                background-color: #55a580;
            }

            .progress-striped .progress-bar-green,
            .progress-striped .progress-bar-success {
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            }

            .progress-bar-aqua,
            .progress-bar-info {
                background-color: #00c0ef;
            }

            .progress-striped .progress-bar-aqua,
            .progress-striped .progress-bar-info {
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            }

            .progress-bar-yellow,
            .progress-bar-warning {
                background-color: #a37c0d;
            }

            .progress-striped .progress-bar-yellow,
            .progress-striped .progress-bar-warning {
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            }

            .progress-bar-red,
            .progress-bar-danger {
                background-color: #9f4705;
            }

            .progress-striped .progress-bar-red,
            .progress-striped .progress-bar-danger {
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            }

            .progress-bar-consumed {
                background-color: rgb(0, 0, 0, 0.15);
            }

            /*
* Component: Timeline
* -------------------
*/
            .timeline {
                position: relative;
                margin: 0 0 30px 0;
                padding: 0;
                list-style: none;
            }

            .timeline:before {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                width: 4px;
                background: #ddd;
                left: 31px;
                margin: 0;
                border-radius: 2px;
            }

            .timeline>li {
                position: relative;
                margin-right: 0;
                margin-bottom: 15px;
            }

            .timeline>li:before,
            .timeline>li:after {
                content: " ";
                display: table;
            }

            .timeline>li:after {
                clear: both;
            }

            .timeline>li>.timeline-item {
                -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                border: 1px solid #d2d2d2;
                border-radius: 3px;
                margin-top: 0;
                background: #fff;
                color: #444;
                margin-left: 60px;
                margin-right: 0px;
                padding: 0;
                position: relative;
            }

            .timeline>li.timeline-code-ticket_msg_private>.timeline-item {
                background: #fffbe5;
                border-color: #d0cfc0;
            }

            .timeline>li>.timeline-item>.time {
                color: #6f6f6f;
                float: right;
                padding: 10px;
                font-size: 12px;
            }

            .timeline>li>.timeline-item>.timeline-header-action {
                color: #6f6f6f;
                float: right;
                padding: 7px;
                font-size: 12px;
            }

            a.timeline-btn:link,
            a.timeline-btn:visited,
            a.timeline-btn:hover,
            a.timeline-btn:active {
                display: inline-block;
                margin-bottom: 0;
                font-weight: 400;
                border-radius: 0;
                box-shadow: none;
                padding: 1px 5px;
                font-size: 12px;
                line-height: 1.5;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                touch-action: manipulation;
                cursor: pointer;
                user-select: none;
                background-image: none;
                text-decoration: none;
                background-color: #f4f4f4;
                color: #444;
                border: 1px solid #ddd;
            }

            a.timeline-btn:hover {
                background-color: #e7e7e7;
                color: #333;
                border-color: #adadad;
                ;
            }

            .timeline>li>.timeline-item>.timeline-header {
                margin: 0;
                color: #333;
                border-bottom: 1px solid #f4f4f4;
                padding: 10px;
                font-size: 14px;
                font-weight: normal;
                line-height: 1.1;
            }

            .timeline>li>.timeline-item>.timeline-footer {
                border-top: 1px solid #f4f4f4;
            }

            .timeline>li.timeline-code-ticket_msg_private>.timeline-item>.timeline-header,
            .timeline>li.timeline-code-ticket_msg_private>.timeline-item>.timeline-footer {
                border-color: #ecebda;
            }

            .timeline>li>.timeline-item>.timeline-header>a {
                font-weight: 600;
            }

            .timeline>li>.timeline-item>.timeline-body,
            .timeline>li>.timeline-item>.timeline-footer {
                padding: 10px;
            }

            .timeline>li>.fa,
            .timeline>li>.glyphicon,
            .timeline>li>.ion {
                width: 30px;
                height: 30px;
                font-size: 15px;
                line-height: 30px;
                position: absolute;
                color: #666;
                background: #d2d6de;
                border-radius: 50%;
                text-align: center;
                left: 18px;
                top: 0;
            }

            .timeline>.time-label>span {
                font-weight: 600;
                padding: 5px;
                display: inline-block;
                background-color: #fff;
                border-radius: 4px;
            }

            .timeline-inverse>li>.timeline-item {
                background: #f0f0f0;
                border: 1px solid #ddd;
                -webkit-box-shadow: none;
                box-shadow: none;
            }

            .timeline-inverse>li>.timeline-item>.timeline-header {
                border-bottom-color: #ddd;
            }

            .timeline-icon-todo,
            .timeline-icon-in-progress,
            .timeline-icon-done {
                color: #fff !important;
            }

            .timeline-icon-not-applicble {
                color: #000;
                background-color: #f7f7f7;
            }

            .timeline-icon-todo {
                background-color: #dd4b39 !important;
            }

            .timeline-icon-in-progress {
                background-color: #00c0ef !important;
            }

            .timeline-icon-done {
                background-color: #00a65a !important;
            }

            .timeline-badge-date {
                background-color: #0073b7 !important;
                color: #fff !important;
            }

            .timeline-documents-container {}

            .timeline-documents {
                margin-right: 5px;
            }

            div.pagination li:last-child a *:hover {
                -webkit-box-shadow: none !important;
                box-shadow: none !important;
                padding-top: 0 !important;
            }

            div.pagination li a,
            div.pagination li a:hover {
                padding: 4px !important;
            }

            div.pagination li a span.btnTitle-icon {
                padding-right: 4px !important;
            }

            .pull-right {
                float: right !important;
            }

            .pull-left {
                float: left !important;
            }

            /* Force values for small screen 767 */
            @media only screen and (max-width: 767px) {
                div.refidno {
                    font-size: 0.86em !important;
                }
            }

            /* Force values for small screen 570 */
            @media only screen and (max-width: 570px) {
                div.refidno {
                    font-size: 0.86em !important;
                }
            }

            div.refidpadding {
                padding-top: 3px;
            }

            div.refid {
                font-weight: bold;
                color: rgb(0, 113, 121);
                font-size: 1.2em;
            }

            div.refidno {
                padding-top: 3px;
                font-weight: normal;
                color: #444;
                font-size: 0.86em;
                line-height: 21px;
            }

            div.refidno form {
                display: inline-block;
            }

            div.pagination li a:hover,
            div.pagination li span:hover,
            div.pagination li a:focus,
            div.pagination li span:focus {
                padding-top: 0px !important;
            }

            /* * * * * * * * * * * * * * * * * * * END Version 11 of Dolibarr * */





            /* * * * * * * * * * * * * * * * * * *  Version 12 of Dolibarr * */

            .fixed-menu #id-left {
                width: 100% !important;
            }


            span.widthpictotitle.pictotitle {
                background: #09355b;
                opacity: 0.8;
                color: #fff !important;
                padding: 7px;
                border-radius: 2px;
                min-width: 30px;
                text-align: center;
            }

            span.widthpictotitle {
                font-size: 1em;
            }

            .pictotitle {
                margin-right: 8px;
                /* margin-bottom: 4px; */
            }

            td.widthpictotitle {
                width: 26px;
                text-align: left;
            }

            td.nobordernopadding.widthpictotitle.col-picto {
                color: #bbb;
                opacity: 0.85;
            }




            @media only screen and (max-width: 767px) {
                .box-flex-container {
                    margin: 0 0 0 0px !important;
                    width: 100% !important;
                }

                .info-box-module {
                    width: 100%;
                    max-width: unset;
                }
            }


            .btnTitle,
            a.btnTitle {
                display: inline-block;
                padding: 4px 12px 4px 12px;
                font-weight: 400;
                /* line-height: 1; */
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                box-shadow: var(--btncolorbg);
                text-decoration: none;
                position: relative;
                margin: 0 0 0 10px;
                min-width: 80px;
                text-align: center;
                color: var(--btncolortext);
                border: none;
                font-size: 12px;
                font-weight: 300;
                background-color: var(--btncolorbg);
                border: 1px solid var(--btncolorborder);
            }

            a.btnTitle.btnTitleSelected {
                border: 1px solid #ccc;
                border-radius: 3px;
            }

            .btnTitle>.btnTitle-icon {}

            .btnTitle>.btnTitle-label {
                color: #666666;
            }

            .btnTitle:hover,
            a.btnTitle:hover {
                border: 1px solid #bbb;
                border-radius: 3px;
                position: relative;
                margin: 0 0 0 10px;
                text-align: center;
                /* color: #ffffff;
    background-color: rgb(<?php print $colortextlink; ?>); */
                font-size: 12px;
                text-decoration: none;
                box-shadow: none;
            }

            .btnTitle.refused,
            a.btnTitle.refused,
            .btnTitle.refused:hover,
            a.btnTitle.refused:hover {
                color: #8a8a8a;
                cursor: not-allowed;
                background-color: #fbfbfb;
                background: repeating-linear-gradient(45deg, #ffffff, #f1f1f1 4px, #f1f1f1 4px, #f1f1f1 4px);
            }

            .btnTitle:hover .btnTitle-label {
                color: var(--btncolorborderhover);
            }

            .btnTitle.refused .btnTitle-label,
            .btnTitle.refused:hover .btnTitle-label {
                color: #8a8a8a;
            }

            .btnTitle>.fa {
                font-size: 20px;
                display: block;
            }

            div.pagination li:first-child a.btnTitle {
                margin-left: 10px;
            }


            .imgforviewmode {
                color: #aaa;
            }

            /* rule to reduce top menu - 2nd reduction: Reduce width of top menu icons again */
            @media only screen and (max-width: <?php echo empty($conf->global->THEME_ELDY_WITDHOFFSET_FOR_REDUC2) ? round($nbtopmenuentries * 69, 0) + 130 : $conf->global->THEME_ELDY_WITDHOFFSET_FOR_REDUC2; ?>px)

            /* reduction 2 */
                {

                .btnTitle,
                a.btnTitle {
                    display: inline-block;
                    padding: 4px 4px 4px 4px;
                    min-width: unset;
                }
            }

            <?php if ( !empty($conf->global->MAIN_BUTTON_HIDE_UNAUTHORIZED) && ( !$user->admin)) {

                ?>.butActionRefused,
                .butActionNewRefused,
                .btnTitle.refused {
                    display: none !important;
                }

                <?php
            }

            ?>
            /*
 * BTN LINK
 */

            .btn-link {
                margin-right: 5px;
                border: 1px solid #ddd;
                color: #333;
                padding: 5px 10px;
                border-radius: 1em;
                text-decoration: none !important;
            }

            .btn-link:hover {
                background-color: #ddd;
                border: 1px solid #ddd;
            }

            .imgdoc {
                margin: 18px;
                border: 1px solid #ccc;
                box-shadow: 1px 1px 25px #aaa;
                max-width: calc(100% - 56px);
            }

            .fa-file-text-o,
            .fa-file-code-o,
            .fa-file-powerpoint-o,
            .fa-file-excel-o,
            .fa-file-word-o,
            .fa-file-o,
            .fa-file-image-o,
            .fa-file-video-o,
            .fa-file-audio-o,
            .fa-file-archive-o,
            .fa-file-pdf-o {
                color: #055;
            }

            .fa-15 {
                font-size: 1.5em;
            }

            .margintoponly {
                margin-top: 10px !important;
            }


            /* For table into table into card */
            div.fichehalfright tr.liste_titre:first-child td table.nobordernopadding td {
                padding: 0 0 0 0;
            }

            div.nopadding {
                padding: 0 !important;
            }

            .containercenter {
                display: table;
                margin: 0px auto;
            }

            td.nobordernopadding.widthpictotitle.col-picto {
                color: #bbb;
                opacity: 0.85;
            }

            .table-list-of-attached-files .col-picto,
            .table-list-of-links .col-picto {
                opacity: 0.7 !important;
                font-size: 0.7em;
                width: 20px;
            }

            .table-list-of-attached-files .col-picto .widthpictotitle,
            .table-list-of-links .col-picto .widthpictotitle {
                width: unset;
                color: #999;
            }



            .info-box-module-external span.info-box-icon-version {
                background: #bbb;
            }

            .info-box {
                display: block;
                position: relative;
                min-height: 90px;
                /* background: #fff; */
                width: 100%;
                box-shadow: 1px 1px 2px rgba(128, 128, 128, 0.2);
                border-radius: 2px;
                border: 1px solid #e9e9e9;
                margin-bottom: 15px;
            }

            .info-box.info-box-sm {
                min-height: 80px;
                margin-bottom: 10px;
            }

            .info-box-more {
                float: right;
                top: 5px;
                position: absolute;
                right: 8px;
            }

            .info-box small {
                font-size: 14px;
            }

            .info-box .progress {
                background: rgba(0, 0, 0, 0.2);
                margin: 5px -10px 5px -10px;
                height: 2px;
            }

            .info-box .progress,
            .info-box .progress .progress-bar {
                border-radius: 0;
            }

            .info-box .progress .progress-bar {
                float: left;
                width: 0;
                height: 100%;
                font-size: 12px;
                line-height: 20px;
                color: #fff;
                text-align: center;
                background-color: #337ab7;
                -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
                box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
                -webkit-transition: width .6s ease;
                -o-transition: width .6s ease;
                transition: width .6s ease;
            }

            .info-box-icon {
                border-top-left-radius: 2px;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 2px;
                display: block;
                overflow: hidden;
                float: left;
                height: 90px;
                width: 90px;
                text-align: center;
                font-size: 45px;
                line-height: 90px;
                background: rgba(0, 0, 0, 0.08) !important
            }

            .info-box-sm .info-box-icon {
                height: 80px;
                width: 80px;
                font-size: 25px;
                line-height: 92px;
            }

            .opened-dash-board-wrap .info-box-sm .info-box-icon {
                line-height: 80px;
            }

            .info-box-module .info-box-icon {
                height: 98px;
            }

            .info-box-icon>img {
                max-width: 100%;
            }

            .info-box-module .info-box-icon>img {
                max-width: 60%;
            }

            a.info-box-text.info-box-text-a {
                display: table-cell;
            }

            a.info-box-text-a i.fa.fa-exclamation-triangle {
                font-size: 0.9em;
            }

            .info-box-icon-text {
                box-sizing: border-box;
                display: block;
                position: absolute;
                width: 90px;
                bottom: 0px;
                color: #ffffff;
                background-color: rgba(0, 0, 0, 0.1);
                cursor: default;

                font-size: 10px;
                line-height: 15px;
                padding: 0px 3px;
                text-align: center;
                opacity: 0;
                -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
                transition: opacity 0.5s, visibility 0s 0.5s;
            }

            .info-box-icon-version {
                box-sizing: border-box;
                display: block;
                position: absolute;
                width: 90px;
                bottom: 0px;
                color: #ffffff;
                background-color: rgba(0, 0, 0, 0.1);
                cursor: default;

                font-size: 10px;
                line-height: 22px;
                padding: 0px 3px;
                text-align: center;
                opacity: 1;
                -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
                transition: opacity 0.5s, visibility 0s 0.5s;
            }

            .box-flex-item.info-box-module.info-box-module-disabled {
                /* opacity: 0.6; */
            }

            .info-box-actions {
                position: absolute;
                right: 0;
                bottom: 0;
            }

            <?php if (empty($conf->global->MAIN_DISABLE_GLOBAL_BOXSTATS) && !empty($conf->global->MAIN_INCLUDE_GLOBAL_STATS_IN_OPENED_DASHBOARD)) {
                ?>.info-box-icon-text {
                    opacity: 1;
                }

                <?php
            }

            ?>.info-box-sm .info-box-icon-text,
            .info-box-sm .info-box-icon-version {
                overflow: hidden;
                width: 80px;
            }

            .info-box:hover .info-box-icon-text {
                opacity: 1;
            }

            .info-box-content {
                padding: 5px 10px;
                margin-left: 84px;
            }

            .info-box-sm .info-box-content {
                margin-left: 80px;
            }

            /*.info-box-setup span {
    color: var(--colortexttitlenotab2);
}
.tdsetuppicto span {
    color: var(--colortexttitlenotab2);
}*/

            .info-box-number {
                display: block;
                font-weight: bold;
                font-size: 18px;
            }

            .progress-description,
            .info-box-text,
            .info-box-title {
                display: block;
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .info-box-title {
                text-transform: uppercase;
                font-weight: bold;
                margin-bottom: 3px;
                /* not too much space so we can add another lines */
            }

            .info-box-text {
                font-size: 0.92em;
            }

            .info-box-text:first-letter {
                text-transform: uppercase
            }

            a.info-box-text {
                text-decoration: none;
            }


            .info-box-more {
                display: block;
            }

            .progress-description {
                margin: 0;
            }



            /* ICONS INFO BOX */
            <?php include_once DOL_DOCUMENT_ROOT.'/core/lib/functions2.lib.php';

            $prefix ='';
            if ( !empty($conf->global->THEME_INFOBOX_COLOR_ON_BACKGROUND)) $prefix ='background-';

            if ( !isset($conf->global->THEME_SATURATE_RATIO)) $conf->global->THEME_SATURATE_RATIO =0.7;
            if (GETPOSTISSET('THEME_SATURATE_RATIO')) $conf->global->THEME_SATURATE_RATIO =GETPOST('THEME_SATURATE_RATIO', 'int');

            ?>.info-box-icon {
                <?php if ($prefix) {
                    ?>color: #fff !important;
                    <?php
                }

                ?>opacity: 0.95;

                <?php if (isset($conf->global->THEME_SATURATE_RATIO)) {
                    ?>filter: saturate(<?php echo $conf->global->THEME_SATURATE_RATIO; ?>);
                    <?php
                }

                ?>
            }

            .bg-infobox-project {
                <?php echo $prefix;
                ?>color: #6c6aa8 !important;
            }

            .bg-infobox-action {
                <?php echo $prefix;
                ?>color: #a47080 !important;
            }

            .bg-infobox-propal,
            .bg-infobox-facture,
            .bg-infobox-commande {
                <?php echo $prefix;
                ?>color: #99a17d !important;
            }

            .bg-infobox-supplier_proposal,
            .bg-infobox-invoice_supplier,
            .bg-infobox-order_supplier {
                <?php echo $prefix;
                ?>color: #599caf !important;
            }

            .bg-infobox-contrat,
            .bg-infobox-ticket {
                <?php echo $prefix;
                ?>color: #46a676 !important;
            }

            .bg-infobox-bank_account {
                <?php echo $prefix;
                ?>color: #b0a53e !important;
            }

            .bg-infobox-adherent,
            .bg-infobox-member {
                <?php echo $prefix;
                ?>color: #79633f !important;
            }

            .bg-infobox-expensereport {
                <?php echo $prefix;
                ?>color: #79633f !important;
            }

            .bg-infobox-holiday {
                <?php echo $prefix;
                ?>color: #755114 !important;
            }

            .infobox-adherent,
            .infobox-member {
                color: #79633f !important;
            }

            .infobox-project {
                color: #6c6aa8 !important;
            }

            .infobox-action {
                color: #a47080 !important;
            }

            .infobox-propal,
            .infobox-facture,
            .infobox-commande {
                color: #99a17d !important;
            }

            .infobox-supplier_proposal,
            .infobox-invoice_supplier,
            .infobox-order_supplier {
                color: #599caf !important;
            }

            .infobox-contrat,
            .infobox-ticket {
                color: #46a676 !important;
            }

            .infobox-bank_account {
                color: #b0a53e !important;
            }

            .infobox-adherent,
            .infobox-member {
                color: #79633f !important;
            }

            .infobox-expensereport {
                color: #79633f !important;
            }

            .infobox-holiday {
                color: #755114 !important;
            }


            .fa-dol-action:before {
                content: "\f073";
            }

            .fa-dol-propal:before,
            .fa-dol-supplier_proposal:before {
                content: "\f573";
            }

            .fa-dol-facture:before,
            .fa-dol-invoice_supplier:before {
                content: "\f571";
            }

            .fa-dol-project:before {
                content: "\f0e8";
            }

            .fa-dol-commande:before,
            .fa-dol-order_supplier:before {
                content: "\f570";
            }

            .fa-dol-contrat:before {
                content: "\f1e6";
            }

            .fa-dol-ticket:before {
                content: "\f3ff";
            }

            .fa-dol-bank_account:before {
                content: "\f19c";
            }

            .fa-dol-member:before {
                content: "\f0c0";
            }

            .fa-dol-expensereport:before {
                content: "\f555";
            }

            .fa-dol-holiday:before {
                content: "\f5ca";
            }


            /* USING FONTAWESOME FOR WEATHER */
            .info-box-weather .info-box-icon {
                background: rgba(0, 0, 0, 0.08) !important;
            }

            .fa-weather-level0:before {
                content: "\f185";
                color: #cccccc;
            }

            .fa-weather-level1:before {
                content: "\f6c4";
                color: #cccccc;
            }

            .fa-weather-level2:before {
                content: "\f0c2";
                color: #cccccc;
            }

            .fa-weather-level3:before {
                content: "\f740";
                color: #cccccc;
            }

            .fa-weather-level4:before {
                content: "\f0e7";
                color: #b91f1f;
            }


            .box-flex-container {
                display: flex;
                /* or inline-flex */
                flex-direction: row;
                flex-wrap: wrap;
                width: calc(100% + 14px);
                margin: 0 -8px 0 -8px;
                /*justify-content: space-between;*/
            }

            .box-flex-item {
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: auto;

                width: 280px;
                margin: 5px 8px 0px 8px;
            }

            .box-flex-item.filler {
                margin: 0px 0px 0px 15px !important;
                height: 0;
            }

            .info-box-title {
                width: calc(100% - 20px);
            }

            .info-box-module {
                min-width: 350px;
                max-width: 350px;
            }

            @media only screen and (max-width: 1740px) {
                .info-box-module {
                    min-width: 315px;
                    max-width: 315px;
                }
            }

            @media only screen and (max-width: 767px) {
                .info-box-module {
                    min-width: 260px;
                }
            }


            .info-box-module .info-box-content {
                height: 6.4em;
            }

            /* Disabled. This break the responsive on smartphone
.box{
    overflow: visible;
}
*/

            @media only screen and (max-width: 767px) {
                .box-flex-container {
                    margin: 0 0 0 0px !important;
                    width: 100% !important;
                }

                .info-box-module {
                    width: 100%;
                    max-width: unset;
                }
            }


            .info-box-module .info-box.info-box-sm {
                min-height: 100px !important;
            }



            div.fiche>form>div.div-table-responsive,
            div.fiche>form>div.div-table-responsive-no-min {
                overflow-x: auto;
            }


            div.inline-block>span.hideonsmartphone {
                float: right;
            }

            div.inline-block span.aversion {
                padding: 4px 3px 5px;
                background: #00c292ab !important;
                border-radius: .65rem !important;
                color: #fff;
                font-weight: bold;
                font-size: 11px;
            }

            .parent_tabbord .child_tabbord_1 .users_icon {
                font-size: 23px !important;
                padding: 10px 34px 11px 9px !important;
            }

            /* * * * * * * * * * * * * * * * * * * END Version 12 of Dolibarr * */


            <?php if (is_object($db)) $db->close();
            ?>
            /* 
 * --------------------------------------------------------------------------
 * CUSTOM SIDEBAR DESIGN (Card Style)
 * --------------------------------------------------------------------------
 */

            /* Clear default backgrounds to allow cards to stand out */
            div#id-left,
            div#id-left div.vmenu,
            div.vmenu {
                background: #f6f8fa !important;
                /* Light grey background for the sidebar area */
                border: none !important;
            }

            /* Hide default borders/separators if they interfere */
            div.vmenu .blockvmenu,
            div.vmenu .menu_top,
            div.vmenu .menu_titre {
                border: none !important;
                background: transparent !important;
            }

            /* Style main menu entries as Cards */
            /* Assuming .menu_top or .vmenu level 0 usually represents the main collapsible items */
            div.vmenu div.menu_top {
                background: #ffffff !important;
                border-radius: 12px;
                margin: 0 10px 12px 10px !important;
                /* Spacing between cards */
                padding: 12px 15px !important;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
                border: 1px solid #e0e6ed;
                transition: all 0.2s ease-in-out;
                position: relative;
                overflow: hidden;
            }

            /* Hover effect for cards */
            div.vmenu div.menu_top:hover {
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
                border-color: #3b8cd2;
            }

            /* Style the links inside */
            div.vmenu a.vmenu,
            div.vmenu span.vmenu {
                color: #444 !important;
                font-weight: 600;
                font-size: 1.05em;
                text-decoration: none !important;
                display: flex;
                align-items: center;
            }

            /* Icons in the menu */
            div.vmenu a.vmenu img,
            div.vmenu span.vmenu img,
            .imgmenus {
                margin-right: 12px !important;
                width: 20px;
                height: 20px;
                opacity: 0.8;
            }

            /* Active State (if available via class) */
            div.vmenu div.menu_top.selected,
            div.vmenu div.menu_top[class*="active"] {
                background: #ffffff !important;
                border-left: 4px solid #3b8cd2 !important;
                box-shadow: 0 2px 8px rgba(59, 140, 210, 0.15);
            }

            /* Submenu items (if any are expanded inside) */
            div.vmenu div.menu_content {
                padding: 5px 10px 10px 45px !important;
                /* Indent subitems */
            }

            div.vmenu a.vsmenu {
                color: #666 !important;
                font-size: 0.9em;
                padding: 5px 0;
                display: block;
                transition: color 0.1s;
            }

            div.vmenu a.vsmenu:hover {
                color: #3b8cd2 !important;
            }

            /* Remove old list styles */
            .tmenudiv ul,
            .tmenudiv li {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            /* ==========================================================================
   AGNI Modern Theme Overrides
   ========================================================================== */

            /* --- Typography --- */
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-family: 'Inter', sans-serif;
                font-weight: 600;
                color: #0f172a !important;
                letter-spacing: -0.025em;
            }

            /* --- Buttons --- */
            .button,
            .butAction,
            .butActionDelete,
            button,
            input[type="submit"],
            input[type="button"] {
                border-radius: 6px !important;
                padding: 8px 16px !important;
                font-weight: 500 !important;
                font-size: 0.9rem !important;
                transition: all 0.2s ease-in-out !important;
                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                border: 1px solid transparent;
            }

            .button:hover,
            .butAction:hover,
            input[type="submit"]:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }

            /* Primary Button */
            .butAction {
                background: #3b82f6 !important;
                /* Modern Blue */
                color: white !important;
                border-color: #2563eb !important;
            }

            .butAction:hover {
                background: #2563eb !important;
            }

            /* Secondary/Cancel Button */
            .butActionDelete,
            .button {
                background: #ffffff !important;
                border: 1px solid #cbd5e1 !important;
                color: #475569 !important;
            }

            .butActionDelete:hover {
                background: #fef2f2 !important;
                color: #dc2626 !important;
                border-color: #fca5a5 !important;
            }

            /* --- Cards & Containers --- */
            div.fiche,
            .div-table-responsive,
            [class*="box"] {
                background: #ffffff;
                border-radius: 8px;
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
                border: 1px solid #e2e8f0;
                margin-bottom: 20px;
            }

            /* --- Tables --- */
            table.liste,
            table.noborder,
            .dataTable {
                border-collapse: separate !important;
                border-spacing: 0;
                width: 100%;
            }

            tr.liste_titre,
            tr.liste_titre th,
            .liste_titre {
                background: #f8fafc !important;
                /* Very light slate */
                color: #475569 !important;
                font-weight: 600 !important;
                text-transform: uppercase;
                font-size: 0.75rem !important;
                letter-spacing: 0.05em;
                padding: 12px !important;
                border-bottom: 1px solid #e2e8f0 !important;
            }

            tr.oddeven td,
            tr.pair td,
            tr.impair td {
                padding: 12px 10px !important;
                border-bottom: 1px solid #f1f5f9;
                color: #334155;
                vertical-align: middle;
            }

            /* Row Hover */
            tr.oddeven:hover td,
            tr.pair:hover td,
            tr.impair:hover td {
                background-color: #f8fafc !important;
            }

            /* --- Forms --- */
            input[type="text"],
            input[type="password"],
            textarea,
            select,
            .select2-container .select2-choice {
                border: 1px solid #cbd5e1 !important;
                border-radius: 6px !important;
                padding: 8px 12px !important;
                font-size: 0.9rem !important;
                color: #1e293b !important;
                background-color: #fff !important;
                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                height: auto !important;
            }

            input:focus,
            textarea:focus,
            select:focus {
                border-color: #3b82f6 !important;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
                outline: none;
            }

            /* Select2 Fixes */
            .select2-container .select2-choice {
                height: 38px !important;
                line-height: 36px !important;
                background-image: none !important;
            }

            /* --- Sidebar --- */
            div#id-left div.vmenu {
                background: #ffffff !important;
                border-right: 1px solid #e2e8f0;
                box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02);
            }

            div.mainmenu {
                border-bottom: 1px solid #f1f5f9;
            }

            /* --- Top Menu --- */
            div.tmenudiv {
                background: linear-gradient(to right, #0f172a, #1e293b) !important;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            }

            /* ============================================== */
            /*          VumaTheme Pro Upgrade Assets          */
            /* ============================================== */

            /* Main Menu Icons */
            body .site-menu-icon.mainmenu.loan:before {
                content: "\f249";
            }

            body .site-menu-icon.mainmenu.blockedlog:before {
                content: "\f249";
            }

            body .site-menu-icon.mainmenu.comptabilite:before {
                content: "\f249";
            }

            body .site-menu-icon.mainmenu.bom:before {
                content: "\f249";
            }

            body .site-menu-icon.mainmenu.resource:before {
                content: "\f249";
            }

            body .site-menu-icon.mainmenu.revolutionpro {
                background-image: url(/custom/becreative/img/object_logo.png) !important;
                height: 15px;
                background-size: 15px;
                filter: gray;
                -webkit-filter: grayscale(1);
                filter: grayscale(1);
            }

            body .site-menubar-dark .site-menu-icon.mainmenu.revolutionpro {
                filter: brightness(0) invert(1);
                opacity: 0.5;
            }

            body .site-menu-icon.mainmenu.revolutionpro:before {
                display: none !important;
            }

            /* Navbar & Global Teal Styling */
            .site-navbar {
                background-color: #00897b !important;
            }

            .bodylogin.page-login-v2 .page-login-main {
                background-image: url(/custom/becreative/img/background_login.jpg) !important;
            }

            .bodylogin.page-login-v2:before {
                background-image: url(/custom/becreative/img/background_login_1.jpg) !important;
            }

            body .liste_titre .badge:not(.nochangebackground) {
                background-color: #00897b;
            }

            .badge-secondary,
            .tabs .badge {
                background-color: #00897bd4;
            }

            body .tabactive,
            body a.tab#active {
                border-top: 2px solid #00897b !important;
            }

            body .ui-widget-header {
                border: 1px solid #00897b;
                background: #00897b;
            }

            @media (max-width: 767.98px) {
                .site-navbar.navbar-inverse .navbar-container {
                    background-color: #00897b !important;
                }
            }

            body div.liste_titre_bydiv,
            body .mc-dropdown-menu>.mc-header,
            body .updf-dropdown-menu>.updf-header,
            body .liste_titre div.tagtr,
            body tr.liste_titre,
            body tr.liste_titre_sel,
            body .tagtr.liste_titre,
            body .tagtr.liste_titre_sel,
            body form.liste_titre,
            body form.liste_titre_sel,
            body table.dataTable thead tr {
                background: #00897bd9 !important;
                color: #fff !important;
            }

            body tr.liste_titre th,
            body tr.liste_titre td {
                color: #fff !important;
            }

            body .navbar-inverse .navbar-collapse,
            body .navbar-inverse .navbar-form {
                border-color: #00897b;
            }

            body .loader-overlay {
                background: #00897b;
            }

            body .liste_titre_filter {
                background: #00897b61 !important;
            }

            body .thefourboxes .card:hover {
                background-color: #00897bb5;
            }

            /* Buttons */
            .butAction,
            #mainbody input.button:not(.buttongen):not(.bordertransp),
            body.bodylogin .login_table input[type="submit"] {
                background: #00897b !important;
                background-color: #00897b !important;
                border-color: #00897b !important;
                margin-bottom: 15px !important;
            }

            body span.widthpictotitle.pictotitle {
                background: transparent !important;
                color: #bbb !important;
            }

            /* Module Boxes */
            body .info-box-text-module .info-box-title .ds_url_module_name {
                text-transform: uppercase;
                text-decoration: none !important;
                font-weight: normal;
                margin-bottom: 3px;
                color: #000;
                cursor: default;
            }

            body .info-box-module .info-box-icon a.ds_image_module_logo {
                display: inline-block;
                width: 100%;
                height: 100%;
                cursor: default;
            }

            body .info-box-module .info-box-icon .ds_image_module_logo img {
                max-width: 60%;
            }

            body .info-box-content .info-box-desc .ds_url_module_desc {
                text-decoration: none !important;
                color: #A9AFB5;
                cursor: default;
            }

            body table[summary="list_of_modules"] .ds_url_module_desc {
                text-decoration: none !important;
                color: #202020;
                cursor: default;
            }

            body table[summary="list_of_modules"] .ds_url_module_name {
                text-decoration: none !important;
                color: #202020;
                cursor: default;
            }

            /* Modern CSS Variables */
            :root {
                --colorbackhmenu1: rgb(0, 137, 123);
                --colorbackvmenu1: rgb(250, 250, 250);
                --colorbacktitle1: rgb(233, 234, 237);
                --colorbacktabcard1: rgb(255, 255, 255);
                --colorbacktabactive: rgb(234, 234, 234);
                --colorbacklineimpair1: rgb(255, 255, 255);
                --colorbacklineimpair2: rgb(255, 255, 255);
                --colorbacklinepair1: rgb(251, 251, 251);
                --colorbacklinepair2: rgb(251, 251, 251);
                --colorbacklinepairhover: rgb(230, 237, 244);
                --colorbacklinepairchecked: rgb(230, 237, 244);
                --colorbacklinebreak: rgb(248, 247, 244);
                --colorbackbody: rgb(255, 255, 255);
                --colortexttitlenotab: #424242;
                --colortexttitlenotab2: rgb(100, 0, 100);
                --colortexttitle: rgb(0, 0, 0);
                --colortext: rgb(0, 0, 0);
                --colortextlink: rgb(0, 137, 123);
                --colortextbackhmenu: #FFFFFF;
                --colortextbackvmenu: #000000;
                --listetotal: #888888;
                --inputbackgroundcolor: #FFF;
                --inputbordercolor: rgba(0, 0, 0, .2);
                --tooltipbgcolor: rgba(255, 255, 255, 0.96);
                --tooltipfontcolor: #333;
                --oddevencolor: #202020;
                --colorboxstatsborder: #e0e0e0;
                --dolgraphbg: rgba(255, 255, 255, 0);
                --fieldrequiredcolor: #000055;
                --colortextbacktab: #000000;
                --colorboxiconbg: #eee;
                --refidnocolor: #444;
                --tableforfieldcolor: #666;
                --amountremaintopaycolor: #880000;
                --amountpaymentcomplete: #008800;
                --amountremaintopaybackcolor: none;
            }

            /* ============================================== */
            /*           Modern Sidebar Card Design           */
            /* ============================================== */

            /* Sidebar Container */
            div#id-left div.vmenu {
                background-color: #f8fafc !important;
                /* Slate 50 */
                padding-top: 20px !important;
                width: 280px !important;
                box-shadow: 1px 0 0 #e2e8f0;
            }

            /* Menu Item Container - Resetting potentially conflicting styles */
            body #id-left div.vmenu li.menu_titre,
            body #id-left .vmenu li.menu_titre {
                padding: 0 12px !important;
                margin-bottom: 4px !important;
                list-style: none !important;
                background: transparent !important;
                border: none !important;
            }

            /* Menu Links (The "Cards") - High Specificity */
            body #id-left div.vmenu li.menu_titre>a,
            body #id-left .vmenu li.menu_titre>a,
            body #id-left div.vmenu a.vsmenu,
            body #id-left .vmenu a.vsmenu {
                display: flex !important;
                align-items: center;
                padding: 10px 16px !important;
                border-radius: 8px !important;
                color: #475569 !important;
                /* Slate 600 */
                font-weight: 500 !important;
                font-size: 0.95em !important;
                transition: all 0.2s ease-in-out;
                background: transparent !important;
                text-decoration: none !important;
                line-height: 1.5 !important;
                border: 1px solid transparent !important;
                /* Reset borders */
            }

            /* Remove the red border usually found in eldy themes or custom overrides */
            body #id-left div.vmenu li.menu_titre>a::before,
            body #id-left div.vmenu li.menu_titre>a::after {
                border: none !important;
                content: none !important;
            }

            /* Hover State */
            body #id-left div.vmenu li.menu_titre>a:hover,
            body #id-left .vmenu li.menu_titre>a:hover {
                background-color: #e2e8f0 !important;
                /* Slate 200 */
                color: #1e293b !important;
                /* Slate 800 */
                transform: translateX(2px);
            }

            /* Active State (Override data-actif and other selectors) */
            div[data-actif="nc_actif_element"],
            body #id-left div.vmenu a[data-actif="nc_actif_element"],
            body #id-left div.vmenu li.menu_titre>a.vsmenu.tmenusel,
            body #id-left div.vmenu li.tmenusel>a,
            body #id-left .vmenu li.tmenusel,
            body #id-left .vmenu li.menu_titre[aria-expanded="true"]>a {
                background-color: #00897b !important;
                /* Teal */
                color: #ffffff !important;
                box-shadow: 0 4px 6px -1px rgba(0, 137, 123, 0.4), 0 2px 4px -1px rgba(0, 137, 123, 0.2);
                border-radius: 8px !important;
                border: none !important;
            }

            div[data-actif="nc_actif_element"] a,
            body #id-left div.vmenu a[data-actif="nc_actif_element"] {
                color: #ffffff !important;
            }

            /* Submenu Items (if any, indented) */
            body #id-left div.vmenu li.menu_titre>div.menu_contenu2,
            body #id-left div.vmenu li.menu_titre>div.menu_contenu3 {
                padding-left: 20px !important;
                font-size: 0.9em;
                opacity: 0.9;
                background-color: transparent !important;
                /* Prevent dark blocks */
            }

            /* Icons in Menu */
            body #id-left div.vmenu li.menu_titre>a .mainmenuaspan {
                margin-right: 12px;
                font-size: 1.1em;
                width: 20px;
                text-align: center;
                opacity: 0.8;
            }

            /* Section Headers (if separating groups) */
            body #id-left div.vmenu .blockvmenusearch,
            body #id-left div.vmenu .blockvmenulogo {
                margin-bottom: 20px;
                border-bottom: 1px solid #e2e8f0 !important;
                background: transparent !important;
            }

            /* ============================================== */
            /*      Professional Modern Sidebar Menu          */
            /*      Matching Odoo/SAP Style with Icons       */
            /* ============================================== */

            /* Main sidebar container */
            div#id-left div.vmenu {
                background-color: #ffffff !important;
                padding: 8px 0 !important;
                width: 280px !important;
                border-right: 1px solid #e5e7eb !important;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
            }

            /* Main menu items (level 0) */
            body #id-left div.vmenu li.menu_titre {
                padding: 0 !important;
                margin: 0 !important;
                margin-bottom: 2px !important;
                list-style: none !important;
                background: transparent !important;
                border: none !important;
                position: relative !important;
            }

            /* Main menu links - Professional flat design */
            body #id-left div.vmenu li.menu_titre>a,
            body #id-left .vmenu li.menu_titre>a {
                display: flex !important;
                align-items: center !important;
                padding: 12px 16px !important;
                border-radius: 0 !important;
                color: #374151 !important;
                font-weight: 500 !important;
                font-size: 14px !important;
                transition: all 0.2s ease !important;
                background: transparent !important;
                text-decoration: none !important;
                line-height: 1.5 !important;
                border: none !important;
                position: relative !important;
                border-left: 3px solid transparent !important;
            }

            /* Expand/collapse icon for items with submenus */
            body #id-left div.vmenu li.menu_titre.has-children>a::before {
                content: '\f105' !important;
                /* Font Awesome chevron-right */
                font-family: 'Font Awesome 5 Free', 'FontAwesome', Arial, sans-serif !important;
                font-weight: 900 !important;
                margin-right: 12px !important;
                font-size: 11px !important;
                color: #9ca3af !important;
                transition: transform 0.2s ease !important;
                width: 14px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                line-height: 1 !important;
            }

            body #id-left div.vmenu li.menu_titre.has-children.expanded>a::before {
                transform: rotate(90deg) !important;
                color: #00897b !important;
            }

            /* Hover state - subtle gray background */
            body #id-left div.vmenu li.menu_titre>a:hover {
                background-color: #f9fafb !important;
                color: #111827 !important;
            }

            /* Active state - Light teal background with dark teal left border */
            body #id-left div.vmenu li.menu_titre>a.vsmenu.tmenusel,
            body #id-left div.vmenu li.tmenusel>a,
            body #id-left div.vmenu a[data-actif="nc_actif_element"],
            body #id-left div.vmenu li.menu_titre.active>a,
            body #id-left div.vmenu li.menu_titre>a[data-actif="nc_actif_element"] {
                background-color: #e0f2f1 !important;
                /* Light teal */
                color: #374151 !important;
                /* Dark gray text */
                font-weight: 600 !important;
                border-left: 3px solid #00897b !important;
                /* Dark teal left border */
            }

            /* Submenu container - inline tree structure */
            body #id-left div.vmenu li.menu_titre .tree-submenu {
                max-height: 0 !important;
                overflow: hidden !important;
                transition: max-height 0.3s ease, padding 0.3s ease !important;
                padding-left: 0 !important;
                margin-top: 0 !important;
                background: transparent !important;
            }

            body #id-left div.vmenu li.menu_titre.expanded .tree-submenu {
                max-height: 2000px !important;
                padding-left: 0 !important;
                padding-top: 2px !important;
                padding-bottom: 2px !important;
            }

            /* Submenu items (level 1, 2, 3...) - Professional flat design */
            body #id-left div.vmenu .tree-submenu .menu_contenu1,
            body #id-left div.vmenu .tree-submenu .menu_contenu2,
            body #id-left div.vmenu .tree-submenu .menu_contenu3 {
                padding: 0 !important;
                margin: 0 !important;
                border-radius: 0 !important;
                font-size: 13px !important;
                background: transparent !important;
                position: relative !important;
            }

            /* Submenu links - matching main menu style */
            body #id-left div.vmenu .tree-submenu a.vsmenu {
                display: flex !important;
                align-items: center !important;
                color: #6b7280 !important;
                text-decoration: none !important;
                padding: 10px 16px 10px 48px !important;
                margin: 0 !important;
                border-radius: 0 !important;
                transition: all 0.15s ease !important;
                font-weight: 400 !important;
                border-left: 3px solid transparent !important;
            }

            /* Submenu link hover */
            body #id-left div.vmenu .tree-submenu a.vsmenu:hover {
                background-color: #f9fafb !important;
                color: #111827 !important;
            }

            /* Active submenu item - same style as main menu */
            body #id-left div.vmenu .tree-submenu div[data-actif="nc_actif_element"],
            body #id-left div.vmenu .tree-submenu a[data-actif="nc_actif_element"] {
                background-color: #e0f2f1 !important;
                color: #374151 !important;
                font-weight: 600 !important;
                border-left: 3px solid #00897b !important;
            }

            body #id-left div.vmenu .tree-submenu div[data-actif="nc_actif_element"] a,
            body #id-left div.vmenu .tree-submenu a[data-actif="nc_actif_element"] {
                color: #374151 !important;
            }

            /* Level 2 and 3 indentation */
            body #id-left div.vmenu .tree-submenu .menu_contenu2 a.vsmenu {
                padding-left: 64px !important;
            }

            body #id-left div.vmenu .tree-submenu .menu_contenu3 a.vsmenu {
                padding-left: 80px !important;
            }

            /* Colorful Icons - Professional Style */
            body #id-left div.vmenu li.menu_titre>a .mainmenuaspan,
            body #id-left div.vmenu li.menu_titre>a .icon-companies,
            body #id-left div.vmenu li.menu_titre>a .icon-project,
            body #id-left div.vmenu li.menu_titre>a [class*="icon-"],
            body #id-left div.vmenu li.menu_titre>a .mainvmenu,
            body #id-left div.vmenu li.menu_titre>a div[class*="icon-"] {
                margin-right: 12px !important;
                width: 24px !important;
                height: 24px !important;
                text-align: center !important;
                font-size: 18px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex-shrink: 0 !important;
                opacity: 1 !important;
                filter: none !important;
            }

            /* Icon container styling for colorful icons */
            body #id-left div.vmenu li.menu_titre>a .tmenuimage,
            body #id-left div.vmenu li.menu_titre>a div.mainvmenu,
            body #id-left div.vmenu li.menu_titre>a div[class*="icon-"] {
                background: transparent !important;
                border-radius: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                margin-right: 12px !important;
            }

            /* Ensure icons maintain their colors (no grayscale) - Override all filters */
            body #id-left div.vmenu li.menu_titre>a img,
            body #id-left div.vmenu li.menu_titre>a .tmenuimage img,
            body #id-left .vmenu li.menu_titre>a img,
            body #id-left .vmenu li.tmenu a.tmenuimage img,
            body #id-left .vmenu li.tmenusel a.tmenuimage img {
                filter: none !important;
                -webkit-filter: none !important;
                width: 24px !important;
                height: 24px !important;
                object-fit: contain !important;
            }

            /* Font Awesome icons - keep colorful, override white color */
            body #id-left div.vmenu li.menu_titre>a .fa,
            body #id-left div.vmenu li.menu_titre>a [class*="fa-"],
            body #id-left .vmenu li.tmenu a.tmenuimage .fa,
            body #id-left .vmenu li.tmenusel a.tmenuimage .fa {
                color: inherit !important;
                font-size: 18px !important;
            }

            /* Remove icon container backgrounds - let icons show naturally */
            body #id-left .vmenu li.tmenu a.tmenuimage,
            body #id-left .vmenu li.tmenusel a.tmenuimage {
                background-color: transparent !important;
                border-radius: 0 !important;
                width: 24px !important;
                height: 24px !important;
                margin-right: 12px !important;
            }

            /* Ensure icon containers don't have backgrounds */
            body #id-left div.vmenu li.menu_titre>a .tmenuimage,
            body #id-left div.vmenu li.menu_titre>a div.mainvmenu,
            body #id-left div.vmenu li.menu_titre>a div[class*="icon-"] {
                background: transparent !important;
                border-radius: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                margin-right: 12px !important;
            }

            /* Remove old submenu panel styles */
            body .becreativesubmenus {
                display: none !important;
            }

            /* Hide the old submenu trigger */
            body .becreativeshowsubmenus {
                display: none !important;
            }

            /* Additional tree menu enhancements */
            body #id-left div.vmenu li.menu_titre.has-children>a {
                cursor: pointer !important;
            }

            /* Smooth transitions for all menu interactions */
            body #id-left div.vmenu * {
                transition: background-color 0.15s ease, color 0.15s ease !important;
            }

            /* Ensure submenu items are properly styled */
            body #id-left div.vmenu .tree-submenu .menu_contenu1>a,
            body #id-left div.vmenu .tree-submenu .menu_contenu2>a,
            body #id-left div.vmenu .tree-submenu .menu_contenu3>a {
                display: block !important;
            }

            /* Fix for menu items without links */
            body #id-left div.vmenu .tree-submenu .menu_contenu1>span.vsmenu,
            body #id-left div.vmenu .tree-submenu .menu_contenu2>span.vsmenu,
            body #id-left div.vmenu .tree-submenu .menu_contenu3>span.vsmenu {
                display: block !important;
                padding: 6px 8px !important;
                color: #6b7280 !important;
            }

            /* Menu separator/divider styling */
            body #id-left div.vmenu .menu_top,
            body #id-left div.vmenu .menu_end {
                display: none !important;
            }

            /* Ensure proper spacing between menu groups */
            body #id-left div.vmenu .blockvmenu {
                margin-bottom: 0 !important;
            }

            /* Remove any borders or shadows from menu items */
            body #id-left div.vmenu li.menu_titre>a,
            body #id-left div.vmenu .tree-submenu a.vsmenu {
                box-shadow: none !important;
                border-top: none !important;
                border-right: none !important;
                border-bottom: none !important;
            }

            /* Clean, professional typography */
            body #id-left div.vmenu {
                font-size: 14px !important;
                line-height: 1.5 !important;
            }

            /* Ensure menu items have consistent height */
            body #id-left div.vmenu li.menu_titre {
                min-height: 44px !important;
            }

            body #id-left div.vmenu li.menu_titre>a {
                min-height: 44px !important;
            }

            /* Active parent menu item styling when child is active */
            body #id-left div.vmenu li.menu_titre.expanded>a {
                color: #374151 !important;
            }

            body #id-left div.vmenu li.menu_titre.expanded:not(.active)>a {
                background-color: transparent !important;
            }

            /* Ensure text color is dark gray for all menu items */
            body #id-left div.vmenu li.menu_titre>a,
            body #id-left div.vmenu li.menu_titre>a span.mainmenuaspan {
                color: #374151 !important;
            }

            /* Remove any white text on active items - keep dark gray */
            body #id-left div.vmenu li.menu_titre>a.vsmenu.tmenusel,
            body #id-left div.vmenu li.tmenusel>a,
            body #id-left div.vmenu a[data-actif="nc_actif_element"] {
                color: #374151 !important;
            }