:root {
    --brand-color:#2f6b81;
    --action-color:#f0840f;
    --action-color_D:#D97100;
    --lightestGrey:#fafcfc;
    --opalGrey:#617177;
    --lightstroke:#F0F8FF;
    --mediumGrey:#D3DBDE;
    --darkGrey: #0E2A43;
    --success: #2F8232;
    --failure: #C32319;
}

body
{
    padding-top:48px;
    padding-bottom:72px;
    font-family:"proxima-nova", "Avenir Next", "Helvetica Neue", Helvetica, Arial;
    background-image:url(../img/backgroundLogo.png);
    background-repeat:no-repeat;
    background-position: 46px 20px;
    font-size:16px;
    line-height:24px;
}
/*=======================================   BASES     ===================================================*/

p
{
    margin-bottom:24px;
}

a
{
    color:var(--action-color);
}
h1
{
    font-size:32px;
    line-height:48px;
    margin:0 0 24px 0;
    color:var(--action-color);

}
h1.small
{
    color:var(--opalGrey);
}
h1 a
{
    color:inherit;
}

h2
{
    font-size:28px;
    line-height:48px;
    margin:0 0 24px 0;
}
h3
{
    font-size:24px;
    line-height:36px;
    margin:0 0 12px 0;
}
h6
{
    color:var(--opalGrey);
    font-weight:400;
    font-size:12px;
    line-height:18px;
    margin:0 0 6px 0;
    text-transform: uppercase;
}
h6 small
{
    color:var(--mediumGrey);
}

h3
{
    font-weight:400;
}

.btn
{
    font-size:16px;
    margin:0px;
}

footer
{
    margin-top:240px;
    margin-bottom:24px;
    color:var(--mediumGrey);
    font-size:12px;
    text-align: right;
}
/*======================================== NAVIGATION ===================================================*/
nav#adminNav {
    position: fixed;
    height:0%;
    top: 0px;
    width:100%;
    overflow: scroll;
    background-color:var(--action-color);
    color:white;
    transition: opacity 0.5s ease-in-out, height 0.0s 1s;
    opacity: 0;
    z-index: 2;
}
nav#adminNav.show{
    height:100%;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, height 0.0s 0s;

}

nav#adminNav a, nav#adminNav h1
{
    color:white;
    text-decoration: none;
    display:block;
}

nav#secondaryNav {
    background-color:rgba(250, 250, 252, 0.9);
    height:36px;
    position: fixed;
    bottom:48px;
    width:100%;
    z-index: 10;
    border-top:1px solid var(--lightstroke);
}
nav#secondaryNav div.container {
    display: flex;
}

nav#secondaryNav div.secNavOnSimple
{
    margin:6px 0px;
}
nav#secondaryNav a
{
    font-size:16px;
    color:var(--brand-color);
    line-height:24px;
    display: inline-block;
    padding-right:24px;
    font-weight:400;
    padding-top:6px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}
nav#secondaryNav a.secNavOn, nav#secondaryNav a:hover {
    color:var(--action-color);
}

nav#secondaryNav a.disabled{
    color:var(--mediumGrey);
}
nav#secondaryNav a.success{
    color:var(--success);
}


nav#mainNav {
    /*background-color: var(--brand-color);*/
    background: -webkit-linear-gradient(90deg, rgb(47, 107, 129), rgb(59, 127, 152));
    background: linear-gradient(90deg, rgb(47, 107, 129), rgb(59, 127, 152));
    position: fixed;
    bottom: 0px;
    width:100%;
    height:48px;
    z-index: 10;

}

nav#mainNav ul
{
    list-style-type: none;
    margin:0px;
    padding:0px;
}

nav#mainNav ul li {
    font-size: 20px;
    font-weight: 300;

    line-height:24px;
    padding:12px;
    display: inline-block;
    transition: all 0.5s ease-in-out;
}

nav#mainNav ul li.branding
{
    padding:6px;
}
nav#mainNav ul li.branding img#logo
{
    height:36px;
    width:36px;
}
nav#mainNav ul li:hover, nav#mainNav ul li.active {
    background-color:var(--lightestGrey);
    color:var(--brand-color);
}

nav#mainNav ul li a{
    color:var(--lightestGrey);
    text-decoration: none;
    transition: all 0.5s ease-in-out;


}
nav#mainNav ul li:hover a, nav#mainNav ul li.active a{
    color:var(--brand-color);
}

/*============= LOGIN ============*/
.loginLogo
{
    text-align:center;
    margin:24px;
}

.loginOptions
{
    text-align: center;
    font-size: 12px;
    color:var(--mediumGrey);
}
/*====PROFIL TRIGGER=====*/
#profilTrigger {
    background-color: var(--brand-color);
    height:72px;
    width:72px;
    color:white;
    font-size:20px;
    position: absolute;
    right:12%;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    padding:24px 0px;
    z-index: 12;

}
#profilTrigger.shown {
    color:var(--brand-color);
    background-color: var(--lightestGrey);
}

