*{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
html,body{
    margin:0;
    width: 100%;
    height: 100%;
}

#login-wrapper{
    display: flex;
    min-height: 100%;
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 1rem;
}
#login-container{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.w50{
    width: 50%;
}

#editor{
    height: 200px;
}
.agenda-img{
height: 75px;
}
.card-wrapper{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:0.3rem;
}
.card-item p,.card-item h3{
    margin:0;
}
.card-item{
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.faq-item{
    border-style: solid;
    border-color: #F5F5F5;
    border-width: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}

/**design du tableau de bord*/
.main-app{
    width: 100%;
    min-height: 100%;
    display: grid;
    grid-template-areas: "header header"
    "sidebar page"
    "footer page";
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto 1fr auto;
    box-sizing: border-box;
}

.header_{
    grid-area: header;
    display: flex;
    box-sizing: border-box;
    padding: 0.25rem;
}
.header_ h3{
    flex: 1;
}
.sidebar_{
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap:0.25rem;
    box-sizing: border-box;
    padding: 0.25rem;
}
.sidebar_ a{
    text-align: start;
}
.page_{
    grid-area: page;
    box-sizing: border-box;
    overflow: auto;
}
.footer_{
    grid-area: footer;
}
.footer_ p{
    margin: 0;
}
.koko-img{
    border-radius: 0.5rem;
}
/**/
.custom-badge-success{
    color:#198654;
    background-color:#1987541a;
    border-color: #198654;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    border-radius: 0.25rem;
}
.custom-badge-danger{
    color:#862819;
    background-color:#e04c0d1a;
    border-color: #862819;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    border-radius: 0.25rem;
}
.custom-badge-primary{
    color:#194186;
    background-color:#0d6fe01a;
    border-color: #194186;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    border-radius: 0.25rem;
}

/***/
.dropdown-item{
    border-color: #e2e2e2;
    border-style: solid;
    border-radius: 0.2rem;
    background-color: #F5F5F5;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin: 0.1rem;
}
#zone1,#zone2{
height: 300px;
padding: 0.25rem;
box-sizing: border-box;
}
.btn-koko{
    background-color: #006239;
    border-color: #00CC66;
    color: #FFFFFF;
}
.btn-koko:hover,.btn-koko:focus,.btn-koko:active{
    background-color: #3da35d;
    color:#FFFFFF;
}
.form-control:focus,.form-control:active{
    border-color:  #00CC66;

}
.btn.active{
    background-color: #3da35d;
    color:#FFFFFF;
    border-color:  #00CC66
}
#map { 
    height: 400px;
    width: 100%;
}

/**/

@media (max-width:768px){
.w50{
    width: 100%;
}
.main-app{
    display: grid;
    grid-template-areas: "header"
    "sidebar"
    "page"
    "footer";
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: auto auto 1fr auto;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.sidebar_{
    grid-area: sidebar;
    flex-direction: row;
    display: flex;
    flex-wrap: nowrap;
    gap:0.25rem;
    min-height: auto;
    overflow: auto;
    white-space: nowrap;
}
.dropdown,.navigation-item{
    min-width: 45%;
    height: fit-content;
}
.dropdown{
    width: fit-content;
    white-space:initial;
}
.page_{
    grid-area: page;
    min-height: 100%;
}
.card-wrapper{
    grid-template-columns: repeat(2, 1fr);
    gap:0.3rem;
}
.btns-import{
    width: 100%;
}
#chart-wrapper{
    flex-direction: column;
}
#zone1,#zone2{
height: 30vh!important;
width: 100%!important;
}
}