/* =====================================================
VARIABLES
===================================================== */
:root {
--gidget-pink: #d97f95;
--gidget-pink-dark: #9a4d60;
--content-indent: 18px;
}
/* =====================================================
HEADER / NAV BAR
===================================================== */
nav.navbar.navbar-default,
nav.navbar.navbar-default * {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
nav.navbar.navbar-default {
background: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
height: 70px !important;
display: flex !important;
align-items: center !important;
}
.navbar-default .container-fluid {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 !important;
}
.navbar-default .navbar-brand {
float: none !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
}
.navbar-default .navbar-brand img {
display: block !important;
margin: 0 auto !important;
max-height: 48px !important;
height: auto !important;
}
.navbar-default .navbar-collapse {
display: none !important;
}
/* =====================================================
MOBILE HEADER
===================================================== */
@media (max-width: 600px) {
body {
padding-top: 70px !important;
}
.navbar-default .navbar-brand img {
max-height: 44px !important;
}
}
/* =====================================================
BASE LAYOUT
===================================================== */
body {
margin: 0 !important;
padding-top: 80px !important;
background: #faf6f8 !important;
}
.container-fluid {
max-width: 680px !important;
margin: 0 auto !important;
padding: 0 16px !important;
}
/* Desktop – new forms */
@media (min-width: 768px) {
body:not([data-action="show"]) .container-fluid {
max-width: 1200px !important;
}
}
/* Desktop – completed view */
body[data-action="show"] .container-fluid {
max-width: 1200px !important;
}
/* =====================================================
CARD
===================================================== */
.panel,
.panel-default {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.panel-body {
padding: var(--content-indent) !important;
}
form {
background: #fff !important;
border-radius: 8px !important;
padding: var(--content-indent) !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}
/* =====================================================
HEADER ALIGNMENT
===================================================== */
.panel-heading,
.assessment-section-header {
padding-left: var(--content-indent) !important;
padding-right: var(--content-indent) !important;
margin-left: 0 !important;
}
/* =====================================================
LABEL BRANDING
===================================================== */
.form-group > label,
.control-label {
color: var(--gidget-pink) !important;
font-weight: 600 !important;
text-align: left !important;
}
/* =====================================================
GRID NORMALISATION
===================================================== */
.form-horizontal [class*="col-"] {
float: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* =====================================================
INPUTS
===================================================== */
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group .form-control {
width: 100% !important;
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group textarea {
font-size: 15px !important;
height: 40px !important;
padding: 8px 10px !important;
border: 1px solid #ead7dc !important;
border-radius: 6px !important;
}
/* =====================================================
RADIO BUTTONS
===================================================== */
.btn-group-vertical {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.btn-group-vertical .btn {
width: 100% !important;
}
@media (min-width: 601px) {
.btn-group-vertical .btn {
width: 260px !important;
margin: 0 auto !important;
text-align: center !important;
}
}
.btn-group-vertical .btn.active {
background: var(--gidget-pink) !important;
color: #fff !important;
}
/* =====================================================
CHECKBOX QUESTIONS
===================================================== */
.form-horizontal .col-sm-offset-3 {
margin-left: 0 !important;
padding-left: 0 !important;
}
.form-horizontal .checkbox {
padding-left: var(--content-indent) !important;
}
.form-horizontal .checkbox label {
display: flex !important;
align-items: flex-start !important;
}
.form-horizontal .checkbox input {
margin-right: 10px !important;
margin-top: 4px !important;
}
/* =====================================================
✅ TABLE FIX — MON/TUE ALIGNMENT
===================================================== */
.assessment-table {
table-layout: fixed !important;
width: 100% !important;
}
/* Left label column */
.assessment-table th:first-child,
.assessment-table td:first-child {
width: 30% !important;
text-align: left !important;
}
/* Days columns */
.assessment-table th:not(:first-child),
.assessment-table td:not(:first-child) {
width: 14% !important;
text-align: center !important;
}
/* Checkbox centering */
.assessment-table td input[type="checkbox"] {
display: block !important;
margin: 0 auto !important;
}
/* =====================================================
SPACING
===================================================== */
.assessment-question {
margin-bottom: 16px !important;
}
.assessment-body p {
margin-bottom: 12px !important;
}
.form-horizontal .checkbox,
body[data-action="show"] .checkbox {
margin-top: 8px !important;
margin-bottom: 12px !important;
}
/* =====================================================
SUBMIT BUTTON
===================================================== */
button,
input[type="submit"] {
width: 100% !important;
background: var(--gidget-pink) !important;
color: #fff !important;
border: 2px solid var(--gidget-pink-dark) !important;
padding: 15px !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}
button:hover,
input[type="submit"]:hover {
background: #c96f85 !important;
}
button:active,
input[type="submit"]:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15) !important;
}
/* =====================================================
✅ COMPLETED VIEW
===================================================== */
body[data-action="show"] .assessment-question .row {
display: flex !important;
flex-wrap: wrap !important;
}
body[data-action="show"] .assessment-question .col-sm-3 {
flex: 0 0 30% !important;
max-width: 30% !important;
padding-left: 0 !important;
}
body[data-action="show"] .assessment-question .col-sm-9 {
flex: 0 0 70% !important;
max-width: 70% !important;
}
/* ✅ FINAL FIX — “Any week day” custom checkbox */
body[data-action="show"] label > img.ui-checkbox.pull-left {
float: none !important;
margin: 4px 10px 0 0 !important;
}
body[data-action="show"] label:has(img.ui-checkbox.pull-left) {
display: flex !important;
align-items: flex-start !important;
padding-left: var(--content-indent) !important;
}
/* Checkbox layout (standard ones) */
body[data-action="show"] .checkbox label,
body[data-action="show"] .assessment-radio-readonly label {
display: flex !important;
align-items: flex-start !important;
}
body[data-action="show"] img.ui-checkbox {
margin-right: 10px !important;
margin-top: 4px !important;
}
/* Labels */
body[data-action="show"] .display-label,
body[data-action="show"] .control-label {
font-weight: 600 !important;
color: #000 !important;
}
/* Values */
body[data-action="show"] .assessment-question span,
body[data-action="show"] .assessment-question div {
font-weight: 400 !important;
color: #000 !important;
}
/* =====================================================
✅ MOBILE — FINAL OVERRIDE (EXTRA RIGHT SHIFT)
===================================================== */
@media (max-width: 767px) {
/* =========================
1. WIDTH / LAYOUT
========================= */
.container-fluid {
padding-left: 6px !important;
padding-right: 6px !important;
}
.panel-body {
padding-left: 6px !important;
padding-right: 6px !important;
}
form {
padding: 10px !important;
}
/* =========================
2. PREVENT ZOOM
========================= */
input,
textarea,
select,
.form-control {
font-size: 16px !important;
}
/* =========================
3. DROPDOWN FIX (ALL TYPES)
========================= */
.data-collection-value-picker,
.data-collection-value-picker * {
font-size: 14px !important;
}
.select2-container,
.select2-container * {
font-size: 14px !important;
}
.select2-selection__rendered {
font-size: 14px !important;
line-height: 40px !important;
}
.form-control,
.form-control * {
font-size: 14px !important;
}
/* =========================
4. SPACING
========================= */
.form-group,
.assessment-question {
margin-bottom: 12px !important;
}
.assessment-body p {
margin-bottom: 10px !important;
}
.assessment-section-header {
margin-top: 16px !important;
margin-bottom: 8px !important;
}
/* =========================
5. HEADER ALIGNMENT
========================= */
.panel-heading,
.assessment-section-header {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* =========================
6. ✅ WEEKLY TABLE (FINAL PUSH)
========================= */
.assessment-table {
table-layout: fixed !important;
width: 100% !important;
}
.assessment-table td:first-child {
width: 32% !important;
text-align: left !important;
}
.assessment-table td:not(:first-child) {
width: 13.6% !important;
text-align: center !important;
}
.assessment-table td {
padding: 4px 0 !important;
vertical-align: middle !important;
}
/* ✅ FINAL RIGHT SHIFT */
.assessment-table td span.assessment-label {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
padding-left: 28px !important; /* ✅ stronger push (this WILL move it) */
}
.assessment-table td span.assessment-label b {
font-size: 11px !important;
margin: 0 !important;
}
.assessment-table td .checkbox {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.assessment-table td input[type="checkbox"] {
margin: 0 !important;
}
/* =========================
7. BUTTONS
========================= */
.btn-group-vertical .btn,
button,
input[type="submit"] {
width: 260px !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
}
}
/* =====================================================
✅ DESKTOP BUTTON WIDTH FIX (SAFE)
===================================================== */
@media (min-width: 768px) {
button,
input[type="submit"] {
width: 260px !important; /* ✅ fixed "normal" width */
max-width: 100% !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important; /* ✅ centers the button */
}
}
/* =====================================================
✅ EDIT MODE (COMPLETE FORM) BUTTON FIX
TARGETED + SAFE
===================================================== */
@media (min-width: 768px) {
body[data-action="edit"] form.cui-form button,
body[data-action="edit"] form.cui-form input[type="submit"] {
width: 260px !important;
max-width: 100% !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* =====================================================
✅ COMPLETED VIEW — FIX TABLE CHECKBOX FLOAT ISSUE
(THIS is the real fix)
===================================================== */
@media (min-width: 768px) {
/* ✅ remove CareRight float */
body[data-action="show"] .assessment-table img.ui-checkbox.pull-left {
float: none !important;
}
/* ✅ center checkbox inside cell */
body[data-action="show"] .assessment-table td .checkbox label {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
/* ✅ ensure image itself is centered cleanly */
body[data-action="show"] .assessment-table img.ui-checkbox {
margin: 0 auto !important;
display: block !important;
}
}
/* =====================================================
✅ FIX PROCEED BUTTON WIDTH
Overrides generic .form-group input width rule
===================================================== */
.form-group input[type="submit"] {
width: 260px !important;
max-width: 260px !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* =====================================================
FONT OVERRIDE
===================================================== */
body,
input,
textarea,
select,
button {
font-family: 'Montserrat', sans-serif !important;
}
/* =====================================================
✅ FINAL SUBMIT / PROCEED BUTTONS
===================================================== */
input[type="submit"] {
background: #4a4a4a !important;
border-color: #4a4a4a !important;
color: #ffffff !important;
}
input[type="submit"]:hover {
background: #3a3a3a !important;
border-color: #3a3a3a !important;
}
/* ==========================================
PATIENT PORTAL PAYMENT PAGE
========================================== */
/* Push page content below fixed header */
body.patient-portal #wrap-content {
margin-top: 70px !important;
}
/* Match other final submission buttons */
body.patient-portal button#submit {
background: #4a4a4a !important;
border: 2px solid #4a4a4a !important;
color: #ffffff !important;
width: 260px !important;
max-width: 100% !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.patient-portal button#submit:hover {
background: #3a3a3a !important;
border-color: #3a3a3a !important;
}
/* Improve mobile alignment of outer payment card */
@media (max-width: 767px) {
body.patient-portal .container.well {
padding-left: 6px !important;
padding-right: 6px !important;
}
}