/* Alap stílusok a depthmap-container-hez */
.depthmap-container {
    position: relative; /* A pozíciózáshoz szükséges */
    display: block;
    margin: 0 auto; /* Alapértelmezett középre igazítás */
	max-width: 100%; /* Nem lehet nagyobb, mint a képernyő szélessége */
    /*width: 100%; /* Alapértelmezett szélesség */
    /*height: auto; /* Alapértelmezett magasság */
    overflow: visible; /* A tartalom túllógását engedi: visible / hidden */
    border: 5px solid #2b2926; /* Opcionális keret e9ded0*/
	/*box-sizing: border-box; /* A keret és padding beleszámítása a méretbe */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Finom árnyék */
    border-radius: 0px; /* Opcionális lekerekített sarkok */
    background-color: #000000; /* Háttérszín, ha nincs kép */
}

.depthmap-container canvas {
    max-width: 100%; /* A kép szélessége nem haladja meg a konténer szélességét */
    max-height: 100%; /* A kép magassága nem haladja meg a konténer magasságát */
    display: block; /* Elkerüli a margin-problémákat */
	/*object-fit: contain; /* Megőrzi a kép arányait a konténeren belül */
}

/* Igazítások (ha a Joomla cikkben alignment-et adnak meg) */
.depthmap-align-left {
    margin-left: 0;
    margin-right: auto;
}

.depthmap-align-right {
    margin-left: auto;
    margin-right: 0;
}

.depthmap-align-center {
    margin-left: auto;
    margin-right: auto;
}

/* Balra lebegtetett depthmap-container */
.depthmap-float-left {
    float: left;
    margin-right: 15px; /* Távolság a szövegtől jobbra */
    margin-bottom: 15px; /* Távolság az alatta lévő tartalomtól */
}

/* Jobbra lebegtetett depthmap-container */
.depthmap-float-right {
    float: right;
    margin-left: 15px; /* Távolság a szövegtől balra */
    margin-bottom: 15px; /* Távolság az alatta lévő tartalomtól */
}

/* A responsive design érdekében külön CSS szabály */
@media (max-width: 480px) { /*@media (max-width: 768px) */
    .depthmap-float-left,
    .depthmap-float-right {
        float: none;
        margin: 0 auto;
    }
}

.depthmap-wrapper {
    position: relative; /* A szövegbuborék és a konténer relatív helyzetének kezeléséhez */
	margin: 10px auto; /* Távolság a többi elemtől */
}

.depthmap-bubble {
    /*visibility: hidden; /* Alapértelmezésben rejtve */
    /*opacity: 0; /* Láthatatlanná teszi */
    /*transition: opacity 1s ease-in-out; /* Lágy áttűnés megjelenéskor */	
    position: absolute; /* A JavaScript kezeli a pontos pozíciót */
    /*top: -30px; /* A szövegbuborék a konténer fölé kerül */
    /*left: 0; /* A szülőelem bal széléhez igazítva */
    /*right: 0; /* A szülőelem jobb széléhez igazítva */
	transform: translateX(-50%); /**/
    margin: 0 auto; /* Középre igazítás a szülőelemhez */
    background: #d4cdc4; /* Fehér háttér e9ded0*/
    color: #111111; /* Fekete szöveg 333333*/
    padding: 10px 20px; /* Belső margó */
    border-radius: 10px; /* Lekerekített sarkok */
	border: 3px solid #5c5750; /* 504b45 */
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4); /* Árnyék box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  */
    font-size: 14px; /* Szövegméret */
    text-align: center; /* Szöveg középre igazítás */
    white-space: nowrap; /* Egy sorban tartja a szöveget */
	z-index: 10;
	
    /* Buborék alsó háromszög */
    /*position: relative;	*/
}

.depthmap-bubble::after {
    content: '';
    position: absolute;
    bottom: -20px; /* Háromszög pozíciója */
    left: 50%; /* Középre igazítás */
    transform: translateX(-50%);
    width: 0;
    height: 0;
	/*box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);*/
    border-left: 10px solid transparent; /* Háromszög bal oldala */
    border-right: 10px solid transparent; /* Háromszög jobb oldala */
    border-top: 30px solid #d4cdc4; /* Háromszög színe (a buborékéval megegyező) */
}

.depthmap-bubble b {
    font-weight: bold; /* Vastag betű */
}

.depthmap-bubble i {
    font-style: italic; /* Dőlt betű */
}

.depthmap-bubble strong {
    font-weight: bold; /* Erős kiemelés */
}

.depthmap-bubble em {
    font-style: italic; /* Kiemelt dőlt betű */
}

.depthmap-bubble u {
    text-decoration: underline; /* Aláhúzás */
}

.depthmap-bubble br {
    display: block;
    content: '';
}