/*
  tps-customui.css
  Collection of customized generic UI styles
*/
/* *** BUTTONS ********** */
.clsBTN {
  border: solid #333333 1px;
  border-radius: 0.3em;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.5);
  margin-top: 0.4em;
  margin-right: .5em;
  margin-bottom: .5em;
  padding: 0.3em 0.8em;
  background-color: #d3d3d3;
  font-size: 1rem;
  min-width: 8rem;
}

  .clsBTN:hover {
    font-weight: bold;
    text-decoration: underline;
    background: linear-gradient(to bottom, white 0%, #c2c2c2 50%, #aaaaaa 100%);
  }

.clsBTN--RIGHT {
  margin-left: auto;
}

.clsBTN--BLUE {
  background-color: #d7e5fb;
}

  .clsBTN--BLUE:hover {
    background: linear-gradient(to bottom, white 0%, #dddbfe 50%, #8ca7fe 100%);
  }

.clsBTN--GREEN {
  background-color: #e3f5e3;
}

  .clsBTN--GREEN:hover {
    background: linear-gradient(to bottom, white 0%, #ddfed0 50%, #8dfd8d 100%);
  }

.clsBTN--RED {
  background-color: #fad8de;
}

  .clsBTN--RED:hover {
    background: linear-gradient(to bottom, white 0%, #fed0d1 50%, #fd8d95 100%);
  }

/************************************************/
/**** GRADS AND STRIPES */
.clsSTRIPES1 {
  background: linear-gradient(blue, red);
  height: 4em;
}

.clsSTRIPES2 {
  background: linear-gradient(blue 50%, red 50%);
  height: 4em;
}

.clsSTRIPES3 {
  background: linear-gradient(blue 33.3%, red 0, red 66.6%, green 0);
  height: 4em;
}

.clsSTRIPES4 {
  background: linear-gradient(blue 25%, red 0, red 50%, green 0, green 75%, yellow 0);
  height: 4em;
}

.clsSTRIPES5 {
  background: linear-gradient(to right, blue 25%, red 0, red 50%, green 0, green 75%, yellow 0);
  background-size: 8em;
  height: 4em;
}

.clsSTRIPES6 {
  background: linear-gradient(45deg, blue 25%, red 0, red 50%, green 0, green 75%, yellow 0);
  background-size: 8em;
  height: 4em;
}

.clsSTRIPES7 {
  background: linear-gradient(45deg, #4f85f2 25%, #8ca7fe 0, #8ca7fe 50%, #4f85f2 0, #4f85f2 75%, #8ca7fe 0);
  background-size: 4em;
  height: 4em;
}