/*
3DHOP - 3D Heritage Online Presenter
Copyright (c) 2014-2020, Visual Computing Lab, ISTI - CNR
All rights reserved.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

body { width:100%; height:100%; margin:0px; }

.tdhop { position:relative; width:100%; height:100%; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }

#tdhlg { position:absolute; width:105px; height:13px; overflow:hidden; cursor:pointer; color:#909090; text-align:center; text-decoration:none; font-family:verdana; font-style:italic; font-size:10px; line-height:13px; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }

#toolbar { position:absolute; left:10px; top:10px; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }

#toolbar img { margin-bottom:8px; width:50px; height:50px; opacity:0.5; cursor:pointer; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }

.output-box { position:absolute; display:none; border-radius:5px; margin:0; height:48px; padding:0px 5px 2px 5px; cursor:default; background-color:rgba(125,125,125,0.5); color:#f8f8f8; text-decoration:none; text-align:center; font-family:verdana; font-style:italic; font-size:12px; line-height:20px; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }

.output-text { padding:0px 5px 0px 5px; cursor:text; -webkit-user-select:text; -webkit-touch-callout:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; }

.output-input { vertical-align:middle; cursor:pointer; height:15px; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }

.output-table { margin:0; width:100%; color:#f8f8f8; text-align:center; font-style:italic; font-size:12px; line-height:15px; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }

.output-table img { height:25px; cursor:pointer; background-color:rgba(125,125,125,0.25); border:1px outset; border-radius:5px; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; user-drag: none; -webkit-user-drag: none; }

.output-table img:hover { background-color:rgba(125,125,125,0.8); }

.output-box hr {  margin:0 0 3px 0; border:0; height:1px; background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(225, 225, 225, 0.75), rgba(0, 0, 0, 0)); }

#draw-canvas { width:100%; height:100%; background-repeat:no-repeat; background-position:center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; outline:none; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }

/*IE*/
input[type=range].output-input { padding: 0; width: 125px; } .output-input::-ms-tooltip { display: none; }

/*DEPRECATED*/
#measurebox { position:absolute; visibility:hidden; overflow:hidden; border-radius:5px; right:10; top:10; margin:0; width:105px; height:26px; cursor:default; color:#909090; text-decoration:none; text-align:center; font-family:verdana; font-style:italic; font-size:10px; line-height:13px;  -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }
#measure-output { cursor:text; -webkit-user-select:text; -webkit-touch-callout:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; }

#logo {
	z-index: 1;
	text-align:center;
	width: 100%;
}

.dg .cr.function,.dg .cr.boolean, .dg .cr.color {
	border-left: 3px solid #56d0dc !important;
}

#titlebox {
	z-index: 10;
	width: 90px;
	padding: 0;
	margin-left: -45px;
	position: absolute;
	left: 50%;
	top: 0;
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	cursor: pointer;
	text-align: center;
}

#info {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 245px;
	margin-left: 15px;
	background-color: rgb(0, 0, 0);
	color: rgb(238, 238, 238);
	font: 9pt "Lucida Grande", sans-serif;
	text-shadow: rgb(17, 17, 17) 0px -1px 0px;
	border-bottom: 1px solid rgb(44, 44, 44);
	z-index: 3;
}

.hidden {
	display: none;
}

#bottomNavigation {
	position: fixed;
	bottom:0;
	overflow:hidden;
	width: 100%;
	background: #fff;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	text-align: center;
  padding: 7px 7px;
	transition: 10s;
	opacity: 0.7;
}


#bottomNavigation.active {
	height: auto;
}

#bottomNavigation span {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
	text-decoration: none;
	font-size: 9pt;
	display:block;
}

#models p.active {
	color: #56d0dc;
}

.label {
	padding: 4px;
	border: 1px solid #56d0dc;
}

.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.lds-ellipsis div {
	position: absolute;
	top: 33px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #fff;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes lds-ellipsis3 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}
@keyframes lds-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(24px, 0);
	}
}
