:root {
    --main-color: #f18810;
}

html {
    height: 100%;
}

 /*
 8166C2  rgb(129, 102, 194)
 5180FB  rgb(81, 128, 251)
 */
.app-bg {
    height: 100%;
    background: rgba(129,102,194,1);
    background: -moz-linear-gradient(-45deg, rgba(129,102,194,1) 0%, rgba(129,102,194,1) 25%, rgba(81,128,251,1) 55%, rgba(81,128,251,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(129,102,194,1)), color-stop(25%, rgba(129,102,194,1)), color-stop(55%, rgba(81,128,251,1)), color-stop(100%, rgba(81,128,251,1)));
    background: -webkit-linear-gradient(-45deg, rgba(129,102,194,1) 0%, rgba(129,102,194,1) 25%, rgba(81,128,251,1) 55%, rgba(81,128,251,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(129,102,194,1) 0%, rgba(129,102,194,1) 25%, rgba(81,128,251,1) 55%, rgba(81,128,251,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(129,102,194,1) 0%, rgba(129,102,194,1) 25%, rgba(81,128,251,1) 55%, rgba(81,128,251,1) 100%);
    background: linear-gradient(135deg, rgba(129,102,194,1) 0%, rgba(129,102,194,1) 25%, rgba(81,128,251,1) 55%, rgba(81,128,251,1) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9634f7', endColorstr='#56b5ed', GradientType=1 );
}

.aside-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.iconic-view .aside-branding {
    height: 115px !important;
}

.pin-it .aside-branding {
    height: 190px !important;
}

.pin-it .left-aside {
    overflow-y: hidden;
}

.aside-branding .iconic-logo img {
    width: 75%;
    height: auto;
}

.aside-branding .large-logo img {
    width: 130px;
    height: auto;
}

.iconic-logo, .large-logo {
    text-align: center;

}

.large-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.large-logo span {
    color: #d6d6d6;
    margin-top: 7px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.product-container {
    display: flex;
}

.product-content {
    flex: 1;
}

.product-top-line {
    height: 5px;
}

.product-top-line.factory {
    background: rgb(245,245,245); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 50%, rgba(255,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(245,245,245,1) 0%,rgba(245,245,245,1) 50%,rgba(255,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(245,245,245,1) 0%,rgba(245,245,245,1) 50%,rgba(255,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ff0000',GradientType=1 ); /* IE6- */
}

.product-label {
    position: relative;
    min-height: 180px;
    text-align: left;
    color: white;
    /* text-orientation: upright;
    writing-mode: tb; */
    width: 20px;
    background: rgba(245,245,245,1);
}

.factory {
    background: rgba(255,0,0,1);
}

.product-label div {
    min-width: 180px;
    height: 20px;
    position: absolute;
    top: 80px;    
    left: -80px;
    text-align: center;
    letter-spacing: 3px;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.widget-block.chart, .widget-block.rlmbarchart, .widget-block.rlmheatmap, .widget-block.mpsmap {
    display: flex;
    flex-direction: column;
}

#meters-chart {
    width: 100%;
    height: 400px;
}

.meters-chart-header {
    display: flex;
    flex-direction: row;
}

#meters-chart-legend {
    margin-bottom: 20px;
    flex: 8;
}

#meters-chart-buttons {
    text-align: right;
    flex: auto;
}

.meters-line-chart {
    width: 100%;
    flex: auto;
}

.meters-line-chart-header, .table-header, .mpsmap-header {
    display: flex;
    position: relative;
}

.table-header {
    justify-content: flex-end;
}

.meters-line-chart-legend {
    margin-bottom: 20px;
    flex: 1;
}

.meters-line-chart-buttons, .table-buttons {
    text-align: right;
    margin-left: 10px;
}

.table-buttons {
    margin-bottom: 20px;
}

.rotated-tree-icon{
    display: inline-block;
    transform: rotate(-90deg);
}

.meters-chart-period-buttons, .chart-export-buttons, .mpsmap-kind-buttons, .mpsmap-type-buttons {
    position: absolute;
    background-color: white;
    height: 48px;
    top: -5px;
    right: -5px;
    padding: 4px;
    border: 1px solid #eee;
    border-radius: 3px;
    display: none;
    z-index: 10;
}

.meters-chart-period-buttons > .btn-group {
    display: flex;
    justify-content: end;
}

.meters-chart-period-buttons.periods-comparing {
    height: 81px;
}

.meters-chart-period-buttons.absolute, .meters-chart-period-buttons.absolute-range, .alarms-list-period-buttons.absolute-range  {
    height: 325px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.meters-chart-period-buttons.absolute-range, .alarms-list-period-buttons.absolute-range {
    height: 357px;
}

.meters-chart-period-buttons.periods-comparing.absolute {
    height: 358px;
}

.meters-chart-period-buttons.periods-comparing.absolute-range {
    height: 391px;
}

.legendLabel {
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    padding-right: 10px;
    display: flex;
    align-items: center;
    float: left;
}

.legendLabel i.fa-circle {
    font-size: 16px;
    margin-right: 5px;
}

@media (max-width: 1240px) {
    .meters-chart-header {
        flex-direction: column-reverse;
    }

    .meters-chart-legend {
        flex: 12;
    }

    .meters-chart-buttons {
        margin-bottom: 20px;
    }
}

#pie-chart-legend {
    margin-left: 0px !important;
}

#pie-chart {
    flex: auto;
}

#pie-chart-legend .legendLabel {
    padding-left: 0px !important;
}

.page-breadcrumb-btns {
    padding: 30px 0px 0px 0px;
    text-align: right;
    margin-right: -15px;
}

@media (max-width: 991px) {
    .page-breadcrumb-btns {
        padding-top: 15px;
    }
}

.icon-spin {
    display: inline-block;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

a .icon-spin {
    display: inline-block;
    text-decoration: none;
}

.select2.error .select2-choice, .select2.valid .select2-choice {
    background-color: transparent !important;
    height: 36px !important;
}

.big-popover {
    width: 450px !important;
    max-width: 450px !important;
}

.build-container {
    float: right;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: end;
}

.build-delimiter {
    font-size: 0.5rem;
    margin: 0px 0.75rem;
}

.build-number {
    font-weight: 500;
    padding-left: 0.5rem;
}

.btn-ener-primary {
    color: #ffffff;
    background-color: var(--main-color);
    border-color: #db7b0f;
}

.btn-ener-primary:hover,
.btn-ener-primary:focus,
.btn-ener-primary.focus,
.btn-ener-primary:active,
.btn-ener-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #ffffff;
    background-color: #c46e0b;
    border-color: #aa600a;
}

.super-script {
    font-size: 0.6em;
    vertical-align: top;
    line-height: 1em;
}

.sub-script {
    font-size: 0.6em;
    vertical-align: bottom;
}

.form-control-span {
    display: block;
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
    -moz-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
    -o-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
    transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
}

#optionalFieldsArea {
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
}

#optionalFieldsArea .section-question-mark {
    position: absolute;
    z-index: 1;
    top: 24px;
    right: 15px;
}

.optional-field-value:read-only{
    background-color: #ffffff;
}

.optional-field-value.input-datepicker {
    width: calc(100% - 37px);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.form-group div:has(.optional-field-value.input-datepicker)::after {
    position: absolute;
    top: 0;
    right: 15px;
    content: '\f073';
    font-family: "Font Awesome 5 Free";
    width: 37px;
    height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    border: 1px solid #e5e5e5;
    border-left: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #555555;
    background-color: #eeeeee;
}

.text-teal {
    color: 	#26a69a;
}

.table-search-hide {
    display: none;
}

.error {
    color: red;
}

.form-control-container-switcher {
    height: 38px;
    display: flex;
    align-items: center;
}

.option-top-divider {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #CCC;
    background-clip: content-box !important;
}

.option-bottom-divider {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #CCC;
    background-clip: content-box !important;
}

/**
* Tenant classes
*/
#logoPreview {
    position: relative;
    width: 140px;
    height: 140px;
    padding: 5px;
    border: 1px solid #e5e5e5;
    box-shadow: #00000013 0px 1px 1px 0px inset;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.remove-logo {
    display: none;
    position:absolute;
    top: 1px;
    right: 5px;
}

#logoPreview:hover .remove-logo {
    display: block;
}

