@import url("/css/fonts.css");

.icon-alert::before {
  content: '⚠'; /* Unicode-Warnsymbol oder ein anderes Icon */
  color: red;
  font-size: 1.2em;
  margin-right: 0.5em;
}


.searchfield {
        display: inline;
        padding-top: 550px/15;
        border: 0px;
        border-radius: 0;
        border-bottom: none; 
        background: #111111;
        font-size: 550px/15;
        transition: 0.3s ease;
}
.searchfield_inp {
        display: inline;
        font-family: Roboto;
        font-size: 16px;
        font-weight: 500;
        padding-top: 550px/15;
        width: 7.1%;
        height: 35px;
        padding: 12px 20px;
        box-sizing: border-box;
        outline: 1px solid #baeb9e;
        border-radius: 2px;
        border: 0px solid #baeb9e;
        background-color: #111111;
        transition: width 0.4s ease-in-out;
        padding-left: 20px;
}
.searchfield_inp[type="text"]:focus {
        border-radius: 2px;
        width: 14.7%;
        border: 0px solid #baeb9e;
        outline: 1px solid orange;
        color: orange;
}
.searchfield_inp:hover {
        -webkit-box-shadow: 0px 0px 112px 7px rgba(253, 184, 36, 0.55);
        -moz-box-shadow: 0px 0px 112px 7px rgba(253, 184, 36, 0.55);
        box-shadow: 0px 0px 112px 7px rgba(253, 184, 36, 0.55);
        border: 0px solid #baeb9e;
        outline: 1px solid #baeb9e;
        width: 7.1%;
        border-radius: 2px;
        outline: 3px solid #fdb924;
}

::placeholder {
        color: #aab2bb;
}
.sortable-header {
        cursor: pointer;
}
.sortable-header::after {
        content: " ▼";
        margin-left: 5px;
        opacity: 0.3;
}
.sorted-asc::after {
        content: " ▲";
        margin-left: 5px;
        opacity: 1;
}
.sorted-desc::after {
        content: " ▼";
        margin-left: 5px;
        opacity: 1;
}
@keyframes text-glowbow1 {
        0% {
                opacity: 0.9;
        }
        25% {
                opacity: 0.9;
        }
        50% {
                opacity: 0.7;
        }
        75% {
                opacity: 0.9;
        }
        100% {
                opacity: 0.9;
        }
}
@keyframes text-flicker1 {
        0% {
                opacity: 0.9;
        }
        2% {
                opacity: 0.7;
        }
        8% {
                opacity: 0.9;
        }
        9% {
                opacity: 0.7;
        }
        12% {
                opacity: 0.9;
        }
        20% {
                opacity: 0.7;
        }
        25% {
                opacity: 0.9;
        }
        30% {
                opacity: 0.7;
        }
        70% {
                opacity: 0.9;
        }
        72% {
                opacity: 0.7;
        }
        77% {
                opacity: 0.9;
        }
        100% {
                opacity: 0.7;
        }
}
.link {
        background-color: #112a44;
        color: #a8b2bc;
}
.dropbtn {
        background-color: #112a44;
        color: #a8b2bc;
}

/* Tabelle Main */
table,
td,
th {
        border: 0.1px solid #1a1a1a;
        padding: 3px;
        text-align: center;
        border-collapse: collapse;
}
th {
        background-color: #112a44;
        color: #a8b2bc;
}

