/*@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
*/
*{
    font-family: 'Segoe UI' !important;
}

a.nav-link.dropdown-toggle:hover, 
a.nav-link.dropdown-toggle:focus, 
.navbar-dark .navbar-nav a.show, 
.navbar-dark .navbar-nav a.dropdown-toggle.show{
    background-color: #FFFFFF !important;
    color: black !important;
    text-decoration: auto !important;
}

img.user-logo,
img.logout-logo {
    height: 15px;
}

li.connect-list {
    display: flex;
    margin-left: 12px;
}

.connect-list > a {
    padding: 0 10px  !important;
}

ul.dropdown-menu.show {
    background-color: #F5F5F5 !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 1001;
    margin: 24px 0 !important;
}

#navbar .dropdown-menu{
    margin:8px 35px 8px 0 !important
  }

ul.dropdown-menu.show > li {
    padding: 6px 0px !important;
}

ul.dropdown-menu.show > li > a {
    font-size: 14px;
}

.dropdown-menu.dropdown-search.show {
    margin-right: 50px !important;
}

.input-group {
    border-bottom: 1px solid;
}

.form-search .btn {
    background-color: #FFFFFF;
    border: none;
}

#navbar .dropdown-search #q {
    min-width: 300px !important;
    font-size: 0.9rem;
    border: none;
}

p.info-text {
    font-size: 12px !important;
    margin: 0 !important;
}

a.dropdown-item:hover {
    background-color: transparent !important;
    text-decoration: none !important;
}


a.dropdown.check {
    text-decoration: underline;
}

span.fa.fa-search,
a.dropdown{
    font-size: 14px !important;
}

a.dropdown-toggle.nav-link {
    font-size: 14px !important;
    font-weight: 600 !important;
}

a#extranet-footer-logo > img,
a#extranet-header-logo > img {
    height: 50px;
}

.notifs {
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: center;
    padding: 0 10%;
}

img.notif-logo {
    height: 19px;
}

img.notif-close {
    height: 11px;
    cursor: pointer;
}

p.notif-text {
    font-size: 13px !important;
    width: 100%;
    padding-left: 15px;
    margin: 0;
}

img.home-img {
    width: 100%;
    height: 100%;
}

a.home-btn {
    display: block;
    padding: 10px 15px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin: -100px 0 0 75%;
    z-index: 1000;
    position: absolute;
    border-radius: 4px;
}

a.home-btn:hover {
    text-decoration: none !important;
    color: white;
}

.outils {
    padding: 50px 15% 0 10%;
}

.outils-title {
    font-weight: 700;
    font-size: 26px;
    margin: 0 !important;
    color: #130F26;

}
#outils-wrap{
    display: flex;
    flex-direction: column;
}

#outils{
    display:flex;
    flex-direction: row;
    gap:30px;
    margin-top: 30px;
}

.outils-rectangle {
    width: 146px;
    height: 80px; 
    background: white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid !important;

    border-radius: 3px;
    cursor: pointer; 
}

.outils-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: -25px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.outils-circle img {
    width: 25px; 
    height: 25px; 
}

.outils-rectangle-text {
    color:#130F26 ;
    font-size: 13px; 
    font-weight: 600;
    top: 10%;
    position: relative;
}
hr.underline-title {
    width: 130px;
    height: 2px;
    margin: 2px 0;
    opacity: 1;
    border: 2px solid !important;
}

#underline{
    width: 130px;
    height: 2px;
}

.outils-text {
    font-size: 17px !important;
    font-weight: 500;
    margin-top: 20px;
    color: #130F26;

}

button.btn.btn-primary:hover {
    background-color: transparent !important;
}

.derniers-articles {
    display: flex;
    margin-top: 24px;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
}

img.article-img {
    align-self: stretch;
    object-fit: cover;
    height: 126px;
    width: 224px;
}

.article-item {
    display: grid;
    width: 224px;
    box-sizing: border-box;
    cursor: pointer;
}

p.article-title {
    font-family: 'Segoe UI' !important;
    font-size: 15px;
    font-weight: 600;
    margin: 12px 0 5px 0 !important;
}

p.article-description {
    font-family: 'Segoe UI' !important;
    font-size: 14px;
    font-weight: 400;
}


.details-article {
    padding: 50px 10%;
    width: 70%;
    display:flex;
}

.attachments {
    width: 70%;
    padding: 0 10% 50px 10%;
}

a.attachment,a.attachment:hover {
    border: 1.5px solid;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    display: block;
    text-decoration: none !important;
}

.titre-article {
    color: #130F26;
    font-family: 'Segoe UI' !important;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    margin: 0 0 24px 0;
}

.sous-titre-article {
    color: #130F26;
    font-family: 'Segoe UI' !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    margin: 0 0 24px 0;
}

