body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    overscroll-behavior-y: contain;
    flex-direction: column;
    height: 100vh; /* Vollbildhöhe */
}

.successHint {
    background-color: var(--index-bg-color-successHint);
    color: var(--index-text-color-successHint);
    font-weight: bold;
    display: inline; /* das ist Standard */
    padding: 2px 4px; /* optional für etwas Abstand */
    width: auto;
    max-width: fit-content;
}

.failureHint {
    background-color: var(--index-bg-color-failureHint);
    color: var(--index-text-color-failureHint);
    font-weight: bold;
    display: inline; /* das ist Standard */
    padding: 2px 4px; /* optional für etwas Abstand */
    width: auto;
    max-width: fit-content;
}

/* Top Section */
.top {
    background-color: var(--index-bg-color-top);
    position: relative;
}

.topText {
    color: var(--index-text-color-top);
    text-align: center;
}

.topLeft {
    position: absolute;
    left: 65px;
}

.topImagePoint {
    margin-top: 7px;
    cursor: pointer;
    width: 30px;
}

/* Neues Styling für die Uhrzeit */
.topRight {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--index-text-color-topRight);
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
}

.topTitle {
    font-size: 28px;
}

/*  Frame Section */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

iframe {
    border: none;
    font-family: Arial, sans-serif;
}

#message-frame {
    flex: 1; /* Flexibles mittleres Element */
    overflow-y: auto; /* Scrollbar aktivieren */

    margin: 0;
    background-color: var(--index-bg-color-messageFrame);
    padding: 20px;
    font-family: Arial, sans-serif;
}

#bottom-frame {
    height: auto;
    max-height: 110px; /* Maximale Höhe, um das Layout zu steuern */
    overscroll-behavior-y: contain;
    font-family: Arial, sans-serif;
    overflow: hidden; /* Verhindert Overflow */
}

.unsetDisplayFlex {
    display: unset;
}

.inputParamLoraIp {
    box-sizing: border-box;
    padding: 4px;
    outline: none;
}

.submitParamLoraIp {
    box-sizing: border-box;
    padding: 4px;
    outline: none;
}

::placeholder {
    color:var(--index-text-color-placeHolder);
    opacity:1;
    transition: opacity 1s;
    font-weight: bold;
}

/*   DateTimePicker */
.searchDbDialog::placeholder {
    color:var(--index-text-color-placeHolderSearch);
    opacity:0.5;
    transition: opacity 1s;
    font-size: 14px;
}

.searchTsDate {
    max-width: 120px;
}

.searchTsTime {
    max-width: 80px;
}

/********* Menuesteuerung  */

.menuitem
{
    text-align: left;
}

.topMenu {
    position: absolute;
    margin-left: 10px;
}

#menu-icon {
    font-size: 30px;
    cursor: pointer;
    /*top:16px;*/
}

#menu {
    display: none;
    position: absolute; /* Overlay-Effekt */
    top: 70px;   /* Abstand von oben */
    left: 10px;  /* Abstand von links */
    background-color: var(--index-bg-color-menu);
    border: 1px solid var(--index-text-color-menuBorder);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 150px;
}

#menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#menu li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--index-border-color-menuLiBorderBottom);
    font-size: 16px; /* Schriftgröße Hauptmenü */
    position: relative; /* Wichtige Positionierung für Submenu */
}

#menu li:hover {
    background-color: var(--index-bg-color-menuLiHover);
}

.iconBgColor {
    /*background: orange;*/
}

/* Submenu wird jetzt seitlich rechts angezeigt */
.submenu {
    display: none;
    background-color: #333; /* Für das Submenü eine dunklere Farbe */
    position: absolute;
    left: 100%; /* Verschiebt das Submenü nach links, sodass es rechts vom Hauptmenü erscheint */
    top: 0; /* Submenü erscheint oben am jeweiligen li-Element */
    min-width: 150px; /* Mindestbreite des Submenüs */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
}

.submenuIcon {
    display: none;
    background-color: #333; /* Für das Submenü eine dunklere Farbe */
    position: absolute;
    left: 100%; /* Verschiebt das Submenü nach links, sodass es rechts vom Hauptmenü erscheint */
    top: 0; /* Submenü erscheint oben am jeweiligen li-Element */
    min-width: 185px; /* Mindestbreite des Submenüs */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* Wenn das Submenü angezeigt wird */
#menu li.active > .submenuIcon {
    display: block;
    left: 100%; /* Zielposition links an das übergeordnete li */
}

