body {
    background-color: #F9FAFB !important;
}
.no-gutters {
    margin-left: 0;
    margin-right: 0;
}
.paired-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-title {
    color: #292524;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0;
}

.page-title i {
    color: #007BFF;
}

.page-info {
    color: #6C757D;
    font-size: 14px;
}

.form-check-label {
    margin: 0 !important;
}

.form-check:not(.form-switch) .form-check-input[type=checkbox]:checked {
    background-color: #007BFF;
    border-color: #007BFF;
    margin-top: 0 !important;
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
}

/* Chat */
.chat-container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: fixed;
    right: 25px;
    z-index: -1;
    bottom: 80px;
    opacity: 0;
}

.chat-header {
    background: white;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
}

.assistant-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3399FF, #66B2FF);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.assistant-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 5px;
}

.close-btn:hover {
    color: #666;
}

.chat-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #f8f9fa;
}

.message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.message-bubble {
    background: #e9ecef;
    padding: 15px 18px;
    border-radius: 20px;
    border-top-left-radius: 8px;
    max-width: 80%;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
}

.message-time {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    margin-left: 5px;
}

.quick-replies {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.quick-reply-btn {
    background: linear-gradient(135deg, #007BFF, #339EFF);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}

.quick-reply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.3);
}

.quick-reply-btn:active {
    transform: translateY(0);
}

.chat-input-container {
    padding: 20px;
    background: white;
    border-top: 1px solid #f0f0f0;
}

.input-wrapper {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 25px;
    padding: 5px;
    gap: 10px;
}

.message-input {
    flex: 1;
    border: none;
    background: none;
    padding: 12px 15px;
    font-size: 16px;
    outline: none;
    color: #333;
}

.message-input::placeholder {
    color: #aaa;
}

.send-btn {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #007BFF, #339EFF);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.send-btn:hover {
    transform: scale(1.05);
}

.send-btn:active {
    transform: scale(0.95);
}

.floating-brain-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    background-color: #5e72e4;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


/* toggle */
.toggle-content {
    display: block;
    transition: all 0.3s ease;
}

.toggle-content.collapsed {
    display: none;
}

.read-toggle .fa-angle-up {
    transition: transform 0.3s ease;
}

.read-toggle.collapsed .fa-angle-up {
    transform: rotate(180deg);
}


/* Sidebar */

.sidebar {
    width: 230px;
    /* height: 100vh; */
    background-color: #ffffff;
    border: 1px solid #F3F4F6;
    border-radius: 10px;
    margin: 10px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    z-index: 1050;
}

.sidebar-collapsed {
    display: none !important;
}


.sidebar .nav-link {
    color: #6B7280;
    padding: 8px 15px;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
    font-size: 14px;
    font-weight: 500;
}

.sidebar .nav-link:hover {
    background-color: #f0f4ff;
    color: #0d6efd;
}

.sidebar .nav-link.active {
    background-color: #007BFF;
    color: #fff;
}

.sidebar .nav-link.active i {
    color: #fff !important;
}

.sidebar .brand {
    text-decoration: none;
}

.sidebar .brand i {
    color: #007BFF;
    font-size: 22px;
}

.sidebar .brand span {
    color: #262626;
    font-size: 14px;
    font-weight: 600;
}

.sidebar .separator,
.main-content .profile .personal-info .separator,
.main-content .alergies .separator,
.main-content .lab-test .separator,
.main-content .ask-ai .ai-content .content .separator,
.main-content .ask-ai .ai-content .info .insights-info .separator,
.main-content .lifestyle .modal-body .content .separator,
.main-content .summary .health-overview .overview-item .content .separator,
.main-content .lifestyle .nutrition .wearable .separator,
.main-content .wearables .ai-insights .info .separator,
.main-content .reports .activities .timeline-list .timeline-item .separator,
.main-content .today .today-cards .card-item .left .separator,
.main-content .today .card-item.agenda .schedule .separator,
.main-content .today .card-item.ai-action .items .separator {
    width: 100%;
    height: 1px;
    background: #F3F4F6;
    margin: 15px 0;
}

.main-content .summary .health-overview .overview-item .content .separator,
.main-content .lifestyle .nutrition .wearable .separator,
.main-content .today .today-cards .card-item .left .separator {
    margin: 10px 0;
}

.sidebar .title {
    color: #D1D5DB;
    font-weight: 700;
    font-size: 12px;
    padding: 0 15px;
}

/* Footer */
.footer {
    /* width: 300px; */
    /* margin: auto; */
    margin-top: 50px;
    /* padding-bottom: 20px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer span {
    display: block;
    /* text-align: center; */
    color: #6C757D;
    font-size: 14px;
}


.main-content {
    padding: 10px;
}

/* Navigation */

.main-content .navigation i.fa-bars {
    color: #9CA3AF;
    cursor: pointer;
    /* font-size: 18px; */
}

.main-content .navigation .bread span,
.main-content .navigation .bread a {
    color: #6C757D;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.main-content .navigation .bread a.active {
    color: #212529;
}

.main-content .navigation .btn,
.main-content .medical-reports .btn,
.main-content .profile .personal-info .btn,
.main-content .profile .medical-info .btn,
.main-content .lab-test .header .btn,
.main-content .lab-test .book-btn,
.main-content .summary .header .btn,
.main-content .medication .btn,
.main-content .wearables .header .btn,
.main-content .today .floating-buttons .btn {
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    border-radius: 6px;
    padding: 7px 15px;
    color: #212529;
    font-weight: 500;
    font-size: 14px;
}

.main-content .wearables .header .btn {
    font-size: 12px;
}

.main-content .medication .btn i,
.main-content .wearables .header .btn i {
    color: #D1D5DB;
}

.main-content .wearables .header .btn i.fa-brain {
    color: #007BFF;
}

.main-content .medication .btn {
    border-radius: 6px;
}

.main-content .summary .header .btn {
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12px;
}

.main-content .lab-test .header .btn,
.main-content .lab-test .book-btn {
    border-radius: 8px;
}

.main-content .navigation .btn-with-icon.notification {
    display: flex;
    gap: 5px;
    padding: 10px 15px;
}

.main-content .navigation .btn-with-icon.notification strong {
    display: block;
    margin-top: -10px;
}

.main-content .navigation .btn i {
    font-size: 16px !important;
}

.main-content .navigation .btn i,
.main-content .medical-reports .btn i {
    margin-right: 3px;
    color: #D1D5DB;
}

.main-content .navigation .ai-btn i.fa-brain {
    color: #007BFF;
}

.main-content .navigation .ai-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
}

.main-content .navigation .ai-btn i {
    font-size: 16px;
}

.btn-primary {
    box-shadow: none;
}

.btn-primary:hover {
    box-shadow: none;
}

.main-content .navigation .btn:hover,
.main-content .medical-reports .btn:hover,
.main-content .profile .personal-info .btn:hover,
.main-content .profile .medical-info .btn:hover,
.main-content .dashboard .middle .report .report-info .btn:hover,
.main-content .summary .left .report .report-info .btn:hover,
.main-content .medical-activities .activities .timeline-item .btn:hover,
.main-content .medical-reports .left .report .report-info .btn:hover,
.main-content .dashboard .right .medical-activity .btn:hover,
.main-content .dashboard .right .appointment .btn:hover,
.main-content .summary .right .analysis .btn:hover,
.main-content .medication .left .medication-list .btn:hover,
.main-content .medication .btn:hover,
.main-content .today .btn:hover,
.main-content .summary .btn:hover,
.main-content .lab-test .btn:hover,
.main-content .alergies .btn:hover,
.main-content .reports .btn:hover,
.main-content .lifestyle .btn:hover,
.main-content .wearables .btn:hover {
    background-color: #f3f4f6 !important;
}

.main-content .btn:hover i {
    color: #1F2937 !important;
}

.main-content .btn-primary:hover i,
.main-content .today .card-item.ai-action .header .btn:hover i,
.main-content .lab-test .header .btn:hover i,
.main-content .lab-test .right .important .btn.cancel:hover i,
.main-content .lifestyle .nutrition .groceries .btn:hover i,
.main-content .lifestyle .nutrition .wearable.paired-box .btn:hover i {
    color: #FFFFFF !important;
}

.main-content .summary .header .btn-primary {
    background-color: #007BFF;
    border-color: #007BFF;
    color: #FFFFFF;
}

.main-content .summary .header .btn-primary i {
    font-size: 16px;
}

.main-content .navigation .btn-primary i,
.main-content .medical-reports .btn-primary i,
.main-content .medication .btn-primary i {
    color: #FFFFFF;
}

.main-content .navigation .btn-primary:hover,
.main-content .medical-reports .btn-primary:hover,
.main-content .profile .personal-info .btn-primary:hover,
.main-content .profile .medical-info .btn-primary:hover,
.main-content .providers .btn-primary:hover,
.main-content .dashboard .right .medical-activity .btn-primary:hover,
.main-content .edit-prompt .btn-primary:hover,
.main-content .medication .btn-primary:hover,
.main-content .today .card-item.ai-action .header .btn:hover,
.main-content .summary .btn-primary:hover,
.main-content .lab-test .header .btn:hover,
.main-content .lifestyle .nutrition .groceries .btn:hover,
.main-content .lifestyle .nutrition .wearable.paired-box .btn:hover,
.main-content .lifestyle .nutrition .challenges .btn.save:hover,
.main-content .summary .btn-primary:hover,
.main-content .summary .right .analysis .btn-primary:hover {
    background-color: #176cc7 !important;
}

.main-content .lab-test .right .important .btn.cancel:hover {
    background-color: #DC3545 !important;
}

.main-content .providers .btn-success:hover {
    background-color: #198754 !important;
}

.main-content .providers .btn-danger:hover,
.main-content .dashboard .right .medical-activity .btn-danger:hover {
    background-color: #dc3545 !important;
}

