/*===============================================================================
  |                            VELKÁ INTERAKTIVNA A4 STRANA                     |
  ===============================================================================*/
#a4-preview {
    width: 170mm; /* Šírka A4 150mm */
    height: 197mm; /* Výška A4 180mm;  */
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: grid;
    margin: 50px;
    color: #333;
    font-size: 0.9em;
    position: relative;
    left: 780px; /* Posunie na polovicu šírky rodiča */
    bottom: 700px;
}

@media (max-width: 768px) {
  #a4-preview {
      position: relative;
      left: -151px; /* Posunutie o 10 pixelov doprava */
      top: 1220px; /* Posunutie o 10 pixelov nahor */
      transform: scale(0.54, 0.7); /* Zmenšenie veľkosti pre lepšie zobrazenie */
      transform-origin: center;
      margin: 0; /* Odstránenie margin */
      padding: 10px; /* Zmenšenie padding */
  }

  /* Prispôsobenie veľkosti textu a ďalších elementov */
  #a4-preview * {
      font-size: 1em; /* Zmenšenie veľkosti písma */
  }
}



/*===============================================================================
  |                             FAKTÚRA NADPIS                                  |
  ===============================================================================*/
#faktura-title {   /*  FAKTÚRA NADPIS   */  
    position: absolute;    
    text-align: right;
    font-size: 30px;
    margin-top: 50px;
    margin-left: 515px; 
}



/*===============================================================================
  |                 ČISLO POD NADPISOM FAKTÚRA                                  |
  ===============================================================================*/
#faktura-title-number {
    position: absolute;
    text-align: center;
    font-size: 12px;
    margin-top: 80px;
    margin-left: 570px; 

}


/*===============================================================================
  |                 DODAVATEĽ NADPIS                                            |
  ===============================================================================*/
#dodavatel-section-title {
    position: absolute;
    margin-left: 40px;
    margin-top: 200px;

}

/*-------------------------------------------------------------------------------
  | HEADERS NA POSUVANIE OBIDVOCH NADPISOV NARAZ                                |
  -------------------------------------------------------------------------------*/
.headers-dodavatel-odberatel {
    display: flex;
    align-items: center;
    height: 40px; /* Nastav výšku podľa potreby */
    margin-bottom: 10px; /* Ak chceš medzeru medzi nadpisom a obsahom */
}

/*===============================================================================
  |                 ODBERATEĽ NADPIS                                            |
  ===============================================================================*/
#odberatel-section-title {
    position: absolute;
    margin-top: 200px;
    margin-left: 300px;

}

/*===============================================================================
  |                 BANKOVE UDAJE NADPIS                                        |
  ===============================================================================*/
#bankoveudaje-header {
    position: absolute;
    margin-left: 60px;
    margin-top: 540px;
    font-size: 17px;
    font-weight: bolder;
}

/*-------------------------------------------------------------------------------
  | VSETKY UDAJE POD BANKOVE UDAJE NADPIS                                       |
  -------------------------------------------------------------------------------*/
#bank-udaje {
    position: absolute;
    margin-top: 560px;
    margin-left: 60px;
    font-size: 14px;
    font-weight: 550;
}

/*===============================================================================
  |                 SPOSOB PLATBY:                                              |
  ===============================================================================*/
#payment-type-preview {
    position: absolute;
    margin-top: 680px;
    margin-left: 60px;
}



/*===============================================================================
  |                 UPRAVA UDAJOV V PREVIEW DODAVATEL                           |
  ===============================================================================*/
#dodavatel-section {
    position: absolute;
    margin-left: 60px;
    margin-top: 150px;

}

/*-------------------------------------------------------------------------------
  | PSC A MESTO UPRAVA V DODAVATEL                                              |
  -------------------------------------------------------------------------------*/
#preview-psc, #preview-mesto {
    display: inline-block;
    margin-top: -50px;
    margin-bottom: -50px;
}


/*===============================================================================
  |                 UPRAVA UDAJOV V PREVIEW ODBERATEL                           |
  ===============================================================================*/
#odberatel-section {
    position: absolute;
    margin-left: 320px;
    margin-top: 150px;

}


/*===============================================================================
  |                 UPRAVA DATUMOV NARAZ SEKCIA CELA                            |
  ===============================================================================*/
