body{
    font-family:Arial,sans-serif;
    background:#f2f2f2;
    padding:30px
}

.container{
    max-width:900px;
    margin:auto;
    background:#fff;
    padding:25px;
    border-radius:10px;
    box-shadow:0 0 10px #ccc
}

table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px
}

th,td{
    border:1px solid #ccc;
    padding:8px;
    text-align:center
}

th{
    background:#333;
    color:#fff
}

.kolicina{
    font-weight:bold;
    color:green
}

.ok{
    color:green
}

.greska{
    color:red
}

.print-value{
    display:none
}

.shift{
    margin-top:15px;
    position:sticky;
    top:0;
    z-index:1000;
    background:#f2f2f2;
    padding:10px 0;
    border-bottom:1px solid #ccc;
}

.shift label{
    margin-right:20px;
    font-weight:bold
}

.separator td{
    border-top:3px double #000;
    border-bottom:3px double #000;
    background:#f8f8f8;
    font-weight:bold
}

@media print{

    select{
        display:none
    }

    .print-value{
        display:inline
    }
	.shift{
        position:static !important;
        top:auto !important;
        z-index:auto !important;
    }

}

/* Modal */

.modal{
    display:none;
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.75);

    justify-content:center;
    align-items:center;
}

.modal-content{
    position:relative;
    background:#fff;
    padding:15px;
    border-radius:10px;
    max-width:90%;
    max-height:90%;
    box-shadow:0 0 20px rgba(0,0,0,.4);
}

.modal-content img{
    display:block;
    max-width:100%;
    max-height:80vh;
}

.close{
    position:absolute;
    right:10px;
    top:5px;
    font-size:30px;
    cursor:pointer;
    font-weight:bold;
}

select,
textarea{

    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;

    padding:5px;
    border-radius:5px;

}

.btn{

    display:inline-block;
    padding:10px 20px;
    background:#333;
    color:#fff;
    text-decoration:none;
    border-radius:5px;
    cursor:pointer;
    border:1px solid #333;

}

.btn:hover{
    background:#555;
}

@media print{

    .uputstvo{
        display:none !important;
    }

}

.uputstvo{

    margin:15px 0;
    display:flex;
    gap:8px;
    flex-wrap:wrap;

}

.btn{

    display:inline-block;
    padding:7px 14px;
    background:#f5f5f5;
    color:#333;
    text-decoration:none;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:13px;
    font-weight:500;
    transition:.2s;

}

.btn:hover{

    background:#3399ff;
    color:#fff;
    border-color:#3399ff;

}

@media print{

    select{

        -webkit-appearance:auto !important;
        -moz-appearance:auto !important;
        appearance:auto !important;

    }

    #vrsta{

        -webkit-appearance:auto !important;
        -moz-appearance:auto !important;
        appearance:auto !important;

        color:#000 !important;
        background:#fff !important;

    }

}


/* ==========================================
   ŠABLONI
========================================== */

.sabloni{

    margin-top:12px;

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

}

.sablon-btn{

    display:inline-block;

    padding:7px 14px;

    background:#f5f5f5;

    color:#333;

    text-decoration:none;

    border:1px solid #ccc;

    border-radius:4px;

    font-size:13px;

    font-weight:500;

    cursor:pointer;

    transition:.2s;

}

.sablon-btn:hover{

    background:#3399ff;

    color:#fff;

    border-color:#3399ff;

}

.sablon-status{

    font-size:13px;

    margin-left:5px;

}

#printForm{
    display:none;
}

@media print{

    .sabloni{

        display:none !important;

    }
	  /* Sakrij sve što nije namenjeno štampi */
    body > *:not(#printForm){
        display:none !important;
    }

    #printForm{
        display:block !important;
        width:100%;
        background:#fff;
        color:#000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
		font-weight:700;
    }


    /* ======================================
       ZAGLAVLJE
    ====================================== */

    .print-header{
        width:100%;
        margin-bottom:15px;
    }

    .print-title{
        text-align:center;
        font-size:20px;
        font-weight:bold;
        margin-bottom:3px;
    }

    .print-subtitle{
        text-align:center;
        font-size:13px;
        font-weight:bold;
        margin-bottom:15px;
    }


    /* ======================================
       OSNOVNI PODACI
    ====================================== */

    .print-info{
        width:100%;
        border-collapse:collapse;
        margin-bottom:18px;
    }

    .print-info td{
        border:1px solid #000;
        padding:7px 8px;
        height:22px;
    }

    .print-info td:nth-child(1),
    .print-info td:nth-child(3){
        width:17%;
        background:#f2f2f2;
    }

    .print-info td:nth-child(2),
    .print-info td:nth-child(4){
        width:33%;
    }


    /* ======================================
       TABELA
    ====================================== */

    .print-table{
        width:100%;
        border-collapse:collapse;
        margin-bottom:14px;
        page-break-inside:auto;
    }

    .print-table thead{
        display:table-header-group;
    }

    .print-table tr{
        page-break-inside:avoid;
        page-break-after:auto;
    }

    .print-table th{
        border:1px solid #000;
        background:#e6e6e6 !important;
        color:#000 !important;
        padding:7px 5px;
        font-weight:bold;
        text-align:center;
    }

    .print-table td{
        border:1px solid #000;
        padding:6px 5px;
        height:22px;
        text-align:center;
    }

    .print-table th:nth-child(1){
        width:12%;
    }

    .print-table th:nth-child(2){
        width:30%;
    }

    .print-table th:nth-child(3){
        width:43%;
    }

    .print-table th:nth-child(4){
        width:15%;
    }


    /* ======================================
       SEKTOR
    ====================================== */

    .print-sector td{
        border:1px solid #000;
        background:#d9d9d9 !important;
        font-weight:bold;
        text-align:left;
        padding:7px;
    }


    /* ======================================
       NAPOMENA
    ====================================== */

    .print-note{
        margin-top:20px;
    }

    .print-note-title{
        font-weight:bold;
        margin-bottom:5px;
    }

    .print-note-lines div{
        height:24px;
        border-bottom:1px solid #000;
    }


    /* ======================================
       POTPIS
    ====================================== */

    .print-signature{
        width:100%;
        border-collapse:collapse;
        margin-top:35px;
    }

    .print-signature td{
        width:50%;
        padding-top:15px;
        padding-right:30px;
        font-weight:bold;
    }

    .print-signature span{
        display:inline-block;
        width:180px;
        border-bottom:1px solid #000;
        margin-left:10px;
    }


    /* ======================================
       A4
    ====================================== */

    @page{
        size:A4 portrait;
        margin:12mm;
    }

}