/* 27.04.16  */

.yui3-toolbar {
    border: solid 1px #999;
    background-color: #ccc;
    margin: .25em;
    overflow: auto;
    width: 99%; /* 100.6%; */
}


.yui3-toolbar-button {
    display: inline-block;
    border-width: 1px 0;
    border-style: solid;
    border-color: #808080;
    background-color: #dfdfdf;
    margin: .25em;
    font-size: 100%;  /* 11px */
}

.first-child {
    margin-left: .5em;
}

.yui3-toolbar-button span {
    display: inline-block;
    border-width: 0 1px;
    border-style: solid;
    border-color: #808080;
    margin: 0 -1px;
    position: relative;    /* Necessary to get negative margins working in IE */
    left: -1px;
}

.yui3-toolbar-button span span {
    display: inline-block;
    border: solid 1px #b6b6b6;
    margin: 0;
    position: static;
}

.yui3-toolbar-button input {
    border: none;
    margin: 0;
    padding: 5px 5px 5px 24px;
    overflow: visible; /* Remove superfluous padding for IE */
    /* background: transparent url(images/icons.png) no-repeat; */
}

.yui3-toolbar-button:hover{
    background-color: #f9f191;
}

.yui3-toolbar-button input:active{
    border: inset;
    padding: 2px 0px 2px 24px;
}
.escidiv {
/*    float: right; */
    display: inline-block;
    margin-right: 5px;
}
#esci-btn input {
    background: transparent url(images/esci.png) no-repeat;
    background-position: 4px 6px;    
}

#add-btn input {
    /* background-position: 4px -100px; */
    background: transparent url(images/add.png) no-repeat;
    background-position: 4px 6px;    
}

#edit-btn input {
    /*background-position: 4px -76px;*/
    background: transparent url(images/edit.png) no-repeat;
    background-position: 4px 6px;    
}

#print-btn input {
    /*background-position: 4px -52px; */
    background: transparent url(images/print.png) no-repeat;
    background-position: 4px 6px;    
}

#open-btn input {
    /* background-position: 4px -28px; */
    background: transparent url(images/open.png) no-repeat;
    background-position: 4px 6px;    
}

#elimina-btn input {
    /* background-position: 4px -124px; */
    background: transparent url(images/delete.png) no-repeat;
    background-position: 4px 6px;    
}

#conferma-btn input {
    /* background-position: 4px -4px;*/
    background: transparent url(images/save.png) no-repeat;
    background-position: 4px 6px;    
}

#su-btn input {
    background: transparent url(images/su.png) no-repeat;
    background-position: 4px 6px;    
}

#giu-btn input {
    background: transparent url(images/giu.png) no-repeat;
    background-position: 4px 6px;    
}
#prenotaz-btn input {
    background: transparent url(images/lista.png) no-repeat;
    background-position: 4px 6px;    
}
#match-btn input {
    background: transparent url(images/ruota.png) no-repeat;
    background-position: 4px 6px;    
}
#proto-btn input {
    background: transparent url(images/proto.png) no-repeat;
    background-position: 4px 6px;    
}
#nxt-btn input {
    background: transparent url(images/nxt.png) no-repeat;
    background-position: 4px 6px;    
}
#run-btn input {
    background: transparent url(images/run.png) no-repeat;
    background-position: 4px 6px;    
}
#stampa-btn input {
    background: transparent url(images/printer.png) no-repeat;
    background-position: 4px 6px;    
}
#dpp-btn input {
    background: transparent url(images/duplica.png) no-repeat;
    background-position: 4px 6px;    
}

#move-btn input {
    background: transparent url(images/move.png) no-repeat;
    background-position: 4px 6px;    
}

.yui3-toolbar-button input.focus {
    background-color: #B3D4FF;
}

#inc-btn input {
    background: transparent url(images/add.png) no-repeat;
    background-position: 4px 6px;    
}
#ril-btn input {
    background: transparent url(images/delete.png) no-repeat;
    background-position: 4px 6px;    
}




#navll input {
    background: transparent url(images/ll.png) no-repeat;
    width: 28px !important;
    height: 26px !important;
    border: 1px;
}
#navrr input {
    background: transparent url(images/rr.png) no-repeat;
    width: 28px !important;
    height: 26px !important;
    border: 1px;    
}
#navr input {
    background: transparent url(images/r.png) no-repeat;
    width: 28px !important;
    height: 26px !important;
    border: 1px;
}
#navl input {
    background: transparent url(images/l.png) no-repeat;
    width: 28px !important;
    height: 26px !important;
    border: 1px;
}
.navigatorbtn {
    font-size: large;
    color: #a0e2fc;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    border-top: none !important;
    border-left: none !important;
    border-right: solid !important;
    border-bottom: solid !important;
    width: 40px !important;
}

