:root {
    --text-color: rgb(173, 168, 162);
    --link-color: rgb(166, 205, 99);
    --link-color-hover: rgb(173, 168, 162);
    --table-header-color: rgb(220, 211, 202);
    --table-row-odd: rgba(32, 36, 32, 0.9);
    --table-row-even: rgba(28, 32, 28, 0.9);
    --input-background: rgba(32, 36, 32, 0.8);
    --input-background-focus: rgba(39, 44, 39, 0.8);
    --input-color: rgb(220, 211, 202);
    --paginate-background: rgba(37, 41, 37, 0.9);
    --paginate-background-hover: rgba(46, 51, 46, 0.9);
    --paginate-background-focus: rgba(32, 35, 32, 0.9);
    --paginate-color: rgb(220, 211, 202);
    --paginate-color-disabled: rgb(137, 134, 132);
    --players-total-color: rgb(220, 211, 202);
    --selection-color: rgb(173, 168, 162);
    --selection-background: rgb(41, 49, 41);
    --scrollbar-background: rgb(32, 38, 32);
    --scrollbar-color: rgb(43, 52, 43);
}

table.dataTable tbody tr:hover td {
    background-color: #141414!important
}

table.dataTable tbody td:hover {
    background-color: rgba(0,0,0,.5)!important
}

/* Modal Section */
.modal-content {
    background: rgba(0, 0, 0, 0.8);
    padding: 0px;
}

.modal-header {
    background: rgba(37, 41, 37, 1);
    border-bottom: 1px solid #1d221c;
    padding-bottom: 10px;
}

.modal-title {
    font-size: 20px;
    font-weight: bold;
}

.modal-body {
    background: rgba(32, 36, 32, 1);
    position: relative; /* Ensures the avatar can be positioned relative to the modal body */
    padding: 20px;
    font-size: 20px;
}

.modal-footer {
    background: rgba(37, 41, 37, 1);
    border-top: 1px solid #1d221c;
    padding-top: 10px;
    text-align: right;
}

/* Avatar styling within the modal */
#modalAvatar {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 64px;
    height: 64px solid #1d221c;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Button styling in the modal footer */
.modal-footer .btn {
    background: rgb(61, 75, 39);
    color: rgb(166, 205, 99);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 16px;
}

/* Optional: Styling for the close button */
.modal-header .close {
    font-size: 24px;
    font-weight: bold;
    color: rgb(204, 195, 190);
}

.modal-header .close:hover,
.modal-header .close:focus {
    color: #fff;
    text-decoration: none;
    opacity: 0.75;
}