/*
    This file is to show how CSS and other static resources (such as images) can be
    used from a library project/package.
*/

/* OVERHIDES ================================================================================ */
html {
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 14px;
    letter-spacing : normal !important;
}

* {
    letter-spacing: normal !important;
}

body {
    font-family: "Roboto", sans-serif;
    /*background: #FFF;*/
}

body {
    --mud-palette-background: #f8f8f8;
    --mud-palette-background-grey: #f1f1f1;
    --mud-palette-surface: #fff;
    --mud-palette-on-surface: #678; /*666*/
    --mud-palette-appbar: #546E7A;
    --mud-palette-on-appbar: #d4d4d4;
    --mud-palette-drawer: #fff;
    --mud-palette-on-drawer: #444;
    --mud-palette-text-default: #6a6a6a;
    --mud-palette-default: rgba(0,0,0, 0.54);
    --mud-palette-on-default: rgba(0,0,0, 0.87);
    --mud-palette-default-lighten: rgba(0,0,0, 0.1);
    --mud-palette-default-darken: rgba(0,0,0, 0.2);
    --mud-palette-default-hover: rgba(0,0,0, 0.04);
    --mud-palette-primary: rgb(74 146 226);
    --mud-palette-on-primary: #fff;
    --mud-palette-primary-lighten: rgb(99 139 251);
    --mud-palette-primary-darken: rgb(49 103 201);
    --mud-palette-primary-hover: rgba(89,74,226, 0.06);
    --mud-palette-secondary: rgb(230 133 193);
    --mud-palette-on-secondary: #fff;
    --mud-palette-secondary-lighten: rgb(24,94,163);
    --mud-palette-secondary-darken: rgb(230,44,113);
    --mud-palette-secondary-hover: rgba(255,69,138, 0.06);
    --mud-palette-info: #2196f3;
    --mud-palette-on-info: #fff;
    --mud-palette-success: #4caf50;
    --mud-palette-on-success: #fff;
    --mud-palette-warning: #ff9800;
    --mud-palette-on-warning: #fff;
    --mud-palette-danger: #f44336;
    --mud-palette-on-danger: #fff;
    --mud-palette-dark: #272c34;
    --mud-palette-on-dark: #fff;
    --mud-palette-on-alert: #fff;
    --mud-palette-border-color-default: #e0e0e0;
    --mud-palette-border-color-outlines: #DDD;
    --mud-palette-border-color-inputs: #878787;
    --mud-palette-border-radius-default: 5px;
}



/*.mud-input > input.mud-input-root-outlined {
    padding: .8rem .8rem;
}*/

.mud-badge .mud-badge-wrapper .mud-badge-badge.mud-badge-right.mud-badge-overlap {
    left: calc(100% - 16px);
}

.mud-badge .mud-badge-wrapper .mud-badge-badge.mud-badge-top.mud-badge-overlap {
    bottom: calc(100% - 14px);
}

.mud-input.mud-input-outlined {
    position: relative;
    border-radius: .7rem;
    border-color: #ebebeb;
    border-style: solid;
    border-width: 2px;
}

/* Expand */
.mud-expand-panel .mud-expand-panel-header {
    padding: 2px 2px;
}

    .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text {
        margin: -1.5rem 0rem;
    }

.mud-expand-panel {
    background-color: transparent;
}

/* Treenode */
.mud-treenode-panel {
    flex: 1 0 100%;
    max-width: 100%;
    position: relative;
    transition: margin .3s cubic-bezier(.25,.8,.5,1);
    transition-delay: 100ms;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
}

    .mud-treenode-panel .mud-treenode-panel-header {
        padding: 0px;
        min-height: 0px;
        margin-bottom: -8px;
    }

    .mud-treenode-panel .mud-treenode-panel-header .mud-treenode-panel-text {
        margin: 0rem 0rem;
    }

.mud-treenode-panel {
    background-color: transparent;
}

.nova-mud-treenode-panel-content {
    padding: 0rem 0rem .0rem 1.8rem;
    flex: 1 1 auto;
    max-width: 100%;
}


.mud-icon-button {
    padding: 0.125rem;
}

