@charset "UTF-8";
/*HAPMENTOR STRUCTURE*/
/*HAPMENTOR Shared project*/
/*Components*/
/*@use'components/cards.scss';*/ /* Cards style components */
/*Pages*/
#homepage {
  /*Banner landing*/
  /*learn/ earn/ teach section*/
  /*For mentors/ students*/
  /*Hap and Learn*/
  /*------Would you like to become a member*/
}
#homepage p {
  font-size: 1.2rem !important;
}
#homepage h1 {
  font-size: 2.4rem !important;
}
#homepage .banner {
  padding-bottom: 80px !important;
}
#homepage .banner a {
  width: 100px !important;
}
#homepage .banner h1 {
  font-size: 3.4rem !important;
}
#homepage .learn {
  margin-top: 55px !important;
  padding-bottom: 0 !important;
}
@media only screen and (max-width: 1060px) {
  #homepage .learndiv {
    display: none !important;
  }
  #homepage .learndiv2 {
    padding: 0;
    width: 100% !important;
    height: 100%;
  }
}
#homepage .learndiv {
  width: 35%;
}
#homepage .learndiv2 {
  padding: 0 0 0 2.5vw;
  width: 55%;
}
#homepage .learndiv2 h1 {
  padding: 0 !important;
}
#homepage .formentors {
  margin: 0 -10vw !important;
  padding: 0px !important;
}
#homepage .formentors p {
  text-align: justify;
}
@media only screen and (min-width: 2160px) {
  #homepage .formentors .green-bk {
    margin: 100px 0px !important;
  }
}
#homepage .formentors .for-mobile {
  display: none;
}
@media only screen and (max-width: 1000px) {
  #homepage .formentors .greenbkleft {
    justify-content: right !important;
  }
  #homepage .formentors .for-mobile {
    display: flex;
    text-align: right;
  }
  #homepage .formentors .for-desktop {
    display: none;
  }
}
#homepage .greenbk {
  background-color: var(--HapmentorGreen) !important;
  padding: 5vh 10vw 5vh !important;
}
#homepage .greenbk h1, #homepage .greenbk p {
  color: white !important;
  margin: 0px 30px !important;
}
@media only screen and (max-width: 1400px), (min-width: 1400px) {
  #homepage .reverse {
    flex-direction: row !important;
  }
  #homepage .reverse .row > * {
    flex-shrink: unset;
  }
  #homepage .greenbk h1, #homepage .greenbk p {
    margin: 50px 50px !important;
    padding: 0px 20px !important;
  }
}
@media only screen and (max-width: 1080px) {
  #homepage .reverse {
    flex-direction: column-reverse !important;
    padding-right: 15vw !important;
  }
  #homepage .greenbk {
    display: flex !important;
    justify-content: left !important;
  }
}
@media only screen and (max-width: 1080px) {
  #homepage .reverse {
    align-items: flex-end !important;
  }
  #homepage .reverse h1 {
    text-align: right;
    align-items: flex-end !important;
    justify-content: flex-end;
  }
}
#homepage .haplearn {
  padding: 10vh 10vw 5vh 10vw;
}
#homepage .haplearn a {
  margin: 10px 0px;
  height: 60px !important;
  width: 100px !important;
  align-items: center;
}
#homepage .haplearn p {
  padding: 0px !important;
}
@media only screen and (min-width: 1300px) {
  #homepage .haplearn h1 {
    height: 2vh !important;
  }
}
#homepage .haplearnimg {
  padding: 30px !important;
}
@media only screen and (max-width: 1060px) {
  #homepage .haplearnimg {
    display: none !important;
  }
  #homepage .haplearn {
    width: 100%;
  }
}
#homepage #become-member {
  /*Aqui a div dos cards torna-se num slider*/
}
#homepage #become-member .light-green-bk {
  padding-bottom: 100px;
}
#homepage #become-member .text span a {
  color: var(--HapmentorGreen);
  text-decoration: none;
}
#homepage #become-member .card-div {
  margin: 0;
}
#homepage #become-member .showcase-card {
  padding: 5px;
  width: 275px;
  height: 350px;
  border: solid var(--HapmentorBlue) 2px;
  background-color: white;
}
#homepage #become-member .showcase-card img, #homepage #become-member .showcase-card h4, #homepage #become-member .showcase-card p {
  max-width: 100%;
  max-height: 150px;
}
#homepage #become-member .showcase-card img {
  margin: 10px 0;
}
#homepage #become-member .showcase-card h4 {
  color: var(--HapmentorBlue);
  margin: 0;
}
#homepage #become-member .showcase-card p {
  font-size: 0.9rem !important;
}
@media only screen and (max-width: 1300px) {
  #homepage #become-member .card-div {
    padding: 5vh 5vw !important;
  }
  #homepage #become-member .showcase-card {
    padding: 3px;
    width: 210px;
    height: 280px;
  }
  #homepage #become-member .showcase-card p {
    font-size: 0.6rem !important;
    margin-bottom: 10px;
  }
  #homepage #become-member .showcase-card h4 {
    font-size: 1rem;
  }
  #homepage #become-member .showcase-card img, #homepage #become-member .showcase-card h4, #homepage #become-member .showcase-card p {
    max-height: 110px;
  }
}
@media only screen and (min-width: 851px) {
  #homepage #become-member #carouselExample {
    display: none !important;
  }
}
@media only screen and (max-width: 850px) {
  #homepage #become-member .card-div {
    display: none !important;
  }
  #homepage #become-member #carouselExample {
    display: flex !important;
    height: 400px;
  }
  #homepage #become-member #carouselExample .carousel-inner .carousel-item {
    margin-right: 0;
    width: 100% !important;
  }
  #homepage #become-member #carouselExample .carousel-control-next, #homepage #become-member #carouselExample .carousel-control-prev {
    opacity: 100% !important;
  }
  #homepage #become-member #carouselExample .carousel-control-next span, #homepage #become-member #carouselExample .carousel-control-prev span {
    color: var(--HapmentorBlue);
  }
}

/*Not authenticated homepage*/
#HAPS {
  /*Banner landing*/
}
#HAPS input {
  margin-right: 20px;
  width: 65%;
  height: 40px;
}
#HAPS p {
  font-size: 1.2rem !important;
}
#HAPS h1 {
  font-size: 2.4rem !important;
}
#HAPS .banner {
  padding-bottom: 80px !important;
  padding-top: 10px !important;
}
#HAPS .banner a {
  width: 100px !important;
}
#HAPS .banner h1 {
  font-size: 3.4rem !important;
}
#HAPS .banner .greenbttn {
  width: 70px !important;
}
#HAPS #course-cat {
  padding-bottom: 0 !important;
  margin: 20px 0;
}
#HAPS #course-cat #mobile-cat {
  display: none !important;
}
@media only screen and (max-width: 760px) {
  #HAPS #course-cat {
    /* styles for dropdown (categories section turns 
       into a dropdown on mobile devices)*/
  }
  #HAPS #course-cat div {
    width: 100%;
  }
  #HAPS #course-cat .tittle {
    min-width: 100%;
  }
  #HAPS #course-cat #mobile-cat {
    display: flex !important;
    width: 100%;
  }
  #HAPS #course-cat #mobile-cat .dropdown .dropdown-menu {
    transform: translate3d(0px, 38px, 0px) !important;
    width: 100% !important;
  }
  #HAPS #course-cat .categories {
    display: none !important;
  }
}
#HAPS #course-cat .tittle {
  max-width: 40%;
}
#HAPS #course-cat .cat-button {
  background-color: white;
  border: solid var(--HapmentorBlue) 2px;
  padding: 5px;
  width: 200px;
  height: 40px;
  margin: 5px;
  color: var(--HapmentorBlue);
  font-weight: 500;
}
#HAPS #course-cat .cat-button:hover {
  background-color: var(--HapmentorBlue);
  color: white;
}
#HAPS #course-cat .cat-button.active {
  background-color: var(--HapmentorBlue);
  color: white;
}
#HAPS .greenbk {
  background-color: var(--HapmentorGreen) !important;
}
#HAPS .find-bk {
  background-color: var(--HapmentorGreen) !important;
}
#HAPS .find-bk .find {
  background-color: transparent;
  color: white;
}
@media only screen and (max-width: 760px) {
  #HAPS .find-bk .find .bluebttn {
    margin: 10px 20px 10px 0 !important;
  }
}
#HAPS .find-bk .find .bluebttn {
  width: 40px;
  height: 40px;
}
#HAPS .input-suggestion {
  position: absolute;
  margin-top: 70px;
  cursor: pointer;
  height: 10px;
}

/*HAPS SEARCH RESULTS PAGE*/
.search-results {
  margin-top: 50px;
  /*Filter sidebar styles*/
}
.search-results .result {
  color: var(--HapmentorGreen);
}
@media only screen and (max-width: 760px) {
  .search-results h3 {
    width: 100% !important;
  }
  .search-results .search-div {
    width: 100% !important;
    margin-top: 20px;
  }
}
.search-results #search-filters {
  z-index: 99;
  margin-right: 20px;
}
.search-results #search-filters .filter-container {
  border: solid 2px var(--HapmentorBlue);
  width: 100%;
  height: fit-content;
  padding: 10px;
  max-width: 145px;
  /*Filter bar dropdown (sort by)*/
}
.search-results #search-filters .filter-container .dropdown a {
  border-top: none;
  border-right: none;
  border-left: none;
  margin: -10px -10px 10px;
  font-size: 0.9rem;
}
.search-results #search-filters .filter-container .dropdown .dropdown-menu {
  width: 100% !important;
  max-width: 145px !important;
  transform: translate3d(-12px, 36px, 0px) !important;
  padding: 0;
}
.search-results #search-filters .filter-container .dropdown .dropdown-menu li a {
  font-size: 0.8rem;
  margin: 0;
}
.search-results #search-filters .filter-container p {
  font-size: 0.8rem !important;
  font-weight: 500;
}
.search-results #search-filters .filter-container .form-check {
  margin-right: 0;
}
.search-results #search-filters .filter-container .form-check .form-check-input {
  margin-right: 7px !important;
}
.search-results #search-filters .filter-container .form-check label {
  font-size: 0.7rem;
}

/*HAPs list page*/
/*************SETTINGS PAGE*************/
@media only screen and (max-width: 600px) {
  .settings-page-1 {
    height: 1800px !important;
  }
  #settings-page {
    display: unset !important;
    background-color: transparent;
  }
  .settings-body {
    padding: 5vh 5vw 5vh !important;
  }
}
.settings-page-1 {
  position: static;
  height: 1600px; /*This thing is for put footer in the right place*/
}

