:root {
--camp_blue1: #b1cbd0;
--camp_blue2: #80bbbd;
--camp_blue3: #366577;
--camp_blue4: #1c436c;
--cassiopeia-color-primary: #366577;
--body-font-size: 12pt;
--body-line-height: 15pt; 
--camp-font-size-sub: 1.63rem;
--camp-font-size-sub-line-height: 1.5rem;
--camp-font-size-head: 5.1rem;
--camp_gray: #dde1e6;
--max-width: 1280px;
}
div.actionbuttons {max-width: var(--max-width);font-size: var(--camp-font-size-sub);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, max-content));
    column-gap: 20px;
    row-gap: 20px;
    justify-items: center;}
.actionbuttons button {width:300px;height:300px;}
ul.doc_lines li{display:grid;grid-template-columns:40px 1fr 100px 100px 70px 65px 70px 80px 50px;margin:2px;}
.dat_von, .dat_bis {width:100px;}
ul.doc_lines li.header {font-weight:bold;}
a.green, button.green {background-color:#00a500;}
button.red {background-color:#cb7777;}
button.blue {background-color:#009da5;}

.actionbuttons button i {margin: 20px;font-size: var(--camp-font-size-head);}
.doc_header {display: grid;grid-template-columns:1fr 1fr;}
.doc_header_date {text-align:right;}
.doc_header_date input {width:140px;}
.doc_header ul,.doc_body ul{list-style:none;}
.doc_header li{margin:4px;}
.doc_header input, .doc_header select,.doc_body input, .doc_body select {border: 0;
border-bottom: 1px solid var(--camp_blue4);}
button.del_zeile {border:1px solid;}
.kun_list {padding:0;}.kun_list li {display: grid;font-size:0.7rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
button.doc_save{    width: 10rem;
    margin: auto;
    display: block;
    font-size: var(--camp-font-size-sub);
    line-height: var(--camp-font-size-sub);
    height: 4.3rem;
    color: green;}
.doclist {list-style:none;width:80%;}
.doclist button {border: 0;
    width: 80%;
    margin: auto;
    display: block;
    height: 40px;
    font-size: 1.6rem;
background-color: #afe7a8;}
.doclist button:hover{background-color:#eee;border:1px solid #000;}
.doclist li,.doc_customerlist li {margin:10px;}
.doclist div.doclist_grid {    display: grid;
    grid-template-columns: 50px 1fr 1fr 2fr;}
.doc_customerlist {list-style:none;}
.doc_customerlist button {border: 0;
    width: 50%;
    margin: auto;display: grid;
    grid-template-columns: 1fr 3fr;
    height: 40px;
    font-size: 1.6rem;
background-color: #afe7a8;align-items: center;justify-items: start;}
.doc_customerlist button:hover {background-color:#d1e7ce;}
.doc_header_date li {    width: 200px;
    margin: 5px 0 5px auto;
    display: grid;
    /* justify-content: flex-start; */
    justify-items: start;
    grid-template-columns: 90px 100px;}
input::-webkit-outer-spin-button.menge,input::-webkit-inner-spin-button.menge, {-webkit-appearance: none;
margin: 0;} 
#card_new ul {list-style:none;}
#doc_create {text-align:center;}
#doc_create button {
    height: 150px;
    width: 150px;
color: green;}
#doc_create div {padding: 10px;
    display: grid;
    justify-items: end;
    grid-template-columns: 1fr 1fr;
    width: 320px;
    margin: auto;
    grid-column-gap: 20px;
align-items: center;}
#doc_create button > i {font-size: 75px;}
.doclink {
	color:green;
	text-decoration:none;
	width: 200px;
    margin: auto;
    display: block;
    font-size: 30px;
    background-color: #ddd;
    border: 1px solid #000;
    height: 150px;
text-align: center;}
.doclink i {font-size: 50px;
margin: 25px;}
a.but_zurueck {width:200px;height:50px;background-color:green;color:white;text-decoration:none;display:block;margin:auto;text-align:center;font-size:1.8rem;line-height: 2.7rem;}
div.icons {display:none;}
@media all and (max-width: 400px) {
	ul.doc_lines li.header {display:none;}
	ul.doc_lines li, ul.doc_lines button {display:block;}
	 ul.doc_lines button {margin:20px auto;}
	.doc_customerlist button,ul.doclist button {width:90%;font-size:1.1rem;}
	ul.doc_customerlist,ul.doclist {padding:0;width:auto;}
	.doc_header {display:block;}
	.doc_header_date{text-align:left;}
	
}