/* BODY */

body {
    background: #F0EFF0 0% 0% no-repeat padding-box;
    font: normal normal normal 14px/20px "Open Sans", sans-serif;
    letter-spacing: 0px;
    color: #1D2327;
    position: relative;
}

@media (max-width: 1440px) {

    .container.smaller{
        max-width: 940px;
    }
}


/* BODY */

/* HEADER - NAVBAR */
.navbar {
    padding: 0;
    background: #002D8A;
}

.navbar .navbar-brand {
    height: 46px;
    padding: 5px 0rem 5px 0.75rem;
}

.navbar.a {
    color: #ffffff;
}

.collapse.navbar-collapse {
    background: #1C469D;
    min-height: 46px;
}

.logo_panel {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    border-style: none;
    height: 36px;
    width: 161px;
}

.txt-logo {
    display: inline-block;
    padding: 5px 5px 5px 15px;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    position: relative;
    color: #fff;
    font-weight: 600;
    vertical-align: middle;
    border-left: 2px solid #2558bc;
    height: 26px;
    margin-left: 5px;
    margin-top: 0;
    margin-bottom: 0;
}

.txt-user {
    display: inline-block;
    margin-left: 1rem;
    vertical-align: middle;
    position: relative;
    color: #ffffff;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
}

.txt-user svg path{
    fill: #ffffff;
}

@media (max-width: 300px) {
    .navbar-brand {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .navbar-brand>a:hover {
        text-decoration: none;
    }

    .txt-logo {
        text-align: left;
        border: none;
        padding: 0;
        margin: 0;
    }
}

@media (min-width: 576px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
}

/* Header secondaire */

#header_secondaire{
    background: #fff;
    padding: 15px;
    width: 100%;
}

#header_secondaire a.retour{
    opacity: 0.5;
    vertical-align: middle;
    margin-right: 20px;
}

#header_secondaire .titre_support{
    font: normal normal bold 18px/30px "Open Sans", sans-serif;
    vertical-align: middle;

}

#header_secondaire .infos_ticket{
    text-align: center;
    font: normal normal normal 16px/30px "Open Sans", sans-serif;
}

#header_secondaire .infos_ticket > span:first-child{
    font: normal normal 600 16px/30px "Open Sans", sans-serif;
}

#header_secondaire .row > div:last-child{
    text-align: right;
    line-height: 30px;
}


main.content-main .box .box-content .etat_service .etat_categories_reseaux {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 11px 20px;
}

#header_secondaire #step_open_ticket{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#header_secondaire #step_open_ticket .step{
    flex: 0 0 auto;
    width: 100px;
    height: 60px;
    margin : -15px 0
}

#header_secondaire #step_open_ticket .step > div{
    height: 6px;
    background-color: #CCE7F5;
    border-radius: 5px;
    margin : 27px 0;
}

#header_secondaire #step_open_ticket .step.selected{
    cursor: pointer;
}

#header_secondaire #step_open_ticket .step.selected > div{
    background-color: #0088CC;

}

#header_secondaire #step_open_ticket .step.active > div{
    background-color: #0088CC;
    height: 8px;
    margin : 26px 0;
}

@media (max-width: 768px) {
    #header_secondaire #step_open_ticket .step {
        width: 70px;
    }
}

@media (max-width: 575px) {
    #header_secondaire {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #header_secondaire #step_open_ticket {
        gap : 12px;
    }

    #header_secondaire #step_open_ticket .step {
        width: 40px;
        height: 40px;
        margin: -5px 0;
    }

    #header_secondaire #step_open_ticket .step>div {
        height: 8px;
        margin: 16px 0;
    }

    #header_secondaire #step_open_ticket .step.active > div {
        height: 10px;
        margin: 15px 0;
    }
}

/* NAVBAR */

