@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Exo';
    src: url('../fonts/Exo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Exo';
    src: url('../fonts/Exo-SemiBold.ttf') format('truetype');
    font-weight: bold;
    font-style: bold;
}
body, h1, h2, h3, h4, h5, h6 {
	font-family: 'Exo', sans-serif;
}
body{
	background: #DEDEDE;
}

/*Overrides*/
.btn-primary{
	background:  #4d91ce!important;
}.btn-primary:hover{
	background: #29588E!important;
}
.page-item.active .page-link {
    background-color: #4d91ce!important;
    border-color: #4d91ce!important;
}

a:hover{
	text-decoration: none;
}


.modal.rpm-form .modal-header{
	background: #29588E;
	color: white;
}
.modal.rpm-form .modal-body{
/*	background: #F5F9FC;*/
}

/*Sidebar*/
.sidebar {
	height: 100%;
	width: 200px;
	padding: 10px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	background: #fff;
	overflow-x: hidden;
	transition: 0.5s;
	box-shadow: 2px 2px 20px rgba(0,0,0,0.2);
}
.sidebar a {
	display: block;
	text-decoration: none;
	color: #333
}
.sidebar .nav a {
	width: 100%;
	font-size: 14px;
	padding: 10px 12px;
	vertical-align: text-center;
	color: #777;
}
.sidebar .nav a.active {
	background-color: #f2faff;
	color: #4E91CE;
}
.sidebar .nav a:hover {
/*	color:#4E91CE;*/
	background-color: #f2faff;
}
.sidebar .feather, .nav img{
	width: 18px;
	height: 18px;
	vertical-align: text-bottom;
	margin-right: 8px;
}
.profile {
	text-align: center;
}
.profile img {
	width: 50%;
    height: auto;
    padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
	border-radius: 50%;
}
.profile #name {
	margin-top: 0.4rem;
	font-size: 1rem;
}
.profile #job-title {
	font-size: 0.8rem;
	line-height: 1;
}
.logo {
	text-align: center;
}
.logo img {
	width: 80%;
}
.page-body {
	width: auto;
	height: 100vh;
	margin-left: 200px;
	transition: 0.5s;
}
#minimize {
	float: left;
	padding: 0.5em 0.8em;
	font-size: 16px;
	color: #000;
	background: #fff;
	display: none;
	cursor: pointer
}
#close {
	text-align: right;
	font-size: 30px;
	color: #777;
	padding-right: 10px;
	display: none;
	margin-top: -10px;
	margin-right: -10px;
}
#close:hover {
	color: #4E91CE;
}
.sidebar hr{
	width:100%;
	opacity: 0.6;
	margin: 0.5rem 0;
}
@media (max-width: 576px){	
	.sidebar .nav a:not(.active):hover {
		color:#4E91CE;
		background-color: #fff;
	}
}


/*****************
*******SALLY******
******************/
.drag-frame{
	position:fixed;
	z-index:4;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	margin:10px;
	visibility:hidden;
}
#sally{
	display: flex;
	position:fixed;
	top:10px;
	right:10px;
	touch-action: none;
	user-select: none;
	visibility:visible;
}
.sally-img{
	border:4px solid #4E91CE;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
#sally-alerts {
	position: relative;
}
#sally-alerts a{
	font-weight: 600;
	color: #0388fc; 
	text-decoration: none;
}
#sally-alerts a:hover{ 
	text-decoration: underline; 
}
#sally-alerts .alert{
	font-size: 14px;
	width: 250px;
	background-color: white;
	padding: 5px 15px;
	border:2px solid #4E91CE; 
	border-radius: 10px;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); 
	opacity: 1;
	transition: opacity 0.5s;
	margin:0;
	animation: scale 0.4s;
}	
@keyframes scale{
	from{transform: scale(.5)}
	to{transform: scale(1)}	
}
#sally-alerts hr{
	margin:0.2rem 0;
}
	
