/*  START Left Navbar  */

.blazor-loader {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.blazor-loader > object {
    width: 100%;
    max-width: 750px;
}

.blazor-loader > .sk-circle-initial {
    margin: 0;
    margin-top: 75px;
}

.main-body {
    display: flex;
    min-height: 106vh;
    height: auto;
    flex-direction: row;
    font-family: Roboto, Helvetica, Arial, "sans-serif";
    background-color: #F7F7F7;
}

.dark, .inverted {
    --mud-palette-gray-darker: #616161
}

.nav {
    margin-top: 40px;
}

.left-nav {
    color: #f2f5f7;
    font-size: 13px;
    min-width: 230px;
}

body.nav-md .left-nav {
    min-width: 70px;
}

/* fix summernote footer buttons */
body .note-modal-footer {
    margin: 10px;
}

/* Todo remove !important after remove old template  */

.left-nav-item {
    display: flex !important;
    position: relative !important;
    padding: 13px 15px 13px 15px !important;
    cursor: pointer !important;
}

body.nav-md .left-nav-item {
    flex-direction: column;
    justify-content: center;
    flex-grow: 0;
    text-align: center;
    padding: 10px 5px !important;
}


.font-20 {
    font-size: 20px;
}

.left-nav-item-label {
    margin-top: auto;
    padding-left: 8px;
    flex-grow: 1;
}

body.nav-md .left-nav-item-label {
    font-size: 10px;
    padding-left: 0;
}


.left-nav-sub {
    position: relative;
    display: flex;
}

.left-nav-sub-item {
    padding-left: 36px;
    width: 100%;
    height: 100%;
}

.child_menu {
    list-style: none;
    padding-inline-start: 0;
}

body.nav-md .child_menu {
    background: #3e5367;
    display: none;
    left: calc(100% + 4px);
    position: absolute;
    top: 0;
    width: 210px;
    z-index: 4000;
}

body.nav-md .nav > li {
    position: relative;
}

.left-nav-sub-item-label {
    display: inline-block;
    padding: 9px;
}

body.nav-md .small-hidden {
    display: none;
}

.left-nav-sub-item::before {
    background: rgba(255, 255, 255, .75);
    border-radius: 50%;
    bottom: auto;
    content: "";
    height: 8px;
    left: 23px;
    margin-top: 15px;
    position: absolute;
    right: auto;
    width: 8px;
    z-index: 1;
}

body.nav-md .left-nav-sub-item::before {
    display: none;
}

body.nav-md .left-nav-sub-item::after {
    display: none;
}

.left-nav-sub-item::after {
    border-left: 1px solid rgba(255, 255, 255, .2);
    bottom: 0;
    content: "";
    left: 27px;
    position: absolute;
    top: 0;
}

.body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.top-nav {
    background-color: rgb(237, 237, 237);
    border-bottom: 1px solid #d9dee4;
    font-size: 13px;
    list-style: none;
    margin: 0;
}

.top-nav-profile {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
    padding-bottom: 8px;
}

.nav-title {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 59px;
    color: #ecf0f1;
    padding: 0 8px 0 8px;
}

.inverted .nav-title {
    color: var(--mud-palette-dark) !important;
}

.dark .nav-title {
    color: var(--mud-palette-text-primary) !important;
}

.side-menu {
    --mud-palette-text-primary: #ecf0f1;
}

.side-menu > li.active {
    border-right: 5px solid rgb(26, 187, 156);
}

.child_menu {
    display: none;
}

.current-page {
    background: rgba(255, 255, 255, .05);
}

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #d9534f;
    border-radius: 10px;
}

.left-nav-sub:hover {
    background: rgba(255, 255, 255, .05);
}

/* END Left navbar  */

/* START Top navbar  */

.nav-menu {
    width: 100%;
}

.top-nav {
    display: flex;
    padding: 10px;
}

.browser-message {
    display: none;
}

.messages-indicator {
    float: right;
    width: 40px;
    margin-top: 20px;
    cursor: pointer;
}

.messages-indicator .badge {
    background-color: #d9534f;
    position: absolute;
    left: 16px;
    top: -6px;
}


.top-nav-items {
    display: flex;
    justify-content: space-between;
}

.user-profile {
    cursor: pointer;
}

