/*** TYPOGRAPHY & COLORS ***/
:root {--accent: #337ab7; --dull: #bec8ce; }
body { font-family: 'Work Sans', sans-serif; }
h1   { font-size: 42px;  }
p    { font-size: 21px; color: var(--dull); font-weight: 300; }
ul   { padding-left: 0px; list-style: none; list-style-position: outside; }
figcaption { text-align: center; }
.section-heading { margin: 70px 0 10px; padding-bottom: 9px; border-bottom: 1px solid #eee; text-align: right; }
.updated { font-size: 75%; font-style: italic; text-align: right; display: block; margin: 7px 0; } 
.text-bad   { color: red; }
.text-dull  { color: var(--dull); }
.text-gloss { color: #fff; }
.text-accent{ color: var(--accent); }
.black { background-color: #000; }
.dull  { background-color: var(--dull); }
.accent{ background-color: var(--accent); }
.icon { max-height: 50px; max-width: 50px; }
.icon .path { stroke: var(--accent); fill: var(--accent); }
.data-cell { padding: 20px; }
.data-cell h5 { font-size:50px; font-weight:300; }
.data-cell h5 span { font-size: 30px; color: var(--dull); }
@media (max-device-width: 768px) {
	h1 { font-size: 30px; }
	p  { font-size: 15px }
	.data-cell h5 { font-size: 30px; }
	.data-cell h5 span { font-size: 20px; }
	.icon { max-height: 30px; max-width: 30px; }
}


/*** STRUCTURE ***/
.header { margin:100px 0 15px; padding:15px 0; }
main { padding: 0 0 120px; }
footer { padding: 50px 0px; }
@media (min-width: 768px) { .container-fluid { width: 740px; }}
@media (min-width: 992px) { .container-fluid { width: 880px; }}
@media (min-width: 1200px){ .container-fluid { width: 1020px; }}


/*** SECTION: CALENDAR ***/
.col-day { width: 14.2857%; float: left; }
.legend { text-align: right; }
.event    { width:30px; height: 30px; border-radius: 50%; }
.event.MI { width:50px; height: 50px; }
.arrythmia { background-color: yellow; color: yellow; }
.aFib      { background-color: purple; color: purple; }
.MI        { background-color: red;    color: red;    }
.tooltip > .tooltip-inner { padding: 15px; }
.bad  + .tooltip > .tooltip-inner { background-color: red; }
.bad  + .tooltip > .tooltip-arrow { border-top-color: red; }
.good + .tooltip > .tooltip-inner { background-color: var(--accent); }
.good + .tooltip > .tooltip-arrow { border-top-color: var(--accent); }

/*** SECTION: SETTINGS ***/
.settings-list td { padding: 0 20px; }
.settings-list tr:hover {cursor: pointer;} 
.settings-list a:hover { text-decoration: none; }
.btn-group { border: 3px solid var(--accent); }
.btn-group:after {
	position: absolute;
    top: -5%;
    left: 50%;
    width: 3px;
    margin-left: -1px;
    height: 110%;
    background: #fff;
    content: '';
    -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
    transform: rotate3d(0, 0, 1, 22.5deg);
}
.btn-group>.btn:first-child:after {
	border-top: 3px solid #000;
	content: '';
	position: absolute;
    top: 0;
    right: -50px;
}

.settings-list li { padding: 0 10px; }
input[type="radio"], input[type="checkbox"] { display: none; }
input[type="radio"] ~ label { padding: 10px; cursor: pointer; 
	user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
input[type="radio"]:not(:checked):hover ~ label { color: #000; }
input[type="radio"]:checked ~ label { background-color: var(--accent); color: #fff; }

/*** SECTION: CONTACT ***/
.social-links a {
	border-radius: 50%; border: 1px solid #337ab7;
	text-align: center; display: inline-block;
	width: 30px; height: 30px; 
}
.social-links a:hover { background-color: var(--accent); color: #ffffff; }
.social-links i { line-height: 27px; }
i { text-align: center; }


/*** NAVIGATION ***/
.main-nav {
	position: absolute; cursor: pointer; text-align: center; z-index: 2; margin-top: 100px;
	user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
.logo, .links li { 
	height: 100px; width: 100px; padding: 20px;  
}
.links li a { color: #fff; font-size: 0.9em; font-weight: 320; }
.links li .icon { max-width: 35px; max-height: 35px; display: block; margin: auto; } 
@media only screen and (max-device-width: 768px) { 
	.links { display: none; }
	.nav-icon { 
		width: 50px; height: 50px; margin: 20px; float: right!important; cursor: pointer; z-index: 3;
		transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg);
		transition: .5s ease-in-out; -webkit-transition: .5s ease-in-out;
		user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
	}
	.nav-icon div {
		height: 10px; width: 50px; margin-bottom: 10px; display: block; background: #000003; 
		transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out;
		transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg);
		transform-origin: left center; -webkit-transform-origin: left center; -ms-transform-origin: left center;	
	}
	.nav-icon.open div:nth-child(1) { transform: rotate(50deg); -webkit-transform: rotate(50deg); -ms-transform: rotate(50deg); }
	.nav-icon.open div:nth-child(2) { width: 0%; opacity: 0; }
	.nav-icon.open div:nth-child(3) { transform: rotate(-50deg); -webkit-transform: rotate(-50deg); -ms-transform: rotate(-50deg); }
}