:root {

    --color-nav-item:#9D9D9D;
    --bg-nav-item:#292929;
    --bg-nav-link-active:#2F2F2F;
    --color-nav-link-active:white;
    --border-nav-tabs:#3E4144;
    --color-table:white;
    --bg-select-costum:#3C3C3C;
    --color-select-costum:#8E8E8E;
    --brd-select-costum:#8E8E8E;

}
    
[data-theme="dark"] {

    --color-nav-item:#9D9D9D;
    --bg-nav-item:#292929;
    --bg-nav-link-active:#2F2F2F;
    --color-nav-link-active:white;
    --border-nav-tabs:#3E4144;
    --color-table:white;
    --bg-select-costum:#3C3C3C;
    --color-select-costum:#8E8E8E;
    --brd-select-costum:#8E8E8E;

}

.section{
    width: 100%;
    padding: 1rem;
}

@media screen and (max-width: 1440px) {
    .section{
        padding: 0.5rem;
    }
}

.ml-4{
    margin-left: 4rem !important;
}

.nav-item{
    margin-right: 0.5rem;
    background: var(--bg-nav-item);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.nav-link{
    color: var(--color-nav-item);
    font-size: 1.2rem;
}

.nav-link:hover{
    color: var(--color-nav-item);
    border: none;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    background: var(--bg-nav-link-active);
    color: var(--color-nav-link-active);
    border: 2px solid var(--border-nav-tabs);
    border-bottom: 2px solid var(--bg-nav-link-active);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.nav-tabs {
    border-bottom: none !important;
}

.card-tab{
    width: 100%;
    height: 95vh;
    background: var(--bg-nav-link-active);
    border-radius: 0.3rem;
    padding: 1rem;
}

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

@media screen and (max-width: 1440px) {
    .card-tab{
        height: 91vh;
    }
}

@media screen and (height: 900px) {
    .card-tab{
        height: 92.5vh;
    }
}

:-webkit-full-screen .card-tab{
    height: 95vh;
}

/* Border Corrective Color */
.gridtable tbody .cor-thp-1 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #585858 15%);
}

.gridtable tbody .cor-thp-2 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #38AAEB 15%);
}

.gridtable tbody .cor-thp-3 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #C4C4C4 15%);
}

.gridtable tbody .cor-thp-4 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #FFEC05 15%);
}

.gridtable tbody .cor-thp-5 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #EFCE00 15%);
}

.gridtable tbody .cor-thp-6 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #FF7A00 15%);
}

.gridtable tbody .cor-thp-7 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #4EA50C 15%);
}

.gridtable tbody .cor-thp-8 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #297A40 15%);
}

.gridtable tbody .cor-thp-9 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #532f0c 15%);
}

.gridtable tbody .cor-thp-10 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #BF2216 15%);
}

.dec-thp{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    margin-left: 2rem;
    margin-right: 0.5rem;
    margin-top: 0.8rem;
}

.dcor-thp-1{
    background: #585858;
    border: 1px solid #585858;
}

.dcor-thp-2{
    background: #38AAEB;
    border: 1px solid #38AAEB;
}

.dcor-thp-3{
    background: #C4C4C4;
    border: 1px solid #C4C4C4;
}

.dcor-thp-4{
    background: #FFEC05;
    border: 1px solid #FFEC05;
}

.dcor-thp-5{
    background: #EFCE00;
    border: 1px solid #EFCE00;
}

.dcor-thp-6{
    background: #FF7A00;
    border: 1px solid #FF7A00;
}

.dcor-thp-7{
    background: #4EA50C;
    border: 1px solid #4EA50C;
}

.dcor-thp-8{
    background: #297A40;
    border: 1px solid #297A40;
}

.dcor-thp-9{
    background: #532f0c;
    border: 1px solid #532f0c;
}

.dcor-thp-10{
    background: #BF2216;
    border: 1px solid #BF2216;
}

/* end status tahap */

/* Border Preventive Color */
.gridtable tbody .prev-thp-1 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #585858 15%);
}

