html {height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;}

html{height: 100%;}
body {height: 100%;margin:0; /*background-color: #fff;*/font-family: arial, sans-serif;}
figure {margin: 0;}

/* LAYOUT PAGINA STANDARD */
.wrapContent {display: flex;flex-direction: column;position: relative;width: 100%;height: auto;max-width: 1200px;margin: 0 auto;padding: 0;border-radius: 30px;/*background-color: #555;*//* box-shadow: 0 0 65px 25px #000; */} /* height = 0.631*w*/
.wrapContent > header {position: sticky; top: 0; width: 100%; height: 50px; margin: 0 auto; display: flex; align-items: center; z-index: 3; background: #1d1d1d; color: #fff; line-height: 50px;}
.wrapContent > footer {flex-shrink: 0;position: fixed;bottom:0;left:0;width: 100%;height: 50px;text-align: center;background: #000;/* max-width: calc(100% - 290px); */}
.wrapContent > main {width: 100%;height: auto; padding-bottom: 50px; /*background-color: #ddd;*/} /* height = 0.631*w*/

.wrapContent > header .logo {}
.wrapContent > header .logo img{max-width: 30%;max-height: 90%;}
.wrapContent > header .btn-open-menu {width: 40px;height: 40px;/*background-color:#fff;*/cursor:pointer;z-index:1;border-radius: 5px;background-position: 17px center;background-repeat:no-repeat;background-size:10px;}
.wrapContent > header .btn-open-menu > div {width: 70%; height: 3px; background-color: #fff;margin: 8px auto;transition: 0.3s;}

.wrapContent > main h1 {font-size: 1.5em; height: 50px; line-height: 50px; margin: 0; padding: 0 20px;  box-shadow: 0 -5px 13px 0px #000; position: sticky; top: 0; background-color: #fff; z-index: 4;}
.wrapContent > main h1 .action {float: right;}
.wrapContent > main h1 .action a {text-decoration: none; color: #000;}
/* /LAYOUT PAGINA STANDARD */

/* LAYOUT PAGINA OVERLAY (senza menu di navigazione) */
.wrapContentOverlay > main {width: 100%;height: auto; padding: 10px;}
/* LAYOUT PAGINA OVERLAY */




.overlay {position: fixed; left: 0;bottom: 0; width: 100%; max-width: 560px; height: calc(100vh - 50px); margin-bottom: -100vh; left: 50%; transform: translate(-50%); border-radius: 20px 20px 0 0; padding: 15px; background-color: #fff; z-index: 10; transition: 0.3s;}
.overlay > header {width: 100%; height: 50px; padding-top: 5px; border-bottom: 1px solid #ddd;}
.overlay > header .overlay-title {font-size: 1.3em; font-weight: bold;}
.overlay > header .overlay-close {float: right; cursor: pointer;}
.overlay > .overlay-body {width: 100%; height: calc(100% - 50px);}
.overlay iframe {width: 100%; height: 100%; border:0; padding:0; margin:0;}
.overlay.show {margin-bottom: 0;}
.overlay.show + .modal-mask{visibility: visible; opacity: 0.7;}
.overlayAjaxLoader.loaderContainer {width: 100%;height: 100%;position:absolute;left:0;background-color:rgba(255, 255, 255, 1.0);background-position:center;background-repeat:no-repeat;z-index:10000;/* display:none; */}
/*.loaderContainer.marketPlus {background-image:url(../../condivisi/grafica/loaderM+_circle_64x64.gif);}*/

.overlayAjaxLoader .loader,
.overlayAjaxLoader .loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
  margin-left: -5em;
}
.overlayAjaxLoader .loader {
  position: absolute; top: 40%; left: 50%;
 /*margin: 0 auto;*/
  font-size: 10px;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #9dbbcc;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.modal-mask {position: fixed; width: 100%; height: 100%; background-color: rgb(0,0,0); opacity: 0; z-index: 8; visibility: hidden; transition: 0.5s;}

a.btn {padding: 10px 20px; color: #fff; background-color: #007f5c; font-weight: bold; text-decoration: none;}

/* MENU DI NAVIGAZIONE */
.panel-menu {width: 290px; height:100%; position:fixed; top:0; left: 0; background-color:#fff; z-index:9; margin-left: -290px; box-shadow: none; transition: 0.3s;}
.panel-menu.open {margin-left: -0; box-shadow:0 0 25px -5px #333;}
.panel-menu .btn-close{float: right; padding: 5px 15px; font-size: 2.0em; font-weight: bold; cursor: pointer;}
/*
.panel-menu .btn-open-close {visibility: hidden; width: 40px;height: 40px;position:absolute;top: 25px; margin-right: -65px; right: 0;background-color:#fff;cursor:pointer;z-index:1;border-radius: 5px;background-position: 17px center;background-repeat:no-repeat;background-size:10px;}
.panel-menu .btn-open-close > div {width: 70%; height: 5px; background-color: #333;margin: 6px auto;transition: 0.3s;}
.panel-menu.open .btn-open-close {visibility: visible; top: 5px; margin-right: 0; transition: 0.3s;}

.panel-menu.open .btn-open-close > div:nth-child(1){-webkit-transform: rotate(-45deg) translate(-6px, 6px); transform: rotate(-45deg) translate(-6px, 6px);}
.panel-menu.open .btn-open-close > div:nth-child(2){opacity: 0;}
.panel-menu.open .btn-open-close > div:nth-child(3){-webkit-transform: rotate(45deg) translate(-9px, -9px); transform: rotate(45deg) translate(-9px, -9px);}
*/
.panel-menu .content-menu {}
.panel-menu .content-menu h2 {border-bottom: 1px solid #ccc; padding: 20px;}
.panel-menu .content-menu ul {list-style:none;}
.panel-menu .content-menu ul li {height: 40px;}
.panel-menu .content-menu ul li a {text-decoration:none; color:#555;font-size: 1.2em;}
.panel-menu.open + .modal-mask{visibility: visible; opacity: 0.7;}


.cardContainer {width: 100%;padding: 10px;padding-bottom: 30px;z-index: 2; background-color:#ddd; }
.card {position: relative; width: 100%; padding-bottom: 25%; background: #000; color: #fff; border-radius: 15px; box-shadow: 0 10px 20px -5px #000;}
.card .titolare{text-transform: uppercase;font-weight: bold; /* margin-left: 25px; */ font-size: 0.8em; position: absolute; bottom: 75px; right: 25px;}
.card figure.logo-affiliato {text-align:center; padding-top: 10px;}
.card figure.logo-affiliato img{padding: 10px 0; max-height: 100px; max-width: 90%;}
.card figure.logo-card {position: absolute;bottom: 20px;right: 20px;width: 60px;height: 39px;background-color: #00b180;line-height: 35px; font-size: 0.7em;text-align: center;border-radius: 10px;}


/*.card figure.barcode {position: absolute; bottom: 8%; width: 100%; height: 28%; margin: 0; background-color: #fff;  padding: 5px 0; text-align:center; }*/
/*.card figure.barcode img {width: auto; height: 100%; }*/
#qrcode-overlay {text-align: center;}
figure.qrcode {}
figure.qrcode img {max-width: 100%;}
figure.barcode {text-align:center; margin-top: 60px; }
figure.barcode img {max-width: 100%;}

.buttons {background-color: #fff; z-index:1;}
.buttons > ul{list-style: none;padding:0;margin:0;}
.buttons > ul > li {position: relative;height: 50px; line-height:50px; border-bottom: 1px solid #ccc; text-indent: 10px;}
.buttons > ul > li:after {content:"\203A"; position: absolute; right: 10px; top: 0;}
.buttons > ul > li > a {display: flex; align-items: center; justify-content: space-between; margin-right: 25px;width: 100%; height: 100%; text-decoration: none; color: #555; font-weight: bold;}

.buttons .punti {position: relative; width: 100px; height: 30px; margin-right: 25px; background-color: #ddd;}
.buttons .punti .progressBar {position: absolute; top:0; left:0; width: auto; height: 100%; background-color: #00b180;}
.buttons .punti .text {position: absolute; top:0; left:0; width: 100%; height: 100%; text-align: center;font-size: 0.85em;line-height: 30px;color: #000;}

#toggleQrCode {display: inline-block; width: 70px;height: 70px; background-color: #fff; border-radius: 50%; margin-top: -30px; position: absolute; margin-left: -37px;border: 4px solid; background-image: url(../../area-utenti/grafica/barcode-icon.png); background-repeat: no-repeat;background-position: center; background-size: 60%;}

.info {margin-top: 70px; padding: 0 10px; text-align: center;}
.info a {display: inline-block; vertical-align: bottom;}
.info a img {width: 100%;}
.partecipa-btn{display: block; margin: 0 auto;width: 150px;height: 150px;line-height:130px; font-weight: bold; background: #007f5c; color: #fff; border-radius: 50%; border: 10px solid #00b180;text-align: center;text-decoration: none;}

/* ANIMAZIONE BARRA AVANZAMENTO CIRCOLARE PUNTI */
.progress {}
.circle-wrap {
  margin: 0 auto;
  width: 150px;
  height: 150px;
  background: #e6e2e7;
  border-radius: 50%;
  position: absolute;
  margin-top: -100px;
  left: 50%;
  transform: translate(-50%);
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}

.circle-wrap .circle .mask .fill {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #00b180;
}

.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
  animation: fill ease-in-out 1s;
  /*transform: rotate(126deg);*/
}


.circle-wrap .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  text-align: center;
  line-height: 0.5;
  margin-top: 10px;
  margin-left: 10px;
  padding-top: 50px;
  position: absolute;
  z-index: 2;
  font-weight: 700;
  font-size: 2em;
}
/* /ANIMAZIONE BARRA AVANZAMENTO CIRCOLARE PUNTI */


/*.card .circle-wrap {position: absolute; left: 50%; transform: translate(-50%); margin: 0; bottom: -90px; color:#000;}*/


/* custom */

.cardContainer {background-color:#555; }
.card {color: #fff; background: linear-gradient(90deg, rgba(208,208,208,1) 0%, rgba(150,150,150,1) 50%, rgba(255,246,233,1) 100%);}




@media screen and (min-width: 0px) and (max-width: 460px) {
	
}
@media screen and (min-width: 461px) and (max-width: 768px) {
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
	.customScrollbar {scrollbar-width: thin;}
	.customScrollbar::-webkit-scrollbar {width: 7px;}
	.customScrollbar::-webkit-scrollbar-track {background: #f1f1f1;}
	.customScrollbar::-webkit-scrollbar-thumb { background: #888;}
	.customScrollbar::-webkit-scrollbar-thumb:hover { background: #000;}
}
@media only screen and (min-width: 1025px){
	.wrapContent > header .btn-open-menu{visibility: hidden;}
	.wrapContent {width: calc(100% - 290px); margin-left: 290px;}
	.panel-menu {margin-left: 0; box-shadow: none;/* background-color: #00b180;*/}
	/*.panel-menu .content-menu ul li a {color:#000;}*/
	.panel-menu .btn-close {visibility: hidden;}
	.wrapContent > footer {width: calc(100% - 290px);max-width: 1200px;left: 290px;}
	.overlay {left: 300px; width: calc(100% - 310px); max-width: 1180px; transform: none;}
	
	.customScrollbar {scrollbar-width: thin;}
	.customScrollbar::-webkit-scrollbar {width: 7px;}
	.customScrollbar::-webkit-scrollbar-track {background: #f1f1f1;}
	.customScrollbar::-webkit-scrollbar-thumb { background: #888;}
	.customScrollbar::-webkit-scrollbar-thumb:hover { background: #000;}
}