body {
    font-family: "Spartan";
}

#descDomainRange {
    text-align: center;
    word-wrap: break-word;
}

#descDomainRange h5 {
    font-family: "Sorts Mill Goudy";
    font-size: 10pt;
    font-weight: bolder;
}

.arrowRightColumn i{
    position: relative;
    font-size: 20pt;
    top: 50%;
}


#descProperty .propertytitle {
    font-size: 12pt;
    line-height: 12pt;
}

#descProperty .propertycodes {
    font-size: 17pt
}

#descProperty .propertycell {
    width: 170px;
    height: 90px;
    border: 1px solid black;
}

.classcell:not(.experimental){
    width: 100px;
    height: 100px;
}

.nonCidocCode {
    font-size: 10pt;
    font-weight: bolder;
}

#descCode {
    font-weight: bolder;
    margin-left: 0 !important;
}

#descTitle {
    font-size: 25pt;
}

#descCodeContainer {
    margin-left: 0 !important;
}

#descDomain, #descRange, #descProperty {
    font-size: 10pt;
}

#describer {
    width: 39%;
    height: 85vh;
    position: fixed !important;
    right: 20px;
}

.front, .back {
    padding: 20px;
    border: 1px solid rgba(19, 19, 19, 0.8);
}

#experiment {
    display: none;
    border: 1px solid rgba(19, 19, 19, 0.8);
    padding: 20px;
    width: 39%;
    height: 20vh;
    position: fixed;
    bottom: 0;
    right: 20px;
    z-index: 10;
}

#classesbtn, #propertiesbtn, #experimentbtn, #inspectbtn {
    cursor:pointer;
    user-select: none;
    float: right;
    margin:20px;
    font-family: "Sorts Mill Goudy";
    padding:5px;
    z-index: 99999999999;
}


#pointingHand {
    width: 80px;
    display: inline-block;
    margin-left: 30px;
    margin-top: -10px;
    margin-right: 10px;
}

#title {
    display: inline-block;
    padding-bottom: 20px;
    margin-left: 0px;
    margin-top: 10px;
    font-family: "Sorts Mill Goudy";
    font-size: 25pt;
    line-height: 25pt;
    padding: 15px 0;
}

#classesContainer {
    margin-left: 30px;
    display: block;
}

#propertiesContainer {
    margin-left: 30px;
}

/*
@keyframes flickerAnimation {
    0%   { box-shadow: inset 0px 0px 10px 1px rgba(255, 255, 255, 0.8); }
    50%  { box-shadow: inset 0px 0px 10px 1px rgba(255, 255, 255, 0.5); }
    100% { box-shadow: inset 0px 0px 10px 1px rgba(255, 255, 255, 0.8); }
}
*/

.highlighted {
    animation: flickerAnimation 3.5s infinite;
}


.classcell:not(.highlighted):not(.selectedCell):not(.experimentallyHighlighted):not(.experimental) {
    opacity: 0.5 !important;
}

.classcell.experimentallyHighlighted {
    opacity: 1 !important;
}


.classcell {
    display: inline-grid;
    outline: 1px solid rgba(19, 19, 19, 0.8);
    color: rgba(19, 19, 19, 0.8);
    position: relative;
    padding: 2px;
    margin-right: 1px;
    margin-bottom: 1px;
    font-family: "Spartan";
}

.propertycell {
    display: inline-block;
    outline: 1px solid rgba(255, 255, 255, 0);
    background-color: rgba(60, 60, 60);
    color: white;
    position: relative;
    padding: 2px;
    margin-right: 1px;
    margin-bottom: 1px;
    font-family: "Spartan";
}

.classtitle {
    font-size:6.5pt;
    text-align: center;
    height: 10px;
}

.propertytitle {
    font-size:8pt;
    line-height:8pt;
    text-align: center;
    height: 10px;
}

.classcodes {
    text-align:center;
    font-weight: bolder;
    font-size: 20pt;
    height: 20pt;
    padding-top: 15px;
}

