*
{
    box-sizing:border-box
}
body{
    margin:0;
    background:#eef1ee;
    font-family:Arial,Helvetica,sans-serif;
    color:#2f3330
}
.app{
    max-width:1400px;
    margin:auto;
    padding:24px
}    
header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px
}    
h1{
    margin:0;
    font-size:25px}
    
header p{
    margin:5px 0;
    color:#667067
}
.badge{
    background:#8aa38b;
    color:#fff;
    padding:8px 12px;
    border-radius:20px;
    font-size:12px
}    
.grid{
    display:grid;
    grid-template-columns:520px 1fr;
    gap:20px
}    
.card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 5px 20px #00000012;
    padding:20px
}    
.card h2{
    margin:0 0 18px;
    font-size:18px
}
.row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}    
label{display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:12px
}   
input{
    width:100%;
    margin-top:6px;
    padding:10px;
    border:1px solid #cfd6d0;
    border-radius:7px;
    font-size:13px
}    
input:focus{
    outline:2px solid #b9c8ba;
    border-color:#8aa38b
}    
.check{
    display:flex;
    gap:8px;
    align-items:center;
    font-weight:600
}    
.check input{
    width:auto;
    margin:0
}   
.hint{
    font-size:11px;
    color:#777;
    line-height:1.45;
    background:#f6f8f6;
    padding:10px;
    border-radius:7px
}    
.item,
.additional-item-row{
    display:grid;
    grid-template-columns:1fr 75px 110px 34px;
    gap:6px;
    margin-bottom:7px
}
.additional-item-row{
    grid-template-columns:1fr 75px 110px;
    margin-top:8px;
    margin-bottom:12px
}
.item input,
.additional-item-row input{
    margin:0
}
.item button{
    border:0;
    background:#eee;
    border-radius:6px;
    font-size:18px
}
.secondary,.primary{
    border:0;
    padding:11px 14px;
    border-radius:7px;
    font-weight:700;
    cursor:pointer
}
.secondary{
    background:#edf2ed;
    color:#48614d
}
.primary{
    width:100%;
    margin-top:12px;
    background:#78947b;
    color:#fff
}
.preview-card{
    overflow:auto
}
.preview-head{
    display:flex;
    justify-content:space-between
}

.preview-head span{
    font-size:12px;
    background:#edf4ed;
    padding:6px 10px;
    border-radius:12px
}
.paper{
    width:210mm;
    min-height:297mm;
    background:#fff;
    margin:0 auto;
    padding:16mm 15mm;
    box-shadow:0 2px 12px #0002;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px
}
.logo{
    display: block;
    width: 270px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left top;
    margin: 0 0 5px 0;
}
.invoice-bar{
    background:#8aa38b;
    color:#fff;
    text-align:center;
    font-size:18px;
    font-weight:700;
    padding:11px;
    margin-bottom:10px
}
.mini{
    display:flex;
    justify-content:space-between
}
.paper p{
    margin:6px 0;
    line-height:1.35
}
.paper table{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
    font-size:9.5px
}
.paper th,.paper td{
    border:1px solid #222;
    padding:6px
}
.paper th:last-child,.paper td:last-child{
    text-align:right;
    width:22%
}
.facilities{
    margin-top:7px
}
.note{
    border:1px solid #8aa38b;
    padding:7px;
    margin-top:8px;
    font-size:9px
}
.tiny{
    font-size:8px!important;
    line-height:1.4!important;
    margin-top:12px!important
}
@media(
    max-width:1000px
    )
{
.grid{
    grid-template-columns:1fr
}
.paper{
    transform-origin:top left;
    transform:scale(.8);
    margin-bottom:-170px}
}
@media(
    max-width:600px
    )
{
.row{
    grid-template-columns:1fr
}
.app{
    padding:12px
}
.paper{
    transform:scale(.55);
    margin-right:-300px;
    margin-bottom:-500px}
}