/* This file also serves as the documentation of the css classes generated by MMT.
Therefore, it intentionally contains empty rules for some classes. */ 

/* main layout */

body {
  min-width:640px;
  min-height:300px;
  background: white;
}

/* general purpose rules */

.centered {
    text-align: center;
}

table {
    border-collapse: collapse;   
}

[data-mmt-toggle] {
   cursor: pointer;
}

[data-mmt-load] {
   cursor: pointer;
}

/* header */

#header {
   font-weight: bold;
   font-size: large;
   border: black 1px solid;
   border-radius: 5px;
   text-align: center;
   background-color: lightyellow;
}

/* middle area (containing #sidebar and #breadcrumbs+#main) */

#middle {
}

#layouttable {
}

.layouttablecell {
   horizontal-align:left;
   vertical-align:top;
   padding: 3px;
   border-style: solid;
   border-width: 1px;
   border-color: lightgray;
}

/* fully use horizontal space */
td.layouttablecell:last-child {
  width:100%;
}

.layouttablecell .celltitle {
   background-color: lightblue;
   border-radius: 5px;
   font-weight: bold;
}

.layouttablecell .cellcontent {
   height: 90vh;
   overflow: auto;
   resize: horizontal;
}


/* sidebar */

#sidebar {
   /*overflow: scroll;*/  
}

#pathtree {
  
}

a.treerelation {
  background: lightblue;
}

.crossrefs {
   background: lightgray;
}


/* breadcrumbs */

#breadcrumbs {
   height: 30px;
   font-size:20px;
   margin-top: 3%;
   margin-left: 10px;
   margin-right: 10px;
   color: blue;
   white-space: nowrap;
   border: 1px solid black;
}

/* content area */

#main {
   padding-top: 3%;
   padding-left: 10px;
   overflow: visible;
   width:100%;
}

/* URIs and names */

.mmturi {
    color: blue;
}
.mmturi:hover{
	border-radius: 50px;
	background: rgba(134,221,227,0.4);
   box-shadow: #B3B3B3 24px 24px 24px inset;
}

span.name {
	color: blue;
}

/* narrative structure */

.document {
    border-left-style: solid;
    border-left-width: 4px;
    border-left-color: black;
    padding: 5px;
    margin: 5px;
}

.document-header {
   padding: 3px;
   margin-bottom: 5px;
   margin-top: 5px;
   font-weight: bold;
   background-color: lightgray;
   border-radius: 5px;
   border: solid 1px black;
}

.document-body {
}

.document-dref > span.name, .document-mref > span.name, .document-sref > span.name {
   border-radius: 5px;
   border: solid 1px black;
   margin-top: 3px;
   margin-bottom: 3px;
}

.document-dref, .document-mref, .document-sref {
   margin-top: 3px;
   margin-bottom: 3px;
}

/* foreign formats */

.opaque-html {
   margin-top: 3px;
   margin-bottom: 3px;
}

.opaque-text {
   margin-top: 3px;
   margin-bottom: 3px;
}

/* content structure */

.theory {
}

.constant {
   border: solid 1px black;
   border-radius: 5px;
   margin-top: 3px;
   margin-bottom: 3px;
   background-color: whitesmoke;
   padding: 5px;
}

.constant-header {
}

table.constant-body {
}

/* one toggle button and one row for each component
   the button toggles the corresponding row */
button.component-toggle, button.generated-toggle {
   font-size: small;
   color: white;
   border-radius: 10px;
   border: solid 1px black;
   margin-left: 2px;
   float: right;
   pointer-events: all;
}

button.component-toggle {
   background-color: blue;
   pointer-events: all;
}

button.generated-toggle, div.constant.generated {
   background-color: beige;
   color: black;
}

div.constant.generated {
  display: none;
}

button.component-toggle:hover, , button.generated-toggle:hover {
   background-color: darkblue;
}

tr.component-type {
}

tr.component-definition, tr.component-domain, tr.component-codomain,
tr.component-parsing-notation, tr.component-presentation-notation {
  display: none;
}

tr.tags, tr.metadata, tr.used-by, tr.aliases {
  display: none;
}

.constant-component-label {
   font-size: small;
   color: gray;
   background-color: lightblue;
   border-radius: 3px;
   margin-right: 5px;
}