nav#profilNav
{
    position: fixed;
    height:0%;
    top: 0px;
    left: 0px;
    width:100%;
    overflow: scroll;
    background-color:var(--brand-color);
    color:white;
    transition: opacity 0.5s ease-in-out, height 0.0s 1s, padding 0.0s 1s;
    opacity: 0;
    z-index: 2;
    padding-top:0px;
    text-align: left;
}
nav#profilNav.show {
    padding-top:48px;
    height: 100%;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, height 0.0s 0s;
    z-index: 12;
}

nav#profilNav h1
{
    color:white;
    font-weight:400;
}
nav#profilNav dt
{
    font-size:12px;
    font-weight:300;
    text-transform: uppercase;
    line-height:24px;
}
nav#profilNav dd {

    font-size: 16px;
    line-height: 24px;
    margin-bottom: 12px;
    font-weight: 300;
}
#profilNav .btn-default
{
    background: none;
    border:1px solid white;
    color:white;
}
#profilNav .section
{
    margin-bottom: 48px;
}

/*New profile*/
#profile .modal-body, #depot .modal-body
{
    text-align: center
}
.profile-picture
{
    margin:24px;
}
.profile-name
{

}
.profile-contact
{
    color: var(--opalGrey);
}
/* =================  Bootsrtap buttons & text ================== */
button#callButton
{
    height: 288px;
    width: 288px;
    font-size:72px;
    border-radius:144px;
    border-width:6px;
    transition: all 0.3s ease-in-out;
}

.btn-info
{
    background-color:var(--brand-color);
    border-color: var(--brand-color);
}
.btn-primary
{
    background-color:var(--action-color);
    border-color: var(--action-color);
}
.btn-primary:hover
{
    background-color:var(--action-color_D);
    border-color: var(--action-color_D);
}
.btn-default
{
    background-color: var(--lightestGrey);
    border-color: var(--opalGrey);
}

.btn-danger
{
    background-color: var(--failure);

}

.text-muted
{
    color:#CCC;
}

/* ==================  Prestations ============== */
.presta-list-item
{
    display: flex;
    align-items: center;
    margin-bottom:24px;
}
.presta-list-item.highlighted {
    background-color: lightgoldenrodyellow;
}
.prestaIcon, .prestaDetail
{

}
.prestaIcon
{
    margin-right:24px;
}
.eventDateHeader
{
    height: 32px;
    color:white;
    background-color:#D3DBDE;
    padding: 3px 12px;
}
.eventDate
{
    width:72px;
    border-right:3px solid var(--action-color);
    color:var(--brand-color);
    height:36px;
    font-size: 20px;
    padding-top:6px;

}
.eventIcon
{
    margin-right:24px;
    padding-left:24px;
}
p.prestaTitre
{
    color:var(--brand-color);
    font-size:18px;
    line-height:24px;
    margin:0px;

}
p.prestaPrix
{
    color:var(--action-color);
    font-size:18px;
    line-height:24px;
    margin:0px;
    font-weight:500;
}


.iconON
{
    color:var(--action-color);
}
.iconOFF
{
    color:#CCCCCC;
}
/*================================== RAYONS UNIVERS ETC ===============================*/
img.restricted
{
    opacity:0.2;
}

.serviceImage
{
    background-color: var(--lightstroke);
    width: 100%;
    padding-top: 66.66%; /* 3:2 Aspect Ratio */
    position: relative; /* If you want text inside of it */
    overflow: hidden;
}
.serviceImage img
{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    max-width:105%;
}

p.serviceInterdit
{
    position:absolute;

    left:0;
    bottom:0;
    right:0;
    padding:12px;
    margin-bottom:0px;
    color:var(--darkGrey);
}

.serviceCard h3.serviceTitle
{
    line-height:44px;
    margin:0px 0px 24px 0px;
}

.serviceCard a
{
    color:var(--darkGrey);
}
.serviceCard a:hover
{
    text-decoration: none;
    color:var(--action-color);
}

.serviceIconLine
{
    background-color: rgba(255, 255, 255, 0.8);
    color:var(--brand-color);
    text-align:right;
    height:36px;
    padding:8px 6px 0px 0px;
    position: absolute;
    bottom:0px;
    width:100%;
}
.serviceIconLine span
{
    margin-left:12px;

}

.bookingstatus
{
    position: absolute;
    top:0px;
    right:0px;
    padding: 3px 6px 3px 16px;
    color:white;
    font-weight:300;
    font-size:12px;
    letter-spacing: 1px;
}
.bookingstatus.disabled
{
    background-color: grey;
}
.bookingstatus.occupe
{
    background-color: red;
}
.bookingstatus.libre
{
    background-color: green;
}



/*====================================== POP UPS ======================================*/
.elemWithQtt
{
    font-size:12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}
.elemWithQtt .elemTitle span.glyphicon
{
    color: var(--mediumGrey);
}

.elemWithQtt .price
{
    color:var(--brand-color);
}
.elemWithQtt .elemPriceQtt
{
    text-align:right;
}
.elemPriceQtt .glyphicon
{
    color:var(--action-color);
}
.elemWithQtt .qtt
{
    display:inline;
    width:30px;
    height:24px;
    padding:0 6px;
    margin-left:3px;
    text-align:center;
}

