@charset "utf-8";
/* CSS Document */
body { font-family: 'Roboto', Arial, Helvetica, sans-serif; color: #666; font-size:18px; line-height:26px; font-weight: normal; margin:30px 0; }
img { max-width: 100%; }

a {
    color: #428bca;
    text-decoration: none;
}

.container { max-width:1200px; padding:0; }
.margin10 { margin-bottom:10px; }
.margin20 { margin-bottom:20px; }
.margin30 { margin-bottom:30px; }
.margin40 { margin-bottom:40px; }
.margin50 { margin-bottom:50px; }
.margin-top { margin-top:115px; }
a:hover, :hover { -webkit-transition: ease-out 0.2s; -moz-transition: ease-out 0.2s; -o-transition: ease-out 0.2s; transition: ease-out 0.2s; text-decoration:none; }

.logo { margin:0 0 30px 0; text-align:left; }

.red-sign { margin:0 0 0 30px; }
.red-sign ul { list-style: none; padding:0; margin-top:15px; }
.red-sign ul li:before { content: '✓'; color:#029341; font-weight: bold; width:20px; display: inline-block; margin-left:-30px; }
.red-sign ul li { list-style-type:none; color: #666; line-height:26px; margin-bottom:5px; font-weight: normal; }

.red-sign-hori { margin:0 0 0 30px; }
.red-sign-hori ul { list-style: none; padding:0; margin-top:15px; }
.red-sign-hori ul li:before { content: '✓'; color:#EB2125; font-weight:bold; width:15px; display: inline-block; }
.red-sign-hori ul li { list-style-type:none; color: #666; line-height:26px; margin-bottom:5px; font-weight: normal; margin-right:15px; }

h2 { font-size:26px; color:#eb1c22; text-decoration:none; margin:20px 0 10px 0; line-height:30px; font-weight:normal; }
h3 { font-size:22px; color:#666; text-decoration:none; font-weight:500; text-align: left; margin: 10px 0; }
h4 { font-size:18px; color:#666; text-decoration:none; font-weight:600; margin-top:20px; }
p { font-size:16px; color:#333; line-height: 24px; text-decoration:none; margin:10px 0; }

.button { background-color:transparent; }
.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.3s; }
.button span:after {  content:'»'; position: absolute;  opacity: 0;  top: 0;  right: -20px;  transition: 0.5s; }
.button:hover span {  padding-right: 25px; }
.button:hover span:after { opacity: 1; right:0; }

.btn-general { background-color:#029341; padding:6px 30px; color:#FFF; font-size:16px; text-decoration:none; font-weight:500; border-radius:25px; border:0; margin:10px 0; }
.btn-general:hover { background-color:#333; color:#FFF; }

.btn-blue { background-color:#029341; padding:10px 40px; color:#FFF; font-size:18px; text-decoration:none; font-weight:500; border-radius:25px; border:0; margin:20px 5px; }
.btn-blue:hover { background-color:#333; color:#FFF; }

.btn-blue100 { background-color:#029341; padding:7px 50px; width:100%; color:#FFF; font-size:16px; text-decoration:none; font-weight:500; border-radius:25px; border:0; margin:10px 0 0 0; }
.btn-blue100:hover { background-color:#333; color:#FFF; }

.btn-red100 { background-color:#333; padding:7px 50px; width:100%; color:#FFF; font-size:16px; text-decoration:none; font-weight:500; border-radius:25px; border:0; margin:20px 0 10px 0; }
.btn-red100:hover { background-color:#000; color:#FFF; }

.btn-blue-small { background-color:#029341; padding:5px 30px; color:#FFF; font-size:15px; text-decoration:none; font-weight:500; border-radius:20px; border:0; margin:3px 0; }
.btn-blue-small:hover { background-color:#333; color:#FFF; }

.btn-light-blue { background-color:#029341; padding:10px 30px; color:#FFF; font-size:15px; text-decoration:none; font-weight:500; border-radius:20px; border:0; margin:3px 0; }
.btn-light-blue:hover { background-color:#333; color:#FFF; }

.greyline { border-bottom:1px solid #CCC; margin:10px 0; }

.grey-border-box { border:1px solid #CCC; padding:30px 20px; text-align:left; margin-top:30px; }
.grey-border-box h2 { font-size:26px; color:#666; text-decoration:none; margin:10px 0 10px 0; line-height:30px; font-weight:bold; }
.grey-border-box ul { list-style: none; padding:0; margin-top:15px; }
.grey-border-box ul li:before { content: '✓'; color:#029341;  }
.grey-border-box ul li { list-style-type:none; color: #666; font-size:16px; line-height:26px; display:inline; margin-bottom:8px; font-weight: normal; }

.prescription {}
.prescription .border-box-left { border:1px solid #CCC; padding:50px; text-align:left; margin-top:10px; }
.prescription .border-box-left p { font-size:18px;}
.prescription .border-box { border:1px solid #CCC; padding:18px; text-align:left; margin-top:10px; }
.prescription .border-box h4 { padding:0; margin:0; }
.prescription .border-box p { font-size:16px; line-height:22px; }

.grey-bg { background-color:#f6f6f6; padding:20px; margin-top:20px; text-align:center; font-size:14px; line-height:20px; }
.grey-bg h2 { margin:0;}

.grey-bg-small { background-color:#f6f6f6; padding:10px 20px; margin-top:10px; text-align:center; font-size:14px; line-height:20px; text-align:left; }
.grey-bg-small h2 { margin:0; padding:0; }
.greyline-small { border-bottom:1px solid #CCC; margin:10px 0; }

.service-grey-bg { background-color:#f6f6f6; padding:15px 20px; margin:20px 0; text-align:center; font-size:14px; line-height:20px; text-align:center; }
.service-grey-bg h2 { margin:0; padding:0; }

.service-box { text-align:center; border:1px solid #CCC; margin-bottom:30px; }

.progressbar { counter-reset: step; }
ul.progressbar { margin:0; padding:0; }
.progressbar li { list-style-type: none; width: 33%; float: left; font-size: 12px; position: relative; text-align: center; text-transform: uppercase; color: #7d7d7d; }
.progressbar li:before { width: 40px; height: 40px; content: ""; line-height: 40px; border: 2px solid #7d7d7d; display: block; text-align: center; margin: 0 auto 3px auto;
    border-radius: 50%; position: relative; z-index: 2; background-color: #fff; }
.progressbar li:after { width: 100%; height: 2px; content: ''; position: absolute; background-color: #7d7d7d; top: 21px; left: -50%; z-index: 0; }
.progressbar li:first-child:after { content: none; }
.progressbar li.active { color: #fff; font-weight: bold; }
.progressbar li.active:before { border-color: #cc0909; background: green; }
.progressbar li.active + li:after { background-color: #cc0909; }
.progressbar li.active:before { background: #cc0909  url(user.svg) no-repeat center center; background-size: 60%; }
.progressbar li::before { background: #fff url(user.svg) no-repeat center center; background-size: 60%; }
.progressbar li:before { content: counter(step); counter-increment: step; }

.form-group { text-align:left; margin-bottom:6px; }
.form-control { border: 2px solid #c2c2c2; }
label { margin-bottom: 2px; font-size: 16px; }
.transfer-rx h3 { margin:30px 0 20px 0; padding-top:30px; }
.transfer-rx p { font-size:15px; text-align:left; line-height:20px; }

.address-book-box { background-color:#f4f4f4; padding:25px; text-align: left; margin-bottom:10px; }
.address-book-box h4 { font-size:22px; font-weight:bold; margin:0; border-bottom:1px solid #ccc; padding:0 0 10px 0; }
.address-book-box p { font-size:18px; line-height:30px; }

.preferences { margin:30px 0; text-align:left; }
.preferences p { font-size:18px; margin:5px 0; }
.preferences span { font-weight:bold; margin-right:10px; }

.prescription-history { text-align:left; }
.prescription-history .right-part { text-align:center; }

.accordion-heading { margin:0; text-decoration: none; height:46px; font-size:18px; padding:10px; }
.accordion-heading a { color:#666; margin-right:30px; }
.accordion-heading a:hover { color:#666; }
.accordion-heading p { font-size:18px; line-height:25px; }
.accordion-heading span { color:#666; font-size:16px; text-align:right; float:right; margin-right:20px; font-size:18px; }

.accordion-toggle:after { font-family: 'FontAwesome'; content: "\f078"; float: right; }
.accordion-opened .accordion-toggle:after { content: "\f054"; }
.accordion-inner { padding:12px; background-color: #FFF; }
.accordion-inner h3 { color:#ec1f26; margin:30px 0 10px 0; }

.panel-body { padding: 10px; color:#666; text-decoration:none; }

.white-box { background-color:#E5E5E5; padding:1px; margin-bottom: 10px; overflow: hidden; font-size: 14px; text-align:left; border-radius:10px; }

/*.table td, .table th { padding: .3rem; vertical-align: top; border-top: 0px solid #dee2e6; font-size:16px; }*/

.grey-underlink { text-decoration: underline; color:#333; margin-left:15px; }
.grey-underlink:hover { text-decoration:none; }

.progressbar-tick { counter-reset: step; }
ul.progressbar-tick { margin:0; padding:0; }
.progressbar-tick li { list-style-type: none; width: 20%; float: left; font-size: 12px; position: relative; text-align: center; text-transform: uppercase; color: #7d7d7d; }
.progressbar-tick li:before { width: 40px; height: 40px; content: ""; line-height: 40px; border: 2px solid #7d7d7d; display: block; text-align: center; margin: 0 auto 3px auto; border-radius: 50%; position: relative; z-index: 2; background-color: #fff; }
.progressbar-tick li:after { width: 100%; height: 2px; content: ''; position: absolute; background-color: #7d7d7d; top: 21px; left: -50%; z-index: 0; }
.progressbar-tick li:first-child:after { content: none; }
.progressbar-tick li.active { color: #fff; font-weight: bold; }
.progressbar-tick li.active:before { border-color: #029341; background: green; }
.progressbar-tick li.active + li:after { background-color: #1b75ba; }
.progressbar-tick li.active:before { background: #029341  url(user.svg) no-repeat center center; background-size: 60%; }
.progressbar-tick li::before { background: #fff url(user.svg) no-repeat center center; background-size: 60%; }
.progressbar-tick li:before {  content: "\2713"; counter-increment: step; }

.health-track-setup .box { border:1px solid #CCC; padding:20px; text-align:left; margin-top:20px; }
.health-track-setup input { width:80px; border-radius:5px; border: 2px solid #c2c2c2; height:35px; width:100%; text-align:center; }
.health-track-setup .smalllink { font-size:14px; color:#666; }
.health-track-setup .smalllink:hover { font-size:14px; }
.fa-edit { color:#1b75ba; }
.health-hide { display:none; }
.health-display { display: block; text-align:center; }

.health-track-setup .inputhide { width:80px; border-radius:5px; border: 0px solid #c2c2c2; height:35px; width:100%; text-align:center; }
.health-track-setup .dottedline { border-right:1px dotted #999999; }
.health-track-setup .notification { border:1px solid #CCC; padding:0px 20px 20px 20px; margin-top:20px; }
.health-track-setup .notification tr { height:45px; }

.prescription-reminder .box { border:1px solid #CCC; padding:0 20px 20px 20px; text-align:left; margin-top:20px; }

.blood-pressure h3 { margin:10px 0 20px 0; border-bottom:1px solid #CCC; padding:0 0 7px 0; font-weight:normal; }
.blood-pressure .height60 { height:60px; }
.blood-pressure .inputbig { height:100px; }
.blood-pressure p { font-size:15px; text-align:left; line-height:20px; }

.table-responsive { display:block; font-size:17px; }
.table-secondary, .table-secondary>td, .table-secondary>th { height: 50px; }
.table-striped tbody tr:nth-of-type(odd) { height: 40px; }

.color-normal { color:#87c91e; font-weight:bold; }
.color-prehypertension { color:#d7a703; font-weight:bold; }
.color-hypertension { color:#ff3000; font-weight:bold; }
.color-hypotension { color:#25a9df; font-weight:bold; }

.pharmacy-club-card {}
.pharmacy-club-card .border-box-left { border:1px solid #CCC; padding:50px; text-align:left; margin-top:10px; }
.pharmacy-club-card .border-box-left p { font-size:18px;}
.pharmacy-club-card .border-box { border:1px solid #CCC; padding:5px 10px; text-align:left; margin-top:10px; }
.pharmacy-club-card .border-box h4 { padding:0; margin:40px 0 0 0; }
.pharmacy-club-card .border-box p { font-size:16px; line-height:22px; }

.myaccount label { font-size:14px; }
.myaccount input { border:1px solid #CCC; border-radius:4px; height:38px; }
.myaccount .form-control { margin-bottom: 0px; }
.myaccount small { line-height:12px; }
.myaccount .form-check { margin-bottom:5px; }

.btn-red-small { color: #FFF; background-color: #cc0909; padding:5px 25px; margin:10px 0; }
.btn-red-small:hover { color: #FFF; background-color: #333; }

@media (max-width: 576px) {
	.logo { margin: 0 0 0px 0; text-align: left; width:80%; }
	.margin-top { margin-top:0px; }
	.red-sign ul li:before { content: '✓'; color:#029341; font-weight: bold; width:20px; display: inline; margin-left:-20px; }
	.red-sign-hori ul li { display: block; }
	.red-sign-hori ul li:before { content: '✓'; color:#029341; font-weight:bold; width:20px;  margin-left:-20px; }
	.row { margin:0;}
	.prescription .border-box-left { padding: 20px; }
	.prescription .border-box { text-align: center; }
	.pharmacy-club-card .border-box { text-align: center; }
	.pharmacy-club-card .border-box h4 { padding:0; margin:0px 0 0 0; }
	.pharmacy-club-card .border-box-left { padding:15px; }
	.grey-border-box { padding:15px; }
	.service-box { margin-bottom: 10px; }
	.greyline { margin: 20px 0; }
	
	.health-hide { display: block; }
	.health-display { display: none; }
	.health-track-setup .box { padding:10px; }
	.accordion-inner { padding:5px; }
	}

@media (max-width: 768px) {
	.logo { margin: 0 0 0px 0; text-align: left; }
	.row { margin:0;}
	.margin-top { margin-top:0px; }
	.grey-border-box { padding:15px; }
	.prescription .border-box { text-align: center; }
	.prescription .border-box-left { padding: 20px; }
	.service-box { margin-bottom: 10px; }
	.greyline { margin: 0px 0; }
	}

@media (max-width: 992px) {
	.logo { margin: 0 0 0px 0; text-align: left; }
	.row { margin:0;}
	.margin-top { margin-top:0px; }
	}

@media (max-width: 1200px) {
	.row { margin:0;}
	}
	
	     /* Fixed sidenav, full height */
/*.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}*/

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
   padding: 12px 10px;
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
   margin:0;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #818181;
  background-color:#eee;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.sidenav .active {
  background-color: #F5F5F5 !important;
  color: #262626 !important;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #fff;
  padding-left: 8px;
}
.fa {
  /*  font-family: "FontAwesome";
    font-weight: normal;
    font-size: 14px;
    color: #999; */
}
/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

.button-blue-auto, .button-blue-auto:hover {background-color: #CC0909;border:none;color:white;width:auto;padding:10px 40px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;cursor: pointer;border-radius:5px;margin-top:10px;}

.red-bg-small { background-color:#cc0909; padding:15px; font-size:14px; text-align: center; }
@media (max-width: 575.98px) { .red-bg-small { padding:10px; } }
.red-bg-small h2 { color:#FFF; font-size:26px; }

.blood-test .border-box { border: 1px solid #CCC; padding:5px 10px 20px 10px; text-align: left; margin-top: 10px; }
@media (max-width: 575.98px) {.blood-test .border-box { text-align: center; } }

.select-report-box { border:1px solid #cacaca; margin-top:30px; text-align:center; padding:30px 150px; }
@media (max-width: 575.98px) { .select-report-box { text-align:center; padding:10px; } }

.select-report-box h4 { margin:0; }
.select-report-box ul { margin:0; padding:0; }
.select-report-box ul li a { background-color:#0676b9; color:#FFF; margin-bottom:10px; display:block; border-radius:7px; padding:5px; text-decoration:none; font-weight:bold; }

.admin-dashboard-help-you-box { background-color:#f0f0f0; text-align:center; }
.admin-dashboard-help-you-box h3 { font-size:26px; color:#cc0909; margin:0; padding:20px; }

.greyline { border-bottom:1px solid #CCC; padding:10px 0; }
.greyhead { font-size:22px; color:#333; }
.redhead { font-size:22px; color:#ec2228; font-weight:bold; }
.redtext18 { font-size:18px; color:#ec2228; font-weight:bold; }

.btn-info { color: #fff; background-color: #113859; border-color: #113859; }
.btn-info:hover { color: #fff; background-color: #FF0406; border-color: #FF0406; }

.btn-grey { color: #333; background-color: #e2e2e2; width:100%; }
.btn-grey:hover { color: #FFF; background-color: #FF0406; width:100%; }

.btn-greylight { color: #FFF; background-color: #999; padding:3px 15px; }
.btn-greylight:hover { color: #FFF; background-color: #666; }

.admin .big-title {
    font-size: 26px;
    color: #0676b9;
    margin-top: 18px;
}