/*!
 * Start Bootstrap - SB Admin 2 v3.3.7+1 (http://startbootstrap.com/template-overviews/sb-admin-2)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

html {background: linear-gradient(to right, #62aeae, #1f6a7b, #24447f); min-height: 100%;} 

body {
  background: transparent;
  font-family: 'Calibri', Sans-Serif; font-size:15px; color:black; margin:0; padding:0; 
  line-height: 1.4em;
}

h1, h2, h3, h4, h5, h6{line-height: 1;color: #333;font-weight:400; padding:0;margin:0 0 10px 0;}
h1, h2,h3,h4,h5,h6{font-size:1.15em;}
h1{ font-size:1.8em; line-height:2.4em; font-weight:300;}
h2{ font-size:1.6em; line-height:2.2em;}
h3{ font-size:1.5em; line-height:2.1em;}
h4{ font-size:1.4em; line-height:2em;}
h5{ font-size:1.1em; line-height:1.6em; color: #0c5d86; text-transform: uppercase; font-weight: bold; margin-left: 0px;}
h6{ font-size:1em; line-height:22px;}
p{ padding:0 0 18px 0; margin:0;}
a{ color:#4085de; text-decoration:none;}
a:hover{ color:#2465ba; text-decoration:none;}
:focus,a:focus{outline: none; text-decoration:none;}
.link-primary{ display:inline-block; background-color:#e9f1f3; color:#1f6a7b!important; border:1px solid rgba(31,106,123,.20); font-size:12.5px; font-weight:500; line-height:1.5; padding:3px 11px; margin:0 6px 6px 0; -webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px; white-space: nowrap;}
.link-success{ display:inline-block; background-color:#e7f4de; color:#3f8a26 !important; border:1px solid rgba(114,198,68,.30); font-size:12.5px; font-weight:500; line-height:1.5; padding:3px 11px; margin:0 6px 6px 0; -webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px; white-space: nowrap;}
.link-warning{ display:inline-block; background-color:#e2f2f8; color:#2a86a0 !important; border:1px solid rgba(96,192,220,.35); font-size:12.5px; font-weight:500; line-height:1.5; padding:3px 11px; margin:0 6px 6px 0; -webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px; white-space: nowrap;}
.link-standard{ display:inline-block; background-color:transparent; color:#444 !important; font-size:12.5px; font-weight:500; line-height:1.5; padding:3px 11px; margin:0 6px 6px 0; -webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px; white-space: nowrap;}
.link-secondary{ display:inline-block; background-color:#eef3f7; color:#37474f !important; border:1px solid #dce5ec; font-size:12.5px; font-weight:500; line-height:1.5; padding:3px 11px; margin:0 6px 6px 0; -webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px; white-space: nowrap;}
.link-inactive{ display:inline-block; background-color:#eee; color:#000 !important; font-size:1em; padding:0px 12px;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px; white-space: nowrap;}

.modal-dialog-large {
  width: auto;
  margin-left: 2.5em;
  margin-right: 2.5em;
  margin-top: 1%;
  margin-bottom:1%;
  height: auto;
}

.modal-dialog-small {
  width: 20%;
  vertical-align: middle;
}

.modal-dialog-long {
  position: absolute;
  height: auto;
  width: auto;
  margin-bottom: 5px;
}

#wrapper {height: 100%; margin-left: 50px;}
#page-wrapper {padding:20px 15px 20px; background: transparent; position:relative;}
/*.page-content:before{ content:''; display:block; width:100%; height:100%; background-color:#3c90d830; position: absolute; top:0px; left:0; z-index:-1; width:100%; height:100vh;}*/
.navbar{min-height: 0px;}
.navbar-header{ float: none; display: none;}
.navbar-brand{ height:69px;}
.navbar-brand > img{ max-height:40px;}