.propertycodes {
    text-align:center;
    font-weight: bolder;
    font-size: 15pt;
    padding-top: 10px;
}

.classsuperclasses {
    font-size:5pt;
    text-align: center;
    position: absolute;
    top: 2px;
    display: block;
    width: 100%;
}

.propertysuperproperties {
    font-size:5pt;
    text-align: center;
    position: absolute;
    top: 2px;
    display: block;
    width: 100%;
}

.propertydomain {
    position: absolute;
    left:0;
    /* border-radius: 0px 15px 15px 0px; */
    text-align: left;
}

.propertyrange {
    position: absolute;
    right:0;
    /* border-radius: 15px 0px 0px 15px; */
    text-align: right;
}

.propertyDomainLabel, .propertyRangeLabel {
    font-size: 3.5pt;
    font-weight:800;
    line-height: 3.7pt;
}

.propertydomain, .propertyrange {
    font-weight: bolder;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 6pt;
    width: 40px;
    top:14px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.classlevel {
    position: absolute;
    font-size: 5pt;
    height: 5pt;
    top: 2px;
    left: 2px;
    background-color: white;
    color: white;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    font-weight: 800;
    font-family: Arial;
}

.level8 {
    width: 3px;
    height: 3px;
}
.level7 {
    width: 4px;
    height: 4px;
}
.level6 {
    width: 5px;
    height: 5px;
}
.level5 {
    width: 6px;
    height: 6px;
}
.level4 {
    width: 7px;
    height: 7px;
}
.level3 {
    width: 8px;
    height: 8px;
}
.level2 {
    width: 9px;
    height: 9px;
}
.level1 {
    width: 10px;
    height: 10px;
}
.level0 {
    width: 11px;
    height: 11px;
}

.classsubclasses {
  font-size: 4pt;
  position: absolute;
  text-align: center;
  bottom: 1px;
  width: 100%;
  overflow-x: hidden;
  word-break: break-all;
  padding-left: 5px;
  padding-right: 5px;
}

.cidoccell {
    cursor: pointer;
}

.classcell:hover{
    background: #929292;
}

.propertycell:hover{
    background: #262626;
}

#descComment {
    font-size: 10pt;
    height:170px;
    overflow-y: auto;
    position:relative;
}

.selectedCell.classcell {
    box-shadow:0px 0px 5px 2px black;
    z-index: 50;
}

.selectedCell.propertycell {
    background-color: rgb(35, 35, 35) !important;
}

.descsubclass, .descsubclass:hover, .descsuperclass, .descsuperclass:hover {
    cursor: pointer;
    color: black;
    display: block;
    font-size: 10pt;
}

.descsubclass:hover, .descsuperclass:hover {
    font-weight: 500;
}

#descsubclassescol h5, #descsuperclassescol h5, #deschierarchy h5, #descClassesProperties, #descClassesReferences    {
    font-family: "Sorts Mill Goudy" !important;
    font-size: 1.25rem;
}

#descsubclasses {
    height: 100px;
    overflow: auto;
}




.ccdot {
    position: absolute;
    width: 96%;
    height: 96%;
    border-radius: 1px;
    opacity: 1;
    z-index:-100;
}

.cidoccell {
    color: white;
}

#descCodeColor {
    display: block;
    position: absolute;
    width: 85%;
    height: 10px;
    top: -20px;
    border-radius: 0px 0px 3px 3px;
    z-index: -10;
}

:root {
    --TemporalEntity: #3783a8;
    --Actors: #72005f;
    --ConceptualObjects: #c78f15;
    --PhysicalThings: #801401;
    --Appellations: #68810C;
    --Places: #206D33;
    --Types: #F88C34;
    --Observables: #00008B;
    --None: #d8d8d8;
  }
  

