@font-face {
    font-family: OpenSans;
    src: url('/SLECore2/css/OpenSans-Regular.eot');
    src: url('/SLECore2/css/OpenSans-Regular.ttf');
}

:root {
    --main-bg-color-hex: #080f50;
    --main-bg-color: rgb(8,15,80,0.8);
    --orange-color: #f5a623;
    --bg_edit_login: rgba(255, 255, 255, 0.1);

}
* {
    font-family: Arial;
    border: 0px solid red;
}

html{
    width:100%;
}

body {
    accent-color: red;
    margin: 0;
    width:100%;
}

button{
    cursor:pointer;
}

h1, h2, h3, h4 {
    text-align:center;
}




@media only screen and (min-width: 1px ) {
    /* Styles für  für alle bis 480, was dann anders sein soll muss dort geändert werden */
    /*              Navigation   + footer       */

    .sectionmitborder {
        border: 2px solid #080f50;
        margin:1px;
    }

        #fragez {
        background-color: #080f50;
      
    }
    #fragez0 {
        display: flex;
        justify-content: center;
        padding: 0.2rem;
        background-color: #f5a623;

    }

    .customizeformvisible {
        display: block;
    }
    .customizeforminvisible {
        display: none;
    }

/*    .homeimgcontainer {
        margin: auto;
    }*/
    .homeimg {
        margin: auto;
        display: flex;
        width: 100%;
    }
    .imgdiv {
        margin: auto;
    }

    .hide {
        display: none;
    }

    .navkomplett {
        display: block;
        background-color: #080f50;
        padding-bottom:0.5rem;
    }

    .mpnavdiv {
        margin-top: 1rem;
    }

    .mpnav-link {
        vertical-align: middle;
        color: white;
        font-size: large;
        text-decoration: none;
        padding-left:0.5rem;
    }


    .navbar-toggler {
        appearance: none;
        cursor: pointer;
        width: 3.5rem;
        height: 2.5rem;
        color: white;
        position: absolute;
        font-size: 2rem;
        right: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background-color: #080f50;
       
    }

    .menuversteckt {
        display: none;
    }

    .menugezeigt {
        display: block;
        background-color: #080f50;
      
    }

    .logo {
        background-color: #080f50;
    }

    .footerclass {
        display:none;    
    }

    .kapwahl-link {
        color: black;
        margin: 10rem;
    }

                                /*Level*/

    .level-link {
        display: block;
        color: Black;
        font-size: large;
        padding: 1rem;
        margin-right: 2rem;
        text-decoration: none;
    }

    .fettframe {
        border-bottom: solid 50px #080f50;
        border-top: solid 50px #080f50;
        border-left: solid 20px #080f50;
        border-right: solid 20px #080f50;
        border-radius: 0.6rem;
        padding: 2rem;
        background-color: #fff;
    }

    .Titel_index {
        font-size: 3.6rem;
    }


                                   /* Home*/
    .homelink {
        display:block;
    margin:auto;
    width:50%;
        color: white;
        font-size: large;
        text-decoration: none;
       text-align:center;
        padding:1rem;
        border: solid 6px var(--orange-color);
        border-radius: 25%;
        background-color: var(--main-bg-color)
    }

    .hometext{
        padding:1rem;
    }

    /*Login*/

    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    .row2 {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
                                                 /*Level*/
    .ab800 {
        display:none;
    }
   
                                                /*Exercises*/

    #filterleiste {
        padding: 0.5rem;
        width: 50vw;
    }

    #aufgabenleiste {
    }

    #VokListSidebar, #Filtersidebar {
        display: none;
    }




    .btndiv {
        margin-top: 1rem;
    }


    #zufallsbtn, #nextzeile {
        font-size: large;
      
        background-color: var(--orange-color);
        height: 10vh;
        color: white;
        width:100%;
        gap: 0.3rem;

    }


    #zufallsbtnwaiting {
        background-color: red;
        color: white;
        width: 100vw;
        height: 50vh;
        font-size: 30px;
    }

    .hidden {
        display: none;
    }

    .mpButton {
        margin:0.5rem;
        padding: 0.5rem;
        background-color: var(--main-bg-color);
        color: white;
        border: solid 4px var(--orange-color);
        border-radius: 25%;
    }
    

    .mpButtonToggler {
        padding: 1rem;
        background-color: var(--main-bg-color);
        color: white;

        margin: 1rem;
        float: right;
    }

    .mploesung {
        margin: 0rem;
        padding: 0.5rem;
        background-color: var(--main-bg-color);
        color: white;
        border: solid 4px var(--orange-color);
        border-radius: 25%;
        right:1rem;
        bottom: 1rem;
        position: fixed;
    }


    .antwort0 {
     
        gap: 1rem;
        padding: 0.5rem;
       
        background-color: #f5a623;
    }

    .antwlabel {
        display: inline-block;
        color: white;
        width: 12%;
        font-size: smaller;
        line-height: 150%;
    }

    .antw {
       
       
        font-weight: bold;
        font-size: larger;
    }

    #ergebnis {
        font-weight: bold;
    }

    .ergebn {
        width: 95%;
        margin: auto;
        text-align:center;
        font-size: larger;
    }

    .passivright {
        font-size: large;
        padding: 0.1rem;
        float: right;
        background-color: yellow;
    }

    .aufglabel {
        width: 12%;
        font-size: smaller;
        line-height: 150%;
        color: var(--orange-color);
        
    }
    .aufgcont {

        display: flex;
        gap: 1rem;
        padding: 0.5rem;

    }
    .aufgcont {
    
    
    }
        .loesung {
        font-size: 1em;
        display: none;
    }

    .gridcont {
        display: grid;
        grid: auto / 48% auto;
        gap: 1rem;
        margin-top:1rem;
    }
    .gridcont2 {
        display: flex;
        margin-top: 1rem;
    }

    #editbtns {
        display: grid;
        grid: auto / auto auto;
        gap: 10px;
    }

    .editbtn {
        font-size: large;
        padding: 0.4rem;
        background-color: rgb(8,15,80,0.8);
     
        color: white;
      

    }

    #aktEditText {
        padding: 1rem;
        font-size: large;
        width: 94%;
        margin-bottom: 0.5em;
        border: 1px solid black;
    }

    #result {
        font-size: large;
        text-align: center;
    }

    #nichteinezeile {
        margin-bottom: 2rem;
    }

   /* // footer Dateien Anout us Kontakt etc css*/

    .handycontaboutus {
        display: block;
    }



    .login_svg {
        display: none;
    }

    .fettframelogin {
        margin: 1rem;
        background-color: #fff;
    }

    .kontakt-body, .login-body {
        height: 800px;
        background-repeat: no-repeat;
        /*Problem: bei eingeschlteter border für alle verschiebt sich das Bild mit dem margin von h1*/
        background-position: right top;
    }

    .login-body {
        position: relative;
        top: 3rem;
        background-image: url('/images/loggen.svg');
    }

    .kontakt-body {
        background-image: url('/images/kontakt.svg');
    }

    .pay-body {
        background-image: url('/images/pay.svg');
    }

    .validation-message {
        color: white;
        background-color: #080f50;
    }

    .logindiv {
        margin-top: 3rem;
    }

    .bottombreit {
        margin: 5%;
        margin-top: 3rem;
    }

    .bigtitle {
        font-size: xx-large;
        color: black;
    }

    .blaetteruntenrechts {
        z-index: -1;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 70%;
    }

    .blaetterunten {
        z-index: -1;
        position: absolute;
        right: 20rem;
        bottom: 0;
    }

    .abstandvariabel {
        height: 0;
    }

    .alert {
        margin: 1rem;
        padding: 1rem;
        font-size: x-large;
    }


    .form-center {
        margin-top: 2rem;
        position: absolute;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    /*              Login Register Kontakt etc*/


    .form-edit {
        width: 90%;
        border-radius: 0.6rem;
        border: solid 1px #50e3c2;
        background-color: var(--bg_edit_login);
        display: block;
        line-height: 3rem;
    }

    .formkomplett {
        margin-left: 1rem;
    }



    .form-div {
        margin-top: 1rem
    }

    .form-label {
        font-size: small;
    }

    .plesenbig1 {
        font-size: x-large;
    }




    .pay-body {
        background-image: url('/images/pay.svg');
    }

    .validation-message {
        color: white;
        background-color: #080f50;
    }



    .abstandvariabel {
        height: 0;
    }




                                                                         /*Personal*/

    .counterListeRahmen {
        margin: 1rem;
        border-radius: 2.2px;
        border: 2px solid var(--orange);
    }

    .divbalken {
        background-color: #080f50;
        height: 0.5rem;
    }

    .divbalkentext {
        width: 30%;
        font-size: larger;
    }
    .bigHeading {
        margin-top: 2rem;
        font-size: 2rem;
        text-align: center;
    }
}