#settings-page {
  display: flex;
  position: absolute;
  /*Main body of the settings*/
  /*media queries*/
  /*overlay image*/
}
#settings-page h1 {
  padding-top: 0;
}
#settings-page .side-settings {
  margin-right: 20px !important;
  height: fit-content;
  position: sticky;
  top: 5vh;
}
#settings-page .menu-settings {
  flex-wrap: wrap;
}
#settings-page .menu-settings li {
  border-bottom: solid 1px var(--HapmentorBlue) !important;
  padding-left: 0;
  display: flex;
  align-items: baseline;
  max-width: 200px;
}
#settings-page .menu-settings li a {
  margin-top: 10px;
  text-decoration: none;
}
#settings-page a, #settings-page p {
  padding-left: 0 !important;
  color: var(--HapmentorBlue) !important;
}
#settings-page h1 {
  padding-bottom: 10px;
}
#settings-page p {
  font-weight: 500;
}
#settings-page .avatar {
  width: 70px !important;
  height: 70px !important;
  border: solid var(--HapmentorBlack) 1px;
  padding: 0;
}
#settings-page .nop {
  padding-left: 0 !important;
}
#settings-page .settings-body .sec {
  margin-bottom: 20px;
  /*dropdown menu styles*/
}
#settings-page .settings-body .sec .editor-container {
  margin-bottom: 20px;
}
#settings-page .settings-body .sec input, #settings-page .settings-body .sec textarea {
  margin-bottom: 15px;
  font-size: 0.7rem;
  height: 4vh;
  font-size: 1rem;
}
#settings-page .settings-body .sec #my-editor, #settings-page .settings-body .sec #descri {
  height: 15vh;
  border-radius: 0 !important;
  border: solid 2px var(--HapmentorBlue) !important;
}
#settings-page .settings-body .sec .btn-group {
  max-width: 400px;
  margin-bottom: 15px;
}
#settings-page .settings-body .sec .btn-group label {
  border: solid 2px var(--HapmentorBlue) !important;
  background-color: white !important;
  color: var(--HapmentorBlue) !important;
}
#settings-page .settings-body .sec .btn-group .btn-check:checked + .btn-outline-primary {
  background-color: var(--HapmentorBlue) !important;
  color: white !important;
}
#settings-page .settings-body .sec .input-group {
  padding-right: 0;
}
#settings-page .settings-body .sec .input-group span {
  width: 100px;
  border-radius: 0 !important;
  background-color: var(--HapmentorBlue) !important;
  color: white !important;
  height: 4vh;
  border: solid 2px var(--HapmentorBlue) !important;
  display: flex;
  justify-content: center;
  max-height: 40px;
}
#settings-page .settings-body .sec .dropdown {
  width: 200px;
}
#settings-page .settings-body .sec .dropdown ::after {
  display: none;
}
#settings-page .settings-body .sec .dropdown .btn {
  background: white !important;
  border: solid 2px var(--HapmentorBlue);
  color: var(--HapmentorBlue) !important;
  font-size: 1rem;
  justify-content: flex-start;
  width: 200px;
}
#settings-page .settings-body .sec .dropdown .btn-check:checked + .btn, #settings-page .settings-body .sec .dropdown :not(.btn-check) + .btn:active, #settings-page .settings-body .sec .dropdown .btn:first-child:active, #settings-page .settings-body .sec .dropdown .btn.active, #settings-page .settings-body .sec .dropdown .btn.show {
  background-color: transparent !important;
}
#settings-page .settings-body .sec .dropdown span {
  padding-left: 20px;
}
#settings-page .settings-body .sec .dropdown-menu {
  min-width: 200px;
  background: white;
  border: solid 2px var(--HapmentorBlue);
  color: var(--HapmentorBlue);
  transform: translate(0px, 48px) !important;
  max-width: fit-content;
  max-height: 500px;
  overflow: scroll;
}
#settings-page .settings-body .sec .dropdown-menu .dropdown-item {
  padding: 0.25rem 12px !important;
}
#settings-page .settings-body .sec .dropdown-menu .dropdown-item:hover, #settings-page .settings-body .sec .dropdown-menu .dropdown-item:focus {
  color: #fff !important;
  background-color: var(--HapmentorBlue);
}
#settings-page .settings-body .sec .dropdown-menu .dropdown-item.active, #settings-page .settings-body .sec .dropdown-menu .dropdown-item:active {
  color: #fff !important;
  text-decoration: none;
  background-color: var(--HapmentorGreen) !important;
}
#settings-page .settings-body input {
  border-radius: 0;
  border: solid 2px var(--HapmentorBlue);
  max-height: 40px;
  font-size: 1rem;
}
#settings-page .settings-body input:focus {
  border: solid 2px var(--HapmentorGreen);
  box-shadow: none;
}
#settings-page .settings-body sub, #settings-page .settings-body .sub {
  font-size: 0.6rem !important;
  font-weight: 300 !important;
  margin-bottom: 15px;
  color: var(--HapmentorBlue);
}
#settings-page .settings-body img {
  margin-bottom: 10px;
}
#settings-page .settings-body .cover {
  min-width: 300px;
  max-width: 825px;
  height: 150px;
  object-fit: cover;
  border: solid var(--HapmentorBlack) 1px;
  padding: 0;
}
#settings-page .settings-body .btn, #settings-page .settings-body btn-primary {
  color: white !important;
  background-color: var(--HapmentorBlue) !important;
  width: 150px;
  height: 50px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#settings-page .settings-body .avatar {
  width: 150px !important;
  height: 150px !important;
}
@media only screen and (max-width: 600px) {
  #settings-page .side-settings {
    display: none !important;
  }
}
#settings-page .profile-overlay {
  position: relative !important;
  width: 150px;
  height: 150px;
  margin: 0 20px 20px 0 !important;
}
#settings-page .profile-overlay, #settings-page .profile-cover {
  position: relative !important;
  height: 150px;
}
#settings-page .profile-overlay .image, #settings-page .profile-cover .image {
  opacity: 1;
  display: block;
  width: 100% !important;
  height: auto !important;
  transition: 0.5s ease;
  overflow: hidden;
}
#settings-page .profile-overlay .middle, #settings-page .profile-cover .middle {
  width: 100%;
  height: 100%;
  transition: 0.5s ease !important;
  background-color: var(--HapmentorGreen);
  opacity: 0 !important;
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}
#settings-page .profile-overlay a, #settings-page .profile-cover a {
  color: white !important;
  font-size: 16px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
#settings-page .profile-overlay:hover .image, #settings-page .profile-cover:hover .image {
  opacity: 0.3 !important;
}
#settings-page .profile-overlay:hover .middle, #settings-page .profile-cover:hover .middle {
  opacity: 1 !important;
}

@media only screen and (max-width: 600px) {
  #settings-page .profile-overlay .middle, #settings-page .profile-cover .middle {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.4);
  }
}
/*HAPs list page*/
/*Resume course page (nome temporário)*/
#resume-learning {
  /*Botão fixed para abrir o modal com o content*/
}
#resume-learning .breadcrumb {
  margin: 30px 0;
}
#resume-learning .controls .desktop-button {
  width: 160px;
}
#resume-learning .open-content {
  background-color: transparent;
  position: fixed;
  right: -45px !important;
  z-index: 99;
  top: 25vh;
  transition: transform 750ms;
  will-change: transform;
}
#resume-learning .open-content:hover {
  transform: translateX(-60px);
}
#resume-learning .open-content:active {
  background-color: transparent !important;
}

/*Conteúdo do modal de full focus mode (provisório)*/
#focus-modal {
  height: 100vh !important;
  padding: 30px;
}
#focus-modal .focus-lesson-content {
  /*Div com o container com o conteúdo da lesson)*/
  border: dashed 2px grey;
}
#focus-modal .focus-controls {
  margin-top: 30px;
  max-width: 40vw;
  height: 60px;
}
#focus-modal .focus-controls img {
  width: 40px;
  height: 40px;
}
@media only screen and (max-width: 768px) {
  #focus-modal .focus-controls {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media only screen and (min-width: 2160px) {
  #focus-modal .focus-controls {
    max-width: 25vw !important;
  }
}

/*Por enquanto é só isto, mas penso que ao adicionar o conteúdo da lição,
a página ficará mais complexa e com mais css, consequentemente, 
por isso já criei esta nova folha em vez de apenas deixar o código na app.css*/
/*Resume HAP page*/
/*Teach at Hapmentor page extra styles*/
#hapmentor-teach {
  /*Cards*/
  /*Aqui a div dos cards torna-se num slider*/
  /*Count on AI tools*/
  /*Plans div*/
  /*Develop and manage div*/
  /*Start now div*/
}
#hapmentor-teach .main-banner h1 {
  padding: 0 !important;
}
#hapmentor-teach .main-banner h1 span {
  padding-left: 0;
  width: auto;
}
#hapmentor-teach .main-banner button {
  padding: 15px;
  width: 30%;
  max-width: 200px;
}
#hapmentor-teach .main-banner .landing-faq {
  margin-top: 50px;
  font-size: 1rem;
  color: white;
}
#hapmentor-teach .main-banner .landing-faq span a {
  color: var(--HapmentorGreen);
  text-decoration: none;
}
#hapmentor-teach .main-banner img {
  margin: 50px 0 50px 50px;
  padding: 20px;
  max-width: 500px;
}
@media only screen and (max-width: 850px) {
  #hapmentor-teach .main-banner img {
    display: none !important;
  }
}
#hapmentor-teach .develop h1 span {
  color: var(--HapmentorGreen);
}
#hapmentor-teach .develop .develop-ex {
  width: 30% !important;
  font-size: 2.7rem;
  font-weight: 600;
  color: var(--HapmentorBlue);
}
#hapmentor-teach .develop .develop-ex span {
  font-size: 3.7rem;
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
  #hapmentor-teach .develop h1 {
    font-size: 2rem !important;
  }
  #hapmentor-teach .develop .develop-ex {
    width: 100% !important;
    font-size: 2rem;
  }
  #hapmentor-teach .develop .develop-ex span {
    font-size: 2.5rem;
  }
}
#hapmentor-teach .card-div {
  margin: 0 5vw;
}
#hapmentor-teach .showcase-card {
  padding: 5px;
  width: 275px;
  height: 350px;
  border: solid var(--HapmentorBlue) 2px;
  background-color: white;
}
#hapmentor-teach .showcase-card img, #hapmentor-teach .showcase-card h4, #hapmentor-teach .showcase-card p {
  max-width: 100%;
  max-height: 150px;
}
#hapmentor-teach .showcase-card img {
  margin: 10px 0;
}
#hapmentor-teach .showcase-card h4 {
  color: var(--HapmentorBlue);
  margin: 0;
}
#hapmentor-teach .showcase-card p {
  font-size: 1rem;
}
@media only screen and (max-width: 1300px) {
  #hapmentor-teach .card-div {
    margin: 0 1vw;
    padding: 10vh 10vw !important;
  }
  #hapmentor-teach .showcase-card {
    padding: 3px;
    width: 210px;
    height: 280px;
  }
  #hapmentor-teach .showcase-card p {
    font-size: 0.6rem !important;
    margin-bottom: 10px;
  }
  #hapmentor-teach .showcase-card h4 {
    font-size: 1rem;
  }
  #hapmentor-teach .showcase-card img, #hapmentor-teach .showcase-card h4, #hapmentor-teach .showcase-card p {
    max-height: 110px;
  }
}
@media only screen and (min-width: 851px) {
  #hapmentor-teach #carouselExample {
    display: none !important;
  }
}
@media only screen and (max-width: 850px) {
  #hapmentor-teach .card-div {
    display: none !important;
  }
  #hapmentor-teach #carouselExample {
    display: flex !important;
    height: 400px;
  }
  #hapmentor-teach #carouselExample .carousel-inner .carousel-item {
    margin-right: 0;
    width: 100% !important;
  }
  #hapmentor-teach #carouselExample .carousel-control-next, #hapmentor-teach #carouselExample .carousel-control-prev {
    opacity: 100% !important;
  }
  #hapmentor-teach #carouselExample .carousel-control-next span, #hapmentor-teach #carouselExample .carousel-control-prev span {
    color: var(--HapmentorBlue);
  }
}
#hapmentor-teach .tools img {
  margin: 30px 30px 30px 0;
  max-width: 450px;
}
#hapmentor-teach .tools .tools2 h1, #hapmentor-teach .tools .tools2 p {
  padding-left: 20px;
}
#hapmentor-teach .tools .tools2 h1 span {
  color: var(--HapmentorGreen);
}
#hapmentor-teach .tools .tools2 p {
  padding: 0;
}
#hapmentor-teach .tools .tools2 span a {
  text-decoration: none;
  color: var(--HapmentorGreen);
}
@media only screen and (max-width: 900px) {
  #hapmentor-teach .tools .tools1 {
    width: 100% !important;
    justify-content: center !important;
  }
  #hapmentor-teach .tools .tools2 {
    width: 100%;
  }
  #hapmentor-teach .tools .tools2 h1, #hapmentor-teach .tools .tools2 p {
    padding-left: 0 !important;
  }
}
#hapmentor-teach .plans-div .plan-tittle p span {
  color: var(--HapmentorGreen);
  margin-top: 10px;
}
#hapmentor-teach .plans-div #plans-carousel {
  display: none !important;
}
#hapmentor-teach .plans-div .plan-card {
  padding: 0;
  width: 175px;
  height: 200px;
  border: solid var(--HapmentorBlue) 2px;
  background-color: white;
}
#hapmentor-teach .plans-div .plan-card a {
  text-decoration: none;
  padding: 0;
}
#hapmentor-teach .plans-div .plan-card a:hover {
  transform: scale(1.01);
  transition: 0.3s;
  filter: blur(0px);
  animation: ease-in-out;
}
#hapmentor-teach .plans-div .plan-card .plan-description {
  padding: 7px;
}
#hapmentor-teach .plans-div .plan-card .plan-description h5 {
  color: var(--HapmentorBlue);
}
#hapmentor-teach .plans-div .plan-card .plan-description p {
  font-size: 0.8rem !important;
  color: var(--HapmentorBlue);
}
#hapmentor-teach .plans-div .plan-card .plan-description p, #hapmentor-teach .plans-div .plan-card .plan-description h5 {
  text-align: center;
  padding: 0;
  margin: 8px 0;
}
#hapmentor-teach .plans-div .plan-card .plan-price {
  background-color: var(--HapmentorBlue);
  padding: 10px;
}
#hapmentor-teach .plans-div .plan-card .plan-price p {
  color: white;
  font-size: 1.1rem;
  padding: 0;
  margin: 0;
}
#hapmentor-teach .plans-div .main-plan {
  width: 190px;
  height: 230px;
}
@media only screen and (max-width: 1080px) {
  #hapmentor-teach .plans-div .plan-tittle {
    width: 100%;
  }
  #hapmentor-teach .plans-div #plans-carousel {
    display: flex !important;
  }
  #hapmentor-teach .plans-div #plans-carousel .carousel-inner .carousel-item {
    margin-right: 0;
    width: 100% !important;
  }
  #hapmentor-teach .plans-div #plans-carousel .carousel-control-next, #hapmentor-teach .plans-div #plans-carousel .carousel-control-prev {
    opacity: 100% !important;
  }
  #hapmentor-teach .plans-div #plans-carousel .carousel-control-next span, #hapmentor-teach .plans-div #plans-carousel .carousel-control-prev span {
    color: var(--HapmentorBlue);
  }
  #hapmentor-teach .plans-div .plan-cards-div {
    display: none !important;
  }
}
#hapmentor-teach .develop-manage {
  margin: 40px 0;
}
#hapmentor-teach .develop-manage img {
  max-height: 800px !important;
}
#hapmentor-teach .develop-manage h1, #hapmentor-teach .develop-manage p {
  padding-left: 0 !important;
  padding-right: 20px !important;
}
@media only screen and (max-width: 900px) {
  #hapmentor-teach .develop-manage img {
    margin: 60px 0 !important;
  }
}
#hapmentor-teach .start-now h1, #hapmentor-teach .start-now p {
  text-align: center;
  color: white;
}
#hapmentor-teach .start-now .btn {
  width: 20%;
  padding: 15px;
  margin: 30px 0 !important;
  max-width: 150px;
  min-width: 100px;
}

