.header {
    /*border-bottom: 1px solid #0068CD;*/
}
.paddingleft_10{
    padding-left: 10px;
}

.margin-top-zero{
    margin-top: 0px;
}

.paddingleft_100{
    padding-left: 110px;
}

.box-margin-bottom{
    margin-bottom: 10px;
}

.navigation ul {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    background-color: #0068CD;
    color:#fff;
    margin-bottom: 5px;
}

.navigation_padding ul {
    font-size: 16px;
    padding: 13px;
}

.navigation li {
    float: left;
}


.navigation li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navigation_child a:hover {
    border-bottom: 5px solid #8b0000;
}
.colum-right,
.floatright{
    float: right;
}

.colum-left,
.floatleft{
    float: left;
}

.background{
    background-color:#006bb3;
    width: 100%;
    height: 100%;
}
.whitebox {
    background-color: #fff;
    height: 50%;
    width: 50%;
    margin: auto;
    text-align: center;
}

.breadcrumb {
    list-style: none;
    overflow: hidden;
    font: 18px Helvetica, Arial, Sans-Serif;
    padding: 0;
    margin: 1px;
    background: #0068CD;
    display: flex;
}

.breadcrumb li  {
    color: #fff;
    text-decoration: none;
    padding: 20px 0 20px 55px;
    background: #0068CD;
    position: relative;
    display: block;
    float: left;
    text-align: center;
}

.breadcrumb li::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid #0068CD;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 99.8%;
    z-index: 2;
}

.breadcrumb li::before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
}

.breadcrumb li:first-child {
    padding-left: 0px;
}

ul.breadcrumb li {
    width: 13.5em;
}

img#logo {
    width: 135px;
    height: auto;
    float: left;
    margin-right: 8px;
    /*border-left: 10px solid #fff;*/
}

img#airbottle {
    height: auto;
    width: 100%;
    float: right;
    margin-top: 1px;
}

.link_button {
    position: absolute;
    bottom: 0px;
    background: linear-gradient(to bottom, #0068CD, #0068CD);
    padding: 20px;
    color: #fff;
    text-align: center;
    font-size: 25px;
}

.link_button:focus{
    background: linear-gradient(to top, #005790, #005790);
}

.left_link_button {
    width: 45.5%;
    left: 0;
}

.full_link_button {
    width: 100%;
    left: 0;
}

.right_link_button {
    width: 46%;
    left: 51%;
}

.textcenter{
    text-align: center;
}

body {
    font-size: 25px;
    margin: 0;
    font-family: sans-serif;
    padding: 10px;
}

.no_scroll_bar {

    overflow: hidden;
}



.colum-right {
    /*border-left: 4px solid #006bb3;*/
    width: 49%;
    height: 100%;
    margin-top: -24px;
    padding: 0px;
}

.colum-left {
    width: 50%;
}

/*Table*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 15px 5px;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}

th {
    background: #0068CD;
    color: #fff;
}

td.tablebutton,
td.tablebutton_empty{
    background: #0068CD;
    border: 1px solid #fff;
    text-align: center;
    padding: 0 5px;
}

td.tablebutton:hover {
    background: #00406b;
}

td.tablebutton a
{
    color: #fff;
}

.table-scrollable {
    width: 100%;
    overflow-y: auto;
    margin: 0 0 1em;
}

/*Form*/
#fos_user_registration_form_email,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #0068CD;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
}

input[type=submit]:hover {
    background-color: #00406b;
}

.formular {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    width: 50%;
}

.checkliste {
    padding-left: 10px;
    width: 100%;
}

a{
    text-decoration:none;
}

/*Form ende*/

h1,
h2,
h3,
a,
li,
ul,
ol,
p,
button,
input,
label,
.values
{
    font-family: sans-serif;}
h1 {
    font-size: 30px;
}

h2 {
    font-size: 28px;
    margin: 0;
}

.helptext {
    margin-top: 5px;
    margin-left: 47px;
    font-size: 16px;
}

.infotext{
    margin-top: 5px;
}

.loadscreen {
    width: 23px;
    margin-right: 7px;
    margin-left: 5px;
}


h1{
    margin-bottom: 0px;
}

/*
h1 {
    margin-bottom: 0px;
    border: 1px solid #006bb3;
    background: #006bb3;
    border-radius: 0px 50px 50px 0px;
    color: #fff;
}
*/
.values {
    font-size: 34px;
    margin-top: 53px;
}

.value_title {
    white-space: nowrap;
    display: -webkit-inline-box;
    color: #fff;

}

.bluebox {
    background: #0068CD;
    color: #fff;
    width: 100%;
    padding: 15px 0;
    padding-left: 10px;
    margin-left: -10px;
}
.checkbox_icons{
    display: -webkit-inline-box;
    color: #0068CD;
    margin-right: 10px;
}

#myChart{
    height: 200px ;
    width: 200px;
}

