* {
    box-sizing: border-box;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    background-image: url('images/DesktopHintergrund_Rathausklub.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-size: 100% 100%;
    font-weight: 500;
}

@media screen and (max-width: 1024px) {
    body {
        font-family: Helvetica, Arial, sans-serif;
        background-image: url('images/MobilHintergrund.png');
        background-repeat:repeat;
        background-size:auto;
        background-attachment: fixed;
        /*background-size: 100% 100%;*/
        font-weight: 500;
    }
}

    h1, h2, h3, h4, h5 {
        color: rgb(0, 86, 162);
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal !important;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 22px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 16px;
    }

p, textarea {
    color: rgb(0, 86, 162) !important;
    font-size: medium;
    font-weight: normal !important;
}

    a {
        color: rgb(0, 86, 162) !important;
        font-size: medium !important;
        font-weight: normal !important;
    }

        a:hover {
            color: rgb(0, 86, 162) !important;
            font-size:medium !important;
            font-weight: normal !important;
            text-decoration: none !important;
        }

@media screen and (max-width: 1024px) {
    a {
        color: rgb(0, 86, 162) !important;
        font-size: small !important;
        font-weight: normal !important;
    }

        a:hover {
            color: rgb(0, 86, 162) !important;
            font-size: small !important;
            font-weight: normal !important;
            text-decoration: none !important;
        }
}

    hr {
        height: 2px;
    }

    /* FOOTER */

    .footer {
        height: 4em;
        z-index: 9999 !important;
    }

    .footerbanner {
        background-color: rgb(0, 86, 162,0.9) !important;
    }

    .toright:hover {
        background-color: rgb(0, 86, 162,0.9) !important;
        color: white !important;
        text-decoration: none;
    }

    .toright {
        float: right;
        display: block;
        margin-right: 5%;
        font-weight: normal;
        margin-top: 0.5em;
        height: 2em;
        border-radius: 20px;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 5px;
        background-color: transparent !important;
        color: white !important;
        text-decoration: none;
    }

    #footerleft {
        float: left;
    }

    .link-button {
        background-color: rgb(0, 86, 162);
        color: white !important;
        border-radius: 15px;
        padding: 0 5px 0 5px;
        height: 25px;
        border: none !important;
        text-decoration: none !important;
    }

        .link-button:hover {
            color: white !important;
            text-decoration: none !important;
            font-weight: normal;
            font-size: 30px;
            height: 25px;
        }

    .fastyle {
        padding: 5px;
        font-size: 30px !important;
        width: 40px;
        height: 40px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        align-self: center;
        border-radius: 30px;
        margin-left: 5%;
        text-decoration: none;
        background: white !important;
        color: rgb(0, 86, 162) !important;
    }

        .fastyle:hover {
            background-color: rgb(0, 86, 162) !important;
            font-size: 30px !important;
            color: white !important;
            text-decoration: none;
            border: 1px solid white !important;
        }

    @media screen and (max-width: 1024px) {
        .fastyle {
            padding: 3px;
            font-size: 15px !important;
            width: 20px;
            height: 20px;
            text-align: center;
            text-decoration: none;
            margin: 3px 1px;
            align-self: center;
            border-radius: 30px;
            margin-left: 3%;
            text-decoration: none;
            background: white !important;
            color: rgb(0, 86, 162) !important;
        }

            .fastyle:hover {
                background-color: rgb(0, 86, 162) !important;
                font-size: 15px !important;
                color: white !important;
                text-decoration: none;
                border: 1px solid white !important;
            }
    }

    /* MESSAGE */

    .messagecontainer {
        padding-left: 3% !important;
        margin-left: 15% !important;
        margin-right: 15% !important;
        height: 30px;
    }

    .message {
        font-weight: normal;
        font-size: 1em;
    }

        .message.error {
            color: red;
        }

        .message.success {
            color: rgb(0, 86, 162);
        }

        .message.warning {
            color: orange;
        }

        .message.hidden {
            display: none;
        }

    /* MENÜ */

    /* The sticky class is added to the navbar with JS when it reaches its scroll position */
    .sticky {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: rgb(0, 86, 162,0.9) !important;
        z-index: 9999 !important;
    }

    #navbarSupportedContent {
        font-weight: normal !important;
    }

    .navbar-light .navbar-nav .nav-link {
        color: white !important;
    }

        .navbar-light .navbar-nav .nav-link:hover {
            color: rgb(0, 86, 162) !important;
            background-color: white !important;
            font-weight: normal !important;
            border-radius: 15px;
        }

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:hover {
    outline: none !important;
    box-shadow: none !important;
    background-color: white !important;
    color: lightgray !important;
    border: none !important;
}

