/*
* EDIT CSS HERE!!!!!!!!!!!!
*/

/* ------------------------------ Global css ------------------------------ */

:root {
    --main-theme-color: #d4af37;
    --main-theme-secondary: #202020;
    --main-theme-third: #a4a4a4;
    --main-theme-fourth: #181818;
    --main-theme-fifth: #3b3a38;
    --main-theme-sixth: #d0d0d0;
    --main-theme-seventh: #EDEAEA;
    --main-theme-eight: #141414;
}

.link-no-style {
    text-decoration: none;
    color: var(--main-theme-third);
}

.link-no-style-no-hover {
    text-decoration: none;
    color: var(--main-theme-third);
}

.link-no-style:hover, .white-link:hover {
    text-decoration: underline;
}

.hidden {
    display: none !important;
}

.selected-blue-line {
    box-shadow: inset 0 -2px 0 0 skyblue !important;
}

.white-link {
    text-decoration: none;
    color: var(--main-theme-seventh);
}

.text-no-wrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--main-theme-fourth) inset !important;
}

input:-webkit-autofill {
    -webkit-text-fill-color: var(--main-theme-sixth) !important;
    font-size: 1.2em !important;
}

.absolute-title {
    position: absolute;
    top: -28px;
    left: 0;
    color: #EDEAEA;
    font-size: 1.2em;
    text-shadow: var(--main-theme-fifth) 2px 1px 2px;
}

.link-no-style-header {
    float: left;
    text-decoration: none;
    color: var(--main-theme-seventh);
}

.link-no-style-header:hover {
    color: var(--main-theme-third);
    transition: all 75ms linear;
}

#site-container {
    display: flex;
    flex-flow: column;
    position: absolute;
    margin-top: 55px;
    width: 100%;
    min-width: 500px;
    min-height: 800px;
    transition: all 500ms linear;
    /* z-index: -3; */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 150px;
}

#banner-container {
    flex: 0 1 auto;
    vertical-align: bottom;
    position: relative;
    width: 100%;
    height: 30%;
    /*border: 1px solid greenyellow; */
    transition: all 500ms linear;
}

#content-container {
    position: relative;
    /*     flex: 1 1 auto; */
    /*border: 1px solid palevioletred; */
}

/* ------------------------------------------------------------ */

@font-face {
    font-family: radianceValve;
    src: url(../resources/fonts/radiance.woff);
    font-display: swap;
}

body {
    font-family: radianceValve, Georgia, Heletica, sans-serif;
    background-color: var(--main-theme-fourth);
}

.container {
    display: grid;
    /* grid-template-columns: 70% 30%; */
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    border: 1px solid black;
}

.container-player {
    position: relative;
    width: 1100px;
    height: 2000px;
    border: 1px solid black;
    margin-left: 10px;
}

.container>div {
    background: #eee;
}

.container>.header {
    display: grid;
    background: #eee;
    border: 1px solid black;
    grid-template-columns: 3fr 1fr;
}

.imageContainer {
    border: 1px solid black;
}

#homepagetext {
    border: 1px solid black;
}

.player-skills {
    text-align: center;
    position: absolute;
}

.player-gains {
    text-align: center;
    position: absolute;
    border: 1px solid blue;
    height: 30%;
    width: 65%;
    color: var(--main-theme-third);
}

.gains {
    width: 100%;
    height: 100%;
}

.skill {
    display: grid;
    text-align: left;
    grid-template-columns: repeat(5, 1fr);
}

.value {
    display: grid;
    text-align: left;
    grid-template-columns: repeat(4, 1fr);
}

.totalValue {
    display: grid;
    text-align: left;
    grid-template-columns: repeat(4, 1fr);
}

#titleText {
    padding: 1em;
    font-size: 2.5em;
    text-align: center;
    vertical-align: middle;
    line-height: 2em;
    border: 1px solid black;
}

.container>.navbar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #eee;
    /* padding: 0.1em;
     border: 1px solid black; */
}

.container>.navbar a:hover {
    background: burlywood;
}

#user-search-field {
    width: 95%;
    height: 1.2em;
    background-color: transparent;
    color: #000;
    font-size: 1em;
    margin-left: .1em;
    border: 0.1em solid transparent;
    border-radius: 1em 0 0 1em;
    outline: none;
}

#group-search {
    display: block;
    position: relative;
    height: 50px;
    width: 250px;
    padding-top: 7.5px;
    margin: 0 auto;
    /*border: 1px solid goldenrod; */
    bottom: 0;
    overflow: auto;
}

#comp-search {
    display: block;
    position: absolute;
    width: 250px;
    padding-top: 7.5px;
    margin: 0 auto;
    top: -2.65em;
    right: 2em;
    overflow: auto;
}

#comp-search-input {
    border-top: 0 !important;
    float: right;
    text-align: left !important;
}

#group-search input[type="text"], #group-search input[type="password"], #comp-search input[type="text"], #comp-search input[type="password"] {
    text-align: center;
    border: 0px;
    width: 55%;
    padding: 0.15em 0px;
    background-color: var(--main-theme-fourth);
    color: var(--main-theme-sixth);
    font-family: radianceValve;
    font-size: 1.2em;
    border-top: 1px solid var(--main-theme-third);
    border-bottom: 1px solid var(--main-theme-third);
}

#comp-search input::placeholder {
    color: var(--main-theme-third);
}

#group-search input:focus::placeholder, #comp-search input:focus::placeholder {
    color: transparent;
}

#group-search input[type="text"]:focus, #comp-search input[type="text"]:focus {
    outline: 0;
}

/*
.search-elements {
     border: 1px solid deeppink; 
}
*/

#user-search-button {
    width: 100%;
    height: 100%;
}

#user-search-element {
    display: grid;
    text-align: left;
    /* border: 1px solid deeppink; */
    padding: 0em;
    height: 2em;
    max-height: 2em;
    grid-template-columns: 70% 30%;
}

.menuLink {
    text-decoration: none;
}

.navbarelement {
    border: 1px solid black;
    text-align: center;
    font-size: 1.2em;
    color: black;
    padding: 0.5em;
    max-height: 1em;
}

/*---------------- Current top CSS ----------------*/

.container-player {
    position: relative;
    width: 1100px;
    height: 2000px;
    border: 1px solid black;
    margin-left: 10px;
}

#current-top-title {
    display: grid;
    text-align: center;
    font-size: 3em;
    grid-template-columns: 30% 40% 30%;
}

.current-top-title-sections {
    height: 1em;
    line-height: inherit;
    align-content: center;
}

.current-top-title-sections>img {
    height: 34px;
    width: 34px;
}

#current-top-table-container {
    position: relative;
    width: 1100px;
    height: 2000px;
    border: 1px solid black;
    margin-left: 10px;
    align-self: center;
}

#current-top-table-title {
    position: absolute;
    width: 100%;
    height: 100px;
    border: 1px solid pink;
    text-align: center;
}

#current-top-table-one {
    position: absolute;
    width: 30%;
    height: 50%;
    top: 1%;
}

#current-top-table-two {
    position: absolute;
    width: 30%;
    height: 50%;
    top: 1%;
    left: 33.33333%;
}

#current-top-table-three {
    position: absolute;
    width: 30%;
    height: 50%;
    top: 1%;
    right: 0%;
}

.current-top-table {
    width: 100%;
    border: 1px solid red;
    border-collapse: collapse;
}

.current-top-time {
    font-size: 26px;
}

.current-top-rank {
    width: 5%;
}

.current-top-name {
    width: 65%;
}

.current-top-xp {
    width: 30%;
    text-align: right;
}

.current-top-row {
    padding: 5px;
    font-size: 18px;
}

/*--------------- RECORDS --------------------*/

.records-small-title {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 1.5em;
}

#records-skill-container {
    position: relative;
    width: 100%;
    height: 125px;
}

.record-skills {
    display: grid;
    /* grid-row-gap: 4px; */
    grid-template-columns: repeat(24, 1fr);
    height: 33px;
    justify-content: center;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    /* padding: 0 1em; */
}

.skill-icon {
    height: 32px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    border-left: 1px solid black;
    border-top: 1px solid black;
}

.skill-icon-selected {
    height: 32px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    border-left: 1px solid black;
    border-top: 1px solid black;
    background-color: burlywood;
}

.skill-icon:hover {
    background-color: burlywood;
}

.skill-icon-img {
    margin-top: 2px;
    height: 26px;
    width: 26px;
}

.other-skills {
    display: grid;
    /* grid-row-gap: 4px; */
    grid-template-columns: repeat(11, 1fr);
    height: 33px;
    justify-content: center;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    /* padding: 0 1em; */
}

#records-images {
    margin-left: 2%;
    margin-right: 2%;
    display: grid;
    height: 5%;
    text-align: center;
    font-size: 3em;
    grid-template-columns: 30% 40% 30%;
}

.records-images-sections {
    height: 1em;
    line-height: inherit;
    align-content: center;
}

.records-images-sections>img {
    height: 34px;
    width: 34px;
}

.records-table {
    width: 100%;
    /*border: 1px solid red;*/
    border-collapse: collapse;
}

.record-table-time {
    font-size: 26px;
}

/*
.record-table-rank {
    text-align: center;
    border-right: 4px solid #3b3a38;
    color: #a4a4a4;
    width: 10%;
}
.record-table-name {
    padding-left: 3px;
    width: 56%;
    color: #d0d0d0;
}

.record-table-xp {
    text-align: center !important;
    border-left: 4px solid #3b3a38;
    width: 30%;
    text-align: right;
    color: #a4a4a4;
}

.record-table-row {
    padding: 5px;
    font-size: 18px;
    border: 4px solid #3b3a38;
    background-color: #202020;
}
*/

.current-top-name>img {
    width: 16px;
    height: 16px;
    float: right;
}

#current-top-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.current-top {
    display: grid;
    text-align: center;
    grid-template-columns: repeat(2, 1fr);
}

