.bg-opacity-10 {
  --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
  --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
  --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
  --bs-bg-opacity: 1;
}

body {
  --app-color-note: 125, 125, 125;
  --app-color-treatment-plan: 123, 11, 106;
  --app-color-documentation: 19, 28, 154;
  --app-color-primary: 25, 130, 196;
  --app-color-success: 138, 201, 38;
}

.btn-app {
    --bs-bg-opacity: 0.7;
    background-color: rgba(var(--bg-color), var(--bs-bg-opacity, 1)) !important;
    color: white;
}

.btn-app-active {
    --bs-bg-opacity: 1.0;
    background-color: rgba(var(--bg-color), var(--bs-bg-opacity, 1)) !important;
    color: white;
}

.btn-app:hover {
  --bs-bg-opacity: 0.9;
  background-color: rgba(var(--bg-color), var(--bs-bg-opacity, 1)) !important;
  color: white;
}

.bg-app-light {
    background-color: rgb(230, 230, 230);
}

/* NOTE */
.btn-app-note {
  --bg-color: var(--app-color-note);
}

.text-app-note {
  color: rgba(var(--app-color-note), var(--bs-text-opacity, 1)) !important;
}

.bg-app-note {
    background-color: rgb(181, 181, 181);
}

/* TREATMENT PLAN */
.btn-app-treatment-plan {
  --bg-color: var(--app-color-treatment-plan);
}

.text-app-treatment-plan {
  color: rgba(var(--app-color-treatment-plan), var(--bs-text-opacity, 1)) !important;
}

.bg-app-treatment-plan {
    background-color: rgba(var(--app-color-treatment-plan), var(--bs-bg-opacity, 1)) !important;
}

/* DOCUMENTATION */
.btn-app-documentation {
  --bg-color: var(--app-color-documentation);
}

.text-app-documentation {
  color: rgba(var(--app-color-documentation), var(--bs-text-opacity, 1)) !important;
}

.bg-app-documentation {
    background-color: rgba(var(--app-color-documentation), var(--bs-bg-opacity, 1)) !important;
}

/* PRIMARY */
.btn-app-primary {
      --bs-bg-opacity: 0.75;
  --bg-color: var(--app-color-primary);
}

.text-app-primary {
  color: rgba(var(--app-color-primary), var(--bs-text-opacity, 1)) !important;
}

.bg-app-primary {
    background-color: rgba(var(--app-color-primary), var(--bs-bg-opacity, 1)) !important;
}

/* SUCCESS */
.btn-app-success {
      --bs-bg-opacity: 0.75;
  --bg-color: var(--app-color-success);
}

.text-app-success {
  color: rgba(var(--app-color-success), var(--bs-text-opacity, 1)) !important;
}

.bg-app-success {
    background-color: rgba(var(--app-color-success), var(--bs-bg-opacity, 1)) !important;
}


.preferences-modal-nav .nav-link.active {
  background-color: #f4f8fd; /* light background to make it pop */
  font-weight: 600;
  border-radius: 10px 10px 0 0;
  font-size: 18px;
}

.fade {
transition: none !important;
}

.app-nav-bg {
    background: #fffef9;
}

.app-page-bg {
    background: #FFFCEE;
}

.app-box-bg-dark {
    background: rgb(157, 157, 157);
}

.app-box-bg-light {
    background: rgb(240, 240, 240);
}

.app-box-bg-secondary-light {
    background: rgb(232, 232, 232);
}


:root {
  --app-box-border-color: #6d6d6d; /* primary dark border */
  --app-box-secondary-border-color: #d7d7d7; /* lighter gray for secondary borders */
  --app-box-border-radius: .5rem; /* shared corner radius */
  --app-box-border-thickness: 1px; /* primary border thickness */
  --app-box-secondary-border-thickness: 1px; /* secondary border thickness */
}

/* Primary borders */
.app-box-top {
  border-top: var(--app-box-border-thickness) solid var(--app-box-border-color);
  border-right: var(--app-box-border-thickness) solid var(--app-box-border-color);
  border-left: var(--app-box-border-thickness) solid var(--app-box-border-color);
  border-top-left-radius: var(--app-box-border-radius) !important;
  border-top-right-radius: var(--app-box-border-radius) !important;
}

.app-box-bottom {
  border-bottom: var(--app-box-border-thickness) solid var(--app-box-border-color);
  border-right: var(--app-box-border-thickness) solid var(--app-box-border-color);
  border-left: var(--app-box-border-thickness) solid var(--app-box-border-color);
  border-bottom-left-radius: var(--app-box-border-radius) !important;
  border-bottom-right-radius: var(--app-box-border-radius) !important;
}

