#vue-addresses {
  background-image: linear-gradient(to left, rgba(94, 76, 61, 0.5), rgba(94, 76, 61, 0.3));
}
body, html {
  height: 100%;
  width: 100%;
}
#addressModal table tr {
  border-bottom: solid 1px #ced4da;
}
#addAddressModal.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: initial;
  height: initial;
  overflow: hidden;
  outline: 0;
  z-index: 9999;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#addAddressModal.modal .form-row {
  padding: 0 20px;
}
#addAddressModal.modal p {
  text-align: center;
}
#addAddressModal.modal .btn-round {
  width: 240px;
  margin-top: 15px;
}
#addAddressModal.modal .modal-dialog {
  z-index: 1000;
  border-radius: 24px;
  overflow: hidden;
}
#addAddressModal.modal .single-product-head {
  width: calc(100% + 32px);
}
#addAddressModal.modal .single-product-head .product-title {
  padding: 0 20px;
}
/* Backdrop */
#addAddressModal::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Semi-transparent black */
  z-index: 999;
  /* Ensure it appears behind the modal */
}
* {
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
#addressModal .dwt-modal {
  max-width: 1000px;
  min-width: 800px;
  background: white;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
  border-radius: 24px;
  overflow: hidden !important;
}
#addressModal {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#addressModal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.addresses-column {
  height: 42px;
  line-height: 42px;
}
.modal-header .toggle-help {
  float: right;
}
.modal-header .toggle-help .material-symbols-outlined:hover {
  cursor: pointer;
  color: #d50008;
}
.modal-header .toggle-help .material-symbols-outlined {
  font-size: 48px;
}
.single-product-head .product-title {
  margin: 1px;
  max-height: calc(100% - 2px);
}
#addressModal .product-list-item:last-child {
  border: none !important;
}
#addressModal .modal-footer a, #addressModal .modal-footer button {
  height: 42px;
  line-height: 42px;
  color: #fff;
  width: auto;
  background-color: #d50008;
  border-color: #d50008;
  display: inline-block;
  text-align: center;
  padding: 0 20px;
  margin: 0 7px;
  outline: none !important;
  border: none !important;
}
#addressModal .modal-footer a:hover, #addressModal .modal-footer button:not(.disabled):hover {
  background-color: #5e4c3d;
  border-color: #5e4c3d;
  text-decoration: none !important;
}
#addressModal .table-wrapper {
  padding-top: 0 !important;
}
#addressModal .table-wrapper th {
  color: #fff;
  padding: 10px 4px;
  height: 40px !important;
  max-height: 40px !important;
}
.video-preview {
  justify-content: center;
  display: flex;
}
#addressModal .modal-footer a, #addressModal .modal-footer button {
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
}
#addressModal .modal-footer a *, #addressModal .modal-footer button * {
  line-height: 42px;
  height: 42px;
}
#addressModal .table-wrapper tr th:first-child, #addressModal .table-wrapper tr td:first-child {
  padding-left: 10px !important;
}
#addressModal .table-wrapper tr th:last-child, #addressModal .table-wrapper tr td:last-child {
  padding-right: 10px !important;
}
#addressModal .table-wrapper td {
  padding: 3px 4px;
}
#addressModal .table-wrapper th {
  padding: 8px 4px;
}
#addressModal .table-wrapper tr td {
  background: none;
}
#addresses-modal .table-wrapper th {
  color: black;
  border-bottom: solid 1px #f1f1f1;
}
#addresses-modal #loadedAddresses, #addresses-modal .table-wrapper tr, #addresses-modal .table-wrapper td, #addresses-modal .table-wrapper th {
  background: none !important;
}
.address-toolbar {
  width: 100%;
  display: block;
  height: 42px;
  margin: 0 12px;
}
.address-toolbar button {
  float: left;
  display: flex;
  margin-left: 10px;
  width: auto;
  border: none !important;
}
.address-toolbar button.pull-right {
  margin-right: 60px;
  float: right !important;
}
.address-toolbar span {
  height: 42px;
  line-height: 42px;
}
.date-send {
  background-color: #f1f1f1;
  display: flex;
  height: 42px;
  border-radius: 24px;
  line-height: 42px;
  padding: 0 15px;
  margin-left: 10px;
  font-size: 12px;
  float: left;
}
.address-toolbar .date-send {
  margin: 0 0 0 10px;
}
.btn-round {
  border-radius: 24px;
  height: 42px;
  line-height: 42px;
  padding: 0 10px !important;
}
#addressModal table {
  width: 100%;
}
#addressModal table tr {
  border-bottom: solid 1px #ced4da;
}
#addressModal table {
  width: 100%;
}
#addressModal table tr th {
  border-bottom: solid 1px #ced4da;
}
.texture-background.portrait img {
  height: 100%;
  width: 100%;
}
.texture-background.landscape img {
  width: 100%;
  height: 100%;
}
.button-address-modal i {
  padding-left: 10px;
}
.button-address-modal {
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #1d3c34;
  color: #fff;
}
.button-address-modal:hover {
  cursor: pointer;
  background: #22483e;
}
.column-address-send p > * {
  float: left;
  display: inline-block;
}
.column-address-send .message-send {
  padding: 10px;
}
.column-address-send p {
  clear: both;
  float: left;
  margin: 0 !important;
  width: 215px;
}
.column-address-send:not(.address-send) .message-send, .column-address-send:not(.address-send) i {
  display: none;
  opacity: 0;
}
.column-address-send span {
  height: 42px;
  line-height: 42px;
  display: inline-block;
}
.column-address-send i {
  font-size: 24px;
  height: 42px;
  line-height: 42px;
  display: inline-block;
  color: darkseagreen;
  margin-right: 15px;
}
.column-actions {
  float: right !important;
  display: flex !important;
  flex-direction: column;
  margin-right: 20px;
  text-align: center;
}
.product-address-row td {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.product-address-row td:first-child {
  width: 50px;
}
.product-address-row td > div.product-details p {
  margin: 0 !important;
}
.product-address-row td > div {
  float: left;
}
.btn-primary {
  background-color: #d50008;
  border-color: #d50008;
}
#addressHeaders {
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  float: left;
  width: 100%;
}
#loadedAddresses tr span {
  display: block;
  min-height: 24px;
  line-height: 24px;
}
.table-head th {
  font-size: 14px;
}
.btn-close:hover {
  cursor: pointer;
}
#loadedAddresses tr.address-updated td {
  background-color: #ffffc5 !important;
}
#addAddressModal .warning {
  background-color: rgba(255, 0, 0, 0.4) !important;
  padding: 5px 0;
  margin: 0px 20px;
}
#loadedAddresses tr.address-invalid td {
  background-color: rgba(255, 0, 0, 0.4) !important;
}
#loadedAddresses tr td:first-child {
  color: black;
}
#loadedAddresses tr td {
  min-height: 24px;
  line-height: 24px;
  color: #444;
  padding: 3px 5px !important;
}
#loadedAddresses tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}
#loadedAddresses {
  display: table;
  background: rgba(0, 0, 0, 0.05);
  width: calc(100% - 40px);
  margin: 20px;
}
#loadedAddresses tbody {
  min-height: 160px;
}
@media screen and (max-height: 1000px) {
  #addressModal .table-wrapper.address-table {
    clear: both;
    max-height: calc(100vh - 260px) !important;
    overflow-y: scroll;
  }
}
#addressModal .modal-footer {
  background: #f1f1f1;
  clear: both;
  z-index: inherit !important;
}
/* Loader Overlay */
.loader-overlay {
  position: absolute;
  /* Or fixed, depending on your modal's positioning context */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  /* Semi-transparent white background */
  display: flex;
  flex-direction: column;
  /* Stack spinner and text vertically */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  /* Ensure it's above other modal content */
}
/* Basic Spinner CSS (example: rotating circle) */
.spinner {
  border: 8px solid #f3f3f3;
  /* Light grey */
  border-top: 8px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  /* Animation */
  margin-bottom: 15px;
  /* Space between spinner and text */
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader-overlay p {
  color: #333;
  font-size: 1.1em;
}
#addressModal .product-list {
  width: 100%;
}
#addressModal .product-list-item div {
  float: left;
}
#addressModal .product-list-item {
  text-align: center;
  border-radius: 4px;
  padding: 10px;
  border-bottom: solid 1px #dee2e6;
  width: 100%;
  float: left;
  position: relative;
}
.product-list-item .actions {
  float: right !important;
}
.product-list-item .actions .material-symbols-outlined, .product-list-item .actions .icon-pencil {
  height: 42px;
  width: 42px;
  line-height: 42px;
  text-align: center;
  background: #1d3c34;
  color: #fff;
  display: block;
}
.product-list-item .actions .material-symbols-outlined, .product-list-item-no-product .icon-pencil {
  height: 42px;
  width: 42px;
  line-height: 42px;
  text-align: center;
  background: #1d3c34;
  color: #fff;
  display: inline-block;
}
.product-list-item .hover-thumbnail {
  display: flex;
  justify-content: center;
  align-content: center;
}
.single-product-head .product-title {
  color: #fff;
}
.product-list-item .product-thumbnail {
  width: 120px;
  text-align: left;
}
.product-list-item .product-title {
  width: 240px;
}
.product-title {
  color: #000;
  text-align: left;
}
.product-list-item .actions .material-symbols-outlined:hover, .product-list-item .actions .icon-pencil:hover, #loadedAddresses i.edit-address:hover, #loadedAddresses i.save-address:hover, #addressDropzone button:hover, #addressFooter button:hover, #loadedAddresses .remove-address:hover {
  cursor: pointer;
  background: #5e4c3d;
}
button.disabled {
  filter: grayscale(100%);
}
#loadedAddresses i {
  background: #d50008;
  color: #fff;
  border-radius: 999px;
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 32px;
  display: inline-block;
  margin-left: 2px;
}
#loadedAddresses .actions {
  min-width: 88px;
}
#loadedAddresses i.edit-address, #loadedAddresses i.save-address {
  background: #1d3c34;
}
#loadedAddresses tr input.form-control {
  margin-right: 5px;
  width: calc(100% - 10px);
}
#loadedAddresses span.empty {
  color: firebrick;
}
#loadedAddresses .form-control::placeholder {
  color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}
