/* .alert *******************************/

.alert {

	.hr {
		margin-top: 20px;

		span {
			font-size: 0.8rem;
			font-weight: 900;
			padding-right: 10px;
			position: relative;
			text-transform: uppercase;
			top: -13px;
		}
	}

	&.alert-info {
		
		.hr {
			border-top: 1px dashed #055160;

			span {
				background-color: #cff4fc;
			}
		}
	}
}

/* .accordion *******************************/

.accordion {
	--bs-accordion-active-bg: #f9f9f9;
	--bs-accordion-active-color: #333;
	--bs-accordion-active-bg: #f9f9f9;
	--bs-accordion-btn-focus-box-shadow: none;
}

.accordion h2.accordion-header {
	margin-bottom: 0;
}

.accordion .accordion-body {
	margin: 0;
	padding: 0;
}

.accordion-button {
	background-color: #f9f9f9;
}

/* *******************************/

.step {
  background-color: #e5f8fb;
  border: 1px solid #00bad6;
  border-radius: 5px;
  color: #333;
  font-size: 1rem;
  padding: 2px 10px;
  text-transform: uppercase;
}

/* *******************************/

.row-pagination {
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top: 0;
}

/* *******************************/

.result-window {
	max-height: 300px;
}

.results img {
	height: 15px;
	opacity: 0.5;
	transition: all ease 0.2s;
	width: auto;
}

/* *******************************/

.checklist {
	margin: 30px 0;
	position: relative;
}

.checklist .line {
	background-color: #ccc;
	height: 0.5px;
	left: 20px;
	position: absolute;
	top: 10px;
	width: calc(100% - 40px);
	z-index: 1;
}

.checklist .tasks {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}

.checklist .tasks .task {
	line-height: 1rem;
	text-align: center;
}

.checklist .tasks .task .status {
	background-color: #fff;
	display: inline-block;
	margin-bottom: 5px;
}

.checklist .tasks .task .status img {
	height: 20px;
	width: auto;
}

.checklist .tasks .task .label {
	font-size: 0.8rem;
}

/* *******************************/

.avatar {
	position: relative;
	text-align: center;
	transition: all ease 0.2s;
}

.avatar img {
	border-radius: 100px;
}

.avatar .btn-avatar-upload {
	background-color: #00bad6;
	border-radius: 3px;
	bottom: 0;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	left: 50%;
	padding: 0 5px;
	position: absolute;
	transform: translate(-50%);
	transition: all ease 0.2s;
}

.avatar .btn-avatar-upload:hover {
	background-color: #0198af;
	opacity: 1;
	text-decoration: none;
}

/* *******************************/

.no-selections {
	padding: 20px;
	text-align: center;
}

/* .extension *******************************/

table tbody tr td.bg-extension,
table tbody tr th.bg-extension {
	background-color: #fff3cd;
}

table tbody tr:hover td.bg-extension,
table tbody tr:hover th.bg-extension {
	background-color: #e5f8fb;
}

.extension img {
	height: 15px;
	opacity: 1;
}

/* *******************************/

.status-report {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: flex-start;
}

.status-report .col1 {
	margin-right: 30px;
	padding-right: 40px;
}

.status-report .record {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	width: 100%;
}

.status-report .status {
	width: 120px;
}

.status-report .date {
	background-color: #f6f6f6;
	border: 1px solid #999;
	border-radius: 3px;
	color: #444;
	font-size: 0.9rem;
	text-align: center;
	width: 80px;
}

.status-report .note {
}

.status-report img {
	height: 20px;
	width: auto;
}

@media (min-width: 645px) and (max-width:767px)  {

	.status-report {
		flex-direction: row;
	}
	.status-report .col1 {
		border-right: 1px dashed #ccc;
	}
}

@media (min-width: 1200px) and (max-width:1399px)  {

	.status-report {
		flex-direction: row;
	}
	.status-report .col1 {
		border-right: 1px dashed #ccc;
	}
}

@media (min-width: 1700px) {

	.status-report {
		flex-direction: row;
	}
	.status-report .col1 {
		border-right: 1px dashed #ccc;
	}
}

/* *******************************/

.tooltips {
	cursor: pointer;
	text-decoration: underline dashed 0.5px #999;
}

/* *******************************/

ol.footnotes {
	font-size: 0.8rem;
	padding: 15px;
}

/* *******************************/

label div {
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.5;
}

table tbody tr.collapse:hover td,
table tbody tr.collapse:hover th {
	background-color: #fff;
}

