/*
* --- MKVT.net --- MAIN StYLESHEET ---
*/

@font-face {
  font-family: 'pixelmix';
  src: url('../../Asset/Font/pixelmix.ttf');
}

@font-face {
  font-family: 'minecraft';
  src: url('../../Asset/Font/Minecraft.ttf');
}

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: pixelmix;
  letter-spacing: 2px;
}

/*
***************************************** BODY 
*/
body {
  position: relative;
  background-image: url("../Img/IndexSlider/20230109_111411.jpg");
  background-size: contain;
}

main {
  min-width: 360px;
  background-image: radial-gradient( rgb(60, 60, 60), rgba(0, 0, 0, 0.8));
}

h3, p {
  font-family: pixelmix;
  margin: 10px 0px 10px 0px;
}
h3 {
  margin: 15px 0px 5px 0px;
  color: lightgray;
}

/*
**************************************** CUSTOMER ID INPUT GROUP
 */
#customer_id_input_group {
  display: none;
}

/*
***************************************** MAIN
*/
main {
  min-height: 600px;
  padding-bottom: 50px;
}

/*
***************************************** HEADING 
*/
.heading {
  height: auto;
  width: 100%;
  margin-bottom: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  color: #e5e5e5;
  font-size: 44px;
  font-family: pixelmix;
  font-weight: bolder;
  text-shadow: 0px  4px #000000;
  background-color: rgba(0, 0, 0, 1);
}

/*
***************************************** LOGO
*/
.logo-wrapper {
  width: 100%;
  height: 120px;
  padding-left: 20px;
  padding-top: 20px;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container {
  height: 100%;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* background-image: url("../Img/Website/mkvt_logo.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat; */
  text-shadow: 0px 5px 0px #2f0065;
  font-size: 68px;
  font-weight: bolder;
  animation: slide 2s linear;
  padding: 20px 0px;
}

.logo-container>a {
  font-family: minecraft;
  -webkit-text-stroke: 1px #6300d3e2;
  color: #32006ca0;
  text-decoration: none;
   transition: 0.3s;
}
.logo-container>a:active {
  color: rgba(87, 0, 185, 0);
  text-decoration: none;
}

/*
***************************************** INDEX SLIDER
*/
.index-slider-container {
  position: relative;
  height: 300px;
  width: 95%;
  max-width: 360px;
  margin: 50px auto 30px auto;
  overflow: hidden;
}

.index-slider-content {
  position: absolute;
  width: auto;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row nowrap;
}

.index-slider-content-box {
  position: relative;
  display: none;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  animation: slide 1s linear;
  overflow: hidden;
  padding-top: 20px;
}

.index-slider-title {
  width: 100%;
  height: 40%;
  font-weight: bolder;
  font-family: pixelmix;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.711);
  text-shadow: 4px 4px 5px rgb(0, 0, 0);
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 150px 150px rgba(0, 0, 0, 0.93);
  z-index: 91;
}

.index-slider-paragraph {
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 2px;
  font-family: pixelmix;
  color: rgb(225, 225, 225);
  text-shadow: 4px 4px 3px black;
  padding: 20px;
  z-index: 91;
}

.index-slider-content-box>img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 120%;
  z-index: 90;
}

/*
***************************************** BORDERS
*/
.trips-indicator-container,
.user-order-date-calendar,
.pill-nav-wrapper>a,
.office-link-group>a,
.delete-manual-favourite-element,
.employee-time-overview-wrapper,
.manual-favourite-element,
.manual-table-add-container,
.employee-calendar-day-info-wrapper,
.employee-calendar-delete-button-wrapper,
.day-info-close-button-wrapper,
.employee-order-item-overview-wrapper,
.nav-menu-container,
.calendar-day-info-wrapper,
.invoice-info-invoice-preview,
.coockie-information-button,
.statistics-container,
.statistics-header-prev-button,
.statistics-header-next-button,
.diagram-container,
.diagram-header-prev-button,
.diagram-header-next-button,
.calendar-container,
.calendar-header-prev-button,
.calendar-header-next-button,
.index-slider-container,
.text-content-container,
.user-order-confirmation-wrapper,
.user-order-item-input-select-button,
.user-order-item-input-edit-button,
.user-order-item-input-delete-button,
.user-item-checkbox-container,
.plus-item-button,  
.minus-item-button,  
.add-item-button,  
.user-upcoming-orders-container,
.user-orders-container,
.user-active-invoice-container,
/* .nav-login-container>a, */
/* .nav-logout-container>a, */
/* .nav-link-group>a, */
.table-edit-container>a,
.pdf-input,
.image-input,
textarea,
.input,
.submit,
.link-container>a,
.delete-link-container>a,
.pw-link-container>a,
.page-link-container>a,
.page-link-container>div,
.big-link-container>a,
.user-link-container>a,
.index-link-container>a {
  border-left: 4px outset #4c00a2;
  border-right: 4px outset #4c00a2;
  border-top: 4px outset #4c00a2;
  border-bottom: 4px outset #4c00a2;
  border-radius: 10px;
  background-color: #000000;
  box-shadow: 0px 5px 15px  rgba(0, 0, 0, 0.6);
  color: darkgray;
  transition: 0.1s;
}

.text-content-container {
  margin: 0px auto;
  padding: 20px;
  width: 95%;
  max-width: 600px;
}

.user-item-checkbox {
  border-bottom:  outset #4c00a2;
}

.trips-indicator-container:active,
.pill-nav-wrapper>a:active,
.office-link-group>a:active,
.delete-manual-favourite-element:active,
.manual-favourite-element:active,
.coockie-information-button:active,
.statistics-header-prev-button:active,
.statistics-header-next-button:active,
.diagram-header-prev-button:active,
.diagram-header-next-button:active,
.calendar-header-prev-button:active,
.calendar-header-next-button:active,
.user-order-item-input-select-button:active,
.user-order-item-input-edit-button:active,
.user-order-item-input-delete-button:active,
.user-item-delete-button:active,
.plus-item-button:active,
.minus-item-button:active,
.add-item-button:active,
/* .nav-login-container>a:active, */
/* .nav-logout-container>a:active, */
/* .nav-link-group>a:active, */
.table-edit-container>a:active,
.pdf-input:active,
.image-input:active,
.submit:active,
.delete-link-container>a:active,
.link-container>a:active,
.pw-link-container>a:active,
.big-link-container>a:active,
.page-link-container>a:active,
.page-link-container>div:active,
.user-link-container>a:active,
.index-link-container>a:active {
  border-left: 3px outset #4c00a2;
  border-right: 3px outset #4c00a2;
  border-top: 3px outset #4c00a2;
  border-bottom: 4px outset #4c00a2;
  box-shadow: 0px 3px 15px  rgba(0, 0, 0, 0.6);
  color: #ffffff;
}

.page-link-container>div:active {
  color: #ffffff;
}


/**
*
* USER ODRDER CONFIRMATION WRAPPER
*
*/
.user-order-confirmation-wrapper {
  height: auto;
  width: 95%;
  max-width: 520px;
  margin: 0px auto;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
  font-size: 14px;
  font-size: 10px;
  font-family: pixelmix;
  letter-spacing: 1px;
  font-weight: bolder;
  padding: 5px;
  overflow-x: scroll;
}
.user-order-confirmation-container {
  height: 100%;
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row nowrap;
}

  .user-order-confirmation-table-row,
  .user-order-confirmation-column-1 {
    height: auto;
    width: auto;
    margin-bottom: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: row nowrap;
    font-size: 14px;
    color: #ffffff;
    font-size: 10px;
    font-family: pixelmix;
    letter-spacing: 2px;
    font-weight: bolder;
  }

  .user-order-confirmation-row {
    color: lightgray;
  }

  .user-order-confirmation-table-cell-1,
  .user-order-confirmation-table-titel-1 {
    width: 25px;
  }
  .user-order-confirmation-table-cell-2,
  .user-order-confirmation-table-titel-2 {
    width: 100px;
  }

  .user-order-confirmation-table-cell-3,
  .user-order-confirmation-table-titel-3 {
    min-width: 220px;
  }

  .user-order-confirmation-table-cell-4,
  .user-order-confirmation-table-titel-4 {
    width: auto;
    min-width: 120px;
  }

.table-delete-container>a {
  border-left:  outset #4c00a2;
  border-right:  outset #4c00a2;
  border-top:  outset #4c00a2;
  border-bottom:  outset #4c00a2;
  border-radius: 3px;
  background: transparent;
  color: darkgray;
  font-size: 10px;
  text-align: center;
  text-decoration: none;
}
.table-delete-container>a:active {
  border-left: 3px outset #4c00a2;
  border-right: 3px outset #4c00a2;
  border-top: 3px outset #4c00a2;
  border-bottom: 4px outset #4c00a2;
  border-radius: 3px;
  color: white;
}

.select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #4c00a2;
}

.form {
  padding-top: 100px;
}

#bank_statement_register_form {
  height: 200px;
  overflow: hidden;
}

