body {
    font-family: "Lato", sans-serif;
}
.navbar img {
    height: 90px;
}

.navbar{
     background: #ffffff !important;
     color: #000000;
 }

.navbar-light .navbar-nav .nav-link{
    color: #8f999f !important;
}

.navbar-light .navbar-nav .nav-link:hover{
    color: #8f999f !important;
    text-decoration: underline !important;
}

.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link{
    color: #4D4D4D !important;
    font-weight: bolder!important;
}

.main-head{
    height: 150px;
    background: #ffffff;

}

.sidenav {
    height: 100%;
    width: 100%;
    background-color: #000;
    overflow-x: hidden;
    padding-top: 20px;
    background: linear-gradient(to bottom, #017197, #00BA81);
}

.sidenav img {
    height: 140px;
}

.main {
    padding: 0px 10px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
}

@media screen and (max-width: 800px) {
    .login-form{
        margin-top: 10%;
    }

    .register-form{
        margin-top: 10%;
    }
}

@media screen and (min-width: 900px){
    .main{
        margin-left: 40%;
    }

    .sidenav{
        width: 40%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
    }

    .login-form{
        margin-top: 80%;
    }

    .register-form{
        margin-top: 20%;
    }
}


.login-main-text{
    margin-top: 20%;
    padding: 20% 20%;
    color: #fff;
    text-align: center;
}

.login-main-text h2,h3{
    font-weight: 300;
    text-align: center;
}

.btn-group:hover{
    background-color: transparent !important;
    color: #fff !important;
}

.blackRow{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 15px;
    background-color: #4D4D4D;
}

.h1,h1{
    text-align: right;
    color: #ffffff;
    padding-top: 170px;
    font-size: 2.0rem !important;
    font-weight: bolder;
}

.lead.text-muted{
    text-align: right;
    padding-right: 5px;
    color: #ffffff !important;
    font-weight: bolder;
}

.bigstripe{
    background-image: url("../images/variante2.png") !important;
    background-size: cover;
    height: 400px;
}

.test{
    width: 50px;
}

.jumbotron{
    background-image: url("../images/header.png") !important;
    background-size: cover;
    height: 400px;
}

.jumbotron-access-denied{
    background-image: url("../images/access_header.png") !important;
    background-size: cover;
    height: 800px;
}

.shadow-sm{
    background-image: url("../images/Bild-Eingang500.png");
    border: #ffffff;
    border-style: groove;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 250px;
    width: 100%;
    background-position: center;
}

.card-body {
    padding: 0px !important;
    padding-bottom: 1.25rem !important;
    padding-top: 1.25rem !important;
}

.card-header{
    width: 100%;
    height: 50px;
    background: linear-gradient(290deg, transparent 13px, #1D4C97 0) top right;
    border-bottom: unset !important;
}

.card-header-text{
    text-align: center;
    font-weight: bolder;
    color: #ffffff;
    font-size: larger;
}

.row{
    padding-top: 96px;
    width: 100% !important;
}

.col{
    width: 50px;
}

.pfeil{
    width: 50px;
    height: 30px;
    float: right;
}

.btn-pfeil{
    border: none;
    background-color: transparent;
}

.table-platz{
    height: 5px;
}

.btn-update{
    border: none;
    background: transparent;
}

.table{
    width: 75%;
    margin-bottom: 1rem;
    color: #1D4C97;
    margin-left: auto;
    margin-right: auto;
}

.table-active{
    background-color: #F3F3F3;
}

.Ueberschrift{
    text-align: center;
    height: 50px;
    color: #1D4C97;
}

.btn-all{
    border: none;
    background-color: transparent;
    text-decoration: underline;
    text-align: center;
}

.tr-all:hover{
    background-color: #ffffff !important;
}

.tr-all{
    border: none;
    background: #ffffff;
}

.status-btn{
    text-align: left;
}

.btn-all-main{
    text-align: left;
}

.table-leser-uebersicht{
    width: 75%;
    margin-bottom: 1rem;
    color: #1D4C97;
    margin-left: auto;
    margin-right: auto;
}

.table-leser-uebersicht .leser-datenblatt{
    color: #1D4C97;
    padding-right: 5px;
    padding-left: 5px;
    height: 100%;
}

#accordion{
    width: 75%;
    margin-right: auto;
    margin-left: auto;
}

#collapseOne {
    padding-bottom: 15px;
}

