
/*--------------------------------------------------------*/
/*#region -------------------- Navbar --------------------*/
nav.navbar-dark.bg-navbar {
    background-color: #bb0003;
}
nav.navbar-dark .navbar-toggler {
    color: #fff;
    border-color: #fff;
}
nav.navbar-dark .navbar-toggler[aria-expanded="true"] {
    border-color: #000;
    background-color: #fff;
}
nav.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
nav.navbar-dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
nav.navbar-dark .navbar-nav .nav-link {
    color: #fff;
}
nav.navbar-dark .nav-item.active {
    background: #fff;
}
nav.navbar-dark .navbar-nav .active > .nav-link {
    color: #000;
}
nav.navbar-dark .navbar-nav li.nav-item:not(:last-child),
nav.navbar-dark .form-inline a:not(:last-child) {
    margin-right: .6rem;
}
nav.navbar-dark .form-inline a.btn i,
nav.navbar-dark .form-inline button#dropdownAccountButton i {
    font-size: 1.65rem;
    padding: .5rem 0;
}
nav.navbar-dark .form-inline a.btn {
    background-color: #00406e;
    border-color: #00406e;
    padding: 0 1rem;
    border-width: 3px;
    border-radius: 25px;
}
@media (max-width: 991px) {
    nav.navbar-dark .form-inline a.btn,
    nav.navbar-dark .form-inline a.btn + .dropdown {
        margin-top: .5rem;
    }
}
nav.navbar-dark .form-inline button#dropdownAccountButton {
    background: none;
    border-color: transparent;
    padding: 0 1rem;
    border-width: 3px;
    border-radius: 25px;
}
nav.navbar-dark .form-inline button#dropdownAccountButton:hover,
nav.navbar-dark .form-inline button#dropdownAccountButton:focus,
nav.navbar-dark .form-inline button#dropdownAccountButton.active {
    background-color: #fff;
    color: #000;
    border-color: #00406e;
}
nav.navbar-dark .form-inline .dropdown-menu {
    padding: 1rem;
}
nav.navbar-dark .form-inline .dropdown-menu .username-email {
    border-bottom: 1px solid #aaa;
    padding: 0 .5rem .5rem .5rem;
    margin-bottom: .5rem;
}
nav.navbar-dark .form-inline .dropdown-menu .username-email .username {
    color: #df0004;
    font-weight: 600;
    font-size: 14px;
}
nav.navbar-dark .form-inline .dropdown-menu .username-email .email {
    font-size: 12px;
    color: #8d8d8d;
}
nav.navbar-dark .form-inline .dropdown-menu .dropdown-item {
    font-size: 14px;
    color: #000;
    padding: .5rem .75rem .5rem .5rem;
    min-width: 175px;
    border-radius: 5px;
}
nav.navbar-dark .form-inline .dropdown-menu .dropdown-item:hover {
    background-color: #00406e30;
}
nav.navbar-dark .form-inline a.btn:hover,
nav.navbar-dark .form-inline a.btn.active {
    background-color: #fff;
    color: #000;
}
nav.navbar-dark .form-inline .dropdown-toggle::after {
    display: none;
}
@media (max-width:767px) {
    nav.navbar-dark .navbar-brand {
        max-width: 75%;
    }
}
/*#endregion -------------------- Navbar --------------------*/

/*-----------------------------------------------------------------*/
/*#region -------------------- Erreur 404 page --------------------*/
#erreur-404 h1 {
    font-size: 6rem;
}
#erreur-404 a.btn i {
    font-size: 1.65rem;
    padding: .5rem .6rem .5rem 0;
}
#erreur-404 a.btn span {
    font-weight: 600;
    margin-top: auto;
    margin-bottom: auto;
}
#erreur-404 a.btn {
    background-color: #00406e;
    border-color: #00406e;
    padding: 0 1rem;
    border-width: 3px;
    border-radius: 16px;
    display: flex;
    width: max-content;
    margin: auto;
}
#erreur-404 a.btn:hover,
#erreur-404 a.btn.active {
    background-color: #df0004;
}
/*#endregion -------------------- Erreur 404 page --------------------*/

/*---------------------------------------------------------------------------*/
/*#region -------------------- Formulaire connexion page --------------------*/
#formulaire-connexion main form#connection-form {
    padding: 3rem 3.5rem 2.5rem 3.5rem;
    border: 1px solid #aaa;
    background: #fff;
    border-radius: 5px;
}
#formulaire-connexion main form#connection-form #loading-balls {
    display: none;
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 100%;
    height: 216px;
}
@media (max-width: 576px) {
    #formulaire-connexion main form#connection-form {
        padding: 2rem 1.5rem 1.5rem 1.5rem;
    }
    #formulaire-connexion main form#connection-form #loading-balls {
        height: 184px;
    }
}
/*#endregion -------------------- Erreur 404 page --------------------*/

