/**
* Pragmatic Tracker default/light colour scheme
*/

/*common colours */
:root {
  color-scheme:light;

  /* body general */
  --fg-body:#66686c;
  --bg-body:#c6dbdd;
  --shadow:#aaa;
  --shadow-popup:#555;

  /* panels - most content is in a panel */
  --fg-panel:var(--fg-body);
  --bg-panel:#fff;
  --bdr-panel:#fff;
  --bg-panel-blue:#cce8ff;
  --bg-panel-green:#ccffe8;
  --bg-panel-red:#ffe0df;
  --bg-panel-purple:#f0e0ff;

  --fg-link:#333436;
  --fg-link-hover:#000;
  --fg-standout:#000;
  --fg-standout-hover:#06b;

  /* forms, fields & fieldsets */
  --fg-field:var(--fg-body);
  --bg-field:#f3f5f6;
  --bdr-field:#999;
  --bdr-field-req:#000;
  --bdr-field-err:#c00;

  /* lists */
  --fg-list:var(--fg-body);
  --bg-list:#f4f5f7;
  --bdr-list:#fff;
  --fg-list-heading:var(--fg-body);
  --bg-list-heading:#dfe1e5;
  --bg-list-hover:#c7e1f1;
  --fg-list-disabled:#86888c;
  --bg-list-disabled:#e7e9ed;

  /* special content */
  /* bad - red */
  --fg-red:#600;
  --bg-red:#faa;
  --bg-red-hover:#f88;
  /* warning - yellow */
  --fg-yellow:#630;
  --bg-yellow:#feb;
  --bg-yellow-hover:#ffec94;
  /* amber - eg. medium risk - a bit more orange than warn */
  --fg-amber:#630;
  --bg-amber:#fdb;
  --bg-amber-hover:#fb9;
  /* good - green */
  --fg-green:#070;
  --bg-green:#cfe;
  --bg-green-hover:#aed;
  /* help - dark green on pale green */
  --fg-help:#050;
  --bg-help:#ccf8dd;
  --bg-help-hover:#aed;
  /* calendar special days */
  --bg-saturday:#f8e7b9;
  --bg-sunday:#f2d2dc;

  /* buttons */
  /* std button - blue */
  --fg-button:#fff;
  --bg-button:#6ad;
  --fg-button-hover:#fff;
  --bg-button-hover:#07c;
  --fg-button-disabled:#eee;
  --bg-button-disabled:#aaacae;
  /* new / blue */
  --fg-button-blue:var(--fg-button);
  --bg-button-blue:#6ad;
  --fg-button-blue-hover:var(--fg-button-hover);
  --bg-button-blue-hover:#07c;
  --fg-button-blue-disabled:var(--fg-button-disabled);
  --bg-button-blue-disabled:var(--bg-button-disabled);
  /* edit / purple */
  --fg-button-purple:var(--fg-button);
  --bg-button-purple:#a6f;
  --fg-button-purple-hover:var(--fg-button-hover);
  --bg-button-purple-hover:#60e;
  --fg-button-purple-disabled:var(--fg-button-disabled);
  --bg-button-purple-disabled:var(--bg-button-disabled);
  /* bad / delete / red */
  --fg-button-red:var(--fg-button);
  --bg-button-red:#c88;
  --fg-button-red-hover:var(--fg-button-hover);
  --bg-button-red-hover:#c00;
  --fg-button-red-disabled:var(--fg-button-disabled);
  --bg-button-red-disabled:var(--bg-button-disabled);
  /* good / green */
  --fg-button-green:var(--fg-button);
  --bg-button-green:#7a8;
  --fg-button-green-hover:var(--fg-button-hover);
  --bg-button-green-hover:#283;
  --fg-button-green-disabled:var(--fg-button-disabled);
  --bg-button-green-disabled:var(--bg-button-disabled);
  /* help - pale green */
  --fg-button-help:var(--fg-help);
  --bg-button-help:var(--bg-help);
  --fg-button-help-hover:#fff;
  --bg-button-help-hover:#093;
  }

  body {
    color:var(--fg-body);
    background-color:var(--bg-body);
    }

  .panel {
    background-color:var(--bg-panel);
    box-shadow:2px 2px 3px 0px var(--shadow);
    }
  /* text elements */
  a {
    color:var(--fg-link);
    }
  a:hover {
    color:var(--fg-link-hover);
    }
  /* special content */
  .normal {
    color:var(--fg-panel);
    }
  a.standout,
  span.standout {
    color:var(--fg-standout);
    }
  a.standout:hover,
  span.standout:hover {
    color:var(--fg-standout-hover);
    }

 /** Navigation - buttons in banner */
  .nav li a {
    color:var(--fg-panel);
    border-color:var(--bg-body);
    background-color:var(--bg-panel);
    }
  .nav li a.warn {
    background-color:var(--bg-yellow);
    }
  .nav li a.help {
    background-color:var(--bg-help);
    }
  .nav li a:hover,
  .nav li a:focus {
    color:var(--fg-button-hover);
    background-color:var(--bg-button-hover);
    border-color:var(--bg-button-hover);
    }
  a:focus {
    box-shadow: 0 0 4px 2px #aedaff;
    }
  .nav li a:hover,
  .nav li a:focus {
    color:var(--fg-button);
    background-color:var(--bg-button-hover);
    border-color:var(--bg-button-hover);
    }

  /* server performance light */
  #svrperf {
    background-color:#bbb;
    border-color:var(--bdr-field);
    border-top-color:#ddd;
    border-left-color:#ddd;
    }
  /* banner announcement - eg. a/c days left */
  #announce {
    color:#c00;
    background-color:#ff0;
    border-color:#c00;
    }

  /* tabs at top of page main panel...*/
  .tabs li {
    border-bottom-color:var(--bg-body);
    }
  .tabs li.open {
    border-bottom-color:var(--bg-panel);
    }
  .tabs li a {
    background-color:#eff0f1;
    }
  .tabs li a:hover,
  .tabs li a:focus {
    background-color:var(--bg-button-hover);
    color:var(--fg-button-hover);
    }
  /* currently selected tab... */
  .tabs li.open p {
    background-color:var(--bg-panel);
    }
  .tabs li.risk1 a,
  .tabs li.risk1 p {
    background-color:var(--bg-yellow);
    }
  .tabs li.risk1 a:hover {
    background-color:var(--bg-button-hover);
    }
  .tabs li.risk2 a,
  .tabs li.risk2 p {
    background-color:var(--bg-amber);
    }
  .tabs li.risk2 a:hover {
    background-color:var(--bg-button-hover);
    }
  .tabs li.risk3 a,
  .tabs li.risk3 p {
    background-color:var(--bg-red);
    }
  .tabs li.risk3 a:hover {
    background-color:var(--bg-button-hover);
    }

  /* buttons...
  can apply to buttons, links, input-submit etc etc */
  .btn {
    color:var(--fg-button);
    background-color:var(--bg-button);
    border-color:var(--bg-button);
    box-shadow:1px 1px 1px 0px var(--shadow);
    }
  .btn:hover,
  .btn.standout {
    color:var(--fg-button-hover);
    background-color:var(--bg-button-hover);
    border-color:var(--bg-button-hover);
    }
  .btn:focus {
    box-shadow: 0 0 4px 2px #aedaff;
    }
  .btn:disabled {
    color:var(--fg-button-disabled);
    background-color:var(--bg-button-disabled);
    border-color:var(--bg-button-disabled);
    box-shadow:1px 1px 1px 0px var(--shadow);
    }

  /* coloured buttons...
     red - delete */
  .btn.btn-red,
  .btn.btn-del {
    color:var(--fg-button-red);
    background-color:var(--bg-button-red);
    border-color:var(--bg-button-red);
    }
  .btn.btn-red:hover,
  .btn.btn-del:hover,
  .btn.btn-red.standout,
  .btn.btn-del.standout {
    color:var(--fg-button-red);
    background-color:var(--bg-button-red-hover);
    border-color:var(--bg-button-red-hover);
    }
  .btn.btn-red:disabled,
  .btn.btn-del:disabled {
    color:var(--fg-button-disabled);
    background-color:var(--bg-button-red-disabled);
    border-color:var(--fg-button-red-disabled);
    }
  /* green - safe */
  .btn.btn-green,
  .btn.btn-safe {
    color:var(--fg-button-green);
    background-color:var(--bg-button-green);
    border-color:var(--bg-button-green);
    }
  .btn.btn-green:hover,
  .btn.btn-safe:hover,
  .btn.btn-green.standout,
  .btn.btn-safe.standout {
    color:var(--fg-button-green);
    background-color:var(--bg-button-green-hover);
    border-color:var(--bg-button-green-hover);
    }
  .btn.btn-green:disabled,
  .btn.btn-safe:disabled {
    color:var(--fg-button-disabled);
    background-color:var(--bg-button-green-disabled);
    border-color:var(--bg-button-green-disabled);
    }
  /* help - measles buttons */
  .btn.btn-help {
    color:var(--fg-help);
    background-color:var(--bg-help);
    border-color:var(--bg-help);
    }
  .btn.btn-help:hover {
    color:#fff;
    background-color:#274;
    border-color:#274;
    }

  /* general colours */
  .bad,
  .red,
  .panel.bad,
  .panel.red {
    color:var(--fg-red);
    background-color:var(--bg-red);
    }
  .warn,
  .yellow,
  .panel.warn,
  .panel.yellow {
    color:var(--fg-yellow);
    background-color:var(--bg-yellow);
    }
  .amber,
  .panel.amber {
    color:var(--fg-amber);
    background-color:var(--bg-amber);
    }
  .good,
  .green,
  .panel.good,
  .panel.green {
    color:var(--fg-green);
    background-color:var(--bg-green);
    }

  /* list colours */
  td.bad,
  td.red,
  tr.bad td,
  tr.red td,
  .list td.bad,
  .list td.red,
  tr.risk3 td,
  .list .slct.bad a {
    color:var(--fg-red);
    background-color:var(--bg-red);
    }
  .list tr.warn td,
  .list tr.yellow td,
  td.warn,
  .list td.warn,
  .list td.yellow,
  tr.risk1 td {
    color:var(--fg-yellow);
    background-color:var(--bg-yellow);
    }
  td.amber,
  .list td.amber,
  tr.risk2 td {
    color:var(--fg-amber);
    background-color:var(--bg-amber);
    }
  td.good,
  td.green,
  .list td.good,
  .list td.green {
    color:var(--fg-green);
    background-color:var(--bg-green);
    }
  /* list hover */
  .list tr:hover td {
    background-color:var(--bg-list-hover);
    }
  .list tr:hover td.good {
    background-color:var(--bg-green-hover);
    }
  .list tr.warn:hover td,
  .list tr.yellow:hover td,
  .list tr:hover td.warn,
  .list tr.risk1:hover td {
    background-color:var(--bg-yellow-hover);
    }
  .list tr.risk2:hover td {
    background-color:var(--bg-amber-hover);
    }
  .list tr:hover td.bad,
  .list tr:hover td.bad a,
  .list tr.risk3:hover td {
    background-color:var(--bg-red-hover);
    }
  /* calendar hover */
  .calendar td.disabled {
    color:var(--bg-panel);
    background-color:var(--bg-panel);
    }
  .calendar tr:hover td {
    background-color:var(--bg-list);
    }
  .calendar tr:hover td:hover{
    background-color:var(--bg-list-hover);
    /*cursor:pointer;*/
    }
  .calendar tr:hover td.disabled,
  .calendar tr:hover td.disabled:hover {
    background-color:var(--bg-panel)!important;
    cursor:default;
    }

  /* list control and navigation */
  .list-ctrl {
    background-color:var(--bg-help);
    }
  /* list control items */
  .list-ctrl input[type='text'] {
    border-color:var(--bdr-field);
    }

  /* box-shadow warning flashes */
  .flash-red    /* red */
    {box-shadow:0 0 12px var(--bg-red)!important;}
  .flash-warn   /* amber */
    {box-shadow:0 0 12px var(--bg-yellow)!important;}
  .flash-green   /* green */
    {box-shadow:0 0 12px var(--bg-green)!important;}

  .setup .error {
    color:var(--bdr-field-err);
    font-weight:bold;
    }
  .setup .success {
    color:var(--fg-green);
    }

  /* popup dialogs, please wait & help messages... */
  #bkgndMask {
    background-color:rgba(0, 0, 0, 0.5);
    }
  .popup {
    background-color:var(--bg-panel);
    box-shadow:3px 3px 6px 2px var(--shadow-popup);
    }
  .popup .popupHead {
    color:var(--fg-standout);
    background-color:rgba(0, 0, 0, 0.1);
    border-bottom-color:rgba(0, 0, 0, 0.2);
    }

  /* special popups... */
  #Help {
    background-color:var(--bg-help);
    }
  #Help .popupHead {
    color:var(--fg-help);
    }

  #timeoutMessage {
    color:var(--fg-yellow);
    background-color:var(--bg-yellow);
    }

  /* help buttons... */
  .btnHelp,
  .tblHelp {
    color:var(--fg-button-help);
    background-color:var(--bg-button-help);
    border-color:var(--fg-button-help);
    }
  .btnHelp:hover,
  td a.btnHelp:hover,
  .tblHelp:hover {
    color:var(--fg-button-help-hover);
    background-color:var(--bg-button-help-hover);
    border-color:var(--fg-button-help);
    }

  /* font-awesome button modifiers */
  i.btn,
  span.stack {
    color:var(--fg-button);
    background-color:var(--bg-button);
    }
  i.btn:hover,
  span.stack:hover {
    color:var(--fg-button-hover);
    background-color:var(--bg-button-hover);
    }
  /* add/new buttons */
  i.btn.new,
  span.stack.new {
    color:var(--fg-button-blue);
    background-color:var(--bg-button-blue);
    }
  i.btn.new:hover,
  span.stack.new:hover {
    color:var(--fg-button-blue-hover);
    background-color:var(--bg-button-blue-hover);
    }
  /* edit buttons */
  i.btn.edit,
  span.stack.edit {
    color:var(--fg-button);
    background-color:var(--bg-button);
    }
  i.btn.edit:hover,
  span.stack.edit:hover {
    color:var(--fg-button-hover);
    background-color:var(--bg-button-hover);
    }
  /* delete buttons */
  i.btn.del,
  span.stack.del,
  i.btn.red,
  span.stack.red {
    color:var(--fg-button-red);
    background-color:var(--bg-button-red);
    }
  i.btn.del:hover,
  span.stack.del:hover,
  i.btn.red:hover,
  span.stack.red:hover {
    color:var(--fg-button-red-hover);
    background-color:var(--bg-button-red-hover);
    }
  /* green / good / safe buttons */
  i.btn.green,
  span.stack.green,
  i.btn.good,
  span.stack.good,
  i.btn.safe,
  span.stack.safe {
    color:var(--fg-button-green);
    background-color:var(--bg-button-green);
    }
  i.btn.green:hover,
  span.stack.green:hover,
  i.btn.good:hover,
  span.stack.good:hover,
  i.btn.safe:hover,
  span.stack.safe:hover {
    color:var(--fg-button-green);
    background-color:var(--bg-button-green-hover);
    }
  /* disabled buttons */
  i.btn.disabled,
  i.btn:disabled,
  span.stack.disabled,
  span.stack:disabled {
    color:var(--fg-button-disabled);
    background-color:var(--bg-button-disabled);
    }
  /* button overlays inside a stack */
  span.stack i.btn.white {
    color:#fff;
    }
  span.stack i.btn.blue {
    color:var(--bg-button-hover);
    }
  span.stack i.btn.red {
    color:var(--bg-button-red-hover);
    }
  span.stack i.btn.green {
    color:var(--bg-button-green-hover);
    }

  /* form colours */
  /* bordered collection of related fields
     expected to appear within a formlayer above */
  fieldset {
    border-color:var(--bdr-field);
    }
  /* repeat buttons at bottom of long page */
  fieldset.repeat {
    background-color:var(--bg-panel)!important;  /* ensure repeat in coloured qset is white! */
    }
  .formlayer .table-cntnr,
  .form-row .table-cntnr {
    border-color:var(--bdr-field);
    }
  /* coloured border for delete confirmation forms */
  fieldset.delete,
  fieldset.red {
    border-color:var(--bg-button-red);
    }
  /* text inputs */
  input[type="text"],
  input[type="password"],
  input[type="file"],
  input[type="checkbox"],
  input[type="radio"],
  .button-box,
  textarea {
    color:var(--fg-panel);
    border-color:var(--bdr-field);
    background-color:var(--bg-field);
    }
  /* readonly checkboxes & radio buttons */
  input[type="checkbox"][readonly],
  input[type="radio"][readonly] {
    accent-color:var(--fg-button-disabled);   /* make it grey */
    pointer-events:none;                      /* no click response */
    user-focus:none;                          /* can't tab to it */
    }   /* NB. user-focus only works on Firefox, else use tabindex=-1 in html */
  select {
    color:var(--fg-panel);
    border-color:var(--bdr-field);
    background-color:var(--bg-field);
    }
  input:focus,
  textarea:focus,
  select:focus {
    box-shadow: 0 0 4px 2px #aedaff;
    }
  input.req,
  textarea.req,
  .button-box.req,
  select.req,
  .req {
    border-color:var(--bdr-field-req);
    }
  .err {
    border-color:var(--bdr-field-err)!important;
    }
  .err:focus {
    border-color:#f30!important;
    box-shadow:0 0 4px 2px #f30;
    }

  /* style rules for date time picker... */
  #calBorder {
    border-color:var(--bdr-field);
    box-shadow:2px 2px 3px 0px var(--shadow);
    }
  /* tables as form elements */
  /* large table filling its own fieldset look-alike*/
  .table-cntnr {
    border-color:var(--bdr-field);
    }
  .list th,
  .calendar th {
    background-color:var(--bg-list-heading);
    color:var(--fg-list-heading);
    }
  .list td,
  .calendar td {
    background-color:var(--bg-list);
    color:var(--fg-list);
    }
  .list td a {
    color:var(--fg-list);
    }
  .list td a:hover {
    color:var(--fg-link-hover);
    background-color:var(--bg-button);
    }
  /* sorting and filtering the list */
  .list a.sort:hover {
    color:var(--fg-link-hover);
    background-color:var(--bg-button);
    }
  .list .slct a:hover {
    color:var(--fg-button-hover);
    background-color:var(--bg-button-hover);
    }
  .list .link a:hover {
    background-color:transparent;
    }

  /* add new record row at list bottom */
  .list tr.rowAddNew td,
  .list tr.rowAddNew td a {
    color:var(--fg-button);
    background-color:var(--bg-button);
    }
  .list tr.rowAddNew:hover td,
  .list tr.rowAddNew:hover a,
  .list tr.rowAddNew td a:hover {
    color:var(--fg-button-hover);
    background-color:var(--bg-button-hover);
    }
  .list tr.rowDontAddNew td,
  .list tr.rowDontAddNew:hover td {
    background-color:var(--bg-button-disabled);
    }

  /* drag n drop elements */
  table.list.dropHover th,
  table.list.dropHover td {
    background-color:#afd;
    }
  table.list.dropUpldg th,
  table.list.dropUpldg td {
    background-color:#fed;
    }

  /* calendar cells */
  .calendar td.today,
  .calendar tr:hover td.today {
    color:var(--fg-button-red);
    background-color:var(--bg-red)
    }
  .calendar tr:hover td.today:hover {
    background-color:var(--bg-list-hover)
    }

  .calendar p.date a:hover,
  .calendar p.add a:hover {
    color:var(--fg-button-hover);
    background-color:var(--bg-button-hover);
    }

  /* special form elements */
  select.risk1,
  input[type="text"].risk1 {
    background-color:var(--bg-yellow);
    }
  select.risk2,
  input[type="text"].risk2 {
    background-color:var(--bg-amber);
    }
  select.risk3,
  input[type="text"].risk3 {
    background-color:var(--bg-red);
    }
  .checkbox-group {
    border-color:transparent;
    }
  /* table for m/choice horizontal... */
  .tblHChoice {
    background-color:var(--bg-field);
    }
  /* error / unanswered... */
  .empty,
  .tblHChoice.empty {
    border-color:var(--bdr-field-err)!important;
    }
  /* analog slider control... */
  .sldcntnr,
  .sldgrdctr {
    border-color:var(--bdr-field);
    background-color:var(--bg-field);
    }
  .sldcntnr .slider ,
  .sldgrdctr .slider {
    background-color:#fff;
    border-color:#bbb;
    }
    /*
  .sldgrdctr .slider {
    background-image:url(../images/gradscale-1x1000.png);
    background-size:100% 12px;
    background-position:center 50%;
    background-repeat:no-repeat;
    background-color:#ddd;
    border-color:#bbb;
    }
  .sldgrdctr .slider.int-4 {
    background-image:url(../images/gradscale-4x1000.png);
    }
  .sldgrdctr .slider.int-10 {
    background-image:url(../images/gradscale-10x1000.png);
    } */
  /* left/right explanations... */
  .mainExpl,
  .sideExpl {
    border-top-color:#ccc;
    }

  /* question sets and buttons... */
  /* pretty matching colours... */
  #flForms .sidebar,
  .qset.qs-form {
    background-color:var(--bg-panel-blue);  /* used to be red */
    }
  #flClient .sidebar,
  .qset.qs-scale {
    background-color:var(--bg-panel-blue);
    }
  .qset.qs-fbk,
  #flFeedback .sidebar {
    background-color:var(--bg-panel-green);
    }

  /* error messages after form validation */
  form p.error-message,
  form .field-error {
    color:var(--bdr-field-err);
    }
  .frmClient p.prompt {
    color:#c00;           /* #814 */
    }


  /* drag n drop target zones... */
  .dropZone {
    background-color:#f5f6f7;   /* grey */
    }
  .dropZone.dropHover {
    background-color:#afd;  /* green */
    }
  .dropZone.dropUpldg {
    background-color:#fffcdd;  /* yellow */
    }
  .dropZone p.dropProgress.success {
    background-color:#afd;  /* green */
    }
  .dropZone p.dropProgress.fail {
    background-color:#fdd;  /* pink */
    }

      /* report sse progress bar */
  .prog-bar {
    background-color:#eee;
    border-color:#ccc;
    }
  .prog-bead {
    background-color:#6c9;
    }
  progress {
    border-color:#ddd;
    background-color:#eee;
    }
  progress::-moz-progress-bar {
    background-color:#eee;
    color:#6c9;
    }
  progress::-webkit-progress-bar {
    background-color:#eee;
    }
  progress::-webkit-progress-value {
    background-color:#6c9;
    }

   /* style rules for date time picker... */
  #dtPicker {
    border-color:var(--bdr-field);
    box-shadow:2px 2px 3px 0px #888;
    background-color:var(--bg-panel);   /* SpanBgColor */
    }
  #dtCntnr {
    background-color:var(--bg-panel);   /* SpanBgColor */
    }

  #dtYearMonth {
    background-color:var(--bg-panel);
    color:var(--fg-panel);                 /* MonthYearColor */
    }
  #dtPicker table#dtMonth {
    color:var(--fg-panel);
    }

  #dtMonth th {
    background-color:var(--bg-list-heading);    /* WeekHeadColor */
    color:var(--fg-list-heading);               /* hard coded */
    }
  #dtMonth td {
    color:var(--fg-list);
    background-color:var(--bg-list);    /* WeekDayColor */
    }
  #dtMonth td.saturday,
  .calendar .saturday,
  .calendar tr:hover .saturday {
  	background-color:var(--bg-saturday);
  	}
  #dtMonth td.sunday,
  .calendar .sunday,
  .calendar tr:hover .sunday {
   background-color:var(--bg-sunday);    /* SundayColor */
    }
  #dtMonth td.today {
    color:#eee;
    background-color:var(--bg-button-red);    /* TodayColor */
    }
  #dtMonth td.selected {
    color:#eee;
    background-color:#368; /* SelDateColor */
    }
  #dtMonth td:hover,
  #dtMonth td.saturday:hover,
  #dtMonth td.sunday:hover,
  #dtMonth td.today:hover,
  #dtMonth td.selected {
    color:var(--fg-button-hover);
    background-color:var(--bg-button-hover);
    }
  #dtMonth td.disabled {
    color:var(--fg-panel);
    background-color:var(--bg-panel);    /* hidden */
    }
  #dtMonth td.disabled:hover {
    color:var(--fg-panel);
    background-color:var(--bg-panel);    /* hidden */
    }

  /* Chart stuff */
  /* table below progress chart */
  tr.chtblLabel,
  tr.chtblCmp {
    color:var(--fg-list);
    background-color:var(--bg-list);
    }
  .chtblLabel td,
  .chtblCmp td {
    color:var(--fg-list);
    background-color:inherit;
    }

  /* Select2 drop select stuff */
  .select2-dropdown {
    background-color:var(--bg-field);
    border-color:var(--bdr-field);
    }
  .select2-close-mask {
    background-color:var(--bg-panel);
    }
  .select2-container.select2-container--default.select2-container--focus .select2-selection {
    box-shadow: 0 0 4px 2px #aedaff;
    }
  .select2-container--default .select2-selection--single {
    background-color:var(--bg-field);
    border-color:var(--bdr-field);
    }
  select.req + .select2-container--default .select2-selection--single {
    border-color:var(--bdr-field-req);
    }
  select.err + .select2-container--default .select2-selection--single {
    border-color:var(--bdr-field-err);
    }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color:var(--fg-field);
    }
  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color:var(fg-field);
    }
  .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #333 transparent transparent transparent;
    }
  .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color:var(--bg-list-disabled);
    }
  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #333 transparent;
    }
  .select2-container--default .select2-search--dropdown .select2-search__field {
    border-color:var(--bdr-field)
    }
  .select2-container--default .select2-results__group {
    border-top-color:var(--bdr-field);
    }
  .select2-container--default .select2-results__option[aria-selected=true] {
    color:#000;                 /* selected field in dropped list */
    background-color:#d3d5d6;
    }
  .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color:var(--bg-button);
    color:var(--fg-button);
    }
  .select2-container--default .select2-selection--multiple {
    background-color:var(--bg-field);
    border-color:var(--bdr-field);
    }
  .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color:var(--bdr-field);
    box-shadow: 0 0 4px 2px #aedaff;
    }
  .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color:#ff0;
    }
  .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #660;
    }
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color:var(--bg-field);
    border-color:var(--bdr-field);
    }
  /* red 'x' to de-select an option from a multiple select */
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color:#c00;
    }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color:#f00;
    }
  .req + .select2-container--default .select2-selection--multiple {
    border-color:var(--bdr-field);
    }
  /* current highlighted option - current or last to be moused over */
  .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color:var(--bg-button);
    color:var(--fg-button);
    }