@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900);

:root {
    --primary: 28, 29, 34;
    --primary2: 50, 50, 50;
    --seccondary: 42, 45, 52;
    --green: 81, 140, 81;
    --darkgreen: 81, 140, 81;
    --brightdarkgreen:81, 175, 81;
    --blue: 50, 78, 168;
    --foxblue: 165, 195, 220;
    --darkfoxblue: 71, 86, 99;
    --red: 140, 81, 81;
    --redbright: 191, 82, 82;
    --orange: 194, 116, 62

}

body {
    margin: 0;
    font-family: "Gilroy";
    background-color: #222222;
    /* display: flex; */
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
}

.home-page {
    width: 100%;
    height: 94vh;
}

.home-page > .img-container {
    height: 40vh;
    width: 100%;

    position: relative;

    left: 50%;
    transform: translate(-50%, 0%);

    z-index: 999;
}

.home-page > .img-container > .head-container {
    height: 100%;
    align-items: center;
    justify-content: center;

    display: flex;
    flex-direction: column;

    background-size:cover;
    background-position: center;

}

.home-page > .img-container > .head-container img {
    width: 26%;
}

.home-page > .img-container > .head-container > .input-container {
    width: 30%;
    padding: 10px;
    
    box-sizing: border-box;
    border-radius: 4px;

    background-color: white;

    position: relative;
    z-index: 1;
}

.home-page > .img-container > .head-container > .input-container > .bar input {
    outline: none;
    border: none;

    background-color: transparent;

    font-size: 14px;

    width: 90%;
}

.home-page > .img-container > .head-container > .input-container > .bar i {
    transition: 0.2s ease;
}

.home-page > .img-container > .head-container > .input-container > .bar  #search-dropdown {
    position: absolute;
    right: 1vw;
}

.home-page > .img-container > .head-container > .input-container > .bar  #search-dropdown:hover {
    color: gray;
    cursor: pointer;
}

.home-page > .img-container > .head-container > .input-container > .search-results {
    max-height: 200px;

    height: fit-content;

    position: absolute;
    left: 0;

    background-color: white;
    width: 100%;

    z-index: 9999;

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.home-page > .img-container > .head-container > .input-container > .search-results > .search-result {
    height: 5vh;

    display: flex;

    align-items: center;
    width: 95%;
    margin: 0 auto;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;

    overflow-y: scroll;

    position: relative;
}

.home-page > .img-container > .head-container > .input-container > .search-results > .search-result span {
    margin-left: 10px;
}

.home-page > .img-container > .head-container > .input-container > .search-results > .search-result > .status {
    position: absolute;
    right: 10px;
    color: rgba(var(--red), 1);
    background-color: rgba(var(--red), 0.1);
    padding: 4px;
    border-radius: 2px;
}

.home-page > .img-container > .head-container > .input-container > .search-results > .search-result > .status.open {
    color: rgba(var(--green), 1);
    background-color: rgba(var(--green), 0.1);
}

.home-page > .img-container > .head-container > .input-container > .search-results > .search-result:hover {
    background-color: rgba(128, 128, 128, 0.371);
    cursor: pointer;
    border-radius: 4px;
}

/* PRELOADER CSS */
.page-loader {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: #272727d4;
    z-index: 1000;
}

.txt {
    color: #666;
    text-align: center;
    top: 40%;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    font-weight: bold;
    line-height: 1.5;
}

/* SPINNER ANIMATION */
.spinner {
    position: relative;
    top: 35%;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background-color: #fff;

    border-radius: 100%;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}


@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}

.container {
    width: 100%;
    height: 92vh;
    overflow-y: scroll;
    /* filter: blur(30px);  */
}

.navbar {
    width: 100vw;
    height: 6vh;
    background-color: rgba(var(--seccondary));
    display: flex;
    color: white;
    position: relative;
    align-items: center;
}

.navbar img {
    height: 100%;

    position: relative;
    left: 1%;
    top: -1%;
}

.navbar>.buttons {
    position: relative;
    left: 3vw;
    display: flex;
    align-items: center;
    height: 70%;
    align-self: center;
    margin-right: 5vw;
}

