.form-group-images {
    display: flex; /* Enables horizontal layout */
    gap: 20px; /* Adds space between the elements */
    justify-content: center; /* Centers the previews horizontally within the container */
    align-items: center; /* Aligns previews vertically within the row */
}

.image-container {
    position: relative;
    /*    float: left;*/
    width: 230px;
    height: 320px;
    /* width: 100%;*/
    /*    aspect-ratio: 1.3/1;*/
    overflow: hidden;
    margin: 10px;
    right: 10px;
    border: 2px solid #ddd;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    image-orientation: from-image;
}

.key-side-1::before {
    content: "key side 1"; /* Default text */
    position: absolute;
    color: #4f4747;
    font-size: 18px;
    text-align: right; /* Poravnanje teksta desno */
    bottom: 10px; /* Udaljenost od donje ivice */
    right: 10px;
    z-index: 70;
}
.image-container.key-side-1.has-image::before {
    content: "key side 1";
}
.image-container.key-side-2.has-image::before {
    content: "key side 2";
}

.key-side-2::before {
    content: "key side 2"; /* Default text for the second container */
    position: absolute;
    color: #4f4747;
    font-size: 18px;
    text-align: right; /* Poravnanje teksta desno */
    bottom: 10px; /* Udaljenost od donje ivice */
    right: 10px;
    z-index: 70;
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
}
.image-container video {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Ensures video fills the container and crops if necessary */
}

.image-container.has-image::before {
    content: "";
}body {
}

/* Leveling indicator styles */
.levelingIndicator {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: red; /* Horizon line color */
    transform-origin: center;
    transform: rotate(0deg);
    z-index: 10; /* Uveri se da je `z-index` veći od pozadine */
}

.ImageFile {
    position: absolute; /* or `absolute` if positioning is needed */
    z-index: 100; /* higher z-index to bring it forward */
    opacity: 1; /* ensure opacity is fully visible */
    display: block; /* ensure it’s displayed as block-level */
    opacity: 0; /* Makes input invisible but still clickable */
    cursor: pointer;
    image-orientation: from-image;
    pointer-events: none;
}

/* Style the overlay image to cover the full container */
.previewThumbImage {
    width: 50%; /* Ensures it covers the container */
    height: auto;
    /* object-fit: contain;*/
    top: 80%;
    left: 85%;
    transform: translate(-80%, -80%);
    z-index: 2; /* Ensures it stays on top */
    position: absolute; /* Position absolutely in the container */
    pointer-events: none; /* Klikovi prolaze samo do roditeljskog elementa */
}
/* For Data sent dialog */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background: white;
    margin: 15% auto;
    padding: 20px;
    width: 80%;
    max-width: 400px;
}

.close {
    float: right;
    font-size: 24px;
    cursor: pointer;
}