/***table style***/
#printableTable {
	padding:2px;
}
#printableTable th {
	padding:2px;
}
#printableTable td {
	padding:2px;
}
.printableTable {
	padding:2px;
}
.printableTable th {
	padding:2px;
}
.printableTable td {
	padding:2px;
}
tr>th{
	text-align: center;
}

.bar-graph {
	padding: 0;
	width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
	height: 200px;
	margin: 0;
}

.bar-graph li {
	display: block;
	padding: 1.5625rem 0;
	position: relative;
	text-align: center;
	vertical-align: bottom;
	border-radius: 4px 4px 0 0;
	max-width: 10%;
	height: 100%;
	margin: 0 1.8% 0 0;
	-webkit-flex: 1 1 15%;
	-ms-flex: 1 1 15%;
	flex: 1 1 15%;
}

.bar-graph .bar{
	max-width: 5%;
}

.bar-graph .bar-graph-axis {
	-webkit-flex: 1 1 8%;
	-ms-flex: 1 1 8%;
	flex: 1 1 8%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.bar-graph .bar-graph-label {
	margin: 0;
	background-color: none;
	color: #8a8a8a;
	position: relative;
}

@media print, screen and (min-width: 40em) {
	.bar-graph .bar-graph-label:before, .bar-graph .bar-graph-label:after {
		content: "";
		position: absolute;
		border-bottom: 1px dashed #8a8a8a;
		top: 0;
		left: 0;
		height: 50%;
		width: 20%;
	}
}

@media print, screen and (min-width: 40em) and (min-width: 64em) {
	.bar-graph .bar-graph-label:before, .bar-graph .bar-graph-label:after {
		width: 30%;
	}
}

@media print, screen and (min-width: 40em) {
	.bar-graph .bar-graph-label:after {
		left: auto;
		right: 0;
	}
}

.bar-graph .percent {
	letter-spacing: -1px;
	opacity: 0.4;
	width: 100%;
	font-size: 1.875rem;
	position: absolute;
}

@media print, screen and (min-width: 40em) {
	.bar-graph .percent {
		font-size: 1.5rem;
	}
}

.bar-graph .percent span {
	font-size: 1.2rem;
}

.bar-graph .description {
	font-weight: 800;
	opacity: 0.5;
	text-transform: uppercase;
	width: 100%;
	font-size: 14px;
	bottom: 20px;
	position: absolute;
	font-size: 1rem;
	overflow: hidden;
}

.bar-graph .bar.primary {
	border: 1px solid #1779ba;
	background: linear-gradient(#2196e3, #1779ba 70%);
}

.bar-graph .bar.secondary {
	border: 1px solid #767676;
	background: linear-gradient(#909090, #767676 70%);
}

.bar-graph .bar.success {
	border: 1px solid #3adb76;
	background: linear-gradient(#65e394, #3adb76 70%);
}

.bar-graph .bar.warning {
	border: 1px solid #ffae00;
	background: linear-gradient(#ffbe33, #ffae00 70%);
}

.bar-graph .bar.alert {
	border: 1px solid #cc4b37;
	background: linear-gradient(#d67060, #cc4b37 70%);
}

@media print {
.page-footer{}
.page-header{}
#printableTable {
width:100%;
border:1px solid #F0F0F0;
border-collapse:collapse;
padding:1px;
}
#printableTable th {
border:1px solid silver;
padding:1px;
background:#F0F0F0;
}
#printableTable td {
border:1px solid silver;
padding:1px;
}
#printableTable thead {
display: table-header-group;
}
.page-break{
display: block;
page-break-after: always;
}
.dataTable
.header_color {
background:#F0F0F0;
}
}
.center{text-align:center;
}

#sm_modal{
    width: 500px;
    height: 100px;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: auto;
	background-color: whitesmoke;
	padding: 5px;
	position:fixed;top:40%;left : 30%;z-index:1050;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0;
	-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%);
	border: 1px solid rgb(200, 200, 200);
	box-shadow: rgba(0, 0, 0, 0.1) 50px 50px 50px 50px;
}

