/* ----------------------------------- */
/* überschreiben der bg-dark Klasse von bootstrap für header BG und andere */

.bg-dark { 
    background-color: rgba(0, 0, 0, 0.7) !important;  /* Hintergrundfarbe mit 50% Transparenz */
    backdrop-filter: blur(5px); /* Unschärfe-Effekt unter dem Header (funktioniert auf modernen Browsern) */
    transition: opacity 0.3s ease;
}

#mainNavbar {
  min-height: 64px; /* oder was du brauchst */
}

.container-fluid {
  padding-left: 0%;
  padding-right: 0%;
  /* max-width: 1140px; /* z. B. Bootstrap Breakpoint für lg */
  margin: 0 auto;
}

.navbar-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    /* Optional: falls Buttons zu groß werden */
    white-space: nowrap; 
}

.navbar.bg-dark.navbar-dark.navbar-brand {
    /* background-color: rgba(52, 58, 64, 0.2) !important; /* Dunkler Hintergrund mit 70% Deckkraft */
    backdrop-filter: blur(5px); /* Unschärfe-Effekt unter der Navbar (funktioniert auf modernen Browsern) */
    transition: opacity 0.3s ease;
} 

@media (max-width: 991.98px) {
    .navbar-center {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        margin: 1rem 0;
        width: 100%;
        justify-content: center;
        display: flex;
    }
}


/* ----------------------------------- */
/* Sicherstellen, dass die Buttons im normalen Zustand sichtbar sind */
.btn-outline-light {
    color: #f8f9fa; /* Textfarbe */
    border-color: #808080; /* Rahmenfarbe */
}

.btn-outline-light:hover {
    background-color: #f8f9fa; /* Hintergrundfarbe bei Hover */
    color: #343a40; /* Textfarbe bei Hover */
}

.nav-width {
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    margin: 0;
    text-align: center;
}


/* ----------------------------------- */
/* general main styles and home styles */
/* ----------------------------------- */

.full-width {
    width: 100%;
    padding: 30px;
    margin: 0;
    text-align: center;
}

.highlighted-text {
    width: 75%;
    background-color: #212529; /* Hellerer Hintergrund */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 20px; /* Innenabstand */
    font-size: 1.2rem; /* Größere Schriftgröße */
    color: #838383; /* Textfarbe */
    text-align: left; /* Linksbündiger Text */
    margin: 20px auto; /* Außenabstand oben und unten, horizontal zentriert */
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
}




/* ----------------------- */
/* Styles for Upload page */
/* ----------------------- */

.container-centered {
    max-width: 80%; /* Maximale Breite des Containers */
    margin: 0 auto; /* Zentrieren des Containers */
}
.dropzone {
    border: 2px dashed #007bff;
    border-radius: 5px;
    padding: 20px;
    height: 300px; /* Höhe der Dropzone */
    text-align: center;
    cursor: pointer;
    background-color: rgba(0, 123, 255, 0.2); /* Schwacher Hintergrund */
    position: relative;
    background-size: cover;
    background-position: center;
    max-width: 100%; /* Maximale Breite der Dropzone */
    /* max-height: 50%; /* Maximale Breite der Dropzone */
    margin: 0 auto; /* Zentrieren des Containers */
    color: #007bff; /* Textfarbe */
}
.dropzone.dragover {
    background-color: rgba(0, 123, 255, 0.3); /* Hintergrundfarbe bei Dragover */
}
.dropzone img {
    display: none; /* Bildvorschau ausblenden */
}
.dropzone i {
    font-size: 48px;
    color: #007bff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dropzone span {
    display: block;
}
.dropzone.hide-content i,
.dropzone.hide-content span {
    display: none;
}
.progress {
    height: 40px;
    margin-top: 20px;
    font-size: medium;
    background-color: #343a40; /* background color of the progress bar */
}


/* --------------------------------- */
/* Styles for LOOPSPACE Gallery page */
/* --------------------------------- */

 .loopspace-gallery-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    transition: box-shadow 0.3s, border 0.3s;
    border-radius: 12px;
}

