.cmd-canvas {
    outline: 3px solid #dddddd;;
    width: 430px;
    height: 120px;
    margin: 50px auto 0;
    position: relative;
}

.programmer-canvas {
    outline: 3px solid #dddddd;;
    width: 338px;
    height: 220px;
    margin: 50px auto 0;
    position: relative;
}

.register {
    outline: 3px dashed #dddddd;;
    width: 120px;
    height: 240px;
    margin: 0px auto 0;
    position: relative;
}

.box{
    width: 62px;
    height: 100px;
    position: absolute !important;
    top: 100px;
    font-size: 15px;
    color: #000000;
    line-height: 25px;
    text-align: center;
    cursor: move;
}

.top-buffer { margin-top:20px; }

.center {
  margin: 20px;
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%, -50%);
  transform: translateX(-50%, -50%);
}

.cmd0 { left: 0; top: 0;  background-color: #E74C3C;     position: absolute !important;}
.cmd1 { left: 92px; top: 0; background-color: #8E44AD;     position: absolute !important;}
.cmd2 { left: 184px; top: 0; background-color: #5DADE2; }
.cmd3 { left: 276px; top: 0; background-color: #1ABC9C; }
.cmd4 { left: 368px; top: 0; background-color: #F1C40F; }

.programmer_cmd0 { left: 0; top: 0;  background-color: #E74C3C;     position: absolute !important;}
.programmer_cmd1 { left: 92px; top: 0; background-color: #8E44AD;     position: absolute !important;}
.programmer_cmd2 { left: 184px; top: 0; background-color: #5DADE2; }
.programmer_cmd3 { left: 276px; top: 0; background-color: #1ABC9C; }
.programmer_cmd4 { left: 38px; top: 120px; background-color: #F1C40F; }
.programmer_cmd5 { left: 138px; top: 120px; background-color: #F39C12; }
.programmer_cmd6 { right: 38px; top: 120px; background-color: #34495E; }

.card_hidden { background-color: #dddddd; }