/*
 * CSS per l' applicazione di editing dei prodotti.
 */

:root {
  --main-txt-color: #444;
  --gray-bkg:       #F0F0F0;
  --gray-bkg-light: #F8F8F8;
  --button-bkg:     #DEF;
  --error-color:    #D52;
  --select-width:   280px;
  --icon-width:     180px;
}

.head_a
{
 /*   background-color: #F0F0F0;*/
    padding: 2px ;
    width: 100px;
    height: 26px;
    display: block ;
    text-align:center;
    text-decoration: none ;
}

/*
 * Global settings
 */
input {
    display: block;
    margin: 0;
    width: 120px;
    padding:1px;
   /* border: none;
    border-color: transparent;*/
   background-color: transparent;
}

select, button
{
    display: block;
    margin: 0 auto;
    border: none;
    padding:3px;
    width: 280px;
    /*border-color: transparent;*/
    background-color: #F0F0F0 ;
}

/* Informational text, sort of help/hint */
.infotext {
    font-size: 85%;
    font-family: sans-serif;
 /*   font-style: italic;*/
    color:#666;
    text-align: right;
    padding-right:6px;
}

 /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-radius: 7px;
	width: 14px;
	height: 14px;
/*	font-size: 14px;
    vertical-align:super;
	line-height: 26px; */
	cursor: default;
    float:right;
    background-color: #AAA;
    /*border-bottom: 1px dotted black;  If you want dots under the hoverable text */
}

.tooltip:before{
	content:'i';
	font-weight: bold;
    font-size:10px;
    padding-left:5px;
    text-align: center;
	color:#fff;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #AAA;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 25%;
    margin-left: -90px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 75%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #AAA transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* Another tooltip container */
.tooltipw {
   position: relative;
   display: inline-block;
   border-radius: 6px;
   border: 1px solid #666 ;
   width: 12px;
   height: 12px;
   cursor: default;
   background-color: #FFF;
}

.tooltipw:before{
   content:'i';
   font-weight: bold;
   font-size:12px;
   padding-left:4px;
   vertical-align:top;
   text-align: center;
   color:#666;
}
/* Tooltip text */
.tooltipw .tooltipwtext {
   visibility: hidden;
   width: 280px;
   background-color: #FFF;
   color: #666;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
   border: 1px solid #666 ;
   box-shadow: 3px 3px 3px 3px rgba(64, 64, 64, 0.2) ;

   /* Position the tooltip text */
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 25%;
   margin-left: -210px;

   /* Fade in tooltip */
   opacity: 0;
   transition: opacity 1s;
}

/* Tooltip arrow */
.tooltipw .tooltipwtext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 75%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #444 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipw:hover .tooltipwtext {
   visibility: visible;
   opacity: 1;
}

.tooltipr {
   position: relative;
   display: inline-block;
   border-radius: 6px;
   border: 1px solid #444 ;
   width: 12px;
   height: 12px;
   cursor: default;
   background-color: #FFE4E0;
}

.tooltipr:before{
   content:'i';
   font-weight: bold;
   font-size:12px;
   padding-left:4px;
   vertical-align:top;
   text-align: center;
   color:#444;
}
.tooltipr .tooltiprtext {
   visibility: hidden;
   width: 280px;
   background-color: #FFE4E0;
   color: #444;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
   border: 1px solid #444 ;
   box-shadow: 3px 3px 3px 3px rgba(64, 64, 64, 0.2) ;

   /* Position the tooltip text */
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 25%;
   margin-left: -210px;

   /* Fade in tooltip */
   opacity: 0;
   transition: opacity 1s;
}

.tooltipr:hover .tooltiprtext {
   visibility: visible;
   opacity: 1;
}
/*
 *  index.html
 */
.head_a:visited
{
    color: #444;
}

.head_a:link
{
    color: #444;
}

.head_a:hover
{
    background-color: #EFE;
}

.head_td
{
    border: none;
}
.intro
{
    margin-bottom: 1cm ;
    text-align:center;
}

img.icon
{
    width: 156px ;
    height: 108px;
    display: block ;
    margin: 0 auto ;
    object-fit:contain;
    color: #444;
}


td.iconbox
{
    width: 156px ;
    height: 128px;
}

table, th, td {
    border: 1px solid black ;
    border-color: #444;
    border-collapse: collapse;
    color: #444;
    min-width: 80px;
    padding: 1px ;
    font-size:14px;
    /*font-size:95%;*/
}

table.rightpanel
{
    margin: 2px ;
    margin-bottom:4px;
/*     width:  468px; */
    float:  right;
/*    border: none;*/
}

table.rightpanel th
{
    background-color:#F0F0F0;
}

table.rightpanel td
{
    border:none;
    height: 24px;
    padding-left:8px;
}

table.rightpanel td.delimiter
{
    border: 1px solid black ;
    border-left-style:none;
    border-right-style:none;
    border-bottom-style:none;
}

table.rightpanel select
{
    width: 280px;
    float: right;
    margin-right: 8px;
    margin-left:0px;
    font-size:105%;
}

table.rightpanel select.wider
{
    width: 444px;
    font-size:105%;
}

table.leftpanel
{
    float:left;
    border:none ;
}

table.leftpanel td
{
    border:none;
    height: 20px;
}

table.pricedetails td
{
    border: none ;
    width:  100px ;
    font-size: 95%;
    text-align:left;
    padding:3px;
}

button.square
{
    width:64px ;
    height:64px;
    margin-bottom:16px;
    margin-right:10px;
    background-color:transparent;
}

