/* =====================================================================================
   Web Pages (module 12 Website, the Web Designer - stage 2a, 05.11.2026): the pages made with the designer, drawn by render_webpage_content
   (functions.php) in the designer, in the preview and for the visitors; the theme (theme.css, user.css) gives the rest - also the dark theme (stage
   3a2, the .dark class of the page)
   ===================================================================================== */

.webpage_body {
  background-color: #fff;
}

.webpage_main {
  min-height: 100vh;
}

/* the "normal" width of a section: the widths of the websites (the theme makes its .container wider, for the screens of the platform) */
@media (min-width: 1200px) {
  .webpage_section > .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .webpage_section > .container {
    max-width: 1320px;
  }
}

/* the sections on a dark or primary background: light texts */
.webpage_section_dark {
  color: rgba(255, 255, 255, 0.85);
}

.webpage_section_dark h1,
.webpage_section_dark h2,
.webpage_section_dark h3,
.webpage_section_dark h4,
.webpage_section_dark h5,
.webpage_section_dark h6,
.webpage_section_dark .text-600 {
  color: #fff;
}

.webpage_section_dark .text-primary {
  color: #9ec5fe !important;
}

.webpage_section_dark a:not(.btn) {
  color: #fff;
  text-decoration: underline;
}

.webpage_section_dark .blockquote-footer {
  color: rgba(255, 255, 255, 0.7);
}

/* the texts: the paragraphs of the text editor without the space after the last one */
.webpage_text > :last-child {
  margin-bottom: 0;
}

.webpage_subtitle {
  opacity: 0.85;
}

.webpage_section_primary .webpage_subtitle,
.webpage_section_dark .webpage_subtitle {
  opacity: 0.8;
}

/* the lines */
.webpage_divider {
  border: 0;
  border-top: 1px solid var(--falcon-300);
  opacity: 1;
}

.webpage_divider_dashed {
  border-top-style: dashed;
}

.webpage_divider_dotted {
  border-top-style: dotted;
  border-top-width: 2px;
}

.webpage_section_dark .webpage_divider {
  border-top-color: rgba(255, 255, 255, 0.35);
}

/* the empty spaces */
.webpage_spacer_xs { height: 1rem; }
.webpage_spacer_s { height: 2rem; }
.webpage_spacer_m { height: 3rem; }
.webpage_spacer_l { height: 5rem; }
.webpage_spacer_xl { height: 8rem; }

/* the callouts take the width of their column */
.webpage_callout {
  text-align: start;
}

/* the dark theme (stage 3a2): inside the platform (php/actions/webpage.php, the theme of the user), for the visitors (Site Settings: light, dark, or
   the theme of the visitor) and in the designer (its switch); the colors of the template change by themselves, except two that its dark theme
   turns around: White (black there) takes the color of the cards, Dark (light there) stays dark; the white veil over a picture takes the color of
   the page */
.dark .webpage_body {
  background-color: var(--falcon-card-bg);
}

.dark .webpage_section.bg-white {
  background-color: var(--falcon-card-bg) !important;
}

.dark .webpage_section.bg-dark {
  background-color: #0b1727 !important;
}

.dark .bg-holder.webpage_overlay_white:before {
  background: rgba(18, 30, 45, 0.75);
}

/* the pictures (stage 3a): the Image block (a circle stays round), the white veil over a background picture (the dark shades: the overlays of the
   template) */
.webpage_image_circle {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.webpage_section_picture {
  overflow: hidden;
}

.bg-holder.webpage_overlay_white:before {
  position: absolute;
  content: "";
  background: rgba(255, 255, 255, 0.7);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.webpage_figure .figure-caption {
  font-size: 0.875rem;
}

.webpage_section_dark .figure-caption {
  color: rgba(255, 255, 255, 0.75);
}

/* the components (stage 3b): the cards, the numbers, the questions, the testimonials, the prices, the people, the steps, the logos */
.webpage_card_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.25rem;
}

/* stage 7a (08.11.2026): the picture keeps its proportions - without height: auto its height attribute (get_webpage_picture_html) stretched it */
.webpage_card_image {
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
}

.webpage_card_plain .webpage_card_image {
  border-radius: 0.5rem;
}

.webpage_number_label {
  opacity: 0.85;
}

.webpage_accordion_item {
  border: 1px solid var(--falcon-border-color);
  border-radius: 0.5rem;
  background-color: var(--falcon-card-bg);
  margin-bottom: 0.75rem;
}

.webpage_accordion_item:last-child {
  margin-bottom: 0;
}

.webpage_accordion_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--falcon-headings-color);
  list-style: none;
}

.webpage_accordion_title::-webkit-details-marker {
  display: none;
}

.webpage_accordion_arrow {
  font-size: 0.8rem;
  transition: transform 0.2s;
}

.webpage_accordion_item[open] .webpage_accordion_arrow {
  transform: rotate(180deg);
}

.webpage_accordion_text {
  padding: 0 1.25rem 1rem;
}

.webpage_stars .fas {
  margin-right: 2px;
}

.webpage_testimonial blockquote {
  margin: 0 0 1.5rem;
}

.webpage_testimonial_text {
  font-size: 1.05rem;
  font-style: italic;
}

.webpage_avatar {
  width: 48px;
  height: 48px;
  object-fit: cover;
}

.webpage_price_highlight {
  border: 2px solid var(--falcon-primary) !important;
}

.webpage_person_image {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

/* stage 3m1 (07.11.2026): Picture Size of the Person block - S 96 px, M 140 px (as before), L 200 px (at most the width of its column); the place of
   the picture in the designer too */
.webpage_person_image.webpage_person_size_s,
.webdesigner_person_empty.webpage_person_size_s {
  width: 96px;
  height: 96px;
  font-size: 2rem;
}

.webpage_person_image.webpage_person_size_l,
.webdesigner_person_empty.webpage_person_size_l {
  width: 200px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  font-size: 4rem;
}

.webpage_step_number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
}

.webpage_steps_column .webpage_step {
  position: relative;
}

.webpage_steps_column .webpage_step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.75rem;
  bottom: 0.25rem;
  border-left: 2px solid var(--falcon-300);
}

.webpage_logo {
  max-height: 64px;
  width: auto;
  object-fit: contain;
}

.webpage_logos_gray .webpage_logo {
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s, opacity 0.2s;
}

.webpage_logos_gray .webpage_logo:hover {
  filter: none;
  opacity: 1;
}

/* the boxes (cards, prices, the testimonials and the people in a card, the questions) keep the colors of the page on a dark or primary section */
.webpage_section_dark .webpage_boxed,
.webpage_section_dark .webpage_accordion_item {
  color: var(--falcon-body-color);
}

.webpage_section_dark .webpage_boxed h1,
.webpage_section_dark .webpage_boxed h2,
.webpage_section_dark .webpage_boxed h3,
.webpage_section_dark .webpage_boxed h4,
.webpage_section_dark .webpage_boxed h5,
.webpage_section_dark .webpage_boxed h6,
.webpage_section_dark .webpage_accordion_title {
  color: var(--falcon-headings-color);
}

.webpage_section_dark .webpage_boxed .text-600 {
  color: var(--falcon-600) !important;
}

.webpage_section_dark .webpage_boxed .text-primary {
  color: var(--falcon-primary) !important;
}

.webpage_section_dark .webpage_boxed a:not(.btn) {
  color: var(--falcon-primary);
  text-decoration: none;
}

.dark .webpage_step_number.bg-dark {
  background-color: #344050 !important;
}

/* the light buttons stay light on a dark or primary section also in the dark theme (there the template makes them dark) */
.dark .webpage_section_dark .btn-light {
  color: #0b1727;
  background-color: #f9fafd;
  border-color: #f9fafd;
}

.dark .webpage_section_dark .btn-light:hover,
.dark .webpage_section_dark .btn-light:focus {
  color: #0b1727;
  background-color: #e5e9f5;
  border-color: #e5e9f5;
}

/* the media blocks (stage 3c): the galleries and the carousels (their libraries: vendors/glightbox, vendors/swiper - assets/js/webpages.js) */
.webpage_gallery_image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.375rem;
}

.webpage_gallery_square .webpage_gallery_image {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.webpage_gallery_landscape .webpage_gallery_image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.webpage_gallery_link {
  display: block;
  overflow: hidden;
  border-radius: 0.375rem;
  cursor: zoom-in;
}

.webpage_gallery_link .webpage_gallery_image {
  transition: transform 0.3s;
}

.webpage_gallery_link:hover .webpage_gallery_image {
  transform: scale(1.04);
}

.webpage_carousel {
  position: relative;
  overflow: hidden;
  background-color: var(--falcon-200);
  --swiper-theme-color: #fff;
  --swiper-navigation-size: 26px;
}

.webpage_carousel .webpage_carousel_slide {
  position: relative;
  height: auto;
}

.webpage_carousel_wide .webpage_carousel_slide {
  aspect-ratio: 21 / 9;
}

.webpage_carousel_normal .webpage_carousel_slide {
  aspect-ratio: 16 / 9;
}

.webpage_carousel_tall .webpage_carousel_slide {
  aspect-ratio: 4 / 3;
}

.webpage_carousel_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.webpage_carousel_caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 2rem 2.5rem;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  text-align: start;
}

.webpage_carousel .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.6;
}

.webpage_carousel .swiper-pagination-bullet-active {
  opacity: 1;
}