.navbar-toggler-icon,
.navbar-toggler-icon:focus,
.navbar-toggler-icon:hover {
    outline: none !important;
    box-shadow: none !important;
    background-color: white !important;
    color: lightgray !important;
    border: none !important;
}


    .dropdown-menu {
        border-radius: 15px;
    }

    .dropdown-toggle {
        color: rgb(0, 86, 162) !important;
    }

    .dropdown-item {
        color: rgb(0, 86, 162);
    }

        .dropdown-item:hover {
            color: white;
            background-color: lightgray;
            border-radius: 15px;
        }

    .navbar-light .navbar-text {
        color: darkgray;
        font-size: x-small;
    }

    .navbar-light .navbar-textbu {
        color: white;
        font-size: medium;
        font-weight: normal !important;
    }

        .navbar-light .navbar-textbu:hover {
            color: white;
            font-size: medium;
            font-weight: normal !important;
        }

    .navbar-textbu {
        margin: 20px 20px 20px 20px;
    }

    @media screen and (max-width: 1024px) {
        .navbar-textbu {
            margin: 20px 20px 20px 20px;
            display: none
        }
    }

    .underl {
        text-decoration: none !important;
    }

        .underl:hover {
            text-decoration: underline !important;
        }

    @media screen and (max-width: 1024px) {

        .navbar-light .navbar-text {
            display: none;
        }

        .toright {
            display: none;
        }

        #district {
            width: 100%;
            padding: .375rem
        }
    }

    .navbar-light .navbar-brand {
        color: rgb(0, 86, 162);
    }

    .navbar-logo {
        display: block;
        max-width: 260px;
        max-height: 80px;
        width: auto;
        height: auto;
        margin-right: 50px;
        margin-left: 20px;
        margin-top: 10px;
        border-radius: 10px;
        background-color: rgba(180,220,245,0.4) !important;
    }

    .menuhidden {
        display: none;
    }

    /*content*/
    .wrapper {
        background-color: rgba(190,230,255,0.95) !important;
        color: rgb(0, 86, 162) !important;
        border-radius: 30px;
        margin-top: 8em;
        margin-bottom: 5em;
        padding: 20px 20px 100px 20px;
        z-index: 0 !important;
    }

    .col-form-label {
        color: rgb(0, 86, 162);
    }

    button {
        background-color: white !important;
        color: rgb(0, 86, 162) !important;
        border: 1px solid rgb(0, 86, 162) !important;
    }

        button:hover {
            background-color: rgb(0, 86, 162) !important;
            color: white !important;
            border: none !important;
        }

        button:disabled {
            background-color: #999999 !important;
            color: lightgray !important;
            border: none !important;
        }

    /* frmMain */

    .mrow {
        display: flex;
    }

    .m1column {
        flex: 25.00%;
        padding: 5px;
    }

    .m2column {
        flex: 33.33%;
        padding: 5px;
    }

    .m3column {
        flex: 66.66%;
        padding: 5px;
    }

    .m4column {
        flex: 100%;
        padding: 5px;
    }

    .main-bg {
        padding: 20px 20px 20px 20px;
        background-color: white !important;
        border-radius: 30px;
        margin: 5px 5px 5px 5px;
        height: 100%;
    }

    .main-img {
        padding: 20px 20px 20px 20px;
        border-radius: 30px;
        height: 200px;
    }

    .main-logo {
        width: 100%;
        height: auto;
    }

    .main-href {
        text-decoration: none !important;
    }

    .individual, individual a {
        color: orange !important;
    }

    .btnTop, .btnTop:hover, .btnTop:visited, .btnTop:after, .btnTop:before {
        border: none !important;
        background-color: transparent !important;
        color: darkgray !important;
        font-size: 50px;
    }

    .hr-div {
        height: 2px;
        background-color: darkgrey;
        width: 100%;
    }

    .space {
        margin: 0;
        padding: 0;
        height: 30px;
    }

    /**************************************************************/
    /* order                                                      */
    /**************************************************************/
    table, tbody {
        width: 100%;
    }

    #btncenter:hover {
        color: rgb(0, 86, 162) !important;
        background-color: white !important;
        border: 1px solid black !important;
    }

    /**************************************************************/
    /* frmMyEvents                                                */
    /**************************************************************/

    .eventimg {
        width: 100%;
        padding: 10px 10px 10px 10px;
    }

    /****************************************************************/
    /*                           Valitation                         */
    /****************************************************************/

    .validClass {
        border: 2px solid green;
    }

    .invalidClass {
        border: 2px solid red;
    }

    /****************************************************************/
    /*                           Modal Window                       */
    /****************************************************************/

    .modalWindow {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.2);
        z-index: 99999;
        opacity: 0;
        pointer-events: none;
        text-align: center;
    }

        .modalWindow:target {
            opacity: 1;
            pointer-events: auto;
        }

        .modalWindow > div {
            width: 1000px;
            position: relative;
            margin: 20% auto;
            background: rgba(255,255,255,0.9) !important;
            border-radius: 30px;
            padding: 50px 20px 50px 20px;
        }


    @media screen and (max-width: 1024px) {
        .modalWindow > div {
            width: 500px;
            position: relative;
            margin: 20% auto;
            background: rgba(255,255,255,0.9) !important;
            border-radius: 15px;
            padding: 30px 10px 30px 10px;
        }
    }

    /*input[type=text], input[type=password], input[type=date], .form-select, textarea {*/
    input, select, textarea, img {
        margin-bottom: 10px;
    }

    .mat2 {
        font-size: small !important;
        color: black;
    }

    .form-select {
        width: 40%;
    }

    .lblgridheadline {
        color: rgb(0, 86, 162) !important;
    }

    .datepicker {
        width: 70%; /*150px;*/
    }

    .datepickerfilter {
        width: auto;
    }

    /**************************************************/
    /****************** main filter *******************/
    /**************************************************/

    .berichtcontainer {
        background-color: white !important;
        color: rgb(0, 86, 162) !important;
        border-radius: 10px;
        border: 2px solid rgba(180,220,245,1);
    }

        .berichtcontainer label,
        .berichtcontainer input
        .berichtcontainer textarea {
            font-size: medium;
        }

    /**************************************************/
    /****************** main filter *******************/
    /**************************************************/

    .mainFilter {
        margin-top: 0.5em;
        border-radius: 20px;
        padding: 15px 15px 15px 15px;
        background-color: rgba(180,220,245,0.4) !important;
        color: white !important;
        text-decoration: none;
    }

    .dummyBorder {
        border: 1px solid red;
    }

    .btnfilter {
        margin-top: -25px;
        height: 18px !important;
        width: auto;
        font-size: 10px;
        padding-top: 0px !important;
    }

    .btnics {
        margin-top: -25px;
        height: 18px !important;
        width: 100%;
        font-size: 10px;
        padding-top: 0px !important;
        color: rgb(0, 86, 162);
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal !important;
        background-color: white;
        border: 1px solid rgb(0, 86, 162);
    }

        .btnics:hover {
            margin-top: -25px;
            height: 18px !important;
            width: 100%;
            font-size: 10px;
            padding-top: 0px !important;
            color: white !important;
            font-family: Arial, Helvetica, sans-serif;
            background-color: rgb(0, 86, 162);
            border: 1px solid white;
        }

    /**************************************************/
    /************** cbl multiselect ******************/
    /*************************************************/

    .cblcontainer {
        width: 70%;
        /*margin: calc(50vh - 100px) auto 0;*/
    }

    .cblmember {
        height: 300px !important;
        z-index: 1;
    }

    .cblmemberfont {
        font-size: medium !important;
    }

    .msd {
        width: 100%;
        position: relative;
        user-select: none;
        color: #434b3a;
        margin: 0 0 15px;
    }

    .msd_label {
        background: #fff;
        height: 40px;
        line-height: 40px;
        display: block;
        padding: 0 20px;
        border-radius: 5px;
        position: relative;
    }

    .msd_label_icon {
        position: absolute;
        font-size: 13px;
        right: 20px;
        top: 15px;
    }

    .msd_options {
        overflow-y: scroll;
        height: 380px;
    }

    .msd_options_container {
        height: 400px;
        background: #fff;
        position: absolute;
        width: 100%;
        top: 35px;
        padding: 5px;
        box-sizing: border-box;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        display: none;
    }

    .msd_options_option {
        padding: 13px 15px;
        font-size: 14px;
        line-height: 1.3;
        background: #f4f4f4;
        position: relative;
        display: block;
    }

        .msd_options_option:nth-child(even) {
            background: #ededed;
        }

        .msd_options_option:after {
            position: absolute;
            height: 15px;
            width: 15px;
            border: 1px solid #888;
            top: 15px;
            right: 10px;
            content: "";
            border-radius: 50%;
        }

    .msd_options_option-check:after {
        background: #888;
        color: #fff;
        font-family: "FontAwesome";
        font-weight: 900;
        content: "\f00c";
        font-size: 8px;
        line-height: 15px;
        text-align: center;
    }

    .msd_options_checkbox {
        display: none;
    }

    /**************************************************/
    /************** personen Übersicht*****************/
    /*************************************************/

    .personContainer {
        max-width: 1920px !important;
    }

    .personRow {
        margin-top: 50px;
    }

.thePersonLink {
    font-size: 32px !important;
    font-weight: 200 !important;
    text-decoration: none !important;
}

    .thePersonLink:hover {
        font-size: 32px !important;
        font-weight: 200 !important;
        text-decoration: none !important;
    }

.abgeFoto {
    width: 100%;
}

    .mainpic {
        max-width: 80%;
        border-radius: 30px;
    }