div.matrix {
  margin: 0px; padding: 0px;
  width: 460px; height: 260px;
  float: left;
  position: relative;
  z-index: 10;
}

div.yellow, div.green, div.blue, div.red {
  margin: 0px; padding: 0px;
  border-radius: 4px;
  position: absolute;
  float: left;
  z-index: 10;
}

div.yellow {  
  background-color: yellow;
  margin-top: 130px; padding-left: 20px;
  width: 440px; height: 30px;
  border: 1px solid #73AD21;
}

.yellow button { 
  background-color: yellow;
}

.fa-grip-lines, .fa-grip-lines-vertical {
    position: relative;
    top: -5px;
}

div.green {  
  background-color: rgb(7, 179, 7); color: #fff;
  margin-top: 170px; padding-left: 20px;
  width: 440px; height: 30px;
  border: 1px solid #000;
}

.green button { 
  background-color: rgb(7, 179, 7); border: 1px solid #fff;
}

div.blue {  
  background-color: rgba(15, 15, 179, 0.979); color: #fff;
  margin-top: 210px; padding-left: 20px;
  width: 440px; height: 30px;
  border: 1px solid rgb(230, 191, 148);
}

.blue button { 
  background-color: rgba(15, 15, 179, 0.979);
}

div.red {  
  background-color: rgba(201, 57, 14, 0.979); color: #fff;
  margin-top: 250px; padding-left: 20px;
  width: 440px; height: 30px;
  border: 1px solid rgb(230, 191, 148);
}

.red button { 
  background-color: rgba(201, 57, 14, 0.979);
}

:is(.yellow, .green, .blue, .red) button {
  margin: 0px 0px 0px 0px;
  height: 28px;
  float: left;
}

:is(.yellow, .green, .blue, .red) span {
  width: 120px; height: 28px;
  float: left;
}

div.colm{ border-color: #dcdcdc;
margin: 0px; padding: 0px;
margin-top: 0px; margin-left: 220px;
height: 290px;
top: 0;
left: 0;
position: relative;
z-index: 10;
}

.colm button { background-color: Gray;
  margin: 0px;margin-top: 95px; margin-left: 13px;
  height: 28px;
  position: absolute;
}
.colm button:hover { background-color: #17a2b8 ;
  margin: 0px;margin-top: 95px; margin-left: 13px;
  height: 28px;
  position: absolute;
}

span[class^="colm-info"] {
  width: 90px; height: 50px;
  position: absolute;
  margin: 0px; margin-top: 25px; margin-left: -15px;
  transform: rotate(90deg);
  font-size: 13px;
  float: left;
  display: flex;
  align-items: center; 
  word-wrap: break-word;
  font-weight: bold;
}

.colm div.info1 { border-color: #dcdcdc; border: 1px solid #4547b3;
  margin: 0px; padding: 0px;
  margin-top: 0px; margin-left: -20px;
  width: 60px;
  height: 260px;
  top: 0;
  left: 0;
  position: relative;
}

.colm div.info1 { background-color: #dcdcdc;
z-index: 10;  opacity: 0.6;
}

.colm div.info2 { border-color: #dcdcdc; border: 1px solid #4547b3;
margin: 0px; padding: 0px;
margin-top: 0px; margin-left: 60px;
width: 60px;
height: 260px;
top: -260px;
left:0px;
position: relative;
}

.colm div.info2 { background-color: #dcdcdc;
z-index: 10;  opacity: 0.6;
}

.colm div.info3 { border-color: #dcdcdc; border: 1px solid #4547b3;
margin: 0px; padding: 0px;
margin-top: 0px; margin-left: 140px;
width: 60px;
height: 260px;
top: -520px;
left:0px;
position: relative;
}

.colm div.info3 { background-color: #dcdcdc;
z-index: 10;  opacity: 0.6;
}

.colm div.info4 { border-color: #dcdcdc; border: 1px solid #4547b3;
margin: 0px; padding: 0px;
margin-top: 0px; margin-left: 220px;
width: 60px;
height: 300px;
top: -900px;
left:0px;
position: relative;
}

.colm  div.info4 { background-color: #dcdcdc;
z-index: 10;  opacity: 0.6;
}

