@charset "utf-8";

/** Surcharge theme bootstrap global */
html {
    font-size: 10px;
}

body .ui-widget {
    font-family: Arial, sans-serif;
}

label:not(.lst_dmd_nombre_personne_a_bord) {
    font-weight: 700;
    margin-bottom: 0.2em;
}

a {
    text-decoration: none;
}

#version {
    vertical-align: sub;
    margin-left: 0.5em;
}

.dataTableInfPil.ui-datatable {
    margin-bottom: 1em;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.zoneEntete {
    position: absolute;
    inset: 0px 0px auto;
    height: 75px;
    padding-bottom: 2px;
}

.zoneMenu {
    position: absolute;
    inset: 81px auto 0px 0px;
    border-radius: 0 5px 5px 0;
    width: 200px;
    padding: 2px;
    transition: all 100ms;
}

.zoneCentre {
    position: absolute;
    inset: 81px 0px 0px 206px;
    border-radius: 5px 5px 0px 5px;
    padding: 2px;
    transition: all 100ms;
}

.zoneMenuYacht {
    position: absolute;
    inset: 81px auto 0px 0px;
    border-radius: 0 5px 5px 0;
    width: 25px;
    padding: 2px;
    transition: all 100ms;
}

.zoneCentreYacht {
    position: absolute;
    inset: 81px 0px 0px 31px;
    border-radius: 5px 5px 0px 5px;
    padding: 2px;
    transition: all 100ms;
}

.zoneDialog {
    position: absolute;
}

.headerMenu {
    text-align: right;
    margin: 2px 2px 5px 0;
}

body .ui-button.boutonMenu {
    background: var(--bs-gray-200);
    color: var(--text-color);
    border-color: var(--bs-gray-400);
    font-size: 0.5em;
    width: 18px;
}

legend {
    font-size: 1em;
    width: auto;
    float: none;
}

.row {
    margin-bottom: 0.4em;
    /* Surcharge de Bootstrap pour supprimer un ascenceur horizontal. */
    margin-right: 0;
}

.invisible {
    display: none !important;
}

.ui-selectoneradio label {
    width: 13em;
}

#formDemandeAcces .ui-selectoneradio label {
    width: auto;
}

body :not(.ui-selectonebutton) > .ui-button:not(.ui-spinner-button) {
    margin-right: 0.2em;
    font-weight: 700;
}

.nowrap {
    display: inline;
    white-space: nowrap;
}

.row > div {
    position: static;
}

/* Pour indiquer que l'icone d'erreur est cliquable */
.ui-message.ui-message-error.ui-message-icon-only {
    cursor: pointer;
}

/* Pour éviter l'ajout d'un scroll à cause du bouton de fermeture */
body .ui-messages {
    width: calc(100% - 1rem);
}

/* Pour aligner l'icone proprement avec le texte */
body .ui-messages .ui-messages-info .ui-messages-info-icon,
body .ui-messages .ui-messages-error .ui-messages-error-icon,
body .ui-messages .ui-messages-warn .ui-messages-warn-icon {
    margin: -0.3em 0.5em 0 0;
}

body .ui-message:empty {
    padding: 0;
}

label.ui-state-error {
    color: #f44336;
}

body .ui-message.ui-message-warn.warningImportant {
    font-size: 1.2em;
    font-weight: 700;
    width: calc(100% - 1em);
    border-width: 0 3px 0 3px;
}

.ui-growl-message {
    font-size: 1.1em;
}

body .ui-growl-title {
    padding: 7px 0;
}

body .ui-growl .ui-growl-item-container .ui-growl-item {
    min-height: 5em;
}

.ui-inplace .ui-inplace-display.inplaceVide,
.ui-inplace .ui-inplace-display.modifiable {
    border: 0.1em solid var(--bs-gray-400) !important;
    padding: 0.2em 0.5em;
}

.ui-inplace .ui-inplace-display span.champVide {
    display: inline-block;
    width: calc(100% - 2.5em);
    max-width: 10em;
}

.ui-inplace .ui-inplace-display span {
    margin: 0.2em 0;
}

.passagerEdit input.ui-inputfield {
    width: 100%;
}

.visaDocument {
    margin-right: 1em;
}

.visaDocument input {
    width: 6em;
}

/** Theme */

#logo {
    float: left;
    height: 100%;
}

#bandeau {
    height: 100%;
    width: 100%;
}

/** Fin Theme */

/*
 * Création DQP
 */
.formulaireDemande textarea {
    width: 100%;
}

.barreActionCreationDemande {
    width: 100%;
    text-align: right;
    border: 1px solid var(--bs-gray-400);
    border-radius: 4px;
    padding: 0.4em 1em;
}


.creation_dpq_identification_navire label,
.creation_dpq_identification_demande label,
.barreRechercheNavire label {
    margin-right: 5px;
}

.barreRechercheNavire label {
    width: 10em;
    margin-bottom: 1em;
}

.barreRechercheTypeNavire {
    display: inline-table;
    vertical-align: middle;
}

.creation_dpq_accordeon label:not(.radio-label):not(.libelleConcatene):not(.responsive-label),
.creation_dosy_champs_navire label,
.bodyVisiteEngin label {
    width: 14em;
    vertical-align: middle;
}

.creation_dpq_accordeon .blocCargaison label {
    width: auto;
    margin-right: 1em;
}

.formVisas label, .formCapitainerie label {
    margin-right: 1em;
}

.panelVisa {
    margin-bottom: 5px;
}

label.libelleCommentaire {
    vertical-align: top;
}

label.libelleCourt {
    width: 6em;
}

.creation_dpq_accordeon button.suppressionMarchandise {
    position: absolute;
    top: 1.7em;
    right: 0.5em;
}

/* RG_DPQ_102 : affichage du nom du navire en gras */
.ui-widget-content .nomNavire .ui-inputfield, span.nomNavire {
    font-weight: bold;
}

.champHeure {
    width: 4em;
}

.saisieCapitainerie label {
    width: 12em;
}

.formVisas textarea, .formCapitainerie textarea {
    width: 100%;
}

fieldset.ui-widget-content.barreActions .liensPopins,
.barreActionCreationDemande .liensPopins,
.ficheUtilisateurBoutons .liensPopins {
    float: left;
    margin-left: 0.4em;
}

.btnRafraichissementListe {
    display: none;
}

.ui-blockui-content {
    background: var(--bs-light);
    border-radius: 4px;
}

/*
 * Fin Création DQP
 */

fieldset.ui-widget-content.barreActions {
    margin: 0;
    text-align: right;
    padding: 0.4em 1em;
}


.formulaireContact {
    height: 50%;
}

.formulaireContact label {
    width: 17em;
    vertical-align: middle;
}

/*
* paramétrage de la partie habilitation
*/

.ficheUtilisateurBoutons {
    width: 100%;
    text-align: right;
    border-radius: 4px;
    margin-top: 0;
}

.ficheUtilisateur label {
    width: 17em;
    vertical-align: middle;
}

.utilisateursFiltrerParGroupe {
    margin-right: 5px !important;
    margin-left: 15px !important;
    padding: 4px 5px 5px 0;
}

.ficheCategorie label,
.filtresHabilitations label,
.ficheProfil label,
.ficheDroit label {
    width: 17em;
}

.filtresHabilitations {
    height: 11em;
    margin-top: 0.5em;
    margin-left: 1.5em;
}

#liste_habilitations_treetable {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 17.8em;
    height: auto;
    overflow: auto;
}

#formListeMenu {
    height: 100%;
}

#liste_menus_treetable {
    position: absolute;
    right: 0px;
    left: 0px;
    bottom: 0px;
    top: 6em;
    height: auto;
    overflow: auto;
}


#formFicheCategorie label, #formFicheProfil label, #formFicheUtilisateur label {
    margin-right: 2em;
}

.libelleLong {
    width: 255px;
}

.bandeau_infos_navire {
    padding: 5px 10px;
    margin-bottom: 1em;
}

.bandeau_infos_navire label {
    width: 8em;
}

.gestion_matieres_dangereuses_text_area {
    width: 100%;
}

.gestion_matieres_dangereuses_zone_infos_sup label {
    width: 12em;
    margin-right: 5px;
}

.modal-backdrop.fade {
    z-index: 500;
}

.modal.fade {
    z-index: 900;
}

.modal-backdrop.fade.backdrop-imbrique {
    z-index: 950;
}

.modal.fade.modal-imbriquee {
    z-index: 1000;
}