.user-profile img {
    border-radius: 50%;
    height: 24px;
    margin-right: 10px;
    width: 24px;
}

.message-dropdown-highlight {
    background-color: rgb(234, 232, 232);
    display: flex;
    gap: 4px;
}

.justify-center {
    justify-content: center;
}

.message-dropdown-item {
    padding: 8px;
}

.message-dropdown-message-item {
    display: flex;
    flex-direction: column;
}


html {
    font-size: inherit !important;
}

.dropdown-usermenu {
    position: absolute;
    left: auto;
    right: 0;
    margin-top: 0;
    width: 220px;
    background: #fff;
    border: 1px solid #d9dee4;
    display: flex;
    flex-direction: column;
    list-style: none;
    padding-inline-start: 0;
}


.profile-dropdown-usermenu li a {
    padding: 12px 20px;
    cursor: pointer;
    display: flex;
    width: 100%;
}

profile-dropdown-usermenu li a {
    width: 100%;
    height: 100%;
}

.profile-dropdown-usermenu li:hover {
    background-color: rgb(234, 232, 232)
}

.content-body {
    padding: 0px 20px 0px;
    height: 100%;
}

.login-container {
    display: flex;
    justify-content: center;
}

.login-buildstats {
    display: flex;
    justify-content: flex-end;
}

.footer {
    display: flex;
    justify-content: start;
    color: rgb(115, 135, 156);
    background-color: rgb(237, 237, 237);
    min-height: 5vh;
}

.footer-body {
    border-top: 1px solid #d9dee4;
    padding: 20px;
    text-align: center;
    width: 100%;
}

/* Utils  */

.mt-20 {
    margin-top: 20px;
}

.mt-300 {
    margin-top: 300px;
}

.mr-12 {
    margin-right: 12px;
}

.pointer {
    cursor: pointer;
}

.gap-12 {
    gap: 12px;
}

.gap-24 {
    gap: 24px;
}

.font-red {
    color: red;
}

.font-green {
    color: green;
}

.scrollable-monitors {
    height: 60vh;
    overflow-y: scroll !important;
}

.custom-workflows-label .mud-input-label {
    margin-top: -10px !important;
}

.linked-controls .mud-expand-panel-header {
    padding: 0px;
}

.textfield-align .mud-input-control {
    padding-top: 16px;
}

.icon-align .mud-list-item-icon {
    margin-bottom: auto;
}

.summernote-height .note-editable {
    height: 60vh !important;
}

.summernote-height-full .note-editable {
    height: 100vh !important;
}

.compare-height-full {
    height: 100vh !important;
}

.summernote-hide-toolbar .note-toolbar {
    display: none !important;
}

.minimum-width > .mud-input-control-input-container {
    min-width: 200px !important;
}

.note-editable ul {
    list-style: disc !important;
    list-style-position: inside !important;
}

.note-editable ol {
    list-style: decimal !important;
    list-style-position: inside !important;
}

.ml-1 {
    margin-left: 1px;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.p-10 {
    padding: 10px;
}

.h-full {
    height: 100%;
}

.flex {
    display: flex;
}

.dashboard-date {
    float: right;
    padding-top: 10px;
    margin-right: 10px;
}

.hidden {
    display: none !important;
}


.relative {
    position: relative;
}

.open > .hidden {
    display: block !important;
    z-index: 100;
}

.self-end {
    align-self: flex-end;
}

.self-start {
    align-self: flex-start;
}

.text-left {
    text-align: left;
}

.w-16 {
    width: 16px;
}

.p-0 {
    padding: 0;
}

.w-36 {
    width: 36px;
}

.content-width {
    width: 1%;
    white-space: nowrap;
}

.no-border td {
    border: none !important;
}

.w-100 {
    width: auto;
}

.w-400 {
    width: 400px;
}

.minw-400 {
    min-width: 400px;
}

.auditplan-period,
.workflow-instance {
    max-height: calc(100vh - 64px);
    min-height: calc(100vh - 64px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.auditplan-period-scroll,
.workflow-scroll {
    flex-grow: 1;
}

.workflow-tabs {
    width: 100%;
    z-index: 1;
}

.tag-tooltip .mud-tooltip-root {
    width: 100% !important
}

.tooltip-position-right .mud-tooltip-root {
    float: right;
}

.small-show {
    display: none;
}

.gap-20 {
    gap: 20px;
}

.w-full {
    width: 100%;
}

.mb-70 {
    margin-bottom: 70px;
}

.minw-150 {
    min-width: 150px;
}

body.nav-md .small-show {
    display: block;
}

/* Todo */

/* Mud Blazor utils remove when over  */

.mud-icon-size-xxsmall {
    font-size: 12px;
}

.mud-icon-size-xsmall {
    font-size: 1rem;
}

.mud-icon-size-small {
    font-size: 1.25rem;
}

.mud-icon-size-medium {
    font-size: 1.5rem;
}

.mud-icon-size-large {
    font-size: 36px;
}

.note-modal {
    z-index: 1000000;
    top: 25%;
}

.sk-circle-initial {
    margin: 40px auto;
    width: 40px;
    height: 40px;
    position: relative;
}

.sk-circle-initial .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sk-circle-initial .sk-child:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.dark .sk-circle-initial .sk-child:before {
    background-color: #E0E0E0;
}

.sk-circle-initial .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.sk-circle-initial .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.sk-circle-initial .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sk-circle-initial .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

.sk-circle-initial .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}

.sk-circle-initial .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.sk-circle-initial .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}

.sk-circle-initial .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}

