body {
    color: black;
    padding: 10px 0px 0px 0px;
}

#Navigation {
    padding: 0px 0px 0px 0px;
}


.Container {
    padding: 0px 0px 0px 0px;
}

.tooltip {
    color: #c32e04;
    text-decoration: underline;
    cursor: help;
}

.zeichnung {
    width: 800px; /*850px*/
    height: 600px; /* 500 px*/
}

#idZeichnung {
    width: 800px; /*850px*/
    height: 600px; /* 500 px*/
}

#idBackground {
    width: 800px; /*850px*/
    height: 600px; /* 500 px*/
}


#grafikLinkBar {
    margin-left: -55px;
    color: black !important;
}

    #grafikLinkBar ul {
        text-align: right;
    }

    #grafikLinkBar li {
        display: inline;
        background-color: #EDEDED;
    }

#impressumLinkBar {
    margin-top: 630px;
    width: 800px;
    padding: 0px 0px 0px 0px;
}

    #impressumLinkBar * {
        background-color: #706C6D;
        color: white !important;
    }

#grafikBereich {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 0px;
    padding: 0 0 0 0 !important;
}

.zeichnungPosition {
    margin-top: 30px;
}



#tabKoord {
    position: absolute;
    top: 550px;
}


#lbStatus {
    position: absolute;
    top: 625px;
}

.tuCanvas {
    position: absolute;
    top: 680px;
}

.scrollMakroliste {
    height: 180px;
    overflow: scroll;
}

.scrollWandliste {
    height: 180px;
    overflow: scroll;
}

.scrollTreppenliste {
    height: 180px;
    overflow: scroll;
}

.scrollMaterialliste {
    height: 128px;
    overflow: scroll;
}

#lbBeschreibung {
    text-align: left;
    line-height: 2.8;
}

.modal-header {
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
    background-color: #8C918B;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: white;
}

.ElementRahmen {
    outline: 5px inset #0000ee; 
    outline-offset:-5px; 
}

.img-big {
    width: 400px;
    height: 400px;
}


.img-big.img-quer {
        width: 560px;
        height: 400px;
    }


.tab-pane {
    padding: 20px 20px 20px 20px;
}


.grid {
    display: grid;
    /*  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
    /* This is better for small screens, once min() is better supported */
    /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
    grid-gap: 0rem;
    /* This is the standardized property now, but has slightly less support */
    /* gap: 1rem */
}

ul.horizontal {
    margin: 0;
    padding: 0;
    text-align: right;
}

ul.horizontal li {
        display: inline;
        float: right;
        padding: 0 0px;
    }

#idLoaderAnzeige {
    background-color: #D4D4D4;
    opacity: 0.5;
}

.modal-backdrop {
    background-color: #D4D4D4;
    opacity: 0.7;
}

.myFa {
    color: white;
    font-size: larger;
    margin-left: 30px;
    transition: .3s transform ease-in-out;
    position: absolute;
    right: 10px;
}

.myFaMaterial {
    margin-left: 120px;
}

.myFaRaum {
    margin-left: 80px;
}

.myFaRaumPlanung {
    margin-left: 85px;
}

.collapsed .myFa {
    transform: rotate(90deg);
}

.btn-group-vertical {
    width: auto;
    display: block;
}

/*#sideBarLinks {
    min-width: 1130px;
}
    */

.btn-bien-prog-links {
    height: 30px;
    background-color: #EDEDED;
    color: #4a4a49;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    border-bottom: 3px solid #706C6D;
    border-bottom-color: #4a4a4a;
    border-radius: 0px 0px 0px 0px;
    display: inline-block;
}