.gridtable tbody .prev-thp-2 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #C4C4C4 15%);
}

.gridtable tbody .prev-thp-3 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #FFEC05 15%);
}

.gridtable tbody .prev-thp-4 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #4EA50C 15%);
}

.gridtable tbody .prev-thp-5 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #297A40 15%);
}

.dec-thp{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    margin-left: 2rem;
    margin-right: 0.5rem;
    margin-top: 0.8rem;
}

.dprev-thp-1{
    background: #585858;
    border: 1px solid #585858;
}

.dprev-thp-2{
    background: #C4C4C4;
    border: 1px solid #C4C4C4;
}

.dprev-thp-3{
    background: #FFEC05;
    border: 1px solid #FFEC05;
}

.dprev-thp-4{
    background: #4EA50C;
    border: 1px solid #4EA50C;
}

.dprev-thp-5{
    background: #297A40;
    border: 1px solid #297A40;
}

/* end status tahap */

/* Border Predictive Color */
.gridtable tbody .pred-thp-1 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #585858 15%);
}

.gridtable tbody .pred-thp-2 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #EFCE00 15%);
}

.gridtable tbody .pred-thp-3 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #FF7A00 15%);
}

.gridtable tbody .pred-thp-4 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #C4C4C4 15%);
}

.gridtable tbody .pred-thp-5 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #757575 15%);
}

.gridtable tbody .pred-thp-6 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #FFEC05 15%);
}

.gridtable tbody .pred-thp-7 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #4EA50C 15%);
}

.gridtable tbody .pred-thp-8 td:first-child{
    background: linear-gradient(-90deg,#3E4144 85%, #297A40 15%);
}

.dec-thp{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    margin-left: 2rem;
    margin-right: 0.5rem;
    margin-top: 0.8rem;
}

.dpred-thp-1{
    background: #585858;
    border: 1px solid #585858;
}

.dpred-thp-2{
    background: #EFCE00;
    border: 1px solid #EFCE00;
}

.dpred-thp-3{
    background: #FF7A00;
    border: 1px solid #FF7A00;
}

.dpred-thp-4{
    background: #C4C4C4;
    border: 1px solid #C4C4C4;
}

.dpred-thp-5{
    background: #757575;
    border: 1px solid #757575;
}

.dpred-thp-6{
    background: #FFEC05;
    border: 1px solid #FFEC05;
}

.dpred-thp-7{
    background: #4EA50C;
    border: 1px solid #4EA50C;
}

.dpred-thp-8{
    background: #297A40;
    border: 1px solid #297A40;
}

/* end status tahap */

.on-l{
    border: 1px solid #FFEC05;
    background: #FFEC05;
    color: black;
}

.on-m{
    border: 1px solid #FFEC05;
    background: transparent;
    color: #FFEC05;
}

.of-l{
    border: 1px solid #979797;
    background: #979797;
    color: white;
}

.of-m{
    border: 1px solid #979797;
    background: transparent;
    color: #979797;
}

.pic{
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    text-align: center;
    font-size: 0.9rem;
    padding-top: 3px;
    margin-left: 0.5rem;
    cursor: pointer;
    position: relative;
}

.tooltipText {
    background-color: white;
    color: black;
    position: absolute;
    bottom: 1rem;
    left: -2.2rem;
    width: auto;
    padding: 5px 5px;
    border-radius: 5px;
    font-size: 14px;
    opacity: 0;
    transition: all .5s;
    white-space: nowrap;
    z-index: 1;
}

.pic:hover .tooltipText{
    opacity: 1;
    transform: translateY(-10px);
    z-index: 1;
}

.sp-closed{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    background: #297A40;
    border: 1px solid #297A40;
    margin-left: 2rem;
    margin-right: 0.5rem;
    margin-top: 0.4rem;
}

.sp-waitpart{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    background: #EFCE00;
    border: 1px solid #EFCE00;
    margin-left: 2rem;
    margin-right: 0.5rem;
    margin-top: 0.4rem;
}

.sp-workin{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    background: #FFEC05;
    border: 1px solid #FFEC05;
    margin-left: 2rem;
    margin-right: 0.5rem;
    margin-top: 0.4rem;
}

.sp-released{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    background: #38AAEB;
    border: 1px solid #38AAEB;
    margin-left: 2rem;
    margin-right: 0.5rem;
    margin-top: 0.4rem;
}

.sp-partready{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    background: #FF7A00;
    border: 1px solid #FF7A00;
    margin-left: 2rem;
    margin-right: 0.5rem;
    margin-top: 0.4rem;
}

.detail{
    color: #B1B1B1;
}

.detail:hover{
    color: #B1B1B1;
}

/* .tr-ml{
    background: #3E4144;
}

.tabel-body{
    border-collapse:separate; 
    border-spacing: 0 1rem;
} */

/* Table */
.gridtable tbody {
    display: block;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 1rem;
}

@media screen and (height: 1080px) {

    .gridtable tbody {
        max-height: 82vh;
    }

}

.table>:not(:first-child) {
    border-top: none !important;
}

/* .gridtable tbody::-webkit-scrollbar{
    display: none;
} */

.gridtable tbody::-webkit-scrollbar{
    width: 0.6rem;
}

/* Track */
.gridtable tbody::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}
   
