Pre-mod-change

```
/\*\*
 \* RAILWAM CSS
 \*
 \* CSS styles for RailWAM. See [[w:c:dev:RailWAM]] for documentation.
 \*
 \* @author User:Blaster Niceshot
 \*/

/\* Universal \*/
.railwam-bold {
 font-weight: bold;
}

.railwam-ol {
 list-style: decimal;
 margin-left: 30px;
}

.railwam-math {
 display: block;
 font-family: serif;
 margin-bottom: 10px;
}

.railwam-math sub {
 vertical-align: sub;
}

/\* Log element \*/
.railwam-data-element {
 display:none;
}

/\* Rail Module Styles \*/
#railwam-data-container {
 box-sizing:border-box;
 display:inline-block;
 font-size:14px;
 font-weight:bold;
 padding:5px 10px;
 text-align:center;
 width:80%;
}

#railwam-wam-logo {
 width:20%;
}

#railwam-today-title {
 display:block;
 margin-bottom:10px;
}

#railwam-module-center {
 text-align: center;
}

#railwam-score-container {
 display: inline-block;
 padding-right: 10px;
 text-align: left;
}

#railwam-rank-container {
 display: inline-block;
 padding-left: 10px;
 text-align: left;
 /\* See JS for left border \*/
}

.railwam-module-label {
 font-weight: bold;
 text-transform: lowercase;
}

.railwam-module-val {
 font-size: 18px;
}

.railwam-module-data-container {
 display: inline-block;
 margin-left: 5px;
}

#railwam-score-title, #railwam-rank-title {
 display:block;
 font-size:1em;
 font-weight:bold;
 margin-bottom:5px;
 text-transform:lowercase;
}

#railwam-score-current, #railwam-rank-current {
 display:block;
 font-size:1.5em;
 font-weight:normal;
}

#railwam-score-difference, #railwam-rank-difference {
 display:block;
 font-size:1.1em;
 font-weight:normal;
 margin-top:5px;
 text-align:center;
}

#railwam-link-container {
 display:inline-block;
 left:50%;
 margin-top:10px;
 position:relative;
 text-align:center;
 transform:translateX(-50%);
}

#railwam-faq {
 cursor:pointer;
 margin-right:10px;
}

#railwam-offical-page {
 margin-right:10px;
}

#railwam-not-logged {
 display:none;
 font-size:.8em;
 font-weight:normal;
 margin-left:20%;
 margin-top:3px;
 text-align:center;
 width:80%;
}

#railwam-log-alert {
 font-size:.9em;
 margin-bottom:5px;
 padding: 4px;
 text-align: center;

 text-align: center;
}

#railwam-notlogged-text {
 display:block;
}

#railwam-notlogged-text-warning {
 display:block;
 font-size:.85em;
}

#railwam-log-link, #railwam-database-cancel {
 border-radius:.2em;
 cursor:pointer;
 display:inline-block;
 font-size:.8em;
 font-weight:bold;
 margin:4px;
 padding:5px 10px;
 text-transform:uppercase;
}

#railwam-close-link {
 border-radius:.2em;
 cursor:pointer;
 display:inline-block;
 font-size:.8em;
 font-weight:bold;
 margin:4px;
 padding:5px 10px;
 text-transform:uppercase;
}

.railwam-done-link {
 border-radius:.2em;
 cursor:pointer;
 display:inline-block;
 font-size:.8em;
 font-weight:bold;
 margin:4px;
 padding:5px 10px;
 text-transform:uppercase;
}

#railwam-time-num {
 background:transparent;
 border:none;
 box-shadow:none;
 box-sizing:border-box;
 height:30px;
 padding:5px 0;
 padding-right:3px;
 text-align:right;
 width:20%;
}

#railwam-time-num:focus {
 outline:none;
}

#railwam-time-type {
 background:transparent;
 border:none;
 box-shadow:none;
 box-sizing:border-box;
 height:30px;
 padding:5px 0;
 padding-left:3px;
 width:30%;
}

#railwam-time-type:focus {
 outline:none;
}

#railwam-time-type option {
 color:#000000;
}

#railwam-cookie-warning {
 display:block;
 font-size: .85em;
 margin-top:5px;
}

/\* Arrow styles \*/
.railwam-arrow {
 height: 13px;
 margin-top:-3px;
 vertical-align:middle;
 width: 11px;
}

#railwam-score-difference .railwam-arrow, #railwam-rank-difference .railwam-arrow {
 transform: translateY(-50%);
}

#railwam-svg-defs {
 display:none;
}

/\* Modal Styles \*/
#railwam-modal-overlay {
 align-items:center;
 bottom:0;
 display:-ms-flexbox;
 display:-webkit-flex;
 display:flex;
 justify-content:center;
 left:0;
 overflow:hidden;
 position:fixed;
 right:0;
 top:0;
 z-index:99999998;

}

#railwam-modal-body {
 box-shadow:0 0 20px rgba(0,0,0,0.75);
 min-height:500px;
 position:fixed;
 z-index:99999999;
}

#railwam-modal-sidebar {
 height:100%;
 overflow:auto;
 position:absolute;
 width:20%;
}

.railwam-modal-sidehead {
 cursor:pointer;
 list-style:none;
 margin:0;
 padding:0;
}

.railwam-modal-sidehead-container {
 width:100%;
}

.railwam-modal-sidebar-item {
 background:rgba(255,255,255,0.1);
 cursor:pointer;
 display:block;
 font-weight:bold;
 padding:10px;
 transition:all .3s;
}

.railwam-modal-sidebar-item:hover {
 background:rgba(255,255,255,.4);
}

.railwam-modal-sidehead-sub:hover {
 background:rgba(255,255,255,.3);
}

.railwam-modal-sidehead-sub {
 background:transparent;
 display:block;
 font-size:.9em;
 padding:10px;
 transition:all .3s;
}

.railwam-modal-sidehead-sub-active {
 background:rgba(255,255,255,0.4);
}

#railwam-modal-content-container {
 margin-left:20%;
}

#railwam-modal-title {
 display:block;
 font-size:2em;
 font-weight:bold;
 margin:0;
 padding:20px;
 padding-bottom:10px;
 padding-left:30px;
}

.railwam-modal-navlink {
 cursor:pointer;
}

#railwam-modal-navlink-container {
 display:block;
 font-size:1.1em;
 padding-left:30px;
}

#railwam-modal-content-area {
 display: block;
 font-size: 1.2em;
 line-height: 2em;
 overflow:auto;
 padding: 10px 20px;
}

#railwam-modal-content-area h2, #railwam-modal-content-mobile h2 {
 margin-top: 10px;
}

#railwam-modal-content-area p, #railwam-modal-content-mobile p {
 margin-bottom: 10px;
}

#railwam-modal-content-banner {
 display:block;
 font-size:1.4em;
 margin:0;
 margin-top:10px;
 padding:10px;
 padding-left:30px;
}

#railwam-modal-footer {
 bottom:0;
 box-sizing:border-box;
 font-size:0.9em;
 height:50px;
 left:20%;
 line-height:10px;
 padding:20px;
 position:absolute;
 right:0;
 text-align:center;
}

#railwam-modal-close {
 cursor:pointer;
 height:15px;
 position:absolute;
 right:20px;
 top:20px;
 transition:all .3s;
}

#railwam-modal-close:hover {
 opacity:0.4;
}

.railwam-modal-dropdown-arrow {
 height:7px;
 margin-left:5px;
 transition:all .2s;
 vertical-align:middle;
}

.railwam-param-label {
 font-family: monospace;
 font-weight: bold;
}

/\* Mobile Modal Styles \*/
.railwam-modal-sidebar-item-mobile {
 cursor:pointer;
 display:block;
 font-weight:bold;
 padding:10px;
 transition:all .3s;
}

.railwam-modal-sidehead-container-mobile {
 display:inline-block;
 margin-bottom:5px;
}

.railwam-modal-sidehead-sub-mobile {
 font-size: 1.6em;
 font-weight:bold;
 margin-bottom:5px;
 margin-top:10px;
}

/\* Database Styles \*/
input[name="railwam-database"] {
 height:1.5em;
 margin:0;
 position:absolute;
 top:0;
 visibility:hidden;
 width:1.5em;
}

input[name="railwam-database"] ~ label {
 cursor:pointer;
 display:inline-block;
 padding:0 1.75em;
 position:relative;
}

#railwam-database-cancel {
 margin: 0;
 margin-left: 10px;
}

.railwam-database-check {
 border-radius:50%;
 cursor:pointer;
 display:block;
 height:.6em;
 margin-left:0.3em;
 position:absolute;
 top:.45em;
 transition:all .3s;
 width:.6em;
 z-index:-1;
}

#railwam-database-custom-input {
 border:none;
 box-sizing:border-box;
 display:none;
 height:30px;
 padding:0 10px;
 width:15%;
}

.railwam-database-disabled, .railwam-database-disabled \* {
 cursor: not-allowed;
}

.railwam-database-entrytable {
 display:table;
 width:100%;
}

.railwam-database-entrytable:nth-child(odd) {
 background:transparent;
}

.railwam-database-entrytable-column {

 box-sizing:border-box;
 display:table-cell;
 float:none!important;
 padding:10px 0;
 text-align:center;
 vertical-align:middle;
 width:25%;
}

.railwam-database-entrytable-column:nth-of-type(even) {
 background:rgba(191, 191, 191, 0.15);
}

.railwam-database-entrytable-diff {
 display:block;
 font-size:.8em;
}

.railwam-database-error {
 display:none;
 padding:5px 10px;
}

#railwam-database-faq {
 cursor:pointer;
}

#railwam-database-fields {
 display:block;
 height:30px;
 margin-top:10px;
 position:relative;
}

#railwam-database-field {
 border:none;
 box-sizing:border-box;
 display:inline-block;
 height:30px;
 padding:0 15px;
 transition:all .3s;
 text-transform:lowercase;
 width:90%;
}

#railwam-database-field.railwam-database-custom-shown {
 width:65%;
}

#railwam-database-field.railwam-database-custom-hidden {
 width: 70%
}

#railwam-database-loading {
 display:none;
 font-size:0.9em;
 padding:10px 0;
 text-align:center;
}

#railwam-database-noentry {
 display:none;
}

#railwam-database-noentry-text {
 display: block;
 padding: 10px;
 text-align: center;
}

#railwam-database-radio {
 list-style:none;
 margin:0;
 padding:5px 0;
 width:90%;
}

#railwam-database-radio li {
 text-align:center;
}

.railwam-database-radio-container {
 display:inline-block;
 position:relative;
 text-transform:lowercase;
}

.railwam-database-radio-center {
 display:inline-block;
 margin:0 auto;
}

#railwam-database-searchbtn {
 font-size: .75em;
 font-weight: bold;
 height: 30px;
 line-height:30px;
 position:absolute;
 right:0;
 text-align: center;
 text-transform:uppercase;
 top:0;
 transition:all .3s;
 width:10%;
}

#railwam-database-searchby {
 display:inline-block;
 font-size:.9em;
 position:relative;
}

#railwam-database-select {
 border:none;
 box-sizing:border-box;
 display:none;
 height:30px;
 width:20%;
}

#railwam-database-select.railwam-database-custom-shown {
 width:10%;
}

#railwam-database-select.railwam-database-custom-hidden {
 width: 20%;
}

.railwam-database-spinner {
 vertical-align: middle;
 margin-top: -3px;
 margin-right: 5px;
}

.railwam-database-spinner > g > circle {
 animation: railwam-spinner 1s linear infinite;
 stroke-dasharray: 187;
 stroke-dashoffset: 0;
}

@keyframes railwam-spinner {
 0% {
 stroke-dashoffset: 187;
 }
 60% {
 transform: rotate(450deg);
 stroke-dashoffset: 140.25;
 -webkit-transform: rotate(450deg);
 }
 100% {
 transform: rotate(720deg);
 stroke-dashoffset: 180;
 -webkit-transform: rotate(720deg);
 }
}

.railwam-database-tablehead {
 display:inline-block;
 width:25%;
}

#railwam-database-tablehead-container {
 font-weight:bold;
 padding:7px 0;
 text-align:center;
 text-transform:lowercase;
}

```

```
rankElm = isNaN(data[dateId].wam\_rank) === false ? '<div id="railwam-rank-container"><span id="railwam-rank-title">' + i18n.rank + '</span><span id="railwam-rank-current">' + data[dateId].wam\_rank + '</span><span id="railwam-rank-difference">+/- ' + i18n.unknown + '</span></div>' : '',

module = '<section class="rail-module" id="railwam-rail-mod"><h2>' + i18n.todayTitle + '</h2>' + wamLogoSvg + '<div id="railwam-data-container"><div id="railwam-score-container"><span id="railwam-score-title">' + i18n.score + '</span><span id="railwam-score-current">' + data[dateId].wam + '</span><span id="railwam-score-difference">+/- ' + i18n.unknown + '</span></div>' + rankElm + '</div><span id="railwam-not-logged">' + i18n.yesterdayNotLogged +'</span><span id="railwam-link-container"><a id="railwam-faq">' + i18n.faq + '</a>' + databaseLink + '<br>'+ i18n.poweredBy + ' <a href="http://dev.wikia.com/wiki/RailWAM">RailWAM</a></span></section>',

```