.navbar>.buttons>.nav-button {

    height: 44px;
    min-width: 78px;
    padding: 0 19.5555555556px;
    font-size: .875rem;
    color: #fff;

    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 500;
    letter-spacing: .0892857143em;
    justify-content: center;
    outline: 0;
    position: relative;
    text-decoration: none;
    text-indent: .0892857143em;
    text-transform: uppercase;
    transition-duration: .28s;
    transition-property: box-shadow, transform, opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

.navbar>.buttons>.nav-button>.content {
    align-items: center;
    color: inherit;
    display: flex;
    flex: 1 0 auto;
    justify-content: inherit;
    line-height: normal;
    position: relative;
    transition: inherit;
    transition-property: opacity;
}

.navbar>.buttons>.nav-button>.content i {
    align-items: center;
    display: inline-flex;
    font-feature-settings: "liga";
    font-size: 18px;
    justify-content: center;
    letter-spacing: normal;
    line-height: 1;
    position: relative;
    text-indent: 0;
    transition: .3s cubic-bezier(.25, .8, .5, 1), visibility 0s;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.navbar>.buttons>.nav-button>.content span {
    margin-left: 8px !important;
}


.navbar>.buttons>.nav-button:hover {
    cursor: pointer;
}

.navbar>.actions {
    display: flex;
    height: 60%;
    float: right;
    position: absolute;
    right: 10px;
}

.navbar>.actions>.action {
    height: 100%;
    background-color: rgba(var(--primary));
    border-radius: 3px;
}

.navbar>.actions>.search>.search-results {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 99;

    background-color: rgba(var(--primary2));
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

    border-radius: 0px 0px 3px 3px;
}

.navbar>.actions>.search>.search-results>.account {
    display: flex;
    padding: 7px 0;
    position: relative;
    align-items: center;
}

.navbar>.actions>.search>.search-results>.account:hover {
    cursor: pointer;
}

.navbar>.actions>.search>.search-results>.account>.name {
    font-size: 15px;
    margin-left: 10px;
    
}

.navbar>.actions>.search>.search-results>.account>.accountid {
    position: absolute;
    right: 10px;
    font-size: 12px;
    background-color: #475663;
    padding: 3px 5px;
    border-radius: 3px;

    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.navbar>.actions>.search>.search-container {
    align-items: center;
    display: flex;
    height: 100%;
}

.navbar>.actions>.search>.search-container i {
    margin: 0 10px;
    font-size: 12px;
}

.navbar>.actions>.search>.search-container input {
    outline: none;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    width: 15vw;
    font-weight: 500;
}

.navbar>.actions>.search>.search-container input::placeholder {
    color: rgb(208, 208, 208);
    font-weight: 500;
}

.navbar>.actions>.user {
    display: flex;
    margin-left: 1vw;

    background: transparent !important;
    align-items: center;
}

.navbar>.actions>.user img {
    height: 100%;
}

.navbar>.actions>.user>.name {
    margin-left: 7px;
}

.navbar>.actions>.user>.name.login-btn {
    margin-left: 7px;
    margin-right: 10px;
    background-color: rgba(var(--primary));
    padding: 10px;
    border-radius: 6px;
}

.navbar>.actions>.user>.name.login-btn i {
    font-size: 14px;
    margin-left: 2px;
}

.navbar>.actions>.user>.name.login-btn:hover {
    opacity: 0.8;
    cursor: pointer;
}

.navbar>.user-dropdown {
    width: 7vw;
    height: fit-content;
    background-color: rgba(var(--seccondary));
    position: absolute;
    /* right: 0; */
    top: 101.4%;
    right: 0.5vw;
    z-index: 99;
    border-radius: 0px 0px 4px 4px;

    display: none;
}

.navbar>.user-dropdown > .button {
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 10px;
    font-size: 14px;
}

.navbar>.user-dropdown > .button:hover {
    cursor: pointer;
    background-color: rgb(255, 255, 255, .1)
}

.navbar>.user-dropdown > .button i {
    margin-right: 8px;
    margin-left: 8px;
    font-size: 13px;
}

.navbar>.user-dropdown > .button > .nexticon {
    position: absolute; 
    right: 0;

    font-size: 9px;
    color: #919191;
}

.navbar>.profile {
    background-color: rgb(87, 87, 87);
    box-shadow: -1px 0px 29px -3px rgba(var(--seccondary), 1);
    display: flex;
    height: 5vh;
    line-height: 5vh;
    padding: 5px;
    border-radius: 4px;

    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translate(0%, -50%);

    transition: 0.4s;
    cursor: pointer;
}

.navbar>.profile:hover {
    background-color: rgb(39, 39, 39);
    box-shadow: -1px 0px 29px -3px rgba(87, 87, 87);
    transition: 0.4s;
}

.navbar>.profile img {
    height: 5vh;
}

.main-page {
    width: 100%;
    height: 93vh;
}

.main-page>.header {
    color: rgb(199, 199, 199);
    line-height: 5vh;
    height: 15vh;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 5vh;
    margin-top: 1vh;
    background-color: rgba(var(--seccondary), 1);
    border-radius: 3px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.main-page>.header>.info {
    line-height: normal;
    height: 75%;
    width: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;

    box-sizing: border-box;
    padding: 0 20px;
}

.main-page>.header>.info>.name {
    font-size: 35px;
    color: white;
    margin: 0;
}

.main-page>.header>.info>.accountid,
.main-page>.header>.info>.rank {
    color: gray;
    font-size: 12px;
}


.main-page>.header>.buttons {
    line-height: normal;
    height: 25%;
    width: 100%;

    display: flex;
}

.main-page>.header>.buttons>.button {
    width: 100%;
    height: 100%;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
}

.main-page>.header>.buttons>.button i {
    margin-right: 5px;
}

.main-page>.header>.buttons>.button:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.1);
}

.main-page>.stats {
    width: 90%;
    height: fit-content;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);

    margin-bottom: 2vh;

    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.main-page>.stats>.stat {
    text-decoration: none;
    height: fit-content;
    border-radius: 4px;
    background-color: rgba(var(--seccondary), 1);
    color: white;
    box-sizing: border-box;
    padding: 10px;
    position: relative;

    box-shadow: -1px 5px 5px -2px rgba(0, 0, 0, 0.75);

    flex: 1;

    min-width: calc(33.33% - 10px);
}

.main-page>.stats a:hover {
    opacity: 0.9;
    cursor: pointer;
    transition: 0.1s;
}

.main-page>.stats>.stat>.header {
    margin-top: 2px;
    font-size: 17px;
}

.main-page>.stats>.stat>.header i {
    margin-right: 5px;
    font-size: 16px;

    background-color: rgba(var(--green), 1);
    padding: 4px;
    border-radius: 3px;
}

.main-page>.stats>.stat>.info {
    font-size: 12px;
    color: gray;
    margin-top: 5px;
}

.main-page>.stats>.stat>.data {

    font-size: 23px;
    color: rgb(230, 230, 230);
    margin-top: 2vh;
}

.main-page>.stats>.stat>.table {
    width: 90%;
    min-height: 5vh;
    background-color: rgba(var(--primary), 1);
    border-radius: 4px;

    margin: 0 auto;
    margin-top: 1vh;

    box-sizing: border-box;
    padding: 7px;
}

.main-page>.stats>.stat>.table>.title {
    margin: 0;
}

.main-page>.stats>.stat>.table>.footer {
    color: gray;
    font-size: 12px;
}

.main-page>.stats>.stat>.average {
    font-size: 13px;
    color: #43865e;
}

.users>.active_users {
    width: 100%;
    height: fit-content;
    background-color: rgba(var(--seccondary), 1);
    display: flex;
    padding: 0.5vh 0vh;

    transition: 0.5s;

    position: fixed;

    z-index: 99;
}

.users>.active_users>.user {
    width: 7vw;
    height: 4.5vh;

    position: relative;

    color: white;
    border-radius: 4px;

    background-color: rgba(var(--primary), 1);
    margin-left: 5px;
    transition: 0.2s;
    box-shadow: -1px 5px 5px -2px rgba(0, 0, 0, 0.75);
}

.users>.active_users>.user:hover {
    opacity: 0.7;
    transition: 0.2s;
    cursor: pointer;
}

.users>.active_users>.user i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0%, -50%);
    transition: 0.2s;
}

