:root {

    --bg-view-grid: #2F3231;
    --color-judul: #C7C7C7;
    --bg-hr: #464848;
    --color-dt: white;
    --color-dd: #AEAEAE;
    --brd-card-legend: #464848;
    --bg-card-legend: #2F3231;
    --color-fw-legen: #F4F4F2;
    --color-btn-view-detail: white;
    --brd-btn-view-detail: #737373;
    --bg-btn-view-detail: #3C3C3C;
    --color-dt-n: white;
    --brd-grid-di: #4A4A4A;
    --bg-grid-di: #2F3231;
    --bg-select-costum: #3C3C3C;
    --color-select-costum: white;
    --color-font-chart-value: white;
    --color-scroll-chart: white;
    --bg-btn-page: rgb(192, 192, 192);
    --color-btn-page: black;
    --bg-btn-page-hover: transparent;
    --color-btn-page-hover: rgb(192, 192, 192);
    --brd-dropdown: #8E8E8E;
    --color-ft-sts: #FFFFFF;
}

[data-theme="dark"] {

    --bg-view-grid: #2F3231;
    --color-judul: #C7C7C7;
    --bg-hr: #464848;
    --color-dt: white;
    --color-dd: #AEAEAE;
    --brd-card-legend: #464848;
    --bg-card-legend: #2F3231;
    --color-fw-legen: #F4F4F2;
    --color-btn-view-detail: white;
    --brd-btn-view-detail: #737373;
    --bg-btn-view-detail: #3C3C3C;
    --color-dt-n: white;
    --brd-grid-di: #4A4A4A;
    --bg-grid-di: #2F3231;
    --bg-select-costum: #3C3C3C;
    --color-select-costum: white;
    --color-font-chart-value: white;
    --color-scroll-chart: white;
    --bg-btn-page: rgb(192, 192, 192);
    --color-btn-page: black;
    --bg-btn-page-hover: transparent;
    --color-btn-page-hover: rgb(192, 192, 192);
    --brd-dropdown: #8E8E8E;
    --color-ft-sts: #FFFFFF;
}

.section {
    width: 100%;
    padding: 0.5rem;
    display: grid;
    grid-template-areas:
        "view-1 view-2"
        "view-1 view-3";
    grid-template-columns: 30% 69.5%;
    grid-template-rows: 46rem 15.5vh;
    grid-gap: 0.5rem;
}

:-webkit-full-screen .section {
    grid-template-rows: 53.2rem 14vh;
}

@media screen and (height: 1080px) {
    .section {
        grid-template-rows: 53.2rem 14vh;
    }
}

@media screen and (max-width: 1440px) {
    .section {
        grid-template-rows: 36.5rem 15.5vh;
    }
}

@media screen and (max-width: 1440px) and (height: 900px) {
    .section {
        grid-template-rows: 42.5rem 15.5vh;
    }
}


.view-1 {
    grid-area: view-1;
    background: var(--bg-view-grid);
    border-radius: 0.3rem;
    padding: 0.5rem;

    display: grid;
    grid-template-areas:
        "machine-description"
        "machine-information"
        "machine-performance";
    grid-template-columns: 100%;
    grid-template-rows: 21.5vh 34vh 34vh;
    grid-gap: 0.5rem;
}

@media screen and (max-width: 1440px) {
    .view-1 {
        grid-template-rows: 21.5vh 31vh 34vh;
    }
}

@media screen and (max-width: 1440px) and (height: 900px) {
    .view-1 {
        grid-template-rows: 21.5vh 28vh 38vh;
    }
}

.header-card {
    padding: 0.5rem;
    border-bottom: 1px solid var(--brd-grid-di);
    width: 100%;
}

.body-card {
    padding: 0.5rem;
    width: 100%;
}

.footer-card {
    position: absolute;
    padding: 0.5rem 0.5rem;
    border-top: 1px solid var(--brd-grid-di);
    bottom: 0rem;
    width: 100%;
}

.col-nc {
    flex: 0 0 auto;
    width: 40%;
}

.span-nc {
    border-radius: 0.2rem;
    padding: 0.2rem 0.4rem;
    background: #F54137;
    font-size: 1rem;
    color: #FFFFFF;
    position: absolute;
    font-weight: bold;
}


.col-na {
    flex: 0 0 auto;
    width: 40%;
}

