* {
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

input {
    background-color: #111;
}

body {
    background-color: #111;
    padding: 0px;
    margin: 0px;
}

.menu {
    background-color: #222;
    padding: 8px;
}

.menu a {
    color: #999;
    text-decoration: none;
    font-size: 20px;
    padding: 8px;
}

.menu a:hover {
    background-color: #666;
}

.menu a i {
    transform: translateY(10%);
}

.menu #userpanel {
    position: absolute;
    top: 0px;
    right: 0px;
}

.widget {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    background-color: #333;
    border-radius: 15px;
    overflow: hidden;
    min-width: 200px;
    min-height: 220px;
}

.widget a {
    color: #33abff;
    text-decoration: none;
}

.widget a:hover {
    color: #ffab33;
    text-decoration: none;
}

.widget .widgetContent {
    padding-top: 5px;
}

.widgetTitle {
    background-color: #222;
    padding: 10px;
    font-weight: bold;
}

.widgetContent {
    padding: 10px;
    padding-top: 0px;
}

.login {
    min-width: 300px;
    height: 165px;
    position: fixed;
    background-color: #333;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    border-radius: 15px;
    overflow: hidden;
}

.login form {
    /* Using CSS Grid to lay out the elements in two-dimensions: */
    display: grid;
    /* specifying a 0.5em gutter/gap between adjacent elements: */
    gap: 0.5em;
    /* declaring a number of named grid areas in order to lay out
       the child elements; the areas identified with a period (.)
       are 'empty' areas, whereas the areas named by strings are
       used, later, to place elements according to those names: */
    grid-template-areas:
        "usernameLabel . usernameInput"
        "passwordLabel . passwordInput"
        ". . submit";
    /* declaring the size of each of the three columns; 1fr is
       one fractional unit of the available space, and is the
       size of the first and last of the columns. The central
       column is declared as being 0.5em in width: */
    grid-template-columns: 1fr 0.5em 1fr;
    margin: 1em auto;
    width: 100%;
}

.login i {
    transform: translateY(5%);
}

.widget i {
    transform: translateY(5%);
}

.widget th {
    text-align: left;
}

.widgetTitle i {
    color: #33abff !important;
}

.login label {
    /* placing all <label> elements in the grid column 1 (the first): */
    grid-column: 1;
    /* aligning text-content to the right in order to position the label
       text near to the relevant <input>: */
    text-align: left;
}

.login label::after {
    content: ':';
}

.login input {
    grid-column: 3;
    border-radius: 10px;
    border-style: none;
    border-color: #999;
    padding: 5px;
}

.login button {
    /* positioning the <button> element in the grid-area identified
       by the name of 'submit': */
    grid-area: submit;
}

#playerWidget td {
    padding-right: 10px;
}

#playerWidget tr td:first-child {
    padding-left: 5px;
}

#playerWidget tr td:last-child {
    padding-right: 5px;
}

#onlineWidget td {
    padding-right: 25px;
}

#onlineWidget tr td:last-child {
    padding-right: 5px;
}

#onlineWidget tr td:first-child {
    padding-left: 5px;
}


#toast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #33abff;
    color: #333;
    text-align: center;
    border-radius: 2px;
    position: fixed;
    z-index: 1;
    right: 20px;
    top: 64px;
    font-size: 17px;
    padding: 16px;
    box-shadow: 0px 0px 10px #000;

    -webkit-animation: fadein 0.5s, fadeout 0.5s 1s;
    animation: fadein 0.5s, fadeout 0.5s 1s;
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

table {
    border-collapse: collapse;
}

th{
    padding-right: 10px;
}

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

.under-half-hour {
    color: #ff3300;
}

.under-one-hour {
    color: #ff9900;
}

.over-one-hour {
    color: #99ff00;
}

.over-two-hours {
    color: #3399ff;
}

.player-online {
    color: #99ff00;
}

.player-offline {
    color: #ff3300;
}

.onlineTime{
    text-align: right;
}

.playerWidget {
    /* margin: 20px 0; Add vertical spacing between widgets */
    /* padding: 15px;
    background-color: #1e1e2f;
    border-radius: 10px;
    color: #fff; */
}

.playerWidget .widgetTitle {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.playerTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px; /* Add spacing above the table */
}

.playerTable th, .playerTable td {
    padding: 5px 15px; /* Add more padding for better spacing */
    text-align: left;
}

.playerTable th {
    background-color: #333;
    color: #fff;
    font-weight: bold;
}

.playerTable tr:nth-child(even) {
    background-color: #103047; /* Slightly lighter background for even rows */
}

.playerTable tr:hover {
    background-color: #444; /* Highlight row on hover */
}