.current-top-list-title {
    font-size: 1em;
    margin: 10px;
    text-decoration: underline;
    grid-column: 1/3;
}

.current-top-list-name {
    text-align: left;
    font-size: 1.5em;
}

.current-top-list-xp {
    text-align: center;
    font-size: 1.5em;
}

.name-rsn {
    text-align: left;
}

.xp-amount {
    text-align: right;
}

.skill-icons {
    display: flex;
    height: 28px;
    flex-flow: row;
    border: 1px solid black;
    padding: 7px 0;
    /* padding: 0 1em; */
    justify-content: space-around;
}

/* ------------- Player page gains table ---------------*/

.gains, th, td {
    border-spacing: 0px;
}

.skill-column:nth-child(odd) {
    background-color: #eee;
}

.skill-with-icon {
    text-align: left;
    margin: 5px;
}

.gains tr th {
    padding: 0 32px;
}

.gains td>img {
    height: 20px;
    width: 20px;
    vertical-align: bottom;
    padding-right: 10px;
}

.skill-column {
    background-color: #ddd;
}

.gains>.skill-column:nth-of-type(1) {
    border: 1px solid black;
}

.skill-column:hover {
    background-color: #8c8c8c;
}

.skill-link {
    color: inherit;
    text-decoration: none;
}

.skill-link:hover {
    text-decoration: underline;
}

/* ------------- Player page details div ---------------*/

.details {
    position: absolute;
    border: 1px solid green;
    height: 30%;
    width: 35%;
    right: 0;
}

.nice-button {
    display: inline-block;
    border-radius: 4px;
    background-color: transparent;
    padding: 0.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all .15s ease-in-out;
    border: 1px solid black;
    background-color: lightgreen;
    margin-bottom: 1.75rem;
    transition: all .15s ease-in-out;
}

.nice-button:hover {
    background-color: #d4af37;
}

​ .details, button:hover {
    background-color: #d4af37;
    color: black;
}

/*----- Dropwdown menu -----*/

/**
    Hide the checkbox itself. Checking and unchecking 
    it we will be done via the label element.
*/

input[type=checkbox] {
    display: none;
}

/* Click to expand button */

.dropdown label {
    box-sizing: border-box;
    display: inline-block;
    float: right;
    width: 50%;
    height: 100%;
    background-color: #beafaf;
    padding: 10px 20px;
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dropdown label:hover {
    background-color: #8c8c8c;
}

/*  The ul will have display:none by default */

#hidden-menu {
    position: absolute;
    right: 0px;
    top: 100%;
    list-style: none;
    text-align: left;
    width: 50%;
    z-index: 1;
    margin: 0;
    padding: 0;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    display: none;
}

#hidden-menu li {
    padding: 8px;
    background-color: #ddd;
    color: black;
    margin-bottom: 0px;
    cursor: pointer;
}

#hidden-menu li:hover {
    background-color: burlywood;
    color: black;
}

#hidden-menu a {
    color: inherit;
    text-decoration: none;
}

.name>img {
    /*     width: 16px;
    height: 16px; */
    margin-top: 2px;
    margin-right: 5px;
    float: right;
}

.px16 {
    width: 16px;
    height: auto;
}

#leaderboard {
    max-width: 750px;
    margin: auto;
    border-spacing: 0;
    color: #a4a4a4;
    border-color: #3b3a38;
    border-style: solid;
    border-width: 2px 4px 4px 2px;
    table-layout: auto;
}

#leaderboard-title>th {
    border-top: 2px solid #3b3a38;
    border-left: 2px solid #3b3a38;
    font-weight: 600;
    color: var(--main-theme-sixth);
}

#leaderboard>tbody>tr>td {
    border-top: 2px solid #3b3a38;
    border-left: 2px solid #3b3a38;
    padding-top: 3px;
    padding-bottom: 3px;
}

#leaderboard-title {
    height: 32px;
    background-color: #000 !important;
    color: #b7b7b4;
}

#leaderboard>tbody>tr:nth-child(odd) {
    background-color: #202020;
}

#leaderboard>tbody>tr:nth-child(even) {
    background-color: #181818;
}

.name {
    text-align: left !important;
    color: #d0d0d0;
    padding-left: 6px;
    width: 50%;
}

.rank-box {
    width: 7.5%;
    min-width: 50px;
    max-width: 50px;
    position: relative;
}

.mode-box {
    /*  width: 7.5%; */
    width: 50px;
}

.ehp-box {
    width: 20%;
}

.rank-change-box {
    width: 7.5%;
}

.rank-change-container {
    display: block;
    margin: 0 auto;
    width: fit-content;
    white-space: nowrap;
}

.ehp-change-box {
    width: 10%;
}

/* PERSONAL RECORDS PAGE*/

#personal-record-name {
    color: white;
    position: relative;
    justify-content: center;
    text-align: center;
    width: 98%;
    height: 50px;
    /*     border: 1px solid green; */
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 16px;
}

#personal-record-container {
    color: var(--main-theme-third);
    position: relative;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
    /*     border: 1px solid yellow; */
}

.personal-record-tables {
    /*     border: 1px solid pink; */
    height: 150px;
    width: 224px;
    padding: 0;
    margin: 30px 15px;
}

.personal-record-table-title img {
    height: 16px;
    width: auto;
}

.personal-record-table-title {
    color: white;
    width: 100%;
    text-align: center;
}

.personal-record-table-time {
    width: 50%;
    text-align: center;
    border-right: 1px solid white;
}

.personal-record-table-xp {
    width: 50%;
    text-align: center;
}

.personal-record-table-row {
    width: 100%;
    padding: 5px;
}

.personal-record-table {
    width: 100%;
    height: 100%;
    border-spacing: 0px;
}

/**

    By using the Following-sibling selector (~),
    we can target elements positioned after our checkbox in the DOM tree.

    With the state pseudo selector (:checked),
    we can make changes depending on the state of the checkbox.

    Using this combftion of selectors
    allows to change the color of the label
    and show the list of items
    only when the checkbox is checked.

*/

input[type=checkbox]:checked~label {
    background-color: #8c8c8c;
}

input[type=checkbox]:checked~#hidden-menu {
    display: block;
}

.update {
    position: absolute;
    top: 10%;
    border: 1px solid cyan;
    width: 100%;
    text-align: center;
}

/* ------------------------------- FOOTER ------------------------------- */

#footer-container {
    display: grid;
    background: #eee;
    margin-left: 1%;
    margin-right: 1%;
    border: 1px solid black;
    margin-bottom: 1%;
    grid-template-columns: repeat(3, 1fr);
}

#footer-element {
    padding: 1em;
    font-size: 1.2em;
    text-align: center;
    vertical-align: middle;
    line-height: 1.2em;
    border: 1px solid black;
    margin: 1px;
}

/* ------------------------------------------TEST PAGE ------------------------------------------ */

#test-container {
    position: relative;
    width: 98%;
    height: 1000px;
    border: 1px solid black;
    margin-left: 1%;
    margin-right: 1%;
}

/* ------------------------------------------ ABOUT ME ------------------------------------------ */

#about-container {
    position: relative;
    width: 98%;
    border: 1px solid black;
    margin-left: 1%;
    margin-right: 1%;
    background-color: cyan;
}

#about-container>p {
    margin: 15px;
    font-size: 1.5em;
}

/* ------------------------------------------ Records with new UI ------------------------------------------ */

.rtable-container {
    width: fit-content;
    height: fit-content;
    margin: 3% 1%;
}

.skillhiscore-container {
    position: relative;
    width: 75%;
    height: max-content;
    margin: 3% auto;
}

#records-table-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    position: relative;
    margin-top: 1%;
    width: 100%;
}

#skillhs-table-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    position: relative;
    margin-top: 1%;
    width: 100%;
}

#mobile-records-table-container {
    display: none;
    flex-wrap: wrap;
    justify-content: space-evenly;
    position: relative;
    margin-top: 1%;
    width: 100%;
}

.record-skill-icons>ul {
    list-style-type: none;
}

.record-skill-icons li {
    float: left;
}

.record-skill-icons li {
    display: block;
    color: white;
    text-align: center;
    margin: 1em 2em;
    /* text-decoration: none; */
    cursor: pointer;
}

#record-table {
    width: 25%;
    min-width: 325px;
    max-width: 425px;
    border-spacing: 0;
    color: #a7a7a7;
    border-color: #3b3a38;
    border-style: solid;
    border-width: 0 0 1px 0;
    font-size: 1em;
    /* background-color: #202020; */
    text-overflow: ellipsis;
}

#record-skill-title {
    color: var(--main-theme-seventh);
    text-align: center;
    font-size: 2.5em;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: inherit;
    text-shadow: rgb(0, 0, 0) 0px 0px 3px;
}

#record-table>tbody>tr>td {
    border-top: 1px solid #3b3a38;
    /* border-left: 1px solid #3b3a38; */
    font-size: 0.75em;
}

#record-table>tbody>tr>td>img {
    margin-left: 3px;
}

/* #record-table>tbody>tr:nth-child(-n+2)>td {
    border-top: 0;
} */

.current-top-flag {
    padding-top: 1px;
}

.custom-icon {
    vertical-align: baseline !important;
    margin-right: 0.2em;
}

#record-title {
    height: 32px;
    background-color: #181818;
    color: #b7b7b4;
}

/* #record-table>tbody>tr:nth-child(odd) {
    background-color: #202020;
}

#record-table>tbody>tr:nth-child(even) {
    background-color: #181818;
} */

.record-table-rank {
    width: 8%;
    text-align: center;
    /* border-left: 0 !important; */
}

.record-table-name {
    padding: 10px;
    width: 35%;
    font-weight: 400 !important;
    font-size: 0.85em !important;
    color: var(--main-theme-seventh);
}

.record-table-xp {
    width: 20%;
    text-align: right;
    text-align: center;
    border-right: 1px solid #3b3a38;
}

.record-table-row:nth-of-type(2) td {
    border-top: 0 !important;
}

