html, body {
    height: 100%;
    font-family: 'Roboto', serif;
    font-size: 14px;
    font-weight: normal;
    color: #758a95; /* Dark Slate Gray for text */
}

.logo-container-full-width {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically if needed */
    background-color: #ffffff; /* Or any other color you prefer */
    padding: 12px 0; /* Adjust padding as needed */
}

.logo-container {
    display: flex;
    justify-content: left; /* Center horizontally */
    align-items: center; /* Center vertically if needed */
    padding: 12px 0; /* Adjust padding as needed */
}



.header {
    width: 100%; /* Ensure header is full width */
}

.logo-align-left {
    height: 100px; /* Logo height */
    width: auto; /* Maintain aspect ratio */
    padding-left: 15px !important;
}

.background-section {
    display: flex; 
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    background-image: url('../img/header_fonster.png');
    background-size: cover;
    background-position: center 60%;
    width: 100%;
    min-height: 600px; /* Adjust as needed */
    padding: 20px; /* Adjust padding to position the h1 and p inside the section */
    box-sizing: border-box;
    color: #ffffff; /* Text color */
    text-align: center; /* Center the text inside h1 and p */
    position: relative; /* For the overlay */
}

    /* Add this for the overlay */
    .background-section::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.2); /* Dark overlay, adjust opacity as needed */
        z-index: 1;
    }

    /* Make sure your text is above the overlay */
    .background-section h1,
    .background-section p {
        position: relative;
        z-index: 2;
        color: #ffffff;
        font-size: 20px;
    }

    /* Adjust h1 size separately if needed */
    .background-section h1 {
        font-size: 50px;
        font-weight: 700;
    }

    header {
        background-color: #ffffff; /* White background */
    }

.logo-top-left {
    position: absolute;
    top: 10px; /* Adjust distance from top as needed */
    left: 10px; /* Adjust distance from left as needed */
    height: 80px; /* Adjust based on your logo's size */
}

@media (max-width: 992px) {
    .background-section {
        background-position: center 80%;
        min-height: 400px; /* Adjust as needed */
    }
}

/* This will apply to small devices (less than 768px wide) */
@media (max-width: 767.98px) {
    .logo-align-left {
        padding-left: 15px; /* Adjust the value as needed */
    }

    /*.full-width-image {
        background-image: url('../img/header_fonster.png');
        background-size: cover;
        background-position: center 65%;
        width: 100%;
        min-height: 300px;*/ /* Adjust as needed */
    /*}*/
    .background-section {
      
        background-position: center 70%;
      
        min-height: 300px; /* Adjust as needed */
    }
        .background-section h1 {
            font-size: 32px;
            font-weight: 700;
            
        }

}

/* This will apply to medium devices and up (768px wide and larger) */
@media (min-width: 768px) {
    .logo-align-left {
        padding-left: 0; /* No padding on larger devices */
    }
}

h1 {
    font-family: Roboto;
    color: #333333; /* Dark Slate Gray for headings */
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 15px;
    line-height: 37px;
}

h2 {
    font-family: Roboto;
    color: #333333; /* Dark Slate Gray for secondary headings */
    font-weight: 400;
    font-size: 24px;
    margin-bottom: 15px;
    line-height: 30px;
}

p {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 1.5rem;
    letter-spacing: .2px;
    color: #333333; /* Dark Slate Gray for text */
}

.btn-primary {
    background-color: #7A9BAE; /* Dark Slate Gray for buttons */
    border: none;
    padding: 5px 20px; /* Larger padding */
    font-size: 16px; /* Larger font size */
    border-radius: .375rem; /* Rounded corners - optional */
}

    .btn-primary:hover {
        background-color: #5a6e75; /* Slightly darker shade for hover */
    }

    .btn-primary:active {
        background-color: #43585c; /* Even darker shade for active/click */
    }


.error {
    color: #b3baba; /* Light Gray for error messages */
    margin-left: 5px;
    font-size: 12px;
    margin-bottom: -10px;
}

.gray-background {
    /*background-color: #f8f9fa; */
   background-color: #f8f9fa;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa !important; /* A lighter shade of gray for striped rows */
}
.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-striped-bg: #f8f9fa; /* Your custom grey */
    --bs-table-striped-color: #212529; /* Default color for the text unless you want to change it */
    background-color: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

a {
    color: #758a95; /* Dark Slate Gray, for example */
    text-decoration: none; /* Optional: removes the underline */
}

    a:hover {
        color: #5a6e75; /* Slightly darker shade for hover */
        text-decoration: underline; /* Optional: adds underline on hover */
    }

    a:active {
        color: #43585c; /* Even darker shade for active/click */
    }

.font-weight-bold {
    font-weight: 700;
}

.footer {
    color: #f8f9fa; /* Light gray color for text */
    padding: 20px 0; /* Padding top and bottom */
}

    .footer ul {
        padding-left: 0;
        list-style: none;
    }

    .footer a {
        color: #f8f9fa; /* Light gray color for links */
    }

        .footer a:hover {
            text-decoration: underline;
            color: #ffffff; /* White color for link hover */
        }

    .footer img {
        margin-bottom: 15px; /* Space below the logo */
    }


label {
    color: #333333 !important;
}

#toast-container .toast-success {
    background-color: #4caf50; /* Change to your preferred color */
    opacity: 1; /* Remove transparency */
    border: none; /* Remove border */
}

#toast-container .toast-error {
    opacity: 1; /* Remove transparency */
    border: none; /* Remove border */
}

.stats-container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

.stat {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    margin: 0 10px; /* Lägger till horisontell marginal */
}

@media (max-width: 576px) {
    .stat {
        margin-right: 0; /* Ta bort höger marginal för små skärmar */
        margin-left: 0; /* Ta bort vänster marginal för små skärmar */
    }

    .row {
        padding-right: 15px; /* Lägg till höger padding för raden */
        padding-left: 15px; /* Lägg till vänster padding för raden */
    }
}

    .stat h3 {
        color: #333333;
        font-weight: 700;
        font-size: 28px;
    }

.number {
    color: #9DBFAF;
    font-size: 5.5rem;
    font-weight: 900;
    margin-top: 10px;
    font-family: "Impact", sans-serif;
}

.metric-small {
    font-size: 3rem;
    padding-left: 5px;
}

/*soft blue #7A9BAE or sage green #9DBFAF*/