/* a carousel in the designer: its first slide, the arrows and the dots drawn still */
.webpage_carousel_arrow {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.webpage_carousel_arrow_prev {
  left: 1rem;
}

.webpage_carousel_arrow_next {
  right: 1rem;
}

.webpage_carousel_dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9rem;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.webpage_carousel_dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

.webpage_carousel_dots span:first-child {
  background: #fff;
}

/* the video (stage 3c2): a YouTube / Vimeo frame or the player of the browser, in its shape; the still picture of the designer */
.webpage_video {
  position: relative;
  overflow: hidden;
  background-color: #0b1727;
}

.webpage_video_16x9 {
  aspect-ratio: 16 / 9;
}

.webpage_video_4x3 {
  aspect-ratio: 4 / 3;
}

.webpage_video_1x1 {
  aspect-ratio: 1 / 1;
}

.webpage_video_9x16 {
  aspect-ratio: 9 / 16;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.webpage_video_frame,
.webpage_video_file,
.webpage_video_still {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.webpage_video_file {
  object-fit: contain;
}

.webpage_video_still {
  object-fit: cover;
}

.webpage_video_play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.4rem;
}


/* the map (stage 3c3): OpenStreetMap (Leaflet) in its height, the marker with the name and the address (the buttons and the popup in the colors
   of the template - theme.css); the credits of OpenStreetMap shown (the template hides them, the tiles ask for them); the still picture of the
   designer (a drawing of a map with the marker in the middle) */
.webpage_map {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  background-color: #e9eef5;
}

.webpage_map_short {
  height: 260px;
}

.webpage_map_normal {
  height: 360px;
}

.webpage_map_tall {
  height: 480px;
}

.webpage_map.leaflet-container {
  font-family: inherit;
}

.webpage_map .leaflet-popup-content {
  margin: 0.75rem 1rem;
  line-height: 1.4;
}

/* the look of the maps of the template (theme.css) kept over leaflet.css, which the pages load after it */
.webpage_map .leaflet-bar {
  box-shadow: var(--falcon-box-shadow);
}

.webpage_map .leaflet-bar a,
.webpage_map .leaflet-bar a:hover {
  background-color: var(--falcon-leaflet-bar-bg);
  color: var(--falcon-body-color);
  border-bottom-color: var(--falcon-border-color);
}

.webpage_map .leaflet-popup-content-wrapper,
.webpage_map .leaflet-popup-tip {
  background-color: var(--falcon-leaflet-popup-content-wrapper-bg);
  color: var(--falcon-body-color);
  box-shadow: var(--falcon-box-shadow-lg);
  border-radius: 0.25rem;
}

.webpage_map .leaflet-control-attribution {
  display: block;
  margin: 0 !important;
  font-size: 0.6875rem;
}

.webpage_map_still {
  background-color: #e9eef5;
  background-image: linear-gradient(115deg, transparent 46%, #ffffff 46%, #ffffff 49%, transparent 49%),
                    linear-gradient(20deg, transparent 62%, #ffffff 62%, #ffffff 64%, transparent 64%),
                    linear-gradient(rgba(182, 193, 210, 0.35) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(182, 193, 210, 0.35) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
}

.webpage_map_pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  color: #e63757;
  font-size: 2.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.dark .webpage_map,
.dark .webpage_map_still {
  background-color: #1c2a3b;
}

.dark .webpage_map_still {
  background-image: linear-gradient(115deg, transparent 46%, #344050 46%, #344050 49%, transparent 49%),
                    linear-gradient(20deg, transparent 62%, #344050 62%, #344050 64%, transparent 64%),
                    linear-gradient(rgba(77, 89, 105, 0.35) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(77, 89, 105, 0.35) 1px, transparent 1px);
}

.dark .webpage_map .leaflet-control-attribution {
  background: rgba(11, 23, 39, 0.8);
  color: #9da9bb;
}

.dark .webpage_map .leaflet-control-attribution a {
  color: #5e9fff;
}

/* the background of a section (stage 3d): over its picture or its video an overlay - a dark shade under light texts, a veil of the color of the
   page under dark texts (its opacity: the Overlay of the section); the video fills the section (.bg-video of the template) */
.webpage_section_overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.webpage_section_overlay_dark {
  background-color: #000;
}

.webpage_section_overlay_light {
  background-color: #fff;
}

.dark .webpage_section_overlay_light {
  background-color: #121e2d;
}

.webpage_section_video .bg-video {
  width: 100%;
}

/* stage 3l (07.11.2026): the kind Pattern of the background of a section - under its content (its container): a pattern drawn in a color of the
   palette (a layer of that color cut by the tile of the pattern - its mask, its size S / M / L: get_webpage_section_pattern_html), or a soft shape of
   the template on the right of the section (as the cards of the template, at most 760 px wide), or on its left (mirrored) */
.webpage_section_pattern,
.webpage_section_shape {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

/* stage 3n1 (08.11.2026): the tiles of Pattern Monster have their own height (--webpage-pattern-height); the square ones of before - only the size */
.webpage_section_pattern {
  background-color: var(--webpage-pattern-color, var(--falcon-primary));
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: var(--webpage-pattern-size, 28px) var(--webpage-pattern-height, var(--webpage-pattern-size, 28px));
  mask-size: var(--webpage-pattern-size, 28px) var(--webpage-pattern-height, var(--webpage-pattern-size, 28px));
}

.webpage_section_shape {
  left: auto;
  width: 60%;
  max-width: 760px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
}

.webpage_section_shape.webpage_shape_left {
  left: 0;
  right: auto;
  transform: scaleX(-1);
}

/* the height of a section: half of the screen, the whole screen - its content in the middle */
.webpage_section_half,
.webpage_section_full {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* (two classes: over the least height of the sections in the designer) */
.webpage_section.webpage_section_half {
  min-height: 50vh;
}

.webpage_section.webpage_section_full {
  min-height: 100vh;
}

/* an anchor opened: a little room above the section or the block */
.webpage_section[id],
.webpage_row > [id] {
  scroll-margin-top: 1rem;
}

/* the animations (webpages.js adds webpages_animations to the page, then webpage_animated to what comes into view); nothing moves for the
   visitors who asked their device for less motion */
.webpages_animations .webpage_main {
  overflow-x: clip;
}

.webpages_animations .webpage_animate {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.webpages_animations .webpage_animate_up {
  transform: translateY(40px);
}

.webpages_animations .webpage_animate_left {
  transform: translateX(-48px);
}

.webpages_animations .webpage_animate_right {
  transform: translateX(48px);
}

.webpages_animations .webpage_animate_zoom {
  transform: scale(0.92);
}

.webpages_animations .webpage_animate.webpage_animated {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .webpages_animations .webpage_animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* stage 3n5a (08.11.2026, decision 312): the animations of the backgrounds of the sections (get_webpage_section_effect) - a layer over the background,
   under the content (Moving Gradient, Aurora Lights, Mouse Spotlight: their colors, their time, how strong - its opacity), the picture, the video or
   the pattern moving (Parallax on Scroll, Moves with the Mouse - made larger by as much as it moves, Moving Pattern); webpages.js adds
   webpages_effects to the page and webpage_effect_on to the sections on the screen: they move only then - still in the designer, without the
   script and for the visitors who asked their device for less motion */
.webpage_section_effect {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Moving Gradient: bands of its colors, wider than the section, going from side to side */
.webpage_effect_gradient > .webpage_section_effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, var(--webpage-effect-color-1) 14%, transparent 28%, var(--webpage-effect-color-2) 42%, transparent 56%, var(--webpage-effect-color-3) 70%, transparent 84%, var(--webpage-effect-color-1) 100%);
  opacity: 0.55;
}

/* Aurora Lights: three soft lights of its colors, floating */
.webpage_effect_aurora > .webpage_section_effect > span {
  position: absolute;
  width: 60%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--webpage-effect-color-1), transparent);
  opacity: 0.6;
}

.webpage_effect_aurora > .webpage_section_effect > span:nth-child(1) {
  top: -30%;
  left: -10%;
}

.webpage_effect_aurora > .webpage_section_effect > span:nth-child(2) {
  top: -10%;
  right: -15%;
  width: 50%;
  background: radial-gradient(circle closest-side, var(--webpage-effect-color-2), transparent);
}

.webpage_effect_aurora > .webpage_section_effect > span:nth-child(3) {
  bottom: -40%;
  left: 30%;
  width: 55%;
  background: radial-gradient(circle closest-side, var(--webpage-effect-color-3), transparent);
}

/* Mouse Spotlight: a soft light in the middle of the section; with a mouse (webpage_effect_follow) it follows the mouse while it is over the
   section (webpage_effect_spot_in - its place: webpages.js) */
.webpage_effect_spotlight > .webpage_section_effect > span {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 640px;
  max-width: 120%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--webpage-effect-color-1), transparent);
  translate: -50% -50%;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

.webpages_effects .webpage_effect_follow > .webpage_section_effect > span {
  top: 0;
  left: 0;
  opacity: 0;
}

.webpages_effects .webpage_effect_follow.webpage_effect_spot_in > .webpage_section_effect > span {
  opacity: 0.7;
}

.webpages_effects .webpage_effect_gradient > .webpage_section_effect::before {
  animation: webpage_effect_gradient var(--webpage-effect-time, 20s) ease-in-out infinite alternate;
}

.webpages_effects .webpage_effect_aurora > .webpage_section_effect > span:nth-child(1) {
  animation: webpage_effect_aurora_1 var(--webpage-effect-time, 16s) ease-in-out infinite alternate;
}

.webpages_effects .webpage_effect_aurora > .webpage_section_effect > span:nth-child(2) {
  animation: webpage_effect_aurora_2 calc(var(--webpage-effect-time, 16s) * 1.3) ease-in-out infinite alternate;
}

.webpages_effects .webpage_effect_aurora > .webpage_section_effect > span:nth-child(3) {
  animation: webpage_effect_aurora_3 calc(var(--webpage-effect-time, 16s) * 0.8) ease-in-out infinite alternate;
}

/* Parallax on Scroll, Moves with the Mouse: the picture or the video made larger by as much as it moves (its place: webpages.js), the pattern
   wider than the section; with the mouse the move is smoothed */
.webpages_effects .webpage_effect_parallax > .bg-holder,
.webpages_effects .webpage_effect_mouse > .bg-holder {
  scale: calc(1.02 + 2 * var(--webpage-effect-amount, 0.1));
}

.webpages_effects .webpage_effect_parallax > .webpage_section_pattern,
.webpages_effects .webpage_effect_mouse > .webpage_section_pattern {
  top: -25%;
  right: -25%;
  bottom: -25%;
  left: -25%;
}

.webpages_effects .webpage_effect_mouse > .bg-holder,
.webpages_effects .webpage_effect_mouse > .webpage_section_pattern,
.webpages_effects .webpage_effect_mouse > .webpage_section_shape {
  transition: translate 0.6s ease-out;
}

/* Moving Pattern: a pattern drawn in a color goes one tile further and starts again (its layer a tile larger at the top and on the left), a soft
   shape floats up and down */
.webpages_effects .webpage_effect_drift > .webpage_section_pattern {
  top: calc(-1 * var(--webpage-pattern-height, var(--webpage-pattern-size, 28px)));
  left: calc(-1 * var(--webpage-pattern-size, 28px));
  animation: webpage_effect_drift var(--webpage-effect-time, 3s) linear infinite;
}

.webpages_effects .webpage_effect_drift > .webpage_section_shape {
  animation: webpage_effect_float var(--webpage-effect-time, 8s) ease-in-out infinite alternate;
}

/* off the screen: stopped where they are */
.webpages_effects .webpage_effect:not(.webpage_effect_on) > .webpage_section_effect::before,
.webpages_effects .webpage_effect:not(.webpage_effect_on) > .webpage_section_effect > span,
.webpages_effects .webpage_effect_drift:not(.webpage_effect_on) > .webpage_section_pattern,
.webpages_effects .webpage_effect_drift:not(.webpage_effect_on) > .webpage_section_shape {
  animation-play-state: paused;
}

@keyframes webpage_effect_gradient {
  from {
    translate: 0 0;
  }
  to {
    translate: -66.6667% 0;
  }
}

@keyframes webpage_effect_aurora_1 {
  to {
    translate: 30% 25%;
    scale: 1.2;
  }
}

@keyframes webpage_effect_aurora_2 {
  to {
    translate: -35% 30%;
    scale: 0.85;
  }
}

@keyframes webpage_effect_aurora_3 {
  to {
    translate: -20% -35%;
    scale: 1.15;
  }
}

@keyframes webpage_effect_drift {
  from {
    translate: 0 0;
  }
  to {
    translate: var(--webpage-pattern-size, 28px) var(--webpage-pattern-height, var(--webpage-pattern-size, 28px));
  }
}

@keyframes webpage_effect_float {
  from {
    translate: 0 -3%;
  }
  to {
    translate: 0 3%;
  }
}

/* the picture above the text on the phones (not behind it - webpage_section_phone_above) does not move */
@media (max-width: 767.98px) {
  .webpages_effects .webpage_section_phone_above.webpage_effect_parallax > .bg-holder,
  .webpages_effects .webpage_section_phone_above.webpage_effect_mouse > .bg-holder {
    scale: none;
    translate: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .webpage_section_effect::before,
  .webpage_section_effect > span,
  .webpage_effect_drift > .webpage_section_pattern,
  .webpage_effect_drift > .webpage_section_shape {
    animation: none !important;
  }
}

/* stage 3e1: Platform · Live Data - Upcoming Events (cards or a list, the little calendar of the template with the day) and the Public Calendar
   (FullCalendar of the platform, the list at its side); in the colors of the page also on a dark or primary section (webpage_boxed) */
.webpage_event_tile {
  flex-shrink: 0;
}

.webpage_event_name {
  overflow-wrap: anywhere;
}

.webpage_events_list .webpage_event_row + .webpage_event_row {
  border-top: 1px solid var(--falcon-border-color);
}

@media (max-width: 575.98px) {
  .webpage_events_list .webpage_event_row {
    flex-wrap: wrap;
  }

  .webpage_events_list .webpage_event_row > .flex-shrink-0 {
    width: 100%;
    text-align: end;
  }
}

.webpage_calendar_filters .form-select {
  max-width: 300px;
}

.webpage_calendar_side .webpage_calendar_filters .form-select {
  max-width: none;
}

.webpage_calendar_list {
  max-height: 560px;
  overflow-y: auto;
  text-align: start;
}

.webpage_calendar_height_short .webpage_calendar_list {
  max-height: 420px;
}

.webpage_calendar_height_tall .webpage_calendar_list {
  max-height: 720px;
}

.webpage_calendar_box {
  min-height: 120px;
  text-align: start;
}

a.webpage_calendar_item,
.webpage_section_dark .webpage_boxed a.webpage_calendar_item {
  color: inherit;
  text-decoration: none;
}

a.webpage_calendar_item:hover h6 {
  color: var(--falcon-primary) !important;
}

.webpage_section_dark .webpage_boxed .webpage_calendar_box a:not(.btn) {
  color: inherit;
  text-decoration: none;
}

/* stage 3e2: Platform · Live Data - the forms (a card, the Forms List), the Log In Box, the pages of a menu (Sub-pages) */
.webpage_form_name,
.webpage_subpage_title {
  overflow-wrap: anywhere;
}

.webpage_form_card .webpage_form_button {
  margin-top: auto !important;
  padding-top: 1rem;
}

.webpage_forms_list .webpage_form_row + .webpage_form_row,
.webpage_subpages_list .webpage_subpage_row + .webpage_subpage_row {
  border-top: 1px solid var(--falcon-border-color);
}

.webpage_forms_list .webpage_form_button {
  margin-top: 0.75rem !important;
}

a.webpage_subpage_title {
  color: inherit;
  text-decoration: none;
}

a.webpage_subpage_title:hover,
.webpage_section_dark .webpage_boxed a.webpage_subpage_title:hover {
  color: var(--falcon-primary);
}

.webpage_section_dark .webpage_boxed a.webpage_subpage_title {
  color: var(--falcon-headings-color);
}

.webpage_subpage_more {
  text-decoration: none;
}



/* stage 3e3: Platform · Live Data - Store Products: the cards of the store page (user.css), in columns or in a carousel (Swiper); a click opens the
   product in the store */
.webpage_product_card .store-card-media {
  color: inherit;
  text-decoration: none;
}

.webpage_product_card a.store-card-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* the room of the shadows and of the dots (.swiper of swiper-bundle.min.css, loaded after this file, has no padding) */
.swiper.webpage_products_carousel {
  position: relative;
  padding: 0.5rem 0.25rem 2.5rem;
  margin: -0.5rem -0.25rem 0;
  --swiper-theme-color: var(--falcon-primary);
  --swiper-navigation-size: 14px;
  --swiper-pagination-bottom: 0.5rem;
  --swiper-pagination-bullet-inactive-color: var(--falcon-500);
  --swiper-pagination-bullet-inactive-opacity: 0.5;
}

.webpage_products_carousel .swiper-button-prev,
.webpage_products_carousel .swiper-button-next {
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -2.25rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-weight: 700;
}

/* the arrows hidden at the ends, and on the phones (the products are moved with the finger, the dots under them) */
.webpage_products_carousel .swiper-button-prev.swiper-button-disabled,
.webpage_products_carousel .swiper-button-next.swiper-button-disabled {
  opacity: 0;
}

@media (max-width: 767.98px) {
  .webpage_products_carousel .swiper-button-prev,
  .webpage_products_carousel .swiper-button-next {
    display: none;
  }
}



/* stage 3e4: Platform · Live Data - the Support Ticket Form (a card, the styles of the Log In Box) and the page of a ticket sent without an account
   (php/webpage_ticket_public.php - the messages as on the Support page of the accounts) */
.webpage_ticket_website {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.webpage_ticket textarea.form-control {
  min-height: 9rem;
}

.webpage_ticket_done {
  padding: 0.5rem 0;
}

.webpage_ticket_page .support_message:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.webpage_ticket_page .support_message_text p:last-child {
  margin-bottom: 0;
}



/* stage 3e4b: the page of a ticket sent without an account - the files (downloaded, attached to the reply) stay inside the page on the phones, the
   text of the reply */
.webpage_ticket_page .webpage_ticket_file,
.webpage_ticket_page .webpage_ticket_reply_file {
  max-width: 100%;
  word-break: break-word;
}

.webpage_ticket_page .webpage_ticket_reply_form textarea.form-control {
  min-height: 9rem;
}



/* stage 3e5a: Platform · Live Data - Locations (the cards: their details with the icons, a click on a card that has a place shows its marker on the
   map of the block) and Contact Card (the map beside the details when the card is wide enough - a container query; under them otherwise) */
.webpage_contact_icon {
  width: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  margin-right: 0.65rem;
  text-align: center;
}

.webpage_contact_rows li:last-child {
  margin-bottom: 0 !important;
}

.webpage_contact_link {
  color: inherit;
}

.webpage_contact_link:hover {
  color: var(--falcon-primary);
}

.webpage_location_card_map {
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out;
}

.webpage_location_card_map:hover,
.webpage_location_card_map:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(var(--falcon-primary-rgb), 0.4) !important;
}

.webpage_location_card_map:hover .webpage_location_mark,
.webpage_location_card_map:focus-visible .webpage_location_mark {
  color: var(--falcon-primary) !important;
}

.webpage_contact {
  container-type: inline-size;
}

.webpage_contact_row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.webpage_contact_logo img {
  display: block;
}

@container (min-width: 560px) {
  .webpage_contact_with_map {
    flex-direction: row;
    align-items: stretch;
  }

  .webpage_contact_with_map .webpage_contact_details,
  .webpage_contact_with_map .webpage_contact_place {
    flex: 1 1 0;
    min-width: 0;
  }

  .webpage_contact_with_map .webpage_contact_map {
    height: 100%;
    min-height: 300px;
  }
}

/* stage 3e5b: Book a Slot - the strip of the days (scrolled, its arrows when the days do not fit), the hours of the day chosen */
.webpage_slots_days {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-top: 0.125rem;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.webpage_slot_day {
  flex: 0 0 auto;
  min-width: 4.5rem;
  padding: 0.5rem 0.75rem;
  line-height: 1.2;
}

.webpage_slot_day_full.btn-falcon-default .webpage_slot_day_state {
  color: var(--falcon-danger);
}

.webpage_slots_arrow {
  position: absolute;
  top: calc(50% - 0.25rem);
  transform: translateY(-50%);
  z-index: 2;
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.webpage_slots_prev {
  left: -0.5rem;
}

.webpage_slots_next {
  right: -0.5rem;
}

.webpage_card_plain .webpage_slots_prev {
  left: 0;
}

.webpage_card_plain .webpage_slots_next {
  right: 0;
}

.webpage_slot {
  min-width: 8.5rem;
  text-align: center;
  line-height: 1.3;
}

.webpage_slot_name {
  max-width: 14rem;
}

.webpage_slot_seats {
  opacity: 0.85;
}

@media (max-width: 575.98px) {
  .webpage_slots_hours .webpage_slot {
    flex: 0 0 calc(50% - 0.25rem);
    min-width: 0;
  }

  .webpage_slot_name {
    max-width: none;
  }
}


/* stage 3g2 (06.11.2026): the Menu block - the bar (the color of the cards, light or dark with the theme; its dropdowns as the top menu of the platform),
   the list, the section that holds it (its dropdowns over the next sections; Stays on Top: the section at the top while the page scrolls); inside the
   platform the bar does not stay on top and has no light / dark switch (the platform has its own) */
.webpage_menu_bar {
  background-color: var(--falcon-card-bg);
  border-radius: 0.5rem;
  box-shadow: var(--falcon-box-shadow);
  padding: 0.5rem 1rem;
}

.webpage_menu_bar .navbar-nav .nav-link {
  font-weight: 600;
}

.webpage_menu_bar .navbar-nav .nav-link.active,
.webpage_menu_list .nav-link.active {
  color: var(--falcon-primary);
}

.webpage_menu_bar .dropdown-menu .dropdown-item.active {
  color: var(--falcon-primary);
  background-color: transparent;
}

.webpage_menu_brand img {
  display: block;
}

.webpage_menu_list .webpage_menu_title {
  cursor: default;
}

.webpage_section_menu {
  position: relative;
  z-index: 1010;
  overflow: visible;
}

.webpage_section_sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.webpage_platform .webpage_section_sticky {
  position: relative;
}

.webpage_platform .webpage_menu_theme {
  display: none !important;
}

@media (max-width: 991.98px) {
  .webpage_menu_bar .navbar-collapse .navbar-nav {
    padding-top: 0.5rem;
  }

  .webpage_menu_bar .dropdown-menu {
    box-shadow: none;
  }
}

/* stage 3e5c1 (06.11.2026): Platform · Live Data - Courses: the cards of the courses (the styles of the Log In Box), their open classrooms (a line
   between them, a full one faded), Request to Enrol and its form at the bottom of the card */
.webpage_course_description {
  white-space: normal;
  overflow-wrap: anywhere;
}

.webpage_course_classrooms ul {
  border-top: 1px solid var(--falcon-border-color);
}

.webpage_course_classroom {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--falcon-border-color);
}

.webpage_course_classroom_full {
  opacity: 0.65;
}

.webpage_course_form textarea {
  min-height: 4.5rem;
}


/* stage 3h1 (06.11.2026, decision 87): the Webpages Tree Menu - the bar of the tree of Web Pages at the top of a page alone (get_webpage_tree_menu_html),
   a line under it */
.webpage_tree_menu {
  border-bottom: 1px solid var(--falcon-border-color);
}


/* stage 3j1 (06.11.2026): the Style card of every block (get_webpage_block_box_html) - the box around a block (its background, border, corners,
   shadow, padding, opacity), its alignment, the effect of the mouse; Stays on Top, Fixed on the Screen; the blocks of a section (their place in
   the rows), the content of a taller section at its top or its bottom */
.webpage_block_box_fill {
  height: 100%;
}

.webpage_block_align_left {
  text-align: left;
}

.webpage_block_align_center {
  text-align: center;
}

.webpage_block_align_right {
  text-align: right;
}

.webpage_block_align_center > * {
  margin-left: auto;
  margin-right: auto;
}

.webpage_block_align_right > * {
  margin-left: auto;
}

/* the corners of the box: Small - as the cards (rounded-3), Medium, Large (the template has no larger ones), Pill (rounded-pill) */
.webpage_rounded_medium {
  border-radius: 0.75rem !important;
}

.webpage_rounded_large {
  border-radius: 1.5rem !important;
}

/* the box on a dark color: light texts (as a dark section); the grays from 700 turn around in the dark theme (light there: dark texts) */
.webpage_block_dark,
html:not(.dark) .webpage_block_deep {
  color: rgba(255, 255, 255, 0.85);
}

.webpage_block_dark h1, .webpage_block_dark h2, .webpage_block_dark h3, .webpage_block_dark h4, .webpage_block_dark h5, .webpage_block_dark h6, .webpage_block_dark .text-600,
html:not(.dark) .webpage_block_deep h1, html:not(.dark) .webpage_block_deep h2, html:not(.dark) .webpage_block_deep h3, html:not(.dark) .webpage_block_deep h4,
html:not(.dark) .webpage_block_deep h5, html:not(.dark) .webpage_block_deep h6, html:not(.dark) .webpage_block_deep .text-600 {
  color: #fff;
}

.webpage_block_dark a:not(.btn),
html:not(.dark) .webpage_block_deep a:not(.btn) {
  color: #fff;
  text-decoration: underline;
}

.dark .webpage_block_deep,
.dark .webpage_block_deep h1, .dark .webpage_block_deep h2, .dark .webpage_block_deep h3, .dark .webpage_block_deep h4, .dark .webpage_block_deep h5,
.dark .webpage_block_deep h6, .dark .webpage_block_deep .text-600 {
  color: #0b1727;
}

/* White takes the color of the cards in the dark theme, Dark stays dark (as the sections) */
.dark .webpage_block_box.bg-white {
  background-color: var(--falcon-card-bg) !important;
}

.dark .webpage_block_box.bg-dark {
  background-color: #0b1727 !important;
}

/* the effects of the mouse (the values of pop, popsmall, popmedium of the platform) */
.webpage_hover_popsmall,
.webpage_hover_pop,
.webpage_hover_popmedium,
.webpage_hover_lift,
.webpage_hover_shadow,
.webpage_hover_fade {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.15s ease-out;
}

.webpage_hover_popsmall:hover {
  transform: scale(1.03);
}

.webpage_hover_pop:hover {
  transform: scale(1.07);
}

.webpage_hover_popmedium:hover {
  transform: scale(1.16);
}

.webpage_hover_lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15) !important;
}

.webpage_hover_shadow:hover {
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18) !important;
}

.webpage_hover_fade:hover {
  opacity: 0.75 !important;
}

/* stage 3n5a: Tilts in 3D - turned towards the mouse (webpages.js, only with a mouse), back when it leaves */
.webpage_hover_tilt {
  transition: transform 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .webpage_hover_popsmall:hover,
  .webpage_hover_pop:hover,
  .webpage_hover_popmedium:hover,
  .webpage_hover_lift:hover {
    transform: none;
  }
}

/* Stays on Top (while the rest of its row scrolls; inside the platform under its top menu), Fixed on the Screen (in a corner, over the page) */
.webpage_block_sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 1rem;
  z-index: 1015;
  align-self: flex-start;
}

/* a page with a menu that stays on top: under it; inside the platform (its sections do not stay on top): under its top menu */
body:has(.webpage_section_sticky) .webpage_block_sticky {
  top: 6rem;
}

body .webpage_platform .webpage_block_sticky {
  top: 5rem;
}

/* a section with a background picture, the page inside the platform: they cut what goes out of them, without stopping Stays on Top */
.webpage_section_picture:has(.webpage_block_sticky),
.webpage_platform:has(.webpage_block_sticky) {
  overflow: clip !important;
}

.webpage_block_fixed {
  position: fixed;
  z-index: 1030;
  width: auto !important;
  max-width: calc(100% - 2rem);
  flex: none;
}

.webpage_block_fixed_top_left {
  top: 1rem;
  left: 1rem;
}

.webpage_block_fixed_top_right {
  top: 1rem;
  right: 1rem;
}

.webpage_block_fixed_bottom_left {
  bottom: 1rem;
  left: 1rem;
}

.webpage_block_fixed_bottom_right {
  bottom: 1rem;
  right: 1rem;
}

body:has(.webpage_section_sticky) .webpage_block_fixed_top_left,
body:has(.webpage_section_sticky) .webpage_block_fixed_top_right {
  top: 6rem;
}

body .webpage_platform .webpage_block_fixed_top_left,
body .webpage_platform .webpage_block_fixed_top_right {
  top: 5rem;
}

/* a section taller than its content (Height): its content at its top or its bottom (the center: as before) */
.webpage_section_half.webpage_section_valign_top,
.webpage_section_full.webpage_section_valign_top {
  justify-content: flex-start;
}

.webpage_section_half.webpage_section_valign_bottom,
.webpage_section_full.webpage_section_valign_bottom {
  justify-content: flex-end;
}

/* stage 3j2 (07.11.2026): the letters of the Heading and of the Text blocks (their Letters card - get_webpage_letters_attributes): the outline
   around them (Only the Outline: hollow letters), their shadow (a drop shadow: it follows the letters also with a gradient inside them), the
   gradient inside them; the letters White and Light stay so in the dark theme (on a picture or on a dark color - the template turns them around) */
.webpage_text_white {
  color: #fff !important;
}

.webpage_text_light {
  color: #e5e9f5 !important;
}

/* the grays of the letters, of the icons of a list and of the numbers on a section or a box that stays dark also in the dark theme (Dark, Primary,
   a picture; a box on a color of the template, Dark, Black): as in the light theme - the template turns them around in the dark theme (Gray 300
   would be dark there); not inside the cards (they take the color of the cards) */
.dark .webpage_section_dark :is(.webpage_heading > *, .webpage_text, .webpage_icon_list .fas, .webpage_number_value):not(.webpage_boxed *),
.dark .webpage_block_dark :is(.webpage_heading > *, .webpage_text, .webpage_icon_list .fas, .webpage_number_value):not(.webpage_boxed *) {
  --falcon-100: #f9fafd;
  --falcon-200: #edf2f9;
  --falcon-300: #d8e2ef;
  --falcon-400: #b6c1d2;
  --falcon-500: #9da9bb;
  --falcon-600: #748194;
  --falcon-700: #5e6e82;
  --falcon-800: #4d5969;
  --falcon-900: #344050;
  --falcon-1000: #232e3c;
  --falcon-1100: #0b1727;
}

/* the outline behind the letters (it does not make them thinner); Only the Outline: the letters empty, all the outline seen */
.webpage_letters_outline_thin,
.webpage_letters_outline_thick {
  -webkit-text-stroke-color: var(--webpage-letters-outline, currentColor);
  paint-order: stroke fill;
}

.webpage_letters_outline_thin {
  -webkit-text-stroke-width: 2px;
}

.webpage_letters_outline_thick {
  -webkit-text-stroke-width: 4px;
}

.webpage_letters_hollow {
  -webkit-text-fill-color: transparent;
}

.webpage_letters_hollow.webpage_letters_outline_thin {
  -webkit-text-stroke-width: 1px;
}

.webpage_letters_hollow.webpage_letters_outline_thick {
  -webkit-text-stroke-width: 2px;
}

.webpage_letters_shadow_small {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.webpage_letters_shadow_large {
  filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.35));
}

.webpage_letters_shadow_glow {
  filter: drop-shadow(0 0 0.35rem var(--webpage-letters-glow, currentColor));
}

.webpage_letters_gradient {
  background-image: linear-gradient(var(--webpage-letters-angle, 90deg), var(--webpage-letters-from, var(--falcon-primary)), var(--webpage-letters-to, var(--falcon-info)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.webpage_letters_gradient_diagonal {
  --webpage-letters-angle: 135deg;
}

.webpage_letters_gradient_down {
  --webpage-letters-angle: 180deg;
}

/* a heading: the gradient as wide as its words (its alignment kept) */
.webpage_heading .webpage_letters_gradient {
  display: inline-block;
}

/* the numbers of the steps on the dark grays: dark in the dark theme (there those grays are light) */
.dark .webpage_step_number.webpage_tone_deep {
  color: #0b1727;
}

/* a box on Black stays black in the dark theme (as Dark; the template makes it white there) */
.dark .webpage_block_box.bg-black {
  background-color: #000 !important;
}

/* the cursor of the mouse over a block (its Style card - Mouse Over), also over its links and its buttons */
.webpage_cursor_pointer,
.webpage_cursor_pointer * {
  cursor: pointer !important;
}

.webpage_cursor_default,
.webpage_cursor_default * {
  cursor: default !important;
}

.webpage_cursor_help,
.webpage_cursor_help * {
  cursor: help !important;
}

.webpage_cursor_text,
.webpage_cursor_text * {
  cursor: text !important;
}

.webpage_cursor_crosshair,
.webpage_cursor_crosshair * {
  cursor: crosshair !important;
}

.webpage_cursor_move,
.webpage_cursor_move * {
  cursor: move !important;
}

.webpage_cursor_grab,
.webpage_cursor_grab * {
  cursor: grab !important;
}

.webpage_cursor_zoom_in,
.webpage_cursor_zoom_in * {
  cursor: zoom-in !important;
}

.webpage_cursor_not_allowed,
.webpage_cursor_not_allowed * {
  cursor: not-allowed !important;
}

.webpage_cursor_progress,
.webpage_cursor_progress * {
  cursor: progress !important;
}

/* stage 3f (07.11.2026): the components of the screenshots - the Number with an icon, the Chart, the Activity List, the List Group, the Tabs, the
   Timeline, the Weather, the typed words of a Heading */
.webpage_number_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.webpage_number_beside {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.webpage_number_subtext {
  font-size: 0.83333rem;
}

@media (min-width: 768px) {
  .webpage_number_divider {
    border-right: 1px solid var(--falcon-300);
  }

  .webpage_section_dark .webpage_number_divider {
    border-right-color: rgba(255, 255, 255, 0.25);
  }
}

.webpage_chart_box {
  position: relative;
  width: 100%;
}

.webpage_chart_svg {
  display: block;
  font-family: inherit;
}

.webpage_chart_dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: baseline;
}

.webpage_chart_total:not(:last-child) {
  border-bottom: 1px solid var(--falcon-200);
}

.webpage_activity .timeline::before {
  left: calc(1.25rem + 0.28rem);
}

.webpage_activity .timeline:last-child::before {
  display: none;
}

.webpage_activity_item {
  border-bottom: 1px solid var(--falcon-200);
}

.webpage_activity .timeline:last-child .webpage_activity_item {
  border-bottom: 0;
}

.webpage_list_group .list-group-item.active h5 {
  color: #fff;
}

.webpage_list_group .list-group-item.active .text-500 {
  color: rgba(255, 255, 255, 0.75) !important;
}

.webpage_tabs .nav-link {
  cursor: pointer;
}

.webpage_tabs_content {
  background-color: var(--falcon-card-bg);
}

.webpage_tabs_content p:last-child {
  margin-bottom: 0;
}

.webpage_timeline .timeline-item-card h5 {
  margin-bottom: 0.5rem;
}

.webpage_weather_icon {
  font-size: 2.5rem;
  width: 3rem;
  text-align: center;
}

.webpage_weather_wind {
  display: inline-block;
}

.webpage_metar_raw {
  white-space: normal;
  word-break: break-word;
  color: var(--falcon-800);
  background: var(--falcon-200);
  border-radius: 0.25rem;
  padding: 0.35rem 0.5rem;
}

.webpage_metar_lifr {
  color: #9c27b0;
  background-color: rgba(156, 39, 176, 0.15);
}

.webpage_weather_credit a {
  color: inherit;
  text-decoration: underline;
}

.webpage_typed {
  white-space: nowrap;
}

.webpage_typed_caret {
  display: inline-block;
  font-weight: 300;
  margin-left: 0.05em;
  opacity: 0.6;
}

.webpage_heading .typed-cursor {
  font-weight: 300;
  opacity: 0.6;
  animation: webpage_typed_blink 0.8s infinite;
}

@keyframes webpage_typed_blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .webpage_heading .typed-cursor {
    animation: none;
  }
}

/* stage 3f2 (07.11.2026): a block with a Background in its Style card - the background replaces the surface of its component (the cards, the
   questions, the list group, the tabs, the cards of the timeline, the weather, the calendar, the menu bar, Log In, the contact card): they are
   transparent, without their shadow; their texts follow the color (the variables of the template inside the component) - light on the dark
   colors, dark on the light ones; the Callout keeps its own color */
.webpage_block_bg > :not(.alert) {
  --falcon-card-bg: transparent;
  --falcon-card-cap-bg: transparent;
  --falcon-list-group-bg: transparent;
  --falcon-box-shadow: none;
  --falcon-box-shadow-sm: none;
  --falcon-box-shadow-lg: none;
}

.webpage_block_bg .timeline-vertical .timeline-item-content .timeline-item-card {
  background-color: transparent;
}

.webpage_block_bg .timeline-vertical .timeline-item-content::before {
  display: none;
}

/* the dark colors (and the grays from 700 in the light theme): light texts, light lines */
html:not(.dark) .webpage_block_bg:is(.webpage_block_dark, .webpage_block_deep) > :not(.alert),
.dark .webpage_block_bg.webpage_block_dark > :not(.alert) {
  --falcon-body-color: rgba(255, 255, 255, 0.85);
  --falcon-headings-color: #fff;
  --falcon-100: rgba(255, 255, 255, 0.06);
  --falcon-200: rgba(255, 255, 255, 0.1);
  --falcon-300: rgba(255, 255, 255, 0.2);
  --falcon-400: rgba(255, 255, 255, 0.35);
  --falcon-500: rgba(255, 255, 255, 0.6);
  --falcon-600: rgba(255, 255, 255, 0.7);
  --falcon-700: rgba(255, 255, 255, 0.8);
  --falcon-800: rgba(255, 255, 255, 0.88);
  --falcon-900: rgba(255, 255, 255, 0.95);
  --falcon-1000: #fff;
  --falcon-1100: #fff;
  --falcon-border-color: rgba(255, 255, 255, 0.2);
  --falcon-card-border-color: rgba(255, 255, 255, 0.2);
  --falcon-navbar-light-color: rgba(255, 255, 255, 0.75);
  --falcon-navbar-light-hover-color: #fff;
  --falcon-navbar-light-active-color: #fff;
  --falcon-navbar-light-brand-color: #fff;
  --falcon-navbar-light-brand-hover-color: #fff;
  --webpage-block-on: #fff;
  --webpage-block-on-soft: rgba(255, 255, 255, 0.2);
}

/* the grays from 700 in the dark theme (light there): dark texts, dark lines */
.dark .webpage_block_bg.webpage_block_deep > :not(.alert) {
  --falcon-body-color: rgba(11, 23, 39, 0.8);
  --falcon-headings-color: #0b1727;
  --falcon-100: rgba(11, 23, 39, 0.05);
  --falcon-200: rgba(11, 23, 39, 0.08);
  --falcon-300: rgba(11, 23, 39, 0.15);
  --falcon-400: rgba(11, 23, 39, 0.3);
  --falcon-500: rgba(11, 23, 39, 0.5);
  --falcon-600: rgba(11, 23, 39, 0.6);
  --falcon-700: rgba(11, 23, 39, 0.7);
  --falcon-800: rgba(11, 23, 39, 0.8);
  --falcon-900: rgba(11, 23, 39, 0.9);
  --falcon-1000: #0b1727;
  --falcon-1100: #0b1727;
  --falcon-border-color: rgba(11, 23, 39, 0.15);
  --falcon-card-border-color: rgba(11, 23, 39, 0.15);
  --falcon-navbar-light-color: rgba(11, 23, 39, 0.6);
  --falcon-navbar-light-hover-color: #0b1727;
  --falcon-navbar-light-active-color: #0b1727;
  --falcon-navbar-light-brand-color: #0b1727;
  --falcon-navbar-light-brand-hover-color: #0b1727;
  --webpage-block-on: #0b1727;
  --webpage-block-on-soft: rgba(11, 23, 39, 0.12);
}

/* the letters of the Heading, Text, Icon List and Number blocks keep the grays chosen for them (as in the light theme - stage 3j2) */
html:not(.dark) .webpage_block_bg:is(.webpage_block_dark, .webpage_block_deep) :is(.webpage_heading > *, .webpage_text, .webpage_icon_list .fas, .webpage_number_value),
.dark .webpage_block_bg.webpage_block_deep :is(.webpage_heading > *, .webpage_text, .webpage_icon_list .fas, .webpage_number_value) {
  --falcon-100: #f9fafd;
  --falcon-200: #edf2f9;
  --falcon-300: #d8e2ef;
  --falcon-400: #b6c1d2;
  --falcon-500: #9da9bb;
  --falcon-600: #748194;
  --falcon-700: #5e6e82;
  --falcon-800: #4d5969;
  --falcon-900: #344050;
  --falcon-1000: #232e3c;
  --falcon-1100: #0b1727;
}

/* the marked items in the color of the texts: the active tab, the active pill, the marked item of a list group */
.webpage_block_bg:is(.webpage_block_dark, .webpage_block_deep) .nav-tabs .nav-link.active {
  color: var(--webpage-block-on, var(--falcon-primary));
  border-bottom-color: var(--webpage-block-on, var(--falcon-primary));
}

.webpage_block_bg:is(.webpage_block_dark, .webpage_block_deep) .nav-pills .nav-link.active,
.webpage_block_bg:is(.webpage_block_dark, .webpage_block_deep) .list-group-item.active {
  color: var(--webpage-block-on, #fff);
  background-color: var(--webpage-block-on-soft, var(--falcon-primary));
  border-color: transparent;
}

.webpage_block_bg:is(.webpage_block_dark, .webpage_block_deep) .list-group-item.active h5 {
  color: var(--webpage-block-on, #fff);
}

/* the menu bar: its active link in the color of the texts */
.webpage_block_bg:is(.webpage_block_dark, .webpage_block_deep) .webpage_menu_bar .navbar-nav .nav-link.active {
  color: var(--webpage-block-on, var(--falcon-primary));
}

/* on a dark color (and the grays from 700 in the light theme) the texts in Primary (the value of a Price, a Number in Primary, the links of the
   template) and the texts in the same color as the background: in the color of the texts - as on the dark sections */
.webpage_block_bg:is(.webpage_block_dark, .webpage_block_deep) .text-primary:not([class*="bg-"]):not(.alert *),
.webpage_block_bg.bg-secondary .text-secondary:not([class*="bg-"]):not(.alert *),
.webpage_block_bg.bg-success .text-success:not([class*="bg-"]):not(.alert *),
.webpage_block_bg.bg-info .text-info:not([class*="bg-"]):not(.alert *),
.webpage_block_bg.bg-warning .text-warning:not([class*="bg-"]):not(.alert *),
.webpage_block_bg.bg-danger .text-danger:not([class*="bg-"]):not(.alert *),
.webpage_block_bg.bg-dark .text-dark:not([class*="bg-"]):not(.alert *) {
  color: var(--webpage-block-on, #fff) !important;
}

/* the links of the components (the sources of the weather, the titles of the sub-pages) on a dark or primary section: in the color of the texts */
.webpage_block_bg:is(.webpage_block_dark, .webpage_block_deep) .webpage_boxed a:not(.btn) {
  color: var(--webpage-block-on, var(--falcon-primary));
}

/* the grays from 700 in the dark theme (light there): the links dark, also on a dark section */
.dark .webpage_block_bg.webpage_block_deep a:not(.btn) {
  color: #0b1727;
}

/* the tabs, the links of a menu and of a list group are not underlined (only the links of the texts, on a dark color) */
.webpage_block_box.webpage_block_bg:is(.webpage_block_dark, .webpage_block_deep) :is(.nav-link, .navbar-brand, .list-group-item, .dropdown-item) {
  text-decoration: none;
}

/* the Callout keeps its own color and the colors of its texts */
.webpage_block_bg .alert :is(h1, h2, h3, h4, h5, h6, a:not(.btn)) {
  color: inherit;
}

/* stage 3f2: the Letters color of a Text block (and of a Heading) over all its letters - its headings, its links, the colors chosen in the text
   editor */
.webpage_letters_color * {
  color: inherit !important;
}


/* 07.11.2026: the font sizes on the tablets and the phones - smaller, smoothly with the width of the screen, never larger than before: from 1200 px
   as before (the desktops unchanged), on a phone of 390 px about four fifths: the headings, the subtitles, the large texts, the numbers */
.webpage_section .webpage_heading h1 {
  font-size: clamp(1.45rem, 1.025rem + 1.95vw, 2.48832rem);
}

.webpage_section .webpage_heading h2 {
  font-size: clamp(1.3rem, 0.946rem + 1.504vw, 2.0736rem);
}

.webpage_section .webpage_heading h3 {
  font-size: clamp(1.2rem, 0.927rem + 1.068vw, 1.728rem);
}

.webpage_section .webpage_heading h4 {
  font-size: clamp(1.125rem, 0.973rem + 0.622vw, 1.44rem);
}

.webpage_section .webpage_subtitle,
.webpage_section .webpage_text.lead {
  font-size: clamp(1rem, 0.904rem + 0.395vw, 1.2rem);
}

.webpage_section .webpage_number_value.fs-6 {
  font-size: clamp(2.125rem, 1.711rem + 1.701vw, 2.985984rem) !important;
}

.webpage_section .webpage_number_value.fs-5 {
  font-size: clamp(1.8125rem, 1.487rem + 1.335vw, 2.48832rem) !important;
}

.webpage_section .webpage_number_value.fs-3 {
  font-size: clamp(1.375rem, 1.205rem + 0.697vw, 1.728rem) !important;
}

.webpage_section .webpage_number_value.fs-1 {
  font-size: clamp(1.0625rem, 0.996rem + 0.272vw, 1.2rem) !important;
}

/* 07.11.2026: the Number - Small and Extra Small (render_webpage_block): the icon and the texts smaller too */
.webpage_number_small .webpage_number_icon {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.1rem;
}

.webpage_number_xs .webpage_number_icon {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.9rem;
}

.webpage_number_xs .webpage_number_label {
  font-size: 0.875rem;
}

.webpage_number_xs .webpage_number_subtext {
  font-size: 0.75rem;
}

/* 07.11.2026: Same Heights - Per Line: the blocks of a line of the same height (the tallest one): each column a flex column, its block (its box)
   filling it, a card alone inside it too; Per Section - also webpages.js: the blocks of the same width take the height of the tallest one */
.row.webpage_row.webpage_row_same {
  align-items: stretch !important;
}

.webpage_row_same > [class*="col"] {
  display: flex;
  flex-direction: column;
}

.webpage_row_same > [class*="col"] > :not(.webdesigner_display_badge),
.webpage_row_same .webpage_block_box > * {
  flex: 1 1 auto;
}

.webpage_row_same .webpage_block_box {
  display: flex;
  flex-direction: column;
}

.webpage_row_same > [class*="col"] > :not(.webdesigner_display_badge) > .card:only-child {
  height: 100%;
}

/* 07.11.2026: the picture of a section on the phones - its own point (Picture Position on Phones), its own overlay (Overlay on Phones), above the
   text (a band at the top of the section, the text under it on the color of the section - a dark one under light texts, as the sections Dark) */
@media (max-width: 767.98px) {
  .bg-holder.webpage_bg_phone {
    background-position: var(--webpage-bg-phone) !important;
  }

  .webpage_section_overlay.webpage_section_overlay_phone {
    opacity: var(--webpage-overlay-phone) !important;
  }

  .webpage_section.webpage_section_phone_above {
    min-height: 0;
    padding-top: 0 !important;
  }

  .webpage_section.webpage_section_phone_above.webpage_section_dark {
    background-color: #0b1727 !important;
  }

  .webpage_section_phone_above > .bg-holder {
    position: relative;
    height: 62vw;
    min-height: 12rem;
    max-height: 28rem;
    margin-bottom: 2rem;
  }
}



/* stage 3m2 (decisions 142, 143): Store Products - Hero Slider, the slider of the top of the store page (user.css): its texts stay white in the light
   and the dark sections and blocks of the pages */
.store-hero.webpage_products_hero .store-hero-title {
  color: #fff;
}

.store-hero.webpage_products_hero .store-hero-text {
  color: rgba(255, 255, 255, 0.82);
}

.store-hero.webpage_products_hero .store-hero-price {
  color: #fff;
}



/* stage 3m3 (decisions 146, 152): the Letters card of the Menu block and of the Webpages Tree Menu - the items of the bar and of the list (the pages, the
   menus, the extra items, the section links; the opened dropdowns keep the look of the template): their size, weight, capitals, spacing, the color of
   the links (not the page open - its color stays) and the one under the mouse */
.webpage_menu.webpage_menu_size_s .nav-link {
  font-size: 0.875em;
}

.webpage_menu.webpage_menu_size_l .nav-link {
  font-size: 1.125em;
}

.webpage_menu.webpage_menu_weight_normal .nav-link {
  font-weight: 400;
}

.webpage_menu.webpage_menu_weight_semibold .nav-link {
  font-weight: 600;
}

.webpage_menu.webpage_menu_weight_bold .nav-link {
  font-weight: 700;
}

.webpage_menu.webpage_menu_caps .nav-link {
  text-transform: uppercase;
}

.webpage_menu.webpage_menu_spacing_larger .nav-link {
  letter-spacing: 0.04em;
}

.webpage_menu.webpage_menu_spacing_much .nav-link {
  letter-spacing: 0.1em;
}

.webpage_menu.webpage_menu_link_color .nav-link:not(.active):not(:hover):not(:focus-visible) {
  color: var(--webpage-menu-link);
}

.webpage_menu.webpage_menu_hover_color .nav-link:hover,
.webpage_menu.webpage_menu_hover_color .nav-link:focus-visible {
  color: var(--webpage-menu-hover);
}

/* an extra item without a link: its title only */
.webpage_menu span.webpage_menu_extra {
  cursor: default;
}



/* stage 3m5 (decision 155): the Bar card of the Menu block and of the Webpages Tree Menu - the bar: its background (None: the section shows through;
   a color of the palette - its class, bg-...; on the dark ones and, in the light theme, on the grays from 700: light letters - its links, the name of
   the organization, the account), its shadow, its corners, its border, its height; the opened dropdowns keep the look of the template */
.webpage_menu_bar.webpage_menu_bg_none {
  background-color: transparent;
}

.webpage_menu_bar.webpage_menu_shadow_none {
  box-shadow: none;
}

.webpage_menu_bar.webpage_menu_shadow_small {
  box-shadow: var(--falcon-box-shadow-sm);
}

.webpage_menu_bar.webpage_menu_shadow_large {
  box-shadow: var(--falcon-box-shadow-lg);
}

.webpage_menu_bar.webpage_menu_corners_none {
  border-radius: 0;
}

.webpage_menu_bar.webpage_menu_corners_small {
  border-radius: 0.25rem;
}

.webpage_menu_bar.webpage_menu_corners_large {
  border-radius: 1rem;
}

.webpage_menu_bar.webpage_menu_border {
  border: 1px solid var(--falcon-border-color);
}

.webpage_menu_bar.webpage_menu_compact {
  padding: 0.25rem 0.75rem;
}

.webpage_menu_bar.webpage_menu_tall {
  padding: 1rem 1.25rem;
}

html:not(.dark) .webpage_menu_bar:is(.webpage_menu_tone_dark, .webpage_menu_tone_deep),
.dark .webpage_menu_bar.webpage_menu_tone_dark {
  --falcon-navbar-light-color: rgba(255, 255, 255, 0.8);
  --falcon-navbar-light-hover-color: #fff;
  --falcon-navbar-light-active-color: #fff;
  --falcon-navbar-light-brand-color: #fff;
  --falcon-navbar-light-brand-hover-color: #fff;
}

html:not(.dark) .webpage_menu_bar:is(.webpage_menu_tone_dark, .webpage_menu_tone_deep) :is(.navbar-nav .nav-link.active, .webpage_menu_account > .nav-link),
.dark .webpage_menu_bar.webpage_menu_tone_dark :is(.navbar-nav .nav-link.active, .webpage_menu_account > .nav-link) {
  color: #fff;
}

html:not(.dark) .webpage_menu_bar:is(.webpage_menu_tone_dark, .webpage_menu_tone_deep) .navbar-toggler-icon,
.dark .webpage_menu_bar.webpage_menu_tone_dark .navbar-toggler-icon {
  filter: brightness(2);
}

/* stage 7c (08.11.2026, decision 409): the logo of the bar follows the tone of its background, as its letters - on a dark bar the logo for the
   dark theme (light letters), on a Gray 700+ bar in the dark theme (it turns light) the logo for the light theme; user.css shows them by the theme
   of the page only (branding-logo-light / -dark, both uploaded - get_host_logo_html) */
html:not(.dark) .webpage_menu_bar:is(.webpage_menu_tone_dark, .webpage_menu_tone_deep) .branding-logo-light,
.dark .webpage_menu_bar.webpage_menu_tone_deep .branding-logo-dark {
  display: none !important;
}

html:not(.dark) .webpage_menu_bar:is(.webpage_menu_tone_dark, .webpage_menu_tone_deep) .branding-logo-dark,
.dark .webpage_menu_bar.webpage_menu_tone_deep .branding-logo-light {
  display: inline-block !important;
}


/* stage 3m5 (decision 157): a Text block wider than the screen (the phones) - only its wide parts scroll: its tables (in their strip -
   webpage_text_scroll) and its code scroll sideways in their place, its long words and links wrap, a width written in it is never wider than the block */
.webpage_text {
  overflow-wrap: anywhere;
}

.webpage_text_scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.webpage_text table,
.webpage_text pre {
  overflow-wrap: normal;
}

.webpage_text pre {
  max-width: 100%;
  overflow-x: auto;
}

.webpage_text :is(div, p, span, blockquote, ul, ol, h1, h2, h3, h4, h5, h6)[style*="width"] {
  max-width: 100%;
}



/* stage 3m6 (decisions 158 - 164): the List Group - its look (Lines Only: list-group-flush of the template; Separate Cards - as the cards of the
   template), a number or an icon before each item (a circle of their color, white inside - as the Steps), the colors of the titles and of the texts
   (the marked item keeps its white letters), the background of the items (light letters on the dark colors; under the mouse a shade of it), the color
   of the marked item, Nothing under the mouse; the defaults: as before */
.webpage_list_cards {
  gap: 0.75rem;
}

.webpage_list_cards > .list-group-item,
.webpage_list_cards > .list-group-item + .list-group-item,
.webpage_list_cards > .list-group-item + .list-group-item.active {
  margin-top: 0;
  border-width: 0;
  border-radius: 0.375rem;
  box-shadow: var(--falcon-box-shadow);
}

.webpage_block_bg .webpage_list_cards > .list-group-item,
.webpage_block_bg .webpage_list_cards > .list-group-item + .list-group-item {
  border-width: 1px;
}

.webpage_list_marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dark .webpage_list_marker.bg-dark {
  background-color: #344050 !important;
}

.dark .webpage_list_marker.webpage_tone_deep {
  color: #0b1727;
}

.webpage_list_group .list-group-item.active .webpage_list_marker {
  box-shadow: 0 0 0 2px #fff;
}

.webpage_list_body {
  flex: 1 1 auto;
  min-width: 0;
}

/* the background of the items: light letters on the dark colors (and on the grays from 700 in the light theme) */
html:not(.dark) .webpage_list_group:is(.webpage_list_tone_dark, .webpage_list_tone_deep) > .list-group-item,
.dark .webpage_list_group.webpage_list_tone_dark > .list-group-item {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
}

html:not(.dark) .webpage_list_group:is(.webpage_list_tone_dark, .webpage_list_tone_deep) > .list-group-item h5,
.dark .webpage_list_group.webpage_list_tone_dark > .list-group-item h5 {
  color: #fff;
}

html:not(.dark) .webpage_list_group:is(.webpage_list_tone_dark, .webpage_list_tone_deep) > .list-group-item .text-500,
.dark .webpage_list_group.webpage_list_tone_dark > .list-group-item .text-500 {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* under the mouse (Light Background): a shade of the background of the items - darker on the light colors, lighter on the dark ones */
.webpage_list_bg {
  --webpage-list-shade: rgba(0, 0, 0, 0.04);
}

.dark .webpage_list_bg:not(.webpage_list_tone_dark):not(.webpage_list_tone_deep) {
  --webpage-list-shade: rgba(255, 255, 255, 0.06);
}

html:not(.dark) .webpage_list_bg:is(.webpage_list_tone_dark, .webpage_list_tone_deep),
.dark .webpage_list_bg.webpage_list_tone_dark {
  --webpage-list-shade: rgba(255, 255, 255, 0.12);
}

.webpage_list_bg:not(.webpage_list_hover_none) > .list-group-item-action:not(.active):is(:hover, :focus) {
  background-color: var(--falcon-list-group-bg);
  background-image: linear-gradient(var(--webpage-list-shade), var(--webpage-list-shade));
}

/* Mouse Over an Item: Nothing - the colors of the template under the mouse are the ones of the item */
.webpage_list_hover_none {
  --falcon-list-group-hover-bg: var(--falcon-list-group-bg);
  --falcon-list-group-action-hover-color: var(--falcon-800);
}

/* the colors of the titles and of the texts (not of the marked item) */
.webpage_list_title_color > .list-group-item:not(.active) h5 {
  color: var(--webpage-list-title);
}

.webpage_list_text_color > .list-group-item:not(.active) p {
  color: var(--webpage-list-text);
}

/* the color of the marked item (also on a block with a dark Background); the grays from 700 are light in the dark theme - dark letters there */
.webpage_list_group.webpage_list_marked > .list-group-item.active {
  background-color: var(--webpage-list-marked);
  border-color: var(--webpage-list-marked);
}

.dark .webpage_list_group.webpage_list_marked_deep > .list-group-item.active,
.dark .webpage_list_group.webpage_list_marked_deep > .list-group-item.active h5 {
  color: #0b1727;
}

.dark .webpage_list_group.webpage_list_marked_deep > .list-group-item.active .text-500 {
  color: rgba(11, 23, 39, 0.7) !important;
}

.dark .webpage_list_group.webpage_list_marked_deep > .list-group-item.active .webpage_list_marker {
  box-shadow: 0 0 0 2px #0b1727;
}

/* stage 4b (07.11.2026, decisions 171 - 175): the Website Footer (get_webpage_footer_html) - under a page alone, after its content (#webpage_main):
   the page at least as tall as the screen with the footer at its bottom; its letters from the tone of its background - on Primary and Dark light
   ones (webpage_section_dark), else the colors of the page (Site Settings); its links without a line under them; the social media in white circles
   in the colors of their networks (icon-item of the template), also in the dark theme */
.webpage_has_footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.webpage_has_footer > .webpage_main {
  min-height: 0;
  flex: 1 0 auto;
}

.webpage_footer {
  --webpage-footer-text: var(--falcon-body-color);
  --webpage-footer-link: var(--falcon-body-color);
  --webpage-footer-hover: var(--falcon-primary);
  --webpage-footer-title: var(--falcon-headings-color);
  --webpage-footer-line: var(--falcon-300);
  color: var(--webpage-footer-text);
}

.webpage_footer.webpage_section_dark {
  --webpage-footer-text: rgba(255, 255, 255, 0.65);
  --webpage-footer-link: rgba(255, 255, 255, 0.8);
  --webpage-footer-hover: #fff;
  --webpage-footer-title: rgba(255, 255, 255, 0.85);
  --webpage-footer-line: rgba(255, 255, 255, 0.15);
}

.webpage_footer .webpage_footer_title {
  color: var(--webpage-footer-title);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.webpage_footer .webpage_footer_text {
  color: var(--webpage-footer-text);
  line-height: 1.7;
}

/* the letters of the text and of the links as the contact details (fs--1) */
.webpage_footer .webpage_footer_text,
.webpage_footer .webpage_footer_links {
  font-size: 0.8333333333rem;
}

/* the bottom line in the width of the sections (its line from one side to the other) */
@media (min-width: 1200px) {
  .webpage_footer_bottom > .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .webpage_footer_bottom > .container {
    max-width: 1320px;
  }
}

/* stage 4b2 (decision 185): Logo Height and Logo Height on Phones (the variables of webpage_footer_brand - 48 px when they are not set); its width
   follows its proportions, up to the width of its column (then the logo is lower - no empty space around it) */
.webpage_footer .webpage_footer_logo {
  max-height: var(--webpage-footer-logo-height, 48px);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .webpage_footer .webpage_footer_logo {
    max-height: var(--webpage-footer-logo-height-phone, 48px);
  }
}

.webpage_footer .webpage_footer_name {
  color: var(--webpage-footer-title);
  font-size: 1.25rem;
  font-weight: 700;
}

.webpage_footer a.webpage_footer_link,
.webpage_footer a.webpage_contact_link {
  color: var(--webpage-footer-link);
  text-decoration: none;
}

.webpage_footer a.webpage_footer_link:hover,
.webpage_footer a.webpage_footer_link:focus,
.webpage_footer a.webpage_contact_link:hover,
.webpage_footer a.webpage_contact_link:focus,
.webpage_footer a.webpage_footer_link[aria-current="page"] {
  color: var(--webpage-footer-hover);
}

.webpage_footer .webpage_contact_rows {
  color: var(--webpage-footer-text);
}

.webpage_footer .webpage_footer_icons {
  row-gap: 0.5rem;
}

/* 08.11.2026: the buttons of the social media - their color: the one of the network (--webpage-social-network), else the color chosen
   (--webpage-social-color: a color of the palette, or the color of the links of the footer - webpage_social_text) and the icon over it
   (--webpage-social-on); Style: White (as before), Colored, Outline (filled under the mouse), Icons (no background); Shape; Size S / M / L (32, 40, 48 px) */
.webpage_footer a.webpage_footer_social {
  --webpage-social-c: var(--webpage-social-color, var(--webpage-social-network, #5e6e82));
  background-color: #fff;
  color: var(--webpage-social-c);
  text-decoration: none;
}

.webpage_footer a.webpage_footer_social:hover,
.webpage_footer a.webpage_footer_social:focus {
  background-color: #edf2f9;
}

.webpage_footer a.webpage_footer_social_facebook { --webpage-social-network: #3c5a99; }
.webpage_footer a.webpage_footer_social_instagram { --webpage-social-network: #e4405f; }
.webpage_footer a.webpage_footer_social_linkedin { --webpage-social-network: #0077b5; }
.webpage_footer a.webpage_footer_social_youtube { --webpage-social-network: #ff0000; }
.webpage_footer a.webpage_footer_social_x { --webpage-social-network: #1da1f2; }
.webpage_footer a.webpage_footer_social_whatsapp { --webpage-social-network: #25d366; }
.webpage_footer a.webpage_footer_social_telegram { --webpage-social-network: #229ed9; }
.webpage_footer a.webpage_footer_social_pinterest { --webpage-social-network: #e60023; }
.webpage_footer a.webpage_footer_social_vimeo { --webpage-social-network: #1ab7ea; }

.webpage_footer .webpage_social_text {
  --webpage-social-color: var(--webpage-footer-link);
  --webpage-social-on: #fff;
}

.webpage_footer.webpage_section_dark .webpage_social_text {
  --webpage-social-on: #0b1727;
}

.webpage_footer .webpage_social_colored a.webpage_footer_social {
  background-color: var(--webpage-social-c);
  color: var(--webpage-social-on, #fff);
  box-shadow: none;
}

.webpage_footer .webpage_social_outline a.webpage_footer_social {
  background-color: transparent;
  border: 1.5px solid var(--webpage-social-c);
  box-shadow: none;
}

.webpage_footer .webpage_social_outline a.webpage_footer_social:hover,
.webpage_footer .webpage_social_outline a.webpage_footer_social:focus {
  background-color: var(--webpage-social-c);
  color: var(--webpage-social-on, #fff);
}

.webpage_footer .webpage_social_icons a.webpage_footer_social {
  background-color: transparent;
  box-shadow: none;
}

.webpage_footer .webpage_social_colored a.webpage_footer_social:hover,
.webpage_footer .webpage_social_colored a.webpage_footer_social:focus,
.webpage_footer .webpage_social_icons a.webpage_footer_social:hover,
.webpage_footer .webpage_social_icons a.webpage_footer_social:focus {
  background-color: var(--webpage-social-c);
  opacity: 0.8;
}

.webpage_footer .webpage_social_icons a.webpage_footer_social:hover,
.webpage_footer .webpage_social_icons a.webpage_footer_social:focus {
  background-color: transparent;
}

.webpage_footer .webpage_social_rounded a.webpage_footer_social {
  border-radius: 25%;
}

.webpage_footer .webpage_social_square a.webpage_footer_social {
  border-radius: 0;
}

.webpage_footer .webpage_social_s a.webpage_footer_social {
  width: 2rem;
  height: 2rem;
  font-size: 0.75rem;
}

.webpage_footer .webpage_social_l a.webpage_footer_social {
  width: 3rem;
  height: 3rem;
  font-size: 1.125rem;
}

.webpage_footer .webpage_social_icons.webpage_social_s a.webpage_footer_social {
  font-size: 1rem;
}

.webpage_footer .webpage_social_icons.webpage_social_m a.webpage_footer_social {
  font-size: 1.25rem;
}

.webpage_footer .webpage_social_icons.webpage_social_l a.webpage_footer_social {
  font-size: 1.5rem;
}

.webpage_footer .webpage_footer_bottom_line {
  border-top: 1px solid var(--webpage-footer-line);
}

.webpage_footer .webpage_footer_copyright,
.webpage_footer .webpage_footer_separator {
  color: var(--webpage-footer-text);
}

.webpage_footer .webpage_footer_separator {
  opacity: 0.6;
}

/* stage 6e2 (08.11.2026, decisions 222, 235 - 237, 241, 243, 244): the language switches - the Language Switch block (webpage_languages: Links,
   Small Buttons, Dropdown), the switch of the Website Footer (its bottom line), the switch of the menus; Flags - the flag of the language of the page
   in color, the others grey until the mouse is over them (as the flag of the platform menu - user.css, platform_menu_flag) */
.webpage_language_flag {
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
  will-change: filter, opacity;
}

.webpage_languages_flags [aria-current] .webpage_language_flag,
.webpage_languages_flags a:hover .webpage_language_flag,
.webpage_languages_flags a:focus-visible .webpage_language_flag,
.webpage_languages_dropdown .dropdown-toggle .webpage_language_flag,
.webpage_languages_dropdown .dropdown-item:hover .webpage_language_flag,
.webpage_languages_dropdown .dropdown-item:focus .webpage_language_flag,
.webpage_languages_dropdown .dropdown-item[aria-current] .webpage_language_flag {
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .webpage_language_flag {
    transition: none;
  }
}

.webpage_languages a {
  text-decoration: none;
}

.webpage_languages .webpage_languages_label {
  color: var(--falcon-700);
}

.webpage_section_dark .webpage_languages .webpage_languages_label {
  color: inherit;
}

.webpage_languages .dropdown-menu {
  min-width: 8rem;
}

/* the flags in the buttons: as high as their letters */
.webpage_languages_buttons .btn .webpage_language_flag,
.webpage_languages_dropdown .btn .webpage_language_flag {
  margin-top: -2px;
}

/* the footer: the language of the page in the color of its titles */
.webpage_footer .webpage_footer_languages [aria-current] {
  color: var(--webpage-footer-title);
}

/* stage 7a (08.11.2026, decisions 401 - 404): the Documents block (render_webpage_live_documents) - the rows of the list (a line above each one, the
   first one under the edge of the box), the icon of a document on a light square, its name in the color of the titles (the color of the links under
   the mouse), its details; the table, the cards; the Search Box (the icon inside the field); the folded groups - the Questions block */
.webpage_docs_list {
  overflow: hidden;
}

.webpage_docs_list .webpage_docs_items {
  margin-top: -1px;
}

.webpage_docs_row {
  border-top: 1px solid var(--falcon-border-color);
  color: inherit;
  text-decoration: none;
}

.webpage_docs_card,
a.webpage_docs_link {
  color: inherit;
  text-decoration: none;
}

/* under the mouse: no line under the texts (the links of the template), only the color of the name */
.webpage_docs_row:hover,
.webpage_docs_row:focus,
.webpage_docs_card:hover,
.webpage_docs_card:focus,
a.webpage_docs_link:hover,
a.webpage_docs_link:focus {
  color: inherit;
  text-decoration: none;
}

.webpage_docs_icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background-color: var(--falcon-200);
  font-size: 1.15rem;
}

.webpage_docs_table .webpage_docs_icon {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

.webpage_docs_name {
  font-weight: 600;
  color: var(--falcon-headings-color);
  transition: color 0.2s;
}

.webpage_docs_row:hover .webpage_docs_name,
.webpage_docs_card:hover .webpage_docs_name,
a.webpage_docs_link:hover .webpage_docs_name {
  color: var(--falcon-primary);
}

.webpage_docs_meta,
.webpage_docs_text {
  color: var(--falcon-600);
}

.webpage_docs_button {
  flex-shrink: 0;
}

.webpage_docs_table td {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.webpage_docs_search_icon {
  left: 0.9rem;
}

.webpage_docs_fold .webpage_accordion_text {
  padding: 0 1rem 1rem;
}

/* the table: the names not narrower than this - on the phones the table scrolls sideways */
.webpage_docs_table a.webpage_docs_link {
  min-width: 12rem;
}

/* a dark section: its links are white and underlined - not the documents (their own colors) */
.webpage_section_dark .webpage_docs a.webpage_docs_row,
.webpage_section_dark .webpage_docs a.webpage_docs_link {
  color: inherit;
  text-decoration: none;
}

.webpage_section_dark .webpage_docs a.webpage_docs_card {
  text-decoration: none;
}

/* Plain on a dark section: the letters of the section */
.webpage_section_dark .webpage_card_plain .webpage_docs_name {
  color: inherit;
}

.webpage_section_dark .webpage_card_plain .webpage_docs_meta,
.webpage_section_dark .webpage_card_plain .webpage_docs_text {
  color: inherit;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .webpage_docs_name {
    transition: none;
  }
}

/* stage 7b (08.11.2026, decisions 405, 407, 408): the Articles block (render_webpage_live_articles) - the picture of an article (16 / 10, a little
   larger under the mouse), the first one of Magazine (its picture as high as its texts), the rows of List (a small picture beside the texts, a line
   above each one); the date, the description; the Article Info block (the date, the reading time, the link back - in a line) */
.webpage_article_picture {
  overflow: hidden;
}

.webpage_article_image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.webpage_article_card:hover .webpage_article_image,
.webpage_article_lead:hover .webpage_article_image,
.webpage_article_row:hover .webpage_article_image {
  transform: scale(1.03);
}

.webpage_article_lead .webpage_article_picture,
.webpage_article_lead .webpage_article_image {
  height: 100%;
}

.webpage_article_lead .webpage_article_image {
  min-height: 16rem;
  aspect-ratio: auto;
}

.webpage_articles_list {
  overflow: hidden;
}

.webpage_articles_list .webpage_articles_items {
  margin-top: -1px;
}

.webpage_article_row {
  border-top: 1px solid var(--falcon-border-color);
}

.webpage_article_thumb {
  width: 10rem;
}

.webpage_article_thumb .webpage_article_picture {
  border-radius: 0.375rem;
}

@media (max-width: 575.98px) {
  .webpage_article_thumb {
    width: 6.5rem;
  }
}

.webpage_article_date,
.webpage_article_text {
  color: var(--falcon-600);
}

.webpage_article_info {
  font-size: 0.875rem;
  color: var(--falcon-600);
}

.webpage_article_info a.webpage_article_back {
  color: var(--falcon-primary);
  text-decoration: none;
}

.webpage_article_info a.webpage_article_back:hover {
  text-decoration: underline;
}

.webpage_article_dot {
  opacity: 0.6;
}

/* Plain: the texts in a line with the picture (no inner space), its corners rounded */
.webpage_article_card.webpage_card_plain .card-body {
  padding-left: 0;
  padding-right: 0;
}

.webpage_article_card.webpage_card_plain .webpage_article_picture {
  border-radius: 0.5rem;
}

/* a dark section: its links are underlined - not the titles and Read More of the articles */
.webpage_section_dark .webpage_articles a.webpage_subpage_title,
.webpage_section_dark .webpage_articles a.webpage_subpage_more {
  text-decoration: none;
}

/* on a dark section: the letters of the section (Plain articles, Article Info) */
.webpage_section_dark .webpage_card_plain .webpage_article_date,
.webpage_section_dark .webpage_card_plain .webpage_article_text,
.webpage_section_dark .webpage_article_info,
.webpage_section_dark .webpage_article_info a.webpage_article_back {
  color: inherit;
}

.webpage_section_dark .webpage_card_plain .webpage_article_date,
.webpage_section_dark .webpage_card_plain .webpage_article_text {
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .webpage_article_image {
    transition: none;
  }
}