/*---LOGIN---*/
*{
    margin:0;
    padding:0;
    font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

}
body{
    display:flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
}
a{
    text-decoration: none;
    color:#000;
}
#bgVideo{
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -1;
}
#login{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:100vh;
     display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;   
}
#loginWindow{
    width:35%;
    background-color: rgba(255, 255, 255, 0.9);
    margin:0 auto;
    text-align: center;
    padding:10px;
    border-radius:10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
#loginWindow form{
    display:flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}

 input[type="text"],
input[type="password"] {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 30%;
    box-sizing: border-box;
    text-align: center;
    transition:0.3s ease-in-out;
}
input:focus{
    box-shadow: 1px 1px 20px -1px rgba(0,0,0,0.75);
    background-color: #f5f5f5;
}
input:hover{
    box-shadow: 1px 1px 20px -1px rgba(0,0,0,0.75);
    transition:0.3s ease-in-out;
}
#login h2{
    font-size:250%;
}
#loginConfirm{
    padding:5px 10px;
    border-radius:3px;
    border:2px solid #000;
}
.mainWrapper{
    width:100%;
    height:100vh;
    margin:0 auto;
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
}
#osnovniPodaciForm{
    margin:0 auto;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.formRow{
    margin:30px;
    width:80%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: baseline;
}
.formRowPoverilac{
    margin:30px;
    width:80%;
    display: flex;
    justify-content:center;
    text-align: center;
    align-items: baseline;
}
#izpoverilac{
    width:90%;
}
.formRowTime{
        margin:30px;
    width:80%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}
/*-----popis.html-----*/
.formRowTreceLice{
    margin:30px;
    width:80%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: baseline;
}
.formRowPopiska{
    margin:30px;
    width:100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: baseline;
}
#potpisPrisutnihLica{
    width:80%;
    margin:0 auto;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.popisPrintPrisutnaLicaSpan{
    width:40%;
    display:flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.popisPrintPrisutnaLicaSpan input{
    width:80%;
}
.popisPrintPrisutnaLicaSpan i{
    width:30px;
    height:30px;
    border-radius:50%;
    /* border:1px solid #000; */
    background-color:#043e77;
    color:#fff;
    padding:3px;
    cursor: pointer;
}
.popisPrintPrisutnaTrecaLicaSpan{
    width:40%;
    display:flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.popisPrintPrisutnaTrecaLicaSpan i{
    border:1px solid #000;
    height:20px;
    width:20px;
    border-radius:50%;
    padding:5px;
    background-color:#000;
    color:#fff;
}
.popisPrintPrisutnaTrecaLicaSpan input{
    width:80%;
}
#potpisiPrisutnihLicaCaption{
    margin:20px;
}
i.fa-user-pen{
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}
.formRowPopiska input{
    width:80%;
}
.formRowNext{
    width:500px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    margin-top: 30px;
}
.pictureRows{
    width:75%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.pictureRow{
    width: 100% !important;
    display:flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
}
.pictureRowSpan{
    width:100%;
    display:flex;
    justify-content: space-around;
    margin-bottom:10px;
}
.imageHolder{
    display:flex;
    justify-content: center;
    align-items: center;
}
.osnovniPodaciSpan{
    width:30%;
    display:flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.osnovniPodaciSpanPoverilac{
    width:70%;
    display:flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.osnovniPodaciBrprSpan{
    width:30%;
    display:flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}
#brPredmetaSelect{
    width:8em;
    padding: 9px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    text-align-last:center;
}
#godinaPredmeta{
     width:7em;
    padding: 9px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    text-align-last:center;
}
#brPredmetaSelect option{
    text-align:center!important;
}
/* select option{
    text-align: center;
} */
#brPredmeta{
    width:5em;
}
.osnovniPodaciSpan input[type=text]{
    width:90%;
}
.osnovniPodaciSpan input[type=date],input[type=time]{
    width:10em;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
}
.next,.previous{
    color:#043e77;
    border-radius:50%;
    transition:0.3s ease-in-out;
    font-size:150%;
    border:1px solid #043e77;
}
#reset{
    width:100px;
    height:30px;
    border-radius:5px;
    background-color:#c73339;
    transition:0.3s ease-in-out;
    color:#fff!important;
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
    border:1px solid #000;
}

