.mycanvas {
    background-color: rgb(0,0,0);
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/images/shipart.webp');
}

.logindiv {
    margin-left: 37vw;
    margin-top: 25vh;
    width: 24vw;
    height: 35vh;
    background-color: rgb(0,0,0);
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/images/loginbg2.png');
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    border-color: black;
    box-shadow: 10px 10px 20px rgb(0,0,0);
    box-sizing: border-box;
}

.cardbody {
    margin-top: 12vh;
    width: 24vw;
    height: 22vh;
    overflow: clip;
    box-sizing: border-box;
}

.logininputdiv {
    display: flex;
    box-sizing: border-box;
}

.logininputlabel {
    margin-left: 1vw;
    font-size: 0.8vw;
    color: rgb(175,175,175);
    font-family: system-ui;
    width: 6vw;
    text-align: center;
}

.logininput {
    background-color: rgb(7,14,21);
    border-color: rgb(75,75,75);
    border-style: solid;
    border-width: 1px;
    font-size: 0.9vw; !important
    font-family: system-ui;
    width: 15vw;
    color: rgb(175,175,175) !important;
    margin-left: 0.5vw;
}

.rememberbox {
    width: 0.75vw;
    height: 0.75vw;
    background-color: rgb(50,50,50);
    color: rgb(50,50,50);
    margin-left: 0.25vw;
}

.rememberdiv {
    margin-left: 6vw;
    margin-top: 2vh;
    box-sizing: border-box;
}

.loginbuttondiv {
    margin-top: 1.5vh;
    box-sizing: border-box;
}

.loginbutton {
    font-size: 0.75vw;
    font-family: system-ui;
    margin-left: 9vw;
    width: 5vw;
    height: 3vh;
    color: rgb(175,175,175);
    background-color: rgb(50,50,50);
}

.loginbutton:hover {
    cursor: pointer;
    color: white;
    background-color: rgb(75,75,75);
}

.errormsgdiv {
     width: 24vw;
     height: 2.5vh;
     text-align: center;
}

.errormsg {
    color: red;
    font-size: 0.75vw;
    font-family: system-ui;
    font-weight: bold;
}

.logininput:-webkit-autofill {
    -webkit-text-fill-color: rgb(175,175,175) !important;
    -webkit-box-shadow: 0 0 0 1000px rgb(7,14,21) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 0.75vw;              /* Breite in Viewport-Prozent */
    height: 0.75vw;             /* Höhe entsprechend */
    background-color: rgb(100,100,100);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transform: translateY(-0.2vw);
}

input[type="checkbox"]:checked {
    background-color: #509650;  /* orange Hintergrund bei aktiviert */
}

input[type="checkbox"]:checked::after {
    content: "✓";
    color: white;
    font-size: 0.7vw;
    font-weight: bold;
    position: absolute;
    left 0.2vw;
    top: -0.1vw;
    transform: translateX(0.1vw);

}