html {
	height: 100%;
	font-size: 62.5%;
}
body {
	/*height: 100%; causes unnecessary vertical scrollbar i.e. on issues page*/
	background: none;
	font-size: 1.6rem;
	padding-right: 0px !important;
}

/*https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2*/
body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus,
body:not(.user-is-tabbing) [role="button"] {
    outline: none;
}

.finance-tab-invalid {
    border: 1px solid red !important;
}
.finance-tab-saved {
    border: 1px solid #8acb68;
}

.td-valign-middle {
    vertical-align: middle !important;
}
#mana-navbar {
    font-size: 1.4rem;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 40px;
    min-height: 40px;
    /*border-bottom: 1px solid #000000;*/
    /*background: url(/images/bg6.jpg) no-repeat top center fixed;
	background-size: 100% auto;*/
    background-color: #255783;
}

#systemportfolio-tabs-container {
}

#portfolio-history-tab-header {
    margin-left: 20px !important;
}

#portfolio-history-tab-header a:first-child {
    visibility: collapse;
}
#portfolio-history-tab-header div {
    text-transform: uppercase;
    font-size: 10pt;
    color: #767676;
    margin: 8px 0 3px 0;
}
#portfolio-history-tab-header a {
    border: none;
    padding: 0;
    font-size: 10pt;
    text-decoration: underline;
}
#portfolio-history-tab-header a i {
    margin-right: 5px;
}

#systemportfolio-tabs {
    width: 190px;
    position: fixed;
    top: 40px;
    background: url(/images/sidebar-bg.gif) no-repeat bottom left fixed;
    background-size: auto;
    background-color: #f5f5f5;
    z-index: 1003; /*Must be larger than 1001, which is the x-index of floated table headers see http://mkoryak.github.io/floatThead/#options */
    /* This timing applies on the way IN */
    transition: left 0.5s ease-out 0s;
    left: 0;
    opacity: 1;
    box-shadow: none;
}
#systemportfolio-tabs.menu-hidden {
    /* This timing applies on the way OUT */
    transition: left 0.5s ease-in 0s;
    left: -190px;
    transition: opacity 0s ease 0.5s;
    opacity: 0;
}
#systemportfolio-tabs.menu-hidden.menu-popup {
    /* This timing applies on the way OUT */
    left: 0px;
    transition: opacity 0.3s ease-in 0s;
    opacity: 1;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

#systemportfolio-tabs-container > .tab-content {
    padding: 0;
    margin-left: 190px;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    min-height: inherit !important;
    transition: margin-left 0.5s ease-out 0s;
}
#systemportfolio-tabs-container > .tab-content.menu-hidden {
    transition: margin-left 0.5s ease-in 0s;
    margin-left: 0;
}

.kv-thead-float {
    border-bottom: 1px solid #dddddd;
}

#mm-logo2 {
    position: fixed;
    bottom: 15px;
    left: 15px;
    z-index: 10000;
    display: none;
    /*opacity: 0.4;
    filter: alpha(opacity=40);*/ /* For IE8 and earlier */
}
@media only screen and (min-height: 840px) {
    #mm-logo2 {
        display: block;
    }
}

    #mm-topbar-logo, #mm-topbar-text {
        display: none;
        z-index: 1001;
        position: fixed;
    }
#mm-topbar-logo-text {
    display: none;
}

#mm-topbar-logo {
    top: 1px;
    z-index: 1001;
}

    #mm-topbar-text {
        font-family: 'helvetica', arial, sans-serif;
        font-size: 28px;
        padding-top: 1px;
        height: auto;
        color: #ffffff;
        top: 0px;
        left: calc(50% - 140px);
        /*text-shadow: 2px 2px 3px rgba(13,44,72,0.7), 0px -1px 3px rgba(254,239,176,0.8);*/
    }

    @media only screen and (min-width: 1100px) {

        #mm-topbar-logo-text {
            display: block;
        }
        #mm-topbar-logo {
            left: calc(50% - 25px);
            display: block;
        }
    }

    @media only screen and (min-width: 1350px) {
        #mm-topbar-logo {
            left: calc(50% - 200px);
            display: block;
        }

        #mm-topbar-text {
            display: block;
            left: calc(50% - 140px);
        }
    }

    @media only screen and (max-width: 1800px) {
        .system-panel-heading {
            min-height: 96px;
        }
    }

    #jumpto-selector-container-div {
        float: left;
        position: fixed;
        top: 5px;
        left: 100px;
        z-index: 1001;
    }

