/*
    Styles css de base.
*/

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
         url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
         url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body, form {
    font: 12px arial, helvetica, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    color: #404040;
    box-sizing:border-box;
    overflow: hidden;
}

body, textarea, select, input {
    font-size: 12px;
    font-family: arial, helvetica, sans-serif;
}

em {
    color: inherit;
}

/* Plusieurs pages web. */
#divCommandButtons {
    clear: both;
}

/* FrameWork/PageNavigator, FrameworkWeb/BaseTable, FrameworkWeb/VItemPageNavigator */
.pageSelection { margin-left: 10px; margin-right: 50px; }

/* WebStopPayment/StopPaymentDetails, WebStopPayment/Buffer_AddSelectedStopPayment */
td.headerLink {
    color: #FFFFFF;
    background-color: #8594A9;
}


/* Plusieurs pages web, arbre de checkboxes. */
.treeTable {
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
    padding-left: 3px;
    white-space: nowrap;
    font-style: normal;
}

    /* Plusieurs pages web, arbre de checkboxes. */
    .treeTable img {
        border: 0px;
    }

/* Plusieurs pages web, arbre de checkboxes. */
.treeTableSection {
    font-style: normal;
    white-space: nowrap;
}

/* Plusieurs pages web, plusieurs labels sur une ligne. */
.sectionLabelCtrlInLine {

    padding-top: 0.2em;
    padding-right: 8px;
    white-space:nowrap;
    width:6em;
}

/* WebSales/Proposal */
.sectionNote {
    padding-top: 4px;
    padding-bottom: 10px;
    min-width: 610px;
}

/* Plusieurs pages web, section avec margin bottom petit. */
.sectionDataSmallMargin {
    margin-bottom: 15px;
}


/* WebTimeAttendance/RuleTimeBySchedule */
.sectionLabelLookalike {
    float: left;
    padding-top: 0.2em;
    padding-right: 8px;
    padding-left: 8px;
    overflow: hidden;
    text-align: right;
    width: 18em;
    vertical-align: bottom;
    white-space: nowrap;
    font-weight: bold;
    color: #404040;
    vertical-align: text-bottom;
}

/*****************************************************
    Info header / Employee header 
 *****************************************************/
/* WebPayroll/Controls/EmployeeHeader, WebTimeAttendance/Controls/EmployeeHeader */
.EmployeeInfoHeader{
    border-style: solid;
    border-width: 1px;
    border-color: #d0d0c8; /* V5.6 TABLE */
    border-collapse:collapse; /* V5.6 TABLE */
    background-color: #f9f9f5;
    border-spacing:0px;

}
    /* WebPayroll/Controls/EmployeeHeader, WebTimeAttendance/Controls/EmployeeHeader */
    .EmployeeInfoHeader thead  {
        font-weight: bold;
        color: #404040;
    }
    /* WebPayroll/Controls/EmployeeHeader, WebTimeAttendance/Controls/EmployeeHeader */
    .EmployeeInfoHeader  th{
        border:1px solid; /* V5.6 TABLE */
        border-top-color:#f0f0e8; /* V5.6 TABLE */
        border-bottom-color:#f0f0e8; /* V5.6 TABLE */
        border-left-color:#d0d0c8; /* V5.6 TABLE */
        border-right-color:#d0d0c8; /* V5.6 TABLE */
        font-weight: bold;
        color: #5b5b5b;
        padding: 3px; /* V5.6 TABLE */
        text-align: left;
    }

    /* WebPayroll/Controls/EmployeeHeader, WebTimeAttendance/Controls/EmployeeHeader */
    .EmployeeInfoHeader  td{
        border:1px solid; /* V5.6 TABLE */
        border-top-color:#f0f0e8; /* V5.6 TABLE */
        border-bottom-color:#f0f0e8; /* V5.6 TABLE */
        border-left-color:#d0d0c8; /* V5.6 TABLE */
        border-right-color:#d0d0c8; /* V5.6 TABLE */
        padding: 3px; /* V5.6 TABLE */
        color:#5b5b5b;
    }

    /* WebPayroll/Controls/EmployeeHeader, WebTimeAttendance/Controls/EmployeeHeader */
    .EmployeeInfoHeader th.nowrapcell {
        white-space: nowrap;
    }

    /* WebPayroll/Controls/EmployeeHeader, WebTimeAttendance/Controls/EmployeeHeader */
    .EmployeeInfoHeader th.numeric {
        text-align: right;
    }
/*.EmployeeInfoHeader th.numeric, td.numeric {
    text-align: right;	
}*/

/* FrameWork/BaseForm */
.colMultiSectionLabelCCQ 
{
    float: left;
    padding: 0.2em;
    padding-right: 8px;
    padding-left: 8px;
    overflow: hidden;
    text-align: left;
    width: 5em;
    vertical-align: bottom;
    white-space:nowrap;
}

/*********Promotional info text used in the No Access Information pages***********/

/* Plusieurs pages web, entête groupe. */
.groupHeader {
    padding-right: 0px;
    padding-left: 0px;
    font-weight: bold;
    padding-bottom: 2px;
    padding-top: 8px;
    color: #666666;
    text-align: left;
}
/********************** error messages *************************/

/* WebStopPayment/StopPaymentDetails */
.divSectionError {
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border-bottom-width: 1px;
    border-bottom-color: #aaaaaa;
}

/* WebStopPayment/StopPaymentDetails, WebStopPayment/Buffer_AddSelectedStopPayment */
.headerLink a:active, .headerLink a:link, .headerLink a:visited, .headerLink a:hover {
    color: #FFFFFF;
}

/***** Section message d'information *****/

/* FrameWork/TableListColumnImage, plusieurs pages web. */
.InformationSection {
    border-right: #aaaaaa 1px solid;
    padding-right: 4px;
    border-top: #aaaaaa 1px solid;
    padding-left: 4px;
    background: #c1d8f1;
    padding-bottom: 4px;
    border-left: #aaaaaa 1px solid;
    padding-top: 4px;
    border-bottom: #aaaaaa 1px solid;
    display:none;
    width:500px;
    z-index:150;
    position:absolute
}

/* WebPayroll/Controls/EmployeeParamAbsCtl */
.plainText {
    color: #404040;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
}

/****** Saisie Gauche/Droite *******/
/* Plusieurs pages web. */
.SubSection{
    white-space:nowrap;
    float: left;
    vertical-align:top;
    padding-right:30px;
}

/* Plusieurs pages web. */
.SubSectionTitle{
    BORDER-BOTTOM: #aaaaaa 1px solid;
    COLOR: #336699;
    FONT-WEIGHT: bold;
    PADDING-TOP: 15px;
    padding-bottom: 2px;
    margin-bottom: 3px;
}

/* Plusieurs pages web. */
.SubSectionContent{
    vertical-align:top;
}

/* Plusieurs pages web. */
.AlignLeft{
    TEXT-ALIGN: left;
    padding-left:0px;
    margin-left:0px;
    display:inline-block;
    float:none
}

/**************************************************************
    Section pour le calendrier d'assiduité
**************************************************************/
/* WebPayroll/Controls/AbsenceCalendar, WebApp/EmployeeAttendance.css */
#tableAssiduite th {
    background-color: #E6E6E1;
    width: 1.75em;
    text-align: center;
}

/* WebPayroll/Controls/AbsenceCalendar, WebApp/EmployeeAttendance.css */
#tableAssiduite td {
    border: solid 1px #E6E6E1;
    text-align: center;
}

    /* WebPayroll/Controls/AbsenceCalendar, WebApp/EmployeeAttendance.css */
    #tableAssiduite td.invalidDate {
        background-color: black;
    }

    /* WebPayroll/Controls/AbsenceCalendar, WebApp/EmployeeAttendance.css */
    #tableAssiduite td.weekEnd, div.weekEnd {
        background-color: #D6D6D1;
    }

/*  PROPRIÉTÉS DES CHAMPS DE SAISIE 
    
    Afin d'assurer un alignement des libellés et contrôle, la hauteur est établie à 24px pour ceux-ci.
    certaines erreurs d'alignement persistent à cause des styles "Inline" sont utilisées dans les pages

*/


select
{
    box-sizing:border-box;
    padding:4px 5px;
    color: #404040;
    border:1px solid #ddd;
    text-align: left;
}

input[type=text], input[type=password], input[type=email], input[type=tel] {
    box-sizing: border-box;
    min-width: 2.8em !important; /* Cette valeur override la largeur du style Inline pour s'assurer que les plus petits champs soient suffisamment large */
    padding: 4px 5px;
    color: #404040;
    border: 1px solid #ddd;
    text-align: left;
}

input[type=checkbox]
{
    color: #404040;
    border:1px solid #ddd;
}

/* TODO dead code. */
.creationSectionLabel
{
    min-height:1px;
    float: left;
    line-height:24px;
    width: 20px;
    padding: 0 8px 0 5px;
    overflow: hidden;
    text-align: right;
    white-space: normal;
}

/* Partout */
.sectionLabel
{
    min-height:1px;
    float: left;
    line-height:24px;
    width: 210px;
    padding: 0 8px 0 5px;
    overflow: hidden;
    text-align: right;
    white-space: normal;
}

/* TODO dead code. */
.CustomSectionLabel
{
    min-height:1px;
    line-height:24px;
    width: 210px;
    padding: 0 8px 0 0px;
    overflow: hidden;
    text-align: right;
    white-space: normal;

}

/* Champs utilisateurs. */
.sectionCustomFieldLabel
{
    color: #006699;
    font-style: italic;
}

/* TODO dead code. */
.sectionLabelContainer {
    padding-top: 0.7em;
}

/* Certaines pages web. */
.sectionLabelContent
{
    float: left;
    /*padding-top: 0.2em;*/
    padding-right: 8px;
    padding-left: 0px;
    vertical-align: bottom;
    white-space: nowrap;
}