/*----------------------------------------------------------------------------------*/
/*#region -------------------- Mes agences & mes contacts pages --------------------*/
#mes-agences main li.list-group-item,
#mes-contacts main li.list-group-item {
    padding: .5rem 2rem 0rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
}
#mes-contacts main li.list-group-item.is_contact_free_delivery {
    border: 3px solid #df0004;
}
#mes-contacts main li.list-group-item.is_paid_transition_shuttle {
    border: 3px solid #00406e;
}
#mes-agences main li.list-group-item h4,
#mes-contacts main li.list-group-item h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #df0004;
}
#mes-agences main li.list-group-item h5,
#mes-contacts main li.list-group-item h5 {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #df0004;
}
#mes-agences main li.list-group-item p,
#mes-contacts main li.list-group-item p {
    margin-bottom: .5rem;
    font-size: .875rem;
    display: flex;
}
#mes-agences main li.list-group-item .delete-agencie i.material-symbols-outlined,
#mes-agences main li.list-group-item .edit-agencie i.material-symbols-outlined,
#mes-contacts main li.list-group-item .delete-contact i.material-symbols-outlined,
#mes-contacts main li.list-group-item .edit-contact i.material-symbols-outlined {
    font-size: 1.5rem;
}
#mes-agences main li.list-group-item i.material-symbols-outlined,
#mes-contacts main li.list-group-item i.material-symbols-outlined {
    font-size: 1.313rem;
}
#mes-agences main .modal-dialog h4.modal-title,
#mes-contacts main .modal-dialog h4.modal-title {
    font-weight: 700;
    color: #df0004;
    text-transform: uppercase;
}
#mes-agences main .delete-agencie:hover,
#mes-agences main .edit-agencie:hover,
#mes-contacts main .delete-contact:hover,
#mes-contacts main .edit-contact:hover {
    color: #df0004;
}
#mes-contacts main input[type='checkbox']#is_paid_transition_shuttle,
#mes-contacts main input[type='checkbox']#edit_is_paid_transition_shuttle,
#mes-contacts main input[type='checkbox']#is_contact_free_delivery,
#mes-contacts main input[type='checkbox']#edit_is_contact_free_delivery {
    width: 18px;
    height: 18px;
    margin-top: .225rem;
}
/*#endregion -------------------- Mes agences & mes contacts pages --------------------*/

/*-----------------------------------------------------------------*/
/*#region -------------------- Mes compte page --------------------*/
#mes-comptes main div.bloc-account {
    padding: 1.5rem 2rem 1rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
    background: #fff;
}
#mes-comptes main div.bloc-account h5 {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}
#mes-comptes main div.bloc-account h4 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: #df0004;
}
#mes-comptes main div.bloc-account h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #df0004;
}
#mes-comptes main div.bloc-account .delete-account i.material-symbols-outlined,
#mes-comptes main div.bloc-account .edit-account i.material-symbols-outlined {
    font-size: 1.5rem;
}
#mes-comptes main .modal-dialog h4.modal-title {
    font-weight: 700;
    color: #df0004;
    text-transform: uppercase;
}
#mes-comptes main div.bloc-account .delete-account:hover,
#mes-comptes main div.bloc-account .edit-account:hover {
    color: #df0004;
}
/*#endregion -------------------- Mes comptes page --------------------*/

/*------------------------------------------------------------------------*/
/*#region -------------------- Saisir mes envois page --------------------*/
#saisir-mes-envois main div.start-bloc,
#saisir-mes-envois main div.arrival-bloc,
#saisir-mes-envois main div.package-bloc {
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: #fff;
    padding: 1.5rem 2rem;
    height: 100%;
}
#saisir-mes-envois main div.start-bloc h4,
#saisir-mes-envois main div.arrival-bloc h4,
#saisir-mes-envois main div.package-bloc h4 {
    font-weight: 700;
    color: #df0004;
    margin-bottom: 1.5rem;
}
#saisir-mes-envois main div.arrival-bloc #button-save-contact:disabled {
    cursor: not-allowed;
}
#saisir-mes-envois main div.arrival-bloc #button-save-contact:disabled:hover {
    background-color: #00406e !important;
    border-color: #00406e !important;
}
#saisir-mes-envois main .package-bloc form#package-form span.text-into-input,
#saisir-mes-envois main .shipment-special-price span.text-into-input {
    position: absolute;
    right: 15px;
    bottom: 7px;
    color: #888;
}
#saisir-mes-envois main .package-bloc form#package-form input#reference {
    padding: 0 84px 0 12px;
}
#saisir-mes-envois main .package-bloc form#package-form #add-ligne-package {
    color: #df0004;
    cursor: pointer;
}
#saisir-mes-envois main .package-bloc form#package-form #add-ligne-package:hover {
    color: #b20003;
}
#saisir-mes-envois main #package-form i.delete-line:hover {
    color: #df0004;
}
#saisir-mes-envois main input[type='checkbox']#print-shipment,
#saisir-mes-envois main input[type='checkbox']#have-special-price {
    width: 18px;
    height: 18px;
    margin-top: .6rem;
}
#saisir-mes-envois main #shipment-special-price {
    width: 150px;
}
#saisir-mes-envois main .modal-dialog h4.modal-title {
    font-weight: 700;
    color: #df0004;
    text-transform: uppercase;
}
#saisir-mes-envois main input[type='checkbox']#is_paid_transition_shuttle,
#saisir-mes-envois main input[type='checkbox']#is_contact_free_delivery {
    width: 18px;
    height: 18px;
    margin-top: .225rem;
}
/*#endregion -------------------- Saisir mes envois page --------------------*/