.navbar-default{ background-color:#fff;}
.navbar-top-links {margin-right: 0; float:right;}
.navbar-top-links > li {display: inline-block; float:left;}
.navbar-top-links li:last-child { margin-right: 0;}
.navbar-top-links li a {padding:15px 10px; min-height: 50px;}
.navbar-top-links > li > a{color:#696969;}
.navbar-top-links > li > a:hover, .navbar-top-links > li > a:focus,
.navbar-top-links .open > a, .navbar-top-links .open > a:hover, .navbar-top-links .open > a:focus{ background-color:transparent; color:#000;}
.navbar-top-links .fa.arrow{ float:none; font-size:1.3em;}
.navbar-top-links .fa.arrow:before {content: "\f107";}
.navbar-top-links .active > a > .fa.arrow:before {content: "\f106";}
.navbar-top-links li.profile-nav a { padding:12px 10px;}
.navbar-top-links li.profile-nav .usertx{ margin-top:-5px;}
.navbar-top-links .dropdown-menu li {display: block;}
.navbar-top-links .dropdown-menu li:last-child {margin-right: 0;}
.navbar-top-links .dropdown-menu li a {padding: 3px 20px; min-height: 0;}
.navbar-top-links .dropdown-menu li a div {white-space: normal;}
.navbar-top-links .dropdown-messages,.navbar-top-links .dropdown-tasks,.navbar-top-links .dropdown-alerts { width: 310px; min-width: 0;}
.navbar-top-links .dropdown-messages { margin-left: 5px;}
.navbar-top-links .dropdown-tasks {margin-left: -59px;}
.navbar-top-links .dropdown-alerts { margin-left: -123px;}
.navbar-top-links .dropdown-user { right: 0; left: auto;}
.navbar-toggle{ border:0px; margin-top:14px;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{ background-color:transparent;}
.navbar-top-links .i-bell{ margin-top:5px;}
.usertx{ display:inline-block; padding:0; vertical-align:middle;}
.userpic{ display:none; margin:0 5px; vertical-align:middle; width:40px; height:40px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%; overflow:hidden;}
.sh-badge{ position:absolute; top:8px; right:2px; background-color:#4085de; min-width:22px; font-size:0.9em; font-style:normal; padding:5px 6px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}

.sidebar .sidebar-nav.navbar-collapse {padding-left: 0; padding-right: 0;}
.sidebar .sidebar-search {padding: 15px;}
.sidebar ul li {border-bottom: 1px solid #d1dedf;}
.sidebar .nav > li > a{ color:#d1dedf; font-weight:600; padding:16px 10px 16px 20px; font-size:1.1em;}
.sidebar .nav > li > a:hover, .sidebar .nav > li > a:focus{ background-color:#609395;}
.sidebar ul li a.active {background-color: #609395;}
.sidebar .nav > li > a.active:hover, .sidebar .nav > li > a.active:focus{background-color: #609395;}

.sidebar .nav > li > a i{ margin-right:5px;}
.sidebar .arrow {float: right;}
.sidebar .fa.arrow:before {content: "\f107";}
.sidebar .active > a > .fa.arrow:before {content: "\f106";}
.sidebar .nav-second-level li,.sidebar .nav-third-level li { border-bottom: none !important;}
.sidebar .nav-second-level li a { padding-left: 37px;}
.sidebar .nav-third-level li a { padding-left: 52px;}


.btn-outline {color: inherit;background-color: transparent;transition: all .5s;}
.btn-primary.btn-outline {color: #428bca;}
.btn-success.btn-outline {color: #5cb85c;}
.btn-info.btn-outline {color: #5bc0de;}
.btn-warning.btn-outline {color: #f0ad4e;}
.btn-danger.btn-outline {color: #d9534f;}
.btn-primary.btn-outline:hover,.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {color: white;}
.chat { margin: 0;  padding: 0;  list-style: none;}
.chat li {margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dotted #999999;}
.chat li.left .chat-body { margin-left: 60px;}
.chat li.right .chat-body { margin-right: 60px;}
.chat li .chat-body p { margin: 0;}
.panel .slidedown .glyphicon,.chat .glyphicon { margin-right: 5px;}
.chat-panel .panel-body {height: 350px; overflow-y: scroll;}
.login-panel {margin-top: 25%; background-color: white !important}
.flot-chart {display: block; height: 400px;}
.flot-chart-content {width: 100%; height: 100%;}
table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {background: transparent;}
table.dataTable thead .sorting_asc:after {content: "\f0de"; float: right; font-family: fontawesome;}
table.dataTable thead .sorting_desc:after {content: "\f0dd"; float: right; font-family: fontawesome;}
table.dataTable thead .sorting:after {content: "\f0dc";float: right; font-family: fontawesome;color: rgba(50, 50, 50, 0.5);}
.btn-circle { width: 30px; height: 30px;  padding: 6px 0;  border-radius: 15px;  text-align: center; font-size:0.8em; line-height: 1.428571429;}
.btn-circle.btn-lg {width: 50px;height: 50px; padding: 10px 16px; border-radius: 25px; font-size:1.3em;line-height: 1.33;}
.btn-circle.btn-xl {width: 70px;height: 70px;padding: 10px 16px;border-radius: 35px;font-size:1.7em;line-height: 1.33;}
.show-grid [class^="col-"] {padding-top: 10px;padding-bottom: 10px;border: 1px solid #ddd;background-color: #eee !important;}
.show-grid {margin: 15px 0;}
.huge { font-size:3em;}
.panel-green { border-color: #5cb85c;}
.panel-green > .panel-heading {border-color: #5cb85c; color: white; background-color: #5cb85c;}
.panel-green > a {color: #5cb85c;}
.panel-green > a:hover {color: #3d8b3d;}
.panel-red {border-color: #d9534f;}
.panel-red > .panel-heading {border-color: #d9534f;color: white; background-color: #d9534f;}
.panel-red > a {color: #d9534f;}
.panel-red > a:hover {color: #b52b27;}
.panel-yellow { border-color: #f0ad4e;}
.panel-yellow > .panel-heading {border-color: #f0ad4e;color: white;background-color: #f0ad4e;}
.panel-yellow > a {color: #f0ad4e;}
.panel-yellow > a:hover {color: #df8a13;}
.timeline {position: relative; padding: 20px 0 20px;list-style: none;}
.timeline:before {content: " "; position: absolute;top: 0;bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background-color: #eeeeee;}
.timeline > li {position: relative; margin-bottom: 20px;}
.timeline > li:before,.timeline > li:after { content: " "; display: table;}
.timeline > li:after {clear: both;}
.timeline > li:before,.timeline > li:after {content: " "; display: table;}
.timeline > li:after {clear: both;}
.timeline > li > .timeline-panel {float: left;position: relative;width: 46%; padding: 20px;border: 1px solid #d4d4d4;border-radius: 2px; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);}
.timeline > li > .timeline-panel:before {content: " "; display: inline-block; position: absolute; top: 26px; right: -15px; border-top: 15px solid transparent;border-right: 0 solid #ccc;border-bottom: 15px solid transparent; border-left: 15px solid #ccc;}
.timeline > li > .timeline-panel:after {content: " "; display: inline-block; position: absolute;top: 27px;right: -14px;border-top: 14px solid transparent; border-right: 0 solid #fff; border-bottom: 14px solid transparent; border-left: 14px solid #fff;}
.timeline > li > .timeline-badge {z-index: 100;position: absolute;top: 16px;left: 50%;width: 50px;height: 50px;margin-left: -25px;border-radius: 50% 50% 50% 50%; text-align: center;font-size:1.4em;line-height: 50px; color: #fff;background-color: #999999;}
.timeline > li.timeline-inverted > .timeline-panel {float: right;}
.timeline > li.timeline-inverted > .timeline-panel:before { right: auto;left: -15px;border-right-width: 15px;border-left-width: 0;}
.timeline > li.timeline-inverted > .timeline-panel:after { right: auto;left: -14px;border-right-width: 14px;border-left-width: 0;}
.timeline-badge.primary {background-color: #2e6da4 !important;}
.timeline-badge.success { background-color: #3f903f !important;}
.timeline-badge.warning {background-color: #f0ad4e !important;}
.timeline-badge.danger {background-color: #d9534f !important;}
.timeline-badge.info {background-color: #5bc0de !important;}
.timeline-title {margin-top: 0;color: inherit;}
.timeline-body > p,.timeline-body > ul { margin-bottom: 0;}
.timeline-body > p + p { margin-top: 5px;}

.i{ background-image:url(/static/images/i-vip.png?d74721f5a924); background-position:0 0; background-repeat:no-repeat; display:inline-block; width:18px; height:18px; vertical-align:middle;}
.ism{ background-image:url(/static/images/i-vip.png?d74721f5a924); background-position:0 0; background-repeat:no-repeat; display:inline-block; width:25px; height:25px; vertical-align:middle;}
.ilg{ background-image:url(/static/images/i-vip.png?d74721f5a924); background-position:0 0; background-repeat:no-repeat; display:inline-block; width:42px; height:42px; vertical-align:middle; margin-right:5px;}
.i-user{ background-image:url(/static/images/i-user.png?d74721f5a924);}
.i-pass{ background-image:url(/static/images/i-pass.png?d74721f5a924);}
.i-repeat{ background-image:url(/static/images/i-repeat.png?d74721f5a924);}
.i-add{ background-image:url(/static/images/i-add.png?d74721f5a924);}
.i-minus{ background-image:url(/static/images/i-minus.png?d74721f5a924);}
.i-view{ background-image:url(/static/images/i-view.png?d74721f5a924);}

.i-bell{ background-image:url(/static/images/i-bell.png?d74721f5a924);}
.i-billing{ background-image:url(/static/images/i-billing.png?d74721f5a924);}
.i-masters{ background-image:url(/static/images/i-masters.png?d74721f5a924);}
.i-patients{ background-image:url(/static/images/i-patients.png?d74721f5a924);}
.i-report{ background-image:url(/static/images/i-report.png?d74721f5a924);}
.i-setting{ background-image:url(/static/images/i-setting.png?d74721f5a924);}
.i-note{ background-image:url(/static/images/i-note-2.png?d74721f5a924);}
.i-htwt{ background-image:url(/static/images/i-htwt.png?d74721f5a924);}
.i-wet{ background-image:url(/static/images/i-wet.png?d74721f5a924);}
.i-bmt{ background-image:url(/static/images/i-bmt.png?d74721f5a924);}
.i-waist{ background-image:url(/static/images/i-waist.png?d74721f5a924);}
.i-tob{ background-image:url(/static/images/i-tob.png?d74721f5a924);}
.i-smo{ background-image:url(/static/images/i-smo.png?d74721f5a924);}
.i-alc{ background-image:url(/static/images/i-alc.png?d74721f5a924);}

.i-lg-addpatients{ background-image:url(/static/images/i-lg-addpatients.png?d74721f5a924);}
.i-lg-addinvestigation{ background-image:url(/static/images/i-lg-addinvestigation.png?d74721f5a924);}
.i-lg-addtreatment{ background-image:url(/static/images/i-lg-addtreatment.png?d74721f5a924);}
.i-lg-serach{ background-image:url(/static/images/i-lg-serach.png?d74721f5a924);}
.i-lg-list{ background-image:url(/static/images/i-lg-list.png?d74721f5a924);}
.i-lg-planlist{ background-image:url(/static/images/i-lg-planlist.png?d74721f5a924);}
.i-lg-investigations {background-image: url(/static/images/medical-investigation.png?d74721f5a924);}

#page-wrapper {/* position: inherit; min-height: 566px;*/ margin: 0 0 0 0px;padding: 0px 30px 0px;/*background-color:#eef7fa;*/border-left: 0px solid #e3eef2; height: 100%}
.sidebar {z-index: 10;position: fixed; width:175px; margin-top:1px;height: 100%; left: -125px; 
  background: linear-gradient(to right, #327080, #317a7d);
  border-right: 1px solid #e3eef2;
}

.sidebar ul li a.active .i-bell{ background-image:url(/static/images/i-bell-hov.png?d74721f5a924);}
.sidebar ul li a.active .i-billing{ background-image:url(/static/images/i-billing-hov.png?d74721f5a924);}
.sidebar ul li a.active .i-masters{ background-image:url(/static/images/i-masters-hov.png?d74721f5a924);}
.sidebar ul li a.active .i-patients{ background-image:url(/static/images/i-patients-hov.png?d74721f5a924);}
.sidebar ul li a.active .i-report{ background-image:url(/static/images/i-report-hov.png?d74721f5a924);}
.sidebar ul li a.active .i-setting{ background-image:url(/static/images/i-setting-hov.png?d74721f5a924);}

.form-control{ border:1px solid #d7dee6; border-radius:8px; margin-bottom:15px; box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease;}
.form-control:focus {border:1px solid #1f6a7b; box-shadow:0 0 0 3px rgba(31,106,123,.16); outline:none;}
.input-lg{ font-size:1.4em;}
.btn{ background-color:#3a6b90; color:#fff;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; border:0px solid #fff; font-size:1.15em; font-weight:600; box-shadow: 0 2px 6px rgba(20,50,90,0.18); transition: background-color .18s ease, box-shadow .18s ease, transform .05s ease;}
.btn-form{-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; min-width:120px; box-shadow: 0 2px 6px rgba(20,50,90,0.18);}
.btn:hover, .btn:focus{color:#fff; background-color:#34607f; box-shadow: 0 5px 13px rgba(20,50,90,0.26);}
.btn:active{ transform: translateY(1px); box-shadow: 0 1px 3px rgba(20,50,90,0.22);}
.btn-default{ background-color:#696969; min-width:120px;}
.btn-default:hover, .btn-default:focus{background-color:#595757;}

.form-group { position:relative; margin-bottom:10px; margin-top:20px;}
.tr-selectize ~ label {
  position: absolute; 
  top: -24px; 
  font-size:1em; 
  font-weight:bold !important;
  color: #000 !important; 
  transition: 0.3s;
  text-align:left;   
}
.form-group ~ label {
  position: absolute; 
  left: 0; 
  width: 100%; 
  top: 9px; 
  color:#fff; 
  text-align:left; 
  transition: 0.3s; 
  z-index:0; 
  font-size:1.3em; 
  font-weight:normal;  
}

/* Added by ved */

.form-group select{ position:relative; margin-bottom:25px; margin-top:-15px; -webkit-appearance: none; -webkit-border-radius: 0px; padding : 4px;}
.form-group .selectInp{ margin-top: 0px;}

.form-group .selectInp.ss{ margin-top: -24px;}

.form-group .selectInp label {
  position: absolute; 
  left: 0; 
  width: 100%; 
  top: 9px; 
  text-align:left; 
  transition: 0.3s; 
  z-index:0;
}

.fa-trash {
  float: right;
  margin-right: 5px;
  display:block; 
  background-color: white;
  color: black;
}

/* Removes the clear button from date inputs */
input[type="date"]::-webkit-clear-button {display: none; }

/* Removes the spin button */
input[type="date"]::-webkit-inner-spin-button {display: none; }

/* Always display the drop down caret */
input[type="date"]::-webkit-calendar-picker-indicator {color: #2c3e50; height:12px; width:12px; }



/*#printInfo{background:#eef7fa !important; padding: 20px;}
#printInfo input[type="text"]{font-weight:bold; background:#eee !important; }*/

#printCont{ padding: 20px;}
#therapeuticPlan{ overflow:hidden;}
#printCont input[type="text"]{ background:#eee !important; }
@media print { body{ -webkit-print-color-adjust:exact !important; } }

/* */

.input-group{margin-bottom:20px;margin-top:0px;}
.formfield{ 
  height:2em; 
  font-size:1em; 
  font-weight:300; 
  background-color: transparent; 
  color:#000; 
  position:relative; 
  z-index: 2;
  padding:6px 0; 
  border: 0; 
  border-bottom: 1px solid #d2dbdf; 
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  border-top: 0px !important; 
  border-left: 0px !important; 
  border-right: 0px !important; 
  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1) !important;
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1) !important;

}
.formfield:focus { 
  border:0px;
  border-bottom: 1px solid #4085de; 
  outline: 0; 
}
.formfield ~ .focus-border{
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 0; 
  height: 2px; 
  background-color: #4085de; 
  transition: 0.4s;
}
.formfield:focus ~ .focus-border,.has-content.formfield ~ .focus-border{
  width: 100%; 
  transition: 0.4s;
}
.has-content.formfield, .formfield:focus ~ .input-group-addon, .has-content.formfield ~ .input-group-addon{
  border-bottom: 1px solid #4085de;
}
.has-content.formfield, .has-content.formfield ~ .input-group-addon{
  border-bottom: 1px solid #d2dbdf;
}
.formfield ~ label{
  position: absolute; 
  left: 0; 
  width: 100%; 
  top: 0.6em; 
  color:#fff; 
  text-align:left; 
  transition: 0.3s; 
  z-index:0; 
  font-size:1.3em; 
  font-weight:normal;
}
.formfield:focus ~ label, .has-content.formfield ~ label{
  top: -1.6em; 
  font-size:1em; 
  font-weight:bold;
  color: #fff; 
  transition: 0.3s;
}
textarea ~ label{top: -14px !important; font-size:1em !important; color: #fff; transition: 0.3s;}

.tr-modal-selectize .selectize-input , .tr-selectonly-selectize .selectize-input, .tr-selectize .selectize-input{
  border-top: 0px; border-left: 0px; border-right: 0px; 
  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1);}
.tr-modal-selectize ~ label, .tr-selectonly-selectize ~ label, .tr-selectize ~ label{
  position: absolute; 
  /*left: 0; 
  width: 100%; 
  text-align:left;  
  z-index:0; */
  top: -24px; 
  font-weight: bold;
  /*font-size:1em; 
  color: #fff; */
  transition: 0.3s;
}


.modal-divider{
  padding-top: 40px;
  /*border-top: 1px dashed black;*/
}
.selectize-dropdown-content .create {
  color: black !important;
}

.selectize-dropdown-content .active {
  background-color: #0c5d86 !important;
  color: white !important;
}

.selectize-control.single .selectize-input {
    height: 28px;
    font-size:1em !important;
    font-weight: 300;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
    background-color: white;
    background-image: -moz-linear-gradient(top, white, white);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(white));
    background-image: -webkit-linear-gradient(top, white, white);
    background-image: -o-linear-gradient(top, white, white);
    background-image: linear-gradient(to bottom, white, white);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='white', GradientType=0);
}




.login{ background-color:#487fc6; background-image:url(/static/images/login-bg.jpg?d74721f5a924); background-position:center center; background-repeat:repeat-x;}
.login-wrap{padding: 0px 0px 0 0px;width: 100%;height:100vh;float: none;display: table;position: relative;}
.wrapbox{ display:table-cell; vertical-align:middle;}
.login-panel{ max-width:600px; margin:0 auto; position:relative; z-index:2;}
.login-panel h2{ text-transform:uppercase; text-align:center; position:relative; padding:10px 0; margin:0 0 20px 0;}
.login-panel h2:after{ content:''; display:block; width:50px; height:3px; background-color:#eee; position:absolute; bottom:0; left:50%; margin-left:-25px;}

.formwrap{ display:block; margin:0 auto; max-width:380px; text-align:center;}
.formwrap .formfield{ font-size:1.1em;margin-top:0;}
.formwrap .formfield ~ label{color:#696969;font-size:0.8em; transform: translateY(-70%);}
.formwrap .formfield:focus ~ label, .formwrap .has-content.formfield ~ label{top: -0.9em; font-size:0.8em; color: #696969;}
.formwrap .input-group-addon{ border: 0; border-bottom: 1px solid #d2dbdf; background-color: transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;
background-image:url(/static/images/formfield-br.png?d74721f5a924); background-position: 0 5px; background-repeat:no-repeat;}
.formwrap a{ font-size:1.15em;}
.formwrap .btn{ display:inline-block; text-transform:uppercase; margin:10px 0;}
.formwrap p{ padding:5px 0 2px 0 ;font-size:1em;}
.formwrap p a{ font-size:1em; color:#696969;}
.formwrap p a:hover{ color:#000;}

.search-group .form-control{ padding:10px 16px 10px 38px;}
.search-group .form-control::-moz-placeholder {color: #4085de;opacity: 1; font-size:1.1em;}
.search-group .form-control:-ms-input-placeholder {color: #4085de; font-size:1.1em;}
.search-group .form-control::-webkit-input-placeholder {color: #4085de; font-size:1.1em;}
.search-group .form-control::-ms-expand {background-color: transparent;  border: 0; font-size:1.1em;}
.search-input{ background-image:url(/static/images/i-ser.png?d74721f5a924); background-position:6px 8px; background-repeat: no-repeat;}
.filter-input{ background-image:url(/static/images/i-filter.png?d74721f5a924); background-position:6px 10px; background-repeat: no-repeat;}

.table{ color: #000 !important; background-color:#fff; -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; margin-bottom:0; }
.table caption{ margin-top: 20px; color: white; text-align: center; font-size:1.4em; font-style: 600}
table{ font-size:1.15em;}
table tr:first-child th:first-child {border-top-left-radius: 6px;}
table tr:first-child th:last-child {border-top-right-radius: 6px;}
table tr:last-child td:first-child {border-bottom-left-radius: 6px;}
table tr:last-child td:last-child { border-bottom-right-radius: 6px;}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{ border-top:0px solid #3c8fd9;}
.table > tbody > tr > td{ padding:10px 10px; min-width:70px; max-width:180px;}
.table > thead > tr > th{ background:#eef4fb; color:#3a5a74; border-bottom:1px solid #d7e3ee; padding:11px 10px; font-size:.82em; font-weight:700; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap;}
.table span{display:block;}
.table-bordered  {    border: 1px solid #3c8fd9;}
.table-striped   {    border: 1px solid #e8eef4; border-radius: 10px; box-shadow: 0 2px 10px rgba(20,50,90,.10);}
.table-striped > tbody > tr{ transition: background-color .12s ease;}
.table-striped > tbody > tr:hover{ background-color:#eaf2fc;}
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td{ border:1px solid #3c8fd9;}
.table-striped > tbody > tr:nth-of-type(2n+1){ background-color:#fff;}
.table-striped > tbody > tr:nth-of-type(even){ background-color:#daedf757;}
.table-hover > tbody > tr:nth-of-type(odd):hover,.table-hover > tbody > tr:nth-of-type(even):hover {background-color: #f0fce7;}
.table-responsive{ border:0px solid #ddd;}
.table .action{ display: inline-block; background-color:#fff; color:#4789df; width:28px; height:28px; margin:0 3px; padding:1px 5px;
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
-webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow:    0px 0px 2px 0px rgba(50, 50, 50, 0.3);
box-shadow:         0px 0px 2px 0px rgba(50, 50, 50, 0.3);}
.table .action:hover{color:#2465ba;}
.table .action:hover i{ opacity:0.8;}
.table > tbody > tr > td.vlign{ vertical-align:middle; min-width:132px;}
.td-patient{ min-width:156px;}
.td-lastvisit{ min-width:110px;}
/* --- pagination (pill track + circular nav buttons; app teal #1f6a7b) --- */
.pagenav{ background:#fff; margin-bottom:30px; padding:16px; border-top:1px solid #eef1f4;
  border-bottom-right-radius:6px; border-bottom-left-radius:6px; text-align:center;}
.pagenav:after{ content:''; clear:both; display:block; height:0;}
.pagination{ display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px; margin:0; vertical-align:middle; user-select:none;}

/* circular arrow buttons (first / prev / next / last) */
.pagination .btn-nav{ width:40px; height:40px; flex:0 0 auto; border:0; padding:0;
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:20px; font-weight:500; line-height:1; text-decoration:none;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;}
/* all four arrows (first/prev/next/last) are neutral by default and light up
   teal on hover -- consistent feedback instead of next/last being always teal */
.pagination .btn-nav.default, .pagination .btn-nav.active{ background:#f1f3f4; color:#5f6368; box-shadow:none;}
.pagination .btn-nav.default:hover, .pagination .btn-nav.active:hover{
  background:#1f6a7b; color:#fff; text-decoration:none; box-shadow:0 4px 10px rgba(31,106,123,.32);}
.pagination .btn-nav.is-disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; box-shadow:none;}

/* the inner gray pill-shaped track */
.pagination .page-track{ display:inline-flex; align-items:center; gap:4px;
  background:#f1f3f4; border-radius:30px; padding:4px 12px;}

/* individual page-number items */
.pagination .page-item{ display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 6px; border-radius:8px;
  color:#5f6368; font-size:15px; font-weight:500; line-height:1; text-decoration:none;
  transition:background-color .2s ease, color .2s ease;}
.pagination .page-item:hover:not(.current){ background:#e2e6ea; color:#5f6368; text-decoration:none;}
.pagination .page-item.current{ background:#1f6a7b; color:#fff; font-weight:600;
  box-shadow:0 4px 10px rgba(31,106,123,.32); transform:scale(1.05);}
.pagination .ellipsis{ color:#5f6368; padding:0 4px; font-weight:500; letter-spacing:1px; background:transparent;}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}
.modal-header{ background-color:#3c90d8; color:#fff; display: none}
.modal-title{ color:#fff; font-size:1.5em;}
.modal-footer{ 
  /*background-color:#fff;*/
  border-top:0px solid #e9f1e4 !important; 
  text-align:center;
}
.modal-body {overflow: auto; padding:0; height: inherit; background: #135d84; color: #fff}
.modal-bodywrap{ padding:1em; height: inherit;}

.page-header{ padding:0px 0 20px; margin:0; border:0px;}
.headbox,.user-headbox{ display:block;}
.headbox:after,.user-headbox:after{content:''; clear:both; display:block;}
.user-headbox{
  background-color:#fff;
  border-top:2px solid #1f6a7b;
  -webkit-border-radius:10px;-moz-border-radius:10px;
  border-radius:10px;
  margin-bottom:25px;
  -webkit-box-shadow: 0 2px 12px rgba(20,50,90,.12);
  box-shadow: 0 2px 12px rgba(20,50,90,.12);
  overflow:hidden;

}
.user-headbox h4{ font-size:1.5em; line-height:2em; padding:0; margin:0; }
/* the avatar row had no padding, so the photo jammed into the rounded top-left
   corner; inset it to match the .navinfo rows below it. */
.user-headbox .infowrap{ padding:14px 18px; }
.info-left{ display:inline-block; float:left;}
.info-right{ display:block; float:right;}
.labtest-right{ display:inline-block; float:right;width: 4em; text-align: right;line-height: 1.2em}
.labtest-left{ display:inline-block; float:left; width: 70px; }
.labtest-name{display:inline-block; width: 10em;}

.visitnav{ display:inline-block; padding-left:10px;padding-right :10px;}
.info-btn{ display: inline-block; float:right; padding:10px;}
.info-btn .btn{ margin:15px 5px;}
.infowrap:after,.info-left:after{content:''; clear:both; height:0; display:block;}
.infowrap .pic{display:inline-block; float:left; width:87px; height:86px; border-right:1px solid #edf4f6;/*  background-image:url(/static/images/i-biopic.jpg?d74721f5a924); background-position:center center; background-repeat:no-repeat; */}
.infowrap .bioinfo{ display:inline-block; float:left; padding:5px 0 5px 15px;}
.biotitle{ display:inline-block;}
.biotitle:after{content:''; clear:both; height:0; display:inline-block;}
.biotitle h4{ float:left; color: black; text-transform: uppercase;}
.biotitle .notewrap{ float:left; margin:0.4em 0 0 1.1em; position:relative; cursor: pointer; }
.note{
  /* display:block;opacity:1;  position:absolute; */
  top:2.5em;
  left:-1.4em;
  z-index:10; 
  width:22em; 
  background-color:#fff; 
  padding:1em; 
  color:#989898; 
  font-size:1em;
  font-weight:300;
  line-height:1.3em;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  border:1px solid #eaeaea;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(150, 150, 150, 0.3);
  -moz-box-shadow: 0px 0px 6px 0px rgba(150, 150, 150, 0.3);
  box-shadow: 0px 0px 6px 0px rgba(150, 150, 150, 0.3);
}
.note h5 {
  text-transform: capitalize;
}
.note:after{ content:''; position:absolute; top:-10px; left:25px; display:block; width:15px; height:11px;background-image:url(/static/images/notearrow.png?d74721f5a924); background-position:bottom center; background-repeat:no-repeat;}
/* .biotitle .i-note:hover .note{ opacity:1;-webkit-transition: opacity 0.6s ease-in-out;-moz-transition: opacity 0.6s ease-in-out;-ms-transition: opacity 0.6s ease-in-out;-o-transition: opacity 0.6s ease-in-out; transition: opacity 0.6s ease-in-out;}*/.note h5{ font-size:1.3em; color:#4085de; font-weight:300; padding:0 0 5px 0; margin:0;}
.note-tx{ height:90px; overflow-x: hidden;overflow-y: auto;}
.perinfo{ color:#90a4ae; font-size:1.3em;}
.perinfo span{ display:inline-block; padding:0 3px;}
.perinfo span:after{ content:'/'; display:inline-block; margin:0 0 0 2px;}
.perinfo span:last-child:after{ content:'';}
.navinfo{ border-top:1px solid #edf4f6; padding:10px;}
.navinfo:after{content:''; clear:both; height:0; display:block;}
.nav-pills{ font-size:1.1em;}
.nav-pills > li{ padding:0 10px 0 10px; border-right:1px solid #edf4f6;}
.nav-pills > li:last-child{border-right:0px solid #edf4f6;}
.nav-pills > li > a{color:#90a4ae; padding:0px;}
.nav-pills > li > a:hover{color:#90a4ae; background-color:transparent;}
.nav-pills > li.title{ color:black;padding:0 10px 0 10px;border-right:0px solid #edf4f6; min-width:10em;text-transform: uppercase;}
.nav-pills > li.title > a{color:black; padding:0px;}
.nav-pills > li.title > a:hover{color:#4085de;}

.nav-pills .title{ 
  color:black;
  padding:0 10px 0 10px;
  border-right:0px solid #edf4f6; 
  min-width:10em;
  text-transform: uppercase;
  display: inline-block;
}
.nav-pills .title > a{
  color:black; 
  padding:0px;
}
.nav-pills .title > a:hover{
  color:#4085de;
}
.
.nav-pills span{ font-weight:bold;color:#333; display:inline-block; padding:0 2px 0 5px;}
.nav-pills i{ margin-right:4px;}

.fileinput{position:relative;}
.fileinput .thumbnail{ width:86px; height:86px; padding:0; margin:0; border:0px solid #fff;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;background-image:url(/static/images/i-biopic.jpg?d74721f5a924); background-position:center center; background-repeat:no-repeat; }
.fileinput .thumbnail img{width:86px; height:86px;}
.fileinput .btn-file{ position:absolute; bottom:0; right:0; background-color:#fff; width:25px; min-width: inherit; height:25px; color:#4085de; font-size:1em; padding:3px 6px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}


.panel-head{ padding:20px 15px; background:#fff; text-align:center; border-bottom:1px solid #e8f2f5;}
.panel-tx{ padding:20px 15px;}
.panel-default{
  /*border-color:#e4ecef;*/
  background-color:transparent;
  /*-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); 
  overflow:hidden;*/
}
/*.panel-default:hover{
  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); 
  overflow:hidden;
}*/
.panel-default > .panel-heading{ 
  background-color:transparent; 
  color:#fff; 
  font-size:1.2em; 
  font-weight:400; 
  text-transform: uppercase;
  text-align:left; 
  border:0px solid transparent; 
  padding-left: 0px;
  /*border-left:2px solid #3c90d8;
  border-bottom:1px solid #f2f2f2;
-webkit-box-shadow: 0px 2px 4px 0px rgba(150, 150, 150, 0.15);
-moz-box-shadow:    0px 2px 4px 0px rgba(150, 150, 150, 0.15);
box-shadow:         0px 2px 4px 0px rgba(150, 150, 150, 0.15);*/
}

.panel {
  border:0px solid transparent;
  margin-bottom: 40px;
}

.panel-body {
    background: white;
    border-radius: 10px;
    -webkit-box-shadow: 0 2px 10px rgba(20,50,90,.10);
    box-shadow: 0 2px 10px rgba(20,50,90,.10);
    overflow:hidden;
    cursor: pointer;
    transition: box-shadow .18s ease;
}
.panel-default > .panel-body:hover{
  -webkit-box-shadow: 0 4px 16px rgba(20,50,90,.16);
  box-shadow: 0 4px 16px rgba(20,50,90,.16);
  overflow:hidden;
}
.panel-footer{ background-color:#fff; border-top:1px solid #e9f1e4; padding:15px; text-align:center;}
.panel-body .nav-tabs{ text-align:center; border-bottom:1px solid #e4ecef; padding:10px 0 15px 0;}
.nav-tabs > li{ float:none; display:inline-block; margin:0; border-right:1px solid #e4ecef;}
.nav-tabs > li:last-child{border-right:0px solid #e4ecef;}
.nav-tabs > li > a{ padding:2px 12px; font-size:1.15em; line-height:18px; color:#b4b4b4;border:0px;}
.nav-tabs > li > a:hover{background-color:transparent;border:0px;}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{ color:#333; border:0px;}
.list-group{ margin-bottom:0;}
.list-group-item{ border:0px;border-bottom:1px solid black; margin-bottom:0; padding:10px 0; color:black; }
.list-group-item:first-child,.list-group-item:last-child{-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}
.list-group-item:last-child{border-bottom:0px solid #e4ecef;}
.list-group-item h5{ margin:0; padding:0 0 5px 0;}
.list-group-item h6{ margin:0; padding:0 0 0 0; color:#90a4ae;}
.list-group-item p{ margin:0; padding:0 0 5px 0; font-size:1.1em;}

.dayprofile-reading{ margin-bottom:0;}
.dayprofile-reading > li { float:none; display:block; margin:0;}
.dayprofile-reading > li > span {  width: 90px; }

.investigation-title{ margin-top: 20px;  border-top:1px dotted #e4ecef; border-bottom:1px dotted #e4ecef;padding:5px 0px; color:black; list-style-type: none; font-weight: 600;}
.investigation-title {font-size:1em;}
.investigation-title:first-child,.investigation-title:last-child{-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}
.investigation-title:last-child{border-bottom:0px solid #e4ecef;}
.investigation-title h5{ margin:0; padding:0 0 5px 0;}
.investigation-title h6{ margin:0; padding:0 0 0 0; color:#90a4ae;}
.investigation-title p{ margin:0; padding:0 0 5px 0; font-size:1.1em; line-height:18px;}

.master-list{ display:block;}
.master-list:after{content:''; clear:both; height:0; display:block;}
.master-left{ display:inline-block; float:left; width:50%;}
.master-status{display:inline-block; float:right; width:50%; text-align:right;}
.master-left p{ margin:0; padding:0; font-size:1.1em;}
.master-left p:before{ content:''; display: inline-block; vertical-align:middle; margin:0 5px 0 0; width:12px; height:12px;  background-color:#cbd5d9;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
p.status-func:before{background-color:#f3bd00;}
p.status-tri:before{background-color:#72c644;}
.btn-arro{ border:1px solid #90a4ae; padding:0px 5px 0 8px; display:inline-block; height:22px; background-color:#fff; position:relative; z-index:2;}
.btn-arro:before{ content:''; display: inline-block; width:15px; height:16px;border-bottom:1px solid #90a4ae;border-left:1px solid #90a4ae; background-color:#fff; padding:0; position:absolute; top:2px; left:-8px; z-index:-2; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.btn-arro:after{ content:''; display:block; width:2px; height:22px; position:absolute; top:0px; left:2px; background-image:url(/static/images/arrwdot.png?d74721f5a924); background-position:0; background-repeat:no-repeat; }
.btn-act,.btn-act:before{border-color: #3c90d8;}
.btn-inact,.btn-inact:before{border-color: #4085de;}
.btn-anti,.btn-anti:before{border-color: #ff9c32;}
.planlist{ margin:0; padding:0; list-style-type: none;}
.planlist li{background-image:url(/static/images/arrwdot.png?d74721f5a924); background-position:0 1px; background-repeat:no-repeat; padding:0 0 0 8px; font-size:1.15em;}
.therapeuticlist{ margin:2; padding:0; list-style-type: none;}
.therapeuticlist li{background-position:0 1px; background-repeat:no-repeat; padding:0 0 0 8px; }
.treatment-plan p{ padding:0; margin:0;}

.master-problem-list{ padding:0; list-style-type: none;}
.master-problem-list li{background-position:0 1px; background-repeat:no-repeat; padding:0 0 0 8px; color: black}

.lab-test-tab > li{  float:none; display:block; margin:10px;}
.lab-test-tab > li:last-child{ border-right:0px solid #e4ecef;}
.lab-test-tab > li > a{ padding:0px 5px; font-size:1.1em; line-height:25px; color:#000;border:1px 0px solid #000;}
.lab-test-tab > li > a:focus{ background-color:#ddd; color: #135d84; border:0px;}
.lab-test-tab > li > a:hover{background-color:#ddd; color: #135d84; border:0px;}
.lab-test-tab > li.active > a{ background-color:#135d84; border:0px; color: #fff}


.diagnostics-tab > li{  float:none; display:inline-block; margin:10px;}
.diagnostics-tab > li:last-child{ border-right:0px solid #e4ecef;}
.diagnostics-tab> li > a{ padding:0px 5px; font-size:1.1em; line-height:25px; color:#000;border:1px 0px solid #000;}
.diagnostics-tab > li > a:focus{ background-color:#ddd; color: #135d84; border:0px;}
.diagnostics-tab > li > a:hover{background-color:#ddd; color: #135d84; border:0px;}
.diagnostics-tab> li.active > a{ background-color:#135d84; border:0px; color: #fff}

.dayprofile-tab > li{  float:none; display:inline-block; margin:10px;}
.dayprofile-tab > li:last-child{ border-right:0px solid #e4ecef;}
.dayprofile-tab> li > a{ padding:0px 5px; font-size:1.1em; line-height:25px; color:#000;border:1px 0px solid #000;}
.dayprofile-tab > li > a:focus{ background-color:#ddd; color: #135d84; border:0px;}
.dayprofile-tab > li > a:hover{background-color:#ddd; color: #135d84; border:0px;}
.dayprofile-tab> li.active > a{ background-color:#135d84; border:0px; color: #fff}


.tab-pane .row {
  margin-right: 55px !important;
  margin-left: 55px !important;
}

.range-item-0{  color:#e29313; list-style-type: none;}
.range-item-1{  color:#ce3636; list-style-type: none;}
.range-item-2{  list-style-type: none;}
.range-item-0 > span {  color:#e29313;}
.range-item-1 > span {  color:#ce3636;}

.range-item-0 > input {  background-color:#e29313 ; color:#fff;}

.nav-pills .range-item-0 {color:#e29313; padding:0px;}
.nav-pills .range-item-0 > li > a{color:#e29313 !important ; padding:0px;}
.nav-pills .range-item-0 > li > a:hover{color:#e29313 !important; background-color:transparent;}
.nav-pills .range-item-1 {color:#ce3636; padding:0px;}
.nav-pills .range-item-1 > li > a{color:#ce3636 !important; padding:0px;}
.nav-pills .range-item-1 > li > a:hover{color:#ce3636 !important; background-color:transparent;}
.nav-pills .range-item-2 > li > a{color:#0a7d24 !important; padding:0px;}
.nav-pills .range-item-2 > li > a:hover{color:#0a7d24 !important; background-color:transparent;}

#accordion{ margin-bottom:25px;}
#accordion .panel-default{ border-color:#f3f3f3; margin-bottom:15px;}
#accordion .panel-default > .panel-heading{color:#3e5561; font-size:1.5em; font-weight:400; text-align:left; border:0px solid #fff; border-left:0px solid #3c90d8;border-bottom:0px solid #f2f2f2; padding:0;
-webkit-box-shadow: 0px 2px 4px 0px rgba(150, 150, 150, 0);
-moz-box-shadow:    0px 2px 4px 0px rgba(150, 150, 150, 0);
box-shadow:         0px 2px 4px 0px rgba(150, 150, 150, 0);}
#accordion .panel-title{ padding:0;}
#accordion .panel-title a{color:#fff; font-size:1.15em; display:block; padding:13px 15px; background-color:#3c90d8; text-decoration:none; background-image:url(/static/images/i-accordion-hov.png?d74721f5a924); background-position:98% 15px; background-repeat:no-repeat;}
#accordion .panel-title a.collapsed{ background-color:#fff;color:#3e5561; text-decoration:none;background-image:url(/static/images/i-accordion.png?d74721f5a924);}

#tests-accordion{ margin-bottom:25px;}
#tests-accordion .panel-default{ border-color:#f3f3f3; margin-bottom:15px;}
#tests-accordion .panel-default > .panel-heading{color:#3e5561; font-size:1.3em; font-weight:400; text-align:left; border:0px solid #fff; border-left:0px solid #3c90d8;border-bottom:0px solid #f2f2f2; padding:0;
-webkit-box-shadow: 0px 2px 4px 0px rgba(150, 150, 150, 0);
-moz-box-shadow:    0px 2px 4px 0px rgba(150, 150, 150, 0);
box-shadow:         0px 2px 4px 0px rgba(150, 150, 150, 0);}
#tests-accordion .panel-title{ padding:0;}
#tests-accordion .panel-title a{color:#fff; font-size:1.4em; display:block; padding:13px 15px; background-color:#3c90d8; text-decoration:none; background-image:url(/static/images/i-accordion-hov.png?d74721f5a924); background-position:98% 15px; background-repeat:no-repeat;}
#tests-accordion .panel-title a.collapsed{ background-color:#fff;color:#3e5561; text-decoration:none;background-image:url(/static/images/i-accordion.png?d74721f5a924);}

.text-warning {color: #e29313;}

}
.panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group{ border-top:0px solid #fff; padding:20px 25px;}
.panel-nav{ padding:0 0 5px 0; margin:0;}
.panel-nav a{ margin-left:12px;}




/* Material Switch for Checkbox */

.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}

.collapse-menu {
  display: block;
}
.collapse-menu.in {
  display: none;
}


/*.sidebar .sub-menu li,.sidebar .nav-third-level li { border-bottom: none !important;}
.sidebar .sub-menu li a.active { font-weight: bold;background: inherit;}*/
.sub-menu > li {margin-right: 15px; margin-left:-10px; margin-top: 5px; margin-bottom: 5px; border-bottom:none !important;}
.sub-menu > li > a{ font-weight:400; padding:5px 5px 5px 20px; font-size:0.9em;background-color: transparent;!important;color: #e3eef2;}
.sub-menu  > li > a:hover, .sub-menu > li > a:focus{ background-color:#609395 !important; color: #e3eef2}
.sub-menu  > li > a.active:hover, .sub-menu  > li > a.active:focus{ background-color: #609395; color: #e3eef2}


.accordion {
  margin: auto;
}
.accordion input {
  display: none;
}
.box {
  position: relative;
  background: white;
    height: 64px;
    transition: all .15s ease-in-out;
}
.box::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}
header.box {
  background: #00BCD4;
  z-index: 100;
  cursor: initial;
  box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px 4px -4px rgba(0,0,0,.24);
}
header .box-title {
  margin: 0;
  font-weight: normal;
  font-size:16pt;
  color: white;
  cursor: initial;
}
header .row {
  margin: 0;
  font-weight: normal;
  font-size:16pt;
  color: white;
  cursor: initial;
}
.box-title {
  width: 100%;
  height: 64px;
  line-height: 64px;
  padding: 0 20px;
  display: inline-block;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.18);
  font-weight: normal;
  -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.box-content {
  width: 100%;
  padding: 10px 20px;
  font-size:11pt;
  color: rgba(0,0,0,.54);
  display: none;
}
.box-close {
  position: absolute;
  height: 64px;
  width: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
}
input:checked + .box {
  height: auto;
  margin: 16px 0;
    box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
}

input:checked + .box .row {
  border-bottom: 1px solid rgba(0,0,0,.18);
}


input:checked + .box .box-content,
input:checked + .box .box-close {
  display: inline-block;
}
.arrows section .box-title {
  padding-left: 44px;
  width: 100%;
}
.arrows section .box-title:before {
  position: absolute;
  display: block;
  content: '\203a';
  font-size:1.3empt;
  left: 20px;
  top: -2px;
  transition: transform .1s ease-in-out;
  color: rgba(0,0,0,.54);
}
input:checked + section.box .box-title:before {
  transform: rotate(90deg);
}

.email-date{ 
  padding: 15 15px;
  padding-left: 10px;
  display: inline-block;
  float: right;
  font-weight: normal;
}

.email-sender{ 
  padding-left: 30px;
  display: inline-block;
  float: left;
  font-weight: normal;
}

.email-subject{ 
  padding-left: 30px;
  display: inline-block;
  float: left;
  font-weight: normal;
}

.email-unread-ignore{ 
  padding: 15 15px;
  padding-left: 10px;
  display: inline-block;
  float: right;
  color: #4487db;
}

.email-replied{ background-color:#f5f5f5; font-size:10pt;}
.reply-pending{ background-color:#fff; font-weight: bold; font-size:10pt;}

.email-search-group .form-control{ padding:10px 16px 10px 38px;}
.email-search-group .form-control::-moz-placeholder {color: #4085de;opacity: 1; font-size:0.7em;}
.email-search-group .form-control:-ms-input-placeholder {color: #4085de; font-size:0.7em;}
.email-search-group .form-control::-webkit-input-placeholder {color: #4085de; font-size:0.7em;}
.email-search-group .form-control::-ms-expand {background-color: transparent;  border: 0; font-size:0.7em;}


.attachment-btn{ margin: 0px 10px;color:#fff; background-color:#4487db;border:0px solid #fff; font-size:1em; font-weight:600; width: 150px; text-align: center; float: right;}
.attachment-btn:hover, .attachment-btn:focus{color:#fff; background-color:#4487db;}

/*.reply-btn{background-color:#4487db; color:#fff; font-size:1em; line-height: 64px;text-align: center;}*/

.reply-btn {
  height: 64px;
  line-height: 64px;
  display: inline-block;
  cursor: pointer;
  font-weight: normal;
  color:#4487db; 
  -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}

.send-reply-btn{ background-color:#4487db; color:#fff;  font-size:1em; font-weight:600; width: 150px; text-align: center; }


div#editor {
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: left;
}

.modal-dialog-draft {
  position: relative;
  height: 90%;
  width: 90%;
  margin-bottom: 5px;
}

img[apple-inline] {
   height: 0px;
   visibility: hidden;
}

.attachment-thumbnail{
  display: block;
    float: left;
    width: 25%;
    height: auto;
    position: relative;
}

.attachment{
  display: block;
    float: left;
    width: 80%;
    height: auto;
    position: relative;
    margin: 20px 10%;
    border: 1px solid rgba(0,0,0,.18);
}


.report{
  display: block;
    width: 100%;
    height: auto;
    position: relative;
    margin: 20px 0%;
    border: 1px solid rgba(0,0,0,.18);
}

.table > tbody > tr > td{
  font-size:1em;
}

.borderless {
    border: none;
}

.borderless > tbody > tr > td {
    border: none;
}

.table .formfield{ 
  height:2em; 
  font-size:1em; 
  font-weight:300; 
  background-color: transparent;  
  position:relative; 
  z-index: 2;
  padding:6px 0; 
  border: 0; 
  width: 100%;
  border-bottom: 1px dashed #d2dbdf; 
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0); 
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
}

.row .search-input{ background-image:url(/static/images/i-ser.png?d74721f5a924); background-position:0px 0px; background-repeat: no-repeat; padding-left: 30px;}

/* --- patient-list search row: centered icon, all controls a matched 40px on one baseline --- */
.tabletop .search-input{
    background-image:url(/static/images/i-ser.png?d74721f5a924) !important;
    background-position:14px center !important;     /* icon centered vertically */
    background-repeat:no-repeat !important;
    background-size:18px 18px !important;            /* match the disorders icon exactly */
    height:40px; padding:8px 14px 8px 40px;
    border:1px solid #d7dee6; border-radius:8px; box-shadow:none;
}
.tabletop .search-input:focus{
    border-color:#1f6a7b; box-shadow:0 0 0 3px rgba(31,106,123,.16); outline:none;
}
/* Search by Disorders (selectize) -> same height / radius / border as the input */
.tabletop .selectize-input{
    min-height:40px !important; padding:7px 12px 7px 40px !important;   /* room for the search icon */
    border:1px solid #d7dee6 !important; border-radius:8px !important; box-shadow:none !important;
    display:flex !important; align-items:center; flex-wrap:wrap;
}
/* selectize overrides background-image, so overlay the magnifier as a pseudo-element */
.tabletop .selectize-control{ position:relative; }
.tabletop .selectize-control::before{
    content:''; position:absolute; left:14px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; z-index:2; pointer-events:none;     /* match the patient search icon */
    background:url(/static/images/i-ser.png?d74721f5a924) no-repeat center / 18px 18px;
}
.tabletop .selectize-input.focus,
.tabletop .selectize-control.focus .selectize-input{
    border-color:#1f6a7b !important; box-shadow:0 0 0 3px rgba(31,106,123,.16) !important;
}
/* Advanced Search / Add Patient -> same 40px height, aligned with the fields */
.tabletop .btn{
    height:40px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center;
    font-size:1em; vertical-align:top; box-shadow:0 2px 6px rgba(20,50,90,.18);
}
.tabletop .mt20{ margin-top:25px !important; }   /* clear the label so buttons line up with the inputs */
.tabletop .btn + .btn{ margin-left:12px; }       /* gap between Advanced Search and Add Patient (were sticky) */

.grouped {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.grouped li {
    float: left;
    margin-right: 5px;
    padding: 0;
    font-size:1em;
}

.grouped .btn {
  font-size:1em;
}

.modal-form{
  padding-right: 15px;
  padding-left: 15px;
  height: inherit;
}

.inline-form{
  display: block;
  margin:0; padding:0;
}

.nav-pills-form-li{
  overflow:hidden;
  float: none !important;

}

.nav-pills-formfield{
    font-weight: bold;
    color: #333;
     width:100%; 
     overflow:hidden;
     padding: 0 2px 0 5px !important;
    background-color: transparent;
    position: relative;
    z-index: 2;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
            box-sizing: border-box; /* css3 rec */
        -moz-box-sizing: border-box; /* ff2 */
        -ms-box-sizing: border-box; /* ie8 */
        -webkit-box-sizing: border-box; /* safari3 */
        -khtml-box-sizing: border-box; /* konqueror */

}

.modal-dialog-large .modal-footer{
   bottom:0;width:100%;
}

.modal-form  {
  overflow: -moz-scrollbars-vertical; 
  overflow-y: visible;
  overflow-x: visible;
}

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}

.fixed-print-plugin {
    top: 25%;
}

.fixed-report-plugin {
    top: 30%;
}

.fixed-dayprofile-plugin {
    top: 35%;
}
.fixed-email-plugin {
    top: 40%;
}

.fixed-invite-plugin {
    top: 45%;    
}

.fixed-trial-plugin {
    top: 50%;    
}
.floater{
  position: fixed;
  right: 0;
  z-index: 1031;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 44px;
  border-radius: 12px 0 0 12px;
  color: #fff;
  font-size: 17px;
  background: #1f6a7b;
  box-shadow: -2px 2px 9px rgba(15,55,65,.22);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.floater i{ line-height: 1; }

/* Patient dashboard groups its actions in a vertical rail, so they can never
   overlap the way the old per-button `top: %` positioning did. */
.fab-rail{
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1031;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.fab-rail .floater{ position: static; top: auto; transform: none; }

.no_show{display: none !important;}

div.fileinputs {
  position: relative;
}

div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

input.file {
  position: relative;
  text-align: right;
  -moz-opacity:0 ;
  filter:alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
}

.fakefile .form-control[disabled] {
  background-color: #fff
}

.tab-pane-std-row {
  margin-right: -15px !important;
  margin-left: -15px !important;
}

.hidden-item{
  display: none
}
.fill-width{
  width: 100%;
}

.dayprofilefield::placeholder {
  color: #ccc;
}


.dayprofiletable > thead > tr > th, 
.dayprofiletable > tbody > tr > th, 
.dayprofiletable > tfoot > tr > th, 
.dayprofiletable > thead > tr > td, 
.dayprofiletable > tbody > tr > td, 
.dayprofiletable > tfoot > tr > td{ border-top:0px solid #daedf757;}
.dayprofiletable > tbody > tr > td{ padding:2px 2px; min-width:10px; max-width:180px;}
.dayprofiletable > thead > tr > th{ 
  background-color:#daedf7; 
  color:#000; 
  border-bottom:1px solid #daedf757; 
  padding:0px 0px; font-size:0.9em;
  white-space:nowrap;
}
.dayprofiletable{ border: 0px solid #daedf757; font-size:0.8em}
.dayprofiletable > thead > tr > th, 
.dayprofiletable > tbody > tr > th, 
.dayprofiletable > tfoot > tr > th, 
.dayprofiletable > thead > tr > td, 
.dayprofiletable > tbody > tr > td, 
.dayprofiletable > tfoot > tr > td{ border-left:0px solid #daedf757; border-right:1px solid #daedf757;}
.dayprofiletable > tbody > tr:nth-of-type(2n+1){ background-color:#fff;}
.dayprofiletable > tbody > tr:nth-of-type(even){ background-color:#daedf757;}

.table > thead{
  background-color:#fff;
}

.table > thead > tr > th, 
.table > tbody > tr > th, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > tbody > tr > td, 
.table > tfoot > tr > td{ border-top:0px solid black; color:#000; }
.table > tbody > tr > td{ padding:2px 2px; min-width:10px; max-width:180px;}
.table > thead > tr > th{ 
  background:#fff; 
  color:#000; 
  border-bottom:1px solid #333; 
  border-top:1px solid #333 !important; 
  border-left:0px solid transparent; 
  border-right:0px solid transparent;
  padding:5px 5px; font-size:1em;
  white-space:nowrap;
}
.table{ border: 0px solid transparent; font-size:1em}
.table > tbody > tr > th, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > tbody > tr > td, 
.table > tfoot > tr > td{ 
  border-left:0px solid transparent; 
  border-right:0px solid transparent;
  border-top:0px solid #ddd; 
  border-bottom:1px solid #ddd; 

}
.table > tbody > tr:nth-of-type(2n+1){ background-color:#fff;}
.table > tbody > tr:nth-of-type(even){ background-color:#fff;}

.tabletop{padding-top: 20px}

.selectize-input, .selectize-control.single .selectize-input.input-active{
  background: inherit;
  /*border-color: #fff6;*/
}



.advanced-search .selectize-input, .advanced-search .selectize-control.single .selectize-input.input-active {
  background: #fff !important; 
}

/*.modal-body .btn{
    color: #3c90d8;
    background-color: #fff;
}*/

.close-btn{
  float:right;
  color: #000;
  background: inherit;
  border: 0px;
}

.btn-right{
  float:right;
}

.table .formfield{
  color:#000;
}

.instructionstab{
  padding-top: 30px;
  padding-left: 20px;

}


.modal-body{
  color: #000;
  font-weight: normal;
  background-color: #fff;
}

.modal-body ~ label {
  font-weight: normal !important;
  color: #000 !important;
}

.formfield ~ label{
  background: : black!important;
}

.formfield ~ label{
  color: black!important;
}

.report-heading {
  padding-top: 5px; 
  padding-bottom: 5px;
}

.report-list{
  padding: 0;
  list-style-type: none;
}

.report-edit-btn{
  padding: 1em;
  color: grey;
}

@keyframes flickerHeader {
    0%   {font-size:1.4em}
    100% {font-size:1.15em;}

}


.floater:hover{
  color: #fff;
  background: #155663;
  transform: translateX(-3px);
  box-shadow: -4px 3px 14px rgba(15,55,65,.32);
}
.fab-rail .floater:hover{ transform: translateX(-3px); }

.sidebar:hover {left: 0px;}

.collapse-link{
  font-size:0.8em;
  color: white;
}

.panel-header-item{
  font-size:0.8em;
  color: white;
  padding-left: 15px;  
  padding-right: 15px;  
}

.vert-center > tbody > tr > td{
  vertical-align: middle;
}

td .form-group {
  margin-top: 0px;
  margin-bottom: 0px;
}

.settings-body {

  max-width: 80%;
  margin: 0 auto;
  padding: 40px;
  vertical-align: middle;
}

.settings-card {

  background-color: white;
  margin: 0 auto;
  padding: 40px;
  vertical-align: middle;
}

.settings-body fieldset {
    display: block;
    padding: 25px 30px 5px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
}

.settings-body section {
    margin-bottom: 20px;
}

.settings-body .checkbox {
  margin-bottom: 4px;
  padding-left: 27px;
  font-size:1.1em;
  line-height: 27px;
  color: #404040;
  cursor: pointer;
}


/**/
/* toggles */
/**/
.settings-body .toggle {
  margin-bottom: 4px;
  padding-right: 61px;
  font-size:1.1em;
  line-height: 27px;
  color: #404040;
  cursor: pointer;
}
.settings-body .toggle:last-child {
  margin-bottom: 0;
}
.settings-body .toggle input {
  position: absolute;
  left: -9999px;
}
.settings-body .toggle i {
  content: '';
  position: absolute;
  top: 4px;
  right: 0;
  display: block;
  width: 49px;
  height: 17px;
  border-width: 2px;
  border-style: solid;
  border-radius: 12px;
  background: #fff;
}
.settings-body .toggle i:after {
  content: 'OFF';
  position: absolute;
  top: 2px;
  right: 8px;
  left: 8px;
  font-style: normal;
  font-size:0.75em;
  line-height: 13px;
  font-weight: 700;
  text-align: left;
  color: #5f5f5f;
}
.settings-body .toggle i:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 4px;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 1;
  transition: right 0.2s;
  -o-transition: right 0.2s;
  -ms-transition: right 0.2s;
  -moz-transition: right 0.2s;
  -webkit-transition: right 0.2s;
}
.settings-body .toggle input:checked + i:after {
  content: 'ON';
  text-align: right;
}
.settings-body .toggle input:checked + i:before {
  right: 36px;
}


.instructions{
  margin-top: 10px;
  margin-bottom: 10px;
}

.settings-panel {
  margin-bottom: 15px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 10px rgba(20,50,90,.10);
          box-shadow: 0 2px 10px rgba(20,50,90,.10);
}
.settings-panel-body {
  padding: 15px;
  border: 1px solid #ddd;
}
.settings-panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
/* the whole heading bar toggles the panel via JS (.collapse-settings) but had
   no pointer cursor, so it didn't read as clickable */
.settings-panel-heading.collapse-settings,
.settings-panel-heading.collapse-settings h4,
.settings-panel-heading.collapse-settings .info-right {
  cursor: pointer;
}
/* Clickable elements that aren't <a>/<button> and so don't get a hand cursor
   on their own. Covers: JS-bound rows (Day Profiles, Reminders, Clinics list),
   collapse toggles, and every element with an inline onclick handler
   (link-secondary items, <i type="button"> Add buttons, sliders, etc.). */
.clickable-row,
.collapse-link,
.table-striped tbody tr[id],
[onclick] {
  cursor: pointer;
}
.settings-panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}
.settings-panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size:1.15em;
  color: inherit;
}
.settings-panel-title > a,
.settings-panel-title > small,
.settings-panel-title > .small,
.settings-panel-title > small > a,
.settings-panel-title > .small > a {
  color: inherit;
}


.alert-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-error hr {
  border-top-color: #e4b9c0;
}
.alert-error .alert-link {
  color: #843534;
}

.masterdatatable{
  padding-top: 20px;
}

.shape-separator {
  position: relative;
  height: 48px;
}

.wizard-container .form-control {
  margin-top: 2px;
}

.wizard-container .control-label{
  font-size:1.1em;
}

.wizard-container .adjust-margin{
  padding-right: 60px;
}

.panel_toolbox {
    float: right;
    min-width: 70px
}
.panel_toolbox>li {
    float: left;
    cursor: pointer
}
.panel_toolbox>li>a {
    padding: 5px;
    color: #C5C7CB;
    font-size:1em
}
.panel_toolbox>li>a:hover {
    background: #F5F7FA
}

#time-range p {
    font-family:"Arial", sans-serif;
    font-size:1em;
    color:#333;
}
.ui-slider-horizontal {
    height: 8px;
    background: #D7D7D7;
    border: 1px solid #BABABA;
    box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
    clear: both;
    margin: 8px 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}
.ui-slider {
    position: relative;
    text-align: left;
}
.ui-slider-horizontal .ui-slider-range {
    top: -1px;
    height: 100%;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    height: 8px;
    font-size:.7em;
    display: block;
    border: 1px solid #5BA8E1;
    box-shadow: 0 1px 0 #AAD6F6 inset;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    background: #81B8F3;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3));
    background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3);
    background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3);
    background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3);
    background-image: linear-gradient(top, #A0D4F5, #81B8F3);
}
.ui-slider .ui-slider-handle {
    border-radius: 50%;
    background: #F9FBFA;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA));
    background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA);
    background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA);
    background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA);
    background-image: linear-gradient(top, #C7CED6, #F9FBFA);
    width: 22px;
    height: 22px;
    -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
    -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
    -webkit-transition: box-shadow .3s;
    -moz-transition: box-shadow .3s;
    -o-transition: box-shadow .3s;
    transition: box-shadow .3s;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    cursor: default;
    border: none;
    cursor: pointer;
}
.ui-slider .ui-slider-handle:after {
    content:"";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 50%;
    margin-top: -4px;
    left: 50%;
    margin-left: -4px;
    background: #30A2D2;
    -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
    -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white;
    box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.5em;
    margin-left: -.6em;
}
.ui-slider a:focus {
    outline:none;
}

#slider-range {
  width: 60%;
  margin: 0 auto;
}
#time-range {
  width: 400px;
}

.master-header{
  padding-top: 20px;
}

.master-header > h1 {
  color: white;
}


/* On Off Slider */

.OnOffSlider > input[type=checkbox] {
  visibility: hidden;
}
.OnOffSlider {
  width: 8em;
  height: 2em;
  background: #fff;
  margin: auto;
  font-size:1em;
  -webkit-border-radius: 3em;
  -moz-border-radius: 3em;
  border-radius: 3em;
  position: relative;

  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.OnOffSlider:after {
  content: 'OFF';
  color: #dc524a;
  position: absolute;
  top:4px;
  right: 5px;
  z-index: 0;
  font-weight: normal;
  text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}

.OnOffSlider:before {
  content: 'ON';
  color: #26a163;
  position: absolute;
  top:0.3em;
  left: 0.5em;
  z-index: 0;
  font-weight: normal;
}

.OnOffSlider label {
  display: block;
  width: 4em;
  height: 1.8em;

  -webkit-border-radius: 3.5em;
  -moz-border-radius: 3.5em;
  border-radius: 3.5em;

  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
  cursor: pointer;
  position: absolute;
  top: 1px;
  left: 3px;
  z-index: 1;

  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  background: #fcfff4;

  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.OnOffSlider input[type=checkbox]:checked + label {
  left: 4em;
}

td .OnOffSlider {
  margin: 0px 0px;
}

/* Master-tab client-side pagination: the #pages container now holds a generated
   .pagenav/.pagination block (same markup as _pagination.html), so it just needs
   to be a plain centered wrapper — the teal pill styling comes from .pagination. */
#pages {
  text-align: center;
  background-color: transparent;
  margin: 0 auto;
}

.patientlist {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  border-collapse: separate;
  border-spacing: 0 14px;       /* vertical gap between row-cards */
}
.patientlist> thead {
  display: none;
}
.patientlist > tbody > tr{
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20,50,90,.10);
  transition: box-shadow .18s ease;
}
.patientlist > tbody > tr:hover{
  box-shadow: 0 4px 16px rgba(20,50,90,.16);
}
.patientlist > tbody > tr:nth-of-type(2n+1),
.patientlist > tbody > tr:nth-of-type(even) {
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: transparent;
}

.patientlist .fa-trash {
  vertical-align: middle;
  font-size:1.4em;
  color: grey;
  float: left;
}

/* delete/trash icon: a soft, rounded red highlight on hover instead of the
   harsh solid-red square box. Padding is always present so there's no jump. */
.fa-trash.btn-danger{
  color:#9aa4ad; background-color:transparent !important;
  border-radius:50%; padding:5px; line-height:1; cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.fa-trash.btn-danger:hover{
  color:#c0392b !important; background-color:rgba(217,83,79,.15) !important;
}

.patientlist > tbody > tr > td {
  padding: 16px 12px;
  background-color: white;
  vertical-align: middle;
}
.patientlist > tbody > tr > td:first-child{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.patientlist > tbody > tr > td:last-child{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.master-section {
  background-color: transparent;
}

/*.master-section .table {
    font-size:1.15em !important;

}

.master-section .table > thead > tr > th{
    font-size:1.2em !important;

}*/
.master-section .table > tbody > tr:nth-of-type(2n+1),
.master-section .table > tbody > tr:nth-of-type(even) {
  background-color: transparent;
}

.master-section .table > tbody > tr > td {
  background-color: white;
  /*font-size:1.15em;*/
  padding: 15px;
}

.collapse,
.collapse .in{
  list-style-type: none;
}

.patient-name{
  font-size: 1.15em;
  font-weight: bold
}

.select2-container--default .select2-selection--single {
  border: 0; 
  border-bottom: 1px dashed #d2dbdf; 
}


.table-borderless > tbody > tr > th, 
.table-borderless > tfoot > tr > th, 
.table-borderless > thead > tr > td, 
.table-borderless > tbody > tr > td, 
.table-borderless > tfoot > tr > td {
  border: 0px solid transparent;
}

#rootwizard {
  margin: 40px;
}
.wizard-tabs {font-size:1.1em; padding-top: 50px;padding-bottom: 50px;}
.wizard-tabs > li{ padding:0 10px 0 10px; color: black ; border-right:0px solid #edf4f6;}
.wizard-tabs > li:last-child{border-right:0px solid #edf4f6;}
.wizard-tabs > li > a{color:black; padding:10px;}
.wizard-tabs > li > a:hover{color:#90a4ae; background-color:transparent;}
.wizard-tabs > li.title{ color:black;padding:0 10px 0 10px;border-right:0px solid #edf4f6; min-width:10em;text-transform: uppercase;}
.wizard-tabs > li.title > a{color:black; padding:0px;}
.wizard-tabs > li.title > a:hover{color:#4085de;}
.wizard-tabs span{ font-weight:bold;color:#333; display:inline-block; padding:0 2px 0 5px;}
.wizard-tabs i{ margin-right:4px;}

.all-copy {  
  -webkit-user-select: all;  /* Chrome all / Safari all */
  -moz-user-select: all;     /* Firefox all */
  -ms-user-select: all;      /* IE 10+ */
  user-select: all;          /* Likely future */   
}

.whiteLabel{
  color: white;
}

.mt20{
  margin-top: 20px;
}

/* .nav-pills > li{ padding:0 10px 0 10px; border-right:1px solid #edf4f6;}
.nav-pills > li:last-child{border-right:0px solid #edf4f6;}
.nav-pills > li > a{color:#90a4ae; padding:0px;}
.nav-pills > li > a:hover{color:#90a4ae; background-color:transparent;} */

.parentfill{
  display: inline-block;
  flex-wrap: wrap;
  padding:0 10px 0 10px;
  border-right:1px solid #edf4f6;
}

.parentfill > a{color:#90a4ae; padding:0px;}
.parentfill > a:hover{color:#90a4ae; background-color:transparent;}

.mandatory-warn {
  border: 1px solid #ce3636;
}

.anthros{
  display: inline-block;
}

@media (min-width: 768px) {
  .navbar-collapse.collapse.in {display: block !important;border-top: 1px solid #e7e7e7;}
  .navbar-toggle {display: block;}
	.modal-bodywrap{ padding:15px 25px;}
}

@media (min-width: 981px) {
  .navbar-top-links .dropdown-messages,.navbar-top-links .dropdown-tasks,.navbar-top-links .dropdown-alerts {margin-left: auto;}
  .panel-nav{ margin:-35px 0 0 0;}
  .navbar-collapse {width: auto;border-top: 0;-webkit-box-shadow: none;box-shadow: none;}
  .navbar-collapse.collapse {display: block !important;height: auto !important;padding-bottom: 0;overflow: visible !important;}
  .navbar-collapse.in {overflow-y: visible;}
  .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse {padding-right: 0;padding-left: 0;}
  .navbar-toggle {display: none;}
  #accordion .panel-body{ min-height:275px;}
  .modal-header,.modal-wrap{ padding:15px 45px;}
  .addModal .row{ margin-left:-35px; margin-right:-35px;}
  .addModal [class*="col-"] { padding-left:35px; padding-right:35px;}
}

@media (min-width: 992px){
  .modal-lg {
      width: 900px;
  }
}

@media (min-width: 1800px)
{
  .sidebar {
    width: 250px;
    left: -200px;
  }
}

@media (min-width: 1920px)
{
  body
  {
    font-size:18px;
  }
  .labtest-right
  {
    width:5em;
  }
  .modal-lg {
    width: 1200px;
  }
}

@media (min-width: 2048px)
{
  body
  {
    font-size:32px;
  }
  .labtest-right
  {
    width:6em;
  }
  .modal-lg {
    width: 1200px;
  }
}

@media (min-width: 2560px)
{
  body
  {
    font-size:24px;
  }
  .labtest-right
  {
    width:6em;
  }
  .modal-lg {
    width: 1800px;
  }
}

@media (max-width: 1440px) {
  body
  {
    font-size:14px;
  }
}

@media (max-width: 1200px) {
  body
  {
    font-size:12px;
  }
  .labtest-right
  {
    width:3em;
  }
}

@media (max-width: 1024px) {
  body
  {
    font-size:11px;
  }
  .labtest-right
  {
    width:3em;
  }
}
@media (max-width: 900px) {
  body
  {
    font-size:10px;
  }
}

@media (max-width: 767px) {
  body
  {
    font-size:10px;
  }
  .labtest-right
  {
    width:4em;
  }
  .navbar-collapse {display: block;}
  .navbar-collapse.collapse.in {display: block !important;border-top: 1px solid #e7e7e7;}
  .navbar-toggle {display: block;}

  ul.timeline:before {left: 40px;}
  ul.timeline > li > .timeline-panel {width: calc(10%); width: -moz-calc(10%); width: -webkit-calc(10%);}
  ul.timeline > li > .timeline-badge {top: 16px;left: 15px;margin-left: 0;}
  ul.timeline > li > .timeline-panel {float: right;}
  ul.timeline > li > .timeline-panel:before {right: auto;left: -15px;border-right-width: 15px;border-left-width: 0;}
  ul.timeline > li > .timeline-panel:after {right: auto;left: -14px;border-right-width: 14px;border-left-width: 0;}

}


@media (max-width: 640px) {
	.nav-pills > li.title{ float:none;}
	.nav-pills > li{ padding:0 8px; margin-bottom:5px;}
	.note:after {top:36px;  left: 280px;}
	.note {left:inherit; right: 0;}
}

@media (max-width: 480px) {
	.usertx{ display:none;}

}

@media (max-width: 322px) {
	.navbar-top-links li.profile-nav a{ padding:10px 6px;}
	.userpic{ width:34px; height:34px;}
	.userpic img{ width:100%; height:100%;}
}


/* ── Patient search autocomplete (jQuery UI) ───────────────────────────── */
.ui-autocomplete.ui-menu{
	position:absolute;
	z-index:3000 !important;
	max-height:300px;
	overflow-y:auto;
	overflow-x:hidden;
	padding:5px !important;
	margin-top:5px;
	list-style:none;
	background:#fff !important;
	border:1px solid #e3e8ee !important;
	border-radius:10px !important;
	box-shadow:0 10px 28px rgba(31,41,55,.16) !important;
	font-family:inherit;
}
.ui-autocomplete.ui-menu .ui-menu-item{
	list-style:none;
	margin:0;
	border:none !important;
	background:transparent !important;
}
/* covers the <div> wrapper (jQuery UI 1.12) and the <a> markup (older builds) */
.ui-autocomplete.ui-menu .ui-menu-item-wrapper,
.ui-autocomplete.ui-menu .ui-menu-item > a{
	display:block;
	padding:9px 14px;
	font-size:14px;
	line-height:1.3;
	color:#37474f !important;
	background:transparent !important;
	border:none !important;
	border-radius:7px;
	cursor:pointer;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	transition:background .12s ease, color .12s ease;
}
.ui-autocomplete.ui-menu .ac-match{ color:#1f6a7b; font-weight:700; }
/* active / focus / hover — force the brand teal over jQuery UI's blue theme */
.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete.ui-menu .ui-menu-item-wrapper:hover,
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-state-active,
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-state-focus,
.ui-autocomplete.ui-menu .ui-menu-item > a:hover{
	background:#1f6a7b !important;
	color:#fff !important;
	border:none !important;
	margin:0 !important;
}
.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-active .ac-match,
.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-focus .ac-match,
.ui-autocomplete.ui-menu .ui-menu-item-wrapper:hover .ac-match,
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-state-active .ac-match,
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-state-focus .ac-match,
.ui-autocomplete.ui-menu .ui-menu-item > a:hover .ac-match{
	color:#fff !important;
}
.ui-helper-hidden-accessible{
	position:absolute !important;
	left:-9999px;
	width:1px; height:1px;
	overflow:hidden;
}

/* ── "Search by Disorders" dropdown (selectize) — match the patient autocomplete ── */
.tabletop .selectize-dropdown{
	margin-top:5px !important;
	padding:5px !important;
	background:#fff !important;
	border:1px solid #e3e8ee !important;
	border-radius:10px !important;
	box-shadow:0 10px 28px rgba(31,41,55,.16) !important;
}
.tabletop .selectize-dropdown .selectize-dropdown-content{
	max-height:300px;
	overflow-y:auto;
	overflow-x:hidden;
}
.tabletop .selectize-dropdown .option{
	padding:9px 14px !important;
	font-size:14px;
	line-height:1.3;
	color:#37474f !important;
	background:transparent !important;
	border-radius:7px;
	cursor:pointer;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	transition:background .12s ease, color .12s ease;
}
.tabletop .selectize-dropdown .option.active,
.tabletop .selectize-dropdown .option:hover{
	background:#1f6a7b !important;
	color:#fff !important;
}
/* selectize bolds the matched substring in <span class="highlight"> — make it teal */
.tabletop .selectize-dropdown .highlight{
	background:transparent !important;
	color:#1f6a7b;
	font-weight:700;
	border-radius:0;
}
.tabletop .selectize-dropdown .option.active .highlight,
.tabletop .selectize-dropdown .option:hover .highlight{
	color:#fff !important;
}

/* ═══════════════════════════════════════════════════
   MOBILE OVERRIDES  —  xs < 768px  /  sm < 992px
   ═══════════════════════════════════════════════════ */

/* ── Mobile + Tablet: off-canvas sidebar & hamburger ── */
@media (max-width: 991px) {
    /* Wrapper: no left margin (sidebar is fully hidden) */
    #wrapper { margin-left: 0 !important; padding-top: 48px; }

    /* Sidebar fully off-screen; slides in on toggle */
    .sidebar {
        left: -175px !important;
        transition: left 0.25s ease;
        z-index: 1049;
        top: 48px;
        height: calc(100% - 48px);
    }
    .sidebar.sidebar-open { left: 0 !important; }

    /* Disable the desktop hover-to-expand */
    .sidebar:hover { left: -175px !important; }
    .sidebar.sidebar-open:hover { left: 0 !important; }

    /* Semi-transparent overlay behind open sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1048;
        cursor: pointer;
    }
    .sidebar-overlay.active { display: block; }

    /* Fixed top bar with hamburger */
    .mobile-topbar {
        display: flex !important;
        align-items: center;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 48px;
        background: linear-gradient(to right, #327080, #317a7d);
        z-index: 1052;
        padding: 0 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    .hamburger-btn {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 1.6em;
        padding: 0 12px 0 0;
        cursor: pointer;
        line-height: 1;
    }
    .mobile-brand { color: #fff; font-size: 1.05em; font-weight: 600; letter-spacing: 0.02em; }
}

/* Hide the mobile topbar on md+ (desktop/laptop) */
@media (min-width: 992px) {
    .mobile-topbar { display: none !important; }
    .sidebar-overlay { display: none !important; }
}


/* ── Phone (xs < 768px): modals full-screen ── */
@media (max-width: 767px) {
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-sm,
    .modal-dialog-large,
    .modal-dialog-long {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-height: 100vh;
    }
    .modal-content {
        min-height: 100vh;
        border-radius: 0 !important;
        padding-top: 48px;
    }
    /* Vertical-alignment helpers used in patient list modals */
    .vertical-alignment-helper { display: block; }
    .vertical-align-center { vertical-align: top; }
}


/* ── Phone (xs < 768px): touch targets ── */
@media (max-width: 767px) {
    .btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .nav-pills > li > a,
    .nav-tabs > li > a { min-height: 44px; padding-top: 12px; }
    table td a,
    table td button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
    .close-btn { min-height: 44px; min-width: 44px; }
}


/* ── Phone (xs < 768px): table → card reflow ──
   Usage: add class "table-mobile-cards" to any <table> you want reflowed.
   Also add data-label="Column Header" to every <td> in that table. ── */
@media (max-width: 767px) {
    .table-mobile-cards { border: none; }
    .table-mobile-cards thead { display: none; }
    .table-mobile-cards tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #dce5ec;
        border-radius: 8px;
        padding: 8px 4px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(31,41,55,.07);
    }
    .table-mobile-cards tbody td {
        display: block;
        width: 100%;
        border: none !important;
        padding: 5px 10px;
        text-align: left;
    }
    .table-mobile-cards tbody td::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: #1f6a7b;
        font-size: 0.85em;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        display: inline;
        margin-right: 4px;
    }
    /* Hide empty cells */
    .table-mobile-cards tbody td:empty { display: none; }
    /* Actions cell: hide the label prefix */
    .table-mobile-cards tbody td[data-label="Actions"]::before { content: ""; }
    .table-mobile-cards tbody td[data-label=""] { padding: 6px 10px; }
    /* Remove table-striped background on xs */
    .table-mobile-cards.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
}


/* ── Phone (xs < 768px): form grid — stack all columns ── */
@media (max-width: 767px) {
    .form-horizontal .col-sm-1,
    .form-horizontal .col-sm-2,
    .form-horizontal .col-sm-3,
    .form-horizontal .col-sm-4,
    .form-horizontal .col-sm-5,
    .form-horizontal .col-sm-6,
    .form-horizontal .col-sm-7,
    .form-horizontal .col-sm-8,
    .form-horizontal .col-sm-9,
    .form-horizontal .col-sm-10,
    .form-horizontal .col-sm-11 {
        width: 100%;
        float: none;
    }
    /* Non-form rows with col-sm-* inside white-card or tabletop */
    .white-card .col-sm-3,
    .white-card .col-sm-4,
    .white-card .col-sm-6,
    .white-card .col-sm-9,
    .tabletop .col-sm-3,
    .tabletop .col-sm-4,
    .tabletop .col-sm-6,
    .tabletop .col-sm-9 {
        width: 100%;
        float: none;
    }
}


/* ── Phone (xs < 768px): lab test tab layout ── */
@media (max-width: 767px) {
    /* Tab list goes full-width above the content */
    .instructionstab .lab-test-tab.col-sm-3,
    .instructionstab .tab-content.col-sm-9 {
        width: 100%;
        float: none;
    }
    /* Parameter columns: 2 per row instead of 4 */
    .instructionstab [name="xtestparam"] .col-sm-3 {
        width: 50%;
        float: left;
    }
}


/* ── Phone (xs < 768px): patient dashboard user header ── */
@media (max-width: 767px) {
    .user-headbox .infowrap { flex-direction: column; }
    .user-headbox .info-left { width: 100%; }
    .user-headbox .info-right { width: 100%; margin-top: 10px; }
    .tabletop .nav-pills { flex-wrap: wrap; }
    .tabletop .nav-pills > li { margin-bottom: 4px; }
}


/* ── Phone (xs < 768px): pagination ── */
@media (max-width: 767px) {
    .pagenav .pagination { flex-wrap: wrap; gap: 4px; }
    .btn-nav, .page-item { margin: 2px; }
}


/* ═══════════════════════════════════════════════════
   MOBILE FIXES — card unification, touch targets, padding
   (phones < 768px; no desktop / behaviour change)
   ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* 1 ── Tighter screen padding so cards use the full width (was 30px each side) */
    #page-wrapper { padding-left: 10px !important; padding-right: 10px !important; }
    .white-card { padding-left: 8px !important; padding-right: 8px !important; }
    .table-wrap, .table-responsive { margin-left: 0 !important; margin-right: 0 !important; }

    /* 2 ── ONE clean white card per row.
       Neutralise the desktop .patientlist per-cell styling (white-per-cell,
       row spacing, rounded corners / notch) that was fighting the reflow. */
    .table-mobile-cards { border-collapse: collapse !important; }
    .table-mobile-cards.patientlist { border-spacing: 0 !important; }
    .table-mobile-cards > tbody > tr {
        background: #fff !important;
        border: 1px solid #e3e8ee !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 5px rgba(31,41,55,.08) !important;
        padding: 10px 12px !important;
        margin-bottom: 12px !important;
    }
    .table-mobile-cards > tbody > tr > td {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    /* the little corner "notch" came from per-cell first/last radius — gone above */

    /* 3 ── Hamburger: real 44×44 tap target (was ~16px tall) */
    .hamburger-btn {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0 !important; margin-left: -8px; font-size: 1.5em;
    }

    /* 4 ── Medicines master: compact cards (drop the report/excel icon cells that
       are useless on a phone, let chips wrap tightly) so the page isn't enormous. */
    #fulltable.table-mobile-cards > tbody > tr > td[data-label=""],
    #fulltable.table-mobile-cards > tbody > tr > td[data-label="Report"] { display: none !important; }
    #fulltable.table-mobile-cards > tbody > tr { padding: 8px 10px !important; }
    #fulltable.table-mobile-cards .link-secondary,
    #fulltable.table-mobile-cards .link-inactive {
        display: inline-block; margin: 2px 5px 2px 0; white-space: normal;
    }
    /* keep medicine chips on one wrapping flow, not stacked */
    #fulltable.table-mobile-cards > tbody > tr > td[data-label="Medicines"] { line-height: 2; }
}


/* ── Mobile scroll fix + card polish ── */
@media (max-width: 991px) {
    /* SCROLL FIX: card-reflowed tables sit inside .table-responsive (overflow-x:auto),
       an 8000px-tall scroll container that traps / janks touch scrolling. Card layouts
       need no horizontal scroll — let the page body scroll smoothly instead. */
    .table-responsive { overflow: visible !important; -webkit-overflow-scrolling: auto; }
    .table-wrap { overflow: visible !important; }
}
@media (max-width: 767px) {
    /* Tighten the airy cards (less vertical dead space between sections) */
    .table-mobile-cards > tbody > tr { padding: 8px 12px !important; margin-bottom: 10px !important; }
    .table-mobile-cards > tbody > tr > td { padding-top: 3px !important; padding-bottom: 3px !important; }
    .table-mobile-cards > tbody > tr > td > span { display: inline; }
    /* Hide the "FORMULATION:" label on medicines continuation rows (value is .hidden) */
    #fulltable.table-mobile-cards td[data-label="Formulation"]:not(:has(li:not(.hidden))) { display: none; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE CARDS — BULLETPROOF (overrides desktop .patientlist /
   table shrink-wrap / per-cell white bg with higher specificity)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* the <table> must become a full-width block (a display:table box
       shrink-wraps to content → the half-width white box you saw) */
    table.table-mobile-cards,
    table.table-mobile-cards > tbody {
        display: block !important;
        width: 100% !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        background: transparent !important;
    }
    table.table-mobile-cards > thead { display: none !important; }

    /* each row = ONE clean full-width white card */
    table.table-mobile-cards > tbody > tr {
        display: block !important;
        width: 100% !important;
        float: none !important;
        background: #fff !important;
        border: 1px solid #e6ebf0 !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 6px rgba(20,50,90,.10) !important;
        margin: 0 0 12px 0 !important;
        padding: 12px 14px !important;
        cursor: pointer;
    }

    /* every cell = transparent full-width block (kills per-cell white bg,
       column widths, first/last-child radius "notch") */
    table.table-mobile-cards > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 3px 0 !important;
        text-align: left !important;
        white-space: normal !important;
        vertical-align: top !important;
    }
    table.table-mobile-cards > tbody > tr > td:empty { display: none !important; }

    /* the trash / action icon sits left, not floated weirdly */
    table.table-mobile-cards .fa-trash { float: none !important; margin-top: 4px; }
    table.table-mobile-cards > tbody > tr > td a { float: none !important; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE — REDESIGNED PATIENT-LIST CARD (#pListTable only)
   Old layout wasted a full-width block on the delete button (a lone
   trash icon floating in empty space). New layout: name is the card
   title, disorders/contact stack cleanly with their labels, and the
   delete is a compact button pinned to the card's top-right corner.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* card is the positioning context for the corner delete button */
    #pListTable.table-mobile-cards > tbody > tr {
        position: relative !important;
        padding: 13px 14px !important;
    }

    /* patient name becomes the card title; drop the redundant "PATIENT:" label */
    #pListTable.table-mobile-cards > tbody > tr > td[data-label="Patient"]::before { content: "" !important; }
    #pListTable.table-mobile-cards > tbody > tr > td[data-label="Patient"] {
        padding-right: 46px !important;   /* keep the title clear of the corner trash */
        margin-bottom: 4px !important;
    }
    #pListTable .patient-name,
    #pListTable.table-mobile-cards > tbody > tr[data-target] > td[data-label="Patient"] {
        font-size: 1.12em !important;
        font-weight: 700 !important;
        color: #14324a !important;
        line-height: 1.25 !important;
    }
    #pListTable.table-mobile-cards > tbody > tr > td[data-label="Patient"] > span {
        font-weight: 400 !important;
        color: #6b7b8a !important;
        font-size: 0.92em !important;
    }
    #pListTable .info-left.link-primary { color: #c77d00 !important; font-weight: 600 !important; }

    /* labels sit on their own line above the value — cleaner stacked look */
    #pListTable.table-mobile-cards > tbody > tr > td[data-label="Active Disorders"]::before,
    #pListTable.table-mobile-cards > tbody > tr > td[data-label="Contact"]::before {
        display: block !important;
        margin: 0 0 2px 0 !important;
    }
    #pListTable.table-mobile-cards > tbody > tr > td[data-label="Active Disorders"] li {
        margin-left: 16px;
    }
    /* hide the Active-Disorders cell entirely when no disorders loaded (avoids a stray label) */
    #pListTable.table-mobile-cards td[data-label="Active Disorders"]:not(:has(li)) { display: none !important; }

    /* delete → compact rounded button pinned to the card's top-right corner */
    #pListTable.table-mobile-cards > tbody > tr > td[data-label="Actions"] {
        position: absolute !important;
        top: 9px !important;
        right: 9px !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #pListTable.table-mobile-cards td[data-label="Actions"] a { display: inline-block !important; }
    #pListTable.table-mobile-cards td[data-label="Actions"] .fa-trash {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: #fdecea !important;
        color: #d9534f !important;
        font-size: 14px;
        margin: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}


/* ── Mobile: patient-card screens (dashboard / day-profile review) ── */
@media (max-width: 767px) {
    /* Metric/anthropometry pill rows must wrap, not clip off-screen */
    .nav.nav-pills { flex-wrap: wrap !important; }
    .user-headbox .nav.nav-pills > li,
    .tabletop .nav.nav-pills > li { white-space: nowrap; }

    /* The fixed right-edge action rail overlapped the card content.
       Turn it into a clean bottom action bar. */
    .fab-rail {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        top: auto !important; transform: none !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        gap: 0 !important;
        background: #fff;
        border-top: 1px solid #e3e8ee;
        box-shadow: 0 -2px 10px rgba(0,0,0,.12);
        padding: 4px 4px;
        z-index: 1045;
        overflow-x: auto;
    }
    .fab-rail .floater {
        flex: 1 0 auto;
        margin: 0 2px !important;
        min-width: 44px; min-height: 44px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 8px !important;
    }
    /* keep the bottom bar from covering the last content */
    #wrapper { padding-bottom: 64px; }
}


/* ── Mobile ROOT FIX: grid columns must all clear floats and stack ──
   Bug: a col-xs-12 (float:left) next to a col-sm-4 (float:none) overlapped —
   the disorders column sat on top of the search input and ate every tap, so
   search "did not work". Force every grid column in these rows to a clean
   full-width block so nothing overlaps. ── */
@media (max-width: 767px) {
    .tabletop [class*="col-"],
    .white-card > .row > [class*="col-"],
    .row.tabletop > [class*="col-"] {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
    }
}


/* ── Mobile ROOT FIX: modal vs topbar ──
   The fixed mobile topbar (z-index 1052) sat above open modals (z-index 1050),
   covering the modal's top input/close button. A modal is a focused context —
   hide the topbar while one is open (Bootstrap adds .modal-open to <body>). ── */
@media (max-width: 767px) {
    body.modal-open .mobile-topbar { display: none !important; }
    body.modal-open .sidebar,
    body.modal-open .sidebar-overlay { display: none !important; }
    .modal-content { padding-top: 12px !important; }
}


/* ── Mobile: full-screen modals need a guaranteed-visible, tappable close (×).
   Some modals (e.g. Edit Disorder / Edit Investigation) put the close in a
   modal-header that doesn't render reliably on mobile, leaving the user trapped.
   Pin the DISMISS close (and our master-modal-close) as a fixed round button at
   the screen's top-right for ANY modal — independent of header rendering.
   Scoped to [data-dismiss="modal"] so selectize/other .close icons are untouched. ── */
@media (max-width: 767px) {
    .modal .close[data-dismiss="modal"],
    .modal .master-modal-close {
        position: fixed !important;
        top: 8px !important;
        right: 10px !important;
        z-index: 2000 !important;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 50% !important;
        background: #eef2f7 !important;
        color: #333 !important;
        font-size: 26px !important;
        line-height: 42px !important;
        font-weight: 400 !important;
        text-align: center !important;
        text-shadow: none !important;
        opacity: 1 !important;
        display: block !important;
        float: none !important;
    }
    .modal .close[data-dismiss="modal"]:empty::before,
    .modal .master-modal-close:empty::before { content: "\00d7"; }
}


/* ── Mobile: jQuery-UI sortable sets touch-action:none on every row, which
   BLOCKS finger-scroll when the swipe starts on a card (the middle of the
   screen). Re-enable vertical panning so swiping a card scrolls the page.
   Drag-to-reorder via touch isn't used on these lists. ── */
@media (max-width: 767px) {
    .ui-sortable,
    .ui-sortable-handle,
    table.table-mobile-cards,
    table.table-mobile-cards > tbody,
    table.table-mobile-cards > tbody > tr,
    table.table-mobile-cards > tbody > tr > td {
        touch-action: pan-y !important;
    }
}


/* ── Mobile: Settings cards were squeezed to ~250px & centered because
   .settings-body keeps its desktop max-width:80% + 40px padding. Make the
   panels span the screen with the standard 10px gutter like every other
   screen's .white-card. ── */
@media (max-width: 767px) {
    .settings-body {
        max-width: 100% !important;
        padding: 12px 0 !important;
    }
    .settings-body > .col-sm-10,
    .settings-body > .col-sm-offset-1 {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .settings-panel { margin-bottom: 12px !important; }
}


/* ── Mobile: the search/action row (.tabletop) sat flush against the first
   patient card — the Advanced Search / Add Patient buttons touched/overlapped
   the card top (zero gap). Add breathing room below the row, and a little gap
   between the two stacked buttons. ── */
@media (max-width: 767px) {
    .row.tabletop { margin-bottom: 18px !important; }
    .row.tabletop .btn.mt20 { margin-bottom: 8px; }
}


/* ── Mobile: pages whose content starts directly with .user-headbox (Day Profile
   review, interactions patient dashboard) have no .tabletop wrapper to supply the
   top gap, so they sit flush against the fixed 48px .mobile-topbar. Give the page
   wrapper real top padding (not a margin — margins collapse through the wrapper and
   are fragile) whenever it directly holds a .user-headbox. :has() scopes it so
   .tabletop-wrapped pages are untouched and never double-gapped. ── */
@media (max-width: 767px) {
    /* pages whose page-wrapper directly holds a gap-less first block need the 20px
       top gap the .tabletop / .white-card pages already have built in:
         .user-headbox  -> Day Profile review, interactions patient dashboard
         .table-wrap    -> Day Profiles list (cards start flush otherwise)         */
    #page-wrapper:has(> .user-headbox:first-child),
    #page-wrapper:has(> .table-wrap:first-child) { padding-top: 20px !important; }
}


/* ── Mobile: Masters (Disorders / Investigations / Medicines / Resources) —
   tidy the reflowed cards. They weren't overlapping; they were sparse & ragged:
   a stray ": " before the checkbox, plus label-only rows ("RESOURCE LINKS:",
   "HABIT LINKS:", "EXTERNAL LINK:") that carry no value, plus an empty 44px box
   from an <a href="None">. (These cells aren't :empty — they hold whitespace,
   an empty <span>, or an empty <a> — so the existing :empty collapse misses them.) ── */
@media (max-width: 767px) {
    /* 1. kill the stray ": " on the checkbox / unlabeled cell */
    .master-section .table-mobile-cards tbody td:not([data-label])::before,
    .master-section .table-mobile-cards tbody td[data-label=""]::before { content: "" !important; }

    /* 2. collapse label-only rows with no real value (list cells only have
          content as <li> pills; External Link only with a non-empty <a>) */
    .master-section .table-mobile-cards tbody td[data-label="Related conditions"]:not(:has(li)),
    .master-section .table-mobile-cards tbody td[data-label="Resource Links"]:not(:has(li)),
    .master-section .table-mobile-cards tbody td[data-label="Tags"]:not(:has(li)),
    .master-section .table-mobile-cards tbody td[data-label="Habit Links"]:not(:has(li)),
    .master-section .table-mobile-cards tbody td[data-label="External Link"]:not(:has(a:not(:empty))) {
        display: none !important;
    }

    /* 2b. Medicines: the Formulation cell repeats per group — on non-first rows it
          holds an <li class="hidden">, so :has(li) is true yet nothing shows. Hide
          the cell when it has no VISIBLE (non-hidden) li, leaving just BRAND/MEDICINES. */
    .master-section .table-mobile-cards tbody td[data-label="Formulation"]:not(:has(li:not(.hidden))) {
        display: none !important;
    }

    /* 2c. Drop the excel-export icon cells on phones (desktop-only feature; on a
          card they render a stray "REPORT:" label / empty box). Targets both the
          unlabeled and "Report" export cells via their .fa-file-excel icon. */
    .master-section .table-mobile-cards tbody td:has(.fa-file-excel) { display: none !important; }

    /* 2d. The delete cell is conditional ({% if count == 0 %}) — items still in use
          have an EMPTY Actions cell. Hide it when it carries no delete link, so
          non-deletable cards don't end with a blank row. Cells that DO hold the
          trash (or an interactions mail icon) keep showing. */
    .master-section .table-mobile-cards tbody td[data-label="Actions"]:not(:has(a)),
    .master-section .table-mobile-cards tbody td[data-label="File"]:not(:has(a)) {
        display: none !important;
    }
    /* suppress the "DELETE:" label (Resources uses data-label="Delete") so the
       trash reads as an icon, matching the already-unlabeled Actions cells */
    .master-section .table-mobile-cards tbody td[data-label="Delete"]::before { content: "" !important; }

    /* 3. tighten vertical rhythm so each card reads as one compact block */
    .master-section .table-mobile-cards tbody td { padding-top: 3px !important; padding-bottom: 3px !important; }
}


/* ── Master detail modals (brand / generic / medicine details) shipped with NO
   close button — you closed them by clicking the desktop backdrop. On mobile the
   modal is full-screen (no backdrop to tap), so it covered the screen with no way
   out. Add a clear, tappable round × (works on desktop too) and keep content clear
   of it. ── */
.master-modal-close {
    position: absolute !important;
    top: 8px; right: 10px; z-index: 10;
    width: 40px; height: 40px; padding: 0;
    border: none; border-radius: 50%;
    background: #eef2f7; color: #5f6368;
    font-size: 26px; line-height: 38px; text-align: center;
    opacity: 1 !important; text-shadow: none;
}
.master-modal-close:hover,
.master-modal-close:focus { background: #dde5ee; color: #222; opacity: 1 !important; }
.master-modal-close + .modal-body { padding-top: 40px; }


/* keep these added close buttons mobile-only — desktop modals are unchanged
   (they dismiss via the backdrop as before) */
@media (min-width: 768px) {
    .master-modal-close { display: none !important; }
}


/* ── Mobile: inside these AJAX modals the Bootstrap .row carries the usual
   -15px side margins. .modal-bodywrap only had 10px padding to absorb them, and
   NESTED rows compounded the overflow, so rows (esp. the full-width selectize tag
   fields) spilled off the left and clipped their labels. On phones the columns
   stack full-width anyway, so neutralise the row margins + column padding and let
   the bodywrap's own 15px padding be the only gutter. ── */
@media (max-width: 767px) {
    .modal-bodywrap { padding-left: 15px !important; padding-right: 15px !important; }
    .modal-bodywrap .row { margin-left: 0 !important; margin-right: 0 !important; }
    .modal-bodywrap [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Patient-list result summary — one centered card that expands with content.
   Headline = total; the bracketed, colour-matched per-disorder counts are the
   supporting detail (colours link back to the search chips). */
.plist-resultbar { text-align: center; margin: 4px 0 16px; }
.plist-count {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #5a6b7b;
    background: #f4f7fa;
    border: 1px solid #dde5ee;
    box-shadow: 0 1px 2px rgba(20, 40, 60, .05);
    padding: 7px 22px;
    border-radius: 20px;
    max-width: 94%;
    line-height: 2;
}
/* total — the headline; number carries the weight, label stays quiet */
.plist-total { color: #5a6b7b; white-space: nowrap; }
.plist-total b { color: #2b3a49; font-weight: 800; font-size: 16px; }
/* per-disorder counts inside the brackets — name + bold count in the chip colour
   (colour set inline by ajaxreq.js) */
.plist-dcount { font-weight: 600; white-space: nowrap; }
.plist-dcount b { font-weight: 800; }
.plist-sep { color: #c2ccd6; margin: 0 10px; }
.plist-bracket { color: #9aa7b4; font-weight: 700; }
.plist-total + .plist-bracket { margin-left: 12px; }
.plist-bracket:last-child { margin-left: 2px; }
.plist-dcount:first-of-type { margin-left: 6px; }

/* Searched-disorder highlight pill in the Active Disorders column. Rendered as an
   inner <span> so the <li> keeps its bullet and list position (no rearranging).
   Colours (fg/bg) are set inline per-disorder by ajaxreq.js. */
.table span.pat-disease-hl {
    display: inline-block;   /* beat .table span{display:block} so the pill hugs the text */
    font-weight: 700;
    padding: 0 7px;
    border-radius: 10px;
}

/* Rounded pill chips in the "Search by Disorders" box (colours set inline per-chip
   by recolorSearchChips() in custom.js). advanced-search is copied onto the
   selectize control from the original <select id="searchMPL">. */
.advanced-search .selectize-input .item {
    border-radius: 14px !important;
    /* right padding clears the absolutely-positioned × (17px) so text can't slide under it */
    padding: 1px 26px 1px 12px !important;
    font-weight: 600;
    border-width: 1px !important;
    border-style: solid !important;
    margin-right: 5px !important;
    overflow: hidden;   /* clip the square × corner to the rounded pill */
}
.advanced-search .selectize-input .item .remove {
    border-radius: 0 14px 14px 0 !important;   /* round the × end to match the pill */
}