.navbar-avatar {
  object-fit: cover;
  width: 32px;
  height: 32px;
  max-height: inherit !important;
  border-radius: 50%;
}

/* this removes bullets from the hover dropdown menu items when logged in */
.navbar-item li {
  list-style: none;
}

#profile-picture {
  display: flex;
  justify-content: center;
}

#profile-picture img.avatar {
  object-fit: cover;
  width: 128px;
  height: 128px;
  border-radius: 50%;
}

#profile-upload-holder {
  padding-top: 0.5em;
}

#profile-upload-holder input[type="file"] {
  display: none;
}

.progress-bar {
  background-color: var(--primary);
  width: 2px;
}

#progress-bar-message {
  color: var(--gray);
}

.add-loading-dots:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
  }

  40% {
    color: black;
    text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
  }

  60% {
    text-shadow: .25em 0 0 black, .5em 0 0 rgba(0, 0, 0, 0);
  }

  80%, 100% {
    text-shadow: .25em 0 0 black, .5em 0 0 black;
  }
}

/* this makes the list items look nice on mobile */
.upgrade-features li {
  display: flex;
}

.upgrade-features li .pg-icon {
  margin-right: 0.5rem;
}

.upgrade-features li .upgrade-feature {
  width: 100%;
}

#subscription-details-table .subscription-detail {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0.5rem;
}

#subscription-details-table .subscription-detail .subscription-detail-label {
  width: 16rem;
  text-align: right;
  margin-right: 1rem;
}

#subscription-details-table .subscription-detail .subscription-detail-value {
  width: 100%;
}

#subscription-details-table .subscription-detail .subdetail {
  font-size: 0.8rem;
  margin-top: 0.2rem;
}

#plan-selector .plan {
  height: 100%; /* fill the whole column */
  /* prevent shifting when border is added */
  border: 3px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 1rem;
}

#plan-selector .plan.is-selected {
  border: 3px solid var(--primary);
}

#plan-selector .plan .plan-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#plan-selector .plan .price {
  font-size: 1.5rem;
}

/* alpine.js cloak support */
[x-cloak] {
  display: none !important;
}

/* ensure htmx links use pointers */
a[hx-get] {
  cursor: pointer;
}

.h-100 {
  height: 100%;
}

.muted-link {
  color: hsl(0, 0%, 71%);
}

.muted-link:hover {
  color: hsl(0, 0%, 48%);
  text-decoration: underline;
}

/* this is the default class assigned to errors by django forms */
.errorlist {
  color: var(--danger);
}

img.socialicon {
  padding-right: 0.5em;
  max-width: 24px;
  max-height: 24px;
}

/* css loader https://loading.io/css/ */
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ripple div {
  position: absolute;
  border: 4px solid var(--primary);
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

@charset "utf-8";

.shepherd-button{background:#3288e6;border:0;border-radius:3px;color:hsla(0,0%,100%,.75);cursor:pointer;margin-right:.5rem;padding:.5rem 1.5rem;transition:all .5s ease}.shepherd-button:not(:disabled):hover{background:#196fcc;color:hsla(0,0%,100%,.75)}.shepherd-button.shepherd-button-secondary{background:#f1f2f3;color:rgba(0,0,0,.75)}.shepherd-button.shepherd-button-secondary:not(:disabled):hover{background:#d6d9db;color:rgba(0,0,0,.75)}.shepherd-button:disabled{cursor:not-allowed}
.shepherd-footer{border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:flex-end;padding:0 .75rem .75rem}.shepherd-footer .shepherd-button:last-child{margin-right:0}
.shepherd-cancel-icon{background:transparent;border:none;color:hsla(0,0%,50%,.75);cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:hsla(0,0%,50%,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}
.shepherd-title{color:rgba(0,0,0,.75);display:flex;flex:1 0 auto;font-size:1rem;font-weight:400;margin:0;padding:0}
.shepherd-header{align-items:center;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;justify-content:flex-end;line-height:2em;padding:.75rem .75rem 0}.shepherd-has-title .shepherd-content .shepherd-header{background:#e6e6e6;padding:1em}
.shepherd-text{color:rgba(0,0,0,.75);font-size:1rem;line-height:1.3em;padding:.75em}.shepherd-text p{margin-top:0}.shepherd-text p:last-child{margin-bottom:0}
.shepherd-content{border-radius:5px;outline:none;padding:0}
.shepherd-element{background:#fff;border:none;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.2);margin:0;max-width:400px;opacity:0;outline:none;padding:0;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:#fff;content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:#e6e6e6}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}
.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0s .3s,opacity .3s 0s;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}
@charset "utf-8";

:root {
  --grey-dark: #4a4a4a;
  --grey-light: #b5b5b5;
  --grey-bg: hsla(221, 14%, 0%, 0.5);
  --light: #f1f2f3;
  --primary: #383050;
  --primary-transparent: hsla(255, 25%, 25%, 0.9);
  --secondary: hsl(255, 20%, 50%);
  --muted: #b5b5b5;
  --green: #49ae1e;
}

html,
body {
  height: fit-content;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4 {
  font-size: unset;
}

#blog-index-header,
#author-index-header {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
  #blog-index-header,
  #author-index-header {
    margin-top: 0.5rem;
  }
}

#articles .card {
    border-radius: 10px;
}

#newest-article h3,
#popular-articles h3,
#articles h3 {
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

#newest-article h3.is-size-4,
#popular-articles h3.is-size-4,
#articles h3.is-size-4 {
  line-height: 2rem;
}

#newest-article h3.is-size-5,
#popular-articles h3.is-size-5,
#articles h3.is-size-5 {
  line-height: 1.5rem;
}