.modal-header .pi {
    font-size: 1.4rem;
}

body .pi.pi-info-circle {
    font-size: 1.4rem;
}

.modal-content .zoneContenu {
    border-radius: 0.3rem;
}

/** Images utilisées par les inplaces de case à cocher */
body .pi.pi-check-square, body .pi.pi-stop {
    font-size: 1.4rem;
    background-color: white;
    vertical-align: middle;
    border-radius: 3px;
}

/** Pour compenser le padding des inplaces qui décale l'affichage */
body .ui-inplace .pi.pi-check-square, body .ui-inplace .pi.pi-stop {
    margin: -0.5rem -0.5rem;
}

.modal-header .btn-close {
    background: none;
}

.modal-header {
    padding: 1rem 2rem;
    background: var(--bs-gray-200);
}

.modal-header .modal-title {
    font-weight: 600;
}

/** Inversion des couleurs sur les radios boutons cochés */
body .ui-radiobutton .ui-radiobutton-box.ui-state-active {
    background: #ffffff;
    border-color: var(--bs-gray-400);
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-icon-bullet {
    background: var(--primary-color);
}

/** Images utililsées dans les entetes de tableau */
body .ui-datatable thead th .pi,
body .ui-datatable thead th .ui-icon {
    font-size: 1.2rem;
}

body .ui-datatable thead th:not(.ui-state-active) .pi-filter {
    color: var(--text-color);
}

body .ui-datatable thead th:not(.ui-state-active) .pi-filter-fill {
    color: var(--bs-teal);
}

body .ui-datatable thead th,
body .ui-treetable thead th {
    background: var(--bs-gray-200);
    border: 1px solid var(--bs-gray-400);
    padding: .5rem 1rem;
}

body .ui-datatable thead th.ui-state-hover,
body .ui-treetable thead th.ui-state-hover {
    background: var(--bs-gray-300);
}

body .ui-datatable .ui-datatable-data > tr > td,
body .ui-treetable .ui-treetable-data > tr > td {
    border: 1px solid var(--bs-gray-400);
    padding: .5rem 1rem;
}

body .ui-datatable .ui-datatable-data > tr.ui-state-hover,
body .ui-treetable .ui-treetable-data > tr.ui-state-hover {
    background: var(--bs-gray-300);
}

.vingt-cinq-pourcent {
    width: 25%;
}

.quinze-pourcent {
    width: 15%;
}

.douze-pourcent {
    width: 12%;
}

.gestion_dechets_text_area {
    width: 100%;
}

#formGestionDechets .labelEntete {
    margin-right: 5px;
}

#formGestionDechets .ui-selectoneradio,
#formGestionDechets .ui-selectoneradio td {
    display: inline;
}

.quantiteAvecPourcentage {
    float: left;
    width: 75%;
}

.quantiteAvecPourcentage input {
    width: 100%;
}

.visaO {
    font-weight: bold;
    color: #669900 !important;
}

.visaV {
    font-weight: bold;
    color: #800080 !important;
}

.visaN {
    font-weight: bold;
    color: #FF0000 !important;

}

.visaOS {
    font-weight: bold;
    color: #669900 !important;
    text-decoration: underline !important;
}

.visaVS {
    font-weight: bold;
    color: #800080 !important;
    text-decoration: underline !important;
}

.visaNS {
    font-weight: bold;
    color: #FF0000 !important;
    text-decoration: underline !important;
}

.annuaireMareeJourCourant {
    text-align: center;
    width: 100%;
}

.annuaireMareeJourCourant tr {
    color: RGB(255, 128, 0) !important;
    font-weight: bold;
}

.annuaireMaree {
    text-align: center;
    width: 100%;
}

.titre_tab_mdp {
    font-weight: bold;
}

.mdp-condit-autocomplete input {
    width: 6em !important;
}

.mdp-visa-autocomplete input {
    width: 4em !important;
}

body .ui-datatable .ui-datatable-data > tr .ms-expansion {
    background: var(--bs-light);
}

.ms-expansion label {
    width: 12em;
    margin-right: 5px;
}

.titreNavire {
    font-size: 1.4em;
    font-weight: bold;
    font-style: italic;
}

.btnRafraichissementListeUtilisateurs {
    display: none;
}

.btnRafraichissementListeCategories {
    display: none;
}

.btnRafraichissementListeProfils {
    display: none;
}

/* Surcharge de l'apparence des Modal bootstrap. */
@media (min-width: 576px) {
    .modal-dialog.popin-custom-class {
        width: 80%;
        max-width: none;
    }
}

/* permet de cacher le bloc de selection des jours pour ne garder que le couple annee/mois */
.popin-telev-class .ui-datepicker-calendar-container {
    display: none;
}

.popin-telev-class .ui-datepicker .ui-datepicker-header {
    border: none;
}

.popin-telev-class .ui-calendar {
    min-width: 18em;
}

.popin-telev-class .iconeSuppression {
    vertical-align: bottom;
    margin-left: 10px;
}

.tableDossierEscale {
    width: 100%;
    clear: both;
}

body .ui-chkbox.selectionFichier {
    margin-right: 5px;
    height: 18px;
}

#dossierEscale .modal-body {
    padding-bottom: 0.5rem;
}

#dossierEscale .modal-footer {
    padding-top: 1.5rem;
}

#dossierEscale .historique {
    float: left;
}

#dossierEscale .row label {
    margin-right: 0.5em;
}

#popinVisas .modal-footer, #popinMarchaTerrestre .modal-footer {
    margin-top: 0;
}

#popinVisas .modal-footer label, #popinMarchaTerrestre .modal-footer label {
    margin-right: 1em;
}

#popinVisas .modal-footer .ui-message, #popinMarchaTerrestre .modal-footer .ui-message {
    vertical-align: middle;
}

#popinVisas .modal-footer .ui-outputpanel, #popinMarchaTerrestre .modal-footer .ui-outputpanel {
    display: inline-block;
    margin-right: 5em;
}

#televersementForm .ui-message {
    display: inline-block;
    vertical-align: middle;
}

.avarie {
    border-bottom: solid 1px red;
}


/* On écrase le fixed défini par JSF, sauf pour l'entete flottant et les tables scrollables. */
.ui-datatable table:not(.floatThead-table),
.ui-datatable-resizable table:not(.floatThead-table) {
    table-layout: auto !important;
}

.ui-datatable-scrollable table,
.ui-datatable.table-matieres-dangereuses table {
    table-layout: fixed !important;
}

.ui-datatable-scrollable.datatableEquipage .ui-datatable-scrollable-body {
    max-height: max(20em, calc(100vh - 30em));
}

.ui-datatable-scrollable.datatablePassager .ui-datatable-scrollable-body {
    max-height: max(20em, calc(100vh - 26em));
}

.zoneCentreYacht .ui-datatable-scrollable.datatableEquipage .ui-datatable-scrollable-body,
.zoneCentreYacht .ui-datatable-scrollable.datatablePassager .ui-datatable-scrollable-body {
    max-height: max(20em, calc(100vh - 48em));
}

body .ui-datatable .ui-datatable-data > tr.typeEscaleRepaNavale, .ui-widget-content.typeEscaleRepaNavale a {
    color: black;
    font-weight: bold;
}

body .ui-datatable .ui-datatable-data > tr.typeEscaleAvarie, .ui-widget-content.typeEscaleAvarie a {
    color: red;
    font-weight: bold;
}

body .ui-datatable .ui-datatable-data > tr.typeEscaleCommerciale, .ui-widget-content.typeEscaleCommerciale a {
    color: blue;
    font-weight: bold;
}

body .ui-datatable .ui-datatable-data > tr.typeEscaleRelache, .ui-widget-content.typeEscaleRelache a {
    color: green;
    font-weight: bold;
}

.ligneMouillageCouleur {
    background: #ffecd9;
}

.boutonlangue {
    width: 24px;
    height: 16px;
    transition: all 100ms;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
}

.boutonlangue:hover {
    transform: scale(1.1)
}

.boutonlangue.francais {
    background: url(/vigiesip-saintmalo/images_externes/langue_francais.png) no-repeat 0
}

.boutonlangue.anglais {
    background: url(/vigiesip-saintmalo/images_externes/langue_anglais.png) no-repeat 0
}

.boutonlangue.espagnol {
    background: url(/vigiesip-saintmalo/images_externes/langue_espagnol.png) no-repeat 0
}

