.loading-model {
    width: 100%;
    height: 100%;

    background-color: var(--color-background-primary);
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.progressbar {
  width: 240px;
  --color: var(--color-foreground-primary);

  --percent: 0;
  --PI: 3.141592;
  --r: 30;
  --strokeWidth: 1;
  --total: calc( var(--PI) * var(--r));
}

.progressbar circle {
  r: var(--r);
}

.progressbar text {
  fill: var(--color);
}

.progressbar__percent {
    font-size: 18px;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.3px;
    color: var(--color-foreground-primary);
}

.progressbar__track {
    fill: transparent;
    stroke: transparent;
    stroke-width: var(--strokeWidth);
}

.progressbar__thumb {
    fill: transparent;
    stroke: var(--color);
    stroke-width: var(--strokeWidth);
    stroke-linecap: round;
    stroke-dasharray: calc(2 * var(--total) * var(--percent) / 100) calc(2 * var(--total));
    transform-origin: center;
    transform-box: fill-box;
    transform: rotate(-90deg);
    transition: stroke-dasharray 0.1s linear;
}

/* модалка 3Д */
.modal-3d.show {
    display: flex;
}

model-viewer {
    background-color: transparent !important;
    width: 100%;
    height: 100%;
}

/* Адаптация на маленькие экраны (< 1920)*/
/* 768 */
@media screen and (max-width: 1200px) {
    .progressbar {
        width: 160px;
    }
}

/* 375 */
@media screen and (max-width: 725px) {
    .progressbar {
        width: 100px;
    }
}