/*Teach at Hapmentor HAP page*/
#public-channels .page-width-bk .channel-banner {
  object-fit: cover;
  height: 35vh;
}
#public-channels .avatar {
  width: 120px;
  height: 120px;
  border: solid 2px var(--HapmentorBlue);
}
@media only screen and (max-width: 600px) {
  #public-channels .avatar {
    width: 75px;
    height: 75px;
    border: solid 1px var(--HapmentorBlue);
  }
  #public-channels .go-back {
    width: 100% !important;
    margin-top: 20px;
  }
  #public-channels .card-page h3 {
    width: 100%;
  }
  #public-channels .card-page .search {
    width: 100% !important;
  }
}
#public-channels .card-page .search input {
  height: 40px;
  border: solid 2px var(--HapmentorBlack) !important;
}
#public-channels .card-page .search .btn {
  margin-right: 0 !important;
}

/*Public channel pages*/
/*Components*/
/*Student page accordion*/
#student-accordion .accordion {
  padding: 0;
  /*padding: 0 24px 0 0;*/
}
#student-accordion .accordion button {
  border: solid 2px var(--HapmentorBlue) !important;
  border-radius: 0 !important;
}
#student-accordion .accordion .accordion-body {
  border: solid 2px var(--HapmentorBlue) !important;
  border-radius: 0;
}
#student-accordion .accordion-button:focus {
  box-shadow: none !important;
}
#student-accordion .accordion-button:not(.collapsed) {
  color: var(--HapmentorBlack) !important;
  background-color: white;
  box-shadow: none !important;
}
#student-accordion .accordion .accordion-button {
  flex-direction: row-reverse !important;
  padding: 0;
}
#student-accordion .accordion .accordion-button .module-tittle {
  width: 80%;
  color: var(--HapmentorBlue);
  font-size: 1.1rem;
  font-weight: 500;
}
#student-accordion .accordion .accordion-button .material-symbols-sharp {
  color: var(--HapmentorBlue);
  padding: 8px;
  border: solid 2px var(--HapmentorBlue);
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}
#student-accordion .accordion .accordion-button::after {
  margin: 0 5px 0 5px !important;
  background-size: 0.9rem;
  background-position: center;
  background-image: url("../img/expand_more_black_24dp.svg") !important;
  background-position: center;
  background-size: cover;
}
#student-accordion .accordion .lesson-action {
  cursor: pointer;
}
#student-accordion .accordion .lesson-action-block {
  cursor: not-allowed;
  color: var(--HapmentorGrey) !important;
}
#student-accordion .accordion .accordion-body {
  border-top: 0 !important;
  padding: 1vh 0 1vh 3vw;
}
#student-accordion .accordion .accordion-body li {
  line-height: 3rem;
  font-weight: 500;
}
#student-accordion .accordion .accordion-body li a {
  cursor: pointer;
}
#student-accordion .accordion .accordion-body li a:hover {
  color: var(--HapmentorGreen);
}
#student-accordion .accordion .accordion-body li .material-symbols-sharp {
  color: var(--HapmentorBlue);
  padding: 8px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}
#student-accordion .accordion .accordion-body button {
  border: 0 !important;
  background-color: transparent;
  color: var(--HapmentorGreen);
  line-height: 3rem;
  font-weight: 500;
}
#student-accordion .accordion .accordion-body button:hover {
  color: var(--HapmentorBlue);
}
#student-accordion .accordion .accordion-item {
  border: 0 !important;
  margin-top: -2px !important;
}
#student-accordion .addmodule {
  border: solid 2px var(--HapmentorBlue) !important;
  width: 100%;
  text-align: left;
  background-color: transparent;
  color: var(--HapmentorGreen);
  line-height: 2.5rem;
  margin-top: -2px;
}
#student-accordion .addmodule:hover {
  color: var(--HapmentorBlue);
}
@media only screen and (max-width: 768px) {
  #student-accordion .content-preview {
    margin-top: 40px;
    width: 100% !important;
  }
  #student-accordion .accordion {
    width: 100% !important;
    padding: 0;
  }
}
@media only screen and (max-width: 768px) {
  #student-accordion .accordion, #student-accordion .course-desc {
    width: 100% !important;
    padding: 0 !important;
  }
  #student-accordion .accordion p, #student-accordion .course-desc p {
    margin-top: 40px !important;
  }
}
#student-accordion .desc-preview {
  height: fit-content;
}
#student-accordion .desc-preview .desc-name, #student-accordion .desc-preview .desc {
  border: solid 2px var(--HapmentorBlue);
  padding: 10px;
}
#student-accordion .desc-preview .desc-name p, #student-accordion .desc-preview .desc p {
  font-size: 0.8rem;
}
#student-accordion .desc-preview .desc-name {
  border-bottom: none;
}
#student-accordion .desc-preview .desc-name p {
  color: var(--HapmentorBlue);
  font-size: 0.8rem;
  font-weight: 500;
}
@media only screen and (max-width: 768px) {
  #student-accordion .accordion, #student-accordion .course-desc {
    width: 100% !important;
    padding: 0 !important;
  }
  #student-accordion .accordion p, #student-accordion .course-desc p {
    margin-top: 40px !important;
  }
  #student-accordion .desc-preview {
    display: none !important;
  }
}

/* Accordion settings*/
/*Cards container general styles*/
.card-page .card-container {
  width: 25%;
  padding: 10px 15px !important;
  padding: 0;
  justify-content: center;
}

.card a {
  text-decoration: none !important;
}
.card a h5 {
  color: var(--HapmentorBlack);
}
.card a:hover {
  transform: scale(1.01);
  transition: 0.3s;
  filter: blur(0px);
  animation: ease-in-out;
}

/*---MEDIA QUERIES---*/
@media only screen and (max-width: 1500px) {
  .card-page .card-container {
    width: 33%;
    padding: 5px 10px !important;
  }
}
@media only screen and (max-width: 1060px) {
  .card-page .card-container {
    width: 50%;
  }
}
@media only screen and (max-width: 600px) {
  .card-page .card-container {
    width: 100vw;
  }
}
/*GENERAL SETTINGS*/
.edit-button {
  text-decoration: none;
}
.edit-button span {
  justify-content: flex-end !important;
  color: var(--HapmentorBlue) !important;
  font-size: 20px !important;
}

.edit-button:hover span {
  color: var(--HapmentorGreen) !important;
}

/* GENERAL Cards styles*/
.course-card {
  max-width: 400px;
}
.course-card .card-img-top {
  padding: 2px !important;
  width: 100% !important;
  height: 30vh !important;
  object-fit: cover !important;
  max-height: 300px;
}

@media only screen and (max-width: 1060px) {
  .course-card .card-img-top {
    max-height: 200px;
  }
}
.card {
  width: 25vw;
  border: solid 2px;
  border-radius: 0;
}
.card .card-img-top {
  padding: 1%;
  border-radius: 0;
  position: relative;
  text-align: center;
  color: white;
}
.card .card-img-top .bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 0.8rem !important;
  font-weight: 300;
}
.card .card-body {
  padding: 3% !important;
  /* Invalid draft*/
  /* Valid draft*/
  /* Unpublished*/
  /* Published*/
}
.card .card-body h5 {
  margin-bottom: auto !important;
}
.card .card-body .status {
  width: fit-content;
  height: fit-content;
  margin: 2px;
  padding: 5px;
  font-size: 1rem;
}
.card .card-body .in-draft {
  color: var(--HapmentorGrey);
  border: dashed 2px var(--HapmentorGrey);
}
.card .card-body .val-draft {
  color: var(--HapmentorBlue);
  border: dashed 2px var(--HapmentorBlue);
}
.card .card-body .unpublished {
  color: var(--HapmentorGreen);
  border: dashed 2px var(--HapmentorGreen);
}
.card .card-body .published {
  color: white;
  border: solid 2px var(--HapmentorGreen);
  background-color: var(--HapmentorGreen);
}
.card p {
  color: var(--HapmentorGrey) !important;
  font-weight: 500;
  font-size: 0.8rem !important;
}
.card p a {
  color: var(--HapmentorGrey) !important;
  text-decoration: none !important;
}
.card span {
  font-weight: 300;
  font-size: 0.8rem;
}
.card .cattag {
  font-size: 0.5rem !important;
  padding: 0.2vw !important;
  max-width: fit-content !important;
  width: 100px !important;
}
.card .card-info {
  display: flex !important;
  justify-content: flex-end;
}
.card .card-info a {
  margin-right: 0px !important;
  background-color: var(--HapmentorBlue) !important;
  display: flex !important;
  justify-content: space-around;
}
.card .card-info a:hover {
  background-color: var(--HapmentorGreen) !important;
}

@media only screen and (max-width: 1100px) {
  .card {
    width: 45vw;
  }
}
@media only screen and (max-width: 600px) {
  .course-card {
    width: 70vw;
  }
  .course-card .card-mentors p, .course-card a {
    font-size: 0.5rem !important;
  }
  .course-card h5 {
    font-size: 0.9rem !important;
  }
  .course-card .card-body .more {
    width: 40px;
    height: 40px;
  }
  .course-card .card-body .see-more {
    display: none;
  }
}
@media only screen and (min-width: 500px) {
  .course-card .card-body .plus {
    display: none;
  }
}
/*Channel cards */
.channel-card {
  min-width: 250px;
  max-width: 400px;
}
.channel-card .card-img-top {
  padding: 0 !important;
  max-height: 160px;
  overflow: hidden;
  object-fit: cover;
}
.channel-card .avatar {
  height: auto;
  width: 40%;
  max-width: 120px;
  left: 5px;
  bottom: 70px;
  position: absolute;
}
.channel-card .img-thumbnail {
  padding: 0;
  border: solid 1px var(--HapmentorBlack);
}
.channel-card .card-body {
  align-items: center !important;
}
.channel-card .card-body a {
  text-decoration: none;
  color: var(--HapmentorBlack);
  font-size: 1.25rem;
}
.channel-card .card-body .card-tittle {
  width: 80%;
}

.channel-card:hover {
  transform: scale(1.01);
  transition: 0.3s;
  filter: blur(0px);
  animation: ease-in-out;
}

/*Collection cards */
.collection-card {
  min-width: 250px;
  max-width: 400px;
}
.collection-card .card-img-top {
  max-height: 200px;
  overflow: hidden;
  object-fit: cover;
}
.collection-card .card-body div {
  align-items: center !important;
}
.collection-card .card-body div a {
  text-decoration: none;
  color: var(--HapmentorBlack);
  font-size: 1.25rem;
}
.collection-card .card-body div .card-tittle {
  width: 80%;
}
.collection-card .card-body p {
  margin: 0;
  color: var(--HapmentorBlue) !important;
}

.collection-card:hover {
  transform: scale(1.01);
  transition: 0.3s;
  filter: blur(0px);
  animation: ease-in-out;
}

/*Long cards */
#long-card-pad {
  padding: 0 !important;
}

.long-card {
  width: 100% !important;
  height: 250px;
  flex-wrap: wrap;
  padding: 0 !important;
  flex-direction: row;
  max-width: 1400px;
}
.long-card a {
  width: 350px;
  object-fit: cover;
}
.long-card .card-body {
  flex-wrap: wrap !important;
  width: 50%;
  padding: 1% !important;
}
.long-card .card-body .card-information {
  width: 85%;
}
.long-card .card-body .card-information .mentorcolor {
  color: var(--HapmentorGrey) !important;
}
.long-card .card-body .card-tittle {
  text-decoration: none;
  font-size: 1.25rem !important;
  padding: 0;
  color: var(--HapmentorBlack) !important;
}
.long-card .card-body .card-price {
  width: 15%;
}
.long-card .card-body .card-price p {
  width: 100%;
  font-size: 2rem !important;
  color: var(--HapmentorBlue) !important;
}
.long-card .card-body .card-price span {
  font-size: 1.8rem;
}
.long-card .card-body .card-price .price {
  text-align-last: end;
}
.long-card .card-body .card-price .smore {
  height: 40px;
  background-color: var(--HapmentorBlue);
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.long-card .card-body .card-price .smore:hover {
  background-color: var(--HapmentorGreen);
}
.long-card .card-body .add-cart a {
  border: solid 1px var(--HapmentorBlue);
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
}
.long-card .card-body .add-cart a:hover {
  cursor: pointer !important;
  background-color: var(--HapmentorBlue);
  color: white;
}
.long-card .card-body .card-channel-p {
  color: var(--HapmentorGreen) !important;
  font-size: 1rem;
}
.long-card .card-body .card-channel-p a {
  color: var(--HapmentorGreen) !important;
  font-size: 1rem;
}
.long-card .card-body p {
  margin: 0;
  color: var(--HapmentorBlack) !important;
}
.long-card .card-body .stars {
  color: var(--HapmentorGreen);
  font-size: 1rem;
}
.long-card .card-body .stars span {
  font-family: var(--HapmentorFont);
}

/*Detailed cards */
.detailed-card {
  max-width: 450px;
}
.detailed-card .card-tittle {
  text-decoration: none;
  font-size: 1.25rem !important;
  padding: 0;
  color: var(--HapmentorBlack) !important;
}
.detailed-card .card-body {
  padding: 1% !important;
}
.detailed-card .card-body p {
  margin: 0;
  color: var(--HapmentorBlack) !important;
}
.detailed-card .card-body .mentorcolor {
  color: var(--HapmentorGrey) !important;
}
.detailed-card .card-body .card-channel-p {
  color: var(--HapmentorGreen) !important;
  font-size: 1rem;
}
.detailed-card .card-body .card-channel-p a {
  color: var(--HapmentorGreen) !important;
  font-size: 1rem;
}
.detailed-card .card-body .stars {
  color: var(--HapmentorGreen);
  font-size: 1rem;
}
.detailed-card .card-body .stars span {
  font-family: var(--HapmentorFont);
}
.detailed-card .card-body .card-information {
  width: 75%;
}
.detailed-card .card-body .card-information .price {
  text-align-last: end;
}
.detailed-card .card-body .add-cart a {
  border: solid 1px var(--HapmentorBlue);
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
}
.detailed-card .card-body .add-cart a:hover {
  cursor: pointer !important;
  background-color: var(--HapmentorBlue);
  color: white;
}
.detailed-card .card-body .card-price {
  width: 25%;
  justify-content: space-between;
}
.detailed-card .card-body .card-price span {
  font-size: 1.3rem !important;
}
.detailed-card .card-body .card-price p {
  width: 100%;
  font-size: 1.4rem !important;
  color: var(--HapmentorBlue) !important;
  text-align-last: end;
}

/*Card teacher*/
@media only screen and (min-width: 2160px) {
  .card-teacher {
    max-width: 700px !important;
  }
}
.card-teacher {
  max-height: 80px;
  max-width: 300px !important;
  min-width: 100px;
  padding: 0;
  border: solid var(--HapmentorBlue) 3px;
  margin-top: 10px;
  text-decoration: none;
}
.card-teacher img {
  height: 100%;
  width: auto;
  border-right: solid var(--HapmentorBlue) 3px;
}
.card-teacher div {
  padding: 2% 0 0 3%;
}
.card-teacher h5, .card-teacher p {
  padding: 0 !important;
  margin: 0 !important;
  color: var(--HapmentorBlue);
}
.card-teacher h5 {
  font-size: 1rem !important;
}
@media only screen and (max-width: 768px) {
  .card-teacher .card-teacher {
    width: 100% !important;
  }
  .card-teacher h5 {
    font-size: 1rem !important;
  }
  .card-teacher p {
    font-size: 0.6rem !important;
  }
}

.card-teacher:hover {
  transform: scale(1.01);
  transition: 0.3s;
  filter: blur(0px);
  animation: ease-in-out;
}

/* INVITATION Cards styles*/
.card .card-img-top .invitation-date {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--HapmentorGreen);
  padding: 5px 8px;
}
.card .invitation h6 {
  font-weight: 400;
  font-size: 0.9rem;
}
.card .invitation h6 span {
  color: var(--HapmentorGreen);
  font-size: 0.9rem;
  font-weight: 500;
}
.card .invitation p {
  font-weight: 400;
}
.card .invitation .invitation-hap {
  color: var(--HapmentorBlue);
  margin-bottom: 10px !important;
}
.card .invitation .greenbttn {
  margin-right: 15px;
}

