/* Account */

.container_fluid_account {
	min-height: 100vh;
	padding: 0 43px;
	background-color: #81d5df;
	position: relative;
}

	.account {
		position: relative;
		padding: 0 5px;
	}

		.account h1 {
			margin: 30px 0 34px -1px;
		}

		/* Search */

		.search_grid {
			padding: 0;
		}

			.search_vessel {
				padding: 0;
			}

				.searchbar_vessel {
					padding: 0;
					min-width: 300px;
				}

					#searchbar {
						width: 100%;
						height: 55px;
						border-radius: 42px;
						font-size: 20px;
						color: #561a4c;
						position: relative;
						padding: 0 22px;
						background: none;
						border: 2px solid #561a4c;
					}

					.search_btn {
						background: none;
						position: absolute;
						border: none;
						height: 44px;
						width: 44px;
						margin-left: -52px;
						border-radius: 50%;
						top: 5px;
					}

					.search_btn:focus img {
						opacity: .5;
					}

						.search_icon {
							position: absolute;
							right: 9px;
							top: 12px;
							width: 21px;
							height: auto;
						}

						.cancel_icon {
							position: absolute;
							right: 9px;
							top: 14px;
							width: 17px;
							height: auto;
							display: none;
						}

					.search_results_vessel {
						height:20px;
						padding: 0;
						margin-top: 27px;
						margin-bottom: 51px;
					}

						.search_results_vessel p {
							font-size: 17px;
							line-height: 30px;
						}

	/* New profile */

	.profile_new_vessel {
		padding: 0;
		margin: 0 0 25px;
	}

		.new_button {
			position: relative;
			width: 138px;
			padding: 10px 45px 10px 56px;
		}

		.new_button:before {
			content: '';
			position: absolute;
			background-color: #de86ff;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			transition: all 0.3s ease;
			height: 37px;
			width: 37px;
			border-radius: 50%;
			left: 5px;
			bottom: 4px;
		}

		.new_button:after {
			background-image: url('../assets/icons/plus.svg');
			background-size: 17px 17px;
			position: absolute;
			width: 17px;
			height: 17px;
			top: 14px;
			left: 14px;
			content: '';
		}

/* Profiles */