#logoImagePreview {
    max-width: 100%;
    max-height: 100%;
}

/*
* Pages configuration classes
*/
.top-bar-btn {
    position: relative;
}

.top-bar-btn a {
    color: white;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 60px;
    text-decoration: none;
}

.top-bar-btn a:hover {
    color: var(--main-color);
}

.top-bar-btn a i {
    display: inline-block;
    font-size: 18px;
}

.top-bar-btn .alert-bubble {
    background-color: #d84315;
    display: inline-block;
    color: #ffffff;
    line-height: normal;
    font-size: 12px;
    position: absolute;
    padding: 4px 5px;
    right: 6px;
    top: 6px;
    font-weight: 500;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    z-index: 1;
}

/*
* Pages configuration classes
*/
.edit-row {
    border: 3px dashed var(--main-color);
    margin-bottom: 30px;
}

.box-widget .widget-action-bar li > span.w-edit {
    height: 56px;
    width: 56px;
    border-left: #eeeeee 1px solid;
    color: #444444;
}
.box-widget .widget-action-bar li > span.w-edit:hover,
.box-widget .widget-action-bar li > span.w-edit:focus {
    text-decoration: none;
    color: var(--main-color);
    cursor: pointer;
}

.box-widget .widget-action-bar li > span.w-edit i {
    height: 56px;
    width: 56px;
    display: inline-block;
    line-height: 56px;
    text-align: center;
    font-size: 16px;
}
  
.box-widget.no-border .widget-head .widget-action-bar li > span.w-edit {
    height: 30px;
    width: 30px;
    margin-top: 13px;
    margin-right: 3px;
    display: inline-block;
    color: #444444;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    border-left: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.box-widget.no-border .widget-head .widget-action-bar li > span.w-edit:hover,
.box-widget.no-border .widget-head .widget-action-bar li > span.w-edit:focus {
    text-decoration: none;
    color: var(--main-color);
    cursor: pointer;
}
.box-widget.no-border .widget-head .widget-action-bar li > span.w-edit i {
    height: 30px;
    width: 30px;
    display: inline-block;
    line-height: 32px;
    text-align: center;
    font-size: 16px;
}

.reset-option {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #CCC;
    background-clip: content-box !important;
}

.separated-option {
    margin-top: 5px;
    padding-top: 5px;
    border-bottom: 1px solid #CCC;
    background-clip: content-box !important;
}

.widget-config-error {
    text-align: right;
    margin-bottom: 0;
    padding-top: 7px;
    font-weight: 400;
    color: red;
}

.widget-config-error.left-align {
    text-align: left;
}

.option-icon {
    font-size: 2rem;
    vertical-align: middle;
    padding-right: 10px;
}

.provider-icon {
    line-height: 20px;
    text-align: center;
    font-size: 18px;
    margin: 0px 5px;
}

/*
* Dashboard Reorder classes
*/
.reorder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 12.5%;
}

.reorder-padding {
    padding-top: 8px;
}

.templ_wrapper {
    padding: 8px 0px;
    transition: all 200ms;
    width: 100%;
}

.templ_wrapper.active {
    padding: 16px 0px;
    transition: all 200ms;
}

.short-row {
    height: 130px;
}

.normal-row {
    height: 190px;
}

.tall-row {
    height: 250px;
}

.reorder-row {
    position: relative;
    margin: 0px;
    background: #ffffff;
    display: flex;
    align-items: center;
    width: 100%;
    column-gap: 20px;
    border: 3px dashed var(--main-color);
    padding: 13px 40px 13px 100px;
}

.row-margin {
    margin: 8px 0px;
}

.addNewRow {
    background-color: #ffe8ce;
    display: flex;
    align-items: center;
    width: 100%;
    border: 3px dashed var(--main-color);
    padding: 0px 20px;
}

