/*
Semweb LLC
Fabio Ricci
Copyright 2016 - 2018
All rights reserved
Styles for SVIZ
*/

/* Graphics starting from context /SVIZ/gen/images */

.my-tooltip-styling {
      max-width: 600px;
}

/*XPS + TRILL switch on width=500*/
@media screen and (max-width: 499px) {
  div.xps.mobile {display:block;}
  div.xps.desktop {display:none;}

  div.trill.mobile {display:block;}
  div.trill.desktop {display:none;}
}


@media screen and (min-width: 500px) {
  div.xps.mobile {display:none;}
  div.xps.desktop {display:block;}

  div.trill.mobile {display:none;}
  div.trill.desktop {display:block;}

  div.gviz.mobile {display:none;}
  div.gviz.desktop {display:block;}
}


/*GVIZ switch on width=700*/
@media screen and (max-width: 699px) {
  div.gviz.mobile {display:block;}
  div.gviz.desktop {display:none;}
}

@media screen and (min-width: 700px) {
  div.gviz.mobile {display:none;}
  div.gviz.desktop {display:block;}
}


span.nomob {
	float: right;
	margin-right: 10px;	
}


div.checkmobile {
	width:200px;
	height:200px;
}

@media screen and (min-width: 1601px) {
  div#logodummy {display:none}
}

@media screen and (max-width: 1600px) {
  div#logo0 {display:none;}
  div#logodummy {display:block}
  div#runstats {
    position: relative;
    top: -2px; }
  div#topmiddle {margin-top:3px;}
}

@media screen and (max-width: 1310px) {
  div#betatester {display:none;}
}

@media screen and (max-width: 1260px) {
  div#ontomanadivmenu {display:none;}
}

@media screen and (max-width: 1200px) {
  div#temdivmenu {display:none;}
}

@media screen and (max-width: 1160px) {
  div#tutorial {display:none;}
}

@media screen and (max-width: 1240px) {
  div#happy {display:none;}
}

@media screen and (max-width: 1120px) {
  div#dhome {display:none;}
}

@media screen and (max-width: 1060px) {
  div#runstats {width:0;}
  div#runstats table#execstats {display: none;}
  div#dhome {display:block;}
  div#tutorial {display:block;}
  div#happy {display:block;}
  div#temdivmenu {display:block;}
}

@media screen and (max-width: 1040px) {
  div#dhome {display:none;}
}

@media screen and (max-width: 980px) {
  div#temdivmenu {display:none;}
}

@media screen and (max-width: 930px) {
  div#tutorial {display:none;}
}

@media screen and (max-width: 930px) {
  div#happy {display:none;}
}


@media screen and (max-width: 890px) {
  div#thetopviewmenu {display:none;}
}

@media screen and (max-width: 840px) {
  div#usermanadivmenu {display:none;}
}

@media screen and (max-width: 780px) {
  div#themanadivmenu {display:none;}
}


div.selectinfo {
	float: right;
	font-style: italic;
	font-size: small;
}

div.ui-tooltip.ui-widget {
	font-size: 12px;
}

label.vizparamname {
  font-size: 12px;	
}

.vizparamname {
  white-space: nowrap;
}

.vizparamname.number {
  width: 50px;
  text-align: right;
}

textarea.sparqlq {
  white-space: nowrap;
	font-size: 16px;
	width: 90%;
	position: relative;
	top: -1px;
	height: 100px;
}

.rdfseparamvalue {
  white-space: nowrap;
	font-size: 16px;
	width: 100%;
	position: relative;
	top: -5px;
}

.rdfseparamvalue2 {
  white-space: nowrap;
	font-size: 16px;
	width: 49%;
	position: relative;
	top: -5px;
}


div.rdfsresults {
	width: 96%;
	padding: 20px;
  text-align: center;
  font-weight: bold;
} 

div.green,
table.rdfsresults tr.green td {
	background-color: #afa;
}

table.rdfsresults tr.error td {
	background-color: #faa;
}

table.rdfsresults tr.error td.p {
	background-color: white !important;
}

span.error {
	color: #e76100;
}

button#reloadwithnewsize,
button#fitgraph {
	border-radius: 8px;
	width: 100%;
}

table.rdfsresults {
	
}

h1.validated {
	color: #5a5;
}

div#xmlvalerg {
	
}

