@import "bootstrap/scss/functions";
@import "bootstrap/scss/mixins/breakpoints";
@import "../styles/bootstrap-variables";
@import "../styles/global-variables";

.rdvForm {
    &-fields {
        max-width: 75vw;
        margin: auto;

        @include media-breakpoint-up(xl) {
            max-width: 65vw;
        }
        @include media-breakpoint-up(md) {
            label, select, input {
                font-size: 2.4rem;
            }
        }
    }
}

.eligibility-criteria {
    /* to ensure panel is over shaded gutter */
    z-index: 20;
    position: fixed;
    bottom: 0;
    left: 0;
    color: $red-600;
    width: 100%;
    background-color: $red-100;
    text-align: center;
    vertical-align: center;

    p {
        margin: .5em;
    }
}

.fade-in-then-fade-out {
    animation-name: fade-in-then-fade-out;
    animation-duration: 10s;
    animation-fill-mode: forwards;
}

@keyframes fade-in-then-fade-out {
    0%, 100% {opacity: 0}
    10%, 90% {opacity: 1}
}

vmd-appointment-card {
    display: block;
    opacity: 1;
    animation: fade-in ease-in 200ms;
    animation-fill-mode: backwards;
    animation-delay: calc((var(--page-index) * 60ms) + 50ms);

    @keyframes fade-in {
        from {
            opacity: 0;
            filter: saturate(0%);
        }
        to {
            opacity: 1;
            filter: saturate(100%);
        }
    }
}

.criteria-container {
    &.search-standard {
        background-color: $lightStdColor;
    }
    &.search-highlighted {
        background-color: $lightHighlihtedColor;
    }
}

.container-content {
    max-width: 80vw;
    margin: 0 auto;
    @media (min-width: 1200px) {
        max-width: 65vw;
    }
}

.rounded-resultats-top {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}
