.sttos-white-bg {
  background-color: #fff !important;
}
.sttos-white-border {
  border-color: #fff !important;
}
.sttos-white-color {
  color: #fff !important;
}

.sttos-black-bg {
  background-color: #000 !important;
}
.sttos-black-border {
  border-color: #000 !important;
}
.sttos-black-color {
  color: #000 !important;
}


.sttos-yellow-bg {
  background-color: #ffdc2a !important;
}
.sttos-yellow-border {
  border-color: #ffdc2a !important;
}
.sttos-yellow-color {
  color: #ffdc2a !important;
}

.sttos-bright-yellow-bg {
  background-color: #fffb24 !important;
}
.sttos-bright-yellow-border {
  border-color: #fffb24 !important;
}
.sttos-bright-yellow-color {
  color: #fffb24 !important;
}

.sttos-dim-yellow-bg {
  background-color: #f1c057 !important;
}
.sttos-dim-yellow-border {
  border-color: #f1c057 !important;
}
.sttos-dim-yellow-color {
  color: #f1c057 !important;
}

.sttos-gold-bg {
  background-color: #e7bb41 !important;
}
.sttos-gold-border {
  border-color: #e7bb41 !important;
}
.sttos-gold-color {
  color: #e7bb41 !important;
}

.sttos-red-bg {
  background-color: #c70010 !important;
}
.sttos-red-border {
  border-color: #c70010 !important;
}
.sttos-red-color {
  color: #c70010 !important;
}

.sttos-bright-red-bg {
  background-color: #ff2706 !important;
}
.sttos-bright-red-border {
  border-color: #ff2706 !important;
}
.sttos-bright-red-color {
  color: #ff2706 !important;
}

.sttos-bright-green-bg {
  background-color: #1cf714 !important;
}
.sttos-bright-green-border {
  border-color: #1cf714 !important;
}
.sttos-bright-green-color {
  color: #1cf714 !important;
}

.sttos-green-bg {
  background-color: #78ab45 !important;
}
.sttos-green-border {
  border-color: #78ab45 !important;
}
.sttos-green-color {
  color: #78ab45 !important;
}

.sttos-dark-green-bg {
  background-color: #368f1b !important;
}
.sttos-dark-green-border {
  border-color: #368f1b !important;
}
.sttos-dark-green-color {
  color: #368f1b !important;
}

.sttos-dim-green-bg {
  background-color: #89a25a !important;
}
.sttos-dim-green-border {
  border-color: #89a25a !important;
}
.sttos-dim-green-color {
  color: #89a25a !important;
}

.sttos-orange-bg {
  background-color: #d98a38 !important;
}
.sttos-orange-border {
  border-color: #d98a38 !important;
}
.sttos-orange-color {
  color: #d98a38 !important;
}

.sttos-aqua-blue-bg {
  background-color: #b5ffff !important;
}
.sttos-aqua-blue-border {
  border-color: #b5ffff !important;
}
.sttos-aqua-blue-color {
  color: #b5ffff !important;
}

.sttos-dim-blue-bg {
  background-color: #79a6ad !important;
}
.sttos-dim-blue-border {
  border-color: #79a6ad !important;
}
.sttos-dim-blue-color {
  color: #79a6ad !important;
}

.sttos-screen-blue-bg {
  background-color: #abccf5 !important;
}
.sttos-screen-blue-border {
  border-color: #abccf5 !important;
}
.sttos-screen-blue-color {
  color: #abccf5 !important;
}




.sttos-app-container {
  display: flex;
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  overflow: hidden;
  margin: 0.5rem;
}
.sttos-app-container #left-menu {
  position: fixed;
  padding-top: 4.5rem;
  height: 100%;
  left: 0.5rem;
}
.sttos-app-container #header {
  position: fixed;
  background-color: #000;
  width: calc(100% - 1rem);
  top: 0;
  left: 0.5rem;
  padding-top: 0.5rem;
  margin-bottom: 0.25rem;
  z-index: 1;
}
.sttos-app-container #footer {
  position: fixed;
  background-color: #000;
  bottom: 0;
  left: 0.5rem;
  padding-bottom: 0.5rem;
  width: calc(100% - 1rem);
  z-index: 1;
}
.sttos-app-container #container {
  margin-top: 0.25rem;
  margin-left: 0.25rem;
  padding-left: 9.5rem;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.sttos-row {
  display: inline-flex;
  flex-direction: row;
  width: 100%;
}
.sttos-row.fill {
  flex: 1;
}
.sttos-row.centered {
  justify-content: center;
}

