:root {
     --fontFamily: Montserrat, Sans-Serif;
    /*--fontWeight: 400;
    */
     --textTransform: none;
     --textDecoration: none;
     --fontSize: 14px;
     --lineHeight: 1.35;
     --letterSpacing: 0em;
     --buttonFontWeight: 500;
     --buttonFontSize: 14px;
     --has-classic-forms: var(--true);
     --has-modern-forms: var(--false);
     --form-field-border-initial-color: var(--border-color);
     --form-field-border-focus-color: var(--paletteColor1);
     --form-selection-control-initial-color: var(--border-color);
     --form-selection-control-accent-color: var(--paletteColor1);
     --paletteColor1: #EBB289;
     --paletteColor2: #bc8a67;
     --paletteColor3: #262626;
     --paletteColor4: #000000;
     --paletteColor5: #FCF4ED;
     --paletteColor6: #f2f5f7;
     --paletteColor7: #FAFBFC;
     --paletteColor8: #ffffff;
     --color: var(--paletteColor3);
     --linkInitialColor: var(--paletteColor1);
     --linkHoverColor: var(--paletteColor2);
     --selectionTextColor: var(--paletteColor8);
    ;
     --selectionBackgroundColor: var(--paletteColor1);
     --border-color: var(--paletteColor4);
     --headings-color: var(--paletteColor4);
     --content-spacing: 1.5em;
     --form-field-height: 26px;
     --buttonMinHeight: 26px;
     --buttonShadow: none;
     --buttonTransform: none;
     --buttonTextInitialColor: var(--paletteColor8);
     --buttonTextHoverColor: var(--paletteColor8);
     --buttonInitialColor: var(--paletteColor1);
     --buttonHoverColor: var(--paletteColor2);
     --button-border: none;
     --buttonBorderRadius: 4px;
     --button-padding: 5px 20px;
     --normal-container-max-width: 1290px;
     --content-vertical-spacing: 60px;
     --narrow-container-max-width: 750px;
     --wide-offset: 130px;
}
 html {
     background-image: radial-gradient(circle at center, #f2f2f2, #d4d4d4 100%);
    /* Vinjeting efekt */
}
 body {
     margin: 0;
     padding: 0;
     font-family: Montserrat, Sans-Serif;
}
 .header {
     background-color: rgb(204, 22, 22);
     color: var(--paletteColor1);
     display: flex;
     justify-content: space-between;
     padding: 10px 20px;
}
 .left-header, .right-header {
     margin: auto 0;
     margin-right: 35px;
}
 .navbar {
     background-color: var(--paletteColor4);
     color: var(--paletteColor8);
     display: flex;
     align-items: center;
     padding: 10px 20px;
     padding-top: 60px;
    /* Dodan padding na vrh koji je jednak visini header-a */
     justify-content: space-between;
    /* Dodano za poravnanje elemenata */
}
 .logo {
     height: 50px;
     margin-right: 20px;
}
 .menu-items {
     display: flex;
    /* Dodano za horizontalno poravnanje izbornika */
}
 .dropdown {
     position: relative;
     display: inline-block;
     margin-right: 0;
    /* Postavljeno na 0 da budu tik jedan do drugoga */
     font-weight: bold;
}
 .dropbtn {
     color: var(--paletteColor8);
     padding: 10px;
     cursor: pointer;
}
 .dropbtn:hover {
     color: var(--paletteColor2);
}
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: var(--paletteColor3);
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
}
 .dropdown-content a {
     color: var(--paletteColor8);
     padding: 12px 16px;
     display: block;
}
 .dropdown-content a:hover {
     background-color: var(--paletteColor3);
}
 .dropdown:hover .dropdown-content {
     display: block;
}
/* Footer stilovi */
 .footer {
     background-color: var(--paletteColor4);
     color: var(--paletteColor8);
     padding: 20px;
     font-size: 1rem;
}
 .footer-content {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
    /* Omogućuje prelazak u novi red na manjim ekranima */
}
 .footer-logo {
     height: 30px;
}
 .footer-links {
     font-size: 0.75rem;
    /* 25% sitniji tekst */
     display: flex;
     flex-wrap: wrap;
    /* Omogućuje prelazak u novi red na manjim ekranima */
     margin-right: 35px;
}
 .footer-links a {
     margin: 0 10px;
    /* Dodan razmak između linkova */
     color: var(--paletteColor8);
     text-decoration: none;
}
 .footer-bottom {
     display: flex;
     justify-content: space-between;
     font-size: 0.5rem;
    /* Tanki svijetlo sivi tekst */
     color: var(--paletteColor68);
    /* Svijetlo siva boja */
     margin-top: 10px;
}
 .footer-bottom-left span, .footer-bottom-right span {
     margin-right: 20px;
}
/* Fiksni header i footer */
 .header, .footer {
     position: fixed;
     width: 100%;
     z-index: 1000;
}
 .header {
     background-color: var(--paletteColor3);
     top: 0;
}
 .footer {
     bottom: 0;
}
/* Sredina stranice */
 .content {
    /*margin-bottom: 60px;
     Visina footera */
    /*background-color: #f2f2f2;
     Lagano sivkasta pozadina */
    /*background-image: radial-gradient(circle at center, #f2f2f2, #d4d4d4 100%);
     Vinjeting efekt */
     padding: 3px;
    /* Usklađeno s marginama */
     padding-bottom: 0px;
     padding-top: 0px;
}
/* Stilovi forme */
 .container {
    /*background-color: white;
    */
     background-color: var(--paletteColor5);
     padding: 5px;
     border-radius: 10px;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    /* Sjenčanje */
}
 h1, label, textarea, input {
     font-weight: 900;
    /* Tekst je podebljan */
    /*font-size: 60px;
    */
     color: var(--paletteColor4);
    /* Crna boja teksta */
}
/* Responzivnost */
 @media (max-width: 768px) {
     .footer-links a {
         margin-bottom: 10px;
    }
}
/* Fiksni header */
 .fixed-header {
     position: sticky;
     top: 0;
     width: 100%;
     z-index: 1000;
     background-color: var(--paletteColor3);
    /* Dodano kako bi se osiguralo da je pozadina neprozirna */
}
 label {
     display: block;
    /* Postavlja label iznad textarea */
     margin-bottom: 0px;
    /* Dodaje malo razmaka između label i textarea */
}
 textarea {
     width: 100%;
    /* Postavlja širinu na 100% */
     padding: 2px;
     background-color: var(--paletteColor3);
     color: var(--paletteColor5);
     font-size: 12px;
     font-family: monospace;
    /* Postavlja font na monospace */
     font-weight: normal;
}
 textarea:focus {
     background-color: var(--paletteColor3);
    /* Zadržava boju pozadine istom pri fokusiranju */
     color: var(--paletteColor5);
    /* Zadržava boju teksta istom pri fokusiranju */
}
 .button-container {
     display: flex;
     justify-content: start;
    /* ili "space-between" ako želite razmak između gumba */
     align-items: center;
}
 .button-container button {
     width: 100%;
    /* Postavlja širinu gumba na 45% roditeljskog elementa */
     margin-right: 5%;
	 text-align: left;
    /* Dodaje malo razmaka s desne strane prvog gumba */
}
 .button-container esp-web-install-button {
     width: 100%;
    /* Postavlja širinu gumba na 45% roditeljskog elementa */
}
 #serialOutput {
     border: 1px solid var(--paletteColor3);
     border-radius: 10px;
     width: auto;
    /*height: 300px;
     Visina može biti prilagođena */
     height: calc(100vh - 436px - 112px);
    /* Ako imate header visine 50px */
     overflow-y: auto;
    /* Omogućuje vertikalni scrollbar */
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    /* Dodaje malo sjenčanja */
     margin-top: 4px;
    /* Dodaje malo prostora iznad */
     resize: both;
    /* omogućuje promjenu veličine u oba smjera */
     overflow: auto;
    /* obavezno ako želite koristiti 'resize' */
     background-color: var(--paletteColor3);
     color: var(--paletteColor5);
     font-size: 12px;
     font-family: monospace;
    /* Postavlja font na monospace */
     font-weight: normal;
     padding: 4px;

}
 .checkbox-container {
     display: flex;
     justify-content: flex-start;
    /*align-items: center;
    */
     margin-bottom: -1px;
    /* Dodaje malo prostora između ovog reda i sljedećeg */
     justify-content: flex-end;
}
 .input-box {
     width: calc(100% - 165px);
     border: 1px solid var(--paletteColor3);
     border-radius: 4px;
     padding: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 .input-box {
     flex-grow: 1;
    /* Omogućuje input boxu da popuni preostali prostor */
     margin-right: 10px;
    /* Dodaje malo razmaka između input boxa i gumba */
}
/* Stilovi za navigaciju tabova */
/* Stilizacija tabova */
 .tab {
     overflow: hidden;
    /* border: 1px solid #ccc;
     */
    /* background-color: #f1f1f1;
     */
     z-index: 1001;
    /* Ako je z-index headera 1000, stavite ovaj na 1001 ili više */
}
/* Stilizacija sadržaja tabova */
 .tabcontent {
    /*display: none;
    */
    /*padding: 6px 12px;
    */
    /*border: 1px solid rgb(50, 25, 139);
    */
     border-top: none;
}
 .radio-inline input[type="radio"], .radio-inline label {
     display: inline-block;
}
 .radio-inline label {
     margin-left: 5px;
     margin-right: 20px;
    /* Razmak između setova radio gumba i oznaka */
}
 .mb-3.mt-3 {
     font-family: monospace;
     font-weight: normal;
}
 #editor {
     width: 100%;
     height: 400px;
}
/* Gumbi */
 button {
     background-image: radial-gradient(circle, var(--paletteColor1), var(--paletteColor2));
     color: var(--paletteColor4);
    /* Tekst postavljen na crnu boju */
     border: none;
     border-radius: 4px;
    /* Zaobljeni rubovi */
     padding: 4px 6px;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    /* Sjenčanje */
     cursor: pointer;
     font-weight:900;
}
 button:hover {
     background-image: radial-gradient(circle, var(--paletteColor2), var(--paletteColor1));
}
 button[type="submit"] {
     background-color: var(--paletteColor1);
    /* Ranije korištena boja */
     color: var(--paletteColor8);
     border: none;
     border-radius: 4px;
    /* Zaobljeni rubovi */
     padding: 4px 6px;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    /* Sjenčanje */
     cursor: pointer;
     font-weight:900;
}
 button[type="submit"]:hover {
     background-image: radial-gradient(circle, var(--paletteColor2), var(--paletteColor1));
}
 .send-button {
     width: 130px;
    /* Postavlja fiksnu širinu za oba gumba */
     padding: 4px 6px;
     border-radius: 4px;
     background-image: radial-gradient(circle, var(--paletteColor1), var(--paletteColor2));
     color: var(--paletteColor8);
     border: none;
     cursor: pointer;
     font-weight:900;
}
 .send-button-middle {
     width: 100px;
    /* Postavlja fiksnu širinu za oba gumba */
     margin-right: 5px;
     padding: 4px 6px;
     border-radius: 4px;
     background-image: radial-gradient(circle, var(--paletteColor1), var(--paletteColor2));
     color: var(--paletteColor8);
     border: none;
     cursor: pointer;
     font-weight:900;
}
 .send-button:hover {
     background-color: var(--paletteColor2);
}
 .input-button-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 .tab button {
     background-color: var(--paletteColor1);
     margin-top: 4px;
     margin-right: 4px;
     border-radius: 0px;
     border-top-right-radius: 14px;
    /*border-bottom-right-radius: 14px;
    */
     float: left;
     border: none;
     outline: none;
     cursor: pointer;
     padding: 6px 8px;
     transition: 0.3s;
}
 .button-container div {
     display: inline-block;
     margin-right: 6px;
    /* Dodaje malo prostora između svakog button-a */
}

