/*===============================================================================
  |                            KONTAJNERE                                       |
  ===============================================================================*/
  #suggestions, #suggestions-other {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 365px;
    position: absolute;
    background-color: white;
    z-index: 1000;
}

#suggestions.visible, #suggestions-other.visible {
    border: 1px solid #ccc;
}

#suggestions li, #suggestions-other li {
    padding: 10px;
    cursor: pointer;
}

#suggestions li:hover, #suggestions-other li:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

#suggestions li strong, #suggestions-other li strong {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: #000;
}

#suggestions li span, #suggestions-other li span {
    display: block;
    font-size: 0.9em;
    color: #000;
}

#wrapper-left {
    position: relative;
    left: 0px;
    bottom: 15px;
}

.form-left-section-all {
    display: flex;
    gap: 50px; /* Medzera medzi formulármi */
    margin-left: 30px;
    margin-top: 30px;
}

.left-form-bankdetails-with-date {
    margin-top: -20px;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Medzera medzi skupinami polí */
}

.form-group {
    margin-bottom: 10px;
    width: 350px;
    
}

.form-group label {
    display: block;
}

.form-group input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;

}

.form-group {
    margin-bottom: 10px;
}


label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
}

input {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* //Jemný tieň// */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}



/*===============================================================================
|HLAVNÁ ČASŤ STRÁNKY - UPRAVA FONTU A OSTATNYCH VECI, KTORE SA APLIKUJU NA VŠETKO|
  ===============================================================================*/
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
}


/*===============================================================================
  |                            TU SA UPRAVUJE FORMULAR PRE DODÁVATEĽA           |
  ===============================================================================*/
.obalenie-dodavatela {      /* TOTO TU MUSI ZOSTAT JE TO NA TO ABY NEBOLO VIDNO DIV */
    display: contents;
}

.obalenie-odberatela { /* TOTO TU MUSI ZOSTAT JE TO NA TO ABY NEBOLO VIDNO DIV */
    display: contents;
}

/*-------------------------------------------------------------------------------
  | UPRAVOVANIE PSC OBLAENIE MESTA A PSC                                        |
  -------------------------------------------------------------------------------*/
.form-group-inline {
    display: flex;
    gap: 25px; /* Medzera medzi PSČ a Mesto */
}

/*-------------------------------------------------------------------------------
  | UPRAVOVANIE PSC OBLAENIE MESTA A PSC                                        |
  -------------------------------------------------------------------------------*/
.input-item-psc-mesto {
    display: flex;
    flex-direction: column;
}


/*===============================================================================
  |               TU SA UPRAVUJE FORMULAR PRE ODBERATEĽA                        |
  ===============================================================================*/




/*===============================================================================
  |               UPRAVA STYLING PRE BANKA, IBAN, SWIFT, OBJEDNÁVKA             |
  ===============================================================================*/
/*-------------------------------------------------------------------------------
  | CELKOVY KONTAJNER PRE TIETO INPUTY                                          |
  -------------------------------------------------------------------------------*/
.bank-details-update {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Dve stĺpce */
    gap: 25px; /* Medzera medzi inputmi */
    width: 350px;
    margin-left: 30px;
    margin-top: 50px;
 

}

.container-bank-iban-swift-order {
    display: flex;
    flex-direction: column; /* Label nad inputom */
}




/*===============================================================================
  |              Štýl a pozicia pre tlačidlá BANKOVÝ PREVOD A HOTOVOSŤ           |
  ===============================================================================*/
.button-container-bank-cash {
    display: flex;
    gap: 10px;
    margin-top: -10px;
}

/* Bankový prevod tlačidlo */
#bankovy-prevod {
    padding: 15px 30px;
    border: 1px medium rgb(0, 0, 0);
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    max-height: 150px;
    white-space: nowrap; /* Zabráni zalamovaniu textu */
    text-align: center;  /* Zarovná text do stredu tlačidla */
}

/* Hotovosť tlačidlo */
#hotovost {
    padding: 15px 60px;
    border: 1px medium rgb(0, 0, 0);
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    max-height: 150px;
    white-space: nowrap; /* Zabráni zalamovaniu textu */
    text-align: center;  /* Zarovná text do stredu tlačidla */
}

.toggle-button {
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.3s ease;
}

.toggle-button.active {
    background-color: #05a0dd;
    color: white;
}

.toggle-button:not(.active) {
    background-color: white;
    color: black;
    border: 1px solid gray;
}


/*===============================================================================
|SEKCIA KDE SA NASTAVUJE **DATUM DODANIA** - **DATUM VYSTAVENIA** - **DATUM SPLATNOSTI**|
  ===============================================================================*/
  /* DATUM DODANIA Styling a POZICIA */
