*,*::before, *::after{margin:0;padding:0;}
::selection {
    color: black;
    text-shadow: 0 -1px rgba(255, 255, 255, 0.2);
    background: #FFC107;
} 
  
::-moz-selection {
    color: black;
    text-shadow: 0 -1px rgba(255, 255, 255, 0.2);
    background: #FFC107;
}
html{min-height:100%;}
body{
    font-size: 12px;
    min-height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	background: #fdfdfd;
}
h3{text-align:left;}
#content {
    text-align: center;
}

#logo {
	position: relative;
    text-align: center;
    padding: 10px 0 0;
}

#logo img{
	max-width: 100%;
	height: 60px;
	vertical-align:middle;
}
#logo span.shadow{
	position: relative;
    vertical-align: middle;
    font-weight: 700;
    font-size: 1.1em;
    padding-left: 15px;
    color: black;
}
#logo span.shadow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -25px;
	width: 6px;
	height: 50px;
	transform: rotate(15deg);
	background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 70%);
}

#find_device_btn {
    margin: 4px 2px;
    padding: 5px 8px;
    text-decoration: none;
    border-radius: 20px;
    display: inline-block;
    font-weight: 700;
    font-size: .9em;
    background: #fbb116;
    color: #000000;
}
.data_grid{
    position: relative;
	padding: 25px 0;
    margin: 10px auto;
    background: #f5f5f5;
    box-shadow: 0 1px #e0e0e0, 0 -1px #e0e0e0;
}

.year_wrap {
    display: none;
}
.year_wrap.active {
    display: block;
}
.filter_section {
    display: inline-block;
    vertical-align: middle;
    max-width: 300px;
    margin: 20px 6px;
}
.m_b {
	margin: 4px 2px;
    color: #000000;
    padding: 5px 8px;
    text-decoration: none;
    border-radius: 20px;
    display: inline-block;
    font-weight: 700;
    font-size: .9em;
    transition: all .2s;
}
.m_b:hover {
   background: #ddd;
}
.m_b.active {
    background: #fbb116;
    color: #000000;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
}

input, select {
	padding: 2px 8px;
    outline: none;
    height: 24px;
    line-height: 24px;
    background: #fff;
    box-shadow: 0 0 0 1px #cccccc;
    border: 0 solid;
    border-radius: 3px;
    margin: 0 4px;
    font-weight: 400;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: middle;
    font-size: 1.2em;
    transition: all .2s;
    min-width: 60px;
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input:hover, select:hover, input:focus, select:focus {
    box-shadow: 0 0 0 1px #b7b5a6, 0 4px 10px rgba(0, 0, 0, 0.2);
}

.chart_container {
	height: 320px;
    margin: 20px auto;
    display: inline-block;
    cursor: pointer;
    width: 45%;
	min-width:350px;
}
.chart_container h3 {
	text-align:center;
	margin-bottom:2px;
}

.circle_container {
	position:relative;
    white-space: nowrap;
    width: 100%;
    overflow-y: auto;
	margin-bottom:50px;
}
.day_circle{
	position:relative;
    height: 160px;
    width: 400px;
    display: inline-block;
    margin: 0 5px;
    transition: all .2s;
    border: solid 0 transparent;
    border-width: 10px 5px 40px;
    background: white;
    border-radius: 3px;
    box-shadow: 0 0 0 1px #e0e0e0;
    vertical-align: middle;
}
.day_circle.empty .zero_notice {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 220px;
    font-size: 2em;
    font-weight: 700;
    color: black;
}
.day_circle.highlight{
-moz-animation: blink 1.5s linear 2;
-webkit-animation: blink 1.5s linear 2;
animation: blink 1.5s linear 2;
}

.day_circle h3 {
	text-align:center;
	margin-bottom:2px;
}
.day_circle h3 span {
    display: block;
    font-size: .85em;
    color: #6f6f6f;
}

.card{
	vertical-align: top;
    display: inline-block;
    margin: 10px 20px;
    text-align: left;
}

.card_data div {margin-top: 5px;}
.card_data div span:first-child {font-weight:700;}

#qr_code_wrap{
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 10;
}
#qrcode{
    display: none;
    text-align: center;
    vertical-align: middle;
}