.main-content .navigation .dropdown .dropdown-menu,
.main-content .medical-reports .dropdown .dropdown-menu {
    border: 1px solid #F3F4F6;
    border-radius: 8px;
    min-width: 250px;
    padding: 10px 15px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.main-content .navigation .dropdown .dropdown-menu i,
.main-content .medical-reports .dropdown .dropdown-menu i {
    color: #007BFF;
    font-size: 16px;
}

.main-content .navigation .dropdown .dropdown-menu span.info,
.main-content .medical-reports .dropdown .dropdown-menu span.info {
    color: #1F2937;
    font-size: 12px;
    font-weight: 500;
    display: block;
    margin-bottom: 0;
}

.main-content .navigation .dropdown .dropdown-menu span.time,
.main-content .medical-reports .dropdown .dropdown-menu span.time {
    font-size: 11px;
    color: #6B7280;
}

.main-content .navigation .dropdown .dropdown-menu .separator,
.main-content .medical-reports .dropdown .dropdown-menu .separator,
.main-content .medical-reports .separator,
.main-content .providers .separator {
    width: 100%;
    height: 1px;
    background: #F3F4F6;
    margin: 10px 0 !important;
}

.main-content .medical-reports .separator {
    margin: 20px 0 !important;
}


.main-content .navigation .modal-header {
    align-items: flex-start;
    border-bottom: none;
}

.main-content .navigation .modal-footer {
    border-top: none;
}

.main-content .navigation .modal-header h1 {
    color: #292524;
    font-size: 16px;
    font-weight: 700;
}

.main-content .navigation .modal-header span {
    color: #6C757D;
    font-size: 12px;
}


.main-content .navigation .modal-content {
    border-radius: 10px;
}

.main-content .navigation .modal-body {
    padding: 0 1rem;
}

.main-content .navigation .modal-body .drop-zone {
    border: 1px dashed #E5E7EB;
    border-radius: 6px;
    padding: 50px;
    text-align: center;
}

.main-content .navigation .modal-body .drop-zone i {
    color: #D1D5DB;
    font-size: 32px;
}

.main-content .navigation .modal-body .drop-zone span {
    color: #6C757D;
    font-size: 12px;
    font-weight: 500;
}


/* Dashboard */
.main-content .dashboard .left h2,
.main-content .wearables h2,
.main-content .alergies .header h2,
.main-content .lab-test h2,
.main-content .ask-ai h2,
.main-content .lifestyle h2,
.main-content .summary h2,
.main-content .medication h2,
.main-content .today .header h2  {
    color: #292524;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.main-content .wearables h2 span,
.main-content .dashboard .left h2 span,
.main-content .alergies .header h2 span,
.main-content .lab-test h2 span,
.main-content .ask-ai h2 span,
.main-content .lifestyle h2 span,
.main-content .summary h2 span,
.main-content .medication h2 span,
.main-content .today .header h2 span {
    color: #007BFF;
}

.main-content .today .header h3 {
    color: #212529;
    font-size: 18px;
    font-weight: 700;
}

.main-content .dashboard .left .human-body {
    position: relative;
}

.main-content .dashboard .left .human-body .img-box {
    width: 370px;
    height: 500px;
    overflow: hidden;
    position: relative;
}

.main-content .dashboard .left .human-body img {
    width: auto;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.main-content .dashboard .left .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.main-content .dashboard .left .blue-dot {
    background-color: #007BFF;
}

.main-content .dashboard .left .green-dot {
    background-color: #28A745;
}

.main-content .dashboard .left .yellow-dot {
    background-color: #FFC107;
}

.main-content .dashboard .left .red-dot {
    background-color: #DC3545;
}

.main-content .dashboard .left .blue-dot:hover {
    background-color: #0056b3;
}

.main-content .dashboard .left .green-dot:hover {
    background-color: #1e7e34;
}

.main-content .dashboard .left .yellow-dot:hover {
    background-color: #e0a800;
}

.main-content .dashboard .left .red-dot:hover {
    background-color: #bd2130;
}


.main-content .dashboard .left .human-body .vertical-dot {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.human-body .img-box .random-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main-content .dashboard .left .human-body .random-dot .green-dot-1 {
    position: absolute;
    top: 60px;
    left: 48%;
}

.main-content .dashboard .left .human-body .random-dot .green-dot-2 {
    position: absolute;
    top: 150px;
    left: 46%;
}

.main-content .dashboard .left .human-body .random-dot .green-dot-3 {
    position: absolute;
    bottom: 60px;
    left: 52%;
}

.main-content .dashboard .left .human-body .random-dot .yellow-dot {
    position: absolute;
    bottom: 150px;
    left: 35%;
}

.main-content .dashboard .left .human-body .random-dot .red-dot {
    position: absolute;
    top: 100px;
    left: 35%;
}

.main-content .dashboard .left .human-body .random-dot .details {
    position: absolute;
    /* top: 170px;
    left: 50%; */
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #F3F4F6;
    padding: 5px 8px;
    transition: all 0.3s ease;
}

.main-content .dashboard .left .human-body .random-dot .details span {
    font-size: 10px;
    color: #9CA3AF;
    font-weight: 500;
    display: block;
}

.main-content .dashboard .left .human-body .random-dot .details span.title {
    color: #1F2937;
    font-size: 12px;
}

.main-content .dashboard .left .human-body .random-dot .details span.tag {
    background-color: #28A7451A;
    display: inline-flex;
    color: #28A745;
    padding: 2px 5px;
    border-radius: 4px;
}

.main-content .dashboard .left .dot-info {
    background-color: #ffffff;
    border: 1px solid #F3F4F6;
    padding: 5px 10px;
    border-radius: 8px;
    width: 95%;
}

.main-content .dashboard .left .dot-info span {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
}

.main-content .dashboard .left .dot-info span.active {
    color: #1F2937;
}

/* middle */

.main-content .dashboard .middle .health-overview,
.main-content .dashboard .right .medical-activity,
.main-content .dashboard .right .appointment,
.main-content .summary .right .analysis,
.main-content .medication .left .medication-list,
.main-content .medical-activities .activities,
.main-content .profile .left .personal-info,
.main-content .profile .right .medical-info,
.main-content .medical-reports-details .left,
.main-content .provider .provider-content,
.main-content .models .models-content,
.main-content .wearables .left,
.main-content .wearables .right,
.main-content .lab-test .left,
.main-content .lab-test .right,
.main-content .ask-ai .ai-content,
.main-content .ask-ai .ai-content .info .insights-info,
.main-content .ask-ai .ai-content .info .ask-ai-doc,
.main-content .lifestyle .health-highlights,
.main-content .lifestyle .lifestyle-items .lifestyle-item,
.main-content .lifestyle .lifestyle-trend .trend-item,
.main-content .lifestyle .lifestyle-trend .trend-item .trend-box,
.main-content .lifestyle .modal-body .content .exercise-item,
.main-content .lifestyle .modal-body .content .assessments .assessment,
.main-content .lifestyle .modal-body .content .medications .medication,
.main-content .summary .health-overview .overview-item,
.main-content .lifestyle .nutrition .challenges .assessments .assessment,
.main-content .reports .activities,
.main-content .today .card-item {
    background-color: #FFFFFF;
    border: 1px solid #F3F4F6;
    padding: 15px;
    border-radius: 8px;
}

.main-content .dashboard .middle .header h2,
.main-content .dashboard .right .header h2,
.main-content .summary .left .header h2,
.main-content .summary .right .header h2,
.main-content .medication .left .header h2,
.main-content .medical-reports .left .header h2,
.main-content .profile .left .header h2,
.main-content .profile .right .header h2,
.main-content .wearables .left .header h2,
.main-content .wearables .right .header h2 {
    color: #292524;
    font-size: 16px;
    font-weight: 700;
}

.main-content .dashboard .middle .header span,
.main-content .dashboard .right .header span,
.main-content .summary .right .header span,
.main-content .medication .left .header span,
.main-content .medical-reports .left .header span,
.main-content .profile .left .header span,
.main-content .profile .right .header span,
.main-content .wearables .left .header span,
.main-content .wearables .right .header span {
    color: #6C757D;
    font-size: 14px;
}

.main-content .dashboard .middle .header p,
.main-content .dashboard .right .header p,
.main-content .summary .right .header p,
.main-content .medical-reports .left .header p {
    color: #6C757D;
    font-size: 12px;
}

.main-content .dashboard .middle .header p strong,
.main-content .dashboard .right .header p strong,
.main-content .medical-reports .left .header p strong {
    color: #6C757D;
    font-weight: 700;
}

.health-overview-card {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 10px 12px;
}

.health-overview-card>.col-md-6 {
    width: 50%;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
}

.health-overview-card>.col-md-6:nth-child(odd)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #F3F4F6;
}

.health-overview-card>.col-md-6:nth-child(-n+2)::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: #F3F4F6;
}


.main-content .dashboard .middle .health-overview .health-overview-card i {
    color: #D1D5DB;
    font-size: 18px;
    margin-bottom: 10px;
}

.main-content .dashboard .middle .health-overview .health-overview-card span.title {
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 3px;
}

.main-content .dashboard .middle .health-overview .health-overview-card h3 {
    color: #1F2937;
    font-size: 20px;
    font-weight: 700;
}

.main-content .dashboard .middle .health-overview .health-overview-card .tag,
.main-content .medical-activities .activities .timeline-item span.tag,
.main-content .profile .right .medical-info span.tag,
.main-content .medical-reports .left .classification span.tag,
.main-content .medical-reports .left .clinical span.tag,
.main-content .alergies .tags .tag,
.main-content .lab-test .timeline-item span.tag,
.main-content .lifestyle .lifestyle-items .lifestyle-item .header span.tag,
.main-content .summary .health-overview .overview-item .content .tag,
.main-content .summary .action-plan .plans .plan .tag,
.main-content .summary .health-condition-cards .health-condition-card .tag,
.main-content .summary .modal-body .content .status-cards .status-card .tag,
.main-content .summary .recommendation-cards .recommendation-card .tag,
.main-content .wearables .header span.tag,
.main-content .reports .activities .timeline-list .timeline-item span.tag,
.main-content .today .card-item.alerts .items .item span.tag {
    background-color: #28A7451A;
    display: inline-flex;
    color: #28A745;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 10px !important;
    font-weight: 500;
    cursor: pointer;
}

.main-content .summary .modal-body .content .status-cards .status-card .tag,
.main-content .summary .recommendation-cards .recommendation-card .tag {
    font-size: 12px !important;
}

.main-content .medical-reports .left .clinical span.tag {
    display: inline-flex !important;
    color: #28A745 !important;
}

.main-content .dashboard .middle .health-overview .health-overview-card .tag-caution,
.main-content .medical-reports .left .classification .tag.tag-caution,
.main-content .alergies .tags .tag.tag-caution,
.main-content .lifestyle .lifestyle-items .lifestyle-item .header .tag.tag-caution,
.main-content .summary .health-overview .overview-item .content .tag.tag-caution,
.main-content .summary .health-condition-cards .health-condition-card .tag.tag-caution,
.main-content .summary .recommendation-cards .recommendation-card .tag.tag-caution,
.main-content .reports .activities .timeline-list .timeline-item .tag.tag-caution,
.main-content .today .card-item.alerts .items .item .tag.tag-caution {
    background-color: #FFC1071A;
    color: #FFC107;
}

.main-content .medical-activities .activities .timeline-item .tag.tag-info,
.main-content .profile .right .medical-info .tag.tag-info,
.main-content .lab-test .timeline-item .tag.tag-info,
.main-content .summary .action-plan .plans .plan .tag.tag-info,
.main-content .reports .activities .timeline-list .timeline-item .tag.tag-info {
    background-color: #007BFF1A;
    color: #007BFF;
}

.main-content .medical-activities .activities .timeline-item .tag.tag-danger,
.main-content .medical-reports .left .classification .tag.tag-danger,
.main-content .alergies .tags .tag.tag-danger,
.main-content .lab-test .timeline-item .tag.tag.tag-danger,
.main-content .summary .health-overview .overview-item .content .tag.tag-danger,
.main-content .summary .health-condition-cards .health-condition-card .tag.tag-danger,
.main-content .summary .modal-body .content .status-cards .status-card .tag.tag-danger,
.main-content .summary .recommendation-cards .recommendation-card .tag.tag-danger,
.main-content .reports .activities .timeline-list .timeline-item .tag.tag-danger,
.main-content .today .card-item.alerts .items .item .tag.tag-danger {
    background-color: #DC35451A;
    color: #DC3545;
}

.main-content .profile .right .medical-info .box .tag.tag-secondary {
    background-color: #F5F5F5;
    color: #212529;
}

.main-content .dashboard .right .medical-activity .btn,
.main-content .dashboard .right .appointment .btn,
.main-content .summary .right .analysis .btn,
.main-content .medication .left .medication-list .btn,
.main-content .ask-ai .header .btn {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #212529;
    font-size: 12px;
}

.main-content .summary .right .analysis .btn i,
.main-content .medication .left .medication-list .btn i {
    color: #007BFF;
    margin-right: 3px;
}

.main-content .dashboard .right .medical-activity .table th,
.main-content .dashboard .right .appointment .table th,
.main-content .summary .right .analysis .table th,
.main-content .summary .right .analysis .analysis-entry strong,
.main-content .medication .left .medication-list .table th,
.main-content .medication .left .medication-list .analysis-entry strong,
.main-content .medical-reports .left .report-details .general .table th,
.main-content .summary .laboratory .table-content .table th,
.main-content .medication .medication-list .table-content .table th {
    color: #9CA3AF;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.main-content .medication .medication-list .table-content .table th,
.main-content .dashboard .right .medical-activity .table th,
.main-content .dashboard .right .appointment .table th {
    font-size: 10px;
}

.table thead th {
    padding: 0.5rem;
}

.main-content .dashboard .right .medical-activity .table td,
.main-content .dashboard .right .appointment .table td,
.main-content .summary .right .analysis .table td,
.main-content .summary .right .analysis .analysis-entry span,
.main-content .medication .left .medication-list .table td,
.main-content .medication .left .medication-list .analysis-entry span,
.main-content .medical-reports .left .report-details .general .table td,
.main-content .medical-reports .left .report-details .general .table td.category span,
.main-content .summary .laboratory .table-content .table td,
.main-content .medication .medication-list .table-content .table td {
    font-size: 14px;
    font-weight: 500;
    color: #1F2937;
}

.main-content .dashboard .right .medical-activity .table td,
.main-content .dashboard .right .appointment .table td {
    font-size: 11px;
}

.main-content .medication .medication-list .table-content .table td {
    font-size: 12px;
}

.main-content .summary .laboratory .table-content .table td,
.main-content .medication .medication-list .table-content .table td {
    padding: 15px 8px;
}

.main-content .medication .medication-list .table-content .table td span.label {
    color: #9CA3AF;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
}

.main-content .medication .medication-list .table-content .table td span.value {
    color: #6B7280;
    font-size: 12px;
    font-weight: 400;
}

.main-content .medical-reports .left .report-details .general .table td {
    padding: 10px auto;
}

.main-content .medical-reports .left .report-details .biomarkers .table td.category {
    min-width: 120px !important;
}

.main-content .medical-reports .left .report-details .biomarkers .table td.category span {
    margin-bottom: 0;
}

.main-content .medical-reports .left .report-details .biomarkers .table td.category i,
.main-content .summary .laboratory .table-content .table td.category i,
.main-content .medication .medication-list .table-content .table td.category i {
    color: #D1D5DB;
}

.main-content .medical-reports .left .report-details .biomarkers .table td.category i.active,
.main-content .summary .laboratory .table-content .table td.category i.active,
.main-content .medication .medication-list .table-content .table td.category i.active {
    color: #007BFF;
}

.main-content .summary .laboratory .table-content .table td.date i.negative {
    color: #DC3545;
}

.main-content .summary .laboratory .table-content .table td.date i.positive {
    color: #28A745;
}

.main-content .summary .laboratory .table-content .table td.date i.stable {
    color: #007BFF;
}

.main-content .dashboard .right .medical-activity .table td.date,
.main-content .dashboard .right .appointment .table td.date,
.main-content .summary .right .analysis .table td.date,
.main-content .summary .right .analysis .analysis-entry span.date,
.main-content .medication .left .medication-list .table td.date,
.main-content .medication .left .medication-list .analysis-entry span.date,
.main-content .medical-reports .left .report-details .general .table td.date,
.main-content .summary .laboratory .table-content .table td.date,
.main-content .medication .medication-list .table-content .table td.date {
    color: #6B7280;
}

.main-content .summary .laboratory .table-content .table td.date {
    font-weight: 400;
}

.main-content .medication .medication-list .table-content .table td.date .form-check-label {
    color: #6B7280;
    font-size: 10px;
}

.main-content .dashboard .right .medical-activity .table td .tag,
.main-content .dashboard .right .appointment .table td .tag,
.main-content .summary .right .analysis .table td .tag,
.main-content .medication .left .medication-list .table td .tag,
.main-content .medical-reports .left .report-details .general .table td .tag,
.main-content .provider .provider-content .table td .tag,
.main-content .summary .laboratory .table-content .table td .tag,
.main-content .medication .medication-list .table-content .table td .tag,
.main-content .medication .mb-table span.tag {
    background-color: #28A7451A;
    display: inline-flex;
    color: #28A745;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.main-content .medication .medication-list .table-content .table td.collapse-icon i {
    color: #007BFF;
    font-size: 12px;
    cursor: pointer;
}

.main-content .medication .medication-list .table-content .table td.action-btn i {
    color: #D1D5DB;
    font-size: 12px;
    cursor: pointer;
}

.main-content .medication .medication-list .table-content .table td.action-btn i.fa-trash-can {
    color: #DC3545;
}

.main-content .summary .laboratory .table-content .table td .tag {
    font-size: 12px;
    font-weight: 600;
}

.main-content .summary .right .analysis .table td,
.main-content .medication .left .medication-list .table td {
    vertical-align: middle;
}

.main-content .providers .table td {
    vertical-align: top !important;
}

.main-content .dashboard .right .medical-activity .table td .tag-info,
.main-content .dashboard .right .appointment .table td .tag-info,
.main-content .summary .right .analysis .table td .tag-info,
.main-content .medication .left .medication-list .table td .tag-info {
    background-color: #007BFF1A;
    color: #007BFF;
}

.main-content .medical-reports .left .report-details .general .table td .tag.tag-warning,
.main-content .summary .laboratory .table-content .table td .tag.tag-warning,
.main-content .medication .medication-list .table-content .table td .tag.tag-caution,
.main-content .medication .mb-table span.tag.tag-caution {
    background-color: #FFC1071A;
    color: #FFC107;
}

.main-content .medical-reports .left .report-details .general .table td .tag.tag-success,
.main-content .summary .laboratory .table-content .table td .tag.tag-success {
    background-color: #28A7451A;
    color: #28A745;
}

.main-content .medical-reports .left .report-details .general .table td .tag.tag-danger,
.main-content .summary .right .analysis .table td .tag.tag-danger,
.main-content .summary .laboratory .table-content .table td .tag.tag-danger,
.main-content .medication .medication-list .table-content .table td .tag.tag-danger,
.main-content .medication .mb-table span.tag.tag-danger {
    background-color: #DC35451A;
    color: #DC3545;
}

.main-content .medication .medication-list .table-content .table td .tag.tag-secondary {
    background-color: #F3F4F6;
    color: #212529;
}

.main-content .summary .right .analysis .table i.fa-circle-exclamation,
.main-content .summary .right .analysis .analysis-entry .entry i.fa-circle-exclamation,
.main-content .medication .left .medication-list .table i.fa-circle-exclamation,
.main-content .medication .left .medication-list .analysis-entry .entry i.fa-circle-exclamation {
    color: #D1D5DB;
    font-size: 16px;
}

.main-content .summary .right .analysis .table i.fa-trash,
.main-content .summary .right .analysis .analysis-entry .entry i.fa-trash,
.main-content .medication .left .medication-list .table i.fa-trash,
.main-content .medication .left .medication-list .analysis-entry .entry i.fa-trash {
    color: #DC3545;
    font-size: 16px;
}

.main-content .dashboard .middle .report,
.main-content .summary .left .report,
.main-content .medical-reports .left .report {
    background-color: #FFFFFF;
    border: 1px solid #F3F4F6;
    border-radius: 8px;
}

.main-content .dashboard .middle .report {
    padding-bottom: 6px;
}

.main-content .dashboard .middle .report img,
.main-content .summary .left .report img,
.main-content .medical-reports .left .report img {
    height: 120px;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    padding: 5px;
}

.main-content .summary .left .report img {
    height: 210px;
    padding: 5px;
}

.main-content .dashboard .middle .report .report-info,
.main-content .summary .left .report .report-info,
.main-content .medical-reports .left .report .report-info {
    padding: 10px 15px;
}

.main-content .dashboard .middle .report .report-info p,
.main-content .summary .left .report .report-info p,
.main-content .medical-reports .left .report .report-info p {
    display: block;
    width: 100%;
    color: #6C757D;
    font-size: 14px;
    margin-bottom: 10px;
}

.main-content .medical-home .left .report .report-info p {
    font-size: 12px;
}

.main-content .dashboard .middle .report .report-info h6,
.main-content .summary .left .report .report-info h6,
.main-content .medical-reports .left h6 {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #9CA3AF;
    margin-bottom: 10px;
}

.main-content .dashboard .middle .report .report-info .tag-info,
.main-content .summary .left .report .report-info .tag-info,
.main-content .medical-reports .left .tag-info {
    background-color: #007BFF1A;
    color: #007BFF;
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.main-content .dashboard .middle .report .report-info .btn,
.main-content .summary .left .report .report-info .btn,
.main-content .medical-activities .activities .timeline-item .btn,
.main-content .medical-reports .left .report .report-info .btn,
.main-content .lab-test .timeline-item .btn,
.main-content .lab-test .right .btn,
.main-content .reports .activities .timeline-list .timeline-item .btn {
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    border-radius: 6px;
    padding: 7px 15px;
    color: #212529;
    font-weight: 500;
    font-size: 12px;
}

.main-content .dashboard .middle .report .report-info .btn i,
.main-content .summary .left .report .report-info .btn i,
.main-content .medical-activities .activities .timeline-item .btn i,
.main-content .lab-test .timeline-item .btn i,
.main-content .lab-test .right .btn i,
.main-content .reports .activities .timeline-list .timeline-item .btn i {
    margin-right: 3px;
    color: #D1D5DB;
}

.main-content .summary .right .analysis .pagination span,
.main-content .medication .left .medication-list .pagination span {
    font-size: 14px;
    color: #78716C;
}

.main-content .summary .right .analysis .pagination span span,
.main-content .medication .left .medication-list .pagination span span {
    font-weight: 700;
    color: #292524;
}

.main-content .summary .right .analysis .pagination .btn i,
.main-content .medication .left .medication-list .pagination .btn i {
    color: #D1D5DB;
}

.main-content .summary .right .analysis .pagination .btn i.fa-arrow-right,
.main-content .medication .left .medication-list .pagination .btn i.fa-arrow-right {
    margin-right: 0;
    margin-left: 3px;
}

.page-title {
    color: #292524;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0;
}

.page-title i {
    color: #007BFF;
}

.page-info {
    color: #6C757D;
    font-size: 14px;
}


.main-content .summary .right .analysis .analysis-entry .entry,
.main-content .medication .left .medication-list .analysis-entry .entry {
    border-bottom: 1px solid #F3F4F6;
}


.main-content .medication .right .img-box {
    width: 100%;
    height: 400px;
}

.main-content .medication .right img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.main-content .medication .right .img-info {
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.main-content .medication .right .img-info h2 {
    font-weight: 700;
    font-size: 16px;
    color: #FFFFFF;
}

.main-content .medication .right .img-info span {
    color: #FFFFFF;
    font-size: 12px;
}

.main-content .medication .right .img-info .btn {
    background-color: #007BFF;
    color: #ffffff;
    font-size: 12px;
    border-radius: 8px;
}

.main-content .medication .right .img-info .btn i {
    margin-right: 3px;
}

/* Medical reports */

.main-content .medical-reports .search-box {
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    padding: 6px 10px;
    border-radius: 8px;
}

.main-content .medical-reports .search-box i {
    color: #D1D5DB;
    font-size: 14px;
}

.main-content .medical-reports .search-box input {
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
    margin-top: -3px;
    box-shadow: none
}

.main-content .medical-reports .left .nav-pills .nav-link,
.main-content .medical-activities .nav-pills .nav-link,
.main-content .profile .nav-pills .nav-link,
.main-content .lab-test .nav-pills .nav-link,
.main-content .lifestyle .nav-pills .nav-link,
.main-content .summary .nav-pills .nav-link,
.main-content .medication .nav-pills .nav-link {
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
}

.main-content .summary .nav-pills .nav-link {
    padding: 5px 10px;
    font-weight: 400;
}

.main-content .medical-reports .left .nav-pills .active,
.main-content .medical-activities .nav-pills .active,
.main-content .profile .nav-pills .active,
.main-content .lab-test .nav-pills .active,
.main-content .lifestyle .nav-pills .active,
.main-content .summary .nav-pills .active,
.main-content .medication .nav-pills .active {
    background-color: #F9FAFB;
    color: #007BFF;
    font-weight: 600;
}

.main-content .summary .nav-pills {
    border: 1px solid #E5E7EB;
}

.main-content .summary .nav-pills .nav-link span,
.main-content .medication .nav-pills .nav-link span {
    width: 16px;
    height: 16px;
    background-color: #F3F4F6;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #212529 !important;
    font-size: 10px !important;
    font-weight: 600;
    padding: 5px;
    margin-left: 3px;
}

.main-content .summary .nav-pills .active span,
.main-content .medication .nav-pills .active span {
    background-color: #007BFF;
    color: #FFFFFF !important;
}


.main-content .summary .nav-pills .nav-link i {
    margin-right: 3px;
    color: #D1D5DB;
    font-size: 16px;
}

.main-content .summary .nav-pills .active i {
    color: #007BFF;
}

.main-content .medical-reports .left .report-details h3 {
    color: #212529;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.main-content .medical-reports .left .report-details span {
    color: #6C757D;
    font-size: 12px;
    line-height: 19px;
    display: block;
}


.main-content .medical-reports .left .report-details .nav-link {
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
}

.main-content .medical-reports .left .report-details .nav-link.active {
    color: #007BFF;
    position: relative;
}

.main-content .medical-reports .left .report-details .services .nav-link.active::before {
    content: none;
}

.main-content .medical-reports .left .report-details .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.5em;
    background-color: #007BFF;
}

.main-content .medical-reports .left .report-details .general h3 {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 8px;
}

.main-content .medical-reports .left .report-details .general .tab-heading {
    font-size: 20px;
    margin-bottom: 15px;
}

.main-content .medical-reports .left .report-details .general h5 {
    font-size: 14px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 5px;
}

.main-content .medical-reports .left .report-details .general h3 i {
    background-color: #F9FAFB;
    padding: 8px 10px;
    border-radius: 8px;
    margin-right: 5px;
    color: #007BFF;
}

.main-content .medical-reports .left .report-details .general h4 {
    color: #9CA3AF;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.main-content .medical-reports .left .report-details .general span {
    color: #6B7280;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.main-content .medical-reports .left .report-details .general span.first {
    color: #1F2937;
    font-weight: 500;
}

.main-content .medical-reports .left .report-details .general span.date {
    font-weight: 700;
    color: #6C757D;
    font-size: 12px;
}

.main-content .medical-reports .left .report-details .general .box {
    background-color: #007BFF1A;
    border-radius: 8px;
    padding: 10px 15px;
}

.main-content .medical-reports .left .report-details .general .box i {
    color: #007BFF;
    margin-bottom: 8px;
}

.main-content .medical-reports .left .report-details .general .box span {
    color: #007BFF;
    font-size: 12px;
    margin-bottom: 3px;
    font-weight: 500;
}

.main-content .medical-reports .left .report-details .general .box ul {
    padding-left: 1rem;
    margin: 8px 0;
}

.main-content .medical-reports .left .report-details .general .box ul li {
    font-size: 12px;
    color: #007BFF;
    font-weight: 500;
}

.main-content .medical-reports .left .report-details .general .btn-danger {
    background-color: #DC35451A;
    color: #DC3545;
    font-size: 10px;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    gap: 5px;
}

.main-content .medical-reports .left .report-details .general .btn-danger i {
    color: #DC3545;
    font-size: 13px;
}

.main-content .medical-reports .left .report-details .general .img-box .col-md-6>div {
    border-radius: 6px;
    border: 1px solid #F3F4F6;
    text-align: center;
    padding: 10px;
}

.main-content .medical-reports .left .report-details .general .img-box img {
    height: 184px;
    display: inline-block;
}

.main-content .medical-reports .left .report-details .general .more-details {
    border-radius: 6px;
    border: 1px solid #F3F4F6;
    padding: 15px;
}

.main-content .medical-reports .left .classification span.active {
    color: #007BFF;
    font-weight: 600;
}

.main-content .medical-reports .left .classification ul,
.main-content .medical-reports .left .classification-ol ol,
.main-content .alergies .calendar .classification ul,
.main-content .lab-test .right .green .classification ul,
.main-content .ask-ai .info ul,
.main-content .lifestyle .lifestyle-trend .trend-item ul,
.main-content .lifestyle .modal-body .content .classification ul,
.main-content .summary .modal-body .content .classification ul,
.main-content .lifestyle .nutrition .wearable .classification ul,
.main-content .lifestyle .nutrition .challenges .classification ul {
    padding-left: 1rem;
}

.main-content .medical-reports .left .classification li,
.main-content .medical-reports .left .classification-ol li,
.main-content .alergies .calendar .classification li,
.main-content .lab-test .right .green .classification ul li,
.main-content .ask-ai .info ul li,
.main-content .lifestyle .lifestyle-trend .trend-item ul li,
.main-content .lifestyle .modal-body .content .classification ul li,
.main-content .lifestyle .nutrition .wearable .classification ul li,
.main-content .lifestyle .nutrition .challenges .classification ul li {
    color: #6B7280;
    font-size: 14px;
    margin-bottom: 5px;
}

.main-content .medical-reports .left .classification li::marker,
.main-content .alergies .calendar .classification li::marker,
.main-content .lab-test .right .green .classification ul li::marker,
.main-content .ask-ai .info ul li::marker,
.main-content .lifestyle .lifestyle-trend .trend-item ul li::marker,
.main-content .lifestyle .modal-body .content .classification ul li::marker,
.main-content .lifestyle .nutrition .wearable .classification ul li::marker,
.main-content .lifestyle .nutrition .challenges .classification ul li::marker {
    color: #007BFF;
}

.main-content .medical-reports .left .classification.green li::marker {
    color: #28A745;
}

.main-content .medical-reports .left .classification.red li::marker {
    color: #DC3545;
}

.main-content .medical-reports .left span.note {
    color: #6B7280;
    font-size: 12px !important;
}

.main-content .medical-reports .left span.note i {
    color: #007BFF;
    margin-right: 3px;
}

.main-content .medical-reports .left .important-note {
    background-color: #FFC1071A;
    border-radius: 6px;
    padding: 10px 15px;
}

.main-content .medical-reports .left .fav-factor {
    background-color: #34A8531A;
}

.main-content .medical-reports .left .technical-rec {
    background-color: #007BFF1A;
}

.main-content .medical-reports .left .danger-note {
    background-color: #DC35451A;
}

.main-content .medical-reports .left .important-note i {
    color: #FFC107;
}


.main-content .medical-reports .left .important-note span {
    color: #FFC107 !important;
    font-size: 12px;
}

.main-content .medical-reports .left .fav-factor i,
.main-content .medical-reports .left .fav-factor span {
    color: #28A745 !important;
}

.main-content .medical-reports .left .technical-rec i,
.main-content .medical-reports .left .technical-rec span {
    color: #007BFF !important;
}

.main-content .medical-reports .left .danger-note i,
.main-content .medical-reports .left .danger-note span {
    color: #DC3545 !important;
}


.main-content .medical-reports .left .technical-rec span,
.main-content .medical-reports .left .danger-note span {
    font-weight: 500;
}

.main-content .medical-reports .left .fav-factor ul {
    padding-left: 1rem;
}

.main-content .medical-reports .left .fav-factor li {
    color: #28A745;
    font-size: 12px;
}

.main-content .medical-reports .left .fav-factor li::marker {
    color: #28A745;
}

.main-content .medical-reports .left .important-note li {
    color: #FFC107;
    font-size: 12px;
}

.main-content .medical-reports .left .important-note li::marker {
    color: #FFC107;
}

.main-content .medical-reports .left .clinical .clinical-box {
    border: 1px solid #F3F4F6;
    border-radius: 6px;
    padding: 10px 15px;
}

.main-content .medical-reports .left .clinical .clinical-box i {
    color: #D1D5DB;
    margin-bottom: 10px;
}

.main-content .medical-reports .left .clinical.investigation i {
    color: #007BFF !important;
}

.main-content .medical-reports .left .clinical.recovery-plan .left-plan i {
    color: #DC3545;
}

.main-content .medical-reports .left .clinical.recovery-plan .left-plan li::marker {
    color: #DC3545;
}

.main-content .medical-reports .left .clinical.recovery-plan .right-plan i {
    color: #28A745;
}

.main-content .medical-reports .left .clinical.recovery-plan .right-plan li::marker {
    color: #28A745;
}

.main-content .medical-reports .left .clinical .clinical-box h6 {
    color: #6B7280;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 5px;
}

.main-content .medical-reports .left .clinical .clinical-box h2 {
    color: #1F2937;
    font-weight: 700;
    font-size: 20px;
}

.main-content .medical-reports .left .clinical .clinical-box .progress {
    background-color: #F3F4F6;
    height: 6px;
}

.main-content .medical-reports .left .clinical .clinical-box .progress .progress-bar {
    background-color: #28A745;
}

.main-content .medical-reports .left .report-details .pharmecy .form-select {
    border: 1px solid #E5E7EB;
    color: #212529;
    font-size: 12px;
}

.main-content .medical-reports .left .report-details .pharmecy .btn-primary {
    display: inline-flex;
    align-items: center;
    color: #FFFFFF;
    padding: 7px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.main-content .medical-reports .left .report-details .pharmecy .btn-primary i {
    display: block;
    margin-right: 3px !important;
}

.main-content .medical-reports .left .report-details .pharmecy img {
    width: 100%;
    border-radius: 6px;
    height: 235px;
    object-fit: cover;
}

.main-content .medical-reports .left .report-details .pharmecy .address i {
    color: #D1D5DB;
    margin-right: 3px;
}

.main-content .medical-reports .left .report-details .pharmecy .v-separator {
    height: 100px;
    width: 1px;
    background-color: #F3F4F6;
}

.main-content .medical-reports .left .report-details .services .nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

.main-content .medical-reports .left .report-details .services .nav-pills .nav-link.active {
    color: #1F2937;
}

.main-content .medical-reports .left .report-details .services .nav-pills .nav-link img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* Medical activities */
.main-content .medical-activities .nav-pills,
.main-content .profile .nav-pills,
.main-content .medical-reports .left .report-details .services .nav-pills,
.main-content .lab-test .nav-pills,
.main-content .lifestyle .nav-pills,
.main-content .summary .nav-pills,
.main-content .medication .nav-pills {
    background-color: #FFFFFF;
    padding: 5px;
    border-radius: 8px;
    border: 1px solid #F3F4F6;
}

.main-content .summary .nav-pills {
    border: 1px solid #E5E7EB;
    padding: 2px;
}

.main-content .medical-activities .nav-pills .nav-link,
.main-content .profile .nav-pills .nav-link,
.main-content .lab-test .nav-pills .nav-link,
.main-content .medication .nav-pills .nav-link {
    padding: 5px 13px;
}

.main-content .medical-activities .form-select {
    border: 1px solid #E5E7EB;
    color: #212529;
    font-size: 13px;
}


.main-content .medical-activities .activities .timeline-list,
.main-content .medical-reports-details .timeline-list,
.main-content .lab-test .timeline-list,
.main-content .reports .activities .timeline-list {
    position: relative;
    list-style: none;
    padding-left: 0;
    border-left: 1px solid #F3F4F6;
    margin: 0;
}

.main-content .medical-activities .activities .timeline-item,
.main-content .medical-reports-details .timeline-item,
.main-content .lab-test .timeline-item,
.main-content .reports .activities .timeline-list .timeline-item {
    position: relative;
    margin-bottom: 20px;
    padding-left: 1.5rem;
}

.main-content .medical-activities .activities .timeline-icon,
.main-content .medical-reports-details .timeline-icon,
.main-content .lab-test .timeline-icon,
.main-content .reports .activities .timeline-list .timeline-icon {
    position: absolute;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px;
    height: 24px;
    background-color: #007BFF;
    border-radius: 50%;
    left: -0.75rem;
    z-index: 10;
}

.main-content .medical-reports-details .timeline-list {
    margin-left: 1rem;
}

.main-content .lab-test .timeline-list {
    margin-left: .5rem;
}

.main-content .medical-reports-details .timeline-item {
    padding-left: 1.5rem;
}

.main-content .medical-reports-details .timeline-icon {
    left: -0.8rem;
}

.main-content .medical-reports-details .timeline-item .tag.tag-info {
    color: #007BFF !important;
}

.main-content .medical-activities .activities .timeline-icon i,
.main-content .medical-reports-details .timeline-icon i,
.main-content .lab-test .timeline-icon i,
.main-content .reports .activities .timeline-list .timeline-icon i {
    color: #FFFFFF;
    font-size: 12px;
}

.main-content .medical-activities .activities .timeline-item .date,
.main-content .medical-reports-details .timeline-item .date,
.main-content .lab-test .timeline-item .date,
.main-content .reports .activities .timeline-list .timeline-item .date {
    color: #6C757D;
    font-weight: 700;
    font-size: 10px;
    margin-bottom: 3px;
}

.main-content .reports .activities .timeline-list .timeline-item .content h5 {
    color: #9CA3AF;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.main-content .reports .activities .timeline-list .timeline-item .content span {
    font-size: 14px;
}

.main-content .reports .activities .timeline-list .timeline-item .date {
    font-size: 14px;
    font-weight: 500;
}

.main-content .medical-activities .activities .timeline-item h2,
.main-content .medical-reports-details .timeline-item h2,
.main-content .lab-test .timeline-item h2,
.main-content .reports .activities .timeline-list .timeline-item h2 {
    color: #212529;
    font-size: 14px;
    font-weight: 700;
}

.main-content .lab-test .timeline-item h2 {
    line-height: normal;
}

.main-content .medical-activities .activities .timeline-item span,
.main-content .medical-reports-details .timeline-item span,
.main-content .lab-test .timeline-item span,
.main-content .reports .activities .timeline-list .timeline-item span {
    color: #6C757D;
    font-size: 12px;
    margin-bottom: 5px;
}

.main-content .medical-activities .activities .timeline-item a.read-toggle,
.main-content .medical-reports-details a.read-toggle {
    color: #007BFF;
    text-decoration: none;
    font-size: 12px;
    display: block;
    margin: 8px 0;
}

.main-content .medical-activities .activities .timeline-item a.read-toggle i,
.main-content .medical-reports-details a.read-toggle i {
    margin-left: 3px;
}

.main-content .medical-reports-details .recovery .timeline-item .row span,
.main-content .lab-test .timeline-item .row span {
    font-weight: 500;
}

.main-content .lab-test .timeline-item .row span {
    font-size: 14px;
}

.main-content .medical-reports-details .recovery .timeline-item .row i,
.main-content .lab-test .timeline-item .row i {
    color: #007BFF;
    margin-right: 3px;
}

/* Profile */
.main-content .profile .personal-info .form-label,
.main-content .providers .form-label,
.main-content .edit-prompt .form-label {
    color: #292524;
    font-size: 14px;
    font-weight: 500;
}

.main-content .profile .personal-info .form-control,
.main-content .providers .form-control {
    border: 1px solid #E7E5E4;
    border-radius: 8px;
    color: #78716C;
    font-size: 14px;
}

.main-content .profile .right .medical-info h3 {
    color: #292524;
    font-size: 14px;
    font-weight: 500;
}

.main-content .profile .right .medical-info .box {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    min-height: 65px;
    padding: 5px 10px;
}

.main-content .profile .right .medical-info a {
    color: #007BFF;
    text-decoration: none;
    font-size: 10px;
    margin-left: 5px;
    font-weight: 500;
}

.main-content .profile .language .body h3 {
    color: #1F2937;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
}

.main-content .profile .language .body span {
    color: #6C757D;
    font-size: 12px;
}

.main-content .profile .language .body .form-select,
.main-content .providers .form-select {
    border: 1px solid #E7E5E4;
    font-size: 14px;
    color: #78716C;
    max-width: 250px;
    border-radius: 8px;
}

.main-content .providers .form-select {
    max-width: 100%;
}

.main-content .profile #ai-settings .body .form-control {
    max-width: 150px;
}

.main-content .profile .language .body .form-check-input {
    margin-right: 10px;
}

.main-content .profile .language .body .form-check-input:checked {
    background-color: #007BFF;
    border-color: #007BFF;
}

.main-content .profile .language .body .btn {
    border: 1px solid #E5E7EB;
    color: #212529;
    font-size: 12px;
    border-radius: 8px;
}

.main-content .profile .language .body .btn i {
    color: #D1D5DB;
}

.main-content .profile .language .body .box {
    border: 1px solid #F3F4F6;
    border-radius: 6px;
    padding: 10px 15px;
}

.main-content .profile .language .body .box span.header {
    color: #1F2937;
    font-weight: 700;
    display: block;
}

.main-content .profile .language .body .btn-primary {
    color: #FFFFFF;
    border: 1px solid #007BFF;
    background-color: #007BFF;
}

.main-content .profile .personal-info .nav {
    border-bottom: 1px solid #F3F4F6;
}

.main-content .profile .personal-info .nav .nav-link {
    padding: 5px 0;
    color: #6C757D;
    font-size: 14px;
    margin-right: 30px;
}

.main-content .profile .personal-info .nav .nav-link.active {
    color: #292524;
    border-bottom: 2px solid #007BFF;
    font-weight: 500;
}

.main-content .profile .personal-info .form-check .form-check-label {
    font-size: 12px;
    color: #6B7280;
    margin-top: 3px;
}

.main-content .profile .personal-info .form-check.active .form-check-label {
    font-weight: 500;
    color: #1F2937;
}


.floating-brain-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.main-content .medical-reports {
    position: relative;
}

.main-content .medical-reports .floating-buttons,
.main-content .today .floating-buttons {
    display: flex;
    justify-content: center;
    gap: 5px;
    position: sticky;
    left: 0;
    /* width: 100%; */
    bottom: 20px;
    z-index: 999;
}

.main-content .medical-reports .floating-buttons .btn,
.main-content .today .floating-buttons .btn {
    box-shadow: 0px 2px 12px 0px #00000014;
    backdrop-filter: blur(8px);
    font-size: 10px;
}

.main-content .medical-reports .floating-buttons .btn.active,
.main-content .today .floating-buttons .btn.active {
    border-color: #007BFF;
    color: #007BFF;
}

.main-content .medical-reports .floating-buttons .btn.active i,
.main-content .today .floating-buttons .btn.active i,
.main-content .today .floating-buttons .btn i.fa-shield-heart {
    color: #007BFF;
}


/*=== Tooltip ===*/
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    background: #FFFFFF;
    color: #212529;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity 0.2s ease,
        visibility 0.2s ease,
        max-width 0.2s ease;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 0;
    width: max-content;
    overflow: hidden;
}

[data-tooltip]::before {
    content: '';
    position: absolute;
    border-width: 0 6px 8px 6px;
    border-style: solid;
    border-color: transparent transparent #FFFFFF transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 101;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    max-width: min(300px, calc(100vw - 40px));
}

[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

[data-tooltip].tooltip-start::after {
    left: 0;
    transform: none;
}

[data-tooltip].tooltip-end::after {
    left: auto;
    right: 0;
    transform: none;
}

[data-tooltip].tooltip-start::before {
    left: 12px;
    transform: none;
}

[data-tooltip].tooltip-end::before {
    left: auto;
    right: 12px;
    transform: none;
}

.nav-arrow {
    display: none;
}

.paired-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-content .analyze .main-pills {
    border: 1px solid #F3F4F6;
    border-radius: 10px;
    padding: 5px;
}

.main-content .providers .main-pills .nav-link,
.main-content .analyze .main-pills .nav-link {
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
}

.main-content .providers .main-pills .active,
.main-content .analyze .main-pills .active {
    background-color: #F9FAFB !important;
    color: #007BFF !important;
}

.main-content .providers .main-pills .nav-link i,
.main-content .analyze .main-pills .nav-link i {
    margin-right: 3px;
    color: #D1D5DB;
}

.main-content .providers .main-pills .active i,
.main-content .analyze .main-pills .active i {
    color: #007BFF;
}

.main-content .providers .right .analysis .tab-heading {
    font-size: 14px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 8px;
}

.main-content .providers .right .analysis .tab-heading i {
    background-color: #F9FAFB;
    padding: 8px 10px;
    border-radius: 8px;
    margin-right: 5px;
    color: #007BFF;
}

.slider-value {
    color: #007BFF;
    font-weight: 700;
}


/* == wearables == */

.main-content .wearables .cards,
.main-content .alergies .cards  {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.main-content .wearables .cards .card-item,
.main-content .alergies .cards .card-item {
    flex: 1 1 18%;
    background-color: #FFFFFF;
    border: 1px solid #F3F4F6;
    border-radius: 8px;
    padding: 15px;
}

.main-content .wearables .cards .card-item i,
.main-content .alergies .cards .card-item i {
    color: #D1D5DB;
    font-size: 20px;
    margin-bottom: 10px;
}

.main-content .alergies .cards .card-item i {
    font-size: 16px;
}

.main-content .wearables .cards .card-item h6 {
    color: #6C757D;
    font-size: 14px;
    font-weight: 600;
}

.main-content .wearables .cards .card-item h3,
.main-content .alergies .cards .card-item h3 {
    color: #1F2937;
    font-weight: 700;
    font-size: 20px;
}

.main-content .alergies .cards .card-item h3  {
    font-size: 16px;
    margin-bottom: 0;
}

.main-content .wearables .cards .card-item span,
.main-content .alergies .cards .card-item span {
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
}

.main-content .wearables .cards .card-item span.active {
    color: #28A745;
    font-weight: 600;
}

.main-content .wearables .cards .card-item span.active i {
    font-size: 10px;
    color: #28A745;
}

.main-content .wearables .cards .card-item span.inactive {
    color: #DC3545;
    font-weight: 600;
}

.main-content .wearables .cards .card-item span.inactive i {
    font-size: 10px;
    color: #DC3545;
}

.main-content .wearables .right .hr-variability-container,
.main-content .alergies .therapies {
    display: flex;
    align-items: stretch;
    gap: 24px;
    flex-direction: row;
}

.main-content .alergies .therapies .therapy {
    flex: 5;
}

.main-content .wearables .right .left-section {
    flex: 6;
}

.main-content .wearables .right .right-section {
    flex: 4;
}

.main-content .wearables .right .separator,
.main-content .alergies .v-separator {
    width: 1px;
    background-color: #F3F4F6;
}

.main-content .wearables .ecg-desc h4 {
    color: #6C757D;
    font-size: 14px;
    font-weight: 600;
}

.main-content .wearables .ecg-desc h2 {
    color: #1F2937;
    font-size: 20px;
    font-weight: 700;
}

.main-content .wearables .ecg-desc span {
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
}

.main-content .wearables .ai-insights span.title {
    color: #6C757D;
}

.main-content .wearables .ai-insights .header-link {
    text-decoration: none;
    color: #007BFF;
}

.main-content .wearables .ai-insights .nav-tab {
    border-radius: 6px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.main-content .wearables .ai-insights .nav-tab.active {
    background-color: #F9FAFB;
}

.main-content .wearables .ai-insights .nav-tab span {
    font-size: 12px;
    color: #6B7280;
}

.main-content .wearables .ai-insights .nav-tab.active span {
    font-weight: 500;
}

.main-content .wearables .ai-insights .critical span { color: #DC3545; }
.main-content .wearables .ai-insights .advisory span i { color: #FFC107; }
.main-content .wearables .ai-insights .fyi span i { color: #28A745; }

.main-content .wearables .ai-insights .overview .nav-tab.active span {
    color: #007BFF;
}

.main-content .wearables .ai-insights .info h3 {
    color: #292524;
    font-size: 14px;
    font-weight: 700;
}

.main-content .wearables .ai-insights .info span {
    color: #6C757D;
    font-size: 14px;
}

/*====== Allergies ======*/
.main-content .alergies .header .location-btn,
.main-content .alergies .header .dropdown .btn,
.main-content .alergies .calendar .left-right-btn i,
.main-content .alergies .calendar .btn {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #212529;
    font-size: 12px;
    padding: 0.5rem 10px;
    font-size: 12px;
    background-color: #FFFFFF;
    /* font-weight: 500; */
}

.main-content .alergies .calendar .btn i {
    color: #D1D5DB;
}

.main-content .alergies .calendar.recom .btn i,
.main-content .alergies .calendar.recom h4 i,
.main-content .lab-test .right h4 i {
    color: #007BFF;
}

.main-content .alergies .header .location-btn,
.main-content .alergies .header .dropdown .btn,
.main-content .alergies .calendar .btn {
    font-weight: 500;
}

.main-content .alergies .calendar {
    border: 1px solid #F3F4F6;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 10px 15px;
}

.main-content .alergies .calendar h4,
.main-content .lab-test .right h4 {
    color: #292524;
    font-weight: 700;
    font-size: 16px;
}

.main-content .alergies .calendar .date {
    color: #6C757D;
    font-size: 14px;
}

.main-content .alergies .calendar .date i {
    color: #D1D5DB;
}

.main-content .alergies .calendar .types span,
.main-content .alergies .calendar .types h6 {
    color: #6C757D;
    font-size: 14px;
    font-weight: 500;
}

.main-content .alergies .calendar .types h6 {
    color: #212529;
    margin-top: 8px;
}

.main-content .alergies .calendar .accordion .accordion-button {
    background-color: transparent;
    font-size: 14px;
    font-weight: 500;
    color: #212529;
    border-bottom: none !important;
}

.main-content .alergies .calendar .accordion .accordion-button i {
    color: #D1D5DB;
}

.main-content .alergies .calendar .accordion .accordion-body {
    border-top: none !important;
}

.main-content .alergies .therapies .therapy span {
    display: block;
}

.main-content .alergies .therapies .therapy span.info,
.main-content .alergies .therapies .therapy span.label,
.main-content .alergies .therapies .therapy span.value {
    color: #6C757D;
    font-size: 14px;
}

.main-content .alergies .therapies .therapy span.label,
.main-content .alergies .therapies .therapy span.value {
    font-weight: 500;
}

.main-content .alergies .therapies .therapy span.value {
    color: #212529;
}

.main-content .alergies .therapies .therapy h4 i {
    color: #007BFF;
}

/* Lab test */

.main-content .lab-test .timeline-item .item-content span.title,
.main-content .lab-test .timeline-item .item-content span.value {
    color: #212529;
    font-size: 14px;
    font-weight: 500;
}

.main-content .lab-test .timeline-item .item-content span.value {
    color: #6C757D;
}

.main-content .lab-test .timeline-item .date {
    font-size: 12px;
}

.main-content .lab-test .timeline-item .item-content .read-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #212529;
    font-size: 14px;
    font-weight: 500;
}

.main-content .lab-test .timeline-item .item-content span.info,
.main-content .lab-test .right span.info  {
    font-size: 14px;
    color: #6B7280;
}

.main-content .lab-test .btn {
    border-radius: 6px !important;
}

.main-content .lab-test .btn.cancel {
    border-color: #DC3545;
    color: #DC3545;
}

.main-content .lab-test .btn.cancel i {
    color: #DC3545;
}

.main-content .lab-test .right .left h5,
.main-content .lab-test .right .right h5 {
    color: #212529;
    font-size: 14px;
    font-weight: 600;
}

.main-content .lab-test .right .left .box,
.main-content .lab-test .right .right .box {
    background-color: #007BFF;
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.main-content .lab-test .right .right .box {
    background-color: #28A745;
}

.main-content .lab-test .right .left .box-label,
.main-content .lab-test .right .right .box-label {
    color: #212529;
    font-size: 10px;
    font-weight: 500;
    margin-top: -3px;
}

.main-content .lab-test .right .important {
    background-color: #DC35451A;
    border-radius: 6px;
    padding: 15px;
}

.main-content .lab-test .right .important h6 {
    color: #DC3545;
    font-weight: 700;
    font-size: 14px;
}

.main-content .lab-test .right .important span {
    color: #DC3545;
    font-size: 14px;
    font-weight: 500;
}

.main-content .lab-test .right .important .btn.cancel {
    background-color: #DC3545;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
}

.main-content .lab-test .right .important .btn.cancel i {
    color: #FFFFFF;
}

.main-content .lab-test .right .green h3,
.main-content .lab-test .right .blue h3  {
    color: #292524;
    font-size: 16px;
    font-weight: 700;
}

.main-content .lab-test .right .green h3 i {
    color: #28A745;
}

.main-content .lab-test .right .blue h3 i {
    color: #007BFF;
}

.main-content .lab-test .right .blue span {
    color: #6C757D;
    font-size: 14px;
}

.main-content .lab-test {
    position: relative
}
.main-content .lab-test .book-btn {
    position: sticky;
    margin: auto;
    bottom: 25px;
}

.main-content #wizardModal .modal-content {
    padding: 10px;
}

.main-content #wizardModal .header {
    position: relative;
}

.main-content #wizardModal .header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #007BFF33;
    z-index: 0;
    border-radius: 6px;
}

.main-content #wizardModal .header img {
    height: 150px;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.main-content #wizardModal .header h4,
.main-content #wizardModal .header span,
.main-content #wizardModal .header .btn-close {
    z-index: 1;
    position: absolute;
}

.main-content #wizardModal .header .btn-close {
    top: 5px;
    right: 5px;
    filter: invert(1);
}

.main-content #wizardModal .header h4,
.main-content #wizardModal .header span {
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1;
    text-align: center;
}

.main-content #wizardModal .header h4 {
    top: 35%;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
}

.main-content #wizardModal .header span {
    top: 55%;
    font-size: 12px;
    color: #FFFFFF;
}

.main-content #wizardModal .modal-body .wizard-steps {
    position: relative;
    counter-reset: step;
}