.boutonlangue.allemand {
    background: url(/vigiesip-saintmalo/images_externes/langue_allemand.png) no-repeat 0
}

#perso_quart_calendrier_div {
    margin-left: auto;
    margin-right: auto;
    max-width: 60%;
}

#perso_quart_dialog_boutons_div {
    position: relative;
    float: right;
}

.selectOneMenu-codif.ui-selectonemenu {
    min-width: 100px !important;
    max-width: 500px;
}

.selectOneMenuCodif {
    vertical-align: middle;
    min-width: 100px !important;
    max-width: 100%;
}

.erreurConteneur {
    width: 50%;
    margin-left: 25%;
    margin-top: 10%;
}

.erreurConteneur .card-header {
    font-weight: 600;
}

body .ui-chkbox.checkbox-toolbar {
    margin: auto 0.5em auto 0;
}

body .ui-chkbox .ui-chkbox-box.ui-state-disabled:not(.ui-state-active) {
    background-color: var(--bs-gray-200);
}

/** ****************************************************************************
 *	Listes
 */
.zoneContenu {
    width: 100%;
    height: 100%;
}

h2.titrePage {
    background-color: #e4e9f5;
    font-size: 1.2em;
    font-weight: bold;
    width: 100%;
    height: 2em;
    line-height: 2em;
    margin: 0;
    padding-left: 1em;
}

h2.titreMultiLigne {
    height: auto;
}

#tabViewLstDmd {
    position: absolute;
    left: 2px;
    right: 0;
    bottom: 0;
    top: 2.6em;
}

body .telev_tab_view_pixel.ui-tabs,
body .ongletsDemande.ui-tabs {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body .telev_tab_view_pixel.ui-tabs .ui-tabs-panels,
body .ongletsDemande.ui-tabs .ui-tabs-panels {
    flex: 1;
    overflow-y: auto;
}

.ui-tabs.ongletsDossierEscale {
    clear: right;
}

.ui-tabs.ongletsDossierEscale img.iconePDF,
#form_dosy_depot_doc img.iconePDF {
    width: 18px;
    margin-right: 4px;
    background-color: white;
}

.ui-tabs.ongletsDossierEscale .cacPresentABord {
    margin-left: 5px;
}

.ui-tabs.ongletsDossierEscale .typeDocumentEscale {
    font-weight: bold;
    background: #e4e9f5;
    color: var(--text-color);
}

.ui-tabs.ongletsDossierEscale input[type="file"],
#form_dosy_depot_doc input[type="file"] {
    display: inline;
    vertical-align: middle;
}

body .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    padding: 0;
    height: 100%;
}

.capteurs .ui-tabs-panels {
    height: 100%;
}

.capteurs iframe {
    height: 100%;
    width: 100%;
}

body .ui-toolbar {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
    height: 3.4em;
    padding: 4px;
}

body .ui-panelgrid .ui-panelgrid-cell.ui-widget-header {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
}

.ui-datatable.ui-widget.dataTableLstdmd {
    position: absolute !important;
    right: 0;
    left: 0;
    bottom: 0;
    top: 6.7em;
}

.ui-datatable.ui-widget.dataTableDefaut {
    position: absolute !important;
    right: 0px;
    left: 0px;
    bottom: 0;
    top: 3.4em;
}

/** Le message vide ne s'affiche pas bien sous IE, on a donc une position absolue*/
@media screen\0 {
    .ui-datatable-empty-message {
        top: 8.5em;
        position: absolute;
        width: 247em;
    }
}

.ui-datatable.ui-widget.dataTableDestinataires {
    position: absolute !important;
    right: 0;
    left: 0;
    bottom: 0;
    top: 3.4em;
}

.ui-datatable.ui-widget.dataTableTarifs {
    position: absolute !important;
    right: 0;
    left: 0;
    bottom: 0;
    top: 6em;
}

.ui-datatable.ui-widget.tableSousTitre {
    position: absolute !important;
    right: 0;
    left: 0;
    bottom: 0;
    top: 5.8em;
}

.ui-datatable.ui-widget.tableSousTitreEntete {
    position: absolute !important;
    right: 0;
    left: 0;
    bottom: 0;
    top: 12.1em;
}

.contenuFormulaireArchive {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.ui-datatable.ui-widget.tablePopin {
    position: relative !important;
    overflow-x: auto;
}

.ui-datatable.dataTableCodif input.ui-inputtext,
.ui-datatable.dataTableCodif .ui-selectonemenu,
.ui-datatable.dataTableTarifs input.ui-inputtext {
    width: 100%;
}

.ui-datatable.dataTableTarifs .ui-autocomplete-input {
    width: calc(100% - 2.5em);
}

.ui-datatable.ui-widget.dataTableTarifs div.ui-message-error,
.ui-datatable.ui-widget.tableSousTitre div.ui-message-error,
.ui-datatable.ui-widget.tableSansIconeErreur div.ui-message-error {
    display: none;
}

.ui-datatable.table-matieres-dangereuses tr:not(.ms-expansion) input:not([size]) {
    width: 100%;
}

.ui-datatable.table-matieres-dangereuses tr:not(.ms-expansion) input.ui-autocomplete-input {
    width: calc(100% - 2.5em);
}

.zone-matieres_dangereuses {
    /* important pour l'affichage des scrolls */
    overflow: auto;
}

div.scrollable .ui-datatable-tablewrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 3em;
    overflow-y: scroll;
}

.ui-datatable.ui-widget.dataTableAvecToolbarEtZoneRecherche {
    position: absolute !important;
    right: 0;
    left: 0;
    bottom: 0;
    top: 12.6em;
}

.ui-datatable.ui-widget.dataTableAvecToolbarEtZoneRechercheCodif {
    position: absolute !important;
    right: 0;
    left: 0;
    bottom: 0;
    top: 17.1em;
}

.ui-paginator-bottom {
    position: absolute;
    bottom: 0;
    height: 3em;
    width: 100%;
    padding: 4px !important
}

body .ui-paginator {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
}

body .ui-paginator .ui-paginator-current,
body .ui-paginator .ui-paginator-rpp-options {
    margin: 0 1em;
    vertical-align: baseline;
}

body .ui-paginator .ui-paginator-rpp-options {
    border-radius: 4px;
}

body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background: var(--bs-light);
}

body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-hover {
    background: var(--bs-gray-300);
}

body .ui-paginator .ui-paginator-first.ui-state-hover,
body .ui-paginator .ui-paginator-prev.ui-state-hover,
body .ui-paginator .ui-paginator-next.ui-state-hover,
body .ui-paginator .ui-paginator-last.ui-state-hover {
    background: var(--bs-gray-300);
}

.tablePopin .ui-paginator-bottom {
    position: relative !important;
}

.wrapperTableMouvement {
    position: absolute;
    top: 2.4em;
    bottom: 0;
    right: 0;
    left: 0;
}

/* Recherche navire grand ecran */
@media screen and (min-width: 1330px) {
    .barreRechercheNavire {
        height: 8.5em;
    }

    .wrapperTableResultatRechercheNavire {
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        top: 11em;
        padding: 0;
        border: 0;
    }
}

/* Recherche navire ecran moyen */
@media screen and (max-width: 1330px) {
    .barreRechercheNavire {
        height: 10.5em;
    }

    .wrapperTableResultatRechercheNavire {
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        top: 13em;
        padding: 0;
        border: 0;
    }
}

/* Recherche navire ecran petit */
@media screen and (max-width: 864px) {
    .barreRechercheNavire {
        height: 20.5em;
    }

    .wrapperTableResultatRechercheNavire {
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;

        top: 23em;
        padding: 0;
        border: 0;
    }
}


/** ****************************************************************************
 *	Fin des listes
 */

.boutonDeconnexion {
    margin: -35px 2px 0;
    height: 24px;
    width: 24px;
    background: url(/vigiesip-saintmalo/images_externes/deconnexion.png) no-repeat;
    transition: all 100ms;
}

.boutonMotDePasse {
    margin: -35px 2px 0;
    height: 24px;
    width: 24px;
    background: url(/vigiesip-saintmalo/images_externes/lock.png) no-repeat;
    transition: all 100ms;
}

.boutonAccueil {
    margin: -35px 2px 0;
    height: 24px;
    width: 24px;
    background: url(/vigiesip-saintmalo/images_externes/home.png) no-repeat;
    transition: all 100ms;
}

.boutonDeconnexion:hover, .boutonMotDePasse:hover, .boutonAccueil:hover {
    transform: scale(1.1);
}

