html, body {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
}

.breadcrumbs-history {
    width: 770px;
    min-height: 50px;
    padding: 10px 0;
    margin: 0 auto;
}

.breadcrumbs-history .item {
    display: inline-block;
    padding: 0 5px ;
}

.view-root {
    margin: 0 auto;
    width: 770px;
    height: 600px;
    position: relative;
}

.view-root .button {
    font-size: 30px;
    cursor: pointer;
    z-index: 15;
}

.view-root .button-left {position: absolute; left: 10px; top: 280px;}
.view-root .button-right {position: absolute; right: 10px; top: 280px;}
.view-root .button-top {position: absolute; left: 290px; top: 15px;}
.view-root .button-down {position: absolute; left: 290px; bottom: 15px;}
.view-root .button-rright {position: absolute;top: 166px; left: 170px;}
.view-root .button-rleft {position: absolute; top: 390px; left: 404px;}


.view-a {
    position: absolute; top: 50px; left: 50px;
    display: grid;
    width: 670px;
    height: 500px;
    grid-template-columns: repeat(4, 150px);
    grid-template-rows: repeat(3, 150px);
    grid-gap: 20px;
    grid-template-areas: 't1 top t2 t3'
                         'left middle right back'
                         'd1 down d2 d3';
}

.view-a .side-top {grid-area: top;}
.view-a .side-down {grid-area: down;}

.view-a .side-left {grid-area: left;}
.view-a .side-front {grid-area: middle;}
.view-a .side-right {grid-area: right;}
.view-a .side-back {grid-area: back;}

/* */
.controlls-root {
    width: 670px;
    margin: 0 auto;
}


/* */
.side {
    width: 150px;
    height: 150px;
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    grid-template-areas: 'tl tm tr' 'ml mm mr' 'dl dm dr';
    position: relative;
}

.side .num {
    position: absolute;
    top: 66px;
    left: 66px;
    font-weight: bold;
    font-size: 20px;
    color: rgba(0,0,0,0.8);
    width: 20px;
    height: 20px;
}

.side .field {
    border: 1px solid black;
    text-align: center;
    line-height: 50px;
    color: rgba(0,0,0,0);
}

.side .field:hover {color: rgba(0,0,0,1);}

    /* COLORS */
.red {background-color: red;}
.green {background-color: green;}
.white {background-color: white;}
.blue {background-color: blue;}
.orange {background-color: orange;}
.yellow {background-color: yellow;}

#cU:before {content: "U";}
#cL:before {content: "L";}
#cF:before {content: "F";}
#cR:before {content: "R";}
#cD:before {content: "D";}
#cB:before {content: "B";}