.form-container,
.table-container {
  height: auto;
  border-radius: 6px;
  height: auto;
  max-width: 520px;
}

.table-container {
overflow-y: scroll;
max-height: 410px;
}

/*
***************************************** INDEX TITLE
*/
.message-title,
.member-title,
.index-title {
  width: 90%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  padding: 10px 0px 0px 0px;
  text-shadow: 0px  4px rgb(0, 0, 0);
}

.message-title {
  padding: 50px 0px 0px 0px;
  text-shadow: 0px  4px rgb(0, 0, 0);
}

.index-title {
  text-align: center;
}

/*
***************************************** INDEX PARAGRAPH
*/
.index-paragraph {
  width: 90%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  color: #d3d3d3;
  font-size: 24px;
  font-family: pixelmix;
  font-weight: bolder;
  margin-bottom: 50px;
  text-shadow: 0px 0px 4px rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
}

/**
***************************************** PROFILE IMG
*/

.profile-img-container,
.receipt-img-container {
  width: 100%;
  height: auto;
  border: 4px outset #4c00a2;
  border-radius: 10px;
  box-shadow: 0px 0px   #4c00a2;
  padding: 4px;
  font-size: 6px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-img-container>img {
  height: auto;
  width: 100%;
}

.receipt-img-container {
  background: #FFFFFF;
}

/*
***************************************** CARD
*/
.member-table-container,
.detail-card-container,
.adress-card-container {
  border:  outset #4c00a2;
  border-radius: 3px;
  height: auto;
  width: 100%;
  margin-bottom: 30px;
  padding: 10px;
}

.invoice-detail-input-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.invoice-detail-card-label {
  outline: none;
  height: auto;
  width: 40%;
  color: #d3d3d3;
  font-size: 14px;
  margin-top: 5px;
  font-family: pixelmix;
  font-weight: bolder;
  background-color: transparent;
  border: none;
  cursor: default;
}

.invoice-detail-card-input{
  outline: none;
  height: auto;
  width: 60%;
  color: #d3d3d3;
  font-size: 14px;
  margin-top: 5px;
  font-family: pixelmix;
  font-weight: bolder;
  background-color: transparent;
  border: none;
  cursor: default;
}

/**
 ***************************************** USER ORDER SLIDER CONTAINER
 */
.user-inactive-orders-title,
.user-orders-title,
.user-invoice-title {
  width: 90%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  color: #d3d3d3;
  font-size: 18px;
  font-family: pixelmix;
  font-weight: bolder;
  margin-top: 50px;
  margin-bottom: 10px;
  padding: 0px 20px;
  text-shadow: 0px  4px rgb(0, 0, 0);
}

.user-upcoming-orders-container,
.user-orders-container,
.user-active-invoice-container {
  height: auto;
  width: 90%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  padding: 10px 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row nowrap;
  overflow-x: scroll;
}

 /**
  ***************************************** SLIDER ACTIVE ORDERS/INVOICE CARD
  */
.slider-card {
  position: relative;
  background: rgba(0, 0, 25, 1);
  min-width: 300px;
  height: 140px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
  margin: 0px 3px;
  padding: 10px;
  text-decoration: none;
  color: #d3d3d3;
  border:  outset black;
  border-radius: 3px;
}  

.slider-card:active {
  color: white;
}  

.slider-invoice-indicator {
  height: 20px;
  width: 20px;
  border-radius: 3px;
  background-color: transparent;
  font-family: pixelmix;
  font-weight: bold;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slider-invoice-indicator-inactive {
  height: 20px;
  width: 20px;
  border-radius: 3px;
  border: 4px outset darkgray;
  font-family: pixelmix;
  font-weight: bold;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slider-invoice-indicator-active {
  height: 20px;
  width: 20px;
  border-radius: 3px;
  padding-bottom: 2px;
  color: lightgray;
  background: #7b00ff72;
  padding-left: 5px;
  font-family: pixelmix;
  font-weight: bold;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slider-invoice-pdf-indicator {
  height: 20px;
  width: 20px;
  margin-left: 5px;
  padding-left: 3px;
  padding-bottom: 2px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #7b00ff72;
}

.slider-invoice-indicator-processed {
  height: 20px;
  width: 20px;
  border-radius: 3px;
  color: #ffffff;
  background: #7b00ff72;
  border: 4px outset #4c00a2;
  font-family: pixelmix;
  font-weight: bold;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slider-status-container {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row no wrap;
}

.slider-inactive-container {
  width: 100px;
  height: 100%;
  border-radius: 3px;
  margin: 0px 5px;
  padding: 0px 5px;
  color: darkgray;
  font-size: 8px;
  font-family: pixelmix;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-active-container {
  width: 100px;
  height: 100%;
  background: #7b00ff72;
  border-radius: 3px;
  margin: 0px 5px;
  padding: 0px 5px;
  color: lightgray;
  font-weight: bolder;
  font-size: 8px;
  font-family: pixelmix;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-processed-container {
  width: 100px;
  height: 100%;
  background: #7b00ff72;
  border: 4px outset #4c00a2;
  border-radius: 3px;
  margin: 0px 5px;
  padding: 0px 5px;
  color: white;
  font-weight: bolder;
  font-size: 8px;
  font-family: pixelmix;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-items-container {
  position: absolute;
  right: 0px;
  width: 100px;
  height: 20px;
  border-radius: 3px;
  margin: 0px 5px;
  padding: 0px 5px;
  color: #ffffff;
  font-size: 10px;
  font-family: pixelmix;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-company-container,
.slider-customer-id-container,
.slider-project-container,
.slider-date-container {
  height: auto;
  width: 100%;
  padding: 4px 5px;
  margin:  0px;
  font-size: 10px;
  font-family: pixelmix;
  font-weight: bolder;
  border: none;
}

.slider-date-container {
  height: 20px;
  font-size: 10px;
  margin: 0px 0px 10px 0px;
}

.slider-company-container {
  font-size: 10px;
}

.slider-project-container {
  height: 40px;
  font-size: 10px;
  padding: 5px 5px;
  font-weight: bolder;
  text-decoration: underline;
}

/*
***************************************** ADD ITEM BUTTON
*/
.add-item-button-container {
  height: 40px;
  width: 100%;
  margin-bottom: 30px;
  padding-right: 0px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.minus-item-button,
.plus-item-button,
.add-item-button {
  height: 100%;
  width: 25%;
  margin-left: 3px;
  margin-right: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: bolder;
  font-family: pixelmix;
  text-align: center;
  cursor: pointer;
  color: #d3d3d3;
}

.add-item-button {
  width: 40%;
}

.minus-item-button,
.plus-item-button {
  font-size: 14px;
}

.count-item-button {
  height: 100%;
  width: 80px;
  margin-left: 3px;
  margin-right: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: bolder;
  font-family: pixelmix;
  text-align: center;
  color: #ffffff;
}

.plus-item-button:active,
.minus-item-button:active,
.add-item-button:active {
    outline: none;
    margin-top: 4px;
    height: 37px;
    color: #ffffff;
    font-family: pixelmix;
    font-weight: bolder;
    background-color: rgba(0, 0, 0, 0.9);
  }

/*
***************************************** CARD INPUT
*/
.card-input {
  outline: none;
  height: auto;
  width: 100%;
  color: #d3d3d3;
  font-size: 14px;
  margin-top: 5px;
  font-family: pixelmix;
  font-weight: bolder;
  background-color: transparent;
  border: none;
  cursor: default;
}

#street_card_input {
  width: 100%;

}
#housenumber_card_input {
  width: auto;
}

/*
************************************** ORDER EDIT FORM
*/
.order-detail-wrapper,
.order-info-item-wrapper,
.invoice-info-wrapper,
.order-information-wrapper,
.order-item-wrapper {
  position: relative;
  height: 50px;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  padding-bottom: 40px;
  margin-bottom: 30px;
}

.order-detail-wrapper-button-container,
.order-info-item-wrapper-button-container,
.invoice-info-wrapper-button-container {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  color: #a9a9a9;
}

.order-detail-wrapper-button-container {
  margin-bottom: 30px;
}

.order-detail-wrapper-button,
.order-info-item-wrapper-button,
.invoice-info-wrapper-button,
.order-information-wrapper-button,
.order-item-wrapper-button {
  height: 15px;
  width: 15px;
  font-family: pixelmix;
  font-weight: bolder;
  border-top: 4px outset #a9a9a9;
  border-left: 4px outset #a9a9a9;
  border-radius: 4px;
  transform: rotate(225deg);
  transition: 0.2s;
}

.invoice-info-wrapper-button-container:active,
.order-info-item-wrapper-hide-button-container:active,
.order-detail-wrapper-hide-button-container:active,
.order-detail-wrapper-button-container:active,
.order-info-item-wrapper-button-container:active,
.invoice-info-item-wrapper-button-container:active {
  color: #ffffff;
}

#order_detail_wrapper_show_button,
#order_info_item_wrapper_show_button,
#invoice_info_wrapper_show_button,
#order_information_wrapper_show_button,
#order_item_wrapper_show_button {
  position: absolute;
  top: 20px;
  left: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
}

.invoice-info-wrapper-button-text,
.order-detail-wrapper-button-text,
.order-info-item-wrapper-button-text,
.invoice-info-wrapper-button-text {
  position: absolute;
  top: 20px;
  left: 37px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
}

/*
*************************************** HIDE BOTTONS
*/
.invoice-info-wrapper-hide-button-container,
.order-info-item-wrapper-hide-button-container,
.order-detail-wrapper-hide-button-container {
  position: absolute;
  height: 50px;
  width: 100%;
  bottom: 0px;
  color: #a9a9a9;
  display: none;
}

#order_detail_wrapper_hide_button,
#order_info_item_wrapper_hide_button,
#invoice_info_wrapper_hide_button,
#order_information_wrapper_hide_button,
#order_item_wrapper_hide_button {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  transform: rotate(45deg);
}

#invoice_info_wrapper_hide_button_text,
#order_info_item_wrapper_hide_button_text {
  position: absolute;
  bottom: 10px;
  left: 37px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
}

/*
*************************************** TABLE
*/
.table-title {
  width: 90%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  padding: 0px 0px;
  margin-top: 120px;
  text-shadow: 0px  4px rgb(0, 0, 0);
}

.table-nav-title {
  width: 90%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  text-shadow: 0px 0px 4px rgb(0, 0, 0);
}

.table-container {
  width: 90%;
  max-width: 520px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  color: #d3d3d3;
  font-size: 14px;
  padding: 0px;
  font-family: pixelmix;
  overflow-x: scroll;
  margin-bottom: 50px;
}

.manual-table-container {
  width: 90%;
  max-width: 520px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  color: #d3d3d3;
  font-size: 14px;
  padding: 0px;
  font-family: pixelmix;
  overflow-x: scroll;
  margin-bottom: 50px;
}

.pdf-icon-wrapper {
  width: 50px;
  height: auto;
}

.pdf-icon-wrapper>a {
  color: #d3d3d3;
  text-decoration: none;
}

.pdf-icon-wrapper>a:active {
  color: white;
  transition: 0.1s;
}

.member-table-container {
  width: 100%;
  max-width: 520px;
  height: auto;
  color: #d3d3d3;
  font-size: 14px;
  font-family: pixelmix;
  overflow-x: scroll;
  background-color: rgba(0, 0, 0, 0.0);
  border: none;
}

table {
  height: auto;
  width: 100%;
  border-spacing: 2px;
}

tbody {
  border-top:  outset #4c00a2;
}

th {
  height: auto;
  width: auto;
  text-align: left;
  padding: 10px;
  background-color: #00000034;
  text-shadow: 0px  3px rgb(0, 0, 0);
}

.table-row-even {
  background-color: rgba(24, 24, 24, 0.123);
}

tr {
  height: auto;
}

td {
  position: relative;
  height: inherit;
  text-align: left;
  width: auto;
  padding: 10px;
  overflow: hidden;
  font-size: 10px;
  text-shadow: 0px  2px rgb(0, 0, 0);
}

.table-image-container {
  height: 50px;
  width: 50px;
  border: 4px outset #4c00a2;
  box-shadow: 0px 0px 4px  #4c00a2;
  border-radius: 26px;
  padding: 5px;
  font-size: 6px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 25, 0.501);
}

.table-image {
  height: 100%;
  border-radius: 26px;
}

.table-delete-container,
.table-edit-container {
  position: relative;
  height: 50px;
  width: 50px;
}

.table-delete-container>a,
.table-edit-container>a {
  position: absolute;
  bottom: 0px;
  height: 50px;
  width: 100%;
  color: #d3d3d3;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  margin: 0px;
  font-family: pixelmix;
  font-weight: bolder;
  cursor: pointer;
  resize: none;
  text-decoration: none;
}

.table-delete-container>a:active,
.table-edit-container>a:active {
  outline: none;
  margin-top: 4px;
  height: 46px;
  width: 100%;
  color: #ffffff;
  font-family: pixelmix;
  font-weight: bolder;
}

.table-delete-container>a {
  position: absolute;
  bottom: 10px;
  height: 30px;
  width: 100%;
}

.table-delete-container>a:active {
  height: 26px;
  width: 100%;
}

.manuals-table-row {
  border-bottom:  outset rgb(255, 255, 255);
}

.pdf-icon-container {
  width: 26px;
  height: 34px;
  border-radius: 4px;
  font-size: 6px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 4px 4px 4px;
  background: rgb(200, 0, 0);
  box-shadow: 0px 0px   red;
  opacity: 0.9;
  margin: 3px 0px;
}

.pdf-icon-container>img {
  height: 100%;
  width: auto;
}
.pdf-icon-container:active {
  transition: 0.1s;
  background: rgb(255, 5, 5);
  box-shadow: 0px 0px 4px 0px rgb(255, 13, 13);
}

/**
***************************************** INVOICE SUM CONTAINER
*/
.invoice-total-card {
  width: 100%;
  border-bottom:  outset #d3d3d3;
  margin-bottom: 50px;
  padding-bottom: 10px;
}
.invoice-total-container {
  width: 100%;
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  background: transparent;
}

.invoice-total-container>label {
  outline: none;
  border: none;
  background: transparent;
  width: 60px;
  padding: 3px 0px;
  font-size: 14px;
}

.invoice-total-container>input {
  outline: none;
  border: none;
  background: transparent;
  width: 100px;
  padding: 3px 0px;
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
  text-align: right;
}
/**
***************************************** FORM CONTAINER
*/
.form-container {
  margin: 0px auto;
  width: 90%;
  max-width: 400px;
  padding: 20px;
}

.form-title {
  max-width: 520px;
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  padding: 10px 0px;;
  text-shadow: 0px  4px rgb(0, 0, 0);
  margin-top: 0px;
}

.form-group {
  width: 100%;
  height: auto;
}

/*
***************************************** LABEL
*/
label {
  width: 100%;
  height: auto;
  color: #d3d3d3;
  font-size: 10px;
  font-family: pixelmix;
  font-weight: bolder;
  text-shadow: 0px  3px rgb(0, 0, 0);
}

.invoice-label {
  width: 100%;
  height: auto;
  color: #d3d3d3;
  font-size: 14px;
  font-family: pixelmix;
  font-weight: bolder;
  text-shadow: 0px 0px 4px rgb(0, 0, 0);
}

/*
***************************************** IMAGE INPUT
*/
.pdf-input-container,
.image-input-container {
  position: relative;
  height: 40px;
  width: 100%;
  cursor: pointer;
  margin-top: 5px;
}

.pdf-input,
.image-input {
  position: absolute;
  bottom: 0px;
  outline: none;
  height: 40px;
  width: 100%;
  color: #d3d3d3;
  padding: 10px 10px;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.9);
}

.pdf-input::-webkit-file-upload-button,
.pdf-input::file-selector-button,
.image-input::-webkit-file-upload-button,
.image-input::file-selector-button {
  display: none;
  cursor: pointer;
}

.pdf-input::before,
.image-input::before {
  display: inline-block;
  border-radius: 3px;
  box-shadow: 0px 0px  0px #4c00a2;
  padding: 10px;
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
}

.pdf-input:active,
.image-input:active {
  outline: none;
  margin-top: 4px;
  height: 36px;
  width: 100%;
  color: #ffffff;
  margin: 0px;
  font-family: pixelmix;
  font-weight: bolder;
  cursor: pointer;
}

/*
***************************************** TEXTAREA
*/
.textarea {
  outline: none;
  resize: none;
  height: 80px;
  width: 100%;
  color: #d3d3d3;
  font-size: 14px;
  padding: 5px;
  margin-top: 5px;
  font-family: pixelmix;
  font-weight: bolder;
  background-color: rgba(0, 0, 0, 0.9);
}

::-webkit-resizer {
  display: none;
}

#message_textarea {
  height: 240px;
}
/*
***************************************** SELECT
*/
.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  height: 50px;
  width: 100%;
  color: #d3d3d3;
  margin-top: 5px;
  padding-left: 0px;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.9);
}