.lienFAQ {
    float: right;
    height: 24px;
    width: 24px;
    margin-right: 0.25em;
    transition: all 100ms;
}

.lienFAQ:hover {
    transform: scale(1.1);
}

.ui-fieldset.infosUtilisateur label {
    margin-right: 5px;
}

.infosUtilisateur .blocBoutons {
    margin-right: -0.75em;
}

.menuLateral {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 25px);
}

.menuHorsConnexion {
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
}

.menuConteneur {
    overflow: auto;
    margin-bottom: 0.75em;
}

.themeSwitcher {
    vertical-align: middle;
    margin-bottom: 0.5em;
}

.formulaire {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contenuFormulaire {
    flex: 1;
    overflow-y: auto;
}

.styleTitre {
    font-weight: bold;
    text-decoration: underline !important;
}

.styleSousligne {
    text-decoration: underline !important;
}

.styleItalic {
    font-style: italic;
}

#popupChoixColonnes .ui-widget-header,
#popupFiltreColonnes .ui-widget-header,
body .ui-dialog .ui-dialog-titlebar {
    background-color: var(--bs-gray-200);
    border-bottom: 1px solid var(--bs-gray-400);
    padding: 1em 1em 1em 2em;
}

.headerPopinPreferences {
    margin-top: 1em;
}

.corpsPopinPreferences {
    position: absolute;
    top: 3.5em;
    left: 1.5em;
    right: 0;
    bottom: 3.5em;
    overflow: auto;
}

.corpsPopinPreferences.filtres {
    top: 7em;
}

.corpsPopinPreferences label,
.headerPopinPreferences label {
    margin-left: 1em;
}

.footerPopinPreferences {
    position: absolute;
    bottom: 0.5em;
    left: 1em;
    right: 0;
    display: flex;
    justify-content: space-evenly;
}

body .ui-dialog.ui-confirm-dialog .ui-dialog-content {
    padding: 1.5em;
}

.ui-widget.inactif {
    opacity: 0.5;
}

#entetePrevisions {
    margin: 8px;
}

#entetePrevisions .col-sm-1 {
    padding: 0;
}

#entetePrevisions .col-sm-1:last-child {
    text-align: right;
}

#entetePrevisions .col-sm-10 {
    text-align: center;
}

#entetePrevisions label {
    margin-right: 0.5em;
}

#entetePrevisions .btnAujourdhui {
    margin-right: 2em !important;
}

#entetePlanningPaquebot {
    margin: 8px;
}

#entetePlanningPaquebot .col-sm-1 {
    padding: 0;
}

#entetePlanningPaquebot .col-sm-1:last-child {
    display: flex;
    justify-content: flex-end;
}

#entetePlanningPaquebot .col-sm-10 {
    display: flex;
    align-items: center;
    justify-content: center;
}

#entetePlanningPaquebot .btnAujourdhui {
    margin-right: 2em;
    margin-left: 0.2em;
}

section {
    position: relative;
    height: 100%;
}

.wrapperTablePrevisions {
    overflow: auto;
    height: 100%;
    position: static !important;
}

#tableauPrevisions {
    width: 100%;
    margin-bottom: 100px;
}

#tableauPrevisions th div {
    position: absolute;
    top: 0;
    z-index: 11;
    margin-left: -3px;
}

#tableauPrevisions th,
#tableauPrevisions th div {
    background: var(--bs-gray-200);
    color: var(--text-color);
    padding: 0.2em;
    text-align: center;
    height: 3.4em;
    border: 1px solid var(--bs-gray-400);
}

#tableauPrevisions td {
    height: 2.5em;
    padding: 0;
}

#tableauPrevisions td.libelleQuai {
    background-color: rgb(249, 182, 77);
    vertical-align: middle;
    border-left: 1px solid var(--bs-gray-600);
    border-bottom: 1px solid var(--bs-gray-600);
    padding-left: 1em;
}

#tableauPrevisions td.libelleQuai .zoneAvecTooltip {
    padding: 0.5em 1em 0.5em 0;
}

#tableauPrevisions .cellulesPrevisions {
    width: 100%;
}

#tableauPrevisions .cellulesPrevisions td {
    border: none;
}

#tableauPrevisions .cellulesPrevisions td.celluleMatin:first-child {
    border-left: 1px solid var(--bs-gray-500);
}

#tableauPrevisions .cellulesPrevisions td.celluleMatin {
    border-right: 1px dashed var(--bs-gray-400);
    border-bottom: 1px solid var(--bs-gray-500);
}

#tableauPrevisions .cellulesPrevisions td.celluleSoir {
    border-right: 1px solid var(--bs-gray-500);
    border-bottom: 1px solid var(--bs-gray-500);
}

#formPrevisions {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

#formPrevisions .pi.pi-chevron-circle-left,
#formPrevisions .pi.pi-chevron-circle-right {
    font-size: 1.4rem;
    top: 40% !important;
    left: 40% !important;
}

.croisiere_fiche_etape_types_prestation {
    margin: 1em 0em !important;
}

.escaleFluvialeModifiee {
    background-color: #FFA9A9 !important;
}

.detailsPrestation {
    overflow-y: auto;
    max-height: 335px;
}

#formPrevisions .ui-autocomplete {
    margin-right: 1em;
}

.popover {
    font-size: 1rem;
    border-radius: .5rem;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
}

.popover label {
    margin-right: 0.5em;
    margin-bottom: 5px;
}

.popover ul {
    padding-left: 1em;
    margin-bottom: 0;
}

.popover-error .popover-body {
    color: var(--bs-danger);
    font-size: 1.4rem;
}

.contenuTooltip {
    display: none;
}

.occupation {
    position: absolute;
    border: 1px solid var(--text-color);
    height: 2em;
    line-height: 1.6em;
    border-radius: 5px;
    background-color: lightgrey;
    color: var(--text-color);
    text-align: center;
    z-index: 10;
    overflow: hidden;
}

.occupation span {
    vertical-align: middle;
    white-space: nowrap;
}

.occupation.navireAttendu {
    background-color: lightgrey;
}

.occupation.navireAQuai {
    background-color: lightblue;
}

.occupation.navireMD {
    background-color: goldenrod;
}

.occupation.peniche {
    background-color: orange;
}

.occupation.croisiereRealisee {
    background-color: var(--bs-teal);
}

.occupation.accostageSimultane {
    background-color: darkred;
    color: white;
}

.occupation.demarreSemainePrec {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}

.occupation.termineSemaineSuiv {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

#tableauPrevisions tr.ligneAnnuMaree th {
    height: 1.5em;
}

#tableauPrevisions tr.ligneAnnuMaree th div {
    height: 2em;
}

#tableauPrevisions tr.ligneAnnuMaree div.pleineMer {
    top: 3.4em;
}

#tableauPrevisions tr.ligneAnnuMaree div.hauteur {
    top: 5.3em;
}

#tableauPrevisions tr.ligneAnnuMaree div.coefficient {
    top: 7.2em;
}

.imageRecord {
    padding-left: 1.0em;
}

.quotidienne tbody tr {
    height: 50px;
}

.tableauAlignementCentre {
    text-align: center;
}

div.telev_liste_fichiers {
    position: absolute;
    top: 12.6em;
    right: 0;
    left: 2px;
    bottom: 0;
}

div.telev_liste_fichiers .ui-datatable-tablewrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 3em;
    overflow-y: scroll;
}

.ui-icon-plus-green {
    background-image: url(/vigiesip-saintmalo/images_externes/icon-plus-green.png);
    background-size: 14px 14px;
    top: 40% !important;
    left: 0.3em !important;
    width: 16px;
    height: 16px;
}

.ui-icon-minus-red {
    background-image: url(/vigiesip-saintmalo/images_externes/icon-minus-red.png);
    background-size: 14px 14px;
    top: 40% !important;
    left: 0.3em !important;
    width: 16px;
    height: 16px;
}

.creation_dn_informations label {
    width: 14em;
}

.escaleDsmCombo .ui-autocomplete-panel {
    width: auto;
    overflow-x: none;
}

.downloadIcon {
    width: 2.3em;
}

.tab_reductions .ui-inputfield {
    width: 95%;
}

.supprVisaCommentaire {
    width: 100%;
    height: 15em;
}

.dsm_row {
    margin-left: 0px;
    display: flex;
}

.combosDN input {
    width: 20em;
}

.ui-inplace-content .txreduc-couleur {
    color: #4f4f4f;
}