/*-----------------------------------------------------------------*/
/*#region -------------------- Mon panier page --------------------*/
#mon-panier main li.list-group-item {
    padding: .5rem 2rem 0rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
}
#mon-panier main .action-bloc {
    padding: 1rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: #fff;
}
@media (max-width: 767px) {
    #mon-panier main .action-bloc {
        padding: .5rem 0rem;
    }
}
#mon-panier main input[type='checkbox'] {
    width: 18px;
    height: 18px;
}
#mon-panier main li.list-group-item h5,
#mon-panier main li.list-group-item .h5 {
    margin-bottom: .5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #df0004;
}
#mon-panier main li.list-group-item .transition_shuttle {
    color: #fff;
    background: #00406e;
    font-weight: 600;
    border-radius: 5px;
    padding: 5px 12px;
    width: max-content;
    font-size: 1.125rem;
}
#mon-panier main li.list-group-item .delete-shipment i.material-symbols-outlined,
#mon-panier main li.list-group-item .edit-shipment i.material-symbols-outlined,
#mon-panier main li.list-group-item .print-shipment i.material-symbols-outlined,
#mon-panier main li.list-group-item .alert-danger i.material-symbols-outlined {
    font-size: 1.5rem;
}
#mon-panier main li.list-group-item .print-shipment i.material-symbols-outlined.is-printed {
    color: #00ac0b !important;
}
#mon-panier main li.list-group-item i.material-symbols-outlined {
    font-size: 1.313rem;
}
#mon-panier main li.list-group-item .delete-shipment:hover,
#mon-panier main li.list-group-item .edit-shipment:hover,
#mon-panier main li.list-group-item .print-shipment:hover {
    color: #df0004;
}
#mon-panier main li.list-group-item p {
    margin-bottom: .25rem;
    font-size: .875rem; 
    display: inline-block;
    width: 100%;
}
#mon-panier main li.list-group-item p.start_date {
    font-size: 1rem;
}
#mon-panier main li.list-group-item .package-line i.material-symbols-outlined {
    position: absolute;
    left: -10px;
}
#mon-panier main #date-valid-or-not-selector .btn-check + label[for='date-not-valid-radio'],
#mon-panier main #date-valid-or-not-selector .btn-check + label[for='date-valid-radio'] {
    background-color: #fff;
    border-color: #fff;
    border-radius: 50px;
    color: #000;
    font-size: 1rem;
    font-weight: 600;
    padding: 1.5rem 2rem;
    margin: 0;
    box-shadow: none !important;
    text-transform: uppercase;
    width: 295px;
    text-align: center;
}
#mon-panier main #date-valid-or-not-selector .btn-check:hover + label[for='date-not-valid-radio'],
#mon-panier main #date-valid-or-not-selector .btn-check:hover + label[for='date-valid-radio'] {
    background-color: #0068b3;
    border-color: #0068b3;
    color: #fff;
}
#mon-panier main #date-valid-or-not-selector .btn-check:checked + label[for='date-not-valid-radio'],
#mon-panier main #date-valid-or-not-selector .btn-check:checked + label[for='date-valid-radio'] {
    background-color: #00406e;
    border-color: #00406e;
    color: #fff;
}
#mon-panier main #date-valid-or-not-selector {
    padding: 0.25rem 0.25rem;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 42px;
}
#mon-panier main #date-valid-or-not-selector .btn-check + label .shipment-count-not-valid-date,
#mon-panier main #date-valid-or-not-selector .btn-check + label .shipment-count-valid-date {
    border-radius: 50px;
    background-color: #df0004;
    color: #fff;
    padding: 0.125rem 0.25rem;
    min-width: 28px;
    min-height: 28px;
    display: inline-block;
}
@media (max-width: 767px) {
    #mon-panier main #date-valid-or-not-selector .btn-check + label[for='date-not-valid-radio'],
    #mon-panier main #date-valid-or-not-selector .btn-check + label[for='date-valid-radio'] {
        width: 100%;
    }
    #mon-panier main #date-valid-or-not-selector .btn-check + label[for='date-not-valid-radio'] {
        margin-bottom: .25rem;
    }
}
#mon-panier main #date-not-valid .action-bloc #edit-selected-start-date-input {
    position: absolute;
    top: 48px;
    left: -15px;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    padding: 0;
}
/*#endregion -------------------- Mon panier page --------------------*/

