html {
    height: 100%;
    box-sizing: border-box;
}

body {
    --bd-purple: #4c0bce;
    --bd-violet: #712cf9;
    --bd-accent: #ffe484;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bd-accent-rgb: 255, 228, 132;
    --bd-pink-rgb: 214, 51, 132;
    --bd-teal-rgb: 32, 201, 151;

    height: 100%;
}

.bg-colorful {
    background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 85%),
    radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.5), transparent 50%),
    radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), 0.5), transparent 50%),
    radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), 0.5), transparent 50%),
    radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), 0.5), transparent 50%);
}

.order-id {
    position: relative;
    z-index: 1;
}

.order-id:after {
    content: '';
    display: block;
    width: 105%;
    height: 5px;
    background-color: #CBDCFF;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.circle-progress {
    width: 60px;
    height: 60px;
}

.circle-progress-value {
    stroke-width: 5px;
    stroke: white;
}

.circle-progress-circle {
    stroke-width: 10px;
    stroke: #198754;
}

.circle-progress-text {
    fill: #198754;
    font-size: 1.55rem;
}