/* INVITATION HISTORY Cards styles*/
.card .invitation {
  /*if accepted*/
  /*if declined*/
}
.card .invitation .history {
  width: 100%;
  color: white !important;
  padding: 8px 10px;
  margin: 0;
}
.card .invitation .accepted {
  background-color: var(--HapmentorGreen);
  opacity: 40%;
}
.card .invitation .declined {
  background-color: var(--HapmentorBlue);
  opacity: 40%;
}

/* cards styles */
/*Template*/
/**********Authenticated header***********/
.header-auth {
  height: 130px !important;
}

.blue-bk {
  background-color: var(--HapmentorBlue) !important;
}

.trad {
  font-size: 0.8rem !important;
  padding: 0px !important;
}

.header-icon img {
  height: 25px;
  padding: 0 2.5px;
}

.header-icon img:hover {
  opacity: 0.7;
}

/*profile avatar design*/
.dropdown img {
  border: none !important;
}
.dropdown .rounded-circle {
  padding: 1px !important;
}
.dropdown .shadow {
  box-shadow: none !important;
}

/*dropdown design menus*/
.avatar {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

.dropdown.morphing.scale-left .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  transform-origin: top left !important;
}

.dropdown-menu {
  border-radius: 0px !important;
  width: auto !important;
}
.dropdown-menu .card {
  width: 200px;
  border-color: var(--HapmentorBlue) !important;
  border-radius: 0px !important;
}
.dropdown-menu .card .drop-inside {
  border: solid 1px !important;
  border-color: var(--HapmentorBlue) !important;
}
.dropdown-menu .card .card-body {
  border: none !important;
  padding: 15px !important;
}
.dropdown-menu .card .card-body .text-muted {
  justify-content: flex-end;
}
.dropdown-menu .card .card-body h6 {
  font-weight: 500 !important;
  color: var(--HapmentorBlue) !important;
  line-height: 2.2 !important;
}
.dropdown-menu .card .list-group {
  border: none !important;
}
.dropdown-menu .card .list-group-item {
  color: var(--HapmentorBlue) !important;
  border-radius: 0px !important;
  padding: 10px 15px;
}
.dropdown-menu .card .list-group-item .icon {
  font-size: 1.4rem;
  padding: 0 1rem 0 0;
}
.dropdown-menu .card .list-group-item .text {
  font-size: 1em;
}
.dropdown-menu .card .list-group-item img {
  width: 20px !important;
}
.dropdown-menu .card .list-group-item .gtc {
  padding-left: 30px;
}
.dropdown-menu .card .btn {
  background-color: var(--HapmentorBlue) !important;
  border-radius: 0px !important;
}
.dropdown-menu .card .btn .text-light {
  color: white !important;
}

.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: var(--HapmentorBlue) !important;
}
.list-group-item-action:hover .text, .list-group-item-action:hover .fa, .list-group-item-action:hover p, .list-group-item-action:focus .text, .list-group-item-action:focus .fa, .list-group-item-action:focus p {
  color: white !important;
}

.list-group-item-action, .list-group-item-action {
  background-color: white !important;
}
.list-group-item-action .text, .list-group-item-action .fa, .list-group-item-action p, .list-group-item-action .text, .list-group-item-action .fa, .list-group-item-action p {
  color: var(--HapmentorBlue) !important;
}

.dropdown.morphing.scale-left .dropdown-menu {
  margin-top: 5px !important;
}

/*logo desaparece com menos de 600px para dar mais espaço ao burguer icon*/
@media only screen and (max-width: 600px) {
  /*Hamburguer/curtain Menu styles*/
  .user-profile {
    position: relative;
    left: 0;
  }
  .user-profile ::after {
    display: none;
  }
  .dropdown.morphing.scale-left .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    transform-origin: top left !important;
  }
  .navbar {
    height: 10vh;
  }
}
@media only screen and (min-width: 768px) {
  #myNav, #MyHamburguer {
    display: none !important;
  }
  #MyHamburguer {
    font-size: 50px;
    cursor: pointer;
    color: white;
  }
}
@media only screen and (max-width: 767px) {
  #hap-header {
    padding: 10px 30px !important;
    height: 75px !important;
  }
  #MyHamburguer {
    font-size: 45px;
    cursor: pointer;
    color: white;
    margin-left: 20px;
  }
  #myNav .Language {
    display: flex;
    justify-content: left;
    margin: 0;
    padding: 8px 0;
  }
  #myNav .overlay-content {
    padding: 0 10%;
  }
  #myNav a {
    display: flex;
    justify-content: left;
    padding: 20px 0;
    color: white;
  }
  .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 15;
    top: 0;
    right: 0;
    background-color: var(--HapmentorBlue);
    overflow-x: hidden;
    transition: 0.5s;
  }
  .overlay-content {
    position: relative;
    top: 10%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  .overlay-content a {
    padding: 8px;
    opacity: 1;
  }
  .overlay-content a:hover {
    opacity: 0.7;
  }
  .overlay-content span, .overlay-content a {
    text-decoration: none;
    font-size: 30px !important;
    display: block;
    transition: 0.3s;
  }
  .overlay-content .quick-light-dark img {
    width: 40px;
    height: auto;
  }
  .overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
  }
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    text-decoration: none;
  }
  nav .hap-link1 {
    display: none !important;
  }
  nav .user-profile {
    display: block !important;
  }
  .Hap-logo {
    display: none !important;
  }
  .Hap-logo2 {
    display: unset !important;
  }
}
@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
  .hap-menu-link div a {
    width: 100px !important;
  }
  .Hap-logo {
    display: none !important;
  }
  .Hap-logo2 {
    display: unset !important;
  }
}
.user-profile ::after {
  display: none;
}

.notificationdrop .flex-fill button {
  color: var(--HapmentorBlue);
  border: 0;
  background-color: transparent;
  padding: 0;
}
.notificationdrop .flex-fill button:hover {
  color: var(--HapmentorGreen);
}
.notificationdrop .card .card-body {
  padding: 0 !important;
  border: none !important;
}
.notificationdrop .list-group {
  margin: 0 !important;
}
.notificationdrop .list-group a {
  border-bottom: solid 1px !important;
}
.notificationdrop .not-dd {
  padding: 10px;
}
.notificationdrop .not-dd img {
  width: 20%;
  height: auto;
  margin-right: 6px;
}
.notificationdrop .not-dd p {
  width: 80%;
  margin-bottom: 0;
  font-size: 0.7rem !important;
}
.notificationdrop .not-dd p span {
  font-size: 0.7rem !important;
}
.notificationdrop .not-dd .not-date {
  width: 100%;
}
.notificationdrop .not-dd .not-sender {
  color: var(--HapmentorGreen);
  font-size: 0.7rem !important;
}
.notificationdrop a {
  font-size: 0.9rem !important;
}
.notificationdrop a span {
  font-size: 0.7rem;
  padding-left: 0;
}
.notificationdrop .list-group-item {
  padding: 10px !important;
}
.notificationdrop .btn {
  width: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 3px;
}
.notificationdrop .d-flex {
  display: flex !important;
  align-items: center;
}
.notificationdrop .d-flex a {
  font-size: 0.7rem !important;
}
.notificationdrop .markallread:first-child {
  background-color: white !important;
  color: var(--HapmentorBlue) !important;
}
.notificationdrop .btn:hover {
  background-color: var(--HapmentorGreen) !important;
  color: white !important;
}

#notbtn:focus {
  color: #fff !important;
}

#notbtn:hover {
  color: var(--HapmentorGreen) !important;
}

/* Authenticated header */
/*********404 ERROR PAGE*********/
#errorpage {
  background-color: white;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  direction: ltr;
  height: 100vh;
  width: 80vw !important;
}
#errorpage .btn {
  margin: 0;
  width: 100px;
}
#errorpage .error1, #errorpage .error2 {
  padding: 60px;
}
#errorpage .container-fluid {
  width: 100%;
  margin: 10vh;
}
#errorpage img {
  filter: none;
}
#errorpage p {
  color: var(--HapmentorBlack);
  display: flex;
  justify-content: space-around;
  padding: 30px;
  font-size: 1.5rem;
  text-align: center;
}
@media only screen and (max-width: 760px) {
  #errorpage .error1 {
    display: none !important;
  }
}

/*404 error page*/
/**********FOOTER**********/
footer {
  position: absolute;
  margin-top: 2%;
}

.footer {
  background-color: var(--HapmentorBlack);
  min-height: 35vh;
  padding: 10vh 7.5vh !important;
  /*align footer columns on mobile*/
}
.footer .footerlogo-mobile {
  display: none !important;
}
.footer .footerlinks {
  margin: 3vh;
}
.footer .footerlinks button {
  background-color: transparent;
  color: white;
  border: none;
  padding: 0;
}
.footer h1 {
  color: white;
  padding: 0;
  font-size: 1.5rem;
}
.footer p {
  font-size: 0.8rem;
  color: white;
}
.footer .footerlogo a, .footer .footerlogo-mobile a {
  font-size: 0.8rem;
  padding: 0;
}
.footer .footerlogo span, .footer .footerlogo-mobile span {
  padding: 0;
}
.footer .footerlogo img, .footer .footerlogo-mobile img {
  max-height: 100px !important;
  align-content: start;
  padding: 0 0 30px;
}
.footer a, .footer ul {
  text-decoration: none;
  list-style-type: none;
  color: white;
  padding: 0;
  font-size: 1rem;
}
.footer li {
  padding: 0;
}
.footer a:hover {
  color: var(--HapmentorGreen);
}
.footer .badge .imgbadge {
  object-fit: contain;
  width: 150px;
  opacity: 0.9;
  display: flex;
  justify-content: space-around;
}
.footer .badge p {
  padding-left: 0px !important;
}
.footer .badge img:hover {
  opacity: 1;
}
.footer .badge ul a {
  padding-right: 20% !important;
}
.footer .badge ul a img {
  opacity: 0.9;
}
.footer .badge ul a img:hover {
  opacity: 1;
}
@media only screen and (max-width: 768px) {
  .footer .footerlogo-mobile {
    display: flex !important;
  }
  .footer .footerlogo {
    display: none !important;
  }
  .footer .footerlinks {
    margin: 0px;
    padding: 2vh 0;
  }
  .footer .footerlinks .list-inline {
    max-width: 45%;
  }
  .footer .badge {
    padding-left: 0px;
  }
  .footer p, .footer img {
    padding-left: 0px;
  }
}
@media only screen and (max-width: 500px) {
  .footer p {
    font-size: 0.8rem !important;
  }
  .footer h1 {
    font-size: 2rem !important;
  }
}

