.tier-system-box{background-color:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 0 20px 1px #00000029;margin:0 0 20px}.tier-system-box h3{font-size:25px;color:#262626;font-weight:500;margin-bottom:0}.tier-system-box p{font-size:13px;line-height:1.5}.tier-system-box .modal-icon-button{cursor:pointer}.tier-system-box .modal-icon-button:hover{color:var(--primary-color)}.tier-system-box .tier-system-progress{display:flex;align-items:center;justify-content:space-between;column-gap:1rem;margin-top:1rem}.tier-system-box .tier-system-progress .progress-container{position:relative;width:100%;max-width:500px;display:flex;row-gap:.25rem;flex-direction:column}.tier-system-box .tier-system-progress .progress-container .progress-title .title-tier{text-transform:uppercase;font-size:15px;color:var(--primary-color);line-height:1.2;text-align:center}.tier-system-box .tier-system-progress .progress-container .progress-segments{display:flex;gap:2px;background-color:#fff;border-radius:6px;padding:2px 4px}.tier-system-box .tier-system-progress .progress-container .progress-segments .segment{flex:1;height:20px;background:#fff;border-radius:2px;transition:background .3s}.tier-system-box .tier-system-progress .progress-container .progress-segments-wrapper{background:transparent;border-radius:8px;width:100%;padding:3px}.tier-system-box .tier-system-progress .progress-container .progress-text{font-weight:700;white-space:nowrap;font-size:14px;line-height:1.2;text-align:center}.tier-system-box .tier-system-progress .icon-wrapper{width:50px;height:50px;border-radius:100%;background-color:#fff;box-shadow:0 0 5px 3px #00000029;padding:5px;flex:none}.tier-system-box .tier-system-progress .icon-wrapper img{width:100%;height:auto;aspect-ratio:auto}.tier-system-box .tier-system-progress.level-basic .progress-container .title-tier{color:#d58e4f}.tier-system-box .tier-system-progress.level-basic .progress-container .progress-segments-wrapper{background:linear-gradient(90deg,gray,#d58e4f)}.tier-system-box .tier-system-progress.level-basic .progress-container .progress-segments-wrapper .segment.active{background:gray}.tier-system-box .tier-system-progress.level-bronze .progress-container .title-tier{color:#d7d8d6}.tier-system-box .tier-system-progress.level-bronze .progress-container .progress-segments-wrapper{background:linear-gradient(90deg,#d58e4f,#d7d8d6)}.tier-system-box .tier-system-progress.level-bronze .progress-container .progress-segments-wrapper .segment.active{background:#d58e4f}.tier-system-box .tier-system-progress.level-silver .progress-container .title-tier{color:#f9c745}.tier-system-box .tier-system-progress.level-silver .progress-container .progress-segments-wrapper{background:linear-gradient(90deg,#d7d8d6,#f9c745)}.tier-system-box .tier-system-progress.level-silver .progress-container .progress-segments-wrapper .segment.active{background:#d7d8d6}.tier-system-box .tier-system-progress.level-gold .progress-container .title-tier{color:#f9c745}.tier-system-box .tier-system-progress.level-gold .progress-container .progress-segments-wrapper,.tier-system-box .tier-system-progress.level-gold .progress-container .progress-segments-wrapper .segment.active{background:#f9c745}.tier-system-box .tier-system-progress.level-max-gold .progress-container .title-tier{color:#f9c745;font-size:20px;font-weight:600;text-align:left}.tier-system-box .tier-system-progress.level-max-gold .progress-container .title-tier br{display:none}.tier-system-box .tier-system-progress.level-max-gold .progress-container .description-tier{font-size:16px}.tier-system-modal p{font-size:15px;line-height:1.5;margin-bottom:1rem}.tier-system-modal ul{list-style-type:disc;margin:0 0 1rem 1.5rem}.tier-system-modal ul li{font-size:15px}.tier-system-modal .bronze{color:#d58e4f}.tier-system-modal .silver{color:#d7d8d6}.tier-system-modal .gold{color:#f9c745}.icon-reward{width:30px;height:30px;border-radius:100%;background-color:#fff;box-shadow:0 0 5px 3px #00000029;padding:3px;margin-left:15px}.icon-reward img{width:100%;height:auto;aspect-ratio:auto;margin:0}
