/* Normalize */
body { position: relative; display: block; margin: 0; padding: 0; overflow-x: hidden; overflow-y: visible; }
* { margin: 0; padding: 0; }
div { position: relative; display: block; margin: 0; padding: 0; }
ul { margin: 0; padding: 0; text-align: left; }
li { position: relative; margin: 0; padding: 0; text-align: center; display: inline-block; list-style: none; }
img { display: block; margin: 0; padding: 0; border-style: none; border: 0; }
svg { display: block; width: auto; }
p,
h1,
h2,
h3,
h4 { margin: 0; padding: 0; font-weight: normal; }

/* Base Page Styles */
html { font-size: var(--fs-base); /* height: 100%; */ }
body { /*min-width: 320px;  min-height: 100%; */ font-family: var(--ff-base); color: var(--primary-color); font-size: var(--fs-p); font-weight: var(--fw-base); line-height: var(--flh-base); }
body.noscroll { overflow: hidden; }

/* Characters */
p { font-size: var(--fs-p); line-height: 1.5rem; }
p:last-of-type { padding-bottom: 0; }
h1 { font-size: var(--fs-h1); line-height: 3.4rem; font-family: var(--ff-alt); }
h2 { font-size: var(--fs-h2); line-height: 2.2rem; font-weight: 400; }
h3 { font-size: var(--fs-h3); line-height: 1.8rem; font-weight: 400; }
h4 { font-size: var(--fs-h4); line-height: 1.7rem; font-weight: 400; }
sub, sup { font-size: 80%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.4em; }
sub { bottom: -0.25em; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.small { font-size: var(--fs-xx); line-height: 1rem; }
.smaller { font-size: var(--fs-xxx); line-height: 0.8rem; }
.lower { text-transform: none !important; }
.upper { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
strong { font-weight: 700; }
.medium { font-weight: 600; }
.light { font-weight: 300; }
hr { border: 1px solid var(--dialog-borders); height: 100%; }
.box-shadow { box-shadow: 0 3px 4px 0 rgb(0 0 0 / 8%); }

/* Links & Buttons */
a { outline: none !important; cursor: pointer; }
a:link, a:active, a:visited { color: var(--link-color); font-family: var(--ff-base); text-decoration: none; }
a:hover { color: var(--link-color-hover); text-decoration: none; }
a.disabled { cursor: default; pointer-events: none; }
a.bt, a.bt:active, a.bt:visited { display: inline-block; margin: 0; padding: 12px 18px; color: var(--bt-color); background: var(--bt-color-bck); min-width: 120px; max-width: inherit; width: auto; height: auto; border: 1px solid var(--bt-color-bck); border-radius: var(--bt-br); transition: 0.5s; text-transform: uppercase; text-decoration: none; text-align: center; font-size: var(--bt-fs); font-family: var(--ff-base); font-weight: var(--fw-base); }
a.bt:hover { color: var(--bt-color-hover); background: var(--bt-color-bck-hover); text-decoration: none; border: 1px solid var(--bt-color-bck-hover); }
a.bt.inverted { color: var(--bt-color-inverted); background: var(--bt-color-bck-inverted); border: 1px solid var(--bt-color-border-inverted); }
a.bt.inverted:hover { color: var(--bt-color-hover); background: var(--bt-color-bck-hover) !important; border: 1px solid white; }
a.bt.disabled { color: var(--bt-color-disabled); background: var(--bt-color-bck-disabled); cursor: default; pointer-events: none; border: 1px solid var(--bt-color-bck-disabled); }
a.bt.download { padding-right: 40px; background-position: 140px 10px; background-repeat: no-repeat; background-size: 20px; background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 461 645" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <g transform="matrix(1,0,0,1,-2816.98,-1547.21)"> <g transform="matrix(4.16667,0,0,4.16667,2647,0)"> <g transform="matrix(11.0415,0,0,11.0415,-36.4961,316.123)"> <path d="M12,14.414L7.293,9.707L8.707,8.293L12,11.586L15.293,8.293L16.707,9.707L12,14.414Z" style="fill:rgb(20,32,48);fill-rule:nonzero;"/> </g> </g> <g transform="matrix(4.16667,0,0,4.16667,2647,0)"> <g transform="matrix(11.0415,0,0,11.0415,-36.4961,316.123)"> <rect x="11" y="5" width="2" height="8" style="fill:rgb(20,32,48);"/> </g> </g> <g transform="matrix(4.16667,0,0,4.16667,2647,0)"> <g transform="matrix(11.0415,0,0,11.0415,-36.4961,316.123)"> <path d="M17,19L7,19L7,16L9,16L9,17L15,17L15,16L17,16L17,19Z" style="fill:rgb(20,32,48);fill-rule:nonzero;"/> </g> </g> </g> </svg>'); }
a.bt.download:hover { background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 462 646" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <g transform="matrix(1,0,0,1,-2816.48,-1546.71)"> <g transform="matrix(4.16667,0,0,4.16667,2647,0)"> <g transform="matrix(11.0415,0,0,11.0415,-36.4961,316.123)"> <path d="M12,14.414L7.293,9.707L8.707,8.293L12,11.586L15.293,8.293L16.707,9.707L12,14.414Z" style="fill:white;fill-rule:nonzero;stroke:white;stroke-width:0.02px;"/> </g> </g> <g transform="matrix(4.16667,0,0,4.16667,2647,0)"> <g transform="matrix(11.0415,0,0,11.0415,-36.4961,316.123)"> <rect x="11" y="5" width="2" height="8" style="fill:white;stroke:white;stroke-width:0.02px;"/> </g> </g> <g transform="matrix(4.16667,0,0,4.16667,2647,0)"> <g transform="matrix(11.0415,0,0,11.0415,-36.4961,316.123)"> <path d="M17,19L7,19L7,16L9,16L9,17L15,17L15,16L17,16L17,19Z" style="fill:white;fill-rule:nonzero;stroke:white;stroke-width:0.02px;"/> </g> </g> </g> </svg>'); }
button { display: inline-block; margin: 0; padding: 12px 18px; color: var(--bt-color); background: var(--bt-color-bck); min-width: 120px; max-width: inherit; width: auto; height: auto; border: 1px solid var(--bt-color-bck); border-radius: var(--bt-br); transition: 0.5s; text-transform: uppercase; text-decoration: none; text-align: center; font-size: var(--bt-fs); font-family: var(--ff-base); font-weight: var(--fw-base); cursor: pointer; }
button:hover { color: var(--bt-color-hover); background: var(--bt-color-bck-hover); border: 1px solid var(--bt-color-bck-hover); text-decoration: none;  }
a.bt.small { font-size: var(--fs-xx); padding: 6px 8px; min-width: inherit; }
button.red { color: var(--color-white); background: var(--failed-color); border: 1px solid var(--failed-color); }
button.new { color: var(--color-white); background: var(--amazon-color); border: 1px solid var(--amazon-color); }

button.typecheckbox { width: 22px; height: 22px; line-height: 20px; font-size: var(--form-fs); background-color: transparent; transition: .25s all ease; padding: 0; margin: 0 !important; border: var(--form-border); min-width: inherit; }
button.typecheckbox:hover { background-color: transparent; border: var(--form-border); }
button.typecheckbox:focus { position: relative; }
button.typecheckbox:focus:before { width: 20px; height: 20px; display: block; }
button.typecheckbox:focus:after { content: "\2714"; color: var(--form-ele); position: absolute; left: 4px; top: 0; }
button.typecheckbox:focus:before { content: ""; }
button.small { font-size: var(--fs-xx); padding: 6px 8px; min-width: inherit; }
button.inverted { color: var(--bt-color-inverted); background: var(--bt-color-bck-inverted); border: 1px solid var(--bt-color-border-inverted); }
button.inverted:hover { color: var(--bt-color-hover); background: var(--bt-color-bck-hover) !important; border: 1px solid white; }
button.nobtclass { display: inline-block; transition: .5s ease; background: transparent; margin: 0; padding: 0; min-width: inherit; max-width: inherit; width: auto; height: auto; border: none; border-radius: inherit; text-transform: inherit; text-decoration: none; text-align: center; }
.secondary-color { color: var(--secondary-color); }
.failed-color { color: var(--failed-color); }
.success-color { color: var(--success-color); }
.color-white { color: var(--color-white); }
.amazon-color { color: var(--amazon-color); }
.palette-color0 { background: #ffffff; }
.palette-color1 { background: var(--palette-color1); }
.palette-color2 { background: var(--palette-color2); }
.palette-color3 { background: var(--palette-color3); }

/* Images */
img { border: 0; height: auto !important; }
.img-responsive { display: block; width: 100%; max-width: initial; height: auto !important; margin: 0; padding: 0; }

/* Transitions */
.transition { transition: all 0.3s 0s ease-in-out; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1 }
::-webkit-scrollbar-thumb { background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Overlay */
#overlay { display: none; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.8); position: fixed; top: 0; left: 0; z-index: 11; }
#overlay.show { display: block; }
#overlay-main { display: none; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.8); position: fixed; top: 56px; left: 0; z-index: 1; }
#overlay-main.show { display: block; }

/* Loading */
.loading_layer { display: none; width: 100%; height: 100%; position: fixed; z-index: 100; max-width: var(--site-max-w); background-color: rgba(255, 255, 255, 1); }
.loading_layer .w { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin-left: -26px;  }
.loading_layer .w .lds-spinner { color: official; display: inline-block; position: relative; width: 80px; height: 80px; }
.loading_layer .w .lds-spinner div { transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite; }
.loading_layer .w .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3px; left: 37px; width: 6px; height: 18px; border-radius: 20%; background: var(--secondary-color); }
.loading_layer .w .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; }
.loading_layer .w .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; }
.loading_layer .w .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; }
.loading_layer .w .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; }
.loading_layer .w .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; }
.loading_layer .w .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; }
.loading_layer .w .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; }
.loading_layer .w .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; }
.loading_layer .w .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; }
.loading_layer .w .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; }
.loading_layer .w .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; }
.loading_layer .w .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }
@keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Errors */
.error { display: none; }
.error p { color: red !important; padding: 10px 0 0 0; }