/* .record-table-row:nth-of-type(odd) {
    background-color: #181818;
} */

.record-table-date {
    width: 10%;
    text-align: right;
    text-align: center;
    /* border-right: 1px solid #3b3a38; */
    border-left: 0 !important;
}

.record-table-row {
    font-size: 18px;
}

.frame {
    margin-right: 0.2em;
    height: 18px;
    /* Equals maximum image height */
    width: 18px;
    /*     border: 1px solid red;
 */
    white-space: nowrap;
    /* This is required unless you put the helper span closely near the img */
    position: relative;
    text-align: center;
    float: right;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.frame>img {
    vertical-align: middle;
    max-height: 16px;
    max-width: 160px;
}

.record-table-name>img, #comp-table img {
    /* width: 16px; */
    /* height: 16px; */
    max-height: 16px;
    float: right;
}

.record-skill-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    position: relative;
    /* margin-top: 3%; */
    width: 100%;
    border-bottom: 1px solid #3b3a38;
}

.list-dynamic a {
    transition: box-shadow 0.3s ease-out;
    transition-property: box-shadow;
    cursor: pointer;
    /* box-shadow: inset -4 -2px 0 0 skyblue !important; */
    /*     transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 0s; 
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .15); */
    /* 
        background: rgba(0, 0, 0, 0) !important;
        box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .15);
        transition: box-shadow .3s cubic-bezier(.175, .885, .32, 1.275);
        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition-delay: 0s; */
}

.record-skill-icons img {
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 5px;
    height: 22px;
    width: auto;
    max-width: 22px;
    cursor: pointer;
    margin-top: 4px;
}

.record-skill-icons a {
    /* padding-top: 4px; */
    position: relative;
    text-align: center;
    min-width: 52px;
    width: auto;
    flex: 1 0 auto;
}

#selected-skill {
    border-bottom: 2px solid skyblue;
}

#selected-blue-line {
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: skyblue;
}

.record-skill-icons a:hover {
    background-color: #3b3a38;
}

#img-right {
    float: right;
}

.big-skill-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 36px;
}

.parameter-icon-container {
    float: right !important;
    height: 100%;
    width: 36px;
    margin: 0 !important;
    display: flex;
}

.parameter-icon {
    max-width: 27px;
    max-height: 18px;
    /* float: right; */
    /* margin: 10px 4px 0 0; */
    margin: auto auto;
}

.selected-parameter-icon {
    max-width: 27px;
    max-height: 18px;
}

/* ------------------------------------------ Groups ------------------------------------------ */

#group-container {
    position: relative;
    border: 1px solid white;
    height: 50%;
    width: 100%;
}

#group-table, #group-table-all {
    color: white;
    /* border: 1px solid white; */
    position: relative;
    max-width: 900px;
    min-width: 390px;
    max-height: 326px;
    width: 80%;
    height: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    padding: 5px 0 15px 0;
    border-spacing: 0 8px;
    /* border-radius: 25px; */
    background-color: var(--main-theme-secondary);
    /*     border: 2px solid var(--main-theme-color);
 */
}

.group-table-row>td, .group-table-row>th {
    width: 16.666%;
    padding: 10px 0;
}

.group-table-row-all>td {
    width: 16.666%;
    padding: 0;
}

.group-table-row td:first-child {
    padding-left: 4px;
}

#group-table-all th {
    padding: 0 0 10px 0;
}

.group-table-title {
    white-space: nowrap;
}

#group-table-all {
    height: 0;
}

#group-table tr td, #group-table-all tr td {
    color: var(--main-theme-third);
    text-align: center;
}

#group-table tr th, #group-table-all tr th {
    /*border: 1px solid greenyellow;*/
    font-weight: 100;
    text-align: center;
    border-bottom: 1px solid #3b3a38;
}

#small-icon {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0px;
    top: -40px;
}

.group-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

#group-skill-title {
    Color: var(--main-theme-color);
    text-align: center;
    font-size: 2.5em;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: inherit;
}

.group-fields {
    margin-top: 3%;
    width: 50%;
}

#group-form {
    width: 96%;
    margin: 0 auto;
}

#group-form input[type="text"] {
    border: 0px;
    width: 100%;
    padding: 6px 0 6px 3px;
    background-color: #393939;
    color: #d4af37;
    border-radius: 0;
    font-size: 1em;
}

#group-form h3 {
    padding-top: 5%;
}

#group-submit-button, #add-name-button, #add-name-button-leader, #show-all-names {
    background-color: #242424;
    border: 1px solid var(--main-theme-seventh);
    cursor: pointer;
    position: relative;
    color: var(--main-theme-third);
    font-family: Arial;
    font-size: 15px;
    font-weight: 500;
    padding: 5.5px 11px;
    text-decoration: none;
    margin: 0;
}

#group-submit-button:hover, #add-name-button:hover, #show-all-names:hover {
    background-color: #303030;
}

#group-submit-button:active {
    position: relative;
    top: 1px;
}

#group-verified-names, #group-verified-leader-names {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 75%;
    height: fit-content;
    min-height: 124px;
    /* background-color: #393939; */
    color: black;
    margin-top: 5px;
    margin-right: auto;
    border: 1px solid var(--main-theme-seventh);
}

#group-verified-names>div, #group-verified-leader-names>div {
    background-color: var(--main-theme-color);
    ;
    border: 1px solid black;
    margin: 10px;
    padding: 10px 5px 10px 10px;
    font-size: 1em;
    width: fit-content;
    height: 20px;
}

#group-verified-names img, #group-verified-leader-names img {
    float: right;
    height: 16px;
    width: 16px;
    margin-left: 5px;
    margin-top: 2px;
    cursor: pointer;
}

#group-verified-names img:hover, #group-verified-leader-names img:hover {
    background-color: var(--main-theme-secondary);
}

/* Trash here*/

.found-player-arrow {
    position: absolute;
    left: -50%;
    border: solid var(--main-theme-color);
    margin-top: 5px;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.virtualhs {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    background: #eee;
}

#virtualhs-links {
    display: relative;
}

.virtualhs>a {
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid black;
    text-align: center;
    font-size: 1em;
    color: black;
    padding: 0.5em;
    max-height: 1em;
}

.virtualhs>a:hover {
    background: burlywood;
}

#virtualhslinks {
    position: absolute;
    right: 0px;
    top: 0;
    list-style: none;
    text-align: left;
    width: 30%;
    z-index: 1;
    margin: 0;
    padding: 0;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

#virtualhslinks>li {
    background-color: #ddd;
    color: black;
    margin-bottom: 0px;
    cursor: pointer;
}

#virtualhslinks li:hover {
    background-color: burlywood;
    color: black;
}

#virtualhslinks a {
    color: inherit;
    text-decoration: none;
}

/* ------------------ New player track page ------------------ */

#player-wrapper {
    padding: 0;
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: fit-content;
    /* border: 1px solid white; */
    margin: auto;
}

#player-global-wrapper {
    position: relative;
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    overflow: hidden;
    /* grid-gap: 10px; */
    /*     background-color: #393939; */
    /*  border: 1px solid blueviolet; */
}

.profile-header-background {
    content: "";
    background-image: linear-gradient(180deg, rgba(39, 41, 50, 0) 0, rgba(39, 41, 50, .3) 40%, var(--main-theme-fourth));
    background-size: cover;
    background-position: center;
    /* opacity: 0.6 !important; */
    filter: brightness(80%);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

#player-global-wrapper1 {
    content: "";
    background-image: linear-gradient(180deg, rgba(39, 41, 50, 0) 0, rgba(39, 41, 50, .3) 40%, var(--main-theme-fourth)), url('../resources/templebackground.png');
    background-size: cover;
    background-position: center;
    opacity: 0.6 !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

#player-content-wrapper {
    position: relative;
    width: 98%;
    height: fit-content;
    margin: 2% 1% 0% 1%;
    /* border: 1px solid orange; */
}

#player-options {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    /*border: 1px solid cyan;*/
    border-bottom: 1px solid #3b3a38;
    border-top: 1px solid #3b3a38;
    text-align: center;
    margin-top: 1%;
    font-size: 0.95em;
}

#player-options>a {
    vertical-align: middle;
    line-height: 36px;
    height: 36px;
    display: inline-block;
    background-color: var(--main-theme-fourth);
    color: #EDEAEA;
    width: auto;
    flex: 1 0 auto;
    text-decoration: none;
    padding: 0 14px;
    transition: box-shadow 0.3s ease-out;
    transition-property: box-shadow;
    cursor: pointer;
}

#player-image-container, #fantasy-score-container {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.circle-avi-container {
    height: 90px;
    width: 90px;
    margin: 0.375em auto;
    display: block;
}

.circle-avi-container img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.clan-logo-container {
    max-height: 102px;
}

.clan-logo-container img {
    height: 80px;
    width: 80px;
    margin: 0.75em 0;
    border-radius: 50%;
}

#player-name-container {
    position: relative;
    /* width: 25%; */
    height: 100%;
    /* border: 1px solid skyblue; */
    float: left;
    text-align: center;
}

#links-container {
    height: 26px;
    width: 100%;
    position: absolute;
    /*     border: 1px solid gainsboro; */
    bottom: 0;
    margin-left: 50%;
}

#player-stats-container {
    grid-column: span 2;
    width: fit-content;
    position: relative;
    margin: 0 auto;
    height: 100%;
    /* border: 1px solid red; */
}

#misc-container {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap-reverse;
    flex-direction: row;
    position: relative;
    width: 100%;
    height: fit-content;
    /*  border: 1px solid greenyellow; */
}

#misc-container>a>img {
    margin-top: 5px;
}

#player-stats-container>img {
    margin-top: 25px;
}

#name-container {
    position: relative;
    margin: 0 auto;
    height: 40%;
}

#name-container {
    text-shadow: 1px 0 0 var(--main-theme-fourth), 0 -1px 0 var(--main-theme-fourth), 0 1px 0 var(--main-theme-fourth), -1px 0 0 var(--main-theme-fourth);
}