#titlebar-logo-subtitle,
#npc-logo-text,
#enestar-topbar-block,
#rss-topbar-block {
    visibility: collapse;
    /*        text-shadow: 1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, -1px -1px 0 #ffffff, 1px 0px 0 #ffffff, 0px 1px 0 #ffffff, -1px 0px 0 #ffffff, 0px -1px 0 #ffffff;*/
}

    @media only screen and (min-width: 900px) {
        #npc-logo-text,
        #enestar-topbar-block,
        #rss-topbar-block {
            visibility: visible;
        }
    }

    @media only screen and (min-width: 1400px) {
        #jumpto-selector-container-div {
            left: 200px;
        }

        #titlebar-logo-subtitle {
            visibility: visible;
        }
    }

    #jumpto-selector-container-div > div {
        display: inline-block;
    }

#jumpto-selector-container-div .select2-container--krajee.select2-container--open .select2-selection,
#jumpto-selector-container-div .select2-container--krajee-bs3.select2-container--open .select2-selection,
#jumpto-selector-container-div .select2-container--krajee .select2-selection:focus,
#jumpto-selector-container-div .select2-container--krajee-bs3 .select2-selection:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 4px;
    background-color: #337ab7 !important;
}

    #jumpto-selector-container-div .select2-container .select2-selection:hover {
        cursor: pointer;
        border-radius: 4px;
        background-color: #337ab7 !important;
    }

    #jumpto-selector-container-div .select2-container .select2-selection .select2-selection__arrow b {
        border-color: #fff transparent transparent transparent !important;
    }

    #jumpto-selector-container-div .select2-container .select2-selection:hover .select2-selection__arrow b,
    #jumpto-selector-container-div .select2-container .select2-selection:focus .select2-selection__arrow b,
    #jumpto-selector-container-div .select2-container--open .select2-selection .select2-selection__arrow b {
        border-color: #F49A2B transparent transparent transparent !important;
        border-width: 5px 4px 0 4px;
    }

    #jumpto-selector-container-div .select2-container .select2-selection .select2-selection__arrow {
        border-left: none !important;
    }

    #jumpto-selector-container-div .select2-selection .select2-selection__placeholder {
        color: #ffffff;
    }

    #jumpto-selector-container-div .select2-container .select2-selection:hover .select2-selection__placeholder,
    #jumpto-selector-container-div .select2-container .select2-selection:focus .select2-selection__placeholder,
    #jumpto-selector-container-div .select2-container--open .select2-selection .select2-selection__placeholder {
        color: #F49A2B;
    }



    #mm-logo {
        position: fixed;
        bottom: 6px;
        left: 15px;
        z-index: 10000;
    }

    #mm-logo:hover {
        opacity: 0;
        filter: alpha(opacity=0); /* For IE8 and earlier */
    }

    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin: 6px 0 0 226px !important;
        font-size: 23px;
        font-size: 23px;
        padding: 5px;
        height: auto;
    }

    .systemportfolio-stalker {
        background: url(/images/bg1.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding-top: 10px;
        z-index: 5000 !important;
    }

    .wrap {
        min-height: 100%;
        height: auto;
        margin: 0 auto -60px;
        padding: 0 0 60px;
    }

    .wrap > .container {
        padding: 70px 15px 20px;
    }

    .footer {
        margin-top: 20px;
        height: 40px;
        border-top: 1px solid #3b3762;
        padding-top: 10px;
        background: url(/images/bg4.jpg) no-repeat bottom center fixed;
        background-size: 100% auto;
        /*background: rgba(0, 0, 0, 0.48);*/
        /*background: #3b3762; /* For browsers that do not support gradients * /
background: -webkit-linear-gradient(rgba(39,11,40,0.5),rgba(99,106,151,0.5)); /*Safari 5.1-6* /
background: -o-linear-gradient(rgba(39,11,40,0.5),rgba(99,106,151,0.5)); /*Opera 11.1-12* /
background: -moz-linear-gradient(rgba(39,11,40,0.5),rgba(99,106,151,0.5)); /*Fx 3.6-15* /
background: linear-gradient(rgba(39,11,40,0.5),rgba(99,106,151,0.5)); /*Standard* /*/
    }

    .footer p {
        color: white;
        margin-bottom: 5px;
    }

    .white {
        color: white;
    }

    .panel-title a,
    .panel-title a:hover {
        text-decoration: none;
    }

    .panel-group .subsystem {
        margin-top: 5px;
        margin-left: 10px;
    }

    .subsystem .subsystem {
        margin-top: 5px;
        margin-left: 27px;
    }

    .subsystem-flexbox {
        display: flex;
    }

    .subsystem:not(:last-child) {
        border-left: 1px dashed #CCCCCC;
    }

    .subsystem > .subsystem-flexbox > .subsystem-indent-block {
        width: 10px;
        height: 45px;
        border-bottom: 1px dashed #CCCCCC;
        margin: 3px;
    }

    .subsystem:last-child > .subsystem-flexbox > .subsystem-indent-block {
        border-left: 1px dashed #CCCCCC;
        margin-left: 0;
        width: 13px;
        margin-top: -5px;
    }

    .subsystem > .subsystem-flexbox > div.panel {
        width: 100%;
        margin-bottom: 0;
    }

    /* Override popover automatically showing scrollbar */
    .modal-open {
        overflow-y: auto !important;
        padding-right: 0px !important;
    }

    body.waiting * {
        cursor: progress;
    }

    .form-control-nomargin {
        margin: 0 !important;
    }

    .form-group-unlabeled-input {
        padding-top: 10px;
    }

    #site-modal div.modal-content {
        background-color: #ddd;
    }

    #site-modal div.modal-header,
    #site-entity-modal div.modal-header {
        background-color: #337ab7;
        font-weight: bold;
        color: white;
        border-radius: 6px 6px 0 0;
    }

    #site-modal div.modal-header > button.close,
    #site-entity-modal div.modal-header > button.close {
        color: white;
        opacity: 0.9;
        text-shadow: 0 1px 0 #000;
    }

    #site-modal div.modal-body,
    #site-entity-modal div.modal-body {
        background-color: white;
    }

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

    #site-entity-modal .modal-footer {
        padding: 5px 15px 15px 15px;
        border: none;
        background-color: white;
    }

    button.loading-button {
        transition: padding-left 0.4s linear;
        -webkit-transition: padding-left 0.4s linear;
        -moz-transition: padding-left 0.4s linear;
        -o-transition: padding-left 0.4s linear;
    }

    button.loading-button div {
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.2);
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        transition: background 0.4s ease;
        -webkit-transition: background 0.4s ease;
        -moz-transition: background 0.4s ease;
        -o-transition: background 0.4s ease;
    }

    button.loading-button div > i {
        position: absolute;
        top: 50%;
        left: 7px;
        margin-top: -6px;
    }

    button.loading-button.loading {
        position: relative;
        padding-left: 24px;
    }

    button.loading-button.loading div {
        visibility: visible;
    }

    #site-entity-modal div.modal-content {
        background-color: white;
    }

    #site-entity-modal .modal-body {
        padding: 15px 15px 0px 15px;
    }

    #site-entity-modal form:not(.kv-editable-form) .panel {
        border-left: 5px solid #337ab7;
        background-color: #f5f5f5;
        border-radius: 0;
        border-right: none;
        border-bottom: none;
        border-top: none;
        margin-bottom: 10px;
    }

    #site-entity-modal form:not(.kv-editable-form) .panel .panel-heading {
        font-weight: bold;
        padding: 8px 8px 4px 8px;
        margin-bottom: -10px;
        color: #3b7aba;
        border: none;
    }

    #site-entity-modal form:not(.kv-editable-form) .panel .panel-heading h4 {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 9pt;
    }

    #site-entity-modal form:not(.kv-editable-form) .panel .panel-body {
        border: none;
    }

    .btn-open-site-entity-modal {
        border-radius: 15px;
        width: 30px;
        padding: 5px;
        background: none;
        border: none;
        color: white;
        font-size: 14pt;
        line-height: 1;
        vertical-align: top;
    }

    .btn-open-site-entity-modal:hover {
        background-color: #e89b0a;
        color: white;
    }

    .btn-open-site-entity-modal-white-small {
        border-radius: 11px;
        width: 22px;
        height: 22px;
        padding: 5px;
        font-size: 8pt;
        line-height: 1;
        vertical-align: top;
        color: #333;
        background-color: unset;
        border: unset;
        /*border: 1px solid #ccc;*/
        position: relative;
        top: -4px;
        margin-bottom: -4px;
    }

    .btn-open-site-entity-modal-white-small:hover {
        color: #333;
        background-color: #e89b0a;
        border-color: #adadad;
    }

    #site-entity-modal div.kv-editable-inline form div.panel {
        margin: 0;
        border: none;
        background: none;
        box-shadow: none;
    }

    #site-entity-modal div.kv-editable-inline input.kv-editable-input {
        padding: 0 5px;
        height: 30px;
        margin-top: 2px;
    }


    /** Mana-Tooltip classes */

    [data-mana-tooltip] {
        position: relative;
        display: inline-block;
        background-image: url('/images/lightbulb1.png');
        background-repeat: no-repeat;
        background-position: right;
        padding-right: 16px;
    }

    /** Emitting chat bubble arrow  */
    [data-mana-tooltip]:hover:after {
        position: absolute;
        bottom: 150%;
        left: 50%;
        margin-left: -5px;
        width: 0;
        border-top: 5px solid #337AB7;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: " ";
        font-size: 0;
        line-height: 0;
        margin-bottom: -15px;
        text-decoration: none;
    }

    /** IE fix: text-decoration can be changed in hover state only if it is present in normal state */
    [data-mana-tooltip]:before {
        text-decoration: underline;
    }
    /* Position tooltip above the element */
    [data-mana-tooltip]:hover:before {
        text-decoration: none;
        position: absolute;
        bottom: 150%;
        left: 50%;
        margin-bottom: -10px;
        margin-left: -110px;
        padding: 7px;
        width: 220px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #337AB7;
        color: #fff;
        content: attr(data-mana-tooltip);
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.2;
        display: inline-block; /** IE fix */
    }

    /** Allows mana-tooltip to be displayed above the grid */
    #systems-list-grid-1-container .kv-thead-float {
        overflow: visible !important;
    }

    .disqus-comment-count {
        background: #FDCF0B;
        border-radius: 7px;
        border: 1px solid #3b7bba57;
        padding: 1px 4px;
        font-size: 10px;
        font-family: 'Arial', sans-serif;
        margin: 0 0 5px 0;
        vertical-align: top;
    }

    .table-hover > tbody > tr:hover {
        background-color: #ffffe5;
    }

    .reload-button {
        position: absolute;
        right: 0;
        top: 4px;
        border: none;
        color: #D2D2D2;
        background: none;
        padding: 7px;
        margin: 0;
    }

    .reload-button:hover {
        color: #337ab7;
    }

    .issues-card {
        background-color: #fafafa !important;
    }

    .issues-card > table > tbody > tr:nth-child(1) > td:nth-child(1),
    .issues-card > table > tbody > tr:nth-child(1) > td:nth-child(2),
    .issues-card > table > tbody > tr:nth-child(1) > td:nth-child(3) {
        width: 24%;
    }

    .issues-card > table > tbody > tr:nth-child(1) > td:nth-child(4),
    .issues-card > table > tbody > tr:nth-child(1) > td:nth-child(5) {
        width: 14%;
    }

    .issues-card > table > tbody > tr:nth-child(2) > td {
        border-top: none;
        padding-top: 0;
    }

    .issues-card > table > tbody > tr > td label {
        font-size: 0.7em;
        text-transform: uppercase;
        float: left;
        color: #b2b2b2;
        font-weight: normal;
    }

    .issues-card > table > tbody > tr > td label + div {
        float: left;
        clear: left;
    }

    .issues-card > table > tbody > tr > td label + div > span {
        display: block;
        font-size: 0.8em;
    }

    .grid-filter-search input {
        display: inline-block !important;
        width: auto !important;
        height: 34px;
    }

    .grid-filter-search .input-group-addon {
        display: inline-block !important;
        width: auto !important;
        height: 34px !important;
        cursor: pointer;
        color: #333;
        background-color: #fff;
        border-color: #ccc;
    }

    .grid-filter-search .input-group-addon:hover {
        color: #333;
        background-color: #e6e6e6;
    }

    .grid-filter-search .input-group-addon:focus {
        color: #333;
        background-color: #e6e6e6;
    }

    .grid-filter-search .input-group-addon:active {
        color: #333;
        background-color: #e6e6e6;
    }

    .displayvalue-addon {
        margin: 0 5px 0 5px;
    }

    @media only screen and (min-width: 1200px) {
        .no-padding-past-bootstrap-lg {
            padding-left: 0;
            padding-right: 0;
        }
    }


    .form-hanging > div {
        display: flex;
    }

    .form-hanging > div > div:last-child {
        margin: 5px 0 1em 1em;
    }

    .form-hanging > div > div:last-child label:not(:first-child) {
        margin-top: 0.7em;
    }

    .form-hanging .checkbox > label {
        margin-right: 15px;
    }

    .form-hanging .checkbox > label > input {
        margin-right: 7px;
    }

    .nav-sm.nav-pills > li > a,
    .nav-sm.nav-pills > li > a:hover,
    .nav-sm.nav-pills > li > a:focus {
        padding: 5px 7px;
        font-size: 0.8em;
    }

    .nav-sm .dropdown-item.active,
    .nav-sm .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #337AB7;
    }