.cidoccell.TemporalEntity,#descCodeColor.TemporalEntity,.propertydomain.TemporalEntity,.propertyrange.TemporalEntity {
    background-color: var(--TemporalEntity);
}
.cidoccell.Actors,#descCodeColor.Actors,.propertydomain.Actors,.propertyrange.Actors {
    background-color: var(--Actors);
}
.cidoccell.ConceptualObjects,#descCodeColor.ConceptualObjects,.propertydomain.ConceptualObjects,.propertyrange.ConceptualObjects {
    background-color: var(--ConceptualObjects);
}
.cidoccell.PhysicalThings,#descCodeColor.PhysicalThings,.propertydomain.PhysicalThings,.propertyrange.PhysicalThings {
    background-color: var(--PhysicalThings);
}
.cidoccell.Appellations,#descCodeColor.Appellations,.propertydomain.Appellations,.propertyrange.Appellations {
    background-color: var(--Appellations);
}
.cidoccell.Places,#descCodeColor.Places,.propertydomain.Places,.propertyrange.Places {
    background-color: var(--Places);
}
.cidoccell.Types,#descCodeColor.Types,.propertydomain.Types,.propertyrange.Types {
    background-color: var(--Types);
}
.cidoccell.Observables,#descCodeColor.Observables,.propertydomain.Observables,.propertyrange.Observables {
    background-color: var(--Observables);
}


/* DOMAIN AND RANGES IN PROPERTIES */

.propertydomain.TemporalEntity{
    background-color: var(--TemporalEntity);
    background: linear-gradient(270deg, rgba(128, 128, 128, 0) 0%, var(--TemporalEntity) 90%, var(--TemporalEntity) 100%);
}
.propertydomain.Actors{
    background-color: var(--Actors);
    background: linear-gradient(270deg, rgba(128, 128, 128, 0) 0%, var(--Actors) 90%, var(--Actors) 100%);
}
.propertydomain.ConceptualObjects{
    background-color: var(--ConceptualObjects);
    background: linear-gradient(270deg, rgba(128, 128, 128, 0) 0%, var(--ConceptualObjects) 90%, var(--ConceptualObjects) 100%);
}
.propertydomain.PhysicalThings{
    background-color: var(--PhysicalThings);
    background: linear-gradient(270deg, rgba(128, 128, 128, 0) 0%, var(--PhysicalThings) 90%, var(--PhysicalThings) 100%);
}
.propertydomain.Appellations{
    background-color: var(--Appellations);
    background: linear-gradient(270deg, rgba(128, 128, 128, 0) 0%, var(--Appellations) 90%, var(--Appellations) 100%);
}
.propertydomain.Places {
    background-color: var(--Places);
    background: linear-gradient(270deg, rgba(128, 128, 128, 0) 0%, var(--Places) 90%, var(--Places) 100%);
}
.propertydomain.Types {
    background-color: var(--Types);
    background: linear-gradient(270deg, rgba(128, 128, 128, 0) 0%, var(--Types) 90%, var(--Types) 100%);
}
.propertydomain.Observables {
    background-color: var(--Observables);
    background: linear-gradient(270deg, rgba(128, 128, 128, 0) 0%, var(--Observables) 90%, var(--Observables) 100%);
}
.propertydomain.none {
    background-color: var(--None);
    background: linear-gradient(270deg, rgba(128, 128, 128, 0) 0%, var(--None) 90%, var(--None) 100%);
}