.invoice-splatnost-preview {
    position: absolute;
    display: flex;
    flex-direction: column; /* Zoradenie detí v stĺpci */
    width: 450px; /* Nastavenie šírky kontajnera */
    top: 543px;
    left: 525px;
    gap: 10px; /* Medzera medzi .date-group elementmi */
}


  /*===============================================================================
  |                 GROUPA NA DATES                                               |
  ===============================================================================*/
.date-group {
    display: flex;
    flex-direction: column; /* Vnútri .date-group, deti sú tiež zoradené v stĺpci */
    justify-content: flex-start; /* Ak by ste chceli zarovnať obsah */
    align-items: flex-start; /* Ak by ste chceli zarovnať obsah */
    width: 100%; /* Aby zaberal celú šírku kontajnera */
    margin-bottom: 20px; /* Medzera medzi skupinami */
}

/*-------------------------------------------------------------------------------
  |                             LABEL A INPUT NA DATE                           |
  -------------------------------------------------------------------------------*/
.date-label, .date-value {
    text-align: left;
    font-size: 12px; /* Zmenšiteľná veľkosť písma */
    white-space: nowrap; /* Zabezpečí, aby text neprešiel na nový riadok */
    margin: 0; /* Odstránenie akéhokoľvek defaultného margin */
}

.date-label {
    font-weight: bold; /* Ak chcete, aby nadpisy boli hrubšie */
}

.date-value {
    margin-top: 5px; /* Medzera medzi nadpisom a hodnotou */
}



/*===============================================================================
  |                  VELKE MODRE GRAFICKE ZNACENIE                               |
  ===============================================================================*/
#move-container-blue {
  position: relative;
  bottom: 500px;
  left: -3%;
}


#preview-suma-blue {
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    background: #05a0dd;
    padding: 40px;
    padding-bottom: 20px;
    margin-top: 465px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 500px;
    margin-left: 55px;
}




/*===============================================================================
  |                  V MODROM TEXT CELKOVA SUMA NA UHRADU + 0 EUR                |
  ===============================================================================*/
#preview-total-sum {
    display: flex;
    align-items: center; /* Zarovná obsah vertikálne do stredu */
    justify-content: space-between; /* Pridajte medzeru medzi textom a sumou */
    position: absolute;
    top: 470px;
    left: 50px;
    width: 600px; /* Nastavte šírku podľa potreby */
}

#preview-final-sum-text {
    font-weight: bold;
    font-size: 16px;
    color: white;
    margin-left: 20px; /* Nastavte medzeru medzi textom a sumou */
    white-space: nowrap;
}

#preview-final-sum {
    font-weight: bold;
    font-size: 16px;
    color: white; /* #0056b3 */
    text-align: right; /* Zarovnajte text doprava */
    white-space: nowrap; /* Zabezpečí, že text sa nebude zalamovať */
    margin-right: 30px;
}


/*===============================================================================
  |                  POPIS POLOZIEK + SUMA                                      |
  ===============================================================================*/
#header-of-polozky {
    position: absolute;
    top: 310px;
    left: 60px;
}

#header-of-polozky-suma {
    position: absolute;
    top: 0px;
    left: 510px;

}

#break-point {
    margin-top: 1px;
}

/*===============================================================================
  |                  TOTO JE AKY TEXT BUDE V POPISE POLOZKY A SUMA              |
  ===============================================================================*/
.invoice-preview-items {
    width: 560px; /* Príklad šírky; upravte podľa potreby */
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 350px;
    left: 50px;
}

.preview-item-row {
    width: 100%; /* Aby zaujímal celú šírku kontajnera */
    display: flex;
    justify-content: space-between;
    text-align: right;
    margin-top: -20px;
}

.preview-item-description {
    text-align: right; /* Zarovnanie textu */
    overflow: hidden; /* Skryje pretečený text */
    white-space: nowrap; /* Zabezpečí, že text sa nebude zalamovať */
    text-overflow: ellipsis; /* Pridá trojbodku, ak je text príliš dlhý */
    margin-left: 10px;
}

.preview-item-amount {
    text-align: right;
    white-space: nowrap; /* Zabezpečí, že text sa nebude zalamovať */
}

#qrcode {
    position: absolute;
    top: 530px; /* 535px; */
    left: 335px; /* 315px; */
}