.span-na {
    border-radius: 0.2rem;
    padding: 0.2rem 0.4rem;
    background: #EECC1A;
    font-size: 1rem;
    color: #303030;
    position: absolute;
    font-weight: bold;
}

.col-vd {
    flex: 0 0 auto;
    width: 20%;
}

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

    .col-nc {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-na {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-vd {
        display: none;
    }
}

.col-nc p,
.col-na p {
    font-size: 1rem;
    margin-bottom: 0rem;
    color: #FFFFFF;
    position: relative;
    left: 2.5rem;
}

@media screen and (height: 1080px) {

    .view-1 {
        grid-area: view-1;
        grid-template-rows: 20vh 35.1vh 35.1vh;
    }

}

.view-2 {
    grid-area: view-2;
    background: var(--bg-view-grid);
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.view-3 {
    grid-area: view-3;
    background: var(--bg-view-grid);
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.machine-description {
    grid-area: machine-description;
    border-radius: 0.5rem;
    border: 1px solid var(--brd-grid-di);
}

.machine-information {
    grid-area: machine-information;
    border-radius: 0.5rem;
    border: 1px solid var(--brd-grid-di);
}

.machine-performance {
    grid-area: machine-performance;
    border-radius: 0.5rem;
    border: 1px solid var(--brd-grid-di);

    position: relative;
}

.fw-judul {
    color: var(--color-judul);
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0px;
}

.fw-judul-2 {
    color: var(--color-judul);
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0px;
}

@media screen and (max-width: 1440px) {
    .fw-judul-2 {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 1440px) and (height: 900px) {
    .fw-judul-2 {
        font-size: 1.1rem;
    }
}

.hr-judul {
    background: var(--bg-hr);
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    height: 0.3rem !important;
    border-radius: 0.5rem;
}

.card-status {
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold
}

.cs-mp {
    border-radius: 0.2rem;
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold
}


@media screen and (max-width: 1440px) {
    .cs-mp {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 1440px) and (height: 900px) {
    .cs-mp {
        font-size: 1.1rem;
    }
}

.mp-default {
    border-radius: 0.2rem;
    border: 2px solid #686868;
    color: #686868;
    background: transparent;
}

/* Corrective */
.mp-cor-1 {
    border-radius: 0.2rem;
    border: 2px solid #585858;
    color: #FFFFFF;
    background: #585858;
}

.mp-cor-2 {
    border-radius: 0.2rem;
    border: 2px solid #38AAEB;
    color: #FFFFFF;
    background: #38AAEB;
}

.mp-cor-3 {
    border-radius: 0.2rem;
    border: 2px solid #C4C4C4;
    color: #000000;
    background: #C4C4C4;
}

.mp-cor-4 {
    border-radius: 0.2rem;
    border: 2px solid #FFEC05;
    color: #000000;
    background: #FFEC05;
}

.mp-cor-5 {
    border-radius: 0.2rem;
    border: 2px solid #FFEC05;
    color: #000000;
    background: #FFEC05;
}

.mp-cor-6 {
    border-radius: 0.2rem;
    border: 2px solid #FF7A00;
    color: #000000;
    background: #FF7A00;
}

.mp-cor-7 {
    border-radius: 0.2rem;
    border: 2px solid #4EA50C;
    color: #000000;
    background: #4EA50C;
}

.mp-cor-8 {
    border-radius: 0.2rem;
    border: 2px solid #297A40;
    color: #000000;
    background: #297A40;
}

.mp-cor-11 {
    border-radius: 0.2rem;
    border: 2px solid #297A40;
    color: #000000;
    background: #297A40;
}


/* Preventive */
.mp-prev-1 {
    border-radius: 0.2rem;
    border: 2px solid #585858;
    color: #FFFFFF;
    background: #585858;
}

.mp-prev-2 {
    border-radius: 0.2rem;
    border: 2px solid #C4C4C4;
    color: #000000;
    background: #C4C4C4;
}

.mp-prev-3 {
    border-radius: 0.2rem;
    border: 2px solid #FFEC05;
    color: #000000;
    background: #FFEC05;
}

.mp-prev-4 {
    border-radius: 0.2rem;
    border: 2px solid #4EA50C;
    color: #FFFFFF;
    background: #4EA50C;
}

.mp-prev-5 {
    border-radius: 0.2rem;
    border: 2px solid #297A40;
    color: #FFFFFF;
    background: #297A40;
}


/* Predictive */
.mp-pred-1 {
    border-radius: 0.2rem;
    border: 2px solid #585858;
    color: #FFFFFF;
    background: #585858;
}

.mp-pred-2 {
    border-radius: 0.2rem;
    border: 2px solid #FFEC05;
    color: #000000;
    background: #FFEC05;
}

.mp-pred-3 {
    border-radius: 0.2rem;
    border: 2px solid #FF7A00;
    color: #000000;
    background: #FF7A00;
}

.mp-pred-4 {
    border-radius: 0.2rem;
    border: 2px solid #C4C4C4;
    color: #000000;
    background: #C4C4C4;
}

.mp-pred-5 {
    border-radius: 0.2rem;
    border: 2px solid #FFEC05;
    color: #000000;
    background: #FFEC05;
}

.mp-pred-6 {
    border-radius: 0.2rem;
    border: 2px solid #4EA50C;
    color: #000000;
    background: #4EA50C;
}

.mp-pred-7 {
    border-radius: 0.2rem;
    border: 2px solid #297A40;
    color: #000000;
    background: #297A40;
}

.mp-pred-8 {
    border-radius: 0.2rem;
    border: 2px solid #e63434;
    color: #000000;
    background: #e63434;
}

.mi {
    width: 100%;
    display: grid;
    grid-template-areas:
        "img-mc info-mc";
    grid-template-columns: 30% 70%;
    grid-template-rows: 10.2rem;
    grid-gap: 1rem;
}

:-webkit-full-screen .mi {
    grid-template-rows: 12rem;
}

@media screen and (height: 1080px) {
    .mi {
        grid-template-rows: 12rem;
    }

    .cs-mp {
        margin-bottom: 1.2rem;
    }
}

@media screen and (max-width: 1440px) {
    .mi {
        grid-template-rows: 7rem;
    }
}

@media screen and (max-width: 1440px) and (height: 900px) {
    .mi {
        grid-template-rows: 8rem;
    }
}

.img-mc {
    grid-area: img-mc;
    background: transparent;
    text-align: center;
}

.img-mc img {
    width: 80%;
    height: 8.5rem;
}

@media screen and (max-width: 1440px) {
    .img-mc img {
        width: 80%;
        height: 6.5rem;
    }
}

@media screen and (max-width: 1440px) and (height: 900px) {
    .img-mc img {
        width: 80%;
        height: 8rem;
    }
}

.info-mc {
    grid-area: info-mc;
}

.dt-text {
    font-size: 1.2rem;
    color: var(--color-dt);
    font-weight: normal;
    margin-bottom: 1rem !important;
}

@media screen and (max-width: 1440px) {
    .dt-text {
        font-size: 0.8rem;
    }
}

.dt-text-2 {
    font-size: 1.1rem;
    color: var(--color-dt);
    font-weight: normal;
    margin-bottom: 0.9rem !important;
}

dt.dt-text-2 {
    margin-bottom: 0.7rem !important;
}

.dt-text-2-no-mb {
    font-size: 1.1rem;
    color: var(--color-dt);
    font-weight: normal;
    margin-bottom: 0rem !important;
}

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

    .dt-text-2-no-mb,
    .dt-text-2 {
        font-size: 0.7rem;
    }
}

.dt-text-2-pt-1 {
    font-size: 1.1rem;
    color: var(--color-dt);
    font-weight: normal;
    margin-bottom: 0rem !important;

    position: relative;
    bottom: 0.4rem;
}

.dd-text {
    font-size: 1rem;
    color: var(--color-dd);
    font-weight: normal;
    margin-bottom: 0.4rem !important;
    padding-top: 0rem;
    font-style: italic;
}

@media screen and (max-width: 1440px) {
    .dd-text {
        font-size: 0.7rem;
    }
}

.dd-text-2 {
    font-size: 1rem;
    color: var(--color-dd);
    font-weight: normal;
    margin-bottom: 0.4rem !important;
    padding-top: 0rem;
    font-style: italic;
}

@media screen and (max-width: 1440px) {
    .dd-text-2 {
        font-size: 0.6rem;
    }
}

@media screen and (height: 1080px) {

    dt.dt-text-2,
    .dt-text-2 {
        margin-bottom: 1.7rem !important;
    }
}

.card-ctm {
    background: #A2E0E8;
    color: black;
    width: 100%;
    text-align: center;
    border-radius: 0.2rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: 0.9rem;
}

@media screen and (max-width: 1440px) {
    .card-ctm {
        font-size: 0.6rem;
    }
}

.col-35-per {
    flex: 0 0 auto;
    width: 35%;
}

.col-65-per {
    flex: 0 0 auto;
    width: 65%;
}

.col-90-per {
    flex: 0 0 auto;
    width: 100%;
}

.col-10-per {
    flex: 0 0 auto;
    width: 10%;
}

.col-60-per {
    flex: 0 0 auto;
    width: 60%;
}

.col-40-per {
    flex: 0 0 auto;
    width: 40%;
}

.col-43-per {
    flex: 0 0 auto;
    width: 43%;
}

.col-57-per {
    flex: 0 0 auto;
    width: 57%;
}

.ci-running {
    background: #4CAF50;
    color: white;
    width: 100%;
    text-align: center;
    border-radius: 0.2rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: 0.9rem;
}

.ci-idle {
    background: #EECC1A;
    color: white;
    width: 100%;
    text-align: center;
    border-radius: 0.2rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: 0.9rem;
}

.ci-alarm {
    background: #E45C60;
    color: white;
    width: 100%;
    text-align: center;
    border-radius: 0.2rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: 0.9rem;
}

.ci-disconnect {
    background: #C0C0C0;
    color: black;
    width: 100%;
    text-align: center;
    border-radius: 0.2rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: 0.9rem;
}

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

    .ci-running,
    .ci-idle,
    .ci-disconnect,
    .ci-alarm {
        font-size: 0.6rem;
    }
}

.highcharts-figure {
    height: auto;
    margin: 0px !important;
}

#Time_Chart {
    width: 100%;
    height: 11.6rem;
}

:-webkit-full-screen #Time_Chart {
    width: 100%;
    height: 14rem;
    margin-top: 1.5rem;
}

@media screen and (height: 1080px) {
    #Time_Chart {
        width: 100%;
        height: 14rem;
        margin-top: 1.5rem;
    }
}