#date-section-dodania {
    width: 345px; /* Automatická šírka podľa obsahu */
    padding: 10px; /* Vnútorné okraje */
    background-color: #f9f9f9; /* Svetlosivé pozadie na oddelenie */
    border-radius: 5px; /* Zaoblené rohy */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Jemný tieň */
    margin-top: 45px;
}

/* - **DATUM **VYSTAVENIA* Styling a POZICIA** - */
#date-section-vystavenia {
    width: 345px; /* Automatická šírka podľa obsahu */
    padding: 10px; /* Vnútorné okraje */
    background-color: #f9f9f9; /* Svetlosivé pozadie na oddelenie */
    border-radius: 5px; /* Zaoblené rohy */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Jemný tieň */
    margin-top: 20px;
}

/* DATUM Splatnosti Styling a POZICIA */
#date-section-splatnosti {
    width: 345px; /* Automatická šírka podľa obsahu */
    padding: 10px; /* Vnútorné okraje */
    background-color: #f9f9f9; /* Svetlosivé pozadie na oddelenie */
    border-radius: 5px; /* Zaoblené rohy */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Jemný tieň */
    margin-top: 20px;

}

.celok-datumov {
    position: absolute;
    flex-direction: column;
    margin-left: 430px;
    margin-top: -25px;
}

.date-picker {
    display: flex;
    align-items: center;
    gap: 6.5px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.date-picker option {
    margin-left: 10px;
}

.date-picker select {
    margin-left: 10px;
}

#date-section-vystavenia .date-picker #day-select-vystavenia {
    margin-left: 5px;
}

#date-section-splatnosti .date-picker #day-select-splatnost {
    margin-left: 27px;
}

.minimal-dropdown {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    color: #333;
    appearance: none; /* Minimalizuje štýl prehliadača */
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s;
}

.minimal-dropdown:hover {
    border-color: #007bff;
}

.minimal-dropdown:focus {
    border-color: #0056b3;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

span {
    font-size: 16px;
    color: #555;
}


input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}


/*===============================================================================
|                             DOWNLOAD BUTTON GREEN                             |
  ===============================================================================*/


#generate-pdf {    /* DOWNLOAD BUTTON GREEN    */     
    display: block;
    position: absolute; /* Potrebné pre zarovnanie tlačidla */
    left: 1190px; /* Posunie tlačidlo do stredu */
    transform: translate(-50%, 0); /* Presunie späť o polovicu svoj šírky, aby bol zarovnané na stred */
    margin: 0 auto; /* zarovná tlačidlo do stredu, ak ho chceš v strede */
    padding: 10px 20px;
    background-color: green;
    color: white;
    border: none;
    border-radius: 5px;
    max-height: 40px;
    text-align: center; /* Zarovná text v tlačidle na stred */
    bottom: -180px;
}

#generate-pdf:hover {
    background-color: #45a049;
    cursor: pointer;
}










/*===============================================================================
|      TOTO JE OBALENIE CELEJ TABULKY KDE JE NAZOV POLOZKY A CELKOM EUR         |
  ===============================================================================*/
/* NA UPRAVOVANIE CELEJ TABULKY PRIDAT POLOZKY VSETKO OD HORA DOLE POHYBOVANIE A POD */
.invoice-item-section {
    border: 1px solid #ccc; 
    background-color: #f9f9f9; 
    padding: 15px;
    margin-left: 30px;
    position: absolute;
    margin-top: 30px;

}

/* .invoice-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 10px;
} */

/* NA UPRAVOVANIE VNUTRA TABULKY */
.invoice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
/*     background-color: #f9f9f9;
    border: 1px solid #ccc; */
    width: 705px;
    padding: 15px;
    gap: 10px;
}

.remove-item-button {
    background-color: rgb(228, 51, 51); /* Červené pozadie */
    color: white; /* Biela farba textu */
    border: none; /* Bez okraja */
    padding: 1px 10px; /* Vnútorné odsadenie */
    cursor: pointer; /* Kurzor ako ruka */
    float: right; /* Zarovnanie doprava */
    margin-top: -20px;
    margin-left: 10px;
    margin-right: -20px;
    font-size: 15px;
    border-radius: 2px;
    white-space: nowrap; /* Zabráni zalamovaniu textu */
    
}

.currency-symbol {
    position: absolute;
    margin-top: -25px;
    margin-left: 95px;
}

.currency-symbol-only {
    position: absolute;
    margin-top: -25px;
    margin-left: 130px;
}

.item-name,
.item-total {
    margin-right: 10px;
    margin-left: -10px;
    margin-top: -20px;
}

.item-name input {
    width: 550px;
}

.item-total input {
    max-width: 150px;
}


.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    background-color: #05a0dd;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 40px;
}

.total-row p {
    padding-left: 10px; /* Odsunie text od ľavej strany */
}