#log {
        height: 40em;
        text-align: left;
        overflow-y: scroll;
        font-size: 13px;
        background-color: #000000;
        color: #b1eee9;
}
/* Server Activity table */
table.active-qso {
        border: 0;
        text-align: center;
        width: 100%;
        border-spacing: 0 px;
        border-collapse: collapse;
        /*background-color: #1a1a1a;
    */
        font-family: ShareTechMono;
}
.active-qso th {
       background-color: #112a44;
        color: #a8b2bc;
        border-radius: 0px;
        font-weight: bold;
        height: 25px;

    background: #1c2025;

        text-align: left;
}
.active-qso td {
        line-height: 1.3em;
        height: 60px;
        border-radius: 4px;
        border: 0px solid #2e3440;
        background-color: #1c2025;
        font-size: 23pt;
        font-weight: bold;
}
table.active-qso2 {
        border: 0;
        text-align: center;
        width: 100%;
        border-spacing: 0 0px;
        border-collapse: separate;
}
.active-qso2 th {
        background-color: #112a44;
        color: #a8b2bc;
        border-radius: 4px;
        font-size: 9pt;
        font-weight: bold;
        height: 25px;
}
.active-qso2 td {
        line-height: 1.3em;
        height: 10px;
        border-radius: 4px;
        border: 0px solid Grey;
        background-color: #1d2025;
        font-size: 12pt;
        font-weight: bold;
}
/* Static TG table */
table.stctg {
        font-family: SourceCodePro;
        font-weight: lighter;
        font-size: 11pt;
        table-layout: fixed;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
        background-color: #19191919;
}
.ts1-bkgnd {
        background-color: #1616169d;
}
.stctg .th1wd {
        width: 120px;
}
.stctg .th2wd {
        width: 190px;
}
.stctg .th3wd {
        width: 110px;
}
.stctg .th4wd {
        width: 40px;
}
.stctg .th5wd {
        width: 50%;
}
.stctg .th6wd {
        width: 65px;
}
.stctg .th7wd {
        width: 65px;
}
.stctg .connted-bkgnd {
        background-color: #2e5642;
}
.stctg .location {
        font-size: 92%;
        color: #b5651d;
        font-weight: bold;
}
/* Master peer table */
table.lnksys {
        font-family: SourceCodePro;
        font-weight: lighter;
        font-size: 11pt;
        table-layout: fixed;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
        background-color: #1f1f1f;
}
.lnksys .th1wd {
        width: 120px;
}
.lnksys .th2wd {
        width: 190px;
}
.lnksys .th3wd {
        width: 110px;
}
.lnksys .th4wd {
        width: 40px;
}
.lnksys .th5wd {
        width: 50%;
}
.lnksys .th6wd {
        width: 40%;
}
.lnksys .connted-bkgnd {
        background-color: #2e5642;
}
.lnksys .location {
        font-size: 92%;
        color: #b5651d;
        font-weight: bold;
}
.lnksys .peer-conn {
        font-size: 9pt;
        background-color: #2e5642;
}
.lnksys .peer-disc {
        font-size: 9pt;
        background-color: #b70101;
}
/* Last heard table */


.row-red {
  background-color: red;
  color: white; /* Optional: für besseren Kontrast */
}

/* END */

table.log {
        background-color: #2e363f;
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        border-color: #000000;
        font-family: SourceCodePro;
        font-weight: lighter;
        font-size: 11pt;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3); /* Schatten hinzufügen */
        border-radius: 5px; /* Ecken abrunden */
}

.log th {
        height: 30px;
}

.log tr:nth-child(even) {
        background-color: #212529;
}

table.log td.description {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 520px;
}