.floatingsec
{
    /*height: 26px ; */
    /*transition: height .35s;*/
    overflow-y:hidden ;
}
/*
 *  Summary page Section
 */
img.icon_small
{
    width: 80px ;
    height: 64px;
    display: block ;
    margin: 0 auto ;
    object-fit:contain;
    color: #444;
}

textarea.console {
    font-family: Courier New, monospace;
    color: #444;
    background-color:transparent ;
    border:none;
}

td.numeric {
    max-width:80px ;
    min-width:80px;
    text-align: center;
}

table.bottom_buttons button
{
    width: 104px ;
    height:48px ;
    margin: 6px ;
    text-align:center ;
}

table.bottom_buttons span
{
    width: 120px ;
    height:48px ;
    margin: 8px ;
    padding: 15px;
    text-align:center ;
    background-color: #DEF ;
}

table.bottom_buttons td
{
    border:none ;
}



/*
 * Login page
 */
form.login table
{
    border:none;
    margin: 0 auto;
    width:300px;
}

form.login td
{
    margin: 0 auto;
    height:40px;
    width:240px;
    border:none;
    margin: 0 auto;
    background-color: #F8F8F8;
}

.loginitem
{
    width:160px;
    height:30px;
    border:none;
    margin: 0 auto;
    margin-bottom:20px;
    padding:10px;
    background-color:#FFF;
   /*margin:10px ;   */
}

.registeritem
{
    border: 1px solid #FFF;
    background-color: #F8F8F8;
    height: 24px;
    margin: 0 auto;
    margin-top:8px;
    margin-bottom:8px;
    width:240px;
}

.loginbtn
{
    width:180px;
    height:40px;
    background-color:#DEF;
    margin-bottom:20px;
}
/*
 * Options page
 */
.outertable{
    margin: 8px;
    border: none

}

table.optplain {
    background-color: #F0F0F0 ;
    margin: 0 auto ;
    margin-bottom:20px;
    vertical-align:top;
}

table.optplain td {
    border:none;
    background-color: #F0F0F0 ;
    padding-left:12px;
}

table.optplain input {
    width:200px;
    height:22px;
    margin:4px;
    margin-right:12px;
    background-color: white ;
}

body {
    font-family: Tahoma, sans-serif;
    color: #444;
}

table.optable td {
    border:none;
    margin: 8px ;
}

table.optcable td {
    background-color: #F0F0F0 ;
    padding: 8px;
}

table.optcable {
    background-color: #F0F0F0 ;
    margin: 12px ;
}

table.optcable input {
    width:60px;
}

table.optcable select {
    background-color: white ;
    vertical-align:top;
    width:60px;
}

table.optcable td.optunit {
    text-align: left;
    width: 30px;
    min-width: 30px;
    padding-right:12px;
}

table.optcable td.optresult {
    text-align:right;
    width: 60px;
    border : 1px
}

table.optcable td.opterror {
    color: #D52 ;
    text-align:right;
    width: 80px;
    border : 1px
}

table.optable button {
    width:160px;
    height: 36px;
    margin:0 auto;
    background-color: #DEF ;
    box-shadow: 3px 3px 5px #888;
}

table.optcable button {
    width:120px;
    height: 36px;
    margin:10px;
    background-color: #DEF ;
    box-shadow: 3px 3px 5px #888;
}


/* Menu */

ul.menu {
    position: absolute;
    list-style-type: none;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, .15);
    /*width: 140px;*/
    border: 1px solid rgba(0, 0, 0, .15);
    top: 0;
    left: 0;
}

ul.menu li.title {
    color: rgba(0, 0, 0, .5);
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    background: linear-gradient(to bottom, #ededed 0%, #dedede 100%);
    padding: 5px 10px;
}

ul.menu li {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: background-color .25s;
    font-family: Lato, Arial, Tahoma Helvetica, sans-serif;
    overflow: hidden;
}

ul.menu li span {
    overflow: hidden;
    /*width: 140px;*/
    float: left;
    margin: 6px;
    transition: opacity .25s;
}

ul.menu li:last-of-type {
    border-bottom: 0;
}

/* Sweep */
div.sweep span {
    width:100px;
    text-align:center;
    vertical-align:middle;
    padding:5px;
    display:inline-block;
}

table.sweep td {
    width:118px;
    text-align:center;
    vertical-align:middle;
    border-left:none;
    border-top:none;
    border-right:1px solid #24C ;
    border-bottom:none;
}

/*
 * Shaped page
 */
button.diagctrl {
    border:none;
    display:inline-block;
    width:30px;
    margin: 2px;
    font-size:160%
}

button.diagmenu {
    border:none;
    width:120px;
    font-size:120%;
    text-align: left;
    display:block;
}

table.diagctrl td {
    border:none ;
    min-width:20px;
}
button.diagmenu:hover
{
    background-color: #EFE;
}

div.cddown {
    position:relative ;
    display: block ;
}

div.cdcontent {
    position:relative ;
    display: none ;
}

.cddown:hover .cdcontent {
    display: inline;
}

/*VERTICAL MENU*/
nav.vertical{
  position:absolute;
  display:none;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
  box-shadow: 3px 3px 5px #888;
  padding:0px;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical button{
  display:block;
  color:#444;
  text-decoration:none;
  padding:10px 15px;
  background:#EEE;
  font-size:110%;
  width:150px;
  text-align:left;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > button{
  background:#CCC;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  position:absolute;
  left:0%;
  top:0;
  width:100%;
  visibility:hidden;
  opacity:0;
  transition: transform 0.2s;
  transform: translateX(10px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  left:100%;
  visibility:visible;
  opacity:1;
  transform: translateX(0px);
}