body {
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    max-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    font-family: Helvetica, Arial, sans-serif;
}

.view {
    background-color: #f0f0f0;
    border-radius: 6px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    font-size: 13px;
}

.acte_temporaire {
    background-color: darkseagreen;
}

.fermer_panneau_details,
.agrandir_releves {
    font-size: 20px;
    margin-top: 2px;
    margin-left: 4px;
    margin-right: 4px;
}

.pagination_button {
    cursor: pointer;
    background-color: white;
    border: thin rgb(118 118 118) solid;
    border-radius: 4px;
    color: inherit;
    min-height: auto;
}

.ligne_acte,
.visionneuse_acte,
.fleches-pagination-actes {
cursor: pointer;
}

.titre {
background-color: #515151;
width: 100%;
height: 60px;
padding-left: 0;
padding-right: 0;
z-index: 100;
display: flex;
flex-direction: row;
color: #ffffff;
align-items: center;
}

.titre_texte {
font-weight: bold;
padding-left: 1em;
font-size: clamp(1rem, 0.2500rem + 2.7083vw, 1.5rem);
}

.titre_logo {
height: 100%;
}

.titre_logo > a {
display: block;
height: 100%;
}

.titre_logo > a > img {
height: 100%;
}

.space {
flex-grow: 1;
}

.navigation_bar {
font-size: small;
font-weight: normal;
cursor: pointer;
list-style-type: none;
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: row;
}
.navigation_bar > li {
float: left;
color: white;
padding: 0 16px;
text-decoration: none;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.navigation_bar > li:hover {
background-color: #2c2c2c;
}
.navigation_bar > li.active {
background-color: #459B71;
}

.filtres {
height: auto;
border-color: dimgrey;
color: #515151;
font-weight: bold;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: clamp(0.5rem, 0.1250rem + 1.3542vw, 1rem);
}

#filtre_container_num {
display: flex;
}
#filtre_container_num > select {
margin-right: 10px;
}
#filtres_num_icon {
line-height: 24px;
color: #515151;
visibility: hidden;
cursor: pointer;
}
#filtres_num_icon.highlighted {
}
/* Popup container */
.popup {
    position: relative;
    display: inline-block;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 8px 8px 0 8px;
    position: absolute;
    z-index: 1000;
    top: 125%;
    right: 29px;
}
.popup .popuptext > * {
    margin-bottom: 8px;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
}

.registre_item,
.entete_liste {
    border-radius: 6px;
    height: auto;
}
.entete_liste {
    font-size: 15px;
    color: #515151;
    font-weight: bold;
    padding: 5px;
    background-color: #d6d6d6;
}
.entete {
    vertical-align: baseline;
    padding-top: 5px;
}
.entete span {
    text-overflow: ellipsis;
    text-align: left;
}
.entete_title {
    display: flex;
    justify-content: space-between;
    padding-right: 5px;
    height: 17px;
}
.filtre {
    padding-right: 5px;
    text-align: left;
}
.filtre > input[type=text], .filtre select {
    width: 100%;
    max-width: 100%;
    min-width: 30px;
    box-sizing: border-box;
    padding: 1px;
    height: 24px;
}
.filtre_preuves {
    position: relative;
    min-height: 21px;
}
.filtre_preuves > input {
    max-width: 100%;
    width: calc(100% - 8px);
    min-width: 20px;
    position: absolute;
    left: 0;
}
.top_bar_filtre {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.top_bar_filtre label {
    margin-right: 5px;
}
.sort-icons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 1px;
    margin-bottom: 1px;
}
.sort-by-asc, .sort-by-desc {
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.sort-by-asc {
    border-bottom: solid 6px rgb(219, 253, 219);
    border-top-width: 0;
}
.sort-by-desc {
    border-top: solid 6px rgb(219, 253, 219);
    border-bottom-width: 0;
}
.active-sort {
    border-top-color: #515151;
    border-bottom-color: #515151;
}

.liste {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.liste td, th {
    border-style: none;
    padding-left: 5px;
}
.liste th > * {
    margin-bottom: 5px;
}

.impair {
    background-color: rgb(219, 253, 219);
}

.pair {
    background-color: rgb(209, 210, 221);
}

.item {
    text-overflow: ellipsis;
    text-align: left;
}

.pagination_actes,
.pagination {
    text-align: center;
}
.pagination {
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

#entete_releves {
    width: 46px;
}
/* Shrink-to-content: width:1% makes the column take only what its content needs
   (small when the body cells are empty, expanding when there are numérisation links)
   instead of claiming a fixed share of the table. The capped select below keeps the
   long filter options from inflating it. */
#entete_numerisation {
    width: 1%;
}

td.numerisation {
    display: flex;
}

.releves {
    color: #515151;
}

.contenu {
    display: flex;
    flex-direction: row;
    min-height: 270px; /* to display the num filter pop-up entirely */
    max-height: calc(100% - 60px); /* minus the height of the header */
    height: calc(100% - 60px);
    width: 100%;
}

.agrandir_releves,
.fermer_panneau_details {
    float: right;
}

.agrandir_releves:hover,
.fermer_panneau_details:hover {
    color: green;
}

.contenu_gauche {
    display: none;
    flex-direction: column;
    flex-grow: 1;
    width: 48%;
    overflow: hidden;
    max-height: 100%;
    height: 100%;
}

.conteneur_liste {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;
}

.conteneur_table_liste {
    overflow: auto;
    flex-grow: 1;
}

.contenu_droite {
    display: none;
    flex-direction: column;
    width: 30%;
    height: 100%;
    max-height: -moz-available;
    max-height: -webkit-fill-available;
    padding: 5px;
    overflow-y: scroll;
}
.contenu_droite h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.contenu_droite hr {
    border: none;
    width: calc(100% - 5px);
}

#contenu_droite_notaires {
    display: flex;
    width: 53%;
    height: 100%;
    overflow: auto;
    padding: 0 5px 0 5px;
}