#newest-article h3.is-size-6,
#popular-articles h3.is-size-6,
#articles h3.is-size-6 {
  line-height: 1.25rem;
}

@media screen and (max-width: 768px) {
  #newest-article h3.is-size-5-mobile,
  #popular-articles h3.is-size-5-mobile,
  #articles h3.is-size-5-mobile {
    line-height: 1.5rem;
  }
}
#newest-article .author figure.image,
#popular-articles .author figure.image,
#articles .author figure.image {
  display: inline-block;
}

#newest-article .author figure.image img,
#popular-articles .author figure.image img,
#articles .author figure.image img {
  border-radius: 50%;
}

@media screen and (max-width: 768px) {
  #newest-article {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 768px) {
  #popular-articles .popular-post-image {
    padding-bottom: 0;
  }

  #popular-articles .popular-post-info {
    padding-top: 0;
  }
}


#authors-list {
  margin-top: 3rem;
}

@media screen and (max-width: 768px) {
  #authors-list {
    margin-top: 1.5rem;
  }
}

#about-author {
  margin-top: 3rem;
}

#about-author .author-content {
  margin-left: 1.5rem;
}

@media screen and (max-width: 768px) {
  #about-author {
    margin-top: 1.5rem;
  }

  #about-author .is-flex {
    flex-direction: column;
  }

  #about-author .is-flex .image {
    margin-bottom: 1rem;
  }

  #about-author .is-flex .author-image {
    margin: auto;
  }

  #about-author .is-flex .author-content {
    margin-left: 0;
  }

  #about-author .is-flex .author-content .author-header {
    text-align: center;
  }
}

.columns.about-feedback-wrapper {
  display: flex;
  align-items: center;
}

.columns.about-feedback-wrapper .column.about-feedback {
  padding: 3rem;
}

@media screen and (max-width: 768px) {
  .columns.about-feedback-wrapper {
    flex-direction: column;
  }

  .columns.about-feedback-wrapper .column.about-feedback {
    padding: 0 1rem;
  }

  .columns.about-feedback-wrapper .column.about-feedback:first-child {
    padding-top: 1rem;
  }

  .columns.about-feedback-wrapper .column.about-feedback:last-child {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.about-profile-pic {
  height: 250px;
  width: 250px;
}

@media screen and (max-width: 480px) {
  .about-profile-pic {
    height: 200px;
    width: 200px;
  }
}

#app-content-header {
  /* Make dashboard sticky header below navbar */
  position: sticky;
  top: var(--navbar-height);
  z-index: 5;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
}

.popup-notifications .notification:not(:last-child) {
  margin-bottom: 0.5rem;
}

.popup-notifications .notification:last-child {
  margin-bottom: 1.5rem;
}

.content-wrapper {
  flex: 1;
  min-height: calc(100dvh - var(--footer-height) - var(--navbar-height));
}

@media screen and (max-width: 768px) {
  .content-wrapper {
    min-height: calc(100dvh - var(--navbar-height));
  }
}

.form-wrapper .boxed {
  margin-bottom: 1.5rem;
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .form-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .form-wrapper .boxed {
    min-height: 0;
  }

  .form-wrapper form {
    flex: 1;
  }

  .form-wrapper .buttons.field.is-grouped {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .form-wrapper.onboarding-form,
  .form-wrapper.consent-form {
    min-height: calc(100dvh - 10rem);
  }
}

.form-wrapper.app-form .boxed {
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 768px) {
  .form-wrapper.app-form {
    min-height: calc(100dvh - 6rem);
  }

  .form-wrapper.app-form .boxed table {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 480px) {
  .form-wrapper.app-form .boxed {
    margin: 0;
  }
}

@media screen and (max-width: 768px) {
  .form-wrapper.dummy-form {
    min-height: calc(100dvh - 6rem);
  }

  .form-wrapper.dummy-form .boxed {
    flex: 1;
  }

  .form-wrapper.dummy-form form {
    flex: unset;
  }
}

@media screen and (max-width: 768px) {
  .form-wrapper.double-form {
    min-height: calc(100dvh - 27.1rem);
  }

  .form-wrapper.double-form .double-form-inner-wrapper {
    flex: 1;
  }
}

#disclaimer-form {
  margin-top: 3rem;
}

@media screen and (max-width: 768px) {
  #disclaimer-form {
    margin-top: 1rem;
  }

  #disclaimer-form .boxed {
    margin-bottom: 1rem;
  }

  #disclaimer-form .form-wrapper.onboarding-form {
    min-height: calc(100dvh - 6rem);
  }
}