.bien-prog-card-body {
    padding-top: 2px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

.btn-bien-prog-head {
    height: 30px;
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    background-color: #706C6D;
    color: white;
    border-bottom: 3px solid #706C6D;
    border-bottom-color: black;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    /*font-size: 54px;*/
    font-weight: normal;
    margin-bottom: 0px;
}

.btn-bauset-blau {
    background-color: #0969B4;
    font-size: 25px;
    color: white;
}

.bott-h3 {
    font-size: 25px;
    font-weight: bold;
    color: #4a4a49;
}

.bott-p {
    font-size: 14px;
    font-weight: normal;
    color: #4a4a49;
}

.card-header.collapsed {
    background: #706C6D; /*Orange*/
}

.card-header:not(.collapsed) {
    background: #d4d4d4; /*grün*/
    color: #4a4a49;
}

.myRahmen {
    /*background-image: url("~/images/Rahmenbien.png");*/
    /*background-color: lavender;*/
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 2px;
    padding-left: 0px;
    padding-bottom: 250px;
    /*height: 1200px; 
    padding-top: 30px;
    padding-bottom: 100px;
    padding-left: 70px;*/
}



.BottLogo {
    width: 160px;
    height: 80px;
}

#idBemusterArt {
    background-color: #D4D4D4;
    align-items: start;
    height: 55px;
    text-align: left;
}

#progBemusterArt {
    background-color: #D4D4D4;
    padding: 0;
    align-items: start;
    text-align: left;
    margin-top: 5px;
}

#idVisBlickpunkt {
    background-color: #D4D4D4;
    align-items: start;
    /* height: 60px;*/
    text-align: left;
    margin-top: 0px;
}

#idVisQuali {
    background-color: #D4D4D4;
    align-items: start;
    /* height: 30px; */
    text-align: left;
}

#progPanel {
    margin-top: 5px;
}


.grp-bien-prog-links {
    background-color: #D4D4D4;
    align-items: start;
    height: 60px;
    text-align: left;
}

.card-img-top {
    width: 100px;
    height: 100px;
}


.card-img-top.card-quer {
        width: 140px;
        height: 100px;
    }



.containborder:hover {
    outline-color: #D4D4D4;
    outline-width: 1px;
    outline-offset: -1px;
    outline-Style: inset;
}


.popover {
    z-index: 1060;
}

html * {
    /*  font-size: 1em ;
    color: #000;*/
    font-family: Arial;
}


#selBemusterArt, #selBlickpunkt, #selPlanlist, #selRaumlist, #selPlan, #selRaum, #selDarstellung, #selKameralist, #selKamera {
    width: 200px;
}

#sideBarCol {
    padding: 0 0 0 0 !important;
}

#splashBien {
    width: 840px;
    height: 680px;
    padding-top: 30px;
    padding-left: 5px;
    margin-right: 0px
}

#myModalWillkommen {
    margin-top: -20px;
}

#myWillkommenDialog {
    width: 100%;
    min-width: 1200px;
}
#myModalLoginBott {
    width: 100%;
    min-width: 1200px;
}

#impressumLinkBarWillkommen * {
    margin-top: 0px;
    background-color: #706C6D;
    color: white !important;
}


/* ----------- iPad Pro ----------- */
/* Portrait */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    #Navigation {
        padding: 0px 0px 0px 0px;
        margin-left: -90px;
    }

    #idBemusterArt {
        background-color: #D4D4D4;
        align-items: start;
        height: 75px;
        text-align: left;
    }

    .BienLogo {
        width: 120px;
        height: 120px;
    }

    #selBemusterArt, #selBlickpunkt, #selPlanlist, #selRaumlist, #selPlan, #selRaum, #selDarstellung, #selKameralist, #selKamera {
        width: 170px;
    }

    .myFa {
        color: white;
        font-size: medium;
        margin-left: 20px;
        transition: .3s transform ease-in-out;
        position: absolute;
        right: 10px;
    }

    .myFaMaterial {
        margin-left: 80px;
    }

    .myFaRaum {
        margin-left: 80px;
    }

    .myFaRaumPlanung {
        margin-left: 85px;
    }


    .zeichnung {
        width: 790px; /*850px*/
        height: 790px; /* 500 px*/
    }

    #idZeichnung {
        width: 790px; /*850px*/
        height: 790px; /* 500 px*/
    }

    #idBackground {
        width: 790px; /*850px*/
        height: 790px; /* 500 px*/
    }

    #impressumLinkBar {
        /*        margin-top: 750px;*/
        margin-top: 820px;
        width: 790px;
        padding: 0px 0px 0px 0px;
    }

    #grafikLinkBar {
        margin-left: 70px;
        color: black !important;
    }
}