/* Partout */
.fieldLabel
{
    line-height:24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Partout */
.sectionControl {
    line-height:24px;
    float: left;
}


/* Hilite des champs ayant le focus afin de faciliter le repérage
    S'apllique seulement aux fureteurs supportant cet opérateur (pas de rétro compatibilité nécessaire 
    TODO : Le combo "chosen" n'utilisent pas ce style actuellement
*/
input:focus,
select:focus,
textarea:focus
{border:1px solid #333;}


/* FrameWork/InputControl */
.grp-input{white-space:nowrap }


/*  CLASSES UTILITAIRES */
.csp-txt-left{text-align : left}
.csp-txt-center{text-align : center}
.csp-txt-right{text-align : right}

.csp-valign-middle {vertical-align: middle}
.csp-valign-textbottom {vertical-align: text-bottom;}

.csp-nowrap {white-space:nowrap;}
.csp-whitespace-nornal {white-space: normal;}
.csp-float-left {float:left;}
/* WebTimeAttendance/TimeEntry */
.csp-margin-bottom-xs {margin-bottom:2px;}
/* TODO dead code. */
.csp-margin-bottom-sm {margin-bottom:5px;}
/* WebApp/ClearViewConfiguration.cshtml */
.csp-margin-bottom-lg {margin-bottom:15px;}
/* TODO dead code. */
.csp-margin-bottom-xl {margin-bottom:25px;}

/* FrameWork/TransferBox, WebPortal/HomePage */
.csp-mrg-top-sm{margin-top:5px;}

/* TODO dead code. */
.csp-pad-top-xs {padding-top:2px!important}
/* TODO dead code. */
.csp-pad-top-sm {padding-top:5px!important}
/* WebPayroll/ModifyFSSRate */
.csp-pad-top-lg {padding-top:15px!important}
/* TODO dead code. */
.csp-pad-top-xl {padding-top:25px!important}

/* TODO dead code. */
.csp-ellipsis{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

/* FrameworkWeb/CSPCGIToggle */
.csp-clear-left {clear:left;}

/* *** PATCH *** 
    Pour ecran Option d'impression
*/

/* TODO dead code. */
    .csp-margin-top-xs {margin-top:2px;}
/* TODO dead code. */
    .csp-margin-top-sm {margin-top:5px;}
/* TODO dead code. */
    .csp-margin-top-lg {margin-top:15px;}
/* TODO dead code. */
    .csp-margin-top-xl {margin-top:25px;}

/* TODO dead code. */
    .csp-margin-right-xs {margin-right:5px;}
/* TODO dead code. */
    .csp-margin-right-sm {margin-right:10px;}
/* TODO dead code. */
    .csp-margin-right-lg {margin-right:15px;}
/* TODO dead code. */
    .csp-margin-right-xl {margin-right:30px;}

/* WebApp/CampaignView.cshtml */
    .csp-margin-left-xs {margin-left:5px;}
/* TODO dead code. */
    .csp-margin-left-sm {margin-left:10px;}
/* WebApp/CampaignView.cshtml */
    .csp-margin-left-lg {margin-left:15px;}
/* TODO dead code. */
    .csp-margin-left-xl {margin-left:30px;}

/* TODO dead code. */
    .csp-text-large {font-size:115%;}


/* *** PATCH *** 
    Les changement ci-dessous ont pour but de corriger un mauvais usage de la disposition d'un libelle et d'un champ de saisie.
    Normalement, on devrait avoir un sectionLabel de défaut et des classes permettant d'identifier si celui-ci à une largeur fixe et
    s'il est align à gauche ou à droite
*/
/* WebPayroll/RecordEmployment */
#cdPosLabel {line-height:24px;} /* corrige l'alignement du libelle éde code postal dans la fonction de production d'un relevé d'emploi*/


/* 
    *** PATCH ***
    Pour les checkbox, on ajuste la hauteur pour qu'il s'aligne correctement seulement lorsqu'affiché immédiatement après un libellé
    Dans les autres cas, on laisse l'affichage de défaut.
*/
.sectionLabel + .sectionInputCkBox,
.sectionLabel + .sectionInputCkBoxDisabled 
{ height: 16px; }


/* 
    *** PATCH ***
    Corrections permettant de corriger l'alignement des valeurs textes suivant un libellé
    Les mêmes styles que la classe FieldLabel sont appliqués lorsque le cas est rencontré.
    Les dernières propriétés supprime des styles Inline si applicables.
    
    CAS #1
    Usage d'un style Inline plutot que la classe FieldLabel 
    On ne l'applique que lorsque la division suit immédiatement le libellé afin de ne pas affecter les autres usage possible 
    de divisions ayant de tels styles. 
    
    CAS #2
    Usage des valeurs textes affiché sous forme de Label et n'utilisant pas la classe FieldLabel et n'ayant aucun style ou classe particulière.
    Dans tous les cas, on ne corrige que les cas où la valeur suit immédiatement un libellé afin de ne pas affecter le reste de l'application. 
*/
.sectionLabel + div[style*="inline"],
.sectionLabel + label
{
    line-height:24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Enlevé le float none cause des probleme bug 20190
        il faut révisé cette façon de remplacé les style. Les input controles génère des styles inline dynamiquement selon les propriétés
        float:none!important;*/
    margin-bottom:0px!important;
    text-align:left!important;
    color:inherit!important;
}


    /* 
    *** PATCH ***
    Corrections permettant de corriger l'alignement hyperliens associés à une valeur suivant un libellé
    (ex. taux horaires dans résumé du profil d'emploi)
*/
.sectionLabel + div[style*="inline"] + a
{
    line-height:24px;
    vertical-align:top;
    margin-left:10px;
}


/* 
    *** PATCH ***
    Corrections permettant de corriger l'alignement des valeurs textes suivant un champs de type checkbox ou radio
    et n'utilisant pas une classe standard
*/
input[type="checkbox"] + div[style*="inline"],
input[type="radio"] + div[style*="inline"] 
{
    line-height:24px;
    float:none!important;
    text-align:left!important;
    color:inherit!important;
    vertical-align:top;
}

/* WebPortal/UserProfile */
.csp-info-photo-profile-personel
{
    DISPLAY:inline-block; 
    *display: inline; /* IE < 8 */
    *zoom : 1; /* IE < 8 : à tester pas forcement nécessaire */
    vertical-align:top; 
    text-align: left; 
    margin-left:49px; 
    width:600px;
}

/* Plusieurs pages web. */
.csp-flat-input
{
    line-height :24px;
}

/* Plusieurs pages web. */
.csp-flat-input-desc
{
    line-height :24px;
    display: inline-block;
    margin-left: 15px;
}

/* */
/* Plusieurs pages web de WebSales */
.sectionInputFile {
    color: #404040;
    text-align: left;
}


/* Plusieurs pages web. */
.sectionInputDisabled { background-color: #eeeeee; }

/* FrameworkWeb/BaseInputControlBuilder */
.csp-input-readonly {
    background-color: #eeeeee;
    cursor: not-allowed;
    pointer-events: none;
}

/* FrameWork/InputControl, FrameWork/InputTextAreaControl */
.sectionInputNum { text-align: right; min-width: 1.57em; }
/* Plusieurs pages web. */
.sectionInputNumDisabled { text-align: right; min-width: 1.57em; background-color: #eeeeee; }

/* FrameWork/InputControl, FrameWork/InputTextAreaControl */
.sectionInputFocus { text-align: left; }
/* FrameWork/InputControl, FrameWork/InputTextAreaControl */
.sectionInputFocusNum {	text-align: right; }


/* FrameWork/InputControl */
.sectionInputWithListGroup,.sectionInputWithListGroupCCQ
{
    border:1px solid #ddd;     
    display:inline-block; 
    white-space:nowrap; 
    background-color:White;    
    float:right;
}

/* FrameWork/BaseForm */
.sectionInputWithListGroupCCQ
{
    float:left;
    margin-bottom:2px;

}

/* FrameWork/InputControl */
.csp-disabled-color {
    color: grey;
}

/* FrameWork/InputControl */
.csp-disabled-InputWithListGroup{
    background-color: #eeeeee;
}

/* FrameWork/InputControl */
.sectionInputWithListGroupDisabled
{
    border:1px solid #ddd;    
    display:inline-block; 
    white-space:nowrap; 
    background-color: #eeeeee;
    float:right;
}



/* FrameWork/InputControl, FrameWork/InputTextAreaControl */
.inputCtrlWithList
{
    border-style:none!important; 
}


/* FrameWork/InputControl, FrameworkWeb/WorkTeamControlBuilder */
.imgCtrlWithList
{
    cursor:pointer; 	
    padding-top : 1.5px;
    padding-left:1px;
    padding-right:2px;

}

/* FrameWork/InputControl */
.imgCtrlWithListDisabled
{
    background-color: #eeeeee;
    cursor:pointer; 
    padding-top : 1.5px;
    padding-left:1px;
    padding-right:2px;
}


/* Plusieurs pages web de WebPayroll. */
.sectionLabelContainer { padding-top:0.3em!important; }


/* Correction de l'alignement des valeurs textes dans un span suivant un libellé  
.sectionLabel + span[class="fieldLabel"]
{background-color:#ff0000;}

    */



/* Patch pour IE10 Win8, Style pour cacher le petit X et le petit oeil qui apparaisent dans les champs TEXT et PASSWORD */
/* TODO dead code. */
::-ms-clear {
    display: none;
}

/* TODO dead code. */
::-ms-reveal 
{
    display: none;
}

a, a:link, a:visited { text-decoration: underline; }
a.LinkBold:link  
{
      color:#000000;
}
a.LinkBold:visited  
{
      color:#000000;
}

h1, h2, h3, h4, h5, h6 { }

h1 { font-size: 18px; }
h2 { font-size: 14px; }
h3 { font-size: 12px; margin: 0; padding: 0; }

/* FrameWork/FunctionSection, FrameworkWeb/FunctionSection */
.pageTitleBold{
    font-weight:bold;
}

img { border: none; }

textarea 
{   resize:none;
    overflow-y:scroll;
    overflow-x:auto;
    padding:4px 5px;
    color: #404040;
    border:1px solid #ddd;
}

/* v7.4 
    Le design des tables consiste à encradrer celle-ci dans un container avec un fond blanc et un padding de 15 px
    Toutefois, dans la version 7.4 aucun changement dans la génération des tables n'était prévu
    Pour simuler le design, un border blanc de 15px et un shadow ont été utilisé
    Afin de que le titre (navheader) ne soit pas décaler vers le bas , on enlève le padding top de celui-ci
    Des ajustements sont aussi faits pour IE8 car il ne supporte pas le Shadow (voir ie8.css)
    TODO : À réviser dans une prochaine version
 */
/* Tableaux */
.defaultTable {
    font-style: normal;	
    text-decoration: none;
    background:#fff;
    border:15px solid #fff;  
    border-collapse:separate;  /* Requis pour que le Box-Shadow fonctionne avec IE */
    border-spacing:0px;  /* Requis pour que le Box-Shadow fonctionne avec IE */
    border-radius:3px;
    box-shadow: 0px 0px 3px #ccc;
}


    /* Tableaux, td, text centré. */
    .defaultTable td.middle {
        text-align: center;
    }

    /* Tableaux, td (entête ???) centré. */
    .defaultTable td.headercenter {
        font-weight: bold;
        color: #404040;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-right: 3px;
        padding-left: 3px;
        text-align: center;
    }

    /* TODO dead code. */
    .defaultTable td.colAlignLeft {
        text-align: left;
    }

    /* WebPayroll/RapidEntry */
.defaultTable td.footerSumValue {
    color:#6f6864;
    text-align:right;
}

    /* WebPayroll, traitements massifs, et RapidEntry */
.defaultTable.fixTblPart{
    border-right:0
}


    /* WebPayroll, traitements massifs, et RapidEntry */
.defaultTable.scrollTblPart{
    border-left:0
}

    /* TODO dead code. */
    .defaultTable td.headercenter {
        font-weight: bold;
        color: #404040;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-right: 3px;
        padding-left: 3px;
        text-align: center;
    }

    /* Tableaux, th de l'entête de navigation. */
.defaultTable tr.navHeader th {
    font-size: 14px;
    font-weight: bold;
    height:30px;
    padding-top:0px; /*v7.4 Voir commentaire du defaultTable */
}

    /* Tableaux, tfoot. */
.defaultTable tfoot {
    font-weight: bold;
    color: #404040;
    /* v7.4 
    border-style: solid;
    border-width: 1px;
*/
    background-color: #f0f0f0;
}

    /* Tableaux, tbody. */
    .defaultTable tbody {
        font-weight: normal;
    }

    /* Tableaux, thead. */
.defaultTable thead 
{
    border-right: none;
    border-left: none;
}


    /* L'ajout d'une ligne blanche sous chaque cellule de l'entête permet d'avoir une ligne de séparation lorsque
    l'entête contient plus d'une ligne, sans affecter l'affichage des grilles n'ayant qu'une seule ligne d'entête 
*/
    /* Tableaux, th */
    .defaultTable th {
        text-align: center;
        white-space: nowrap;
        border-bottom: 1px solid #fff;
    }

    /* Tableaux, img */
    .defaultTable img {
        border: 0;
    }

    /* Tableaux th, Tableaux td, Warnings dans FrameworkWeb/ContextSection */
.defaultTable th, .defaultTable td, #warning0 table tbody tr td 
{
        padding: 8px 5px;
        border-right: 1px solid #fff;
        font-weight: normal;
}

        /* Tableaux, td numériques. */
.defaultTable td.numeric,  td.numeric {
    text-align: right;
}

        /* Tableaux, td footer. */
        .defaultTable td.footer {
            font-weight: bold;
            color: #404040;
            padding-top: 3px;
            padding-bottom: 3px;
            padding-right: 3px;
            padding-left: 3px;
            text-align: left;
        }

        /* Tableaux, td bold. */
.defaultTable td.boldDesc
{
    font-weight:bold;
}

        /* Tableaux, th numériques. */
        .defaultTable th.numeric {
            text-align: right;
        }

/* FrameWork/ContextSectionWarning, FrameworkWeb/ContextSection */
#warningTable {
    font-style: normal;
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
}

    /* FrameWork/ContextSectionWarning, FrameworkWeb/ContextSection */
    #warningTable td {
        padding: 0px;
    }

/* Cette classe permet d'ajouter une ligne plus foncé lorsque l'on veut diviser un ensebmle de colonnes dans une grille*/
/* Tableaux. */
.defaultTable th.defaultTableRightSeparator,
.defaultTable td.defaultTableRightSeparator
 {border-right:1px solid #bbb; }

/* Tableaux, th centré. */
th.headercenter {
    font-weight: bold;
    color: #404040;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
    padding-left: 3px;
    text-align: center;
}

/* Tableaux, pas de border-right sur dernière colonne. */
.defaultTable th:last-child, .defaultTable td:last-child 
{  
    border-right: none;
}

/*
    Le code ci-dessous permet d,ajouter une espacement entre le libellé d'un entête et la flèche indiquant le 
    sens du tri
*/
/* Tableaux. */
.defaultTable th  img[alt="asc"],
.defaultTable th  img[alt="desc"]
{  
    margin-left:5px;
}



/* Tableaux, sans border. */
.defaultTableNoBorder {
    font-style: normal;
    border: none;
    background-color: transparent;
    margin-top: 8px;
}

    /* Tableaux, sans border. */
.defaultTableNoBorder th, .defaultTableNoBorder td {padding-right:20px; margin:0;}

/* WebPayrollApp/PostIntegrationYearToDateView.cshtml */
.defaultTableLeft {
    border-right: 0px;
    float: left;
    box-shadow: none;
}

/* WebPayrollApp/PostIntegrationYearToDateView.cshtml */
.defaultTableRight {
    border-left: 1px solid #fff;
}

    /* WebPayrollApp/PostIntegrationYearToDateView.cshtml */
    .defaultTableLeft td, .defaultTableRight td {
        height: 30px;
    }

/* WebPayrollApp/PostIntegrationYearToDateView.cshtml */
.defaultTableFoot {
    line-height: 16px !important;
}

/* WebPayrollApp/PostIntegrationYearToDateView.cshtml */
.defaultTableRight th {
    line-height: 12px;
}

/* WebPayrollApp/PostIntegrationYearToDateView.cshtml */
.defaultTableLeft th {
    line-height: 29px;
}

/* TODO dead code. */
.ukGridNoPaddingLeft {
    padding-left: 0px;
}

/* TODO dead code. */
.divTableEditionScrollable {
    overflow-y: auto;
    padding-left: 0px;
}


/* FrameWork/BaseTableListColumn. */
.csp-col-icon{margin-left:5px}

/* Ajustement des propriétés du tableau servant à afficher une section défilante 
   dans la portion de droite d'une grille à multiples colonnes */

/* WebPayroll, traitements massifs, et RapidEntry */
.csp-scroll-table-section 
{
    border-radius: 3px;
    box-shadow: 0px 0px 3px #ccc;
    overflow-x: auto !important;
    overflow-y: hidden  !important;
}




/* ***PATCH*** 
    La classe ci-dessous est malheureusement définie directement dans les pages et doit être ovveridé à ce niveau afin
    de corriger l'affichage selon la nouvelle ergonomie
*/
/* WebPayroll/TrainingExpensesReport, WebReports 4 pages web. */
.scrollableTables 
{
    border: none !important; 
    border-radius:3px;
    box-shadow: 0px 0px 3px #ccc;

}

/* Tableaux, FrameworkWeb/TableEdition. */
.divTableFixedLeft {
    float: left;
}

/* Tableaux, FrameworkWeb/TableEdition, th. */
.LeftTableFixedHeader th {
    line-height: 29px;
}

/* Tableaux, FrameworkWeb/TableEdition, th. */
.RightTableFixedHeader th {
    line-height: 12px;
}


/* Tableaux, FrameworkWeb/TableEdition. */
.divLeftScrollTableFixedHeader {
    overflow-y: hidden;
    overflow-x: hidden;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.divRightScrollTableFixedHeader {
    overflow-y: hidden;
    overflow-x: hidden;
    max-width: min-content;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.divLeftScrollTableFixed {
    overflow-y: hidden;
    overflow-x: hidden;
    max-height: 380px;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.divRightScrollTableFixed {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 380px;
    max-width: min-content;
}

/* Tableaux, FrameworkWeb/TableEdition. */
@media screen and (min-height: 768px) {
    .divLeftScrollTableFixed, .divRightScrollTableFixed {
        max-height: 600px;
    }
}


/* Tableaux, FrameworkWeb/TableEdition. */
.divLeftScrollTableFixedFooter {
    overflow-y: hidden;
    overflow-x: hidden;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.divRightScrollTableFixedFooter {
    overflow-y: hidden;
    overflow-x: scroll;
    max-width: min-content;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.LeftTableFixedHeader {
    border-right: 0px;
    border-bottom: 0px;
    box-shadow: none;
    width: max-content;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.RightTableFixedHeader {
    border-left: 0px;
    border-bottom: 0px;
    box-shadow: none;
    table-layout: fixed;
    width: 100%;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.LeftTableFixedBody {
    border-right: 0px;
    border-top: 0px;
    border-bottom: 0px;
    box-shadow: none;
    width: max-content;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.RightTableFixedBody {
    border-left: 0px;
    border-top: 0px;
    border-bottom: 0px;
    box-shadow: none;
    table-layout: fixed;
    width: 100%;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.LeftTableFixedFooter {
    border-right: 0px;
    border-top: 0px;
    box-shadow: none;
    width: max-content;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.RightTableFixedFooter {
    border-left: 0px;
    border-top: 0px;
    box-shadow: none;
    table-layout: fixed;
    width: 100%;
}

    /* Tableaux, FrameworkWeb/TableEdition. */
    .RightTableFixedBody td, .RightTableFixedHeader th, .RightTableFixedFooter th {
        width: 120px !important;
    }

/* Tableaux, FrameworkWeb/TableEdition. */
.alignLeftTableFixed th, .alignRightTableFixed th, .alignLeftTableFixed td, .alignRightTableFixed td {
    padding: 5px 3px;
}

/* Tableaux, FrameworkWeb/TableEdition. */
.LeftTableFixedHeader th, .RightTableFixedHeader th {
    font-weight: bold;
}

/* ***PATCH 
    Dans les traitements massifs, un defaultTable est utilisé pour afficher les warnings et erreur en popup.
    Un problème similaire est rencontrée dans la vérification des totaux
    Il faut modifier la bordure afin de mieux faire ressortir le popup 
    S'applique seulement que lorsque la table est sous un sectionErrorItems
    Lorsque c'est le cas, il ne faut pas utiliser un affichage zébré car ça réduit la lisibilité (voir CSS par réseau)
*/
/* FrameWork/InputControl, étoile rouge champs obligatoires, et autres éléments. */
.errorCode {
    color: red;
}

/* Div erreurs (pas la zone de messages...) */
#divError > .sectionErrorItems > .defaultTable,
.sectionErrorItems > table
 
{
    background:#fff;
    border: #aaa 1px solid;
    box-shadow: 1px 2px 3px #ccc;
    border-collapse:separate;  /* Requis pour que le Box-Shadow fonctionne avec IE */
    border-spacing:0px;  /* Requis pour que le Box-Shadow fonctionne avec IE */
    border-radius:0px;
}

    /* Div erreurs (pas la zone de messages...) */
#divError > .sectionErrorItems > .defaultTable td, 
.sectionErrorItems > table td
{
    padding:8px 5px;
}

/* FrameWork/TableListColumnMessage, FrameworkWeb/ContextSection */
.sectionColMessageTable {
    width: 100%;
    display: block;
    font-size: 1em;
}

/* Tableaux, FrameWork/PageNavigator, FrameworkWeb/BaseTable */
.sectionNavImageInput {
    height: 14px;
    margin-left: 3px;
    margin-right: 3px;
    vertical-align: middle;
}

/* Tableaux, FrameWork/PageNavigator, FrameworkWeb/BaseTable */
.sectionNavTableElement {
    padding: 0;
    margin: 0;
    text-align: left;
}

/* Tableaux, FrameWork/PageNavigator, FrameworkWeb/BaseTable */
.sectionNavHeader div.NavButtons {
    float: left;
}

/* Tableaux, FrameWork/PageNavigator, FrameworkWeb/BaseTable */
.sectionNavTableElement input[type="image"] { vertical-align: middle; }

/* FrameWork/ButtonSection */
.CommandOption {
    display: inline-block;
    margin-left: -10px;
    margin-right: 8px;
}

    /* FrameWork/ButtonSection */
.CommandOption button { margin-right: 0; border-top-left-radius:0px; border-bottom-left-radius:0px; }

    /* FrameWork/ButtonSection */
    .CommandOption ul {
        display: none;
        margin: 0;
        padding: 10px;
        list-style: none;
        background-color: #fff;
        border: 1px solid;
        position: absolute;
    }

        /* FrameWork/ButtonSection */
.CommandOption ul li { padding: 4px; }

/*********************************************************
    Filtre des saisie massives
*********************************************************/
/* Filtres pour traitements massifs. */
#MassiveFiltersLink {
    padding-right: 8px;
    float: right;
    display: inline;
    color: #fff;
}

    /* Filtres pour traitements massifs. */
    #MassiveFiltersLink a:active {
        color: #fff;
    }

    /* Filtres pour traitements massifs. */
    #MassiveFiltersLink a:link {
        color: #fff;
    }

    /* Filtres pour traitements massifs. */
    #MassiveFiltersLink a:visited {
        color: #fff;
    }

    /* Filtres pour traitements massifs. */
    #MassiveFiltersLink a:hover {
        color: #fff;
    }

/* Affichage du popup contenant les sélections dans un massif*/
/* Filtres pour traitements massifs. */
#divMassiveFilters, .sectionFilter {
    z-index: 250;
    position: absolute;
    margin-top:10px;
    margin-right:20px;
    display: none;
    border: #aaa 1px solid;
    box-shadow: 1px 2px 3px #ccc;
    background-color: #fff;
    color: #888;
    text-align: left;
    right: 16px;
}

    /* Filtres pour traitements massifs. */
#divMassiveFilters div { margin:10px;}

/* TODO dead code. */
.note {
    font-size: 10px;
    padding: 0;
    margin: 0;
}

/* Pour la page d'authentification, on utilise une police un peu plus grosse */
/* TODO dead code. */
#ForgotSection.note {font-size:14px;}

/* Clear both. */
.clear { clear: both; }

/* WebPayroll/CSSTRate, */
.MessageSection { padding: 5px 10px; margin: 12px 0; }

    /* WebPayroll/CSSTRate, */
.MessageSection p { margin: 0; font-weight: bold; }

    /* WebPayroll/CSSTRate, */
.MessageSection ul { margin: 0; padding: 0; list-style: none; }

    /* WebPayroll/CSSTRate, */
.MessageSection li { padding: 2px 0; }

/* TODO dead code. */
.ErrorMessage { background-color: #fdfad9; }

/* TODO dead code. */
.WarningMessage { background-color: #fdfad9; }

/* FrameWork/TopMenu, FrameworkWeb/FunctionSection, FrameworkWeb/CSPCGIMenu */
/* FrameWorkWeb/BaseTable, Framework/UI.Web.Controls/TablePrinter */
.Icon {	margin: 8px; display: inline-block; text-indent: -99999px; }

    .Icon.NoTopMargin {
        margin-top: 0px;
    }

    /* FrameWork/TopMenu, FrameworkWeb/FunctionSection, FrameworkWeb/CSPCGIMenu */
.Icon:hover { background-position: 0 0; }

/* TODO dead code. */
.HelpIcon   { width: 22px; height: 22px; }

/* Icon Imprimante. */
.PrintIcon  { width: 22px; height: 22px; }

/* Icon Excel */
.ExcelIcon { width: 22px; height: 22px; }

/* Icon imprimante invisible. */
@media screen and (max-width: 479px) {
    .PrintIcon {
        display: none;
    }
}

/* Icon info. */
.InfoIcon {
    margin: 0 6px;
    width: 15px;
    height: 15px;
}

/* Icon clavier. */
.KeyboardIcon { width: 26px; height: 22px; }

/* JQuery sortingbox */
.UpIcon     { width: 16px; height: 17px; }

/* JQuery sortingbox */
.DownIcon   { width: 16px; height: 17px; }

/* JQuery sortingbox */
.DeleteIcon { width: 16px; height: 16px; }


/* Icon retour à la liste. */
.GoBackToList {width: 24px; height: 20px;}

/* Icon retour à la fonction. */
.GoBackToFunction { width: 13px; height: 13px;}

/* Icon bouton recherche. */
.SearchButton {  width: 25px; height: 25px; }

/* Détail de section. */
.sectionData {
    padding: 0;
    clear: both;
    margin-bottom: 30px;
}

    /* Détail de section. */
    .sectionData img {
        border: 0px;
    }

/* Détail de sous-section. */
.subSectionData 
{
    padding-top: 4px;
    padding-bottom: 4px;
}

/* FrameWork/TableListEdition, FrameworkWeb/TableEdition */
button.tableActionButton { margin: 8px 8px 5px 0;}

    /* FrameWork/TableListEdition, FrameworkWeb/TableEdition */
button.tableActionButton img { display:none;  }



/********* Main Form *********/
/* Div principal du formulaire. */
.main-form {
    position: fixed;
    top: 0px;
    left: 55px;
    right: 0px;
    width: auto;
    height: 100%;
    border: 0px;
    overflow: auto;
}

    /* Div principal du formulaire. */
    .main-form.sm-active {
        left: 395px;
    }

    /* Div principal du formulaire. */
    .main-form.im-inactive {
        left: 0px;
    }

/* Entête de formulaire. */
.mf-header {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: auto;
    min-width: 950px;
    height: 50px;
    padding-right: 20px;
    border-bottom: 1px solid;
    border-color: #E2E4E6;
    background: #FFFFFF;
    z-index: 40;
}

/* Entête de formulaire. */
#Header {
    padding-right: 20px;
}

/* Section identification. */
.mf-identifier {
    position: absolute;
    top: 51px;
    left: 0px;
    right: 0px;
    padding-top: 10px;
    border-bottom: 1px solid #e8e8e8;
    background: #f1f1f1;
    clear: both;
    z-index: 30;
}

/* Section contenu. */
.mf-body {
    position: absolute;
    top: 51px;
    bottom: 31px;
    left: 0px;
    right: 0px;
    width: auto;
    padding-top: 15px;
    overflow: auto;
}

/* Div main stack. */
#mainDivStack {
    position: fixed;
    right: 0px;
    width: auto;
    height: 100%;
    z-index: 999999999;
    background-color: #333;
    opacity: 0.5;
}

@media screen and (max-width: 1500px) {

    /* Div principal du formulaire. */
    .main-form.sm-active {
        left: 55px;
    }

    /* Div main stack. */
    #mainDivStack {
        left: 376px;
    }
}

@media screen and (max-width: 768px) {

    /* Div principal du formulaire. */
    .main-form {
        left: 0px;
    }

        /* Div principal du formulaire. */
        .main-form.sm-active {
            left: 320px;
        }

    /* Menu hamburger. */
    #headerHambImg {
        margin-left: -40px;
        display: block !important;
    }

    /* Div main stack. */
    #mainDivStack {
        left: 321px;
    }

    /* Entête de formulaire. */
    #Header #OptionMenu {
        display: none;
    }
}

/* Ajustement responsive des marges */
/* Les marges sont calculés de cette façon 
    Au niveau du contenu principal, on a toujours un espacement de 25px à gauche et à droite
    On ajoute ensuite des marges supplémentaires selon la résolution
            Gauche  Droite  
    Base    25px    0px
    >=1200  50px    50px
    >=1366  75px    75px
    >=1600  100px   100px   

    Pour la section de menu, on doit prévoir un espacement différent à la droite de façon à ce que l'image de fermeture
    s'aligne avec les autres éléments. Le décalge est de 12px et aucun espacement interbe n'est requis.
    Le postionnement est donc (total prévu à doite - 25px - 12 px)
*/


/* Entête de formulaire. */
#Header #OptionMenu {
    padding-right: 0px;
    margin-right: -12px;
}

/* Marges gauche-droite sur certaines sections du formulaire. */
.csp-page-margin {
    padding-left: 55px;
    padding-right: 25px;
}

@media screen and (max-width:479px) {

    /* Menu hamburger. */
    #headerHambImg {
        margin-left: -30px;
        display: block !important;
    }

    /* Marges gauche-droite sur certaines sections du formulaire. */
    .csp-page-margin {
        padding-left: 40px;
        padding-right: 40px;
    }
}

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

    /* Entête de formulaire. */
    #Header #OptionMenu {
        padding-right: 38px;
        margin-right: 0px;
    }

    /* Marges gauche-droite sur certaines sections du formulaire. */
    .csp-page-margin {
        padding-left: 75px;
        padding-right: 75px;
    }
}

