*{box-sizing: border-box; margin: 0; padding:0; text-decoration: none; list-style-type: none; outline: none;
font-family: 'SF SF-Pro-Text-Regular', sans-serif; border:0;}


/*Adding custom font*/
@font-face{font-family: 'SF Pro Text';
src: url(fonts/SF-Pro-Text-Bold.otf), format('otf');
font-weight: 900;}

@font-face{font-family: 'SF Pro Text';
src: url(fonts/SF-Pro-Text-Semibold.otf), format('otf');
font-weight: 700;}

@font-face{font-family: 'SF Pro Text';
src: url(fonts/SF-Pro-Text-Medium.otf), format('otf');
font-weight: 600;}

@font-face{font-family: 'SF Pro Text';
src: url(fonts/SF-Pro-Text-Regular.otf), format('otf');
font-weight: 400;}
/*Adding custom font*/


body{background-color: #f8f8ff;}


/*Defining color code theme for project===================================================*/
:root{--primary1: #2F8FC1; --primary2: #3BCEBE; --tertiary: #C54484; --tertiaryh: #BB3477;
--btnshadow:0 5px 8px rgba(187,52,119, 0.3); --posact: #17BE65; --negact: #FF5757;
--posshadow: 0 5px 8px rgba(23,190,101, 0.5); --negshadow: 0 5px 8px rgba(255,87,87, 0.5);
--sec-green: #3FE67C; --sec-blue: #4BABFF; --sec-yellow: #FFCF4B; --sec-orange:#FFAB4B;
--sec-red:#FF4B4B; --sec-purple: #804BFF; --sec-grey: #ddd;}
/*Defining color code theme for project===================================================*/


/*Defining heading sizes=================================*/
h1{font-size: 40px;}
h2{font-size: 32px;}
h3{font-size: 28px;}
h4{font-size: 24px;}
h5{font-size: 20px;}
h6{font-size: 16px;}
/*Defining heading sizes=================================*/

p, span{font-size: 14px; line-height: 1.6; letter-spacing: 0.03rem;}
a{font-size: 14px; font-weight: 600;}
.blk{display: block;}
img{max-width: 100%; display: block;}

label{font-size: 13px; color: #000; font-weight: 600; margin-bottom: 6px;
display: inline-block; text-align: left;}
label:first-letter{text-transform: uppercase;}


input, select{display: block; padding:10px 12px; font-size: 15px; border: 1px solid transparent; background-color: #F8F8FF;
width: 100%; color: #000; border:1px solid #E2E2FF;}
input[type="checkbox"], input[type="radio"]{display: inline-block; width: auto;}
input[type="submit"], input[type="reset"]{border: 0;}
select{text-transform: capitalize;}
textarea{background-color: #F8F8FF; padding:12px; display: block; width:100%; font-size: 15px;
border: 1px solid transparent; resize: none; line-height: 1.6; border:1px solid #E2E2FF;}

input[type="range"]{padding: 0; margin: 20px 0 20px;}

input:focus, select:focus, textarea:focus{border: 1px solid #ccc;}
input[type="submit"]:focus, input[type="reset"]:focus{border: 0;}


.container-full{position: relative;}
.custom-container{}
.sidebar{background: linear-gradient(to bottom, var(--primary2) , var(--primary1));width: 300px; height: 100vh; position: fixed; z-index: 10002;}
.sidebar-logo{width: 100%; height:72px; border-bottom: 1px solid #fff;}
.sidebar-menu li a{color: #fff; display: flex; align-items: center; padding: 24px 20px;}
.sidebar-menu li a span{margin-right: 15px;}
.sidebar-menu li a:hover, .side-menu-active{background-color:rgba(0,0,0,0.25);
position: relative;}
.sidebar a + div{height: calc(100vh - 72px); overflow:auto;}


.records-wrapper{width: calc(100% - 300px); float: right; position: relative; height:100vh; overflow: auto;}
.stats-wrapper{margin-top: 72px; position: relative;}


.form-400{width: 400px;}
.form-element{min-height: 75px; margin-bottom: 20px; position: relative; }
.form-submit{margin-top: 30px;}
.form-submit input{margin-right:15px;}

.form-title{margin: 0 auto 30px; text-align: center;}

.input-error,.input-error p{font-size: 12px; color:red; margin-top: 4px; font-weight: 600;}
.invalid{border:1px solid red; background-color: rgba(255,0,0,0.05);}


.img-placeholder{position: relative;}
.img-placeholder img{position: absolute; top:0; right:0; bottom: 0; left:0; display: block; margin:auto;}


.clearfix::after{clear: both; display: block; content: "";}

.login-container{position:relative; display: flex; background-color: #eee; background-image: url("../images/moni-bg.jpg");
background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh;}
.login-container::before{background-color: rgba(0,0,0,0.3); position: absolute; top:0; right: 0; bottom: 0; left: 0; content: "";}


.login-caption{width: 100%; z-index: 2; position: absolute;  left: 0; bottom: 0; background: linear-gradient(to left, var(--primary2) , var(--primary1));
display: flex; align-items: center; padding-left: 100px; height: 200px;}
.login-caption h1{color: #fff; font-size: 48px; line-height: 1.6;}

.login-bg{}

.acc-login{width:600px; padding: 40px; display: flex; align-items: center; justify-content: center;}


.icon{}
.icon.icon-brand{width: 197px; height: 60px;}
.icon.icon-minute{width: 20px; height: 20px;}
.icon.icon-small{width: 24px; height: 24px;}
.icon.icon-semi{width: 32px; height: 32px;}
.icon.icon-medium{width: 40px; height: 40px;}
.icon.icon-big{width: 48px; height: 48px;}

.inline-icon{display: inline-block; margin-right: 6px; vertical-align: middle;}


.btn, .btn-yes, .btn-small{background-color:var(--tertiary); font-size: 15px; font-weight: 600; width: auto; padding: 10px 20px;
box-shadow: var(--btnshadow); display: inline-block; color: #fff; text-transform: uppercase; cursor: pointer;}
.btn:hover{background-color:var(--tertiaryh);}
.btn.btn-text{background-color: #fff; color: var(--primary1); box-shadow: none;}
.btn.btn-no{background-color: #fff; color: var(--primary2); box-shadow: 0 3px 6px rgba(0,0,0, 0.1);}
.btn.btn-no:hover{box-shadow: 0 3px 6px rgba(0,0,0, 0.15);}
.btn.btn-white{background-color: #fff; color: var(--tertiary); box-shadow: 0 3px 8px rgba(0,0,0,0.1);}
.btn-blk-save{background-color: rgba(255,87,87, 0.4); color:#ff5757; padding: 6px 10px; text-transform: uppercase; display: none;}
.btn-blk-save:hover{color:#fff; background-color: var(--primary1);}

.btn-small{font-size: 12px; padding: 6px 10px; margin:15px 15px 15px 0;}



.admin-login-form{width: 400px; background-color: #fff; z-index: 2; border-radius: 14px; padding:30px; box-shadow: 0 3px 8px rgba(0,0,0,0.3);
position: absolute; right: 100px; top:50%; transform: translateY(-50%);}

.form-add-action{text-align: center;}
.form-add-action a{color:var(--primary1); font-weight: 600;}


.site-main.image-share img{margin-bottom: 20px;}
.site-main.image-share button{background-color: #ff4b36; color: #fff; border:0; outline: 0; margin-right: 15px;
padding: 8px 12px;}







.header{background-color: #fff; border-bottom: 1px solid #e2e2e2; padding-right:45px; position: fixed; width: calc(100% - 300px);
z-index: 9999;}
.header-menu > li{display: inline-block;padding: 12px 0; vertical-align: text-top; margin-left: 15px;}
.header-menu > li > a{border: 1px solid #e2e2e2; border-radius: 100%; transition: ease-in-out 0.3s;}


.new-noti{width: 12px; height: 12px; display: block; background-color: red; border-radius: 100%; position: absolute; top:9px; right: 9px;}


.noti-counter{background-color: red; color:#fff; font-size: 12px; font-weight: 600; padding:2px 4px; border-radius: 20px;}


.dropie-wrapper{position: relative;}
.dropie{border: 1px solid #e2e2e2; background-color: #fff; position: absolute; top:100%; right: 0;
visibility: hidden; opacity: 0; z-index: 9999; transition: ease-in-out 0.3s; pointer-events: none; overflow:hidden; min-width: 150px;}
.dropie li a{padding: 10px 15px; display: block; color: #000;
min-width: 100px; font-weight: 400; text-transform: capitalize;}
.dropie li a:hover{background-color: #f7f7f7;}
.dropie.dropie-noti{width: 400px;}
.noti-dropdown ul li a{border: 1px solid #e2e2e2; max-width: 400px;}

.notifications{}
.notifications li{}
.notifications li a{display: flex; align-items: flex-start;}

.noti-img{width: 40px; height: 40px; display: inline-block; margin-right: 10px; border-radius: 8px; overflow: hidden;}
.noti-des{width: calc(100% - 55px); line-height: 1.6; font-weight: 400; color: #000;}

.superadmin-pp{width: 48px; height: 48px; overflow:hidden;}

.dropie.dropie-acc{width: 180px;}
.dropie-head{padding: 15px; border-bottom: 1px solid #e2e2e2;}

.header-menu > li > a:hover {box-shadow: 0 3px 12px rgba(0,0,0,0.2);}
/*.dropie-wrapper:hover .dropie{border-bottom: 2px solid #e2e2e2; visibility: visible; opacity: 1; pointer-events: auto;}*/

.account li a{font-weight: 400;}
.account li a:hover{background-color: #f7f7f7;}



.custom-container{width: 100%; padding:40px 50px;}
.block{border:1px solid #e2e2e2; border-radius: 8px; padding: 20px; position: relative; margin-bottom: 40px; background-color: #fff;
transition: ease-in-out 0.4s;}
.block-form{}
.block-table{border: 1px solid #e2e2e2; padding: 0; background-color: #fff;
margin-bottom: 40px;}

.block.block-filter{border:0;}
.block-ques .dropie{min-width: 150px;}



.block-title{padding:20px; margin:-20px -20px 20px;  border-bottom:1px solid #e2e2e2; display:flex; align-items:center;
justify-content:space-between;}
.block-title h6{padding-top: 2px;}
.block.block-filter .block-title{border-bottom: 0;}

.page-head{margin-bottom: 50px; display: flex; align-items: center;justify-content: space-between;}


.page-head-action{display:flex; justify-content: flex-end;}
.page-head-action > *{margin-left: 15px;}
.page-title h5{text-transform: uppercase;}
.btn-filter{background-image: url('../images/filters.png'); background-repeat: no-repeat; width: 39px; height: 39px;
background-position:center; background-color: transparent; border: 1px solid #e2e2e2; cursor: pointer; background-color: #fff;
box-shadow: 0 3px 6px rgba(0,0,0,0.05);}

.results-found{background-color: #e2e2e2; color: #000; padding: 6px 12px; display: inline-block; margin: 0 auto 15px; display: table;
border-radius: 20px; font-weight: 600; font-size: 14px ;}




.dash-tile{margin: 20px; transition: ease-in-out 0.3s; display: block;height:130px;}
.dash-tile:hover{box-shadow: 0 3px 8px rgba(0,0,0,0.1);}
.dash-tile h6{color:#000; }
.dash-tile p{font-size: 34px; color: var(--primary1); font-weight: 700;}


.page-breadcrumb{display: flex;}
.page-breadcrumb li{}
.page-breadcrumb li a{color: #000; font-weight:500; padding:0 8px; position: relative; text-transform: capitalize;}
.page-breadcrumb li:first-child a{padding-left:0;}
.page-breadcrumb li a::after{background-color: #000; width: 4px; height: 4px; border-radius: 100%; position: absolute; top:7px; right: -2px;
content: "";}
.page-breadcrumb li a.active{font-weight: 700; color: var(--tertiary);}
.page-breadcrumb li a:hover{color: var(--primary1);}
.page-breadcrumb li:last-child a::after{display: none;}

.clock{display: inline-block; background-color: rgba(255,255,255,0.3); padding: 4px 8px; margin: -8px  8px -8px -17px;
color:#fff; font-size: 16px; cursor: default;}


/*Css for tables and its customization===================================================*/
table{width: 100%; text-align: left; border-collapse: collapse;}
table tr{width: 100%; background-color: #fff;}
thead tr th{background-color: #f2f2f2; z-index: 5; text-transform: capitalize;}
thead tr th:first-child,  tr td:first-child{position: sticky; left: 0; z-index: 6; background-color: #fff;}
thead tr th:first-child{z-index: 7; background-color: #f2f2f2;}

table tr:nth-child(even) td{background-color: #f9f9f9;}
table td{padding: 6px 15px;  font-size: 15px;}
table a:link, table a:visited, table a:hover, table a:active{color: var(--primary1);}

.table-head{}
.table-head:hover{background-color: #fff;}
.table-head th{ padding: 20px 15px; font-size: 15px; position: sticky; top:0;}

.slide-table{position: relative; overflow-y: auto; display: block;}
.slide-table-track{height:auto;}
.slide-table thead tr th, .slide-table td, .slide-table-track thead tr th,
.slide-table-track td{white-space: nowrap;}


/*.pat-list-table{height: 1346px;}*/
.pat-list-table tbody tr > td:first-child{padding: 0; border-bottom: 1px solid rgba(0,0,0,0.05);}
.pat-list-table tbody tr > td:first-child > div{padding: 12px 15px;}
.pat-list-table tbody tr > td:first-child div a{color: #fff;}

.pat-list-table tbody div.pat-discharge{background-color: var(--sec-green);}
.pat-list-table tbody div.pat-good{background-color: var(--sec-blue);}
.pat-list-table tbody div.pat-well{background-color: var(--sec-yellow);}
.pat-list-table tbody div.pat-warning{background-color: var(--sec-orange);}
.pat-list-table tbody div.pat-danger{background-color: var(--sec-red);}


.notes {
	padding: 15px;
	border-bottom: 2px solid #e2e2e2
}

.profile-notes {
	height: 500px;
	overflow: auto;
	overflow-x: hidden;
}

.notes.notes-p0{background-color: #fff;}
.notes.notes-p1{background-color: var(--sec-grey);}
.notes.notes-p2{background-color: var(--sec-blue);}
.notes.notes-p3{background-color: var(--sec-purple); color: #fff;}
.notes.notes-p4{background-color: var(--sec-yellow);}
.notes.notes-p5{background-color: var(--sec-orange);}



.table-doc-info, .table-ques{display:flex; align-items: center;}
.table-doc-name, .table-ques-info{width: calc(100% - 40px);}
.table-img{width: 36px; height: 36px; margin-right: 8px; border-radius: 100%; overflow: hidden; background-color: #e2e2e2;}
.table-img img{}

.table-menu{display:flex; position: relative;}
.table-submenu{border: 1px solid #e2e2e2;}
.table-menu-icon{width: 20px; height: 20px; display: block; cursor: pointer;}
/*Css for tables and its customization===============================================*/

.page-head-action{text-align: right;}
.pagi{text-align: right; margin-bottom:40px;}
.pagi li{display: inline-block;}
.pagi li a{display:block; font-size: 13px; padding:4px 8px; color: #000; border-radius: 20px;}
.pagi li a.active{background-color: var(--tertiary); color: #fff;}
.pagi li a:hover{background-color: var(--tertiary); color: #fff; transition: ease-in-out 0.3s; }

.module-search input{background-image: url('../images/search.png'); background-repeat: no-repeat;
background-size: 20px; background-position:10px 7px; padding-left: 36px;}


.form-search{position: relative;}
.form-search input[type=text]{width: 220px;}
.form-search input[type=submit]{background-image: url('../images/search.png'); background-repeat: no-repeat; width: 37px; height: 37px;
position: absolute; top:1px; right:1px; background-position: 8px 8px; cursor: pointer; background-color: transparent;}


.table-ques-info{}
.med-pro-unit:before{content: "("; margin-left: 6px;}
.med-pro-unit:after{content: ")";}



.sub-block{margin-bottom: 20px;}
.block .sub-block:last-child{margin-bottom: 0;}

.sub-ques{margin-right: -20px; border-left: 3px solid var(--tertiary); border-radius: 0; margin-bottom: 10px;}
.ques-no{}





.mlt{position: relative;}
.mlt > div{padding-left: 24px;}
.mlt input[type="checkbox"]{position: absolute; opacity: 0.2;}
.mlt > div::before{background-color:#fff; border:2px solid #686868; content:""; width:12px; height:12px;
border-radius:4px; position:absolute; left:0; top:0; }
.mlt input[type="checkbox"]:checked ~ div::before{background-color: var(--primary1); border: 2px solid var(--primary1);}
.mlt input[type="checkbox"]:checked ~ div::before{display: block;}
.mlt > div::after{width: 8px; height: 4px; border: solid white; border-width: 0 2px 2px 0;
transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);}


.sub-block{}
.sub-block-heading{font-size: 15px; margin: 20px 0;}

.add-opt{display: flex; align-items: center; justify-content: center; height: 62px;}
.add-opt a{color: var(--primary1); display: block; padding:10px 15px;}

.add-ques{text-align: center; cursor: pointer;}
.add-ques:hover{box-shadow:0 3px 8px rgba(0,0,0,0.1);}
.add-ques span{ color: var(--primary1); font-size: 16px; font-weight: 600;}

.ans-bin .table-menu{display: inline-block; margin-left: 20px;}
.ans-bin .dropie{left:0;}
.ans-mlt .form-element{position: relative;}
.form-element .table-menu{position: absolute; top:0; right: 0;}
.ans-mlt .form-element .dropie{min-width: 150px;}
.ans-textarea{}
.yes, .no{display: inline-block; border-radius: 8px; margin-right: 30px;}



.table-pat-info{ padding-left: 30px; display: flex; align-items: center; }
.table-pat-info strong{font-size: 14px;}





/*Medical urgency flag========================================*/
.medical-urgency{background-repeat: no-repeat; background-position: 12px 19px;  position: relative;}
.medical-urgency.fine{ background-image: url(../images/fine.png);}
.medical-urgency.after-while{ background-image: url(../images/after-while.png);}
.medical-urgency.not-severe{ background-image: url(../images/not-severe.png);}
.medical-urgency.immediate{ background-image: url(../images/immediate.png);}

.fine::after, .after-while::after, .not-severe::after, .immediate::after{position:absolute; top: 50%; right:12px; color: #fff; padding: 4px 10px; border-radius: 4px;
opacity: 0; visibility: hidden; transform: translateY(-50%); font-size: 12px;}
.fine::after{background-color: #17BE65; content: "Fine"; }
.after-while::after{background-color: #5784FF; content: "In 2-3 days"}
.not-severe::after{background-color: #F38F1D; content: 'Severe'}
.immediate::after{background-color: var(--primary1); content: 'Immediate'}

.fine:hover::after,  .after-while:hover::after, .not-severe:hover::after, .immediate:hover::after{opacity: 1; visibility: visible;}
/*Medical urgency flag========================================*/




/*Medical emergency count shown for doctors*/
.doc-pat-urgency{display: flex;}

.med-urg{ background-repeat: no-repeat; padding: 8px 8px 8px 20px; margin-right: 16px; background-size: 20px; background-position: 0 6px;
min-width: 64px;}
.med-urg.med-fine{background-image: url(../images/fine.png);}
.med-urg.med-after-while{ background-image: url(../images/after-while.png);}
.med-urg.med-not-severe{ background-image: url(../images/not-severe.png);}
.med-urg.med-immediate{ background-image: url(../images/immediate.png);}
/*Medical emergency count shown for doctors*/


/*Medical problem*/
.medical-problem{display: flex; align-items: center;}
.medical-problem img{margin-right: 8px;}
/*Medical problem*/


/*change in wellness index*/
.cwi{color: red; padding-left: 20px; position: relative; display: inline-block;}
.cwi.cwi-pos{color: #17BE65; font-weight: 600;}
.cwi.cwi-neg{color: #FF5757; font-weight: 600;}
.cwi.cwi-pos::after, .cwi.cwi-neg::after{content: ""; position:absolute; top:50%; left: 5px; border:6px solid transparent; }
.cwi.cwi-pos::after{border-bottom:8px solid #17BE65; transform: translateY(-72%);}
.cwi.cwi-neg::after{border-top:8px solid #FF5757;  transform: translateY(-36%);}
/*change in wellness index*/



/*Tracking graphs====================================*/
.graph{width: 200px; height: 48px; background-color: #e9e9e9; display:flex;
flex-flow: row; cursor: pointer;}
.graph span{ width: calc(200px / 12); height:48px; display: inline-block;}
.graph span .diaslotic, .graph span .systolic{width: 20px; height: 24px; display: block;}
.graph span .diaslotic{border-top: 1px solid #fff;}

.graph span.steps-wrap{width:calc(100% / 1); display:flex; flex-flow: column;}
.graph .avg-steps, .graph .mrg-steps{width:100%;}
/*Tracking graphs====================================*/


/*Alert counts*/
.alt-cnt{padding: 3px 2px;font-weight: 600; border-radius: 4px;}
.alt-cnt.alt-cnt-24{color: var(--primary1);}
.alt-cnt.alt-cnt-72{color: var(--primary2);}
/*Alert counts*/




/*Medical condition*/
.medical-prob{}
.medical-prob div{width: 48px; display: inline-block;}
.medical-prob div img{margin: auto;}
.medical-prob p{text-align: center;}
/*Medical condition*/

/*medical-notes*/
.note-wrapper{position: relative;}
.medical-note{width: 200px; height: 42px;text-overflow: ellipsis; overflow: hidden; cursor: pointer;}
.tooltip{position: absolute; top:0; left:0; padding: 12px; border: 1px solid #e2e2e2; background-color: #f9f9f9;
width: 400px; white-space: initial; opacity: 0; visibility: hidden; z-index: 4; transition: ease-in-out 0.3s;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);}
.note-wrapper:hover .tooltip{opacity: 1; visibility: visible;}
/*medical-notes*/





/*Filters*/
.filters{background-color:var(--tertiary); width: 280px; position: fixed; top:0; left:20px; z-index: 10000;
height:100vh; transition: ease-in-out 0.5s; color: #fff;}
.filter-head{border-bottom:1px solid #fff; color:#fff; padding-left:20px; height:72px; display:flex; align-items:center;}

.close-filter{width: 30px; height: 34px; background-color: var(--tertiary); position: absolute; left: 100%; top:170px;
border-radius: 0 20px 20px 0; display: flex; align-items: center; cursor: pointer;}
.close-filter::before,.close-filter::after{position: absolute; width:3px; height:16px;background-color:#fff; content: "";
left: 12px;}
.close-filter::before{transform:rotate(45deg);}
.close-filter::after{transform:rotate(-45deg);}

.filters-form{padding: 20px; height:calc(100vh - 72px); overflow-y:auto;}
.filters .form-element{min-height: auto; margin-bottom: 6px;}
.filters label{color: #fff; font-weight: 500;}
.filter-sec{margin-bottom: 30px;}
.filter-sec h6{margin-bottom: 10px; font-weight: 600; font-size: 14px; text-transform: capitalize;}
/*Filters*/



/*css for custom checkbox inputs*/
.cb{position: relative;}
.cb > input[type="checkbox"]{position: absolute; opacity: 0;}
.cb > label{padding-left:24px ; display: inline-block; cursor: pointer;}
.cb > label::before{background-color: #e2e2e2;  width:14px; height:14px; display:block; content:""; position:absolute;
left:0; top:0; border: 2px solid transparent; }

.cb input[type="checkbox"]:checked ~ label::before{background-color:var(--primary1);}

.cb > label::after{width: 4px; height: 8px; content: ""; position:absolute; top:2px; left:5px; border: solid #fff; border-width:0 3px 3px 0;
-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);  display: none; }
.cb input[type="checkbox"]:checked ~ label::after {display: block;}
/*css for custom checkbox inputs*/

/*css for radio buttons*/
.rb{position: relative;}
.rb label{padding-left:22px; cursor: pointer;}
.rb input[type="radio"]{ position: absolute; opacity: 0;}
.rb label::before{ position: absolute; top:1px; left: 0; width:14px; height:14px; content:""; background-color:rgba(255,255,255,0.2);
border-radius: 100%; display: block;}
.rb label::after{position: absolute; width: 8px; height: 8px; top:4px; left:3px; content: "";
border-radius:100%; display:none; background-color: var(--primary1);}

.rb input[type="radio"]:checked ~ label::before{background-color: #fff;}
.rb input[type="radio"]:checked ~ label::after{display: block;}
/*css for radio buttons*/


/*css for range*/

#wellness, #cWellness{-webkit-appearance: none;width: 100%;height: 4px;
background-color: rgba(255,255,255,0.5); outline:0 !important;}


#wellness, #cWellness:hover{background-color: #fff;}


#wellness::-webkit-slider-thumb, #cWellness::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:12px;
height:12px; background:#fff; cursor:pointer; border-radius: 100%;}
#wellness::-moz-range-thumb, #cWellness::-moz-range-thumb{width:12px; height:12px; background:#fff; cursor:pointer;
border-radius:100%;}



.form-element.cb{min-height: auto;}
/*css for range*/




/*Profile pic placeholder========================================================*/

.pp{display:flex; align-items:flex-end; justify-content:center; height:140px; margin-bottom: 30px; }
.pp-placeholder{width:120px; height:120px; position:relative;  border-radius: 100%;
background-color: #e2e2e2; display: flex;}
.pp-placeholder img{border-radius: 100%;}
.pp-placeholder div:first-child{ overflow: hidden; border-radius: 100%; width:100%; height:100%;}
.pp-placeholder img{margin:auto}
.pp-upload{position: absolute; background-image: url('../images/upload_dp.png'); width: 40px; height: 40px;bottom: -5px;
right:-5px;border-radius: 100%; box-shadow: 0 3px 8px rgba(47,143,193,0.4)}
.pp-upload input[type='file']{opacity: 0; cursor: pointer; position: absolute; top:0; right: 0; bottom: 0; left: 0;}
/*Profile pic placeholder========================================================*/


.pat-name, .doc-info{text-align: center; margin: 10px 0 0;}
.pat-name h5{color: var(--primary1); margin-bottom: 15px;}
.block-title-opt a{color: var(--primary2); padding: 10px;}



.tile{margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between;}
.tile img{display: inline-block; width: 16px; height: 16px; vertical-align: top; margin-right: 12px;}
.tile div label{display: block;}
.tile div p{font-weight: 600;}


.btn-delete, .btn-submenu{width: 28px; height:28px; padding:10px;
background-color: transparent; background-image: url(../images/delete.png);
background-repeat: no-repeat; background-size: 20px; background-position: center; cursor: pointer; opacity: 0; visibility: hidden;
transition: ease-in-out 0.3s;}
.btn-submenu{background-image: url(../images/submenu.png);}
.tile .btn-submenu > img{background-size: 20px !important;}
.tile:hover .btn-delete, .tile:hover .btn-submenu{visibility: visible; opacity: 1;}
.tile-content{}


.flexi{display:flex; align-items:flex-start; justify-content:flex-start;}
.flexi.flexi-center{align-items:center; }


.hide-sub-menu{display: none;}

.tile-title{font-size: 14px;line-height: 1.6;letter-spacing: 0.03rem;}
.tile-icon{margin-top:3px;}

.input-disabled{cursor: not-allowed;}
.empty-table{min-height: 300px; display: flex; align-items: center; justify-content: center;}
.empty-table::after{content: "No data exists"; }


.timer{ min-width: 124px;}
.med-problem p{position: relative;  border-radius:20px; transition:ease-in-out 0.3s;
display:inline-block; margin: 4px 0; font-weight:400 !important;}



.btn-msg{background-image: url('../images/send-message.png'); background-repeat: no-repeat;
width: 39px; height: 39px; background-position: center;}




.page-head-action .form-search input[type="text"]{background-color: #fff; border: 1px solid #E2E2FF;}






/*Create post ====================================================*/

.edu{cursor: pointer; padding: 0;}
.edu:hover{box-shadow: 0 3px 6px rgba(0,0,0,0.1);}


.edu .block-title{margin: 0;}
.edu-content{height:280px; overflow: hidden;}
.edu-text{padding:20px;}
.edu-text h6{padding-bottom:20px;}

.edu-text p{display: -webkit-box;max-height: 300px;-webkit-box-orient: vertical;overflow: hidden; text-overflow: ellipsis;
white-space: normal;-webkit-line-clamp: 9;}

.edu-img{display: flex; align-items: flex-start; justify-content: center; background-color: #e2e2e2;}
.created-by{padding: 20px; border-top: 1px solid #e2e2e2; display: flex; align-items: center;
justify-content: space-between;}
video{display: block;}
.edu-content > video{background-color:#000; width: 100%; height: 100%;}
/*Create post ====================================================*/


/*Overlay=========================================================*/
.overlay{position: absolute; top:0; right:0; bottom: 0; left:0; content: "";
background-color: rgba(0,0,0,0.7); height: 100vh; z-index: 10003; display: flex; align-items: center; justify-content: center;}


.overlay-cntr{width: 80%; max-height: 80vh;  position: relative;}
.overlay-cntr.small{width: 700px;}
.close-pup{z-index: 100000; border-radius: 8px; width:28px; height:28px; background-color: #fff; content: ""; display: block;
position:absolute; top:-28px; right: -28px;}
.close-pup:before, .close-pup:after{width: 3px; height:16px; content: ""; background-color: #000; position: absolute;
left:50%; top:50%;}
.close-pup:before{transform:translate(-50%,-50%) rotate(45deg);}
.close-pup:after{transform:translate(-50%,-50%) rotate(-45deg);}

.overlay-cnt{display: flex; flex-flow: row wrap;}

.post-prw{width: 30%;}
.post-prw .block-title{margin-bottom: 0;}
.post-prw .edu-content{height: calc(80vh - 100px); overflow: auto; margin:0px -20px 0;}
.post-prw .edu-text p{display: -webkit-box; max-height: 100vh;-webkit-box-orient: vertical;overflow: hidden; text-overflow: ellipsis;
white-space: normal;-webkit-line-clamp: initial;}



.share-to{width: 70%; position: relative;}
.share-to .btn-filter{background-image: url(../images/filters.png); background-repeat: no-repeat;width: 39px;
height: 39px;background-position: center; background-color: transparent;cursor: pointer; background-color: #fff;
box-shadow: none; margin: -20px 0; transition: ease-in-out 0.3s; border: 1px solid transparent;}
.share-to .btn-filter:hover{border: 1px solid #e2e2e2;}

.share-div{display: flex; align-items:initial; margin: -20px; position: relative;}
.share-div div{}

.share-to-filters{width: 260px;padding: 20px; background-color: #f5f5f5; /*position: absolute;*/}
.share-to-filters input[type=search], .share-to-filters select{border: 1px solid #e2e2e2; background-color: #fff;}

.share-div .table-pat-info{cursor: pointer; padding:12px 0;}

.sec-head{padding-bottom: 20px;}

.all-pats, .selected-pats {
	padding: 20px;
	height: calc(80vh - 60px);
	overflow: auto;
	width: 100%;
}

.all-pats .form-element, .selected-pats .form-element {
	margin: 10px 0;
}

.all-pats>ul li {
    width: 241px;
    float: left;
    padding: 5px;
}

.send-post {
	width: 60px;
	height: 60px;
	content: "";
	display: block;
	position: absolute;
	right: 30px;
	bottom: 40px;
	border-radius: 100%;
	background-image: url(../images/send_post.png);
	background-size: 60px;
	background-position: center;
	box-shadow: 0 5px 10px rgba(255, 87, 87, 0.4);
}

.visi{visibility:visible; opacity: 1;pointer-events: auto;}




/*Overlay=========================================================*/


/*Alerts and status===============================================*/
.status{width: 300px; padding: 30px; position: fixed; right: 50px; bottom: 50px; border-radius: 14px; z-index: 10000;
/* opacity: 0; visibility: hidden; */}
.status.pos{background-color: var(--posact); box-shadow: var(--posshadow);}
.status.neg{background-color: var(--negact); box-shadow: var(--negshadow);}
.timer-status{width: 300px; padding:20px; background-color: var(--posact);
box-shadow: ;}

.show{opacity: 1; visibility:visible;}
/*Alerts and status===============================================*/




/**/
.select-table{border-bottom: 2px solid var(--primary1); padding-left: 20px;}
.select-table li{display: inline-block; }
.select-table li button{ padding: 10px 14px; font-size: 15px; font-weight: bold; cursor: pointer;}
.select-table li button.active{background-color: var(--primary1); color:#fff;}


.med-problem-list tr{display: table;table-layout: fixed; width: 100%;}
.med-problem-list tr td:first-child{font-weight: 600;}
.med-problem-list tr th:first-child, .med-problem-list tr td:first-child{width: 320px;}
.med-problem-list tr th:not:first-child, .med-problem-list tr td:not:first-child{display: table-cell;}

.value-range{display: flex; justify-content: space-between;}
.value-range input{width: 47%;}


.action-msg{position: fixed; bottom:50px; right: 50px; background-color: #fff; padding: 20px; border-radius: 8px; z-index: 1001;
font-size: 18px; color: #fff; }
.action-msg p{display:block; vertical-align: middle; margin:auto;}
.action-msg span{font-size: 20px;}
.action-msg span i{font-size: 24px; margin-right: 6px;}
.action-msg.action-success{background-color: #17BE65;}
.action-msg.action-failed{background-color: #F03A47;}

.action-loader{position: fixed; bottom:50px; right: 50px; background-color: rgb(0, 0, 0, 0.5); padding: 20px; border-radius: 8px; z-index: 1001;
font-size: 18px; color: #fff; }
.action-loader p{display:block; vertical-align: middle; margin:auto;}
.action-loader span{font-size: 20px;}
.action-loader span i{font-size: 24px; margin-right: 6px;}





/*CSS for adding parameters medical values=============================================
.parameter-range-wrapper{background-color: #e2e2e2; height: 20px; width: 100%; border-radius: 20px; margin: 30px 0;
position: relative; content: ""; overflow: hidden;}
.para-range{height: 20px; position: absolute; top:0;}

#range-red-left, #range-red-right{background-color: red;}
#range-orange-left, #range-orange-right{background-color: orange;}
#range-yellow-left,#range-yellow-right{background-color: yellow;}
#range-green{background-color: green;}


:root{--pos-left: 0; --ini-width: 167px;}
#range-red-left{width: 100px; left: 0;}
#range-yellow-left{width: 100px; left: var(--pos-left) + var(--ini-width);}
#range-green{width: 100px; left:41.5%;}
#range-yellow-right{width:100px; left:66.5%;}
/*#range-orange-right{width: 20%; left:;}
#range-red-right{width: 100px; left:78.5%;}
CSS for adding parameters medical values=============================================*/
.span-style{
height: 20px;
width: 1px;
display: block;
}

.graph span.systolic{ height:24px;}
.graph span.systolic:hover{ height:22px;}
.graph span.diaslotic{ height:24px;}
.graph span.diaslotic:hover{ height:22px;}



.graph-wrapper{display:flex;}
.graph-wrapper .graph{margin: 0 10px;}
.day-readings{display: flex; align-items: center;width: 100%}
.day-readings span{display: block;}
.graph span{border:1px solid transparent;}
.graph span:hover{border: 1px solid #fff;}


#facebox_overlay{z-index: 100000 !important;}
#facebox{z-index: 1000000 !important; width: 800px !important;}
#facebox .stats-wrapper{height: 80vh !important;}
#facebox .body{padding:0 !important;}
#facebox .content .block{margin-bottom: 0;}
#facebox .close{z-index: 100000;width: 28px;height: 28px;background-color:
#fff;content: "";display: block;position: absolute;top: -28px;right: -28px; border-radius: 15px;}

.add-element{margin: 20px 0;}
.button-add{ display: block; background-color: #eee; color: #000; font-size: 15px;
padding: 10px 16px;  margin: auto; border: 1px solid transparent;}
.button-add:hover{ display: block; background-color: #eee; color: #000; font-size: 15px;
padding: 10px 16px;  margin: auto; border: 1px solid #ddd;}
.note{}
.note-head{margin-bottom: 10px;}
.note-body p{font-size: 14px; font-weight: 300;}

.ui-autocomplete{
z-index: 9999999 !important;
}



.tile .table-menu img{margin-right:0; width: 20px; height: 20px;}




/*CSS for pills===================================================================*/
.pills{display: inline-block; position: relative; background-color: #e9e9e9;
padding: 6px 28px 6px 18px; border-radius: 20px;margin: 10px 10px 10px 0;}
.pills p{padding-right: 8px;}
.remove-pills{z-index: 100000; width:16px; height:16px; content: ""; display: block;
position:absolute; top:13px; right: 10px; cursor: pointer;}
/*CSS for pills===================================================================*/


/*CSS for table titles==============================================*/
.tracking-title{display:table; table-layout: fixed; width:100%;
margin-top: 14px; border-top: 1px solid #000;}
.tracking-title span{display: table-cell; padding:15px 0 0;}
/*CSS for table titles==============================================*/


/*CSS for alerts count==========================================================*/
.safe{color: green !important;}
.warning{color: yellow !important;}
.danger{color: red !important;}
/*CSS for alerts count==========================================================*/

a{color: var(--primary1);}

.graph span.bp-wrap-33{width:calc(100% / 3);}
.graph span.bp-wrap-33 span{width:100%;}


.param-update-log .block-table{
	height: 200px;
	overflow: auto;
}

#facebox .param-update-log th {
	padding: 10px 15px;
}

#facebox .param-update-log td {
	padding: 8px 15px !important;
}

.note{width:100%;}

.note-info {
	margin: 10px 0;
}
.note-info span b{display:block;}

.note-info title {
	display: inline-block;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.6;
}

.note-desc p, .note-comment p {
	font-weight: 300 !important;
}

.ui-tooltip {
    white-space: pre-line;
}

.page-head-action{position: relative; z-index: 2;}


.days-wrapper{position: relative; background-color: #fff;}
.day-parent{padding: 10px 20px; display:flex; align-items: center;
justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.1);}
.day-parent p{padding-right:20px; font-size: 15px; font-weight: 600;}
.arrow-down{border:solid #000; border-width: 0 2px 2px 0; content: ""; display: block;
padding: 2px; transform: rotate(45deg); height: 3px; width: 3px;}





.days-wrapper .days{position: absolute; top:100%; left:0; opacity: 0;
visibility: hidden; width: 100%; background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);}
.days-wrapper .days .form-element{padding: 10px 20px; margin: 0;}
.days-wrapper .days .cb{display:flex; align-items: center; justify-content: flex-start;}

.days-wrapper .days .cb > label::before{top:8px; left:16px;}
.days-wrapper .days .cb > label::after{top:10px; left:22px;}
.days-wrapper:hover .days{opacity: 1; visibility: visible;}



#patient-list{margin-top:40px;}
#patient-list .block.share-to{border-radius: 0; width:100%;}
#patient-list .cb > label{padding-left: 30px;}


.select-time{position: relative;}
.time{position:absolute; top:100%; width:100%; background-color: #fff;
opacity:0; visibility: hidden;}

.select-time:hover .time{opacity: 1; visibility: visible; }
/*********************************************************************/
/*css for custom checkbox inputs (green-tick)*/
.form-element.cbx {
	min-height: auto;
	display: inline;
}

.cbx {
	position: relative;
}

.cbx>input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}

.cbx>label {
	padding-left: 24px;
	display: inline-block;
	cursor: pointer;
}

.cbx.green-tick>label::before {
	background-color: #fff;
	width: 14px;
	height: 14px;
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	border: 2px solid #00D11C;
}

.cbx.green-tick input[type="checkbox"]:checked ~ label::before {
	background-color: #fff;
}

.cbx.green-tick>label::after {
	width: 4px;
	height: 8px;
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	border: solid #00D11C;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: none;
}

.cbx.green-tick input[type="checkbox"]:checked ~ label::after {
	display: block;
}
/*css for custom checkbox inputs*/

/*css for custom checkbox inputs (green-tick)*/
.cbx {
	position: relative;
}

.cbx>input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}

.cbx>label {
	padding-left: 24px;
	display: inline-block;
	cursor: pointer;
}

.cbx.red-tick>label::before {
	background-color: #fff;
	width: 14px;
	height: 14px;
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	border: 2px solid red;
}

.cbx.red-tick input[type="checkbox"]:checked ~ label::before {
	background-color: #fff;
}

.cbx.red-tick>label::after {
	width: 4px;
	height: 8px;
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	border: solid red;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: none;
}

.cbx.red-tick input[type="checkbox"]:checked ~ label::after {
	display: block;
}
/*css for custom checkbox inputs*/

/*********************************************************************/
.selected-row td, table tr.selected-row:nth-child(even) td {
	background-color: #ddd;
	border-bottom: 1px solid #fff;
}
.chat-notification{
	position:relative;
}
.chat-notification span {
	position: absolute;
	top: -8px;
	right: -8px;
    padding: 0px 10px;
	background-color:#2F8FC1;
	color: white;
	text-align: center;
	border-radius: 100%;
}

.pb-wrapper {
	width: 200px;
	height: 70px;
	background-color: #e9e9e9;
	display: flex;
	flex-flow: column;
	overflow: hidden;
}

.pb-wrapper .steps {
	text-align: center;
	position: relative;
}

.pb-wrapper .steps::after {
	background-color: #ddd;
	content: "";
	width: 100%;
	height: 1.2px;
	display: block;
	position: absolute;
	bottom: 0;
}

.steps .progress {
	height: 23px;
	font-size: 14px;
	line-height: 22.5px;
}

.steps .target {
	background-color: #000;
	width: 2px;
	height: 21.5px;
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
}

.steps-daily .target {
	left: 98%;
}

.steps-tracker {
	display: flex;
	align-items: center;
}

.steps-tracker>div {
	width: 70%;
	display: flex;
	align-items: center;
}

.steps-title {
	width: 30%;
}

.steps-title li {
	height: 23px;
	font-size: 12px;
	padding: 4px 6px;
}

.exercise-prescription-form-input {
    cursor: not-allowed;
}

.icon.icon-huge {
	width: 100px;
	height: 100px;
	border-radius: 16px;
	overflow: hidden;
}

.meal-img {
	position: relative;
	cursor: pointer;
}

.meal-img span {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 3px 8px;
	background-color: var(--tertiary);
	border-radius: 16px 0 16px 0;
	color: #fff;
}

.hsl-parent {
	background-color: #eee;
	height: 10px;
	border-radius: 8px;
	width: 150px;
	content: "";
	margin: 10px 0;
}

.hsl-reading {
	background-color: var(--primary1);
	height: 10px;
	border-radius: 8px;
	content: "";
	display: block;
}

.user-cmt, .admin-cmt {
	width: 400px;
	white-space: normal;
	background-color: #f3f3f3;
    word-break: break-word;
    padding: 10px;
}

.rate-meal {
	cursor: pointer;
	font-size: 25px;
}

.rate-meal li {
	display: inline-block;
}

.meal-switch {
	display: flex;
	margin: auto;
}

.meal-switch-weekly {
	display: flex;
	margin-left: auto;
}

.meal-switch figure, .meal-switch-weekly figure {
	cursor: pointer;
	margin: 0 5px;
	display: block;
}

.meal-date {
	font-weight: bold;
	margin-right: 20px;
}

.meal-date>input {
	cursor: pointer;
}

/* .slide-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1000px;
	height: 700px;
} */

.slides {
	width: 100%;
	height: 550px;
	background-color: #000;
}

.slides::after {
	clear: both;
	display: block;
	float: none;
}

.meal-images {
	height: 550px;
	display: block;
}

.meal-images img {
	max-width: 100%;
	display: block;
	margin: auto;
}

.listed-images {
	display: flex;
	height: 150px;
	list-style-type: none;
	padding: 0;
}

.listed-images li {
	flex-grow: 1;
	flex-basis: 0;
	background-color: #000;
	text-align: center;
}

.listed-images img {
	opacity: 0.5;
	transition: ease-in-out 0.4s;
}

.listed-images img.active, .listed-images li img:hover {
	opacity: 1;
}

.arrow {
	width: 60px;
	height: 60px;
	background-color: rgba(255, 255, 255, 0.1);
	position: absolute;
	top: 275px;
	border-radius: 100%;
	transition: ease-in-out 0.4s;
}

.arrow:hover {
	background-color: rgba(255, 255, 255, 0.2)
}

.left {
	left: 10px;
}

.right {
	right: 10px;
}

.left::after {
	border: solid #fff;
	border-width: 0 0 3px 3px;
	padding: 4px;
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.right::after {
	border: solid #fff;
	border-width: 3px 3px 0 0;
	padding: 4px;
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.question-icon-td{
	text-align: center;
    display: flex;
    align-items: center;
    width: 160px;
    justify-content: center;
}