.conn2srv {
        font-size: 10pt;
        font-weight: 600;
        margin-top: 5px;
        margin-bottom: 5px;
        background-image: linear-gradient(to bottom, #e9e9e9 50%, #bcbaba 100%);
        border: 1px solid LightGrey;
        border-radius: 10px;
}
.conn2srv .tittle {
        margin-left: 7px;
        margin-bottom: 5px;
        float: left;
        color: #464646;
        font-weight: 600;
        line-height: 1.5;
}
.conn2srv .hs-peers {
        clear: left;
        text-align: left;
        font-size: 9.5pt;
        font-weight: bold;
        margin: 10px 25px;
        line-height: 1.4;
        white-space: normal;
}

a:link {
        text-decoration: none;
        font-size: 9.5pt;
        font-weight: bold;
        color: #60d7c6;
        text-shadow: 1px 1px 1px black, 0 0 0.5em LightGrey, 0 0 0.1em lime;
}
/* visited link */
a:visited {
        color: #60d7c6;
        text-decoration: none;
}
/* mouse over link */
a:hover {
        color: hotpink;
        text-decoration: none;
}
/* selected link */
a:active {
        color: #0066ff;
        text-decoration: none;
}

a.button {
        background-color: #111111;
        color: #a8b2bc;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid #aeee99;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        margin: 7px 3px;
        border-radius: 4px;
        /*border-radius: 8px;
    */
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}

.button:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: black;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}
.dropdown:hover .dropbtn {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: black;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}
a.buttonA {
        background-color: #111111;
        color: #be4245;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid #aeee99;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        margin: 7px 3px;
        border-radius: 4px;
        /*border-radius: 8px;
    */
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}
.buttonA:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: red;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}
a.buttonDB {
        background-color: #111111;
        color: #a8b2bc;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid orange;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        margin: 7px 3px;
        border-radius: 4px;
        /*border-radius: 8px;
    */
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}
.buttonDB:hover {
        -webkit-box-shadow: 0px 0px 112px 7px rgba(253, 184, 36, 0.55);
        -moz-box-shadow: 0px 0px 112px 7px rgba(253, 184, 36, 0.55);
        box-shadow: 0px 0px 112px 7px rgba(253, 184, 36, 0.55);
        border-radius: 2px;
}
.dropbtn {
        background-color: #111111;
        color: #a8b2bc;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid #aeee99;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        margin: 7px 3px;
        border-radius: 4px;
        /*border-radius: 8px;
    */
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}
/* The container - needed to position the dropdown content */
.dropdown {
        position: relative;
        display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
        border: 0.1px solid #aeee99;
        font-family: Roboto;
        text-shadow: none;
        display: none;
        position: absolute;
        background-color: #111111;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        right: 0;
top: 50px;

}
/* Links inside the dropdown */
.dropdown-content a {
        color: #a8b2bc;
        padding: 6px 16px;
        text-decoration: none;
        display: block;
        text-shadow: none;
        font-size: 15px;

}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: black;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
        display: block;

}
/* NEW CHANGES HERE */

testfooter {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #1c2025;
        padding: 5px;
        text-align: center;
        font-size: 14px;
        z-index: 999; /* Stellen Sie sicher, dass der Footer vor anderen Elementen liegt */
}

.footer-content {
        /* Hier können Sie Stile für den Inhalt des Footers anpassen */
}

/* Main Body */
  body {
    margin: auto;
    width: 1200px;
    background-color: #1c2025;
    color: #a8aaa9;
    font-size: 16px;
    font-family: JuliusSansOne;
    text-align: center;

  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Halbtransparentes Schwarz */
    pointer-events: none; /* Klicks auf das Overlay ignorieren */
    transition: opacity 1s;
    opacity: 0; /* Standardmäßig unsichtbar */
  }
  
  
::-webkit-scrollbar {
        width: 5px;
        background: black;
}
::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px black;
        border-radius: 10px;
        background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
        background: #172a43;
}
::-webkit-scrollbar-thumb:hover {
        background: #555;
}
/* Top image */
.img-top {
        display: block;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
}
/* Server tittle */
.srv-tittle {
        /* color: #0900;
     */
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        padding: 7px;
}
/* fieldset general */
fieldset {
        /*background-color: #111111;
    */
        color: #a9b3bb;
        border: none;
        border-radius: 4px;
        border-color: #baeb9e;
        margin: 15px auto;
}
fieldset.big {
        width: 1100px;
}
fieldset.med {
        width: 900px;
}
fieldset.small {
        width: 70%;
}
legend {
        color: #a9b3bb;
        margin-left: 20px;
        text-align: left;
        padding: 0 5px;
}
/* Waiting for server data tabble */
.w4data {
        width: 100%;
        background-color: #1d2025;
        font-family: SourceCodePro;
        font-size: 20px;
        margin-top: 4px;
        margin-bottom: 4px;
        border: none;
        border-collapse: collapse;
        height: 60px;
        text-align: center;
        color: brown;
        padding: 0;
}

