body {
    text-align: center;
    font-family: 'Barlow', sans-serif !important;
    /* margin-bottom : 50px !important; */
    height: 100% !important;
}

a {
    text-decoration: none !important;
    vertical-align: middle;
}

a p{
    margin-top: 20px !important;
    text-decoration: none !important;
    vertical-align: middle;
    font-family: Barlow !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
}

a .button {
    margin-top: 31px !important;
    padding: 15px 22px !important;
    border-radius: 10px !important;
    font-family: Barlow !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
}

a .button:hover {
    background-color: #4060F5 !important;
    color: #FFF !important;
    font-family: Barlow !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
}

p {
    color: #4060F5 !important;
    text-align: center !important;
    font-family: Barlow !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    margin: 0 !important;
}

.text-grey {
    color: #B1C0D3 !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    margin: 16px 0 40px 0 !important;
}

h1 {
    margin: 0 auto !important;
    padding: 0 !important;
    padding-bottom : 40px !important;
    width: 270px !important;
    color: #343537 !important;
    text-align: center !important;
    font-family: Barlow !important;
    font-size: 26px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
}

header {
    /* height: 210px; */
    background: linear-gradient(155.77deg, #010465 16.22%, #4060F5 100%);
}

header a:hover {
    text-decoration: underline !important;
}

.loggin-header {
    margin: 60px 0 30px !important;
    height:auto !important;
    background: white !important;
}

header .row {
    max-width: 1920px;
    margin: 0 auto !important;
}

.header-mobile {
    width: 80% !important;
    height: auto !important;
    min-height: 200px !important;
    margin: 50px auto !important;
    border-radius: 20px !important;
}

.centered-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
}

.logo {
    padding: 67px 127px !important;
}

.logo-mobile {
    padding: 30px!important;
}

.pattern {
    padding: 0 127px !important;
}

.pattern-2 {
    padding: 0 127px !important;
}

.log-out-button {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 1000px !important;
    background: var(--gris, #EEF1FF) !important;
}

.log-out-button:hover {
    background: var(--gris, #c7cad6) !important;
}

.login-text {
    font-size: 14px !important;
    font-weight: 600 !important;
}

section.container {
    padding-top: 60px !important;
    max-width: 1920px;
    margin: 0 auto !important;
    position: relative;
    z-index: 1;
    background-color: white;
}

.user-name > a {
    color: inherit !important;
    padding-bottom: 2px;
}
.user-name > a:hover {
    color: inherit !important;
    padding-bottom: 2px;
    text-decoration: underline !important;
}

form {
    margin: 0 auto;
    max-width: 333px;
    text-align : center;
    margin-bottom: 20px !important;
}

.search-container {
    padding: 0 !important;
}

#search-form {
    display: flex !important;
    width: 100% !important;
    max-width: 560px !important;
    height: 60px !important;
    padding: 15px 20px !important;
    align-items: center !important;
    gap: 20px !important;
    flex-shrink: 0 !important;
}

#input-group-search {
    min-width: 100% !important;
}

#search-button:hover {
    cursor: pointer !important;
}

.btn-search {
    display: flex !important;
    padding: 10px 20px !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 10px 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 1000px !important;
    background-color: #EEF1FF !important;
    color: #4060F5 !important;
}

.btn-search:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn-search:hover {
    background-color: #d6d6d6b9 !important;
}

.btn-search-active {
   background-color: #4060F5 !important;
   color: #EEF1FF !important;
}

.btn-search-active:hover {
    background-color: #0025cc !important;
}

.form-control, .form-select {
    background-color: #EEF1FF !important;
    border: none !important;
}


input {
    color: #343537 !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
}




