/**
 * Shared styles for message detail pages
 * Body class: messageDetails
 */

.smal {
  display: none;
}

.messageDetails ul.feedbackPanel li,
.messageDetails .feedBack > * {
  margin: 0;
}

#secondary-menu .n1,
#secondary-menu .n2 {
  text-align: left;
}

#secondary-menu .n1 {
  min-width: 21rem;
  left: -5rem;
  font-size: 0.8em;
  padding: 0.3rem 0.5rem;
}

.messageDetails #dashboard {
  padding: 0;
  text-align: initial;
}

.messageDetails #dashboard-header {
  width: 100%;
  margin: 0;
  display: table;
  position: relative;
}

.messageDetails .dashboard-content {
  padding: 4px 0 40px;
}

#message_number input {
  display: inline-block;
  font-size: 1.2rem;
  border: 1px solid black;
  position: relative;
  top: -2px;
}

#title-cell,
.person-cell {
  padding: 0.66rem 1rem;
}

#title-cell h1 {
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1.7rem;
  margin: 0;
  padding: 0.3em 0;
  text-transform: uppercase;
}

.person-cell {
  line-height: 1.5em;
  color: #888888;
}

.person-cell label {
  display: block;
  color: #333333;
  font-weight: bold;
}

.messageDetails .person-cell .personDisplay.edited {
  padding: 0;
  border: 0;
  background-color: inherit !important;
}

.messageDetails .person-cell .personDisplay.edited:hover {
  text-decoration: underline;
  cursor: pointer;
}

/**
 * Person selection cell
 */
#currency select {
  width: 100%;
  overflow: hidden;
  margin: 0;
  border: 0;
  height: 2.3em;
}

.information-cell {
  /* color: #063563; */
  line-height: 17px;
  padding: 6px 12px 8px;
}

.information-cell .item {
  margin-bottom: 0.2em;
}

.information-cell .item .label {
  float: left;
  margin-top: 3px;
}

.information-cell .item .value {
  font-size: 11px;
  float: right;
}

.text-section {
  padding: 1rem;
  color: white;
  background-color: #737373;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  position: relative;
}

#mess-footer-block {
  background-color: #b3b0b0;
}

.text-section .edited {
  width: 100%;
}

.text-section label {
  color: white;
  padding-bottom: 0.4em;
  display: inline-block;
}

#lines-table {
  width: 100%;
  line-height: 1.5rem;
  /* margin-bottom: 2rem; */
}

.messageDetails #lines-table th.first,
.messageDetails #lines-table th:first-child,
.messageDetails #lines-table td.first,
.messageDetails #lines-table td:first-child {
  border-left: 0;
  position: relative;
}

.messageDetails #lines-table th.last,
.messageDetails #lines-table th:last-child,
.messageDetails #lines-table td.last,
.messageDetails #lines-table td:last-child {
  border-right: 0;
}

#lines-table thead th,
#lines-table .item-line td,
#lines-table .total-line td.amount {
  border-color: #808080;
  border-style: none solid solid;
  border-width: 0 1px 1px;
  font-weight: normal;
  padding: 0.3rem 0.5rem;
  vertical-align: top;
}

.messageDetails #lines-table th {
  color: #555555;
  font-weight: bold;
}

.messageDetails #lines-table td {
  color: #4d4d4d;
}

.messageDetails #lines-table .quantity,
.messageDetails #lines-table .unit_price,
.messageDetails #lines-table .subtotal,
.messageDetails #lines-table .tax_rate,
.messageDetails #lines-table .amount {
  text-align: right;
}

#subject,
.messageDetails #lines-table .description,
#summary_note,
#generic-content {
  white-space: pre-wrap;
  /* margin-top: 1em; */
}

.messageDetails #lines-table .select {
  width: 2rem;
}

.messageDetails #lines-table .select input {
  margin-top: 1rem;
}

.messageDetails #lines-table .unit {
  width: 4%;
}

.messageDetails #lines-table .reference {
  width: 10%;
}

.messageDetails #lines-table th.quantity {
  text-align: center;
}