@media only screen and (min-width: 2400px) {
  .footer {
    height: 7vh !important;
  }
  .footer .footerlinks {
    margin: 7vh 1vw !important;
  }
  .footer .footerlinks h1 {
    height: fit-content !important;
  }
}
@media only screen and (max-width: 1500px) {
  .footer-login {
    width: 40% !important;
  }
  .footer-useful {
    width: 30% !important;
  }
  .badge {
    width: 30% !important;
  }
}
@media only screen and (max-width: 768px) {
  .footer-login {
    width: auto !important;
  }
  .footer-useful {
    width: auto !important;
  }
  .badge {
    width: auto !important;
  }
}
/* Footer*/
/**********Loading animation***********/
/*Loading animation*/
.page-loader-logo {
  display: flex;
  justify-content: center !important;
  flex-direction: column;
  align-items: stretch;
  margin-top: 15vh;
  margin-bottom: 15vh;
  /*1. O símbolo gira infinitamente a 360º

      .rotate-center {
          animation: rotate-center 0.9s cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite both;
          display: flex;
          justify-content: center !important;

          @-webkit-keyframes rotate-center {
              0% {
                  transform: rotate(0);
              }

              100% {
                  transform: rotate(360deg);
              }
          }


  }
        */
  /*3. O símbolo inicia com as "letras" na vertical e volta à posição
      correta do logo

  .rotate-center {
      animation: rotate-center 1.3s cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite both;
      display: flex;
      justify-content: center !important;

      @-webkit-keyframes rotate-center {
          0% {
              transform: rotate(-70deg);
          }

          100% {
              transform: rotate(0);
          }
      }
  }

      */
  /*4. O símbolo gira infinitament, sem pausa

  .rotate-center {
      animation: rotate-center 1s linear infinite both;
      display: flex;
      justify-content: center !important;

      @keyframes rotate-center {
          0% {
              transform: rotate(0);
          }

          100% {
              transform: rotate(360deg);
          }
      }
  }

  */
  /*2. O símbolo fica a "pulsar", aumentando e diminuindo de tamanho*/
}
.page-loader-logo .logo-loader {
  display: flex;
  justify-content: center !important;
}
.page-loader-logo img {
  max-width: 40px;
}
.page-loader-logo .logging {
  display: flex;
  justify-content: center !important;
  font-size: 1.3rem;
  padding: 10px;
  margin: 0;
}
.page-loader-logo .rotate-center {
  animation: scale-up-center 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) infinite alternate-reverse forwards;
  display: flex;
  justify-content: center !important;
}
@keyframes scale-up-center {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

/*uploading file animation*/
.uploading-logo {
  /*1. O símbolo fica a saltar, dando a sensação de upload*/
}
.uploading-logo .logo-loader {
  display: flex;
  justify-content: center !important;
}
.uploading-logo img {
  max-width: 40px;
}
.uploading-logo .uploading {
  display: flex;
  justify-content: center !important;
  font-size: 1.3rem;
  padding: 10px;
}
.uploading-logo .bounce-out-top {
  animation: bounce-out-top 2s ease-in infinite both;
  display: flex;
  justify-content: center !important;
}
@keyframes bounce-out-top {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  5% {
    transform: translateY(-30px);
    animation-timing-function: ease-in;
  }
  15% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  25% {
    transform: translateY(-38px);
    animation-timing-function: ease-in;
  }
  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  52% {
    transform: translateY(-70px);
    animation-timing-function: ease-in;
  }
  70% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(-200px);
    opacity: 0;
  }
}

/* Loading animations */
/*Tabs, navs, buttons command input general styles
*/
/*Tabs Settings*/
.tab {
  padding: 0 !important;
}

.tabs {
  width: 100% !important;
  display: flex;
  flex-wrap: wrap !important;
  width: unset;
  /* styles for "no items" page*/
  /* end styles for "no items" page*/
}
.tabs .ul li {
  height: fit-content;
}
.tabs .tab-content {
  width: 100%;
}
.tabs .tab-content #no-items {
  margin: 50px 150px;
  max-width: 1000px;
}
.tabs .tab-content #no-items img {
  width: 50%;
  padding: 20px;
}
.tabs .tab-content #no-items .add {
  width: 50%;
  justify-content: center;
  align-items: center;
}
.tabs .tab-content #no-items .add p {
  text-align: center;
  width: 70%;
}
.tabs .tab-content #no-items .add a {
  width: 130px;
  margin: 20px 0;
}
@media only screen and (max-width: 1000px) {
  .tabs .tab-content #no-items img {
    display: none;
  }
  .tabs .tab-content #no-items .add {
    width: 100%;
  }
  .tabs .tab-content #no-items .add p {
    width: 100%;
  }
}
@media only screen and (max-width: 500px) {
  .tabs .tab-content #no-items {
    margin: 30px 50px;
  }
}

.tabs {
  /*.nav-item {
      .nav-link {
          color: var(--HapmentorBlack) !important;
          min-width: 100px;
          border: solid 2px var(--HapmentorBlack) !important;
          padding: 0.8rem !important;
          margin: -1px;
          font-weight: bold;
          width: 30vw;
          max-width: 200px;
      }

      .nav-link.active {
          border-color: var(--HapmentorBlack) !important;
      }
  }*/
}

/*Settings tabs styles*/
#settings-tab .nav-item .nav-link {
  color: var(--HapmentorBlack) !important;
  min-width: 100px;
  border: solid 2px var(--HapmentorBlack) !important;
  padding: 0.8rem !important;
  margin: -1px;
  font-weight: bold;
  width: 30vw;
  max-width: 250px;
}
#settings-tab .nav-item .nav-link .tab-icon {
  display: none;
}
@media only screen and (max-width: 768px) {
  #settings-tab .nav-item .nav-link .tab-text {
    display: none !important;
  }
  #settings-tab .nav-item .nav-link .tab-icon {
    display: flex;
  }
}
#settings-tab .nav-item .nav-link.active {
  border-color: var(--HapmentorBlack) !important;
  color: white !important;
}
#settings-tab .nav-pills .nav-item .nav-link {
  background: white;
  border-radius: 0;
  text-align: center;
}
#settings-tab .nav-pills .nav-link:focus {
  background-color: var(--HapmentorGreen) !important;
  color: white !important;
}
#settings-tab .nav-pills .nav-link.active {
  background-color: var(--HapmentorGreen) !important;
  color: white !important;
}
#settings-tab #privacy-set .privacy {
  border: solid 2px var(--HapmentorBlue) !important;
  color: var(--HapmentorBlue);
}
#settings-tab #privacy-set .privacy:active, #settings-tab #privacy-set .privacy:focus {
  border: solid 2px var(--HapmentorBlue) !important;
  background-color: var(--HapmentorBlue) !important;
  color: white !important;
}
#settings-tab #privacy-set .active {
  background-color: var(--HapmentorBlue) !important;
}

/*
Settings table content styles*/
.information-tab {
  padding: 0;
}

/*Tags input styles*/
/*Tabs universal styles (default styles that will
 apply to any tab in the website, other extra specified styles 
will be applied on the context of the page and it's own css file)*/
.nav-pills {
  /*.nav-item {

      .nav-link {

          border: solid 2px !important;
          background: white;
          border-radius: 0;
          text-align: center;
      }
  }*/
}
.nav-pills .nav-link:focus {
  background-color: var(--HapmentorGreen) !important;
  color: white !important;
}
.nav-pills .nav-link.active {
  background-color: var(--HapmentorGreen) !important;
  color: white !important;
}

@media only screen and (max-width: 768px) {
  .tabs {
    width: 100vw !important;
    padding: 0;
  }
}
/*End Tabs Settings*/
/* Add new HAP button universal styles*/
.addHAP {
  align-items: flex-start;
  justify-content: center !important;
  color: var(--HapmentorBlue);
  font-size: 0.9rem;
  width: auto;
}
.addHAP a {
  text-decoration: none;
  color: var(--HapmentorBlue);
  margin-left: 2px;
}
.addHAP span {
  font-size: 15px;
}
.addHAP .material-symbols-sharp {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

@media only screen and (max-width: 500px) {
  .addHAP {
    font-size: 0.8rem !important;
  }
}
.add-bttn {
  text-decoration: none;
  color: var(--HapmentorBlue);
  margin: 5px 2px 0 0;
}
.add-bttn span {
  font-size: 15px !important;
}
.add-bttn .material-symbols-sharp {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

.form-check-input {
  width: 15px !important;
  height: 15px !important;
  margin: 0 5px;
  padding: 0;
}

/*End new HAP button Settings*/
/*Button universal styles (will apply basic primary styles
to any button with these classes, specified styles will be applied 
on the context of the page and on it's own css file)*/
.greenbttn {
  border-radius: 0;
  color: white !important;
  background-color: var(--HapmentorGreen) !important;
  height: fit-content;
}

.bluebttn {
  color: white !important;
  background-color: var(--HapmentorBlue) !important;
  height: fit-content;
  border-radius: 0;
}

.borderbttn {
  color: var(--HapmentorBlue) !important;
  background-color: white !important;
  height: fit-content;
  border: solid 2px var(--HapmentorBlue) !important;
}

.borderbttn {
  color: var(--HapmentorBlue) !important;
  background-color: white !important;
  height: fit-content;
  border: solid 2px var(--HapmentorBlue) !important;
}

.borderbttn:active {
  color: white !important;
}

.btn {
  border-radius: 0;
  font-size: 15px;
}

.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-check:focus + .btn, .btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0) !important;
}

.btn.btn-primary:hover {
  transform: scale(1.01);
  transition: 0.3s;
  filter: blur(0px);
  animation: ease-in-out;
}

.btn.btn-primary {
  border-color: transparent;
  --bs-btn-border-radius: 0;
  padding: 10px 0;
  width: 80px;
  margin-right: 10px;
}

/*End button settings*/
/*Input universal styles (will apply to any input in the website, 
other extra specified styles will be applied on the context 
of the page and it's own css file)*/
input, textarea {
  resize: none;
  border-radius: 0 !important;
  border: solid 2px var(--HapmentorBlue) !important;
  padding: 0 10px;
}

textarea:focus, input:focus, .editor-container:focus, .ql-container:focus, ql-snow:focus {
  border: solid 2px var(--HapmentorGreen) !important;
  box-shadow: none !important;
}

.form-check-input {
  border: solid 2px var(--HapmentorBlue);
}

.editor-container, .ql-container, .ql-toolbar {
  border-radius: 0 !important;
  border: solid 2px var(--HapmentorBlue) !important;
}

/*End input settings*/
/*Test styles form new sidebar*/
.navmenu ul li {
  align-items: center !important;
  margin: 5px 0;
}
.navmenu ul li a {
  color: var(--HapmentorBlue) !important;
  font-size: 1.3rem;
  align-items: center !important;
}
.navmenu ul li a span {
  margin-right: 5px;
}

/*Quill general styles (text editor)*/
.ql-snow, .ql-stroke {
  stroke: var(--HapmentorBlue) !important;
  stroke-linejoin: miter;
}

.ql-container {
  border-top: 0 !important;
  cursor: text;
}

.ql-toolbar, .ql-snow {
  display: flex !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
}
.ql-toolbar button, .ql-snow button {
  padding: 4px 0 !important;
}
.ql-toolbar .ql-formats, .ql-snow .ql-formats {
  margin-right: 3px !important;
  justify-content: space-between !important;
  padding: 0 !important;
  height: fit-content !important;
  width: fit-content !important;
  margin-bottom: 4px !important;
}
.ql-toolbar .ql-formats .ql-font, .ql-toolbar .ql-formats .ql-list, .ql-toolbar .ql-formats .ql-indent, .ql-toolbar .ql-formats .ql-direction, .ql-toolbar .ql-formats .ql-blockquote, .ql-toolbar .ql-formats .ql-header, .ql-toolbar .ql-formats .ql-background, .ql-snow .ql-formats .ql-font, .ql-snow .ql-formats .ql-list, .ql-snow .ql-formats .ql-indent, .ql-snow .ql-formats .ql-direction, .ql-snow .ql-formats .ql-blockquote, .ql-snow .ql-formats .ql-header, .ql-snow .ql-formats .ql-background {
  display: none !important;
}
.ql-toolbar .ql-formats span, .ql-toolbar .ql-formats button, .ql-snow .ql-formats span, .ql-snow .ql-formats button {
  margin-bottom: 5px !important;
}
.ql-toolbar .ql-formats .ql-link, .ql-toolbar .ql-formats .ql-clean, .ql-snow .ql-formats .ql-link, .ql-snow .ql-formats .ql-clean {
  display: none !important !important;
}
.ql-toolbar .ql-formats .ql-size, .ql-snow .ql-formats .ql-size {
  margin-right: 5px !important;
}
.ql-toolbar .ql-formats .ql-font, .ql-toolbar .ql-formats .ql-size, .ql-snow .ql-formats .ql-font, .ql-snow .ql-formats .ql-size {
  border: solid 1px var(--HapmentorBlue) !important;
}
.ql-toolbar .ql-formats .ql-header .ql-picker-label, .ql-toolbar .ql-formats .ql-picker .ql-picker-label, .ql-snow .ql-formats .ql-header .ql-picker-label, .ql-snow .ql-formats .ql-picker .ql-picker-label {
  color: var(--HapmentorBlue) !important;
}
.ql-toolbar .ql-formats .ql-header .ql-picker-options, .ql-toolbar .ql-formats .ql-picker .ql-picker-options, .ql-snow .ql-formats .ql-header .ql-picker-options, .ql-snow .ql-formats .ql-picker .ql-picker-options {
  border: solid 1px var(--HapmentorBlue !important);
  box-shadow: none;
  right: 0;
}
.ql-toolbar .ql-formats .ql-header .ql-picker-options .ql-picker-item, .ql-toolbar .ql-formats .ql-picker .ql-picker-options .ql-picker-item, .ql-snow .ql-formats .ql-header .ql-picker-options .ql-picker-item, .ql-snow .ql-formats .ql-picker .ql-picker-options .ql-picker-item {
  color: var(--HapmentorBlue) !important;
}
.ql-toolbar .ql-size-small, .ql-snow .ql-size-small {
  font-size: 0.75em !important;
}
.ql-toolbar .ql-size-large, .ql-snow .ql-size-large {
  font-size: 1.5em !important;
}
.ql-toolbar .ql-size-huge, .ql-snow .ql-size-huge {
  font-size: 2.5em !important;
}
.ql-toolbar .ql-direction-rtl, .ql-snow .ql-direction-rtl {
  direction: rtl !important;
  text-align: inherit !important;
}
.ql-toolbar .ql-align-center, .ql-snow .ql-align-center {
  text-align: center !important;
}
.ql-toolbar .ql-align-justify, .ql-snow .ql-align-justify {
  text-align: justify !important;
}
.ql-toolbar .ql-align-right, .ql-snow .ql-align-right {
  text-align: right !important;
}

