Universal-storage/ui/css/ustore.css

*[is=x-ui] ui-rest > ui-content > ui-resizehandle {
  z-index: 1;
}
[is="x-ui"] ui-rest > ui-content > ui-area{
  padding: 2em !important;
}


#selectfolders{
  box-sizing: border-box;
  width: 100%;
}

.Folder{
  margin: 1em;
  float: left;
  text-align: center;
  width: 8em;
}

.FolderImage{
  font-size: 3em;
}

.FolderImageLink:hover  .FolderText{
  text-decoration: underline;
}

.FolderTextNew{
  margin-top: -2.1em;
}


.HiddenremoveLink{
  padding-top:1em;
  visibility: hidden;
}

.FolderImageLink:hover ~ div{
  visibility: visible;
}

.HiddenremoveLink:hover{
  visibility: visible;
}


#detailcolumn{
  position: relative;
  min-height: 95%;
}

#MenuBar .showremoveitemsNot{
  display: inline;
}

#MenuBar .showremoveitems{
  display: none;
}
#Data .showremoveitems{
  display: none;
  width: auto;
  margin-bottom: 1em;
}

#MenuBar{
  margin: 2em 0em;
  padding: 1em;
  color: var(--x-ui-light-text-color);
  background-color: var(--x-ui-outside-color);
}

#MenuBar a{
  color: var(--x-ui-light-text-color);
  
}


#content-wrap {
  min-height: 95%;
  padding-bottom: -100px;    /* Footer height */
}

#RemoveFolder{
  color: white;
  background-color: #c6000094;
  /*box-sizing: border-box;*/
  left: 1em;
  right: 1em;
  height: 1em;
  padding: 1em;
}

#RemoveFolder a{
  color: black;
}

.DataItem{
  position: relative;
  margin: 1em;
  padding-bottom: 1em;
  float: left;
  text-align: center;
  width: 8em;
}

.spanwrapping{
  position: relative;
  height: 3.5em;
}

.DataItem span{
  display:inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
   
}

.DataImg{
  text-align: center;
  vertical-align: middle;
  width: 8em;
  height: 8em;
  border: 2px dashed #92b0b3;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.imageAlternative {
  vertical-align: middle;
  font-size: 6em;
  height: 100%;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  text-align: center;
  vertical-align: middle;
}

#overlaycontentsize{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  background-color: rgba(255,255,255,1);
  max-height: 100%;
  max-width: 100%;
}

#overlaycontent{
  max-height: 100%;
  max-width: 100%;  
}












/*Image Upload CSS*/


			.container
			{
				width: 100%;
				max-width: 680px; /* 800 */
				text-align: center;
				margin: 0 auto;
			}

				.container h1
				{
					font-size: 42px;
					font-weight: 300;
					color: #0f3c4b;
					margin-bottom: 40px;
				}
				.container h1 a:hover,
				.container h1 a:focus
				{
					color: #39bfd3;
				}

				.container nav
				{
					margin-bottom: 40px;
				}
					.container nav a
					{
						border-bottom: 2px solid #c8dadf;
						display: inline-block;
						padding: 4px 8px;
						margin: 0 5px;
					}
					.container nav a.is-selected
					{
						font-weight: 700;
						color: #39bfd3;
						border-bottom-color: currentColor;
					}
					.container nav a:not( .is-selected ):hover,
					.container nav a:not( .is-selected ):focus
					{
						border-bottom-color: #0f3c4b;
					}

				.container footer
				{
					color: #92b0b3;
					margin-top: 40px;
				}
					.container footer p + p
					{
						margin-top: 1em;
					}
					.container footer a:hover,
					.container footer a:focus
					{
						color: #39bfd3;
					}

				.box
				{
					font-size: 1.25rem; /* 20 */
					background-color: var(--x-ui-outside-color);
					position: relative;
					padding: 100px 20px;
				}
				.box.has-advanced-upload
				{
					outline: 2px dashed #92b0b3;
					outline-offset: -10px;

					-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
					transition: outline-offset .15s ease-in-out, background-color .15s linear;
				}
				.box.is-dragover
				{
					outline-offset: -20px;
					outline-color: #c8dadf;
					background-color: #fff;
				}
					.box__dragndrop,
					.box__icon
					{
						display: none;
					}
					.box.has-advanced-upload .box__dragndrop
					{
						display: inline;
					}
					.box.has-advanced-upload .box__icon
					{
						width: 100%;
						height: 80px;
						fill: #92b0b3;
						display: block;
						margin-bottom: 40px;
					}

					.box.is-uploading .box__input,
					.box.is-success .box__input,
					.box.is-error .box__input
					{
						visibility: hidden;
					}

					.box__uploading,
					.box__success,
					.box__error
					{
						display: none;
					}
					.box.is-uploading .box__uploading,
					.box.is-success .box__success,
					.box.is-error .box__error
					{
						display: block;
						position: absolute;
						top: 50%;
						right: 0;
						left: 0;

						-webkit-transform: translateY( -50% );
						transform: translateY( -50% );
					}
					.box__uploading
					{
						font-style: italic;
					}
					.box__success
					{
						-webkit-animation: appear-from-inside .25s ease-in-out;
						animation: appear-from-inside .25s ease-in-out;
					}
						@-webkit-keyframes appear-from-inside
						{
							from	{ -webkit-transform: translateY( -50% ) scale( 0 ); }
							75%		{ -webkit-transform: translateY( -50% ) scale( 1.1 ); }
							to		{ -webkit-transform: translateY( -50% ) scale( 1 ); }
						}
						@keyframes appear-from-inside
						{
							from	{ transform: translateY( -50% ) scale( 0 ); }
							75%		{ transform: translateY( -50% ) scale( 1.1 ); }
							to		{ transform: translateY( -50% ) scale( 1 ); }
						}

					.box__restart
					{
						font-weight: 700;
					}
					.box__restart:focus,
					.box__restart:hover
					{
						color: #39bfd3;
					}

					.js .box__file
					{
						width: 0.1px !important;
						height: 0.1px;
						opacity: 0;
						overflow: hidden;
						position: absolute;
						z-index: -1;
					}
					.box__file{
						width: 10.5em !important;
						display: block !important;
					}
					.js .box__file + label
					{
						max-width: 80% !important;
						text-overflow: ellipsis;
						white-space: nowrap;
						cursor: pointer;
						display: inline-block;
						overflow: hidden;
					}
					.js .box__file + label:hover strong,
					.box__file:focus + label strong,
					.box__file.has-focus + label strong
					{
						color: #39bfd3;
					}
					.js .box__file:focus + label,
					.js .box__file.has-focus + label
					{
						outline: 1px dotted #000;
						outline: -webkit-focus-ring-color auto 5px;
					}
						.js .box__file + label *
						{
							/* pointer-events: none; */ /* in case of FastClick lib use */
						}

					.no-js .box__file + label
					{
						display: none;
					}

					.no-js .box__button
					{
						display: block;
					}
					.box__button
					{
						font-weight: 700;
						color: #e5edf1;
						background-color: #39bfd3;
						display: none;
						padding: 8px 16px;
						margin: 40px auto 0;
					}
						.box__button:hover,
						.box__button:focus
						{
							background-color: #0f3c4b;
						}