@media screen and (min-width: 1366px) {
    /* Entête de formulaire. */
    #Header #OptionMenu {
        padding-right: 63px;
        margin-right: 0px;
    }

    /* Marges gauche-droite sur certaines sections du formulaire. */
    .csp-page-margin {
        padding-left: 100px;
        padding-right: 100px;
    }
}

@media screen and (min-width: 1600px) {
    /* Entête de formulaire. */
    #Header #OptionMenu {
        padding-right: 88px;
        margin-right: 0px;
    }

    /* Marges gauche-droite sur certaines sections du formulaire. */
    .csp-page-margin {
        padding-left: 125px;
        padding-right: 125px;
    }
}

/**************Navigation*************/

/* Section navigation. */
ul#Navigation li {
    display:inline-block; 
    font-size: 14px;
    color:#000;
}

/* Section navigation. */
#Navigation li a
{
    text-decoration:none;
    color: #333;
}

/* Section navigation. */
ul#Navigation{
    list-style:none;
}

/* Section navigation. */
.csp-hover_plus_navigation{
    text-decoration:none;
}

/* Section navigation. */
#Navigation{
    padding: 0px;
}

/* Section navigation. */
#menu_navigation li ul {        
    position:absolute;
    background-color: #eeeeee;   
    border:1px solid #d8d8d8; 
    padding:0 0 0 15px;
}

