/* Margin negatif */
.m-n1{margin:-.25rem!important}.mt-n1,.my-n1{margin-top:-.25rem!important}.mr-n1,.mx-n1{margin-right:-.25rem!important}.mb-n1,.my-n1{margin-bottom:-.25rem!important}.ml-n1,.mx-n1{margin-left:-.25rem!important}.m-n2{margin:-.5rem!important}.mt-n2,.my-n2{margin-top:-.5rem!important}.mr-n2,.mx-n2{margin-right:-.5rem!important}.mb-n2,.my-n2{margin-bottom:-.5rem!important}.ml-n2,.mx-n2{margin-left:-.5rem!important}.m-n3{margin:-1rem!important}.mt-n3,.my-n3{margin-top:-1rem!important}.mr-n3,.mx-n3{margin-right:-1rem!important}.mb-n3,.my-n3{margin-bottom:-1rem!important}.ml-n3,.mx-n3{margin-left:-1rem!important}.m-n4{margin:-1.5rem!important}.mt-n4,.my-n4{margin-top:-1.5rem!important}.mr-n4,.mx-n4{margin-right:-1.5rem!important}.mb-n4,.my-n4{margin-bottom:-1.5rem!important}.ml-n4,.mx-n4{margin-left:-1.5rem!important}.m-n5{margin:-3rem!important}.mt-n5,.my-n5{margin-top:-3rem!important}.mr-n5,.mx-n5{margin-right:-3rem!important}.mb-n5,.my-n5{margin-bottom:-3rem!important}.ml-n5,.mx-n5{margin-left:-3rem!important}

/* Custom styles */
html .badge.bg-warning {
    color: var(--bs-dark);
}

/* Chart */
.chart-container {
    position: relative;
    min-width: calc(100% + 2rem);
    max-width: calc(100% + 2rem);
    border-radius: .25rem;
    overflow: hidden;
    background: var(--bs-light);
    /* Dark mode compatibility */
    margin: 1rem -1rem;
    padding: 1rem;
}
.chart-container div {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light);
}

.outline-white {
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

@media (max-width:576px) {
    .chart-container {
        max-height: 45vh;
    }
}

/* Dark mode: */
/* Chart container */
html.dark .bg-white {
    background-color: var(--bs-body-bg-alt) !important;
}
html.dark .chart-container {
    background: #000;
}

html.dark .btn-outline-dark {
    color: var(--bs-gray-500);
}

html.dark .outline-white {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Dark mode switch */
#darkmode-controller {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: .75rem;
    border-radius: 99rem;
    z-index: 1079;
    --jf-dmc-icon-wh: 32px;
}
#darkmode-controller svg {
    width: var(--jf-dmc-icon-wh);
    height: var(--jf-dmc-icon-wh);
    transition: .25s;
}
#darkmode-controller:hover {
    padding: 1rem;
    --jf-dmc-icon-wh: 48px;
}

#darkmode-controller .show-on-dark,
#darkmode-controller .show-on-light {
    height: var(--jf-dmc-icon-wh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-items: center;
    transition: .25s;
}

html:not(.dark) #darkmode-controller {
    background: rgba(0,0,0,.5);
    color: var(--bs-light);
}
html:not(.dark) #darkmode-controller .show-on-dark {
    height: 0;
}
html.dark #darkmode-controller {
    background: rgba(255,255,255,.4);
    color: var(--bs-dark);
}
html.dark #darkmode-controller .show-on-light {
    height: 0;
}