.mud-elevation-1 {
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.05), 0 1px 1px 0 rgba(0,0,0,0), 0 1px 3px 0 rgba(0,0,0,.12);
}

.mud-elevation-2 {
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,0), 0 1px 5px 0 rgba(0,0,0,.12);
}

.mud-elevation-3 {
    box-shadow: 0 3px 3px -2px rgba(0,0,0,.05), 0 3px 4px 0 rgba(0,0,0,0), 0 1px 8px 0 rgba(0,0,0,.12);
}

.mud-elevation-4 {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.05), 0 4px 5px 0 rgba(0,0,0,0), 0 1px 10px 0 rgba(0,0,0,.12);
}

.mud-elevation-5 {
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.05), 0 5px 8px 0 rgba(0,0,0,0), 0 1px 14px 0 rgba(0,0,0,.12);
}

.mud-elevation-6 {
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.05), 0 6px 10px 0 rgba(0,0,0,0), 0 1px 18px 0 rgba(0,0,0,.12);
}

.mud-elevation-7 {
    box-shadow: 0 4px 5px -2px rgba(0,0,0,.05), 0 7px 10px 1px rgba(0,0,0,0), 0 2px 16px 1px rgba(0,0,0,.12);
}

.mud-elevation-8 {
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.05), 0 8px 10px 1px rgba(0,0,0,0), 0 3px 14px 2px rgba(0,0,0,.12);
}

.mud-elevation-9 {
    box-shadow: 0 5px 6px -3px rgba(0,0,0,.05), 0 9px 12px 1px rgba(0,0,0,0), 0 3px 16px 2px rgba(0,0,0,.12);
}

.mud-elevation-10 {
    box-shadow: 0 6px 6px -3px rgba(0,0,0,.05), 0 10px 14px 1px rgba(0,0,0,0), 0 4px 18px 3px rgba(0,0,0,.12);
}

.mud-elevation-11 {
    box-shadow: 0 6px 7px -4px rgba(0,0,0,.05), 0 11px 15px 1px rgba(0,0,0,0), 0 4px 20px 3px rgba(0,0,0,.12);
}

.nova-mud-paper-transparent {
    background:transparent;
}

.nova-mud-paper-solid {
    box-shadow: 0 6px 7px -4px rgba(0,0,0,.0), 0 11px 15px 1px rgba(0,0,0,0), 0 4px 20px 3px rgba(0,32,64,.08);
}

.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    /*padding: 12.5px 14px;*/
}

.mud-input {
    font-size:.9rem;
}

    .mud-input.mud-input-outlined {
        position: relative;
        border-radius: .7rem;
        border-color: #ffffff;
        border-style: solid;
        border-width: 2px;
    }

.mud-tab {
    min-height:32px;
}

.mud-tabs-toolbar .mud-tabs-toolbar-inner {
    display: flex;
    min-height: 32px;
}

.mud-tab-badge {
    margin-left: 8px;
    margin-inline-start: 8px;
    margin-inline-end: unset;
    margin-top: 11px;
}

/* NOVA ================================================================================ */
.nova-error {
    color: red !important;
    border-color: red !important;
    text-color: red !important;
}

/* BARBER ================================================================================ */
.busy-overlay {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255, 0.5);
    z-index: 1001;
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;
}

@keyframes fadein {
    0% {
        opacity: 0.01;
    }

    50% {
        opacity: 0.01;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0.01;
    }

    50% {
        opacity: 0.01;
    }

    100% {
        opacity: 1;
    }
}


.centered-outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.centered-middle {
    display: table-cell;
    vertical-align: middle;
}

.centered-inner {
    margin-left: auto;
    margin-right: auto;
    width: 0%;
}

.mud-button {
    text-transform: initial;
}

.mud-button-filled {
    box-shadow: none;
}

del {
    background: rgba(255,0,0, 0.4);
}

mod {
    background: rgba(255,0,255, 0.4);
}

ins {
    background: rgba(0,255,0, 0.4);
}

.mud-dialog-title {
    background: #EEE;
    padding: 8px 12px;
}
/* APP-BAR ================================================================================ */
.nova-appbar {
    display: flex;
    position: relative;
    align-items: center;
    /**/
    padding: .5rem;
    margin: 0px;
}