table.opb {
        background-color: #1a1a1a;
        table-layout: fixed;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
}
.opb .col1 {
        text-align: left;
        padding-left: 20px;
}
.opb .col2 {
        font-size: 9pt;
}
.opb .col3 {
        font-size: 9pt;
        font-weight: 600;
        color: #000000;
}
.opb .th1wd {
        width: 12%;
}
.opb .th2wd {
        width: 12%;
}
.opb .th3wd {
        width: 70%;
}
/* sysinfo page */
.images img {
        display: block;
        padding-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
}
.bkgnd-1d1 {
        background: #78283f;
}
/* DATA Indicator */
.bkgnd-8ecfb4 {
        background-color: darkblue;
}
/* dont know */
.bkgnd-cefdce {
        background-color: #000000;
}
.bkgnd-ff0000 {
        background-color: #ff0000;
}
.txt-yellow {
        color: #fff85b;
}
.txt-b70101 {
        color: red;
}
/* TS1 Indicator */
.txt-3a4aa6 {
        color: #57dbc8;
}
/* TS2 indicator */
.txt-green {
        color: #baeb9e;
}
/* TG Names */
.txt-blue {
        color: #baeb9e;
}
/* #callsign */
.txt-red {
        color: red;
}
.txt-white {
        color: #ffffff;
}
.txt-008000 {
        color: hotpink;
}
.txt-0065ff {
        color: #7bd8bf;
}
/* Hotspot Name */
.txt-b5651d {
        color: #b5651d;
}
/* #TG Numbers */
.txt-464646 {
        color: hotpink;
}
/* #dontknow */
.txt-002d62 {
        color: #1cdfc8;
}
/* Names */
.txt-back {
        color: #346e9f;
}
.TX_A {
        background-color: #375543;
}
.RX_A {
        background-color: #6f2f3f;
}

.TX {
        background-color: #375543; /* Dunkles Rot für sprechenden User */
        animation: TXpulseAnimation 1s infinite alternate; /* Pulsierende Animation */
        transition: background-color 0.7s ease; /* Sanfter Übergang für die Hintergrundfarbe */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* Schatten für den Text */
        opacity: 0.8;
}

.RX {
        background-color: #6f2f3f; /* Dunkles Rot für sprechenden User */
        animation: RXpulseAnimation 1s infinite alternate; /* Pulsierende Animation für Hintergrund */
        transition: background-color 0.6s ease; /* Sanfter Übergang für die Hintergrundfarbe */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* Schatten für den Text */
        opacity: 0.8;
}

@keyframes RXpulseAnimation {
        0% {
                background-color: rgba(111, 47, 63, 1);
        }
        100% {
                background-color: rgba(111, 47, 63, 0.9);
        }
}

@keyframes TXpulseAnimation {
        0% {
                background-color: rgba(55, 85, 67, 1);
        }
        100% {
                background-color: rgba(55, 85, 67, 0.9);
        }
}

.fnt-7pt {
        font-size: 7pt;
}
.fnt-8pt {
        font-size: 8pt;
}
.cred {
        font-size: 10px;
        font-family: JuliusSansOne;
        text-align: center;
}
.ver {
        font-size: 10px;
        font-family: Dosis;
        text-align: right;
        font-family: "SourceCodePro";
}
.uhr {
        font-size: 10px;
        font-family: Dosis;
        text-align: right;
        font-family: "SourceCodePro";
}
#uhr {
        font-size: 12px;
        font-family: Dosis;
        text-align: right;
        font-family: "SourceCodePro";

    transform: translate(-7%, 145%);
}

.aqso-talkgroup {
        color: #ab682e;
        text-shadow: rgba(171, 104, 46, 0.75) 0px 0px 35px;
        animation: text-glowbow 3s linear infinite;
}
.aqso-name {
        color: #65dbc8;
        text-shadow: rgba(101, 219, 199, 0.75) 0px 0px 35px;
        animation: text-glowbow 3s linear infinite;
}
.test1 {
        font-size: 50px;
        color: #65dbc8;
        text-shadow: rgba(101, 219, 199, 0.75) 0px 0px 35px;
        animation: text-wobbi1 3s linear infinite;
}
.test2 {
        font-size: 50px;
        color: #65dbc8;
        text-shadow: rgba(101, 219, 199, 0.75) 0px 0px 35px;
        animation: text-wobbi2 3s linear infinite;
}
.test3 {
        font-size: 50px;
        color: #65dbc8;
        text-shadow: rgba(101, 219, 199, 0.75) 0px 0px 35px;
        animation: text-wobbi3 3s linear infinite;
}
/* Einfacher Pfeil nach oben */
.arrow-up {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid #ffffff;
        /* Ändern Sie die Farbe hier nach Bedarf */
}
/* Einfacher Pfeil nach unten */
.arrow-down {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid #ffffff;
        /* Ändern Sie die Farbe hier nach Bedarf */
}
/* Stil für den aufsteigenden Sortierpfeil */
.sort-asc::before {
        content: "\25B2";
        /* Aufwärtspfeil */
        margin-left: 5px;
}
/* Stil für den absteigenden Sortierpfeil */
.sort-desc::before {
        content: "\25BC";
        /* Abwärtspfeil */
        margin-left: 5px;
}
/* Pfeile für die Sortierung */
.sort-icon {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 4px;
        vertical-align: middle;
        border: 4px solid transparent;
}
.sortable.sorted-asc .sort-icon:before {
        content: "";
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #000;
}
.sortable.sorted-desc .sort-icon:before {
        content: "";
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #000;
}
@keyframes ticker {
        0% {
                transform: translate3d(22%, 0, 0);
        }
        100% {
                transform: translate3d(-100%, 0, 0);
        }
}
#news-outer-container {
        overflow: hidden;
        width: 85%;
        /* Oder passen Sie die Breite nach Bedarf an */
        margin: 0 auto;
        /* Damit der Container zentriert wird */
}
#news-inner-container {
        white-space: pre;
        overflow: hidden;
        display: inline-block;
        animation: ticker 180s linear infinite;
        font-family: "ShareTechMono";
