chtml {
        font-family: lato, sans-serif;
    }
    
    a:not([href]) {
        color: black;
    }

    #recherche{
        float: right;
        margin-right: 10px;
        margin-top: 5px;;
        width:500px;
    }

    .sinRedAlert{
        padding: 20px;
        background-color: #f44336; 
        color: white;
        margin-bottom: 15px;
        font-size: 22px;
    }

    .sinWhiteAlert{
        padding: 20px;
        background-color: white; 
        color: grey;
        margin-bottom: 15px;
        font-size: 22px;
    }

    .sinBlueAlert{
        padding: 20px;
        background-color: lightblue; 
        color: white;
        margin-bottom: 15px;
        font-size: 22px;
    }

    .sinYellowAlert{
        padding: 20px;
        background-color: lightgoldenrodyellow; 
        color: grey;
        margin-bottom: 15px;
        font-size: 22px;
    }

    .sinVignetteImgJoin{
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        background-image: url("/pics/Boutique.jpg");  
        /*height: 50%;*/
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }

    .sinVignetteImgPartner{
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        background-image: url("/pics/Partenariat.jpg");  
        /*height: 50%;*/  
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }

    .sinVignetteImgTxt{
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
    }

    @media screen and (max-width: 700px) {
        #recherche{

            margin-right: 10px;
            margin-left: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            width:100%;
        } 
    }

    .text-block {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background-color: black;
        color: white;
        padding-left: 20px;
        padding-right: 20px;
        opacity: 0.7;
      }

    /*************************************/
    /*Code CSS pour la sidebar responsive*/
    /*************************************/
    
    .sinNav {
        position: fixed;
        width: 100%;
        height: 52px;
        margin: 0;
        padding: 0;
        background-color: #F0F0F0;
        top: 0;
    }
    
    .sinNavCon {
        z-index: 1;
    }
    
    .sinAvatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border-style: solid;
        /*border-color: #F0F0F0;*/
        border-color: #424949;
        float: right;
        margin-right: 10px;
        transition: transform 500ms ease-in-out;
    }
    
    .animeted {
        transition: transform 500ms ease-in-out;
    }
    
    .sinAvatarProfil {
        width: 100px;
        height: 50px;
        border-radius: 10%;
        float: right;
        margin-right: 10px;
    }
    
    .sinLogo {
        width: 75px;
        height: 50px;
        float: left;
    }
    
    .sinConn {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        float: right;
        margin-right: 10px;
        margin-top: 10px;
    }
    
    .sinTitle {
        width: 150px;
        height: 52px;
        float: center;
    }
    /*************************************/
    /*Code CSS pour la sidebar responsive*/
    /*************************************/
    
    .sinSidebar {
        background-color: lightgrey;
        color: red;
        margin: 0px;
        padding: 0px;
        width: 200px;
        position: fixed;
        height: 100%;
        top: 50px;
    }
    
    .sinSidebar a {
        display: block;
        text-decoration: none;
        height: 40px;
        padding: 10px;
        font-weight: 600;
        color: black;
    }
    
    .sinSidebar a.active {
        background-color: black;
        color: white;
    }
    
    .sinSidebar a:hover:not(.active) {
        color: white;
        background-color: grey;
    }
    
    .sinSidebar a:hover {
        cursor: pointer;
    }
    
    .sinMain {
        background-color: #FAFAFA;
        color: black;
        margin-left: 200px;
        padding: 5px;
        height: 100%;
        overflow-y: auto;
        margin-top: 50px;
    }
    
    @media screen and (max-width: 700px) {
        /* Le cas ou le site fonctionnerait sur tablette */
        .sinNav {
            position: relative;
        }
        .sinSidebar {
            width: 100%;
            height: 40px;
            position: relative;
            left: 0;
            top: 0;
        }
        .sinSidebar a {
            float: left;
        }
        .sinMain {
            margin-left: 0px;
            margin-top: 0px;
        }
    }
    
    @media screen and (max-width: 400px) {
        /* Le cas ou le site fonctionnerait sur smartphone*/
        .sinSidebar {
            position: static;
            width: 100%;
            height: auto;
            text-align: center;
        }
        .sinSidebar a {
            float: none;
        }
        .sinCards {
            text-align: center;
        }
    }
    /*********************************/
    /*Code CSS pour le composant Card*/
    /*********************************/
    
    .sinCard {
        margin: 4px;
        padding: 0px;
        width: 200px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        display: inline-block;
        cursor: pointer;
        z-index: 1;
    }

    .sinLargeCard {
        margin: 4px;
        padding: 0px;
        width: 100%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        display: inline-block;
        cursor: pointer;
        z-index: 1;
    }
    
    .sinCard:hover {
        cursor: pointer;
    }

    .sinLargeCard:hover {
        cursor: pointer;
    }
    
    .img-sinCard {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 200px;
        border: none;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .img-sinBigCard {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 400px;
        border: none;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    
    .img-sinCard-produit {
        padding: 0px;
        margin: 0px;
        width: 200px;
        height: 200px;
        border: none;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    
    .img-sinMiniCard-produit {
        padding: 0px;
        margin: 0px;
        width: 50px;
        height: 50px;
        border: none;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    
    .title-sinCard {
        font-weight: 700;
        /*font-size: 28px;*/
        text-align: center;
    }
    
    .price-sinCard {
        /*font-style: italic;*/
        color: black;
        font-size: 22px;
    }

    #myProductSinImgI:hover{
        cursor: pointer;
    }

    #myProductSinImgII:hover{
        cursor: pointer;
    }

    #myProductSinImgIII:hover{
        cursor: pointer;
    }
    
    @media screen and (max-width: 560px) {
        .sinCard {
            display: block;
            margin-right: auto;
            margin-left: auto;
        }
    }
    /**********************************/
    /*Code CSS pour le composant Modal*/
    /**********************************/
    
    .sinModal {
        display: none;
        height: 100%;
        width: 100%;
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
        overflow: auto;
    }
    
    .sinModalcontent {
        width: 80%;
        margin: 15% auto;
        background-color: white;
    }
    
    .sinModalheader {
        height: 10%;
        width: 100%;
        background-color: lightgrey;
    }
    
    .close {
        float: right;
        color: #ffffff;
        font-weight: bold;
        font-size: 29px;
    }
    
    .close:hover {
        cursor: pointer;
    }
    
    #divloginClient {
        background-color: lightgreen;
        padding: 4px;
    }
    
    #divloginMerchant {
        background-color: lightblue;
        padding: 4px;
    }
    
    #divlogoutClient {
        background-color: grey;
        padding: 4px;
    }

    #sinLoginModal {
        overflow: hidden;
    }
    /***********************************************/
    /*Code CSS pour le composant side by side image*/
    /***********************************************/
    
    .imgsinrow::after {
        content: "";
        clear: both;
        display: table;
    }
    
    .imgsincol {
        width: 33.33%;
        float: left;
        padding: 5px;
    }
    
    @media screen and (max-width: 500px) {
        .imgsincol {
            width: 100%;
        }
    }
    /************************************/
    /*Code CSS pour le composant sin-btn*/
    /************************************/
    
    .sin-btn {
        float: right;
        margin-right: 5px;
        margin-bottom: 2px;
    }
    /*************************************/
    /*Code CSS pour le bouton inscription*/
    /*************************************/
    
    #inscription:hover {
        cursor: pointer;
    }
    
    #inscription {
        color: blue;
    }
    /**************************************/
    /*Code CSS pour le textarea du contact*/
    /**************************************/
    
    #sinReclamation {
        width: 90%;
        margin: 5px;
        padding: 5px;
        border-radius: 5px;
    }
    /******************************************/
    /*Code CSS pour la zone de texte du panier*/
    /******************************************/
    
    table {
        overflow-x: scroll;
    }

    .sinTable{
        color: #fff;
    }

    .sinTbody{
        color: #fff;
    }
    /*************************************************/
    /*Code CSS pour l'affichage de la page princiaple*/
    /*************************************************/
    
    .sinCardIndex {
        position: relative;
    }
    
    .banner h2 {
        text-align: center;
        color: #fff;
        font-size: 50px;
    }
    
    .banner {
        height: 50px;
        margin: 0px;
        padding: 0px;
        background-color: #66ACAE;
    }
    
    .sinBackgroundIndex {
        transform: skew(0deg, -10deg) translateY(120px);
    }
    
    .content {
        transform: skew(0deg, 10deg);
    }
    
    .sec2 {
        height: 120px;
        background: linear-gradient(to left, #004C8C, #74BBE4);
        transform: skew(0deg, -4deg) translateY(-80px);
        z-index: 2;
    }
    
    section {
        background: linear-gradient(to left, #004C8C, #74BBE4);
    }
    
    footer {
        position: fixed;
        bottom: 0px;
        text-align: center;
        width: 100%;
        background-color: #2682C4;
    }
    
    @media screen and (max-width: 799px) {
        footer {
            display: hidden;
        }
    }
    /*******************************************************/
    /*Code CSS pour l'affichage de la page d'administration*/
    /*******************************************************/
    /*
.sinBodyAdmin{
    margin-top: 51px;
    margin-left: 200px;
}

.sinDataFormat{
    background-color: #999999;
    color: white;
    margin: 4px;
}

#sinTableCommandes{
    float: left;
    width: 66%;
}

#sinStat{
    float: left;
    width: 32%;
}

@media screen and (max-width: 700px){
    .sinDataFormat{
        float: left;
        width: 100%;
    }

    #sinTableCommandes{
        width: 100%;
    }

    #sinStat{
        width: 100%;
    }

    .sinBodyAdmin{
        margin-left: 0px;
        margin-top: 0px;
    }
}

@media screen and (max-width: 400px){
    .sinDataFormat{
        float: left;
        width: 100%;
    }

    #sinTableCommandes{
        width: 100%;
    }

    #sinStat{
        width: 100%;
    }

    .sinBodyAdmin{
        margin-left: 0px;
        margin-top: 0px;
    }
}
*/
    /**********************************************/
    /*Code CSS pour l'affichage en mode responsive*/
    /**********************************************/
    /*
Une div de classe "sinRow" ou ligne, est une boite qui doit avoir une largeur de 100%
pour contenir les boites div de classe colonne, à noter que s'il y a des éléments placés
de type fixed, il faut mettre toutes les sinRow dans un élément "sinContainer" que l'on 
devra décaler pour bien placer le conteneur de façon visible. 
*/
    /*
    La div de classe sinRow est une div très importante puisque elle permet d'organiser les 
    éléments dans une sorte de panneau.
    une sinRow doit tenir sur toute la largeur du conteneur et avoir la longueur voulue
*/
    
    .sinRow {
        position: relative;
        margin: 0px;
        padding: 0px;
        width: 100%;
    }
    
    .sinRow-dark {
        background-color: #424949;
        color: #ffffff;
    }
    /*
    la syntaxe exacte que doit porter une colonne responsive est la suivante:
    "sinDataFormat col-yyxx"
    xx est le pourcentage que doit occuper la div dans le conteneur parent, et doit 
    être supérieur ou égale à 10 tel:
    class="sinDataFormat col-yy20"
    ce pourcentage sera valable dans le domaine de d'application yy
        _  
       |  1- lg ----> spécifie les ecrans larges comme ceux des PCs
    yy:|  2- md ----> spécifie les ecrans moyens petites résolutions de PC et tablettes
       |_ 3- sm ----> spacifie les ecrans des tablettes

    class="sinDataFormat col-md20"
    les éléments div de classe sinDataFormat doivent être enlevés de leur contexte et 
    les faire flotter à gauche les uns à la suite des autres

    A noter que le total des pourcentages dans une ligne sinRow doit être égale à 100
    */
    
    .sinDataFormat {
        float: left;
    }
    
    .sinBodyAdmin {
        top: 51px;
        margin-left: 200px;
        height: 100%;
        overflow-y: auto;
    }
    
    .sinContainer {
        position: relative;
        width: 100%;
        top: 51px;
        margin-left: auto;
        margin-right: auto;
        overflow-y: visible;
    }
    
    .sinNormalContainer{
        position: static;
        width: 100%;
        top: 0px;
        margin-left: auto;
        margin-right: auto;
        overflow-y: visible;
    }
    
    @media screen and (max-width: 700px) {
        .sinBodyAdmin {
            margin-top: 0px;
            margin-left: 0px;
        }
        .sinDataFormat {
            position: relative;
        }
    }
    
    @media screen and (max-width: 400px) {
        .sinBodyAdmin {
            margin-top: 0px;
            margin-left: 0px;
        }
        .sinDataFormat {
            position: relative;
        }
    }
    /*
    les éléments suivants sont des éléments graphiques simples qui vont transformer des div en zones 
    d'affichage conviviales 
    */
    
    .sinEtiket {
        height: 60px;
        width: 100%;
    }
    
    .sinEtiket-mini {
        height: 30px;
        width: 100%;
    }
    
    .sinetiket-success {
        background-color: #90ee90;
    }
    
    .sinEtiket-primary {
        background-color: #add8e6;
    }
    
    .sinEtiket-danger {
        background-color: #f08080;
    }
    
    .sinEtiket-warning {
        background-color: #ff8c00;
    }
    
    .sinEtiket-title {
        margin-top: 3px;
        color: #ffffff;
    }
    
    .sinEtiket-content {
        margin-top: 3px;
        color: #ffffff;
    }
    
    .sinEtiket-title-chart {
        background-color: #1a5276;
        color: #ffffff;
        text-align: center;
    }
    /*Etiquettes qui vont servir à affiher les données en format annuel, mensuel et journalier*/
    
    .sinEtiket-Y {
        margin: 2px;
        background-color: #8e44ad;
        color: #ffffff;
    }
    
    .sinEtiket-M {
        margin: 2px;
        background-color: #2980b9;
        color: #ffffff;
    }
    
    .sinEtiket-D {
        margin: 2px;
        background-color: #3498db;
        color: #ffffff;
    }
    /*Etiquettes qui vont servir à affiher les données selon leur criticité: Primary, success, warning, danger*/
    .sinEtiket-primary {
        margin: 2px;
        background-color: #4475ad;
        color: #ffffff;
    }

    .sinEtiket-success {
        margin: 2px;
        background-color: #44ad73;
        color: #ffffff;
    }

    .sinEtiket-warning {
        margin: 2px;
        background-color: #a6ad44;
        color: #ffffff;
    }

    .sinEtiket-danger {
        margin: 2px;
        background-color: #ad4744;
        color: #ffffff;
    }
    /*************************************************/
    /*Code CSS pour l'affichage des graphiques charts*/
    /*************************************************/
    /*
        les deux éléments de base pour réaliser l'affichage de graphiques 
        seront les divs et les descriptions de termes
        les graphiques réalisés seront des colonnes verticales ou des 
        barres horizontales
    */
    
    .sinColumnChart {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(101, 1fr);
        grid-column-gap: 3px;
        background: linear-gradient( to bottom, #1a5276, #1a5276 50%, #154360 50%, #154360);
        color: white;
        border-left-style: solid;
        border-left-color: black;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: black;
        border-bottom-width: 1px;
        height: 120px;
        margin: 2px;
    }
    
    .sinBarChart {
        grid-row-end: 101;
        border-radius: 5px 5px 0 0;
        text-align: center;
    }
    
    .sinBarChartDefault {
        background-color: #85c1e9;
    }
    
    .sinBarChartFacebook {
        background-color: #000080;
    }
    
    .sinBarChartInstagram {
        background-color: #808000;
    }
    
    .sinBarChartDirect {
        background-color: #FF00FF;
    }

/*************************************************/
/***************Coloration des spans**************/
/*************************************************/

.sinSuccess{
    background-color:#2980b9;
}
.sinDanger{
    background-color:crimson;
}
.sinCaution{
    background-color:coral;
}
.sinPrimary{
    background-color: darkgreen;
}
.sinWarning{
    background-color:goldenrod;
}
.sinclignote{
    background-color: gray;
   animation-duration: .8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignoter {
    0%   { opacity:1; }
    40%   {opacity:0; }
    100% { opacity:1; }
  }

/****************************************************************************/
/************************Ajout de classes de couleurs************************/
/****************************************************************************/

.sinDarkRed{
    background-color:darkred;
}
.sinBlueViolet{
    background-color:blueviolet;
}
.sinIndigo{
    background-color:indigo;
}
.sinDarkGrey{
    background-color:darkgrey;
}
.sindarkSlateGrey{
    background-color:darkslategray;
}
.sinBlueBlue{
    background-color:#1a5276;
}

/***********************************************************************************************/
/************************bannière responsive pour site de devis en ligne************************/
/***********************************************************************************************/

@media screen and (min-width: 700px){
    .sinProductBanner{
        width: 100%;
    }
}

/**********************************************************************************************/
/******************************Images responsives pour devis***********************************/
/**********************************************************************************************/

/* Nous allons mettre les images dans des div de classe gallery elles même contenues dans 
   des div de classe responsive
   class sinImResponsive: 
   class sinGallery:

*/

div.sinGallery img {
    margin: 6px;
    width: 100%;
    height: 500px;
  }
.sinImResponsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }
@media only screen and (max-width: 700px) {
    .sinImResponsive {
      width: 49.99999%;
      margin: 6px 0;
    }
  }
  
@media only screen and (max-width: 500px) {
    .sinImResponsive {
      width: 100%;
    }
 }

/**********************************************************************************************/
/****************Elements visuels pour Console de transport responsive*************************/
/**********************************************************************************************/

div.tasks {
    position: absolute;
    left: 1%;
    top: 1%;
    opacity: 0;
}

div.task{
    color: white;
    background-color: purple;
    margin: 2px;
    padding: 3px;
    opacity: 0.9;
}

.task:hover {
    cursor: pointer;
}

#map{
    top: 3px;
    height: 500px;
}

@media only screen and (max-width: 500px){
    div.tasks {
        position: static;
        opacity: 0;
    }
}

/**********************************************************************************************/
/****************************Coloration de background******************************************/
/**********************************************************************************************/
.sinDarkBackGround {
    background-color: dimgray;
    color: white;
}

/*********************************************************************************************************************************/
/****************************Boutons affichés sur la carte de l'application transporteur******************************************/
/*********************************************************************************************************************************/
/*
#Validation {    
    float: right;
    margin-right: 10px;
}
#Retour {    
    float: right;
    margin-right: 10px;
}
#Abandon {    
    float: right;
    margin-right: 10px;
}
*/

/*********************************************************/
/******Code CSS pour l'affichage d'un menu lattéral*******/
/*********************************************************/
#MyMenuNav{
    display: none;
}
.menuNav {
    width: 0px;
    height: 100%;
    z-index: 1;
    background-color:#424949;
    transition: 0.5s;
    position: fixed;
    overflow-x: hidden;
    padding-top: 15px;
}

.menuNav .menuNavClose {
    position: absolute;
    top: 0;
    right: 25px;
    margin-left: 50px;
    font-size: 36px;
}

.menuNav a {
    color: beige;
    font-size: 18px;
    text-decoration: none;
    display: block;
    transition: 0.3s;
    padding: 8px 8px 8px 8px;

}

@media screen and (max-width: 450px) {
    #MyMenuNav{
        display: block;
    }
}