.loopspace-gallery-wrapper:hover {
    box-shadow: 0 0 0 2px #fff;
    /* border: 2px solid #fff; */ /* Optional: Rahmen beim Hover */
}

.loopspace-gallery-item {
    position: relative;
    min-height: 260px;
    border-radius: 12px 12px 0 0 !important; /* Abgerundete Ecken oben */
    overflow: hidden;
    /* Nur oben abgerundet */
}

.image-stats {
    position: absolute;
    top: 0;
    left: 0;
    justify-content: space-around;
    width: 100%;
    display: flex;
    margin-bottom: auto;
    flex-direction: row;
    align-items: center;
    background: #000000 !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    padding: 6px 14px 6px 14px;
    font-size: 0.75rem;
    opacity: 0.92;
    pointer-events: auto;
}
.views, .likes, .comments {
    display: flex;
    align-items: center;
    gap: 4px;
}


.loopspace-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 1rem;
    z-index: 2;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    height: 50px;
    background: #242627 !important; /* dunkleres Grau */
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}
.footer-name {
    font-weight: 600;
    letter-spacing: 1px;
}
.footer-buttons {
    display: flex;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    justify-content: flex-end;
}
.loopspace-gallery-wrapper:hover .footer-buttons {
    opacity: 1;
    pointer-events: auto;
}
.loopspace-gallery-item:hover + .loopspace-footer .footer-buttons,
.loopspace-footer:hover .footer-buttons {
    opacity: 1;
    pointer-events: auto;

}
.loopspace-gallery-item:hover + .loopspace-footer .footer-name,
.loopspace-footer:hover .footer-name {
    opacity: 0.5;
    border-radius: 12px 12px 0 0 !important; /* Abgerundete Ecken oben */
}
.btn-circle {
    border-radius: 50% !important;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0rem;
}
/* .comments-btn i {
    color: #759cf1;
} */



/* Styles für die LoopSpace-Gallery */
.loopspace-gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 15px;
    padding: 20px;
    justify-items: center;
}

.loopspace-gallery-item {
    width: 100%;
    /* height: 240px; /* Etwas höher als Assets */
    aspect-ratio: 2 / 1; /* Seitenverhältnis 16:9 */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-size: cover; /* Hintergrundbild auf die Größe des Containers strecken */
    background-position: center; /* Hintergrundbild zentrieren */
    /* background-position: 50% 50%;
    background-repeat: repeat-x; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: border 0.3s ease;
    box-sizing: border-box;
    background-color: #222;
}

.loopspace-gallery-item:hover .image-info {
    opacity: 1;
/*     border-radius: 12px; */
    border-radius: 12px 12px 0 0 !important; /* Abgerundete Ecken oben */
    border: none;
}

.loopspace-gallery-item:hover .image-name {
    visibility: visible; /* Sichtbarkeit beim Hover */
}

/* ----------------------------- */
/* Styles for Asset Gallery page */
/* ----------------------------- */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #111; /* Hintergrundfarbe auf dunkelgrau setzen */
    color: white; /* Textfarbe auf weiß setzen */
}
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    padding: 20px;
    justify-items: stretch;
}

.gallery-item {
    width: 100%;
    max-width: 25vw; /* Maximal 25% der Viewport-Breite auf großen Bildschirmen */
    min-width: 280px; /* Optional: Mindestbreite für sehr kleine Bildschirme */
    height: 200px; /* Höhe des Containers festlegen */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: border 0.3s ease; /* Übergangseffekt für den Rahmen */
    box-sizing: border-box; /* Rahmen in die Gesamtgröße einbeziehen */
    background-color: #222; /* Hintergrundfarbe auf dunkelgrau setzen */
}

/* Für kleine Bildschirme: max. 50% der Breite */
/* @media (max-width: 600px) {
    .gallery-item {
        max-width: 45vw;
    }
} */

.panorama-gallery-item {
    width: 100%;
    height: 220px; /* Höhe des Containers festlegen */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-size: 200%;
    background-position: 50% 50%;
    background-repeat: repeat-x; /* Hintergrundbild horizontal wiederholen */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: border 0.3s ease; /* Übergangseffekt für den Rahmen */
    box-sizing: border-box; /* Rahmen in die Gesamtgröße einbeziehen */
    background-color: #222; /* Hintergrundfarbe auf dunkelgrau setzen */
}