#        font-family: "Digital";
        font-size: 30px;
        /* Hier wird die Schriftgröße auf 30 Pixel gesetzt */
        text-shadow: 2px 2px 4px #000000;
        /* Hier wird ein schwarzer Schatten mit X-Offset 2px, Y-Offset 2px und einer Größe von 4px hinzugefügt */
}
.important-news {
        color: #de3163;
}

#news-inner-container span {
        margin-right: 10px;
        /* Abstand zwischen den einzelnen News-Meldungen */
}
#news-inner-container span::after {
        color: #7f8f76;
        content: " | ";
        /* Hier können Sie den Platzhalter nach Bedarf anpassen */
}

#news-inner-container a.ticker-link {
        font-family: "ShareTechMono";
        font-size: 30px;
        text-shadow: 2px 2px 4px #333333;
        text-decoration: underline;
}

.codebox {
        background-color: #17191c;
        color: #fff;
        font-size: 14px;
        padding: 10px;
        border-radius: 5px;
        text-align: left;
}
.no-wrap {
        width: 450px !important;
        overflow: hidden;
}
/* Webkit-basierte Browser */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
        /* Benutzerdefinierte Schriftart "Source Code Pro" in Größe 12 */
        .code-box pre {
                font-family: "Source Code Pro", monospace;
                font-size: 12px;
        }

        /* Benutzerdefinierte horizontale Scrollleiste */
        .code-box::-webkit-scrollbar {
                width: 1px; /* Dicke des Scrollbalkens */
                height: 1px;
        }

        .code-box::-webkit-scrollbar-thumb {
                background-color: #888; /* Farbe des Scrollbalken-Thumb */
        }

        .code-box::-webkit-scrollbar-thumb:hover {
                background-color: #555; /* Farbe des Scrollbalken-Thumb bei Hover */
        }
}

/* Andere Browser */
.code-box {
        background-color: #000;
        color: #fff;
        padding: 10px;
        border-radius: 5px;
        max-height: 400px;
        overflow-y: auto; /* Vertikale Scrollleiste erscheint nur, wenn der Inhalt die Höhe überschreitet */
        white-space: nowrap; /* Horizontale Scrollleiste statt Zeilenumbruch */
        overflow-x: auto; /* Horizontale Scrollleiste erscheint nur, wenn der Inhalt breiter ist als die Box */
}
.code-box pre {
        margin: 0;
        overflow-wrap: break-word;
        text-align: left;
}
.imp {
        font-family: Tahoma, sans-serif;
        font-size: 18px;
        text-align: left;
}
.h1 {
}
.h2-left-med {
        text-align: left;
        font-size: 24px;
        margin-top: 60px;
        margin-bottom: 20px;
}
.noaccess {
        color: #833;
        font-family: "Source Code Pro", monospace;
        font-size: 24px;
}
.container {
        max-width: 400px;
        margin: 100px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #111;
}
.message {
        margin-bottom: 20px;
        color: #aa0;
}

.animation-container {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
}

