/*
.calc-nav {
    
    position: fixed;
}
*/

.pick-elem {
    margin: 10px 10px 10px 10px;
}

.inline-img {
    background-repeat: repeat;
    margin-left: 25px;
}

.output-info {
    margin: 10px 10px 10px 10px;
    overflow-y: scroll;
}

.calc-grid {
    display: grid;
    grid-template-columns: 100px 600px 350px;
    grid-template-rows: 120px 120px 120px 160px 160px 120px 120px 120px;
    grid-template-areas: "base-info-name base-info-pick output-info" "size-name size-pick output-info" "thickness-name thickness-pick output-info" "works-name works-pick output-info" "shape-name shape-pick output-info" "angles-name angles-pick output-info" "holes-name holes-pick output-info" "connectors-name connectors-pick output-info";
    background-color: #000;
    grid-gap: 1px;
    margin: auto;
    width: 700px;
}

.calc-grid>div {
    background-color: #fff;
}

.base-info-name {
    grid-area: base-info-name;
}

.base-info-pick {
    grid-area: base-info-pick;
}

.output-info {
    grid-area: output-info;
}

.size-name {
    grid-area: size-name;
}

.size-pick {
    grid-area: size-pick;
}

.thickness-name {
    grid-area: thickness-name;
}

.thickness-pick {
    grid-area: thickness-pick;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.works-name {
    grid-area: works-name;
}

.works-pick {
    grid-area: works-pick;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.works-pick img.pl {
    background-image: url(./img/works_01.png);
}

.works-pick img.sh {
    background-image: url(./img/works_02.png);
}

.works-pick img.fg {
    background-image: url(./img/works_03.png);
}

.works-pick img.fg2 {
    background-image: url(./img/works_00.png);
}

.shape-name {
    grid-area: shape-name;
}

.shape-pick {
    grid-area: shape-pick;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.shape-pick img.pl {
    background-image: url(./img/works_04.png);
}

.shape-pick img.sh {
    background-image: url(./img/works_05.png);
}

.shape-pick img.fg {
    background-image: url(./img/works_06.png);
}

.shape-pick img.fg2 {
    background-image: url(./img/works_07.png);
}

.angles-name {
    grid-area: angles-name;
}

.angles-pick {
    grid-area: angles-pick;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.holes-name {
    grid-area: holes-name;
}

.holes-pick {
    grid-area: holes-pick;
}

.connectors-name {
    grid-area: connectors-name;
}

.connectors-pick {
    grid-area: connectors-pick;
}