/* style the image info in gallery on mouse over hover */
.image-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.gallery-item:hover .image-info {
    opacity: 1;
}

.image-name {
    color: white;
    font-size: large;
    text-align: center;
    margin-bottom: auto;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.image-details {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.image-details div {
    color: white;
    font-size: small;
    display: flex;
    align-items: center;
}

.image-details i {
    margin-right: 5px;
}

/* remove the Standard-Link-style for getting the full gallery item as a link */
.gallery-item-link {
    width: 100%;
    text-decoration: none; /* Entferne die Unterstreichung */
    color: inherit; /* Verwende die Textfarbe des übergeordneten Elements */
}

.gallery-item:hover {
    /* animation: scroll-left 10s ease-in-out infinite; /* Animation beim Hover */
    border: 2px solid white; /* Rahmen beim Hover */
}

.gallery-item:hover .image-name {
    visibility: visible; /* Sichtbarkeit beim Hover */
}
@keyframes scroll-left {
    0% {
        background-position: -150% 50%;
    }
    100% {
        background-position: 50% 50%;
    }
}
.image-name {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    width: 100%;
    font-size: small;
    text-align: center;
    padding: 5px 0;
    box-sizing: border-box;
    visibility: hidden; /* Standardmäßig versteckt */
}    

/* Button-Style für das Resolution-Label */
.resolution {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2); /* Heller, leicht transparenter Hintergrund */
    color: rgba(0, 0, 0, 0.7); /* Halbtransparenter schwarzer Text */
    padding: 2px 6px;
    border-radius: 2px; /* Abgerundete Ecken */
    font-size: 0.6rem;
    /* font-weight: 600; */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    text-transform: uppercase; /* Optional: Großbuchstaben für einen technischen Look */
    margin: 0 4px;
    transition: all 0.2s ease;
}

/* Hover-Effekt für das Resolution-Label */
/* .resolution:hover {
    background-color: rgba(255, 255, 255, 0.95);
    color: rgba(0, 0, 0, 0.85);
    transform: translateY(-1px);
} */

/* Optional: Anpassung des 3D-Labels für Konsistenz */
.stereoscopic span {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2); /* Subtiler Hintergrund */
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 0.8rem;
    margin: 0 4px;
}

/* ----------------------- */
/* Styles for Profile page */
/* ----------------------- */

/* Container for all user statistics */
.user-stats-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* background-color: #2c2c2c; */
    /* padding: 20px; */
    border-radius: 10px;
}

/* Individual stat box */
.stat-box {
    text-align: left;
    width: 100%;
    background-color: #212529;
    color: white;
    margin-left: 20px;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

/* Number styling */
.stat-number {
    font-size: 2em;
    font-weight: bold;
    color: #ffffff;
}

/* Label styling */
.stat-label {
    margin-top: 10px;
    font-size: 1.2em;
    color: #a0a0a0;
}

.stat-icon {
    font-size: 2rem; /* Größe des Icons */
    color: rgba(124, 124, 124, 0.5); /* Farbe des Icons */
    position: absolute;
    right: 10px; /* Abstand vom rechten Rand */
    top: 50%;
    transform: translateY(-50%); /* Vertikale Zentrierung */
}

/* icons styling */

.icon-button {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    cursor: pointer;
    width: 45px;
    height: 45px;
}
.icon-button:hover {
    background-color: rgba(56, 56, 56, 0.5);
}
.icon-button.view {
    top: 40px;
    left: 10px;
}
.icon-button.view:hover {
    color: rgb(39, 255, 136);
    background-color: rgba(0, 100, 45, 0.5);
}
.icon-button.info {
    top: 40px;
    left: 10px;
}
.icon-button.info:hover {
    color: rgb(39, 176, 255);
    background-color: rgba(0, 58, 100, 0.5);
}
.icon-button.delete {
    bottom: 40px;
    right: 10px;
}
.icon-button.delete:hover {
    color: rgb(185, 0, 0);
    background-color: rgba(78, 0, 0, 0.5);
}
.icon-button.edit {
    top: 40px;
    right: 10px;
}
.icon-button.edit:hover {
    color: rgb(255, 255, 255);
    background-color: rgba(128, 128, 128, 0.5);
}

/* -------------------------------------------------- */
/* style fo the modal info dialog on the profile page */
/* -------------------------------------------------- */

.modal-backdrop {
    background-color: #000; /* change background color of the modal backdrop */
    /* opacity: 0.5; /* change opacity of the modal backdrop */
}

.modal-backdrop.show {
    opacity: .7;
}

.modal-content { 
    background-color: #23272c; /* Dunkelgrauer Hintergrund */
    color: white; /* Weiße Schriftfarbe */
    text-align: left; /* Linksbündige Schrift */
    border: none; /* Entferne den Rahmen um den ganzen Modal herum */
    box-shadow: #111 0px 0px 20px; /* Schatten um den Modal */
}

.modal-header {
    display: flex;
    justify-content: center;
    position: relative;
    border: none;
    background-color: #414850;
} 

.modal-header .btn-close {
    position: absolute;
    right: 20px;
}

.modal-footer {
    background-color: #343a40; /* Etwas hellerer Hintergrund */
    border: none;
    /* color: white; /* Weiße Schriftfarbe */
}

.modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Zentriere das Modal vertikal */
}