#start-guide {
  margin-top: 3rem;
}

@media screen and (max-width: 768px) {
  #start-guide {
    margin-top: 1rem;
  }
}

b {
  font-weight: 600;
}

.blog-page h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
  .blog-page h2 {
    font-size: 1.25rem;
  }
}

.blog-page h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
  .blog-page h3 {
    font-size: 1rem;
  }
}

.blog-page h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.blog-page img {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.blog-page ol {
  margin: 1rem 0 1rem 1.25rem;
}

.blog-page ol li {
  margin: 0.5rem 0;
  padding-left: 0.75rem;
}

.blog-page ul {
  margin: 1rem 0 1rem 1.75rem;
}

.blog-page ul li {
  margin: 0.5rem 0;
  padding-left: 0.25rem;
}

.blog-page .hero-image img {
  margin: 0;
}

.blog-page .meta {
  margin: 0.75rem 0;
}

@media screen and (max-width: 768px) {
  .blog-page .meta {
    margin: 0.5rem 0;
    line-height: 1.5rem;
  }
}

.blog-page .authors-info {
  margin: 1rem 0;
}

@media screen and (max-width: 768px) {
  .blog-page .authors-info {
    margin: 0.5rem 0;
  }
}

.blog-page .authors-info img {
  margin: 0;
}

.blog-page .table-of-content {
  counter-reset: section;
}

.blog-page .table-of-content ol {
  list-style: none;
  margin: 0.5rem 0 0.5rem 0.75rem;
  padding-left: 0;
}

.blog-page .table-of-content ol li {
  counter-increment: section;
  margin: 0.25rem 0;
}

.blog-page .table-of-content ol li::before {
  content: counters(section, ".");
  color: var(--secondary);
  padding-right: 0.75rem;
}

.blog-page .table-of-content ol li ol {
  counter-reset: subsection;
  list-style: none;
  margin-left: 1rem;
}

.blog-page .table-of-content ol li ol li {
  counter-increment: subsection;
  margin: 0.5rem 0;
}

.blog-page .table-of-content ol li ol li::before {
  content: counters(section, ".") "." counter(subsection);
  color: var(--secondary);
  padding-right: 0.75rem;
}

.blog-page .table-of-content ol li ol li ol {
  counter-reset: subsubsection;
  list-style: none;
  margin-left: 1rem;
}

.blog-page .table-of-content ol li ol li ol li {
  counter-increment: subsubsection;
  margin: 0.25rem 0;
}

.blog-page .table-of-content ol li ol li ol li::before {
  content: counters(section, ".") "." counter(subsection) "." counter(subsubsection);
  color: var(--secondary);
  padding-right: 0.75rem;
}

.blog-header {
  margin-top: 1rem;
}

@media screen and (max-width: 768px) {
  .blog-header {
    margin-top: 0.5rem;
  }
}

.bordered {
  border: 1px solid var(--grey-light);
  border-radius: 10px;
  padding: 1rem;
}

.bordered.has-shadow {
  border: none;
  box-shadow: 0 2px 4px var(--grey-light);
}

.bordered.is-form {
  padding: 2rem 3rem;
  height: auto;
}

@media screen and (max-width: 768px) {
  .bordered.is-form {
    padding: 2rem;
  }
}

.boxed {
  margin: auto;
  max-width: 500px;
  min-height: 400px;
}

.boxed.no-height {
  min-height: 0;
}

#fullpage-form.boxed {
  max-width: 400px;
}

@media screen and (max-width: 768px) {
  #fullpage-form.boxed {
    margin-top: 0;
  }
}

.boxed-width-max-500 {
  max-width: 500px;
}

