#mpo8e {
    position: relative;
    width: 100% !important;
    height: 100%;
    box-sizing: border-box;
    overflow-y: scroll;

    font-size: 95% !important;
    color: #34495e;
    font-family: Helvetica, Arial, sans-serif;

    border: 0px solid #000 !important;
    border-radius: 0px !important;

    padding: 10px !important;
}

/* visibility */

#mpo8e .eHidden { display:none !important; }
#mpo8e .eShow { display:block; }

/* form elements */

#mpo8e termed label,
#mpo8e termed input,
#mpo8e termed select{
    width:95% !important;
    margin-top:5px;
    margin-bottom:5px;
    line-height:normal;
    border-radius:0px !important;
}

#mpo8e termed label{
    color:#999;
    align-self:stretch;
    max-width:80%;
    margin:13px 8px 13px 0;
    display:inline-block;
    line-height:auto;
    float:left;
}

#mpo8e termed input[type="checkbox"]{
    float:left;
    width:25px;
    margin-top:18px;
    clear:left;
}

#mpo8e termed input[type="text"]{
    padding:10px;
}

/* links */

#mpo8e .events a,
#mpo8e termed .eventListContainer a,
#mpo8e .request-button{
    cursor:pointer;
}

#mpo8e .bookingForm a{
    display:block;
    margin-top:10px;
    margin-bottom:10px;
}

/* buttons */

#mpo8e input[type="submit"],
#mpo8e input[type="button"]{
    border-radius:0px !important;
    overflow:hidden;
    height:1.6rem !important;
    font-size:95% !important;
    font-weight:500;
    width:100% !important;

    text-transform:none;
    color:#fff;
    background-color:#92d050!important;

    box-shadow:0 2px 2px 0 rgb(0 0 0 / 14%),0 3px 1px -2px rgb(0 0 0 / 20%),0 1px 5px 0 rgb(0 0 0 / 12%);
    margin:0.4rem 0 !important;
    padding:0 1.1em;

    border:0;
    line-height:1;
    cursor:pointer;
}

#mpo8e .btn{
    background-color:#92d050;
    color:#fff;
    margin:5px;
    padding:5px 10px !important;
    border:none;
    border-radius:0px !important;
    text-decoration:none;
    display:inline-block;
    min-width:20px !important;
}

#mpo8e .btn span{ font-size:12px; }

/* messages */

#mpo8e .danger{
    color:#f53d3d;
    margin-top:5px !important;
    clear:left;
}

/* layout containers */

#mpo8e .loginContainer,
#mpo8e .registrationContainer{
    max-width:500px;
    margin:0 auto;
    padding:10px;
    background-color:#fff;
}

#mpo8e .bookingContainer,
#mpo8e .waitingRoomContainer,
#mpo8e .eventListContainer,
#mpo8e .messageContainer,
#mpo8e .loginRegContainer,
#mpo8e .loadingContainer,
#mpo8e .requestContainer,
#mpo8e .codeContainer{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    background-color:#eeeeee;
    padding:15px;
    border:solid 1px;
    border-radius:0px !important;
    max-width:500px;
    max-height:500px;
    overflow-y:scroll;
}

#mpo8e .overviewContainer{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    background-color:#eeeeee;
    padding:15px;
    border:solid 1px;
    border-radius:5px;
    max-width:500px;
    max-height:500px;
    overflow-y:scroll;
}

/* container specifics */

#mpo8e .loginRegContainer{
    max-height:500px;
    min-width:300px !important;
    overflow-y:scroll;
    z-index:20;
}

#mpo8e .navContainer{
    width:125px;
    float:right;
}

#mpo8e .loginRegNav{
    background-color:#92d050;
    height:2em;
    padding:5px;
    margin-top:15px;
    color:white;
}

#mpo8e .loginRegContainer span{
    display:inline-block;
    text-align:center;
    cursor:pointer;
    padding-bottom:5px;
    padding-top:5px;
    text-transform:uppercase;
}

#mpo8e .loginRegContainer .active{
    border-bottom:solid 2px;
}

/* overlay */er

#mpo8e .backdrop,
#mpo8e .backdropMessage{
    width:100%;
    height:100%;
    position:fixed;
    background:lightgrey;
    opacity:50%;
    top:0;
    left:0;
}

#mpo8e .backdrop{ z-index:19; }
#mpo8e .eventListContainer{ z-index:21; }

#mpo8e .bookingContainer,
#mpo8e .waitingRoomContainer{ z-index:22; }

#mpo8e .backdropMessage,
#mpo8e .overviewContainer,
#mpo8e .requestContainer,
#mpo8e .codeContainer{ z-index:23; }

#mpo8e .messageContainer,
#mpo8e .loadingContainer{ z-index:24; }