.formRowNext a:hover>.next{
    color:#fff;
    background-color:#043e77;
    box-shadow: 1px 1px 20px -1px rgba(4,62,119,0.75);
}
.formRowNext a:hover>.previous{
    color:#fff;
    background-color:#043e77;
    box-shadow: 1px 1px 20px -1px rgba(4,62,119,0.75);
}
.formRow3rdperson{
    margin-bottom:15px;
    margin:0 auto;
    width:80%;
    display: flex;
    justify-content:center;
    text-align: center;
    align-items: center;
    transition:0.3s ease;
}
.formRow3rdperson .spanTreceLice {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%; /* ✅ fixed width so they don’t resize */
  flex-shrink: 0; /* ✅ don’t shrink when fewer spans exist */
}
.spanTreceLice{
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin: 15px;
    /* border: 1px solid #ccc; */
    border-radius: 4px;
    width: 30%;
    box-sizing: border-box;
    text-align: center;
    transition:0.3s ease-in-out;
}
.spanTreceLice i{
    margin-left:10px;
}
.spanTreceLice input{
    width:70%;
}
.formRow2{
    margin-bottom:10px;
    width:60%;
    display: flex;
    justify-content: center;
    align-items: baseline;
}
.popisItemClass{
    width: 80%!important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.popiska{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.form1{
    display:flex;
    width:80%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius:5px;
    padding:10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
.form1 [type=date]{
    width:30%;
    text-align: center;
}
#sablonopt{
    padding:7px;
    margin:10px;
    border-radius:5px;
}
#radnjasablon{
    background-color:rgba(255, 255, 255, 0.9);
    width:60%;
    border-radius:5px;
    padding:20px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 21px -1px rgba(0,0,0,0.75);
}
#radnjaSablonText{
    width:60%;
    height:250px;
    border-radius:5px;
    text-align: justify;
    padding:10px;
}
 .speech-target{
    padding:10px;
    color:#fff;
    border-radius:50%;
    background-color:#c2c2c2;
    transition:0.2s ease-in-out;
    width:35px;
    height:35px;
    text-align:center;
    display:flex;
    justify-content: center;
    align-items: center;
 }
 .addPhoto,.addImgs{
    padding:10px;
    color:#fff;
    border-radius:50%;
    background-color:#c2c2c2;
    transition:0.2s ease-in-out;
    width:35px;
    height:35px;
    text-align:center;
    display:flex;
    justify-content: center;
    align-items: center;
 }
 .addPhoto:hover,.addImgs:hover{
    background-color:#043e77;
    box-shadow: 1px 1px 11px -1px rgba(0,0,0,0.75);
 }
 .speech-target:hover{
    background-color:#c73339;
    box-shadow: 1px 1px 11px -1px rgba(0,0,0,0.75);
 }
