.primary, .text-primary{
    color:rgb(var(--p));
}

.secondary, .text-secondary{
    color:rgb(var(--s));
}

.warning, 
.text-warning {
    color:red;
}

.label-secondary {
    background:rgb(var(--s));
    color:rgb(var(--sc));
}

.bg-neutral {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-n, rgb(var(--lggrey) / var(--tw-bg-opacity)));
}
.text-primary {
    --tw-text-opacity: 1;
    color: var(--fallback-p, rgb(var(--p) / var(--tw-text-opacity)));
}
.bg-primary {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-p, rgb(var(--p) / var(--tw-bg-opacity)));
}

.text-secondary {
    --tw-text-opacity: 1;
    color: var(--fallback-s, rgb(var(--s) / var(--tw-text-opacity)));
}

.text-white {
    --tw-text-opacity: 1;
    color: var(--fallback-b1, rgb(var(--b1) / var(--tw-text-opacity)));
}


.label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(0,0,.2,1);
    transition-duration: .2s;
    height: 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    width: -moz-fit-content;
    width: fit-content;
    padding-left: .563rem;
    padding-right: .563rem;
    border-radius: var(--rounded-badge, 1.9rem);
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: var(--fallback-b2, rgb(var(--b2) / var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b1, rgb(var(--b1) / var(--tw-bg-opacity)));
    --tw-text-opacity: 1;
    color: var(--fallback-bc, rgb(var(--bc) / var(--tw-text-opacity)));
    text-align: left;
    height: auto;
    white-space: normal;
}