.propertyrange.TemporalEntity{
    background-color: var(--TemporalEntity);
    background: linear-gradient(90deg, rgba(128, 128, 128, 0) 0%, var(--TemporalEntity) 90%, var(--TemporalEntity) 100%);
}
.propertyrange.Actors{
    background-color: var(--Actors);
    background: linear-gradient(90deg, rgba(128, 128, 128, 0) 0%, var(--Actors) 90%, var(--Actors) 100%);
}
.propertyrange.ConceptualObjects{
    background-color: var(--ConceptualObjects);
    background: linear-gradient(90deg, rgba(128, 128, 128, 0) 0%, var(--ConceptualObjects) 90%, var(--ConceptualObjects) 100%);
}
.propertyrange.PhysicalThings{
    background-color: var(--PhysicalThings);
    background: linear-gradient(90deg, rgba(128, 128, 128, 0) 0%, var(--PhysicalThings) 90%, var(--PhysicalThings) 100%);
}
.propertyrange.Appellations{
    background-color: var(--Appellations);
    background: linear-gradient(90deg, rgba(128, 128, 128, 0) 0%, var(--Appellations) 90%, var(--Appellations) 100%);
}
.propertyrange.Places{
    background-color: var(--Places);
    background: linear-gradient(90deg, rgba(128, 128, 128, 0) 0%, var(--Places) 90%, var(--Places) 100%);
}
.propertyrange.Types {
    background-color: var(--Types);
    background: linear-gradient(90deg, rgba(128, 128, 128, 0) 0%, var(--Types) 90%, var(--Types) 100%);
}
.propertyrange.Observables {
    background-color: var(--Observables);
    background: linear-gradient(90deg, rgba(128, 128, 128, 0) 0%, var(--Observables) 90%, var(--Observables) 100%);
}
.propertyrange.none {
    background-color: var(--None);
    background: linear-gradient(90deg, rgba(128, 128, 128, 0) 0%, var(--None) 90%, var(--None) 100%);
}



/* classlines */

.cidoclineCode {
    display: inline-block;
    width: 35px;
    text-align: center;
}

.cidocline.classline .cidoclineCode {
    color: white;
    padding: 2px;
}

.cidocline.propertyline .cidoclineCode{
    color: black;
    background-color:rgb(200, 200, 200);
    padding: 2px;
}

.cidocline.classline, .cidocline.propertyline {
    border-radius: 3px;
}

.cidocline.classline.TemporalEntity .cidoclineCode {
    background-color: var(--TemporalEntity)
}
.cidocline.classline.Actors .cidoclineCode {
    background-color: var(--Actors)
}
.cidocline.classline.ConceptualObjects .cidoclineCode {
    background-color: var(--ConceptualObjects)
}
.cidocline.classline.PhysicalThings .cidoclineCode {
    background-color: var(--PhysicalThings)
}
.cidocline.classline.Appellations .cidoclineCode {
    background-color: var(--Appellations)
}
.cidocline.classline.Places .cidoclineCode {
    background-color: var(--Places)
}
.cidocline.classline.Types .cidoclineCode {
    background-color: var(--Types)
}
.cidocline.classline.Observables .cidoclineCode {
    background-color: var(--Observables)
}
.cidocline.classline.none .cidoclineCode {
    background-color: var(--None)
}

.cidocline.classline.TemporalEntity {
    border: 1px solid var(--TemporalEntity)
}
.cidocline.classline.Actors {
    border: 1px solid var(--Actors)
}
.cidocline.classline.ConceptualObjects {
    border: 1px solid var(--ConceptualObjects)
}
.cidocline.classline.PhysicalThings {
    border: 1px solid var(--PhysicalThings)
}
.cidocline.classline.Appellations {
    border: 1px solid var(--Appellations)
}
.cidocline.classline.Places {
    border: 1px solid var(--Places)
}
.cidocline.classline.Types {
    border: 1px solid var(--Types)
}
.cidocline.classline.Observables {
    border: 1px solid var(--Observables)
}
.cidocline.classline.none {
    border: 1px solid var(--None)
}











.cidoccell.none {
    background-color: rgb(216, 216, 216);
    color: rgb(27, 27, 27);
}




/* PROPERTIES AND REFERENCES */

/* TABS */

.nav-link {
    color: rgb(95, 95, 95);
}

tbody {
    padding-top: 10px;
}

.nav-link:hover {
    color: black;
    border-bottom: none;
    background-color:rgb(247, 247, 247);
}

.nav-link.active {
    color: black !important;
}

.nav-tabs {
    border-bottom: none;
}

.classPropertiesTable, .classReferencesTable {
    width: 100%;
}

.classReferencesTable tbody, .classPropertiesTable tbody {
    display: block;
    width: 100%;
    overflow: auto;
    height: 250px;
}

.classReferenceRow {
    width: 100% !important;
}

