body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Add a black background color to the right navigation */
.rightnav {
    background-color: #333;
    overflow: hidden;
    width: 200px;
    float: right;
    text-align: center;
    color: whitesmoke;
}

    /* Style the links inside the navigation bar */
    .rightnav a {
        float: right;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

        /* Change the color of links on hover */
        .rightnav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* Add a color to the active/current link */
        .rightnav a.active {
            background-color: #4CAF50;
            color: white;
        }

.server-status-bar {
    width: 100%;
    color: white;
    position: fixed;
}

.server-status-bar-online {
    background-color: #00C851;
}

.server-status-bar-offline {
    background-color: #CC0000;
}

.wiki-world-map {
    max-width: 600px;
    max-height: 400px;
}

.wiki-world-map-big {
    max-width: 800px;
    max-height: 600px;
}

.wikinav {
    height: 80%;
    width: 13%;
}

@media only screen and (max-width: 768px) {
     .wikinav {
         width: 80%;
     }
 }

/* Right-aligned section inside the right navigation (commented out for now)
.rightnav-right {
    float: right;
}*/

.style-link a {
    color: cornflowerblue;
}

.padded {
    padding: 1.5em;
}

.row {
    display: flex;
}

.p-1 {
    padding: 1em;
}

.m-4 {
    margin: 4px;
}

.m-2 {
    margin: 2px;
}

.float-right {
    float: right;
}

.mt-12 {
    margin-top: 12px;
}

input[type=text] {
    width: 100%;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    background-color: #f8f8f8;
    font-size: 16px;
}

input[type=password] {
    width: 100%;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    background-color: #f8f8f8;
    font-size: 16px;
}

select {
    width: 100%;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    background-color: #f8f8f8;
    font-size: 16px;
}

textarea {
    width: 100%;
    height: 300px;
    padding: 8px 8px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
}

input[type=button], input[type=submit], input[type=reset] {
    background-color: skyblue;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

.form-container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.style-link a {
    color: cornflowerblue;
}

.no-display {
    display: none;
}