.main-content #wizardModal .modal-body .wizard-steps .step {
    text-align: center;
    position: relative;
    flex: 1;
}

.main-content #wizardModal .modal-body .wizard-steps .step::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    height: 2px;
    width: 100%;
    background-color: #e9ecef;
    z-index: 0;
    transform: translateX(-50%);
}

.main-content #wizardModal .modal-body .wizard-steps .step:first-child::before {
    content: none;
}

.main-content #wizardModal .modal-body .step-label {
    margin-top: 8px;
    font-size: 14px;
    color: #6c757d;
}

.main-content #wizardModal .modal-body .step.active .step-circle {
    background-color: #2f80ed;
    color: white;
}

.main-content #wizardModal .modal-body .step.active .step-label {
    color: #2f80ed;
}

.main-content #wizardModal .modal-body .step + .step::before {
    width: calc(100% + 36px);
    left: -50%;
    top: 18px;
}

.main-content #wizardModal .wizard-progress .step-indicator {
    text-align: center;
    position: relative;
    flex: 1;
}

.main-content #wizardModal .wizard-progress .step-indicator::before {
    content: "";
    position: absolute;
    top: 12px;
    left: -50%;
    height: 1px;
    width: 100%;
    background-color: #F3F4F6;
    z-index: 0;
}

