:root {
    --white: #fff;
    --black: #000;
    --red: #f0d5d5;
    --darkred: darkred;
    --grey: lightgrey;
    --darkgrey: #d7d7d7;
}

body {
    background-color: var(--grey);
}

hr {
    height: 1rem;
    margin: 0 -16px;
    border: 0;
    border-top: 5px solid var(--grey);
    opacity: 1;
}

.container-xl > .row {
    margin-top: 2rem;
}

/* LINKS */
a:link {
    color: var(--red);
    text-decoration: none;
}

a:visited {
    color: var(--red);
    text-decoration: none;
}

a:hover {
    color: var(--black);
    text-decoration: none;
}

a:active {
    color: var(--red);
    text-decoration: none;
}   

.card {
    height: 100%;
}

.texte-barre-menu a:link,
.texte-barre-menu a:visited,
.texte-barre-menu a:active {
    color: var(--white);
    text-decoration: none;
}
.texte-barre-menu a:hover {
    color: var(--grey);
    text-decoration: none;
}

/* NAVBAR */
.barre-menu {
    background-color: var(--red);
    min-height: .5rem;
    color: var(--white);
}

.texte-barre-menu h2 {
    font-size: 1.2rem;
    padding-top: .4rem;
    padding-bottom: .6rem;
}

/* invoice closed*/
#bg-closed {
    color: white;
    position: absolute;
    font-size: 2.3rem;
    background-color: rgba(0,0,0,.2);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #bg-closed div {
    background-color: var(--rouge);
    padding: .1rem .3rem;
    border-radius: 5px;
    opacity: 50%;
    transform: rotate(-10deg);
  }

/* BUTTONS */
.btn-primary {
    background-color: var(--red);
    border-color: var(--red);
}

.btn-date {
    padding: 11px 15px;
}

.btn-primary:hover {
    background-color: var(--darkred);
    border-color: var(--darkred);
}

.btn-primary:active {
    background-color: var(--red);
    border-color: var(--red);
}

.btn-primary:focus {
    background-color: var(--red);
    border-color: var(--red);
}

/* CONTAINER BOX */
.container-box {
    background-color: var(--white);
    border-radius: 10px;
}

.container-box-title {
    background-color: var(--red);
    color: var(--white);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: .4rem 1rem;
}

.container-box-content {
    padding: .4rem 1rem;
}

.container-box-content > .row {
    margin: 1rem 0;
}

@media screen and (max-width: 576px)  {
    html {
        font-size: 13px;
    }

    input {
        padding: .2rem 0 !important;
    }

    .btn-small {
        margin-top: -.2rem;
    }
    .btn-date {
        padding: 8px 10px;
    }
    

    .container-box-content > .row > .col-12 > .row > .col-12:nth-child(2) {
        margin: 1rem 0;
    }
    
    .container-box-content > .row > .col-12 > .row > .col-sm-2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* MODAL */
.modal-header {
    background-color: var(--red);
    color: var(--white);
}

/* AUTOCOMPLETE */
.autocomplete-suggestions { 
    border: 1px solid var(--black);
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px;
    background: var(--white); 
    overflow: auto; 
}

.autocomplete-suggestion { 
    padding: 2px 5px; 
    white-space: nowrap; 
    overflow: hidden; 
}

.autocomplete-selected { 
    background: var(--grey);
    cursor: pointer; 
}

.autocomplete-suggestions strong { 
    font-weight: normal; 
    color: var(--darkred); 
}

.autocomplete-group { 
    padding: 2px 5px; 
}

.autocomplete-group strong { 
    display: block; 
    border-bottom: 1px solid var(--black); 
}

/* Date Time Input 
.date,
.time {
   padding: .1rem;
}
*/
/* TABLE LISTE */
@media screen and (max-width: 992px) {
    #search_Field {
        margin-top: 1rem;
    }
}

#search_Field span {
    background-color: var(--white);

}

table .inline-flex {
    display: inline-flex;
}

/* CONNEXION */
/* CONNEXION */
#formulaire-connexion h2 {
    margin-bottom: 1rem;
    text-align: center;
}

#formulaire-connexion span {
    width: 10%;
    background-color: var(--white);
}

#formulaire-connexion .input-group {
    margin-bottom: 1rem;
}

#formulaire-connexion button {
    width: 100%;
}

#texte-connexion {
    text-align: center;
}

#texte-connexion img {
    max-height: 140px;
}