#volt,
#credit,
#price{
    display: -webkit-inline-box;
}


button {
    background: linear-gradient(to bottom, #0068CD, #00406b);
    width: max-content;
    color: #fff;
    font-size: 20px;
    border: 0px;
}

button:hover {
    background: linear-gradient(to bottom, #00406b,#0068CD );
}

/*nach Präsi wieder löschen*/

canvas#myChart,
#timerDisplayNone{
    display: none;
}

/*nach Präsi wieder löschen ende */

.login_box {
    width: 23%;
    margin: auto;
    background: #ccc;
    padding: 60px;
    margin-top: 8em;
}

div#counter1 {
    float: left;
}

img#login_logo {
    width: 161px;
    text-align: center;
    margin: auto;
    align-items: center;
    display: flex;
}

hr {
    color: #fff;
    border: 1px solid;
}

h1#registrieren {
    margin-bottom: 23px;
    padding: 5px;
    /* margin: auto; */
    width: 98%;
    margin-top: 0px;
}

h1.login_h1 {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 20px;
    background: #fff;
    margin: auto;
    width: 161px;
    color: #0068CD;
}
#registrieren_h1{
    width: 235px;
}

.logout a{
    float:right;
}

.logout{
    float:left;
    color: #fff;
}

.logout button {
    background:#fff;
    width: 136px;
    height: 100%px;
    color: #000;
    font-size: 20px;
    border: 0px;
    float:right;
}

#logout_li{
    float: right !important;
}

#username_logout{
    padding-top: 14px;
    float:left;
}

#customer_form_date_year,
#customer_form_date_month,
#customer_form_date_day,
#customer_form_instruction_day,
#customer_form_instruction_month,
#customer_form_instruction_year{
    width: 33%;
}

.phone {
    width: 11em;
    padding: 11px 5px;
    font-size: 33px;
}

.supportHeader h1 {
    padding: 21px 0px;
    margin: 0px;
}

h1.checkliste {
    margin-top: 0px;
}

.fuellcomplete,
.fuell {
    display: none;
}

.whitelink {
    color: white;
}

.usernameHeader {
    float: left;
    margin: 14px 0;
    display: block;
}

.tabledivbutton{
    width: 40%;
    background-color: blue;
    display: inline-block;
    color: white;
    padding: 5px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.tablebutton3{
    width: 30%;
    background-color: blue;
    display: inline-block;
    color: white;
    padding: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.createuserbutton{
    width: 200px;
    background-color: blue;
    display: inline-block;
    color: white;
    padding: 5px;
}
#dataTable{
    overflow-y: auto;
}

#list_table_customer tr {
    float: left;
    width: 32%;
    padding: 5px;
}

#list_table_customer td {
    float: left;
    width: 100%;
    padding:0;
}

#keepFilling {
    box-shadow: 1px 1px 10px black;
    background-color: white;
    padding: 20px 20px 125px 20px;
    justify-content: center;
    align-content: center;
    position: absolute;
    width: 51%;
    left: 25%;
    text-align: center;
}

#information_box {
    box-shadow: 1px 1px 10px black;
    background-color: white;
    padding: 20px 20px 125px 20px;
    justify-content: center;
    align-content: center;
    position: absolute;
    width: 85%;
    left: 5%;
    top: 3%;
    text-align: center;
    height: 65%;
    z-index: 3;
}

.keep_filling_block {
    display: none;
}

#progressBar {
    width: 100%;
    float: left;
    border: 1px solid transparent;
    height: 15px;
    
}
progress::-webkit-progress-value {
    background-color: #0068CD;
}

#keep_filling_text,
#information_box_text{
    float: left;
    text-align: center;
    width: 100%;
}
.progessbar_airfill{
    width: -webkit-fill-available;
    padding: 10px;
    float:left;
}
.progessbar_airfill progress {
    height: 50px;
    border-radius: unset;
    width: 100%;

}
#airfillProgressBar{}
#waitTimeProgressBar{}
#PressProgressBar{}

#BarElement1,
#BarElement2,
#BarElement3{
    float: left;
    width: 33%;
}

#loadscreen2,
#loadscreen3,
#checkbox_icons1,
#checkbox_icons2,
#checkbox_icons3{
    display: none;
}