@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 4s both;
}
.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;
}