body {
    margin: 0;
}

.css--ecm_project {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.css--ecm_page {
    width: 100vw;
    max-height: 100vh;
    position: absolute;
    margin: auto;
    margin-top: 0;
    padding-top: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

    .css--ecm_page img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .css--ecm_page svg {
        position: absolute;
    }

.small-chart .highcharts-point {
    display: none;
}

/* label {
display: block;
} */
.ecm-scada-label {
    display: block;
}

.ecm-scada-btSv {
    color: #eaeaf5;
}

.ecm-scada-btVyroba {
    color: rgb(51, 242, 24);
}

.ecm-scada-btSpotreba {
    color: rgb(244, 197, 31);
}

.ecm-scada-btSobestacnost {
    color: rgb(244, 255, 0);
}

.ecm-scada-btPlyn {
    color: rgb(244, 255, 0);
}

.ecm-scada-btVoda {
    color: rgb(0, 198, 255);
}

.ecm-scada-btBaterie {
    color: #00ffff;
}

.ecm-scada-bc {
    color: #56567F;
}

.ecm-scada-border {
    border: 1px solid #56567F;
}

.ecm-scada-bcDiv {
    background-color: #56567F;
}

.ecm-scada-bpZahlavi {
    background-color: rgb(58, 57, 75);
}

.ecm-scada-bgHodnoty {
    background-color: rgb(58, 57, 75);
}

.ecm-scada-bcHodnoty {
    background-color: #56567F;
}

.ecm-scada-boxZahlavi {
    color: #eaeaf5;
    background-color: rgb(58, 57, 75);
    border: 1px solid #56567F;
}

.ecm-scada-bgPrechod {
    background-image: linear-gradient(to right, rgb(19, 19, 29), rgb(48, 48, 70), rgb(19, 19, 29));
}

.ecm-scada-bgPrechod2 {
    background-image: linear-gradient(to right, rgb(19, 19, 29)rgb(35, 35, 53), rgb(19, 19, 29));
}

.ecm-scada-bgPrechodHlavni {
    background-image: radial-gradient(rgb(26, 26, 44), rgb(21, 21, 36), rgb(15, 15, 24), rgb(15, 15, 24));
}


.ecm-bgPrechodHlavni {
    background-image: radial-gradient(rgb(26, 26, 44), rgb(21, 21, 36), rgb(15, 15, 24), rgb(15, 15, 24));
}

.ecm-scada-bgPrechodHlavniBody {
    background-image: radial-gradient(rgb(26, 26, 44), rgb(21, 21, 36), rgb(15, 15, 24), rgb(15, 15, 24));
}

.ecm-scada-WhiteBorder {
    border: 1px solid #ffff;
}

.ecm-scada-NonePointerEvents {
    pointer-events: none;
}

/* Input Number Marek 01.11.2022*/

/*.ecm-scada-InputNumber {
    border-radius: 1.2vh;
    background-color: rgb(58, 57, 75);
}


    .ecm-scada-InputNumber input[type="number"] {
        outline: none;
        border-style: none;
        color: #00ffff;
    }

    .ecm-scada-InputNumber input[type="number"], value {
        background-color: rgb(58, 57, 75);
    }

        .ecm-scada-InputNumber input[type="number"]::-webkit-textfield-decoration-container {
            align-items: center;
            display: flex !important;
            flex-direction: column !important;
            -webkit-user-modify: read-only !important;
            content: none !important;
            writing-mode: inherit !important;
        }*/

/* ********************** */
/* **** Input Number **** */
/* ********************** */

.ecm-scale-hover-button-effect:hover {
    transform: scale(1.05);
}

.ecm-scada-InputNumber {
    border-radius: 1.2vh;
    background-color: rgb(58, 57, 75);
    color: #00ffff;
}


    .ecm-scada-InputNumber input[type="number"] {
        outline: none;
        border-style: none;
        color: #00ffff;
    }

.ecm-scada-InputNumber-for-table input[type="number"] {
    outline: none;
    border-style: none;
    color: #ffa600;
    width: 100%;
    height: 100%;
}

.ecm-scada-InputNumber input[type="number"], value {
    background-color: rgb(58, 57, 75);
    border-radius: 1.2vh;
}



.ecm-scada-InputNumber-for-table input[type="number"], value {
    background-color: transparent;
}


    .ecm-scada-InputNumber input[type="number"]::-webkit-textfield-decoration-container, .ecm-scada-InputNumber-for-table input[type="number"]::-webkit-textfield-decoration-container {
        align-items: center;
        display: flex !important;
        flex-direction: column !important;
        -webkit-user-modify: read-only !important;
        content: none !important;
        writing-mode: inherit !important;
    }

.ecm_edit_value_container input::-webkit-outer-spin-button,
.ecm_edit_value_container input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Konec Input Number Marek 01.11.2022*/

.js--ecm-grouping-menu {
    position: absolute;
    display: flex;
    width: 80%;
    height: 25px;
    color: var(--ecm-dashboard-BT-kartaGrafLista);
    justify-content: flex-end;
    padding-right: 5px;
    border-right: 1px solid var(--ecm-hlMenu-BI-vpravo);
}

    /*.ecm-dashboard-kartaGrafLista-nazevGrafu {
    padding-top: 5px;
}*/

    .js--ecm-grouping-menu ul li {
        list-style: none;
        display: inline;
        padding: 7px;
        padding-bottom: 4px;
        text-decoration: none;
        font-size: 15px;
    }

    .js--ecm-grouping-menu ul {
        cursor: pointer;
        padding: 0;
    }

.height-font {
    font-size: 12px;
    /* background-color: red; */
}

.js--ecm-grouping-menu-responsive {
    display: none;
    border: none;
    outline: none;
    height: calc(1.35em + 0.55rem + 2px);
    padding: 0.355rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    /*border: 1px solid #ced4da;*/
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.label-text-responsive {
    display: none;
}

/***************** Označení *************************/

.js--ecm-grouping-selection {
    border-bottom: 1px solid var(--ecm-karta-BT-jednotka);
    color: var(--ecm-karta-BT-jednotka);
}

.js--ecm-grouping:hover {
    color: var(--ecm-karta-BT-jednotka);
}

@media only screen and (max-width: 2680px) {
    .ecm-scada-InputNumber {
        font-size: 1vw !important;
        line-height: 1vw !important;
    }
}

@media only screen and (max-width: 1813px) {
    .js--ecm-grouping-menu {
        width: 75%;
    }
}


@media only screen and (max-width: 1621px) {
    .js--ecm-grouping-menu {
        width: 70%;
    }
}

@media only screen and (max-width: 1263px) {
    .js--ecm-grouping-menu {
        width: 65%;
    }
}

@media only screen and (max-width: 1143px) {
    .js--ecm-grouping-menu {
        width: 60%;
    }
}

@media only screen and (max-width:1044px) {

    .js--ecm-grouping-menu-default {
        display: none;
    }

    .js--ecm-grouping-menu-responsive {
        display: block;
    }
}

@media only screen and (max-width:1012px) {

    .js--ecm-grouping-menu {
        width: 55%;
    }
}


@media only screen and (max-width:904px) {

    .js--ecm-grouping-menu {
        width: 50%;
    }
}

@media only screen and (max-width:827px) {

    .js--ecm-grouping-menu {
        width: 47%;
    }

    .js--ecm-grouping-menu-responsive {
        padding: 0.2rem 0.3rem;
    }
}

@media only screen and (max-width:768px) {

    .js--ecm-grouping-menu {
        width: 60%;
    }
}

@media only screen and (max-width:750px) {

    .js--ecm-grouping-menu {
        width: 55%;
    }
}

@media only screen and (max-width: 500px) {
    .ecm-scada-InputNumber {
        font-size: 1.4vw !important;
        line-height: 1.4vw !important;
    }
}

@media only screen and (max-width:665px) {

    .js--ecm-grouping-menu {
        width: 50%;
    }
}

@media only screen and (max-width:604px) {

    .js--ecm-grouping-menu {
        width: 45%;
    }
}

@media only screen and (max-width:576px) {

    .js--ecm-grouping-menu {
        width: 53%;
    }

    .label-text {
       
        display: none;
    }

    .label-text-responsive {
        display: flex;
    }
}





.ecm_prehledyHoverEfect {
    display: none;
}

.ecm_indicatorLight:hover {
    transform: scale(1.2);
    transition: all 300ms ease-in-out;
}

.ecm_button_title_effect:hover {
    transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1);
    background-color: #0f0f18;
    transition-delay: .15s;
    box-shadow: 0 0 2px 0 #7cfc00 inset, 0 0 11px 2px #7cfc00;
    color: #7efc00c2;
}

.ecm_button_title_effect {
    color: white;
}

.ecm-scada-InputNumber-for-table input[type="number"], value {
    background-color: transparent;
}

.ecm-scada-InputNumber input[type="number"]::-webkit-textfield-decoration-container, .ecm-scada-InputNumber-for-table input[type="number"]::-webkit-textfield-decoration-container {
    align-items: center;
    display: flex !important;
    flex-direction: column !important;
    -webkit-user-modify: read-only !important;
    content: none !important;
    writing-mode: inherit !important;
}

/************************/
/* button s svg grafikou*/
/************************/

.ecm-svgIconButton {
    border: 1px solid white;
    border-radius: 0.75vh;
}

.ecm-svgIconButton-hidden {
    display: none;
}

.ecm-svgIconButton-text {
    color: white;
}

.ecm-svgIconButton-style {
    background: #0f0f18ff;
    border: 1px solid #7cfc00;
    color: #7cfc00;
    transform: scale(0.9);
    transition: all 300ms;
}

/* ************************* */
/* effect s textem bez ikony */
/* ************************* */

.ecm_button_title_effect {
    color: white;
}

.ecm_button_title_effect:hover {
    transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1);
    background-color: #0f0f18;
    transition-delay: .15s;
    box-shadow: 0 0 2px 0 #7cfc00 inset, 0 0 11px 2px #7cfc00;
    color: #7efc00c2;
}

.ecm_link_two_button_one_title {
    color: #fff;
}

.ecm_link_two_button_one_title:hover {
    background-color: #0f0f18;
    transition-delay: .15s;
    text-align: center;
    color: #7cfc00;
    transition: all 300ms;
}

.ecm_two_button_one_title_effect {
    transition-delay: .15s;
    box-shadow: 0 0 2px 0 #7cfc00 inset, 0 0 11px 2px #7cfc00;
}

/* ************ */
/* button efect */
/* ************ */

.ecm-scale-hover-button-effect:hover {
    transform: scale(1.05);
}

.ecm-scale-hover-icon-effect:hover {
    transform: scale(1.3);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ecm-scada-InputNumber-for-table input[type="number"] {
    outline: none;
    border-style: none;
    color: #ffa600;
    width: 100%;
}

.ecm-scada-btTeplota {
    color: rgb(255, 85, 85);
}

.ecm-scada-btChlad {
    color: rgb(0, 170, 212);
}

/*
.ecm-buttonBateryContaienr {
    border: 1px solid #ffff;
    color: rgb(255, 255, 255);
 }
*/

.ecm_btn_scadaHome:hover {
    box-shadow: rgb(124, 252, 0) 0px 0px 2px 0px inset, rgb(124, 252, 0) 0px 0px 11px 2px;
    background-color: rgb(15, 15, 24);
}

.ecm-buttonBateryContaienr, .ecm-buttonFVEsetingContainer {
    border: 1px solid #ffff;
    color: rgb(255, 255, 255);
}

/* ************ */
/* kalorimetr */
/* ************ */

.ecm_prepinani_kalorimetru.active {
    display: block;
    color: rgb(51, 242, 24);
}

.ecm_prepinani_kalorimetru.active-background {
    background-color: #000000;
    border-radius: 1vh 0 0 0;
}

.ecm-scada-btSvSecondary {
    color: #7c7c7cff;
}


/* ********************** */
/* **** Input range **** */
/* ********************** */


.ecm_ac_range-slider .ecm_ac-slider {
    -webkit-appearance: none;
    height: 3vw;
    border-radius: 1.5vh;
    background: #0f0f0f;
    box-shadow: inset 0.01vw -0.01vw 0.01vw #56567F, inset 3vw 3vw 6vw #000;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
}

.ecm_ac_range-slider .ecm_ac-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.8vw;
    height: 0.8vw;
    background-color: #00ffff;
    border-radius: 50%;
    z-index: 100;
    cursor: pointer;
}

/*-------------------------------------------*/
/*---------------Input checkbox -------------*/
/*-------------------------------------------*/


.ecm_containerInputCheckbox input[type="checkbox"] {
    margin: 8%;
    position: relative;
    width: 80%;
    height: 60%;
    -webkit-appearance: none;
    background: linear-gradient(0deg, #333, #000);
    outline: none;
    border-radius: 20px;
    background: linear-gradient(0deg, #e65a22, #851502);
    box-shadow: 0 0 0 0.1vw #353535, 0 0 0 0.1vw #3e3e3e, inset 0 0 10px rgba(0,0,0,1);
    cursor: pointer;
}

.ecm_containerInputCheckbox input:checked[type="checkbox"]:nth-of-type(1) {
    background: linear-gradient(0deg, #70e622, #039b36);
    box-shadow: 0 0 0 0.1vw #353535, 0 0 0 0.1vw #3e3e3e, inset 0 0 0.1vw rgba(0,0,0,1);
}

.ecm_containerInputCheckbox input[type="checkbox"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 101%;
    background: linear-gradient(0deg, #000, #6b6b6b);
    border-radius: 20px;
    box-shadow: 0 0 0 0.1vw #232323;
    transform: scale(.9,.9);
    transition: .5s;
}



.ecm_containerInputCheckbox input:checked[type="checkbox"]:before {
    left: 0;
}


.ecm_containerInputCheckbox input:checked[type="checkbox"]:after {
    left: 110%;
}

/* ****************************************************** */
/* styly k buttonu (aktivní button na onklik) pro kotelny */
/* ****************************************************** */

.ecm_active-bt-br {
    box-shadow: 0 0 2px 0 #7cfc00 inset, 0 0 11px 2px #7cfc00;
    color: #7efc00c2;
    background-color: #0f0f18;
    transition: 0.3s;
}

.ecm_active-bt-br:hover {
    color: #ffffffc2;
    scale: 1.1;
}

.ecm_inactive-bt-br {
    border: 1px dashed rgba(255, 255, 255, 0.178);
    background-color: #1d1d2c;
    color: #7c7c7cff;
    transition: 0.3s;
}

.ecm_inactive-bt-br:hover {
    color: white;
}

.ecm_check_val-bt-br {
    box-shadow: transparent;
    color: #ffffffc2;
    background-color: #0f0f18;
    transition: 0.3s;
    box-shadow: none;
}

/* ***************** */
/* button two in one */
/* ***************** */


.ecm_inactivePartButton {
    color: white;
    text-align: center;
}

.ecm_inactivePartButton:hover {
     color: #7efc00c2;
     background-color: #000000;
     border-radius: 1.5vh;
}

/* ***************** */
/*     Publicity     */
/* ***************** */

.centerBigRegular {
    text-align: center;
    font-family: 'Segoe UI Regular';
    font-weight: normal;
    font-size: 58px;
    color: white;
    display: block;
}

.leftMediumRegular {
    text-align: left;
    font-family: 'Segoe UI Regular';
    font-weight: normal;
    font-size: 32px;
    color: white;
    display: block;
}

.centerMediumRegular {
    text-align: center;
    font-family: 'Segoe UI Regular';
    font-weight: normal;
    font-size: 32px;
    color: white;
    display: block;
}

.rightMediumRegular {
    text-align: right;
    font-family: 'Segoe UI Regular';
    font-weight: normal;
    font-size: 32px;
    color: white;
    display: block;
}

.rightLight {
    text-align: right;
    font-family: 'Segoe UI Light';
    font-weight: normal;
    font-size: 78px;
    color: #33F218;
    display: block;
}

.leftLight {
    text-align: left;
    font-family: 'Segoe UI Light';
    font-weight: normal;
    font-size: 58px;
    color: #33F218;
    display: block;
}

/* ********************************** */
/* **** Select dynamicWeb SCADY ***** */
/* ********************************** */

.ecm_select-item-label {
    cursor: pointer;
}


.ecm_select-item-svg-container {
    border-radius: 0.75vh;
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: 0.1s;
}

.ecm_select-item-svg-container:hover {
    background-color: white;
    color: black;
}

.ecm_select-label-value {
    cursor: pointer;
}

.ecm_select-svg-container-value {
    cursor: pointer;
    border-radius: 1.5vh;
    transition: 0.1s;
}

.ecm_select-svg-container-value:hover {
    background-color: #3e3e50;
}

.ecm_select-list-view {
    display: block;
}

.ecm_select-list-hidden {
    display: none;
}

/* ********************************* */
/* **** prepinani bat stridacu ***** */
/* ********************************* */

.ecm_battery-toggle_button {
    background-color: rgb(34, 34, 51);
    border: 1px solid #56567F;
    cursor: pointer;
}

.ecm_battery-toggle_button:hover {
    background-color: #12121b;
}

.ecm_bat-str-toggle-btn-label {
    cursor: pointer;
}

.ecm_battery-toggle_button-active {
    background-color: black !important;
    color: #7efc00c2 !important;
}


.ecm_bat-stridace-hidden {
    display: none;
}


/* ******************************************* */
/* **** Management teploty v mistnostech ***** */
/* ******************************************* */

.ecm_temperature-container {
    top: 34.5%;
    left: 42.9%;
    position: absolute;
    width: 2.3%;
    height: 1.8%;
    background-color:  rgb(58, 57, 75);
    border-radius: 0.65vh;
    transition: 0.2s;
    cursor: pointer;
}

.ecm_temperature-container:hover {
    scale: 1.1;
    background-color: rgb(93, 93, 104);
}

.generate-side-menu {
    font-family: 'Segoe UI Regular';
    font-weight: normal;
}

.generate-side-menu ul li {
    padding: 8px 3px 8px 3px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
}

.generate-side-menu ul li:hover {
    background-color: white;
    color: black;
}

.li-item-background {
    background-color: white;
    color: black;
}

.ecm_navigation-container-svg:hover {
    background-color: #27367a !important;
}

.ecm-button-navlist {
    transition: 0.2s;
}

.ecm-button-navlist svg:hover {
    background-color: #27367a !important;
    fill: #FFF !important;
}

.ecm_temperature-container-btn-close {
    transition: 0.2s;
    border-radius: 25vh;
}

.ecm_temperature-container-btn-close svg:hover {
    background-color: #27367a !important;
    fill: #FFF !important;
    border-radius: 25vh;
}

.close-btn {
    transition: 0.2s;
}

.close-btn svg:hover {
    background-color: #27367a !important;
    fill: #FFF !important;
    border-radius: 25vh;
}

.ecm_low-temperature-border-container {
    border: 2px solid rgba(0, 153, 255, 0.979);
}

.ecm_hight-temperature-border-container {
    border: 2px solid rgb(197, 64, 2);
}

.ecm_ok-temperature-border-container {
    border: 1px solid rgb(117, 245, 66);
}

/*hlavice ventilu*/

.hlavice-valve-base {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.hlavice-valve-open {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ***************************************************************************** */
/* **** Grafy hromadny výběr styly modle Mervisu jedna se jen pro viz. Epc ***** */
/* ***************************************************************************** */



#bulkChartsContainer .highcharts-yaxis-grid .highcharts-grid-line {
    stroke: #d2d2d278 !important;
    stroke-width: 1px;
}


#bulkChartsContainer .highcharts-xaxis-grid .highcharts-grid-line {
    stroke: #d2d2d278 !important;
    stroke-width: 1px;
}


#bulkChartsContainer .highcharts-minor-grid .highcharts-grid-line {
    stroke: #7f857e5c!important;
    stroke-opacity: 0.5;
}


#bulkChartsContainer .highcharts-background {
    background-color: #fff !important;
    fill: #fff !important;
}

#bulkChartsContainer .highcharts-legend-item {
    fill: black !important;
    color: black !important;

}

#bulkChartsContainer .container-values-color-chart .highcharts-text-outline{
    fill: black !important;

}

#bulkChartsContainer text{
    fill: black !important;
    color: black !important;

}
#bulkChartsContainer .highcharts-axis-labels text {
    fill: black !important;
    color: black !important;
}