.classReferenceRow > td , .classPropertyRow > td {
    font-size: 9pt;
}

.inheritedReferenceSpan, .inheritedPropertySpan {
    font-weight: 300;
}

.directReferenceSpan, .directPropertySpan {
    font-weight: 800;
}

.inheritedPropertySpan,.inheritedReferenceSpan,.directPropertySpan,.directReferenceSpan {
    cursor: pointer;
}

.inheritedPropertySpan:hover,.inheritedReferenceSpan:hover,.directPropertySpan:hover,.directReferenceSpan:hover {
    background-color: rgb(238, 238, 238);
    font-weight: bold;
}

/* .tdProperty {
    width: 40%;
} 
.tdDomain {
    width: 10%;
}
.tdRange {
    width: 50%;
} */

#descDomain .cidoccell, #descRange .cidoccell {
    opacity: 1 !important;
}








/*
D3.js
 */


.node circle {
    fill: #fff;
    stroke: rgba(19, 19, 19, 0.58);
    stroke-width: 1px;
}

#deschierarchy {
    width: 90%;
    background: white;
}

#deschierarchy .node text {
    font: 12px sans-serif;
}

.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px;
}

#d3container {
    border: 1px solid white;
    overflow: auto;
}

#addtoclipboard {
    position: absolute !important;
    right: 20px;
    top: 5px;
    cursor:pointer;
}

#showHierarchyTree {
    position: absolute !important;
    right: 60px;
    top: 5px;
    cursor:pointer;
}

#hierarchyModal .modal-dialog {
    max-width: 90% !Important;
    margin-left: 5%; 
    margin-right: 5%; 
}

.modal-content {
    border-radius: 0;
    border: 1px solid black;
}

#clipboardInput {
    display: none;
}

#clipboardMessage {
    position: fixed;
    bottom: 100px;
    left:50%;
    transform: translate(-50%);
    padding: 50px;
    background-color: black;
    color: white;
    display: none;
}

#treelist {
    overflow: auto;
}

#treelist .node text {
    cursor: pointer;
    font-size: 10pt;
}

.selected {
    fill: #131313;
    font-weight: bold;
}


#footer {
    border-top: 1px solid black;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    margin:0;
    padding-left: 30px;
}

#toggleInverseBtn {
    margin: 20px;
    float: right;
    font-family: "Sorts Mill Goudy";
    cursor: pointer;
    user-select: none;
    padding: 5px;
}

#toggleInverseBtn.activatedInversion {
    background-color: black !important;
    color: white !important;
}


/* SEARCH ANIMATION */

#searchcontainer {
    margin: 20px;
    float: right;
}

.search {
    display: table;
}

.search input {
    background: none;
    border: none;
    outline: none;
    width: 28px;
    min-width: 0;
    padding: 0;
    z-index: 1;
    position: relative;
    line-height: 18px;
    margin: 5px 0;
    font-size: 14px;
    -webkit-appearance: none;
    font-family: 'Mukta Malar';
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
    cursor: pointer;
    color: #000000;
}
.search input + div {
    position: relative;
    height: 28px;
    width: 100%;
    margin: -28px 0 0 0;
}
.search input + div svg {
    display: block;
    position: absolute;
    height: 28px;
    width: 160px;
    right: 0;
    top: 0;
    fill: none;
    stroke: #000000;
    stroke-width: 1.5px;
    stroke-dashoffset: 271.908;
    stroke-dasharray: 59 212.908;
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
}
.search input:not(:placeholder-shown), .search input:focus {
    width: 160px;
    padding: 0 4px;
    cursor: text;
}
.search input:not(:placeholder-shown) + div svg, .search input:focus + div svg {
    stroke-dasharray: 150 212.908;
    stroke-dashoffset: 300;
}

::-moz-selection {
    background: rgba(255, 255, 255, 0.5);
}

::selection {
    background: rgba(255, 255, 255, 0.5);
}

::-moz-selection {
    background: rgba(255, 255, 255, 0.5);
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
}
*:before, *:after {
    box-sizing: inherit;
}