/* Section navigation. */
#menu_navigation li li {
   display:inline;
}

/* Section navigation. */
#plus_navigation ul div[id*='idCtrlNav']{
    padding-top:15px;
    clear:both;
    float:right;  
    display:block;
}

    /* Section navigation. */
#plus_navigation ul div[id*='idCtrlNav']:last-child{
   padding-bottom:15px;
}

/* Section navigation. */
#li_hSearchTextBox {
    max-width: 0px;
}

/* Section navigation. */
#li_PreviousButton {
    max-width:30px;
}

/* Section navigation. */
#li_NextButton{
    max-width:30px;
}

/* Section navigation. */
#li_ListButton{
    max-width:40px;
}

/* Section navigation. */
#li_SearchBox, #SearchBox{
    max-width:212px;
}

/* Section navigation. */
#li_AdvancedSearch{
    max-width:40px;
}

/* TODO dead code. */
.TextSection {
    margin-top:10px;
}

/* Aide. */
.txtInfo {
    font-size: 0.70em;
    color: #404040;

}
/**************End Navigation*************/

/**************MonthNavigation*************/

/* WebSales/Controls/SalesMonthNavigator */
ul#MonthNavigation li {
    display: inline-block;
    font-size: 14px;
    color: #000;
}

    /* WebSales/Controls/SalesMonthNavigator */
    ul#MonthNavigation li#MonthNavInfo {
        display: inline-block;
        font-size: 16px;
        color: #666;
        padding-right: 10px;
    }

/* WebSales/Controls/SalesMonthNavigator */
#MonthNavigation li a {
    text-decoration: none;
    color: #333;
}

/* WebSales/Controls/SalesMonthNavigator */
ul#MonthNavigation {
    list-style: none;
}

/* WebSales/Controls/SalesMonthNavigator */
#MonthNavigation {
    padding: 0px;
}

/* WebSales/Controls/SalesMonthNavigator */
#menu_MonthNavigation li ul {
    position: absolute;
    background-color: #eeeeee;
    border: 1px solid #d8d8d8;
    padding: 0 0 0 15px;
}

/* WebSales/Controls/SalesMonthNavigator */
#menu_MonthNavigation li li {
    display: inline;
}

/* WebSales/Controls/SalesMonthNavigator */
#li_PREVIOUS_WEEK {
    max-width: 30px;
}

/* WebSales/Controls/SalesMonthNavigator */
#li_NEXT_WEEK {
    max-width: 30px;
}

/**************End MonthNavigation*************/

/* TODO dead code. */
.ASPTree td { }

/**************************************************************
    Calendrier
**************************************************************/
/* Calendrier. */
.datePickerDiv {
}

/* Calendrier. */
.dpTable {
    text-align: center;
    color: #505050;
    text-decoration: none;
    border: 1px solid #666666;
    border-spacing: 0;
    background-color: #fefefe;
}

/* Calendrier. */
.dpTR {
}

/* Calendrier. */
.dpTitleTR {
}

/* Calendrier. */
.dpDayTR {
}


/* Calendrier. */
.dpHeaderTR td {
    background-color: #CCCCCC;
    border-top-style: none;
    border-right-style: solid;
    border-left-style: none;
    border-bottom-style: solid;
    border-width: 0px;
    border-color: #eeeeee;
}

/* Calendrier. */
.dpTD {
    cursor: pointer;
    border-top-style: none;
    border-right-style: solid;
    border-left-style: none;
    border-bottom-style: solid;
    border-width: 2px;
    border-color: #eeeeee;
}


/* Calendrier. */
.dpDayHighlightTD {
    background-color: #f1f0f0;
    border: 1px solid #AAAAAA;
    cursor: pointer;
}

/* Calendrier. */
.dpTitleTD {
    background-color: #f1f0f0;
}

/* Calendrier. */
.dpButtonTD {
    background-color: #f1f0f0;
}

/* Calendrier. */
.dpTodayButtonTD {
}

/* Calendrier. */
.dpDayTD {
    background-color: #f1f0f0;
    border: 1px solid #AAAAAA;
}

/* Calendrier. */
.dpTitleText {
    font-size: 12px;
    color: gray;
    font-weight: bold;
}

/* Calendrier. */
.dpDayHighlight {
    color: #990000;
    font-weight: bold;
}

/* Calendrier. */
.dpButton {
    font-size: 10px;
    color: gray;
    background: #d8e8ff;
    font-weight: bold;
    padding: 0;
    height: 19px;
    width: 17px;
}


/**************Footer*************/
/* Footer avec copyright. */
#plus_footer ul li
{
     list-style:none;
     display:inline-block;
     color:#000;
}

/* Footer avec copyright. */
#plus_footer{
    position:absolute;
    max-width:20px;
}


/* TODO dead code. */
.fixed_position{
    position:fixed;
    top:0px;
}

/* Footer avec copyright. */
#plus_footer ul
{
     padding:5px;
     position:absolute;
    background-color: #eeeeee;   
    border:1px solid #eeeeee;
     
}

/* Footer avec copyright. */
#plus_footer a {
    text-decoration: none;
    color: #333;
    font-size: 12px;
}

/* Clear both. */
.csp-separator {
    clear:both;
}


/* TODO dead code. */
.textAreaPrint
{
    display:none;

}

/**************End Footer*************/

/* Entête de section. */
.sectionHeader {
    font-weight: bold;
    font-size: 16px;
    color: #666;
    margin: 0 0 8px 0;
    clear: left;
    padding-top: 3px;
    border-top: 1px solid #d4d4d4;
}

/* Entête de sous-section. */
.subSectionHeader {
    font-weight: bold;
    font-size: 16px;
    color: #666;
    margin: 0 0 8px 15px;
    clear: left;
    padding-top: 3px;
}

/* Libellé de champ en erreur. */
.sectionLabelError {
    float: left;
    color: #FF0000;
    padding-top: 0.2em;
    padding-right: 8px;
    padding-left: 8px;
    overflow: hidden;
    text-align: right;
    font-weight: bold;
    width: 210px;
    vertical-align: bottom;
    white-space: normal;
    word-break: normal;
}




/* Div fin du contenu. */
.EndApplicationContent {height: 20px; }

/********* Header *********/
/* Entête de formulaire. */
#Header #OptionMenu {
    float: right;
}

/* Entête de formulaire. */
#Header #EntrepriseLogo {
    margin-right: 10px;
    max-width: 220px;
    height: 50px;
    overflow: hidden;
    box-sizing: border-box;
}

    /* Entête de formulaire. */
    #Header #EntrepriseLogo img {
        max-width: none;
        margin-top: 2px;
    }


/********* Identification *********/
/* Section identification. */
#Identification #Function, #Identification #WelcomeMessage { float: left; }

/* Section identification. */
#Identification #Compagnie  { float: right; }

/* Section identification. */
#Identification #Employe, #Identification #SubTitle
{ 
    float: left; 
    clear: left; 
    /*max-width:350px;*/
}
/*#Identification #Navigation { float: right; clear: right; }*/

/* Section identification. */
#Identification .csp-Nav {
    float: right;
}

/* Section identification. */
#Identification #Profile    { clear: both; /*height: 30px;*/  }

/* Section identification. */
#Identification #Compagnie  { font-size: 14px; }

/* Section identification. */
#Identification #Employe, 
#Identification #SubTitle { font-size: 16px; }

/* Section identification. */
#Identification #Navigation {  position: relative; }

    /* Section identification. */
#Identification #Navigation #SearchButton { line-height: 0;background-color:#4f88b3; border-radius:0; }

/* Section identification. */
#Identification #Profile { padding: 8px 0px 5px 0px;  white-space: nowrap; overflow: hidden; border-top:1px solid #ddd; }

/* Section identification. */
#Identification #Function,
#Identification #Compagnie,
#Identification #Navigation,
#Identification #Employe,
#Identification #SubTitle,
#Identification #WelcomeMessage { margin: 0 0 6px 0; line-height: 22px; }

/* TODO dead code. */
#Identification #WelcomeMessage { margin: 10px 0 6px 0; }






/* Section profile, FrameWork/ProfileSection. */
.SeparatorSommaire {  border-left: 1px solid #d9d9d9 !important; padding-left: 8px; }

/* Section profile, FrameWork/ProfileSection. */
.SeparatorSommaireCol {padding: 0 0 0 30px !important;}


/* Section fonction. */
#Function h1, #WelcomeMessage h1 {
    display: inline;
    margin: 0;
}