.main-content #wizardModal .wizard-progress .step-indicator.active::before {
    background-color: #007BFF;
}

.main-content #wizardModal .wizard-progress .step-indicator:first-child::before {
    content: none;
}

.main-content #wizardModal .wizard-progress .step-indicator.active .step-circle {
    background-color: #007BFF;
    color: #fff;
}

.main-content #wizardModal .wizard-progress .step-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #F3F4F6;
    color: #6C757D;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.main-content #wizardModal .wizard-progress .step-label {
    margin-top: 8px;
    font-size: 12px;
    color: #6C757D;
    font-weight: 500;
}

.main-content #wizardModal .wizard-progress .step-indicator.active .step-label {
    color: #007BFF;
}

.main-content #wizardModal .modal-body .wizard-content .step-content h5 {
    color: #212529;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}  

.main-content #wizardModal .modal-body .wizard-content .step-content .form-select {
    width: 272px;
    height: 38px;
    margin: auto;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    color: #6C757D;
}

.main-content #wizardModal .modal-body .buttons {
    gap: 150px;
}

.main-content #wizardModal .modal-body .buttons .btn i {
    font-size: 12px;
}

.main-content #wizardModal .modal-body .buttons .btn {
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.main-content #wizardModal .modal-body .buttons .btn#nextBtn {
    background-color: #007BFF;
    color: #FAFAF9;
}

