:root {
    --bg-card:#2F3231;
}

[data-theme="dark"] {
    --bg-card:#2F3231;
}

@font-face {
    font-family: "Font Kanit";
    src: url(font/Kanit/Kanit-Regular.ttf);
}

@font-face {
    font-family: "Font Kanit Bold";
    src: url(font/Kanit/Kanit-Bold.ttf);
}

.main-grid{
    display: grid;
    grid-template-areas:
    "card-1 card-2 card-5 card-6"
    "card-1 card-3 card-5 card-6"
    "card-1 card-4 card-5 card-6"
    "card-7 card-7 card-8 card-9"
    "card-10 card-10 card-11 card-12";
    grid-template-columns: 20.9% 11% 36% 30.7%;
    grid-template-rows: 11vh 11vh 11vh 28vh 28vh;
    grid-gap: 0.5rem;
}

@media screen and (height: 1080px) {
    .main-grid{
        grid-template-rows: 11.6vh 11.6vh 11.6vh 28vh 28vh;
    }
    
}

@media screen and (height: 720px){
    .main-grid{
        grid-template-columns: 21.1% 11% 36% 30.7%;
        grid-template-rows: 10vh 10vh 10vh 29.1vh 29.1vh;
        grid-gap: 0.3rem;
    }

    section{
        padding: 0.4rem;
    }
}

.card-1{
    grid-area: card-1;
    background: #2F3231;
    border-radius: 0.3rem;
}