.footerhh { position: fixed; bottom: 0px;left: 0px }
#pageNumber:before { content: counter(page); }
#pageNumberz:after {
	counter-increment: page;
	content:"Page " counter(page) " out of " counter(pages);
	left: 0;
	top: 100%;
	white-space: nowrap;
	z-index: 20px;
	-moz-border-radius: 5px;
	-moz-box-shadow: 0px 0px 4px #222;
	background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
#loader{
	width: 200px;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: auto;
	position:fixed;top:30%;left : 30%;z-index:1050;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0;
	-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%);
}
[contenteditable=true]:empty:before{
	content: attr(placeholder);
	display: block; /* For Firefox */
	color: black;
	text-align:center;
}
[contenteditable=false]:empty:before{
	content: attr(placeholder);
	display: block; /* For Firefox */
	color: black;
	text-align:center;
}
th.rotate {
	/* Something you can count on
	/height: 140px;
	white-space: nowrap;*/
}

th.rotate > div {
	/*transform:
		 Magic Numbers
			translate(25px, 51px)
				 45 is really 360 - 45
			rotate(315deg);
	width: 30px;*/
}
th.rotate > div > span {
	/*border-bottom: 1px solid #ccc;
	padding: 5px 10px;*/
}
.qr-code-generator{
	width: 500px;
	margin: 0 auto;
}
.qr-code-generator * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#qrcode {
	width: 128px;
	height: 128px;
	margin: 0 auto;
	text-align: center;
}
#qrcode a {
	font-size: 0.8em;
}
.qr-url, .qr-size {
	padding: 0.5em;
	border: 1px solid #ddd;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.qr-url{
	width: 79%;
}
.qr-size{
	width: 20%;
}
.generate-qr-code {
	display: block;
	width: 100%;
	margin: 0.5em 0 0;
	padding: 0.25em;
	font-size: 1.2em;
	border: none;
	cursor: pointer;
	background-color: #e5554e;
	color: #fff;
}



/*Chat*/
.app {
	background: url("http://shurl.esy.es/y") no-repeat fixed center;
	background-size: cover;
}
.fa-2x {
	font-size: 1.5em;
}

.app {
	position: relative;
	overflow: hidden;
	top: 19px;
	height: 500px;
	width: 100%;
	margin: auto;
	padding: 0;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}

