html:not(.navigation-contents-visible) .header-button-tools.selected {
	order: 1;
}
html.navigation-contents-visible .header-button-tools.selected {
	background-color: inherit;
}
html.navigation-contents-visible .header-button-tools.selected:hover {
	background-color: var(--opacity-hover);
}

/***/
#tools-sheet {
	position: fixed;
	top: 0;
	left: 0;
	right: 50px;
	bottom: 0;
	z-index: 2;
}
#tools {
	flex: 0 0 50px;
	background-color: var(--black);
	order: 4;
}


html:not(.tools-visible) #tools-sheet,
html:not(.tools-visible) #tools,
html.mobile #tools-sheet,
html.mobile #tools,
html.mobile .header-button-tools {
	display: none;
}

/******************* TYÖKALUT *******************/


/* SELAINILMOITUS */
.tyokalut-selainIlmoitus {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 13px;
	line-height: 20px;
	padding: 11px 6px 12px 13px;
	box-sizing: border-box;
	color: #fff;
	background-color: var(--black-dark);
}
html:not(.badIE) .tyokalut-selainIlmoitus {
	display: none;
}



/* MERKINNÄT */
.tyokalut-merkinnat {
	overflow: hidden;
	cursor: crosshair;
}
.tyokalut-merkinnat.piilossa {
	display: none;
}
.tyokalut-merkinnat[data-tyokalu="osoitin"] {
	pointer-events: none;
	cursor: default;
}
.tyokalut-merkinnat[data-tyokalu="teksti"] {
	cursor: text;
}

/* REUNUS */
html.tools-visible:not([data-tyokalu="osoitin"]) #content::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	pointer-events: none;
	border: 10px solid transparent;
	-webkit-border-image: url(images/tools/reunus.png) 20 round;
	border-image: url(images/tools/reunus.png) 20 round;
}


/*** CANVAS ***/
.tyokalut-merkinnat canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}



