/*
////////////////////
/////////////////////
//Johanin koodi alkaa
/////////////////////
////////////////////

/* GLOBAL ELEMENTS */

:root {
	--bg-color: #444444;
	--bg-header: #000;
	--primary-color: #F5FFFA;
	--h3-color: #00ff00;
	--link-color-frendixCr: #00FF7F;
	--link-hover-frendixCr: #6495ED;
	--link-color-rosegoldCr: #FFD700;
	--link-color2-hover: ;
	--sframe1: linear-gradient(0.20turn, rgba(105,105,105), rgba(192,192,192));
	--sframe2: linear-gradient(0.20turn, rgba(128,128,128), rgba(211,211,211));
	--faded-text: rgba(255, 255, 255, 0.7);
	--link-box: rgba(0,0,0,0.2);
	--bg-main-btn: #228B22;
	--bg-main-hover: #00FA9A;
	--bg-main-active: #ADFF2F;
	--row1: rgba(64, 64, 64, 0.8)!important;
	--row2: rgba(48, 48, 48, 0.8)!important;
	--row0-bg-color: rgba(0, 0, 0, 0.8)!important;
	--row1-bg-color: rgba(64, 64, 64, 0.8)!important;
	--row2-bg-color: rgba(48, 48, 48, 0.8)!important;
	--pohja: url('img/pohja.png?t=<?php echo $timestamp; ?>');
	--bg-top: linear-gradient(#303030, #444444);
	--frendixBright: linear-gradient(to bottom right, #E6E6FA, #F8F8FF);
	--frendixLightMint: linear-gradient(to bottom right, #90EE90, #87CEFA);
	--table-bg: transparent;
	--icon-settings: url('img/icon-settings.png') transparent no-repeat;
	--reduce: url('img/arrowsup-dark.png') transparent no-repeat;
	--reduce-hover: url('img/arrowsup-dark-hover.png') transparent no-repeat;
	--refresh: url('img/refresh-dark.png') transparent no-repeat;
	--refresh-hover: url('img/refresh-dark-hover.png') transparent no-repeat;
	--bg-input: linear-gradient(to bottom right, #C0C0C0 30%, #fff 70%);
}

/*[data-theme="light"] {
	--bg-color: #F5FFFA;
	--bg-header: #0F0F44;
	--primary-color: #000;
	--attention-color: #28347c;
	--h3-color: #28347c;
	--link-color-frendixCr: #0000CD;
	--link-hover-frendixCr: #ADFF2F;
	--link-color-rosegoldCr: #483D8B;
	--rg-link-color-hover: #DC143C;
	--rg-link-color-hover: #DC143C;
	--faded-text: rgba(25, 25, 112);
	--link-box: rgba(192, 192, 192, 0.3);
	--bg-main-btn: #3CB371;
	--bg-main-hover: #DC143C;
	--bg-main-active: #FFD700;
	--bg-btn: #11a63c;
	--bg-btn-hover: #4169E1;
	--bg-btn-active: #1E90FF;
	--row0-bg-color: #0F0F44!important;
	--row1-bg-color: rgba(180,195,247)!important;
	--row2-bg-color: rgba(164,179,234)!important;
	--pohja: url('img/3_2.png');
	--bg-top: linear-gradient(#c0c0c0, #F5FFFA);
	--table-solid: 1px solid #000;
	--table-bg: #F5FFFA;
	--icon-settings: url('img/icon-settings.png') transparent no-repeat;
	--reduce: url('img/arrowsup-light.png') transparent no-repeat;
	--reduce-hover: url('img/arrowsup-light-hover.png') transparent no-repeat;
	--refresh: url('img/refresh-light.png') transparent no-repeat;
	--refresh-hover: url('img/refresh-light-hover.png') transparent no-repeat;
	--bg-input: linear-gradient(to bottom right, #E2E2E2 30%, #F5FFFA 70%);
}*/


/* FRENDIX GREEN & BLUE */
.frendixCr {
	--frame1: linear-gradient(0.20turn, rgba(0,255,127), rgba(124,252,0));
	--frame2: linear-gradient(0.30turn, rgba(30,144,255), rgba(100,149,237));
	--frame3: linear-gradient(0.30turn, rgba(199,21,133), rgba(221,160,221));
	--frame4: linear-gradient(0.35turn, rgba(100,149,237), rgba(30,144,255), rgba(124,252,0), rgba(0,255,127));
	--frameA: linear-gradient(0.30turn, rgba(255,215,0), rgba(250,250,210));
	--frameB: linear-gradient(0.30turn, rgba(220,20,60), rgba(255,99,71));
	--gradient-header: linear-gradient(0.20turn, rgba(124,252,0), rgba(0,255,127), rgba(100,149,237), rgba(30,144,255));
	--gradient-line1: linear-gradient(0.20turn, rgba(17,17,51), rgba(65,105,225), rgba(17,17,51));
	--gradient-line2: linear-gradient(0.20turn, rgba(17,17,51), rgba(0,255,127), rgba(17,17,51));
	--gradient-line3: linear-gradient(0.20turn, rgba(68,68,68), rgba(65,105,225), rgba(68,68,68));
	--btn-bg1: linear-gradient(#2E8B57, #98FB98);
	--btn-bg2: linear-gradient(#000080, #6495ED);
	--adbtn-bg1: linear-gradient(#F0E68C, #FFDEAD);
	--adbtn-bg2: linear-gradient(#D2691E, #FF7F50);
	--bg-btn: #11a63c;
	--bg-btn-hover: #00FA9A;
	--bg-btn-active: #00FA9A;
	--trans-row1: linear-gradient(#006400, #228B22);
	--trans-row2: linear-gradient(#191970, #4169E1);
	--trans-rowH: linear-gradient(#FFD700, #F0E68C);
	--grid-host: #006767;
	--grid-child: #008989;
	--arrowspan: #228B22;
	--arrowspan-hover: #ADFF2F;
	--arrowspan-hover2: #7FFFD4;
	--refresh: url('img/refresh-fr.png') transparent no-repeat;
	--refresh-hover: url('img/refresh-fr-hover.png') transparent no-repeat;
	
	--table-solid: 1px solid #98FB98;
	
	--gradient-text: -webkit-linear-gradient(35deg, #90EE90, #87CEFA);
	--subtitle: #00ff00!important;
	--subtitle2: #98FB98!important;
	--text: #F5FFFA!important;
	--text2: #6495ED!important;
	--text3: #F5FFFA;
	--text-hilight: #ADFF2F!important;
	--text-h2: #F5FFFA!important;
	--text-h3: #F5FFFA!important;
	--attention-color: #ADFF2F;
	--a-link: #00FF7F;
	--a-hover: #6495ED;
	--input-focus: #F5FFFA!important;
	--select-focus: #F5FFFA!important;
	--textarea-focus: #F5FFFA!important;
}
	
/* ROSEGOLD GOLD & PINK */
.rosegoldCr {
	--frame1: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
	--frame2: linear-gradient(0.20turn, rgba(250,128,114), rgba(248,248,255));
	--frame3: linear-gradient(0.30turn, rgba(199,21,133), rgba(221,160,221));
	--frameA: linear-gradient(0.30turn, rgba(255,215,0), rgba(250,250,210));
	--frameB: linear-gradient(0.30turn, rgba(220,20,60), rgba(255,99,71));
	--gradient-header: linear-gradient(0.20turn, rgba(240,230,140), rgba(218,165,32), rgba(248,248,255), rgba(250,128,114));
	--gradient-line1: linear-gradient(0.20turn, rgba(17,17,51), rgba(220,20,60), rgba(17,17,51));
	--gradient-line2: linear-gradient(0.20turn, rgba(17,17,51), rgba(218,165,32), rgba(17,17,51));
	--btn-bg1: linear-gradient(#D2691E, #FFD700);
	--btn-bg2: linear-gradient(#B22222, #FFB6C1);
	--adbtn-bg1: linear-gradient(#F0E68C, #FFDEAD);
	--adbtn-bg2: linear-gradient(#D2691E, #FF7F50);
	--bg-btn: #CD853F;
	--bg-btn-hover: #FA8072;
	--bg-btn-active: #FFD700;
	--trans-row1: linear-gradient(#D2691E, #B8860B);
	--trans-row2: linear-gradient(#8B0000, #B22222);
	--trans-rowH: linear-gradient(#663399, #800080);
	--grid-host: #D2691E;
	--grid-child: #CD853F;
	--arrowspan: #CD853F;
	--arrowspan-hover: #E9967A;
	--arrowspan-hover2: #F08080;
	--refresh: url('img/refresh-rg.png') transparent no-repeat;
	--refresh-hover: url('img/refresh-rg-hover.png') transparent no-repeat;
	--table-solid: 1px solid #FFDAB9;
	--gradient-text: -webkit-linear-gradient(35deg, #FF7F50, #C71585);
	--subtitle: #FFD700!important;
	--subtitle2: #DAA520!important;
	--text: #FDF5E6!important;
	--text3: #F8F8FF;
	--text-hilight: #CD5C5C!important;
	--text-h2: #F8F8FF!important;
	--text-h3: #F8F8FF!important;
	--attention-color: #E9967A;
	--a-link: #FFD700;
	--a-hover: #DC143C!important;
	--input-focus: #FFEFD5!important;
	--select-focus: #FFEFD5!important;
	--textarea-focus: #FFEFD5!important;
}

body {
	/*display: flex;
	flex-direction: column;*/
	position: relative;
	margin: 0;
	font-family: Roboto, sans-serif;
	font-size: 1.0em;
	color: #fff;
	background-color: var(--bg-color);
	/*min-height: 100vh;*/
	min-width: 365px;
	overflow-x: auto
}

	.loginClass,
	.appInfoClass {
		background: linear-gradient(to bottom right, #1DA000 20%, #ffffff 80%)!important;
		height: 100vh;
	}
	
	.calcClass {
		background: linear-gradient(to bottom right, #1DA000 20%, #ffffff 80%)!important;
		overflow: auto;
		height: auto;
	}

	.hidden {
		width: 1px!important;
		height: 1px!important;
		visibility: hidden!important;
	}

	.wrapper {
		/*overflow-x: auto;
		max-width: 100%;*/
		padding-left: 0;
	}

	@media screen and (min-width: 930px), (min-height: 720px) {
		.wrapper {margin-top: 120px;min-height: calc(100vh - 163px);}
	}

	@media screen and (max-width: 929px), (max-height: 720px) {
		.wrapper {margin-top: 70px;min-height: calc(100vh - 113px);}
	}
	
	@media screen and (max-width: 1080px), (max-height: 780px) {
		#osio1 {
			transform-origin: left top;
			scale: 0.81;
		}
		
		#osio2 {
			left: 80%!important;
			transform-origin: left top;
			scale: 0.85;
		}
	}
	
	@media screen and (max-width: 480px) {
		#osio1  {
			transform-origin: left top;
			scale: 0.62;
		}
		
		#osio2 {
			left: 63%!important;
			transform-origin: left top;
			scale: 0.70;
		}
		
		#keski {
		
		}
	}

	#schedule-wrapper {
		max-width: 100%;
		padding-right: 0.625em;
		padding-left: 0;
	}
/*
table, td, th {
	padding: 1px 1px;
	border: none;
	text-align: left;
}

table {
	margin-top: 18px;
	width: 100%;
	border-collapse: collapse;
}
*/

	/* INPUT FIELDS */

	/*select {
		-webkit-text-fill-color: #000000;
		-webkit-opacity: 1;
		color: #000000;
	}
		select, textarea, input[type=text], input[type=number] {font-family: "Roboto", sans-serif;font-size: 1em;background: var(--bg-input);resize: vertical;box-sizing: border-box;}

	input, textarea {-webkit-appearance:none;border-radius:0;}
	
	input[type=submit] {-webkit-border-radius:0px;}

	input[type=text]:focus {background:var(--input-focus);border:none;outline:none;}
	select:focus {background: var(--select-focus);outline: none;}
	textarea:focus {background: var(--textarea-focus);outline: none;}
	textarea:focus::placeholder {color:transparent;}*/
	
	
	.green-gold-box input[type=checkbox],
	.green-gold-box input[type=radio], 
	.green-white-box input[type=checkbox] {-webkit-appearance:none;border-radius:0;}
	
	.green-gold-box input[type=checkbox] {
		display: inline-block;
		position: relative;
		border: 2px solid #DAA520;
		border-radius: 2px;
		background: #000;
		cursor: pointer;
		line-height: 0;
		margin: .0em .2em 0 .3em;
		outline: 0;
		padding: 0!important;
		vertical-align: text-top;
		height: 16px;
		width: 16px;
		opacity: .4;
	}
		.green-gold-box input[type=checkbox]:hover {opacity: 1;}
		.green-gold-box input[type=checkbox]:checked {background-color: #00FF7F;opacity: 1;}

	.green-gold-box input[type=checkbox]:before {
		content: '';
		display: inline-block;
		position: absolute;
		right: 50%;
		top: 50%;
		width: 4px;
		height: 10px;
		border: solid #000;
		border-width: 0 2px 2px 0;
		margin: -1px -1px 0 -1px;
		transform: rotate(45deg) translate(-50%, -50%);
		z-index: 2;
	}

	.green-gold-box input[type=radio] {
		display: inline-block;
		position: relative;
		border: 2px solid #DAA520;
		border-radius: 2px;
		background: #000;
		cursor: pointer;
		line-height: 0;
		margin: .1em .3em 0 .3em;
		outline: 0;
		padding: 0 !important;
		vertical-align: text-top;
		height: 16px;
		width: 16px;
		opacity: .4;
	}
		.green-gold-box input[type=radio]:hover {opacity: 1;}
		.green-gold-box input[type=radio]:checked {background-color: #00FF7F;opacity: 1;}

	.green-gold-box input[type=radio]:before {
		content: '';
		display: inline-block;
		position: absolute;
		right: 50%;
		top: 50%;
		width: 4px;
		height: 10px;
		border: solid #000;
		border-width: 0 2px 2px 0;
		margin: -1px -1px 0 -1px;
		transform: rotate(45deg) translate(-50%, -50%);
		z-index: 2;
	}

	.green-white-box input[type=checkbox] {
		position: relative;
		border: 2px solid #F8F8FF;
		border-radius: 2px;
		background: #000;
		cursor: pointer;
		line-height: 0;
		margin: 0 .6em 0 .2em;
		outline: 0;
		padding: 0 !important;
		vertical-align: text-top;
		height: 16px;
		width: 16px;
		-webkit-appearance: none;
		opacity: .3;
	}
		.green-white-box input[type=checkbox]:hover {opacity: 1;}
		.green-white-box input[type=checkbox]:checked {background-color: #00FF7F;opacity: 1;}

	.green-white-box input[type=checkbox]:before {
		content: '';
		position: absolute;
		right: 50%;
		top: 50%;
		width: 4px;
		height: 10px;
		border: solid #313131;
		border-width: 0 2px 2px 0;
		margin: -1px -1px 0 -1px;
		transform: rotate(45deg) translate(-50%, -50%);
		z-index: 2;
	}
	
	.L {text-decoration:none;padding:0px 4px;width:200px;height:26px;}
	.S {text-decoration:none;padding:2px 2px;}
	.XS {width:46px!important;padding:2px 2px;}
	
	.mpv {vertical-align:middle!important;width:62px;height:26px;font-size:0.9125em;font-weight:700;text-indent:2px;}
	.HHMM {vertical-align:middle!important;width:46px;height:28px;font-size:0.9125em;font-weight:700;}

	.rim1 {width:56px!important;height:26px!important;font-size:1.4em!important;font-weight:600;margin-right:1px;}
	.rim2 {width:46px!important;height:26px!important;font-size:1.4em!important;font-weight:600;}
	.rim3 {width:40px!important;height:26px!important;font-size:1.4em!important;font-weight:600;margin-left:10px;}
	.srim1 {width:54px!important;height:22px!important;font-size:1.0em!important;margin-right:1px;}
	.srim2 {max-width:46px!important;height:22px!important;font-size:1.0em!important;}
	.srim3 {width:34px!important;height:22px!important;font-size:1.0em!important;margin-left:8px;padding:2px 2px!important;}

	.input100 {width:100%!important;}


	/* COLUMN SIZES */
	.col5 {width:5%;}
	.col8 {width:8%;}
	.col15 {width:15%;}
	.col20 {width:20%;}
	.col25 {width:25%;}
	.col30 {width:30%;}
	.col33 {width:33%;}
	.col34 {width:34%;}
	.col35 {width:35%;}
	.col37 {width:37%;}
	.col38 {width:38%;}
	.col40 {width:40%;}
	.col42 {width:42%;}
	.col45 {width:45%;}
	.col50 {width:50%;}
	.col55 {width:55%;}
	.col60 {width:60%;}
	.col65 {width:65%;}
	.col66 {width:66%;}
	.col70 {width:70%;}
	.col75 {width:75%;}
	.col80 {width:80%;}
	.col85 {width:85%;}
	.col90 {width:90%;}
	.col94 {width:94%;}
	.col95 {width:95%;}
	.col100 {width:100%;}
	
	/*@media (min-width: 980px) {
		.tireset-card-contents.col94 {width:94.5%;}
	}*/


	/* GLOBAL BUTTONS */
	.main-button {
		cursor: pointer;
		font-family: "Roboto", sans-serif;
		font-size: 0.8125em;
		font-weight: bold;
		color: #000;
		width: 160px;
		height: 32px;
		background-image: var(--btn-bg1);
		border-bottom: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		text-transform: uppercase;
		text-decoration: none;
	}
		
		.main-button:hover {
			color: #F5FFFA;
			background-image: var(--btn-bg2);
			border: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
			border-radius: 4px;
		}
		
	.main-admin-button {
		cursor: pointer;
		font-family: "Roboto", sans-serif;
		font-size: 0.8215em;
		font-weight: bold;
		color: #000;
		width: 115px;
		height: 32px;
		background-image: var(--adbtn-bg1);
		border-bottom: 2px solid transparent;
		border-image: var(--frameA);
		border-image-slice: 1;
		border-radius: 4px;
		text-transform: uppercase;
		text-decoration: none;
	}
			
		.main-admin-button:hover {
			color: #F5FFFA;
			background-image: var(--adbtn-bg2);
			border: 2px solid transparent;
			border-image: var(--frameB);
			border-image-slice: 1;
			border-radius: 4px;
		}
		
	.btn-basic {
		cursor: pointer;
		font-family: "Roboto", sans-serif;
		font-size: 0.8125em;
		font-weight: bold;
		color: #000;
		width: 178px;
		height: 28px;
		padding: 2px;
		background-image: var(--btn-bg1);
		border-bottom: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		text-transform: uppercase;
		text-decoration: none;
	}
	
		.btn-basic:hover {
			color: #F5FFFA;
			background-image: var(--btn-bg2);
			border: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
			border-radius: 4px;
		}

	.btn-basic-large {
		cursor: pointer;
		font-family: "Roboto", sans-serif;
		font-size: 1.5em;
		font-weight: 900;
		color: #000;
		width: 178px;
		height: 64px;
		padding: 2px;
		background-image: var(--btn-bg1);
		border-bottom: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		text-transform: uppercase;
		text-decoration: none;
	}
	
		.btn-basic-large:hover {
			color: #fff;
			background-image: var(--btn-bg2);
			border: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
			border-radius: 4px;
		}

	.btn-basic-long {
		cursor: pointer;
		font-family: "Roboto", sans-serif;
		font-size: 0.8125em;
		font-weight: bold;
		width: 98%;
		color: #000!important;
		padding: 2px;
		background-image: linear-gradient(#2E8B57, #98FB98);
		border-bottom: 2px solid transparent;
		border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(240,230,140));
		border-image-slice: 1;
		border-radius: 4px;
		text-transform: uppercase;
		text-decoration: none;
	}

		.btn-basic-long:hover {
			color: #fff;
			background-image: linear-gradient(to bottom right, #D2691E, #FFFAF0);
		}

	.btn-basic-s {
		cursor: pointer;
		font-family: "Roboto", sans-serif;
		font-size: 0.8125em;
		font-weight: bold;
		color: #000;
		width: 72px;
		height: 28px;
		padding: 2px;
		background-image: var(--btn-bg1);
		border-bottom: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		text-transform: uppercase;
		text-decoration: none;
	}
	
		.btn-basic-s:hover {
			color: #F5FFFA;
			background-image: var(--btn-bg2);
			border: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
			border-radius: 4px;
		}
			
	.btn-basic-m {
		cursor: pointer;
		font-family: "Roboto", sans-serif;
		font-size: 0.8125em;
		font-weight: bold;
		color: #000;
		width: 94px;
		height: 28px;
		padding: 2px;
		background-image: var(--btn-bg1);
		border-bottom: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		text-transform: uppercase;
		text-decoration: none;
	}
	
		.btn-basic-m:hover {
			color: #F5FFFA;
			background-image: var(--btn-bg2);
			border: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
			border-radius: 4px;
		}
		
	.btn-selected {
		color: #F5FFFA;
	}
		
	.btn-disabled {
		cursor: not-allowed!important;
		background: linear-gradient(to bottom right, #808080 30%, #fff 70%)!important;
		border: 1px solid #C0C0C0!important;
		color: #696969!important;
	}

	.btn-save {
		white-space: nowrap;
		cursor: pointer;
		width: 32px;
		height: 32px;
		background: url('img/icon-save-b.png') transparent no-repeat;
		background-size: 26px 26px;
		background-position: center;
		font-size: 0.75em;
		font-weight: 800;
		border-bottom: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		text-indent: -9000px; text-transform: capitalize;
	}

		.btn-save:hover {
			background: url('img/icon-save-w.png') transparent no-repeat;
			background-size: 26px 26px;
			background-position: center;
			border-bottom: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
		}
		
	.btn-delete {
		white-space: nowrap;
		cursor: pointer;
		width: 32px;
		height: 32px;
		background: url('img/icon-delete-b.png') transparent no-repeat!important;
		background-size: 30px 30px!important;
		background-position: center!important;
		border-bottom: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		text-indent: -9000px; text-transform: capitalize;
	}

		.btn-delete:hover {
			background: url('img/icon-delete-w.png') transparent no-repeat!important;
			background-size: 30px 30px!important;
			background-position: center!important;
			border-bottom: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
			color: #F8F8FF!important;
		}

	.btn-plus {
		cursor: pointer;
		font-family: "Roboto", sans-serif;
		font-size: 1.6em;
		font-weight: bold;
		line-height: 0.6em;
		color: #000;
		width: 28px;
		height: 28px;
		padding: 2px;
		background-image: var(--btn-bg1);
		border-bottom: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		text-transform: uppercase;
		text-decoration: none;
	}

		.btn-plus:hover {
			color: #fff;
			background-image: var(--btn-bg2);
			border-bottom: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
			border-radius: 4px;
		}
	
	.btn-edit {
		white-space: nowrap;
		cursor: pointer;
		width: 32px;
		height: 32px;
		background: url('img/icon-edit-b.png') transparent no-repeat!important;
		background-size: 30px 30px!important;
		background-position: center!important;
		font-size: 0.75em;
		font-weight: 800;
		border-bottom: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px!important;
		color: #000!important;
		text-indent: -9000px; text-transform: capitalize;
	}
	
		.btn-edit:hover {
			background: url('img/icon-edit-w.png') transparent no-repeat!important;
			background-size: 30px 30px!important;
			background-position: center!important;
			border-bottom: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
			color: #F8F8FF!important;
		}

	.glow-on-hover {
		font-family: "Roboto", sans-serif;
		font-weight: 700;
		height: 32px;
		border: none;
		outline: none;
		color: rgba(255,255,255, 0.25);
		background: #111;
		cursor: pointer;
		position: relative;
		z-index: 0;
		border-radius: 10px;
		text-transform: uppercase;
	}

		.glow-on-hover:before {
			content: '';
			background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
			position: absolute;
			top: -2px;
			left:-2px;
			background-size: 400%;
			z-index: -1;
			filter: blur(5px);
			width: calc(100% + 4px);
			height: calc(100% + 4px);
			animation: glowing 20s linear infinite;
			opacity: 0;
			transition: opacity .3s ease-in-out;
			border-radius: 10px;
		}

		.glow-on-hover:after {
			z-index: -1;
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background: #111;
			left: 0;
			top: 0;
			border-radius: 10px;
		}

	@keyframes glowing {
		0% { background-position: 0 0; }
		50% { background-position: 400% 0; }
		100% { background-position: 0 0; }
	}

	.glow-on-small {
		font-family: "Roboto", sans-serif;
		font-weight: 600;
		height: 22px;
		border: none;
		outline: none;
		color: rgba(245,255,250, 0.75);
		background: #111;
		cursor: pointer;
		position: relative;
		z-index: 0;
		border-radius: 10px;
		text-transform: uppercase;
	}

		.glow-on-small:before {
			content: '';
			background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
			position: absolute;
			top: -2px;
			left:-2px;
			background-size: 400%;
			z-index: -1;
			filter: blur(5px);
			width: calc(100% + 4px);
			height: calc(100% + 4px);
			animation: glowing 20s linear infinite;
			opacity: 0;
			transition: opacity .3s ease-in-out;
			border-radius: 10px;
		}

		.glow-on-small:after {
			z-index: -1;
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background: #111;
			left: 0;
			top: 0;
			border-radius: 10px;
		}

	@keyframes glowing {
		0% { background-position: 0 0; }
		50% { background-position: 400% 0; }
		100% { background-position: 0 0; }
	}

		.glow-on-hover:active,
		.glow-on-small:active {color:#000!important;}
		.glow-on-hover:active:after,
		.glow-on-small:active:after {background:transparent;}
		.glow-on-hover:hover,
		.glow-on-small:hover {color:rgba(255,255,255, 1)!important;}
		.glow-on-hover:hover:before,
		.glow-on-small:hover:before {opacity:1;}


	/* PLACEMENT AND DEFINITION OF ELEMENTS */
	.row1 {background: var(--row1);}
	.row2 {background: var(--row2);}
	.row-nro {text-align: center!important;font-weight:700;}
	.capitalize {text-transform: capitalize!important;}
	.responsive {max-width:100%;height:auto;}
	.responsive-x {width:100%;max-width:32px;height: auto;}
	.clear {clear: both;}
	.clear-left {clear: left;}
	.clear-right {clear: right;}
	.center {display: block;margin-left: auto;margin-right: auto;}
	.centered {position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);}
	.left {float: left;}
	.right {float: right;}
	.hidden-element {visibility: hidden!important;}

	.disabled {
		cursor: not-allowed!important;
		color: #696969!important;
		background: linear-gradient(to bottom right, #808080 30%, #fff 70%)!important;
		box-shadow: none!important;
		border: none!important;
	}
		.disabled:hover {border: none!important;}

	.close-window {
		cursor: pointer;
		width: 22px;
		height: 22px;
		margin-top: 3px;
		margin-right: 3px;
		padding: 1px;
		float: right!important;
		background: transparent;
		border-bottom: 2px solid transparent;
		border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(240,230,140));
		border-image-slice: 1;
		border-radius: 6px!important;
		text-align: center!important;
		font-size: 15px;
		font-weight: bold;
		color: #F8F8FF;
		z-index: 11;
	}

		.close-window:hover {
			background-image: linear-gradient(#DAA520, #FFFAF0);
			border-radius: 6px;
			color: #FFD700;
			scale: 1.10;
			color: #000;
			z-index: 11;
		}

	.info-marker {
		width: 26px;
		height: 26px;
		background: url('img/icon-info.png');
		background-size: 18px 18px;
		background-position: center;
		background-repeat: no-repeat;
		opacity: 0.8;
		transform: scale(-1);
		margin-bottom: auto;
	}

		.info-marker:hover {
			background: url('img/icon-info.png');
			background-size: 22px 22px;
			background-position: center;
			background-repeat: no-repeat;
			opacity: 1;
			transform: scale(1, 1);
			transition: all 650ms;
		}

	.rotate {
		transform: rotate(-90deg);
		/* Legacy vendor prefixes that you probably don't need... */
		-webkit-transform: rotate(-90deg); /* Safari */
		-moz-transform: rotate(-90deg); /* Firefox */
		-ms-transform: rotate(-90deg); /* IE */
		-o-transform: rotate(-90deg); /* Opera */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
	}


	/* GLOBAL TEXT STYLES */
	h1 {
		font-family: "Roboto", sans-serif;
		color: #00ff00;
		display: block;
		margin-top: 22px;
		font-size: 1.4em;
		font-weight: bold;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis!important;
	}

	/*h2 {
		font-family: "Roboto", sans-serif;
		color: var(--text-h2);
		display: block;
		font-size: 1.6em;
		font-weight: bold;
		margin-right: 8px;
		line-height: 0;
		text-transform: uppercase;*/
	}

	h3 {
		font-family: "Roboto", sans-serif;
		color: var(--text-h3);
		display: block;
		font-size: 1.1em;
		font-weight: bold;
		margin-right: 8px;
		line-height: 0;
	}

	h4 {
		font-family: "Roboto", sans-serif;
		color: #00ff00;
		display: block;
		font-size: 1.6em;
		font-weight: normal;
		margin-right: 8px;
		line-height: 0;
	}

	h5 {
		font-family: "Roboto", sans-serif;
		color: #00ff00;
		display: block;
		font-size: 1.8em;
		line-height: 0;
		margin-top: 35px;
		/*margin-left: 8px;*/
	}

	h6 {
		margin: 0;
		padding: 1em 0;
		font-family: "Roboto", sans-serif;
		font-size: 2.2em;
		font-weight: bold;
		overflow:hidden;
		text-overflow: ellipsis!important;
		text-transform: uppercase;
	}

	p {
		font-family: "Roboto", sans-serif;
		font-size: 1.0em;
	}

	p.small {
		color: var(--primary-color);
		font-size: 0.8125em!important;
		font-weight: 500!important;
		line-height: 0!important;
	}

	p.info {
		color: #EEE8AA!important;
		font-size: 0.75em!important;
		line-height: 1.4!important;
		margin-top: 2px;
	}

	p.notification-text {
		font-size: 13px!important;
		font-weight: normal;
		margin-top: 0;
		padding: 4px 4px!important;
		line-height: 1.2!important;
	}

	p.customers-title {
		font-family: "Roboto", sans-serif;
		font-size: 0.825em!important;
		font-weight: bold;
		line-height: 0!important;
		padding: 2px 0px;
		text-transform: uppercase;
		color: var(--text);
	}
	
	p.services-title {
		font-family: "Roboto", sans-serif;
		font-weight: bold;
		font-size: 1em;
		padding: 2px 0px;
		text-transform: uppercase;
		color: var(--text);
	}
	
	p.instructions-title {
		font-family: "Roboto", sans-serif;
		font-weight: bold;
		font-size: 1em;
		padding: 2px 0px;
		text-transform: uppercase;
		color: var(--text);
	}
	
	p.instructions-intertitle {
		font-family: "Roboto", sans-serif;
		font-size: 0.825em!important;
		font-weight: bold;
		line-height: 0!important;
		padding: 2px 0px;
		text-transform: uppercase;
		color: var(--text);
	}

	p.edu-video {
		font-family: "Roboto", sans-serif;
		font-size: 1.2em;
		font-weight: bold;
		/*overflow:hidden;*/
		text-overflow: ellipsis!important;
		text-transform: uppercase;
	}

	p.intertitle {
		font-family: "Roboto", sans-serif;
		font-size: 0.75em!important;
		font-weight: bold;
		margin-left: -4px;
		line-height: 0!important;
		padding: 2px 0px;
		text-transform: uppercase;
		color: var(--text3);
	}

	p.year {
		font-size: 0.85em;
		color: rgba(255, 255, 255, 0.6);
	}

	.small-title {
		color: var(--primary-color);
		font-size: 0.8125em!important;
		font-weight: 500!important;
		text-transform: uppercase;
		margin-bottom: auto;
	}

	.boldedColored {color:var(--attention-color);font-size:1em;font-weight:700;}

	.italicNotification {color:#DCDCDC;font-style:italic;text-transform:none!important;}


	/* IMAGES */
	img {}

	#header img {
		padding: 8px 4px;
	}

	.top img {
		padding: 8px 2px;
	}


	/* PLACEHOLDERS */
	::placeholder {
		opacity: 0.7;
		font-size: 0.9125em!important;
		text-transform: none;
	}
	
	input:focus::placeholder {opacity: 0.4;}

	input[type="text"]::-moz-placeholder { 
		opacity:0.3;
		font-size: 0.9125em!important;
		text-transform: none!important;
	}
	
	input[type="number"]::-moz-placeholder { 
		opacity:0.8;
		font-size: 0.9125em!important;
		text-transform: none!important;
	}
	
	textarea::-moz-placeholder {
		opacity:0.3;
		font-size: 0.9125em!important;
		text-transform: none!important;
	}

/* PRICE CALCULATOR */
.wrapper-calc {display: flex;justify-content: center;width: 100%;}

.calcSets select,
.calcUsers select,
.addsParts select,
.appParts select {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	color: #000;
	vertical-align: baseline;
}

.calc-box {
	padding: 0.75em;
	background: #202e38!important;
	width: 75%;
	min-width: 330px;
	max-width: 1240px;
	height: auto;
	min-height: 360px;
	max-height: 75%;
	border: 3px solid #DAA520;
	border-radius: 36px;
	box-shadow: 0.75em 0.75em 16px #778899;
	overflow: hidden;
}
.calc-box > div:first-child {display: flex;justify-content: center;}
	
	.calcTitle {
		margin-top: 0.1em;
		font-size: 4em;
		font-weight: 700;
		height: 1em;
		padding-bottom: 0.8em;
		background: -webkit-linear-gradient(45deg, #90EE90, #87CEFA);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-background-clip: text;
		-moz-text-fill-color: transparent;
	}
	.calcTitle p {margin: 0;padding: 0;text-transform: uppercase;}
	
	.calcContent {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		gap: 5em;
	}

		.calcTiremanager {
			display: flex;
			flex-direction: column;
		}
		
		.calcApp {
			display: flex;
			flex-direction: column;
			min-width: 215px;
		}

		.calcTiremanager > div:first-child,
		.calcApp > div:first-child {display: flex;flex-direction: row;gap: 0.4em;}
		.calcTiremanager > div:first-child p,
		.calcApp > div:first-child p {font-size:1.4em;color:#00FF7F;text-transform: uppercase;margin: 0;padding: 0;}

		.calcSums {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}
		.calcSumsContent {display: flex;}
		
			.calcSets, 
			.calcUsers,
			.calcApp {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				font-family: "Roboto", sans-serif;
				font-size: 1em;
				text-transform: uppercase;
				row-gap: 0.4em;
			}
			.calcSets, 
			.calcUsers {
				min-width: 164px;
				row-gap: 0.2em;
			}
			.calcAdditionals {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				font-family: "Roboto", sans-serif;
				text-transform: uppercase;
				gap: 0.4em;
			}
			
			.calcSets select,
			.calcUsers select {width: 9em;border: 1px solid #aaa;border-radius: 4px;}
			.calcAdditionals select {margin-left: 0.5em;}
			.calcSets p,
			.calcUsers p, 
			.calcAdditionals p,
			.appParts p {
				font-size: 0.925em;
				text-transform: uppercase;
				margin: 0;
				padding: 0;
			}
			
				.addsParts {
					display: flex;
					flex-direction: column;
					gap: 1.6em;
					overflow: hidden;
				}
				.addsParts p {color: #8FBC8F;text-decoration: underline;}
				.addsParts > div {display: flex;flex-direction: column;gap: 0.3em;flex-wrap: nowrap;}
				.addsParts > div span {display: flex;justify-content: space-between;}
				.addsParts select {width: 3em;height: 1.4em;border: 1px solid #aaa;border-radius: 4px;}
				
				.appParts {
					display: flex;
					flex-direction: column;
					gap: 0.7em;
				}
				.appParts > div {display: flex;flex-direction: row;justify-content: space-between;gap: 0.5em;flex-wrap: nowrap;}
				.appParts select {width: 5em;border: 1px solid #aaa;border-radius: 4px;}
		
				.calcTiremanager > div:not(:first-child),
				.appParts > div:first-child {margin-top: 0.8em;}
		
				.calcPrizes {
					margin-top: 1.6em;
					display: flex;
					flex-direction: column;
					gap: 0.2em;
					font-family: 'Roboto', sans-serif;
					font-size: 1.6em;
					font-weight: 500;
					color: #00FF7F;
					/*white-space: nowrap;*/
				}
				
				/*.appIncluded {
					display: none;
				}*/
				.appIncluded {
					font-size: 0.75em;
					font-style: italic;
					color: #FFD700;
					margin: 0;
					padding: 0;
				}
		
		/*#setsDropdown select,
		#usersDropdown select {
			display: none;
		}*/
		
		.calc-footer {
			display: flex;
			flex-direction: column;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #202e38;
			text-align: left;
			border-top: 3px solid #DAA520;
		}
		
		.calc-footer {display: flex;flex-direction:column;height:120px;padding:0px 240px;}
		.calc-footer p {color:#F5FFFA;font-size: 0.925em;line-height: 1.4em;padding-top: 4px;margin: 0;}
		.calc-footer h1 {font-size: 1.8em;padding-top: 8px;margin: 0;}
		.cafItems {display: flex; flex-direction: column;column-gap: 1em;}
		.cafItem1 {display: flex; flex-direction: row;}
		.cafItem2 {margin-right: 5px;}
		
		.calcRadio {display: none;}
		.calcRadio + label {
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 24px;
			height: 24px;
			background-color: #BFD3E0;
			border: 1px solid #ccc;
			border-radius: 5px; /* Pieni border-radius neliölle */
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
			cursor: pointer;
			z-index: 1;
		}
		.calcRadio + label::before {
			content: url('img/calcChecked.png');
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: 0; /* piilotetaan alussa */
		}
		.calcRadio:checked + label {background-color: #F8F8FF;}
		.calcRadio:checked + label::before {
			opacity: 1; /* Näytä kun radio button on valittu */
		}

@media (max-width: 2500px) {
	.calcRight {width:100%;row-gap:0.2em;}
	.calcSums {width:100%;gap: 1.5em;}
	.addsParts p {font-size:1.1em;}
	.calcPrizes {width:100%;font-size: 1.2em;}
	.calc-box {max-height:85%;}
	/*.calc-footer {height:65px;flex-direction:row;column-gap:1em;}
	.cafItems {flex-direction:row;margin-top: 6px;}
	.cafItem1 {flex-direction:column;}*/
}

@media (max-width: 1170px) {
	/*.calcTiremanager {width: 60%;}*/
	
}

@media (min-width: 880px) and (max-height: 620px) {
	.calcTitle {font-size: 2em;}
}

@media (max-width: 880px) and (min-height: 620px) {
	.calcTitle {font-size: 2em;}
}

@media (max-height: 800px) and (min-width: 1020px) {
	.calc-footer {height:65px;flex-direction:row;column-gap:1em;}
	.cafItems {flex-direction:row;margin-top: 6px;}
	.cafItem1 {flex-direction:column;}
}

@media (min-width: 1250px) and (max-height: 900px) {
	.calcSums {width:100%;}
	.calcPrizes {width:100%;font-size: 1.2em;}
}

@media (max-width: 900px), (max-height: 900px) {
	.calcTransports {display:none;}
}

@media (max-width: 820px) {
	.calc-box {width: 60%;}
	.calcTitle {font-size: 1.8em;}
	.calcTiremanager {width: 100%;}
	.addsParts {min-width: 305px;}
	.calcContent {flex-direction: column;gap: 1.4em;}
	.calc-footer {height:65px;flex-direction:row;column-gap:1em;padding: 0 4px;}
	.cafItems {flex-direction:row;margin-top: 6px;}
	.cafItem1 {flex-direction:column;}
	.calc-frendix {display:none;}
	.calc-footer h1 {font-size: 1.4em;}
	.addsParts,
	.calcPrizes {margin-top: 0.5em;}
	.appParts {gap: 0.3em;}
	.addsParts > div,
	.appParts > div {font-size: 0.85em!important;}
	.appIncluded {padding: 0.15em;}
	/*.appParts > div {flex-wrap: nowrap;}*/
}

@media (max-width: 720px) and (max-height: 740px) {
	.calcSums, 
	.calcAdditionals, 
	.calcRight {
		font-size: 0.925em;
	}
	.calcPrizes {font-size: 0.925em;}
	.calc-footer p {
		font-size: 0.825em;
		white-space: nowrap;
	}
	.appIncluded p {margin: 0;padding: 0;}
	.appParts span:first-child {font-size: 0.9em;}
	.addsParts {min-width: 276px;}
}

@media (max-height: 815px) and (max-width: 1020px), (max-height: 500px) {
	.calc-footer {display: none;}
}

@media (max-height: 500px), (max-height: 680px) and (max-width: 1020px) {
	.calc-box {overflow-y: auto;}
}

@media (max-width: 400px) {
	.addsParts {row-gap: 0.6em;}
	.cafItems {column-gap: 0.3em;}
}


/* APP INFO & REGISTER APP */
.wrapper-appinfo {display: flex;justify-content: center;}

	.info-box {
		top: 50%;
		padding: 0.75em;
		background: #202e38!important;
		width: 800px;
		height: auto;
		max-height: 85%;
		border: 3px solid #DAA520;
		border-radius: 36px;
		box-shadow: 0.75em 0.75em 16px #778899;
		overflow-y: auto;
	}

	.info-title {
		font-size: 2.4em;
		font-weight: 700;
		background: -webkit-linear-gradient(45deg, #90EE90, #87CEFA);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-background-clip: text;
		-moz-text-fill-color: transparent;
	}
	.info-price {font-size: 1.4em;color: #ADFF2F;font-weight: 600;}
	.firstMonth {width: 100%;font-size: 0.975em;font-weight: 500;font-style: italic;animation: appInfoPulse 3s infinite;}
	.iosNotification {font-size: 0.975em;font-weight: 500;color: #FF8C00;font-style: italic;}
	@keyframes appInfoPulse {
		0%, 100% {
			color: transparent;
		}
		50% {
			color: #FF8C00;
		}
	}

	.info-frendix-logo {
		position: absolute;
		top: 10%;
		right: 0;
		width: 300px;
		height: 300px;
		background-image: url("img/F2022-big.png");
		background-repeat: no-repeat;
	}

	.regInfo {display: flex;flex-direction: column;}
	.appInfo,
	.regInfo {width: 94%;padding-left: 3%;z-index: 5;}
	.appInfo p {font-size: 1.25em;color: #F5FFFA;}
	
	.regSpecifications {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-end;
		width: 97%;
		padding-left: 3%;
		gap: 0.4em;
	}
	.regSpecificationsContent {display: flex;flex-direction: column;align-items: flex-start;gap: 0.4em;}
	.regSpecificationsContent > div {display: flex;flex-direction: row;justify-content: space-between;gap: 0.6em;}
	.regSpecificationsContent > div:not(:last-child) {width: 90%;}
	.regSpecificationsContent > div:last-child {gap: 0.2em;}
	.regSpecificationsContent > div:last-child input {margin-top: 5px;}
	.regSpecificationsContent select {background-color:#DCDCDC;font-size: 0.825em;width: 4em;height: 1.5em!important;margin-left: 1px;outline:none;}
	.regSpecificationsContent > div:not(:last-child) p {text-transform: uppercase;}
	.regSpecificationsContent > div:last-child p:first-letter {text-transform: uppercase;}
	.regSpecificationsContent > div p {margin: 0;padding-top: 4px;}
	/*.regSpecifications > div span {background: orange;}*/
	.companyInfo {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 97%;
		padding-left: 3%;
		/*z-index: 5;
		background-color: brown;*/
	}
	.companyInfo p {font-size: 1.4em;color: #FFD700;font-weight: 700;text-transform:uppercase;}
	.appInfo input[type="text"],
	.companyInfo input[type="text"] {background-color:#DCDCDC;font-size: 0.825em;width: 50%;margin-left: 6px;outline:none;}
	.companyInfo input[type="text"]:focus {background-color:#F8F8FF;}
	.companyInfo select {background-color:#DCDCDC;font-size: 0.825em;width: 50%;height: 1.8em!important;margin-left: 1px;outline:none;}
	.companyInfo select:focus {background-color:#F8F8FF;}
	.companyInfo form {width: 100%;}
	
	.regSent p {font-size: 0.875em;color: #F5F5DC}
	.regSent p::first-letter {text-transform:capitalize;}
	
	.regSent {
		display: flex;
		flex-direction: column;
		row-gap: 5px;
		padding-left: 3%;
	}
	.regSent h1 {font-size: 1.2em;color: #ADFF2F;font-weight: 500;white-space: normal;}
	.regSent h1::first-letter {text-transform:capitalize;}
	
	.sendedInfo1 {font-size: 0.925em;color: #FFF8DC;font-weight: 500;text-transform: uppercase;}
	.sendedInfo2 {color: #F8F8FF;font-weight: 500;margin-left: 8px;text-transform: none!important;}
	
	.btn-registerapp {
		width: 175px;
		height: 30px;
		cursor: pointer;
		font-family: "Roboto", sans-serif;
		font-size: 0.875em;
		font-weight: 700;
		text-transform: uppercase;
		margin-left: auto;
		margin-right: auto;
		display: block;
		background-image: linear-gradient(to bottom right, #E6E6FA, #F8F8FF);
		border-bottom: 3px solid transparent;
		border-image: linear-gradient(0.20turn, rgba(0,255,0), rgba(65,105,225));
		border-image-slice: 1;
		border-radius: 3px;
	}
	.btn-registerapp:hover {background-image: linear-gradient(to bottom right, #90EE90, #87CEFA);}

	.applabel {
		display: inline-block;
		width: 180px;
		text-transform: uppercase;
		/*background-color: blue;*/
	}
	.speclabel,
	.prizelabel {
		display: inline-block;
		width: auto;
	}
	.appfield,
	.specfield {
		/*width: 95%;*/
		position: relative;
		font-family: "Roboto", sans-serif;
		border-radius: 8px;
		border: 3px solid #708090;
		height: 2.2em!important;
		margin-bottom: 12px;
		background-color: #fff;
		resize: vertical;
		box-sizing: border-box;
	}
	.appfield {
		padding-left: 10px;
	}
	.specfield {
		max-width: 13%;
		padding-left: 4px;
	}

	.appVideoContainer {
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}
	
	.responsive-iframe {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 94%;
		height: 100%;
		padding-left: 3%;
		border-radius: 7%;
	}

	.appinfo-footer,
	.appregister-footer {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #202e38;
		text-align: left;
		border-top: 3px solid #DAA520;
	}
		
		.appinfo-footer,
		.appregister-footer {height:120px;padding:0px 100px;}
		.appinfo-footer p,
		.appregister-footer p {color:#F5FFFA;font-size: 0.925em;line-height: 1.4em;padding-top: 4px;margin: 0;}
		.appinfo-footer h1,
		.appregister-footer h1 {font-size: 1.8em;padding-top: 8px;margin: 0;}
		.aifItems {display: flex; flex-direction: column;column-gap: 1em;}
		.aifItem1 {display: flex; flex-direction: row;}
		.aifItem2 {margin-right: 5px;}

	@media screen and (max-width: 820px) {
		.info-box {
			width: 480px;
		}
		.regInfo {flex-direction: column;}
		.info-price {margin-left: 1px;margin-top: 0;}
		.regSpecifications {flex-direction: column;align-items: flex-start;}
		.specfield {max-width: 22%;}
	}

	@media screen and (max-height: 1080px) {
		.companyInfo {overflow-y: auto;}
		.appinfo-footer {
			flex-direction: row;
			column-gap: 12px;
			max-height: 60px;
		}
		.aifItems {flex-direction: row;margin-top: 6px;}
		.aifItem1 {flex-direction: column;}
		.aifItem2 {display: none;}
	}
	
	@media screen and (max-width: 820px), (max-height: 940px) {
		.appInfo p {font-size: 0.75em;color: #F5FFFA;}
	}
	
	/*@media screen and (min-width: 820px) and (max-height: 800px) {
		.appinfo-footer {display: none;}
	}
	
	@media screen and (max-height: 780px) and (min-width: 820px), (max-height: 640px) {
		.appinfo-footer {display: none;}
	}*/
	
	@media screen and (min-width: 820px) and (max-height: 675px) {
		.appVideoContainer {
			width: 50%;
			padding-top: 28.25%;
		}
	}
	
	@media screen and (max-width: 480px) and (max-height: 690px) {
		.applabel {font-size: 0.725em!important;}
		.appfield,
		.specfield {margin-bottom: 2px!important;}
		.companyInfo p {line-height: 0.6!important;}
	}
	
	@media screen and (max-height: 650px) {
		.info-title {font-size: 1.4em!important;padding-bottom: 0.8em;}
		.regInfo {flex-direction: row;}
		.companyInfo p {display: none;}
		.prizelabel {padding-bottom: 1em;}
	}
	
	@media screen and (max-height: 1080px) and (min-width: 540px), (max-width: 540px) and (max-height: 1080px) {
		.appregister-footer {
			flex-direction: row;
			column-gap: 12px;
			max-height: 60px;
		}
	}
	
	@media screen and (min-width: 540px) and (max-height: 785px), (max-width: 540px) and (max-height: 1080px) {
		.appregister-footer {
			max-height: 40px;
			justify-content: center;
			padding: 0;
		}
		.aifItems > div > div {display: flex; flex-direction: row;gap: 2.6em;}
		.appregister-footer > div:first-child,
		.aifItems > div:first-child {display: none;}
		/*.appregister-footer > div {background: green;border: 2px solid red;}
		.appregister-footer > div > div p {background: orange;border: 2px solid black;}*/
	}

	@media screen and (max-width: 540px) {
		.info-box {width: 330px;}
		.info-title {font-size: 1.8em;}
		.appinfo-footer,
		.appregister-footer {padding: 0px 10px;}
		.companyInfo input[type="text"] {width: 97%;margin-left: 0;height: 1.8em!important;}
		.companyInfo select {width: 97%;margin-left: 0;height: 1.6em!important;}
		.applabel {font-size: 0.825em!important;}
		.appfield,
		.specfield {margin-bottom: 6px;}
		.appinfo-footer h1 {font-size: 0.825em!important;}
		.appinfo-footer p {line-height: 1.1em;}
		.companyInfo p {font-size: 1.1em;line-height: 0.8;}
		.regSpecificationsContent > div:not(:last-child) {width: 100%;}
		.specfield {max-width: 32%;}
	}


/* LOGIN & ACTIVATION PAGES */
.wrapper-login {display: flex;justify-content: center;}

	.login-box {
		top: 50%;
		padding: 0.75em;
		background: #202e38!important;
		width: 480px;
		height: 500px;
		border: 3px solid #DAA520;
		border-radius: 36px;
		box-shadow: 0.75em 0.75em 16px #778899;
	}
		.login-box p {font-family: "Roboto", sans-serif;}
		.login-box a {color: #F5F50D!important;}
		.login-box a:hover {color: #D2691E!important;}

		.login-content {display:flex;align-items:center;column-gap:2em;}

			.login-logo {display:flex;flex-shrink:0;align-self: flex-start;}
		
			.loginfield {flex-grow:1;flex-direction:column;}
			.loginfield input[type="text"],
			.loginfield input[type="password"]	{font-size: 1em;font-weight: 550;position: absolute;height: 92%;width: 82%;border:none;outline:none;}

				.tm-title {
					margin-top: 1%;
					margin-bottom: 0.4em;
					font-size: 1.5em;
					font-weight: 700;
					background: -webkit-linear-gradient(45deg, #90EE90, #87CEFA);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					-moz-background-clip: text;
					-moz-text-fill-color: transparent;
				}

				.icon-username,
				.icon-password,
				.icon-userkey {
					position: relative;
					height: 40px;
					font-family: "Roboto", sans-serif;
					font-size: 1em;
					border-radius: 8px;
					border: 3px solid #708090;
					padding-left: 40px!important;
					margin-bottom: 12px;
					background-color: #fff;
					resize: vertical;
					box-sizing: border-box;
				}
				
				.icon-username {
					background-image: url('img/user.png')!important;
					background-repeat: no-repeat!important;
					background-position: 6px 2px!important;	
				}

				.icon-password {
					background-image: url('img/password.png')!important;
					background-repeat: no-repeat!important;
					background-position: 7px 2px!important;
				}
		
				.icon-userkey {
					background-image: url('img/key.png')!important;
					background-repeat: no-repeat!important;
					background-position: 4px 2px!important;
				}
				
				.btn-login {
					width: 175px;
					height: 30px;
					cursor: pointer;
					font-family: "Roboto", sans-serif;
					font-size: 0.875em;
					font-weight: 700;
					background-image: linear-gradient(to bottom right, #E6E6FA, #F8F8FF);
					border-bottom: 3px solid transparent;
					border-image: linear-gradient(0.20turn, rgba(0,255,0), rgba(65,105,225));
					border-image-slice: 1;
					border-radius: 3px;
				}
				.btn-login:hover {background-image: linear-gradient(to bottom right, #90EE90, #87CEFA);}

		.terms,
		.activation-instructions {display:flex;padding:2%;flex-direction:column;}
		
			.termsFirstParagraph p {font-weight:700!important;}
			.aiSecondParagraph p {line-height:0.5;}
			.aiThirdParagraph p {color:#90EE90;text-transform:uppercase;font-weight:600;}
				.aiNoticeText {font-size:0.925em;color:#87CEFA!important;margin-left:10px;text-transform:none;}
				.aiSupportNr {color:#90EE90;font-weight:600;}
			
	.login-footer,
	.login-footer-small {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #202e38;
		text-align: left;
		border-top: 3px solid #DAA520;
	}
	
	.login-footer {height:175px;padding:0px 100px;}
	.login-footer-small {height:85px;padding:0 2em 2em 2em;}
	.login-footer p {color:#F5FFFA;margin-top: -15px;}	
	.login-footer-small p {font-size:0.75em;color:#F5FFFA;margin-top: -15px;}

	@media screen and (max-width: 540px), (max-height: 900px) {
		.login-box {
			top: 38%;
			padding: 0.75em;
			width: 320px;
			height: 350px;
		}
		
		.login-content {column-gap:0.3em;}
		.login-logo {max-width:40%;}
		.login-logo img {width:90%!important;margin-top:10%;}
		.loginfield input[type="password"],
		.loginfield input[type="text"] {width:75%;}
		
		.tm-title {
			font-size: 1.1em;
		}
		
		.terms {width: 95%;padding-left: 3%;}
		.terms p {font-size: 0.825em;color: #F5FFFA;}
		
		.aiSecondParagraph,
		.aiThirdParagraph,
		.termsSecondParagraph {display: none;}
	}

	@media screen and (min-width: 540px) and (min-height: 900px) {
		.login-box-small {display: none;}
	}

	@media screen and (max-height: 480px) {
		.login-box {
			top: 50%!important;
			height: 210px;
			overflow: hidden;
		}
		
		.terms, 
		.aiFourthParagraph {display: none;}
		
		.aiFirstParagraph {margin-top:-10px;font-size:0.8em!important;}
	}

	@media screen and (max-height: 940px) {
		.login-footer {
			display: none;
		}
	}
	
	@media screen and (min-height: 940px), (max-height: 480px) {
		.login-footer-small {
			display: none;
		}
	}



/* GLOBAL HEADER */

#header {
	overflow: auto;
	overflow-y: hidden!important;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	height: 120px;
	z-index: 9;
	background-color: var(--bg-header);
	border-bottom: 2px solid transparent;
	border-image: var(--gradient-header);
	border-image-slice: 1;
}
	
	.support {
		float: left;
		display: flex; 
		flex-direction: row; 
		height: 110px;
		align-items: center;
	}
	
		.logo {float:left;align-self:center;}
		.logo img {max-width:80px!important;}

		.tm-txt {float:left;display:flex;flex-direction:column;margin-top:4px;}
		.tm-txt img {width: 168px;}
			
			.tm-image {height: 42px;}
			
			.support-info {display:flex;flex-direction:row;align-items:center;height:28px;}
				.support-icon {}
				.support-icon img {width: 25px; height: 25px; top: 0!important;}
				.support-phone {width: 130px;text-align: center!important;font-size: 0.985em;font-weight: 600; color: #F0FFF0; line-height: 1.2!important;height: 24px;}
				.support-mail {width: 130px;text-align: center!important;font-size: 0.9125em;font-weight: 600; color: #F0FFF0; line-height: 1.6!important;height: 24px;}

	.navbar {
		display: flex;
		float: left;
		width: auto;
	}

		.navigator {
			justify-content: center;
			display: grid;
			grid-template-rows: 32px 32px 32px;
			grid-auto-flow: column;
			gap: 3px;
			padding: 8px 8px;
		}

		.navigator > div {
			background-color: rgba(255, 255, 255, 0.8);
			border: 1px solid black;
			text-align: center;
		}

		.split-button {
			position: relative; /* container grid-solussa */
			width: 100%;        /* vie yhden grid-solun leveyden */
			height: 32px;       /* sama kuin muut napit */
		}

		.split-button button {
			position: absolute;
			top: 0;
			bottom: 0;
			width: calc(50% - 1.5px);
			font-size: 10px!important;
			padding: 0 4px;
		}

		.split-button button:first-child {
			left: 0;
		}

		.split-button button:last-child {
			right: 0;
		}
	
	.navLinks {
			float: right;
			display: none;
			margin-top: 0;
			right: 0;
			/*margin-right: .1em;*/
			padding-left: 0.4em;
			padding-right: 0.4em;
			position: absolute;
			z-index: 99;
			/*background-image: linear-gradient(#303030,	#444444);*/
			background-color: #000000;
			border: 2px solid transparent;
			border-image: var(--frame4);
			border-image-slice: 1;
			border-radius: 4px;
		}
		
			.nav-active {display: flex;position: fixed;}
	
		@media screen and (min-width: 930px) and (min-height: 720px) {
			.nav-active {display:none;}
		}
	
		.navLinks ul {margin: 0;padding: 0;dipslay: flex;}
		
		.navLinks li {
			cursor: pointer;
			font-size: 0.925em;
			color: #ADFF2F;
			list-style: none;
			padding: 0.2em;
		}
		
			.navList {
				cursor: pointer;
				color: #ADFF2F;
				list-style: none;
				padding: 0.1em;
				font-weight: 600;
				outline: none;
				border: none;
				background: transparent;
				text-transform: uppercase;
			}
		
			.navList:hover {
				background-color: #303030;
				color: #FF8C00!important;
			}

			.unauthorized {
				cursor:not-allowed;
				color:#DCDCDC;
				list-style: none;
				padding: 0.1em;
				font-weight: 500;
				outline: none;
				border: none;
				background: transparent;
				text-transform: uppercase;
			}
	
	.headerRightContent {
		display: flex;
		/*align-items: center;*/
		justify-content: space-between;
	}
	
		.notification {
			float: left;
			width: auto;
			display: none/*inline-block*/;
			padding: 1px;
			box-sizing: border-box;
		}
	
			.notification-area {padding: 6px 2px;}
			
				.notification-icon {float: left;width: 45px;height: 45px;}
				.notification-icon:hover + .notification-text-area {display: block;}

				.btn-bell {
					cursor: pointer;
					width: 35px;
					height: 35px;
					background: url('img/bell_v2.png') transparent no-repeat;
					background-size: 32px 32px;
					background-position: center;
					border: none;
				}

					.btn-bell:hover {
						background: url('img/bell_v3.png') transparent no-repeat;
						background-position: center;
						background-size: 32px 32px;
						transition: all 600ms;
					}

				.notification-text-area {
					overflow: hidden!important;
					display: none;
					position: absolute;
					padding: 2px 4px!important;
					width: 350px;
					height: 74px;
					margin-top: 28px;
					margin-left: 44px;
					text-align: left;
					background: rgba(0, 0, 0, 0.7);
					border: 1px solid transparent;
					border-image: var(--frame2);
					border-image-slice: 1;
					border-radius: 5px;
					z-index: 20;
				}
			
					.notificationDate {font-size:1.25em;font-weight:700;color:#DAA520;line-height:1.4em;}
			
				.notifications-amount {
					position: relative;
					float: left;
				}
			
				.notifications-amount p {
					margin: 0;
					color: var(--text);
					text-transform: uppercase;
					font-family: inherit;
					font-size: 0.85em;
					/*font-size: 14px;*/
				}
			
				.blink-text {
					/*display: inline-block;*/
					animation: blink 3s infinite;
					font-size: 18px;
				}

				@keyframes blink {
					0%, 100% {
						color: #FFD700!important;
					}
  
					50% {
						color: transparent!important;
					}
				}
	
		.settings {
			float: right;
			width: 215px;
			padding: 6px 4px;
			margin-right: 0.3em;
			font-size: 1.0em;
			font-weight: 700;
			overflow: hidden;
			display: flex;
			/*flex-direction: row;*/
			justify-content: flex-end;
			align-items: center;
			margin-left: auto;
			/*background: green;*/
		}

			.buttons {
				display: flex;
				flex-direction: row-reverse;
				align-self: flex-start;
				padding: 6px;
				width: 90px;
				/*justify-content: space-between;*/
			}

				.settings-btn-cell {
					margin-right: 4px;
					width: 42px;
					height: 42px;
					background-image: linear-gradient(to bottom right, #87CEFA, #00008B);
				}

					.btn-settings {
						cursor: pointer;
						width: 42px;
						height: 42px;
						background: url('img/icon-settings.png') transparent no-repeat;
						background-size: 28px 28px;
						background-position: center;
						border: 2px solid transparent;
						border-image: linear-gradient(0.30turn, rgba(221,160,221), rgba(248,248,255));
						border-image-slice: 1;
					}

					.btn-settings:hover {
						background: url('img/icon-settings-hover.png') transparent no-repeat;
						background-position: center;
						background-size: 28px 28px;
						border: 2px solid transparent;
						border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
						border-image-slice: 1;
						scale: 1.06;
					}

				.nav-btn-cell {
					width: 42px;
					height: 42px;
					background-image: linear-gradient(to bottom right, #87CEFA, #00008B);
				}
	
					.btn-navlist {
						cursor: pointer;
						width: 42px;
						height: 42px;
						background: url('img/navlist-white.png') transparent no-repeat;
						background-size: 28px 28px;
						background-position: center;
						border: 2px solid transparent;
						border-image: linear-gradient(0.30turn, rgba(221,160,221), rgba(248,248,255));
						border-image-slice: 1;
					}
	
					.btn-navlist:hover {
						color:#fff;
						background: url('img/navlist-hover.png') transparent no-repeat;
						background-position: center;
						background-size: 28px 28px;
						border: 2px solid transparent;
						border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
						border-image-slice: 1;
						scale: 1.06;
					}

			.login-details {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
				width: 155px;
			}
			
				.logged-as {
					margin-top: 6px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-family: "Roboto", sans-serif;
					color: #ADFF2F;
					font-size: 0.875em;
					font-weight: bold;
					text-decoration: none;
				}

					.loginText {color:#F8F8FF;font-size:1.0em;text-transform: uppercase;}
					
					.hLoginName {
						cursor: pointer;
						white-space: nowrap;
						text-overflow:ellipsis;
						font-family: "Roboto", sans-serif;
						color: var(--a-link);
						font-weight: bold;
						text-decoration: none;
						outline: none;
						border: none;
						background: transparent;
					}
					.hLoginName:hover {color: var(--a-hover);}
	
				.btn-logoff {
					cursor: pointer;
					width: 34px;
					height: 34px;
					margin-top: 5px;
					padding-left: 2px;
					background: url('img/logoff.png') transparent no-repeat;
					background-size: 34px 34px;
					background-position: center;
					transform: scale(0.90);
					border: none!important;
					transition: all 450ms;
				}

				.btn-logoff:hover {
					background: url('img/logoff-hover.png') transparent no-repeat;
					background-size: 34px 34px;
					background-position: center;
					transform: scale(-1, 1.0);
					transition: all 750ms;
				}

				.logout-button {
					position: relative;
					width: 36px;
					height: 36px;
				}

				.logout-image {
					width: 100%;
					height: 100%;
					background: url('img/logoff.png') transparent no-repeat;
					background-size: 32px 32px;
					background-position: center;
					transform: scale(0.90);
					transition: all 850ms ease-in-out;
				}
				
				.logout-button:hover .logout-image {
					background: url('img/logoff-hover.png') transparent no-repeat;
					background-size: 32px 32px;
					background-position: center;
					transform: scale(1) rotateY(180deg);
					transition: all 600ms ease-in-out;
				}
	
				.hidden-button {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
					cursor: pointer;
					z-index: 7;
				}
	
		.environmentName {
			margin-top: -8px;
			text-align: right;
			margin-right: 0.7em;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.environmentName h2,
		.environmentName h3 {line-height: 0.3;}
		.environmentName h2 {font-size: 1.4em;}
		.environmentName h3 {font-size: 1.1em;}
		.environmentName h3 {margin-top: 2px;}

	@media screen and (max-width: 1000px) {
		.main-admin-button {width:80px;font-size:0.6em;}
	}

	@media screen and (max-width: 293px) {
		.support {display:none;}
	}

	@media screen and (min-width: 930px) and (min-height: 720px) {
		.tiny-navbar {display:none;}
	}


		div.nav-list select {
			width: 40%;
			height: 42px;
			font-family: "Roboto", sans-serif;
			font-size: 0.8125em;
			font-weight: 700;
			background-image: linear-gradient(to bottom right, #90EE90, #87CEFA);
		}
	
		div.nav-list select:focus {
			font-weight: 700;
			background-color: #00FF7F!important;
		}
	
		.mini-menu {
			padding: 16px 4px;
		}
	
	@media screen and (min-width: 931px), (max-height: 720px) {
		#nav-list {display: none;}
	}


	@media screen and (max-width: 1200px), (max-height: 720px) {
		.notification {display: none;}
		.login-details {display: none;}
		/*.settings {width: 100px!important;}*/
	}

	@media screen and (max-width: 929px), (max-height: 720px) {
		#header {height: 70px;}
		.support-info {display:none;}
		.logo {align-self: flex-start!important;}
		.logo img {max-width: 55px!important;}
		.tm-txt {height: 85px;flex-direction: row!important;align-self: center!important;}
		.tm-txt img {width:225px!important;}
	}

	@media screen and (min-width: 931px) and (min-height: 721px) {
		.nav-btn-cell {display: none;}
	}

	@media screen and (max-width: 930px), (max-height: 720px) {
		.navbar {display: none;}
	}

	@media screen and (max-width: 440px) {
		.tm-txt {display: none;}
	}

/* HEADER MINI (Schedule Header) */

.header-mini {
	overflow: hidden;
	background-color: #000;
	padding: 2px 8px;
	margin: 0;
	height: 75px;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(45,45,45));
	border-image-slice: 1;
}

	.icon-box {float: left!important;padding: 16px 4px;}

		.home-btn-cell {width: 42px;height: 42px;background-image: linear-gradient(to bottom right, #7FFF00, #0000CD);}

			.btn-home {
				cursor: pointer;
				width: 42px;
				height: 42px;
				background: url('img/icon-home.png') transparent no-repeat;
				background-size: 28px 28px;
				background-position: center;
				border: 2px solid transparent;
				border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
				border-image-slice: 1;
			}

				.btn-home:hover {
					background: url('img/icon-home-hover.png') transparent no-repeat;
					background-size: 28px 28px;
					background-position: center;
					scale: 1.06;
				}

	.icon-box-variable {float: left!important;padding: 16px 4px;}
	
		@media screen and (max-width: 760px) {
			.icon-box-variable {float:right!important;}
		}
		
		.settings-cal-cell {float: left;width: 42px;height: 42px;background-image: linear-gradient(to bottom right, #B22222, #F08080);}

	.schedule-navigation {
		display: grid;
		grid-template-columns: 120px 120px 120px 120px 120px;
		background-color: transparent!important;
		gap: 5px;
		float: left;
		padding: 10px 4px;
		border: none;
	}

		.btn-week,
		.btn-day,
		.btn-research,
		.btn-season {
			cursor: pointer;
			font-family: "Roboto", sans-serif;
			font-size: 0.75em;
			font-weight: bold;
			width: 120px;
			height: 25px;
			border-bottom: 2px solid transparent;
			border-image-slice: 1;
			border-radius: 4px;
		}

		.btn-week {background-image:linear-gradient(#D2691E, #DAA520);border-image:linear-gradient(0.20turn, rgba(218,165,32), rgba(240,230,140));}
		.btn-day {background-image:linear-gradient(#DAA520, #FFFAF0);border-image:linear-gradient(0.20turn, rgba(255,215,0), rgba(240,230,140));}
		.btn-research {background-image:linear-gradient(#B22222, #FFB6C1);border-image:linear-gradient(0.20turn, rgba(250,128,114), rgba(248,248,255));}
		.btn-season {background-image:linear-gradient(#F08080, #FAF0E6);border-image:linear-gradient(0.20turn, rgba(221,160,221), rgba(248,248,255));}
		
		.btn-week:hover,
		.btn-day:hover {color: #fff;background-image: linear-gradient(to bottom right, #D2691E, #FFFAF0);scale: 1.03;}
		.btn-research:hover,
		.btn-season:hover {color: #fff;background-image: linear-gradient(to bottom right, #F08080, #FAF0E6);scale: 1.04;}

	#tiny-calbar {float:right;}

	.calLinks {
			float: right;
			display: none;
			margin-top: 0;
			margin-right: .6em;
			right: 0;
			padding-left: 0.5em;
			padding-right: 0.5em;
			position: absolute;
			z-index: 99;
			background-image: linear-gradient(#303030,	#444444);
			border: 2px solid transparent;
			border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
			border-image-slice: 1;
			border-radius: 4px;
		}
		
			.cal-active {display: flex;position: fixed;}
	
		@media screen and (min-width: 760px) {
			.cal-active {display:none;}
		}
	
		.calLinks ul {margin: 0;padding: 0;dipslay: flex;}
		
		.calLinks li {list-style: none;padding: 0.2em;font-size: 1em;font-weight: 700;}
		
			.calLinks li a {color: #CD5C5C;}
		
			.calLinks a:hover {background-color: #FFB6C1;color: #000!important;}
		
			.calLinks li:hover {background-color: #333333}
	
			.unauthorized {color:#DCDCDC;cursor:not-allowed;font-size: 0.875em;}
			
				.unauthorized li:hover {}
	
	.cal-btn-cell {width: 42px;height: 42px;background-image: linear-gradient(to bottom right, #B22222, #F08080);/*background-image: linear-gradient(0.20turn, rgba(250,128,114), rgba(221,160,221));*/}
	
		.btn-callist {
			cursor: pointer;
			width: 42px;
			height: 42px;
			background: url('img/navlist-white.png') transparent no-repeat;
			background-size: 28px 28px;
			background-position: center;
			border: 2px solid transparent;
			border-image: linear-gradient(0.20turn, rgba(221,160,221), rgba(248,248,255));
			border-image-slice: 1;
		}
	
			.btn-callist:hover {
				color:#fff;
				background: url('img/navlist-hover.png') transparent no-repeat;
				background-position: center;
				background-size: 28px 28px;
				border: 2px solid transparent;
				border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
				border-image-slice: 1;
				scale: 1.06;
				}
	
	@media screen and (min-width: 760px) {
		#tiny-calbar {display:none;}
	}
	
	.schedule-navigation-list {
		display: flex;
		float: left;
		width: auto;
		padding: 10px 4px;
	}

		.list-title {width: auto;padding: 0px 4px;}

		.list-input {width: 80px!important;padding: 0px 4px;overflow: hidden;}

	@media screen and (max-width: 760px) {
		.schedule-navigation {display: none;}
	}
	
	@media screen and (min-width: 760px) {
		.schedule-navigation-list {display: none;}
	}



/* FOOTERs */

#footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 6px;
	background-color: #000;
	color: white;
	z-index: 9;
}

	.footer {display:flex;align-items:center;}
	.fItem0 {margin-right:0.5em;}
	.fItem1 {height:auto;overflow:hidden;margin-left:auto;margin-right:4px;}
	.fItem3 {height:auto;width:36px;overflow:hidden;text-align:center;}
	.fItem4,
	.fItem5 {height:auto;}
	.footerNotificationsIcon {width:22px;height:22px;position:relative;}
	.notificationsCount {
		position: absolute;
		top: 40%;
		transform: translateY(-40%);
		right: -5px;
		background-color: red;
		color: white;
		border-radius: 50%;
		padding: 2px 4px;
		font-size: 12px;
	}
	
	.logout-button-s {
		position: relative;	
		width: 26px;
		height: 26px;
	}
	
	.logout-image-s {
		width: 100%;
		height: 100%;
		background: url('img/logoff.png') transparent no-repeat;
		background-size: 25px 25px;
		background-position: center;
		transform: scale(0.90);
		transition: all 850ms ease-in-out;
	}
	
	.logout-button-s:hover .logout-image-s {
		background: url('img/logoff-hover.png') transparent no-repeat;
		background-size: 25px 25px;
		background-position: center;
		transform: scale(1) rotateY(180deg);
		transition: all 600ms ease-in-out;
	}

		.fLoginName {
			cursor: pointer;
			white-space: nowrap;
			text-overflow:ellipsis;
			font-family: "Roboto", sans-serif;
			color: var(--a-link);
			font-size: 0.875em;
			font-weight: bold;
			text-decoration: none;
			outline: none;
			border: none;
			background: transparent;
		}
		.fLoginName:hover {color: var(--a-hover);}
	
	.btn-call-small,
	.btn-email-small,
	.btn-logoff-small,
	.notifications-icon {
		cursor: pointer;
		width: 22px;
		height: 22px;
		background-repeat: no-repeat;
		background-size: contain;
		border: none;
	}

	.btn-call-small {background-image:url('img/icon-phone-gold.png');background-color: transparent;}
	.btn-email-small {background-image:url('img/icon-email-gold.png');background-color: transparent;}

@media screen and (min-width: 1200px) and (min-height: 721px) {
	#footer {display:none;}
}

@media screen and (min-width: 1560px) {
	.fItem5 {display:none;}
}

@media screen and (min-width: 930px) and (min-height: 720px) {
	.fItem3, .fItem4 {display:none;}
}

.footer-equalizer {
	height: 60px;
	/*background-color: orange;*/
}

@media screen and (min-width: 1200px) {
	.footer-equalizer {display: none;}
}



/* PAGE-SPECIFIC-NAVIGATION */

.page-specific-top, 
.createMarketingTop {
	position: relative;
	overflow-x: visible;
	min-height: 50px;
	height: auto;
	padding: 6px 0px;
	margin: 0;
	background-image: var(--bg-top);
}

.page-specific-top, 
.createMarketingTop h3 {text-transform: uppercase;padding: 2px 8px;}

	.page-specific-nav, 
	.createMarketingNav {
		display: flex;
		flex-direction: column;
		padding: 0px 8px;
		row-gap: 0.6em;
	}
	
		.page-specific-title, 
		.createMarketingTitle {
			display: flex;
			flex-direction: row;
			position: relative;
			font-family: "Roboto", sans-serif;
			font-weight: bold;
			font-size: 1em;
			padding: 0.6em 0;
			text-transform: uppercase;
			color: var(--text);
		}

		.page-specific-paragraph {
			display: flex;
			max-width: 380px;
			/*background-color: green;*/
		}
		
		.page-specific-select {
			display: flex;
			flex-direction: row;
			column-gap: 4px;
		}

.middle {width: 98%;overflow-x: visible;padding-left:6px;padding-top: 4px;}



/* WAREHOUSE VIEW */

.header-equalizer {
	height: 12px;
}

.top {
		display: flex;
		flex-direction: row;
		position: static;
		max-height: 240px;
		padding: 6px 0px;
		margin: 0;
		background-image: var(--bg-top);
	}

	#warehouse {
		float: left;
		padding: 2px 5px;
		display: block;
		max-width: 290px;
	}

		.warehouse-name {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis "[..]";
			float: left;
			max-width: 250px;
		}
		.warehouse-name:first-letter {text-transform: uppercase;}

		.warehouse-details {padding: 6px 0px;float: right;width: 25px;margin-right:6px;}

			.btn-edit-wh {
				cursor: pointer;
				width: 22px;
				height: 22px;
				background: var(--icon-settings);
				background-size: 21px 21px;
				background-position: center;
				border: none!important;
				transition: all 1200ms;
			}
				
				.btn-edit-wh:hover {
					background: url('img/icon-settings-hover.png') transparent no-repeat;
					background-size: 21px 21px;
					background-position: center;
					scale: 1.15;
					transition: all 1200ms;
				}
				.btn-edit-wh:hover:not(:active) {transform:rotate(-180deg);}
				.btn-edit-wh:not(:hover) {transform:rotate(-0deg);}

			.warehouse-details:hover + .edit-warehouse-details {
				display: block;
				z-index: 99;
			}
					
				.edit-warehouse-details {
					display: none;
					position: absolute;
					padding: 2px 4px!important;
					width: 170px!important;
					height: 18px!important;
					margin-left: 250px;
					margin-top: -24px;
					border: 2px solid #B8860B!important;
					border-radius: 5px;
					background-color: #000;
					text-align: center;
				}

		.warehouse-reports {
			margin-left: -1px;
			padding: 2px 0px;
		}
		
			.warehouse-reports select {
				width: 281px;
				height: 26px;
				font-weight: 500;
			}

		.tire-size-max {
			font-color: var(--primary-color);
			display: block;
			overflow-y: auto!important;
			overflow-x: hidden;
			width: 278px;
			max-height: 155px;
			background: var(--table-bg);
			border: var(--table-solid);
		}
			.tire-size-list {display: table;width: 100%;border-collapse: collapse;}
			.tslRow {display: table-row;}
			.tslCell {border:var(--table-solid);display:table-cell;height:0.2em;padding:0px 4px;}
			
			.tslCell.first {width:65px;}
			.tslCell.second {width:25px;}
			.tslCell.third {width: 187px;}
			
			p.small {color:var(--primary-color);font-size:0.8125em;font-weight:500;}
			p.small span.has-space::before { content: "\00a0"; }
			p.small span.has-space::after { content: "\00a0"; }

		.chatMessages {
			
		}
		
		.sendMessages {
			
		}
		.sendMessages input[type=text] {width: 85%;height: 22px;background: var(--bg-input);resize: vertical;box-sizing: border-box;}
	
	@media screen and (max-width: 800px) {
		#warehouse {display: none;}
	}
	
	#definitions {width:72px;float:left;margin-left:2px;}

		.multiple-warehouse {float:left;width: 35px!important;}
		.multiple-warehouse img {margin-left:4px;margin-top:2px;}

			.multiple-warehouse:hover + .multiple-text-area {display:block;z-index: 99;}
					
				.multiple-text-area {
					display: none;
					position: absolute;
					padding: 2px 4px!important;
					width: 170px!important;
					height: 18px!important;
					margin-top: -22px;
					border: 2px solid #B8860B!important;
					border-radius: 5px;
					background-color: #000;
					text-align: center;
				}
				
		.removed-too {padding: 0px 2px;float: left;width: 30px!important;}
			
			.removed-too:hover + .removed-text-area {display: block;z-index: 99;}
					
				.removed-text-area {
					display: none;
					position: absolute;
					padding: 2px 2px!important;
					width: 170px!important;
					height: 18px!important;
					margin-left: 40px;
					margin-top: -22px;
					border: 2px solid #B8860B!important;
					border-radius: 5px;
					background-color: #000;
					text-align: center;
				}
			
		.check-box {margin-top:-6px;padding:0px 4px;float:left;width: 26px!important;}

	#search {float: left;max-width: 350px;padding: 16px 1px;display: block;}
	
	#mainSearch {
		display: flex;
		align-items: center;
		padding: 4px;
		height: 38px;
	}
	
		.category-select {
			position: relative;
			margin-right: -2px;
			box-sizing: border-box;
		}

			.category-select select {
				font-family: "Roboto", sans-serif;
				font-size: 0.9125em!important;
				font-weight: 500;
				height: 42px;
				margin-right: -1px;
				border: none!important;
				border-radius: 6px 0px 0px 6px!important;
				box-sizing: border-box;
				background: #DCDCDC;
			}
			
				.category-select select:focus {
					background-color: #F5FFFA!important;
					outline: none;
					border: none;
				}
				.category-select select option:disabled {text-transform: uppercase;background-color: #C0C0C0;font-weight: bold;}
		
		.mainSearch-input {
			display: flex;
			align-items: center;
			box-sizing: border-box;
		}
		
			.mainSearch-input > input {
				font-family: "Roboto", sans-serif;
				font-size: 1.2em;
				font-weight: 500;
				border-radius: 0px!important;
				border: none!important;
				padding: 4px;
				width: 100%;
				height: 2.2em;
				position: relative;
				outline: none;
				box-sizing: border-box;
				background: #DCDCDC;
			}
			.mainSearch-input > input::placeholder {text-transform: capitalize;font-size: 0.75em!important;}
			
			.mainSearch input:focus {
				font-size: 1.4em!important;
				outline: none!important;
				box-shadow: none!important;
				background-color: #F5FFFA!important;
			}
			
		.mainSearch-button {
			border: none;
			background-color: #DCDCDC;
			cursor: pointer;
			font-family: "Roboto", sans-serif;
			font-size: 0.875em;
			font-weight: bold;
			height: 42px;
			margin-left: -2px;
			text-transform: uppercase;
			border-radius: 0px 6px 6px 0px!important;
		}
		
			.mainSearch-button:hover {background-color: #F5FFFA;transition:none;}
			.mainSearch-button:hover:hover {background-color: #00FF7F!important;transition: background-color 1.6s;}

		.main-search-selection {display:flex;padding:2px 4px;color:#000!important;text-decoration:none;}

			.main-search-selection select {height:36px!important;border-radius:4px;font-size:0.9125em!important;}

		.main-search-keyword {float: left;width: 136px!important;padding: 2px 4px;z-index:-1;}
		
		.main-search-keyword:placeholder-shown {
				text-overflow: ellipsis;
			}
			
		.main-search-keyword input:focus {border: 3px solid #00FF7F!important;}

		.search-execute {float:left;width:56px!important;padding:1px 2px;text-align:center;vertical-align:middle;}

			.btn-execute {
				float: left;
				cursor: pointer;
				font-family: "Roboto", sans-serif;
				width: 60px;
				height: 40px;
				color: #000!important;
				background-color: #F5FFFA;
				font-size: 0.875em;
				font-weight: bold;
				border-radius: 6px!important;
			}
			.btn-execute:hover {background-color: #00FF7F;}

		.tiresize-search-title {
			margin-bottom: -18px;
			margin-left: 4px;
			padding: 6px 4px;
			display: inline-block;
		}

		.tire-size-search {float: left;width: 280px!important;padding: 8px 4px;color: #000!important;text-decoration: none;}
			.tire-size-search select {width: 278px;font-size:0.875em;}

			#width {clear:left;float:left;width:65px}
			#profile {float:left;width:65px}
			#rim {float:left;width:65px}

			.target-slash {
				color: #fff!important;
				margin-top: 4px;
				float: left;
				vertical-align: top!important;
				font-family: "Roboto", sans-serif;
				font-size: 16px;
				font-weight: bold;
			}

		.reduce {float:left;position:relative;width:50px!important;margin-top:-2px;padding:0px 0px;text-align:center;}
		
		.arrow-container {
			height: 35px;
		}

		.arrow {
			position: absolute;
			top: 50%;
			left: 0%;
			margin-left: 6px;
			width: 100%;
			transform: translate(-50%, -50%) rotate(180deg);
			cursor: pointer;
			/*overflow: hidden;*/
		}
		.arrow-link {text-decoration:none;}

			.arrow span {
				display: block;
				width: 18px;
				height: 18px;
				border-bottom: 4px solid var(--arrowspan);
				border-right: 4px solid var(--arrowspan);
				transform: rotate(45deg);
				margin: -12px;
			}

			.reduce:hover .arrow span {
				animation: animate 2s infinite;
			}

			.reduce:hover .arrow span:nth-child(1) {
				animation-delay: -1.2s;
			}

			.reduce:hover .arrow span:nth-child(2) {
				animation-delay: -0.8s;
			}

			.reduce:hover .arrow span:nth-child(3) {
				animation-delay: -0.4s;
			}

@keyframes animate {
    0% {
        opacity: 1;
        border-bottom-color: var(--arrowspan-hover2);
        border-right-color: var(--arrowspan-hover2);
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        border-bottom-color: var(--arrowspan-hover);
        border-right-color: var(--arrowspan-hover);
    }
}
		
		.refresh {float:left;width:50px!important;padding:16px 4px;text-align:center;vertical-align:middle;}

			.refresh-top {
				cursor: pointer;
				width: 40px;
				height: 51px;
				margin-left: 4px;
				background: var(--refresh);
				background-size: 40px 51px;
				border: none;
				transition: all 1200ms;
			}

			.refresh-top:hover {
				width: 40px;
				height: 51px;
				background: var(--refresh-hover);
				background-size: 40px 51px;
				border: none;
				transition: all 1200ms;
			}
			
		.refresh-top:hover:not(:active) {transform:rotate(180deg);}
		.refresh-top:not(:hover) {transform:rotate(0deg);}

		.xl-buttons {
			font-family: "Roboto", sans-serif;
			font-size: 14px;
			text-align: center;
		}

		.XXL-BTNS {display: inline-block;margin-top: 6px;}

			.lueqr {
				background: url('img/qr.png') no-repeat 5% 50% transparent;
				background-color: var(--bg-btn);
				color: #FFFFE0;
				cursor: pointer;
				line-height: 1.6;
				font-weight: bold;
				margin-right: 5px!important;
				width: 134px;
				height: 60px;
				padding-left: 45px;
				border-radius: 6px;
			}
				.lueqr:hover {
					background: url('img/qr-black.png') no-repeat 5% 50% transparent;
					background-color: var(--bg-btn-hover);
					color: #000!important;}

			.srl {
				background-color: var(--bg-btn);
				color: #FFFFE0;
				cursor: pointer;
				line-height: 1.6;
				font-weight: bold;
				width: 134px;
				height: 60px;
				border-radius: 6px;
			}
			.srl:hover {background-color: var(--bg-btn-hover);color: #000!important;}

	@media screen and (max-width: 449px) {
		#definitions {display: none;}
	}

.top-reduced
	{overflow: hidden;padding: 6px 6px;margin: 0;background-image:var(--bg-top);}
	
	#definitions-reduced
		{display:flex;flex-direction:column;width:36px;float:left;}
		
		.check-box-reduced {padding:4px 3px;float:left;width: 28px!important;}

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

	#search-reduced {
		float: left;
		max-width: 420px;
		flex-direction: row;
		padding: 6px 0px;
		display: flex;
	}
	
	.reduced-search-equalizer {width: 78px!important;background:blue;}
	
	.arrow-reduced {
		position: absolute;
		top: 22%;
		left: 30%;
		width: 100%;
		transform: translate(-50%, -50%);
		transform: rotate(360deg);
		cursor: pointer;
	}
	
	.arrow-reduced span {
		display: block;
		width: 18px;
		height: 18px;
		border-bottom: 4px solid var(--arrowspan);
		border-right: 4px solid var(--arrowspan);
		transform: rotate(45deg);
		margin: -12px;
	}
	
	.reduce-reduced:hover .arrow-reduced span {
		animation: animate-reduced 2s infinite;
	}

	.reduce-reduced:hover .arrow-reduced span:nth-child(3) {
		animation-delay: -0.4s;
	}

	.reduce-reduced:hover .arrow-reduced span:nth-child(2) {
		animation-delay: -0.8s;
	}

	.reduce-reduced:hover .arrow-reduced span:nth-child(1) {
		animation-delay: -1.2s;
	}
	
	@keyframes animate-reduced {
    0% {
        opacity: 1;
        border-bottom-color: var(--arrowspan-hover2);
        border-right-color: var(--arrowspan-hover2);
    }
    50% {
        opacity: 0;
        border-bottom-color: var(--arrowspan-hover);
        border-right-color: var(--arrowspan-hover);
    }
    100% {
        opacity: 0;
        border-bottom-color: var(--arrowspan-hover);
        border-right-color: var(--arrowspan-hover);
    }
}
	
	.main-search-selection-reduced {float:left;width:120px!important;padding:2px 2px;color:#000!important;text-decoration:none;}
	
		.search-selection-reduced {
			padding: 2px;
			width: 120px;
			height: 38px;
			font-size: 0.75em;
		}
		
	.main-search-keyword-reduced {float: left;width: 120px!important;padding: 2px 6px;}
		
		.icon-search-reduced {
			overflow: hidden;
			width: 120px!important;
			border: 2px solid #ADFF2F;
			background-image: url('img/searchicon.png')!important;
			background-color: transparent!important;
			background-position: 4px 1px!important;
			background-repeat: no-repeat!important;
			box-sizing: border-box!important;
			border-radius: 4px;
			font-family: "Roboto", sans-serif;
			font-size: 0.875em;
			font-weight: bold;
			color: #F5FFFA;
			padding: 8px 20px 8px 40px;
		}

		.reduce-reduced {float:left;position:relative;width:56px!important;margin-top:-6px;margin-left:4px;padding:0px 2px;text-align:center;}

		.refresh-reduced {float:left;width:56px!important;margin-top:-2px;padding:0px 6px;text-align:center;vertical-align:middle;}

			.refresh-reduced-eq {width: 30px!important;background-color:blue;}
			
			@media (min-width: 862px) {
				.refresh-reduced-eq {display:none;}
			}

	.tire-size-search-reduced {float: left;padding: 8px 2px;color: #000!important;text-decoration: none;}

	.tiresize-search-title-reduced {
			margin-bottom: -18px;
			margin-left: 10px;
			padding: 0px 4px;
			display: inline-block;
		}
	
	@media screen and (max-width: 440px) {
		.tire-size-search-reduced select.S {
			width: 42px!important;
		}
		
		#search-reduced #categoryOptions {
			width: 110px!important;
		}
		
		#search-reduced .mainSearch-input input {
			width: 110px!important;
		}
	}

.hyllykaytavat {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 2px;
	text-align: center!important;
	text-decoration: none;
}

	.hylly, 
	.hylly2, 
	.hylly4 {
		flex: 0 0 auto;
		padding: 3px !important;
		box-sizing: border-box;
	}

	/*.hylly2 {
		flex: 0 0 auto;
		padding: 3px !important;
		box-sizing: border-box;
	}*/

		.hyllynappi,
		.hyllynappi2, 
		.hyllynappi4 {
			cursor: pointer;
			font-family: "Calibri", sans-serif;
			font-size: 1.8em;
			font-weight: bold;
			color: #fff;
			background-color: var(--bg-btn);
			border: none;
			box-shadow: inset 0 0 6px #444444;
			min-height: 48px!important;
			/*min-width: 52px;*/
			vertical-align: top;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.hyllynappi {
			min-width: 52px;
			border-radius: 25% 10%!important;
		}

		.hyllynappi2 {
			border-radius: 16% 4%!important;
			width: 100%;
			min-width: 112px;
		}
		
		.hyllynappi4 {
			border-radius: 12px 4px!important;
			width: 100%;
			min-width: 232px;
		}
		
		.hyllynappi.long-text {width:100%;border-radius:15% 5%!important;}

			.hyllynappi:hover {
				background-color: var(--bg-btn-hover);
				color: #000;
				scale: 1.08;
			}
			
			.hyllynappi2:hover, 
			.hyllynappi4:hover {
				background-color: var(--bg-btn-hover);
				color: #000;
				scale: 1.02;
			}

			.isohylly-active {
				background-color: var(--bg-btn-active);
				color: #000;
			}
			.isohylly-active:hover {background-color:var(--bg-btn-hover)!important;}

@media screen and (max-width: 690px) {
	.hyllynappi {
		min-width: 34px!important;
	}
  
	.hyllynappi2 {
		min-width: 76px!important;
	}
	
	.hyllynappi4 {
		min-width: 158px!important;
	}
  
	.hyllynappi,
	.hyllynappi2, 
	.hyllynappi4 {
		font-size: 1.4em;
		min-height: 36px!important;
	}
}

.shelfAisle {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	column-gap: 0.4em;
	margin-left: 10px;
	margin-right: 20px;
}

	.horizontalShelf,
	.horizontalShelf_vs,
	.horizontalShelf_vseq {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}
	.horizontalShelf > div:last-child p,
	.horizontalShelf_vs > div:last-child p,
	.horizontalShelf_vseq > div:last-child p {font-size: 1.6em;font-weight: 600;margin: 0; padding: 0.3em 0;}
		
	.verticalShelf,
	.verticalShelf_vs,
	.verticalShelf_vseq {
		display: flex;
		flex-direction: column;
		gap: 0.4em;
	}
		
	.verticalShelfContent_vs,
	.verticalShelfContent_vseq {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap: 0.5em;
		padding: 0.2em;
		border: 1px solid rgba(255, 255, 255, 0.33);
	}
	.ringSlotEditing {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.ringSlotEditing > div {display: flex;flex-direction: row;gap: 0.2em;}
	.ringSlotEditing > div p {margin: 0;padding: 0;}
	.smallButton {
		cursor: pointer;
		width: 25px;
		height: 25px;
		background-image: var(--btn-bg1);
		border-bottom: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		font-size: 16px;
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
	}
	.smallButton:hover {
		color: #F5FFFA;
		background-image: var(--btn-bg2);
		border: 2px solid transparent;
		border-image: var(--frame2);
		border-image-slice: 1;
		border-radius: 4px;
	}
		
		.tirePlaceFrame {
			width: 48px;
			height: 60px;
		}
		.tirePlaceFrame_vs,
		.tirePlaceFrame_vseq {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.tirePlaceFrame_vs {height: 48px;}
		.tirePlaceFrame_vseq {height: 56px;overflow: hidden;}
		
		.tirePlaceFrame_vs > div {width: 60px;/*height: 48px;border: 1px solid #000;*/}
		.tirePlaceFrame_vseq > div {width: 42px;/*height: 56px;border: 1px solid #000;*/}
		.tirePlaceFrame_vs > div:first-child {width: 30px;height: 46px;border: 1px solid #F8F8FF;border-right: 0;background-color: #444!important;}
		.tirePlaceFrame_vseq > div:first-child {width: 30px;height: 54px;border: 1px solid #F8F8FF;border-right: 0;background-color: #444!important;}
		.tirePlaceFrame_vs > div:first-child p, 
		.tirePlaceFrame_vseq > div:first-child p {font-size: 1.4em;margin: 0;padding: 0;}
		
			.verticalTirePlace,
			.horizontalTirePlace,
			.horizontalTirePlace_vseq {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				width: 100%;
				height: 100%;
				/*border: 1px solid lightblue;*/
			}
			.tirePlaceInformation {
				position: fixed;
				display: none;
				width: 420px;
				border: 3px solid #FFD700;
				border-radius: 6px;
				background: rgba(0, 0, 0, 0.85);
				padding: 0.3em;
				white-space: wrap;
				z-index: 99;
			}
			
			.verticalTirePlace:hover .tirePlaceInformation,
			.horizontalTirePlace:hover .tirePlaceInformation,
			.horizontalTirePlace_vseq:hover .tirePlaceInformation {
				display: block;
				top: 1%;
				left: 1%;
			}
			
			.verticalTirePlace button,
			.horizontalTirePlace button,
			.horizontalTirePlace_vseq button {
				background-color: transparent;
				background-repeat: no-repeat;
				border: none;
				cursor: pointer;
				overflow: hidden;
				outline: none;
				font-size: 12px;
				margin: auto;
				text-align: center;
			}
			.verticalTirePlace button {width: 40px;height: 50px;}
			.horizontalTirePlace button {width: 50px;height: 40px;border-radius: 4px;}
			.horizontalTirePlace_vseq button {width: 32px;height: 48px;}
			.verticalTirePlace button p {font-family: arial;color: white;font-size: 12px;margin: 0;padding: 0;}
			.horizontalTirePlace button p,
			.horizontalTirePlace_vseq button p {font-family: "Roboto", sans-serif;color: white;font-size: 12px;margin-top: 0.9em;margin-left: -0.3em;padding: 0;}
			.tirePlaceInformation p {font-family: "Roboto", sans-serif;font-size: 14px;color: #F8F8FF;margin: 0;padding: 0;}

@media print {
	/* NEW LAYOUT */
	:root {
		--bg-color: #ffffff;
	}
	/*html, body {
		margin: 0 !important;
		padding: 0 !important;
	}*/
	.tirePlaceFrame,
	.tirePlaceFrame_vs,
	.tirePlaceFrame_vseq {border: 2px solid black;outline: none;overflow: hidden;}
	.tirePlaceFrame_vs > div,
	.tirePlaceFrame_vseq > div {border: 1px solid #aaa;}
	.tirePlaceFrame_vseq > div {margin-top: 0.3em;}
	.horizontalTirePlace,
	.horizontalTirePlace_vseq {border: 1px solid #000;}
	.horizontalTirePlace_vseq button {background: none;}
	.verticalTirePlace button p {color: #000000;font-size: 1em; font-weight: 600;}
	.horizontalTirePlace button p {color: #000000;font-size: 1em; font-weight: 600;margin: 0;padding: 0;}
	.horizontalTirePlace_vseq button p {color: #000000;font-size: 1em; font-weight: 600;margin-top: 10px;padding: 0;}
	.smallButton,
	.tireShelfInformation,
	.tireShelfInformation img[src$='.png'] {display: none;}
	/*.rotated-content {
		margin-top: 0!important;
	}*/
	
	/* OLD LAYOUT */
	.shelfAisle {
        page-break-before: auto;
    }

    .shelfAisle:nth-child(10n) {
        page-break-before: always;
    }
	
	td.paikka,
	td.pystypaikka {border: 1px solid #aaa!important;}
}

.layout {
	width: 95%;
	display:inline-block;
	margin-top:20px;
	margin-left:10px;
	text-align: left;
	/*background-image: var(--pohja);
	background-repeat: no-repeat;
	background-size: cover;*/
}

	.layout .image-container {
		position: relative;
		cursor: pointer;
	}

	@media screen and (min-width: 600px) and (max-width: 3840px) {
		.layout {
			max-width: 1500px;
		}
	}

	.layout img {
		max-width: 100%;
		height: auto;
	}

/* TIRESET CARD */

.tireset-frame,
.tireset-H-frame {
	margin-left: 2px;
	margin-top: 10px;
	padding: 4px 2px;
	max-width: 2290px;
}

	.tireset-frame select, 
	.tireset-frame input[type="text"],
	.tireset-frame input[type=number] {border-radius: 2px!important;}

	#tireset-navigation {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 974px;
		background: rgba(0,0,0,0.4);
		border-radius: 1em;
		margin-bottom: -12px;
		row-gap: 8px;
	}
	
	#tireset-bottom-navigation {
		display: flex;
		flex-direction: column;
		align-items: center;
		width:100%;
		align-self: center;
	}
	
		.tireset-card-title {margin-left: 4px;white-space: nowrap;}
		
	.tireset-nav-spread {
		display: flex;
		flex-direction: row;
		column-gap: 8px;
	}
	
		.tirecard-nav-contents {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			column-gap: 8px;
		}
	
			.tireset-card-nav {
				display: flex;
				flex-direction: column;
				row-gap: 8px;
				column-gap: 8px;
			}
	
				.btn-create-schedule {
					cursor: pointer;
					width: 65px;
					height: 65px;
					background: url('img/create-schedule.png') transparent no-repeat;
					background-size: 60px 60px;
					background-position: center;
					opacity: 0.5;
					border: 2px solid transparent;
				}
	
				.btn-create-schedule:hover {
					width: 65px;
					height: 65px;
					background: url('img/create-schedule.png') transparent no-repeat;
					background-size: 60px 60px;
					background-position: center;
					opacity: 1;
					border: 2px solid transparent;
					transition: 1.2s;
				}

	#tireset-customer {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 480px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5);
	}
	
	#tireset-H-customer {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 480px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		border: 2px solid transparent;
		border-image: var(--sframe1);
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5)
	}

		.tireset-customer {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			column-gap: 5px;
			width: 100%;
			min-height: 36px;
			color: var(--text);
			text-transform: uppercase;
		}

		#tireset-customer input[type=text],
		#tireset-H-customer input[type=text] {width:100px;height:26px;}

		#tireset-customer textarea,
		#tireset-H-customer textarea {
			width: 96%;
			min-height: 64px;
		}

	#tireset-basic {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 480px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		border: 2px solid transparent;
		border-image: var(--frame2);
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5)
	}
	
	#tireset-H-basic {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 480px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		border: 2px solid transparent;
		border-image: var(--sframe2);
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5)
	}

		.tireset-basic {
			display: flex;
			align-items: center;
			justify-content: left;
			column-gap: 5px;
			width: 100%;
			min-height: 36px;
			color: var(--text);
			text-transform: uppercase;
		}

			.regNum {
				width:75px;
				max-width:115px;
				height:28px!important;
				font-size:1.6em!important;
				font-weight:700;
				text-transform:uppercase!important;
				text-align:center!important;
			}
			
			.models {
				width:137px!important;
				height: 24px;
				font-family: "Roboto", sans-serif;
				font-size: 0.875em!important;
				padding-top: 1px!important;
				margin-left: 1px;
			}
			
			.dot-input {width:52px!important;height:20px;margin-left:4px;text-align:center!important;}

		.tireset-basic input[type=text] {width:175px;height:26px;}

		.tireset-special {
			display: flex;
			align-items: center;
			justify-content: space-between;
			column-gap: 5px;
			width: 100%;
			min-height: 36px;
			color: var(--text);
			text-transform: uppercase;
		}

	#tireset-conditions {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 480px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5)
	}
	
	#tireset-H-conditions {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 480px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		border: 2px solid transparent;
		border-image: var(--sframe1);
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5)
	}

		.tireset-condition-contents {
			color: var(--text);
			display: flex;
			text-transform: uppercase;
		}
		.tireset-condition-contents select {width: 40px;height: 24px;margin:0;padding:0;}
			
		.tireset-condition-contentsLeft {
			display: flex;
			flex-direction: row;
			margin-left: 6px;
			color: var(--text);
			width: 37%;
			text-transform: uppercase;
		}
		.tireset-condition-contentsLeft input[type=text] {width: 32px;margin-left: 4px;}
				
		.tireset-condition-contentsRight {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: var(--text);
			width: 63%;
			text-transform: uppercase;
		}

		.tireset-condition-contentsMeasures {
			display: flex;
			align-items: flex-start;
			color: var(--text);
			width: 30%;
			text-transform: uppercase;
			text-indent: 4px;
		}
		
		.tireset-condition-contentsSwitch {
			display: flex;
			align-items: flex-start;
			width: 16%;
		}

		.tireset-condition-contentsMultiple {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			min-height: 42px;
		}

		.tireset-condition-contentsUpload {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-around;
			min-height: 72px;
			color: var(--text);
			text-transform: uppercase;
		}
			.tireset-condition-contentsUpload input[type=file] {border-radius:4px;padding:4px;}

		.tireset-delete-pic {padding:6px 4px;}
		.tireset-condition-contentsFile {align-self: center!important;}
		.content-file-frame {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 97%;
			min-height: 60px;
			background: rgba(213,213,213, 0.2);
			border: 1px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
			border-radius: 4px;
		}

		.content-file-frame img {
			position: relative;
			max-width: 100%;
			height: auto;
			z-index: 1;
		}

		.tireset-basic.row2 .tireset-condition-contentsUpload,
		.tireset-basic.row2 .tireset-condition-contentsFile {
			padding: 6px 0;
		}

	#tireset-seasonalInformation {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-contents: space-evenly;
		width: 480px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		border: 2px solid transparent;
		border-image: var(--frame2);
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5)
	}

		.tireset-seasonal {
			display: flex;
			align-items: center;
			justify-content: left;
			column-gap: 5px;
			width: 100%;
			min-height: 36px;
			color: var(--text);
			text-transform: uppercase;
			overflow: hidden;
			white-space: nowrap;
		}
		
		.tireset-season-contents {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			height: 40px;
			color: var(--text);
			text-transform: uppercase;
		}
		
		.tireset-season-contents-l {
			display: flex;
			align-items: center;
			font-size: 0.84em!important;
		}

		.tireset-season-contents-r {
			padding-right: 3px;
			display: flex;
			align-items: center;
			color: #C0C0C0!important;
		}

	#tireset-additionalInformation {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 325px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		border: 2px solid transparent;
		border-image: linear-gradient(0.30turn, rgba(199,21,133), rgba(221,160,221));
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5)
	}
	
	#tireset-H-additionalInformation {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 325px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		border: 2px solid transparent;
		border-image: var(--sframe2);
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5)
	}
		
		.tireset-information-data {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-contents: space-around;
			padding: 4px;
			color: var(--text);
			width: 100%;
			text-transform: uppercase;
		}
			
			.tireset-information-data input[type=text] {
				resize: none;
				border-radius: 4px!important;
			}

		.tireset-information-col20 {
			width: 20%;
			padding: 4px;
			color: var(--text);
			text-transform: uppercase;
		}
		
		.tireset-information-col80 {
			width: 80%;
			color: var(--text);
			text-transform: uppercase;
		}
		.tireset-information-col80 select {min-width:205px;height:26px;}

	.tireset-basic-subtitle,
	.tireset-conditions-subtitle {
		display: flex;
		width: 100%;
		min-height: 42px;
		align-items: center;
		justify-content: flex-start;
		font-size: 1.25em;
		font-weight: 700;
		color: var(--subtitle);
		text-transform: uppercase;
		text-indent: 4px;
		background: rgba(0, 0, 0, 0.8)!important;
	}

		.tireset-seasonal-intertitle {
			font-size: 0.875em;
			font-weight: bold;
			color: var(--subtitle2);
		}

		.tireset-seasonal-subtitle a {cursor:pointer;font-size: 0.775em!important;font-weight:normal!important;color:var(--a-link)!important;text-decoration:none;}
		.tireset-seasonal-subtitle a:hover {color: var(--a-hover)!important;}

	.tireset-card-subtitle {
		display: flex;
		width: 100%;
		min-height: 42px;
		align-items: center;
		justify-content: flex-start;
		font-family: "Roboto", sans-serif;
		font-size: 1.25em;
		font-weight: 700;
		color: var(--subtitle);
		text-transform: uppercase;
		background: rgba(0, 0, 0, 0.8)!important;
	}

		.tiresetSubAltContent {
			font-size: 0.8125em!important;
			font-weight: bold;
			color: #F8F8FF!important;
			text-transform: uppercase;
		}

		.tireset-card-contents {
			display: flex;
			align-items: center;
			padding: 2px 0px;
			text-indent: 4px;
		}

		.tireset-card-contents-2 {
			display: flex;
			flex-direction: column;
			align-items: left;
			justify-content: space-between;
			padding: 6px 2px;
		}

		.tireset-card-contents-l,
		.tireset-card-contents-r {
			display: flex;
			align-items: center;
		}

		.tireset-card-contents-c {
			display: flex;
			flex-direction: column;
			align-items: left;
			justify-content: center;
			padding: 4px 0px;
			color: var(--text);
			row-gap: 4px;
		}
			
			.tireset-card-contents-c input[type=text] {
				margin-left: 1px;
				width:137px!important;
				font-size: 1em!important;
				border: none;
				outline: none;
			}
			.tireset-card-contents-c input[type=text]:focus {outline: none!important;}

			.tireset-card-contents-c input[type="number"] {
				width: 154px;
				height: 20px!important;
				align-self: center;
				margin-left: -1px;
				border: none!important;
				margin-top: 2px;
			}
			.tireset-card-contents-c input[type="number"]:focus {outline: none!important;}
				
			.tireset-card-contents-c select {
				width: 138px;
				height: 27px;
				font-size: 1em;
				border: none;
				outline: none;
			}

			.tireset-card-contents-t {
				display: flex;
				flex-direction: column;
				align-items: left;
				justify-content: space-evenly;
				padding: 2px 12px;
				font-size: 0.875em;
				color: var(--text);
			}

			.tireset-card-textarea {
				display: flex;
				padding: 6px 2px;
			}
			.tireset-card-textarea textarea {min-height:60px;width:95%!important;}

		/* TireCard DIV classes */
		.tire-type-title {text-indent:4px;}
		.groovedepth {}
		.groovedepth input[type=text] {width:32px!important;height:20px;margin-top:-2px;outline:none;border:none;}
		.groovedepth input[type=text]:focus {outline:none;border:none;}
		.tiny-groovedepth {}
		.tiny-groovedepth input[type=text] {width:32px!important;height:18px;font-family:"Roboto", sans-serif;font-size:0.95em!important;}
				
		/* TireCard SPAN classes */
		.tiresetCardCompany {color: var(--text2);}
		.tirecardContentAdjunct {text-transform:none!important;margin-left:2px;font-size:14px!important;font-weight:normal!important;color:#F5FFFA!important;}
		.tirecardBackgroundText {position:absolute;padding:6px 2px;z-index:0;font-family:"Roboto", sans-serif;font-size:0.85em!important;color:rgba(192,192,192, 0.6);text-transform:uppercase;}
		.tirecardHighlightedField {color:var(--text-hilight);font-size:1.4em!important;font-weight:bold;line-height:1.4em!important;}

		/* TireCard IMG classes */
		.icon-sun img {width: 16px;height: 16px;}
		.icon-snow img {width: 14px;height: 14px;}
		.tireset-season-contents img {margin-bottom: -2px;padding: 0px 6px;}

		/* Tirecard Content Boxes */

		.tirecard-Allcontent {
			display: inline-flex;
			flex-direction:row;
			column-gap: 6px;
			row-gap: 12px;
			max-width: 2560px;
		}
		
		.tirecard-Allcontent input[type=text],
		.tirecard-Allcontent input[type=number]
		.tirecard-Allcontent select,
		.tirecard-Allcontent textarea {font-family: "Roboto", sans-serif;font-size: 1em;background: var(--bg-input);resize: vertical;box-sizing: border-box;}
		
		.tirecard-H-Allcontent {
			display: inline-flex;
			flex-direction:row;
			column-gap: 6px;
			row-gap: 12px;
			max-width: 2560px;
			pointer-events: none;
		}
		
		.tirecard-H-Allcontent input[type=text],
		.tirecard-H-Allcontent input[type=number]
		.tirecard-H-Allcontent select,
		.tirecard-H-Allcontent textarea {font-family: "Roboto", sans-serif;font-size: 1em;background: var(--bg-input);resize: vertical;box-sizing: border-box;}
		
		.tirecard-2contentLeft,
		.tirecard-H-2contentLeft {
			display: flex;
			flex-direction:row;
			column-gap: 6px;
		}
		
		.tirecard-2contentCenter,
		.tirecard-H-2contentCenter {
			display: flex;
			flex-direction:row;
			column-gap: 6px;
		}
		
		.tirecard-2contentRight,
		.tirecard-H-2contentRight {
			display: flex;
			flex-direction:row;
			column-gap: 6px;
		}
		
	/* Tirecard Content Definitions */
		
	.tirecard-blockLeft {display: flex;flex-direction:row;width:50%;}
	.tirecard-blockRight {display: flex;flex-direction:row;width:50%;}
	.tirecard-blockLeft100 {display: flex;flex-direction:row;width:100%;}
	.tirecard-blockRight100 {display: flex;flex-direction:row;width:100%;}
	.tirecard-blockLeft75 {display: flex;flex-direction:row;width:75%;}
	.tirecard-blockLeft66 {display: flex;flex-direction:row;width:66%;}
	.tirecard-blockLeft25 {display: flex;flex-direction:row;width:25%;}
	.tirecard-blockRight75 {display: flex;flex-direction:row;width:75%;}
	.tirecard-blockRight33 {display: flex;flex-direction:row;width:33%;}
	.tirecard-blockRight25 {display: flex;flex-direction:row;width:25%;}
	.tirecard-block100 {display: flex;flex-direction:row;width:100%;text-indent: 2px;}
	.tirecard-block99 {display: flex;flex-direction:column;width:99%;}
	.tirecard-block66 {display: flex;flex-direction:row;width:66%;}
	.tirecard-block50 {display: flex;flex-direction:row;width:50%;}
	.tirecard-block33 {display: flex;flex-direction:row;width:33%;}
	.tirecard-block25 {display: flex;flex-direction:row;width:25%;}
	.tirecard-customer-block100 {display: flex;flex-direction:row;width:100%;text-indent: 4px;}
	.tirecard-condition-block100 {display: flex;flex-direction:row;width:100%;padding: 4px;}
	.tirecard-seasonal-block100 {display: flex;flex-direction:row;width:100%;text-indent: 4px;}
	.tirecard-full-block100 {display: flex;flex-direction:row;width:100%;text-indent: 4px;}

	/* Tirecard Media Rules */

	@media (max-width: 2300px) {
		.tirecard-2contentRight {
			flex-direction: column;
			border: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
			background: rgba(0,0,0,0.55);
		}
		
		#tireset-seasonalInformation, #tireset-additionalInformation {border:none!important;width: 460px;}
		
	}

	@media (max-width: 1960px) {
		#tireset-customer, #tireset-H-customer, #tireset-basic, #tireset-H-basic, #tireset-H-conditions {border:none!important;}
		#tireset-H-additionalInformation {border:none!important;width: 480px;}
	
		.tirecard-2contentLeft {
			flex-direction: column;
			border: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
		}
		
		.tirecard-H-2contentLeft {
			flex-direction: column;
			border: 2px solid transparent;
			border-image: var(--sframe2);
			border-image-slice: 1;
		}
		
		.tirecard-H-2contentRight {
			flex-direction: column;
			border: 2px solid transparent;
			border-image: var(--sframe1);
			border-image-slice: 1;
		}

	}
	
	@media (max-width: 1470px) {
		.tirecard-2contentCenter {
			flex-direction: column;
			border: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
		}

		#tireset-navigation {
			width:484px;
			background: rgba(0,0,0,0.55);
		}
		
		.tireset-nav-spread {
			flex-direction: column;
			row-gap: 8px!important;
		}
		
		#tireset-conditions, .tirecard-2contentLeft {border:none!important;}
		.tireset-frame,
		.tireset-H-frame {
			max-width: 939px;
		}
	}
	
	@media (max-width: 980px) {
		.tirecard-Allcontent,
		.tirecard-H-Allcontent {
			flex-direction: column;
			row-gap:0px!important;
		}
		
		#tireset-customer, #tireset-H-customer, #tireset-basic, #tireset-H-basic, #tireset-conditions, #tireset-H-conditions, #tireset-seasonalInformation, #tireset-additionalInformation, #tireset-H-additionalInformation {border:none!important;width: 520px;}
		
		.tirecard-2contentLeft,
		.tirecard-H-2contentLeft,
		.tirecard-2contentCenter,
		.tirecard-H-2contentCenter,
		.tirecard-2contentRight,
		.tirecard-H-2contentRight {
			border:none!important;
			row-gap:0px!importat;
		}

		.tireset-frame {
			background: rgba(0, 0, 0);
			max-width: 520px;
			border: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
		}
		
		.tireset-H-frame {
			background: rgba(0, 0, 0);
			max-width: 520px;
			border: 2px solid transparent;
			border-image: var(--sframe1);
			border-image-slice: 1;
		}
		
		.tireset-card-contents.col94 {width:92%;}
		.tireset-card-textarea textarea {width:93%!important;}
		.tireset-information-col80 select {min-width:193px;}
	}
	
	@media (min-width: 980px) {
		#tireset-bottom-navigation {display: none;}
	}
	
	@media (max-width: 550px) {
		.tireset-frame {
			width:375px;
			border: 2px solid transparent;
			border-image: var(--frame2);
			border-image-slice: 1;
		}
		
		.tireset-H-frame {
			width:375px;
			border: 2px solid transparent;
			border-image: var(--sframe2);
			border-image-slice: 1;
		}
		
		.content-file-frame {
			border: 1px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 4px;
		}
		
		#tireset-navigation {max-width:375px;}
		
		.tirecard-2content, .tirecard-Allcontent, .tirecard-H-Allcontent {row-gap: 0px!important;column-gap:0px!important;}
		#tireset-customer, #tireset-H-customer, #tireset-basic, #tireset-H-basic, #tireset-conditions, #tireset-H-conditions, #tireset-seasonalInformation, #tireset-additionalInformation, #tireset-H-additionalInformation {width: 375px;border:none!important;}

		.tirecard-Allcontent > .row,
		.tirecard-H-Allcontent > .row {padding: 0, 24px 0 42px;}

		.tireset-condition-contentsUpload {flex-direction:row;}
		.tireset-condition-contentsFile {margin-left: 8px;}

		.tirecard-block100 {
			flex-direction: column;
		}
		
		.tirecard-customer-block100 {
			flex-direction: column;
			row-gap: 7px;
		}
		
		.tirecard-full-block100 {
			height: 28px;
		}
		
		.tirecard-seasonal-block100 {
			flex-direction: column;
			row-gap: 2px;
		}
		
		.tirecard-block50 {
			flex-direction: column;
			min-width: 25%!important;
		}

		.tireset-card-textarea.col75 {width: 82%;}
		.tireset-card-textarea textarea {width:100%!important;}

		.tireset-conditions-subtitle > .col65 {width:75%;}
		.tireset-conditions-subtitle > .col34 {width:25%;}
		.tiresetSubAltContent {display: none!important;}
		
		.tireset-card-contents.col20 {width:100%!important;}
		.tireset-card-contents.col25 {width:100%!important;}
		.tireset-card-contents.col30 {width:100%!important;}
		.tireset-card-contents.col35 {width:100%!important;}
		.tireset-card-contents.col40 {width:100%!important;}
		.tireset-card-contents.col33 {width:100%!important;}
		.tireset-card-contents-l.col50, 
		.tireset-card-contents-r.col50 {width:100%!important;}
		.tireset-card-contents-r.col55 {width:100%!important;}
		.tireset-card-contents.col60 {width:100%!important;}
		.tireset-card-contents.col66 {width:100%!important;}
		.tireset-card-contents-r.col70 {width:100%!important;}
		.tireset-card-contents.col94 {width:100%!important;}
		.tireset-card-contents.col55 {width:99%;}
		.tireset-condition-contentsUpload.col60 {width:100%!important;}
		.tireset-condition-contentsFile.col40 {width:100%!important;}
		
		.tireset-information-col20 {width:25%;}
		.tireset-information-col80 {width:75%;}
		.tireset-information-col80 select {min-width:203px;}
		
		.tirecard-blockLeft66 {width:95%;}
		.tirecard-blockLeft75 {width:88%;}
		.tirecard-blockRight33 {width: 65%;}
		.tirecard-blockRight25 {width: 65%;}
		.tirecard-blockLeft25 {width: 46.5%;}
		.tirecard-blockRight75 {width: 53.5%;}
		
		.tireset-card-contents-l {width:50%!important;}
		.tirecard-blockLeft {width:100%!important;}
		.tirecard-blockRight {width:100%!important;}

		.hidden-element {display:none!important;}
		.tireset-customer {min-height: 66px;}
		.tireset-basic {justify-content: flex-start;}
		.tirecard-block100 > .tireset-condition-contentsUpload {
			justify-content: center;
			align-items: center;
		}

		.tireset-card-subtitle {min-height: 74px;}

		#tireset-customer input[type=text] {
			width: 200px;
		}
		
		#tireset-H-customer input[type=text] {
			width: 200px;
		}
		
		.tireset-card-contents-t {justify-content: flex-start!important;font-size: 1em!important;}
		.tireset-card-contents-h {display:none;}
		.tireset-card-contents-x {display:none;}
		.tireset-card-contents-t {flex-direction: row;padding:2px 4px;}
		
	}
	
	@media (max-width: 405px) {
		.tireset-frame,
		.tireset-H-frame {
			width: 360px;
		}
		
		#tireset-navigation {max-width:360px;}
		
		#tireset-customer, #tireset-H-customer, #tireset-basic, #tireset-H-basic, #tireset-conditions, #tireset-H-conditions, #tireset-seasonalInformation, #tireset-additionalInformation, #tireset-H-additionalInformation {width: 360px;}

		/*.tireset-card-nav.btn-basic-large,
		.tireset-card-nav.btn-basic {scale: 0.95;}*/
		.tirecard-blockRight75 {width: 58%;}
		/*.tireset-card-contents-r {flex-direction: column;align-items: flex-start}*/
	}



/* SCHEDULE VIEW */
#schedule-main {
	clear: both;
	display: flex;
	width: 100%;
	flex-direction: column;
	flex-wrap: wrap;
	padding-bottom: 60px;
}

	.selected-workstation-area {
		poisition: relative;
		float: left;
	}
	
		.selected-workstation-area select {
			width: 175px;
			height: 22px;
			font-family: "Verdana", sans-serif;
			font-size: 0.75em!important;
			font-weight: 600;
		}
	
			.aika-title {margin-left: 4px;width: 150px;}
			.aika-input {width: 180px!important;margin-left: 2px;overflow: hidden;}

	.additional-information-meaning {
		float: left;
		padding: 0px 10px;
		/*background-color: lightblue;*/
	}

		.additional-information-meaning img {
			padding: 0!important;
			margin-top: 0;
		}

		.source-web {
			padding: 6px 2px;
			float: left;
			width: 42px!important;
			/*background-color: blue;*/
		}
		
			.source-web:hover + .source-web-text-area {
				display: block;
				z-index: 99;
			}
			
				.source-web-text-area {
					display: none;
					position: absolute;
					padding: 2px 8px!important;
					width: auto!important;
					height: 18px!important;
					margin-left: -38px;
					margin-top: -22px;
					border: 2px solid #B8860B!important;
					border-radius: 5px;
					background-color: #000;
					text-align: center;
				}
		
		.source-suggestion {
			padding: 6px 2px;
			float: left;
			width: 42px!important;
			/*background-color: blue;*/
		}
		
			.source-suggestion:hover + .source-suggestion-text-area {
				display: block;
				z-index: 99;
			}
			
				.source-suggestion-text-area {
					display: none;
					position: absolute;
					padding: 2px 8px!important;
					width: auto!important;
					height: 18px!important;
					margin-left: -70px;
					margin-top: -22px;
					border: 2px solid #B8860B!important;
					border-radius: 5px;
					background-color: #000;
					text-align: center;
				}
		
		.source-web-paid {
			padding: 6px 2px;
			float: left;
			width: 42px!important;
			/*background-color: blue;*/
		}
		
			.source-web-paid:hover + .source-web-paid-text-area {
				display: block;
				z-index: 99;
			}
			
				.source-web-paid-text-area {
					display: none;
					position: absolute;
					padding: 2px 8px!important;
					width: auto!important;
					height: 18px!important;
					margin-left: -72px;
					margin-top: 27px;
					border: 2px solid #B8860B!important;
					border-radius: 5px;
					background-color: #000;
					text-align: center;
				}
		
		.source-suggestion-paid {
			padding: 6px 2px;
			float: left;
			width: 42px!important;
			/*background-color: blue;*/
		}
			
			.source-suggestion-paid:hover + .source-suggestion-paid-text-area {
				display: block;
				z-index: 99;
			}
			
				.source-suggestion-paid-text-area {
					display: none;
					position: absolute;
					padding: 2px 8px!important;
					width: auto!important;
					height: 18px!important;
					margin-left: -110px;
					margin-top: 27px;
					border: 2px solid #B8860B!important;
					border-radius: 5px;
					background-color: #000;
					text-align: center;
				}

		@media screen and (max-width: 875px) {
			.additional-information-meaning {display:none;}
		}

#schedule-settings {
	padding: 2px 8px;
	width: 75%;
	height: 60px;
	z-index: 2;
	/*background-color: green;
	border: 2px solid white;*/
}

.schedule-box {
	float: left!important;
	padding: 4px 4px;
}

.schedule-box2 {
	float: left!important;
	padding: 4px 4px;
}

@media screen and (max-width: 665px) {
	.schedule-box2 {display: none;}
}

	.schedule-btn-cell {
		width: 42px;
		height: 42px;
		background-image: linear-gradient(to bottom right, #212121, #444444);
		/*border: 2px solid green;*/
		
	}
	
.btn-af-on {
	cursor: pointer;
	width: 42px;
	height: 42px;
	background: url('img/af-on.png') transparent no-repeat;
	background-size: 32px 32px;
	background-position: center;
	border: 2px solid transparent;
	border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
	border-image-slice: 1;
	border-radius: 15px;
}

.btn-af-on:hover {
	background: url('img/af-off.png') transparent no-repeat;
	background-position: center;
	background-size: 32px 32px;
	/*scale: 1.04;*/
}

.btn-af-off {
	cursor: pointer;
	width: 42px;
	height: 42px;
	background: url('img/af-off.png') transparent no-repeat;
	background-size: 32px 32px;
	background-position: center;
	border: 2px solid transparent;
	border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
	border-image-slice: 1;
	border-radius: 15px;
}

.btn-af-off:hover {
	background: url('img/af-on.png') transparent no-repeat;
	background-position: center;
	background-size: 32px 32px;
	/*scale: 1.04;*/
}

.btn-del-cells {
	cursor: pointer;
	width: 42px;
	height: 42px;
	background: url('img/delete-cells.png') transparent no-repeat;
	background-size: 25px 25px;
	background-position: center;
	border: 2px solid transparent;
	border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
	border-image-slice: 1;
	border-radius: 15px;
}

.btn-del-cells:hover {
	background: url('img/delete-cells-hover.png') transparent no-repeat;
	background-position: center;
	background-size: 32px 32px;
	/*scale: 1.06;*/
}

.close-calendar {
	
}

.btn-calendar {
	cursor: pointer;
	width: 42px;
	height: 42px;
	background: url('img/calendar-inactive.png') transparent no-repeat;
	background-size: 25px 25px;
	background-position: center;
	border: 2px solid transparent;
	border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
	border-image-slice: 1;
	border-radius: 15px;
}

.btn-calendar:hover {
	background: url('img/calendar-active.png') transparent no-repeat;
	background-position: center;
	background-size: 32px 32px;
	/*scale: 1.06;*/
}

#calendar {
	position: fixed;
	width: 250px;
	height: 215px;
	top: 2%;
	right: 5%;
	background-color:rgba(0, 0, 0, 0.8);
	/*background-image: linear-gradient(#B22222, #FFB6C1);*/
	/*background-image: linear-gradient(#F08080, #FAF0E6);*/
	border: 2px solid transparent;
	border-image: linear-gradient(0.20turn, rgba(250,128,114), rgba(248,248,255));
	border-image-slice: 1;
	border-radius: 0.75em;
	z-index: 9;
}

/*@media screen and (max-width: 1020px) {
	#calendar {
		display: none;
	}
}*/

	/*.calendar-overlay {
		position: fixed;
		top: 5%;
		right: 5%!important;
		background: rgba(0, 0, 0, 0.7);
		transition: opacity 500ms;
		visibility: hidden;
		opacity: 0;
	}
	
		.calendar-overlay:target {visibility: visible;opacity: 1;}*/

	#calendarTop {
		cursor: move;
		background-image: linear-gradient(#B22222, #FFB6C1);
		height: 28px;
		font-size: 30px;
		font-weight: bold;
		text-decoration: none;
		transition: all 5s ease-in-out;
		z-index: 10;
	}

	.calendar-x {
		font-family: "Roboto", sans-serif;
		cursor: pointer;
		padding: 0px;
		width: 22px;
		height: 22px;
		position: absolute;
		top: .1em;
		right: .1em;
		background: transparent!important;
		border: none!important;
		font-size: 20px;
		font-weight: 900;
		text-decoration: none!important;
		color: #F0F8FF;
	}
	
		.calendar-x:hover {color: #000;}

	/*#calendarTop .calendar-close {
	position: absolute;
	top: -.2em;
	right: .2em;
	transition: all 200ms;
	font-size: 34px;
	font-weight: bold;
	text-decoration: none!important;
	color: #000;
	}

		#calendarTop .calendar-close:hover {color: #F8F8FF;}*/

	.calendar-navigation {
		width: auto;
		height: auto;
		margin-top: -0.25em;
		margin-left: 1em;
		margin-right: auto;
		/*font-size: 0;
		background-color: yellow;*/
		text-align: center!important;
		z-index: 8;
	}

		.calendar-navigation td {
			
			height: 32px;
			/*background-color: red;*/
			text-align: center;
			/*background-color: green;*/
			border-spacing: 0px;
			/*border: 2px solid red;*/
			border-collapse: collapse;
			padding: 0px;
			z-index: 7;
		}

		.month-selector {
			width: 52px!important;
			text-align:center!important;
			/*background-color: #fff;*/
		}
		
		.month-name {
			width: 62px!important;
			text-align: center;
		}

		.btn-previous {
			cursor: pointer;
			width: 35px;
			height: 20px;
			background: url('img/prev.png') transparent no-repeat;
			background-size: 31px 18px;
			background-position: center;
			border: 2px solid transparent;
			/*border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
			border-image-slice: 1;
			border-radius: 15px;*/
		}
		
			.btn-previous:hover {
				background: url('img/prev-hover.png') transparent no-repeat;
				background-position: center;
				background-size: 31px 18px;
				scale: 1.25;
			}
			
		.btn-next {
			cursor: pointer;
			width: 35px;
			height: 20px;
			background: url('img/next.png') transparent no-repeat;
			background-size: 31px 18px;
			background-position: center;
			border: 2px solid transparent;
			/*border-image: linear-gradient(0.30turn, rgba(218,165,32), rgba(240,230,140));
			border-image-slice: 1;
			border-radius: 15px;*/
		}
		
			.btn-next:hover {
				background: url('img/next-hover.png') transparent no-repeat;
				background-position: center;
				background-size: 31px 18px;
				scale: 1.25;
			}

	.calendar-days {
		margin-top: -0.75em;
		width: auto;
		/*margin-top: -10px;*/
		margin-left: 1em;
		margin-right: auto;
		
		
	}
	
		.calendar-days td {
			width: 27px;
			height: 27px;
			/*background-color: red;*/
			text-align: center;
			/*background-color: green;*/
			border-spacing: 0px;
			/*border: 2px solid red;*/
			border-collapse: collapse;
			padding: 0px;
		}
		
			.calendar-week {
				width: 30px!important;
				color: #F8F8FF;
				font-size: 16px;
				font-weight: 700;
				/*background-color: blue;*/
				text-align: left!important;
				border: none!important;
			}
			
		.day-button-active {
			/*color: #F8F8FF;*/
			cursor: pointer;
			width: 100%!important;
			height: 100%!important;
			padding: 1px;
			font-family: "Roboto", sans-serif;
			font-size: 0.875em!important;
			font-weight: 700!important;
			text-align: center;
			color: #000;
			background-image: linear-gradient(#32CD32, #90EE90);
		}
		
			.current-day {background: linear-gradient(#FF8C00, #F0E68C);border:1px solid white;}
		
		.day-button-disabled {
			width: 100%!important;
			height: 100%!important;
			padding: 1px;
			font-family: "Roboto", sans-serif;
			font-size: 0.875em;
			font-weight: 700;
			text-align: center;
			color: #000;
			background: linear-gradient(to bottom right, #808080 30%, #fff 70%);
		}

/*@media screen and (max-width: 965px) {
	#calendar {display:none;}
}*/

#booking-details {
	position: fixed;
	width: 560px;
	height: auto;
	top: 21%;
	right: 5%;
	/*top: 225px;*/
	/*right: 10px;*/
	background-color:rgba(0, 0, 0, 0.85);
	/*background-image: linear-gradient(#B22222, #FFB6C1);*/
	/*background-image: linear-gradient(#F08080, #FAF0E6);*/
	border: 2px solid transparent;
	border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(240,230,140));
	border-image-slice: 1;
	border-radius: 0.75em;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 4;
}

@media screen and (max-width: 700px) {
	#booking-details {width: 300px;max-height: 70%;}
}

@media screen and (max-height: 1000px) {
	#booking-details {max-height: 70%;}
}

	.booking-overlay {
		position: fixed;
		top: 5%;
		right: 5%!important;
		background: rgba(0, 0, 0, 0.8);
		transition: opacity 500ms;
		visibility: hidden;
		opacity: 0;
	}
	
		.booking-overlay:target {visibility: visible;opacity: 1;}

	#booking-detailsTop {
		position: static;
		cursor: move;
		width: 100%;
		height: 28px;
		text-align: center;
		background-color: #000;
		border-bottom: 2px solid transparent;
		border-image: linear-gradient(0.20turn, rgba(45,45,45), rgba(218,165,32), rgba(45,45,45));
		border-image-slice: 1;
	}

	#booking-detailsTop .booking-close {
		position: absolute;
		top: -.2em;
		right: .2em;
		transition: all 200ms;
		font-size: 34px;
		font-weight: bold;
		text-decoration: none!important;
		color: #F8F8FF!important;
	}

		#booking-detailsTop .booking-close:hover {color: #B22222!important;}

		#booking-detailsTop p {
			margin-top: 0;
			padding: 4px;
			font-family: "Roboto", sans-serif;
			font-size: 13px;
			font-weight: 700;
			color: #DAA520!important;
		}
		
	.add-customer {
			padding: 6px 4px;
			font-family: "Roboto", sans-serif;
			font-size: 13px;
			font-weight: bold;
			color: #F8F8FF!important;
			line-height: 1.6;
	}
	
		.reservation-data-fields {
			display: flex;
			flex-direction: row;
		}
	
		.reservation-data-fields > div {
			width: 70px;
			padding: 4px;
		}
	
		.reservation-data-fields input[type=text] {
			padding: 2px 5px;
			margin: 0px 6px 6px 0px;
			width: 160px;
			background-color: rgba(248,248,255, 0.7);
			height: 24px;
			font-size: 1.125em;
			font-weight: bold;
			color: rgba(0,0,0, 0.9)!important;
		}
		
			.reknum {
				padding-left: 2px;
				float: left;
				width: 80px!important;
				font-size: 1.275em!important;
				height: 32px!important;
				text-transform: uppercase;
			}
		
			.btn-ringslot {
				float: left;
				width: 72px;
				height: 32px;
				background-image: linear-gradient(to bottom right, #404040, #212121);
				padding: 2px 5px;
				margin: 0px 2px;
				cursor: pointer;
				border-radius: 4px!important;
				border: none;
				color: #ADFF2F!important;
				box-shadow: none;
				font-family: "Roboto", sans-serif;
				font-size: 0.875em;
				font-weight: bold;
			}
		
		div.reservation-data-fields textarea {
			padding: 2px 5px;
			margin: 2px 2px;
			width: 160px;
			min-height: 50px;
			background-color: rgba(248,248,255, 0.7);
			height: 18px;
			font-family: "Roboto", sans-serif;
			font-size: 1.125em;
			font-weight: bold;
			color: rgba(0,0,0, 0.9);
		}
		
		.reservation-data-fields input:focus {
			background-color:rgba(248,248,255);
			color: #000;
		}
		
		.reservation-data-fields textarea:focus {
			background-color:rgba(248,248,255);
			color: #000;
		}
		
		/*.reservation-data-fields {
			
			width: 100%;
			display: grid;
			grid-template-columns: 130px 100px 100px 100px 100px;
			grid-template-rows: repeat(6, 25px) 50px 60px;
			grid-column-gap: 2px;
			grid-row-gap: 6px;
		}

			.joint1 {
				grid-column: 2 / span 2;
			}
			
			.joint2 {
				grid-column: 4 / span 2;
			}

			.joint3 {
				grid-column: 2 / span 4;
			}

			table.reservation-data-fields td {
				width: 90px;
				height: 24px;
				overflow: hidden;
			}*/

		.btn-black {
			padding: 2px 5px;
			margin: 0px 2px;
			cursor: pointer;
			min-width: 75px;
			height: 32px;
			border-radius: 4px!important;
			border: none;
			background-image: linear-gradient(to bottom right, #404040, #212121);
			/*background-color: #404040;*/
			color: #ADFF2F;
			box-shadow: none;
			font-family: "Roboto", sans-serif;
			font-size: 0.875em;
			font-weight: bold;
		}
		
			.btn-black:hover {
				background-image: linear-gradient(to bottom right, #212121, #333333);
				color: #ADFF2F;
				box-shadow: inset 0 0 8px #7FFF00;
				font-family: "Roboto", sans-serif;
				font-size: 0.875em;
				font-weight: bold;
			}

		.btn-stock-up {
			font-family: "Roboto", sans-serif;
			font-size: 0.9125em;
			font-weight: bold;
			padding: 2px 6px;
			width: 175px;
			height: 32px;
			background-image: linear-gradient(#D2691E, #DAA520);
			border-bottom: 2px solid transparent;
			border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(240,230,140));
			border-image-slice: 1;
			border-radius: 4px!important;
			text-decoration: none;
			color: #000!important;
		}
		
			.btn-stock-up:hover {
				background-image: linear-gradient(#B22222, #FFB6C1);
				border-bottom: 2px solid transparent;
				border-image: linear-gradient(0.20turn, rgba(250,128,114), rgba(248,248,255));
				border-image-slice: 1;
				color: #F8F8FF;
			}

	.add-service {
		margin-left: 6px;
		width: 97%;
		/*background-color: #ADFF2F;*/
	}
	
		.add-service select {
			background-color:rgba(173,255,47, 0.7);
			font-family: "Roboto", sans-serif;
			font-size: 13px;
			font-weight: bold;
			color: #000;
			/*color: #F8F8FF*/
		}

	.reservation-activities {
		display: flex;
		padding: 10px 4px;
		flex-direction: row;
		font-size: 13px;
		font-weight: 700;
	}

	@media (max-width: 700px) {
		.reservation-activities {flex-direction: column;max-width:700px;}
	}

		.reservation-activities p {
			font-family: "Roboto", sans-serif;
			font-size: 13px;
			color: #FFFAFA;
		}

	.checkmark {
		height: 30px;
		width: 30px;
	}

	/*.modify-reservation {
		display: flex;
		padding: 6px 1px;
		height: 75px;
		width: 99%;
		justify-content: space-around;
	}*/
	
	.modify-reservation {
		float: left;
		display: flex;
		flex-direction: row;
		padding: 6px 2px;
		margin-left: 4px;
	}

		.btn-add-reservation {
			cursor: pointer;
			font-family: "Roboto", sans-serif;
			font-size: 15px;
			font-weight: bold;
			width: 95px;
			height: 54px;
			background-image: linear-gradient(#D2691E, #DAA520);
			border-bottom: 2px solid transparent;
			border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(240,230,140));
			border-image-slice: 1;
			border-radius: 4px;
			color: #000;
			text-decoration: none;
		}
		
			.btn-add-reservation:hover {
				background-image: linear-gradient(#B22222, #FFB6C1);
				border-bottom: 2px solid transparent;
				border-image: linear-gradient(0.20turn, rgba(250,128,114), rgba(248,248,255));
				border-image-slice: 1;
				color: #F8F8FF;
			}

		.btn-add-reservation-small {
			font-family: "Roboto", sans-serif;
			font-size: 0.75em;
			font-weight: bold;
			padding: 2px;
			width: 165px;
			height: 24px;
			background-image: linear-gradient(#D2691E, #DAA520);
			border-bottom: 2px solid transparent;
			border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(240,230,140));
			border-image-slice: 1;
			border-radius: 4px!important;
			color: #000!important;
			text-decoration: none;
		}
		
			.btn-add-reservation-small:hover {
				background-image: linear-gradient(#B22222, #FFB6C1);
				border-bottom: 2px solid transparent;
				border-image: linear-gradient(0.20turn, rgba(250,128,114), rgba(248,248,255));
				border-image-slice: 1;
				color: #F8F8FF!important;
			}

	.selected-services {
		width: 97%;
		margin-left: 6px;
		margin-top: 6px;
		padding: 4px 6px;
		font-family: "Roboto", sans-serif;
		font-size: 15px;
		font-weight: bold;
		line-height: 1;
		/*background-color: red;*/
	}
	
		.selected-services p {
			font-size: 0.875em;
			font-weight: normal;
			color: #ADFF2F;
			line-height: 1.1;
		}

	.add-reservation-bottom {
		/*position: absolute;*/
		bottom: 0;
		width: 100%;
		height: 32px;
		text-align: center;
		background-color: #000;
		border-top: 2px solid transparent;
		border-image: linear-gradient(0.20turn, rgba(45,45,45), rgba(218,165,32), rgba(45,45,45));
		border-image-slice: 1;
		line-height: 2.0;
	}

	.frendix-tiny {
		width: 28px;
		height: 28px;
		background: url('img/F2022-small.png') no-repeat;
		background-position: center;
		background-size: 22px 22px;
	}

/* BOOKING CARD MOBILE */

#mobile-booking-details {
	position: fixed;
	width: 560px;
	/*max-height: 800px;*/
	top: 5%;
	left: 5%;
	/*top: 225px;*/
	/*right: 10px;*/
	background-color:rgba(0, 0, 0, 0.7);
	/*background-image: linear-gradient(#B22222, #FFB6C1);*/
	/*background-image: linear-gradient(#F08080, #FAF0E6);*/
	border: 2px solid transparent;
	border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(240,230,140));
	border-image-slice: 1;
	border-radius: 0.75em;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 4;
}



	/*.mobile-booking-overlay {
		position: fixed;
		top: 5%;
		left: 5%!important;
		background: rgba(0, 0, 0, 0.7);
		transition: opacity 500ms;
		visibility: hidden;
		opacity: 0;
	}
	
		.mobile-booking-overlay:target {visibility: visible;opacity: 1;}

	#mobile-booking-detailsTop {
		cursor: move;
		width: 100%;
		height: 28px;
		text-align: center;
		background-color: #000;
		border-bottom: 2px solid transparent;
		border-image: linear-gradient(0.20turn, rgba(45,45,45), rgba(218,165,32), rgba(45,45,45));
		border-image-slice: 1;
	}*/

	/*#mobile-booking-detailsTop .booking-close {
		position: absolute;
		top: -.2em;
		right: .2em;
		transition: all 200ms;
		font-size: 34px;
		font-weight: bold;
		text-decoration: none!important;
		color: #F8F8FF;
	}

		#mobile-booking-detailsTop .booking-close:hover {color: #B22222;}*/

		/*#mobile-booking-detailsTop p {
			margin-top: 0;
			padding: 4px;
			font-family: "Roboto", sans-serif;
			font-size: 13px;
			font-weight: 700;
			color: #DAA520;
		}*/

		.mobile-reservation-data-fields input[type=text] {
			padding: 2px 5px;
			margin: 0px 6px 6px 0px;
			width: 160px;
			/*background-color:rgba(255,215,0, 0.4);*/
			background-color: rgba(248,248,255, 0.7);
			height: 18px;
			font-size: 1.125em;
			font-weight: bold;
			/*color: #F8F8FF;*/
			color: rgba(0,0,0, 0.9)!important;
		}
		
		div.mobile-reservation-data-fields textarea {
			padding: 2px 5px;
			margin: 2px 2px;
			width: 160px;
			min-height: 50px;
			/*background-color:rgba(255,215,0, 0.4);*/
			background-color: rgba(248,248,255, 0.7);
			height: 18px;
			font-family: "Roboto", sans-serif;
			font-size: 1.125em;
			font-weight: bold;
			/*color: #F8F8FF;*/
			color: rgba(0,0,0, 0.9);
		}
		
		.mobile-reservation-data-fields input:focus {
			background-color:rgba(248,248,255);
			color: #000;
		}
		
		.mobile-reservation-data-fields textarea:focus {
			background-color:rgba(248,248,255);
			color: #000;
		}

		

		.reservation-text {
			flex-grow: 2;
		}

		.reservation-input {
			flex-grow: 3;
		}

		/*.mobile-reservation-data-fields :first-child {
			width: 30%;
		}*/

		p.reg {font-size:1em;line-height:0!important;text-decoration:uppercase;}

		
		
		
			/*width: 48%;
			height: 75px;
			width: 45%;
			justify-content: space-around;*/
		}

		.btn-right-to-left {}

		.flex-stretch {align-self: stretch;}
		
		.flex-start {align-self: start}
		
		.flex-end {align-self: end}
		
		@media (max-width: 700px) {
		.modify-reservation {flex-direction: column;max-width:700px;}
		}
		
		@media (max-width: 700px) {
			.booking-wide {display:none;}
		}
		
		@media (min-width: 701px) {
			.booking-narrow {display:none;}
		}
		
		/*.mobile-reservation-input-fields {
			
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-between;
		}

		.mobile-reservation-input-fields > div {
			width: 130px;
		}*/

		@media (max-width: 700px) {
			.reservation-data-fields {flex-direction: column;max-width:700px;}
		}

			/*.mobile-joint1 {
				grid-column: 2 / span 2;
			}
			
			.mobile-joint2 {
				grid-column: 4 / span 2;
			}

			.mobile-joint3 {
				grid-column: 2 / span 4;
			}*/

@media screen and (max-width: 665px) {
	#calendar {display:none;}
}

	.schedule-flex {
		padding: 10px 6px;
		clear: both;
	}

	.schedule-date {float: left;margin-top: -0.5em;margin-left: 0.8rem;height: 14px;color: rgba(255,255,255, 0.3);font-size: 1.4em;font-weight:900;}

	@media screen and (max-width: 598px) {
		.schedule-date {margin-top: 0;}
	}

	.schedule-workstation {
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 63px;
		float: left;
		/*height: 60px!important;*/
		width: auto;
		/*max-height: 60px;*/
		/*background-color: red;*/
		padding: 0px 10px;
		z-index: 1;
	}
	
			.workstations {
				/*margin-bottom: -8px;*/
				width: auto;
				font-size: 0;
				background-color: #212121;
				/*background-color: #fff;*/
				border-spacing: 3px;
				/*border: 2px solid white;*/
				border: 2px solid #212121;
				border-collapse: separate;
				border-radius: 6px;
				z-index: 2;
			}
			
				table.workstations td {
					width: 106px;
					text-align: center;
					border-radius: 8px;
					line-height: 1.2;
					border: 0;
					padding: 1px 8px;
					overflow: hidden!important;
					overflow-wrap: normal;
				}
					
					table.workstations p {
						margin: 0px;
						font-size: 13px;
						font-weight: 700;
						color: #7FFF00;
						overflow-wrap: inherit;
						white-space: nowrap!important;
						text-overflow: ellipsis!important;
					}
					
					p.wtm {
						white-space: nowrap!important;
						text-overflow: ellipsis!important;
					}
					
			.workstations-medium {
				/*margin-bottom: -8px;*/
				width: auto;
				font-size: 0;
				background-color: #212121;
				/*background-color: #fff;*/
				border-spacing: 3px;
				/*border: 2px solid white;*/
				border: 2px solid #212121;
				border-collapse: separate;
				border-radius: 6px;
			}
			
				table.workstations-medium td {
					width: 86px;
					text-align: center;
					border-radius: 8px;
					overflow: hidden;
					line-height: 1.2;
					border: 0;
					padding: 1px 8px;
					white-space: nowrap!important;
					text-overflow: ellipsis!important;
				}
					
	.schedule-cells {
		float: left;
		height: auto;
		width: auto;
		/*background-color: blue;*/
		padding: 6px 10px;
	}
	
		.cells {
			width: auto;
			background-image: linear-gradient(#212121, #444444);
			border: 2px solid #212121;
			border-spacing: 3px;
			border-collapse: separate;
			margin-top: -9px;
			padding: 6px 1px;
		}
	
			table.cells td {
				width: 106px;
				height: 60px;
				word-break: break-word!important;
				font-family: "Roboto", sans-serif;
				font-size: 0.875em;
				font-weight: 500;
				line-height: 1.3;
				text-align: center;
				border: 0;
				padding: 4px 8px;
				border-radius: 8px;
				/*border-radius: 12% 4%;*/
			}
			
			table.cells a {
				cursor: cell!important;
				width: 100%;
				height: 100%;
				display: block;
			}
			
		.cells-medium {
			width: auto;
			overflow: hidden;
			background-image: linear-gradient(#212121, #444444);
			border: 2px solid #212121;
			border-spacing: 3px;
			border-collapse: separate;
			margin-top: -9px;
			padding: 6px 1px;
		}	
			
			table.cells-medium td {
				width: 86px;
				height: 30px;
				word-break: break-word!important;
				font-family: "Roboto", sans-serif;
				font-size: 0.875em;
				font-weight: 500;
				line-height: 1.3;
				text-align: center;
				border: 0;
				padding: 4px 8px;
				border-radius: 8px;
			}
	
		.cells-small {
			width: auto;
			overflow: hidden;
			background-image: linear-gradient(#212121, #444444);
			border: 2px solid #212121;
			border-spacing: 3px;
			border-collapse: separate;
			margin-top: -9px;
			padding: 6px 1px;
		}	
			
			table.cells-small td {
				width: 52px!important;
				max-height: 18px!important;
				word-break: break-word!important;
				font-family: "Roboto", sans-serif;
				font-size: 0.875em;
				font-weight: 500;
				line-height: 1.3;
				text-align: center;
				border: 0;
				padding: 4px 8px;
				border-radius: 6px;
				overflow: hidden;
				text-overflow: ellipsis!important;
				white-space: pre-line;
			}
	
				.cell-available {
					background-image: linear-gradient(#32CD32, #90EE90);
					/*background-color: #90EE90;*/
					cursor: cell!important;
					color: #000;
				}
					
				.cell-reserved {
					cursor: pointer;
					text-overflow: hidden;
					background-image: linear-gradient(#800000, #B74733);
					color: #F8F8FF;
				}
					
				.cell-initial {
					cursor: pointer;
					text-overflow: hidden;
					background-image: linear-gradient(#4169E1, #4682B4);
					color: #000;
				}
					
				.cell-extension {
					cursor: pointer;
					text-overflow: hidden;
					background-image: linear-gradient(#FF4500, #FF8800);
					color: #000;
				}
	
			.calendar-time {
				width: 38px!important;
				vertical-align: top;
				text-align: right!important;
				padding-right: 8px;
				padding-top: 4px;
				font-weight: bold!important;
			}
				
					.calendar-time img {
						opacity: 0.3;
						text-align:left!important;
						margin-top: 5px;
					}
	
			@media screen and (max-width: 425px) {
				.calendar-time {font-size: 0.7em!important;}
			}
	
			.calendar-cells-normal {
				width: 115px;
				height: 35px;
			}
	
			.opening-hours {
				display: table-row;
				width: 60px;
				height: 50px;
				background-color: yellow;
			}
	
			.workers-tm {
				display: table-row;
			}
			
			.workers-af {
				display: table-row;
			}
			
				.worker-name {
					display: table-cell;
					width: 75px;
					padding: 2px 6px;
					text-align: center;
					border: 2px solid green;
				}
				
					.wtm {
						font-size: 16px;
						font-weight: 700;
						color: #F0FFFF;
						text-align: center;
						white-space: nowrap!important;
						text-overflow: ellipsis!important;
					}
					
					.waf {
						width: 120px!important;
						font-size: 13px;
						font-weight: 700;
						color: #7FFF00;
						text-align: center;
					}
	
		.schedule-calendar {
			flex-direction: row;
			/*align-self: flex-end;*/
			background-color: white;
			padding: 10px;
			width: 240px;
			height: 240px;
			/*flex:auto;*/
		}
	
	@media (max-width: 1080px) {
		.schedule-workstation, .schedule-calendar {
			flex: 80%;
		}
	}



/* SERVICES */

.add-service {
	display: flex;
	flex-direction: column;
	padding: 4px;
	/*border: 2px solid transparent;
	border-image: var(--frame1);
	border-image-slice: 1;
	border-radius: 4px;*/
}

	.servicename {
		margin-left: -3px;
		margin-top: -2px;
		width: 275px!important;
		height: 26px;
		border-radius: 4px;
		font-size:0.9125em!important;
		/*background: linear-gradient(to bottom right, #C0C0C0 30%, #fff 70%);*/
	}
	
		.name-of-service {
			display: flex;
			flex-direction: row;
			column-gap: 4px;
		}

#services-management {
	position: fixed;
	max-width: 640px;
	height: auto;
	top: 24%;
	left: 3%;
	background-color:rgba(0, 0, 0, 0.85);
	border: 2px solid transparent;
	border-image: var(--frame1);
	border-image-slice: 1;
	border-radius: 0.75em;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 4;
}

#services-management input, select {font-size:1.05em!important;}

@media screen and (max-width: 700px) {
	#services-management {max-height: 70%;}
}

@media screen and (max-height: 1000px) {
	#services-management {max-height: 70%;}
}

.services-overlay {
			position: fixed;
			top: 5%;
			right: 5%!important;
			background: rgba(0, 0, 0, 0.8);
			transition: opacity 500ms;
			visibility: hidden;
			opacity: 0;
		}
	
		.services-overlay:target {visibility: visible;opacity: 1;}
		
	#services-managementTop {
		position: static;
		cursor: move;
		width: 100%;
		height: 28px;
		text-align: center;
		background-color: #000;
		border-bottom: 2px solid transparent;
		border-image: var(--gradient-line1);
		border-image-slice: 1;
	}

	#services-managementBottom {
		display: flex;
		align-items: center;
		justify-content: center;
		position: static;
		cursor: move;
		width: 100%;
		height: 42px;
		text-align: center;
		background-color: #000;
		border-top: 2px solid transparent;
		border-image: var(--gradient-line1);
		border-image-slice: 1;
	}

		#services-managementTop .services-close {
			position: absolute;
			top: -.2em;
			right: .2em;
			transition: all 200ms;
			font-size: 34px;
			font-weight: bold;
			text-decoration: none!important;
			color: #F8F8FF!important;
		}

		#services-managementTop .services-close:hover {color: #B22222!important;}
		
	#services-managementTop p {
		margin-top: 0;
		padding: 4px;
		font-family: "Roboto", sans-serif;
		font-size: 13px;
		font-weight: 700;
		color: var(--subtitle);
		text-transform: uppercase;
	}

	.services-data-fields {
		display:flex;
		flex-direction:column;
		align-items: center;
		justify-content: space-evenly;
		padding: 6px 4px;
	}

	.srvcard-title-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 42px;
		font-family: "Roboto", sans-serif;
		font-size: 1em;
		font-weight: 700;
		color: var(--subtitle);
		text-transform: uppercase;
	}
	
	.srvcard-basic-row {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		column-gap: 5px;
		width: 100%;
		min-height: 32px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		color: var(--text);
		text-transform: uppercase;
	}

	.services-note {text-indent: -0.02em;padding:2px!important;white-space: pre-line;font-size:13px;font-weight:normal;color: #F0FFFF;text-transform:none;}

	/* SERVICES CARD */
	.srv-card-contents-l {
		display: flex;
		align-items: center;
	}

	.srv-card-contents-r {
		display: flex;
		align-items: center;
	}
	
	.srv-title-block100 {display: flex;flex-direction:row;width:100%;text-indent: 4px;row-gap: 4px;}
	.srv-block100 {display: flex;flex-direction:row;width:100%;text-indent: 4px;row-gap: 4px;}
	.srv-blockLeft100 {display: flex;flex-direction:row;width:100%;}
	.srv-blockLeft34 {display: flex;flex-direction:row;width:34%;}
	.srv-blockLeft {display: flex;flex-direction:row;width:50%;}
	.srv-blockRight66 {display: flex;flex-direction:row;width:66%;}
	.srv-blockRight {display: flex;flex-direction:row;width:50%;}
	.srv-block33 {display: flex;flex-direction:row;width:33%;}
	.srv-block30 {display: flex;flex-direction:row;width:30%;}
	.srv-block25 {display: flex;flex-direction:row;width:25%;}
	.srv-block20 {display: flex;flex-direction:row;width:20%;}

	.srv-blockLeft100 input[type=text] {width:74%;}
	.srv-blockRight66 input[type=text] {width:70%;}
	.srv-tinyinput {width:32%!important;height:28px;}
	.srv-space {margin: 0 13px;}
	
	.srv-blockLeft select,
	.srv-blockRight select {width: 56px;}

.workstation-services {
	height: 2.8em;
	padding: 2px 3px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.services-frame {
	border: 2px solid transparent;
	border-image: var(--frame1);
	border-image-slice: 1;
	border-radius: 4px;
}

.services-topic {
	/*display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-columns: repeat(12, auto);*/
	grid-auto-flow: dense;
	/*border: 2px solid transparent;
	border-image: var(--frame1);
	border-image-slice: 1;
	border-radius: 4px;*/
}

.services {
	display: grid;
	/*display: flex;
	flex-wrap: nowrap;
	overflow-x: none;*/
	grid-template-columns: repeat(12, auto);
	grid-auto-rows: auto;
	gap: 2px;
	/*grid-auto-flow: column dense;
	grid-auto-rows: minmax(auto, 1fr);
	grid-template-columns: repeat(12, auto);
	grid-auto-flow: dense;
	border: 2px solid transparent;
	border-image: var(--frame2);
	border-image-slice: 1;
	border-radius: 4px;*/
}

	/*.srv {
		color: #FFFAF0;
		border: 1px solid white;
		padding: 3px;
		flex: 0 0 calc(100% / 12);
	}*/
	
		/*.srv-topic1,
		.srv-topic2,
		.srv-topic3,
		.srv-topic4,
		.srv-topic5,
		.srv-topic6,
		.srv-topic7,
		.srv-topic8,
		.srv-topic9,
		.srv-topic10,*/
		.srv-topic {
			background-color: black;
			font-family: "Roboto", sans-serif;
			font-size: 1.025em;
			font-weight: 600;
			text-transform: uppercase;
			padding: 3px;
			/*border: 1px solid white;
			grid-column: 1 / -1;*/
		}
		.srv-topic12 {background-color: transparent!important;border:none!important;}
	
		
		.srv1{grid-column: 1;}
		.srv2{grid-column: 2;}
		.srv3{grid-column: 3;}
		.srv4{grid-column: 4;}
		.srv5{grid-column: 5;}
		.srv6{grid-column: 6;}
		.srv7{grid-column: 7;}
		.srv8{grid-column: 8;}
		.srv9{grid-column: 9;}
		.srv10{grid-column: 10;}
		.srv11{grid-column: 11;}
		.srv12{grid-column: 12;}
		
	.srv-host {
		/*grid-template-areas:
			"id name col3 col4 col5 col6 col7 col8 col9 col10 col11 col12";
		display: grid;*/
		/*grid-template-columns: repeat(12, 1fr);*/
		background-color: var(--grid-host);
		/*grid-column: span 12;*/
	}
	.srv-child {
		/*grid-template-areas:
			"id name col3 col4 col5 col6 col7 col8 col9 col10 col11 col12";
		display: grid;
		grid-template-columns: repeat(12, 1fr);*/
		background-color: var(--grid-child);
		/*grid-column: span 12;*/
	}
	/*div.srv2.srv-child {padding-left: 20px!important;}*/
	
	.srv2.srv-child {padding-left: 0.75em;}
	
	.srv-id {
  grid-area: id;
}

.srv-name {
  grid-area: name;
}

.srv-col3 {
  grid-area: col3;
}

.srv-col4 {
  grid-area: col4;
}

.srv-col5 {
  grid-area: col5;
}

.srv-col6 {
  grid-area: col6;
}

.srv-col7 {
  grid-area: col7;
}

.srv-col8 {
  grid-area: col8;
}

.srv-col9 {
  grid-area: col9;
}

.srv-col10 {
  grid-area: col10;
}

.srv-col11 {
  grid-area: col11;
}

.srv-col12 {
  grid-area: col12;
}
	
	.sortable-group {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
	}

@media screen and (max-width: 1200px) {
	
	.srv12 {grid-column: 7;}
	
	.services {
		grid-template-columns: repeat(7, auto);
	}
	
	.srv-topic7, .srv-topic8, .srv-topic9, .srv-topic10, .srv-topic11 {
		display: none;
	}
	
	.srv7, .srv8, .srv9, .srv10, .srv11 {
		display: none;
	}
}

@media screen and (max-width: 720px) {
	.srv12{grid-column: 6;}
	
	.services {
		grid-template-columns: repeat(6, auto);
	}
	
	.srv-topic6 {display: none;}
	.srv6 {display: none;}
}

@media screen and (max-width: 480px) {
	.srv12{grid-column: 5;}
	
	.services {
		grid-template-columns: repeat(5, auto);
	}
	
	.srv-topic5 {display: none;}
	.srv5 {display: none;}
}



/* INSTRUCTIONS */

.educational-videos-topic {
	margin-left: 7px;
}

.educational-videos {
	margin-left: 8px;
	display: grid;
	grid-template-columns: 160px 1fr;
	grid-template-rows: auto;
	max-width: 700px;
	gap: 2px;
}

	.video-wrapper {
		position: relative;
		display: inline-block;
		width: 150px!important;
		height: 125px;
		grid-column: 1;
		grid-row: 1 / span 4;
		overflow: hidden;
		border: 2px solid transparent;
		border-image: var(--frame2);
		border-image-slice: 1;
		border-radius: 4px;
	}

		.video-wrapper img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			background-color: transparent;
		}

		.play-button {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: transparent;
			background-image: url(img/play.png);
			background-size: 100% 100%;
			background-position: center;
			background-repeat: no-repeat;
			opacity: 0.7;
			transition: opacity 0.8s;
		}

			.play-button:hover {
				opacity: 1;
			}

	.video-title {
		font-family: "Roboto", sans-serif;
		font-size: 1.2em;
		font-weight: bold;
		text-overflow: ellipsis!important;
		text-transform: uppercase;
		height: 42px;
		grid-column: 2;
		grid-row: 2;
		/*background-color: #006400;*/
	}

	.video-date,
	.video-duration {
		font-family: "Roboto", sans-serif;
		font-size: 0.925em;
		text-overflow: ellipsis!important;
		text-transform: uppercase;
		height: 30px;
		grid-column: 2;
	}

	.video-status {
		height: 26px;
		grid-column: 2;
		grid-row: 1;
	}

		.new-marker {
			font-family: "Roboto", sans-serif;
			font-size: 0.875em!important;
			font-weight: 900;
			text-transform: uppercase;
			animation: blink 2s infinite;
		}

@keyframes blink {
	0% {
		color: #FF4500/*#B22222*/;
	}
	50% {
		color: transparent;
	}
	100% {
		color: #FF4500;
	}
}

	
@media (max-width: 485px) {
  .educational-videos {
    grid-template-rows: auto;
    row-gap: 16px;
	padding-bottom: 16px;
  }

	.video-wrapper {
		grid-column: 1 / span 2;
		grid-row: 4;
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
	}

  .video-title {
    width: auto;
	height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
    grid-column: 1 / span 2;
    grid-row: 1;
    /*background-color: brown;*/
  }

  .video-date {
    width: 175px;
    height: 12px;
    grid-column: 1;
    grid-row: 2;
    /*background-color: orange;*/
  }

  .video-duration {
    width: auto;
    height: 12px;
    grid-column: 1 / span 2;
    grid-row: 3;
  }

  .video-status {
    width: 100%;
	height: 12px;
    grid-column: 2;
    grid-row: 2;
    /*background-color: green;*/
    display: flex;
    align-items: center;
  }

  .new-marker {
    margin-left: 8px;
  }
}


/* UPDATES */

.updates-topic {
	margin-left: 7px;
}

.updButtons {
		display: flex;
		flex-direction: row;
		width: auto;
		margin-left: 6px;
		margin-bottom: 16px;
		column-gap: 4px;
}

.update-box {
	margin-left: 8px;
	margin-bottom: 12px;
	padding: 6px;
	display: grid;
	grid-template-columns: 160px 1fr;
	grid-template-rows: auto;
	max-width: 700px;
	background-color: #424242;
	/*border: 2px solid transparent;
	border-image: var(--frame2);
	border-image-slice: 1;
	border-radius: 4px;*/
}

	.update-title {
		font-family: "Roboto", sans-serif;
		font-size: 1.2em;
		font-weight: bold;
		text-overflow: ellipsis!important;
		text-transform: uppercase;
		height: 32px;
		grid-column: 1 / span 2;
		grid-row: 1;
		/*background-color: #006400;*/
	}

	.update-date {
		font-family: "Roboto", sans-serif;
		font-size: 0.925em;
		text-overflow: ellipsis!important;
		text-transform: uppercase;
		height: 32px;
		grid-column: 1;
		grid-row: 2;
	}

	.update-status {
		width: 100%;
		height: 12px;
		grid-column: 2;
		grid-row: 2;
		/*background-color: green;*/
		display: flex;
		align-items: center;
	}
	
	.update-contents {
		grid-column: 1 / span 2;
	}
	.update-contents p {
		margin: 0;
		padding: 0;
		text-indent: 0;
		line-height: 1.5;
	}
	.update-contents p::first-letter {text-transform: uppercase;}
	

/* TRANSPORTS */

.transTop {padding: 8px 0px;}

	.transmenu {
		float: left;
		display: flex;
		flex-direction: row;
		padding: 4px 6px;
		/*height: 46px;*/
		column-gap: 8px;
		row-gap: 8px;
		/*align-items: flex-start!important;*/
	}
	
	.ts-menu {
		clear: both;
		margin-left: 7px;
		padding-top: 3px;
	}
	
	.transbutton input[type="text"] {
		width: 146px;
		height: 30px;
		margin-top: -1px;
		font-size:0.9125em;
	}
	
	.transbutton select {
		width: 144px;
		height: 30px;
		margin-left:2px;
		
	}
	
	.trans-search {
		margin: 0 5px;
		background: none;
		border-bottom: 1px solid #ADFF2F;
		border-top: none;
		border-left: none;
		border-right: none;
		width: 180px;
		height: 36px;
	}
	
		#trans-search-list {width: 140px!important;}
	
		.btn-ts-search {width: 32px; height: 32px;}
	
	@media (max-width: 600px) {
		.transmenu {flex-direction: column;max-width:600px;/*align-items: stretch!important;*/}
		.transTop {min-height: 120px;}
	}
	
			.transbutton {
				display: flex;
				align-self: stretch!important;
				column-gap: 3px;
			}
	
		.batchname {
			margin-top: -2px!important;
			width: 137px!important;
			height: 25px;
			border-radius: 4px;
			font-size:0.9125em!important;
			/*background: linear-gradient(to bottom right, #C0C0C0 30%, #fff 70%);*/
		}
	
			.batchselect {
				padding: 2px;
				margin-top: -1px;
				font-family: "Roboto", sans-serif;
				width: 145px!important;
				height: 30px;
				border-radius: 2px;
				font-size:0.9125em!important;
				/*background: linear-gradient(to bottom right, #C0C0C0 30%, #fff 70%);*/
			}

			.transbutton input {align-self: flex-start!important;}
	


		.btn-edit {
			cursor: pointer;
			background: url('img/muokkaa.png') transparent no-repeat;
			background-size: 22px 24px;
			background-position: center;
		}

		.cell-btnqr {
			width: 28px;
			height: 28px;
			background-image: var(--btn-bg1)!important;}

			.cell-btnqr:hover {background-image: var(--btn-bg2)!important;}

		.btn-qr {
			padding: 2px;
			line-height: 0.6em;
			cursor: pointer;
			width: 28px;
			height: 28px;
			background: url('img/icon-qr.png') transparent no-repeat;
			background-size: 24px 24px;
			background-position: center;
			border-bottom: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 4px;
		}

			.btn-qr:hover {
				background: url('img/icon-qr-hover.png') transparent no-repeat;
				background-size: 24px 24px;
				background-position: center;
				border-bottom: 2px solid transparent;
				border-image: var(--frame2);
				border-image-slice: 1;
				border-radius: 4px;
			}

		.btn-mglass {
			padding: 2px;
			line-height: 0.6em;
			cursor: pointer;
			width: 28px;
			height: 28px;
			background: url('img/icon-magnglass.png') transparent no-repeat;
			background-size: 24px 24px;
			background-position: center;
			border-bottom: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 4px;
		}
		
			.btn-mglass:hover {
				background: url('img/icon-magnglass-hover.png') transparent no-repeat;
				background-size: 24px 24px;
				background-position: center;
				border-bottom: 2px solid transparent;
				border-image: var(--frame2);
				border-image-slice: 1;
				border-radius: 4px;
			}

		.btn-randomize {
			padding: 2px;
			line-height: 0.6em;
			cursor: pointer;
			width: 28px;
			height: 28px;
			background: url('img/icon-randomize.png') transparent no-repeat;
			background-size: 20px 20px;
			background-position: center;
			border-bottom: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 4px;
		}

			.btn-randomize:hover {
				background: url('img/icon-randomize-hover.png') transparent no-repeat;
				background-size: 20px 20px;
				background-position: center;
				border-bottom: 2px solid transparent;
				border-image: var(--frame2);
				border-image-slice: 1;
				border-radius: 4px;
			}

	.trans {
		display: inline-flex;
		top: 0;
		padding: 2px;
		width: auto;
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
	}

	.transports {
		margin-top: 0;
		font-size: 14px;
		font-weight: 500;
	}
	
		/*.transports:first-letter {text-transform: capitalize;}*/
		
		.transports td {
			white-space: pre-line;
			overflow: hidden;
			text-overflow: ellipsis;
			border: 1px solid #FFFAFA;
		}

			.trans-title {background-color:#000!important;font-weight:700;}
			
			.trans-row1 {/*background: #303030;*/background-image:var(--trans-row1);color:var(--text);}
			
			.trans-row2 {/*background: #303030;*/background-image:var(--trans-row2);color:var(--text);}

			.trans-rowH {/*background: #303030;*/color:#F5FFFA;animation: blinkingBackground 1.5s infinite;}

				@keyframes blinkingBackground {
					0%		{ background-color: linear-gradient(#800080, #DA70D6)}

					50%		{ background-image: linear-gradient(#663399, #800080)}

					100%	{ background-color: linear-gradient(#800080, #DA70D6)}
				}

			.title-transports {
				font-size: 0.9125em!important;
				height: 42px;
				font-weight: bold;
				color: var(--subtitle);
				background-color:#000!important;
				text-decoration: none;
				text-transform: uppercase!important;
			}

		.transnro {text-align: center;font-weight:700;}
		
		.print-area {text-align:center!important;width:48px;}

		.btn-print {
				cursor: pointer;
				width: 32px;
				height: 32px;
				background: url('img/icon-print.png') transparent no-repeat;
				background-size: 31px 28px;
				background-position: center;
				border: none;
			}

				.btn-print:hover {
					background: url('img/icon-print-hover.png') transparent no-repeat;
					background-size: 31px 28px;
					background-position: center;
					scale: 1.12;
				}



/* SCHEDULE DEFINITIONS */

	.schedule-definitions-frame {
		display: inline-flex;
		margin-top: 4px;
		padding: 2px;
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 0.75em;
	}

	#schedule-definitions-frame {
		width:auto;
		margin-top: 0;
		border-collapse: collapse;
		/*display: flex;*/
	}

		#schedule-definitions-frame td {
			width: auto;
			padding: 2px 4px;
			white-space: break-spaces;
			overflow: hidden;
			text-overflow: ellipsis;
			border: 1px solid #FFFAFA;
			/*vertical-align: top;*/
		}
		
		/*#schedule-definitions-frame br {
			display: block;
			content: "";
			margin-top: 1px;
			line-height: 200%;
		}*/

			.frame-title {height:42px;color:var(--subtitle)!important;background-color:#000!important;font-size:0.9125em;font-weight:700;text-transform:uppercase!important;}
			.frame-host {height: 32px;background-image: linear-gradient(#000000, #1E1E1E);font-size:0.9125em;font-weight:600;color:var(--text);}
			.frame-warehouse {height: 42px;color:#DEB887!important;background-image: linear-gradient(#1E1E1E, #303030);font-size:0.9125em;font-weight:600;color:var(--text)!important;}
			.frame-definitions {height: 72px;background-image: linear-gradient(#303030, #404040);font-size:0.9125em;font-weight:500;color:var(--text);}

		@media screen and (max-width: 900px) {
			.frame-title, .frame-host, .frame-warehouse, .frame-definitions {font-size:0.8125em;}
		}		
		.btn-defplus {
			white-space: nowrap;
			cursor: pointer;
			width: 32px;
			height: 32px;
			background: url('img/icon-plus-b.png') transparent no-repeat;
			background-size: 30px 30px;
			background-position: center;
			font-size: 0.75em;
			font-weight: 800;
			/*background-image: linear-gradient(#D2691E, #DAA520);*/
			border-bottom: 2px solid transparent;
			border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(240,230,140));
			border-image-slice: 1;
			border-radius: 4px;
			/*text-transform: uppercase;*/
			text-indent: -9000px; text-transform: capitalize;
		}
	
		/*@media screen and (min-width: 900px) {
			.minimize-plus:hover {color: #fff;background-image: linear-gradient(to bottom right, #D2691E, #FFFAF0);}
		}
	
		@media screen and (max-width: 900px) {
			.minimize-plus {
				width: 32px;
				height: 32px;
				
				
			}*/
			
			.btn-defplus:hover {background: url('img/icon-plus-w.png') transparent no-repeat;background-size: 30px 30px;background-position: center;}
		
	
		.btn-frame-basic {
			margin-top: 4px;
			float: left;
			clear: both;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
			width: 175px;
			height: 32px;
			font-size: 0.75em;
			font-weight: 800;
			background-image: var(--btn-bg1);
			border-bottom: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 4px!important;
			color: #000;
			text-transform: uppercase;
		}
	
			.btn-frame-basic:hover {
				background-image: var(--btn-bg2);
				border-bottom: 2px solid transparent;
				border-image: var(--frame2);
				border-image-slice: 1;
				color: #F8F8FF;
			}
	
		@media screen and (max-width: 900px) {
			.btn-frame-basic {font-size:0.6em;height:20px;width:115px;font-weight:800;}
		}
	
		.btn-frame-add {
			clear: both;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
			width: auto;
			height: 32px;
			font-size: 0.75em;
			font-weight: 800;
			background-image: var(--btn-bg1);
			border-bottom: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 4px!important;
			color: #000;
			text-transform: uppercase;
			text-decoration: none;
		}
	
			.btn-frame-add:hover {
				background-image: var(--btn-bg2);
				border-bottom: 2px solid transparent;
				border-image: var(--frame2);
				border-image-slice: 1;
				color: #F8F8FF;
			}
	
		.cell-btnbg {
			width: 32px;
			height: 32px;
			background-image: var(--btn-bg1)!important;
		}
		
			.cell-btnbg:hover {background-image: var(--btn-bg2)!important;}
	
		.btn-edit {
			white-space: nowrap;
			cursor: pointer;
			width: 32px;
			height: 32px;
			background: url('img/icon-edit-b.png') transparent no-repeat!important;
			background-size: 30px 30px!important;
			background-position: center!important;
			/*background-image: linear-gradient(#D2691E, #DAA520);*/
			font-size: 0.75em;
			font-weight: 800;
			/*background-image: linear-gradient(#D2691E, #DAA520);*/
			border-bottom: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 4px!important;
			color: #000!important;
			/*text-transform: uppercase;*/
			text-indent: -9000px; text-transform: capitalize;
		}
	
			.btn-edit:hover {
				background: url('img/icon-edit-w.png') transparent no-repeat!important;
				background-size: 30px 30px!important;
				background-position: center!important;
				border-bottom: 2px solid transparent;
				border-image: var(--frame2);
				border-image-slice: 1;
				color: #F8F8FF!important;
			}
	
		/*@media screen and (min-width: 900px) {
			.minimize-edit:hover {color: #fff;background-image: linear-gradient(to bottom right, #D2691E, #FFFAF0);}
		}
	
		@media screen and (max-width: 900px) {
			.minimize-edit {
				width: 32px;
				height: 32px;
				background: url('img/icon-edit-b.png') transparent no-repeat;
				background-image: linear-gradient(#D2691E, #DAA520);
				background-size: 30px 30px;
				background-position: center;
				text-indent: -9000px; text-transform: capitalize;
			}
			
			
		}*/
		
		.btn-delete {
			white-space: nowrap;
			cursor: pointer;
			width: 32px;
			height: 32px;
			background: url('img/icon-delete-b.png') transparent no-repeat!important;
			background-size: 30px 30px!important;
			background-position: center!important;
			border-bottom: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 4px;
			/*text-transform: uppercase;*/
			text-indent: -9000px; text-transform: capitalize;
		}

			.btn-delete:hover {
				background: url('img/icon-delete-w.png') transparent no-repeat!important;
				background-size: 30px 30px!important;
				background-position: center!important;
				border-bottom: 2px solid transparent;
				border-image: var(--frame2);
				border-image-slice: 1;
				color: #F8F8FF!important;
			}
	
		.activity {
			position: relative;
			top: -60px;
			background-color: red;
			margin-top: 0!important;
			height: 60px!important;
			padding: 0!important;
		}
	
		.frame-multiple {
			display: flex;
			flex-direction: row;
			padding: 6px 2px;
			/*background: blue;*/
			vertical-align: middle;
			align-items: center;
		}
		
		@media (max-width: 900px) {
			.frame-multiple {flex-direction: column;align-items: flex-start;}
		}
	
		.frame-large {}
		
		.frame-small {overflow: visible;}
		
		.frame-btn {padding:0px!important;margin-left: 6px!important;}
		
		@media (max-width: 900px) {
			.frame-large {display:none;}
		}
	
		@media (min-width: 901px) {
			.frame-small {display:none;}
		}
	
		.frame-def-left {clear:both;background-color:red;float:left;display:inline-block;}
		.frame-def-right {clear:both;background-color:blue;float:left;display:inline-block;}
		
		.btn-save {
			/*margin-left: 6px;*/
			white-space: nowrap;
			cursor: pointer;
			width: 32px;
			height: 32px;
			background: url('img/icon-save-b.png') transparent no-repeat;
			/*background-image: linear-gradient(#D2691E, #DAA520);*/
			background-size: 26px 26px;
			background-position: center;
			font-size: 0.75em;
			font-weight: 800;
			border-bottom: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 4px;
			/*text-transform: uppercase;*/
			text-indent: -9000px; text-transform: capitalize;
		}

			.btn-save:hover {
				background: url('img/icon-save-w.png') transparent no-repeat;
				background-size: 26px 26px;
				background-position: center;
				border-bottom: 2px solid transparent;
				border-image: var(--frame2);
				border-image-slice: 1;
			}
		
		
			.frame-row1 {height: 50px;background: #303030;}
			/*(#404040, #1E1E1E)*/
			/*(#1E1E1E, #404040)*/
			/*(#32CD32, #90EE90)*/
			/*(#800000, #B74733)*/
			/*(#4169E1, #4682B4)*/
			/* #800000, #B74733 */
			/*#FF8800, #FF4500*/
			.frame-row2 {height: 50px;background: #404040;}

		@media screen and (max-width: 900px) {
			.frame-row1, .frame-row2 {font-size:0.8125em;font-weight:700;}
		}



/* CREATE WORKSTATION AREA */

.create-workstation-area-frame {
		margin-top: 4px;
		padding: 2px;
		/*max-width: 480px;
		border: 2px solid transparent;
		border-image: var(--frame2);
		border-image-slice: 1;
		border-radius: 0.75em;*/
	}

#workstation-area-basic {
    display: flex;
    flex-direction: row;
	gap: 6px;
    /*width: 480px;
    border: 2px solid transparent;
    border-image: var(--frame1);
    border-image-slice: 1;
    background: rgba(0, 0, 0, 0.5);*/
}

	.warea-frame-left,
	.warea-frame-right {
		display: flex;
		flex-direction: column;
		width: 480px;
		background: rgba(0, 0, 0, 0.5);
	}
	
	.warea-frame-left {
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}
	
	.warea-frame-right {
		border: 2px solid transparent;
		border-image: var(--frame2);
		border-image-slice: 1;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}

.workstation-area-title {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: flex-start;
    font-family: "Roboto", sans-serif;
    font-size: 0.925em;
    font-weight: 700;
	text-indent: 3px;
    color: var(--subtitle);
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.8);
}

	.workstation-area-subtitle {
		display: flex;
		width: 100%;
		min-height: 36px;
		align-items: center;
		justify-content: flex-start;
		font-family: "Roboto", sans-serif;
		font-size: 0.775em;
		font-weight: 600;
		text-indent: 3px;
		line-height: 1.4em;
		color: var(--subtitle2);
		text-transform: uppercase;
		background: rgba(0, 0, 0, 0.8);
	}

.warea-row1,
.warea-row2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 5px;
    width: 100%;
    min-height: 28px;
	padding: 4px 0px;
    font-family: "Roboto", sans-serif;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--text);
}

	.warea-row1 {
		background: #303030;
	}
	
	.warea-row1:first-letter {text-transform: capitalize;}

	.warea-row2 {
		background: #404040;
	}
	
	.warea-row-header {
		position: relative;
		display: inline-block;
		padding-top: 5px;
		font-size:0.92em;
		text-indent:0!important;
		text-transform: uppercase;
	}
	
	.warea-row-end-text {
		position: relative;
		display: inline-block;
		text-indent:0!important;
	}

	.scheduling-row-wide {display: flex;flex-direction: row;width: 100%;}
	.scheduling-row-narrow {display: flex;flex-direction: row;}

.warea-topic-row1,
.warea-topic-row2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    column-gap: 5px;
    width: 100%;
    min-height: 32px;
	padding-bottom: 4px;
    font-family: "Roboto", sans-serif;
    font-size: 0.775em;
    font-weight: 500;
	text-indent: 6px;
    color: var(--text);
    text-transform: uppercase;
}

.warea-topic-row1 {
    background: #303030;
}

.warea-topic-row2 {
    background: #404040;
}

	.til6 {text-indent: 6px!important;}
	.til7 {text-indent: 7px!important;}
	.til10 {text-indent: 10px!important;}

.warea-row1 input[type="text"],
.warea-row1 input[type="number"],
.warea-row2 input[type="text"],
.warea-row2 input[type="number"] {
    color: #191970;
}

.warea-row1 input[type="number"],
.warea-row2 input[type="number"] {
	font-size: 16px!important;
	font-weight: bolder!important;
	width: 56px;
}

.warea-row1 textarea,
.warea-row2 textarea {
    color: #191970;
    width: 205px;
    min-height: 60px;
    font-family: "Roboto", sans-serif;
    font-size: 1.0em;
    font-weight: 600;
    background: linear-gradient(to bottom right, #C0C0C0 30%, #fff 70%);
}

.warea-row1 input:focus,
.warea-row2 input:focus,
.warea-row1 textarea:focus,
.warea-row2 textarea:focus {
    color: #000;
    font-size: 1.1em;
    font-weight: 500;
    background: var(--input-focus);
}

	.week-day {
		position: relative;
		display: inline-block;
		padding-top: 5px;
		text-indent:0!important;
		text-transform: uppercase;
		line-height: 1.6;
	}
	
	.invisible-day {
		position: relative;
		display: inline-block;
		padding-top: 2px;
		text-indent:100%!important;
		white-space: nowrap;
		overflow: hidden;
		line-height: 1.6;
	}

	#create-workstation-area-frame {
		max-width: 480px;
		margin-top: 0;
		border-collapse: collapse;
		/*display: flex;*/
	}

		#create-workstation-area-frame td {
			width: auto;
			padding: 4px 4px;
			white-space: break-spaces;
			overflow: hidden;
			text-overflow: ellipsis;
			/*border: 1px solid green;*/
			/*vertical-align: top;*/
		}

			.area-title {
				vertical-align: text-top;
				height: 62px;
				background-image: linear-gradient(#000000, #303030);
				/*font-size:0.9125em;
				font-weight:600;
				color:#ADFF2F;*/
				text-transform:uppercase!important;
			}

				.warea-topic {
					font-family: "Roboto", sans-serif;
					font-size: 1em!important;
					font-weight: 700;
					line-height: 1.5;
					padding: 12px;
					background: var(--gradient-text);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					-moz-background-clip: text;
					-moz-text-fill-color: transparent;
				}

			.area-row0 {
				height: 45px;
				background-image: linear-gradient(#000000, #1E1E1E);
			}


			.area-row3 {
				height: 8px;
				/*background-image: linear-gradient(#303030, #000000);*/
				background: #303030;
			}

			.day-closed {color: #B22222!important;}
				.day-closed::placeholder {color: #A9A9A9!important;opacity:0.8!important;}
			.day-open {color: #228B22!important;}
				.day-open::placeholder {color: #A9A9A9!important}

		.save-form {
			text-align: center;
			height: 50px;
		}

			.btn-save-workstation-area {
				cursor: pointer;
				font-family: "Roboto", sans-serif;
				font-size: 15px;
				font-weight: bold;
				width: 220px;
				height: 36px;
				background-image: var(--btn-bg1);
				border-bottom: 2px solid transparent;
				border-image: var(--frame1);
				border-image-slice: 1;
				border-radius: 6px!important;
				color: #000!important;
				text-transform: uppercase;
				text-decoration: none;
			}
		
				.btn-save-workstation-area:hover {
					background-image: var(--btn-bg2);
					border-bottom: 2px solid transparent;
					border-image: var(--frame2);
					border-image-slice: 1;
					color: #F8F8FF!important;
				}

		.workstation-area-times {margin-right: 1.3em!important;background-color:blue;}

			.vkopv {width: 75px;float: left;font-size: 0.8125em!important;}

				.target-colon {
					/*margin-top: 4px;
					float: right;*/
					/*vertical-align: top!important;*/
					padding: 0px 2px;
					font-family: "Roboto", sans-serif;
					font-size: 0.8125em;
					font-weight: bold;
				}
				
				.target-hyphen {
					font-family: "Roboto", sans-serif;
					font-size: 1.4em;
					font-weight: 700;
					padding: 5px;
					color: #F8F8FF;
				}

			.switch {
				position: relative;
				display: inline-block;
				width: 52px;
				height: 24px;
				z-index: 3;
			}

			.theme-switch {
				position: relative;
				display: inline-block;
				width: 52px;
				height: 24px;
				z-index: 3;
			}

			.switch input { 
				opacity: 0;
				width: 0;
				height: 0;
			}

			.slider {
				position: absolute;
				cursor: pointer;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #B22222;
				-webkit-transition: .4s;
				transition: .4s;
				border-radius: 34px;
				z-index: 3;
			}

				.slider:before {
					position: absolute;
					content: "";
					height: 17px;
					width: 17px;
					left: 4px;
					bottom: 4px;
					background-color: #fff;
					-webkit-transition: .4s;
					transition: .4s;
					border-radius: 50%;
					z-index: 3;
				}

			input:checked + .slider {
				background-color: #ADFF2F;
				z-index: 3;
			}

			input:focus + .slider {
				box-shadow: 0 0 1px #ADFF2F;
			}

			input:checked + .slider:before {
				-webkit-transform: translateX(26px);
				-ms-transform: translateX(26px);
				transform: translateX(26px);
			}

		.warea-frame {
			margin-left: 2px;
			/*margin-top: 10px;*/
			padding: 4px 2px;
			/*max-width: 2290px;*/
		}

		#warea-information {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 484px;
			/*width:484px;*/
			background: rgba(0,0,0,0.4);
			border-radius: 1em;
			margin-bottom: -1.8em;
			row-gap: 4px;
		}

		#warea-bottom-navigation {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 980px;
			/*background: rgba(0,0,0,0.4);
			border-radius: 1em;*/
			margin-top: -0.7em;
			
		}

			.warea-hidden {display:inline-block;}

			.warea-save-workstation {
				display: flex;
				width: 484px;
				height: 80px;
				background: rgba(0,0,0,0.4);
				border-radius: 1em;
				justify-content: center;
				align-items: center;
				padding-top: 6px;
			}

			.warea-nav-contents {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				column-gap: 8px;
			}
			
			.warea-card-nav {
				display: flex;
				flex-direction: column;
				row-gap: 8px;
				column-gap: 8px;
			}

		.workstation-area-block100 {display: flex;flex-direction:row;width:100%;}
		.warea-blockLeft {display: flex;flex-direction:row;width:50%;/*background-color: green;*/}
		.warea-blockRight {display: flex;flex-direction:row;width:50%;/*background-color: red;*/}
		.warea-blockCenter {display: flex;flex-direction:column;width:10%;margin-top:22px;font-size:25px;line-height: 1.6;}
		.warea-blockLeft80 {display: flex;flex-direction:row;width:80%;}
		.warea-blockLeft75 {display: flex;flex-direction:row;width:75%;}
		.warea-blockLeft66 {display: flex;flex-direction:row;width:66%;}
		.warea-blockRight33 {display: flex;flex-direction:row;width:33%;}
		.warea-blockRight25 {display: flex;flex-direction:row;width:25%;}
		.warea-blockRight20 {display: flex;flex-direction:row;width:20%;}
		.warea-fixed100 {display: flex;flex-direction:row;width:100%;text-indent: 2px;}
		.warea-scalable100 {display: flex;flex-direction:row;width:100%;text-indent: 4px;}
		.warea-fixedLeft {display: flex;flex-direction:row;width:50%;}
		.warea-fixedRight {display: flex;flex-direction:row;width:50%;}
		.warea-scalableLeft {display: flex;flex-direction:row;width:50%;}
		.warea-scalableRight {display: flex;flex-direction:row;width:50%;}
		.warea-adaptableLeft {display: flex;flex-direction:row;width:50%;}
		.warea-adaptableRight {display: flex;flex-direction:row;width:50%;}
		.warea-recedeLeft {display: flex;flex-direction:row;width:50%;}
		.warea-recedeRight {display: flex;flex-direction:row;width:50%;}
		.warea-recede40 {width:40%;}
		.warea-expand60 {width:60%;}
		
		.workstation-area-block100 textarea {margin-left: 4px;}
		.workstation-area-block100 input[type="text"] {margin-left: 2px;}

	@media (max-width: 1020px) {
		.warea-frame {
			background: rgba(0, 0, 0);
			max-width: 480px;
			border: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
		}
		
		.warea-frame-left,
		.warea-frame-right {
			border: none!important;
		}
		
		#workstation-area-basic {flex-direction: column;}
		#warea-information {max-width:480px;background: rgba(0,0,0,0.4);}
		
		#warea-bottom-navigation {margin-top:0;max-width:480px;}
		.warea-hidden {display: none!important;}
		.warea-save-workstation {max-width:475px;height:30px;padding-top:20px;}
	}
	
	@media screen and (max-width: 520px) {
		.workstation-area-block100 {flex-direction:column;}
		
		.warea-blockLeft,
		.warea-blockRight {flex-direction:column;width:100%;}
		
		.warea-fixedLeft,
		.warea-fixedRight {flex-direction:column;}
		
		.warea-scalableLeft {width:78%;}
		.warea-scalableRight {width:22%;}
		.warea-adaptableLeft {width:62%;}
		.warea-adaptableRight {width:38%;}
		
		.warea-blockLeft80,
		.warea-blockLeft75,
		.warea-blockLeft66,
		.warea-blockRight33,
		.warea-blockRight25,
		.warea-blockRight20 {flex-direction:column;}
		
		#warea-bottom-navigation,
		#warea-information,
		.warea-frame-left,
		.warea-frame-right,
		.warea-frame {max-width:360px;}
	
		.warea-scalable100 {width: 80%;text-align:left;}
		.warea-fixedLeft > .col60 {width: 100%;}
		.warea-expand60 {width: 100%;}
		.warea-recede40,
		.warea-recedeLeft,
		.warea-recedeRight,
		.warea-row-end-text,
		.scheduling-row-wide {display: none!important;}
		
		/*.warea-row1 input[type="number"],
		.warea-row2 input[type="number"] {
			width: 36px;
		}*/
	
		.week-day {}
		.invisible-day {}
		
		.til6 {text-indent:2px!important;}
		
		.warea-blockRight input[type="text"]:not(:placeholder-shown)::placeholder {
			visibility: visible;
		}
	
	}
	
	@media screen and (min-width: 521px) {
		.warea-invisible-day,
		.warea-blockCenter,
		.scheduling-row-narrow {display: none!important;}
		
		.warea-blockRight input[type="text"]::placeholder {visibility: hidden;}
		.warea-scalableRight input[type="number"]::placeholder {visibility: hidden;}
		.warea-adaptableRight input[type="number"]::placeholder {visibility: hidden;}
		
	}



/* CUSTOMERS */

.customers-navigation {
	display: flex;
	flex-direction: column;
	column-gap: 4px;
	row-gap: 8px;
	top: 0;
	padding: 2px 0px;
}

	.customers-nav-col {
		display: flex;
		flex-direction: row;
		column-gap: 6px;
		justify-items: center;
		align-items: center;
		padding: 4px 8px;
		/*background: #eeff00;*/
	}

	.customer-af-nav {
		display: flex;
		flex-direction: row;
		column-gap: 5px;
		row-gap: 2px;
		width: 620px;
		min-height: 60px;
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		padding: 4px;
	}
	
	.customer-tm-nav {
		display: flex;
		flex-direction: row;
		column-gap: 6px;
		row-gap: 4px;
		width: 620px;
		min-height: 60px;
		border: 2px solid transparent;
		border-image: var(--frame2);
		border-image-slice: 1;
		border-radius: 4px;
		padding: 4px;
	}

		.af-seek {
			align-self: stretch;
			width: 60px;
			min-height: 60px;
			/*background: yellow;*/
		}

		.af-nav {
			align-items: left;
			/*width: 600px;*/
			min-height: 50px;
			/*background: green;*/
		}

			.af-btns {
				display: flex;
				column-gap: 4px;
				/*justify-content: space-evenly;*/
				flex-direction: row;
			}

		.btn-seek-af {
			cursor: pointer;
			width: 60px;
			height: 60px;
			background: url('img/af-off.png') transparent no-repeat;
			background-size: 56px 56px;
			background-position: center;
			border: 2px solid transparent;
			transform: scale(0.8);
			/*border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 15px;*/
		}
		
			.btn-seek-af:hover {
				background: url('img/af-on.png') transparent no-repeat;
				background-size: 56px 56px;
				background-position: center;
				transform: scale(0.9);
				transition: 0.7s;
			}

	.margintop-2 {margin-top:-2px;}

	@media screen and (max-width: 620px) {
		.customer-af-nav {flex-direction: column;min-height: 200px;width:340px;row-gap:4px;}
		.customer-tm-nav {flex-direction: column;}
		.af-btns {flex-direction: column;}
	}

/* MARKETING */
.marketingContent {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	padding: 0.2em;
}
	
	.marketingCustomerSelection,
	.marketingListName {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		width: auto;
		max-width: 1440px;
		min-width: 380px;
		padding: 0.5em;
		color: #DAA520;
		/*background: green;*/
	}
	.marketingCustomerSelection {justify-content: space-between;}
	.marketingListName input[type=text] {height: 1.6em;border: 1px solid #aaa;border-radius: 0.3em;}
	.marketingCustomerSelection div:nth-child(odd) {display: flex;align-items: center;height: 1.6em;}
	.marketingCustomerSelection > div:nth-child(even) {display: flex;justify-content: center;align-items: center;width: 2em;height: 1.6em;}
	.marketingCustomerSelection div:last-child {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;height: auto;}
	.marketingCustomerSelection div:last-child p,
	.marketingCustomerSelection div:last-child span,
	.marketingCustomerSelection div:last-child input {padding: 0 0.3em;}
	/*.marketingCustomerSelection div:nth-child(5) {display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;}
	.marketingCustomerSelection div:nth-child(5) div p,
	.marketingCustomerSelection div:nth-child(5) div span,
	.marketingCustomerSelection div:nth-child(5) div input {
		padding: 0 0.3em;
	}*/
	.marketingCustomerSelection p,
	.marketingListName p {color: #F8F8FF;margin: 0;padding: 0;}
	.marketingCustomerSelection p::first-letter,
	.marketingListName p::first-letter {text-transform: uppercase;}
	.marketingCustomerSelection input[type=text] {width: 5.8em;height: 1.4em;border: 1px solid #aaa;border-radius: 0.3em;}
	
	.customerSelectionFrame, 
	.croppingsSelectedFrame,
	.marketingTopicFrame {
		display: flex;
		justify-content: flex-start;
		top: 0;
		width: auto;
		max-width: 1440px;
		background: rgba(0, 0, 0, 0.5);
		border: 2px solid black;
		border-radius: .4em;
	}
	.customerSelectionFrame, 
	.croppingsSelectedFrame {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: stretch;
	}
	.croppingsSelectedFrame h2 {color: #FFF8DC;font-size: 1em;padding: 0.4em;}
	.croppingsSelectedFrame > div:nth-child(odd) {background: rgba(0, 0, 0, 0.15);}
	.croppingsSelectedFrame > div:nth-child(even) {background: rgba(0, 0, 0, 0.30);}
	.marketing-frame,
	.marketingListFrames {
		display: flex;
		flex-direction: column;
		top: 0;
		width: auto;
		max-width: 1440px;
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		align-items: stretch; /* Lisätty align-items */
		justify-content: flex-start; /* Lisätty justify-content */
	}
	.marketing-frame {background: var(--row0-bg-color);}
	.marketingListFrames {background: transparent;}
	.marketing-frame > div:nth-child(odd) {
		background: #303030;
		border-bottom: 2px solid transparent;
		border-image: var(--gradient-line3);
		border-image-slice: 1;
	}
	.marketing-frame > div:nth-child(even) {
		background: #404040;
		border-bottom: 2px solid transparent;
		border-image: var(--gradient-line3);
		border-image-slice: 1;
	}
	.marketing-frame > div:last-child {border: none;}
	
	.marketingFrameContent {
		display: flex;
		flex-direction: row;
		margin: 0;
		padding: 0;
		column-gap: 1em;
	}
	
	.marketingFrameLeft,
	.marketingFrameRight {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		min-height: 200px;
		width: 50%;
		background: rgba(0, 0, 0, 0.5);
	}
	.marketingFrameLeft {
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
	}
	.marketingFrameRight {
		border: 2px solid transparent;
		border-image: var(--frame2);
		border-image-slice: 1;
		border-radius: 4px;
	}
	
	.marketingFrameLeft p,
	.marketingFrameRight p {margin: 0;padding: 0;}
	.marketingFrameLeft h3,
	.marketingFrameRight h3 {color: #FFEBCD;font-size: 1.2em;text-transform: uppercase;padding: 0.4em;}
	.marketingFrameTopic {display: flex; align-items: center;width: 100%;height: 36px;background: var(--row0-bg-color);}
	.marketingFrameRow {display: flex; flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;padding: 1em 0.4em;}
	.smsVariables,
	.smsExamples {display: flex; flex-direction: column;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;padding: 1em 0.4em;}
	.marketingSmsRow {display: flex; flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;padding: 1em 0.4em;width: 100%;}
	.marketingListName > div,
	.marketingFrameRow > div,
	.marketingSmsRow > div {padding: .2em 0;}
	.marketingFrameRow div:first-child {width: 150px;}
	.marketingListName div:first-child,
	.marketingSmsRow div:first-child {width: 180px;}
	.marketingFrameRow div:last-child {/*background: orange;*/}
	.marketingFrameRow p:first-letter,
	.marketingSmsRow p:first-letter {text-transform: uppercase;}
	.smsVariables p span:nth-of-type(1) {color:#FF8C00;}
	.smsVariables p span:nth-of-type(2) {padding:0 0.4em;}
	.smsVariables p span:nth-of-type(3) {font-weight: 600;color:#FFF8DC;}
	.smsExamples p span {color:#FF8C00;}
	.marketingFrameRow input,
	.marketingFrameRow textarea {width: 325px;border: 1px solid #aaa;border-radius: 0.3em;}
	.marketingListName input,
	.marketingSmsRow input,
	.marketingSmsRow textarea {width: 295px;border: 1px solid #aaa;border-radius: 0.3em;}
	.marketingFrameRow input[type=text],
	.marketingSmsRow input[type=text] {height: 1.8em;}
	.marketingFrameRow textarea,
	.marketingSmsRow textarea {min-height: 12em;resize: vertical;}
	.smsVariables h4,
	.smsExamples h4 {color: #F8F8FF;font-size: 0.925em;margin: 0;padding: 0.3em 0;}
	.croppingBlockEmail,
	.croppingBlockSms {padding: 1em 0.4em;}
	.croppingBlockEmail p,
	.croppingBlockSms p {margin: 0;padding: 0;}
	.croppingBlockEmail p:first-letter,
	.croppingBlockSms p:first-letter {text-transform: uppercase;}
	.croppingBlockEmail span,
	.croppingBlockSms span {color: #FF8C00;padding: 0 0.4em;}

	.marketingBlock1,
	.marketingBlock2,
	.marketingBlock3,
	.marketingBlock4,
	.marketingBlock5,
	.marketingBlock6,
	.marketingBlock7 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0.6em;
	}
	.marketingBlock8 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 0.6em;
	}
	
	.marketingBlock1 p::first-letter,
	.marketingBlock2 p::first-letter,
	.marketingBlock3 p::first-letter,
	.marketingBlock4 p::first-letter,
	.marketingBlock5 p::first-letter,
	.marketingBlock6 p::first-letter,
	.marketingBlock7 p::first-letter,
	.marketingBlock8 p::first-letter {text-transform: uppercase;}

	.marketingBlock1 input[type=text],
	.marketingBlock1 select,
	.marketingBlock4 select,
	.marketingBlock5 select,
	.marketingBlock6 select,
	.marketingBlock7 select {
		border: 1px solid #aaa;
		border-radius: 0.3em;
		box-sizing: border-box; /* Tämä varmistaa, että leveys ja korkeus sisältävät reunukset ja täytön */
	}
	.marketingBlock1 input[type=text] {width: 4em;height: 1.75em;padding-top: 2px;}
	.marketingBlock1 select {width: 3.2em;}
	.marketingBlock4 select {width: 3.6em;height: 1.65em;}
	.marketingBlock5 select,
	.marketingBlock6 select,
	.marketingBlock7 select {width: 13.4em;height: 1.65em;}
	#dot {width: 5.4em;}
	
	.marketingBlock1 .marketingBlockElements {width: auto;justify-content: flex-start;column-gap: 0.4em;}
	.marketingBlock2 .marketingBlockElements,
	.marketingBlock3 .marketingBlockElements {justify-content: space-between;width: 85%;}
	.marketingBlock4 .marketingBlockElements,
	.marketingBlock5 .marketingBlockElements,
	.marketingBlock6 .marketingBlockElements {justify-content: space-between;width: 40%;}
	.marketingBlock8 .marketingBlockElements {display: flex;flex-direction: column;align-items: flex-start;gap: 0.4em;}
	.marketingBlock2 .marketingBlockElements div:first-child,
	.marketingBlock3 .marketingBlockElements div:first-child {width: 50%;}
	.marketingBlock4 .marketingBlockElements div:first-child,
	.marketingBlock5 .marketingBlockElements div:first-child,
	.marketingBlock6 .marketingBlockElements div:first-child,
	.marketingBlock7 .marketingBlockElements div:first-child {min-width: 320px;width: 320px;}
	.marketingBlock2 .marketingBlockElements div:last-child,
	.marketingBlock3 .marketingBlockElements div:last-child {width: 50%;}
	.marketingBlock4 .marketingBlockElements div:last-child,
	.marketingBlock5 .marketingBlockElements div:last-child,
	.marketingBlock6 .marketingBlockElements div:last-child {width: auto;}
	.marketingBlock1 .marketingBlockElements > div {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;flex-wrap: wrap;gap: 0.4em;}
	.marketingBlock2 .marketingBlockElements > div,
	.marketingBlock3 .marketingBlockElements > div {display: flex;flex-direction: row;justify-content: space-between;}
	.marketingBlock4 .marketingBlockElements > div,
	.marketingBlock5 .marketingBlockElements > div,
	.marketingBlock6 .marketingBlockElements > div,
	.marketingBlock7 .marketingBlockElements > div {display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
	.marketingBlock8 .marketingBlockElements > div {display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;max-width:100%;column-gap: 0.5em;}
	.marketingBlock8 .marketingBlockElements > div > div {display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
	.croppingBlock8 > div:nth-child(odd) {display: flex;flex-direction: row;flex-wrap: wrap;}
	.croppingBlock8 > div:nth-child(even) {display: flex;flex-direction: column;row-gap: 0.6em;}
	.croppingBlock8 > div:nth-child(even) p {margin: 0;}
	/*.marketingBlock2 .marketingBlockElements > div,
	.marketingBlock3 .marketingBlockElements > div {background: orange;border: 2px solid green;display: flex;flex-direction: row;justify-content: space-between;}*/
	
		.marketingBlockElements,
		.marketingBlockElements2 {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			column-gap: 1em;
			/*background: blue;
			border: 1px solid green;*/
		}
		.marketingBlockElements2 {flex-wrap: wrap;justify-content: flex-start;}
		.marketingBlock4 .marketingBlockElements, 
		.marketingBlock5 .marketingBlockElements, 
		.marketingBlock6 .marketingBlockElements {column-gap: 1em;row-gap: 0.5em;}
		
		/*.marketingBlockElements,
		.marketingBlockElements2 > div {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			gap: 1em;
		}*/
		.marketingBlockElements h3 {
			font-size: 1.4em;
			color: #FFF8DC;
			text-transform: uppercase;
			margin: 0;
			padding: 0;
		}
		.marketingBlockElements p,
		.marketingBlockElements2 p {
			margin: 0;
			padding: 0.3em 0;
		}
		
		.marketingBlock4 .marketingBlockElements p,
		.marketingBlock5 .marketingBlockElements p,
		.marketingBlock6 .marketingBlockElements p,
		.marketingBlock7 .marketingBlockElements p {
			margin: 0;
			padding: 0;
		}
		.croppingBlock1 p,
		.croppingBlock2 p,
		.croppingBlock3 p,
		.croppingBlock4 p,
		.croppingBlock5 p,
		.croppingBlock6 p,
		.croppingBlock7 p,
		.croppingBlock8 p {padding: 0 0.4em;color: #F0FFFF;}
		.croppingBlock1 p:first-letter,
		.croppingBlock2 p:first-letter,
		.croppingBlock3 p:first-letter,
		.croppingBlock4 p:first-letter,
		.croppingBlock5 p:first-letter,
		.croppingBlock6 p:first-letter,
		.croppingBlock7 p:first-letter {text-transform: uppercase;}
		.croppingBlock1 span {font-size: 0.95em;color: #aaa;margin-left: 0.3em;}
		.croppingBlock1 span:nth-child(even) {margin-left: 0.5em;}

		.marketingBottom {display: flex;justify-content: center; align-items: center;}

@media (max-width: 1400px) {
	/*.marketingBlockElements2 {
		flex-direction: column;
		gap: 0;
	}*/
	.marketingBlock1 .marketingBlockElements > div:nth-child(2),
	.marketingBlock1 .marketingBlockElements > div:nth-child(3) {max-width: 60px;}
	.marketingBlock1 .marketingBlockElements2 {max-width: 45%;}
}

@media (min-width: 1041px) {
	.marketingListFrames {border: none;}
}

@media (max-width: 1150px) {
	.marketingCustomerSelection {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		row-gap: 0.3em;
		/*padding: 0;
		padding-bottom: 16px;*/
	}
	.marketingCustomerSelection div:last-child p {
		margin: 0;
		padding: 0;
		padding-left: 0;
    } 
	.marketingCustomerSelection div:last-child > div > div {padding: 0 0.3em;}
	.marketingCustomerSelection > div:nth-child(even) {display: none;}
}

@media (max-width: 1040px) {
	.marketingBlock1 {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}
	.marketingBlock1 .marketingBlockElements2 {max-width: 100%;}
	
	.marketingFrameContent {flex-direction: column;}
	.marketingFrameLeft,
	.marketingFrameRight {width: 100%;border:none;}
	/*.marketingBlock2 .marketingBlockElements,
	.marketingBlock3 .marketingBlockElements {gap: 0;}*/
	
}

@media (max-width: 800px) {
	.marketingBlock2 .marketingBlockElements > div p,
	.marketingBlock3 .marketingBlockElements > div p {padding: 0.3em 0;margin: 0;}
	.marketingBlock2 .marketingBlockElements,
	.marketingBlock3 .marketingBlockElements {gap: 0;flex-direction: column;align-items: flex-start;}
	.marketingBlock2 .marketingBlockElements div:first-child,
	.marketingBlock3 .marketingBlockElements div:first-child {width: 72%;}
	.marketingBlock2 .marketingBlockElements div:last-child,
	.marketingBlock3 .marketingBlockElements div:last-child {width: 72%;}
}

@media (max-width: 600px) {
	.marketingCustomerSelection > div > div:last-child {flex-direction: column;align-items: flex-start;}
	/*.marketingCustomerSelection > div > div > div span {padding: 0 0.6em;}*/
	.marketingCustomerSelection div:last-child p {padding: 0.2em 0;margin: 0;}
	/*.marketingCustomerSelection div:last-child span,
	.marketingCustomerSelection div:last-child input {padding: 0.2em 0;margin: 0;}*/
	.marketingCustomerSelection div:last-child > div > div {padding: 0em;}

	.marketingBlock2,
	.marketingBlock3 {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
	.marketingBlock2 .marketingBlockElements > div,
	.marketingBlock3 .marketingBlockElements > div {flex-direction: column;}
	.marketingBlock2 .marketingBlockElements,
	.marketingBlock3 .marketingBlockElements {width: 100%;}
	.marketingBlock4 .marketingBlockElements,
	.marketingBlock5 .marketingBlockElements,
	.marketingBlock6 .marketingBlockElements {flex-direction: column;width: 100%;align-items: flex-start;}
	
	.marketingBlockEmpty {display: none;}
}

@media (max-width: 520px) {
	.marketingListName input,
	.marketingSmsRow input,
	.marketingSmsRow textarea {
		width: 325px;
	}
}

@media (max-width: 460px) {
	.marketingBlock1 {gap: 0.5em;}
	.marketingBlock1 .marketingBlockElements > div,
	.marketingBlock1 .marketingBlockElements2 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0.4em;
	}
	.marketingBlockElements2 {gap: 0.5em;}
	.marketingBlockElements2 .marketingBlockElementsInner p {
		margin: 0;
		padding: 0;
	}
}

/* MANAGEMENT */

.management-navigation {
	display: flex;
	flex-direction: column;
	top: 0;
	padding: 6px 0px;
}

	.bubble {
		display: none;
		position: absolute;
		top: -115px;
		left: 460px;
	}

	.info-marker:hover + .bubble {
		display: block;
		z-index: 99;
	}

		#talkbubble {
			width: 250px;
			background: rgba(0, 0, 0, 0.3);
			position: relative;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
		}
		
		#talkbubble:before {
			content: "";
			position: absolute;
			right: 70%;
			top: 100%;
			width: 0;
			height: 0;
			border-top: 0px solid transparent;
			border-left: 25px solid rgba(0, 0, 0, 0.3);
			border-bottom: 32px solid transparent;
		}

		p.bubble-text {
			font-size: 13px!important;
			font-weight: normal;
			font-style: italic;
			margin-top: 0;
			padding: 8px!important;
			line-height: 1.4;
		}
		
		p.bubble-text:first-letter {text-transform: capitalize;}

	.manage-users {
		display: flex;
		flex-direction: row;
		column-gap: 6px;
		padding: 4px 0px;
		/*background-color: green;*/
		/*width: 210px;*/
		
		justify-content: flex-start;
	}
	
		.manage-users input[type=text] {width: 160px!important;font-size:15px;}
	
	.manage-groups {
		margin-left: 8px;
		display: flex;
		padding: 6px 0px;
		width: 210px;
		justify-content: space-between;
	}

	.manage-nav {
		display: flex;
		flex-direction: row;
		column-gap: 2px;
	}

	.manage-btn {display: flex; align-self: flex-end;}

@media screen and (max-width: 740px) {
	.manage-nav {flex-direction: column;}
	.manage-users input[type=text] {width: 152px!important;}
}

@media screen and (max-width: 700px) {
	.bubble {
		left: auto;
		right: 1%;
		top: -95px;
	}
	#talkbubble {background: rgba(0, 0, 0, 0.9);}
	#talkbubble:before {display: none;}
}

#management {
	/*display: flex;
	flex-direction: row;*/
	column-gap: 24px;
	top: 0;
	padding: 4px 0px;
}

	.tm-frame1 {
		float: left;
		display: flex;
		top: 0;
		padding: 2px;
		width: auto!important;
		background: var(--row0-bg-color);
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 4px;
		align-items: stretch; /* Lisätty align-items */
		justify-content: flex-start; /* Lisätty justify-content */
	}
	
	.tm-frame2 {
		float: left;
		display: flex;
		top: 0;
		padding: 2px;
		min-width: 203px;
		background: var(--row0-bg-color);
		border: 2px solid transparent;
		border-image: var(--frame2);
		border-image-slice: 1;
		border-radius: 4px;
	}

		.tm-row0 {
			display: flex;
			flex-direction: row;
			font-size: 0.9125em;
			height: 42px;
			font-weight: bold;
			color: var(--subtitle);
			background-color: var(--row0-bg-color);
			text-decoration: none;
			text-transform: uppercase!important;
		}

		.tm-row1 {
			
		}

		.user-management,
		.group-management {
			display: grid;
			grid-template-columns: repeat(9, auto);
			gap: 0px;
			/*border: 2px solid transparent;
			border-image: var(--frame1);
			border-image-slice: 1;
			border-radius: 4px;*/
			width: 100%;
			margin-top: 0;
			align-content: start;
			align-items: stretch;
		}
		
		.tm-frame1,
		.user-management {
			margin: 0;
			padding: 0;
		}
		
			.management-title {
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				border: var(--table-solid);
				padding: 4px;
				align-items: center; /* Uusi sääntö pystysuuntaisen keskittämisen saavuttamiseksi */
				text-align: center;
				font-size: 0.9125em;
				height: 28px;
				font-weight: bold;
				color: var(--subtitle);
				background-color: var(--row0-bg-color);
				text-decoration: none;
				text-transform: uppercase!important;
			}

			.management-id {}

			.management-item1 {
				grid-column: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				align-items: center; /* Uusi sääntö pystysuuntaisen keskittämisen saavuttamiseksi */
				text-align: center;
			}
			
			.management-item2 {
				grid-column: 2;
				display: flex;
				align-items: center;
				justify-content: center;
				align-items: center;
				text-align: left!important;
			}
			
			.management-item3 {
				grid-column: 3;
				display: flex;
				align-items: center;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
			
			.management-item4 {
				grid-column: 4;
				display: flex;
				align-items: center;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
			
			.management-item5 {
				grid-column: 5;
				display: flex;
				align-items: center;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
			
			.management-item6 {
				grid-column: 6;
				display: flex;
				align-items: center;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
			
			.management-item7 {
				grid-column: 7;
				display: flex;
				align-items: center;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
			
			.management-item8 {
				grid-column: 8;
				display: flex;
				align-items: center;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
			
			.management-item9 {
				grid-column-end: -1;
				display: flex;
				align-items: center;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
			
				.management-item2.text-left {
					justify-content: flex-start;
					text-align: left!important;
				}

			/*.table-management td {
				white-space: pre-line;
				overflow: hidden;
				font-size: 0.9125em;
				text-overflow: ellipsis;
				text-align: center;
				border: var(--table-solid);
				padding: 4px;
			}*/

			.management-row1 {box-sizing: border-box;border: var(--table-solid);color:var(--text);background: var(--row1-bg-color);padding: 4px;}
			
			.management-row2 {box-sizing: border-box;border: var(--table-solid);color:var(--text);background: var(--row2-bg-color);padding: 4px;}

			#management a {font-family: "Roboto", sans-serif;font-size:14px;color:var(--a-link);font-weight:normal!important;text-decoration:none;}
			#management a:hover {background:rgba(0,0,0,0.2);color:var(--a-hover);transition: all 400ms;}

@media screen and (max-width: 800px) {
	.management-item7 {display: none;}
	.management-item8 {display: none;}
	.management-item9 {grid-column: 7;}
}

@media screen and (max-width: 660px) {
	.management-item5 {display: none;}
	.management-item6 {display: none;}
	.management-item9 {grid-column: 5;}
}

@media screen and (max-width: 365px) {
	.management-item3 {display: none;}
	.management-item4 {display: none;}
	.management-item9 {grid-column: 3;}
}

				/*.text-left {
					text-align: left!important;
					align-self: flex-start!important;
					justify-self: flex-start!important;
				}*/

				.title-management {
					font-size: 0.9125em;
					height: 28px;
					font-weight: bold;
					color: var(--subtitle);
					background-color: var(--row0-bg-color);
					text-decoration: none;
					text-transform: uppercase!important;
				}

				.btn-transparent {
					cursor: pointer;
					font-family: "Roboto", sans-serif;
					font-size: 0.925em;
					color: var(--a-link);
					border: none;
					background: transparent;
					text-transform: uppercase;
					text-decoration: none;
				}

					.btn-transparent:hover {background: var(--link-box);color: var(--a-hover);transition: all 400ms;}

				.sel140 {width: 120px!important;}

	#user-management {
		position: fixed;
		max-width: 640px;
		height: auto;
		top: 24%;
		left: 3%;
		background-color:rgba(0, 0, 0, 0.85);
		border: 2px solid transparent;
		border-image: var(--frame1);
		/*border-image: linear-gradient(0.20turn, rgba(0,255,127), rgba(124,252,0));*/
		border-image-slice: 1;
		border-radius: 0.75em;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 4;
	}
	
		#user-management input, select {font-size:1.05em!important;}

	#group-management {
		position: fixed;
		max-width: 640px;
		height: auto;
		top: 24%;
		left: 3%;
		background-color:rgba(0, 0, 0, 0.85);
		border: 2px solid transparent;
		border-image: var(--frame2);
		/*border-image: linear-gradient(0.20turn, rgba(0,255,127), rgba(124,252,0));*/
		border-image-slice: 1;
		border-radius: 0.75em;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 4;
	}
	
		#group-management input, select {font-size:1.05em!important;}

@media screen and (max-width: 700px) {
	#user-management,
	#group-management {max-height: 70%;}
}

@media screen and (max-height: 1000px) {
	#user-management,
	#group-management {max-height: 70%;}
}

		.management-overlay {
			position: fixed;
			top: 5%;
			right: 5%!important;
			background: rgba(0, 0, 0, 0.8);
			transition: opacity 500ms;
			visibility: hidden;
			opacity: 0;
		}
	
		.management-overlay:target {visibility: visible;opacity: 1;}
	
		#user-managementTop {
			position: static;
			cursor: move;
			width: 100%;
			height: 28px;
			text-align: center;
			background-color: #000;
			border-bottom: 2px solid transparent;
			border-image: var(--gradient-line1);
			/*border-image: linear-gradient(0.20turn, rgba(0,65,35), rgba(127,255,0), rgba(0,65,35));*/
			border-image-slice: 1;
		}

		#user-managementBottom {
			display: flex;
			align-items: center;
			justify-content: center;
			position: static;
			cursor: move;
			width: 100%;
			height: 42px;
			text-align: center;
			background-color: #000;
			border-top: 2px solid transparent;
			border-image: var(--gradient-line1);
			/*border-image: linear-gradient(0.20turn, rgba(0,65,35), rgba(127,255,0), rgba(0,65,35));*/
			border-image-slice: 1;
		}

			#user-managementTop .management-close {
				position: absolute;
				top: -.2em;
				right: .2em;
				transition: all 200ms;
				font-size: 34px;
				font-weight: bold;
				text-decoration: none!important;
				color: #F8F8FF!important;
			}

		#user-managementTop .management-close:hover {color: #B22222!important;}
		
		#group-managementTop {
			position: static;
			cursor: move;
			width: 100%;
			height: 28px;
			text-align: center;
			background-color: #000;
			border-bottom: 2px solid transparent;
			border-image: var(--gradient-line2);
			/*border-image: linear-gradient(0.20turn, rgba(0,65,35), rgba(127,255,0), rgba(0,65,35));*/
			border-image-slice: 1;
		}

		#group-managementBottom {
			display: flex;
			align-items: center;
			justify-content: center;
			column-gap: 8px;
			position: static;
			cursor: move;
			width: 100%;
			height: 42px;
			text-align: center;
			background-color: #000;
			border-top: 2px solid transparent;
			border-image: var(--gradient-line2);
			/*border-image: linear-gradient(0.20turn, rgba(0,65,35), rgba(127,255,0), rgba(0,65,35));*/
			border-image-slice: 1;
		}

			#group-managementTop .management-close {
				position: absolute;
				top: -.2em;
				right: .2em;
				transition: all 200ms;
				font-size: 34px;
				font-weight: bold;
				text-decoration: none!important;
				color: #F8F8FF!important;
			}

		#group-managementTop .management-close:hover {color: #B22222!important;}
	
		#user-managementTop p {
			margin-top: 0;
			padding: 4px;
			font-family: "Roboto", sans-serif;
			font-size: 13px;
			font-weight: 700;
			color: var(--subtitle);
			/*color: #ACE2AC!important;*/
			text-transform: uppercase;
		}
		
		#group-managementTop p {
			margin-top: 0;
			padding: 4px;
			font-family: "Roboto", sans-serif;
			font-size: 13px;
			font-weight: 700;
			color: var(--subtitle);
			/*color: #ACE2AC!important;*/
			text-transform: uppercase;
		}
	
		.user-basic-information {
			padding: 6px 4px;
			font-family: "Roboto", sans-serif;
			font-size: 13px;
			font-weight: bold;
			color: #F8F8FF!important;
			line-height: 1.6;
	}
	
	.management-data-fields {
		display:flex;
		flex-direction:column;
		align-items: center;
		justify-content: space-evenly;
		padding: 6px 4px;
	}
	
		.managementcard-blockLeft input[type=text] {width:85%;}
		.managementcard-blockRight input[type=text] {width:90%;}
		.managementcard-blockLeft select {width:93%;}
		.managementcard-blockRight select {width:93%;}
		.management-buttons {display:flex;align-self:space-between;font-size:14px!important;}
	
		.managementcard-title-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			min-height: 42px;
			font-family: "Roboto", sans-serif;
			font-size: 1em;
			font-weight: 700;
			color: var(--subtitle);
			text-transform: uppercase;
		}
		
		.managementcard-user-row {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			column-gap: 5px;
			width: 100%;
			min-height: 32px;
			font-family: "Roboto", sans-serif;
			font-size: 0.825em;
			color: var(--text);
			text-transform: uppercase;
		}
		
		.managementcard-single-row {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			column-gap: 5px;
			width: 100%;
			min-height: 32px;
			font-family: "Roboto", sans-serif;
			font-size: 0.825em;
			color: var(--text);
			text-transform: uppercase;
		}
	
		.managementcard-activation-row {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			column-gap: 5px;
			width: 100%;
			min-height: 32px;
			font-family: "Roboto", sans-serif;
			font-size: 0.825em;
			color: var(--text);
			text-transform: uppercase;
		}
	
			.managementcard-activation-row input[type=text] {width:65%;}
			.managementcard-activation-row textarea {min-height:40px;width:54%;margin-left:5px;}
			/*.managementcard-activation-row input:focus {}*/
	
			.management-card-contents-l {
				display: flex;
				align-items: center;
				/*background: red;*/
			}

			.management-card-contents-r {
				display: flex;
				align-items: center;
			}
			.management-data-fields input:focus {outline: none!important;box-shadow: none!important;}
			.management-note {text-indent: -0.02em;padding:2px!important;white-space: pre-line;font-size:0.825em;font-weight:normal;color: #F0FFFF;text-transform:none;}
			.management-note:first-letter {text-transform: capitalize;}
	
	/*@media screen and (max-width: 700px) {
		#user-management {width: 300px;max-height: 70%;}
	}

	@media screen and (max-height: 1000px) {
		#user-management {max-height: 70%;}
	}*/

	@media screen and (max-width: 1200px) {
		#management {flex-direction: column;}
		.group-management {margin-left: 0px!important;}
		.manage-groups {margin-left: 0px!important;}
	}


	/* MANAGEMENT CARD */
	.managementcard-user-block100 {display: flex;flex-direction:row;width:100%;text-indent: 4px;row-gap: 4px;}
	.managementcard-block100 {display: flex;flex-direction:row;width:100%;text-indent: 4px;row-gap: 4px;}
	.managementcard-blockLeft {display: flex;flex-direction:row;width:50%;}
	.managementcard-blockRight {display: flex;flex-direction:row;width:50%;}
	.managementcard-block33 {display: flex;flex-direction:row;width:33%;}
	.managementcard-block30 {display: flex;flex-direction:row;width:30%;}
	.managementcard-block25 {display: flex;flex-direction:row;width:25%;}
	.managementcard-block20 {display: flex;flex-direction:row;width:20%;}
	
	@media (max-width: 550px) {
		#user-management {min-width: 320px;}
		#user-management input[type=text] {width:200px;}
		
		.management-card-contents-r.col80 input[type=text] {width:146px!important;}
		.managementcard-block30 {width:100%;}
		.managementcard-block20 {width:100%;}
		
		.management-data-fields {row-gap:6px;}
		
		.managementcard-user-row {
			row-gap: 2px!important;
		}
		
		.managementcard-single-row {min-height: 20px;}
		
		.managementcard-user-block100 {
			flex-direction: column;
			row-gap: 7px;
		}
		
	
		.managementcard-blockLeft {width:100%!important;}
		.managementcard-blockRight {width:100%!important;}
		.management-card-contents-l {width:50%!important;}
	
		.management-card-contents-l.col20 {width:35%!important;}
		.management-card-contents-l.col40 {width:35%!important;}
		.management-card-contents-l.col70 {width:35%!important;}
		.management-card-contents-r.col30 {width:65%!important;}
		.management-card-contents-r.col60 {width:65%!important;}
		.management-card-contents-r.col80 {width:65%!important;}
		
		.managementcard-activation-row textarea {margin-left:0;width:93%;}
	}


/* SETTINGS */

.tm-settings-frame {
		margin-top: 6px;
		margin-left: 6px;
		padding: 2px;
		max-width: 420px;
		border: 2px solid transparent;
		border-image: var(--frame1);
		border-image-slice: 1;
		border-radius: 0.75em;
		background: var(--row0-bg-color);
	}

	.tm-settings-subtitle {
		display: flex;
		width:100%;
		min-height: 42px;
		align-items: center;
		justify-content: flex-start;
		font-family: "Roboto", sans-serif;
		font-size: 1em;
		font-weight: 700;
		color: var(--subtitle);
		text-transform: uppercase;
		background: var(--row0-bg-color);
	}
	
	.tm-settings {
		display: flex;
		align-items: center;
		column-gap: 5px;
		width: 100%;
		min-height: 36px;
		font-family: "Roboto", sans-serif;
		font-size: 0.825em;
		color: var(--primary-color);
		text-transform: uppercase;
	}
	
		.tm-settings-contents {
			display: flex;
			align-items: center;
			justify-content: left;
			padding: 4px;
		}
		
		.tm-settings-contents-r {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-right: 10px;
		}

			.tm-settings-subtopic {color: #FFE4C4!important;}

	.color-preview {
		width: 20px;
		height: 20px;
		border: 1px solid var(--frame2);
		margin-left: 10px;
		display: inline-block;
		background: var(--frame1);
		border: 2px solid;
		border-image: var(--frame2) 1;
		border-image-slice: 1;
	}
	
	/* Settings Content Definitions */
	
	.settings-block100 {display: flex;flex-direction:row;width:100%;text-indent: 2px;}
	.tm-settings-blockLeft {display: flex;flex-direction:row;width:50%;}
	.tm-settings-blockRight {display: flex;flex-direction:row;width:50%;}
	.tm-settings-blockLeft30 {display: flex;flex-direction:row;width:30%;}
	.tm-settings-blockRight70 {display: flex;flex-direction:row;width:70%;}



/* OTHERS */




.logout {height: 32px;width: 32px;opacity: 0.6;}

	.logout:hover {opacity: 1.0;}

.title-extra-large {
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.6;
	text-transform: uppercase!important;
}

.title-xl-zero {
	color: rgba(255, 255, 255, 0.7)!important;
}

.title-xl-readable {
	color: #FF7F50!important;
}

.title-large {
	font-family: "Roboto", sans-serif;
	font-weight: 700!important;
	color: var(--subtitle);
	font-size: 0.925em;
	line-height: 1.0!important;
	text-transform: uppercase;
}

.title-medium {
	font-family: "Roboto", sans-serif;
	font-weight: 500!important;
	color: #fff;
	font-size: 0.8125em;
	line-height: 1.0!important;
}

	.title-medium:first-letter {text-transform: capitalize;}

.title-medium2 {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	color: #fff;
	font-size: 0.8125em;
}

	.title-medium2 input {
		font-size: 1.125em!important;
	}

.title-medium3 {font-size: 0.8125em!important;color:#D2691E!important;font-weight:600;}

.subtitle-medium {font-size: 0.8125em!important;color:var(--subtitle2)!important;font-weight:600;}

.title-medium4 {
	font-family: "Roboto", sans-serif;
	font-weight: 500!important;
	color: #fff;
	font-size: 0.8125em;
	line-height: 1.0!important;
	text-transform: capitalize;
}

.title-m-bottom {
	font-family: "Roboto", sans-serif;
	font-weight: 500!important;
	color: #fff;
	font-size: 0.8125em;
	line-height: 1.0!important;
	vertical-align: bottom!important;
}

.title-small {
	font-family: "Roboto", sans-serif;
	font-weight: 700!important;
	color: #fff;
	font-size: 0.75em;
	line-height: 1.8!important;
	text-transform: uppercase!important;
}

.title-s-zero {color: rgba(255, 255, 255, 0.7)!important;}
.title-s-readable {color: #FF7F50!important;}

.title-small-link {
	white-space: nowrap;
	text-overflow:ellipsis;
	font-family: "Roboto", sans-serif;
	color: #ADFF2F;
	font-size: 0.875em;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.8!important;
}

	.title-small-link:hover {color: #DAA520!important;}



	/*.title-transports:first-letter {text-transform: capitalize!important;}*/

a:link {
	font-family: "Roboto", sans-serif;
	color: #ADFF2F;
	text-decoration: none;
}

a:visited {
	color: #ADFF2F;
}

a:hover {
	color: #DAA520;
	/*color: #EEE8AA;*/
	/*text-decoration: none;*/
}

a.redtitle {
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #DAA520!important;
	}

a.redtitle:hover {color: #B22222!important;}


.label {
	font-size: 1.125em;
	padding: 2px;
}

.logbarOff {
	float: right;
	position: fixed;
	width: 90px;
	right: -0.2em!important;
	top: 50%;
	height: auto!important;
	z-index: 99;
}

	.logbar {
		display: none;
		z-index: 98;
		overflow-y: hidden;
		overflow-x: auto;
	}

	.admin-log {
		display: block!important;
		position: fixed;
		/*width: 25%;*/
		width: 380px;
		height: 60%;
		bottom: 7%;
		right: 10px;
		background: rgba(0,0,0,0.92);
		border-radius: 24px 12px;
	}
	
		.admin-topic {
			text-align: center;
			/*background: #99ff00;*/
			font-family: "Roboto", sans-serif;
			color: #00ff88;
			max-height: 50px;
			/*height: 8%;
			margin-top: -12px;*/
			text-transform: uppercase!important;
		}
		.admin-topic h6 {line-height: 0;}
	
		.admin-text {
			align-content: center;
			text-align: left;
			padding: 4px 8px;
			width: 93%;
			height: 90%;
			overflow-y: auto;
			/*overflow-x: hidden;
			background-color: red;*/
		}

		.admin-text p {
			font-family: "Roboto", sans-serif;
			color: #fff;
			font-size: 0.875em;
			font-weight: 100;
			white-space: normal;
		}

	.log-hide {display: flex;align-items: middle;width: 40px;height: 100%;background: transparent!important;borders: none!important;}
	
		.log-hide img {opacity: 0.2!important;width:40px;}
	
	.logs {
		background: rgba(0, 0, 0, .6);
		width: 100%;
		height: 100%;
		border: 2px solid transparent;
		border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(240,230,140));
		border-image-slice: 1;
		border-radius: 4px;
	}
	
@media screen and (min-width: 1520px) {
	.admin-log {width: 520px!important;}
	.admin-text p {font-size: 1.15em;}
}

@media screen and (max-width: 420px) {
	.admin-log {width: 275px!important;}
	.admin-text p {font-size: 0.75em;}
}
	
.btn-logoff-small {
	cursor: pointer;
	width: 24px;
	height: 24px;
	background: url('img/logoff.png') transparent no-repeat;
	background-size: 22px 22px;
	background-position: center;
	transform: scale(0.95);
	border: none!important;
	transition: all 450ms;
}

	.btn-logoff-small:hover {
		background: url('img/logoff-hover.png') transparent no-repeat;
		background-size: 22px 22px;
		background-position: center;
		transform: scale(-1, 1.10);
		transition: all 750ms;
	}

.adminonly {
	position: fixed;
	width: 160px;
	height: 45px;
}




.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
	}

.modal-content {
	background-color: #fff;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 20%;
}

#closeModal {
	margin-top: 10px;
}


/* INTEGRAATIOT VANHAAN */

#keski {
	position: relative;
	float: left;
	/*min-height: 160px;*/
	width: 100%;
	height: auto;
	/*height: 100%;*/
	clear: both;
	/*background-color: orange;
	height: calc(100vh - 120px);
	overflow-x: auto;*/
	overflow-y: visible;
}

#osio1 {
	position: relative;
	float: left;
	width: auto;
	/*background-color: red;*/
}

#osio2 {
	display: inline-block;
	position: relative;
	background-color: black;
	border:5px solid lightgreen; 
	border-radius: 8px;
	/*max-width: 650px;*/
	width: auto;
	height: auto;
	max-height: 90vh;
	top: 0;
	left: 100%;
	transform: translateX(10px);
	/*margin-left: 10px;*/
	margin-top: 112px;
	overflow-y: auto;
	pointer-events: auto;
}

	/*#osio2 table#eirajaa > tr {max-height: 80px!important;overflow-y: auto;}
#osio2[id="eirajaa"] {
  width: auto;
}

.wrapper,
#keski {
  overflow: hidden;
}*/

#osio2-container {
	position: absolute;
	top: 0;
	/*max-width: 650px;
	max-height: 400px;*/
	left: 0; /* #osio2:n sijainti suhteessa #osio1:een päivitetään JavaScriptillä */
	transition: left 0.2s ease;
	/*z-index: -9;*/
	pointer-events: none;
}

.varaus_logo_cont {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	/*width: 100%;
	background-color: orange;*/
}

.varaus_logo_rivi {
	display: flex;
	flex-direction: row;
	/*wrap: nowrap;*/
	min-height: 28px;
	height: auto;
}

.varaus_logo_solu {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	wrap: nowrap;
}

.varaus_logo_solu img {
	width: 20px; 
	height: 18px; 
	margin-left: 10px;
	vertical-align: middle;
	margin-top: 2px;
}

.varaus_logo_solu p {
	font-size: 1em;
	padding-left: 5px;
	margin: 0;
	display: inline;
	vertical-align: middle;
}

@media screen and (max-width: 929px) {
	.varaus_logo_cont {flex-direction: column;}
}

@media screen and (max-width: 480px) {
	.varaus_logo_rivi {
		flex-direction: column;
		justify-content: flex-start;
	}
	.varaus_logo_solu {
		justify-content: flex-start;
		align-items: flex-start;
		padding: 4px 0 0 0;
	}
}

.scrollable-div {
	width: auto;
	white-space: nowrap;
	overflow-x: hidden; /* Piilota vaakasuuntainen scrollbar */
	/*background-color: orange;
	z-index: 99;
	pointer-events: auto;*/
}
.scrollable-div:hover {overflow-x: auto;}

@media screen and (max-width: 1000px) {
	.scrollable-div {
		overflow-x: auto;
	}
}

#printableShelfAisle {
	display: flex;
	flex-direction: row;
}

.rotated-content {
	/*display: block;
	transform: rotate(90deg);
	transform-origin: center center;
	margin-top: 30%;*/
	/*gap: 1em;
	justify-content: flex-start;
	align-items: flex-end;*/
}

.rotated-content .tirePlaceInformation {
    display: none!important;
}

/* Nollaa kaikki arvot kloonatulla sivulla */
/*.rotated-content * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: center;
    box-sizing: border-box;
}*/

.tireShelfInformation {
	display: flex;
	flex-direction: column;
	row-gap: 0.8em;
}

@keyframes printingPulse {
    0% {
        background-image: url('img/printablePage.png');
    }
    50% {
        background-image: url('img/printablePage_hover.png');
    }
    100% {
        background-image: url('img/printablePage.png');
    }
}

.printablePageIcon {
    background: url('img/printablePageOrig.png') no-repeat;
    background-size: cover;
    background-position: center;
    width: 60px;  /* Muokkaa leveyttä ja korkeutta tarpeen mukaan */
    height: 60px;
    transition: all 1200ms;
}

.printablePageIcon:hover {
    animation: printingPulse 2.5s infinite;  /* 2s kesto, loputon toisto */
}

.printablePageIcon button {
    background: transparent;  /* Aseta nappi läpinäkyväksi */
    border: none;  /* Poista reuna */
    padding: 0;  /* Poista mahdolliset tyhjä tila */
    width: 100%;  /* Täytä divin leveys */
    height: 100%;  /* Täytä divin korkeus */
    cursor: pointer;  /* Osoita, että kyseessä on linkki tai interaktiivinen elementti */
}


/* OLD SHIT */

/*#footer-mini {
	overflow: hidden;
	position: fixed;
	left: 0;
	bottom: 0;
	padding-left: 8px;
	width: 100%;
	height: 40px;
	background-color: #000;
	color: white;
	border-top: 2px solid transparent;
	border-image: linear-gradient(0.20turn, rgba(218,165,32), rgba(45,45,45));
	border-image-slice: 1;
	z-index: 9;
}

	.fm-settings {
		float: left;
		justify-content: center;
		align-items: center;
		width: auto;
		padding: 6px 6px;
	}

		.fm-item0 {float:left;width: auto;}

		.fm-item1 {height:auto;width:90px;float:left;}

		.fm-item2 {height:auto;max-width:90px;float:left;text-align: left;overflow:hidden;}

		.fm-item3 {float:left;height:auto;width:36px;overflow: hidden;text-align:center;}

		.fm-item4 {height:auto;width:95px;float:left;}

		.fm-item5 {float:left;height:auto;width:80px;text-align:left;}

		.fm-item6 {float:left;height:auto;width:40px;overflow:hidden;text-align:center;vertical-align: middle;}

			.fm-item6 img {padding: 0px 0px!important;}

				.fm-icon {height: 22px;width: 22px;opacity: 0.5;}

					.fm-icon:hover {opacity: 1.0;}
					
					/*.btn-bell-small {
						cursor: pointer;
						width: 22px;
						height: 22px;
						background: url('img/bell_v2.png') transparent no-repeat;
						background-size: 22px 22px;
						background-position: center;
						border: none;
				}

					.btn-bell-small:hover {
						background: url('img/bell_v3.png') transparent no-repeat;
						background-position: center;
						background-size: 22px 22px;
					}

					.btn-call-small {
						cursor: pointer;
						width: 22px;
						height: 22px;
						background: url('img/icon-phone-gold.png') transparent no-repeat;
						background-size: 22px 22px;
						background-position: center;
						border: none;
					}
					
					.btn-email-small {
						cursor: pointer;
						width: 22px;
						height: 22px;
						background: url('img/icon-email-gold.png') transparent no-repeat;
						background-size: 22px 22px;
						background-position: center;
						border: none;
					}

		.fm-item7 {height:auto;width:72px;float:left;}
		
		.fm-item8 {float:left;height:auto;width:40px;overflow:hidden;text-align:center;vertical-align: middle;}
		
			.fm-item8 img {padding: 0px 0px!important;}

			.tiny-settings {height: 22px;width: 22px;opacity: 0.5;}
			
				.tiny-settings:hover {opacity: 1.0;}

			.cell-slider {
				-webkit-appearance: none;
				width: 90%;
				height: 15px;
				background: url('img/slaidi.png') no-repeat;
				outline: none;
				opacity: 1;
				-webkit-transition: .2s;
				transition: opacity .2s;
			}

				.cell-slider:hover {opacity: 0.4;}

			.cell-slider::-webkit-slider-thumb {
				-webkit-appearance: none;
				appearance: none;
				width: 20px;
				height: 20px;
				background: #F0F8FF;
				cursor: pointer;
				border: 2px solid #6495ED;
				border-radius: 15px;
			}

			.cell-slider::-moz-range-thumb {
				width: 20px;
				height: 20px;
				background: #F0F8FF;
				cursor: pointer;
				border: 2px solid #6495ED;
				border-radius: 15px;
	}
	
	@media screen and (max-width: 790px), (max-height: 720px), (min-width: 1020px) {
		.fm-item7, .fm-item8 {display:none;}
	}
	
	@media screen and (max-width: 359px) {
		.fm-item1 {display: none;}
	}
	
*/

/*
////////////////////
/////////////////////
//Johanin koodi loppuu
/////////////////////
////////////////////

////////////////////
/////////////////////
//Markun koodi alkaa
/////////////////////
////////////////////
*/

.aikamaaritys {
	border:1px solid #777;
	padding:5px;
}

.eirajaa {
	border:0px;
}

.kuljetusera_rivi1 {
	background-color:#446644;
}

.kuljetusera_rivi2 {
	background-color:#664466;
}

.asiakas_haku {
	word-wrap:break-word;
	padding-left:7px;
	border:0px;
	background-color:#dd7720;
	border:1px solid #FFcc60;
}

.info_laatikko2 {
	padding:10px;
	width:800px;
	min-height:300px;
	z-index:1;
	position:absolute; 
	background-color:#dd7720;
	left:10px;
	top:185px;\"
}

.info_laatikko2_x {
	width:24px; 
	height:24px; 
	z-index:2; 
	position: absolute;
	border:0px; 
	border-radius: 2px; 
	visibility: visible; 
	left: 750px; 
	top: 10px;
}

.nakymaton_input {
    background: transparent;
    border: none;
	color:white;
	width:80px;
}

.asiakaslista {
	border:1px solid #FFcc60;
	border-collapse:collapse;
	background-color:#dd7720;
}

td.asiakaslista {
	padding:5px;
	min-width:40px;
}

.otsikkopainike {
	box-shadow: 0px 10px 14px -7px #276873;
	background:linear-gradient(to bottom, #397b93 5%, #307c89 100%);
	background-color:#397b93;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#eeeeee;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:7px 3px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
	width:160px;
}
.otsikkopainike:hover {
	background:linear-gradient(to bottom, #307c89 5%, #599bb3 100%);
	background-color:#307c89;
}
.otsikkopainike:active {
	position:relative;
	top:1px;
}




.otsikkopainike2 {
	box-shadow: 0px 3px 5px -3px #91b8b3;
	background:linear-gradient(to bottom, #465d57 5%, #5c6c6c 100%);
	background-color:#465d57;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#eeeeee;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:7px 3px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
	width:160px;
}
.otsikkopainike2:hover {
	background:linear-gradient(to bottom, #307c89 5%, #599bb3 100%);
	background-color:#307c89;
}
.otsikkopainike2:active {
	position:relative;
	top:1px;
}




.otsikkopainike3 {
	box-shadow: 0px 3px 5px -3px #91b8b3;
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	background-color:#768d87;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:7px 3px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
	width:160px;
}
.otsikkopainike3:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}
.otsikkopainike3:active {
	position:relative;
	top:1px;
}




.painike {
	box-shadow: 0px 10px 14px -7px #276873;
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	background-color:#599bb3;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:7px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.painike:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}
.painike:active {
	position:relative;
	top:1px;
}

.painike2 {
	box-shadow: 0px 3px 5px -3px #91b8b3;
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	background-color:#768d87;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:7px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.painike2:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}
.painike2:active {
	position:relative;
	top:1px;
}

.painike_disabled {
	box-shadow: 0px 3px 5px -3px #91b8b3;
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	background-color:#768d87;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:7px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}

.order_nappi {
	min-width:100px;
	padding-left:0px;
	padding-right:0px;
}


.oikea_auki {
	padding:4px;
	border-top:1px solid #777;
	border-right:0px solid #777;
	border-bottom:1px solid #777;
	border-left:1px solid #777;
	white-space: nowrap;
}

.vasen_auki {
	padding:4px;
	border-top:1px solid #777;
	border-right:1px solid #777;
	border-bottom:1px solid #777;
	border-left:0px solid #777;
	width:100%;
}

table {
    border-collapse: collapse;
}

td {
border:1px solid white;
}

#osio3 { position: fixed; background-color:black; border:15px solid red; border-radius: 8px; visibility: visible; left: 200px; top: 200px; z-index:400;} 

img.pohjakuva{
    /*max-width:914px;*/
}

td#varaus {
	 border:0px;
}

table.paikka {
	 border-collapse:collapse;
	 height:52px;
}

td.paikka {
	 border:3px solid transparent;
	 text-align:center;
	 vertical-align:center;
	 height:50px;
	 min-width:40px;
	 padding:3px;
}

td.paikka_tyhja {
	 border:3px solid transparent;
	 text-align:center;
	 vertical-align:center;
	 height:60px;
	 min-width:40px;
	 padding:3px;
}


td.pysty_paikka_tyhja {
	 border:3px solid transparent;
	 text-align:center;
	 vertical-align:center;
	 height:50px;
	 min-width:40px;
	 padding:3px;
}

td.paikka2 {
	 border:3px solid transparent;
	 text-align:center;
	 vertical-align:center;
	 height:33px;
	 min-width:30px;
	 padding:3px;
}

td.paikka3 {
	 border:3px solid transparent;
	 text-align:center;
	 vertical-align:center;
	 height:33px;
	 min-width:25px;
	 padding:3px;
}

td.paikka2_tyhja {
	 border:3px solid transparent;
	 text-align:center;
	 vertical-align:center;
	 height:33px;
	 min-width:30px;
	 padding:3px;
}

table.hyllytaulu {
	 padding:0px;
}

td.hyllytaulu {
font-size:11px;
color:black;
max-width:25px;
overflow: hidden;
padding:1px;
}

td.hyllytaulu2 {
font-size:11px;
color:white;
max-width:25px;
overflow: hidden;
word-wrap: break-word;
padding:1px;
}

form {
  margin: 0;
  padding: 0;
}

table.otsikkonav {
	 border:0px;
}

td#login {
	 border:0px;
}

table#login {
	 border:0px;
}

td.otsikkonav {
	 border:0px;
	 padding:3px;
}

table#nayta_varastot {
	 border:0px;
}

td#nayta_varastot {
	 border:0px;
}


table#asiakas_isannat {
	 border:0px;
}

td#asiakas_isannat {
	 border:0px;
}

input#asiakas_isannat {
	 width:250px;
}


p#varastonimi {
	 font-size:25px;
	 font-style:bold;
	 margin:0px;
	 padding-bottom:0px;
	 padding-top:0px;
	 text-decoration:underline;
}

p#virhe {
	 font-size:25px;
	 font-style:bold;
	 margin:0px;
	 padding-bottom:0px;
	 padding-top:0px;
	 text-decoration:underline;
}

td.yritystiedot {
	 border:3px solid #00ff00;
}

td.asiakastiedot1 {
	 border:3px solid #0088dd;
}

td#asiakastiedot {
	 padding:17px;
}

p#onnistui {
	 font-size:25px;
	 font-style:bold;
	 margin:0px;
	 padding-bottom:0px;
	 padding-top:0px;
	 text-decoration:underline;
}

p#paikkanimi {
	 font-size:40px;
	 color:lightgreen;
	 font-style:bold;
	 margin:0px;
	 padding-bottom:0px;
	 padding-top:0px;
	 text-decoration:underline;
}


.paikkataynna_half {	 
	background:#1CE8FF;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 51%);
}
.vaarapaikka_half {
	 background:#ff4444;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	 background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 51%);
}
.semivaarapaikka_half {
	 background:#ffaaaa;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 51%);
}
.keltainenpaikka_half {
	 background:#efef00;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 51%);
}



.keltainenpaikka {
	 background:#efef00;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.paikkataynna {
	 background:#1CE8FF;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.vaarapaikka {
	 background:#ff4444;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	 
}
.semivaarapaikka {
	 background:#ffaaaa;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.paikkavalittu {
	 background:#00ff00;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.paikkanappi {
	 background:#ffffff;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}




td#paikkoja {
	 font-size:20;
	 background:#d5d5d5;
	 border:0px;
	 padding:3px 6px;
	 color:black;
}

input#asiakas_isannat {
	 width:250px;
}

#nappi {
	 width:120px;
}
#tappi {
	 width:120px;
	 height:25px;
}

.blink_me {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

input#nappi2 {
	 width:100px;
}

input#adminnappi {
	 width:120px;
}

.vilkkuu {
	 background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 7px,
    #6c6 7px,
    #6c6 14px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #6e6,
    #226
  );
}

.vilkkuu_kel {
	 background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 7px,
    #cc6 7px,
    #cc6 14px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #ee6,
    #226
  );
}

.vilkkuu_pun {
	 background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 7px,
    #e99 7px,
    #e99 14px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #e66,
    #262
  );
}

.vilkkuu_tummanpun {
	 background-color: #bb0000;
}

#hyllykaytavat {
	 border:0px;
}

.tyhjia_loytyy {
	 background:white;
}

.mustareuna {
	border:2px solid #000000;
}
.valkeareuna {
	border:2px solid #ffffff;
}


.nappi3 {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:arial;
	font-size:14px;
	padding:2px 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}



.nappi2 {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:14px;
	padding:2px 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}
.nappi2:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
.nappi2:active {
	position:relative;
	top:1px;
}

.nappi5 {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#00ff00;
	font-family:arial;
	font-size:14px;
	padding:2px 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}
.nappi5:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
.nappi5:active {
	position:relative;
	top:1px;
}



.nappi6 {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffff00;
	font-family:arial;
	font-size:14px;
	padding:2px 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}
.nappi6:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
.nappi6:active {
	position:relative;
	top:1px;
}


.nappi4 {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:2px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:arial;
	font-size:14px;
	padding:2px 6px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}



.nappi {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:14px;
	padding:2px 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}
.nappi:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
.nappi:active {
	position:relative;
	top:1px;
}

.adminnappi {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4D5B57), color-stop(1, #007A7A));
	background:-moz-linear-gradient(top, #4D5B57 5%, #007A7A 100%);
	background:-webkit-linear-gradient(top, #4D5B57 5%, #007A7A 100%);
	background:-o-linear-gradient(top, #4D5B57 5%, #007A7A 100%);
	background:-ms-linear-gradient(top, #4D5B57 5%, #007A7A 100%);
	background:linear-gradient(to bottom, #4D5B57 5%, #007A7A 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D5B57', endColorstr='#007A7A',GradientType=0);
	background-color:#4D5B57;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:14px;
	padding:2px 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}
.adminnappi:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007A7A), color-stop(1, #4D5B57));
	background:-moz-linear-gradient(top, #007A7A 5%, #4D5B57 100%);
	background:-webkit-linear-gradient(top, #007A7A 5%, #4D5B57 100%);
	background:-o-linear-gradient(top, #007A7A 5%, #4D5B57 100%);
	background:-ms-linear-gradient(top, #007A7A 5%, #4D5B57 100%);
	background:linear-gradient(to bottom, #007A7A 5%, #4D5B57 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007A7A', endColorstr='#4D5B57',GradientType=0);
	background-color:#007A7A;
}
.adminnappi:active {
	position:relative;
	top:1px;
}


.myButton2 {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#00ff00;
	font-family:arial;
	font-size:26px;
	padding:3px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}
.myButton2:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
.myButton2:active {
	position:relative;
	top:1px;
}




.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:26px;
	padding:3px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
.myButton:active {
	position:relative;
	top:1px;
}


p#otsikko1 {
	 font-size:22px;
	 font-style:bold;
	 margin:0px;
	 padding-bottom:0px;
	 padding-top:0px;
}

td#hyllykaytavat {
	 border:0px;
	 vertical-align:center;
	 text-align:center;
	 padding:4px;
}


table#eirajaa, td#eirajaa {
	 border:0px;
}



td#vaakaotsikko {
	 font-style:bold;
	 font-size:18px;
	 text-align:center;
	 vertical-align:center;
	 min-height:27px;
	 min-width:27px;
}


td.pystypaikka {
	 color:black;
	 text-align:center;
	 vertical-align:center;
	 height:39px;
	 min-width:35px;
	 padding:3px;
}

td.pystypaikka2 {
	 text-align:center;
	 vertical-align:center;
	 height:30px;
	 min-width:30px;
	 padding:3px;
}


table.vaakahylly {
	 border-collapse:collapse;
	 border:0px solid transparent;
	 vertical-align:center;
}

td.vaakahylly {
	 border:0px solid transparent;
	 vertical-align:center;
	 text-align:left;
	 height:20px;
}

td.pystyhylly {
	 border:0px solid white;
	 font-style:bold;
	 font-size:30px;
	 text-align:center;
	 vertical-align:bottom;
	 height:150px;
}

td.pystyhylly_p {
	 border:1px solid white;
	 font-style:bold;
	 font-size:30px;
	 text-align:center;
	 vertical-align:bottom;
	 height:150px;
}


table#varasto_otsikko {
	 border:0px;
}

td#varasto_otsikko {
	 border:0px;
	 padding:0px;
}

.otsikkotaulu {
	 display:table;
	 width:100%;
     height:80px;
}

.otsikkorivi {
	 margin:0px;
	 padding:0x;
	 display:table-row;
	 width:100%;
}

.otsikkopalkki1 {
	 display:table-cell;
     width:115px;
     background:#000000;
     text-align:center;
	 vertical-align:top;
}
.otsikkopalkki2 {
	 display:table-cell;
     background:#000000;
	 vertical-align:top;
}

.otsikkopalkki3 {
	 display:table-cell;
     background:#000000;
	 vertical-align:top;
	 text-align:right;
}

#raja {
     border:1px solid #000;
}

/*#keski {
	 min-width:1200px;
	 float:left;
	 min-height:800px;
	 height: expression( this.scrollHeight < 451 ? "450px" : "auto" );
     width:100%;
     clear:both;
}*/

#keski2 {
     width:100%;
	 float:left;
	 min-width:100%;
     background:#444444;
     clear:both;
}


#alapalkki {
     width:100%;
     background:#444444;
     clear:both;
     text-align:center;
     height:100px;
}

.kuva_button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: auto;
    overflow: visible;
    display: inline-block;
    cursor: pointer;
    outline: none; /* Varoitus: Poistamalla outline voi heikentää käytettävyyttä. Voit jättää tämän pois tai lisätä erilliset tyyliasetukset painettavalle ja kohdistuvalle tilalle. */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.kuva_button img {
    display: block;
    width: 100%;
    height: auto;
}

.rengas_p {
	width:100px;
}