/* Variabel Khusus */
:root{
    --oren:#FE5000;
    --bg:#F2F2F2;
    --bgmain:#FFFFFF;
    --bgcon:#ffe9da;
    --bgnav:#101820;
    --subitem:#6b6b6b;
    --shadow: 0 3px 5px #2F2D2D;
    --antri: #b10000;
    --produksi : #0003cc;
    --selesai : #24b600;
}
*{margin: 0; padding: 0;}
html{font-size: 16px;}
body{min-height: 100vh; margin: 0;padding: 0; background: var(--bg); font-family: serif; display: flex; flex-direction: column; }
header{padding: 15px 100px; display: flex; background: var(--bgnav); box-shadow: var(--shadow); top: 0; z-index: 10; text-align: center; color: var(--bg);}
header h1{clear : both; margin : auto; padding: 10px; display: flex; font-size: 20px;}
header img{clear: both; width: 150px; margin :auto; display: flex;}

section{margin: 30px auto 20px; width: 960px; text-align: center;}
section label{clear:both; padding: 5px; display: grid;}
section input{clear: left;  padding: 5px; display: inline;}
section input[type='text']{text-align: center;}
section input[name='client']{text-align: center; text-transform: uppercase;}
section input[type='submit']{clear: both; display : block; width:200px; padding:10px; border-radius:3px; border:none; text-transform:uppercase; font-weight:bold; background: var(--oren); color:#ffffff; cursor:pointer; margin: 10px auto 10px;}
#top{width: 100%; display: block; margin-bottom: 10px; overflow: hidden;}
#top h1{margin: 0; font-size: medium; padding: 10px;}
#side{clear: both; width: 20%; float:left; border: solid 2px var(--oren); background: var(--bgcon); padding:10px; overflow:hidden; border-radius: 5px;}
#side h3{margin:0; color: var(--oren); text-align: center;}
#side ul{margin: 0; padding: 0; list-style-type: none; list-style-position: outside; line-height: 30px; margin-left: 10px; text-align: left;}
#side li a{text-decoration: none; color: var(--oren);}
#side li a:hover{text-decoration: underline;}
#side .jml{margin-left: 10px; padding: 3px 5px; background: var(--oren); display: inline; border-radius: 15%; font-size: small; color: var(--bgmain); font-weight: bold;}
#side .wa{text-align: left; text-decoration: none; display: block; font-size: 0.9rem; margin-top: 10px;}
#side .wa a{text-align: left; text-decoration: none; color: var(--selesai); font-weight: bold; font-size: 1rem;}
#main{width: 72%; float : right; border: solid 1px var(--bgmain); background: var(--bgmain); border-radius: 5px; padding: 10px;}
#main h2{margin: 0; font-size: larger; margin-bottom: 5px; text-align: center;}
/* Table List */
table.list{margin: auto; width: 100%;}
table.list th{padding: 10px 10px; background: var(--oren); color: var(--bgmain);}
table.list tr:nth-child(odd){background: var(--bgcon); font-size: 12px;}
table.list tr:nth-child(even){font-size: 20px;}

table.list tr{background:#f4f4f4}
table.list td{padding: 3px;}
table.list td.done{background: #a6ff8f;}

/* Form WO */
form#wo{text-align: left; margin-left: 20px;}
form#wo > label, input, textarea{clear: both; display: block;}
form#wo > label{padding: 10px 0; border-radius: 5px; text-align: left;}
form#wo > input[type='text'], input[type='email']{width: 350px; padding:10px; border:solid 1px #124191; border-radius:3px; margin-bottom:5px; line-height:14px; font-size:14px; text-align: left;}
form#wo > textarea{width: 750px; height: 80px; resize: none; padding: 5px; font-family: monospace;}
form#wo > textarea{width: 400px; padding:10px; border:solid 1px #124191; border-radius:3px; margin-bottom:5px; line-height:14px; font-size:14px;}
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;}
form#wo > input[type='date']{padding: 10px; font-weight: bold;}
form#wo .ket{color: var(--subitem); font-size: 0.56rem; display: block;}
form#wo input[name='status']{text-transform: capitalize;}
/* Footer */
footer{margin-top: auto; background: var(--bgnav); padding: 10px 100px; color: var(--bg); display: list-item; text-align: center;}
footer p{height: 30px; display: inline-block; margin: auto 5px; line-height: 0.5; vertical-align: middle;}
footer img{height: 30px; display: inline-block; margin: auto 10px;}

.er{padding: 10px 20px; background: var(--antri); color: var(--bgmain); font-weight: bold; text-align: center; border-radius: 5px;}
.ya{padding: 10px 20px; background: var(--selesai); color: var(--bgmain); font-weight: bold; text-align: center; border-radius: 5px;}

.msg.ok{display : inline-block; padding: 10px 20px; background: var(--selesai); color: var(--bgmain); font-weight: bold; text-align: center; border-radius: 5px; margin-bottom: 5px;}


#pagi{width:100%; margin:auto; 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){
    section{width: 80%;}
    footer{padding: 10px;}
}
  /* Tablet */
@media(max-width: 768px){
    section{display: block;}
    #top{width: 100%;}
    #side{float : none; width: 100%; margin-bottom: 10px; padding: 10px 0; border: none; text-align: center;}
    #side ul{margin-left: 0; display: list-item; text-align: center;}
    #side li{clear: both;  display: inline-block; border:solid 2px var(--oren); padding: 5px; line-height: 25px; overflow: hidden; height: 25px; border-radius: 5px; }
    #main{float : none; display:block; padding:10px 0; width: 100%; border: none;}
}
  /* Mobile Phone */
@media(max-width: 576px){
    html{font-size:0.8rem;}
    header{padding: 15px 10px; max-width: 100%;}
    header h1{font-size: 15px; padding: 0;}
    header img{width: 100px;}
    section{width:100%}
    table.list{width: 90%;}
    table.list td{word-wrap: break-word;}
    footer{padding: 10px 3px; font-size: 0.75rem;}
    form#wo input, textarea{max-width: 85%;}
}