.closebtn {
  margin-left: 10px;
  margin-right: -10px;
  font-weight: bold;
  float: right;
  font-size: 22px;
  color: #aaa;
  line-height: 0.5;
  cursor: pointer;
  transition: 0.3s;
}.closebtn:hover {
  color: black;
}

@media (max-width:576px) {
	.sally-img{
		width: 100px;
		height: 100px;
	}
	#sally-alerts .alert{
		width: 200px;
		font-size: 12px;
		padding: 5px 10px;
	}
	.closebtn{
		margin-right: -5px;
		font-size: 18px;
	}
}


/*Loader */
.loading{
	position:fixed;
	width:100%;
	height:100%;
	background: linear-gradient(to right, #29588E, #011435);
	z-index:100;
	display: none;
	opacity: 0.8;
}	
.loader{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	opacity: 1;
}
.load-text{
	width:100%;
	text-align:center;
	color:#fff;
	font-size:1.5rem;
	display:block;
}

.lds-heart {
	display: inline-block;
	width: 80px;
	height: 80px;
	transform: rotate(45deg);
	transform-origin: 40px 40px;
}
.lds-heart div {
	top: 32px;
	left: 32px;
	position: absolute;
	width: 32px;
	height: 32px;
	background: #fff;
	animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lds-heart div:after,
.lds-heart div:before {
	content: " ";
	position: absolute;
	display: block;
	width: 32px;
	height: 32px;
	background: #fff;
}
.lds-heart div:before {
	left: -24px;
	border-radius: 50% 0 0 50%;
}
.lds-heart div:after {
	top: -24px;
	border-radius: 50% 50% 0 0;
}
@keyframes lds-heart {
	0% {
	transform: scale(0.95);
	opacity:0.9;
	}
	5% {
	transform: scale(1.1);
	opacity:1;
	}
	39% {
	transform: scale(0.85);
	opacity:0.7;
	}
	45% {
	transform: scale(1);
	opacity:1;
	}
	60% {
	transform: scale(0.95);
	}
	100% {
	transform: scale(0.9);
	opacity:0.8;
	}
}


/*	PAGE STYLES*/
.header {
	min-height: 380px;
	background: linear-gradient(to right, #29588E, #011435);
	padding: 16px 2rem;
	width: 100%;
/*	display: table;*/
}
.search{
	border-radius: 20px;
	width:60%;
	min-width: 85px;
	outline: 0;
	padding: 6px 20px;
	-webkit-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;
}
.search::placeholder {
font-size: 12px;
}
.search:focus {
width: 100%;
}
.title{
	color: white;
}
.menu .feather{
	color:white;
	width: 18px;
}

/*TABLES*/
	td{
	vertical-align: middle!important;
	/*white-space: nowrap;*/
	}
	.table-striped>tbody>tr:nth-child(odd), .table-striped>tbody>tr:nth-child(odd) {
	background-color: #edf6ff;
	}	
	thead{
/*	border-top:3px solid #4E91CE;*/
	}
	td a{
		color:black; display: block; padding: 1rem 0.75rem; margin: -0.75rem
	}
	td a:hover{
		text-decoration: none; color: #007bff; font-weight: bold;
	}
/*	td:last-child:before {
		content: "";
		width: 15px; height: 15px; float: left; margin-right: 8px; margin-top: 2px; border-radius: 50%;
	}*/
	td.active,td.inactive,td.processing,td.suspended{
		white-space: pre-wrap;
	}
	td.active:before,td.inactive:before,td.processing:before,td.suspended:before {
		content: "";
		width: 15px; height: 15px; float: left; margin-right: 8px; margin-top: 2px; border-radius: 50%;
	}
	td.active:before{background: #07bd86}
	td.inactive:before{background: #ffa040}
	td.processing:before{background: #007bff}
	td.suspended:before{background: #f00a0a}
	
	table.dataTable {
    border-collapse:collapse!important;
	}
	.table-responsive{
/*		border-top:3px solid #4E91CE;*/
		padding-top: 0.6em!important;
	}

	.viewrole th{
		text-align: right;
		padding-right: 1rem;
	}
	.viewrole td {
		padding: 1rem;
		white-space:normal;
	}
	.viewrole td span{
		border: 1px solid #4d91ce;
		padding: .2rem .5rem;
		font-size: 12px;
		font-weight: 600;
		margin: 5px;
		white-space: nowrap;
		color: #fff;
		background-color: #6AA2D4;
	}	

.rpm-panel{
	position:absolute; 
	left:0; 
	top:160px; 
/*	margin-top: -160px;*/
	width: 100%;
	padding: 0 2rem;
}

.panel-body{
	animation: fadeEffect 0.5s;
}@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.divider{
	border-bottom: 3px solid #4d91ce;
	margin-bottom: 1rem;
}

#tab-add{display: none;}
#tab-add input, #tab-add textarea{
	background-color: #F0F7FF;
}
#tab-add .custom-select{
	background-color: #F0F7FF;
}

#permissions [type=checkbox], #patient-tests [type=checkbox]{
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

#permissions [type=checkbox] + .item, #patient-tests [type=checkbox] + .item{
	display: block;
	color: #4d91ce;
	border: 1px solid #4d91ce;
	padding: .2rem .5rem;
	font-size: 12px;
	font-weight: 600;
	margin: 5px;
	cursor: pointer;
}
#permissions [type=checkbox]:hover + .item, #patient-tests [type=checkbox]:hover + .item{
	color: #fff;
	background-color: #4d91ce;
	border-color: #007bff;
}
#permissions [type=checkbox]:checked + .item, #patient-tests [type=checkbox]:checked + .item{
	color: #fff;
	background-color: #4d91ce;
	border-color: #007bff;
	box-shadow: none;
}

#patient-tests [type=checkbox] + .item{
	font-size: 16px;
	margin: 5px;
	margin-right:10px;
}



.db-loader {
  z-index: 1;
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.db-loader-small {
  z-index: 1;
  width: 60px;
  height: 60px;
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.nav > .db-menu.skeleton {
	height: 1rem;
	width: 70%;
	margin: 1rem;
	border-radius: 3px;
}
.skeleton {
	position: relative;
	background-color: #e2e2e2;
}
.skeleton.sw-50{
    width:50%;
}
.skeleton.sw-60{
    width:60%;
}
.skeleton.sw-70{
    width:70%;
}
.skeleton.sw-80{
    width:80%;
}
.skeleton.sw-90{
    width:90%;
}
.skeleton.sh-50{
    height:0.5rem;
}
.skeleton.sh-60{
    height:0.6rem;
}
.skeleton.sh-70{
    height:0.7rem;
}
.skeleton.sh-80{
    height:0.8rem;
}
.skeleton.sh-90{
    height:0.9rem;
}
.skeleton.sh-100{
    height:1rem;
}


/* The moving element */
.skeleton::after {
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translateX(-100%);
	background: -webkit-gradient(linear, left top,
				right top, from(transparent),
				color-stop(rgba(255, 255, 255, 0.2)),
				to(transparent));
				
	background: linear-gradient(90deg, transparent,
			rgba(255, 255, 255, 0.2), transparent);

	/* Adding animation */
	animation: skeleton 0.8s infinite;
}
/* Skeleton Loading Animation */
@keyframes skeleton {
	100% {
		transform: translateX(100%);
	}
}






@media (max-width:768px) {
	.sidebar {
		margin-left: -200px;
	}
	.sidebar.active {
		margin: 0;
	}
	.page-body {
		margin-left: 0;
	}
	#minimize, #close {
		display: block;
	}
	/*#sally{width:15%;}*/
}

@media (max-width:992px) {
	.header{
		padding: 16px 1rem;
	}
	.rpm-panel{
		padding: 0 1rem;
	}
}