@keyframes appear-then-fade {
    0%, 100% {
        opacity:0
    }
    5%, 60% {
        opacity:1
    }
}
.flash {
    position:fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 100%;
    width: max-content;
    z-index: 1000;
}

.flash.message {
    animation: appear-then-fade 7s both;
}
/* Starter Kit Page Styles */

/* Image base styles with smooth transitions */
.starter-kit-image {
  max-width: 150px;
  height: auto;
  transition: filter 0.3s ease-in-out;
}

/* Greyed out image state */
.starter-kit-image.is-greyed {
  filter: grayscale(100%) opacity(0.4);
  transition: filter 0.3s ease-in-out;
}

/* Radio button option card styling */
.starter-kit-option {
  display: block;
  padding: 1.25rem;
  border: 2px solid hsl(var(--bulma-border-h), var(--bulma-border-s), var(--bulma-border-l));
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 100%);
}

/* Hover state for option cards */
.starter-kit-option:hover {
  border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
}

/* Radio input styling */
.starter-kit-option input[type="radio"] {
  margin-right: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* Selected state for option cards */
.starter-kit-option:has(input[type="radio"]:checked) {
  border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  border-width: 3px;
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 98%);
}

/* Highlight selected option label */
.starter-kit-option input[type="radio"]:checked ~ .option-content .option-title {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  font-weight: bold;
}

/* Button reveal animation */
.next-button-container {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.timeline-main-container {
    border-left: 1px solid var(--bulma-primary);
    margin-left: 10px;
}

.timeline-item::before {
    content: "";
    border-radius: 50%;
    height: 9px;
    width: 9px;
    background-color: var(--bulma-primary);
    position: absolute;
    left: -30px;
    top: 0.5rem;
}

.timeline-item {
    margin-left: 25px;
    position: relative;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
    --bulma-scheme-h: 217.24;
    --bulma-scheme-s: 32.58%;
    --bulma-primary-h: 36.59;
    --bulma-primary-s: 98.4%;
    --bulma-primary-l: 50.98%;
    --bulma-link-h: 210.47;
    --bulma-link-s: 95.98%;
    --bulma-link-l: 60.98%;
    --bulma-warning-h: 43.76;
    --bulma-warning-s: 100%;
    --bulma-warning-l: 83.33%;
    --bulma-text-h: 217.24;
    --bulma-text-s: 32.58%;
    --bulma-text-l: 17.45%;
    --bulma-family-primary: "Gabarito", sans-serif;
}

.table.has-no-border {
    border: none;
    --bulma-table-cell-border-width: 0;
    --bulma-table-head-cell-border-width: 0;
}

.is-circular {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.button.has-border {
    border: 1px solid hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l));
}

.button.is-tiny {
    --bulma-control-size: 0.65rem;
    --bulma-control-radius: 0.25rem;
}

@media print {
    .print-only {
        display: block !important;
    }
    .no-print {
        display: none;
    }
}

.line-behind-text {
    text-align: center;
    border-bottom: 1px solid #ccc; /* The line itself */
    line-height: 0.1em; /* Adjusts the vertical position of the line */
}

.line-behind-text span {
    background: var(--bulma-body-background-color); /* Background color to "cover" the line behind the text */
    padding: 0 10px; /* Spacing around the text */
    position: relative; /* Allows z-index to work for overlapping */
    z-index: 1; /* Ensures text is above the line */
}