/* loading */

@keyframes spinner {
    to { transform:rotate(360deg); }
}

#mpo8e termed .loadingContainer{
    position:fixed;
    width:175px;
    height:125px;
    text-align:center;
    padding:10px;
    overflow-y:hidden;
}

#mpo8e termed .loadingContainer .spinner:before{
    content:'';
    box-sizing:border-box;
    position:absolute;
    top:65%;
    left:50%;
    width:35px;
    height:35px;
    margin-top:-10px;
    margin-left:-20px;
    border-radius:50%;
    border:2px solid #ccc;
    border-top-color:#000;
    animation:spinner .75s linear infinite;
}

#mpo8e .loadingContainer p{
    margin-top:5px;
}

/* form selects */

#mpo8e .rselect,
#mpo8e .dselect{
    font-size:95% !important;
    padding:10px !important;
    margin:10px 0 !important;
    height:auto;
    border-radius:0px !important;
}

#mpo8e .ropt{
    font-size:95% !important;
}

#mpo8e p{
    margin-bottom:8px;
    margin-top:8px !important;
    padding:0;
}

/* calendar */

#mpo8e .calControl{
    background-color:#BFBFBF !important;
    color:#595959 !important;
    padding:0 10px;

    display:block;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
}

#mpo8e .calControlDate{
    font-size:95% !important;
    font-weight:bold !important;
    line-height:2.8rem !important;
    white-space:nowrap;
    text-align:center;
    width:60%;
}

#mpo8e .calControlBack,
#mpo8e .calControlNext{
    width:20%;
    text-align:center;
}

#mpo8e .calControlBack span,
#mpo8e .calControlNext span{
    font-size:1.5rem !important;
    line-height:2.8rem !important;
}

#mpo8e .calControlBack:hover,
#mpo8e .calControlNext:hover{
    background-color:#f4f4f4;
    cursor:pointer;
}

#mpo8e .calContent{
    position:relative;

    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;

    border-top:1px solid #dedede;
    border-bottom:1px solid #dedede;
    border-left:1px solid #dedede;
}

#mpo8e .calContent .no-apps{
    position:absolute;
    top:50px;
    background-color:rgba(255,255,255,0.8);
    border:1px solid #dedede;
    padding:10px 15px;
    margin-left:16.66667%;
    width:66.66667%;
    text-align:center;
}

#mpo8e .calContent .day-column{
    width:14.28%;
    min-height:300px;
    float:left;
    border-right:1px solid #dedede;

    -webkit-box-flex:1;
    -moz-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}

#mpo8e .calContent .day-column:nth-child(odd){
    background-color:#f4f4f4;
}

#mpo8e .calContent .day-column .day{
    overflow:hidden;
    border-bottom:1px solid #dedede;
    padding-bottom:4px;
}

#mpo8e .calContent .day-column .day span{
    white-space:nowrap;
}

#mpo8e .calContent .day-column .day .weekday{
    float:left;
    font-size:20px;
    font-weight:bold;
    margin:7px 0 0 4px;
}

#mpo8e .calContent .day-column .day .date{
    float:right;
    margin:12px 2px 0 0;
}

#mpo8e .calContent .day-column .app{
    padding:0 2px;
    text-align:center;
}

#mpo8e .calContent .day-column .app a{
    width:initial;
    margin:4px auto;
    -webkit-flex-flow:row wrap;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
}

#mpo8e .loginButton{
    display:none !important;
}

/* responsive */

@media all and (max-width:768px){

    #mpo8e .calContent{ display:block; }

    #mpo8e .calContent .day-column{
        width:100%;
        min-height:initial;
    }

    #mpo8e .calContent .day-column .app{
        float:left;
    }

    #mpo8e .calControlDate{
        font-size:1.75em;
    }
}

@media all and (max-width:629px){

    #mpo8e .loginRegContainer span{ width:100%; }

    #mpo8e .loginRegNav{ height:auto !important; }

    #mpo8e .bookingContainer,
    #mpo8e .waitingRoomContainer,
    #mpo8e .eventListContainer,
    #mpo8e .overviewContainer,
    #mpo8e .messageContainer,
    #mpo8e .loginRegContainer,
    #mpo8e .loadingContainer,
    #mpo8e .requestContainer,
    #mpo8e .codeContainer{
        margin-top:55px;
        max-height:450px;
    }

    #mpo8e .loginRegContainer{
        max-height:450px;
    }
}

@media all and (max-width:425px){

    #mpo8e .calControlDate{
        line-height:initial;
        white-space:normal;
    }

    #mpo8e #content{
        min-width:initial;
        min-height:initial;
    }
}

    .hauptnavi { height: 110px; }