/*

Steg 1. Ändra logobilden till denna ist:  https://egetforradkarlstad.se/wp-content/uploads/2022/07/nyckelhal_png.png
Steg 2. Lägg till denna HTML efter img elementet: <h1>Logga in på Mina sidor</h1><p>Här kan du ändra dina uppgifter samt få en översikt på dina förråd, betalningar och fakturor.</p>
Steg 3. Ändra placeholder i input elementet till "ååååmmddxxxx"
Steg 4. Flytta knappen till efter input elementet
Steg 5. Ta bort "studsen" som händer när man klickar
Steg 6. Ta bort "auto scroll down" när man går in på mina sidor

*/

/*CSS för iframen*/
body.modal-open,
.modal-backdrop {
    background: none;
}

.modal-header {
    border-bottom: 0px !important;
}

.modal-header h1 {
    margin: 20px 0px 10px;
    border-width: 0px;
}

.modal-header img {
    max-width: 70px;
}

.modal-header > div {
    margin-bottom: 0px !important;
}

.modal-content {
    border-width: 0px;
    background-clip: unset;
    border-radius: 10%;
    padding: 40px;
}

.bankidimg {
    margin-top: 40px;
}

#login-form {
    position: relative;
}

    #login-form:before {
        content: "Personnummer";
        position: absolute;
        left: 30px;
        top: -23px;
        font-size: 0.9em;
        color: rgba(0,0,0,0.8);
    }

#ssn {
    width: 100%;
}

#login-button {
    opacity: 1;
    height: auto;
    background: black !important;
    border-width: 0px;
    padding: 10px 25px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: -20px;
}

#mp-myaccount-container {
    background-color: #ffffff;
    padding: 20px;
    margin: 20px;
}

#mp-myaccount-header {
    margin-top: 10px;
}

#mp-myaccount-header-hello {
    color: #ffffff;
}

/* mobilanpassning */
@media only screen and (max-width: 600px) {
    .modal-content {
        padding: 10px;
    }
}