/* Mixin */
.card {
  border-radius: 15px;
}
/* Global Body styles */
body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #f4f2ee;
  line-height: 18px;
}
/* root element styles */
a {
  text-decoration: none;
}
h5 {
  font-weight: bold;
}
/* ---------- Common Useful Styles ----------- */
.card-content {
  font-size: 90%;
}
/* text class for read more functionality */
.text {
  overflow: hidden;
  max-height: 72px;
}
.text p {
  padding: 0;
  margin: 0;
}
.read-more-less {
  cursor: pointer;
}
/* expand text class */
.expand-text {
  max-height: fit-content !important;
  height: fit-content;
}
/* ---------- Error styles ------------ */
.fielderror {
  color: #a94442;
  font-size: 0.8rem;
  margin-top: 3px;
}
.error-div {
  color: #a94442;
}
.error-div input,
.error-div textarea {
  border: 1px solid #a94442 !important;
}
/* ---------- Custom button styling ---------- */
.btn-default {
  border-radius: 22px;
  padding: 6px 15px;
  border-color: #f4d37d;
  border: 1px solid #f4d37d;
  color: #ecb41f;
}
.btn-default:hover {
  background-color: #ffffff;
  border-color: #34302d;
}
.btn-dark {
  background-color: #ffbd0c;
  border-color: #c79511;
  color: #000000;
  border-radius: 22px;
  padding: 6px 15px;
}
.btn-dark:hover {
  background-color: #f2c940;
  border-color: #f2c940;
}
.btn-dark a {
  color: white;
}
.btn-dark .cta-icon {
  color: white !important;
}
/* ---------- Sticky top Navbar Styles ------------- */
.nav-bar {
  background: white;
  padding: 13px 10px;
}
/* ------------- Sticky footer styles ------------- */
.r-sticky-footer {
  width: 100%;
  padding: 4px;
  text-align: center;
  color: #FFFFFF;
  background-color: #34302d;
}
.r-sticky-footer a {
  color: #8bc53e;
}
.r-sticky-footer a span {
  color: white;
}
/* --------------- Banner styles ---------------- */
header {
  height: 300px;
  position: relative;
  padding-top: 50px;
  background-color: #faebc4;
  background-repeat: no-repeat;
  background-image: url("https://reach150-res.cloudinary.com/image/upload/v1/header/gchio9stdcydxjakkzf1?_a=DAGAEuMhZAA0");
  background-position: center center;
  background-size: cover;
  border-bottom: 5px solid #f2cc66;
}
header .r-pp-logo {
  width: 187px;
  height: 80px;
  margin-left: 60px;
  background-image: url("https://reach150-res.cloudinary.com/image/upload/v1/logo/eluklzikf1t5vbkepttu?_a=DAGAEuMhZAA0");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
@media (max-width: 1199px) {
  header .r-pp-logo {
    margin-left: 55px;
  }
}
@media (max-width: 800px) {
  header .r-pp-logo {
    margin-left: 50%;
    transform: translate(-50%, 0);
  }
}
@media (max-width: 768px) {
  header .r-pp-logo {
    width: 112px;
    height: 48px;
  }
}
@media (max-width: 1199px) {
  header {
    height: 200px;
    padding-top: 30px;
  }
}
@media (max-width: 800px) {
  header {
    height: 100px;
    padding-top: 15px;
  }
}
@media (max-width: 576px) {
  header {
    height: 80px;
  }
}
.profile-pic {
  position: absolute;
  height: 200px;
  width: 200px;
  top: 210px;
  left: 65px;
  border-radius: 150px;
  border: 8px solid #ecb41f;
}
@media (max-width: 1199px) {
  .profile-pic {
    height: 170px;
    width: 170px;
    top: 140px;
  }
}
@media (max-width: 800px) {
  .profile-pic {
    left: 50%;
    top: 85%;
    transform: translate(-50%, -30%);
  }
}
@media (max-width: 768px) {
  .profile-pic {
    width: 100px;
    height: 100px;
    top: 90%;
    border: 4px solid #ecb41f;
  }
}
@media (max-width: 576px) {
  .profile-pic {
    top: 110%;
    border: 4px solid #ecb41f;
  }
}
/* profile info - name, recommendation count */
.info {
  margin-left: 270px;
}
.info .view-profile a i {
  font-size: 2rem;
  padding: 10px 10px;
  cursor: pointer;
}
@media (max-width: 800px) {
  .info .name {
    margin-bottom: 1rem;
  }
}
.info .name h1 {
  font-weight: bold;
}
.info .name span {
  font-size: 1rem;
  color: #ecb41f;
  font-weight: 600;
}
@media (max-width: 800px) {
  .info .info-row {
    flex-direction: column !important;
    margin-top: 5rem;
  }
}
@media (max-width: 768px) {
  .info .info-row {
    margin-top: 2.5rem;
  }
}
@media (max-width: 576px) {
  .info .info-row {
    margin-top: 3.5rem;
  }
}
@media (max-width: 1199px) {
  .info {
    margin-left: 240px;
  }
}
@media (max-width: 800px) {
  .info {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
  }
}
.bio-small {
  font-size: 90%;
}
.about-btns a {
  border-color: #f4d37d;
  padding: 5px 10px;
  border-radius: 22px;
  font-size: 0.9rem;
}
@media (max-width: 768px) {
  .about-btns a {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 400px) {
  .about-btns a {
    font-size: 0.7rem;
  }
}
@media screen and (max-width: 361px) {
  .about-btns a {
    font-size: 0.6rem;
  }
}
/* ----------- About Card --------- */
.r-title {
  display: block;
}
.about-share-icons {
  margin-top: -10px;
}
.abt-menu-btn a {
  font-size: 10px;
}
.abt-menu-btn {
  padding: 4px;
  margin: 4px;
}
.abt-menu-btn:hover {
  background-color: #ffffff;
}
.about-cta-btns .dropdown-menu li a {
  font-size: 12px;
}
.about-cta-btns .dropdown-menu .sub-dropdown li {
  padding: 5px 0px;
}
.about-cta-btns .dropdown-menu .sub-dropdown li:hover {
  background: #f4f2ee;
}
.menu-toggle-icon {
  color: #ecb41f;
  padding: 10px 13px;
  font-size: 22px;
  cursor: pointer;
}
/* main content container */
.main {
  margin: 0.5rem 1rem;
}
.rating {
  margin-top: 10px;
}
.rating span {
  font-size: 25px;
  margin-left: -5px;
}
.rating[data-star-rating] .rating-star {
  color: #d8d8d8;
}
.rating[data-star-rating="1"] .rating-star:nth-child(-n+1) {
  color: #ffd055;
}
.rating[data-star-rating="2"] .rating-star:nth-child(-n+2) {
  color: #ffd055;
}
.rating[data-star-rating="3"] .rating-star:nth-child(-n+3) {
  color: #ffd055;
}
.rating[data-star-rating="4"] .rating-star:nth-child(-n+4) {
  color: #ffd055;
}
.rating[data-star-rating="5"] .rating-star:nth-child(-n+5) {
  color: #ffd055;
}
img.reco-pfp {
  display: none;
}
.reco-pfp {
  border-radius: 40px;
  height: 75px;
  width: 75px;
  border: 2px solid gray;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.recommendations .initials {
  height: 75px;
  width: 75px;
  color: white;
  background-color: #f0c44e;
  border-radius: 40px;
  border: 2px solid gray;
  font-weight: bold;
  font-size: 1.5rem;
}
.recommendations .nav .nav-item {
  margin-right: 5px;
}
.recommendations .reco-row {
  margin-left: 10px;
  margin-right: 10px;
}
.recommendations .reco {
  box-shadow: #64646f33 0px 7px 29px 0px;
  border: none;
  border-radius: 15px;
  padding: 1rem;
}
.recommendations .reco h6 {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.recommendations .reco small {
  font-weight: lighter;
  font-size: 12px;
  color: gray;
}
.recommendations .reco-body {
  text-align: justify;
}
.recommendations .share-reco i {
  font-size: 20px;
}
.recommendations .share-reco i:hover {
  cursor: pointer;
}
.datetime {
  font-size: 0.7rem;
  font-weight: normal;
  color: gray;
}
.profession {
  font-weight: 600;
  color: gray;
  font-size: 0.8rem;
}
/* ---------- Accordion - Our Team and Associations -------------- */
.team-member {
  font-size: 0.8rem;
}
.team-member img {
  border: 2px solid #8080804d;
  width: 60px;
  height: 60px;
  border-radius: 50px;
}
.team-member .member-info {
  font-weight: normal;
}
.team-member .member-info span {
  color: gray;
  font-weight: normal;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
}
.team-member .member-info h6 {
  padding: 0;
  margin: 0;
}
.team-member .member-info h6 a {
  font-size: 0.9rem;
}
/* Associations font size */
.associations a {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
/* Accordion Overrides */
.accordion-button:focus,
.accordion-button:active {
  outline: none;
  box-shadow: none;
  border: none;
}
.accordion-button-icon:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
.accordion-card .accordion-button,
.accordion-card .accordion-item,
.accordion-card .accordion-header {
  border-radius: 14px !important;
  border: none;
}
.accordion {
  padding: 0;
}
/* ----------- Back to Top ---------- */
#back-to-top {
  position: fixed;
  display: none;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  border-radius: 25px;
  background-color: #ffbd0c;
  padding: 10px;
  box-shadow: #00000059 0px 5px 15px;
  font-size: 18px;
  transition: 0.5s all;
}
#back-to-top i {
  font-size: 25px;
}
/* ------ Social Icon Colors -------- */
.facebook-color {
  color: #1877f2;
}
.linkedin-color {
  color: #0a66c2;
}
.twitter-color {
  color: #14171a;
}
.mail-color {
  color: #db4437;
}
.shareIcons i {
  font-size: 22px;
  padding: 10px 10px;
  cursor: pointer;
}
.pin {
  color: #234067;
}
.cta-icon {
  font-size: 0.8rem;
  color: #ecb41f;
  padding-right: 5px;
}
.dropdown-share-icons {
  width: 50px;
}
.dropdown-share-icons a {
  border: none;
  margin-bottom: 0;
  padding: 5px 0px 5px 10px;
  border-radius: 0px;
}
.dropdown-share-icons li i {
  font-size: 20px;
}
.dropdown-share-icons li a:hover {
  border: none;
}
/* ---------- Nested Dropdown ------------ */
.sub-dropdown {
  display: none;
  list-style-type: none;
}
.sub-dropdown-toggle .dropdown-item:focus,
.sub-dropdown-toggle .dropdown-item:active {
  background: white;
  color: black;
  outline: none !important;
}
.sub-dropdown-toggle i {
  font-size: 12px !important;
}
/* --------- Modal Styles ----------- */
.btn-close {
  font-size: 10px !important;
}
.modal-pic {
  width: 50px;
  height: 50px;
  border-radius: 60px;
  margin-right: 10px;
  /* TODO: Custom Color */
  border: 2px solid gray;
}
.modal-header {
  border-bottom: 1px solid #f8e3ac;
}
.modal-header h1 {
  font-size: 1.2rem;
  color: #ecb41f;
}
.modal-form label {
  font-weight: bold;
  font-size: 0.9rem;
}
.modal-form .form-control {
  font-size: 0.9rem !important;
}
.modal-form p {
  font-size: 0.9rem;
}
.modal-form i {
  color: #c2c2c2;
}
.modal-body button {
  padding: 5px 10px;
  font-size: 0.9rem;
}
.modal-footer {
  border-top: 1px solid #f8e3ac;
}
.modal-footer button {
  padding: 5px 10px;
  font-size: 0.9rem;
}
.modal-reco-footer {
  width: 100%;
}
.r-modal {
  background-color: white;
}
.r-modal .modal-header,
.r-modal .modal-body,
.r-modal .modal-footer {
  padding: 15px;
}
.r-modal .modal-footer button {
  margin-left: 5px;
}
.note {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 0.6rem;
}
textarea {
  border: 1px solid #b0b0b0 !important;
}
textarea:focus {
  box-shadow: none !important;
  border: 1px solid black !important;
  outline: none !important;
}
input {
  border: 1px solid #b0b0b0 !important;
}
input:focus {
  box-shadow: none !important;
  border: 1px solid black !important;
  outline: none !important;
}
.custom-tooltip {
  font-size: 0.8rem;
  line-height: 1rem;
}
/* input rating */
.reco-stars {
  float: left;
  display: block;
}
.reco-stars input {
  display: none;
}
.reco-stars input:checked label,
.reco-stars input:checked ~ label {
  color: #ffd055 !important;
}
.reco-stars input:hover label,
.reco-stars input:hover ~ label {
  color: #ffd055 !important;
}
.reco-stars label {
  font-size: 25px;
  margin-right: 1px;
  color: #dcd9d9;
  position: relative;
  float: right;
}
/* featured reco styles */
.author-info .author-name {
  padding-bottom: 2px;
  font-size: 1.2rem;
}
.featured-caption {
  font-size: 90%;
  color: #706e6e;
  display: block;
  text-align: center;
  margin-top: 10px;
}
.img-wrapper {
  max-width: 100%;
  height: auto;
  display: block;
}
.f-img-reco {
  width: fit-content;
}
.share-reco-div {
  padding-bottom: 1rem;
  padding-right: 1rem;
}
/* ------------ Recommend staff styles -------------- */
.choose-staff {
  margin-bottom: 1rem;
}
.choose-staff:hover {
  cursor: pointer;
}
.choose-staff:hover img {
  transition: border 0.5s ease;
  border: 4px solid #f4d37d;
}
.choose-staff h3 {
  font-size: 1.1rem;
  margin: 0;
}
.choose-staff p {
  font-size: 0.9rem;
  margin: 0 0 0 10px;
}
.choose-staff img {
  width: 60px;
  height: 60px;
  border: 4px solid #cccccc;
  border-radius: 40px;
}
.confirm-icon {
  margin-bottom: 30px;
}
.confirm-icon i {
  font-size: 4em;
  color: #8bc53e;
}