html {
    /*font-size: 14px;*/
}

h2 {
    color: white;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: auto;
}

img {
    max-width: 100% !important;
    height: auto;
    display: block;
}

/********************************************************************************/
nav {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    border: solid 2px;
    position: relative;
}

/*section {
grid-column: 1 /2;
grid-row: 2 / 3;
border: solid 2px;
}*/



body {
    height: auto;
    width: auto;
    display: grid;
    grid-template-columns: auto;
    /*grid-template-rows: 100px minmax(1400px,auto) 150px 200px;*/
    grid-template-rows: auto;
}

/*   #region Region Nav */

.header1 {
    border: solid;
    background-color: rgba(0,44,124,.7);
    color: white;
    position: fixed;
    width: -moz-available;
    width: 100%;
    z-index: 100;
    -webkit-transition: height 2s ease-out;
    transition: height 2s ease-out;
    myModal: height 2s ease-out;
}

#loading {
    width: 17%;
    height: auto;
    position: absolute;
    top: 23%;
    left: 48%;
    display: none;
    z-index: 300;
    color: rgba(0,44,124,.7);
}

.btn-hover:hover {
    /* background-color: #007bff;*/
    background-color: rgba(0,44,124,.7);
    color: white;
}

#overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: lightgray;
    opacity: 0.3;
}

.overlay1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: lightgray;
    opacity: 0.3;
    z-index: 200;
}

.fade1 {
    -webkit-transition: height 2s ease-out;
    transition: height 2s ease-out;
    animation: height 2s ease-out;
}

/*diese Klasse animation könnte alleine stehen oder an einem anderen Klasse oder id verbunden und es  wird per JS hinzugefügt*/
.animation {
    animation-name: fadeAnimation; /*der Name der Animation*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/*Da der Animation von Unten in den Bildschirm hinein zieht, wird man von 200px to 0px ; px muß angegegben werden*/
@keyframes fadeAnimation {
    from {
        transform: translateY(200px);
    }

    to {
        transform: translateY(0);
    }
}

#ChangeDataPopup.animation {
    animation-name: vonObenNachUnten; /*der Name der Animation*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes vonObenNachUnten {
    from {
        transform: translateY(-200px);
    }

    to {
        transform: translateY(200px);
    }
}


#ChangeDataPopup.animation2 {
    animation-name: vonUntenNachOben; /*der Name der Animation*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes vonUntenNachOben {
    from {
        transform: translateY(200px);
    }

    to {
        transform: translateY(-600px);
    }
}


.header1.animation {
    animation-name: headerScroll;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    height: auto;
    padding-top: 65px;
}

@keyframes headerScroll {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

#ChangeDataPopup li, .ChangeDataPopup2 li {
    margin: 2%;
    /*cursor: pointer;*/
    font-size: 16px;
}

#ChangeDataPopup li:hover{
    color: rgba(0,44,124,.7)
}