.no-free-slot-background {
    background: repeating-linear-gradient(135deg, rgb(255, 179, 179), rgb(255, 179, 179) 20px, rgb(255, 255, 255) 20px, rgb(255, 255, 255) 40px) !important;
}

.reorder-widget-box {
    border: 1px dashed var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex: 1;
    margin-right: 0px;
    height: 100%;
}

.reorder-widget-box .reorder-widget-head {
    background-color: rgba(241, 136, 16, 0.25);
    height: 40px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.reorder-widget-box .reorder-widget-head span {
    font-size: 16px;
    color: #444444;
}

.reorder-widget-box .reorder-widget-head i {
    padding: 0px 10px;
    color: var(--main-color);
    font-size: 20px;
    cursor: grab;
}

.reorder-widget-box .reorder-widget-icon {
    margin-top: 40px;
    color: rgba(241, 136, 16, 0.3);
}

.sortable-widget-drag {
    background-color: #ffffff;
}

.dragRowDiv {
    width: 80px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    background-color: rgba(241, 136, 16, 0.25);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.dragRowDiv i {
    font-size: 35px;
    color: var(--main-color);
}

.reorder-row-height {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    margin-right: 0px;
    z-index: 99;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    transition: all ease-in-out 0.2s;
    border-left: 1px solid var(--main-color);
}

.no-free-slot-background .reorder-row-height {
    background: none;
}

.reorder-row-height i {
    font-size: 20px;
    color: var(--main-color);
    transition: all ease-in-out 0.4s;
}

.reorder-row-height.expanded {
    width: 80px;
    opacity: 1;
}

.reorder-row-height i:not(.open-row-height) {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.reorder-row-height.expanded i:not(.open-row-height):not(.inactive) {
    pointer-events: auto;
    opacity: 1;
}

.reorder-row-height .height-control {
    cursor: pointer;
}

.reorder-row-height .rotate-icon {
    transform: rotate(-45deg);
}

.reorder-row-height-icon {
    transition: all ease-in-out 0.4s;
    opacity: 0;
    padding: 3px 0px 2.5px 1.5px;
    width: 28px;
    border-bottom: 4px solid var(--main-color);
    border-top: 4px solid var(--main-color);
    display: flex;
    justify-content: center;
}

.reorder-row-height.expanded .reorder-row-height-icon {
    opacity: 1;
}

.reorder-row-height-icon i {
    font-size: 40px;
}

.open-row-height {
    transition: all ease-in-out 0.4s;
    position: absolute;
    left: 2.5px;
    opacity: 1;
}

.reorder-row-height.expanded .open-row-height {
    opacity: 0;
    transform: rotate(180deg);
}

.reorder-row-height.expanded .inactive {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.reorder-new-row {
    background-color: #ffffff;
    transition: ease-in-out 0.2s;
    border: 0px dashed var(--main-color);
    width: 100%;
    height: 0px;
    opacity: 0;
}

.templ_wrapper.active .reorder-new-row {
    height: 15px;
    border-width: 3px;
    outline-offset: 10px;
    opacity: 1;
    transition: all 200ms;
}

.sortable-widget-drag {
    opacity: 1;
    transform: none;
}

.delete-row-icon{
    color: red;
    font-size: 30px;
    line-height: 20px;
    position: absolute;
    top: 20px;
    right: 40px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.short-row .reorder-widget-icon { font-size: 5rem; }
.normal-row .reorder-widget-icon { font-size: 9rem; }
.tall-row .reorder-widget-icon { font-size: 12rem; }

/*
* Dashboards manager classes
*/
#pagesTree div:first-child {
    margin-top: 0 !important;
}

.page-line, .folder-line {
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    border: 1px solid #ddd;
}

.folder-line {
    background-color: #77777712;
}

.page-line {
    background-color: #fff;
}

.item-hover {
    background-color: #fff;
    border: 1px solid var(--main-color);
    color: var(--main-color);
}

.item-actions {
    display: block;
    float: right;
}

.item-icon {
    margin-right: 1rem;
}

.item-action-icon {
    margin-left: 1rem;
    cursor: pointer;
}

.drag-handler {
    margin-right: 1rem;
    cursor: grab;
}

.drag-handler:active {
    cursor: grabbing;
}

.dragging-row {
    background-color: white;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

.nested-sortable {
    margin-top: 0.75rem;
}

@media (hover: none) {
    .item-actions {
        display: block !important;
    }
    .drag-handler {
        display: inline !important;
    }
}

/*
* Database connectors classes
*/
.item-name {
    color: var(--main-color);
}

/*
* CSV Import modal
*/
.csv-import-errors-list {
    max-height: 400px;
    overflow-y: scroll;
    color: red;
}

/*
* Widgets' classes
*/

.location-tooltip .firstHeading {
    margin-top: 0px;
}

.location-tooltip #bodyContent div {
    margin-top: 10px;
}

.widget-block.geomap .gm-ui-hover-effect {
    display: none !important;
}

.widget-block.table {
    display: flex;
    flex-direction: column;
}

.widget-block.table .table-container {
    overflow: hidden;
}

.widget-block.table .table-responsive {
    overflow: auto;
    height: 100%;
}

.widget-block.table table.table, .widget-block.table table.table tr:first-child td {
    border-top: 0;
}

.widget-block.table table.table th {
    position: sticky;
    top: 0;
    border-top: 0;
    border-bottom: 0;
}

.widget-block.table table.table th::before, .widget-block.table table.table th::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #ddd;
}
.widget-block.table table.table th::before {
    top: 0;
    height: 1px;
}

.widget-block.table table.table th::after {
    bottom: 0;
    height: 2px;
}

.widget-block.plainnumbers {
    overflow-y: scroll;
    width: 100%;
}

.plainnumbers-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100%;
    gap: 25px;
    row-gap: 20px;
}

.plainnumber-container {
    min-height: 100px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-grow: 1;
}

.plainnumber-type-bg {
    position: absolute;
    z-index: 1;
    font-size: 10rem;
    opacity: 0.75;
}

.plainnumber-param-name, .plainnumber-param-value, .plainnumber-kind-period, .plainnumber-measured-at {
    font-size: 1.8rem;
    line-height: 1.1em;
    margin-bottom: 0px;
    text-align: center;
    z-index: 2;
}

.plainnumber-param-name {
    line-height: 1.8rem;
}

.plainnumber-param-value {
    font-size: 2.5rem;
    line-height: 4rem;
}

.plainnumber-kind-period, .plainnumber-measured-at {
    margin-bottom: 0px;
    font-size: 1.5rem;
    color: #8f8f8f;
}

.plainnumber-measured-at {
    font-size: inherit;
    line-height: 1.1rem;
}

.plainnumbers-container.large-size .plainnumber-container {
    min-height: 160px;
}

.plainnumbers-container.large-size .plainnumber-type-bg {
    font-size: 150px;
}

.plainnumbers-container.large-size .plainnumber-param-name,
.plainnumbers-container.large-size .plainnumber-param-value,
.plainnumbers-container.large-size .plainnumber-kind-period,
.plainnumbers-container.large-size .plainnumber-measured-at {
    font-size: 2rem;
    margin-bottom: 2px;
}

.plainnumbers-container.large-size .plainnumber-param-name {
    line-height: 2.5rem;
}

.plainnumbers-container.large-size .plainnumber-param-value {
    font-size: 4rem;
}

.plainnumber-add-icon, .plainnumber-delete-icon, .quick-area-value-add-icon {
    cursor: pointer;
    font-size: 2em;
    color: #66bb6a;
    line-height: 36px;
}

.plainnumber-delete-icon {
    color: #d84315;
}

.quick-area-value-add-icon {
    padding-left: 15px;
}

.widget-block.alerts {
    overflow: scroll;
}

.datepicker-container, .datepicker-container.range {
    margin-top: 7px;
}

.datepicker-container > div {
    display: flex;
    justify-content: center;
}

.datepicker-container.range {
    display: flex;
    flex-direction: row;
}

.datepicker-container.range > div {
    flex-direction: column;
}

.datepicker-container.range > div.datepicker-bottom-btns {
    flex-direction: row;
}

.datepicker-container .dp-control {
    border: 1px solid #eee;
    border-radius: 2px;
    margin-bottom: 5px;
}

.datepicker-container .btn {
    padding: 5px;
    width: 100%;
    height: 30px;
    border-radius: 4px;
    line-height: 1.3;
}

.box-widget .widget-action-bar .dropdown-menu li {
    display: block;
    float: none;
}

.table-container.has-conf-error {
    flex: 1;
    display: flex;
}

.table-container.has-conf-error table.table {
    display: none;
}

.widget-block.table .export-type[data-export-type="png"] {
    display: none;
}
.conf-error {
    font-size: 30px;
    font-weight: 500;
    color: var(--main-color);
    align-self: center;
    line-height: 1.1;
    text-align: center;
}

.chart-export-menu {
    margin-left: 10px;
    margin-right: 10px;
}

.analysis-content .chart-export-menu, .livechart-header .chart-export-menu {
    margin-left: 20px;
    margin-right: 0px;
}

.section-delimiter {
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.section-question-mark {
    color: #777;
    float: right;
    font-size: 1.5em;
    cursor: pointer;
}

.legend-chunk::after {
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    padding: 0px 7px;
    font-size: 0.8em;
    font-weight: 900;
    color: #c4c4c4;
}

.heatmap-text-legend {
    position: absolute;
    top: 0px;
    left: 0px;
    visibility: hidden;
    width: 100%;
}

/*
* Log book classes
*/
.lowerLimit, .upperLimit {
    display: inline-block;
    color: #66bb6a;
    margin-right: 0.5rem;
    font-weight: bold;
}

.violateLower, .violateUpper {
    color: #d84315;
    margin-right: 0.5rem;
}

span.violateLower, span.violateUpper {
    color: red;
}

span.violateUpper::before {
    content: "+";
}

.lowerLimit {
    transform: scale(1, 1.3) rotate(-90deg);
    -webkit-transform: scale(1, 1.3) rotate(-90deg);
    -moz-transform: scale(1, 1.3) rotate(-90deg);
    -ms-transform: scale(1, 1.3) rotate(-90deg);
    -o-transform: scale(1, 1.3) rotate(-90deg);
}

.upperLimit {
    transform: scale(1, 1.3) rotate(90deg);
    -webkit-transform: scale(1, 1.3) rotate(90deg);
    -moz-transform: scale(1, 1.3) rotate(90deg);
    -ms-transform: scale(1, 1.3) rotate(90deg);
    -o-transform: scale(1, 1.3) rotate(90deg);
}

.violateUpper {
    transform: scale(-0.75, 1) rotate(-90deg);
    -webkit-transform: scale(-0.75, 1) rotate(-90deg);
    -moz-transform: scale(-0.75, 1) rotate(-90deg);
    -ms-transform: scale(-0.75, 1) rotate(-90deg);
    -o-transform: scale(-0.75, 1) rotate(-90deg);
}

.violateLower {
    transform: scale(-0.75, 1) rotate(90deg);
    -webkit-transform: scale(-0.75, 1) rotate(90deg);
    -moz-transform: scale(-0.75, 1) rotate(90deg);
    -ms-transform: scale(-0.75, 1) rotate(90deg);
    -o-transform: scale(-0.75, 1) rotate(90deg);
}

.limit-delta-cell {
    display: flex;
}

.limit-delta-cell>div {
    flex: 1;
}

.alarm-comment-cell {
    cursor: pointer;
}

.alarm-comment-cell:hover {
    color: var(--main-color);
}

.alarm-resolve-cell {
    cursor: pointer;
    display: inline-block;
}

.alarms span.switchery.switchery-small {
    pointer-events: none;
}

.alert-comment-label {
    text-align: left !important;
    margin-bottom: 5px !important;
    padding-top: 0px !important;
}

#comments-list-area {
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
    max-height: 500px;
    overflow-y: scroll;
}

#comments-list-area .no-comments {
    margin-bottom: 1.3rem;
}

.comments-list {
    position: relative;
    list-style: none;
    padding-left: 0px;
}

.comments-list::before {
    content: '';
    border-left: 2px solid #f0f0f0;
    position: absolute;
    top: 10px;
    bottom: 0;
    left: 14px;
    height: calc(100% - 30px);
}

.comments-list li {
    display: flex;
    margin-bottom: 1.3rem;
}

.comments-list .comment-icon {
    border-radius: 50%;
    border: 2px solid #f0f0f0;
    width: 30px;
    height: 30px;
    background-color: white;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.comments-list .comment-icon .common-comment {
    color: #888;
}

.comments-list .comment-icon .resolve-comment {
    color: #66bb6a;
}

.comments-list .comment-icon .reset-comment {
    color: #d84315;
}

.comments-list .comment-content {
    flex: 1;
}

.comments-list .comment-content div {
    margin-top: 4px;
}

/*
* Analytics settings classes
*/

.tab-pane .block-content.analized-params {
    display: flex;
    flex-wrap: wrap;
}
.tab-pane .block-content.analized-params .not-configured {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    font-size: 20px;
    font-weight: 500;
}
.analysis-type {
    min-width: 300px;
    flex: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: 150px;
}
.analysis-type i.plainnumber-type-bg {
    top: calc(50% - 75px);
}
.analysis-type h4 {
    z-index: 2;
}
.analysis-type .params-list {
    list-style-type: none;
    padding-left: 0px;
    font-size: 16px;
    min-width: 230px;
    z-index: 2;
}
.analysis-type .params-list li::after, #analysisTypeModal .parameter-item>label::after {
    content: attr(data-paramId);
    float: right;
    color: #8f8f8f;
    font-style: italic;
}

#analysisTypeModal .modal-body {
    overflow-y: scroll;
    height: 60vh;
}