textarea.xmltextarea {
height: 150px;
width: 100%;	
}

textarea.xmltextarea.xml {
}

/*RDF addstatement panel*/
input.aci {
	width: 342px;
}
input.aci.object {
  width: 200px;
}
input.aci.complement {
  width: 134px;
}



/*autocomplete*/
ul.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content {
	font-size:12px;
	color: black;
	z-index: 501;
}

button.panel.active {
	background:#e76100;
	color:white;
}

button.panel {
	border-radius: 6px;
	border-width: 1px;
	height: 20px;	
}


div.mi {
	cursor:pointer;
	margin-top: 5px;
  padding: 2px;
  padding-right: 2px;
  padding-left: 2px;
  border-radius: 8px;
	padding-left: 5px;
	padding-right: 5px;
  white-space: nowrap;
}

div.mi:hover {
	background-color: black;
	color:white;
}

table.rdfsresults tr td {

}

select.trillselect {
	font-size: 14px;
} 

div#trillprologgoal.trill {
	margin-top: 15px;
	font-style: italic;
  color:black;
}

select.trillselect option {
	
}

div#hiding {
display:none;
background-color: #333;
position:absolute;
width:120%;
height:120%;
left:0;
bottom:0;
opacity: 0.3;
}


.white {
	color:white;
}

div#trillprologanswer {
	margin-top: 15px;
}

table.trillchoose {
	flex-flow: column;
  display: inline;
  width: 70%;
}

button#fitgraph {
	width: 100%;
	margin-top: 49px;
}

input#spep, input#spepu {
  width: 49% !important;
}

input.readonly, input.noaccess {
	color:red;
}

div.footer {
 margin-top: 40px;
 font-size: 10px;
}


.hidden {
	display: none;
}

body {
  font-family: Arial;
  font-size: 14px;
}

label.gt {
	font-size: 12px;
}

input.gt {
	cursor: pointer;
}

div.sysline {
	color:#e76100;
  font-size: smaller;
  font-style: italic;
  margin-left: 3px;
}

textarea#sparqlquery {
  width: 99%;
  height: 98px;
  border: black inset !important;
  border-width: 1px !important;
  padding: 2px;
  padding-left: 4px;
  font-size: 12px;
}

textarea#prefixes {
  width: 99%;
  height: 98px;
  border: black inset !important;
  border-width: 1px !important;
  background-color: #ddd !important;
  padding: 2px;
  padding-left: 4px;
  font-size: 12px;
}

div#prologerggui {
	font-size: 16px;
}


label.prolog.gui:hover {
	color: black;
}

label.prolog.gui {
	
}


div.question, div.evidence
{
	background-color:#e76100;
	color:white;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	border-radius: 4px;
}


div.question.boolean
{
	
}



img.cntwheel {
width: 20px;
margin-left: 8px;
position: relative;
top: 3px;
}


img.svacwheel1 {
width: 16px;
float: right;
display: none;
}

img.svacwheel1.firefox {
	position: absolute;
	top: 36px;
	right: 14px;
}

img.svacwheel1.chrome {
}

img.svacwheel1.safari {
}

img.svacwheel1.opera {
}





/*The following are ok for safari, chrome and opera: */
img.svacwheel2 {
	width: 16px;
	float: right;
	display: none;
}

.visible {
	display: block !important;
}

img.svacwheel2.firefox {
	position: absolute;
	top: 61px;
	right: 14px;
}
img.svacwheel2.chrome {
}
img.svacwheel2.opera {
}
img.svacwheel2.safari {
}

div.pcont {
	height: 16px;
}


div#loadpercentcontainer {
	border-color:black;
	border-width: 1px;
	border-style: solid;
	float: left;
}

div#currentload {
	background-color:#ddd;
}

div#predlist {
	position: absolute;
	z-index: 300;
	height: 100%;
	overflow-y: auto;
	padding: 1px;
	max-height: 60%;
	overflow-x: hidden;
}

p.gvizerror {
	color:red;
	margin: 0;
}

button#reloadgraph {
	width: 100%;
}

select#triplestorestypes,
select#triplestoresleeps
{
	font-size: 16px;
}

id#limaanfragen {
	
}

div.results {
	max-height: 500px;
  overflow-y: auto;
}

table.gdbres {
width: 100%;
margin: 0 auto;
clear: both;
border-collapse: collapse;
border-spacing: 0;	
}

