/* Minification failed. Returning unminified contents.
(67,57): run-time error CSS1031: Expected selector, found ','
 */
body, html, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, ul, ol, li, form, input, textarea, label {position: relative; margin: 0; padding: 0; font-size: 100%; vertical-align: top;}
* {box-sizing: border-box}
html {height: 100%;}
body {font-family: arial; font-size: 13px; padding: 20px 10px 80px; color: #333; transition: transform .4s ease; -webkit-text-size-adjust: none; touch-action: manipulation; -webkit-touch-action: manipulation; min-height: 100%;}
body.home {padding: 10px 10px 80px;}
h1 {font-size: 20px; color: rgba(30,30,30,0.8); text-transform: uppercase; transition: .3s all ease;}
h2 {font-size: 18px; padding: 10px 0;}
h3 {font-size: 16px; padding: 10px 0;}
h4 {font-size: 14px; padding: 10px 0;}
img {border: none; max-width: 100%;}
hr {background: none; border: none; border-bottom: 1px solid rgba(0,0,0,0.06); outline: none; width: 90%; margin: 10px auto;}
a {text-decoration: none; outline: 0; color: #333; transition: .3s ease all;}
a:hover {text-shadow: #FFF 0 0 10px, #FFF 0 0 10px, #FFF 0 0 10px;}

table, #groupTable {position: relative; width: 100%; color: 333; border-collapse: collapse;}
table.year {border-collapse: separate;}
table td, table th {position: relative; padding: 6px 3px; vertical-align: middle; font-size: 14px; text-align: left; line-height: 16px;}
table th {background: rgba(0,0,0,0.7); color: #FFF;}
table th:first-child, table td:first-child {border-top-left-radius: 10px;}
table th:last-child, table td:last-child {border-top-right-radius: 10px;}
table th:first-child, table td:first-child {border-bottom-left-radius: 10px;}
table th:last-child, table td:last-child {border-bottom-right-radius: 10px;}
table tr:nth-child(even) td {background: rgba(0,0,0,0.07);}

.clear {clear: both;}
.centred {text-align: center; margin: auto;}
.inline {display: inline-block !important;}
.floatLeft {float: left;}
.floatRight {float: right;}
.pointer {cursor: pointer !important;}
.nowrap {white-space: nowrap;}
.block {display: block;}
.middle {vertical-align: middle;}
.lefty {text-align: left !important;}
.righty {text-align: right !important;}
.hidden {display: none !important;}
.fx {display: table; display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;}
.icon {width: 30px; height: 30px; vertical-align: middle; padding: 2px; margin-right: 4px;}
.titleImg {display: inline-block; vertical-align: middle; width: 26px; height: 26px; margin-right: 5px; opacity: 0.8;}
.message {
	background: rgba(0,0,0,0.6); position: fixed; padding: 5px 6px; font-size: 14px; color: #FFF; line-height: 16px; display: flex; align-items: center; justify-content: center;
	-webkit-animation: message 4s ease 1; animation: message 4s ease 1; z-index: 150; overflow: hidden; width: 100%; bottom: -300px; left: 0;
}
.message.success {background: rgba(20,150,0,0.6);}
.message.error {background: rgba(200,0,0,0.6);}
#message.home .message {-webkit-animation: messageHome 4s ease 1; animation: messageHome 4s ease 1;}
@-webkit-keyframes message {0%,85%{bottom: 0;}99%,100%{bottom: -300px;}}
@keyframes message {1%,85%{bottom: 0;}0%,99%,100%{bottom: -300px;}}
@-webkit-keyframes messageHome {0%,85%{bottom: 46px;}99%,100%{bottom: -300px;}}
@keyframes messageHome {1%,85%{bottom: 46px;}0%,99%,100%{bottom: -300px;}}
#preload {position: fixed; height: 40px; top: -100px; overflow: hidden;}
#preload img {width: 40px;}
.container {max-height: calc(100% - 60px); overflow-y: auto; padding-bottom: 20px;}
.centreBox {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; display: inline-block; text-align: center; color: #333; z-index: 99;}
.centreBox.fixed {position: fixed; background: rgba(0,0,0,0.6); padding: 10px; border-radius: 50px; width: auto; transition: .1s opacity ease; z-index: 9999;}
.iconBox {display: inline-block; margin: 10px; text-transform: uppercase; font-weight: 700; color: rgba(30,30,30,0.8);}
.iconBox > * {color: rgba(30,30,30,0.8); cursor: pointer; display: inline-block;}
.iconBox > * img, .switch, .iconBox.media > div, .iconBox > .inner {width: 100px; height: 100px; display: block; padding: 20px; opacity: 0.65; border-radius: 20px; border: 3px solid #333; margin-bottom: 10px; transition: .3s all ease;}
.iconBox:hover {text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px;}
.iconBox:hover > * {color: rgba(30,30,30,0.9);}
.iconBox:hover img, .iconBox:hover .inner {opacity: 0.9;}
.iconBox:active > * {color: #333;}
.iconBox:active img, .iconBox:active .inner {opacity: 1; transition: none;}
.iconBox.touch, .iconBox.touch > *, .iconBox.touch img {transition: 2s all ease;}
.iconBox.touch:hover {text-shadow: none;}
.iconBox.touch:hover > * {color: rgba(30,30,30,0.8);}
.iconBox.touch:hover img, .iconBox.touch:hover .switch, , .iconBox.touch:hover .inner {opacity: 0.65;}
.iconBox.touch:active {text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px; transition: none;}
.iconBox.touch:active > * {color: rgba(30,30,30,0.9); transition: none;}
.iconBox.touch:active img, .iconBox.touch:active .switch, .iconBox.touch:active .inner {opacity: 0.9; transition: none;}
.iconBox > .inner {width: auto !important; display: flex; align-items: center; cursor: pointer;}
.iconBox > .inner select {font-size: 14px; line-height: 24px; cursor: pointer;}
.notifyBox {width: 500px; max-width: calc(100% - 40px); margin: 0 auto 20px; font-size: 14px; padding: 0 20px 10px;}
.button {
	background: transparent; border: 2px solid rgba(30,30,30,0.5); color: rgba(30,30,30,0.8); position: relative; padding: 6px 14px; display: inline-block; text-decoration: none;
	text-transform: uppercase; font: 700 11px arial; margin: 3px; transition: .2s all ease; border-radius: 10px; vertical-align: middle; -webkit-appearance: none; cursor: pointer;
}
.button:hover, a:hover .button {text-shadow: none; border-color: #333; box-shadow: #FFF 0 0 10px, inset #FFF 0 0 10px; text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px; color: #333;}
.button.hollow {border: none !important; box-shadow: none;}
.switch {opacity: 0.65;}
.switch:hover {opacity: 1; border-color: #333;}
.switch:before {content: ""; background: rgba(0,0,0,0.8); position: absolute; top: 50%; left: 50%; transform: translate(-27px,-17px); border-radius: 36px; display: block; width: 54px; height: 34px; transition: .1s all ease; box-shadow: inset rgba(0,0,0,0.3) 0 1px 1px;}
.switch:after {content: ""; background: #FFF; position: absolute; border-radius: 36px; display: block; transition: .1s all ease; width: 28px; height: 28px; top: calc(50% - 1px); left: 50%; transform: translate(-24px,-14px); border-bottom: 2px solid #CCC; box-shadow: rgba(0,0,0,0.2) 0 1px 2px;}
.switch.on:before {background: rgba(0,136,255,0.8);}
.switch.on:after {transform: translate(-4px,-14px);}


/* FORMS AND INPUT */
input[type=text], input[type=password], input[type=number] {
	background: rgba(0,0,0,0.5); position: relative; display: block; font: 700 13px/24px "helvetica neue", arial, sans-serif; transition: .3s all ease; padding: 10px 20px; border-radius: 10px; width: 250px; margin: 10px auto; border: none; outline: none; text-align: center; color: #E4E4E4; -webkit-appearance: none; max-width: calc(100% - 20px);
}
input[type=text]:focus, input[type=password]:focus {background: rgba(0,0,0,0.6);}
input[type=range] {width: 80px; vertical-align: middle;}
input[type=color], select {vertical-align: middle;}
input[type=date]::-webkit-calendar-picker-indicator {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; color: transparent; background: transparent; cursor: pointer;}
input[type=number] {-moz-appearance: textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input::-moz-placeholder {text-transform: uppercase;}
input::-webkit-input-placeholder {text-transform: uppercase;}
input:-ms-input-placeholder {text-transform: uppercase;}
input[type=text].alt {background: #FFF; color: #333; padding: 2px; border: 1px solid #CCC; margin: 0 2px; font-size: 12px; display: inline-block;}
textarea {padding: 20px; border-radius: 20px; border: 1px solid #CCC; margin: 5px; resize: none; outline: none;}


/* MENU AND TOOLBAR */
nav {
	background: #333; position: fixed; width: 100%; height: 46px; bottom: 0; left: 0; padding: 0 10px; text-align: center; display: block; z-index: 200;
	display: flex; flex-wrap: nowrap; justify-content: space-between; flex-direction: row; user-select: none; box-shadow: rgba(0,0,0,0.05) 0 -5px 30px;
}
nav ul {padding-left: 0;}
nav li {display: inline-block; padding: 0 2px; min-height: 40px;}
nav li:before {content: attr(data-title); position: absolute; width: 140px; height: 0; display: inline-block; text-align: center; left: -52px; top: -26px; color: #333; transition: .2s ease all; font-size: 10px; font-weight: 700; line-height: 30px; opacity: 0; overflow: hidden; white-space: nowrap; text-transform: uppercase; border-radius: 10px;}
nav img, nav svg {width: 30px; height: 30px; margin: 8px 1px; opacity: 0.6; transition: .2s ease all;}
nav svg path {fill: white;}
nav li div, nav li span {cursor: pointer;}
nav li:hover img, nav li:hover svg {opacity: 1;}
nav li:hover:before {opacity: 1; height: 30px;}
nav li:active img {opacity: 1; transition: none;}
nav li:active:before {transition: none;}
nav li.touch:hover img {opacity: 0.65;}
nav li.touch:hover:before {opacity: 0; height: 0;}
nav li.touch:before {transition: 2s all ease;}
nav li.touch:active:before {opacity: 1; height: 30px; transition: none;}

.modal {background: rgba(255,255,255,0.95); position: fixed; width: 100%; height: 100%; font-size: 14px; padding: 20px; overflow-y: auto; opacity: 0; transition: .1s all ease;}
.modalFx {position: fixed; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100vh; z-index: 5;}
.modal .inner {z-index: 5;}
.modal .close {position: absolute; top: 20px; right: 20px; font-size: 50px; text-align: center; line-height: 40px; width: 40px; height: 40px; z-index: 9; cursor: pointer;}
.modal .closeArea {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}

/* DIARY */
#diaryTitle {font-weight: 200; color: #CCC; font-size: 1.1em; line-height: 46px; width: 70px;}
#diaryTitle strong {font-weight: 600;}
#datePicker {position: absolute; width: 100%; height: 100%; opacity: 0; top: 0; left: 0;}
.prevNext {color: #AAA; font-size: 20px; line-height: 46px; cursor: pointer; text-align: center; width: 40px; height: 40px;}
.prevNext:hover {color: #CCC;}
.prevNext:active {color: #FFF;}
#diary {width: 100%; padding: 0;}
#diary:after {content: "* = Work Day"; position: absolute; bottom: -20px; left: 30px;}
.day {position: relative; border-bottom: 1px solid #000; padding-bottom: 10px; padding-right: 30px;}
.day.today:before {content: ""; border-left: 5px solid #F00; position: absolute; left: -10px; top: 0; height: 100%; width: 0;}
.day.today strong[data-type=TinnDate] {color: #F00;}
.item {width: 24%; padding: 4px 6px 0 2px; display: inline-block; line-height: 20px; font-weight: 700; letter-spacing: -0.5px;}
.item.x {display: none;}
.item.x.editing {display: inline-block;}
.item.lge strong {font-size: 1.4em;}
.item.mid strong {font-size: 1.2em;}
.notes {font-weight: 700; width: 100%; padding: 4px 0 0 2px;}
.item strong, .notes strong {font-weight: 400; font-size: 1.1em; min-width: 100px; min-height: 20px; display: inline-block; font-family: "bsb hand"; color: #3359BB;}
.item strong {text-transform: uppercase; line-height: 16px; padding-top: 4px; letter-spacing: -0.5px;}
.notes strong {min-width: 100%; padding: 5px 0 0; line-height: 20px;}
.item input[type="checkbox"] {line-height: 20px; margin: 2px 0 0 10px; display: none; width: 16px; height: 16px;}
.actions {position: absolute; top: 0; right: 0; text-align: center; width: 26px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.actions img {display: block; margin: 5px 0;}
.wrk {font-size: 18px; font-family: "bsb hand"; color: #33597A;}
.desat {font-size: 10px; font-family: "arial"; color: #FFF; padding: 0 3px; line-height: 16px; border-radius: 4px; text-align: center; margin-left: 4px; background: #F80;}
.desat.serious {background: #F00;}
.desat.dangerous {background: #000;}
.box {display: inline-block; min-width: 244px; padding: 20px; border-radius: 20px; border: 2px solid rgba(30,30,30,0.5); margin: 5px 4px; text-align: center; min-height: 104px;}
.box > strong {display: block; font-size: 2em; line-height: 30px;}
.box span {display: block; font-size: 0.9em;}
.box strong span {display: inline-block; font-size: 0.5em;}
.box.worse > strong {color: #F00;}
.box.quarter {min-width: 174px;}

/* SpO2 and Sleep Graphs */
.dayCharts {position: relative; width: 100%; display: none; margin: 10px auto 10px; padding: 0 30px; overflow: auto;}
.spo2sleep {position: relative; width: 100%; min-height: 250px; display: flex; margin: 0 auto 10px;}
.spo2Min {position: absolute; width: 4px; height: 4px; border-radius: 4px; z-index: 5;}
.spo2Min.green {background: #290;}
.spo2Min.yellow {background: #FC0;}
.spo2Min.orange {background: #F80;}
.spo2Min.red {background: #F00;}
.spo2Min.black {background: #000;}
.spo2Min::before {
	content: attr(data-title); background: #FFF; position: absolute; box-shadow: rgba(0,0,0,0.2) 0 0 6px; width: 80px; top: 0; left: 50%; display: none; z-index: 9;
	margin-top: -32px;  margin-left: -45px; padding: 5px; text-align: center; border-radius: 6px;
}
.spo2Min::after {
	content: ""; position: absolute; left: 50%; top: -100%; margin-left: -5px; display: none; z-index: 9;
	border-width: 5px; border-style: solid; border-color: #777 transparent transparent transparent;
}
.spo2Min:hover::before, .spo2Min:hover::after {display: block;}
.timeLine {position: absolute;bottom: 20px; left: 0; border-top: 1px solid #333;}
.hourLine {position: absolute; width: 1px; height: 4px; bottom: 16px; border-left: 1px solid #333;}
.hourLine:after {content: attr(data-hour); position: absolute; width: 14px; font-size: 10px; text-align: center; left: -7px; bottom: -10px; line-height: 7px; letter-spacing: -0.5px;}
.gridLine {position: absolute; width: 100%; left: 0; border-top: 1px dashed #DDD; z-index: 1;}
.gridLine:after {content: attr(data-title); position: absolute; width: 24px; font-size: 10px; text-align: right; left: -30px; line-height: 7px; top: -5px;}
.gridLine.g100, .gridLine.g100:after {bottom: 100%;}
.gridLine.g95, .gridLine.g95:after {bottom: 90%;}
.gridLine.g90, .gridLine.g90:after {bottom: 80%;}
.gridLine.g85, .gridLine.g85:after {bottom: 70%;}
.gridLine.g80, .gridLine.g80:after {bottom: 60%;}
.gridLine.g75, .gridLine.g75:after {bottom: 50%;}
.gridLine.g70, .gridLine.g70:after {bottom: 40%;}
.gridLine.g65, .gridLine.g65:after {bottom: 30%;}
.gridLine.g60, .gridLine.g60:after {bottom: 20%;}
.gridLine.g55, .gridLine.g55:after {bottom: 10%;}
.sleepMin {position: absolute; height: 22px; bottom: 24px; z-index: 9;}
.sleepMin::before {
	content: attr(data-title); background: #FFF; position: absolute; box-shadow: rgba(0,0,0,0.2) 0 0 6px; width: 220px; top: 0; left: 50%; display: none; z-index: 9;
	margin-top: -32px; margin-left: -115px; padding: 5px; text-align: center; border-radius: 6px;
}
.sleepMin::after {
	content: ""; position: absolute; left: 50%; top: -5px; margin-left: -5px; display: none; z-index: 9;
	border-width: 5px; border-style: solid; border-color: #777 transparent transparent transparent;
}
.sleepMin:hover::before, .sleepMin:hover::after {display: block;}
.sleepKey {display: inline-block; padding: 5px; font-size: 11px;}
.sleepKeyCol {position: relative; display: inline-block; margin-right: 5px; width: 14px; height: 14px; vertical-align: middle;}
.sleepMin.deep, .sleepKeyCol.deep {background: #154ba6;}
.sleepMin.light, .sleepKeyCol.light {background: #3f8dff;}
.sleepMin.rem, .sleepKeyCol.rem {background: #7ec5ff;}
.sleepMin.wake, .sleepKeyCol.wake {background: #e83460;}
.sleepMin.asleep {background: #3f8dff;}
.sleepMin.restless {background: #e83460;}


#jogWheel > div {
	display: block; width: 32px; height: 32px; margin: 0 auto; -webkit-animation: loading .5s infinite linear; animation: loading .5s infinite linear;
	background: url(data:image/png;base64,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); background-size: 100%;
} @-webkit-keyframes loading {100% {-webkit-transform: rotateZ(360deg)}} @keyframes loading {100% {transform: rotateZ(360deg)}}

@media (max-width: 767px) {
	.wrapSM {flex-wrap: wrap;}
	body.home {padding: 0 0 80px;}
	h1 {font-size: 16px;}
	nav img {width: 24px; margin: 8px 0;}
	nav li.large img {width: 34px;}
	nav li:before {right: 44px; line-height: 24px;}
	nav li.large:before {right: 48px; line-height: 34px;}
	.notifyBox p {font-size: 0.8em;}
	
	.iconBox {margin: 12px; width: 60px; font-size: 0.8em;}
	.iconBox > * img, .switch, .iconBox.media > div, .iconBox > .inner {width: 60px; height: 60px; padding: 5px; border: none; margin: 0 auto 5px;}
	
	#diary {padding: 5px;}
	#diary:after {left: 5px;}
	.day {padding-bottom: 0;}
	.day.today:before {left: -5px;}
	.item {width: 100%; padding: 4px; line-height: 20px;}
	.item strong {letter-spacing: -1px;}
	.notes {min-height: 20px; padding: 4px;}
	.notes strong {line-height: 16px; letter-spacing: -0.6px;}
	.actions img {margin: 20px 0;}
	
	table.mobFormat {width: 100%; background: none;}
	table.mobFormat tbody {border: none;}
	table.mobFormat tbody tr {display: block; padding: 5px; background: none !important;}
	table.mobFormat tbody td {display: block; padding: 5px 8px; font-weight: 700; border: none; background: #FFF;}
	table.mobFormat td:first-child {font-weight: 700;}
	table.mobFormat tbody td {background: #FFF;}
	table.mobFormat tbody td:before {content: attr(data-title)": "; display: inline; text-align: left; font-weight: normal;}
	table.mobFormat tbody tr:last-child td:first-child, table.mobFormat tbody td:first-child {border-radius: 5px 5px 0 0;}
	table.mobFormat tbody tr:last-child td:last-child, table.mobFormat tbody td:last-child {border-radius: 0 0 5px 5px;}
	table.mobFormat thead, table.mobFormat td.noBefore:before {display: none !important;}
	table.mobFormat td.colour {background-color: #111; color: #FFF;}
}

@media (max-width: 468px) {
	.dayCharts {float: right;}
}

@media print {
	body, html {position: relative; background: none; padding: 0; margin: 0;}
	body {font-size: 10px;}
	#diary {padding: 0;}
	nav {display: none;}
	.day {padding-bottom: 0; border: 2px solid #000; border-bottom: none;}
	.day:last-child {border-bottom: 2px solid #000;}
	.item {width: 24%; padding: 1px 4px 0 2px;}
	.item strong {min-width: 0; line-height: 12px; padding: 4px 0 0;}
	.notes {min-height: 60px;}
	.actions {display: none;}
}