#analysisTypeModal .bootbox-body, .paramsExpandList {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#analysisTypeModal .collapsible, .paramsExpandList .collapsible  {
    width: 50%;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-top: 1px solid #eee;
    cursor: pointer;
}

.paramsExpandList .collapsible  {
    width: 70%;
}

#analysisTypeModal .collapsible:first-child, .paramsExpandList .collapsible:nth-child(1 of :not(.hidden)) {
    border-top: 0px;
}

#analysisTypeModal .collapsible .type-icon, .paramsExpandList .collapsible .type-icon {
    width: 30px;
    font-size: 18px;
    text-align: center;
}

#analysisTypeModal .collapsible .type-name, .paramsExpandList .collapsible .type-name {
    flex: 1;
}

#analysisTypeModal .collapsible .type-name::after, .paramsExpandList .expand-icon::after {
    font-family: 'matmix-icons';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    float: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e60f";
}

.paramsExpandList .expand-icon {
    padding-left: 20px;
}

#analysisTypeModal .collapsible.expanded .type-name::after, .paramsExpandList .collapsible.expanded .expand-icon::after {
    content: "\e60e";
}

.paramsExpandList .parameter-item label {
    font-weight: 400;
}

#analysisTypeModal .params-section, .paramsExpandList .params-section {
    width: 50%;
    padding-bottom: 20px;
}

