body {background-color:#f0f0f0;}


img {
  max-width:100%;
  height:auto;
}


.item {padding:15px;}
.item .image {max-width:200px;}
.item .desc {}
.item .preis-netto {}


html {min-height:100%;}
body {height:100%; position:relative;}


#menu {margin:1.5rem 0 1.5rem 0;}
#menu ul {margin:0; padding:0;}
#menu ul li {display:inline-block; margin:0; vertical-align:middle;}
#menu ul li a {display:block; text-decoration:none; background-color:#336699; color:#FFF; border-radius:3px; padding:0.5rem  1rem; cursor:pointer; font-size:1.05rem;}
#menu ul li a:hover {background-color:#29547E; color:#FFF; border-radius:3px;}


#doc_status {width:65%; position:relative;}
#doc_status .content.min {height:50px; overflow:hidden;}
#doc_status .minimize-icon {cursor:pointer; position:absolute; width:24px; top:6px; right:6px; text-align:center; z-index:25;}



#usermenu {width:65%;}
#usermenu ul {margin:0; padding:0; text-align:right;}
#usermenu ul li {display:inline-block; margin:0; vertical-align:middle; font-size:0.9rem; margin-left:1rem;}


#modal {overflow:auto; display:none; position:fixed; padding:2rem; top:50%; left:50%; transform:translate(-50%, -50%); z-index:99998; width:65%; max-height:75%; min-height:30%; background-color:#FFF; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
#modal .close-msg {font-weight:bold; cursor:pointer; color:#EEE; position:absolute; right:6px; top:6px; padding:2px 5px; text-align:center; z-index:99999;}

#main {overflow:hidden;clear:both;float:none;}


#systemmessage {position:fixed; bottom:20px; right:20px; width:40%; z-index:500;}
#systemmessage .content {padding:15px; background-color:#222; text-align:center; color:#EEE;}
#systemmessage .close-msg {font-weight:bold; cursor:pointer; color:#EEE; position:absolute; right:6px; top:6px; padding:2px 5px; text-align:center; z-index:501;}


#elements {width:30%; float:right; overflow:auto; position:fixed; right:0; top:0; height:100vh;}
#elements .draggable {background-color:#fff; margin-bottom:15px;}

#stage {width:65%; float:left; background-color:#FFF; box-sizing:border-box; padding:30px; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
#stage .draggable {background-color:#fff;}
#stage .droppable{
	width:auto;
	min-height: 100px;
	border: 1px dotted #222;
  background-color:#fff;
}


table {witdh:100%; border-collapse: collapse;}
table tr td {padding:4px;}
table.stage tr td:nth-child(1) {width:15%;}
table.stage tr td:nth-child(2) {width:45%;}
table.stage tr td:nth-child(3) {width:10%; text-align:center;}
table.stage tr td:nth-child(4) {width:10%; text-align:center;}
table.stage tr td:nth-child(5) {width:10%; text-align:center;}
table.stage tr td:nth-child(6) {width:10%; text-align:center;}


#elements table.stage tr td:nth-child(1) {width:15%;}
#elements table.stage tr td:nth-child(2) {width:85%;}
#elements table.stage tr td:nth-child(3) {display:none;}
#elements table.stage tr td:nth-child(4) {display:none;}
#elements table.stage tr td:nth-child(5) {display:none;}
#elements table.stage tr td:nth-child(6) {display:none;}


#elements .kunden {border:1px solid #ccc; padding:0 15px; overflow:auto; height:25vh; box-sizing:border-box;}
#elements .produkte {border:1px solid #ccc; padding:0 15px; overflow:auto; height:45vh; box-sizing:border-box;}
#elements .texte {border:1px solid #ccc; padding:0 15px; overflow:auto; height:30vh; box-sizing:border-box;}


#elements .item .desc_short {display:block;}
#elements .item .desc_long {display:none;}
#stage .item .desc_short {display:none;}
#stage .item .desc_long {display:block;}



.ihidden {visibility:hidden; color:#777; font-size:12px;}
.item.product:hover .ihidden {
  animation: visible 1s;
  visibility: visible;
}


input[name="anzahl"] {font-size:40px; max-width:70px; font-weight:bold;}


.boxcontainer {overflow:hidden; clear:both; float:none; margin-bottom:20px;}
.boxcontainer .left-50 {float:left; width:50%; box-sizing:border-box; padding-right:15px;}
.boxcontainer .right-50 {float:right; width:50%; box-sizing:border-box; padding-left:15px;}
.boxcontainer .left-33 {float:left; width:33.33333%; box-sizing:border-box; padding-right:15px;}
.boxcontainer .right-33 {float:right; width:33.33333%; box-sizing:border-box; padding-left:15px;}
.boxcontainer .left-66 {float:left; width:66.66666%; box-sizing:border-box; padding-right:15px;}
.boxcontainer .right-66 {float:right; width:66.66666%; box-sizing:border-box; padding-left:15px;}

.text-right {text-align:right;}
.text-center {text-align:center;}



input {padding:5px 10px;}
.inputfilter {margin:20px 0 20px 0; height:22px; padding: 2px 0 2px 20px; box-sizing:border-box; background:url("../assets/ico-search.jpg") no-repeat center left #FFF; border:1px solid #CCC; }


.ck-container {position:relative; display:block;}
.ck-container .editable {position:relative; display:block;}
#stage .ck-container .editable:hover {}
.ckcont .ico-close {cursor:pointer; display:none; position:absolute; width:24px; top:6px; right:6px; border:1px solid #ccc; padding:2px 5px; background-color:#f0f0f0; border-radius:20px; text-align:center; z-index:25;}
.ckcont .ico-edit {cursor:pointer; position:absolute; width:24px; top:-5px; right:6px; border:1px solid #ccc; padding:2px 5px; background-color:#f0f0f0; border-radius:20px; text-align:center; z-index:25;}
#elements .ck-container .ico-edit {display:none;}
#stage .ck-container .ico-edit {display:none;}
#stage .ck-container:hover .ico-edit {display:block;}



#summary {margin-top:3rem;}

a.link {color:#336699; text-decoration:underline; cursor:pointer;}
a.link:hover {color:#29547E;}

.bordertop {border-top:1px solid #CCC; padding:5px 0 5px 0; border-bottom:1px solid #ccc;}
.borderbottom {border-bottom: 1px solid #ccc;}


.success {
  padding:2rem;
  margin:2rem 0 2rem 0;
  background-color:#f8fff0;
  color:#234600;
  border:1px solid #be7;
  max-width: 800px;
}

.error {
  padding:2rem;
  margin:2rem 0 2rem 0;
  background-color:#fef5f1;
  color:#8c2e0b;
  border:1px solid #ed541d;
  max-width: 800px;
}

.notice {
  padding:2rem;
  margin:2rem 0 2rem 0;
  background-color:#ECF2F9;
  color:#29547E;
  border:1px solid #336699;
}

.red {color:red; font-weight:bold;}
.orange {color:orange; font-weight:bold;}
.green {color:green; font-weight:bold;}


.mb-2 {margin-bottom:2rem;}
.mt-2 {margin-top:2rem;}


textarea {
  min-width: 50%;
  min-height: 150px;
}


.comment {border:1px dotted #336699; padding:0.5rem 1rem; margin-bottom:1rem;}
.comment .date {font-size:0.8rem; padding-left:1rem;}
.comment .comment_author {font-weight:bold;}








@media screen and (min-width:100px) and (max-width:768px) {
}