Is there a way to position this element to the bottom right corner?
HTML
<div class="info player">
<div id="job" style="display:none;"><span>Jobname</span></div>
<div id="status">
<ul>
<li class="icon" id="thirst" style="display:none;"><i class="fas fa-tint"></i><span></span></li>
<li class="icon" id="hunger" style="display:none;"><i class="fas fa-utensils"></i><span></span></li>
<li class="icon" id="stamina" style="display:none;"><i class="fas fa-running"></i><span></span></li>
<li class="icon" id="armor" style="display:none;"><i class="fas fa-shield-alt"></i><span></span></li>
<li class="icon" id="health" style="display:none;"><i class="fas fa-heart"></i><span></span></li>
</ul>
</div>
CSS
.info { position: absolute; }
.info.server { bottom: 0; right: 0; }
.info.server #server img { max-width: 100%; opacity: 0.75; }
.info.player { bottom: 0; right: 0; text-align: right;}
.info.player #job span { font-size: 20px; color: #FFF; font-weight: 900; text-transform: uppercase; text-shadow: 0px 1px 1px rgba(0,0,0,0.75); }
.info.player #status { clear: both; }
.info.player #status ul { margin: 1px 0 0 0; }
.info.player #status ul li { float: right;}
.info.player #status ul li#health span { background: linear-gradient(180deg, #ff0000 0%, #aa0000 100%); }
.info.player #status ul li#armor span { background: linear-gradient(180deg, #0bcfe6 0%, #0aa3b5 100%); }
.info.player #status ul li#stamina span { background: linear-gradient(180deg, #ffb700 0%, #e0a102 100%); }
.info.player #status ul li#hunger span { background: linear-gradient(180deg, #ff8000 0%, #cd6700 100%); }
.info.player #status ul li#thirst span { background: linear-gradient(180deg, #00c3ff 0%, #008fbb 100%); }
.info.player #status ul li#health.dead { animation: trew-pulse 500ms infinite; }
.info.player #status ul li#health.dead span { height: 0 !important; }
.info.player #status ul li#health.dead i.fas:before { content: '\f714'; }
Despite changing the .info.server and .info.player settings to bottom right, they are still displaying at the top left corner.