* {
    margin: 0;
    padding: 0;
}

#user-panel {
    border-bottom: 1px solid #ccc;
    text-align: right;
}

#user-panel * {
    display: inline;
}

#user-panel img {
    width: 32px;
    height: 32px;
}

header nav {
    border-bottom: 1px solid #ccc;
}

header nav ul, header nav ul li {
    display: inline;
    list-style-type: none;
}

ul.pagination {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.pagination li {
    margin: 0;
    padding: 0 0.1em;
    display: inline-block;
}

ul.pagination li.active {
    border: 1px solid #ccc;
}

.loading-spinner {
    display: inline-block;
    margin: 0 5px;
}

.css-spinner {
    display: inline-block;
    border: 1px solid #f3f3f3;
    border-top: 1px solid #3498db;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.plus-icon, .minus-icon {
    position: relative;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    display: inline-block;
    cursor: pointer;
}

.plus-icon::before,
.plus-icon::after {
    content: '';
    position: absolute;
    background-color: green; /* Color of the plus sign */
}

.minus-icon::before,
.minus-icon::after {
    content: '';
    position: absolute;
    background-color: red; /* Color of the minus sign */
}

/* Vertical line */
.plus-icon::before {
    width: 3px; /* Thickness of the line */
    height: 100%; /* Full height of the container */
    top: 0;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%);
}

/* Horizontal line */
.plus-icon::after, .minus-icon::after {
    width: 100%; /* Full width of the container */
    height: 3px; /* Thickness of the line */
    top: 50%; /* Center vertically */
    left: 0;
    transform: translateY(-50%);
}

td {
    border: 1px solid #ccc;
    text-align: right;
    font-size: 80%;
}
th {
    border: 1px solid #ccc;
    font-size: 80%;
}
tr:hover {
    background-color: lightblue;
}
tr.selected {
    background-color: darkcyan;
}

.red {
    background-color: lightcoral;
}

.green {
    background-color: lightgreen;
}

.orange {
    background-color: orange;
}

.jita {
    background-color: lightskyblue;
}

.warning {
    background-color: lightyellow;
}

.gradient_0    {background: #57bb8a;}
.gradient_5    {background: #63b682;}
.gradient_10   {background: #73b87e;}
.gradient_15   {background: #84bb7b;}
.gradient_20   {background: #94bd77;}
.gradient_25   {background: #a4c073;}
.gradient_30   {background: #b0be6e;}
.gradient_35   {background: #c4c56d;}
.gradient_40   {background: #d4c86a;}
.gradient_45   {background: #e2c965;}
.gradient_50   {background: #f5ce62;}
.gradient_55   {background: #f3c563;}
.gradient_60   {background: #e9b861;}
.gradient_65   {background: #e6ad61;}
.gradient_70   {background: #ecac67;}
.gradient_75   {background: #e9a268;}
.gradient_80   {background: #e79a69;}
.gradient_85   {background: #e5926b;}
.gradient_90   {background: #e2886c;}
.gradient_95   {background: #e0816d;}
.gradient_100  {background: #dd776e;}

.unknown {
    color: #aaa;
    font-style: italic;
    font-size: 50%;
}

table.market {
    width: 100%;
}

table.history {
    width: 100%;
}

.item-added {
    border: 1px green dashed;
}

.item-deleted {
    border: 1px red dashed;
}

.item-name {
    font-size: 60%;
}

table.ice {
    display: inline-block;
}

table.ice th {
    text-align: right;
}

table tr.headers-rotated th {
    vertical-align: text-bottom;
    padding: 0.2em 0;
}

table tr.headers-rotated th span {
    writing-mode: sideways-lr;
    white-space: nowrap;
    

    /* transform: rotate(-90deg); */
    /* transform-origin: top left; */
}