.circle-purple {
    width: 50px;
    height: 50px;
    background-color: #D398E7; 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.circle-orange {
    width: 50px;
    height: 50px;
    background-color:  #E89271;
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; 
}
.circle-blue {
    width: 50px;
    height: 50px;
    background-color:  #3498db; 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; 
}
.circle-yellow {
    width: 50px;
    height: 50px;
    background-color:  #F0C274; 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; 
}
.circle-blue-sm {
    width: 20px;
    height: 20px;
    background-color:  #3498db; 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; 
}
.box {
--p:180deg;
--b:20px;

width:400px;
display:inline-block;
border-radius:500px 500px 0 0;
padding:var(--b) var(--b) 0;
background:
    linear-gradient(var(--p),transparent 50%,#fff 0) top/100% 100%,
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(to right, green , yellow , red);
}
.box::before {
content:"";
display:block;
padding-top:50%;
}

:root {
    --pd-red-950: #450a0a;
    --pd-red-900: #7f1d1d;
    --pd-red-800: #991b1b;
    --pd-red-700: #b91c1c;
    --pd-red-600: #dc2626;
    --pd-red-500: #ef4444;
    --pd-red-100: #fee2e2;
    --pd-red-50: #fef2f2;
    --pd-ink: #3f3f46;
}

body {
    background: linear-gradient(135deg, #fff7f7 0%, #ffffff 42%, #fee2e2 100%);
}

#content-wrapper {
    background: linear-gradient(160deg, rgba(185, 28, 28, 0.06) 0%, rgba(255, 255, 255, 1) 35%, rgba(220, 38, 38, 0.08) 100%);
}

.bg-gradient-primary {
    background-color: var(--pd-red-700) !important;
    background-image:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0) 30%),
        linear-gradient(180deg, var(--pd-red-500) 0%, var(--pd-red-700) 42%, var(--pd-red-900) 100%) !important;
}

.sidebar .sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-dark .sidebar-heading {
    color: rgba(25, 25, 25, 0.78);
}

.sidebar-dark .nav-item .nav-link {
    color: #1f1f1f !important;
}

.sidebar-dark .nav-item .nav-link i,
.sidebar-dark .nav-item .nav-link[data-toggle=collapse]::after {
    color: rgba(31, 31, 31, 0.82) !important;
}

.sidebar-dark .nav-item .nav-link:hover,
.sidebar-dark .nav-item .nav-link:focus {
    color: #000000 !important;
    background-color: rgba(0, 0, 0, 0.08);
}

.sidebar-dark .nav-item .nav-link:hover i,
.sidebar-dark .nav-item .nav-link:focus i,
.sidebar-dark .nav-item.active .nav-link,
.sidebar-dark .nav-item.active .nav-link i {
    color: #000000 !important;
}

.sidebar .nav-item .collapse .collapse-inner {
    border: 1px solid rgba(185, 28, 28, 0.14);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
    background-color: var(--pd-red-100);
    color: var(--pd-red-800);
}

.topbar {
    border-bottom: 2px solid rgba(185, 28, 28, 0.28);
}

.topbar .nav-item .nav-link {
    color: var(--pd-ink);
}

.card {
    border: 1px solid rgba(185, 28, 28, 0.1);
    box-shadow: 0 0.55rem 1.6rem rgba(127, 29, 29, 0.09);
}

.btn-primary {
    color: #fff;
    background: linear-gradient(120deg, var(--pd-red-500) 0%, var(--pd-red-600) 55%, var(--pd-red-800) 100%);
    border-color: var(--pd-red-700);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background: linear-gradient(120deg, var(--pd-red-600) 0%, var(--pd-red-700) 58%, var(--pd-red-900) 100%);
    border-color: var(--pd-red-900);
}

.btn-outline-primary {
    color: var(--pd-red-700);
    border-color: var(--pd-red-700);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.bg-primary,
.badge-primary,
.page-item.active .page-link {
    color: #fff;
    background-color: var(--pd-red-700) !important;
    border-color: var(--pd-red-700) !important;
}

.form-control:focus {
    border-color: rgba(220, 38, 38, 0.45);
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.18);
}

.text-primary,
a.text-primary:hover,
a.text-primary:focus,
#content a {
    color: var(--pd-red-800) !important;
}

#content a:hover {
    color: var(--pd-red-600) !important;
}

.border-left-primary {
    border-left-color: var(--pd-red-700) !important;
}

.border-bottom-primary {
    border-bottom-color: var(--pd-red-700) !important;
}

.scroll-to-top {
    background: linear-gradient(135deg, var(--pd-red-600) 0%, var(--pd-red-900) 100%);
}

.scroll-to-top:focus,
.scroll-to-top:hover {
    background: linear-gradient(135deg, var(--pd-red-700) 0%, var(--pd-red-950) 100%);
}