/* TODO dead code. */
#WelcomeMessage h1 {
    font-weight: normal;
}

/* Section fonction. */
#Function .Icon, #WelcomeMessage .Icon { margin: 0 0 0 20px; vertical-align: top; }

/* Section compagnie. */
#Compagnie #CompanySeparator {
    margin-left: 10px;
    font-size: 12px;
}

/* Section compagnie. */
#Compagnie a {
    margin-left: 10px;
    font-size: 12px;
}

/* Section identification. */
#Identification .NavigationButton
{
    display: inline-block;
    width: 13px;
    height: 20px;
    line-height: 20px;
    text-indent: -9999em;
    margin-right: 15px;
}

/* WebSales/Controls/SalesMonthNavigator */
#menu_MonthNavigation .NavigationButton {
    display: inline-block;
    width: 13px;
    height: 20px;
    line-height: 20px;
    text-indent: -9999em;
    margin-right: 15px;
}

/* Section navigation. */
#Navigation #SearchBox 
{	
    display: inline-block;
    /*margin: 0 10px;*/
}

    /*v7.4*/
    /* Section navigation. */
#Navigation #SearchBox img { display:none; }

/* Section navigation. */
#SearchBox:before  
{
    font-family: 'icon-font';  
} 

/* Section navigation. */
#Navigation #SearchBox input[type="text"] {
    box-sizing:border-box;
    height:24px;
    width: 160px;
    text-align: left;   
}




    /* Section navigation. */
#Navigation #SearchBox input[type="text"].SearchText     
{
    font-size:10px;
    color: #888;
}

/* Section navigation. */
#Navigation #SearchBox button {
    box-sizing:border-box;
    height:24px;
    color: #fff; 
    background: #589ED3;
    border:1px solid #dddddd;
    border-left:none;
    font-size: 12px; 
    margin-left: -4px;    
    padding: 0 5px; 
    vertical-align: middle;  
}




    /* Section navigation. */
    #Navigation #SearchBox button:hover {
        color:#fff;
        background: #286ea3;
        cursor: pointer;
    }



/* Section profile. */
#Profile table, #Profile select { font-size: 11px; }

/* Section profile. */
#Profile table {
    border-collapse: collapse;
    margin: 0;
    float: left;
    line-height: 11px;
}

/* Section profile. */
#Profile .ProfileCaption { color: #888; }

/* Section profile. */
#Profile .VerticalAlignProfile { vertical-align: middle;padding-right: 0px; }

/* Section profile. */
#Profile table td { padding: 1px 8px; vertical-align: bottom; }

/* Section profile. */
#Profile .ProfileFontBold {font-weight: bold;}

/********* Footer *********/
/* Pied de page avec boutons. */
#Footer button {
    height: 30px;
}

/* Pied de page avec boutons. */
#Footer #BaseCommand, #Footer #SecondaryCommand { float:left; }

/* Pied de page avec boutons. */
#Footer #SecondaryCommand { margin-left: 41px;}

/* Pied de page avec boutons. */
#Footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #E0E0E0;
    border-top: 1px solid #E2E4E6;
    background: #F1F1F1;
}

    /* Pied de page avec boutons. */
    #Footer .DesjardinsFooter {
        display: inline-block;
    }

    /* Pied de page avec boutons. */
    #Footer .CopyrightSection {
        display: flex;
        float: right;
        color: #666;
        font-size: 10px;
        line-height: 20px;
    }

    /* Pied de page avec boutons. */
    #Footer .withButton {
        margin-top: 5px;
    }

/* Pied de page avec boutons. */
.footerDisclaimer {
    opacity: .99;
}

@media screen and (max-width: 800px) {

    /* En petite résolution, retirer le padding de 41 sur les boutons secondaires. */
    /* Pied de page avec boutons. */
    #Footer #SecondaryCommand {
        margin-left: 5px;
    }

    /* Pied de page avec boutons. */
    #Footer .withButton {
        padding-top: 3px;
        margin-top: 0px;
    }
}

/*#Footer .CopyrightSection img
{
    padding-top: 6px;
}
*/

/* TEST D'UNE APPOCHE SELON LE BRANDING */

/* Sommaire de validation. */
.sectionError  
{
    margin-bottom:20px;
    padding:0; 
    font-size:14px;
    font-weight:bold;	
    color:#4F88B3;
}

    /* Sommaire de validation. */
.sectionError table {
    padding: 15px;
    margin-top:3px;
    margin-bottom:15px;
    font-size:14px;	
    font-weight:normal;
    color: #404040;
    background:#fff; 
    border:2px solid #4F88B3;
}

/*.sectionErrorIcon {	padding-right: 4px;}*/

/* Sommaire de validation. */
.sectionErrorIcon {
    padding-right: 2px;
    width:25px;
}

/* Sommaire de validation. */
.sectionErrorIconWidth {
    width: 20px;
}

/* Sommaire de validation. */
.sectionErrorPrefix { font-weight:bold;}

/* Sommaire de validation. */
.sectionErrorDesc {
    font-style: normal;
    text-align: left;
    text-decoration: none;
    padding-top: 4px;
    padding-bottom: 4px;
}

    /*  Par défaut on ne fait rien au survol de la souris
    Si un setFocus est présent, un eajustement de style est fait dans le CSS de la version correspondante
    */
    /* Sommaire de validation. */
.sectionErrorDesc:hover{cursor:default;}


/********* Bouton Retourner *********/
/* Section "go-back". */
.goBackSection {
    position: absolute;
    top: 2.5px;
    left: 10px;
    height: 24px;
    padding: 5px;
    font-size: 14px;
    cursor: pointer;
    color: #888;
}

    /* Section "go-back". */
    .goBackSection:hover {
        color: #333;
        background: #e8e8e8;
    }



    /* Section "go-back". */
    .goBackSection > span {
        display: none;
    }

/* Section "go-back". */
.goBackText {
    margin-left: 5px;
    vertical-align: middle;
}

/* Section "go-back". */
@media screen and (min-width: 1600px) {
    .goBackSection > span {
        display: inline-block;
    }
}


/* WebPayroll/SeparatedPayments */
.noMargin { margin-bottom: 0px; }
/* WebPayroll/CurrentPay */
.smallMargin { margin-bottom: 8px; }


/**** Style par défaut pour le BreakingTableFunctionAccess ****/
/* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess {
    font-style: normal;	
    text-decoration: none;
    border: 1px solid #ddd;
    border-collapse:collapse;
    border-spacing:0;
    background-color: #fff;	
}

    /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess th 
{
    font-weight: bold;
    font-size:14px;
    border: 1px solid #ddd;
    padding: 5px 5px;    
    text-align: left;
}


    /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td 
{
    border: 1px solid #eee;
    padding: 8px 5px;    
    white-space: normal;
}


        /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.break1Caption {
    padding-left:16px;
    color:#404040;
    font-weight: bold;
    
}

        /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.break1CaptionNoAccess {
    padding-left:16px;
    color:#999;
    font-weight: bold;
}

        /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.break1ValuesHeader {
    text-align:center;
    font-weight:normal;
    color:#404040;	
}

        /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.break1ValuesHeaderHidden {
    text-align:center;
    font-weight:normal;
    color:#404040;
    display:none;
}

        /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.break2Caption {
    padding-left:32px;
    color:#000000;
}

        /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.break2CaptionNoAccess {
    padding-left:32px;
    color:#999;
}

        /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.break2CaptionError {
    padding-left:32px;
    color:#ff0000;
}


        /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.break2Values {
    text-align:center;
    font-weight:normal;
    color:#404040;    
}

        /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.break2ValuesHidden {
    text-align:center;
    font-weight:normal;
    color:#404040;
    display:none;
}




    /* FrameWork/BaseBreakingTable */
    .breakingTableFunctionAccess .sectionInputCkBox {
        color: #404040;
        text-align: left;
        padding-left: 0px;
        margin-left: -1px;
    }

    /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.boldDesc
{
    font-weight:bold;
}

    /* FrameWork/BaseBreakingTable */
.breakingTableFunctionAccess td.unselectedDesc
{
    font-weight:normal;
}

/* FrameWork/BaseBreakingTable */
.firstBreakHeader
{
     background-color: #e8ebf0;	
}



/********************   TIME ATTENDANCE ****************************************/
/* WebTimeAttendance/Controls/TimeAttendanceFilter */
.HoursEntryTypeFilter{

    background-color:#fff;
    padding:5px;
    height:150px;
    width:130px;
    overflow:auto;
    white-space:nowrap;
    box-shadow:0 0 3px #ccc    
}




/*************************************************************/
/*              Début - Listes des employés                  */
/*************************************************************/

/* Filtre et tri employés. */
.FiltreEtTri {
    padding-left: 25px;
    white-space: nowrap;
}

/* Filtre et tri employés. */
.SectionDisponibility {
    float:left;
    padding-left: 5px;
    display: inline-block;
    text-align: left;
}

/* Filtre et tri employés. */
.SectionDisponibilityCol2{
    float:left;
    padding-top:20px;
    padding-left: 5px;
    display: inline-block;
    text-align: left;
}

/* Filtre et tri employés. */
.SectionTauxUtilisable {
    margin-left: 15px;
    display: inline-block;
    text-align: left;
}

/* Filtre et tri employés. */
.TitleLabel {
    line-height: 1.5em;
}

/* Filtre et tri employés. */
div#TableListes{display:inline-block;}


/* Filtre et tri employés. */
div[class*='csp-block']:first-child{
    border-right: 1px solid #c4c4c4;
}

/* Filtre et tri employés. */
.csp-block{
    float:left;
    padding-bottom:20px;
}

/* Filtre et tri employés. */
.csp-subBlock{
    float:left;
    position:relative;
    max-width:467px;
}

/* Filtre et tri employés. */
.SectionOrdreTri  { padding-top: 5px; }

/* WebTimeAttendance/3 pages web */
#divFilterCascade .sectionLabel {
    float: left;
    margin-top: 0.2em;
    margin-right: 3px;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    text-align: right;
    width: 130px!important;
    vertical-align: bottom;
    white-space: nowrap;
}

/* TODO dead code. */
#divFilterCascadeControle .sectionLabel {
    float: left;
    margin-top: 0.2em;
    margin-right: 3px;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    text-align: right;
    width: 195px!important;
    vertical-align: bottom;
    white-space: nowrap;
}

/* TODO dead code. */
#divFilterCascadeControle select,#divFilterCascadeControle input[type="text"]
{
    margin-left: 8px;
}

/* TODO dead code. */
#divFilterCascadeControle #divFilterHourType .sectionLabel,#divFilterCascadeControle #div__FILTER_ON_TOTAL__TIMEATTENDANCE_FILTER__0 .sectionLabel
{
    margin-right: 12px;
}

/* TODO dead code. */
#divFilterCascadeControle 
{
    margin-bottom: 20px;
}

/* Ancien framework (certains écrans nouveau framework), ligne dans une section. */
.sectionRow {
    padding-top: 4px;	
    clear:left; /*-- le clear a été ajouté pour contrer un bug d'alignement dans IE6 */	  	
}

/* Ancien framework, ligne large dans une section. */
.sectionRowExtended {
    width:1250px;
    white-space : nowrap;
}

/* WebTimeAttendance/3 pages web */
#divFilterCascade .sectionRow #FilterStatus { text-align: left !important;padding-top: 4px; }

/* Filtre et tri employés. */
#TableListes td { vertical-align: top; }

/* Filtre et tri employés. */
#divSpecificFilterStructure .sectionLabel { width: 120px; }

/* Filtre et tri employés. */
#divSpecificFilterNoTravail .sectionLabel { width: 120px; }

/* Filtre et tri employés. */
#divSpecificFilterCCQ .sectionLabel { width: 120px; }

/* Filtre et tri employés. */
#divFilterLastYear .sectionLabel { width: 120px; }

/* Filtre et tri employés. */
#divSpecificFilterStructure { margin-right: 25px;min-width: 450px; }

/* WebTimeAttendance/3 pages web */
#divFilterCascade { width: 450px!important; }

/* Section filtres. */
#divFilterRefreshBtns { padding-top:10px; }
/*#divFilterRefreshBtns
{ // dans screen
    padding-top:5px;
}*/

/* WebTimeAttendance */
#div__PUNCH_CURRENT_DAY_EXCEPTIONS__TIMEATTENDANCE_FILTER__0 { margin-left: 226px;margin-top: 8px; }

    /* WebTimeAttendance */
    #div__PUNCH_CURRENT_DAY_EXCEPTIONS__TIMEATTENDANCE_FILTER__0 .sectionInputCkBox {
        color: #404040;
        text-align: left;
        padding-left: 0px; /*v6.0: L'usage d'un padding permet à IE8 d'afficher le pointillée autour du checkbox lorsque celui-ci a le focus  */
        margin-left: 0px;
    }

