/* - - GENERAL - - */


/* - - LINKS - - */

	#links { margin: 20px 0; }

/*	#main .site-link .image { position: relative; width: 100px; height: 100px;
		background-size: cover; background-position: center center; border-radius: 4px; }
*/

 	.collapsable { margin: 0 2% 20px; background-color: #fff; border: 1px solid #333; }
	#checkpage .live-content { padding: 0 2% 15px; text-align: left; overflow: hidden; }
 	#page-content { overflow: hidden; margin: 10px 0; }

 	.buttons { background-color: #ddd; margin: 0; border-radius: 0 0 7px 7px; border-top: 1px solid #aaa; padding: 10px; }
 	#approve-all { top: 0; }

	img.top-logo { position: relative; max-height: 70px; margin: 20px 0; }
	h3.main-headline { color: #fff; padding: 15px 0 25px 10px; font-style: normal; }
	.main-box h3.headlines { position: relative; font-weight: 400; margin: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none;
		text-shadow: 0 1px 10px rgba(0,0,0,.2); width: 100%; cursor: pointer;
		transition: color .3s, margin .3s, font-size .3s; -webkit-transition: color .3s, margin .3s, font-size .3s; }
	.main-box h3.list-headline { font-style: italic; font-size: 180%; text-align: center; margin: 19px 10px 17px; }
	.main-box.open .headlines { color: #fff; padding: 13px 0 15px; font-size: 170%; }
	.main-box.closed .headlines { color: #fff; padding: 8px 0; font-size: 160%; }
	.main-box a { text-decoration: none; color: #fff; }
	@media screen and (max-width : 599px) { .main-box h3.list-headline { font-size: 160%; } }
	
	.main-box .headlines i { position: absolute; left: 10px; top: 11px; font-size: 110%; }
	.main-box .headlines i.fa-check-square-o { top: 9px; left: 12px; font-size: 125%; }
	.main-box .headlines i.fa-print { top: 7px; left: 12px; font-size: 120%; }
	.main-box.open .headlines i { margin-top: 3px; }
	.main-box.done .headlines .main-check { opacity: 1; }
	
	.main-box { margin: 20px 0 0; border: 1px solid;
			transition: background-color .3s, border-color .3s; -webkit-transition: background-color .3s, border-color .3s; }
	.main-box.open, .main-box.closed:hover { background-color: #9D7F57; border-color: #6E532F; }
	.main-box.closed, .site-link { background-color: #886535; border-color: #594221; }
	.main-box.ready { background-color: #788C30; border-color: #4E5C1D; }
	.main-box.ready.open { background-color: #9CAD5C; border-color: #708039; }
 	.main-box.ready.closed:hover { background-color: #9AAB59; border-color: #7C8C46; }


/* - - CHECK LIST - - */

  /* BASIC STUFF */
	#checklist li:first-child { padding-top: 15px; border-radius: 6px 6px 0 0; }
	#checklist li:last-child { padding-bottom: 15px; border-radius: 0 0 6px 6px; }
	#checklist li { position: relative; list-style: none; text-align: left; padding: 7px 50px 7px 15px;
		text-shadow: 1px 1px 3px rgba(0,0,0,.15); color: #333; font-size: 18px; font-style: italic; cursor: pointer; border: .1em none; }
	#checklist li:nth-child(2n+2) { background-color: #ddd; border: .1em dashed #ccc; border-left: none; border-right: none; }
	#checklist li.yes-point { padding-right: 85px; }
/*	#checklist span { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
*/	#checklist span { position: relative; vertical-align: middle; }
	
	.checkpoint .checkbox { position: absolute; top: 50%; right: 15px; margin-top: -12px; border: 2px solid #333; background-color: #eee;
		border-radius: 5px; height: 24px; width: 24px; transition: background-color .3s; -webkit-transition: background-color .3s; }
	.checkpoint .checkbox i.mini-ok { position: absolute; left: 0px; top: -5px; font-size: 160%; color: #333; }
	.checkpoint .checkbox.on { background-color: #79B548; }

	.checkpoint .yesbox { font-size: 90%; color: #999; padding-top: 1px; width: 60px; overflow: hidden; text-align: center; }
	.checkpoint:last-child .yesbox { margin-top: -16px; }
	.checkpoint .yesbox.on.yes { background-color: #79B548; color: #aaa; }
	.checkpoint .yesbox.on.no { background-color: #DE546F; color: #777; }
	.checkpoint .yesbox.on i:not(.sel) { margin-top: -2px; }
	.checkpoint .yesbox.on i.sel { font-size: 120%; color: #fff; }
	.checkpoint .yesbox i { position: relative; }
	.checkpoint .yesbox i.mini-no { left: -2px; }
	.checkpoint .yesbox i.mini-yes { left: 2px; }

  /* CHANGING */
	#checklist li:hover { background-color: #B08E61; color: #fff; }
	#checklist li:hover .checkbox { border-color: #222; }
	#checklist.hidden { display: none; }

  /* ANIMATION TIMINGS */
	#checklist li, #checklist .checkbox, #checklist .checkbox img { transition: all .3s ease-out; -webkit-transition: all .3s ease-out; }
	#checklist li:hover, #checklist li:hover .checkbox { transition: all .12s ease-out; -webkit-transition: all .12s ease-out; }


/* - - PAGE - - */
/*  #main table, #main td, #main tr, #main tbody { border: none; } */


/* - - QUESTIONS - - */
	.qa { overflow: hidden; font-size: 110%; }
	.qa .qa-item { position: relative; width: 100%; overflow: hidden; display: table; padding: 5px 0; }
	.qa .qa-item:not(:first-child) { border-top: 1px solid #aaa; }
	.qa .qa-item:not(:last-child) { border-bottom: 1px solid #333; }
	.qa .qa-item .question, .qa .qa-item .answers { display: table-cell; vertical-align: middle; padding: 2px 5px;}
	.qa .qa-item .question { width: 50%; font-style: italic; }
	.qa .qa-item .answers { width: 50%; text-align: left; padding-right: 10px; }
	.qa .qa-item .answer { position: relative; background-color: #ccc; border: 1px solid #777; cursor: pointer; margin: 5px 0; border-radius: 4px;
		padding: 3px 5px; margin-left: 25px; }
	.qa .qa-item .answer:hover { background-color: #777; color: #fff; }
	.qa .qa-item .answer:active,
	.qa .qa-item .answer.selected { background-color: #555; color: #fff; border-color: #333; }
	.qa .qa-item .answer.correct { background-color: #559E1A; color: #fff; border-color: #356B0A; }
	.qa .qa-item .answer.wrong { background-color: #B3344D; border-color: #8C142C; }

	.qa .qa-item .answer i { position: absolute; margin-left: -33px; color: transparent; font-size: 130%; top: 0px; }
	.qa .qa-item .answer:hover i.arrow { color: #777; }
	.qa .qa-item .answer:active i.arrow,
	.qa .qa-item .answer.selected i.arrow { color: #555; }
	.qa .qa-item .answer.selected i:not(.arrow),
	.qa .qa-item .answer:hover i:not(.arrow) { color: transparent; }
	.qa .qa-item .answer.correct i.fa-check { color: #559E1A; margin-left: -35px; font-size: 135%; top: 1px; }
	.qa .qa-item .answer.wrong i.fa-remove { color: #B3344D; margin-left: -33px; font-size: 140%; }
	.qa .qa-item .answer.correct i:not(.fa-check),
	.qa .qa-item .answer.wrong i:not(.fa-remove) { color: transparent; }

	.qa .qa-item .answer, .qa .qa-item .answer i { transition: all .2s; -webkit-transition: all .2s; }



/* INFO FORM */
/* FORM-EDIT */
	.form-container { border-radius: 7px; }
	.form-container .row-block { position: relative; width: 100%; border-bottom: 1px solid #555; background-color: #aaa;
		color: #333; overflow: hidden; }
	.form-container .row-block .row-container { position: relative; width: 100%; /* min-height: 50px; */ /* HALF OF PADDING-RIGHT .row-block */
		font-size: 0; }
	.form-container .row-block:first-child { border-radius: 7px 7px 0 0; }
	.form-container .row-block:last-child { border-radius: 0 0 7px 7px; border-bottom: none; }

	.form-container .info-block, .form-container .block-check, .form-container .block-date
	{ position: relative; display: inline-block; }

	.form-container .info-block { padding: 0px; margin: 0; font-size: 16px; white-space: normal; text-align: center; }
	.form-container .info-block .render { position: relative; width: 100%; border: 1px solid #aaa; overflow: hidden;
		padding: 5px 10px; border-color: #ccc #aaa #aaa #ccc; background-color: #fff; min-height: 65px;
	 	transition: background-color .2s; -webkit-transition: background-color .2s; }

	.form-container .render .description { position: relative; width: 100%; height: 20px; font-style: italic; color: #777;
		white-space: nowrap; overflow: hidden; }
	.form-container .info-block.fully-optional .render { background-color: #eee; }
	.form-container .render span { width: 100%; display: block; cursor: pointer; }
	.form-container .render input { height: 25px; font-size: 110%; transition: background-color 1s, color 1s; -webkit-transition: background-color 1s, color 1s; }
	.form-container .render input.input-file { font-size: 100%; max-width: 85%; }
	.form-container .render button.clear-button { background: none; border: none; color: #777; display: none; margin-left: 5px; }
	.form-container .render input.input-file.has-value ~ .clear-button { display: inline-block; }
	.form-container .render input.block-text { position: relative; width: 100%; background-color: #ddd; border-radius: 4px;
		border: 1px solid #ccc; padding: 3px 3px 0; margin-top: 5px; text-align: center; }
	/*.form-container .render input.alarmed.half-alarmed { background-color: #dcc; } */
	.form-container .render input.alarmed { background-color: #C2767A; color: #fff; transition: background-color .2s, color .2s; -webkit-transition: background-color .2s, color .2s; }
	.form-container .render input.alarmed::-webkit-input-placeholder,
	.form-container .render input.alarmed::-moz-placeholder,
	.form-container .render input.alarmed:-ms-input-placeholder
	 { color: #fff; transition: background-color .2s, color .2s; -webkit-transition: background-color .2s, color .2s; }

	.form-container .render .block-check { width: 26px; height: 24px; margin-top: 6px; cursor: pointer; border: none; background: none; }
	.form-container .render .block-check:focus { outline: #aaa solid 2px; }
	.form-container .render .block-check i { position: absolute; border-radius: 2px; left: 2.5px; top: 0px; font-size: 170%; color: #333; }
	.form-container .render .block-check i.checked { opacity: 0; }
	.form-container .render .block-check.checked i.checked { opacity: 1; }
	.form-container .render .block-check.checked i.unchecked { opacity: 0; }
	.form-container .render input.block-text.number { width: 130px; }
	.form-container .render .block-date input { width: 40px; }
	.form-container .render .block-date input.year { width: 50px; }

	.form-container .row-container.n1 > li { width: 100%; }
	.form-container .row-container.n2 > li { width: 50%; }
	.form-container .row-container.n3 > li { width: 33.33333%; } /* calc(100%/3) pointer-events: none;  */
	.form-container .row-container.n4 > li { width: 25%; }

	.form-container .row-block:first-child .info-block .render { padding-top: 11px; }
	.form-container .row-block:last-child .info-block .render { padding-bottom: 13px; }

	@media screen and (max-width : 849px) {
	.form-container .row-block:first-child .n3 .info-block:nth-child(n+2) .render,
	.form-container .row-block:first-child .n4 .info-block:nth-child(n+3) .render { padding-top: 5px; }
	.form-container .row-block:last-child .n2 .info-block:first-child .render,
	.form-container .row-block:last-child .n3 .info-block:first-child .render,
	.form-container .row-block:last-child .n4 .info-block:nth-child(-n+2) .render { padding-bottom: 5px; }
	.form-container .row-container.n1 > li { width: 100%; }
	.form-container .row-container.n2 > li { width: 100%; }
	.form-container .row-container.n3 > li { width: 50%; } /* calc(100%/3) pointer-events: none;  */
	.form-container .row-container.n3 > li:first-child { width: 100%; } /* calc(100%/3) pointer-events: none;  */
	.form-container .row-container.n4 > li { width: 50%; } }

	@media screen and (max-width : 599px) {
	.form-container .row-block:first-child .info-block:not(:first-child) .render { padding-top: 5px; }
	.form-container .row-block:last-child .info-block:not(:last-child) .render { padding-bottom: 5px; }

	.collapsable.big-box { box-shadow: none; }
	.collapsable { margin: 0; border: none; border-top: 1px solid #555; }
	.collapsable, .form-container { border-radius: 0 0 7px 7px; }
	.form-container .row-block:first-child { border-radius: 0; }
	.form-container .row-block { border-bottom: none; }
	.form-container .row-container > li { width: 100% !important; } }


	.separator { display: none; position: absolute; }
	/* MIKS TÄÄ KUSAUTTAA */
	@media screen and (max-width : 499px) { .separator { position: relative; clear: both; width: 100%; display: block; } }



/* - - LANGUAGE - - */
	#toggle-langs { margin-top: 20px; }

/* - - PRINTING - - */

  /* GENERAL */ 
	#printpage { color: #333; }
	#printable { position: relative; }
	#printpage .container { margin: 0 15px; overflow: hidden; padding-bottom: 7px; padding-top: 5px; }
	#printpage .container.main { width: 80%; margin-top: 15px; }
	#printpage .container:not(:last-child) { border-bottom: 2px solid #aaa; }
	#printpage .container > ul { padding-bottom: 10px; }

	.print-headline { text-align: left; display: block; width: 100%; padding: 0 5px; margin: 13px 0 10px; font-style: italic;
		font-size: 115%; text-transform: uppercase; }
	.print-headline span { margin-left: 5px; font-size: 115%; font-style: normal; text-transform: none; }
	.print-subheadline { text-align: left; display: block; width: 100%; padding: 0 5px; margin: 13px 0 10px; 
		margin-left: 5px; font-size: 115%; font-style: italic; text-transform: none; text-decoration: underline; }
/*	.print-headline.main { text-align: center; padding: 7px 0 3px; }
*/

	.container.main { display: table; }
	.print-headline.main.image-on { display: table-cell; text-align: left; vertical-align: middle; }
	.image-container { display: table-cell; vertical-align: middle; width: 100%; }
	#printpage img.image-attachment { height: auto; width: auto; max-width: 100%; max-height: 200px; cursor: zoom-in;
		transition: .2s max-height ease-out; -webkit-transition: .2s max-height ease-out; }
	#printpage img.image-attachment:active,
	#printpage img.image-attachment:focus { max-height: 500px; }
	#printpage img.print-logo { height: auto; width: 70px; position: absolute; right: 22px; top: 0; }
	/*#printpage img { height: auto; width: 70px; position: absolute; right: 22px; top: 0; }*/
	/*#printpage img.print-image { width: 60px; }*/



  /* CHECKLISTS */ 
	#printpage ul.done { display: table; width: 100%; }
	#printpage li.done { padding: 5px 10px; text-align: left; display: table-cell; width: 60%; }
	#printpage li.done:first-child { width: 40%; }
	#printpage li.done > div { border-bottom: 1px solid #333; overflow: hidden; margin-bottom: 5px; }
	#printpage li.done .description { font-style: italic; }
	#printpage li.done .answer { margin-left: 5px; padding: 0 2px; float: right; }


  /* CHECKLISTS */ 
	.print-checklist { text-align: left; padding: 0 5px; }
	.print-checklist.double { width: 50%; display: inline-block; vertical-align: top; }
	.print-checklist li { position: relative; padding: 3px 25px 3px 0; font-size: 85%; font-style: italic; border-bottom: 1px dashed #aaa; }
	.print-checklist li.yesbox { padding-right: 45px; }
	.print-checklist li > div { }
	.print-checklist li > div.list-item { width: 100%; }
	.print-checklist li > div:not(.list-item) { position: absolute; top: 50%; right: -2px; margin-top: -9px; }
	.print-checklist li > div.update-yesbox { text-transform: uppercase; font-weight: 600; margin-top: -7px; font-size: 90%; right: 2px; }
	.print-checklist li > div.update-checkbox i { position: absolute; right: 0px; font-size: 150%; }


  /* PRINT FORM */

	.print-form { color: #333; padding: 0 5px; }
	.print-form .row-container.n1 > li { width: 100%; }
	.print-form .row-container.n2 > li { width: 50%; }
	.print-form .row-container.n3 > li { width: 33.33333%; } /* calc(100%/3) pointer-events: none;  */
	.print-form .row-container.n4 > li { width: 25%; }
	.print-form .row-block:first-child .info-block:first-child { border-top-left-radius: 4px; }
	.print-form .row-block:first-child .info-block:last-child { border-top-right-radius: 4px; }
	.print-form .row-block:last-child .info-block:first-child { border-bottom-left-radius: 4px; }
	.print-form .row-block:last-child .info-block:last-child { border-bottom-right-radius: 4px; }
	
	.print-form { font-size: 0; }
	.print-form .row-container { display: table; width: 100%; }
	.print-form .info-block { position: relative; display: table-cell; padding: 3px 5px; margin: 0; white-space: normal; text-align: left;
		border: 1px solid #000; font-size: 14px; min-height: 20px; }

	.print-form .info-block.check-box { vertical-align: middle; font-style: italic; padding-right: 15px; padding-top: 5px; }
	.print-form .info-block.check-box .checker { position: relative; top: -2px; margin-left: 7px; }
	.print-form .info-block.check-box .checker i { position: absolute; left: 0; font-size: 150%; }
	.print-form .info-block.check-box .checker:not(.checked) i.checked { opacity: 0; }
	.print-form .info-block.check-box .checker.checked i.checked { opacity: 1; }
	.print-form .info-block.check-box .checker.checked i.unchecked { opacity: 0; }

	.print-form .description { font-style: italic; padding-right: 5px; width: 100%; }
	.print-form .description.check-box { font-size: 100%; vertical-align: middle; }
	.print-form .answer { width: 100%; padding-top: 3px; }
	.print-form span.update-text, #print-name { font-weight: bold; }
	.print-form span.update-text, .print-form .update-check-box {  }


/* TÄN PITÄS TOIMIA */
	@media print {
		#main .print-headline { margin: 8px 0 5px; }
		#main > div, #main > h3, #main .top-logo { display: none !important; }
		#main > div#printpage, #main > div#printpage .collapsable {
			display: block !important; border: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;}
		#printpage * { color: #000; box-shadow: none !important; }
		#printpage .container.main { width: 75%; }
		#printpage img { max-width: 130px; max-height: 80px; }
		#printpage .print-form .description { font-size: 80%; }
		#printpage > h3, #printpage .buttons { display: none !important; } }