:root {
  --bg_blue: #aae3ff;
  --bg_brown: #d0a89c;
  --bg_green: #a4e5a7;
  --bg_purple: #d9b1f1;
  --blue: #e1f4ff;
  --brown: #f3ebe7;
  --green: #d1f4d3;
  --purple: #f1e1fa;
  --body_blue: #cde3ed;
  --body_brown: #ecdfd9;
  --body_green: #cde4ce;
  --body_purple: #dbcde4;
  --box_blue: #e4f0f5;
  --box_green: #e7f5e4;
}

body{	 
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	text-align: center;
	margin: auto;
	/*background:#cde3ed;*/
}

.img_container {
  position: relative;
	display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.img_data {
	padding: 20px;
}

.img_preview {
	background-color: white;
	border: 1px solid black;
	width: 100px;
	height: 100px;
}

.img_popup {
	visibility: hidden;
	position: absolute;
	left: 130px;
	top: -110px;
	opacity: 0;
  z-index: 10;
  transition: all 0.3s ease-out;
}

.img_preview:hover ~ .img_popup {
  visibility: visible;
  opacity: 1;
  transition: all 0.3s ease-in;
}

.blue_body {
	background: var(--body_blue);
}

.brown_body {
	background: var(--body_brown);
}

.green_body {
	background: var(--body_green);
}

.purple_body {
	background: var(--body_purple);
}

.container{
	text-align: center;
	margin:  auto;
	/*width:1400px;*/
}

.col1{
 	width: 210px;
 	float: left;
}

.col2 {
	position: absolute;
	left: 220px;
	width: calc(100% - 220px);
 	/*width: 1200px;*/
 	/*float: right;*/
 	margin: 0;
 	padding: 0;
 	/*overflow-x: auto;*/
 	text-align:left;
}

.colheader {
 	margin: 0;
 	float: center;
 	/*background-color:#d7d7d7;*/
	padding: 10px 0 0 0;
}

#link_window {
	/*background-color: #e1f4ff;*/
	text-align: left;
	margin: 0 auto;
	padding: 5px;
}

#left_links {
	background-color: #aae3ff;
	text-align: left;
	/*width:200px;
	height: 1000px;*/
	padding-top: 5px;
	float:left;
	/*margin-right:20px;*/
}

.section {
	padding: 5px;
}

.section.blue {
	background-color: var(--bg_blue);
}

.section.brown {
	background-color: var(--bg_brown);
}

.section.green {
	background-color: var(--bg_green);
}

.section.purple {
	background-color: var(--bg_purple);
}

.links.blue {
	background-color: var(--blue);
}

.links.brown {
	background-color: var(--brown);
}

.links.green {
	background-color: var(--green);
}

.links.purple {
	background-color: var(--purple);
}

A {
	color:black;
	text-decoration: none;
}

.table_row_1{
	/*#86d1ff;*/
	background: #e1f3ff;
	color:black;
}

.table_row_2{
	background:#f4fbff;
	color:black;
	text-decoration: none;
}

table{
	padding:5px;
	border-spacing: 4px;
}

.datatable th, td{
	text-align:left;
	border:0px;
	padding-top:10px;
	padding-bottom:4px;
	padding-left:10px;
	padding-right:10px;
	border-spacing:0px;
	background-color:#f4fbff;
}

input[type="text"], textarea {
  background-color : #f4fbff;
}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9; 
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

.care_box{
	width:70px;
	height:50px;
	position:relative;
	display:inline-block;
	text-align:left;
	padding-top:15px;
	float:left;
}

.care_box_container{
	width:400px;
	height:80px;
	position:relative;
	text-align:left;
}

.care_box_text{
	padding-top:15px;
	width:300px;
	height:65px;
	float:left;
	text-align:left;
}

.baby_profile_right, .pet_profile_right{
	width:580px;

	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
	position:relative;
	text-align:left;
	/*float:right;*/
	float:left;
}

.baby_profile_right{
	background-color: var(--box_blue);
}

.pet_profile_right{
	background-color: var(--box_green);
}

.baby_profile_left, .pet_profile_left{
	width:800px;

	position:relative;
	text-align:left;
	float:left;
}

#user_sections{
	display: flex;
	margin-right: 5px;
}

.user_info_section{
	flex: 1 1 0px;
	padding: 20px;
	margin: 5px;
	background-color: #f4fbff;
}

#password_strength_bar {
	width: 165px;
  height: 12px; 
  margin-top: 5px; 
  margin-bottom: 5px;
  border: 1px solid #ccc; 
  border-radius: 6px;
  overflow: hidden;
}

#password_strength_fill {
	height: 100%; 
  width: 0%; 
  background-color: red;
  border-radius: 6px 0 0 6px;
  transition: width 0.3s, background-color 0.3s;
}