.users>.active_users>.user i:hover {
    scale: 1.2;
    cursor: pointer;
    transition: 0.2s;
}

.users>.active_users>.user>.name {
    position: absolute;
    top: 30%;
    left: 30%;
    transform: translate(0%, -50%);
    height: fit-content;
}

.users>.active_users>.user>.accountid {
    position: absolute;
    top: 70%;
    left: 30%;
    transform: translate(0%, -50%);
    height: fit-content;
    color: gray;
    font-size: 15px;
}

.users>.account {
    width: 95%;
    height: 77%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);
    overflow-y: scroll;
}

.pages-div>.characters-div,
.pages-div>.history-div,
.pages-div>.playtime-div,
.pages-div>.logs-div,
.pages-div>.identifiers-div,
.pages-div>.home-div {
    display: none;
}

.discord-tab {
    width: 100%;
    height: 4vh;

    display: flex;

    position: relative;
}

.discord-tab img {
    height: 90%;
}

.discord-tab>.username {
    font-size: 16px;

    position: absolute;
    top: 2%;
    left: 7.5%;
}

.discord-tab>.desc {
    font-size: 13px;
    margin-left: 5px;

    position: absolute;
    bottom: 5%;
    left: 7%;

    color: gray;
}

.discord-tab i {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translate(0%, -50%);
    font-size: 16px;

    color: rgba(var(--green), 1);
}