.sttos-column {
  display: inline-flex;
  flex-direction: column;
}
.sttos-column.left-menu {
  padding-right: 2rem;
}
.sttos-column.right-menu {
  padding-left: 2rem;
}
.sttos-column.start-space {
  margin-top: 0.25rem;
}
.sttos-column.fill {
  flex: 1;
}
.sttos-column.centered {
  justify-content: center;
}
.sttos-column.full-centered {
  justify-content: center;
  align-items: center;
}
.sttos-column.centered-right {
  justify-content: center;
  align-items: flex-end;
}
.sttos-column.bottom {
  justify-content: flex-end;
}
.sttos-column.bottom-centered {
  justify-content: flex-end;
  align-items: center;
}

.sttos-bar {
  position: relative;
  color: #fff;
  height: 100%;
  width: 100%;
  margin: 0;
  display: inline-block;
  background-color: #000;
}
.sttos-bar:after {
  content: '';
  display: block;
  position: absolute;
  background: #000;
}
.sttos-bar.horizontal {
  height: 1.5rem;
}
.sttos-bar.bottom {
  align-self: flex-end;
  align-items: center;
}
.sttos-bar.left-end {
  width: 1.5rem;
  max-width: 1.5rem;
  min-width: 1.5rem;
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.sttos-bar.right-end {
  width: 1.5rem;
  max-width: 1.5rem;
  min-width: 1.5rem;
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.sttos-bar .sttos-title {
  color: #fff;
  background-color: #000;
  text-transform: uppercase;
  margin: 0;
  margin-left: 0.833333333333335rem;
  padding-left: 0.166666666666667rem;
  padding-right: 0.166666666666667rem;
  padding-bottom: 0.166666666666667rem;
  display: inline-block;
  font-size: 150%;
  height: 100%;
}
.sttos-bar .sttos-title.right {
  float: right;
  margin-right: 0.833333333333335rem;
}

.sttos-elbow {
  position: relative;
  width: 9.5rem;
  min-width: 9.5rem;
  height: 4.5rem;
  min-height: 4.5rem;
  background: #000;
  margin: 0;
}
.sttos-elbow.left-bottom {
  border-top-left-radius: 3.75rem;
}
.sttos-elbow.left-bottom a {
  right: 2.25rem;
}
.sttos-elbow.left-bottom:after {
  right: 0;
  top: 1.5rem;
  border-top-left-radius: 1.875rem;
}
.sttos-elbow.left-top {
  border-bottom-left-radius: 3.75rem;
}
.sttos-elbow.left-top a {
  top: 0;
  right: 2.25rem;
}
.sttos-elbow.left-top:after {
  right: 0;
  bottom: 1.5rem;
  border-bottom-left-radius: 3.75rem;
}
.sttos-elbow.right-bottom {
  border-top-right-radius: 3.75rem;
}
.sttos-elbow.right-bottom:after {
  top: 1.5rem;
  border-top-right-radius: 1.875rem;
}
.sttos-elbow.right-bottom a {
  left: 2.25rem;
}
.sttos-elbow.right-top {
  border-bottom-right-radius: 3.75rem;
}
.sttos-elbow.right-top a {
  display: inline-block;
  top: 0;
  left: 2.25rem;
}
.sttos-elbow.right-top:after {
  bottom: 1.5rem;
  border-bottom-right-radius: 1.875rem;
}

.sttos-element {
  position: relative;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background: #000;
  height: 3rem;
  width: 7.5rem;
  box-sizing: border-box;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.sttos-element * {
  margin: 0;
}

.sttos-element.button {
  cursor: pointer;
  border: 3px solid;
  font-style: bold;
  margin-bottom: 10px;
  opacity: 0.5;
}

.sttos-element.button:hover { opacity: 1.0; }


  .sttos-footer {
    position: relative;
    color: #fff;
    text-align: center;
    background: Black;
    height: 2.25rem;
    width: 7.5rem;
    box-sizing: border-box;
    padding-left: 1.75rem;
    padding-right: 0.75rem;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }


  .sttos-u-1-0 {
    width: 7.5rem;
    min-width: 7.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
  }
  .sttos-u-2-0 {
    width: 15.25rem;
    min-width: 15.25rem;
    height: 1.5rem;
    min-height: 1.5rem;
  }
  .sttos-u-3-0 {
    width: 23rem;
    min-width: 23rem;
    height: 1.5rem;
    min-height: 1.5rem;
  }
  .sttos-u-4-0 {
    width: 30.75rem;
    min-width: 30.75rem;
    height: 1.5rem;
    min-height: 1.5rem;
  }


.sttos-u-1 {
  width: 7.5rem;
}
}
.sttos-u-1.half {
  width: 3.625rem;
}
.sttos-u-2 {
  width: 15.25rem;
}
.sttos-u-2.half {
  width: 11.375rem;
}
.sttos-u-3 {
  width: 23rem;
}
.sttos-u-3.half {
  width: 19.125rem;
}
.sttos-u-4 {
  width: 30.75rem;
}
.sttos-u-4.half {
  width: 26.875rem;
}
.sttos-u-5 {
  width: 38.5rem;
}
.sttos-u-5.half {
  width: 34.625rem;
}
.sttos-u-6 {
  width: 46.25rem;
}
.sttos-u-6.half {
  width: 42.375rem;
}
.sttos-u-7 {
  width: 54rem;
}
.sttos-u-7.half {
  width: 50.125rem;
}
.sttos-u-8 {
  width: 61.75rem;
}
.sttos-u-8.half {
  width: 57.875rem;
}
.sttos-u-9 {
  width: 69.5rem;
}
.sttos-u-9.half {
  width: 65.625rem;
}
.sttos-u-10 {
  width: 77.25rem;
}
.sttos-u-10.half {
  width: 73.375rem;
}
.sttos-u-11 {
  width: 85rem;
}
.sttos-u-11.half {
  width: 81.125rem;
}
.sttos-u-12 {
  width: 92.75rem;
}
.sttos-u-12.half {
  width: 88.875rem;
}

.sttos-u-1-1 {
  width: 7.5rem;
  min-width: 7.5rem;
  height: 3rem;
  min-height: 3rem;
}
.sttos-u-1-2 {
  width: 7.5rem;
  min-width: 7.5rem;
  height: 6.25rem;
  min-height: 6.25rem;
}
.sttos-u-1-3 {
  width: 7.5rem;
  min-width: 7.5rem;
  height: 9.5rem;
  min-height: 9.5rem;
}
.sttos-u-1-4 {
  width: 7.5rem;
  min-width: 7.5rem;
  height: 12.75rem;
  min-height: 12.75rem;
}
.sttos-u-1-5 {
  width: 7.5rem;
  min-width: 7.5rem;
  height: 16rem;
  min-height: 16rem;
}
.sttos-u-1-6 {
  width: 7.5rem;
  min-width: 7.5rem;
  height: 19.25rem;
  min-height: 19.25rem;
}
.sttos-u-1-7 {
  width: 7.5rem;
  min-width: 7.5rem;
  height: 22.5rem;
  min-height: 22.5rem;
}
.sttos-u-1-8 {
  width: 7.5rem;
  min-width: 7.5rem;
  height: 25.75rem;
  min-height: 25.75rem;
}
.sttos-u-2-1 {
  width: 15.25rem;
  min-width: 15.25rem;
  height: 3rem;
  min-height: 3rem;
}
.sttos-u-2-2 {
  width: 15.25rem;
  min-width: 15.25rem;
  height: 6.25rem;
  min-height: 6.25rem;
}
.sttos-u-2-3 {
  width: 15.25rem;
  min-width: 15.25rem;
  height: 9.5rem;
  min-height: 9.5rem;
}
.sttos-u-2-4 {
  width: 15.25rem;
  min-width: 15.25rem;
  height: 12.75rem;
  min-height: 12.75rem;
}
.sttos-u-2-5 {
  width: 15.25rem;
  min-width: 15.25rem;
  height: 16rem;
  min-height: 16rem;
}
.sttos-u-2-6 {
  width: 15.25rem;
  min-width: 15.25rem;
  height: 19.25rem;
  min-height: 19.25rem;
}
.sttos-u-2-7 {
  width: 15.25rem;
  min-width: 15.25rem;
  height: 22.5rem;
  min-height: 22.5rem;
}
.sttos-u-2-8 {
  width: 15.25rem;
  min-width: 15.25rem;
  height: 25.75rem;
  min-height: 25.75rem;
}



@keyframes blinkyellow {
    from {background-color: #e5dc11;}
    to {background-color: #222103;}
}

@keyframes blinkred {
    from {background-color: #da1818;}
    to {background-color: #1f0403;}
}

@keyframes blinkgreen {
    from {background-color: #37cf37;}
    to {background-color: #081f08;}
}