@media screen and (max-width: 1440px) {
    #Time_Chart {
        height: 9rem;
    }
}

@media screen and (max-width: 1440px) and (height: 900px) {
    #Time_Chart {
        height: 13.8rem;
    }
}

.card-legend {
    width: 60%;
    height: 9rem;
    border-radius: 0.4rem;
    border: 1px solid var(--brd-card-legend);
    background: var(--bg-card-legend);
    margin-top: 1rem;
    padding: 0.5rem;
}

:-webkit-full-screen .card-legend {
    margin-top: 2.5rem;
}

@media screen and (height: 1080px) {
    .card-legend {
        margin-top: 2.5rem;
    }
}

.dt-cl {
    color: var(--color-fw-legen);
}

.cl-running {
    border-radius: 50%;
    height: 0.8rem;
    width: 0.8rem;
    background: #52834B;
}

.cl-idle {
    border-radius: 50%;
    height: 0.8rem;
    width: 0.8rem;
    background: #EECC1A;
}

.cl-alarm {
    border-radius: 50%;
    height: 0.8rem;
    width: 0.8rem;
    background: #E45C60;
}

.cl-disconnect {
    border-radius: 50%;
    height: 0.8rem;
    width: 0.8rem;
    background: #C0C0C0;
}

.fw-legend {
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0rem !important;
    margin-left: 0.4rem;
    line-height: 0.8rem;
}