.discord-tab i:hover {
    cursor: pointer;
    opacity: 0.8;
}

.section {
    width: 100%;
    height: fit-content;
}

.section:not(:first-child) {
    margin-top: 10px;
}

.section>.title {
    font-size: 14px;

    margin: 10px 0;
    color: gray;
}

.tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tabs>.tab {
    border-radius: 4px;
    background-color: rgba(var(--seccondary), 1);
    color: white;
    box-sizing: border-box;
    padding: 10px;
    position: relative;

    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

    flex: 1;
    height: 12vh;
    min-width: calc(33.33% - 10px);

    display: flex;
    flex-direction: column;

}

.tabs>.tab>.header {
    margin-top: 2px;
    font-size: 17px;
}

.tabs>.tab>.header i {
    font-size: 16px;

    padding: 4px;
    border-radius: 3px;
}

.tabs>.tab>.info {
    font-size: 12px;
    color: gray;
    margin-top: 5px;
}

.tabs>.tab>.data {
    font-size: 18px;
    color: rgb(206, 206, 206);


    margin-top: auto;

}

.tabs>.tab>.average {
    font-size: 13px;
    color: #43865e;
}

.tabs>.tab.hasrows {
    height: fit-content !important;
}

.tabs>.tab>.rows {
    display: flex;
    flex-direction: column;
}

.tabs>.tab>.rows>.row {
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    padding: 10px;
    /* display: flex; */
    position: relative;
    min-height: 5vh;
    padding: auto;
}

.tabs>.tab>.rows>.row>.header {
    display: flex;
    flex-wrap: wrap;

    position: relative;
}

.tabs>.tab>.rows>.row>.title, .tabs>.tab>.rows>.row>.header>.title {
    font-size: 13px;

    width: 90%;
    margin-left: 1.6vw;
}

.tabs>.tab>.rows>.row>.desc, .tabs>.tab>.rows>.row>.header>.desc {
    font-size: 10px;
    color: gray;
    width: 90%;

    margin-left: 1.6vw;
}

.tabs>.tab>.rows>.row>.header i {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
}

.tabs>.tab>.rows>.row>.header>.dropdown-btn {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    width: 2%;
    margin-left: auto;
}

.tabs>.tab>.rows>.row>.header>.dropdown-btn:hover {
    cursor: pointer;
    opacity: 0.8;
}

.tabs>.tab>.rows>.row>.header>.dropdown-btn i {
    transform: translate(0%, -50%);
    font-size: 13px;
    padding: 7px;
}

.tabs>.tab>.rows>.row>.jq-toggle-switch {
    position: absolute;
    right: 1%;

    top: 50%;
    transform: translate(-0%, -50%);
}

.tabs>.tab>.rows>.row>#number {
    position: absolute;
    right: 1%;

    top: 50%;
    transform: translate(-0%, -50%);

    padding: 7px;

    background-color: rgba(var(--primary), 1);
    color: white;
    border: none;
    outline: none;

    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.tabs>.tab>.rows>.row>.button {
    position: absolute;
    right: 1%;

    top: 50%;
    transform: translate(-0%, -50%);

    padding: 7px;

    background-color: rgba(var(--darkfoxblue));
    color: white;
    border: none;
    outline: none;

    border-radius: 3px;

    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

    font-size: 13px;
}

.tabs>.tab>.rows>.row>.button:hover {
    cursor: pointer;
}

.tabs>.tab>.rows>.row>.dropdown-btn {
    position: absolute;
    right: 1%;
    top: 50%;
    transform: translate(-0%, -50%);

    padding: 7px;

    color: white;

    font-size: 13px;
}

.tabs>.tab>.rows>.row>.dropdown-btn:hover {
    opacity: 0.8;
    cursor: pointer;
}

.history-div>.history>.history>.timeline {
    width: 70%;

    float: left;
}