.sk-circle-initial .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.sk-circle-initial .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}

.sk-circle-initial .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

.sk-circle-initial .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.sk-circle-initial .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.sk-circle-initial .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.sk-circle-initial .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.sk-circle-initial .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.sk-circle-initial .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.sk-circle-initial .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.sk-circle-initial .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.sk-circle-initial .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.sk-circle-initial .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.sk-circle-initial .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.auditplan-period-spinner,
.workflow-spinner {
    margin-top: 35vh;
}

.mud-card > .mud-card-content.format-lists ul {
    display: block !important;
    list-style-type: disc !important;
    margin-block-start: 1em !important;
    margin-block-end: 1em !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
    padding-inline-start: 40px !important;
}

.mud-card > .mud-card-content.format-lists .toc ul {
    padding-inline-start: 0 !important;
    margin-block-end: 3em !important;
}

.user-role-list > .mud-table-container {
    max-height: 70vh;
    overflow-y: auto;
}

.mt-10 {
    margin-top: 10px;
}

.w-500 {
    width: 500px;
}

.w-790 {
    width: 790px;
}

.w-800 {
    width: 800px;
}

.w-350 {
    width: 350px;
}

.modal {
    left: 30% !important;
    right: 35% !important;
    width: max-content;
    min-width: 40%;
}

.modal-dialog {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
    box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
    outline: 0;
    margin: 8px;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.modal-title {
    margin: 0;
    line-height: 1.42857143
}

.modal-body {
    position: relative;
    padding: 15px;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

.files-list {
    list-style: disc;
    list-style-position: inside;
    text-decoration: underline;
    cursor: pointer;
}

.note-editor > .tooltip {
    display: none !important;
}

.note-btn {
    position: relative;
}

.note-toolbar > .note-font > .note-btn:hover::after {
    position: absolute;
    content: attr(data-original-title);
    left: 50%;
    transform: translateX(-50%);
    top: -30px;
    text-align: center;
    background-color: white;
    border: .2px solid black;
    border-radius: 5px;
    z-index: 5;
    padding: 4px 8px;
}

.delegate-list {
    max-height: 80vh;
    overflow-y: auto;
}

.connection-monitoring-alert {
    margin-bottom: 2px;
}

.connection-monitoring-alert-text {
    color: var(--mud-palette-text-primary)
}

.mail-icon {
    color: #23527c;
}

.management-dashboard-scrolling {
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}

.toc {
    display: block;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    width: 100%;
    font-size: 16px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 24px;
}

.toc a {
    color: inherit;
    font-weight: 400;
    display: block;
    width: 100%;
    padding: 4px 0;
}

.toc ul {
    padding-inline-start: 0 !important;
}

.toc li {
    padding: 0 34px;
    list-style-type: none;
    font-weight: 500;
}

.toc li span {
    display: flex;
    line-height: 24px;
}

.toc li li {
    transition: 0.3s;
}

.toc li li:hover {
    background-color: #e8e8e8;
}

.dark .toc li li:hover {
    background-color: var(--mud-palette-gray-darker);
}

.toc svg {
    font-size: 24px;
    height: 24px;
    width: 24px;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-right: 9px;
}

.dark .toc svg {
    color: #E0E0E0;
    fill: #E0E0E0;
}

.mud-badge-default {
    background-color: var(--mud-palette-action-default);
    color: white;
}

.badge-20 {
    background: transparent !important;
}

.badge-20 > svg {
    height: 20px;
    width: 20px;
}

.pa-4 {
    padding: 16px;
}

.pa-4.red.dark {
    background-color: #66131d;
}

.underline {
    text-decoration: underline;
}

.query > .ace_editor {
    width: 100%;
    height: 60vh;
}

.background-success-light {
    background-color: #DFF0D8;
}

.background-failed-light {
    background-color: #F2DEDE;
}

.background-success-dark {
    background-color: #013818
}

.background-failed-dark {
    background-color: #66131d;
}

.background-table-no-data-light {
    background-color: #eeeeee;
}

.background-table-no-data-dark {
    background-color: #656565;
}


.w-50p {
    width: 50%;
}

.w-5p {
    width: 5%;
}

.w-10p {
    width: 10%;
}

.w-25p {
    width: 25%;
}

.clickable-row table tbody tr {
    cursor: pointer;
}

.spinner-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
}

.mud-nav-link.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.mud-nav-link > svg {
    color: white !important;
    fill: white !important;
}

.inverted .mud-nav-link.active {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--mud-palette-dark) !important;
}

