.polar-diagram-wrapper {
    width: 100%;
    max-width: 600px;        /* или 90vmin, как у .sat-plot */
    padding: 0 1rem;         /* отступы по бокам на маленьких экранах */
    box-sizing: border-box;
}

.sat-plot {
    position: relative;
    margin: 0 auto;
}

.sat-plot-wrap {
    background-color: #000000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sat-plot-circle {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 100%;
    border: #ffffff 1px solid;
}

.sat-plot-circle20 {
    position: absolute;
    top: 6.55%;
    right: 6.55%;
    left: 6.55%;
    bottom: 6.55%;
    border-radius: 100%;
    border: #ffffff 1px dotted;
}

.sat-plot-circle30 {
    position: absolute;
    top: 16.66%;
    right: 16.66%;
    left: 16.66%;
    bottom: 16.66%;
    border-radius: 100%;
    border: #ffffff 1px dotted;
}

.sat-plot-circle40 {
    position: absolute;
    top: 24.55%;
    right: 24.55%;
    left: 24.55%;
    bottom: 24.55%;
    border-radius: 100%;
    border: #ffffff 1px dotted;
}

.sat-plot-circle60 {
    position: absolute;
    top: 33.33%;
    right: 33.33%;
    left: 33.33%;
    bottom: 33.33%;
    border-radius: 100%;
    border: #ffffff 1px dotted;
}
.sat-plot-circle-text90 {
    position: absolute;
    font-size: 20px;
    bottom: 50%;
    left: 51%;
    color: #ffffff;
}
.sat-plot-circle-text60 {
    position: absolute;
    font-size: 20px;
    bottom: 66.66%;
    left: 51%;
    color: #ffffff;
}
.sat-plot-circle-text30 {
    position: absolute;
    font-size: 20px;
    bottom: 83.33%;
    left: 51%;
    color: #ffffff;
}
.sat-direction {
    position: absolute;
    font-size: 14px;
    color: #2d2d2d;
}
.sat-direction.w {
    bottom: 50%;
    left: -13px;
}
.sat-direction.s {
    left: calc(50% + 4px);
    bottom: 0;
}
.sat-direction.e {
    bottom: 50%;
    right: -10px;
}
.sat-direction.n {
    left: calc(50% + 4px);
    top: 0;
}

.sat-plot-x0 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border: 0;
    border-top: #999999 1px dotted;
}
.sat-plot-y0 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border: 0;
    border-right: #999999 1px dotted;
}
.sat-plot-x1 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border: 0;
    border-top: #999999 1px dotted;
}
.sat-plot-y1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border: 0;
    border-right: #999999 1px dotted;
}

.sat-ball {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 10%;
    left: 10%;
    line-height: 1;
    border-radius: 100%;
    border: #999999 1px solid;
    transition: opacity 1s ease-in-out, top 0.8s ease-in-out, left 0.8s ease-in-out;
}

.sat-ball-legend {
    padding-bottom: 8px;
}

#legent-container-polar {
    text-align: center;
}

.sat-ball-legend em {
    font-style: normal;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 8px;
}

.sat-ball-legend .sat-ball {
    position: initial;
    display: inline-block;
}

.sat-ball span {
    display: block;
    color: white;
    font-size: 8px;
    line-height: 1;
    text-align: center;
    margin-top: 6px;
}

.glo {
    background:linear-gradient(to bottom,
    #ffffff 0, #ffffff 33%, #0000ff 33%, #0000ff 67%, #ff0000 67%, #ff0000 100%);
}
.gal {
    background-color: #334b83;
}
.bd {
    background-color: #ec2525;
    border-color: #8f0c0c;
}
.irn {
    background:linear-gradient(to bottom,
    #e79e07 0, #e79e07 33%, #ffffff 33%, #ffffff 67%, #13b408 67%, #13b408 100%);
}
.irn span {
    color: black;
}
.qzss {
    background-color: #ab1010;
    border-color: #ab1010;
}
.sbs {
    background-color: #ffffff;
    border-color: #9b9b9b;
}
.sbs span {
    color: black;
}
.gps {
    background:linear-gradient( to bottom right, #154dce, #4572da, #e35454, #ec0808, #ec0808);
}