/* Filtre numéro de travail. */
#NO_TR__SpecificFilter__0  { width: 300px!important; }

/* Filtre numéro de travail. */
#div__NO_TR__SpecificFilter__0 { margin-right: 5px; }

/* Filtre numéro de travail. */
#divSpecificFilterNoTravail { margin-right: 5px;min-width: 465px; }

    /* Filtre numéro de travail. */
#divSpecificFilterNoTravail .buttonPopupList { margin-left: 5px; }

/* Bouton, pas juste de popup list. */
.buttonPopupList {
    vertical-align: top;
}

/* Filtres CCQ. */
#CCQ__SpecificFilter__0  { width: 300px!important; }

/* Filtres CCQ. */
#div__CCQ__SpecificFilter__0 { margin-right: 5px; }

/* Filtres CCQ. */
#divSpecificFilterCCQ { margin-right: 5px;min-width: 465px; }

    /* Filtres CCQ. */
#divSpecificFilterCCQ .buttonPopupList { margin-left: 5px; }

/* Table filtres framework legacy. */
.defaultFilterTable .buttonPopupList { margin-left: 5px; }

/* Table filtres framework legacy. */
#TableListes .defaultFilterTable td { color: #404040!important; }

/* Filtres année précédente. */
#divFilterLastYear { margin-right: 5px;min-width: 369px; }

/* Filtre et tri employés. */
#INC_EMPL_WITH_TRANS__UserFilter { margin-bottom: 4px; }

/* WebTimeAttendance. */
#cascadeMenusectionData 
{   min-width: 620px;                    
    
}

/* Table filtres framework legacy. */
.defaultFilterTable {
    border-style: none;
    border-collapse: collapse;
    margin-top: 8px;
}

    /* Table filtres framework legacy. */
.defaultFilterTable td.nowraplabel{
  text-align:right;
  padding-right: 4px;
  white-space: nowrap;
}

    /* Table filtres framework legacy. */
    .defaultFilterTable td.nowrapcell {
        white-space: nowrap;
        padding-right: 8px;
    }

/* Cellule qui ne wrap pas. */
td.nowrapcell {
    white-space: nowrap;
}

/* WebPayroll */
td.navheadercenter {
    font-weight: bold;
    color: #404040;

    text-align: center;
}

/* WebPayroll */
  td.navheadercentermassSalary{
    font-weight: bold;
    color: #404040;
    white-space: normal !important;
    text-align: center;
}

/* WebPayroll/MassiveSalaryProfile */
.wrapCol{
    white-space: normal !important;
}

/* WebPayroll/MassiveSalaryProfile */
.wrapColAllignLeft{
    text-align: left!important;
}

/* WebPayroll/MassiveAdjustments */
td.lastColMassive
{
    border-right:1px solid #EEEEEE;
}

/**************************************************************
    Popup Div
**************************************************************/
/* FrameWork/TreeViewStatic */
.tree {
    width: 500px;
    height: 100%;
    color: #5b5b5b;
    clear: both;
}

/* FrameWork/TreeViewStatic */
.treeItems {
    cursor: default;
    color: Black;
}

/**************************************************************
    Section des gains attache a des banques
**************************************************************/

/* WebPayroll */
.AssociatedBanksSection {
    position: absolute;
    z-index: 2000;
    background-color: white;
    border: solid 1px #000;
    padding: 5px;
    width: 15em;
    display: none;
}

/* WebPayroll/Controls/AssociatdBanksSections */
.AssociatedBanksSectionTitle {
    color: #404040;
    font-weight: bold;
    font-size: 18px;
    font-variant: normal;
    text-align: left;
}

/**************************************************************
    Section d'ajout de valeur de fichiers attachés
**************************************************************/
/* Div attacher des fichiers. */
#divAttachFileHeader {
    color: #404040;
    font-style: normal;
    font-variant: normal;
    text-decoration: none;
    text-align: left;
}

/**********************************************************************************************************
    Section générique d'ajout de valeur de liste client/ documents annexes/ picker structure administrative
************************************************************************************************************/


/* WebTimeAttendance/Controls/AdministrativeStructurePicker */
.divPickerPopUpCommands{
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #aaaaaa;
    padding-top: 8px;
    margin-top: 16px;
}


/* Div attacher des fichiers. */
.divPickerPopUpContent{
    color: #404040;
    font-weight: normal;
    margin-top: 8px;
}


/* WebPayroll/Controls/AdministrativeStructurePicker, WebTimeAttendance/Controls/AdministrativeStructurePicker */
.divPickerPopUpTitle
{
    color: #404040;
    font-weight: bold;
    font-size: 18px;
    font-variant: normal;
    text-align: left;
}

/********************** list *************************/
/* Utilisé dans WebPayroll/TemplateTransaction.aspx. */
.listText {
    background-color: #ffffff;
    padding-right: 2px;
    padding-left: 2px;
    vertical-align: middle;
    color: #333333;
}

/**********************************************************************************************************
    Section générique d'ajout de valeur de liste client/ documents annexes/ picker structure administrative
************************************************************************************************************/
/* WebPayroll/TemplateTransaction. */
.divInsertItem {
    position: absolute;
    z-index: 10;
    background-color: white;
    border: solid 1px #000;
    padding: 5px;
}


/* WebPayroll/TemplateTransaction. */
.PickListInfo
{
    clear:both;
}

/* WebPayroll/TemplateTransaction. */
.PickListTitle 
{
    
    font-weight:bold;
    color: #404040;
}
/**************************************************************
    Section pour la modification de la distribution
**************************************************************/

/* WebPayroll/Controls/AdministrativeStructurePicker, WebTimeAttendance/Controls/AdministrativeStructurePicker */
#divModifyAdministractiveStructure {
    display: none;
    position: absolute;
    z-index: 2000;
    background-color: white;
    border: solid 1px #000;
    padding: 5px;
    width: auto;
    word-wrap: normal;
}

    /* WebPayroll/Controls/AdministrativeStructurePicker, WebTimeAttendance/Controls/AdministrativeStructurePicker */
    #divModifyAdministractiveStructure .sectionLabel {
        width: 20em;
    }

/************************************************************
  Cellule principal du tableau de résultat de massives
*************************************************************/
/* WebPayroll */
.cellMassResults
{
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
    vertical-align:top

}

/*************************************************************/
/*                   Début - Accueil                         */
/*************************************************************/

/* TODO dead code. */
#tblInboxMessage, #tblInboxDocument, #tblUpcomingEvents, #tblInboxRelevesPaie {
    width: 100%;
}

/* TODO dead code. */
.PromoSection {
    float: left;
    width: 17%;
    margin-top: 36px;
    margin-left: 30px;
    text-align: left;
}

/* Lien */
div.ActionLink {
    color: #5b5b5b;
    padding: 0 0 10px 0;
}

/* TODO dead code. */
h1.HomeTitle {
    display: inline-block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: normal;
}

/* TODO dead code. */
.HomeImg { margin: -6px 5px 0 0; }

/* TODO dead code. */
.sectionDataMain {
    clear: both;
    min-width: 900px;
}


/* WebPayroll/SeparatedPayments */
.sectionDivInLine
{
    float:left;
    margin-right:20px;   
}


/* TODO dead code. */
.HomeH5 {
    float: right;
    margin: 34px 10px 0 0;
    font-size: 12px !important;
    font-weight: normal;
}

/* TODO dead code. */
.HomeSelect {
    float: right;
    margin: 28px 0 8px 0;
    font-size: 12px;
    color: #404040;
}

/* TODO dead code. */
.homeTab {
    border: 1px solid #e4e4e4;
    border-bottom: none;
    background: #e4e4e4;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    padding: 6px 15px;
    font-weight: bold;
    line-height: 32px;
}

/* TODO dead code. */
.homeTabs {
    position: absolute;
    z-index: 2;
    bottom: -1px;
    right: 20px;
}

/* TODO dead code. */
.homeTabSelected { background: #f7f7f7; cursor: default; border-bottom: 1px solid #fff; }

/* TODO dead code. */
.homeTabNotSelected { border-bottom: 1px solid #e4e4e4; }

/* TODO dead code. */
.homeTab img { vertical-align: middle; margin-right: 10px;}

/* Section fonction. */
#infoKeyboard { font-size: 11px; }

    /* Section fonction. */
    #infoKeyboard dl {
        margin: 0;
        padding: 0;
        margin-bottom: 11px;
        clear: both;
        overflow: hidden;
        min-width: 325px;
    }

    /* Section fonction. */
    #infoKeyboard dt {
        margin: 0;
        padding: 0;
        float: right;
        width: 200px;
    }

    /* Section fonction. */
    #infoKeyboard dd {
        margin: 0;
        padding: 0;
        float: left;
        width: 100px;
        clear: both;
    }

/* Section compagnie. */
#CompanyDialog
{min-width:250px;}

/* Section compagnie. */
#csSelectList
{	
    min-height: 30px;
    max-height: 600px;
    width:100%;	
    overflow: auto;	
    border-style: 1px solid #ddd;	
}

/* WaitingBox 6.0 */
.WaitingBox
{
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url(../imgs/GENERIC/progress.gif) 50% 50% no-repeat;
}

/* Désactiver la page pendant un WaitingBox. */
.csp-forcePageDisabled
{
   position:fixed;
   top:50px; right:0; bottom:0; left:0;
   background-color:#eee;
   z-index:310;
   opacity:0.4;
}


/* Désactiver la page pendant un WaitingBox. */
.csp-forcePageProgress
{
    position:fixed;
    top:50px; right:0; bottom:0; left:0;
    z-index:320;
}

    /* Désactiver la page pendant un WaitingBox. */
    .csp-forcePageProgress img
    {
        display: block;
        margin: 100px auto;
    }




/* Forcer display none. */
.displaynone { display: none !important; }

/* TODO dead code. */
#CompagnyListSection .sectionLabel { width: 60px; }

/* TODO dead code. */
#CompagnyListSection { margin-bottom: 8px; }

/* Section compagnie. */
.AdditionalHeaderControl { font-size: 12px!important; }

    /* Section compagnie. */
.AdditionalHeaderControl .sectionLabel { padding-top: 0px!important; }

/**** Style par défaut pour le PopupWin ****/

/* FrameWork/PopupWin */
.popupWinTitleBar
{
    cursor: move;
    padding-top: 25px;
    font-weight: bold;
    color: #404040;
    background: #fff;
    font-size:18px;
}


/* FrameWork/PopupWin */
.popupWinTitle {
    float: left;
    margin-top: -25px;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 25px 5px 15px;
    color: #404040;
}

/* FrameWork/PopupWin */
.popupWinCloseX 
{
    width: 16px;
    height: 16px;
    display: inline-block;
    line-height: normal;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    border: none!important;
    position:absolute;
    right:10px;
    top:5px;
    padding:5px;
}

/* FrameWork/PopupWin */
.popupWinBtnContainer 
{
    margin-top: 14px;
    padding: 8px 15px;
    background-color: #f1f1f1;
    border-top:  1px solid #e0e0e0;
}


/* FrameWork/PopupWin */
.popupSectionData {
    padding: 15px !important;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
}

/* Popups JQuery UI. */
.popupWinContent {
    background-color: #FFFFFF;
    padding: 0px; 
    z-index: 3000;
    position: absolute;
    top: 0px; left: 0px; bottom:auto; right:auto;	
    border: solid 1px #888; 
}

/* FrameWork/PopupWin */
.popupWinModalContainer
{  
    position: absolute;
    z-index: 2998;
    width: 100%; height: 100%;
    top: 0px; left: 0px;
    display: none;
    overflow: auto;
}

/* FrameWork/PopupWin */
.popupWinModalBackground
{
    background-color: Gray;
    filter: alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; 
    width: 100%; height: 100%;
    position: fixed;
    z-index: 2999;
    top: 0px; left: 0px;
    color: red;
}
/* FrameWork/PopupWin */
.popupWinModalIFrame
{
    top: 0px; left: 0px; 
    bottom:auto; right:auto;
    height:100%; width:100%;
}

/* Buffer popups JQuery UI. */
.popupSectionHeader{
    background-color: #404040;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:8px;
    margin-bottom:8px;
    margin-top:8px;
    font-weight: bold;
    font-size: 11px;
    vertical-align: middle;
    color: white;
    font-style: normal;
    
    text-align:left;
}

/* WebPayroll/Buffer_CCQ */
.popup-ccq{min-width:350px}