/* FOOTER */
div.footer {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

div.footer_inner {
    background: #1C469D;
    padding: 15px 0;
    color: #ffffff;
}

div.footer_wp {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

div.footer_inner_wp {
    background: #1C469D;
    padding: 15px 0;
    color: #ffffff;
}

@media (max-width: 575px) {
    div.footer_inner_wp {
        text-align: center;
    }
}

@media (max-width: 424px) {

    div.footer_inner_wp .col span:nth-child(1),
    div.footer_inner_wp .col span:nth-child(3){
        display: block;
        width: 100%;
    }

    div.footer_inner_wp .col span:nth-child(2){
        display: none;;
    }
}

/* FOOTER */

/* MAIN */

main.content-main{
    margin : 20px 0;
    width: 100%;
    position: relative;
    color : #464F57;
}

/* Block des boutons sur la gauche */

main.content-main .block-btn-nav{
    position : absolute;
    left : -70px;
    width : 50px;
}

main.content-main .block-btn-nav a{
    width: 50px;
    height: 45px;
    padding: 9px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    display: block;
}

main.content-main .block-btn-nav a:not(:last-child){
    margin-bottom : 10px;
}

main.content-main .block-btn-nav a.retour{
    padding: 6px 9px 9px;
}

main.content-main .block-btn-nav a.aide,
main.content-main .block-btn-nav a.youtube{
    padding: 7px 9px 9px;
}

main.content-main .block-btn-nav a img {
    width: 30px;
    opacity: 0.5;
}

@media (max-width: 1475px) and (min-width: 1400px),
       (max-width: 1295px) and (min-width: 1200px),
       (max-width: 1115px){
    main.content-main .block-btn-nav {
       display: none;
    }

    main.content-main .block-btn-nav a{
        display: inline-block;
        margin-bottom: 20px;
    }

    main.content-main .block-btn-nav a:not(:last-child) {
        margin-right: 10px;
    }
}

@media (max-width: 575px) {
    main.content-main .block-btn-nav {
        text-align: center;
    }
}

/* Bloc gris */

.bloc_gris {
    background: #F7F7F7 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    padding: 15px;
}

.bloc_gris .listing > div:not(:last-child){
    margin-bottom : 8px;
}

/* Box utilisée dans les pages */

main.content-main .box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    position: relative;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 10px;
    background: none;
    width: 100%;
}

main.content-main .box:not(:last-child){
    margin-bottom : 20px;
}

main.content-main .box .box-header{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    background: #1C469D;
    border-radius: 5px 5px 0px 0px;
    width: 100%;
    padding: 9px 20px;
    align-items: center;
    color: #ffffff;
    font: normal normal 600 16px/22px "Open Sans", sans-serif;
}

main.content-main .box .box-content{
    background-color: #ffffff;
    border-radius: 5px;
    padding: 20px;
    width: 100%;
    border: 1px solid #DFDFDF;
}

main.content-main .box .box-header+.box-content{
    border-top: none;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Box etat des services */

main.content-main .box .box-content .etat_service .etat_general > div:first-child{
    font: normal normal 600 16px/22px "Open Sans", sans-serif;
    margin-bottom : 5px;
}

main.content-main .box .box-content .etat_service .etat_general > div:first-child img{
    width: 20px;
    margin-right: 8px;
}

main.content-main .box .box-content .etat_service .etat_general>div:last-child {
    margin-left : 32px;
}

main.content-main .box .box-content .etat_service .etat_categories_reseaux {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 10px 20px;
}

main.content-main .box .box-content .etat_service .etat_categories_reseaux >div{
    flex: 0 0 auto;
    width: 110px;
}

main.content-main .box .box-content .etat_service .etat_categories_reseaux img {
    width: 15px;
    margin-right: 8px;
}

@media (max-width: 991px) {
    main.content-main .box .box-content .etat_service .etat_general{
        text-align: center;
        margin-bottom : 20px;
    }

    main.content-main .box .box-content .etat_service .etat_general>div,
    main.content-main .box .box-content .etat_service .etat_general>div:last-child {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 575px) {

    main.content-main .box .box-content .etat_service .etat_categories_reseaux {
        display: none;
    }
    main.content-main .box .box-content .etat_service .etat_general {
        margin-bottom: 0;
    }
}

/* Ouverture ticket */

.bloc_step_open_ticket{
    width: 100%;
    height: calc(100% + 40px);
    margin: -20px 0;
    position: absolute;
    display: none;
    padding : 20px 0;
}

.bloc_step_open_ticket .open_ticket:first-letter {
    text-transform: uppercase;
}

.bloc_step_open_ticket.active {
    display: block;
}

.bloc_step_open_ticket > div{
    background-color: #fff;
    padding : 30px;
    max-width: 700px;
    margin : 0 auto;
}

@media (max-width: 575px) {
    .bloc_step_open_ticket>div {
        background-color: #fff;
        padding: 15px;
    }
}

main.content-main .box .box-content .bloc_contact_support {
    display: flex; /* Active flexbox */
    flex-wrap: wrap; /* Permet aux blocs de passer à la ligne si nécessaire */
    width: 100%; /* Prend toute la largeur du conteneur parent */
    gap: 10px; /* Espace entre les blocs */
    box-sizing: border-box; /* Inclut le padding et la bordure dans les dimensions */
    align-items: stretch; /* Force tous les enfants à avoir la même hauteur */
}

main.content-main .box .box-content .bloc_contact_support .contact_support {
    flex: 1; /* Prend toute la largeur par défaut si un seul bloc */
    max-width: calc(50% - 5px); /* Ajuste la largeur pour inclure le gap */
    display: flex; /* Active flexbox interne pour aligner le contenu */
    align-items: center; /* Centre le contenu horizontalement */
    justify-content: center; /* Centre horizontalement */
    text-align: center;
    height: auto; /* Ajuste automatiquement selon le parent */
    padding: 15px; /* Ajoute de l'espace interne */
    border: 1px solid #ccc; /* Facultatif, pour visualiser les blocs */
    border-radius: 5px; /* Coins arrondis */
    background-color: #f9f9f9; /* Fond clair pour les blocs */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la taille */
    background: #F7F7F7 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    font: normal normal 600 14px/20px "Open Sans", sans-serif;
}

/* Si deux blocs existent, chaque bloc prend 50% de la largeur */
main.content-main .box .box-content .bloc_contact_support .contact_support:nth-child(1){
    flex: 0 0 calc(65% - 5px); /* Largeur ajustée pour tenir compte du gap */
    max-width: calc(65% - 5px); /* Empêche les dépassements */
    flex-direction: column; /* Permet un alignement vertical si nécessaire */
    gap: 10px;
    background: #d3e6f9 0% 0% no-repeat padding-box;
    border: 1px solid #3f8ff3; /* Facultatif, pour visualiser les blocs */
}

main.content-main .box .box-content .bloc_contact_support .contact_support:nth-child(2) {
    flex: 0 0 calc(35% - 5px); /* Largeur ajustée pour tenir compte du gap */
    max-width: calc(35% - 5px); /* Empêche les dépassements */
    flex-direction: column; /* Permet un alignement vertical si nécessaire */
    gap: 10px;
}

/* Si un seul bloc est présent, il prend toute la largeur */
main.content-main .box .box-content .bloc_contact_support .contact_support:only-child {
    flex: 0 0 100%; /* Fixe la largeur à 100% */
    max-width: 100%; /* Empêche le dépassement */
    flex-direction: row;
    background: #F7F7F7 0% 0% no-repeat padding-box;
    border: 1px solid #ccc; /* Facultatif, pour visualiser les blocs */
}

main.content-main .box .box-content .contact_support > div{
    display: flex;
    justify-content: center;
    align-items: center;
}

main.content-main .box .box-content .contact_support > span,
main.content-main .box .box-content .contact_support > div > span{
    margin: 0 20px
}

main.content-main .box .box-content .contact_support > div > a > *{
    vertical-align: middle;
}

main.content-main .box .box-content .contact_support>div >a>img{
    margin-right: 6px;
    width : 15px;
}

@media (max-width: 992px) {
    main.content-main .box .box-content .bloc_contact_support{
        max-width: 100%; /* Ajuste la largeur pour inclure le gap */
        flex-direction: column; /* Permet un alignement vertical si nécessaire */
        gap: 10px;
    }

    main.content-main .box .box-content .bloc_contact_support .contact_support:nth-child(1),
    main.content-main .box .box-content .bloc_contact_support .contact_support:nth-child(2) {
        flex: 0 0 100%; /* Fixe la largeur à 100% */
        max-width: 100%; /* Empêche le dépassement */
        flex-direction: row;
    }

    main.content-main .box .box-content .bloc_contact_support .contact_support:nth-child(1),
    main.content-main .box .box-content .bloc_contact_support .contact_support:nth-child(2),
    main.content-main .box .box-content .bloc_contact_support .contact_support:only-child {
        flex-direction: column; /* Permet un alignement vertical si nécessaire */
        gap: 10px;
        flex: 0 0 100%; /* Fixe la largeur à 100% */
        max-width: 100%; /* Empêche le dépassement */
    }
}

@media (max-width: 590px) {
    main.content-main .box .box-content .contact_support > div{
        flex-direction: column; /* Permet un alignement vertical si nécessaire */
        gap: 10px;
    }
}

main.content-main .box .box-content .contact_support .bloc_link_rappel{
    margin-top: 10px;
}

main.content-main .box .box-content .contact_support .bloc_link_rappel>div>a>img{
    margin-right: 6px;
    width : 15px;
}

/* Listing des tickets/contacts */

#bloc_list_ticket_historique{
    margin-top : 20px;
}

/* Historique / réponse d'un ticket */

#historique_ticket .bloc_ticket,
#modal_open_litige .bloc_ticket{
    font-size: 0;
    margin-bottom : 40px;
}

#historique_ticket #modal_open_litige .bloc_ticket{
    margin-bottom: 20px;
}