/*====================================== INFO ======================================= */

.infoListItem
{
    margin-bottom:48px;
}

.infoListItem .infoImage, .info .infoImage
{
    background-color: var(--lightstroke);
    overflow: hidden;
    padding-top: 66.66%;
    position: relative;
    width: 100%;
}
.info .infoImage
{
    margin-bottom: 24px;
}
.infoImage img
{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.infoListItem h3.infoTitre
{
    color:var(--brand-color);
}
.infoListItem p.infoStart
{
    color:var(--opalGrey);
}

.infoListMeta
{
    margin-bottom:0px;
}

.infoListMeta .infoDate
{
    color:var(--mediumGrey);
}

.infoListMeta .tag, .infoMeta .tag, .sideItemContent .tag
{
    border-radius: 3px;
    padding: 1px 6px 0px;
    margin:0px 12px 0px 0px;
}
.clickable
{
    cursor: pointer;
}


.info .infoLike
{
    text-align: right;
}
.info .infoLike span.glyphicon
{
    font-size:24px;
    color:red;
    float:right;
    top:-1px;
    cursor: pointer;
}

.tag.bigTag
{
    display:inline-block;
    height:36px;
    padding:6px 12px 6px 12px;
    border-radius:6px;
    margin: 0px 12px 12px 0px
}
/*=========== SIDE ITEMS ============*/
.sideItem {
    display: flex;
    align-items: center;
    text-align: right;
    justify-content: flex-end;
    margin-bottom:24px;
    cursor: pointer;
    transition: padding 0.3s ease-in-out;
}
.sideItem:hover
{
    padding-right:12px;
}
.sideItem:hover p, .sideItem:hover h6
{
    /*color:var(--action-color);*/
    text-decoration: underline;
}
#logo, #resplogo
{
    max-width:96px;
}
@media (max-width: 768px) {

    .sideItem:last-child
    {
        border-bottom: 1px solid var(--mediumGrey);
    }
    .sideItem{
        text-align: left;
        justify-content:flex-start;
        border-top:1px solid var(--mediumGrey);
        border-right:1px solid var(--mediumGrey);
        border-left:1px solid var(--mediumGrey);
        background-color: var(--lightestGrey);
        margin-bottom:0px;
        height:48px;
    }
    .sideItemContent
    {
        order:3;
    }
    .sideItemImage
    {
        width:48px;
        padding:6px;
    }
    .sideItemImage img
    {
        width: 36px;
        height:36px;

    }
}

.sideItemContent p
{
    margin-bottom:0px;
}


/* ===================  forms   ========================*/

label
{
    color:var(--opalGrey);
    font-weight:400;
    font-size:16px;
    line-height:24px;
    margin-bottom:12px;
}

input.form-control
{
    color:var(--darkGrey);
    height:36px;
    line-height:24px;
    font-size:16px;
}

.radio
{
    margin: 0px 0px 12px    ;
}

.radio + .radio
{
    margin-top:0px;
}
.form-group
{
    margin-bottom:24px;
}

.prixInArray
{
    display: inline-block;
    width:60px;
    text-align: right;
}
.TVAList
{
    display:inline-block;
    width:76px;

}

/* pour masquer les rows vides*/
.emptyRow
{
    display: none;
}
.emptyRow.shown
{
    display: table-row;
}

/* pour montrer un row désactivé*/
tr.desactive
{
    color:var(--mediumGrey);
    background-color:var(--lightestGrey);
}


.condensedForm label
{
    margin-bottom:6px;
}

.condensedForm .radio label
{
    margin-bottom:0px;
}

.condensedForm input.form-control
{
    height:30px;
    line-height:16px;
    font-size:16px;
}

.condensedForm  .radio
{
    margin: 0px 0px 0px    ;
}

.condensedForm .form-group
{
    margin-bottom:12px;
}

/*==================== PANIER =========================*/
#respPanier hr
{
    color:var(--action-color);
}
#respPanier .item p
{
    font-size:20px;
    line-height:24px;
    margin:0px;

}

#respPanier .montantU
{
    color:var(--opalGrey);
    text-align: right;
}

#respPanier .comment p
{
    font-size:12px;
    color:var(--darkGrey);
    margin:0px;
}

#respPanier .subItem
{
    font-size:12px;
    color:var(--darkGrey);
}
#respPanier .subItem .groupeTitre
{
    color:var(--opalGrey);
}

#respPanier .totalLine
{
    font-size:24px;

}

#respPanier hr.grandtotalSeparator
{
    border-top:3px solid var(--action-color);
}
table#fullPanier td, table#fullPanier th
{
    border:none;
    height:24px;
    line-height:24px;
    padding:0px;
}
table#fullPanier th
{
    font-weight:500;
}
#fullPanier .rayon
{
    color:var(--opalGrey);
    font-size:20px;
}
#fullPanier .rayon td
{
    line-height: 48px;
}


#fullPanier img
{
    max-width:48px;
    max-height:48px;
}
#fullPanier small
{
    font-size:12px;
}
#fullPanier .item
{
    font-size:20px;
    color:var(--darkGrey);
}
#fullPanier .subItem
{
    font-size:12px;
    color:var(--darkGrey);
}
#fullPanier .item .qtt
{
    padding:0px 6px;
    color:var(--opalGrey);
    text-align: center;
    width:120px;

}
#fullPanier .item .montantU
{
    color:var(--opalGrey);
    text-align: right;
    width:120px;

}


#fullPanier td.groupeTitre
{
    width:68px;
    color:var(--opalGrey);

}
#fullPanier .comment
{
    font-size:12px;
    color:var(--darkGrey);
}
#fullPanier span.nocomment
{
    font-size:12px;
    color:var(--mediumGrey);
}
#fullPanier .total th
{
    border-top:1px solid var(--brand-color);
    text-align: right;
    font-size:24px;
    line-height:48px;
    font-weight:400;
}
#fullPanier .iTotal
{
    text-align: right;
    width:144px;
}

.sign
{
    border: 1px solid var(--action-color);
    color:var(--action-color);
    border-radius:8px;
    display: inline-block;
    width:16px;
    height:16px;
    line-height:12px;
    margin-top:0px;
    font-size:12px;
    position: relative;
    top:-4px;
    text-align: center;
    cursor: pointer;
}


/*============ NAVIGATION BIS ===============*/


#sphereNav
{
    background-color:var(--brand-color);
    height:48px;

    position:fixed;
    width:100%;
    bottom:0px;
    z-index: 1050;
}
#sphereNav .container
{
    display: flex;
    flex-direction: row;
}

#sphereNav .navBrand
{
    width:48px;
    padding:6px;
}
#sphereNav .navItem
{
    font-size:20px;
    font-weight:300;
    text-align: center;
    padding:12px 12px;
    transition: background 0.3s ease-in-out;
}
#sphereNav .navItem:hover, #sphereNav .navItem.active
{
    background-color:var(--lightestGrey);
}
#sphereNav a
{
    text-decoration: none;
    color:white;
    transition: color 0.3s ease-in-out;
}
#sphereNav a:hover, #sphereNav a .navItem.active {
    color:var(--brand-color);
}