@media screen and (max-width: 768px) {
  .boxed-width-max-500 {
    max-width: 100%;
  }
}

.boxed-width,
.boxed-title {
  width: 500px;
  padding-bottom: 1.5rem;
}

@media screen and (max-width: 768px) {
  .boxed-width,
  .boxed-title {
    width: 100%;
  }

  .boxed-title {
    padding-bottom: .75rem;
  }
}

.boxed-title.is-wide {
  width: 750px;
  padding-bottom: 2rem;
}

@media screen and (max-width: 768px) {
  .boxed-title.is-wide {
    width: 100%;
    padding-bottom: 1rem;
  }
}

.button-single {
  width: 9rem;
}

.buttons.field.is-grouped {
  justify-content: space-between;
  max-width: 500px;
  margin: auto;
}

.buttons.field.is-grouped .button {
  min-width: 10rem;
  max-width: fit-content;
}

@media screen and (max-width: 768px) {
  .buttons.field.is-grouped .button {
    min-width: 45%;
    max-width: 100%;
  }
}

.buttons.field.is-grouped .button.is-fullwidth {
  width: 100%;
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  .buttons.field.is-grouped.is-stacked-mobile {
    flex-wrap: wrap-reverse;
  }

  .buttons.field.is-grouped.is-stacked-mobile .button.is-fullwidth-mobile {
    max-width: none;
    margin-right: 0 !important;
  }
}

.buttons.field.is-grouped.is-small {
  justify-content: space-between;
  width: 100%;
}

.buttons.field.is-grouped.is-small .button {
  min-width: 48%;
  max-width: fit-content;
}

@media screen and (max-width: 768px) {
  .buttons.field.is-grouped.is-small .button.is-fullwidth-mobile {
    min-width: 100%;
    max-width: 100%;
  }
}

.bottom-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.bottom-left-container,
.bottom-right-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.bottom-left-container {
  align-self: center;
  justify-content: flex-start;
}

.bottom-right-container {
  align-self: flex-end;
  justify-content: flex-end;
  min-width: fit-content;
}

.bottom-left,
.bottom-right {
  padding: .75rem;
  padding-top: .25rem;
  line-height: 1rem;
  position: absolute;
  bottom: .75rem;
}

.bottom-right {
  padding-bottom: .25rem;
  font-size: .9rem;
}

.bottom-right div,
.top-right div {
  white-space: nowrap;
}

.card-box {
  max-width: 400px;
}

.card-box .card {
  min-height: 100px;
}

.centered {
  display: block;
  margin: auto;
}

.content.max-width-900 {
  max-width: 900px;
}

@media screen and (max-width: 768px) {
  .content.max-width-900 {
    width: 100%;
  }
}

.content.max-width-800 {
  max-width: 800px;
}

@media screen and (max-width: 768px) {
  .content.max-width-800 {
    width: 100%;
  }
}

.cookie-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  background-color: white;
  color: var(--grey-dark);
  padding: 1rem;
  z-index: 1000;
  box-shadow: 0 2px 4px var(--grey-light);
  border-radius: 10px;
  display: flex;
}

@media screen and (max-width: 768px) {
  .cookie-bar {
    flex-direction: column;
    padding: 1rem 1.5rem;
  }

  .cookie-bar .cookie-bar-text {
    padding: 0.5rem 0 1rem 0;
  }
}

.cookie-bar .cookie-bar-text {
  margin: auto;
  padding: 0.5rem 1.5rem;
}

.cookie-bar .cookie-bar-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 0.9rem;
}

.cookie-bar .cookie-bar-actions button {
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.cookie-bar a {
  color: var(--secondary);
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  .cookie-table-container {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cookie-table-container .cookie-table {
    min-width: 800px;
    display: table;
  }
}

.cookie-table-container .cookie-table {
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.cookie-table-container .cookie-table tbody tr td {
  vertical-align: middle;
}
#dashboard-onboarding-info {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}

@media screen and (max-width: 1023px) {
  #dashboard-onboarding-info {
    padding: 0.75rem 2rem 0.25rem 2rem;
  }

  #dashboard-onboarding-info .card {
    padding: 0.75rem;
  }

  #dashboard-onboarding-info .button {
    font-size: 1rem;
  }
}

@media screen and (max-width: 768px) {
  #dashboard-onboarding-info {
    padding-left: 0;
    padding-right: 0;
  }

  #dashboard-onboarding-info .button {
    display: flex;
    white-space: normal;
  }

  #dashboard-onboarding-info #dashboard-onboarding-info-container {
    flex-direction: column;
  }

  #dashboard-onboarding-info #dashboard-onboarding-info-text {
    padding-bottom: 0.25rem;
  }

  #dashboard-onboarding-info #dashboard-onboarding-info-btn {
    padding-top: 0.25rem;
  }
}