#ehp-xp-container {
    position: absolute;
    margin: 0;
    width: 100%;
    height: 60%;
    /* border: 1px solid purple; */
    bottom: 0%;
}

.stat-display {
    height: 100%;
    width: fit-content;
    display: block;
    float: left;
    text-align: center;
    color: var(--main-theme-sixth);
    margin: 8px 15px;
    text-shadow: 1px 0 0 var(--main-theme-fourth), 0 -1px 0 var(--main-theme-fourth), 0 1px 0 var(--main-theme-fourth), -1px 0 0 var(--main-theme-fourth);
    /* text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; */
}

.misc-logo {
    margin: 2px 0 1px 4px;
    height: 22px;
    width: 22px;
}

.flag-logo {
    /*     display: block;
        margin-left: auto;
        margin-right: auto; */
    margin: 4px 4px;
    height: 16px;
    width: auto;
    /*     margin-top: 5px; */
}

#selected-column {
    height: 34px !important;
    border-bottom: 2px solid skyblue;
}

#player-options>a:hover {
    background-color: var(--main-theme-third);
    cursor: pointer;
}

#verified-container {
    position: absolute;
    width: 40px;
    top: 0;
    right: -40px;
    height: 39px;
}

#verified-container-small {
    position: absolute;
    width: fit-content;
    top: 0;
    height: 18px;
}

.verified-logo {
    position: relative;
    top: 0;
    float: left;
    margin-top: 9px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-left: 16px;
    width: 24px;
    height: 24px;
}

.verified-logo-small {
    position: relative;
    top: 0;
    float: left;
    margin-top: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 18px;
    height: 18px;
}

.verified-tooltip {
    width: fit-content;
    height: 40%;
    display: block;
    float: left;
}

.verified-tooltip-small {
    width: fit-content;
    height: 100%;
    display: block;
    float: left;
}

.verified-tooltip .tooltiptext {
    visibility: hidden;
    width: fit-content;
    background-color: #393939;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 9px 8px;
    margin-left: 5px;
    white-space: nowrap;
    /* Position the tooltip */
    float: right;
    vertical-align: bottom;
    position: absolute;
    z-index: 1;
}

.verified-tooltip-small .tooltiptext {
    visibility: hidden;
    width: fit-content;
    background-color: #393939;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 9px 8px;
    margin-left: 5px;
    top: -35px;
    left: 10px;
    white-space: nowrap;
    /* Position the tooltip */
    float: right;
    vertical-align: bottom;
    position: absolute;
    z-index: 1;
}

.verified-tooltip:hover .tooltiptext, .verified-tooltip-small:hover .tooltiptext {
    visibility: visible;
}

/* ------------------ Profile stats page -------------------*/

.total-stats-table {
    text-align: center;
    position: relative;
    margin: 0 auto;
    /*   border: 1px solid var(--main-theme-third); */
    height: max-content;
    width: 100%;
    color: var(--main-theme-seventh);
    border-spacing: 0px;
    flex: 1 1 0px;
}

.stats-table-flex {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    /* border: 1px solid green; */
}

.total-stats-table td {
    width: 50%;
    font-size: 1em;
    padding: 10px 3.5%;
    border-top: 1px solid var(--main-theme-fifth);
    /*     border-top: 3px solid #242424;
    border-left: 3px solid #242424; */
}

.total-stats-table td:first-child {
    text-align: left;
}

.total-stats-table td:first-child {
    /* border-right: 4px solid #242424;*/
    border-left: 0;
}

.total-stats-table td:last-child {
    /* border-right: 4px solid #242424;*/
}

.total-stats-table th {
    /* border-top: 4px solid #242424;*/
    /*border-left: 4px solid #242424;*/
    user-select: none;
    background-color: var(--main-theme-fourth);
    padding-bottom: 10px;
}

/* .total-stats-table tr:nth-child(even) {
    background-color: #202020;
} */

#stats-bottom-container, #log-container-player {
    width: 98%;
    margin: 0 auto;
    position: relative;
}

.gains-skill {
    width: 15%;
    text-align: left;
    margin-left: 0;
    padding-left: 5px;
    /* border: 1px solid red; */
}

.gains-skill img, .pvm-gains-skill img {
    width: 16px;
    height: 16px;
}

.gains-skill p, .pvm-gains-skill p {
    margin-left: 20px;
}

.gains-xp {
    width: 40%;
    /* border: 1px solid cyan; */
}

.gains-rank {
    width: 15%;
    /*  border: 1px solid orange; */
}

.gains-level {
    width: 15%;
    /* border: 1px solid greenyellow; */
}

.pvm-gains-skill {
    /* width: 10%; */
    text-align: left;
    margin-left: 0;
    padding-left: 5px !important;
    /* border: 1px solid red; */
}

.pvm-gains-xp {
    width: 20%;
}

.pvm-gains-rank {
    width: 20%;
}

.pvm-gains-ehp {
    width: 20%;
}

#filter-container {
    text-align: center;
    position: relative;
    width: 100%;
    height: fit-content;
    margin-bottom: 2em;
    /* border: 1px solid white;*/
    color: var(--main-theme-third);
}

.navigation a {
    text-decoration: none;
}

.navigation {
    background: var(--main-theme-fourth);
    list-style: none;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 35px !important;
    height: 1rem;
}

.navigation li {
    background: var(--main-theme-fourth);
    display: block;
    padding: 0.5rem;
    position: relative;
    text-decoration: none;
    transition-duration: 0.5s;
    z-index: 3;
    min-width: 5rem;
    /*     max-height: 30px; */
    font-size: 1em;
    margin: 0 0.2em;
    text-align: center;
}

.navigation>li {
    border-bottom: 1px solid var(--main-theme-fifth);
}

.navigation li a {
    color: var(--main-theme-third);
}

.navigation li ul li:hover {
    /*     background: var(--main-theme-third);
 */
    background: var(--main-theme-fifth);
    cursor: pointer;
}

.navigation li ul {
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    width: 100%;
    max-height: 500px;
    position: absolute;
    transition: all 0.5s ease;
    margin-top: 0.5rem;
    left: -10%;
    display: none;
}

.navigation li:hover>ul, .navigation li:focus-within>ul, .navigation li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
}

.navigation li ul li {
    clear: both;
    width: 100%;
}

/* ------------------ Graphs -------------------*/

.graph {
    font: 10px "radianceValve", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    font-weight: bold;
    height: 500px;
    margin: 72px 10%;
    width: 80%;
}

.comp-graph-new {
    font: 10px "radianceValve", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    font-weight: bold;
    width: 80%;
    height: 500px;
    margin: 0 auto;
    /* overflow: hidden; */
}

.comp-graph {
    font: 10px "radianceValve", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    font-weight: bold;
    height: 500px;
    float: left;
    margin: 72px 0px;
    width: 80%;
}

.graph-container {
    font: 10px "radianceValve", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    margin: 0 auto;
    width: 85%;
}

.graph-title {
    color: var(--main-theme-seventh);
    position: absolute;
    left: 50%;
    top: -12.5%;
    font-size: 2em;
    font-weight: 400;
    text-align: center;
    width: 300px;
    margin-left: -150px;
}

.graph>svg, .comp-graph>svg, .comp-graph-new>svg {
    width: 100%;
    overflow: visible;
}

.axis path, .axis line {
    fill: none;
    stroke: #a4a4a4;
    shape-rendering: crispEdges;
}

.line {
    fill: none;
    stroke: #d4af37;
    stroke-width: 2.5px;
    pointer-events: none;
}

.line-total {
    fill: none;
    stroke: #9DC5A4;
    stroke-width: 2.5px;
}

.line-eoc {
    fill: none;
    stroke: #0977ab;
    stroke-width: 2.5px;
}

.line-osrs {
    fill: none;
    stroke: #927F5C;
    stroke-width: 2.5px;
}

.comp-graph .line, .comp-graph-new .line {
    stroke-width: 2px;
}

.overlay {
    fill: none;
    pointer-events: all;
}

.focus circle {
    fill: #d4af37;
}

.tooltip {
    width: 150px;
    padding: 4px 10px;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    background-color: white;
    font-size: 14px;
    pointer-events: none;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -ms-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
}

#player-info {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: -150px;
    top: 0;
    width: 138px;
    height: 440px;
    border-radius: 5px;
    padding: 1px 0;
}

.graph-flex-element {
    height: 8%;
    margin: 1% 5px;
}

.color-block {
    display: block;
    position: relative;
    height: 100%;
    float: left;
    width: 3%;
    background-color: pink;
}

.graph-flex-element p {
    height: 50%;
    margin-left: 5%;
    line-height: 22px;
    color: var(--main-theme-seventh);
    font-size: 1.5em;
    font-weight: 400;
    max-width: 75%;
    overflow: hidden;
    float: left;
    min-width: 50%;
}

.graph-flex-element img {
    position: absolute;
    margin: 14px 3px;
    right: 0;
}

#xp {
    margin: 0 0 20px 0;
}

.tooltip div {
    margin: 3px 0;
}

.grid2 {
    height: 100px;
    width: 100px;
}

.tooltip-date, .tooltip-xp {
    font-weight: bold;
}

.grid .tick {
    stroke: grey;
    opacity: 0.4;
    pointer-events: none;
}

.grid path {
    stroke-width: 0;
}

/* ------------------ Profile overview track table -------------------*/

#gains-table-container {
    height: fit-content;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.total-tracking-table {
    text-align: center;
    position: relative;
    width: 100%;
    height: fit-content;
    color: var(--main-theme-third);
    border-spacing: 0px;
    padding: 7px 5px;
}

#tracking-table-dates {
    color: #EDEAEA;
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin: 0 0 1em 0;
}

.total-tracking-table td {
    font-size: 1em;
}

.total-tracking-table td {
    padding-top: 3px;
    padding-bottom: 3px;
}

.total-tracking-table td:first-child {
    padding-left: 10px;
}