#historique_ticket .bloc_ticket .bloc_message,
#modal_open_litige .bloc_ticket .bloc_message{
    font-size : 14px;
    vertical-align: top;
    width: calc(100% - 90px);
    display: inline-block;
}

#historique_ticket .bloc_ticket .bloc_message .message,
#modal_open_litige .bloc_ticket .bloc_message .message {
    color: #464F57;
    padding: 20px;
}

#historique_ticket .bloc_ticket .bloc_avatar,
#modal_open_litige .bloc_ticket .bloc_avatar {
    vertical-align: top;
    width: 90px;
    display: inline-block;
}

#historique_ticket .bloc_ticket .bloc_avatar img,
#modal_open_litige .bloc_ticket .bloc_avatar img{
    width: 70px;
    border-radius: 50%;
}

#historique_ticket .bloc_ticket.client .bloc_avatar {
    text-align : right;
}

#historique_ticket .bloc_ticket .bloc_avatar img{
    border: 1px solid #1E489A;
}

#historique_ticket .bloc_ticket.agent .bloc_message .message,
#historique_ticket .bloc_ticket.agent .bloc_message .infos_ticket{
    margin-right:  18%;
}

#historique_ticket #modal_open_litige .bloc_ticket.agent .bloc_message .message{
    margin-right: 0;
}

#historique_ticket .bloc_ticket.client .bloc_message .message,
#historique_ticket .bloc_ticket.client .bloc_message .infos_ticket{
    margin-left: 18%;
}

#modal_open_litige .bloc_ticket.agent .bloc_message .message,
#historique_ticket .bloc_ticket.agent .bloc_message .message {
    border-radius: 5px 20px 20px 20px;
    background-color: #fff;
    border: 1px solid #1E489A !important;
}

#historique_ticket #modal_open_litige .bloc_ticket.agent .bloc_message .message{
    background-color: #F7F7F7;
}

#historique_ticket .bloc_ticket.client .bloc_message .message{
    border-radius: 20px 5px 20px 20px;
    background-color: #EDF2FC !important;
    color: #000;
    border: 1px solid #1E489A !important;
}

#historique_ticket .bloc_ticket .bloc_message .message .content-message,
#modal_open_litige .bloc_ticket .bloc_message .message .content-message{
    word-break: break-word;
}

#historique_ticket .bloc_ticket .bloc_message .infos_ticket{
    font-size: 0;
    margin-top: 5px;
}

#historique_ticket .bloc_ticket .bloc_message .infos_ticket .auteur {
    font-size: 14px;
    width : calc(100% - 130px);
    vertical-align: top;
    display: inline-block;
}

#historique_ticket .bloc_ticket .bloc_message .infos_ticket .date {
    font-size: 14px;
    width: 130px;
    vertical-align: top;
    opacity: 0.6;
    display: inline-block;
    text-align: right;
}

#historique_ticket .bloc_ticket .nb_pj img,
#historique_ticket .bloc_ticket .nb_pj span{
    vertical-align: middle;
}

#historique_ticket .bloc_ticket .nb_pj img{
    margin-right: 2px;
}

#historique_ticket .bloc_ticket .nb_pj span {
    font: normal normal 600 14px/20px "Open Sans", sans-serif;
}

#historique_ticket .bloc_ticket .bloc_pj{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    gap: 10px;
}

#historique_ticket .bloc_ticket .bloc_pj .pj{
    flex: 0 0 auto;
    width: 205px;
}

#historique_ticket .bloc_ticket .bloc_pj .pj>a{
    color: #464F57 !important;
    text-decoration: none;
    transition: all 400ms;
}

#historique_ticket .bloc_ticket .bloc_pj .pj>a>div>div:first-child>div.voir_plus {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: none;
}

#historique_ticket .bloc_ticket .bloc_pj .pj>a>div>div:first-child>div.voir_plus img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding :0
}

#historique_ticket .bloc_ticket .bloc_pj .pj>a:hover>div>div:first-child>div.voir_plus{
    display: block;
}

#historique_ticket .bloc_ticket .bloc_pj .pj>a>div {
    height: 120px;
    border: 1px solid #1E489A;
    background-color: #F0EFF0;
    border-radius: 5px;
}

#historique_ticket .bloc_ticket .bloc_pj .pj>a>div>div:first-child {
    height: 90px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    border-bottom: 1px solid #1E489A;
}

#historique_ticket .bloc_ticket .bloc_pj .pj>a>div>div:first-child img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#historique_ticket .bloc_ticket .bloc_pj .pj>a>div>div:first-child img.type_img{
    border-radius: 5px;
}

#historique_ticket .bloc_ticket .bloc_pj .pj>a>div>div:last-child {
    background-color: #fff;
    padding: 4px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#historique_ticket .bloc_ticket .bloc_note{
    text-align: right;
}

#historique_ticket .bloc_ticket .bloc_note hr{
    margin: 20px 0;
}

#historique_ticket .bloc_ticket .bloc_note img{
    margin-right: 4px;
}

#historique_ticket .bloc_ticket .bloc_note img,
#historique_ticket .bloc_ticket .bloc_note span{
    vertical-align: middle;
}


@media (max-width: 767px) {
    #historique_ticket .bloc_ticket .bloc_pj .pj{
        width: calc(50% - 5px);
    }

    #historique_ticket .bloc_ticket.client .bloc_message .message,
    #historique_ticket .bloc_ticket.client .bloc_message .infos_ticket {
        margin-left: 10%;
    }

    #historique_ticket .bloc_ticket.agent .bloc_message .message,
    #historique_ticket .bloc_ticket.agent .bloc_message .infos_ticket{
        margin-right: 10%;
    }

    #historique_ticket #modal_open_litige .bloc_ticket.agent .bloc_message .message{
        margin-right: 0
    }

}