#loadedAddresses tr:not(.editing) input, #loadedAddresses tr.editing span {
  display: none !important;
}
#loadedAddresses tr.editing .edit-address, #loadedAddresses tr:not(.editing) .save-address {
  display: none !important;
}
.product-address-row .toggleAddressSend {
  cursor: pointer;
}
.product-address-row.disabled .toggleAddressSend {
  filter: grayscale(100%);
  opacity: 0.5;
}
#addressHeaders button.active, #addressHeaders button:hover {
  background-color: #5e4c3d;
}
#addressHeaders button {
  background: #d50008;
  color: #fff;
  border: none;
  outline: none;
  margin: 10px 5px;
  padding: 0 20px;
  height: 42px;
  text-align: center;
  line-height: 42px;
}
#loadedAddresses {
  font-size: 12px;
}
#loadedAddresses i.edit-address:hover, #loadedAddresses i.save-address:hover, #addressDropzone button:hover, #addressFooter button:hover, #loadedAddresses .remove-address:hover {
  cursor: pointer;
  background: #5e4c3d;
}
#loadedAddresses i {
  background: #d50008;
  color: #fff;
  border-radius: 999px;
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 32px;
  display: inline-block;
  margin-left: 2px;
}
#loadedAddresses i.edit-address, #loadedAddresses i.save-address {
  background: #1d3c34;
}
#loadedAddresses tr input.form-control {
  margin-right: 5px;
  width: calc(100% - 10px);
}
#loadedAddresses tr:not(.editing) input, #loadedAddresses tr.editing span {
  display: none !important;
}
#loadedAddresses tr.editing .edit-address, #loadedAddresses tr:not(.editing) .save-address {
  display: none !important;
}
.table-wrapper blockquote {
  text-align: center;
  background: #eee;
  margin: 20px;
  border: 1px solid #e5e5e5;
}
.overview-table-wrapper {
  clear: both;
  max-height: calc(100vh - 400px);
  overflow-y: scroll;
}
.table-wrapper {
  clear: both;
  max-height: calc(100vh - 520px);
  overflow-y: scroll;
}
.table-wrapper blockquote {
  padding: 20px;
  text-align: center;
}
#previewAddresses.disabled {
  opacity: 0.65 !important;
  filter: grayscale(100%) !important;
}
.sa-confirm-button-container button.confirm:hover {
  background: #5e4c3d !important;
}
.sa-confirm-button-container button.confirm {
  background: #d50008 !important;
}
#addressFooter button {
  background: #d50008;
  color: #fff;
  height: 42px;
  line-height: 42px;
  border: none;
  outline: none;
  padding: 0 20px;
}
#addressFooter {
  padding: 20px 0 0 0;
  text-align: center;
  border-top: solid 2px #e5e5e5;
  margin-top: 20px;
}
#loadedAddresses tr {
  width: 100%;
}
#addresses-modal {
  min-width: 840px;
}
#addresses-modal button:not(:disabled):hover {
  background: #5e4c3d;
  border-color: #5e4c3d;
}
#addresses-modal button:disabled {
  background: #ccc !important;
}
#addresses-modal .modal-footer {
  z-index: inherit !important;
}
#addresses-modal .modal-footer button {
  min-width: 120px;
}
#addressModal #overview-modal .modal-footer {
  flex-direction: column;
}
#addressModal #overview-modal .modal-footer p {
  clear: both;
}
#addressModal .modal-footer button#btn-send {
  background: #5e4c3d;
  border-color: #5e4c3d;
}
#btn-send:hover {
  cursor: pointer;
  background: #d50008 !important;
  border-color: #d50008 !important;
}
#loadedAddresses i.edit-address:hover, #loadedAddresses i.save-address:hover, #addressDropzone button:hover, #addressFooter button:hover, #loadedAddresses .remove-address:hover {
  cursor: pointer;
  background: #5e4c3d;
}
#loadedAddresses i {
  background: #d50008;
  color: #fff;
  border-radius: 999px;
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 32px;
  display: inline-block;
  margin-left: 2px;
}
#loadedAddresses .actions i {
  float: right;
}
#loadedAddresses i.edit-address, #loadedAddresses i.save-address {
  background: #1d3c34;
}
#loadedAddresses tr input.form-control {
  margin-right: 5px;
  width: calc(100% - 10px);
  font-size: 12px;
  border-radius: 4px !important;
}
#loadedAddresses tr:not(.editing) input, #loadedAddresses tr.editing span {
  display: none !important;
}
#loadedAddresses tr.editing .edit-address, #loadedAddresses tr:not(.editing) .save-address {
  display: none !important;
}
.product-address-row .toggleAddressSend {
  cursor: pointer;
}
.product-address-row.disabled .toggleAddressSend {
  filter: grayscale(100%);
  opacity: 0.5;
}
.product-address-row button {
  background: #1d3c34;
  color: #fff !important;
  border: none !important;
  outline: none;
  height: 42px;
  line-height: 42px;
  padding: 0 14px;
  border-radius: 4px;
  float: right;
  display: block !important;
}
.product-address-row td {
  align-items: center;
  justify-content: center;
  position: relative;
  float: left;
}
body .product-address-row button:hover {
  background: #5e4c3d;
}
.enveloppe-thumbnail img {
  max-width: 80%;
}
.enveloppe-thumbnail img, .product-thumbnail img {
  width: auto;
  height: 50px;
}
.product-col, .enveloppe-col {
  width: 110px;
}
.product-paper-color > div.color {
  width: 36px;
  height: 36px;
  border: solid 1px #000;
  border-radius: 4px;
}
.product-paper-color .creme {
  background-color: #ffc;
}
.single-product-head div.pull-right .btn-close {
  color: #fff;
  border: none;
  outline: none;
  font-size: 36px;
}
.single-product-head > div > img {
  max-height: 100%;
  padding: 10px;
  margin-left: 25px;
}
.single-product-head {
  margin: -16px;
  background: #1d3c34;
  color: #fff;
  height: 75px;
}
.single-product-head .enveloppe-thumbnail-select, .single-product-head .product-details {
  width: auto;
  padding-right: 20px;
}
.single-product-head .enveloppe-col, .single-product-head .product-col {
  width: auto;
}
.single-product-head .product-paper-color {
  top: initial;
  right: initial;
}
.single-product-head div {
  position: relative;
}
.single-product-head > div {
  display: flex;
  align-items: center;
  align-self: center;
  height: 100%;
  padding-right: 20px;
}
.selected-paper-color:hover {
  cursor: pointer;
}
.single-product-head .toggle-back:hover {
  cursor: pointer;
  background: #5e4c3d !important;
}
.single-product-head div .toggle-back {
  background: none !important;
  border: none !important;
  font-size: 42px;
  height: 60px;
  line-height: 60px;
  outline: none !important;
  padding: 0 15px;
}
.toggle-forward {
  flex-direction: row-reverse;
}
.single-product-head .enveloppe-thumbnail, .single-product-head .product-thumbnail {
  border-radius: 999px;
  text-align: center;
  margin: 10px 0;
  background: white;
  display: flex;
  justify-content: center;
  position: relative;
}
.single-product-head .enveloppe-thumbnail img, .single-product-head .product-thumbnail img {
  width: auto;
}
.single-product-head div {
  float: left;
}
.gotoQr:hover {
  color: #fff !important;
  text-decoration: none !important;
}
#addressDropzone button {
  background: #d50008;
  height: 42px;
  color: #fff;
  line-height: 42px;
  padding: 0 20px;
  margin: 0;
  border: 0;
  outline: none;
}
#addressDropzone {
  border: dashed #1d3c34;
  clear: both;
  padding: 20px;
  margin: 20px 0px 0px;
  text-align: center;
}
.multiple-address-swal {
  width: auto !important;
}
.swal2-container {
  z-index: 9999 !important;
}