
/* - - GENERAL - - */

	.table { position: relative; display: table; width: 100%; height: 100%; }
	.table > div, .table > i { position: relative; display: table-cell; vertical-align: middle; }
	.table > .table-row, .table-row { display: table-row; }
	.table-row > div { display: table-cell; vertical-align: middle; }

	#main { min-width: 250px; overflow: hidden; position: relative; }

	#popup { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: #222; opacity: 0; display: table; 
		padding: 10px; overflow: hidden;
		transition: opacity .5s; -webkit-transition: opacity .5s; }
	#popup.on { position: absolute; z-index: 1000; opacity: 1; transition: opacity .2s; -webkit-transition: opacity .2s; }
	#popup.off { display: none; }
	#popup > .container { position: relative; display: table-cell; vertical-align: middle; }

	.headlines { cursor: pointer; }
	#new-tr .sub-link > .headlines { cursor: default; }
	.headlines .sub { font-size: 80%; }
	.main-box h3 .main-text { padding: 0 30px; position: relative; left: 15px; }
	.main-box h3 .main-text.wide { padding: 0 50px; left: 20px; }
	.box-headline .alt { display: inline-block; }
	.box-headline i { position: absolute; left: 10px; font-size: 110%; }
	.box-headline i.fa-pencil-square { font-size: 120%; }
	.box-headline i.fa-pencil-square-o { font-size: 125%; }
	.box-headline i.next { margin-top: 1px; margin-left: 34px; margin-top: 4px; font-size: 92%; }
	.box-headline i.next.fa-arrow-left { font-size: 82%; }
	img.top-logo { position: relative; max-height: 70px; margin: 20px 0; }

  	#end-links-container { position: relative; padding-top: 10px; }
  	.end-link { position: relative; left: 5px; margin: 12px 0px; color: #fff; font-size: 125%; font-style: italic; }
  	.end-link span { cursor: pointer; }
  	.end-link span i { position: relative; left: -7px; }
  	.end-link span i.fa-sign-in { font-size: 125%; top: 2px; }
  	.end-link a { color: #fff; text-decoration: none; }
  	.end-link.admin-stuff { color: #aaa; }

	.live-content { padding: 5px 10px; }

  /* LAYOUT SUBLINKS */
	.sub-link { position: relative; background-color: #444; overflow: hidden; font-size: 0; margin-bottom: 20px; border: 1px solid #333;
		transition: background-color .2s, border-color .2s; -webkit-transition: background-color .2s, border-color .2s; }
	.sub-link:last-child { margin-bottom: 20px; }	
	.sub-link > .collapsable { font-size: 20px; }
	.sub-link.closed { background-color: #333; border-color: #666; border-right-color: #111; border-bottom-color: #111; }
	.sub-link.closed:hover { background-color: #444; border-color: #888; border-right-color: #333; border-bottom-color: #333; }
	.sub-link.ready { background-color: #69913F; }
	.sub-link.closed.ready { background-color: #69913F; border-color: #555; border-left-color: #aaa; border-top-color: #aaa; }
	.sub-link.closed.ready:hover { background-color: #75A640; }
	.sub-link h3.point-headline { position: relative; margin: 7px 0; text-align: center; font-size: 22px; width: 100%; color: #fff; user-select: none; -webkit-user-select: none; -moz-user-select: none;
		transition: margin .2s, font .2s; -webkit-transition: margin .2s, font .2s; }
	.sub-link.open h3.point-headline { margin: 10px 0; font-size: 23px; }
	.sub-link h3.point-headline .text { position: relative; left: 3px; padding: 0 50px; max-width: 100%; transition: padding .2s; -webkit-transition: padding .2s; }
	.sub-link.open h3.point-headline .text { padding: 0; }
	.sub-link .info { position: absolute; color: #888; font-style: italic; font-size: 85%; top: 50%; margin-top: -10px;
		transition: opacity .2s; -webkit-transition: opacity .2s; }
	.sub-link .info i { font-size: 110%; }
	.sub-link .info.left { left: 8px; }
	.sub-link .info.left span { padding-left: 3px; }
	.sub-link .info.right { right: 10px; }
	.sub-link .info.right i { position: relative; top: 1px; left: -2px; }
	.sub-link .info span { padding-left: 4px; }

  /* LAYOUT MINILINKS */
  	/* BASICS */
	.mini-link { position: relative; overflow: hidden; font-size: 0; margin-bottom: 16px; border: 1px solid #777;
		transition: background-color .2s, border-color .2s; -webkit-transition: background-color .2s, border-color .2s; }
	.mini-link:last-child { margin-bottom: 10px; }
	.mini-link > .collapsable { font-size: 18px; }
	.mini-link .small-headline { position: relative; font-size: 20px; color: #fff; text-align: center; padding: 5px 55px; margin: 0; }
	
	/* DIFFERENT TYPE OF MINILINKS */
	.mini-link.ready.zero { background-color: #2a2a2a; border-color: #666; border-left-color: #111; border-top-color: #111; }
	.mini-link.zero .headlines { cursor: default; }

	.mini-link.ready { background-color: #555; border-color: #222; border-left-color: #777; border-top-color: #777; }
	.mini-link.closed.ready:not(.zero):hover { background-color: #666; border-color: #333; border-left-color: #888; border-top-color: #888; }

	.mini-link { background-color: #964958; border-color: #DB93A1; border-right-color: #803947; border-bottom-color: #803947; }
	.mini-link.closed:not(.zero):not(.ready):hover /* { background-color: #B56071; border-color: #666; border-left-color: #111; border-top-color: #111; } */
 			{ background-color: #B56071; border-color: #DB93A1; border-right-color: #803947; border-bottom-color: #803947; }
	
	.mini-link.open { border-color: #ccc; } 

	/* SUB LINK'S EFFECT ON MINI LINKS */
	.sub-link.open .mini-link .info { opacity: 1; color: #ddd; }
	.sub-link.open .mini-link .info i { position: relative; left: -2px; top: 0px; font-size: 110%; }
	.sub-link.open .mini-link .info i.fa-check { left: 0px; top: 0px; }
	.sub-link.open .mini-link .info.left { left: 6px; }
	.sub-link.open .mini-link .info.right { right: 5px; }
	.sub-link.open .mini-link .info .number { position: relative; top: -1px; padding: 0 5px; }
	

  /* END NOTE (TR-LEVEL) */
	.end-note { position: relative; display: inline-block; margin: 15px 0 20px; padding: 10px;
		color: #aaa; background-color: #333; border: 1px solid #aaa; font-size: 20px; }
	.end-note .highlight { color: #fff; }

	.cumulative { overflow: hidden; margin-bottom: 2px; }
	.cumulative > div { display: inline-block; font-size: 90%; font-style: italic; padding-bottom: 5px; }
	.cumulative .rights { float: left; }
	.cumulative .wrongs { float: right; }
	.cumulative .wrongs i { margin-right: 2px; }

	.tr-level { position: relative; display: block; padding: 8px 10px; font-size: 95%;
			border: 1px solid #aaa; border-left: none; border-right: none; }
	.tr-level .big, .end-note .tr-level .separator { font-size: 110%; }
	.tr-level .contents { position: relative; top: 15px; }
	.tr-level .contents > div { display: inline-block; height: 53px; vertical-align: middle; }
	.tr-level .contents .double { display: inline-block; }
	.tr-level .contents .double > div { display: block; position: relative; top: -15px; }
	.tr-level .contents .double > .top { padding-bottom: 2px; }
	.tr-level .contents .double > .bottom { border-top: 1px solid #aaa; padding-top: 4px; }
	.tr-level .contents .separator { width: 20px; }

	.tr-name { position: relative; display: block; padding: 0 15px 0 20px; }
	.tr-name > div:first-child { margin-top: 7px; }
	.tr-name > div:not(:first-child) { margin-top: 10px; }
	.tr-name .text, .end-note .tr-name .name { font-size: 90%; padding: 5px 0 0; margin-top: 2px; }
	.tr-name .text { font-style: italic; }
	.tr-name input.name { background-color: #222; border: none; border-bottom: 1px solid #aaa; border-radius: 3px;
			padding: 5px; width: 250px; height: 27px; }
	.tr-name .name { margin-left: 5px; }
	.tr-name .date { font-size: 85%; }

	@media screen and (max-width : 549px) {
		.end-note .cumulative > div { width: 100%; float: none !important; }
		.end-note, .end-note .tr-level { width: 100%; }
		.end-note .tr-level .contents { height: 24px; overflow: hidden; top: 0px; }
		.end-note .hideable { display: none !important; } }

	@media screen and (min-width : 1199px) {
		#new-tr .end-note .tr-name { top: -2px; }
		#new-tr .end-note .tr-name > div:not(:first-child) { margin-top: 5px; }
		.end-note .tr-name { text-align: left; }
		.end-note .tr-name .text, .end-note .tr-name .name { padding: 0; }
		.end-note .tr-name > div:first-child { margin-top: 0; }
		.end-note .tr-name > div:not(:first-child) { margin-top: 7px; }
		.end-note .tr-level, .end-note .tr-name { display: inline-block; vertical-align: middle; }
		.end-note { padding: 5px 10px;  }
		.end-note .tr-level { border: 1px solid #aaa; border-top: none; border-bottom: none; vertical-align: middle; padding: 0 25px 0 25px; }
		.end-note .tr-level .contents { top: 15px; }
		.end-note .cumulative { display: inline-block; width: 210px; vertical-align: middle; position: relative; top: 4px; left: 5px; }
		.end-note .cumulative > div { float: left !important; display: block; }
		.end-note .cumulative .wrongs { margin-left: 6px; margin-top: 3px; }
		.end-note .cumulative .wrongs i { margin-right: 6px; } }


/* OLD TR */ 

	/* SUB LINK OVERRIDES */
	.tr-links .sub-link.open:not(.ready) .info { opacity: 0; }
	.tr-links .sub-link > h3 .info { color: #ddd; }
	.tr-links .sub-link > h3 .info.left i { font-size: 130%; margin-top: -3px; }
	.tr-links .sub-link > h3 .info.right .tr-level-short { font-size: 90%; }
	.tr-links .sub-link:not(.ready) > h3 .info.left i { opacity: 0; }
	.tr-links .sub-link.open > h3 .info.right { opacity: 0; }
	@media screen and (max-width : 499px) { 
		.tr-links .sub-link .point-headline > i,
		.tr-links .sub-link .point-headline > div:not(.main) { display: none; } }

	.tr-links .sub-link { transition: background-color .2s, border-color .2s, opacity .2s; -webkit-transition: background-color .2s, border-color .2s, opacity .2s; }
	.tr-links > .show-ready-link { margin: 10px 0 20px; }
	.tr-links > .show-ready-link .show-ready { padding: 3px 5px; cursor: pointer; font-size: 130%; font-style: italic; font-weight: bold; }
	.tr-links > .show-ready-link .show-ready:hover { color: #fff; }

    /* FIX NOTES */
	.fix-point .sub-pair { background-color: #ddd; border-top: 2px solid #777; border-spacing: 0px; }
	.fix-point .note { display: table; width: 100%; padding: 2px 5px; text-align: left; }
	.fix-point .sub-pair.even { background-color: #999; }
	
	.fix-point .note .container { display: table-cell; vertical-align: middle; position: relative; padding: 5px; }
	.fix-point .note .box { border: 1px solid #777; padding: 5px 5px 3px; }

	.fix-point .note .note-text { text-align: left; }
	.fix-point .note .note-text .text { padding-right: 55px; width: 100%; display: table; min-height: 37px; border-spacing: 0; }
	.fix-point .note .note-text .text .box { background-color: #eee; display: table-cell; vertical-align: middle; font-style: italic;
		border-right-color: #fff; border-bottom-color: #fff; width: calc(100% - 180px); }
	.fix-point .note .note-text .text .name-box { display: table-cell; width: 180px; padding-left: 10px; vertical-align: middle; }
	.fix-point .note .note-text .text .name-box span { display: block; font-style: italic; }
	.fix-point .note .note-text .text .name-box span.description { color: #555; font-size: 90%; }
	.fix-point .note .note-text .times-number { position: absolute; width: 40px; right: 9px; top: 50%; margin-top: -13px; display: block;
		text-align: center;	font-style: italic; font-weight: bold; color: #666; }
	.fix-point .note .note-text .times-number .number { font-size: 120%; }

	.fix-point .note .note-fix { width: 120px; height: 38px; }
	.fix-point .note .note-fix button { position: relative; padding: 0 5px; font-size: 95%;
		width: 100%; font-weight: bold; font-style: italic;
		transition: background-color .2s, box-shadow .2s; -webkit-transition: background-color .2s, box-shadow .2s; }
	.fix-point .note .note-fix button.green { height: 38px; }
	.fix-point .note .note-fix button:not(.green) { top: -1px; height: 28px; }
	.fix-point .note .note-fix button span { position: relative; top: -1px; }

	.fix-point .note .note-fix button .small { font-size: 80%; display: block; }

  /* IMAGE GALLERY FOR OLD-TR INLINE */
	.fix-point .image-gallery { padding: 10px; padding-top: 0px; margin: 0; margin-top: 5px; }
	.fix-point .image-gallery .render { position: relative; padding: 3px 7px; 
		border: 1px solid #777; background-color: #bbb; font-size: 0; }
	.fix-point .image-gallery .image-floater { position: relative; display: inline-block; width: 50%; height: auto;
		min-height: 40px; margin: 4px 0; overflow: hidden; font-style: italic; font-size: 17px; }
	.fix-point .image-gallery .image-container { height: 60px; width: 60px; }
	.fix-point .image-gallery .image-container:hover .overlay { opacity: .75; }
	.fix-point .image-gallery .image-container .overlay i { font-size: 250%; }
	.fix-point .image-gallery .image-caption { text-align: left; padding: 0 10px;}
	.fix-point .image-gallery .image-floater:last-child:nth-child(2n+1) { width: 100%; }

	@media screen and (max-width : 599px) {
		.fix-point .note .note-text .text .name-box { width: 100%; display: table-row; }
		.fix-point .note .note-text .text .name-box span { display: inline-block; margin-top: 10px; }
		.fix-point .note .note-text .text .name-box span:last-child { margin-top: 2px; padding-left: 3px; }

	}

	@media screen and (max-width : 799px) { 
		.fix-point .image-gallery { margin-top: 0; }
		.fix-point .image-gallery .image-floater { width: 100%; }
		#old-tr .fix-point .note { padding: 5px; padding-bottom: 10px; }
		#old-tr .fix-point .note .container { display: inline-block; }
		#old-tr .fix-point .note .container.note-text { width: 100%; min-height: 38px; margin-bottom: 5px; }
		#old-tr .fix-point .note .container.note-fix { width: calc(100% - 5px); }
		#old-tr .fix-point .note .container.note-image { width: 40px; margin-left: 7px; }
		#old-tr .fix-point .note .container.note-fix,
		#old-tr .fix-point .note .container.note-image,
		#old-tr .fix-point .note .note-fix .fix-them, 
		#old-tr .fix-point .note .note-image button { height: 38px; }
		#old-tr .fix-point .note .note-fix .fix-them { margin: -5px -5px 0 0; } 
		#old-tr .fix-point .note .note-fix button.green span { top: -1px; }
		#old-tr .fix-point .note .note-fix button .small { padding-left: 10px; }
		#old-tr .fix-point .note .note-text .times-number { right: 7px; } }

/*	@media screen and (min-width : 1200px) {
		.fix-point .pairer { display: table; width: 100%; } 
		.fix-point .sub-pair { display: table-cell; width: 50%; vertical-align: top; height: 100%;} 
		.fix-point .note { height: 100%; } 
		.fix-point .pairer:nth-child(2n) .sub-pair:not(.even) { background-color: #aaa; }
		.fix-point .pairer:nth-child(2n) .sub-pair.even { background-color: #ccc; }
		.fix-point .sub-pair:not(.even) { border-left: 2px solid #777; }
 }*/
 /* <-- this causes problems on some browsers..!! */


 	/* PRINT PREVIEW */

 		.preview-tr { padding: 20px 10px; color: #000; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }
 		.preview-tr > div:not(.print-notes) { padding-bottom: 20px; width: 100%; }
/* 		.preview-tr > div:not(:first-child) { border-top: 1px solid #000; }
 */		.preview-tr .print-box { border-radius: 5px; border: 1px solid #000; overflow: hidden; }

/*		.preview-tr .color-super-light { background-color: #EDE3D3 !important; }
		.preview-tr .color-light { background-color: #E5D7C2 !important; }
		.preview-tr .color-dark { background-color: #B28F60 !important; }
*/		.preview-tr .color-light { background-color: #EBDECC !important; }
		.preview-tr .color-medium { background-color: #D6C1A3 !important; }

		.preview-tr .top { height: auto; }
 	
	 		.preview-tr .print-info-container { width: calc(100% - 500px); }
	 		.preview-tr .print-info.table {  width: 400px; }
	 		.preview-tr .print-info .table-row { width: 100%; display: table-row; }
	 		.preview-tr .print-info .table-row:not(:last-child) .text { border-bottom: 1px solid #000; }
	 		.preview-tr .print-info .text { text-align: left; padding: 2px 5px; }
	 		.preview-tr .print-info .text:not(.answer) { width: 150px; border-right: 1px solid #54493A; font-style: italic; }
	 		.preview-tr .print-info .text .week { font-size: 90%; padding-left: 5px; }

	 		.preview-tr .logo { max-width: 400px; text-align: center; }
	 		.preview-tr .logo img { width: auto; height: auto; max-width: 300px; max-height: 200px; }
	 		.preview-tr .logo span { font-size: 180%; font-style: italic; width: 100%; display: inline-block; margin-top: 5px; }

 		.preview-tr .print-points { width: 100%; text-align: left; }

	 		.preview-tr .print-point > div { padding: 4px 5px; }
	 		.preview-tr .print-point > div:not(:first-child) { text-align: center; border-left: 1px solid #54493A; }
	 		.preview-tr .print-point > div:first-child { width: 45%; }
	 		.preview-tr .print-point:not(:last-child) > div { border-bottom: 1px solid #000; }
			.preview-tr .print-point .info { font-style: italic; }
			.preview-tr .print-point.info-top i { padding-right: 3px; } 
			.preview-tr .print-point.info-top i.wrong { padding-right: 5px; } 
			.preview-tr .print-point.info-cumulative .number { font-weight: bold; } 
/*			.preview-tr .print-point.info-cumulative .info { background-color: #D6C1A3; }  */

 		.preview-tr .print-tr-level { color: #000; font-size: 115%; letter-spacing: .4px; }
 		.preview-tr .print-tr-level .tr-level { display: inline-block; width: 100%; }
 		.preview-tr .print-tr-level .tr-level .contents { top: 13px; }
 		.preview-tr .print-tr-level .tr-level .contents > div { height: 43px; }
		.preview-tr .print-tr-level .tr-level .contents .double > .bottom { border-color: #000; }
 		.preview-tr .print-tr-level .highlight { font-weight: bold;}
 		.preview-tr .print-tr-level .separator { width: 30px; }

 		.preview-tr .print-notes { border-top: 1px solid #000; }
 		.preview-tr .print-notes > .headline { font-size: 150%; margin-top: 10px; }
 		.preview-tr .print-notes > .print-box .headline { font-size: 120%; text-align: left; border-bottom: 1px solid #54493A;
 			font-style: italic; padding: 3px 5px; }
 		.preview-tr .print-notes > .print-box { margin: 10px 0; }
 		.preview-tr .print-notes > .print-box .note { padding: 5px; }
 		.preview-tr .print-notes > .print-box .note:not(:last-child) { border-bottom: 1px solid #54493A; }

 		.preview-tr .print-notes > .print-box .note-text .text { text-align: left; }
 		.preview-tr .print-notes > .print-box .note-text .name-box { margin-top: 3px; font-style: italic; }
		.preview-tr .print-notes > .print-box .note-text .times-number { width: 55px; text-align: right; }
		.preview-tr .print-notes > .print-box .note-text .repair-box { width: 180px; padding-left: 5px; }
		.preview-tr .print-notes > .print-box .note-text .repair-box .small { font-size: 90%; }
		.preview-tr .print-notes > .print-box .note-text .indicator { display: inline-block; padding: 2px 5px 1px; width: 100%;
		 	font-size: 105%; color: #6E6457; border-radius: 5px; border: 1px solid #A89377; font-style: italic; text-align: center; }

		.preview-tr .note-images { padding: 5px 0; border-top: 1px dashed #aaa; margin-top: 5px; }
		.preview-tr .note-images .image-floater { width: 32%; display: inline-block; vertical-align: middle; padding: 5px 10px 0; }
		.preview-tr .note-images .image-floater img { width: auto; height: auto; max-width: 100%; max-height: 170px; padding-bottom: 5px; }

/*			.preview-tr .pairer { display: table; width: 100%; } 
			.preview-tr .sub-pair { display: table-cell; width: 50%; vertical-align: top; height: 100%;} 
			.preview-tr .note { height: 100%; } 
			.preview-tr .pairer:not(:last-child) .sub-pair { border-bottom: 1px solid #54493A; }
			.preview-tr .pairer .sub-pair:not(.even) { border-left: 1px solid #54493A; }
*/
 		#print-preview i { padding-right: 8px; }
 		#close-preview i { padding-right: 8px; }


		body.print-colors { -webkit-print-color-adjust:exact; print-color-adjust: exact; }
		/* TOIMII VAA CHROMELLA */
		@media print {
			#popup.on { background: none !important; }
    		.box, .big-box { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
    		#popup .container { vertical-align: top; }
			#popup .preview-tr { padding: 10px 0; }
    		#popup .buttons { display: none; }

	 		#popup .preview-tr .logo img { width: auto; height: auto; max-width: 200px; max-height: 200px; }
			#popup .preview-tr .logo span { margin-top: 15px; font-size: 160%; }
	 		
    	}


/* - - TR - - */

 /* TR */

	#popup .asker { position: relative; display: inline-block; border: 1px solid; padding: 10px 15px; }
	#popup .asker span, #popup .ask-name input { display: inline-block; width: 100%; text-align: center; margin: 5px 0; }
	#popup .asker span { font-style: italic; }
	#popup .ask-name span { font-size: 110%; }
	#popup .asker input { border-radius: 4px; background-color: #ddd; border: 1px solid #aaa; padding: 2px 5px 3px; font-size: 120%; margin-bottom: 10px; }


  /* TR HELP */
	#popup .help-box { position: relative; display: inline-block; width: 95%; border: 1px solid #ccc; background-color: #999; }
	/*.main-box.open, .main-box.closed:hover { background-color: #9D7F57; border-color: #6E532F; }
	.main-box.closed, .site-link { background-color: #886535; border-color: #594221; }*/
	#popup .help-points { padding: 10px 15px 15px; }
	#popup .help-point { position: relative; display: block; }
	#popup .help-point .headlines { color: #222; font-size: 125%; letter-spacing: .4px; }
	#popup .help-point .container { display: table; overflow: hidden; padding: 5px; width: 100%;
		background-color: #ddd; border: 1px solid #777; text-align: left; }
	#popup .help-point .container > ul { display: table-cell; padding: 5px 10px 10px; }
	#popup .help-point .container > ul h3 { padding: 10px 5px 5px; margin: 0; }
	#popup .help-point .container > ul li { display: inline-block; width: 100%; padding: 5px 0; vertical-align: top; }
	/* #popup .help-point .container > ul li > h3 { margin: 15px 0 10px; } */
	#popup .help-point .container > ul li.mini-point { padding-left: 10px; padding-right: 5px; }
	#popup .help-point .container > ul li.mini-point .text { margin: 2px 0; font-style: italic; }

	#popup .help-box button { margin: 0 5px 15px; height: 35px; }
	#popup .help-box button i { font-size: 125%; }
	#popup .help-box button#back { width: 35px; padding: 0; }
	#popup .help-box button#back i { position: relative; left: -2px; }
	#popup .help-box button#close i { margin-right: 8px; font-size: 140%; }
	#popup .help-box button#close span { position: relative; top: -2px; }
	/*	#popup .help-box button#back i { position: relative; top: -2px; } */

	@media screen and (max-width : 999px) {
		#popup .help-point .container > ul { display: table-row; }
	 }

  /* TR OVERRIDES */
	#new-tr .sub-link:last-child { margin-bottom: 10px; }
	#new-tr .sub-link.open .info { font-size: 85%; color: #aaa; }
	#new-tr .sub-link.open h3.point-headline .text { padding-right: 80px; }


  /* TR BASICS */
	.blocks { position: relative; width: 100%; padding: 10px; padding-top: 5px; }
	.checkpoint .blocks > div { position: relative; display: inline-block; margin: 5px 0; padding: 5px;
		width: calc(50% - 33px); border-style: solid; border-width: 1px; }
	.checkpoint .blocks .help { width: 45px; float: right; padding: 0; }
	.checkpoint .blocks .help button { width: 100%; height: 45px; border: none; color: #bbb; font-size: 120%; }
	.checkpoint .blocks .button, .checkpoint .blocks .notes { font-size: 18px; }
	.checkpoint .blocks .rights { float: left; }
	.checkpoint .blocks .wrongs { float: left; margin-left: 11px; }
	.checkpoint .blocks .notes { width: 100%; background-color: #ccc; border-color: #333; padding: 0; overflow: hidden; }
	.checkpoint .blocks .notes.open { background-color: #777; color: #fff; }

  /* WRONG, RIGHT AND COMMENT BUTTONS */
	.checkpoint .button { position: relative; vertical-align: top; height: 35px; padding: 0; margin: 0; font-weight: bold; }
	.checkpoint .button .text,
	.checkpoint .notes .click.text { text-align: center; font-weight: bold; font-style: italic; font-size: 20px;
		padding: 8px 0 6px; color: #fff; }
	.checkpoint .notes > .click.text { background-color: #777; }
	.checkpoint .choice > .button .text { padding: 0 10px; width: 100%; display: block; }
	.checkpoint .choice > .button .number { position: absolute; right: 7px; }
	.checkpoint .choice > .button i,
	.checkpoint .click.text i { position: absolute; left: 5px; font-size: 110%; }
	.checkpoint .click.text i { left: 7px; margin-top: -2px; }
	.checkpoint .rights button.plus { width: calc(100% - 40px); float: right; }
	.checkpoint .rights button.minus { width: 35px; float: left; }
	.checkpoint .rights button.minus span { position: relative; top: -3px; font-size: 150%; font-style: normal; }
	.checkpoint .wrongs button { width: 100%; }
	.checkpoint .wrongs i.fa-exclamation { left: 10px; margin-top: 1px; }

  /* NOTES */
	.checkpoint .collapse-note { color: #333; }
	.checkpoint .collapse-note > ul { font-size: 0; } 
	.checkpoint .collapse-note li.note { width: 100%; border-bottom: 2px solid #555; display: block; padding: 0px; }
	.checkpoint .collapse-note li.note:nth-child(2n+1) { background-color: #ccc; }
	.checkpoint .collapse-note li.note:nth-child(2n) { background-color: #aaa; }
	.checkpoint .collapse-note li.note:first-child { border-top: 2px solid #555; }

	.checkpoint .collapse-note li.add-new { padding: 5px; margin: 5px 0; }
	.checkpoint .collapse-note li.add-new button { width: 100%; font-style: italic; }
	.checkpoint .collapse-note li.add-new button i { position: relative; left: -2px; }
	.checkpoint .collapse-note li .container { display: table; width: 100%; border-spacing: 5px; }
	.checkpoint .collapse-note li .container > div { display: table-cell; vertical-align: middle; position: relative; }
	.checkpoint .collapse-note li .container > .util { width: 263px; }
/*	.checkpoint .collapse-note li .container > .text { position: relative; min-height: 47px; height: 100%; }
*/
	.checkpoint .collapse-note li .text textarea { position: relative; width: 100%; min-height: 77px; margin: 0; padding: 4px 7px;
		border: 1px solid #555; border-radius: 4px; background-color: #ddd; resize: vertical; font-size: 18px; }
	.checkpoint .collapse-note li .text textarea:focus { background-color: #fff; }

	.checkpoint .collapse-note li .util > div { display: inline-block; vertical-align: middle; }
	.checkpoint .collapse-note li .util > div:not(.name-put) { height: 47px; background-color: #ccc; border: 1px solid #777; padding: 5px; }
	.checkpoint .collapse-note li .util > div.name-put { width: 100%; margin-top: 3px; }
	.checkpoint .collapse-note li .util > div.name-put input { position: relative; width: 100%; height: 27px; margin: 0; padding: 4px 7px;
		border: 1px solid #555; border-radius: 4px; background-color: #ddd; font-size: 18px; }



	.checkpoint .util .times { width: 110px; text-align: center; font-style: italic; font-weight: bold;
		font-size: 120%; color: #555; overflow: hidden; margin-right: 6px; }
	.checkpoint .util .times button.minus { width: 25px; height: 80%; margin-top: -1px; vertical-align: middle; }
	.checkpoint .util .times button.minus span { position: relative; top: -2px; font-size: 120%; }
	.checkpoint .util .times button.plus { width: 65px; vertical-align: middle; }
	.checkpoint .util .times button.plus .times-number { display: inline-block; vertical-align: middle; }
	.checkpoint .util .times button.plus .times-number .note-x {  }
	.checkpoint .collapse-note li.note .util button:not(:last-child),
	.checkpoint .collapse-note li.note .util .button-container:not(:last-child) { margin-right: 6px; }
	
	.checkpoint .add-new i.fa-plus { margin-right: 3px; }

	@media screen and (min-width : 1200px) { 
		.checkpoint .collapse-note textarea { resize: none !important; height: 77px !important; }
		.checkpoint .collapse-note li.note { width: 50%; display: inline-block; vertical-align: middle; }
		.checkpoint .collapse-note li.note:nth-child(2) { border-top: 2px solid #555; }
		.checkpoint .collapse-note li.note:nth-child(2n) { border-left: 2px solid #555; }
		.checkpoint .collapse-note li.note:nth-last-child(3):nth-child(2n+1) { width: 100%; } /* TÄÄ KUSEE JOS VAA KAKS */
		.checkpoint .collapse-note li.note:nth-child(4n+3) { background-color: #aaa; }
		.checkpoint .collapse-note li.note:nth-child(4n+4) { background-color: #ccc; }
	}

	@media screen and (min-width : 550px) { 
		.checkpoint .util .times button.plus { height: 100%; } }
	/* RESPONSIVE */
	@media screen and (max-width : 549px) { 
		.checkpoint .blocks > div { width: 100%; }
		.checkpoint .blocks > .wrongs { margin-left: 0; width: calc(100% - 55px); }
		.checkpoint .collapse-note li .container { border-spacing: 5px; }
		.checkpoint .collapse-note li .container > div { display: table-row; width: 100%; padding: 5px; }
		.checkpoint .collapse-note li .container .util .times { width: calc(100% - 151px); }
		.checkpoint .util .times button.minus { width: calc(30% - 6px); }
		.checkpoint .util .times button.plus { width: 70%;  }
	}

	@media screen and (max-width : 309px) { 
		.checkpoint .collapse-note li .container .util > div { width: 100%; height: 47px; }
		.checkpoint .collapse-note li .container .util .times { width: 100%; margin-right: 0; margin-bottom: 5px; }

	}

	/* OLD NOTES */
	.checkpoint .old-notes-container { padding: 0 5px; margin-bottom: 10px; }
	.checkpoint .old-notes-container .box { overflow: hidden; position: relative; border: 1px solid #333; }
	.checkpoint .old-notes-container .old-notes { font-size: 0; }
	.checkpoint .old-notes-container .click.text { color: #fff; background-color: #333; font-size: 18px; }
	.checkpoint .old-note { width: 100%; padding: 5px; background-color: #555; border-top: 1px solid #333; font-size: 18px; }
	.checkpoint .old-note:nth-child(2n+1) { background-color: #444; }
	.checkpoint .old-note > div { display: inline-block; vertical-align: middle; }
	.checkpoint .old-note .text { color: #fff; text-align: left; padding: 5px; padding-right: 10px; width: calc(100% - 140px);}
	.checkpoint .old-note div.add-old { width: 135px; }
	.checkpoint .old-note .add-old button { font-size: 90%; height: 30px; font-style: italic; }
	.checkpoint .old-note .add-old button.add-old {  width: 100px; }
	.checkpoint .old-note .add-old button.remove-old { color: #666; width: 30px; }
	.checkpoint .old-note .add-old button span { position: relative; top: -2px; }
	.checkpoint .old-note .add-old button i { font-size: 120%; }
 	.checkpoint .old-note .add-old button i.fa-plus { margin-right: 3px; margin-top: 4px; }
 	.checkpoint .old-note .add-old button i.fa-remove { margin-left: 2px; margin-top: 2px; font-size: 130%; }

	@media screen and (max-width : 499px) { 
		.checkpoint .old-note { padding: 1px; }
		.checkpoint .old-note:nth-child(2n) { background-color: #666; }
		#main .checkpoint .old-note > div { display: block; width: 100%; }
		.checkpoint .old-note .text { text-align: center; }
		.checkpoint .old-note div.add-old { padding: 5px 0 5px; }
		.checkpoint .old-note .add-old button.add-old { width: 80%; }
		.checkpoint .old-note .add-old button.remove-old { width: calc(20% - 10px); }
	}

	@media screen and (min-width : 1200px) { 
		.checkpoint li.old-note { position: relative; }
		.checkpoint li.old-note .text { width: 100%; overflow: auto; height: 50px; padding-right: 135px; }
		.checkpoint li.old-note div.add-old { position: absolute; right: 17px; top: 50%; margin-top: -15px; }
		.checkpoint li.old-note div.add-old button.add-old { width: 80px; }

		.checkpoint li.old-note { width: 50%; display: inline-block; vertical-align: middle; }
		.checkpoint li.old-note:last-child:nth-child(2n+1) { width: 100%; } /* TÄÄ KUSEE JOS VAA KAKS */
		.checkpoint li.old-note:nth-child(4n+3) { background-color: #555; }
		.checkpoint li.old-note:nth-child(4n+4) { background-color: #444; }
	}






    /* IMAGES */	
	.checkpoint .util .empty-height { height: 100%; width: 0px; display: inline-block; vertical-align: middle; }
	.checkpoint .util .images { text-align: center; width: 145px; }
	.checkpoint .util .button-container { display: inline-block; width: 50px; height: 35px; vertical-align: middle;
		border: 1px solid #333; border-radius: 4px; overflow: hidden; }
	.checkpoint .util .button-container button { width: 100%; height: 100%; text-align: center; border: none; }
	.checkpoint .util .button-container button i { position: relative; top: 0px; font-size: 160%; }
	.checkpoint .util .button-container button i.small-corner { font-size: 70%; position: absolute; top: 2px; right: 2px; }
	.checkpoint .util .button-container button i.big-corner { font-size: 150%; margin-left: -7px; top: 1px; }
	.checkpoint .util .button-container button i.fa-camera { font-size: 142%; margin-left: -9px; top: 2px; }

	.checkpoint .util .button-container.gallery { width: 75px; }
	.checkpoint .util .button-container.gallery .times-number { display: inline-block; vertical-align: middle; color: #ccc; font-size: 90%; }
	.checkpoint .util .button-container.gallery i { display: inline-block; vertical-align: middle; }
	.checkpoint .util .button-container.gallery:not(.zero) i { font-size: 140%; }
	.checkpoint .util .button-container.gallery.zero { border-color: #777; }
	.checkpoint .util .button-container.gallery.zero .button { cursor: default; background-color: #999; color: #ccc; }
	.checkpoint .util .button-container.gallery.zero .button:hover { 
					-webkit-box-shadow: inset 0px 20px 40px -20px rgba(255,255,255,0.25);
					-moz-box-shadow: inset 0px 20px 40px -20px rgba(255,255,255,0.25);
					box-shadow: inset 0px 20px 40px -20px rgba(255,255,255,0.25); }
	.checkpoint .util .button-container.gallery.zero .times-number { display: none; }



 /* - - IMAGE POPUP - - */ 

	/* TAKE IMAGE POPUP */

	#popup .image-canvas { position: relative; display: inline-block; }
	#popup .image-canvas .main-image { width: 90vw; height: 67.5vw; background-color: #111; border: 1px solid #aaa;
		max-width: calc((100vh - 180px) * 4/3); max-height: calc(100vh - 180px); }
	#popup .image-canvas video { position: relative; }
	#popup .image-canvas canvas { position: absolute; top: 0; left: 50%; background-color: #111;
		transform: translateX(-50%); -webkit-transform: translateX(-50%); }
	#popup .image-canvas canvas { cursor: pointer; }

	#popup .image-free { position: relative; display: inline-block; }
	#popup .image-free img { border: 1px solid #aaa; width: auto; height: auto; max-width: 90vw; max-height: calc(100vh - 180px); }
	#popup .image-free img.anim { transition: transform .2s; -webkit-transition: -webkit-transform .2s; }
	
	#popup .image-caption { position: relative; width: 100%; }

	#popup .ok-msg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; overflow: hidden; }
	#popup .ok-msg .centerer { position: relative; display: table; height: 100%; width: 100%; }
	#popup .ok-msg span { display: table-cell; width: 100%; height: 100%; font-size: 200%; font-style: italic; vertical-align: middle; }


	/* GALLERY POPUP */

	.image-gallery { text-align: center; margin-top: 10px; transition: margin .2s; -webkit-transition: margin .2s; }
	.enlargen-father .image-gallery { margin-top: 0px; }
	#popup .image-gallery .image-floater { position: relative; display: inline-block; width: 150px; height: 190px; margin: 4px; }
	#popup .image-gallery .image-floater:not(.enlargen) { overflow: hidden; }
	.image-gallery .image-container { position: relative; width: 100%; height: calc(100% - 40px);
		border-radius: 4px; background-size: cover; background-position: center; cursor: pointer;
		transition: opacity .2s, border .2s; -webkit-transition: opacity .2s, border .2s; }
	.image-gallery .image-container .overlay { opacity: 0; background-color: #aaa; border: 1px solid #fff; border-radius: 4px; }
	.image-gallery .image-container:hover .overlay { opacity: .75; }
	.image-gallery .image-container .overlay i { font-size: 450%; color: #fff; }
	#popup .image-gallery .image-floater.enlargen { width: auto; height: auto; border-radius: 0; border: none; } 
	#popup .image-gallery .image-floater.enlargen .overlay { display: none; } 
	#popup .image-gallery .image-floater.enlargen img { width: auto; height: auto; max-width: 90vw; max-height: calc(100vh - 180px);
		border: 1px solid #aaa; cursor: pointer; image-orientation: 90deg; }
	#popup .image-gallery .image-floater.transition img { transition: all .3s; -webkit-transition: all .3s; }
	#popup .image-gallery .image-floater:not(.enlargen) { transition: width .2s, opacity .2s; -webkit-transition: width .2s, opacity .2s; }
	#popup .image-gallery .image-floater.slow { transition: width .2s, opacity .7s; -webkit-transition: width .2s, opacity .7s; }

	#popup .image-gallery .image-floater .image-small-title { color: #ccc; font-style: italic; margin: 5px 0; }
	#popup .image-gallery .image-floater.enlargen .image-small-title { margin: 15px 0 0; font-size: 110%; }


	#popup .image-buttons #remove-image { display: none; }
	#popup .image-gallery input.small-title-input { display: none; }

	#popup .image-gallery.editable .image-floater.enlargen .image-small-title { display: none; }
	#popup .image-gallery.editable .image-floater.enlargen input.small-title-input { display: block; }
	#popup .enlargen-father .image-buttons.editable #remove-image { display: inline-block; }
	

	/* IMAGE POPUP COMMON */

	#popup .image-buttons { margin-top: 10px; }
	#popup .image-buttons button.primary { padding: 2px 14px; height: 40px; margin: 7px; }
	#popup .image-buttons button.primary span { position: relative; top: -1px; }
	#popup .image-buttons button { padding: 0px 10px; height: 33px; margin: 7px; }
	#popup .image-buttons button i { position: relative; vertical-align: middle; font-size: 135%; margin-right: 9px; top: 2px; }
	#popup .image-buttons button span { vertical-align: middle; }

	#popup .image-buttons button i.fa-remove { margin-top: -4px; }
	#popup .image-buttons button i.fa-camera { margin-top: -2px; font-size: 120%; }
	#popup .image-buttons button i.fa-chevron-left { top: 1px; left: -1px; font-size: 110%;
			transition: transform .2s; -webkit-transition: -webkit-transform .2s; }
	#popup .image-buttons button i.fa-chevron-left.fa-rotate-90 { top: -1px; left: -4px; }
	#popup .image-buttons button.only-icon i { margin: 0; top: 0; font-size: 120%; }

	#popup .image-title { position: relative; display: inline-block; overflow: hidden; max-width: 90vw; width: 100%;
		white-space: nowrap; text-align: center; margin-bottom: 15px; }
	#popup .image-title span { color: #fff; font-style: italic; font-size: 130%; }

	#popup input.small-title-input { position: relative; width: 100%; margin: 15px 0 0; text-align: center; 
		border-radius: 5px; background-color: #111; height: 28px; max-width: 90vw; display: block;
		color: #ccc; font-style: italic; border: none; border-bottom: 1px solid #aaa; font-size: 100%; }


	/* COMPILED RESPONSIVE */
	@media screen and (max-width : 699px) { 
		#popup .image-title { margin-bottom: 10px; }
		#popup .image-title span { font-size: 115%; }
		#popup .image-caption input { font-size: 100%; }
		#popup .image-buttons button.primary { font-size: 105%; margin: 5px; height: 33px; }
		#popup .image-buttons button { font-size: 90%; margin: 5px; height: 27px; }
		#popup .image-buttons button i { top: 1px; } }

	/* POPUP SLIDE */
	#popup .enlargen-father .image-gallery { white-space: nowrap; }
	#popup .neighbour { position: absolute !important; /* width: 90vw !important; height: calc(100vh - 180px) !important; */ }
	#popup .neighbour.next { left: 100vw; }
	#popup .neighbour.prev { right: 100vw; }
	#popup .enlargen > div { background: none !important; }
	#popup .image-gallery img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }



	input.backlight { transition: background-color .2s; -webkit-transition: background-color .2s; }
	input.backlight:focus { background-color: #444 !important; }

	.gravity { transition: transform .2s !important; -webkit-transition: transform .2s !important; }




/* LINE-CHART */

	.line-chart-container { background-color: #aaa; border: 1px solid #777; margin-bottom: 10px; padding: 10px; }
	.line-chart-container #line-chart { width: 100%; }
	#line-info-box { width: auto; height: auto; overflow-y: auto; }
	#line-info-box, .line-chart-container { position: relative; display: inline-block; vertical-align: middle; margin: 5px 5px 15px; }
	#line-info-box > ul { -moz-column-gap: 0; -webkit-column-gap: 0; column-gap: 0; }

	.line-chart-container .specials { border-top: 1px solid #666; padding: 7px 3px 0; margin-top: 7px; display: table; width: 100%; }
	.line-chart-container .specials .tr-container { display: table-cell; font-size: 95%; font-style: italic; }
	.line-chart-container .specials .tr-container:first-child { text-align: left; width: 150px; }
	.line-chart-container .specials .tr-container:last-child { text-align: right; width: 240px; }
	.line-chart-container .specials .tr-container > div { display: inline-block; }
	.line-chart-container .specials .highlight { color: #333; font-weight: bold; }

	.info-box { position: relative; display: inline-block; color: #aaa; background-color: #333; border: 1px solid #aaa;
		font-size: 100%; padding-bottom: 7px; }
	.info-box .highlight { color: #fff; font-weight: bold; }
	.info-box .highlight.red-text { color: #D08594; }
	.info-box > ul, .info-box > div { height: auto; padding: 5px;}
	.info-box .tr-container { display: inline-block; width: 315px; }
	.info-box .tr-container > div { padding: 3px 0; display: inline-block; }
	.info-box .tr-container .index { width: 85px; text-align: left; }
	.info-box .tr-container .level { width: 55px; text-align: center; }
	.info-box .tr-container .date { width: 144px; text-align: right; font-style: italic; }
	.info-box .tr-container .small { font-size: 92%; }
	.info-box .small-headline { font-size: 135%; margin: 15px 0 7px; font-weight: normal; }

	@media screen and (min-width : 1300px) {
		#line-info-box { width: 340px; max-height: 450px; }
		#line-info-box > ul { -webkit-column-count: 1; -webkit-column-count: 1; column-count: 1; }
	}
	@media screen and (max-width : 1299px) {
		#line-info-box { width: 950px; }
		#line-info-box .tr-container { padding: 0 10px; }
		#line-info-box > ul { -webkit-column-count: 3; -webkit-column-count: 3; column-count: 3; }
	}
	@media screen and (max-width : 1059px) {
		#line-info-box { width: 655px; }
		#line-info-box > ul { -webkit-column-count: 2; -webkit-column-count: 2; column-count: 2; }
	}
	@media screen and (max-width : 749px) {
		#main .line-chart-container .specials .tr-container { display: table-row; text-align: center; }
		#main .line-chart-container .specials .tr-container > div { padding: 3px; }
		#line-info-box { width: 340px; max-height: 330px; }
		#line-info-box > ul { -webkit-column-count: 1; -webkit-column-count: 1; column-count: 1; }
	}
	@media screen and (max-width : 399px) {
		#line-info-box { width: 100%; max-height: 250px; }
		#line-info-box .tr-container { width: 100%; }
		#line-info-box { font-size: 3.5vw; }
		#line-info-box .tr-container > div { width: auto; padding: 3px 1px; }
	}
	.only-print { display: none !important; }
	@media print {
		body { margin: 0; }
		.yes-print { display: block !important; }
		.only-print { display: inline-block !important; }
		.no-print { display: none !important; }
		.end-link { display: none !important; }

		#main > img { margin: 10px 0; }
		#main > h3 { font-size: 28px; }
		#main h3 { color: #000 !important; margin: 10px; padding: 0; }
		#check-chart .line-chart-container { margin: 5px 0; border: none; }
		#check-chart .line-chart-container .specials .tr-container { font-size: 105%; }
		#check-chart .buttons { display: none; }
		#check-chart { background-color: #fff; border: none; padding: 0; margin: 0; font-size: 80%; }
		#check-chart .small-headline { font-size: 22px; color: #000; }
		
		#line-info-box { max-height: none; border: none; }
		#line-info-box > ul { -moz-column-gap: 0; -webkit-column-gap: 0; column-gap: 0;  -webkit-column-count: 2; -webkit-column-count: 2; column-count: 2; }
		.info-box .tr-container { width: 300px; }
		.info-box .tr-container:last-child:nth-child(2n+1) > div { position: relative; left: -152px; }
		.info-box .tr-container .index { width: 77px; }
		.info-box .tr-container .level { width: 45px; }
		.info-box .tr-container .date { width: 115px; }
		#check-chart .highlight { color: #000; }
		#check-chart .specials { border-top: 1px dashed #888; }
	}

/* ADMIN */

	#login > div:not(.update-info) { margin: 10px 0; }
	#login .lefter { text-align: left; }
	#login span.text { width: auto; width: 140px; text-align: right; font-size: 110%; }
	#login input.text { margin: 5px 10px; }
	#login button#login-save { top: -22px; }
	#login button { margin: 5px 10px; }
	#login #open-admin { margin-top: 10px; }
	@media screen and (max-width : 649px) { #login span.text, #login button, #login input.text { width: 100%; text-align: center; margin-left: 0; }
		#login button#login-save { top: 5px; } }


	#admin-content .box-headline i.fa-question { left: 14px; }
	#admin-content .main-box.open, #admin-content .main-box.closed:hover { background-color: #777; border-color: #555; }
	#admin-content .main-box.closed { background-color: #666; border-color: #444; }
	#admin-sites .sub-link > h3 > i { position: absolute; left: 9px; font-size: 125%; margin-top: -1.5px; }
/*	#admin-links .sub-link > h3 > i.fa-remove { left: 10px; }
	#admin-links .sub-link > h3 > i.fa-question { left: 12px; }
*/
	#admin-sites .live-content { font-size: 17px; }
	#admin-sites .edit { display: block; margin-bottom: 10px; color: #ccc; font-size: 105%; }
	#admin-sites .edit > span { width: 160px; display: inline-block; text-align: right; font-style: italic; padding-right: 10px; }
	#admin-sites input.text { background-color: #222; border: none; border-bottom: 1px solid #aaa; border-radius: 3px;
			padding: 5px; width: 250px; height: 30px; font-size: 105%; color: #fff; width: 370px; }
	
	#admin-sites .sub-link .buttons-container { position: relative; margin: 15px 0px 10px; padding: 0 40px; }
	#admin-sites .sub-link .buttons-container button { margin: 7px 5px; }
	#admin-sites .sub-link .buttons-container button span { position: relative; top: -1px; }
	#admin-sites .sub-link button.display-site.hidden span.site-displayed { display: none; }
	#admin-sites .sub-link button.display-site:not(.hidden) span.site-hidden { display: none; }
	#admin-sites .sub-link .buttons-container button i { font-size: 125%; margin-right: 5px; position: relative; }
	
	#admin-sites .sub-link .buttons-container > i { position: absolute; top: 50%; color: #ccc; font-size: 220%; margin: -18px 5px 0; cursor: pointer; }
	#admin-sites .sub-link .buttons-container > i:hover { color: #fff; font-size: 230%; }
	#admin-sites .sub-link .buttons-container > i.move-up { left: -5px; }
	#admin-sites .sub-link .buttons-container > i.move-down { right: -5px; }
	#admin-sites .sub-link:nth-child(2) .buttons-container > i.move-up { opacity: 0; cursor: default; }
	#admin-sites .sub-link:last-child .buttons-container > i.move-down { opacity: 0; cursor: default; }

	#popup .small-links { padding: 5px; }
	#popup .small-link, #popup .small-link > h3 > div { display: inline-block; }
	#popup .small-link { position: relative; width: 220px; margin: 7px; vertical-align: middle; }
	#popup .small-link > h3 { margin: 5px 0; }
	#popup .small-link > h3 .main { width: 100%; }
	#popup .small-link > h3 .info { margin-top: 5px; }
	#popup .small-link > h3 .info.left { float: left; margin-left: 10px; }
	#popup .small-link > h3 .info.right { float: right; margin-right: 10px; }
	#popup .buttons-container button { margin: 10px; }

	@media screen and (max-width : 649px) {
		#admin-sites span.text { width: 100%; margin: 5px 0; text-align: center; }
		#admin-sites input.text { width: 100%; }
	}

	/* ADMIN HELP */
	#admin-help-box .modify-helps { font-size: 0; padding-bottom: 10px; }
	#admin-help-box .modify-help { font-size: 22px; padding: 5px; width: 50%; display: inline-block; vertical-align: top; }
/*	#admin-help-box .modify-help { font-size: 22px; padding: 10px 5px; }
*/	#admin-help-box .small-headline { color: #fff; font-style: italic; font-size: 90%; margin-bottom: 5px; display: inline-block; }
	
	#admin-help-box input, #admin-help-box button, #admin-help-box .movers { height: 47px; }
	#admin-help-box .modify-boxes { font-size: 0; }
	#admin-help-box .modify-box { display: inline-block; position: relative; width: 100%; padding: 4px 7px; }
	#admin-help-box textarea, #admin-help-box input { position: relative; margin: 0; padding: 2px 7px;
		border: 1px solid #555; border-radius: 4px; background-color: #ddd; display: inline-block; vertical-align: middle; }
	#admin-help-box input { width: 100%; text-align: center; font-size: 19px; font-weight: bold; }
	#admin-help-box textarea { min-height: 47px; resize: vertical; width: calc(100% - 93px); font-size: 17px; margin: 0 10px; }
	#admin-help-box textarea:focus { background-color: #fff; }
	#admin-help-box button { font-size: 24px; width: 47px; }
	#admin-help-box button.add { margin: 0 4px; left: -5px; }

	#admin-help-box li.modify-box:last-child textarea { width: calc(100% - 148px); }

	@media screen and (max-width : 999px) { #admin-help-box .modify-help { width: 100%; } }

	#admin-help-box .movers { position: relative; width: 23px; }
	#admin-help-box button.help { position: relative; font-size: 21px; cursor: pointer; color: #ccc; border: 1px solid #3a3a3a;
		width: 21px; height: 23px; display: inline-block; overflow: hidden; }
	#admin-help-box button.help:hover { color: #fff; }
	#admin-help-box button.help i { position: relative; left: -10px; top: -6px; }
	#admin-help-box button.move-down { margin-top: 1px; }
	#admin-help-box .modify-box > div, #admin-help-box .modify-box > textarea, #admin-help-box .modify-box > button
	 { display: inline-block; vertical-align: middle; }
	#admin-help-box .modify-box:first-child .move-up,
	#admin-help-box .modify-box:last-child .move-down { opacity: 0; cursor: default; }
	#admin-help-box .modify-box:first-child:last-child .movers { display: none; }
	#admin-help-box .modify-box:first-child:last-child textarea { width: calc(100% - 112px); margin-left: 0; }

	

	/* UPDATE INFO */
	.update-info { z-index: 5; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 5px;
		font-style: italic; font-weight: bold; margin: auto; }
	.update-info span { position: absolute; top: 50%; left: 50%; margin-top: -15px; font-size: 30px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }



    #chartjs-tooltip {
        opacity: 1;
        position: absolute;
        background: rgba(0, 0, 0, .7);
        color: white;
        padding: 3px;
        border-radius: 3px;
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        pointer-events: none;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
   	.chartjs-tooltip-name { display: block; text-align: left; margin-bottom: 3px; font-weight: bold; }
   	.chartjs-tooltip-key {
   		display:inline-block;
   		width:10px;
   		height:10px;
   	}
