* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --grey: #E9E9E9;
    --violet_txt: #004;
    --violet_border: #AAC;
    --violet_background: #DFDFF8;

    --unit: 1rem;
    --header_height: calc(3 * var(--unit));
}


/* layout global */
/*
body {
    min-height: 100vh;
}
*/

/* layout header */

header {
    display: flex;
    align-items: center;
    height: var(--header_height);
    
    position: sticky;
    z-index: 15;
    top: 0px;

    padding-left: calc(1 * var(--unit));
}
header h2 {
    display: flex;
}
header h2:before {
    content: "|";
    margin-left: calc(.5 * var(--unit));
    margin-right: calc(.5 * var(--unit));
}



/* layout wrapper */

#wrapper {
    display: flex;
    align-items: flex-start;
}

#tools,
#inspector {
    width: calc(100% / 4);
    padding: calc(1 * var(--unit));
    
    position: sticky;
    top: var(--header_height);

    overflow: scroll;
    height: calc(100vh - var(--header_height));
}
#visu {
    flex: 1;
    padding: calc(1 * var(--unit));
    height: calc(100vh - var(--header_height));
    overflow: scroll;
}




/* colors */

#visu {
    background-color: white;
}



/* tools */

.hierarchical_entry {
    display: flex;
    align-items: center;
    height: 50px;
    margin-bottom: 5px;
}

button {
    padding: .8rem;
    display: block;
}

#tools > * { margin-bottom: calc(1.5 * var(--unit)); }

.buttons_level {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.buttons_level button {
    display: flex;
    width: 22px;
    height: 15px;
    padding: 0;
}
.buttons_level button.level_down {
    margin-top: 10px;
}
.hierarchical_entry button.remove {
    display: flex;
    width: 15px;
    aspect-ratio: 1/1;
    padding: 0;
}
button.create {
    display: flex;
    gap: var(--unit);
    align-items: center;
}


/* visu */

#visu details {
    margin-top: -1px;
    padding: 0px;
}
#visu details details {
    margin-left: calc(1.5 * var(--unit));
}
#visu > details > summary {
    margin-top: -1px;
}
#visu details summary:hover {
    background-color: aliceblue;
}
/*
#visu details details summary {
    height: 10px;
    overflow: hidden;
    padding: 0px;
    margin-top: -1px;
}
#visu details details summary.selected {
    height: auto;
    overflow: visible;
    padding: .8rem;
}
*/
#visu details summary.selected {
    background-color: #ffe1e1;
}

#visu summary {
    width: 100%;

    padding-right: 35px;
}
#visu summary p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
}



/* summary pr tools et visu */
summary {
    list-style: none;
    
    padding: .8rem;
    padding-right: 50px;
    height: 50px;
    cursor: pointer;
    position: relative;

    display: inline-flex;
    align-items: center;
}




/* LOADER */

.loader_container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 20;
    top: 0px;
    background-color: var(--grey);

    display: flex;
    justify-content: center;
    align-items: center;
}
.loader {
    display: flex;
    flex-direction: column;

    width: 50%;

    background-color: white;
}

.loader {
    padding: 1rem;
}
.loader .progress_bar {
    width: 0px;
    height: 1rem;
    background-color: var(--violet_background);
}



/* TYPOGRAPHY */
body, h1, h2, h3 {
    font-size: 1rem;
    font-weight: 400;
}
body { font-family: "alegreya_sans"; }
#visu { font-family: "EBGaramond"; }

header a {
    text-decoration: none;
    color: inherit;
}
header * {
    text-transform: uppercase;
    font-weight: 600;
}

select {
    font-family: "alegreya_sans";
}


#visu summary {
    font-size: 1.2rem;
}
#visu summary span {
    font-family: "alegreya_sans";
    font-size: 1rem;
}

#undefined_operator_container,
.uncheck {
    font-size: .9rem;
}

#inspector p,
#inspector li {
    margin-bottom: 1rem;
}
#inspector ul {
    list-style: inside;
}
#inspector a {
    text-decoration: underline;
    color: inherit;
}
.definition {
    font-weight: 600;
}

/* BEFORE/AFTER */

button.level_up:before {
    content: "";
    background-image: url('../svg/chevron_haut.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
}
button.level_down:before {
    content: "";
    background-image: url('../svg/chevron_bas.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
}
button.remove:before {
    content: "";
    background-image: url('../svg/croix.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
}
button.remove:before {
    content: "";
    background-image: url('../svg/croix.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
}
button.create:before {
    content: "";
    background-image: url('../svg/plus.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 18px;
    aspect-ratio: 1/1;
}
.select::after {
    content: "";
    background-image: url('../svg/chevron_bas.svg');
    background-size: 22px;
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: 17px;
    width: 22px;

    position: absolute;
    content: '';
    top: 0; right: 0;
    height: 100%;
    pointer-events:none;
    padding-left: 5px;
    padding-right: 5px;
}
summary::after {
    content: "";
    background-image: url('../svg/chevron_bas.svg');
    background-size: 22px;
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: 17px;
    width: 22px;

    position: absolute;
    content: '';
    top: 0; right: 0;
    height: 100%;
    pointer-events:none;
    padding-left: 5px;
    padding-right: 5px;

}
#visu summary.end:after {
    content: "";
    background-image: url('../svg/plus.svg');
    background-size: 11px;
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: 21px;
    width: 11px;

    position: absolute;
    content: '';
    top: 0; right: 0;
    height: 100%;
    pointer-events:none;
    padding-left: 5px;
    padding-right: 5px;
}

/* COLORS / BORDER / BG */
header, #tools, #inspector {
    background-color: var(--grey);
}
#tools, #inspector {
    border-top: 2px solid white;
}
#tools button  {
    border: none;
    background-color: inherit;
}
#tools button.create {
    border: none;
    background-color: white;
}
#tools button.uncheck,
#tools button.reset {
    border: 1px solid black;
}

select {
    background-color: white;
    border: none;
    color: black;
}
details label > span {
    color: black;
}
details label > span::before {
    border: 2px solid black;
}
details label span.selected {
    color: black;
}
details label span.selected::before {
    background: black;
    border: 2px solid black;
}
details label:hover span:not(.selected)::before {
    background: lightgrey;
    border: 2px solid black;
}
#tools summary {
    background-color: white;
}
#visu summary {
    color: var(--violet_txt);
    border: 1px solid var(--violet_border);
    background-color: white;
}
#visu summary span {
    color: black;
}
#visu summary::after {
    border-color: var(--violet_border);
}



/* HOVER */

#tools button:hover,
select:hover,
summary:hover {
    color: black;
    background-color: lightgrey;
}



/* SELECT */

select {
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    appearance:none;
    outline:0;
    box-shadow:none;
    flex: 1;
    padding: 0 .5em;
    cursor:pointer;
}
select::-ms-expand {
    display: none;
}
.select {
    position: relative;
    display: flex;
    height: 100%;

    margin-left: var(--unit);
    margin-right: var(--unit);

    overflow: hidden;
}



/* checkboxes */

details input {
    -webkit-appearance: none;
    appearance: none;
}
details label {
    display: flex;
    cursor: pointer;
    padding: .4rem;
    padding-left: .8rem;
}
details label > span {
    position: relative;
    padding-left: 29px;
}
details label > span::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 1px;
    width: 15px;
    aspect-ratio: 1/1;
    border-radius: 100%;
}

/* CURSOR */

.select,
#tools button {
    cursor: pointer;
}