.spin-once {
  animation: spinOnce 0.3s linear;
}
.remove-popiska{
    width:35px;
    height:35px;
    border-radius:50%;
    transition:0.2s ease-in-out;
}
.remove-popiska:hover{
    background-color:#c73339;
    color:#fff;
    box-shadow:1px 1px 20px -1px rgba(0,0,0,0.75);

}
.add-btn{
    width:35px;
    height:35px;
    background-color:#c2c2c2;
    border-radius:50%;
    color:#fff;
    transition:0.3s ease-in-out;
    
}
.add-btn:hover{
    background-color:#043e77;
    box-shadow:1px 1px 20px -1px rgba(0,0,0,0.75);
    border:none;
}
.add-btn:active{
    box-shadow:1px 1px 35px -1px rgba(0,0,0,0.75);
}
#signature-pad{
    border:2px solid #c2c2c2;
    height:200px;
    width:400px;
    touch-action: none;
}
#addPopisBtn{
    width:35px;
    height:35px;
    border-radius:50%;
    text-align: center;
    transition:0.2s ease-in-out;
}
#addPopisBtn:hover{
    background-color:#043e77;
    color:#fff;
    border:none;
    box-shadow:1px 1px 20px -1px rgba(0,0,0,0.75);
}
/*---PRISUTNA LICA---*/
#prisutnaLica{
    display:flex;
    width:70%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius:5px;
    padding:10px;
    box-shadow: 1px 1px 21px -1px rgba(0,0,0,0.75);
}
#selectPrisutniIzvrsiteljZamenik{
        padding: 9px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 80%;
    box-sizing: border-box;
    text-align: center;
    transition: 0.3s ease-in-out;
}
#selectPrisutniPomocnikIzvrsitelja1{
        padding: 9px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 80%;
    box-sizing: border-box;
    text-align: center;
    transition: 0.3s ease-in-out;
}
#selectPrisutniPomocnikIzvrsitelja2{
        padding: 9px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 80%;
    box-sizing: border-box;
    text-align: center;
    transition: 0.3s ease-in-out;
}
#selectPrisutniPoverilac{
         padding: 9px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 80%;
    box-sizing: border-box;
    text-align: center;
    transition: 0.3s ease-in-out;
}
#selectPrisutniDuznik{
         padding: 9px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 80%;
    box-sizing: border-box;
    text-align: center;
    transition: 0.3s ease-in-out;
}
#selectSluzbenoLice1,#selectSluzbenoLice2{
        padding: 9px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 80%;
    box-sizing: border-box;
    text-align: center;
    transition: 0.3s ease-in-out;
}
.form2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#prisutnaLicaForm{
    margin:0 auto;
    width:100%;
    min-width:800px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.prisutnaLicaSpan{
    width:40%;
    display:flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.prisutnaLicaSpan input{
    width:85%;
}
#popis{
    background-color: rgba(255, 255, 255, 0.9);
    padding:20px;
    border-radius:5px;
    width:60%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:30px 0px;
    box-shadow: 0 4px 50px rgba(0, 0, 0, 0.8);
}
#popisaneStvariSelect{
    width:400px;
    text-align: center;
    padding:10px;
    border-radius: 5px;
}
.izjavaStranke{
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-bottom:20px;
}
.izjavaStranke p{
    margin-bottom:20px;
}
#izjavePopis{
    display:none;
}
.popisaneStvari{
     display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-bottom:20px;
}
.popisaneStvari p{
    margin-bottom:10px;
}
#izjavaStranke{
    width:400px;
    height:100px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.customTimeInput {
    padding: 11px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    width: 80px;
    text-align: center;
    background-color: #fff;
    transition:0.3s ease-in-out;
    margin-top:10px;
}
.customTimeInput:hover{
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
.timePopup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.customTimeInput {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    width: 80px;
    text-align: center;
}

/* Popup background */
.timePopup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.hidden { display: none; }

/* Box */
.timePickerBox {
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    min-width: 240px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

/* Wheel layout */
.wheels {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* iOS selection highlight */
.wheels::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 40px;
    border-top: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
    pointer-events: none;
}

/* Actual wheel */
.wheel {
    width: 60px;
    height: 180px; /* shows 7 values */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    text-align: center;
}

.wheel::-webkit-scrollbar { display: none; }

/* Each number */
.wheel div {
    height: 40px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    color: #444;
}

/* Colon between wheels */
.colon {
    font-size: 28px;
    font-weight: bold;
}

/* Buttons */
.pickerButtons {
    margin-top: 12px;
    text-align: center;
}

.pickerButtons button {
    margin: 4px 8px;
    padding: 6px 14px;
    border: none;
    background: #007aff;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}
.wheel div.buffer {
    scroll-snap-align: none;
    height: 40px;
    opacity: 0;
    pointer-events: none; /* <-- CANNOT be selected */
}
#add3rdperson p{
    margin-top:15px;
}
/*---Print stranica---*/
#printTop img{
    width:30px;
}
#printWindow{
    background-color: rgba(255, 255, 255, 0.9);
    border-radius:5px;
    width:50%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:30px 0px;
    padding-bottom:20px;
    box-shadow: 0 4px 50px rgba(0, 0, 0, 0.8);
    font-size:12px;
}
#printTop{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#printWindow p{
    text-align: center;
    margin-bottom:5px;
}
#zapisnikCaption{
    font-size:125%;
    font-weight:600 !important;;
}
#printMid{
    text-align: center;
    width:80%;
}
#prisutni{
    display:flex;
    justify-content: space-evenly;
    flex-wrap:wrap;
    width:100%;
    align-items: flex-start;
}
#prisutniLeft,#prisutniMid,#prisutniRight,#prisutnaSluzbenaLica{
    width:34%;
}
#prisutnih2{
    margin:30px;
}
#insertIzvrsitelj,#insertPomocnik1,#insertPomocnik2,#insertPoverilac,#insertDuznik,#insertSluzbenoLice1,#insertSluzbenoLice2{
    border-bottom:1px solid #000;
}
#prisutniIzvrsitelj p{
    width:90%;
    margin-bottom:25px;
    padding-bottom:5px;
}
#prisutniIzvrsitelj{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
}
#prisutniPomocnik p{
    width:90%;
    margin-bottom:25px;
    padding-bottom:5px;
}
#prisutniPomocnik{
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#prisutnaSluzbenaLica{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#prisutnaSluzbenaLica p{
    width:90%;
    margin-bottom:25px;
    padding-bottom:5px;
}
#printMid{
    width:90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#prisutniLeft{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#prisutniMid{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#prisutniPoverilac p{
    width:90%;
    margin-bottom:25px;
    padding-bottom:5px;
}
#prisutniPoverilac{
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#prisutniDuznik p{
    width:90%;
    margin-bottom:25px;
    padding-bottom:5px;
}
#prisutniDuznik{
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#prisutniRight{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#prisutniRight p{
    width:90%;
    margin-bottom:25px;
    padding-bottom:5px;
}
.treceLicePrint{
    border-bottom:1px solid #000;
}
#uvodniText{
    line-height: 25px;
    width: 100% !important;
    text-align:justify!important;
}
#radnjaSablonPrint{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#radnjaSablonPrintText{
    width:90%;
    line-height:22px;
    text-align:justify!important;
}
.finishedTimeSpan{
    display:flex;
    justify-content: center;
    align-items: baseline;
    margin:25px;
}
#additionalComments{
    width:90%;
    line-height:22px;
    margin-top:10px;
    text-align:justify!important;
}
#additionalCommentsp{
    text-align: justify!important;
}
#popisPrintEnd{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
    align-items: baseline;
    width:90%;
}
#popisPrintLeft,#popisPrintRight,#popisPrintMid,#potpisSluzbenaLica{
    width:35%;
}
.printPotpisTreceLiceImg{
    border-bottom:1px solid #000;
    margin:50px 0px !important;;
}
#javniIzvrsiteljPotpisDiv,#pomocnikJavnogIzvrsiteljaPotpisDiv1,#pomocnikJavnogIzvrsiteljaPotpisDiv2,#izvrsniDuznikPotpisDiv,#izvrsniPoverilacPotpisDiv,.printPotpisTreceLiceImg{
    border-bottom:1px solid #000;
    margin:30px 10px 30px 10px;
    text-align: center;
}
#pomocnikJavnogIzvrsiteljaPotpisDiv2{
    display:none;
}
#pomocnikJavnogIzvrsiteljaPotpisDiv1{
    margin-bottom: 60px !important;;
}
#izjaveStrankeFinalPrint{
    text-align: justify!important;
}
#stvariNaCuvanjeFinalPrint{
    text-align: justify!important;
}
#finalPopisPrintText{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top:20px;
    width:90%;
}
#finalPopisPrintImgs{
    width:90%;
}
.finalPrintPopiskaText{
    text-align: left!important;
    width:90%;
}
.printImgHolder{
    display:inline-block;
}
.print-only{
    display: none;
}
#printBtn{
    padding:5px;
    border-radius: 5px;
    background-color: #043e77;
    color: #fff;
}
.flow-text{
    break-inside:auto!important;
    page-break-inside: auto!important;
}
.scale-in-center {
	animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.scale-out-center {
	animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.user-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 70px;
    width: 240px;
    transform: translateX(180px); /* hidden */
    transition: transform 0.3s ease;
    z-index: 9999;
    display: flex;
    align-items: center;
}

.user-panel.open {
    transform: translateX(0);
}

/* clickable handle */
.user-handle {
    width: 60px;
    height: 60px;
    background: #222;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px 0 0 10px;
}

.user-handle i {
    font-size: 22px;
}

/* sliding content */
.user-content {
    flex: 1;
    height: 60px;
    background: #333;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.logout-btn {
    width: 100%;
    height: 40px;
    background: #c0392b;
    border: none;
    color: #fff;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.logout-btn i {
    margin-right: 8px;
}

 @keyframes spinOnce {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-out-center {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 1;
  }
}

@media print {
    .no-print {
        display: none !important;
        visibility: hidden !important;
    }
    .print-only{
        display: block!important;
        position: fixed!important;
    }
    .no-break {
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-page-break-inside: avoid;
        display: block;
    }

    .page-break-after {
            break-after: page;
            page-break-after: always;
            -webkit-page-break-after: always;
            width: 100%;
            height: 0;
        }
}