.total-tracking-table th span, #fantasy-standings-table th span {
    cursor: pointer;
    user-select: none;
}

.total-tracking-table th {
    user-select: none;
    padding-bottom: 5px;
    font-size: 0.9em;
}

.total-tracking-table tr:nth-child(odd) {
    background-color: #202020;
}

.tracking-skill {
    width: 15%;
    text-align: left;
    margin-left: 0;
    padding-left: 5px;
}

.tracking-skill img {
    width: 16px;
    height: 16px;
}

.tracking-skill p {
    margin-left: 20px;
}

.tracking-xp {
    width: 30%;
}

.tracking-rank {
    width: 15%;
}

.tracking-level {
    width: 15%;
}

.tracking-ehp {
    width: 15%;
}

#medal-container {
    width: 100%;
    min-width: 200px;
    margin: 2% auto;
    height: fit-content;
    position: relative;
    background-color: var(--main-theme-secondary);
    color: var(--main-theme-third);
}

.medal {
    position: relative;
    display: inline-block;
    width: 96%;
    margin: 1% 2%;
    height: 5%;
    border-top: 1px solid var(--main-theme-fifth);
}

.medal:first-child {
    border-top: 0;
}

.record-element-img {
    height: 16px;
    width: 16px;
    margin-top: 5px;
    margin-left: 5px;
    float: left;
    text-align: center;
}

.record-element-text {
    float: left;
    margin-top: 5px;
    margin-left: 15px;
}

.record-element-time {
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    float: right;
}

#lifetime-stats-container {
    position: relative;
    margin: 2% auto;
    padding: 2% 2%;
    height: fit-content;
    background-color: var(--main-theme-secondary);
    box-shadow: rgba(0, 0, 0, 0.14) 5px 3px 8px 0px;
    /* box-shadow: rgb(0 0 0 / 44%) 10px 8px 8px 0px; */
}

#tracking-container {
    position: relative;
    width: 60%;
    min-height: 719px;
    margin: 0% 0 2.5% 2.5%;
    height: fit-content;
    display: inline-block;
}

#stats-container-new {
    color: #EDEAEA;
}

#stats-container-new>#lifetime-stats-container {
    border-radius: 4px;
    background-color: var(--main-theme-eight);
    border: 1px solid var(--main-theme-fifth);
}

#stats-container {
    float: right;
    position: relative;
    width: 25%;
    min-width: 225px;
    margin: 0% 2.5% 2.5% 2.5%;
    height: fit-content;
    color: #EDEAEA;
}

#lifetime-stats-container>p, #update-container>p {
    padding: 10px 3.5%;
}

.lifetime-stats-left {
    width: 42.5%;
    display: inline-block;
    border-bottom: 1px solid var(--main-theme-fifth);
    /* border-right: 1px solid var(--main-theme-fifth); */
}

.lifetime-stats-right {
    width: 42.5%;
    display: inline-block;
    text-align: center;
    border-bottom: 1px solid var(--main-theme-fifth);
    white-space: nowrap;
}

.lifetime-stats-right img {
    height: 15px;
}

#update-container>button {
    text-align: center;
    position: relative;
}

.update-button {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 4px;
    background-color: lightgreen;
    padding: 12px 1.5em;
    margin: 0.5em auto 1em auto;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
    transition: all .15s ease-in-out;
    border: 1px solid black;
    color: black;
}

#update-container>a {
    text-decoration: none;
    margin: 0 auto;
}

#name-testing {
    height: 1000px;
    width: 98%;
    border: 1px solid snow;
    display: relative;
    margin-left: 1%;
}

.selected-field {
    color: snow !important;
}

/* ------------- Virtual hs ---------------*/

#virtual-hiscore-container {
    position: relative;
    text-align: center;
    max-width: 1200px;
    font-size: 1em;
    z-index: 5;
    width: 98%;
    margin: 1% auto;
    padding-top: 2%;
    -webkit-transition: position .5s;
    border-top: 1px solid var(--main-theme-fifth);
}

#virtual-hiscore-container.positionMove {
    position: absolute;
    transition: all 500ms linear;
}

#scores p {
    margin: 3% 0 1% 0;
    font-size: 2em;
}

.virtual-hs-title {
    color: snow !important;
}

.virtual-hs-header-container {
    position: relative;
    display: flex;
    width: 98%;
    height: 246px;
    margin: 2% auto;
    border-top: 1px solid var(--main-theme-fifth);
    /* border: 1px solid purple; */
    max-width: 1200px;
    transition: all .5s linear;
}

.virtual-hs-header-container p {
    color: snow;
    text-align: center;
    margin-top: 10px;
    font-size: 1.1em;
    width: 100%;
}

#book {
    position: relative;
    display: block;
    margin: auto;
    transition: all 500ms linear;
}

.virtual-hs-icon-big {
    cursor: pointer;
    width: 75px;
    height: 65px;
}

.virtual-hs-icon-small {
    cursor: pointer;
    width: 30px;
    height: 25px;
}

.virtual-hs-header-container {
    -moz-animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    animation-name: fadeIn;
    -moz-animation-duration: .5s;
    -webkit-animation-duration: .5s;
    -ms-animation-duration: .5s;
    animation-duration: .5s;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.virtual-hs-header-container.fadeOut {
    height: 0px;
    -moz-animation-name: fadeOut;
    -webkit-animation-name: fadeOut;
    -ms-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

@-keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@-keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.virtual-hs-icon-small:hover {
    width: 35px;
    height: 28px;
    cursor: pointer;
    margin-top: 5px;
}

.virtual-hs-icon-big:hover {
    width: 85px;
    height: 75px;
    margin-top: 12.5px;
    /*     background-color: var(--main-theme-fifth);
 */
}

.virtual-hs-menu-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    z-index: 1;
    width: 98%;
    max-width: 1200px;
    margin: 0 1%;
    height: 80%;
    bottom: 0;
    /* border: 1px solid goldenrod; */
}

.virtual-hs-menu-container>a {
    display: inline-block;
    height: fit-content;
    flex: 1 0 60%;
    margin: 5px;
    padding: 0 5px;
    /* background-color: var(--main-theme-fifth); */
    width: 80%;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
}

.virtual-hs-menu-container>p {
    text-decoration: underline;
    font-weight: bold;
}

.virtual-hs-menu-container>a:hover {
    background-color: var(--main-theme-fifth);
    transition: all 500ms linear;
}

.virtual-hs-link {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: fit-content;
    text-decoration: none;
    color: snow;
}

.form {
    width: fit-content;
    position: relative;
    height: 50px;
    margin: 0 10px;
    /*     overflow: hidden;
 */
}

.form input {
    width: 100%;
    height: 100%;
    color: snow;
    padding-top: 10px;
    border: none;
    outline: none;
    background: var(--main-theme-fourth);
}

.form label {
    position: absolute;
    bottom: 0px;
    left: 0%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* text-align: center; */
    border-bottom: 1px solid var(--main-theme-fifth);
}

.form label::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: -1px;
    height: 100%;
    width: 100%;
    border-bottom: 3px solid #5fa8d3;
    transform: scaleX(0);
    transition: all 0.3s ease;
}

.content-name {
    position: absolute;
    bottom: 5px;
    /* left: 0px; */
    padding-left: 2.5%;
    transition: all 0.3s ease;
    color: var(--main-theme-third);
}

.form input:focus+.label-name .content-name, .form input:valid+.label-name .content-name {
    transform: translateY(-150%);
    font-size: 14px;
    color: #5fa8d3;
}

.form input:focus+.label-name::after, .form input:valid+.label-name::after {
    transform: scaleX(1);
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.form li {
    background: var(--main-theme-fourth);
    display: block;
    float: left;
    padding: 0.5rem 2.5%;
    padding-right: 0;
    position: relative;
    text-decoration: none;
    transition-duration: 0.5s;
    z-index: 3;
    min-width: 5rem;
    border-right: 1px solid var(--main-theme-fifth);
    border-left: 1px solid var(--main-theme-fifth);
    /*     max-height: 30px; */
    font-size: 1em;
    /* text-align: center; */
}

.form>li {
    border-bottom: 1px solid var(--main-theme-fifth);
}

.form a {
    color: var(--main-theme-third);
}

.form ul li:hover {
    /*     background: var(--main-theme-third);
 */
    background: var(--main-theme-fifth);
    cursor: pointer;
}

.form ul {
    visibility: hidden;
    opacity: 0;
    width: 100%;
    position: absolute;
    transition: all 0.5s ease;
    display: none;
    margin-top: -10px;
}

.form:hover>ul, .form li:focus-within>ul,
/* this is the line we add */

.form ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
}

.form ul li {
    clear: both;
    width: 96% !important;
    min-width: 96% !important;
    /*     margin: 0;
    padding: 8px 0; */
}

.form ul:last-child {
    border-bottom: 1px solid var(--main-theme-fifth);
}

#parameter-container {
    position: relative;
    width: 100%;
    height: 50px;
    padding-bottom: 20px;
    /* border: 1px solid pink; */
    text-align: left;
    /* border: 1px solid white;*/
    color: var(--main-theme-third);
}

#centered-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    /*  border: 1px solid green; */
    /* border: 1px solid white;*/
}

.clan-logo {
    position: relative;
    /*     border: 1px solid seashell; */
    margin: 0 auto;
    width: fit-content;
}

.clan-logo>img {
    width: 100px;
    height: 100px;
}

.overview-title-new-tracking-table {
    text-align: left;
    font-size: 1.1em;
    padding-top: 6px;
    margin-bottom: 16px;
}

.overview-title {
    color: #EDEAEA;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.overview-title-left {
    color: #EDEAEA;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.2em;
    margin-top: 25px;
    margin-left: 2px;
    text-align: left;
}

/* GROUP PAGE CSS */

.group-records-container {
    position: relative;
    width: 30%;
    /* min-width: 300px; */
    margin-right: 1%;
    height: fit-content;
    float: right;
    /* border: 1px solid green; */
    /*     background-color: #393939; */
}