.button-container .btn.btn-primary {
    background-image: radial-gradient(circle, var(--paletteColor1), var(--paletteColor2));
    color: var(--paletteColor4);
    border: none;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
}

.button-container .btn.btn-primary:hover {
    background-image: radial-gradient(circle, var(--paletteColor2), var(--paletteColor1));
}

.button-container esp-web-install-button button[slot="activate"] {
    background-image: radial-gradient(circle, var(--paletteColor1), var(--paletteColor2));
    color: var(--paletteColor4);
    border: none;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
}

.button-container esp-web-install-button button[slot="activate"]:hover {
    background-image: radial-gradient(circle, var(--paletteColor2), var(--paletteColor1));
}

 #find, #replace {
     width: 15ch;
     transform: translateY(2px);
}
 #find_replace_container button, #find_replace_container input {
     display: inline-block;
}
 .send-button, .send-button-middle, button[type="submit"] {
     background-image: radial-gradient(circle, var(--paletteColor1), var(--paletteColor2));
     color: var(--paletteColor4);
    /* Tekst postavljen na crnu boju */
     border: none;
     border-radius: 4px;
     /* padding: 10px;*/
     cursor: pointer;
}
/* Dodajte ovu sekciju za hover efekt */
 .send-button:hover, .send-button-middle:hover, button[type="submit"]:hover {
     background-image: radial-gradient(circle, var(--paletteColor2), var(--paletteColor1));
}
 .tab button:hover {
     background-color: var(--paletteColor2);
}
 .tab button.active {
     background-color: var(--paletteColor3);
     background-image:none;
     color: var(--paletteColor2);
    /* Tekst postavljen na xxx boju */
}
/* Prilagodba stilova za input polja */
#tab2 input[type="text"] {
    font-family: monospace;
    font-weight: normal;
    border: 1px solid var(--paletteColor3);
    border-radius: 4px;
    padding: 4px;
}