.profiles_vessel {
	padding: 0 22px 0;
}
	.profile_container {
		border-radius: 5px;
		background: none;
		border: 2px solid #561a4c;
		margin: 0 29px 29px 0;
		padding: 0;
	}

		.profile_vessel {
			padding-top: 80px;
			min-height: 595px;
		}

			.profile_vessel ul {
				margin: 0 0 98px;
				list-style: none;
			}

				.profile_vessel ul li {
					line-height: 28px;
				}

					/* Name */
					
					.profile_vessel ul li h6 {
						margin: 0 0 12px -2px;
						text-align: left;
						font-size: 40px;
						line-height: 28px;
						letter-spacing: 0;
						font-weight: bold;
					}

						/* E-mail */
						
						.profile_vessel_email {
							font-size: 17px;
							font-weight: normal;
							margin: 17px 0 11px -2px;
							display: block;
						}

		/* Details */

		.img-row {
			padding: 0;
		}

			/* Image */

			.profile_image_vessel {
				width: 150px;
				height: 150px;
				display: inline-block;
				float: left;
				margin-top: -1px;
			}

				.profile_image_vessel img {
					width:150px;
					height:150px;
				}

					.profile_image_vessel_avatar {
						width: 153px !important;
						height: 153px !important;
						margin-top: -1px;
						margin-left: -6px;
					}

				/* Details */

				.datalist_vessel {
					padding-left: 0;
					padding-right: 15px;
				}

				.datalist span {
					border-top: 2px solid #561a4c;
					display: block;
					line-height: 48px;
					text-align: right;
					font-size: 16.5px;
				}

				.datalist_location,
				.datalist_updated,
				.datalist_template {
					position: relative;
					padding: 0 0 0 30px;
				}

				.datalist_template {
					text-transform: capitalize;
					border-bottom: 2px solid #561a4c;
				}

				.datalist_location:before,
				.datalist_updated:before,
				.datalist_template:before {
					background-image: url('../assets/icons/location.svg');
					background-size: 25px 25px;
					height: 25px;
					width: 25px;
					position: absolute;
					left: -1px;
					top: 13px;
					content: '';
				}

				.datalist_updated:before {
					background-image: url('../assets/icons/creation.svg');
				}

				.datalist_template:before {
					background-image: url('../assets/icons/template.svg');
				}

		/* Buttons */

		.profile_btn {
			width: 100%;
			height: 59px;
			margin-bottom: 22px;
			background-color: #81d5df;
			color: #561a4c;
			border: 2px solid #561a4c;
			letter-spacing: 0;
			border-radius: 5px;
			font-weight: bold;
			font-size: 21px;
		}

		.profile_btn:hover,
		.profile_btn:focus {
			background-color: #92dbe4;
		}

		.profile_btn:visited {
			background-color: #81d5df;
		}

		.profile_btn_settings {
			text-align: center;
			outline: none;
			padding: 11px 0 0;
			-webkit-transition: all 0.5s ease-out;
			-moz-transition: all 0.5s ease-out;
			transition: all 0.5s ease-out;
		}

		.profile_btn_pdf {
			position: relative;
		}

		.profile_btn_pdf:after {
			background-image: url('../assets/icons/external.svg');
			background-size: 22px 22px;
			height: 22px;
			width: 22px;
			position: absolute;
			right: 24px;
			top: 19px;
			content: '';
		}

		/* Profile settings */

		.settings_vessel {
			padding: 22px 0 22px;
			width: 100%;
			display: none;
		}

			.settings_vessel h6 {
				font-weight: 400;
				font-size: 18px;
				margin: 0 0 20px 3px;
				line-height: initial;
				letter-spacing: initial;
				z-index: initial;
				position: initial;
			}

				/* Tabs */

				.tabs_col {
					padding-left: 2px;
					padding-right: 2px;
				}

				.tabs_col:first-child {
					padding-left: 0;
				}

				.tabs_col:last-child {
					padding-right: 0;
				}

					.tabs_container {
						position: relative;
					}

						.tabs_row {
							position: absolute;
							width: 100%;
						}

							.tabs_btn {
								width: 100%;
								border: none;
								border-radius: 5px;
								background: #81d5df;
								height: 41px;
								font-size: 16px;
								border: 2px solid #561a4c;
								border-bottom-left-radius: 0;
								border-bottom-right-radius: 0;
								text-align: center;
								padding-top: 4px;
								cursor: pointer;
								height: 37px;
								-webkit-touch-callout: none;
								-webkit-user-select: none;
								-khtml-user-select: none;
								-moz-user-select: none;
								-ms-user-select: none;
								user-select: none;
							}

							.tabs_btn:after {
								content: '';
								display: block;
								position: absolute;
								bottom: -2px;
								right: -7px;
								width: 7px;
								height: 2px;
								background: #E1B0A3;
							}

							.tabs_btn:last-child:after {
								display: none;
							}

							.tabs_btn_active {
								border-bottom: none;
								background: #81d5df;
								border-bottom: 2px solid #81d5df;
								font-weight: bold;
							}

							.tabs_btn:focus,
							.tabs_btn:hover {
								outline: none;
								font-weight: bold;
							}

							.tabs_btn:visited {
								outline: none;
								font-weight: initial;
							}

						.tab_vessel {
							display: none;
							border: 2px solid #561a4c;
							border-radius: 5px;
							border-top-left-radius: 0;
							border-top-right-radius: 0;
							padding: 42px 30px;
							height: 516px;
							margin-top: 35px;
						}

								/* Templates tab */

								.template_option_row {
									padding: 0 5px;
								}

									.template_option_vessel {
										padding: 5px;
									}

									.template_option {
										padding: 0;
										border-radius: 5px;
										height: 100px;
										font-size: 16px;
										text-align: center;
										padding-top: 66px;
										border: 2px solid #561a4c;
									}

										.select_vessel {
											border: 2px solid #561a4c;
											border-radius: 5px;
											height: 45px;
										}

											.select_span_default {
												position: relative;
												display: block;
												cursor: pointer;
												padding: 6px 10px 0;
												border-radius: 5px;
												height: 45px;
												font-size: 18px;
											}

											.select_span_default:after {
												background-image: url('../assets/icons/arrowdown.svg');
												background-size: 20px 20px;
												height: 20px;
												width: 20px;
												position: absolute;
												right: 12px;
												top: 12px;
												content: '';
											}

											.select_span_default_elapse:after {
												background-image: url('../assets/icons/arrowup.svg');
												top: 11px;
											}

											.select_span_default:focus {
												opacity: .5;
											}

											.select_span_default:focus:after {
												opacity: .5;
											}

											.select_ul {
												border: 2px solid #561a4c;
												margin: 20px 0 0;
												border-radius: 5px;
												list-style: none;
												min-height: 45px;
												display: none;
												position: relative;
											}

												.select_li_first {
													position: relative;
												}

												.select_li_first:after {
													content: '';
													display: block;
													position: absolute;
													top: -6px;
													left: 12px;
													width: 10px;
													height: 10px;
													background: #81d5df;
													border-right: 2px solid #561a4c;
													border-bottom: 2px solid #561a4c;
													-moz-transform: rotate(-135deg);
													-webkit-transform: rotate(-135deg);
												}

												.select_li {
													height: 35px;
													padding: 1px 5px;
												}

												.select_li:hover {
													background-color: #92dbe4;
												}

												.select_li:focus {
													background: #92dbe4;
												}

													.select_li:focus span {
														opacity: .5;
													}

												.select_li_first:hover {
													border-top-left-radius: 2px;
													border-top-right-radius: 2px;
													background-color: #92dbe4;
												}

												.select_li_last:hover {
													border-bottom-left-radius: 2px;
													border-bottom-right-radius: 2px;
													background-color: #92dbe4;
												}

												.select_li_first_hover_triangle:after {
													background: #92dbe4;
												}

													.select_li_span {
														display: block;
														cursor: pointer;
														padding: 2px 5px;
														font-size: 18px;
													}

								/* Colorpicker */

								.colorpicker-bs-popover {
									background: #81d5df !important;
									border: 1px solid #561a4c !important;
									border-radius: 6px !important;
									left: -34px !important;
								}

									.popover-body {
										background: #81d5df !important;
										border: 1px solid #561a4c !important;
										border-radius: 5px !important;
										font-family: 'Barlow', sans-serif !important;
									}

										.arrow {
											display: none !important;
										}

										.colorpicker-saturation,
										.colorpicker-hue,
										.colorpicker-guide,
										.colorpicker-alpha,
										.colorpicker-bar {
											border: 1px solid #561a4c !important;
											-webkit-box-shadow: none !important;
											box-shadow: none !important;
										}

								.colorpicker_preview {
									position: absolute;
									top: -1px;
									right: -59px;
									height: 177px;
									width: 52px;
									background-color: #81d5df;
									border: 2px solid #561a4c;
									border-radius: 5px;
									padding: 11px;
								}

									.colorpicker_preview_segments {
										border: 1px solid #561a4c;
										height: 100%;
									}

										.colorpicker_preview_segment {
											width: 100%;
											height: 25%;
										}

								/* Other tab */

								.tab_edit_button,
								.tab_delete_button {
									margin-bottom: 30px;
									background-color: #81d5df;
									font-size: 17px;
									font-weight: 600;
									color: #561a4c;
									width: 100%;
									height: 47px;
									border-radius: 42px;
									border: 2px solid #561a4c;
								}

								.tab_edit_button:hover,
								.tab_delete_button:hover,
								.tab_edit_button:focus,
								.tab_delete_button:focus {
									background-color: #92dbe4;
								}

								.tab_edit_button:visited,
								.tab_delete_button:visited {
									background-color: #81d5df;
								}

	/* Inputs */

	input.settings_input {
		width: 100%;
		height: 45px;
		border-radius: 4px;
		font-size: 18px;
		margin-bottom: 30px;
		color: #561a4c;
		padding: 0 10px;
		background: none;
		border: 2px solid #561a4c;
	}

	input.settings_css_input {
		width: 100%;
		height: 45px;
		border-radius: 4px;
		font-size: 18px;
		margin-bottom: 30px;
		color: #561a4c;
		padding: 0 10px;
		background: none;
		border: 2px solid #561a4c;
	}

	input.settings_input:focus,
	input.settings_css_input:focus {
		border: 2px solid #de86ff;
	}

		input.settings_input + label {
			position: absolute;
			left: 8px;
			background-color: #0085c1;
			padding: 0 5px;
			margin: 13px 51px;
			transition: transform 200ms ease;
			pointer-events: none;
		}

		input.settings_css_input + label {
			position: absolute;
			left: 8px;
			background-color: #0085c1;
			padding: 0 5px;
			margin: 13px 51px;
			transition: transform 200ms ease;
			pointer-events: none;
		}

		input.settings_input + label {
			margin: 9px 7px 13px 53px;
			background-color: #81d5df;
			font-size: 18px;
		}

		input.settings_css_input + label {
			margin: 9px 7px 13px 0;
			background-color: #81d5df;
			font-size: 18px;
		}

		input.settings_input:focus + label,
		input.settings_input + label.freeze,
		input.settings_css_input:focus + label,
		input.settings_css_input + label.freeze {
			font-size: 15px;
			font-weight: 400;
			-webkit-transition: 0.1s ease-in;
			-moz-transition: 0.1s ease-in;
			transition: 0.1s ease-in;
			transform: translateY(-1.30em);
		}

	/* Checkboxes */

	.checkbox_btn {
		background-color:#d972ff;
		min-width: 165px;
		height: 45px;
		border-radius: 42px;
		padding-left: 30px;
		border: none;
		font-size: 16px;
		color: #153243;
		margin-left: -3px;
		font-weight: bold;
	}

	.checkbox_btn_colors {
		padding-left: 34px;
		min-width: 178px;
	}

	.checkbox_btn:hover,
	.checkbox_btn:focus	{
		background: #de86ff;
	}

	.checkbox_btn:visited {
		background: #d972ff;
	}

	.formfield_color,
	.formfield_checkbox_titles,
	.formfield_checkbox_colors {
		display: inline;
	}

	.formfield_color {
		position: relative;
	}

	.formfield_checkbox_titles:before {
		background-image: url('../assets/icons/yes.svg');
		background-size: 20px 20px;
		height: 20px;
		width: 20px;
		position: absolute;
		left: 5px;
		margin: 12px 0 0 59px;
		content: '';
		z-index: 1;
	}

	.formfield_checkbox_colors:before {
		background-image: url('../assets/icons/yes.svg');
		background-size: 20px 20px;
		height: 20px;
		width: 20px;
		position: absolute;
		left: 5px;
		margin: 12px 0 0 59px;
		content: '';
		z-index: 1;
	}

	.checked:before {
		background-image: url('../assets/icons/yes.svg');
	}

	.unchecked:before {
		background-image: url('../assets/icons/no.svg');
	}

	.formfield_checkbox_titles:after,
	.formfield_checkbox_colors:after {
		content: '';
		position: absolute;
		background-color: #de86ff;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		transition: all 0.3s ease;
		height: 37px;
		width: 37px;
		border-radius: 50%;
		left: 56px;
		margin: 4px 0 0;
	}