.buttonCam{
  padding: 10px 10px 20px -20px;
  /* width: 160px; */
  width: 32%;
}
.quickpic {
	font-size: 2em;
	color: white;
	background-color: #03ba09;
	font-weight: bold;
  margin: 20px 20px 20px 20px;
  text-align: center;
  height: 70px;
  width: 70%;
}

#my_camera {
  position: relative;
  border: solid 2px;
  display: inline-block;
}

#btnweb {
  color: #FFFFFF;
  background-color: transparent;
  text-decoration: none;
  border: 1px solid #7BB73A; 
}
#webcam {
  /*width: 640px;
  height: 480px; */
  position: relative;
  border: solid 2px #008000;
  display: inline-block;
}
.divfoto {
  position: relative;
  float: left;
  max-width: 300px;
  padding-bottom: 20px;
}
.divboxfoto {
  width: 100%;
  clear: both;
}
.btnFoto {
  width: 100%;  
  display: flex;
}
#spinner {
  position: fixed;
  top: 300px;
  left: 50%;
  margin-left: -50px; /* half width of the spinner gif */
  margin-top: -50px; /* half height of the spinner gif */
  text-align:center;
  z-index:1234;
  overflow: auto;
  Width: 100px; 
  height: 102px;
  background: url("../css/images/bigspinner.gif") no-repeat; 
}




#body-foto {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#main-container {
  display: flex;
  flex: 1;
}

#main-div-foto, #btn-div, #parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

#main-div-foto {
  flex: 1;
  background-color: #f0f0f0; /* Color added for visual distinction */
}

#btn-div {
  display: flex;
}

#btn-div button {
  margin: 5px;
}

#parent {
  flex-shrink: 0;
  overflow: auto;
}

@media (orientation: landscape) {
  #main-container {
      flex-direction: row;
  }

  #btn-div {
      flex-direction: column;
      width: 30%;
      flex-shrink: 0;
  }

  #main-div-foto {
      width: 70%;
  }
  
  #video {
    width: auto;
    height: 100%;
  }
}

@media (orientation: portrait) {
  #main-container {
      flex-direction: column;
  }

  #btn-div {
      flex-direction: row;
      width: 100%;
      flex-shrink: 0;
  }

  #main-div-foto {
      width: 100%;
  }
  #video {
    width: 100%;
    height: auto;
  }
}

#foto_sez {
  position: fixed;
  top: 30px; /* Distanza dal bordo superiore */
  left: 30px; /* Distanza dal bordo destro */
  background-color: rgba(255, 255, 255, 0.5); /* Sfondo semi-trasparente */
  border: 2px solid red; /* Bordo rosso */
  padding: 5px; /* Padding per l'interno */
  z-index: 1000; /* Assicurati che sia sopra tutto il resto */
  white-space: nowrap; /* Evita il wrap del testo */
  overflow: hidden; /* Evita overflow del contenuto */
  font-size: 22px; /* Dimensione del testo */
}

.button-33 {
  margin-right: 5px;
  align-items: center;
  appearance: none;
  /* background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%); */
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono",monospace;
  height: 24px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
/*  font-size: 16px; */
  width: 62px;
  color: #080404; 
  top: -8px;
}
.button-33-color1 { background-image: radial-gradient(100% 100% at 100% 0, #118506 0, #b2ff5a 100%); font-size: 20px; }
.button-33-color2 { background-image: radial-gradient(100% 100% at 100% 0, #a06904 0, #ffaf5a 100%); font-size: 20px; }
.button-33-color3 { background-image: radial-gradient(100% 100% at 100% 0, #516267 0, #bde1eb 100%); font-size: 20px; }
.button-33-color4 { background-image: radial-gradient(100% 100% at 100% 0, #c76089 0, #e93080 100%); font-size: 20px; }
.button-33-color5 { background-image: radial-gradient(100% 100% at 100% 0, #7b7903 0, #f5ea09 100%); font-size: 20px; }

.button-33-color0  { background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%); font-size: 20px; }

.button-33-ena { 
  color: #f8f8f8 !important;
  font-size: 16px;
  top: 0px;
}

.button-33:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;  
}

.button-33:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-33:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
}