/* ---[ http://meyerweb.com/eric/tools/css/reset/ ]-------------------------
   v2.0 | 20110126
   License: none (public domain)
   ------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}

/* ---[ end of reset ]------------------------------------------------------ */

* {
	box-sizing: border-box;
}

/* font-family: 'Fira Code', monospace; */
@import url('https://fonts.googleapis.com/css2?family=Damion&family=Fira+Code:wght@600&family=Special+Elite&display=swap');

body {
	font-family: Open Sans, clearsans, arial;
	font-size: 1.4vh; /* FIXME */
	line-height: 1.6em;
	font-weight: 400;
}

:root {
	--box-shadow-width: 0.5em;
	--box-shadow-color: #808080;
}

@media screen and (min-width: 576px) {

}

@media screen and (min-width: 768px) {

}

@media screen and (min-width: 1000px) {

}

@media screen and (min-width: 1200px) {

        body {
                font-size: 16px;
        }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {

	body {
		font-size: 16px;
	}
}

/* ---[ Elements ]---------------------------------------------------------- */

label.switch {
	font-size : 2em;
	position  : relative;
	display   : inline-block;
	width     : 1.75em;
	height    : 1em;
	transition: all 0.25s ease-in-out;
}

label.switch input {
	display: none;
}

label.switch span {
	position        : absolute;
	left            : 0;
	top             : 0;
	right           : 0;
	bottom          : 0;
	background-color: #424242;
	border-radius   : 1em;
	cursor          : pointer;
	transition      : inherit;
}

label.switch span:before {
	position        : absolute;
	display         : block;
	content         : "";
	height          : 0.7em;
	width           : 0.7em;
	border-radius   : 0.7em;
	left            : 0.15em;
	bottom          : 0.15em;
	background-color: #EFEFEF;
	transition      : inherit;
}

label.switch input:checked + span {
	background-color: #00AA00;
}

label.switch input:checked +span:before {
	transform: translate(0.75em, 0);
}

.button {
	display         : inline-block;
	padding         : 0.2em 0.5em;
	margin-left     : 0.5em;
	margin-right    : 0.5em;
	color           : #424242;
	background-color: #EFEFEF;
	text-decoration : none;
	box-shadow      : 1px 1px 4px #606E77;
}

/* ------------------------------------------------------------------------- */

.modal-box-background {
	background-color: rgba(128, 128, 128, 0.75);
}

.modal-box {
	background-color: #FFFFFF;
	padding-bottom  : 1em;
	border-radius   : 1em;
	box-shadow      : 0 0 var(--box-shadow-width) var(--error-box-shadow, #424242);
}

.modal-box > div {
	padding: 0.25em 5%;
}

.circle-tiles {
	padding: var(--box-shadow-width);
}

.circle-tile {
	border-radius   : 50%;
	box-shadow      : 0 0 var(--box-shadow-width) var(--box-shadow-color);
	line-height     : 1.5em;
	background-color: #FFFFFF;
	overflow        : hidden;
}

.circle-tile-big {
	font-size  : 2em;
	line-height: 1.5em;
}

.grid-tiles {
	column-gap: 0.5em;
	row-gap: 0.5em;
}

.grid-tiles-box {
	border-radius: 0.5em;
	box-shadow: 0 0 4px var(--box-shadow-color);
}

.grid-tiles-box:after {
	content       : '';
	display       : block;
	padding-bottom: 100%;
}

.service-tile-status {
	font-weight: 400;
	color      : #AA0000;
}

.service-tile-status.connected {
	color: #00AA00;
}

.service-tile-modal {
	background-color: #FFFFFF;
	border-radius   : 1em;
	box-shadow      : 0 0 4px var(--box-shadow-color);
}

.service-tile-modal > div {
	padding: 0.25em 5%;
}

.service-modules-list-header-scopes-0 {
	background-color: #808080;
}

.service-modules-list-header-scopes-1 {
	background-color: #008080;
}

/* ------------------------------------------------------------------------- */

.status-tiles-large, .status-tiles-small {
	font-family: 'Fira Code', monospace;
	font-size  : 1em;
}

.status-tiles-large-title, .status-tiles-small-title {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 23%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 0.764em;
	text-align: center;
}

.status-tiles-large-value, .status-tiles-small-value, .status-tiles-large-below, .status-tiles-small-below {
	position: absolute;
	width: 100%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}

.status-tiles-large-value {
	font-size: 1em;
	top: 35%;
}

.status-tiles-small-value {
	font-size: 1em;
	top: 45%;
}

.status-tiles-large-value .unit, .status-tiles-small-value .unit {
	font-size: 0.4em;
}

.status-tiles-large-below {
	font-size: 0.7em;
	top: 55%;
} 





/*
.circle-tiles-tile {
	font-size: 3em;
}

.status-tiles-small, .status-tiles-large {
	--highlight: var(--color-fitbit-highlight);
	--background: var(--color-fitbit-background);
	font-family: 'Fira Code', monospace;
	font-weight: 200;
	font-size: 1em;
	line-height: 1.25em;
	width: 100%;
	height: 100%;
}

.status-tiles-large-above {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 23%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 0.764em;
	text-align: center;
	color: var(--color-default);
}

.status-tiles-large-main {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 35%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-weight: 600;
	font-size: 2em;
	text-align: center;
	color: var(--color-default);
}

.status-tiles-large-below {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 48%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 1.236em;
	text-align: center;
	color: var(--color-default);
}

.status-tiles-large-icon {
	position: absolute;
	width: 45%;
	height: 45%;
	right: 0;
	bottom: 0;
}

.status-tiles-large-last-period {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 58%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	font-weight: 700;
}

.status-tiles-large-last-period li {
	margin: 0.15em;
}

.status-tiles-small-above {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 30%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 1em;
	text-align: center;
	color: var(--color-default);
}

.status-tiles-small-main {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 45%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-weight: 600;
	font-size: 2em;
	text-align: center;
	color: var(--color-default);
}

.status-tiles-small-below {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 55%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 1.5em;
	text-align: center;
	color: var(--color-default);
}

.status-tiles-small-icon {
	position: absolute;
	width: 27.5%;
	height: 27.5%;
	left: 50%;
	top: 67.5%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.status-tiles-small .unit, .status-tiles-large .unit {
	font-size: 0.667em;
	font-weight: 100;
}

.status-tiles-week-goal {
	margin: 1em;
}
.status-tiles-week-goal th {
	font-weight: 700;
}

.status-tiles-week-goal td, th {
	padding: 0.1em 1em;
	text-align: center;
}

.status-tiles-week-goal-diff {
	font-weight: 700;
}

.status-tiles-week-goal-required-past, .status-tiles-week-goal-challenge-future {
	color: #B0B0B0;
}

tr.status-tiles-week-goal-today {
	border: 2px solid var(--color-fitbit-highlight);
}

/* ------------------------------------------------------------------------- *

.services {
	width: 100%;
}

.services-svg, .services-img {
	width : 100%;
	height: 10em;
}

.services-svg svg, .services-img img {
	position : absolute;
	left     : 50%;
	top      : 0;
	width    : 10em;
	height   : 10em;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
}

.services-info {
	width  : 100%;
	padding: 2em;
}

.services-info-header {
	font-weight: 700;
	font-size  : 2em;
	line-height: 1.25em;
}

.services-service {
	width     : 100%;
	text-align: center;
}


.services-service-action {
	display         : inline-block;
	padding         : 0.2em 0.5em;
	color           : #424242;
	background-color: #EFEFEF;
	text-decoration : none;
	box-shadow      : 1px 1px 4px #606E77;
}

.service-list-box {
	position: relative;
	width   : 100%;
}

.service-list-box:after {
	content       : '';
	display       : block;
	padding-bottom: 100%;
}

.service-list-box-content {
	position     : absolute;
	width        : 100%;
	height       : 100%;
	border       : 1px solid #424242;
	border-radius: 50%;
}









.icon-average {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 899.000000 485.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,485.000000) scale(0.100000,-0.100000)'%0Afill='%2300B0B9' stroke='none'%3E%3Cpath d='M6629 4314 c-56 -17 -115 -77 -124 -126 -4 -19 -5 -102 -3 -184 3%0A-144 4 -152 30 -191 28 -43 79 -72 139 -80 58 -8 138 34 170 89 22 39 24 56%0A28 182 2 90 -1 154 -9 180 -32 107 -129 162 -231 130z'/%3E%3Cpath d='M7435 3859 c-237 -31 -478 -140 -708 -321 -57 -45 -242 -221 -422%0A-403 -176 -177 -348 -343 -383 -369 -204 -155 -351 -215 -537 -224 -188 -8%0A-345 33 -615 158 -366 171 -684 240 -1095 240 -380 0 -720 -59 -1130 -195%0A-528 -175 -1038 -458 -1392 -774 -68 -61 -99 -97 -119 -138 -82 -166 33 -356%0A215 -356 74 0 137 29 209 96 406 380 1110 717 1727 827 243 43 588 54 788 26%0A218 -31 359 -74 595 -182 187 -86 351 -143 498 -175 81 -18 133 -22 284 -23%0A169 0 194 2 293 27 272 68 476 188 747 441 41 38 159 157 261 263 300 312 442%0A432 604 509 109 51 177 70 313 83 74 8 116 18 152 36 192 97 162 388 -46 451%0A-52 15 -131 16 -239 3z'/%3E%3Cpath d='M3755 3755 c-46 -25 -66 -46 -86 -90 -16 -34 -19 -67 -19 -236 0%0A-188 1 -197 25 -245 53 -107 189 -133 279 -53 60 52 68 89 64 310 -3 218 -11%0A247 -76 297 -44 33 -140 42 -187 17z'/%3E%3Cpath d='M2800 3702 c-19 -10 -48 -38 -65 -61 l-30 -43 0 -221 c0 -250 5 -273%0A73 -325 31 -24 45 -27 107 -27 62 0 76 3 107 27 70 53 78 87 78 319 0 232 -8%0A264 -75 315 -49 37 -142 45 -195 16z'/%3E%3Cpath d='M5688 3681 c-55 -18 -89 -47 -113 -95 -25 -49 -25 -55 -25 -288 0%0A-193 3 -246 16 -276 51 -123 201 -155 293 -63 55 55 61 89 61 338 0 231 -5%0A264 -46 319 -39 53 -127 83 -186 65z'/%3E%3Cpath d='M4705 3475 c-91 -49 -108 -96 -103 -286 4 -178 16 -209 99 -252 44%0A-24 62 -28 98 -23 70 10 118 43 147 102 24 50 25 59 22 196 -3 162 -15 199%0A-76 246 -44 33 -140 42 -187 17z'/%3E%3Cpath d='M1886 3288 c-50 -14 -108 -72 -124 -124 -15 -51 -16 -255 -1 -309 15%0A-53 74 -109 131 -123 82 -21 173 23 209 102 15 34 19 65 19 176 0 154 -14 199%0A-71 243 -29 21 -101 49 -119 46 -3 -1 -22 -6 -44 -11z'/%3E%3Cpath d='M6629 2474 c-55 -17 -106 -65 -120 -114 -6 -23 -9 -350 -7 -961 l3%0A-925 27 -41 c28 -43 79 -72 139 -80 58 -8 138 34 170 89 l24 43 3 910 c2 663%0A0 921 -8 950 -31 106 -129 161 -231 129z'/%3E%3Cpath d='M3755 2255 c-46 -25 -66 -46 -86 -90 -18 -38 -19 -85 -19 -844 0%0A-601 3 -814 12 -844 16 -52 63 -99 115 -115 58 -17 83 -15 141 14 42 21 56 34%0A77 78 l25 52 -2 814 c-3 776 -4 817 -22 853 -30 61 -77 91 -150 95 -43 2 -70%0A-2 -91 -13z'/%3E%3Cpath d='M2840 2158 c-51 -14 -100 -55 -121 -102 -18 -39 -19 -80 -19 -797 l0%0A-755 26 -51 c20 -42 35 -57 77 -77 57 -29 82 -31 140 -14 52 16 99 63 115 115%0A9 30 12 231 12 789 0 710 -1 751 -19 790 -22 49 -70 88 -126 103 -22 6 -42 11%0A-45 10 -3 0 -21 -5 -40 -11z'/%3E%3Cpath d='M4740 1968 c-52 -14 -100 -55 -121 -102 -18 -39 -19 -78 -19 -695 0%0A-484 3 -664 12 -694 16 -52 63 -99 115 -115 58 -17 83 -15 140 14 42 20 57 35%0A77 77 l26 51 0 651 c0 461 -3 662 -11 686 -33 97 -129 153 -219 127z'/%3E%3Cpath d='M5688 1900 c-55 -16 -89 -45 -114 -95 l-24 -51 2 -640 3 -640 27 -41%0Ac28 -43 79 -72 139 -80 58 -8 138 34 170 89 l24 43 3 620 c2 466 0 631 -9 664%0A-16 56 -71 112 -125 129 -46 13 -57 14 -96 2z'/%3E%3Cpath d='M1852 1654 c-39 -20 -74 -64 -91 -113 -8 -24 -11 -187 -11 -536 l0%0A-501 26 -51 c20 -42 35 -57 77 -77 57 -29 82 -31 140 -14 52 16 99 63 115 115%0A9 29 12 178 12 544 0 567 1 557 -75 615 -47 36 -141 44 -193 18z'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-grow {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 899.000000 485.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,485.000000) scale(0.100000,-0.100000)'%0Afill='%2300B0B9' stroke='none'%3E%3Cpath d='M6712 4558 c-7 -7 -12 -17 -12 -22 0 -6 41 -95 91 -197 79 -161 89%0A-190 80 -208 -15 -27 -2078 -1061 -2117 -1061 -15 0 -237 91 -493 203 l-466%0A202 -80 0 -80 0 -1520 -768 c-836 -423 -1535 -780 -1553 -794 -64 -48 -103%0A-164 -82 -244 35 -132 163 -216 288 -188 26 5 677 329 1490 739 794 402 1454%0A730 1467 730 13 0 239 -93 501 -206 l477 -206 71 4 c71 5 79 9 1183 562 612%0A306 1124 556 1137 556 32 0 39 -9 136 -194 75 -142 88 -161 110 -161 21 0 90%0A86 472 595 246 327 452 605 459 617 9 18 9 26 -1 38 -11 13 -102 15 -779 15%0A-583 0 -770 -3 -779 -12z'/%3E%3Cpath d='M6587 3146 c-65 -18 -117 -61 -149 -126 l-28 -54 0 -1236 c0 -1382%0A-5 -1293 71 -1369 94 -94 254 -94 348 0 76 76 71 -12 71 1363 -1 1002 -3 1238%0A-14 1269 -43 119 -176 187 -299 153z'/%3E%3Cpath d='M3720 2667 c-49 -16 -133 -102 -148 -153 -17 -60 -17 -1998 0 -2058%0A16 -55 99 -138 154 -154 93 -27 189 -5 253 59 75 75 71 15 71 1124 0 1109 4%0A1049 -71 1124 -64 63 -168 87 -259 58z'/%3E%3Cpath d='M5613 2664 c-23 -8 -60 -33 -82 -55 -75 -75 -71 -15 -71 -1124 0%0A-1109 -4 -1049 71 -1124 94 -94 254 -94 348 0 75 75 71 15 71 1124 0 1101 3%0A1049 -67 1118 -19 20 -51 44 -72 53 -48 24 -145 28 -198 8z'/%3E%3Cpath d='M2805 2201 c-86 -21 -153 -80 -181 -158 -18 -52 -20 -1509 -2 -1581%0A15 -60 94 -142 154 -160 125 -37 246 13 301 125 l28 58 0 750 c0 852 3 818%0A-76 897 -64 64 -144 88 -224 69z'/%3E%3Cpath d='M4688 2196 c-61 -16 -111 -56 -145 -114 l-28 -47 -3 -769 c-3 -864%0A-5 -830 69 -905 94 -94 254 -94 348 0 74 74 71 41 71 893 l0 761 -24 51 c-29%0A62 -84 110 -150 129 -59 18 -76 18 -138 1z'/%3E%3Cpath d='M1822 1717 c-49 -19 -98 -62 -129 -115 l-28 -47 0 -545 0 -545 27%0A-47 c55 -93 139 -136 245 -125 103 11 177 75 208 180 22 73 22 1000 1 1071%0A-35 115 -110 176 -224 182 -38 2 -81 -2 -100 -9z'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-interpolate {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 899.000000 485.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,485.000000) scale(0.100000,-0.100000)'%0Afill='%2300B0B9' stroke='none'%3E%3Cpath d='M5518 4515 c-272 -43 -524 -200 -678 -425 -347 -507 -168 -1204 380%0A-1480 172 -87 397 -128 553 -100 259 45 419 117 581 262 219 196 361 558 327%0A839 -30 259 -129 459 -314 635 -165 157 -351 245 -581 274 -102 13 -159 12%0A-268 -5z m332 -324 c80 -30 132 -72 166 -133 26 -48 29 -62 29 -148 0 -88 -3%0A-101 -32 -160 -18 -36 -63 -99 -99 -140 -73 -82 -120 -169 -130 -239 -10 -74%0A-22 -81 -134 -81 -126 0 -135 8 -128 112 7 95 28 140 127 271 83 111 93 132%0A95 196 1 57 -25 88 -91 107 -54 16 -60 15 -140 -4 -46 -12 -90 -19 -98 -16%0A-15 6 -40 64 -54 127 -14 59 3 80 81 106 85 27 105 30 238 27 89 -2 128 -8%0A170 -25z m-132 -1020 c46 -23 67 -46 87 -94 21 -51 19 -95 -7 -147 -91 -179%0A-345 -93 -326 109 12 119 138 187 246 132z'/%3E%3Cpath d='M2568 3576 c-21 -8 -48 -20 -60 -29 -40 -25 -1790 -1595 -1860 -1667%0A-78 -80 -104 -145 -93 -225 25 -165 213 -262 358 -185 26 14 391 334 838 735%0A435 391 802 714 815 720 19 7 28 5 43 -10 11 -11 362 -589 781 -1285 419 -696%0A776 -1280 793 -1298 70 -74 185 -96 277 -55 37 17 1081 783 1202 883 147 121%0A120 347 -51 423 -55 24 -141 26 -192 4 -20 -8 -167 -112 -325 -230 -564 -420%0A-629 -467 -646 -467 -10 0 -25 9 -35 19 -10 11 -368 600 -797 1311 -545 904%0A-788 1298 -810 1315 -68 52 -163 68 -238 41z'/%3E%3Cpath d='M7932 3285 c-59 -18 -106 -57 -139 -113 -24 -40 -28 -58 -28 -123 0%0A-67 4 -81 30 -124 88 -142 268 -163 385 -45 84 83 99 183 45 290 -29 58 -76%0A96 -141 116 -57 17 -95 17 -152 -1z'/%3E%3Cpath d='M7074 2711 c-96 -44 -149 -135 -142 -245 16 -254 367 -312 471 -77%0A37 83 17 202 -46 270 -61 66 -197 91 -283 52z'/%3E%3Cpath d='M6267 2156 c-86 -32 -137 -86 -163 -173 -32 -104 17 -222 116 -277%0A46 -26 65 -31 120 -31 257 2 346 331 124 461 -54 32 -142 41 -197 20z'/%3E%3C/g%3E%3C/svg%3E");
}