: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:
    "fault-history general"
    "gantt-chart gantt-chart";
    grid-template-columns: 20% 79.5%;
    grid-template-rows: 77vh 15vh;
    grid-gap: 0.5rem;
}

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

.fault-history{
    grid-area: fault-history;
    background: var(--bg-card);
    border-radius: 0.3rem;
    padding: 0.5rem;
}

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

.gantt-chart{
    grid-area: gantt-chart;
    background: var(--bg-card);
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.card-layout{
    width: 100%;
    height: 69vh;
}

@media screen and (height: 1080px) {
    .card-layout{
        height: 73vh;
    }
}

.main-layout{
    position: relative;
    width: 100%;
    height: 100%;
}

.room-1{
    position: absolute;
    top: 0rem;
    left: 2.5%;
    content: url('../css/tools/layout-general.svg');
    width: 95%;
}

.grid-label{
    position: absolute;
    top: 0rem;
    width: 100%;
    height: 38rem;
}

@media screen and (height: 1080px) {
    .room-1,
    .grid-label{
        top: 5rem;
    }
}

.main-label{
    position: relative;
    width: 100%;
    height: 100%;
}

.action-label{
    position: absolute;
    border: 1px solid #000000;
    background: #C0C0C0;
    display: flex;
    justify-content: center;
    align-items: start;
    color: #000000;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
}

.action-label[data-status=st1]{
    background: #4CAF50;
    color: #FFFFFF;
}

.action-label[data-status=st2]{
    background: #FFFF01;
    color: #000000;
}

.action-label[data-status=st3]{
    background: #ED1C24;
    color: #FFFFFF;
    -webkit-animation: alarm 0.6s infinite alternate;
	animation: alarm 0.6s infinite alternate;
}

.action-label:nth-child(1){
    left: 15.5rem;
    top: 0.5rem;
    width: 26.7rem;
    height: 6.5rem;
    padding-top: 1rem;
}

.action-label:nth-child(2){
    left: 42.7rem;
    top: 0.5rem;
    width: 26.7rem;
    height: 6.5rem;
    padding-top: 1rem;
}

.action-label:nth-child(3){
    left: 2.3rem;
    top: 16.7rem;
    width: 40.7rem;
    height: 10.5rem;
    padding-top: 0.5rem;
}

.action-label:nth-child(4){
    right: 2.7rem;
    top: 27rem;
    width: 8.6rem;
    height: 7.2rem;
    align-items: center;
}

.rel-general{
    position: absolute;
    top: 3.8rem;
    left: 7.5rem;
    content: url('../css/tools/rel-general.svg');
    width: 67.7rem;
}

[data-status=st1] .rel-general{
    content: url('../css/tools/rel-general-on.svg');
}

.judul-ino-con{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 0.8rem;
    margin: 0rem;
}

.running-hour{
    width: 100%;
    border-collapse: collapse;
}

.running-hour tr td{
    text-align: center;
    font-size: 1.2rem;
    padding: 0.5rem;
    color: #000000;
    border: 1px solid #000000;
}

.running-hour tr td:nth-child(1){
    background: #8B8B8B;
}

.running-hour tr td:nth-child(2){
    background: #FFFFFF;
}

.card-fault{
    width: 100%;
    height: 68%;
    border: 1px solid #4A4A4A;
    border-radius: 0.2rem;
    margin-bottom: 1rem;
}

@media screen and (height: 1080px) {
    .card-fault{
        height: 74%;
    }
}

.card-fault .header{
    width: 100%;
    height: 8%;
    color: #C7C7C7;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.5rem;
    border-bottom: 1px solid #4A4A4A;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

/* style table */
.gridtable{
    width: 100%;
}

.gridtable tbody {
    display: block;
    height: 41vh;
    overflow-y: auto;
}

.gridtable tbody tr:last-child{
    height: 100%;
}

@media screen and (height: 1080px) {
    .gridtable tbody {
        height: 48.5vh;
    }
}

.gridtable tbody::-webkit-scrollbar {
    width: 0.5rem;
    display: block;
}

.gridtable tbody::-webkit-scrollbar-track {
    background: #878787; 
}

.gridtable tbody::-webkit-scrollbar-thumb {
    background: #cfcfcf; 
}

.gridtable tbody::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.gridtable thead,
.gridtable tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.gridtable thead {
    position: relative;
    width: 100%;
    color: #000000;
    font-size: 0.7rem;
    background: #A1A1A1;
    border-bottom: #000000;
}

.gridtable thead tr th:last-child {
    width: 0.5rem;
    padding: 0rem;
    border-left: 1px solid #A1A1A1;
}

.gridtable thead tr th:nth-child(2){
    border-right: 1px solid #A1A1A1;
}

.gridtable thead tr th{
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.gridtable tbody tr td{
    padding: 0.5rem 0.2rem;
    vertical-align: middle;
    color: #000000;
    font-size: 0.7rem;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background: #DEDEDE;
}

.gridtable thead tr{
    border-bottom: 1px solid transparent;
}

.th-1,
.td-1{
    width: 30%;
    text-align: start;
}

.td-1 span:nth-child(1),
.td-2 span:nth-child(1){
    font-weight: bold;
}

.td-2 div:nth-child(3){
    padding-left: 1rem;
}

.th-2,
.td-2{
    width: 70%;
    text-align: center;
}

.td-2{
    text-align: start;
}

/* Action Rel */
.rel-run{
    position: absolute;
    transform-style: preserve-3d;
	transform-origin: bottom;
    display: none;
}

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

.rel-run::after {
	content: '';
	display: flex;
	width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, transparent 0%, transparent 70%, #787676 70%, #787676 100%);
	background-size: 1rem 100%;
	animation: animate-road linear 1s infinite;
}

.rel-run:nth-child(2){
    top: 4.1rem;
    left: 8.2rem;
    width: 66.5rem;
    height: 0.9rem;
}

.rel-run:nth-child(2)::after{
    animation-direction: reverse;
}

.rel-run:nth-child(3){
    top: 7.5rem;
    left: 5.5rem;
    width: 7rem;
    height: 0.9rem;
    transform:rotate(270deg);
}

.rel-run:nth-child(3)::after{
    animation-direction: reverse;
}

.rel-run:nth-child(4){
    top: 12rem;
    left: 8rem;
    width: 60.5rem;
    height: 0.9rem;
}

.rel-run:nth-child(5){
    top: 15.5rem;
    right: 17.4rem;
    width: 7rem;
    height: 0.9rem;
    transform:rotate(270deg);
}

.rel-run:nth-child(5)::after{
    animation-direction: reverse;
}

.rel-run:nth-child(6){
    top: 20rem;
    left: 8rem;
    width: 60.5rem;
    height: 0.9rem;
}

.rel-run:nth-child(6)::after{
    animation-direction: reverse;
}

.rel-run:nth-child(7){
    top: 22rem;
    left: 6.7rem;
    width: 4rem;
    height: 0.9rem;
    transform:rotate(270deg);
}

.rel-run:nth-child(7)::after{
    animation-direction: reverse;
}

.rel-run:nth-child(8){
    top: 24.6rem;
    left: 8rem;
    width: 60.5rem;
    height: 0.9rem;
}

.rel-run:nth-child(9){
    top: 27rem;
    right: 18.5rem;
    width: 4.5rem;
    height: 0.9rem;
    transform:rotate(270deg);
}

.rel-run:nth-child(9)::after{
    animation-direction: reverse;
}

.rel-run:nth-child(10){
    top: 30.3rem;
    left: 37.7rem;
    width: 30.5rem;
    height: 0.9rem;
}

.rel-run:nth-child(10)::after{
    animation-direction: reverse;
}

.rel-run:nth-child(11){
    top: 32.8rem;
    right: 48.6rem;
    width: 4.5rem;
    height: 0.9rem;
    transform:rotate(270deg);
}

.rel-run:nth-child(11)::after{
    animation-direction: reverse;
}

.rel-run:nth-child(12){
    top: 36.1rem;
    left: 37.5rem;
    width: 37.1rem;
    height: 0.9rem;
}

.rel-run:nth-child(13){
    top: 19.5rem;
    right: -1.1rem;
    width: 31rem;
    height: 0.9rem;
    transform:rotate(270deg);
}

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

.panah{
    position: absolute;
}

.panah:nth-child(14){
    content: url('../css/tools/panah-l.svg');
    width: 2rem;
    top: 3.6rem;
    left: 55rem;
}

.panah:nth-child(15){
    content: url('../css/tools/panah-l.svg');
    width: 2rem;
    top: 3.6rem;
    left: 27rem;
}

.panah:nth-child(16){
    content: url('../css/tools/panah-r.svg');
    width: 2rem;
    top: 11.5rem;
    left: 40rem;
}

.panah:nth-child(17){
    content: url('../css/tools/panah-l.svg');
    width: 2rem;
    top: 19.5rem;
    left: 20rem;
}

.panah:nth-child(18){
    content: url('../css/tools/panah-r.svg');
    width: 2rem;
    top: 24rem;
    left: 20rem;
}

.panah:nth-child(19){
    content: url('../css/tools/panah-l.svg');
    width: 2rem;
    top: 29.8rem;
    left: 50rem;
}

.panah:nth-child(20){
    content: url('../css/tools/panah-r.svg');
    width: 2rem;
    top: 35.6rem;
    left: 50rem;
}

.panah:nth-child(21){
    content: url('../css/tools/panah-a.svg');
    width: 2rem;
    top: 30rem;
    right: 13.7rem;
}

.panah:nth-child(22){
    content: url('../css/tools/panah-a.svg');
    width: 2rem;
    top: 6rem;
    right: 13.7rem;
}

.lable-name-rel{
    position: absolute;
    width: 10rem;
    height: 1.4rem;
    background: #717171;
    color: #2F3231;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

[data-status=st1] .lable-name-rel{
    background: #4CAF50;
}

.lable-name-rel:nth-child(23){
    top: 11.8rem;
    right: 25rem;
}

.lable-name-rel:nth-child(24){
    top: 24.4rem;
    right: 25rem;
    height: 1.3rem;
}

.lable-name-rel:nth-child(25){
    top: 18rem;
    right: 9.7rem;
    height: 1.3rem;
    transform:rotate(270deg);
}

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

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

.klik-layout{
    position: absolute;
    background: transparent;
    opacity: 0.5;
}

.klik-layout:nth-child(26){
    top: 0.5rem;
    left: 15.5rem;
    width: 26.5rem;
    height: 6.3rem;
}

.klik-layout:nth-child(27){
    top: 0.5rem;
    left: 42.6rem;
    width: 26.5rem;
    height: 6.3rem;
}

.klik-layout:nth-child(28){
    top: 16.7rem;
    left: 2.5rem;
    width: 40.4rem;
    height: 10.5rem;
}

.klik-layout:nth-child(29){
    top: 27rem;
    right: 2.7rem;
    width: 8.5rem;
    height: 7.1rem;
}

/* 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;
}