a.article-btn {
    display: inline-block;
    font-family: 'Segoe UI' !important;
    font-size: 15px;
    font-weight: 600;
    margin: 0 10px 10px 0;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1.5px solid;
    background: #FFF;
    text-decoration: none !important;
}

/* to delete */
.btn-article {
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    border: 1.5px solid;
    background: #FFF;
    width: fit-content;
}
/* to delete */
.text-btn {
    font-family: 'Segoe UI' !important;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.description-article {
    color: #130F26;
    font-family: 'Segoe UI' !important;
    font-size: 14px;
    font-weight: 400;
}   

.buttons-article {
    display: flex;
    gap: 8px;
    margin: 0 0 24px 0;
    flex-wrap: wrap;
}

img.logo-btn {
    width: 16px;
    height: 16px;
}

img.image-article {
    margin: 0 0 24px 0;
    width: 100%;
}

.file-ariane {
    height: 38px;
    align-content: center;
    padding-left: 10%;
}

a#extranet,
a#menu,
a#sousmenu,
a#detail {
    font: 15px 'Segoe UI' !important;
    color: #130F26;
    cursor: pointer;
}

a#detail,
.file-ariane{
    cursor:default;
}

a#extranet:hover,
a#menu:hover,
a#sousmenu:hover,
a.article-btn:hover,
a#detail{
    text-decoration: none !important;
}

.articles {
    padding: 36px 10% 3px 10%;
}

.article-ctnt {
    display: flex;
    border-radius: 2px;
    box-shadow: 0px 2px 5px 0px rgba(55, 55, 55, 0.15);
    cursor: pointer;
    height: 126px;
}


img.article-image {
    width: 224px;
    height: 126px;
    border-radius: 2px;
    object-fit: cover;
}

.article-infos {
    margin: 14px 16px;
}

p.article-titre {
    color: #130F26;
    font-family: 'Segoe UI';
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%; 
    letter-spacing: -0.285px;
    margin-bottom: 10px;
}

p.article-desc {
    color: #130F26;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; 
    letter-spacing: -0.266px;
    margin-bottom: 0;
}

.articles-found {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 23px;
}

.outils-menu {
    padding: 50px 10% 100px 10%;
}

@media screen and (max-width: 1024px) {
    .article-item {
        flex: 1 1 calc(50% - 24px); 
    }

    .derniers-articles {
        justify-content: center;
    }

    .home-btn {
        margin: 20px 0 0 50%;
        transform: translateX(-50%); 
    }
}

@media screen and (max-width: 768px) {
    .article-item {
        flex: 1 1 100%; 
    }

    .home-btn {
        margin: 20px auto 0 auto;
        left: 0;
        right: 0;
        transform: none; 
    }
    .contact-info {
        flex-direction: column !important;
    }

}
@media screen and (max-width: 1200px) {
    ul.links {
        flex-direction: column !important;
        padding: 0 !important;
        gap: 17px !important;
        width: -webkit-fill-available;
    }

    .menu.navbar {
        justify-content: left !important;
        box-shadow: 0 0px 0px rgb(255 255 255 / 30%) !important;
    }

    .links > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    a.dropdown.list::after {
        display: inline-block;
        margin-left: .255em;
        vertical-align: .255em;
        content: "";
        border-top: 0.2em solid;
        border-right: 0.2em solid transparent;
        border-bottom: 0;
        border-left: 0.2em solid transparent;
    }
}

.article-content{
    font-size: 15px;
    width: 60%;
}


.container.custom-container {
    padding: 0 10%;
    margin: 0;
    min-width: -webkit-fill-available;
}

a.dropdown-item.extranet {
    font-weight: 600;
}

.confirmation {
    padding: 70px 25% 0 10%;
}

p.confirmation-text {
    padding-top: 16px;
    color: #130F26;
    font-size: 17px;
    font-weight: 500;
}

p.litige-info {
    color: #5A6C93;
    font-size: 17px;
    font-weight: 600;
    margin: 30px 0;
}

a.btn-accueil {
    color: #003F89;
    border: 1px solid #003F89;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 4px;
}

a.btn-accueil:hover {
    text-decoration: none !important;
}

.confirmation-content {
    margin-bottom: 70px;
}

.outil-ticketing {
    padding: 70px 25% 70px 10%;
}



.field-label,
#NewAttachFileLabel {
    font-size: 15px;
    color: #130F26 !important;
    font-weight: 500;
    margin: 0 0 10px 0;
    background-color: #F6F8FB !important;
}

.outil-ticketing {
    background-color: #F6F8FB;
}

.contact-info {
    display: flex;
    margin-top: -40px;
}

.contact-tel,
.contact-mail,
.fournisseur,
.file-cell.cell {
    padding: 10px 28px 0 0;
    width: 100%;
}

p#nom-client,
#contact-tel,
#contact-mail,
#fournisseur {
    background-color: #C5D1DD;
    padding: 8px 10px;
    font-size: 15px;
    font-weight: 500;
    height: 40px;
}