.tableau-fal1,
.tableau-fal2 {
    margin-left: 5%;
    width: 90%;
}

.tableau-fal1 tbody td {
    min-width: 30%;
}

.tableau-fal1 tr,
.tableau-fal2 tr {
    height: 6em;
}

.label-fal-medium {
    width: 16em;
}

.gridFal {
    width: 100%;
}

/** on surcharge le css datatable pour avoir des header propres lors du scroll sur les fals */
.datatableFal .ui-datatable-scrollable-header {
    display: none;
}

.datatableFal .ui-datatable-scrollable-theadclone th span {
    display: inline !important;
}

.datatableFal .ui-datatable-scrollable-theadclone tr {
    height: 4em !important;
}

#formFalISPS {
    text-align: center;
}

.tableau-falISPS .ui-selectoneradio,
.tableau-falISPS .ui-inputfield:not(.hasDatepicker) {
    width: 100%;
}

.tableau-falISPS thead tr {
    height: 2em;
}

.tableau-falISPS tr {
    height: 4em;
}

.tableau-falISPS .ui-selectoneradio label {
    width: auto;
}

.tableau-falISPS .ui-chkbox {
    margin-right: 8px;
}

.radioDiv table {
    float: right;
}

.tableau-falS-question .gridFal label.labelCourt {
    width: 16em;
}

.tableau-falS-question .gridFal label {
    margin-right: 10px;
}

.tableau-falS-question .ui-selectoneradio label {
    width: 3em;
}

.erreurCodif {
    max-height: 5.5em;
    margin-top: 10px;
}

.toolbarCodif {
    position: absolute;
    top: 13.7em;
    left: 0;
    right: 0;
}

.tableDechets tr, .tableDechets td {
    height: 23px;
}

#formDestinataire .ui-toolbar-group-left.titre-centre {
    margin-right: 10%;
}

#formDestinataire .panneauxConteneur {
    position: absolute;
    top: 2.6em;
    left: 0;
    width: 100%;
    bottom: 0;
}

#formDestinataire .panneauAlertesMail {
    position: absolute;
    height: 50%;
    width: 100%;
}

#formDestinataire .panneauAlertesEcran {
    position: absolute;
    top: calc(50% + 10px);
    height: calc(50% - 10px);
    width: 100%;
}

.formParamsAlertes label {
    margin-right: 5px;
}

.formParamsAlertes .paramAlerte {
    margin-right: 10px;
}

.formParamsAlertes .indice {
    color: #666;
    font-style: italic;
    padding-top: 4px;
}

.formParamsAlertes .groupe {
    color: #666;
    text-decoration: underline;
    padding-top: 4px;
    padding-bottom: 2px;
}

#formDeclaMarch .dsm_row label {
    width: 10em;
}

#formDeclaMarch .dsm_redevance_row label {
    width: 13em;
}

#formRemboursementDsm .dsm_remboursement label {
    width: 15em;
}

.ui-toolbar-group-left,
.ui-toolbar-group-right {
    align-items: normal !important;
}

.ui-toolbar-group-left.reduction-centre {
    margin-right: 50%;
}

.ui-toolbar-group-left .texte-centre,
.ui-toolbar-group-right .texte-centre {
    margin: auto 0.5em auto 0;
}

.inputLong {
    width: 300px;
}


#formAlerte {
    background: linear-gradient(to bottom, #910002, #d60404);
    height: 100%;
    width: 100%;
}

#formAlerte h2 {
    color: #FFF;
    border: 1px solid #FFF;
    border-radius: 5px;
    text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    margin: 0 15px;
    padding: 5px;
}

#formAlerte .contenuAlerte {
    color: #000;
    background-color: #FFF;
    border: 1px solid #FFF;
    border-radius: 5px;
    margin: 5px 15px;
    padding: 5px 10px 30px;
}

#formAlerte .btnAccusAlert {
    float: right;
    background: #d60404;
    color: #FFF;
    border: 1px solid #d60404;
}

#formAlerte .btnAccusAlert.ui-state-hover {
    background: #910002;
    border: 1px solid #910002;
}

#formNavire textarea {
    width: 100%;
}

#formNavire label:not(.libelleConcatene, .premierConcatene, .secondConcatene, .radio-label) {
    width: 24em;
}

#formNavire label.premierConcatene {
    width: 8em;
}

#formNavire label.secondConcatene {
    width: 16em;
}

/* Surcharge du CSS pour l'autocomplete */
.ui-autocomplete-panel {
    max-width: 60%;
}

.ui-autocomplete-list-item {
    /* pour les items vides */
    min-block-size: 1.6em;
}

.ui-autocomplete-token {
    /* pour afficher les elements trop long sur plusieurs lignes*/
    white-space: normal !important;
}

.ui-autocomplete-multiple-container {
    /* pour respecter la taille du parent */
    width: calc(100% - 3em) !important;
    white-space: normal;
}

.autocompleteMultiPrestation .ui-autocomplete-multiple-container {
    width: 100% !important;
}

/* Pour empecher de découper l'autocomplete sur plusieurs lignes */
.ui-autocomplete {
    white-space: nowrap;
}

body .ui-autocomplete .ui-autocomplete-multiple-container .ui-autocomplete-token {
    border: 1px solid var(--bs-gray-400);
    background: #e4e9f5;
}

body .ui-autocomplete .ui-autocomplete-multiple-container .ui-autocomplete-token .ui-autocomplete-token-icon {
    margin-top: -0.7rem;
}

.contenuTroncable {
    text-overflow: ellipsis;
    max-width: 10em;
    white-space: nowrap;
    overflow: hidden;
}

.repriseDocument {
    float: right;
    line-height: 2em;
}

.repriseDocument label {
    margin-bottom: 0;
    font-weight: inherit;
}

.repriseDocument .ui-chkbox {
    height: 1.7em;
    vertical-align: middle;
    margin-left: 0.5em;
}

.rienADeclarer {
    margin-top: 0.5em;
}

.rienADeclarer label {
    margin-bottom: 0;
    margin-right: 0.5em;
}

.commentaireVisa {
    width: 50%;
}

#formGestionMatDang .ui-state-disabled {
    opacity: 0.6;
}

label.labelObligatoire::after {
    content: " *";
}

body .ui-panel .ui-panel-titlebar {
    border-color: var(--bs-gray-400);
    background: var(--bs-gray-200);
}

body .ui-panel .ui-panel-content {
    border-color: var(--bs-gray-400);
}

body .ui-panelmenu h3.ui-panelmenu-header {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
}

body .ui-panelmenu h3.ui-panelmenu-header.ui-state-hover {
    border-color: var(--bs-gray-400);
    background: var(--bs-gray-300);
}

body .ui-panelmenu .ui-menuitem-link {
    font-weight: 700;
}

body .ui-panelmenu .ui-panelmenu-content .menuTeleversementAVoir {
    background-color: indianred;
}