/*------------------------------------------------------------------------*/
/*#region -------------------- Suivre mes envois page --------------------*/
html.have-filter-from-session #suivre-mes-envois ul.list-group {
    visibility: hidden;
}
#suivre-mes-envois main #delete-shipment-state .modal-title,
#suivre-mes-envois main #edit-shipment-price-modal .modal-title,
#suivre-mes-envois main #change-shipment-state .modal-title {
    font-weight: 700;
    color: #df0004;
    text-transform: uppercase;
}
#suivre-mes-envois main #delete-shipment-state .modal-body,
#suivre-mes-envois main #edit-shipment-price-modal .modal-body,
#suivre-mes-envois main #change-shipment-state .modal-body {
    padding: 1.5rem 1rem;
}
#suivre-mes-envois main #edit-shipment-price-modal .modal-body input[type='checkbox'] {
    width: 18px;
    height: 18px;
    margin-top: .2rem;
}
#suivre-mes-envois main #edit-shipment-price-modal .modal-body #shipment-special-price + .text-into-input {
    position: absolute;
    right: 15px;
    bottom: 7px;
    color: #888;
}
#suivre-mes-envois main li.list-group-item {
    padding: .5rem 2rem 0rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
}
#suivre-mes-envois main .action-bloc {
    padding: 1.5rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: #fff;
}
@media (max-width: 767px) {
    #suivre-mes-envois main .action-bloc {
        padding: 1rem 0rem;
    }
}
#suivre-mes-envois main input[type='checkbox'] {
    width: 18px;
    height: 18px;
}
#suivre-mes-envois main input#transition-shuttle-only {
    margin-top: .15rem;
}
#suivre-mes-envois main li.list-group-item h5,
#suivre-mes-envois main li.list-group-item .h5 {
    margin-bottom: .5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #df0004;
}
#suivre-mes-envois main li.list-group-item .transition_shuttle {
    color: #fff;
    background: #00406e;
    font-weight: 600;
    border-radius: 5px;
    padding: 5px 12px;
    width: max-content;
    font-size: 1.125rem;
    display: block;
}
#suivre-mes-envois main li.list-group-item .print-shipment i.material-symbols-outlined,
#suivre-mes-envois main li.list-group-item .edit-shipment-price i.material-symbols-outlined,
#suivre-mes-envois main li.list-group-item .change-shipment-state i.material-symbols-outlined,
#suivre-mes-envois main li.list-group-item .delete-shipment i.material-symbols-outlined {
    font-size: 1.5rem;
}
#suivre-mes-envois main li.list-group-item .print-shipment i.material-symbols-outlined.is-printed {
    color: #00ac0b !important;
}
#suivre-mes-envois main li.list-group-item i.material-symbols-outlined {
    font-size: 1.313rem;
}
#suivre-mes-envois main li.list-group-item .print-shipment:hover,
#suivre-mes-envois main li.list-group-item .edit-shipment-price:hover,
#suivre-mes-envois main li.list-group-item .change-shipment-state:hover,
#suivre-mes-envois main li.list-group-item .delete-shipment:hover {
    color: #df0004;
}
#suivre-mes-envois main li.list-group-item p {
    margin-bottom: .25rem;
    font-size: .875rem;
    display: inline-block;
    width: 100%;
    word-wrap: break-word;
}
#suivre-mes-envois main li.list-group-item p.start_date {
    font-size: 1rem;
}
#suivre-mes-envois main li.list-group-item .shipment-state {
    color: #ca8200;
}
#suivre-mes-envois main li.list-group-item .shipment-state.delivered {
    color: #2b8800;
}
#suivre-mes-envois main li.list-group-item .package-line i.material-symbols-outlined {
    position: absolute;
    left: -10px;
    color: #ca8200;
}
#suivre-mes-envois main li.list-group-item .package-line i.material-symbols-outlined + p {
    color: #ca8200;
}
#suivre-mes-envois main li.list-group-item .package-line.delivered i.material-symbols-outlined {
    color: #2b8800;
}
#suivre-mes-envois main li.list-group-item .package-line.delivered i.material-symbols-outlined + p {
    color: #2b8800;
}
#suivre-mes-envois main #filter-container {
    padding-top: .75rem;
    border: 1px solid #aaa;
    border-radius: 5px;
}
#suivre-mes-envois main #filter-container h4 {
    margin-bottom: .75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #df0004;
}
#suivre-mes-envois main #filter-container #reset-filter {
    color: #df0004;
}
#suivre-mes-envois main #filter-container #reset-filter:hover {
    color: #b20003;
}
#suivre-mes-envois main #filter-container input {
    margin-bottom: 1rem;
}
#suivre-mes-envois main #filter-container #arrow-between-date {
    right: -12px;
    top: 6px;
}
@media (max-width:991px) {
    #suivre-mes-envois main #filter-container #arrow-between-date {
        display: none;
    };
}
/*#endregion -------------------- Suivre mes envois page --------------------*/