table tfoot tr.collapse table td,
table tbody tr.collapse table th {
	background-color: #fff;
}

/* *******************************/

table tfoot tr th {
	background-color: #f9f9f9 !important;
}

/* *******************************/

form.search {
	align-items: center;
	display: flex;
	gap: 10px;
}

form.search .qs {
	position: relative;
	width: 100%;
}

form.search .qs .btn-clear {
	position: absolute;
	right: 10px;
	top: 6px;
}

form.search.search-date {
	width: 175px;
}

/* *******************************/

.form-check-input {
	border-color: #999;
}

.form-check-input:checked {
	background-color: #00bad6;
	border-color: #00bad6;
}

/* *******************************/

.blocks {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-bottom: 20px;
}

.blocks .block:not(:last-child) {
	min-width: 200px;
}

.block .opts img {
	height: 15px;
}

@media (min-width: 1400px) {

	.blocks {
		flex-direction: row;
	}
}

/* *******************************/


.version {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	bottom: 20px;
	color: #999;
	font-size: 0.7rem;
	font-weight: bold;
	left: 20px;
	padding: 0 5px;
	position: absolute;
	transition: all ease 0.2s;
}

.version:hover {
	background-color: #000;
	color: #ccc;
	text-decoration: none;
}

/* *******************************/

span.required {
	color: #dc3545;
	font-weight: 600;
}

/* *******************************/

.sort {
	color: #444;
	position: relative;
}

.sort-align-right {
	color: #444;
	position: relative;
}

.sort:hover, .sort-align-right:hover {
	color: #00bad6;
	text-decoration: none;
}

.sort-down::after {
	background: right / 12px 12px no-repeat url('../../assets/images/icons/arrow-down-line-black.svg');
	content: '';
	height: 12px;
	opacity: 0.5;
	position: absolute;
	right: -15px;
	top: 4px;
	transition: all ease 0.2s;
	width: 12px;
}

.sort-down:hover::after {
	opacity: 1;
}

.sort-up::after {
	background: right / 12px 12px no-repeat url('../../assets/images/icons/arrow-up-line-black.svg');
	content: '';
	height: 12px;
	opacity: 0.5;
	position: absolute;
	right: -15px;
	top: 4px;
	transition: all ease 0.2s;
	width: 12px;
}

.sort-up:hover::after {
	opacity: 1;
}

/* *******************************/

.text-negative {
	color: #dc3545 !important;
}

.text-positive {
	color: #198754 !important;
}

.text-neutral {
	color: #333;
}

.text-small {
	font-size: 0.9rem;
}

img.status {
	height: 16px;
	opacity: 1;
}

#legacy-message {
	margin-bottom: 0;
}

/* *******************************/

.table-row-selected td {
	background-color: #fff3cd;
}

/* *******************************/

.rotations {
	align-items: center;
	background-color: #e3e3e3;
	border: 1px solid #d3d3d3;
	border-radius: 3px;
	display: flex;
	margin-top:2px;
	min-width: 150px;
	width: 100%;
}

.rotations div {
	background-color: #00bad6;
	border-radius: 3px;
	height: 20px;
}

/* *******************************/

.contact-type {
	margin-bottom: 20px;
}

.contact-type span {
	border-radius: 10px;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 2px 12px;
	text-transform: uppercase;
}

.contact-type span.primary {
	border: 1px solid #198754;
	color: #198754;
}

.contact-type span.other {
	background-color: #fff;
	border: 1px solid #999;
	color: #333;
}

/* *******************************/

.notify-users {
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 5px;
	display: none;
	padding: 10px;
}

.notify-users-list {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	max-height: 150px;
	overflow: auto;
	padding: 10px;
}


/* *******************************/

.label-base-width {
	font-weight: 700 !important;
}

@media (min-width: 768px) {
	.label-base-width {
		flex-basis: 50%;
	}

	.label-base-width + div {
		flex-basis: 50%;
	}
}

/* .toggle *******************************/

.toggle {
	border: 1px solid #ccc;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 10px;
	padding: 10px 20px;
	user-select: none;

	.header {
		align-items: flex-start;
		display: flex;
		font-weight: 600;
		gap: 10px;

		img {
			height: 16px;
			margin-top: 5px;
			width: auto;
		}
	}

	.contents {
		display: none;
		padding-top: 10px;
	}

	.contents-show {
		display: block;
	}
}

.toggle:hover {
	background-color: rgba(0,185,242,0.1);
	border: 1px solid #00b9f2;
}

@media (min-width: 1000px) {

	.toggle {
		transition: all ease 0.2s;
	}
}