.paramsExpandList .params-section {
    width: 70%;
}

#analysisTypeModal .parameter-item, .paramsExpandList .parameter-item {
    display: flex;
    align-items: center;
    padding: 5px 20px;
}

#analysisTypeModal .parameter-item>label, .paramsExpandList .parameter-item>label {
    flex: 2;
    cursor: pointer;
}

#analysisTypeModal .parameter-item>span, .paramsExpandList .parameter-item>span {
    flex: 1;
    text-align: right;
}

/*
* Analysis classes
*/
.analysis-widget .filter-section {
    padding: 10px 20px;
    background-color: #f9f9f9;
    border-bottom: #eee 1px solid;
}

.analysis-widget .filter-section .row {
    display: flex;
    align-items: center
}

.analysis-content {
    min-height: 700px;
}

.analysis-content #chart-analysis-content, .analysis-content #chart-analysis-content .missed-config {
    width: 100%;
    min-height: 620px;
}

.analysis-content #chart-analysis-content .missed-config {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 30px;
    color: var(--main-color);
}

/*
* Reports classes
*/

#missedResourcesIcon {
    padding-left: 0px;
}

.error-exclamation-mark {
    color: red;
    padding-top: 7px;
    font-size: 1.5em;
    cursor: pointer;
}

.popover-title.missed-resources {
    color: red;
    background-color: #ffeeee; 
}

.report-title {
    color: var(--main-color);
}

.report-period-badge {
    display: inline-block;
    width: 21px;
    height: 21px;
    text-align: center;
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 8px;
    background-color: #009fb3;
    border: 1px solid #0096a9;
    border-radius: 3px;
    color: white;
    font-weight: bold;
}

/*
* Single Location maps classes
*/

#mps-maps .tab-widget {
    margin-bottom: 0px;
    display: flex;
    height: inherit;
}

#mps-maps .tab-left {
    border-bottom: 0px;
    display: flex;
    flex-direction: column;
    width: 200px;
    border-right: 0px;
}

#mps-maps .nav-tabs {
    overflow-x: hidden;
    overflow-y: scroll;
}

#mps-maps .nav-tabs li, #mps-maps .new-map {
    border-right: 1px solid #eeeeee;
}

#mps-maps .nav-tabs a {
    cursor: pointer;
    line-height: 15px;
    min-height: 56px;
    height: auto;
    display: flex !important;
    align-items: center;
}

#mps-maps .nav-tabs li.active {
    border-right: 0px;
}

#mps-maps .new-map {
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 10px;
}

#mps-maps .tab-content {
    flex: 1;
    padding: 15px;
    position: relative;
    overflow: hidden;
}

#mps-maps .tab-content .map-actions {
    position: absolute;
    top: 15px;
    right: 15px;
}