.label-neutral {
    --tw-border-opacity: 1;
    border-color: var(--fallback-n, rgb(var(--lggrey) / var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-n, rgb(var(--lggrey) / var(--tw-bg-opacity)));
    --tw-text-opacity: 1;
    color: var(--fallback-nc, rgb(var(--lggreyc) / var(--tw-text-opacity)));
}

.label-primary {
    --tw-border-opacity: 1;
    border-color: var(--fallback-p, rgb(var(--p) / var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-p, rgb(var(--p) / var(--tw-bg-opacity)));
    --tw-text-opacity: 1;
    color: var(--fallback-pc, rgb(var(--pc) / var(--tw-text-opacity)));
}

.label-ghost {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b2, rgb(var(--b2) / var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b2, rgb(var(--b2) / var(--tw-bg-opacity)));
    --tw-text-opacity: 1;
    color: var(--fallback-bc, rgb(var(--bc) / var(--tw-text-opacity)));
}

@supports (color:rgb(0% 0 0)) {
    .home-search button[type=submit],
    .btn-primary {
        --btn-color: var(--p);
        background-color: rgb(var(--p));

    }
}
.home-search button[type=submit],
.btn-primary {
    --tw-text-opacity: 1;
    color: var(--fallback-pc, rgb(var(--pc) / var(--tw-text-opacity)));
    outline-color: var(--fallback-p, rgb(var(--p) / 1));
    background-color: rgb(var(--p));
}
@media (prefers-reduced-motion: no-preference) {
    .btn {
        animation: button-pop var(--animation-btn, .25s) ease-out;
        
    }
}

.btn{
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{
    transform: var(--li-hover-raise);
    box-shadow: 0 3px 10px rgba(2, 6, 23, .08), 0 10px 24px rgba(2, 6, 23, .06);
}

.btn-secondary {
    --tw-text-opacity: 1;
    color: var(--fallback-sc, rgb(var(--sc) / var(--tw-text-opacity)));
    outline-color: var(--fallback-s, rgb(var(--s) / 1));
    background-color:rgb(var(--s));
}
@supports (color:rgb(0% 0 0)) {
    .btn-secondary {
        --btn-color: rgb(var(--s));
    }
}

.btn.btn-simple {
    border-color: #f2f2f2;
    color: #1f2937;
    transition-duration: .2s;
    transition-timing-function: 
    cubic-bezier(0, 0, .2, 1);
    border-width: var(--border-btn, 1px);
    transition-property: color, background-color, border-color, opacity, box-shadow, transform;
    outline-color: var(--fallback-bc, oklch(var(--bc) / 1));
    background-color: #f2f2f2;
    --tw-bg-opacity: 1;
    --tw-border-opacity: 1;
}

.btn-outline {
    border-color: currentColor;
    background-color: transparent;
    --tw-text-opacity: 1;
    color: var(--fallback-bc, rgb(var(--bc) / var(--tw-text-opacity)));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-primary.btn-accent,
.btn-secondary.btn-outline,
.btn-primary.btn-outline {
    background-color: inherit;
}

.btn-outline.btn-primary {
    --tw-text-opacity: 1;
    color: var(--fallback-p, rgb(var(--p) / var(--tw-text-opacity)));
}

.btn-outline.btn-secondary {
    --tw-text-opacity: 1;
    color: var(--fallback-s, rgb(var(--s) / var(--tw-text-opacity)));
}

.btn-outline.btn-accent {
    --tw-text-opacity: 1;
    color: var(--fallback-a, rgb(var(--darkblue) / var(--tw-text-opacity)));
}


.btn-neutral{
    --tw-text-opacity: 1;
    color: var(--fallback-nc, rgb(var(--nc) / var(--tw-text-opacity)));
    outline-color: var(--fallback-n, rgb(var(--n) / 1));
    background-color:rgb(var(--n));
}


.btn-white{
    --tw-text-opacity: 1;
    color: var(--fallback-n, rgb(var(--n) / var(--tw-text-opacity)));
    outline-color: var(--fallback-n, rgb(var(--nc) / 1));
    background-color:rgb(var(--nc));
}

.btn-primary.btn-motif{
    background:url(/assets/legal-angel/img/damier-primary.jpg);
    background-size: 100%;
    transition: transform .2s ;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.btn-motif:hover{
    color:#000;
    border-color:transparent !important;
    outline-color:transparent !important;
    transform: var(--li-hover-raise);
    box-shadow: 0 3px 10px rgba(2, 6, 23, .08), 0 10px 24px rgba(2, 6, 23, .06);
    
}

.btn-secondary.btn-motif{
    background:url(/assets/legal-angel/img/damier-secondary.jpg);
    background-size: 100%;
}
@media (hover: hover) {
    @supports (color:color-mix(in oklab,black,black)) {

        .btn-outline.btn-primary:hover {
            background-color:
                color-mix(in oklab, var(--fallback-p, rgb(var(--p) / 1)) 90%, black);
            border-color:
                color-mix(in oklab, var(--fallback-p, rgb(var(--p) / 1)) 90%, black);
        }
    }
}
@media (hover: hover) {

    .btn-outline.btn-primary:hover {
        --tw-text-opacity: 1;
        color: var(--fallback-pc, rgb(var(--pc) / var(--tw-text-opacity)));
    }
}

@media (hover: hover) {
    @supports (color:color-mix(in oklab,black,black)) {
        .btn-outline.btn-secondary:hover {
            background-color:
                color-mix(in oklab, var(--fallback-s, rgb(var(--s) / 1)) 90%, black);
            border-color:
                color-mix(in oklab, var(--fallback-s, rgb(var(--s) / 1)) 90%, black);
        }
    }
}
@media (hover: hover) {
    .btn-outline.btn-secondary:hover {
        --tw-text-opacity: 1;
        color: var(--fallback-sc, rgb(var(--sc) / var(--tw-text-opacity)));
    }
}


@media (hover: hover) {
    .btn-secondary:hover {
        --tw-text-opacity: 1;
        color: var(--fallback-sc, rgb(var(--sc) / var(--tw-text-opacity)));
        background-color:rgb(var(--s));
    }
}

@media (hover: hover) {
    .btn-outline:hover {
        --tw-border-opacity: 1;
        border-color: var(--fallback-bc, rgb(var(--bc) / var(--tw-border-opacity)));
        --tw-bg-opacity: 1;
        background-color: var(--fallback-bc, rgb(var(--bc) / var(--tw-bg-opacity)));
        --tw-text-opacity: 1;
        color: var(--fallback-b1, rgb(var(--b1) / var(--tw-text-opacity)));
    }
}
@media (hover: hover) {
    @supports (color:color-mix(in oklab,black,black)) {
        .btn:hover {
            background-color:
                color-mix(in oklab, rgb(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black);
            border-color:
                color-mix(in oklab, rgb(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black);
        }
    }
}