:root {
	--anim-duration: 1s;
    --sidebar-width: 18em;


    --button-border-color--selected: #8959a8;
    --button-border-color: #8959a8;
}


@media print {
    .no-print { display: none !important; }
}

@media screen {
    .print-only { display: none; }
}

/*
html {
  	box-sizing: border-box;
}
*, *:before, *:after {
  	box-sizing: inherit;
}
*/




body {
	margin: 0;
	padding: 0;
	background-color: var(--water);
	font-family: sans-serif;
}



details > div,
details > div + div {
    margin: 0.5em 1.1em;
}

details + details {
    margin: 1em 0;
}

summary {
    margin-bottom: 1em;
}


h1 { font-size: 1.5em; }


button {
    appearance: none;
    border: 1px solid var(--button-border-color--selected);
}

button[selected] {
    background-color: var(--button-border-color--selected);
    color: #fff;
}


button:hover {
    cursor: pointer;
}




small,
.small {
    font-size: 0.85em;
}


.text-center { text-align: center; }

.mt-3 { margin-top: 3em; }
.my-2 { margin-top: 2em; margin-bottom: 2em; }

.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

.flex-grow { flex-grow: 1; }
.flex-center { align-items: center; }




.controls {
	position: fixed;
}


.swatch {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
}


.color--name label,
.color--name input {
	padding: 0.2em;
	border: 1px solid transparent;

}

.color--name input {
    width: 100%;
}


.tools button {
    font-size: 1.25em;
    padding: 0.2em;
    line-height: 1.25em;
}


.controls--sidebar {
	position: fixed;
	bottom: unset;
	right: 0;
	top: 0;
	height: 100%;
	width: var(--sidebar-width);
	overflow-y: auto;
    padding: 0.5em;
}
.controls--sidebar section {
    margin: 1em 0;
}


@media screen{
    .design-view {
        width: calc(100vw - var(--sidebar-width));
        height: 100vh;
        overflow: auto;
    }
}

.design-view canvas {
    margin: 1em;
    position: relative;
}

.draw-centered canvas {
    transform: translateX(-50%);
    left: 50%;
}


.design-info {
    line-height: 2em;
}


.layer-color {
	width: 2em;
	height: 2em;
	appearance: none;
}

.color-swatch,
.color-swatch--color {
	display: inline-block;
	width: 25px;
	height: 25px;
}

.color-swatch {
	padding: 0;
}

.controls--colors {
	margin: 1em 0;
	padding: 0;
	position: relative;
	width: 100%;
}

.controls--colors li {
	display: flex;
	flex-direction: row;
}

.controls--colors button {
	font-size: 0.7em;
}


.control--layer {
    justify-content: space-between;
    cursor: pointer;
}
.control--layer[selected] {
    background-color: #c6e6ff;
}
.control--layer:not(.is-visible) {
    opacity: 0.6;
}


.status-bar {
    background-color: #e3e3e3;
    bottom: 0;
    justify-content: space-between;
    padding: 0.4em;
    position: sticky;
    width: 100%;
}

.status-bar .left-side div+div {
    margin-left: 1.5em;
}


main {
	width: 100%;
	height: 100%;
}

@keyframes anim-spin-8 {
	0% 		{ transform: rotate(0deg) }
	100% 	{ transform: rotate(360deg) }
}
@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

.fa-spinner {
}

.fa-spin--8 {
	animation: anim-spin-8 var(--anim-duration) steps(8, end) infinite
}
.fa-spin--8-rev {
	transform: rotate(-45deg);
	animation: anim-spin-8 var(--anim-duration) steps(8, jump-end) infinite reverse
}
.fa-pulse {
	animation: pulse var(--anim-duration) linear infinite;
}


.full-width {
	width: 100%;
	display: block;
}


.form-group {
    margin: 1em 0;
}


h2, .h2 {
    font-size: 1.4em;
    font-weight: bold;
}

h3, .h3 {
    font-size: 1.2em;
    font-weight: bold;
}