/* styles.css */


body {
    font-family: Arial, sans-serif; /* Välj ett teckensnitt som stöder svenska tecken */
    background-color: #f4f4f4; /* Ljus bakgrundsfärg för bättre läsbarhet */
    color: #333; /* Mörk textfärg */
    margin: 0;
    padding: 20px; /* Lägger till lite padding från kanten */
}

.container {
    background-color: white; /* Vit bakgrund för formuläret */
    padding: 20px;
    border-radius: 8px; /* Rundade hörn */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Skugga för djup */
    width: 300px; /* Fast bredd på formuläret */
    text-align: left; /* Vänsterjustera texten */
    margin-top: 20px; /* Marginal från sidans övre del */
    margin-left: 20px; /* Flytta containern mer till vänster */
}


h1 {
    font-size: 24px; /* Rubrikstorlek */
    margin-bottom: 20px; /* Avstånd under rubriken */
}

label {
    display: block; /* Gör etiketter blockelement för bättre layout */
    margin-bottom: 10px; /* Avstånd under etiketten */
}

input[type="password"] {
    width: 50%; /* Minska bredden av inmatningsfältet */
    width: calc(100% - 22px); /* Full bredd minus padding och border */
    padding: 10px; /* Inre avstånd */
    margin-bottom: 20px; /* Avstånd under inmatningsfältet */
    border: 1px solid #ccc; /* Grå ram */
    border-radius: 4px; /* Rundade hörn */
}

button {
    padding: 10px 15px; /* Inre avstånd */
    border: none; /* Ingen kant */
    border-radius: 4px; /* Rundade hörn */
    cursor: pointer; /* Visar pekaren vid hovring */
    margin-right: 30px; /* Marginal mellan knapparna */
}

button[type="submit"] {
    background-color: #007bff; /* Blå färg för Skicka-knappen */
    color: white; /* Vit textfärg */
}

.cancel-button {
    background-color: #dc3545; /* Röd färg för Avbryt-knappen */
    color: white; /* Vit textfärg */
}
.retry-button {
    background-color: #007bff; /* Röd färg för Avbryt-knappen */
    color: white; /* Vit textfärg */
}
button:hover {
    opacity: 0.9; /* Liten transparens vid hovring */
}

.cancel-button:hover {
    background-color: #c82333; /* Mörkare röd vid hovring */
}