@charset "UTF-8";
/* CSS Document */

			form[name="search"] {
				font-size: 0;
				line-height: 0;
				margin: 0;
				padding: 0;
			}
			form[name="search"] input[type="text"] {
				display: inline-block;
				width: calc(100% - 180px);
				border-radius: 25px;
				border: 1px solid #00457F;
				padding: 0px 15px 0px 35px;
				margin: 0 10px 0 0;
				font-family: metro;
				font-size: 1.5rem;
				line-height: 40px;
				font-weight: bold;
				outline: none;
				background-image: url(../../images/form/magnifier-large.png);
				background-size: 20px 20px;
				background-repeat: no-repeat;
				background-position: 8px 10px;
			}
			form[name="search"] a.remove-text {
				display: inline-block;
				position: absolute;
				width: 20px;
				height: 20px;
				margin: 10px 0 0 -40px;
				padding: 0;
				border-radius: 20px;
				overflow: hidden;
				background-color: black;
				color: white;
				text-align: center;
				font-family: metro;
				font-size: 20px;
				line-height: 18px;
				font-weight: bold;
				text-decoration: none;
				border: none;
				opacity: 0.25;
			}
			form[name="search"] a.remove-text:hover {
				opacity: 0.5;
			}
			form[name="search"] input[type="text"]:placeholder-shown ~ a.remove-text { visibility: hidden; }

			
			form[name="search"] button {
				display: inline-block;
				appearance:none;
				border:none;
				background-color: #00457F;
				color: white;
				border-radius: 25px;
				padding: 0px 15px 0px 15px;
				margin: 0 0 0 0;
				text-align: center;
				width: 118px;
				font-family: metro;
				font-size: 1.5rem;
				line-height: 40px;
				font-weight: bold;
				text-transform: uppercase;
				outline: none;
			}
			
			a.close-upload-area {
				display: block;
				position: fixed;
				z-index: 99999;
				top: 15px;
				right: 15px;
				width: 30px;
				height: 30px;
				border-radius: 30px;				
				background-color: black;
				color: white;
				text-decoration: none;
				text-align: center;
				font-family: Arial;
				font-weight: bold;
				font-size: 20px;
				line-height: 30px;
				opacity: 0.3;
			}
			a.close-upload-area:before { content:"×"; }
			a.close-upload-area:hover { text-decoration: none; opacity: 1; }
			
			/* states */
			#upload_helper        a.close-upload-area { display: none; }
			#upload_helper.active a.close-upload-area { display: block; }
			
			
			/*				*/
			/*   FOLDERS    */
			/*				*/
			
			ul.folders {
				display: block;
				margin: 15px 0 15px 0;
				padding: 0;
				list-style: none;
				font-size: 0;
				line-height: 0;
			}
			ul.folders * {
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-o-user-select: none;
				user-select: none;
			}
			
			ul.folders li.folder {
				display: block;
				position: relative;
				list-style: none;
				font-size: 0;
				line-height: 0;
				margin: 0;
				padding: 3px 0 1px 0;
				border: none;
				border-bottom: 1px solid #CCC;
			}
			ul.folders li.folder:first-child { border-top: 1px solid #CCC;}

			/* TOGGLE BUTTON */

			ul.folders li.folder > a.toggle {
				display: block;
				position: relative;
				width: 100%;
				height: 40px;
				margin: 0 0 -40px 0;
				text-decoration: none;
				border-radius: 4px;
			}
			ul.folders li.folder > a.toggle:hover {
				background-color: hsla(207,100%,25%,0.1);
				background-color: hsla(216,100%,72%,0.3);
			}
			@media screen and (min-width: 0px) and (max-width: 699px) {	
				ul.folders li.folder > a.toggle:hover { background-color: transparent; }
			}
			
			ul.folders li.folder > a.toggle > i {
				display: block;
				float: right;
				font-size: 20px;
				line-height: 40px;
				text-align: center;
				color:#0064fe;
			}
			ul.folders li.folder                  > a.toggle > i:before { content:"\eba8"; }
			ul.folders li.folder[data-opened="1"] > a.toggle > i:before { content:"\eba2"; }


			/* ADMIN EDIT BUTTON */

			ul.folders li.folder > .admin {
				display: block;
				position: relative;
				float: right;
				top: 0px;
				left: -15px;
				width: 20px;
				height:40px;
				border-radius: 4px;
				margin: 0 0 -40px 0;
				text-decoration: none;
				background-color: hsla(216,100%,72%,0.0);
				color: #0064fe;
			}
			html[data-browser="Chrome"] ul.folders li.folder > .admin { left:0; }
			
			@media screen and (min-width: 0px) and (max-width: 699px) {	
				ul.folders li.folder > .admin { left: -15px; }
			}
			
			@media not all and (min-resolution:.001dpcm) {
				@media {
				}
			}
			
			ul.folders li.folder > a.admin:hover {
				background-color: hsla(216,100%,72%,0.3);
			}

			ul.folders li.folder > a.admin > i {
				display: block;
				font-size: 18px;
				line-height:40px;
			}
			ul.folders li.folder > a.admin > i:before { content:"\ebc2"; }

				



			
			ul.folders li.folder > figure {
				position: relative;
				display: inline-block;
				pointer-events: none;
				vertical-align: top;
				width: 45px;
				height: 30px;
				margin: 5px 0 7px 5px;
				background-image:url(../../images/elements/folder.closed.svg);
				background-repeat: no-repeat;
				background-size: contain;
				background-position: left center;
			}
			ul.folders li.folder[data-opened="1"] > figure {
				background-image:url(../../images/elements/folder.opened.svg);
			}
			ul.folders li.folder > figure > .brand {
				display: block;
				position: relative;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center center;
				width: 35px; 
				height: 22px;
				left: 0;
				top: 7px;
			}
			/*
			ul.folders li.folder > figure .brand[data-name="ARO"               ] { background-image: url(../../uploads/brands/aro.png); }
			ul.folders li.folder > figure .brand[data-name="Metro Professional"] { background-image: url(../../uploads/brands/metro-professional.png); }
			ul.folders li.folder > figure .brand[data-name="HoReCa Select"     ] { background-image: url(../../uploads/brands/horeca-select.png); }
			*/
			ul.folders li.folder > figcaption {
				display: inline-block;
				width: calc(100% - 85px);
				height: auto;
				padding: 12px 0 0 0;
				color: #00457F;
				outline: 0px solid red;
			}
			ul.folders li.folder[data-opened="1"] > figcaption  { color:#0066FF; }
			ul.folders li.folder > figcaption > .brand {
				display: inline-block;
				font-size: 1.7rem;
				line-height: 1.8rem;
				margin-right: 0.25em;
			}
			ul.folders li.folder > figcaption > .name {
				display: inline-block;
				font-size: 1.7rem;
				line-height: 1.8rem;
				margin-right: 0.25em;
				font-weight: bold;
				text-transform: uppercase;
			}
			ul.folders li.folder > figcaption > .description {
				display: inline-block;
				font-size: 1.7rem;
				line-height: 1.8rem;
			}
			ul.folders li.folder > figcaption > .count {
				display: inline-block;
				position: relative;
				text-align: right;
				float: right;
				font-size: 1.3rem;
				line-height: 1.7rem;
				padding-right: 10px;
				left: 15px;
				pointer-events: none;
			}
			html[data-admin="1"] ul.folders li.folder > figcaption > .count {
				top: -10px;
				left: 0;
			}
			ul.folders li.folder > figcaption > .date {
				display: inline-block;
				position: relative;
				text-align: right;
				float: right;
				height:30px;
				margin: 0 0 -30px 0;
				font-size: 1.3rem;
				line-height: 1.7rem;
				padding-right: 10px;
				top: 10px;
				opacity: .5;
				pointer-events: none;
			}
			ul.folders li.folder > figcaption .count:after { content:" elem"; }
			ul.folders li.folder > figcaption .count:empty:after { content:" üres mappa"; }
			
			@media screen and (min-width: 0px) and (max-width: 699px) {	
				ul.folders li.folder > figcaption > .count {
					float: left;
					display: block;
					position: relative;
					width: 16px;
					height: 16px;
					margin: 0 0 -16px 0;
					padding: 0;
					left:-20px;
					top: 10px;
					font-size: 11px;
					line-height: 16px;
					border-radius: 16px;
					background-color: #BF0000;
					background-color: #96BCDD;
					text-align: center;
					color: white;
				}
				ul.folders li.folder[data-opened="1"] > figcaption > .count { display: none; }
				ul.folders li.folder > figcaption .count:after { display: none;}
				ul.folders li.folder > figcaption .count:empty { display: none; }

			}

			/* ADMIN FUNCTIONS */

			/* in admin mode toggle button is narrow */
			html[admin="1"] form ul.folders li.folder .toggle {
				width: 20px;
				float: right;
			}
			/*
			ul.folders li.folder[data-edited="1"] input.text {
				position: relative;
				top: -5px;
				width:auto;
				height:25px;
				border:none;
				font-family: Metro;
				font-weight: bold;
				font-size: 1.7rem;
				line-height: 1.8rem;
				margin-right: 0.25em;
				text-transform: uppercase;
			}
			ul.folders li.folder[data-edited="1"][data-opened="0"] input.text { color:#00457F;  }
			ul.folders li.folder[data-edited="1"][data-opened="1"] input.text { color:#0066FF;  }

			ul.folders li.folder[data-edited="1"] figcaption .name        > input.text { width: 100px; }
			ul.folders li.folder[data-edited="1"] figcaption .description > input.text { width: calc(100% - 100px); }
			*/




			/*				*/
			/*    FILES     */
			/*				*/
			
			ul.folders li.folder > ul.files {
				display: block;
				margin: 0;
				padding: 0 0 0 0;
				list-style: none;
				font-size: 0;
				line-height: 0;
			}
			ul.folders li.folder > ul.files {
				transition: padding 0.2s ease, max-height 0.2s ease;
				overflow: hidden;
				max-height: 0;
				background-color: #FFFFFF;
			}
			ul.folders li.folder[data-opened="1"] {
				background-color: #FFFFFF;
			}
			ul.folders li.folder[data-opened="1"] > ul.files {
				padding-bottom:5px;
				transition: padding 0.1s ease 0.1s, max-height 0.2s ease 0.05s;
				max-height:400px;
			}
			ul.folders li.folder > ul.files > li.file {
				display: block;
				position: relative;
				list-style: none;
				margin: 0;
				padding: 0;
				font-size: 0;
				line-height: 0;
				border-top: 1px solid #CCC;
				overflow: visible;
			}
			
			ul.folders li.folder > ul.files > li.file a.download {
				display: block;
				position: relative;
				float: right;
				overflow: hidden;
				height: 18px;
				padding: 5px 15px 5px 15px;
				margin:0 5px -28px 0;
				top: 10px;
				font-size: 1.3rem;
				line-height: 18px;
				text-align: center;
				background-color: hsla(216,100%,50%,0.00);
				box-shadow:inset 0 0 0 1px hsla(216,100%,50%,1.00);
				color: hsla(216,100%,50%,1.00);
				border-radius: 15px;
				text-decoration: none;
				transition: background-color 0.3s ease, color 0.3s ease;
			}
			@media screen and (min-width: 0px) and (max-width: 699px) {	
				ul.folders li.folder > ul.files { padding: 0 0 0 50px; }
				ul.folders li.folder > ul.files > li.file a.download {float: left; left: -45px; top: 5px; border-radius: 50px; width:20px; height: 20px; margin:0 5px -30px 0; line-height: 20px; padding: 5px 5px 5px 5px; }
				ul.folders li.folder > ul.files > li.file a.download > em { display: none;}
				
			}
			
			ul.folders li.folder > ul.files > li.file a.download > i {
				font-size: 0.8em;
			}
			ul.folders li.folder > ul.files > li.file a.download > em { font-style: normal; text-transform: uppercase; font-weight: bold; margin-left: 5px;}
			ul.folders li.folder > ul.files > li.file a.download > i:before { content:"\ebc3"; }
			ul.folders li.folder > ul.files > li.file a.download > em:before { content:"letöltés"; }
			
			ul.folders li.folder > ul.files > li.file > figure {
				position: relative;
				display: inline-block;
				pointer-events: none;
				vertical-align: top;
				width: 25px;
				height: 30px;
				margin: 5px 5px 7px 5px;
				background-image:url(../../images/elements/file.svg);
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center center;
			}
			ul.folders li.folder > ul.files > li.file[data-ext="xlsx"] > figure { background-image:url(../../images/elements/file/xls.svg); }
			ul.folders li.folder > ul.files > li.file[data-ext="xls" ] > figure { background-image:url(../../images/elements/file/xls.svg); }
			ul.folders li.folder > ul.files > li.file[data-ext="pdf" ] > figure { background-image:url(../../images/elements/file/pdf.svg); }
			
			ul.folders li.folder > ul.files > li.file > figure > .brand {
				display: block;
				position: relative;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center center;
				width: 35px; 
				height: 22px;
				left: 0;
				top: 7px;
			}
			
			ul.folders li.folder > ul.files > li.file figcaption {
				display: inline-block;
				position: relative;
				pointer-events: none;
				width: calc(100% - 65px);
				padding: 0;
				font-size:14px;
				line-height: 15px;
			}
			ul.folders li.folder > ul.files > li.file figcaption > .copy1 {
				display: block;
				padding: 2px 0 3px 0;
				font-weight: bold;
				color: #0064fe;
			}
			ul.folders li.folder > ul.files > li.file figcaption > .copy2 {
				display: block;
				font-size: 0.9em;
				opacity: 0.5;
			}
			ul.folders li.folder > ul.files > li.file figcaption > .copy1 > .name {
				display: inline-block;
				vertical-align: middle;
				font-size: 1.5rem;
				line-height: 1.7rem;
			}
			ul.folders li.folder > ul.files > li.file[data-type="1"] figcaption > .copy1 > .name:empty:before { content:"Felhasználói kézikönyv"; }
			ul.folders li.folder > ul.files > li.file[data-type="2"] figcaption > .copy1 > .name:empty:before { content:"Energiacímke"; }
			ul.folders li.folder > ul.files > li.file[data-type="3"] figcaption > .copy1 > .name:empty:before { content:"Termékfotó"; }
			ul.folders li.folder > ul.files > li.file[data-type="4"] figcaption > .copy1 > .name:empty:before { content:"Cserealkatrészek"; }
			
			ul.folders li.folder > ul.files > li.file figcaption > .copy1 > .descr {
				display: inline-block;
				vertical-align: middle;
			}
			ul.folders li.folder > ul.files > li.file figcaption > .copy2 > .basename {
				display: inline-block;
				vertical-align: middle;
			}
			ul.folders li.folder > ul.files > li.file figcaption > .copy2 > .extension {
				display: inline-block;
			}
			ul.folders li.folder > ul.files > li.file figcaption > .copy2 > .extension:before { content:"."; }
			ul.folders li.folder > ul.files > li.file figcaption > .copy2 > .size {
				display: inline-block;
				margin-left: 5px;
			}
			ul.folders li.folder > ul.files > li.file figcaption > .copy2 > .size:before { content:" ("; }
			ul.folders li.folder > ul.files > li.file figcaption > .copy2 > .size:after  { content:" )"; }

			
/* XXXXL */ @media screen and (min-width:1600px)                        {	
			}
/*  XXXL */ @media screen and (min-width:1440px) and (max-width:1599px) {	
			}
/*   XXL */ @media screen and (min-width:1240px) and (max-width:1439px) {	
			}
/*    XL */ @media screen and (min-width:1040px) and (max-width:1239px) {	
			}
/*     L */ @media screen and (min-width: 960px) and (max-width:1039px) {	
			}
/*     M */ @media screen and (min-width: 860px) and (max-width: 959px) {	
			}
/*     S */ @media screen and (min-width: 700px) and (max-width: 859px) {	
			}
/*    XS */ @media screen and (min-width: 580px) and (max-width: 699px) {	
				ul.folders li.folder > ul.files > li.file a.download:before {
					content:" ";
					display: table;
					width: 100%;
				}
			}
/*   XXS */ @media screen and (min-width: 310px) and (max-width: 579px) {	
			}
			
			
			/*
			ul.folders li.folder .button {
				display: inline-block;
				vertical-align: middle;
				appearance: none;
				border: none;
				background-color: #00457F;
				color: white;
				border-radius: 25px;
				padding: 0px 10px 0px 10px;
				margin: 0 0 0 0;
				text-align: center;
				width: 100px;
				font-family: metro;
				font-size: 1.2rem;
				line-height: 20px;
				font-weight: bold;
				text-transform: uppercase;
				outline: none;				
			}
			*/

		/*								*/
		/*	ADMIN 						*/
		/*								*/

			#editor {
				position: fixed;
				left: 0; top: 0;
				width: 100%; height: 100%;
				background-color: hsla(34,78%,91%,0.62);
				background-color: transparent;
			}
			/* states */
			#editor[data-active="0"] { display: none; }
			#editor[data-active="1"] { display: block; }

			#editor .editor-page-cover {
				position: fixed;
				left: -500px; top: 0;
				width: calc(100% + 1000px); height: calc(100% + 500px);
				z-index: 1000;
				background-color: hsla(208,10%,37%,0);
				background-color: hsla(208,10%,37%,0.27);
			}
			#editor .popup {
				position: fixed;
				z-index: 1010;
				left: 0%;
				top: 0%;
				padding: 40px 20px 20px 20px;
				margin: -300px 0 0 -320px;
				margin: 0 0 0 0;
				width: 600px;
				/*transform:translate(-50%,-50%);*/
				border-radius: 8px;
				background-color: hsla(0,0%,100%,0.75);
				background-color:#d1dee3;
				box-shadow: 0 0 0 0 #00457F, 0 15px 25px 15px hsla(0,0%,0%,0.21), inset 0 -200px 200px 0 rgba(255,255,255,0.3);
			}
			#editor .popup .header {
				display: block;
				position: relative;
				width: calc(100% + 40px);
				height: 30px;
				margin: 0 0 -30px 0;
				top: -38px;
				background-color: hsla(201,100%,75%,0.0);
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				left: -20px;
				cursor:grab;
			}
			#editor .popup .header:hover {
				background-color: hsla(201,100%,75%,0.5);
			}
			#editor a.editor-close-button {
				display: block;
				position: relative;
				float: right;
				width: 20px;
				height:16px;
				margin: 0 0 -16px 0;
				left: 17px;
				top: -32px;
				border-radius: 16px;
				text-align: center;
				font-size: 16px;
				line-height: 20px;
				color: black;
				text-align: center;
				text-decoration: none;
				opacity: 0.5;
			}
			#editor .popup a.editor-close-button i:before { content:"\ebad"; }
			#editor .popup a.editor-close-button:hover { opacity: 1; }

			#editor a.editor-delete-button {
				display: block;
				position: relative;
				float: right;
				width: 20px;
				height:16px;
				margin: 0 0 -16px 0;
				left: -6px;
				top: -32px;
				border-radius: 16px;
				text-align: center;
				font-size: 16px;
				line-height: 20px;
				color: black;
				text-align: center;
				text-decoration: none;
				opacity: 0.5;
			}
			#editor .popup a.editor-delete-button i:before { content:"\EA7A"; }
			#editor .popup a.editor-delete-button:hover { opacity: 1; }

			#editor ul.rows {
				display: block;
				list-style: none;
				font-size:0;
				line-height: 0;
				margin: 0; padding: 0;
			}
			#editor ul.rows li.row {
				display: block;
				list-style: none;
				margin: 0 0 0 0;
				padding: 0;
			}
			#editor ul.rows li.row .label {
				display: inline-block;
				vertical-align: top;
				font-family: Metro;
				font-size: 1.2rem;
				line-height: 2.0rem;
				text-transform: uppercase;
				text-align: right;
				padding: 5px 10px 5px 0;
				width: 70px;
			}
			#editor ul.rows li.row .field {
				display: inline-block;
				vertical-align: top;
				font-size: 1.3rem;
				line-height: 2.0rem;
				width: calc(100% - 80px);
			}
			#editor ul.rows li.row[data-label="brand"] .field { width: calc(100% - 80px); }
			
			#editor .dropdown {
				font-size: 1.3rem;
				line-height: 1.6rem;
				outline: none;
				border: none;
				width: 100px;
				height: 30px;
				background-color: hsla(0,0%,100%,0.50);
				padding: 2px 10px 2px 10px;
				width: calc(100% - 0px);
				border-radius: 0px;
				appearance:none;
				-webkit-appearance:none;
				box-shadow:0 0 1px 0 #000;
			}
			#editor .editor-files .dropdown {
				float:right;
				width: 170px;
			}
			#editor ul.rows li.row .field input[type="text"] {
				width: calc(100% - 195px);
			}
			#editor ul.rows li.row .field input[type="text"][name="name"],
			#editor ul.rows li.row .field input[type="text"][name="description"] {
				width: calc(100% - 20px);
			}
			
			#editor .row[data-label="brand"] .field:before,
			#editor label[data-label="file_type"]:before {
				display: block;
				position: relative;
				z-index: 1;
				width: 20px;
				height: 20px;
				margin: 0 0 -20px 0;
				top: 8px;
				font-family: icons;
				font-size: 15px;
				line-height: 20px;
				content:"\EBA2";
				float: right;
				pointer-events: none;
			}
			#editor ul.rows li.row .field input, textarea {
				font-size: 1.3rem;
				line-height: 1.6rem;
				outline: none;
				border: none;
				border-radius: 2px;
				background-color: hsla(0,0%,100%,0.50);
				padding: 5px 10px 5px 10px;
				width: calc(100% - 20px);
			}
			#editor .dropdown {
				margin: 0 0 5px 0;
				border-radius: 2px;
			}
			#editor ul.rows li.row .field input {
				height: 20px;
				margin: 0 0 5px 0;
			}
			#editor ul.rows li.row .field textarea {
				height: 40px;
				margin: 0 0 0 0;
				resize: none;
				overflow: hidden;
			}

			#editor .editor-files {
				margin: 10px 0 0 0;
			}
			#editor .editor-files .editor-file {
				margin: 0 0 1px 0;
			}
			#editor .editor-files .editor-file .preview {
				position: relative;
				width: 75px;
				height: 107px;
				margin: 0 0 -105px 0;
				background-color: white;
				left: -80px;
				top: 0px;
				border-radius: 2px;
			}
			#editor .editor-files .editor-file input[type="text"] {
				margin: 5px 0 5px 0;
			}
			#editor .file-data {
				font-size: 13px;
				line-height: 15px;
				opacity: 0.5;
				margin: 0 0 5px 0;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			#editor .editor-file .preview figure {
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center center;
				position: absolute;
				left: 0; top:0px;
				right:0; bottom:0px;
			}
			#editor .editor-file .preview figcaption {
				display: block;
				position: absolute;
				left: 0; top:75px;
				right:0; bottom:0px;
				text-align: center;
			}
			#editor .editor-file .preview figcaption:before {
				display: inline-block;
				padding: 2px 10px 2px 10px;
				border-radius: 15px;
				font-size: 10px;
				line-height: 13px;
				background-color: hsla(0,0%,0%,0.50);
				color: white;
			}
			#editor .editor-file[data-filetype="pdf" ] figcaption:before { content:"PDF"; }
			#editor .editor-file[data-filetype="jpg" ] figcaption:before { content:"JPEG"; }
			#editor .editor-file[data-filetype="xls" ] figcaption:before { content:"XLS"; }
			#editor .editor-file[data-filetype="xlsx"] figcaption:before { content:"XLSX"; }
			#editor .editor-file[data-filetype="doc" ] figcaption:before { content:"DOC"; }
			#editor .editor-file[data-filetype="docx"] figcaption:before { content:"DOCX"; }
			
			@media screen and (min-width: 0px) and (max-width: 699px) {	
				#editor .popup {
					position: fixed;
					z-index: 1010;
					left: 5px;
					top: 5px;
					padding: 30px 10px 10px 10px;
					margin: 0;
					width: calc(100% - 30px);
					height: calc(100% - 30px);
					/*transform:translate(-50%,-50%);*/
					border-radius: 8px;
					background-color: hsla(0,0%,100%,0.75);
					background-color:#d1dee3;
					box-shadow: 0 0 0 0 #00457F, 0 15px 25px 15px hsla(0,0%,0%,0.21), inset 0 -200px 200px 0 rgba(255,255,255,0.3);
				}
				#editor a.editor-close-button {
					left: 7px;
					top: -27px;
				}
			}
			

		/*								*/
		/*	UPLOAD HELPER				*/
		/*								*/

			#progress {
				position: fixed;
				z-index: 999999;
				left: 50%; bottom:10px;
				transform:translate(-50%,0%);
				width: 400px;
				height: 10px;
				border-radius: 10px;
				background-color: #EEEEEE;
				box-shadow: inset 1px 1px 3px 0 rgba(0,0,0,0.3);
			}			
			#progress .progress-bar {
				width: 0%;
				height: 10px;
				border-radius: inherit;
				background-color: #0066FF;
			}			

			#upload_helper {
				position: fixed;
				z-index: 99999;
				left: 0;
				top: 0%;
				width: 100%;
				height: 100%;
				background-color: rgba(157,173,192,0.70);
				display: none;
			}
			#upload_helper.active {
				display: block;
			}