.img-mch-1 {
    width: 1rem;
    margin-right: 0.5rem;
}

.btn-view-detail {
    color: var(--color-btn-view-detail);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border: 1px solid var(--brd-btn-view-detail);
    font-size: 0.8rem;
    background: var(--bg-btn-view-detail);
}

.btn-view-detail:hover {
    color: var(--color-btn-view-detail);
}

.btn-page {
    background: var(--bg-btn-page);
    color: var(--color-btn-page);
    border: 1px solid var(--bg-btn-page);
    font-size: 1rem;
    padding: 0.1rem 2rem;
    margin: 0rem 0.5rem;
}

.btn-page:hover {
    background: var(--bg-btn-page-hover);
    color: var(--color-btn-page-hover);
    border: 1px solid var(--bg-btn-page);
}

.num-page {
    background: var(--bg-btn-view-detail);
    color: var(--bg-btn-page);
    border: 1px solid var(--bg-btn-page);
    font-size: 1rem;
    padding: 0.2rem 0.5rem;
    margin: 0rem 0.5rem;
    border-radius: 50%;
}

.num-page-text,
.num-page-text:hover {
    background: transparent;
    color: var(--bg-btn-page);
    font-size: 1rem;
    padding: 0rem;
    margin: 0rem 0.2rem;
}