/*---------------------------------------------------------------------------------------------------------*/
/*#region -------------------- Tableau recapitulatif & Historique des livraisons page -------------------- */
#tableau-recapitulatif main li.list-group-total,
#historique-des-livraisons main li.list-group-total {
    background-color: #fff;
    padding: .5rem 2rem 0rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
    position: relative;
    display: block;
}
#tableau-recapitulatif main li.list-group-item,
#historique-des-livraisons main li.list-group-item {
    padding: .5rem 2rem 0rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
}
#tableau-recapitulatif main .action-bloc,
#historique-des-livraisons main .action-bloc {
    padding: 1.5rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: #fff;
}
@media (max-width: 767px) {
    #tableau-recapitulatif main .action-bloc,
    #historique-des-livraisons main .action-bloc {
        padding: 1rem 0rem;
    }
}
#tableau-recapitulatif main input[type='checkbox'],
#historique-des-livraisons main input[type='checkbox'] {
    width: 18px;
    height: 18px;
}
#tableau-recapitulatif main input#transition-shuttle-only,
#historique-des-livraisons main input#transition-shuttle-only,
#tableau-recapitulatif main input#hide-all-price,
#historique-des-livraisons main input#hide-all-price {
    margin-top: .15rem;
}
#tableau-recapitulatif main li.list-group-item .start_date i,
#tableau-recapitulatif main li.list-group-item .start_date,
#historique-des-livraisons main li.list-group-item .start_date i,
#historique-des-livraisons main li.list-group-item .start_date {
    font-weight: 700;
}
#tableau-recapitulatif main li.list-group-item .start_reference_1 .reference-title,
#historique-des-livraisons main li.list-group-item .start_reference_1 .reference-title {
    font-size: .875rem;
}
#tableau-recapitulatif main li.list-group-item .start_reference_1 .reference-value,
#historique-des-livraisons main li.list-group-item .start_reference_1 .reference-value {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
}
#tableau-recapitulatif main li.list-group-item .package-qty-weight,
#historique-des-livraisons main li.list-group-item .package-qty-weight {
    font-size: 1rem;
}
#tableau-recapitulatif main li.list-group-item h5,
#historique-des-livraisons main li.list-group-item h5 {
    margin-bottom: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #df0004;
}
#tableau-recapitulatif main li.list-group-item h5.arrival_contact_name span,
#historique-des-livraisons main li.list-group-item h5.arrival_contact_name span {
    margin: auto 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #df0004;
}
#tableau-recapitulatif main li.list-group-item h5 span.transition_shuttle,
#historique-des-livraisons main li.list-group-item h5 span.transition_shuttle {
    margin-left: 1rem;
    font-weight: 600;
    background: #00406e;
    color: #fff;
    border-radius: 5px;
    padding: 5px 12px;
}
#tableau-recapitulatif main li.list-group-item .arrival_informations,
#historique-des-livraisons main li.list-group-item .arrival_informations {
    font-size: .875rem;
}
#tableau-recapitulatif main li.list-group-item .arrival_informations span,
#historique-des-livraisons main li.list-group-item .arrival_informations span {
    color: #8c8c8c;
}
#tableau-recapitulatif main li.list-group-item .shipment-bloc,
#historique-des-livraisons main li.list-group-item .shipment-bloc {
    border-bottom: 1px solid #aaa;
    margin-bottom: .75rem;
    padding-bottom: .25rem;
}
#tableau-recapitulatif main li.list-group-item .start_reference_1 .shipment-state-preview i,
#historique-des-livraisons main li.list-group-item .start_reference_1 .shipment-state-preview i {
    font-size: 1rem;
}
#tableau-recapitulatif main li.list-group-item .shipment-state,
#tableau-recapitulatif main li.list-group-item .start_reference_1 .shipment-state-preview,
#historique-des-livraisons main li.list-group-item .shipment-state,
#historique-des-livraisons main li.list-group-item .start_reference_1 .shipment-state-preview {
    color: #ca8200;
}
#tableau-recapitulatif main li.list-group-item .shipment-state.delivered,
#tableau-recapitulatif main li.list-group-item .start_reference_1 .shipment-state-preview.delivered,
#historique-des-livraisons main li.list-group-item .shipment-state.delivered,
#historique-des-livraisons main li.list-group-item .start_reference_1 .shipment-state-preview.delivered {
    color: #2b8800;
}
#tableau-recapitulatif main #filter-container,
#historique-des-livraisons main #filter-container {
    padding-top: .75rem;
    border: 1px solid #aaa;
    border-radius: 5px;
}
#tableau-recapitulatif main #filter-container h4,
#historique-des-livraisons main #filter-container h4 {
    margin-bottom: .75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #df0004;
}
#tableau-recapitulatif main #filter-container #reset-filter,
#historique-des-livraisons main #filter-container #reset-filter {
    color: #df0004;
}
#tableau-recapitulatif main #filter-container #reset-filter:hover,
#historique-des-livraisons main #filter-container #reset-filter:hover {
    color: #b20003;
}
#tableau-recapitulatif main #filter-container input,
#historique-des-livraisons main #filter-container input {
    margin-bottom: 1rem;
}
#tableau-recapitulatif main #filter-container #arrow-between-date,
#historique-des-livraisons main #filter-container #arrow-between-date {
    right: -12px;
    top: 6px;
}
@media (max-width:991px) {
    #tableau-recapitulatif main #filter-container #arrow-between-date,
    #historique-des-livraisons main #filter-container #arrow-between-date {
        display: none;
    };
}
/*#endregion -------------------- Tableau recapitulatif & Historique des livraisons page -------------------- */

