html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.required-color {
  color: #dc3545;
}

.mt-8 {
  margin-top: 8rem !important
}

.bgc-blue {
  background-color: #0C9DC4;
}

.color-blue {
  color: #0C9DC4;
}

.bgc-greend {
  background-color: #3FA835;
}

.color-greend {
  color: #3FA835;
}

.bgc-red {
  background-color: #EB5C1C;
}

.color-red {
  color: #EB5C1C;
}

.bgc-orange {
  background-color: #F3920D;
}

.color-orange {
  color: #F3920D;
}

.color-grey {
  color: #5b5c5a;
}

a.color-grey:hover {
  color: #F3920D;
}

.btn-primary {
  background-color: #5b5c5a;
  color: #fff;
  border-color: #5b5c5a;
}

.btn-primary:hover {
  color: #fff;
  background-color: #F3920D;
  border-color: #F3920D;
}

.home-template footer {
  background-color: #0C9DC4;
}

.search-template footer {
  background-color: #3FA835;
}

.predictor-template footer {
  background-color: #EB5C1C;
}

.generator-template footer {
  background-color: #F3920D;
}


/** float container */
.float-container {
  border: solid 1px #ccc;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 0 8px;
  position: relative;
}

.float-container input {
  border: none;
  font-size: 16px;
  outline: 0;
  padding: 16px 0 10px;
  width: 100%;
}

.float-container label {
  font-size: 13px;
  position: absolute;
  top: -10px;
  left: 10px;
  background: white;
  padding-left: 5px;
  padding-right: 5px;
}

.check-helices {
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.select-momento {
  position: relative;
  top: -25%;
}

.info-pepgen {
  font-size: x-large;
  position: relative;
  bottom: 4px;
  cursor: pointer;
}