option {
  color: lightgray;
  font-size: 14px;
  padding: 0px 5px;
}

/*
***************************************** INPUT GROUP
*/
.input-group {
  position: relative;
}

/*
***************************************** USER ORDER ITEM INPUT
*/

.user-order-item-wrapper {
  position: relative;
  display: none;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column wrap;
  margin: 0px auto;
  width: 100%;
  height: auto;
  padding-top: 70px;
  margin-bottom: 30px;
}

.user-order-item-content-container {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 10px;
  margin: 0px auto;
  width: calc(100% - 10px);
  height: auto;
  max-height: 300px;
  overflow-x: scroll;
}
.user-order-item-input-container {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5px;
  overflow: visible;
}

.user-order-item-location-input,
.user-order-item-name-input,
.user-order-item-date-input {
  outline: none;
  width: auto;
  height: inherit;
  padding: 5px;
  background-color: transparent;
  border: none;
  color: #d3d3d3;
  font-weight: bold;
  font-size: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-shadow: 0px  4px rgb(0, 0, 0);
}

.user-order-item-date-input {
  width: 120px;
  padding-left: 14px;
}
.user-order-item-name-input {
  width: auto;
  max-width: 240px;
}
.user-order-item-location-input {
  width: auto;
  max-width: 350px;
}