/* Breakpoints */

@media (max-width: 1700px) {

	.search_grid {
		flex: 0 0 33.333333% !important;
		max-width: 33.333333% !important;
	}

	.profile_container {
		flex: 0 0 41.666667% !important;
		max-width: 41.666667% !important;
	}
}

@media (max-width: 1500px) {

	.profile_container {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
}

@media (max-width: 1199.98px) {

	.search_vessel,
	.search_results_vessel	{
		padding: 0 0 0 3px;
	}

	.all_profiles_vessel {
		padding: 0 20px 0 20px;
	}

		.new_button {
			margin: 0;
		}

	.container_fluid_account {
		padding: 0 35px;
	}

		.search_grid,
		.profile_container {
			flex: 0 0 50% !important;
			max-width: 50% !important;
		}
}

@media (max-width: 991.98px) {

	.profile_container {
		flex: 0 0 58.333333% !important;
		max-width: 58.333333% !important;
	}
}

@media (max-width: 850px) {

	.search_grid,
	.profile_container {
		flex: 0 0 66.666667% !important;
		max-width: 66.666667% !important;
	}
}

@media (max-width: 767.98px) {

	.search_grid,
	.profile_container {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 768px) {

	.searchbar_vessel {
		padding-right: 0;
	}

	.profile_container {
		margin-right: 0;
	}
}

@media (max-width: 575.98px) {

	.search_grid h1,
	.profile_header h1 {
		font-size: 60px;
		word-break: break-all;
	}

	.search_grid p,
	.profile_header p {
		margin: 0 0px 30px 0;
		word-break: break-all;
	}

	.profile_container {
		margin-right: 0;
	}

		.profile_vessel ul {
			margin: 0 0 29px;
		}

			.profile_vessel h6,
			.profile_vessel_email {
				word-break: break-all;
			}

			.profile_image_vessel {
				margin: 0 0 40px;
			}

			.datalist_vessel {
				padding-left: 15px;
				padding-right: 15px;
			}

				.datalist {
					word-break: break-all;
				}

		.tabs_btn {
			font-size: 14px;
			padding-top: 6px;
		}

		.checkbox_btn {
			width: 100%;
			font-size: 16px;
		}

		.tab_edit_button,
		.tab_delete_button {
			font-size: 16px;
		}
}

@media (max-width: 501px) {

	.searchbar_vessel {
		min-width: initial;
	}

	.settings_vessel h6	{
		font-size: 15px;
	}

	.tabs_btn {
		font-size: 12px;
		padding-top: 8px;
	}

	.select_span_default {
		font-size: 16px;
		padding-top: 7px;
	}

	.select_li_span {
		font-size: 16px;
		padding-top: 5px;
	}
}