@media (max-width: 575px) {

    #historique_ticket .bloc_ticket .bloc_message{
        width: calc(100% - 60px);
    }

    #historique_ticket .bloc_ticket .bloc_avatar{
        width: 60px;
    }

    #historique_ticket .bloc_ticket .bloc_avatar img{
        width: 50px;
    }

    #historique_ticket .bloc_ticket {
        margin-bottom: 20px;
    }

    #historique_ticket .bloc_ticket.client .bloc_message .message,
    #historique_ticket .bloc_ticket.client .bloc_message .infos_ticket {
        margin-left: 0%;
    }

    #historique_ticket .bloc_ticket.agent .bloc_message .message,
    #historique_ticket .bloc_ticket.agent .bloc_message .infos_ticket {
        margin-right: 0%;
    }

    #historique_ticket .bloc_ticket .bloc_pj .pj>a>div{
        height: 90px;
    }

    #historique_ticket .bloc_ticket .bloc_pj .pj>a>div>div:first-child{
        height: 60px;
    }

    #historique_ticket .bloc_ticket .bloc_pj .pj>a>div>div:first-child img.type_other{
        height: 40px;
    }

    #historique_ticket #modal_open_litige .bloc_ticket .bloc_message {
        width: 100%
    }

    #historique_ticket #modal_open_litige .bloc_ticket .bloc_avatar{
        display: none;
    }
}

@media (max-width: 375px) {

    #historique_ticket #modal_open_litige .bloc_ticket .bloc_message,
    #historique_ticket .bloc_ticket .bloc_message,
    #historique_ticket .bloc_ticket .bloc_pj .pj{
        width: 100%
    }

    #historique_ticket #modal_open_litige .bloc_ticket .bloc_avatar,
    #historique_ticket .bloc_ticket .bloc_avatar {
        display: none;
    }
}

/* Datatable */

div.dt-container div.dt-length select{
    display: inline-block;
    font-family: open sans,sans-serif;
    font-weight: 600;
    color: #464f57;
    padding: 12px 51px 12px 12px!important;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #ccc!important;
    border-radius: 5px!important;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(/public/img/chevron_bas.svg),linear-gradient(to left,#F7F7F7 40px,#fff 1px,#fff 100%);
    background-repeat: no-repeat,repeat;
    background-position: right 0.95em top 52%,0 0;
    background-size: 10px auto,100%;
    height: 40px!important;
    font: normal normal 600 14px/14px "Open Sans", sans-serif!important;
    margin-right: 10px;
}

div.dt-container .form-select:focus,
div.dt-container .form-control:focus,
.page-link:focus{
    border: 1px solid #ccc!important;
    box-shadow : none ! important;
}

div.dt-container div.dt-search input{
    background-image: url(/public/img/rechercher.svg);
    background-position: top 50% right 10px;
    background-size: 14px auto,100%;
    background-repeat: no-repeat;
    background-color: #fff!important;
    border: 1px solid #ccc!important;
    border-radius: 5px;
    height: 40px!important;
    font-size: 14px;
    line-height: 14px;
    padding: 0 30px 0 10px!important;
    margin-bottom: 0!important;
    margin-left: 0;
    width: 211px;
}

div.dt-container div.dt-search input::placeholder{
    color: rgba(70, 79, 87, 0.6);
}

div.dt-container div.dt-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    margin-left: .4em;
    margin-right: 0em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%28777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    cursor: pointer;
}

.table>:not(caption)>*>*{
    color: #464F57;
}

table.table.dataTable{
    width: 100% !important;
}

table.dataTable thead>tr>th.dt-orderable-asc:hover,
table.dataTable thead>tr>th.dt-orderable-desc:hover,
table.dataTable thead>tr>td.dt-orderable-asc:hover,
table.dataTable thead>tr>td.dt-orderable-desc:hover{
    outline: none;
}

table.dataTable thead>tr>th {
    position: relative;
    width: auto;
    white-space: nowrap;
    vertical-align: middle;
    padding: 20px 30px 20px 15px!important;
    border-bottom: 2px solid #1c469d;
    font: normal normal 600 14px/20px "Open Sans", sans-serif !important;
}

table.dataTable thead>tr>th.dt-orderable-asc:after,
table.dataTable thead>tr>th.dt-orderable-desc:after{
    position: absolute;
    content: '';
    background-repeat: no-repeat;
    width: 11px;
    height: 17px;
    bottom: calc(50% - 9px);
    display: inline-block;
    margin-left: 20px;
    background-image: url(/public/img/chevron_haut_gris_bas_gris.svg)!important;
}

table.dataTable thead>tr>th.dt-orderable-asc.dt-ordering-asc:after{
    background-image: url(/public/img/chevron_haut_bleu_bas_gris.svg)!important;
}

table.dataTable thead>tr>th.dt-orderable-desc.dt-ordering-desc:after{
    background-image: url(/public/img/chevron_haut_gris_bas_bleu.svg)!important;
}

table.dataTable thead>tr>th .dt-column-order{
    display: none;
}

table.dataTable thead>tr>th.dt-orderable-none{
    padding-right : 15px !important;
}

table.table.dataTable>tbody>tr>* {
    transition: all 400ms;
}

table.table.dataTable>tbody>tr:hover>* {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.03);
}

table.dataTable tbody tr td {
    padding: 15px!important;
    border-top: 1px solid #ddd;
    vertical-align: middle;
}
/*
table.dataTable tbody tr td:first-child{
    padding-left: 0!important;
}
table.dataTable tbody tr td:last-child{
    padding-right: 0!important;
}*/

table.dataTable tbody tr td svg.info{
    width : 14px;
    height: 14px;
    vertical-align: middle;
    margin-left: 4px;
}

table.dataTable tbody tr td svg.info path{
    transition: all 400ms;
    fill : #858b92;
}

table.dataTable tbody tr td svg.info:hover path{
    fill : #37424F;
}

div.dt-container div.dt-paging ul.pagination,
div.dt-container div.dt-paging ul.pagination *{
    font: normal normal normal 14px/20px "Open Sans", sans-serif !important;
    color: #464F57;
}

div.dt-container div.dt-paging ul.pagination .page-link{
    border-color: #CCCCCC;
    padding-top: 8px;
    padding-bottom: 8px;
}

div.dt-container div.dt-paging ul.pagination .active>.page-link,
div.dt-container div.dt-paging ul.pagination .page-link.active,
div.dt-container div.dt-paging ul.pagination .page-link:hover{
    background-color: #f7f7f7;
    color :#464F57;
}

