.title {
    color: #FFFFFF;
!important text-align: left;
    opacity: 1;
    display: flex;
}

h4 {
    font: italic normal bold 25px/36px IBM Plex Sans;
    color: #FFFFFF;
!important
}

.paraclass {
    text-align: left;
    font: normal 16px IBM Plex Sans;
    display: flex;
    color: #FFFFFF;
    opacity: 1;
    flex-direction: column;
    margin-top: 13px;
}
.paraclass a{
    color: #00B8F1;
    text-decoration: none !important;
}
.padding-neuespass {
    text-align: left;
    font: normal 16px IBM Plex Sans;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: 15px 60px;
    height: 100%;
    padding-block: 30px;
}

#dx-btn-passVergessen{
    transition: transform 0.1s ease;
}
#dx-btn-passVergessen:hover {
    transform: scale(1.02);
}


#dx-btn-passVergessen.dx-state-disabled {
    background-color: #ccc !important; /* grey */
    border-color: #ccc !important;
    color: #666 !important;
    height: 60px;
    width: 375px;
}
#dx-btn-savepass {
    transition: transform 0.1s ease;
}
#dx-btn-savepass:hover{
    transform: scale(1.02);
}

#dx-btn-savepass {
    background: #15BFF8 0 0 no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    text-align: center;
    font: normal normal 600 21px/30px IBM Plex Sans;
    letter-spacing: 0;
    height: 60px;
    width: 375px;
    border: 1px solid #fff;
    /*margin-top: 30px;*/
}

#dx-btn-savepass.dx-state-disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #666 !important;
    height: 60px;
    width: 375px;
}

#dx-btn-savepass.dx-state-disabled.dx-button-text {
    color: #FFFFFF !important;
    font: normal normal 600 21px/30px 'IBM Plex Sans', sans-serif !important;
}

#dx-btn-savepass .dx-button-text {
    color: #FFFFFF !important;
    font: normal normal 600 21px/30px 'IBM Plex Sans', sans-serif !important;
}
#login-button {
    transition: transform 0.1s ease;
}
#login-button:hover {
  transform: scale(1.02);
}
#login-button {
    background: #15BFF8 0 0 no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    text-align: center;
    letter-spacing: 0;
    height: 60px;
    width: 375px;
    border: 1px solid #fff;
}

#login-button .login-text {
    color: #FFFFFF !important;
    font: normal normal 600 21px/30px 'IBM Plex Sans', sans-serif !important;
}


.paddingall {
    display: flex;
    flex-direction: column;
    padding: 40px 60px;
    height: 100%;

}

.emailcontent {
    text-align: left;
    font: normal 16px IBM Plex Sans;
    display: flex;
    color: #FFFFFF;
    opacity: 1;
    flex-direction: column;
    margin-top: 13px;
    scrollbar-width: thin;
    scrollbar-color: #FFFFFF #B0B0B0;
    overflow-x: hidden;
    height: 229px;
    overflow-y: auto;
}

.emailcontent a {
    color: #00B8F1;
    text-decoration: none;
}

.form {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-block: 10px;

}

.form-neuespass {
    width: 100%;
    display: flex;
    justify-content: center;
}
.formular-button{
  transition: transform 0.1s ease;
}
.formular-button:hover{
    transform: scale(1.02);
}
.formular-button {
    background: #15BFF8 0 0 no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    text-align: center;
    letter-spacing: 0;
    height: 60px;
    max-width: 375px;
    border: 1px solid #fff;
    font: normal normal 600 21px/30px IBM Plex Sans;
    color: #FFFFFF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.emailcontent::-webkit-scrollbar {
    width: 12px;
    border-radius: 10px;
    background-color: #B0B0B0;
}

.emailcontent::-webkit-scrollbar-thumb {
    background-color: #FFFFFF;
    border-radius: 10px;
    z-index: 1;
}

.emailcontent::-webkit-scrollbar-track {
    background-color: #75bff0;
    border-radius: 10px;
    padding: 2px;
}


.padding {
    display: flex;
    flex-direction: column;
    padding: 40px 60px;
    height: 100%;
}


#savenewpass .dx-field[data-datafield="Passwort"],
#savenewpass .dx-field[data-datafield="PasswordConfirmation"] {
    visibility: hidden;
    height: auto;
}
#restart-button{
    transition: transform 0.1s ease;
}
#restart-button:hover{
    transform: scale(1.02);
}

#restart-button {
    background: #15BFF8 0 0 no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    text-align: center;
    letter-spacing: 0;
    height: 60px;
    width: 375px;
    border: 1px solid #fff;

}

.restart-text {
    font: normal normal 600 21px/30px IBM Plex Sans;
    color: #FFFFFF;
}