.group-logo-header {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.group-overview-container {
    position: relative;
    width: 60%;
    /* min-width: 300px; */
    margin: 0 2.5% 1% 2.5%;
    height: fit-content;
    float: left;
    /* border: 1px solid blanchedalmond; */
    /*     background-color: #393939; */
}

.group-records-table {
    position: relative;
    width: 100%;
    background-color: var(--main-theme-secondary);
    border-collapse: collapse;
    height: fit-content;
    box-shadow: rgba(0, 0, 0, 0.14) 5px 3px 8px 0px;
}

.group-player-highlight, .news-post-container {
    position: relative;
    width: 100%;
    background-color: var(--main-theme-secondary);
    border-collapse: collapse;
    height: fit-content;
    box-shadow: rgba(0, 0, 0, 0.14) 5px 3px 8px 0px;
}

.group-records-table tr th {
    color: var(--main-theme-seventh);
    font-weight: 400;
    border-bottom: 1px solid var(--main-theme-fifth);
    padding: 8px 2px;
    text-align: left;
}

.group-records-table tr td:first-child {
    padding-left: 18px;
}

.group-records-table tr td:last-child {
    padding-right: 16px;
}

.group-records-table tr td {
    color: var(--main-theme-third);
    /* text-align: center; */
    /* border: 1px solid snow; */
    padding: 4px 2px;
}

.group-records-table tr td img {
    margin: 0 auto;
    display: block;
}

.highlighted-player-name {
    color: var(--main-theme-seventh);
    text-align: center;
    width: max-content;
    /* height: 20px; */
    /*     border: 1px solid sienna;
 */
    display: block;
    margin: 5px auto 0 auto;
    position: relative;
}

.highlighted-player-name a {
    color: var(--main-theme-seventh);
    text-decoration: none;
}

.highlighted-player-name a p:hover {
    text-decoration: underline;
}

.detailed-text {
    color: var(--main-theme-third);
    font-size: 0.85em;
    text-align: center;
    height: fit-content;
    width: 50%;
    min-width: 150px;
    display: block;
    margin: 2px auto 0 auto;
    padding-bottom: 10px;
    position: relative;
}

.group-content-container {
    position: relative;
    width: 98%;
    max-width: 1200px;
    height: fit-content;
    /* border: 1px solid white; */
    margin: auto;
}

.green-gain {
    color: lawngreen !important;
}

.group-list-img {
    float: left;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-top: 5px !important;
}

.group-leader-name {
    float: left;
    line-height: 50px;
    color: var(--main-theme-seventh);
}

/* Progress bar */

.myProgress {
    margin-top: 2px;
    width: 75%;
    background-color: grey;
    position: relative;
    float: left;
}

.bigProgress {
    margin-top: 2px;
    margin-left: 2.5%;
    width: 95%;
    background-color: grey;
    position: relative;
    float: left;
}

.myBar {
    height: 4px;
    background-color: green;
}

/*-------- New top navigation-------- */

#header {
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    background: rgba(24, 24, 24, 0.9);
    margin-left: 72px;
    z-index: 10;
}

#logo {
    position: relative;
    float: left;
    height: 50px;
    width: 75px;
}

.logo-img {
    height: 100%;
    display: block;
    margin: 0 auto;
}

#logo-text {
    position: relative;
    float: left;
    height: 50px;
    width: fit-content;
    line-height: 50px;
    font-size: 1.3em;
    color: var(--main-theme-seventh);
    text-shadow: var(--main-theme-fifth) 2px 1px 2px;
}

#list-container {
    position: relative;
    float: right;
    width: fit-content;
    height: 100%;
    /* border: 1px solid white; */
}

.header-options li {
    margin: 0 7.5px;
    width: fit-content;
    height: 100%;
    line-height: 50px;
}

.header-options {
    font-size: 1.2em;
    color: var(--main-theme-seventh);
    width: fit-content;
    height: 100%;
    list-style-type: none;
    overflow: hidden;
}

#hidden-dropdown-menu {
    position: fixed;
    float: left;
    border: 1px solid yellowgreen;
    width: 200px;
    height: fit-content;
}

#hidden-dropdown-menu ul li {
    border: 1px solid greenyellow;
    width: 100%;
    height: 36px;
    list-style-type: none;
}

#hamburger {
    position: relative;
    float: left;
    height: 50px;
    width: 75px;
}

.hamburger-img {
    height: 80%;
    display: block;
    margin: 10px auto;
}

/* ------------ Competitions ------------ */

#competition-wrapper {
    max-width: 1200px;
    width: 98%;
    margin: 0 auto;
    /* border: 1px solid orange; */
}

#competition-header-container {
    position: relative;
    margin: 0 auto;
    /* border: 1px solid white; */
    height: fit-content;
    width: 40%;
}

#competition-tables-container {
    position: relative;
    margin: 0 auto;
    /* border: 1px solid white; */
    height: fit-content;
    width: 98%;
    max-width: 900px;
}

#icon {
    position: relative;
    width: 65px;
    height: 65px;
    margin: 0 auto;
    display: block;
}

#competitions-title {
    position: relative;
    width: 100%;
    height: 50px;
    color: var(--main-theme-seventh);
    text-align: center;
    font-weight: 500;
}

#competition-list-container {
    position: relative;
    margin: 0 auto;
    /*  border: 1px solid white; */
    height: fit-content;
    width: 100%;
}

.competition-table {
    background-color: var(--main-theme-secondary);
    height: 100px;
    width: 100%;
    border-spacing: 0;
    box-shadow: rgba(0, 0, 0, 0.14) 5px 3px 8px 0px;
}

#comp-detail-container {
    background-color: var(--main-theme-fifth);
    height: 76px;
    width: 100%;
    border: 1px solid snow;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#comp-detail-container>div {
    flex: 1 0 auto;
    color: var(--main-theme-seventh);
    text-align: center;
    margin-top: 5px;
    font-size: 1em;
}

#comp-detail-container>div>p {
    /* margin-top: 10px; */
    font-size: 1.1em;
}

#comp-button-container {
    display: block;
    position: relative;
    margin: 2em auto 0 auto;
    width: max-content;
}

.centered-img {
    display: block;
    margin: auto;
    margin-top: 11px;
}

.pen-img {
    display: block;
    margin: auto;
    height: 36px;
    width: 36x;
    margin-top: 11px;
}

.title {
    color: #EDEAEA;
    margin-bottom: 10px;
    font-size: 1.2em;
    margin-top: 25px;
    margin-left: 0px;
    text-align: left;
    width: 100%;
}

.competition-th {
    border-bottom: 1px solid var(--main-theme-fifth);
    color: var(--main-theme-seventh);
    font-weight: 400;
    text-align: left;
    padding: 8px 0px;
}

.competition-table tr td {
    color: var(--main-theme-third);
    padding: 8px 0;
}

.competition-table tr td:first-child {
    padding-left: 18px;
}

#create-competition-container {
    max-width: 700px;
    /* min-height: 400px; */
    height: fit-content;
    width: 98%;
    margin: 0 auto;
    background-color: #242424;
    /* border: 1px solid orange; */
    padding: 1px 0 2% 0;
}

#skill-select-competition {
    position: relative;
    margin: 0px;
    width: 15em;
    color: snow;
    padding: 4px 35px 4px 4px;
    font-size: 16px;
    height: 34px;
    border: 0;
    display: block;
    background-color: #393939;
}

#skill-select-competition option {
    margin: 40px;
    width: 12em;
    background: var(--main-theme-fifth);
    color: var(--main-theme-seventh);
}

.date {
    border: 1px solid #ccc;
    color: var(--main-theme-seventh);
    margin: 0.5em 0.5em 0.5em 0;
    vertical-align: middle;
    outline: 0;
    padding: 4px 4px 4px 4px;
    border-radius: 4px;
    width: 9em;
    font-family: radianceValve;
    background: #393939;
}

.small-red-text {
    font-size: 0.8em;
    color: red;
}

.small-red-text-ehp {
    font-size: 0.85em;
    color: red;
    text-align: center;
    margin-top: 1rem;
}

.strike {
    text-decoration: line-through;
}

#standing-info-container {
    background-color: var(--main-theme-fifth);
    height: 100px;
    width: 100%;
    border: 1px solid white;
}

#comp-header-wrapper {
    width: fit-content;
    /*     border: 1px solid white;
 */
    position: relative;
    margin: 32px auto 10px auto;
    text-align: center;
}

#comp-header-wrapper img, #comp-header-wrapper h1 {
    float: left;
    position: relative;
    display: block;
    line-height: 50px;
}

#comp-header-wrapper img {
    margin: 12.5px 1em 0 1em;
    max-height: 23px;
}

.small-text {
    color: var(--main-theme-third);
    font-weight: 400;
    font-size: 1.1em;
}

.ready-green {
    color: rgba(72, 183, 76);
}

.coming-up-red {
    color: rgb(65, 8, 7);
}

#comp-table-container {
    position: relative;
    width: 98%;
    margin: 26px auto;
    /* border: 1px solid snow; */
}

#comp-table {
    position: relative;
    width: 100%;
    border-spacing: 0;
}

#comp-table th {
    font-weight: 400;
    border-bottom: 1px solid var(--main-theme-third);
    text-align: left;
    padding: 5px;
    border-left: 1px solid var(--main-theme-third);
    font-size: 1.05em;
}

#comp-table td {
    color: var(--main-theme-third);
    padding: 5px 5px 5px 5px;
    border-left: 1px solid var(--main-theme-third);
}

#comp-table td:first-child, #comp-table th:first-child {
    text-align: center;
    border-left: 0;
}

#comp-table tr:first-child {
    color: var(--main-theme-seventh);
}

