/*
Temporarily removed. HTML in asset.html
.icons-layer {
	max-width: 100%;
  position: absolute;
  top: -100px;
  z-index: 0;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0.2;
  pointer-events: none;
}
*/

p.muted {
	color: light-dark(#777, #aaa);
}

p.centered {
	text-align: center;
}

.margins {
	margin: calc( var(--basic-gap) / 2 );
}

.vertical-margins {
	margin: calc( var(--basic-gap) / 2 ) 0;
}

.chat-message {
	margin: 16px 0px;
}

/* HTMX request indicators */

.show-during-request {
	display: none;
}

.htmx-request .show-during-request {
	display: inline;
}

.hide-during-request {
	display: inline;
}

.htmx-request .hide-during-request {
	display: none;
}

.input {
	&.datetime {
		min-width: 0; /* let it shrink below intrinsic width */
		width: 100%;
		text-align: center;
		margin: 0;
	}
}

#versions table {
    text-align: center;
}

#versions table th, #versions table td {
    text-align: center;
    vertical-align: middle;
}

.highlighted {
	outline: 2px solid #f06;
	transition: outline 0.2s;
}

.button-disabled {
    opacity: 0.5;
    cursor: default;
}

.markdown-body {
	/* Should match asset.css .asset-body */
	font-size: 1em;
	line-height: 1.618;
	ul, ol {
		margin-left: 36px;
	}
	h2, h3, h4, h5, h6 {
		margin-top: 1em;
		margin-bottom: 1em;
		line-height: 1.25;
	}
	h1 {
		margin-bottom: 0.5em;
		margin-top: 0;
	}
	h2 {
		padding-bottom: .3em;
		font-size: 1.5em;
		border-bottom: 1px solid rgba(149, 149, 149, 0.3019607843);
	}
	h3 {
		font-size: 1.25em;
	}
	h4 {
		font-size: 1em;
		margin-bottom: 0.5em;
	}
	a {
		text-decoration: underline;
		color: #478cbf;
	}
	p {
		margin-bottom: 1em;
	}
	li {
		margin-top: .25em;
	}
	img {
		max-width: 100%;
	}
}

.chat {
	display: flex; 
	flex-direction: column; 
	background-color: light-dark(#e7e7e7, #c0c0c023); 
	padding: 10px; 
	border-radius: 5px; 
	margin: 5px 0;

	.profile {
		background-color: light-dark(#b3b3b3, #1e1e1e); 
		padding: 15px; 
		border-radius: 5px; 
		margin: 5px 0;
	}
}