.history-div>.history>.history>.filters {
    width: 25%;
    margin-left: 5%;
    float: right;

    height: 50vh;
    border-radius: 3px;

    background-color: rgba(var(--seccondary), 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

    position: absolute;
    right: 1vw;
}

.history-div>.history>.history>.filters>.buttons {
    width: 95%;
    height: fit-content;
    display: flex;

    margin: 0 auto;
    padding-top: 3%;
    padding-bottom: 3%;

    border-bottom: 1px solid gray;
}

.history-div>.history>.history>.filters>.buttons>.button.green {
    background-color: rgba(var(--green), 1);
}

.history-div>.history>.history>.filters>.buttons>.button.red {
    background-color: rgba(var(--red), 1);
}

.history-div>.history>.history>.filters>.buttons>.button.blue {
    background-color: rgba(var(--darkgreen), 1);
}


.history-div>.history>.history>.filters>.buttons>.button {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    text-align: center;
    margin-right: 5px;
    transition: 0.2s;
    width: 3vw;
    border-radius: 3px;
    padding: 7px;
    font-size: 13px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.history-div>.history>.history>.filters>.buttons>.button:hover {
    cursor: pointer;
    opacity: 0.8;
}

.history-div>.history>.history>.filters>.searches {
    width: 95%;
    height: fit-content;

    margin: 0 auto;
    padding-top: 3%;

}


.history-div>.history>.history>.filters>.searches> .input {
    background: rgba(var(--primary)) !important;
    width: 100%;
    height: 3.7vh;

    border-radius: 3px;
    margin-bottom: 5px;
    display: flex;
}

.history-div>.history>.history>.filters>.searches> .input i {
    width: 10%;
    height: 100%;
    float: left;

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    font-size: 15px;
}

.history-div>.history>.history>.filters>.searches> .input input {
    width: 90%;
    float: right;

    outline: none;
    border: none;

    background: rgba(var(--primary)) !important;

    color: white;
}

.history-div>.history>.history>.filters>.searches> .input>.button {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    text-align: center;
    transition: 0.2s;

    width: 100%;

    justify-content: center;
    align-items: center;
    display: flex;

    border-radius: 3px;
    padding: 7px;
    font-size: 13px;
    color: white;
}

.history-div>.history>.history>.filters>.searches> .input>.button:hover {
    cursor: pointer;
    opacity: 0.8;
}

.history-div>.history>.history>.filters>.searches> .input>.button.green {
    background-color: rgba(var(--green), 1);
}

.history-div>.history>.history>.filters>.searches> .input>.button.red {
    background-color: rgba(var(--red), 1);
}

.history-div>.history>.history>.filters>.searches> .input>.button.blue {
    background-color: rgba(var(--darkgreen), 1);
}

/* CHARACTERS */

.characters-div>.characters {
    width: 99.5%;
    height: fit-content;
    display: flex;
    gap: 10px;
}

.characters-div>.characters>.character {
    width: 10vw;
    height: 10vh;
    background-color: rgba(var(--seccondary), 1);
    color: white;
    /* border-radius: 3px; */
    box-sizing: border-box;
    padding: 10px;
    transition: 0.2s;
    flex: 1;
}

.characters-div>.characters>.character:hover {
    opacity: 0.9;
    cursor: pointer;
    transition: 0.2s;
}

.characters-div>.characters>.character>.name {
    font-size: 19px;
    font-weight: 600;
}

.characters-div>.characters>.character>.status {
    font-weight: 300;
    margin-top: 5px;
    color: gray;
}

.characters-div>.character {
    width: 100%;
    height: 75%;
}

.characters-div>.character>.info {
    width: 100%;
    height: 10vh;

    color: white;

    margin-bottom: 10px;

    display: flex;
    gap: 10px;
    grid-template-columns: repeat(5, 1fr);

}

.characters-div>.character>.info>.item {
    height: 5vh;

    background-color: rgba(var(--seccondary), 1);
    padding: 10px 15px;
    border-radius: 3px;

    position: relative;

    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

    flex: 1;
}

.characters-div>.character>.info>.item>.title i {
    font-size: 15px;
    position: absolute;
    left: 10px;
    top: 12px;

    background-color: rgba(var(--green), 1);
    padding: 4px;
    border-radius: 3px;
    width: 18px;
    text-align: center;
}

.characters-div>.character>.info>.item>.title {
    font-weight: 600;
    font-size: 25px;
    margin-left: 25px;
}

.characters-div>.character>.info>.item span:not(.title) {
    color: rgb(184, 184, 184);
}

.characters-div>.character>.info>.name {
    font-weight: 600;
    font-size: 30px;
    text-align: center;

    line-height: 5vh;
}

.characters-div>.character>.tab {
    width: 95%;
    height: fit-content;

    /* background-color: #3E4C5E; */
    color: white;
    border-radius: 4px;


    margin: 0 auto;
}

.characters-div>.character>.tab input {
    width: 80%;
    height: 3vh;
    border: none;
    outline: none;

    background-color: rgba(0, 0, 0, 0.1);
    color: white;
    font-size: 12px;
    border-bottom: 1px solid gray;

    margin-top: 10px;
}

.characters-div>.character>.tab>.title {
    font-size: 14px;

    margin: 10px 0;
    color: gray;
}

.characters-div>.character>.tab>.item-group {
    width: 100%;

    margin: 0 auto;

    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;

    gap: 10px;
}

.characters-div>.character>.tab>.item-group>.item {
    height: fit-content;

    background-color: rgba(var(--seccondary), 1);

    border-radius: 3px;

    flex: 1;

    box-sizing: border-box;
    padding: 5px 10px;

    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

}

.characters-div>.character>.tab>.item-group>.list {
    width: 100%;
    height: fit-content;

    background-color: rgba(var(--seccondary), 1);
    border-radius: 4px;
    margin-left: 5px;
    margin-right: 5px;

    box-sizing: border-box;
    padding: 5px 10px;
}

.characters-div>.character>.tab>.list {
    width: 95%;
    height: fit-content;
    margin: 0 auto;

    background-color: rgba(var(--seccondary), 1);
    padding: 5px;

    border-radius: 4px;

    box-sizing: border-box;

    border-collapse: collapse;

    max-height: 10vh;
    overflow-y: scroll;

    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

}

.characters-div>.character>.tab>.list thead {
    height: 3vh;
}

.characters-div>.character>.tab>.list thead tr th {
    color: white;
}

.characters-div>.character>.tab>.list tbody {
    width: 100%;
}

.characters-div>.character>.tab>.list tbody tr {
    border-bottom: 1px solid rgb(99, 98, 98);
    height: 5vh;
    transition: 0.1s;
}

.characters-div>.character>.tab>.list tbody tr:last-child {
    border: none;
}

.characters-div>.character>.tab>.list tbody tr:hover {
    background-color: rgba(44, 44, 44, 0.479);
    transition: 0.1s;
    cursor: pointer;
}

.characters-div>.character>.tab>.list tbody tr td {
    text-align: center;
    color: white;
    border-spacing: 0px;
}

.characters-div>.character>.tab>.list tfoot {
    height: 3vh;
}


.characters-div>.character>.tab>.list tfoot tr>.pag a {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    color: white;
    background-color: rgb(80, 80, 80);
    transition: 0.2s;
}

.characters-div>.character>.tab>.list tfoot tr>.pag a:hover {
    color: rgb(155, 155, 155);
    background-color: rgb(66, 66, 66);
    transition: 0.2s;
}


.characters-div>.character>.tab>.item-group>.item * {
    margin-bottom: 5px;
}

.characters-div>.character>.tab>.item-group>.item>.title {
    font-weight: 600;
    font-size: 30px;
}

.characters-div>.character>.tab>.item-group>.item>.buttons {
    display: flex;
    width: fit-content;
    margin-top: 10px;
}

.characters-div>.character>.tab>.item-group>.item>.buttons>.button {
    background-color: rgba(var(--green), 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    text-align: center;
    margin-right: 5px;
    transition: 0.2s;

    width: 2vw;

    border-radius: 3px;
    padding: 7px;
    font-size: 13px;
}

.characters-div>.character>.tab>.item-group>.item>.buttons>.button:last-child {
    background-color: rgba(var(--red), 1);

}

.characters-div>.character>.tab>.item-group>.item>.buttons>.button:hover {
    opacity: 0.9;
    cursor: pointer;
    transition: 0.2s;
}

.characters-div>.character>.jobs>.item-group>.item>.data {
    display: flex;

    flex-direction: row;
    align-items: center;

    position: relative;
    height: 10vh;
}

.characters-div>.character>.jobs>.item-group>.item>.data>.info {
    margin-left: 1vw;
}

.characters-div>.character>.jobs>.item-group>.item>.data>.info>.title {
    font-weight: 800;
    font-size: 17px;
}

.characters-div>.character>.jobs>.item-group>.item>.data>.info>.rank-label {
    color: gray;
    font-size: 12px;
}

.characters-div>.character>.jobs>.item-group>.item>.data>.info>.rank {
    color: gray;
    font-size: 12px;
}

.characters-div>.character>.jobs>.item-group>.item>.data>.edit {
    color: rgb(3, 97, 185);
    font-size: 18px;

    position: absolute;
    right: 1vw;
}

.characters-div>.character>.jobs>.item-group>.item img {
    height: 100%;
}

.playtime {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
}

.playtime>.stat {
    height: 13vh;
    width: 100%;
    border-radius: 4px;
    background-color: rgba(var(--seccondary), 1);
    color: white;
    box-sizing: border-box;
    padding: 10px;
    position: relative;

    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.playtime>.stat>.header {
    margin-top: 2px;
    font-size: 17px;
}

.playtime>.stat>.header i {
    margin-right: 5px;
    font-size: 16px;


    padding: 4px;
    border-radius: 3px;
}

.playtime>.stat>.info {
    font-size: 12px;
    color: gray;
    margin-top: 5px;
}

.playtime>.stat>.data {

    font-size: 23px;
    color: rgb(206, 206, 206);
    margin-top: 2vh;
}

.playtime>.stat>.average {
    font-size: 13px;
    color: #43865e;
}


.sidebar input[type='text'] {
    width: 60%;
    height: 3vh;
    border: none;
    outline: none;

    background-color: rgba(0, 0, 0, 0);
    color: white;
    font-size: 15px;
    border-bottom: 1px solid gray;
}

.sidebar {
    height: 100vh;
    /* width: 13vw; */
    width: 3vw;
    float: left;
    background-color: rgba(var(--seccondary), 1);

    position: relative;
}

.sidebar>.header {
    display: flex;
    color: white;
    height: 4vh;
    width: 90%;

    position: relative;
    left: 50%;
    top: 2vh;
    transform: translate(-50%, 0%);
}

.sidebar>.header img {
    width: 90%;
    transition: 0.5s ease-in-out;
}

.sidebar.hide>.header img {
    display: none;
}

.sidebar>.header>.back {

    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
    border-radius: 4px;
    padding: 4px;
    height: fit-content;
    transition: 0.1s;

    margin: 0 auto;
}

.sidebar>.header>.back:hover {
    background-color: rgba(var(--green), 1);
    cursor: pointer;
    transition: 0.1s;
}

.sidebar>.buttons {
    width: 90%;

    margin: 0 auto;
    margin-top: 7vh;
    color: white;
}

.sidebar>.buttons>.account-search input {
    margin: 0 auto;
    width: 90%;
}

.sidebar>.buttons>.accounts {
    width: 100%;
    min-height: 4vh;
    padding: 3px 0px;
    margin-bottom: 0.5vh;

    display: none;
}

.sidebar>.buttons>.accounts>.account {
    width: 90%;
    height: 4vh;
    line-height: 4vh;
    margin-bottom: 0.5vh;

    display: none;

    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);

    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;

}

.sidebar>.buttons>.accounts>.account:hover {
    opacity: 0.7;
    cursor: pointer;
}

.sidebar>.buttons>.accounts>.account>.name {

    font-size: 12px;

    position: relative;
    color: gray;

    left: 0.7vw;
}

.sidebar>.buttons>.accounts>.account>.accountid {
    font-size: 12px;
    position: relative;
    left: 0.4vw;
}


/* When smaller */

.sidebar.hide>.buttons>.accounts {
    display: none !important;
}

.sidebar.hide>.buttons>.account-search {
    display: none;
}

.sidebar.hide>.buttons>.button>.title {
    display: none;
}

.sidebar.hide>.buttons>.button i {
    margin: 0 auto;

    font-size: 16px;
}


/* when bigger */

.sidebar>.buttons>.button {
    width: 100%;
    /* background-color: rgba(var(--primary), 1); */
    color: white;
    text-decoration: none;

    display: flex;
    height: 4vh;
    line-height: 4vh;
    /* box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); */
    margin-bottom: 0.5vh;
}

.sidebar>.buttons>.button:hover {
    opacity: 0.8;
    cursor: pointer;
}

.sidebar>.buttons>.button>.title {
    margin-left: 0.6vw;
}

.sidebar>.buttons>.button i {
    line-height: 4vh;
    margin-left: 0.3vw;
    font-size: 18px;
}

.sidebar>.profile {
    width: 90%;
    height: 4vh;
    line-height: 4vh;
    display: flex;

    /* background-color: rgba(var(--primary), 1);
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); */
    color: white;

    position: absolute;
    bottom: 1vh;
    left: 50%;
    transform: translate(-50%, 0%);
}

.sidebar>.profile img:hover {
    opacity: 0.6;
    cursor: pointer;
}

.sidebar>.profile img {
    height: 80%;

    position: relative;
    left: 0.4vw;
    top: 50%;
    transform: translate(0%, -50%);
    border-radius: 50%;
}

.sidebar.hide>.profile img {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sidebar>.profile>.name {
    margin-left: 1vw;
    font-size: 18px;
}

.sidebar.hide>.profile>.name {
    display: none;
}


.hidden {
    display: none;
}

.contextmenu {
    position: absolute;
    top: 0;

    height: fit-content;
    min-width: 7vw;
    background-color: rgba(var(--primary), 1);
    color: white;

    text-align: center;
    padding: 5px;

    border-radius: 4px;
}

.contextmenu>.buttons {
    width: 100%;
    margin: 0 auto;
    height: fit-content;
}

.contextmenu>.buttons>.button {
    height: 3vh;
    line-height: 3vh;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    text-align: left;
    padding: 0px 0px 0px 10px;
}

.contextmenu>.buttons>.button i {
    font-size: 13px;
    /* margin-right: 4px; */
    position: absolute;
    right: 0.5vw;
    top: 50%;
    transform: translate(0%, -50%);
}

.contextmenu>.buttons>.button:hover {
    transition: 0.1s;
    background-color: rgb(255, 255, 255, 0.1);
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #222222;
    /* box-shadow: -1px 0px 29px -3px rgba(var(--seccondary), 1); */
    background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #88888857;
    border-radius: 5px;

    transition: 1s;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    transition: 1s;
}

/* h1,
h2,
h3,
h4,
h5,
h6 {
    text-shadow: -1px -1px 30px rgb(0, 0, 0);
} */

.bg {
    filter: blur(4px);
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    left: 0;
    top: 0;
}


.jq-toggle-switch {
    background: gray !important;
    border: none !important;
}

.jq-toggle-switch.checked {
    background-color: rgba(var(--green), 1) !important;
}

.jq-toggle-switch.jq-toggle-switch-size-small {
    width: 42px !important;
    height: 23px !important;
}

.jq-toggle-switch.jq-toggle-switch-size-small .jq-toggle-button {
    cursor: pointer;
    width: 17px !important;
    height: 17px !important;
}

.jq-toggle-switch.jq-toggle-switch-theme-outline {
    border-color: rgb(150, 150, 150) !important;
}

.jq-toggle-switch.jq-toggle-switch-theme-outline.checked {
    border-color: white !important;
}

.dropdown-content {
    display: none;

    border-radius: 2px;
    width: 100%;
    height: fit-content;

    box-sizing: border-box;
    padding: 5px;
}

.dropdown-content > .row {
    width: 100%;
    height: 3vh;

    background-color: rgba(var(--primary2), 0.4);

    display: flex;

    border-radius: 2px;

    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

    margin-bottom: 5px;
    padding: 5px;
}
.dropdown-content > .row>#main-icon {
    height: fit-content;
    position: relative;
    top: 50%;
    left: 0.5%;
    transform: translate(0%, -50%);
    font-size: 16px;
    color: rgb(225, 224, 224)e;
}

.dropdown-content > .row > .data {
    display: flex;
    height: fit-content;
    width: 100%;

    position: relative;
    top: 50%;
    left: 1%;
    transform: translate(0%, -50%);
}

.dropdown-content > .row > .data > .text {
    font-size: 13px;
    font-family: "Gilroy";
    font-weight: 400;
}

.dropdown-content > .row > .data i {
    position: absolute;
    top: 50%;
    right: 1.5%;
    transform: translate(0%, -50%);
}

.notice {
    width: 98.4%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    box-sizing: border-box;
    padding: 12px;
    background-color: rgba(var(--red), 0.4);
    color: rgba(var(--redbright), 1);
    font-size: 13px;
    border-radius: 3px;
    margin-top: 1vh;
}

.tox .tox-promotion, .tox .tox-statusbar__branding svg, #aria_6560547192691714128653904 {
    display: none !important;
}

.red-txt {
    color: rgba(var(--redbright), 1);
}

.green-txt {
    color: rgba(var(--green), 1);
}

.red-bg {
    background-color: rgba(var(--redbright), 1);
}

.green-bg {
    background-color: rgba(var(--green), 1);
}

.blue-bg {
    background-color: rgba(var(--blue), 1);
}

.txt-shadow {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.603);
}

/* user card */

.user-card {
    width: 260px;
    background-color: rgba(var(--primary));
    border: 2px solid rgba(var(--seccondary));
    color: white;
    border-radius: 6px;
    padding: 16px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    position: relative;
    z-index: 9999;
}

.user-card .header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.user-card .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.user-card .info {
    flex-grow: 1;
}

.user-card .username {
    font-weight: bold;
}

.user-card .userid {
    font-size: 13px;
    color: #c0c0c0;
}

.user-card .close {
    cursor: pointer;
    font-size: 16px;
    color: #aaa;
}

.user-card hr {
    border: none;
    border-top: 1px solid #333;
    margin: 10px 0;
}

.user-card .section-title {
    color: #999;
    font-weight: bold;
    margin-top: 10px;
}

.user-card .section-content {
    color: #ccc;
    margin-bottom: 10px;
}

.user-card .action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    cursor: pointer;
    color: white;
}

.user-card .action i {
    font-size: 14px;
    color: #aaa;
}