/* APP-BAR DROPDOWN ================================================================================ */
.nova-dropdown-content-right {
    position: absolute;
    right: 0px;
    z-index: 120;
    min-width: 40px;
    min-height: 40px;
    max-height: 800px;
    margin-top: .5rem;
    cursor: pointer;
}

.nova-dropdown-content-left {
    position: absolute;
    left: 0px;
    z-index: 120;
    min-width: 40px;
    min-height: 40px;
    max-height: 800px;
    margin-top: .5rem;
    cursor: pointer;
}

.clickable-chip {
    display:inline-block;
}

.nova-large-counter {
    display: inline-block;
    position: inherit;
    text-align: center;
    /*padding: 1rem;*/
    color: var(--mud-theme-on-surface);
    width: 100%;
}

.nova-large-counter-line {
    display: inline-block;
    position: inherit;
    width: 100%;
}

.nova-large-counter-first-counter {
    display: inline-block;
    position: inherit;
    font-size: 1.8rem;
    font-weight: 200;
    margin: .0rem .2rem;
}

.nova-large-counter-first-counter-unit {
    display: inline-block;
    position: inherit;
    font-size: 1.5rem;
    font-weight: 200;
    margin: .0rem .2rem;
}

.nova-large-counter-second-counter {
    display: inline-block;
    position: inherit;
    font-size: 1.2rem;
    font-weight: 800;
    margin: .0rem .1rem;
}

.nova-large-counter-second-counter-unit {
    display: inline-block;
    position: inherit;
    font-size: 0.9rem;
    font-weight: 200;
    margin: .0rem .1rem;
}

.nova-large-counter-baseline {
    display: inline-block;
    position: inherit;
    font-size: 0.9rem;
    font-weight: 500;
}

.nova-large-counter-percent {
    display: inline-block;
    position: inherit;
    font-size: 0.9rem;
    font-weight: 200;
    margin: 0rem .3rem;
}

/* CONTAINNER ================================================================================ */
/*
@media only screen and (max-width: 600px) {
    .nova-container {
        width: 100%;
        padding: 0rem 1rem 0rem 1rem;
        margin: auto;
    }
}

@media only screen and (min-width: 600px) {
    .nova-container {
        width: 600px;
        padding: 0rem 1rem 0rem 1rem;
        margin: auto;
    }
}
@media only screen and (min-width: 960px) {
    .nova-container {
        width: 960px;
        padding: 0rem 1rem 0rem 1rem;
        margin: auto;
    }
}
@media only screen and (min-width: 1280px) {
    .nova-container {
        width: 1280px;
        padding: 0rem 1rem 0rem 1rem;
        margin: auto;
    }
}

@media only screen and (min-width: 1600px) {
    .nova-container {
        width: 1600px;
        padding: 0rem 1rem 0rem 1rem;
        margin: auto;
    }
}
*/

.nova-container {
    max-width: 1680px;
    padding: 0rem 1rem 0rem 1rem;
    margin: auto;
}


/* BAR CHARTS ================================================================================ */

.nova-vertical-bar-chart {
    flex-flow: row;
    display: flex;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.nova-vertical-bar-group-frame {
    min-width: 8px;
    border-radius: 4px;
    flex-flow: column;
    display: flex;
    /*width: 100%;*/
}

.nova-vertical-bar-group {
    min-width: 6px;
    border-radius: 4px;
    flex-flow: row;
    display: flex;
    /*width: 100%;*/
}

.nova-vertical-bar-item-frame {
    min-width: 4px;
    height: 100%;
    /*padding: 1px;*/
    display: flex;
    width: 100%;
}

    .nova-vertical-bar-item-frame:hover {
        border-radius: 6px;
        background: rgba(0,0,0,.15);
    }

.nova-vertical-bar-item {
    min-width: 4px;
    background: #546E7A;
    border-radius: 4px;
    align-self: flex-end;
    width: 100%;
    margin-right: 1px;
}

/* SEPARATOR */
.vertical-centered-separator {
    height: 100%;
}

    /*.vertical-centered-separator:after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 50%;
        border-left: 3px dotted #888;
        transform: translate(-50%);
    }*/

/* TOOLTIP ================================================================================ */
.nova-tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: help;
    width: 100%;
    z-index: 10;
}