.num-page:hover,
.num-page.active {
    background: var(--bg-btn-page-hover);
    color: var(--color-btn-page-hover);
    border: 1px solid var(--bg-btn-page);
}

.dt-n {
    width: 100%;
    font-size: 1.5rem;
    color: var(--color-dt-n);
    font-weight: normal !important;
    margin-bottom: 0rem;
    line-height: 1.4rem;
}

:-webkit-full-screen .dt-n {
    font-size: 2.5rem;
    line-height: 2.4rem;
}

@media screen and (height: 1080px) {
    .dt-n {
        font-size: 2.5rem;
        line-height: 2.4rem;
    }
}

.brd-corrections {
    width: 1rem;
    height: 2.8rem;
    border-radius: 0.2rem;
    background: #F54137;
}

.brd-attentions {
    width: 1rem;
    height: 2.8rem;
    border-radius: 0.2rem;
    background: #EECC1A;
}

:-webkit-full-screen .brd-corrections,
:-webkit-full-screen .brd-attentions {
    height: 5rem;
}

@media screen and (height: 1080px) {

    .brd-corrections,
    .brd-attentions {
        height: 5rem;
    }
}

.dd-mh {
    margin-bottom: 0rem;
    font-size: 3rem;
    line-height: 2.9rem;
    color: var(--color-dt-n);
    font-weight: bold;
    width: 100%;
    text-align: right;
}

:-webkit-full-screen .dd-mh {
    font-size: 4.5rem;
    line-height: 4.4rem;
}

@media screen and (height: 1080px) {
    .dd-mh {
        font-size: 4.5rem;
        line-height: 4.4rem;
    }
}

.grid-di {
    width: 100%;
    padding: 0.5rem;
    display: grid;
    grid-template-areas:
        "grid-chart";
    grid-template-columns: 100%;
    grid-template-rows: 43rem;
    grid-gap: 0.5rem;
}

:-webkit-full-screen .grid-di {
    grid-template-rows: 49rem;
}

@media screen and (height: 1080px) {
    .grid-di {
        grid-template-rows: 49rem;
    }
}

@media screen and (max-width: 1440px) {
    .grid-di {
        grid-template-rows: 33rem;
    }
}

@media screen and (max-width: 1440px) and (height: 900px) {
    .grid-di {
        grid-template-rows: 39rem;
    }
}


.grid-chart {
    grid-area: grid-chart;
    border-radius: 0.2rem;
    background: var(--bg-grid-di);
    overflow-y: hidden;
    overflow-x: hidden;
}

/* width */
.grid-chart::-webkit-scrollbar {
    width: 10px;
    cursor: pointer;
}

/* Track */
.grid-chart::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
    cursor: pointer;
}

/* Handle */
.grid-chart::-webkit-scrollbar-thumb {
    background: var(--color-scroll-chart);
    border-radius: 10px;
    cursor: pointer;
}

/* Handle on hover */
.grid-chart::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-chart);
    cursor: pointer;
}

.grid-scrol-chart {
    width: 100%;
    height: auto;
}

.grid-mttr {
    grid-area: grid-mttr;
    border-radius: 0.2rem;
    border: 1px solid var(--brd-grid-di);
    background: var(--bg-grid-di);
    padding: 0.5rem;
}

.grid-mtbf {
    grid-area: grid-mtbf;
    border-radius: 0.2rem;
    border: 1px solid var(--brd-grid-di);
    background: var(--bg-grid-di);
    padding: 0.5rem;
}

.panel-temp {
    grid-area: panel-temp;
    border-radius: 0.2rem;
    border: 1px solid var(--brd-grid-di);
    background: var(--bg-grid-di);
    padding: 0.5rem;
}

