/* Theme */
.header {
  background-color: #fff;
  /*border-bottom: 1px solid #E9EEF2;*/
}

  .header__logo {
    background-color: #3b4557;
  }

    .header__logo img {
      margin-right: 0.5rem;
    }

  .header__title {
    font-size: 2.0rem;
    color: #404040;
    margin-left: 5rem;
    font-weight: 400;
  }

  .header__inner {
    flex: 1 1 auto;
    display: flex;
    align-self: stretch;
    border-bottom: 1px solid #E9EEF2;
  }

  .header__infos {
    align-self: center;
  }

  .header a, .header a:hover, .header a:visited {
    color: #007bff;
    font-weight: 500;
  }


/* Utils */
.mrb05 { margin: 0 0.1rem 0.1rem 0; }
.mr05 { margin-right: 0.1rem; }
.pt1p { padding-top: 1px; }
.pt2p { padding-top: 2px; }
.pt3p { padding-top: 3px; }
.w700p { max-width: 900px; }
.w1000p { max-width: 1000px; }
.flex-group { display: flex; }
.icon-button { font-size: 2rem; color: #686868; }
.icon-button:visited { color: #686868; }
.dimmed-button > i { opacity: 0.5; }

.relative { position: relative; }
.middle-vertical { position: absolute; right: 10px; top: 25%; }

.mr-checkbox input[type="checkbox"] { margin-top: 12px; margin-right: 25px; }
.ml-checkbox { margin-left: 38px; }


/* Sizing utils */
.table-30p { width: 30px; }
.table-50p { width: 50px; }
.table-70p { width: 70px; }
.table-300p { width: 300px; }

.height-300 { min-height: 300px; }
.col-sm-3 { width: 25%; }
.col-sm-9 { width: 75%; }


/* Navigation */
.navigation { min-height: 100vh; }
.pagination a { text-decoration: none; }

/* Table */
.table-actions > div { white-space: nowrap; }

.table-row-active { cursor: pointer; }
.table-row-open td, .table-row-open th { white-space: normal; }

.table-row__icon-open { display: none; }
.table-row-open .table-row__icon-close { display: none; }
.table-row-open .table-row__icon-open { display: inline; }


/* Forms */
.validation-message { color: #ed5565; }
.has-error input, .has-error textarea { border: 1px solid #ed5565; }
.has-error textarea { margin-bottom: 0; }

.password-input { position: relative; }
.password-input input { width: 100%; padding-right: 40px; }
.password-input a { position: absolute; right: 15px; top: 10px; }

.tag--toggle {   }
.tag--toggle:hover { background-color: #f5a26f; }
label input[type="radio"], label input[type="checkbox"] { margin-bottom: 3px; }

select {
  line-height: 30px;
  width: 12em;
  height: 38px;
  padding: 4px 6px;
}


/* Tooltip text */

.tooltip-info {
    position: relative;
    display: inline-block;
}

.tooltip-info .tooltiptext {
    font-size: 1.5rem;

    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    position: absolute;
    z-index: 1;

    width: 120px;
    bottom: 120%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-info:hover .tooltiptext {
    visibility: visible;
}

/* Speech-Bubble */
.speech-bubble { position: relative; background: black; border-radius: .4em; }
.speech-bubble:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 10px solid transparent; border-top-color: black; border-bottom: 0; margin-left: -10px; margin-bottom: -10px; }


/* Alert */
.alert--no-margin { margin: 0 }
.alert a { color: #000 }

/* Autosuggest */

.react-autosuggest__container {
  position: relative;
  width: 100%;
}

.react-autosuggest__input {
  width: 100%;
  padding: 10px 20px;
  border-radius: 6px;
}

.react-autosuggest__input--focused {
  outline: none;
}

.react-autosuggest__input--open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.react-autosuggest__suggestions-container {
  display: none;
  max-height: 400px;
  overflow: scroll;
}

.react-autosuggest__suggestions-container--open {
  display: block;
  position: absolute;
  top: 51px;
  min-width: 280px;
  border: 1px solid #aaa;
  background-color: #fff;
  font-size: 16px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 2;
}

.react-autosuggest__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.react-autosuggest__suggestion {
  cursor: pointer;
  padding: 10px 20px;
}

.react-autosuggest__suggestion--highlighted {
  background-color: #ddd;
}

.react-autosuggest__section-container {
  border-top: 1px dashed #ccc;
}

.react-autosuggest__section-container--first {
  border-top: 0;
}

.react-autosuggest__section-title {
  padding: 10px 0 0 10px;
  font-size: 12px;
  color: #777;
}