/* Kontejner a průběh nahrávání */
      #progress-container {
          width: 100%;
          background: #f3f3f3;
          border: 1px solid #ddd;
          border-radius: 5px;
          overflow: hidden;
      }

      #progress-bar {
          transition: width 0.2s ease;
      }

      .nadpis {
          display: inline-block;
          font-size: 10px;
          margin-top: 10px;
          padding: 5px 15px;
          color: #fff;
          background: #888;
          sborder-radius: 5px;

      }

      /* Dropzone pro nahrávání souborů */
      .dropzone {
          background-color: #cfc;
          border: solid 3px #9c9;
          color: #9c9;
          min-height: 50px;
          padding: 20px;
          text-shadow: 1px 1px 0 #fff;
      }

      .dropzone2 {
          display: inline-block;
          height: 20px;
          margin: 1px;
          width: 100%;
      }

      #uploaded-images {
          display: block;
          sflex-wrap: wrap;
          /* Povolit zalamování položek na nový řádek */
          sjustify-content: space-around;
          /* Rovnoměrně rozdělit položky mezi sebou */
          width: 100%;
          /* 100% šířka */
          padding: 0px;
          /* Padding pro mezery kolem obsahu */
          sbox-sizing: border-box;
          /* Zajistí, že padding se počítá do šířky */
          sdisplay: flex;
          sflex-direction: column;
          gap: 0px;

      }

      /* Box pro složky */
      #uploaded-images .folder-box {
          background: linear-gradient(135deg, #f3d26f, #ffe28e);
          color: #000;
          font-weight: normal;
          padding: 5px 10px;
          line-height: 20px;
          font-size: 10px;
          border: 1px solid #eecc6d;
          border-radius: 4px;
          text-align: left;
          margin: 1px;
          cursor: pointer;
          width: 100%;
      }

      #uploaded-images .folder-box.notMyGroup {
          background: #99ccff;
          border: 1px solid #459ff8;
      }

      /* Box složky Root (skrytý) */
      #uploaded-images .folder-box[style*="background-color: #ffcccc"] {
          display: none;
          /* Skryje složku Root */
      }

      /* Obrázky uvnitř složek */
      #uploaded-images .folder-content {
          sdisplay: none;
          /* flex Ve výchozím stavu jsou obrázky skryté */
          flex-wrap: wrap;
          gap: 0px;
          padding-left: 20px;
      }

      #uploaded-images div.upload-wrapper {
          display: inline-block;
          vertical-align: top;

      }

      /* Styl pro jednotlivé obrázky */
      #uploaded-images div.upload-button {
          width: 115px;
          height: 115px;
          background-color: #cfc;
          border: solid 3px #9c9;
          border-radius: 5px;
          position: relative;
          display: inline-flex;
          /* Použití flexboxu */
          justify-content: center;
          /* Horizontální zarovnání */
          align-items: center;
          /* Vertikální zarovnání */
          margin: 1px;
          font-size: 36px;
          text-align: center;
          color: #9c9;
          vertical-align: middle;

      }

      /* Styl pro jednotlivé obrázky */
      #uploaded-images div.image-wrapper {
          width: 115px;
          height: 115px;
          background-color: #f9f9f9;
          background-size: cover;
          background-position: center;
          border: 1px solid #ddd;
          border-radius: 5px;
          position: relative;
          display: inline-block;
          margin: 1px;
          transition: transform 0.2s, box-shadow 0.2s;
      }






      #uploaded-images div.image-wrapper:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      /* Box pro ovládací ikony nahoře */
      #uploaded-images div.image-wrapper .action-box {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 25px;
          background-color: rgba(0, 0, 0, 0.6);
          display: flex;
          justify-content: space-around;
          align-items: center;
          border: 0px;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
      }

      #uploaded-images div.image-wrapper .action-box i {
          color: white;
          font-size: 12px;
          cursor: pointer;
          transition: color 0.2s;
      }

      #uploaded-images div.image-wrapper .action-box i:hover {
          color: #ffa726;
      }

      #uploaded-images div.image-wrapper.pic div.filen {
          display: none;
      }

      #uploaded-images div.image-wrapper.file div.filen {
          overflow-wrap: break-word;
          width: 100%;
          padding: 5px;
          font-size: 11px;
          line-height: 13px;
          font-weight: bold;
          position: absolute;
          top: 25px;
          left: 0px;
          color: #fff;
          text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
          max-height: 58px;
          overflow-y: hidden;
      }

      /* Text s datem nebo informací ve spodní části obrázku */
      #uploaded-images div.image-wrapper p {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          text-align: center;
          margin: 0;
          padding: 5px;
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
          font-size: 10px;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
      }

      .folder-header {
          display: flex;
          /* Flexbox pro uspořádání */
          align-items: center;
          /* Vertikální zarovnání */
      }

      .icons-container {
          display: flex;
          /* Flexbox pro ikony */
          justify-content: flex-end;
          /* Ikony zarovnané doprava */
          gap: 10px;
          /* Mezera mezi ikonami */
          margin-left: auto;
          /* Posunutí kontejneru doprava */
      }

      .icons-container .fa {
          font-size: 16px;
          /* Velikost ikon */
          color: #bbb;
          cursor: pointer;
      }












      /* Styl pro jednotlivé obrázky */
      #uploaded-images div.image-wrapper2 {
          width: 115px;
          height: 115px;
          background-color: #f9f9f9;
          background-size: cover;
          background-position: center;
          border: 1px solid #ddd;
          border-radius: 5px;
          position: relative;
          display: inline-block;
          margin: 1px;
          vertical-align: top;
          transition: transform 0.2s, box-shadow 0.2s;
      }

      #uploaded-images div.image-wrapper2:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }


      /* Box pro ovládací ikony nahoře */
      #uploaded-images div.image-wrapper2 .action-box {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 25px;
          background-color: rgba(0, 0, 0, 0.6);
          display: flex;
          justify-content: space-around;
          align-items: center;
          border: 0px;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
      }

      #uploaded-images div.image-wrapper2 .action-box i {
          color: white;
          font-size: 12px;
          cursor: pointer;
          transition: color 0.2s;
      }

      #uploaded-images div.image-wrapper2 .action-box i:hover {
          color: #ffa726;
      }

      /* Text s datem nebo informací ve spodní části obrázku */
      #uploaded-images div.image-wrapper2 p {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          text-align: center;
          margin: 0;
          padding: 5px;
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
          font-size: 10px;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
      }

      #uploaded-images div.image-wrapper2 div.filen {
          display: none;
      }


      #uploaded-attachments {
          display: block;
          /* Ve výchozím stavu jsou obrázky skryté */
          width: 100%;
          /* 100% šířka */
          padding: 0px;
          /* Padding pro mezery kolem obsahu */

          margin-top: 0px;
          font-size: 12px;
      }







      #uploaded-attachments .action-box i {
          margin-left: 10px;
          scursor: pointer;
          font-size: 14px;

      }

      .newfolder {

          background: linear-gradient(135deg, #f3d26f, #ffe28e);
          color: #000;
          font-weight: normal;
          padding: 5px 10px;
          line-height: 12px;
          font-size: 10px;
          border: 1px solid #eecc6d;
          border-radius: 4px;
          text-align: center;
          margin-left: 10px;
          cursor: pointer;
          width: 50px;
          margin-top: 10px;
      }

      .newfolder:hover {
          background: linear-gradient(135deg, #fbde86, #ffe7a3);
          border: 1px solid #fddd83;
      }

      /* Box pro složky */
      #uploaded-attachments .folder-box {
          background: linear-gradient(135deg, #f3d26f, #ffe28e);
          color: #000;
          font-weight: normal;
          padding: 5px 10px;
          line-height: 20px;
          font-size: 10px;
          border: 1px solid #eecc6d;
          border-radius: 4px;
          text-align: left;
          margin: 1px;
          cursor: pointer;
          width: 100%;

      }


      /* Box složky Root (skrytý) */
      #uploaded-attachments .folder-box[style*="background-color: #ffcccc"] {
          display: none;
          /* Skryje složku Root */
      }

      /* Obrázky uvnitř složek */
      #uploaded-attachments .folder-content {
          sdisplay: none;
          /* Ve výchozím stavu jsou obrázky skryté */
          flex-wrap: wrap;
          gap: 0px;
          sfont-size: 20px;
          padding-left: 20px;

      }

      /* Styl pro jednotlivé obrázky */
      #uploaded-attachments div.image-wrapper {
          swidth: 100%;
          background-color: #f9f9f9;
          border: 1px solid #ddd;
          border-radius: 5px;
          sposition: relative;
          sdisplay: inline-block;
          margin: 1px;
          padding: 5px;
          height: 25px;
          transition: transform 0.2s, box-shadow 0.2s;
      }

      #uploaded-attachments div.image-wrapper2 {
          swidth: 100%;
          background-color: #f9f9f9;
          border: 1px solid #ddd;
          border-radius: 5px;
          sposition: relative;
          sdisplay: inline-block;
          margin: 1px;
          padding: 5px;
          height: 25px;
          transition: transform 0.2s, box-shadow 0.2s;
      }

      /* Text s datem nebo informací ve spodní části obrázku */
      #uploaded-attachments p {
          position: relative;
          display: inline-block;
          padding-right: 10px;
          color: black;
          font-size: 10px;
          sline-height: 18px;
      }

      #uploaded-attachments p.created {
          position: relative;
          display: inline-block;
          padding-right: 10px;
          padding-top: 2px;
          padding-bottom: 2px;
          margin-right: 5px;
          margin-top: -4px;
          background-color: #888;
          font-size: 8px;
          padding-left: 10px;
          color: #fff;
          border-radius: 3px;
          sheight: 20px;

      }



      #uploaded-attachments .fa-eye {
          display: none;
      }

      #uploaded-attachments div.filen {
          position: relative;
          display: inline-block;
          font-size: 10px;
      }


      #uploaded-attachments .action-box {
          position: relative;
          float: right;
          sheight: 20px;
          color: #000;
          sdisplay: flex;
          width: 50px;
          smargin-top: 5px;
          sjustify-content: space-around;
          salign-items: center;

      }


      #uploaded-attachments div.folder-content div.upload-button {
          display: inline-block;
          position: relative;
          background-color: #cfc;
          border: solid 3px #9c9;
          border-radius: 5px;
          font-size: 12px;
          padding-top: 3px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          color: #9c9;
          width: 100px
      }


      #uploaded-attachments div.upload-button {
          display: none;
          position: relative;
          background-color: #cfc;
          border: solid 3px #9c9;
          border-radius: 5px;
          font-size: 12px;
          sheight: 36px;
          line-height: 20px;
          text-align: center;
          color: #9c9;
          width: 100px
      }





      .settings {
          width: 100%;
          padding: 5px;
          background: #eee;
          border: 1px solid #ddd;
          font-size: 12px;
      }

      .settinsitem {
          display: inline-block;
          background: #ccc;
          padding: 3px;
          border-radius: 4px;
          margin-bottom: 2px;
          vertical-align: top;
      }

      .setting-input {
          display: inline-block;
          font-size: 10px;
          background: #eee;
          border: 1px solid #ddd;
          padding: 3px;
          border-radius: 4px;
      }

      #settings-form {
          display: none;
          /* Formulář je výchozí skrytý */
      }

      #settings-form.visible {
          display: block;
          /* Formulář se zobrazí, když má třídu `visible` */
      }


      #help {
          display: none;
          /* Formulář je výchozí skrytý */
      }

      #help.visible {
          display: block;
          /* Formulář se zobrazí, když má třídu `visible` */
      }

      #uploaded-images div.image-wrapper div.userlabel {
          font-size: 9px;
          color: #000;
          position: absolute;

          background: #ccc;
          width: 115px;
          border-radius: 5px;
          padding: 2px 10px;
          width: 100%;
          display: none;
      }


      #uploaded-attachments div.image-wrapper div.userlabel {
          font-size: 9px;
          color: #000;
          position: absolute;
          margin-top: 19px;
          width: 115px;

      }

      #uploaded-images div.image-wrapper2 div.userlabel {
          font-size: 9px;
          color: #000;
          position: absolute;

          background: #ccc;
          width: 115px;
          border-radius: 5px;
          padding: 2px 10px;
          width: 100%;
      }


      #uploaded-attachments div.image-wrapper2 div.userlabel {
          font-size: 9px;
          color: #000;
          position: absolute;
          margin-top: -2px;
          width: 115px;

      }

      .hidden {
          display: none;
      }

      #overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.8);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 5000;
      }

      #overlay1 {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.8);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 5000;
      }

      .modale {
          background: black;
          border: 1px solid #f7db89;
          padding: 20px;
          font-size: 14px;
          color: #f7db89;
          border-radius: 5px;
          text-align: center;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          z-index: 5500;
          position: absolute;
          top: 10px;
      }

      .modale input {
          width: 80%;
          padding: 10px;
          color: #000;
          margin: 10px 0;
          border: 1px solid #fff;
          border-radius: 3px;
          z-index: 5500;
      }

      .modale button {
          padding: 10px 20px;
          margin: 5px;
          border: none;
          border-radius: 3px;
          background: #f7db89;
          color: black;
          cursor: pointer;
      }

      .modale button:hover {
          background: #ffe9ab;
      }

      #uploaded-images div.image-wrapper.file {
          background: #d9c44f;
      }