/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.ubercalc {
	width: 100%;
	margin-bottom: 40px;
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
	overflow: hidden;
	display: inline-block;
}
.ubercalc-wrapper {
	width: 100%;
	padding: 20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	color: #fff;
	display: inline-block;
}

.ubercalc-wrapper form {
	padding: 10px 40px 40px 40px;
	border-radius: 6px;
	background-color: rgba(0,0,0,0.6);
	display: inline-block;
}

.ubercalc-title {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
	display: inline-block;
	width: 100%;
	text-shadow: 1px 2px 20px rgba(0,0,0,0.6);
}
.ubercalc-description {
	margin-bottom: 0.5rem;
	display: inline-block;
	width: 100%;
}

.ubercalc-wrapper input,
.ubercalc-wrapper select {
	width: 100%;
	max-width: 200px;
	background-color: #fff!important;
}
.ubercalc-wrapper input,
.ubercalc-wrapper label,
.ubercalc-wrapper select {
	display: block;
}
.ubercalc-wrapper label,
.ubercalc-wrapper button {
	margin-top: 20px;
}
.ubercalc-wrapper input:focus,
.ubercalc-wrapper select:focus {
	background-color: #fff;
}
.ubercalc-wrapper button {
	background-color: #007acc!important;
	color: #fff!important;
}
.children-wrapper .child-select {
	display: inline-block;
}

.ubercalc-image {
	display: block;
}

.ubercalc-results {
	padding: 20px;
	background-color: #209020;
	color: #fff;
	text-align: center;
	display: none;
}
.ubercalc-results#ubercalc-results-fertility {
	padding: 0;
	background-color: #eee;
}

.ubercalc .fertility-calendar {
	background-color: #fff;
	padding: 20px;
}

.ubercalc .schedule-dot-list .schedule-dot-item {
	width: 14px!important;
	height: 14px!important;
}
.ubercalc .schedule-dot-list .ovulation {
	background-color: #9400d3;
}
.ubercalc .schedule-dot-list .implantation {
	background-color: #ffdab9;
}
.ubercalc .schedule-dot-list .fertility {
	background-color: #64c864;
}
.ubercalc .schedule-dot-list .menstrual {
	background-color: red;
}

.ubercalc-fertility-description {
	background-color: #fff;
	color: #333;
	text-align: left;
	padding: 20px;
	margin-top: 3px;
}
.ubercalc-fertility-description .schedule-dot-item {
	display: inline-block;
	border-radius: 50%;
}



.ubercalc-name-finder {
	min-height: 200px;
}

.name-finder-sex-wrapper {
	text-align: center;
}
.name-finder-sex {
	width: 100px;
	height: 100px;
	display: inline-block;
	background-size: cover;
	border-radius: 50%;
	background-position: center center;
}
.name-finder-list .name-finder-sex:first-child,
.name-finder-inspiration .name-finder-sex:first-child {
	margin-right: 40px;
}
.image-selectable {
	cursor: pointer;
}
.image-selectable.not-selected {
	transform: scale(0.7);
	filter: grayscale(1);
}
.name-list-favourites {
	width: 49%;
	display: inline-block;
	padding: 20px;
	text-align: center;
	vertical-align: top;
}
ul.name-list-style {
	list-style: none;
	padding: 0;
}
ul.name-list-style li {
	padding: 10px;
	text-align: center;
	margin-bottom: 0.3rem;
	border-radius: 0.4rem;
	cursor: pointer;
}
ul.name-list-male-style li {
	background-color: #dcf1f5;
	color: #0d6f89;
	font-weight: bold;
}
ul.name-list-female-style li {
	background-color: #f1e0f9;
	color: #700a7b;
	font-weight: bold;
}
ul.name-list-style li .name-info-wrapper {
	padding: 10px;
	text-align: center;
	background-color: rgba(255,255,255,.4);
	font-size: 0.9rem;
	border-radius: 0.4rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	margin-top: 10px;
}

.name-finder-inspiration ul.name-list-style li {
	display: none;
}

.name-list-inspiration,
.name-list-container {
	display: none;
}

.name-info-wrapper {
	display: none;
}

.ubercalc-voting-wrapper {
	display: none;
	text-align: center;
}


/**
 * Tabs
 */
#tabs-ubercalc { 
    background: transparent; 
    border: none; 
    margin-top: -48px;
    padding: 0;
} 
#tabs-ubercalc .ui-widget-header { 
    background: transparent; 
    border: none;
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
    background-color: rgba(0,0,0,0.4);
	padding: 10px 10px 0 10px;
} 
#tabs-ubercalc .ui-tabs-nav .ui-state-default { 
    background: transparent; 
    border: none; 
} 
#tabs-ubercalc .ui-tabs-nav .ui-state-active { 
    border: none; 
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 1px solid #777;
    border-radius: 3px 3px 0 0;
} 
#tabs-ubercalc .ui-tabs-nav .ui-state-default a { 
    color: #c0c0c0; 
} 
#tabs-ubercalc .ui-tabs-nav .ui-state-active a { 
    color: #459e00; 
}
#tabs-ubercalc .ui-tabs-tab a {
	box-shadow: none;
	font-weight: 700;
}
#tabs-ubercalc .ui-tabs-nav .ui-state-default a {
	color: #fff;
}
#tabs-ubercalc .ui-tabs-nav .ui-state-active a {
	color: #333;
	background-color: #fff;
	border: none;
	border-radius: 5px 5px 0 0;
}
#tabs-ubercalc .ui-tabs-nav .ui-state-default {
	border: none;
}