#ChangeDataPopup li:before{
    content: '\2713';
    /*content:'\2605';*/
    position: absolute;
    left: 38px;
    font-family: 'shopware';
    font-size: 22px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.ChangeDataPopup2 {
    background-color: rgba(0,44,124,.7);
    color: white;
    width: 25%;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.ChangeDataPopup2 ul{
   padding-left:10px;
}

.ChangeDataPopup2 li{
   list-style:disc;
   /*list-style-type: "\1F44D";*/
   /*list-style-type: '\2718';*/
   padding-left: 15px;
}

.ChangeDataPopup2 li li{
    list-style:circle;
  /*list-style-type: '\2713';*/
   padding-left: 10px;
}

.ChangeDataPopup2 li:hover {
    color: black;
}

/*.ChangeDataPopup2 li:before{*/
       /*content: '\2713';*/
    /*content:'\2718';*/
    /*position: absolute;
    left: 10px;
    font-family: 'shopware';
    font-size: 22px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    color:white;
}*/

/* dieses Section für wenn es after mit hover */

/*
    
 .eye:hover:after {
    color: green;
}

.eye::after {
    content: '\1F441';
    position: absolute;
    cursor:pointer;
    top: 47%;
    right: 10px;
    font-family: 'shopware';
    font-size: 29px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    z-index: 1000;
}

*/

/* dieses Section für fontawesome ICONS <i class="fa eye fa-eye" aria-hidden="true"></i> */

.eye:hover{
    color: blue;
}

.eye{    
    position: absolute;
    cursor: pointer;
    top: 51%;
    right: 10px;
    font-family: 'shopware';
    font-size: 22px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    z-index: 1000;
}

.header1.animation img {
    width: 250px;
    margin-top: 8px;
    margin-left: 42px;
}

.header1.animation h2 {
    font-size: 20px;
}

.header1.animation h2 {
    font-size: 20px;
    margin-top: 20px;
}

.header1.animation .navbar-brand {
    padding: 10px 10px;
    height: 35px;
    font-size: 16px;
}

.header1.animation .loginPartial-hr {
    height: 20px;
}

.nav1 a {
    position: relative;
}

.header1.animation .nav1 a.active::after {
    bottom: 35px;
}

.nav1 a.active::after {
    content: '';
    position: absolute;
    width: 90%;
    height: 4px;
    bottom: 50px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background: white;
    transition: 0.5s;
}

.header1 a, .header1 button {
    color: white;
}

.navbar {
    width: 50%;
    margin-bottom: 0px;
}

.navbar2 {
    display: flex;
    width: 70%;
}

.navbar2 button {
    font-size: 20px;
}

.navbar2 button:hover {
    text-decoration: none;
}

.header1 .title {
    margin-left: 41%;
    font-weight: bold;
}

.headerHr {
    height: 2px;
    margin: 0;
    background-color: white;
    position: relative;
}

.title-logo {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-inline: 5%;
}

.rhenusLogo {
    width: 300px;
}

.loginPartial-hr {
    margin-inline: 3.5%;
    width: 91%;
}

.nav1 {
    display: flex;
    align-items: end;
    height: inherit;
    display: contents;
    padding-top: 30px;
}

.nav-link:hover {
    color: blue;
}


.nav1 li {
}

/*#endregion Nav*/



.container1 {
    grid-column: 1 /2;
    grid-row: 2 / 3;
    width: -webkit-fill-available;
    width: -moz-available;
    margin: 0;
    padding: 0;
    margin-top: 250px;
    margin-inline: 3.5%;
    min-height: 800px;
    margin-bottom: 15%;
    position: relative;
}

.login {
    margin-top: 40px;
    width: 24%;
    margin-inline: 41%;
}

.fontKapit {
    text-decoration: underline solid;
    color: rgba(0,44,124,.7);
    font-variant: normal;
    text-align: center;
    margin-bottom: 2%;
    font-size: 75px;
}

    .fontKapit h1 {
        font-size: 44px;
    }

.form {
    width: 100%;
    height: auto;
    padding-bottom: 2%;
    border-radius: 2px;
    overflow: hidden;
    margin-inline: 0px;
    /*   position: fixed;
    width: 90.2%;*/
}

.form h2 {
    color: gray;
    font-weight: bold;
    margin-left: 42.5%;
    font-size: 40px;
}

.form h3 {
    color: gray;
    font-weight: bold;
    margin: 0;
    margin-bottom: 1%;
}

.col-btn {
    display: flex;
}

.bi-search {
    width: 85px !important;
    padding-left: 0 !important;
}

.hinweisText {
    color: gray;
    font-size: 25px;;
}

#aktualisieren:hover {
    border-radius: 60px;
    padding: 1px;
    background-color: none;
    background: none;
}

#aktualisieren img:hover {
    border-radius: 60px;
    padding: 2px;
}


Table {
    border-collapse: inherit;
}

.xTable {
    /*    table-layout: fixed;*/
    width: 100%;
    border-collapse: inherit;
    text-align: start;
}

.borderLeft {
    border-right: dashed;
}

.fontSize {
    font-size: 12px;
}

.xTable th, td {
    cursor: pointer;
}

a {
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    color: blue;
    text-decoration: none;
}

li {
    list-style: none;
}

.pageNr {
    margin-left: 47%;
}

.pageNr > div {
    margin-left: 11px;
}

.suchFeldGroup {
    display: flex;
    padding-right: 0;
    width: 100%;
    /*    margin-inline: 8%;   */
}

.kundeIndex, .SearchKunde, .rechnungItem, .posItem, .lieferItem {
    cursor: pointer;
}

/*
.suchFeldGroup div {
width: 40%;
}*/


.suchFeldGroup div input {
    padding: 6%;
    font-size: 105%;
    color: rgba(0,44,124,.7);
    font-weight: bold;
}

