@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import "fa.all.min.css";
@import "forms-min.css";
@import "signature-pad.css";
@import url("https://cdn.notiphy.me/notiphy.min.css");

/* main structure  */
* {
  box-sizing: border-box;
}

html,body {
  min-height: 100%;
}
body {
  /* background-color: #f5f5f5; */
  background-color: var(--bs-tertiary-bg);
  background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(241, 235, 226, 1) 100%);
}
[data-bs-theme=dark] body {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(59, 57, 54, 1) 100%)!important;
  }

/* bootstrap icons  */
.bi {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentcolor; 
}

/* set our own primary color  */
/* .bg-primary, .text-bg-primary {
  background-color: rgb(70, 60, 90)!important;
}
.btn-primary {
  background-color: rgb(70, 60, 90)!important;
  border-color: rgb(120, 100, 150)!important;
}
.btn-outline-primary {
  border-color: rgb(120, 100, 150);
  color: rgb(120, 100, 150);
}
.btn-primary:hover {
  background-color: rgb(80, 70, 100)!important;
  border-color: rgb(120, 100, 150);
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: rgb(80, 70, 100)!important;
  border-color: rgb(120, 100, 150);
  color:rgba(255, 255, 255, 0.8);
}
.btn-primary:focus {
  background-color: rgb(80, 70, 100)!important;
  border-color: var(--bs-gray-500)!important;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5)!important;
}
.btn-primary:active, .btn-check:checked+.btn-primary {
  background-color: rgb(80, 70, 100)!important;
  border-color: var(--bs-gray-300)!important;
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: rgb(80, 70, 100)!important;
  border-color: var(--bs-gray-700)!important;
  opacity: 0.2!important;
} */

/* page wrapper - keeps footer down  */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.icf-bg {
  /* background-attachment: fixed;
  background-image: radial-gradient(rgba(255, 229, 229, 1), rgba(255, 224, 218, 1) 25%, rgba(215, 255, 137, 1) 100%);
  background-clip: border-box;
  background-origin: padding-box;
  background-size:auto; */
  background-attachment: fixed;
  background-image: linear-gradient(46deg, rgba(52, 133, 236, 1) 13%, rgba(170, 248, 219, 1) 86%);
  background-clip: border-box;
  background-origin: padding-box;
  background-size:auto;
}
[data-bs-theme=dark] .icf-bg {
  /* background-image:radial-gradient(rgba(255, 229, 229, 0.1), rgba(255, 224, 218, 0.1) 25%, rgba(215, 255, 137, 0.2) 100%)!important; */
  background-image: linear-gradient(46deg, rgba(52, 133, 236, .1) 13%, rgba(170, 248, 219, .1) 86%)!important;
}
/* the footer  */
 .footer {
  /* background-color: rgb(46, 42, 57); */
  /* color: #FFF; */
  /* color: rgba(46,42,57, 1)!important; */
  border-top: 1px solid #ccc;
}
.footer a {
  /* color: rgba(215, 255, 137, 0.7);
  text-decoration-color: rgba(215, 255, 137, 0.5); */
  /* color: rgba(46,42,57, 0.7); */
  /* text-decoration-color: rgba(46,42,57, 0.5); */
}
.footer a:hover {
  /* color: rgba(215, 255, 137, 1);
  text-decoration-color: rgba(215, 255, 137, 0.8); */
  /* color: rgba(46,42,57, 1); */
  /* text-decoration-color: rgba(46,42,57, 0.8); */
}

.callout {
    --bs-link-color-rgb: var(--bd-callout-link);
    --bs-code-color: var(--bd-callout-code-color);
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-tertiary-bg));
    /* border-left: 0.45rem solid var(--bd-callout-border, rgb(70, 60, 90))!important; */
    border-left: 0.45rem solid var(--bd-callout-border, rgb(52, 133, 236))!important;
}

.callout h4 {
    margin-bottom: .25rem
}

.callout>:last-child {
    margin-bottom: 0
}

.callout+.callout {
    margin-top: -.25rem
}

.callout .highlight {
    background-color: rgba(0,0,0,0.05)
}

.callout-primary {
  --bd-callout-color: var(--bs-primary-text-emphasis);
  --bd-callout-bg: var(--bs-primary-bg-subtle);
  --bd-callout-border: var(--bs-primary-border-subtle)
}

.callout-success {
    --bd-callout-color: var(--bs-success-text-emphasis);
    --bd-callout-bg: var(--bs-success-bg-subtle);
    --bd-callout-border: var(--bs-success-border-subtle)
}

