html {
  box-sizing: border-box;
  font-size:14px;
}
*, *:before, *:after {
  box-sizing: inherit;
}
#mm_container {
  position:relative;
}
#mm_container {
  display:flex;
  flex-flow: row wrap; 
  justify-content: flex-start;
}
.mm_item {
  flex: auto; 
  width:18%;
  min-width:100px;
  max-width:200px;
      position: relative;
    padding-bottom: 6em;
	margin-bottom:3em;
	margin-right:1em;
  background-size:auto;
  background-position:center center;
  background-repeat:no-repeat;
}
.mm_item.selected {
  background:#ddd;
  outline:1px solid #ccc;
}
.pull-right {
	float:right;
}
#main {
	margin-top:1rem;
}
.navbar-item img {
    max-height: 3.75rem;
}

.mm_push_bottom {
	position:absolute;
	bottom:0;
	width:100%;
}
.mm_item img {
  display:block;
  max-width:100%;
  transition:0.2s all ease;
  margin:0 auto;
  position:relative;
  
}

.mm_item:hover {
  cursor:pointer;
}
.mm_item:hover img {
  transform:scale(1.04) ;
}

.mm_item .title {
  text-align:center;
  overflow-wrap: break-word;
  padding:0.2em;
  margin-bottom:2em;
  background:rgba(255,255,255,0.8);
}

div.select {
	width:100%;
}

input.mm_url {
	width:100%;
	font-size:70%;
	display:block;
}

.mm_dirname {
  text-align:center;
  overflow-wrap:break-word;
}

#content_search_tags_wrap .ss-main {
	min-width:12rem;
}
div .ss-main :is(.ss-multi-selected, .ss-single-selected) {
	min-height:35px; /* get slim select to match bulma input field heights */
}

.notification {
	transform: translateY(1rem);
}

.upload_preview img {
	object-fit: contain;
	aspect-ratio: 1;
	display:inline-block;
	width:12rem;
	height:12rem;
}
.upload_details {
    margin: 1rem;
}
.upload_field {
	display:flex;
	margin-top: 1rem;
}
.upload_field label {
	width:7rem;
	display:inline-block;
	text-align: right;
    padding-right: 1rem;
}

.mm_item.pdf {
  background-image:url(http://www.stdicon.com/pdf);
}
.mm_item.zip {
  background-image:url(http://www.stdicon.com/zip);
}

div#content_search_controls {
	display:flex;
	gap:1rem;
}
div#content_search_controls .field {
	min-width:5rem;
}

html > footer {
	background:rgba(0,0,0,0.1);
	padding:3rem;
	margin-top:2rem;
}
p.center {
	text-align:center;
}

span.user_list, td.note_td, .lighter_note, .unimportant, .usage, td.tag_parent_td {
	font-size:70%; opacity:0.6;
}

.grip {
	display:inline-block;
	padding:0.6rem;
	border-radius:0.2rem;
	border:1px solid rgba(0,0,0,0.2);
}
.grip:hover {
	cursor:move;
}

.toggle_wrap {
	margin-top:1rem;
}
.toggle_wrap.hidden {
	display:none;
}

/* image selector */

img.lazy {
	height:0;
}
img.lazy.loaded {
	height:auto;
	padding-bottom:0;
}
.image_selector.hidden {
	display:none;
}
.image_selector {
	display:flex; 
	overflow:scroll; 
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	padding:1rem;
	background:rgba(255,255,255,0.99);
	z-index: 99;
	flex-wrap:wrap;
}
.image_selector img { max-width:300px;object-fit:contain; } 
img.image_selector_thumb{object-fit:contain; width:300px;}
.selected_image_wrap.active p { display:none; }
.selected_image_wrap img { display:none; }
.selected_image_wrap.active img { display:inline-block;}

div.field.hidden {
	display:none;
}
.field.required label::after {
    opacity:0.5;
    content: ' (req)';
    font-size: 0.7em;
}