.your-outer-div{
     width: 100% !important;
}
.upload-button {
    position: relative; /* Osigurava da su pseudo-elementi pozicionirani u odnosu na gumb */
}

.upload-button::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid red; /* Ovo će kreirati strelicu */
    /*left: 70px;  Pomaknite strelicu lijevo od gumba 
    top: 50%;*/
    transform: translateX(500%);
    animation: slide 2s infinite; /* Dodajte animaciju */
}

@keyframes slide {
    0%, 100% {
        left: -30px;
    }
    
    50% {
        left: -10px;
    }
}

.selected {
    color: var(--paletteColor1);
    background-color: var(--paletteColor3);
  }

.formContainer {
    display: flex;
    padding: 5px;
	border-radius: 7px;
    background-color: antiquewhite;
}
.menu-items {
    display: flex;
    padding: 5px;
	border-radius: 7px;
    background-color: antiquewhite;
}
.menu-items2 {
    padding: 5px;
	border-radius: 7px;
    background-color: antiquewhite;
}

  .rotate-text {
    width: 300px;
    display: block; /* ili samo 'block' */
        transform: rotate(-90deg);
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%) rotate(-90deg);
        
      }

      .custom-list li {
        font-family: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
        position: relative;
        background-color: #272822;
        color: #F8F8F2;
        width: auto;
        white-space: nowrap;  /* Sprečava prelazak teksta u novi red */      
      }
      
      .custom-list li::before {
        content: "\1F5CE";
        font-size: 14px;
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        margin-right: -10px;
      }
      
      .custom-list {
        max-height: 450px; /* 25 redova x 18px */
        overflow-y: auto; /* Omogućuje vertikalno pomicanje ako je sadržaj veći od max-height */
        overflow-x: hidden; /* Sakriva horizontalni scrollbar */
        width: max-content; /* Postavlja širinu elementa prema sadržaju 
      
        width: auto;*/
        white-space: nowrap;  /* Sprečava prelazak teksta u novi red */
  
        padding-inline-start: 14px;
        background-color: #272822;
        color: #F8F8F2;
        border-width: var(--form-field-border-width, 1px);
        border-style: var(--form-field-border-style, solid);
        border-color: var(--form-field-border-initial-color);
        border-radius: var(--has-classic-forms, var(--form-field-border-radius, 3px));
      }
      
      .custom-button {
      width: 20px; 
      max-height: 450px; /* 25 redova x 18px isto kao i .custom-list */
      display:block; 
      position: relative;
    }

    h6 {
        font-size: 14px;
        color: var(--paletteColor1);
        margin-bottom: 0; /* Uklanja razmak ispod */
        margin-left: 0;  /* Uklanja razmak s lijeva */
    }

    li.selected {
        color: var(--paletteColor1);
        background-color: var(--paletteColor3);
    }

    form textarea {
        --form-field-height: 120px;
    }

  #loadingAnimation {
    display: none; /* Inicijalno skriven */
    position: absolute; /* Apsolutno pozicioniranje */
    top: 50%; /* Centriranje vertikalno */
    left: 50%; /* Centriranje horizontalno */
    transform: translate(-50%, -50%); /* Podešavanje za precizno centriranje */
    z-index: 1000; /* Da bude iznad ostalih elemenata */
}
    
    .loader {
        border: 16px solid #f3f3f3; /* Svijetla boja za tri strane */
        border-top: 16px solid #009908; /* Plava boja za vrh */
        border-radius: 50%;
        width: 200px; /* Povećana širina */
        height: 200px; /* Povećana visina */
        animation: spin 2s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
/* CSS stilovi za kontejner */
/* CSS stilovi za kontejner */

  
  .editorContainer {
    flex: 60%; /* Glavna forma zauzima 60% širine */
    display: flex;
    flex-direction: column; /* Dodano kako bi se omogućilo pomicanje sadržaja unutar editorContainer-a */
    margin-right: 4px; /* Dodaje razmak između editora i boxova s desne strane */
  }
  
  .infoBoxesContainer {
    flex: 40%; /* Boxevi zauzimaju 40% širine */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ovo će rasporediti boxeve ravnomjerno */
    margin-left: 4px; /* Dodaje razmak između editora i boxova s lijeve strane */
    padding-top: 8px; /* Dodaje prostor iznad prvog boxa */  
  }
  
  /* Prilagodba visine boxeva */
  .infoBoxesContainer > div {
    flex: 1; /* Svaki box će zauzeti jednak dio dostupne visine */
    margin: 0 0 4px 0; /* Dodaje malo prostora između boxeva */
    display: flex;
    flex-direction: column;
  }
  
  /* Prilagodba textarea unutar boxeva */
  .infoBoxesContainer > div > textarea {
    flex: 1; /* Textarea će zauzeti cijelu dostupnu visinu svog roditeljskog div-a */
    height: 100%;
  }
  
  /* Prilagodba prikaza na manjim ekranima */
  @media (max-width: 768px) {
    .formContainer {
      flex-direction: column;
    }
  
    .editorContainer, .infoBoxesContainer {
      flex: 100%;
    }

    .editorContainer {
        margin-right: 0; /* Uklanja razmak na malim ekranima */
      }
    
      .infoBoxesContainer {
        margin-left: 0; /* Uklanja razmak na malim ekranima */
        padding-top: 10px; /* Zadržava prostor iznad prvog boxa i na malim ekranima */
      }
  
    .infoBoxesContainer > div {
      height: auto; /* Visina će biti automatska na malim ekranima */
    }
  }
  
/* Ostatak vašeg CSS koda */

.resizable {
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }
  
  .editorContainer {
    
    min-width: 100px; /* Minimalna širina kako bi se spriječilo preusko sužavanje */
  }
  
  .infoBoxesContainer {
    
    min-width: 100px; /* Minimalna širina kako bi se spriječilo preusko sužavanje */
  }
  
  .resizer {
    flex-grow: 0;
    flex-shrink: 0;
    background: #aaa;
    cursor: ew-resize;
    width: 10px; /* Širina resizera */
  }
  
  /* Ostatak vašeg CSS koda */