@media only screen and (min-width: 801px) {

    body{
        width:100%;
    }

    main {
        display: flex;
    }

    .hometext{
        margin:auto;
        width:50%;
    }

    .homeimg {
        margin: auto;
        display: flex;
        width: 60%;
    }

    .alert {
        margin: 2rem;
        padding: 1rem;
        font-size: xx-large;
    }

    /* Styles für kleine Tablets */

    /*              Navigation   + footer       */

    .navkomplett {
        display: flex;
        background-color: #080f50;
    }


    .navbar-toggler {
        display: none;
    }

    .mpnavdiv {
        margin-top: 0;
    }

    .mpnav-link {
        margin-right: 2rem;
    }

    .menugezeigt, .menuversteckt {
        display: flex;
        background-color: #080f50;
        align-items: center;
    }

    .logo {
        background-color: #080f50;
    }

    /* // footer Dateien Anout us Kontakt etc css*/

    .handycontaboutus {
        width: 60vw;
       margin:auto;
    }

    .footerclass {
        position:fixed;
        bottom: 0em;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        background-color: #080f50;
    }
    /*Level*/


    .bis800 {
        display: none;
    }

    .ab800 {
        display: block;
        width: 100vw;
        height: 100vh;
    }

    .label {
        font-size: small;
        text-align: center;
        margin-right: 1rem;
    }



                                                /*Exercises*/

    #exercMitte {
        display: block;
        height: 100vh;
        width: 100vw;
    }

    #VokListSidebar, #Filtersidebar {
        display: block;
        height: 100vh;
        width: 20vw;
        padding-top: 5rem;
        background-color: #f6f6f6;
    }

    #VokListSidebar {
        scroll-behavior: auto;
        overflow: scroll;
        padding-left: 2rem;
    }


        .imgkette {
        display: flex;
        /*  //   margin-right: 0.7rem;*/
    }

    .spanketteTitel {
        font-size: larger;
        text-align: left;
    }

    .spankette, .spanketteaktiv {
        line-height: 2.5rem;
        font-size: x-large;
        text-align: left;
        background-color: #f6f6f6;
        cursor: pointer;
        border: none;
    }

    .spanketteexerc {
        /*height: 30px;*/
        font-size: large;
        text-align: left;
        background-color: #f6f6f6;
        cursor: pointer;
        border: none;
    }

    .spanketteaktiv {
        color: #06afa9;
    }


    .divaufgabe {
        background-color: lightgray;
    }

    #allefilterbtn {
        display: grid;
        justify-content: center;
    }

    .filterbtn, .filterbtnaktiv {
        min-height: 3rem;
        margin: 1rem;
        font-size: large;
        width: 8rem;
        color:white;
        background-color: #02867e;
        /*        border-radius: 20%;
        box-shadow: 6px 6px 6px 6px grey;*/
    }

    .filterbtngreen {
        min-height: 3rem;
        width: 7rem;
        background-color: #b4e7e5;
    }



    .filterbtnaktiv {
        font-weight: bold;
        box-shadow: 6px 6px 6px 6px black;
        /*  border-bottom: 6px solid #080f50;*/
    }



    #zufallsbtn, #nextzeile {
      /*  width: 60vw;*/
        height: 8vh;