#mps-maps .tab-content .map-actions a {
    cursor: pointer;
}

#mps-maps .tab-content svg {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

#mps-maps .tab-content .tab-pane {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sourceSVGPreview {
    height: 500px;
    border: 1px dashed #e5e5e5;
    border-radius: 3px;
    padding: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sourceSVGPreview label {
    font-size: 2em;
    text-align: center;
    color: #999999;
    opacity: 0.7;
}

#sourceSVGPreview object {
    flex: 1;
}

/*
* MPS Map settings classes
*/

#mapSettings {
    --settings-width: 83%;
}

#mapSettings #mainArea, #mapSettings #quickArea {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#mapSettings .headline {
    width: var(--settings-width);
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
}

#mapSettings label {
    margin-bottom: 0px;
    font-weight: 400;
}

#mapSettings .headline label {
    flex: 1;
    font-weight: 400;
    text-align: center;
}

#mapSettings .headline label:first-child {
    flex: 3;
    text-align: left;
}

#mapSettings #mainArea .parameter-item>label::after {
    content: attr(data-paramId);
    float: right;
    color: #8f8f8f;
    font-style: italic;
    margin-right: 2em;
}

#editWidgetModal #mapSettings {
    overflow-y: scroll;
    max-height: 60vh;
}

#mapSettings #mainArea .collapsible {
    width: var(--settings-width);
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-top: 1px solid #eee;
    cursor: pointer;
}

#mapSettings #mainArea :nth-child(1 of .collapsible) {
    border-top: 0px;
}

#mapSettings #mainArea .collapsible .type-icon {
    width: 30px;
    font-size: 18px;
    text-align: center;
}

#mapSettings #mainArea .collapsible .type-name {
    flex: 1;
}

#mapSettings #mainArea .collapsible .type-name::after {
    font-family: 'matmix-icons';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    float: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e60f";
}

#mapSettings #mainArea .collapsible.expanded .type-name::after {
    content: "\e60e";
}

#mapSettings #mainArea .params-section {
    width: var(--settings-width);
    padding-bottom: 20px;
}

#mapSettings #mainArea .parameter-item {
    display: flex;
    align-items: center;
    padding: 5px 20px;
}

#mapSettings #mainArea .parameter-item>label {
    flex: 3;
    cursor: pointer;
}

#mapSettings #mainArea .parameter-item>span {
    flex: 1;
    text-align: center;
}

#mapSettings #quickArea .map-quick-area-hint {
    width: var(--settings-width);
    padding-right: 0px;
    text-align: end;
    display: flex;
    justify-content: end;
    align-items: center;
}

#mapSettings #quickArea #quick-area-values-container {
    width: var(--settings-width);
}

/*
* MPS Map widget classes
*/

.mpsmap-content {
    position: relative;
    display: flex;
    height: 100%;
    overflow: hidden;
}

.mpsmap-map {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 15px;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpsmap-map svg {
    overflow: hidden;
    display: inline;
    width: inherit;
    min-width: inherit;
    max-width: inherit;
    height: inherit;
    min-height: inherit;
    max-height: inherit;
}

.mpsmap-qarea {
    display: flex;
    flex-flow: row wrap;
    flex: 1;
    max-height: 156px;
    overflow-y: scroll;
    margin-left: -10px;
    margin-right: -10px;
}

.qvalue-container {
    position: relative;
    padding: 0px 10px;
    min-height: auto;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.qvalue-type-bg {
    font-size: 5.5rem;
    position: absolute;
}

.qvalue-name {
    font-size: inherit;
    margin-bottom: 0px;
    line-height: 1.1em;
    text-align: center;
    z-index: 2;
}

.qvalue-value {
    font-size: 2rem;
    margin-bottom: 0px;
    z-index: 2;
}

.qvalue-value::after {
    content: attr(data-unit);
}

.qvalue-measured-at {
    font-size: 80%;
    line-height: 1.1em;
    margin-bottom: 0px;
    z-index: 2;
    color: #8f8f8f;
}

.alert-hw {
    stroke: #d61818 !important;
    fill: #d61818 !important;
}

.selected-hw {
    stroke: yellow !important;
}

.inactive-hw {
    opacity: 0.7;
}

.hw-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;
}

.hw-container:first-child {
    border-top: 1px solid #ddd;
    margin-top: 15px;
}

.hw-container .hw-name {
    font-size: 1.1em;
}

.hw-container .hw-close {
    position: absolute;
    top: 5px;
    right: 5px;
}

.hw-container > div {
    display: flex;
    align-items: center;
}

.hw-container .mp-icon {
    margin-right: 5px;
    font-size: large;
}

.hw-container .mp-name {
    flex: 3;
}

.hw-container .mp-value {
    flex: 1;
    text-align: right;
}

.hw-container .mp-value:after {
    content: attr(data-unit);
}

.mpsmap-marea {
    max-width: 30%;
    overflow-y: scroll;
    width: 30%;
    padding-right: 15px;
    margin-left: -30%;
    transition: margin-left 0.5s, max-width 0.5s;
}

.mpsmap-marea.slide-out {
    max-width: 450px;
    margin-left: 0%;
}

.qv-dot {
    pointer-events: none;
}

.map-zoom-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0px;
    background-color: #6794dc;
    color: white;
    font-size: large;
    cursor: pointer;
}

.map-zoom-btn:hover {
    background-color: #6771dc;
}

.map-zoom-btn:active {
    background-color: #68dc75;
}

.zoom-in {
    cursor: zoom-in;
}