div.dt-container div.dt-paging ul.pagination .active>.page-link:not(.next):not(.previous),
div.dt-container div.dt-paging ul.pagination .page-link:not(.next):not(.previous).active,
div.dt-container div.dt-paging ul.pagination .page-link:not(.next):not(.previous),
div.dt-container div.dt-paging ul.pagination .page-link:not(.next):not(.previous):hover{
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

div.dt-container div.dt-paging ul.pagination .page-link.next{
    border-left-color: transparent !important;
}

div.dt-container div.dt-paging ul.pagination .page-link.previous{
    border-right-color: transparent !important;
}

div.dt-container div.dt-paging ul.pagination .disabled>.page-link,
div.dt-container div.dt-paging ul.pagination .page-link.disabled{
    background-color: #fff;
    color :#a9a9a9;
}

div.dt-container div.dt-paging ul.pagination .page-link.next:after {
    content: '';
    background-repeat: no-repeat;
    width: 6px;
    height: 10px;
    display: inline-block;
    margin-left: 10px;
    background-image: url(/public/img/chevron_next.svg)!important;
}

div.dt-container div.dt-paging ul.pagination .disabled>.page-link.next:after,
div.dt-container div.dt-paging ul.pagination .page-link.disabled.next:after{
    background-image: url(/public/img/chevron_next_disabled.svg)!important;
}

div.dt-container div.dt-paging ul.pagination .page-link.previous:before {
    content: '';
    background-repeat: no-repeat;
    width: 6px;
    height: 10px;
    display: inline-block;
    transform: rotate(180deg);
    margin-right: 10px;
    background-image: url(/public/img/chevron_next.svg)!important;
}

div.dt-container div.dt-paging ul.pagination .disabled>.page-link.previous:before,
div.dt-container div.dt-paging ul.pagination .page-link.disabled.previous:before{
    background-image: url(/public/img/chevron_next_disabled.svg)!important;
    transform: rotate(180deg);
}

/* Config spécifique table */

table#list_ticket_historique tbody tr td:nth-child(2) {
    word-break: break-all;
    max-width: 20%;
}

table#list_ticket_historique tbody tr td.categorie > *{
    vertical-align: middle;
}

table#list_ticket_historique tbody tr td.categorie> img{
    height: 20px;
    margin-right: 3px;
}

table#list_ticket_historique .label-traitement{
    background-color: #0088cc;
    color: #fff;
}

/* select2 */

.select2-container {
    max-width: 100% !important;
}

.select2-container--default .select2-selection--single{
    border-color: #D5D5D5;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{
    border-color: #1967D2;
    box-shadow: 3px 3px 15px #002d8a40;
}

.bloc_tel .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.bloc_tel .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-color: #D5D5D5;
    box-shadow: none;
}

.select2-container .select2-selection--single{
    height: 40px;
}

.select2-container .select2-selection--single .select2-selection__rendered{
    font: normal normal normal 14px/20px "Open Sans", sans-serif !important;
    padding: 9px 30px 9px 15px
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 38px;
}

.select2-container.select2_categorie,
.select2-container.select2_priorite{
    width: 640px !important;
}

.select2-container.select2_categorie .select2-selection--single {
    height: 60px;
}

@media (max-width: 768px) {
    .select2-container.select2_priorite .select2-selection--single ,
    .select2-container.select2_categorie .select2-selection--single {
        width : 100% !important
    }
}

.select2-container--default.select2_categorie .select2-selection--single .select2-selection__arrow{
    height: 58px;
}

.select2-selection .select2-selection--single{
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    background-image: url(/public/img/chevron_bas.svg), linear-gradient(to left, transparent 40px, transparent 1px, transparent 100%);
    background-repeat: no-repeat;
    background-position: right 10px top 52%, 0 0;
    background-size: 12px 6px;
    width: 30px;
    outline: none;
    background-color: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-dropdown{
    border-color: #1967D2;
    box-shadow: 3px 3px 15px #002d8a40;
}

.select2-search--dropdown{
    padding: 10px 15px;
}

.select2-container--default .select2-search--dropdown .select2-search__field{
    border-color: #D5D5D5;
    color: #464F57;
    font: normal normal normal 14px/20px "Open Sans", sans-serif !important;
    padding: 5px 38px 5px 12px;
    border-radius: 5px;
    background-image: url(/public/img/rechercher.svg);
    background-position: top 50% right 12px;
    background-size: 14px auto, 100%;
    background-repeat: no-repeat;
    background-color: #fff !important;
}

.select2-container--default.select2_categorie .select2-selection--single .select2-selection__placeholder{
    margin-top: 9px;
    display: block;
}

.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(70, 79, 87, 0.6);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus{
    border-color: #D5D5D5;
    outline: none;
}

.select2-container--default .select2-results__group{
    color: #464F57;
    font: normal normal 600 14px/20px "Open Sans", sans-serif !important;
    background-color: #F1F1F1;
    padding: 10px 15px 10px 37px;
}

.select2-container--default .select2-results__option[aria-label="Domaine(s) et Hébergement(s)"] .select2-results__group{
    background-image: url(/public/img/hebergement_domaines.svg);
    background-position: top 50% left 15px;
    background-size: 15px auto, 100%;
    background-repeat: no-repeat;
}

.select2-container--default .select2-results__option[aria-label="Serveur(s)"] .select2-results__group{
    background-image: url(/public/img/serveur_vps.svg);
    background-position: top 50% left 15px;
    background-size: 15px auto, 100%;
    background-repeat: no-repeat;
}

.select2-container--default .select2-results__option[aria-label="Stockage(s) en ligne"] .select2-results__group{
    background-image: url(/public/img/stockage_en_ligne.svg);
    background-position: top 50% left 15px;
    background-size: 15px auto, 100%;
    background-repeat: no-repeat;
}

.select2-container--default .select2-results__option[aria-label="Autre(s) service(s)"] .select2-results__group{
    background-image: url(/public/img/autres_services.svg);
    background-position: top 50% left 15px;
    background-size: 15px auto, 100%;
    background-repeat: no-repeat;
}

.select2-container--default .select2-results__option[aria-label="Elevé (Payant - passez en priorité) - Réponse en 30mn ouvrées en moyenne"] .select2-results__group {
    background-image: url(/public/img/prioritaire.svg);
    background-position: top 50% left 15px;
    background-size: 15px auto, 100%;
    background-repeat: no-repeat;
}

.select2-container--default .select2-results__option[aria-label="Boîte mail"] .select2-results__group{
    background-image: url(/public/img/mail.svg);
    background-position: top 50% left 15px;
    background-size: 15px auto, 100%;
    background-repeat: no-repeat;
}

.select2-container--default .select2-results__option[aria-label="Redirection simple"] .select2-results__group{
    background-image: url(/public/img/mail-redirection.svg);
    background-position: top 50% left 15px;
    background-size: 15px auto, 100%;
    background-repeat: no-repeat;
}

.select2-container--default .select2-results__option[aria-label="Système PHP"] .select2-results__group{
    background-image: url(/public/img/mail-php.svg);
    background-position: top 50% left 15px;
    background-size: 15px auto, 100%;
    background-repeat: no-repeat;
}

.select2-container--default .select2-results__option[aria-label="Domaine"] .select2-results__group{
    background-image: url(/public/img/mail-domaine.svg);
    background-position: top 50% left 15px;
    background-size: 15px auto, 100%;
    background-repeat: no-repeat;
}

.select2-container--default .select2-results>.select2-results__options#select2-priorite_ouverture-results{
    max-height: 340px;
}