/*        background-color: rgb(245, 166, 35, 0.8);
        color: white;
        font-size: large;
        border-radius: 20px;
        margin-top: 3rem;
        box-shadow: 6px 6px 6px 6px grey;*/
    }


    #zufallsbtnwaiting {
        background-color: red;
        color: white;
        width: 60vw;
        height: 50vh;
        font-size: 30px;
    }

    .aufg {
        font-size: large;
        text-align: center;
    }

    .loesung {
        font-size: x-large;
        display: none;
    }


    .input {
        font-size: xx-large;
        width: 55vw;
        margin: 0.5em;
        border: 1px solid black;
    }
    .input::placeholder {
       
        opacity: 1;
       color:black;
       font-style:italic;
    }

    #editbtns {
        display: grid;
        grid: auto / 28vw 28vw;
        gap: 30px;
    }

    .editbtn {
        height: 10vh;
/*        font-size: large;
        padding: 0.4rem;
        background-color: rgb(8,15,80,0.8);
        color: white;
        border-radius: 20px;
        box-shadow: 6px 6px 6px 6px grey;*/
    }

    .divvideoslider{
        display:inline;
    }
}

@media only screen and (min-width: 1240px) {

    .homeimg {
        margin: auto;
        display: flex;
        width: 40%;
        align-items:center;
    }
    .mpButton {
        margin:1rem;
    }
    .mploesung {
        margin: 1rem;
    }
    .form-edit {
        width: 60%;
        border: solid 1px #50e3c2;
        background-color: var(--bg_edit_login);
        display: block;
        line-height: 2rem;
        font-size: larger;
    }
}

@media only screen and (width: 1920px) {



    #VokListSidebar, #Filtersidebar {
        display: block;
        height: 100vh;
        width: 50vw;
        padding-top: 5rem;
        background-color: #f6f6f6;
    }
}