@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');


/*Declare une constante*/
:root {
    --BACK_COLOR_READONLY: #ddd;
    --BACK_COLOR_DISABLED: #A7B0B9;
}

@font-face {
    font-family: 'Raleway';
    src: url('/Fonts/Raleway-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    src: url('/Fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}

/* pour styler les checkboxes classiques (non-bootstrap) (à revoir car non compatible avec la nouvelle verion de bootstrap) */
/*  :root {
            --check-control-color: darkgrey;
            --check-control-disabled: #808080;
        }

        .input-group-text {
            color: azure;
            background: linear-gradient(#A2A2A2,#8E8E8E);
            border: thin solid #A2A2A2;
        }


         .check-control {
            font-family: 'Montserrat', sans-serif;
            display: grid;
            grid-template-columns: 4.2em 1.1em;
        }

        .check-control--disabled {
            color: var(--check-control-disabled);
            cursor: not-allowed;
        }
input[type="checkbox"] {
            -webkit-appearance: none;
            appearance: none;
            background-color: var(--form-background);
            margin: 0;
            font: inherit;
            color: currentColor;
            width: 1em;
            height: 1em;
            border: 0.15em solid currentColor;
            border-radius: 0.15em;
            transform: translateY(0.16em);
            display: grid;
            place-content: center;
            position: relative;
        }

            input[type="checkbox"]::before {
                content: "";
                width: 0.53em;
                height: 0.53em;
                clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
                transform: scale(0);
                transform-origin: bottom left;
                transition: 120ms transform ease-in-out;
                box-shadow: inset 1em 1em var(--check-control-color);
                background-color: CanvasText;
            }

            input[type="checkbox"]:checked::before {
                transform: scale(1);
            }


            input[type="checkbox"]:disabled {
                --check-control-color: var(--check-control-disabled);
                color: var(--check-control-disabled);
                cursor: not-allowed;
            }*/
/* fin pour styler les checkboxes classiques*/

/*body {
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    font-size: 1.1rem;
    margin: 0;
    color: #27253d;
    background: #e6f3f8;
}*/

/*main {
    position: relative;
    padding: 1rem 1rem 3rem;
}*/

/*h1 {
    margin-top: 0 !important;
}*/

body, html {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    /*padding-top: 50px;*/
    position: relative;
    font-size: 14px; /*pour compatiblité avec les navigateurs qui ne prendraient pas en compte les max ci dessous*/
    font-size: min(max(10px, .72vw), 16px);
}

.btn-filter-redesign {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    padding: 10px 0 10px 13px;
}

p, div {
    font-family: 'Montserrat', sans-serif;
    font-weight : 500;
}

li {
    font-family: 'Montserrat', sans-serif;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    font-size: min(max(18px, .76vw),26px);
    font-weight: 600 !important;
    margin-top:4px;
}

h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 25px;
    font-size: min(max(16px, .75vw),25px);
    font-weight: bold;
}

h4, .modal-header-success, .modal-header-danger, .modal-header-info {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-size: min(max(11px, .75vw),15px);
    font-weight: bold;
    /*font-style: oblique;*/
}

.navbar-nav {
    font-size: 17px;
    font-size: min(max(11px, .78vw),17px);
}

    .navbar-inverse > li > a,
    .navbar-nav > li > a {
        color: #aaa !important;
    }

/*voir aussi dans les media max 768*/
.fontsize-responsive-title {
    font-size: 20px;
    font-size: min(max(14px, .86vw),20px) !important;
}

.fontsize-big {
    font-size: 20px;
    font-size: min(max(14px, .85vw),20px) !important;
}

.fontsize-med {
    font-size: 17px;
    font-size: min(max(11px, .78vw),17px) !important;
}

.fontsize-small {
    font-size: 15px; /*pour compatiblité avec les navigateurs qui ne prendraient pas en compte les max ci dessous*/
    font-size: min(max(10px, .69vw), 14px) !important;
}

.fontsize-tiny, .table {
    font-size: 14px; /*pour compatiblité avec les navigateurs qui ne prendraient pas en compte les max ci dessous*/
    font-size: min(max(9px, .67vw), 12px) !important;
}

/*.table {
    font-size: min(max(11px, .7vw), 15px);
}*/


/*correspond à label taille md dans bootstrap :*/
@media (max-width: 768px) {

    .max-width-105{
        width:105px;
        max-width : 105px;
        word-wrap: break-word;
    }
    .enteteAttendu {
        position: relative !important;
    }

    .conteneurEnteteAttendu {
        max-width: unset !important;
    }

    .fontsize-responsive-title {
        font-size: 25px;
        font-size: min(max(18px, .9vw),25px) !important;
    }

    .w-40 {
        width: 20% !important;
    }

    .table-separator tbody tr {
        border-bottom: 10px solid #5D6D7E !important; /* Bordure plus épaisse pour les petits écrans */
        padding: 5px 0;
        margin: 10px 0;
    }

        .table-separator tbody tr td {
            /*padding: 5px 0 !important;*/
            margin: 10px 0 !important;
        }
}

@media (min-width: 769px) {

    .table-separator tbody tr {
        border-bottom: 1px solid #5D6D7E; /* Couleur et épaisseur de la bordure */
    }
}

/*correspond à label taille lg >991 dans bootstrap :*/
@media (max-width: 991px) {

    .w40md30 {
        width: 40% !important;
    }

    .w60md70 {
        width: 60% !important;
    }

    .fsize-1 {
        font-size: 2rem;
    }

    .fsize-2 {
        font-size: 1.75rem;
    }

    .fsize-3 {
        font-size: 1.4rem;
    }

    .fsize-4 {
        font-size: 1.15rem;
    }

    .fsize-5 {
        font-size: 0.9rem;
    }

    .fsize-6 {
        font-size: 0.7rem;
    }
}

@media (min-width: 992px) {
    .w40md30 {
        width: 30% !important;
    }

    .w60md70 {
        width: 70% !important;
    }

    .fsize-1 {
        font-size: 2.5rem;
    }

    .fsize-2 {
        font-size: 2.2rem;
    }

    .fsize-3 {
        font-size: 1.8rem;
    }

    .fsize-4 {
        font-size: 1.5rem;
    }

    .fsize-5 {
        font-size: 1.25rem;
    }

    .fsize-6 {
        font-size: 1rem;
    }
}




@media (max-width: 991px) {

    .w50md30 {
        width: 50% !important;
    }

    .w50md70 {
        width: 50% !important;
    }
}

@media (min-width: 992px) {
    .w50md30 {
        width: 30% !important;
    }

    .w50md70 {
        width: 70% !important;
    }
}

/*correspond à label taille xl >=1200 dans bootstrap5 :*/
@media (max-width: 1199px) {

    .w50xl30 {
        width: 50% !important;
    }

    .w50xl70 {
        width: 50% !important;
    }
}

@media (min-width: 1200px) {
    .w50xl30 {
        width: 30% !important;
    }

    .w50xl70 {
        width: 70% !important;
    }
}


/*correspond à label taille xxl >=1400 dans bootstrap5 :*/
@media (max-width: 1399px) {

    .w50xxl30 {
        width: 50% !important;
    }

    .w50xxl70 {
        width: 50% !important;
    }
}

@media (min-width: 1400px) {
    .w50xxl30 {
        width: 30% !important;
    }

    .w50xxl70 {
        width: 70% !important;
    }
}

.alert-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #d32535;
}

.alert-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #148ea1;
}

.alert-warning {
    color: #1f2d3d !important;
    background-color: #ffc107 !important;
    border-color: #edb100 !important;
}


/*
.navbar-inverse
.navbar-nav > li > a :hover {
    color: azure !important;
}*/

/*overrides le css bootstrap*/

.horizontal-accordion.nav-link:not(.active) {
    background: lightgrey;
    margin-bottom: calc(var(--bs-nav-tabs-border-width) * -1);
    border: var(--bs-nav-tabs-border-width) solid transparent;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius);
}

.modal-title {
    padding: 2px 0 !important;
}
.text-warning {
    color: indianred !important;
    font-weight: 500;
}

.text-danger {
    color: orangered !important;
    font-weight: 600;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #fff !important;
    background-color: transparent;
}

