@font-face {
  font-family: "fontcustom";
  src: url("fontcustom.ttf");
  font-weight: normal;
  font-style: normal;
}

body {	overflow-x: hidden; }
header { background: #333; color:white; }
header h1 { color:white; }
header .row p { margin:0.25rem 0; }
header ul.button-group { margin: 1rem 2px 0 0; }
header ul.button-group li { position: relative; }
header ul.button-group li .f-dropdown { min-width: 200px; }
header ul.button-group li .f-dropdown a { color: #666; background: #EEE; }
header ul.button-group li .f-dropdown a:not([href]) { cursor: text; }
header ul.button-group li .f-dropdown a:hover { color: black; background: white; }
header ul.button-group li .f-dropdown ul li a { border-top: 1px solid #DDD; text-align:left; }
header ul.button-group li .f-dropdown ul li a h2 { float: left; display: block; width: 20%;}
header ul.button-group li .f-dropdown small { font-size:75%; display:block; text-align:right; }
header ul.button-group li .f-dropdown ul { margin:0 ; padding:0; }
header strong.all_messages, header strong.all_alerts, header ul.button-group span { font-size: 1rem; vertical-align:middle; }
.button i { font-style: normal; }
.left-off-canvas-menu { position:fixed; }
.notmyself { display:none; }
section.bucket {
  min-height: 70%;
  margin-bottom: -1rem;
}
footer { padding: 0.5rem 0; }
footer p { font-size: 0.75rem; }

label { display:inline; }
select{padding:8px 4px; }

select option[value=''] { color: #a9a9a9 !important; opacity:0.75; }
::-webkit-input-placeholder { color: #a9a9a9 !important; opacity:0.75; }
:-moz-placeholder { color: #a9a9a9 !important;  opacity:0.75; }
::-moz-placeholder { color: #a9a9a9 !important; opacity:0.75; }
:-ms-input-placeholder { color: #a9a9a9 !important; opacity:0.75; }
input:-moz-placeholder { color: #a9a9a9 !important; opacity:0.75; }

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.icons input+i, .icons select+i, .icons textarea+i {
	position: absolute;
	right: 2rem;
	line-height: 1rem;
	top: 0.75rem;
}
i:before {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.icons label i { top: 2rem; }
blockquote { position:relative; padding-left:3rem; padding-right:3rem; font-size:1.25rem; }
blockquote:before { content: "\201C"; top:0; left:0.5rem; }
blockquote:after { content: "\201E"; bottom:0; right:0.5rem; }
blockquote:before, blockquote:after { font-size:6rem; line-height: 6rem; position:absolute; }
input:focus+i, input:focus, select:focus+i, select:focus { color: #008CBA; }
textarea, select[multiple] { min-height: 6.9rem; }
button i, a.button i {
font-size: 1.875rem;
  vertical-align: middle;
  margin: -2rem 0.25rem -2rem -0.25rem;
  display: inline-block;
}
td a.button i { margin: -1rem; }
label.toggle > input { display:none; }
label.toggle > input + span { 
	border:1px solid #fff; background:#ddd; display:block; text-align:center;
	height: 2.3125rem; white-space: nowrap; padding:0 0.5rem;
  	line-height: 2.3125rem; 
}
label.toggle > input[type=checkbox]:not(:checked) + span:before { content: "\2589"; float:left; color:white; margin:0 2px 0 -2px; }
label.toggle > input[type=checkbox]:checked + span:before { content: "\2589"; float:right; margin:0 -2px 0 2px; }
label.toggle > input[type=radio]:not(:checked) + span:before { content: "\25CF"; float:left; color:white; font-size: 2rem; line-height: 2rem; margin:0 2px 0 -2px; }
label.toggle > input[type=radio]:checked + span:before { content: "\25CF"; float:right; font-size: 2rem; line-height: 2rem;  margin:0 -2px 0 2px; }

/*label.toggle > input[type=checkbox] + span { margin: 0 2px 1px 2px; }*/
label.toggle > input:checked + span { background:#008CBA; color:white; }

.switch input + label { vertical-align: middle; margin-bottom:1.32rem; }
.switch.error input + label { margin-bottom: 0; }

ul.option-group li {
	margin-left: -1rem;
	list-style: none;
}
.option-group input {
	margin-bottom: 0;
}

.message .good, .message .busy { 
	display:none; 
  	padding: 0.375rem 0.5625rem 0.5625rem;
  	margin-top: -1px;
	margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: normal;
  font-style: italic;
  color: #FFFFFF}
.message.good .good { display:block; background: #73C53C; }
.message.busy .busy { display:block; background: #e8b10d; }

div button.postfix, div button.prefix { line-height:0; margin-bottom:0; }
div button.postfix { border-radius: 0px 2px 2px 0px; border-left: 0px; }
div button.prefix {border-radius: 2px 0px 0px 2px; border-right: 0px; }

div.dataTables_wrapper { clear: both; position: relative; }
div.dataTables_paginate { float: right; margin: 0; }
div.dataTables_info { float: left; margin: 0; }
div.dataTables_filter { position: absolute; right: 0.2rem; z-index: 2; top: -0.2rem; width: 33%; text-align:left; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; *cursor: hand; }
table.dataTable thead .sorting_asc:before { content: "\25b2"; }
table.dataTable thead .sorting_desc:before { content: "\25bc"; }
ul.dt-buttons.button-group { display:none; /*margin-bottom: 0; float: right; margin-right: 1rem; margin-top: 0;*/ }

/*ul.button-group.even-7 { margin-right: -28px; }
ul.button-group.even-6 { margin-right: -24px; }
ul.button-group.even-5 { margin-right: -20px; }
ul.button-group.even-4 { margin-right: -16px; }*/
ul.button-group { margin-right: -2px; margin-bottom: 1rem; font-size:0.875rem; }
ul.button-group.even-2 { margin-right: 0; }
ul.button-group .button { margin:0; }
ul.button-group li:first-child input[type=radio] + span { border-radius: 1rem 0 0 1rem; }
ul.button-group li:last-child input[type=radio] + span { border-radius: 0 1rem 1rem 0; }

nav { min-height:0.5rem; background: #777;}
nav .icon-bar { margin-bottom: -0.425rem; background: #777;}
nav .icon-bar>* { padding: 0; }
nav .icon-bar div.users { padding: 5px; font-size:0.75rem; width:100%; line-height: 1rem; }
nav .users { display:none; }
/*nav .icon-bar.hidden { display:none; }*/
nav > .users { text-align:center; font-size:1rem; padding:0.25rem; background: white; color:black; }

aside .userInfo { padding:2rem; line-height:1rem; }
aside .userInfo img { float:left; margin-left:-0.25rem; margin-right:0.5rem; width:3rem; }
aside .userInfo span { margin-top: 0.5rem; color:white; display:inline-block; text-transform:none; }

button, .button, .label {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
}
 
section button:hover, section .button:hover, form button:hover, form .button:hover, .label:hover {
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    z-index:1;
}
.no-inputlist input[list]{ display:none; }
.status { font-weight:bold; font-size:0.75rem; background: rgba(255,255,255,1); border-radius: 4px; line-height:1rem; display:inline-block;}
.status i { font-size:2rem; display:inherit; }
.status-red { color: #D61919 !important; }
.status-amber { color: #DF970A !important; }
.status-green { color: #73C53C !important; }

#activityPanel h1 strong { color: #333 !important; }

.panel { position: relative; }
.panel .accordion .accordion-navigation > .content.active { background-color: transparent; }
.panel .accordion-navigation:not(.active):last-of-type { margin-bottom: 1.25rem !important; }

.tabs, .tabs-content { border: 1px solid #e1e1e1; }
.tabs { border-bottom:0; background: #e1e1e1; }
.tabs-content { border-top:0; clear:both; }
.tabs-content .content { padding: 1rem; }
.tabs-content .extra { padding: 1rem; outline:none; padding-bottom:0; background:white; }
.tabs-content .active { background:white; }
.tabs .tab-title a { font-size: 0.75rem; padding: 1rem 1.5rem; background:none; }
.tabs .tab-title a:hover { background:rgba(255,255,255,0.5); }
.tabs .tab-title.active a:hover { background:white; }
.tabs > div { float:right; }
.tabs > div button { float:right; margin: 0.4rem 0.4rem 0.4rem 0; }

table.flip-scroll { clear:both; }
table { border-collapse: separate; border-spacing: 0px; }
table caption {
	background: #DDDDDD;;
    padding: 1.25rem 1rem 0.5rem 4.5rem;
    position: relative;
    border-radius: 1.5rem 0 0 0;
	color:#4d4d4d;
	text-align:left;
	height:3.75rem;
}
table caption span {
	position:absolute;
	font-size:3.5rem;
	color:white;
    left: 0rem;
    top: 0rem;
    z-index: 0;
    /* display: block; */
    line-height: 1;
    width: 4.5rem;
    text-align: left;
    border-radius: 2rem;
    padding-left:0.75rem;
}
table tr:nth-of-type(even) {
    background-color: #EFEFEF;
}
img.photo {
	border-radius:50%;
	width:100%;
}

.client-item a.th { background-size:cover; min-height:6rem; position:relative; display:block; border-width: 20px; }
.client-item a.th .back { overflow:hidden; border-radius: 50%; border: 5px solid #E1E1E1; }
.client-item a.th .back img:not(.photo) { width:100%; }
.client-item a.th .front { top:0; position:absolute; height:100%; width:100%; background:rgba(255,255,255,0.5); padding:40% 5px 0; text-align:center; }
.client-item a.th .front:hover, .client-item a.th .front:focus, .client-item a.th .front:active { background:rgba(255,255,255,0); }
.client-item a.th .front div.status { position:absolute; top:-6px; right:-6px; text-align: center; border-radius:0px 0px 0px 10px; padding:0.25rem 0.5rem; }
.client-item a.th .front p { text-shadow: 0px 0px 0.1rem white; line-height: 1.2; }
.client-item a.th .front p span { font-size: 90%; }
.client-item a.th .front:hover p, .client-item a.th .front:focus p, .client-item a.th .front:active p { text-shadow: 0px 0px 0.1rem black; color:white; }
.client-item a.th .front div.action { opacity:0; }
.client-item a.th .front:hover div.action, .client-item a.th .front:focus div.action, .client-item a.th .front:active div.action { opacity:1; }

div.client-item { padding: 0.5rem 0.25rem; text-align:center; margin: 0.25rem; min-height:14rem; }
div.client-item .labels { line-height:1; position: relative; padding-bottom: 1rem; margin-top: -1rem; }
/*dd.client-item:hover .labels, dd.client-item:focus .labels { opacity: 1; }*/
div.client-item.readonly {
	background-color:rgb(225, 225, 225);
	position:relative;
	opacity:0.65;
}
div.client-item.readonly:after,div.client-item.current:after {
	background-color:rgba(255,255,255,0.5);
	position:absolute;
	bottom:1px;
	left:1px;
	right:1px;
	color: rgba(64, 64, 61, 0.75);
	font-size:0.75rem;
    text-transform:uppercase;
}

div.client-item.current {
	background-color:rgb(201,201,201);
	position:relative;
}
.devices-list div.client-item.readonly:after {
	content:"View Only";
}
.devices-list div.client-item.current:after {
	content:"Current Wearer";
}
.wearers-list div.client-item.current:after {
	content:"Current Device";
}
.client-item img.photo {
	border-radius:50%;
	width:75%;
}
.client-item img+img.photo {
	position: absolute; bottom: -4px; right: -4px; border-radius: 50% 50% 0 50%; width:40%; pointer-events:none;
}
table.client-item a.th.current:after {
    content: "Selected";
    position: absolute;
    bottom: -4px;
    height:1.5rem;
    border: 4px solid #E8B10D;
    padding: 0.5rem 0.25rem;
    background-color: rgba(255, 255, 13, 0.75);
    color: rgba(64, 64, 61, 0.88);
    font-size:0.75rem;
    text-transform:uppercase;
}
table.client-item td a.th.current .back {
    border-color: #E8B10D;
}
table.client-item tbody tr { float: left; width:100%; max-width: 20%; min-width: 104px; background:transparent; padding: 10px; }
.tabs-content table.client-item tbody tr { padding: 3px; }
.multi-device table.client-item tr, .multi-wearer table.client-item tr {  max-width: 16.66%; min-width: 158px; }
body div table.client-item tr:hover { background:transparent; }
table.client-item td { padding:0; background:white; }
table.client-item td:not(:first-of-type) { display:none; }
table.client-item { border:0; }
table.client-item th { display:none; }
.multi-item div.dataTables_info, .multi-item div.dataTables_paginate, .client-item caption  { margin:0 1rem;}
#homePanel div.dataTables_filter { margin-top: -3.5rem; right: 0; left: auto; max-width: 50%; }
#homePanel div.dataTables_wrapper { margin: 0 -1rem; }
table.client-item caption span { padding-left:0;}

.guillotine #controls {   font-size: 1.5rem;
 background-color: rgb(60, 60, 58);
  text-align: center;
  margin-right: 0; }
.guillotine div { 
	font-size:1rem; color:white; padding:0.25rem; background-color: rgb(60, 60, 58);
	padding-bottom:0;text-align: center;
}
.guillotine img {
	background:#e7e7e7;
}
.mirror{
  -moz-transform: scaleX(-1);    /* Gecko */
  -o-transform: scaleX(-1);      /* Operah */
  -webkit-transform: scaleX(-1); /* webkit */
  transform: scaleX(-1);         /* standard */
  filter: FlipH;
  display:inline-block;
}

.template { display:none; }

div#map, div#viewmap, div#addmap, div#editmap { min-height:550px; width:100%; }
.marker-gsm { background:url(../img/gps-R-50.png); background-size: contain; }
.marker-gps { background:url(../img/gps-G-50.png); background-size: contain; }
.marker-wifi { background:url(../img/gps-B-50.png); background-size: contain; }
div#map .leaflet-draw-actions li a { color: white; }
div#map .range-slider { width: 10rem; padding:0; z-index:99; touch-action: auto !important; cursor:pointer; }

div#map .leaflet-popup-content { margin: 0.75rem; text-align: center; }
div#map .leaflet-popup-content h2 { margin:0; }

div.panel h6 { padding:0.75rem; font-size: 0.75rem; margin:0; }
div.panel h6.crumbs { display:none; background-color: rgb(225, 225, 225); }
div.panel .multi-item h6.crumbs { display:block; }
.multi-item { background-color: rgb(225, 225, 225);}
.reveal-modal span.close-reveal-modal { position:static; }

.ui-widget * { font-size:0.75rem; line-height:1rem; }

#message-list li { list-style:none; }

table.flip-scroll td { word-break: break-word; }

#devicePanel.readonly a.label, #devicePanel.readonly button:not(.readable),
#wearerPanel.readonly a.label, #wearerPanel.readonly button:not(.readable) 
 { display:none; }

.number-hide { display: none; }

input[type=checkbox].nomargin { margin: 0; }

@media only screen and (max-width: 800px) {
	label.toggle > input + span { font-size:0; }
	label.toggle > input + span::first-letter { font-size:initial; }
}

@media only screen and (max-width: 640px) {
/*
	.flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
	.flip-scroll * html .cf { zoom: 1; }
	.flip-scroll *:first-child+html .cf { zoom: 1; }
*/	
	input[type=text],input[type=date],input[type=time],input[type=number],input[type=search],
		input[type=password],select,textarea{ font-size:115%; }
	table.flip-scroll { width: 100%; border-collapse: collapse !important; border-spacing: 0 !important; clear:both; }
	table.flip-scroll th, table.flip-scroll td { margin: 0; vertical-align: top; padding: 0.1rem 1rem; min-height: 2rem; }
	table.flip-scroll th { text-align: left; }
	table.flip-scroll tbody { border: 1px solid #DDDDDD; border-left: 0; border-right: 0; border-bottom: 0; }
	table.flip-scroll, table.flip-scroll caption { display: block; position: relative; width: 100%; }
	table.flip-scroll thead { display: block; float: left; }
	table.flip-scroll tfoot { display: block; float: right; }
	table.flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
	table.flip-scroll thead tr, table.flip-scroll tfoot tr { display: block; }
	table.flip-scroll th { display: block; text-align: right; }
	table.flip-scroll tbody tr { display: inline-block; vertical-align: top; }
	table.flip-scroll td { display: block; text-align: left; }
 	table.flip-scroll td:nth-of-type(2n) { background-color: rgba(0, 0, 0, 0.05); }
 	table.flip-scroll th { border-bottom: 0; border-left: 0; width:100%; }
	table.flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
	table.flip-scroll tbody tr { border-left: 1px solid #babcbf; }
	table.flip-scroll th:last-child,
	table.flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
	table.flip-scroll td input, table.flip-scroll td select, table.flip-scroll td .switch input + label { margin: 0; padding: 2px 5px; height: 1.5rem; }
	table.flip-scroll td .switch label:after { height:1rem; }
	table.flip-scroll td ul { margin-bottom:0;}
	table.flip-scroll td label.toggle > input + span { line-height: 1.3125rem; height: 1.5rem; }
	div.dataTables_filter { width: auto; left:4.5rem; }
	header { position:fixed; z-index:1002; width:100%; }
	header .row.fake-tab-bar { /* background: #3C3C3A; */ height:2.5rem; line-height:2.5rem; position:relative; }
	header .row.fake-tab-bar h1 { margin: 0.25rem 0px 0.575rem 3.45rem; line-height: 2rem; }
	header .row.fake-tab-bar ul { margin:0.25rem; }
	header .row.fake-tab-bar .menu-icon { color: #FFFFFF; display: block; height: 2.65rem; padding: 0; position: relative; text-indent: 1.94444rem; transform: translate3d(0, 0, 0); width: 2.8125rem; }
	header .row.fake-tab-bar .menu-icon span::after { content: ""; display: block; height: 0; position: absolute; top: 50%; margin-top: -0.4rem; left: 0.9rem; box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF; width: 1rem; }
	header ul.button-group .button { padding: 0.65rem; min-height: 2.46rem; vertical-align: middle; }
	header ul.button-group i { margin-right: -2px; }
	header ul.button-group span { display:none; }
	header ul.button-group li .f-dropdown { margin-left: -165px; }
	section.bucket { padding-top: 2.25rem; }
	footer.foot { padding-bottom: 3.75rem; }
	nav .icon-bar { position:fixed; bottom:6px; z-index:10; width:100%; border-top:1px solid white; }
	nav .icon-bar label { font-size:0.75rem; }
	nav .icon-bar.label-right label { display:none; }
	nav .icon-bar div { padding: 5px; font-size:0.75rem; text-align:center; }
	nav .users { background: #CCC; display:block; color:black; }
	.client-item a.th { border-width: 6px; }
	.client-item a.th .status i { font-size: 1.5rem; }
	div.panel h6.crumbs { float:left; margin:0; padding:1.25rem 0 1.25rem 0.75rem; display:block; /*display:none; position: fixed; z-index: 10; width: 100%; left: 30px; padding: 0.25rem 1rem; top: 4.1rem; color:#B9B9B9;*/ }
	ul.button-group.small-even-7 li { width: 14.28571%; }
	.tabs > div { height: 2.69rem; margin-top:0.5rem; }
	.tabs > div button { margin:0 0.25rem 0.5rem 0; }
	.small-clearfix { clear:both; }
	.tabs .tab-title { clear:right; }
	.tabs .tab-title a { padding: 0.25rem 0.75rem; }
	.tabs-content table.client-item tbody tr { padding: 9px; }
	table.client-item div.client-item.current:after { height:1rem; overflow:hidden; }
	table.client-item a.th.current:after { content:'\2713';}
}

@media only screen and (max-height:600px) {
	div#map { min-height:356px; width:100%; }
}

.fi-fall-alert:before {
  font-family: "fontcustom";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.fi-fall-alert:before { content: "\f21b"; }
