*{ margin:0; padding:0; border:0px; outline: none; transition: background-color 0.2s linear 0s, color 0.2s linear 0s;}
/* commentato da * line-height: 20px; */
html, body { height: auto; width: 100%; background: #ebebeb;}
body {padding: 0px; margin: 0px; font-family:Arial, Helvetica, sans-serif; }
a {cursor:pointer;text-decoration:none;color:inherit;-webkit-tap-highlight-color:#3399cc}
a:hover {cursor:pointer;text-decoration:none;}
.fixed {position:fixed !important;}
.relative {position:relative !important;}
.clearer, .clear, .cleared {clear:both;}
.content_320 {min-width:320px;margin:0 auto;position:relative;}

/* Sticky footer: mainwrapper fills viewport between header and footers */
.pagewrapper.content_320 {
    --ssm-header-offset: 107px; /* .headerwrapper 97px + shadow :after 10px */
    --ssm-footer-offset: 70px;   /* .footerwrapper.navigation 50px + .credits 20px */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
body._privacy .pagewrapper.content_320 {
    --ssm-header-offset: 0px;
}
.pagewrapper.content_320 > .mainwrapper {
    flex: 1 1 auto;
    min-height: calc(100vh - var(--ssm-header-offset) - var(--ssm-footer-offset));
    min-height: calc(100dvh - var(--ssm-header-offset) - var(--ssm-footer-offset));
}
.left {float:left;}
.right {float:right;}
.red {color:#FF0000;}
.yellow {color:#e46800;}
.green {color:#339900;}
p.title {font-family: 'Gafata';font-size: 16px;font-weight: 400;line-height: 20px;text-align: center;margin:10px;}
/* APPLICATION */
.headerwrapper {background: url(images/bkg_header.png) repeat-x;background-size: auto 100%; width: 100%; height: 97px;position:relative}
.headerwrapper:after {content:" ";display: block;background: url(images/shadowup.png) no-repeat;background-size: 100%; width: 320px; height: 10px;bottom:-1px;position:relative;margin:0 auto;z-index: 1}
.headerwrapper .logo {display: block;background: url(images/header.png) no-repeat;background-size:auto 100%;width: 320px;height: 97px;position:relative;margin:0 auto;}

.ajax_loader {display: none;position:absolute;width:24px;height: 24px;left:48%;top:48%;background: url(images/ajax-loader.gif) no-repeat;}
.headerbutton {height:27px;width:62px;position:absolute;top:27px;border:1px solid #FFF;font-weight: 700;letter-spacing: -1px;color:#FFF;border-radius: 3px;line-height: 27px;text-align: center;}
.headerbutton:hover {background: url(images/row_hover.png) repeat;text-decoration: none;color:#FFF;}
.headerbutton.back {left:10px;}
.headerbutton.logout {right:10px;}
.pagetitle {position:absolute;top:68px;left:0px;width: 100%;font-family: 'Gafata';font-size: 18px;font-weight: 400;line-height: 27px;height: 30px;color:#FFF;text-align: center;text-shadow: 0px -1px #663300;}

.summary {font-family: 'Gafata';font-size: 16px;font-weight: 400;line-height: 20px;text-align: center;padding:0px;display: block;position: relative;background: #E1E1E1;text-shadow: 0px -1px #FFF;border-top:1px solid #FFF;}
.summary.padded {padding:20px 0px;}
.summary:after {content:" ";display: block;background: url(images/shadowup.png) no-repeat;background-size: 100%; width: 320px; height: 10px;bottom:-11px;position:relative;margin:0 auto;z-index: 1}
.summary.padded:after {bottom:-31px;}

.loginmsg {padding:15px 0px;margin-bottom: 20px;}
.summary.loginmsg:after {bottom:-26px;}
.loginerror {text-align: center;margin-bottom: 5px;}
.userform {position: relative;}
.userform label{display: block;font-family: 'Gafata';font-size: 12px;width:80px;margin-left:20px;text-align: right;padding:10px;border:1px solid #CCC;border-right: none;border-radius: 10px 0px 0px 10px;margin-bottom: 10px;float:left;background: #e1e1e1;text-shadow: 0px -1px #FFF;text-transform: uppercase;white-space: nowrap;overflow: hidden;text-overflow:ellipsis}
.userform label.small {font-size: 10px;}
.userform input[type="text"], .userform input[type="email"], .userform input[type="password"]{display: block;font-family: 'Gafata';font-size: 16px;width:140px;box-shadow: none;-webkit-appearance: none;text-align: left;padding:11px 10px 10px;border:1px solid #CCC;border-left: none;border-radius: 0px 10px 10px 0px;margin-bottom: 10px;float:left;}
.centerwrapper {position:absolute;left:50%}
.center {position:relative;left:-50%}
.centermargin {margin:0 auto;width: 320px;}

.subviewsselectorwrapper {background: #FFF;position:relative}
.subviewsselectorwrapper:after {content:" ";display: block;background: #e1e1e1;position: absolute;bottom:-3px;left:0px;width: 100%;height: 2px;z-index: 1}
.subviewsselectorwrapper .scrollglitchfixer {position: absolute;z-index: 1;height: 1px;background: #FFF;width: 100%;bottom:-1px;}
.subviewsselector {list-style-type: none;display: block;height:40px;position:relative;}
.subviewsselector:after  {content:" ";display: block;background: url(images/shadowdown.png) no-repeat;border-bottom: 1px solid #FFF;background-size: 100%; width: 100%; height: 10px;bottom:-1px;position:absolute;z-index: 1}
.subviewsselector li {float:left;width:98px;margin:5px;position: relative;}
.subviewsselector li:first-child, .subviewsselector li:last-child {width:95px;}
.subviewsselector li a {position:absolute;display:block;line-height: 26px;float:left;width: 100%;text-align: center;border: 1px solid #E1E1E1;border-radius: 3px;font-family: 'Gafata';font-size: 14px;}
.subviewsselector li a:hover {background: #999;border:1px solid #999;color:#FFF;}
.subviewsselector li a.selected {background: #E1E1E1;border:1px solid #E1E1E1;text-shadow: 0px 1px #FFF;height:34px;z-index:2;box-shadow: 0px -2px 2px #CCC;border-radius: 3px 3px 0px 0px;border-top:1px solid #FFF;}

.mainwrapper {background: #FFF;overflow-y: scroll;overflow-x: hidden;-webkit-overflow-scrolling: touch;}
.mainwrapper.noscroll {overflow-y: visible;}
.mainwrapper .factorysummary { height: 70px;margin-top: 1px ;position:relative}
.mainwrapper .factorysummary:after  {content:" ";display: block;background: url(images/shadowdown.png) no-repeat;background-size: 100%; width: 100%; height: 10px;bottom:-10px;position:absolute;}
.mainwrapper .factorysummary div {text-align: center;font-family: 'Gafata';font-size: 50px;font-weight: 400;line-height: 60px;letter-spacing: -3px;text-shadow: 0px 1px #FFF;float:left;width:106px;height: 80px;background: #e1e1e1;border-right:1px solid #FFF;border-left:1px solid #9f9f9f;}
.mainwrapper .factorysummary div:first-child {border-left: none;width:105px;}
.mainwrapper .factorysummary div:last-child {border-right: none;width:105px;}
.mainwrapper .factorysummary div span {display:block;font-size: 11px;color:#666;font-weight: 100;line-height: 2px;letter-spacing: 0px;}

.mainwrapper .tableheaderwrapper {background:#1853a4;border-top:1px solid #FFF;}
.mainwrapper .tableheader, .mainwrapper .tablerow {display: block;position:relative;height: 20px;margin-bottom: 2px}
.mainwrapper .tableheader .column, .mainwrapper .tablerow .column  {float:left;border-right:1px solid #FFF;text-align: center;font-size: 10px;color:#FFF;}
.mainwrapper .tableheader .column:last-child, .mainwrapper .tablerow .column:last-child {border-right:none;}
.mainwrapper .tableheader .column.half {width:60px;}
.mainwrapper .tableheader .column.quarter {width:30px;}
.mainwrapper .tableheader .column.onethird, .mainwrapper .tablerow .column.onethird {width:106px;}
.mainwrapper .tableheader .column.two {width:196px;}
.mainwrapper .tableheader .column.twoandhalf {width:259px;}
.mainwrapper .tableheader .column.twoandquarter {width:228px;}
.mainwrapper .tablerow {height: 30px;}
.mainwrapper .tablerow:after  {content:" ";display: block;background: url(images/shadowup.png) no-repeat;background-size: 100%; width: 100%; height: 20px;bottom:-20px;position:absolute;}
.mainwrapper .tablerow .column {background: #FFF;color:#333;font-size: 14px;height:30px;line-height: 30px;}

.mainwrapper .filterstatistics {position:relative;height: 50px;}
.mainwrapper .filterstatistics:after  {content:" ";display: block;background: url(images/shadowdown.png) no-repeat;background-size: 100%; width: 100%; height: 10px;bottom:-10px;position:absolute;}
.mainwrapper .filterstatistics div {text-align: center;font-family: 'Gafata';font-size: 14px;font-weight: 400;line-height: 20px;letter-spacing: -1px;text-shadow: 0px 1px #FFF;float:left;width:105px;margin-top:5px;height: 50px;background: #e1e1e1;border-right:1px solid #FFF;border-left:1px solid #9f9f9f;}
.mainwrapper .filterstatistics div:first-child {border-left: none;}
.mainwrapper .filterstatistics div:last-child {border-right: none;}
.mainwrapper .filterstatistics div select {width: 80%;}
.mainwrapper .filterstatistics div label {display: block;}
.mainwrapper canvas.statistics {width:320px;height:20px;}

.machinecard, .positioncard, .logcard, .usercard, .productcard {height:80px;position:relative;display: block;}
.machinecard:after, .positioncard:after, .logcard:after, .usercard:after, .productcard:after {content:" ";display: block;background: url(images/shadowup.png) no-repeat;background-size: 100%; width: 100%; height: 10px;bottom:-11px;position:absolute;z-index: 1}
.machinecard:hover {background: url(images/row_hover.png) repeat;}
.machinecard .efficiency {height:60px;width: 60px;float:left;position:relative;margin-top:10px;}
.machinecard .efficiency canvas {}
.machinecard .efficiency p {height:60px;line-height: 60px;width: 60px;font-family: 'Gafata';font-size: 20px;font-weight: 400;text-align: center;display: block;position:absolute;top: 0px;left:0px;}
.machinecard .efficiency p.full {font-size: 18px;letter-spacing: -2px;}
.machinecard .icon {height:46px;width: 46px;float:left;margin-right: 10px;overflow: hidden;border-radius: 25px;margin-top:16px;background: #FFF;border:2px solid #CCC}
.machinecard .icon img {width: 100%;margin-top:2px}
.machinecard .name {height:60px;overflow:hidden;width: 200px;float:left;}
.machinecard .name p {text-overflow:ellipsis;overflow:hidden;width: 180px;white-space: nowrap;line-height: 60px;font-family: 'Gafata';font-size: 23px;font-weight: 400;}
.machinecard .model, .machinecard .positions, .machinecard .orders {font-family: 'Gafata';width: 60px;height:20px;position: absolute;top:45px;overflow: hidden;font-size:10px;}
.machinecard .model span, .machinecard .positions span, .machinecard .orders span {display:block;float:left;font-size: 9px;line-height: 9px;padding:2px 4px;text-transform: uppercase;border:1px solid #CCC;}
.machinecard .model span.label, .machinecard .positions span.label, .machinecard .orders span.label {background: #CCC;color:#FFF;border-radius: 2px 0px 0px 2px;}
.machinecard .model span.value, .machinecard .positions span.value, .machinecard .orders span.value {background: #FFF;color:#999;border-radius: 0px 2px 2px 0px;}
.machinecard .positions, .machinecard .orders {width: 70px;top:48px;}
.machinecard .positions span.value {width: 28px;text-align: center;}
.machinecard .orders span.value {width: 14px;text-align: center;}
.machinecard .model {left:120px;}
.machinecard .positions {left:175px;}
.machinecard .orders {left:245px;}
.machinecard .action, .positioncard .action {height:80px;width: 320px;position: absolute;top:0px;left:0px;}

.positioncard {background: url(images/bkg_position.png) no-repeat 0px 2px;background-size: 100%;height:60px;position: relative;}
.positioncard .number {height: 60px;width: 40px;margin-left: 20px;font-family: 'Gafata';font-size: 26px;line-height: 60px;color:#FFF;text-align: center;}
.positioncard canvas {position:absolute;top:7px;left:65px;width:245px;height:50px; }
.positioncard .efficiency, .positioncard .progress {position:absolute;top:0px;height: 60px;width: 30px;font-family: 'Gafata';font-size: 18px;line-height: 63px;color:#FFF;text-align: center;}
.positioncard .efficiency {left:75px;}
.positioncard .action {height:60px;}

.logcard, .usercard {height: 40px;position:relative;}
.logcard div, .usercard div {float:left;line-height: 40px;display: block;font-family: 'Gafata';}
.logcard .date {width: 60px;font-size: 10px;line-height: 14px;padding-top: 6px}
.logcard .position {width: 30px;text-align: center;font-weight: 700;}
.logcard .description {width: 200px;height:28px;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;}

.usercard .username {width: 180px;line-height: 40px;padding:0 10px;font-weight: 400;font-size: 16px;white-space: nowrap;overflow: hidden;text-overflow:ellipsis}
.usercard .role, .usercard .logins, .usercard .activity {width: 30px;text-align: center;}
.usercard .role {width: 60px;}
.usercard .activity {color:#FFCC00;cursor:pointer;}
.usercard .activity.active {color:#84B384;}
.usercard .activity.notmodifiable {color:#CCC;}

.mainwrapper .positionsummary { height: 70px;margin-top: 1px ;position:relative}
.mainwrapper .positionsummary:after  {content:" ";display: block;background: url(images/shadowdown.png) no-repeat;background-size: 100%; width: 100%; height: 10px;bottom:-10px;position:absolute;}
.mainwrapper .positionsummary div {text-align: center;font-family: 'Gafata';letter-spacing: -3px;text-shadow: 0px 1px #FFF;float:left;width:106px;height: 80px;background: #e1e1e1;border-right:1px solid #FFF;border-left:1px solid #9f9f9f;}
.mainwrapper .positionsummary div:first-child {border-left: none;width:105px;}
.mainwrapper .positionsummary div:last-child {border-right: none;width:105px;}
.mainwrapper .positionsummary div span {display:block;}
.mainwrapper .positionsummary div span.value {font-size: 50px;font-weight: 400;line-height: 60px;}
.mainwrapper .positionsummary div span.label {font-size: 11px;color:#666;font-weight: 100;line-height: 2px;letter-spacing: 0px;}
.mainwrapper .positionstatus {display: block;width: 100%;height:25px;background: #FFF;position:relative;text-align: center;line-height: 25px;font-family: 'Gafata';text-shadow: 0px -1px #FFF;}
.mainwrapper .positionstatus.ok {}
.mainwrapper .positionstatus.ko {}
.mainwrapper .positionstatus:after  {content:" ";display: block;background: url(images/shadowdown.png) no-repeat;background-size: 100%; width: 100%; height: 10px;bottom:0px;position:absolute;}

.footerwrapper {background: #111;color:#CCC;text-align: center;font-size: 10px;height:20px;}
.footerwrapper.navigation {height:50px;background: #1853a4;}
.footerwrapper ul {list-style-type: none;width: 320px;margin: 0px auto;display: inline-block;}
.footerwrapper ul li {float:left;display: block;border-right: 1px solid #FFF;width:32%;position:relative;}
.footerwrapper ul li:last-child {border-right: none;}
.footerwrapper ul li a {line-height:50px;width: 100%;display: block;font-family: 'Gafata';font-size: 16px;color:#FFF;}
.footerwrapper ul li a:hover, .footerwrapper ul li a.selected {color:#1853a4;background:#FFF;}


.newuserform {margin-top:20px;}
ul.error {list-style-type: none;margin-bottom: 20px;}
ul.error li {text-align: center;color:#FF0000;font-size: 11px;line-height: 10px;margin-bottom: 5px;}

/* SSM */
.mainarea {position: relative;}
.insightlabel {position:absolute;top:100px;width:106px;text-align: center;font-family: 'Gafata';text-shadow: 0px -1px 0px #FFF}
.insightlabel.calculators {position:relative;top:auto;}

.calculatorgrid {width:320px;margin:0 auto;}
.calculatorgrid-row {overflow:hidden;margin-top:20px;}
.calculatorgrid-row:after {content:" ";display:block;clear:both;}
.calculatorgrid-item {float:left;width:33.33%;text-align:center;display:block;color:inherit;}
.calculatorgrid-item img {width:95px;height:95px;display:block;margin:0 auto;}
.insightgrid .calculatorgrid-item img {width:106px;height:auto;max-height:136px;}
.insightgrid .insightlabel {width:106px;margin:0 auto;}

.productcard {height: 60px;}
.productcard:before {content:"❱";position:absolute;right:20px;bottom:37%;font-size: 26px;}

.productcard .name {font-family: 'Gafata';font-size: 16px;font-weight: 400;margin-top:5px;padding:0px 10px;}
.productgroup {margin-top:30px !important;padding:10px 0px;border-radius: 4px;color:#FFF;}
.productgroup.air-covering {background-color:rgb(155,156,211)}
.productgroup.air-texturing {background-color:rgb(170,145,201)}
.productgroup.assembly-winding {background-color:rgb(141,175,229)}
.productgroup.draw-winding {background-color:rgb(213,111,141)}
.productgroup.dye-packages-rewinding {background-color:rgb(181,214,183)}
.productgroup.preparation-processes, .productgroup.conventional-covering {background-color:rgb(142,206,215)}
.productgroup.sewing-thread-finish-winding {background-color:rgb(251,233,108)}
.productgroup.singeing {background-color:rgb(223,152,116)}
.productgroup.false-twist-texturing {background-color:rgb(231,170,194)}

.productcard .category, .productcard .subcategory {font-family: 'Gafata';font-size: 13px;padding:0px 20px;}

#ccm-layout-wrapper-8 {margin-top:20px;}
#ccm-layout-wrapper-10 {margin-bottom:20px;}
.calculator {padding: 10px 10px 20px;}
.calculator label {display: block;}
.calculator input[type="text"], .calculator select {text-align: center;font-family: 'Gafata';font-size: 18px;margin:5px 0px 10px;;border:1px solid #CCC;border-radius: 3px;padding:7px 5px;width:285px;}
.calculator select {width:295px;}
.calculator .column {width:130px;margin:0px 8px;float:left;}
.calculator .column .columntitle {text-align: center;text-transform: uppercase;font-family: 'Gafata';}
.calculator .column input[type="text"]{width:120px;font-size: 14px;}
.calculator .column label{font-size: 10px;}

.calculator input[type="button"] {padding: 10px 20px;background: #00cc00;font-family: 'Gafata';font-size: 13px;color:#FFF;border-radius: 3px;margin:10px auto;display:block;cursor:pointer;line-height:16px;}
.calculator .headresult, .calculator .unit, .calculator .result {text-align: center;font-family: 'Gafata';font-size: 14px;color:#666;line-height: 20px;}
.calculator .result {font-size: 40px;color:#333;line-height: 50px;}
.calculator .result span {display: block;}

.splashimage {position: relative; height: 220px;}
.mainbuttons {font-size: 0px;}
.mainbuttons .button {margin:0px 1px 20px;float:left;width:68px;font-size: 12px;clear:none;width:95px; padding:0px;}
.mainbuttons .button:first-child {margin-left:16px;}

.branchlist {margin-bottom:30px;}
.branchlist p {margin-left:30px;}
.branchlist .title.branch {margin-top:20px;margin-left:10px;text-align: left;font-weight: 700;}
.branchlist a {color:#3399cc;font-weight: 700;}