.messageDetails #lines-table .quantity {
  border-right: 0px;
  border-left: 1px solid black;
  width: 8%;
}

.messageDetails #lines-table .unit-price {
  width: 8%;
}

.messageDetails #lines-table .vat {
  width: 8%;
}

.messageDetails #lines-table .subtotal {
  width: 10%;
}

#lines-table #topay-line td.amount {
  font-weight: bolder;
}

#lines-table .no-border {
  border: 0 none !important;
}

/**
 * Line tool
 */
#lines-table td .toolBt {
  position: absolute;
  top: 0;
  right: 0;
  background-color: white;
  line-height: 0;
  font-size: 1.54em;
  cursor: pointer;
  z-index: 10;
  white-space: initial;
}
#lines-table td .toolBt i {
  padding: 0.25em;
}

#lines-table td .toolBt span {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  padding: 0 0em 0.2em 0.5em;
  border-radius: 0 0 4px 4px;
}

.messageDetails .dashboard-content .message label {
  color: #063563;
  display: inline-block;
  padding-bottom: 1rem;
}

.messageDetails .dashboard-content .message div {
  min-height: 5.5em;
  position: relative;
}

body:not(.editing) .onEdit {
  display: none;
}

.information-cell input {
  width: 7em;
}

#message_number input {
  width: 7em;
}

/* History */
#historyWindow .window {
  max-width: 70em;
  overflow: auto;
}

#historyWindow .action {
  margin: 0.4em 0;
  border-top: 1px solid #888888;
  position: relative;
  padding-top: 0.4em;
}

#historyWindow .action:first-child {
  border: 0;
}

#historyWindow .cancelBt {
  position: absolute;
  right: 0;
  top: 0.1em;
  font-size: 1.3em;
}

#historyWindow .canceled .date,
#historyWindow .canceled .label,
#historyWindow .canceled .sending {
  text-decoration: line-through;
  font-style: italic;
}

#historyWindow .sending,
#historyWindow .payment {
  margin-left: 3em;
}

/* Re-attach window */

#reattachWindow {
  z-index: 10;
}

#reattachWindow .window {
  max-width: 35em;
  background-color: #cccccc;
}

#reattachWindow .personDisplay {
  min-height: 3em;
  width: 100%;
  background-color: white;
  border: 1px solid black;
  padding: 0.3rem;
}

#reattachWindow input[type="text"],
#reattachWindow input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.9em;
}

/**
 * Message detail - Commons
 * Body class: editing-common
 */

.messageDetails .content {
  background-color: #242424;
  padding: 0 0.66rem 22px;
  margin: auto;
}

.text-section {
  padding: 2px 4px;
  color: white;
  width: 100%;
}

#dashboard-subject div.edited {
  background-color: white;
}

#dashboard {
  background-color: #e2e2e2;
}

#mess-footer-block .buttons {
  position: absolute;
  top: 0em;
  right: 25px;
  margin-top: 0;
}

#mess-footer-block .buttons a {
  background-color: inherit;
  font-size: 0.9em;
}

/**
 * Editing - Invoice
 * Body class: invoice
 */

.messageDetails.invoice #title-cell {
  background-color: #a3221c;
  color: white;
}

.invoice .orderPaidLabel,
.invoice .dueDatePaidLabel {
  display: none;
}

/**
 * Editing - quote
 * Body class: quote
 */

.messageDetails.quote #title-cell {
  background-color: #51a29c;
  color: white;
}

.quote .paidLabel,
.quote .toPayLabel {
  display: none;
}

/**
 * Editing - purchase_order
 * Body class: purchase_order
 */
.messageDetails.purchase_order #title-cell {
  background-color: #51a29c;
  color: white;
}

.purchase_order .paidLabel,
.purchase_order .toPayLabel {
  display: none;
}

/**
 * Editing - Sending window
 */

#sendingWindow .window {
  min-width: 30rem;
  max-width: 100rem;
}

#sendingWindow label {
  width: 7em;
  display: inline-block;
  padding: 2px 0;
  margin-bottom: 3.6px;
  vertical-align: top;
}

