.workspaceIcon {
  height: 16px;
}

#workspaceRow {
  border-bottom: solid 1.5px;
}

.workspaceCell {
  padding: 0px 10px 0px 10px;
}

#workspaceDropdown {
  font-size: 12pt;
  margin-left: 6px;
}

.tableDiv {
  padding: 4px;
  margin: 4px;
  background-color: var(--neutral3);
}

.buttonCell .button {
  font-size: 10pt;
  height: 20px;
}

.consoleCell {
  padding: 8px;
  background-color: var(--neutral5);
}

.tableHeader {
  display: inline-block;
  font-size: 10pt;
  font-weight: bold;
}

.actionHeader {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

.workspaceHeader {
  font-size: 12pt;
}

.consoleCell .controlButton {
  display: block;
}

.actionHeader .button {
  margin-left: 4px;
  margin-right: 4px;
}

#mixTicketText {
  width: 260px;
  font-size: 8pt;
  display: none;
}

.recipeNameInput {
  text-align: justify;
  text-justify: auto;
  width: 150px;
  margin: 0px;
}

.dropdownList {
  text-align: right;
  width: 170px;
  margin: 0px;
}

#recipeDropdown {
}

#pantryDropdown {
  width: 140px;
}

.recipeHeader {
  margin-bottom: 2px;
  margin: 0px;
}

.materialExcludeCheck {
  text-align: right;
}

.excludeCol {
  text-align: center;
}

.addRemoveButton {
  width: 16px;
  height: 16px;
  padding: 0px 0px;
  text-align: center;
  border: none;
}

#recipeCell {
  vertical-align: top;
  text-align: left;
  overflow-y: auto;
}

#recipeTable {
  background-color: var(--neutral3);
}

#buttonCell {
  vertical-align: top;
  text-align: center;
}

#materialsCell {
  vertical-align: top;
  text-align: left;
  width: 340px;
}

#materialsTable {
  background-color: var(--neutral3);
}

#propGoalCell {
  vertical-align: top;
  text-align: left;
}

#propGoalTable {
  background-color: var(--neutral3);
}

#chemGoalCell {
  text-align: left;
}

#chemGoalTable {
  background-color: var(--neutral3);
}

#recipeTotal {
  text-align: right;
}

.consoleScoreDisplay {
  text-align: center;
  font-weight: bold;
  font-size: 9pt;
  padding: 4px;
  margin: 0px;
  background-color: var(--neutral3);
}

.addCol {
  text-align: center;
}

.amountCol {
  text-align: right;
}

.recipeAmountStyle {
  text-align: right;
  width: 46px;
  padding: 0;
}

.number {
  text-align: right;
  width: 40px;
  padding: 0;
}

.labelColumn {
  text-align: right;
  width: 70px;
}

label.rowLabel{
}

.goalEnableAll {
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  position: relative;
  overflow: hidden;
}

.goalColumn {
  text-align: center;
}

.headerRow .stabilizer {
  background-color: #57a;
}

.headerRow .flux {
  background-color: #699;
}

.headerRow .glass {
  background-color: #669;
}

.headerRow .colorant {
  background-color: #969;
}

div.achievedBar {
  background-color: #191;
  width: 40px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  vertical-align: bottom;
  position: relative;
}

div.sliders {
  height: 100px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  display: inline-block;
  vertical-align: bottom;
  position: absolute;
  bottom: 0px;
  left: 15px;
}

.achievedOutput {
  color: #080;
  font-weight: bold;
}

/*************************************************/
/* Absolute Center Spinner */
.counter {
  padding: 0px;
  position: fixed;
  z-index: 998;
  height: 95px;
  width: 150px;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

#counterValue {
  padding: 0px;
  text-align: center;
  font-size: 48pt;
  height: 75px;
  width: 150px;
  color: var(--neutral1);
}

@keyframes swing {
  0% {
    left: 0px;
  }
  50% {
    left: 140px;
  }
  100% {
    left: 0px;
  }
} 

#pendulum {
  padding: 0px;
  top: 0px;
  width: 10px;
  height: 10px;
  position: relative;
  background-color: rgba(255, 255, 255, 1.0);
  text-align: left;
  color: var(--neutral1);
  animation-name: swing;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
}

.spinner {
  display: none;
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.spinner:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.spinner:not(:required) {
  /* hide "spinner..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.spinner:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 3000ms infinite linear;
  -moz-animation: spinner 3000ms infinite linear;
  -ms-animation: spinner 3000ms infinite linear;
  -o-animation: spinner 3000ms infinite linear;
  animation: spinner 3000ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* spinner */
/*************************************************/

/*
.spinnerOverlay {
  z-index: 10;
  display: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.spinner {
  z-index: 10;
  margin: auto;
  height: 60px;
  width: 60px;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left: 6px solid rgba(0,174,239,.15);
  border-right: 6px solid rgba(0,174,239,.15);
  border-bottom: 6px solid rgba(0,174,239,.15);
  border-top: 6px solid rgba(0,174,239,.8);
  border-radius: 100%;
}

@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}
*/