.contenu_droite .hline, .hline {
    border: 1px solid grey;
}

#div-details-index {
}

#COMGEN {
    width: -moz-available;
    width: -webkit-fill-available;
}

.cote_releves {
    font-weight: bold;
}

.hidden {
    display: none !important;
}

.agrandir_releves,
.fermer_panneau_details {
    cursor: pointer;
    padding: 0 5px 0 5px;
}
.registre_item {
    cursor: pointer;
}
.registre_item:hover {
    background-color: green;
}

.contenu_releves {
    display: none;
    flex-direction: column;
}

.boutons_haut_tableau, #div-indexation-complete {
    margin-bottom: 2px;
}

#div-indexation-complete > * {
    margin-right: 15px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;
}

.details_acte {
    display: none;
    flex-direction: column;
    border-radius: 6px;
    border-color: green;
    height: 90%;
}

.acte {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
}

.visible {
    display: flex;
}

.selected_item {
    border-color: black;
    border-style: solid;
}

input[type="button"],
button {
    background-color: green;
    border: 0.1rem solid green;
    color: #fff;
    cursor: pointer;
    width: fit-content;
    border-radius: 1rem;
    min-height: 34px;
}

input[type="button"]:disabled,
input[type="button"][disabled],
button:disabled,
button[disabled]{
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
}

.details {
    flex-direction: column;
}

.boutons_bas {
    display: flex;
    flex-direction: row;
}
.boutons_bas > * {
    margin-right: 5px;
}

.champ_acte {
    display: flex;
    flex-direction: row;
    justify-content: left;
    padding: 3px;
    font-weight: bold;
}

.col-25 {
    width: 25%;
}

.col-75 {
    flex-grow: 1;
}

.entete_section {
    text-align: center;
    font-weight: bold;
    color: green;
}

#liste_releves {
    border-spacing: 0;
    border-width: 1px;
    border-style: solid;
}

#liste_releves td, #liste_releves th {
    border-style: solid;
    border-color: grey;
    text-overflow: ellipsis;
    overflow: hidden;
    border-width: 1px;
}

.table_contenu_droite {
    border-spacing: 0;
    border-width: 1px;
    border-style: solid;
    width: 100%;
    text-align: center;
}

.table_contenu_droite td, .table_contenu_droite th {
    border-style: solid;
    border-color: grey;
    text-overflow: ellipsis;
    overflow: hidden;
    border-width: 1px;
    padding: 1px 2px 1px 2px;
}

#resume_preuves {
    margin-bottom: 5px;
}
#resume_preuves td {
    padding-right: 5px;
}
#resume_preuves td:nth-child(2) { text-align: end; }

.pied {
    text-align: center;
    font-size: 10px;
}

.mytooltip {
    display: inline;
    position: relative;
    z-index: 999;
    width: fit-content;
}
.mytooltip .tooltip-item {
    cursor: help;
}
.mytooltip .tooltip-content {
    position: absolute;
    z-index: 9999;
    width: 250px;
    top: 20px;
    left: 20px;

    text-align: left;
    font-size: 14px;
    -webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
    box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
    opacity: 0;

    cursor: default;
    pointer-events: none;

    color: black;
    background-color: lightgrey;
    border-style: solid;
    border-width: 3px;
    border-radius: 6px;
    padding: 3px;
    overflow: visible;
}
.mytooltip:hover .tooltip-content {
    pointer-events: auto;
    opacity: 1;
}
.mytooltip .tooltip-content {
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 0, 0deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 0, 0deg)
}
.mytooltip .tooltip-text {
    display: block;
}
.mytooltip .tooltip-text i {
    color: #515151;
    margin-right: 5px;;
}

