@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
html {
  font-size: 13px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  word-wrap: break-word;
}

h1, h2, h3 {
  font-family: "Sofia Sans", sans-serif;
  color: #000000;
}

body {
  background-image: linear-gradient(to bottom, #efefef 0%, #fafafa 100%);
  background-size: cover;
  background-attachment: fixed;
  color: #000000;
}

main {
  margin: auto auto;
  max-width: 600px;
  height: 100%;
}
main .spacer {
  margin: auto;
}

nav {
  width: 100%;
  height: 3rem;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  background-color: white;
  align-items: center;
  justify-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  border-style: solid;
  border-color: #e4b7a0;
  border-width: 0;
  border-bottom-width: 3px;
  box-shadow: rgba(149, 157, 165, 0.3) 0px 8px 24px;
}
nav a {
  text-decoration: none;
  color: #a45c40;
}

.maincard {
  margin: 1.5rem;
  padding: 0.1rem;
  background-color: rgb(255, 255, 255);
  border-radius: 1rem;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  position: relative;
}
.maincard .cardtitle {
  text-align: center;
  color: #a45c40;
  margin: 1rem;
}
.maincard .cardlistitem, .maincard .cardeditable {
  margin: 1rem;
  border-radius: 0.5rem;
  box-shadow: rgba(149, 157, 165, 0.5) 0px 8px 24px;
  background-color: #ffffff;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 2rem;
  cursor: pointer;
}
.maincard .cardlistitem.stickytop, .maincard .stickytop.cardeditable {
  position: sticky;
  top: 4rem;
}
.maincard .cardlistitem.stickybottom, .maincard .stickybottom.cardeditable {
  position: sticky;
  bottom: 1rem;
}
.maincard .cardlistitem .content, .maincard .cardlistitem .cardactions .action .button, .maincard .cardactions .action .cardlistitem .button, .maincard .cardeditable .content, .maincard .cardeditable .cardactions .action .button, .maincard .cardactions .action .cardeditable .button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.maincard .cardlistitem .content .downer, .maincard .cardlistitem .cardactions .action .button .downer, .maincard .cardactions .action .cardlistitem .button .downer, .maincard .cardeditable .content .downer, .maincard .cardeditable .cardactions .action .button .downer, .maincard .cardactions .action .cardeditable .button .downer {
  margin-top: 0.2rem;
  align-items: center;
  flex-wrap: wrap;
}
.maincard .cardlistitem .content .downer.ljust, .maincard .cardlistitem .cardactions .action .button .downer.ljust, .maincard .cardactions .action .cardlistitem .button .downer.ljust, .maincard .cardeditable .content .downer.ljust, .maincard .cardeditable .cardactions .action .button .downer.ljust, .maincard .cardactions .action .cardeditable .button .downer.ljust {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.maincard .cardlistitem .content .downer.rjust, .maincard .cardlistitem .cardactions .action .button .downer.rjust, .maincard .cardactions .action .cardlistitem .button .downer.rjust, .maincard .cardeditable .content .downer.rjust, .maincard .cardeditable .cardactions .action .button .downer.rjust, .maincard .cardactions .action .cardeditable .button .downer.rjust {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.maincard .cardlistitem .content .downer.cjust, .maincard .cardlistitem .cardactions .action .button .downer.cjust, .maincard .cardactions .action .cardlistitem .button .downer.cjust, .maincard .cardeditable .content .downer.cjust, .maincard .cardeditable .cardactions .action .button .downer.cjust, .maincard .cardactions .action .cardeditable .button .downer.cjust {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.maincard .cardlistitem .content .downer.servicetable, .maincard .cardlistitem .cardactions .action .button .downer.servicetable, .maincard .cardactions .action .cardlistitem .button .downer.servicetable, .maincard .cardeditable .content .downer.servicetable, .maincard .cardeditable .cardactions .action .button .downer.servicetable, .maincard .cardactions .action .cardeditable .button .downer.servicetable {
  border-style: solid;
  border: 0 solid #e4b7a0;
  border-bottom-width: 1px;
  color: #a45c40;
}
.maincard .cardlistitem .content .downer.servicetable .tabtitle, .maincard .cardlistitem .cardactions .action .button .downer.servicetable .tabtitle, .maincard .cardactions .action .cardlistitem .button .downer.servicetable .tabtitle, .maincard .cardeditable .content .downer.servicetable .tabtitle, .maincard .cardeditable .cardactions .action .button .downer.servicetable .tabtitle, .maincard .cardactions .action .cardeditable .button .downer.servicetable .tabtitle {
  width: 100%;
  color: black;
}
.maincard .cardlistitem .content .downer.bold, .maincard .cardlistitem .cardactions .action .button .downer.bold, .maincard .cardactions .action .cardlistitem .button .downer.bold, .maincard .cardeditable .content .downer.bold, .maincard .cardeditable .cardactions .action .button .downer.bold, .maincard .cardactions .action .cardeditable .button .downer.bold {
  font-weight: bold;
}
.maincard .cardlistitem .content .downer .tableaction, .maincard .cardlistitem .cardactions .action .button .downer .tableaction, .maincard .cardactions .action .cardlistitem .button .downer .tableaction, .maincard .cardeditable .content .downer .tableaction, .maincard .cardeditable .cardactions .action .button .downer .tableaction, .maincard .cardactions .action .cardeditable .button .downer .tableaction {
  display: flex;
  flex-direction: row;
  cursor: pointer;
}
.maincard .cardlistitem .content .points, .maincard .cardlistitem .cardactions .action .button .points, .maincard .cardactions .action .cardlistitem .button .points, .maincard .cardeditable .content .points, .maincard .cardeditable .cardactions .action .button .points, .maincard .cardactions .action .cardeditable .button .points {
  margin-top: 0.2rem;
  border-radius: 0.4rem;
  padding: 0.4rem;
  display: grid;
  grid-template-columns: 1fr 6rem 5rem;
}
.maincard .cardlistitem .content .points.offerdraft, .maincard .cardlistitem .cardactions .action .button .points.offerdraft, .maincard .cardactions .action .cardlistitem .button .points.offerdraft, .maincard .cardeditable .content .points.offerdraft, .maincard .cardeditable .cardactions .action .button .points.offerdraft, .maincard .cardactions .action .cardeditable .button .points.offerdraft {
  background-color: #A3CEF1;
  color: white;
}
.maincard .cardlistitem .content .points.offer, .maincard .cardlistitem .cardactions .action .button .points.offer, .maincard .cardactions .action .cardlistitem .button .points.offer, .maincard .cardeditable .content .points.offer, .maincard .cardeditable .cardactions .action .button .points.offer, .maincard .cardactions .action .cardeditable .button .points.offer {
  background-color: #3A6EA5;
  color: white;
}
.maincard .cardlistitem .content .points.workplan, .maincard .cardlistitem .cardactions .action .button .points.workplan, .maincard .cardactions .action .cardlistitem .button .points.workplan, .maincard .cardeditable .content .points.workplan, .maincard .cardeditable .cardactions .action .button .points.workplan, .maincard .cardactions .action .cardeditable .button .points.workplan {
  background-color: #FFBE86;
  color: white;
}
.maincard .cardlistitem .content .points.workreport, .maincard .cardlistitem .cardactions .action .button .points.workreport, .maincard .cardactions .action .cardlistitem .button .points.workreport, .maincard .cardeditable .content .points.workreport, .maincard .cardeditable .cardactions .action .button .points.workreport, .maincard .cardactions .action .cardeditable .button .points.workreport {
  background-color: #72B26C;
  color: white;
}
.maincard .cardlistitem .content .unit, .maincard .cardlistitem .cardactions .action .button .unit, .maincard .cardactions .action .cardlistitem .button .unit, .maincard .cardeditable .content .unit, .maincard .cardeditable .cardactions .action .button .unit, .maincard .cardactions .action .cardeditable .button .unit {
  color: #a45c40;
}
.maincard .cardlistitem .content .action, .maincard .cardlistitem .cardactions .action .button .action, .maincard .cardactions .action .cardlistitem .button .action, .maincard .cardeditable .content .action, .maincard .cardeditable .cardactions .action .button .action, .maincard .cardactions .action .cardeditable .button .action {
  color: #a45c40;
}
.maincard .cardlistitem .content .price, .maincard .cardlistitem .cardactions .action .button .price, .maincard .cardactions .action .cardlistitem .button .price, .maincard .cardeditable .content .price, .maincard .cardeditable .cardactions .action .button .price, .maincard .cardactions .action .cardeditable .button .price {
  color: #a45c40;
  font-size: x-large;
}
.maincard .cardlistitem .content .itemtitle, .maincard .cardlistitem .cardactions .action .button .itemtitle, .maincard .cardactions .action .cardlistitem .button .itemtitle, .maincard .cardeditable .content .itemtitle, .maincard .cardeditable .cardactions .action .button .itemtitle, .maincard .cardactions .action .cardeditable .button .itemtitle {
  margin-bottom: 0.5rem;
  font-weight: bold;
  display: flex;
  flex-direction: row;
}
.maincard .cardlistitem .content.animated, .maincard .cardlistitem .cardactions .action .animated.button, .maincard .cardactions .action .cardlistitem .animated.button, .maincard .cardeditable .content.animated, .maincard .cardeditable .cardactions .action .animated.button, .maincard .cardactions .action .cardeditable .animated.button {
  overflow: hidden;
  max-height: 7rem;
  transition: max-height 0.5s;
}
.maincard .cardlistitem .content.animatedbillentry, .maincard .cardlistitem .cardactions .action .animatedbillentry.button, .maincard .cardactions .action .cardlistitem .animatedbillentry.button, .maincard .cardeditable .content.animatedbillentry, .maincard .cardeditable .cardactions .action .animatedbillentry.button, .maincard .cardactions .action .cardeditable .animatedbillentry.button {
  overflow: hidden;
  max-height: 12rem;
  transition: max-height 0.5s;
}
.maincard .cardlistitem .content.collapsed, .maincard .cardlistitem .cardactions .action .collapsed.button, .maincard .cardactions .action .cardlistitem .collapsed.button, .maincard .cardeditable .content.collapsed, .maincard .cardeditable .cardactions .action .collapsed.button, .maincard .cardactions .action .cardeditable .collapsed.button {
  max-height: 0px;
}
.maincard .cardlistitem .arrowlink, .maincard .cardeditable .arrowlink {
  font-size: large;
  color: #a45c40;
  text-decoration: none;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
}
.maincard .cardlistitem .card_checkbox, .maincard .cardeditable .card_checkbox {
  margin: 0.5rem;
}
.maincard .cardlistitem.filled, .maincard .filled.cardeditable {
  border: 2px solid #c38370;
}
.maincard .cardeditable {
  grid-template-columns: 1fr;
  cursor: default;
}
.maincard .cardactions {
  margin: 1rem;
  border-radius: 0.5rem;
  box-shadow: rgba(149, 157, 165, 0.5) 0px 8px 24px;
  background-color: #ffffff;
  background-color: #e4b7a0;
  font-size: 0.8rem;
  padding: 0 0.25rem;
  display: grid;
  grid-template-columns: 1fr;
}
.maincard .cardactions.stickytop {
  position: sticky;
  top: 4rem;
}
.maincard .cardactions.stickybottom {
  position: sticky;
  bottom: 1rem;
}
.maincard .cardactions.buttons2 {
  display: grid;
  grid-template-columns: 50% 50%;
}
.maincard .cardactions .action {
  padding: 1rem;
  background-color: white;
  margin: 0.5rem 0.25rem;
  border-radius: 0.5rem;
  box-shadow: rgba(149, 157, 165, 0.5) 0px 8px 24px;
  cursor: pointer;
}
.maincard .cardactions .action.rjustaction {
  text-align: right;
}
.maincard .cardactions .action .button {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.maincard .cardactions .action .label {
  font-size: 1rem;
  color: #a45c40;
}

.spacebtw {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.goodbutton, .dangerbutton {
  border-style: solid;
  border-width: 3px;
  border-radius: 0.25rem;
  margin: 0.5rem;
  padding: 0.2rem;
  border-color: #e4b7a0;
  background-color: #ffffff;
  cursor: pointer;
}

.dangerbutton {
  border-color: #a45c40;
}

.flashmessages {
  margin: 1rem 0;
}
.flashmessages .message {
  margin: 1rem;
  border-radius: 0.5rem;
  box-shadow: rgba(149, 157, 165, 0.5) 0px 8px 24px;
  background-color: #ffffff;
  padding: 1rem;
}
.flashmessages .message.stickytop {
  position: sticky;
  top: 4rem;
}
.flashmessages .message.stickybottom {
  position: sticky;
  bottom: 1rem;
}
.flashmessages .message.success {
  background-color: #72B26C;
  color: white;
}
.flashmessages .message.error {
  background-color: #BA4F58;
  color: white;
}
.flashmessages .message.warning {
  background-color: #F7B05B;
  color: white;
}

input, textarea, select {
  padding: 0.5rem;
  width: 100%;
  font-size: inherit;
  border-style: solid;
  border-radius: 0.25rem;
  border-color: #e4b7a0;
  background-color: unset;
  border-width: 2px;
  outline: none;
}
input:focus-within, textarea:focus-within, select:focus-within {
  border-color: #a45c40;
}
input.billentry, textarea.billentry, select.billentry {
  width: auto;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0.25rem;
}

input[type=number] {
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
}

input[type=checkbox] {
  width: unset;
}

.actionicon {
  cursor: pointer;
}
.actionicon.itemicon {
  width: 1.2rem;
  height: 1.2rem;
}
.actionicon.navicon {
  width: 1.5rem;
  height: 1.5rem;
}
.actionicon.pageicon {
  width: 2rem;
  height: 2rem;
}
.actionicon.panelicon {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 1rem;
}
.actionicon.floatr {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.actionicon.rotatedup {
  rotate: -90deg;
}
.actionicon.rotateddown {
  rotate: 90deg;
}
.actionicon.animated {
  transition: rotate 0.5s;
}

.textalign-l {
  text-align: left;
}

.textalign-r {
  text-align: right;
}

.textalign-c {
  text-align: center;
}/*# sourceMappingURL=style.css.map */