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

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

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

.main-grid {
    display: grid;
    grid-template-areas:
        "card-6 card-5 card-1 card-1"
        "card-6 card-5 card-1 card-1"
        "card-6 card-5 card-1 card-1"
        "card-7 card-8 card-9 card-9"
        "card-10 card-11 card-12 card-12";
    grid-template-columns: 28.8% 38% 20.7% 11.2%;
    grid-template-rows: 11.7vh 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;
    }
}

.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: 30%;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    padding-left: 4.5rem;
}

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

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

.card-atas {
    position: absolute;
    top: 1.8rem;
    left: 4.5rem;
    display: grid;
    grid-template-areas: "air-blow pretreatment";
    grid-template-columns: 14.7rem 14.7rem;
    grid-template-rows: 2.2rem;
    grid-gap: 0.3rem;
}

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

.air-blow {
    grid-area: air-blow;
    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;
}

.pretreatment {
    grid-area: pretreatment;
    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::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: 2.5rem;
    left: 4.5rem;
    display: grid;
    grid-template-areas: "robot booth bake-oven load-unload";
    grid-template-columns: 8rem 8rem 8rem 6rem;
    grid-template-rows: 2.5rem;
    grid-gap: 0.3rem;
}

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

.booth {
    grid-area: booth;
    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 {
    grid-area: bake-oven;
    border: 2px solid #c0c0c0;
    background: #a7a7a7;
    border-radius: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: "Font Kanit";
    font-size: 0.7rem;
    color: #000000;
    position: relative;
}

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

.bake-oven span {
    width: 100%;
    text-align: center;
}

.robot::before,
.booth::before,
.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;
}

.card-kanan {
    position: absolute;
    top: 40%;
    left: 0rem;
}

@media screen and (height: 1080px) {
    .card-kanan {
        top: 42%;
    }
}

.dray-oven {
    width: 4rem;
    height: 2rem;
    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;
}

.dray-oven::before {
    position: absolute;
    content: "";
    right: -0.4rem;
    top: 40%;
    height: 0px;
    width: 0px;
    border-left: solid 5px #c0c0c0;
    border-top: solid 5px transparent;
    border-bottom: solid 5px transparent;
}

.card-kiri-1 {
    position: absolute;
    top: 25%;
    right: 0rem;
}

.card-kiri-2 {
    position: absolute;
    top: 39%;
    right: 0rem;
}

.card-kiri-3 {
    position: absolute;
    width: 7.5rem;
    height: 2rem;
    top: 55%;
    right: 0rem;
    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: 1080px) {
    .card-kiri-1 {
        top: 30%;
    }

    .card-kiri-2 {
        top: 41%;
    }

    .card-kiri-3 {
        top: 52%;
    }
}

.conveyor {
    width: 7.5rem;
    height: 2rem;
    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;
}

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

[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%;
    margin: 0rem;
}

.card-1 figure {
    height: 18rem;
}

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

.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: 1080px) {
    .fig-card-8 {
        height: 16rem;
    }
}

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

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

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

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

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

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

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

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

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

.text-not-satrt {
    width: 100%;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: #28be14;
    margin-bottom: 0rem;
    margin-top: 0.3rem;
}

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

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

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

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

.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: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0;
    border-right: 0.3em solid transparent;
    border-bottom: 0.3em solid;
    border-left: 0.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;
}

.card-chart-scrollx {
    width: 100%;
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}

/* .card-oee {
    display: grid;
    grid-template-areas:
        "avaibility"
        "performance"
        "quality";
    grid-template-columns: 93%;
    grid-template-rows: 15rem 5rem 5rem;
    grid-gap: 0.5rem;
    margin-top: 10rem;
} */

.card-oee {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Untuk menempatkan konten secara vertikal di tengah */
    align-items: center; /* Untuk menempatkan konten secara horizontal di tengah */
    height: 100%; /* Pastikan card memiliki tinggi yang sesuai */
    width: 100%;
}

.avaibility {
    width: 100%;
}

.oee-judul,
.oee-val {
    margin: 0;
}

@media screen and (height: 1080px) {
    /* .card-oee {
        grid-template-rows: 6.5rem 6.5rem 6.5rem;
    } */
}

