body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 'Semi Bold';
    background-color: #1B1B19;
    color: #C3C3C1;
}

/*tekst*/
h1 {
    font-size: 16pt;
    margin-bottom: 15px;
    color: #C3C3C1;
}
h2 {
    font-size: 13pt;
    margin-bottom: 10px;
}
h2, h3, h4, h5, h6 {
    color: #84837E;
}
p, label {
    margin-top: 0;
    color: #84837E;
    font-size: 10pt;
}
.positive {
    color: #46634C;
    font-weight: bold;
}
.negative {
    color: #BD3A3A;
    font-weight: bold;
}



.container {
    display: flex;
    background-color: #1E1E1E;
}

/*sidebar*/
.sidebar {
    font-size: 8pt;
    z-index: 10;
    width: 180px;
    height: calc(100vh - 40px);
    background-color: #1E1E1E;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Shadow to the right */
}

.logo {
    font-size: 20px;
    color: #FAFAFA;
    font-weight: bold;
    margin-bottom: 15px;
}

.sidebar nav ul {
    list-style: none;
    padding: 0;
}

.sidebar nav ul li {
    margin: 0;
}

.sidebar nav ul li a {
    color: #C3C3C1;
    text-decoration: none;
    padding: 12px 15px;
    margin: 5px 0px 5px 0px;
    display: block;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.sidebar nav ul li a:hover, .active-menu-link {
    background-color: #242424;
}
.active-menu-link {
    font-weight: bold;
}

/*header og main*/
main {
    flex: 1;
    padding: 20px;
    padding-left: 10vw;
    padding-right: 10vw;
    background-color: #1B1B19;

}

header {
    font-size: 16pt;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*flex*/
.flex-container {
    display: flex;
    gap: 20px;
}
.flex-center {
    justify-content: center;
    align-items: center;
    text-align: center;
}
.flex-container .flex-item {
    flex-shrink: 1;
    background-color: #1E1E1E;
    padding: 15px 15px;
    border-radius: 6px;
}
.flex-container .flex-item-shrink2 {
    flex-shrink: 2;
}
.flex-item h2 {
    margin-top: 0;
    color: #C3C3C1;
}

.flex-container .flex-autowith {
    width: auto;
    background-color: #1E1E1E;
    padding: 15px 15px;
    border-radius: 6px;
}

.flex-container .flex-item-fullwidth {
    width: 100%;
    box-sizing: border-box;
    background-color: #1E1E1E;
    padding: 15px 15px;
    border-radius: 6px;
}
.flex-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.flex-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*stats cards*/
.stats-card h3 {
    font-size: 7pt;
    color: #84837E;
    margin-top: 0;
    margin-bottom: 20px;
}
.stats-card p {
    font-size: 10pt;
    margin: 0;
}
.stats-card .stats-value {
    font-size: 13pt;
    font-weight: bold;
    color: #C3C3C1;
}
.stats-card .flex-row {
    justify-content: space-between;
    align-items: flex-end;
}

/*tabeller*/
table {
    background-color: #1E1E1E;
    width: 100%;
    text-align: left;
    font-size: 8pt;
    color: #84837E;
    border-spacing: 0px;
}
th {
    font-size: 7pt;
    color: #C3C3C1;
    padding: 10px 0px 10px 0px;
}
td {
    border-top: 2px solid #242424;
    padding: 10px 0px 10px 0px;
}
td p {
    font-size: 6pt;
}

/*knapper og input*/
button, .button {
    text-decoration: none;
    background-color: #242424;
    color: #8B8B89;
    font-size: 14px;
    text-align: center;
    display: block; /*for at sikre at <a> opfører sig som en knap/blok*/
    padding: 8px 12px; /*button og a har forskellig default padding, og sættes til samme som input og select*/
    border: none; /* Fjerner standard border */
    border-radius: 6px;
    box-sizing: border-box; /*inkluderer padding og border i elemtets bredde/højde (så <a> opfører sig som en knap)*/
    margin: 5px 0px 5px 0px;
}
.button-fullwidth {
    width: 100%;
}

.table-button {
    text-decoration: none;
    color: #8B8B89;
    background-color: #242424;
    border-radius: 5px;
    padding: 4px;
    border: 0.5px solid #8B8B89;
}

button:hover, .button:hover, tr:not(:has(th)):hover, input:hover, select:hover, .table-button:hover, .button-active {
    background-color: #2f2f2f;
    transition: background-color 0.3s; /*så ny baggrund fader ind*/
    cursor: pointer; /*ændrer musen*/
}
button:disabled:hover { /*fjern hover funktionalitet når button er disbabled*/
    background-color: #242424;
    cursor: default; 
}
tr, input, button, .button, select{
    transition: background-color 0.3s; /*transition når man fjerner musen*/
}
.button-negative {
    background-color: #ae2d2d;
}
.button-negative:hover {
    background-color: #852222;
}
.button-positive {
    background-color: #46634C;
}
.button-positive:hover {
    background-color: #364d3c;
}

input, select {
    width: auto;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background-color: #242424;
    color: #8B8B89;
    font-size: 14px;
}

input:focus, select:focus { /*focus er når man trykker på den så man 'står' i feltet og kan skrive*/
    outline: 1px solid #8B8B89;
}
input::placeholder {
    color: #8B8B89;
}

/*apexcharts*/
.apexcharts-tooltip {
    background-color: #1E1E1E !important; /*important for at overrule apexcharts indbyggede styling*/
    color: #84837E !important;
    border-color: #242424 !important;
    box-shadow: none !important;
  }
  .apexcharts-tooltip-title {
    background-color: #1B1B19 !important; /*important for at overrule apexcharts indbyggede styling*/
    color: #C3C3C1 !important;
    border-color: #242424 !important;
  }