[data-bs-theme=light]:root {
  --bs-body-bg: #ffffff;
  --bs-body-color: #333333;
  --header-bg: #2c5fc4;
  --header-button-color: #ffffdd;
  --header-button-bg-color: #2c5fc4;
  --header-button-border: 1px solid #ffffff;
  --my-blue: #2e8bcc;
  --selected-bg: #ebf9ff;
  --selected-color: #2e8bcc;
  --seen: grey;
  --highlighted-bg: #ffffdd;
  --highlighted-color: #2e8bcc;
  --highlighted-seen-bg: #ffffdd;
  --highlighted-seen-color: #333;
  --deleted-bg: #adb5bd;
  --text-deleted: #d90429;
  --tag: purple;
  --subject-color: #2e8bcc;
  --summary-font-weight: 500;
  --mssghglght-bg: lightblue;
  --mssghglght-color: #333;
  --darkmode-icon-color: #2c5fc4;
  --bs-border-color: #cbd5e0;
  --redacted-bg: #000;
  --redacted-color: #000;
}

[data-bs-theme=dark]:root {
    --bs-body-bg: #232B32;
    --bs-body-color: #cccccc;
    --header-bg: #232B32;
    --header-button-color: #111;
    --header-button-bg-color: #bb86fc;
    --header-button-border: 1px solid #bbb;
    --my-blue: white;
    --selected-bg: #444;
    --selected-color: #bbb;
    --seen: #888;
    --highlighted-bg: #bb86fc;
    --highlighted-color: #111;
    --highlighted-seen-bg: #bb86fc;
    --highlighted-seen-color: #111;
    --deleted-bg: #e63946;
    --text-deleted: #ccc;
    --tag: #ccc;
    --subject-color: #bbb;
    --summary-font-weight: 400;
    --mssghglght-bg: #999;
    --mssghglght-color: #ddd;
    --darkmode-icon-color: #eee;
    --bs-border-color: #cbd5e0;
    --redacted-bg: #fff;
    --redacted-color: #fff;
}

@font-face{
  font-family:'FontAwesome';
  src: url('/assets/font/fontawesome-webfont.woff?v=3.2.1') format('woff'),
       url('/assets/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype');
  font-weight:normal;
  font-style:normal;
}

html, body { height: 100%; }

body { margin:0; font-family:"Segoe UI","Segoe WP","Helvetica Neue",sans-serif; font-size:14px; line-height:25px; }

#main { border: 1px solid var(--bs-border-color); width: 100%; height: 100%; flex: 1; align-items: center; display: flex; flex-direction: column; justify-content: center; }
#header { height: 45px; align-items: center; display: flex; justify-content: center; width: 100%; background-color: var(--header-bg); }
#header a { color: #ffffff; }
#header .middlebutton { margin-top: 0px; background-color: var(--header-button-bg-color); color: var(--header-button-color); border: var(--header-button-border);}

.shistory { margin-right:-10px; border-radius: 0px!important; }

#middlebox { flex: 1; width: 100%; align-items: center; display: flex; justify-content: center; overflow-y: auto; }
#searchresults { border: 1px solid var(--bs-border-color); width: 25%; height: 100%; min-width: 150px; align-items: center; display: flex; justify-content: center; overflow-x: hidden; overflow-y: auto; }
.wrapper { border: 1px solid var(--bs-border-color); display: flex; flex-direction: column; height: 100%; width: 100%; }
.upperbox { height: 50px; }
.uppercolumn { height: 45px; }

#searchresultsbox { flex-grow: 1; overflow-y: auto; }

#preview { border: 1px solid var(--bs-border-color); flex: 1; height: 100%; min-width: 150px; align-items: center; display: flex; flex-direction: column; justify-content: center; overflow-x: hidden; overflow-y: auto; }
#footer { border: 1px solid var(--bs-border-color); height: 30px; width: 100%; align-items: center; display: flex; justify-content: center; }
#footer .darkmode { max-width: 80px; }