.btn-collapse{
    float: right;
}

.btn-link{
    color: #000000 !important;
    text-decoration: none !important;

}

.btn-link:hover{
    font-weight: bolder !important;
    color: #000000 !important;
}


.card-header-status{
    width: 100%;
    height: 50px;
    background: linear-gradient(290deg, transparent 13px, silver 0) top right;
    border-bottom: unset !important;
    padding: .75rem 1.25rem;
    margin-bottom: 0;
}

.card-header-images{
    width: 100%;
    height: 50px;
    background: linear-gradient(290deg, transparent 13px, #C0C0C0 0) top right;
    text-align: left;
    color: #ffffff;
    border-bottom: none;
    padding-top: 5px;
    margin-bottom: 5px;
}

.card-header-start-images{
    width: 80%;
    float: left;
    clear: left;
}

.card-header-events{
    width: 100%;
    height: 50px;
    background: linear-gradient(290deg, transparent 13px, #C0C0C0 0) top right;
    text-align: left;
    color: #ffffff;
    border-bottom: none;
    padding-top: 5px;
    margin-bottom: 5px;
}

.card-header-data{
    width: 10%;
    float: left;

}

.Zaehler {
    width: 10%;
    float: left;
    font-size: large;
    color: black;
}


.card-header-data-5px{
    width: 20%;
    float: left;
    padding-top: 5px;
}

.card-header-data img{
    text-align: right !important;
}

.card-header-leser{
    width: 20%;
    float: left;
}

.card-header-start{
    width: 20%;
    float: left;
    clear: left;
}

.card-heading-status{
    width: 100%;
    height: 50px;
    background: linear-gradient(290deg, transparent 13px, #C0C0C0 0) top right;
    text-align: center;
    color: #ffffff;
    padding-top: 5px;
    margin-bottom: 5px;
}

.card-data-spacer{
    width: 5%;
    float: left;
}

.card-data-spacer-start{
    width: 5%;
    float: left;
    clear: left;
}

.card-data-entrance{
    width: 5%;
    float: left;
    clear: left;
}

.card-data-entrance-home{
    width: 10%;
    float: left;
    clear: left;
    margin-left: 5%;
}

.card-data-test{
    width: 5%;
    float: left;
}

.card-data-test-home{
    width: 10%;
    float: left;
}

.card-data-name{
    width: 20%;
    float: left;
}

.card-data-name-home{
    width: 40%;
    float: left;
}

.card-data-event-hinzufugen {
    width: 100%;
    float: left;
}

.card-data-online{
    width: 15%;
    float: left;
    vertical-align: center;
}

.btn-card-config{
    width: 20%;
    float: left;
}

.card-data-date{
    width: 20%;
    float: left;
}

.card-data-table{
    text-align: center;
}

.card-data-table-reader-listing{
    height: 30px;
}

.card-anzeige-description {
    float: left;
    width: 90%;
    text-align: center;
    font-weight: bolder;
}

.header-btn-update{
    background-color: #ffffff;
    border: blue;
}

.header-btn-send {
    background-color:#79CA53;
    border:blue;
}



.card-heading-status{
    width: 100%;
    height: 50px;
    background: linear-gradient(290deg, transparent 13px, #C0C0C0 0) top right;
    text-align: center;
    color: #ffffff;
    border-bottom: none;
    padding-top: 5px;
    margin-bottom: 5px;
}

.card-image-listing{
    width: 100%;
/*    height: 140px;*/
}

.card-image-listing-hinzu{
    width: 100%;
    padding-left: 10px;
}

.card-image-delete{
    width: 5%;
    float: left;
}

.card-image-delete-event{
    width: 5%;
    float: left;
}

.card-image-pic{
    width: 20%;
    float: left;
    text-align: center;
}

.card-image-pic img{
    width: 100% !important;
    margin-bottom: 15px;
}

.card-image-online{
    width: 20%;
    float: left;
    text-align: center;
}

.card-image-name{
    width: 40%;
    float: left;
    text-align: center;
}

.btn-cards{
    border: none;
    background-color: transparent;
}

.card-event-listing{
    width: 100%;
    min-height: 40px;
    margin-bottom: 50px;
}

#accordion{
    margin-bottom: 5rem;
}

#a-button {
    width: 100%;
    height: 100%;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
}

#b-button {
    width: 100%;
    height: 100%;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
}

.error-msg {
    color:#c82333;
    font-weight:bold;
}

.heading {
    color: #1D4C97;
    font-weight: bolder;
    font-size: 40px;
    text-align: center;
}

.information-text {
    color: #111111;
    font-size: unset;
    margin-left: 10%;
    margin-right: 10%;
}

.spacer-section {
    height: 50px;
}

.info-text-section {
    margin-left: 10%;
    margin-right: 10%;
    height: 650px;
}

.image-png {
    float: left;
    clear: left;
    width: 10%;
    margin-bottom: 20px;
}

.image-description-png {
    float: left;
    clear: right;
    width: 70%;
    margin-bottom: 20px;
}

.entrance-info-section {
    margin-left: 10%;
    margin-right: 10%;
    height: 750px;
}

.left-info-block {
    border-color: #1D4C97;
    border-style: solid;
    border-width: thin;
    text-align: left;
    width: 49%;
    float: left;
    margin-bottom: 50px;
    height: 300px;
}

.right-info-block {
    text-align: left;
    font-weight: bolder;
    border-color: #1D4C97;
    border-style: solid;
    border-width: thin;
    width: 49%;
    float: right;
    margin-bottom: 50px;
    height: 300px;
}

.description {
    width: 80%;
    float: left;
    clear: left;
}

.button-menu {
    width: 20%;
    text-align: right;
    float: left;
    height: 30px;
}

.button-menu-pic {
    height: 30px;
    width: 50px;
    padding-right: 5%;
}

.right-info-block-header {
    background-color: #1D4C97;
    color: #FFFFFF;
    padding-left: 5%;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: lighter;
    font-size: 20px;
    width: 100%;
    height: 50px;
}

.right-info-block-box {
    text-align: center;
    padding-top: 10%;
    font-weight: bolder;
}

#black-section {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, #4D4D4D, #FFFFFF);
}