.callout-info {
    --bd-callout-color: var(--bs-info-text-emphasis);
    --bd-callout-bg: var(--bs-info-bg-subtle);
    --bd-callout-border: var(--bs-info-border-subtle)
}

.callout-warning {
    --bd-callout-color: var(--bs-warning-text-emphasis);
    --bd-callout-bg: var(--bs-warning-bg-subtle);
    --bd-callout-border: var(--bs-warning-border-subtle)
}

.callout-danger {
    --bd-callout-color: var(--bs-danger-text-emphasis);
    --bd-callout-bg: var(--bs-danger-bg-subtle);
    --bd-callout-border: var(--bs-danger-border-subtle)
}

/* scrolling tables  */
.table-scrollable {
  max-height: 180px;
  overflow-y: auto;
}
.table-scrollable th {
  background-color: var(--bs-tertiary-bg);
}
.table-scrollable::-webkit-scrollbar {
  width: 8px;
}
.table-scrollable::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 4px rgba(104, 140, 240, 0.7); */
  box-shadow: inset 0 0 3px rgba(70, 60, 90, 0.7);
  background-color: var(--bs-secondary-bg);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.table-scrollable::-webkit-scrollbar-thumb {
  background-color: rgb(70, 60, 90);
  /* background-color: var(--bs-gray-700); */
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.form-check-input:checked {
  background-color: rgb(70, 60, 90);
  border-color: rgb(70, 60, 90);
}
/* clickable rows  */
.clickable {
  position: relative;
}
.clickable td {
  text-transform: lowercase;
}
.clickable td:first-letter {
  text-transform: uppercase;
}
.clickable.expired,
.clickable.expired a,
.clickable.pending,
.clickable.pending a {
  opacity: 0.3;
}
.clickable.paid td {
  opacity: 0.5;
  color: var(--bs-success-text-emphasis);

}
.clickable.scheduled td {
  font-weight: bold;
  color: var(--bs-primary-text-emphasis);
  /* background-color: var(--bs-primary-bg-subtle) !important; */
}
.clickable.paid td:last-child:after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  color: green;
  font-weight: 900;
  font-size: 1.2rem;
  right: 10px;
  top: 0;
  content: "\f058";
}
.clickable.pending td:last-child:after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  /* color:green; 
  font-weight: 900;*/
  font-size: 1.2rem;
  right: 10px;
  top: 0;
  content: "\f017";
}
.clickable.scheduled td:last-child:after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1.2rem;
  right: 10px;
  top: 0;
  content: "\f017";
}

/* h4 span,
h5 span {
  float: right;
  opacity: 0.5;
} */
.pastDue {
  font-weight: bold;
  color: #FF0000;
}
.dueToday,
.dueTomorrow {
  font-weight: bold;
  color: green;
}
.cancelled {
  color: #999;
  text-decoration: line-through;
}
.table-sm {
  font-size: .85rem;
}
.total {
  border-top: 1px solid #666;
  font-weight: bold;
}

.total span {
  font-size: .85rem;
  font-weight: normal;
}

/* .accordion-button:not(.collapsed) {
  font-weight: bold;
  background-color: var(--bs-tertiary-bg);
} */

.accordion-button {
  /* border-color:#007937; */

}
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  /* color: var(--bs-success-text-emphasis); */
  /* background-color: var(--bs-accordion-active-bg); */
  /* background-color: var(--bs-light); */
  /* background-color: rgba(215, 255, 137, 0.25); */
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
  box-shadow: unset;
}
.form-control:focus,
.accordion-button:focus {
  /* z-index: 3; */
  /* border-color: #007937; */
  outline: 0;

  box-shadow: unset;
}

label.btn h4 {
  margin-bottom: 0;
  text-decoration: underline;
}

.pmType {
  /* color:#007937; */
  font-size: 1.4rem;
}

#frmSubmitPayment .form-check {
  padding-left: 12px;
}

/* payment buttons  */
.btn-check:checked+.btn-primary {
  color: rgba(215, 255, 137, 1);

}
.btn-check:not(:checked)+.btn-primary {
  /* background:none; */
  color: rgba(215, 255, 137, 0.3);
}
input#paymentAmount {
  /* border:none;
  background:none;
  border-radius: 0;
  border-bottom:1px solid var(--bs-gray-300);
  color: rgba(215, 255, 137, 1);
  padding: 0px 4px; */
}
input#paymentAmount:focus {
  /* border-color: rgba(229, 103, 23, 0.8); */
  /* background-image: linear-gradient(rgba(255, 255, 255, .2),rgba(255, 255, 255, 0.0)); */
  box-shadow:  0 0 8px rgba(0, 200, 0, 0.0);
  outline: 0 none;
}
.card .btn-close {
  padding:.85rem!important;
}