#dashboard-onboarding-info .card {
  padding: 1rem;
}

#dashboard-onboarding-info .card .steps-container {
  padding-bottom: 0;
}

#dashboard-onboarding-info .card .steps-container .step {
  width: 90px;
  padding-bottom: 0;
}

#dashboard-onboarding-info .card .steps-container .step.is-small {
  width: 45px;
}

#dashboard-onboarding-info .card p,
#dashboard-onboarding-info .card a {
  font-size: 0.9rem;
}

#dashboard-retirement-needs-chart-container {
  height: 250px;
  width: 100%;
  max-width: 400px;
}

@media screen and (max-width: 768px) {
  #dashboard-retirement-needs-chart-container {
    height: 225px;
  }
}

#assets-future-income-overview-card {
  padding: .5rem 1.5rem .5rem 1.5rem;
}

@media screen and (max-width: 768px) {
  #assets-future-income-overview-card {
    padding: 0 .25rem 0 .25rem;
  }
}

#assets-future-income-overview-container {
  height: 250px;
  width: auto;
}

@media screen and (max-width: 768px) {
  #assets-future-income-overview-container {
    height: 225px;
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  #assets-future-income-overview-legend .table {
    min-width: fit-content !important;
  }
}

#assets-future-income-overview-legend .table tr td {
  border: none;
}

#assets-future-income-overview-legend .legend-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#assets-future-income-overview-legend .legend-item.animate-item {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 768px) {
  #dashboard-overview-timeseries-wrapper,
  #retirement-needs-salary-development-wrapper,
  #statutory-pension-timeseries-wrapper,
  #investment-overview-timeseries-wrapper,
  #overnight-money-overview-timeseries-wrapper,
  #cash-overview-timeseries-wrapper,
  #real-estate-income-costs-timeseries-wrapper,
  #real-estate-costs-timeseries-wrapper,
  #real-estate-debt-timeseries-wrapper,
  #real-estate-value-timeseries-wrapper,
  #bav-regular-payment-timeseries-wrapper,
  #bav-investment-timeseries-wrapper,
  #bav-overnight-money-timeseries-wrapper,
  #bav-cash-timeseries-wrapper,
  #bav-cash-reserve-timeseries-wrapper,
  #insurance-regular-payment-timeseries-wrapper,
  #insurance-investment-timeseries-wrapper,
  #insurance-overnight-money-timeseries-wrapper,
  #insurance-cash-timeseries-wrapper,
  #insurance-cash-reserve-timeseries-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
  }
}

#dashboard-overview-timeseries-container,
#investment-overview-timeseries-container,
#overnight-money-overview-timeseries-container,
#cash-overview-timeseries-container,
#real-estate-income-costs-timeseries-container,
#real-estate-costs-timeseries-container,
#bav-investment-timeseries-container,
#bav-overnight-money-timeseries-container,
#bav-cash-timeseries-container,
#insurance-investment-timeseries-container,
#insurance-overnight-money-timeseries-container,
#insurance-cash-timeseries-container {
  height: 400px;
}

@media screen and (max-width: 768px) {
  #dashboard-overview-timeseries-container,
  #investment-overview-timeseries-container,
  #overnight-money-overview-timeseries-container,
  #cash-overview-timeseries-container,
  #real-estate-income-costs-timeseries-container,
  #real-estate-costs-timeseries-container,
  #bav-investment-timeseries-container,
  #bav-overnight-money-timeseries-container,
  #bav-cash-timeseries-container,
  #insurance-investment-timeseries-container,
  #insurance-overnight-money-timeseries-container,
  #insurance-cash-timeseries-container {
    height: 275px;
    width: 600px;
  }
}

#retirement-needs-last-salary-container {
  height: 250px;
  width: 100%;
  max-width: 400px;
}

@media screen and (max-width: 768px) {
  #retirement-needs-last-salary-container {
    height: 225px;
  }
}

#retirement-needs-salary-development-container,
#statutory-pension-timeseries-container,
#bav-regular-payment-timeseries-container,
#bav-cash-reserve-timeseries-container,
#insurance-regular-payment-timeseries-container,
#insurance-cash-reserve-timeseries-container {
  height: 250px;
}

@media screen and (max-width: 768px) {
  #retirement-needs-salary-development-container,
  #statutory-pension-timeseries-container,
  #bav-regular-payment-timeseries-container,
  #bav-cash-reserve-timeseries-container,
  #insurance-regular-payment-timeseries-container,
  #insurance-cash-reserve-timeseries-container {
    height: 225px;
    width: 500px;
  }
}

