body {
	background-color: #f5fafa;
  overflow-y:hidden;
}

body.waiting * {
  cursor: progress;
}

.genus {
    top:0;
    right:-4vw; /*4vw is the min-width of dropdown-menu */
    margin-top:-6px;
		max-height:80vh;
		overflow:auto;
		z-index:1001;
}

a {
  text-decoration:none;
}

/* make checkboxes and radio button more visibles */
input[type="checkbox"] {
  outline: 1px solid black;
}

input[type="radio"] {
  outline: 1px solid black;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(90deg);
}

.popupDialog {
  background-color: #e6eded;
}

.letters {
	overflow:auto;
	z-index:1000;
}

.table {
	--bs-table-bg:#f5fafa;
}

/* settings specifics to descriptions */
.taxon {
  padding-top: 2px;
  padding-bottom: 2px;
	font-style: italic;
  font-size: larger;
}

.navbar {
    background-image: url("banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    z-index:100;
}

.icons {
  display: inline-flex;
  margin-left: auto;
}
.icons a {
  transition: all 0.2s ease-in-out;
  padding: 0.2rem 0.4rem;
  color: #ccc;
  text-decoration: none;
}

.icons a:hover {
  color: white;
  text-shadow: 0 0 30px white;.navbar {
    background-image: url("banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    z-index:100;
  }
}

.filter {
  margin-top: 10px;
  background-image: url("filter.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

.avatar {
  margin-top: 7px;
  background-image: url("user_avatar.svg"); /* lock_closed.gif"); */
  background-repeat: no-repeat;
  background-size: 27px 27px;
}

.home {
  margin-top: 7px;
  background-image: url("home.svg");
  background-repeat: no-repeat;
  background-size: 27px 27px;
}

.lock_open {
  margin-top: 0px;
  background-image: url("lock_open.gif");
  background-repeat: no-repeat;
  background-size: 27px 27px;
  background-position: center;
}

.info {
  margin-top: 10px;
  background-image: url("about_icon.gif");
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

.editIcon {	
  background-image: url("edit_pen_icon.png");
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.addIcon {
	background-image: url("add_icon.png");
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.removeIcon {
	background-image: url("remove_icon.png");
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.removeIconSmall {
	background-image: url("remove_icon.png");
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

.reset {
  all: revert;
}

.biblio { /* litterature lists */
	text-indent: -2em;
  margin-left: 2em;
}

.ui-menu-item { /* prevents wrapping at white space in autocomplete lists */
  white-space: nowrap;
}

.ui-accordion-content {
  background-color: #f5fafa;
}

/* add scrollbar to autocomplete. Source jquery */
.ui-autocomplete {
  max-height: 50vh; /* half of viewport height */
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.contentdiv::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.contentdiv {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

.synList {
  text-indent:-6em;
  padding-left: 6em;
}

.inclList {
  text-indent:-2.5em;
  padding-left: 2.5em;
}

.biblioTab .tab-pane { border:solid 1px blue;    }

.redRadio {
  accent-color:red;
  border-color: red;
}

.redRadio:checked {
  background-color:red; 
}

.orangeRadio {
  accent-color:orange;
  border-color: orange;
}

.orangeRadio:checked {
  background-color:orange; 
}

.greenRadio {
  accent-color:green;
  border-color: green;
}

.greenRadio:checked {
background-color:lightgreen; 
}

.blink {
  animation: blinker 2s linear infinite;
  color: red;
}

@keyframes blinker {
  50% {
      opacity: 0;
  }
}

.sticky-top { /* prevents that sticky lines overlapp dropdown menus */
  z-index: 10;
  background-color: #f5fafa;
}

.logo {
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-position: left center;
  background-image: url("logo_catlich.jpg");
}
/* from https://stackoverflow.com/questions/41968146/html-definition-list-on-same-line-with-variable-dt-size 
dl.dtfloat{ display: flex; flex-direction:row; flex-wrap: wrap; }
.dtfloat dt { flex-basis:5%; }
.dtfloat dd { flex-basis: 95%; }

both solutions (above and below have the same problem: 
Term and definition overlap on small devices.
Alternate solution: use table...
*/
dt {
  font-weight: normal;
}

dl.dtfloat{ overflow:hidden; /* for clearfix */}
.dtfloat dt{ float:left; width:4%; clear:left;}
.dtfloat dd{ float:left; width:96%; }
/*
dt, dd{ margin:0 0 1em; }
dd{ margin-left:1em; }
*/