body .ui-panelmenu .ui-panelmenu-content .menuTeleversementAVoir .ui-menuitem-link:not(.ui-state-hover) .ui-menuitem-text {
    color: white;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.tabTeleversementAVoir:not(.ui-state-hover) {
    background-color: indianred;
    border-bottom-color: indianred;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.tabTeleversementAVoir:not(.ui-state-hover) a {
    color: white;
}

body .ui-datatable .ui-datatable-data > tr.fichierTeleversementAVoir:not(.ui-state-hover) {
    background-color: indianred;
    color: white;
}

a.lienDesactive {
    pointer-events: none;
}

.detail_croisiere label {
    width: 10.5em;
    margin-right: 0.5em;
    vertical-align: middle;
}

.detail_croisiere textarea {
    width: calc(100% - 12em);
}

.etapeCroisiereAjoutee {
    animation-name: couleurAjout;
    animation-duration: 2s;
    animation-play-state: running;
}

.colDeclMarchandise {
    margin-bottom: 10px;
}

.ajoutRedevable, .ajoutClientFinal {
    margin-left: 1em;
}

.formValidationDsm {
    height: 85%;
}

.divValidationDsm {
    height: 100%;
}

.barreActionValidationDsm {
    height: 3.4em;
    width: 100%;
    position: absolute;
    text-align: right;
    bottom: 0;
    border: 1px solid var(--bs-gray-400);
    border-radius: 4px;
    padding: 0.4em 1em;
}

/* Pour éviter que le header passe au dessus des modales */
.floatThead-container {
    z-index: 500 !important;
}

.floatThead-wrapper th {
    height: 54px !important;
}

.decla_navire_tableau_recap_redevance {
    /* Surcharge pour éviter une taille réduite dans certains cas. */
    width: 100%;
}

.datatableAdresseFacturation input,
.datatableAdresseFacturation textarea,
.datatableAdresseFacturation .ui-autocomplete {
    /* définition de la taille pour conserver l'erreur sur la même ligne */
    width: calc(100% - 40px);
}

.datatableAdresseFacturation .ui-autocomplete-input {
    width: 100%;
}

.datatableAdresseFacturation {
    position: relative !important;
    overflow-x: auto;
}

.datatableAdresseFacturation .ui-paginator-bottom {
    position: relative !important;
}

/* Correction de l'alignement des labels entre eux et avec les autocomplete multiples */
.bodyNatureTarif label:not(.ligneComplete):not(.radio-label),
.contenuSaisieFacture label:not(.radio-label) {
    width: 14em;
    margin-right: 5px;
}

.inputPlusieursLignes {
    display: inline-flex;
    align-items: center;
}

.inputPlusieursLignes .ui-inplace {
    width: 50%;
}

.tableDetailsFacture {
    margin-bottom: 0.3em;
}

.radio-label {
    margin-left: 4px;
    margin-right: 4px;
}

body .ui-fieldset .ui-fieldset-legend {
    padding: 0.5em 1em;
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
}

body .ui-fieldset .ui-fieldset-legend.ui-state-hover {
    background: var(--bs-gray-300);
}

body .ui-fieldset {
    padding: 0.5em 1em;
    border-color: var(--bs-gray-400);
    margin-bottom: 0.5em;
    position: relative;
}

body .ui-accordion .ui-accordion-header:not(.ui-state-error),
body .ui-accordion .ui-accordion-header.ui-state-active:not(.ui-state-error) {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
}

body .ui-accordion .ui-accordion-header.ui-state-hover {
    background: var(--bs-gray-300);
}

body .ui-accordion .ui-accordion-content {
    padding: 0.5em 1em;
    border-color: var(--bs-gray-400);
}

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

.ligneRecord {
    margin-bottom: 5px;
    min-height: 1.4em;
}

.warningGirondeXL3D {
    margin-top: 3.6em;
    font-size: 1.2em;
}

.mediaFeuilleRoute {
    margin-top: 0.5em;
    height: calc(100% - 14em);
}

#form_dosy_depot_doc label {
    margin-right: 4px;
}


body .ui-dialog {
    box-shadow: 8px 8px 2px 1px rgba(0, 0, 0, .2);
}

.dialog-container {
    display: flex;
    flex-direction: column
}

.dialog-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

body .dialog-titre {
    font-size: 1.2em;
    color: var(--text-color);
}

body .dialog-soustitre {
    font-size: 1.1em;
    color: var(--text-color-secondary);
}

/* CSS du train d'étape pour les dossiers yacht */
body .ui-steps {
    margin: 0 2% 1em 2%;
}

body .ui-steps .ui-steps-item .ui-steps-title {
    white-space: break-spaces;
}

body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-title {
    font-weight: bold;
}

body .ui-steps::before {
    border-top: 0.5em solid var(--bs-gray-400);
    border-radius: 0.5em;
    top: calc(50% - 1.2em);
}

body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2rem;
    margin-top: 1rem;
    border: none;
}

.ui-steps.trainEtape .ui-steps-item:not(.ui-state-highlight) .etapeValidee .ui-steps-number {
    background-color: var(--bs-teal);
    color: var(--bs-light);
}

.ui-steps.trainEtape .ui-steps-item:not(.ui-state-highlight) .ui-steps-number {
    background-color: var(--bs-gray-400);
}

.ui-steps.trainEtape .ui-steps-item.ui-state-highlight .ui-steps-number {
    background-color: #1B40A1;
    color: var(--bs-light);
}

.text-vertical {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    color: var(--bs-light);
    padding: 0.5em;
    position: absolute;
    bottom: 1.5em;
    letter-spacing: 0.1em;
}

/* Surcharge de fileUpload pour qu'il s'affiche comme un bouton simple */
.ui-fileupload {
    display: inline-block;
}

body .ui-fileupload .ui-fileupload-buttonbar {
    background: none;
    border: none;
    padding: 0;
}

body .ui-fileupload .ui-fileupload-content {
    display: none
}