#real-estate-debt-timeseries-container,
#real-estate-value-timeseries-container,
.column #real-estate-costs-timeseries-container {
  height: 255px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  #real-estate-debt-timeseries-container,
  #real-estate-value-timeseries-container,
  .column #real-estate-costs-timeseries-container {
    height: 225px;
    width: 500px;
  }
}

#assets-user-chart-container,
#willingness-to-pay-chart-container {
  height: 350px;
  width: auto;
}

@media screen and (max-width: 768px) {
  #assets-user-chart-container,
  #willingness-to-pay-chart-container {
    height: 275px;
  }
}

#van-westendorp-willing-to-pay-chart-container,
#van-westendorp-depends-chart-container {
  height: 500px;
  width: auto;
}

@media screen and (max-width: 768px) {
  #van-westendorp-willing-to-pay-chart-container,
  #van-westendorp-depends-chart-container {
    height: 275px;
  }
}

.errorlist li {
  list-style-type: none;
  margin-left: 0;
}

.faqs {
  width: 100%;
}

.faqs button {
  width: 100%;
  text-align: left;
}

.faqs li {
  list-style-type: none;
  margin-left: 0;
  margin-bottom: 0.5rem;
}

.faqs ul.has-list-style li {
  list-style-type: disc;
  margin-left: 1rem;
}

.feedback-container {
  max-height: 350px;
  overflow-y: auto;
  border: 1px solid var(--grey-light);
  border-radius: 6px;
  padding: 0 0.75rem;
  width: 100%;
}

/* Webkit scrollbar */
.feedback-container::-webkit-scrollbar {
  width: 12px;
}

.feedback-container::-webkit-scrollbar-thumb {
  background-color: rgb(200, 200, 200);
  border-radius: 12px;
  border: 2px solid rgb(240, 240, 240);
}

.feedback-container::-webkit-scrollbar-track {
  background-color: rgb(240, 240, 240);
  border-radius: 10px;
}

.feedback-container::-webkit-scrollbar-thumb:hover {
  background-color: rgb(180, 180, 180);
}

.feedback-container::-webkit-scrollbar-button {
  display: none;
}

/* Firefox scrollbar */
@-moz-document url-prefix() {
  .feedback-container {
    scrollbar-width: thin;
    scrollbar-color: rgb(200, 200, 200) rgb(240, 240, 240);
  }
}

@media screen and (max-width: 768px) {
  .has-text-centered-mobile {
    text-align: center;
  }
}

hr.is-solid {
  border-bottom: 1px solid var(--grey-dark) !important;
}

.asset-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.asset-card .asset-description .title {
  font-size: 1.25rem;
}

.asset-card .asset-description .subtitle {
  font-size: 1rem;
}

.asset-card .asset-value .title {
  font-size: 1.5rem;
  color: var(--green);
}

.asset-card .asset-value .title .no-income {
  font-size: 1rem;
}

.asset-card .asset-value .subtitle {
  font-size: 0.75rem;
}

@media screen and (max-width: 768px) {
  .asset-card .asset-description .title {
    font-size: 1rem;
  }

  .asset-card .asset-description .subtitle {
    font-size: 0.75rem;
  }

  .asset-card .asset-value {
    display: none;
  }
}

.asset-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--grey-light);
}

#assets-table .has-text-right {
  white-space: wrap;
}

@media screen and (max-width: 768px) {
  .is-card-mobile {
    box-shadow: 0 2px 4px var(--grey-light);
    border-radius: 10px;
    padding: .5rem;
    margin-bottom: 1rem;
  }
}

.is-grid {
  display: grid;
}

@media screen and (max-width: 768px) {
  .is-grid {
    display: block;
  }
}

.item-card.card {
  min-width: 300px;
  max-width: 400px;
}

.landing-page-feature-list {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media screen and (max-width: 768px) {
  .landing-page-feature-list {
    padding-left: 0;
    padding-right: 0;
  }
}

.landing-page-feature-list li {
  padding-left: 0.25rem;
}

.line-height-normal {
  line-height: normal;
}

.no-break {
  white-space: nowrap;
}

.number-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--primary-transparent);
  color: white;
  margin-right: .75rem;
}

.number-icon .number-icon-text {
  margin: auto;
  line-height: normal;
  font-weight: 800;
  font-size: .75rem;
}

.number-icon-description {
  margin-left: 2.25rem;
}

.onboarding-results-content {
  min-height: 450px;
}

.onboarding-results-content .column:first-child {
  justify-content: flex-end;
}

.onboarding-results-content .column:last-child {
  justify-content: flex-start;
}