.panel {
    margin: 2vh 2% !important;
    background-color: inherit !important;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.panel-info {
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    border-color: #bce8f1 !important;
}

.panel-warning {
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    border-color: #faebcc !important;
}

.panel > .table caption, .panel > .table-responsive > .table caption, .panel > .panel-collapse > .table caption {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.panel-body {
    padding: 15px 1%;
}



.thumbnail {
    /*padding: .1vw !important;*/
    height: 20vh;
    min-height: 138px;
}

    .thumbnail h1 {
        padding-left: .5ch;
        /*font-size: 40px !important;*/
        font-size: min(max(20px, 2.5vw),50px) !important;
        /*margin-top: 1vh !important;
        margin-bottom: 0 !important;*/
    }

    .thumbnail h3 {
        font-family: 'Raleway', sans-serif;
        /*font-size: 25px;*/
        font-size: min(max(13px, 1.10vw), 18px) !important;
        font-weight: bold;
        /*margin-top: .2vh !important;*/
    }

.dropdown-menu {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}


.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
}

    .isDisabled > a {
        color: currentColor;
        pointer-events: none;
        text-decoration: none;
    }


/*


.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4,
.col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7,
.col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10,
.col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.row {
     margin-right: 0; 
     margin-left: 0; 
}
.col-md-11{
    width:100%;
}

@media (max-width: 892px) {
    .thumbnail h3 {
        font-family: 'Raleway', sans-serif;
        font-size: 25px;
        font-size: min(max(15px, 4vw),36px);
        font-weight: bold;
    }
    .thumbnail h1 {
        font-size: 40px !important;
        font-size: min(max(20px, 6.5vw),60px) !important;
    }
}


    @media (min-width: 893px) {
        .col-md-2 {
            width: 14.66%;
            float: left !important;
            margin: 0 1% !important;
        }
    }*/
/*///////////////////fin overrides*/
a.no-underline-default-color:link {
    text-decoration: none !important;
}

a.no-underline-default-color:hover {
    text-decoration: none !important;
}

a.no-underline:link {
    color: inherit;
    text-decoration: none !important;
}

a.no-underline:hover {
    color: inherit;
    text-decoration: none !important;
}

.thumbnail:hover {
    opacity: 0.88;
}


.validation-summary-valid > ul {
    margin: 0;
}
/*.alert-danger ul:first-child(not([style*="display: none"])){
    padding-top: 3vh;
}

.alert-danger ul:last-child not([style*="display: none"]) {
    padding-bottom: 3vh;
}*/
.alert-danger ul li:not( [style*='display: none'] ) {
    padding-top: 1vh;
}

.alert-danger li:not([style*="display: none"]) {
    width: 50%;
    margin: auto;
}

/*Style desc entêtes defs tableau triables*/
/*___________________________________*/

.enteteTrieDesc i {
    color: white !important;
    font-size: 1.2rem;
}

.enteteTrieAsc i {
    color: white !important;
    font-size: 1.2rem;
}

.enteteNonTrie i {
    color: #C6CDDC !important;
    font-size: .72rem;
}

.enteteTrieDesc a {
    color: #ECECEC !important;
}

.enteteTrieAsc a {
    color: #ECECEC !important;
}

.enteteNonTrie a {
    color: #C6CDDC !important;
}

.enteteTrieDesc a:link {
    color: #ECECEC !important;
}

.enteteTrieAsc a:link {
    color: #ECECEC !important;
}

.enteteNonTrie a:link {
    color: #C6CDDC !important;
}

.enteteTrieDesc a:visited {
    color: #ECECEC !important;
}

.enteteTrieAsc a:visited {
    color: #ECECEC !important;
}

.enteteNonTrie a:visited {
    color: #C6CDDC !important;
}

.enteteTrieDesc a:hover {
    color: white !important;
}

.enteteTrieAsc a:hover {
    color: white !important;
}

.enteteNonTrie a:hover {
    color: white !important;
}

/*___________________________________*/
.tableau-bord {
    margin: auto;
    width: 80%;
}

    .tableau-bord a:hover {
        text-decoration: none !important;
    }

        .tableau-bord a:hover h1 {
            color: azure !important;
        }

        .tableau-bord a:hover h3 {
            color: azure !important;
            padding: .1em !important;
        }

p.text-light {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-size: min(max(14px, .74vw),20px);
    font-weight: bold;
}



/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
#demo {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Pour visualiser les labels */
.lbl-talk {
    font-weight: bold;
}

/* Hide/rearrange for smaller screens */
/*@media screen and (max-width: 992px) {
    .carousel-caption {
        display: none;
    }
    .ad-side-container{
        display:none
    }
    .ad-side-container + div{
    }
}*/

.w30px {
    width: 30px;
    height: 30px;
    display: flex;
    text-align: center;
    line-height: 30px;
    font-size: 14px !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: auto
}

.w40px {
    width: 40px;
    height: 40px;
    display: flex;
    text-align: center;
    line-height: 40px;
    font-size: 16px !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: auto
}



.input-group-addon.primary {
    color: rgb(255, 255, 255);
    background-color: rgb(50, 118, 177);
    border-color: rgb(40, 94, 142);
}

.input-group-addon.success {
    color: rgb(255, 255, 255);
    background-color: rgb(92, 184, 92);
    border-color: rgb(76, 174, 76);
}

.input-group-addon.info {
    color: rgb(255, 255, 255);
    background-color: rgb(57, 179, 215);
    border-color: rgb(38, 154, 188);
}

.input-group-addon.warning {
    color: rgb(255, 255, 255);
    background-color: rgb(240, 173, 78);
    border-color: rgb(238, 162, 54);
}

.input-group-addon.danger {
    color: rgb(255, 255, 255);
    background-color: rgb(217, 83, 79);
    border-color: rgb(212, 63, 58);
}

.form-control.inline {
    min-width: 0;
    width: auto;
    max-width: 60px;
    display: inline;
}

* {
    box-sizing: border-box;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-item-text {
    border: 1px solid #d4d4d4;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    padding: 10px;
    cursor: pointer;
    background: linear-gradient(#0B9400,#16A20B);
    color: #ffffff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-active-test {
    /*when navigating through the items using the arrow keys:*/
    padding: 10px;
    cursor: pointer;
    background-color: Green !important;
    color: #ffffff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-inactive {
    padding: 10px;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(#A2A2A2,#8E8E8E);
    border-bottom: 1px solid #d4d4d4;
}

    .autocomplete-inactive:hover {
        background-color: #e9e9e9;
    }


    .autocomplete-inactive * {
        pointer-events: none
    }


.no-gutter {
    margin-right: 0;
    margin-left: 0;
}

    .no-gutter > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }

.no-padding {
    padding: 0px;
}

.tabs {
    position: relative;
    clear: both;
    /*border: 1px solid #337ab7;*/
    /*background: #337ab7;*/
    margin-bottom: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.tab {
    float: left;
}

label.tab-header {
    color: #fff;
    padding: 10px;
    margin-left: -1px;
    position: relative;
    left: 1px;
    padding: 6px 15px 0 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.tab [type=radio] {
    display: none;
}

.content {
    position: absolute;
    top: 34px;
    left: 0;
    /*background: white;*/
    right: 0;
    bottom: 0;
    /*padding: 20px;*/
    background: linear-gradient(#34495E,#5D6D7E);
}

[type=radio]:checked ~ label {
    color: #333;
    background-color: #f5f5f5;
    z-index: 2;
}

    [type=radio]:checked ~ label ~ .content {
        z-index: 1;
    }

/* Collapsible */
.wrap-collabsible {
    margin-bottom: 1.2rem 0;
}

.toggle {
    display: none;
}

.lbl-toggle {
    display: block;
    transition: all 0.25s ease-out;
}

    /*.lbl-toggle:hover {
        color: #337ab7;
    }*/

    .lbl-toggle::after {
        content: ' ';
        display: inline-block;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 5px solid currentColor;
        vertical-align: middle;
        margin-right: .7rem;
        transition: transform .2s ease-out;
    }

.toggle:checked + table > caption > .lbl-toggle::after {
    transform: rotate(-90deg) translateX(1px);
}

.collapsible-content {
    display: none;
}

.toggle:checked + table > .collapsible-content {
    display: table;
    width: 100%;
}

/*Spinner*/

.loading {
    z-index: 1;
    border: 2px solid #ccc;
    width: 10px;
    height: 10px;
    position: relative;
    border-radius: 50%;
    border-top-color: #1ecd97;
    border-left-color: #1ecd97;
    animation: spin 1s infinite ease-in;
}

    .loading.ic-use-transition {
        z-index: -1;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}*/

.spinner {
    z-index: 1;
    content: '';
    box-sizing: border-box;
    position: relative;
    top: 55%;
    left: 55%;
    width: 18px;
    height: 18px;
    margin-top: -18px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #1ecd97;
    border-left-color: #1ecd97;
    animation: spin 1s infinite ease-in;
}

    .spinner.ic-use-transition {
        z-index: -1;
    }

td.ic-indicator {
    display: none
}

@keyframes inner-error {
    to {
        opacity: 0;
    }
}

.inner-error {
    z-index: 2;
    padding: 5px;
    position: absolute;
    left: 50%;
    color: #8a6d3b;
    background: rgba(252,248,227, 1);
    border: solid 2px #8a6d3b;
    animation: inner-error 2s ease 5s forwards;
}

.disappear {
    animation: inner-error 5s ease-out;
}

input.parsley-success:not(:read-only),
select.parsley-success,
textarea.parsley-success,
fieldset.bordered.form-field.parsley-success {
    color: #468847;
    background-color: #B9FF9C;
    border: 1px solid #D6E9C6;
}



input.parsley-error,
select.parsley-error,
textarea.parsley-error,
fieldset.bordered.form-field.parsley-error {
    color: #B94A48;
    background-color: #E7B0B0;
    /*background-color: #F2DEDE;*/
    /*background-image: unset;*/
    /*background: linear-gradient(#F9C5C5,#E7B0B0);*/
    border: 1px solid #EED3D7;
}


input[required]:enabled:not(.parsley-success, .parsley-error) {
    background-color: #f9f9a1;
    color: black;
}

input[data-parsley-validate-if-empty]:enabled:not(.parsley-success, .parsley-error) {
    background-color: #f9f9a1;
    color: black;
}

input.parsley-success[readonly="readonly"],
input[readonly]:enabled:not(.parsley-success, .parsley-error) {
    background-color: var(--BACK_COLOR_READONLY);
}

.parsley-errors-list {
    margin-bottom: 10px;
    padding: 12px 12px 12px 12px;
    background: linear-gradient(#F9C5C5,#E7B0B0);
    border: 1px groove #D12F2F;
    border-radius: 4px;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 0.9em;
    color: #B94A48;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
}

    .parsley-errors-list.filled {
        display: block;
        margin: 0;
        min-width: 350px;
    }

    .parsley-errors-list:empty {
        display: none;
    }

.parsley-custom-error-message {
    margin-left: 2px;
    background: inherit;
    color: inherit;
    border: none;
}


.not-stupid-form-control {
    /*display: inline;*/
    width: 25%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

    .not-stupid-form-control:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    }

    .not-stupid-form-control::-moz-placeholder {
        color: #999;
        opacity: 1;
    }

    .not-stupid-form-control:-ms-input-placeholder {
        color: #999;
    }

    .not-stupid-form-control::-webkit-input-placeholder {
        color: #999;
    }

    .not-stupid-form-control::-ms-expand {
        background-color: transparent;
        border: 0;
    }

    .not-stupid-form-control[disabled],
    .not-stupid-form-control[readonly],
    fieldset[disabled] .not-stupid-form-control {
        background-color: #eee;
        opacity: 1;
    }

    .not-stupid-form-control[disabled],
    fieldset[disabled] .not-stupid-form-control {
        cursor: not-allowed;
    }

.modal-header-success {
    color: #fff;
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
    /*background-color: #5cb85c;*/
    background: linear-gradient(#5cb85c,#4D4D4D);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.modal-header-warning {
    color: #fff;
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
    /*background-color: #f0ad4e;*/
    background: linear-gradient(#f0ad4e,#4D4D4D);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.modal-header-danger {
    color: #fff;
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
    /*background-color: #d9534f;*/
    background: linear-gradient(#d9534f,#4D4D4D);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.modal-header-info {
    color: #fff;
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(rgba(0,217,211,1),#4D4D4D);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    align-items: center;
}

.modal-header-primary {
    color: #fff;
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
    /*background-color: #428bca;*/
    background: linear-gradient(#428bca,#4D4D4D);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.modal {
    /*  height: auto !important; pour éviter que sur les smartphones le popup se retrouve en bas...*/
}

a.fas:link, a.btnBig-add:link, a.btnBig-resetFilters:link, a.btnTiny-delete:link, a.btnBig-export:link {
    text-decoration: none;
}

.center-div {
    margin: 0;
    position: absolute;
    top: 30%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


/* Elements de page génériques à TI*/
.h3-espaceClient {
    color: azure;
    font-size: 10pt;
    font-size: min(max(8pt, .72vw), 10pt);
    margin-left: 10px;
}

.h3-sectionTitle {
    color: azure;
    font-size: 12pt;
    margin-top: -1px;
    margin-bottom: -1px;
    font-weight: bold;
}

.div-navbarTitle {
    background: linear-gradient(#222222,#4D4D4D);
    /*margin-bottom: 5%;*/
    box-shadow: 0 5px 5px -5px black;
}

.footerFormat {
    overflow: hidden;
    background: linear-gradient(#EEEEEE,#DEDEDE);
    box-shadow: 0 -5px 5px -5px black;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
    position: fixed;
    height: 50px;
    z-index: 99;
}

@media (max-width: 1113px) {
    .responsive-col-1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .responsive-col-4 {
        max-width: 35%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .responsive-check-control {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 1071px) {
    #chktuto {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }
}

@media (max-width: 991px) {
    .responsive-col-3 {
        margin-top: 10px;
    }

    .responsive-col-4 {
        max-width: 30%;
    }

    #chktuto {
        margin-left: 5px;
    }

    .label-conseils {
        margin-left: 20px;
    }
}

@media (max-width: 600px) {
    .responsive-col-4 {
        max-width: 25%;
    }

    .label-conseils {
        margin-left: 50px;
    }
}

@media (max-width: 575px) {
    .responsive-col-3 {
        margin-top: 8px;
    }

    #chktuto {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }
}

@media (max-width: 600px) {
    .responsive-col-4 {
        max-width: 25%;
    }

    .label-conseils {
        margin-left: 40px;
    }
}

    .footerFormat p {
        margin-top: 17px;
    }

.content-wrap {
    padding-bottom: 60px;
}

.a-panelButtons {
    margin: 5px 5px 10px 5px;
}

.div-headPanneau {
    color: azure;
    background: linear-gradient(#222222,#4D4D4D);
    /*margin-right: -1px;*/
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.div-footerPanneau {
    color: white;
    background: linear-gradient(#222222,#4D4D4D);
    /*margin-right: -1px;*/
    border-top: solid thin #8E8E8E;
    padding: 15px;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.div-headPanneauFonctions {
    background: linear-gradient(#595959,#4D4D4D);
    margin-right: -1px;
}

.div-headPanneauFonctionsLogistique {
    background: linear-gradient(to bottom, rgba(254,204,55,1) 0%, rgba(234,102,28,1) 100%);
    margin-right: -1px;
}

.div-headPanneauFonctionsMessagerie {
    background: linear-gradient(to bottom, #9cc31a 0%, #389a2b 100%);
    margin-right: -1px;
}

.div-headPanneauFonctionsAdmin {
    background: linear-gradient(0deg, rgba(79,2,161,1) 0%, rgba(219,0,255,1) 100%);
    margin-right: -1px;
}

.a-actionButtons {
    text-align: right;
}

.img-CSViconSVG {
    width: 20px;
    height: 20px;
}

.panel-format {
    border-radius: 4px;
    border: 1px solid #4D4D4D
}

.panel-formatLogistique {
    border-radius: 4px;
    border: 1px solid #FF9300
}

.panel-formatMessagerie {
    border-radius: 4px;
    border: 1px solid #27A81C
}

.panel-formatAdmin {
    border-radius: 4px;
    border: 1px solid #db00ff
}

.span-input {
    background: linear-gradient(#A2A2A2,#8E8E8E);
    color: azure;
}

.panel-background {
    color: azure;
    background: linear-gradient(#34495E,#5D6D7E);
}

/* Gestion des tableaux */

/* override de bootstrap */
.table > thead > tr > th {
    border: unset;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border: unset;
}

.tr-header {
    background: linear-gradient(#222222,#4D4D4D);
    color: azure;
    border-top: 1px solid #4D4D4D;
    font-size: min(max(8px, .72vw), 20px);
}


.tr-header-sub {
    color: azure;
    background: linear-gradient(#34495E,#5D6D7E);
}

.tr-header-sub-sub {
    color: black;
    background: linear-gradient(#85929E,#AEB6BF);
    border-bottom: none;
    padding-left: 35px;
}

    .tr-header-sub-sub th {
        padding-left: 75px;
        padding-top: 3px;
        padding-bottom: 3px;
    }

        .tr-header-sub-sub th:last-child {
            padding-right: 5px;
        }

    .tr-header-sub-sub td {
        /*vertical-align: top;
           padding-left: 75px;*/
        padding-top: 3px;
        padding-bottom: 3px;
    }

        .tr-header-sub-sub td:last-child {
            padding-right: 5px;
        }


.tr-header-sub-sub-sub {
    color: black;
    background: linear-gradient(#D6DBDF,#EBEDEF);
    padding-left: 35px;
}

    .tr-header-sub-sub-sub th {
        padding-left: 75px;
        padding-top: 3px;
        padding-bottom: 3px;
    }

        .tr-header-sub-sub-sub th:last-child {
            padding-right: 5px;
        }

    .tr-header-sub-sub-sub td {
        vertical-align: top;
        padding: .7em 0 .7em 1em;
    }

        .tr-header-sub-sub-sub td:last-child {
            padding-right: 1em;
        }

th {
    /*text-align: center !important;*/
    padding: .75em 0 .75em 1em;
}

.td-truevalue {
    background: linear-gradient(#A6FF9F,#8EE887);
    text-align: center;
}

.td-falsevalue {
    background: linear-gradient(#FFA5A5,#D87B7B);
    text-align: center;
}

/* Gestion des checkbox ergonomique */
.filter input[type=checkbox],
.accordion > input[type=checkbox],
.permision-check > input[type=checkbox],
.remove-check > input[type=checkbox], .delete-check > input[type=checkbox] {
    display: none;
    opacity: 0;
}

.filter input[type=radio],
.accordion input[type=radio] {
    position: absolute;
    /*visibility: hidden;*/
    opacity: 0;
}

.filter label,
.accordion > fieldset > label, .permision-check > label, .remove-check > label, .delete-check > label {
    cursor: pointer;
    display: block;
    padding: 7px 15px 7px 15px;
    background: linear-gradient(#A2A2A2,#8E8E8E);
    width: 100%;
    border-radius: 5px;
    color: azure;
    font-weight: 600;
    transition: 0.5s;
    text-align: left;
}

.filter div {
    display: block;
    padding: 7px 15px 7px 15px;
    background: linear-gradient(#A2A2A2,#8E8E8E);
    width: 0.5em;
    height: 34px;
    color: azure;
}

.filter.lengthwise label, .accordion > fieldset > label, .field-grid > label, .permision-check > label, .remove-check > label {
    border-radius: 0;
}

    .filter label:hover,
    .accordion > fieldset > label:hover, .permision-check > label:hover {
        /*background: linear-gradient(#0B9400,#16A20B);*/
        background: linear-gradient(#1f3721,#2c7e1f);
    }

.filter input[type=radio]:checked + label,
.accordion > fieldset > input[type=radio]:checked + label {
    background: linear-gradient(#0B9400,#16A20B);
}

.filter input[type=radio]:focus + label,
.accordion > fieldset > input[type=radio]:focus + label {
    border-color: greenyellow;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(154, 205, 50, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(154, 205, 50, .6);
}

.filter input[type=checkbox]:checked ~ label,
.accordion > fieldset > input[type=checkbox]:checked ~ label,
.permision-check > input[type=checkbox]:checked ~ label {
    background: linear-gradient(#0B9400,#16A20B);
}

    .filter input[type=checkbox]:not([readonly]):checked ~ label:hover,
    .accordion > fieldset > input[type=checkbox]:checked ~ label:hover,
    .permision-check > input[type=checkbox]:checked ~ label:hover {
        background: linear-gradient(#1f3721,#2c7e1f);
        /*background: linear-gradient(#88d875,#16A20B);*/
    }


.filter input[type=checkbox]:focus ~ label,
.accordion > fieldset > input[type=checkbox]:focus ~ label,
.permision-check > input[type=checkbox]:focus ~ label {
    border-color: greenyellow;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(154, 205, 50, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(154, 205, 50, .6);
}

.remove-check > input[type=checkbox]:checked ~ label {
    background: linear-gradient(#be2626,#d63707);
}

.delete-check > input[type=checkbox]:checked ~ label {
    background: linear-gradient(#be2626,#d63707);
}


/*.remove-check > input[type=checkbox]:focus + label {
    border-color: red;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px red, 0 0 8px darkred;
    box-shadow: inset 0 1px 1px red, 0 0 8px darkred;
}*/

.remove-check > label:before {
    content: "\2713";
    padding-right: 10px;
}

.remove-check > input[type=checkbox]:checked ~ label:before {
    content: "\2717";
    padding-right: 10px;
}

.delete-check > label:before {
    content: "\2717";
    padding-right: 10px;
}

.delete-check > input[type=checkbox]:checked ~ label:before {
    content: "\2717";
    padding-right: 10px;
}

.filter label:before,
.accordion > fieldset > label:before,
.permision-check > label:before {
    content: "\2717";
    padding-right: 10px;
}

.filter input[type=radio]:checked + label:before,
.accordion > fieldset > input[type=radio]:checked + label:before,
.permision-check > input[type=checkbox]:checked ~ label:before {
    content: "\2713";
    padding-right: 10px;
}

.filter input[type=checkbox]:checked ~ label:before {
    content: "\2713";
    padding-right: 10px;
}

/* popover */
details[data-popover] {
    display: inline;
    position: relative;
}

    details[data-popover] > summary:after {
        content: "\2139";
        padding-left: 0.25em;
        vertical-align: super;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    details[data-popover] > summary:focus {
        outline: none;
    }

    details[data-popover] > summary::-webkit-details-marker {
        display: none;
    }

    details[data-popover] > summary {
        text-decoration: underline solid #337ab7;
    }

        details[data-popover] > summary + * {
            position: absolute;
            display: block;
            z-index: 1;
            width: 20em;
            border: solid 1px #337ab7;
            border-radius: 4px;
            padding: 10px;
            background: white;
        }

    details[data-popover] > * + * {
        /* hide detail elements that would ruin the popover */
        display: none;
    }

details[data-popover="up"] > summary + * {
    bottom: calc(0.5rem + 100%);
    right: 50%;
    transform: translateX(50%);
}

details[data-popover="down"] > summary + * {
    top: calc(0.5rem + 100%);
    right: 50%;
    transform: translateX(50%);
}

details[data-popover="left"] > summary + * {
    right: calc(1rem + 100%);
    bottom: 50%;
    transform: translateY(50%);
}

details[data-popover="right"] > summary + * {
    left: calc(1rem + 100%);
    bottom: 50%;
    transform: translateY(50%);
}

/* starts the vcard injected tags */
div.vcard {
    display: flex;
    flex-direction: column;
    grid-gap: 0.5em;
    /*border: solid thin #4D4D4D;*/
    padding: 0;
    margin-bottom: 20px;
    background: linear-gradient(#D6DBDF,#EBEDEF);
}

.photo {
    max-width: 200px;
    max-height: 200px;
}

.org {
    padding-left: 1em;
    font-weight: bold;
}

.fn {
    padding-left: 1em;
}

    .fn:before {
        content: "\e008";
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        padding-right: 0.25em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.tel {
    padding-left: 1em;
}

    .tel:before {
        content: "\e182";
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        padding-right: 0.25em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.vcard .vcard-header {
    padding: 1em;
    text-align: center;
    font-weight: bold;
    background: linear-gradient(#222222,#4D4D4D);
    color: azure;
    border-top: 1px solid #4D4D4D;
}

/* starts the address line */
.adr {
    display: grid;
    /*grid-template-columns: [start] 1fr [mid] 5fr [end];*/
    grid-template-columns: [start] auto [pcend] 0 [mid] auto auto [end];
    grid-gap: 0.15em;
    justify-content: flex-start;
    padding-left: 1em;
}

.street-address {
    grid-column-start: start;
    grid-column-end: end;
}

.extended-address {
    grid-column-start: start;
    grid-column-end: end;
}

.locality {
    grid-column: mid;
    /*grid-column-end:end;*/
}

.region {
    grid-column-start: start;
    grid-column-end: end;
}

.postal-code {
    grid-column-start: start;
    grid-column-end: pcend;
}

/* style the vcard download link */
a.hcard-download {
}

.form-container {
    margin-left: auto;
    margin-right: auto;
    padding: 0.25em;
    background: linear-gradient(#34495E,#5D6D7E);
}

.three-column-grid > .form-container {
    margin-left: 0;
    margin-right: 0;
}

.form-container > h3, .three-column-grid .contenu h3, .three-column-grid .contenuLogistique h3, .three-column-grid .contenuMessagerie h3 {
    margin-top: 0px;
}
/*@media (min-width: 768px) {
    .form-container, .three-column-grid .contenu, .three-column-grid .contenuLogistique, .three-column-grid .contenuMessagerie {
        width: 750px;
    }
    .two-column-grid .contenu, .two-column-grid .contenuLogistique, .two-column-grid .contenuMessagerie {
        width: 780px;
    }
}

@media (min-width: 992px) {
    .form-container, .three-column-grid .contenu, .three-column-grid .contenuLogistique, .three-column-grid .contenuMessagerie {
        width: 970px;
    }
    .two-column-grid .contenu, .two-column-grid .contenuLogistique, .two-column-grid .contenuMessagerie {
        width: 1000px;
    }
}*/

/*@media (min-width: 1200px) {*/
.form-container, .three-column-grid .contenu, .three-column-grid .contenuLogistique, .three-column-grid .contenuMessagerie {
    width: 100%;
}

.two-column-grid .contenu, .two-column-grid .contenuLogistique, .two-column-grid .contenuMessagerie, .two-column-grid .paginationcontenu {
    width: 100%;
}
/*}*/




.stacked {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.lengthwise {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

    .lengthwise > .form-field + .form-field {
        /*border-left: thin solid #A2A2A2;*/
    }

fieldset.bordered, div.bordered {
    /* border: thin solid #4D4D4D;
        border-radius: 4px;*/
    /*margin: 0 auto;*/
    margin-bottom: 0;
    padding: 0;
}

    fieldset.bordered fieldset.bordered {
        border-radius: 0;
    }

fieldset .form-field, .field-grid .form-field,
.bordered .form-field, .contenu .form-field, .contenuLogistique .form-field, .contenuMessagerie .form-field {
    /*all: unset;*/
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    font-size: min(max(11px, .72vw),14px);
    line-height: 1.42857143;
    color: #555;
    /*background-image: none;*/
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    border: none;
    border-top: thin solid #A2A2A2;
    border-radius: 0;
}

fieldset textarea.form-field, .field-grid textarea.form-field,
.bordered textarea.form-field, .contenu textarea.form-field, .contenuLogistique textarea.form-field, .contenuMessagerie textarea.form-field {
    height: 68px;
}

fieldset select.form-field, .field-grid select.form-field,
.bordered select.form-field, .contenu .form-field, .contenuLogistique .form-field, .contenuMessagerie .form-field {
    -moz-appearance: button-arrow-down;
    -webkit-appearance: button;
}

    fieldset .form-field:focus, .field-grid .form-field:focus,
    .bordered .form-field:focus, .contenu .form-field:focus, .contenuLogistique .form-field:focus, .contenuMessagerie .form-field:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    }

/*.bordered .form-field:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }*/

/*POUR LES CHECKBOXES BOOTSTRAP*/
.btn-check:not(:checked) + .btn {
    background: linear-gradient(#A2A2A2, #8E8E8E); /* Changez la couleur ici */
    color: white; /* Changez la couleur du texte si nécessaire */
}

.btn-check:checked + .btn {
    background-color: green; /* Changez la couleur ici */
    color: white; /* Changez la couleur du texte si nécessaire */
}

.btn-check:checked + .btn {
    background-color: green; /* Changez la couleur ici */
    color: white; /* Changez la couleur du texte si nécessaire */
}

    .btn-check:checked + .btn:before {
        content: "\2717";
        padding-right: 10px;
    }

/*fieldset legend, .stacked > .header, .field-grid legend {*/
/*.field-grid legend, .property-grid .header {*/
.field-grid legend {
    all: unset;
    font-weight: bold;
    float: left;
    width: 100%;
    border-bottom: thin solid #A2A2A2;
    text-align: center;
    color: azure;
    background: linear-gradient(#222222,#4D4D4D);
}

fieldset legend:empty {
    display: none;
}

fieldset label:not(.case), .stacked label:not(.case), .field-grid label, .lengthwise label, .property-grid label:not(.property, .property1, .property2, .case), table caption label {
    font-weight: normal;
    box-sizing: border-box;
    color: azure;
    background: linear-gradient(#A2A2A2,#8E8E8E);
    margin: 0;
    height: auto;
    padding: 6px 12px;
    border: thin solid #A2A2A2;
    font-size: 14px;
    font-size: min(max(11px, .72vw),14px);
    line-height: 1.42857143;
}

.tablenewspaper {
    /*all: unset;*/
    font-weight: unset;
    width: auto;
    box-sizing: border-box;
    color: azure;
    background: linear-gradient(#A2A2A2,#8E8E8E);
    /*height: 34px;
    padding: 6px 12px;*/
    border: thin solid #A2A2A2;
    font-size: 14px;
    font-size: min(max(11px, .72vw),14px);
}

/*fieldset input[type="checkbox"] {
        margin: 0;
        margin-top: 0;
        line-height: normal;
    }*/

.lengthwise > label,
.lengthwise > .filter > label {
    width: unset;
    display: flex;
    flex: 0 auto;
}

.lengthwise > btn {
    flex: 0 auto;
}

.lengthwise .form-field {
    flex: 2;
}

fieldset.bordered > div > .parsley-errors-list {
    border-radius: 0;
    margin-bottom: 0;
}

    fieldset.bordered > div > .parsley-errors-list:empty {
        display: none;
    }

.btnTiers {
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    background: linear-gradient(#222222,#4D4D4D);
    color: azure;
}

button.btnTiers {
    border: 0px;
}

.btnTiers.glyphicon-copy {
    padding-top: 0px;
}

.btnTiers:hover {
    background-color: #16A20B;
    box-shadow: 0 200px 100px -100px #0B9400 inset;
    /*background: linear-gradient(#0B9400,#16A20B);*/
    transition: box-shadow 0.5s;
    color: azure;
}



/*.quadrant-container {
        grid-gap: 0.5em;

        display: flex;
        flex-direction: column;
    }*/

/*@media only screen and (min-width:1200px) {*/
.quadrant-container {
    display: grid;
    grid-template-columns: [left] auto [right] auto;
    grid-template-rows: [top] auto [bottom] auto;
}
/*}*/

.quadrant-top-left {
    grid-column: left;
    grid-row: top;
}

.quadrant-top-right {
    grid-column: right;
    grid-row: top;
}

.quadrant-bottom-left {
    grid-column: left;
    grid-row: bottom;
}

.quadrant-bottom-right {
    grid-column: right;
    grid-row: bottom;
}

.tiles-container {
    display: flex;
    flex-direction: column;
    grid-gap: 2em;
    /*grid-template-columns: [left] repeat(3, auto) [end];*/
    justify-content: center;
}

.newspaper-container {
    grid-gap: 0.5em;
    /*width: 100%;*/
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width:800px) {
    .tiles-container {
        display: grid;
        grid-template-columns: [left] repeat(3, auto) [end];
        /*justify-content: center;*/
    }
}

@media only screen and (min-width:1325px) {
    .newspaper-container {
        display: grid;
        grid-template-columns: [left] 1fr [right] 1fr [end];
        /*
                grid-template-columns: [left] auto [right] auto [end];
                grid-template-rows: [top] auto [bottom] auto;*/
    }

    .newspaper-left.padded,
    .padded.newspaper-left {
        padding-left: 0.5em;
    }

    .newspaper-right.padded,
    .padded.newspaper-right {
        padding-right: 0.5em;
    }
}

.newspaper-container > .header,
.tiles-container > .header {
    grid-column-start: left;
    grid-column-end: end;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: solid thin #8E8E8E;
    background: unset;
}

.newspaper-container > .tinyheaderleft,
.tiles-container > .tinyheaderleft {
    grid-column: left;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: solid thin #8E8E8E;
}

.newspaper-container > .tinyheaderright,
.tiles-container > .tinyheaderright {
    grid-column: right;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: solid thin #8E8E8E;
}

fieldset legend, .stacked > .header, .form-container > .header {
    grid-column-start: left;
    grid-column-end: end;
    text-align: center;
    border-bottom: solid thin #8E8E8E;
    background: linear-gradient(#222222,#4D4D4D);
}

fieldset legend {
    /*all: unset;*/
    font-size: 14px;
    font-size: min(max(11px, .72vw),14px);
    margin-bottom: 0px;
    color:azure;
}

.newspaper-left {
    grid-column: left;
}

    .newspaper-left.padded,
    .padded.newspaper-left,
    .newspaper-right.padded,
    .padded.newspaper-right {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

.newspaper-right {
    grid-column: right;
}

.newspaper-span {
    grid-column-start: left;
    grid-column-end: end;
}

.threecontenu-span {
    grid-column-start: contenu;
    grid-column-end: end;
    /*padding: 0.25em;
        margin-right: 30px;*/
    background: none; /*linear-gradient(#34495E,#5D6D7E);*/
    /*border: solid 1px black;
        border-bottom: none;*/
}

.field-grid-two {
    display: grid;
    grid-gap: 0;
    grid-row-gap: 1em;
    grid-template-columns: [label] auto [field] 1fr [leave]
}

    .field-grid-two > input {
        border-radius: 0 !important;
        border: none !important;
        padding-left: 1em !important;
        grid-column-start: field;
        grid-column-end: leave
    }

    .field-grid-two > label, .field-grid > a {
        grid-column: label;
        margin: 0px;
        background: linear-gradient(#A2A2A2,#8E8E8E);
        padding: 7px 15px 7px 15px;
    }



.field-grid {
    display: grid;
    grid-gap: 0;
    grid-template-columns: [labels-start label1] auto [labels-end fields-start field1] auto [label2] auto [field2] 1fr [leave] 0px [fields-end end]
}

    .field-grid.newspaper-container {
        grid-template-columns: [left-start labels-left-start label1-left] auto [labels-left-end      fields-left-start field1-left] auto [label2-left] auto [field2-left] 1fr [fields-left-end left-end] 0.5em [right-start labels-right-start label1-right] auto [labels-right-end fields-right-start field1-right] auto [label2-right] auto [field2-right] 1fr [fields-right-end right-end];
    }

    .field-grid.bordered {
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .field-grid > label, .field-grid > a {
        grid-column: labels;
        margin: 0px;
    }

        .field-grid > label.label1 {
            grid-column: label1
        }

        .field-grid > label.label2 {
            grid-column: label2
        }

        .field-grid > label.newspaper-left {
            grid-column: labels-left;
            margin: 0px;
        }

        .field-grid > label.newspaper-right {
            grid-column: labels-right;
            margin: 0px;
        }

        .field-grid > label.label1.newspaper-left {
            grid-column: label1-left
        }

        .field-grid > label.label2.newspaper-left {
            grid-column: label2-left
        }

        .field-grid > label.label1.newspaper-right {
            grid-column: label1-right
        }

        .field-grid > label.label2.newspaper-right {
            grid-column: label2-right
        }

        .field-grid > label.filter {
            border-radius: 0;
        }

    .field-grid > div.label1, div.label2 {
        width: 0.5em;
        height: 100%;
        display: block;
        /*padding: 7px 15px 7px 15px;*/
        background: linear-gradient(#A2A2A2,#8E8E8E);
    }

    .field-grid > input.field2.leave-end {
        grid-column-start: field2;
        grid-column-end: leave
    }

    .field-grid > input, .field-grid > textarea, .field-grid > div, .field-grid > select {
        grid-column: fields
    }

        .field-grid > input.field1, .field-grid > textarea.field1, .field-grid > select.field1 {
            grid-column: field1
        }

        .field-grid > input.field2, .field-grid > textarea.field2, .field-grid > select.field2, div.field2 {
            grid-column-start: field2;
        }

        .field-grid > input.field1.newspaper-left, .field-grid > select.field1.newspaper-left, .field-grid > textarea.field1.newspaper-left, .field-grid > select.field1.newspaper-left {
            grid-column: field1-left
        }

        .field-grid > input.field2.newspaper-left, .field-grid > select.field2.newspaper-left, .field-grid > textarea.field2.newspaper-left, .field-grid > select.field2.newspaper-left {
            grid-column: field2-left;
        }


        .field-grid > input.field1.newspaper-right, .field-grid > select.field1.newspaper-right, .field-grid > textarea.field1.newspaper-right, .field-grid > select.field1.newspaper-right {
            grid-column: field1-right
        }

        .field-grid > input.field2.newspaper-right, .field-grid > select.field2.newspaper-right, .field-grid > textarea.field2.newspaper-right, .field-grid > select.field2.newspaper-right {
            grid-column-start: field2-right;
        }

        .field-grid > input.newspaper-left, .field-grid > select.newspaper-left, .field-grid > textarea.newspaper-left, .field-grid > select.newspaper-left {
            grid-column: fields-left
        }

        .field-grid > input.newspaper-right, .field-grid > select.newspaper-right, .field-grid > textarea.newspaper-right, .field-grid > select.newspaper-right {
            grid-column: fields-right
        }

    .field-grid .parsley-errors-list {
        grid-column-start: labels;
        grid-column-end: end;
        margin-bottom: 0px;
        border-radius: 0;
    }

.permission-grid {
    display: grid;
    grid-template-columns: [feature] 1fr [permission check] 1fr [permission check] 1fr [permission check] 1fr [permission check] 1fr;
    grid-template-rows: [header] auto [feature] auto [feature] auto [feature] auto [feature] auto;
    background: linear-gradient(#A2A2A2,#8E8E8E);
    width: 100%; /* Assurez-vous que la grille ne dépasse pas la largeur du conteneur parent */
    box-sizing: border-box; /* Inclure les bordures et le padding dans la largeur totale */
}

#divCheckAllLeft, #divCheckAllRight {
    grid-column: span 5;
    display: flex;
    align-items: center;
}

.permission-grid > label:not(.permission):nth-of-type(5) {
    grid-column: feature;
    grid-row: feature 1;
}

.permission-grid > .permision-check:nth-of-type(1) {
    grid-column: check 1;
    grid-row: feature 1;
}

.permission-grid > .permision-check:nth-of-type(2) {
    grid-column: check 2;
    grid-row: feature 1;
}

.permission-grid > .permision-check:nth-of-type(3) {
    grid-column: check 3;
    grid-row: feature 1;
}

.permission-grid > .permision-check:nth-of-type(4) {
    grid-column: check 4;
    grid-row: feature 1;
}

.permission-grid > label:not(.permission):nth-of-type(6) {
    grid-column: feature;
    grid-row: feature 2;
}

.permission-grid .permision-check:nth-of-type(5) {
    grid-column: check 1;
    grid-row: feature 2;
}

.permission-grid .permision-check:nth-of-type(6) {
    grid-column: check 2;
    grid-row: feature 2;
}

.permission-grid .permision-check:nth-of-type(7) {
    grid-column: check 3;
    grid-row: feature 2;
}

.permission-grid .permision-check:nth-of-type(8) {
    grid-column: check 4;
    grid-row: feature 2;
}

.permission-grid > label:not(.permission):nth-of-type(7) {
    grid-column: feature;
    grid-row: feature 3;
}

.permission-grid .permision-check:nth-of-type(9) {
    grid-column: check 1;
    grid-row: feature 3;
}

.permission-grid .permision-check:nth-of-type(10) {
    grid-column: check 2;
    grid-row: feature 3;
}

.permission-grid .permision-check:nth-of-type(11) {
    grid-column: check 3;
    grid-row: feature 3;
}

.permission-grid .permision-check:nth-of-type(12) {
    grid-column: check 4;
    grid-row: feature 3;
}

.permission {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: 0 3px 0 0;
    grid-gap: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.permision-check {
    margin: 0;
    grid-gap: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#checkVisualiser-left, #checkCreer-left, #checkModifier-left, #checkSupprimer-left, #checkVisualiser-right, #checkCreer-right,
#checkModifier-right, #checkSupprimer-right, #checkChargement, #checkExpeditions, #checkArticles, #checkCommandes, #checkFamilles,
#checkStock, #checkReceptions, #checkSorties, #checkPlanifications, #checkMouvements, #checkValStock, #checkValComm, #checkValVente, #checkValComm {
    margin-top: -2px;
    transform: scale(1);
    accent-color: #0E9703;
    cursor: pointer;
}

label.permission:nth-child(1) {
    grid-column: permission 1;
    grid-row: header
}

label.permission:nth-child(2) {
    grid-column: permission 2;
    grid-row: header
}

label.permission:nth-child(3) {
    grid-column: permission 3;
    grid-row: header
}

label.permission:nth-child(4) {
    grid-column: permission 4;
    grid-row: header
}

.accordion > li {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background: linear-gradient(#34495E,#5D6D7E);
    border: 1px solid #ddd;
}

    .accordion > li > a {
        display: block;
    }

    .accordion > li:first-child {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .accordion > li:last-child {
        margin-bottom: 0;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .accordion > li > input[type=radio]:not(:checked) ~ input {
        display: none;
    }

    .accordion > li > input[type=radio]:checked ~ input {
        display: block;
    }

.accordion fieldset > input[type=radio]:not(:checked) ~ input,
.accordion fieldset > input[type=radio]:not(:checked) ~ fieldset {
    display: none;
}

.accordion fieldset > input[type=radio]:checked ~ input,
.accordion fieldset > input[type=radio]:checked ~ fieldset {
    display: flex;
}

span.glyphicon + span {
    margin-left: 0.5em;
}


.modal-header {
    font-weight: 800;
    color: azure;
    background: linear-gradient(#222222,#4D4D4D);
}

.modal-content {
    background: linear-gradient(#34495E,#5D6D7E);
    /*max-height: 86vh;*/
    min-height: 20em;
    /*overflow-y: auto;*/
}

.modal-body {
    font-size: 15px;
    font-size: min(max(11px, .75vw),15px);
    color: azure;
}


.modal-footer .btnTiny-delete[onclick^="closeModal("] {
    position: absolute;
    margin-top: 1px !important;
    top: 1px;
    right: 1px;
    padding: .3em .7em;
    background-color: indianred;
    color: azure;
}

.btnTiny-delete-view-chargement {
    background: linear-gradient(0deg, rgba(222,0,0,1) 0%, rgba(195,0,0,1) 100%);
    padding: 2px 5px;
    color: azure;
    border-radius: 4px;
}

.btnTiny-delete-view-chargement:hover {
    background: linear-gradient(0deg, rgba(184,0,0,1) 0%, rgba(148,0,0,1) 100%);
    color: white;
    text-decoration: none;
}

.modal-footer .btnTiny-delete-view-chargement[onclick^="closeModal("] {
    position: absolute;
    margin-top: 1px !important;
    top: 3.7px;
    right: 14px;
    /*padding: .1em .2em;*/
    padding: 1px 6px;
    font-size: 110%;
    background-color: indianred;
    color: azure;
}

.btnCancel-mods {
    margin-top: 5px;
}

/*custom scroll bars pour popups:*/
/* width */
.modal-content::-webkit-scrollbar {
    width: 12px;
}

/* Track */
.modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.modal-content::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    .modal-content::-webkit-scrollbar-thumb:hover {
        background: #555;
    }




/*Badges de statut d'expédition */
.badge-non-valide {
    background-color: #0275d8;
}

.badge-valide {
    background-color: #5eb85c;
}

.badge-attente-ramasse {
    background-color: #5bc0de;
}

.badge-aquais {
    background: linear-gradient(#0000ff,#0000cc);
}

.badge-transit {
    background: linear-gradient(#6600cc,#4d0099);
}

.badge-livre {
    background: linear-gradient(#ff0066,#cc0052);
}

.badge-souffrance {
    background-color: #d9534f;
}

.badge-annule {
    background: linear-gradient(#969696,#969696);
}

.badge-info {
    background: linear-gradient(rgba(0,217,211,1), rgba(0,195,203,1));
}

/*Badges logistique TALK*/
.badge-nbPaletteStock {
    background: linear-gradient(0deg, rgba(255,169,0,1) 0%, rgba(220,73,52,1) 100%);
}

/*.badge-CommandeSaisie {
    background: linear-gradient(0deg, rgba(138,43,226,1) 0%, rgba(75,0,130,1) 100%);
}*/

.badge-CommandeValide {
    background: linear-gradient(0deg, rgba(255,169,0,1) 0%, rgba(226,181,47,1) 100%);
}

.badge-CommandesPriseEnCompte {
    background: linear-gradient(0deg, rgba(19,121,0,1) 0%, rgba(92,255,0,1) 100%);
}

.badge-CommandesEnCoursPrep {
    background: linear-gradient(0deg, rgba(255,169,0,1) 0%, rgba(220,73,52,1) 100%);
}

.badge-CommandePerpare {
    background: linear-gradient(0deg, rgba(63,218,247,1) 0%, rgba(0,212,255,1) 100%);
}

.badge-CommandeCharge {
    background: linear-gradient(0deg, rgba(0,137,255,1) 0%, rgba(0,116,255,1) 100%);
}

.badge-nbEntree {
    background: linear-gradient(0deg, rgba(92,255,0,1) 0%, rgba(0,255,16,1) 100%);
}

.badge-nbSortie {
    background: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,126,0,1) 100%);
}

/*Badges d'indicateurs administrateur TALK*/
.badge-nbClient {
    background: linear-gradient(0deg, rgba(79,2,161,1) 0%, rgba(219,0,255,1) 100%);
}

.badge-nbAccountsNotConfirmed {
    background: linear-gradient(#ff0066,#cc0052);
}

.badge-nbClientLogistique {
    background: linear-gradient(0deg, rgba(255,169,0,1) 0%, rgba(220,73,52,1) 100%);
}

.badge-nbClientMessDepart {
    background: linear-gradient(0deg, rgba(19,121,0,1) 0%, rgba(92,255,0,1) 100%);
}

.badge-nbClientMessArrivage {
    background: linear-gradient(0deg, rgba(19,121,0,1) 0%, rgba(238,255,0,1) 100%);
}

.badge-nbClientLot {
    background: linear-gradient(0deg, rgba(189,189,22,1) 0%, rgba(255,199,0,1) 100%);
}


.scrollable-table-wrapper {
    position: relative;
}

.scrollable-table {
    height: 50vh;
    overflow: auto;
    margin-top: 20px;
}

.scrollable-table-wrapper table {
    width: 100%;
}

    .scrollable-table-wrapper table thead th .text {
        position: absolute;
        top: -20px;
        z-index: 2;
        height: 20px;
        width: 35%;
    }

.scrollable, .scrollablepanier {
    display: grid;
    height: 50vh;
    overflow: auto;
}

    .scrollable tbody, .scrollable thead, .scrollable > * > tr,
    .scrollablepanier tbody, .scrollablepanier thead, .scrollablepanier > * > tr {
        display: contents;
    }

    .scrollable th, .scrollablepanier th {
        top: 0;
        position: sticky;
    }

.three-column-grid {
    width: 100%;
    display: grid;
    /*grid-gap: 1em;*/
    grid-template-columns: [pub] 10% 2% [contenu] 67% 2%[sidebar];
    grid-template-rows: auto auto auto;
    padding: 20px 2.5%;
}

.two-column-grid {
    display: grid;
    grid-template-columns: [pub] 10% 2.5% [contenu] 87.5%;
    grid-template-rows: auto auto auto;
    margin: 20px 8%;
    padding: 20px 2.5%;
}

    .two-column-grid .paginationcontenu {
        grid-column: contenu;
        padding: 0.25em;
        color: azure;
        background: inherit;
        border: none;
        align-content: center;
    }


.three-column-grid table {
    width: 100%;
    table-layout: fixed;
    overflow-wrap: break-word;
}


.three-column-grid .pub {
    /*width: 160px;
    max-width: 160px;*/
}


.header {
    font-weight: bold;
    font-size: 20px;
    font-size: min(max(14px, 1vw), 20px);
    /*padding-top: 10px;*/
    padding: 10px 0 10px 1em;
    color: azure;
    border-bottom: 1px solid #8E8E8E;

}

.header-small {
    font-weight: bold;
    font-size: 17px;
    font-size: min(max(12px, 0.9vw), 17px);
    /*padding-top: 10px;*/
    padding: 10px 0 10px 1em;
    color: azure;
    border-bottom: 1px solid #8E8E8E;
}


.three-column-grid .header {
    padding-top: 10px !important; /*?améliore la marge mais pourquoi est-ce nécessaire*/
}

.contenu {
    grid-column: contenu;
    /*padding: 0 0.25em;*/
    color: azure;
    background: linear-gradient(#34495E,#5D6D7E);
    /*border: solid 1px black;*/
    border: none !important;
}

/*.contenu > :not(.div-footerPanneau, h1, h2, h3, h4) {
            margin: 2vh 2%
        }*/

.pub {
    /*grid-column: pub;
            padding-top: 0 !important;
            margin-top: 0 !important;
            grid-row: 1 / span 3;*/
    width: 100%;
}

.sidebar {
    grid-column: sidebar;
    grid-row: 1 / span 3;
}

/*Responsive center dessous de 520px*/
@media (max-width: 520px) {
    .permission {
        font-size: 0.81em !important;
    }

    /*body {
        overflow-x: hidden;
    }*/

    #checkVisualiser-left, #checkCreer-left, #checkModifier-left, #checkSupprimer-left, #checkVisualiser-right, #checkCreer-right,
    #checkModifier-right, #checkSupprimer-right, #checkChargement, #checkExpeditions, #checkArticles, #checkCommandes, #checkFamilles,
    #checkStock, #checkReceptions, #checkSorties, #checkPlanifications, #checkMouvements, #checkValStock, #checkValComm, #checkValVente, #checkValComm {
        margin-top: -0.2px;
        transform: scale(0.8);
    }
}

/*Responsive center dessous de 440px*/
@media (max-width: 440px) {
    .permission {
        font-size: 0.6em !important;
    }

    #checkVisualiser-left, #checkCreer-left, #checkModifier-left, #checkSupprimer-left, #checkVisualiser-right, #checkCreer-right,
    #checkModifier-right, #checkSupprimer-right, #checkChargement, #checkExpeditions, #checkArticles, #checkCommandes, #checkFamilles,
    #checkStock, #checkReceptions, #checkSorties, #checkPlanifications, #checkMouvements, #checkValStock, #checkValComm, #checkValVente, #checkValComm {
        margin-top: -1.9px;
        transform: scale(0.8);
    }

}

/*Responsive center dessous de 375px*/
@media (max-width: 375px) {
    .permission {
        font-size: 0.59em !important;
    }

    #checkVisualiser-left, #checkCreer-left, #checkModifier-left, #checkSupprimer-left, #checkVisualiser-right, #checkCreer-right,
    #checkModifier-right, #checkSupprimer-right, #checkChargement, #checkExpeditions, #checkArticles, #checkCommandes, #checkFamilles,
    #checkStock, #checkReceptions, #checkSorties, #checkPlanifications, #checkMouvements, #checkValStock, #checkValComm, #checkValVente, #checkValComm {
        margin-top: -0.3px;
        transform: scale(0.8);
    }
}

/*(min-width: 769px) and*/
@media (max-width: 1199px) {
    .three-column-grid {
        /*width: 100%;*/
        min-width: 810px;
        display: grid;
        /*grid-gap: 1em;*/
        grid-template-columns: [pub] 0 0 [contenu] 79% 2px[sidebar];
        grid-template-rows: auto auto auto;
        padding: 20px 2px 0 2px;
    }

        .three-column-grid .contenu {
            min-width: 520px;
        }



    .two-column-grid {
        display: grid;
        width: 100%;
        min-width: 719px;
        grid-template-columns: [pub] 0 0 [contenu];
        grid-template-rows: auto auto auto;
        margin: 20px auto;
        padding: 20px .5%;
    }

    .col-md-11 {
        width: 96%;
        margin: auto !important;
    }

    .tableau-bord {
        width: 100%;
        margin: 70px 0 5px 0 !important;
        padding: 0 !important;
    }
    /*.two-column-grid .contenu{

        }*/
    .modal-content {
        width: 100% !important;
    }
}

.tiers-right-grid {
    display: flex; 
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contenuLogistique {
    grid-column: contenu;
    padding: 0.25em;
    background: rgb(93,109,126);
    background: linear-gradient(0deg, rgba(93,109,126,1) 0%, rgba(52,73,94,1) 18%, rgba(70,104,138,1) 90%, rgba(107,166,171,1) 91%, rgba(234,102,28,1) 92%, rgba(255,154,33,1) 100%);
    border: solid 1px black;
    border-bottom: none;
}

.contenuMessagerie {
    grid-column: contenu;
    padding: 0.25em;
    background: rgb(93,109,126);
    background: linear-gradient(0deg, rgba(93,109,126,1) 0%, rgba(52,73,94,1) 18%, rgba(70,104,138,1) 92%, rgba(107,166,171,1) 93%, rgba(56,154,43,1) 94%, rgba(156,195,26,1) 100%);
    border: solid 1px black;
    border-bottom: none;
}

    .contenu ~ .contenu, .contenuLogistique ~ .contenuLogistique, .contenuMessagerie ~ .contenuMessagerie {
        border: solid 1px black;
        border-top: none;
    }

    .contenu.bas, .contenuMessagerie.bas, .contenuLogistique.bas {
        grid-row: 3;
    }



.gappy {
    grid-row-gap: 0.5em;
}


.tinyheaderleft, .tinyheaderright {
    font-weight: bold;
    /*font-size: 15px;*/
    /*padding-top: 10px;*/
    padding-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    /*text-align: center;*/
    border-bottom: solid thin #8E8E8E;
    color: azure;
}

.property-grid {
    display: grid;
    grid-column-gap: 0;
    grid-row-gap: 0.5em;
    align-content: start;
    grid-template-columns: [labels-start label1] auto [labels-end fields-start field1] 1fr [label2] auto [field2] 1fr [fields-end buttons] auto [end]
}

    .property-grid:not(.gappy) {
        grid-gap: 0;
    }

    .property-grid.newspaper-container {
        grid-template-columns: [left-start labels-left-start label1-left] auto [labels-left-end fields-left-start field1-left] auto [label2-left] auto [field2-left] 1fr [fields-left-end left-end] 0.5em [right-start labels-right-start label1-right] auto [labels-right-end fields-right-start field1-right] auto [label2-right] auto [field2-right] 1fr [fields-right-end buttons] auto [right-end];
    }

    .property-grid:not(.newspaper-container) .header {
        all: unset;
        width: 100%;
        border-bottom: thin solid #A2A2A2;
        text-align: center;
        color: azure;
        background: linear-gradient(#222222,#4D4D4D);
        grid-column-start: labels-start;
        grid-column-end: end;
    }

    .property-grid > span {
        /*grid-column-start: labels-start;
        grid-column-end: end;*/
        grid-column: buttons;
        font-weight: normal;
        box-sizing: border-box;
        color: black;
        background: linear-gradient(#D6DBDF,#EBEDEF);
        margin: 0;
        /*height: 34px;*/
        padding: 5px 10px;
        border: thin solid #A2A2A2;
        font-size: 14px;
        font-size: min(max(11px, .72vw),14px);
        line-height: 1.42857143;
    }

    .property-grid > label:not(.property, .property1, .property2) {
        grid-column: labels;
        margin: 0px;
    }

    .property-grid > label.label1 {
        grid-column: label1
    }

    .property-grid > label.label2 {
        grid-column: label2
    }

    .property-grid > label.newspaper-left {
        grid-column: labels-left;
        margin: 0px;
    }

    .property-grid > label.newspaper-right {
        grid-column: labels-right;
        margin: 0px;
    }

    .property-grid > label.label1.newspaper-left {
        grid-column: label1-left
    }

    .property-grid > label.label2.newspaper-left {
        grid-column: label2-left
    }

    .property-grid > label.label1.newspaper-right {
        grid-column: label1-right
    }

    .property-grid > label.label2.newspaper-right {
        grid-column: label2-right
    }

    .property-grid > label.property {
        grid-column: fields
    }

    .property-grid > label.property1 {
        grid-column: field1
    }

    .property-grid > label.property2 {
        grid-column-start: field2;
    }

    .property-grid > label.property.newspaper-left {
        grid-column: fields-left
    }

    .property-grid > label.property1.newspaper-left {
        grid-column: field1-left
    }

    .property-grid > label.property2.newspaper-left {
        grid-column-start: field2-left;
    }

    .property-grid > label.property.newspaper-right {
        grid-column: fields-right
    }

    .property-grid > label.property1.newspaper-right {
        grid-column: field1-right
    }

    .property-grid > label.property2.newspaper-right {
        grid-column-start: field2-right;
    }

    /*.property-grid > div:empty {
        display: none;
    }*/

    .property-grid .parsley-errors-list {
        border-radius: 0;
    }

    .property-grid > .errors {
        grid-column-start: labels-start;
        grid-column-end: end;
    }

    .property-grid > .errors1 {
        grid-column-start: field1;
        grid-column-end: label2;
    }

    .property-grid > .errors2 {
        grid-column-start: field2;
        grid-column-end: buttons;
    }

label.property, label.property1, label.property2 {
    font-weight: normal;
    box-sizing: border-box;
    color: black;
    background: linear-gradient(#D6DBDF,#EBEDEF);
    margin: 0;
    height: 34px;
    padding: 6px 12px;
    border: thin solid #A2A2A2;
    font-size: 14px;
    font-size: min(max(11px, .72vw),14px);
    line-height: 1.42857143;
}

/*
    Gestion des boutons en synergie avec les icones de FontAwesome (indépendant de Bootstrap)
*/


.btnTiny-valid {
    background: linear-gradient(0deg, rgba(48,187,0,1) 0%, rgba(1,200,0,1) 100%);
    padding: 5px 5px 5px 5px;
    color: azure;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

    .btnTiny-valid:hover {
        background: linear-gradient(0deg, rgba(36,140,0,1) 0%, rgba(1,151,0,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-valid {
    background: linear-gradient(0deg, rgba(48,187,0,1) 0%, rgba(1,200,0,1) 100%);
    padding: 5px 5px 5px 5px;
    color: azure;
    border-radius: 5px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-valid:hover {
        background: linear-gradient(0deg, rgba(36,140,0,1) 0%, rgba(1,151,0,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-valid-exped {
    background: linear-gradient(0deg, rgba(48,187,0,1) 0%, rgba(1,200,0,1) 100%);
    padding: 12px 20px;
    color: azure;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-valid-exped:hover {
        background: linear-gradient(0deg, rgba(36,140,0,1) 0%, rgba(1,151,0,1) 100%);
        color: white;
        text-decoration: none;
    }


    .btnBig-primary {
        color: azure;
        background-color: #007bff;
        border-color: #007bff;
        height: 40px;
        padding: 6px 12px 6px 12px;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
         text-decoration: none;
    }

    .btnBig-primary:hover {
        background: #006bef;
        color: white;
        text-decoration: none;
    }

    .btnTiny-link {
        background: linear-gradient(0deg, rgba(0,217,211,1) 0%, rgba(0,195,203,1) 100%);
        padding: 6px 12px 6px 12px;
        color: azure;
        border-radius: 5px;

    }

    .btnTiny-link:hover {
        background: linear-gradient(0deg, rgba(0,166,162,1) 0%, rgba(0,116,121,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-link {
    background: linear-gradient(0deg, rgba(0,217,211,1) 0%, rgba(0,195,203,1) 100%);
    padding: 6px 12px 6px 12px;
    color: azure;
    border-radius: 5px;
    height: 40px;
    line-height: 2.2;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

    .btnBig-link:hover {
        background: linear-gradient(0deg, rgba(0,166,162,1) 0%, rgba(0,116,121,1) 100%);
        color: white;
        text-decoration: none;
    }




.btnTiny-modify {
    background: linear-gradient(0deg, rgba(255,183,0,1) 0%, rgba(219,157,0,1) 100%);
    padding: 5px 7px 5px 7px;
    color: azure;
    border-radius: 5px;
}

    .btnTiny-modify:hover {
        background: linear-gradient(0deg, rgba(214,154,0,1) 0%, rgba(177,127,0,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-modify {
    background: linear-gradient(0deg, rgba(255,183,0,1) 0%, rgba(219,157,0,1) 100%);
    padding: 6px 12px 6px 12px;
    color: azure;
    border-radius: 5px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-modify:hover {
        background: linear-gradient(0deg, rgba(214,154,0,1) 0%, rgba(177,127,0,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-modify-exped {
    background: linear-gradient(0deg, rgba(255,183,0,1) 0%, rgba(219,157,0,1) 100%);
    padding: 12px 20px;
    color: azure;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-modify-exped:hover {
        background: linear-gradient(0deg, rgba(214,154,0,1) 0%, rgba(177,127,0,1) 100%);
        color: white;
        text-decoration: none;
    }



.btnTiny-delete {
    background: linear-gradient(0deg, rgba(222,0,0,1) 0%, rgba(195,0,0,1) 100%);
    padding: 5px 9px 5px 9px;
    color: azure;
    border-radius: 4px;
}

    .btnTiny-delete:hover {
        background: linear-gradient(0deg, rgba(184,0,0,1) 0%, rgba(148,0,0,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-delete {
    background: linear-gradient(0deg, rgba(222,0,0,1) 0%, rgba(195,0,0,1) 100%);
    padding: 6px 12px;
    color: azure;
    border-radius: 5px;
}

    .btnBig-delete:hover {
        background: linear-gradient(0deg, rgba(184,0,0,1) 0%, rgba(148,0,0,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-delete-exped {
    background: linear-gradient(0deg, rgba(222,0,0,1) 0%, rgba(195,0,0,1) 100%);
    padding: 20px 12px;
    width: 40px;
    color: azure;
    border-radius: 5px;
}

    .btnBig-delete-exped:hover {
        background: linear-gradient(0deg, rgba(184,0,0,1) 0%, rgba(148,0,0,1) 100%);
        color: white;
        text-decoration: none;
    }



.btnTiny-lock {
    background: linear-gradient(0deg, rgba(0,217,211,1) 0%, rgba(0,195,203,1) 100%);
    padding: 5px 8px 5px 8px;
    color: azure;
    border-radius: 5px;
}

    .btnTiny-lock:hover {
        background: linear-gradient(0deg, rgba(0,166,162,1) 0%, rgba(0,116,121,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-lock {
    background: linear-gradient(0deg, rgba(0,217,211,1) 0%, rgba(0,195,203,1) 100%);
    padding: 6px 12px 6px 12px;
    color: azure;
    border-radius: 5px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-lock:hover {
        background: linear-gradient(0deg, rgba(0,166,162,1) 0%, rgba(0,116,121,1) 100%);
        color: white;
        text-decoration: none;
    }



.btnTiny-add {
    background: linear-gradient(0deg, rgba(0,125,231,1) 0%, rgba(0,102,189,1) 100%);
    padding: 5px 7px 5px 7px;
    color: azure !important;
    border-radius: 5px;
}

    .btnTiny-add:hover {
        background: linear-gradient(0deg, rgba(0,100,200,1) 0%, rgba(0,80,159,1) 50%);
        color: white;
        text-decoration: none;
    }



.btnTiny-print {
    background: linear-gradient(0deg, rgba(0,228,141,1) 0%, rgba(0,209,129,1) 100%);
    padding: 5px 9px 5px 9px;
    color: azure;
    border-radius: 5px;
}

    .btnTiny-print:hover {
        background: linear-gradient(0deg, rgba(0,198,123,1) 0%, rgba(0,164,101,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-print {
    background: linear-gradient(0deg, rgba(0,228,141,1) 0%, rgba(0,209,129,1) 100%);
    padding: 6px 12px 6px 12px;
    color: azure;
    border-radius: 5px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-print:hover {
        background: linear-gradient(0deg, rgba(0,198,123,1) 0%, rgba(0,164,101,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-print-exped {
    background: linear-gradient(0deg, rgba(0,228,141,1) 0%, rgba(0,209,129,1) 100%);
    padding: 12px 20px;
    color: azure;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-print-exped:hover {
        background: linear-gradient(0deg, rgba(0,198,123,1) 0%, rgba(0,164,101,1) 100%);
        color: white;
        text-decoration: none;
    }



.btnTiny-consult {
    background: linear-gradient(0deg, rgba(98,0,255,1) 0%, rgba(71,0,184,1) 100%);
    padding: 5px 6px;
    /*padding: 5px min(max(3px, .3vw),4px);*/
    color: azure;
    border-radius: 5px;
    /*font-size: min(max(8px, .6vw), 14px)*/
}

    .btnTiny-consult:hover {
        background: linear-gradient(0deg, rgba(64,0,167,1) 0%, rgba(31,0,82,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-consult {
    background: linear-gradient(0deg, rgba(98,0,255,1) 0%, rgba(71,0,184,1) 100%);
    padding: 6px 12px 6px 12px;
    /*padding: 5px min(max(3px, .3vw),4px);*/
    color: azure;
    border-radius: 5px;
    /*font-size: min(max(8px, .6vw), 14px)*/
    height: 40px;
    line-height: 2.2;
}

    .btnBig-consult:hover {
        background: linear-gradient(0deg, rgba(64,0,167,1) 0%, rgba(31,0,82,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-consult-exped {
    background: linear-gradient(0deg, rgba(98,0,255,1) 0%, rgba(71,0,184,1) 100%);
    padding: 12px 20px;
    /*padding: 5px min(max(3px, .3vw),4px);*/
    color: azure;
    border-radius: 5px;
    /*font-size: min(max(8px, .6vw), 14px)*/
    width: 40px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-consult-exped:hover {
        background: linear-gradient(0deg, rgba(64,0,167,1) 0%, rgba(31,0,82,1) 100%);
        color: white;
        text-decoration: none;
    }



.btnTiny-mouvements {
    background: linear-gradient(0deg, rgba(255,183,0,1) 0%, rgba(219,157,0,1) 100%);
    padding: 5px 5px 5px 6px;
    color: azure;
    border-radius: 5px;
}

    .btnTiny-mouvements:hover {
        background: linear-gradient(0deg, rgba(214,154,0,1) 0%, rgba(177,127,0,1) 100%);
        color: white;
        text-decoration: none;
    }

.btnBig-mouvements {
    background: linear-gradient(0deg, rgba(0,125,231,1) 0%, rgba(0,102,189,1) 100%);
    
    /* background: linear-gradient(0deg, rgba(255,183,0,1) 0%, rgba(219,157,0,1) 100%);*/
    padding: 5px 5px 5px 6px;
    color: azure;
    border-radius: 5px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-mouvements:hover {
        background: linear-gradient(0deg, rgba(0,100,200,1) 0%, rgba(0,80,159,1) 50%);
        /*background: linear-gradient(0deg, rgba(214,154,0,1) 0%, rgba(177,127,0,1) 100%);*/
        color: white;
        text-decoration: none;
    }

.btnBig-mouvements-exped {
    background: linear-gradient(0deg, rgba(0,125,231,1) 0%, rgba(0,102,189,1) 100%);
    padding: 12px 20px;
    color: azure;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-mouvements-exped:hover {
        background: linear-gradient(0deg, rgba(0,100,200,1) 0%, rgba(0,80,159,1) 50%);
        /*background: linear-gradient(0deg, rgba(214,154,0,1) 0%, rgba(177,127,0,1) 100%);*/
        color: white;
        text-decoration: none;
    }



.btnBig-research {
    background: linear-gradient(0deg, rgba(98,0,255,1) 0%, rgba(71,0,184,1) 100%);
    border: none;
    padding: 6px 12px 6px 12px;
    color: azure;
    border-radius: 3px;
    transition: 0.3s;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-research:hover {
        background: linear-gradient(0deg, rgba(64,0,167,1) 0%, rgba(31,0,82,1) 100%);
        color: white;
        text-decoration: none;
    }



.btnBig-resetFilters {
    background: linear-gradient(0deg, rgba(0,217,211,1) 0%, rgba(0,195,203,1) 100%);
    padding: 6px 12px 6px 12px;
    border: none;
    color: azure;
    border-radius: 3px;
    transition: 0.3s;
    height: 40px;
    line-height: 2.2;
    display: inline-block;
}

    .btnBig-resetFilters:hover {
        background: linear-gradient(0deg, rgba(0,166,162,1) 0%, rgba(0,116,121,1) 100%);
        color: white;
        text-decoration: none;
    }



.btnBig-export {
    background: linear-gradient(0deg, rgba(0,219,47,1) 0%, rgba(0,173,37,1) 100%);
    padding: .35em min(max(.1em, .6vw), .66em);
    margin-bottom: 15px;
    border: none;
    text-align: center;
    color: azure;
    border-radius: 5px;
    transition: 0.3s;
    max-height: 2.3em;
    height: 40px;
    line-height: 1.2em;
}

    .btnBig-export:hover {
        background: linear-gradient(0deg, rgba(0,178,38,1) 0%, rgba(0,126,27,1) 100%);
        color: white;
        text-decoration: none;
    }

#transporteur-csv {
    width: 10%;
}



.btnBig-add-bleu {
    background: linear-gradient(0deg, rgba(0,125,231,1) 0%, rgba(0,102,189,1) 100%);
    padding: 6px 12px 6px 12px;
    border: none;
    color: azure;
    border-radius: 5px;
    transition: 0.3s;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-add-bleu:hover {
        background: linear-gradient(0deg, rgba(0,100,200,1) 0%, rgba(0,80,159,1) 50%);
        color: white;
        text-decoration: none;
    }



.btnBig-add-excel-exped {
    background: linear-gradient(0deg, rgba(0,150,80,1) 0%, rgba(0,120,60,1) 100%);
    padding: 6px 12px 6px 12px;
    border: none;
    color: azure;
    border-radius: 5px;
    transition: 0.3s;
    width: 40px;
    height: 40px;
    line-height: 2.2;
}

    .btnBig-add-excel-exped:hover {
        background: linear-gradient(0deg, rgba(0,176,80,1) 0%, rgba(0,128,64,1) 50%);
        color: white;
        text-decoration: none;
    }



.btnBig-add {
    background: linear-gradient(0deg, rgba(0,255,64,1) 0%, rgba(0,220,50,1) 100%);
    /*padding: .88em 1ch .6em 1ch;*/
    padding: 6px 12px;
    border: none;
    color: azure !important;
    border-radius: 5px;
    transition: 0.3s;
    height: 40px;
}

    .btnBig-add:hover {
        background: linear-gradient(0deg, rgba(0,178,38,1) 0%, rgba(0,126,27,1) 100%);
        color: white;
        text-decoration: none;
    }

.attendu {
    background-color: #455754 !important;
    background: #455754 !important; /*#1c4f4b*/
    color: white;
}

.planif-flex {
    display: flex; 
    flex-direction: row;
}

@media (max-width: 625px) {
    .planif-flex {
        flex-direction: column;
    }
}

/* pour le fil d'Arianne */
.arianne {
    margin-left: 10vw;
    padding: 20px 0 5px 0;
    margin-bottom: 2.3em;
    font-size: 18px;
    font-size: min(max(12px, .76vw),18px);
    font-style: italic;
    color: dimgrey;
    border-bottom: 1px solid #ddd;
    display: inline-block;
}

    .arianne > span a:visited {
        color: steelblue !important; /*parce que il y a conflit avec une regle dans l'accordeon */
    }

/* pour les version imprimables */
@media print {
    .cache-impression {
        display: none;
    }

    .marge-impression {
        width: 100%;
        margin: 0;
    }
}

@media screen {
    .marge-impression {
        margin: 20px 50px;
    }
}


.div-headPanneau > a {
    color: cornflowerblue;
}

    .div-headPanneau > a:active {
        color: cornflowerblue;
    }

    .div-headPanneau > a:hover {
        color: cornflowerblue;
    }

    .div-headPanneau > a:visited {
        color: cornflowerblue;
    }

    .div-headPanneau > a:link {
        color: cornflowerblue;
    }