.custom-file-wrapper {
    position: relative;
    display: flex;
    flex-direction: column; /* Redosled elemenata po vertikali */
    align-items: flex-start; /* Poravnanje levo */
    gap: 10px;
}

.custom-file-wrapper input[type="file"] {
	opacity: 0;
    width: 0!important;
	height: 0!important; 
}

.custom-file-wrapper input[type="file"]:focus {
    outline-width: 0;
	outline-height: 0;
	outline: none;
}

.custom-file-button {
    background-color: #28a745; /* Zelenkasta nijansa */
    color: #fff; /* Beli tekst */
    border: none;
    padding: 8px 12px; /* Povećano za bolji izgled */
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px; /* Povećan font */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.custom-file-button:hover {
    background-color: #218838; /* Tamnija zelena */
}
.custom-file-button:focus {
    background-color: #26983f!important;
}

.custom-file-selected {
    font-size: 14px; /* Povećan font za tekst */
    color: #555;
	text-decoration: underline;
}

.custom-file-selected.not-underlined {
	text-decoration: none;
}

.custom-file-preview {
    max-width: 100%; /* Ograničava širinu slike na 100% širine wrapper-a */
    height: auto; /* Automatska visina u odnosu na širinu */
	max-height: 185px;
    margin-top: 10px; /* Razmak između teksta i slike */
    border: 1px solid #ddd; /* Lagani okvir */
    border-radius: 5px; /* Zaobljeni uglovi */
}

/* Loading animacija */
.custom-file-loading {
    border: 4px solid #f3f3f3; /* Svetlosiva pozadina */
    border-top: 4px solid #28a745; /* Zelenkasta nijansa */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    display: none; /* Skriveno dok se ne koristi */
    margin-top: 10px; /* Razmak između dugmeta i kruga */
}

/* Animacija okretanja */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Resetovanje stila dugmeta na klik */
.custom-file-button:focus {
    outline: none; /* Uklanja fokus efekat */
    box-shadow: none; /* Uklanja crveni okvir */
}


@media (min-width: 600px) {
    .custom-file-button {
		font-size: 17px; 
		padding: 10px 14px; 
	}
	
	.custom-file-selected {
		font-size: 17px;
	}
}