@media (max-width: 768px) {
    #sphereNav .container
    {
        justify-content: space-between;
    }
    #sphereNav .navItem
    {
        font-size:12px;
        width:72px;
        height:48px;
        padding:3px 0px 0px;

    }
    #sphereNav .navItem .navIcon
    {
        background-repeat:no-repeat;
        margin:auto;
        width:24px;
        height:24px;
    }

    .iAccueil
    {
        background-image: url("../img/navIcon/deskWhite.png");
    }
    .iInfo
    {
        background-image: url("../img/navIcon/infoWhite.png");
    }
    .iEspaces
    {
        background-image: url("../img/navIcon/espacesWhite.png");
    }
    .iServices
    {
        background-image: url("../img/navIcon/servicesWhite.png");
    }
    .iSuivi
    {
        background-image: url("../img/navIcon/suiviWhite.png");
    }
    .iCamion
    {
        background-image: url("../img/navIcon/truckWhite.png");
    }
    .iPlanning
    {
        background-image: url("../img/navIcon/dayWhite.png");
    }
    .iPortant
    {
        background-image: url("../img/navIcon/portantWhite.png");
    }
    .iSearch
    {
        background-image: url("../img/navIcon/searchWhite.png");
    }

    .navItem:hover .iAccueil, .navItem.active .iAccueil
    {
        background-image: url("../img/navIcon/deskBlue.png");
    }
    .navItem:hover .iInfo, .navItem.active .iInfo
    {
        background-image: url("../img/navIcon/infoBlue.png");
    }
    .navItem:hover .iEspaces, .navItem.active .iEspaces
    {
        background-image: url("../img/navIcon/espacesBlue.png");
    }
    .navItem:hover .iServices, .navItem.active .iServices
    {
        background-image: url("../img/navIcon/servicesBlue.png");
    }
    .navItem:hover .iSuivi, .navItem.active .iSuivi
    {
        background-image: url("../img/navIcon/suiviBlue.png");
    }
    .navItem:hover .iCamion, .navItem.active .iCamion
    {
        background-image: url("../img/navIcon/truckBlue.png");
    }
    .navItem:hover .iPlanning, .navItem.active .iPlanning
    {
        background-image: url("../img/navIcon/dayBlue.png");
    }
    .navItem:hover .iPortant, .navItem.active .iPortant
    {
        background-image: url("../img/navIcon/portantBlue.png");
    }
    .navItem:hover .iSearch, .navItem.active .iSearch
    {
        background-image: url("../img/navIcon/searchBlue.png");
    }
}

#resplogo
{
    float:right;
}

/*============ LOADING ITEM =========*/
.hearthBeat
{
    animation: pulse 1.0s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    } 50% {
              opacity:0.0;
      }
}

/* ============ FLUX =============*/
.fluxListItemLogo
{
    width:50px;
    height: 50px;
    margin:125px 50px;
}
.fluxListItemBackground
{
    width: 150px;
    height: 300px;
    margin:24px auto;
    background-size: cover;
    background-position:50% 50%;
}

