:root {
    --ardoise: #2e404f;
    --neige: #e1e7ef;
    --charbon: #000;
    --asphalte: #333;
    --ciment: #6c6c6c;
    --calcaire: #747474;
    --sable: #ede9e2;
    --platre: #d8d8d8;
    --creme: #f9f9f9;
    --poussiere: #eef0f1;
    --yaourt: #fff;
    --alerte-bourgogne: #95090F;
    --alerte-fraise: #f8d7da;
    --alerte-sapin: #155724;
    --alerte-menthe: #d4edda;
    --alerte-moutarde: #856404;
    --alerte-narcisse: #fff3cd;
    --alerte-canard: #0c5460;
    --alerte-ciel: #d1ecf1;
    --contrat-vam: #059fdc;
    --contrat-habitation: #74a31c;
    --contrat-sante: #a05599;
    --contrat-services: #c9186b;
    --contrat-epargne: #ee9201;
    --contrat-pro: #878672;
    --rouge-maif: #e60028;
}

a[href*="https://zpl.io"]:before{
    background-image: url(../assets/img/zeplin-logo.png);
    display: inline-block;
    height: 36px;
    width: 36px;
    vertical-align: middle;
    background-size: cover;
    content: "";
    margin-right: 10px;
}
a[href*="sketch"]:before{
    background-image: url(../assets/img/sketch.png);
    display: inline-block;
    height: 33px;
    width: 36px;
    vertical-align: middle;
    background-size: cover;
    content: "";
    margin-right: 10px;
}
.doc-picto:before{
    display: inline-block;
    height: 20px;
    width: 20px;
    vertical-align: middle;
    background-size: cover;
    content: "";
    margin-right: 10px;
}
.doc-picto.do:before{
    background-image: url(../assets/img/done.png);   
}
.doc-picto.dont:before{
    background-image: url(../assets/img/dont.png);
}
.doc-picto.info:before{
    background-image: url(../assets/img/info.png);
}

.sidebar-nav > ul > li{
    font-weight: bold;
}

.emoji{
    height: 2rem;
}
.dodont{
    width: 200px;
    display: flex;
    width: 100%;
}
.block{
    display: flex;
    flex-direction: column;
    padding: 16px;
    margin: 8px;
    width: 50%;
    position: relative; 
    justify-content: space-between;
    text-align: center;
    font-size: 0.8em;
}
.block img{
    max-height: 270px;
}
.block--do{
    transform: skew(0.4deg) rotate(0.6deg);
    background: #E8FDE9;
}
.block--dont{
    transform: skew(0.2deg) rotate(-1deg);
    background: #FDE8E8;
}
.block--do > *{
    transform: skew(0.4deg) rotate(-0.6deg);
}
.block--dont > *{
    transform: skew(-0.2deg) rotate(0.5deg);
    padding:3% 2%;
}
.markdown-section .block__title{
    display: flex;
    justify-content: space-between;
    margin: 0;
}
.medium-zoom-overlay{
    background: rgba(255,255,255,0.8) !important;
}

/* .folder{
    background-image: var(--sidebar-nav-pagelink-background-image);
    background-position: var(--sidebar-nav-pagelink-background-position);
    background-repeat: no-repeat;
} */
.palette{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.color{
    display: inline-flex;
    flex-direction: column;
    content: "";
    align-items: center;
    font-size: 0.8em;
    flex-basis: 150px;
    margin: 10px;
    padding: 10px 0;
    text-align: center;
    background: rgba(0,0,0,0.02);
    border-radius: 5px;
    
}
.color::before{
    margin-top: 5px;
    height: 40px;
    border-radius: 3px;
    width: 40px;
    content: "";
    border: 1px solid rgba(0,0,0,0.2);
}
.color::after{
    margin-top: 5px;
    height: 20px;
    /* content: attr(title) " - " attr(data-color); */
    content: attr(title);
    background: white;
    font-size: 0.75em;
    color: #747474;
    border-radius: 6px;
    padding: 2px 3px;
    border: 1px solid lightgray;
    color: gray;
    font-weight: bold;
}
.color.alert:before{
    background: var(--alerte-fraise);
}
.color.warning:before{
    background: var(--alerte-narcisse);
}
.color.info:before{
    background: var(--alerte-ciel);
}
.color.success:before{
    background: var(--alerte-menthe);
}
.color.inactif:before{
    background: var(--platre);
}
.color.other:before{
    background: var(--asphalte);
}
.color.primary:before{
    background: var(--ardoise);
}
.color.neige:before{
    background: var(--neige);
}
.color.asphalte:before{
    background: var(--asphalte);
}
.color.calcaire:before{
    background: var(--calcaire);
}
.color.charbon:before{
    background: var(--charbon);
}
.color.platre:before{
    background: var(--platre);
}
.color.ciment:before{
    background: var(--ciment);
}
.color.sable:before{
    background: var(--sable);
}
.color.creme:before{
    background: var(--creme);
}
.color.poussiere:before{
    background: var(--poussiere);
}
.color.yaourt:before{
    background: var(--yaourt);
}
.color.bourgogne:before{
    background: var(--alerte-bourgogne);
}
.color.sapin:before{
    background: var(--alerte-sapin);
}
.color.moutarde:before{
    background: var(--alerte-moutarde);
}
.color.canard:before{
    background: var(--alerte-canard);
}
.color.vam:before{
    background: var(--contrat-vam);
}
.color.sante:before{
    background: var(--contrat-sante);
}
.color.services:before{
    background: var(--contrat-services);
}
.color.epargne:before{
    background: var(--contrat-epargne);
}
.color.habitation:before{
    background: var(--contrat-habitation);
}
.color.pro:before{
    background: var(--contrat-pro);
}
.color.maif:before{
    background: var(--rouge-maif);
}
dfn{
    content: "dfn.";
    font-size: 0.8em;
    padding: .1em .2em;
    color: white;
    background: #000;
    display: inline-block;
    border-radius: 3px;
    margin:  0 0.5ch;
    font-weight: bold;
}
.markdown-section dfn a{
 text-decoration: underline dotted;
}
.file a,.folder{
    background-image: var(--sidebar-nav-pagelink-background-image--collapse, var(--sidebar-nav-pagelink-background-image--loaded, var(--sidebar-nav-pagelink-background-image))) !important;
    background-position: 0px 10px !important;
    background-repeat: var(--sidebar-nav-pagelink-background-repeat);
    padding: var(--sidebar-nav-pagelink-padding, var(--sidebar-nav-link-padding));
    font-weight: bold;
    cursor: pointer;
}

.file.open a,.folder.open{
    background-image: var(--sidebar-nav-pagelink-background-image--active, var(--sidebar-nav-pagelink-background-image--loaded, var(--sidebar-nav-pagelink-background-image))) !important;
}

.folder.level-2 .file a,.file a.section-link{
    background: none !important;
    padding-left: 0 !important;
}