/*
***************************************** USER ORDER REGISTER ITEM BUTTONS
*/
.user-order-item-input-select-button,
.user-order-item-input-edit-button,
.user-order-item-input-delete-button {
  position: absolute;
  top: 0px;
  width: 120px;
  height: 40px;
  margin-top: 5px;
  cursor: pointer;
  color: #d3d3d3;
  font-weight: bold;
  font-size: 10px;
  font-family: pixelmix;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user-order-item-input-select-button {
  left: 10px;
}
.user-order-item-input-edit-button {
  left: 18;
}
.user-order-item-input-delete-button {
  right: 10px;
}
.user-order-item-input-select-button:active,
.user-order-item-input-edit-button:active,
.user-order-item-input-delete-button:active {
  margin-top: 9px;
  min-width: 80px;
  height: 36px;
  cursor: pointer;
  color: white;
}

/*
***************************************** INPUT
*/
.input {
  outline: none;
  height: 40px;
  width: 100%;
  color: #d3d3d3;
  font-size: 14px;
  padding: 5px 5px 5px 15px;
  margin-top: 5px;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.9);
}

#invoice_id_input,
#member_project_input,
#member_customer_id_input,
#member_date_from_input,
#member_date_to_input,
#member_tax_input,
#member_total_input {
  border-color: #4c00a2;
  cursor: default;
  box-shadow: none;
}

/*
**************************************** HALF SIZE 
*/
#tax_input_group,
#total_edit_input_group,
#status_input_group,
#payment_input_group,
#firstname_1_input_group,
#lastname_1_input_group, 
#date_from_input_group,
#date_to_input_group,
#amount_input_group,
#price_input_group  {
  width: 49%;
}

#date_input_group  {
  width: 29%;
}

#item_id_input_group  {
  width: 69%;
}

#street_input_group  {
  width: 69%;
}
#housenumber_input_group {
  width: 29%;
}
#areacode_input_group  {
  width: 29%;
}
#city_input_group {
  width: 69%;
}

.input-pair-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-flow: row nowrap;
}

.search-group {
  width: 90%;
  max-width: 420px;
  margin: 50px auto 0px auto;
 }
 
/*
***************************************** CAPTCHA
*/
.captcha {
  width: 100%;
  min-height: 50px;
}

/*
***************************************** FORM ERROR
*/
.form-error {
  height: auto;
  width: 100%;
  color: #f2ff00;
  font-size: 10;
  padding: 5px;
  margin-bottom: 5px;
  font-family: pixelmix;
  font-weight: bolder;
}

/*
***************************************** ERROR
*/
.error {
  height: 20px;
  width: 100%;
  color: #f2ff00;
  font-size: 10px;
  padding: 5px;
  margin-bottom: 5px;
  font-family: pixelmix;
  font-weight: bolder;
}

/*
***************************************** SUBMIT
*/
.submit-container {
  position: relative;
  height: 50px;
  width: 100%;
  margin-bottom: 50px;
}

.submit {
  position: absolute;
  bottom: 0px;
  outline: none;
  height: 100%;
  width: 100%;
  color: #d3d3d3;
  font-size: 14px;
  padding: 10px;
  margin: 0px;
  font-family: pixelmix;
  font-weight: bolder;
  cursor: pointer;
}

.submit:active {
  outline: none;
  margin-top: 4px;
  height: 46px;
  width: 100%;
  color: #ffffff;
  font-size: 14px;
  padding: 0px 10px;
  margin: 0px;
  font-family: pixelmix;
  font-weight: bolder;
  background-color: rgba(0, 0, 0, 0.9);
}

/**
***************************************** LINKS
*/
.big-link-container,
.page-link-container,
.index-link-container {
  position: relative;
  height: 50px;
  width: 90%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

.big-link-container>a,
.page-link-container>a,
.page-link-container>div,
.index-link-container>a {
  position: absolute;
  bottom: 0px;
  outline: none;
  height: inherit;
  width: 100%;
  color: #d3d3d3;
  font-size: 14px;
  padding: 0px 10px;
  font-family: pixelmix;
  font-weight: bolder;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-shadow: 0px 3px black;
}

.big-link-container>a:active,
.page-link-container>a:active,
.index-link-container>a:active {
  outline: none;
  margin-top: 4px;
  height: 46px;
  background-color: rgba(0, 0, 0, 0.9);
  color: #ffffff;
}

.mt-120 {
  margin-top: 120px;
}

/*
***************************************** OPTION
*/
option {
	font-family: pixelmix;
  padding: 3px 0px;
}

/*
***************************************** LINK
*/
.link-wrapper {
  margin-bottom: 50px;
}
.link-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  color: #d3d3d3;
  font-size: 14px;
  font-family: pixelmix;
  text-shadow: 0px 0px 4px rgb(0, 0, 0);
}

.link-paragraph {
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column wrap;
  color: #d3d3d3;
}

.link-paragraph>a {
  font-weight: bolder;
  color: #d3d3d3;
  text-decoration: none;
}

.link-paragraph>a:active {
  font-weight: bolder;
  color: #ffffff;
  text-decoration: none;
}