.bottom-footer {
    border-top: 1px solid var(--main-theme-third);
    margin-top: 100px;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.footer-text {
    position: relative;
    float: left;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 3.125em;
    margin-right: 1.25em;
    width: fit-content;
    line-height: 2em;
    font-size: 2em;
    color: var(--main-theme-seventh);
}

.subtle-text {
    display: block;
    margin: 38px auto;
    position: relative;
    width: fit-content;
    line-height: 1.5em;
    font-size: 1em;
    color: var(--main-theme-third);
}

.social-media-icon {
    display: inline-block;
    margin: 40px 2px;
    width: 24px;
    height: 20px;
    background-size: 24px 20px;
    /* background-size: cover; */
    cursor: pointer;
    background-image: url('../resources/footer/Twitter_Bird.svg');
}

#index-image-container {
    width: 100%;
    height: 500px;
    position: relative;
}

#title-container {
    text-align: center;
    padding-top: 120px;
    width: 500px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

#big-name {
    text-transform: uppercase;
    font-size: 5.5rem;
    font-weight: 500;
    line-height: 1.2;
    user-select: none;
    color: var(--main-theme-seventh);
    text-shadow: rgb(0, 0, 0) 0px 0px 3px;
}

#small-desc {
    color: var(--main-theme-seventh);
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 20px;
    text-shadow: rgb(0, 0, 0) 0px 0px 3px;
    text-align: center;
}

#home-page-button {
    background-color: rgba(0, 0, 0, 0.4) !important;
    user-select: none;
    line-height: 38px;
    color: var(--main-theme-seventh);
    display: block;
    position: relative;
    width: 45%;
    border: 2px solid var(--main-theme-seventh);
    margin: 0 auto;
    /* height: 38px; */
    background-color: transparent;
    font-weight: 300;
    font-size: 16px;
    cursor: pointer;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

#home-page-button:hover {
    background-color: rgb(102, 187, 106) !important;
}

.social-media-icon:hover, .social-media-icon:focus {
    /*     filter: invert(56%) sepia(90%) saturate(2554%) hue-rotate(176deg) brightness(95%) contrast(100%);    
 */
}

#bottom-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 97.5%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    /* border: 1px solid violet; */
}

.news-container {
    display: inline-block;
    width: 65%;
    position: relative;
    /* border: 1px solid greenyellow; */
    margin: 0 0 0 1%;
}

.main-title {
    color: var(--main-theme-sixth);
    text-align: center;
    padding: 20px 0;
}

.sub-title {
    color: var(--main-theme-sixth);
    font-size: 22px;
    line-height: 32px;
    margin: 2em 0 8px 0;
    font-weight: 300;
    padding: 0 10px;
}

.news-post-container li {
    color: var(--main-theme-third);
    padding: 0 10px;
    line-height: 22px;
}

.news-post-container ul, .news-post-container ol {
    width: 100%;
    list-style-position: inside;
}

.news-post-container ul span {
    position: relative;
    left: -6px;
}

.news-post-container p, .tools-text {
    color: var(--main-theme-third);
    margin: 16px 0;
    padding: 0 10px;
    font-size: 17px;
    line-height: 27px;
}

.news-post-container p a, .news-post-container h1 a {
    color: var(--main-theme-sixth);
    text-decoration: none;
}

.news-post-container p a:hover, .news-post-container h1 a:hover {
    text-decoration: underline;
}

.poster-details {
    color: var(--main-theme-sixth);
    margin: 16px 0;
    padding: 5px 30px 30px 30px;
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: right;
    font-weight: 300;
    position: relative;
}

.news-name {
    float: right;
    color: var(--main-theme-third);
}

.news-date {
    float: right;
}

.news-date>p {
    margin: 0;
}

.side-stats-container {
    /*  float: right; */
    margin: 0 1% 0 0;
    width: 20%;
    position: relative;
    /* border: 1px solid wheat; */
    font-weight: 400;
}

.big-rank {
    color: var(--main-theme-seventh);
    font-size: 2em;
}

.latest-records {
    position: relative;
    width: 100%;
    margin: 0 1%;
    height: fit-content;
}

.index-player-list {
    position: relative;
    width: 100%;
    background-color: var(--main-theme-secondary);
    border-collapse: collapse;
    height: fit-content;
    box-shadow: rgba(0, 0, 0, 0.14) 5px 3px 8px 0px;
}

.index-player-list tr th {
    color: var(--main-theme-seventh);
    font-weight: 400;
    border-bottom: 1px solid var(--main-theme-fifth);
    padding: 8px 2px;
    text-align: left;
}

.index-player-list tr td {
    color: var(--main-theme-sixth);
    /* text-align: center; */
    /* border: 1px solid snow; */
    padding: 4px 2px;
}

.small-date {
    color: var(--main-theme-third);
    font-size: 0.7em;
    margin-left: 3px;
}

.small-date-comp {
    color: var(--main-theme-sixth);
    font-size: 0.8em !important;
    margin-left: 3px;
}

.record-menu-item {
    text-decoration: none;
    color: var(--main-theme-sixth);
    line-height: 36px;
    font-size: 0.95em;
    text-shadow: rgb(0, 0, 0) 0px 0px 3px;
    /* width: 33% !important; */
}

.record-menu-item:nth-child(n+2) {
    border-left: 1px solid var(--main-theme-fifth);
}

/* ------- Update table ------- */

#update-container {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding-top: 6px;
}

#update-table-container {
    color: var(--main-theme-third);
    position: relative;
    display: grid;
    justify-content: space-between;
    grid-template-columns: 2fr repeat(25, 1fr);
    width: 98%;
    /* min-width: 1100px; */
    margin-left: 1%;
    margin-right: 1%;
    /* overflow-x: scroll; */
    overflow-y: hidden;
    white-space: nowrap;
    /* border: 1px solid yellow; */
}

#update-table-container>img {
    display: block;
    margin: 0 auto;
}

.update-table-header {
    border-bottom: 1px solid var(--main-theme-fifth);
    text-align: center;
    margin-bottom: 1em;
    min-width: 42px;
}

.update-table-header img {
    max-width: 30px;
    max-height: 30px;
}

.update-table-xp {
    overflow: hidden;
    text-align: center;
    padding-top: 10px;
    font-size: 0.90em;
}

.update-table-date {
    overflow: hidden;
    text-align: center;
    padding-top: 10px;
    white-space: normal;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

/* ------------- Compare players ------------*/

#compare-header {
    color: var(--main-theme-third);
    position: relative;
    display: grid;
    justify-content: space-around;
    grid-template-columns: 1fr/* 4fr */
    ;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
    /* border: 1px solid yellow; */
}

.mini-text {
    font-size: 0.75em;
    margin: 3px auto;
    color: var(--main-theme-third);
}

#mrcml-icon {
    width: 10rem;
    height: auto;
    display: block;
    margin: 0 auto;
}

.oskar-container {
    /* margin-top: 2.5rem; */
    padding-top: 2rem;
    display: block;
    width: 100%;
    position: relative;
    height: 10rem;
    box-shadow: rgba(0, 0, 0, 0.14) 5px 3px 8px 0px
}

.oskar-title {
    color: var(--main-theme-seventh);
    font-size: 2.5rem;
    font-weight: 300;
    margin-top: 1rem;
    text-shadow: rgb(0, 0, 0) 0px 0px 3px;
    text-align: center;
}

.arrow-icon {
    margin-left: 2px;
}

/* Checkbox */

/* Customize the label (the container) */

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 1.75em;
    margin-top: 1em;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: max-content;
}

/* Hide the browser's default checkbox */

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */

.checkbox-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1em;
    width: 1em;
    border: 2px solid var(--main-theme-third);
    /* background-color: #eee; */
}

/* On mouse-over, add a grey background color */

.checkbox-container:hover input~.checkmark {
    /* background-color: #ccc; */
}

/* When the checkbox is checked, add a blue background */

.checkbox-container input:checked~.checkmark {
    background-color: #2196F3;
    border: 2px solid #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkbox-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */

.checkbox-container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */

.checkbox-container .checkmark:after {
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#team-competition-form {
    width: 100%;
    display: grid;
    grid-template-rows: 1em 1.75em;
    grid-template-columns: 1fr 3fr;
    grid-gap: 0.5em;
}

#team-competition-grid-item {
    display: flex;
}

#team-expand {
    position: absolute;
    right: -1em;
    top: 0em;
    margin-top: 3px;
    cursor: pointer;
    content: "\00B1";
    color: white;
    font-weight: bold;
    font-size: 1.25em;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    user-select: none;
    /* background-color: #0000dd; */
}

#team-comp-flag {
    margin-top: 3px;
    margin-right: 20%;
}

#show-rank-switch {
    line-height: 34px;
    font-size: 1.5em;
    margin-left: 0.5em;
    height: 34px;
    position: relative;
    float: left;
    color: var(--main-theme-seventh);
    font-weight: 400;
}

.pet-ladder-container {
    position: relative;
    max-width: 1000px;
    width: 90%;
    height: max-content;
    margin: 1em auto 0 auto;
}

.pet-ladder-table {
    position: relative;
    width: 100%;
    column-gap: 3px;
    border-spacing: 0;
    /* border-collapse: collapse; */
}

.pet-kc-container {
    position: relative;
    margin: 3em auto 0 auto;
    width: 75%;
    max-width: 600px;
    display: block;
    background-color: var(--main-theme-secondary);
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.14) 5px 3px 8px 0px;
}

.pet-kc-container th {
    height: 2em;
}

#pet-kc-table {
    position: relative;
    width: 1300px;
    column-gap: 3px;
    border-spacing: 0;
    margin: 0 auto;
    table-layout: fixed;
}

.hours-table-row td {
    padding: 2.5px !important;
}

.hours-table-row:hover {
    background-color: #181818;
}

.pet-ladder-table th {
    padding: 12px 0;
    border: 0;
    font-weight: 300;
}

.pet-ladder-table img {
    padding-top: 1px;
}

.pet-icon {
    width: 20px;
    height: 20px;
    text-align: center;
}

