#lrp-widget{background-color:#f1f1f1;width:100%;padding:16px;border-radius:5px;font-size:.8rem; #lrp-points { display: grid; grid-template-columns: 45px auto auto; grid-gap: 10px; @media only screen and (max-width: 999px) { grid-template-columns: 45px auto; grid-template-rows: auto auto; } .lrp-info-wrapper, .lrp-value { display: flex; justify-content: left; align-items: center; } .lrp-value { font-weight: bold; justify-content: center; background-color: rgba(51,51,51,0.1); border-radius: 5px; text-align: center; @media only screen and (max-width: 999px) { grid-column: 1 / 3; height: 2.5rem; line-height: 2.5rem; } .pointsValue { padding-left: 5px; } } } #lrp-tier { margin-top:20px; padding-top:20px; border-top:1px solid #ddd; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; .tier-current-name { img { position: relative; top:-3px; margin-right: 5px; } .name { font-size: 1.2rem; font-weight: bold; } } .tier-next-name { font-size:1rem; font-weight: bold; text-align: right; img { position: relative; top:-3px; } } .tier-progress { grid-column: 1 / 3; margin-top: 10px; margin-bottom: 10px; progress { width:100%; -webkit-appearance:none; -moz-appearance:none; appearance: none; } progress::-webkit-progress-bar { background-color: rgba(51, 51, 51, .1);; border-radius:2px; height: 8px; } progress::-webkit-progress-value { background-color: #24b9d7; border-top-left-radius: 2px; border-bottom-left-radius: 2px; height: 8px; } } .tiers-all { a { font-weight: bold; } } .remaining { text-align: right; font-weight: bold; } }}#lrp-dialog-tiers{.tier-all { display: flex; flex-direction: row; gap: 20px; @media only screen and (max-width: 999px) { flex-direction: column; } .tier { text-align:center; background-color:rgba(51,51,51,0.05); padding: 20px; .name { font-size: 1.2rem; font-weight: bold; margin-bottom: 40px; color:rgba(0,0,0,0.8); @media only screen and (max-width: 999px) { margin-bottom: 0px; } } .icon { margin-bottom: 40px; position: relative; @media only screen and (max-width: 999px) { transform: scale(0.4); margin-bottom: 0px; } .icon-small { position: absolute; } .icon-small-1 { top: -10px; left: 30px; } .icon-small-2 { top: 5px; right:35px; } .icon-small-3 { right: 50px; bottom:5px; } } .ratio { font-size: 3rem; font-weight: bold; margin-bottom: 20px; @media only screen and (max-width: 999px) { font-size: 1.2rem; margin-bottom: 10px; } } .ratio-info { margin-bottom: 20px; @media only screen and (max-width: 999px) { margin-bottom: 10px; } } .ratio-range-info { display: block; width: 100%; line-height: 2rem; height: 2rem; border-radius: 8px; background-color: black; color: white; text-align: center; font-weight: bold; } } } .tier-Bronze { background-color: rgb(51, 51, 51, 0.05) !important; } .tier-Silver { background-color: rgb(234, 234, 234) !important; .ratio-range-info { background-color: rgb(249, 249, 249) !important; color: black !important; } } .tier-Gold { background-color: rgb(254, 248, 237) !important; .ratio-range-info { background-color: rgb(242, 185, 66) !important; color: black !important; } }}#lrp-widget-redeem{.lrp-icon-wrapper { margin-right: 10px; } .lrp-info-wrapper { color: black; }}#lrp-widget-redeem{margin:10px 0;padding:20px;background-color:rgba(51,51,51,.1)!important; #lrp-redeem-form-wrapper { display: grid; grid-template-columns: 100px auto auto; gap: 10px; margin-top: 10px; input { background-color: white; border-right: 0px; } .points-label { line-height: 30px; height: 40px; text-align: center; padding: 5px; margin-right: 10px; } }}#js-checkout-summary{ #lrp-points { .lrp-info-wrapper { display: block; } .lrp-value { display: none; } }}#module-loyaltyrewardpoints-customeraccount{ #lrp-referral { text-align: center; margin: 0 20px; padding-top: 20px; padding-bottom: 20px; .referral-link { background-color:antiquewhite; padding: 5px; } } #lrp-transactions { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc; h3 { font-size: 26px; margin-bottom: 20px; } table { width: 100%; td, th { padding: 10px; } th { background-color: #f7f7f7; } td { border-bottom: 1px solid #ddd; } } }}.lrp-dialog{border:none;border:1px solid #000;border-radius:20px;padding:60px 40px 40px;color:rgba(0,0,0,.8);position:relative;.close { position: absolute; top: 20px; right: 20px; font-size: 20px; cursor: pointer; }}