WAS/ui/css/design.css

/*Stations*/

/*hover color*/
#stations tr:hover td {
	background-color: #efefef;
}

#stations .stationAction {
  width: 1em;
  height: 1em;
}

#stations .stationAction a{
  visibility:hidden;
}

#stations tr:hover .stationAction a{
  visibility:visible;
}

#stations {
  border-spacing: 0 5px; 
  width: 100%
}

#stations tr td:not(:first-child){
  padding-left: 5px;
}

td {
  padding-right: 1em;
}
.wasGroup{
  padding-top: 1em;
}
.wasGroup:after {
  content: "";
  display: table;
  clear: both;
}
.wasLeft{
	width: 14em;
	float: left;
}
.wasRight{
	overflow: hidden;
	min-width: 20em !important;
}

.width100{
	width: 100% !important;
}

[is="x-ui"] input, [is="x-ui"] button, [is="x-ui"] select{
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important; 
}

.imageInput, .abbreviation{
	width: 9em !important;
	/*
	border: none !important;
	padding: 0em !important;
	*/
}

.removeImage{
	font-size: 1.6em;
}

.removeImage a{
	color:var(--x-ui-light-text-color) !important;
	text-decoration:none !important;

}

.mouseOver{
	cursor: help;
	color:var(--x-ui-light-text-color) !important;
	text-decoration:none !important;
}

.mouseOver::after{
	content:"🛈";
}



.handle{
	cursor: grab;
	font-style: normal;
	font-size:2em;
	width: 1em;
    height: 100px;
}
#error, #replacements {
	background-color: #efefef;
	padding-bottom: 1em;
}
#error,#images, #replacements{
	margin-top: 2em;
}

.imageleft{
    height: 103px;
    display:table-cell;
    vertical-align:middle;
}

.list-group-item {
  position: relative;
  display: block;
  padding: $list-group-item-padding-y $list-group-item-padding-x;
  // Place the border on the list items and negative margin up for better styling
  margin-bottom: -$list-group-border-width;
  background-color: $list-group-bg;
  border: $list-group-border-width solid $list-group-border-color;
}

.patternPart:not(:last-child)::after{
	content: ".";
	padding-right: -5em;
}

.patternPart a{
	display:block;
	text-align: center;
}

.patternPart:not(:last-child) a{
	margin-left: -0.5em;
}


.patternPart{
	display: inline-block;
	white-space: nowrap;
	
}
.patternPartInput{
	width: 3em !important;
	text-align: center;
}


#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: 40px 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;
						}