.button-print-70 {
    padding: 0px 10px;
    margin-left: auto;
    margin-right: auto;
    width: 70vw;
}
.center-container {
    padding: 0px 10px;
    margin-left: auto;
    margin-right: auto;
    width: 70vw;
    height: 100%;
    background-color: #ffff;
}
.button-print-55 {
    padding: 0px 10px;
    width: 55vw;
}
.center-container-pagibig {
    padding: 0px 10px;
    margin-left: auto;
    margin-right: auto;
    width: 55vw;
    height: 100%;
    background-color: #ffff;
}

.border-triangle{
    border:5px solid #222;
    border-width:5px 5px 0 0;
    transform:translateX(-14px) rotate(45deg);
}

/* =============Flex layout ===========*/
.flexbox-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flexbox-item {
    /* background-color: #dfdfdf; */
    justify-content: space-between;
}
    
/* =============Grid layout ===========*/
.grid{
    background-color: #ffff;
    display:flex;
    flex-shrink: 0;
    align-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    display:grid;
    grid-template-columns: 1fr 350px 350px 350px 1fr;
    grid-template-rows: 16vh 10vh 10vh 130vh 25vh;
    grid-template-areas:
    "first first first first first"
    "second second second second second"
    "third third third third third"
    "forth-1 forth-1 forth-1 forth-1 forth-1"
    "fifth fifth fifth fifth fifth";
    /* background-color: yellow; */
    align-self: start;
    justify-self: start;
    grid-gap:0;
    height: 196vh;
    overflow: hidden;
}
.grid-print{
    background-color: #ffff;
    display:flex;
    flex-shrink: 1;
    align-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    display:grid;
    grid-template-columns: 1fr 350px 350px 350px 1fr;
    grid-template-rows: 200px 150px 150px 100px 100px;
    grid-template-areas:
    "first first first first first"
    "second second second second second"
    "third third third third third"
    "forth-1 forth-1 forth-1 forth-1 forth-1"
    "fifth fifth fifth fifth fifth";
    /* background-color: yellow; */
    align-self: start;
    justify-self: start;
    grid-gap:0;
    height: 100%;
    overflow: hidden;
}
/* =================First Row================= */
.f1rst{
    /* border: 1px solid #000; */
    grid-area: first;
    height: 16vh;
    /* background-color:red; */
    display:grid;
    grid-template-columns: 12% 32% 31% 1fr 15%;
    grid-template-rows: 55% 30% 15%;
    grid-template-areas:
    "icon-pg title title title m1"
    "icon-pg check1 check2 monthyear monthyear"
    "icon-pg footer footer monthyear monthyear";
    grid-gap:0;
    overflow: hidden;
}
.icon-pg{
    padding-left: 10px;
    /* border: 1px solid #333; */
    grid-area: icon-pg;
    background:url(../../images/govt/pagibig-logo.webp);
    width:100%;
    object-fit: cover;
    background-repeat: no-repeat;
    overflow: hidden; 
}
.title{
    font-size: 280%;
    padding-left: 5px;
    /* border: 1px solid #333; */
    grid-area: title;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.m1{
    font-size: 240%;
    /* border: 1px solid #333; */
    grid-area: m1;
    padding-right: 20px;
    text-align: end;
    overflow: hidden;
}
.check1{
    grid-area: check1;
    padding: 0 0 0 110px;
    overflow: hidden;
}
.check2{
    padding-left: 5px;
    grid-area: check2;
    padding: 0 0 0 80px;
    overflow: hidden;
}
.monthyear{
    border: 1px solid #333;
    grid-area: monthyear;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "month year";
    grid-gap:0;
    overflow: hidden;
}
.month{
    grid-area: month;
    text-align: center;
    overflow: hidden;
}
.year{
    grid-area: year;
    text-align: center;
    overflow: hidden;
}

.footer{
    /* border: 1px solid #333; */
    grid-area: footer;
    font-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 150px;
    overflow: hidden;
}
/* =================First Row================= */
/* =================Second Row================= */
.second{
    /* border: 1px solid #000; */
    grid-area: second;
    height: 10vh;
    display:grid;
    grid-template-columns: 50% 8% 17% 8% 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "name private sss govt code1 code2 code3";
    /* background-color: yellow; */
    grid-gap:0;
    overflow: hidden;
}
.name{
    padding-left: 5px;
    border: 1px solid #333;
    grid-area: name;
    overflow: hidden;
}
.private{
    padding-left: 5px;
    /* border: 1px solid #333; */
    border-top: 1px solid #333;
    border-bottom: 1px solid #333; 
    border-left: 1px solid #333;  
    grid-area: private;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}
.private-1{
    padding-left: 10px;
    border: 1px solid #333;
    grid-area: private;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    border-width:3px 3px 0 0;
    transform:translateX(-5px) rotate(45deg);
}

.sss{
    /* border: 1px solid #333; */
    border-top: 1px solid #333;
    border-bottom: 1px solid #333; 
    border-right: 1px solid #333;  
    grid-area: sss;
    overflow: hidden;
}
.govt{
    padding-left: 5px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333; 
    border-left: 1px solid #333;
    grid-area: govt;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}
.govt-1{
    padding-left: 5px;
    border: 1px solid #333;
    grid-area: govt;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    border-width:3px 3px 0 0;
    transform:translateX(-5px) rotate(45deg);
}
.code1{
    border-top: 1px solid #333;
    border-bottom: 1px solid #333; 
    border-right: 1px solid #333; 
    grid-area: code1;
    text-align: center;
    overflow: hidden;
}
.code2{
    border: 1px solid #333;
    grid-area: code2;
    text-align: center;
    overflow: hidden;
}
.code3{
    border: 1px solid #333;
    grid-area: code3;
    text-align: center;
    overflow: hidden;
}
/* =================Second Row================= */
/* =================Third Row================= */
.third{
    /* border: 1px solid #000; */
    grid-area: third;
    height: 10vh;
    display:grid;
    grid-template-columns: 50% 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "address tin zip telno";
    overflow: hidden;
    /* background-color: yellow; */
    grid-gap:0;
}
.address{
    padding-left: 5px;
    border: 1px solid #333;
    grid-area: address;
    overflow: hidden;
}
.tin{
    padding-left: 5px;
    border: 1px solid #333;
    grid-area: tin;
    overflow: hidden;
}
.zip{
    padding-left: 5px;
    border: 1px solid #333;
    grid-area: zip;
    overflow: hidden;
}
.telno{
    padding-left: 5px;
    border: 1px solid #333;
    grid-area: telno;
    overflow: hidden;
}
/* =================Third Row================= */
/* =================Forth Row================= */
.forth-1{
    border: 1px solid #000;
    grid-area: forth-1;
    height: 130vh;
    overflow: hidden;
}

table {
    width:100%;
    margin:0;
    height: 100%;
  }
.alter-border {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
  }
  th.alter-border{background-color: #ffff;
    text-align: center;}
  .border-right{border-right: 1px solid black;}
  .grey-alter:nth-child(odd) {background-color: #D8D9DA;}
  .td-align{
      padding-left: 10px;
      text-align:left;
  }
/* =================Forth Row================= */


.fifth{
    border: 1px solid #000;
    grid-area: fifth;
    height: 25vh;
    overflow: hidden;
}

/* =============Fifth GRID Row ===========*/
.flexbox-fifth-item-1 {
    border: 1px solid #333;
    flex: 1 0 0;
    align-self: flex-start;
    margin:0;
    margin-right:10px;
    height: 30vh;
    overflow: hidden;
}

.flexbox-fifth-item-2 {
    border: 1px solid #333;
    flex: 1 0 0;
    align-self: flex-start;
    margin:0;
    margin-left:10px;
    height: 30vh;
    overflow: hidden;
}
/* ==============Bottom-Left Grid========= */

.grid-bottom-left{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "no-of-emp-row no-of-emp-row no-of-emp-row"
    "for-pag-ibig-use for-pag-ibig-use for-pag-ibig-use"
    "pfr date amount"
    "collecting collecting remarks"
    "ticket reconciled checked";
    /* background-color: yellow; */
    grid-gap:0;
    height:25vh;
    overflow: hidden;
}
.no-of-emp-row{

    grid-area: no-of-emp-row;

    display:grid;
    grid-template-columns: 150px 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "emp empno total totalno";
    /* background-color: yellow; */
    grid-gap:0;
    overflow: hidden;
}

.emp{
    display: flex;
    align-items: center;
    justify-content: right;
    grid-area: emp;
    overflow: hidden;
    border-bottom: 1px solid #333; 
    border-left: 1px solid #333; 
}
.empno{
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #333; 
    border-right: 1px solid #333; 
    grid-area: empno; 
    overflow: hidden;
}
.empno-1{
    width:40px;
    height:50px;
    border: 1px solid #333;
    grid-area: empno; 
    border-width:3px 3px 0 0;
    transform:translateX(-14px) rotate(45deg);
}
.total{
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #333; 
    border-left: 1px solid #333; 
    grid-area: total; 
    overflow: hidden;
}

.totalno{
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #333; 
    border-right: 1px solid #333; 
    grid-area: totalno; 
    overflow: hidden;
}
.totalno-1{
    width:40px;
    height:50px;
    border: 1px solid #333;
    grid-area: totalno; 
    border-width:3px 3px 0 0;
    transform:translateX(-14px) rotate(45deg);
}

.for-pag-ibig-use{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    grid-area: for-pag-ibig-use;
    overflow: hidden;
    background-color: #D8D9DA;
}
.pfr{
    border: 1px solid #333;
    grid-area: pfr;    
    overflow: hidden;
    background-color: #D8D9DA;
}
.date{
    border: 1px solid #333;
    grid-area: date;   
    overflow: hidden;  
    background-color: #D8D9DA;
}
.amount{
    border: 1px solid #333;
    grid-area: amount;   
    overflow: hidden;
    background-color: #D8D9DA;
}
.collecting{
    border: 1px solid #333;
    grid-area: collecting; 
    overflow: hidden;  
    background-color: #D8D9DA;
}
.remarks{
    border: 1px solid #333;
    grid-area: remarks;   
    overflow: hidden;
    background-color: #D8D9DA;
}
.ticket{
    border: 1px solid #333;
    grid-area: ticket;   
    overflow: hidden;
    background-color: #D8D9DA;
}
.reconciled{
    border: 1px solid #333;
    grid-area: reconciled; 
    overflow: hidden;  
    background-color: #D8D9DA;
}
.checked{
    border: 1px solid #333;
    grid-area: checked;   
    overflow: hidden;
    background-color: #D8D9DA;
}

/* ==============Bottom-Right Grid========= */
.grid-bottom-right{
    /* border: 1px solid #333; */
    display:grid;
    grid-template-columns: 1fr 230px 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "totalinpage totalinpage totalinpage totalinpage"
    "grandtotal grandtotal grandtotal grandtotal"
    "certified certified certified certified"
    "signature signature cert-date cert-date"
    "official official official official";
    /* background-color: yellow; */
    grid-gap:0;
    height:25vh;
    overflow: hidden;
}
.totalinpage{
    /* border: 1px solid #333; */
    grid-area: totalinpage;
    display:grid;
    grid-template-columns: 230px 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "totalinpage-1 totalinpage-2 totalinpage-3 totalinpage-4";
    /* background-color: yellow; */
    grid-gap:0;
    overflow: hidden;

}
.totalinpage-1{
    border-right: 1px solid #333;
    border-bottom: 1px solid #333; 
    border-left: 1px solid #333; 
    grid-area: totalinpage-1;

    display:grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "totalinpage-1-1 totalinpage-1-2";
    /* background-color: yellow; */
    grid-gap:0;
    overflow: hidden;
}
.totalinpage-1-1{
    grid-area: totalinpage-1-1;
    text-align: center;
    justify-content: center;
    overflow: hidden;
}
.totalinpage-1-2{
    width:40px;
    height:50px;
    border: 1px solid #333;
    grid-area: totalinpage-1-2;
    overflow: hidden;
    border-width:3px 3px 0 0;
    transform:translateX(-14px) rotate(45deg);
}
.totalinpage-2{
    border-right: 1px solid #333;
    border-bottom: 1px solid #333; 
    border-left: 1px solid #333; 
    grid-area: totalinpage-2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.totalinpage-3{
    border-right: 1px solid #333;
    border-bottom: 1px solid #333; 
    border-left: 1px solid #333; 
    grid-area: totalinpage-3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.totalinpage-4{
    border-right: 1px solid #333;
    border-bottom: 1px solid #333; 
    border-left: 1px solid #333; 
    grid-area: totalinpage-4;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.grandtotal{
    /* border: 1px solid #333; */
    grid-area: grandtotal;
    display:grid;
    grid-template-columns: 230px 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "grandtotal-1 grandtotal-2 grandtotal-3 grandtotal-4";
    /* background-color: yellow; */
    grid-gap:0;
    overflow: hidden;
}
.grandtotal-1{
    border: 1px solid #333;
    grid-area: grandtotal-1;
    display:grid;
    grid-template-columns: 70px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "grandtotal-1-1 grandtotal-1-2";
    /* background-color: yellow; */
    grid-gap:0;
    overflow: hidden;
}
.grandtotal-1-1{
    grid-area: grandtotal-1-1;
    text-align: center;
    justify-content: center;
    overflow: hidden;
}
.grandtotal-1-2{
    width:40px;
    height:50px;
    border: 1px solid #333;
    grid-area: grandtotal-1-2;
    overflow: hidden;
    border-width:3px 3px 0 0;
    transform:translateX(-14px) rotate(45deg);
}
.grandtotal-2{
    border: 1px solid #333;
    grid-area: grandtotal-2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.grandtotal-3{
    border: 1px solid #333;
    grid-area: grandtotal-3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.grandtotal-4{
    border: 1px solid #333;
    grid-area: grandtotal-4;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.certified{
    border: 1px solid #333;
    grid-area: certified;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  
}
.signature{
    border: 1px solid #333;
    grid-area: signature;
    overflow: hidden;
 
}
.cert-date{
    border: 1px solid #333;
    grid-area: cert-date;
    overflow: hidden;

}
.official{
    border-bottom: 1px solid #333; 
    grid-area: official;
    display:grid;
    grid-template-columns: 230px 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "official-1 official-1 official-2 official-3";
    /* background-color: yellow; */
    grid-gap:0;
    overflow: hidden;
}
.official-1{
    border: 1px solid #333;
    grid-area: official-1;
    overflow: hidden;
}
.official-2{
    border-right: 1px solid #333;
    border-bottom: 1px solid #333; 
    border-left: 1px solid #333; 
    grid-area: official-2;
    overflow: hidden;
}
.official-3{
    border-bottom: 1px solid #333; 
    border-left: 1px solid #333; 
    border-right: 1px solid #333; 
    grid-area: official-3;
    overflow: hidden;
}

/* =================================Remittance======== */
.remitance-header{
    text-align: center;
    font-size: 130%;
}
.remitance-subheader{
    text-align: center;
    font-size: 120%;
}
.table-pagibig-remittance, td.left {
text-align: left;
border:0;
}
.td-right{
    text-align:right;
    padding-right:15px;
    border:0;
}
.td-center{
    text-align:center;
    border:0;
}
tr.no-border:nth-child(odd) {background-color: #ffff;}