/* Grundläggande stilar som gäller för alla skärmstorlekar */
body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif; /* Använd ett läsbart typsnitt för text */
}

.container-fluid {
    display: flex;
    align-items: center;
    padding: 2rem;
    background-color: #103669; /* Bakgrundsfärg för navigeringsmenyn */
    color: white; /* Textfärg för navigeringsmenyn */
    justify-content: space-between; /* Centrerar RowReg genom att flytta ut knappen till höger */
}

.navbar-brand {
    font-size: 8.5rem; /* Storlek på logotypen */
    font-family: 'Edwardian Script ITC', cursive; /* Ange typsnittsfamilj */
    font-style: italic; /* Ange kursiv stil för texten */
    font-weight: bold; /* Gör logotypen fet */
    padding: 5px 20px; /* Justera kuddeutrymme */
    background: linear-gradient(to right, #dd6a34, #f39246); /* Gradientbakgrund */
    -webkit-background-clip: text; /* Använd text som klipp för bakgrunden */
    -webkit-text-fill-color: transparent; /* Gör textfärgen genomskinlig för att visa bakgrunden */
}

.login-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ced4da;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-heading {
    text-align: center;
    margin-bottom: 20px;
}

.form-floating {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

    .form-floating input.form-control {
        border-radius: 8px;
        border-color: #6c757d;
        padding: 10px;
        width: 90%;
    }

    .form-floating label {
        color: black;
        margin-bottom: 5px;
    }

    .form-floating input.form-control::placeholder {
        color: #6c757d;
    }

    .form-floating input.form-control:focus {
        border-color: black;
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    }

a {
    text-decoration: none;
}
/* Justera storlek och stil för select-rutan */
.form-floating select.form-select {
    border-radius: 8px;
    border-color: #;
    padding: 10px;
    width: 95%;
}

    /* Anpassning av fokus för select-rutan */
    .form-floating select.form-select:focus {
        border-color: black;
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    }
.forgot-password-button {
    margin-top: 10px; /* Lägg till marginal över knappen för att skilja den från andra element */
    background-color: transparent; /* Gör bakgrunden transparent */
    color: black;
    border: none; /* Ta bort gränsen från knappen */
    cursor: pointer; /* Använd en pekande pekare för att indikera att knappen är klickbar */
}

    .forgot-password-button:hover {
        text-decoration: underline; /* Understryk knappens text när användaren hovrar över den */
    }
  /*  Logga ut button external sidan*/
.logout-button {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #dd6a34;
    color: black;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .logout-button:hover {
        background-color:white;
    }
/* Media queries för att anpassa designen för olika skärmstorlekar */
@media (min-width: 576px) {
    .container-fluid {
        padding: 4rem;
    }

    .login-container {
        max-width: 500px;
    }
}

@media (min-width: 768px) {
    .container-fluid {
        padding: 6rem;
    }

    .login-container {
        max-width: 600px;
    }
    
}

@media (min-width: 992px) {
    .container-fluid {
        padding: 8rem;
    }

    .login-container {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .container-fluid {
        padding: 10rem;
    }

    .login-container {
        max-width: 1000px;
    }
}