.account-loyalty {margin-bottom: 30px; float: left; max-width: 700px; width: 100%; padding-left: 40px; box-sizing: border-box;}
.account-loyalty h2 {font-size: 32px; margin-bottom: 15px; font-weight: 700;}
.account-loyalty h3 {font-size: 20px; font-weight: normal;margin: 1px 0;}
.account-loyalty .row {padding: 15px 0; margin:0; border-top: 1px #f2f2f2 solid; float: left; width: 100%;}
.account-loyalty .row .row-left {width: 410px; float: left;}
.account-loyalty .row .row-right {width: 70px; float: left; position: relative; z-index: 1;}
.account-loyalty .row1 h3 {color: #ff860a;}
.account-loyalty .row2 h3 {color: #ac0736;}
.account-loyalty .row3 h3 {color: #75ad9f;}
.account-loyalty .row4 h3 {color: #3D93FF;}
.account-loyalty .row5 h3 {color: #29B79D;}
.account-loyalty .legend {color: #a6a6a6; margin-bottom: 20px; opacity: 0;}
.account-loyalty .legend.loading {visibility: hidden;}
.account-loyalty .metric.background {}
.account-loyalty .metric-wrapper {position: relative;}
.account-loyalty .row1 .metric.background {width: 415px; height: 40px; background: url('../images/loyalty-sprite.png') 0 0 repeat-x; position: relative;}
.account-loyalty .row1 .metric.layer {height: 30px; background: url('../images/loyalty-sprite.png') 0 -46px repeat-x; position: absolute; left: 0; top: 0; max-width: 388px;}
.account-loyalty .row2 .metric.background {width: 388px; height: 37px; background: url('../images/loyalty-sprite.png') 0 -161px repeat-x; position: relative;}
.account-loyalty .row2 .metric.layer {height: 37px; background: url('../images/loyalty-sprite.png') 0 -100px repeat-x; position: absolute; left: 0; top: 0;}
.account-loyalty .row3 .metric.background {width: 388px; height: 37px; background: url('../images/loyalty-sprite.png') 0 -288px repeat-x; position: relative;}
.account-loyalty .row3 .metric.layer {height: 37px; background: url('../images/loyalty-sprite.png') 0 -218px repeat-x; position: absolute; left: 0; top: 0;}
.account-loyalty .row4 .metric.background {width: 388px; height: 37px; background: url('../images/loyalty-sprite.png') 0 -546px repeat-x; position: relative;}
.account-loyalty .row4 .metric.layer {height: 37px; background: url('../images/loyalty-sprite.png') 0 -486px repeat-x; position: absolute; left: 0; top: 0;}
.account-loyalty .row5 .metric.background {width: 390px; height: 37px; background: url('../images/loyalty-sprite.png') 0 -680px repeat-x; position: relative;}
.account-loyalty .row5 .metric.layer {height: 37px; background: url('../images/loyalty-sprite.png') 0 -620px repeat-x; position: absolute; left: 0; top: 0;}

.account-loyalty .row .row-right .metric-big {width: 70px; height: 70px; background: #e2e3e4; border-radius: 50%; text-align: center; line-height: 70px; color: #a6a6a6; font-size: 30px;}
.account-loyalty .curved-text {margin-top: 30px; width: 70px; text-align: center; white-space: nowrap; font-size: 14px; color: #a6a6a6;}
.account-loyalty .row1 .curved-text {margin-top: 20px !important;}
.account-loyalty .row1 .active .curved-text {color: #ff860a;}
.account-loyalty .row2 .active .curved-text {color: #ac0736;}
.account-loyalty .row3 .active .curved-text {color: #75ad9f;}
.account-loyalty .row4 .active .curved-text {color: #3D93FF;}
.account-loyalty .row5 .active .curved-text {color: #29B79D;}
.account-loyalty .row1 .active .metric-big {background: #ff860a;}
.account-loyalty .row2 .metric-big {background-image: url('../images/loyalty-sprite.png') !important; background-repeat: no-repeat !important; background-position: -68px -345px !important;}
.account-loyalty .row2 .active .metric-big {background: #ac0736; background-position: 15px -345px !important;}
.account-loyalty .row3 .metric-big {background-image: url('../images/loyalty-sprite.png') !important; background-repeat: no-repeat !important; background-position: -71px -407px !important;}
.account-loyalty .row3 .active .metric-big {background: #75ad9f; background-position: 15px -407px !important;}
.account-loyalty .row4 .metric-big {background-image: url('../images/loyalty-sprite.png') !important; background-repeat: no-repeat !important; background-position: -238px -346px !important;}
.account-loyalty .row4 .active .metric-big {background: #3D93FF; background-position: -158px -346px !important;}
.account-loyalty .row5 .metric-big {background-image: url('../images/loyalty-sprite.png') !important; background-repeat: no-repeat !important; background-position: -239px -407px !important;}
.account-loyalty .row5 .active .metric-big {background: #29B79D; background-position: -159px -407px !important;}

.account-loyalty .row1 .metric1-sum1 {position: absolute; left: 0; top: 20px; color: #a6a6a6;}
.account-loyalty .row1 .metric1-sum2 {position: absolute; top: 20px; color: #ff860a; display: none;}
.account-loyalty .row1 .metric1-sum3 {position: absolute; right: 10px; top: 20px; color: #a6a6a6;}
.account-loyalty .metric2 .line-inactive {position: absolute; left: 4%; top: 17px; height: 3px; background: #e2e3e4; max-width: 106%; width: 110%;}
.account-loyalty .metric2 .line-active {position: absolute; left: 4%; top: 17px; height: 3px; background: #e90f63; max-width: 100%;}
.account-loyalty .metric3 .line-inactive {position: absolute; left: 2%; top: 20px; height: 3px; background: #e2e3e4; max-width: 104%; width: 110%;}
.account-loyalty .metric3 .line-active {position: absolute; left: 2%; top: 20px; height: 3px; background: #8dcebb; max-width: 100%;}
.account-loyalty .metric4 .line-inactive {position: absolute; left: 2%; top: 20px; height: 3px; background: #e2e3e4; max-width: 104%; width: 110%;}
.account-loyalty .metric4 .line-active {position: absolute; left: 2%; top: 20px; height: 3px; background: #3D93FF; max-width: 100%;}
.account-loyalty .metric5 .line-inactive {position: absolute; left: 2%; top: 20px; height: 3px; background: #e2e3e4; max-width: 104%; width: 110%;}
.account-loyalty .metric5 .line-active {position: absolute; left: 2%; top: 20px; height: 3px; background: #8dcebb; max-width: 100%;}
.account-loyalty .row-items {margin: 20px 0 0; float: left; width: 100%;}
.account-loyalty .row-items .row-item {background: #ff860a; position: relative; max-width: 455px; margin-bottom: 20px; float: left; width: 100%; margin-right: 50px; cursor: pointer; -webkit-transition: all 150ms ease; -moz-transition: all 150ms ease; -ms-transition: all 150ms ease; -o-transition: all 150ms ease; transition: all 150ms ease;}
.account-loyalty .row-items .row-item span {color: #fff; padding: 0 10px;}
.account-loyalty .row-items .row-item .right-bubble {position: absolute; right: -8px; top: -8px; border: 2px #fff solid; border-radius: 50%; text-align: center; color: #fff; background: #FF860A; width: 36px; height: 36px; box-sizing: border-box; line-height: 34px; font-weight: 600;  -webkit-transition: all 150ms ease; -moz-transition: all 150ms ease; -ms-transition: all 150ms ease; -o-transition: all 150ms ease; transition: all 150ms ease;}
.account-loyalty .row-items .row-item-link {float: left; color: #ff860a; text-decoration: underline; cursor: pointer;}
.account-loyalty .row-items .row-item-link:hover {text-decoration: none;}
.account-loyalty .row-items .row-item:hover {box-shadow: 1px 1px 11px rgba(0, 0, 0, 0.65);}
.account-loyalty .row-items .row-item:hover .right-bubble {box-shadow: 1px 1px 11px rgba(0, 0, 0, 0.65);}
.account-loyalty .row2 .row-items .row-item-link {color: #ac0736;}
.account-loyalty .row3 .row-items .row-item-link {color: #75ad9f;}
.account-loyalty .row4 .row-items .row-item-link {color: #3D93FF;}
.account-loyalty .row5 .row-items .row-item-link {color: #29B79D;}

.account-loyalty .row2 .row-items .row-item {background: #ac0736;}
.account-loyalty .row2 .row-items .row-item .right-bubble {background: #ac0736 url('../images/loyalty-sprite.png'); background-position: 5px -199px !important; background-size: 220px;}
.account-loyalty .row3 .row-items .row-item {background: #75ad9f;}
.account-loyalty .row3 .row-items .row-item .right-bubble {background: #75ad9f url('../images/loyalty-sprite.png'); background-position: 5px -234px !important; background-size: 220px;}
.account-loyalty .row4 .row-items .row-item {background: #3D93FF;}
.account-loyalty .row4 .row-items .row-item .right-bubble {background: #3D93FF url('../images/loyalty-sprite.png'); background-position: -313px -199px !important; background-size: 220px;}
.account-loyalty .row5 .row-items .row-item {background: #29B79D;}
.account-loyalty .row5 .row-items .row-item .right-bubble {background: #29B79D url('../images/loyalty-sprite.png'); background-position: -304px -227px !important; background-size: 214px;}

.loyalty-popup {display: none; position: fixed; /*max-width: 590px; width: 100%;*/ width: 420px; margin: auto; top: 5%; background: rgba(0, 0, 0, 0.4); border-radius: 5px; z-index: 1001; max-width: 560px; left: 0; right: 0; box-sizing: border-box; padding: 10px;}
.loyalty-popup .close { opacity:1; z-index:1111; width: 33px; height: 33px; background: url('../images/apollo-sprite.png') -52px -321px no-repeat; position: absolute; right: -12px; top: -12px; cursor: pointer;}
.loyalty-popup .qr {position: absolute; top: 150px; text-align: center; width: 400px;}
.loyalty-popup .qr canvas {border: 5px #fff solid;}
.loyalty-popup .nr {position: absolute; top: 458px; left: 147px; font-size: 35px; color: #000;}

.in-iframe #main-header { display: none; }
.in-iframe #hs-beacon { display: none; }