body {
	font-family: arial, verdana, sans-serif !important;
}
.name {
	font-weight: 700;
	font-size: 1.2em;
}
.nameBirthday {
	font-weight: 700;
	font-size: 1.2em;
	color: rgb(0, 255, 0);
}
.age {
	color: rgb(100, 100, 100);
}
.rocks {
	background-image: url(../img/rocks.png);
	background-repeat: no-repeat;
	background-position: right;
	width: 30px;
}
.hideMe {
	font-size: 0;
}
.container {
	position: relative;
	margin-bottom: 10px;
}
.imagePosition {
	bottom: 0px;
	color: rgb(46, 83, 61);
	font-size: 1.5em;
	font-weight: 700;
	background:rgba(255, 255, 255, 0.5);
	padding-bottom: 0px;
	padding-left: 10px;
	padding-right: 10px;
}
.datePosition {
	font-size: .8em;
	margin-bottom: 5px;
	margin-top: 5px;
}
.bday {
	white-space: nowrap;
}
table {
	border-collapse: collapse;
	margin-left: auto; 
	margin-right: auto;
}
th {
	font-size: 1.2em;
	color: blue;
	border-bottom: 1px solid black;
	border-color: rgb(200, 200, 200);
	background-color: #d8fde5;
	cursor: pointer;
	vertical-align: bottom;
}
th:nth-child(9) {
	font-size: .8em;
	padding-left: 5px;
}
tr:nth-child(even) {
	background-color: #f2f2f2;
}
td:nth-child(10) {
	background-color: white;
}
td:nth-child(8) {
	text-align: center;
}
td:nth-child(9) {
	text-align: center;
}

/******HAPPY BIRTHDAY******/
/*Use (-55%, -35%) to position the animation for use before the person's name.  -55%, -45%*/
svg#one {
	position: absolute;
	-webkit-transform: translate(-145%, -10%);
	transform: translate(-145%, -10%);
}
svg#two {
	position: absolute;
	-webkit-transform: translate(570%, 1210%);
	transform: translate(570%, 1210%);
}
svg#three {
	position: absolute;
	-webkit-transform: translate(600%, 250%);
	transform: translate(600%, 250%);
}
.group {
    -webkit-transform: translate(42.5px,42.5px);
    -moz-transform: translate(42.5px,42.5px);
    transform: translate(42.5px, 42.5px);
}
path {
    -webkit-transform: translate(-42.50px,-42.50px);
    -moz-transform: translate(-42.50px,-42.50px);
    transform: translate(-42.50px,-42.50px);
}
.large {
	-webkit-animation: large 2.5s infinite;
	-moz-animation: large 2.5s infinite;
}
.large-2 {
	-webkit-animation: large-2 2.5s infinite;
	-moz-animation: large-2 2.5s infinite;
}
.small {
	-webkit-animation: small 2.5s infinite;
	-moz-animation: small 2.5s infinite;
}
@-webkit-keyframes large {
	0% {
		opacity: 0;
		-webkit-transform: rotate(0deg) scale(0);
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(360deg) scale(1.5);
		transform: rotate(360deg) scale(1.5);
	}
}
@-moz-keyframes large {
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(360deg) scale(1.5);
	}
}
@-webkit-keyframes large-2 {
	0% {
		opacity: 0;
		-webkit-transform: rotate(45deg) scale(0);
		transform: rotate(45deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(405deg) scale(1.1);
		transform: rotate(405deg) scale(1.1);
	}
}
@-moz-keyframes large-2 {
	0% {
		opacity: 0;
		transform: rotate(45deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(405deg) scale(1.1);
	}
}
@-webkit-keyframes small {
	0% {
		opacity: 0;
		-webkit-transform: rotate(0deg) scale(0);
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(-360deg) scale(1);
		transform: rotate(-360deg) scale(1.5);
	}
}
@-moz-keyframes small {
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(-360deg) scale(1.5);
	}
}


/******CALENDAR******/
.unit-calendar {
	margin-left: auto; 
	margin-right: auto;
}
.container-calendar {
	background: #ffffff;
	padding: 15px;	
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	border: 1px solid #ccc;
	width: 256px;
	margin-left: auto; 
	margin-right: auto;
}
.container-calendar #left h1 {
	color: green;
	text-align: center;
	background-color: #f2f2f2;
	margin: 0;
	padding: 10px 0;
}
.table-calendar {
	border-collapse: collapse;
	width: 100%;
}
.table-calendar td,
.table-calendar th {
	padding: 5px;
	border: 1px solid #e2e2e2;
	text-align: center;
	vertical-align: top;
}
.date-picker.selected {
	background-color: lightgreen;
	font-weight: bold;
}

#monthAndYear {
	text-align: center;
	margin-top: 0;
}
.button-container-calendar {
	position: relative;
	margin-bottom: 1em;
	overflow: hidden;
	clear: both;
	text-align: center;
}
.button-container-calendar button {
	cursor: pointer;
	background: green;
	color: #fff;
	border: 1px solid green;
	border-radius: 4px;
	padding: 5px 10px;
}
.footer-container-calendar {
	margin-top: 1em;
	text-align: center;
	padding-bottom: 10px;
}
.footer-container-calendar select {
	cursor: pointer;
	background: #ffffff;
	color: #585858;
	border: 1px solid #bfc5c5;
	border-radius: 3px;
	padding: 1px 1em;
}