table.gdbres td {
	padding: 4px 6px;	
	box-sizing: content-box;
	max-width: 50vw;
	vertical-align: top;
}

table.gdbres td.th {
	font-weight: bold;
}

table.gdbres td.v {
	color: #aaa;
	font-size: 13px;
}

p.instructions {
	font-size:13px;	
}

table.gdbres td.n {
	color:#aaa;
	font-size: 13px;
  font-style: italic;
  text-align: right;
}

a.orange {
	color: #e76100 !important;
}

a.link2workbench {
	color: #e76100 !important;
	font-weight: normal;
	font-style: italic;
}

button#revalidaterdfs {
	width: 100%;
	font-size: 16px; 
	padding: 10px;
}

button.execsparql {
	width: 33%;
	font-size: 16px; 
	padding: 10px;
}

a.userinteract {
	cursor:pointer;	
}

sep {
	font-weight: normal;
	color: #aaa;
}

token {
	font-weight: bold;
	color: black
}

span.t {
	color:red;
}

lit {
	font-weight: bold;
	color: #e76100;
}

p.err {
	color:red;
}

button.xmlvalidieren {
font-size: 16px;
padding: 10px;
height: 90px;
position: relative;
top: -8px;
margin-left: 8px;
}

button.showgraph {
font-size: 16px;
padding: 10px;
height: 90px;
position: relative;
top: -7px;
margin-left: 8px;
}


button.savesparql {
	width: 9%;
	font-size: 16px; 
	padding: 10px;
	height: 100px;
	float: right;
}


a.linkorange {
	color: #e76100;
}

td.popupcloser.popup {
	 padding-left: 30px;
}

label.label {
	white-space:nowrap;
  font-style: italic;
  font-weight: bold;
  margin-right: 5px;
}
.popup {
	cursor: pointer;
}
 
a.popup {
		
}


div.idrop { 
	    background-color: #aaa;
}

div.idrop.checked { 
	    background-color: red !important;
}

h3#statementsdisplay.inconsistentdata {
	color: red;
}

div.idrop.firefox {
  border-radius: 2px;
  float: left;
  padding-right: 1px;
}

div.idrop.chrome {
    border-radius: 2px;
    float: left;
    padding-left: 1.5px;
    position: relative;
    left: -1.5px;
    top: 1px;
}

div.idrop.opera {
    border-radius: 2px;
    float: left;
    padding-left: 1.5px;
    position: relative;
    left: -1.5px;
    top: 1px;
}


input.seltext {
  width: 92px;
  padding-left: 5px;
}

select.selnavimode {
  width:92%;	
}	

select.langsel {
	width:92%;
}

.popup:hover {
	color: #e76000;
}

div.popupMenu {
      position:absolute;
      top:0px;
      left:0px;
      width: 120px;
	    background-color: white;
	    border-color: #e76000;
	    border-width: 2px;
	    border-style: outset;
	    border-radius: 8px;
	    padding: 5px;
      display: inline-table;
      font-size: 12px;
      font-family: arial;
      z-index: 500;
}

.orange {
	color:#e76000;
}
.bgorange {
	background-color: #e76000;
	color:white;
}

div#ghelp {
	float: right;
	font-style: italic;
}

span.vizgsemweb,
span.clickme {
	color: #aaa;
	cursor: pointer;
}

label.vizgexpl {
	font-size: 12px;
	line-height: 16px;
  white-space: nowrap;
}

label.gvizp {
	white-space: nowrap;
	font-size: 12px;
}

label.gvizp.inconsistent {
	color:red !important;
}

label.gvizp.prop {
	color:#FA7;
}

label.gvizp.lit {
	color:#FA7;
}


label.gvizp.pred {
	color:#d76100;
}

label.gvizp.axioms {
	color:#77f;
}


ul.gvizpreds {
	list-style-type: none;
  padding: 0;
  margin: 0;
}

li.gvizpreds {
	
}

textarea#sparqlquery {
	background-color: #e76000;
	color:white;
}

table.viz2 {
}

div#consultant {
display:none;
position: absolute;
right: 13px;
margin-top: 4px;
}


/* PROLOG */

textarea#pai {
	width: 500px;
	height: 50px;
}

span.uploadkb {
padding: 5px;
padding-bottom: 8px;
display: table-cell;
}


