segment{
    position: relative;
    display: inline;
    text-align: center;   
    font-weight: normal;
}

.display-body{
    line-height: 300%;
    font-family: sans-serif;
    padding: 20px;
    font-family: 'Open Sans', sans-serif;
}
.transitivity{
    line-height: 400%;
}
:root{
 --content-text : "";
}
.sen_num{
    display: none;
    width: fit-content;
    line-height: normal;
    background-color: dodgerblue;
    color: whitesmoke;
}
/* segment::before,::after
{
    content: "";
    background-color:none;
    border-radius: 20%;
    background-size: 10px 20px;
    width: max-content;
    text-align: center;
    line-height: 120%;
    top: 33px;
    padding: none;
    position: absolute;
    right: 1%;
}
segment[features*= 'ideational-unit']::before
{
       top: 40px;
}
segment.active::before
{
    content: var(--content-text);
    background-color:lightgoldenrodyellow;
    width: -webkit-fill-available;
}
segment.role::after
{
    background-color:rgb(233, 151, 75);
    top: 60px;
    width: -webkit-fill-available;
}
segment.goal::after
{
    content: "Goal";
}
segment.circumstance::after
{
    content: "Circumstance";
}
segment.actor::after
{
    content: "Actor";
}
segment.process::after
{
    content: "Process";
}
segment.subj::after
{
    content: "Subj";
} */
segment.dobj::after
{
    content: "Dobj";
}
segment.phenomenon::after
{
    content: "Phenomenon";
}
segment.senser::after
{
    content: "Senser";
}
segment.attribute::after
{
    content: "Attribute";
}
segment.element::after
{
    content: "Element";
}
segment.possessor::after
{
    content: "Possessor";
}
segment.existent::after
{
    content: "Existent";
}
segment.verbiage::after
{
    content: "Verbiage";
}
segment.carrier::after
{
    content: "Carrier";
}
segment.premod::after
{
    content: "PreMod";
}
segment.recipient::after
{
    content: "Recipient";
}
segment.addressee::after
{
    content: "Addressee";
}
segment.assessed::after
{
    content: "Assessed";
}
segment.sayer::after
{
    content: "Sayer";
}
segment.det::after
{
    content: "Det";
}
segment.conj::after
{
    content: "Conj";
}
segment.parataxis::after
{
    content: "Parataxis";
}
segment.iobj::after
{
    content: "IObj";
}
segment.case::after
{
    content: "Case";
}
segment.authorised::after
{
    content: "Authorised";
}
segment.activity::after
{
    content: "Activity";
}
segment.beneficiary::after
{
    content: "Beneficiary";
}