/* version:1.36 */

[data-bs-zoom="large"] {
    /*zoom: 110%;*/
    /*--bs-body-font-size: 20px;*/
    font-size: 125%;*/
}

[data-bs-zoom="small"] {
    /*zoom: 87.5%;*/
    /*--bs-body-font-size: 10px;*/
    font-size: 87.5%;
}

:root {
    --size-unit: 8rem;
    --gap-unit: 0.25rem;
    --header-size: 3.2rem;
    --content-height: calc(100dvh - var(--header-size));
    --sidebar-size: calc(var(--size-unit) * 2);
 
    --mw-caret-down-fill-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');    
    --mw-caret-left-fill-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left-fill" viewBox="0 0 16 16"><path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg>');

    --mw-chevron-up-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/></svg>');
    --mw-chevron-left-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/></svg>');
    --mw-chevron-down-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
    --mw-chevron-right-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>');

    --mw-list-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/></svg>');
    --mw-three-dots-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16"><path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/></svg>');
    --mw-three-dots-vertical-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16"><path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/></svg>');
    --mw-card-list-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-list" viewBox="0 0 16 16"><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z"/><path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8m0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/></svg>');    
    --mw-moon-stars-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-stars" viewBox="0 0 16 16"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/></svg>');

    /* https://uxwing.com/font-size-decrease-icon/ */

    --mw-font-large-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 423.65"><path fill-rule="nonzero" d="M274.89 336.65H121.85l-29.09 87H0L157.6 0h80.94l158.6 423.65h-92.86l-29.39-87zm181.37-226.22v55.74h-54.69v-55.74h-55.75V55.74h55.75V0h54.69v55.74H512v54.69h-55.74zM145.39 265.74h105.96l-53.23-158.69-52.73 158.69z"/></svg>');
    --mw-font-normal-bg: url('data:image/svg+xml,<svg width="512" height="423.65" xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" fill-rule="evenodd" image-rendering="optimizeQuality" text-rendering="geometricPrecision" shape-rendering="geometricPrecision"><g><title>Layer 1</title><path id="svg_1" d="m329.89,336.65l-153.04,0l-29.09,87l-92.76,0l157.6,-423.65l80.94,0l158.6,423.65l-92.86,0l-29.39,-87zm-129.5,-70.91l105.96,0l-53.23,-158.69l-52.73,158.69z" fill-rule="nonzero"/></g></svg>');
    --mw-font-small-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 423.65"><path fill-rule="nonzero" d="M274.89 336.65H121.85l-29.09 87H0L157.6 0h80.94l158.6 423.65h-92.86l-29.39-87zm70.93-226.22V55.74H512v54.69H345.82zM145.39 265.74h105.96l-53.23-158.69-52.73 158.69z"/></svg>');
}

/** Max Width */

.max-w-xs {
    max-width: calc(--size-unit);
}

.max-w-sm {
    max-width: calc(var(--size-unit) * 2);
}

.max-w-md {
    max-width: calc(var(--size-unit) * 3);
}

.max-w-lg {
    max-width: calc(var(--size-unit) * 4.5);
}

.max-w-xl {
    max-width: calc(var(--size-unit) * 6);
}

.max-w-xxl {
    max-width: calc(var(--size-unit) * 8);
}

/** Gaps                                     */

.m-childs-1 > * {
    margin: var(--gap-unit);
}

.m-childs-2 > * {
    margin: calc(var(--gap-unit) * 2);
}

.m-childs-3 > * {
    margin: calc(var(--gap-unit) * 3);
}

.m-childs-4 > * {
    margin: calc(var(--gap-unit) * 4);
}

.m-childs-5 > * {
    margin: calc(var(--gap-unit) * 5);
}

/********************************************/

svg {
    fill: currentColor;
}

.icon-animate {
    transition: .3s transform ease-in-out;
  }

.icon-animate.collapsed {
    transform: rotate(180deg);
}  

/* Bootstrap Icon */
/* I copied here to reduce size */
/* https://www.svgbackgrounds.com/tools/svg-to-css/ */

.icon{    
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: contain;
    display: inline-block;         
    vertical-align: middle;
    width: 1.2em;
    height: 1.2em; 
}

.icon.mw-caret-down-fill{    
    background-image: var(--mw-caret-down-fill-bg);
}   

.icon.mw-caret-left-fill{    
    background-image: var(--mw-caret-left-fill-bg);
}  

.icon.mw-chevron-up{
    background-image: var(--mw-chevron-up-bg);
} 

.icon.mw-chevron-left{    
    background-image: var(--mw-chevron-left-bg);
} 

.icon.mw-chevron-right{
    background-image: var(--mw-chevron-right-bg);
} 

.icon.mw-chevron-down{    
    background-image: var(--mw-chevron-down-bg);
} 

.icon.mw-list{
    background-image: var(--mw-list-bg);
}

.icon.mw-three-dots{
    background-image: var(--mw-three-dots-bg);
}

.icon.mw-three-dots-vertical{
    background-image: var(--mw-three-dots-vertical-bg);
}

.icon.mw-moon-stars{
    background-image: var(--mw-moon-stars-bg);
}

.icon.mw-font-large{
    background-image: var(--mw-font-large-bg);
}

.icon.mw-font-normal{
    background-image: var(--mw-font-normal-bg);
}

.icon.mw-font-small{
    background-image: var(--mw-font-small-bg);
}

.invert {     
    filter: invert(1); /* this is really stupid idea */
}

[data-bs-theme=dark] .icon { 
    filter: invert(1); 
}

/** Shadow */

.shadow-thick
{
    box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.5);
}

.shadow-thin
{
    box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.3);
}

/** Contents                            */

@media(max-width: 768px) {
    .sidebar {
/*            	    visibility: collapse; */ /* dosnt work in iphone 6*/
        visibility: hidden;
        position: fixed;
    }
}

body{    
    height: 100svh !important;
}

aside{
    z-index: 1005;
}

.header {
    min-height: var(--header-size);
}

.fixed {
    position: fixed !important; /* option to stick it without scroll */
}

/** for header **/

.content-top {
    top: var(--header-size) !important; 
}

.max-content-height {
    max-height: var(--content-height)  !important; 
}

.min-content-height {
    min-height: var(--content-height)  !important;  
}

/** main  **/

.main {
    overflow-y: auto; 
    height: 100vh;    
    max-height: 100vh;    
}

.container {
}

.content {
    
}

.sidebar {
    float: left;
    top: 0;
    bottom: 0;
    opacity: 100%;
    padding: 0;
    width: var(--sidebar-size);            
    background-color: var(--bs-secondary-bg);
    /*background-color: color-mix(in srgb, var(--bs-body-bg), black 5%);*/
}

.sidebar-content {
    display: flex;
    width: var(--sidebar-size) !important;
    height: 100%;
}

.sidebar-body {
    overflow-y: hidden;
    scrollbar-width: thin;    
    scrollbar-gutter: 10;
    width: var(--sidebar-size) !important;
    padding: 0.25rem;
    background-color: var(--bs-secondary-bg);
}

/*
.sidebar-body:dir(ltr) {   
}

.sidebar-body:dir(rtl) {   
}
*/

.sidebar-body:hover {   
    overflow: overlay !important;
}

.offcanvas.show, .offcanvas.showing {
    top: var(--header-size);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);
    border: 0;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.card-header {    
    background-color: var(--bs-primary-bg-subtle);
}

.accordion-button {
    /*border-width: 0.1rem;*/
    background-color: var(--bs-accordion-active-bg);
}