img.xps {
	width: 250px;
}

div.prosa:hover {
	height: auto;
}

div.prosa {
font-size: 10px;
font-style: italic;
height: 141px;
overflow-y: hidden;
margin-left: 8px;
margin-right: 5px;
}


span.uploadkb {
padding: 5px;
padding-bottom: 8px;
display: table-cell;
border-radius: 4px;
height: 16px;
cursor: pointer;
}


span.uploadkb:hover {
background-color: #e76100;
color: white;
cursor: pointer;
}


.prologbutton:hover {
	background-color: #e76100;
	color: white !important;
	cursor: pointer;
}

span.uploadkb input {
	cursor: pointer;
	font-size: 14px;
}

a.prologkb {
	font-size: 14px;
	font-style: italic;
}

a.trillkb {
	font-size: 12px;
	font-style: italic;
}



a.orange.prologkb:hover {
	background-color: #e76100;
	color: white !important;
}

a.orange.prologkb {
	margin-left: 3px;
	cursor: url(/SVIZ/gen/images/lupe-smallr.png), auto;
}

div#prologerg {
	max-height: 1000px;
  overflow-y: scroll;
}

iframe#kbuploadresponce {
	display:none;
}

input.prologdisabledbutton {
	color: #aaa;
	height: 30px;
	border-radius: 6px;	
	font-size: 14px;
}
button.prologdisabledbutton {
	color: #aaa;
	height: 30px;
	border-radius: 6px;
	font-size: 14px;
}

input.prologbutton {
	background-color: #e76100;
	color: white;
	height: 30px;
	border-radius: 6px;	
}
button.prologbutton {
	color: #e76100;
	height: 30px;
	border-radius: 6px;
	font-size: 14px;
}

.ui-tooltip {
	z-index: 10000;
}

.ui-tooltip label {
	font-size:13px;
}
.ui-tooltip {
    white-space: pre-line;
}


.nowrap {
	white-space: nowrap;
}




.rotate-fast {
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}


.rotate-fast {
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}

.rotate-fast-inverse {
    -webkit-animation:spin-inverse 2s linear infinite;
    -moz-animation:spin-inverse 2s linear infinite;
    animation:spin 2s-inverse linear infinite;
}

.rotate-slow {
    -webkit-animation:spin 20s linear infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite;
}

.rotate-90 {
    -webkit-animation:spin90 0.5s linear ;
    -moz-animation:spin90 0.5s linear ;
    animation:spin90 0.5s linear ;
}


.black-triangle-topright {
  width: 0;
  height: 0;
  border-top: 15px solid black;
  border-left: 15px solid transparent;
}

.ear {
	background-image: url("/CTX/gen/images/ear.png");
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	opacity: 0.7;
	filter: alpha(opacity=70);
	cursor:pointer; 
}


.grow { transition: all .2s ease-in-out; }
.grow:hover {
	transform: scale(1.1); 
}

.grow13:hover {
	transform: scale(1.3); 
}
.grow15:hover {
	transform: scale(1.5); 
}