.main-content #wizardModal .modal-body .buttons .btn#prevBtn {
    background-color: #FFFFFF;
    color: #212529;
    border: 1px solid #E5E7EB;
}

.main-content #wizardModal .modal-body .buttons .btn#prevBtn i {
    color: #D1D5DB;
}

.main-content #wizardModal .modal-body .provider {
    width: 316px;
    margin: auto;
    border: 1px solid #F3F4F6;
    border-radius: 4px;
    padding: 5px;
}

.main-content #wizardModal .modal-body .payment-method {
    border-radius: 8px;
}

.main-content #wizardModal .modal-body .provider .nav-pills .nav-item .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #6B7280;
}

.main-content #wizardModal .modal-body .payment-method .nav-pills .nav-item .nav-link {
    font-size: 12px;
    font-weight: 400;
}

.main-content #wizardModal .modal-body .provider .nav-pills .nav-item .nav-link.active {
    background-color: #F9FAFB;
    border-radius: 6px;
    color: #1F2937;
}

.main-content #wizardModal .modal-body .payment-method .nav-pills .nav-item .nav-link.active {
    color: #007BFF;
    font-weight: 500;
}

.main-content #wizardModal .modal-body .provider .nav-pills .nav-item .nav-link img {
    width: 20px;
    height: 20px;
    display: block;
}

.main-content #wizardModal .modal-body .step-content .payment-form label {
    display: block;
    color: #6C757D;
    font-size: 12px;
    margin-bottom: 5px;
}

.main-content #wizardModal .modal-body .step-content .payment-form .form-control {
    border: 1px solid #E5E7EB;
    border-radius: 6px;
}

.main-content #wizardModal .modal-body .step-content .total h6 {
    color: #6C757D;
    font-weight: 500;
    font-size: 12px;
}

.main-content #wizardModal .modal-body .step-content .total h2 {
    color: #212529;
    font-size: 16px;
    font-weight: 700;
}

.main-content #wizardModal .modal-body .step-content .total a,
.main-content #wizardModal .modal-body .step-5 .step-5-content a,
.main-content .lifestyle .modal-body .content .medication a {
    text-decoration: none;
    color: #007BFF;
    font-size: 12px;
    font-weight: 500;
}

.main-content #wizardModal .modal-body .step-5 .step-5-content a {
    font-size: 14px;
}

.main-content #wizardModal .modal-body .step-content .total span {
    color: #6C757D;
}

.main-content #wizardModal .modal-body .step-content .payment-option span {
    font-size: 12px;
    color: #6C757D;
}

.main-content #wizardModal .modal-body .step-content .payment-option img {
    width: 30px;
    height: 30px;
    opacity: 0.2;
}

.main-content #wizardModal .modal-body .step-content .payment-option img.mastercard {
    width: 30px;
    height: 24px;
}

.main-content #wizardModal .modal-body .step-content .form-check label {
    display: block;
    color: #212529;
    font-size: 12px;
    font-weight: 500;
}

.main-content #wizardModal .modal-body .step-5 .step-5-content {
    width: 60%;
    margin: auto;
}

.main-content #wizardModal .modal-body .step-content .step-5 span {
    display: block;
}

.main-content #wizardModal .modal-body .step-5 span.label {
    font-size: 14px;
    text-transform: uppercase;
    color: #9CA3AF;
    font-weight: 600;
}

.main-content #wizardModal .modal-body .step-5 span.value {
    font-size: 16px;
    font-weight: 500;
    color: #212529;
}

.main-content #wizardModal .modal-body .step-5 .step-5-content .separator {
    width: 100%;
    height: 1px;
    background: #F3F4F6;
    margin: 15px 0 !important;
}

.main-content #wizardModal .modal-body .step-5 .step-5-content span.info {
    font-size: 14px;
    color: #6C757D;
}

.main-content #wizardModal .modal-body .step-5 .step-5-content span.info i {
    color: #007BFF;
}

/* Custom */
.time-slot {
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
}
.time-slot:hover {
    background-color: #f0f0f0;
}
.time-slot.selected {
    background-color: #2563eb;
    color: white;
}
.flatpickr-calendar {
    border: 1px solid #F3F4F6 !important;
    border-radius: 6px !important;
}
.flatpickr-months {
    margin-bottom: 15px !important;
}
.flatpickr-months .flatpickr-prev-month span svg,
.flatpickr-months .flatpickr-next-month span svg {
    color: #6C757D !important;
}

/* Ask AI */
.main-content .ask-ai .header .btn {
    border-radius: 6px;
    color: #D1D5DB;
    font-size: 14px;
}

.main-content .ask-ai .ai-content {
    display: flex;
    align-items: stretch;
    gap: 15px;
}

.main-content .ask-ai .ai-content .content {
    flex-basis: 70%;
}

.main-content .ask-ai .ai-content .separator {
    background-color: #F3F4F6;
    width: 1px;
    height: auto;
}

.main-content .ask-ai .ai-content .info {
    flex-basis: 30%;
}

.main-content .ask-ai .ai-content .content .heading .icon-box {
    width: 32px;
    height: 32px;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
}

.main-content .ask-ai .ai-content .content .heading .icon-box i {
    color: #007BFF;
    font-size: 16px;
}

.main-content .ask-ai .ai-content .content .heading h3,
.main-content .ask-ai .ai-content .info .heading h3,
.main-content .lifestyle .health-highlights h3 {
    color: #212529;
    font-weight: 700;
    font-size: 16px;
}

.main-content .ask-ai .ai-content .info .heading h3 i {
    color: #007BFF;
}

/*chat*/
.main-content .ask-ai .ai-content .content .chat-box {
    height: 70vh;
    position: relative;
}

.main-content .ask-ai .ai-content .content .chat-box .chat-content {
    height: 58vh;
    overflow: auto;
}

.main-content .ask-ai .ai-content .content .chat-message {
    display: flex;
    margin: 10px 0;
}

.main-content .ask-ai .ai-content .content .chat-message.left {
    justify-content: flex-start;
}

.main-content .ask-ai .ai-content .content .chat-message.right {
    justify-content: flex-end;
}