form input::placeholder,
select option:disabled {
    color: #B1C0D3 !important;
    font-size: 16px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

form .input-group {
    margin-bottom: 20px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
}

.border-radius {
    border-radius: 10px !important;
    padding: 18px 20px !important;
}

.no-border-radius {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    padding: 15px 20px !important;
}

.no-border-radius-append {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    padding: 15px 20px !important;
}

.no-border-radius-prepend {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    padding: 15px 20px !important;
}

form .input-group-prepend  {
    border-radius: 10px !important;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    background: #EEF1FF !important;
}

.input-group-prepend svg {
    color: #B1C0D3;
}

form .input-group-append  {
    border-radius: 10px !important;
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
    background: #EEF1FF !important;
}

form .input-group-prepend svg{
    width: 18px !important;
    height: 30px !important;
}

form .input-group-append svg{
    width: 30px !important;
    height: 30px !important;
}

form .input-group-text {
    padding: 15px 20px !important;
    background: transparent !important;
    border: none !important;
}

input:focus,
textarea:focus,
.uneditable-input:focus {
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: 0 none !important;
}

form .input-group-text.hide-password, form .input-group-text.closeIcon {
    padding: 15px 20px 15px 0px !important;
    cursor: pointer;
}


.close {
    margin:  8px !important;
}

form input {
    background: transparent !important;
    border: none !important;
}


.btn-invisible {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.btn-rounded {
    border-radius: 10px;
    border: 1px solid #4060F5;
    cursor: pointer;
    background-color: white;
}


/* Tous les boutons, sauf le bouton de fermeture de modal */
button.btn:not(.btn-close, .modal-footer button, .round-btn) {
    /* display: flex !important; */
    width: 333px !important;
    height: 50px !important;
    padding: 15px 22px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px !important;
    background: #4060F5 !important;
    color: #FFF !important;
    font-family: Barlow !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
}

/* Tous les boutons, sauf le bouton de fermeture de modal */
button.btn:hover:not(.btn-close) {
    background: rgb(1,4,101 ,0.8) !important;
}


.valid-feedback, .invalid-feedback {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
}


.input-border {
    background: #EEF1FF!important;
    display: flex;
    height: 80px;
    padding: 15px 30px;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    border-radius: 10px;
}

.input-border img {
    filter: drop-shadow(rgba(64, 96, 245, 0.20) 0 8px 16px);
}

.solid-border {
    border: 1px solid #4060F5;
}

.dashed-border {
    border: 1px dashed #4060F5;
}

.file-input-label {
    text-align: left !important;
}



input[type="checkbox"] {
    margin: 0;
    font: inherit;
    width: 1.15em;
    height: 1.15em;
    border-radius: 0.15em;
  }




.facture-list-container {
    border-radius: 30px 30px 0px 0px;
    background: var(--gris, #EEF1FF);
    min-height: 100%;
    padding: 33px 0px 33px 0px;
}

.facture {
    padding: 35px 0 !important;
    margin-bottom: 10px !important;
    width: 70% !important;
    border-radius: 16px !important;
}

.paid {
    border-radius: 1000px !important;
    background: #16C728;
    justify-content: center !important;
    align-items: center !important;
    color: #FFF;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    width: 45px !important;
    height: 20px !important;
}

.delayed {
    border-radius: 1000px !important;
    background: #F0BC37;
    justify-content: center !important;
    align-items: center !important;
    color: #FFF;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    width: 45px !important;
    height: 20px !important;
}

.proforma {
    border-radius: 1000px !important;
    background: #b537f0;
    justify-content: center !important;
    align-items: center !important;
    color: #FFF;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    width: 55px !important;
    height: 20px !important;
}

.pending {
    border-radius: 1000px !important;
    background: #BAC5FA;
    justify-content: center !important;
    align-items: center !important;
    color: #FFF;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    width: 50px !important;
    height: 20px !important;
}

.default {
    border-radius: 1000px !important;
    background: red;
    justify-content: center !important;
    align-items: center !important;
    color: #FFF;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    width: 50px !important;
    height: 20px !important;
}

.facture-name {
    color: var(--noir, #343537);
    font-family: Barlow;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.facture-number {
    color: var(--bleu, #4060F5);
    font-family: Barlow;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.facture-date {
    color: #B1C0D3;
    font-family: Barlow;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.facture-price {
    color: var(--noir, #343537);
    font-family: Barlow;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.owl-carousel.owl-loaded.owl-drag {
    padding : 0 !important;
    width: 100%;
    max-width: 522px !important;
    height: 50px !important;
}

.owl-stage {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
    align-items: center !important;
}

.owl-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
}



@media screen and (orientation: portrait) and (max-width: 767px) {
    section.container {
        padding-top: 0px !important;
    }
    .button-container {
        width: 100%;
        max-width: 100%; /* Pour éviter que le conteneur ne dépasse sa largeur maximale */
    }
    .center-horizontally {
        display: inline-block !important; /* Pour que le bouton occupe seulement la largeur dont il a besoin */
    }
    .bottom-fixed {
        position: fixed;
        bottom: 0;
        margin-bottom: 40px !important;
    }
}


.tns-item {
    height: 55px;
  }


/** Autocomplétion d'adresse **/
#addressDropdown {
    display: none;
}

#addressDropdown a {
    color: black;
    padding: 3px 6px;
    text-decoration: none;
    display: block;
    text-align: left;
}

#addressDropdown a:hover {
    background-color: #ddd;
    cursor: pointer;
}

#addressDropdown a.selected {
    background-color: #ddd;
}