.classcell.cidoccell:hover {
    opacity: 1 !important;
}

.classcell.experimental:hover {
    opacity: 0.5 !important;
}

.propertycell.experimental:hover {
    opacity: 0.5 !important;
}

.classcell.experimental > .classtitle {
    font-size: 10pt;
    line-height: 10pt;
    margin-top: -20px;
}

.classcell.experimental > .classcodes {
    margin-top: 25px;
    padding-top: 0 !important;
}

.propertycell.experimental > .propertytitle {
    font-size: 10pt;
    line-height: 10pt;
}

.propertycell.experimental > .propertycodes {
    font-size: 20pt;
    margin-top: 16px;
}

#experiment_code {
    font-family: 'Source Code Pro', monospace;
    border: 1px dashed rgb(136, 136, 136);
    margin-top: 20px;
    padding: 10px;
}

#experiment_code_container {
    padding: 10px;
    background: rgb(231, 230, 230);
}

.inverseProperty.experimental {
    display:inherit !important;
}

#addtoclipboard_code, #code_title {
    display: inline-block;
}

#addtoclipboard_code {
    float: right;
    cursor: pointer;
}

.cidocline.classline {
    color: black;
    font-size: 8pt;
}

.cidoclineCode {
    font-weight: 800;
}

.cidoclineLabel {
    padding: 3px;
}

.cidocline.propertyline {
    border: 1px solid rgb(200,200,200);
    text-align: left;
    font-size: 8pt;
}

.cidoclineDomain {
    left: 0;
}

.cidoclineRange {
    right: 0;
}

.cidoclineName {
    display: inline-block;
}

.cidocline.propertyline {
    display: block;
    position: relative;
}

.cidoclineDomain,.cidoclineRange {
    width: 20px;
    position: absolute;
    height: 100%;
    top: 0;
}



#classesbtn:hover, #propertiesbtn:hover, #toggleInverseBtn:hover, #experimentbtn:hover, #inspectbtn:hover {
    background-color: black;
    color: white;
}

#experiment_domain, #experiment_property, #experiment_range {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='grey' stroke-width='5' stroke-dasharray='6%2c 14' stroke-dashoffset='43' stroke-linecap='square'/%3e%3c/svg%3e");
}

.propertycell:not(.experimental){
    width: 170px;
    height:65px;
}

#experiment_domain, #experiment_range, .classcell.experimental {
    width: 120px;
    height:120px;
}

.experiment_cell {
    position: relative;
}

#experiment_domain > .classcell {
    position: absolute;
    left:0;
}

#experiment_description_row {
    margin-top: 20px;
}

#experiment_description {
    text-align: center;
}

#experiment_property, .propertycell.experimental {
    width:200px;
    height:120px;
}

.experiment_column {
    text-align: center;
}

.experiment_cell {
    margin: auto;
}

.experiment_add {
    cursor: pointer;
}

.experiment_cell:hover {
    background-color: rgb(241, 241, 241);
}

#experiment_row {
    margin-top: 20px;
}

.experiment_add {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
}

.experiment_label {
    font-family: "Sorts Mill Goudy";
    font-size: 10pt;
    font-weight: bolder;
}

.experimentallyHighlighted {
    opacity: 1 !important;
}

.experimentallyNotHighlighted {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
}

#classesContainer > .experimentallyNotHighlighted.cidoccell, #propertiesContainer > .experimentallyNotHighlighted.cidoccell {
    display: none;
}

#experiment_domain_remove, #experiment_property_remove, #experiment_range_remove {
    cursor: pointer;
}

.experiment_remove {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.experiment_remove:hover {
    opacity: 0.5;
    cursor: pointer;
}

#cidocVersionSelectContainer {
    display: inline-block;
    width: 150px !important;
    float: right;
    margin:20px;
    padding:5px;
}

#cidocVersionSelect {
    cursor: pointer;
    font-family: "Sorts Mill Goudy";
}
#mainRow {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 100;
  border-bottom: solid 1px black;
}