#menu li.active > .submenu {
    display: block;
    left: 100%; /* Zielposition links an das übergeordnete li */
}

/*    Top Tabs */
#top-tabs {
    text-align: center;
    background-color: var(--index-bg-color-topTabs);
}

#top-tabs .tab {
    display: inline-block;
    margin: 0 5px;
    padding: 5px 10px;
    background-color: var(--index-bg-color-topTabsTab);
    border: 1px solid var(--index-border-color-topTabsTab);
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    color: var(--index-text-color-topTabsTab);
}

#top-tabs .tab.active {
    background-color: var(--index-bg-color-topTabsTabActive);
    color: var(--index-text-color-topTabsTabActive);
    border-color: var(--index-border-color-topTabsTabActive);
}

.tab {
    position: relative; /* Muss für die ::after-Pseudo-Klasse gesetzt werden */
}

/* Tab new-Message Markierung*/

.new-message-indicator::after {
    content: "•";
    color: var(--index-text-color-newMessageIndicator);
    font-size: 2.2em;  /* Verwenden von relativer Schriftgröße */
    position: absolute;
    top: 2px;  /* Etwas anpassen, um den Punkt korrekt im Tab zu platzieren */
    right: 5px; /* Rechts oben platzieren */
    transform: translate(50%, -50%); /* Sorgt dafür, dass der Punkt schön positioniert wird */
}

.dbSearchIcon {
    font-size: 25px;  /* oder z.B. 0.8em oder was du brauchst */
    position: relative;
    top: -5px; /* kleiner Wert anpassen – z.B. 1px, 2px, 3px */
    cursor: pointer;
}

.btnSearchDelete {
    cursor: pointer;
}

/* Menü Icon Ausrichtung */
.menu-icon
{
    display: inline-block;
    width: 1.8em;         /* Einheitliche Breite für alle Icons */
    text-align: center;   /* Icon wird mittig gerendert */
    font-family: inherit; /* Wichtig, um Emoji-Verschiebung zu minimieren */
}

.menuitem.with-arrow
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-left
{
    display: inline-block;
}

.menu-right
{
    display: inline-block;
    padding-left: 10px; /* optional Abstand vom Text */
}
/* Menü Icon Ausrichtung ENDE */

/* Translation CSS Neutralisator */
[data-i18n] {
    all: unset;
    display: inline;
}

@media (max-width: 440px) {

    #message-frame {
        /*max-height: calc(100vh - 310px) !important;*/
        max-height: calc(100vh - 270px) !important;
    }
}

/* Media Query für Smartphones */
@media (max-width: 768px) {

    .new-message-indicator::after {
        font-size: 1.5em;  /* Verwenden von relativer Schriftgröße */
        top: 5px;  /* Etwas anpassen, um den Punkt korrekt im Tab zu platzieren */
    }

    .topTitle {
        font-size: medium;
        text-align: center;
        margin: 0 auto;
        width: 100%;
    }

    .topLeft {
        position: absolute;
        left: auto; /* Desktop-Left-Wert ausschalten */
        /* Gib dem Container eine Breite oder setze auch right, damit der Inhalt einen definierten Raum hat */
        right: 15px; /* oder width: calc(100% - 80px); */
        text-align: right;
    }

    .topRight {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 10px; /* Abstand oben */
        margin-left: 10px; /* Leichter Abstand nach links */
    }

    #message-frame {
        flex: 1; /* Nimmt den verfügbaren Platz ein */
        min-height: 50vh; /* Mindestens die Hälfte des Screens */
        max-height: calc(270vh - 310px);
    }

    #bottom-frame {
        height: auto;
        min-height: 60px; /* Sicherstellen, dass es sichtbar bleibt */
        max-height: 120px; /* Begrenzung nach oben */
    }

    .ui-dialog {
        width: 90% !important;
        left: 5% !important;
        right: 5% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .ui-dialog .ui-dialog-content {
        overflow-x: auto;
    }
}