/* Show/Hide Mobile */
.hideallmobile { display: block !important; }
.displayallmobile  { display: none !important; }
@media screen and (min-width: 1px) and (max-width: 750px) {
    .hideallmobile { display: none !important; }
    .displayallmobile  { display: block !important; }
}

.hidden { display: none; }

/* Spacers */
.spacer10 { height: 10px; display: block; }
.spacer20 { height: 20px; display: block; }
.spacer40 { height: 40px; display: block; }
.spacer60 { height: 60px; display: block; }

/* Fancybox */
.fancybox-wrapper { padding: 20px; text-align: center; }
.fancybox-wrapper.fancybox-modal { padding: 40px; margin: 0 auto; }
.fancybox-close-small { min-width: inherit !important; padding: 0 !important; right: -2px !important; }
.fancybox-close-small:hover { color: var(--color-white) !important; }
.fancybox-messaggio { overflow: hidden !important; }
.fancybox-messaggio .messageBox { padding-top: 10px; text-align: center; }
.fancybox-messaggio .messageBox button { display: inline-block; margin: 20px 10px; }

/* Custom Select Score Monitoring */
.custom-select-score {margin: 0 0 0 16px !important; border-radius: 0 !important;}



/*Tooltip*/
.tooltip { position: relative; display: inline-block; padding-left: 4px; }
.tooltip-button { border: none !important; display: inline-block; width: 14px; height: 14px; border-width: 0; border-radius: 100%; color: var(--color-white); font-weight: 400; background-color: var(--color-grey); font-size: 10px; line-height: 14px; text-align: center; padding: 0; min-width: inherit; vertical-align: super; }
.tooltip-content { transition: 240ms cubic-bezier(0, 1, 0.5, 1.25); }
.tooltip-content { z-index:2000; display: flex; justify-content: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: none; padding: 5px 10px; border-radius: 4px; position: absolute;/* bottom: -26px !important; */background-color:  var(--color-dark-grey); color: var(--color-white); will-change: opacity; opacity: 0; transform: translate3d(0, 3rem, 0) scale(0.2); pointer-events: none;}
.tooltip-content.right{right:0;}
.tooltip-content p { font-size: 10px !important; line-height: 18px;}
.tooltip-button:hover + [role=tooltip], .tooltip-button:focus + [role=tooltip] { border: none !important; opacity: 1; transform: translate3d(0, 0, 0) scale(1); pointer-events: auto; }