.modal-body {
    padding: 20px; /* Optional: Füge etwas Padding hinzu */
}

.input-group-text {
    width: 120px; /* width of the span elements (labels) of the input forms in modal */
    border: none;
    color: rgb(201, 201, 201);
}

/* Entferne den Rahmen und mache die Schriftfarbe dunkler für readonly Input-Felder */
.form-control[readonly] {
    border: none; /* Entferne den Rahmen */
    color: #759cf1; /* Dunklere Schriftfarbe */
    /* background-color: transparent; /* Optional: Entferne den Hintergrund */
    pointer-events: none; /* Verhindere, dass das Feld klickbar ist */
}

.form-control:focus {
    /* border-color: #007bff; */ /* Ändere die Rahmenfarbe beim Fokus */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Füge einen Schatten hinzu */
    /* background-color: #98b1e280; */
    color: #bbcdf3; /* Dunklere Schriftfarbe */
}

.form-control:hover {
    background-color: #ffffff0e;
    color: #bbcdf3; /* Dunklere Schriftfarbe */
}

/* Stelle sicher, dass die Buttons gleich breit sind und die gesamte Breite der input-group ausfüllen */
.input-group .btn {
    /* flex: 1; /* Verteile den verfügbaren Platz gleichmäßig */
    text-align: center; /* Zentriere den Text */
}


/* ------------------------------ */
/* Stil für die Flash-Nachrichten */
/* ------------------------------ */

.flash-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    text-align: center;
}
.flash-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.flash-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
/* Positionierung der Flash-Nachrichten */
.flash-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    z-index: 1000;
}

/* --------------------------------------- */
/* Style for the SWEETALERT popup messages */
/* --------------------------------------- */

.swal2-actions {
    gap: 8px;
}

/* Dialog-Schatten */
.swal2-popup {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
}

/* Gleich breite Buttons mit transparentem Hintergrund */
.swal2-actions button {
    min-width: 120px !important;
    font-weight: 500 !important;
}

/* Individuelle Button-Stile mit Transparenz */
.swal2-confirm {
    background-color: rgba(40, 167, 69, 0.7) !important; /* Grün mit 20% Transparenz */
    border: 2px solid rgba(40, 167, 69, 1) !important;
}

.swal2-deny {
    background-color: rgba(48, 133, 214, 0.7) !important; /* Blau mit 20% Transparenz */
    border: 2px solid rgba(48, 133, 214, 1) !important;
}

.swal2-cancel {
    background-color: rgba(211, 51, 51, 0.7) !important; /* Rot mit 20% Transparenz */
    border: 2px solid rgba(211, 51, 51, 1) !important;
}

/* Hover-Effekte für die Buttons */
.swal2-confirm:hover, .swal2-deny:hover, .swal2-cancel:hover {
    opacity: 1 !important;
    filter: brightness(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.1s ease;
}