.viewport {
  border: 1px solid #fff;
  background-color: #cef;
  font-size: 10px;
  font-family: Verdana;
  font-weight: normal;
  padding: 1px;
  margin: 1px;
  width: auto;
  height: auto;
}
.basepanel {
  border: 1px solid #fff;
  background-color: #cef;
  font-size: 10px;
  font-family: Verdana;
  font-weight: normal;
  padding: 1px;
  margin: 1px;
  width: auto;
  height: auto;
}

.columnpanel {
  border: 1px solid #fff;
  background-color: #cef;
  font-size: 12px;
  font-family: Verdana;
  font-weight: normal;
  padding: 1px;
  margin: 1px;
  width: auto;
  height: auto;
}
.basecol {
  border: none;
  background-color: #cef;
}
.basecolc {
  border: 1px solid #fff;
  background-color: #cef;
  font-size: 12px;
  font-family: Verdana;
  font-weight: normal;
  padding: 1px;
  margin: 1px;
}
.basecolc:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.basefield {
  border: 1px solid #ff0;
  background-color: #cdd;
  font-size: 12px;
  font-family: Verdana;
  font-weight: normal;
  padding: 2px;
  margin: 1px;
  width: auto;
  height: auto;
  display: block;
}
.baselabel {
  float: left;
  border: 1px solid #f0f;
  background-color: #caa;
  font-size: 12px;
  font-family: Verdana;
  font-weight: normal;
  padding: 2px;
  margin: 1px;
  width: 100px;
 
}
.basebutton {
  border: 1px solid #ff0;
  background-color: #cdd;
 /* background: transparent; */
  font-size: 12px;
  font-family: Verdana;
  font-weight: normal;
  padding: 2px;
  margin: 1px;
  width: 50px;
  height: auto;
}