@import 'carousel.css';
@import 'texturemenu.css';
@import 'slider.css';

/*@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');*/
@import url('https://fonts.googleapis.com/css2?family=Raleway');

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
}

* {
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
	font-size: 18px;
}

.panel {
    background: white;
    min-width: 15em;
    /* padding: 1em; */
    /* padding-top: 2em;
    padding-bottom: 2em; */
}

.circle {
    border-radius: 100%;
}

.clickable { cursor: pointer; }

button {
    border-radius: 4px;
    border: 0;
    padding: 0.5em 1em;
    font-weight: bold;
    cursor: pointer;
}

.grad-lt {
    background: linear-gradient(hsl(46, 66%, 25%), hsl(46, 66%, 50%))
}

.grad-dk {
    background: linear-gradient(hsl(169, 100%, 9%), hsl(169, 100%, 27%))
}

.text-lt {
    color: white;
}

/* hide jquery mobile garbage */
.ui-loader { display: none }
/* -------------------------- */

#file-input { display: none }

#infoblanket {
    display: flex;
    justify-content: center;
    align-items: center;
}

#info {
    height: 30em;
    width: 20em;
    border-radius: 4px;
}

#info header {
    display: flex;
    background-color: #444;
    color: white;
}

#info header > * {
    flex: 1;
}

#info h1 {
    text-align: center;
}

#info header > :nth-child(2) {
    text-align: right;
    font-size: 70%;
}

/*
#info-open {
    background: rgba(255, 255, 255, 0.89);
    box-shadow: 0 0 4px 8px rgba(0, 0, 0, 0.2);
    height: 1.1em;
    width: 1.1em;
    text-align: center;
    line-height: 100%;
    color: hsl(197, 100%, 50%);
    font-size: 200%;
}
*/
#info-close {
    width: 100%;
}

#main-container {
    position: relative; 
    height: 100%;

    /* background-image: url('../img/house.jpg'); !* STUB *! 
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px 8px rgba(0, 0, 0, 0.2);*/
}

#top-bar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 4em;

    padding-left: 1em;
    padding-right: 1em;

    display: flex;
}

#top-bar > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#top-bar-left {
    align-items: flex-start;
}

#top-input {
    position: absolute;
    top: 4em;
    width: 100%;
    height: 4em;

    display: flex;
    justify-content: center;
}

#bottom-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 8em;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;

    display: flex;
    justify-content: center;
}

#bottom-bar > * {
    flex: 1;
}

#bottom-bar > :nth-child(2) {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: flex-end;
}

#bottom-bar-left {
    position: relative;
}

#bottom-bar-left > * {
    position: absolute;
    bottom: 0;
    left: 0;
}

.mode-btn {
    width: 10em;
}

#logo {
    height: 2em;
}

#menubt {
    padding: 0.6em !important;
}

#menubt > img {
    width: 1.5em;
    height: 1.5em;
}

#logoContainer {
    background: white;
    position: absolute;
    padding: 1em;
    bottom:0;
    right:0;
    min-width: 14em;
    max-width: 25%;
}

#sharebt {
    position: absolute;
    top: 1em;
    right: 1em;
    height: 1em;
    cursor: pointer;
}

#pavementDesc {
    margin-top: 1em;
    font-weight: bold;
    text-transform: uppercase;
}

#pavementMoar {
    font-size: 80%;
}

#side-input {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    padding-right: 0.5em;
}

#side-input > input[type=range] {
    height: 10em;
    width: 10px;
    -webkit-appearance: slider-vertical;
    writing-mode: bt-lr;
}

/* #konva-container {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

canvas {
    width: 100%;
    height: 100%;
} */


#camerabt
{
    position: absolute;
    top:25px;
    width:150px;
    /*margin-left:-300px;*/
    left:35%;
	cursor: pointer;
	display: none;
}

#ricomincia_salva
{
    position: absolute;
    top:25px;
    /*margin-left:165px;*/
    left:35%;
	cursor: pointer;
}

#ricominciabt
{
    height:40px;
    /*margin-left:165px;*/
	cursor: pointer;
	display: none;
	float: left;
}

#salvabt
{
    height:40px;
    margin-left:10px;
	cursor: pointer;
	display: none;
	float: left;
}

#pavimentabt
{
    position: absolute;
    top:25px;
    width:150px;
    margin-left:322px;
    left:35%;
	cursor: pointer;
	display: none;
}

#contattacibt
{
    position: absolute;
    top:25px;
    height:40px;
    right:10%;
	cursor: pointer;
}



#itabt
{
    position: absolute;
    top:30px;
    width:33px;
    right:10%;
    margin-top:5px;
    margin-right:350px;
	cursor: pointer;
}

#engbt
{
    position: absolute;
    top:30px;
    width:33px;
    right:10%;
    margin-top:5px;
    margin-right:310px;
	cursor: pointer;
}

#debt
{
    position: absolute;
    top:30px;
    width:33px;
    right:10%;
    margin-top:5px;
    margin-right:270px;
	cursor: pointer;
}

#frbt
{
    position: absolute;
    top:30px;
    width:33px;
    right:10%;
    margin-top:5px;
    margin-right:230px;
	cursor: pointer;
}
#photomode
{
    position: absolute;
    top:10px;
    width:150px;
    margin-left:-150px;
    left:65%;
}

#pavementmode
{
    position: absolute;
    top:10px;
    width:150px;
    margin-left:0px;
    left:65%;
}