.link-container,
.delete-link-container,
.back-container,
.pw-link-container {
  position: relative;
  height: 50px;
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.back-container>a {
  position: absolute;
  bottom: 0px;
  height: 50px;
  width: 100%;
  color: #d3d3d3;
  font-size: 14px;
  padding: 0px 10px;
  font-family: pixelmix;
  font-weight: bolder;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0px  3px rgb(0, 0, 0);
}

.back-container>a:active {
  margin-top: 4px;
  height: 46px;
  width: 100%;
  color: #ffffff;
  font-size: 14px;
  padding: 0px 10px;
  margin: 0px;
  font-family: pixelmix;
  font-weight: bolder;
  border-radius: 4px;
}

.link-container>a,
.delete-link-container>a,
.pw-link-container>a {
  position: absolute;
  bottom: 0px;
  height: 50px;
  width: 100%;
  color: #d3d3d3;
  font-size: 14px;
  padding: 0px 10px;
  font-family: pixelmix;
  font-weight: bolder;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.link-container>a:active,
.delete-link-container>a:active,
.pw-link-container>a:active {
  margin-top: 4px;
  height: 46px;
  width: 100%;
  color: #ffffff;
  font-size: 14px;
  padding: 0px 10px;
  margin: 0px;
  font-family: pixelmix;
  font-weight: bolder;
  background-color: rgba(0, 0, 0, 0.9);
}

td>a {
  color: lightgray;
}

td>a:active {
  color: white;
}

/*
***************************************** SCROLLBAR
*/

/*
****************************************  width 
*/
::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}

/*
****************************************  Track
*/
::-webkit-scrollbar-track {
  background: #323232;
  margin: 0px 0px;
}

/*
****************************************  Handle 
*/
::-webkit-scrollbar-thumb {
  background: #141414;
}

/*
***************************************** FOOTER
*/
.footer {
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  padding-top: 50px;
  padding-bottom: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  min-height: 100px;
  width: 100%;
  min-height: 300px;
  text-shadow: 0px  4px rgb(0, 0, 0);
  border-top: 4px outset #4c00a2;
  background-color: rgba(0, 0, 0, 1);
  box-shadow: 0px 0px 4px  #4c00a2;
  font-size: 12px;
}

/*
***************************************** CHECKBOX STYLING
*/
.invoice-info-checkbox-wrapper {
  height: 160px;
  width: 100%;
  display: flex;
  align-items: space-evenly;
  justify-content: space-evenly;
  flex-flow: column wrap;
}

.invoice-info-invoice-preview {
  position: relative;
  height: 460px;
  width: 100%;
  padding: 10px;
  margin-bottom: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-flow: column wrap;
  background: black;
}
.invoice-info-invoice-preview>img {
  height: 100%;
  width: 100%;
  min-width:200px;
  min-height: 290px;
  background: white;
}

.invoice-info-invoice-preview-active,
.invoice-info-invoice-preview-processed {
  position: absolute;
  top: 25%;
  right: 18%;
  width: 30%;
  padding-top: 4px;
  padding-bottom: 6px;
  font-family: stamp;
  font-size: 14px;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0px 0px 4px 10px black;
  transform: rotate(-1deg);
  animation: slide 1s linear;
}

.invoice-info-invoice-preview-active {
  background-image: linear-gradient(rgba(0, 209, 213, 0.2), rgba(0, 209, 213, 0.1));
  color: rgb(0, 209, 213);
  border:  outset rgba(0, 209, 213, 0.108);
}

.invoice-info-invoice-preview-processed {
  background-image: linear-gradient(rgba(0, 213, 11, 0.2), rgba(0, 213, 11, 0.1));
  color: rgb(0, 213, 11);
  border:  outset rgba(0, 213, 11, 0.108);
}

.switch {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row wrap;
  width: 50px;
  height: 30px;
  border-left: 4px outset #4c00a2;
  border-right: 4px outset #4c00a2;
  border-top: 4px outset #4c00a2;
  border-bottom: 4px outset #4c00a2;
  border-radius: 3px;
  background: transparent;
  margin: 0px 10px 0px 10px;
  box-shadow: 0px 0px 4px  #4c00a2;
}

.checkbox-label {
  position: absolute;
  top: 3px;
  left: 60px;
  color: darkgray;
  height: 20px;
  width: 280px;
  font-family: pixelmix;
  font-weight: bolder;
  margin-bottom: 20px;
  text-shadow: 0px  4px rgb(0, 0, 0);
  -webkit-transition: .4s;
  transition: .4s;
}

.checkbox-label:before {
  position: absolute;
  top: 3px;
  left: 60px;
  height: 20px;
  width: 280px;
  color: white;
  font-family: pixelmix;
  font-weight: bolder;
  margin-bottom: 20px;
  text-shadow: 0px  4px rgb(0, 0, 0);
  -webkit-transition: .4s;
  transition: .4s;
}
.checkbox-label>a {
  color: darkgray;
}
.checkbox-label>a:active {
  color: white;
}

.switch input { 
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  width: inherit;
  height: inherit;
  z-index: 99;
  cursor: pointer;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 70%;
  width: 40%;
  left: 12%;
  bottom: 15%;
  background-color: #555555;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  background-color: #000000;
}

input:checked + .checkbox-label:before {
  color: white;
}

/*
**************************************** Rounded sliders 
*/
.slider.round {
  border-radius: 3px;
}

.slider.round:before {
  border-radius: 3px;
}

/*
**************************************** USER ITEM CHECKBOX
*/

/* user item checkbox container */
.user-item-checkbox-container {
  display: flex;
  width: 25px;
  height: 25px;
  position: relative;
  cursor: pointer;
  font-size: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
}

.checkbox-label>a {
  text-decoration: underline;
  cursor: pointer;
}

/* Hide the browser's default checkbox */
.user-item-checkbox-container .user-item-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.user-item-checkbox-dummy {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: transparent;
}

/* On mouse-over, add a grey background color */
.user-item-checkbox-container:hover .user-item-checkbox ~ .user-item-checkbox-dummy {
  background-color: rgba(0, 0, 255, 0.3);
}

/* When the checkbox is checked, add a blue background */
.user-item-checkbox-container .user-item-checkbox:checked ~ .user-item-checkbox-dummy {
  background-color: #000000;
}

/* Create the user-item-checkbox-dummy/indicator (hidden when not checked) */
.user-item-checkbox-dummy:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the user-item-checkbox-dummy when checked */
.user-item-checkbox-container .user-item-checkbox:checked ~ .user-item-checkbox-dummy:after {
  display: flex;
}

/* Style the user-item-checkbox-dummy/indicator */
.user-item-checkbox-container .user-item-checkbox-dummy:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: 2px solid lightgray;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/**
**************************************** USER ORDER CONFIRMATION ITEM CARD
*/
.user-order-confirmation-item-titel-container,
.user-order-confirmation-total-container,
.user-order-confirmation-item-wrapper,
.user-order-confirmation-data-wrapper {
  height: auto;
  width: 95%;
  max-width: 520px;
  margin: 0px auto;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
  font-size: 14px;
  color: #ffffff;
  font-size: 10px;
  font-family: pixelmix;
  letter-spacing: 1px;
  font-weight: bolder;
  background-color: rgba(0, 255, 255, 0.101);
}
.user-order-confirmation-item-titel-container {
  width: 100%;
  justify-content: flex-startn;
  flex-flow: row nowrap;
  margin-bottom: 5px;
}
.user-order-confirmation-total-container {
  padding: 0px 5px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.user-order-confirmation-item-wrapper {
  overflow-x: scroll;
  padding-bottom: 15px;
}
.user-order-confirmation-data-wrapper {
  padding: 5px;
}

.user-order-confirmation-data-container,
.user-order-confirmation-item-container {
  height: 100%;
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row nowrap;
 }
 .user-order-confirmation-data-container>div {
  width: 180px;
 }
.user-order-confirmation-item-titel-id,
.user-order-confirmation-item-titel-date,
.user-order-confirmation-item-titel-name,
.user-order-confirmation-item-titel-location,
.user-order-confirmation-item-titel-factor,
.user-order-confirmation-item-titel-price,
.user-order-confirmation-item-content-id,
.user-order-confirmation-item-content-date,
.user-order-confirmation-item-content-name,
.user-order-confirmation-item-content-location,
.user-order-confirmation-item-content-factor,
.user-order-confirmation-item-content-price {
  height: auto;
  display: flex;
  background-color: transparent;
  margin: 4px 5px;
}
.user-order-confirmation-item-titel-id,
.user-order-confirmation-item-content-id {
  width: 20px;
  justify-content: center;
  align-items: center;
}
.user-order-confirmation-item-titel-date,
.user-order-confirmation-item-content-date {
  width: 80px;
  justify-content: flex-start;
  align-items: center;
}
.user-order-confirmation-item-titel-name,
.user-order-confirmation-item-content-name {
  width: 200px;
  justify-content: flex-start;
  align-items: center;
}
.user-order-confirmation-item-titel-location,
.user-order-confirmation-item-content-location {
  width: 300px;
  justify-content: flex-start;
  align-items: center;
}
.user-order-confirmation-item-content-factor,
.user-order-confirmation-item-content-factor {
  width: 30px;
  justify-content: center;
  align-items: center;
}
.user-order-confirmation-item-content-price,
.user-order-confirmation-item-content-price {
  width: 50px;
  justify-content: flex-end;
  align-items: center;
}
.user-order-confirmation-item-titel-date,
.user-order-confirmation-item-titel-name,
.user-order-confirmation-item-titel-location,
.user-order-confirmation-item-titel-factor,
.user-order-confirmation-item-titel-price,
.user-order-confirmation-item-titel-id {
  justify-content: flex-start;
  align-items: flex-start;
}

#user_orders_container,
#user_orders_title {
  max-width: 360px;
}

/* AGB TITEL */
.agb-title {
  max-width: 520px;
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  font-family: pixelmix;
  margin-bottom: 25px;
  text-shadow: 0px  4px rgb(0, 0, 0);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row wrap;
}

.agb-number {
  width: 10%;
}
.agb-title {
  width: 90%;
}

/*
**************************************** CALENDAR
*/
.calendar-wrapper {
  position: relative;
  width: 90%;
  max-width: 520px;
  height: 360px;
  margin: 20px auto 50px auto;
}

.calendar-header-container {
  position: relative;
  width: 90%;
  max-width: 520px;
  height: 100px;
  margin: 10px auto 0px auto;
  font-family: pixelmix;
  font-weight: bolder;
}

.calendar-title {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
  text-shadow: 0px  3px rgb(0, 0, 0);
}

.calendar-header-prev-button {
  position: absolute;
  height: 40px;
  width: calc(100% / 5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  top: 110px;
  left: 0px;
  font-size: 14px;
  cursor: pointer;
  z-index: 90;
}
.user-order-calendar-header-prev-button {
  position: absolute;
  height: 40px;
  width: calc(100% / 5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  top: 10px;
  left: 10px;
  font-size: 14px;
  cursor: pointer;
  z-index: 90;
}

.user-order-calendar-header-close-button {
  position: absolute;
  height: 40px;
  width: calc(100% / 5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  bottom: 0px;
  right: 10px;
  font-size: 14px;
  cursor: pointer;
  z-index: 90;
}


.calendar-header-next-button {
  position: absolute;
  height: 40px;
  width: calc(100% / 5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  top: 110px;
  right: 0px;
  font-size: 14px;
  cursor: pointer;
  z-index: 90;
}

.user-order-calendar-header-next-button {
  position: absolute;
  height: 40px;
  width: calc(100% / 5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  top: 10px;
  right: 10px;
  font-size: 14px;
  cursor: pointer;
  z-index: 90;
}

.calendar-header-prev-button:active,
.calendar-header-next-button:active {
  outline: none;
  top: 112px;
  height: 38px;
}

.user-order-calendar-header-prev-button:active,
.user-order-calendar-header-next-button:active {
  outline: none;
  top: 14px;
  height: 38px;
}

.calendar-weekday-container {
  width: 100%;
  max-width: 520px;
  height: 20px;
  margin: 20px auto 5px auto;
  padding: 0px 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row nowrap;
}

.calendar-weekday {
  width: calc(100% / 7 + 4px);
  height: 100%;
  padding-bottom: 3px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-family: pixelmix;
  font-weight: bold;
  font-size: 12px;
  color: lightgray;
  text-shadow: 0px  3px rgb(0, 0, 0);
}

.calendar-container {
  width: 100%;
  max-width: 520px;
  min-height: 260px;
  height: calc(100% - 140px);
  margin: 0px auto;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row wrap;
  font-family: pixelmix;
  background-color: rgb(0, 0, 25);
}

.calendar-day,
.current-day {
  position: relative;
  width: calc(100% / 7 - 8px);
  height: calc(100% / 6 - 8 px);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px outset transparent;
  border-radius: 3px;
  margin: 4px 4px;
  padding: 3px 0px;
  font-size: 12px;
}

.calendar-day:hover {
    background-color: #7b00ff42;
    cursor: pointer;
}

.current-day {
  font-weight: bolder;
  color: white;
}
.calendar-order-item-inactive {
  border: 4px outset #5900ff;
  cursor: pointer;
}
.calendar-order-item-active {
  background-color: #5900ff3c;
  border: 4px outset #5900ff;
  cursor: pointer;
}
.calendar-order-item-processed {
  background-color: #5900ff;
  border: 4px outset #5900ff;
  cursor: pointer;
}

.calendar-order-item-yellow { /* YELLOW  */
  background-color: #7b00ff11;
  border: 4px outset #dfe300;
  cursor: pointer;
}
.background-color-yellow {
  background-color: #dfe30055;
    transition: 0.1s;
}
.background-color-yellow:hover {
  background-color: #dfe30077;
}
.background-color-yellow:active {
  background-color: #dfe30099;
}

.calendar-order-item-orange { /* ORANGE  */
  background-color: #7b00ff11;
  border: 4px outset #ffa200;
  cursor: pointer;
}
.background-color-orange {
  background-color: #ffa20055;
  transition: 0.1s;
}
.background-color-orange:hover {
  background-color: #ffa20077;
}
.background-color-orange:active {
  background-color: #ffa20099;
}

.calendar-order-item-cyan { /* CYAN  */
  background-color: #7b00ff11;
  border: 4px outset #0088ff;
  cursor: pointer;
}
.background-color-cyan {
  background-color: #0088ff55;
  transition: 0.1s;
}
.background-color-cyan:hover {
  background-color: #0088ff77;
}
.background-color-cyan:active {
  background-color: #0088ff99;
}

.calendar-order-item-blue { /* BLUE  */
  background-color: #7b00ff11;
  border: 4px outset #2b00ff;
  cursor: pointer;
}
.background-color-blue {
  background-color: #2b00ff55;
  transition: 0.1s;
}
.background-color-blue:hover {
  background-color: #2b00ff77;
}
.background-color-blue:active {
  background-color: #2b00ff99;
}

.calendar-order-item-red { /* RED  */
  background-color: #7b00ff11;
  border: 4px outset #ff4000;
  cursor: pointer;
}
.background-color-red {
  background-color: #ff400055;
  transition: 0.1s;
}
.background-color-red:hover {
  background-color: #ff400077;
}
.background-color-red:active {
  background-color: #ff400099;
}

.calendar-order-item-green { /* GREEN  */
  background-color: #7b00ff11;
  border: 4px outset #77ff00;
  cursor: pointer;
}
.background-color-green {
  background-color: #77ff0055;
  transition: 0.1s;
}
.background-color-green:hover {
  background-color: #77ff0077;
}
.background-color-green:active {
  background-color: #77ff0099;
}

.calendar-order-item-magenta { /* MAGENTA  */
  background-color: #7b00ff11;
  border: 4px outset #ff0090;
  cursor: pointer;
}
.background-color-magenta {
  background-color: #ff009055;
  transition: 0.1s;
}
.background-color-magenta:hover {
  background-color: #ff009077;
}
.background-color-magenta:active {
  background-color: #ff009099;
}

.calendar-order-item-purple { /* PURPLE  */
  background-color: #7b00ff11;
  border: 4px outset #9500ff;
  cursor: pointer;
}
.background-color-purple {
  background-color: #9500ff55;
  transition: 0.1s;
}
.background-color-purple:hover {
  background-color: #9500ff77;
}
.background-color-purple:active {
  background-color: #9500ff99;
}

.calendar-order-item-black { /* BLACK  */
  background-color: #7b00ff11;
  border: 4px outset #4c00a2;
  cursor: pointer;
}
.background-color-black {
  background-color: #00000055;
  transition: 0.1s;
}
.background-color-black:hover {
  background-color: #00000077;
}
.background-color-black:active {
  background-color: #00000099;
}


.calendar-order-item-white { /* WHITE  */
  background-color: #7b00ff11;
  border: 4px outset #ffffff;
  cursor: pointer;
}
.background-color-white {
  background-color: #ffffff55;
  transition: 0.1s;
}
.background-color-white:hover {
  background-color: #ffffff77;
}
.background-color-white:active {
  background-color: #ffffff99;
}

.font-color-red {
  color: #ff4000;
}
.font-color-green {
  color: #77ff00;
}
.font-color-blue {
  color: #2b00ff;
}
.font-color-cyan {
  color: #0088ff;
}
.font-color-yellow {
  color: #dfe300;
}
.font-color-magenta {
  color: #ff0090;
}
.font-color-purple {
  color: #9500ff;
}
.font-color-orange {
  color: #ffa200;
}
.font-color-white {
  color: #ffffff;
}
.font-color-black {
  color: #4c00a2;
}


.times-complete {
  background-color: brown;
}

.calendar-prev-day,
.calendar-next-day {
  color: rgba(255, 255, 255);
  border: 4px outset transparent;
  opacity: 0.3;
  cursor: default;
}

.calendar-day-info-wrapper {
  position: absolute;
  top: 25px;
  background-color: rgba(0, 0, 0, 1);
  border: 3px outset lightgray;
  width: 220px;
  height: 160px;
  padding: 5px;
  z-index: 94;
}

.employee-calendar-day-info-wrapper {
  position: absolute;
  top: 25px;
  background-color: rgba(0, 0, 0, 1);
  width: 180px;
  height: 160px;
  padding: 5px;
  padding-top: 40px;
  z-index: 94;
}

.calendar-day-info-date {
  padding-bottom: 5px;
  text-align: right;
  font-weight: 0;
  border-bottom:  outset lightgray;
}

.calendar-day-info-container {
  width: 80%;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row wrap;
}

.calendar-day-info-project {
  height: auto;
  padding: 5px 0px;
  text-align: left;
  border-bottom:  outset lightgray;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.calendar-day-info-location {
  height: auto;
  padding: 5px 0px;
  text-align: left;
  border-bottom:  outset lightgray;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.calendar-day-info-item {
  height: auto;
  padding: 5px 0px;
  text-align: left;
  border-bottom:  outset lightgray;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 0;
}

/*
**************************************** STATISTICS
*/
.statistics-wrapper {
  position: relative;
  width: 90%;
  max-width: 520px;
  height: 340px;
  margin: 0px auto 40px auto;
  padding-top: 20px;
  overflow: visible;
}

.statistics-header-container {
  position: relative;
  width: 90%;
  max-width: 520px;
  height: 20px;
  margin: 0px auto;
  font-family: pixelmix;
  font-weight: bolder;
}

.statistics-title {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
  text-shadow: 0px  3px rgb(0, 0, 0);
}

.statistics-header-prev-button {
  position: absolute;
  height: 40px;
  width: calc(100% / 5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  top: 20px;
  left: 0px;
  font-size: 14px;
  cursor: pointer;
  z-index: 90;
}
.statistics-header-next-button {
  position: absolute;
  height: 40px;
  width: calc(100% / 5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  top: 20px;
  right: 0px;
  font-size: 14px;
  cursor: pointer;
  z-index: 90;
}

.statistics-header-prev-button:active,
.statistics-header-next-button:active {
  outline: none;
  top: 24px;
  height: 38px;
}

.statistics-container {
  position: relative;
  max-width: 520px;
  width: 100%;
  height: 280px;
  padding: 20px 10px 10px 35px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row wrap;
  font-family: pixelmix;
  background-color: rgb(0, 0, 25);
  overflow: hidden;
  font-size: 10px;
}

.statistics-content-container {
  position: relative;
  width: 100%;
  height: 120px;
  border-left:  outset darkgray;
  border-bottom:  outset darkgray;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  flex-flow: row wrap;
}
.statistics-content {
  position: relative;
  width: calc(100% / 24);
  height: 100%;
  margin: 0px 5px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-flow: row wrap;
}
.statistics-content-orders {
  width: 50%;
  background: #7b00ff43;
  border-top:  outset #4c00a2;
  border-left:  outset #7b00ff7d;
  border-right:  outset #7b00ff7d;
}
.statistics-content-invoice {
  width: 50%;
  background: #7b00ff72;
  border-top:  outset #4c00a2;
  border-left:  outset #7b00ff7d;
  border-right:  outset #7b00ff7d;
}

.statistics-content-month {
  position: absolute;
  bottom: -20px;
  height: 20px;
  width: 100%;
  text-align: center;
}

.statistics-content-scale-1 {
  position: absolute;
  width: calc(100% + 28px);
  left: -28px;
  bottom: 6.25%;
  text-align: left;
  border-bottom:  outset rgba(169, 169, 169, 0.3);
}
.statistics-content-scale-2 {
  position: absolute;
  width: calc(100% + 28px);
  left: -28px;
  bottom: 18.75%;
  text-align: left;
  border-bottom:  outset rgba(169, 169, 169, 0.3);
}
.statistics-content-scale-3 {
  position: absolute;
  width: calc(100% + 28px);
  left: -28px;
  bottom: 43.75%;
  text-align: left;
  border-bottom:  outset rgba(169, 169, 169, 0.3);
}
.statistics-content-scale-4 {
  position: absolute;
  width: calc(100% + 28px);
  left: -28px;
  bottom: 62.5%;
  text-align: left;
  border-bottom:  outset rgba(169, 169, 169, 0.3);
}
.statistics-content-scale-5 {
  position: absolute;
  width: calc(100% + 28px);
  left: -28px;
  bottom: 93.75%;
  text-align: left;
  border-bottom:  outset rgba(169, 169, 169, 0.3);
}

.statistics-content-legend-1 {
  position: absolute;
  height: 15px;
  width: auto;
  bottom: -40px;
  left: -25px;
  display: flex;
  justify-items: flex-start;
  align-items: center;
  flex-flow: row nowrap;
  font-size: 10px;
}
.statistics-content-legend-1-color {
  height: 15px;
  width: 15px;
  margin-right: 10px;
  background: #7b00ff43;
}

.statistics-content-legend-2 {
  position: absolute;
  height: 15px;
  width: auto;
  bottom: -60px;
  left: -25px;
  display: flex;
  justify-items: flex-start;
  align-items: center;
  flex-flow: row nowrap;
  font-size: 10px;
}
.statistics-content-legend-2-color {
  height: 15px;
  width: 15px;
  margin-right: 10px;
  background: #7b00ff72;
}

.statistics-content-order-total {
  position: absolute;
  bottom: -80px;
  left: 0px;
  font-size: 10px;
}

.statistics-content-invoices-total {
  position: absolute;
  bottom: -100px;
  left: 0px;
  font-size: 10px;
}

.statistics-content-tax-total {
  position: absolute;
  bottom: -120px;
  left: 0px;
  font-size: 10px;
}

/*
**************************************** DIAGRAM
*/
.diagram-wrapper {
  position: relative;
  width: 90%;
  max-width: 520px;
  height: 340px;
  margin: 0px auto 50px auto;
  padding-top: 20px;
  overflow: visible;
}

.diagram-header-container {
  position: relative;
  width: 90%;
  max-width: 520px;
  height: 20px;
  margin: 0px auto;
  font-family: pixelmix;
  font-weight: bolder;
}

.diagram-title {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  color: #d3d3d3;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
  text-shadow: 0px  3px rgb(0, 0, 0);
}

.diagram-header-prev-button {
  position: absolute;
  height: 40px;
  width: calc(100% / 5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  top: 20px;
  left: 0px;
  font-size: 14px;
  cursor: pointer;
  z-index: 90;
}
.diagram-header-next-button {
  position: absolute;
  height: 40px;
  width: calc(100% / 5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  top: 20px;
  right: 0px;
  font-size: 14px;
  cursor: pointer;
  z-index: 90;
}

.diagram-header-prev-button:active,
.diagram-header-next-button:active {
  outline: none;
  top: 24px;
  height: 38px;
}

.diagram-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row wrap;
  font-family: pixelmix;
  background-color: rgb(0, 0, 25);
  overflow: hidden;
  font-size: 10px;
}

/*
**************************************** COOKIE INFORMATION
*/
.coockie-information-wrapper {
  position:fixed;
  top:0px;
  bottom:0px;
  height:auto;
  width:100%;
  padding:0px;
  margin:0px;
  border-radius:0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: pixelmix;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99;
}
.coockie-information-container {
  position: absolute;
  height:300px;
  width:100%;
  padding-top: 80px;
  padding-bottom: 80px;
  box-shadow: 0px 0px 100px 0px black;
  border-radius:0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  background: rgb(0, 0, 0);
  color: lightgray;
}
.coockie-information-titel {
  height:20px;
  width:calc(50% + 140px);
  margin-bottom: 20px;
  border-radius:0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size:20px;
  font-weight: bold;
}
.coockie-information-text {
  height:auto;
  width:50%;
  padding: 0px 30px 0px 0px;
  border:none;
  border-radius:0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size:14px;
}
.coockie-information-button {
  height:50px;
  width:50%;
  max-width: 140px;
  padding:0px;
  margin: 40px 0px;
  border-radius:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  cursor:pointer;
  border-color: lightgray;
}
.coockie-information-button:active {
  border-color: lightgray;
  color:white;
}

/*
**************************************** SCROLLER
*/

.scroller-container {
  width: auto;
  display: flex;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: bolder;
  font-family: pixelmix;
}

.scroller-element {
  margin: 0px 5px;
  text-decoration: none;
  color: darkgray;
  text-shadow:   5px rgba(0, 255, 255, 0.603);
}

.scroller-element:active {
  color: lightgray;
  transition: 0.1s;
}

.scroller-name {
  white-space: nowrap;
}

.scroller-break {
  color: darkgray;
  font-family: pixelmix;
}

/*
**************************************** QR CODE
*/
.qrcode-title {
  width: 90%;
  max-width: 300px;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(0, 0, 0);
  font-size: 12px;
  color: lightgray;
  text-shadow: -2px -2px 3px rgb(0, 0, 0);
  font-weight: bolder;
}

.qrcode-wrapper {
  width: 90%;
  max-width: 300px;
  margin: 0px auto 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(0, 0, 0);
  padding: 30px;
}
.qrcode-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qrcode {
  height: 100%;
  width: 100%;
  padding: 10px;
  background-color: rgb(225, 225, 225);
}

/********************************************* CALENDAR DAY INFO ClOSE BUTTON */
.day-info-close-button-wrapper {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.day-info-close-button-container {
  position: relative;
  min-height: 30px;
  min-width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  transition: 0.1s;
  cursor: pointer;
  border-radius: 6px;
  opacity: 0.8;
}

.day-info-close-button-container:active {
opacity: 1;
background-color: #d8b4ff0e;
}

.day-info-close-button-element-1,
.day-info-close-button-element-2 {
  position: absolute;
  top: 11px;
  right: 1px;
  height: 1px;
  width: 20px;
  margin: 2px 0px;
  border-radius: 6px;
  border: 2px outset #eedfff;
  transition: 0.3s;
}

.day-info-close-button-element-1 {
transform: rotate(45deg);
}

.day-info-close-button-element-2 {
transform: rotate(-45deg);
}

/*
**************************************** EMPLOYEE CALENDAR DELETE BUTTON WRAPPER
*/
.employee-calendar-delete-button-wrapper {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 30px;
  width: auto;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: darkgray;
  text-shadow: 1px 1px 3px #ffaaaa;
  font-size: 12px;
}

.employee-calendar-delete-button-wrapper:active {
  color: lightgray;
  text-shadow: 1px 1px 3px #ffeeee;
  transition: 0.1s;
}

/*
**************************************** EMPLOYEE ORDER ITEM OVERVIEW
*/
.employee-order-item-overview-wrapper {
  height: auto;
  width: 90%;
  max-width: 520px;
  margin: 0px auto;
  padding: 10px;
  color: lightgray;
  font-size: 8px;
  overflow-y: scroll;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column wrap;
  background-color: rgba(0, 0, 0, 0.7);
}

.employee-order-item-overview-container {
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row nowrap;
}

.employee-order-item-overview-break,
.employee-order-item-overview-time-to,
.employee-order-item-overview-time-from,
.employee-order-item-overview-date,
.employee-order-item-overview-item-id,
.employee-order-item-overview-task {
  width: calc(100% / 6 - 6px);
  min-width: 42px;
  padding: 3px;
  margin: 0px 3px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-flow: row wrap;
}

.employee-order-item-overview-item-id {
  min-width: 140px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row wrap;
}
.employee-order-item-overview-date {
  min-width: 80px;
}

.employee-order-item-overview-task {
  min-width: 240px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: row wrap;
}

.even-table-row {
  background-color: rgba(0, 0, 0, 0.7);
}

/*
**************************************** EMPLOYEE TIME OVERVIEW
*/
.employee-time-overview-wrapper {
  height: auto;
  width: 90%;
  max-width: 520px;
  margin: -25px auto 20px auto;
  padding: 20px;
  color: lightgray;
  font-size: 8px;
  overflow-y: scroll;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
  background-color: rgba(0, 0, 0, 0.7);
}

.employee-time-overview-container {
  margin: 3px 0px;
}

/*
**************************************** MANUAL FAVOURITES
*/
.manual-favourite-wrapper {
  width: 95%;
  max-width:440px;
  height: auto;
  min-height: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: column nowrap;
}

.manual-favourite-container {
  width: 100%;
  height: 40px;
  margin: 6px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row wrap;
}

.manual-favourite-element {
  width: calc(100% - 45px);
  height: 100%;
  padding: 3px;
  text-align: center;
  text-decoration: none;
  font-size: 9px;
}

.delete-manual-favourite-element {
  width: 40px;
  height: 40px;
  padding: 5px 11px;
  color: #d3d3d3;
  cursor: pointer;
}

.manual-table-add-button-cell {
  width: auto;
  padding: 0px;
  margin: 0px;
}


.manual-table-add-container {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #d3d3d3;
  cursor: pointer;
}

.manual-table-add-container:active {
  color: white;
  margin-top: 2px;
}
.manual-table-add-element {
  position: absolute;
  top: 1px;
  left: 9px;
  margin: 0px;
  font-size: 18px;
  font-family: pixelmix;
  font-weight: bold;
  display: flex;
  justify-content: center;
  text-align: center;
}

/*
**************************************** LOCATION LOAD CONTAINER
*/
.location-load-container {
  height: 30px;
  width: 30px;
  margin: 0px auto;
  margin-top: 0px;
}
.location-load-element {
  height: 100%;
  width: 100%;
  border-top: 6px solid rgba(255,255,255,0.5);
  border-right: 6px solid rgba(255,255,255,0.5);
  border-bottom: 6px solid rgba(255,255,255,0.5);
  border-left: 6px solid rgba(255,255,255,0.0);
  border-radius: 50%;
  animation: load_rotation 1s infinite linear;
}

/*
***************************************** TABLE NAV CONTAINER
*/
.table-nav-container {
  width: 90%;
  max-width: 520px;
  margin: 30px auto 10px auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.table-nav-select {
  outline: none;
  width: 120px;
  height: 50px;
  color: darkgray;
  padding: 0px 10px;
  margin: 0px;
  font-family: pixelmix;
  font-weight: bolder;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
  border: none;
  background: #00000033;
  transition: 0.2s;
}

.table-nav-select:active {
  color: lightgray;
  border: none;
}

.table-nav-select:focus {
  border: none;
  background: black;
}

/*
**************************************** KEYFRAMES (EFFECTS)
*/
@keyframes load_rotation {
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}

@keyframes size_up {
  from{height: 0px;}
  to{height: 100%;}
}

@keyframes size_down {
  from{height: 100%;}
  to{height: 0px;}
}

@keyframes slide {
  from{opacity: 0;}
  to{opacity: 1;}
}

@keyframes open-info {
  from{height: 30px;}
  to{height: auto;}
}

@keyframes close-info {
  from{height: 50px;}
  to{height: auto;}
}

.w360 {
  max-width: 360px;
}

.pb0 {
  padding-bottom: 0px;
}

.m10a {
  margin: 10px auto;
}
.wm90m620 {
  width: 90%;
  padding: 0px 20px;
  margin: 0px auto;
  max-width: 620px;
}

.w90mw420 {
  width: 90%;
  max-width: 420px;
  margin: 0px auto;
}

.nbp {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.c-red {
  Color: #ff0000;
}

.c-green {
  Color: #77ff00;
}

.f-10 {
  font-size: 10px;
}

.f-12 {
  font-size: 12px;
}

.f-14 {
  font-size: 14px;
}

.f-16 {
  font-size: 16px;
}

.f-18 {
  font-size: 18px;
}

.f-bold {
  font-weight: bold;
}


/****************************************************/
/********************************************* ID'S */
/****************************************************/

#employee_submit_container {
  margin-top: 20px;
}

#show_more_container {
  padding-top: 0px;
  margin-top: 0px;
}

#color_input_group {
  width: 29%;
}

#employee_item_id_select {
  width: 100%;
}

#employee_item_id_input_group {
  width: 100%;
}

#employee_date_input_group {
  width: 69%;
}

#employee_task_textarea {
  width: 100%;
  max-width: 100%;
}

#employee_task_input_group {
  width: 100%;
}

#time_from_input_group,
#time_to_input_group {
  width: 32%;
  margin-bottom: 20px;
}

#employee_break_input_group {
  width: 32%;
  margin-bottom: 20px;
}

#employee_date_from_input_group {
  width: 49%;
}

#employee_date_to_input_group {
  width: 49%;
}

#employee_break_label,
#employee_break_input,
#employee_task_label,
#employee_task_textarea,
#employee_color_label,
#employee_item_id_label,
#employee_date_from_label,
#employee_date_from_input,
#employee_date_to_label,
#employee_date_to_input,
#employee_time_from_label,
#employee_time_to_label,
#employee_date_label,
#employee_color_select,
#employee_item_id_select,
#employee_time_from_input,
#employee_time_to_input,
#employee_submit,
#employee_date_input {
  height: 35px;
  font-size: 10px;
}

td>input {
  min-width: 120px;
  max-width: 240px;
  min-height: 50px;
  background: transparent;
  border: none;
  outline: none;
  color: lightgray;
  cursor: pointer;
  font-size: 10px;
  text-shadow: 0px 2px black;
}

  /* OFFICE LINKS */
  .office-link-container {
    width: 90%;
    max-width: 520px;
    height: auto;
    margin: 100px auto 0px auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-flow: row wrap;
  }

  .office-link-group>a {
    width: 100px;
    height: 100px;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bolder;
    background: black;
    text-align: center;
    text-decoration: none;
    color: lightgray;
  }

  .office-link-group>a:active {
    margin-top: 3px;
    height: 97px;
  }

  /* user_order_date_input */

  .user-order-date-calendar {
    position: absolute; 
    top: 62px;
    width: 100%;
    min-width: 300px;
    max-width: 360px;
    height: 0px;
    padding-top: 20px;
    background: black; 
    z-index: 90;
    overflow: hidden;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  @keyframes openDown {
    from{height: 0px;}
    to{height: 390px;}
  }

  @keyframes openUp {
    from{height: 390px;}
    to{height: 0px;}
  }

  #user_order_date_input,
  #user_order_item_id_input {
    cursor: pointer;
  }

  #user_order_calendar_container {
    border: none;
  }

  /* RECEIPT EDIT CONTAINER */
  .receipt-edit-input-container {
    width: 100%;
    height: 30px;
    margin-top: 10px;
    overflow: hidden;
  }

  .receipt-edit-input-container-button {
    width: 100%;
    height: 30px;
    display: flex;
    padding: 5px;
    justify-content: flex-end;
    cursor: pointer;
  }

  .receipt-edit-input-container-button-arrow {
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    margin-right: 10px;
    border-bottom: 3px solid lightgrey;
    border-right: 3px solid lightgrey;
    transition: 0.2s;
  }

  /* CUSTOMER CONTACT CONTAINER */
  .customer-contact-1-container,
  .customer-contact-2-container,
  .customer-contact-3-container,
  .customer-contact-4-container,
  .customer-contact-5-container {
    width: 100%;
    max-width: 360px;
    height: 55px;
    margin: 10px 0px;
    padding: 5px 0px;
    overflow: hidden;
  }

  .costomer-contact-1-input-container-button,
  .costomer-contact-2-input-container-button,
  .costomer-contact-3-input-container-button,
  .costomer-contact-4-input-container-button,
  .costomer-contact-5-input-container-button {
    width: 100%;
    height: 40px;
    display: flex;
    padding: 10px 0px 5px 0px;
    margin-bottom: 30px;
    justify-content: flex-start;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  .customer-contact-1-input-container-button-arrow,
  .customer-contact-2-input-container-button-arrow,
  .customer-contact-3-input-container-button-arrow,
  .customer-contact-4-input-container-button-arrow,
  .customer-contact-5-input-container-button-arrow {
    width: 15px;
    height: 13px;
    transform: rotate(45deg);
    margin-right: 10px;
    border-bottom: 3px solid lightgrey;
    border-right: 3px solid lightgrey;
    transition: 0.2s;
  }

  .customer-contact-1-input-container-button-text,
  .customer-contact-2-input-container-button-text,
  .customer-contact-3-input-container-button-text,
  .customer-contact-4-input-container-button-text,
  .customer-contact-5-input-container-button-text {
    width: 345px;
    height: 50px;
    padding-left: 10px;
    color: lightgray;
    font-weight: bolder;
    text-shadow: 0px  3px rgb(0, 0, 0);
  }

  .trips-indicator-container {
    position: fixed;
    width: 60px;
    height: 60px;
    right: 130px;
    top: 200px;
    z-index: 100;
    background-color: #000000dd;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .trips-indicator-container:active {
    height: 58px;
    top: 202px;
  }

  .trips-indicator-container>a {
    width: 100%;
    height: 100%;
    padding: 5px;
    background-color: #9f46ff57;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    font-weight: bolder;
    font-size: 10px;
    line-height: 12px;
    color: lightgrey;
  }

  datalist {
    display: none;
  }