.dropdown-item.level0 {
    font-weight: bold;
    padding-left: 1em;
    text-transform: uppercase;
}
.dropdown-item.level1 {
    font-weight: bold;
    padding-left: 1em;
}
.dropdown-item.level2 {
    padding-left: 2em;
}
.dropdown-item.level3 {
    padding-left: 3em;
}
.dropdown-item.level4 {
    padding-left: 4em;
}
.dropdown-item.level5 {
    padding-left: 5em;
}


.kv-all-select,
.kv-row-select {
    /*display: inline-flex;
cursor: pointer;*/
    position: relative;
}

    .kv-all-select input.select-on-check-all,
    .kv-row-select input.kv-row-checkbox {
        height: 25px;
        width: 25px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        border: 1px solid #DDDDDD;
        outline: none;
        transition-duration: 0.3s;
        background-color: #eee;
        cursor: pointer;
    }

    .kv-all-select input.select-on-check-all:checked,
    .kv-row-select input.kv-row-checkbox:checked {
        background-color: #2196F3;
    }

    .kv-all-select input.select-on-check-all:checked::after,
    .kv-row-select input.kv-row-checkbox:checked::after {
        content: "";
        position: relative;
        display: none;
        left: 8px;
        top: 3px;
        width: 7px;
        height: 14px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .kv-all-select input.select-on-check-all:checked::after,
    .kv-row-select input.kv-row-checkbox:checked::after {
        display: inline-block;
    }

    .kv-all-select input.select-on-check-all:active,
    .kv-row-select input.kv-row-checkbox:active {
        border: 2px solid #34495E;
    }

    .table > thead > tr > td.danger,
    .table > tbody > tr > td.danger,
    .table > tfoot > tr > td.danger,
    .table > thead > tr > th.danger,
    .table > tbody > tr > th.danger,
    .table > tfoot > tr > th.danger,
    .table > thead > tr.danger > td,
    .table > tbody > tr.danger > td,
    .table > tfoot > tr.danger > td,
    .table > thead > tr.danger > th,
    .table > tbody > tr.danger > th,
    .table > tfoot > tr.danger > th {
        background-color: #fff6cc;
    }

    .table-hover > tbody > tr > td.danger:hover,
    .table-hover > tbody > tr > th.danger:hover,
    .table-hover > tbody > tr.danger:hover > td,
    .table-hover > tbody > tr:hover > .danger,
    .table-hover > tbody > tr.danger:hover > th {
        background-color: #ffeb97;
    }

    @media only screen and (min-width: 992px) {
        .reload-dialog .modal-dialog {
            width: 900px;
        }
    }

    .rd-site, .rd-result {
        display: inline-block;
    }

    .rd-site {
        min-width: 44rem;
    }

    .highcharts-data-table table {
        font-size: 12.8px;
    }

    .highcharts-data-table thead th {
        border-bottom: 1px solid #F49A2B;
        color: #F49A2B;
    }

    .highcharts-data-table th,
    .highcharts-data-table td {
        padding: 0.2rem 1rem 0.2rem 0.5rem;
    }
    /*.highcharts-data-table td.number:before {
    content: "$";
}*/


.ppa-grid-1 .report_gen_failed + .popover .popover-content,
.reports-grid-1 .report_gen_failed + .popover .popover-content {
    font-size: 8pt;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}

[contentEditable=true]:empty:not(:focus):before {
    content: attr(data-text);
    color: #A39999;
}

.device-badge {
    margin-left: 5px;
    font-size: 7pt;
    font-family: system-ui, sans-serif;
    font-weight: normal;
    background-color: #4a79b5;
}

#systemportfolio-tabs .nav-link-text > i {
    margin-right: 10px;
}