@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-min.css";
@import url("https://cdn.notiphy.me/notiphy.min.css");
/* Global overrides */

:root {
  --ect-primary-rgb: 8, 66, 152;
  --ect-primary-active-rgb: 5, 44, 101;
}
/* main structure  */
* {
  box-sizing: border-box;
}

html,body {
  height: 100%;
}
body {
  /* background-color: #084298; */
  background-color: var(--bs-tertiary-bg);
}
/* bootstrap icons  */
.bi {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentcolor;
}
/* set our own primary button color  */
 .btn-primary, .text-bg-primary {
  background-color: rgb(var(--ect-primary-rgb));
  border-color: rgb(var(--ect-primary-rgb));
}
.btn-outline-primary {
  color: var(--bs-primary-text-emphasis);
  border-color: rgb(var(--ect-primary-rgb));
}
.btn-primary:hover, .btn-outline-primary:hover {
  background-color: rgb(var(--ect-primary-active-rgb))!important;
  border-color: rgb(var(--ect-primary-active-rgb))!important;
}
.btn-primary:focus {
  background-color: rgb(var(--ect-primary-active-rgb))!important;
  border-color: rgb(var(--ect-primary-active-rgb))!important;
  box-shadow: 0 0 0 0.25rem rgba(var(--ect-primary-active-rgb),.2)!important;
}
.btn-primary:active, .btn-check:checked+.btn-primary {
  background-color: rgb(var(--ect-primary-active-rgb))!important;
  border-color: rgb(var(--ect-primary-active-rgb))!important;
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: rgb(var(--ect-primary-rgb))!important;
  border-color: rgb(var(--ect-primary-rgb))!important;
  opacity: 0.2!important;
}
/* Copy/paste button */
.copy-button {
  color: var(--bs-secondary);
  position: relative ;
  cursor: pointer;
}
/* logo  */
.logo {
  margin-bottom: 0;
}
.logo img {
  max-width: 240px;
}
.logo.tagline {
  font-size:  .8rem;
}
.modal-header img {
  max-height: 40px;
}
/* page wrapper - keeps footer down  */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* the footer  */
/* .footer {
  background-color: #444;
  color: #FFF;
}
.footer a {
  color: #CCC;
  text-decoration: none;
}
.footer a:hover {
  color: #FFF;
  border-bottom: 2px solid;
}
.disclosure {
  font-size: .8rem;
}
.footer .disclosure {
  font-size:.6rem;
} */
.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, var(--bs-gray-700))!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::-webkit-scrollbar {
  width: 8px;
}
.table-scrollable::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(104, 140, 240, 0.3);
  border-radius: 6px;
}
.table-scrollable::-webkit-scrollbar-thumb {
  background-color: rgb(75, 79, 82);
  border-radius: 6px;
}
/* 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);
  /* background-color: var(--bs-success-bg-subtle) !important; */

}
.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;
}

.form-control:focus,
.accordion-button:focus {
  outline: 0;
  box-shadow: unset;
}

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

.pmType {
  font-size: 1.4rem;
}
#frmSubmitPayment .form-check {
  padding-left: 12px;
}
.card .btn-close {
  padding:.85rem!important;
}
/* 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(var(--ect-primary-rgb),.1);
  --bs-dropdown-link-active-bg: rgba(var(--ect-primary-rgb),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(var(--ect-primary-rgb), .2);
  --bs-dropdown-link-active-bg: rgba(var(--ect-primary-rgb),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 {
  background-color: var(--bs-secondary-bg-subtle);
  outline: 2px dashed rgba(104, 140, 240, 0.3);
  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(104, 140, 240, 01);
  /* background-color: var(--colorPrimaryEighth, #c8dadf); */
  background-color: var(--bs-primary-bg-subtle);
  }
  .upload_icon {
      color: rgba(104, 140, 240, 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 */
  }
  #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;
  }

/* Make cell-phone icon same width as landline phone icon. */
.fa-mobile-alt {
  width:14px;
}