/*===== SONDAGES ======= */
.btn_swatch
{
    height:128px;
    width:128px;
    border:1px solid var(--opalGrey);
    border-radius: 64px;
    -webkit-background-size:90%;
    background-size:90%;
    background-repeat:no-repeat;
    background-position: 50% 50%;
    transition: all 0.2s ease-out;


}

.btn_swatch.active
{
border:4px solid orange;
}

.btn_swatch input
{
    display: none;
}

.sondageOption
{
    text-align: center;
    display: inline-block;
    width:192px;
    vertical-align:top;
    margin-bottom:24px;
}
.sondageOptionLabel
{
    font-size:12px;
}

.sondageResultHolder
{
    display: flex;
    align-items: center;
    margin:0px 24px 24px 0px;

}
.sondageImage
{

    height: 96px;
    width: 96px;
    margin-right:24px;

}
.first .sondageImage
{

    height: 128px;
    width: 128px;

}
.sondageImage img
{
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    border:1px solid var(--mediumGrey);
    width: 100%;
    height:100%;
}

.first .sondageImage img
{
    border:3px solid var(--action-color);
}


.sondageResultHolder .number
{
    font-size:24px;

    font-weight: 500;
    color:var(--brand-color);
    margin-right:24px;
}
.sondageResultHolder .titre
{
    font-size:16px;

}
.sondageResultHolder .resultat
{
    font-size:12px;
    color:var(--darkGrey);
}

.sondageResultHolder.first .number
{
    font-size:30px;
    line-height: 36px;
}
.sondageResultHolder.first .titre
{
    font-size:24px;
    line-height: 36px;
}
.sondageResultHolder.first .resultat
{
    font-size:16px;
    line-height: 36px;

}

.modal-content
{
    border-radius:0px;
}
.modal-body
{
    border-top: 8px solid var(--action-color);
}
@media (min-width: 768px)
{
    .modal-sm {
    width: 360px;
}
}

h2.popUpTitle
{
    text-align: center;
    color: var(--action-color);
}

.inlineSelect .radio
{
    display:inline-block;
    margin-right:12px;
}

/*==================  SUIVI ===============*/
#suivi h3
{
    line-height:36px;
    margin:0px;
}


.timelineElement
{
    display: flex;
    align-items: stretch;

}
.timelineDetail
{
    padding-left:16px;
}
.timelineHint
{
    width:40px;
    background:url("../img/uiIcons/suivi_Oval.png") no-repeat center top, url('../img/uiIcons/suivi_Line.png') repeat-y center;
}




#suivi .dateRow
{
    display: flex;

}

#suivi .dateElem
{
    display: flex;
    align-items: center;
}



#suivi h4
{
    line-height:36px;
    font-weight:400;
    margin:0px;
}
#suivi p
{
    margin-bottom:12px;
}
#suivi .roundSymbol
{
    height:60px;
}

#suivi .dateIcon {

    font-size: 32px;
    margin-right: 24px;
}
#suivi .dateIcon .todo
{
    color:var(--action-color);
}
#suivi .dateIcon .waiting
{
    color:var(--mediumGrey);
}
#suivi .dateIcon .done
{
    color:var(--success);
}

#suivi .suivi_satisfaction
{
    transition: all 0.2s ease-out;
}
#suivi .suivi_satisfaction:hover
{
    padding-bottom:6px;
}
/*  SPECIA L EDITION MULTIPLE  */
.miniTable
{
    font-size:12px;
}
table.miniTable tr td
{
    padding:0px;
}
.miniTable input, .miniTable textarea, .miniTable select
{
    font-size:12px;
    padding:0px;
}
.miniTable .form-group
{
    margin:0px;
}
.miniTable .form-group label
{
    display: none;
}

.miniTable .miniTableIcon .form-control
{
    height:24px;
}

.miniTable .form-control
{
    height:44px;
}


/*============================================================
        COLIS
============================================================*/
#rightZone div.colis, #leftZone div.colis
{
    width:90%;
    border:1px solid gray;
}

#rightZone div.colis
{
    margin-left:10%;
}

#leftZone div.colis.marked
{
    margin-left: 10%;
    border:1px solid green;
    background-color:lightgreen;
}
#rightZone div.colis.marked
{
    margin-left: 0%;
    border:1px solid green;
    background-color:lightgreen;
}

#validationZone, #colisValidationZone
{
    background-color: rgba(240, 132, 15, 0.8);
    width: 100%;
    text-align: right;
    border: 2px solid darkorange;
    position: fixed;
    bottom: 84px;
    left: 0px;
    padding:12px 24px;
    z-index: 10;
}

#validationZone span.validationStep
{

    color:var(--mediumGrey);
    background: #FFF;
    padding:6px 12px;
    line-height: 1.42857143;
    border-radius:4px;
}


#validationZone span.validationStep.validationON
{
    color:var(--success);
}
#validationZone span.validationStep.validationOFF .glyphicon
{
    display: none;
}