.footer-width {
    margin-left: 10%;
    margin-right: 10%;
    background-image: url("../images/footer.png");
}

.footer-column {
    width: 20%;
    padding-right: 1%;
    float: left;
    padding-bottom: 100px;
}

.column-header {
    font-weight: bolder;
    margin-bottom: 0px;
}

.green-row {
    margin-bottom: 10px;
    padding: 0;
    width: 100%;
    height: 4px;
    background-color: darkgreen;
}

.footer-bottom {
    width: 100%;
    height: 50px;
}

.footer-bottom-image {
    height: 150px;
    width: 100%;
}

.shopware-logo {
    width: 40%;
}

.footer-link {
    color: #111111;
}

.footer-link:hover {
    color: #111111;
    text-decoration: none;
}

.event-hinzufugen {
    float: left;
    clear: left;
    padding-left: 10px;
    padding-bottom: 10px;
}


/* Controller lastaccess */
.row.entry {
    border: 1px solid #7f9ec3;
    margin: 5px;
    padding-top: 5px;
}
.row.entry.small {
    font-size:10px;
    margin: 0px;
    padding: 1px;
}

.row.entry.small.ingreen {
    background-color: #95e073;
}

.row.entry.small.outred {
    background-color: #fb7d7d;
}

.svgIn {
    width: 25px;
    height: 25px;
    display: block;
    text-indent: -9999px;
    background: url('../images/eingang_25.png') no-repeat;
    background-size: 25px 25px;
    float: left;
}

.svgOut {
    width: 25px;
    height: 25px;
    display: block;
    text-indent: -9999px;
    background: url('../images/ausgang_25.png') no-repeat;
    background-size: 25px 25px;
    float: left;
}

.svgTrue {
    width: 20px;
    height: 20px;
    display: block;
    text-indent: -9999px;
    background: url('../images/online_25.png') no-repeat;
    background-size: 20px 20px;
    float: left;
    margin-left: 5px;
    margin-top: 2px;
}

.svgFalse {
    width: 20px;
    height: 20px;
    display: block;
    text-ident: -9999px;
    background: url('../images/offline_25.png') no-repeat;
    background-size: 20px 20px;
    float: left;
    margin-left: 5px;
    margin-top: 2px;
}

.svgTrueTest {
    width: 20px;
    height: 20px;
    display: block;
    text-indent: -9999px;
    background: url('../images/testaktiv_25.png') no-repeat;
    background-size: 20px 20px;
    float: left;
    margin-left: 5px;
    margin-top: 2px;
}

