body {
  font-family: century-gothic, sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #f0f0f0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-style: normal;
  color: #f8981d;
  font-weight: bold;
}

.fs-gothic {
  font-family: century-gothic, sans-serif;
}
.btn{
  text-transform: capitalize !important;
}
.fs-play {
  font-family: 'Playfair Display', serif;
}

h1 {
  font-size: 4rem;
}

p, .p, label {
  color: #5e5e5e;
  font-size: 1.25rem;
}

.bg-dark {
  background-color: #5e5e5e;
}

.bg-l-grey {
  background-color: #f0f0f0;
}

.bg-orange {
  background-color: #f8981d;
}

.bg-blue {
  background-color: #00a0c6;
}

.orange-text {
  color: #f8981d;
}

.dark-text {
  color: #5e5e5e;
}

.fw-bold {
  font-weight: 700;
}

.fw-light {
  font-weight: 400;
}

.nav-btn:focus, .nav-btn:hover {
  opacity: 0.75;
}

#exportPDF {
  background-color: white !important;
}

.personaInfoSection {
  background-color: #f0f0f0;
  padding: 1rem 1.5rem;
}

.personaInfoSection h3, .personaInfoSection h5 {
  color: #5e5e5e;
  font-family: century-gothic, sans-serif;
  font-weight: bold;
}
.personaInfoSection h3{
  
  font-size: 1.5rem;
}

.personaInfoSection .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  
}

.personaInfoSection .header img {
  margin-right: 1rem;
}

.personaInfoSection .body {
  margin-top: 1rem;
}

.personaInfoSection .media-body h3, .personaInfoSection .media-body h5 {
  color: #f8981d;
  font-family: 'Playfair Display', serif;
  font-weight: bold;
}

.editme {
  white-space: pre-line;
}

.personaInfoSection {
  position: relative;
}

.share-persona .personaInfoSection:after {
  content: "";
}

.changeImageBtn {
  display: none;
}

.editable .changeImageBtn {
  display: block;
}

.editable .personaInfoSection:after {
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  content: '\f044';
  top: 20px;
  right: 20px;
  color: #f8981d;
  font-size: 20px;
  font-weight: 800;
}

.editme.no-symbol:after {
  content: unset;
}

.prepareForExport .editme {
  border-bottom: unset !important;
}

.prepareForExport .editme:after {
  content: unset !important;
}

.bar-slider {
  border-radius: 0px !important;
}

.form-control {
  height: 60px;
  border-radius: 15px;
}

.personaQuestion.form-control {
  height: unset;
  border: none;
  border-radius: 0px;
  border-bottom: 1px solid #5e5e5e;
  padding-right: 5px;
  padding-left: 5px;
}
.q1.invalid, .q2.invalid{
  color: red !important;
}

.orange-btn {
  font-size: 1.75rem;
  font-weight: bold;
  padding: 0.5rem 3rem;
  background-color: #f8981d;
  border: none;
  border-radius: unset;
}

.main-btn {
  font-size: 1.1rem;
  background: none;
  border: none;
  border-bottom: 1px solid #f8981d;
  padding: 0;
  border-radius: unset;
}

.main-btn:hover, .main-btn:focus {
  font-size: 1.1rem;
  background: none;
  border: none;
  border-bottom: 1px solid #f8981d;
  padding: 0;
  font-weight: bold;
}

.dark-text.main-btn:hover, .dark-text.main-btn:focus {
  color: #5e5e5e;
}

.naked-btn, .naked-btn:focus, .naked-btn:hover {
  background: none;
  border: none;
  padding: 0;
}

.naked-btn i {
  font-weight: 400;
}

.naked-btn:hover i {
  font-weight: bold;
}

#modal-changepic button {
  background-color: #00a0c6;
  border: none;
  font-size: 1.25rem;
}

#modal-changepic button.close {
  background-color: transparent;
  color: #5e5e5e;
  font-size: 2rem;
}

#modal-startpersona .modal-header {
  background-color: #f8981d;
}

#modal-startpersona .modal-header h5 {
  color: white;
  font-size: 2rem;
}

#modal-startpersona button {
  background-color: #00a0c6;
  border: none;
  font-size: 1.25rem;
}

#modal-startpersona button.close {
  background-color: transparent;
  color: white;
  font-size: 2rem;
}

.modal-content {
  border-radius: 20px;
  border: none;
  overflow: hidden;
}

.modal-content header, .modal-content .modal-body, .modal-content footer {
  padding-left: 2rem;
  padding-right: 2rem;
}

.personaQuestions .custom-radio {
  margin-bottom: 0;
}

.personaQuestions .custom-radio p {
  margin-bottom: 0.5rem;
}

.custom-radio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.custom-radio:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.custom-radio input:checked ~ .checkmark {
  background-color: white;
  border: 2px solid #f8981d;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.custom-radio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.custom-radio .checkmark:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #f8981d;
}

.avatar-radio {
  margin-top: 2rem;
}

.avatar-radio p {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.avatar-radio [type=radio] {
  opacity: 0;
  width: 0;
  height: 0;
}

.avatar-radio img {
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

.avatar-radio img:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.avatar-radio [type=radio] + img {
  cursor: pointer;
  width: 145px;
  margin-left: 10px;
  margin-right: 10px;
}

.avatar-radio [type=radio]:checked + img {
  outline: 4px solid #f8981d;
  border-radius: 50%;
  -webkit-transition: 0s;
  transition: 0s;
}

.sliderContainer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto 84px;
}

.vue-slider-process {
  background-color: #f8981d !important;
}

.vue-slider-dot-tooltip-inner {
  border-color: #f8981d !important;
  background-color: #f8981d !important;
}

.slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  /* Full-width */
  height: 3px;
  /* Specified height */
  background: #f8981d;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s;
  /* 0.2 seconds transition on hover */
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  border-radius: 50%;
  background: #f8981d;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

.range-slider-tooltip {
  position: absolute;
  bottom: -51px;
  margin: 0;
  padding: 2px 16px;
  background: #122C35;
  border-radius: 5px;
  color: white;
  font-size: 2rem;
  font-weight: 600;
}

.range-slider-tooltip:before {
  content: '';
  display: block;
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 16px 16px 16px;
  border-color: transparent transparent #122C35 transparent;
}

.card {
  border-radius: 25px;
}

.progress-bulb {
  margin: 1rem 0.3rem;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  border: 2px solid #f8981d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.progress-bulb .bulb-on {
  width: 14px;
  height: 14px;
  background-color: #f8981d;
  border-radius: 50%;
}
.edit-persona-textarea{
  background: transparent;
  border: none;
  overflow: auto !important;
  //color: #5e5e5e;
  font-size: 1.25rem;
}
/*# sourceMappingURL=styles.css.map */