/* TODO: once legacy pages are all updated to new style, combine this file into Site.css and remove Site-knockout.css and Site-legacy.css */
[data-bind*="hideUntilBound:"]:not(.bound) {
	display: none;
}

.btn-xs { /* .btn-xs is not defined in Bootstrap 4+ */
	/* Set padding like in Bootstrap 3 */
	padding: 1px 5px;
	/* Set other styles like in .btn-sm */
	font-size: 0.875rem;
	line-height: 1.5;
	border-radius: 0.2rem;
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
}

[disabled] {
	cursor: not-allowed;
}

.clickable:hover {
	cursor: pointer;
}

.mb-0-lastchild > :last-child {
	margin-bottom: 0 !important;
}

.form-group > label {
	display: block;
}

.form-group > label,
table.table th {
	font-weight: 600;
}

.form-group.form-group-condensed,
.form-groups-condensed .form-group {
	margin-bottom: 10px;
}

.form-group.form-group-condensed > label,
.form-groups-condensed .form-group > label {
	margin-bottom: 0;
}

.table-mobile > thead > tr > th,
.table-mobile > tbody > tr > td {
	padding-top: 0;
	padding-bottom: 0;
	height: 33px; /* height works like min-height on td/th */
	vertical-align: middle;
}

/* Emphasise anchor for better discoverability on touch device */
.touch-link {
	font-weight: bold;
	text-decoration: underline;
}

.cell-min {
	width: 1%;
}

.btn-context-xs {
	/* .fas */
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	/* custom */
	font-size: 0.875rem;
	line-height: 1.3;
	margin: 4px 0;
	padding: 0.1rem 0.25rem;
}

.btn-context-xs:after {
	content: "\f0d7";
}

a.editable {
	/* .text-reset */
	color: inherit !important;
}

a.editable:after {
	/* Indicate editable with icon */
	content: "\f304"; /* pen (f303 is pencil-alt) */
	/* .fas */
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	/* custom */
	font-size: 0.8em;
	margin-left: 4px;
	opacity: 0.33;
	vertical-align: text-bottom;
}

a.editable:hover,
a.editable:active {
	/* Modify styles on hover/active */
	color: #007bff !important; /* .text-primary */
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: double;
	text-decoration-thickness: from-font;
}

a.editable:hover:after,
a.editable:active:after {
	opacity: 1;
}

/* Highlight */
:root {
	--color-highlight-success: #28a745;
	--color-highlight-warning: #ffc107;
	--color-highlight-danger: #dc3545;
	--highlight-duration: 2.5s;
	--attention-pulse-down-animation: attention-pulse-down 0.5s ease-in-out 3 both;
}

.attention-pulse-down {
	animation: var(--attention-pulse-down-animation);
}

@keyframes highlight-success {
	5% {
		background: var(--color-highlight-success);
	}
}

.highlight-success {
	animation: highlight-success var(--highlight-duration);
}

@keyframes highlight-warning {
	5% {
		background: var(--color-highlight-warning);
	}
}

.highlight, /* `.highlight` class is the default used in bindings */
.highlight-warning {
	animation: highlight-warning var(--highlight-duration);
}

@keyframes highlight-danger {
	5% {
		background: var(--color-highlight-danger);
	}
}

.highlight-danger {
	animation: highlight-danger var(--highlight-duration);
}

/* NB: combining animation classes must be done manually (i.e. specify combination here and combine animations in rule) */
.highlight-success.attention-pulse-down {
	animation: highlight-success var(--highlight-duration), var(--attention-pulse-down-animation);
}
.highlight-warning.attention-pulse-down {
	animation: highlight-warning var(--highlight-duration), var(--attention-pulse-down-animation);
}
.highlight-danger.attention-pulse-down {
	animation: highlight-danger var(--highlight-duration), var(--attention-pulse-down-animation);
}

/* For use on a .form-row with .col-auto children */
.form-row.object-attributes {
	text-align: center;
	justify-content: space-around;
}

/* For use on a .form-row with .form-group grandchildren */
.form-row.single-col {
	text-align: center;
}

.form-row.single-col > .col > .form-group {
	margin-bottom: var(--form-group-b);
}

.form-row.single-col > .col > .form-group > input,
.form-row.single-col > .col > .form-group > select,
.form-row.single-col > .col > .form-group > .input-group {
	max-width: var(--single-input-w);
}

.form-row.single-col > .col > .form-group > input {
	display: inline-block;
}

.form-row.single-col > .col > .form-group > .input-group {
	display: inline-flex;
}