/* Faq page */
:root {
  --theme-color: #a6597a;
  --click-color: #a6597a;
  --hover-color: #a6597a;
  --border-color: black;
}
.faqcontainer {
  height: auto;
  overflow: hidden;
  width: 81vw;
  margin: auto;
  padding-bottom: 8px !important;
}

.faq-header {
  background-color: #765782;
  padding-bottom: 8px;
}

.grid-container {
  display: grid;
  grid-template-areas: 'm t t t t t ';
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}
@media (max-width: 1100px) {
  .faqcontainer {
    width: 90vw;
  }
}

@media (max-width: 415px) {
  .faqcontainer {
    width: 87.5vw;
  }
}
@media (max-width: 376px) {
  .faqcontainer {
    width: 87vw !important;
  }
}
@media (max-width: 321px) {
  .faqcontainer {
    width: 85vw !important;
  }
}




@media (max-width: 500px) {
  .faqcontainer {
    width: 87.5vw;
  }
  .grid-container {
    display: grid;
    grid-template-areas:
      'm'
      't';
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
  }

  @media (max-width: 1100px) {
    .faqcontainer {
      position: relative;
      left: -2%;
    }
  }
  .question-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .question_nav {
    border: 1px solid #fff !important;
    border-radius: 50%;
    cursor: pointer;
    padding: 5px !important;
    margin: 0px 5px;
  }
}

.question-menu {
  grid-area: m;
  margin: auto 0px;
}

@media (max-width: 500px) {
  .question-menu {
    margin-top: 20px;
  }
}

.content-container {
  grid-area: t;
  /* position: relative; */
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.question_nav {
  border: 1px solid #fff;
  cursor: pointer;
  /* margin-right: 60%; */
  padding: 14px 0px;
  margin-left: 2px;
  overflow-y: hidden;
  text-align: center;
  /* float:left; */
}
.question_nav:hover {
  background-color: var(--hover-color);
}

.faq-aside-div {
  padding: 0;
}

.faq-aside-div-child {
  /* position: absolute; */
  /* bottom: 0; */
  /* width: 40%; */
  /* float: left; */
  padding: 0px 0px;
  border: 1px solid var(--border-color);
  display: flex;
}
.textbox {
  margin-top: auto;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0px 0px;
  /* display: flex; */
}

#faq-text {
  padding: 10px;
  border: none;
}

.text-box-left {
  margin-top: 10px;
  margin-bottom: 10px;
}

.text-box-child {
  background-color: #a6597a;
  width: 90%;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  border-radius: 20px;
  margin-right: 5px;
  cursor: text;
}
.text-box-submit {
  background-color: #a6597a;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 16px;
  border-radius: 50%;
  cursor: pointer;
}

.question-box {
  background: radial-gradient(
    100% 70% at 0% 0%,
    rgba(255, 255, 255, 0.425) 0%,
    rgba(255, 255, 255, 0.103) 80%
  );
  background-color: #a6597a;
  position: relative;
  width: 65%;
  padding: 20px;
  border-radius: 40px;
  border-color: none;
  /* max-width: 60%; */
  margin-top: 20px;
  margin-left: auto;
  margin-right: 30px;
  /* min-height: 100px; */
}
/* .greencontain1{
  position: relative;
  border-radius: .4em;
  background-color: #B5CF61;
  height: auto;
  padding:20px;
  color: white;
} */

.question-box:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: #aa6a88;
  border-right: 0;
  margin-top: -10px;
  margin-right: -8px;
}

.answer-box {
  background: radial-gradient(
    100% 70% at 0% 0%,
    rgba(255, 255, 255, 0.425) 0%,
    rgba(255, 255, 255, 0.103) 80%
  );
  background-color: #a6597a;
  position: relative;
  width: 65%;
  /* max-width: 60%; */
  margin-top: 10px;
  margin-right: auto;
  margin-left: 30px;
  margin-bottom: 10px;
  padding-left: 20px;
  padding: 20px;
  border-radius: 40px;
  /* min-height: 130px; */
}
.answer-box:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right-color: #ae708d;
  border-left: 0;
  margin-top: -10px;
  margin-left: -8px;
}
@media (max-width: 500px) {
  .content-container {
    margin-left: 10px;
  }

  .question_nav {
    margin-bottom: 2px;
  }

  .question-box {
    width: 80%;
    margin-right: 10px;
    padding: 10px 20px;
    border-radius: 20px;
  }
  .answer-box {
    width: 80%;
    padding: 10px 20px;
    margin-left: 0px;
    border-radius: 20px;
  }
}
@media (max-width: 500px) {
  .question-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-left: 50px;
    margin-right: 50px;
  }
}
@media (max-width: 400px) {
  .question-menu {
    margin-left: 40px;
    margin-right: 40px;
  }
}
@media (max-width: 340px) {
  .question-menu {
    margin-left: 20px;
    margin-right: 20px;
  }
}
.colorClass {
  background-color: var(--click-color);
}