/* * Credits to pomdre who created a custom FAQ drop down
 * This is a modified version of pomdre's FAQ implementation */

.faqelement {
  margin: auto;
  float: initial;
  padding: 0.5em 0;
}

.faqelement p {
  opacity: 0.8;
}

.faq {
  background-color: #cbcbcb;
  color: #414141;
  border-radius: 0.5rem 0.5rem 0 0;
  cursor: pointer;
  padding: 18px;
  padding-right: 40px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1rem;
  transition: 0.25s;
  position: relative;
}

.faq h5 {
  margin-bottom: 0;
}

.faq::after {
  content: '\2212';
  color: #777;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 20px;
  height: 100%;
  display: flex;
  align-items: center;
}

.on:after {
  content: '\002B';
}

.faq:hover {
  color: rgb(47,47,47);
  background-color: #bcbcbc;
}

.answer {
  font-size: 1rem;
  padding: 0 18px;
  background-color: white;
  color: #414141;
  max-height: 0;
  overflow: hidden;
  transition: padding 0.2s ease-out;
  border-radius: 0 0 0.5rem 0.5rem;
}

.answer-visible {
  padding: 10px 18px;
  max-height: initial;
  transition: all 0.2s ease-out;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #e4e4e4;
  border-color: #e4e4e4;
}