:root {
    --roca-bg-color: rgb(29 32 33 / var(--tw-bg-opacity));
    --roca-bg-color-inverse: rgb(255 255 255 / var(--tw-bg-opacity));
    --roca-bg-color-light: rgb(92, 101, 104);
    --bs-secondary: rgb(92, 101, 104);
    --tw-bg-opacity: 1;
    --bs-text-primary: rgb(0 118 178 / var(--tw-bg-opacity)) !important;
    --bs-primary: rgb(0 118 178 / var(--tw-bg-opacity)) !important;
    --bs-primary-active: rgb(153 200 224 / var(--tw-bg-opacity));
}

.text-blue-arvato {
    color: var(--bs-text-primary) !important;
}
.text-hover-primary:hover {
    transition: color .2s ease;
    color: var(--bs-text-primary) !important;
}


body, html {
    font-family: OpenSans, sans-serif !important;
}

.btn.btn-brand {
    color: var(--roca-bg-color-inverse);
    border-color: var(--roca-bg-color);
    background-color: var(--roca-bg-color);
}

check:active + .btn.btn-brand,
.btn-check:checked + .btn.btn-brand,
.btn.btn-brand.active,
.btn.btn-brand.show,
.btn.btn-brand:active:not(.btn-active),
.btn.btn-brand:focus:not(.btn-active),
.btn.btn-brand:hover:not(.btn-active),
.show > .btn.btn-brand {
    color: var(--roca-bg-color-inverse);
    border-color: var(--roca-bg-color-light);
    background-color: var(--roca-bg-color-light) !important;
}

.app-sidebar {
    transition: width .3s ease;
    background-color: #fff !important;
}

.app-sidebar-menu .menu > .menu-item > .menu-link .menu-icon .svg-icon, .app-sidebar-menu .menu > .menu-item > .menu-link .menu-icon i {
    color: var(--roca-bg-color) !important;
}

.app-sidebar-menu .menu > .menu-item.here > .menu-link .menu-icon .svg-icon, .app-sidebar-menu .menu > .menu-item.here > .menu-link .menu-icon i {
    color: #fff !important;
}

.app-sidebar-menu .menu > .menu-item.here > .menu-link .menu-icon {
    background: linear-gradient(135deg, var(--roca-bg-color) 0, var(--roca-bg-color-light) 100%);
}

.card .card-header .card-title, .card .card-header .card-title .card-label {
    font-size: 1.175rem;
}

#chartdiv {
    width: 100%;
    height: 500px;
}

#chartdivradar {
    width: 100%;
    height: 500px;
    font-size: 8pt
}

#chartdivstacked {
    width: 100%;
    height: 500px;
}

#chartdivmolona {
    width: 100%;
    height: 500px;
}

.h-75px {
    height: 75px;
}