body .ui-tabs .ui-tabs-nav {
    background: var(--bs-gray-200);
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header {
    background: var(--bs-gray-200);
    border-radius: 4px 4px 0 0;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header,
body .ui-tabs .ui-tabs-nav li.ui-tabs-header {
    border-style: solid;
    border-width: 1px 1px 2px 1px;
    border-color: var(--bs-gray-400) var(--bs-gray-400) var(--bs-gray-200) var(--bs-gray-400);
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-active:not(.ui-state-error),
body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active:not(.ui-state-error) {
    border-color: var(--bs-gray-400) var(--bs-gray-400) #2196f3 var(--bs-gray-400);
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-error,
body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-error {
    border-color: var(--bs-gray-400) var(--bs-gray-400) #f44336 var(--bs-gray-400);
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-hover:not(.ui-state-active, .ui-state-error),
body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-hover:not(.ui-state-active, .ui-state-error) {
    border-color: var(--bs-gray-400) var(--bs-gray-400) var(--bs-gray-500) var(--bs-gray-400);
}

/* Info Pixel */
.labelDonneesDemo {
    margin-left: 5px;
}

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

.textEditorInplace .ui-inplace-display.inplaceVide {
    min-height: 2em;
}

.ui-editor-toolbar {
    background-color: var(--bs-gray-200);
}

.ql-toolbar.ql-snow {
    border-color: var(--bs-gray-400) !important;
    border-radius: 5px 5px 0 0;
}

.ql-container.ql-snow {
    border-color: var(--bs-gray-400) !important;
    border-radius: 0 0 5px 5px;
}

/* Styles CSS pour l'inplace du textEditor (repris depuis ql-editor) */
.textEditorInplace .ql-font-serif {
    font-family: Georgia, Times New Roman, serif
}

.textEditorInplace .ql-font-monospace {
    font-family: Monaco, Courier New, monospace
}

.textEditorInplace .ql-size-small {
    font-size: .75em
}

.textEditorInplace .ql-size-large {
    font-size: 1.5em
}

.textEditorInplace .ql-size-huge {
    font-size: 2.5em
}

.textEditorInplace .ql-align-center {
    text-align: center
}

.textEditorInplace .ql-align-justify {
    text-align: justify
}

.textEditorInplace .ql-align-right {
    text-align: right
}

.textEditorInplace ol li.ql-indent-1 {
    counter-increment: list-1;
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    list-style-type: none;
}

.textEditorInplace ol li.ql-indent-1:before {
    content: counter(list-1, lower-alpha) '. '
}

.textEditorInplace ol li.ql-indent-2 {
    counter-increment: list-2;
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    list-style-type: none;
}

.textEditorInplace ol li.ql-indent-2:before {
    content: counter(list-2, lower-roman) '. '
}

.textEditorInplace ol li.ql-indent-3 {
    counter-increment: list-3;
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
    list-style-type: none;
}

.textEditorInplace ol li.ql-indent-3:before {
    content: counter(list-3, decimal) '. '
}

.textEditorInplace ol li.ql-indent-4 {
    counter-increment: list-4;
    counter-reset: list-5 list-6 list-7 list-8 list-9;
    list-style-type: none;
}

.textEditorInplace ol li.ql-indent-4:before {
    content: counter(list-4, lower-alpha) '. '
}

.textEditorInplace ol li.ql-indent-5 {
    counter-increment: list-5;
    counter-reset: list-6 list-7 list-8 list-9;
    list-style-type: none;
}

.textEditorInplace ol li.ql-indent-5:before {
    content: counter(list-5, lower-roman) '. '
}

.textEditorInplace ol li.ql-indent-6 {
    counter-increment: list-6;
    counter-reset: list-7 list-8 list-9;
    list-style-type: none;
}

.textEditorInplace ol li.ql-indent-6:before {
    content: counter(list-6, decimal) '. '
}

.textEditorInplace ol li.ql-indent-7 {
    counter-increment: list-7;
    counter-reset: list-8 list-9;
    list-style-type: none;
}

.textEditorInplace ol li.ql-indent-7:before {
    content: counter(list-7, lower-alpha) '. '
}

.textEditorInplace ol li.ql-indent-8 {
    counter-increment: list-8;
    counter-reset: list-9;
    list-style-type: none;
}

.textEditorInplace ol li.ql-indent-8:before {
    content: counter(list-8, lower-roman) '. '
}

.textEditorInplace ol li.ql-indent-9 {
    counter-increment: list-9
}

.textEditorInplace ol li.ql-indent-9:before {
    content: counter(list-9, decimal) '. '
}

.textEditorInplace .ql-indent-1 {
    padding-left: 3em
}

.textEditorInplace li.ql-indent-1 {
    padding-left: 4.5em;
    list-style-position: inside;
}

.textEditorInplace .ql-indent-2 {
    padding-left: 6em
}

.textEditorInplace li.ql-indent-2 {
    padding-left: 7.5em;
    list-style-position: inside;
}

.textEditorInplace .ql-indent-3 {
    padding-left: 9em
}

.textEditorInplace li.ql-indent-3 {
    padding-left: 10.5em;
    list-style-position: inside;
}

.textEditorInplace .ql-indent-4 {
    padding-left: 12em
}

.textEditorInplace li.ql-indent-4 {
    padding-left: 13.5em;
    list-style-position: inside;
}

.textEditorInplace .ql-indent-5 {
    padding-left: 15em
}

.textEditorInplace li.ql-indent-5 {
    padding-left: 16.5em;
    list-style-position: inside;
}

.textEditorInplace .ql-indent-6 {
    padding-left: 18em
}

.textEditorInplace li.ql-indent-6 {
    padding-left: 19.5em;
    list-style-position: inside;
}

.textEditorInplace .ql-indent-7 {
    padding-left: 21em
}

.textEditorInplace li.ql-indent-7 {
    padding-left: 22.5em;
    list-style-position: inside;
}

.textEditorInplace .ql-indent-8 {
    padding-left: 24em
}

.textEditorInplace li.ql-indent-8 {
    padding-left: 25.5em;
    list-style-position: inside;
}

.textEditorInplace .ql-indent-9 {
    padding-left: 27em
}

.textEditorInplace li.ql-indent-9 {
    padding-left: 28.5em;
    list-style-position: inside;
}

.imagePixel {
    max-width: 100%;
    margin-bottom: 15px;
}

.boutonCompPixel {
    margin-left: 15px;
}

.zoneContenuPixel {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

.fieldest-row {
    display: flex;
}

.fieldest-cell {
    height: 100%;
}

.listePixel .ui-autocomplete {
    /* définition de la taille pour conserver le libellé sur la même ligne */
    width: calc(100% - 10em);
}

.listePixel .ui-autocomplete-input {
    width: calc(100% - 2em);
}

.pixel-bloc-navire label {
    width: 10em;
    margin-right: 1em;
}

.pixel-bloc-traitement label {
    width: 21em;
    margin-right: 1em;
}

.sous-titre-pixel {
    font-size: 1.4em;
    font-weight: bold;
}

.formulairePixel {
    padding-left: 10px;
}

.rechercheAnneeResultatsPixel {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 15px 0 15px 0;
}

.blocAjoutResultat {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-bottom: 15px;
}

.resultatContent {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    min-height: 8em;
}

.nouveauResultat {
    display: flex;
    flex-flow: column wrap
}

.visuPdfPixel {
    height: calc(90vh - 200px);
}

.imageResultat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 10em;
}

.bloc-simulation-modelisation-energetique {
    display: flex;
    justify-content: space-between;
}

.bandeauVisa {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 0 !important;
}

.autocomplete_multiple_nature {
    /* pour rester sur la meme ligne que le label */
    max-width: calc(100% - 20em) !important;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.full-width {
    width: 100% !important;
}

body .ui-chips.custom-chips {
    pointer-events: none;
    width: calc(100% - 11em);
}

body .ui-chips.custom-chips.desactive.ui-state-disabled {
    opacity: 1;
}

body .ui-chips.custom-chips.desactive .ui-chips-token .ui-chips-token-icon.ui-icon-close {
    display: none;
}

body .ui-chips.custom-chips .ui-chips-container {
    border: none;
}

body .ui-chips.custom-chips .ui-chips-container .ui-chips-token {
    height: 2.2em;
    pointer-events: all;
    z-index: 1;
}

body .ui-chips.custom-chips .ui-chips-container .ui-chips-token .ui-chips-token-icon {
    pointer-events: all;
    margin-top: -7px;
}

body .ui-chips.custom-chips input {
    pointer-events: none !important;
    cursor: pointer;
    width: 100% !important;
}

body .ui-chips.custom-chips ul {
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
}

.custom-tooltip {
    z-index: 2;
    width: 250px;
}

.custom-tooltip-container {
    border-radius: 8px;
    padding: 16px;
    background-color: rgba(0, 0, 0, .9);
    box-shadow: 8px 8px 2px 1px rgba(0, 0, 0, .2);
    border: solid rgba(0, 0, 0, .6) 1px;
    color: white;
}

.custom-tooltip-nom-navire {
    text-align: center;
    font-size: 1.2em;
}

.custom-tooltip-nom-content {
    margin-top: 8px;
}

.custom-tooltip .value {
    text-align: end;
}

.custom-tooltip-dangereux {
    color: red;
}

.releve-sas-container {
    padding: 12px;
}

.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.2);
}

.creation_sas_releve label:not(.ignore-label) {
    width: 11em;
}

body .ui-button.compass-button {
    height: 2.4em;
    margin-left: -2px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.infosDemandeur label {
    width: 13.5em;
    margin-right: 0.5em;
}

.infosDemandeur textarea {
    width: calc(100% - 14em);
}

.btn-suppression-bloc {
    margin-left: 2em;
}

#formInfosUtiles ul,
#formDemandeAcces ul {
    padding-left: 10px;
}

#formInfosUtiles li .description,
#formDemandeAcces li .description {
    margin-left: 5px;
    margin-bottom: 5px;
}

#formInfosUtiles textarea,
#formDemandeAcces textarea {
    width: 100%;
}

.infosInscription label {
    width: 9.5em;
    margin-right: 0.5em;
}

#formInscription .blocMdpParent {
    display: flex;
}

#formInscription .blocMdpFils {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#formInscription .blocMdpFils label {
    width: 16.5em;
    margin-right: 0.5em;
}

#formDemandeAcces .ui-divider-horizontal::before {
    width: 26em !important;
    margin-left: 4em;
}

@media screen and (min-width: 1300px) {
    .wrapperTableTerrestre {
        position: absolute;
        top: 6.5em;
        bottom: 0px;
        right: 0;
        left: 0;
    }
}

@media screen and (min-width: 990px) and (max-width: 1300px) {
    .wrapperTableTerrestre {
        position: absolute;
        top: 9em;
        bottom: 0px;
        right: 0;
        left: 0;
    }
}

@media screen and (max-width: 990px) {
    .wrapperTableTerrestre {
        position: absolute;
        top: 12em;
        bottom: 0px;
        right: 0;
        left: 0;
    }
}

.choix-marcha-terrestre label {
    width: 10em;
    margin-right: 1em;
}

.choix-marcha-terrestre .ui-autocomplete {
    vertical-align: top;
}

.dialogAbonnement {
    /* permet d'afficher proprement le message d'erreur */
    min-width: 450px;
}

.barreActionPrestation {
    padding: 2px;
    max-height: 25px;
    display: flex;
    flex-direction: row;
}

.ui-widget-content.delaiDepassement {
    background-color: #FFA9A9;
}

.inner-fieldset-panel-grid {
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
    margin-left: 8px;
}

.sas-panelgrid {
    width: 100% !important;
}

.sas-panelgrid .ui-panelgrid-cell {
    border: 1px solid rgba(66, 66, 66, 0.5) !important;
}

.sas-prevision-ecluse-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 10% !important;
}

.sas-prevision-ecluse-sens {
    width: 45% !important;
}

.sas-prevision-ecluse-secteur-divider {
    border-bottom: 2px dotted rgba(66, 66, 66, 0.2);
    margin-bottom: 8px;
}

.sas-prevision-ecluse-sens-label {
    padding-bottom: 4px;
    padding-top: 4px;
    margin: -4px -10px 16px;
    position: relative;
}

.sas-prevision-header-buttons {
    display: flex;
    justify-content: start;
}

.sas-prevision-retrait-ecluse {
    position: absolute;
    left: 4px;
    top: 2px;
}

.sas-releve-navire-tooltip {
    padding-left: 4px;
}

