@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

:root {
  --body-fonts: 'Open Sans', serif;
  --white-color: #FFFFFF;
  --sidebar-bg: #000;
  --sidebar-bg-content: #3e3d3d;
  --sidebar-bg-border: #999;
  --sidebar-bg-hover: #3e3d3d;
  --link: #000;
  --bg-button:#DDD;
  --bg-button-text: #333;
  --bg-button-text-hover: #FFF;
  --bg-button-primary: #999;
  --bg-button-primary-hover: #222;
  --footer-bg: #444;
  --footer-text: #AAA;
}

* { border:0px; list-style:none; margin:0px; padding:0px; outline:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html { font-size: 100%; }
body,td,th { font-family: 'Open Sans', sans-serif; font-size: 13px; color: #222; }
body { margin:0px; background:#f0f0f0; }
h1, h2, h3 { margin:0px; color:#222; }
h2 { margin-bottom:20px; font-size:17px; }
a { text-decoration:none; color:var(--link); outline:none; font-weight:bold; }
a:hover { text-decoration:none; color:#333; }
img.scale { width:100%; height:auto; }
form .row { margin-bottom:10px; }
input, select, button, .btn { height:38px; line-height:20px; }
input, select, textarea { width:100%; font-family: 'Open Sans', sans-serif; font-size: 14px; color: #333333; background:#FFF; border:1px solid #BBB; padding:7px; border-radius:1px; transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; }
:focus { border-color:#888; }
.btn i { margin-right:5px; }
.btn:hover { text-decoration:none; }
.btn-search, .btn-close { background:none; width:50px; border:0px; color:#333; }
.btn-search:hover, .btn-close:hover { opacity:0.5;  background:none; color:#000; }
input[type=submit], input[type=button], button, .btn { font-family: 'Open Sans', sans-serif; border:0px; border-bottom:2px solid #333; cursor:pointer; padding:6px 15px; text-align:center; display:inline-block; font-weight:bold; background:var(--bg-button); color:var(--bg-button-text); font-size:13px; line-height: 26px; }
input[type=submit]:hover, input[type=button]:hover, .btn:hover, button:hover, a.btn:hover { background:#CCC; color:var(--bg-button-text-hover); }
input.btn-selected, button.btn-selected, a.btn-selected { background:var(--bg-button-primary); color:#FFF; }
input.btn-selected:hover, button.btn-selected:hover, a.btn-selected:hover { background:var(--bg-button-primary-hover); color:#FFF; }
input[type=checkbox] { height:auto; width: auto; }
label.error { width:0px; height:0px; display: none; font-size:0px; visibility:hidden; }
input.error, textarea.error, select.error { border-color:#FF0000; color:#FF0000; background:#FDE6E7; }
.label { text-align:right; padding-right:10px; padding-top:10px; }
.label_results { padding:10px 0; }
.status_1 { color:#66CC00; font-size:10px; padding-top:12px; }
.status_2 { color:#CC0000; font-size:10px; padding-top:12px; }
.checkbox_list ul { display:grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding:5px 10px; background:#FFF; border-radius:1px; border-bottom:1px solid #DDD; overflow-y:auto; max-height:150px; }
.flex { display:flex; align-items: center; justify-content: center; }
.nowrap { white-space:nowrap; }

table { width:100%; border-collapse: collapse; background:#FFF; }
thead td { padding: 10px 20px; font-weight:bold; border-bottom:1px solid #DDD; }
tbody td { padding: 10px 20px; vertical-align:top; border-bottom:1px solid #DDD; }
tbody td.icon i { font-size:14px; margin-right:5px;}
tbody td.icon { white-space:nowrap; }
tbody td a { display:inline-block;  }
tbody td img { border:1px solid #DDD; height:50px; width:50px; }
tbody tr:hover td { background:#f9f9f9; }
tbody tr.macro td { background:#888; color:#FFF; }
tbody tr.macro td a { color:#FFF; }

header { background:#FFF; color:#000; padding: 12px 20px; height:55px; position:fixed; top:0; left:200px; right:0; border-bottom:1px solid #DDD; z-index:222; }
header h3 { text-align:right; font-size:20px; display:inline-block; margin-right:20px; font-weight:normal; }
header .btn { height:30px; line-height: 20px; padding: 5px 15px; }
header i { font-size: 24px; position:absolute; right:10px; top:0px;  }
.box-account span { position:absolute; top:5px; right:50px; font-size:12px; }
.menu-icon { display:none; }
header2 .box-account { font-size:12px; text-align:right; padding-right:60px; position:relative; }
.grid-header { display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-header div { position:relative; }

footer { position:fixed; bottom:0; left:200px; right:0; background:var(--footer-bg); color:var(--footer-text); font-size:11px; padding: 4px 20px; }

sidebar { font-size:13px; position:fixed; z-index:2; width:200px; top:0px; left:0; bottom:0; overflow-y:auto; padding:30px 0; background:var(--sidebar-bg); color:#EEE; }
sidebar .menu { padding:10px 20px 10px 50px; position:relative; cursor:pointer;  }
sidebar .menu:hover, sidebar .menu.open { background:var(--sidebar-bg-hover); }
sidebar .menu i { position:absolute; left:25px; top:13px; font-size:12px;  }
sidebar .acc-title .accordsuffix i { position:absolute; left:auto; right:20px; top:13px; font-size:14px; }
sidebar .acc-content { border-left:4px solid var(--sidebar-bg-border); background:var(--sidebar-bg-content); }
sidebar .acc-content li { padding:10px 10px 10px 47px; display:block; }
sidebar a { color:#EEE; }
sidebar a:hover { color:#FFF; text-decoration:none; }

main { padding: 70px 20px 20px 220px; width:100%; }
main.center { padding: 100px; width:100%; }

.add { text-align:right; }
.box-header-tool { display:grid; grid-template-columns:auto 100px; gap:20px; }
.box-header-tool input, .box-header-tool select, .box-header-tool .btn { width:100%; }
.box-search { width:100%; display:grid; grid-template-columns:repeat(6, 1fr); gap: 10px; margin-bottom:20px; }



.scheda { margin-bottom: 40px; padding:20px; background:#FFF;  box-shadow: 0 1px 1px 0 var(--default-color-shadow-medium,rgba(0,28,36,.3)),1px 1px 1px 0 var(--default-color-shadow-side,rgba(0,28,36,.15)),-1px 1px 1px 0 var(--default-color-shadow-side,rgba(0,28,36,.15)); }
.scheda h3 { border-bottom:1px solid #CCC; margin-bottom:20px; padding-bottom:10px; }
.scheda label { display:block; padding: 7px 0; font-size:13px; color:#333; font-weight:bold; }
.scheda .row { margin-bottom:10px; }
.scheda .image { position:relative; padding-left:95px; height:80px; }
.scheda .image img { position:absolute; top:0; left:0; border:1px solid #DDD; border-radius:2px; width:75px; height:75px; }
.scheda .row.buttons {  margin: 40px 0 20px 0; }
.scheda .row.buttons input { padding-left:40px; padding-right:40px; }
.scheda li label { padding:2px 0; }
.scrollframe { height:80px; background:#EEE; border:1px solid #f1f5fa; padding:5px; overflow-y:auto; }

.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-6 { display:grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }

.login { width:350px; margin:0 auto; }

.table_list { box-shadow: 0 1px 1px 0 var(--default-color-shadow-medium,rgba(0,28,36,.3)),1px 1px 1px 0 var(--default-color-shadow-side,rgba(0,28,36,.15)),-1px 1px 1px 0 var(--default-color-shadow-side,rgba(0,28,36,.15)); }
.table_list img { width:75px; height:75px; }
.pagination { padding: 20px 20px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pagination .pages { text-align:right; }
.pagination .pages a, .pagination .pages b { display:inline-block; padding: .5rem .75rem; border:1px solid #BBB; margin-left: -1px; }


/* begin css tabs */
#tabnav { border-bottom: 1px solid #CCC; margin-bottom:20px; font-weight:bold;  }
#tabnav li { display:inline-block; list-style-type: none;  }
body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4, body#tab5 li.tab5, body#tab6 li.tab6, body#tab7 li.tab7, body#tab8 li.tab8, body#tab9 li.tab9, body#tabGallery li.tabGallery { border-bottom: 3px solid #222;  }
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a, body#tab5 li.tab5 a, body#tab6 li.tab6 a, body#tab7 li.tab7 a, body#tab8 li.tab8 a, body#tab9 li.tab9 a, body#tabGallery li.tabGallery a { display:block; position: relative; top: 0px; padding: 7px 15px; }
ul#tabnav li a { padding: 7px 15px; color: #000; margin-right: 0px; text-decoration: none; }
ul#tabnav a:hover { color:#999; }


#print { margin:20px; }
#print .print_nav { text-align:right; margin-bottom:20px; }
#print .print_nav a { text-transform:uppercase; font-size:11px; margin-left:10px; }
#print .print-header p { margin: 5px 0;}
#print table { width:100%; }

@media print {
	#print .print_nav { display:none; }
	#print { margin:0px; font-size:9px; }
	#print td, #print th { font-size:9px; }
	#print table, #print td, #print th { padding:2px 5px; }
}