<style>
    @viewport {
        width: device-width;
        zoom: 1.0;
    }

    /* 06/2021 : supprimer le message Slow network is detected. Fallback font will be used while loading fa-solid-900.woff2 */
    /* * {        font-display: block;    } */


    .drop_zone_doliplus {
        border: 2px dashed #ccc;
        border-radius: 20px;
        width: 60%;
        height: 100px;
        padding-top: 10px;
        padding-left: 3px;
        padding-bottom: 5px;
        text-align: center;
        margin: 10px auto;
    }

    /* ============================================================================== */
    /* Styles par defaut                                                             */
    /* ============================================================================== */

    body {
        margin-top: 0;
        color: #101010;
        font-size: 12px;
        font-family: arial,tahoma,verdana,helvetica;
        margin-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        text-align: left;
        direction: ltr;
    }

    a:link,
    a:visited,
    a:active {
        font-family: arial,tahoma,verdana,helvetica;
        font-weight: bold;
        color: #27277c;
        text-decoration: none;
    }

    a:hover {
        font-family: arial,tahoma,verdana,helvetica;
        font-weight: bold;
        color: #909DAD;
        text-decoration: none;
    }

    input {
        font-size: 12px;
        font-family: arial,tahoma,verdana,helvetica;
        background: #f2f6ee;
        border: 1px solid #ACBCBB;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    input.flat {
        font-size: 12px;
        font-family: arial,tahoma,verdana,helvetica;
        background-color: #f2f6ee;
        background-image: linear-gradient(to bottom, #f2f6ee, #E8EDF3);
        border: 1px solid #ACBCBB;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    /* SelectAutocomplet lib/lib_head.js */
    input.flat-combobox-doli {
        font-size: 12px ! important;;
        font-family: arial,tahoma,verdana,helvetica ! important;;
        background-color: #f2f6ee ! important;
        background-image: linear-gradient(to bottom, #f2f6ee, #E8EDF3);
        line-height: 13.7px ! important;
        border: 1.5px solid #ACBCBB ! important;
    }
    /* SelectAutocomplet lib/lib_head.js */
    .ui-button-icon-doli{
        padding-top: -0.7px ! important;
        padding-bottom: 0.7px ! important;
    }

    input:disabled {
        background: #ddd;
    }

    textarea {
        font-size: 12px;
        font-family: arial,tahoma,verdana,helvetica;
        background: #f2f6ee;
        border: 1px solid #ACBCBB;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    textarea.flat {
        font-size: 12px;
        font-family: arial,tahoma,verdana,helvetica;
        background: #f2f6ee;
        border: 1px solid #ACBCBB;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    textarea:disabled {
        background: #ddd;
    }

    select.flat {
        background: #f2f6ee;
        font-size: 12px;
        font-family: arial,tahoma,verdana,helvetica;
        font-weight: normal;
        border: 1px solid #ACBCBB;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    input.button[type=submit],
    input.button[type=button] {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-weight: bold;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        border: 1px solid #b4c4d8;
        color: #27433f;
        padding: 4px 10px;
        margin: 4px 10px;
        text-decoration: none;
        white-space: nowrap;
        font-size: 13px;
        display: inline-block;
        cursor: pointer;
            }

    input.button[type=submit]:hover,
    input.button[type=button]:hover {
        background-color: #DAE2EC;
        color: #FFFFFF;
        font-size: 13px;
    }

    .button {
        font-family: arial,tahoma,verdana,helvetica;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        border: 1px solid #ACBCBB;
        padding: 4px 10px;
        margin: 0px 0px 0px 0px;
    }

    .button:focus {
        font-family: arial,tahoma,verdana,helvetica;
        color: #222244;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        border: 1px solid #ACBCBB;
        padding: 0px 2px 0px 2px;
        margin: 0px 0px 0px 0px;
    }

    .buttonajax {
        font-family: arial,tahoma,verdana,helvetica;
        font-size: 13px;
        border: 0px;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    form {
        padding: 0em 0em 0em 0em;
        margin: 0em 0em 0em 0em;
    }

    div.float {
        float: left;
    }

    /* For hide object and add pointer cursor */

    .hideobject {
        display: none;
    }

    .linkobject {
        cursor: pointer;
    }

    /* For dragging lines */

    .dragClass {
        color: #002255;
    }

    td.showDragHandle {
        cursor: move;
    }

    .tdlineupdown {
        white-space: nowrap;
    }


    /* ============================================================================== */
    /* Styles de positionnement des zones                                             */
    /* ============================================================================== */
    div.leftContent {
        margin-left: 0px !important;
        width: 200px !important;
        background-color: #FFF;
    }


    td.vmenu {
        margin-right: 2px;
        padding: 0px;
        padding-bottom: 0px;
        padding-top: 1px;
        width: 200px;
    }

    div.fiche {
        margin-left: 5px;
        margin-right: 5px;
        */
    }

    /* ============================================================================== */
    /* New                                                 */
    /* ============================================================================== */

    .center {
        text-align: center;
        margin: 10px auto;
    }

    .left {
        text-align: left;
    }

    .right {
        text-align: right;
    }

    .justify {
        text-align: justify;
    }

    div.fichecenter {
        width: 100%;
        clear: both;
    }

    div.fichecenterbis {
        margin-top: 8px;
    }


 /* Divs 70 - 30 % */
 div.fiche_third_left {
        float: left;
width: 70%;
padding-bottom: 6px;
}

 div.fiche_two_third_right {
        float: right;
width: 30%;
padding-bottom: 6px
}

/* Divs 30 - 70 % */
    div.fichethirdleft {
        float: left;
width: 30%;
padding-bottom: 6px;
    }

    div.fichetwothirdright {
        float: right;
width: 70%;
padding-bottom: 6px
    }
/* Divs 50 - 50 % */
    div.fichehalfleft {
        float: left;
width: 50%;
padding-bottom: 6px;
    }

    div.fichehalfright {
        float: right;
width: 50%;
padding-bottom: 6px
    }

    div.ficheaddleft {
        padding-left: 11px;
    }

    .table100 {
            }

    div.undercard {
        border-bottom: 1px solid rgb(#909DAD);
        clear: both;
    }

    /* Force values on one colum for small screen */
    @media only screen and (max-width: 1000px) {

        div.fichecenter {
            width: 100%;
            clear: both;
        }

        div.fichecenterbis {
            margin-top: 8px;
        }

        div.fichethirdleft {
            float: none;
            width: auto;
            padding-bottom: 6px;
        }

        div.fichetwothirdright {
            float: none;
            width: auto;
            padding-bottom: 6px;
        }

        div.fichehalfleft {
            float: none;
            width: auto;
        }

        div.fichehalfright {
            float: none;
            width: auto;
        }

        div.ficheaddleft {
            padding-left: 0px;
margin-top: 10px;
        }
    }

    /* ============================================================================== */
    /* Overide jquery datepicker                                               */
    /* ============================================================================== */

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active {
        border: 1px solid #909DAD;
        background: #909DAD;
        font-weight: normal;
        color: #FFFFFF;
    }


    /* modig gp  .ui-datepicker-today  https://stackoverflow.com/questions/15005263/how-to-change-default-highlighted-today-date-in-datepicker */
    .ui-state-default .ui-state-highlight {
        border: 1px solid #dad55e;
        background: #dad55e;
        color: #777620;
    }

    /* ============================================================================== */
    /* Menu top et 1ere ligne tableau                                                 */
    /* ============================================================================== */

    div.tmenu {
        min-height: 65px;
        padding: 0px 50px 0px 0px;
        position: relative;
        display: block;
        white-space: nowrap;
        border-bottom: none;
        /* t r b l */
        /* margin: 0px 30px 0px 0px; */
        font-weight: normal;
        background: #FFF;
        color: #000;
        text-decoration: none;
            }

    #undertopmenu {
        margin-bottom: 150px !important;
    }

    table.tmenu {
        padding: 0px 0px 5px 0px;
        /* t r b l */
        margin: 0px 0px 0px 0px;
        /* t r b l */
        text-align: center;
    }

    td.tmenu {
        width: 70px;text-align: center;
        vertical-align: bottom;
        white-space: nowrap;
        height: 20px;
    }

    a.tmenudisabled:link,
    a.tmenudisabled:visited,
    a.tmenudisabled:hover,
    a.tmenudisabled:active {
        color: #757575;
        font-weight: normal;
        padding: 0px 5px 0px 5px;
        margin: 0px 1px 2px 1px;
        cursor: not-allowed;
        white-space: nowrap;
    }

    a.tmenu:link,
    a.tmenu:visited,
    a.tmenu:hover,
    a.tmenu:active {
        color: #27433f;
        padding: 0px 10px 0px 10px;
        /*margin: 0px 1px 0px 1px;*/
        < !--font-weight: bold;
        -->font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        white-space: nowrap;
        height: 20px;

        border-right: 1px solid #555555;
        border-bottom: 0px solid #555555;
        border-left: 1px solid #D0D0D0;
        border-top: 1px solid #D8D8D8;

        border: 1px solid #909DAD;
        background-color: #b4c4d8;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8) !important;
    }

    a.tmenu:hover,
    a.tmenu:active {
        color: #FFFFFF;
        border-right: 1px solid #555555;
        border-bottom: 0px solid #555555;
        border-left: 1px solid #D0D0D0;
        border-top: 1px solid #D8D8D8;
        background: #b4c4d8;
        /* old browsers */
    }

    a.tmenusel:link,
    a.tmenusel:visited,
    a.tmenusel:hover,
    a.tmenusel:active {
        color: #FFFFFF;
        font-weight: bold;
        height: 20px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        padding: 0px 10px 0px 10px;
        border-right: 1px solid #555555;
        border-bottom: 0px solid #555555;
        border-left: 1px solid #D0D0D0;
        border-top: 1px solid #D8D8D8;
        background: #b4c4d8;
        /* old browsers */
    }


    ul.tmenu {
        /* t r b l */
        padding: 0px 0px 10px 0px;
        margin: 0px 0px 0px 6px;
        list-style: none;
    }

    li.tmenu {
        text-align: center;
        vertical-align: top;
        float: left;
        height: 47px;
        display: block;
        padding: 1px 2px 0px 2px;
        margin: 0px 0px 0px 0px;
        font-weight: normal;
    }



    .gecko li.tmenu {
        /* uniquement pour firefox */
        padding: 4px 2px 4px 2px;
        margin: 0px 0px 0px 0px;
    }


    div.mainmenu {
        position: relative;
        color: white;
        background-repeat: no-repeat;
        background-position: center top;
        height: 28px;
        margin-left: 0px;
    }

    div.mainmenu.home {
        background-image: url(/htdocs/theme/common/img/menus/home.png);
    }

    div.mainmenu.companies {
        background-image: url(/htdocs/theme/common/img/menus/company.png);
    }

    div.mainmenu.members {
        background-image: url(/htdocs/theme/common/img/menus/members.png);
    }

    div.mainmenu.products {
        background-image: url(/htdocs/theme/common/img/menus/products.png);
        margin-left: 10px;
    }

    div.mainmenu.commercial {
        background-image: url(/htdocs/theme/common/img/menus/commercial.png);
    }

    div.mainmenu.accountancy {
        background-image: url(/htdocs/theme/common/img/menus/money.png);
    }

    div.mainmenu.bank {
        background-image: url(/htdocs/theme/common/img/menus/bank.png);
    }

    div.mainmenu.project {
        background-image: url(/htdocs/theme/common/img/menus/project.png);
    }

    div.mainmenu.tools {
        background-image: url(/htdocs/theme/common/img/menus/tools.png);
    }

    div.mainmenu.ftp {
        background-image: url(/htdocs/theme/common/img/menus/tools.png);
    }

    div.mainmenu.members {
        background-image: url(/htdocs/theme/common/img/menus/members.png);
    }

    div.mainmenu.shop {
        background-image: url(/htdocs/theme/common/img/menus/shop.png);
    }

    div.mainmenu.agenda {
        background-image: url(/htdocs/theme/common/img/menus/agenda.png);
    }

    div.mainmenu.ecm {
        background-image: url(/htdocs/theme/common/img/menus/ecm.png);
    }

    div.mainmenu.cashdesk {
        background-image: url(/htdocs/theme/common/img/menus/pointofsale.png);
    }

    div.mainmenu.webcal {
        background-image: url(/htdocs/theme/common/img/menus/agenda.png);
    }

    /* A mainmenu entry but img file support.png not found, so we use a generic one */
div.mainmenu.support {
	background-image: url(/htdocs/custom/support/img/support.png);
	height:28px;
}
/* A mainmenu entry but img file magicmenu.png not found, so we use a generic one */
div.mainmenu.magicmenu {
	background-image: url(/htdocs/custom/magicmenu/img/magicmenu.png);
	height:28px;
}
/* A mainmenu entry but img file multicompany.png not found, so we use a generic one */
div.mainmenu.multicompany {
	background-image: url(/htdocs/custom/multicompany/img/multicompany.png);
	height:28px;
}
/* A mainmenu entry but img file googlemaps.png not found, so we use a generic one */
div.mainmenu.googlemaps {
	background-image: url(/htdocs/custom/googlemaps/img/googlemaps.png);
	height:28px;
}
/* A mainmenu entry but img file accountingex.png not found, so we use a generic one */
div.mainmenu.accountingex {
	background-image: url(/htdocs/custom/accountingex/img/accountingex.png);
	height:28px;
}
/* A mainmenu entry but img file contacts.png not found, so we use a generic one */
div.mainmenu.contacts {
	background-image: url(/htdocs/custom/contacts/img/contacts.png);
	height:28px;
}
/* A mainmenu entry but img file incoterm.png not found, so we use a generic one */
div.mainmenu.incoterm {
	background-image: url(/htdocs/custom/incoterm/img/incoterm.png);
	height:28px;
}
/* A mainmenu entry but img file multicurrency.png not found, so we use a generic one */
div.mainmenu.multicurrency {
	background-image: url(/htdocs/custom/multicurrency/img/multicurrency.png);
	height:28px;
}
/* A mainmenu entry but img file speedfinder.png not found, so we use a generic one */
div.mainmenu.speedfinder {
	background-image: url(/htdocs/custom/speedfinder/img/speedfinder.png);
	height:28px;
}
/* A mainmenu entry but img file cron.png not found, so we use a generic one */
div.mainmenu.cron {
	background-image: url(/htdocs/custom/cron/img/cron.png);
	height:28px;
}
/* A mainmenu entry but img file caldav.png not found, so we use a generic one */
div.mainmenu.caldav {
	background-image: url(/htdocs/custom/caldav/img/caldav.png);
	height:28px;
}
/* A mainmenu entry but img file shippableorder.png not found, so we use a generic one */
div.mainmenu.shippableorder {
	background-image: url(/htdocs/custom/shippableorder/img/shippableorder.png);
	height:28px;
}
/* A mainmenu entry but img file product.png not found, so we use a generic one */
div.mainmenu.product {
	background-image: url(/htdocs/theme/'. common.'/img/menus/generic1.png);
	height:28px;
}
/* A mainmenu entry but img file milestone.png not found, so we use a generic one */
div.mainmenu.milestone {
	background-image: url(/htdocs/custom/milestone/img/milestone.png);
	height:28px;
}
/* A mainmenu entry but img file bankimport.png not found, so we use a generic one */
div.mainmenu.bankimport {
	background-image: url(/htdocs/custom/bankimport/img/bankimport.png);
	height:28px;
}
/* A mainmenu entry but img file myfield.png not found, so we use a generic one */
div.mainmenu.myfield {
	background-image: url(/htdocs/theme/'. common.'/img/menus/generic2.png);
	height:28px;
}
/* A mainmenu entry but img file mobile.png not found, so we use a generic one */
div.mainmenu.mobile {
	background-image: url(/htdocs/custom/mobile/img/mobile.png);
	height:28px;
}
/* A mainmenu entry but img file marges.png not found, so we use a generic one */
div.mainmenu.marges {
	background-image: url(/htdocs/theme/'. common.'/img/menus/generic3.png);
	height:28px;
}
/* A mainmenu entry but img file commission.png not found, so we use a generic one */
div.mainmenu.commission {
	background-image: url(/htdocs/theme/'. common.'/img/menus/generic4.png);
	height:28px;
}
/* A mainmenu entry but img file factory.png not found, so we use a generic one */
div.mainmenu.factory {
	background-image: url(/htdocs/custom/factory/img/factory.png);
	height:28px;
}
/* A mainmenu entry but img file barcodeplus.png not found, so we use a generic one */
div.mainmenu.barcodeplus {
	background-image: url(/htdocs/custom/barcodeplus/img/barcodeplus.png);
	height:28px;
}
/* A mainmenu entry but img file notifi.png not found, so we use a generic one */
div.mainmenu.notifi {
	background-image: url(/htdocs/custom/notifi/img/notifi.png);
	height:28px;
}
/* A mainmenu entry but img file cr.png not found, so we use a generic one */
div.mainmenu.cr {
	background-image: url(/htdocs/custom/cr/img/cr.png);
	height:28px;
}
/* A mainmenu entry but img file marketing.png not found, so we use a generic one */
div.mainmenu.marketing {
	background-image: url(/htdocs/custom/marketing/img/marketing.png);
	height:28px;
}
/* A mainmenu entry but img file cloud.png not found, so we use a generic one */
div.mainmenu.cloud {
	background-image: url(/htdocs/custom/cloud/img/cloud.png);
	height:28px;
}
/* A mainmenu entry but img file linkweb.png not found, so we use a generic one */
div.mainmenu.linkweb {
	background-image: url(/htdocs/custom/linkweb/img/linkweb.png);
	height:28px;
}
/* A mainmenu entry but img file esign.png not found, so we use a generic one */
div.mainmenu.esign {
	background-image: url(/htdocs/custom/esign/img/esign.png);
	height:28px;
}
/* A mainmenu entry but img file formulaire.png not found, so we use a generic one */
div.mainmenu.formulaire {
	background-image: url(/htdocs/custom/formulaire/img/formulaire.png);
	height:28px;
}
/* A mainmenu entry but img file stockplus.png not found, so we use a generic one */
div.mainmenu.stockplus {
	background-image: url(/htdocs/custom/stockplus/img/stockplus.png);
	height:28px;
}
/* A mainmenu entry but img file calling.png not found, so we use a generic one */
div.mainmenu.calling {
	background-image: url(/htdocs/custom/calling/img/calling.png);
	height:28px;
}
/* A mainmenu entry but img file outils.png not found, so we use a generic one */
div.mainmenu.outils {
	background-image: url(/htdocs/custom/outils/img/outils.png);
	height:28px;
}
/* A mainmenu entry but img file projetplus.png not found, so we use a generic one */
div.mainmenu.projetplus {
	background-image: url(/htdocs/custom/projetplus/img/projetplus.png);
	height:28px;
}
/* A mainmenu entry but img file categorycontact.png not found, so we use a generic one */
div.mainmenu.categorycontact {
	background-image: url(/htdocs/custom/categorycontact/img/categorycontact.png);
	height:28px;
}
/* A mainmenu entry but img file lead.png not found, so we use a generic one */
div.mainmenu.lead {
	background-image: url(/htdocs/custom/lead/img/lead.png);
	height:28px;
}
/* A mainmenu entry but img file inventory.png not found, so we use a generic one */
div.mainmenu.inventory {
	background-image: url(/htdocs/custom/inventory/img/inventory.png);
	height:28px;
}
/* A mainmenu entry but img file archives.png not found, so we use a generic one */
div.mainmenu.archives {
	background-image: url(/htdocs/custom/archives/img/archives.png);
	height:28px;
}
/* A mainmenu entry but img file catalogue.png not found, so we use a generic one */
div.mainmenu.catalogue {
	background-image: url(/htdocs/custom/catalogue/img/catalogue.png);
	height:28px;
}
/* A mainmenu entry but img file ndfp.png not found, so we use a generic one */
div.mainmenu.ndfp {
	background-image: url(/htdocs/custom/ndfp/img/ndfp.png);
	height:28px;
}
/* A mainmenu entry but img file box.png not found, so we use a generic one */
div.mainmenu.box {
	background-image: url(/htdocs/custom/box/img/box.png);
	height:28px;
}
/* A mainmenu entry but img file statistic.png not found, so we use a generic one */
div.mainmenu.statistic {
	background-image: url(/htdocs/custom/statistic/img/statistic.png);
	height:28px;
}
/* A mainmenu entry but img file moncloud.png not found, so we use a generic one */
div.mainmenu.moncloud {
	background-image: url(/htdocs/custom/moncloud/img/moncloud.png);
	height:28px;
}
/* A mainmenu entry but img file tri.png not found, so we use a generic one */
div.mainmenu.tri {
	background-image: url(/htdocs/custom/tri/img/tri.png);
	height:28px;
}
/* A mainmenu entry but img file carddav.png not found, so we use a generic one */
div.mainmenu.carddav {
	background-image: url(/htdocs/custom/carddav/img/carddav.png);
	height:28px;
}
/* A mainmenu entry but img file sepa.png not found, so we use a generic one */
div.mainmenu.sepa {
	background-image: url(/htdocs/custom/sepa/img/sepa.png);
	height:28px;
}
/* A mainmenu entry but img file sendinblue.png not found, so we use a generic one */
div.mainmenu.sendinblue {
	background-image: url(/htdocs/custom/sendinblue/img/sendinblue.png);
	height:28px;
}
/* A mainmenu entry but img file grh.png not found, so we use a generic one */
div.mainmenu.grh {
	background-image: url(/htdocs/custom/grh/img/grh.png);
	height:28px;
}
/* A mainmenu entry but img file ticketsup.png not found, so we use a generic one */
div.mainmenu.ticketsup {
	background-image: url(/htdocs/custom/ticketsup/img/ticketsup.png);
	height:28px;
}
/* A mainmenu entry but img file office.png not found, so we use a generic one */
div.mainmenu.office {
	background-image: url(/htdocs/custom/office/img/office.png);
	height:28px;
}
/* A mainmenu entry but img file sepavir.png not found, so we use a generic one */
div.mainmenu.sepavir {
	background-image: url(/htdocs/custom/sepavir/img/sepavir.png);
	height:28px;
}
/* A mainmenu entry but img file resource.png not found, so we use a generic one */
div.mainmenu.resource {
	background-image: url(/htdocs/custom/resource/img/resource.png);
	height:28px;
}
/* A mainmenu entry but img file messagerie.png not found, so we use a generic one */
div.mainmenu.messagerie {
	background-image: url(/htdocs/custom/messagerie/img/messagerie.png);
	height:28px;
}
/* A mainmenu entry but img file maintenance.png not found, so we use a generic one */
div.mainmenu.maintenance {
	background-image: url(/htdocs/custom/maintenance/img/maintenance.png);
	height:28px;
}
.tmenuimage {
        padding: 0 0 0 0 !important;
        margin: 0 0px 0 0 !important;
    }

    /* Login */
    div.login {
        position: absolute;
        top: 3px;
        white-space: nowrap;
        font-weight: bold;
        ;
        right: 5px;
    }

    /* voir aussi 3682 pour mobile  */
    div.login_block {
        position: relative;
        float: right;
        margin-right: 5px;
        margin-bottom: 10px;
        margin-top: 1px;
        font-weight: bold;
        ;
            }

    div.login a {
        color: #234046;
    }

    div.login a:hover {
        color: black;
        text-decoration: underline;
    }

    img.login,
    img.printer,
    img.entity {
        padding: 8px 0px 0px 0px;
        margin: 0px 0px 0px 8px;
        text-decoration: none;
        color: white;
        font-weight: bold;
    }

    img.entity {
        cursor: pointer;
    }

    /* ============================================================================== */
    /* Menu gauche                                                                    */
    /* ============================================================================== */

    a.vmenu:link {
        font-size: 12px;
        text-align: left;
        font-weight: normal;
        color: #FFFFFF;
        margin: 1px 1px 1px 4px;
    }

    a.vmenu:visited {
        font-size: 12px;
        text-align: left;
        font-weight: normal;
        color: #FFFFFF;
        margin: 1px 1px 1px 4px;
    }

    a.vmenu:active {
        font-size: 12px;
        text-align: left;
        font-weight: normal;
        color: #FFFFFF;
        margin: 1px 1px 1px 4px;
    }

    a.vmenu:hover {
        font-size: 12px;
        text-align: left;
        font-weight: normal;
        color: #d7ffac;
        margin: 1px 1px 1px 4px;
    }

    font.vmenudisabled {
        font-size: 12px;
        text-align: left;
        font-weight: normal;
        color: #FFFFFF;
        margin: 1px 1px 1px 4px;
    }

    a.vsmenu:link {
        font-size: 11px;
        text-align: left;
        font-weight: normal;
        color: #202020;
        margin: 1px 1px 1px 4px;
    }

    a.vsmenu:visited {
        font-size: 11px;
        text-align: left;
        font-weight: normal;
        color: #202020;
        margin: 1px 1px 1px 4px;
    }

    a.vsmenu:active {
        font-size: 11px;
        text-align: left;
        font-weight: normal;
        color: RGB(94, 148, 181);
        margin: 1px 1px 1px 4px;
    }

    a.vsmenu:hover {
        font-size: 11px;
        text-align: left;
        font-weight: normal;
        color: #7F0A29;
        margin: 1px 1px 1px 4px;
    }

    font.vsmenudisabled {
        font-size: 11px;
        text-align: left;
        font-weight: normal;
        color: #202020;
        margin: 1px 1px 1px 4px;
    }

    a.help:link {
        font-size: 10px;
        font-weight: bold;
        background: #FFFFFF;
        border: 1px solid #8CACBB;
        color: #68ACCF;
        padding: 0em 0.7em;
        margin: 0em 0.5em;
        text-decoration: none;
        white-space: nowrap;
    }

    a.help:visited {
        font-size: 10px;
        font-weight: bold;
        background: #FFFFFF;
        border: 1px solid #8CACBB;
        color: #68ACCF;
        padding: 0em 0.7em;
        margin: 0em 0.5em;
        text-decoration: none;
        white-space: nowrap;
    }

    a.help:active {
        font-size: 10px;
        font-weight: bold;
        background: #FFFFFF;
        border: 1px solid #8CACBB;
        color: #6198BA;
        padding: 0em 0.7em;
        margin: 0em 0.5em;
        text-decoration: none;
        white-space: nowrap;
    }

    a.help:hover {
        font-size: 10px;
        font-weight: bold;
        background: #FFFFFF;
        border: 1px solid #8CACBB;
        color: #6198BA;
        padding: 0em 0.7em;
        margin: 0em 0.5em;
        text-decoration: none;
        white-space: nowrap;
    }



    div.blockvmenupair {

        background-position: top right;
        vertical-align: text-top;
        border-bottom: 1px solid #D0D0D0;
        border-left: 1px solid #D0D0D0;
        border-right: 1px solid #D0D0D0;
        border-top: 1px solid #D0D0D0;
        border: 1px solid #D0D0D0;

        border-spacing: 0px 0px;
        padding: 0 0px 8px 0px;
        width: 200px;
    }

    div.blockvmenuimpair {

        background-position: top right;
        vertical-align: text-top;
        border-bottom: 1px solid #D0D0D0;
        border-left: 1px solid #D0D0D0;
        border-right: 1px solid #D0D0D0;
        border-top: 1px solid #D0D0D0;
        border: 1px solid #D0D0D0;
        border-spacing: 0px 0px;
        padding: 0 0px 8px 0px;
        width: 200px;
    }

    img.logocompany {
        margin-top: 22px;
        border-spacing: 0px;
        padding: 0px;
    }

    div.blockvmenuimpair form a.vmenu,
    div.blockvmenupair form a.vmenu {
        width: 166px;
        border-spacing: 0px;
        color: #000000;
        text-align: left;
        text-decoration: none;
        padding: 4px;
        margin: 0px;
        background: #FFFFFF;
        margin-bottom: -12px;
    }

    div.menu_titre {
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        background-position: top right;
        vertical-align: text-top;
        margin: 5px 0px;
        padding: 4px 0px;
        text-align: left;
        font-size: 12px;
        color: #FFFFFF;
        font-weight: bold;

    }

    div.menu_titre a.vmenu {
        font-weight: bold;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #234046;
    }

    div.menu_titre a.vmenu:hover {
        font-weight: bold;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #FFFFFF;

    }

    div.blockvmenusearch {

        background-position: top right;
        vertical-align: text-top;
        border-bottom: 1px solid #D0D0D0;
        border-left: 1px solid #D0D0D0;
        border-right: 1px solid #D0D0D0;
        border-top: 1px solid #D0D0D0;
        border: 1px solid #D0D0D0;
        border-spacing: 0px 0px;
        margin: 3px 0px 15px 0px;
        padding: 25px 0px 2px 2px;
        width: 200px;

    }

    div.blockvmenusearch input[type="text"] {
        float: left;
        width: 130px;
        border: 1px solid #333;
        font-size: 10px;
        height: 16px;
    }

    div.blockvmenusearch input.button[type="submit"] {
        float: left;

        padding-right: 10px !important;
        padding-left: 10px !important;
        padding-bottom: 1px !important;
        padding-top: 1px !important;

        margin-right: 0px !important;
        margin-left: 10px !important;
        margin-bottom: 0px !important;
        margin-top: 0px !important;
    }

    div.blockvmenusearch div.menu_titre {
        margin-top: 5px;
    }

    #blockvmenusearch div.menu_titre,
    #blockvmenusearch form {
        padding-top: 1px;
        padding-bottom: 1px;
        height: 20px;
    }


    div.blockvmenubookmarks {

        background-position: top right;
        vertical-align: text-top;
        border-bottom: 1px solid #D0D0D0;
        border-left: 1px solid #D0D0D0;
        border-right: 1px solid #D0D0D0;
        border-top: 1px solid #D0D0D0;
        border: 1px solid #D0D0D0;
        margin: 0px;
        border-spacing: 0px;
        padding: 0px;
        margin-bottom: 15px;
    }

    div.blockvmenuhelp {
        text-align: center;
        border-spacing: 0px;
        width: 162px;
        background: transparent;
        font-family: arial,tahoma,verdana,helvetica;
        color: #000000;
        text-decoration: none;
        padding-left: 0px;
        padding-right: 1px;
        padding-top: 3px;
        padding-bottom: 3px;
        margin: 1px 0px 0px 0px;
            }

    div.menu_contenu {
        margin: 0px;
        padding: 1px;

        padding-right: 8px;
        font-size: 11px;
        font-weight: normal;
        color: #000000;
        text-align: left;
    }

    div.menu_end {
        /*	border-top: 1px solid #436981; */
        margin: 0px;
        padding: 0px;
        height: 6px;
        width: 165px;
        background-repeat: no-repeat;
        display: none;
    }


    td.barre {
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        background: #b3c5cc;
        font-family: arial,tahoma,verdana,helvetica;
        color: #000000;
        text-align: left;
        text-decoration: none;
    }

    td.barre_select {
        background: #b3c5cc;
        color: #000000;
    }

    td.photo {
        background: #F4F4F4;
        color: #000000;
        border: 1px solid #b3c5cc;
    }


    /* ============================================================================== */
    /* Panes for Main                                                   */
    /* ============================================================================== */

    /*
    *  PANES and CONTENT-DIVs
    */

    #mainContent {}

    #mainContent,
    #leftContent .ui-layout-pane {
        padding: 0px;
        overflow: auto;
    }

    #mainContent,
    #leftContent .ui-layout-center {
        padding: 0px;
        position: relative;
        /* contain floated or positioned elements */
        overflow: auto;
        /* add scrolling to content-div */
    }

    /* ============================================================================== */
    /* Barre de redmiensionnement menu                                                */
    /* ============================================================================== */

    .ui-layout-resizer-west-open {
        /*left: 200px !important;*/
    }

    .ui-layout-north {
        height: 57px !important;
    }

    /* ============================================================================== */
    /* Toolbar for ECM or Filemanager                                                 */
    /* ============================================================================== */

    .toolbar {
        border: 1px solid #BBB !important;
    }

    .toolbarbutton {
        margin-top: 2px;
        margin-left: 4px;
        /*    border: solid 1px #AAAAAA;
        width: 34px;*/
        height: 34px;
        /*    background: #FFFFFF;*/
    }


    /* ============================================================================== */
    /* Panes for ECM or Filemanager                                                   */
    /* ============================================================================== */

    #containerlayout .layout-with-no-border {
        border: 0 !important;
        border-width: 0 !important;
    }

    #containerlayout .layout-padding {
        padding: 2px !important;
    }

    /*
    *  PANES and CONTENT-DIVs
    */
    #containerlayout .ui-layout-pane {
        /* all 'panes' */
        background: #FFF;
        border: 1px solid #BBB;
        /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
        otherwise you may get double-scrollbars - on the pane AND on the content-div
        */
        padding: 0px;
        overflow: auto;
    }

    /* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
    #containerlayout .ui-layout-content {
        padding: 10px;
        position: relative;
        /* contain floated or positioned elements */
        overflow: auto;
        /* add scrolling to content-div */
    }

    /*
    *  RESIZER-BARS
    */
    .ui-layout-resizer {
        /* all 'resizer-bars' */
        background: #FFF;
        border: 1px solid #BBB;
        border-width: 0;
    }

    .ui-layout-resizer-drag {
        /* REAL resizer while resize in progress */
    }

    .ui-layout-resizer-hover {
        /* affects both open and closed states */
    }

    /* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
    otherwise color shifts while dragging when bar can't keep up with mouse */
    /*.ui-layout-resizer-open-hover ,*/
    /* hover-color to 'resize' */
    .ui-layout-resizer-dragging {
        /* resizer beging 'dragging' */
        background: #AAA;
    }

    .ui-layout-resizer-dragging {
        /* CLONED resizer being dragged */
        border-left: 1px solid #BBB;
        border-right: 1px solid #BBB;
    }

    /* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
    .ui-layout-resizer-dragging-limit {
        /* CLONED resizer at min or max size-limit */
        background: #E1A4A4;
        /* red */
    }

    .ui-layout-resizer-closed-hover {
        /* hover-color to 'slide open' */
        background: #EBD5AA;
    }

    .ui-layout-resizer-sliding {
        /* resizer when pane is 'slid open' */
        opacity: .10;
        /* show only a slight shadow */
        filter: alpha(opacity=10);
    }

    .ui-layout-resizer-sliding-hover {
        /* sliding resizer - hover */
        opacity: 1.00;
        /* on-hover, show the resizer-bar normally */
        filter: alpha(opacity=100);
    }

    /* sliding resizer - add 'outside-border' to resizer on-hover
    * this sample illustrates how to target specific panes and states */
    .ui-layout-resizer-north-sliding-hover {
        border-bottom-width: 1px;
    }

    .ui-layout-resizer-south-sliding-hover {
        border-top-width: 1px;
    }

    .ui-layout-resizer-west-sliding-hover {
        border-right-width: 1px;
    }

    .ui-layout-resizer-east-sliding-hover {
        border-left-width: 1px;
    }

    /*
    *  TOGGLER-BUTTONS
    */
    .ui-layout-toggler {
        border: 0px solid #27433f;
        /* match pane-border */
        background-color: #909DAD;
    }

    .ui-layout-resizer-hover .ui-layout-toggler {
        opacity: .60;
        filter: alpha(opacity=60);
    }

    .ui-layout-resizer-hover .ui-layout-toggler-hover {
        /* need specificity */
        background-color: #FC6;
        opacity: 1.00;
        filter: alpha(opacity=100);
    }

    .ui-layout-toggler-north,
    .ui-layout-toggler-south {
        border-width: 0 1px;
        /* left/right borders */
    }

    .ui-layout-toggler-west,
    .ui-layout-toggler-east {
        border-width: 1px 0;
        /* top/bottom borders */
    }

    /* hide the toggler-button when the pane is 'slid open' */
    .ui-layout-resizer-sliding ui-layout-toggler {
        display: none;
    }

    /*
    *  style the text we put INSIDE the togglers
    */
    .ui-layout-toggler .content {
        color: #666;
        font-size: 12px;
        font-weight: bold;
        width: 100%;
        padding-bottom: 0.35ex;
        /* to 'vertically center' text inside text-span */
    }

    .ecm-in-layout-center {
        border-left: 0px !important;
        border-right: 0px !important;
        border-top: 0px !important;
    }

    .ecm-in-layout-south {
        border-left: 0px !important;
        border-right: 0px !important;
        border-bottom: 0px !important;
        padding: 4px 0 4px 4px !important;
    }


    /* ============================================================================== */
    /* Onglets                                                                        */
    /* ============================================================================== */

    div.tabs {
        box-sizing: initial !important;
        margin: 10px 0px 0px 0px;
        text-align: left;
        vertical-align: bottom;
        width: 100%;
        background-image: linear-gradient(to bottom, "hsl(0, 0%, 99%)", hsl(0, 0%, 100%));
        height: 32px;
        border-bottom: 2px solid #909DAD;
        background-repeat: repeat-x;
        background-position: bottom;
    }

    div.tabs a.tabTitle {
        box-sizing: initial !important;
        position: relative;
        float: left;
        height: 18px;
        color: #909DAD;
        font-family: arial,tahoma,verdana,helvetica;
        font-weight: bold;
        padding: 4px 2px 0px 6px;
        margin: 0px 10px 0px 0px;
        text-decoration: none;
        white-space: nowrap;
    }

    div.tabs a.tab {
        box-sizing: initial !important;
        display: block;
        width: auto;
        font-size: 12px;
        font-weight: bold;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        height: 18px;
        background-position: right;
        line-height: 18px;
        color: #27433f;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 4px 6px;
        margin: 5px 2px 0px 2px;
        margin-bottom: 2px;
        border-right: 1px solid #555555;
        border-bottom: 0px solid #555555;
        border-left: 1px solid #D0D0D0;
        border-top: 1px solid #D8D8D8;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
    }

    div.tabs a.tab#active {
        box-sizing: initial !important;
        color: #FFFFFF;
        padding: 0px 6px 0px 6px;
        border-right: 1px solid #555555;
        border-bottom: 0px solid #555555;
        border-left: 1px solid #D0D0D0;
        border-top: 1px solid #D8D8D8;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        padding: 4px 6px;
        margin: 5px 2px 0px 2px;
    }

    div.tabs a.tab:hover {
        box-sizing: initial !important;
        color: #FFFFFF;
        border-right: 1px solid #555555;
        border-bottom: 0px solid #555555;
        border-left: 1px solid #D0D0D0;
        border-top: 1px solid #D8D8D8;
        background-color: #b4c4d8;
    }

    div.tabBar {
        box-sizing: initial !important;
        color: #234046;
        padding-top: 4px;
        padding-left: 4px;
        padding-right: 4px;
        padding-bottom: 4px;
        margin: 6px 0px 6px 0px;
        border-right: 1px solid #555555;
        border-bottom: 1px solid #555555;
        border-left: 1px solid #D0D0D0;
        border-top: 1px solid #D8D8D8;
        background: #E8EDF3;
    }

    div.tabsAction {
        box-sizing: initial !important;
        margin: 20px 0em 1px 0em;
        padding: 0em 0em;
        text-align: right;
        /* - fix bottom */
        display: inline-block;
        z-index: 50;
        position: fixed;
        bottom: -1px;
        right: -1px;
        background-color: transparent;
        /* Complètement transparent */
        padding: 12px 0px 5px 20px;
        margin: 0px 0px 1px 0px;
            }

    div.spacefooter {
        margin: 30px;
    }

    td.tab {
        background: #dee7ec;
    }

    span.tabspan {
        box-sizing: initial !important;
        background: #dee7ec;
        color: #434956;
        font-family: arial,tahoma,verdana,helvetica;
        padding: 0px 6px;
        margin: 0em 0.2em;
        text-decoration: none;
        white-space: nowrap;
        border-right: 1px solid #555555;
        border-left: 1px solid #D8D8D8;
        border-top: 1px solid #D8D8D8;
    }

    /* ============================================================================== */
    /* Boutons actions                                                                */
    /* ============================================================================== */

    /* Nouvelle syntaxe a utiliser */

    label.butAction,
    .butAction:link,
    .butAction:visited,
    .butAction:hover,
    .butAction:active,
    .butActionDelete,
    .butActionRefused,
    .butActionDelete:link,
    .butActionDelete:visited,
    .butActionDelete:hover,
    .butActionDelete:active,
    .butActionOk,
    .butActionOk:link,
    .butActionOk:visited,
    .butActionOk:hover,
    .butActionOk:active,
    .butActionBlue,
    .butActionBlue:link,
    .butActionBlue:visited,
    .butActionBlue:hover,
    .butActionBlue:active {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-weight: bold;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        border: 1px solid #b4c4d8;
        color: #27433f;
        padding: 4px 10px;
        margin: 4px 10px;
        text-decoration: none;
        white-space: nowrap;
        font-size: 13px;
        cursor: pointer;
        display: inline-block;
    }

    .butAction:hover {
        background-color: #DAE2EC;
        color: #FFFFFF;
    }

    .butActionDelete {
        border: 1px solid red;
    }

    .butActionDelete:link,
    .butActionDelete:visited,
    .butActionDelete:hover,
    .butActionDelete:active {
        border: 2px solid red;
    }

    .butActionOk {
        border: 1px solid green;
    }

    .butActionOk:link,
    .butActionOk:visited,
    .butActionOk:hover,
    .butActionOk:active {
        border: 2px solid green;
    }

    .butActionBlue {
        border: 1px solid blue;
    }

    .butActionBlue:link,
    .butActionBlue:visited,
    .butActionBlue:hover,
    .butActionBlue:active {
        border: 2px solid blue;
    }

    .butActionDelete:hover {
        background: #FFe7ec;
        color: #961400;
    }

    .butActionRefused {
        background: #f9dbe1;
        color: #666;
    }

    span.butAction,
    span.butActionDelete {
        cursor: pointer;
    }


    /* ============================================================================== */
    /* Tables                                                                         */
    /* ============================================================================== */


    .nocellnopadd {
        list-style-type: none;
        margin: 0px;
        padding: 0px;

    }

    .notopnoleft {
        border-collapse: collapse;
        border: 0px;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 6px;
        padding-bottom: 0px;
        margin: 0px 0px;
    }

    .notopnoleftnoright {
        border-collapse: collapse;
        border: 0px;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        margin: 0px 0px 0px 0px;
    }


    table.border {
        border: 1px solid #9CACBB;
        border-collapse: collapse;
    }

    table.border td {
        padding: 1px 2px;
        border: 1px solid #e6e6e6;
        border-collapse: collapse;
    }

    td.border {
        border-top: 1px solid #000000;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
    }

    /* Main boxes */

    table.noborder {
        background-color: #f2f6ee;
        background-image: linear-gradient(to bottom, #f2f6ee, #E8EDF3);
        background-position: top right;
        vertical-align: text-top;
        /*border-right: 1px solid #555555;
        border-bottom: 1px solid #555555;
        border-left: 1px solid #D0D0D0;
        border-top: 1px solid #D8D8D8;*/
        border: 1px solid #D0D0D0;
        border-spacing: 0px 0px;
        padding: 0 0px 8px 0px;
        /*border-collapse: collapse;*/
    }

    table.noborder tr {}

    table.noborder td {}

    #graph {
        padding: 1px 1px;
    }

    table.nobordernopadding {
        border: 0px;
        border-spacing: 0px 0px;
    }

    table.nobordernopadding tr {
        border: 0px;
        padding: 0px 0px;
    }

    table.nobordernopadding td {
        border: 0px;
        padding: 0px 0px !important;
    }

    /* my_form_ajax pour formulaire ajax */
    table.doliplus_form_ajax td,
    table.doliplus_form_ajax th {
        padding-top: 8px !important;
        padding-bottom: 7px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;

    }

    /* For lists */

    table.liste {
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        background-position: top right;
        vertical-align: text-top;
        border-bottom: 1px solid #555555;
        border-left: 1px solid #D0D0D0;
        border-top: 1px solid #D8D8D8;
        border: 1px solid #D0D0D0;

        border-spacing: 0px 0px;
        padding: 0 0px 8px 0px;

    }

    table.liste td {
        padding-right: 2px;
    }

    tr.liste_titre {
        height: 20px;
        color: #27433f;
        font-weight: bold;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        line-height: 18px;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
        background-color: #f2f6ee;
        background-image: linear-gradient(to bottom, #f2f6ee, #E8EDF3);
    }

    tr.liste_titre td {
        padding-left: 6px;
        padding-right: 6px;
        /*vertical-align: text-top;*/
    }

    td.liste_titre_sel {
        background-position: top right;
        color: #909DAD;
        font-weight: bold;
        white-space: nowrap;
    }

    input.liste_titre {
        background: #FFF;
        background-repeat: no-repeat;
        background-position: top right;
        border: 0px;
    }

    tr.liste_total td {
        border-top: 1px solid #e6e6e6;
        background-image: linear-gradient(to bottom, #f2f6ee, #E8EDF3);
        color: #332266;
        font-weight: bold;
        white-space: nowrap;
    }

    th {
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8) !important;
        color: #334444;
        font-family: arial,tahoma,verdana,helvetica;
        font-weight: bold;
        border-left: 1px solid #FFFFFF;
        border-right: 1px solid #FFFFFF;
        border-top: 1px solid #FFFFFF;
        border-bottom: 1px solid #FFFFFF;
        white-space: nowrap;
    }

    .impair {
        /*        background: #eaeaea;*/
        background: hsl(240, 10%, 93%);
        font-family: arial,tahoma,verdana,helvetica;
        border: 0px;
    }

    .impair:hover {
        /*  background: #c0c4c7;*/
        background: hsl(240, 10%, 88%);
        border: 0px;
    }

    .pair {
        background: #FFFFFF;
        font-family: arial,tahoma,verdana,helvetica;
        border: 0px;
    }

    .pair:hover {
        /*        background: #c0c4c7;*/
        background: hsl(240, 10%, 88%);
        border: 0px;
    }

    .pair td,
    .impair td {
        padding: 2px;
    }

    /*
    *  Boxes
    */

    .box {
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 4px;
    }

    tr.box_titre {
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        color: #27433f;
        font-weight: normal;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        white-space: nowrap;
            }

    tr.box_impair {
        /* background: #e6ebed; */
        background: #eaeaea;
        font-family: arial,tahoma,verdana,helvetica;
    }

    tr.box_impair:hover {
        background: #c0c4c7;
        border: 0px;
    }

    tr.box_pair {
        /* background: #d0d4d7; */
        background: #f4f4f4;
        font-family: arial,tahoma,verdana,helvetica;
    }

    tr.box_pair:hover {
        background: #c0c4c7;
        border: 0px;
    }

    tr.fiche {
        font-family: arial,tahoma,verdana,helvetica;
    }

    /*
    *   Ok, Warning, Error
    */
    .ok {
        color: #114466;
    }

    .warning {
        color: #887711;
    }

    .error {
        color: #550000;
        font-weight: bold;
    }

    div.ok {
        color: #114466;
    }

    div.warning {
        color: #e8860f;
        padding: 0.2em 0.2em 0.2em 0.2em;
        margin: 0.5em 0em 0.5em 0em;
        border: 1px solid #e0e0d0;
        background: #efefd4;
    }

    div.error {
        color: #550000;
        font-weight: bold;
        padding: 0.2em 0.2em 0.2em 0.2em;
        margin: 0.5em 0em 0.5em 0em;
        border: 1px solid #8C9CAB;
            }

    /* Info admin */
    div.info {
        color: #707070;
        padding: 0.2em 0.2em 0.2em 0.2em;
        margin: 0.5em 0em 0.5em 0em;
        border: 1px solid #e0e0d0;
        background: #efefd4;

    }


    /*
    *   Liens Payes/Non payes
    */

    a.normal:link {
        font-weight: normal
    }

    a.normal:visited {
        font-weight: normal
    }

    a.normal:active {
        font-weight: normal
    }

    a.normal:hover {
        font-weight: normal
    }

    a.impayee:link {
        font-weight: bold;
        color: #550000;
    }

    a.impayee:visited {
        font-weight: bold;
        color: #550000;
    }

    a.impayee:active {
        font-weight: bold;
        color: #550000;
    }

    a.impayee:hover {
        font-weight: bold;
        color: #550000;
    }



    /*
    *  Other
    */

    .fieldrequired {
        font-weight: bold;
        color: #000055;
    }

    #pictotitle {
            }

    .photo {
        border: 0px;
        /* filter:alpha(opacity=55); */
        /* opacity:.55; */
    }

    div.titre {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-weight: normal;
        color: #27433f;
        font-size: 20px;
        text-decoration: none;
        margin-left: 20px;
    }


    /* ============================================================================== */
    /* Formulaire confirmation (When Ajax JQuery is used)                             */
    /* ============================================================================== */

    .ui-dialog-titlebar {}

    .ui-dialog-content {
        font-size: 12px !important;
    }

    /* ============================================================================== */
    /* Formulaire confirmation (When HTML is used)                                    */
    /* ============================================================================== */

    table.valid {
        border-top: solid 1px #E6E6E6;
        border-left: solid 1px #E6E6E6;
        border-right: solid 1px #444444;
        border-bottom: solid 1px #555555;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        margin: 0px 0px;
        background: #DAE2EC;
        ;
    }

    .validtitre {
        background: #DAE2EC;
        ;
        font-weight: bold;
    }


    /* ============================================================================== */
    /* Tooltips                                                                       */
    /* ============================================================================== */

    #tooltip {
        position: absolute;
        width: 450px;
        border-top: solid 1px #BBBBBB;
        border-left: solid 1px #BBBBBB;
        border-right: solid 1px #444444;
        border-bottom: solid 1px #444444;
        padding: 2px;
        z-index: 3000;
        background-color: #FFFFF0;
        opacity: 1;
            }


    /* ============================================================================== */
    /* Calendar                                                                       */
    /* ============================================================================== */
    .bodyline {
        padding: 0px;
        margin-bottom: 5px;
        z-index: 3000;
    }

    table.dp {
        width: 180px;
        background-color: #FFFFFF;
        border-top: solid 2px #DDDDDD;
        border-left: solid 2px #DDDDDD;
        border-right: solid 1px #222222;
        border-bottom: solid 1px #222222;

        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);

    }

    .dp td,
    .tpHour td,
    .tpMinute td {
        padding: 2px;
        font-size: 10px;
    }

    /* Barre titre */
    .dpHead,
    .tpHead,
    .tpHour td:Hover .tpHead {
        font-weight: bold;
        color: white;
        font-size: 11px;
        cursor: auto;

    }

    /* Barre navigation */
    .dpButtons,
    .tpButtons {
        text-align: center;
        background-color: #b4c4d8;
        color: black;
        font-weight: bold;
        border: 1px outset black;
        cursor: pointer;
    }

    .dpButtons:Active,
    .tpButtons:Active {
        border: 1px outset black;
    }

    .dpDayNames td,
    .dpExplanation {
        background-color: #d7ffac;
        font-weight: bold;
        text-align: center;
        font-size: 11px;
    }

    .dpExplanation {
        font-weight: normal;
        font-size: 11px;
            }

    .dpWeek td {
        text-align: center;
        border-bottom: 1px solid #555555;
    }

    .dpToday,
    .dpReg,
    .dpSelected {
        cursor: pointer;
    }

    .dpToday {
        font-weight: bold;
        color: black;
        background-color: #DDDDDD;
    }

    .dpReg:Hover,
    .dpToday:Hover {
        background-color: #909DAD;
        color: #d7ffac;
        font-weight: bold;
    }

    /* Jour courant */
    .dpSelected {
        color: white;
        font-weight: bold;
        background-color: #909DAD;
        /* old browsers */
    }

    .tpHour {
        border-top: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
    }

    .tpHour td {
        border-left: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD;
        cursor: pointer;
    }

    .tpHour td:Hover {
        background-color: black;
        color: white;
    }

    .tpMinute {
        margin-top: 5px;
    }

    .tpMinute td:Hover {
        background-color: black;
        color: white;
    }

    .tpMinute td {
        background-color: #D9DBE1;
        text-align: center;
        cursor: pointer;
    }

    /* Bouton X fermer */
    .dpInvisibleButtons {
        border-style: none;
        background-color: transparent;
        padding: 0px;
        font-size: 9px;
        border-width: 0px;
        color: black;
        vertical-align: middle;
        cursor: pointer;
        text-align: right;
        font-weight: bold;
    }

    /* ============================================================================== */
    /*  Afficher/cacher                                                               */
    /* ============================================================================== */

    div.visible {
        display: block;
    }

    div.hidden {
        display: none;
    }

    .display_none {
        display: none !important;
    }

    tr.visible {
        display: block;
    }

    td.hidden {
        display: none;
    }


    /* ============================================================================== */
    /*  Module agenda                                                                 */
    /* ============================================================================== */

    .cal_other_month {
        background: #DDDDDD;
        border: solid 1px #ACBCBB;
        padding-left: 2px;
        padding-right: 1px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .cal_past_month {
        background: #EEEEEE;
        border: solid 1px #ACBCBB;
        padding-left: 2px;
        padding-right: 1px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .cal_current_month {
        background: #FFFFFF;
        border: solid 1px #ACBCBB;
        padding-left: 2px;
        padding-right: 1px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .cal_today {
        background: #FFFFFF;
        border: solid 2px #6C7C7B;
        padding-left: 2px;
        padding-right: 1px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    table.cal_event {
        border-collapse: collapse;
        margin-bottom: 1px;
    }

    table.cal_event td {
        border: 0px;
        padding-left: 0px;
        padding-right: 2px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .cal_event a:link {
        font-size: 11px;
        font-weight: bold !important;
    }

    .cal_event a:visited {
        font-size: 11px;
        font-weight: bold !important;
    }

    .cal_event a:active {
        font-size: 11px;
        font-weight: bold !important;
    }

    .cal_event a:hover {
        font-size: 11px;
        font-weight: bold !important;
    }



    /* ============================================================================== */
    /*  Afficher/cacher                                                               */
    /* ============================================================================== */

    #evolForm input.error {
        font-weight: bold;
        border: solid 1px #FF0000;
        padding: 1px 1px 1px 1px;
        margin: 1px 1px 1px 1px;
    }

    #evolForm input.focuserr {
        font-weight: bold;
        background: #FAF8E8;
        color: black;
        border: solid 1px #FF0000;
        padding: 1px 1px 1px 1px;
        margin: 1px 1px 1px 1px;
    }


    #evolForm input.focus {
        /*** Mise en avant des champs en cours d'utilisation ***/
        background: #FAF8E8;
        color: black;
        border: solid 1px #000000;
        padding: 1px 1px 1px 1px;
        margin: 1px 1px 1px 1px;
    }

    #evolForm input.normal {
        /*** Retour a l'etat normal apres l'utilisation ***/
        background: white;
        color: black;
        border: solid 1px white;
        padding: 1px 1px 1px 1px;
        margin: 1px 1px 1px 1px;
    }



    /* ============================================================================== */
    /*  Ajax - Liste deroulante de l'autocompletion                                   */
    /* ============================================================================== */

    .ui-autocomplete-loading {
        background: white url(/htdocs/theme/common/img/working.gif) right center no-repeat;
    }

    .ui-autocomplete {
        position: absolute;
        width: auto;
        font-size: 1.0em;
        background-color: white;
        border: 1px solid #888;
        margin: 0px;
        padding: 0px;
    }

    .ui-autocomplete ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    .ui-autocomplete ul li.selected {
        background-color: #D3E5EC;
    }

    .ui-autocomplete ul li {
        list-style-type: none;
        display: block;
        margin: 0;
        padding: 2px;
        height: 16px;
        cursor: pointer;
    }

    /* ============================================================================== */
    /*  Ajax - In place editor                                                        */
    /* ============================================================================== */

    form.inplaceeditor-form {
        /* The form */
    }

    form.inplaceeditor-form input[type="text"] {
        /* Input box */
    }

    form.inplaceeditor-form textarea {
        /* Textarea, if multiple columns */
        background: #FAF8E8;
        color: black;
    }

    form.inplaceeditor-form input[type="submit"] {
        /* The submit button */
        font-size: 100%;
        font-weight: normal;
        border: 0px;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        cursor: pointer;
    }

    form.inplaceeditor-form a {
        /* The cancel link */
        margin-left: 5px;
        font-size: 11px;
        font-weight: normal;
        border: 0px;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        cursor: pointer;
    }



    /* ============================================================================== */
    /* Admin Menu                                                                     */
    /* ============================================================================== */

    /* CSS for treeview */

    /* Lien plier /deplier tout */
    .arbre-switch {
        text-align: right;
        padding: 0 5px;
        margin: 0 0 -18px 0;
    }

    /* Arbre */
    ul.arbre {
        padding: 5px 10px;
    }

    /* strong : A modifier en fonction de la balise choisie */
    ul.arbre strong {
        font-weight: normal;
        padding: 0 0 0 20px;
        margin: 0 0 0 -7px;
        background-image: url(/htdocs/theme/common/treemenu/branch.gif);
        background-repeat: no-repeat;
        background-position: 1px 50%;
    }

    ul.arbre strong.arbre-plier {
        background-image: url(/htdocs/theme/common/treemenu/plus.gif);
        cursor: pointer;
    }

    ul.arbre strong.arbre-deplier {
        background-image: url(/htdocs/theme/common/treemenu/minus.gif);
        cursor: pointer;
    }

    ul.arbre ul {
        padding: 0;
        margin: 0;
    }

    ul.arbre li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* This is to create an indent */
    ul.arbre li li {
        margin: 0 0 0 16px;
    }

    /* Classe pour masquer */
    .hide {
        display: none;
    }

    img.menuNew {
        display: block;
        border: 0px;
    }

    img.menuEdit {
        border: 0px;
        display: block;
    }

    img.menuDel {
        display: none;
        border: 0px;
    }

    div.menuNew {
        margin-top: -20px;
        margin-left: 270px;
        height: 20px;
        padding: 0px;
        width: 30px;
        position: relative;
    }

    div.menuEdit {
        margin-top: -15px;
        margin-left: 250px;
        height: 20px;
        padding: 0px;
        width: 30px;
        position: relative;

    }

    div.menuDel {
        margin-top: -20px;
        margin-left: 290px;
        height: 20px;
        padding: 0px;
        width: 30px;
        position: relative;

    }

    div.menuFleche {
        margin-top: -16px;
        margin-left: 320px;
        height: 20px;
        padding: 0px;
        width: 30px;
        position: relative;

    }


    /* ============================================================================== */
    /*  Show Excel tabs                                                               */
    /* ============================================================================== */

    .table_data {
        border-style: ridge;
        border: 1px solid;
    }

    .tab_base {
        background: #C5D0DD;
        font-weight: bold;
        border-style: ridge;
        border: 1px solid;
        cursor: pointer;
    }

    .table_sub_heading {
        background: #CCCCCC;
        font-weight: bold;
        border-style: ridge;
        border: 1px solid;
    }

    .table_body {
        background: #F0F0F0;
        font-weight: normal;
        font-family: sans-serif;
        border-style: ridge;
        border: 1px solid;
        border-spacing: 0px;
        border-collapse: collapse;
    }

    .tab_loaded {
        background: #222222;
        color: white;
        font-weight: bold;
        border-style: groove;
        border: 1px solid;
        cursor: pointer;
    }

    /* ============================================================================== */
    /*  CSS for color picker                                                         */
    /* ============================================================================== */

    A.color,
    A.color:active,
    A.color:visited {
        position: relative;
        display: block;
        text-decoration: none;
        width: 10px;
        height: 10px;
        line-height: 10px;
        margin: 0px;
        padding: 0px;
        border: 1px inset white;
    }

    A.color:hover {
        border: 1px outset white;
    }

    A.none,
    A.none:active,
    A.none:visited,
    A.none:hover {
        position: relative;
        display: block;
        text-decoration: none;
        width: 10px;
        height: 10px;
        line-height: 10px;
        margin: 0px;
        padding: 0px;
        cursor: default;
        border: 1px solid #b3c5cc;
    }

    .tblColor {
        display: none;
    }

    .tdColor {
        padding: 1px;
    }

    .tblContainer {
        background-color: #b3c5cc;
    }

    .tblGlobal {
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
        background-color: #b3c5cc;
        border: 2px outset;
    }

    .tdContainer {
        padding: 5px;
    }

    .tdDisplay {
        width: 50%;
        height: 20px;
        line-height: 20px;
        border: 1px outset white;
    }

    .tdDisplayTxt {
        width: 50%;
        height: 24px;
        line-height: 12px;
        font-family: arial,tahoma,verdana,helvetica;
        font-size: 8pt;
        color: black;
        text-align: center;
    }

    .btnColor {
        width: 100%;
        font-family: arial,tahoma,verdana,helvetica;
        font-size: 10pt;
        padding: 0px;
        margin: 0px;
    }

    .btnPalette {
        width: 100%;
        font-family: arial,tahoma,verdana,helvetica;
        font-size: 8pt;
        padding: 0px;
        margin: 0px;
    }


    /* Style to overwrites JQuery styles */
    .ui-menu .ui-menu-item a {
        text-decoration: none;
        display: block;
        padding: .2em .4em;
        line-height: 1.5;
        zoom: 1;
        font-weight: normal;
        font-family: arial,tahoma,verdana,helvetica;
        font-size: 1em;
    }

    .ui-widget {
        font-family: arial,tahoma,verdana,helvetica;
        font-size: 12px;
    }

    .ui-button {
        margin-left: -1px;
    }

    .ui-button-icon-only .ui-button-text {
        height: 8px;
    }

    .ui-button-icon-only .ui-button-text,
    .ui-button-icons-only .ui-button-text {
        padding: 2px 0px 6px 0px;
    }

    .ui-button-text {
        line-height: 1em !important;
    }

    .ui-autocomplete-input {
        margin: 0;
        padding: 1px;
    }


    /* ============================================================================== */
    /*  CKEditor                                                                      */
    /* ============================================================================== */

    .cke_editor table,
    .cke_editor tr,
    .cke_editor td {
        border: 0px solid #FF0000 !important;
    }

    span.cke_skin_kama {
        padding: 0 !important;
    }

    .cke_wrapper {
        padding: 4px !important;
    }


    /* ============================================================================== */
    /*  File upload                                                                   */
    /* ============================================================================== */

    .template-upload {
        height: 72px !important;
    }

    /* ============================================================================== */
    /*  Image user ronde                                                                  */
    /* ============================================================================== */
    .roundedImage,
    .roundedImageShadow,
    .roundedImageBorder {
        overflow: hidden;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50%;
        border-radius: 50px;
    }

    .roundedImageShadow {
        -moz-box-shadow: 0px 0px 10px #b4c4d8;
        -webkit-box-shadow: 0px 0px 10px #b4c4d8;
        -o-box-shadow: 0px 0px 10px #b4c4d8;
        box-shadow: 0px 0px 10px #b4c4d8;
    }

    .roundedImageBorder {
        border: 1px solid #b4c4d8;
    }

    /* ============================================================================== */
    /*  Graph flot                                                               */
    /* ============================================================================== */

    .dolgraphtitle {
        margin-top: 6px;
        margin-bottom: 4px;
    }

    .dolgraphtitlecssboxes {
        margin: 0px;
    }

    .legendColorBox,
    .legendLabel {
        border: none !important;
    }

    div.dolgraph div.legend,
    div.dolgraph div.legend div {
        background-color: rgba(255, 255, 255, 0) !important;
    }

    div.dolgraph div.legend table tbody tr {
        height: auto;
    }

    /* ============================================================================== */
    /*  Tel                                                              */
    /* ============================================================================== */
    .call_on {
        position: relative;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        margin-bottom: 15px;
        background-image: url(/htdocs/theme/common/call.png);
    }

    .call_off {
        position: relative;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        margin-bottom: 15px;
        background-image: url(/htdocs/theme/common/call_out.png);
    }

    /* ============================================================================== */
    /*  ProjetPlus                                                              */
    /* ============================================================================== */
    .taskover {
        font-weight: bold;
        color: red;
    }

    .taskdue {
        font-weight: bold;
        color: green;
    }

    .printbold {
        font-weight: bold;
    }

    /* ============================================================================== */
    /*  Readonly , disabled                                                            */
    /* ============================================================================== */
    .locked,
    .readonly {
        background-color: lightgray;
    }

    /* ============================================================================== */
    /*  picto gestion multi ligne devis cde...                                       */
    /* ============================================================================== */
    .ck_on {
        color: #909DAD;
    }

    /* ============================================================================== */
    /*  switch-button                                                            */
    /* ============================================================================== */
    .switch-button-label {
        float: left;
        font-size: 12px;
        cursor: pointer;
        border: groove;
        margin: 5px;
        color: #adadad;
    }

    .switch-button-label.off {
        font-family: arial,tahoma,verdana,helvetica;
        color: #adadad;
        color: red;
    }

    .switch-button-label.on {
        font-family: arial,tahoma,verdana,helvetica;
        color: #101010;
    }

    .switch-button-background {
        float: left;
        position: relative;
        background: #f2f6ee;
        border: 1px solid #aaa;
        margin: 1px 10px;
        cursor: pointer;
            }

    .switch-button-button {
        position: absolute;
        left: -1px;
        top: -1px;
        background: #b4c4d8;
        border: 1px solid #aaa;
            }

    /* ============================================================================== */
    /*  switch-button  2                                                          */
    /* ============================================================================== */
    .switch-slider-doli {
        position: relative;
        display: inline-block;
        width: var(--width_slider);
        height: 24px;
    }

    .switch-slider-doli input {
        display: none;
    }

    .slider-button-doli {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--off);
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 34px;
    }

    .slider-button-doli:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked+.slider-button-doli {
        background-color: var(--on);
    }

    input:focus+.slider-button-doli {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked+.slider-button-doli:before {
        transform: translateX(var(--translate_slider));
    }

    .slider-button-doli:after {
        content: attr(content_on);
        color: white;
        display: block;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        font-size: 10px;
        font-family: Verdana, sans-serif;
    }

    input:checked+.slider-button-doli:after {
        content: attr(content_off);
    }

    /* ============================================================================== */
    /*  Tool tip en Css                                                            */
    /* ============================================================================== */
    .tooltips {
        position: relative;
        display: inline-block;
        /*border-bottom: 1px dotted black;*/
    }

    .tooltips .tooltipstext {
        visibility: hidden;
        max-width: 300px;
        background-color: #f2f6ee;
        color: black;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltips .tooltipstext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #f2f6ee transparent transparent transparent;
    }

    .tooltips:hover .tooltipstext {
        visibility: visible;
        opacity: 1;
    }


    /* ============================================================================== */
    /*  conteneditable                                                                */
    /* ============================================================================== */
    .cellEditing {
        background-color: white;
        border: 1px solid #CCC;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        padding: 0.25em 0.5em;
        min-height: 1.5em;
        appearance: field;
        -moz-appearance: textfield;
        -webkit-appearance: field;
    }

    .cellEditing:focus {
        border: 1px solid #69F;
        -moz-box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
        -webkit-box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
        box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
    }

    /*==============================*/
    /* slider                       */
    /*==============================*/

    input[type=range].slider {
        -webkit-appearance: none;
        width: 90%;
        /**  largeur  pour XX % *****/
        margin: 3px 3px;
    }

    input[type=range].slider:focus {
        outline: none;
    }

    input[type=range].slider::-webkit-slider-runnable-track {
        width: 100%;
        height: 22px;
        /**  taille    *****/
        cursor: pointer;
        background: #b4c4d8;
        border-radius: 0px;
        border: 0px solid black;
    }

    input[type=range].slider::-webkit-slider-thumb {

        border: 2.5px solid black;
        height: 22px;
        width: 22px;
        border-radius: 4px;
        background: #b4c4d8;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: 0px;
    }

    input[type=range].slider:focus::-webkit-slider-runnable-track {
        background: #b4c4d8;
    }

    input[type=range].slider::-moz-range-track {
        width: 100%;
        height: 22px;
        cursor: pointer;
        background: #b4c4d8;
        border-radius: 0px;
        border: 0px solid #010101;
    }

    input[type=range].slider::-moz-range-thumb {
        border: 2.5px solid black;
        height: 22px;
        width: 22px;
        border-radius: 4px;
        background: #b4c4d8;
        cursor: pointer;
    }

    /* ============================================================================== */
    /*  Tableau en div         ex voir ajax/bati_ajax_do                              */
    /* ============================================================================== */

    .Ttable {
        display: table;
        border-spacing: 0.5rem;
        border-collapse: collapse;
    }

    .Tcell {
        display: table-cell;
        padding: 0.5rem;
        border: 1px solid #e6e6e6;
    }

    .Trow {
        display: table-row;
    }

    .TrowNoWrap {
        white-space: nowrap;
    }

    .Trow:nth-child(odd) {
        background: #eaeaea;
    }

    .Trow:nth-child(even) {
        background: #FFFFFF;
    }

    .Trow:hover {
        background: #c0c4c7;
        cursor: pointer;
    }

    .Tcol {
        display: table-column;
    }

    .Tbody {
        display: table-row-group
    }

    .Tcolgroup {
        display: table-column-group;
    }

    .Tfoot {
        display: table-footer-group;
        font-weight: bold;
        background-color: #f2f6ee;
    }

    .Tthead {
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
        color: #27433f;
        display: table-header-group;
        font-weight: bold;
    }

    .Tlegend {
        display: table-caption;
        caption-side: top;
        background-color: #f2f6ee;
    }

    .Tcenter {
        text-align: center;
    }

    .Tright {
        text-align: right;
    }

    .Tleft {
        text-align: left;
    }

    .centpercent {
        width: 100%;
    }


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

    .select2-container--focus span.select2-selection.select2-selection--single {
        border-bottom: 1px solid #666 !important;
    }

    .blockvmenusearch .select2-container--default .select2-selection--single,
    .blockvmenubookmarks .select2-container--default .select2-selection--single {
        background-color: unset;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: unset;
    }

    .select2-default {
        color: #999 !important;
    }

    .select2-choice,
    .select2-container .select2-choice {
        border-bottom: solid 1px rgba(0, 0, 0, .4);
    }

    .select2-container .select2-choice>.select2-chosen {
        margin-right: 23px;
    }

    .select2-container .select2-choice .select2-arrow {
        border-radius: 0;
        background: transparent;
    }

    .select2-container-multi .select2-choices {
        background-image: none;
    }

    .select2-container .select2-choice {
        color: #000;
        border-radius: 0;
    }

    .selectoptiondisabledwhite {
        background: #FFFFFF !important;
    }

    .select2-arrow {
        border: none;
        border-left: none !important;
        background: none !important;
    }

    .select2-choice {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .select2-drop.select2-drop-above {
        box-shadow: none !important;
    }

    .select2-container--open .select2-dropdown--above {
        border-bottom: solid 1px rgba(0, 0, 0, .2);
    }

    .select2-drop.select2-drop-above.select2-drop-active {
        border-top: 1px solid #ccc;
        border-bottom: solid 1px rgba(0, 0, 0, .2);
    }

    .select2-container--default .select2-selection--single {
        outline: none;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: solid 1px rgba(0, 0, 0, .2);
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .select2-container--default .select2-selection--multiple {
        border: solid 1px rgba(0, 0, 0, .2);
        border-radius: 0 !important;
    }

    .select2-search__field {
        outline: none;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: solid 1px rgba(0, 0, 0, .2) !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices {
        outline: none;
        border-top: none;
        border-left: none;
        border-bottom: none;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .select2-dropdown-open {
        background-color: #fff;
    }

    .select2-dropdown-open .select2-choice,
    .select2-dropdown-open .select2-choices {
        outline: none;
        border-top: none;
        border-left: none;
        border-bottom: none;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background-color: #fff;
    }

    .select2-disabled {
        color: #888;
    }

    .select2-drop.select2-drop-above.select2-drop-active,
    .select2-drop {
        border-radius: 0;
    }

    .select2-drop.select2-drop-above {
        border-radius: 0;
    }

    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices {
        background-image: none;
        border-radius: 0 !important;
    }

    div.select2-drop-above {
        background: #fff;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .select2-drop-active {
        border: 1px solid #ccc;
        padding-top: 4px;
    }

    .select2-search input {
        border: none;
    }

    a span.select2-chosen {
        font-weight: normal !important;
    }

    .select2-container .select2-choice {
        background-image: none;
        /* line-height: 24px; */
    }

    .select2-results .select2-no-results,
    .select2-results .select2-searching,
    .select2-results .select2-ajax-error,
    .select2-results .select2-selection-limit {
        background: #FFFFFF;
    }

    .select2-results {
        max-height: 400px;
    }

    .select2-container.select2-container-disabled .select2-choice,
    .select2-container-multi.select2-container-disabled .select2-choices {
        background-color: #FFFFFF;
        background-image: none;
        border: none;
        cursor: default;
    }

    .select2-container-disabled .select2-choice .select2-arrow b {
        opacity: 0.5;
    }

    .select2-container-multi .select2-choices .select2-search-choice {
        margin-bottom: 3px;
    }

    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border-bottom: 1px solid #ccc;
        border-right: none;
        border-top: none;
        border-left: none;

    }

    .select2-container--default .select2-results>.select2-results__options {
        max-height: 400px;
    }

    /* Special case for the select2 add widget */
    #addbox .select2-container .select2-choice>.select2-chosen,
    #actionbookmark .select2-container .select2-choice>.select2-chosen {
        text-align: left;
        opacity: 0.4;
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: unset;
        opacity: 0.5;
    }

    span#select2-boxbookmark-container,
    span#select2-boxcombo-container {
        text-align: left;
        opacity: 0.5;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-left: 6px;
    }

    /* Style used before the select2 js is executed on boxcombo */
    #boxbookmark.boxcombo,
    #boxcombo.boxcombo {
        text-align: left;
        opacity: 0.4;
        border-bottom: solid 1px rgba(0, 0, 0, .4) !important;
        height: 26px;
        line-height: 24px;
        padding: 0 0 2px 0;
        vertical-align: top;
    }

    /* To emulate select 2 style */
    .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;
        /*        <!-- cloud1 -->*/
                    border: 1px solid #909DAD;
                
        background-color: #b4c4d8;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8) !important;

    }
    /* To emulate select 2 style with var() */
    .select2-search-choice-dolibarr-var{
        padding: 2px 5px 1px 5px;
        margin: 0 0 2px 3px;
        position: relative;
        line-height: 13px;
        color: #333;
        cursor: default;
       
        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;
        /*        <!-- cloud1 -->*/
        border: 1px solid #aaaaaa;
                border: 1px solid #909DAD;
       
        background-color:  var(--degrade1);
        background-image: linear-gradient(to bottom, var(--degrade2), var(--degrade1)) !important;
   
    }

    .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;
    }

    /* ============================================================================== */
    /*  Notification events                                                                      */
    /* ============================================================================== */

    .notification {
        flex: flex-grow;
        height: 125px;
        min-width: 410px;
        position: relative;
        float: right;
        border-radius: 10px;
        z-index: 1;
        color: #101010;
        right: 2%;
        bottom: 16px;
        font-size: 12px;
        font-family: arial,tahoma,verdana,helvetica;
        background-color: #f2f6ee;
    }

    #notification {
        width: 100%;
        z-index: 5;
        flex-direction: column;
        display: inline-block;
        position: fixed;
        bottom: 20px;
        right: 3px;
    }

    .notification h2 {
        padding: 20px 0 0 0px;
        font-family: arial,tahoma,verdana,helvetica;
        font-size: 15px;
    }

    .notification p {
        color: #101010;
        padding: 5px 0 0 0;
        clear: both;
        margin: 0 0 0 20px;
        max-width: 300px;
        font-size: 12px;
        font-family: arial,tahoma,verdana,helvetica;
    }

    .notification img {
        float: left;
        padding: 10px 15px 0 15px;
        width: 60px;
    }

    .notification_buttons a {
        display: block;
        width: 60px;
        margin: 5px;
        padding: 8px;
        position: absolute;
        border: 1px solid #999;
        border-radius: 5px;

        color: #27433f;
        font-size: 13px;
        font-family: arial,tahoma,verdana,helvetica;
        text-align: center;
        text-decoration: none;

        -webkit-box-shadow: 0px 1px 1px #fff;
        box-shadow: 0px 1px 1px #fff;
        background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(235, 235, 235, 0.5));
    }

    .notification_buttons a:hover {
        background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(235, 235, 235, 1));
    }

    .notification_buttons a:nth-child(odd) {
        right: 10px;
        top: 50px;
    }

    .notification_buttons a:nth-child(even) {
        right: 10px;
        top: 8px;
    }

    /* ============================================================================== */
    /*  Onglet achat sur cde client                                                                      */
    /* ============================================================================== */
    .bt-radios {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-weight: bold;
        background-color: #b4c4d8;
        color: #27433f;
        padding: 4px 10px;
        margin: 4px 10px;
        text-decoration: none;
        white-space: nowrap;
        font-size: 12px;
        cursor: pointer;
        display: inline-block;
    }

    /* ============================================================================== */
    /* Menu panel   left and right                                                    */
    /* ============================================================================== */
    .cd-panel,
    .cd-panel-right {
        visibility: hidden;
        transition: visibility 0s 0.6s;
    }

    .cd-panel.is-visible,
    .cd-panel-right.is-visible {
        visibility: visible;
        transition: visibility 0s 0s;
    }

    .is-visible {
        top: 0;
        transition: top 0.3s 0.3s;
    }

    .cd-panel-container {
        background: rgba(255, 255, 255, 0.96);
        position: fixed;
        width: 220px;
        height: 97%;
        top: 40px;
        left: 5px;
        overflow: scroll;
        transition-property: transform;
        transition-duration: 0.3s;
        transition-delay: 0.3s;
        /* -100 gauche +100 droite */
        transform: translate3d(-100%, 0, 0);
    }

    .cd-panel-container-right {
        background: rgba(255, 255, 255, 0.96);
        position: fixed;
        width: 25%;
        height: 90%;
        top: 40px;
        right: 5px;
        overflow: scroll;
        transition-property: transform;
        transition-duration: 0.3s;
        transition-delay: 0.3s;
        border: solid 3px #909DAD;
        /* -100 gauche +100 droite */
        transform: translate3d(0, 0, -100px);
    }

    .is-visible .cd-panel-container,
    .is-visible .cd-panel-container-right {
        transform: translate3d(0, 0, 0);
        transition-delay: 0s;
    }

    /* close*/
    .cd-panel-close,
    .cd-panel-right-close {
        height: 18px;
        width: 100%;
        display: inline-block;
        overflow: hidden;
        text-indent: 100%;
        white-space: nowrap;

    }

    .closeButton,
    .closeButton-right {
        position: absolute;
        right: 5px;
        width: 22px;
        height: 22px;
        background: url('/htdocs/theme/common/close-button.png') no-repeat right center;
    }

    /* ============================================================================== */
    /*          Btn floating tchat                                                  */
    /* ============================================================================== */

    .fab-container-chat {
        position: fixed;
        top: 50px;
        right: 80px;
        cursor: pointer;
        transition: all .3s;
    }

    .fab-container-chat-menu {
        position: fixed;
        top: 210px;
        left: 73px;
        cursor: pointer;
        transition: all .3s;
    }

    .fab-container-chat-less-menu {
        position: fixed;
        top: 50px;
        left: 10px;
        cursor: pointer;
        transition: all .3s;
    }

    .iconbutton-chat {
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: #FF4F79;
    }

    .iconbutton-chat i {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 55%;
        color: white;
    }

    .button-chat {
        border-radius: 50%;
        box-shadow: 0 0 0 7px #DAE2EC;
        background: #909DAD;
    }

    .button-chat:before {
        content: attr(data-count);
        width: 17px;
        height: 17px;
        line-height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        display: block;
        border-radius: 50%;
        background: #DAE2EC;
        border: 1px solid #FFF;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 0 2px #909DAD;
        color: #909DAD;
        position: relative;
        transition: all .3s;
        display: flex;
    }

    .button-chat.badge-bottom-left-chat:before {
        top: auto;
        bottom: -3px;
    }

    /*
    *******************************
       Version Btn menu
    *******************************
    */
    .iconbutton-chat-menu {
        border-radius: 100%;
        background: #FF4F79;
    }

    .iconbutton-chat-menu i {
        position: relative;
       top: 2px;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .button-chat-menu {
        /* diametre btn icone chat */
        display: inline-block;
        width: 22px;
        height: 22px;
        background: #A11692;
    }

   /* ============================================================================== */
    /*      Badge notification                                                 */
    /* ============================================================================== */
      /* Margin / padding left icon - text */
    .badge-menu-doli {
       position: relative;
       top: 1px;
       padding-left: 25px;
    }
    /* badge shape */
    .badge-menu-doli:before {
        content: attr(data-count);
        position: absolute;
        /* diametre badge */
        width: 20px;
        height: 20px;
        font-size: 9px;
        line-height: 18px;
        text-align: center;
        display: block;
        border-radius: 50%;
        background: rgb(67, 151, 232);
        border: 1px solid #FFF;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        color: #FFF;
    }
    /* badge Position  */
    .badge-menu-doli.badge-doli-position:before {
        top: auto;
        /*position hauteur badge */
        bottom: 0px;
        left: 0px;
    }

    /* ============================================================================== */
    /*      Badge notification                                                 */
    /* ============================================================================== */
    .notify-badge-doli {
        position: relative;
        right: -3px;
        top: -13px;
        background: var(--color);
        text-align: center;
        border-radius: 9px 9px 9px 9px;
        color: white;
        padding: 3px 6px;
        font-size: 8px;
    }

    /* ============================================================================== */
    /* Menu small icons                                                               */
    /* ============================================================================== */


    /***************************************/
    /*    Container     #tmenu_tooltip     */
    /***************************************/


    #wrap_menu {
        position: relative;
        box-sizing: border-box;
        margin-right: 10px;
        display: inline-flex;
    }

    /***************************************/
    /*    GESTION MENU 0                  */
    /***************************************/
    #menu_short,
    #menu_mob,
    #menu_vertical {
        list-style: none;
        margin: 0px;
        padding: 0px;
        display: flex;
    }

    #menu_short a,
    #menu_mob a,
    #menu_vertical a {
        color: #101010;
        padding: 8px;
        text-decoration: none;
        text-align: center;
        display: block;
        border: 1px solid;
        border-color: #f2f6ee #DAE2EC #DAE2EC #f2f6ee;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
    }

    #menu_vertical {
        display: none;
    }

    /***************************************/
    /*    GESTION MENU  HORIZONTAL         */
    /***************************************/

    /*Menu1 ul*/
    .menu_doliplus {
        list-style: none;
        margin: 0px;
        /* important pour eviter les bordures*/
        padding: 0px;
        /* important pour eviter les bordures*/
        align-items: center;
        display: flex;
        flex-flow: row wrap;
    }

    /* Any Sub Menu */
    .menu_doliplus ul {
        position: static;
        display: none;
        list-style: none;
        margin: 0px;
        padding: 0px;
        height: auto;
        z-index: 2000;
        min-width: 160px;
    }

    /* position:relative so that the submenu can be placed relative to its parent li */
    .menu_doliplus li {
        position: relative;
    }

    .menu_doliplus a {
        color: #101010;
        padding: 8px;
        /* hauteur box*/
        text-decoration: none;
        text-align: center;
        display: block;
        border: 1px solid;
        border-color: #f2f6ee #DAE2EC #DAE2EC #f2f6ee;
        background-color: #DAE2EC;
        background-image: linear-gradient(to bottom, #DAE2EC, #b4c4d8);
    }

    /* Display First Sub Menu */
    .menu_doliplus li:hover ul {
        display: flex;
        flex-flow: column wrap;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 2000;
    }

    /* Hide Second Sub Menu until ready */
    .menu_doliplus li:hover ul ul {
        display: none;
    }

    /* Display Second Sub Menu */
    .menu_doliplus li ul li ul {
        display: none;
        height: auto;
    }

    /* Hover Display Second Sub Menu */
    .menu_doliplus li ul li:hover ul {
        display: flex;
        flex-flow: column;
        position: absolute;
        top: 0;
        left: 100%;
    }

    /* Taille box Sub Menu  */
    .menu_doliplus li ul a {

        padding: 13px !important;
        border: 1px solid !important;
        border-color: #FFFFFF !important;
    }

    .menu_doliplus li ul a:hover {
        background-image: linear-gradient(to bottom, #DAE2EC, #DAE2EC) !important;
    }

    /* Arrow above */
    .menu_doliplus li ul li:first-child>a:after {
        content: '';
        position: absolute;
        left: 30px;
        top: -8px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 8px solid #909DAD;
    }

    /*  top border dessus - Arrow above*/
    .menu_doliplus li ul li:first-child>a {
        border-top: 2px solid #909DAD !important;
        ;
    }

    /* fleche coté vue droite*/
    .menu_doliplus ul ul li:first-child a:after {
        left: -8px;
        top: 12px;
        width: 0;
        height: 0;
        border-left: 0;
        border-bottom: 5px solid transparent;
        border-top: 5px solid transparent;
        border-right: 8px solid #909DAD;
    }

    /* bordure gauche - fleche coté vue droite*/
    .menu_doliplus ul ul li:first-child>a {
        border-top: 2px solid #FFFFFF !important;
        border-left: 2px solid #909DAD !important;
    }

    /***************************************/
    /*    GESTION REVERSE                   */
    /***************************************/

    /* UL reverse gestion bord droit*/
    .menu_doliplus ul.reverse {
        position: static;
    }

    /* Hover Display Second Sub Menu - Reverse*/
    .menu_doliplus li ul li:hover ul.reverse {
        position: absolute;
        display: flex;
        flex-flow: column wrap;
        top: 0;
        width: 195px;
        left: -190px;
    }

    /* fleche coté vue gauche - Reverse*/
    .menu_doliplus ul ul.reverse li:first-child a:after {
        left: 185px;
        top: 12px;
        width: 0;
        height: 0;
        border-left: 0;
        border-bottom: 5px solid transparent;
        border-top: 5px solid transparent;
        border-right: 8px solid #909DAD;
    }

    /* bordure droite - fleche coté vue gauche*/
    .menu_doliplus ul ul.reverse li:first-child>a {
        border-top: 2px solid #FFFFFF !important;
        border-left: 2px solid #FFFFFF !important;
        border-right: 2px solid #909DAD !important;
    }

    /* Large screens */
    @media all and (min-width: 800px) {
        #menu_mob {
            display: none;
        }

    }

    /* Small screens */
    @media all and (max-width: 799px) {

        /*      core\tpl\login.tpl.php*/
        #menu_short,
        #menu_main {
            display: none;
        }

        .menu_doliplus {
            position: static;
            flex-flow: column wrap;
            text-align: left;
            align-items: flex-start;

        }

        .menu_doliplus ul {
            min-width: 60px;
        }

        .menu_doliplus a {
            text-align: left;
            min-width: 118px;
            display: inline-block;
        }

        /* Taille box Sub Menu  */
        .menu_doliplus li ul a {
            width: 50px;
            padding: 13px !important;
            border: 2px solid !important;
            border-color: #FFFFFF !important;
        }

        .menu_doliplus li:hover ul {
            top: 0;
            left: 100%;
        }

        .menu_doliplus li ul li:hover ul {
            top: 0;
            left: 100%;
        }

        /* Arrow above */
        .menu_doliplus li ul li:first-child>a:after {
            left: -8px;
            top: 12px;
            width: 0;
            height: 0;
            border-left: 0;
            border-bottom: 5px solid transparent;
            border-top: 5px solid transparent;
            border-right: 8px solid #909DAD;
        }

        /*  top border dessus - Arrow above*/
        .menu_doliplus li ul li:first-child>a {
            border-top: 2px solid #FFFFFF !important;
            border-left: 2px solid #909DAD !important;
        }

        .cd-panel-container {
            width: 380px;
            top: 30px;
            left: 1px;
        }

        div.login_block {
            position: absolute;
            width: 150px;
            float: none;
            top: 5px;
            left: 120px;
        }

        .closeButton {
            position: absolute;
            left: 0300px;
            right: 0px;
            width: 35px;
        }
    }


    .tax_rate {
        background-color: #909DAD;
        color: white;
    }

    /***************************************/
    /*    GESTION MENU  VERTICAL         */
    /***************************************/

    #menu_v {
        position: static;
        flex-flow: column wrap;
        text-align: left;
        align-items: flex-start;

        div.login_block {
            position: absolute;
            width: 200px;
            float: none;
            top: 0px;
            left: 120px;
        }

    }
    #menu_v ul {
        min-width: 70px;
    }

    #menu_v a {
        color: #101010;
        text-align: left;
        min-width: 125px;
        display: inline-block;
    }

    /* Taille box Sub Menu  */
    #menu_v li ul a {
        color: #101010;
        min-width: 105px;
        padding: 13px !important;
        border: 2px solid !important;
        border-color: #FFFFFF !important;
    }

    #menu_v li:hover ul {
        top: 0;
        left: 100%;
    }

    #menu_v li ul li:hover ul {
        top: 0;
        left: 100%;
    }

    /* Arrow above */
    #menu_v li ul li:first-child>a:after {
        left: -8px;
        top: 12px;
        width: 0;
        height: 0;
        border-left: 0;
        border-bottom: 5px solid transparent;
        border-top: 5px solid transparent;
        border-right: 8px solid #909DAD;
    }

    /*  top border dessus - Arrow above*/
    #menu_v li ul li:first-child>a {
        border-top: 2px solid #FFFFFF !important;
        border-left: 2px solid #909DAD !important;
    }

    /* ============================================================================== */
    /* Icon button                                                             */
    /* ============================================================================== */

    div.iconmenu {
        display: inline-block;
        /* none /inline-block;  ::ici pour logo dessus  */
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        /* padding:1px;  ::ici agrandir */
    }

    div.iconmenu.searchmenu {
	background-image: url(/htdocs/theme/common/search.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.searchloupe {
	background-image: url(/htdocs/theme/common/loupe.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.menusearch {
	background-image: url(/htdocs/theme/common/menusearch.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.searchperso {
	background-image: url(/htdocs/theme/common/searchperso.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.home {
	background-image: url(/htdocs/theme/common/img/menus/home.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.companies {
	background-image: url(/htdocs/theme/common/img/menus/company.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.products {
	background-image: url(/htdocs/theme/common/img/menus/products.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.commercial {
	background-image: url(/htdocs/theme/common/img/menus/commercial.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.accountancy {
	background-image: url(/htdocs/theme/common/img/menus/money.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.bank {
	background-image: url(/htdocs/theme/common/img/menus/bank.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.project {
	background-image: url(/htdocs/theme/common/img/menus/project.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.tools {
	background-image: url(/htdocs/theme/common/img/menus/tools.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.ftp {
	background-image: url(/htdocs/theme/common/img/menus/tools.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.members {
	background-image: url(/htdocs/theme/common/img/menus/members.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.shop {
	background-image: url(/htdocs/theme/common/img/menus/shop.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.agenda {
	background-image: url(/htdocs/theme/common/img/menus/agenda.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.ecm {
	background-image: url(/htdocs/theme/common/img/menus/ecm.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.webcal {
	background-image: url(/htdocs/theme/common/img/menus/generic1.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.cashdesk {
	background-image: url(/htdocs/theme/common/img/menus/generic2.png);
	height: 18px;
	width: 18px;
}
div.iconmenu. {
	background-image: url(/htdocs/theme/common/img/menus/generic3.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.support {
	background-image: url(/htdocs/custom/support/img/support.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.magicmenu {
	background-image: url(/htdocs/custom/magicmenu/img/magicmenu.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.multicompany {
	background-image: url(/htdocs/custom/multicompany/img/multicompany.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.googlemaps {
	background-image: url(/htdocs/custom/googlemaps/img/googlemaps.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.accountingex {
	background-image: url(/htdocs/custom/accountingex/img/accountingex.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.contacts {
	background-image: url(/htdocs/custom/contacts/img/contacts.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.incoterm {
	background-image: url(/htdocs/custom/incoterm/img/incoterm.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.multicurrency {
	background-image: url(/htdocs/custom/multicurrency/img/multicurrency.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.speedfinder {
	background-image: url(/htdocs/custom/speedfinder/img/speedfinder.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.cron {
	background-image: url(/htdocs/custom/cron/img/cron.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.caldav {
	background-image: url(/htdocs/custom/caldav/img/caldav.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.shippableorder {
	background-image: url(/htdocs/custom/shippableorder/img/shippableorder.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.product {
	background-image: url(/htdocs/theme/common/img/menus/generic4.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.milestone {
	background-image: url(/htdocs/custom/milestone/img/milestone.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.bankimport {
	background-image: url(/htdocs/custom/bankimport/img/bankimport.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.mobile {
	background-image: url(/htdocs/custom/mobile/img/mobile.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.factory {
	background-image: url(/htdocs/custom/factory/img/factory.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.barcodeplus {
	background-image: url(/htdocs/custom/barcodeplus/img/barcodeplus.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.notifi {
	background-image: url(/htdocs/custom/notifi/img/notifi.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.cr {
	background-image: url(/htdocs/custom/cr/img/cr.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.marketing {
	background-image: url(/htdocs/custom/marketing/img/marketing.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.cloud {
	background-image: url(/htdocs/custom/cloud/img/cloud.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.linkweb {
	background-image: url(/htdocs/custom/linkweb/img/linkweb.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.esign {
	background-image: url(/htdocs/custom/esign/img/esign.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.formulaire {
	background-image: url(/htdocs/custom/formulaire/img/formulaire.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.stockplus {
	background-image: url(/htdocs/custom/stockplus/img/stockplus.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.calling {
	background-image: url(/htdocs/custom/calling/img/calling.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.outils {
	background-image: url(/htdocs/custom/outils/img/outils.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.projetplus {
	background-image: url(/htdocs/custom/projetplus/img/projetplus.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.categorycontact {
	background-image: url(/htdocs/custom/categorycontact/img/categorycontact.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.lead {
	background-image: url(/htdocs/custom/lead/img/lead.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.inventory {
	background-image: url(/htdocs/custom/inventory/img/inventory.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.archives {
	background-image: url(/htdocs/custom/archives/img/archives.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.catalogue {
	background-image: url(/htdocs/custom/catalogue/img/catalogue.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.ndfp {
	background-image: url(/htdocs/custom/ndfp/img/ndfp.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.box {
	background-image: url(/htdocs/custom/box/img/box.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.statistic {
	background-image: url(/htdocs/custom/statistic/img/statistic.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.moncloud {
	background-image: url(/htdocs/custom/moncloud/img/moncloud.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.tri {
	background-image: url(/htdocs/custom/tri/img/tri.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.carddav {
	background-image: url(/htdocs/custom/carddav/img/carddav.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.sepa {
	background-image: url(/htdocs/custom/sepa/img/sepa.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.sendinblue {
	background-image: url(/htdocs/custom/sendinblue/img/sendinblue.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.grh {
	background-image: url(/htdocs/custom/grh/img/grh.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.ticketsup {
	background-image: url(/htdocs/custom/ticketsup/img/ticketsup.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.office {
	background-image: url(/htdocs/custom/office/img/office.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.sepavir {
	background-image: url(/htdocs/custom/sepavir/img/sepavir.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.resource {
	background-image: url(/htdocs/custom/resource/img/resource.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.messagerie {
	background-image: url(/htdocs/custom/messagerie/img/messagerie.png);
	height: 18px;
	width: 18px;
}
div.iconmenu.maintenance {
	background-image: url(/htdocs/custom/maintenance/img/maintenance.png);
	height: 18px;
	width: 18px;
}

    /* ============================================================================== */
    /* Icon button  inline-toggle-button-buttonstrip -  lib/lib_head.js                                                            */
    /* ============================================================================== */
    .switch-button {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
        border: solid 1px #909DAD;
    }

    .switch-button-label {
        display: flex;
        background-color: #DAE2EC;
        align-items: center;
        justify-content: center;
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    /* Rounded sliders */
    .slider-button.round {
        border-radius: 34px;
    }

    .slider-button.round:before {
        border-radius: 50%;
    }

    .switch-button input {
        display: none;
    }

    .slider-button {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider-button:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked+.slider-button {
        background-color: #DAE2EC;
    }

    input:focus+.slider-button {
        box-shadow: 0 0 1px #DAE2EC;
    }

    input:checked+.slider-button:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Cercle user + content  */
    .doli-circle {
        /* (A) PERCENTAGE WIDTH & BORDER RADIUS */
        width: var(--my-size-circle);
        border-radius: 50%;

        /* (B) BACKGROUND COLOR */
        background-color: var(--my-color-back);

        /* (C) NECESSARY TO POSITION TEXT BLOCK */
        line-height: 0;
        position: relative;
    }

    /* (D) MATCH HEIGHT */
    .doli-circle::after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    /* (E) TEXT BLOCK */
    .doli-circle-txt {
        /* (E1) CENTER TEXT IN CIRCLE */
        position: absolute;
        bottom: 50%;
        width: 100%;
        text-align: center;

        /* (E2) THE FONT - NOT REALLY IMPORTANT */
        /* font-family: arial, sans-serif; */
        font-weight: bold;
    }

    /* ============================================================================== */
    /* Tableau des produits - Entetes fixes sur devis commande facture                                                           */
    /* ============================================================================== */

    table.table_sticky {
        position: relative;
        border-collapse: collapse;
    }

    .sticky_head_alternate {
        position: -webkit-sticky;
        /* for Safari */
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .sticky_head tr.sticky_row {
        position: -webkit-sticky;
        /* for Safari */
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* ============================================================================== */
    /* Disco Myfield class                                                           */
    /* ============================================================================== */
    
    fieldset.fieldset-red{
    border: 2px solid red !important;
    }

    .action_button{
            border: 1px solid #b4c4d8;
            color: #27433f;
            padding: 4px 10px;
            margin: 4px 5px;
            text-decoration: none;
            cursor: pointer;
            display: inline-block;
    }

    /* ============================================================================== */
    /* function selectarray_image                                                     */
    /* ============================================================================== */
    .select_with_image {
        width: 200px;
        height: 22px;
        line-height: 22px;
        vertical-align: middle;
        position: relative;
        background: white;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .select_with_image::after {
        content: "▼";
        font-size: 0.5em;
        font-family: arial;
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translate(0, -50%);
    }
    .select_with_image:hover::after {
        content: "";
    }
    .select_with_image:hover {
        overflow: visible;
    }
    .select_with_image:hover .options_with_image .option_with_image label {
        display: inline-block;
    }
    .select_with_image:hover .options_with_image {
        background: white;
        border: 1px solid #ccc;
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: auto;
        overflow-y: scroll;
        z-index:3;
    }
    .select_with_image .options_with_image .option_with_image {
        overflow: hidden;
    }
    .select_with_image:hover .options_with_image .option_with_image {
        height: 22px;
        overflow: hidden;
    }
    .select_with_image .options_with_image .option_with_image img {
        vertical-align: middle;
    }
    .select_with_image .options_with_image .option_with_image span.span_option_with_image {
        display: none;
    }
    .select_with_image .options_with_image .option_with_image input {
        width: 0;
        height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        display: inline-block;
        position: absolute;
        left: -10000px;
    }
    .select_with_image .options_with_image .option_with_image input:checked + span.span_option_with_image {
        display: block;
        width: 100%;
    }
    .select_with_image:hover .options_with_image .option_with_image input + span.span_option_with_image {
        display: block;
    }
    .select_with_image:hover .options_with_image .option_with_image input:checked + span.span_option_with_image {
        background: #DAE2EC;
    }
    
    /* ============================================================================== */
    /*  Header vertical                                                    */
    /* ============================================================================== */
    div.vertical_header {
      margin-left: -85px;
      position: absolute;
      width: 215px;
      transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      /* Safari/Chrome */
      -moz-transform: rotate(-90deg);
      /* Firefox */
      -o-transform: rotate(-90deg);
      /* Opera */
      -ms-transform: rotate(-90deg);
      /* IE 9 */
    }
    
    th.vertical_header {
      height: 220px;
      line-height: 14px;
      padding-bottom: 20px;
      text-align: left;
    }
</style>