@media screen and (max-width: 768px) {
  .onboarding-results-content .column:first-child {
    justify-content: center;
  }
  
  .onboarding-results-content .column:last-child {
    justify-content: center;
  }
}

.onboarding-results-left,
.onboarding-results-right {
  max-width: 400px;
}

@media screen and (max-width: 768px) {
  .onboarding-results-left,
  .onboarding-results-right {
    width: 100%;
  }
}

#investment-deposits-timeseries-wrapper,
#investment-payouts-timeseries-wrapper,
#overnight-money-deposits-timeseries-wrapper,
#overnight-money-payouts-timeseries-wrapper {
  flex-grow: 1;
}


#investment-deposits-timeseries-container,
#investment-payouts-timeseries-container,
#overnight-money-deposits-timeseries-container,
#overnight-money-payouts-timeseries-container {
  position: relative;
  height: 275px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  #investment-deposits-timeseries-container,
  #investment-payouts-timeseries-container,
  #overnight-money-deposits-timeseries-container,
  #overnight-money-payouts-timeseries-container {
    height: 225px;
  }
}

.ml-5-5 {
  margin-left: 1.75rem;
}

.onboarding-retirement-needs-container,
.onboarding-statutory-pension-container {
  position: relative;
  height: 250px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .onboarding-retirement-needs-container,
  .onboarding-statutory-pension-container {
    height: 225px;
    width: 99%;
  }
}

.page-content {
  max-width: 1344px;
  margin: auto;
}

#landing-page-content {
  max-width: 1024px;
  margin: auto;
  height: 100%;
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  #landing-page-content .how-to-header-container {
    flex-direction: column;
    align-items: center;
    hyphens: auto;
  }
}

#landing-page-content .how-to-header-container .how-to-step {
  width: 60px;
  height: 60px;
  background-color: var(--primary-transparent);
  color: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  #landing-page-content .how-to-header-container .how-to-step {
    width: 50px;
    height: 50px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  #landing-page-content .how-to-header-container .how-to-step {
    margin-bottom: 1rem;
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }
}

.footer-content {
  max-width: 1344px;
  margin: auto;
}

.footer-content .column {
  display: grid;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .footer-content .column {
    justify-content: left;
  }

  .footer-content .column .py-1-mobile {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

.footer-content #disclaimer {
  margin: 3rem auto;
  padding: 0 7rem;
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .footer-content #disclaimer {
    padding: 0 3rem;
  }
}

@media screen and (max-width: 768px) {
  .footer-content #disclaimer {
    margin: 1.5rem 0;
    padding: 0;
  }
}

#mission h2,
#mission p {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (max-width: 1023px) {
  #mission h2,
  #mission p {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

#privacy-policy section a {
  color: var(--secondary);
  text-decoration: underline;
}

#privacy-policy section a:hover {
  color: var(--grey-dark);
}

#privacy-policy h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

#privacy-policy h3 {
  font-size: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

#privacy-policy h4,
#privacy-policy h5 {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

#privacy-policy ul {
  margin: 0.75rem 0 0.75rem 1.5rem;
  padding: 0;
}

#privacy-policy .indented {
  margin: 0.5rem 0 0.5rem 1.5rem;
  padding: 0;
}

#privacy-policy .cookie-settings-link-container {
  margin-bottom: 2rem;
}

#privacy-policy .version {
  margin-top: 2rem;
}

.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 10;
}

.scroll-indicator.active {
  display: block;
  opacity: 1;
  color: var(--link);
  background-color: var(--primary-transparent);
  border-radius: 10%;
  padding: 0 .25rem;
}

.scroll-indicator.active:hover {
  background-color: var(--primary);
  cursor: pointer;
}

.top-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
}

.top-left-container,
.top-right-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.top-left-container {
  justify-content: flex-start;
}

.top-right-container {
  justify-content: flex-end;
  min-width: fit-content;
}

.top-left,
.top-right {
  padding: .75rem;
  line-height: 1rem;
}

.top-left {
  font-size: .9rem;
}

.top-right {
  font-size: .9rem;
  padding-bottom: .25rem;
}

ul li {
  list-style-type: disc;
  margin-left: 1rem;
}

ul.menu-list li {
  list-style-type: none;
  margin-left: 0;
}

ul.no-list-style,
.content ul.no-list-style,
ol.no-list-style,
.content ol.no-list-style {
  margin-left: 0;
}

ul.no-list-style li,
.content ul.no-list-style li,
ol.no-list-style li,
.content ol.no-list-style li {
  list-style: none;
  margin-left: 0;
}

