<style>








```css
/* ===========================
   MOBILE RESPONSIVE
=========================== */

html,
body{
    width:100%;
    overflow-x:hidden;
}

.container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:10px;
}

/* Table Scroll */

.table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.stock-table,
.amount-table{
    min-width:1300px;
}

/* Inputs */

.stock-table input,
.amount-table input,
.amount-table textarea{

    width:100%;
    min-width:55px;
    font-size:14px;
}

/* Mobile */

@media(max-width:768px){

body{

    padding:5px;

}

.topbar{

    flex-direction:column;
    align-items:flex-start;
    gap:10px;

}

.topbar h2{

    font-size:20px;
    text-align:center;
    width:100%;

}

.datebox{

    width:100%;
}

.datebox input{

    width:100%;
}

.button-area{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;

}

.button-area button{

    width:100%;
    height:45px;
    font-size:14px;

}

.stock-table th,
.stock-table td{

    padding:3px;
    font-size:12px;

}

.stock-table input{

    height:30px;
    font-size:12px;

}

.amount-table th{

    font-size:13px;

}

.amount-table input{

    height:35px;

}

.amount-table textarea{

    height:70px;

}

}

/* Small Mobile */

@media(max-width:480px){

.topbar h2{

    font-size:17px;

}

.button-area{

    grid-template-columns:1fr;

}

.stock-table input{

    min-width:45px;

}

.stock-table th,
.stock-table td{

    font-size:11px;

}

}
```

/* =====================================================
   GANAPATI BHARATGAS DAILY STOCK REGISTER
   style.css - Part 1
====================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{

    background:#d9d9d9;
    padding:20px;

}

.container{

    width:1400px;
    margin:auto;
    background:#ffffff;
    border:3px solid #000;
    padding:15px;

}

/* ================= HEADER ================= */

.topbar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:15px;

}

.topbar h2{

    font-size:30px;
    color:#b00000;
    font-weight:bold;
    letter-spacing:1px;

}

.datebox{

    display:flex;
    align-items:center;
    gap:10px;

}

.datebox label{

    font-size:18px;
    font-weight:bold;

}

.datebox input{

    width:170px;
    height:40px;
    border:2px solid #000;
    font-size:18px;
    padding:5px;

}

/* ================= TABLE ================= */

.stock-table{

    width:100%;
    border-collapse:collapse;

}

.stock-table th,
.stock-table td{

    border:1px solid #000;
    text-align:center;
    padding:5px;

}

.stock-table th{

    background:#e6e6e6;
    font-size:15px;

}

.product{

    width:180px;

}

.fullhead{

    background:#d32f2f;
    color:#fff;
    font-size:18px;

}

.emptyhead{

    background:#1565c0;
    color:#fff;
    font-size:18px;

}

.stock-table td{

    height:42px;

}

/* ================= INPUT ================= */

.stock-table input{

    width:100%;
    height:34px;

    border:none;

    text-align:center;

    font-size:15px;

    outline:none;

    background:#fff;

}

.stock-table input:focus{

    background:#fff7d1;

}

/* ================= TOTAL ROW ================= */

.total-row th{

    background:#222;
    color:#fff;
    font-size:16px;

}

.total-row input{

    background:#ffe082;
    font-weight:bold;
    font-size:18px;

}

/* ==========================================
   AMOUNT TABLE
========================================== */

.amount-table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

.amount-table th,
.amount-table td{
    border:2px solid #000;
    padding:8px;
    text-align:center;
    vertical-align:top;
}

.amount-table th{
    background:#444;
    color:#fff;
    font-size:16px;
    height:45px;
}

.amount-table input{
    width:100%;
    height:40px;
    border:1px solid #888;
    font-size:18px;
    text-align:center;
    padding:5px;
}

.amount-table textarea{
    width:100%;
    resize:none;
    padding:8px;
    font-size:15px;
    border:1px solid #888;
    margin-bottom:8px;
}

/* ==========================================
   BUTTONS
========================================== */

.button-area{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:25px;
}

.button-area button{
    min-width:160px;
    height:48px;
    border:none;
    border-radius:6px;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

#calcBtn{
    background:#1565c0;
}

#saveBtn{
    background:#2e7d32;
}

#resetBtn{
    background:#ef6c00;
}

#whatsappBtn{
    background:#25D366;
}

.button-area button:nth-child(4){
    background:#5d4037;
}

.button-area button:hover{
    transform:scale(1.04);
    opacity:.9;
}

/* ==========================================
   INPUT STATES
========================================== */

input[readonly]{
    background:#f4f4f4;
    font-weight:bold;
}

input:focus,
textarea:focus{
    outline:2px solid #2196f3;
    background:#fffde7;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1200px){

.container{
    width:100%;
    overflow:auto;
}

.stock-table{
    min-width:1350px;
}

.amount-table{
    min-width:1000px;
}

}

/* ==========================================
   PRINT
========================================== */

@media print{

body{
    background:#fff;
    padding:0;
}

.container{
    width:100%;
    border:none;
    box-shadow:none;
}

.button-area{
    display:none;
}

.stock-table input,
.amount-table input,
.amount-table textarea{
    border:none;
    background:#fff;
}

}


</style>