.select2-results__option{
    padding : 10px 15px;
    color: #464F57;
    font: normal normal normal 14px/20px "Open Sans", sans-serif !important;
    border-top: 1px solid #D5D5D5;
}

.select2-container--default .select2-results>.select2-results__options#select2-id_categorie-results {
    max-height: 340px;
}

/* style des templates des select2 */

.select2-selection__rendered .titre,
.select2-results__option .titre{
    font: normal normal 600 14px/20px "Open Sans", sans-serif !important;
    margin-bottom : 4px;
}

.select2-results__option .ml-optgroup{
    margin-left: 20px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] .indicatif>span:last-child {
    background-color: #deecff;
    /* border-color: #ffffff; */
    color: #464F57;
}

.select2-selection__rendered .img_flag,
.select2-results__option .img_flag{
    max-width: 25px;
    max-height: 19px;
    border: 1px solid #f0f0f0
}

.select2-results__option .img_flag,
.select2-results__option .indicatif{
    vertical-align: middle;
}

.select2-results__option .indicatif > span:last-child{
    color: #888;
    margin-left: 10px;
}

.select2-selection__rendered .indicatif{
    display: none;
    margin-left: 0
}

.select2-selection__rendered .img_flag,
.select2-selection__rendered .indicatif {
    vertical-align: top;
}

.select2-results__option .indicatif{
    margin-left: 5px;
}

.select2-container--default #select2-indicatif_tel-results .select2-results__group{
    padding-left: 20px;
}

.select2-container--default.select2_categorie .select2-selection__rendered{
    width: 100%;
}

.select2-container--default.select2_categorie .select2-selection__rendered .bloc_infos,
.select2-results__option .bloc_infos{
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 40px);
    padding-left: 15px;
}

.select2-container--default.select2_categorie .select2-selection__rendered .bloc_infos .titre,
.select2-results__option .bloc_infos .titre{
    margin-bottom : 0
}

.select2-container--default.select2_categorie .select2-selection__rendered .bloc_image,
.select2-results__option .bloc_image{
    display: inline-block;
    width: 40px;
    vertical-align: top;
}


.select2-container--default.select2_priorite .select2-selection__rendered .bloc_infos .titre,
.select2_priorite .select2-results__option .titre{
    font: normal normal normal 14px/20px "Open Sans", sans-serif !important;
    margin-bottom : 0;
}

.select2-container--default.select2_priorite .select2-selection__rendered .bloc_infos .titre.with_description,
.select2_priorite .select2-results__option .titre.with_description{
    font: normal normal 600 14px/20px "Open Sans", sans-serif !important;
    margin-bottom : 4px;
}

.select2_priorite .select2-results__option .description{
    font: normal normal normal 13px/20px "Open Sans", sans-serif !important;
}

.select2-container--default.select2_priorite .select2-selection__rendered .bloc_image,
.select2_priorite .select2-results__option .bloc_image{
    display: inline-block;
    width: 30px;
    vertical-align: top;
}

.select2-container--default.select2_priorite .select2-selection__rendered .bloc_image{
    height: 20px;
    margin-right: 6px;
    margin-left: -6px;
}

.select2-container--default.select2_priorite .select2-selection__rendered .bloc_image img{
    vertical-align: top;
    max-height: 100%;
}

.select2-container--default.select2_priorite .select2-selection__rendered .bloc_infos,
.select2_priorite  .select2-results__option .bloc_infos{
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 30px);
}

.select2_priorite .select2-results__option .bloc_infos.no_description{
    position: relative;
    height: 30px;
}

.select2_priorite .select2-results__option .bloc_image.no_description {
        display: inline-block;
        width: 30px;
        vertical-align: top;
        height: 30px;
        position: relative;
}

.select2-container--default.select2_priorite .select2-selection__rendered .bloc_infos.no_description .titre,
.select2_priorite .select2-results__option .bloc_infos.no_description .titre,
.select2_priorite .select2-results__option .bloc_image.no_description img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 575px) {

    .select2-container--default.select2_categorie .select2-selection__rendered .bloc_infos,
    .select2-results__option .bloc_infos,
    .select2-results__option .bloc_image{
        position: relative;
        height: 40px;
    }

    .select2_priorite .select2-results__option .bloc_infos,
    .select2_priorite .select2-results__option .bloc_image{
        height: 30px;
    }

    .select2-container--default.select2_categorie .select2-selection__rendered .bloc_infos .titre,
    .select2-results__option .bloc_infos .titre,
    .select2-results__option .bloc_image img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .select2-container--default.select2_categorie .select2-selection__rendered .bloc_infos .description,
    .select2-results__option .bloc_infos .description {
        display: none;
    }
}


/* Select2 note */

.select2-container--default .select2-results>.select2-results__options[id^="select2-note"] {
    max-height: 215px;
}

.select2-container--default.select2_note .select2-selection__rendered {
    font: normal normal normal 14px/14px "Open Sans", sans-serif !important;
}

.select2-container--default.select2_note .select2-selection__rendered .img_note,
.select2-results__option .img_note {
    height: 14px;
    vertical-align: middle;
}

.select2-container--default.select2_note .select2-selection__rendered .option_note,
.select2-results__option .option_note {
    margin-left: 5px;
    vertical-align: middle;
}


/* Formulaire */

label.form-label{
    font: normal normal 600 16px/22px "Open Sans", sans-serif !important;
    margin-bottom : 8px;
}

form#notation_ticket label.form-label {
    font: normal normal 600 14px/20px "Open Sans", sans-serif !important;
    margin-bottom: 5px;
}

input.form-control,
textarea.form-control {
    background-color: #fff;
    border: 1px solid #D5D5D5;
    border-radius: 5px;
    font: normal normal normal 14px/20px "Open Sans", sans-serif !important;
    padding : 15px;
 }

input.form-control::placeholder,
textarea.form-control::placeholder {
    color: rgba(70, 79, 87, 0.6);
}

input.form-control:focus,
textarea.form-control:focus{
    border-color: #1967D2 !important;
    box-shadow: 3px 3px 15px #002d8a40;
}

input.form-control.no_focus:focus,
textarea.form-control.no_focus:focus{
    border-color: #D5D5D5 !important;
    box-shadow: none;
}

textarea.form-control{
    height: 200px;
}

@media (max-width: 575px) {
    textarea.form-control {
        height: 150px;
    }
}

form#notation_ticket textarea.form-control{
    height: 80px;
}

@media (max-width: 575px) {
    form#notation_ticket textarea.form-control {
        height: 60px;
    }
}

form#open_litige textarea.form-control{
    height: 130px;
}

@media (max-width: 575px) {
    form#open_litige textarea.form-control {
        height: 100px;
    }
}

.bloc_message{
    position :relative;
}

