﻿.manage-health-banner{padding:31px 0px;gap:24px;background: #146557; margin:0px 0px 40px;}
.manage-health-banner .title h1{margin:0px; font-size:32px; font-weight:600;color:#fff; line-height:32px;margin:0px 0px 12px;}
.manage-health-banner .title p{font-size:20px; line-height:normal;font-weight:400; color:#fff;}
.manage-health-banner .health-img {max-width: 300px;margin-right: 90px;}
.outcomes-sec{display:flex; height:100%;}
.outcomes-card {max-width: 100%;border: 1px solid var(--light-bg-color);border-radius: 6px;padding: 0;background: var(--white-color);padding-bottom: 24px;margin-bottom: 50px;position: relative;overflow: hidden;}
.outcomes-card .card-img {max-width: 100%;margin-left: 0;justify-content: center; position:relative;}
.outcomes-card .card-img img {width: 100%;max-height: 250px;object-fit: cover;}
.outcomes-card .card-content {padding: 24px 24px 70px;width: 100%;min-height:150px;}
.outcomes-card .card-content h4 {font-weight: 600;color: var(--woodsmoke-color); margin:0px 0px 12px;}
.outcomes-card .card-content p {line-height: 24px;font-weight: 400;font-size: 16px;margin:0px;}
.card-completed {border-radius: 4px 0px 0px 4px;background: rgba(236, 243, 237, 0.60);backdrop-filter: blur(30px);position: absolute;left: 0;right: 0;width: 100%;text-align: center;bottom: 0;display: flex;padding: 16px 24px;justify-content: center;gap: 8px;align-items: center;}

.outcomes-card .icon-bg-btn {position: absolute;min-width: 160px;bottom: 24px;margin:24px 24px 0;}
.outcomes-card .card-list{padding:24px 0px 0px; border-top:1px solid #E9ECF0; margin:0px 24px;}
.outcomes-card .card-list p{margin:0px 0px 11px;}
.outcomes-card .card-list .text-muted {color: var(--nevada-color);margin-right: 4px;}

/*Manage Haemoglobin modal*/
.manage-info ul li {font-size: 14px;line-height: 18px;margin: 0px 0px 8px;font-weight: 400; padding-left:12px; position:relative;}
.manage-info .info-box {padding: 13px 9px;width: 260px;top: 36px;z-index: 10;right: -55px; left:auto;}
.manage-info ul li:after {position: absolute;content: "";height: 4px;width: 4px;background-color: var(--nevada-color);z-index: 1;left: 0;top: 8px;border-radius: 50%;}
.manage-info .info {margin:16px 0 0;}
.bloodplessure-modal .modal-body p {color: var(--nevada-color);font-size: 16px;line-height: 22px;}
.information-popup .modal-content {border-radius: 20px;align-items: center;}
.information-popup .modal-body {text-align: center;padding: 32px 72px;}
.information-popup .modal-body h3 {font-size: 20px;line-height: 32px;margin: 8px 0 24px;}
.information-popup .modal-body p {color: #646F7D;font-size: 16px;line-height: normal;font-weight: 500;}
.information-popup .modal-body h2 {margin: 8px 0px 0px;font-size: 24px;font-weight: 600;padding: 0;line-height: 32px;}
.bp-close{ position:absolute; right:29px; top:29px; z-index:99;}
.float-message{position:absolute; right:16px; top:50%; transform:translateY(-50%)}
.range-slider-sec .slider-list {display: flex;align-items: center;justify-content: space-between;margin:0px 6px 29px;}
.range-slider-sec .slider-list li {width: 2px;height: 3px;flex-shrink: 0;opacity: 0.3;background-color:#212121;margin:0px;border-radius:10px;}
.range-slider-sec .slider-list li.slider-list-num {opacity: 0.6;width: 2px;height: 6px;font-size:8px;font-weight:400;}
.range-slider-sec li.slider-list-num span {margin: 4px -1px;display: inline-block;font-size: 9px;}
.range-slider-sec .range-slider-sec .range-slider .range-slider__rangei.slider-list-num span {margin: 8px -2px 0 !important;display: inline-block;}
.range-slider-sec .slider {width: 100%;-webkit-appearance: none;appearance: none;height: 4px;background: var(--slider-fill);border-radius: 5px;outline: none;transition: background 0.3s ease-in-out;}
.range-slider-sec .tooltip-sec { margin: var(--tooltip-margin);position: absolute;top: 90px;background-color: var(--primary-color);color: white;border-radius: 5px;transform: translateX(-50%);white-space: nowrap;display: flex;align-items: center;justify-content:center;gap: 5px;pointer-events: auto;height: 28px;width:66px;left: var(--tooltip-position);}
.range-slider-sec .tooltip-button { background: none;border: none;color: white;font-size: 16px;cursor: pointer; padding: 0px;pointer-events: auto;margin-top:-3px;}
.range-slider-sec .tooltip-button:focus {outline: none;}
.range-slider-sec .tooltip-value {font-size: 14px;}
.range-slider-sec .slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 16px;height: 16px;background-color: white;border: 1px solid gray; border-radius: 50%;cursor: pointer;box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); cursor:pointer;}
.range-slider-sec .slider::-moz-range-thumb {width: 24px;height: 24px;background-color: white;border: 2px solid gray; border-radius: 50%;cursor: pointer;box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);}
.range-slider-sec .tooltip-sec:after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -8px;border-width: 6px;border-style: solid;border-color: #d64029 transparent transparent transparent;}
.range-slider-sec .range-slider-sec {margin:0px 0 4px;}

@media (min-width:1300px) and (max-width:1919px) {
    .outcomes-card .card-content {
     padding: 24px 24px 65px;
    }
}

@media (min-width:768px) and (max-width:1439px) {
.manage-health-banner {margin: 0px 0px 40px;padding: 16px 0px 18px 0px;}
.manage-health-banner .title {margin-right: 50px;}
.manage-health-banner .health-img {margin-right: 16px;}
}
@media(max-width:1439px) {
.outcomes-card .card-content h4 {margin: 0px 0px 8px;font-size: 19px;line-height: 24px;}
.card-completed {padding: 10px 24px;}
.outcomes-card .card-content {padding: 18px 18px 60px;}
}
@media(max-width:767px) {
.outcomes-card {max-width: 100%;border: 1px solid var(--light-bg-color);border-radius: 6px;margin-bottom: 24px;}
.outcomes-card .icon-bg-btn {position: relative;bottom: 0;margin: 0px 16px 0;}
.manage-health-banner .health-img {display: none;}
.manage-health-banner .title h1 {font-size: 28px;line-height: 28px;}
.information-popup .modal-body {text-align: center;padding: 32px;}
.information-popup .modal-body h3 {font-size: 20px;line-height: 28px;margin: 8px 0 18px;}
.outcomes-card .card-content {padding: 18px;min-height: 160px;}
.checkout-form .custom-link {margin: 12px 0 0;}
.manage-info .info-box {right: -14px;}
.manage-health-banner {padding: 24px 10px 16px;margin: 0px 0px 22px;}
.manage-health-banner .health-img {margin-right: 0;}
}