/* Landscape */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
    #Navigation {
        padding: 0px 0px 0px 0px;
        margin-left: -250px;
    }

    .BienLogo {
        width: 90px;
        height: 90px;
    }

    #selBemusterArt, #selBlickpunkt, #selPlanlist, #selRaumlist, #selPlan, #selRaum, #selDarstellung, #selKameralist, #selKamera {
        width: 170px;
    }

    .myFa {
        color: white;
        font-size: medium;
        margin-left: 20px;
        transition: .3s transform ease-in-out;
        position: absolute;
        right: 10px;
    }

    .myFaMaterial {
        margin-left: 80px;
    }

    .myFaRaum {
        margin-left: 80px;
    }

    .myFaRaumPlanung {
        margin-left: 85px;
    }


    .zeichnung {
        width: 1080px; /*850px*/
        height: 720px; /* 500 px*/
    }

    #idZeichnung {
        width: 1080px; /*850px*/
        height: 720px; /* 500 px*/
    }

    #idBackground {
        width: 1080px; /*850px*/
        height: 720px; /* 500 px*/
    }

    #impressumLinkBar {
        margin-top: 750px;
        width: 1080px;
        padding: 0px 0px 0px 0px;
    }

    #grafikLinkBar {
        margin-left: 225px;
        color: black !important;
    }
}


/* ----------- iPad ----------- */
/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #Navigation {
        padding: 0px 0px 0px 0px;
        margin-left: -30px;
    }

    #idBemusterArt {
        background-color: #D4D4D4;
        align-items: start;
        height: 75px;
        text-align: left;
    }

    .BienLogo {
        width: 72px;
        height: 72px;
    }

    #selBemusterArt, #selBlickpunkt, #selPlanlist, #selRaumlist, #selPlan, #selRaum, #selDarstellung, #selKameralist, #selKamera {
        width: 120px;
    }

    .myFa {
        font-size: small;
        margin-left: 20px;
        right: 10px;
    }

    .myFaMaterial {
        margin-left: 80px;
    }

    .myFaRaum {
        margin-left: 80px;
    }

    .myFaRaumPlanung {
        margin-left: 85px;
    }


    .zeichnung {
        width: 545px; /*850px*/
        height: 545px; /* 500 px*/
    }

    #idZeichnung {
        width: 545px; /*850px*/
        height: 545px; /* 500 px*/
    }

    #idBackground {
        width: 545px; /*850px*/
        height: 545px; /* 500 px*/
    }

    #impressumLinkBar {
        /*        margin-top: 750px;*/
        margin-top: 575px;
        width: 545px;
        padding: 0px 0px 0px 0px;
    }

    #grafikLinkBar {
        margin-left: 5px;
        color: black !important;
    }
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    #Navigation {
        padding: 0px 0px 0px 0px;
        margin-left: -90px;
    }

    #idBemusterArt {
        background-color: #D4D4D4;
        align-items: start;
        height: 75px;
        text-align: left;
    }

    .BienLogo {
        width: 130px;
        height: 120px;
    }

    #selBemusterArt, #selBlickpunkt, #selPlanlist, #selRaumlist, #selPlan, #selRaum, #selDarstellung, #selKameralist, #selKamera {
        width: 170px;
    }

    .myFa {
        color: white;
        font-size: medium;
        margin-left: 20px;
        transition: .3s transform ease-in-out;
        position: absolute;
        right: 10px;
    }

    .myFaMaterial {
        margin-left: 80px;
    }

    .myFaRaum {
        margin-left: 80px;
    }

    .myFaRaumPlanung {
        margin-left: 85px;
    }


    .zeichnung {
        width: 790px; /*850px*/
        height: 790px; /* 500 px*/
    }

    #idZeichnung {
        width: 790px; /*850px*/
        height: 790px; /* 500 px*/
    }

    #idBackground {
        width: 790px; /*850px*/
        height: 790px; /* 500 px*/
    }

    #impressumLinkBar {
        /*        margin-top: 750px;*/
        margin-top: 820px;
        width: 790px;
        padding: 0px 0px 0px 0px;
    }

    #grafikLinkBar {
        margin-left: 70px;
        color: black !important;
    }
}