/*
    Styles CSS menu, Desjardins.
*/

/* Icônes */
/* Image "Hamburger" en haut de la page */
#hambImg {
    width: 18px;
    height: 18px;
    mix-blend-mode: normal;
    background-image: url('/Common/imgs/DESJARDINS/Menu/hamburger.svg');
}

/* Image "Hamburger" en haut de la page dans la section Header du forme principale */
#headerHambImg {
    position: absolute;
    width: 18px;
    height: 18px;
    margin-top: 16px;
    mix-blend-mode: normal;
    background-image: url('/Common/imgs/DESJARDINS/Menu/hamburger.svg');
    display: none;
}

/* Image "X" qui remplace le Hamburger en haut de la page lorsque le menu est ouvert */
#hamb.sm-active > #hambImg {
    background-image: url('/Common/imgs/DESJARDINS/Menu/close.svg');
}

/* Couleur et bordure des icônes lorsqu'elles sont activées */
.icon.active {
    border-color: #3F8523;
    background: #049854;
    box-shadow: 0px 2px 4px rgba(4, 152, 84, 0.3); /* #049854; et 30% d'opacité */
}

/* Side Menu */
/* Panneau du menu vertical */
.sm-tab {
    color: #049854;
}

/* Sections du menu vertical lorsqu'elles sont activées */
.sm-section-item.active {
    border-left: 1px solid #049854;
}

/* Fonctions du menu vertical lorsqu'elles sont activées */
.sm-function.active a {
    color: #049854 !important;
}

/* Top Menu */
/* Fonctions du top-Menu lorsqu'elles sont activées */
.sf-menu ul li.sfHover > a {
    color: #049854 !important;
}

/* Personnaliser mes favoris */
/* Personnaliser mes favoris sur un hover */
#customizeFavorite:hover > img {
    content: url("/Common/imgs/DESJARDINS/Menu/Active/personnaliser_favoris.svg");
}

/* Icône pour personnaliser mes favoris lorsqu'il est activé */
#customizeFavorite.active > img {
    content: url("/Common/imgs/DESJARDINS/Menu/Active/personnaliser_favoris.svg");
}

/* Div du bouton personnaliser mes favoris */
#customizeFavorite > div {
    color: #049854;
}

/* Div du bouton personnaliser mes favoris sur un hover */
#customizeFavorite:hover > div {
    color: #404040;
}

/* Div du bouton personnaliser mes favoris lorsqu'il est activé */
#customizeFavorite.active > div {
    color: #404040;
}