/* STYLE VARIABLE OVERRIDES FOR THE EDITOR PAGE. DO NOT EDIT */

body {

	/* group buttons options */
	--buttons-per-row:        4;      /* number of group buttons per row, suggested 4-6 */      
	--button-height:          80px;   /* height of one group button */

	/* artworks grid options */
	--artworks-align:         middle; /* vertical align if the artworks are of different height, they will "magnet" to: top, middle or bottom */
	--artwork-box-shadow:     none;   /* shadow. none' or e.g. 0px 0px 8px RGBA(0,0,0,0.1); use the one below if you have lots of weird contoured images */	
	--artwork-drop-shadow:    none;   /* RAM-hungry: use as alternative for the outlier case above. don't use both. none' or e.g. drop-shadow(0px 0px 8px RGBA(0,0,0,0.1)). */

}

/*
Below are some hack-in overrides for the "usual" stuff from the actual index page styles,
as well as some additional bits and bobs for the editor to work. Don't change unless you
want your editor page to suddenly turn into a piece of crap.. it's barely holding together
as is, as far as i can see :'D
*/

#header {
	height: auto;
}

#artworkViewer {
	height: auto;
	margin-top: 0;
	top: 50%;
	transform: translateY(-50%);	
}

#formWrapper {
	width: calc(100% - var(--sizing) - var(--sizing));
	height: calc(100% - var(--sizing) - var(--sizing));
	position: relative;
	top: 0;
	left: 0;
	padding: var(--sizing);
}

#bottomButtonWrapper {
	position: fixed;
	bottom: 32px;
	width: 50%;
	left: 25%;
	text-align: center;
	display: table;
	box-shadow: 0px 0px 10px RGBA(0,0,0,0.3);
}

.bottomButton {
	height: 100%;
	background-color: var(--col-buttonbg);
	color: var(--col-text);
	font-family: var(--font-big);
	font-size: var(--font-btn-size);
	border: var(--border-width) solid var(--col-highlight);
	transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
	position: relative;
	display: table-cell;
	padding: 8px;
	border: 4px solid var(--col-body);
	border-right: 0;
}

.bottomButton:last-child {
	border-right: 4px solid var(--col-body);
}

.bottomButton p {
	padding: 0;
	margin: 0;
	position: absolute;
	width: calc(100% - 16px);
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	color: inherit;
	user-select: none;
	-webkit-user-select: none;
}

.bottomButton:hover {
	color: var(--col-buttonbg);
	background-color: var(--col-text);
}

.bottomButton:hover > p {
	color: #fab;
}

.bottomButton:active {
	filter: brightness(90%);
}


#createNewArtwork, #createNewGroup {
	border-color: var(--col-counterpick);
	background-color: var(--col-counterpick);
	color: var(--col-text);
	filter: none;
	transition: 0.1s;
	font-style: italic;
	font-weight: bold;
}

#createNewArtwork:hover, #createNewGroup:hover {
	border-color: var(--col-accent);
	background-color: var(--col-accent);
	filter: none;
}

#createNewArtwork > .marker:hover, #createNewGroup > .marker:hover {
	border-color: var(--col-counterpick);
	background-color: var(--col-counterpick);
	filter: none;
}

.artwork p {
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;
	left: 0;
	transform: translateY(-50%);
	font-family: var(--font-big);
	font-size: var(--font-big-size);
	word-break: break-word;
	margin: 0;
	padding: 0;
	user-select: none;
}

#artworksWrapper, #groupsWrapper {
	margin-left: 0;
}



.marker {
	background-color: var(--col-body);
	color: var(--col-accent);
	transition: background-color 0.1s, color 0.1s, border-color 0.1s;
	margin-left: 0;
	z-index: 10;
	border: 4px dashed var(--col-accent);
	border-radius: 14px;
	position: absolute;
	display: inline-block;
	top: 50%;
	left: calc(100% + var(--sizing) / 2);
	transform: translate(-50%, -50%);
	pointer-events: all;
	width: 65px;
	height: 65px;
}

.marker.invisible {
	display: none;
}

.marker:hover {
	background-color: var(--col-accent);
	border-color: var(--col-body);
	color: var(--col-body);
}

.marker > p {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	font-family: 'Arial';
	font-weight: bold;
	width: 100%;
	text-align: center;
	margin: 0;
	color: inherit;
	font-style: italic;
}

#formWrapper input[type="text"], #formWrapper textarea {
	display: block;
	margin-bottom: calc(var(--sizing) / 2);
	width: calc(100% - 10px);
	font-family: var(--font-big);
	font-size: var(--font-btn-size);
	padding: 4px;
	border: 1px solid var(--col-buttonbg);
}

#formWrapper textarea {
	height: calc(var(--font-btn-size) * 5.5);
	overflow-y: scroll;
}

#formWrapper hr {
	width: 100%;
	margin: 0;
	margin-bottom: calc(var(--sizing) / 2);
	margin-top: calc(var(--sizing) / 2);
}

#formWrapper .guide {
	font-style: italic;
	font-size: var(--font-main-size);
	color: var(--col-text-light);
	margin: 0;
	margin-bottom: 4px;
}

#formGroupCheckboxes {
	width: calc(100% - 14px);
	max-height: 115px;
	overflow-y: scroll;
	border: 1px solid var(--col-buttonbg);
	padding: 6px;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding-bottom: 0;
}

#formGroupCheckboxes::-webkit-scrollbar {
  display: none;
}

#formWrapper .controlButton {
	margin-bottom: 0;
	width: calc(50% - var(--sizing) / 2);
	margin-right: var(--sizing);
}

#formWrapper .controlButton:last-of-type {
	margin-right: 0;
}

.toolDiv {
	padding-top: var(--sizing);
	padding-bottom: var(--sizing);
	border-top: 2px dotted var(--col-counterpick);
}

.toolDiv:last-child {
	padding-bottom: 0;
}

.toolDiv p {
	display: inline-block;
	margin-top: var(--sizing);
	margin-bottom: 0;
}