.app-one {
	background-color: #f7f7f7;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}

.side {
	padding: 0;
	margin: 0;
	height: 100%;
}
.side-one {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	position: relative;
	display: block;
	top: 0;
}

.side-two {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
	position: relative;
	top: -100%;
	left: -100%;
	-webkit-transition: left 0.3s ease;
	transition: left 0.3s ease;

}


.heading {
	padding: 10px 16px 10px 15px;
	margin: 0;
	height: 60px;
	width: 100%;
	background-color: #eee;
	z-index: 1000;
}

.heading-avatar {
	padding: 0;
	cursor: pointer;

}

.heading-avatar-icon img {
	border-radius: 50%;
	height: 40px;
	width: 40px;
}

.heading-name {
	padding: 0 !important;
	cursor: pointer;
}

.heading-name-meta {
	font-weight: 700;
	font-size: 100%;
	padding: 5px;
	padding-bottom: 0;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #000;
	display: block;
}
.heading-online {
	display: none;
	padding: 0 5px;
	font-size: 12px;
	color: #93918f;
}
.heading-compose {
	padding: 0;
}

.heading-compose i {
	text-align: center;
	padding: 5px;
	color: #93918f;
	cursor: pointer;
}

.heading-dot {
	padding: 0;
	margin-left: 10px;
}

.heading-dot i {
	text-align: right;
	padding: 5px;
	color: #93918f;
	cursor: pointer;
}

.searchBox {
	padding: 0 !important;
	margin: 0 !important;
	height: 60px;
	width: 100%;
}

.searchBox-inner {
	height: 100%;
	width: 100%;
	padding: 10px !important;
	background-color: #fbfbfb;
}


/*#searchBox-inner input {
  box-shadow: none;
}*/

.searchBox-inner input:focus {
	outline: none;
	border: none;
	box-shadow: none;
}

.sideBar {
	padding: 0 !important;
	margin: 0 !important;
	background-color: #fff;
	overflow-y: auto;
	border: 1px solid #f7f7f7;
	height: calc(100% - 120px);
}

.sideBar-body {
	position: relative;
	padding: 10px !important;
	border-bottom: 1px solid #f7f7f7;
	height: 72px;
	margin: 0 !important;
	cursor: pointer;
}

.sideBar-body:hover {
	background-color: #f2f2f2;
}

.sideBar-avatar {
	text-align: center;
	padding: 0 !important;
}

.avatar-icon img {
	border-radius: 50%;
	height: 49px;
	width: 49px;
}

.sideBar-main {
	padding: 0 !important;
}

.sideBar-main .row {
	padding: 0 !important;
	margin: 0 !important;
}

.sideBar-name {
	padding: 10px !important;
}

.name-meta {
	font-size: 100%;
	padding: 1% !important;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #000;
}

.sideBar-time {
	padding: 10px !important;
}

.time-meta {
	text-align: right;
	font-size: 12px;
	padding: 1% !important;
	color: rgba(0, 0, 0, .4);
	vertical-align: baseline;
}

/*New Message*/

.newMessage {
	padding: 0 !important;
	margin: 0 !important;
	height: 100%;
	position: relative;
	left: -100%;
}
.newMessage-heading {
	padding: 10px 16px 10px 15px !important;
	margin: 0 !important;
	height: 100px;
	width: 100%;
	background-color: #00bfa5;
	z-index: 1001;
}

.newMessage-main {
	padding: 10px 16px 0 15px !important;
	margin: 0 !important;
	height: 60px;
	margin-top: 30px !important;
	width: 100%;
	z-index: 1001;
	color: #fff;
}

.newMessage-title {
	font-size: 18px;
	font-weight: 700;
	padding: 10px 5px !important;
}
.newMessage-back {
	text-align: center;
	vertical-align: baseline;
	padding: 12px 5px !important;
	display: block;
	cursor: pointer;
}
.newMessage-back i {
	margin: auto !important;
}

.composeBox {
	padding: 0 !important;
	margin: 0 !important;
	height: 60px;
	width: 100%;
}

.composeBox-inner {
	height: 100%;
	width: 100%;
	padding: 10px !important;
	background-color: #fbfbfb;
}

.composeBox-inner input:focus {
	outline: none;
	border: none;
	box-shadow: none;
}

.compose-sideBar {
	padding: 0 !important;
	margin: 0 !important;
	background-color: #fff;
	overflow-y: auto;
	border: 1px solid #f7f7f7;
	height: calc(100% - 160px);
}

/*Conversation*/

.conversation {
	padding: 0 !important;
	margin: 0 !important;
	height: 100%;
	border-left: 1px solid rgba(0, 0, 0, .08);
	/*overflow-y: auto;*/
}

.message {
	padding: 0 !important;
	margin: 0 !important;
	background: url("w.jpg") no-repeat fixed center;
	background-size: cover;
	overflow-y: auto;
	border: 1px solid #f7f7f7;
	height: calc(100% - 120px);
}
.message-previous {
	margin : 0 !important;
	padding: 0 !important;
	height: auto;
	width: 100%;
}
.previous {
	font-size: 15px;
	text-align: center;
	padding: 10px !important;
	cursor: pointer;
}

.previous a {
	text-decoration: none;
	font-weight: 700;
}

.message-body {
	margin: 0 !important;
	padding: 0 !important;
	width: 71%;
	height: auto;
}

.message-main-receiver {
	/*padding: 10px 20px;*/
	max-width: 60%;
}

.message-main-sender {
	padding: 3px 20px !important;
	margin-left: 40% !important;
	max-width: 60%;
}

.message-text {
	margin: 0 !important;
	padding: 5px !important;
	word-wrap:break-word;
	font-weight: 200;
	font-size: 14px;
	padding-bottom: 0 !important;
}

.message-time {
	margin: 0 !important;
	margin-left: 50px !important;
	font-size: 12px;
	text-align: right;
	color: #9a9a9a;

}

.receiver {
	width: auto !important;
	padding: 4px 10px 7px !important;
	border-radius: 10px 10px 10px 0;
	background: #ffffff;
	font-size: 12px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	word-wrap: break-word;
	display: inline-block;
}

.sender {
	float: right;
	width: auto !important;
	background: #dcf8c6;
	border-radius: 10px 10px 0 10px;
	padding: 4px 10px 7px !important;
	font-size: 12px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	display: inline-block;
	word-wrap: break-word;
}


/*Reply*/

.reply {
	height: 60px;
	width: 100%;
	background-color: #f5f1ee;
	padding: 10px 5px 10px 5px !important;
	margin: 0 !important;
	z-index: 1000;
}

.reply-emojis {
	padding: 5px !important;
}

.reply-emojis i {
	text-align: center;
	padding: 5px 5px 5px 5px !important;
	color: #93918f;
	cursor: pointer;
}

.reply-recording {
	padding: 5px !important;
}

.reply-recording i {
	text-align: center;
	padding: 5px !important;
	color: #93918f;
	cursor: pointer;
}

.reply-send {
	padding: 5px !important;
}

.reply-send i {
	text-align: center;
	padding: 5px !important;
	color: #93918f;
	cursor: pointer;
}

.reply-main {
	padding: 2px 5px !important;
}

.reply-main textarea {
	width: 100%;
	resize: none;
	overflow: hidden;
	padding: 5px !important;
	outline: none;
	border: none;
	text-indent: 5px;
	box-shadow: none;
	height: 100%;
	font-size: 16px;
}

.reply-main textarea:focus {
	outline: none;
	border: none;
	text-indent: 5px;
	box-shadow: none;
}

@media screen and (max-width: 700px) {
	.app {
		top: 0;
		height: 100%;
	}
	.heading {
		height: 70px;
		background-color: #009688;
	}
	.fa-2x {
		font-size: 2.3em !important;
	}
	.heading-avatar {
		padding: 0 !important;
	}
	.heading-avatar-icon img {
		height: 50px;
		width: 50px;
	}
	.heading-compose {
		padding: 5px !important;
	}
	.heading-compose i {
		color: #fff;
		cursor: pointer;
	}
	.heading-dot {
		padding: 5px !important;
		margin-left: 10px !important;
	}
	.heading-dot i {
		color: #fff;
		cursor: pointer;
	}
	.sideBar {
		height: calc(100% - 130px);
	}
	.sideBar-body {
		height: 80px;
	}
	.sideBar-avatar {
		text-align: left;
		padding: 0 8px !important;
	}
	.avatar-icon img {
		height: 55px;
		width: 55px;
	}
	.sideBar-main {
		padding: 0 !important;
	}
	.sideBar-main .row {
		padding: 0 !important;
		margin: 0 !important;
	}
	.sideBar-name {
		padding: 10px 5px !important;
	}
	.name-meta {
		font-size: 16px;
		padding: 5% !important;
	}
	.sideBar-time {
		padding: 10px !important;
	}
	.time-meta {
		text-align: right;
		font-size: 14px;
		padding: 4% !important;
		color: rgba(0, 0, 0, .4);
		vertical-align: baseline;
	}
	/*Conversation*/
	.conversation {
		padding: 0 !important;
		margin: 0 !important;
		height: 100%;
		border-left: 1px solid rgba(0, 0, 0, .08);
		/*overflow-y: auto;*/
	}
	.message {
		height: calc(100% - 140px);
	}
	.reply {
		height: 70px;
	}
	.reply-emojis {
		padding: 5px 0 !important;
	}
	.reply-emojis i {
		padding: 5px 2px !important;
		font-size: 1.8em !important;
	}
	.reply-main {
		padding: 2px 8px !important;
	}
	.reply-main textarea {
		padding: 8px !important;
		font-size: 18px;
	}
	.reply-recording {
		padding: 5px 0 !important;
	}
	.reply-recording i {
		padding: 5px 0 !important;
		font-size: 1.8em !important;
	}
	.reply-send {
		padding: 5px 0 !important;
	}
	.reply-send i {
		padding: 5px 2px 5px 0 !important;
		font-size: 1.8em !important;
	}
	.message-body {
		width: 100%;
	}
}