/*HAP page tabs styles*/
#HAP-details #hap-tab .nav-item .nav-link {
  color: var(--HapmentorBlack) !important;
  min-width: 100px;
  border: solid 2px var(--HapmentorBlack) !important;
  padding: 0.8rem !important;
  margin: -1px;
  font-weight: bold;
  width: 30vw;
  max-width: 250px;
}
#HAP-details #hap-tab .nav-item .nav-link.active {
  border-color: var(--HapmentorBlack) !important;
  color: white !important;
}
#HAP-details #hap-tab .nav-pills .nav-item .nav-link {
  background: white;
  border-radius: 0;
  text-align: center;
}
#HAP-details #hap-tab .nav-pills .nav-link:focus {
  background-color: var(--HapmentorGreen) !important;
  color: white !important;
}
#HAP-details #hap-tab .nav-pills .nav-link.active {
  background-color: var(--HapmentorGreen) !important;
  color: white !important;
}
@media only screen and (max-width: 768px) {
  #HAP-details #hap-tab {
    width: 100% !important;
  }
  #HAP-details #hap-tab .nav-item .nav-link {
    width: 40vw;
  }
}

/* Navs and tabs styles */
#HAPS {
  min-height: 50vh;
  /*OFF CANVAS STYLES*/
}
#HAPS .sidebar {
  border-right: solid 2px var(--HapmentorBlue);
}
#HAPS #Filterbar {
  display: none;
}
#HAPS #Filterbar .fbtn {
  width: 35px;
  height: 35px;
  outline: solid 2px var(--HapmentorBlue);
  background-color: var(--HapmentorBlue);
}
#HAPS #Filterbar .fbtn span {
  color: white;
  width: 35px;
  height: 35px;
  align-items: center !important;
}
#HAPS #Filterbar .fbtn:hover {
  outline: solid 2px var(--HapmentorBlue);
  background-color: white;
}
#HAPS #Filterbar .fbtn:hover span {
  color: var(--HapmentorBlue);
}
@media only screen and (max-width: 768px) {
  #HAPS {
    /*Filter bar button mobile*/
    /*Filter bar desktop*/
  }
  #HAPS #Filterbar {
    display: block !important;
    z-index: 1000;
    position: fixed;
    bottom: 7vh;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
  }
  #HAPS #Filterbar .fbtn {
    width: 120px !important;
    align-items: center !important;
  }
  #HAPS #Filterbar .fbtn span {
    width: 30% !important;
  }
  #HAPS #Filterbar #SF {
    display: flex !important;
    font-family: var(--HapmentorFont);
    font-size: 0.9rem;
    width: 70% !important;
    align-items: center !important;
    justify-content: center;
    padding: 0;
  }
  #HAPS #search-filters {
    display: none;
  }
}
#HAPS .offcanvas.show {
  z-index: 100000;
  border: solid 2px var(--HapmentorBlue);
}
#HAPS .filter-options.offcanvas {
  /* offcanvas header styles*/
  /* offcanvas body styles*/
}
#HAPS .filter-options.offcanvas .offcanvas-header {
  border-bottom: solid 2px var(--HapmentorBlue);
  padding: 0 !important;
}
#HAPS .filter-options.offcanvas .offcanvas-header h5 {
  font-size: 1rem;
  color: var(--HapmentorBlue);
  padding: 0 !important;
}
#HAPS .filter-options.offcanvas .offcanvas-header .off-close {
  border-left: solid 2px var(--HapmentorBlue) !important;
  margin: 15px;
  height: 100%;
  width: 40px;
}
#HAPS .filter-options.offcanvas .offcanvas-header .off-close .btn-close {
  background: transparent !important;
  opacity: 100 !important;
}
#HAPS .filter-options.offcanvas .offcanvas-header .off-close .btn-close span {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--HapmentorBlue) !important;
}
#HAPS .filter-options.offcanvas .offcanvas-header .off-close .btn-close:focus {
  box-shadow: none !important;
}
#HAPS .filter-options.offcanvas .offcanvas-header .off-header {
  margin: 15px;
}
#HAPS .filter-options.offcanvas .offcanvas-body {
  padding: 0 !important;
  margin: 15px 5px 15px 25px;
}
#HAPS .filter-options.offcanvas .offcanvas-body input {
  border: solid 1px var(--HapmentorBlack) !important;
  height: 45px;
}
#HAPS .filter-options.offcanvas .offcanvas-body .Go {
  width: 45px;
  height: 45px;
  margin: 10px 0px 10px 20px;
}
#HAPS .filter-options.offcanvas .offcanvas-body .filter-search {
  height: 10%;
}
#HAPS .filter-options.offcanvas .offcanvas-body .off-content {
  height: 80%;
}
#HAPS .filter-options.offcanvas .offcanvas-body .off-content h3 {
  font-size: 1.3rem;
  color: var(--HapmentorBlue);
  padding: 0 !important;
}
#HAPS .filter-options.offcanvas .offcanvas-body .off-content p {
  padding: 0 !important;
  font-weight: 500;
  font-size: 0.9rem;
  margin: 10px 0 0;
}
#HAPS .filter-options.offcanvas .offcanvas-body .off-content .form-check {
  margin-top: 10px;
  margin-bottom: 10px;
}
#HAPS .filter-options.offcanvas .offcanvas-body .off-content .form-check label {
  color: var(--HapmentorBlack) !important;
  font-size: 0.9rem;
}
#HAPS .filter-options.offcanvas .offcanvas-body .off-content .form-check input {
  padding-top: 0 !important;
  width: 20px;
  height: 20px;
  border: solid 2px var(--HapmentorBlack) !important;
  margin-right: 10px;
  cursor: pointer;
}

#dashboard {
  padding: 0 !important;
  min-height: 100vh;
}

.navmenu {
  width: 200px;
}
.navmenu .dashmenu {
  flex-direction: column;
}
.navmenu .dashmenu .openbtn {
  right: -2px;
  top: -2px;
}
.navmenu .dashmenu ul {
  width: 100% !important;
}
.navmenu .dashmenu li, .navmenu .dashmenu a {
  text-align: left !important;
  text-decoration: none;
  color: var(--HapmentorBlue);
  height: 50px;
  min-width: 45px !important;
  width: 100% !important;
  border-radius: unset;
  padding: 30px 0;
}
.navmenu .dashmenu li {
  margin: 0;
  align-items: center !important;
}
.navmenu .dashmenu li a {
  padding-left: 20px !important;
}
.navmenu .dashmenu li:hover, .navmenu .dashmenu a:hover {
  cursor: pointer;
  background-color: var(--HapmentorGreen);
  color: white !important;
}
.navmenu .dashmenu li.active {
  background-color: var(--HapmentorGreen) !important;
  color: white !important;
  border-radius: unset;
}
.navmenu .dashmenu li.active a {
  color: white !important;
}
.navmenu .menu-button {
  flex-direction: row;
  font-size: 1.2rem;
  align-items: center;
}
.navmenu .menu-button span {
  margin-right: 10px;
}
.navmenu .switch-SM {
  width: 30%;
  margin-top: 20px !important;
  justify-content: center;
}
.navmenu .switch-SM .nav-pills .nav-item a {
  align-items: center;
  justify-content: center;
}
.navmenu .switch-SM .nav-pills .nav-item .nav-link {
  color: var(--HapmentorBlue) !important;
  border: solid 2px var(--HapmentorBlue);
  background: white;
  border-radius: 0;
  text-align: center;
  height: 30px;
  width: 80px;
}
.navmenu .switch-SM .nav-pills .nav-item .nav-link:focus {
  background-color: var(--HapmentorGreen) !important;
  color: white !important;
}
.navmenu .switch-SM .nav-pills .nav-item .nav-link.active {
  background-color: var(--HapmentorGreen) !important;
  color: white !important;
  border-color: var(--HapmentorBlue) !important;
}

.sidebar {
  border: solid 2px var(--HapmentorBlue);
}
.sidebar .navmenu-close {
  width: 70px !important;
}
.sidebar .navmenu-close .dashmenu .openbtn {
  right: -30px;
}
.sidebar .navmenu-close .dashmenu ul li .remove-text {
  display: none !important;
}

@media only screen and (max-width: 768px) {
  .dashboard .sidebar {
    padding: 0 !important;
    border-top: solid 2px var(--HapmentorBlue);
    width: 100vw !important;
    height: 60px;
    border-right: none;
    position: unset;
    align-content: center;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background: white;
  }
  .dashboard .sidebar .navmenu {
    width: 100vw !important;
  }
  .dashboard .sidebar .navmenu .dashmenu {
    padding: 0 25vw !important;
  }
  .dashboard .sidebar .navmenu .dashmenu .openbtn {
    display: none !important;
  }
  .dashboard .sidebar .navmenu .dashmenu ul li {
    padding: 29px 10px !important;
  }
  .dashboard .sidebar .navmenu .dashmenu ul li .remove-text {
    display: none !important;
  }
  .dashboard .sidebar .navmenu .dashmenu ul li a {
    padding: 0 !important;
    justify-content: center;
  }
  .dashboard .sidebar .navmenu .dashmenu ul li a span {
    margin: 0;
  }
}
@media (max-width: 768px) {
  .flex-sm-column {
    flex-direction: row !important;
  }
}
@media only screen and (max-width: 768px) {
  #dashboard {
    flex-wrap: wrap;
  }
}
/*  Open navbar button*/
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: white;
  color: var(--HapmentorBlue);
  justify-content: center;
  align-content: center;
  border: solid 2px var(--HapmentorBlue);
  position: absolute;
  top: 0;
  height: 30px;
  width: 30px;
  display: block;
}

/* Navs and tabs styles */
/*--------variables*/
:root {
  /*Fonts*/
  --HapmentorFont: "Outfit", sans-serif;
  --dark-color: #212322;
  --color-fff: #FFFFFF;
  --color-100: #F0F0F0;
  --color-200: #f2f4ee;
  --color-300: #E0E0E0;
  --color-400: #BDBDBD;
  --color-500: #525252;
  --color-600: #464545;
  --color-700: #363535;
  --color-800: #252525;
  --color-900: #181818;
  --color-000: #000000;
  --border-color: #0f4c81;
  --card-color: #ffffff;
  --body-color: #ffffff;
  --white-color: #ffffff;
  --sidebar-color: #ffffff;
  --primary-color: #b3c3a2;
  --secondary-color: rgba(179, 195,162, 0.2);
  --chart-color1: #191A1C;
  --chart-color2: #837788;
  --chart-color3: #374765;
  --chart-color4: #484261;
  --chart-color5: #717788;
  --sidebar-img: url(https://www.wrraptheme.com/templates/luno/assets/img/sidebar-bg/sidebar-1.jpg);
  /*Colors*/
  --HapmentorBlue: #0f4c81;
  --HapmentorGreen: #b3c3a2;
  --HapmentorGreenOpacity: rgba(179, 195,162, 0.2);
  --HapmentorBlack: #212322;
  --HapmentorGrey: #828282;
}

/*Scroll styles*/
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--HapmentorBlue);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--HapmentorGreen);
}

html {
  scroll-behavior: smooth;
}

:root [data-luno=theme-blue] {
  --body-color: #f7f6f1;
}

:focus-visible {
  outline: none;
}

.row {
  margin: 0;
  padding-left: 0;
}

.material-symbols-sharp {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
}

.container-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

ol, ul, dl {
  margin: 0;
  padding: 0;
}

.title {
  font-size: 3em;
}

.sub-title {
  font-size: 2.8em;
}

.text {
  font-size: 1.5em;
}

li {
  list-style: none !important;
}

#app {
  width: 100%;
}
#app .wrapper {
  height: 100% !important;
  overflow-x: hidden;
}
#app .wrapper .page-header {
  background: var(--border-color) !important;
  border-bottom: 0;
}
#app .wrapper .bk-blue {
  background-color: var(--HapmentorBlue);
}

.nop {
  padding: 0 !important;
}

/*default settings for webpages*/
body {
  transition: ease 0.1s;
  animation: fadeInAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-color: white !important;
  color: var(--color-700);
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  direction: ltr;
}

img {
  filter: none;
}

.back-to-top {
  position: fixed;
  width: 45px !important;
  height: 45px;
  bottom: 5vW;
  right: 5vw;
  margin: 0;
  padding: 0 !important;
  z-index: 10;
  border: solid 3px white !important;
}
.back-to-top span {
  font-size: 40px;
}

.page-width, .page-width-bk {
  width: 100% !important;
}

.page-body {
  min-height: 100vh;
}

#app, .page-body, .container-fluid, .wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

