/* ── Theme Variables ───────────────────────────────────────── */
:root {
    --bg-page          : #1a1a1a;
    --bg-top           : #1e1e1e;
    --bg-menubar-from  : #333333;
    --bg-menubar-to    : #111111;
    --bg-btn           : #3a3a3a;
    --bg-btn-active    : #b81414;
    --bg-table         : #2c2c2c;
    --bg-th-from       : #444444;
    --bg-th-to         : #222222;
    --bg-th            : #3a3a3a;
    --bg-filter-btn    : #2c2c2c;
    --bg-filter-field  : #969696;
    --bg-tooltip       : #2c2c2c;
    --bg-error         : #3a3a3a;
    --color-text       : #c3dcba;
    --color-link       : #1e90ff;
    --color-link-hover : #ffff00;
    --color-error      : #ff6f61;
    --color-border     : #444444;
    --color-border-btn : #666666;
    --color-smalllink  : #ff0000;
    --color-filter-txt : #000000;
}

/* ── Active TX pulse ───────────────────────────────────────── */
@keyframes txPulse {
    0%   { background-color: #4a2000; }
    50%  { background-color: #8b3a00; }
    100% { background-color: #4a2000; }
}
tr.tx-active {
    animation: txPulse 1.2s ease-in-out infinite;
}
tr.tx-active td {
    color: #ffcc88 !important;
    font-weight: bold;
}

body { /* Page base control */
   margin               : 0px;
   padding              : 0px;
   background-color     : var(--bg-page);
   color                : var(--color-text);
   font-family          : calibri, verdana, arial, comic sans;
   min-width            : 760px;
   transition           : background-color 0.3s, color 0.3s;
}
h1 {
   font-size            : 25pt;
   color                : var(--color-text);
}
a img {
   border               : 0;
}
a.tip {
   text-decoration      : none;
   color                : var(--color-link);
}
a.tip:hover {
   position             : relative;
   color                : #ff6f61; /* Coral red on mouseover */
}
a.tip span {
   display              : none;
}
a.tip:hover span { /* frame with the name of the country when you hover the mouse over the flags */
   background           : var(--bg-tooltip);
   opacity              : 0.8;
   border               : none;
   border-radius        : 5px 5px 5px 5px;
   font-family          : calibri, verdana, arial, comic sans;
   font-size            : 12pt;
   text-decoration      : none;
   white-space          : nowrap;
   color                : var(--color-text);
   padding              : 6px 6px 6px 6px;
   margin               : 10px;
   display              : block;
   z-index              : 50;
   position             : absolute;
   top                  : 10px;
}
#top {
   height               : 115px;
   background-color     : var(--bg-top);
   width                : 100%;
/*   background-image     : url('../img/dvc.jpg'); */
   background-repeat    : no-repeat;
   background-position  : 100%;
   position             : absolute;
   left                 : 0px;
   top                  : 0px;
   min-width            : 760px;
   transition           : background-color 0.3s;
}
#menu {
   margin-top           : 5px;
   height               : 34px;
   float                : left;
}
#menubar { /* Menu Buttons Background Bar | Desktop */
   height               : 40px;
   width                : 100%;
   max-width            : 1920px;
   display              : flex;
   justify-content      : center;
   text-align           : center;
   position             : absolute;
   left                 : 50%;
   transform            : translateX(-50%);
   top                  : 115px;
   min-width            : 760px;
   background-image     : linear-gradient(to bottom, var(--bg-menubar-from) 10%, var(--bg-menubar-to) 90%);
}
#content { /* Smartphone */
   width                : 100%;
   max-width            : 1080px;
   position             : absolute;
   left                 : 50%;
   transform            : translateX(-50%);
   top                  : 175px;
   color                : var(--color-text);
}
.menulink {
   font-size            : 14pt;
   text-decoration      : none;
   white-space          : nowrap;
   border               : 1px var(--color-border-btn) solid;
   padding-left         : 10px;
   padding-top          : 3px;
   padding-bottom       : 3px;
   padding-right        : 10px;
   margin-left          : 10px;
   background-color     : var(--bg-btn);
   color                : var(--color-text);
   transition           : background-color 0.7s, color 0.7s;
}
.menulink:hover { /* Menu buttons on mouseover */
   background-color     : #ffff00;
   color                : #000000;
   font-weight          : bold;
}
.menulinkactive { /* Main menu buttons */
   font-size            : 14pt;
   text-decoration      : none;
   white-space          : nowrap;
   border               : 1px var(--color-border-btn) solid;
   padding-left         : 10px;
   padding-top          : 3px;
   padding-bottom       : 3px;
   padding-right        : 10px;
   margin-left          : 10px;
   background-color     : var(--bg-btn-active);
   color                : var(--color-text);
}
.pl { /* link font color */
   font-size            : 12pt;
   text-decoration      : none;
   color                : var(--color-link);
}
.pl:hover { /* Action to take when hovering over links */
   color                : var(--color-link-hover);
}
.listingtable { /* Table text */
   margin-top           : 10px;
   border               : 1px var(--color-border) solid;
   font-size            : 12pt;
   font-weight          : normal;
   background-color     : var(--bg-table);
   color                : var(--color-text);
}
.listingtable th { /* Header text */
   height               : 35px;
   text-align           : center;
   background-color     : var(--bg-th);
   color                : var(--color-text);
   background-image     : linear-gradient(to bottom, var(--bg-th-from) 0%, var(--bg-th-to) 90%);
}
.listingtable td {
   padding-left         : 5px;
   border               : 1px var(--color-border) solid;
}
.listinglink { /* Reflector name link source in XLX list */
   font-size            : 12pt;
   text-decoration      : none;
   color                : var(--color-link);
}
.listinglink:hover { /* Reflector name link source in XLX list on mouseover */
   color                : var(--color-link-hover);
}
.error {
   font-size            : 12pt;
   text-decoration      : none;
   font-weight          : bold;
   color                : var(--color-error);
   background-color     : var(--bg-error);
   width                : 90%;
   padding              : 15px;
   margin               : 5px;
}
.FilterField { /* Search filter input field */
   font-size            : 12pt;
   font-weight          : bold;
   text-decoration      : none;
   color                : var(--color-filter-txt);
   background-color     : var(--bg-filter-field);
   width                : 150px;
   height               : 20px;
   padding-left         : 5px;
   padding-top          : 3px;
   border               : 1px #000000 solid;
}
.FilterSubmit { /* Button to apply the filter */
   font-size            : 10pt;
   font-weight          : normal;
   text-decoration      : none;
   color                : var(--color-text);
   background-color     : var(--bg-filter-btn);
   height               : 26px;
   width                : 60px;
   padding-left         : 5px;
   padding-top          : 3px;
   border               : 1px #000000 solid;
}
.FilterSubmit:hover { /* Action when hovering over the filter button */
   background-color     : #ffff00;
   color                : #000000;
   font-weight          : bold;
}
.smalllink { /* Button to delete the applied filter */
   font-size            : 10pt;
   text-decoration      : none;
   color                : var(--color-smalllink);
}
.smalllink:hover {
   color                : var(--color-link-hover);
}
/* Mobile Settings */
@media (max-width: 760px) {
    body {
        min-width        : 100%;
        font-size        : 12px;
    }
    #top {
        height           : 80px;
        min-width        : 100%;
    }
    #menubar {
        height           : auto;
        top              : 80px;
        min-width        : 100%;
        overflow-x       : auto;
        white-space      : nowrap;
        padding          : 5px 0;
    }
    #menu {
        float            : none;
        height           : auto;
        display          : inline-block;
    }
    #menu td {
        display          : inline-block;
        margin           : 3px 2px;
    }
    .menulink, .menulinkactive {
        font-size        : 11pt;
        margin-left      : 0;
        display          : inline-block;
        text-align       : center;
        white-space      : nowrap;
    }
    #content {
        top              : 150px;
    }
    .listingtable {
        font-size        : 10pt;
    }
    .listingtable th, .listingtable td {
        padding          : 4px;
    }
}