/*
    Styles CSS pages web vCards.
*/

/*--------------------------------------------------------------------------------------------------------------*/
/*-- DEFINITION DES ITEMS AFFICHÉS DANS LES DIFFÉRENTS CONTENEURS                                                                       
/*-- Élément autonome permettant d'afficher une information dans une carte ou autre contenant  
/*-- Certaines propriétés peuvent ête modifiées par le parent                  
/**/

@media only screen {
/* STYLES GLOBAUX À L'ENSEMBLE DES BLOCS */
/* Toutes les balises SPAN contenant du texte afficheront une ellipse, si requis */
span[class^="vitem"] { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Toutes les images sont centrées par défaut */
.vitem-image   {height:100%; display:-ms-flexbox; display:flex; justify-content:center; -ms-flex-pack:center; align-items:center; -ms-flex-align: center;}
}
@media only print {
span[class^="vitem"] { white-space:nowrap; }
.vitem-image   {display:table-cell;/**/padding:0 .2in;vertical-align:central;}
}
/* Les images de types thumbnail doivent toujours avoir le même format selon la résolution de la page */
/* Moyen  */
@media screen  {
.vitem-image .vbase-thumbnail   {height:63px; width:63px; }
}
/* Moyen  */
@media screen and ( max-width: 768px ) {
    .vitem-image .vbase-thumbnail   {height:50px; width:50px; }
}
/* Petit   */
@media screen and ( max-width: 540px ) {
    .vitem-image .vbase-thumbnail   {height:40px; width:40px; }
}
@media only print {
.vitem-image .vbase-thumbnail   {display:block;height:63px; width:63px; }
}


/* BLOC CONTENANT UNE INFORMATION D'IDENTIFICATION COMME LE NOM DE L'EMPLOYÉ (ET POSSIBLEMENT UN SOUS-TITRE) */
.vitem-title   {height:auto; text-align:center;   }
.vitem-title-text    { display:block; line-height:19px; font-size:16px; color:#333; text-align:center; }
.vitem-title-subtext { display:block; line-height:14px; font-size:12px; color:#333; text-align:center; margin-top:1px; }


/* BLOC CONTENANT MESSAGE (OBJET ET CONTENU) */
.vitem-message-object  { display:block; line-height:16px; font-size:14px; font-weight:bold; color:#333;  text-align:left; width:80%   }
/* Contrairement aux autres textes des cartes, le message peut s'afficher sur plus d'une ligne. Un script gère l'ellipsis */
.vitem-message-content { display:block; margin-top:5px; height:32px; line-height:16px; font-size:14px; color:#333;    text-align:left;   white-space:normal!important; overflow:hidden; width:80%   } 


/* BLOC DE DATES */
@media only screen {
.vitem-dates { height:63px; } 
}
@media only print {
.vitem-dates{position:relative; /*display:table-cell;padding:.2in; left:500px;top:-50px;*/}
}
.vitem-dates > div  { display:inline-block; width:115px; margin-left:15px; } 
.vitem-dates-header { display:block; padding-top:5px; line-height:13px; font-size:11px; text-align:center; text-transform:uppercase; color:#267cb5!important;  border-top:1px solid #267cb5; }
.vitem-dates-label  { display:block; margin-top:10px; line-height:13px; font-size:11px; text-align:center; text-transform:uppercase; color:#767676!important; }
.vitem-dates-value  { display:block; margin-top:5px;  line-height:16px; font-size:14px; text-align:center; color:#333;   }
.vitem-dates-from   { color:#178849!important; border-color:#178849; }
.vitem-dates-to     { color:#d14638!important;  border-color:#d14638; }
/* Ajout d'un flèche entre les deux dates d'une période*/
.vitem-dates-period > div:last-child { position:relative;  }
.vitem-dates-period > div:last-child:before { content:url('../imgs/GENERIC/vitem-dates-arrow.png'); position:absolute; bottom:0; left:-15px;  }


/* BLOC COMPTEURS D'ÉLÉMENTS DANS UNE COLLECTION */
.vitem-count {  }
.vitem-count-label  { line-height:14px; font-size:12px; color:#767676!important; text-align:left; }    
.vitem-count-value  { line-height:14px; font-size:12px; color:#333; text-align:left; }
/* Ajustement responsive (petit) */
@media screen and ( max-width: 540px ) {
    .vitem-count { padding-left:10px; }
}


/* BLOC CONTENANT LA SÉLECTION DU TRI POUR UNE COLLECTION */
.vitem-sort  { position:relative; }
.vitem-sort-list {list-style:none; position:absolute; z-index:200; min-width:125px; top:20px; right:0; margin:0; padding:0 10px; border:1px solid #ccc;  background:#fff;  box-shadow: 0 0 10px 0 rgba(215,215,215,0.9); }
.vitem-sort-list li {padding:10px 0; text-align:left; cursor:default; border-bottom:1px solid #ccc; }
.vitem-sort-list li:last-child {border:none;}
.vitem-sort-list li:not([class="vitem-sort-selected"]) {cursor:pointer;}
.vitem-sort-list li:not([class="vitem-sort-selected"]):hover {color:#000; }
.vitem-sort-value:after { padding-left:5px; content: url('../imgs/GENERIC/vitem-sort-chevron.png'); }
.vitem-sort-value:hover {cursor:pointer;}
.vitem-sort-label  { line-height:14px; font-size:12px; color:#999; text-align:left; }
.vitem-sort-value  { line-height:14px; font-size:12px; color:#333; text-align:left; }


/* BLOC CONTENANT L'IDENTIFICATION DU TRI NON MODIFIABLE (TRI PRÉFFIXÉ) */
.vitem-sort-disable { }
.vitem-sort-disable .vitem-sort-value:after { content:''; }
.vitem-sort-disable .vitem-sort-value:hover {cursor:default;}
/* Ajustement responsive (petit) */
@media screen and ( max-width: 540px ) {
    .vitem-sort, vitem-sort-disable { padding-right:10px; }
}


/* BLOC CONTENTANT UN LIBELLÉ ET UNE VALEUR PRÉSENTE SOUS FORME DE CHAMP D'INFORMATION */
@media only screen {
.vitem-fields  { height:32px; display:-ms-flexbox; display:flex; justify-content:space-between; -ms-flex-pack:justify; align-items:center; -ms-flex-align: center;}
.vitem-fields div:first-child { width:49%; }
.vitem-fields div:last-child  { width:49%;    }
}
@media only print{
.vitem-fields{display:table-cell; justify-content:space-between; -ms-flex-pack:justify; align-items:center; -ms-flex-align: center; padding:0 .2in;
}
}
.vitem-fields-label    { display:block; line-height:14px; font-size:12px; color:#767676!important; text-align:center; /*!border:1px solid aquamarine;*/ }
.vitem-fields-value    { display:block; line-height:16px; font-size:14px; color:#333!important; text-align:center; padding-top:2px; /*!border:1px solid darkred;*/ }


/* BLOC CONTENTANT UNE VALEUR UNIQUE (PROPRIÉTÉ) */
.vitem-props > div   {display:-ms-flexbox; display:flex; justify-content:space-between; -ms-flex-pack:justify;}
@media only screen {
.vitem-props-value { line-height:14px; font-size:12px; color:#767676; text-align:center; }
}
@media only print{
.vitem-props {text-align:center;}
.vitem-props-value { line-height:14px; font-size:12px; color:#767676!important; text-align:center; }
div{overflow: visible !important; }
}

.vitem-group {
    text-align: right;
    display: inline-flex;
}

.vitem-group-element-space {
    margin-left: 16px;
}

@media screen and (max-width: 600px) {
    .vitem-group {
        text-align: right;
        display: inline-block;
    }
}