.compteur_caractere{
    margin-top: 10px;
    font-style : italic;
}

.compteur_caractere .nb_caractere{
    font-weight: 600;
}

@media (max-width: 575px) {

    .compteur_caractere{
        margin-top:0;
    }

    .compteur_caractere >span{
        display: block;
        float: none !important;
    }

    .compteur_caractere .float-start{
        font-size: 12px;
    }

    .compteur_caractere .float-end{
        position: absolute;
        top: 3px;
        right: 0px;
    }
}

@media (max-width: 575px) {
    iframe#upload_file_lws {
        height: 150px !important;
    }
}

div.bloc_btn{
    text-align: center;
    margin : -5px;
}

div.bloc_btn .btn{
    margin : 5px;
}

div.bloc_tel{
    font-size: 0px;
    width: 100%;
}

div.bloc_tel > div{
    font: normal normal normal 14px/20px "Open Sans", sans-serif !important;
    display: inline-block;
    vertical-align: top;
}

div.bloc_tel>div:first-child{
    width: 72px;
}

div.bloc_tel>div:first-child .select2-container{
    width: 100% !important;
}

div.bloc_tel>div:first-child .select2-container--default .select2-selection--single{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

div.bloc_tel>div:last-child {
    width : calc(100% - 72px);
    position: relative;
}

div.bloc_tel>div:last-child span{
    position: absolute;
    top: 10px;
    width: 45px;
    text-align: center;
}

div.bloc_tel>div:last-child input{
    padding: 9px 15px 8px 45px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0px;
    border-left: 0;
}

div.help{
    margin-top: 5px;
    font-style: italic;
    font-size: 13px;
}

@media (max-width: 575px) {
    #add_reponse_ticket .bloc_btn .float-start,
    #add_reponse_ticket .bloc_btn .float-end{
       float : none !important;
    }

    #add_reponse_ticket .bloc_btn .float-start .btn:last-child::first-letter{
        text-transform: capitalize;
    }

    #bloc_select_mode_paiement .float-start,
    #bloc_select_mode_paiement .float-end{
        float: none!important;
        display: block;
        margin-bottom : 10px;
    }

}

/* Widgets */

div[id^="widget"]{
    position : relative;
}

#widget_alertes{
    width : 100%;
}

/* Notification */

.notification{
    color: #1c469d;
    background-color: #d7e3f5;
    border: 1px solid #1c469d;
    border-radius: 5px;
    padding: 10px 10px 10px 60px;
    position: relative;
    margin-bottom: 20px;
}

.notification:before{
    background: #7197e4;
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 45px;
    height: 100%;
    background-image: url(/public/img/i_info_blanc.svg)!important;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 20px 20px;
    display: block;
    border-radius: 0;
}

.notification svg.close_notif{
    position :absolute;
    top: 10px;
    right: 10px;
    cursor : pointer;
}

.notification svg.close_notif polygon,
.notification svg.close_notif rect{
    fill : #1c469d;
}

.notification.success{
    color: #0b7f0b;
    background: #dff2d5;
    border-color: #393;
}

.notification.success:before{
    background-color: #393;
    background-image: url(/public/img/check_info.svg)!important;
}

.notification.success svg.close_notif polygon,
.notification.success svg.close_notif rect{
    fill : #393;
}

.notification.warning{
    color: #97400e;
    background: #f5e6d7;
    border-color: #f29035;
}

.notification.warning:before{
    background-color: #f29035;
    background-image: url(/public/img/erreur_info.svg)!important;
}

.notification.warning svg.close_notif polygon,
.notification.warning svg.close_notif rect{
    fill : #f29035;
}

.notification.danger{
    color: #97170e;
    background: #f5d7d7;
    border-color: #f24235;
}

.notification.danger:before{
    background-color: #f24235;
    background-image: url(/public/img/erreur_info.svg)!important;
}

.notification.danger svg.close_notif polygon,
.notification.danger svg.close_notif rect{
    fill : #f24235;
}

/* page erreur */

.page_erreur img{
    width: 500px;
    max-width: calc(100% - 40px);
    margin: 0 20px 20px 20px;
}

.page_erreur h2{
    margin : 0 0 10px;
    font: normal normal bold 18px/28px "Open Sans", sans-serif !important;
}

/* Listing mode de règlement */

#bloc_select_mode_paiement .listing_mode_paiement .mb-3{
    position: relative;
    min-height: 80px;
}

#bloc_select_mode_paiement .listing_mode_paiement .listing > div:not(.notification):not(.bloc_chargement){
    display: inline-block;
    vertical-align: top;
    margin-bottom: 10px;
    border: 1px solid #D5D5D5;
    background-color: #fff;
    box-shadow: none;
    transition: all 400ms;
    cursor: pointer;
    padding : 10px 15px;
    border-radius: 5px;
}

#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement):hover,
#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement).selected{
    border-color: #0088CC;
    background-color: #fff;
    -webkit-box-shadow: inset 0px 0px 0px 1px #0088CC;
    -moz-box-shadow: inset 0px 0px 0px 1px #0088CC;
    box-shadow: inset 0px 0px 0px 1px #0088CC;
}

#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement):not(:last-child){
    margin-right: 6px;
}

#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement) img{
    height: 20px;
    vertical-align: middle;
    margin-right : 8px;
}

#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement)>div{
    height: 18px;
    width: 18px;
    padding: 4px;
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block;
    border: 1px solid #919296;
    background-color: transparent;
    border-radius: 50%;
    transition: all 400ms;
}

#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement)>div>div{
    height: 8px;
    width: 8px;
    vertical-align: middle;
    background-color: transparent;
    border-radius: 50%;
    transition: all 400ms;
}

#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement):hover>div,
#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement).selected>div{
    background-color: #fff;
    border: 1px solid #0088CC;
    -webkit-box-shadow: inset 0px 0px 0px 1px #0088CC;
    -moz-box-shadow: inset 0px 0px 0px 1px #0088CC;
    box-shadow: inset 0px 0px 0px 1px #0088CC;
}

#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement):hover>div>div,
#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement).selected>div>div{
    background-color: #0088CC;
}

#bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement) span.carte_numero {
    vertical-align: middle;
}

@media (max-width: 575px) {
    #bloc_select_mode_paiement .listing_mode_paiement .listing>div:not(.notification):not(.bloc_chargement){
        display: block;
        margin: 0 auto 10px auto !important;
        text-align: center;
    }
}

/* Conditions particulieres infogérance */

#bloc_conditions_infogerance .content .bloc_checkbox{
    background-color: #fff;
    border: 1px solid #D5D5D5;
    border-radius: 5px;
    font-size : 0;
    display: table;
    width: 100%;
}