.suchFeldGroup .input{
    min-width:max-content;
    width:auto;
}

.containerError {
    margin: 6%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    background-color: rgba(0,44,124,.7);
    text-align: left;
    padding: 3%;
}

.styled-table {
    /*    border-collapse: collapse;*/
    /*    margin: 25px 0;*/
    /*    font-size: 0.7vw;*/
    /*  font-size: 0.9em;*/
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    /*overflow-x: auto;*/
    /*word-break:break-word;*/
    /*word-wrap: anywhere;*/
    /*table-layout:fixed;*/
}

.tab-search {
    height: 590px;
    overflow: scroll;
    display: block;
    empty-cells: show;
}

.styled-table{
    border-collapse:collapse;
}

.styled-table thead tr {
    background-color: rgba(0,44,124,.7);
    color: #ffffff;
    text-align: left;
    height: 80px;
}
/*.styled-table tr{
    height:80px;
}*/
.styled-table th,
.styled-table td {
    padding: 7px;
    border: 1px solid;
    word-wrap: break-word;
    height: 55px;
    overflow:hidden;
}


.styled-table th a {
    color: white;
    font-size: 20px;
}

.styled-table th a:hover {
    color: blue;
}
.styled-table tbody .modalDelete:hover {
    background-color:red;
}

.styled-table tbody tr:nth-child(even) {
    background: #e8f2f5;
}