.used-by .mmturi {
    margin-right: 5px;
}

div.inner-body {
  border-left-style: solid;
  border-width: 3px;
  margin-left: 10px;
  padding-left: 5px;
}


/* interpreter widget */

#parse  {
   border: solid 1px;
   padding: 5px;
   margin: 10px;
   display:none;
}

#inputbox {
   border: solid;
   border-width: 1px;
   min-height:50px;
   min-width:300px;
   overflow: scroll;
   resizable: both;
}

#inputviewterm, #inputviewtype {
   min-height:30px;
   min-width:300px;
}

/* search widget */

#search {
   border: solid 1px;
   padding: 5px;
   margin: 10px;
   display:none;
}

div.searchgroup {
   border: solid 1px;
   border-radius: 5px;
   margin-bottom: 10px;
}

input {
   resize: horizontal; 
}

td.uriregexp {
}

div.results {
}

div.result {
   margin-top: 5px;
}

.resultmatch {
   background-color: lightblue;
}

/* math */

.math.math-selected {
	font-size: large;
}

/* rules for inline boxes */

.inlinebox {
   background-color: white;
	margin-top: 5px;
	margin-bottom: 5px;
   border: 3px solid blue;
   border-radius: 5px;	
}

.inlinebox-title {
   background-color:lightgray;
   padding: 2px;
}

.inlinebox-buttons {
   float: right;
}

.inlinebox-buttons span {
   font-size: small;
   color: white;
   background-color: blue;
   border-radius: 10px;
   border: solid 1px black;
   margin-left: 2px;
   padding: 2px;
}
.inlinebox-buttons span:hover {
   background-color: darkblue;
}

.inlinebox-button-drag::before {
   content: "drag";
   cursor: move;
}
.inlinebox-button-close::before {
   content: "close";
   cursor: pointer;
}

.inlinebox-content {
   resize: vertical;
   overflow: auto;
	margin: 5px;
}

div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}

/* svg graphs */

div.graph {
    border: 1px solid black;
}

.graph-header {
   padding: 3px;
   background-color: lightgray;
}

.graph-body {
    width: 60vw; /* this is awkward, but necessary to avoid zooming to increase the div.graph */
    height: 50vh;
    resize: both;
    overflow: auto;
}

/* graphviz draws a <polygon> around clusters */
.cluster polygon {
   /* stroke: black; */
}

/* graphviz produces nodes as <ellipse> elements containing a <text> element */
.graphtheory ellipse {
   stroke: black;
}
.graphtheory text {
}

.graphexttheory ellipse {
   stroke: black;
   fill: gray;
}
.graphexttheory text {
}

/* graphviz produces arrows as <path> and arrow tips as <polygon> elements */

.graphmeta path {
   stroke: black;
   stroke-dasharray: 1,1;
}
.graphmeta polygon {
   fill: black;
   stroke: black;
}

.graphinclude path {
   stroke: black;
}
.graphinclude polygon {
   fill: black;
   stroke: black;
}

.graphstructure path {
   stroke: red;
}
.graphstructure polygon {
   fill: red;
   stroke: red;
}

.graphview path {
   stroke: blue;
}
.graphview polygon {
   fill: blue;
   stroke: blue;
}

/* unknown rules, delete? */

.mybox {
	height: 30px;
	width: 80%;
}
.comm {
	margin-top:3%;
	margin-bottom: 2%
}

#mainBubble {
     background: #fff;
     /*border: solid 1px #ddd;*/
     box-shadow: 0 0 4px rgba(0,0,0,0);
     font: 10px sans-serif;
     height: 400px;
     position: relative;
     width: 80%;
   }
            
#mainBubble svg {
  left: 0;
  position: absolute;
  top: 0;
}
                     
#mainBubble circle.topBubble {
  fill: #aaa;
  stroke: #666;
  stroke-width: 1.5px;
 }
}
/* .panelVerticalScroll {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 400px;
    background-color: red;
} */

.panelHorizontalScroll {
    overflow:scroll;
    /*overflow-x: scroll;
    clear: both;
    overflow-y: hidden;
    max-width: 80px; 
    width: 100px;*/
}