/*----------------------------------------------------------------------------------*/
/*#region -------------------- Historique & Bilan mensuel page -------------------- */
#historique main div#table-container,
#bilan-mensuel main div#table-container {
    background-color: #fff;
    padding: 2rem 2rem 1rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
    display: block;
}
#historique main div#table-container table thead th,
#bilan-mensuel main div#table-container table thead th {
    background-color: #00406e;
    color: #fff;
    font-size: 18px;
}
#historique main div#table-container table th,
#historique main div#table-container table td,
#bilan-mensuel main div#table-container table th,
#bilan-mensuel main div#table-container table td {
    border: 1px solid #aaa;
}
#historique main div#table-container table tbody td div.price,
#bilan-mensuel main div#table-container table tbody td div.price {
    font-size: 18px;
    color: #df0004;
    font-weight: 700;
}
#historique main div#table-container table tbody td div.quantity,
#bilan-mensuel main div#table-container table tbody td div.quantity {
    font-size: 13px;
}
#historique main div#table-container table tbody td div.save-csv-current-month,
#historique main div#table-container table tbody td div.save-csv-current-month-v2,
#historique main div#table-container table tbody td div.select-current-month,
#bilan-mensuel main div#table-container table tbody td div.save-csv-current-month {
    border-radius:5px;
    width: 40px;
    height: 40px;
}
#historique main div#table-container table tbody td div.select-current-month,
#historique main div#table-container table tbody td div.select-current-month .form-check {
    cursor: context-menu;
}
#historique main input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/*#endregion -------------------- Résumé page -------------------- */

/*-------------------------------------------------------------------------*/
/*#region -------------------- Livraisons en cours page --------------------*/
#livraisons-en-cours main #change-shipment-state .modal-body span {
    font-weight: 700;
    font-size: 1.15rem;
}
#livraisons-en-cours main li.list-group-total {
    background-color: #fff;
    padding: .5rem 2rem 0rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
    position: relative;
    display: block;
}
#livraisons-en-cours main li.list-group-item {
    padding: .5rem 2rem 0rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
}
#livraisons-en-cours main li.list-group-item .start_date i,
#livraisons-en-cours main li.list-group-item .start_date {
    font-weight: 700;
}
#livraisons-en-cours main li.list-group-item .start_reference_1 .reference-title {
    font-size: .875rem;
}
#livraisons-en-cours main li.list-group-item .arrival_informations {
    font-size: .875rem;
}
#livraisons-en-cours main li.list-group-item .arrival_informations span {
    color: #8c8c8c;
}
#livraisons-en-cours main li.list-group-item .start_reference_1 .reference-value {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
}
#livraisons-en-cours main li.list-group-item .change-shipment-state:hover {
    color: #df0004;
}
#livraisons-en-cours main li.list-group-item .package-qty-weight {
    font-size: 1rem;
}
#livraisons-en-cours main li.list-group-item h5 {
    margin-bottom: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #df0004;
}
#livraisons-en-cours main li.list-group-item h5.arrival_contact_name span {
    margin: auto 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #df0004;
}
#livraisons-en-cours main li.list-group-item h5 span.transition_shuttle {
    margin-left: 1rem;
    font-weight: 600;
    background: #00406e;
    color: #fff;
    border-radius: 5px;
    padding: 5px 12px;
}
#livraisons-en-cours main li.list-group-item .shipment-bloc:not(:last-child) {
    border-bottom: 1px solid #aaa;
    margin-bottom: .75rem;
    padding-bottom: .25rem;
}
#livraisons-en-cours main #configuration-container span.text-into-input {
    position: absolute;
    right: 23px;
    bottom: 23px;
    color: #888;
}
/*#endregion -------------------- Livraisons en cours page --------------------*/

/*----------------------------------------------------------------------*/
/*#region -------------------- Colis en préparation --------------------*/
#colis-en-preparation main li.list-group-item h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #df0004;
}
/*#endregion -------------------- Colis en préparation --------------------*/

