* {
    box-sizing: content-box;
    border-radius: 4px;
}

page {
  background-color: #c1b6ba;
  box-shadow: 12px 18px 24px rgba(0,0,0,0.1);
  max-width: 58rem;
  margin: 2em auto;
  padding: 2em 1em;
  display:block;
}

html, body {
    height: 100%;
    background-color: #eee;
}


.form {
  margin: 1em auto;
}

.content {
  flex: 1;
  background-color: white;
  border-radius: 5px;
  padding: 1em;
  height:auto;
}

#search {
  background: transparent;
  border: 1.2px dashed #a27575;
  border-radius: 10px 0px;
/*     border:0; */
  font: 1em "EB Garamond",Garamond,"Times New Roman",serif;
  padding: .5em;
/*     color: #0b0404; */
  text-align: center;
  margin: auto;
  display: flex;
  width: 15em;
  max-width: 80%;
  color: #350000;
}

#search:focus{
/*   border:0; */
  outline: 2px solid #a27575;
  border-radius: 10px 0px;
}

::placeholder{
  font-style: italic;
}

.selectContainer {
  min-width: 10em;
  margin: 0 10px;
  min-height: 300px;
}

.flex-container{
  display:flex;
}

.selectContent {
  border: 2px solid #a27575;
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-autocomplete {
    background-color: #c1b6ba;
    width: 15em;
    max-width: 80%;
}

li.ui-menu-item, li.selectWord {
    border-top: 1px dashed;
    color: #350000;
    border-radius: 0px;
}

.ui-menu-item-wrapper {
  border-radius: 0px;
  padding: 0px 5px;
}

.ui-helper-hidden-accessible {
  display:none;
}

li.selectWord{
  padding: 2px 5px;
}

li.selectWord:hover {
  background: #a69ca0;
}

li.selectWord.active {
  background: #a69ca0;
  font-weight: bold;
}

li.ui-menu-item:first-child, li.selectWord:first-child {
    border-top: 0px;
}

.ui-state-active{
  background-color: #a69ca0;
}

#ui-id-1 {
  /* width: 241px; */
  border-radius: 0px 0px 3px 3px;
  border: 2px solid #a27575;
  line-height: 1.5em;
  list-style-type:none;
  padding-left: 0px;
}

.flag {
  float:right;
  font-size:x-small;
  background-color: #96b087;
  margin: 4px 5px auto auto;
  border-radius: 20px;
  padding: 0px 0.5em;
  position:relative;
}
/*
.flag:after {
      content: '';
      position: absolute;
  /* top: 0px; */
  /* left: 128px; */
  /* border: 50px solid transparent; */
  /* border-left: 12px solid #ccc; */
  border: 9.34px solid transparent;
  border-left: 14px solid #96b087;
}

.flag:before {
      content: '';
      position: absolute;
  /* top: 0px; */
  /* left: 128px; */
  /* border: 50px solid transparent; */
  /* border-left: 12px solid #ccc; */
  border: 9.34px solid transparent;
  border-right: 14px solid #96b087;
}

/* Infobox */

* > .info {
  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;
}

* > .info.top {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

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

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

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

*:hover > .info.hov {
  visibility:visible;
  opacity:1;
}


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

/* Flèche sous l'infobox */
* > .info.top: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;
}

.info.left{
  top: -3px;
  max-width: 10em;
  width: 10em;
  right: 105%;
}

.fl-draft{
  background-color:#d0ac7e;
}

.fl-revised{
  background-color:#96b087;
}