#qrcode img{display:none!important;}
#url_wrap{display:none;}

.button_wrap {
	text-align: right;
    margin-bottom: 10px;
}
.button_wrap a {
    position: relative;
    color: #fff;
    display: inline-block;
    margin: 0 2px;
    background: #333;
    font-weight: 700;
    font-size: .9em;
    border-radius: 12px;
    padding: 4px 8px;
    text-decoration: none;
}
.button_wrap a:active {
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

.loader {
position: fixed;
top: 50%;
left: 50%;
margin: -40px 0 0 -40px;
border: 20px solid;
border-color:#fbb116 #fbb116 transparent transparent;
width: 40px;
height: 40px;
border-radius: 100px;
display: none;
z-index: 9999;
}

.loader.active {
display:block;
-moz-animation: rotate 1.4s linear infinite;
-webkit-animation: rotate 1.4s linear infinite;
animation: rotate 1.4s linear infinite;
}



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

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

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


@-moz-keyframes blink {
50% {box-shadow:0 0 0 7px #ff6c6c, 0 4px 20px rgba(0, 0, 0, 0.1);}
}

@-webkit-keyframes blink {
50% {box-shadow:0 0 0 7px #ff6c6c, 0 4px 20px rgba(0, 0, 0, 0.1);}
}

@keyframes blink {
50% {box-shadow:0 0 0 7px #ff6c6c, 0 4px 20px rgba(0, 0, 0, 0.1);}
}



@media only screen and (max-width: 800px) {
	
	.chart_container {
		height: 200px;
		width: 100%;
		min-width:100%;
	}

}

@media only screen and (max-width: 600px) {
	.card {width:100%;}

	.splitter::before {
		left: 10%;
		width: 80%;
	}

	.filter_section {
		width: 100%;
		margin: 12px 0 0;
		max-width: 100%;
	}
	
	.day_circle{
		width: 320px;
	}

}

@media print {
	
	body {min-height: inherit;}
	body[data-print_type="qr"] #content {text-align: left;}
	
	.input_wrap, .button_wrap{display:none!important;}
	
	body[data-print_type="qr"] #logo,
	body[data-print_type="qr"] .card,
	body[data-print_type="qr"] .print_button,
	body[data-print_type="qr"] .chart_container,
	body[data-print_type="qr"] .circle_container{
		display:none!important;
	}
	
	body[data-print_type="qr"] #qrcode{display:block;}
	body[data-print_type="qr"] #qrcode canvas{display: none!important;}
	body[data-print_type="qr"] #qrcode img{display:block!important;}

	body[data-print_type="qr"] #url_wrap {
		display: block;
		margin-top: 2px;
		font-weight: 700;
		font-size: 1.2em;
		text-align: center;
		width: 256px;
		word-break: break-all;
	}
	
	.page_break{
		page-break-after:always;
	}
	body[data-print_type="report"] .chart_container {
		display: block;
		width: 100%;
		margin: 60px auto;
	}

	body[data-print_type="report"] .circle_container {
		white-space: normal;
		overflow: visible;
	}
	body[data-print_type="report"] .day_circle {
		height: 138px;
		margin: 3px;
	}
	body[data-print_type="report"] .day_circle h3 {
		font-size: .9em;
	}
	body[data-print_type="report"] .day_circle h3 span {
		display: inline-block;
		margin-left: 8px;
	}
	#details_wrap{
		background: white;
		box-shadow: none;
		margin: 0;
	}
	#qr_code_wrap {
		position: relative;
		right: inherit;
		top: inherit;
		bottom: inherit;
	}

}