/*@font-family: 'Palatino Linotype';*/
/*@link-color: #0B2C4D;
@link-alt-color: #1F4467;

@link-color: #12A4E2;
@link-alt-color: #049BDD;*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
ul,
li,
form,
label,
input,
textarea,
button,
select {
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ol,
ul {
  list-style: none;
}
a {
  -webkit-transition-duration: 0.5s;
  /* Safari */
  transition-duration: 0.5s;
  text-decoration: none;
  outline: none;
  user-select: none;
  color: var(--text-color);
  cursor: pointer;
}
a:not(.btn) {
  font-weight: 600;
}
a:not(.btn):hover {
  color: var(--hover-color);
}
a.disabled,
a:disabled {
  pointer-events: none;
  cursor: vertical-text;
  opacity: 0.5;
}
a:focus {
  text-decoration: none;
  outline: none;
}
img,
picture,
video,
canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}
button {
  cursor: pointer;
  border: none;
  color: inherit;
  box-shadow: none;
  background-color: transparent;
  user-select: none;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none;
  background: none;
  line-height: inherit;
  font-size: inherit;
}
button:not(.btn) {
  font-weight: 600;
}
button:not(.btn):hover {
  color: var(--hover-color);
}
button:disabled {
  pointer-events: none;
  cursor: vertical-text;
  opacity: 0.5;
  font-weight: normal;
}
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #FFFFFF;
    --background-color: #F0F4F8;
    --light-background-color: #FFFFFF;
    --hero-background-color: #E9EDF6;
    --hero-background-color: #D3E3FD;
    --text-color: #000000;
    --hover-color: #404040;
    --background-hover-color: #0d0d0d;
    --box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
    --header-gradient: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    --hightlight-shadow-color: 0 0 8px rgba(0, 0, 0, 0.25);
    --muted-text-color: #080614;
    --border-color: #CFD8E6;
    --hero-border-color: #8C97A1;
    --skeleton-shimmer-color: #FFFFFF;
    --skeleton-background-color: #E9E9E8;
    --loading-background-color: rgba(255, 255, 255, 0.5);
    --date-text-color: #4B4A4A;
    --modal-background-color: rgba(0, 0, 0, 0.08);
    --nav-border-color: #DCE2E8;
    --contrast-background-color: #000000;
    --contrast-text-color: #FFFFFF;
    --header-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #090E18;
    --background-color: #0E111B;
    --background-color: #0A0D17;
    --light-background-color: #2B2A33;
    --hero-background-color: #141A24;
    --hero-background-color: #151A28;
    --hero-background-color: #1E2538;
    --box-shadow: rgba(255, 255, 255, 0.1) 0px 2px 4px 0px;
    --header-gradient: linear-gradient(to bottom, #000000, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
    --text-color: #FFFFFF;
    --hover-color: #bfbfbf;
    --background-hover-color: #f2f2f2;
    --hightlight-shadow-color: 0 0 8px rgba(255, 255, 255, 0.25);
    --muted-text-color: #E5E6E7;
    --border-color: #152038;
    --border-color: #34394C;
    --hero-border-color: #4C4864;
    --skeleton-shimmer-color: #010F1D;
    --skeleton-background-color: #000102;
    --loading-background-color: rgba(16, 13, 31, 0.5);
    --date-text-color: #AAA7B4;
    --modal-background-color: rgba(255, 255, 255, 0.08);
    --nav-border-color: #03010A;
    --contrast-background-color: #FFFFFF;
    --contrast-text-color: #FFFFFF;
    --header-box-shadow: rgba(255, 255, 255, 0.25) 0px 54px 55px, rgba(255, 255, 255, 0.12) 0px -12px 30px, rgba(255, 255, 255, 0.12) 0px 4px 6px, rgba(255, 255, 255, 0.17) 0px 12px 13px, rgba(255, 255, 255, 0.09) 0px -3px 5px;
    --header-box-shadow: rgba(43, 42, 51, 0.25) 0px 54px 55px, rgba(43, 42, 51, 0.12) 0px -12px 30px, rgba(43, 42, 51, 0.12) 0px 4px 6px, rgba(43, 42, 51, 0.17) 0px 12px 13px, rgba(43, 42, 51, 0.09) 0px -3px 5px;
  }
}
html,
body {
  font-family: TNYAdobeCaslonPro, Times New Roman, Times, serif;
  height: auto;
  word-wrap: break-word;
  width: 100%;
  color: var(--text-color);
  background-color: var(--background-color);
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 18px;
  line-height: 1.3rem;
}
html {
  /* Reserves space for the scrollbar so the page doesn't "jump" when modals open */
  scrollbar-gutter: stable;
}
body.modal-open {
  overflow: hidden;
}
.main-layout-wrapper {
  overflow-x: hidden;
  position: relative;
  width: 100%;
}
main {
  width: 100%;
  height: auto;
}
main.main-layout {
  padding-bottom: 100px;
}
@media only screen and (min-width : 769px) {
  main.main-layout {
    padding-top: 150px;
    min-height: calc(100lvh - 150px);
  }
  main.main-layout.state-neutral {
    padding-top: 100px;
    min-height: calc(100lvh - 100px);
  }
}
@media only screen and (max-width : 768.98px) {
  main.main-layout {
    padding-top: 80px;
  }
}
h1.logo {
  z-index: 1000;
  position: relative;
  display: flex;
  column-gap: 2px;
}
h1.logo span {
  transform: translateY(-2px);
}
@media only screen and (max-width : 768.98px) {
  h1.logo span {
    width: 28px;
    height: 28px;
  }
}
@media only screen and (min-width : 769px) {
  h1.logo span {
    width: 30px;
    height: 30px;
  }
}
h1.logo span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
h1.logo svg {
  fill: var(--text-color);
  width: auto;
}
@media only screen and (max-width : 768.98px) {
  h1.logo svg {
    height: 28px;
    /* Your desired height */
  }
}
@media only screen and (min-width : 769px) {
  h1.logo svg {
    height: 32px;
    /* Your desired height */
  }
}
.at:before {
  font-weight: 600;
  color: var(--text-color);
  content: "\0040";
}
.at:hover:before {
  color: var(--hover-color);
}
span.divider.line {
  margin: 0 0.25rem;
  font-weight: 600;
}
span.divider.line:before {
  font-weight: normal;
  color: var(--text-color);
  content: "|";
}
span.divider.circle {
  margin: 0 0.25rem;
  font-weight: 600;
  display: inline;
  vertical-align: middle;
  height: 3px;
  /* Same value for height and width */
  width: 3px;
  /* Same value for height and width */
  background-color: var(--text-color);
  /* Adds color to the circle */
  border-radius: 50%;
  /* Rounds the corners to create a circle */
}
.progress-container {
  display: flex;
  justify-content: center;
}
.progress-bar {
  width: 100.8px;
  height: 16.8px;
  background: linear-gradient(#FE0000 0 0) left / 0% 100% no-repeat #F1F1F1;
  animation: progress-jgv380 2s infinite linear;
}
@keyframes progress-jgv380 {
  100% {
    background-size: 100% 100%;
  }
}
.no-content {
  color: red;
  font-style: italic;
}
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  color: var(--text-color);
  background-color: var(--background-color);
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary::after {
  content: "An error has occurred.";
}
.double-links {
  width: 100%;
  display: flex;
  column-gap: 20px;
}
svg.tiktok path {
  fill: #000000;
}
svg.whatsapp {
  fill: #25D366;
}
svg.instagram {
  fill: #E4405F;
}
svg.stroked path,
svg.stroked circle,
svg.stroked rect,
svg.stroked line,
svg.stroked polyline,
svg.stroked polygon {
  fill: none;
  stroke: var(--hover-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
}
svg.stroked.error path,
svg.stroked.error circle,
svg.stroked.error rect,
svg.stroked.error line,
svg.stroked.error polyline,
svg.stroked.error polygon {
  stroke: red;
}
svg.stroked.success path,
svg.stroked.success circle,
svg.stroked.success rect,
svg.stroked.success line,
svg.stroked.success polyline,
svg.stroked.success polygon {
  stroke: green;
}
svg.filled {
  fill: none;
}
svg.filled path,
svg.filled circle,
svg.filled rect,
svg.filled line,
svg.filled polyline,
svg.filled polygon {
  fill: var(--text-color);
  stroke-width: 2px;
}
svg.filled.linkedin path,
svg.filled.linkedin circle,
svg.filled.linkedin rect,
svg.filled.linkedin line,
svg.filled.linkedin polyline,
svg.filled.linkedin polygon {
  fill: #0077B5;
}
svg.filled.facebook path,
svg.filled.facebook circle,
svg.filled.facebook rect,
svg.filled.facebook line,
svg.filled.facebook polyline,
svg.filled.facebook polygon {
  fill: #1877F2;
}
svg.filled.twitter path,
svg.filled.twitter circle,
svg.filled.twitter rect,
svg.filled.twitter line,
svg.filled.twitter polyline,
svg.filled.twitter polygon {
  fill: var(--text-color);
}
svg.filled.email path,
svg.filled.email circle,
svg.filled.email rect,
svg.filled.email line,
svg.filled.email polyline,
svg.filled.email polygon {
  fill: #EF4444;
}
/*span.divider {
    margin: 0 10px;
    color: var(--border-color);*/
/*position: relative;*/
/*&:before {
        content: "|";*/
/*position: absolute;*/
/*}
}*/
.no-image {
  width: 250px;
  height: 250px;
  background-color: #FAFAFA;
  position: relative;
}
.no-image.small {
  border-radius: 8px;
}
.no-image.large {
  border-radius: 8px;
}
.no-image span {
  position: absolute;
  bottom: 10px;
  text-align: center;
  text-transform: uppercase;
  font-size: smaller;
}
.no-image svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}
.no-image svg stroke,
.no-image svg circle {
  color: var(--text-color);
}
@keyframes ripple {
  0% {
    background-color: transparent;
  }
  30% {
    background-color: var(--cell-color);
  }
  60% {
    background-color: transparent;
  }
  100% {
    background-color: transparent;
  }
}
.skeleton {
  background-color: var(--skeleton-background-color);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--skeleton-shimmer-color) 40%, var(--skeleton-shimmer-color) 60%, transparent 100%);
  background-size: 200% 100%;
  /* wide enough for smooth sweep */
  animation: shimmer 0.5s infinite ease-in-out;
}
h1.skeleton,
h2.skeleton,
h3.skeleton,
h4.skeleton,
h5.skeleton,
h6.skeleton,
p.skeleton {
  height: 50px;
  border: 0;
  margin-bottom: 10px;
}
div.skeleton {
  height: 200px;
  margin-bottom: 10px;
  border: 0;
}
form.skeleton {
  height: 200px;
}
@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
#scroll-sentinel {
  height: 1px;
}
.end-of-file {
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  color: red;
  font-size: 0.9rem;
}
.end-of-file .error-container {
  display: flex;
  align-items: center;
  gap: 12px;
  color: red;
  font-size: 0.9rem;
}
.end-of-file .error-container p {
  margin-bottom: 10px;
}
.time-loader {
  --c1: #673b14;
  --c2: #f8b13b;
  width: 25px;
  height: 50px;
  border-top: 4px solid var(--c1);
  border-bottom: 4px solid var(--c1);
  background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px, var(--c1) 0) 50%/7px 8px no-repeat;
  display: grid;
  overflow: hidden;
  animation: l5-0 2s infinite linear;
}
.time-loader::before,
.time-loader::after {
  content: "";
  grid-area: 1/1;
  width: 75%;
  height: calc(50% - 4px);
  margin: 0 auto;
  border: 2px solid var(--c1);
  border-top: 0;
  box-sizing: content-box;
  border-radius: 0 0 40% 40%;
  -webkit-mask: linear-gradient(#000 0 0) bottom / 4px 2px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  background: linear-gradient(var(--d, 0deg), var(--c2) 50%, #0000 0) bottom / 100% 205%, linear-gradient(var(--c2) 0 0) center / 0 100%;
  background-repeat: no-repeat;
  animation: inherit;
  animation-name: l5-1;
}
.time-loader::after {
  transform-origin: 50% calc(100% + 2px);
  transform: scaleY(-1);
  --s: 3px;
  --d: 180deg;
}
@keyframes l5-0 {
  80% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0.5turn);
  }
}
@keyframes l5-1 {
  10%,
  70% {
    background-size: 100% 205%, var(--s, 0) 100%;
  }
  70%,
  100% {
    background-position: top, center;
  }
}
.loader-container {
  width: 100%;
  height: auto;
  min-height: calc(100lvh - 100px);
  z-index: 998;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 50px;
}
.loader {
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border-radius: 100%;
  background-color: yellow;
  box-shadow: 12px 0 green, -12px 0 red;
  position: relative;
  animation: flash 0.5s ease-out infinite alternate;
}
@keyframes flash {
  0% {
    background-color: yellow;
    box-shadow: 12px 0 green, -12px 0 red;
  }
  50% {
    background-color: red;
    box-shadow: 12px 0 yellow, -12px 0 green;
  }
  100% {
    background-color: green;
    box-shadow: 12px 0 red, -12px 0 yellow;
  }
}
.loader-large {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: yellow;
  box-shadow: 24px 0 green, -24px 0 red;
  position: relative;
  animation: flash-large 0.5s ease-out infinite alternate;
  margin: 30px auto;
}
@keyframes flash-large {
  0% {
    background-color: yellow;
    box-shadow: 24px 0 green, -24px 0 red;
  }
  50% {
    background-color: red;
    box-shadow: 24px 0 yellow, -24px 0 green;
  }
  100% {
    background-color: green;
    box-shadow: 24px 0 red, -24px 0 yellow;
  }
}
.loaded {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: yellow;
  box-shadow: 24px 0 green, -24px 0 red;
  position: relative;
  /*    display: none;

    &.active {
        display: block;
    }*/
}
.page-title {
  width: 750px;
  font-weight: 600;
  margin: 0 auto 1rem auto;
  height: auto;
}
.page-title h1 {
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1.35rem;
  margin-bottom: 5px;
  display: flex;
  width: auto;
  column-gap: 1rem;
  align-items: center;
}
.page-title h1 a,
.page-title h1 button {
  font-size: 0.8rem;
  text-transform: uppercase;
}
.page-title h1 a:hover,
.page-title h1 button:hover {
  color: #214567;
}
.page-title hr {
  height: 3px;
  background-color: #214567;
  border: none;
  width: 50px;
}
/* --- 2. THE RECONNECT MODAL (System Lockdown) --- */
#components-reconnect-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /*background: rgba(0, 0, 0, 0.8);*/
  background-color: var(--modal-background-color);
  /*backdrop-filter: blur(5px);*/
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  padding: 2rem;
}
#components-reconnect-modal button {
  color: #214567;
  font-weight: 600;
}
#components-reconnect-modal button:hover {
  color: #3C5F81;
}
/* Blazor auto-applies this class when connection is lost */
#components-reconnect-modal.components-reconnect-show {
  display: flex;
}
.modal-content-box {
  /* background: #1a1a1a;*/
  background-color: var(--background-color);
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border: 1px solid var(--border-color);
  text-align: center;
  max-width: 450px;
}
/* Spinner for the modal */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Hide sub-messages unless active */
#components-reconnect-modal > div > div {
  display: none;
}
#components-reconnect-modal.components-reconnect-show .state-reconnecting {
  display: block;
}
#components-reconnect-modal.components-reconnect-show .state-reconnecting p.shared__loader {
  margin-top: 0.5rem;
}
#components-reconnect-modal.components-reconnect-failed .state-failed {
  display: block;
}
#components-reconnect-modal.components-reconnect-rejected .state-rejected {
  display: block;
}
/*#region MODALS */
/* --- Keyframes --- */
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* --- Modal Container --- */
#modal {
  position: fixed;
  width: 100%;
  height: 100lvh;
  z-index: 1002;
  overflow: hidden;
  display: none;
  /* hidden by default */
  top: 0;
  left: 0;
  /* Overlay background */
  /* Inner modal container */
  /* Modal contents */
}
#modal.open {
  display: block;
  /* only visible when open */
}
#modal .close-modal-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 1002;
  background-color: var(--modal-background-color);
  pointer-events: auto;
}
#modal .close-modal-wrapper.active {
  animation: fade-in 0.3s forwards;
  pointer-events: auto;
}
#modal .close-modal-wrapper:not(.active) {
  animation: fade-out 0.3s forwards;
  pointer-events: none;
  /* click-through when overlay is inactive */
}
#modal .inner-modal {
  height: 100%;
  position: absolute;
  right: 0;
  margin: 0 auto;
  z-index: 1005;
  transition: all 0.9s ease;
}
@media only screen and (max-width : 619.98px) {
  #modal .inner-modal {
    width: 100%;
  }
}
@media only screen and (min-width: 620px) and (max-width: 768.98px) {
  #modal .inner-modal {
    width: 100%;
  }
}
@media only screen and (min-width: 769px) and (max-width: 990.98px) {
  #modal .inner-modal {
    width: 450px;
    max-width: 100%;
  }
}
@media only screen and (min-width : 769px) {
  #modal .inner-modal {
    width: 450px;
    max-width: 100%;
  }
  #modal .inner-modal.expand {
    width: 100%;
  }
}
#modal .modal-contents {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  /* Top modal (active) */
  /* Background modals (stacked underneath) */
  /* Animations */
  /* Header */
  /* Body */
}
#modal .modal-contents.top {
  /*  transform: scale(1);*/
  /*  filter: none;*/
  /*  opacity: 1;*/
  z-index: 1005;
}
#modal .modal-contents.background {
  /*transform: scale(0.95);*/
  /* slightly smaller */
  /*filter: blur(2px);*/
  /* subtle blur */
  /* opacity: 0.7; */
  /* dimmed */
  z-index: 1000;
  /* lower than top */
}
#modal .modal-contents.enter {
  animation: slide-in 0.5s forwards;
}
#modal .modal-contents.leave {
  animation: slide-out 0.5s forwards;
}
#modal .modal-contents .modal-header {
  height: 50px;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 2003;
  border-bottom: 1px solid var(--border-color);
  /*background-color: @header-background-color;*/
}
#modal .modal-contents .modal-header button svg.stroked path {
  stroke: var(--text-color);
}
#modal .modal-contents .modal-header .inner-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 750px;
  max-width: calc(100% - 20px);
  margin: 0 auto;
  height: 100%;
}
#modal .modal-contents .modal-header button.close {
  font-family: TNYAdobeCaslonPro, Times New Roman, Times, serif;
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--text-color);
  text-transform: capitalize;
  border-bottom: 2px solid transparent;
}
#modal .modal-contents .modal-header button.close span {
  margin-left: 5px;
}
#modal .modal-contents .modal-header button.close:hover {
  border-bottom-color: var(--border-color);
}
#modal .modal-contents .modal-header .modal-header-menu {
  display: flex;
  height: 100%;
}
#modal .modal-contents .modal-header .modal-header-menu button {
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  border-bottom: 3px solid transparent;
  /*   & svg.stroked {
                        stroke: @white-color;
                    }*/
}
@media only screen and (max-width : 768.98px) {
  #modal .modal-contents .modal-header .modal-header-menu button.maximize,
  #modal .modal-contents .modal-header .modal-header-menu button.minimize {
    display: none;
  }
}
#modal .modal-contents .modal-header .modal-header-menu button:hover {
  border-bottom-color: var(--border-color);
}
#modal .modal-contents .modal-body {
  height: calc(100lvh - 50px);
  width: calc(100% - 20px);
  margin: 0 auto;
  overflow-y: auto;
  padding: 20px 0 120px 0;
  scrollbar-color: #888888;
  scrollbar-width: thin;
}
#modal .modal-contents .modal-body::-webkit-scrollbar {
  width: 10px;
}
#modal .modal-contents .modal-body::-webkit-scrollbar-track {
  background-color: transparent;
}
#modal .modal-contents .modal-body::-webkit-scrollbar-thumb {
  background-color: #888888;
  border-radius: 25px;
}
#modal .modal-contents .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: #646464;
}
#modal .modal-contents .modal-body::-webkit-scrollbar-thumb:active {
  background-color: #444444;
}
#modal .modal-contents .inner-modal-body {
  width: 100%;
  height: auto;
  min-height: 100%;
  width: 750px;
  max-width: calc(100% - 20px);
  margin: 0 auto;
  overflow-x: hidden;
  /*  & .form-container {

                & fieldset {
                    background-color: var(--light-background-color) !important;
                }

                & input.form-field,
                & textarea.form-field {
                    background-color: var(--light-background-color) !important;

                    &:-webkit-autofill,
                    &:-webkit-autofill:hover,
                    &:-webkit-autofill:focus,
                    &:-webkit-autofill:active {
                        background-color: var(--light-background-color);
                    }

                    &:disabled {
                        background-color: var(--lightbackground-color) !important;
                    }

                    &:focus,
                    &:active {
                        background-color: var(--light-background-color) !important;
                    }
                }

                & textarea {
                    height: 150px;
                }

                & select.form-field {
                    background-color: var(--light-background-color) !important;

                    &:-webkit-autofill,
                    &:-webkit-autofill:hover,
                    &:-webkit-autofill:focus,
                    &:-webkit-autofill:active {
                        background-color: var(--light-background-color);
                    }

                    &:disabled {
                        background-color: var(--light-background-color);
                    }

                    &:focus,
                    &:active {
                        background-color: var(--light-background-color);
                    }
                }

                & .otp-input-group {

                    & input.otp-box {
                        background-color: var(--light-background-color) !important;
                    }
                }
            }*/
}
#modal .modal-contents .inner-modal-body h3.modal-page-heading {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin: 5px 0;
  padding: 5px 0;
  text-transform: capitalize;
  font-weight: 600;
}
#modal .modal-contents .inner-modal-body h4.instruct {
  margin: 5px 0;
  font-style: italic;
}
/*#endregion */
header.main-header {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--background-color);
}
.main-header__wrapper {
  width: 100%;
  transition: height 0.4s ease-out;
  pointer-events: auto;
}
@media only screen and (max-width : 768.98px) {
  .main-header__wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 100vh;
  }
}
@media only screen and (min-width : 769px) {
  .main-header__wrapper.state-neutral {
    height: 100px;
  }
}
@media only screen and (max-width : 768.98px) {
  .main-header__wrapper.state-public-open,
  .main-header__wrapper.state-user-open {
    height: auto;
  }
}
@media only screen and (min-width : 769px) {
  .main-header__wrapper.state-public-open,
  .main-header__wrapper.state-user-open {
    height: 150px;
  }
}
@media only screen and (min-width : 769px) {
  .main-header__wrapper.state-neutral .main-header__menu-container {
    transform: translateY(-50px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@media only screen and (max-width : 768.98px) {
  .main-header__wrapper.state-user-open .main-header__menu-container,
  .main-header__wrapper.state-public-open .main-header__menu-container {
    max-height: 100lvh;
    overflow-y: auto;
  }
}
.main-header__wrapper.state-public-open .main-header__public-menu,
.main-header__wrapper.state-user-open .main-header__user-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media only screen and (max-width : 768.98px) {
  .main-header__wrapper.state-public-open .main-header__public-menu,
  .main-header__wrapper.state-user-open .main-header__user-menu {
    height: auto;
    padding: 2rem 0 1rem 0;
  }
}
.main-header__wrapper.state-user-open .main-header__public-menu,
.main-header__wrapper.state-public-open .main-header__user-menu {
  transform: translateY(10px);
  opacity: 0;
}
.main-header__top-navigation-container {
  width: 100%;
  background: var(--background-color);
  position: relative;
  z-index: 999;
  padding: 0 10px;
}
@media only screen and (max-width : 768.98px) {
  .main-header__top-navigation-container {
    height: 80px;
  }
}
@media only screen and (min-width : 769px) {
  .main-header__top-navigation-container {
    height: 100px;
  }
}
.main-header__top-navigation {
  width: 1300px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.main-header__top-navigation-left {
  display: flex;
  align-items: center;
  width: calc(100% / 3);
}
@media only screen and (max-width : 768.98px) {
  .main-header__top-navigation-left {
    column-gap: 1rem;
  }
}
@media only screen and (min-width : 769px) {
  .main-header__top-navigation-left {
    column-gap: 0.5rem;
  }
}
.main-header__top-navigation-left svg {
  width: 28px;
  height: 28px;
}
.main-header__top-navigation-left svg.stroked path {
  stroke: var(--text-color);
  stroke-width: 1px;
}
.main-header__top-navigation-center {
  display: flex;
  justify-content: center;
  width: calc(100% / 3);
}
.main-header__top-navigation-right {
  display: flex;
  width: calc(100% / 3);
  justify-content: flex-end;
}
@media only screen and (max-width : 768.98px) {
  .main-header__top-navigation-right {
    column-gap: 1rem;
  }
}
@media only screen and (min-width : 769px) {
  .main-header__top-navigation-right {
    column-gap: 0.5rem;
    column-gap: 0.25rem;
  }
}
.main-header__top-navigation-right button.primary,
.main-header__top-navigation-right button.secondary {
  display: flex;
  column-gap: 0.2rem;
}
@media only screen and (max-width : 768.98px) {
  .main-header__top-navigation-right button.primary,
  .main-header__top-navigation-right button.secondary {
    border: none;
    padding: 0;
    background-color: transparent;
    min-width: unset;
  }
  .main-header__top-navigation-right button.primary span,
  .main-header__top-navigation-right button.secondary span {
    display: none;
  }
  .main-header__top-navigation-right button.primary svg,
  .main-header__top-navigation-right button.secondary svg {
    width: 28px;
    height: 28px;
    stroke: var(--text-color);
  }
  .main-header__top-navigation-right button.primary svg.stroked path,
  .main-header__top-navigation-right button.secondary svg.stroked path {
    stroke: var(--hover-color);
  }
  .main-header__top-navigation-right button.primary:hover,
  .main-header__top-navigation-right button.secondary:hover {
    box-shadow: none;
  }
}
.main-header__menu-container {
  width: 100%;
  background: var(--background-color);
  z-index: 998;
  transition: max-height 0.8s ease-in-out;
}
@media only screen and (max-width : 768.98px) {
  .main-header__menu-container {
    max-height: 0;
    overflow: hidden;
  }
}
@media only screen and (min-width : 769px) {
  .main-header__menu-container {
    height: 50px;
  }
}
.login-required-instruction {
  font-style: italic;
  width: 100%;
  display: flex;
}
@media only screen and (max-width : 768.98px) {
  .login-required-instruction {
    flex-direction: column;
    row-gap: 0.2rem;
  }
}
@media only screen and (min-width : 769px) {
  .login-required-instruction {
    justify-content: center;
    column-gap: 0.25rem;
  }
}
.login-required-instruction a {
  font-weight: normal;
  text-decoration: underline;
  height: auto;
}
.login-required-instruction a:hover {
  text-decoration: none;
}
.main-header__menu {
  width: 750px;
  max-width: calc(100% - 20px);
  height: 100%;
  position: relative;
  margin: 0 auto;
}
.main-header__menu nav {
  display: flex;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
  top: 0;
  left: 0;
}
@media only screen and (max-width : 768.98px) {
  .main-header__menu nav {
    flex-direction: column;
    height: 0;
    overflow: hidden;
  }
}
@media only screen and (min-width : 769px) {
  .main-header__menu nav {
    height: 100%;
    align-items: center;
    position: absolute;
    column-gap: 1.5rem;
    justify-content: center;
  }
}
.main-header__menu nav a {
  transition: color 0.3s;
  display: flex;
  align-items: center;
  font-weight: normal;
}
@media only screen and (max-width : 768.98px) {
  .main-header__menu nav a.active {
    border-right-color: var(--text-color);
  }
}
@media only screen and (min-width : 769px) {
  .main-header__menu nav a.active {
    border-bottom-color: var(--text-color);
  }
}
@media only screen and (min-width : 769px) {
  .main-header__menu nav a {
    height: 100%;
    border-bottom: 1px solid transparent;
  }
}
@media only screen and (max-width : 768.98px) {
  .main-header__menu nav a {
    height: 60px;
    width: auto;
    border-right: 5px solid transparent;
  }
}
.close-all {
  position: absolute;
  z-index: 1001;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--background-color);
  background-color: var(--text-color);
  border-radius: 100%;
  padding: 5px;
}
@media only screen and (min-width : 769px) {
  .close-all {
    display: none !important;
  }
}
.close-all:hover {
  background-color: var(--hover-color);
}
.hero-wrapper {
  height: auto;
  width: 100%;
  background-color: var(--hero-background-color);
  margin-bottom: 2rem;
}
@media only screen and (max-width : 768.98px) {
  .hero-wrapper {
    padding: 2rem 0;
  }
}
@media only screen and (min-width : 769px) {
  .hero-wrapper {
    padding-top: 2rem;
  }
}
.hero {
  max-width: calc(100% - 20px);
  margin: 0 auto;
  color: var(--text-color);
  height: auto;
  display: flex;
  position: relative;
}
@media only screen and (max-width : 768.98px) {
  .hero {
    justify-content: center;
    width: 450px;
  }
}
@media only screen and (min-width : 769px) {
  .hero {
    justify-content: space-between;
    width: 750px;
  }
}
@media only screen and (max-width : 768.98px) {
  .hero__text {
    height: auto;
    width: 100%;
  }
}
@media only screen and (min-width : 769px) {
  .hero__text {
    height: 100%;
    width: 450px;
  }
}
.hero__text h3 {
  margin-bottom: 1rem;
}
@media only screen and (max-width : 768.98px) {
  .hero__text h3 {
    font-size: 1rem;
    text-align: center;
    text-transform: capitalize;
  }
  .hero__text h3 span {
    display: block;
  }
}
@media only screen and (min-width : 769px) {
  .hero__text h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
  }
}
.hero__text h1 {
  font-weight: normal;
  margin-bottom: 1rem;
}
@media only screen and (max-width : 768.98px) {
  .hero__text h1 {
    text-align: center;
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media only screen and (min-width : 769px) {
  .hero__text h1 {
    font-size: 2.5rem;
    line-height: 2.8rem;
    font-weight: 600;
  }
}
.hero__text h2 {
  margin-bottom: 1rem;
}
@media only screen and (max-width : 768.98px) {
  .hero__text h2 {
    text-align: center;
  }
}
.hero__cta {
  width: 100%;
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
}
@media only screen and (min-width : 769px) {
  .hero__cta {
    padding-right: 1rem;
    padding-bottom: 1rem;
  }
}
.hero__cta a {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  width: 50%;
  border: none;
}
.hero__cta a.btn.primary {
  background-color: var(--background-color);
}
@media only screen and (max-width : 768.98px) {
  .hero__image-container {
    display: none !important;
  }
}
@media only screen and (min-width : 769px) {
  .hero__image-container {
    width: calc(100% - 450px);
    height: auto;
    min-height: 100%;
    display: flex;
    align-items: flex-end;
  }
}
.hero__image {
  height: 100%;
  width: 100%;
  line-height: 0;
}
.hero__image img {
  line-height: 0;
}
@media only screen and (min-width : 769px) {
  .hero__image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
.hamburger {
  position: relative;
  flex-direction: column;
  display: flex;
  justify-content: space-around;
  width: 28px;
  height: 28px;
}
.hamburger div {
  width: 100%;
  height: 1px;
  background-color: var(--text-color);
  transition: 0.4s;
}
.hamburger:hover div {
  background-color: var(--hover-color);
}
button.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
button.icon-btn svg {
  width: 28px;
  height: 28px;
}
.form-page {
  height: auto;
  min-height: 100lvh;
  background-color: var(--background-color);
  width: 100%;
  position: relative;
  z-index: 999;
}
.form-page.boxed {
  max-width: calc(100% - 20px);
}
@media only screen and (max-width : 768.98px) {
  .form-page {
    padding-top: 2rem;
  }
}
@media only screen and (min-width : 769px) {
  .form-page {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
main.form-layout {
  width: auto;
  height: auto;
}
.form-container {
  width: 100%;
  position: relative;
  height: auto;
  min-height: 100%;
}
.form-container.boxed {
  width: 450px;
  max-width: 100%;
  margin: 0 auto;
  background-color: var(--hero-background-color);
  border-radius: 21px;
  padding: 2rem 0.5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.form-container.boxed form {
  width: 350px;
  max-width: 100%;
}
.form-container.boxed fieldset {
  background-color: var(--background-color);
  border-radius: 99999px;
  padding: 0 0.6rem;
  height: 2rem;
  border: none;
}
.form-container.boxed .otp-input-group input.otp-box {
  border: none;
  background-color: var(--background-color);
}
.form-container h1 {
  text-transform: capitalize;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.3px;
  text-align: center;
}
.form-container h1 span {
  font-size: smaller;
}
.form-container h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-style: italic;
}
.form-container form {
  height: auto;
  width: 100%;
}
.form-container::placeholder {
  color: var(--muted-text-color);
  opacity: 1;
  letter-spacing: 2.25px;
  font-size: 0.9rem;
  line-height: 1;
}
.form-container .form-heading {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.form-container .validation-message {
  color: red;
  font-size: 0.8rem;
  padding: 0.1rem 0;
}
.form-container fieldset {
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.5rem;
  background-color: inherit;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.5rem 0;
}
.form-container fieldset.password-box {
  position: relative;
}
.form-container fieldset.password-box .show-password {
  margin-left: 5px;
  position: absolute;
  top: 0;
  right: 5px;
  z-index: 100;
  height: 100%;
  display: flex;
  align-items: center;
}
.form-container fieldset.password-box .show-password:hover:before {
  color: var(--hover-color);
}
.form-container fieldset.password-box input.form-field {
  padding-right: 30px;
}
.form-container fieldset.social {
  justify-content: flex-start;
}
.form-container fieldset.social span {
  color: var(--muted-text-color);
  font-size: 0.9rem;
  width: auto;
}
.form-container fieldset.social input.form-field {
  width: auto;
  flex-grow: 1;
}
.form-container input.form-field,
.form-container textarea.form-field {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.9rem;
  line-height: 1;
  border: 0;
  color: var(--text-color);
  opacity: 1;
  z-index: 1;
  padding: 0;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: inherit !important;
}
.form-container input.form-field:-webkit-autofill,
.form-container textarea.form-field:-webkit-autofill,
.form-container input.form-field:-webkit-autofill:hover,
.form-container textarea.form-field:-webkit-autofill:hover,
.form-container input.form-field:-webkit-autofill:focus,
.form-container textarea.form-field:-webkit-autofill:focus,
.form-container input.form-field:-webkit-autofill:active,
.form-container textarea.form-field:-webkit-autofill:active {
  -webkit-transition-delay: 5000s;
  -webkit-transition: color 5000s ease-out, background-color 5000s ease-out;
  transition: background-color 5000s ease-in-out 0s;
  color: var(--muted-text-color) !important;
  background-color: inherit !important;
}
.form-container input.form-field:disabled,
.form-container textarea.form-field:disabled {
  background-color: inherit !important;
  cursor: text;
  color: var(--muted-text-color);
}
.form-container input.form-field:focus,
.form-container textarea.form-field:focus,
.form-container input.form-field:active,
.form-container textarea.form-field:active {
  background-color: inherit !important;
  outline: none !important;
  color: var(--muted-text-color);
}
.form-container textarea {
  height: 150px;
}
.form-container .otp-input-group {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}
.form-container .otp-input-group input.otp-box {
  width: calc((100% - 50px) / 6);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: inherit;
  color: var(--text-color);
}
.form-container .otp-input-group input.otp-box:focus {
  border-color: #D4EDD9;
  outline: none;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.form-container select.form-field {
  width: 100%;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: var(--text-color);
  opacity: 1;
  font-family: TNYAdobeCaslonPro, Times New Roman, Times, serif;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  background-color: var(--backgroun-color) !important;
}
.form-container select.form-field option:first-child {
  color: #777777;
}
.form-container select.form-field:-webkit-autofill,
.form-container select.form-field:-webkit-autofill:hover,
.form-container select.form-field:-webkit-autofill:focus,
.form-container select.form-field:-webkit-autofill:active {
  -webkit-transition-delay: 5000s;
  -webkit-transition: color 5000s ease-out, background-color 5000s ease-out;
  transition: background-color 5000s ease-in-out 0s;
  color: var(--muted-text-color) !important;
  background-color: var(--backgroun-color) !important;
}
.form-container select.form-field:disabled {
  background-color: var(--backgroun-color) !important;
  cursor: text;
}
.form-container select.form-field:focus,
.form-container select.form-field:active {
  background-color: var(--backgroun-color) !important;
  outline: none !important;
}
.form-container label {
  color: var(--muted-text-color);
  opacity: 1;
  letter-spacing: 2.25px;
  z-index: 1;
}
.form-container .button-holder {
  position: relative;
  width: auto;
  height: auto;
}
.form-container .filter-buttons {
  display: flex;
  column-gap: 0.5rem;
}
.form-container .filter-buttons button.btn.primary,
.form-container .filter-buttons button.btn.secondary {
  margin-top: 0;
  width: 50%;
  justify-content: center;
}
.form-container button.btn.primary {
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
  z-index: 1;
}
.form-container button.btn.primary.active {
  pointer-events: none;
  opacity: 0.6;
}
.form-container button.btn.contrast {
  width: 100%;
  justify-content: center;
}
.form-container button.btn.contrast.active {
  pointer-events: none;
  opacity: 0.6;
}
.form-container .ticks {
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}
.form-container .ticks.read-only-check {
  cursor: pointer;
}
.form-container .ticks.read-only-check input {
  pointer-events: none;
  transform: scale(1.2);
}
.form-container .ticks p {
  margin-bottom: 5px;
}
.form-container .ticks p input {
  accent-color: #ff6347;
}
.form-container .ticks p label {
  margin-left: 10px;
}
.form-container .form-options {
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.25rem;
  flex-wrap: wrap;
}
.form-container .form-options a,
.form-container .form-options button {
  color: var(--text-color);
  font-size: 0.85rem;
}
.form-container .form-options a:hover,
.form-container .form-options button:hover {
  color: var(--hover-color);
}
.photo-preview {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
}
.photo-preview .wrapper {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  background-color: var(--loading-background-color);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 100%;
}
.photo-preview label {
  cursor: pointer;
  display: block;
}
.photo-preview label.small {
  width: 150px;
  height: 150px;
  position: relative;
  background-color: var(--hero-background-color);
  border-radius: 100%;
}
.photo-preview label.small img {
  border-radius: 100%;
}
.photo-preview label.small .edit-badge {
  position: absolute;
  bottom: 5px;
  /* Distance from bottom */
  right: 5px;
  /* Distance from right */
  z-index: 100;
  width: 32px;
  height: 32px;
  background-color: var(--hero-background-color);
  color: var(--text-color);
  font-size: 30px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.photo-preview label.small .edit-badge:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}
.photo-preview label.large {
  max-width: 100%;
  width: 750px;
  aspect-ratio: 5 / 3;
  height: auto;
  border-radius: 8px;
  background-color: var(--skeleton-background-color);
  /* Shows while loading */
}
.photo-preview label.large img {
  border-radius: 8px;
}
.photo-preview label input[type="file"] {
  display: none;
}
.photo-preview label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  border-radius: 100%;
  z-index: 2;
}
.photo-preview label:hover {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.photo-preview label .placeholder {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.photo-preview label .placeholder:hover .placeholder-text {
  color: var(--hover-color);
}
.photo-preview label .placeholder:hover svg path {
  fill: var(--hover-color);
}
.photo-preview label .placeholder:hover svg circle {
  fill: var(--hover-color);
}
.photo-preview label .placeholder .placeholder-text {
  color: var(--muted-text-color);
  margin-top: 20px;
}
.photo-preview label .placeholder svg path {
  fill: var(--muted-text-color);
}
.photo-preview label .placeholder svg circle {
  fill: var(--muted-text-color);
}
.photo-preview .small-button-holder {
  height: 40px;
  display: flex;
  column-gap: 0.5rem;
}
.photo-preview .small-button-holder button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  font-size: 30px;
  font-weight: 500;
  background-color: var(--hero-background-color);
  border-radius: 4px;
  /*  color: @white-color;

            & svg.fill path {
                fill: @white-color;
            }*/
}
.photo-preview .small-button-holder button:hover {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.upload-document {
  width: 100%;
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}
.upload-document label {
  width: auto;
  cursor: pointer;
}
.upload-document label span {
  padding-left: 10px;
  font-size: 0.9rem;
  color: var(--muted-text-color);
}
.upload-document label svg {
  fill: #EA1809;
}
.upload-document label:hover {
  color: var(--hover-color);
}
.upload-document label:hover svg {
  fill: var(--hover-color);
}
.upload-document label input[type="file"] {
  display: none;
}
.form-editor {
  width: 100%;
  height: auto;
  position: relative;
  padding-bottom: 50px;
  font-family: TNYAdobeCaslonPro, Times New Roman, Times, serif;
}
.form-editor .ql-editor.ql-blank::before {
  font-size: 16px;
  font-style: normal;
  color: #777777;
}
.form-editor .ql-tooltip {
  left: 5% !important;
  /* Adjust value as needed */
  width: 90% !important;
  border-radius: 6px !important;
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
  display: flex;
  justify-content: space-around;
  z-index: 1000 !important;
  /* &:hover {

                & .ql-toolbar button {

                    & .ql-stroke {
                        stroke: var(--hover-color) !important;
                    }

                    & .ql-fill {
                        fill: var(--hover-color) !important;
                    }
                }
            }*/
}
.form-editor .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
  border-bottom: 6px solid var(--border-color);
}
.form-editor .ql-tooltip .ql-toolbar button {
  font-weight: 600;
}
.form-editor .ql-tooltip .ql-toolbar button .ql-fill {
  fill: var(--text-color) !important;
}
.form-editor .ql-tooltip .ql-toolbar button .ql-stroke {
  stroke: var(--text-color) !important;
}
.form-editor .ql-tooltip .ql-toolbar button:hover .ql-stroke {
  stroke: var(--hover-color) !important;
}
.form-editor .ql-tooltip .ql-toolbar button:hover .ql-fill {
  fill: var(--hover-color) !important;
}
.form-editor .ql-bubble {
  position: relative;
}
.form-editor .ql-bubble .ql-editor {
  padding: 0;
  height: auto;
  min-height: 300px;
}
.form-editor .ql-bubble .ql-editor * {
  font-size: 18px;
  line-height: 1.3rem;
}
.form-editor .ql-bubble .ql-editor h1,
.form-editor .ql-bubble .ql-editor h2,
.form-editor .ql-bubble .ql-editor h3,
.form-editor .ql-bubble .ql-editor h4,
.form-editor .ql-bubble .ql-editor h5,
.form-editor .ql-bubble .ql-editor h6 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  line-height: 1.3rem;
  margin: 0.75rem 0;
  text-align: left;
}
.form-editor .ql-bubble .ql-editor b,
.form-editor .ql-bubble .ql-editor strong {
  font-weight: 600;
}
.form-editor .ql-bubble .ql-editor i,
.form-editor .ql-bubble .ql-editor em {
  font-style: italic;
}
.form-editor .ql-bubble .ql-editor li {
  list-style-type: unset;
  padding-left: 0;
}
.form-editor .ql-bubble .ql-editor ol {
  list-style: decimal;
}
.form-editor .ql-bubble .ql-editor ul {
  list-style: square;
}
.form-editor .ql-container.ql-snow {
  border: none;
}
.form-editor data-placeholder {
  font-style: normal;
}
.form-editor .ql-editor.ql-blank::before {
  color: var(--text-color);
  left: 0;
  right: 0;
  font-size: 18px;
  line-height: 1.3rem;
}
p.warning {
  font-style: italic;
  font-size: 0.9rem;
}
.multi-form {
  height: auto;
  width: 350px;
  max-width: 100%;
}
.multi-form > section {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.multi-form .multi-form__header {
  display: flex;
  align-items: center;
  padding: 0.25rem 0;
}
.multi-form .multi-form__header > span {
  font-size: 1.2rem;
}
.multi-form .multi-form__header > span:before {
  content: "+";
}
.multi-form .multi-form__header > span.active:before {
  content: "-";
}
.multi-form .multi-form__header h3 {
  margin-left: 0.5rem;
}
.multi-form .multi-form__step {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0.5rem;
  transition: max-height 0.6s ease-out, opacity 0.8s ease-in;
}
.multi-form .multi-form__step.expanded {
  max-height: 1000px;
  opacity: 1;
}
/*#region PROFILE PAGE */
.profile-details {
  margin: 0 auto;
  position: relative;
  width: 450px;
  max-width: calc(100% - 20px);
  padding: 2rem 0;
}
.profile-details__image {
  height: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.profile-details__image-wrapper {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background-color: var(--loading-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 1.5em;
}
.profile-details__image-wrapper svg {
  width: 120px;
  height: 120px;
  /*& path {
            stroke: @header-background-color;
        }*/
}
.profile-details__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
  z-index: 2;
}
.profile-details__title {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  text-align: center;
}
.profile-details__username {
  color: var(--muted-text-color);
  font-weight: 600;
  margin-bottom: 0.25rem;
  text-align: center;
}
@media only screen and (max-width : 768.98px) {
  .profile-details__username {
    font-size: 0.9rem;
  }
}
.profile-details__metadata {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  text-align: center;
}
.profile-details__metadata.alt {
  margin-bottom: 1.5rem;
}
@media only screen and (max-width : 768.98px) {
  .profile-details__metadata {
    font-size: 0.9rem;
  }
}
.profile-details__country {
  margin-bottom: 0.25rem;
}
.profile-details__bio {
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  /*  font-size: 1.2rem;
    line-height: 1.6rem;*/
  /*  &::first-letter {
        font-size: 1.5rem;
        line-height: 1.8rem;
        padding: 0 3px;
        font-family: 'Serif', Georgia, Times;
        font-weight: 600;
    }*/
}
.profile-details__actions {
  height: auto;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 1.5rem;
  gap: 0.25rem;
  flex-wrap: wrap;
}
@media only screen and (max-width : 768.98px) {
  .profile-details__actions {
    font-size: 0.9rem;
  }
}
.profile-details__actions button {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
.profile-details__actions button:hover {
  color: var(--hover-color);
}
.profile-details__actions button:hover svg.stroked path {
  stroke: var(--hover-color);
}
.profile-details__content-links {
  height: auto;
  width: 100%;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.profile-details__content-links a.secondary {
  width: 100%;
  height: auto;
  padding: 0.75rem 0;
  border-radius: 4px;
  flex-direction: column;
  text-align: center;
  text-transform: capitalize;
}
.profile-details__content-links a.secondary .field {
  font-size: 0.85rem;
  font-weight: normal;
}
.profile-details__content-links a.secondary .value {
  font-size: 1.5rem;
}
.profile-details__follow-links {
  height: auto;
  width: 100%;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.profile-details__follow-links a.primary {
  width: 100%;
  height: auto;
  padding: 0.75rem 0;
  border-radius: 4px;
  text-align: center;
  text-transform: capitalize;
}
.profile-details__follow-links a.primary .field {
  font-size: 0.85rem;
  font-weight: normal;
}
.profile-details__follow-links a.primary .value {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}
.profile-details__stats {
  margin-bottom: 1rem;
}
.profile-details__stats-header {
  height: 40px;
  width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
}
.profile-details__stats-body {
  height: auto;
  width: 100%;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.profile-details__stats-body a.primary {
  width: 100%;
  height: auto;
  padding: 0.75rem 0;
  border-radius: 4px;
  text-align: center;
  text-transform: capitalize;
  font-size: 0.85rem;
  font-weight: normal;
}
.profile-details__contacts {
  margin-bottom: 0.5rem;
}
.profile-details__contact-item {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
.profile-details__contact-item .profile-details__contact-item-header {
  display: flex;
  column-gap: 0.5rem;
  margin-bottom: 0.25rem;
  justify-content: space-between;
}
.profile-details__contact-item .profile-details__contact-item-header p {
  font-weight: 600;
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
.profile-details__contact-item .profile-details__contact-item-header p.facebook {
  color: #1877F2;
}
.profile-details__contact-item .profile-details__contact-item-header p.twitter {
  color: var(--text-color);
}
.profile-details__contact-item .profile-details__contact-item-header p.linkedin {
  color: #0A66C2;
}
.profile-details__contact-item .profile-details__contact-item-header p.email {
  color: #EF4444;
}
.profile-details__contact-item .profile-details__contact-item-header svg {
  width: 24px;
  height: 24px;
}
.profile-details__contact-item .profile-details__contact-item-header button:hover svg.stroked path fill,
.profile-details__contact-item .profile-details__contact-item-header button:hover svg.stroked line fill {
  color: var(--hover-color);
}
.profile-details__contact-item-definition {
  -ms-word-break: break-all;
  word-break: break-all;
}
.user-profile-image {
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
}
.user-profile-image .image-holder {
  width: 250px;
  height: 250px;
  position: relative;
  border-radius: 8px;
}
.user-profile-image .image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  position: absolute;
  z-index: 2;
}
.user-profile-image .image-holder .placeholder {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.user-profile-image .image-holder .placeholder .placeholder-text {
  color: #777777;
}
.user-profile-image .image-holder .placeholder svg path {
  fill: #777777;
}
.user-profile-image .image-holder .placeholder svg circle {
  fill: #777777;
}
.user-profile-text {
  margin-bottom: 20px;
  width: 100%;
  height: auto;
  text-align: center;
}
.user-profile-text h1 {
  font-size: 1.6rem;
  letter-spacing: 0.3px;
}
.user-profile-text h2 {
  color: var(--muted-text-color);
  font-weight: 600;
  margin: 10px 0;
}
.user-profile-text h3 {
  letter-spacing: 0.3px;
}
/*.user-profile-link {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
}*/
/*
.user-profile-mode {
    width: 100%;
    border-radius: 4px;
    padding: 6px;
    text-align: center;
    font-size: smaller;
    margin-bottom: 10px;
    color: @black-color;

    &.enabled {
        background-color: @success-color;
    }

    &.disabled {
        background-color: @warning-color;
    }
}
*/
/*#endregion */
.exceptions-container {
  width: 100%;
  height: auto;
  min-height: 100lvh;
}
@media only screen and (min-width: 769px) and (max-width: 990.98px) {
  .exceptions-container {
    padding: 30px;
  }
}
@media only screen and (min-width: 991px) and (max-width: 1299.98px) {
  .exceptions-container {
    padding: 30px;
  }
}
@media only screen and (min-width: 1300px) {
  .exceptions-container {
    padding: 30px;
  }
}
.inner-exceptions-container {
  margin: 0 auto;
  padding: 50px 20px;
}
@media only screen and (max-width : 619.98px) {
  .inner-exceptions-container {
    height: auto;
    width: calc(100% - 20px);
  }
}
@media only screen and (min-width: 620px) and (max-width: 768.98px) {
  .inner-exceptions-container {
    width: 650px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 990.98px) {
  .inner-exceptions-container {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 650px;
  }
}
@media only screen and (min-width: 991px) and (max-width: 1299.98px) {
  .inner-exceptions-container {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 650px;
  }
}
@media only screen and (min-width: 1300px) {
  .inner-exceptions-container {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 650px;
  }
}
.inner-exceptions-container .logo {
  margin-bottom: 30px;
  height: auto;
  justify-content: center;
}
.exceptions {
  position: relative;
  width: 100%;
}
.exceptions > h1 {
  font-family: Utopia Std, Georgia, serif;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}
.exceptions h2 {
  margin-bottom: 10px;
}
.exceptions p {
  margin-bottom: 5px;
}
.exceptions ul {
  list-style: square;
  list-style-position: outside;
}
.exceptions ul li {
  font-size: 14px;
  letter-spacing: 1.59953px;
}
.exceptions ul li .logo-text {
  font-size: larger;
}
.description-lists {
  margin: 0 auto;
  position: relative;
  width: 750px;
  width: calc(100% - 20px);
}
@media only screen and (max-width : 768.98px) {
  .description-lists {
    padding: 30px 0;
  }
}
@media only screen and (min-width : 769px) {
  .description-lists {
    padding: 50px 0;
  }
}
.description-lists hr {
  height: 1px;
  background-color: var(--border-color);
  border: none;
  width: 100%;
  margin-bottom: 1rem;
}
dl {
  margin-bottom: 1.5rem;
}
dl dt {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--muted-text-color);
  font-family: 'Global Monospace';
}
dl dt.skeleton {
  width: 150px;
}
dl dd {
  font-size: 1.25rem;
  line-height: 1.65rem;
}
dl dd a,
dl dd button {
  font-weight: 600;
  margin-left: 0.25rem;
}
dl dd a:hover,
dl dd button:hover {
  color: var(--hover-color);
}
dl dd img {
  width: 100%;
  height: auto;
}
.comments-list {
  width: 100%;
  height: auto;
  /*  font-size: 0.8rem;
    line-height: 1.2rem;*/
}
.comments-list__ancestry-container {
  width: 100%;
  /* border-radius: 8px;
    padding: 0.25rem;*/
  /* margin-bottom: 0.1rem;*/
  /*  border: 1px solid var(--border-color);
    border-radius: 8px;*/
  /*  & hr {
        height: 1px;
        background-color: var(--border-color);
        border: none;
        width: 80%;
        margin: 0.5rem auto;
    }*/
}
.comments-list__ancestry-container > h3 {
  text-transform: capitalize;
  /* text-align: center;*/
  /*font-weight: 600;*/
  position: relative;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  /*
        & button {
            position: absolute;
            top: 5px;
            right: 5px;

            &:hover {
                & svg.stroked path {
                    stroke: var(--hover-color);
                }
            }
        }*/
}
@media only screen and (max-width : 768.98px) {
  .comments-list__ancestry-container > h3 {
    font-size: 1.1rem;
    line-height: 1.4rem;
  }
}
@media only screen and (min-width : 769px) {
  .comments-list__ancestry-container > h3 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
}
.comments-list__ancestry {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s ease-out, opacity 0.8s ease-in;
}
.comments-list__ancestry.show {
  max-height: 1000px;
  opacity: 1;
}
.comments-list__card {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.comments-list__text {
  position: relative;
  /* font-size: 1.2rem;
    line-height: 1.6rem;*/
  /*max-height: 8.8rem;*/
  /* 5 lines � 1.4rem + 1 x 1.8 */
  /*overflow: hidden;
    transition: max-height 0.8s ease;

    &:not(.truncated) {
        max-height: 200rem;
    }*/
}
.comments-list__text .shared__richtext {
  max-height: 7.8rem;
  overflow: hidden;
  transition: max-height 0.8s ease;
  /*&.truncated:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3rem;*/
  /* adjust based on your design */
  /*background: linear-gradient(to bottom, transparent, var(--background-color));
            pointer-events: none;*/
  /* ensures clicks pass through */
  /*transition: opacity 0.4s ease;
        }*/
}
.comments-list__text .shared__richtext:not(.truncated) {
  max-height: 200rem;
}
.comments-list__text .not {
  font-style: italic;
}
/* THE INLINE TEXT FADE */
.comments-list__show-text {
  z-index: 100;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3rem;
  /* adjust based on your design */
  background: linear-gradient(to bottom, transparent, var(--background-color));
  transition: opacity 0.4s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  /*width: 40%;*/
  /* Spans wide enough to give a smooth horizontal fade out before the words */
  /*height: 1.8rem;*/
  /* Matches the approximate baseline height of your typography */
  /* Horizontal gradient: Fades text out gracefully from left to right */
  /*background: linear-gradient( to right, transparent 0%, var(--background-color) 45%, var(--background-color) 100% );
    display: flex;
    align-items: center;
    justify-content: flex-end;*/
  /* Pins the link right against the margin */
  /*padding-left: 2rem;*/
}
.comments-list__show-text .caret-down {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.3rem solid var(--text-color);
  /* inherits text color */
}
.comments-list__show-text:hover {
  background: none;
}
.comments-list__show-text:hover .caret-down {
  border-top-color: var(--hover-color);
  /* inherits text color */
}
/*.comments-list__show-text {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 3rem;*/
/* Space for the fade effect */
/*background: linear-gradient(to right, transparent, var(--background-color) 40%);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.4rem;

    & button {
        color: var(--text-color);
        font-weight: 600;

        &:hover {
            color: var(--hover-color);
        }
    }
}*/
.comments-list__metadata {
  display: flex;
  height: 60px;
  align-items: center;
  column-gap: 0.5rem;
  /*justify-content: center;*/
  color: var(--muted-text-color);
}
@media only screen and (max-width : 619.98px) {
  .comments-list__metadata {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 620px) and (max-width: 768.98px) {
  .comments-list__metadata {
    font-size: 0.8rem;
  }
}
@media only screen and (min-width : 769px) {
  .comments-list__metadata {
    font-size: 0.9rem;
  }
}
.comments-list__metadata button.favorite {
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-weight: 600;
  color: var(--text-color);
}
.comments-list__metadata button.favorite:hover {
  color: var(--hover-color);
}
.comments-list__date {
  color: var(--muted-text-color);
}
.comments-list__filter-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
@media only screen and (max-width : 619.98px) {
  .comments-list__filter-container {
    font-size: 0.8rem;
  }
}
@media only screen and (min-width: 620px) and (max-width: 768.98px) {
  .comments-list__filter-container {
    font-size: 0.85rem;
  }
}
@media only screen and (min-width : 769px) {
  .comments-list__filter-container {
    font-size: 0.95rem;
  }
}
.comments-list__filter-container .show-ancestry:after {
  content: "Show Thread";
}
.comments-list__filter-container .show-ancestry.active:after {
  content: "Hide Thread";
}
.comments-list__filter {
  width: auto;
  display: flex;
  column-gap: 0.25rem;
}
.comments-list__filter-text {
  text-transform: capitalize;
  /*   height: 50px;
    display: flex;*/
  /*align-items: center;*/
  width: auto;
  display: flex;
  align-items: center;
  height: 30px;
}
.comments-list__show-filter {
  height: 50px;
  width: auto;
  display: flex;
  align-items: center;
  height: 30px;
  column-gap: 0.25rem;
}
.comments-list__show-filter .caret {
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 6px solid var(--text-color);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.comments-list__show-filter .caret.active {
  transform: rotate(180deg);
}
.comments-list__filter-options {
  display: none;
  /*border-bottom: 1px solid var(--border-color);*/
  flex-grow: 1;
}
.comments-list__filter-options.active {
  display: block;
}
.comments-list__filter-options button {
  height: 40px;
  /*border-top: 1px solid var(--border-color);*/
  width: 100%;
  display: flex;
  align-items: center;
}
.comments-list__filter-options button.active {
  display: none;
}
.comments-list__top-action {
  display: flex;
  align-items: center;
  height: 30px;
}
.comments-list__top-action button {
  /*height: 50px;*/
  /* display: flex;
        align-items: center;*/
}
.comments-list__reply-actions {
  display: flex;
  height: 60px;
  align-items: center;
  column-gap: 0.5rem;
  /*justify-content: center;*/
  color: var(--muted-text-color);
}
.comments-list__actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;
  text-transform: uppercase;
}
@media only screen and (max-width : 768.98px) {
  .comments-list__actions {
    column-gap: 0.5rem;
  }
}
@media only screen and (min-width : 769px) {
  .comments-list__actions {
    column-gap: 1rem;
  }
}
.comments-list__actions button {
  height: 30px;
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
  font-weight: 600;
}
.comments-list__actions button span {
  font-size: 0.7rem;
}
.comments-list__actions button:hover {
  color: var(--hover-color);
  /* &.active {

                & svg.stroked {

                    & path, & circle, & rect, & line, & polyline, & polygon {
                        stroke: var(--hover-color);
                    }
                }
            }*/
}
.comments-list__actions button:hover svg.stroked path {
  stroke: var(--hover-color);
  stroke-width: 1px;
}
.comments-list__actions button:hover svg.filled path {
  fill: var(--hover-color);
}
.comments-list__actions button.active svg.stroked path,
.comments-list__actions button.active svg.stroked circle,
.comments-list__actions button.active svg.stroked rect,
.comments-list__actions button.active svg.stroked line,
.comments-list__actions button.active svg.stroked polyline,
.comments-list__actions button.active svg.stroked polygon {
  fill: var(--text-color);
}
.comments-list__actions svg {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: stroke 800ms ease-in-out, transform 0.2s ease;
}
.comments-list__rating-actions {
  display: flex;
  align-items: center;
}
@media only screen and (max-width : 768.98px) {
  .comments-list__rating-actions {
    column-gap: 0.5rem;
  }
}
@media only screen and (min-width : 769px) {
  .comments-list__rating-actions {
    column-gap: 1rem;
  }
}
.comments-list__other-actions {
  display: flex;
  align-items: center;
  /*  @media @phone {
        & span{
            display: none !important;
        }
    }*/
}
@media only screen and (max-width : 619.98px) {
  .comments-list__other-actions {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 620px) and (max-width: 768.98px) {
  .comments-list__other-actions {
    font-size: 0.8rem;
  }
}
@media only screen and (max-width : 768.98px) {
  .comments-list__other-actions {
    column-gap: 0.5rem;
  }
  .comments-list__other-actions span {
    display: none !important;
  }
}
@media only screen and (min-width : 769px) {
  .comments-list__other-actions {
    column-gap: 1rem;
    font-size: 0.85rem;
  }
}
.comments-list__hamburger {
  width: 28px;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 100%;
  padding: 2px 0;
}
.comments-list__hamburger div {
  width: 4px;
  height: 4px;
  background-color: var(--text-color);
  transition: 0.4s;
  border-radius: 100%;
}
.comments-list__hamburger:hover {
  background-color: var(--background-color);
  /*  & div {
                background-color: var(--contrast-text-color);
            }*/
}
.comments-list__brief {
  /* font-size: 0.9rem;
    line-height: 1.1rem;*/
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  display: block;
}
.comments-list__brief h6 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
/*.comments-list__brief-meta {
    display: flex;
    height: 40px;
    align-items: center;*/
/* justify-content: center;*/
/*font-size: 0.95rem;
    color: var(--muted-text-color);

    @media @smallDevice {
        column-gap: 0.5rem;
    }

    @media @largeDevice {
        column-gap: 1rem;
    }

    & a,
    & button {
        font-weight: 600;

        &:hover {
            color: var(--hover-color);

            & svg.stroked path {
                stroke: var(--hover-color);
            }
        }
    }
}*/
/*.comment {
    border-bottom: 1px solid var(--border-color);*/
/*  border-radius: 8px;*/
/*padding-bottom: 1rem;
    margin-bottom: 1rem;

    & hr {*/
/* background-color: var(--border-color);*/
/*}



    & .comment-votes {
        display: flex;
        align-items: center;
        margin: 0.5rem 0;
        height: auto;
        font-size: 0.8rem;

        & button {
            height: 30px;

            &:hover {

                svg {

                    &.stroked path {
                        stroke: @link-color;
                    }

                    &.filled path {
                        fill: @link-color;
                    }
                }
            }
        }

        svg {
            width: 20px;
            height: 20px;
            cursor: pointer;

            &.user-vote-indicator {
                display: inline-block;
                vertical-align: middle;
                margin-right: 4px;
                transform: scale(1);
                transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                animation: popIn 0.2s ease-out;
            }
        }
    }

}*/
/* When the @if block first renders it, add a simple entrance animation */
@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.table-container {
  margin: 0 auto;
  position: relative;
  width: 1300px;
  max-width: calc(100% - 20px);
}
@media only screen and (max-width : 768.98px) {
  .table-container {
    padding: 30px 0;
  }
}
@media only screen and (min-width : 769px) {
  .table-container {
    padding: 50px 0;
  }
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  /*   height: 500px;
    overflow-y: auto;*/
}
.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
  border-top: 2px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.table-responsive table thead tr {
  border-bottom: 2px solid var(--border-color);
}
.table-responsive table thead th {
  padding: 15px 15px 15px 0;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}
.table-responsive table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
  cursor: pointer;
  height: 60px;
  /* Focus-visible only triggers for keyboard users */
}
.table-responsive table tbody tr.skeleton {
  border-bottom: 2px solid var(--background-color);
}
.table-responsive table tbody tr[role="button"]:hover,
.table-responsive table tbody tr:focus-visible {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
  /* Subtle highlight */
}
.table-responsive table tbody tr[role="button"]:hover,
.table-responsive table tbody tr:focus-visible {
  color: #3C5F81;
}
.table-responsive table tbody tr.viewed {
  color: red;
}
.table-responsive table tbody tr td {
  padding: 15px 15px 15px 0;
  font-size: 0.9rem;
}
.table-responsive table tbody tr td button {
  color: #214567;
}
.table-responsive table tbody tr td button:hover {
  color: #3C5F81;
}
.table-responsive table tbody tr td span.box {
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: 4px;
  font-weight: 600;
  justify-content: center;
  padding: 0.1rem 0.2rem;
}
.table-responsive table tbody tr td span.box.fatal {
  background-color: #F44336;
}
.table-responsive table tbody tr td span.box.error {
  background-color: #F8D7DA;
}
.table-responsive table tbody tr td span.box.warning {
  background-color: #FFF3CD;
}
.table-responsive table tbody tr td span.box.info {
  background-color: #D1ECF1;
}
.form-loader {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
}
.form-message-contents {
  padding: 1rem 0;
  font-size: 0.85rem;
  line-height: 1rem;
}
.form-message-contents h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.form-message-contents p.error {
  color: red;
}
.form-message-contents button {
  margin-top: 0.5rem;
}
.form-message-icon {
  font-size: 0.85rem;
  margin-right: 2px;
  border: none;
}
@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 var(--pulse-color);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
.page-status-message-container {
  width: 750px;
  max-width: calc(100% - 20px);
  height: auto;
  margin: 0 auto;
  z-index: 998;
  display: flex;
  background-color: inherit;
}
@media only screen and (max-width : 768.98px) {
  .page-status-message-container {
    padding: 30px 0;
  }
}
@media only screen and (min-width : 769px) {
  .page-status-message-container {
    padding: 50px 0;
  }
}
.page-status-message {
  width: 500px;
  max-width: calc(100% - 20px);
}
.page-status-message h1 {
  margin-bottom: 0.25rem;
  letter-spacing: 0.2px;
  font-size: clamp(1.3rem, 4vw, 1.5rem);
  line-height: clamp(1.5rem, 4vw, 1.7rem);
}
.page-status-message p {
  color: red;
}
.page-status-message svg {
  width: 80px;
  height: 80px;
  stroke: var(--muted-text-color);
}
.page-status-message .actions {
  width: 100%;
  padding-top: 0.5rem;
  display: flex;
  justify-content: flex-start;
  gap: 0.25rem;
}
.page-status-message .actions svg {
  width: 18px;
  height: 18px;
}
.timeline-details {
  margin: 0 auto;
  position: relative;
  width: 750px;
  max-width: calc(100% - 20px);
  padding: 2rem 0;
}
.timeline-details__card {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  height: auto;
}
.timeline-details__metadata {
  height: auto;
  display: flex;
  margin-bottom: 0.5rem;
}
@media only screen and (max-width : 768.98px) {
  .timeline-details__metadata {
    flex-direction: column;
    row-gap: 0.5rem;
  }
}
@media only screen and (min-width : 769px) {
  .timeline-details__metadata {
    justify-content: space-between;
  }
}
.timeline-details__type {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  align-self: flex-start;
}
.timeline-details__type a {
  color: #FFFFFF;
}
.timeline-details__type:hover {
  opacity: 0.5;
}
.timeline-details__type.account {
  background-color: #FC9A00;
}
.timeline-details__type.tale {
  background-color: #6A01D0;
}
.timeline-details__type.comment {
  background-color: #2AB4DE;
}
.timeline-details__type.insight {
  background-color: #259745;
}
.timeline-details__type.support {
  background-color: #019898;
}
.timeline-details__type.writer {
  background-color: #F96979;
}
.timeline-details__type.role {
  background-color: #7FBA00;
}
.timeline-details__date {
  text-transform: capitalize;
  color: var(--muted-text-color);
}
.timeline-details__text {
  font-size: 1.2rem;
  line-height: 1.6rem;
}
.timeline-details__text p:not(:empty):first-of-type::first-letter,
.timeline-details__text div:not(:empty):first-of-type::first-letter {
  font-size: 1.5rem;
  /* Bold and Large */
  line-height: 1.8rem;
  /* Keeps the text flow tight */
  padding: 0 3px;
  font-family: 'Serif', Georgia, Times;
  /* Fiction looks best in Serif */
  font-weight: 600;
}
.timeline-details__text button,
.timeline-details__text a {
  font-weight: 600;
}
.timeline-details__text button:hover,
.timeline-details__text a:hover {
  color: var(--hover-color);
}
.btn {
  width: auto;
  font-weight: 600;
  transition: all 0.25s ease;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  border-radius: 99999px;
  text-transform: capitalize;
  color: var(--text-color);
  border: 1px solid transparent;
  min-width: 100px;
}
@media only screen and (max-width : 768.98px) {
  .btn {
    font-size: 0.85rem;
  }
}
@media only screen and (min-width : 769px) {
  .btn {
    font-size: 0.9rem;
  }
}
.btn.primary {
  background-color: inherit;
  border-color: var(--border-color);
  /*&:hover {
            box-shadow: var(--hightlight-shadow-color);
        }*/
}
.btn.primary:hover {
  /*box-shadow: var(--hightlight-shadow-color);*/
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.btn.secondary {
  background-color: var(--hero-background-color);
  border-color: var(--hero-background-color);
}
.btn.secondary:hover {
  /*box-shadow: var(--hightlight-shadow-color);*/
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.btn.contrast {
  background-color: var(--text-color);
  color: var(--background-color);
}
.btn.contrast:hover {
  /*box-shadow: var(--hightlight-shadow-color);*/
  background-color: var(--hover-color);
}
.btn-group {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.25rem;
}
.btn-group.bordered {
  border-bottom: 1px solid var(--border-color);
}
.btn-holder {
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}
.btn-holder .btn {
  width: 100%;
}
/*@font-family: 'Palatino Linotype';*/
/*@link-color: #0B2C4D;
@link-alt-color: #1F4467;

@link-color: #12A4E2;
@link-alt-color: #049BDD;*/
/* Base alert */
.alert-container {
  position: fixed;
  top: -100px;
  left: 50%;
  /* start off-screen */
  transform: translateX(-50%);
  width: auto;
  z-index: 9999;
  /*box-shadow: @box-shadow;*/
  opacity: 0;
  /* color: var(--background-color);*/
  transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
  /* Optional slide-out class */
}
.alert-container.slide-in {
  top: 20px;
  /* Slide in by its width + margin */
  opacity: 1;
}
.alert-container.slide-out {
  top: -100px;
  opacity: 0;
}
.alert-wrapper {
  width: 450px;
  height: auto;
  max-width: calc(100% - 20px);
  margin: 0 auto;
  padding: 0.5rem;
  display: flex;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  background-color: var(--hero-background-color);
}
.alert-icon-container {
  width: 30px;
}
.alert-icon-container span {
  border: none;
}
.alert-close-container {
  width: 30px;
}
.alert-close-container .alert-close {
  border-radius: 100%;
  font-size: 1.2rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-close-container .alert-close:hover {
  background-color: var(--background-color);
  color: var(--text-color);
}
.alert-content {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  width: auto;
  padding: 0 0.25rem;
  text-align: center;
}
.alert-content .alert-text {
  font-size: 0.9rem;
  line-height: 1rem;
}
.alert-content button.btn.primary {
  margin-top: 0.25rem;
}
.content-details {
  position: relative;
  width: 100%;
}
.content-details__header-container {
  width: 100%;
  height: auto;
  background-color: var(--hero-background-color);
  padding: 2rem 0;
  margin-bottom: 2rem;
}
.content-details__header {
  text-align: center;
  margin: 0 auto;
  width: 750px;
  max-width: calc(100% - 20px);
}
.content-details__header.preview {
  margin-bottom: 1rem;
}
.content-details__header hr {
  height: 1px;
  background-color: var(--text-color);
  border: none;
  width: 2rem;
  line-height: 1;
  margin: 0.5rem auto;
}
.content-details__metadata {
  margin: 1rem 0;
  padding-right: 35px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  font-size: 0.9rem;
}
.content-details__metadata a,
.content-details__metadata button {
  font-weight: 600;
}
.content-details__metadata a:hover,
.content-details__metadata button:hover {
  color: var(--hover-color);
}
.content-details__metadata svg {
  width: 20px;
  height: 20px;
}
.content-details__metadata > div {
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
}
.content-details__hamburger {
  position: absolute;
  right: 15px;
  top: 0;
}
.content-details__hamburger button {
  width: 28px;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 100%;
  padding: 2px 0;
}
.content-details__hamburger button div {
  width: 4px;
  height: 4px;
  background-color: var(--text-color);
  transition: 0.4s;
  border-radius: 100%;
}
.content-details__hamburger button:hover {
  background-color: var(--background-color);
  /*  & div {
                background-color: var(--contrast-text-color);
            }*/
}
.content-details__metadata-topbar {
  color: var(--muted-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
}
.content-details__metadata-topbar:hover {
  color: var(--hover-color);
}
h1.content-details__title {
  text-transform: capitalize;
  font-weight: normal;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: clamp(2.2rem, 4vw, 3.5rem);
  text-align: center;
}
.content-details__metadata-lowbar {
  color: var(--muted-text-color);
}
.content-details__metadata-writer button {
  font-size: 0.9rem;
  font-weight: 600;
}
.content-details__metadata-writer button:hover {
  color: var(--hover-color);
}
.content-details__date {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-details__main-container {
  margin: 0 auto 2rem auto;
  width: 750px;
  max-width: calc(100% - 20px);
}
.content-details__image {
  height: auto;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  /*border-radius: 8px;*/
  margin-bottom: 2.5rem;
}
.content-details__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
@media only screen and (max-width : 768.98px) {
  .content-details__image img {
    border-radius: 8px;
  }
}
@media only screen and (min-width : 769px) {
  .content-details__image img {
    border-radius: 21px;
  }
}
figcaption.content-details__image-caption {
  font-size: 1rem;
  line-height: 1.1rem;
  padding: 0.5rem 0;
}
.content-details__reading-time {
  margin-bottom: 1rem;
}
.content-details__summary {
  font-style: italic;
}
.content-details__text {
  margin: 1.5rem 0;
  font-size: 1.2rem;
  line-height: 1.6rem;
  /* 1. Skip paragraphs that are empty or only contain a <br> */
  /* 2. Specialized fix for Quill's <p><br></p> structure */
}
.content-details__text h1:not(:empty):first-child::first-letter,
.content-details__text p:not(:empty):first-child::first-letter,
.content-details__text div:not(:empty):first-child::first-letter {
  font-size: 1.5rem;
  /* Bold and Large */
  line-height: 1.8rem;
  /* Keeps the text flow tight */
  padding: 0 3px;
  font-family: 'Serif', Georgia, Times;
  /* Fiction looks best in Serif */
  font-weight: 600;
}
.content-details__text p:has(br):first-child::first-letter {
  all: unset;
  /* Don't apply drop cap to a line break */
}
.content-details__text h1,
.content-details__text h2,
.content-details__text h3,
.content-details__text h4,
.content-details__text h5,
.content-details__text h6 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.2;
  margin: 15px 0;
  text-align: left;
}
.content-details__text p {
  margin-top: 1rem;
}
.content-details__text p:first-child {
  margin-top: 0;
}
.content-details__text p:has(br:only-child) {
  margin-bottom: 0;
  /* Kill the margin for empty lines */
  line-height: 1;
  /* Collapse the height */
}
.content-details__text p > br {
  display: none;
}
.content-details__text b,
.content-details__text strong {
  font-weight: 600;
}
.content-details__text i,
.content-details__text em {
  font-style: italic;
}
.content-details__text li {
  list-style-type: unset;
  padding-left: 0;
}
.content-details__text ol {
  list-style: decimal;
}
.content-details__text ul {
  list-style: square;
}
.content-details__addendum {
  margin-bottom: 1.5rem;
}
.content-details__addendum h4 {
  font-weight: 600;
  margin-top: 1rem;
  text-transform: uppercase;
}
.content-details__addendum ol {
  list-style: decimal-leading-zero;
  list-style-position: inside;
  padding-left: 0.5rem;
}
.content-details__watchlist {
  margin: 1rem 0;
  width: 100%;
  margin-bottom: 1.5rem;
  /*  background-color: var(--hero-background-color);
    border-radius: 8px;
    padding: 0.5rem;*/
}
.content-details__watchlist-title {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}
.content-details__watchlist-title span {
  text-transform: uppercase;
  color: var(--muted-text-color);
  font-weight: 600;
  font-size: 1rem;
}
.content-details__watchlist-summary {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  position: relative;
}
.content-details__watchlist-summary > button {
  font-weight: bold;
}
.content-details__watchlist-summary > button:hover {
  color: var(--hover-color);
}
.content-details__watchlist-image {
  width: 100%;
  margin-bottom: 0.5rem;
  /*  text-align:center;*/
}
.content-details__watchlist-image img {
  width: auto;
  height: auto;
}
.content-details__watchlist-action {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.25s ease;
  justify-content: center;
  color: #000000;
  border: 1px solid var(--border-color);
}
.content-details__watchlist-action:hover {
  color: var(--hover-color);
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.content-details__tags {
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.content-details__engagement-container {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}
@media only screen and (min-width : 769px) {
  .content-details__engagement-container {
    display: flex;
    justify-content: space-between;
    column-gap: 2.5rem;
  }
}
.content-details__engagement {
  margin: 2.5rem 0;
}
@media only screen and (max-width : 768.98px) {
  .content-details__engagement {
    width: 100%;
  }
}
@media only screen and (min-width : 769px) {
  .content-details__engagement {
    width: 450px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.content-details__engagement h4 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  text-align: center;
}
.content-details__engagement-rating-buttons {
  display: flex;
  column-gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.content-details__engagement-rating-buttons button {
  width: calc(50% - 0.25rem);
  border-radius: 4px;
  column-gap: 0.5rem;
}
.content-details__engagement-rating-buttons button .check-box {
  display: none;
}
.content-details__engagement-rating-buttons button .check-box.checked {
  display: block;
}
.content-details__engagement-stats button,
.content-details__engagement-flag button,
.content-details__engagement-favorite button {
  color: var(--text-color);
  font-weight: 600;
  display: flex;
  align-items: center;
  height: 40px;
}
.content-details__engagement-stats button:hover,
.content-details__engagement-flag button:hover,
.content-details__engagement-favorite button:hover {
  color: var(--hover-color);
}
.content-details__engagement-share {
  border-top: 1px solid var(--border-color);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}
@media only screen and (max-width : 768.98px) {
  .content-details__engagement-share {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
  }
}
.content-details__engagement-share h5 {
  margin-bottom: 0.5rem;
  text-align: center;
}
.content-details__engagement-share-buttons {
  width: 100%;
  display: flex;
  column-gap: 1rem;
  justify-content: center;
}
.content-details__engagement-share-buttons button {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
}
.content-details__engagement-share-buttons button svg.filled path {
  fill: var(--text-color);
}
.content-details__engagement-share-buttons button:hover {
  background-color: var(--contrast-background-color);
}
.content-details__engagement-share-buttons button:hover svg.filled path {
  fill: var(--light-background-color);
}
@media only screen and (max-width : 768.98px) {
  .content-details__creator-details {
    width: 100%;
    margin-bottom: 1rem;
  }
}
@media only screen and (min-width : 769px) {
  .content-details__creator-details {
    width: 450px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.content-details__creator-details-title {
  font-size: 1.2rem;
  line-height: 1.6rem;
  text-transform: capitalize;
  margin-bottom: 0.5rem;
  text-align: center;
}
.content-details__creator-details-title h4 {
  margin-bottom: 0.25rem;
  text-align: center;
}
.content-details__creator-details-title a,
.content-details__creator-details-title button {
  color: var(--text-color);
  font-weight: 600;
}
.content-details__creator-details-title a:hover,
.content-details__creator-details-title button:hover {
  color: var(--hover-color);
}
.content-details__creator-details-links {
  height: auto;
  width: 100%;
  gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.content-details__creator-details-links a.secondary,
.content-details__creator-details-links a.primary {
  width: 100%;
  height: auto;
  padding: 0.75rem 0;
  border-radius: 4px;
  flex-direction: column;
  text-align: center;
  text-transform: capitalize;
}
.content-details__creator-details-links a.secondary .field,
.content-details__creator-details-links a.primary .field {
  font-size: 0.85rem;
  font-weight: normal;
}
.content-details__creator-details-links a.secondary .value,
.content-details__creator-details-links a.primary .value {
  font-size: 1.5rem;
}
.content-details__creator-details-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.25rem 0;
  height: 50px;
}
.content-details__creator-details-actions a,
.content-details__creator-details-actions button {
  display: inline-flex;
  height: 100%;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-color);
  font-weight: 600;
}
.content-details__creator-details-actions a:hover,
.content-details__creator-details-actions button:hover {
  color: var(--hover-color);
}
.content-details__enrichment {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s ease-out, opacity 0.8s ease-in;
}
.content-details__enrichment.show {
  max-height: 1000px;
  opacity: 1;
}
.content-details__enrichment-action {
  margin: 0.5rem 0;
}
.content-details__enrichment-action h5 {
  line-height: 1.4rem;
  font-style: italic;
  margin-bottom: 0.5rem;
}
.content-details__enrichment-action button {
  height: 40px;
  width: auto;
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.25s ease;
  column-gap: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 50px;
}
.content-details__enrichment-action button:hover {
  color: var(--hover-color);
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.content-details__enrichment-action button:hover svg.stroked path {
  stroke: #214567;
}
/*.content-details__rating-creator {
    width: 100%;
    margin: 2rem 0 1rem 0;

    @media @smallDevice {
        padding: 0.5rem 0;

        & .content-details__rating {
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        & .seperator {
            display: none;
        }
    }

    @media @largeDevice {
        padding: 1rem 0;
        display: flex;
        justify-content: space-between;

        & .content-details__creator {
            padding-left: 0.5rem;
        }
    }
}


.content-details__rating {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & h4 {
        margin-bottom: 0.5rem;
    }
}

    .content-details__rating-buttons {
        display: flex;
        column-gap: 0.25rem;
        margin-bottom: 0.5rem;

        & button {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            height: 40px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            padding: 0 1.5rem;

            &:hover {
                box-shadow: 0 0 8px rgba(0,123,255,0.25);
            }

        }
    }

    .content-details__rating-actions {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        height: 40px;

        & button {
            display: inline-flex;
            height: 100%;
            align-items: center;
            font-weight: 600;

            &:hover {
               color: var(--hover-color);
            }
        }
    }

    .content-details__creator {
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

     
    }

    .content-details__creator-actions {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 1rem;
        height: 40px;

        & button {
            display: inline-flex;
            height: 100%;
            align-items: center;
            font-weight: 600;

            &:hover {
               color: var(--hover-color);
            }
        }
    }

.content-details__creator-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    column-gap: 0.5rem;
    height: 40px;

    & a,
    & button {
        display: inline-flex;
        height: 100%;
        align-items: center;
        font-weight: 600;

        &:hover {
            color: var(--hover-color);
        }
    }

    & button,
    & a {
       
    }
}

.content-details__share-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    height: 50px;
    border-top: 1px solid var(--border-color);

    & button {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;

        &:hover {
            background-color: var(--contrast-background-color);

            & svg.filled {
                & path {
                    fill: var(--contrast-text-color);
                }
            }
        }
    }
}*/
/*
.content-details__brief {
    font-size: 0.9rem;
    line-height: 1.1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    display: block;

    & h6 {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

}

.content-details__brief-text {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4rem;

    &:first-of-type::first-letter {
        font-size: 1.5rem;
        line-height: 1.8rem;
        padding: 0 3px;
        font-family: 'Serif', Georgia, Times;
        font-weight: 600;
    }

    & button,
    & a {
       color: var(--hover-color);
        font-weight: 600;

        &:hover {
            color: @link-alt-color;
        }
    }
}

.content-details__brief-meta {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--muted-text-color);

    & a,
    & button {

        &:hover {
           color: var(--hover-color);

            & svg.stroked path {
                stroke: @link-color;
            }
        }
    }
}
*/
.shared__page-title-container {
  width: 100%;
  height: auto;
  background-color: var(--hero-background-color);
}
.shared__page-title-container a.primary,
.shared__page-title-container button.primary {
  background-color: var(--background-color);
}
.shared__page-title {
  width: 750px;
  max-width: calc(100% - 20px);
  height: auto;
  margin: 1.5rem auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;
}
.shared__page-title h1 {
  text-transform: capitalize;
  line-height: 1;
  font-weight: normal;
}
@media only screen and (max-width : 768.98px) {
  .shared__page-title h1 {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width : 769px) {
  .shared__page-title h1 {
    font-size: 1.8rem;
  }
}
.shared__no-content {
  font-style: italic;
}
.shared__error {
  color: red;
}
.shared__content-status {
  margin-bottom: 1rem;
  width: auto;
  display: flex;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #FFFFFF;
}
.shared__content-status span:first-child {
  width: auto;
  padding: 2px 4px;
  border-radius: 6px 0 0 6px;
  background-color: #5D5D5D;
}
.shared__content-status span:last-child {
  width: auto;
  padding: 2px 4px;
  border-radius: 0 6px 6px 0;
}
.shared__content-status span:last-child.warning {
  background-color: #DB654F;
}
.shared__content-status span:last-child.info {
  background-color: #4BC51D;
}
.shared__content-status span:last-child.danger {
  background-color: #D90E83;
}
.shared__end-of-file {
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem 0;
  color: red;
  font-size: 0.9rem;
}
.shared__error-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.shared__error-container p {
  margin-bottom: 0.5rem;
}
.shared__loader {
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border-radius: 100%;
  background-color: yellow;
  box-shadow: 18px 0 green, -18px 0 red;
  position: relative;
  animation: flash 0.5s ease-out infinite alternate;
}
@keyframes flash {
  0% {
    background-color: yellow;
    box-shadow: 18px 0 green, -18px 0 red;
  }
  50% {
    background-color: green;
    box-shadow: 18px 0 red, -18px 0 yellow;
  }
  100% {
    background-color: red;
    box-shadow: 18px 0 green, -18px 0 yellow;
  }
}
.shared__loaded {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: yellow;
  box-shadow: 18px 0 green, -18px 0 red;
  position: relative;
}
.shared__divider-line {
  margin: 0 0.25rem;
  font-weight: 600;
  display: inline-block;
}
.shared__divider-line:before {
  font-weight: normal;
  color: var(--text-color);
  content: "|";
}
.shared__divider-circle {
  margin: 0 0.25rem;
  font-weight: 600;
  display: inline-block;
  vertical-align: middle;
  height: 5px;
  /* Same value for height and width */
  width: 5px;
  /* Same value for height and width */
  background-color: var(--text-color);
  /* Adds color to the circle */
  border-radius: 50%;
  /* Rounds the corners to create a circle */
}
.shared__site-icon {
  position: fixed;
  bottom: 10px;
  left: 0;
  padding: 0.25rem;
  border-radius: 0 21px 21px 0;
  background-color: var(--hero-background-color);
  z-index: 9999;
  box-shadow: var(--box-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width : 768.98px) {
  .shared__site-icon img {
    width: 28px;
    height: 28px;
  }
}
@media only screen and (min-width : 769px) {
  .shared__site-icon img {
    width: 30px;
    height: 30px;
  }
}
.shared__popover {
  position: absolute;
  top: calc(100% + 12px);
  /* Space above the button */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background: var(--text-color);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  padding: 1rem 0.25rem;
  z-index: 100;
  text-align: center;
  animation: popIn 0.2s ease-out;
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.shared__popover-text {
  color: var(--background-color);
  margin-bottom: 0.5rem;
}
@media only screen and (max-width : 768.98px) {
  .shared__popover-text {
    font-size: 0.9rem;
    line-height: 1.2rem;
  }
}
.shared__popover-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.shared__popover-actions a,
.shared__popover-actions button {
  padding: 0.25rem 1rem;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.2s;
  flex: 0 0 auto;
  width: auto;
}
.shared__popover-actions a:hover,
.shared__popover-actions button:hover {
  opacity: 0.95;
}
.shared__popover-actions a {
  border: 1px solid var(--background-color);
  color: var(--background-color);
}
.shared__popover-actions button {
  background-color: var(--background-color);
}
.shared__popover-arrow {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid var(--text-color);
}
.shared__richtext h1,
.shared__richtext h2,
.shared__richtext h3,
.shared__richtext h4,
.shared__richtext h5,
.shared__richtext h6 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  line-height: 1.1rem;
  margin: 15px 0;
  text-align: left;
}
.shared__richtext p {
  margin-top: 0.5rem;
}
@media only screen and (max-width : 768.98px) {
  .shared__richtext p {
    font-size: 0.9rem;
    line-height: 1.3rem;
  }
}
.shared__richtext p:first-child {
  margin-top: 0;
}
.shared__richtext p.no {
  font-style: italic;
}
.shared__richtext b,
.shared__richtext strong {
  font-weight: 600;
}
.shared__richtext i,
.shared__richtext em {
  font-style: italic;
}
.shared__richtext li {
  list-style-type: unset;
  padding-left: 0;
  font-size: 0.9rem;
  line-height: 1.4rem;
}
.shared__richtext ol {
  list-style: decimal;
}
.shared__richtext ul {
  list-style: square;
}
.content-lists {
  margin: 0 auto;
  position: relative;
  width: 750px;
  max-width: calc(100% - 20px);
  padding-bottom: 2rem;
}
.content-lists__card {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.content-lists__card-header {
  text-align: center;
  margin: 50px auto;
  width: 80%;
}
.content-lists__card-header .content-lists__metadata {
  justify-content: center;
}
.content-lists__title {
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  line-height: clamp(1.8rem, 4vw, 3rem);
  text-transform: capitalize;
  margin: 0.5rem 0;
}
.content-lists__title.alt {
  font-size: 1.2rem;
  line-height: 1.6rem;
}
.content-lists__title:not(.alt) a,
.content-lists__title:not(.alt) button {
  font-weight: normal;
}
.content-lists__metadata {
  text-transform: capitalize;
  font-size: 0.9rem;
  color: var(--muted-text-color);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
  /*  &:not(.alt) {
        margin-bottom: 0.5rem;
    }

    &.alt {
        margin-top: 0.5rem;
        justify-content: center;
    }*/
}
.content-lists__metadata svg {
  width: 20px;
  height: 20px;
}
.content-lists__metadata a,
.content-lists__metadata button {
  color: var(--text-color);
  font-weight: 600;
}
.content-lists__metadata a:hover,
.content-lists__metadata button:hover {
  color: var(--hover-color);
}
.content-lists__image {
  width: 100%;
  height: 250px;
  margin-bottom: 1rem;
}
.content-lists__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
@media only screen and (max-width : 768.98px) {
  .content-lists__image img {
    border-radius: 8px;
  }
}
@media only screen and (min-width : 769px) {
  .content-lists__image img {
    border-radius: 21px;
  }
}
.content-lists__summary {
  margin-bottom: 1rem;
}
.content-lists__summary button,
.content-lists__summary a {
  color: var(--text-color);
  font-weight: 600;
}
.content-lists__summary button:hover,
.content-lists__summary a:hover {
  color: var(--hover-color);
}
.content-lists__stats {
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.content-lists__stats p {
  display: flex;
  align-items: center;
}
.content-lists__stats p span {
  font-weight: 600;
  margin-right: 0.1rem;
}
.content-lists__favorite {
  display: flex;
  justify-content: flex-end;
}
.content-lists__favorite button {
  display: inline-flex;
  align-items: center;
  height: 40px;
  font-weight: 600;
  color: var(--text-color);
}
.content-lists__favorite button:hover {
  color: var(--hover-color);
}
.content-lists__actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 40px;
}
.content-lists__actions a,
.content-lists__actions button {
  display: inline-flex;
  height: 100%;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-color);
  font-weight: 600;
}
.content-lists__actions a:hover,
.content-lists__actions button:hover {
  color: var(--hover-color);
}
.content-lists__brief {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}
.faq-lists {
  margin: 0 auto;
  position: relative;
  width: 750px;
  max-width: calc(100% - 20px);
}
@media only screen and (max-width : 768.98px) {
  .faq-lists {
    padding: 30px 0;
  }
}
@media only screen and (min-width : 769px) {
  .faq-lists {
    padding: 50px 0;
  }
}
.faq-lists__new-content {
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  display: flex;
  column-gap: 0.5rem;
  justify-content: flex-end;
}
.faq-lists__card {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.faq-lists__header {
  /*border-bottom: 1px solid var(--border-color);*/
  display: flex;
  padding: 0.5rem 0;
}
.faq-lists__header button {
  font-size: 30px;
}
.faq-lists__header button:before {
  content: "+";
}
.faq-lists__header button.active:before {
  content: "-";
}
.faq-lists__header button:hover {
  color: #214567;
}
.faq-lists__header h2 {
  font-weight: 600;
  margin-left: 0.5rem;
}
.faq-lists__contents {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s ease-out, opacity 0.8s ease-in;
}
.faq-lists__contents.show {
  max-height: 1000px;
  opacity: 1;
}
.faq-lists__contents-answer {
  padding: 0.5rem 0;
  /* 1. Skip paragraphs that are empty or only contain a <br> */
  /* 2. Specialized fix for Quill's <p><br></p> structure */
}
.faq-lists__contents-answer h1:not(:empty):first-of-type::first-letter,
.faq-lists__contents-answer p:not(:empty):first-of-type::first-letter,
.faq-lists__contents-answer div:not(:empty):first-of-type::first-letter {
  font-size: 1.5rem;
  /* Bold and Large */
  line-height: 1.8rem;
  /* Keeps the text flow tight */
  padding: 0 3px;
  font-family: 'Serif', Georgia, Times;
  /* Fiction looks best in Serif */
  font-weight: 600;
}
.faq-lists__contents-answer p:has(br):first-child::first-letter {
  all: unset;
  /* Don't apply drop cap to a line break */
}
.faq-lists__contents-answer h1,
.faq-lists__contents-answer h2,
.faq-lists__contents-answer h3,
.faq-lists__contents-answer h4,
.faq-lists__contents-answer h5,
.faq-lists__contents-answer h6 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  line-height: 1.2;
  margin: 15px 0;
  text-align: left;
}
.faq-lists__contents-answer p {
  margin-top: 1rem;
}
.faq-lists__contents-answer p:first-child {
  margin-top: 0;
}
.faq-lists__contents-answer p:has(br:only-child) {
  margin-bottom: 0;
  /* Kill the margin for empty lines */
  line-height: 1;
  /* Collapse the height */
}
.faq-lists__contents-answer p > br {
  display: none;
}
.faq-lists__contents-answer b,
.faq-lists__contents-answer strong {
  font-weight: 600;
}
.faq-lists__contents-answer i,
.faq-lists__contents-answer em {
  font-style: italic;
}
.faq-lists__contents-answer li {
  list-style-type: unset;
  padding-left: 0;
}
.faq-lists__contents-answer ol {
  list-style: decimal;
}
.faq-lists__contents-answer ul {
  list-style: square;
}
.faq-lists__contents-date {
  padding: 0.25rem;
  font-style: italic;
  font-size: 0.85rem;
}
.faq-lists__contents-action {
  padding: 0.25rem 0;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
}
.faq-lists__contents-action-buttons {
  display: flex;
  column-gap: 1rem;
}
.writer-lists {
  margin: 0 auto;
  position: relative;
  width: 750px;
  max-width: calc(100% - 20px);
  padding-bottom: 2rem;
}
.writer-lists__card {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
@media only screen and (min-width : 769px) {
  .writer-lists__card {
    display: flex;
    justify-content: space-between;
    column-gap: 1rem;
  }
}
@media only screen and (max-width : 768.98px) {
  .writer-lists__writer-details {
    width: 100%;
    margin-bottom: 1rem;
  }
}
@media only screen and (min-width : 769px) {
  .writer-lists__writer-details {
    width: 450px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.writer-lists__writer-details-title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: clamp(1.8rem, 4vw, 2.4rem);
  text-transform: capitalize;
  margin-bottom: 0.5rem;
}
.writer-lists__writer-details-title a,
.writer-lists__writer-details-title button {
  color: var(--text-color);
}
.writer-lists__writer-details-title a:hover,
.writer-lists__writer-details-title button:hover {
  color: var(--hover-color);
}
.writer-lists__writer-details-metadata {
  text-transform: capitalize;
  font-size: 0.9rem;
  color: var(--muted-text-color);
  margin-bottom: 0.5rem;
  width: 100%;
}
.writer-lists__writer-details-metadata span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.writer-lists__writer-details-metadata svg {
  width: 20px;
  height: 20px;
}
.writer-lists__writer-details-metadata a,
.writer-lists__writer-details-metadata button {
  color: var(--text-color);
  font-weight: 600;
}
.writer-lists__writer-details-metadata a:hover,
.writer-lists__writer-details-metadata button:hover {
  color: var(--hover-color);
}
.writer-lists__writer-details-links {
  height: auto;
  width: 100%;
  gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.writer-lists__writer-details-links a.secondary,
.writer-lists__writer-details-links a.primary {
  width: 100%;
  height: auto;
  padding: 0.75rem 0;
  border-radius: 4px;
  flex-direction: column;
  text-align: center;
  text-transform: capitalize;
}
.writer-lists__writer-details-links a.secondary .field,
.writer-lists__writer-details-links a.primary .field {
  font-size: 0.85rem;
  font-weight: normal;
}
.writer-lists__writer-details-links a.secondary .value,
.writer-lists__writer-details-links a.primary .value {
  font-size: 1.5rem;
}
.writer-lists__writer-details-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.25rem 0;
  height: 50px;
}
.writer-lists__writer-details-actions a,
.writer-lists__writer-details-actions button {
  display: inline-flex;
  height: 100%;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-color);
  font-weight: 600;
}
.writer-lists__writer-details-actions a:hover,
.writer-lists__writer-details-actions button:hover {
  color: var(--hover-color);
}
@media only screen and (max-width : 768.98px) {
  .writer-lists__latest-content-container {
    width: 100%;
    height: auto;
  }
}
@media only screen and (min-width : 769px) {
  .writer-lists__latest-content-container {
    width: auto;
    height: auto;
    min-height: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.writer-lists__latest-content {
  border-radius: 4px;
  border: 1px solid var(--border-color);
}
@media only screen and (max-width : 768.98px) {
  .writer-lists__latest-content {
    width: 100%;
    height: auto;
    display: block;
    padding: 1rem 0.5rem;
  }
}
@media only screen and (min-width : 769px) {
  .writer-lists__latest-content {
    width: auto;
    height: auto;
    min-height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 1rem;
  }
}
.writer-lists__latest-content:hover {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.writer-lists__latest-content-title {
  text-transform: capitalize;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.5rem;
}
.writer-lists__latest-content-title button:hover {
  color: var(--hover-color);
}
.writer-lists__latest-content-summary {
  font-weight: normal;
}
.writer-lists__latest-content-summary span {
  font-weight: 600;
}
.writer-lists__latest-content-summary span:hover {
  color: var(--hover-color);
}
.writer-lists__latest-content-date {
  width: 100%;
  margin: 0.5rem 0;
}
.user-lists {
  margin: 0 auto;
  position: relative;
  width: 750px;
  max-width: calc(100% - 20px);
  padding-bottom: 2rem;
}
.user-lists__card {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
}
@media only screen and (max-width : 768.98px) {
  .user-lists__card {
    flex-direction: column;
    row-gap: 0.5rem;
  }
}
@media only screen and (min-width : 769px) {
  .user-lists__card {
    justify-content: space-between;
  }
}
.user-lists__left-card {
  display: flex;
}
.user-lists__image {
  background-color: var(--loading-background-color);
  border-radius: 100%;
}
@media only screen and (max-width : 768.98px) {
  .user-lists__image {
    height: 50px;
    width: 50px;
  }
}
@media only screen and (min-width : 769px) {
  .user-lists__image {
    height: 60px;
    width: 60px;
  }
}
.user-lists__image svg {
  width: 100%;
  height: 100%;
}
.user-lists__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
  z-index: 2;
}
@media only screen and (max-width : 768.98px) {
  .user-lists__details {
    width: calc(100% - 60px);
    padding-left: 0.2rem;
  }
}
@media only screen and (min-width : 769px) {
  .user-lists__details {
    flex-grow: 1;
    padding: 0 0.5rem;
  }
}
.user-lists__title {
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
}
.user-lists__title button {
  font-size: 1rem;
}
.user-lists__date {
  font-size: 0.9rem;
  color: var(--muted-text-color);
}
.user-lists__favorite {
  width: auto;
}
@media only screen and (max-width : 768.98px) {
  .user-lists__favorite {
    display: flex;
    justify-content: flex-end;
  }
}
.user-lists__favorite button {
  display: inline-flex;
  align-items: center;
  height: 40px;
}