.map-popover .single-mp, .map-alert-popover .single-mp {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.map-popover .single-mp:first-child, .map-alert-popover .single-mp:first-child {
    margin-top: 0px;
}

.map-popover .mp-icon, .map-alert-popover .mp-icon {
    font-size: 2.25em;
}

.map-popover .mp-name, .map-alert-popover .mp-name {
    display: flex;
    margin-left: 5px;
    flex: 3;
    flex-direction: column;
    font-size: 1.25em;
}

.map-popover .mp-value, .map-alert-popover .mp-value {
    flex: 2;
    text-align: right;
    font-size: 1.6em;
}

.map-popover .mp-value::after, .map-alert-popover .mp-value::after {
    content: attr(data-unit);
}

.popup-measured-at {
    font-size: 72%;
    color: #8f8f8f;
    margin-bottom: 0px;
}

.map-alert-popover {
    border: 1px solid rgba(255, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1040;
}

.map-alert-popover .arrow {
    display: none;
}

.map-alert-popover .popover-title {
    color: #a94442;
    background-color: #fcada8;
    border-bottom: 1px solid #dd9292;
    padding-right: 26px;
}

.map-alert-popover .popover-content {
    color: #a94442;
    background-color: #fd61612e;
    border-radius: 0 0 5px 5px;
}

.map-alert-popover .popup-measured-at {
    color: #b77c7c;
    pointer-events: none;
}

.map-alert-popover .mp-icon {
    color: #a94442f2 !important;
}

.map-alert-popover .close {
    position: absolute;
    top: 3px;
    right: 5px;
    padding: 5px 5px;
    color: #772a28;
    line-height: 15px;
}

.area > :first-child {
    fill: #fff0;
}

.area.alerted-area > :first-child {
    fill: #ff000035 !important;
}

/*
* Overwritten layout.css classes
*/

.dcjq-icon:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.dcjq-parent.active .dcjq-icon:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.left-navigation li a, .left-navigation > ul > li > a {
    color: white;
}

.iconic-view .left-navigation > ul ul li a .nav-icon {
    display: none !important;
}

.iconic-view .left-navigation > ul ul li a .nav-label {
    display: inline !important;
}

.iconic-view .left-navigation > ul ul li a .dcjq-icon {
    top: 13px !important;
}

.left-aside .aside-branding {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.left-aside, .left-aside .aside-branding {
    background-color: transparent !important;
}

.left-navigation > ul > li > a {
    border-bottom: 0px solid !important;
}

.left-navigation li a:hover, .left-navigation > ul > li > a:hover {
    color: var(--main-color) !important;
}

.left-navigation .list-accordion > li > a:before {
    background: #5e4a8e;
}

.top-bar {
    background-color: transparent !important;
}

.leftbar-action {
    background-color: #5e4a8e;
    color: #8166C2;
}

.leftbar-action:hover,
.leftbar-action:active,
.leftbar-action:focus {
    background-color: var(--main-color);
}

.leftbar-action-mobile:hover,
.leftbar-action-mobile:active,
.leftbar-action-mobile:focus {
    background-color: var(--main-color);
}

.user-nav {
    margin-right: 0px !important;
}

.user-nav > ul > li > a > span {
    color: #FFFFFF;
}

.user-nav .dropdown.open {
    background-color: #8166C2 !important;
}

.user-nav ul ul > li > a:hover {
    background-color: #f5f5f5;
    color: var(--main-color) !important;
}

.left-navigation a.active {
    color: #FFFFFF !important;
}

.page-breadcrumb ul > li > a:hover, .page-breadcrumb ul > li > a:active {
    color: var(--main-color) !important;
}

.legal-details-link,
.legal-details-link:visited,
.legal-details-link:focus {
    text-decoration: none !important;
    color: #454545;
}

.legal-details-link:hover,
.legal-details-link:active {
    text-decoration: none !important;
    color: var(--main-color);
}

.value-label {
    text-align: left;
    margin-bottom: 0;
    padding-top: 7px;
    font-weight: 400;
}

@media screen and (max-width: 1000px) {
    .top-aside-right {
        right: 0px !important;
    }
}

/*
 * Measurement points classes
 */
.mp-filter-hide {
    display: none;
}

.virtual {
    position: relative;
    padding-right: 46px !important;
}

.virtual::after {
    content: 'VMP';
    color: white;
    width: 30px;
    border-radius: 9px;
    height: 17px;
    text-align: center;
    font-weight: bold;
    line-height: 17.5px;
    background-color: #64b5f6;
    font-size: 10px;
    position: absolute;
    right: 8px;
    margin-top: auto;
    margin-bottom: auto;
    top: 0px;
    bottom: 0px;
}

.operands-divider {
    border-top: 1px solid #ebebeb;
    margin-top: 5px;
    padding-top: 5px;
}

.popover :nth-child(1 of .optional-field:not(.hide)) {
    border-top: 1px solid #ebebeb;
    margin-top: 5px;
    padding-top: 5px;
}

.optional-field {
    overflow-wrap: break-word;
}

/*
 * Overwritten common-styles.css classes
 */
.main-container {
    min-height: 600px;
    padding: 0px 15px;
}

.main-container, .footer-container {
     background-color: #f5f5f5;
     margin: 0px;
 }

.footer-container {
    padding: 20px 30px;
    display: flex;
    align-items: center;
}

.dt-pagination {
    display: flex;
}

.dt-pagination .pagination-info {
    margin-top: 17px;
    align-self: center;
}

.dt-pagination ul.pagination {
    flex: 1;
    display: flex;
    justify-content: end;
}

.dt-pagination a:hover,
.dt-pagination a:focus {
  color: var(--main-color) !important;
}

.dt-pagination a.disabled {
    pointer-events: none;
    color: #bbb !important;
}

.dt-pagination a.current-page {
    pointer-events: none;
    color: var(--main-color) !important;
}

/*
 * Overwritten box-widgets.css classes
 */
.box-widget .widget-action-bar li > span.w-remove:hover,
.box-widget .widget-action-bar li > span.w-remove:focus {
    color: var(--main-color);
}
.box-widget.no-border .widget-head .widget-action-bar li > span.w-remove:hover,
.box-widget.no-border .widget-head .widget-action-bar li > span.w-remove:focus {
    color: var(--main-color);
}

/*
 * Overwritten plugin.css classes
 */
.loadmask{
    z-index: 5030 !important;
}
.loadmask-msg {
    z-index: 5030 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

.datepicker-inline {
    width: auto;
}

/*
 * Overwritten components.css + SSE alarms classes
 */
div[data-notify="container"] { 
    width: 500px;
    height: auto;
    cursor: pointer;
    z-index: 5030;
}

div.activity-item {
    display: flex;
    align-items: center;
}

div.activity {
    margin-left: 15px;
    font-size: 14px;
}

.activity-item i {
    width: 20px;
    text-align: center;
}

.alert-middle-severity {
    background-color: #fbcdb6;
    border-color: #fd9460;
    color: #8f5431;
}

.alert-middle-severity hr {
    border-top-color: #ecbba6;
}

.alert-middle-severity .alert-link {
    color: #693724;
}

.alert-high-severity {
    background-color: #fcada8;
    border-color: #cd6d67;
    color: #a94442;
}

.alert-high-severity hr {
    border-top-color: #e4b9c0;
}

.alert-high-severity .alert-link {
    color: #843534;
}

.tab-widget .nav-tabs > li.active > a, .tab-widget .nav-tabs > li > a:hover {
    color: var(--main-color) !important;
}

.box-tab .tabs-left > .nav-tabs > li.active > a {
    color: var(--main-color) !important;
}

.box-tab .tabs-left > .nav-tabs > li > a:hover {
    color: var(--main-color) !important;
}

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}

@media (min-width: 768px) {
    .table-responsive {
        overflow: inherit;
    }
}

.borderless td, .borderless th {
    border: none !important;
    padding: 0px !important;
    margin: 0px !important;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image-box {
    position: relative;
    text-align: center;
    border: 1px solid;
    border-radius: 10px;
    min-height: 50px;
}

.db-image-box {
    border-color: #777777;
    background-color: #f9f9f9;
}

.zero-margin-right-loader .w-loader {
    margin-right: 0px !important;
}

.db-icon {
    height: 70px;
    width: 70px;
}

.full-width {
    width: 100%;
}

.connector-icon {   
    width: 27px;
    margin-left: auto;
    margin-right: auto;
}

.zero-top-padding {
    padding-top: 0px !important;
}

.h-centred {
    float: unset !important; 
    padding: 0px !important;
    margin: 0px !important;
}

.default-state {
    fill: #777777 !important;
    
}
.success-state {
    fill: #7cb342;
}

.danger-state {
    fill: #ff8a80;
}

.primary-state {
    fill: #009fb3;
}

.warning-state {
    fill: #ffb300;
}

.hidden-overflow {
    overflow: hidden; 
    text-overflow: ellipsis;
}

div.tagsinput {
    height: auto !important;
    min-height: auto !important;
    padding: 0px !important;
}

div.tagsinput span.tag {
    margin-bottom: 0px !important;
    background: #f5f5f5 !important;
    color: #555555 !important;
    margin-bottom: 3px !important;
    margin-top: 5px !important;
    margin-left: 5px !important;
    border: 1px solid #e5e5e5;
    line-height: 13px !important;
}

div.tagsinput span.tag a {
    color: #555555 !important;
}

div.tagsinput input {
    margin-bottom: 0px !important;
    min-width: 100px !important;
    margin-bottom: 3px !important;
    margin-top: 5px !important;
    margin-left: 5px !important;
}

.form-control.error ~ div.border {
    border: red 1px solid;
    
}

.form-control.valid ~ div.border {
    border: green 1px solid;
    
}

.border {
    border-radius: 3px;
}

.first_letter_uppercase:first-letter {
    text-transform: uppercase
}

.small-top-margin {
    margin-top: 7px;
}

#historical-imports-list .historical-import::after {
    content: "";
	border-top-color: rgb(238, 238, 238);
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: content-box;
	display: block;
	height: 0px;
	line-height: 0.5em;
	margin-block-end: 0.5em;
	margin-block-start: 0.5em;
	margin-inline-end: 0px;
	margin-inline-start: 0px;
    margin-top: 0px;
    margin-bottom: 20px;
	overflow: hidden;
	unicode-bidi: isolate;
	width: 100%; 
}

#historical-imports-list .historical-import:last-child::after {
	display: none;
} 

#historical-imports-list div.progress-bar-warning {
	color: #454545;
}

#historical .datepicker-container .datepicker-days .highlighted.day {
    background:#CCC !important;
}