ul.double-brackets-number-list,
.content ul.double-brackets-number-list,
ol.double-brackets-number-list,
.content ol.double-brackets-number-list {
  margin-left: 0;
  counter-reset: doubleBracketsNumberCounter;
}

ul.double-brackets-number-list li,
.content ul.double-brackets-number-list li,
ol.double-brackets-number-list li,
.content ol.double-brackets-number-list li {
  list-style: none;
  margin-left: 0;
  display: flex;
}

ul.double-brackets-number-list li::before,
.content ul.double-brackets-number-list li::before,
ol.double-brackets-number-list li::before,
.content ol.double-brackets-number-list li::before {
  content: "(" counter(doubleBracketsNumberCounter) ")";
  counter-increment: doubleBracketsNumberCounter;
  min-width: 2.25rem;
}

ul.double-brackets-number-list li ol,
.content ul.double-brackets-number-list li ol,
ol.double-brackets-number-list li ol,
.content ol.double-brackets-number-list li ol {
  counter-reset: subCounter;
  margin-left: 0;
  margin-top: 0.25rem;
}

ul.double-brackets-number-list li ol li,
.content ul.double-brackets-number-list li ol li,
ol.double-brackets-number-list li ol li,
.content ol.double-brackets-number-list li ol li {
  list-style: none;
  margin-left: 0;
  display: flex;
}

ul.double-brackets-number-list li ol li::before,
.content ul.double-brackets-number-list li ol li::before,
ol.double-brackets-number-list li ol li::before,
.content ol.double-brackets-number-list li ol li::before {
  content: counter(subCounter, lower-alpha) ".";
  counter-increment: subCounter;
  min-width: 1.25rem;
}

ul.double-brackets-alpha-list,
.content ul.double-brackets-alpha-list,
ol.double-brackets-alpha-list,
.content ol.double-brackets-alpha-list {
  counter-reset: doubleBracketsAlphaCounter;
  margin-left: 0;
  margin-top: 0.25rem;
}

ul.double-brackets-alpha-list li,
.content ul.double-brackets-alpha-list li,
ol.double-brackets-alpha-list li,
.content ol.double-brackets-alpha-list li {
  list-style: none;
  margin-left: 0;
  display: flex;
}

ul.double-brackets-alpha-list li::before,
.content ul.double-brackets-alpha-list li::before,
ol.double-brackets-alpha-list li::before,
.content ol.double-brackets-alpha-list li::before {
  content: "(" counter(doubleBracketsAlphaCounter, lower-alpha) ")";
  counter-increment: doubleBracketsAlphaCounter;
  min-width: 2.25rem;
}

ul.list-style-dash li,
.content ul.list-style-dash li {
  list-style: "-  ";
}

/* Shepherd tour style overrides */

.shepherd-modal-overlay-container.shepherd-modal-is-visible {
  opacity: .75;
}

.guided-tour {
  border-radius: 10px;
}

.guided-tour .shepherd-content .shepherd-header {
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 1rem 1rem 0 1rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.guided-tour .shepherd-content .shepherd-header .progress {
  font-size: 0.75rem;
  line-height: normal;
  color: var(--muted);
  height: fit-content;
  margin-bottom: 0;
}

.guided-tour .shepherd-content .shepherd-header .shepherd-title {
  font-weight: 600;
  color: var(--grey-dark);
  line-height: 1.25rem;
  padding: 0.5rem 0 0.25rem 0;
}

.guided-tour .shepherd-content .shepherd-header .shepherd-cancel-icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--grey-bg);
}

.guided-tour .shepherd-content .shepherd-header .shepherd-cancel-icon span {
  font-size: 1rem;
  color: white;
  position: relative;
  top: -85%;
}

.guided-tour .shepherd-content .shepherd-text {
  padding: 0.25rem 1rem;
  color: var(--grey-dark);
}

.guided-tour .shepherd-content .shepherd-footer {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

.guided-tour .shepherd-content .shepherd-footer .shepherd-button {
  color: white;
  background-color: var(--secondary);
  border-radius: 5px;
  font-weight: 500;
}

.guided-tour .shepherd-content .shepherd-footer .shepherd-button.shepherd-button-secondary {
  color: var(--grey-dark);
  background-color: var(--light);
}

/* Add offset to target elements with fixed header */

:target {
  scroll-margin-top: 75px;
}

@media screen and (max-width: 768px) {
  :target {
    scroll-margin-top: 60px;
  }
}

/* Adjust size of checkbox input */

.checkbox input[type=checkbox] {
  width: 25px;
  height: 25px;
}

/* Remove arrows/spinners from number input fields */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: textfield;
}

/* Hide elements until Alpine.js is ready */

[x-cloak] {
  display: none;
}