#dx-btn-passVergessen.dx-state-disabled {
    background-color: #ccc !important; /* grey */
    border-color: #ccc !important;
    color: #666 !important;
    height: 60px;
    width: 375px;

}

#dx-btn-passVergessen {
    background: #15BFF8 0 0 no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    text-align: center;
    font: normal normal 600 21px/30px IBM Plex Sans;
    letter-spacing: 0;
    height: 60px;
    width: 375px;
    border: 1px solid #fff;
}

#dx-btn-passVergessen .dx-button-text {
    color: #FFFFFF !important;
    font: normal normal 600 21px/30px 'IBM Plex Sans', sans-serif !important;
}

.loginlink {
    text-align: center;
    text-decoration: none;
    font: normal normal normal 15px/24px IBM Plex Sans;
    letter-spacing: 0;
    color: #D5DBE2;
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
}
.loginlink a {
    color: #D5DBE2;
    text-decoration: underline !important;
}
.loginlink a {
    color: #D5DBE2;
    text-decoration: underline !important;
}


 .emailcontent a {
    color: #00B8F1;
    text-decoration: none !important;
}
.emailcontent a a:hover {
    color: #00B8F1;
    text-decoration: none !important;
}

.invisible-placeholder {
    visibility: hidden;
}

.placeholder150 {
    height: 150px;
}

@media (max-width: 500px) {

    h4 {
        font: italic normal bold 22px/36px IBM Plex Sans;
        color: #FFFFFF;
    !important
    }

    .padding {
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%
    }

    .padding-neuespass {
        padding-left: 10%;
        padding-right: 10%;
        padding-block: 5vw;
    }

    .paraclass {
        margin-top: 1vw;
        font: normal 14px IBM Plex Sans;
    }

    .paraclass-neuespass {
        font: normal 14px IBM Plex Sans;
    }

    .form {
        margin-top: 1vw;
        margin-bottom: 1vw;
    }


    .loginlink {
        margin-top: 1vw;
    }

    .registerbox .dx-texteditor,
    .registerbox .dx-button {
        width: 68vw !important;
        max-width: 375px;
        height: 55px !important;
        box-sizing: border-box;
    }

    #dx-btn-passVergessen {
        width: 100% !important;
        height: auto !important;
        padding: 1vw;
    }

    #dx-btn-passVergessen .dx-button-text {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.2 !important;
        display: block !important;
        text-align: center !important;
    }

    .loginlink {
        margin-top: 1vw;
    }

    #restart-button {
        width: 68vw !important;
        max-width: 375px;
        height: 60px !important;
        box-sizing: border-box;
        padding: 1vw;
    }

    #restart-button {
        width: 100% !important;
        height: auto !important;
    }

    .restart-text {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.2 !important;
        display: block !important;
        text-align: center !important;
    }

    .paddingall {
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
    }

    .emailcontent {
        margin-top: 1vw;
        font: normal 15px IBM Plex Sans;
        margin-bottom: 3vw;
        height: 72vw
    }

    .loginlink {
        margin-top: 1vw;
    }

    .formular-button {
        width: 68vw !important;
        max-width: 375px;
        height: 60px !important;
        box-sizing: border-box;
        padding: 1vw;
    }

    .formular-button {
        width: 100% !important;
        height: auto !important;
    }

    .formular-text {
        white-space: normal !important;
        line-height: 1.2 !important;
        display: block !important;
        text-align: center !important;
    }

    h4 {
        font: italic normal bold 22px/36px IBM Plex Sans;
        color: #FFFFFF;
    !important
    }


    .loginlink {
        margin-top: 1vw;
    }

    #dx-btn-savepass {
        width: 68vw !important;
        height: auto !important;
        padding: 1vw;
    }

    #dx-btn-savepass.dx-state-disabled {
        background-color: #ccc !important;
        border-color: #ccc !important;
        color: #666 !important;
    }

    #dx-btn-savepass.dx-state-disabled.dx-button-text {
        color: #FFFFFF !important;
        font: normal normal 600 21px/30px 'IBM Plex Sans', sans-serif !important;
    }

    #dx-btn-savepass .dx-button-text {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.2 !important;
        display: block !important;
        text-align: center !important;
    }

    .registerbox .button-eye,
    .registerbox .button-eye.dx-button,
    .dx-texteditor-buttons-container .button-eye {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #27519B;
    }

    .registerbox .button-eye .dx-icon,
    .dx-texteditor-buttons-container .button-eye .dx-icon {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    .registerbox .button-eye:hover {
        background: rgba(0, 0, 0, 0.1) !important;
        transform: none !important;
    }


    #login-button {
        width: 68vw !important;
        height: 60px !important;
    }

    .invisible-placeholder {
        visibility: hidden;
    }

    #restart-button {
        width: 68vw !important;
        height: 60px !important;
    }
}