#accountnumber,
input.query.form-control,
#aaf_nomcontactid_name,
#aaf_societeconcerneelitigeid_name,
#aaf_motiflitigeid_name,
#aaf_detailmotiflitigeniveau2_name,
#aaf_detailmotiflitigeniveau3id_name,
#aaf_codefournisseurid_name,
#aaf_montantdulitigettc,
#aaf_numfactureaatg,
.custom-button,
#aaf_datedefactureaatgconcernee_datepicker_description,
#UploadButton,
#aaf_motiflitigeautre,
button.btn.btn-default.clearlookupfield,
#aaf_telcontact,
#aaf_mailcontact,
#aaf_nomcontact,
#aaf_prenomcontact {
    background-color: #F3F6F9 !important;
    padding: 12px 10px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 0px;
    border: 1px solid #E4EBF6 !important;
    border-left: 0 !important;
    height: 40px;
    z-index: 0;
}

#aaf_societeconcerneelitigeid_label::after,
#aaf_nomcontactid_label::after,
#aaf_nomclientid_label::after,
#aaf_motiflitigeid_label::after,
#aaf_detailmotiflitigeniveau2_label::after,
#aaf_detailmotiflitigeniveau3id_label::after,
#aaf_codefournisseurid_label::after,
#aaf_montantdulitigettc_label::after,
#aaf_numfactureaatg_label::after,
#aaf_litigededuitdureglement_label::after,
#aaf_litigededuitdureglement_label::after,
#aaf_datedefactureaatgconcernee_label::after {
    color: #003F89 !important;
}

p#motif3-text {
    font-size: 14px;
    color: #7A86A1;
    font-weight: 500;
    margin: 10px 0 0 0;
}

.fa-search:before,
span.fa.fa-times:before,
.icon-calendar.fa.fa-calendar.iconBorder:before,
.fa.fa-chevron-left:before,
.fa.fa-chevron-right:before,
.fa.fa-arrow-up:before,
.fa.fa-check:before,
.fa.fa-info-circle:before,
.fa.fa-spinner.fa-spin:before {
    font-family: FontAwesome !important;

}

.compte-input {
    display: flex;
}

#search {
    width: 38px !important;
    border-left: 0 !important;
    height: 40px;
}


#fetchIcon,
.input-group-btn.align-top > button.btn.btn-default,
#search,
button.btn.btn-default.launchentitylookup, 
span.input-group-addon.btn {
    width: 40px;
    background-color: #F3F6F9 !important;
    padding: 11px 10px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 0px;
    height: 40px;
    border: 1px solid #E4EBF6; 
    border-right: 0 !important;
    cursor: pointer;
    z-index:0;
}

#UploadButton, 
#aaf_montantdulitigettc, 
#aaf_numfactureaatg, 
#aaf_motiflitigeautre,
#aaf_telcontact,
#aaf_mailcontact,
#aaf_nomcontact,
#aaf_prenomcontact {
    border-left: 1px solid #E4EBF6 !important;
}

#UploadButton:hover,
.btn.btn-default.clearlookupfield:hover {
    color: #130F26;
}

#attach {
    width: 16px;
}

#UploadButton {
    justify-content: left;
    width: 100% !important;
}

#description {
    background-color: #F3F6F9 !important;
    padding: 12px 10px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 0px;
    border: 1px solid #E4EBF6 !important;
    min-height: 80px;
}

#accountnumber:focus-visible,
.icon-calendar.fa.fa-calendar.iconBorder:focus-visible,
.btn.btn-default.launchentitylookup:focus-visible,
.btn.btn-default.clearlookupfield:focus-visible {
    outline: none;
}

.actions {
    border: 0 !important;
}

input#InsertButton , input#InsertButtonFake  {
    background-color: #FBAD18;
    color: #ffffff !important;
    border: 0;
    border-radius: 4px;
    padding: 15px 20px;
    font-size: 20px;
    font-weight: bold;
}


.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 25px;
    margin-bottom: 30px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: -2px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #707070;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 13px;
    border: 1px solid #707070;
    width: 40px;
    height: 25px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

input:checked + .slider {
    background-color: #003F89;
    border: 1px solid #003F89;
}


.modal-header>div#underline {
    position: relative;
    top: -15px;
    left: 17px;
}

button.btn.btn-default.clearlookupfield {
    display: none !important;
}

#accountnumber {
    width: 100%;
    margin-right: 28px;
}

.accountnumber {
    padding-top: 25px;
    width: 50%;
}

img#fetchAccount {
    width: 36px;
    height: 40px;
    border: 0 !important;
    padding: 12px 10px;
}

div#fetchIcon {
    padding: 0 !important;
    align-content: center;
}

.menu-checked {
    text-decoration: underline !important;
}

.image {
    width: 224px;
    height: 126px;
}