.ui-tooltip .ui-tooltip-text {
    background-color: rgba(0, 0, 0, .9) !important;
}

.sas-releve-retrait-navires {
    text-align: end !important;
}

.style-prescription-URGENT {
    background-color: #f1c89b !important;
}

.style-prescription-DEPASSE {
    background-color: #FFA9A9 !important;
}

.style-prescription-SORTI {
    background-color: #8ef1a0 !important;
}

.uppercase {
    text-transform: uppercase;
}

#formPilotage .iconeSuppression,
#formDemandeAcces .iconeSuppression,
#formPaquebot .iconeSuppression,
.enginDocuments .iconeSuppression {
    vertical-align: middle;
    margin-left: 10px;
}

.icon-button-center .ui-button-icon-left {
    margin-top: -10px !important;
    margin-left: -2px !important;
}

.fill-container {
    flex: auto;
}

#formPaquebot .suppressionDehalage {
    position: absolute;
    top: calc(50% - 2em);
    right: 0.5em;
}

#formPaquebot label,
#formManifestation label {
    width: 12em;
    margin-right: 0.5em;
}

#formPaquebot textarea,
#formManifestation textarea {
    width: calc(100% - 13em);
}

.performances_portuaires_tableaux {
    /* Surcharge pour éviter une taille réduite dans certains cas. */
    width: 100%;
}

.performances_portuaires_colonne,
.ui-state-default.performances_portuaires_colonne {
    text-align: right;
    width: 33%;
}

.tendanceBaisse {
    color: red;
}

.tendanceHausse {
    color: green;
}

.tendanceVide {
    display: none;
}

.saisie-tp-table .ui-paginator-bottom {
    position: relative;
}

.btns-saisie-tp {
    display: flex;
    justify-content: flex-end;
}

.pa-8 {
    padding: 8px;
}

.fixed-label-column-width {
    width: 20vw;
}

.fixed-number-column-width {
    width: 10vw
}

.sous-titre-mdp {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 1.5rem 1rem;
}

.semaine-paquebot {
    display: flex;
    text-align: center;
}

.semaine-item {
    border: 1px solid var(--bs-gray-400);
    height: 2.5rem;
    background-color: var(--bs-gray-200);
    line-height: 2.3rem;
    font-size: 1.1rem;
    color: var(--text-color);
}

.libelle-sas .ui-inplace-display, .libelle-sas textarea {
    font-size: 1.5em !important;
    font-weight: bold !important;
}

#formResultatsCapteurs label {
    margin-right: 0.5em;
}

#formResultatsCapteurs .ligneImageResultats {
    max-height: calc(100% - 10em);
    display: flex;
    justify-content: center;
}

#formResultatsCapteurs .imageResultats {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.observation-sas .ui-inplace-display, .observation-sas textarea {
    font-size: 1.5em !important;
}

.fieldset-prevision-sas label:not(.radio-label):not(.libelleConcatene) {
    width: 15em;
    vertical-align: middle;
}

.fieldset-prevision-sas .sas-panelgrid label:not(.radio-label):not(.libelleConcatene) {
    width: 10em;
    vertical-align: middle;
}


.dashboardAccueil .ui-dashboard-column {
    margin-right: 2.5em;
    padding-bottom: 1.5em;
}

.dashboardAccueil .ui-dashboard-column:first-child {
    margin-left: 1.5em;
}

.dashboardAccueil .ui-dashboard-column:last-child {
    margin-right: 1.5em;
}

.dashboardAccueil .ui-dashboard-column .ui-panel {
    margin-bottom: 2.5em;
}

.dashboardAccueil .ui-dashboard-column .ui-panel:first-child {
    margin-top: 1.5em;
}

.dashboardAccueil .ui-dashboard-column .ui-panel:last-child {
    margin-bottom: 1.5em;
}

.dashboardAccueil .ui-dashboard-column .ui-panel-titlebar {
    cursor: default;
}

@media screen and (max-width: 768px) {
    .dashboardAccueil .ui-dashboard-column {
        width: calc(100% - 3em);
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .dashboardAccueil .ui-dashboard-column {
        width: calc(50% - 3em);
    }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
    .dashboardAccueil .ui-dashboard-column {
        width: calc(33% - 3em);
    }
}

@media screen and (min-width: 1600px) {
    .dashboardAccueil .ui-dashboard-column {
        width: calc(25% - 3em);
    }
}

.ui-divider-horizontal.recapitulatifPaiement::before {
    position: relative;
    margin-left: auto;
    margin-right: auto
}

#paiementEnLigne .row.rowAvecMedia {
    height: calc(100% - 4em);
}

.modal-body .mediaPopin {
    height: calc(100vh - 15em);
}

body .ui-staticmessage.messageBarreAction {
    margin: 0;
    padding: 0.3rem;
}

body .ui-staticmessage.messageBarreAction .ui-message-warn-summary,
body .ui-staticmessage.messageBarreAction .ui-message-error-summary,
body .ui-staticmessage.messageBarreAction .ui-message-warn-detail,
body .ui-staticmessage.messageBarreAction .ui-message-error-detail {
    margin-left: 0.2rem;
}

.lst_dmd_nombre_personne_a_bord {
    display: flex;
}

body .ui-button.filtreDateActif {
    background-color: var(--bs-teal);
    border-color: var(--bs-teal);
}

.enginDocuments .ui-panel-titlebar-icon,
.enginPersonnel .ui-panel-titlebar-icon,
.visiteHistorique .ui-panel-titlebar-icon {
    float: left !important;
    margin-top: 0.2rem !important;
}

.visiteHistorique .ui-panel-titlebar-icon {
    margin-left: 1.7rem !important;
}

.enginDocuments .ui-panel-titlebar,
.enginPersonnel .ui-panel-titlebar {
    padding: 0.5rem !important;
}

.enginDocuments .ui-button {
    line-height: normal;
}

.row-realisation-engin{
    margin: 0;
    padding: 1rem;
    border-radius: 0.8rem;
}

.prestaEngin.ui-panelgrid tbody td {
    background-color: transparent !important;
}

.bodyVisiteEngin .row {
    align-items: center;
}

.visiteHistorique .ui-panel-titlebar,
.visiteHistorique .ui-panel-content {
    padding: 0.5rem !important;
    background-color: transparent !important;
    border: none !important;
}

.fond-rouge {
    background-color: #ffc4c4 !important;
}

.fond-orange {
    background-color: #ffc68e !important;
}

.fond-jaune {
    background-color: #fff7a2 !important;
}

.fond-vert {
    background-color: #d1ffc4 !important;
}

.planning-gmao-wrapper {
    position: absolute;
    top: 2.6em;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 1em 1em 0 1em;
}

.planning-gmao-wrapper tbody {
    background-color: white;
}

.vertical-center {
    display: flex;
    align-items: center
}

#form_demande_prestation .ui-selectoneradio label {
    width: auto !important;
}

.flexWrapAvecEspacement {
    flex-wrap: wrap;
    row-gap: 2px;
}

body .fc .fc-event.visite,
body .fc .fc-event.visite .fc-event-main,
a.visite,
body .fc .fc-event-inner.visite {
    background: blue;
}

body .fc .fc-event.absence_validee,
body .fc .fc-event.absence_validee .fc-event-main,
a.absence_validee,
body .fc .fc-event-inner.absence_validee {
    background: green;
}

body .fc .fc-event.absence_demandee,
body .fc .fc-event.absence_demandee .fc-event-main,
a.absence_demandee,
body .fc .fc-event-inner.absence_demandee {
    background: orange;
}

.titre-acces-nautique {
    text-align: center;
    margin: 2rem 0 1rem 0;
}

.body-nautique {
    position: absolute;
    top: 3.2em;
    right: 0;
    left: 0;
    bottom: 0;
}

.wrap-nautique {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: scroll;
}

.graph-card, .graph-card-tirantAir {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
}

.graph-card-coupees {
    max-width: 80rem;
    margin-left: 12rem;
    text-align: center;
}

.pente-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.7em;
}

.export-graph-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

body .fc .fc-event.affectation,
body .fc .fc-event.affectation .fc-event-main,
a.affectation,
body .fc .fc-event-inner.affectation {
	background: #0a95c4;
}

.engin-realisation-btns{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 0.4rem;
}

body .ui-menu {
    width: fit-content;
}

.libelleMenuOptions {
    margin-left: 0.5em;
    vertical-align: text-bottom;
}