.nova-tooltip-wrapper span {
    visibility: hidden;
    position: absolute;
    width: 240px;
    bottom: 100%;
    left: 50%;
    margin-left: -120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 2px 0;
    border-radius: 6px;
    z-index: 5;
}

.nova-tooltip-wrapper span::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.nova-tooltip-wrapper:hover span {
    visibility: visible;
}

/* INFOTIP ================================================================================ */
.nova-infotip-wrapper {
    position: relative;
    display: inline-block;
    cursor: help;
    width: 100%;
}

    .nova-infotip-wrapper span {
        position: absolute;
        bottom: 100%;
        left: 50%;
        width:120px;
        margin-left: -60px;
        /*background-color: #FFF;*/
        color: #555;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        z-index: 1;
        /*border: 1px #DDD solid;*/
    }

        .nova-infotip-wrapper span::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -8px;
            border-width: 8px;
            border-style: solid;
            border-color: #DDD transparent transparent transparent;
        }

minispace {
    display:inline-block;
    width:0.5rem;
}

rowspace {
    display: block;
    width: 100%;
    height : 1rem;
}

.nova-mud-expand-panel-content-default {
    padding: 0rem 0rem .4rem 1.4rem;
    flex: 1 1 auto;
    max-width: 100%;
}

.nova-mud-expand-panel-content-sub {
    padding: 0rem 0rem .4rem .6rem;
    flex: 1 1 auto;
    max-width: 100%;
    border-left: 1px #DDD solid;
    margin-left: 0.8rem;
}

.nova-mud-expand-panel-content-local {
    padding: 0rem 0rem .4rem .4rem;
    flex: 1 1 auto;
    max-width: 100%;
    border-left: 1px #DDD solid;
    margin-left: 0.7rem;
}

.nova-popover-overlay {
    top: 0;
    left: 0;
    margin: 0 !important;
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: black;
    opacity:0.35;
    z-index: 99;
}

.nova-module-big-button-frame {
    display: block;
    width : 100%;
    padding: .5rem;
    border-radius:.2rem;
}

    .nova-module-big-button-frame:hover {
        background: rgba(128,128,128, 0.2);
    }

.nova-module-big-button-sllected {
    background: rgba(128,128,128, 0.2);
}

/* NOVA DRAWER ================================================================================ */
.nova-lateral-drawer {
    left:0px;
    width:220px;
    height:100%;
    color:#DDD;
    z-index:5;
}

.nova-lateral-drawer-table-cell {
    background: #444;
}

.nova-app-bar-frame {
    width: 100%;
    background: #FFF;
    z-index: 10;
}

.nova-standard-action-button-icon {
    border:1px solid #DDD;
}

.clickable:hover {
    cursor: pointer;
}

.clickable-bkg:hover {
    cursor: pointer;
    background: rgba(128, 128, 128, 0.15);
}

/* NOVA DRAG AND DROP ================================================================================ */
.nova-dnd-receiver {
    z-index: auto;
}

.nova-dnd-receiver-enabled {
    z-index: 10;
}

.nova-dnd-receiver-feedback {
    z-index: auto;
}

.nova-dnd-receiver-feedback-enabled {
    z-index: 9;
}


/* GENERAL ================================================================================ */
.nova-fit-parent {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.nova-show-on-over {
    display: none !important;
}

.nova-show-on-over:hover {
    display:initial;
}

.nova-mud-fab-outlined-primary {
    background-color: white;
    border: solid 1px #4A88DB;
}

/* -------- */
.nova-flashing {
    animation-duration: 1.5s;
    animation-name: flashingKeys;
    animation-iteration-count: infinite;
    transition: none;
.nova-mud-fab-outlined-error {
    background-color: white;
    border: solid 1px #DD1515;
}

@keyframes flashingKeys {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
.nova-mud-fab-outlined-primary:hover {
    background-color: #efefef;
}

.nova-mud-fab-outlined-error:hover {
    background-color: #efefef;
}