/* =========================
   COLOR VARIABLES
========================= */
:root {
  /* Base */
  --bg-body: #f9fcff;
  --text-main: #425b89;
  --white: #ffffff;

  /* Primary */
  --primary: #3b5998;
  --primary-dark: #325998;
  --primary-light: #E0E6FF;

  /* Border */
  --border-light: #e1e1e1;
  --border-primary: #abbefb;

  /* Link */
  --link: #3b5998;
  --link-hover: #dbfaff;

  /* Gray */
  --gray-bg: #f1f1f1;
  --gray-text: #979797;

  /* Status */
  --green: #66bd00;
  --red: #ff0a00;

  /* Special */
  --yellow-bg: #FFFFE0;
  --alarm-bg: #f8f8f8;
}

/* =========================
   DARK MODE
========================= */
body.dark {
  background-color: #121212;
  color: #e0e0e0;

  --bg-body: #121212;
  --text-main: #e0e0e0;

  --primary: #1f3a6d;
  --primary-dark: #162c52;
  --primary-light: #1e2a3a;

  --link: #8ab4f8;
  --link-hover: #cfe3ff;

  --gray-bg: #1f1f1f;
  --gray-text: #aaaaaa;

  --yellow-bg: #2a2a1a;
  --alarm-bg: #1c1c1c;
}


/* =========================
   GLOBAL
========================= */
body {
  background-color: var(--bg-body);
  color: var(--text-main);
  font-size: 11px;
  font-family: Tahoma;
  margin: auto;
  max-width: 650px;
}

a:link, a:visited {
  color: var(--link);
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--white);
  background-color: transparent;
}

button {
  background-color: var(--primary);
  color: var(--white);
  border: none;
}

select {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--white);
}

select:hover {
  background: var(--primary-dark);
}

/* =========================
   TEXT & BLOCK
========================= */
p { margin: 6px 0; }
ul { margin: 0; padding-left: 20px; }
h3 { margin: 0; padding-bottom: 2px; }

hr {
  margin: 2px 0;
  border: none;
  border-top: 1px solid var(--border-light);
}

/* =========================
   HEADER / FOOTER
========================= */
.header, .footer {
  color: var(--white);
  background-color: var(--primary);
  padding: 2px;
  border: 1px solid var(--primary-light);
}

.footer a {
  color: #f2f2f2;
  border-bottom: 1px dotted #243E60;
}

.footer a:hover {
  color: #d2d2d2;
}

/* =========================
   MENU / LIST
========================= */
.list2,
.bmenu,
.news {
  background-color: var(--primary-light);
  padding: 2px;
  margin: 1px;
}

.head, .lis {
  background-color: var(--primary-dark);
  color: var(--white);
  padding: 2px;
  border: 1px solid var(--border-primary);
}

.listeve, .b {
  background-color: var(--yellow-bg);
  padding: 2px;
  border: 1px solid var(--border-primary);
}

/* =========================
   TEXT COLOR
========================= */
.gray { color: var(--gray-text); }
.green { color: var(--green); }
.red, .red a { color: var(--red); }

/* =========================
   SPECIAL
========================= */
.alarm {
  background-color: var(--alarm-bg);
  border: 1px solid var(--border-light);
  font-size: x-small;
  padding: 4px;
}

.status {
  color: #3fa400;
  font-weight: bold;
  font-size: x-small;
}

.phpcode {
  background-color: var(--gray-bg);
  border: 1px dotted var(--border-light);
  padding: 2px;
}

/* =========================
   MISC
========================= */
.left { float: left; }
.end { text-align: center; }

.list1 {
  border-left: 4px solid #c1c1c1;
  color: #878787;
  font-size: x-small;
  padding-left: 4px;
}