/*--------------------------------------------------------------------------*/
/*#region -------------------- Marquer comme livré page --------------------*/
body#marquer-comme-livre-qrcode {
    background-color: #fff;
}
#marquer-comme-livre-qrcode main {
    height: 100vh;
    display: flex;
}
#marquer-comme-livre-qrcode #change-is-valid #check-group {
    animation: 0.40s ease-in-out 1.15s check-group;
    transform-origin: center;
}
#marquer-comme-livre-qrcode #change-is-valid #check-group #check {
    animation: 0.42s cubic-bezier(0.65, 0, 1, 1) 1s forwards check;
    stroke-dasharray: 0, 75px;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#marquer-comme-livre-qrcode #change-is-valid #check-group #outline {
    animation: 0.5s ease-in outline;
    transform: rotate(0 deg);
    transform-origin: center;
}
#marquer-comme-livre-qrcode #change-is-valid #check-group #white-circle {
    animation: 0.45s ease-in 0.45s forwards circle;
    transform: none;
    transform-origin: center;
}
#marquer-comme-livre-qrcode #change-is-valid .text-change-state-valided {
    color:#3f8200;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
    line-height: 50px;
}
#marquer-comme-livre-qrcode #change-is-valid .text-change-state-valided span {
    font-size: 3rem;
    font-weight: 700;
}
#marquer-comme-livre-qrcode #warning-group {
    animation: 0.40s ease-in-out 1.15s warning-group;
    transform-origin: center;
}
#marquer-comme-livre-qrcode #warning-group #outline-warning {
    animation: 0.5s ease-in outline-warning;
    transform-origin: center;
}
#marquer-comme-livre-qrcode #warning-group #white-warning-circle {
    animation: 0.45s ease-in 0.45s forwards circle-warning;
    transform-origin: center;
}
#marquer-comme-livre-qrcode #change-is-valid .text-change-state-valided.remaining-text {
    color:#E89600;
}
@media (max-width: 500px) {
    #marquer-comme-livre-qrcode #change-is-valid .text-change-state-valided {
        font-size: 1.75rem;
        line-height: 40px;
    }
    #marquer-comme-livre-qrcode #change-is-valid .text-change-state-valided span {
        font-size: 2.5rem;
    }
    #marquer-comme-livre-qrcode #change-is-valid .text-change-state-valided.remaining-text {
        font-size: 2.25rem;
    }
    #marquer-comme-livre-qrcode #change-is-valid .text-change-state-valided.remaining-text span {
        font-size: 3rem;
    }
}
@keyframes outline {
    from {
        stroke-dasharray: 0, 345.576px;
    }
    to {
        stroke-dasharray: 345.576px, 345.576px;
    }
}
@keyframes circle {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}
@keyframes check {
    from {
        stroke-dasharray: 0, 75px;
    }
    to {
        stroke-dasharray: 75px, 75px;
    }
}
@keyframes check-group {
    from {
        transform: scale(1);
    }
    50% {
        transform: scale(1.09);
    }
    to {
        transform: scale(1);
    }
}
@keyframes warning-group {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes outline-warning {
    from {
        stroke-dasharray: 0, 345.576px;
    }
    to {
        stroke-dasharray: 345.576px, 345.576px;
    }
}
@keyframes circle-warning {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}
/*#endregion -------------------- Marquer comme livré page --------------------*/

/*-------------------------------------------------------------------------------------------------------*/
/*#region -------------------- Demander un passage & historique des enlèvements page --------------------*/
#demander-un-passage main div.send-mail {
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: #fff;
    padding: 1.5rem 2rem;
    height: 100%;
}
#demander-un-passage main div.send-mail h4 {
    font-weight: 700;
    color: #df0004;
    margin-bottom: 1.5rem;
}
#demander-un-passage main div.send-mail input {
    width: initial;
    display: inline-block;
    margin: 0 0.25rem;
}
#demander-un-passage main div.send-mail input.hasDatepicker {
    width: 120px;
    text-align: center;
}
#demander-un-passage main .modal-dialog h4.modal-title {
    font-weight: 700;
    color: #df0004;
    text-transform: uppercase;
}
#demander-un-passage main .modal-dialog #loading-balls {
    display: none;
    position: absolute;
    bottom: -30px;
    right: 0;
    width: 221px;
}
#demander-un-passage main div.send-mail .shipment-bloc input.form-check-input {
    margin-top: 2.5px;
    margin-bottom: auto;
}
#demander-un-passage main div.send-mail .shipment-bloc .form-check-label .h5 {
    font-size: 1rem;
    color: #df0004;
    margin-bottom: 0;
}
#demander-un-passage main div.send-mail .shipment-bloc .form-check-label p {
    margin-bottom: 0;
    font-size: .85rem;
    display: flex;
}
#demander-un-passage main div.send-mail .shipment-bloc .form-check-label p.arrival_contact_name {
    font-weight: 700;
}
#demander-un-passage main div.bloc-mail,
#historique-des-enlevements main div.bloc-mail {
    padding: .5rem 2rem;
    border: 1px solid #aaa;
    border-radius: 5px;
    background: #fff;
    overflow-wrap: anywhere;
}
#demander-un-passage main div.bloc-mail h5,
#historique-des-enlevements main div.bloc-mail h5 {
    font-size: 1.125rem;
    font-weight: 600;
    display: inline;
}
#demander-un-passage main div.bloc-mail h4,
#historique-des-enlevements main div.bloc-mail h4 {
    font-size: 1.250rem;
    font-weight: 700;
    color: #df0004;
}
#demander-un-passage main div.bloc-mail .address_line,
#historique-des-enlevements main div.bloc-mail .address_line {
    font-size: 0.750rem;
}
/*#endregion -------------------- Demander un passage & historique des enlèvements page --------------------*/

