@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

body {
    background-color: #18181a00;
    font-family: 'Roboto', sans-serif;
    color: #fff;
}

.all {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1f1f1f;
    width: 1325px;
    height: 840px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: none;
    overflow-y: auto;
    padding: 20px;
}

/* Header styles */
.header {
    background-color: #262627;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 15px;
}

.header h2 {
    font-size: 20px;
    color: #b563ff;
}

#searchbar {
    background-color: #494b51;
    border: none;
    padding: 8px;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    width: 30%;
}

.count {
    font-size: 14px;
    color: #b563ff;
}

button.searchbtn {
    background-color: #9545ed;
    color: #fff;
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    margin-left: 20px;
}

button.searchbtn:hover {
    background-color: #7729b3;
}

button.showallbtn {
    background-color: #54525a;
    color: white;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    border: none;
}

button.showallbtn:hover {
    background-color: #434347;
}

/* Column headers */
.coloumn {
    display: flex;
    justify-content: space-between;
    color: #b563ff;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 10px;
}

/* User data styles */
.users {
    padding: 10px 0;
    max-height: 600px;
    overflow-y: auto;
}

.user {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: #232426;
    margin-bottom: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.user:hover {
    background-color: #2a2f39;
}

.user-name {
    color: #b563ff;
    font-weight: bold;
    font-size: 14px;
}

.user-id,
.user-pid,
.user-hex,
.user-discord,
.user-jobLabel {
    color: #80848a;
    font-size: 12px;
}

button.spec,
button.goto {
    background-color: #9545ed;
    color: #fff;
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}

button.spec:hover,
button.goto:hover {
    background-color: #7729b3;
}

/* Action buttons column */
span.user-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Styling for different user data columns */
.user-char {
    color: #80848a;
    font-size: 12px;
}

.user-pid {
    color: #80848a;
    font-size: 12px;
}

.user-hex {
    color: #80848a;
    font-size: 12px;
}

.user-discord {
    color: #80848a;
    font-size: 12px;
}

.user-jobLabel {
    color: #b563ff;
    font-size: 14px;
}

.user-jobGradeLabel {
    color: #80848a;
    font-size: 12px;
}

/* Column small styles for headers */
.coloumn small {
    text-align: center;
    font-size: 12px;
    width: 16%;
    margin-bottom: 8px;
}

/* Positioning specific columns */
.coloumn small.steam {
    text-align: left;
    margin-left: 20px;
}

.coloumn small.character {
    text-align: left;
}

.coloumn small.dc {
    text-align: left;
}

.coloumn small.action {
    text-align: center;
}