body {
    background-image:url('../../template/images/background_light.jpg');
    background-size:100px;
    background-color: rgba(255, 255, 255, 0.3);
}

p {
    margin: 0 2%;
}

.p5 {
    margin: 0 5%;
}

h4 {
    text-align:center;
    font-size:1.1em;
    line-height:2em;
    margin:0;
    font-weight:bold;
}

h6 {
    font-style:italic;
    text-align:center;
    font-size:1em;
    line-height:2em;
    margin:0;
    font-weight:normal;
}


.back_transparent {
    background-color:transparent !important;
}


#start_logo {
    max-width:200px;
    width:100%;
}

#start_head_logo {
    margin:55px 0 45px 40%;
    width:20%;
    float:left;
    text-align:center;
}

.start_inner {
    width:100%;
    max-width:1200px;
    margin:auto;
    position:relative;
}

.header1 {
    height: 18px;
    padding: 12px 20px;
    position:fixed;
    z-index:100;
}

#appcontent {
    margin-top:75px;
}

#start_head_outer {
    width:100%;
    position:relative;
    overflow:hidden;
    background-image:url('../../template/images/header_start.jpg');
    background-position:center;
}

#start_content {
    color:#666;
}

.input_start {
    box-sizing:border-box;
}

#start_content_left{width:35%;float:left;}
#start_content_center{width:50%;float:left;}
#login{width:20%;margin:120px 10% 0 0;float:right;text-align:center;padding:10px;border-radius:4px;background-color:rgba(255,255,255,0.5);}
#backimg{width:100%;position:absolute;}
#footer_inner{margin-left:35%;}

#appname {
    float:right;
    color:white;
}

#menu_module {
    position:absolute;
    width:70%;
    right:0;
    background-color:#ddd;
    margin-top:11px;
}

#start_head_logo{margin-left:10%;width:80%;}
#login{clear:both;margin:0 auto 20px;width:80%;float:none;}
#start_content_left,#start_content_center{width:80%;margin:0 10%;}
#footer_inner{margin-left:0;}
#footer1{padding:0.4em 10%;}
form .w60{width:100%;}

.submit_setmndt {
    clear:both;
    text-align:center;
    line-height:1.2em;
    margin-bottom:20px;
}

.submit_setmndt_kassa, .submit_setmndt_automaten {
    display:none;
}

hr {
    width:90%;
    margin:15px 5%;
    border-top:1px solid #ccc;
}

.button_white {
    width:78%;
    padding:10px 1%;
    margin:18px 10%;
    background-color:white;
    text-align:center;
    border:none;
}

.button_white2 {
    margin:8px 10%;
}

.button_white_small {
    padding:7px 1%;
    margin:5px 0;
    background-color:white;
    text-align:center;
    border:none;
}

.button_grey_small {
    padding:7px 1%;
    margin:5px 0;
    background-color:#888;
    text-align:center;
    border:none;
    color:white;
}

.button_grey {
    width:78%;
    padding:10px 1%;
    margin:18px 10%;
    background-color:#888;
    color:white;
    text-align:center;
    border:none;
}

form .button_grey {
    width:80%;
}

.text_title {
    font-style:italic;
    width:90%;
    margin:5px 5%;
    text-align:center;
}


.box_table td {
    padding:7px 8px;
    background-color:white;
}

.box_table {
    border:5px solid transparent;
    border-collapse: separate;
    border-spacing: 7px;
    width:98%;
}

.app_boxname {
    max-height:2.5em;
    overflow-y:hidden;
}

.plusbutton {
    background-image: url("../../template/images/plus.png");
    background-repeat: no-repeat;
    background-size: 50px 50px;
    color: transparent;
    border: none;
    width: 50px;
    height: 50px;
    background-color: transparent;
    cursor: pointer;
    float:right;
    margin-right:10%;
}


#headerbar {
    width:100%;
    height:35px;
    overflow:hidden;
    top:42px;
    position:fixed;
    background-color:#eee;
    z-index:50;
}

#headerbar_inner {
    width:100%;
    height:50px;
    overflow-x:scroll;
    overflow-y:hidden;
}

#headerbar td {
    padding:7px;
}

#headerbar .aktiv {
    text-decoration:underline;
}

.errordiv {
    width:78%;
    padding:10px 1%;
    margin:18px 10%;
    background-color:red;
    text-align:center;
    border:none;
    color:white;
    font-size:2em;
}



/* TIMEPICKER, ZAEHLER */

#timepicker_back, .zahler_back {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
    background-color:white;
    opacity:0.8;
    display:none;
}

#timepicker, .zaehler {
    position:fixed;
    height:80%;
    width:78%;
    left:9%;
    top:10%;
    padding:0 2%;
    z-index:1001;
    background-color:white;
    display:none;
    box-shadow:0px 0px 15px gray;
}

#timepicker_value, .zaehler_value {
    margin:3% 5%;
    width:90%;
    height:10%;
    text-align:center;
}

.timepicker_field, .zaehler_field {
    margin:3% 5%;
    width:23.33%;
    height:10%;
    float:left;
    text-align:center;
    cursor:pointer;
}

@media (orientation:landscape) {
    .timepicker_field, .zaehler_field {
        margin:1% 5%;
        width:23.33%;
        height:8%;
    }
}

.timepicker_field, #timepicker_value, .zaehler_field, .zaehler_value {
    padding:0;
    font-size:2em;
}


.radio-button-group {
    display: inline-flex;
    flex-wrap: wrap;
    width:78%;
    padding:10px 1%;
    margin:0px 10%;
    text-align:center;
    border:none;
    justify-content: space-evenly;
}

.radio-button-group input[type="radio"] {
    display: none; 
}

.radio-button-group label.radio-button-label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #888;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.radio-button-group input[type="radio"]:checked + label {
    border-color: green; 
    background-color: #e0ffe0;
}



.table-container {
    width: 100%;
    overflow-x: auto;
    padding: 0 8px;
    box-sizing: border-box;
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
    border: 1px solid #ddd;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #ddd;
}

.styled-table th {
    background-color: #f4f4f4;
}

.styled-table tr {
    border-bottom: 1px solid #ddd;
}

.styled-table tr:nth-of-type(even) {
    background-color: #f9f9f9;
}

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

.table-separator hr {
    border: none;
    border-top: 2px solid #ddd;
    margin: 20px 0;
}

.header-row {
    background-color: #f4f4f4;
    font-weight: bold;
}

.group-row {
    background-color: #e9e9e9;
    font-weight: bold;
}

.ta_r {
    text-align: right;
}

@media (min-width: 600px) {
    .table-container {
        padding: 0 32px;
    }
}