.blink-symbol {
        opacity: 0;
        animation: blink-animation 1.5s infinite;
        position: relative;
        font-size: 29px; /* Hier kannst du die Schriftgröße anpassen */
}

.symbol1 {
        animation-delay: 0s;
        color: red;
        text-shadow: rgba(255, 0, 51, 0.9) 0px 0px 39px;
}

.symbol2 {
        animation-delay: 0.5s;
        color: red;
        text-shadow: rgba(255, 0, 51, 0.9) 0px 0px 39px;
}

.symbol3 {
        animation-delay: 1s;
        color: red;
        text-shadow: rgba(255, 0, 51, 0.9) 0px 0px 39px;
}

@keyframes blink-animation {
        0%,
        100% {
                opacity: 0;
        }
        33% {
                opacity: 1;
        }
}

.aqso-redarrow {
        color: red;
        text-shadow: rgba(255, 0, 51, 0.9) 0px 0px 39px;
        animation: text-flicker 9s linear infinite;
}
.aqso-bluearrow {
        color: #346e9f;
        text-shadow: rgba(3, 68, 233, 1) 0px 0px 35px;
        animation: text-flicker 9s linear infinite;
}

.lauflicht {
        display: flex;
        align-items: center;
        gap: 0; /* Hier den gewünschten Abstand anpassen */
        justify-content: center; /* Fügt horizontale Zentrierung hinzu */
}

.lauflicht-red {
        margin-right: 0px; /* Abstand zwischen den Richtungen */
}

.lauflicht-blue {
        margin-left: 0px; /* Abstand zwischen den Richtungen */
}

.pfeil {
        font-size: 36px; /* Hier die gewünschte Größe anpassen */
        animation: lauflichtAnimation 11s infinite;
        transform-origin: center;
}

.lauflicht-red .pfeil {
        color: red;
        animation-direction: normal;
}

.lauflicht-blue .pfeil {
        color: blue;
        animation-direction: alternate-reverse;
}

.pfeil:nth-child(1) {
        animation-delay: 0s;
}
.pfeil:nth-child(2) {
        animation-delay: 0.15s;
}
.pfeil:nth-child(3) {
        animation-delay: 0.3s;
}
.lauflicht-blue .pfeil:nth-child(1) {
        animation-direction: alternate-reverse;
        animation-delay: 0.3s;
}
.lauflicht-blue .pfeil:nth-child(2) {
        animation-direction: alternate-reverse;
        animation-delay: 0.15s;
}
.lauflicht-blue .pfeil:nth-child(3) {
        animation-direction: alternate-reverse;
        animation-delay: 0s;
}

@keyframes lauflichtAnimation {
        0%,
        100% {
                opacity: 0;
                transform: translateX(0);
        }
        8.33%,
        25%,
        41.67%,
        58.33%,
        75%,
        91.67% {
                opacity: 0.4;
                transform: translateX(-2px);
        }
        16.67%,
        33.33%,
        50%,
        66.67%,
        83.33% {
                opacity: 0.8;
                transform: translateX(2px);
        }
}

@keyframes pulsateAnimation {
        0%,
        100% {
                background-color: rgba(255, 0, 0, 0.8);
                opacity: 0.7;
        }
        50% {
                background-color: rgba(255, 102, 102, 0.8);
                opacity: 1;
        }
}

.speaking.pulsating-cell {
        animation: pulsateAnimation 1s infinite;
        background-color: rgba(255, 0, 0, 0.8);
        opacity: 0.7;
}

/* Stil für die Sendebuttons */
.send-button {
        background-color: #111111;
        color: #a8b2bc;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid #aeee99;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        margin: 7px 3px;
        border-radius: 4px;
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}

.send-button:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: black;
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        cursor: pointer;
}

/* Stil für den ausgegrauten Zustand */
.send-button[disabled] {
        border: 1px solid #c0392b;
}

/* Stil für den ausgegrauten Zustand beim Hover */
.send-button[disabled]:hover {
        background-color: #c0392b;
        color: black;
        box-shadow: 0px 0px 93px 9px rgba(192, 57, 43, 0.9);
        cursor: not-allowed;
        position: relative;
}