.AddBenutzerSearch {
    display: flex;
    gap: 3%;
    justify-content: space-between;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

.styled-table tbody tr:hover {
    color: rgba(0,44,124,.7);
    background-color: lightgray;
    border: solid 1px blue;
}

/*#region table header Fixed*/

.header-Fixed {
    border-collapse: collapse;
    max-height: 600px;
    display: block;
    overflow: auto;
}

    /* das hier dafür um tr thead fest bleibt beim Scrollen */
.header-Fixed thead {
    position: sticky;
    top: 0;   
    z-index: 20; /* das hier damit die Ampeln im Hintergrund bleibt wenn man zur th Head scrollt */
}



/*#endregion*/

.col-md-4 {
    width: 15%;
    margin-inline: 37%;
    margin-top: 4%;
}

/*#region CSS LOGIN BEREICH*/


.container-fluid {
    height: inherit;
}


.greeting {
    margin-top: 1.5%;
    height: 75px;
}

    .greeting h2 {
        margin-left: 3%;
        padding: 0.5%;
        ;
    }

.bi-search {
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding-left: 20px;
}

.inputPassword {
    pointer-events: none;
}

.KontakteUns {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    border: solid 2px;
    position: relative;
    margin-inline: 0.17%;
    width: -moz-available;
    background: linear-gradient(90deg,#007ccb 0,#00469b 100%);
    color: white;
    text-align: center;
    padding: 1%;
    margin-bottom: 2%;
    height: 230px;
    -webkit-box-align: center;
}

.KontakteUns2 {
    position: relative;
    margin-left: 60%;
    width: 246px;
    display: block ruby;
}

.KontakteUns-before {
    content: '';
    display: block;
    -webkit-transform: skewX(136deg);
    transform: skewX(136deg);
    height: 180px;
    width: 75px;
    background-color: #4d4d4d;
    opacity: .2;
    position: absolute;
    top: -100px;
    right: 33%;
    margin-inline: 110px;
}

.KontakteUns-after {
    content: "";
    display: block;
    -webkit-transform: skewX(136deg);
    transform: skewX(136deg);
    height: 180px;
    width: 75px;
    background-color: #4d4d4d;
    opacity: .2;
    position: absolute;
    top: -100px;
    right: 29%;
    margin-inline: 15px;
}

.KontakteUns h1, .KontakteUns h4, .KontakteUns a {
    color: white;
}

.KontakteUns h1, .KontakteUns h2 {
    font-weight: bold;
}

.KontakteUns h4 {
    font-size: 14px;
}

    .KontakteUns h4:hover {
        text-decoration: underline;
    }

.container-nodata h1 {
    margin: 5%;
    background-color: lightgray;
    height: 500px;
    padding: 10%;
    text-align: center;
    font-size: 50px;
}



.modal-content {
    max-height: 300px;
    overflow-y: auto;
}

.SelfToast-header {
    width: 98%;
    border: 0.6px solid;
    padding: 3%;
    overflow: auto;
    box-shadow: 1px 1px 10px 1px;
    background-color: #00469b;
    color: white;
    border-radius: 5px;
}
/*#region region footer*/
footer {
    grid-column: 1 /2;
    grid-row: 4 / 5;
    width: 99.8%;
    background-color: #00469b;
    color: #ffffff;
    height: 175px;
    position: relative;
    margin-inline: 0.1%;
    margin-top: 260px;
}

.xx {
    margin-inline: .5%;
    padding: 3%;
    width: 97%;
}



.footerHr {
    margin-left: 2%;
    width: 95%;
    height: 10px;
    color: white;
    margin-top: 0;
    margin-bottom: 0;
}

.footer-impressum {
    display: flex;
    justify-content: space-between;
    gap: 1%;
    color: white;
    height: auto;
}

.footer-impressum_1 {
    width: 50%;
    display: flex;
    gap: 4%;
}

.footer-social {
    position: relative;
    display: flex;
    justify-content: end;
}

.social-link {
    height: 40px;
    width: 40px;
    display: inline-block;
    background-size: contain;
    margin: -40px 0 0 20px;
    border-radius: 20px;
    background-position: center center;
    background-repeat: no-repeat;
}

.social-youtube {
    background-image: url(/Pictures/icon-youtube.svg);
}

.social-linkedin {
    background-image: url(/Pictures/icon-linkedin.svg)
}

.social-facebook {
    background-image: url(/Pictures/icon-facebook.svg)
}

.social-instagram {
    background-image: url(/Pictures/icon-instagram.svg)
}

.footer2 {
    margin-top: 1%;
}

.footer1 a {
    cursor: pointer;
}

footer a, footer h4 {
    color: white;
}

.footer1 a:hover {
    color: blue;
}

/*.social-youtube{
    background-image:url(/Pictures/social-youtube.png);
}
.social-linkedin{
    background-image:url(/Pictures/social-linkIn.png)
}
.social-facebook{
    background-image:url(/Pictures/social-facebook.png)
}
.social-instagram{
    background-image:url(/Pictures/social-instegram.png)
}*/

/*#endregion*/

.AddBenutzer {
    width: fit-content;
    border: solid;
    background: rgba(0,44,124,.7);
    color: white;
    text-align: center;
    padding: 14px;
    box-shadow: 10px 10px 100px 1px;
    font-size: 19px;
}

    .AddBenutzer a {
        color: white;
    }

    .AddBenutzer a:hover {
        color: blue;
    }

.user-title {
    background: lightgray;
    color: white;
    text-align: center;
    padding: 17px;
    font-size: 27px;
    /*margin-inline: 24%;*/
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    width: 66%;
}

.add-user1 {
    width: auto;
    padding: 40px;
    border-radius: 5px;
    margin-top: 0;
    margin-inline: 25%;
}

.add-user2 {
    /*width: auto;*/
    border: solid 1px lightgray;
    padding: 80px;
    background-color: aliceblue;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 0;
}

/* 
.add-user2 form{
   width:100%;
    display:grid;
    justify-items:center;
padding:130px 210px;
}
*/

.div-forgetPassword {
    width: 30%;
    margin-left: 30%;
}

.div-forgetPassword input {
    color: blue;
    font-weight: bold;
}

.div-forgetPassword button {
    width: 45%;
    color: rgba(0,44,124,.7);
    font-weight: bold;
    float: right;
}

.div-forgetPassword h2 {
    color: black;
}

.berechtigungDropdown {
    width: 100%;
    height: auto;
    min-height: 35px;
}

select {
    color: black;
}



/*.underline {
    position: absolute;
    color: white;
    width: 90px;
    height:10px;
    top: 28px;
    margin-left: 6px;
}*/
/*.active {
    background-color: lightgray;
    opacity: 0.6;
    border-radius: 3px;
    color: cornflowerblue !important;
}*/
/*#endregion*/

@media screen and (max-width: 1504px) {
    .styled-table {
        font-size: 0.9vw;
        width: 100%;
        table-layout: fixed;
    }

    .KontakteUns {
        width: 103%;
    }

    footer {
        width: 103%;
    }

    .container1 {
        margin-top: 16%;
        width: 100%;
    }

    .login {
        width: 50%;
        margin-inline: 20%;
    }

    .header1 .title {
        margin: 0;
        margin-left: 39%;
    }

    .xx {
        margin-top: 1%;
    }
}

@media screen and (max-width: 1050px) {
    .header1 .title {
        margin: 0;
        margin-left: 0;
    }

    .container1 {
        margin-top: 31%;
        width: 100%;
        z-index: 100;
    }

    .xx {
        margin-top: 7.5%;
        margin-inline: 0;
        width: 100%;
    }

    .KontakteUns2 {
        width: auto;
    }

    .footer-impressum {
        flex-direction: column;
    }

    .user-title {
        margin-inline: 0;
        width: fit-content;
    }

    .add-user {
        width: fit-content;
        margin-inline: 0;
    }

    .KontakteUns h1, .KontakteUns h2 {
        font-size: 28px;
    }

    footer {
        height: fit-content;
    }

    footer h4 {
        font-size: 15px;
    }

.hinweisText {
    font-size: 100%;
   }
}

@media screen and (max-width: 650px) {
    .container1 {
        margin-top: 53%;
    }


    .suchFeldGroup {
        flex-direction: column;
    }

        .suchFeldGroup div input {
            padding: 1%;
        }

    .col-btn {
        padding: 1%;
    }

    .col-6, .col-10 {
        padding: 2%;
    }

    .form h2 {
        margin-left: 1%;
    }

    .form h3 {
        margin-inline: 2%;
    }

    .div-forgetPassword {
        width: 93%;
        margin: 1%;
    }

        .div-forgetPassword button {
            width: auto;
        }

    .KontakteUns h1, .KontakteUns h2 {
        font-size: 20px;
    }

    .header1.animation .navbar-brand {
        height: auto;
    }
}


/*#region Ampel*/


.css-ampel {
    display: initial;
    width: 30px;
    height: 23px;
    border-radius: 6px;
    position: relative;
    background-color: black;
    zoom: 1.2;
    /* die beiden hier sind Extra weil ich mich für das kleine Ampel entschieden habe, wenn man aber für das Ganze Ample umentscheidet, dann sollte beide Eigenschaften raus und alle kommentierten Klassen und Eigenschaften wieder Aktivieren*/
    /*margin-inline: 6px;*/
    margin-right: 22px;
}

    .css-ampel span,
    .css-ampel:before,
    .css-ampel:after {
        content: "";
        color: white;
        position: absolute;
        border-radius: 15px;
        width: 22px;
        height: 22px;
        left: 4px;
    }
/*
.css-ampel:before {
    top: 6px;
    background-color: red;
    background-color: dimgrey;
}

.css-ampel:after {
    top: 34px;
    background-color: yellow;
    background-color: dimgrey;
}

.css-ampel span {
    top: 62px;
    background-color: green;
    background-color: dimgrey;
}

.ampelrot:before {
    background-color: red;
    box-shadow: 0 0 20px red;
}

.ampelgelb:after {
    background-color: yellow;
    box-shadow: 0 0 20px yellow;
}

.ampelgruen span {
    background-color: limegreen;
    box-shadow: 0 0 20px limegreen;
}*/


/*rotblinkend*/
.ampelrotblinkend:before {
    animation-name: rotblinkend;
    animation-timing-function: ease-in;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes rotblinkend {
    0% {
        background-color: dimgrey;
    }

    30% {
        background-color: dimgrey;
    }

    40% {
        background-color: red;
        box-shadow: 0 0 20px red;
    }

    100% {
        background-color: red;
        box-shadow: 0 0 20px red;
    }
}



/*gelblinkend*/
.ampelgelblinkend:after {
    animation-name: gelblinkend;
    animation-timing-function: ease-in;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes gelblinkend {
    0% {
        background-color: dimgrey;
    }

    30% {
        background-color: dimgrey;
    }

    40% {
        background-color: yellow;
        box-shadow: 0 0 20px red;
    }

    100% {
        background-color: yellow;
        box-shadow: 0 0 20px red;
    }
}



/*greenlinkend*/
.ampelgreenblinkend span {
    animation-name: greenblinkend;
    animation-timing-function: ease-in;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes greenblinkend {
    0% {
        background-color: dimgrey;
    }

    30% {
        background-color: dimgrey;
    }

    40% {
        background-color: limegreen;
        box-shadow: 0 0 20px red;
    }

    100% {
        background-color: limegreen;
        box-shadow: 0 0 20px red;
    }
}


/*#endregion */