.main-content .ask-ai .ai-content .content .message-content {
    max-width: 80%;
    border-radius: 16px 16px 0 16px;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.main-content .ask-ai .ai-content .content .chat-message.left .message-content {
    align-self: flex-start;
    color: #212529;
}

.main-content .ask-ai .ai-content .content .chat-message.right .message-content {
    background-color: #007BFF;
    align-self: flex-end;
    padding: 10px 15px;
    color: #FFFFFF;
}

.main-content .ask-ai .ai-content .content .chat-message .action-btns {
    gap: 10px;
}

.main-content .ask-ai .ai-content .content .chat-message .action-btns i {
    color: #D1D5DB;
    cursor: pointer;
}

.main-content .ask-ai .ai-content .content .chat-box .chat-input {
    border: 1px solid #F3F4F6;
    width: 100%;
    padding: 10px;
    border-radius: 16px;
    position: absolute;
    bottom: 0;
}

.main-content .ask-ai .ai-content .content .chat-box .chat-input textarea {
    width: 100%;
    font-size: 14px;
    color: #6C757D;
    border: none;
    outline: none;
    resize: none;
}

.main-content .ask-ai .ai-content .content .chat-box .chat-input select {
    color: #212529;
    font-size: 12px;
    font-weight: 500;
    border: none;
    outline: none;
}

.main-content .ask-ai .ai-content .content .chat-box .chat-input i {
    font-size: 12px;
}

.main-content .ask-ai .ai-content .content .chat-box .chat-input i.fa-brain {
    color: #007BFF;
}

.main-content .ask-ai .ai-content .content .chat-box .chat-input .send-btn {
    width: 28px;
    height: 28px;
    background-color: #007BFF;
    border-radius: 50%;
    border: none;
    color: #FFFFFF;
}

.main-content .ask-ai .ai-content .content .chat-hint i {
    color: #4285F4;
    font-size: 11px;
    margin-right: 2px;
}

.main-content .ask-ai .ai-content .content .chat-hint span {
    color: #6C757D;
    font-size: 10px;
}

.main-content .ask-ai .ai-content .info .insights i {
    color: #D1D5DB;
    font-size: 14px;
}

.main-content .ask-ai .ai-content .info .insights span {
    font-size: 14px;
    font-weight: 500;
    color: #212529;
}

.main-content .ask-ai .ai-content .info .insights i.fa-angle-right {
    color: #6C757D;
    font-size: 10px;
}

.main-content .ask-ai .ai-content .info .insights-info span.label {
    color: #1F2937;
    font-size: 14px;
    font-weight: 500;
}

.main-content .ask-ai .ai-content .info .insights-info span.value {
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
}

.main-content .ask-ai .ai-content .info .insights-info span.value i {
    font-size: 12px;
}

.main-content .ask-ai .ai-content .info .insights-info .separator {
    margin: 10px 0;
}

.main-content .ask-ai .ai-content .info .ask-ai-doc {
    padding: 8px 15px;
}

.main-content .ask-ai .ai-content .info .ask-ai-doc span {
    color: #6C757D;
    font-size: 12px;
}

.main-content .ask-ai .ai-content .info .ask-ai-doc i {
    font-size: 10px;
    color: #6C757D;
}

.main-content .ask-ai .info ul li a {
    text-decoration: none;
    color: #007BFF;
    font-size: 12px;
    font-weight: 500;
}

.main-content .ask-ai .info ul li a i {
    font-size: 10px;
    margin-left: 10px;
}

/* lifestyle */

.main-content .lifestyle .health-highlights span {
    color: #6C757D;
    font-size: 14px;
}

.main-content .lifestyle .health-highlights i {
    font-size: 14px;
    color: #292524;
    cursor: pointer;
}

.main-content .lifestyle .health-highlights .health-cards .health-card {
    background-color: #007BFF;
    border-radius: 8px;
    padding: 15px;
    color: #FFFFFF;
    height: 100%;
}

.main-content .lifestyle .health-highlights .health-cards .health-card h3 {
    color: #FFFFFF;
}

.main-content .lifestyle .health-highlights .health-cards .health-card span {
    color: #FFFFFF;
    display: block;
    margin-bottom: 10px;
}

.main-content .lifestyle .health-highlights .health-cards .health-card a,
.main-content .lifestyle .lifestyle-items .lifestyle-item .info a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.main-content .lifestyle .health-highlights .health-cards .health-card i {
    color: #FFFFFF;
    font-size: 12px;
}

.main-content .lifestyle .health-highlights .health-cards .row {
    align-items: stretch;
}

.main-content .lifestyle .lifestyle-items .lifestyle-item .header i {
    color: #007BFF;
    font-size: 20px;
    margin-bottom: 10px;
}

.main-content .lifestyle .lifestyle-items .lifestyle-item .header h3,
.main-content .lifestyle .lifestyle-items .lifestyle-item .progress-content h3,
.main-content .lifestyle .lifestyle-trend .trend-item .header h3,
.main-content .summary .health-overview .overview-item .header h3,
.main-content .summary .health-insights .header h3,
.main-content .summary .action-plan .header h3,
.main-content .summary .laboratory .header h3,
.main-content .summary .health-condition .header h3,
.main-content .summary .recommendation .header h3,
.main-content .medication .medication-list .header h3,
.main-content .medication .ai-insights .header h3 {
    color: #292524;
    font-size: 16px;
    font-weight: 700;
}

.main-content .medication .ai-insights .header h3 {
    font-size: 20px;
}

.main-content .lifestyle .lifestyle-items .lifestyle-item .progress-content h3 {
    font-weight: 600;
}

.main-content .lifestyle .lifestyle-items .lifestyle-item .progress-content .progress {
    height: 8px;
    border-radius: 14px;
}

.main-content .lifestyle .lifestyle-items .lifestyle-item .progress-content .progress .progress-bar {
    background-color: #007BFF;
    border-radius: 14px;
}

.main-content .lifestyle .lifestyle-items .lifestyle-item .info span,
.main-content .lifestyle .lifestyle-trend .trend-item .header span,
.main-content .lifestyle .lifestyle-trend .trend-item span.info,
.main-content .lifestyle .modal-body .content span,
.main-content .lifestyle .modal-body .content .exercise-item span,
.main-content .summary .health-overview .overview-item .header span,
.main-content .summary .health-insights .header span,
.main-content .summary .action-plan .header span,
.main-content .summary .laboratory .header span,
.main-content .summary .health-condition .header span,
.main-content .summary .recommendation .header span,
.main-content .medication .medication-list .header span,
.main-content .medication .ai-insights .header span {
    font-size: 14px;
    color: #6C757D;
}

.main-content .medication .ai-insights .header span {
    font-size: 16px;
}

.main-content .medication .ai-insights span.info {
    font-size: 14px;
    color: #6C757D;
}
.main-content .medication .ai-insights span.info i {
    color: #DC3545;
    font-size: 12px;
}

.main-content .summary .health-overview .overview-item .header a {
    text-decoration: none;
    color: #007BFF;
    font-size: 14px;
    font-weight: 500;
}

.main-content .summary .health-overview .overview-item .header a i {
    font-size: 12px;
}

.main-content .lifestyle .lifestyle-items .lifestyle-item .info span.value {
    color: #212529;
    font-weight: 600;
}

.main-content .lifestyle .lifestyle-items .lifestyle-item .info span.value span {
    color: #6C757D;
}

.main-content .lifestyle .lifestyle-items .lifestyle-item .info a {
    color: #007BFF;
}

.main-content .lifestyle .lifestyle-items .lifestyle-item .info a i {
    color: #007BFF;
    font-size: 12px;
}

.main-content .lifestyle .lifestyle-trend .trend-item .status-box {
  width: 100%;
  height: 24px;
  border-radius: 6px;
  margin: 0 auto;
}

.main-content .lifestyle .lifestyle-trend .trend-item .bg-red {
  background-color: #EA4335;
}

.main-content .lifestyle .lifestyle-trend .trend-item .bg-yellow {
  background-color: #FBBC04;
}

.main-content .lifestyle .lifestyle-trend .trend-item .bg-green {
  background-color: #34A853;
}

.main-content .lifestyle .lifestyle-trend .heatmap .title {
    color: #6C757D;
    font-size: 12px;
}

.main-content .lifestyle .lifestyle-trend .trend-item .trend-box {
    padding: 8px 10px;
    min-width: 200px;
}

.main-content .lifestyle .lifestyle-trend .trend-item .trend-box i {
    color: #D1D5DB;
    font-size: 16px;
    margin-bottom: 8px;
}

.main-content .lifestyle .lifestyle-trend .trend-item .trend-box h4,
.main-content .lifestyle .lifestyle-trend .trend-item .trend-box h5 {
    color: #212529;
    font-size: 14px;
    font-weight: 600;
}

.main-content .lifestyle .lifestyle-trend .trend-item .trend-box h5 {
    font-weight: 800;
}

.main-content .lifestyle .lifestyle-trend .trend-item .trend-box span {
    color: #6C757D;
    font-size: 14px;
    font-weight: 600;
}

.main-content .lifestyle .lifestyle-trend .trend-item .trend {
    overflow: hidden;
}

.main-content .lifestyle .lifestyle-trend .trend-item .header h3,
.main-content .summary .health-overview .overview-item .header h3,
.main-content .summary .health-insights .header h3,
.main-content .summary .action-plan .header h3,
.main-content .summary .laboratory .header h3,
.main-content .summary .health-condition .header h3,
.main-content .summary .recommendation .header h3,
.main-content .medication .medication-list .header h3,
.main-content .medication .ai-insights .header h3 {
    margin-bottom: 0;
}

.main-content .lifestyle .lifestyle-trend .trend-item .header h3 i {
    color: #28A745;
}

.main-content .medication .ai-insights .header h3 i,
.main-content .medication .medication-list .header h3 i {
    color: #007BFF;
}

.main-content .lifestyle .lifestyle-trend .challenge-card {
    background-color: #007BFF;
    border-radius: 16px;
    padding: 10px;
    min-height: 144px;
    position: relative;
}

.main-content .lifestyle .lifestyle-trend .trophy-bg {
    position: absolute;
    right: -40px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
}

.main-content .lifestyle .lifestyle-trend .challenge-card .z-1 {
    position: relative;
    z-index: 1;
}

.main-content .lifestyle .lifestyle-trend .challenge-card h4 {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
}

.main-content .lifestyle .lifestyle-trend .challenge-card span {
    color: #FFFFFF;
    font-size: 14px;
}

/* Lifestyle modal */
.main-content .lifestyle .modal-body,
.main-content .summary .modal-body {
    padding: 0.5rem;
}

.main-content .lifestyle .modal-body .heading,
.main-content .summary .modal-body .heading {
    background-color: #007BFF;
    border-radius: 6px;
    position: relative;
}

.main-content .lifestyle .modal-body .heading img,
.main-content .summary .modal-body .heading img {
    width: 124px;
    display: block;
    margin: auto;
}

.main-content .lifestyle .modal-body .heading h3,
.main-content .summary .modal-body .heading h3 {
    position: absolute;
    width: 100%;
    z-index: 1;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.main-content .lifestyle .modal-body .heading h3 {
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-content .summary .modal-body .heading h3 {
    bottom: 5px;
    left: 10px;
    top: auto;
    transform: none;
    text-align: left;
}


.main-content .lifestyle .modal-body .heading .btn-close,
.main-content .summary .modal-body .heading .btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
    transform: scale(.8);
    filter: invert(1);
}

.main-content .lifestyle .modal-body .content .modal-summary,
.main-content .lifestyle .modal-body .content .meal-card {
    border: 1px solid #F3F4F6;
    border-radius: 8px;
    padding: 10px 15px;
}

.main-content .lifestyle .modal-body .content .meal-card {
    padding: 7px;
}

.main-content .lifestyle .modal-body .content .modal-summary h3 {
    font-weight: 700;
    color: #292524;
}

.main-content .lifestyle .modal-body .content .modal-summary a,
.main-content .lifestyle .modal-body .content.integrative a,
.main-content .lifestyle .nutrition a {
    text-decoration: none;
    color: #007BFF;
    font-size: 14px;
    font-weight: 500;
}

.main-content .lifestyle .modal-body .content .modal-summary a i,
.main-content .lifestyle .modal-body .content.integrative a i,
.main-content .lifestyle .nutrition a i {
    font-size: 12px;
    color: #007BFF;
}

.main-content .lifestyle .modal-body .content .meal-card img {
    width: 100%;
    height: 95px;
    object-fit: cover;
    border-radius: 6px;
}

.main-content .lifestyle .modal-body .content h3,
.main-content .lifestyle .nutrition .recipes .header h3,
.main-content .lifestyle .nutrition .groceries .header h3,
.main-content .lifestyle .nutrition .wearable .header h3,
.main-content .lifestyle .nutrition .challenges .header h3 {
    color: #212529;
    font-size: 16px;
    font-weight: 600;
}

.main-content .lifestyle .modal-body .content h3 i,
.main-content .lifestyle .nutrition .recipes .header h3 i,
.main-content .lifestyle .nutrition .groceries .header h3 i,
.main-content .lifestyle .nutrition .wearable .header h3 i,
.main-content .lifestyle .nutrition .challenges .header h3 i {
    color: #007BFF;
}

.main-content .lifestyle .modal-body .content table th {
    color: #9CA3AF;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.main-content .lifestyle .modal-body .content table td {
    color: #212529;
    font-size: 14px;
}

.main-content .lifestyle .modal-body .content .dosage table th {
    font-weight: 700;
}

.main-content .lifestyle .modal-body .content .dosage table td {
    color: #6B7280;
}

.main-content .lifestyle .modal-body .content table td.medicine {
    font-weight: 500;
}

.main-content .lifestyle .modal-body .content .recipes .recipy .label,
.main-content .lifestyle .nutrition .recipes .recipy .label {
    width: 14px;
    height: 14px;
    background-color: #007BFF;
    border-radius: 50%;
}

.main-content .lifestyle .modal-body .content .recipes .recipy .label span,
.main-content .lifestyle .nutrition .recipes .recipy .label span {
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 500;
    display: block;
}

.main-content .lifestyle .modal-body .content .recipes .recipy h3,
.main-content .lifestyle .nutrition .recipes .recipy h3 {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin-top: -3px;
    margin-bottom: 3px;
}

.main-content .lifestyle .modal-body .content .recipes .recipy span strong {
    font-weight: 600;
}

.main-content .lifestyle .modal-body .content .btn,
.main-content .lifestyle .nutrition .groceries .btn,
.main-content .lifestyle .nutrition .wearable .btn,
.main-content .lifestyle .nutrition .challenges .btn,
.main-content .lifestyle .nutrition .challenges .btn.save,
.main-content .lifestyle .nutrition .wearable .directions .btn {
    background-color: #007BFF;
    color: #FAFAF9;
    font-weight: 500;
    font-size: 12px;
    border-radius: 6px;
}

.main-content .lifestyle .nutrition .groceries .btn i,
.main-content .lifestyle .nutrition .wearable .btn i,
.main-content .lifestyle .nutrition .challenges .btn i {
    color: #FAFAF9;
    font-size: 12px;
}

.main-content .lifestyle .nutrition .challenges .btn,
.main-content .lifestyle .nutrition .wearable .directions .btn {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #212529;
}

.main-content .lifestyle .nutrition .challenges .btn i,
.main-content .lifestyle .nutrition .wearable .directions .btn i {
    color: #D1D5DB;
}

.main-content .lifestyle .modal-body .content.integrative .form-select,
.main-content .lifestyle .nutrition .wearable .form-select {
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    color: #212529;
    font-size: 12px;
    font-weight: 500;
    width: auto;
}

.main-content .lifestyle .modal-body .content .directions .btn {
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    color: #212529;
}

.main-content .lifestyle .modal-body .content .directions .btn i {
    color: #D1D5DB;
}

.main-content .lifestyle .modal-body .content .directions span i,
.main-content .lifestyle .nutrition .wearable .directions span i {
    color: #D1D5DB;
}

.main-content .lifestyle .modal-body .content .directions h3,
.main-content .lifestyle .nutrition .wearable .directions h3 {
    font-size: 14px;
    font-weight: 700;
}

.main-content .lifestyle .modal-body .content .groceries .grocery h4,
.main-content .lifestyle .groceries .grocery h4 {
    color: #212529;
    font-size: 16px;
    font-weight: 600;
}

.main-content .lifestyle .modal-body .content .groceries .grocery span,
.main-content .lifestyle .groceries .grocery h4 span {
    font-size: 14px;
    color: #6C757D;
    display: block;
    margin-bottom: 5px;
}

.main-content .lifestyle .modal-body .content .exercise-item h4,
.main-content .lifestyle .modal-body .content .apps .app h3,
.main-content .lifestyle .modal-body .content .medication .header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
} 

.main-content .lifestyle .modal-body .content .apps .app h3 {
    color: #292524;
    font-weight: 700;
}

.main-content .lifestyle .modal-body .content .apps .app .img-box,
.main-content .lifestyle .modal-body .content .apps .app .icon-box,
.main-content .lifestyle .nutrition .apps .app .img-box,
.main-content .lifestyle .nutrition .apps .app .icon-box {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    border: 1px solid #F3F4F6;
    padding: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-content .lifestyle .modal-body .content .apps .app .icon-box,
.main-content .lifestyle .nutrition .apps .app .icon-box {
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.main-content .lifestyle .modal-body .content .apps .app .icon-box i,
.main-content .lifestyle .nutrition .apps .app .icon-box {
    font-size: 14px;
    color: #D1D5DB;
}

.main-content .lifestyle .modal-body .content .apps .app .img-box img,
.main-content .lifestyle .nutrition .apps .app .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-content .lifestyle .modal-body .content .apps .app span.connected,
.main-content .lifestyle .modal-body .content .apps .app span.disconnected,
.main-content .lifestyle .nutrition .apps .app span.connected,
.main-content .lifestyle .nutrition .apps .app span.disconnected {
    color: #28A745;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.main-content .lifestyle .modal-body .content .apps .app span.disconnected,
.main-content .lifestyle .nutrition .apps .app span.disconnected {
    color: #DC3545;
}

.main-content .lifestyle .modal-body .content .apps .app span.connected span,
.main-content .lifestyle .modal-body .content .apps .app span.disconnected span,
.main-content .lifestyle .nutrition .apps .app span.connected span,
.main-content .lifestyle .nutrition .apps .app span.disconnected span {
    display: block;
    width: 6px;
    height: 6px;
    background-color: #28A745;
    border-radius: 50%;
}

.main-content .lifestyle .modal-body .content .apps .app span.disconnected span,
.main-content .lifestyle .nutrition .apps .app span.disconnected span {
    background-color: #DC3545;
}

.main-content .lifestyle .modal-body .content .challenges .challenge,
.main-content .lifestyle .nutrition .challenges .challenge {
    background-color: #007BFF;
    border-radius: 8px;
    padding: 15px;
}

.main-content .lifestyle .nutrition .challenges .challenge {
    padding-bottom: 30px;
}

.main-content .lifestyle .nutrition .wearable .map {
    width: 100%;
    height: 210px;
}

.main-content .lifestyle .nutrition .wearable .map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.main-content .lifestyle .modal-body .content .challenges .challenge h3,
.main-content .lifestyle .nutrition .challenges .challenge h3 {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}

.main-content .lifestyle .modal-body .content .assessments .assessment i,
.main-content .lifestyle .nutrition .challenges .assessments .assessment i {
    color: #D1D5DB;
    font-size: 20px;
    margin-bottom: 10px;
}

.main-content .lifestyle .modal-body .content .medication .header span {
    color: #007BFF;
    font-size: 14px;
    font-weight: 600;
}

.main-content .lifestyle .modal-body .content .medication a {
    font-size: 14px;
}

.main-content .lifestyle .modal-body .content .medication a i {
    font-size: 12px;
}

.main-content .lifestyle .modal-body .content .prompts .prompt i,
.main-content .lifestyle .nutrition .wearable .prompts .prompt i {
    color: #D1D5DB;
    font-size: 20px;
    cursor: pointer;
}

.main-content .lifestyle .modal-body .content .journaling .input-box,
.main-content .lifestyle .nutrition .challenges .input-box {
    border: 1px solid #E5E7EB;
    box-shadow: 0px 1px 2px 0px #0000000D;
    border-radius: 6px;
    padding: 10px;
}

.main-content .lifestyle .modal-body .content .journaling .input-box textarea,
.main-content .lifestyle .nutrition .challenges .input-box textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    color: #6C757D;
    font-size: 14px;
}

.main-content .lifestyle .modal-body .content .journaling .btn-date,
.main-content .lifestyle .nutrition .challenges .btn-date {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #212529;
    font-weight: 500;
    font-size: 12px;
}

.main-content .lifestyle .modal-body .content .journaling .btn-date i,
.main-content .lifestyle .nutrition .challenges .btn-date i {
    color: #D1D5DB;
}

.main-content .lifestyle .modal-body .content .alerts .alert,
.main-content .lifestyle .nutrition .wearable .alerts .alert {
    background-color: #FFC1071A;
    border-radius: 6px;
    padding: 10px;
}

.main-content .lifestyle .modal-body .content .alerts .alert span,
.main-content .lifestyle .nutrition .wearable .alerts .alert span {
    color: #FFC107;
    font-weight: 500;
    font-size: 14px;
}

/* Summary */

/* modal */
.main-content .summary .modal-body .content h3.title {
    color: #212529;
    font-size: 20px;
    font-weight: 700;
}

.main-content .summary .modal-body .content span.info {
    color: #6C757D;
}

.main-content .summary .modal-body .content .status-cards .status-card span {
    font-size: 12px;
    color: #6C757D;
}
.main-content .summary .modal-body .content .status-cards .status-card h4 {
    color: #212529;
    font-size: 18px;
    font-weight: 700;
}

/**/

.main-content .summary .health-overview .overview-item .header i {
    color: #6C757D;
    font-size: 14px;
    cursor: pointer;
}

.main-content .summary .health-overview .overview-item .content span {
    color: #212529;
    font-size: 14px;
}

.main-content .summary .history-cards {
    overflow: hidden;
}

.main-content .summary .history-cards .history-card,
.main-content .summary .action-plan .plans .plan,
.main-content .summary .laboratory .table-content,
.main-content .summary .health-condition .health-condition-cards .health-condition-card,
.main-content .summary .modal-body .content .status-cards .status-card,
.main-content .summary .recommendation .recommendation-cards .recommendation-card {
    border: 1px solid #F3F4F6;
    min-width: 170px;
    padding: 10px 15px;
    border-radius: 8px;
}

.main-content .summary .history-cards .history-card i,
.main-content .summary .action-plan .plans .plan i,
.main-content .summary .health-condition .health-condition-cards .health-condition-card i,
.main-content .summary .recommendation .recommendation-cards .recommendation-card i {
    color: #D1D5DB;
    font-size: 20px;
}

.main-content .summary .history-cards .history-card h4,
.main-content .summary .history-cards .history-card h3,
.main-content .summary .health-condition .health-condition-cards .health-condition-card h4,
.main-content .summary .health-condition .health-condition-cards .health-condition-card h3,
.main-content .summary .recommendation .recommendation-cards .recommendation-card h3 {
    font-size: 14px;
    color: #212529;
    font-weight: 600;
    margin-bottom: 8px;
}

.main-content .summary .health-condition .health-condition-cards .health-condition-card h3,
.main-content .summary .recommendation .recommendation-cards .recommendation-card h3 {
    font-size: 16px;
}

.main-content .summary .history-cards .history-card span.info,
.main-content .summary .health-condition .health-condition-cards .health-condition-card span.label {
    color: #6C757D;
    font-size: 12px;
    margin-bottom: 8px;
}

.main-content .summary .health-condition .health-condition-cards .health-condition-card span.label {
    font-size: 14px;
}

.main-content .summary .history-cards .history-card h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 0;
}

.main-content .summary .history-cards .history-card span.status i {
    font-size: 14px;
    color: #28A745;
}

.main-content .summary .history-cards .history-card span.status {
    color: #28A745;
    font-size: 14px;
    font-weight: 600;
}

.main-content .summary .history-cards .history-card span.status.danger,
.main-content .summary .history-cards .history-card span.status.danger i {
    color: #DC3545;
}

.main-content .summary .main-content,
.main-content .summary .laboratory,
.main-content .summary .health-condition,
.main-content .summary .recommendation,
.main-content .medication .medication-list,
.main-content .medication .ai-insights-items .left-item,
.main-content .medication .ai-insights-items .middle-item,
.main-content .medication .ai-insights-items .right-item {
    border: 1px solid #F3F4F6;
    border-radius: 8px;
    padding: 15px;
    background-color: #FFFFFF;
}

.main-content .summary .main-content .health-insights .insights-content,
.main-content .summary .modal-body .content .insights-content {
    border-radius: 6px;
    padding: 10px;
    background-color: #DC35451A;
    color: #DC3545;
}

.main-content .summary .main-content .health-insights .insights-content i,
.main-content .summary .modal-body .content .insights-content i {
    font-size: 18px;
    margin-bottom: 10px;
}

.main-content .summary .main-content .health-insights .insights-content h3,
.main-content .summary .modal-body .content .insights-content h3 {
    font-size: 16px;
    font-weight: 700;
}

.main-content .summary .main-content .health-insights .insights-content span,
.main-content .summary .modal-body .content .insights-content span {
    font-size: 14px;
}

.main-content .summary .main-content .health-insights .insights-content.positive,
.main-content .summary .modal-body .content .insights-content.positive {
    background-color: #34A8531A;
    color: #28A745;
}

.main-content .summary .action-plan .plans .plan h3 {
    color: #212529;
    font-size: 16px;
    font-weight: 600;
}

.main-content .summary .action-plan .plans .plan span {
    color: #6C757D;
    font-size: 14px;
    line-height: 19px;
    display: block;
    margin-bottom: 10px;
}

.main-content .summary .action-plan .plans .plan .tag,
.main-content .summary .health-condition-cards .health-condition-card .tag {
    font-size: 14px !important;
}

.main-content .summary .action-plan .plans .plan .btn,
.main-content .summary .health-condition .health-condition-cards .health-condition-card .btn {
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    color: #007BFF;
    font-size: 12px;
    font-weight: 500;
}

.main-content .summary .action-plan .plans .plan .btn i,
.main-content .summary .health-condition .health-condition-cards .health-condition-card .btn i {
    font-size: 14px;
    color: #007BFF;
}

.main-content .summary .recommendation-cards .recommendation-card .form-check-label {
    color: #6C757D;
    font-size: 12px;
}

/* medication */
.main-content .medication .medication-list .progress {
    width: 120px;
    height: 6px;
}

.main-content .medication .medication-list .progress .progress-bar {
    border-radius: 14px;
    background-color: #9CA3AF;
}

.main-content .medication .medication-list .progress .progress-bar.active {
    background-color: #28A745;
}

.main-content .medication .medication-list .table tbody td {
    vertical-align: middle;
}

.main-content .medication .medication-list .table .action-btn .status,
.main-content .medication .mb-table .status {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #E5E7EB;
}

.main-content .medication .medication-list .table .action-btn .status.active,
.main-content .medication .mb-table .status.active {
    background-color: #28A745;
}

.main-content .medication .medication-list .table .action-btn .status.active i,
.main-content .medication .mb-table .status.active i {
    color: #FFFFFF !important;
    font-size: 10px;
}

.main-content .medication .medication-list .table .action-btn .status i,
.main-content .medication .mb-table .status i {
    font-size: 10px;
    color: #212529 !important;
}

.main-content .medication .medication-list .table .action-btn a,
.main-content .medication .mb-table a {
    text-decoration: none;
    color: #007BFF;
    font-size: 12px;
    font-weight: 500;
}

.main-content .medication .medication-list .table .action-btn a i,
.main-content .medication .mb-table a i {
    color: #007BFF !important;
}

.main-content .medication .medication-list .table .action-btn .btn {
    background-color: transparent;
    border: none;
}

.main-content .medication .medication-list .table .action-btn .dropdown-menu {
    border: 1px solid #F3F4F6;
    border-radius: 8px;
    min-width: 100px;
    padding: 0 10px;
}

.main-content .medication .medication-list .table .action-btn .dropdown-menu .separator {
    height: 1px;
    width: 100%;
    background-color: #F3F4F6;
}

.main-content .medication .medication-list .table .action-btn .dropdown-menu .dropdown-item,
.main-content .medication .mb-table .action-btns a {
    padding: 8px 2px;
    font-size: 12px;
    color: #1F2937;
    font-weight: 500;
}

.main-content .medication .medication-list .table .action-btn .dropdown-menu .dropdown-item i,
.main-content .medication .mb-table .action-btns a i {
    color: #D1D5DB !important;
}

.main-content .medication .medication-list .table .action-btn .dropdown-menu .dropdown-item.delete,
.main-content .medication .mb-table .action-btns a.delete {
    color: #DC3545;
}

.main-content .medication .medication-list .table .action-btn .dropdown-menu .dropdown-item.delete i,
.main-content .medication .mb-table .action-btns a.delete i {
    color: #DC3545 !important;
}

.main-content .medication .medication-list .table .action-btn .dropdown-menu .dropdown-item:hover {
    background-color: transparent;
}

.main-content .medication .medication-list .table-content .table-footer span {
    color: #78716C;
    font-size: 12px;
}

.main-content .medication .medication-list .table-content .table-footer span span {
    font-weight: 700;
    color: #292524;
}

.main-content .medication .medication-list .table-content .table-footer .btn {
    font-size: 10px;
    border-radius: 6px;
}

.main-content .medication .medication-list .table-content .table-footer .btn i {
    font-size: 10px;
}

.main-content .medication .ai-insights-items .left-item .ai-conflict {
    background-color: #28A7451A;
    padding: 10px;
    border-radius: 6px;
}

.main-content .medication .ai-insights-items .left-item .ai-conflict h5,
.main-content .medication .ai-insights-items .left-item .ai-conflict span {
    color: #28A745;
    font-weight: 700;
    font-size: 14px;
}

.main-content .medication .ai-insights-items .left-item .ai-conflict span {
    font-weight: 500;
}

.main-content .medication .ai-insights-items .left-item .item h5,
.main-content .medication .ai-insights-items .right-item .item h5,
.main-content .medication .compatibility .left-item h5,
.main-content .medication .compatibility .middle-item h5,
.main-content .medication .compatibility .right-item h5 {
    color: #212529;
    font-size: 14px;
    font-weight: 600;
}

.main-content .medication .ai-insights-items .left-item .item h5 i,
.main-content .medication .ai-insights-items .right-item .item h5 i {
    color: #D1D5DB;
    font-size: 12px;
}

.main-content .medication .compatibility .left-item h5 i,
.main-content .medication .compatibility .middle-item h5 i,
.main-content .medication .compatibility .right-item h5 i {
    color: #007BFF;
}

.main-content .medication .ai-insights-items .left-item .item span,
.main-content .medication .ai-insights-items .right-item .item span {
    color: #6C757D;
    font-size: 14px;
}

.main-content .medication .ai-insights-items .left-item .separator,
.main-content .medication .ai-insights-items .right-item .separator,
.main-content .medication .mb-table .separator {
    height: 1px;
    width: 100%;
    background-color: #F3F4F6;
    margin: 10px 0
}

.main-content .medication .ai-insights-items .left-item .item a,
.main-content .medication .ai-insights-items .right-item .item a,
.main-content .medication .compatibility .left-item a {
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    color: #007BFF;
}

.main-content .medication .ai-insights-items .left-item .item a i,
.main-content .medication .ai-insights-items .right-item .item a i,
.main-content .medication .compatibility .left-item a i {
    font-size: 10px;
}

.main-content .medication .ai-insights-items .left-item .item .btn,
.main-content .medication .ai-insights-items .right-item .item .btn {
    color: #212529;
    font-size: 12px;
    font-weight: 500;
}

.main-content .medication .ai-insights-items .left-item .item .btn i,
.main-content .medication .ai-insights-items .right-item .item .btn i {
    color: #D1D5DB;
}

.main-content .medication .ai-insights-items .left-item .item ul,
.main-content .medication .ai-insights-items .right-item .item ul {
    padding-left: 1rem;
}

.main-content .medication .ai-insights-items .left-item .item ul li,
.main-content .medication .ai-insights-items .right-item .item ul li {
    color: #6B7280;
    font-size: 14px;
    margin-bottom: 5px;
}

.main-content .medication .ai-insights-items .left-item .item ul li::marker,
.main-content .medication .ai-insights-items .right-item .item ul li::marker {
    color: #007BFF;
}

.main-content .medication .ai-insights-items .right-item .item ul.danger li::marker {
    color: #DC3545;
}

.main-content .medication .ai-insights-items .right-item .item .info {
    background-color: #007BFF1A;
    padding: 8px 10px;
    border-radius: 6px;
}

.main-content .medication .ai-insights-items .right-item .item .info span {
    color: #007BFF;
    font-size: 14px;
    font-weight: 500;
}

.main-content .medication .compatibility .left-item .dot {
    width: 12px;
    height: 12px;
    background-color: #E5E7EB;
    border-radius: 50%;
}

.main-content .medication .compatibility .left-item .dot.green {
    background-color: #28A745;
}

.main-content .medication .compatibility .left-item .dot.yellow {
    background-color: #FFC107;
}

.main-content .medication .compatibility .left-item .dot.red {
    background-color: #DC3545;
}

.main-content .medication .compatibility .left-item .dot-box span,
.main-content .medication .compatibility .left-item .conflict-checker .title {
    color: #6C757D;
    font-size: 14px;
}

.main-content .medication .compatibility .right-item .navigator i {
    font-size: 12px;
    color: #292524;
}

.main-content .medication .compatibility .right-item .item i {
    color: #007BFF;
}

.main-content .medication .compatibility .right-item .v-separator,
.main-content .lifestyle .nutrition .wearable .directions .v-separator {
    background-color: #F3F4F6;
    height: 100%;
    width: 1px;
}

.main-content .lifestyle .nutrition .wearable .directions .v-separator {
    height: auto;
}

.main-content .medication .compatibility .middle-item .track h2 {
    color: #007BFF;
    font-weight: 800;
    font-size: 24px;
}

.main-content .medication .compatibility .middle-item .track h2.red {
    font-weight: 700;
    color: #DC3545;
}

.main-content .medication .compatibility .middle-item .track span {
    color: #6C757D;
    font-size: 14px;
    font-weight: 500;
}

.main-content .medication .modal-body label {
    color: #6C757D;
    font-size: 12px;
    margin-bottom: 5px;
}

.main-content .medication .modal-body .btn.scan-btn {
    font-size: 10px;
    color: #6B7280;
    font-weight: 500;
    padding: 5px 10px;
}

.main-content .medication .modal-body .medication-name,
.main-content .medication .modal-body .form-control {
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 0 5px;
    color: #6C757D;
    font-size: 12px;
}

.main-content .medication .modal-body .form-control {
    padding: 8px;
}

.main-content .medication .modal-body .medication-name input {
    border: none;
    outline: none;
    width: 100%;
    padding: 8px;
    color: #6C757D;
    font-size: 12px;
}

.main-content .medication .modal-body .medication,
.main-content .medication .modal-body .scan .btn {
    font-size: 14px;
    border-radius: 6px;
    font-weight: 500;
}

.main-content .medication .modal-body .medication i,
.main-content .medication .modal-body .scan .btn i {
    font-size: 10px;
}

.main-content .medication .modal-body .scan {
    border: 1px dashed #E5E7EB;
    border-radius: 6px;
    padding: 50px 10px;
}

.main-content .medication .modal-body .scan span {
    color: #6C757D;
    font-size: 14px;
}

.main-content .medication .mb-table h6 {
    color: #9CA3AF;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.main-content .medication .mb-table .category i {
    color: #D1D5DB;
    font-size: 12px;
}

.main-content .medication .mb-table span.category,
.main-content .medication .mb-table span {
    color: #1F2937;
    font-size: 12px;
    font-weight: 500;
}

.main-content .medication .mb-table span {
    color: #6B7280;
    font-weight: 400;
}

.main-content .medication .mb-table .collaps-icon i {
    color: #007BFF;
    font-size: 12px;
}

/* === Today === */

.main-content .today .header .buttons .btn,
.main-content .today .card-item.ai-action .header .btn,
.main-content .today .card-item.ai-action .items .item .btn {
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    border-radius: 6px;
    padding: 8px 10px;
    color: #212529;
    font-size: 12px;
    font-weight: 500;
}

.main-content .today .card-item.ai-action .header .btn {
    background-color: #007BFF;
    border: 1px solid #007BFF;
    color: #FFFFFF;
}

.main-content .today .header .buttons .btn i {
    color: #D1D5DB;
}

.main-content .today .header .buttons .btn i.fa-shield-heart,
.main-content .today .card-item.ai-action .items .item .btn i {
    color: #007BFF;
}

.main-content .today .header .buttons .btn i.fa-chevron-right {
    color: #292524;
    font-size: 10px;
}

.main-content .today .header span.date {
    color: #6C757D;
    font-size: 14px;
}

.main-content .today .today-cards .card-item h3,
.main-content .today .card-item.alerts .header h3,
.main-content .today .card-item.alerts .items .item h3,
.main-content .today .card-item.agenda .header h3,
.main-content .today .card-item.agenda .schedule h3,
.main-content .today .card-item.ai-action .header h3,
.main-content .today .card-item.ai-action .items .item h3 {
    font-size: 16px;
    color: #292524;
    font-weight: 700;
}

.main-content .today .card-item.agenda .schedule h3,
.main-content .today .card-item.ai-action .items .item h3 {
    font-weight: 600;
}

.main-content .today .card-item.agenda .header h3 {
    color: #FFFFFF;
}

.main-content .today .today-cards .card-item a,
.main-content .today .card-item.alerts .items .item a,
.main-content .today .card-item.agenda .schedule a {
    text-decoration: none;
    color: #007BFF;
    font-size: 14px;
    font-weight: 500;
}

.main-content .today .today-cards .card-item a i,
.main-content .today .card-item.alerts .items .item a i,
.main-content .today .card-item.agenda .schedule a i {
    font-size: 10px;
}

.main-content .today .today-cards .card-item span.info,
.main-content .today .card-item.alerts .header span,
.main-content .today .card-item.alerts .items .item span,
.main-content .today .card-item.agenda .header span,
.main-content .today .card-item.agenda .schedule span,
.main-content .today .card-item.ai-action .header span,
.main-content .today .card-item.ai-action .items .item span {
    color: #6C757D;
    font-size: 14px;
}

.main-content .today .card-item.agenda .header span {
    color: #FFFFFF;
}

.main-content .today .today-cards .card-item .left span {
    color: #212529;
    font-size: 14px;
}

.main-content .today .today-cards .card-item .left span i {
    color: #007BFF;
}

.main-content .today .card-item.alerts .items .item {
    border: 1px solid #F3F4F6;
    border-radius: 6px;
    padding: 10px 8px;
}

.main-content .today .card-item.agenda {
    padding: 8px;
}

.main-content .today .card-item.agenda .header {
    background-color: #007BFF;
    border-radius: 6px;
    padding: 10px 12px;
}

.main-content .today .card-item.agenda .schedule {
    padding: 10px 12px;
}

.main-content .today .card-item.ai-action .items .item i.title {
    font-size: 16px;
    color: #007BFF;
    margin-bottom: 10px;
}



/**/

.btn-with-icon {
    border: none !important;
    font-size: 12px;
    background-color: transparent;
    opacity: 0.4;
    transition: 0.2s;
}

.btn-with-icon.nav-btn {
    font-size: 16px;
    opacity: 1;
    color: rgba(33, 37, 41, 0.4);
}

.btn-with-icon.nav-btn strong {
    font-size: 12px;
    color: rgba(33, 37, 41, 1);
}

.btn-with-icon:hover {
    opacity: 1;
}

.btn-with-icon.nav-btn:hover {
    color: rgba(33, 37, 41, 1);
}

@media screen and (max-width: 768px) {
    .main-content .navigation .btn span {
        display: none;
    }

    .main-content .navigation .btn i {
        font-size: 12px;
        margin-right: 0;
    }

    .main-content .navigation .btn {
        padding: 4px 8px;
    }

    .main-content .dashboard .left .human-body .img-box {
        width: 250px;
        height: 350px;
        margin: auto;
    }

    .main-content .navigation i.fa-bars {
        font-size: 14px;
    }

    .main-content .navigation .bread span {
        font-size: 12px;
    }

    .main-content .dashboard .left .dot-info span {
        font-size: 10px;
    }

    .main-content .dashboard .left .dot {
        width: 8px;
        height: 8px;
    }

    .main-content .dashboard .middle .health-overview,
    .main-content .dashboard .right .medical-activity,
    .main-content .dashboard .right .appointment,
    .main-content .medical-reports .left {
        padding: 8px;
    }

    .footer {
        margin-top: 30px;
    }

    .main-content .dashboard .middle .report .report-info,
    .main-content .summary .left .report .report-info {
        padding: 10px 8px;
    }

    .main-content .summary .left .report .report-info h2 {
        font-size: 14px;
    }

    .main-content .summary .left .report .report-info p {
        font-size: 12px;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        /* height: 100vh; */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .page-title {
        font-size: 20px;
    }

    .page-info {
        font-size: 14px;
    }

    .main-content .summary .left .report img {
        height: 120px;
    }

    .main-content .summary .right .analysis .table,
    .main-content .medication .left .medication-list .table {
        display: none;
    }

    .main-content .providers .table {
        display: table !important;
    }

    .main-content .medication .right .img-box {
        height: 130px;
    }

    .main-content .medical-reports .left .btn {
        font-size: 12px !important;
        padding: 5px 10px;
    }

    .main-content .medical-reports .left .btn span {
        font-size: 12px !important;
    }

    .main-content .medical-reports .left .btn span.print {
        display: none;
    }

    .main-content .medical-reports .left .nav-pills .nav-link {
        font-size: 10px;
        padding: 5px 12px;
    }

    .main-content .medical-reports .left .header h2 {
        margin-bottom: 0;
    }

    .main-content .medical-reports .left .report-details .general .tab-heading {
        font-size: 16px;
    }

    .main-content .medical-reports .nav.flex-column {
        margin-bottom: 10px;
    }

    .main-content .medical-reports .left .report-details .general span {
        font-size: 12px;
    }

    .main-content .medical-reports .left .report-details .general h4 {
        font-size: 11px;
    }

    .main-content .medical-reports .left .report-details .pharmecy .v-separator {
        display: none;
    }

    .main-content .medical-reports .table-responsive {
        width: 300px;
        overflow-x: auto;
    }

    /* .main-content .medical-reports .nav.main-pills {
        flex-wrap: nowrap !important;
        overflow: auto;
        width: 340px;
        margin: auto;
    } */



    .medical-reports-nav-container {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        position: relative;
    }

    .medical-reports-nav-wrapper {
        width: calc(100% - 0px);
        overflow: hidden;
        position: relative;
    }

    .medical-reports-nav-scroller {
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        &::-webkit-scrollbar {
            display: none;
        }
    }

    .main-pills {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        margin: 0;
    }

    .nav-arrow {
        background: transparent;
        color: #0d6efd;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    .nav-arrow:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .main-content .medical-reports .nav.main-pills li .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        white-space: nowrap;
    }

    .main-content .medical-reports .separator {
        margin: 10px 0;
    }
    .main-content .dashboard .left .dot-info {
        width: 100%;
    }
    .brain-input-panel {
        width: 92%;
    }

    .main-content .wearables .cards .card-item {
        flex: 1 1 calc(50% - 10px);
    }

    .main-content .alergies .therapies {
        flex-direction: column;
    }

    .main-content #wizardModal .modal-body {
        padding: 1rem 0;
    }
    .main-content #wizardModal .modal-body .step-4 .w-50 {
        width: 90% !important;
    }
    .main-content #wizardModal .modal-body .step-5 .step-5-content {
        width: 95% !important;
    }
    .main-content .ask-ai .ai-content .content {
        flex-basis: 100%;
    }
    .main-content .ask-ai .ai-content .content .message-content {
        max-width: 100%;
    }

    .main-content .ask-ai .ai-content .modal .btn-close {
        transform: scale(.8);
    }

    .main-content .medication h2 {
        font-size: 18px;
    }
    .main-content .medication .medication-list .progress {
        width: 80px;
    }
    .main-content .medication {
        position: relative;
    }
    .main-content .medication .add-med-btn {
        position: sticky;
        bottom: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: 999;
    }
}

@media (max-width: 1200px) {
    .main-content .overview {
        flex-direction: column !important;
    }

    .main-content .overview > .col-md-4,
    .main-content .overview > .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    .main-content .overview > .col-md-4 {
        margin-bottom: 1rem;
    }
}