/*@font-family: 'Palatino Linotype';*/
/*@header-background-color: #031C34;*/
/*@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);
  color: #214567;
  font-weight: 600;
  cursor: pointer;
}
a:hover {
  text-decoration: none;
  outline: none;
  color: #3C5F81;
}
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:disabled {
  pointer-events: none;
  cursor: vertical-text;
  opacity: 0.5;
}
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #FFFFFF;
    --hero-background-color: #F8F8F8;
    --text-color: #000000;
    --light-text-color: #404040;
    --muted-text-color: #080614;
    --border-color: #E0E0E0;
    --border-color: #D3D3D3;
    --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-color: #000000;
    --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;
    /* --alternate-background-color: @white-color;
       
        --loading-background-color: rgba(255,255,255,0.5);
        --skeleton-shimmer: #FFFFFF;
        --contrast-background-color: @black-color;
        --contrast-text-color: @white-color;
        --button-background-color: #F6F8FA;
        --button-hover-color: #EFF2F5;
        --button-border-color: #D1D9E0;
        --logo-background-color: #F6F8FA;
        --text-color: @black-color;
        --font-weight: normal;
        --hover-color: lighten(@black-color, 30%);
       
        --side-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
        --left-pane-background: #FAFAFA;
        --left-pane-background: @white-color;
        --page-header-background: #f8f9fa;
        --page-header-color: #000022;
        --nav-hover-color: #f2f2f2;
        --button-transparent-color: rgba(0,0,0,0.9);
        --button-transparent-hover-color: rgba(0,0,0,0.5);
        --index-h1-text: rgba(0, 0, 0, 0.8);*/
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #080616;
    --background-color: #03010B;
    --background-color: #010F1D;
    --background-color: #000000;
    --hero-background-color: #292636;
    --text-color: #FFFFFF;
    --light-text-color: #bfbfbf;
    --muted-text-color: #E5E6E7;
    --border-color: #625F72;
    --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-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;
    /*   --alternate-background-color: #2B2A33;
        
        --contrast-background-color: @white-color;
        --contrast-text-color: @black-color;
        --button-background-color: #151B23;
        --button-hover-color: #3D444D;
        --button-border-color: #252C34;
        --alt-background-color: #1E1D24;
        --logo-background-color: #2F2A6B;
        --text-color: @white-color;
        --font-weight: 500;
        --hover-color: darken(@white-color, 30%);
       
        --contrast-background-text: rgba(252,252,252,0.95);
        --side-shadow: 0 .5em 1em -.125em rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.02);
        --left-pane-background: #000022;
        --page-header-background: #000022;
        --page-header-color: @white-color;
        --nav-hover-color: #2B2A33;
        --button-transparent-color: rgba(255,255,255,0.9);
        --button-transparent-hover-color: rgba(255,255,255,0.5);
        --index-h1-text: rgba(255, 255, 255, 0.8);*/
  }
}
html,
body {
  font-family: Rubik, Rubik-bold-fallback, Arial, sans-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: 20px;
  line-height: 32px;
  overflow-x: hidden;
}
body.modal-open {
  overflow: hidden;
  padding-right: 15px;
  /* Prevents "jumping" when the scrollbar disappears */
}
main {
  width: 100%;
  height: auto;
}
main.main-layout {
  min-height: calc(100lvh - 100px);
}
main.main-layout.fixed {
  padding-top: 150px;
}
main.main-layout.relative {
  padding-top: 50px;
}
h1.logo {
  z-index: 1000;
  position: relative;
}
h1.logo svg {
  width: auto;
  display: block;
  margin: 0 auto;
  fill: #FFFFFF;
  /* filter: drop-shadow(0 1px 0 rgba(13,45,77,0.2));*/
}
@media only screen and (max-width : 990.98px) {
  h1.logo svg {
    height: 30px;
  }
}
@media only screen and (min-width : 991px) {
  h1.logo svg {
    height: 30px;
  }
}
.at:before {
  font-weight: 600;
  color: var(--text-color);
  color: #214567;
  content: "\0040";
}
.at:hover:before {
  color: #3C5F81;
}
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: 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 */
}
.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.linkedin path {
  fill: #0077B5;
}
svg.facebook path {
  fill: #1877F2;
}
svg.twitter path {
  stroke: var(--text-color);
}
svg.tiktok path {
  fill: #000000;
}
svg.whatsapp {
  fill: #25D366;
}
svg.instagram {
  fill: #E4405F;
}
svg.email {
  fill: #ef4444;
}
svg.stroked path,
svg.stroked circle,
svg.stroked rect,
svg.stroked line,
svg.stroked polyline,
svg.stroked polygon {
  fill: none;
  stroke: var(--text-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}
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 path,
svg.filled circle,
svg.filled rect,
svg.filled line,
svg.filled polyline,
svg.filled polygon {
  fill: var(--text-color);
  stroke-width: 2px;
}
/*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;
}
/*#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: 100vw;
  height: 100lvh;
  z-index: 1002;
  overflow: hidden;
  display: none;
  /* hidden by default */
  /* 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: 1000;
  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: 1002;
  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: 500px;
    max-width: 100%;
  }
}
@media only screen and (min-width : 991px) {
  #modal .inner-modal {
    width: 500px;
    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-body {
            width: 100%;
            height: auto;
            min-height: 100%;
            position: relative;
        }

        & .inner-modal-body {
            height: calc(100lvh - 50px);
            width: 100%;
            max-width: calc(100% - 20px);
            margin: 0 auto;
            overflow-y: auto;
            padding: 20px 0 0 0;
            scrollbar-color: rgb(136,136,136);
            scrollbar-width: thin;
            -ms-overflow-style: none;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                width: 10px;
            }

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

            &::-webkit-scrollbar-thumb {
                background-color: rgb(136,136,136);
                border-radius: 25px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background-color: rgb(100,100,100);
            }

            &::-webkit-scrollbar-thumb:active {
                background-color: rgb(68,68,68);
            }

            & .buffer{
                height: 100px;
                width: 100%;
            }

            & nav {
                height: auto;
                width: 100%;

                & ul {

                    &:first-child {

                        a {
                            display: inline-block;
                            color: var(--text-color);
                            font-weight: 500;
                            transition: color 0.3s;
                            text-transform: uppercase;
                            font-size: 1.5rem;
                            line-height: 1.6rem;
                            padding: 12px 0;

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

                    &:last-child {

                        & .search {
                            width: 200px;
                            margin-top: 20px;
                            justify-content: center;

                            & span {
                                text-align: center;
                                padding: 0 12px;
                            }

                            & svg {

                                & path {
                                    fill: none;
                                    stroke: @link-color;
                                    stroke-miterlimit: 10;
                                    stroke-width: 48px
                                }

                                & line {
                                    fill: none;
                                    stroke: @link-color;
                                    stroke-linecap: round;
                                    stroke-miterlimit: 10;
                                    stroke-width: 48px
                                }
                            }

                            &:hover {

                                & svg {

                                    & path {
                                        stroke: var(--text-color);
                                    }

                                    & line {
                                        stroke: var(--text-color);
                                    }
                                }
                            }
                        }

                        & .link {
                            width: 200px;
                            justify-content: center;
                            margin-top: 20px;
                        }
                    }

                    & hr {
                        width: 25px;
                        height: 2px;
                        background-color: @link-color;
                        border: none;
                        margin-top: 2px;
                    }
                }
            }
        }*/
}
#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: Rubik, Rubik-bold-fallback, Arial, sans-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 : 990.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: 100%;
  margin: 0 auto;
  /*  display: flex;
            justify-content: center;*/
  overflow-y: auto;
  padding: 20px 0 120px 0;
  scrollbar-color: #888888;
  scrollbar-width: thin;
  /*   -ms-overflow-style: none;
            scrollbar-width: none;*/
}
#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;
  /* & nav {
                height: auto;
                width: 100%;

                & ul {

                    &:first-child {

                        a {
                            display: inline-block;
                            color: var(--text-color);
                            font-weight: 500;
                            transition: color 0.3s;
                            text-transform: uppercase;
                            font-size: 1.25rem;
                            line-height: 1.5rem;
                            padding: 12px 0;

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

                    &:last-child {

                        & .search {
                            width: 200px;
                            margin-top: 20px;
                            justify-content: center;

                            & span {
                                text-align: center;
                                padding: 0 12px;
                            }

                            & svg {

                                & path {
                                    fill: none;
                                    stroke: @link-color;
                                    stroke-miterlimit: 10;
                                    stroke-width: 48px
                                }

                                & line {
                                    fill: none;
                                    stroke: @link-color;
                                    stroke-linecap: round;
                                    stroke-miterlimit: 10;
                                    stroke-width: 48px
                                }
                            }

                            &:hover {

                                & svg {

                                    & path {
                                        stroke: var(--text-color);
                                    }

                                    & line {
                                        stroke: var(--text-color);
                                    }
                                }
                            }
                        }

                        & .link {
                            width: 200px;
                            justify-content: center;
                            margin-top: 20px;
                        }
                    }

                    & hr {
                        width: 25px;
                        height: 2px;
                        background-color: @link-color;
                        border: none;
                        margin-top: 2px;
                    }
                }
            }*/
}
#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;
}
#modal .modal-contents .inner-modal-body nav {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#modal .modal-contents .inner-modal-body nav a:not(.boxed),
#modal .modal-contents .inner-modal-body nav button:not(.boxed, .cancel) {
  color: var(--text-color);
  transition: color 0.3s;
  font-size: 1.25rem;
  line-height: 1.5rem;
  /*border-bottom: 5px solid transparent;*/
  height: 40px;
  display: flex;
  align-items: center;
}
#modal .modal-contents .inner-modal-body nav a:not(.boxed).active,
#modal .modal-contents .inner-modal-body nav button:not(.boxed, .cancel).active {
  /*border-bottom-color: var(--border-color);*/
  color: var(--muted-text-color);
}
#modal .modal-contents .inner-modal-body nav a:not(.boxed):hover,
#modal .modal-contents .inner-modal-body nav button:not(.boxed, .cancel):hover {
  color: #214567;
}
#modal .modal-contents .inner-modal-body nav a:not(.boxed):hover svg.stroked path,
#modal .modal-contents .inner-modal-body nav button:not(.boxed, .cancel):hover svg.stroked path {
  stroke: #214567;
}
#modal .modal-contents .inner-modal-body nav a.boxed,
#modal .modal-contents .inner-modal-body nav button.boxed.wide {
  width: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1rem;
  height: 40px;
  display: flex;
  align-items: center;
}
#modal .modal-contents .inner-modal-body nav .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-out, opacity 0.8s ease-in;
  display: flex;
  flex-direction: column;
  z-index: 2005;
  /* When visible */
  /*    @media @smallDevice {
                        top: 0;
                    }

                    @media @largeDevice {
                        top: 0;
                    }*/
  /*}*/
  /* Optional slide-out class */
}
#modal .modal-contents .inner-modal-body nav .sub-menu .nav {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  margin: 0 auto;
  position: relative;
  height: 100%;
  z-index: 2005;
  flex-direction: column;
}
#modal .modal-contents .inner-modal-body nav .sub-menu .nav .nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#modal .modal-contents .inner-modal-body nav .sub-menu .nav .nav-group svg.stroked path {
  stroke: var(--text-color);
}
#modal .modal-contents .inner-modal-body nav .sub-menu .nav button.cancel {
  display: none !important;
}
#modal .modal-contents .inner-modal-body nav .sub-menu.slide-in {
  max-height: 1000px;
  opacity: 1;
}
#modal .modal-contents .inner-modal-body nav .sub-menu.slide-out {
  max-height: 0;
  opacity: 0;
}
/*#endregion */
@keyframes slideUp {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
header.main-layout {
  height: auto;
  width: 100%;
  /*width: 100vw;*/
  background-color: transparent;
  margin-bottom: 1.5rem;
}
header.main-layout.fixed {
  position: fixed;
  z-index: 998;
  /* Smooth transition makes it feel like a breathing UI */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  opacity: 1;
  transform: translateY(0);
}
header.main-layout.fixed .inner-header {
  box-shadow: var(--header-box-shadow);
}
header.main-layout.fixed.hidden {
  opacity: 0;
  transform: translateY(-5px);
  /* Move up slightly so it doesn't just 'blink' out */
  pointer-events: none;
  /* Allows user to click things where the header used to be */
}
header.main-layout.relative {
  position: relative;
  box-shadow: var(--header-box-shadow);
}
header.main-layout .inner-header {
  height: auto;
  background-color: #0D2D4D;
  width: 100%;
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .inner-header {
    min-height: 65px;
  }
}
@media only screen and (min-width : 991px) {
  header.main-layout .inner-header {
    min-height: 85px;
  }
}
header.main-layout .header-container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #214567;
  position: relative;
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .header-container {
    height: 55px;
    width: 100%;
    max-width: calc(100% - 20px);
  }
}
@media only screen and (min-width : 991px) {
  header.main-layout .header-container {
    height: 75px;
    width: 990px;
    max-width: calc(100% - 20px);
  }
}
header.main-layout .header-container h1.logo {
  margin-right: 20px;
}
header.main-layout .header-container nav {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  width: auto;
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .header-container nav {
    display: none !important;
  }
}
header.main-layout .header-container nav a:not(.boxed),
header.main-layout .header-container nav button:not(.boxed, .cancel) {
  color: #FFFFFF;
  font-weight: 600;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  height: 100%;
  border-bottom: 5px solid transparent;
}
header.main-layout .header-container nav a:not(.boxed).active,
header.main-layout .header-container nav button:not(.boxed, .cancel).active {
  border-bottom-color: #214567;
}
header.main-layout .header-container nav a:not(.boxed):hover,
header.main-layout .header-container nav button:not(.boxed, .cancel):hover {
  color: #214567;
}
header.main-layout .header-container nav a:not(.boxed):hover svg.stroked path,
header.main-layout .header-container nav button:not(.boxed, .cancel):hover svg.stroked path {
  stroke: #214567;
}
header.main-layout .header-container nav button.boxed.btn-transparent {
  /*color: @black-color;*/
}
header.main-layout .header-container nav .sub-menu {
  width: 100%;
  position: fixed;
  /*box-shadow: @header-box-shadow;*/
  /*box-shadow: var(--header-box-shadow);*/
  padding: 0 0.5rem;
  background-color: #0D2D4D;
  z-index: 997;
  left: 0;
  transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
  /* When visible */
  /* Optional slide-out class */
}
header.main-layout .header-container nav .sub-menu .nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.8rem;
  gap: 1rem;
  width: 990px;
  max-width: calc(100% - 20px);
  margin: 0 auto;
  position: relative;
  height: 100%;
  padding-right: 2rem;
  border-bottom: 1px solid #214567;
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .header-container nav .sub-menu .nav {
    height: 55px;
  }
}
@media only screen and (min-width : 991px) {
  header.main-layout .header-container nav .sub-menu .nav {
    height: 75px;
  }
}
header.main-layout .header-container nav .sub-menu .nav .nav-group {
  display: flex;
  gap: 1rem;
}
header.main-layout .header-container nav .sub-menu .nav .nav-group svg.stroked path {
  stroke: #FFFFFF;
}
header.main-layout .header-container nav .sub-menu .nav button.cancel {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 14px;
  color: #000000;
  background-color: #FFFFFF;
  color: #FFFFFF;
  background-color: #214567;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
header.main-layout .header-container nav .sub-menu .nav button.cancel:hover {
  /* color: @link-color;
                            box-shadow: 0 0 8px rgba(0,123,255,0.25);*/
  background-color: #3C5F81;
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .header-container nav .sub-menu {
    height: 65px;
  }
}
@media only screen and (min-width : 991px) {
  header.main-layout .header-container nav .sub-menu {
    height: 85px;
  }
}
header.main-layout .header-container nav .sub-menu.slide-in {
  opacity: 1;
  top: 0;
  /*    @media @smallDevice {
                        top: 0;
                    }

                    @media @largeDevice {
                        top: 0;
                    }*/
}
header.main-layout .header-container nav .sub-menu.slide-out {
  opacity: 0;
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .header-container nav .sub-menu.slide-out {
    top: -55px;
  }
}
@media only screen and (min-width : 991px) {
  header.main-layout .header-container nav .sub-menu.slide-out {
    top: -75px;
  }
}
header.main-layout .header-container nav .sub-menu a {
  border-bottom: none;
}
header.main-layout .header-container .hamburger {
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: transparent;
  width: 40px;
}
@media only screen and (min-width : 991px) {
  header.main-layout .header-container .hamburger {
    display: none !important;
  }
}
header.main-layout .header-container .hamburger div {
  width: 100%;
  height: 3px;
  background-color: #FFFFFF;
  margin: 3px 0;
  transition: 0.4s;
}
header.main-layout .header-container .hamburger div:first-child {
  margin-top: 0;
  width: 90%;
}
header.main-layout .header-container .hamburger div:last-child {
  width: 85%;
}
header.main-layout .header-container .hamburger:hover div {
  background-color: #214567;
}
header.main-layout .hero {
  width: 990px;
  max-width: calc(100% - 20px);
  margin: 0 auto;
  padding-top: 50px;
  color: #FFFFFF;
  height: auto;
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .hero {
    flex-direction: column-reverse;
  }
}
header.main-layout .hero-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .hero-container {
    height: auto;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    flex-direction: column-reverse;
  }
}
@media only screen and (min-width : 991px) {
  header.main-layout .hero-container {
    width: 990px;
    max-width: calc(100% - 20px);
    height: 100%;
    margin: 0 auto;
  }
}
header.main-layout .hero-text {
  padding-bottom: 1rem;
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .hero-text {
    height: auto;
    width: 100%;
  }
}
@media only screen and (min-width : 991px) {
  header.main-layout .hero-text {
    height: 100%;
    width: 500px;
  }
}
header.main-layout .hero-text h3 {
  text-transform: uppercase;
  font-size: 0.7rem;
  margin-bottom: 1rem;
}
header.main-layout .hero-text h1 {
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: clamp(2.2rem, 4vw, 2.5rem);
  line-height: clamp(2.5rem, 4vw, 2.8rem);
}
header.main-layout .hero-text h2 {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
header.main-layout .hero-text .call-to-actions {
  display: flex;
  gap: 1rem;
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .hero-image {
    height: auto;
    width: 100%;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width : 991px) {
  header.main-layout .hero-image {
    width: 380px;
    height: auto;
    min-height: 100%;
  }
}
@media only screen and (max-width : 990.98px) {
  header.main-layout .hero-image img {
    height: auto;
    width: auto;
    max-width: 100%;
  }
}
@media only screen and (min-width : 991px) {
  header.main-layout .hero-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
.show-filter-menu {
  width: 990px;
  max-width: calc(100% - 20px);
  display: flex;
  justify-content: center;
  margin: 0 auto;
  background-color: transparent;
}
.show-filter-menu button {
  font-size: 0.8rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: #FFFFFF;
  text-transform: uppercase;
  width: 100px;
  text-align: center;
  --r: 0.6em;
  /* control the cutout */
  border-inline: 0.5em solid #0000;
  padding: 0.2em 0.3em calc(var(--r) + 0.2em);
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 0.5em) calc(100% - var(--r)), 50% 100%, 0.5em calc(100% - var(--r)), 0 100%);
  background: radial-gradient(50% 0.2em at top, #000a, #0000) border-box, #214567 padding-box;
  /* the color  */
  width: fit-content;
}
.show-filter-menu button:hover {
  background: radial-gradient(50% 0.2em at top, #000a, #0000) border-box, #3C5F81 padding-box;
  /* the color  */
  /* &:before {
                content: "options";
            }

            &.open {
                &:before {
                    content: "hide";
                }
            }*/
}
.show-filter-menu p:first-child {
  margin-bottom: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-color);
}
.show-filter-menu p:last-child {
  font-size: 0.75rem;
  text-transform: uppercase;
}
.show-filter-menu .page-hamburger {
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
  margin: 5px auto 0 auto;
  width: 25px;
}
.show-filter-menu .page-hamburger > div {
  width: 100%;
  height: 1px;
  background-color: #FFFFFF;
  margin: 2px 0;
  transition: 0.4s;
}
.show-filter-menu .page-hamburger > div:first-child {
  margin-top: 0;
}
.form-page {
  height: auto;
  min-height: 85px;
  background-color: #0D2D4D;
  box-shadow: var(--header-box-shadow);
  width: 100%;
  position: relative;
  z-index: 999;
}
header.form-layout {
  height: 75px;
  width: calc(500px + 40px);
  max-width: calc(100% - 20px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #214567;
}
header.form-layout h1.logo {
  margin-right: 20px;
}
main.form-layout {
  width: 100%;
  height: auto;
  padding: 30px 0;
}
.inner-form-layout {
  background-color: var(--background-color);
  width: calc(500px + 40px);
  max-width: calc(100% - 20px);
  border-radius: 12px;
  margin: 0 auto;
}
.form-container {
  width: 500px;
  padding: 30px 0;
  max-width: calc(100% - 20px);
  position: relative;
  height: auto;
  min-height: 100%;
  margin: 0 auto;
}
.form-container h1 {
  text-transform: capitalize;
  margin-bottom: 1.5rem;
  /*padding-bottom: 0.5rem;*/
  /*border-bottom: 1px solid var(--border-color);*/
  font-weight: 600;
  font-size: 1.1rem;
  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-size: 0.85rem;
  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: 1rem;
}
.form-container .form-heading {
  text-transform: uppercase;
  margin-bottom: 10px;
}
.form-container .validation-message {
  color: red;
  font-size: 14px;
  padding: 5px 0;
}
.form-container fieldset {
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
  background-color: var(--background-color) !important;
}
.form-container fieldset.password-box {
  position: relative;
}
.form-container fieldset.password-box #show-password {
  margin-left: 5px;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  z-index: 100;
}
.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 input.form-field,
.form-container textarea.form-field {
  width: 100%;
  box-sizing: border-box;
  font-size: 20px;
  line-height: 32px;
  border: 0;
  color: var(--muted-text-color);
  opacity: 1;
  z-index: 1;
  padding: 15px 0;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: var(--background-color) !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: var(--background-color);
}
.form-container input.form-field:disabled,
.form-container textarea.form-field:disabled {
  background-color: var(--background-color) !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: var(--background-color) !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: 15px 0;
  /*& input.form-field {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            border: 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;
}
.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(--muted-text-color);
  opacity: 1;
  font-family: Rubik, Rubik-bold-fallback, Arial, sans-serif;
  padding: 15px 0;
  font-size: 20px;
  line-height: 32px;
  background-color: var(--background-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(--background-color);
}
.form-container select.form-field:disabled {
  background-color: var(--background-color) !important;
  cursor: text;
}
.form-container select.form-field:focus,
.form-container select.form-field:active {
  background-color: var(--background-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 .button-holder button.cancel {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 14px;
  color: #000000;
  background-color: #FFFFFF;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.form-container .button-holder button.cancel:hover {
  background-color: #E5E6E7;
}
.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.secondary {
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
  z-index: 1;
}
.form-container button.btn.secondary.active {
  pointer-events: none;
  background-color: #3C5F81;
}
.form-container .ticks {
  padding: 15px 0;
}
.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: 25px 0;
  text-align: center;
}
.form-container .form-options button {
  height: 30px;
}
.form-container .form-options a,
.form-container .form-options button {
  /*border-bottom: 1px dotted var(--text-color);*/
  color: #214567;
}
.form-container .form-options a:first-child,
.form-container .form-options button:first-child {
  margin-right: 15px;
}
.form-container .form-options a:hover,
.form-container .form-options button:hover {
  color: #3C5F81;
}
/*#region FORM Editor */
.photo-preview {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  position: relative;
}
.photo-preview .wrapper {
  width: 250px;
  height: 250px;
  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%);
}
.photo-preview label {
  cursor: pointer;
  display: block;
}
.photo-preview label.small {
  width: 250px;
  height: 250px;
  position: relative;
  background-color: var(--hero-background-color);
  border-radius: 8px;
}
.photo-preview label.small.skeleton {
  border: none;
}
.photo-preview label.small img {
  border-radius: 8px;
}
.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: 8px;
  z-index: 2;
}
.photo-preview label:hover .no-image {
  font-size: smaller;
}
.photo-preview label:hover .no-image:before {
  color: rgba(0, 0, 0, 0.5);
}
.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: #214567;
}
.photo-preview label .placeholder:hover svg path {
  fill: #214567;
}
.photo-preview label .placeholder:hover svg circle {
  fill: #214567;
}
.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: #214567;
  color: #FFFFFF;
  border-radius: 4px;
}
.photo-preview .small-button-holder button svg.fill path {
  fill: #FFFFFF;
}
.photo-preview .small-button-holder button:hover {
  background-color: #3C5F81;
}
.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: #214567;
}
.upload-document label:hover svg {
  fill: #214567;
}
.upload-document label input[type="file"] {
  display: none;
}
.form-editor {
  width: 100%;
  height: auto;
  position: relative;
  padding-bottom: 50px;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
  /* .ql-toolbar.ql-bubble, .ql-toolbar.ql-snow {
        z-index: 4000;
        border-radius: 6px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-around;

        & button {
            height: 100%;
            width: 30px;
            color: var(--text-color);
            font-weight: 600;

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

        .ql-tooltip-arrow {
            display: none;
        }
    }*/
}
.form-editor .ql-editor.ql-blank::before {
  font-size: 16px;
  font-style: normal;
  color: #777777;
}
.form-editor .ql-bubble {
  position: relative;
}
.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: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
  display: flex;
  justify-content: space-around;
  z-index: 1000 !important;
  /* &:hover {

                & .ql-toolbar button {

                    & .ql-stroke {
                        stroke: @link-color !important;
                    }

                    & .ql-fill {
                        fill: @link-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: #214567 !important;
}
.form-editor .ql-tooltip .ql-toolbar button:hover .ql-fill {
  fill: #214567 !important;
}
.form-editor .ql-editor {
  padding: 0;
  height: auto;
  min-height: 300px;
}
.form-editor .ql-editor * {
  font-size: 20px;
  line-height: 32px;
}
.form-editor .ql-editor h1,
.form-editor .ql-editor h2,
.form-editor .ql-editor h3,
.form-editor .ql-editor h4,
.form-editor .ql-editor h5,
.form-editor .ql-editor h6 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  line-height: 18px;
  margin: 15px 0;
  text-align: left;
}
.form-editor .ql-editor b,
.form-editor .ql-editor strong {
  font-weight: 600;
}
.form-editor .ql-editor i,
.form-editor .ql-editor em {
  font-style: italic;
}
.form-editor .ql-editor li {
  list-style-type: unset;
  padding-left: 0;
}
.form-editor .ql-editor ol {
  list-style: decimal;
}
.form-editor .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: 20px;
  line-height: 32px;
}
.tags-preview {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}
.tags-preview input.form-field {
  width: auto;
  padding: 0;
}
.tags-preview button {
  width: auto;
}
p.warning {
  font-style: italic;
  font-size: 0.9rem;
}
/*#region PROFILE PAGE */
.profile-details {
  margin: 0 auto;
  position: relative;
  width: 750px;
  max-width: calc(100% - 20px);
  padding-bottom: 50px;
}
.profile-details__image {
  height: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.profile-details__image-wrapper {
  width: 250px;
  height: 250px;
  border-radius: 8px;
  background-color: var(--loading-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-details__image-wrapper svg {
  width: 120px;
  height: 120px;
}
.profile-details__image-wrapper svg path {
  stroke: #0D2D4D;
}
.profile-details__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  z-index: 2;
}
.profile-details__metadata {
  text-align: center;
  margin-bottom: 1.5rem;
}
.profile-details__title {
  font-size: 1.2rem;
  letter-spacing: 0.3px;
}
.profile-details__username {
  color: var(--muted-text-color);
  font-weight: 600;
  font-size: 0.9rem;
}
.profile-details__date-country {
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  font-size: 0.9rem;
}
.profile-details__bio {
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--border-color);
  padding-left: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4rem;
}
.profile-details__actions {
  height: 40px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 0.5rem 0;
  column-gap: 1rem;
}
.profile-details__actions button {
  display: inline-flex;
  align-items: center;
}
.profile-details__actions button:hover {
  color: #214567;
}
.profile-details__actions button:hover svg.stroked path {
  stroke: #214567;
}
.profile-details__links {
  height: 40px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0 1rem 0;
  column-gap: 1rem;
}
.profile-details__links button,
.profile-details__links a {
  display: inline-flex;
  align-items: center;
}
.profile-details__links button:hover,
.profile-details__links a:hover {
  color: #214567;
}
.profile-details__links button:hover svg.stroked path,
.profile-details__links a:hover svg.stroked path {
  stroke: #214567;
}
.profile-details__stats {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.profile-details__stats p span {
  font-weight: 600;
}
.profile-details__stats p:last-child {
  margin-right: 0;
}
.profile-details__contacts {
  margin-bottom: 1rem;
}
.profile-details__contact-item {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.profile-details__contact-item .profile-details__contact-item-header {
  display: flex;
  column-gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.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: #1DA1F2;
}
.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: #214567;
}
.profile-details__contact-item-definition {
  -ms-word-break: break-all;
  word-break: break-all;
}
.user-profile-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  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: #000000;
}
.user-profile-mode.enabled {
  background-color: #D4EDD9;
}
.user-profile-mode.disabled {
  background-color: #FFF3CD;
}
/*#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 : 990.98px) {
  .description-lists {
    padding: 30px 0;
  }
}
@media only screen and (min-width : 991px) {
  .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 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%;
  padding: 0.25rem;
  margin-bottom: 0.1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.comments-list__ancestry-container 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;
}
.comments-list__ancestry-container > h3 button {
  position: absolute;
  top: 5px;
  right: 5px;
}
.comments-list__ancestry-container > h3 button:hover svg.stroked path {
  stroke: #214567;
}
.comments-list__card {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.comments-list__text {
  position: relative;
  max-height: 8.8rem;
  /* 5 lines � 1.4rem + 1 x 1.8 */
  overflow: hidden;
  transition: max-height 0.8s ease;
  /* 2. Specialized fix for Quill's <p><br></p> structure */
}
.comments-list__text:not(:empty):first-of-type::first-letter,
.comments-list__text p:not(:empty):first-of-type::first-letter,
.comments-list__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;
}
.comments-list__text p:has(br):first-child::first-letter {
  all: unset;
  /* Don't apply drop cap to a line break */
}
.comments-list__text h1,
.comments-list__text h2,
.comments-list__text h3,
.comments-list__text h4,
.comments-list__text h5,
.comments-list__text h6 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  line-height: 1.1rem;
  margin: 15px 0;
  text-align: left;
}
.comments-list__text p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4rem;
}
.comments-list__text p:first-child {
  margin-top: 0;
}
.comments-list__text p.no {
  font-style: italic;
}
.comments-list__text b,
.comments-list__text strong {
  font-weight: 600;
}
.comments-list__text i,
.comments-list__text em {
  font-style: italic;
}
.comments-list__text li {
  list-style-type: unset;
  padding-left: 0;
  font-size: 0.9rem;
  line-height: 1.4rem;
}
.comments-list__text ol {
  list-style: decimal;
}
.comments-list__text ul {
  list-style: square;
}
.comments-list__text:not(.truncated) {
  max-height: none;
}
.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;
}
.comments-list__show-text button {
  color: #214567;
  font-weight: 600;
}
.comments-list__show-text button:hover {
  color: #3C5F81;
}
.comments-list__metadata {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: center;
  color: var(--muted-text-color);
}
.comments-list__date {
  color: var(--muted-text-color);
}
.comments-list__filter-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}
.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;
  justify-content: flex-start;
  font-size: 0.8rem;
}
.comments-list__filter-text {
  text-transform: capitalize;
  height: 50px;
  display: flex;
  align-items: center;
  width: auto;
}
.comments-list__show-filter {
  height: 50px;
  width: auto;
  display: flex;
  align-items: center;
  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: flex-start;
}
.comments-list__top-action button {
  height: 50px;
  display: flex;
  align-items: center;
}
.comments-list__actions {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  text-transform: uppercase;
  column-gap: 1rem;
}
.comments-list__actions button {
  height: 30px;
  background-color: var(--hero-background-color);
  border-radius: 21px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
}
.comments-list__actions button span {
  font-size: 0.7rem;
}
.comments-list__actions button:hover {
  color: #214567;
}
.comments-list__actions button:hover.active svg.stroked path,
.comments-list__actions button:hover.active svg.stroked circle,
.comments-list__actions button:hover.active svg.stroked rect,
.comments-list__actions button:hover.active svg.stroked line,
.comments-list__actions button:hover.active svg.stroked polyline,
.comments-list__actions button:hover.active svg.stroked polygon {
  stroke: #214567;
}
.comments-list__actions button:hover svg.stroked path {
  stroke: #214567;
  stroke-width: 1px;
}
.comments-list__actions button:hover svg.filled path {
  fill: #214567;
}
.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 {
  stroke: green;
}
.comments-list__actions svg {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: stroke 800ms ease-in-out, transform 0.2s ease;
}
.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.8rem;
  color: var(--muted-text-color);
}
.comments-list__brief-meta a:hover,
.comments-list__brief-meta button:hover {
  color: #214567;
}
.comments-list__brief-meta a:hover svg.stroked path,
.comments-list__brief-meta button:hover svg.stroked path {
  stroke: #214567;
}
/*.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: 990px;
  max-width: calc(100% - 20px);
}
@media only screen and (max-width : 990.98px) {
  .table-container {
    padding: 30px 0;
  }
}
@media only screen and (min-width : 991px) {
  .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;
}
.form-message-container {
  width: 100%;
  border-radius: 8px;
  font-family: "Segoe UI", sans-serif;
  display: flex;
  align-items: center;
  animation: pulse-border 2s infinite;
  /* Danger (Reddish) - The Truth is at Risk */
  /* Success (Greenish) - Merit has been Earned */
  /* Warning (Yellowish) - Clarity is Fading */
}
.form-message-container.error {
  --pulse-color: rgba(231, 76, 60, 0.5);
  border: 1px solid #e74c3c;
}
.form-message-container.success {
  --pulse-color: rgba(46, 204, 113, 0.5);
  border: 1px solid #2ecc71;
}
.form-message-container.warning {
  --pulse-color: rgba(241, 196, 15, 0.5);
  border: 1px solid #f1c40f;
}
.form-message-contents {
  padding: 0.5rem 0.25rem;
  font-size: 0.85rem;
  line-height: 1rem;
}
.form-message-contents h3 {
  font-size: 0.9rem;
  font-weight: 600;
}
.form-message-contents p.error {
  color: red;
}
.form-message-contents button {
  margin-top: 0.5rem;
}
.form-message-icon {
  font-size: 1rem;
  margin-right: 0.5rem;
  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: 100%;
  height: auto;
  padding: 50px 0;
  z-index: 998;
  display: flex;
  justify-content: center;
  background-color: var(--background-color);
}
.page-status-message-container .page-status-message {
  width: 500px;
  max-width: calc(100% - 20px);
}
.page-status-message-container .page-status-message h1 {
  margin: 0 0 10px;
  font-size: 2rem;
  letter-spacing: 0.3px;
  line-height: 2.2rem;
}
.page-status-message-container .page-status-message p {
  margin-top: 20px;
  color: red;
  font-weight: 600;
}
.page-status-message-container .page-status-message p.error {
  color: red;
  font-weight: 600;
}
.page-status-message-container .page-status-message svg {
  width: 120px;
  height: 120px;
  stroke: var(--muted-text-color);
}
.page-status-message-container .page-status-message .actions {
  width: 100%;
  padding-top: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
}
.page-status-message-container .page-status-message .actions svg {
  width: 18px;
  height: 18px;
}
.timeline-details {
  margin: 0 auto;
  position: relative;
  width: 750px;
  max-width: calc(100% - 20px);
}
@media only screen and (max-width : 990.98px) {
  .timeline-details {
    padding: 30px 0;
  }
}
@media only screen and (min-width : 991px) {
  .timeline-details {
    padding: 50px 0;
  }
}
.timeline-details__card {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  height: auto;
}
.timeline-details__metadata {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.timeline-details__type {
  text-transform: uppercase;
  font-size: 14px;
  color: #FFFFFF;
  padding: 3px 10px;
  font-weight: 600;
  border-radius: 4px;
}
.timeline-details__type.skeleton {
  width: 120px;
}
.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;
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: var(--muted-text-color);
}
.timeline-details__date.skeleton {
  width: 150px;
}
.timeline-details__text {
  /*  & button{ 
        float: left;
    }*/
}
.timeline-details__text p {
  /*display: flex;
        flex-wrap: wrap;*/
}
.timeline-details__text button,
.timeline-details__text a {
  /* Force it to stay in the flow of text */
  /* Ensure it aligns with the text baseline so it doesn't "float" up or down */
  /* Prevent the button from expanding to 100% width */
  /*text-decoration: underline;*/
  /* &:hover {
            color: @link-color;
            text-decoration: none;
        }*/
}
.btn {
  width: auto;
  display: flex;
  align-items: center;
  padding: 0.25rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.25s ease;
  color: var(--text-color);
}
.btn.wide {
  width: 100%;
  margin-top: 1rem;
  justify-content: center;
}
.btn.primary {
  border: 1px solid var(--border-color);
  color: #214567;
}
.btn.primary.alt {
  background-color: #FFFFFF;
}
@media only screen and (min-width : 991px) {
  .btn.primary.alt {
    border: none;
  }
}
.btn.primary.alt:hover {
  color: #3C5F81;
}
.btn.primary:hover:not(.alt) {
  color: #3C5F81;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.btn.secondary {
  color: #FFFFFF;
  background-color: #214567;
  /* border: 1px solid @header-background-color;*/
}
.btn.secondary.alt {
  /*border: 1px solid #031C34;*/
}
.btn.secondary:hover {
  background: #3C5F81;
  color: #FFFFFF;
  /* color: @link-color;
            box-shadow: 0 0 8px rgba(0,123,255,0.25);*/
}
.btn-group {
  padding-bottom: 15px;
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.btn-group.bordered {
  border-bottom: 1px solid var(--border-color);
}
.btn-group .btn {
  border-radius: 50px;
  color: #214567;
  border: 1px solid var(--border-color);
}
.btn-group .btn:hover {
  color: #3C5F81;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
/*label.btn-transparent,
    a.btn-transparent,
    button.btn-transparent,
    a.btn-link,
    button.btn-link,
    a.btn-blue,
    button.btn-blue {
        height: 40px;
        width: auto;
        display: flex;
        align-items: center;
        padding: 0 0.9rem;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        transition: all 0.25s ease;*/
/*column-gap: 0.5rem;*/
/*color: @text-color;

        &.wide {
            width: 100%;
            margin-top: 1rem;
            justify-content: center;
        }

        &.processing {
            animation: blinker 1s linear infinite;
        }
    }

    label.btn-transparent,
    a.btn-transparent,
    button.btn-transparent {
        border: 1px solid var(--border-color);
        border-radius: 6px;

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

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

        &.alt {
            background-color: @white-color;
            border-color: #031C34;
            color: @header-background-color;
        }*/
/* Gray out the option NOT chosen */
/*&.not-active {
            opacity: 0.3;
            filter: grayscale(1);
            color: var(--text-color);
        }*/
/* Highlight the chosen option */
/*&.active {
            color: @link-color;
            transform: scale(1.1);
        }
    }

    a.btn-link,
    button.btn-link {
        border: 1px solid @link-color;
        border: 1px solid var(--border-color);
        border-radius: 50px;

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

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

    a.btn-plain,
    button.btn-plain {
        position: relative;*/
/* font-weight:600;*/
/*height: 40px;*/
/*width: auto;
        display: flex;
        align-items: center;*/
/* column-gap: 0.5rem;*/
/*&:hover {
            color: @link-color;

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

        &.processing {
            animation: blinker 1s linear infinite;
        }*/
/* 1. THE IDLE STATE: The 30% Hint */
/*&:after {
        content: '';
        position: absolute;
        bottom: 0;*/
/* Center it: (100% - 30%) / 2 = 35% */
/*width: 30%;
        height: 2px;
        background-color: @link-color;*/
/* The "Smooth Transition" Fact */
/*transition: width 0.3s ease-out, left 0.3s ease-out;
    }*/
/* 2. THE HOVER STATE: The 100% Revelation */
/* .custom-link:hover {
        color: var(--link-color, #3498db);
    }*/
/*&:hover:after {
            width: 100%;
        }
    }

    a.btn-blue,
    button.btn-blue {
        color: @white-color;
        background-color: @link-color;

        &.alt {
            border: 1px solid #01101E;
        }

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

    .back-to-top-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 99;
        border: none;
        outline: none;
        background-color: @link-color;
        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        transition: opacity 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;

        & svg {

            & path {
                fill: @white-color;
                stroke-width: 2px;
            }
        }
    }

    buttons-group {
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;

        &.alt {
            border-bottom: none;
        }
    }

    .buttons-toggle {
        width: 100%;
        height: 60px;
        border-radius: 50%;
        display: flex;
        padding: 0.5rem;
        background-color: @header-background-color;

        & button {
            width: 50%;
            color: @white-color;

            & button.active {
                border-radius: 50%;
                background-color: @white-color;
                color: @header-background-color;
            }
        }
    }*/
/*@font-family: 'Palatino Linotype';*/
/*@header-background-color: #031C34;*/
/*@link-color: #0B2C4D;
@link-alt-color: #1F4467;

@link-color: #12A4E2;
@link-alt-color: #049BDD;*/
@keyframes slideUp {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
@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);
  }
}
/* Base alert */
.alert-container {
  position: fixed;
  top: 20px;
  right: 0;
  /* start off-screen */
  width: 300px;
  transform: translateX(100%);
  /* Hidden off-screen */
  border-radius: 8px;
  font-family: "Segoe UI", sans-serif;
  z-index: 9999;
  opacity: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  transition: transform 0.3s ease-in-out, opacity 0.4s ease-in-out;
  /* Danger (Reddish) - The Truth is at Risk */
  /* Success (Greenish) - Merit has been Earned */
  /* Warning (Yellowish) - Clarity is Fading */
  /* When visible */
  /* Optional slide-out class */
}
.alert-container .alert-pulse {
  animation: pulse-border 2s infinite;
  border-radius: 8px;
  /* Ensure the shadow follows the curve */
}
.alert-container.danger {
  --pulse-color: rgba(231, 76, 60, 0.5);
  border: 1px solid #e74c3c;
}
.alert-container.success {
  --pulse-color: rgba(46, 204, 113, 0.5);
  border: 1px solid #2ecc71;
}
.alert-container.warning {
  --pulse-color: rgba(241, 196, 15, 0.5);
  border: 1px solid #f1c40f;
}
.alert-container.slide-in {
  transform: translateX(0);
  opacity: 1;
  animation: pulse-border 1.5s infinite alternate;
}
.alert-container.slide-out {
  transform: translateX(100%);
  opacity: 0;
}
.alert-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.25rem;
}
.alert-icon {
  font-size: 1rem;
  border: none;
}
.alert-message {
  font-size: 0.75rem;
  line-height: 1rem;
  margin-bottom: 0.5rem;
}
.alert-message-container {
  padding: 0 0.5rem;
}
.alert-action-btn {
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.7rem;
  text-transform: uppercase;
  cursor: pointer;
  color: inherit;
  transition: background 0.2s ease;
}
.alert-action-btn:hover {
  color: #214567;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.alert-close {
  background: none;
  border-radius: 100%;
  font-size: 1.2rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-close:hover {
  background-color: #F8F8F8;
}
.content-details {
  margin: 0 auto;
  position: relative;
  width: 750px;
  max-width: calc(100% - 20px);
}
@media only screen and (max-width : 990.98px) {
  .content-details {
    padding: 30px 0;
  }
}
@media only screen and (min-width : 991px) {
  .content-details {
    padding: 50px 0;
  }
}
header.content-details__metadata {
  margin-bottom: 2.5rem;
}
.content-details__metadata-topbar {
  color: var(--muted-text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  text-transform: capitalize;
  font-size: 0.9rem;
}
.content-details__metadata-topbar-right {
  display: flex;
  align-items: center;
}
h1.content-details__title {
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: clamp(2rem, 4vw, 2.7rem);
}
.content-details__metadata-lowbar {
  color: var(--muted-text-color);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-transform: capitalize;
}
.content-details__image {
  height: auto;
  position: relative;
  max-width: 100%;
  width: 750px;
  aspect-ratio: 2 / 1;
  border-radius: 8px;
  background-color: var(--skeleton-background-color);
  margin-bottom: 2.5rem;
}
.content-details__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  z-index: 2;
}
figcaption.content-details__image-caption {
  font-size: 0.8rem;
  position: absolute;
  top: 100%;
  padding: 0.25rem;
  text-align: center;
}
.content-details__summary {
  margin-bottom: 1rem;
  border-left: 3px solid var(--border-color);
  padding-left: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4rem;
}
.content-details__summary a {
  color: #214567;
  font-weight: 600;
}
.content-details__summary a:hover {
  color: #3C5F81;
}
.content-details__text {
  margin: 1.5rem 0;
  /* 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-of-type::first-letter,
.content-details__text p:not(:empty):first-of-type::first-letter,
.content-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;
}
.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: 0.8rem;
  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: 1rem;
}
.content-details__addendum h4 {
  font-weight: 600;
  margin-top: 1rem;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.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: 1rem;
}
.content-details__watchlist-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.content-details__watchlist-summary {
  margin-bottom: 0.5rem;
}
.content-details__watchlist-intro {
  margin: 1rem 0;
  text-align: center;
  padding-bottom: 1rem;
  text-transform: capitalize;
}
.content-details__watchlist-intro h3 {
  color: red;
  font-weight: 600;
}
.content-details__watchlist-image {
  width: 100%;
  text-align: center;
  margin-bottom: 0.5rem;
}
.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-size: 0.8rem;
  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: #214567;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.content-details__tags {
  margin-bottom: 1.5rem;
  display: flex;
  column-gap: 0.5rem;
  flex-wrap: wrap;
}
.content-details__tags h4 {
  font-weight: 500;
}
.content-details__tags div {
  display: flex;
  column-gap: 0.5rem;
}
.content-details__central-icon {
  width: 100%;
  height: auto;
  display: flex;
  margin-bottom: 1rem;
  justify-content: center;
}
.content-details__central-icon svg {
  width: 75px;
  height: 75px;
}
.content-details__central-icon svg path {
  stroke: #0D2D4D;
}
.content-details__rating {
  margin: 2rem 0 1rem 0;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content-details__rating h4 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.content-details__rating-buttons {
  display: flex;
  column-gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.content-details__rating-buttons button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  padding: 0 1.5rem;
}
.content-details__rating-buttons button:hover {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.content-details__rating-buttons button .svg-box {
  display: none;
}
.content-details__rating-buttons button .svg-box.checked {
  display: block;
}
.content-details__rating-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 40px;
}
.content-details__rating-actions button {
  display: inline-flex;
  height: 100%;
  align-items: center;
  font-size: 0.9rem;
}
.content-details__rating-actions button:hover {
  color: #214567;
}
.content-details__creator {
  margin: 2rem 0 1rem 0;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content-details__creator h4 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.content-details__creator-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.content-details__creator-actions button {
  display: inline-flex;
  height: 100%;
  align-items: center;
  font-size: 0.9rem;
}
.content-details__creator-actions button:hover {
  color: #214567;
}
.content-details__creator-buttons {
  width: 100%;
  display: flex;
  justify-content: center;
  column-gap: 0.5rem;
  height: 40px;
}
.content-details__creator-buttons a,
.content-details__creator-buttons button {
  display: inline-flex;
  height: 100%;
  align-items: center;
  font-size: 0.9rem;
}
.content-details__creator-buttons a:hover,
.content-details__creator-buttons button:hover {
  color: #3C5F81;
}
.content-details__creator-buttons button,
.content-details__creator-buttons a {
  font-size: 0.9rem;
}
.content-details__rating-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 40px;
}
.content-details__rating-actions button {
  display: inline-flex;
  height: 100%;
  align-items: center;
  font-size: 0.9rem;
}
.content-details__rating-actions button:hover {
  color: #214567;
}
.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 {
  font-size: 0.9rem;
  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-size: 0.8rem;
  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: #214567;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}
.content-details__enrichment-action button:hover svg.stroked path {
  stroke: #214567;
}
/*
.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: @link-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: @link-color;

            & svg.stroked path {
                stroke: @link-color;
            }
        }
    }
}
*/
.shared__page-title {
  width: 750px;
  max-width: calc(100% - 20px);
  font-weight: 600;
  margin: 0 auto 1rem auto;
  height: auto;
}
.shared__page-title.alt {
  margin-top: 2.5rem;
}
.shared__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;
}
.shared__page-title h1 a,
.shared__page-title h1 button {
  font-size: 0.8rem;
  text-transform: uppercase;
}
.shared__page-title h1 a:hover,
.shared__page-title h1 button:hover {
  color: #214567;
}
.shared__page-title hr {
  height: 3px;
  background-color: var(--border-color);
  border: none;
  width: 50px;
}
.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: 14px;
  text-transform: uppercase;
}
.shared__content-status span:first-child {
  width: auto;
  padding: 3px 8px;
  border-radius: 6px 0 0 6px;
  background-color: #575757;
  color: #FFFFFF;
}
.shared__content-status span:last-child {
  width: auto;
  padding: 3px 10px;
  color: #000000;
  padding: 3px 8px;
  border-radius: 0 6px 6px 0;
}
.shared__content-status span:last-child.warning {
  background-color: #FFF3CD;
}
.shared__content-status span:last-child.info {
  background-color: #D1ECF1;
}
.shared__content-status span:last-child.danger {
  background-color: #F8D7DA;
}
.shared__content-status span:last-child.succes {
  background-color: #D4EDD9;
}
.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 */
}
.content-lists {
  margin: 0 auto;
  position: relative;
  width: 750px;
  max-width: calc(100% - 20px);
}
@media only screen and (max-width : 990.98px) {
  .content-lists {
    padding: 30px 0;
  }
}
@media only screen and (min-width : 991px) {
  .content-lists {
    padding: 50px 0;
  }
}
.content-lists__new-content {
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  display: flex;
  column-gap: 0.5rem;
  justify-content: flex-end;
}
.content-lists__card {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.content-lists__writer-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.content-lists__writer-heading .content-lists__title {
  margin-bottom: 0;
  text-transform: capitalize;
}
.content-lists__writer-heading .content-lists__title button {
  color: #214567;
}
.content-lists__writer-heading .content-lists__title button:hover {
  color: #3C5F81;
}
.content-lists__writer-heading .content-lists__metadata {
  margin-bottom: 0;
}
.content-lists__date-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.content-lists__date-title span:not(.divider),
.content-lists__date-title button {
  font-weight: normal;
  font-size: 0.9rem;
}
.content-lists__title {
  font-weight: 500;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  line-height: clamp(1.4rem, 4vw, 1.7rem);
  margin-bottom: 0.5rem;
}
.content-lists__metadata {
  text-transform: capitalize;
  font-size: 0.85rem;
  color: var(--muted-text-color);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.25rem;
}
.content-lists__metadata button {
  color: #214567;
  font-weight: 600;
}
.content-lists__metadata button:hover {
  color: #3C5F81;
}
.content-lists__summary {
  margin-bottom: 1rem;
  border-left: 3px solid #214567;
  padding-left: 10px;
  font-size: 0.9rem;
}
.content-lists__summary 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;
}
.content-lists__summary button,
.content-lists__summary a {
  color: #214567;
  font-weight: 600;
}
.content-lists__summary button:hover,
.content-lists__summary a:hover {
  color: #3C5F81;
}
.content-lists__stats {
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 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: #214567;
}
.content-lists__favorite button .content-lists__favorite-stats {
  color: var(--text-color);
}
.content-lists__favorite button:hover {
  color: #3C5F81;
}
.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: #214567;
  font-weight: 600;
}
.content-lists__actions a:hover,
.content-lists__actions button:hover {
  color: #3C5F81;
}
.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 : 990.98px) {
  .faq-lists {
    padding: 30px 0;
  }
}
@media only screen and (min-width : 991px) {
  .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;
}