.avaibility {
    grid-area: avaibility;
    border-radius: 0.3rem;
    border: 2px solid #5b5b5b;
    padding: 0.5rem;
    background: linear-gradient(130deg, #2f3231 25%, #d6570f) 100%;
}

.performance {
    grid-area: performance;
    border-radius: 0.3rem;
    border: 2px solid #5b5b5b;
    padding: 0.5rem;
    background: linear-gradient(130deg, #2f3231 25%, #39c716) 100%;
}

.quality {
    grid-area: quality;
    border-radius: 0.3rem;
    border: 2px solid #5b5b5b;
    padding: 0.5rem;
    background: linear-gradient(130deg, #2f3231 25%, #1687c7) 100%;
}

.card-6 .row .col-6 figure div {
    width: 100%;
    height: 18.5rem;
}

.oee-judul {
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.2rem;
    font-weight: bold;
    margin: 0rem;
}

.oee-val {
    color: #ffffff;
    font-size: 2.5rem;
    line-height: 2.5rem;
    font-weight: bold;
    margin: 0rem;
}

@media screen and (height: 1080px) {
    .card-6 .row .col-6 figure div {
        height: 25rem;
        margin-top: 1.5rem;
    }

    .oee-judul {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .oee-val {
        font-size: 3.5rem;
        line-height: 3.5rem;
    }
}

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

.tes {
    background: #f0560f;
}

.card-layout {
    display: grid;
    grid-template-areas:
        "cl-ks-1 cl-pretreatment cl-mezzane-conveyor cl-ks-2"
        "cl-dry-oven cl-main-rel cl-main-rel cl-floor-conveyor"
        "cl-ks-3 cl-booth cl-bake-oven cl-loading"
        "cl-ks-3 cl-robot cl-ks-4 cl-unloading";
    grid-template-columns: 10% 37% 37% 14%;
    grid-template-rows: 3rem 6rem 3rem 3rem;
    grid-gap: 0.3rem;
    margin-bottom: 0.5rem;
}

@media screen and (height: 1080px) {
    .card-layout {
        margin-top: 2rem;
        margin-bottom: 3rem;
    }
}

.cl-ks-1 {
    grid-area: cl-ks-1;
    background: transparent;
}

.cl-ks-2 {
    grid-area: cl-ks-2;
    background: transparent;
}

.cl-ks-3 {
    grid-area: cl-ks-3;
    background: transparent;
}

.cl-ks-4 {
    grid-area: cl-ks-4;
    background: transparent;
}

.cl-pretreatment {
    grid-area: cl-pretreatment;
    background: #a7a7a7;
    border: 0.2rem solid #c0c0c0;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    color: #000000;
    font-weight: bold;
}

.cl-mezzane-conveyor {
    grid-area: cl-mezzane-conveyor;
    background: #a7a7a7;
    border: 0.2rem solid #c0c0c0;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    color: #000000;
    font-weight: bold;
}

.cl-dry-oven {
    grid-area: cl-dry-oven;
    background: #a7a7a7;
    border: 0.2rem solid #c0c0c0;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    color: #000000;
    font-weight: bold;
}

.cl-main-rel {
    grid-area: cl-main-rel;
    background: transparent;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.cl-floor-conveyor {
    grid-area: cl-floor-conveyor;
    background: #a7a7a7;
    border: 0.2rem solid #c0c0c0;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    color: #000000;
    font-weight: bold;
}

.cl-booth {
    grid-area: cl-booth;
    background: #a7a7a7;
    border: 0.2rem solid #c0c0c0;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    color: #000000;
    font-weight: bold;
}

.cl-bake-oven {
    grid-area: cl-bake-oven;
    background: #a7a7a7;
    border: 0.2rem solid #c0c0c0;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    color: #000000;
    font-weight: bold;
}

.cl-loading {
    grid-area: cl-loading;
    background: #434343;
    border: 0.2rem dashed #000000;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffffff;
}

.cl-robot {
    grid-area: cl-robot;
    background: #a7a7a7;
    border: 0.2rem solid #c0c0c0;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
    font-size: 1rem;
    color: #000000;
    font-weight: bold;
}

.cl-unloading {
    grid-area: cl-unloading;
    background: #434343;
    border: 0.2rem dashed #000000;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffffff;
}

a[data-status="st1"] {
    border: 0.2rem solid #4caf50;
    background: #388e3c;
}

a[data-status="st2"] {
    border: 0.2rem solid #dada02;
    background: #ffff01;
}

a[data-status="st3"] {
    border: 0.2rem solid #ef5b53;
    background: #c62f27;
    color: #ffffff;
    -webkit-animation: alarm 0.8s infinite alternate;
    animation: alarm 0.8s infinite alternate;
}

.cl-action-rel {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cl-icon-action-rel {
    position: absolute;
    content: url("tools/icon-action-rel.svg");
    width: 100%;
}

.cl-action-rel[data-status="st1"] .cl-icon-action-rel {
    content: url("tools/icon-action-rel-on.svg");
}

.cl-main-rel-actio {
    position: absolute;
    width: 100%;
    height: 100%;
}

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

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

.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: 6px;
    left: 7px;
    width: 98%;
    height: 6px;
    animation: animate-road-left linear 2s infinite;
}

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

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

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

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

    to {
        background-position: 0;
    }
}

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

    to {
        background-position: 120px;
    }
}