
.dic{
  position:relative;
  font-size: 1rem;
  line-height: 1.25em;
}

.dic.entry {
}

.dic.headword {
  font-weight: bold;
  color: #9e2929;
}

.dic.headword:after {
  content: " ";
}

.dic.flag-status {
  font-size:smaller;
}

.dic.translation {
  border: 1px solid #999999;
  border-radius: 4px;
  padding: 5px 10px;
  margin: 15px -10px;
}

ol {
    counter-reset: item;
}

ol.dic.item li:before{
  background: #999999;
  color: #fff;
  content: "";
  content: counter(item, lower-latin) "";
  margin-right: 5px;
  padding: 2px 6px;
  counter-increment: item;
  border-radius: 4px;
}

li::marker{
  content:"";
}

ol.dic.item li:not(:last-child) {
    margin-bottom: 5px;
}

.dic.value{
  font-style: italic;
  text-shadow: 1px 1px 0px #ffffff;
  padding: 0px 2px;
  margin: 0px 2px;
}

.dic.type{
  color: #777777;
  margin: 0px;
}

.dic.type:before{
out  margin-left: 2px;
}

.dic.type:after{
  margin-right: 2px;
}

.dic.source:before{
  content: " < ";
}
.dic.refer{
/*   color: #9d9b9b; */
  margin-left: 0.2em;
  padding: 0px 2px;
  border-radius: 4px;
  font-size: smaller;
  text-decoration: none;
}

.dic.refer:before{
  content: "⇌";
  margin-right: 3px;
}

.dic.refer:hover::before {
  color: #403302;
}

div.dic.patterns{
  background-color: #eeeeee;
  text-shadow: 1px 1px 0px #ffffff;
  padding: 5px 10px;
  margin: 15px 0px;
}


.dic.patterns-label{
  font-size: smaller;
  margin: 0px
}

.dic.pattern:before{
  content: "— ";
  color: #999;
}

.dic.pattern-type:after{
  content: ": ";
}

.dic.chain{
  padding: 3px 0px;
}

.dic.elem {
  position: relative;
/*   display: inline-block; */
/*   border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ */
}


/* Infobox */

.dic > .info {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 3px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.5s;
  text-decoration:none;
  font-style:normal;
  font-size: small;
  text-shadow: none;
  font-weight: normal;
  font-variant-caps: normal;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

.dic > .info.big {
  width: 200px;
  margin-left: -100px;
  padding: 10px;
  text-align: justify;
  line-height: 1.2;
}

.dic:active > .info {
  visibility:visible;
  opacity:1;
}

.dic:focus > .info {
  visibility:visible;
  opacity:1;
}

.dic.subinfo:hover {
  background-color: #d0d0d0;
  cursor: pointer;
  text-shadow: none;
}

/* Flèche sous l'infobox */
.dic > .info:after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.dic.elem:before{
  content:"{";
}

.dic.elem:after{
  content:"}";
}

.dic.examples{
  border: 1px dotted #999999;
  padding: 5px 10px;
  margin: 15px;
}

.dic.example:not(:last-child):after  {
  content:"; ";
}

.dic.example-ln:after {
  content: " ";
}

.dic.example-word {
  font-style: italic;
}

.box {
  border-radius: 4px
}

.dic.second-element{
  font-weight: bold;
}

.dic.first-suffix, .dic.first-prefix{
  font-variant-caps: all-small-caps;
}

/* Generic classes */

.indented{
  margin-left: 40px;
}

/* Colors */

.red{
  color: #9e2929;
}

.green{
  color: #0c804c;
}

.grey{
  color: #777777;
}

.blue{
  color: #29549e;
}

/* Backgrounds */

.back-red{
  background-color: #9e2929;
}

.back-green{
  background-color: #0c804c;
}

.back-grey{
  background-color: #777777;
}

.back-blue{
  background-color: #d9f7ff;
}

.back-yellow{
  background-color: #fffde3;
}

/* Brackets */

.out-square:before{
  content:"[";
}

.out-square:after{
  content:"]";
}

.out-curly:before{
  content:"{";
}

.out-curly:after{
  content:"}";
}

.out-round:before{
  content:"(";
}

.out-round  :after{
  content:")";
}