.inverted .mud-nav-link > svg {
    color: var(--mud-palette-dark) !important;
    fill: var(--mud-palette-dark) !important;
}

.inverted .mud-nav-link {
    color: var(--mud-palette-dark) !important;
}

.dark .mud-nav-link > svg {
    color: var(--mud-palette-primary) !important;
    fill: var(--mud-palette-primary) !important;
}

.message-menu-list > .mud-list {
    padding-bottom: 0 !important;
}

.message-menu-list > .mud-list > .mud-list-item:last-child {
    padding: 0 !important;
}

.message-menu-list > .mud-list > .mud-list-item:first-child {
    padding: 0 !important;
}


.message-menu-list > .mud-list > .mud-list-item:last-child > .mud-list-item-text {
    margin: 0 !important;
}

.message-menu-list > .mud-list > .mud-list-item:last-child > .mud-list-item-text > p > h6 {
    padding-top: 4px;
    padding-bottom: 4px;
}

.mud-drawer-content > .mud-navmenu > .mud-nav-group, .mud-drawer-content > .mud-navmenu > .mud-nav-item {
    margin-bottom: 10px;
}

.footer-content {
    height: 20px;
}

.main-content {
    min-height: calc(100vh - 84px);
}

.login-background {
    background-image: url('/images/login-background.jpg');
    background-color: #ededed;
    background-size: cover;
    background-repeat: no-repeat;
}

.logtext a, .category-description a, .info-text a {
    text-decoration: underline;
    color: blue;
}

.note-toolbar > .note-font > .note-btn:hover::after {
    display: none;
}

.note-editor.note-frame.fullscreen {
    background-color: white;
    z-index: 2000;
}

/*Custom Dark Mode Mudblazor*/
.dark .mud-badge {
    background-color: var(--mud-palette-gray-darker);
}

/*Dark Mode Summernote*/
.dark .note-toolbar .note-btn, .dark .note-toolbar .note-btn:focus {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: #8080801d;
}

.dark .note-toolbar {
    background-color: #8080801d;
    color: #ffffffb2;
    border-color: #8080801d;
}

.dark .note-editor .note-dropdown-item:hover {
    background-color: var(--mud-palette-gray-darker);
}

.dark .note-color-reset:hover,
.dark .note-color-select:hover {
    color: #27272fff;
}

.dark .note-editor .note-dropdown-menu,
.dark .note-editor .note-dropdown-item {
    background-color: #32333dff;
    color: #ffffffb2;
}

.dark .note-editor.note-frame.fullscreen {
    background-color: var(--mud-palette-surface);
    z-index: 2000;
}

.dark .note-editor.note-frame {
    color: var(--mud-palette-text-primary);
}

/* Dark Mode C3 Charts*/
.dark .c3-axis text {
    font: roboto;
}