.rotating {
    margin:-5px 0 0 -5px;
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes spin90 { 100% { -moz-transform: rotate(91deg); } }
@-webkit-keyframes spin90 { 100% { -webkit-transform: rotate(91deg); } }
@keyframes spin90 { 100% { -webkit-transform: rotate(91deg); transform:rotate(91deg); } }

@-moz-keyframes spin-inverse { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin-inverse { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin-inverse { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }




.rotate, .r{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}


.rotate90clockwise:hover
{
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
}


.rotate20clockwise:hover
{
    -webkit-transform:rotate(20deg);
    -moz-transform:rotate(20deg);
    -o-transform:rotate(20deg);
}

.rotate130:hover
{
    -webkit-transform:rotate(130deg);
    -moz-transform:rotate(130deg);
    -o-transform:rotate(130deg);
}

.rotatefasthover,
.rotatefast:hover {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.rotatenowfastinverse,  
.rotatefastinverse:hover {
    -webkit-animation: spin-inverse 2s linear infinite;
    -moz-animation: spin-inverse 2s linear infinite;
    animation: spin-inverse 2s linear infinite;
}

.animplusxxx:hover {
	 -webkit-transform: rotate(90deg) scale(1.5); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: rotate(90deg) scale(1.5); /* Fx 3.5-15 */
          -o-transform: rotate(90deg) scale(1.5); /* Op 10.5-12 */
             transform: rotate(90deg) scale(1.5); /* Fx 16+, IE 10+ */
}

.binanimate:hover,
.ba:hover {
	 -webkit-transform: rotate(130deg) scale(1); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: rotate(130deg) scale(1); /* Fx 3.5-15 */
          -o-transform: rotate(130deg) scale(1); /* Op 10.5-12 */
             transform: rotate(130deg) scale(1); /* Fx 16+, IE 10+ */
}


.animplus:hover {
	 -webkit-transform: scale(1.5); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: scale(1.5); /* Fx 3.5-15 */
          -o-transform: scale(1.5); /* Op 10.5-12 */
             transform: scale(1.5); /* Fx 16+, IE 10+ */
}

.growinclinelefthover,
.growinclineleft:hover {
	 -webkit-transform: rotate(-30deg) scale(1.5); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: rotate(-30deg) scale(1.5); /* Fx 3.5-15 */
          -o-transform: rotate(-30deg) scale(1.5); /* Op 10.5-12 */
             transform: rotate(-30deg) scale(1.5); /* Fx 16+, IE 10+ */
}

.growinclinerighthover,
.growinclineright:hover {
	 -webkit-transform: rotate(30deg) scale(1.5); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: rotate(30deg) scale(1.5); /* Fx 3.5-15 */
          -o-transform: rotate(30deg) scale(1.5); /* Op 10.5-12 */
             transform: rotate(30deg) scale(1.5); /* Fx 16+, IE 10+ */
}

.growincline90righthover,
.growincline90right:hover {
   -webkit-transform: rotate(90deg) scale(1); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: rotate(90deg) scale(1); /* Fx 3.5-15 */
          -o-transform: rotate(90deg) scale(1); /* Op 10.5-12 */
             transform: rotate(90deg) scale(1); /* Fx 16+, IE 10+ */
}

.growincline90lefthover,
.growincline90left:hover {
   -webkit-transform: rotate(270deg) scale(1); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
      -moz-transform: rotate(270deg) scale(1); /* Fx 3.5-15 */
        -o-transform: rotate(270deg) scale(1); /* Op 10.5-12 */
           transform: rotate(270deg) scale(1); /* Fx 16+, IE 10+ */
}


.grow2:hover {
	 -webkit-transform: scale(1.5); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: scale(1.5); /* Fx 3.5-15 */
          -o-transform: scale(1.5); /* Op 10.5-12 */
             transform: scale(1.5); /* Fx 16+, IE 10+ */
}

.grow2x:hover {
	 -webkit-transform: translateX(33px) scale(2); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: translateX(33px) scale(2); /* Fx 3.5-15 */
          -o-transform: translateX(33px) scale(2); /* Op 10.5-12 */
             transform: translateX(33px) scale(2); /* Fx 16+, IE 10+ */
}

.grow17x:hover {
	 -webkit-transform: translateX(33px) scale(1.7); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: translateX(33px) scale(1.7); /* Fx 3.5-15 */
          -o-transform: translateX(33px) scale(1.7); /* Op 10.5-12 */
             transform: translateX(33px) scale(1.7); /* Fx 16+, IE 10+ */
}

.grow12x:hover {
   -webkit-transform:   scale(1.2); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: scale(1.2); /* Fx 3.5-15 */
          -o-transform: scale(1.2); /* Op 10.5-12 */
             transform: scale(1.2); /* Fx 16+, IE 10+ */
}

.grow18x:hover {
	 -webkit-transform: translateX(33px) scale(1.8); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
        -moz-transform: translateX(33px) scale(1.8); /* Fx 3.5-15 */
          -o-transform: translateX(33px) scale(1.8); /* Op 10.5-12 */
             transform: translateX(33px) scale(1.8); /* Fx 16+, IE 10+ */
}

.rotate180:hover
{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}


.rotate140inverse:hover {
    -webkit-transform:rotate(-140deg);
    -moz-transform:rotate(-140deg);
    -o-transform:rotate(-140deg);
}

.rotate180inverse:hover
{
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
}


.rotate90anti:hover
{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
}


.normal {
    -webkit-transform:rotate(0deg)!important;
    -moz-transform:rotate(0deg)!important;
    -o-transform:rotate(0deg)!important;
}