#actions_notaire_preuves .mytooltip .tooltip-content {
    -webkit-transform: translate3d(0, calc(-100% - 35px), 0) rotate3d(0, 0, 0, 0deg);
    transform: translate3d(0, calc(-100% - 35px), 0) rotate3d(0, 0, 0, 0deg)
}

.ea_numerisation,
.ea_lien_numerisation {
    display: none;
}

.invalid {
    color: red;
    accent-color: red;
}
#form_new_preuve input:invalid,
#form_new_notaire input:invalid {
    border: 2px dashed red;
}

#form_new_notaire {
    display: flex;
    flex-direction: column;
}
#form_new_notaire input {
    width: 95%;
}

#create_notaire_div p, #choose_notaire_div p {
    margin-top: 0;
}

.radio_notaire_container {
    display: none;
}

#form_new_preuve {
    width: 100%;
}
#form_new_preuve td {
    vertical-align: top;
}
#form_new_preuve input[type=text],
#form_new_preuve textarea {
width: 95%;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 6pt;
    height: 6pt;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.42);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.hfill {
    flex-grow: 1;
}

#liste_preuves {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}
.conteneur_liste_preuves {
    flex-grow: 1;
    overflow: auto;
}

#actions_notaire_preuves button {
    margin-bottom: 5px;
}
.contenu_droite .entete_liste {
    font-size: inherit;
}

.top-bar-button {
    border: solid;
    padding: 2px 2px 0 2px;
    height: fit-content;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 5px;
}
.top-bar-button:hover {
    color: green;
}
.right_panel_title_div {
    padding: 5px 0;
    color: #515151;
    display: flex;
}
.right_panel_title_div > span {
    padding: 3px 3px 1px 3px;
    display: inline-block;
}
.right_panel_title_div h3 {
    margin: 0;
    line-height: 24px;
}
.right_panel_title_div .fermer_panneau_details {
    font-size: small;
    margin-top: 0;
}
.delete-top-bar:hover {
    color: red;
}
.delete {
    background-color: red;
    border-color: #c00202;
}
.info:hover {
    color: inherit;
    cursor: inherit;
}
.nom_notaire, .prenom_notaire {

}
.notary-details-div {
    display: flex;
    margin-top: 5px;
}
.notary-details-div > * {
    margin-right: 10px;
}
.comment_notaire_label {
    flex-grow: 1;
}
.comment_notaire {
    width: 100%;
}
.notary-details-subdiv-left {
    max-width: 50%;
}

/* Non Communicable styles */
.item.communicabilite {
    text-align: left;
}

/* Constrain the column width like #entete_releves / #entete_numerisation, otherwise
   it absorbs the table's leftover width and becomes very wide. */
#entete_communicabilite {
    width: 46px;
}

/* Reset the native select chrome so the icon renders consistently across browsers
   (Safari's native arrow reserves more width and clips the emoji at this size).
   We draw our own small caret instead. */
#filtre_nc,
#filtre_releves,
#select-numerisation {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M0 2l4 4 4-4' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 8px 8px;
    padding: 1px 15px 1px 5px;
    text-align: left;
    font-size: 14px;
    height: 24px;
    line-height: 22px;
}
#filtre_nc option,
#filtre_releves option,
#select-numerisation option {
    font-size: 14px;
}

/* Fixed width so the long numérisation options no longer drive the column width;
   the column then sizes to its body (numérisation links) per #entete_numerisation. */
#select-numerisation {
    width: 46px;
    flex-shrink: 0;
}

.nc-badge {
    display: inline-block;
    background-color: #dc3545;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 0 5px;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.3;
    cursor: help;
    position: relative;
    top: -1px;
}

/* Center the badge (and its tooltip wrapper) vertically against the cote text,
   instead of letting the inline wrapper ride on the text baseline. */
.nc-tooltip {
    display: inline-block;
    vertical-align: middle;
}

/* Open the NC tooltip below-right of the badge (cote column is near the left edge,
   so the default mytooltip transform would push it off-screen). */
.nc-tooltip .tooltip-content {
    transform: none;
    -webkit-transform: none;
    left: 0;
    top: 22px;
    width: 200px;
}

.nc-alert {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-left: 4px solid #dc3545;
    color: #721c24;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nc-alert-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.nc-alert-content {
    flex-grow: 1;
}

.nc-alert-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.nc-alert-date {
    font-size: 12px;
}