.app-box-sides {
  border-right: var(--app-box-border-thickness) solid var(--app-box-border-color);
  border-left: var(--app-box-border-thickness) solid var(--app-box-border-color);
}

/* Secondary (lighter, thinner) borders */
.app-box-secondary-top {
  border-top: var(--app-box-secondary-border-thickness) solid var(--app-box-secondary-border-color);
  border-right: var(--app-box-secondary-border-thickness) solid var(--app-box-secondary-border-color);
  border-left: var(--app-box-secondary-border-thickness) solid var(--app-box-secondary-border-color);
  border-top-left-radius: var(--app-box-border-radius) !important;
  border-top-right-radius: var(--app-box-border-radius) !important;
}

.app-box-secondary-bottom {
  border-bottom: var(--app-box-secondary-border-thickness) solid var(--app-box-secondary-border-color);
  border-right: var(--app-box-secondary-border-thickness) solid var(--app-box-secondary-border-color);
  border-left: var(--app-box-secondary-border-thickness) solid var(--app-box-secondary-border-color);
  border-bottom-left-radius: var(--app-box-border-radius) !important;
  border-bottom-right-radius: var(--app-box-border-radius) !important;
}

.app-box-secondary-sides {
  border-right: var(--app-box-secondary-border-thickness) solid var(--app-box-secondary-border-color);
  border-left: var(--app-box-secondary-border-thickness) solid var(--app-box-secondary-border-color);
}

.app-btn-sm {
    border: 1px solid rgba(128, 128, 128, 0.62);;
    border-radius: .25rem;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.631);
    color: rgb(70, 70, 70);
    font-size: 0.9rem;
    text-decoration: none;
}

.app-btn-sm:hover {
    border-color: black;
    color: black;
    background: rgb(186, 186, 186);
}

.app-box-purple {
    background: rgb(237, 222, 247) !important;
    border-color: rgba(100, 16, 156, 0.78) !important;
    color: black;
}

.app-btn-purple {
    background: rgb(127, 58, 173) !important;
    color: white !important;
}

.app-btn-purple:hover {
        background: rgb(86, 33, 121) !important;
    border-color: rgb(34, 3, 55) !important;
}

.chooser-option .arrow {
    background: rgba(217, 217, 217, 0.516) !important;
}

.chooser-option:hover {
    border: 1px solid black !important;
    color: black !important;
}

.chooser-option:hover h4 {
    text-decoration: underline;
}

.chooser-option:hover .arrow {
    background: rgb(111, 51, 150) !important;
    border-color: black !important;
}

.chooser-button {
    background: rgb(175, 113, 215) !important;
}

.chooser-button:hover {
    background: rgb(111, 51, 150) !important;
}

.chooser-option:hover .arrow a {
    color: white !important;
}

.chooser-header-bg {
    background: rgb(111, 51, 150) !important;
    color: white !important;
}

.chooser-section-header {
    font-weight: bold;
    font-size: 24px;
}

.chooser-option-new-template {
    border-style: dashed !important;
    border-color: gray !important;
}

.app-btn-lg {
    border: 1px solid black !important;
    border-radius: .25rem !important;
    padding: 5px 20px !important;
}

.btn-primary.app-btn-lg {
}

.app-social-button {
    padding: 3px 6px !important;
    background: rgba(255, 255, 255, 0.506);
    color: black !important;
    border-radius: 0.5rem !important;
    border: 2px solid black;
}

.app-social-button:hover {
    color: white !important;
    background: black !important;
    border: 2px solid rgba(255, 255, 255, 0.702);
}

.footer-link-button {
    padding: 3px 8px !important;
    color: rgba(255, 255, 255, 0.615);
    border: none;
    border-bottom: 2px solid black;
    border-radius: 0;
}

.footer-link-button:hover {
    color: white !important;
    background: black !important;
    border-color: rgba(255, 255, 255, 0.575);
}

.footer-btn-lg {
    color: white;
    background: rgb(74, 74, 74);
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.796);
    white-space: nowrap;
}

.footer-btn-lg:hover {
    background: black;
}

.footer-btn-trial {
    background: rgba(0, 153, 0, 0.611);
}

.footer-btn-chooser {
    background: rgba(86, 33, 121, 0.661);
}

.autoexpand {
  overflow: hidden;
  resize: none;
  transition: height 0.1s ease-out;
}