.svgFalseTest {
    width: 20px;
    height: 20px;
    display: block;
    text-ident: -9999px;
    background: url('../images/test_25.png') no-repeat;
    background-size: 20px 20px;
    float: left;
    margin-left: 5px;
    margin-top: 2px;
}

span.online {
    width: 25px;
    height: 25px;
    background: url('../images/online_25.png') no-repeat;
    background-size: 25px 25px;
    display:inline-block;
}

span.offline {
    width: 25px;
    height: 25px;
    background: url('../images/offline_25.png') no-repeat;
    background-size: 25px 25px;
    display:inline-block;
}

.container {
    padding-bottom: 15px;
}

.card-image-listing-help {
    padding-left: 10%;
}

.barcode-feld {
    clear: left;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}

.eintritt {
    float: left;
}

.date-selection {
    margin-left: 20%;
}

.table-report {
    margin-left: 5%;
    margin-right: 5%;
}

.report-timespace {
    margin: 10px;
    text-align: center;
}

.report-header {
    float: left;
    width: 20%;
    border: inset;
    text-align: center;
}

.report-data {
    float: left;
    width: 20%;
/*    border: inset;*/
    text-align: center;
}

.report-data-start {
    float: left;
    clear: left;
    width: 20%;
    /*    border: inset;*/
    text-align: center;
}

.read-ausgabe {
    height: 100%;
    width: 60%;
    float: right;
    text-align: left;
}

.form-register {
    margin-left: 20px;
    margin-bottom: 10px;
}

.block-setting {
    width: 80%;
    margin-left: 10%;
    min-height: 100px;
    margin-bottom: 50px;
}

.header-row-setting {
    width: 100%;
    height: 40px;
    background-color: gray;
    border: double;
    padding-top: 0.4%;
    padding-left: 0.5%;
}

.header-row-setting-description {
    width: 100%;
    height: 60px;
    background-color: lightgray;
    border: double;
    padding-top: 0.4%;
    padding-left: 1%;
    padding-right: 1%;
}

.second-header-row-setting {
    width: 98%;
    margin-left: 1%;
    height: 40px;
    background-color: darkgray;
    border: double;
}

.reader-row-setting {
    width: 96%;
    margin-left: 2%;
    height: 40px;
    border: double;
}

.header-column-2 {
    width: 2%;
    float: left;
    padding-top: 0.8%;
}

.header-column-3 {
    width: 3%;
    float: left;
    padding-top: 0.2%;
}

.header-column-5 {
    width: 5%;
    float: left;
}

.header-column-10 {
    width: 10%;
    float: left;
    text-align: center;
}

.header-column-15 {
    width: 12%;
    float: left;
    text-align: center;
    margin-top: 5px;
}

.header-column-20 {
    width: 18%;
    float: left;
}

.header-column-sound {
    width: 150%;
    margin-top: 20%;
}

.data-row-setting {
    width: 98%;
    margin-left: 1%;
    height: 40px;
    border: double;
}

.setButton {
    border: groove;
    border-color: rgb(133,133,133);
    border-width: 2px;
    background-color: rgb(239,239,239);;
    color: black;
    width: 65%;
    height: 85%;
    display: block;
    text-align: center;
    margin-top: 3px;
}

.setButton:hover {
    text-decoration: none;
    color: black;
}

.selectColorMode {
    margin-top: 6px;
}

.messageInputField {
    margin-top: 2px;
    width: 90%;
}

.entranceImage {
    width: 35%;
    float: left;
    margin-left: 5%;
    height: 100%;
    border-width: 1px;
    border: solid;
    margin-bottom: 2%;
}

.entranceText {
    width: 50%;
    float: left;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 1%;
    background-color: lightgreen;
    height: 80%;
    padding: 1%;
}

.lastEntranceRow {
    float: left;
    clear: left;
    width: 100%;
    height: 150px;
    border-top: solid;
    padding-top: 1%;
    padding-bottom: 1%;
}

.actualEntranceRow {
    float: left;
    clear: left;
    width: 100%;
    height: 15rem;
    padding-bottom: 1%;
}

.imageFastlane {
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alert-background {
    background-color: lightcoral !important;
}

.info-background {
    background-color: yellow !important;
}