.font-select * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.font-select {
  font-size: 16px;
  width: 240px;
  position: relative;
  display: inline-block;
  text-align: left;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 8px 10px;
}
.font-select * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.font-select .fs-drop {
  position: absolute;
  top: 38px;
  left: 0;
  z-index: 999;
  background: #fff;
  color: #000;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 4px 4px;
}
.font-select > span {
  outline: 0;
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 38px;
  line-height: 32px;
  padding: 3px 8px 3px 8px;
  color: #444;
  background: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.font-select > span.font-dings:not(.font-upper):first-child {
  color: green !important;
}
.font-select > span.font-dings:not(.font-upper):first-child::after {
  content: '';
}
.font-select .font-select-active > span {
  background-color: #eee;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.font-select .fs-results {
  max-height: 190px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}
.font-select .fs-results li {
  line-height: 80%;
  padding: 8px;
  margin: 0;
  list-style: none;
  font-size: 18px !important;
  position: relative;
}
.font-select .fs-results li.active {
  background-color: #3875d7;
  color: #fff !important;
  cursor: pointer;
}
.font-select .fs-search {
  border-bottom: 1px solid #aaa;
  padding: 4px;
}
.font-select .fs-search input {
  padding: 7px;
  width: 100%;
  border: 1px solid #aaa;
  font: 16px Helvetica, Sans-serif;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  border-radius: .1875rem;
}
.font-select .font-loading {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 40 40' enable-background='new 0 0 30 30' xml:space='preserve'%3E%3Cpath opacity='0.3' fill='%23911' d='M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z'/%3E%3Cpath fill='%23911' d='M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 80% center;
  font-size: smaller !important;
}
.font-select .font-dings {
  font-size: 0.9em !important;
  color: rebeccapurple !important;
}
.font-select .font-dings:not(.font-upper) {
  font-family: Arial, Roboto, Calibri !important;
  font-size: small !important;
}
.font-select .font-dings.font-upper {
  display: none;
}
.font-select .font-dings > i {
  font-style: normal;
  font-size: larger;
}
.font-select .font-upper {
  text-transform: uppercase;
  line-height: 1 !important;
  font-size: 1em !important;
}
.font-dings-chooser {
  position: absolute;
  right: 0;
  top: 0;
}
.character-grid {
  overflow-y: scroll;
  resize: vertical;
  height: 55vh;
}
.character-grid .kbd-icon {
  margin: 1px 3px 3px 2px;
  font-size: 3em;
}
.character-grid .kbd-icon > i {
  font-style: normal;
}
.character-grid .kbd-icon > i.kbd-32:after {
  content: '<spc>';
  color: rgba(220, 0, 3, 0.7);
  font-family: 'Arial Narrow', Arial;
  /* font-family: Arial; */
}
.ding-sample {
  padding: 0 5px;
  zoom: 2;
  margin-top: -5px;
  margin-bottom: -5px;
  caret-color: red;
}
.ding-snap {
  padding: 0 5px;
  zoom: 2;
  margin-top: -5px;
  margin-bottom: -5px;
  margin-left: 5px;
  width: fit-content;
  min-width: 2em;
  text-align: center;
  caret-color: transparent;
}
.tooltip.tooltip-large .tooltip-inner {
  font-size: 36px;
  min-width: 12em;
  max-width: none;
  padding: 0.2em;
}
.tooltip.tooltip-large .tooltip-inner .dingTip {
  overflow-wrap: anywhere;
  font-family: 'BlankFace';
}
.tooltip.tooltip-large .tooltip-inner .dingTip > span {
  padding: 1px;
}
.tooltip.tooltip-large .tooltip-inner .dingTip > span:hover {
  padding: 0;
  border: 1px solid;
  border-radius: 3px;
}
.tooltip.tooltip-single-ding {
  width: fit-content;
}
.tooltip.tooltip-single-ding .tooltip-inner {
  padding: 0.2em;
  font-size: 8em;
  width: fit-content !important;
  max-width: none;
  color: #fff;
  display: inline-block;
}
.jq-fontdings.active:after {
  color: red;
}
.jq-fontdings:after {
  content: "\F118";
  font-family: 'Fontawesome';
  position: absolute;
  right: 9%;
  bottom: 3%;
  font-size: 1em;
  color: green;
  z-index: 2;
}
span.dingTipLink {
  position: absolute;
  right: 3px;
  top: 0;
  width: auto;
  height: 100%;
  top: 50%;
  transform: translateY(-25%);
  z-index: 99;
  back: red;
}