@font-face
{
	font-family: MyFont;  
	/* src: url("./Fonts/FuturaStd-Medium.otf") format("opentype"); */
	src: url("./Fonts/SF-Compact-Rounded-Regular.otf") format("opentype");
	font-style: normal;
	font-weight: normal;
}

@-webkit-keyframes blinker
{
	/*
	0% { opacity: 0.3; }
	50% { opacity: 1.0; }
	100% { opacity: 0.3; }
	*/
	50% { opacity: 0; }
}

@-webkit-keyframes blinker2
{
	/*
	0% { opacity: 0.3; }
	50% { opacity: 1.0; }
	100% { opacity: 0.3; }
	*/
	25% { opacity: 0; }
}

@-webkit-keyframes blinker3
{
	75% { color:yellow; font-weight: bold }
}

button::-moz-focus-inner
{
	border: 0;
}

body
{
	margin: 10px 2px 2px 2px;
	background-color: white;
	overflow-x: hidden;
	font-family: MyFont, Verdana, sans-serif;
	color: gray;
	font-size: 14pt;
	background-color: white;
}

.CLCERTIFICATITIPIFRECCIA
{
	width:24px;

	top:5%;
	left:0px;
	position: absolute;

	transform-origin: 50% 40%;

	-webkit-transform: rotate(0deg);
	transition: transform 0.5s
}
.CLCERTIFICATITIPIFRECCIA_GIRA
{
	-webkit-transform: rotate(-180deg);
	transition: transform 0.5s
}

table
{
	font-size: 14pt;
	border-width: 0px;
	padding: 0px;
	border-collapse: collapse;
	border-style: solid;
	border-color: black;
}

button { font-size: 14pt; }

.TableCenter
{
	display: table;
	margin-left: auto;
	margin-right: auto;
}

#MenuChat
{
	position: fixed;
	bottom: -200px;
	right: 20px;
	z-index: 999;
	cursor: pointer; 
}

.BOTTONE
{
	padding-left: 2px;
	padding-right: 2px;
	color: white;
	text-align: center;
	font-weight: bold;
}


#BarraMenu
{
	position: fixed;
	width: 100%;
	top: 0px;
	background-color: white;
	padding-top: 10px;
	/*bottom: -200px;
	right: 20px;
 */
	z-index: 999;
}

#MenuChat > img
{
	max-height: 60px;
}

.Pallino
{
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 8px;
	border:1px solid #808080;
	position:relative;
	top:1px;
}
.LogoTipoCertificato
{
	max-height:15px; max-width: 75px; cursor:pointer;
}

@media (max-width: 1300px)
{
	body, table, button { font-size: 14pt; }
	.CLCERTIFICATITIPIFRECCIA { width:24px; }
}

@media (max-width: 800px)
{
	body, table, button { font-size: 12pt; }
	.CLCERTIFICATITIPIFRECCIA { width:20px; }
	
	.Pallino
	{
		width: 12px;
		height: 12px;
		border-radius: 7px;
	}
	
	#MenuChat > img
	{
		max-height: 45px;
	}

	.LogoTipoCertificato
	{
		max-height:12px;
		max-width: 65px;
		cursor:pointer; 
	}
}

@media (max-width: 500px)
{
	body
	{
		margin: 10px 0px 0px 0px;
	}
}

td
{
	padding: 0px;
	border-width: 0px;
	border-style:solid;
	border-color:black;
}

div
{
	border-width: 0px;
	border-style:solid;
	border-color:black;
}

iframe
{
	border:0px solid white;
}