.card-2{
    grid-area: card-2;
    background: #2F3231;
    border-radius: 0.3rem;
    background: linear-gradient(45deg, #2F3231 10%, #695B38);
}

.card-3{
    grid-area: card-3;
    background: #2F3231;
    border-radius: 0.3rem;
    background: linear-gradient(45deg, #2F3231 10%, #16A086);
}

.card-4{
    grid-area: card-4;
    background: #2F3231;
    border-radius: 0.3rem;
    background: linear-gradient(45deg, #2F3231 10%, #91C090);
}

.card-5{
    grid-area: card-5;
    background: #2F3231;
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.card-6{
    grid-area: card-6;
    background: #2F3231;
    border-radius: 0.3rem;
}

.card-7{
    grid-area: card-7;
    background: #2F3231;
    border-radius: 0.3rem;
}

.card-8{
    grid-area: card-8;
    background: #2F3231;
    border-radius: 0.3rem;
}

.card-9{
    grid-area: card-9;
    background: #2F3231;
    border-radius: 0.3rem;
}

.card-10{
    grid-area: card-10;
    background: #2F3231;
    border-radius: 0.3rem;
}

.card-11{
    grid-area: card-11;
    background: #2F3231;
    border-radius: 0.3rem;
}

.card-12{
    grid-area: card-12;
    background: #2F3231;
    border-radius: 0.3rem;
}

.main-layout{
    width: 100%;
    height: 16rem;
    display: flex;
    justify-content: center;
    position: relative;
}

@media screen and (height: 1080px) {
    .main-layout{
        height: 20.5rem;
    }
}

.main-rel{
    position: absolute;
    top: 34.5%;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

@media screen and (height: 1080px) {
    .main-rel{
        top: 38%;
    }
}

@media screen and (height: 720px){
    .main-rel{
        top: 26%;
    }
}

.layout{
    content: url("../css/tools/rel-layout.svg");
    width: 70%;
    position: relative;
}

.rel{
    width: 100%;
    position: relative;
    display: none;
}

.rel div{
    position: absolute;
	background-image: linear-gradient(to right, transparent 0%, transparent 80%, #787676 80%, #787676 100%);
	background-size: 1rem 100%;
}

.rel div:nth-child(1){
    top: -76px;
    left: 100px;
    width: 67.5%;
    height: 6px;
    animation: animate-road-left linear 2s infinite;
}

.rel div:nth-child(2){
    top: -45px;
    left: 74px;
    width: 8%;
    height: 6px;
    animation: animate-road-right linear 2s infinite;
    transform: rotate(90deg);
}

.rel div:nth-child(3){
    top: -9px;
    left: 100px;
    width: 67.5%;
    height: 6px;
    animation: animate-road-right linear 2s infinite;
}

.rel div:nth-child(4){
    top: -45px;
    right: 76px;
    width: 8%;
    height: 6px;
    animation: animate-road-left linear 2s infinite;
    transform: rotate(90deg);
}

@media screen and (height: 720px){
    .rel div:nth-child(1){
        top: -51px;
        left: 70px;
    }

    .rel div:nth-child(2){
        top: -27px;
        left: 50px;
    }

    .rel div:nth-child(3){
        top: 0-5px;
        left: 70px;
    }

    .rel div:nth-child(4){
        top: -27px;
        right: 50px;
    }
}

@keyframes animate-road-left {
	from {
		background-position: 120px;
	}
	
	to {
		background-position: 0;
	}
}

@keyframes animate-road-right {
	from {
		background-position: 0;
	}
	
	to {
		background-position: 120px;
	}
}


.card-atas{
    position: absolute;
    top: 0.3rem;
    display: grid;
    grid-template-areas:
    "uf-unit rectifier anolyte kosong kosong"
    "ed-coating ed-coating ed-coating pretreatment-2 pretreatment-1";
    grid-template-columns: 4.7rem 4.7rem 4.7rem 6rem 6rem;
    grid-template-rows: 2.2rem 2.2rem;
    grid-gap: 0.3rem;
}

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

@media screen and (height: 720px){
    .card-atas{
        grid-template-columns: 3rem 3rem 3rem 4rem 4rem;
        grid-template-rows: 1.5rem 1.5rem;
    }
}

.uf-unit{
    grid-area: uf-unit;
    border: 2px dashed #000000;
    background: #434343;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #FFFFFF;
}

.rectifier{
    grid-area: rectifier;
    border: 2px dashed #000000;
    background: #434343;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #FFFFFF;
}

.anolyte{
    grid-area: anolyte;
    border: 2px dashed #000000;
    background: #434343;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #FFFFFF;
}

@media screen and (height: 720px){
    .uf-unit,
    .rectifier,
    .anolyte{
        font-size: 0.6rem;
    }
}

.ed-coating{
    grid-area: ed-coating;
    border: 2px solid #C0C0C0;
    background: #A7A7A7;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #000000;
    cursor: pointer;
    position: relative;
}

.pretreatment-2{
    grid-area: pretreatment-2;
    border: 2px solid #C0C0C0;
    background: #A7A7A7;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #000000;
    cursor: pointer;
    position: relative;
}

.pretreatment-1{
    grid-area: pretreatment-1;
    border: 2px solid #C0C0C0;
    background: #A7A7A7;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #000000;
    cursor: pointer;
    position: relative;
}

@media screen and (height: 720px){
    .pretreatment-1,
    .pretreatment-2{
        font-size: 0.5rem;
    }
}

.ed-coating::after,
.pretreatment-2::after,
.pretreatment-1::after{
    position: absolute;
    content: '';
    bottom: -0.4rem;
    height:0px;
    width:0px;
    border-top:solid 5px #C0C0C0;
    border-left:solid 5px transparent;
    border-right:solid 5px transparent;
}

.card-bawah{
    position: absolute;
    bottom: 0.3rem;
    display: grid;
    grid-template-areas:
    "bake-oven bake-oven bake-oven load-unload ro-dw"
    "kk fuel-tank fuel-tank ks ks";
    grid-template-columns: 4.7rem 4.7rem 4.7rem 6rem 6rem;
    grid-template-rows: 2.2rem 2.2rem;
    grid-gap: 0.3rem;
}

@media screen and (height: 1080px) {
    .card-bawah{
        bottom:2.5rem;
    }
}

@media screen and (height: 720px){
    .card-bawah{
        bottom: 4rem;
        grid-template-columns: 3rem 3rem 3rem 4rem 4rem;
        grid-template-rows: 1.7rem 1.7rem;
    }
}

.bake-oven{
    grid-area: bake-oven;
    border: 2px solid #C0C0C0;
    background: #A7A7A7;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #000000;
    position: relative;
}

.bake-oven::before{
    position: absolute;
    content: '';
    top: -0.4rem;
    height:0px;
    width:0px;
    border-bottom:solid 5px #C0C0C0;
    border-left:solid 5px transparent;
    border-right:solid 5px transparent;
}


.load-unload{
    grid-area: load-unload;
    border: 2px dashed #000000;
    background: #434343;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #FFFFFF;
}

@media screen and (height: 720px){
    .load-unload{
        font-size: 0.5rem;
    }
}

.ro-dw{
    grid-area: ro-dw;
    border: 2px dashed #000000;
    background: #434343;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #FFFFFF;
}

.fuel-tank{
    grid-area: fuel-tank;
    border: 2px dashed #000000;
    background: #434343;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #FFFFFF;
}

.card-kanan{
    position: absolute;
    top: 45%;
    left: 0rem;
    width: 5rem;
    height: 2.5rem;
    border: 2px dashed #000000;
    background: #434343;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #FFFFFF;
}

@media screen and (height: 720px){
    .card-kanan{
        top: 31%;
        width: 3.5rem;
        height: 1.5rem;
    }
}

.card-kiri{
    position: absolute;
    top: 45%;
    right: 0.2rem;
}

.conveyor{
    width: 5rem;
    height: 2.5rem;
    border: 2px solid #C0C0C0;
    background: #A7A7A7;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #000000;
    position: relative;
}


@media screen and (height: 720px){
    .card-kiri{
        top: 31%;
        right: 0rem;
    }

    .conveyor{
        width: 3.5rem;
        height: 1.5rem;
        font-size: 0.6rem;
    }  
}

.conveyor::before{
    position: absolute;
    content: '';
    left: -0.4rem;
    top: 40%;
    height:0px;
    width:0px;
    border-right:solid 5px #C0C0C0;
    border-top:solid 5px transparent;
    border-bottom:solid 5px transparent;
}

.card-atas [data-status=running],
.card-bawah [data-status=running]{
    border: 2px solid #4CAF50;
    background: #388E3C;
    color: #FFFFFF;
}

.card-atas [data-status=running]::after{
    border-top:solid 5px #4CAF50;
}

.card-bawah [data-status=running]::before{
    border-bottom:solid 5px #4CAF50;
}

.card-atas [data-status=idle],
.card-bawah [data-status=idle]{
    border: 2px solid #FBC02D;
    background: #F9A825;
}

.card-atas [data-status=idle]::after{
    border-top:solid 5px #FBC02D;
}

.card-bawah [data-status=idle]::before{
    border-bottom:solid 5px #FBC02D;
}

.card-atas [data-status=alarm],
.card-bawah [data-status=alarm]{
    border: 2px solid #EF5B53;
    background: #C62F27;
    color: #FFFFFF;
    -webkit-animation: alarm 0.8s infinite alternate;
	animation: alarm 0.8s infinite alternate;
}

.card-atas [data-status=alarm]::after{
    border-top:solid 5px #EF5B53;
}

.card-bawah [data-status=alarm]::before{
    border-bottom:solid 5px #EF5B53;
}

[data-status=running] .card-kiri .conveyor{
    border: 2px solid #4CAF50;
    background: #388E3C;
    color: #FFFFFF;
}

[data-status=running] .card-kiri .conveyor::before{
    border-right:solid 5px #4CAF50;
}

[data-status=idle] .card-kiri .conveyor{
    border: 2px solid #FBC02D;
    background: #F9A825;
}

[data-status=idle] .card-kiri .conveyor::before{
    border-right:solid 5px #FBC02D;
}

[data-status=alarm] .card-kiri .conveyor{
    border: 2px solid #EF5B53;
    background: #C62F27;
    color: #FFFFFF;
    -webkit-animation: alarm 0.8s infinite alternate;
	animation: alarm 0.8s infinite alternate;
}

[data-status=alarm] .card-kiri .conveyor::before{
    border-right:solid 5px #EF5B53;
}

[data-status=st1] .main-rel .layout{
    content: url("../css/tools/rel-layout-run.svg");
}

[data-status=st1] .main-rel .rel{
    display: block;
}

@-webkit-keyframes alarm {
	0% { background-color: #ED1C2448; }
	100% { background-color: #C62F27; }
}
@keyframes alarm {
	0% { background-color: #ED1C2448; }
	100% { background-color: #C62F27; }
}

figure{
    width: 100%;
    height: auto;
    margin: 0rem;
}

.card-1 figure div{
    width: 100%;
    height: 18.5rem;
}

@media screen and (height: 1080px) {
    .card-1 figure{
        height: 22rem;
    }

    .card-1 figure div{
        width: 100%;
        height: 22.5rem;
    }
}

@media screen and (height: 720px) {
    .card-1 figure{
        height: 13rem;
    }

    .card-1 figure div{
        width: 100%;
        height: 13rem;
    }

    .highcharts-data-labels text{
        font-size: 0.5rem !important;
    }

    /* .highcharts-legend-item text{
        font-size: 0.5rem !important;
    } */
}

.carousel-control-next,
.carousel-control-prev{
    width: 5%;
}

.carousel-indicators{
    margin-bottom: 0rem;
}

.fig-card-8 div{
    width: 100%;
    height: 13.4rem;
}

@media screen and (height: 720px) {
    .fig-card-8{
        height: 11rem;
    }

    .fig-card-8 div{
        height: 11rem;
    }
}

@media screen and (height: 1080px) {
    .fig-card-8{
        height: 16rem;
    }
}

.card-6 figure div{
    width: 100%;
    height: 17.5rem;
}

@media screen and (height: 1080px) {
    .card-6 figure div{
        height: 21.5rem;
    }
}

@media screen and (height: 720px) {
    .card-6 figure div{
        height: 12.5rem;
    }

    .highcharts-axis-labels text{
        font-size: 0.5rem !important;
    }
}

.card-9 figure div{
    width: 100%;
    height: 14rem;
}

.card-7 figure div,
.card-10 figure div,
.card-11 figure div{
    width: 100%;
    height: 13rem;
}

.card-12 figure div{
    width: 100%;
    height: 11.5rem;
}

@media screen and (height: 1080px) {
    .card-9 figure div,
    .card-10 figure div{
        height: 16rem;
    }

    .card-7 figure div,
    .card-10 figure div,
    .card-11 figure div{
        height: 15.5rem;
    }

    .card-12 figure div{
        height: 14.3rem;
    }
}

@media screen and (height: 720px) {
    .card-7 figure div,
    .card-9 figure div,
    .card-10 figure div,
    .card-11 figure div{
        height: 11.5rem;
    }

    .card-12 figure div{
        height: 9.5rem;
    }
}

.text-note-sat{
    font-size: 1.2rem;
    color: #FFFFFF;
    margin-right: 0.5rem;
    margin-bottom: 0rem;
}

.text-not-satrt{
    width: 100%;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: #FFFFFF;
    /* font-weight: bold; */
    margin-bottom: 0rem;
    margin-top: 0.3rem;
}

.text-not-satrt[data-status=st1]{
    color: #4CAF50;
}

.text-not-satrt[data-status=st2]{
    color: #ED1C24;
}

.val-card{
    width: 100%;
    height: 2rem;
    color: #FFFFFF;
    font-size: 2rem;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 0.5rem;
    text-align: end;
}

@media screen and (height: 1080px) {
    .val-card{
        font-size: 3.5rem;
        height: 3.5rem;
    }
}

@media screen and (height: 720px){
    .val-card{
        font-size: 1.6rem;
        height: 1.6rem;
    }
}

.btn-drpdown{
    border: 1px solid #212121;
    border-radius: 0.2rem;
    color: #FFFFFF;
    background: #3C3C3C;
    font-size: 0.7rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
}

@media screen and (height: 720px){
    .btn-drpdown{
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
    }

    .d-flex.justify-content-end.p-2{
        padding: 0rem 0.3rem !important;
    }

    .d-flex.justify-content-start.p-2{
        padding: 0rem 0.3rem !important;
    }
}

.btn-drpdown:hover,
.btn-drpdown.show{
    background: #FFFFFF !important;
    color: #3C3C3C !important;
}

.but-drop{
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  margin-bottom: 0.5rem;
}

.but-drop:hover{
    background: #3C3C3C;
    color: #FFFFFF;
}

/* date-picker costum */
.datepicker-top-left::before, 
.datepicker-top-left::after, 
.datepicker-top-right::before, 
.datepicker-top-right::after{
    display: none;
}

.datepicker-top-left,
.datepicker-top-right{
    border-top-color: transparent !important;
}

.datepicker-dropdown {
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 3px 6px transparent;
    box-shadow: 0 3px 6px transparent;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    z-index: 1;

    top: 20%;
    left: 43%;
}

.datepicker-panel>ul{
    width: 100%;
}

.datepicker-panel>ul>li[data-view="month prev"],
.datepicker-panel>ul>li[data-view="month next"],
.datepicker-panel>ul>li[data-view="year prev"],
.datepicker-panel>ul>li[data-view="year next"],
.datepicker-panel>ul>li[data-view="years prev"],
.datepicker-panel>ul>li[data-view="years next"]{
    width: 20%;
}

.datepicker-panel>ul>li[data-view="month current"],
.datepicker-panel>ul>li[data-view="year current"],
.datepicker-panel>ul>li[data-view="years current"]{
    width: 60%;
    padding: 1rem 0rem;
}

.datepicker-panel>ul>li[data-view="years prev"],
.datepicker-panel>ul>li[data-view="year prev"],
.datepicker-panel>ul>li[data-view="month prev"],
.datepicker-panel>ul>li[data-view="years next"],
.datepicker-panel>ul>li[data-view="year next"],
.datepicker-panel>ul>li[data-view="month next"],
.datepicker-panel>ul>li[data-view="next"]{
    font-size: 2.5rem;
}

.datepicker-panel>ul>li[data-view="years current"],
.datepicker-panel>ul>li[data-view="year current"],
.datepicker-panel>ul>li[data-view="month current"]{
    font-size: 1.5rem;
}

.datepicker-container{
    width: 25rem;
    padding: 1rem;
}

.datepicker-panel>ul{
    font-size: 1.5rem;
}

.datepicker-panel>ul>li{
    width: 3.5rem;
    height: 4rem;
}

.datepicker-panel>ul>li[data-view="day"],
.datepicker-panel>ul>li[data-view="day picked"],
.datepicker-panel>ul>li[data-view="day prev"],
.datepicker-panel>ul>li[data-view="day next"],
.datepicker-panel>ul>li[data-view="day"],
.datepicker-panel>ul>li[data-view="month picked"],
.datepicker-panel>ul>li[data-view="month prev"],
.datepicker-panel>ul>li[data-view="month next"],
.datepicker-panel>ul>li[data-view="month"],
.datepicker-panel>ul>li[data-view="year picked"],
.datepicker-panel>ul>li[data-view="year prev"],
.datepicker-panel>ul>li[data-view="year next"],
.datepicker-panel>ul>li[data-view="year"]{
    padding: 1rem 0rem;
}

.datepicker-panel>ul[data-view="years"]>li, 
.datepicker-panel>ul[data-view="months"]>li {
    width: 6rem;
    height: 6.5rem;
    line-height: 4rem;
}

/* Dtae Range Picker */
.daterangepicker.ltr .left .daterangepicker_input{
    padding-right: 0rem;
}

.form-date-range{
    text-align: center;
    font-size: 0.9rem;
    padding: 0.1rem 0.1rem;
    background: var(--var-bg-form-date-range);
    color: var(--color-bg-date-range);
    border: 1px solid var(--var-bg-form-date-range);
    cursor: pointer;
}

.daterangepicker .calendar{
    max-width: 100%;
}
.daterangepicker table {
    font-size: 1.5rem;
}

.daterangepicker.dropdown-menu.ltr.show-calendar.opensright{
    top: 15%;
    left: 25%;
    right: 25%;
    width: 50%;
}

.grid-daterangepicker{
    display: grid;
    padding: 0.5rem;
    grid-template-areas:
    "left right"
    "ranges ranges";
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
    grid-gap: 0.5rem;
}

.left{
    grid-area: left;
}

.right{
    grid-area: right;
}

.ranges{
    grid-area: ranges;
    margin-top: 1rem;
}


.daterangepicker.opensright:after,
.daterangepicker.opensright:before{
    display: none;
}

.btn-apply{
    background: #16A086;
    border-radius: 0.2rem;
    padding: 0.5rem 1rem;
    color: white;
    border: 1px solid #16A086;
    font-size: 1.5rem;
}

.btn-apply:hover{
    border: 1px solid #16A086;
    background: white;
    color: #16A086;
}

.btn-clear{
    background: #dc3545;
    border-radius: 0.2rem;
    padding: 0.5rem 1rem;
    color: white;
    border: 1px solid #dc3545;
    font-size: 1.5rem;
}

.btn-clear:hover{
    border: 1px solid #dc3545;
    background: white;
    color: #dc3545;
}
 
.dropdown-toggle.show::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: 0;
    border-right: .3em solid transparent;
    border-bottom:.3em solid;
    border-left: .3em solid transparent;
}

.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 !important;
    color: #495058 !important;
    border: 1px solid #495058 !important;
}

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

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

.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;
}

.carousel-control-prev,
.carousel-control-next{
    display: none;
}

/* select costum */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #495058;
    color: #FFFFFF;
}

.datepicker-container.datepicker-dropdown{
    z-index: 10000 !important;
}

.card-select-type{
    width: 100%;
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid #4A4A4A;
    border-radius: 0.3rem;
}

.card-select-type table{
    width: 100%;
}

.card-select-type table tr td{
    text-align: left;
    font-size: 1.5rem;
}

.card-select-type table tr td:nth-child(1){
    text-align: left;
    width: 3rem;
}

.form-check-input:checked{
    background-color: #16A086;
    border-color: #16A086;
}

.form-check-input{
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
}

.legend-chart{
    color:#FFFFFF;
    cursor:pointer;
    font-size:12px;
    font-weight:bold;
    margin-right: 0.5rem;
}

.legend-chart:hover,
.legend-chart.active{
    color: #5c5e5d;
}

.legend-chart i{
    margin-right: 0.3rem;
}

.legend-chart.fb i{
    color: #1E94AE;
}

.legend-chart.ft i{
    color: #6E27A3;
}

.legend-chart.aft i{
    color: #ED6800;
}

.pretreatment-2[data-status=st1],
.pretreatment-1[data-status=st1],
.conveyor[data-status=st1],
.bake-oven[data-status=st1]{
    border: 1px solid #4CAF50;
    background: #388E3C;
    color: #FFFFFF;
}

.pretreatment-2[data-status=st2],
.pretreatment-1[data-status=st2],
.conveyor[data-status=st2],
.bake-oven[data-status=st2]{
    border: 1px solid #FFFF01;
    background: #FFFF01;
    color: #000000;
}

.pretreatment-2[data-status=st3],
.pretreatment-1[data-status=st3],
.conveyor[data-status=st3],
.bake-oven[data-status=st3]{
    border: 1px solid #ED1C24;
    background: #ED1C24;
    color: #FFFFFF;
    -webkit-animation: alarm 0.8s infinite alternate;
	animation: alarm 0.8s infinite alternate;
}