:root{
    --red: #d11f3c;
    --blue: #007bff;
    --green: #31e201;
    --primary-color: #63c2cd;

    --aqua: #63c2cd;
    --aqua-light: #CAE6EA;
    --bs-accordion-active-bg: var(--aqua-hover-light);
    --dark-gray: #646464;
    --peach: #d89875;
    --yellow: #f7ba00;
    --dark-yellow: #e0a800;
    --brand-red: #d92738;
    --navy-blue: #2c3e50;

    --dark: #0C0C0C;
    --cta-color-inactive: #6474a8;

    --color-mute: #f3f4f6;
    --color-mute-border: #9ca3af;
    --color-mute-text: #4b5563;
    --color-mute-info-border: #e5e4fa;
    --color-mute-info-text: #939396;
    --color-action: #f0f6fe;
    --color-action-border: #c4dbfb;
    --color-action-text: #2343a8;
    --color-action-info-text: #2d53d0;
    --color-danger-bg: #FCE9EF;
    --color-danger-text: #E22560;
    --color-danger-border: #E22560;
    --color-warning-border: #fef08a;
    --color-warning: #fefce8;
    --color-warning-text: #ad4d0e;
    --color-warning-info-text: #ff6443;
    --color-success-border: #33e976;
    --color-success: #dcfce7;
    --color-success-text: #3c654b;
    --color-success-info-text: #c9f4d4;
    --color-alert: #ffedd5;
    --color-alert-border: #f97316;
    --color-alert-text: #9a3412;
    --color-gray: #7a7f80;




    --card-border-color: #e2e8f0;
    --wrapper-color: #F7F9FC;
    --color-gray: #78748b;
    --cta-container-bg-color: #f1f5f9;
    --wrapper-sibling-color: #f6f9fc;

    /* Dark UI palette (dashboard, dark tables, dark cards) */
    --dark-ui-bg: #212529;
    --dark-ui-bg-alt: #2c3034;
    --dark-ui-bg-hover: #373c41;
}

/* Bootstrap nav-link override */
.nav-link {
    color: var(--dark-gray);
}
.nav-link:hover,
.nav-link:focus {
    color: var(--dark);
}
.nav-link.active {
    color: var(--dark);
}

/* Bootstrap text-primary override */
.text-primary {
    color: var(--link-color, #2c3e50) !important;
}

/* Bootstrap btn-link override */
.btn-link {
    color: var(--aqua);
}
.btn-link:hover,
.btn-link:focus {
    color: var(--aqua-dark);
}

/* Bootstrap anchor link override */
a {
    color: var(--navy-blue);
}
a:hover,
a:focus {
    color: var(--aqua);
}

/* Bootstrap dropdown-item state overrides */
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: var(--aqua-hover-light);
}

.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--aqua-hover-light);
    color: var(--bs-dropdown-link-color);
}

/* Activity modal link overrides */
.activity-associated-records,
.activity-create-task-row .dropdown-toggle {
    color: var(--aqua);
}

/* Summernote font size dropdown scroll */
.note-dropdown-fontsize {
    max-height: 200px;
    overflow-y: auto;
}