@media only screen and (min-width: 2160px) {
  .page-width {
    width: 100% !important;
    max-width: 2160px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .page-width-bk {
    width: 100% !important;
  }
  .green-bk {
    background-color: var(--HapmentorGreen) !important;
  }
  .black-bk {
    background-color: var(--HapmentorBlack) !important;
  }
  .light-green-bk {
    background-color: var(--HapmentorGreenOpacity) !important;
  }
}
.light-green-bk {
  background-color: var(--HapmentorGreenOpacity) !important;
}

.blue-bk {
  background-color: var(--HapmentorBlue) !important;
}

.hap-header {
  height: 140px !important;
}
.hap-header .btn, .hap-header .btn-primary:hover {
  color: white;
}

.page-student {
  padding: 35px 30px;
}
.page-student .publishbuttons {
  width: 100%;
  margin-bottom: 30px;
  /* status button styles*/
  /* Invalid draft*/
  /* Valid draft*/
  /* Unpublished*/
  /* Published*/
  /* End status button styles*/
}
.page-student .publishbuttons img {
  width: 20vw;
  max-width: 150px;
  min-width: 110px;
  padding: 0;
  margin: 5px 10px 5px 0;
}
.page-student .publishbuttons .status {
  width: 130px;
  height: fit-content;
  margin: 8px 15px 8px 0;
  padding: 5px;
  font-size: 1.3rem;
}
.page-student .publishbuttons .in-draft {
  color: var(--HapmentorGrey);
  border: dashed 2px var(--HapmentorGrey);
}
.page-student .publishbuttons .val-draft {
  color: var(--HapmentorBlue);
  border: dashed 2px var(--HapmentorBlue);
}
.page-student .publishbuttons .unpublished {
  color: var(--HapmentorGreen);
  border: dashed 2px var(--HapmentorGreen);
}
.page-student .publishbuttons .published {
  color: white;
  border: solid 2px var(--HapmentorGreen);
  background-color: var(--HapmentorGreen);
}
.page-student .publishbuttons .greenbttn {
  width: 150px !important;
  margin: 8px 15px 8px 0;
}
.page-student .publishbuttons .bluebttn {
  width: 130px !important;
  height: fit-content;
  margin: 8px 15px 8px 0;
}
.page-student .publishbuttons .borderbttn {
  width: 130px !important;
  height: fit-content;
  margin: 8px 15px 8px 0;
}
.page-student .publishbuttons .save-mobile, .page-student .publishbuttons .delete-mobile {
  display: none;
}
@media only screen and (max-width: 768px) {
  .page-student .publishbuttons .save-mobile, .page-student .publishbuttons .delete-mobile {
    display: flex;
    width: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page-student .publishbuttons .save-desktop, .page-student .publishbuttons .delete-desktop {
    display: none;
  }
}

/*Homepage without authentication*/
.trad {
  font-size: 0.8rem !important;
  padding: 0px !important;
}

.hap-menu-link div a {
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.hap-menu-link div a:hover {
  color: var(--HapmentorGreen);
}

.nav-link:hover {
  background: none !important;
}

.highlight {
  color: #b3c3a2;
}

.landing {
  margin-top: 50px;
  color: white;
  font-size: 5rem;
}

#claim {
  font-size: 1.5rem;
  margin-bottom: 3vh;
}

.mr-3 {
  margin-right: 30px;
}

/*Header rules*/
.Hap-logo, .Hap-logo2 {
  padding: 5px;
  z-index: 1;
}

.Hap-logo {
  height: 70px !important;
}

.Hap-logo2 {
  display: none;
  height: 50px !important;
}

#hap-header {
  margin: 0;
  padding: 2vh 10vw !important;
  box-shadow: none !important;
}

.navbar {
  height: auto;
}

.hap-body {
  /* background-color: white;*/
  padding: 5vh 14vw 5vh !important;
}
.hap-body h1 {
  padding: 7% 0;
}
.hap-body .p-2 {
  padding: 2.5vw !important;
}

@media only screen and (max-width: 768px) {
  .p-2 {
    display: none;
  }
}
/*Carrousel*/
/* Initialize Swiper */
.square-hide-left {
  position: absolute;
  height: 100%;
  width: 100vw;
  top: -10px;
  left: -100vw;
  background-color: white;
  z-index: 10;
}

.square-hide-right {
  position: absolute;
  height: 100%;
  width: 100vw;
  top: -10px;
  right: -100vw;
  background-color: white;
  z-index: 10;
}

.swiper,
.swiper-container {
  overflow: unset;
  margin: 0 -1vw;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  /* position the prev button outside the left of the slider */
  left: -30px;
  right: auto;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  /* position the next button outside the right of the slider */
  right: -30px;
  left: auto;
}

.swiper-button-next svg, .swiper-button-prev svg {
  scale: 2 !important;
  height: 50px;
  width: 50px;
}

.swiper .card,
.swiper .swiper-slide {
  width: 80vw;
  display: flex;
  justify-content: center;
}

/* Carrousel media queries */
@media only screen and (min-width: 640px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 80vw;
  }
}
@media only screen and (min-width: 768px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 40vw;
  }
}
@media only screen and (min-width: 1024px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 25vw;
  }
}
@media only screen and (min-width: 1280px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 25vw;
  }
}
@media only screen and (min-width: 1680px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 20vw;
  }
}
@media only screen and (min-width: 2160px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 90%;
  }
}
/* Hide the overflow cards */
.swiper-container {
  overflow: hidden;
}

/*Diminui o tamanho da tipografia em mobile para o texto não ficar demasiado grande*/
@media only screen and (max-width: 500px) {
  p {
    font-size: 1.5rem !important;
  }
  h1 {
    font-size: 2.5rem !important;
  }
  .greenbk {
    justify-content: center !important;
  }
}
/*Make all buttons be black when activated*/
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  background-color: var(--HapmentorBlack) !important;
}

/*A partir daqui, copiei alguns styles para este app.css ficar igual ao do creator,
por estar mais atualizado que este*/
/*Breadcrumb styles*/
.breadcrumb {
  margin: 30px;
}
.breadcrumb .row, .breadcrumb .bread-tittle, .breadcrumb .bread-path {
  padding-left: 0 !important;
}
.breadcrumb .bread-path ul, .breadcrumb .bread-path a {
  color: var(--HapmentorGreen);
  text-decoration: none !important;
  font-size: 0.9rem;
}
.breadcrumb .bread-path ul a:hover, .breadcrumb .bread-path ul a:active, .breadcrumb .bread-path a a:hover, .breadcrumb .bread-path a a:active {
  color: var(--HapmentorBlue) !important;
}
.breadcrumb .greenbttn {
  height: 40px;
  margin-right: 100px !important;
}

@media only screen and (max-width: 768px) {
  .breadcrumb .bread-path {
    display: none !important;
  }
  .breadcrumb .greenbttn {
    margin-right: 0 !important;
  }
}
.viewbttn {
  width: fit-content !important;
  padding: 0 8px !important;
}
.viewbttn span {
  margin: 0 3px;
}
@media only screen and (max-width: 768px) {
  .viewbttn .view {
    display: none !important;
  }
}

/*End breadcrumb styles*/
/*Create HAP pop-up modal styles*/
#newHapModal .modal-content {
  border-radius: 0;
  border: solid 2px var(--HapmentorBlue);
  margin-top: 30vh;
}
#newHapModal .modal-content .modal-header {
  border-bottom: solid 2px var(--HapmentorBlue);
  padding: 0 !important;
  height: 55px;
}
#newHapModal .modal-content .modal-header .modal-tittle {
  margin: 15px;
}
#newHapModal .modal-content .modal-header .modal-close {
  border-left: solid 2px var(--HapmentorBlue) !important;
  height: 100% !important;
  width: 55px !important;
}
#newHapModal .modal-content .modal-header .modal-close .btn-close {
  margin: 0 !important;
  background: transparent !important;
  opacity: 100 !important;
}
#newHapModal .modal-content .modal-header .modal-close .btn-close span {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--HapmentorBlue) !important;
}
#newHapModal .modal-content .modal-header h5 {
  font-size: 1rem !important;
  color: var(--HapmentorBlue);
  padding: 0 !important;
}
#newHapModal .modal-content .modal-body .Select-hap-type {
  justify-content: space-between;
}
#newHapModal .modal-content .modal-body .Select-hap-type input {
  width: 48%;
  height: 120px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
  cursor: pointer;
}
#newHapModal .modal-content .modal-body .Select-hap-type #event {
  background-image: url("../img/event black.svg");
}
#newHapModal .modal-content .modal-body .Select-hap-type #course {
  background-image: url("../img/course black.svg");
}
#newHapModal .modal-content .modal-body .Select-hap-type .form-control:focus, #newHapModal .modal-content .modal-body .Select-hap-type .form-control:focus, #newHapModal .modal-content .modal-body .Select-hap-type .active {
  background-color: var(--HapmentorBlue);
  border-color: var(---HapmentorBlue) !important;
  color: var(--HapmentorBlue);
}
#newHapModal .modal-content .modal-body .Select-hap-type #course:focus, #newHapModal .modal-content .modal-body .Select-hap-type #course.active {
  background-image: url("../img/course white.svg") !important;
}
#newHapModal .modal-content .modal-body .Select-hap-type #event:focus, #newHapModal .modal-content .modal-body .Select-hap-type #event.active {
  background-image: url("../img/event white.svg") !important;
}
#newHapModal .modal-content .modal-body .Select-hap-type #un-btn {
  opacity: 1;
}
#newHapModal .modal-content .modal-body .Select-hap-type #bl-btn {
  opacity: 0.7;
}
@media only screen and (max-width: 768px) {
  #newHapModal .modal-content .modal-body .Select-hap-type input {
    background-image: url("../img/course mobile.svg") !important;
    background-size: 40% !important;
  }
}
#newHapModal .modal-content .modal-body h6, #newHapModal .modal-content .modal-body span {
  color: var(--HapmentorBlue);
}
#newHapModal .modal-content .modal-body span {
  font-size: xx-small;
}
#newHapModal .modal-content .modal-body .tab-content {
  margin-bottom: 20px;
}
#newHapModal .modal-content .modal-body #pills-tabContent span {
  color: var(--HapmentorGreen);
  font-size: 16px;
}
#newHapModal .modal-content .modal-footer {
  border-top: none !important;
}
#newHapModal .modal-content .modal-footer button {
  height: 50px;
}

/*form check styles*/
.form-check {
  margin-top: 10px;
  margin-bottom: 10px;
}
.form-check input {
  width: 20px;
  height: 20px;
  padding: 0 !important;
}
.form-check label {
  color: var(--HapmentorBlue);
}

.form-check-input:checked[type=checkbox] {
  background-color: var(--HapmentorGreen) !important;
  background-image: none;
  border-color: var(--HapmentorBlue) !important;
}

.form-check-input:focus {
  box-shadow: none !important;
}

@media only screen and (min-width: 2160px) {
  .page-width {
    width: 100% !important;
    max-width: 2160px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .page-student {
    padding-bottom: 100px !important;
    padding-top: 50px !important;
  }
  #hap-header {
    max-width: 2160px !important;
  }
  .page-width-bk {
    width: 100% !important;
  }
  .blue-bk {
    background-color: var(--HapmentorBlue) !important;
  }
  .green-bk {
    background-color: var(--HapmentorGreen) !important;
  }
  .black-bk {
    background-color: var(--HapmentorBlack) !important;
  }
  .light-green-bk {
    background-color: var(--HapmentorGreenOpacity) !important;
  }
}
.hap-header {
  height: 160px !important;
}
.hap-header .btn, .hap-header .btn-primary:hover {
  color: white;
}

/*Invitations pop-up modal styles*/
#inviteModal .modal-content {
  border-radius: 0;
  border: solid 2px var(--HapmentorBlue);
  margin-top: 30vh;
}
#inviteModal .modal-content .modal-header {
  padding: 0 !important;
  height: 55px;
}
#inviteModal .modal-content .modal-header .modal-tittle {
  margin: 15px;
}
#inviteModal .modal-content .modal-header h5 {
  font-size: 1rem !important;
  color: var(--HapmentorBlue);
  padding: 0 !important;
}
#inviteModal .modal-content textarea {
  height: 20vh;
}
#inviteModal .modal-content .modal-footer {
  border: 0;
}
#inviteModal .modal-content .modal-footer .greenbttn {
  width: 150px;
}

#newModuleModal .modal-content, #newLessonModal .modal-content {
  border-radius: 0;
  border: solid 2px var(--HapmentorBlue);
  margin-top: 30vh;
}
#newModuleModal .modal-content .modal-header, #newLessonModal .modal-content .modal-header {
  border-bottom: solid 2px var(--HapmentorBlue);
  padding: 0;
  height: 55px;
}
#newModuleModal .modal-content .modal-header .modal-tittle, #newLessonModal .modal-content .modal-header .modal-tittle {
  margin: 10px;
}
#newModuleModal .modal-content .modal-header .modal-close, #newLessonModal .modal-content .modal-header .modal-close {
  border-left: solid 2px var(--HapmentorBlue) !important;
  height: 100% !important;
  width: 55px !important;
}
#newModuleModal .modal-content .modal-header .modal-close .btn-close, #newLessonModal .modal-content .modal-header .modal-close .btn-close {
  margin: 0 !important;
  background: transparent !important;
  opacity: 100 !important;
}
#newModuleModal .modal-content .modal-header .modal-close .btn-close span, #newLessonModal .modal-content .modal-header .modal-close .btn-close span {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--HapmentorBlue) !important;
}
#newModuleModal .modal-content .modal-footer, #newLessonModal .modal-content .modal-footer {
  border-top: 0;
}

/*Homepage without authentication*/
.trad {
  font-size: 0.8rem !important;
  padding: 0px !important;
}

.hap-menu-link div a {
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.hap-menu-link div a:hover {
  color: var(--HapmentorGreen);
}

.nav-link:hover {
  background: none !important;
}

.highlight {
  color: #b3c3a2;
}

.landing {
  margin-top: 50px;
  color: white;
  font-size: 5rem;
}

#claim {
  font-size: 1.5rem;
  margin-bottom: 3vh;
}

.mr-3 {
  margin-right: 30px;
}

/*Header rules*/
.Hap-logo, .Hap-logo2 {
  padding: 5px;
  z-index: 1;
}

