/* Publish button. */
#major-publishing-actions {
	display: grid;
}

/* Story. */
li.story {
	float: left;
	margin: 5px;
	width: 228px;
}

li.story.selected label {
	background: #5b9dd9;
	color: #eee;
}

li.story input {
	display: none !important;
}

li.story label {
	background: #fafafa;
	border: 1px solid #eee;
	display: flex;
	flex-direction: column;
	height: 257px;
	padding: 8px 8px 16px 8px;
	text-align: left;
	overflow: hidden;
	border-radius: 8px;
}

li.story label:hover {
	border: 1px solid #5b9dd9;
}

li.story label span.title {
	display: block;
	font-weight: bold;
	padding: 5px 0;
	font-size: 110%;
	flex-grow: 1;
}

li.story label span.grey {
	color: #999;
}

div.clear {
	clear: left;
}

div.publishing-actions {
	background: #f6f7f7;
	border-top: 1px solid #dcdcde;
	clear: both;
	display: flex;
	justify-content: center;
	margin: -12px;
	margin-top: 10px;
	padding: 10px;
}

.button-shorthand {
	background-color: #000;
	border: 1px solid #000;
	border-radius: .9em;
	color: #fff;
	cursor: pointer;
	font-family: poppins, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	padding: 1em 2em;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.button-shorthand:hover {
	background-color: #fff;
	border-color: #000;
	color: #000;
}

.button-shorthand:disabled {
	pointer-events: none;
}

#codearea {
	border: 1px solid #999;
	font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
	height: 300px;
	width: 100%;
}

#abstract {
	border: 1px solid #999;
	height: 200px;
	width: 100%;
}

ul.stories {
	max-height: 400px;
	min-height:100px;
	overflow-y: scroll;
	overscroll-behavior: contain;
}

ul.stories img {
	height: 110px;
	border-radius: 10px;
	object-fit: cover;
	width: 100%;
	margin-bottom: 5px;
}

p.warning {
	color: red;
	font-weight: bold;
}

.filter-container {
	display: flex;
	justify-content: space-between;
}

.sort.button-secondary {
	background: transparent;
	color: #666;
	border-color: #aaa;
}

.sort .sort-icon::before {
	content: "(new to old)";
	padding-left: 3px;
}

.sort .sort-icon::after {
	content: "\f347";
	font: normal 11px/1 dashicons;
	padding-left: 3px;
}

.sort.asc .sort-icon::before {
	content: "(old to new)";
	padding-left: 3px;
}

.sort.asc .sort-icon::after {
	content: "\f343";
	font: normal 11px/1 dashicons;
	padding-left: 3px;
}

.sort.desc .sort-icon::before {
	content: "(new to old)";
	padding-left: 3px;
}

.sort.desc .sort-icon::after {
	content: "\f347";
	font: normal 11px/1 dashicons;
	padding-left: 3px;
}

#shorthand_wpt_shorthand_story .search {
	border-radius: 8px;
	border-color: transparent;
	padding-left: 30px;
	background: #eee url("../images/search.svg") no-repeat 10px;
	background-size: 12px;
	line-height: 23px;
	padding-bottom: 3px;
}

#shorthand_wpt_shorthand_story .inside {
	overflow: hidden;
}

.loading-bar{
	position: absolute;
	
	right:3em;
	background: #fff;
	padding: 0.5em;
	border: 1px solid #c3c4c7;
	bottom:-5em;
	transition: bottom ease-out 0.2s;
}

.loading-bar.show {
	bottom: 1em;
}

@keyframes matrix {
	0% {background-position: 0% 100%, 50% 100%, 100% 100% }
	100% {background-position: 0% 0%, 50% 0%, 100% 0% }
  }

.loader {
	display:inline-block;
	width:15px;
	height:10px;
	background:
	  linear-gradient(#0000 calc(1*100%/6),#555 0 calc(3*100%/6),#0000 0),
	  linear-gradient(#0000 calc(2*100%/6),#555 0 calc(4*100%/6),#0000 0),
	  linear-gradient(#0000 calc(3*100%/6),#555 0 calc(5*100%/6),#0000 0);
	background-size:3px 400%;
	background-repeat: no-repeat;
	animation:matrix 1s infinite linear;
}

.errorMsg{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-style: italic;
	color:#333;
}