/*--------------------------------------------------------------------*/
/*#region -------------------- Configuration page --------------------*/
#configuration main #configuration-container {
    padding-top: .75rem;
    border: 1px solid #aaa;
    border-radius: 5px;
}
#configuration main #configuration-container h4 {
    margin-bottom: .75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #df0004;
}

#configuration main #configuration-container .configuration-bloc:nth-of-type(1),
#configuration main #configuration-container .configuration-bloc:nth-of-type(5),
#configuration main #configuration-container .configuration-bloc:nth-of-type(12) {
    border-bottom: 1px solid #aaa;
    padding-bottom: 2rem;
}

/* Input Switch */
#configuration main #configuration-container .input-switch {
    position: relative;
    display: block;
    height: 25px;
    margin-top: 7px;
}
#configuration main #configuration-container .input-switch input {
    position: absolute;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}
#configuration main #configuration-container .input-switch input:checked {
    z-index: 0;
}  
#configuration main #configuration-container .input-switch label {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    padding-left: 2.8rem;
    opacity: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#configuration main #configuration-container .input-switch input:first-of-type:checked ~ label:first-of-type {
    opacity: 1;
}
#configuration main #configuration-container .input-switch input:last-of-type:checked ~ label:last-of-type {
    opacity: 1;
}
#configuration main #configuration-container .input-switch .slide-button {
    position: relative;
    position: absolute;
    top: 50%;
    z-index: 0;
    display: block;
    width: 35px;
    height: 21px;
    background: #b3c7cd;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: 0.25s ease-out;
    transition: 0.25s ease-out;
    border-radius: 1000px;
}
#configuration main #configuration-container .input-switch .slide-button::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 46%;
    height: calc(100% - 4px);
    content: "";
    background: #fff;
    -webkit-transform: translate(2px, -48%);
    transform: translate(2px, -48%);
    border-radius: 50%;
    -webkit-transition: 0.25s ease-out;
    transition: 0.25s ease-out;
}
#configuration main #configuration-container .input-switch input:last-of-type:checked ~ .slide-button {
    background: #70b580;
}
#configuration main #configuration-container .input-switch input:last-of-type:checked ~ .slide-button::after {
    transform: translate(17px, -48%);
}
/*#endregion -------------------- Configuration page --------------------*/


.form-select {
    padding: 6px 12px;
}
form label.required::after {
    content: "*";
    color: #df0004;
    margin-left: 5px;
}
.form-check-input {
    position: initial;
}
.container-fluid {
    max-width: 1700px;
    padding: 0 1.5rem;
}
@media (max-width: 767px) {
    .my-5.container-fluid {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: .5rem;
    padding-right: .5rem;
}
.cursor-pointer {
    cursor: pointer;
}
.modal-dialog {
    max-width: 1300px;
}
.modal-content .modal-header .close {
    font-size: 2.2rem;
}
.modal-body {
    padding: 1rem 2rem;
}
.modal-sm .modal-body {
    padding: 1rem;
}
@media (min-width: 670px) {
    .modal-sm {
      max-width: 650px !important;
    }
}
.d-grid {
    display: grid !important;
}
.d-inherit {
    display: inherit !important;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
.w-max-content {
    width: max-content !important;
}
.color-0 {
    color: #212529 !important;
}
.color-1 {
    color: #df0004;
}
.color-2 {
    color: #00406e;
}
.font-weight-600 {
    font-weight: 600;
}
.font-weight-700 {
    font-weight: 700;
}
.btn.btn-custom-1 {
    background-color: #00406e;
    border-color: #00406e;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.625rem 0.938rem;
    box-shadow: none !important;
    text-transform: uppercase;
}
.btn.btn-custom-1:hover,
.btn.btn-custom-1:active {
    background-color: #df0004 !important;
    border-color: #df0004 !important;
}
.btn.btn-custom-2 {
    background-color: #df0004;
    border-color: #df0004;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.625rem 0.938rem;
    box-shadow: none !important;
    text-transform: uppercase;
}
@media (max-width: 767px) {
    .btn.btn-custom-1, .btn.btn-custom-2 {
        font-size: 0.90rem;
    }
    .btn.btn-custom-1 i.material-symbols-outlined, .btn.btn-custom-2 i.material-symbols-outlined {
        font-size: 1.2rem
    }
}
.btn.btn-custom-2:hover,
.btn.btn-custom-2:active {
    background-color: #b20003 !important;
    border-color: #b20003 !important;
}
body {
    background-color: #efefef;
}
h1, h2, h3, h4, h5, p, span, div, a, button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}
a, div, i, span {
    transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    -webkit-transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    -moz-transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    -o-transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
    -ms-transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
}