.Hap-logo {
  height: 70px !important;
}

.Hap-logo2 {
  display: none;
  height: 50px !important;
}

#hap-header {
  margin: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: space-between;
  height: 160px !important;
}

.navbar {
  height: auto;
}

@media (max-width: 768px) {
  #notbtn {
    display: none;
  }
}

.hap-body {
  /* background-color: white;*/
  padding: 5vh 10vw 5vh !important;
  height: 100%;
}
.hap-body h1 {
  padding: 7% 0;
}
.hap-body .p-2 {
  padding: 2.5vw !important;
}

@media only screen and (max-width: 768px) {
  .p-2 {
    display: none;
  }
}
/*Carrousel*/
/* Initialize Swiper */
.square-hide-left {
  position: absolute;
  height: 100%;
  width: 100vw;
  top: -10px;
  left: -100vw;
  background-color: white;
  z-index: 10;
}

.square-hide-right {
  position: absolute;
  height: 100%;
  width: 100vw;
  top: -10px;
  right: -100vw;
  background-color: white;
  z-index: 10;
}

.swiper,
.swiper-container {
  overflow: unset;
  margin: 0 -1vw;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  /* position the prev button outside the left of the slider */
  left: -30px;
  right: auto;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  /* position the next button outside the right of the slider */
  right: -30px;
  left: auto;
}

.swiper-button-next svg, .swiper-button-prev svg {
  scale: 2 !important;
  height: 50px;
  width: 50px;
}

.swiper .card,
.swiper .swiper-slide {
  width: 80vw;
  display: flex;
  justify-content: center;
}

/* Carrousel media queries */
@media only screen and (min-width: 640px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 80vw;
  }
}
@media only screen and (min-width: 768px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 40vw;
  }
}
@media only screen and (min-width: 1024px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 25vw;
  }
}
@media only screen and (min-width: 1280px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 25vw;
  }
}
@media only screen and (min-width: 1680px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 20vw;
  }
}
@media only screen and (min-width: 2160px) {
  .swiper .card,
  .swiper .swiper-slide {
    width: 90%;
  }
}
/* Hide the overflow cards */
.swiper-container {
  overflow: hidden;
}

/*Diminui o tamanho da tipografia em mobile para o texto não ficar demasiado grande*/
@media only screen and (max-width: 500px) {
  p {
    font-size: 1rem !important;
  }
  h1 {
    font-size: 2.2rem !important;
  }
  .greenbk {
    justify-content: center !important;
  }
}
/*Make all buttons be black when activated*/
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  background-color: var(--HapmentorBlack) !important;
}

/*To swipe between buttons for mobile and desktop*/
@media only screen and (min-width: 1000px) {
  .desktop-button {
    display: flex;
  }
  .mobile-button {
    display: none !important;
  }
}
@media only screen and (max-width: 1000px) {
  .desktop-button {
    display: none !important;
  }
  .mobile-button {
    display: flex;
  }
}
/*Algumas classes de conveniência que não há no bootstrap */
/*width*/
.w-10 {
  width: 10%;
}

.w-15 {
  width: 15%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-35 {
  width: 35%;
}

.w-40 {
  width: 40%;
}

.w-45 {
  width: 45%;
}

.w-50 {
  width: 50%;
}

.w-55 {
  width: 55%;
}

.w-60 {
  width: 60%;
}

.w-65 {
  width: 65%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-85 {
  width: 85%;
}

.w-90 {
  width: 90%;
}

.w-95 {
  width: 95%;
}

.w-100 {
  width: 100%;
}

/*max width*/
.mw-50 {
  max-width: 50%;
}

.mw-30 {
  max-width: 30%;
}

.mh-50 {
  max-height: 50%;
}

.mw-200p {
  max-width: 200px;
}

.mw-250p {
  max-width: 250px;
}

.mw-300p {
  max-width: 300px;
}

.mw-350p {
  max-width: 350px;
}

/*color*/
.c-green {
  color: var(--HapmentorGreen);
}

.c-blue {
  color: var(--HapmentorBlue);
}

.c-white {
  color: white;
}

.c-black {
  color: var(--HapmentorBlack);
}

.c-grey {
  color: var(--HapmentorGrey);
}

.c-greenop {
  color: var(--HapmentorGreenOpacity);
}

.fit-content-height {
  height: fit-content;
}

.dropdown ::after {
  display: none;
}
.dropdown .btn {
  background: transparent;
  border: solid 2px var(--HapmentorBlue);
  color: var(--HapmentorBlue);
  font-size: 1rem;
}
.dropdown .btn-check:checked + .btn, .dropdown :not(.btn-check) + .btn:active, .dropdown .btn:first-child:active, .dropdown .btn.active, .dropdown .btn.show {
  background-color: transparent !important;
}
.dropdown span {
  padding-left: 20px;
}

/*dropdown menu general styles*/
.dropdown-menu {
  background: white;
  border: solid 2px var(--HapmentorBlue);
  color: var(--HapmentorBlue);
}
.dropdown-menu .dropdown-item {
  padding: 0.25rem 12px;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
  color: #fff;
  background-color: var(--HapmentorBlue);
}
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: var(--HapmentorGreen);
}

/*Student´s Dashboard page (Resume last lesson)*/
.resume .hap-name {
  color: var(--HapmentorBlue);
}
.resume .hap-photo {
  width: 300px;
  height: 200px;
  object-fit: cover;
}
.resume .resume-content .hap-content {
  color: var(--HapmentorBlue);
}
.resume .resume-content .started {
  font-weight: 500;
}
.resume .resume-content .hap-type {
  width: 20vw;
  max-width: 150px;
  min-width: 110px;
  padding: 0;
  margin-bottom: 15px;
}
.resume .resume-content .greenbttn {
  width: 180px;
}
@media only screen and (max-width: 1000px) {
  .resume .resume-content {
    width: 100% !important;
    margin: 20px 0 !important;
  }
  .resume .resume-mentor {
    width: 100% !important;
  }
}
@media only screen and (max-width: 550px) {
  .resume .resume-content {
    width: 100% !important;
    margin: 10px 0 !important;
  }
  .resume .resume-mentor {
    width: 100% !important;
    margin-top: 10px;
  }
}
@media only screen and (max-width: 1245px) {
  .resume .resume-mentor {
    margin-top: 15px;
    padding: 0;
  }
}

@media only screen and (max-width: 1000px) {
  .resume img, .resume h5 {
    padding-left: 0 !important;
  }
}
.your-progress .progress-pointer img {
  width: 30px;
}
.your-progress .progress-pointer p {
  margin-bottom: 0;
}
.your-progress .progress-pointer .module-number, .your-progress .progress-pointer .module-name {
  font-size: 0.9rem;
  color: var(--HapmentorBlue);
}
.your-progress .progress-pointer .lesson-number, .your-progress .progress-pointer .lesson-name {
  font-size: 0.6rem;
}
@media only screen and (max-width: 800px) {
  .your-progress .progress-pointer {
    width: 100%;
  }
}

/*progress bar styles*/
.progress {
  width: 80%;
  border: solid 2px var(--HapmentorBlue);
  border-radius: 0;
  height: 1.4rem;
  background-color: white;
  padding: 0;
  margin-left: 10px;
}
.progress .progress-bar {
  background-color: var(--HapmentorGreen) !important;
  border-right: solid 2px var(--HapmentorBlue);
}

/*My HAPs page*/
.my-haps input {
  margin-right: 20px;
  width: 65%;
  height: 40px;
}

/*HAP details*/
#HAP-details .cattag {
  font-size: 0.7rem !important;
  padding: 0.4vw !important;
  max-width: fit-content !important;
  width: 140px !important;
}
#HAP-details #overview .resume-content .my-list {
  width: 180px;
  padding: 7px 0;
}
#HAP-details #overview .resume-content .my-list span {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}
@media only screen and (max-width: 1245px) {
  #HAP-details #overview .resume-mentor {
    margin-top: 15px;
    padding: 0;
  }
}

/*Checkout page*/
#checkout .hap-type {
  width: 20vw;
  max-width: 150px;
  min-width: 110px;
  padding: 0;
  margin-bottom: 15px;
}
#checkout .form-check {
  margin-right: 0;
  align-items: center !important;
}
#checkout .form-check .form-check-input {
  margin-right: 7px !important;
}
#checkout .form-check label {
  font-size: 0.9rem;
  font-weight: 500;
}
#checkout .dropdown {
  width: 250px;
}
#checkout .dropdown .dropdown-menu {
  height: auto;
  max-height: 300px;
  overflow-x: hidden;
  transform: translate3d(0px, 38px, 0px) !important;
  width: 250px !important;
}
#checkout .payment {
  border: solid 2px var(--HapmentorBlue);
  padding: 7px;
  width: 40px;
  text-decoration: none;
  color: var(--HapmentorBlue);
  max-height: 40px;
}
#checkout .payment material-symbols-sharp {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}
#checkout .payment img {
  height: auto;
  max-height: 20px;
  object-fit: contain;
}
#checkout .payment-details {
  border-right: solid 2px var(--HapmentorBlue) !important;
  padding-right: 25px;
}
#checkout .summary .terms {
  font-size: 0.7rem !important;
}
#checkout .summary a {
  text-decoration: none;
}
@media only screen and (max-width: 768px) {
  #checkout .summary {
    margin-top: 20px !important;
  }
  #checkout .payment-details {
    border-right: none !important;
  }
}

/*Shopping Cart page*/
#cart .payment {
  border: solid 2px var(--HapmentorBlue);
  padding: 7px;
  width: 40px;
  text-decoration: none;
  color: var(--HapmentorBlue);
  max-height: 40px;
}
#cart .payment-details {
  border-right: solid 2px var(--HapmentorBlue) !important;
  padding-right: 25px;
}
#cart .summary .terms {
  font-size: 0.7rem !important;
}
#cart .summary a {
  text-decoration: none;
}
#cart .cart-hap {
  border: solid 2px var(--HapmentorBlue);
  height: 130px;
  padding: 10px;
}
#cart .cart-hap .bluebttn {
  width: 40px;
  height: 40px;
}
@media only screen and (max-width: 768px) {
  #cart .summary {
    margin-top: 20px !important;
  }
  #cart .payment-details {
    border-right: none !important;
  }
}

/*Teste de animação no botão de resume lesson*/
#buttontest button {
  font-size: 0.9em;
  background: white;
  color: var(--HapmentorGreen);
  border: solid 2px var(--HapmentorGreen);
  padding: 0.85em 0.75em;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 180px;
}
#buttontest button:hover {
  color: white;
}
#buttontest button::after {
  content: "";
  background: var(--HapmentorGreen);
  position: absolute;
  z-index: -1;
  padding: 0.85em 0.75em;
  display: block;
}
#buttontest button[class^=slide]::after {
  transition: all 0.35s;
}
#buttontest button[class^=slide]:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 0.35s;
}
#buttontest button.slide_from_left::after {
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
}

@media only screen and (max-width: 500px) {
  .haps-more {
    flex-direction: column !important;
  }
}
/*For modals*/
.modal-content {
  border-radius: 0;
  border: solid 2px var(--HapmentorBlue);
  margin-top: 30vh;
}
.modal-content .modal-header {
  border-bottom: solid 2px var(--HapmentorBlue);
  padding: 0 !important;
  height: 55px;
}
.modal-content .modal-header .modal-tittle {
  margin: 15px;
}
.modal-content .modal-header .modal-close {
  border-left: solid 2px var(--HapmentorBlue) !important;
  height: 100% !important;
  width: 55px !important;
}
.modal-content .modal-header .modal-close .btn-close {
  margin: 0 !important;
  background: transparent !important;
  opacity: 100 !important;
}
.modal-content .modal-header .modal-close .btn-close span {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--HapmentorBlue) !important;
}
.modal-content .modal-header h5 {
  font-size: 1rem !important;
  color: var(--HapmentorBlue);
  padding: 0 !important;
}
.modal-content .modal-body p {
  font-size: 0.8rem;
}
.modal-content .modal-footer {
  border-top: 0;
}

/*For cookies modal*/
#cookiesPreferencesModal .modal-dialog .cookies-policy {
  font-size: 0.6rem !important;
}
#cookiesPreferencesModal .modal-dialog .cookies-choice {
  border: solid 2px var(--HapmentorBlue);
  padding: 10px 15px;
}
#cookiesPreferencesModal .modal-dialog .cookies-choice .enabled {
  height: 40px;
}
#cookiesPreferencesModal .modal-dialog .cookies-choice .nav-item {
  height: 40px;
  width: 48px;
}
#cookiesPreferencesModal .modal-dialog .cookies-choice .nav-link {
  border: solid 2px var(--HapmentorBlue);
  border-radius: 0;
  color: var(--HapmentorBlue);
  margin: -1px;
}
#cookiesPreferencesModal .modal-dialog .cookies-choice .nav-link:active {
  color: white !important;
  background-color: var(--HapmentorBlue) !important;
}
@media (min-width: 576px) {
  #cookiesPreferencesModal .modal-dialog {
    max-width: 650px;
  }
  #cookiesPreferencesModal .modal-dialog .cookies-policy {
    font-size: 0.8rem !important;
  }
}

.c-pointer {
  cursor: pointer;
}

.cookies {
  border-top: solid 1px white;
}

.grid-container .grid-stack {
  max-width: 100vw;
}
.grid-container .grid-stack .grid-stack-item {
  max-width: 100vw;
}
.grid-container .grid-stack .grid-stack-item .cell-content img {
  max-width: 100%;
}

.mw-100 {
  max-width: 100% !important;
}

/*# sourceMappingURL=app.css.map */