body {
    /* set margin to 0 and overflow to hidden, to go fullscreen */
    margin: 0;
    overflow: hidden;
}
.informazioniopera {
    text-align: center;
    font-size: large;
}
/* per non lasciare selezionare un testo */
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}
.areaRender {
    border: 3px;
    border-color: aqua;
    margin: 5px;
}
.pulsantiPorte {
    font-size: 18pt;
    width: 80%;
    margin: 10px;
    border-radius: 10px;
}
.ui {
    position: absolute;
    margin: 10pt;
}
.uiDes {
    position: absolute;
    margin-top: 10px;
    right: 10px;
}
.imgprev {
    width: 120px;
    height: auto;
    margin: 20px;
    z-index: -1;
}
.imgprevNASC {
    display: none;
}
.uiBas {
    position: absolute;
    margin: 10px;
    bottom: 10px;
}
.uiprev {
    position: absolute;
    text-align: left;
    top: 5%;
    left: 5%;
}
.uiplus {
    border-radius: 10px;
    padding: 30px;
    background-color: #deeeeed7;
    position: absolute;
    text-align: center;
    top: 50%;
}
button {
    width: 36px;
    height: 36px;
}
.navigazione {
    position: absolute;
    margin: 5px;
    bottom: 10px;
    left: 50%;
    /* calcolato dal 36 dimensione pulsante */
    margin-left: -18px;
}
.progress {
    width: 400px;
    height: 40px;
    margin-top: 10px;
}
.pulsantiOpere {
    margin-left: 3px;
    margin-right: 3px;
    width: auto;
    height: auto;
    font-size: medium;
    padding: 2px;
}
.stilericercaOpera {
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    color: rgb(0,0,0);
}
.stileimgricerca {
    display: table-cell;
    vertical-align: middle;
    width: 24px;
    height: 24px;
}
.stileNomeStanza {
    color: rgb(3, 100, 180);
}
.progressTag {
    position: relative;
    width: 40px;
    height: 40px;
    animation: .7s linear .01s infinite progressMoveTag;
}
.blink_me {
    text-align: center;
    animation: 1s linear .01s infinite alternate blinker;
}
@keyframes progressMove {
    0% {
        transform: scaleY(0.01);
    }
    100% {
        transform: scaleY(1);
    }
}
@keyframes progressMoveTag {
    0% {
        transform: rotate(0Deg);
    }
    100% {
        transform: rotate(360Deg);
    }
}
@keyframes blinker {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}
/* per far ruotare il timer */
.rotazioneAni{
    animation: 3s linear progressMoveTag;
}
#notes {
    position: absolute;
    margin: 5px;
    bottom: 10px;
    right: 10px;
}
#menudoor {
    position: absolute;
    text-align: center;
    margin: 5px;
    top: 10px;
    right: 10px;
}

#playpauseDiv {
    position: absolute;
    margin: 5px;
    bottom: 10px;
    left: 10px;
}
#navigazione {
    position: absolute;
    margin: 5px;
    bottom: 10px;
    left: 50%;
    /* calcolato dal 36 dimensione pulsante */
    margin-left: -58px;
}

 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  text-align: center;
  background-color: #fefefe;
  /* border-radius: 25px;*/
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-size: 28px;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto; /* 15% from the top and centered */
  padding: 10px;
  /* border: 1px solid #888; */
  width: 80%; /* Could be more or less, depending on screen size */
}

.modal-menu-content {
  text-align: center;
  font-size: 28px;
  border-radius: 10px;
  background-color: #5353538c;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 10px;
  width: 80%; /* Could be more or less, depending on screen size */
}

.modal-menu-content-op {
  text-align: center;
  font-size: 28px;
  border-radius: 10px;
  background-color: #5353538c;
  margin: 5% auto; /* 15% from the top and centered */
  padding: 10px;
  width: 90%; /* Could be more or less, depending on screen size */
}

.modal-container {
  top: 5%;
}

/* The Close Button */
.close {
    color: rgb(0, 0, 0);
    background-color: #fefefe; 
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-top: -10px;
    margin-bottom: -20px;
    margin-right: -6px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}

.close:hover,
.close:focus {
  color: rgb(93, 122, 87);
  text-decoration: none;
  cursor: pointer;
} 

.hideModal {
  z-index: -1;
  opacity: 0;
  animation: hideModalAni .25s;
  transform: scale(0);
}
/* gestione alternativa del menu stanze 01-11-2020 inizio aggiunta allo stile */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  font-family: 'Arial';
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;} /* colore di sfondo dei link */

.dropdown:hover .dropdown-content {display: block;}

/* 01-11-2020 fine aggiunta allo stile */
@keyframes hideModalAni {
  from {
      z-index: 2;
      transform: scale(1);
      opacity: 1;
  }
  to {
      z-index: -1;
      transform: scale(0);
      opacity: 0;
  }
}

.showModal {
  opacity: 1;
  z-index: 2;
  animation: showModalAni .4s;
  transform: scale(1);
}

@keyframes showModalAni {
  from {
      transform: scale(0);
      opacity: 0;
      z-index: -1;
  }
  to {
      transform: scale(1);
      opacity: 1;
      z-index: 2;
  }
}
.tool-tip{
    opacity: 0.0;
    display: none;
}
.pulsantiMC {
  background: var(--immagine-piena, url('http://www.lsvirtual.it/lsv/libsAll/pulsanti/azzurro.png'));
  width: 24px;
  height: 24px;
}
.pulsantiMCR {
  background: var(--immagine-piena, url('http://www.lsvirtual.it/lsv/libsAll/pulsanti/azzurro_rot.png'));
  width: 24px;
  height: 24px;
}
.pulsantiMC[title]:hover::after {
    content: attr(title);
    font-size: x-large;
}
.pulsantiMCR[title]:hover::after {
    content: attr(title);
    font-size: x-large;
}

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {

    #navigazione {
        /* calcolato dal 36 dimensione pulsante */
        margin-left: -82px;
    }
    .pulsantiMC {
        background: var(--immagine-trasp, url('http://www.lsvirtual.it/lsv/libsAll/pulsanti/azzurrotrasp.png'));
        width: 36px;
        height: 36px;
    }
    .pulsantiMC:hover {
        background: var(--immagine-piena, url('http://www.lsvirtual.it/lsv/libsAll/pulsanti/azzurro.png'));
        cursor: pointer;
    }
    .pulsantiMCR {
        background: var(--immagine-trasp-rot, url('http://www.lsvirtual.it/lsv/libsAll/pulsanti/blu.png'));
        width: 36px;
        height: 36px;
    }
    .pulsantiMCR:hover {
        background: var(--immagine-piena-rot, url('http://www.lsvirtual.it/lsv/libsAll/pulsanti/azzurro_rot.png'));
        cursor: pointer;
    }
     /* 11-11-2020 per mettere il titolo sull'opera */
    .tool-tip{
        opacity: 0.8;
        display: block;
    	width:auto;
    	height:auto;
        font-family: 'Arial';
        border-radius: 5px;
        padding:10px;
    	position:absolute;
        color: #2a5353;
    	background-color:#f8f8f8;
    }
}