#total-sum {
    font-size: 18px;
    color: #ffffff;  /* #0056b3 */
    padding-right: 10px;

}

.add-item-button button {
    background-color: #28a745; /* Zelená farba */
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    position: absolute;
    margin-left: 5px;
    margin-top: -20px;
}

.add-item-button button:hover {
    background-color: #218838; /* Trochu tmavšia zelená pri hover */
    cursor: pointer;
}





/* ---------------------------------------------------------------------------- */
/*===============================================================================
|                                Mobilné štýly                                  |
  ===============================================================================*/
/* ---------------------------------------------------------------------------- */
/* @media (max-width: 600px) {
    .container {
      width: 95%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      gap: 100px;
    }
    
  
    .header {
      font-size: 1.5rem;
    }
  
    .button {
      width: 100%;
      padding: 15px;
    }
  
    .row {
      flex-direction: column;
    }
  } */
  /* Mobilné zariadenia */
/*   @media only screen and (max-width: 767px) { */
@media (max-width: 768px) {
    .form-left-section-all {
        display: flex;
        flex-direction: column;
    }
    
    input {
        max-width: 280px;
    }

    .form-group-inline {
        display: flex;
        gap: 25px; /* Medzera medzi PSČ a Mesto */
        max-width: 280px;
    }

    .form-section {
        order: 1; /* Dodávateľ zostáva prvý */
    }

    .left-form-bankdetails-with-date {
        position: absolute;
        top: 400px;
        max-width: 500px;
    }

    .bank-details-update {
        max-width: 280px;
    }


    .button-container-bank-cash {
        gap: 5px;
        text-align: center;  /* Zarovná text do stredu tlačidla */
        max-width: 250px;
    }

    #bankovy-prevod {
        padding: 15px 17px;
        border: 1px medium rgb(0, 0, 0);
        border-radius: 20px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        max-height: 150px;
        white-space: nowrap; /* Zabráni zalamovaniu textu */
        text-align: center;  /* Zarovná text do stredu tlačidla */
        max-width: 147px;
    }
    
    /* Hotovosť tlačidlo */
    #hotovost {
        padding: 0px 40px;
        border: 1px medium rgb(0, 0, 0);
        border-radius: 20px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        max-height: 150px;
        white-space: nowrap; /* Zabráni zalamovaniu textu */
        text-align: center;  /* Zarovná text do stredu tlačidla */
        max-width: 250px;
    }

    .celok-datumov {
        /* Zmenšenie veľkosti písma */
        font-size: 14px; /* Alebo menšia hodnota */
        top: 320px;
        right: -20px;
    }

    .date-picker {
        gap: 6.5px;
    }

    .date-picker option {
        margin-left: 10px;
    }
    
    .date-picker select {
        right: -20px;
        margin-left: 3px;
    }
    
    #date-section-dodania {
        max-width: 280px;
    }

    #date-section-vystavenia {
        max-width: 280px;
    }

    #date-section-splatnosti {
        max-width: 280px;
    }

    .form-section:nth-of-type(2) {
        position: absolute;
        top: 1000px;
    }




    .invoice-item-section {
        position: absolute;
        top: 1430px;
        max-width: 266px;
    }

    .item-name,
    .item-total {
    margin-right: 10px;
    margin-left: -20px;
    margin-top: -60px;
    }

    .item-total input {
        max-width: 85px;
    }

    .item-total label {
       visibility: hidden;
    }

    .item-name input {
       max-width: 260px;
    }

    .item-total-input-only {
        margin-top: 77px;
        width: 350px;
        margin-left: -630px;

    }

    .item-name-input {
        margin-bottom: 35px;
        margin-top: 35px;
    }

    .item-total-input {
        position: absolute;
        max-width: 50px;
        left: 9.5px;
        margin-top: 22px;

    }

    .remove-item-button {
        position: absolute;
        left: 110px;
        margin-top: 25px;
    }

    .add-item-button button {
        margin-top: -10px;
        margin-left: -5px;
        margin-bottom: 5px;

    }

    .total-row {
        margin-top: 50px;
    }

    .currency-symbol {
        position: absolute;
        margin-top: 31px;
        margin-left: -630px;
    }

    .currency-symbol-only {
        position: absolute;
        margin-top: 86px;
        margin-left: -18px;
    }

    #generate-pdf{
        position: relative;
        left: 60px;
        bottom: -1120px;
    }

    
}

/* Tablety */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Štýly pre tablety */
}

/* Malé obrazovky desktopov */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
    /* Štýly pre malé obrazovky desktopov */
}

/* Štandardné obrazovky desktopov */
@media only screen and (min-width: 1201px) {
    /* Štýly pre väčšie obrazovky desktopov */
}

  /*background-color: #05a0dd;  Tyrkysová farba pozadia */