#sendingWindow input#sendingSubject {
  max-width: calc(100% - 6.5em);
}

#sendingWindow .recipientPerson .edited {
  max-width: calc(100% - 8em);
  width: 30em;
  display: inline-block;
  margin-bottom: 0.5em;
}

#sendingWindow .address-street,
#sendingWindow .address-city,
#sendingWindow .address-misc,
#sendingWindow .person-misc {
  display: none;
}

#sendingComment {
  height: 10em;
  background-color: white;
}

#sendingWindow .bottomOptions {
  margin-top: 0.5em;
  text-align: right;
}

#sharelinkDisplay {
  vertical-align: top;
}

#sharelinkDisplay > * {
  display: inline-block;
  margin-bottom: 0.5em;
}

.copyLnk {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/**
 * Line editor
 */

.toolMenu {
  position: relative;
  margin: 0 0.5rem;
}

.toolMenu .menuActs {
  display: none;
}

.toolMenu a {
  display: inline-block;
  padding: 0.4rem;
  font-size: 2rem;
}

.toolMenu:hover .menuActs {
  display: inline-block;
}

#topTools {
  height: 33px;
}

#topTools > a {
  margin-top: 4px;
}

#topTools .menuActs {
  border: 1px solid #888888;
  background-color: white;
  border-radius: 4px;
}

#lineTools a {
  margin: 0 0.3em;
}

/* Tablet Small 740px */
@media screen and (min-width: 46.25em) {
  .messageDetails .content {
    position: relative;
    width: 90%;
  }

  .messageDetails #secondary-menu .n1 {
    min-width: 15em;
    left: -3em;
  }

  .messageDetails #secondary-menu .n1 a {
    font-size: 0.85em;
  }

  #dashboard-header .top-header {
    background-color: #242424;
    width: 100%;
    height: 4.75rem;
    position: relative;
  }

  #dashboard-header .bottom-header {
    position: relative;
    display: table;
    width: 100%;
    text-align: left;
    min-height: 10rem;
  }

  #title-cell,
  .person-cell,
  .information-cell {
    width: 33.33%;
    padding: 2rem;
    box-sizing: border-box;
    min-height: 100%;
    vertical-align: top;
  }

  .person-cell,
  .information-cell {
    display: table-cell;
  }

  #title-cell {
    position: absolute;
    height: 4.75rem;
    vertical-align: middle;
    padding-top: 1rem;
    border-right: 1px solid #242424;
    width: 33.1%;
    top: 0;
    left: 0;
  }

  #title-cell h1 {
    display: inline-block;
  }

  #title-cell h1 span.messNum {
    display: inline;
  }

  #title-cell #messageStatus {
    margin-left: 0.5em;
  }

  .person-cell {
    border-right: 1px solid black;
  }

  .person-cell label {
    display: block;
  }

  .text-section {
    padding: 0.5rem 2rem;
  }

  .text-section label {
    width: 10%;
    display: inline-block;
    vertical-align: top;
  }

  #dashboard-subject #subject,
  #summary_note {
    width: 89.7%;
    display: inline-block;
  }

  .messageDetails .dashboard-content {
    padding: 4px 2rem 3.5rem;
  }

  #lines-table thead th,
  #lines-table .item-line td,
  #lines-table .total-line th,
  #lines-table .total-line td.amount {
    padding: 0.6rem 1rem;
  }

  #mess-footer-block {
    /* padding: 4px 25px; */
    /* height: 100%; */
  }

  #mess-footer-block .message {
    margin-top: 2em;
    /* position: absolute; */
    /* width: 100%; */
    /* height: 100%; */
  }

  #historyWindow .date {
    display: inline-block;
    width: 11em;
  }

  #historyWindow .label {
    display: inline-block;
  }

  #historyWindow .sending,
  #historyWindow .payment {
    margin-left: 15em;
  }
}

/* Tablet Small 388px */
@media screen and (max-width: 388px) {
  .smal {
    display: initial;
  }
  .med {
    display: none;
  }
  .unit {
    width: 0;
  }
}