a { color: #99F; text-decoration: none; cursor: pointer; }
a:visited { color: #99F; text-decoration: none; }
a:link { color: #99F; text-decoration: none; }
a:hover { color: #99F; text-decoration: none; }
img {	border: none;}

input, select, textarea
{
	color:black;
	border: 1px solid #C0C0C0;
	background-color: white;
	padding: 5px;
	font-family: MyFont;
	font-size: 12pt;
}

.noinput
{
	background-color: transparent;
	border: 0px solid transparent;
	background-image: none;
}


input[type="radio"] { margin:0px; position:relative; top:2px; }
select { padding: 5px 20px 5px 4px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url(./Immagini/SelectDropDown.png); background-repeat: no-repeat; background-position: center right; }

.CheckRadioContainer { cursor: pointer }

.CheckRadioContainer input { display:none; }
.CheckRadioContainer .CheckRadioMark { display: inline-block; position: relative; top: 3px; width:18px; height:18px; background-color: white; border: 2px solid gray }

.CheckRadioContainer input:checked ~ .CheckRadioMark { background-color: gray; }
/* .CheckRadioContainer input:checked ~ .CheckRadioMark:after { position:absolute; top:2px; left:2px; width: 16px; height:16px; content:""; background-color:gray; color:white; } */

.CheckRadioContainer input:disabled ~ .CheckRadioMarkText { color: lightgray; }
.CheckRadioContainer input:disabled ~ .CheckRadioMark { border-color: lightgray; }

.SelectStyled { cursor:default; font-size: 12pt; color:black; padding: 5px 20px 5px 4px; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 1px solid lightgray; background-image: url(./Immagini/SelectDropDown.png), linear-gradient(#FFF, #EEF); background-repeat: no-repeat; background-position: center right; padding-right: 20px  }

.SelectHtml
{
	border:1px solid lightgray;
	background-color:white;
}

.carature
{
	white-space: nowrap;
}

table.CalendarioContenitore
{
	width: 200px;
	border-width: 1px;
}

td.CalendarioContenitore { border-width: 1px; }

table.Calendario
{
	width: 100%;
	color: white;
	background-color: #C0C0C0;
	font-weight: bold;
	font-size: 8pt;
	border-collapse: separate;
	border-spacing: 4px;
	cursor: default;
}

a.Calendario { color: white; }
a:link.Calendario { color: blue; text-decoration: none; }
a:hover.Calendario { color: blue; text-decoration: none; }

.OverGray:hover { background-color: lightgray; }

a.CalendarioCrocetta { cursor:pointer; }

table.hint
{
	color: white;
	background-color: #8080FF;
	padding: 5px;
	border-width: 1px;
}

td.hint { padding: 5px; }

table.pop
{
	color: black;
	background-color: #E0ECFF;
	padding: 5px;
	border-width: 1px;
}

td.pop
{
	color: black;
	padding: 5px 5px 5px 5px;
	cursor: pointer;
}

td.popover
{
	color: white;
	background-color: #0000C0;
	height: 25px;
	padding: 5px 5px 5px 5px;
	font-weight: normal;
	cursor:pointer;
}

table.popout
{
	background-color: #E0ECFF;
}

td.popout
{
	color: black;
	background-color: #E0ECFF;
	height: 25px;
	font-weight: normal;
	padding: 5px 5px 5px 5px;
}
td.popout_spacer
{
	color: black;
	background-color: #FFFFFF;
	height: 25px;
	font-weight: normal;
	padding: 5px 5px 5px 5px;
	cursor: default;
}

div.dragdrop
{
	color: white;
	background-color: #8080FF;
	padding: 5px;
	border-width: 1px;
}

.Titolo
{
	font-size: 20pt;
}

.Navigazione
{
	font-size: 14pt;
	height: 30px;
}

.ContenitoreTastiVerticali
{
	display:table-cell;
	padding: 30px 10px 0px 10px;
	vertical-align: top;
	text-align: center
}

table.TabellaRicerca
{
	border-collapse: separate;
	border-spacing: 5px;
}

table.TabellaDati
{
	width: 100%;
	border-width: 1px;
	
}

thead.TabellaDati
{
	background-color: #737373;
	font-size: 10pt;
	font-weight: bold;
	color: white;
}

tbody.TabellaDati { border-spacing: 10px; }

tfoot.TabellaDati
{
	font-size: 10pt;
	font-weight: bold;
	color: white;
	background-color: #737373;
}

td.TabellaDati 
{
	padding: 7px;
}

.RigaPari { background-color:#F0F0F0; }
.RigaDispari { background-color:white; }

table.TabellaInserisci
{
	width: 100%;
}

table.TabellaInserisci td { padding: 5px; }

.pulsante_25
{
	cursor: pointer;
	font-size: 8pt;
}

.pulsante_35 { cursor: pointer; }

button
{
	font-family: MyFont, Verdana, sans-serif;
	cursor:pointer;
	font-weight: bold;
	color: white;
	background-color: #555;
	border: 1px solid #555;
	/* border-radius: 10px; */
	/* background: linear-gradient(#FFF, #EEF); */
	padding: 10px;
}

button.reverse
{
	border: 1px solid #555;
	background-color: transparent;
	color: #555;
}

button.buttonupload 
{
	background-color: transparent;
	padding: 0px;
}

button.selected { color:white; background: linear-gradient(#EEE, #BBC); }

button.medio { padding: 5px 8px 5px 8px; border-width: 1px;}
button:hover.medio { padding: 4px 7px 4px 7px; border-width: 2px; }

button.blue { background: linear-gradient(#FFF, #AAF); }
button.piccolo { padding: 2px 4px 2px 4px; border-width: 1px; }
button:hover.piccolo { padding: 1px 3px 1px 3px; border-width: 2px; }

button.piccolissimo { padding: 1px 3px 1px 3px; border-width: 1px; }
button:hover.piccolissimo { padding: 0px 2px 0px 2px; border-width: 2px; }

button.disabilitato { background: linear-gradient(#EEE, #DDD); color:white; }

button.svg { background: transparent; padding: 0px; }

button#BUTTONCHIUDI
{
	border:none;
}

div.PadreContainerMessaggi
{
	font-family: sans-serif;
}


div.Notification
{
	position: relative; 
	top: 0; 
	right: 14px; 
	float: right; 
	padding: auto; 
	line-height: 28px;
	background-color: yellow; 
	border: 1px solid black; 
	border-radius: 50%; 
	text-align: center; 
	width: 28px; 
	height: 28px;
}

.NotificationContainer
{
	position: absolute;
	cursor: pointer;
}

div.MessaggioChatData
{
	background-color: #C0C0C0;
	color: white;
	border: 0px;
	font-weight: bold;
	border-radius: 15px;
	margin: 0 auto;
	margin-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-top: 4px;
	white-space: nowrap;
	width: max-content;
}
div.MessaggioChat
{
	color: black;
	max-width: 80%;
	padding: 5px; 
	margin: 10px;
	font-size: 96%;
	border-radius: 15px; 
	border: 1px solid black;
}

div.MessaggioCliente
{
	background-color: white; 
	float: left;
	text-align: left;
}

div.MessaggioBertani
{
	background-color: #AFA;
	text-align: left;
	float: right;
}

td.MessaggioCliente
{
	text-align: left;
	width: 100%;
}

td.MessaggioBertani
{
	text-align: right;
	width: 100%;
}

span.firstcheck
{
	color: blue;
	margin-left: 3px
}

span.secondcheck
{
	color: blue;
	margin-left: -9px;
}

table.TabellaRicerca
{
	border-collapse: separate;
	border-spacing: 5px;
}

table.TabellaDati
{
	width: 100%;
	border-width: 0px;
}

table.TabellaDati thead
{
	background-color: white;
	font-weight: bold;
	height: 35px;
}

table.TabellaDati thead tr td
{
	border-bottom: 1px solid black;
	vertical-align: bottom;
}

table.TabellaDati tbody { border-spacing: 10px; }

table.TabellaDati tbody tr { height:30px; }

table.TabellaDati tfoot
{
	background-color: white;
	font-weight: bold;
	border-top: 1px solid black;
}

table.TabellaDati td { padding: 2px; }

/* chat */
#ICS
{
	margin-left: -25px; 
	margin-top: -15px; 
	border: 2px solid black; 
	width: 20px; 
	height: 20px;
	vertical-align: top; 
	display: none; 
	background-color: white; 
	border-radius: 50%; 
	padding: 5px
}

#ANTEPRIMAIMMAGINE
{
	padding: 8px;
	display: none;
	background-color: white; 
	margin: auto; 
	width: auto; 
	border: 2px solid black; 
	border-radius: 20px
}

div.MenuChat
{
	background-color: white; 
	width: 94%; 
	margin: auto; 
	cursor:pointer; 
	height: 100px; 
	border: 1px solid black; 
	border-top-width: 0px; 
	cursor: pointer; 
	padding: 5px;
}
.swipe {
	overflow: hidden;
	visibility: hidden;
	position: relative;
		}
.swipe-wrap {
	overflow: hidden;
	position: relative;
	max-height: 100%;
}
.swipe-wrap > div {
	float: left;
	position: relative;
}
iframe.rounded-dialog
{
	border-radius: 20px;
	border: 1px solid black;
	position:absolute; 
	left:0px; 
	top:0px; 
	width:100%; 
	height:100%; 
	border-width:0px;
	overflow: hidden;
}

.Dialog_Bianca
{
	background-color: white; opacity: 80%; color: black; position: absolute; 
	padding-top: 15px; 
	padding-left: 10px; 
	padding-right: 10px;
	padding-bottom: 15px; border: 1px solid black; border-radius: 10px; text-align: center; 
	top: 30px;
	left: 550px; right: 550px;
	font-size: 100%; z-index: 990;
}
.Dialog_Bianca_Ampia {left: 110px; right: 110px;}
.Dialog_Bianca_3quarti {top: 160px}

.Dialog_Bianca_Su_Foto
{
	padding-top: 30px; 
	padding-left: 10px; 
	padding-right: 10px;
	padding-bottom: 30px; border: 1px solid black; border-radius: 10px; text-align: center; 
	top: 200px;
	left: 20px;
	width: 440px;
}

td.TabellaStock
{
	padding: 3px 5px;
	border-bottom: 1px solid grey;
	border-right: 1px solid grey;
}
td.TabellaStockFediHUltimaColonna
{
	padding: 3px 5px;
	border-bottom: 1px solid grey;
	border-right: 1px solid grey;
}
td.TabellaStockEsterna
{
	padding: 3px 5px;
	border-bottom: 1px solid grey;
}

.Importo {color:red;}

.blink
{	/*
	-webkit-animation-name: blinker;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
	-webkit-animation-duration: 1.7s;*/
	animation: blinker 1s step-start infinite;
}
.blink2
{	
	animation: blinker2 1s step-start infinite;
}
.blink3
{	
	animation: blinker3 1s step-start infinite;
}

/**************************************** TABVIEW ****************************************/
div.TabViewLinguette
{
	width: 100%;
	display: flex;
	display: inline-table;
	border-bottom: 1px solid grey;
	/*flex-grow: max;
	white-space: pretty;*/
}

div.TabViewLinguette > div
{
	padding: 2px 10px 2px 10px;
	cursor: pointer;
	background-color: white;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	/*border-top: 1px grey solid;
	border-left: 1px grey solid;
	border-right: 1px grey solid;*/
	display: inline-block;
}

table.TabViewLinguette > tbody > tr > td
{
	/*border: 1px solid black;*/
}

div.TabViewLinguette > div:last-child
{
	/*width: 100%;*/
	/*border-width: 0px 0px 1px 0px;*/
	border-color: black;
}

div.TabViewLinguette > div.tabViewLinguetta
{
	white-space: nowrap;
}
div.TabViewLinguette > div.tabViewLinguettaSpazi
{
	padding: 2px 0px 2px 0px;
	width: 10px;
	/*border-width: 0px 0px 1px 0px;*/
	background-color: transparent;
	display: inline-block;
}

div.TabViewLinguette > div.tabViewLinguettaSelezionata
{
	/*border-bottom: 0px solid black;*/
	/*background-color: #ffffcc;*/
	color: black; 
	font-weight: bold;
	/*border-bottom: 1px solid #28F; */
}

.TabellaStockFediColoriDisponibili {display: table-cell}

@media (max-width: 1300px)
{
	.Dialog_Bianca {right: 200px; left: 200px; font-size: 100%;}
	.Dialog_Bianca_Su_Foto {left:20px;width: 440px;}
	.Dialog_Bianca_Ampia {left: 120px; right: 120px;}
}
@media (max-width: 1000px)
{
}
@media (max-width: 900px)
{
	.Dialog_Bianca {right: 100px; left: 100px;font-size: 100%}
	.Dialog_Bianca_Su_Foto {left:20px;width: 440px;}
}
@media (max-width: 812px)
{
	.Dialog_Bianca {right: 100px; left: 100px; font-size: 100%}
	.Dialog_Bianca_Su_Foto {top:150px; left:10px; width: 290px; font-size: medium;}
}
@media (max-width: 810px)
{
	.Dialog_Bianca {right: 100px; left: 100px; font-size: 100%}
	.Dialog_Bianca_Ampia {left: 60px; right: 60px;}
	.Dialog_Bianca_Su_Foto {top:150px; left:10px; width: 290px; font-size: medium;}
}
@media (max-width: 600px)
{
	.Dialog_Bianca_Su_Foto {top: 130px; left: 100px; right: 100px; width: auto;}
	.Dialog_Bianca_Ampia {left: 20px; right: 20px;}
	.TabellaStockFediColoriDisponibili {display: none}
	td.TabellaStockFediHUltimaColonna {border-right: none}
}
@media (max-width: 500px)
{
	.Dialog_Bianca {right: 30px; left: 30px; font-size: 100%}
	.Dialog_Bianca_Su_Foto {top: 130px; left: 100px; right: 100px;}
}
@media (max-width: 378px)
{
	.Dialog_Bianca_Su_Foto {top: 130px; left: 50px; right: 50px;}
	.Dialog_Bianca_Ampia {left: 10px; right: 10px;}
}	
			
@media (max-width: 360px)
{
	.Dialog_Bianca_Su_Foto {top: 130px; left: 20px; right: 20px;}
}
@media (max-width: 320px)
{
	.Dialog_Bianca_Su_Foto {top: 130px; left: 10px; right: 10px; padding: 10px}
	.Dialog_Bianca_Ampia {left: 1px; right: 1px;}
}