.select.is-multiple {
	width:100%;
}
/* tree */
.available_tree_items {
				max-width:25%;
			}
			.available_tree_items,.tree_field_tree_wrap {
				margin:1rem;
				border:2px solid rgba(0,0,0,0.1);
				padding:1rem;
			}
			.tree_field_tree_wrap {
				width:100%;
			}
			.tree_field_node_drop {
				display:inline-block;
				color:white;
				margin:0.5rem; 
				padding:0.5rem; 
				/* background:#bdb;  */
				border-radius:0.3rem;
				border: 2px dashed rgba(0,0,0,0.1);
				color:rgba(0,0,0,0.2);
			}
			.before_after_node_drop {
				display:inline-block;
				color:white;
				margin:0.5rem; 
				padding:0.5rem; 
				/* background:#edb;  */
				border-radius:0.3rem;
				border: 2px dashed rgba(0,0,0,0.1);
				color:rgba(0,0,0,0.2);
			}
			.tree_item:hover {
				cursor:move;
			}
			.disabled.tree_item {
				opacity:0.5;
			}
			.disabled.tree_item:hover {
				cursor:not-allowed;
			}
			.node_children {
				margin-left:3rem;
			}
			.tree_field_node.root > div:first-child {
				border-bottom:2px solid rgba(0,0,0,0.1);
			}
			.root > div > .node_title {
				display:none;
			}
			.node_title {
				margin-top:1em;
				margin-bottom:0;
				flex-shrink: 0;
   				width: 8em;
				border-bottom: 1px solid rgba(0,0,0,0.1);
			}
			.node_title:hover {
				cursor:move;
			}
			.tree_field_node_drop_wrap {
				display: flex;
				align-items: center;
			}
			.tree_field_container {
				display:flex;
				align-items: flex-start;
			}


/* editor misc */

.rich_image.pull-left {
	float:left;
}
.rich_image.pull-right {
	float:right;
}
.rich_image_figure.pull-right .rich_image.pull-right {
	float: none;
}
.rich_image_figure.pull-left .rich_image.pull-left {
	float: none;
}

/* clean up multiselect using slimselect library */
.select:not(.is-multiple):not(.is-loading)::after {
	display:none;
}

/* media popup */
.media_selector {
    height: 90vh;
    overflow: auto;
}
.media_selector_list {
	display:flex;
	flex-wrap:wrap;
}
.media_selector_selection {
	display:flex;
	flex-direction:column;
	position:relative;
}
.media_selector_selection img, .media_selector_selection span {
	width:200px;
}
.media_selector_list li {
	padding:0.5rem;
}
.media_selector_selection span {
	pointer-events:none;
	width:100%;background:rgba(0,0,0,0.9);
	padding:0.5rem;
	color:white;
	font-size:0.9rem;
	position:absolute;
	bottom:0;
	left:0;
}

label.checkbox {
    font-weight: bold;
}

h1.title.sticky {
	position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 0.5em;
	padding-top: 0.5em;
}

.modal-background {
	background:rgba(0,0,0,0.8);
}
.modal-content form {
	padding:1rem;
	background-color: var(--bulma-modal-card-head-background-color);
	border-radius:0.5rem;
}

section#version_comparisons {
    display: flex;
    max-width: 100%;
    overflow: scroll;
    gap: 4rem;
    /* border-left: 2px solid #aaa; */
    padding: 2rem;
}

select[data-ssid] {
    display: block !important;
    width: 0 !important;
    opacity: 0 !important;
    height: 0 !important;
	padding: 0 !important;
}

div:has(> .autogrowingtextarea) {
	display: inline-grid;
	vertical-align: top;
	align-items: center;
	position: relative;
	width: 100%;
	align-items: stretch;

	&::after {
		content: attr(data-value) ' ';
		visibility: hidden;
		white-space: pre-wrap;
		padding: 1em;
	}

	&::after, textarea {
		width: auto;
		min-width: 1em;
		grid-area: 2 / 1;
		max-height: 70vh;
	}

	textarea {
		height: 100% !important;
		width: 100% !important;
		max-width: 100%;
		min-width: 100%;
		resize: none;
	}
}