/* CSS Document */

@page {
    size:A4;

} 
@media screen{
body{
    width:calc(100% - 40px);
    max-width:1080px;
    margin:auto;
    }
}

@media print{
    body{
        font-size:5pt !important;
    }
}
#header_bill {
    width:100%;
}
#header_bill h1.bill{
    text-align: center;
    font-size:24pt;
    line-height: 30mm;
}
div.billHeaderWrapper{
    width:100%;
    display: flex;
    justify-content: space-between;
}
div.billLeft{
    width:calc(55% - 10mm);
}
div.billRight{
    width:calc(45% - 10mm);
}
p.bill_company{
    font-size:15pt;
    font-weight: bold;
}
p.gs_company{
    font-size:14pt;
    margin-top:10mm;
}

dl.billNum {
    margin-top:10mm;
    width:calc(37% - 3mm);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom:1pt solid #000;
    float: right;
    margin-bottom: 20mm;
}
dl.billNum dt{
    padding:3mm;
    width:calc(32% - 6mm);
    border-top:1pt solid #000;
}
dl.billNum dd{
    padding:3mm;
    width:calc(68% - 6mm);
    border-top:1pt solid #000;
}
dl.billTitle{
    margin-top:10mm;
    width:calc(63% - 3mm);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom:1pt solid #000;
    float:left;
}
dl.billTitle dt,
dl.billTitle dd{
    padding:3mm;
    border-top:1pt solid #000;
}
dl.billTitle dt{
    width:calc(28% - 6mm);
}
dl.billTitle dd{
    width:calc(72% - 6mm);
}
.bold{
    font-weight: bold;
}
table.detail{
    clear: both;
    margin-top:20mm;
    width: 100%;
    border-top:2pt solid #000;
    border-bottom:2pt solid #000;
}
table.detail thead{
    background:#efefef;
    font-weight: bold;
}
table.detail th{
    font-weight: bold;
    padding:3mm;
}
table.detail td{
    padding:3mm;
}
table.detail thead th:nth-child(1){
    width:calc(40% - 6mm);
}
table.detail thead th:nth-child(2){
    width:calc(20% - 6mm);
}
table.detail thead th:nth-child(3){
    width:calc(20% - 6mm);
}
table.detail thead th:nth-child(4){
    width:calc(20% - 6mm);
    text-align: center;
}
table.detail tr td:nth-child(4){
    text-align: right;
}






table.detail td{
    border-top:1pt solid #000;
}
dl.total {
    width:calc(40% - 12mm);
    float: right;
    margin-top:3mm;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom:12mm;
}
dl.total dt,
dl.total dd{
    width:calc(50% - 6mm);
    padding:3mm;
    border-bottom:1pt solid #000;
}
dl.total dd{
    text-align: right;
}
dl.total .total{
    font-weight: bold;
    border-bottom:2pt solid #000;
}

dl.payment {
    width:calc(60% - 12mm);
    float: left;
    margin-top:calc(12mm + 1em);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom:12mm;
}
dl.payment dt,
dl.payment dd{
    padding:3mm;
    border-bottom:1pt solid #000;
}
dl.payment dt{
    width:calc(25% - 6mm);
}
dl.payment dd{
    width:calc(75% - 6mm);
}
dl.other{
    clear: both;
}
dl.other dd{
    width:100%;
    height: 30mm;
    box-sizing: border-box;
    border:1pt solid #000;
}



p.pay {
    margin-top:12mm;
}