.zero_margin {
    margin: 0px !important;
}

.main-tab-content {
    padding-bottom: 0px !important; 
    border-bottom: none !important;
}

.main-tab.nav > li > a {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
}

.main-tab.nav > li.active > a, .main-tab.nav > li > a:hover {
    color: var(--main-color) !important;
} 

.main-tab.nav > li.active {
    border-bottom: 1px solid white;
} 

.main-tab.nav > li.active > a {
    border-bottom: 1px solid white !important;
}

.main-tab.nav > li:not(.active) > a {
    border-bottom: 1px solid #eeeeee;
    background: #f9f9f9 !important;
}  

.main-tab-content {
    margin: 0px !important;
    padding-left: 0px; 
    padding-right: 0px;
}

.main-tab {
    margin-left: 0px !important;
    margin-right: 0px !important;
} 

.main-tab li:first-child {
    padding-left: 0px !important;
}

.success-label {
    color: #7cb342;
}

.modal {
    z-index: 5050 !important;
}

.modal-backdrop {
    z-index: 5040 !important;
}

.modal-body:has(#temporalItemsArea) {
    overflow-y: auto;
    max-height: 60vh;
}

#predefinedShift tr:nth-of-type(2) td {
    border-top: none !important; 
}

.alert-rule-filter {
    display: flex; 
    gap: 10px; 
    align-items: center;
}

.alert-rule-filter span:first-child {
    width:20px;
}

.alert-rule-filter span:not(:first-child) {
    flex: 1;
}

/*
 * Overwritten breadcrumbs.css classes
 */

.breadcrumb-titles {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.breadcrumb-titles small {
    flex: 1;
    display: flex;
    align-items: center;
}

.breadcrumb-titles small::before {
    content: '';
    border-left: 1px solid #CCC;
    margin-right: 10px;
    height: 24px;
}