/* Keep modal header image size in check */
.modal-header img {
  max-height: 32px;
}
/* fix close button positioning in modal-header */
/* .modal-header .btn-close {
  position:relative;
  top:-.5rem;
} */
/* light/dark mode toggle */
.navbar .dropdown-toggle:focus:not(:focus-visible) {
  outline: 0
}

.navbar .dropdown-menu {
  --bs-dropdown-min-width: 12rem;
  --bs-dropdown-padding-x: .25rem;
  --bs-dropdown-padding-y: .25rem;
  /* --bs-dropdown-link-hover-bg: rgba(70, 60, 90, .1); */
  /* --bs-dropdown-link-active-bg: rgba(70, 60, 90, 1); */
  /* --bs-dropdown-link-active-color: var(--bs-primary-text-emphasis); */
  --bs-dropdown-font-size: .875rem;
  font-size: .875rem;
  border-radius: .5rem;
  box-shadow: var(--bs-box-shadow)
}
[data-bs-theme="dark"] .navbar .dropdown-menu  {
  /* --bs-dropdown-link-hover-bg: rgba(70, 60, 90, .2); */
  /* --bs-dropdown-link-active-bg: rgba(70, 60, 90, 1); */
}
.navbar .dropdown-menu li+li {
  margin-top: .125rem
}

.navbar .dropdown-menu .dropdown-item {
  border-radius: .25rem
}

.navbar .dropdown-menu .dropdown-item:active .bi {
  color: inherit !important
}

.navbar .dropdown-menu .active {
  font-weight: 600
}

.navbar .dropdown-menu .active .bi {
  display: block !important
}

.navbar .dropdown-menu-end {
  --bs-dropdown-min-width: 8rem
}

/* Dropzone and file upload stuff */
.upload_dropZone {
  position: relative;
  background-color: var(--bs-secondary-bg-subtle);
  outline: 2px dashed rgb(70, 60, 90);
  outline-offset: -12px;
  transition:
  outline-offset 0.2s ease-out,
  outline-color 0.3s ease-in-out,
  background-color 0.2s ease-out;
  }
  .upload_dropZone.highlight {
  outline-offset: -4px;
  outline-color: rgba(120, 100, 150, 1);
  /* background-color: var(--colorPrimaryEighth, #c8dadf); */
  background-color: var(--bs-primary-bg-subtle);
  }
  .upload_icon {
      color: rgba(120, 100, 150, 1);
      font-size: 2.0rem;
  }
  .upload-toggle {
    right:-.3rem;
    top:-.5rem;
    opacity: .65;
    transition:all .3s ease;
}
.upload-toggle:hover {
    opacity: 1;
    cursor: pointer;
}
/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition:all .3s ease;
  background-color: var(--bd-callout-bg, var(--bs-tertiary-bg));
}

/* When you mouse over the container, fade in the overlay icon*/
.id-card:hover .overlay {
  opacity: .95;
}
  .upload_img {
  width: calc(33.333% - (2rem / 3));
  object-fit: contain;
  }
  .upload_pdf {
      width: calc(33.333% - 10px); /* Ensure the PDF div matches the width of image thumbnails */
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .upload_pdf canvas {
      width: 100%; /* Ensure the canvas inside the PDF div fits its container */
  }
  .upload_dropZone.is-uploading > *:not(.upload_progress_panel) {
    visibility: hidden;
    pointer-events: none;
  }
  .upload_progress_panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: var(--bs-secondary-bg-subtle);
  }
  .upload_progress_spinner {
    color: rgba(120, 100, 150, 1);
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
  }
  .upload_progress_bar {
    width: min(100%, 220px);
    height: 0.65rem;
  }
  .upload_progress_label {
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
  .upload_progress_detail {
    margin-top: 0.5rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #photoid {
    width:100%;  
    max-width: 225px;
    height:auto;
  }
  .cropper-container {
      width:100%!important;
  }

  /* Toast styles... */
    .upload-toaster {
      width: 350px; 
      position: fixed;
      bottom: 20%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5001;
      }
  .upload-toast {
      box-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
      margin-bottom:5rem;
      font-weight: bold;
      transform: translateY(100%);
      opacity: 0;
      transition: transform 250ms ease-out, opacity 250ms ease-in-out;
  }
  
  .upload-toast.show {
      transform: translateY(0);
      opacity: 1;
  }
  
  .upload-toast.hide {
      transform: translateY(100%);
      opacity: 0;
      transition: transform 250ms ease-in, opacity 250ms ease-out;
  }