.colm  div.info5 { border-color: #dcdcdc; border: 1px solid #4547b3;
  margin: 0px; padding: 0px;
  margin-top: 0px; margin-left: 300px;
  width: 60px;
  height: 300px;
  top: -1200px;
  left:0px;
  position: relative;
}

.colm  div.info5 { background-color: #dcdcdc;
  z-index: 10;  opacity: 0.6;
}

.colm  div.info6 { border-color: #dcdcdc; border: 1px solid #4547b3;
  margin: 0px; padding: 0px;
  margin-top: 0px; margin-left: 380px;
  width: 60px;
  height: 300px;
  top: -1500px;
  left:0px;
  position: relative;
}

.colm  div.info6 { background-color: #dcdcdc;
  z-index: 10;  opacity: 0.6;
}
/* bid1 */
#bid1, #bid4, #bid7{ color: #000; font-weight: bold;
  display:inline-block;
  margin: 0px 0px 0px 0px;
  padding: 2px 0px 0px 0px;
  width: 59px; height: 29px;
  top: 130px; left: 0px;
  z-index: 10;
  position: relative;text-align:center;
  cursor:pointer;
}

:is(#bid1, #bid4, #bid7):hover {
  background:red !important;;
  margin: 0px 0px 0px 0px; 
  padding: 2px 0px 0px 0px;
  width: 59px;height: 29px;
}

:is(#bid1, #bid4, #bid7) label {
  float:left;
  width: 59px; height: 29px;
}

:is(#bid1, #bid4, #bid7) label span {
  text-align:center;
  display:block;
}

:is(#bid1, #bid4, #bid7) input:checked + span {
  background-color:#911;
  color:#fff;
  margin: -2px 0px 0px 0px;
  padding: 2px 0px 0px 0px;
  width: 59px; height: 29px;
}

/* bid2 */
#bid2, #bid5, #bid8 { color: #000; font-weight: bold;
  display:inline-block;
  margin: 0px 0px 0px 0px;
  padding: 2px 0px 0px 0px;
  width: 59px; height: 29px;
  top: 136px; left: 0px;
  z-index: 10;
  position: relative;text-align:center;
  cursor:pointer;
}

:is(#bid2, #bid5, #bid8):hover {
  background:red;
  margin: 0px 0px 0px 0px;
  padding: 2px 0px 0px 0px;
  width: 59px; height: 29px;
}

:is(#bid2, #bid5, #bid8) label {
  float:left;
  width:59px; height: 29px;
}

:is(#bid2, #bid5, #bid8) label span {
  text-align:center;
  display:block;
}

:is(#bid2, #bid5, #bid8) input:checked + span {
  background-color:#911;
  color:#fff;
  margin: -3px 0px 0px 0px;
  padding: 3px 0px 0px 0px;
  width: 59px; height: 29px;
}

/* bid3 */
#bid3, #bid6, #bid9 { color: #000; font-weight: bold;
  display:inline-block;
  margin: 0px 0px 0px 0px; 
  padding: 0px 0px 0px 0px;
  width: 59px;height: 29px;
  top: 141px; left: 0px;
  z-index: 10;
  position: relative;text-align:center;
  cursor:pointer;
}

:is(#bid3, #bid6, #bid9):hover {
  background:red;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  width: 59px; height: 29px;
}

:is(#bid3, #bid6, #bid9) label {
  float:left;
  width:59px;height: 29px;
}

:is(#bid3, #bid6, #bid9) label span {
  text-align:center;
  display:block;
}

:is(#bid3, #bid6, #bid9) input:checked + span {
  background-color:#911;
  color:#fff;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  width: 59px; height: 29px;
  top: 0px; left: 0px;
}

.mbutton button { 
  width: 80px;
  height: 40px;
  float: left;
} 

.card.mx1 {
  z-index: 10;
  position: relative;
}

.matrix div.focus {
  margin: 5px 0px 0px 140px;
  font-weight: bold;
  position: absolute;
  float: left;
  z-index: 10;
  float: left;
}

.matrix div.sector {
  margin: 80px 0px 0px 10px;
  font-weight: bold;
  position: absolute;
  float: left;
  z-index: 10;
  float: left;
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 2;
}