.feed-rate {
    grid-area: feed-rate;
    border-radius: 0.2rem;
    border: 1px solid var(--brd-grid-di);
    background: var(--bg-grid-di);
    padding: 0.5rem;
}

.grid-spindle-speed {
    grid-area: grid-spindle-speed;
    border-radius: 0.2rem;
    border: 1px solid var(--brd-grid-di);
    background: var(--bg-grid-di);
    padding: 0.5rem;
}

.grid-torque-load {
    grid-area: grid-torque-load;
    border-radius: 0.2rem;
    border: 1px solid var(--brd-grid-di);
    background: var(--bg-grid-di);
    padding: 0.5rem;
}

.grid-water-consumption {
    grid-area: grid-water-consumption;
    border-radius: 0.2rem;
    border: 1px solid var(--brd-grid-di);
    background: var(--bg-grid-di);
    padding: 0.5rem;
}

.grid-kosong {
    grid-area: grid-kosong;
    border-radius: 0.2rem;
    border: 1px solid var(--brd-grid-di);
    background: var(--bg-grid-di);
    padding: 0.5rem;
}

.card-chart {
    border-radius: 0.2rem;
    border: 1px solid var(--brd-grid-di);
    background: var(--bg-grid-di);
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.grid-value-chart {
    width: 100%;
    display: grid;
    grid-template-areas:
        "grid-d-chart grid-v-chart";
    grid-template-columns: 84% 15%;
    grid-template-rows: 17.5rem;
    grid-gap: 0.5rem;
}

.grid-value-chart.mtbf,
.grid-value-chart.mttr {
    width: 100%;
    display: grid;
    grid-template-areas:
        "grid-d-chart grid-d-chart" !important;
    grid-template-columns: 84% 15% !important;
    grid-template-rows: 12.5rem !important;
    grid-gap: 0.5rem;
}

@media screen and (max-width: 1440px) {
    .grid-value-chart {
        grid-template-rows: 12.7rem;
    }
}

@media screen and (max-width: 1440px) and (height: 900px) {
    .grid-value-chart {
        grid-template-rows: 15.7rem;
    }
}

.grid-d-chart {
    grid-area: grid-d-chart;
}

.grid-v-chart {
    grid-area: grid-v-chart;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


.select-costum {
    font-size: 0.9rem !important;
    padding: 0.3rem 1rem !important;
    background: var(--bg-select-costum) !important;
    color: var(--color-select-costum) !important;
    border: var(--bg-select-costum);
    width: auto;
}

.select-costum:hover,
.select-costum:focus {
    box-shadow: none !important;
    border: var(--bg-select-costum) !important;
}

.chart-view {
    width: 100%;
    height: 16.5rem;
}

:-webkit-full-screen .chart-view {
    width: 100%;
    height: 19rem;
}

@media screen and (height: 1080px) {

    .grid-value-chart {
        grid-template-rows: 20.9rem;
    }

    .chart-view {
        width: 100%;
        height: 20rem;
    }

    .grid-value-chart.mtbf,
    .grid-value-chart.mttr {
        grid-template-rows: 15.9rem !important;
    }
}

@media screen and (max-width: 1440px) {
    .chart-view {
        width: 100%;
        height: 10.5rem;
    }
}

@media screen and (max-width: 1440px) and (height: 900px) {
    .chart-view {
        width: 100%;
        height: 13.5rem;
    }
}


.axis path,
.axis line {
    fill: none;
    stroke: white;
    shape-rendering: crispEdges;
}

.tick text {
    fill: white;
    font-size: 0.8rem;
}

.tick .domain {
    stroke: white;
}

.running-gc {
    fill: #52834B;
}

.idle-gc {
    fill: #EECC1A;
}

.alarm-gc {
    fill: #EF5B53;
}

.disconnect-gc {
    fill: #C0C0C0;
}

.img-mc-warning-1 {
    width: 50%;
    margin-bottom: 0.5rem;
}

.blink {
    animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blinker {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.font-warning-yel {
    margin-bottom: 0rem;
    color: #DEB42B;
    font-size: 4rem;
    line-height: 4rem;
    font-weight: bold;
    position: relative;
}

.span-w-yel {
    color: #DEB42B;
    font-size: 1rem;
    position: absolute;
    top: -1.5rem;
}

.font-chart-value-1 {
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -2.5px;
    color: var(--color-font-chart-value);
    margin-bottom: 0rem;
}

.font-chart-value-2 {
    font-size: 1rem;
    line-height: 1rem;
    color: var(--color-font-chart-value);
    margin-bottom: 0rem;
}

/* width */
.highcharts-scrolling::-webkit-scrollbar {
    width: 20px;
    height: 5px;
    cursor: pointer;
}

/* Track */
.highcharts-scrolling::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
    cursor: pointer;
}

/* Handle */
.highcharts-scrolling::-webkit-scrollbar-thumb {
    background: var(--color-scroll-chart);
    border-radius: 10px;
    cursor: pointer;
}

/* Handle on hover */
.highcharts-scrolling::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-chart);
    cursor: pointer;
}

.yAxsis-costum-0 {
    background: transparent !important;
}

.btn-drpdown {
    border: 1px solid var(--brd-grid-di);
    color: var(--color-judul);
    font-size: 0.9rem;
    padding: 0.2rem 2rem;
}

.btn-drpdown:hover {
    background: var(--brd-grid-di);
    color: white;
}

.dropdown-menu.show {
    border: 1px solid var(--brd-dropdown);
    background: var(--bg-view-grid);
    padding: 0.5rem 1rem;
}

.pagination {
    margin-bottom: 0rem;
}

.costum-form,
.costum-form:focus {
    background: var(--bg-view-grid);
    border: 1px solid var(--bg-view-grid);
    color: var(--color-judul);
    text-align: left;
}

.spn-run {
    width: 0.7rem;
    height: 0.7rem;
    background: #497244;
    margin-right: 0.3rem;
    padding-right: 0.4rem;
    padding-left: 0.3rem;
    margin-top: 0.2rem !important;
}

.spn-idl {
    width: 0.7rem;
    height: 0.7rem;
    background: #EECC1A;
    margin-right: 0.3rem;
    padding-right: 0.4rem;
    padding-left: 0.3rem;
    margin-top: 0.2rem !important;
}

.spn-alr {
    width: 0.7rem;
    height: 0.7rem;
    background: #EF5B53;
    margin-right: 0.3rem;
    padding-right: 0.4rem;
    padding-left: 0.3rem;
    margin-top: 0.2rem !important;
}

.spn-disc {
    width: 0.7rem;
    height: 0.7rem;
    background: #C0C0C0;
    margin-right: 0.3rem;
    padding-right: 0.4rem;
    padding-left: 0.3rem;
    margin-top: 0.2rem !important;
}

.spn-run.r50,
.spn-idl.r50,
.spn-alr.r50,
.spn-disc.r50 {
    border-radius: 50%;
}

.ft-sts {
    margin-bottom: 0px;
    color: var(--color-ft-sts);
    font-size: 0.7rem;
    line-height: 0.7rem;
    margin-right: 1rem;
    margin-top: 0.2rem !important;
    white-space: nowrap;
}

@media screen and (max-width: 1440px) {
    .col-12 {
        margin: 0rem !important;
    }
}

.footer {
    bottom: 0rem;
}

@media screen and (height: 1080px) {
    .footer {
        bottom: 0.9rem;
    }
}

.form-color {
    width: 100%;
    height: 2rem;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.form-color::-webkit-color-swatch {
    border: 1 solid #FFFFFF;
}

.form-color::-moz-color-swatch {
    border-radius: 50%;
    border: 1 solid #FFFFFF;
}

.btn-set{
    color: #C7C7C7;
    font-size: 1.1rem;
    margin-right: 0.6rem;
    margin-top: 0.2rem;
    cursor: pointer;
}

.btn-set:hover{
    color: #FFFFFF;
}

.btn-save{
    background: #495058;
    border: 1px solid #495058;
    color: #FFFFFF;
}

.btn-save:hover{
    background: #FFFFFF;
    color: #495058;
}

.btn-cancel{
    background: #9C9C9C;
    border: 1px solid #9C9C9C;
    color: #FFFFFF;
}

.btn-cancel:hover{
    background: #FFFFFF;
    color: #9C9C9C;
}

.modal-header{
    text-align: center;
    background: #495058;
    color: #FFFFFF;
    justify-content: center;
}

.form-costum,
.form-costum:focus{
    border: 1px solid #495058;
    background: #FFFFFF;
    color: #495058;
}