/*********************************************************************************
/*
/* icons 
/*
/* https://github.com/FortAwesome/Font-Awesome/blame/master/svgs/regular/envelope.svg
/*
/* https://css-tricks.com/svg-sprites-use-better-icon-fonts/
/*
/* https://css-tricks.com/svg-symbol-good-choice-icons/
/*
/********************************************************************************/

svg.icon {
  width: 18px;
  height: 18px;
}

ul li>svg {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  margin-bottom: -2px;  
}

ul li>svg.icon-list {
  background-color: var(--icon-background);
  color: var(--icon-text);
  padding: 6px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
}

ul li>svg.icon-list.green {
  background-color: var(--icon-background-green);
}

ul li>svg.icon-list.red {
  background-color: var(--icon-background-red);
}

ul li>svg.icon-list.blue {
  background-color: var(--icon-background-blue);
}

ul li>svg.icon-list.no-circle {
  border: none;
  background-color: transparent;
  color: var(--icons);
}

ul li>svg.icon-list-blank-space {
  width: 32px;
  min-width: 32px;
}

ul.icons {
  list-style-type: none;
  width: 92%;
//  margin-left: 5px;
}

ul.icons li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
  min-height: 36px;
}

ul.icons-ul-nested {
  max-width: calc( var(--max-content-width) - 40px);
  list-style-type: none;
}

ul.icons li.align-top {
//  align-items: flex-start;
}

ul.icons li svg,
ul.icons li span.icon {
  margin-right: 8px;
  margin-bottom: -1px;
}

span.icon {
  font-weight: bold;
  font-size: 18px;
}

svg.icon.green {
  color: Green;
}

svg.icon.red {
  color: FireBrick;
}

svg.icon.light-grey {
  color: LightGrey;
}

svg.icon.blue {
  background-color: var(--icon-background-blue);
}