#bloc_conditions_infogerance .content .bloc_checkbox > div{
    display: table-cell;
    vertical-align: top;
    font: normal normal normal 14px/20px "Open Sans", sans-serif !important;
    padding: 5px;
}

#bloc_conditions_infogerance .content .bloc_checkbox:not(:last-child){
    margin-bottom: 10px;
}

#bloc_conditions_infogerance .content .bloc_checkbox>div:first-child{
    width: 30px;
    text-align: center;
    border-right: 1px solid #D5D5D5;
    background-color: #F0EFF0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 7px 5px 3px;
}

#bloc_conditions_infogerance .content .bloc_checkbox>div:last-child {
    width: calc(100% - 30px);
    padding : 5px 10px;
}


#bloc_presentation{
    font-size: 0;
}

#bloc_presentation > div {
    display: inline-block;
    font: normal normal normal 14px/20px "Open Sans", sans-serif !important;
    vertical-align: top;
}

#bloc_presentation>div:first-child{
    width: 70px;
    text-align: left;
}

#bloc_presentation>div:first-child img{
    width: 50px;
    height: 50px;
}

#bloc_presentation>div:last-child {
    width: calc(100% - 70px);
    background-color: #F7F7F7;
    border-radius: 5px 20px 20px 20px;
    padding : 20px;
}

/* MAIN */

/* GENERAL */

@media (max-width: 992px) {
    .container{
        max-width: 100%;;
    }
}

/* Lien */

a{
    color: #0088CC;
    transition: all 400ms;
}

a.no_style{
    color: #fff;
    text-decoration: none;
}

a:not(.btn):not(.no_style):hover,
a:not(.btn):not(.no_style):active,
a:not(.btn):not(.no_style):focus{
    color: #005580;
}

/* Gras */

strong{
    font-weight : 600 !important;
}

/* Chargement */

#loader_global{
    z-index : -1;
    display: none;
    background-color: rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
}

#loader_global.active{
    z-index : 1050;
    display: block;
}

.bloc_chargement{
    text-align: center;
    height: 160px;
}

#bloc_select_priorite .bloc_chargement,
#bloc_conditions_infogerance .bloc_chargement {
    height: 30px;
}

#bloc_select_mode_paiement .bloc_chargement{
    height: 65px;;
}

.loader{
    left: 50%;
    margin-left: -37px;
    margin-top: -37px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    background: transparent;
    border-top: 4px solid #1E499B;
    border-right: 4px solid transparent;
    border-radius: 50%;
    -webkit-animation: 1s spin linear infinite;
    animation: 1s spin linear infinite;
}

#bloc_select_priorite .loader,
#bloc_conditions_infogerance .loader{
    position: relative;
    left: 0;
    margin: 0;
    top: 0;
    width: 30px;
    height: 30px;
}

#bloc_select_mode_paiement .loader{
    position: absolute;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
}

form button[type="submit"] .loader{
    position: relative;
    left: 0;
    margin: 0;
    top: 0;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    border-top: 2px solid #FFF;
    border-right: 2px solid transparent;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Boutons */

.btn{
    font: normal normal normal 14px/24px "Open Sans", sans-serif;
    border-radius: 4px;
}

.btn svg{
    margin-right: 8px;
}

.btn svg path{
    fill : #ffffff;
}

.btn.btn-primary{
    background-color: #1C469D;
    border-color: #1C469D;
    transition: all 400ms;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.disabled,
.btn.btn-primary[disabled]{
    background-color: #4b6daf;
    border-color: #4b6daf;
}

.btn.btn-success{
    background-color: #393;
    border-color: #393;
    transition: all 400ms;
}

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-success.disabled,
.btn.btn-success[disabled]{
    background-color: #45bf45;
    border-color: #45bf45;
}

/* Modal */

.modal .modal-header{
    background-color: #1E499B;
    color: #fff;
    padding : 12px 20px;
}

.modal .modal-header .modal-title{
    font: normal normal 600 16px/22px "Open Sans", sans-serif;
}

.modal .modal-body{
    padding: 20px;
}

.modal .modal-body.bg-gray{
    background-color: #F4F5F8;
}

.modal iframe{
    max-width: 100%;
}

.btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1; /* Assure que la croix est visible */
    --bs-btn-close-color: #fff; /* Change la couleur de la croix en blanc */
    --bs-btn-close-opacity: 1; /* Assure que la croix est totalement visible */
}

.btn-close:hover, .btn-close:focus {
    --bs-btn-close-opacity: 1; /* Pleine opacité sur hover et focus */
}

@media (max-width: 991px) AND (min-width: 576px){

    .modal-dialog {
        max-width: none;
        margin: var(--bs-modal-margin);
    }
}

/* Tooltip */
.tooltip.show{
    opacity: 1;
}

.tooltip .tooltip-inner{
    background-color: #fff;
    color : #1D2327;
    box-shadow: 0 0 5px 1px rgba(28,70,157,.15);
    -webkit-box-shadow: 0 0 5px 1px rgba(28,70,157,.15);
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
 .bs-tooltip-end .tooltip-arrow::before{
    border-right-color : #fff;
 }

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before{
    border-top-color : #fff;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before{
    border-left-color : #fff;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before{
    border-bottom-color : #fff;
}

/* Label */

.label{
    display: inline-block;
    padding: 4px 10px;
    border-radius: 10px;
    font: normal normal 600 12px/14px "Open Sans", sans-serif;
    text-shadow: none;
    vertical-align: baseline;
    white-space :wrap;
    background : #F0EFF0;
    color: #464F57;
    cursor: default;
}

.label.label-success{
    background : #D5F2D5;
    color: #339933;
}

.label.label-info{
    background : #D7E3F5;
    color: #1C469D;
}

/* hr */

hr{
    border-color: #D5D5D5;
    opacity: 1;
}

@media (min-width: 576px) {
    hr {
        margin: 30px 0;
    }
}

/* margin */

.ml-n15{
    margin-left: -15px;
}

.mr-n15{
    margin-right: -15px;
}

.mt-n15{
    margin-top: -15px;
}

.mb-n15{
    margin-bottom: -15px;
}

.mb-0{
    margin-bottom : 0px;
}

.mb-10{
    margin-bottom : calc(1rem - 10px);
}

.mb-15{
    margin-bottom : calc(1rem - 15px);
}

.mb-15.force{
    margin-bottom: 15px;
}

.mb-20{
    margin-bottom : 15px;
}

@media (min-width: 576px) {
    .mb-3 {
        margin-bottom: 30px !important;
    }
    .mt-3 {
        margin-top: 30px !important;
    }
    .mb-15 {
        margin-bottom: 15px;
    }
    .mb-20 {
        margin-bottom: 20px;
    }
}