/* Variabel Khusus */
:root{
  --oren:#FE5000;
  --bg:#F2F2F2;
  --bgmain:#FFFFFF;
  --bgcon:#ffe9da;
  --bgnav:#101820;
  --subitem:#6b6b6b;
  --shadow: 0 3px 5px #2F2D2D;
  --antri: #FFCF03;
  --produksi : #0003cc;
  --selesai : #17A800;
}
*{margin: 0; padding: 0;}
body{margin:0; padding:0; background: #F2F2F2; font-family: serif;}
header{padding: 10px 100px; display: flex; background: #101820; box-shadow: 0 3px 5px #2F2D2D; position: sticky; top: 0; z-index: 20;}
header h1{color: #fff; float: left;margin: 0; padding: 0; font-size: 20px;}
header small{font-size: 14px; color:#FE5000;}
nav{margin-left: auto; bottom: 0; order: 2;}
nav .nav{float: right; margin-left: -40px; margin-top: 5px; margin-bottom: 5px;}
nav .nav li a{padding: 5px 10px; text-decoration: none; background: #FE5000; border-radius: 5px; color: #fff; outline:none;}
nav .nav li{list-style: none; display: inline; position: relative;}

nav .nav li.dropdown{
  display: inline;
}

nav .nav .dropdown-content {
  display: none;
  position: absolute;
  background-color: #CF4100;
  margin-top: 5px;
  min-width: 160px;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 2px;
}

nav .nav .dropdown-content a {
  color: #ffffff;
  padding: 5px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

nav .nav .dropdown-content a:hover {background-color: #CF4100;}

nav .nav .dropdown:hover .dropdown-content {
  display: block;
}

nav .nav li a:hover{background: #fff; border-radius: 5px; background: #CF4100;}
nav .tombolburger{padding: 5px 10px; display: none; background: #FE5000; border-radius: 5px; color: #fff; outline:none; cursor: pointer;}
section{max-width:940px; margin: auto; margin-top: 20px; padding: 20px; min-height: 300px;}
section .page-container{max-width: 640px;}
section .page-container input{width:300px; padding: 10px; border-radius: 3px; border:solid 1px #B6B6B6; }
section .page-container input[type="submit"]{width:322px; padding: 10px; border-radius: 3px; border:solid 1px #1ABC9C; background: #1ABC9C; color: #fff; font-weight: bold;}
section .page-container input:focus{box-shadow: 0 0 5px #B6B6B6;}
section .page-container input[type="submit"]:focus,section .page-container input[type="submit"]:hover{background: #16A085; border: solid 1px #16A085;}
section .page-container .er{width:302px; padding: 10px; border-radius: 3px; border:solid 1px #E74C3C; background: #E74C3C; color: #fff; font-weight: bold; margin-left: 2px; margin-bottom: 5px;}
section .page-container .ya{width:302px; padding: 10px; border-radius: 3px; border:solid 1px #55D95D; background: #55D95D; color: #fff; font-weight: bold; margin-left: 2px; margin-bottom: 5px;}

section > h2{padding: 0; margin: 0 0 10px 0; font-size: 18px;}
section > h2 span{color : #E76800;}
section > h2 a{text-decoration: none; color: #BB5400;}
section > h2 a:hover{color: #E76800;}
section > p{margin-bottom: 5px;}
section .msg{padding: 3px 10px; display: inline-block; margin-bottom: 5px; border: solid 2px; color: #FFFFFF; font-weight: bold;}
section .ok{padding: 10px; background: #1FB400; opacity: 50%; border-color: #136E00;}
section .er{width:302px; padding: 10px; border-radius: 3px; border:solid 1px #E74C3C; background: #E74C3C; color: #fff; font-weight: bold; margin-left: 2px; margin-bottom: 5px;}
section .ya{width:302px; padding: 10px; border-radius: 3px; border:solid 1px #55D95D; background: #55D95D; color: #fff; font-weight: bold; margin-left: 2px; margin-bottom: 5px;}

/* Form WO */
section > form#wo > label, input, textarea{clear: both; display: block;}
section > form#wo > label{padding: 10px 0; border-radius: 5px;}
section > form#wo > input[type='text'], input[type='email'], input[type='password']{width: 350px; padding:10px; border:solid 1px #124191; border-radius:3px; margin-bottom:5px; line-height:14px; font-size:14px;}
section > form#wo > textarea{width: 750px; height: 80px; resize: none; padding: 5px; font-family: monospace;}
section > form#wo > input[type='file']{width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden;position: absolute; z-index: -1;}
section > form#wo > input[type='file'] + label {font-size: 14px; font-weight: bold; color: #ffffff; background-color: #D64848; display: inline-block; cursor: pointer; padding: 10px; margin: 10px 0;}
section > form#wo > input[type='file']:focus + label, input[type='file'] + label:hover{background-color: #FE5000;}
section > form#wo > textarea{padding:10px; border:solid 1px #124191; border-radius:3px; margin-bottom:5px; line-height:14px; font-size:14px;}
section > form#wo > input[type='submit']{padding: 12px 20px; margin: 12px 0 0 0; border:none; background: #DA2E00; border-radius: 5px; color: #FFFFFF; font-weight: bold; cursor: pointer; text-transform: uppercase; display: block;}
section > form#wo > input[type='date']{padding: 10px; font-weight: bold;}
/* Form Detail Job Order */
section > form#detailjo > table.detailjo > input, textarea{clear: both;display: block;}
section > form#detailjo > table.detailjo td{border: none;}
section > form#detailjo > table.detailjo td > input[type='text']{width: 550px; padding:10px; border:solid 1px #124191; border-radius:3px; margin-bottom:5px; line-height:14px;}
section > form#detailjo > table.detailjo td > textarea{width: 450px; height: 200px; padding: 5px; resize: vertical; font-family: monospace; border:solid 1px #124191; border-radius:3px; margin-bottom:5px; line-height:14px;}
section > form#detailjo > table.detailjo td > input[type='date'], input[type='number']{padding: 10px; border:solid 1px #124191; border-radius:3px; margin-bottom:5px; line-height:14px; font-size:14px;}
section > form#detailjo > table.detailjo td > input[type='submit']{display: inline-block; padding: 12px 20px; margin: 12px 0 0 0; border:none; background: #DA2E00; border-radius: 5px; color: #FFFFFF; font-weight: bold; cursor: pointer; text-transform: uppercase; display: block;}
section > form#detailjo > table.detailjo td > select option{padding: 10px}
/* Form Job Order */
section > form#joborder > input{clear: both; display: block}
section > form#joborder > input[type='submit']{padding: 12px 20px; margin: 12px 0 0 0; border:none; background: #DA2E00; border-radius: 5px; color: #FFFFFF; font-weight: bold; cursor: pointer; text-transform: uppercase; display: block;}
section > form#joborder > table.input_fields_wrap td{text-align: center; margin: auto;}
section > form#joborder > table.input_fields_wrap > input, textarea{clear: both;display: block;}
section > form#joborder > table.input_fields_wrap td > input[type='text']{width: 300px; padding: 10px 3px;}
section > form#joborder > table.input_fields_wrap td > input[type='number']{width: 80px; padding: 10px 3px;}
section > form#joborder > table.input_fields_wrap td > input[type='date']{padding: 10px 3px; width: 120px; text-align: center;}
section > form#joborder > table.input_fields_wrap td > textarea{padding: 5px; resize: vertical; font-family: monospace; width: 200px; height: 100px;}
section > form#joborder > table.input_fields_wrap td > a{display:inline-block; margin: auto; padding: 5px 7px; text-decoration: none; border-radius: 5px; color: #fff; outline:none;}
section > form#joborder > table.input_fields_wrap td > a.add_field_button{background-color: #007408;}
section > form#joborder > table.input_fields_wrap td > a.remove_field{background-color: #EC0101;}

section > .tombol a{display: inline-block; margin: 5px 0px; padding: 5px 10px; text-decoration: none; background: #DA2E00; border-radius: 5px; color: #fff; outline:none;}
section > .tombol a:hover{background: #7E1B00;}

section > .back a{margin: 20px auto 0; display: block; padding: 5px 10px; text-decoration: none; color: #003EDE; outline:none; text-align: center; font-size: 0.75rem;}
/* section > .tombol a:hover::after{content: attr(data-title);background: #388399; } */
section a.delete{display: inline-block; position: relative; margin-top: 5px; padding: 3px 5px; text-decoration: none; border-radius: 5px; color: #DA2E00; outline:none;}
section a.delete:hover::after{content: attr(data-title); background-color: #950000; color: #fff; padding: 5px; border-radius: 4px; font-size: 12px; line-height: 14px; display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 1;}
section a.add{display: inline-block; margin: 5px 0px; padding: 5px 10px; text-decoration: none; background: #DA2E00; border-radius: 5px; color: #fff; outline:none;}

/* Tabel */
section table{width: 100%; table-layout: auto; border-collapse: collapse;}
section table th{background: rgb(254,80,0); color: #FFFFFF; padding: 5px; border: solid 1px #ffffff;}
section table tr:nth-child(odd){background: #fff1e7;}
section table tr{background: #ffffff;}
section table td{padding: 5px; border: solid 1px #ffffff;}
section table td.Antri{background: #FFCF03; font-weight: bold; text-align: center; color: #FFFFFF}
section table td.Proses{background: #17A800; font-weight: bold; text-align: center; color: #FFFFFF}
section table td.Selesai{background: #17A800; font-weight: bold; text-align: center; color: #FFFFFF}
section table td.Diambil{background: #003EDE; font-weight: bold; text-align: center; color: #FFFFFF}
section table td.Batal{background: #DE0000; font-weight: bold; text-align: center; color: #FFFFFF}

section table td.Belum{background: #DE0000; font-weight: bold; text-align: center; color: #FFFFFF}
section table td.DP{background: #FFD600; font-weight: bold; text-align: center; color: #FFFFFF}
section table td.Lunas{background: #17A800; font-weight: bold; text-align: center; color: #FFFFFF}
section table small{display: block; font-size: 0.8rem;}
section table small.hidden{display: none; font-size: 0.8rem;}

section table.client tr{background: none;}
section table.client td{border: none;}
section table.client td:nth-child(1){max-width: 30%;}
section table.client td input{display: inline-block;}
section table.client input[type='text']{width: 200px; padding: 3px;}
section table.client input[type='submit']{padding: 5px 10px; border:none; background: #DA2E00; border-radius: 5px; color: #FFFFFF; font-weight: bold; cursor: pointer; text-transform: uppercase; display: inline;}
section table.client td a{text-decoration: none; color: #E76800; outline:none;}

section table#list tr:nth-child(odd){background: #fff1e7;}
section table#list tr{background: #ffffff;}
section table#list small{display: block;}
section table#list small.hidden{display: none;}

table#list td.antri{font-weight: bold; background: var(--antri); color : var(--bgmain)}
table#list td.produksi{font-weight: bold; background: var(--produksi); color : var(--bgmain)}
table#list td.selesai{font-weight: bold; background: var(--selesai); color : var(--bgmain)}

section table.detailjo tr{background: none;}

section table a#detail{display:inline-block; margin: auto; padding: 5px 7px; text-decoration: none; border-radius: 5px; color: #fff; outline:none;}
section table a#detail.detail{background-color: #007408}
section table a#wo.link_wo{color: #000000; text-decoration: none; font-weight: bold;}
section table a#wo.link_wo:hover{color: #DA2E00; text-decoration: none;}
section table a#detail.cancel{position: relative; background-color: #EC0101;}
section table a#detail.cancel:hover::after{ content: attr(data-title); width: 150px; background-color: #950000; color: #fff; padding: 5px; border-radius: 4px; font-size: 12px; line-height: 14px; display: inline-block; position: absolute; top: -100%; left: -150%; transform: translateX(-50%); z-index: 1;}
section table a#detail.antridesain{background-color: #E20000;}
section table a#detail.desain{background-color: #E2A900;}
section table a#detail.antri{background-color: #56E200;}
section table a#detail.produksi{background-color: #00E2B2;}
section table a#detail.finishing{background-color: #003FE2;}
section table a#detail.done{background-color: #7100E2;}
section table a#detail.pickup{background-color: #E2009C;}

section a#detail.cancel{position: relative; }
section a#detail.cancel:hover::after{ content: attr(data-title); width: 300px; background-color: #950000; text-align: center; color: #fff; padding: 5px; border-radius: 4px; font-size: 12px; line-height: 14px; display: inline-block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 1;}
#footer{width:auto; text-align:center; position: relative; bottom:0;font-size: 10px;}
.footer{padding:5px;}
.footer > span{color: #ff0000; font-size: 13px}

.custom-select {
  /* width: 100px; */
  position: relative;
}

.custom-select select {
  appearance: none;
  width: 110px;
  /* font-size: 1.15rem; */
  padding: 5px;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
}

/* .custom-select::before,
.custom-select::after {
  --size: 3px;
  content: "";
  position: absolute;
  right: auto;
  pointer-events: none;
}

.custom-select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 22%;
}

.custom-select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 30%;
} */



#pagi{width:100%; margin:20px auto 0; padding:0; overflow: hidden; text-align: center; display: block;}
a.page{padding:3px 10px; margin:2px; background:var(--bgmain); text-align:center; text-decoration:none; color:var(--oren); border-radius: 5px; display: inline-block; box-shadow: var(--shadow);}
a.page2{padding:3px 10px; margin:2px; background:var(--oren); text-align:center; text-decoration:none; color:var(--bgmain); border-radius: 5px; display: inline-block; box-shadow: var(--shadow); font-weight: bold;}
a.page_pre{padding:3px 10px; margin:2px; background:var(--oren); text-align:center; text-decoration:none; color:var(--bgmain); border-radius: 5px; display: inline-block; box-shadow: var(--shadow);}
a.page_nex{padding:3px 10px; margin:2px; background:var(--oren); text-align:center; text-decoration:none; color:var(--bgmain); border-radius: 5px; display: inline-block; box-shadow: var(--shadow);}
.tik{padding:3px; margin:2px;text-align:center; float:left}

/* Laptop */
@media(max-width: 992px){
  html{
    font-size: 85%;
  }
  header{padding: 10px 40px;}

}
/* Tablet */
@media(max-width: 768px){
  header{padding: 10px 40px;}
  nav .nav .dropdown-content {
    margin-top: -5px;
  }
  .tombolburger{display: block !important;}
  nav ul.nav{display: none;}

  nav ul.nav.aktif{
		display:inline-block;
		position: absolute;
		top: 35px;
		background: #212121;
		padding: 10px !important;
		right: 60px;
    z-index: 10;
	}

	nav ul.nav.aktif li a{
    margin-bottom: 5px;
    text-align: center;
		display: block !important;
	}
  section > form#wo > textarea{width: 80%}
  section table.detailjo input, section table.detailjo textarea{width: 95% !important;}
  section table.detailjo td:nth-child(1){width: 30%}
}
/* Mobile Phone */
@media(max-width: 576px){
  nav ul.nav{display: none;}

  nav ul.nav.aktif{
		display:inline-block;
		position: absolute;
		top: 35px;
		background: #212121;
		padding: 10px 20px;
		right: 10px;
    z-index: 10;
	}

	nav ul.nav.aktif li a{
    margin-bottom: 5px;
    text-align: center;
		display: block !important;
	}
  header{padding: 10px 30px;}
  section{padding: 10px;}
  section > h2{font-size: 1.2rem;}
  section > table{font-size: 0.9rem;}
  section > table th:not(.header), section > table td:not(.header){display: none;}
  section table small{display: block;}
  section table small.hidden{display: block;}
  section > form#wo > textarea{width: 80%}
  section table#list{max-width: 100%; margin: auto; font-size: 0.875rem;}
  section table#list th:not(.header), section table#list td:not(.header){display: none;}
  section table#list small.hidden{display: block;}
  section table#list td{word-wrap: break-word; padding: 3px;}
  section table#list td a.cancel{display: none;}
  section table.detailjo{font-size: 1rem;}
  section table.detailjo td{display: block;}
  section table.detailjo input, section table.detailjo textarea{width: 90% !important;}
  section table.detailjo input[type='submit']{width: auto !important; padding: 10px !important;}
  section table.detailjo td:nth-child(1){width: 100%; font-weight: bold; font-size: 1.1em;}

  section table.input_fields_wrap td, section table.input_fields_wrap td > select{display : block; text-align: left;}
  section table.input_fields_wrap th{display : none;}
  section table.input_fields_wrap td::before{content: attr(data-header); display : block; text-align: left; margin-bottom: 5px;}
  section table.input_fields_wrap td > textarea{width: 90% !important;}
}