.usage-bar-wrapper{margin:10px 0;height:10px;position:relative;box-sizing:content-box}.usage-bar-wrapper .usage-bar{background-color:#f1f1f1;height:100%;border-radius:5px}.usage-bar-wrapper .used{position:absolute;top:0;border-radius:5px 0 0 5px;height:100%;background:#777}.usage-bar-wrapper .used .number{position:absolute;left:100%;bottom:-20px;font-size:11px;color:#777;border-left:1px solid #777777;padding-left:7px;padding-top:2px;margin-left:-1px;white-space:nowrap}.usage-bar-wrapper .selected{position:absolute;top:0;height:100%;transition:all .35s ease-in-out}.usage-bar-wrapper .selected .number{position:absolute;left:100%;top:-20px;font-size:11px;font-weight:700;border-left:1px solid;padding-left:7px;padding-bottom:2px;margin-left:-1px;white-space:nowrap}.usage-bar-wrapper .selected.red{background:#f44336}.usage-bar-wrapper .selected.red .number{color:#f44336;border-left:1px solid #F44336}.usage-bar-wrapper .maximum{position:absolute;left:100%;top:0;padding-left:15px;font-size:12px;white-space:nowrap}