/**
 * @file
 * @brief styles pour la nouvelle version de la viewlist 
 * @log:
 * - 29/12/2011 LL (+) ajout d'un style alternatif sur le champs s'il a une valeur par défaut
 * - 29/04/2013 LL (+) création d'un nouveau style VLLIGHT : la viewlist sans la barre de navigation => supprimé, géré avec des propriétés de l'objet viewlist 03/07/2018
 * - 10/07/2013 JF (+) détail des lignes
 */


/* -- input dynamiques pour la viewlist -- */
/* -- etat normal -- */
.viewlist_select_off {
    font-size:8pt;
    width : auto;
    text-align:left;
    background-color:#FFFFFF; 
    color:#000000;
    padding: 3px;
    border : #d0d0d0 1px solid;
}

/* -- etat selectionné -- */
.viewlist_select_on  {
    font-size:8pt;
    background-color:#cee7ff;
    color:#000000;
}

/* -- etat filtre actif -- */
.viewlist_champ_saisi {
    width: auto;
    white-space: nowrap;
    border-collapse:collapse;
}
.viewlist_champ_saisi td {
    padding:0px;
    margin:0px;
}

.viewlist_iconize {
    text-align:left;
    background-color:#E6B7DC;
    width:auto;
    color:#7d2d6d;
	font-weight: bold;
}


.viewlist_effacer_off {
    font-size: 11px;
    background: transparent;
    border:none;
    cursor:pointer;
}

.viewlist_effacer_on {
    height : 13px;
    cursor:pointer;
    background-color:#cee7ff;
    border : #FFFFFF 1px solid;
    border-left:none;
    padding-bottom : 1px;
    margin-left : -7px;
}

table.VL_FORM {
    border-spacing: 0px;
    padding: 0px;
    border: 1px solid #cccccc;
    border-collapse:collapse;
}

table.VL {
    border-spacing: 0px;
    padding: 0px;
    border: 1px solid #cccccc;
    border-collapse:collapse;
}

/**
 * Styles généraux
 */
.VL img { margin:0px 0px 0px 0px; border-style: none; }

.VL p{
    margin:3px;
}

/**
 * Entête du tableau
 */

.VL>thead>tr>td,
.VL>thead>tr>th
{
    padding-left: 5px;
    padding-right: 5px;
}

/* 1ère ligne d'entête : navigation */
.VL>thead .arrows {
    border-spacing: 0px;
    padding: 0px;
    border-collapse:collapse;
}
.VL>thead .arrows tr,
.VL>thead .arrows td
{
    border-spacing: 0px; padding: 0px;
}

.VL>thead .arrows td a {
    display: block;
    width: 26px;
    height: 26px;
}

.VL>thead .arrows td:first-child a {
    background-image: url('../img/viewlist/double_left_arrow.png');
}

.VL>thead .arrows td:first-child a:hover {
    background-image: url('../img/viewlist/double_left_arrow_over.png');
}

.VL>thead .arrows td:nth-child(2) a {
    background-image: url('../img/viewlist/left_arrow.png');
}

.VL>thead .arrows td:nth-child(2) a:hover {
    background-image: url('../img/viewlist/left_arrow_over.png');
}

.VL>thead .arrows td:nth-child(3) a {
    background-image: url('../img/viewlist/right_arrow.png');
}

.VL>thead .arrows td:nth-child(3) a:hover {
    background-image: url('../img/viewlist/right_arrow_over.png');
}

.VL>thead .arrows td:nth-child(4) a {
    background-image: url('../img/viewlist/double_right_arrow.png');
}

.VL>thead .arrows td:nth-child(4) a:hover {
    background-image: url('../img/viewlist/double_right_arrow_over.png');
}

.VL>thead tr.tools td {
    background-color: #EFEFEF;
    color: #2b4049;
}

/* 2ème ligne d'entête : nom des colonnes */
.VL>thead tr.columns th {
    height:30px;
    background-color:#2B4049;
    text-align: center;
    color: #ffffff;
}

.VL>thead tr.columns th a,
.VL>thead tr.columns th a:visited
{
    color: #ffffff !important;
    font-weight:bold;
}

/* 3ème ligne d'entête : champ de recherche */
.VL>thead tr.search td.search_button>button[type=submit]
{
    background: transparent url(../img/recherche.gif) no-repeat center center ;
    border : none;
    display: inline-block;
    width:15px;
    height:15px;
}

.VL>thead tr.search td span.form-group {
    white-space: nowrap;
}

.VL>thead tr.search>td>span.form-group>button[type=submit].cleaner
{
    color: #2B4049 !important;
    background-color: transparent;
    border : none;
}

/**
Corps du tableau de la viewlist
 */
.VL>tbody td {
    white-space: nowrap;
    word-break: break-all;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.VL>tbody td.multi_lines {
    white-space: normal;
}

.VL>tbody tr {
    background-color:#FFFFFF;
}

.VL>tbody tr:nth-child(2n) {
    background-color:#efefef;
}
.VL>tbody tr:hover {
    background-color:#D0D0D0;
}

.VL>tbody tr.ligne_supprimee td {
    text-decoration: line-through;
    color: gray;
}

TR.VL_L1_RED{ background-color:#D69FAC; }
TR.VL_L2_RED{ background-color:#CE97AC; }
TR.VL_L1_GREY{ background-color:#F7F7FF; }
TR.VL_L2_GREY{ background-color:#F2F2FF; }

/**
 * Pied du tableau
 */
.VL>tfoot>tr {
   border-top: 1px solid #cccccc;
}
.VL>tfoot table td:last-child {
    text-align: right;
    width:250px;
    white-space: nowrap;
}

.VL>tfoot table .foot_buttons {
    white-space: nowrap;
    text-align: left;
}

/* Détails des lignes */
.details_ligne {
    margin : 2px 2px 2px 15px;
    border : 1px dotted gray;
    padding : 4px;
    background-color : white;
    display : none;
}

.voir_details_ligne {
    padding-left : 25px;
    background : transparent url('../img/viewlist/detail.gif') no-repeat left center;
}

.commentaires_ligne {
    margin : 2px 2px 2px 15px;
    border : 1px dotted gray;
    padding : 4px;
    background-color : white;
    color : #333333;
    display:block;
    font-style:italic;
    font-weight:normal;
}

/**
 * Identification des colis à la ligne
 */
.identification_colis_ligne div {
    display : none;
    position : fixed;
    top : 0px;
    left : 0px;
    width : 100%;
    height : 100%;
    background-color : rgba(200,200,200,0.5);
}

.identification_colis_ligne div table {
    background-color : #fff;
    margin : 10% auto 0px auto;
    border-top-left-radius : 5px;
    border-top-right-radius : 5px;
    box-shadow: 5px 5px 5px #aaa;
}

.identification_colis_ligne div table th {
    text-align : center;
    padding : 5px;
}

.identification_colis_ligne div table tfoot td {
    text-align : center;
}

.identification_colis_ligne img {
    cursor : pointer;
}