/* Handle */
.gridtable tbody::-webkit-scrollbar-thumb {
    background: white; 
    border-radius: 10px;
}
  
/* Handle on hover */
.gridtable tbody::-webkit-scrollbar-thumb:hover {
    background: white; 
}

.gridtable thead,
.gridtable tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
    font-family: "Font Kanit";
}

.gridtable thead {
    width: 100%;
}

.gridtable thead {
    position: relative;
}

th{
    font-family: "Font Kanit";
    color: var(--color-table);
    font-size: 1.6rem;
}

@media screen and (max-width: 1440px) {
    th{
        font-size: 1.2rem;
    }
}

.gridtable thead th:last-child:after {
    display: none;
}

.gridtable tbody tr{
    margin-bottom: 2rem;
    background: #3E4144;
    border-radius: 0.5rem;
    border-bottom: 1px solid transparent;
}

.gridtable tbody tr td{
    padding: 8px;
    vertical-align: middle;
    color: var(--color-table);
    font-size: 1.6rem;
}

@media screen and (max-width: 1440px) {
    .gridtable tbody tr td{
        font-size: 1.1rem;
    }
}

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

.gridtable tbody tr:last-child {
    margin-bottom: 5rem;
}

.gridtable tbody tr td:first-child{
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    padding-left: 0.5rem;
}

.gridtable thead tr th:first-child{
    padding-left: 0.5rem;
}

.th-1,
.td-1{
    width: 5%;
    text-align: center;
}

/* .gridtable tbody tr .td-1 {
    padding: 0.5rem 8px;
} */

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

.th-3,
.td-3{
    width: 10%;
    text-align: center;
}

.th-4,
.td-4{
    width: 15%;
    text-align: center;
}

.th-5,
.td-5{
    width: 15%;
    text-align: center;
}

.th-6,
.td-6{
    width: 10%;
    text-align: center;
}

.th-7,
.td-7{
    width: 10%;
    text-align: center;
}

.th-8,
.td-8{
    width: 10%;
    text-align: center;
}

.td-8{
    text-align: right;
}

.th-9,
.td-9{
    width: 8%;
    text-align: center;
}

.select-costum{
    background: var(--bg-select-costum) url('icon/icon-down-select.svg') no-repeat 90% !important;
    color: var(--color-select-costum) !important;
    padding: 0.5rem 1rem;
    border: 1px solid var(--brd-select-costum);
}

.select-costum.down{
    background: var(--bg-select-costum) url('icon/icon-up-select.svg') no-repeat 90% !important;
}

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

.icon-details{
    content: url('icon/icon-details.svg');
    width: 20%;
    margin-top: 0.3rem;
    margin-right: 1.5rem;
}

.footer{
    right: 3.7rem !important;
}