.logo{
    background-image: url("/static/image/logo.png");
    grid-column: 1 / span 4;
    grid-row: 1 / span 3;
}
.satellite{
    background-image: url("/static/image/sat.png");
    grid-column: 31 / span 4;
    grid-row: 5 / span 4;
}
.antenna-a{
    background-image: url("/static/image/antenna-transparent.png");
    grid-column: 23 / span 6;
    grid-row: 10 / span 9;
}
.antenna-b{
    background-image: url("/static/image/antenna-transparent.png");
    grid-column: 37 / span 6;
    grid-row: 10 / span 9;
    transform: scaleX(-1);
}
.buc-a{
    background-image: url("/static/image/buc.png");
    grid-column: 17 / span 2;
    grid-row: 19 / span 1;
}
.buc-b{
    background-image: url("/static/image/buc.png");
    grid-column: 47 / span 2;
    grid-row: 19 / span 1;
    transform: scaleX(-1);
}
.buc-a-settings{
    grid-column: 6 / span 10;
    grid-row: 19 / span 1;
}
.buc-b-settings{
    grid-column: 50 / span 10;
    grid-row: 19 / span 1;
}
.lnb-a{
    background-image: url("/static/image/lnb.png");
    grid-column: 17 / span 2;
    grid-row: 17 / span 1;
}
.lnb-b{
    background-image: url("/static/image/lnb.png");
    grid-column: 47 / span 2;
    grid-row: 17 / span 1;
    transform: scaleX(-1);
}
.lnb-a-settings{
    grid-column: 6 / span 10;
    grid-row: 17 / span 1;
}
.lnb-b-settings{
    grid-column: 50 / span 10;
    grid-row: 17 / span 1;
}

.device-a{
    background-image: url("/static/image/ctt-230.jpg");
    grid-column: 15 / span 10;
    grid-row: 25 / span 1;
    transform: translateY( -50% );
    z-index: 3;
}
.device-b{
    background-image: url("/static/image/ctt-230.jpg");
    grid-column: 40 / span 10;
    grid-row: 25 / span 1;
    transform: translateY( -50% );
    z-index: 3;
}
.cable-a{
    border-left: solid 2px black;
    border-top: solid 2px black;
    grid-column: 19 / span 4;
    grid-row: 17 / span 8;
    z-index: 2;
}
.cable-b{
    border-right: solid 2px black;
    border-top: solid 2px black;
    grid-column: 43 / span 4;
    grid-row: 17 / span 8;
    z-index: 2;
}
.cable-a-settings{
    grid-column: 20 / span 12;
    grid-row: 19 / span 1;
}
.cable-b-settings{
    grid-column: 34 / span 12;
    grid-row: 19 / span 1;
}

.satellite-settings{
    grid-column: 26 / span 14;
    grid-row-start: 2;
}
.transponder-a-settings{
    grid-column: 19 / span 10;
    grid-row: 6 / span 1;
}
.transponder-a-settings>.settings{
    border-color: darkblue;
    color: darkblue;
}
.transponder-b-settings{
    grid-column: 37 / span 10;
    grid-row: 6 / span 1;
}
.transponder-b-settings>.settings{
    border-color: green;
    color: green;
    box-shadow: -2px 2px 5px -1px;
}
.site-a-settings{
    grid-column: 14 / span 12;
    grid-row: 27 / span 1;
    transform: translateY( -50%);
}
.site-b-settings{
    grid-column: 39 / span 12;
    grid-row: 27 / span 1;
    transform: translateY( -50%);
}
.antenna-a-settings{
    grid-column: 10 / span 12;
    grid-row: 8 / span 1;
}
.antenna-b-settings{
    grid-column: 44 / span 12;
    grid-row: 8 / span 1;
}
.calculate{
    grid-column: 28 / span 10;
    grid-row: 35 / span 1;
}
.print-button{
    grid-column: 40 / span 4;
    grid-row: 35 / span 1;
}



.arrow-a-blue{
    background-image: url("/static/image/arrow_blue.png");
    grid-column: 28 / span 3;
    grid-row: 8 / span 3;
}
.arrow-a-green{
    background-image: url("/static/image/arrow_green.png");
    grid-column: 29 / span 3;
    grid-row: 9 / span 3;
    transform: rotate(180deg);
}
.arrow-b-blue{
    background-image: url("/static/image/arrow_blue.png");
    grid-column: 34 / span 3;
    grid-row: 9 / span 3;
    transform: rotate(90deg);
}
.arrow-b-green{
    background-image: url("/static/image/arrow_green.png");
    grid-column: 35 / span 3;
    grid-row: 8 / span 3;
    transform: rotate(-90deg);
}

.io-control{
    grid-column: 60 / span 3;
    grid-row: 2 / span 3;
}