:root {
    --couleur-principale: #8D1E57;
    --couleur-secondaire: #7d1b4e;
    --couleur-blanc-teinte: #faebf3;
}

* {
  font-family: Roboto, sans-serif;
}

a, a:hover, .dark-mode a, .dark-mode a:hover{
    color:var(--couleur-principale);
}

.navbar {
    border-bottom:2px solid var(--couleur-principale);
}

.dark-mode .navbar {
    border-bottom:2px solid var(--couleur-principale);
    background-color: #222222;
}
.sidebar {
    border-right:1px solid #EDEFF4;
    background-color: #FFF;
}

.dark-mode .sidebar {
    background-color: #222222;
}

.sidebarmenu a{
    color: #4f5a66;
}

#toggle-sidebar-btn {
    border : none;
    box-shadow: none;
    outline: inherit;
    margin-top: 2px;
}

.dark-mode #toggle-sidebar-btn {
    background-color: #222222;
}

#toggle-sidebar-btn .fa .fas{
    font-size: 18px;
}

.sidebar-icon {
    background-color: transparent;
}

.breadcrumb a{
    font-weight: 500;
    color:#6b7996;
    text-decoration: none;
}

.breadcrumb:hover a{
    color: var(--couleur-principale);
}

.breadcrumb-item{
    margin-right: 10px;
}

.breadcrumb-item::before{
    content: ' ';
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AgHFAwNJY24UQAAAJVJREFUKM+lk8ENgzAMRZ9hgS4SiRFgDN+6QifpCD1mDFbIIQuwASNwcaSqKsEW/5RI/1n+jiMAqvoE3sCScy50JGb+2H2/ggar3PQAVlWdesBilV2QWIYJWM1Mrz1pBy8k37QHkt8eryD5F6wHydn4zqCBoO63FAodGmvo4UKrETG3bXWbG/DymgHGWmtJKW3A7PmiB2rUYYave/NSAAAAAElFTkSuQmCC);
    background-size: 0.5rem;
    background-repeat: no-repeat;
    background-position: 0rem center;
    padding-right: 1rem;
    padding-bottom: 2px;
}

.sidebarmenu details > summary{
    content: ' ';
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AgHFAwNJY24UQAAAJVJREFUKM+lk8ENgzAMRZ9hgS4SiRFgDN+6QifpCD1mDFbIIQuwASNwcaSqKsEW/5RI/1n+jiMAqvoE3sCScy50JGb+2H2/ggar3PQAVlWdesBilV2QWIYJWM1Mrz1pBy8k37QHkt8eryD5F6wHydn4zqCBoO63FAodGmvo4UKrETG3bXWbG/DymgHGWmtJKW3A7PmiB2rUYYave/NSAAAAAElFTkSuQmCC);
    background-size: 0.6rem;
    background-repeat: no-repeat;
    background-position: 0rem center;
    padding: 0rem 0rem 0rem 1rem;
}

.sidebarmenu details[open] > summary{
    content: ' ';
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC);
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: 0rem center;
    padding: 0rem 0rem 0rem 1rem;
    margin-bottom: 10px;
}

.sidebar-menu .summary-details::before {
    width: 13px;
    display: inline-block;
    content: '●';
    font-size: 0.6rem;
    vertical-align: middle;
    margin-top: -2px;
}

.sidebar-link-with-icon {
    border-radius: 5px;
    padding: 2px;
    margin: 4px 10px;
}

.dropdown-item-with-icon {
    border-radius: 5px;
    padding: 0px;
    margin: 4px;
}

.sidebar-link-with-icon:hover,
.sidebar-link-with-icon:hover .sidebar-icon,
.dropdown-item-with-icon:hover,
.dropdown-item-with-icon:hover .dropdown-icon {
    color: var(--couleur-principale);
    background-color: var(--couleur-blanc-teinte);
}

.sidebar-link-with-icon .sidebar-icon,
.dark-mode .sidebar-link-with-icon .sidebar-icon,
.dropdown-item-with-icon .dropdown-icon,
.dark-mode .dropdown-item-with-icon .dropdown-icon {
    background-color: transparent;
    border-color: transparent;
}

.dark-mode .sidebar-link-with-icon:hover,
.dark-mode .sidebar-link-with-icon:hover .sidebar-icon,
.dark-mode .dropdown-item-with-icon:hover,
.dark-mode .dropdown-item-with-icon:hover .dropdown-icon {
    color: #FFF;
    background-color: #2c2c2c;
}

.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.active,
.btn.btn-primary:focus:hover,
.btn.btn-primary.active:hover,
.dark-mode .btn.btn-primary,
.dark-mode .btn.btn-primary:hover,
.dark-mode .btn.btn-primary:focus,
.dark-mode .btn.btn-primary.active,
.dark-mode .btn.btn-primary:focus:hover,
.dark-mode .btn.btn-primary.active:hover {
    color: #ffffff;
    background-color: var(--couleur-principale);
    background-image: none;
    border-color: var(--couleur-principale);
}

.custom-checkbox input[type=checkbox]:checked~label:before,
.custom-checkbox input[type="checkbox"]:checked~label:before,
.dark-mode .custom-checkbox input[type=checkbox]:checked~label:before,
.dark-mode .custom-checkbox input[type="checkbox"]:checked~label:before {
    background-color: var(--couleur-principale);
    border-color: var(--couleur-secondaire);
    outline: none;
}


.summary-details,
.summary-details a {
    color: #4f5a66;
    background-color: #FFF;
    padding: 2px;
    padding-left: 10px;
    border-radius: 5px;
    margin-left: -10px;
    margin-right: 5px;
}

.dark-mode .summary-details,
.dark-mode .summary-details a {
    color:rgba(255,255,255,.8);
    background-color: #222;
    padding: 2px;
    padding-left: 10px;
    border-radius: 5px;
    margin-left: -10px;
    margin-right: 5px;
}

.summary-details[selected],
.summary-details[selected] a,
.summary-details:hover,
.summary-details:hover a {
    color: var(--couleur-principale);
    background-color: var(--couleur-blanc-teinte);
}

.dark-mode .summary-details[selected],
.dark-mode .summary-details[selected] a,
.dark-mode .summary-details:hover,
.dark-mode .summary-details:hover a {
    color: #FFF;
    background-color: #2c2c2c;
}

details:hover {
    cursor: pointer;
}

.order-menu .summary-details::before {
    width: 13px;
    display: inline-block;
    content: '●';
    font-size: 0.6rem;
    vertical-align: middle;
    margin-top: -2px;
}

.order-menu {
    max-width: 300px;
}

.sortable-list li {
    cursor: move;
}

.order-menu .summary-details:hover,
.order-menu .summary-details:hover a,
.order-menu .dark-mode .summary-details:hover,
.order-menu .dark-mode .summary-details:hover a {
    color: inherit;
    background-color: inherit;
}

.sidebar-menu > .collapse-panel {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.hidden_directory {
    opacity: 0.6;
}

.titreErrorPage {
    color: var(--couleur-principale);
}

.divErrorPage {
    padding-left: 25px;
    padding-top: 25px;
}

.btn-login {
    all: unset;
    background-color: var(--couleur-principale);
    padding: 10px;
    color:#FFF;
    border-radius: 5px;
}

.btn-login:hover {
    all: unset;
    background-color: var(--couleur-principale);
    padding: 10px;
    color:#FFF;
    border-radius: 5px;
    cursor: pointer;
}