:root {
    --GHgreen: #004530;
    --DarkGrey: #484848;
}

.desktop .component {
    position: relative;
    width: 40%;
    height: 100%;
}

.desktop .navbar-toggler {
    color: white;
}

nav {
    background-color: var(--GHgreen);
}

.desktop .offcanvas {
    background-color: var(--GHgreen);
}

.desktop .padded {
    margin-right: 10px;
}

.desktop .container-sm {
    padding-bottom: 20px;
}

.desktop .h3 {
    padding-bottom: 10px;
}

.desktop .text-wrapper-3 {
    padding-bottom: 10px;
}

.desktop .rectangle-4 {
    margin-right: 10px;
}

.form-control[type="search"]::-webkit-search-clear-button,
.form-control[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

.desktop .container {
    padding-top:20px;
    align-items: center;
}

table, thead {
    top: 0;
    color: var(--GHgreen); /* Adjust background color as needed */
    z-index: 1; /* Ensure the header stays above the content */
    text-align: center;
    align-items: center;
}

th {
    cursor: pointer;
}

.desktop .navbar-nav {
    padding-right: 20px;
}

.desktop .col-sm-12 {
    padding-bottom: 10px
}

.desktop .navbar-nav {
    vertical-align: center;
}

.desktop .bottom {
    padding-top: 10px;
}

.desktop .dataTables_info {
    padding-bottom: 10px;
}

img {
    max-width: 100%; /* Scale image to fit the container width */
    max-height: 100vh; /* Scale image to fit the viewport height */
    display: block; /* Remove extra space below inline images */
    margin: auto; /* Center the image */
}

#playerTable tbody tr {
    cursor: pointer;
}

.desktop .sorting {
    text-align: center;
    align-items: center;
}