.dark .c3-axis {
    fill: #BDBDBD;
    stroke-width: 2px;
}

.dark .c3-axis path,
.dark .c3-axis line {
    stroke: #BDBDBD;
    stroke-width: 2px;
}

.dark .c3-legend-item {
    fill: #BDBDBD;
}

.dark .c3-tooltip .name,
.dark .c3-tooltip .value {
    background-color: #757575;
    color: #E0E0E0;
}

.dark .c3-line {
    stroke-width: 2px;
}

.dark .c3-chart-arc path {
    stroke-width: 0;
}

.message-unread {
    border-left: 2px solid var(--mud-palette-primary) !important;
    border-top: 1px solid transparent;
    font-weight: bold !important;
}

.message-unread .mud-typography-caption {
    font-weight: bold !important;
}

.message-read {
    padding-left: 21px;
}

.custom-summernote-button {
    max-height: 32.17px;
    max-width: 35.33px;
}

.full-size {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.dark .link-component a {
    color: var(--mud-palette-primary) !important;
}

.workflow-status {
    max-width: 774px;
    margin-left: auto;
    margin-right: auto;
}

.workflow-status .light-box {
    background-color: #f4f4f4 !important;
    width: 120px;
    min-width: 120px;
    height: 100px;
}

.workflow-status .light-box .box-content, .workflow-status .dark-box .box-content {
    text-align: center;
}

.dark .workflow-status .light-box {
    background-color: #4b4b53 !important;
}

.workflow-status .dark-box {
    background-color: #b7b7b7 !important;
    width: 200px;
    min-width: 200px;
    height: 120px;
    text-align: center;
}

.dark .workflow-status .dark-box {
    background-color: #2c2c33 !important;
}

.workflow-status .arrow-filled {
    fill: #dbdbdb !important;
    min-width: 78px;
}

.dark .workflow-status .arrow-filled {
    fill: #313139 !important;
}

.workflow-status-wrapper {
    margin-top: -16px;
}

.workflow-status-wrapper > * {
    margin-top: 16px;
}

.open-workflow {
    background-color: #f4f4f4 !important;
}

.dark .open-workflow {
    background-color: #313139 !important;
}

.workflow-block:hover {
    text-decoration: none !important;
}

.no-hover button:hover {
    background-color: inherit !important;
    color: inherit !important;
}
.workflow-block:hover .open-workflow {
    background-color: #dbdbdb !important;
}

.dark .workflow-block:hover .open-workflow {
    background-color: #2c2c33 !important;
}

.chartinfo-placement {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 100;
}

.apexcharts-rangebar-area, .apexcharts-bar-area {
    cursor: pointer;
}


.ace_cmp_variable {
    color: red;
}

.no-border-bottom tr > th,
.no-border-bottom tr > td {
    border-bottom: none !important;
}

.category-properties {
    width: 20%;
    padding-top: 0 !important
}

/* fix font-size for all labels, so they are equal to body2 */
.mud-switch-label-medium > p,
.mud-input-control.mud-select .mud-input-label,
.mud-input-control.mud-input-text-with-label .mud-input-label,
.mud-input-control.mud-input-text-with-label .mud-input,
.mud-input-control .mud-input-root {
    font-size: .875rem !important;
}

/* specific fonts outside the standardized fonts */

/* errorpage - errorcode */
.font_errorpage {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.167;
    letter-spacing: -.01562em;    
}

/* dashboard greeting */
.font_dashboard_greeting {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.167;
    letter-spacing: 0;
}

/* dashboard workflows overview text */
.font_dashboard_workflows_overview {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .0075em;
}

/* dashboard percentage */
/* dashboard workflows overview number */
.font_dashboard_percentage, 
.font_dashboard_workflows_overview_open_number {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 2.125rem;
    font-weight: 400;
    line-height: 1.235;
    letter-spacing: .000735em;
}

/* dashboard overview open */
/* management dashboard numbers */
/* session time out - timeleft */
.font_dashboard_workflows_overview_open,
.font_management_dashboard_numbers,
.font_session_timeout_timeleft {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.334;
    letter-spacing: 0;
}

.font_label_small {
    transform: translate(0, 1.5px) scale(0.75) !important; 
    transform-origin: top left !important;
    margin-bottom: -10px !important;
}