/* Entête wizard framework legacy. */
.sectionWizardStep
{
    color: red;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 8px;
    font-size: 1em;
    clear: both;
}

/* Filtres */
#imgShowFilter {
    vertical-align: middle;
    border: 0;
    cursor:pointer;
}

/**************************************************************
    Section pour la modification de la distribution
**************************************************************/

/* Divers iFrames. */
#FrameTemplate {
    border-style: none;
    position: absolute;
    top: 90px;
    left: 0px;
    display: none;
}

/*.sectionWizardStep
{
    color: red;  // dans le screen
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;	
    clear: both;
}*/

/* /WebPayroll/RapidEntry */
.CascadeStep { margin-bottom: 8px; }

/* /WebPayroll/RapidEntry WebLedger/GLReportsSection */
.CascadeTitle { padding-top: 8px;padding-bottom:10px; }

/* WebPayroll */
#HeaderFoot,#DetailFoot,#HeaderFoot td,#DetailFoot td { border: 1px solid #fff!important; }

/* Calendrier. */
.datePickerDiv { z-index: 20000; }

/* Liste de boutons. */
.buttonPopupList { vertical-align: middle;margin-left: 5px; }

/* WebPayroll */
#divInputStructure .buttonPopupList { margin-right: 8px; }




/* Semble être un override Firefox pour les boutons UIKit et JQuery-UI */
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* TODO dead code. */
{
    display: inline-block;
    width : 70px;
}

/* WebPortal/ContactPersonList */
.IndentCellContentMargin
{
    display: inline-block;
    margin-right : 15px;
}

/* Tableaux, TableNavigation.js */
.btnSaveNavSpanEnabled { color: #fff; }

/* FrameWork/ButtonSection */
.btnSaveNavSpanDisabled { display:none;  }
/* On utilise un largeur fixe de bouton pour ceux pemettant un combinaison d'action */
/* FrameWork/ButtonSection */
button[btnnavaction] {min-width:160px; border-top-right-radius:0px; border-bottom-right-radius:0px;}

/*=================  TRANSFER BOX =====================================*/

/* FrameWork/TransferBox */
.transfertBox 
{
    float:left;    
    width:350px;     
}

/* TODO dead code. */
.leftBox
{
    padding-right:10px;	
}


/* TODO dead code. */
.rightBox
{
    padding-left:10px;	
}


/* FrameWork/TransferBox */
.btnPanel 
{	
    display:table;	
    float:left;
    padding-left:10px;
    padding-right:10px;   
    width:20px;	
    height:223px;
}

/* FrameWork/TransferBox */
.btnContainer
{
    display:table-cell;       
    vertical-align:middle; 
}


/* FrameWork/TransferBox */
.moveBtn
{	
    cursor:pointer; 
}

/* TODO dead code. */
.clearFieldBtn
{ 
    vertical-align: middle;
    margin-left: 5px; 
    width:15px;
}


/*================================  MultiCol ===========================================*/

/* FrameWork/TableListColumnStatic */
.IndentCellContentDefault
{
    display: inline-block;
    width : 70px;
}

/*=========================== General Utility CSS ==============================================*/

/* WebPayroll */
.textCenter
{
    text-align: center;
}


/* WebPortal/UserMessageList */
.csp-exclamation-red:before
{
    content:  "\f12a";
    font-family: FontAwesome;
    font-size:18px; 
    color:red;   
    padding-right:5px;
} 

/* TODO dead code. */
.csp-check-black:before
{
    content:  "\f00c";
    font-family: FontAwesome;
    font-size:18px; 
    color:black;  
}


/* ICON VALIDATED*/
.csp-icon-check-circle:before {
    content: "\f058";
    font-family: FontAwesome, sans-serif;
}

/* Override pour display none. */
  .csp-disp-none
  {
    display:none !important;
  }

/* FrameWork/InputControl */
  .csp-disp-none-absolute {
    display: none ;
    position:absolute;
  }	

/* FrameWork/InputControl */
.csp-disp-inline {
    display: inline;
}

/* Display block */
.csp-disp-block {
    display: block;
}

/* Display inline-block */
.csp-disp-inlineblock {
    display: inline-block;
}

/* Display flex */
.csp-disp-flex {
    display: flex;
}

/* Visibility hidden. */
  .csp-vis-hidden
  {
      visibility:hidden; 
  }

/* TODO dead code. */
.csp-no-text-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* WebTimeAttendance/TimeEntry */
  .csp-ws-nowrap{white-space:nowrap}

/* Float right. */
  .csp-float-right{float:right}

/* Bold. */
  .csp-bold{font-weight:bold}

/* Override Bold. */
  .csp-bold-important {font-weight: bold !important}  

/*========  Used in: WebPortal\CommunityProfileConfirmCreated.aspx.vb, C2 0390127  =========*/
/* WebPortal/CommunityProfileConfirmCreated */
.userAndPasswordSize 
{
    font-size: 14px;
}



/*========================== Input TrailingText ===================================*/
/* TODO dead code. */
.csp-bef-text{line-height:24px}

/* FrameWork/InputControl */
.csp-trailing-text
{
    line-height:24px;
}

/* FrameWork/InputControl */
.trailingTextToolTip
{
    max-width:25em;
    text-overflow: ellipsis;
}


    /* FrameWork/InputControl */
.trailingTextToolTip:hover
{
    background-color: #F4F3EC;
}

/* TODO dead code. */
        .csp-pay-calendar
        {
            background-color:#92c3ff
        }

        .csp-maincontent{
            width:1920;
            height:1080px
        }


/* TODO dead code. */
        .headerCtrl{
            font-size:20px;
            font-weight:bold;
            text-align:center;
            padding:10px;
        }


/* TODO dead code. */
        .testMatch{
            background-color:#eef6ff;
            border:1px solid #aaa;
            
        }

/* FrameWork/TableListColumnImage */
.csp-pointer-cursor 
{
    cursor:pointer;
}



/*======================== DASHBOARD STYLE ===================================*/

/* TODO dead code. */
.table-row 
{
    display:table-row;
}





/************* NOTIFICATION PANELS *******************/




/* TODO dead code. */
.msgBackg {
    background-image:url("../imgs/cgi/bg-msg.png");
    background-repeat :no-repeat; 
    background-color:#32a2d7;
 }


/* TODO dead code. */
.docBackg {
    background-image:url("../imgs/cgi/bg-docs.png");
    background-repeat :no-repeat; 
    background-color:#428db9;
 }


/* TODO dead code. */
.eventBackg {
    background-image:url("../imgs/cgi/bg-event.png");
    background-repeat :no-repeat; 
    background-color:#195f80;
 }

/* TODO dead code. */
.nav-msgbg{
   background-color:#20B9DD;
}

/* TODO dead code. */
.nav-docbg{
    background-color:#6bb0d8;
}

/* TODO dead code. */
.nav-eventbg
{
    background-color:#509ac4;
}

/**************** FIN CONTROL NOTIFICATION PANELS*****************/




/* TODO dead code. */
.testwidth
{
    border:1px solid #000;
    text-overflow:ellipsis;
}


/* TODO dead code. */
.ntr-pnl-center
{
    overflow:hidden;
}






/* TODO dead code. */
pnl-footer-txt
{
    padding-left:5px;
}





/* TODO dead code. */
.ntr-pnl-left
{        	
    border-style: solid none solid solid;
    border-width: 1px 0px 1px 1px;
    border-color: #ccc;
    text-align:center; 
    vertical-align:middle;     
    line-height:100px;    
        
}

/* TODO dead code. */
.ntr-pnl-right
{
    border-style: solid solid solid none;
    border-width: 1px 1px 1px 0px;
    border-color: #ccc;  
    text-align:center;     
    line-height:100px;   	
}





/* TODO dead code. */
.ntr-promo
{
    background-color:Gray; 
    height:133px;
}



/* TODO dead code. */
.csp-pie-chart
{ 
  height:180px;
}


/* TODO dead code. */
.csp-line-chart
{
    width:400px;
    height:400px;
}

/************ PERIODE CSS *******************/

/* TODO dead code. */
.csp-perInfo-container
{
    background-color:#000;	
     min-width:175px;
     padding:10px;
}

/* TODO dead code. */
.csp-perTitle
{	
    font-weight:bold;
    font-size:18px;
    color: #fff;
}

/* TODO dead code. */
.csp-perInfo
{
    color: #F0F0F0;
}

/************* SEPARATEUR COMPAGNIE *******************/

/* TODO dead code. */
.csp-cie-name
{
    color:#000;
    font-size:20px;
    float:left;   
}


    /* TODO dead code. */
.csp-cie-name:after
{
    content:  "\f0dd";
    font-family: FontAwesome;
    font-size:20px;      
    padding-left:20px;
}


/* TODO dead code. */
.csp-cie-select
{
    float:left;	
}

/* TODO dead code. */
.csp-perso-dash
{
    font-weight:bold;
    float:right;
    color:#00AEE8;
}


/* TODO dead code. */
.csp-ind-group
{
    margin-bottom:15px;
}

/* TODO dead code. */
.csp-ind-cntr
{
    background:transparent; 
    border:1px solid #e5e5e5; 	
    height:180px; 
    font-size:16px; 
    text-align:center;		
    color:#888;
    white-space: nowrap;
    
}

/* TODO dead code. */
.csp-ind-cols
{
    margin-top:55px;	
    min-width:275px;
}

/* TODO dead code. */
.csp-ind-colLeft
{
    text-align:left;	
    padding-left:20px;
}


/* TODO dead code. */
.csp-ind-colRight
{
    text-align:right;	
    padding-right:20px;
}


/* TODO dead code. */
.csp-ind-col
{
    display:table-column;
}


/* TODO dead code. */
.csp-ind-cell
{
    display:table-cell;
}


/* TODO dead code. */
.csp-cursor-pointer
{
    cursor:pointer;
}

/* Un clear ... */
.csp-clear{
    clear:both;
}

/* TODO dead code. */
    .csp-period-dates
    {
               
        float:left;
        text-align:left;
    }

/* TODO dead code. */
    .csp-period-nosem{
               
        float:right;
        text-align:right;
    }

/*.csp-curPeriod-nosem{                
        text-align:left;
    }*/

/* WebPayroll/PayEntriesReports, WebReports/AutomatedReportsStep2, WebReports/ProductionRequest */
.listBoxHead{    
    width:250px ;
    border-radius:3px;
    box-shadow:0 0 3px #ccc;
    
}

    /* WebPayroll/PayEntriesReports, WebReports/AutomatedReportsStep2, WebReports/ProductionRequest */
.listBoxHead tr{height:30px}


/* WebPayroll/PayEntriesReports, WebReports/AutomatedReportsStep2, WebReports/ProductionRequest */
.listBoxContainer{
    background-color:#fff;
    box-shadow:0 0 3px #ccc;
    border-radius:3px;
    overflow: auto; 
    width: 250px; 
    height: 200px
}

/***** DLL qui ont ete pris de Screen*******/
img, input {  /*.treeStructure*/
    vertical-align: middle;
}

/************************
* Styles pour la page HlpDocumentList.aspx
*************************/
/* WebPortal/AutoFormation */
#HelpDocList_MainTable 
{
      border-width: 0px;
      border-collapse: collapse;
}

/* WebPortal/AutoFormation */
.HelpDocList_SECTION_WHITE
{
      background-color:White;
      padding:0px;
}

/* WebPortal/AutoFormation */
.HelpDocList_SECTION_GRAY
{
      background-color:#E6E6E1;
      padding:0px;
}

/* WebPortal/AutoFormation */
.HelpDocList_SECTION

{
      border-width: 0px;
      padding:0px;
}

/* WebPortal/AutoFormation */
.HelpDocList_LEVEL
{
      width: 250px;
      vertical-align: top;
      font-weight:bold;
      padding:2px;
}

/* WebPortal/AutoFormation */
.HelpDocList_SUB_LEVEL
{
      width: 250px;
      vertical-align: top;
      font-weight:bold;
      padding:2px;
}

/* WebPortal/AutoFormation */
.HelpDocList_SECTIONCOL
{
    vertical-align: top;
    padding:2px;
}

/* WebPortal/AutoFormation */
.HelpDocList_DOCUMENT
{      
      width: 235px;
      vertical-align: top;
      padding-right:15px;
      padding:2px;
}

/*Exception IE6: Fonction Documentation - Dans IE6 les tableaux n'héritent pas bien la grandeur de la police*/
/* WebPortal/AutoFormation */
.HelpDocList_LEVEL
{
    /*font-size:7.9pt;*/ 
    color:#404040;
}	

/* WebPortal/AutoFormation */
.HelpDocList_SUB_LEVEL
{
    /*font-size:7.9pt;*/ 
    color:#404040;
}

/* TODO dead code. */
.HelpDocList_DOCUMENT
{
    /*font-size:7.9pt;*/ 
}	

/* TODO dead code. */
.HelpDocList_SECTIONCOL
{
  /*font-size:7.9pt;*/ 
}

/* WebPayroll/PayrollPreprocessEmployee */
#PreProcessFiltersLink a,
#PreProcessFiltersLink a:active,
#PreProcessFiltersLink a:link,
#PreProcessFiltersLink a:visited,
#PreProcessFiltersLink a:hover {
    color: #FFFFFF;
}

