.error{
    background-color: red;
    color: white;
}
.success{
background-color: green;
color: white;
}

.is-invalid {
    border-color: red;
    background-color: #f8d7da;
}
/* optgroup.online{
color: green;
}
optgroup.offline{
color: red;
} */
.print_new{
color: blue;
}
.print_sent_client{
color: cornflowerblue;
}
.print_deleted{
color: orangered;
}
.print_done{
color: green;
}
.print_expired{
color: orange;
}
.print_error{
color: red;
}
.print_unknown{
color: mediumvioletred;
}

.online {
    color: green;
}

.offline {
    color: red;
}



/*
Gestion du Panier - statut et affichage des pages liées aux paniers
*/

.statut_panier {
    /* color:#fff!important; */
}
.statut_panier_1{
    color: orange!important;
}
.statut_panier_2{
    color: green!important;

}
.statut_panier_3{
    color: red!important;
}
.statut_panier_4{
    color: rgb(104, 104, 104)!important;
}

.bg_statut_panier {
    padding:5px;
    color:#fff!important;
}
.bg_statut_panier_1{
    background: orange!important;
}
.bg_statut_panier_2{
    background: green!important;

}
.bg_statut_panier_3{
    background: red!important;
}
.bg_statut_panier_4{
    background: rgb(104, 104, 104)!important;
}



.panier .accordion-wrap .accordion .teaser:hover{
    background:#f4f4f4;

}

.panier  .collapse  {
    background: #f4f4f4;
    border: 1px dotted #d1d1d1;

}

.panier  .accordion-body {
    padding: 20px;
    min-height:300px;
    background: #f4f4f4;
    border: 1px dotted #d1d1d1;
    @media (max-width: 1200px) {
        padding: 10px;
    }

}

.panier  .accordion-body .col-gauche {
    float:left;
    width : 65%;
    @media (max-width: 1200px) {
        width : 100%;
    }
}
         

.panier  .accordion-body .col-droite {
    float:right;
    width : 32%;
    @media (max-width: 1200px) {
        width : 100%;
    }
}

.col-2 {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 5px;
}

.col-droite {
    display: flex;
    flex-direction: column;
    /* justify-content: end; */
    align-items: end;
    gap: 5px;
}

.col-droite .btn_element_action {
    margin-top: 10px;
    display: flex;
    justify-content: end;
    gap: 10px;
}
            
.panier  {
        
    .accordion-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        
        a {
            tex-decoration: none;
            
            &:hover {
                text-decoration: none;
            }
        }
        
        .accordion {
        position: relative;
        border-top: 1px solid #ccc;
        
            &:last-child {
                border-bottom: 1px solid #ccc;
            }
            
            .teaser {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                width: 100%;
                padding: 20px 100px 20px 20px;
                position: relative;

                &:last-child {
                    border-bottom: 1px solid #ccc;
                }

                .time {
                    margin-top: 5px;
                    width: 200px;
                }

                .title {
                    color:#5a5656;
                    .theme {
                        opacity: .4;
                    }
                }
                
                @media (max-width: 990px) {
                    flex-direction: column;
                }
            }
            
            .content {
                padding: 30px 120px 30px 200px;

                @media (max-width: 1200px) {
                    padding: 0 120px 30px 0;
                }
            }

            .accordion-toggle {
                width: 100px;
                height: 100%;
                position: absolute;
                background-color: rgba(255,255,255,.14);
                right: 0;
                top: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 0.3s ease;

                span {
                    background-color: #ccc;
                    transition: 0.3s ease;

                    &.one {
                        height: 1px;
                        width: 26px;
                        position: absolute;
                        top: 50%;
                    }

                    &.two {
                        width: 1px;
                        height: 26px;
                        position: absolute;
                        left: 50%;
                        opacity: 0;
                        transform: rotate(120deg);
                    }
                }
            }
            
            &.collapsed {
                .accordion-toggle {
                    
                    span.two {
                        opacity: 1;
                        transform: rotate(0);
                    }
                }
            }
        }
    }
}