/* Grille Plan en coupe */

div#plan-en-coupe-container {
    display: flex;
    gap: 20px;
    padding: 1em;
    min-height: 50vh;

}

div#plan-en-coupe-container * {
    box-sizing: border-box;
}

#grid_defunt_container {
    flex-basis: 80%;
    display: grid;
    grid-auto-flow: column;
    box-shadow: 2px 2px 4px 0 rgba(150, 131, 202, 0.2);
    box-sizing: border-box;
    grid-gap: 1px;
    background-color: #9683ca;
    border: solid 1px #9683ca;
}

.liste_genealogie {
    margin-left: 1em;
}

.liste_defunt {
    background-color: #cec2f0;
    padding: 10px;
    flex-basis: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 1em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.card-header {
    border: none;
}

.grid_defunt {
    background-color: #ffffff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#grid_defunt_container.vide-sanitaire .grid_defunt.line1 {
    background-color: #eae7f2;
}

#grid_defunt_container.vide-sanitaire .grid_defunt.line1:after {
    content: "Vide sanitaire";
    margin: auto;
    font-style: italic;
    color: #7050ca;
}

.defunt_card {
    width: 100%;
    padding: 0.5em;
    margin: 0 !important;
    height: auto !important;
    border: none;
    border-left: 5px solid #9478e3;
    border-radius: 5px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
}

.defunt_card.ui-sortable-placeholder {
    border: dashed 1px #9478e3 !important;
    background: #d4cde9 !important;
    height: auto !important;
}

.defunt_card .defunt_card-nature {
    font-weight: normal;
    text-transform: capitalize;
    font-style: italic;
    margin: .5em 0;
}

.defunt_card .link_defunt {
    font-weight: bold;
    margin-top: 1em;
}

#plan_en_coupe .formEntete {
    position: relative;
}

.cellLocked,
.cellUnlocked {
    position: relative;
    min-height: 100px;
}

.cellLocked button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only,
.cellUnlocked button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    border-radius: 75px;
    background-color: transparent;

}
.cellLocked button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only:hover,
.cellUnlocked button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only:hover {
    box-shadow: none; 

}

.cellLocked button span.ui-button-text,
.cellUnlocked button span.ui-button-text {
    display: inline-block;
    padding: .5em;
    line-height: 0;
}


.cellLocked>span {
    color: #999;
    font-style: italic;
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.vide-sanitaire>div.line1.cellLocked>span {
    color: #999;
    font-style: italic;
    font-size: 1.2em;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cellLocked button .remix {
    width: 24px;
    height: 24px;
    fill: #9478e3;
}

.cellUnlocked button .remix {
    width: 24px;
    height: 24px;
    fill: #ccc;
}

.cellLocked button:hover,
.cellUnlocked button:hover {
    background-color: #EFEBFB;
}

.cellLocked button:hover .remix,
.cellUnlocked button:hover .remix {
    fill: #9478e3;
}

.cellLocked button:hover::after,
.cellUnlocked button:hover::after {
    z-index: 99999;
    position: absolute;
    top: 50%;
    right: 75%;
    transform: translateY(-50%);
    margin-right: 5px;
    font-weight: 700;
    color: #fff;
    background-color: rgba(148, 120, 227, .75);
    padding: .2em .4em;
    border-radius: 4px;

}

.cellUnlocked button:hover::after {
    content: "Verrouiller";
}

.cellLocked button:hover::after {
    content: "Déverrouiller";
}

#dashboard .widget-header-move {
    cursor: grab !important;

}