/* Section identification, framework MVC. */
.imagePhotoThumbnailSummaryInfo {
    width: 25px;
    height: 25px;
    float: left;
}

/* WebPayroll/Person, WebPayroll/CustomEmployee */
.imageInfoSection
{
    DISPLAY:inline-block;
    vertical-align:top;
    text-align: left;
    margin-left:15px;
    margin-top:5px;
    width:600px;
}

/* Carl ToolTip*/

/* Tooltip container */
/* FrameWork/ToolTip */
.basicToolTip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    /* Tooltip text */
    /* FrameWork/ToolTip */
.basicToolTip .basicToolTipText {
  visibility: hidden;
  width:260px;
  top: 100%;
  left: 50%; 
  background:#fff;
  color:black;
  padding: 5px 5px 5px 5px;
  border: 1px solid black;
  position: absolute;
}

    /* Show the tooltip text when the mouse over the tooltip container */
    /* FrameWork/ToolTip */
    .basicToolTip:hover .basicToolTipText {
        visibility: visible;
    }

/*End ToolTip*/

/* WebPayroll */
.workExtensionValue
{
    display: inline-block;
    /*margin-left: 20px;*/ 
    width: 30px;
}

/* WebApp/LineCalendar */
.lineCalendarCell {
    width: 30px;
    padding-left: 0px;
    padding-right: 0px;
}

/* WebApp/LineCalendar */
.lineCalendarCellContent {
    text-align: center;
}

/* ComboBox - Autocomplete*/
/* FrameworkWeb/ComboBoxControlBuilder */
.inputComboWithSearch {
    padding-right: 20px !important;
}

/* FrameworkWeb/ComboBoxControlBuilder */
.imgComboWithSearch {
    margin-left: -15px;
}

/* FrameworkWeb/ComboBoxControlBuilder */
.sectionInputComboWithSearchGroup {
    display: block;
    white-space: nowrap;
}

    /* FrameworkWeb/ComboBoxControlBuilder */
    .sectionInputComboWithSearchGroup input[type=text] {
        min-width: 0 !important;
        max-width: 100% !important;
    }

/* FrameworkWeb/ComboBoxControlBuilder */
.sectionInputComboWithSearchGroupDisabled {
    display: inline-block;
    white-space: nowrap;
}

/* FrameworkWeb/ComboBoxControlBuilder */
.sectionInputComboWithSearchGroup:hover {
    transition: 0.3s
}

/* FrameWork/BaseInputControlBuilder */
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0px;
}

/* FrameWork/BaseInputControlBuilder */
html .ui-autocomplete {
    height: auto;
}

/* FrameWork/BaseInputControlBuilder */
ul.ui-menu.ui-autocomplete {
    padding-right: 0px;
    max-width: 325px;
}

/* FrameWork/BaseInputControlBuilder */
.ui-menu-item .ui-state-hover,
.ui-menu-item .ui-state-active {
    border: none;
    margin: 0;
    font-weight: normal !important
}

/* WebSalesApp/CumulativeHistoryAe.cshtml */
.csp-uppercase {
    text-transform: uppercase;
}

/* Overload de UIKit qui imposait un max-width: 100% sur les toutes images, 
    qui peuvent dépasser d'une cellule.  
    L'impact a été limité aux childs de defaultTable pour être plus safe et ne pas impacter le responsiveness */
/* Tableaux */
.defaultTable img {
    max-width: inherit;
}

/* FrameWork/BaseCustomFilterData */
.csp-button-CustomFilter-Active {
    margin-right: 7.5px;
}

/* FrameWork/BaseCustomFilterData */
.csp-button-CustomFilter {
    font-size: 1em;
}

/* FrameWork/FilterSection */
.csp-button-Filter-Active {
    margin-right: 7.5px;
}

/* FrameWork/FilterSection */
.csp-button-Filter {
    font-size: 1em;
}

/* FrameWork/InputControl */
.csp-spanFlag {
    margin-left: 2px;
}

/* FrameWork/InputControl */
.csp-div-radio-right {
    padding-top: 0.2em;
}

/* FrameWork/Input*Control, FrameworkWeb/DateTimeControlBuilder */
.csp-lnk-DatePicker {
    vertical-align: middle;
    text-decoration: none !important;
}

/* FrameWork/GenericDateControl */
.csp-img-DatePicker {
    PADDING-BOTTOM: 0;
    PADDING-TOP: 0;
    PADDING-LEFT: 0;
    PADDING-RIGHT: 0
}

/* FrameWork/InputControl */
.csp-ctrl-link {
    vertical-align: middle;
    text-decoration: none;
}

/* FrameWork/InputControl */
.csp-ctrl-link-img {
    PADDING-BOTTOM: 0;
    PADDING-TOP: 0;
    PADDING-LEFT: 0;
    PADDING-RIGHT: 0
}

/* FrameWork/InputControlFile */
.csp-input-ctrl-file-link {
    margin-right: 1em;
    margin-left: 1em;
}

/* FrameWork/InputControlPassword, FrameworkWeb/BaseInputControlBuilder */
.csp-span-pwd {
    margin-left: 5px;
    font-weight: bold;
}

/* FrameWork/InputControlWithText */
.csp-div-input-withtext {
    padding: 2px;
    display: inline;
    vertical-align: text-top;
}

/* FrameWork/PageNavigator */
.csp-lnk-pagenav {
    text-decoration: none;
}

/* FrameWork/BreakingSelectionTableStatic */
.csp-break-select-table {
    border-top-width: 0px;
    border-top-style: none;
}

/* FrameWork/TableListColumnMessage, FrameworkWeb/ContextSection */
.csp-span-warn {
    Z-INDEX: 150;
    POSITION: absolute;
}

/* FrameWork/TableListEdition */
.csp-img-removerow {
    border: 0;
}

/* FrameworkWeb/ContextSection */
.csp-span-user-icon-warn {
    float: Left;
    padding-left: 5px;
}

/* FrameworkWeb/ContextSection */
.csp-table-user-icon-warn {
    border: 0px;
    box-shadow: 0px 0px 0px;
}

/* TODO dead code. */
.csp-nav-select {
    margin-right: 10px;
    margin-left: 10px;
}

/* FrameworkWeb/DivExtension */
.csp-first-title {
    border-top-width: 0px !Important;
}

/* TODO dead code. */
.csp-div-tooltip {
    display: inline-flex;
    align-items: center;
}

/* FrameworkWeb/InputNoTrControlBuilder */
.csp-iput-notr {
    width: 5em;
    margin-right: 3px;
    float: left;
}

/* FrameworkWeb/BaseTable */
.csp-span-nav-button {
    margin-left: 10px;
    vertical-align: text-bottom;
}

/* FrameworkWeb/Tabs */
.csp-tabs-div {
    margin-bottom: 1px;
}

/* FrameworkWeb/Tooltip */
.csp-tooltip-div {
    display: inline;
    margin: 0 1px 0 1px;
}

/* FrameworkWeb/Tooltip */
.csp-tooltip-img {
    margin: 0 15px 0 1px;
}

/* FrameWork/TableListColumnMultiCol */
.csp-colmulti-wrap-cell-content {
    margin-bottom: 3px;
    clear: both;
    white-space: nowrap;
}

/* FrameWork/TableListColumnMultiCol */
.csp-colmulti-nowrap-cell-content {
    margin-bottom: 3px;
    clear: both;
    white-space: nowrap;
}

/* FrameWork/InputControl, FrameWork/InputControlFile */
.csp-label {
    display: inline;
    padding-top: 0.2em;
    vertical-align: baseline;
}

/* FrameWork/InputControl, FrameWork/InputControlFile */
.csp-label-left {
    padding-top: 0px;
}

/* FrameWork/InputControlFile */
.csp-label-text {
    white-space: wrap;
    word-wrap: break-word;
    text-align: left
}

/* FrameWork/TableListStatic */
.csp-warning {
    width: 25em;
}

/* FrameworkWeb/TableEdition */
.hidden-show-as-row {
    display: none !important;
}

/* WebPayrollApp/YearEndActivityController */
.hidden-show-as-row-input {
    width: 100% !important;
    text-overflow:ellipsis;
}

/* FrameworkWeb/DropDownListControlBuilder */
.csp-whitespace-breakspaces {
    white-space: break-spaces !important;
}


/*** Toogle switch base ***/
/* FrameWork/InputControlToogle, FrameworkWeb/ToogleSwitchControlBuilder */
.toogle-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
    margin-top: 6px;
    overflow: visible !important;
}

    /* FrameWork/InputControlToogle, FrameworkWeb/ToogleSwitchControlBuilder */
    .toogle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* FrameWork/InputControlToogle, FrameworkWeb/ToogleSwitchControlBuilder */
.slider {
    position: absolute;
    cursor: pointer;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0px;
    background-color: #666666;
    background-image: none;
    border-radius: 24px;
}

    /* FrameWork/InputControlToogle, FrameworkWeb/ToogleSwitchControlBuilder */
    .slider:before {
        position: absolute;
        content: "";
        height: 10px;
        width: 10px;
        left: 3px;
        top: 3px;
        background-color: white;
        border-radius: 50%;
    }

/* FrameWork/InputControlToogle, FrameworkWeb/ToogleSwitchControlBuilder */
input:focus ~ .slider {
    outline: 2px solid #333;
    box-shadow: 0px 0px 0px 1px #aaa inset;
}

/* FrameWork/InputControlToogle, FrameworkWeb/ToogleSwitchControlBuilder */
input:disabled ~ .slider {
    background-color: #c4c4c4 !important;

}
    /* FrameWork/InputControlToogle, FrameworkWeb/ToogleSwitchControlBuilder */
    input:disabled ~ .slider:before {
        background-color: #999999 !important;
    }

/* FrameWork/InputControlToogle, FrameworkWeb/ToogleSwitchControlBuilder */
input:checked:disabled ~ .slider:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNiA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuMjQwMjcgMy4yMjk4Nkw0LjkyNDUgMC41TDYgMS42MTE3MUwyLjIzODM2IDUuNUwwIDMuMTg2MjhMMS4wNjExNSAyLjAxMTA0TDIuMjQwMjcgMy4yMjk4NloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
    background-repeat: no-repeat;
    background-position: center;
}

/***
 * Boxing colors for columns on tables controls 
 * Ex. user type on contact page 
 ***/
/* WebPortal/ContactPersonList */
.csp-div-border-remark {
    border: 1px solid #1E0492;
    display: inline-flex;
    border-radius: 2px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2px 4px;
    font-family: Arial;
    font-size: 10px;
    font-style: normal;
    height: 15px;
    font-weight: 700;
    width: 190px;
}

.user-card-info {
    padding-top: 5px;
}

/*******************************************************************
    Section consulter le statut de production des feuillets d'impôt 
 *******************************************************************/
/* WebPayrollApp/Controllers/YearEnd/TaxSlipProductionStatusController */
.tblTaxSlipStatus-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 8px;
}

.tblTaxSlipStatus-colLeft {
    flex-grow: 1;
    text-align: left;
    display: flex;
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
}

.tblTaxSlipStatus-colRight {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 18px;
    width: auto;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 4px;
/*    border-color: #053E26;
    background-color: #D9F0E3;*/
}

.tblTaxSlipStatus-colRight-img {
    width: 16px;
    height: 16px;
}

.tblTaxSlipStatus-colRight-txt {
    font-family: Arial;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    /*color: #093139;*/
}

/* Custom Tag*/

.status-info-img {
    margin-right: 0.5em;
    margin-bottom: 2px;
}

.status-info {
    display: flex;
    align-items: center;
    padding: 0.4em 0.7em;
    border: 0.17em solid;
    border-radius: 5px;
}

.status-info-approve {
    background-color: #E0F2D9;
    border-color: #1C3513
}

.status-info-reject {
    background-color: #FDE3E8;
    border-color: #580918
}

.status-info-empty {
    background-color: white;
    border-color: black
}

.status-info-attente-approbation {
    background-color: #F3F4F5;
    border-color: #404040
}