.pet-ladder-table td {
    padding: 3.5px 0;
    text-align: center;
    height: 1.5em;
    color: var(--main-theme-third);
    border-top: 0.5px solid var(--main-theme-fifth);
    border-bottom: 0.5px solid var(--main-theme-fifth);
    background-color: #141414;
}

.pet-ladder-table tr {
    border-radius: 3px;
}

#pet-kc-table td {
    padding: 5px 0;
}

#pet-kc-table th {
    border-bottom: 1px solid var(--main-theme-seventh);
}

.spacer-row {
    height: 0.3em;
}

.pet-ladder-table tr td:first-child {
    border-radius: 3px 0 0 3px;
    border-left: 0.5px solid var(--main-theme-fifth);
}

.pet-ladder-table tr td:last-child {
    border-radius: 0 3px 3px 0;
    border-right: 0.5px solid var(--main-theme-fifth);
}

/* Log table */

.alog-name-column {
    position: relative;
    min-width: 76px;
    text-align: center;
    padding: 4px 0 4px 4px;
    border: 1px solid var(--main-theme-fifth);
}

.alog-date-container {
    position: relative;
    float: right;
    margin-right: 8px;
    color: var(--main-theme-third);
}

.alog-table tr {
    background-color: var(--main-theme-eight);
    border-radius: 6px;
}

.alog-table {
    position: relative;
    width: 100%;
    background-color: var(--main-theme-secondary);
    border-collapse: collapse;
    height: fit-content;
    box-shadow: rgba(0, 0, 0, 0.14) 5px 3px 8px 0px;
}

.alog-table tr td {
    color: var(--main-theme-sixth);
    padding: 4px 2px;
}

.result-mark {
    position: absolute;
    left: 0;
    margin-top: 8px;
    margin-left: 8px;
    font-size: 0.8em;
}

/* CAUTION: Internet Explorer hackery ahead */

select::-ms-expand {
    display: none;
    /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */

@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

@media only screen and (max-width: 770px) {
    #player-global-wrapper {
        grid-template-columns: 50% 50%;
    }
    #player-name-container {
        grid-column: span 2;
    }
    #player-image-container {
        grid-column: span 2;
        width: 100%;
    }
    #player-image-container img {
        display: block;
        margin: 0 auto;
    }
    .clan-logo {
        grid-column: span 2;
    }
    .hide {
        display: none;
    }
    #tracking-container {
        width: 90%;
        margin: 2.5% auto;
        float: none;
        display: block;
    }
    #stats-container {
        width: 90%;
        min-width: 225px;
        margin: 2.5% auto;
        float: none;
    }
    #update-container {
        display: flex;
        position: relative;
        margin-right: 0%;
    }
    .top-item {
        border-top: 0 !important;
    }
}

.vertical-center {
    white-space: normal;
    margin: 0;
    position: absolute;
    margin-left: 60px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.vertical-center-right {
    white-space: normal;
    position: relative;
    float: right;
    margin-right: 10px;
    margin-top: 1em;
}

/* Card view css */

.card-view-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card-view-item {
    flex: 1 0 auto;
    text-align: center;
    position: relative;
    height: 75px;
    width: 300px;
    /* background-image: linear-gradient(180deg, rgba(39, 41, 50, 0) 0, rgba(39, 41, 50, .3) 40%, var(--main-theme-fourth)); */
    border: 2px solid #222423;
    border-top-width: 4px;
    border-bottom-width: 4px;
    margin: 8px 0.5em;
    cursor: pointer;
    user-select: none;
    transition: border .2s ease-in-out;
}

.card-label {
    position: absolute;
    width: 100%;
    bottom: 8px;
    height: 40%;
    color: pink;
    text-align: center;
}

.card-view-item:hover {
    border-top-color: #c49332;
    border-bottom-color: #c49332;
}

.card-view-item:hover>.card-background-img {
    opacity: 1;
}

.card-selected {
    border-top-color: #c49332;
    border-bottom-color: #c49332;
}

.card-background-selected {
    opacity: 1 !important;
}

.card-view-item span {
    background-color: rgba(0, 0, 0, .5);
    font-size: 1.5em;
    padding: 5px 17.5px;
    color: snow;
    bottom: 0;
}

.card-background-img {
    content: "";
    background-image: linear-gradient(180deg, rgba(39, 41, 50, 0) 0, rgba(39, 41, 50, .3) 40%, var(--main-theme-fourth));
    background-size: cover;
    background-position: center;
    /* opacity: 0.4 !important; */
    opacity: 0.4;
    transition: opacity .2s ease-in-out;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.mobile-record-tables {
    display: flex;
}

.footnote {
    flex: 0 0 100%;
    /* color: #C4C4C4; */
    color: var(--main-theme-third);
    font-size: 14px;
    margin: 6px 0;
    margin-left: 2em;
}

/* Custom radio button selection */

.custom-radio-buttons {
    width: 100%;
    margin: 1em auto;
    text-align: center;
}

.custom-radio-buttons .custom-radio input {
    display: none;
}

.custom-radio-buttons .custom-radio .radio-btn {
    margin: 10px;
    width: 36px;
    height: 36px;
    border: 3px solid transparent;
    display: inline-block;
    border-radius: 10px;
    position: relative;
    text-align: center;
    box-shadow: 0 0 10px #c3c3c367;
    cursor: pointer;
    user-select: none;
}

.custom-radio-buttons .custom-radio .radio-btn>i {
    color: #ffffff;
    background-color: #8373e6;
    font-size: 20px;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) scale(4);
    border-radius: 50px;
    padding: 3px;
    transition: 0.2s;
    pointer-events: none;
    opacity: 0;
}

.custom-radio-buttons .radio-icon img {
    margin-top: 8px;
    margin-bottom: 4px;
    max-width: 18px;
    max-height: 18px;
}

.custom-radio-buttons .radio-btn .radio-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-radio-buttons .radio-btn .radio-icon i {
    color: #8373e6;
    line-height: 24px;
    font-size: 60px;
}

.custom-radio-buttons .radio-btn .radio-icon h3 {
    color: #8373e6;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
}

.custom-radio-buttons .custom-radio input:checked+.radio-btn {
    border: 2px solid #8373e6;
}

.custom-radio-buttons .custom-radio input:checked+.radio-btn>i {
    opacity: 1;
    transform: translateX(-50%) scale(0.6);
}

#profile-content-container {
    position: relative;
    width: 96%;
    margin: 0 auto;
}

#custom-background-cover {
    position: absolute;
    filter: brightness(25%);
    z-index: -3;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all linear .7s;
}

.main-theme-container {
    box-shadow: rgb(0 0 0 / 44%) 10px 8px 8px 0px;
    border-radius: 4px;
    background-color: var(--main-theme-secondary);
    border: 1px solid var(--main-theme-fifth);
}

.group-view-container {
    width: 90%;
    margin: 0 auto 5% auto;
    position: relative;
    background-color: var(--main-theme-secondary);
    color: var(--main-theme-third);
    max-width: 1000px;
}

#all-groups-table {
    /* min-height: 700px; */
}

#clear-group-search-icon {
    position: absolute;
    right: 5px;
    bottom: 5px;
    cursor: pointer;
}

#all-groups-table tr td {
    height: 24px;
}

.search-box-container {
    height: 100px;
    width: max-content;
    position: relative;
    margin: 0 auto 2em auto;
    text-align: center;
}

.group-search-button {
    display: inline-block;
    position: relative;
    padding: 0.55em 1.2em;
    /* border: 0.1em solid #FFFFFF; */
    margin: 0.75em auto 0 auto;
    border-radius: 0.12em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background-color: #404040;
    /* background-color: var(--main-theme-secondary); */
    color: var(--main-theme-sixth);
    text-align: center;
    transition: all 0.2s;
    box-shadow: rgb(255 255 255 / 12%) 0px 0px 4px, rgb(255 255 255 / 12%) 0px 0px 4px;
    text-transform: uppercase;
    user-select: none;
    cursor: pointer;
}

.group-search-button:hover {
    /* color: #000000; */
    background-color: #565656;
}

.verified-clans-container, .featured-clans-container {
    margin-bottom: 5em;
}

.group-table-name {
    color: var(--main-theme-seventh);
}

@media all and (max-width:30em) {
    .group-search-button {
        display: block;
        margin: 0.4em auto;
    }
}

@media only screen and (max-width: 880px) {
    .overview-title {
        font-size: 1.3em;
    }
    .fantasy-flag {
        margin-right: 25%;
    }
    .bottom-footer {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }
    .bottom-footer>div {
        height: 60px;
    }
    .social-media-icon {
        margin: 0;
    }
    .footer-text {
        height: 50px;
        line-height: 50px;
        float: none;
        margin: 0 auto;
    }
    .subtle-text {
        height: 50px;
        line-height: 50px;
        margin: 6px auto;
    }
}

@media only screen and (max-width: 700px) {
    #mobile-records-table-container {
        display: flex;
    }
    #records-table-container {
        display: none;
    }
    #team-comp-flag {
        margin-right: 0;
    }
}

@media only screen and (max-width: 600px) {
    .hide600 {
        display: none !important;
    }
    .expand600 {
        width: 15%;
    }
    .fantasy-flag {
        margin-right: 10%;
    }
    .fantasy-progress {
        width: 80% !important;
    }
    .group-records-table tr td:nth-child(2) {
        width: 25%;
    }
    #logo-text {
        display: none;
    }
    .graph-container {
        margin: 0;
    }
}

@media only screen and (max-width: 350px) {
    .group-list-img {
        display: none !important;
    }
}

@media only screen and (max-width: 500px) {
    #big-name {
        font-size: 3.3rem;
    }
    #small-desc {
        font-size: 1.5rem;
    }
    .news-post-container>img {
        display: none;
    }
}

/* For groups */

/* 
@media only screen and (max-width: 700px) {
    .group-table-xp,
    #group-table-title:nth-child(4) {
        display: none;
    }
    .group-table-name {
        width: 20%;
    }
} */