/*============================================================
        PLANIFICATION LOGISTIQUE
============================================================*/
div.camionZone
{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 8px;
    border:1px solid var(--lightstroke);
    background-color: var(--lightstroke);
    transition: all 0.5s ease-in-out;
    padding:6px;
    text-align: center;

}
div.camionZone.nonAffecte
{
    border:3px solid var(--failure);
}
div.camionZone:hover
{
    border:1px solid var(--action-color);
}

div.passage
{
    text-align: left;
    padding: 4px;
    border: 1px solid var(--brand-color);
    border-radius:8px;
    background-color: white;
    transition: background 0.5s ease-in-out;

    margin-bottom:4px;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

div.passage.passageFournisseur
{
    background-color:#E3E9EE;
    color:var(--darkGrey);
}

div.passage.passage-manquant
{
    background-color:var(--failure);
    color:white;
}


div.passage:hover
{
    border: 1px solid var(--action-color);
    background-color:lightgrey;
}

.nonAffecte
{
    border: 3px solid var(--failure);
}
div.camionZone.nonAffecte:hover
{
    border: 3px solid var(--action-color_D);
}

div.passage.moving
{
    background-color:var(--action-color);
    border: 1px solid var(--action-color_D);
    color:white;
}
div#dragNdropHint
{
    position: absolute;
    top:-200px;
    left:20px;
    background-color:rgba(255, 125, 125, 0.5);
    border-radius: 4px;
    width: 100px;
    height:40px;
}

span.status, span.qtt
{
    float: right;
    min-width:65px;
    text-align: right;
}
span.status.done
{
    color:var(--success);
}
span.status.problem
{
    color:var(--failure);
}
.passage div.supplement
{
    display: none;
}
.passage:hover div.supplement
{
    display: block;
}

/*----Liste des colis =======*/
/* VERSION DIV */
@media (max-width: 450px)
{
    div.col-sm-6.listOfColis
    {
        padding-left:0px;
        padding-right:0px;
    }
}

div.colis_destination
{
    padding:4px;
    background-color:orange;
    color:white;

}

div.colis
{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:4px;

    border-bottom:1px solid #DDD;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}
div.colis.colisDone
{
    background-color:#DEFDDF;
}
div.colis.colis_unknownStatus
{
    background-color:#F7E2E1;
}

div.colis div.colis_icon
{
    flex:0 0 48px;
    position: relative;
}
div.colis div.colis_detail
{
    flex-grow: 1;
    padding-left: 8px;
}
div.colis div.colis_detail_details
{
    font-size:14px;
}
div.colis_detail_infos span.glyphicon-ok
{
    color:#2F8233;
}

div.colis_detail_details span.glyphicon-info-sign
{
    color:#F0840F;
}
div.colis_detail_details span.glyphicon-info-sign.iconOFF
{
    color:#D3DBDE;
}
div.colis_detail_details span.glyphicon-alert
{
    color:#C3231A;
}



div.colis div.colis_action
{
    flex:0 0 100;
    text-align: right;
    padding-right:4px;
}
div.colis div.colis_action a.btn.btn-xs
{
    font-size: 12px;
    font-weight: 500;
    padding: 6px 4px;
}

.btn-action
{
    font-size: 12px;
    font-weight: 500;
    padding: 6px 4px;
    width:70px;
}
.colisLine{
    transition: background-color 0.2s ease-in-out;

}

div.flag
{
    background-color:#999;
    font-size:10px;
    height:14px;

    color:white;
    position:absolute;
    left:-4px;
    line-height:1.2em;
    padding:2px;
    transition: all 0.2s ease-in-out;
}

div.flag.flag_action
{
    top:14px;
    font-weight: 900;

}
div.flag.flag_none
{

    left:-55px;
}
div.flag.flag_success
{
    background-color:#2F8233;
}
div.flag.flag_error
{
    background-color:#C3231A;
}
div.colisList_Client
{
    background-color:#EEE;
    color:var(--brand-color);
    padding:4px;
    display:flex;
    justify-content: space-between;
    align-items: center;

}

div.colisList_Client_action
{
    flex:0 0 100;
    text-align: right;
    padding-right:4px;
}
div.colisList_Client a.btn.btn-xs
{
    font-size: 12px;
    font-weight: 500;
    padding: 6px 4px 5px 4px;
}

div.colisList_Depot
{
    background-color:#999;
    color:white;
    padding:4px;
}

div.colisList_Casier
{
    background-color:black;
    color:white;
    padding:8px;
}

.flashOnce
{
    animation: flash 1.0s ease-in-out;
}

@keyframes flash{
    0%, 100% {
        background-color:white;
    } 50% {
              background-color:orangered;
      }
}
/* VERSION TABLE */
tr.depotLine th
{

}
tr.clientLine th
{
    color:var(--action-color);
    font-weight:500;
}

table tr.colisLine td
{
    vertical-align: middle;
    transition: all 0.5s ease-in-out;
}
tr.colisLine td.actionIndicator span.glyphicon
{
    color: white;
}
.contenuCamion tr.colisLine.done
{
    position: relative;
    left:12px;
}
.contenuDepot tr.colisLine.done
{
    position: relative;
    left:-12px;
}
tr.colisLine.done td
{
    background-color:#E4FFE6;
}
tr.colisLine.second td
{
    background-color:#E4E4E4;
}
tr.colisLine.done td.actionIndicator span.glyphicon
{
    color: var(--success);
}
tr.colisLine.second td.actionIndicator span.glyphicon
{
    color: black;
}

.contenuCamion
{
    border-right:4px solid lightgrey;
    padding:4px;
}
.contenuDepot
{
    border-left:4px solid lightgrey;
    padding:4px;
}

td.reserveIndicator span.glyphicon-pencil
{
    color: #BBB;
}
td.reserveIndicator span.glyphicon-warning-sign
{
    color: var(--failure);
}
td.reserveIndicator span.glyphicon-exclamation-sign
{
    color:darkorange;
}
td.reserveIndicator span.glyphicon-ok
{
    color:white;
}

span#actionCode
{
    color:darkred;
    font-size: 48px;
    margin-left:24px;
    vertical-align: middle;
}

/* ===== pop up d'info colis ======= */
#colisDetailHolder
{
    background-color: #FAFCFC;
}
.groupeInfoColis
{
    border:1px solid #999999;
    border-radius:8px;
    background-color: white;
}
.groupeInfoColis.main
{
    border:4px solid var(--action-color);
    border-radius:8px;
    background-color: white;
}

#colisDetailHolder .groupeInfoColis table tr:first-child td, #colisDetailHolder .groupeInfoColis table tr:first-child th
{
    border-top:none;

}
#colisDetailHolder h5
{
    text-align: center;
    font-weight:400;
    margin-top: 16px;
}
#colisDetailHolder .groupeInfoColis th
{
    color: var(--action-color);
    font-weight:500;
}

.onTime
{
    color: var(--success);
    font-weight:900;
}
.late
{
    color: var(--failure);
    font-weight:900;
}
.future
{
    color: var(--mediumGrey);
}


/*===========  CONNEXION SUBSTITUTION CONCIERGE ============*/
#clientNav nav#sphereNav
{
    background-color: var(--action-color);
}

#clientHeader
{
    background-color: var(--action-color);
    color:white;
    position: relative;
    top:-48px;
    padding: 4px;
}

#clientHeader a
{
    color:white;
}

/* ----------- RECAP ET CHECKIN -------------*/
table#conciergeRecapControle tr td
{
    vertical-align: middle;
}
table#conciergeRecapControle tr td a
{
    text-decoration: none;
}
table#conciergeRecapControle tr td.compte
{
    color:#CCC;
    font-size:24px;
    font-weight: 300;
}
table#conciergeRecapControle tr td.checkInBtns
{
    width:354px;
}
table#conciergeRecapControle tr td.checkInBtnsDuo
{
    width:180px;
}
table#conciergeRecapControle tr td.date
{
    width:68px;
    text-align: center;
}


/* -----------  PLANNINGS -------------*/
div.planning_day_horizontal
{
    border:1px solid #CCC;
    background-color: var(--lightstroke);
    width:100%;
    height:48px;
    padding:6px;
    position: relative;
}

div.planning_day_horizontal div.planning_contrainte
{
    border:1px solid #BBB;
    background-color:#EEE;
    height:36px;
    font-size: 10px;
    position: absolute;


}

div.planning_day_vertical
{
    border:1px solid #CCC;
    background-color: var(--lightstroke);
    width:100%;
    height:300px;
    padding:6px;
    position: relative;
}
div.planning_day_vertical div.planning_booking
{
    border:1px solid #BBB;
    background-color:forestgreen;

    font-size: 10px;
    position: absolute;
    line-height: 12px;
    color:white;
    width:94%;
}

div.planning_holder
{
    display:flex;
    justify-content: space-between;
}
div.planning_month
{
    width:88%;
    border:2px solid #888;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color:#E8E8E8;
    padding:2px;
}
div.planning_week
{

    display: flex;
    padding:3px;
    justify-content: space-between;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version,*/
    border-bottom:1px solid white;
}

div.planning_day
{
    border:2px solid #BBB;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: white;
    padding:4px 0px;
}
div.planning_day_name
{
    color: #999;
    font-size:12px;
    line-height: 12px;
    padding:4px 0px;
    text-align: center;
    width:14%;
    text-transform: uppercase;
}
div.planning_day.disabled
{
    background: #EEE;

}

div.planning_week .planning_day
{
    width:14%;
    font-size:12px;


}

div.planning_holder .planning_change
{
    width:6%;
    font-size:20px;
    padding-top: 10px;
    text-align: center;
}

div.planning_indicator
{
    display: flex;
}

div.planning_day_plage
{
    height:30px;
    width:50%;
    padding: 3px 3px 0px 0px;

}
div.planning_day_plage.matin
{
    text-align:right;

}

div.planning_day_plage.debut
{
    border-radius:8px 0px 0px 8px;
}
div.planning_day_plage.fin
{
    border-radius:0px 8px 8px 0px;
}

div.planning_day_plage.occupe
{
    background-color:#D3DBDE;
}

div.planning_day:hover, div.planning_day.selected_day
{
    background-color:orange;
}

/* == PLanning horaire discret ==*/
div.hourPlanning
{
    display: flex;
}


div.hourPlanning .scrollerBtn
{
    width:22px;
    text-align: center;
    padding-top:12px;
    color:var(--action-color);
    flex-grow:0;
}
div.hourPlanning .scrollerBtn:hover
{
    background-color:#EFEFEF;
    color:var(--action-color_D);

}


div.hourPlanning .journee
{
    min-width:64px;
    text-align: center;
    flex-grow:1;
}
div.hourPlanning .journee.firstDayOfWeek
{
    border-left: 8px solid white;
}

div.hourPlanning .creneau
{
    font-size:8px;
    height:16px;
    color:white;
    border-left:1px solid lightgray;
    background-color:var(--action-color);
    transition: all 0.3s ease-in-out;
    user-select:none;

}
div.hourPlanning .creneauOdd {
    background-color:var(--action-color_D);
}
div.hourPlanning div.journeeClosed .creneau {
    background-color:#DDD;
}

div.hourPlanning .creneau.forbidden, div.hourPlanning .creneau.forbidden:hover
{
    background-color:lightpink;
}
div.hourPlanning .creneau.highlighted .quarter, div.hourPlanning .creneau.first.highlighted .quarter
{
    background-color:rgba(255, 255, 255, 1);
    color:var(--action-color);
}
div.hourPlanning .creneau.showHour .quarter
{
    color:var(--action-color);
}
div.hourPlanning .creneau.occupe .quarter
{
    background-color:rgba(255, 255, 255, 0.7);
}

div.hourPlanning .creneau.first
{
    border-top:1px solid white;
}

div.hourPlanning .creneau .quarter
{
    font-size:12px;
    color:rgba(255, 255, 255, 0);
    width:80%;
    margin:0 auto;
    line-height: 16px;
    transition: all 0.1s ease-in-out;
}

div.hourPlanning .creneau.first .quarter
{
    color:rgba(255, 255, 255, 0.5);
}
div.hourPlanning .creneau:hover .quarter
{
    font-size:12px;
    color:rgba(255, 255, 255, 1);
    background-color:rgba(255, 255, 255, 0.3);
}
div.hourPlanning .creneau .zeroHour
{
    font-size:12px;
    position:relative;
    left:7px;
    top:-10px;
}

.backHeure
{
    float: left;
    height: 40px;
    width: 20px;
    font-size: 24px;
    font-weight: 300;

}

/* ========= mini planning pour carwash =============*/
.miniEvent
{
    border : 1px solid lightgray;
    border-radius:4px;
    text-align:center;
    padding:3px;
    margin-bottom:6px;

}
.miniEvent .month
{
    color:white;
    background-color: darkred;
}
.miniEvent .day
{
    color:black;
    font-weight: bold;
}
.miniEvent_full
{
    background-color:#CCCCCC;
}
.miniEvent.selected
{
    border : 1px solid darkgreen;
    background-color: lightgreen;
    color: #2F8232;
    border-radius:4px;
}

/*========= DASHBOARD ===========*/
.huge
{
    font-size:80px;
    line-height:80px;
}

.big
{
    font-size:30px;
    line-height:30px;
}
p.indicator
{
    text-align:center;
}

.tendance
{
    font-size:44px;
    font-weight: 100;
    position:relative;
    top:-10px;
}

/*============= SAV ============== */
.reclamationLogisticien
{
    border: 1px solid var(--brand-color);
    border-radius: 8px;
    padding:3px;
}
.reclamationLogisticien.critique
{
    border: 2px solid var(--failure);
    background: #ffeff6;
}
.reclamationLogisticien a
{
    color:black;
}

form textarea.bigTextForm
{
    font-size:20px;
}


/*==== SPECIAL MOT DE PASSE  ====*/
.condition
{
    color:#2F8232;

}
.condition.off
{
    color:#CCC;
}
.condition.off .glyphicon
{
    display:none;
}


/* =====  LOGISTIQUE : traitement de masse en mode Boks ===== */
.massManagBack{
    height:44px;
    /*border:1px solid red;*/
    background-image: url('../img/uiIcons/DepotIcon.png'), url('../img/uiIcons/UsineIcon.png'), url('../img/uiIcons/DepotIcon.png');
    background-repeat: no-repeat;
    background-position:left center, center center, right center;
}
.massManagIndicator
{
    height: 42px;
    width:44px;
    position: relative;
    background-color: rgba(0,100,0,0.4);
    transition: all 0.5s ease-in-out;
}
.massManagIndicator.edited
{
    background-color: rgba(255,125,0,0.4);

}
.massManagIndicator.closed
{
    background-color: rgba(255,0,0,0.9);

}
.massManagIndicator.indic_start
{
    left:-9px;
}
.massManagIndicator.indic_doing
{
    left:39px;
}
.massManagIndicator.indic_done
{
    left:89px;
}