/* Tooltip-Stil für den ausgegrauten Zustand beim Hover */
.send-button[disabled]:hover::after {
        content: "Fülle alle erforderlichen Felder aus";
        visibility: visible;
        width: 160px;
        background-color: #c0392b;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 1;
        transition: opacity 0.3s;
}

.send-button-container {
        margin-top: 20px;
        margin-bottom: 60px;
        z-index: 2;
}

.tooltip-send {
        visibility: hidden;
        width: 160px;
        background-color: #c0392b;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
}

.send-button-container:hover .tooltip-send {
        visibility: visible;
        opacity: 1;
}

#secret-hidden {
        display: none;
}

#secret-visible {
        display: block;
}

.qr-link {
        position: relative;
        display: inline-block;
}

.qr-tooltip {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        padding: 10px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.qr-tooltip img {
        width: 200px; /* Hier wird die Breite des Bildes auf 200px festgelegt */
        height: auto;
}

.qr-link:hover .qr-tooltip {
        display: block;
}

a.buttonC {
        background-color: #111111;
        color: #be4245;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid #aeee99;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        margin: 7px 3px;
        border-radius: 4px;
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}

.buttonC:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: red;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}

a.buttonB {
        background-color: #111111;
        color: #8bc687;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid #aeee99;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        margin: 7px 3px;
        border-radius: 4px;

        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.buttonB:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: black;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}

.button,
.buttonA,
.buttonB,
.buttonDB,
.searchfield {
        opacity: 0;
        transition: opacity 0.5s ease;
}

.fade-in {
        opacity: 1;
}

#gwde-status {
        font-size: 12px;
        position: absolute;
        top: 480px;
        left: 900px;
        line-height: 12px;
        border-radius: 5px;
        color: #a8e89e;
        opacity: 0.7;
        transition: opacity 2.5s ease, visibility 2.5s ease;
        z-index: 9999;
}

#opg-status {
        font-size: 12px;
        position: absolute;
        top: 480px;
        left: 250px;
        line-height: 12px;
        border-radius: 5px;
        color: #a8e89e;
        opacity: 0.7;
        transition: opacity 2.5s ease, visibility 2.5s ease;
        z-index: 9999;
}


#page-container {
        position: relative;
}

.numbercode {
        font-size: 24px;
        font-family: FBDIGI;
		color: #3e464f;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}



#content {
  z-index: 0;
  position: relative;
}

#logo-container {
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#logo {
  max-width: 100%;
  height: auto;
  transition: opacity 1s;
}


.image-overlay {
    position: relative;
    width: 100%;
    height: 268px;
    text-align: center;
    overflow: hidden;
}

.image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1050px;
    height: 268px;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s;
}



.snow {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.snowflake {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    to {
        transform: translateY(100vh);
    }
}



#news-inner-container .neueste-sms {
    color: #97c38b; /* Rote Farbe für "Neueste SMS" */
}

#news-inner-container .news {
    color: #97c38b; /* Blaue Farbe für "News" */
}

.txt-admin1 {
  font-weight: normal;
  font-style: normal;
  font-size: 1.05em;
  color: #ff9900; /* warmes Orange */
  text-shadow: 0 0 8px #ff9900, 0 0 12px #cc7a00;
}

.txt-admin2 {
  color: #00ffff; /* oder deine Standardfarbe ohne Glow */
  text-shadow: none; /* Glow aus */
}

.txt-blue {
  color: #baeb9e; /* dein Standard-Grün für TG-Namen */
}

.txt-green {
  color: #00ff00; /* falls du reines Grün möchtest, sonst weglassen */
}


.txt-admin-tgname {
  color: #baeb9e; /* deine TG grüne Farbe */
  text-shadow: none; /* Glow aus */
}

/* Tooltip Container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

/* Gemeinsamer Tooltip-Body */
.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  background-color: #1f1f1f;
  color: #a3aeb7; /* Standardgrau für Tooltiptext */
  text-align: left;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 4px 4px 6px #1a1a1a;
  z-index: 10;
  font-size: 10pt; /* Etwas größer */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  min-width: 160px; /* Mindestbreite */
  max-width: 400px; /* erweiterbar */
  word-wrap: break-word; /* Zeilenumbruch bei langen Wörtern */
  white-space: normal; /* Zeilenumbruch erlauben */
}