#containerUser {
    position: fixed;
    top: 0%;
    left: 0%;
    right: 0;
    bottom: 0;
	width: 30%;
	border-right: solid 5px #000000;
}

#info-open
{
    position: absolute;
    top:10px;
    left:10%;
}

#filtro
{
    position: absolute;
    top:240px;
    left:50px;
	width:26%;
	height:50px;
}


#info-prodotti
{
    position: absolute;
    top:300px;
    left:50px;
	width:26%;
	height:70%;
	overflow-x: hidden; /* Hide horizontal scrollbar */
	overflow-y: scroll; /* Add vertical scrollbar */
}

.box-prodotto
{
  border-radius: 15px;
  border: 2px solid #000000;
  padding: 10px;
  width: 97%;
  height: 170px;
  margin-bottom:30px;
  cursor:pointer;
}


.box-prodotto-foto
{
  width: 49%;
  height: 145px;
  float:left;
}

.box-prodotto-testo
{
  width: 47%;
  height: 145px;
  float:left;
  margin-left: 10px;
  /*background-color: red;*/
}

.box-prodotto-nome
{
  width: 100%;
  height: 125px;
}

.box-prodotto-link
{
  width: 100%;
  height: 20px;
}

.box-prodotto-link a
{	
	display: table-cell;
	vertical-align: bottom;
	color: #9c9c9c; 
}

/* #pitchbutton
{

} */


#containerProdotto {
    position: fixed;
    left: 35%;
    right: 0;
    bottom: 20px;
	width: 28%;
	padding-right: 10px;
	border-right: solid 3px #000000;
}


#containerRegolazioni {
    position: fixed;
    left: 65%;
    right: 0;
    bottom: 20px;
	width: 28%;
	height: 110px;
	text-align: center;
	/*background-color: red;*/
}

#addPolyPointBt
{
    position: absolute;
    bottom:10px;
    left:50%;
    margin-left:-50px;
}

#remPolyPointBt
{
    position: absolute;
    bottom:10px;
    left:50%;
    margin-left:18px;
}


.hidden
{
    visibility: hidden;
    display:none;
}
#image-container
{
    position: fixed;
    top: 10%;
    left: 35%;
    right: 10%;
    bottom: 15%;
	/*background-color: #ff0000;*/
}
#file
{
    visibility: hidden;width:0px;
}

#pitchbutton
{
    /*position: absolute;
    top:35%;
    right:10px;
    transform: translateX(-50%);*/
	
	
}

#pitchbutton::-webkit-slider-thumb {
    /*background-image: url("../img/rotate.png");*/
}

#pitchbutton::-moz-range-thumb {
    /*background-image: url("../img/rotate.png");*/
}

#pitchbutton::-ms-thumb {
    /*background-image: url("../img/rotate.png");*/
}

#heightbutton::-webkit-slider-thumb {
    /*background-image: url("../img/move.png");*/
    /*transform: rotate(-90deg);*/
}

#heightbutton::-moz-range-thumb {
    /*background-image: url("../img/move.png");*/
    /*transform: rotate(-90deg);*/
}

#heightbutton::-ms-thumb {
    /*background-image: url("../img/move.png");*/
    /*transform: rotate(-90deg);*/
}

#rollbutton::-webkit-slider-thumb {
    /*background-image: url("../img/pitch.png");*/
    /*transform: rotate(-90deg);*/
}

#rollbutton::-moz-range-thumb {
    /*background-image: url("../img/pitch.png");*/
    /*transform: rotate(-90deg);*/
}

#rollbutton::-ms-thumb {
    /*background-image: url("../img/pitch.png");*/
    /*transform: rotate(-90deg);*/
}


#heightbutton
{
    /*position: absolute;
    top:50%;
    right:10px;
    margin-top:-65px;
    transform: rotate(90deg);*/
}

#rollbutton
{
    /*position: absolute;
    top:55%;
    right:10px;
    margin-top:-65px;
    /*transform: rotate(90deg);*/
}

#reset {
    position: absolute;
    bottom:10px;
    left:10px;
}

#menubt
{
    position: absolute;
    left:50%;
    margin-left:-16px;
    bottom:10px;
}

#three-container
{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
	
    /*top: 10%;
    left: 35%;
    right: 10%;
    bottom: 15%;*/
	/*background-color: #32a852;*/
}

.hid_menu
{
    display:none;
}

#fbkdlogo {
    height: 6em;
    width: auto;
}

#reset::before{
    content: "↺ ";
}

#userbootstrap {
    position: fixed;
    top: 10%;
    left: 35%;
    right: 10%;
    bottom: 15%;
    cursor: pointer;
    background: rgba(214,214,214,0.9);
	display: none;
}

#userbootstrap > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 400%;
	font-weight:bold;
    color: black;
    width: 80%;
    text-align: center;
}

#userbootstrapInizio {
    position: fixed;
    top: 10%;
    left: 35%;
    right: 10%;
    bottom: 15%;
    background: rgba(214,214,214,0.9);
}

#userbootstrapInizio > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 400%;
	font-weight:bold;
    color: black;
    width: 80%;
    text-align: center;
}

/* SHARE POPUP */
#shareblanket {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#sharepanel {
    position: relative;
    width: 400px;
    background-color: white;
    text-align: center;
    padding: 2em;
}

.closeBt {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: 1px solid transparent;
}

.closeBt:hover {
    border: 1px solid rgba(0,0,0,0.2);
}

#sharepanel img {
    height: 2em;
}