body {
  margin: 0px;
  padding: 10 50px;
  text-align:center;
}

#topBox {
  margin:10px auto;
  width:500px;
  height:500px;
  text-align:left;
  /* border: 1px solid red; */
}

#rightBox{
  width:400px;
  height:500px;
  margin:10px;
  float:right;
}
#bottomBox {
  width:420px;
  float:right;
  border: 1px solid grean;
  margin-top: 20px;
}

#pantsCanvas {
  width: 495px;
  height: 480px;
  border: 0px solid #9C9898;
}

#controlPanel {
  /* border: 1px solid #9C9898; */
  float:right;
  width:220px;
  text-align: right;
}

#pants{
  padding:10px;
}


.pantsPart{
  height:20px;
  width:100px;
}

.color {
  position: relative;
  float:left;
  width:56px;
  height:56px;
  padding:2px;
  cursor: help;
  margin:4px;
}

.background {
  width:56px;
  height:56px;
}

.stinitko {
  position: absolute;
  top:0px;
  left:0px;
  width:56px;
  height:56px;
  background: transparent url('img/sroub.png') top left;
  padding:2px;
  cursor: help;
  border: 0px solid #EBEBEB;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#activator {
  height:100px;
  border: 1px solid #ba0000;
  border-radius: 5px;
  padding: 3px;
  background: #fff;
  color:#ba0000;
  margin-left: 17px;
}
#activator label {
  cursor:pointer;
}
.nodisplay {
  display:none;
}

#order label{
  width:90px;
  display:inline-block;
}

#pants label{
  width:65px;
  display:inline-block;
}

input.ng-invalid {
  border: 1px red solid;
}

.label {
  position: absolute;
  top:-3px;
  left:-6px;
  font-size: 12px;
  font-weight: bold;
  color: #000;

}