.verticalbox { flex-grow: 1; overflow-x: none; overflow-y: auto; }
.summarybox { border: 1px solid var(--bs-border-color); font-weight:var(--summary-font-weight); overflow-x: hidden; border-radius: 7px;}
.nouserselect { user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.summarybox a { color: var(--subject-color);}
.subject { text-decoration: underline;}
.highlighted, .highlighted a {background: var(--highlighted-bg);color:var(--highlighted-color);font-weight:400;}
.highlighted.seen, .highlighted.seen a {background: var(--highlighted-seen-bg);color:var(--highlighted-seen-color);font-weight:400;font-style:italic;}
.seen, .seen a {font-style:italic;font-weight:400;color:var(--seen);}
.selected {background:var(--selected-bg); color:var(--selected-color);}
.deleted {background: var(--deleted-bg);}

.resizer[data-direction='horizontal'] { background-color: #2e8bcc; cursor: ew-resize; height: 100%; width: 5px; }
.resizer[data-direction='vertical'] { background-color: #cbd5e0; cursor: ns-resize; height: 5px; width: 100%; }

.navbar { background-color: #2c5fc4; font-family:"Segoe UI Light","Helvetica Neue","Segoe UI","Segoe WP",sans-serif;font-weight:100;text-transform:lowercase;font-size:25px;}

.ps10 { padding-left: 10px; }
.pe10 { padding-right: 10px; }

.text-tag { color: var(--tag); }
.text-tag.highlighted { color: var(--highlighted-color); }
.text-myblue { color: var(--my-blue); }
.text-deleted { color: var(--text-deleted); }
.mssghglght { background:var(--mssghglght-bg); color:var(--mssghglght-color);}

.brand { padding-right: 10px; margin-top: -5px; }

#mynote { height: 20px; }

input,button,select,textarea{font-family:"Segoe UI","Segoe WP","Helvetica Neue",sans-serif; background-color: var(--header-body-bg);border: 1px solid var(--bs-border-color);}

.middlebuttons { width: 40%; }
.text-darkmode-icon { color: var(--darkmode-icon-color); }

.loginbox { width: 300px; text-transform:lowercase; }
.login-logo { margin-top: 30px; margin-bottom: 30px; width: 148px; }
.header-logo { height: 35px; margin-left: -10px; padding-right: 10px; }

@media (max-width: 1199px) {
  .lefticons { width: 80%; font-size: 1rem; }
  .righticons { width: 20%; font-size: 1rem; }
  .icon-padding { padding-right: 10px; }
}

@media (min-width: 1200px) {
  .lefticons { width: 40%; font-size: 1.5rem; }
  .righticons { width: 20%; font-size: 1.5rem; }
  .icon-padding { padding-right: 20px; }
}

@media (min-width: 768px) {
  .login-logo { width: 295px; }
}

.modal {font-size:12px; }
.toast-logo { width:32px; }

.modal-body h4 {padding-top: 10px;}

.admin {border: 1px solid var(--bs-border-color); height: 100%; width: 1200px; align-items: center; justify-content: center; overflow-x: auto; overflow-y: auto;}

.piechart {position: relative; width:400px; height:400px;}
.linechart {position: relative; width:600px; height:300px;}

.help1 {font-size: 16px;}
.help2 {color: var(--selected-color);}

.myspinner {width: 5rem; height: 5rem;}
.middleofscreen {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.hidden {visibility: hidden;}
.active {font-weight:400;}
.ms5 {margin-left: 5px;}

.img404 {height: 450px;}

.redacted {color:var(--redacted-color); background:var(--redacted-bg);}

.external-warning { color:red; font-size: 1.5rem; }
.truncated-warning { color:#FF5733; font-size: 1.5rem; }

h1.h3.mb-3.fw-normal {text-align: center;}

/*
 * #663399: rebecca purple
 * #2e8bcc: my blue
 * #33b249: nice green
 */