/*** TEKSTIT ***/
.tyokalut-merkinnat-tekstit {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

.tyokalut-merkinnat-tekstit .teksti {
	position: absolute;
}
.tyokalut-merkinnat-tekstit .teksti-sisalto {
	display: inline-block;
	min-width: 100px;
	font-size: 25px;
	line-height: 25px;
	min-height: 25px;
	padding: 5px;
	color: var(--black);
	background-color: #fff;
	border: 1px solid var(--grey);
	outline: none;
}
.tyokalut-merkinnat-tekstit .teksti-sisalto p {
	margin: 0; /*IE fix*/
}
.tyokalut-merkinnat-tekstit .teksti-poistaB,
.tyokalut-merkinnat-tekstit .teksti-siirraB {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #fff;
	box-sizing: border-box;
	z-index: 1;
	
	background-image: url(images/tools/tekstiikonit.png);
	background-size: auto 100%;
}
.tyokalut-merkinnat-tekstit .teksti-siirraB {
	left: -10px;
	top: -10px;
	background-color: #00f;
	background-position: left 0% center;
	cursor: move;
}
.tyokalut-merkinnat-tekstit .teksti-poistaB {
	right: -10px;
	top: -10px;
	background-color: #f00;
	background-position: left 100% center;
	cursor: pointer;
}

.tyokalut-merkinnat[data-tyokalu="teksti"] .tyokalut-merkinnat-tekstit {
	background-color: rgba(0,0,0,0); /* IE10 fix*/
}
.tyokalut-merkinnat:not([data-tyokalu="teksti"]) .tyokalut-merkinnat-tekstit {
	pointer-events: none;
}
.tyokalut-merkinnat:not([data-tyokalu="teksti"]) .tyokalut-merkinnat-tekstit .teksti-poistaB,
.tyokalut-merkinnat:not([data-tyokalu="teksti"]) .tyokalut-merkinnat-tekstit .teksti-siirraB {
	display: none;
}




/*** VALIKKO ***/
.tyokalut-valikko {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.tyokalut-valikko::-webkit-scrollbar {
	width: 2px;
	height: 2px;
	border-radius: 1px;
}
.tyokalut-valikko::-webkit-scrollbar-track {
	background: var(--black);
}
.tyokalut-valikko::-webkit-scrollbar-thumb {
	background: var(--grey);
}
.tyokalut-valikko::-webkit-scrollbar-thumb:hover {
	background: var(--grey);
} 
.tyokalut-valikko.piilossa {
	display: none;
}
@media screen and (max-height:650px){
	.tyokalut-valikko {
		justify-content: flex-start;
		overflow-x: hidden;
		overflow-y: auto;
	}
}

.tyokalut-valikko-rivi {
	padding: 5px 0;
	margin: 0 5px;
}
.tyokalut-valikko-rivi:not(:first-child) {
	border-top: 1px solid #999999;
}

.tyokalut-valikko-nappi {
	position: relative;
	width: 40px;
	height: 40px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999999;
}
.tyokalut-valikko-nappi > svg {
	width: 24px;
	height: 24px;
}
html.no-touch .tyokalut-valikko-nappi:hover {
	color: #FFFFFF;
}
.tyokalut-valikko-nappi.selected {
	color: #FFFFFF;
	background-color: var(--black-light);
}
.tyokalut-valikko-nappi.disabled {
	pointer-events: none;
	display: none;
}


.tyokalut-valikko-nappi-sisalto {
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	border: 1px solid var(--black-light);
	box-sizing: content-box;
}
html.no-touch .tyokalut-valikko-nappi:hover .tyokalut-valikko-nappi-sisalto {
	border-color: #fff;
}


.tyokalut-varipaletti {
	position: absolute;
	bottom: 0;
	right: 50px;
	background-color: var(--black-dark);
	padding: 5px;
	z-index: 10001;
}
html.navigation-contents-visible .tyokalut-varipaletti {
	visibility: hidden;
}
/* .tyokalut-varipaletti::before {
	content: '';
	position: absolute;
	left: calc(100% - 17px);
	bottom: 10px;
	width: 20px;
	height: 20px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: var(--black-dark);
} */
.tyokalut-varipaletti-taulu {
	position: relative;
}
.tyokalut-varipaletti-rivi {
	display: block;
	white-space: nowrap;
	line-height: 0;
}
.tyokalut-varipaletti-nappi {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
}
.tyokalut-varipaletti-nappi-sisalto {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 80%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	border: 1px solid var(--black-light);
}
html.no-touch .tyokalut-varipaletti-nappi:hover .tyokalut-varipaletti-nappi-sisalto,
.tyokalut-varipaletti-nappi.selected .tyokalut-varipaletti-nappi-sisalto {
	border-color: #fff;
}



.tyokalut-valikko-nappi[data-tyokalu="viiva"] > svg {
	transform: rotate(-45deg);
	width: 40px;
	height: 40px;
	stroke-width: 1.25px;
}

.tyokalut-valikko-nappi[data-tyokalu="suorakulmio-taytto"]::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 6px;
	border-radius: 1px;
	background-color: #999999;
	transform: translate(-50%, -50%);
}
.tyokalut-valikko-nappi[data-tyokalu="soikio-taytto"]::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #999999;
	transform: translate(-50%, -50%);
}
.tyokalut-valikko-nappi.selected::after,
html.no-touch .tyokalut-valikko-nappi:hover::after {
	background-color: #FFFFFF !important;
}


.tyokalut-valikko-nappi[data-tyokalu="vari"].selected{
	background-color: transparent;
	pointer-events: all;
}


.tyokalut-valikko-nappi[data-tyokalu="koko"]{
	background-image: url(images/tools/kokoikonit.png);
	background-size: auto 200%;
}
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"]:hover,
.tyokalut-valikko-nappi[data-tyokalu="koko"].selected{
	background-image: url(images/tools/kokoikonit.png);
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="0"]{
	background-position: left 0% top 100%;
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="1"]{
	background-position: left 25% top 100%;
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="2"]{
	background-position: left 50% top 100%;
}
.tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="3"]{
	background-position: left 75% top 100%;
}

html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="0"]:hover{
	background-position: left 0% top;
}
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="1"]:hover{
	background-position: left 25% top;
}
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="2"]:hover{
	background-position: left 50% top;
}
html.no-touch .tyokalut-valikko-nappi[data-tyokalu="koko"][data-koko="3"]:hover{
	background-position: left 75% top;
}