/* Brand Name Typography Style */
.brandkit-brand-name h3 {
    font-family: 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;              /* Regular weight for clean elegance */
    text-transform: uppercase;     /* Always all caps */
    letter-spacing: 0.1em;         /* 10% tracking for signature spacing */
    font-size: 4rem;               /* Scales well with hero size */
    color: #ffffff;                /* Default white for contrast */
    margin-bottom: 10px;
    line-height: 1.1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
.brand-name-dark h3 { color: #ffffff; }
.brand-name-light h3 { color: #63c2cd; }




 /* Additional styles for the menu */
 html,
 .logo-container {
     display: flex;
     margin-right: 10px;
     position: relative;
     display: flex;
     align-items: center;
 }

 body {
     overflow-x: hidden;
     width: 100vw;
     min-height: 100vh;
     margin: 0;
     padding-bottom: 102px;
 }








.footer {
    width: 100vw;
    height: 100px;

}
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f2f2f2;
    color: #333;
    padding: 10px;
    font-size: 12px;
}

  
.footer-content {
max-width: 100%;
margin-left: 10px;
text-align: left; 
padding-left: 0;
}

.footer-menu, .footer-info {
text-align: left;
}

.footer-links {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}

.footer-links li {
margin-right: 20px;
}

.divider-line {
margin-top: 20px;
margin-bottom: 20px;
}

@media (min-width: 1025px) {
.footer-content {
    margin-left: 10px;
}
}

@media (max-width: 600px) {
    .footer-content {
    margin-left: 10px;
}
}
.footer-links {
    flex-direction: column;
    align-items: flex-start;
}

.footer-links li {
    margin: 5px 0;
}





 .menu {
     position: fixed;
     top: 0;
     left: 0;
     background-color: #ffffff;
     width: 100%;
     z-index: 999;
     padding: 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: background-color 0.2s ease-in-out;
 }

 .menu.open {
     background-color: #f6f6f6;
 }

 .menu .menu-button {
     background: none;
     border: none;
     display: flex;
     align-items: center;
     cursor: pointer;
     font-size: 15px;
     transition: opacity .4s cubic-bezier(.694,0,.335,1);
 }

 .menu .menu-button svg {
     fill: currentColor;
     height: 22px;
     width: 22px;
     margin-right: 5px;
     transition: width .2s cubic-bezier(.32,.94,.6,1);
 }

 .menu .menu-button:hover svg {
     width: 0;
 }

 .menu .menu-button:hover svg .BackArrow-stem-14hfFjpArmtFsvnQYhsP {
     width: 15px;
 }

 .menu .menu-button .menu-text {
     font-size: 12px;
     font-weight: 500;
     text-transform: uppercase;
     margin-left: 5px;
     color: black;
 }

 .menu .menu-items {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     background-color: #f6f6f6;
     width: 100%;
     padding: 10px;
     max-height: calc(100vh - 50px);
     overflow-y: auto;
     transform: translateX(-100%);
     transition: transform 0.3s ease-in-out;
 }

 .menu.open .menu-items {
     display: block;
     transform: translateX(0);
     max-height: calc(100vh - 50px);
     overflow-y: auto;
 }

 .menu .menu-items a {
     display: block;
     margin-bottom: 10px;
     text-decoration: none;
     color: #313131;
 }

 .menu .menu-items p {
     margin: 0;
 }

 .menu .close-icon {
     display: none;
     cursor: pointer;
     margin-left: 10px;
     align-self: flex-start;
     position: absolute;
     top: 10px;
     right: 10px;
 }

 .menu.open .close-icon {
     display: block;
 }

 .menu .close-icon svg {
     fill: currentColor;
     height: 20px;
     width: 20px;
 }

 /* REMOVED - was overriding Bootstrap's .container globally
 .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px;
 }
 */

 .logo {
     height: 30px;
     width: auto;
     margin-right: 10px;
 }



.border-50 { border-radius: 50% }
.square-15 { width: 15px; height: 15px; }
.square-30 { width: 30px; height: 30px; }
.square-40 { width: 40px; height: 40px; }
.font-weight-bold { font-weight: 600 !important; }

.font-60 { font-size: 60px !important; }
.font-50 { font-size: 50px !important; }
.font-40 { font-size: 40px !important; }
.font-30 { font-size: 30px !important; }
.font-25 { font-size: 25px !important; }
.font-22 { font-size: 22px !important; }
.font-16 { font-size: 16px !important; }
.font-15 { font-size: 15px !important; }
.font-14 { font-size: 14px !important; }
.font-13 { font-size: 13px !important; }
.font-12 {font-size: 12px !important;}
.font-11 {font-size: 11px !important;}
.font-10 {font-size: 10px !important;}
.font-18 { font-size: 18px !important; }
.font-17 { font-size: 17px !important; }
.font-20 { font-size: 20px !important; }

.w-10px { width: 10px; }
.w-20px { width: 20px; }
.w-25px { width: 25px; }
.w-30px { width: 30px; }
.w-50px { width: 50px; }
.w-60px { width: 60px; }
.w-80px { width: 80px; }
.w-100px { width: 100px; }
.w-150px { width: 150px; }
.w-200px { width: 200px; }
.w-250px { width: 250px; }
.w-300px { width: 300px; }
.w-350px { width: 350px; }
.w-400px { width: 400px; }
.h-10px { height: 10px; }
.h-20px { height: 20px; }
.h-25px { height: 25px; }
.h-30px { height: 30px; }
.h-45px { height: 45px; }
.h-50px { height: 50px; }
.h-60px { height: 60px; }
.h-75px { height: 75px; }
.h-80px { height: 80px; }
.h-100px { height: 100px; }
.h-150px { height: 150px; }
.h-200px { height: 200px; }
.h-250px { height: 250px; }
.h-300px { height: 300px; }
.h-350px { height: 350px; }
.h-400px { height: 400px; }
.h-500px { height: 500px; }
.h-600px { height: 600px; }
.h-700px { height: 700px; }
.mxw-20px { max-width: 20px; } .mnw-20px { min-width: 20px !important; }
.mxw-25px { max-width: 25px; } .mnw-25px { min-width: 25px !important; }
.mxw-40px { max-width: 40px; } .mnw-40px { min-width: 40px; }
.mxw-200px { max-width: 200px; } .mnw-200px { min-width: 200px; }
.mxw-300px { max-width: 300px; } .mnw-300px { min-width: 300px; }
.mxw-400px { max-width: 400px; } .mnw-400px { min-width: 400px; }
.mxw-500px { max-width: 500px; } .mnw-500px { min-width: 500px; }
.mxw-600px { max-width: 600px; } .mnw-600px { min-width: 600px; }
.mxw-150px { max-width: 150px; } .mnw-150px { min-width: 150px; }
.mxw-100px { max-width: 100px; } .mnw-100px { min-width: 100px; }
.mxw-75px { max-width: 75px; } .mnw-75px { min-width: 75px; }
.mxw-50px { max-width: 50px; } .mnw-50px { min-width: 50px; }
.mxw-100 { max-width: 100%; } .mnw-100 { min-width: 100%; }

.mxh-200px { max-height: 200px; } .mnh-200px { min-height: 200px; }
.mxh-250px { max-height: 250px; } .mnh-250px { min-height: 250px; }
.mxh-300px { max-height: 300px; } .mnh-300px { min-height: 300px; }
.mxh-400px { max-height: 400px; } .mnh-400px { min-height: 400px; }
.mxh-450px { max-height: 450px; } .mnh-450px { min-height: 450px; }
.mxh-500px { max-height: 500px; } .mnh-500px { min-height: 500px; }
.mxh-600px { max-height: 600px; } .mnh-600px { min-height: 600px; }
.mxh-700px { max-height: 700px; } .mnh-700px { min-height: 700px; }
.mxh-800px { max-height: 800px; } .mnh-800px { min-height: 800px; }
.mxh-100px { max-height: 100px; } .mnh-100px { min-height: 100px; }
.mxh-75px { max-height: 75px; } .mnh-75px { min-height: 75px; }
.mxh-50px { max-height: 50px; } .mnh-50px { min-height: 50px; }
.mxh-100 { max-height: 100%; } .mnh-100{ min-height: 100%; }

.mxh-100px { max-height: 100px; } .mnh-100px { min-height: 100px; }
.mxh-150px { max-height: 150px; } .mnh-150px { min-height: 150px; }
.mxh-200px { max-height: 200px; } .mnh-200px { min-height: 200px; }
.mxh-300px { max-height: 300px; } .mnh-300px { min-height: 300px; }
.mxh-100px { max-height: 100px; } .mnh-100px { min-height: 100px; }
.mxh-75px { max-height: 75px; } .mnh-75px { min-height: 75px; }
.mxh-50px { max-height: 50px; } .mnh-50px { min-height: 50px; }

.lh-2 {
    line-height: 2;
}

.flex-1 > * { flex: 1; }
.flex-1-current { flex: 1; }

.text-left {text-align: left !important;}

.overflow-x-hidden {overflow-x:hidden}

.noSelect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.flex-row {display: flex;}
.flex-col {display: flex; flex-direction: column;}
.flex-row-center {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}
.flex-row-between {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.flex-row-around {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.flex-row-start {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.flex-row-end {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.flex-col-around {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.flex-col-center {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}

.flex-col-between {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.flex-col-end {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.flex-col-start {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.flex-row-center.wrap,.flex-row-between.wrap,.flex-row-around.wrap,.flex-row-start.wrap,.flex-row-end.wrap,
.flex-col-around.wrap,.flex-col-between.wrap,.flex-col-end.wrap,.flex-col-start.wrap {
    flex-wrap: wrap;
}
.flex-align-center { align-items: center; }
.flex-align-start { align-items: start; }
.flex-align-end { align-items: end; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

 
.border-bottom-mute  {
    border-bottom: 1px solid var(--color-mute-info-border);
}
.card-border  {
    border: 1px solid var(--card-border-color);
}
.color-hover-primary:hover {
    color: var(--bs-primary);
}
.hover-bg-light-aqua:hover {
    background: var(--aqua-light) !important;
}
.hover-color-light-aqua:hover {
    color: var(--aqua-light) !important;
}

.text-right { text-align:right; }
.text-left { text-align:left; }

.input-no-increment::-webkit-inner-spin-button,
.input-no-increment::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-no-increment{
  -moz-appearance: textfield; /* For Firefox */
  appearance: textfield; /* For modern browsers */
}


html[data-bs-theme="dark"] .color-reversed-theme { color: var(--bs-white) !important; }
html[data-bs-theme="light"] .color-reversed-theme,.color-reversed-theme { color: var(--background-color) !important; }
html[data-bs-theme="dark"] .color-theme { color: var(--background-colore) !important; }
html[data-bs-theme="light"] .color-theme,.color-theme { color: var(--bs-white) !important; }

.bg-green { background-color: var(--bs-green) !important; }
.color-white { color: var(--bs-white) !important; }
.color-mute-text { color: var(--color-mute-text) !important; }
.bg-mute-text { background: var(--color-mute-text) !important; }
.color-aqua { color: var(--aqua) !important; }
.color-aqua-light { color: var(--aqua-light) !important; }
.color-gray { color: var(--color-gray) !important; }
.color-red { color: var(--red) !important; }
.color-green { color: var(--bs-green) !important; }
.color-blue { color: var(--blue) !important; }
.color-dark { color: var(--dark) !important; }
.color-dark-grey { color: var(--dark-gray) !important; }
.bg-red { background-color: var(--red) !important; }
.bg-white { background-color: #fff !important; }

.bg-wrapper { background: var(--wrapper-color); }
.bg-cta-container { background: var(--cta-container-bg-color); }
.color-cta-inactive { color: var(--cta-color-inactive); }

.border-radius-50 { border-radius: 50% !important; }
.border-radius-20px { border-radius: 20px !important; }
.border-radius-15px { border-radius: 15px !important; }
.border-radius-10px { border-radius: 10px !important; }
.border-radius-5px {border-radius: 5px !important;}
.border-radius-none { border-radius: 0 !important; }
.border-radius-bl-br-10px { border-radius: 0 0 10px 10px !important; }
.border-radius-bl-br-20px { border-radius: 0 0 20px 20px !important; }
.border-radius-tr-br-20px { border-radius: 0 20px 20px 0 !important; }
.border-radius-tl-tr-20px { border-radius: 20px 20px 0 0 !important; }

.border-radius-tl-bl-10px { border-radius: 0 0 10px 10px !important; }

.position-fixed{position:fixed!important}

.tr-5px {top: 5px; right: 5px}
.tr-5rem {top: 5rem; right: 5rem}
.tr-20px {top: 20px; right: 20px}

.zindex99 {
    z-index: 99999;
}
.spacing {
    letter-spacing: .1rem;
}

.select2-selection__choice__display, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove, 
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected, .select2-results__option--selectable {
    color:#000 !important;
}




.form-field-v2,.element-field-v2 {
    background: var(--wrapper-color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--card-border-color);
    border-radius: .5rem;
    padding: .75rem;
    font-size: 13px;
}
input.form-field-v2::placeholder,
textarea.form-field-v2::placeholder {
    color: var(--color-gray)
}
input.form-field-v2::-webkit-input-placeholder,
textarea.form-field-v2::-webkit-input-placeholder {
    color: var(--color-gray)
}
input.form-field-v2::-moz-placeholder,
textarea.form-field-v2::-moz-placeholder {
    color: var(--color-gray)
}
input.form-field-v2:-ms-input-placeholder,
textarea.form-field-v2:-ms-input-placeholder {
    color: var(--color-gray)
}
input.form-field-v2::-ms-input-placeholder,
textarea.form-field-v2::-ms-input-placeholder {
    color: var(--color-gray)
}
input.form-field-v2:focus {
    border-color: var(--primary-cta);
}
.form-field-v2:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}




.form-select-v2 {
    display: none;
}
.form-select-v2-wrapper {
    position: relative;
    font-family: Arial, sans-serif;
    width: 200px;
    border-radius: 5px;
}
.form-select-v2-selected {
    padding: 8px;
    height: 100%;
    border: 1px solid var(--card-border-color);
    background-color: var(--wrapper-color);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.form-select-v2-options.active ~ .form-select-v2-selected,
.form-select-v2-selected.active {
    border: 1px solid var(--primary-cta) !important;
}
.form-select-v2-selected::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-gray);
    border-bottom: 2px solid var(--color-gray);
    transform: rotate(45deg); /* Rotate to point downwards */
    margin-left: 5px;
}
.form-select-v2-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--card-border-color);
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-height: 500px;
    overflow-y: auto;
    z-index: 1000;
    display: none;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.form-select-v2-options.active {
    display: block;
}
.form-select-v2-option {
    padding: 10px;
    cursor: pointer;
}

.form-select-v2-option:hover {
    background-color: var(--cta-container-bg-color);
}
.form-select-v2-option.selected {
    background-color: var(--wrapper-sibling-color);
}
.modal.show .modal-dialog.vertical-middle {
    transform: translateY(50%);
}

.pointer-event-none {
    pointer-events: none;
}

.form-select-v2-option.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
.form-select-v2-values {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.form-select-v2-chip {
    background: var(--wrapper-sibling-color);
    border: 1px solid var(--card-border-color);
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.form-select-v2-chip .remove-chip {
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
}







.text-justify {text-align:justify;}


.visibility-hidden {visibility: hidden;}
.hidden {display: none;}
.cursor-pointer {cursor: pointer;}
.hover-opacity-half:hover { opacity: .5;}
.hover-underline:hover {text-decoration: underline !important;}


[data-href] {
    cursor: pointer;
}

.togglePwdVisibilityField {
    padding-right: 40px !important;
}
.togglePwdVisibility {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.togglePwdVisibility[data-current-show=password] { color: #646464 !important; }
.togglePwdVisibility[data-current-show=text] { color: #63c2cd !important; }

.circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 1s infinite;
}

.circle.up {
    background-color: #3bd671;
}
.circle.down {
    background-color: #FF0000;
}
.circle.watch {
    background-color: #f3a806;
}
.circle.abandoned {
    background-color: #490356;
}
.circle.info {
    background-color: #fff;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}



.info-box {
    border-radius: 10px;
    border: 1px solid #999;
    padding: .75rem;
    line-height: 1.5;
}
.info-box ul {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}
.info-box ul li {
    list-style: none;
    display: inline;
    padding-left: 1rem;
}


.content-wrapper {
    margin-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
}


  .login-wrapper {
    width: 100%;
    min-height: 100%;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .login-container {
    border-radius: 5px;
    min-width: 300px;
    max-width: 650px;
    border: 1px solid #999;
    padding: .75rem 1.25rem;
    background: #fff;
  }

.login-button, #buttonDiv {
    width: 100%;
    margin-bottom: 10px;
  }
.login-button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #63C2CD;
    color: white;
  }

  #login-form input:not(.form-check-input):not([type="radio"]) {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.social-login-button {
    position: relative;
    padding: 10px 10px 10px 50px;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    background-color: #007bff;
    color: white;
  }

  .social-login-button:hover {
    background-color: #2d93ff;
  }

  #login-form .button-left-icon {
    position: absolute;
    left: 10px;
    top: 7px;
  }

  #login-form a {
    text-decoration: none;
  }




  .spinner-border.small-spinner {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
    --bs-spinner-border-width: 0.15em;
}

button[disabled] {
    background: #c1d2d4 !important;
}

.scrollable-table {
    overflow-x: auto;
}




/* Popup form styles */
.close-btn {
    position: absolute;
    top: 10px; 
    right: 10px;
    border: none;
    background-color: transparent;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.form-check-label {
    font-family: Arial, sans-serif;
    font-size: 16px;
    flex-grow: 1;
}
* {
    box-sizing: border-box;
}
#mobile {
    width: 100%;
}
#popupForm {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #63c2cdff;
    padding: 15px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    overflow: hidden;
}
#popupmobileform {
    width: calc(100% - 30px);
    border: none;
}
.pop-columns-container {
    display: flex;
    flex-direction: row;
}
.pop-column1 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.pop-column1 img {
    max-width: 340px;
    max-height: 340px;
    width: auto;
    height: auto;
}
.pop-column2 {
    flex: 1;
    margin: 15px 0 15px 15px;
}
@media (min-width: 1361px) {
    #mobile {
        max-width: 250px; /* Example max-width for larger screens */
    }
}
@media (max-width: 1360px) {
    .form-check-label {
        font-size: 14px;
        flex-grow: 1;
    }
    #popupForm {
        width: 90%;
        transform: translate(-50%, -50%);
    }
    .pop-columns-container {
        flex-direction: column;
    }
    .pop-column1, .pop-column2 {
        margin: 15px 0;
    }
    .pop-column1 img {
        max-width: 100%;
        height: auto;
    }
}
/* Even smaller font size for very small screens */
@media (max-width: 480px) {
    .form-check-label {
        flex-grow: 1;
        font-size: 12px; /* Even smaller font size for very small screens */
    }
}




/* Brow Portfolio */
@media (max-width: 767px) {
    .adplugg-ad {
      display: none;
    }
  }




  .absolute-tr-5-5 {
    position: absolute;
    right: 5px;
    top: 5px;
}




.alert-primary {
    color: #3b407f;
    background-color: #e3e5fd;
    border-color: #d8dafc; }
    .alert-primary hr {
      border-top-color: #c0c4fa; }
    .alert-primary .alert-link {
      color: #2b2e5c; }
  
.alert-secondary {
    color: #3f4654;
    background-color: #e4e7ec;
    border-color: #d9dde5; }
.alert-secondary hr {
    border-top-color: #cacfdb; }
.alert-secondary .alert-link {
    color: #292e37; }

.alert-success {
    color: #085f2e;
    background-color: #cff1de;
    border-color: #bcebd1; }
.alert-success hr {
    border-top-color: #a8e5c4; }
.alert-success .alert-link {
    color: #043017; }

.alert-info {
    color: #356d6d;
    background-color: #e0f6f6;
    border-color: #d4f2f2; }
.alert-info hr {
    border-top-color: #c0ecec; }
.alert-info .alert-link {
    color: #244b4b; }

.alert-warning {
    color: #836203;
    background-color: #fef2cd;
    border-color: #feecb9; }
.alert-warning hr {
    border-top-color: #fee5a0; }
.alert-warning .alert-link {
    color: #513d02; }

.alert-danger {
    color: #851b35;
    background-color: #ffd6e0;
    border-color: #ffc6d4; }
.alert-danger hr {
    border-top-color: #ffadc1; }
.alert-danger .alert-link {
    color: #5b1224; }

.alert-light {
    color: #7b7b7b;
    background-color: #fbfbfb;
    border-color: #fafafa; }
.alert-light hr {
    border-top-color: #ededed; }
.alert-light .alert-link {
    color: #626262; }

.alert-dark {
    color: #03060c;
    background-color: #cdced1;
    border-color: #b9bbbe; }
.alert-dark hr {
    border-top-color: #acaeb2; }
.alert-dark .alert-link {
    color: black; }

.alert-primary-muted {
    color: #5c6c7b;
    background-color: #eff5fb;
    border-color: #e9f2fa; }
.alert-primary-muted hr {
    border-top-color: #d4e6f5; }
.alert-primary-muted .alert-link {
    color: #46525e; }

.alert-info-muted {
    color: #427777;
    background-color: #e5fafa;
    border-color: #dbf8f8; }
.alert-info-muted hr {
    border-top-color: #c6f4f4; }
.alert-info-muted .alert-link {
    color: #305656; }

.alert-danger-muted {
    color: #804260;
    background-color: #fde5f1;
    border-color: #fddbeb; }
.alert-danger-muted hr {
    border-top-color: #fcc3de; }
.alert-danger-muted .alert-link {
    color: #5e3147; }



.content-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: 100%;
}
#screen-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#screen-loader .screen-loader-content, .content-loader .screen-loader-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
#screen-loader .spinner-border, .content-loader .spinner-border {
    width: 3rem;
    height: 3rem;
}
#screen-loader .loader-text, .content-loader .loader-text {
    font-size: 1.2rem;
    text-align: center;
}




.adjusted-image {
    margin-top: -10px;
}



.error-highlight {
    -webkit-box-shadow: 0px 0px 3px 3px #D92738; 
    box-shadow: 0px 0px 3px 3px #D92738;
  }

  .error-text-highlight {
    color: #D92738 !important;
  }





.form-switch {
    display: inline-block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 0;
}
.form-switch i {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 21px;
    background-color: #CECECE;
    border-radius: 20px;
    vertical-align: text-bottom;
    transition: all 0.3s linear;
}
.form-switch i::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 20px;
    background-color: transparent;
    border-radius: 20px;
    transform: translate3d(0,0, 0) scale3d(1, 1, 1);
    transition: all 0.25s linear;
}
.form-switch i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 17px;
    height: 17px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate3d(2px, 2px, 0);
    transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
    width: 17px;
    transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after { transform: translate3d(1px, 2px, 0); }
.form-switch input { display: none; }
.form-switch input:checked + i { background-color: var(--aqua); }
.form-switch input:checked + i::before { transform: translate3d(20px, 0, 0) scale3d(0, 0, 0); }
.form-switch input:checked + i::after { transform: translate3d(32px, 2px, 0); }




.hubspot-form-submit {
    background-color: var(--aqua);
    border-color: var(--aqua);
}

.hubspot-form-submit:not(.inline-submit) {
    min-width: 120px;
}

.hubspot-form.secondary-form .hubspot-form-submit {
    background-color: var(--dark-gray);
    border-color: var(--dark-gray);
    color: #fff;
}

.hubspot-form .hubspot-form-submit:hover {
    background-color: var(--aqua) !important;
    border-color: var(--aqua) !important;
    opacity: .8;
}

.hubspot-form.secondary-form .hubspot-form-submit:hover {
    background-color: var(--dark-gray) !important;
    border-color: var(--dark-gray) !important;
    opacity: .8;
}

.hubspot-form.secondary-form .form-switch input:checked + i  {
    background-color: var(--dark-gray);
}

.hubspot-form.secondary-form p  {
    color: #fff;
}


.grecaptcha-badge {
    display: none !important;
}



.clinic-report-popup {
    position: fixed !important;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: calc(100vw - 40px);
    width: 350px;
    padding: 15px;
    z-index: 1055;
    font-family: Arial, sans-serif;
  }

  .clinic-report-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
  }

  .clinic-report-popup-header .clinic-btn-close {
    font-size: 20px;
    background-color: transparent;
    border: none;
    color: #666;
    cursor: pointer;
  }

  .clinic-report-popup-header .clinic-btn-close:hover {
    color: #000;
  }

  .clinic-report-popup textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    resize: none;
    height: 100px;
    font-size: 14px;
    font-family: Arial, sans-serif;
  }

  .clinic-report-popup .char-counter {
    text-align: right;
    font-size: 12px;
    color: #666;
    margin-top: 5px;
  }

  .clinic-report-popup .screenshot-upload {
    margin: 10px 0;
  }

  .clinic-report-popup .btn-submit {
    display: block;
    width: 100%;
    background-color: #f0f4ff;
    color: #0d6efd;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
  }

  .clinic-report-popup .btn-submit:hover {
    background-color: #e0ecff;
  }

  @keyframes bg-blink {
    0%{
        background-color: transparent;
    }
    50% {
        background-color: #ccc;
    }
  }
  .bg-blink {
    animation: bg-blink 1s infinite;
  } 

  @keyframes bg-warning-blink {
    0%{
        background-color: #f44873;
    }
    50% {
        background-color: #ed003b;
    }
  }
  .bg-warning-blink {
    animation: bg-warning-blink 2s infinite;
  } 
  tr.bg-blink td, tr.bg-warning-blink td {
    background:transparent !important;
  }

  .table-striped>tbody>tr.bg-warning-blink>* {
    --bs-table-bg-type: transparent !important;
}





.clause-link {
    text-decoration: none;
}
.clause-link:hover {
    text-decoration: underline;
}
.clause-menu {
    position: absolute;
    right: 100%;
    left: auto;
    top: 100%;
    width: 450px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px;
    display: none;
}
.clause-search-container {
    margin-bottom: 10px;
}
#clauseSearch, #clauseSearchEdit {
    width: 100%;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.clause-content {
    max-height: 300px;
    overflow-y: auto;
}
.clause-item {
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.clause-item .main-text {
    color: #000;
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clause-item .sub-text {
    color: #6c757d;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.clause-item:hover {
    background: #e9ecef;
}


.note-editing-area .note-editable {
    min-height: 420px !important;
}

.note-editable > p,
.device-screen p,
.template-content p {
    margin-bottom: 0;
}

.note-editing-area .note-editable img, .custom-video-resize {
    max-width: max(min(500px,100%),80%) !important;
}

.note-editor.note-frame .dropdown-toggle::after {
    display: none !important;
}
.note-editing-area .note-editable .custom-video-resize {
    position: relative;
    display: inline-block;
}
.note-editing-area .note-editable .custom-video-resize video {
    display: block;
}
.note-editing-area .note-editable .custom-video-resize .resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--aqua);
    border: 1px solid var(--dark-gray);
    cursor: nwse-resize;
    border-radius: 50%;
}
.note-editing-area .note-editable .custom-video-resize .resize-handle.se {
    bottom: -5px;
    right: -5px;
}

br {
    clear: both;
}







.tier-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-wrap: nowrap;
    width: 100%;
    min-height: 300px;
    border: 1px solid var(--dark-gray);
    align-items: stretch;
}

.tier-rank {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .75rem;
    border-right: 1px solid var(--dark-gray);
    background-color: #fafafa;
    width: 100px;
}
.tier-rank p {
    word-break: break-all;
}
.tier-lists {
    display: flex;
    flex-direction: column;
    width: calc(100% - 101px);
}

.tier-list {
    display: flex;
    flex-direction: row;
    padding: .75rem;
    align-items: center;
    flex-wrap: nowrap;
    column-gap: .75rem;
    height: calc(100% / 3);
}
.tier-list:not(:last-child) {
    border-bottom: 1px solid var(--dark-gray);
}
.tier-list:nth-child(even) {
    background-color: #E8F3F1;
}
.tier-list:nth-child(odd) {
    background-color: #ECDED1;
}
.tier-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tier-item img {
    max-width: 100px;
    max-height: 60px;
}
.tier-item p {
   text-align: center;
   background: rgba(0, 0, 0, 0.1);
   padding: 3px 6px;
   border-radius: 6px;
   white-space: normal;
}
.tier-label {
    transform: rotate(-180deg);
    writing-mode: vertical-rl;
    font-size: 12px;
    color: var(--dark-gray)
}


.alert-danger {
    background-color: var(--red) !important;
    color: white !important;
}









.note-editable table.resizable-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

.note-editable .table-resize-wrapper {
    position: relative;
    display: inline-block;
}

.note-editable table.resizable-table td, 
.note-editable table.resizable-table th {
    position: relative;
    min-width: 50px;
    border: 1px solid #ddd;
}

.table-resize-handle {
    position: absolute;
    right: -3px;
    top: 0;
    width: 6px;
    height: 100%;
    background: transparent;
    cursor: col-resize;
    z-index: 10;
}

.table-resize-handle:hover, 
.table-resize-handle.active {
    background: #007bff;
}

.table-size-resize-handle {
    position: absolute;
    right:0;
    top: 5px;
    transform: translateY(-50%);
    width: 8px;
    height: 20px;
    background: transparent;
    cursor: ew-resize;
    z-index: 11;
}

.table-size-resize-handle:hover, 
.table-size-resize-handle.active {
    background: #007bff;
}


.note {
    margin: 1.5rem 0;
    background: var(--aqua-light);
    padding: 1rem;
    border-radius: .5rem;
}


html[data-bs-theme="dark"] .table-theme {
    --bs-table-color: #fff;
    --bs-table-bg: var(--dark-ui-bg);
    --bs-table-border-color: #4d5154;
    --bs-table-striped-bg: var(--dark-ui-bg-alt);
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: var(--dark-ui-bg-hover);
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}
html[data-bs-theme="light"] .table-theme,.table-theme {
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-color: var(--bs-emphasis-color);
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
    --bs-table-active-color: var(--bs-emphasis-color);
    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
    --bs-table-hover-color: var(--bs-emphasis-color);
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
    border-color: var(--bs-table-border-color);
}






.action-box, .action-box-lg {
    background: var(--color-action);
    border: 1px solid var(--color-action-border);
    color: var(--color-action-text);
    padding: 2px 5px;
    border-radius: .5rem;
    font-size: .675rem;
    line-height: 1rem;
}

.warning-box, .warning-box-lg {
    background: var(--color-warning);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning-text);
    padding: 2px 5px;
    border-radius: .5rem;
    font-size: .675rem;
    line-height: 1rem;
}
.success-box, .success-box-lg {
    background: var(--color-success);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-text);
    padding: 2px 5px;
    border-radius: .5rem;
    font-size: .675rem;
    line-height: 1rem;
}
.alert-box, .alert-box-lg {
    background: var(--color-alert);
    border: 1px solid var(--color-alert-border);
    color: var(--color-alert-text);
    padding: 2px 5px;
    border-radius: .5rem;
    font-size: .675rem;
    line-height: 1rem;
}
.danger-box, .danger-box-lg {
    background: var(--color-error);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    padding: 2px 5px;
    border-radius: .5rem;
    font-size: .675rem;
    line-height: 1rem;
}
.mute-box, .mute-box-lg {
    background: var(--color-mute);
    border: 1px solid var(--color-mute-border);
    color: var(--color-mute-text);
    padding: 2px 5px;
    border-radius: .5rem;
    font-size: .675rem;
    line-height: 1rem;
}
.warning-box-lg, .success-box-lg, .alert-box-lg, .danger-box-lg, .mute-box-lg, .action-box-lg {
    padding: 3px 6px;
}






.mute-info-box {
    background: var(--color-mute);
    border: 1px solid var(--color-mute-info-border);
    color: var(--color-mute-info-text) !important;
    padding: 1.5rem;
    border-radius: 10px;
    line-height: 1rem;
    display: flex;
    flex-direction: column;
}
.mute-info-box .info-title {
    color: var(--color-mute-text) !important;
    font-size: 16px;
    font-weight: 600;
}
.mute-info-box .info-content {
    color: var(--color-mute-info-text) !important;
    font-size: 14px;
    display: flex;
    flex-direction: column;
}
.mute-info-box .cta {
    color: var(--color-action-text) !important;
}

.holiday-hours-box {
    width: 100%;
}
@media (min-width: 992px) {
    .holiday-hours-box {
        width: 280px;
    }
}

/* Footer mobile accordion */
@media (max-width: 767.98px) {
    .footer-nav-section {
        border-bottom: 1px solid var(--color-mute-info-border);
        padding-bottom: 0.5rem;
    }
    .footer-nav-section .collapse {
        transition: none;
    }
    .footer-nav-section .collapsing {
        transition: height 0.15s ease;
    }
    .footer-nav-toggle {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
    }
    .footer-nav-toggle i {
        transition: transform 0.15s ease;
    }
    .footer-nav-toggle[aria-expanded="true"] i {
        transform: rotate(180deg);
    }
    .footer-nav-section .nav {
        padding-top: 0.75rem;
    }
}
@media (min-width: 768px) {
    .footer-nav-toggle {
        pointer-events: none;
    }
    .footer-nav-toggle i {
        display: none;
    }
}

.career-hero-img-wrapper {
    max-width: 90%;    
    aspect-ratio: 4 / 3;  
    border-radius: 20px; 
    overflow: hidden; 
    margin-left: auto; 
}
.career-hero-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}










/* Reveal Container Styling for Click-to-Reveal */
.reveal-container {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Slightly increased for better spacing */
    cursor: pointer;
    padding: 4px 8px; /* Slightly more padding for better touch targets */
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: #f8f9fa; /* Default subtle background */
    min-width: 120px; /* Prevent squishing on small content */
    justify-content: space-between; /* Better distribution of space */
    user-select: none; /* Prevent text selection */
    position: relative; /* For potential tooltips or absolute positioning */
}

.reveal-container:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
    transform: translateY(-1px); /* Slight lift effect */
}

.reveal-container:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Custom focus ring */
}

.reveal-container.revealed {
    background: #e7f3ff;
    border-color: #b3d7ff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.15); /* Subtle revealed shadow */
}

.reveal-content {
    font-family: inherit;
    font-size: inherit;
    font-weight: 500; /* Slightly bolder for better readability */
    color: #495057; /* Darker text for better contrast */
    flex: 1; /* Take up available space */
    min-width: 0; /* Allow shrinking if needed */
    overflow: hidden;
    text-overflow: ellipsis; /* Handle long content gracefully */
    white-space: nowrap; /* Prevent wrapping */
    margin-right: auto; /* Push toggle to the right */
}

.reveal-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Slightly larger for better touch targets */
    height: 20px;
    border-radius: 50%;
    background: #6c757d; /* Darker default for better contrast */
    color: white; /* White icon for visibility */
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    flex-shrink: 0; /* Prevent shrinking */
    padding: 0; /* Remove padding for precise sizing */
    margin: 0; /* Remove default margins */
    box-sizing: border-box; /* Include border in width calculation */
}

.reveal-toggle:hover {
    background: #5a6268; /* Darker hover state */
    color: white;
    transform: scale(1.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.reveal-container.revealed .reveal-toggle {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.reveal-container.revealed .reveal-toggle:hover {
    background: #0056b3;
    border-color: #0056b3;
    transform: scale(1.1);
}

/* Ensure the eye icon is properly sized and centered */
.reveal-toggle i {
    font-size: 12px; /* Slightly smaller for better fit */
    line-height: 1; /* Perfect vertical centering */
}

/* Focus styles for accessibility */
.reveal-container:focus,
.reveal-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Improve keyboard navigation */
.reveal-container[tabindex="0"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25), 0 0 0 1px #007bff;
}

/* Screen reader improvements */
.reveal-container[tabindex="0"]::before {
    content: attr(title);
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    word-wrap: normal !important;
}

/* Auto-hide transition for smooth content changes */
.reveal-container .reveal-content {
    transition: color 0.2s ease;
}

.reveal-container.revealed .reveal-content {
    color: #155724; /* Darker green text when revealed */
    font-weight: 600; /* Bolder when revealed */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .reveal-container {
        min-width: auto; /* Allow full width on mobile */
        padding: 6px 10px; /* Larger touch targets */
        gap: 8px;
        flex-direction: row; /* Keep horizontal layout - column would be too tall */
    }
    
    .reveal-toggle {
        width: 22px; /* Larger touch target on mobile */
        height: 22px;
    }
    
    .reveal-toggle i {
        font-size: 13px;
    }
    
    .reveal-content {
        font-size: 0.95em; /* Slightly smaller text on mobile */
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .reveal-container {
        border-width: 2px;
    }
    
    .reveal-toggle {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .reveal-container,
    .reveal-toggle {
        transition: none;
    }
    
    .reveal-toggle:hover {
        transform: none;
    }
}

/* Dark mode support (if your site supports it) */
@media (prefers-color-scheme: dark) {
    .reveal-container {
        background: #343a40;
        color: #f8f9fa;
    }
    
    .reveal-container:hover {
        background: #495057;
        border-color: #6c757d;
    }
    
    .reveal-container.revealed {
        background: #0d6efd;
        border-color: #0d6efd;
    }
    
    .reveal-content {
        color: #f8f9fa;
    }
    
    .reveal-toggle {
        background: #6c757d;
        border-color: #6c757d;
    }
}



/* Bootstrap Overrides */

.tag-link {
    margin-right: 0.5rem;
    text-decoration: none;
    color: var(--dark-gray);
}

.active > .page-link, .page-link.active {
  background-color: var(--background-color) !important;
  border-color: var(--background-color) !important;
}

.form-control:focus {
    box-shadow: none !important;
}


.form-check-input:focus {
    box-shadow: none;
}



.form-check-input:checked {
  background-color: var(--background-color, var(--aqua));
  border-color: var(--background-color, var(--aqua));
}



.btn-outline-primary {
  --bs-btn-color: var(--background-color, #0d6efd);
  --bs-btn-border-color: var(--background-color, #0d6efd);
  --bs-btn-hover-bg: var(--background-color, #0d6efd);
  --bs-btn-hover-border-color: var(--background-color, #0d6efd);
  --bs-btn-active-bg: var(--background-color, #0d6efd);
  --bs-btn-active-border-color: var(--background-color, #0d6efd);
  --bs-btn-disabled-color: var(--background-color, #0d6efd);
  --bs-btn-disabled-border-color: var(--background-color, #0d6efd);
}



.edit-task-btn:focus {
    box-shadow: none !important;
}

.form-select:focus {
    box-shadow: none !important;
}

card-header {
    background-color:var(--background-color, #0d6efd);
}

.accordion-button-primary:not(.collapsed) {
    background-color: var(--background-color);
    color: white;
}

.accordion-button:not(.collapsed) {
    color: var(--background-color);
    background-color: var(--background-color)
}

.page-link:focus {
    box-shadow: none;
    outline: none;
}

/* =====================================================
   Summernote Insert Link Modal - Global Styles
   ===================================================== */

/* Keep Summernote modals in viewport (dialogsInBody puts them in body) */
/* Must be higher than task offcanvas (99999) and other modals */
.note-modal {
    z-index: 999999 !important;
    padding-top: 100px !important;
}

.note-modal .modal-dialog {
    margin-top: 0 !important;
}

.note-modal-backdrop {
    z-index: 999998 !important;
}

/* Hide checkboxes - we handle https:// and always open in new window */
.note-modal .checkbox {
    display: none !important;
}

/* Summernote link dialog fixes */
.note-modal .note-modal-body {
    padding-bottom: 30px !important;
}

/* Insert Link button styling */
.note-modal .note-btn {
    position: relative !important;
    bottom: 10px !important;
    background-color: var(--background-color, #17a2b8) !important;
    border-color: var(--background-color, #17a2b8) !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease !important;
}

.note-modal .note-btn:disabled,
.note-modal .note-btn.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Contact Record Tabs - Bootstrap Overrides */
.contact-record .contact-main-tabs .nav-link.active {
    color: var(--background-color, var(--bs-primary, #63c2cd)) !important;
    font-weight: 500;
    border-bottom: 2px solid var(--background-color, var(--bs-primary, #63c2cd)) !important;
}

.contact-record .contact-main-tabs .nav-link:hover {
    color: var(--background-hover-color, var(--background-color, var(--bs-primary, #63c2cd))) !important;
}

/* Bootstrap Icons spin animation (replacement for FA fa-spin) */
.bi-spin { animation: bi-spin 1s linear infinite; }
@keyframes bi-spin { to { transform: rotate(360deg); } }

/* Reusable Calendar Widget */
.clinic-calendar { background: #fff; border-radius: 14px; padding: 20px; max-width: 360px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); user-select: none; }
.clinic-calendar .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.clinic-calendar .cal-nav { background: transparent !important; border: none !important; font-size: 1.3rem; color: var(--navy-blue, #0b3d57); cursor: pointer; padding: 4px 10px; }
.clinic-calendar .cal-nav:hover { color: var(--aqua, #63c2cd); }
.clinic-calendar .cal-title { font-size: 1.05rem; font-weight: 600; color: var(--navy-blue, #0b3d57); }
.clinic-calendar .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.clinic-calendar .cal-day-label { font-size: 0.75rem; font-weight: 600; color: #999; padding: 6px 0; }
.clinic-calendar button.cal-day { padding: 0; border-radius: 50%; font-size: 0.95rem; cursor: pointer; transition: all 0.15s; line-height: 1; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; margin: 2px auto; color: var(--navy-blue, #0b3d57) !important; font-weight: 500; background: transparent !important; border: none !important; box-shadow: none !important; }
.clinic-calendar button.cal-day:hover:not(.disabled):not(.selected) { background: rgba(99,194,205,0.15) !important; }
.clinic-calendar button.cal-day.selected { background: var(--aqua, #63c2cd) !important; color: #fff !important; font-weight: 700; }
.clinic-calendar button.cal-day.disabled { color: #ccc !important; cursor: default; background: transparent !important; }

/* Toast notifications: opaque background */
.toast { background-color: #fff !important; backdrop-filter: none !important; }
.toast .toast-header { background-color: #f8f9fa !important; }
.clinic-calendar button.cal-day.today:not(.selected) { border: 2px solid var(--aqua, #63c2cd) !important; }
.clinic-calendar .cal-time { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; }
.clinic-calendar .cal-time select { appearance: none; -webkit-appearance: none; background: #f8f9fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%230b3d57'/%3E%3C/svg%3E") no-repeat right 8px center; border: 1px solid #dee2e6; border-radius: 8px; padding: 6px 24px 6px 10px; font-size: 0.9rem; color: var(--navy-blue, #0b3d57); font-weight: 500; cursor: pointer; }
.clinic-calendar .cal-time select:focus { border-color: var(--aqua, #63c2cd); outline: none; box-shadow: 0 0 0 2px rgba(99,194,205,0.25); }
.clinic-calendar .cal-time .cal-time-sep { font-weight: 600; color: var(--navy-blue, #0b3d57); font-size: 1.1rem; }