/* Tooltip sichtbar beim Hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Position: rechts vom Element */
.tooltip .c2s-pos1 {
  top: 50%;
  left: 105%;
  transform: translateY(-50%);
}

/* Pfeil für rechts-Position */
.tooltip .c2s-pos1::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent #1f1f1f transparent transparent;
}

/* Spezielles Tooltip-Styling für Typ-Spalte */
.tooltip .typ-tooltip {
  visibility: hidden;
  position: absolute;
  background-color: #1f1f1f;
  color: #ffd700; /* Goldene Schriftfarbe */
  text-align: center;
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 3px 3px 5px #1a1a1a;
  z-index: 10;
  font-size: 10pt;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  min-width: 60px;  /* Viel schmaler als normale Tooltips */
  max-width: 100px; /* Begrenzte maximale Breite */
  white-space: nowrap; /* Kein Zeilenumbruch */
  top: -40px; /* Position über dem Icon */
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold; /* Etwas dickere Schrift für bessere Lesbarkeit */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Leichter Schatten für Kontrast */
}

/* Pfeil für Typ-Tooltip */
.tooltip .typ-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1f1f1f transparent transparent transparent;
}

/* Tooltip sichtbar beim Hover */
.tooltip:hover .typ-tooltip {
  visibility: visible;
  opacity: 1;
}

/* Spezielle Farbe für Admin-Tooltip-Text */
.tooltip.admin-tooltip .tooltiptext {
	 text-align: center;
  color: #ffcc33; /* warmes Gelb/Orange für Admin */
  font-weight: bold;
}

/* TG Tooltip spezielle Farben und Glow */
.tooltip.tg-tooltip .tooltiptext .tg-id {
  color: #ffcc33; /* gelb/orange für TG-ID */
  font-weight: bold;
  display: block;
  line-height: 1.2;
  text-shadow:
    0 0 5px #ffcc33,
    0 0 10px #ffcc33,
    0 0 15px #ffcc33;
}

.tooltip.tg-tooltip .tooltiptext .tg-name {
  color: #baeb9e; /* dein Standard-Grün */
  font-weight: normal;
  display: block;
  margin-top: 2px;
  line-height: 1.2;
}

.ars-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 20px auto;      /* mittig */
  justify-content: center; /* horizontal zentriert */
  max-width: 800px;       /* optional, damit es nicht über die ganze Breite geht */
}




.ars-card .tooltiptext {
  position: absolute;
  top: 100%;             
  left: 0;               
  transform: translateY(5px);
  z-index: 1000;
  white-space: nowrap;

  background-color: #222; /* dunkel */
  color: #fff;            /* Text weiß */
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.ars-card:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}







/* ARS Elements - Styling wie primary buttons */
.ars-card {
  background-color: #111111;
  color: #a8b2bc;
  font-family: Roboto;
  text-shadow: none;
  border: 0.1px solid #aeee99;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  margin: 7px 3px;
  border-radius: 4px;
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.ars-card:hover {
  background-color: rgb(140, 140, 140);
  background: #aeee99;
  color: black;
  -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
  -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
  box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}

/* Status-Varianten für ARS Cards */
.ars-card-online {
  border-color: #3a7a3a;
  color: #a0e0a0;
}

.ars-card-offline {
  border-color: #7a3a3a;
  color: #e0a0a0;
}

.ars-card-online:hover {
    background: #3a7a3a;
    color: white;
    -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
    -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
    box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}

/* Rote ARS Cards - Offline */
.ars-card-offline:hover {
    background: #7a3a3a;
    color: white;
    -webkit-box-shadow: 0px 0px 93px 9px rgba(235, 158, 158, 0.9);
    -moz-box-shadow: 0px 0px 93px 9px rgba(235, 158, 158, 0.9);
    box-shadow: 0px 0px 93px 9px rgba(235, 158, 158, 0.9);
}
.tooltip .tooltiptext,
.tooltip .typ-tooltip {
  /* ENTFERNEN Sie transition Eigenschaften komplett */
  visibility: hidden;
  opacity: 1; /* Immer voll sichtbar wenn visible */
}

.tooltip:hover .tooltiptext,
.tooltip:hover .typ-tooltip {
  visibility: visible;
  /* KEINE transition Eigenschaften */
}