.shadow-md {
    box-shadow: 0 0 0.875rem 0 rgba(var(--color-grey-rgb), 0.05);
}

/* =====
    Position
===== */
.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.relative {
    position: relative;
}

.static {
    position: static;
}

.sticky {
    position: sticky;
}


.object-contain {
    object-fit: contain;
}

.object-cover {
    object-fit: cover;
}

.object-fill {
    object-fit: fill;
}

.object-none {
    object-fit: none;
}

.object-scale-down {
    object-fit: scale-down;
}

.object-top-left {
    object-position: top left;
}

.object-top {
    object-position: top;
}

.object-top-right {
    object-position: top right;
}

.object-left {
    object-position: left;
}

.object-center {
    object-position: center;
}

.object-right {
    object-position: right;
}

.object-bottom-left {
    object-position: bottom left;
}

.object-bottom {
    object-position: bottom;
}

.object-bottom-right {
    object-position: bottom right;
}

.whitespace-normal {
    white-space: normal;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.whitespace-pre {
    white-space: pre;
}

.whitespace-pre-line {
    white-space: pre-line;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

.whitespace-break-spaces {
    white-space: break-spaces;
}

/* =====
    Transforms
===== */
[class^="flip"],
[class*=" flip"],
[class^="-rotate"],
[class*=" -rotate"],
[class^="rotate"],
[class*=" rotate"],
[class^="-translate"],
[class*=" -translate"],
[class^="translate"],
[class*=" translate"],
[class^="-scale"],
[class*=" -scale"],
[class^="scale"],
[class*=" scale"],
[class^="-skew"],
[class*=" -skew"] [class^="skew"],
[class*=" skew"] {
    --translate: 0;
    --rotate: 0;
    --skew: 0;
    --scale: 1;
    transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
}

/*
    Translate:
*/
.-translate-x-px {
    transform: translateX(-1px);
}

.-translate-y-px {
    transform: translateY(-1px);
}

.-translate-x-0\.5 {
    transform: translateX(-0.125rem);
}

.-translate-y-0\.5 {
    transform: translateY(-0.125rem);
}

.-translate-x-1 {
    transform: translateX(-0.25rem);
}

.-translate-y-1 {
    transform: translateY(-0.25rem);
}

.-translate-x-1\.5 {
    transform: translateX(-0.375rem);
}

.-translate-y-1\.5 {
    transform: translateY(-0.375rem);
}

.-translate-x-2 {
    transform: translateX(-0.5rem);
}

.-translate-y-2 {
    transform: translateY(-0.5rem);
}

.-translate-x-2\.5 {
    transform: translateX(-0.625rem);
}

.-translate-y-2\.5 {
    transform: translateY(-0.625rem);
}

.-translate-x-3 {
    transform: translateX(-0.75rem);
}

.-translate-y-3 {
    transform: translateY(-0.75rem);
}

.-translate-x-3\.5 {
    transform: translateX(-0.875rem);
}

.-translate-y-3\.5 {
    transform: translateY(-0.875rem);
}

.-translate-x-4 {
    transform: translateX(-1rem);
}

.-translate-y-4 {
    transform: translateY(-1rem);
}

.-translate-x-5 {
    transform: translateX(-1.25rem);
}

.-translate-y-5 {
    transform: translateY(-1.25rem);
}

.-translate-x-6 {
    transform: translateX(-1.5rem);
}

.-translate-y-6 {
    transform: translateY(-1.5rem);
}

.-translate-x-7 {
    transform: translateX(-1.75rem);
}

.-translate-y-7 {
    transform: translateY(-1.75rem);
}

.-translate-x-8 {
    transform: translateX(-2rem);
}

.-translate-y-8 {
    transform: translateY(-2rem);
}

.-translate-x-9 {
    transform: translateX(-2.25rem);
}

.-translate-y-9 {
    transform: translateY(-2.25rem);
}

.-translate-x-10 {
    transform: translateX(-2.5rem);
}

.-translate-y-10 {
    transform: translateY(-2.5rem);
}

.-translate-x-11 {
    transform: translateX(-2.75rem);
}

.-translate-y-11 {
    transform: translateY(-2.75rem);
}

.-translate-x-12 {
    transform: translateX(-3rem);
}

.-translate-y-12 {
    transform: translateY(-3rem);
}

.-translate-x-14 {
    transform: translateX(-3.5rem);
}

.-translate-y-14 {
    transform: translateY(-3.5rem);
}

.-translate-x-16 {
    transform: translateX(-4rem);
}

.-translate-y-16 {
    transform: translateY(-4rem);
}

.-translate-x-20 {
    transform: translateX(-5rem);
}

.-translate-y-20 {
    transform: translateY(-5rem);
}

.-translate-x-24 {
    transform: translateX(-6rem);
}

.-translate-y-24 {
    transform: translateY(-6rem);
}

.-translate-x-28 {
    transform: translateX(-7rem);
}

.-translate-y-28 {
    transform: translateY(-7rem);
}

.-translate-x-32 {
    transform: translateX(-8rem);
}

.-translate-y-32 {
    transform: translateY(-8rem);
}

.-translate-x-36 {
    transform: translateX(-9rem);
}

.-translate-y-36 {
    transform: translateY(-9rem);
}

.-translate-x-40 {
    transform: translateX(-10rem);
}

.-translate-y-40 {
    transform: translateY(-10rem);
}

.-translate-x-44 {
    transform: translateX(-11rem);
}

.-translate-y-44 {
    transform: translateY(-11rem);
}

.-translate-x-48 {
    transform: translateX(-12rem);
}

.-translate-y-48 {
    transform: translateY(-12rem);
}

.-translate-x-52 {
    transform: translateX(-13rem);
}

.-translate-y-52 {
    transform: translateY(-13rem);
}

.-translate-x-56 {
    transform: translateX(-14rem);
}

.-translate-y-56 {
    transform: translateY(-14rem);
}

.-translate-x-60 {
    transform: translateX(-15rem);
}

.-translate-y-60 {
    transform: translateY(-15rem);
}

.-translate-x-64 {
    transform: translateX(-16rem);
}

.-translate-y-64 {
    transform: translateY(-16rem);
}

.-translate-x-72 {
    transform: translateX(-18rem);
}

.-translate-y-72 {
    transform: translateY(-18rem);
}

.-translate-x-80 {
    transform: translateX(-20rem);
}

.-translate-y-80 {
    transform: translateY(-20rem);
}

.-translate-x-96 {
    transform: translateX(-24rem);
}

.-translate-y-96 {
    transform: translateY(-24rem);
}

.-translate-x-1\/2 {
    transform: translateX(-50%);
}

.-translate-x-1\/3 {
    transform: translateX(-33.333333%);
}

.-translate-x-2\/3 {
    transform: translateX(-66.666667%);
}

.-translate-x-1\/4 {
    transform: translateX(-25%);
}

.-translate-x-2\/4 {
    transform: translateX(-50%);
}

.-translate-x-3\/4 {
    transform: translateX(-75%);
}

.-translate-x-full {
    transform: translateX(-100%);
}

.-translate-y-1\/2 {
    transform: translateY(-50%);
}

.-translate-y-1\/3 {
    transform: translateY(-33.333333%);
}

.-translate-y-2\/3 {
    transform: translateY(-66.666667%);
}

.-translate-y-1\/4 {
    transform: translateY(-25%);
}

.-translate-y-2\/4 {
    --translate-y: -50%;
}

.-translate-y-3\/4 {
    transform: translateY(-75%);
}

.-translate-y-full {
    transform: translateY(-100%);
}

.translate-x-0 {
    transform: translateX(0px);
}

.translate-y-0 {
    transform: translateY(0px);
}

.translate-x-px {
    transform: translateX(1px);
}

.translate-y-px {
    transform: translateY(1px);
}

.translate-x-0\.5 {
    transform: translateX(0.125rem);
}

.translate-y-0\.5 {
    transform: translateY(0.125rem);
}

.translate-x-1 {
    transform: translateX(0.25rem);
}

.translate-y-1 {
    transform: translateY(0.25rem);
}

.translate-x-1\.5 {
    transform: translateX(0.375rem);
}

.translate-y-1\.5 {
    transform: translateY(0.375rem);
}

.translate-x-2 {
    transform: translateX(0.5rem);
}

.translate-y-2 {
    transform: translateY(0.5rem);
}

.translate-x-2\.5 {
    transform: translateX(0.625rem);
}

.translate-y-2\.5 {
    transform: translateY(0.625rem);
}

.translate-x-3 {
    transform: translateX(0.75rem);
}

.translate-y-3 {
    transform: translateY(0.75rem);
}

.translate-x-3\.5 {
    transform: translateX(0.875rem);
}

.translate-y-3\.5 {
    transform: translateY(0.875rem);
}

.translate-x-4 {
    transform: translateX(1rem);
}

.translate-y-4 {
    transform: translateY(1rem);
}

.translate-x-5 {
    transform: translateX(1.25rem);
}

.translate-y-5 {
    transform: translateY(1.25rem);
}

.translate-x-6 {
    transform: translateX(1.5rem);
}

.translate-y-6 {
    transform: translateY(1.5rem);
}

.translate-x-7 {
    transform: translateX(1.75rem);
}

.translate-y-7 {
    transform: translateY(1.75rem);
}

.translate-x-8 {
    transform: translateX(2rem);
}

.translate-y-8 {
    transform: translateY(2rem);
}

.translate-x-9 {
    transform: translateX(2.25rem);
}

.translate-y-9 {
    transform: translateY(2.25rem);
}

.translate-x-10 {
    transform: translateX(2.5rem);
}

.translate-y-10 {
    transform: translateY(2.5rem);
}

.translate-x-11 {
    transform: translateX(2.75rem);
}

.translate-y-11 {
    transform: translateY(2.75rem);
}

.translate-x-12 {
    transform: translateX(3rem);
}

.translate-y-12 {
    transform: translateY(3rem);
}

.translate-x-14 {
    transform: translateX(3.5rem);
}

.translate-y-14 {
    transform: translateY(3.5rem);
}

.translate-x-16 {
    transform: translateX(4rem);
}

.translate-y-16 {
    transform: translateY(4rem);
}

.translate-x-20 {
    transform: translateX(5rem);
}

.translate-y-20 {
    transform: translateY(5rem);
}

.translate-x-24 {
    transform: translateX(6rem);
}

.translate-y-24 {
    transform: translateY(6rem);
}

.translate-x-28 {
    transform: translateX(7rem);
}

.translate-y-28 {
    transform: translateY(7rem);
}

.translate-x-32 {
    transform: translateX(8rem);
}

.translate-y-32 {
    transform: translateY(8rem);
}

.translate-x-36 {
    transform: translateX(9rem);
}

.translate-y-36 {
    transform: translateY(9rem);
}

.translate-x-40 {
    transform: translateX(10rem);
}

.translate-y-40 {
    transform: translateY(10rem);
}

.translate-x-44 {
    transform: translateX(11rem);
}

.translate-y-44 {
    transform: translateY(11rem);
}

.translate-x-48 {
    transform: translateX(12rem);
}

.translate-y-48 {
    transform: translateY(12rem);
}

.translate-x-52 {
    transform: translateX(13rem);
}

.translate-y-52 {
    transform: translateY(13rem);
}

.translate-x-56 {
    transform: translateX(14rem);
}

.translate-y-56 {
    transform: translateY(14rem);
}

.translate-x-60 {
    transform: translateX(15rem);
}

.translate-y-60 {
    transform: translateY(15rem);
}

.translate-x-64 {
    transform: translateX(16rem);
}

.translate-y-64 {
    transform: translateY(16rem);
}

.translate-x-72 {
    transform: translateX(18rem);
}

.translate-y-72 {
    transform: translateY(18rem);
}

.translate-x-80 {
    transform: translateX(20rem);
}

.translate-y-80 {
    transform: translateY(20rem);
}

.translate-x-96 {
    transform: translateX(24rem);
}

.translate-y-96 {
    transform: translateY(24rem);
}

.translate-x-1\/2 {
    transform: translateX(50%);
}

.translate-x-1\/3 {
    transform: translateX(33.333333%);
}

.translate-x-2\/3 {
    transform: translateX(66.666667%);
}

.translate-x-1\/4 {
    transform: translateX(25%);
}

.translate-x-2\/4 {
    --translate-x: 50%;
}

.translate-x-3\/4 {
    transform: translateX(75%);
}

.translate-x-full {
    transform: translateX(100%);
}

.translate-y-1\/2 {
    transform: translateY(50%);
}

.translate-y-1\/3 {
    transform: translateY(33.333333%);
}

.translate-y-2\/3 {
    transform: translateY(66.666667%);
}

.translate-y-1\/4 {
    transform: translateY(25%);
}

.translate-y-2\/4 {
    transform: translateY(50%);
}

.translate-y-3\/4 {
    transform: translateY(75%);
}

.translate-y-full {
    transform: translateY(100%);
}

/* =====
    Psuedo classes
===== */
.hide-after::after {
    display: none;
}

.hide-before::before {
    display: none;
}

/* =====
    Animations
===== */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 100;
    }
}

.fade-in-1s {
    animation: fade-in 1s;
}

.fade-in-2s {
    animation: fade-in 2s;
}

.fade-in-3s {
    animation: fade-in 3s;
}


@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animatespin-1s {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

.animate-spin-2s {
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.animate-spin-3s {
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

/* =====
    Background color
===== */
.bg-danger {
    background-color: var(--color-danger) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
}

.bg-gradient-light {
    background: rgb(248, 248, 249) !important;
    background: linear-gradient(60deg, rgba(248, 248, 249, 1) 0%, rgba(242, 242, 255, 1) 100%) !important;
}

.bg-gradient-dark {
    background: rgb(4, 21, 39) !important;
    background: linear-gradient(45deg, rgba(83, 43, 51, 1) 0%, rgba(4, 21, 39, 1) 100%) !important;
}

.bg-dots {
    background-color: var(--app-background-color);
    background-image: radial-gradient(circle at 1px 1px, var(--color-grey-500) 1px, transparent 0);
    background-size: 2rem 2rem;
    background-position-x: center;
    background-position-y: center;
}

/*
    Amber
*/
.bg-amber-100 {
    background-color: var(--color-amber-100) !important;
}

.bg-amber-200 {
    background-color: var(--color-amber-200) !important;
}

.bg-amber-300 {
    background-color: var(--color-amber-300) !important;
}

.bg-amber-400 {
    background-color: var(--color-amber-400) !important;
}

.bg-amber-500 {
    background-color: var(--color-amber-500) !important;
}

.bg-amber-600 {
    background-color: var(--color-amber-600) !important;
}

.bg-amber-700 {
    background-color: var(--color-amber-700) !important;
}

.bg-amber-800 {
    background-color: var(--color-amber-800) !important;
}

.bg-amber-900 {
    background-color: var(--color-amber-900) !important;
}

/*
    Blue
*/
.bg-blue-100 {
    background-color: var(--color-blue-100) !important;
}

.bg-blue-200 {
    background-color: var(--color-blue-200) !important;
}

.bg-blue-300 {
    background-color: var(--color-blue-300) !important;
}

.bg-blue-400 {
    background-color: var(--color-blue-400) !important;
}

.bg-blue-500 {
    background-color: var(--color-blue-500) !important;
}

.bg-blue-600 {
    background-color: var(--color-blue-600) !important;
}

.bg-blue-700 {
    background-color: var(--color-blue-700) !important;
}

.bg-blue-800 {
    background-color: var(--color-blue-800) !important;
}

.bg-blue-900 {
    background-color: var(--color-blue-900) !important;
}

/*
    Green
*/
.bg-green-100 {
    background-color: var(--color-green-100) !important;
}

.bg-green-200 {
    background-color: var(--color-green-200) !important;
}

.bg-green-300 {
    background-color: var(--color-green-300) !important;
}

.bg-green-400 {
    background-color: var(--color-green-400) !important;
}

.bg-green-500 {
    background-color: var(--color-green-500) !important;
}

.bg-green-600 {
    background-color: var(--color-green-600) !important;
}

.bg-green-700 {
    background-color: var(--color-green-700) !important;
}

.bg-green-800 {
    background-color: var(--color-green-800) !important;
}

.bg-green-900 {
    background-color: var(--color-green-900) !important;
}

/*
    Grey
*/
.bg-grey-100 {
    background-color: var(--color-grey-100) !important;
}

.bg-grey-200 {
    background-color: var(--color-grey-200) !important;
}

.bg-grey-300 {
    background-color: var(--color-grey-300) !important;
}

.bg-grey-400 {
    background-color: var(--color-grey-400) !important;
}

.bg-grey-500 {
    background-color: var(--color-grey-500) !important;
}

.bg-grey-600 {
    background-color: var(--color-grey-600) !important;
}

.bg-grey-700 {
    background-color: var(--color-grey-700) !important;
}

.bg-grey-800 {
    background-color: var(--color-grey-800) !important;
}

.bg-grey-900 {
    background-color: var(--color-grey-900) !important;
}

.hover\:bg-grey-100:hover {
    background-color: var(--color-grey-100) !important;
}

.hover\:bg-grey-200:hover {
    background-color: var(--color-grey-200) !important;
}

.hover\:bg-grey-300:hover {
    background-color: var(--color-grey-300) !important;
}

.hover\:bg-grey-400:hover {
    background-color: var(--color-grey-400) !important;
}

.hover\:bg-grey-500:hover {
    background-color: var(--color-grey-500) !important;
}

.hover\:bg-grey-600:hover {
    background-color: var(--color-grey-600) !important;
}

.hover\:bg-grey-700:hover {
    background-color: var(--color-grey-700) !important;
}

.hover\:bg-grey-800:hover {
    background-color: var(--color-grey-800) !important;
}

.hover\:bg-grey-900:hover {
    background-color: var(--color-grey-900) !important;
}

/*
    Purple
*/
.bg-purple-100 {
    background-color: var(--color-purple-100) !important;
}

.bg-purple-200 {
    background-color: var(--color-purple-200) !important;
}

.bg-purple-300 {
    background-color: var(--color-purple-300) !important;
}

.bg-purple-400 {
    background-color: var(--color-purple-400) !important;
}

.bg-purple-500 {
    background-color: var(--color-purple-500) !important;
}

.bg-purple-600 {
    background-color: var(--color-purple-600) !important;
}

.bg-purple-700 {
    background-color: var(--color-purple-700) !important;
}

.bg-purple-800 {
    background-color: var(--color-purple-800) !important;
}

.bg-purple-900 {
    background-color: var(--color-purple-900) !important;
}

/*
    Red
*/
.bg-red-100 {
    background-color: var(--color-red-100) !important;
}

.bg-red-200 {
    background-color: var(--color-red-200) !important;
}

.bg-red-300 {
    background-color: var(--color-red-300) !important;
}

.bg-red-400 {
    background-color: var(--color-red-400) !important;
}

.bg-red-500 {
    background-color: var(--color-red-500) !important;
}

.bg-red-600 {
    background-color: var(--color-red-600) !important;
}

.bg-red-700 {
    background-color: var(--color-red-700) !important;
}

.bg-red-800 {
    background-color: var(--color-red-800) !important;
}

.bg-red-900 {
    background-color: var(--color-red-900) !important;
}

/*
    Rose
*/
.bg-rose-100 {
    background-color: var(--color-rose-100) !important;
}

.bg-rose-200 {
    background-color: var(--color-rose-200) !important;
}

.bg-rose-300 {
    background-color: var(--color-rose-300) !important;
}

.bg-rose-400 {
    background-color: var(--color-rose-400) !important;
}

.bg-rose-500 {
    background-color: var(--color-rose-500) !important;
}

.bg-rose-600 {
    background-color: var(--color-rose-600) !important;
}

.bg-rose-700 {
    background-color: var(--color-rose-700) !important;
}

.bg-rose-800 {
    background-color: var(--color-rose-800) !important;
}

.bg-rose-900 {
    background-color: var(--color-rose-900) !important;
}

/*
    Yellow
*/
.bg-yellow-100 {
    background-color: var(--color-yellow-100) !important;
}

.bg-yellow-200 {
    background-color: var(--color-yellow-200) !important;
}

.bg-yellow-300 {
    background-color: var(--color-yellow-300) !important;
}

.bg-yellow-400 {
    background-color: var(--color-yellow-400) !important;
}

.bg-yellow-500 {
    background-color: var(--color-yellow-500) !important;
}

.bg-yellow-600 {
    background-color: var(--color-yellow-600) !important;
}

.bg-yellow-700 {
    background-color: var(--color-yellow-700) !important;
}

.bg-yellow-800 {
    background-color: var(--color-yellow-800) !important;
}

.bg-yellow-900 {
    background-color: var(--color-yellow-900) !important;
}

/* =====
    Color
===== */
.color-danger {
    color: var(--color-danger) !important;
    stroke: var(--color-danger) !important;
}

.color-primary {
    color: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
}

.color-success {
    color: var(--color-success) !important;
    stroke: var(--color-success) !important;
}

.color-warning {
    color: var(--color-warning) !important;
    stroke: var(--color-warning) !important;
}

/*
    Amber
*/
.color-amber-100 {
    color: var(--color-amber-100) !important;
    stroke: var(--color-amber-100) !important;
}

.color-amber-200 {
    color: var(--color-amber-200) !important;
    stroke: var(--color-amber-200) !important;
}

.color-amber-300 {
    color: var(--color-amber-300) !important;
    stroke: var(--color-amber-300) !important;
}

.color-amber-400 {
    color: var(--color-amber-400) !important;
    stroke: var(--color-amber-400) !important;
}

.color-amber-500 {
    color: var(--color-amber-500) !important;
    stroke: var(--color-amber-500) !important;
}

.color-amber-600 {
    color: var(--color-amber-600) !important;
    stroke: var(--color-amber-600) !important;
}

.color-amber-700 {
    color: var(--color-amber-700) !important;
    stroke: var(--color-amber-700) !important;
}

.color-amber-800 {
    color: var(--color-amber-800) !important;
    stroke: var(--color-amber-800) !important;
}

.color-amber-900 {
    color: var(--color-amber-900) !important;
    stroke: var(--color-amber-900) !important;
}

/*
    Blue
*/
.color-blue-100 {
    color: var(--color-blue-100) !important;
    stroke: var(--color-blue-100) !important;
}

.color-blue-200 {
    color: var(--color-blue-200) !important;
    stroke: var(--color-blue-200) !important;
}

.color-blue-300 {
    color: var(--color-blue-300) !important;
    stroke: var(--color-blue-300) !important;
}

.color-blue-400 {
    color: var(--color-blue-400) !important;
    stroke: var(--color-blue-400) !important;
}

.color-blue-500 {
    color: var(--color-blue-500) !important;
    stroke: var(--color-blue-500) !important;
}

.color-blue-600 {
    color: var(--color-blue-600) !important;
    stroke: var(--color-blue-600) !important;
}

.color-blue-700 {
    color: var(--color-blue-700) !important;
    stroke: var(--color-blue-700) !important;
}

.color-blue-800 {
    color: var(--color-blue-800) !important;
    stroke: var(--color-blue-800) !important;
}

.color-blue-900 {
    color: var(--color-blue-900) !important;
    stroke: var(--color-blue-900) !important;
}

/*
    Green
*/
.color-green-100 {
    color: var(--color-green-100) !important;
    stroke: var(--color-green-100) !important;
}

.color-green-200 {
    color: var(--color-green-200) !important;
    stroke: var(--color-green-200) !important;
}

.color-green-300 {
    color: var(--color-green-300) !important;
    stroke: var(--color-green-300) !important;
}

.color-green-400 {
    color: var(--color-green-400) !important;
    stroke: var(--color-green-400) !important;
}

.color-green-500 {
    color: var(--color-green-500) !important;
    stroke: var(--color-green-500) !important;
}

.color-green-600 {
    color: var(--color-green-600) !important;
    stroke: var(--color-green-600) !important;
}

.color-green-700 {
    color: var(--color-green-700) !important;
    stroke: var(--color-green-700) !important;
}

.color-green-800 {
    color: var(--color-green-800) !important;
    stroke: var(--color-green-800) !important;
}

.color-green-900 {
    color: var(--color-green-900) !important;
    stroke: var(--color-green-900) !important;
}

/*
    Grey
*/
.color-grey-100 {
    color: var(--color-grey-100) !important;
    stroke: var(--color-grey-100) !important;
}

.color-grey-200 {
    color: var(--color-grey-200) !important;
    stroke: var(--color-grey-200) !important;
}

.color-grey-300 {
    color: var(--color-grey-300) !important;
    stroke: var(--color-grey-300) !important;
}

.color-grey-400 {
    color: var(--color-grey-400) !important;
    stroke: var(--color-grey-400) !important;
}

.color-grey-500 {
    color: var(--color-grey-500) !important;
    stroke: var(--color-grey-500) !important;
}

.color-grey-600 {
    color: var(--color-grey-600) !important;
    stroke: var(--color-grey-600) !important;
}

.color-grey-700 {
    color: var(--color-grey-700) !important;
    stroke: var(--color-grey-700) !important;
}

.color-grey-800 {
    color: var(--color-grey-800) !important;
    stroke: var(--color-grey-800) !important;
}

.color-grey-900 {
    color: var(--color-grey-900) !important;
    stroke: var(--color-grey-900) !important;
}

/*
    Purple
*/
.color-purple-100 {
    color: var(--color-purple-100) !important;
    stroke: var(--color-purple-100) !important;
}

.color-purple-200 {
    color: var(--color-purple-200) !important;
    stroke: var(--color-purple-200) !important;
}

.color-purple-300 {
    color: var(--color-purple-300) !important;
    stroke: var(--color-purple-300) !important;
}

.color-purple-400 {
    color: var(--color-purple-400) !important;
    stroke: var(--color-purple-400) !important;
}

.color-purple-500 {
    color: var(--color-purple-500) !important;
    stroke: var(--color-purple-500) !important;
}

.color-purple-600 {
    color: var(--color-purple-600) !important;
    stroke: var(--color-purple-600) !important;
}

.color-purple-700 {
    color: var(--color-purple-700) !important;
    stroke: var(--color-purple-700) !important;
}

.color-purple-800 {
    color: var(--color-purple-800) !important;
    stroke: var(--color-purple-800) !important;
}

.color-purple-900 {
    color: var(--color-purple-900) !important;
    stroke: var(--color-purple-900) !important;
}

/*
    Red
*/
.color-red-100 {
    color: var(--color-red-100) !important;
    stroke: var(--color-red-100) !important;
}

.color-red-200 {
    color: var(--color-red-200) !important;
    stroke: var(--color-red-200) !important;
}

.color-red-300 {
    color: var(--color-red-300) !important;
    stroke: var(--color-red-300) !important;
}

.color-red-400 {
    color: var(--color-red-400) !important;
    stroke: var(--color-red-400) !important;
}

.color-red-500 {
    color: var(--color-red-500) !important;
    stroke: var(--color-red-500) !important;
}

.color-red-600 {
    color: var(--color-red-600) !important;
    stroke: var(--color-red-600) !important;
}

.color-red-700 {
    color: var(--color-red-700) !important;
    stroke: var(--color-red-700) !important;
}

.color-red-800 {
    color: var(--color-red-800) !important;
    stroke: var(--color-red-800) !important;
}

.color-red-900 {
    color: var(--color-red-900) !important;
    stroke: var(--color-red-900) !important;
}

/*
    Rose
*/
.color-rose-100 {
    color: var(--color-rose-100) !important;
    stroke: var(--color-rose-100) !important;
}

.color-rose-200 {
    color: var(--color-rose-200) !important;
    stroke: var(--color-rose-200) !important;
}

.color-rose-300 {
    color: var(--color-rose-300) !important;
    stroke: var(--color-rose-300) !important;
}

.color-rose-400 {
    color: var(--color-rose-400) !important;
    stroke: var(--color-rose-400) !important;
}

.color-rose-500 {
    color: var(--color-rose-500) !important;
    stroke: var(--color-rose-500) !important;
}

.color-rose-600 {
    color: var(--color-rose-600) !important;
    stroke: var(--color-rose-600) !important;
}

.color-rose-700 {
    color: var(--color-rose-700) !important;
    stroke: var(--color-rose-700) !important;
}

.color-rose-800 {
    color: var(--color-rose-800) !important;
    stroke: var(--color-rose-800) !important;
}

.color-rose-900 {
    color: var(--color-rose-900) !important;
    stroke: var(--color-rose-900) !important;
}

/*
    Yellow
*/
.color-yellow-100 {
    color: var(--color-yellow-100) !important;
    stroke: var(--color-yellow-100) !important;
}

.color-yellow-200 {
    color: var(--color-yellow-200) !important;
    stroke: var(--color-yellow-200) !important;
}

.color-yellow-300 {
    color: var(--color-yellow-300) !important;
    stroke: var(--color-yellow-300) !important;
}

.color-yellow-400 {
    color: var(--color-yellow-400) !important;
    stroke: var(--color-yellow-400) !important;
}

.color-yellow-500 {
    color: var(--color-yellow-500) !important;
    stroke: var(--color-yellow-500) !important;
}

.color-yellow-600 {
    color: var(--color-yellow-600) !important;
    stroke: var(--color-yellow-600) !important;
}

.color-yellow-700 {
    color: var(--color-yellow-700) !important;
    stroke: var(--color-yellow-700) !important;
}

.color-yellow-800 {
    color: var(--color-yellow-800) !important;
    stroke: var(--color-yellow-800) !important;
}

.color-yellow-900 {
    color: var(--color-yellow-900) !important;
    stroke: var(--color-yellow-900) !important;
}

/* =====
    Height
===== */
.h-0 {
    height: 0px;
}

.h-px {
    height: 1px;
}

.h-0\.5 {
    height: 0.125rem;
    /* 2px */
}

.h-1 {
    height: 0.25rem;
    /* 4px */
}

.h-1\.5 {
    height: 0.375rem;
    /* 6px */
}

.h-2 {
    height: 0.5rem;
    /* 8px */
}

.h-2\.5 {
    height: 0.625rem;
    /* 10px */
}

.h-3 {
    height: 0.75rem;
    /* 12px */
}

.h-3\.5 {
    height: 0.875rem;
    /* 14px */
}

.h-4 {
    height: 1rem;
    /* 16px */
}

.h-5 {
    height: 1.25rem;
    /* 20px */
}

.h-6 {
    height: 1.5rem;
    /* 24px */
}

.h-7 {
    height: 1.75rem;
    /* 28px */
}

.h-8 {
    height: 2rem;
    /* 32px */
}

.h-9 {
    height: 2.25rem;
    /* 36px */
}

.h-10 {
    height: 2.5rem;
    /* 40px */
}

.h-11 {
    height: 2.75rem;
    /* 44px */
}

.h-12 {
    height: 3rem;
    /* 48px */
}

.h-14 {
    height: 3.5rem;
    /* 56px */
}

.h-16 {
    height: 4rem;
    /* 64px */
}

.h-18 {
    height: 4.5rem;
    /* 72px */
}

.h-20 {
    height: 5rem;
    /* 80px */
}

.h-24 {
    height: 6rem;
    /* 96px */
}

.h-28 {
    height: 7rem;
    /* 112px */
}

.h-32 {
    height: 8rem;
    /* 128px */
}

.h-36 {
    height: 9rem;
    /* 144px */
}

.h-40 {
    height: 10rem;
    /* 160px */
}

.h-44 {
    height: 11rem;
    /* 176px */
}

.h-48 {
    height: 12rem;
    /* 192px */
}

.h-52 {
    height: 13rem;
    /* 208px */
}

.h-56 {
    height: 14rem;
    /* 224px */
}

.h-60 {
    height: 15rem;
    /* 240px */
}

.h-64 {
    height: 16rem;
    /* 256px */
}

.h-72 {
    height: 18rem;
    /* 288px */
}

.h-80 {
    height: 20rem;
    /* 320px */
}

.h-96 {
    height: 24rem;
    /* 384px */
}

.h-auto {
    height: auto;
}

.h-1\/2 {
    height: 50%;
}

.h-1\/3 {
    height: 33.333333%;
}

.h-2\/3 {
    height: 66.666667%;
}

.h-1\/4 {
    height: 25%;
}

.h-2\/4 {
    height: 50%;
}

.h-3\/4 {
    height: 75%;
}

.h-1\/5 {
    height: 20%;
}

.h-2\/5 {
    height: 40%;
}

.h-3\/5 {
    height: 60%;
}

.h-4\/5 {
    height: 80%;
}

.h-1\/6 {
    height: 16.666667%;
}

.h-2\/6 {
    height: 33.333333%;
}

.h-3\/6 {
    height: 50%;
}

.h-4\/6 {
    height: 66.666667%;
}

.h-5\/6 {
    height: 83.333333%;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-svh {
    height: 100svh;
}

.h-lvh {
    height: 100lvh;
}

.h-dvh {
    height: 100dvh;
}

.h-min {
    height: min-content;
}

.h-max {
    height: max-content;
}

.h-fit {
    height: fit-content;
}

@media (min-width: 640px) {
    .h-sm-screen {
        height: 100vh;
    }
}

@media (min-width: 768px) {
    .h-md-screen {
        height: 100vh;
    }
}

@media (min-width: 1024px) {
    .h-lg-screen {
        height: 100vh;
    }
}

@media (min-width: 1280px) {
    .h-xl-screen {
        height: 100vh;
    }
}

/* =====
    Width
===== */
.w-0 {
    width: 0px;
}

.w-px {
    width: 1px;
}

.w-0\.5 {
    width: 0.125rem;
    /* 2px */
}

.w-1 {
    width: 0.25rem;
    /* 4px */
}

.w-1\.5 {
    width: 0.375rem;
    /* 6px */
}

.w-2 {
    width: 0.5rem;
    /* 8px */
}

.w-2\.5 {
    width: 0.625rem;
    /* 10px */
}

.w-3 {
    width: 0.75rem;
    /* 12px */
}

.w-3\.5 {
    width: 0.875rem;
    /* 14px */
}

.w-4 {
    width: 1rem;
    /* 16px */
}

.w-5 {
    width: 1.25rem;
    /* 20px */
}

.w-6 {
    width: 1.5rem;
    /* 24px */
}

.w-7 {
    width: 1.75rem;
    /* 28px */
}

.w-8 {
    width: 2rem;
    /* 32px */
}

.w-9 {
    width: 2.25rem;
    /* 36px */
}

.w-10 {
    width: 2.5rem;
    /* 40px */
}

.w-11 {
    width: 2.75rem;
    /* 44px */
}

.w-12 {
    width: 3rem;
    /* 48px */
}

.w-14 {
    width: 3.5rem;
    /* 56px */
}

.w-16 {
    width: 4rem;
    /* 64px */
}

.w-18 {
    width: 4.5rem;
    /* 72px */
}

.w-20 {
    width: 5rem;
    /* 80px */
}

.w-24 {
    width: 6rem;
    /* 96px */
}

.w-28 {
    width: 7rem;
    /* 112px */
}

.w-32 {
    width: 8rem;
    /* 128px */
}

.w-36 {
    width: 9rem;
    /* 144px */
}

.w-40 {
    width: 10rem;
    /* 160px */
}

.w-44 {
    width: 11rem;
    /* 176px */
}

.w-48 {
    width: 12rem;
    /* 192px */
}

.w-52 {
    width: 13rem;
    /* 208px */
}

.w-56 {
    width: 14rem;
    /* 224px */
}

.w-60 {
    width: 15rem;
    /* 240px */
}

.w-64 {
    width: 16rem;
    /* 256px */
}

.w-72 {
    width: 18rem;
    /* 288px */
}

.w-80 {
    width: 20rem;
    /* 320px */
}

.w-96 {
    width: 24rem;
    /* 384px */
}

.w-auto {
    width: auto;
}

.w-1\/2 {
    width: 50%;
}

.w-1\/3 {
    width: 33.333333%;
}

.w-2\/3 {
    width: 66.666667%;
}

.w-1\/4 {
    width: 25%;
}

.w-2\/4 {
    width: 50%;
}

.w-3\/4 {
    width: 75%;
}

.w-1\/5 {
    width: 20%;
}

.w-2\/5 {
    width: 40%;
}

.w-3\/5 {
    width: 60%;
}

.w-4\/5 {
    width: 80%;
}

.w-1\/6 {
    width: 16.666667%;
}

.w-2\/6 {
    width: 33.333333%;
}

.w-3\/6 {
    width: 50%;
}

.w-4\/6 {
    width: 66.666667%;
}

.w-5\/6 {
    width: 83.333333%;
}

.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.w-svw {
    width: 100svw;
}

.w-lvw {
    width: 100lw;
}

.w-dvw {
    width: 100dvw;
}

.w-min {
    width: min-content;
}

.w-max {
    width: max-content;
}

.w-fit {
    width: fit-content;
}

/* Update mx-width */
.max-w-0 {
    max-width: 0%;
}

.max-w-10 {
    max-width: 10%;
}

.max-w-20 {
    max-width: 20%;
}

.max-w-30 {
    max-width: 30%;
}

.max-w-40 {
    max-width: 40%;
}

.max-w-50 {
    max-width: 50%;
}

.max-w-60 {
    max-width: 60%;
}

.max-w-70 {
    max-width: 70%;
}

.max-w-80 {
    max-width: 80%;
}

.max-w-90 {
    max-width: 90%;
}

.max-w-100 {
    max-width: 100%;
}

@media (min-width: 640px) {
    .max-w-sm-0 {
        max-width: 0%;
    }

    .max-w-sm-10 {
        max-width: 10%;
    }

    .max-w-sm-20 {
        max-width: 20%;
    }

    .max-w-sm-30 {
        max-width: 30%;
    }

    .max-w-sm-40 {
        max-width: 40%;
    }

    .max-w-sm-50 {
        max-width: 50%;
    }

    .max-w-sm-60 {
        max-width: 60%;
    }

    .max-w-sm-70 {
        max-width: 70%;
    }

    .max-w-sm-80 {
        max-width: 80%;
    }

    .max-w-sm-90 {
        max-width: 90%;
    }

    .max-w-sm-100 {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .max-w-md-0 {
        max-width: 0%;
    }

    .max-w-md-10 {
        max-width: 10%;
    }

    .max-w-md-20 {
        max-width: 20%;
    }

    .max-w-md-30 {
        max-width: 30%;
    }

    .max-w-md-40 {
        max-width: 40%;
    }

    .max-w-md-50 {
        max-width: 50%;
    }

    .max-w-md-60 {
        max-width: 60%;
    }

    .max-w-md-70 {
        max-width: 70%;
    }

    .max-w-md-80 {
        max-width: 80%;
    }

    .max-w-md-90 {
        max-width: 90%;
    }

    .max-w-md-100 {
        max-width: 100%;
    }
}

@media (min-width: 1024px) {
    .max-w-lg-0 {
        max-width: 0%;
    }

    .max-w-lg-10 {
        max-width: 10%;
    }

    .max-w-lg-20 {
        max-width: 20%;
    }

    .max-w-lg-30 {
        max-width: 30%;
    }

    .max-w-lg-40 {
        max-width: 40%;
    }

    .max-w-lg-50 {
        max-width: 50%;
    }

    .max-w-lg-60 {
        max-width: 60%;
    }

    .max-w-lg-70 {
        max-width: 70%;
    }

    .max-w-lg-80 {
        max-width: 80%;
    }

    .max-w-lg-90 {
        max-width: 90%;
    }

    .max-w-lg-100 {
        max-width: 100%;
    }
}

@media (min-width: 1280px) {
    .max-w-xl-0 {
        max-width: 0%;
    }

    .max-w-xl-10 {
        max-width: 10%;
    }

    .max-w-xl-20 {
        max-width: 20%;
    }

    .max-w-xl-30 {
        max-width: 30%;
    }

    .max-w-xl-40 {
        max-width: 40%;
    }

    .max-w-xl-50 {
        max-width: 50%;
    }

    .max-w-xl-60 {
        max-width: 60%;
    }

    .max-w-xl-70 {
        max-width: 70%;
    }

    .max-w-xl-80 {
        max-width: 80%;
    }

    .max-w-xl-90 {
        max-width: 90%;
    }

    .max-w-xl-100 {
        max-width: 100%;
    }
}

.min-w-0 {
    min-width: 0px;
}

.min-w-px {
    min-width: 1px;
}

.min-w-0\.5 {
    min-width: 0.125rem;
    /* 2px */
}

.min-w-1 {
    min-width: 0.25rem;
    /* 4px */
}

.min-w-1\.5 {
    min-width: 0.375rem;
    /* 6px */
}

.min-w-2 {
    min-width: 0.5rem;
    /* 8px */
}

.min-w-2\.5 {
    min-width: 0.625rem;
    /* 10px */
}

.min-w-3 {
    min-width: 0.75rem;
    /* 12px */
}

.min-w-3\.5 {
    min-width: 0.875rem;
    /* 14px */
}

.min-w-4 {
    min-width: 1rem;
    /* 16px */
}

.min-w-5 {
    min-width: 1.25rem;
    /* 20px */
}

.min-w-6 {
    min-width: 1.5rem;
    /* 24px */
}

.min-w-7 {
    min-width: 1.75rem;
    /* 28px */
}

.min-w-8 {
    min-width: 2rem;
    /* 32px */
}

.min-w-9 {
    min-width: 2.25rem;
    /* 36px */
}

.min-w-10 {
    min-width: 2.5rem;
    /* 40px */
}

.min-w-11 {
    min-width: 2.75rem;
    /* 44px */
}

.min-w-12 {
    min-width: 3rem;
    /* 48px */
}

.min-w-14 {
    min-width: 3.5rem;
    /* 56px */
}

.min-w-16 {
    min-width: 4rem;
    /* 64px */
}

.min-w-18 {
    min-width: 4.5rem;
    /* 72px */
}

.min-w-20 {
    min-width: 5rem;
    /* 80px */
}

.min-w-24 {
    min-width: 6rem;
    /* 96px */
}

.min-w-28 {
    min-width: 7rem;
    /* 112px */
}

.min-w-32 {
    min-width: 8rem;
    /* 128px */
}

.min-w-36 {
    min-width: 9rem;
    /* 144px */
}

.min-w-40 {
    min-width: 10rem;
    /* 160px */
}

.min-w-44 {
    min-width: 11rem;
    /* 176px */
}

.min-w-48 {
    min-width: 12rem;
    /* 192px */
}

.min-w-52 {
    min-width: 13rem;
    /* 208px */
}

.min-w-56 {
    min-width: 14rem;
    /* 224px */
}

.min-w-60 {
    min-width: 15rem;
    /* 240px */
}

.min-w-64 {
    min-width: 16rem;
    /* 256px */
}

.min-w-72 {
    min-width: 18rem;
    /* 288px */
}

.min-w-80 {
    min-width: 20rem;
    /* 320px */
}

.min-w-96 {
    min-width: 24rem;
    /* 384px */
}

.min-w-auto {
    min-width: auto;
}

.min-w-1\/2 {
    min-width: 50%;
}

.min-w-1\/3 {
    min-width: 33.333333%;
}

.min-w-2\/3 {
    min-width: 66.666667%;
}

.min-w-1\/4 {
    min-width: 25%;
}

.min-w-2\/4 {
    min-width: 50%;
}

.min-w-3\/4 {
    min-width: 75%;
}

.min-w-1\/5 {
    min-width: 20%;
}

.min-w-2\/5 {
    min-width: 40%;
}

.min-w-3\/5 {
    min-width: 60%;
}

.min-w-4\/5 {
    min-width: 80%;
}

.min-w-1\/6 {
    min-width: 16.666667%;
}

.min-w-2\/6 {
    min-width: 33.333333%;
}

.min-w-3\/6 {
    min-width: 50%;
}

.min-w-4\/6 {
    min-width: 66.666667%;
}

.min-w-5\/6 {
    min-width: 83.333333%;
}

.min-w-full {
    min-width: 100%;
}

.min-w-screen {
    min-width: 100vw;
}

.min-w-svw {
    min-width: 100svw;
}

.min-w-lvw {
    min-width: 100lw;
}

.min-w-dvw {
    min-width: 100dvw;
}


/*
    ========================================
    Typography:
        – Specify leading
    ========================================
*/
/* =====
    Specify leading
===== */
.leading-none {
    line-height: 1;
}

.leading-1 {
    line-height: calc(var(--app-spacing) * 1);
}

.leading-2 {
    line-height: calc(var(--app-spacing) * 2);
}

.leading-3 {
    line-height: calc(var(--app-spacing) * 3);
}

.leading-4 {
    line-height: calc(var(--app-spacing) * 4);
}

.leading-5 {
    line-height: calc(var(--app-spacing) * 5);
}

.leading-6 {
    line-height: calc(var(--app-spacing) * 6);
}

.leading-7 {
    line-height: calc(var(--app-spacing) * 7);
}

.leading-8 {
    line-height: calc(var(--app-spacing) * 8);
}

.leading-9 {
    line-height: calc(var(--app-spacing) * 9);
}

.leading-10 {
    line-height: calc(var(--app-spacing) * 10);
}





.lh-20 {
    line-height: 1.25rem;
}


.lh-1 {
    line-height: 0.75rem;
}

.lh-2 {
    line-height: 0.875rem;
}

.lh-3 {
    line-height: 1rem;
}

.lh-4 {
    line-height: 1.125rem;
}

.lh-5 {
    line-height: 1.25rem;
}

.lh-6 {
    line-height: 1.325rem;
}

.lh-7 {
    line-height: 1.5rem;
}

.lh-8 {
    line-height: 2.5rem;
}

/*
    ========================================
    Border:
        – Apply default border
        – Specify colour
        – Specify girth
        – Specify pattern
    ========================================
*/
.border {
    border: 1px solid var(--app-border-color) !important;
}

.border-b {
    border-bottom: 1px solid var(--app-border-color) !important;
}

.border-l {
    border-left: 1px solid var(--app-border-color) !important;
}

.border-r {
    border-right: 1px solid var(--app-border-color) !important;
}

.border-t {
    border-top: 1px solid var(--app-border-color) !important;
}

@media (min-width: 640px) {
    .xs\:border {
        border: 1px solid var(--app-border-color) !important;
    }

    .xs\:border-b {
        border-bottom: 1px solid var(--app-border-color) !important;
    }

    .xs\:border-l {
        border-left: 1px solid var(--app-border-color) !important;
    }

    .xs\:border-r {
        border-right: 1px solid var(--app-border-color) !important;
    }

    .xs\:border-t {
        border-top: 1px solid var(--app-border-color) !important;
    }
}

@media (min-width: 768px) {
    .sm\:border {
        border: 1px solid var(--app-border-color) !important;
    }

    .sm\:border-b {
        border-bottom: 1px solid var(--app-border-color) !important;
    }

    .sm\:border-l {
        border-left: 1px solid var(--app-border-color) !important;
    }

    .sm\:border-r {
        border-right: 1px solid var(--app-border-color) !important;
    }

    .sm\:border-t {
        border-top: 1px solid var(--app-border-color) !important;
    }
}

@media (min-width: 1024px) {
    .md\:border {
        border: 1px solid var(--app-border-color) !important;
    }

    .md\:border-b {
        border-bottom: 1px solid var(--app-border-color) !important;
    }

    .md\:border-l {
        border-left: 1px solid var(--app-border-color) !important;
    }

    .md\:border-r {
        border-right: 1px solid var(--app-border-color) !important;
    }

    .md\:border-t {
        border-top: 1px solid var(--app-border-color) !important;
    }
}

@media (min-width: 1280px) {
    .lg\:border {
        border: 1px solid var(--app-border-color) !important;
    }

    .lg\:border-b {
        border-bottom: 1px solid var(--app-border-color) !important;
    }

    .lg\:border-l {
        border-left: 1px solid var(--app-border-color) !important;
    }

    .lg\:border-r {
        border-right: 1px solid var(--app-border-color) !important;
    }

    .lg\:border-t {
        border-top: 1px solid var(--app-border-color) !important;
    }
}

@media (min-width: 1536px) {
    .xl\:border {
        border: 1px solid var(--app-border-color) !important;
    }

    .xl\:border-b {
        border-bottom: 1px solid var(--app-border-color) !important;
    }

    .xl\:border-l {
        border-left: 1px solid var(--app-border-color) !important;
    }

    .xl\:border-r {
        border-right: 1px solid var(--app-border-color) !important;
    }

    .xl\:border-t {
        border-top: 1px solid var(--app-border-color) !important;
    }
}

/* =====
    Border color
===== */
.border-danger {
    border-color: var(--color-danger) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-success {
    border-color: var(--color-success) !important;
}

.border-transparent {
    border-color: transparent !important;
}

.border-warning {
    border-color: var(--color-warning) !important;
}

.border-amber-100 {
    border-color: var(--color-amber-100) !important;
}

.border-amber-200 {
    border-color: var(--color-amber-200) !important;
}

.border-amber-300 {
    border-color: var(--color-amber-300) !important;
}

.border-amber-400 {
    border-color: var(--color-amber-400) !important;
}

.border-amber-500 {
    border-color: var(--color-amber-500) !important;
}

.border-amber-600 {
    border-color: var(--color-amber-600) !important;
}

.border-amber-700 {
    border-color: var(--color-amber-700) !important;
}

.border-amber-800 {
    border-color: var(--color-amber-800) !important;
}

.border-amber-900 {
    border-color: var(--color-amber-900) !important;
}

.border-blue-100 {
    border-color: var(--color-blue-100) !important;
}

.border-blue-200 {
    border-color: var(--color-blue-200) !important;
}

.border-blue-300 {
    border-color: var(--color-blue-300) !important;
}

.border-blue-400 {
    border-color: var(--color-blue-400) !important;
}

.border-blue-500 {
    border-color: var(--color-blue-500) !important;
}

.border-blue-600 {
    border-color: var(--color-blue-600) !important;
}

.border-blue-700 {
    border-color: var(--color-blue-700) !important;
}

.border-blue-800 {
    border-color: var(--color-blue-800) !important;
}

.border-blue-900 {
    border-color: var(--color-blue-900) !important;
}

.border-green-100 {
    border-color: var(--color-green-100) !important;
}

.border-green-200 {
    border-color: var(--color-green-200) !important;
}

.border-green-300 {
    border-color: var(--color-green-300) !important;
}

.border-green-400 {
    border-color: var(--color-green-400) !important;
}

.border-green-500 {
    border-color: var(--color-green-500) !important;
}

.border-green-600 {
    border-color: var(--color-green-600) !important;
}

.border-green-700 {
    border-color: var(--color-green-700) !important;
}

.border-green-800 {
    border-color: var(--color-green-800) !important;
}

.border-green-900 {
    border-color: var(--color-green-900) !important;
}

.border-grey-100 {
    border-color: var(--color-grey-100) !important;
}

.border-grey-200 {
    border-color: var(--color-grey-200) !important;
}

.border-grey-300 {
    border-color: var(--color-grey-300) !important;
}

.border-grey-400 {
    border-color: var(--color-grey-400) !important;
}

.border-grey-500 {
    border-color: var(--color-grey-500) !important;
}

.border-grey-600 {
    border-color: var(--color-grey-600) !important;
}

.border-grey-700 {
    border-color: var(--color-grey-700) !important;
}

.border-grey-800 {
    border-color: var(--color-grey-800) !important;
}

.border-grey-900 {
    border-color: var(--color-grey-900) !important;
}

.hover\:border-grey-100:hover {
    border-color: var(--color-grey-100) !important;
}

.hover\:border-grey-200:hover {
    border-color: var(--color-grey-200) !important;
}

.hover\:border-grey-300:hover {
    border-color: var(--color-grey-300) !important;
}

.hover\:border-grey-400:hover {
    border-color: var(--color-grey-400) !important;
}

.hover\:border-grey-500:hover {
    border-color: var(--color-grey-500) !important;
}

.hover\:border-grey-600:hover {
    border-color: var(--color-grey-600) !important;
}

.hover\:border-grey-700:hover {
    border-color: var(--color-grey-700) !important;
}

.hover\:border-grey-800:hover {
    border-color: var(--color-grey-800) !important;
}

.hover\:border-grey-900:hover {
    border-color: var(--color-grey-900) !important;
}

.border-purple-100 {
    border-color: var(--color-purple-100) !important;
}

.border-purple-200 {
    border-color: var(--color-purple-200) !important;
}

.border-purple-300 {
    border-color: var(--color-purple-300) !important;
}

.border-purple-400 {
    border-color: var(--color-purple-400) !important;
}

.border-purple-500 {
    border-color: var(--color-purple-500) !important;
}

.border-purple-600 {
    border-color: var(--color-purple-600) !important;
}

.border-purple-700 {
    border-color: var(--color-purple-700) !important;
}

.border-purple-800 {
    border-color: var(--color-purple-800) !important;
}

.border-purple-900 {
    border-color: var(--color-purple-900) !important;
}

.border-red-100 {
    border-color: var(--color-red-100) !important;
}

.border-red-200 {
    border-color: var(--color-red-200) !important;
}

.border-red-300 {
    border-color: var(--color-red-300) !important;
}

.border-red-400 {
    border-color: var(--color-red-400) !important;
}

.border-red-500 {
    border-color: var(--color-red-500) !important;
}

.border-red-600 {
    border-color: var(--color-red-600) !important;
}

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

.border-red-800 {
    border-color: var(--color-red-800) !important;
}

.border-red-900 {
    border-color: var(--color-red-900) !important;
}

.border-rose-100 {
    border-color: var(--color-rose-100) !important;
}

.border-rose-200 {
    border-color: var(--color-rose-200) !important;
}

.border-rose-300 {
    border-color: var(--color-rose-300) !important;
}

.border-rose-400 {
    border-color: var(--color-rose-400) !important;
}

.border-rose-500 {
    border-color: var(--color-rose-500) !important;
}

.border-rose-600 {
    border-color: var(--color-rose-600) !important;
}

.border-rose-700 {
    border-color: var(--color-rose-700) !important;
}

.border-rose-800 {
    border-color: var(--color-rose-800) !important;
}

.border-rose-900 {
    border-color: var(--color-rose-900) !important;
}

.border-yellow-100 {
    border-color: var(--color-yellow-100) !important;
}

.border-yellow-200 {
    border-color: var(--color-yellow-200) !important;
}

.border-yellow-300 {
    border-color: var(--color-yellow-300) !important;
}

.border-yellow-400 {
    border-color: var(--color-yellow-400) !important;
}

.border-yellow-500 {
    border-color: var(--color-yellow-500) !important;
}

.border-yellow-600 {
    border-color: var(--color-yellow-600) !important;
}

.border-yellow-700 {
    border-color: var(--color-yellow-700) !important;
}

.border-yellow-800 {
    border-color: var(--color-yellow-800) !important;
}

.border-yellow-900 {
    border-color: var(--color-yellow-900) !important;
}

/* =====
    Border width
===== */
.border-0 {
    border-width: 0 !important;
}

.border-1 {
    border-width: 0.0625rem !important;
}

.border-2 {
    border-width: 0.125rem !important;
}

.border-3 {
    border-width: 0.1875rem !important;
}

.border-4 {
    border-width: 0.25rem !important;
}

.border-b-0 {
    border-bottom-width: 0 !important;
}

.border-b-1 {
    border-bottom-width: 0.0625rem !important;
}

.border-b-2 {
    border-bottom-width: 0.125rem !important;
}

.border-b-3 {
    border-bottom-width: 0.1875rem !important;
}

.border-b-4 {
    border-bottom-width: 0.25rem !important;
}

.border-l-0 {
    border-left-width: 0 !important;
}

.border-l-1 {
    border-left-width: 0.0625rem !important;
}

.border-l-2 {
    border-left-width: 0.125rem !important;
}

.border-l-3 {
    border-left-width: 0.1875rem !important;
}

.border-l-4 {
    border-left-width: 0.25rem !important;
}

.border-r-0 {
    border-right-width: 0 !important;
}

.border-r-1 {
    border-right-width: 0.0625rem !important;
}

.border-r-2 {
    border-right-width: 0.125rem !important;
}

.border-r-3 {
    border-right-width: 0.1875rem !important;
}

.border-r-4 {
    border-right-width: 0.25rem !important;
}

.border-t-0 {
    border-top-width: 0 !important;
}

.border-t-1 {
    border-top-width: 0.0625rem !important;
}

.border-t-2 {
    border-top-width: 0.125rem !important;
}

.border-t-3 {
    border-top-width: 0.1875rem !important;
}

.border-t-4 {
    border-top-width: 0.25rem !important;
}

@media (min-width: 640px) {
    .xs\:border-0 {
        border-width: 0 !important;
    }

    .xs\:border-1 {
        border-width: 0.0625rem !important;
    }

    .xs\:border-2 {
        border-width: 0.125rem !important;
    }

    .xs\:border-3 {
        border-width: 0.1875rem !important;
    }

    .xs\:border-4 {
        border-width: 0.25rem !important;
    }

    .xs\:border-b-0 {
        border-bottom-width: 0 !important;
    }

    .xs\:border-b-1 {
        border-bottom-width: 0.0625rem !important;
    }

    .xs\:border-b-2 {
        border-bottom-width: 0.125rem !important;
    }

    .xs\:border-b-3 {
        border-bottom-width: 0.1875rem !important;
    }

    .xs\:border-b-4 {
        border-bottom-width: 0.25rem !important;
    }

    .xs\:border-l-0 {
        border-left-width: 0 !important;
    }

    .xs\:border-l-1 {
        border-left-width: 0.0625rem !important;
    }

    .xs\:border-l-2 {
        border-left-width: 0.125rem !important;
    }

    .xs\:border-l-3 {
        border-left-width: 0.1875rem !important;
    }

    .xs\:border-l-4 {
        border-left-width: 0.25rem !important;
    }

    .xs\:border-r-0 {
        border-right-width: 0 !important;
    }

    .xs\:border-r-1 {
        border-right-width: 0.0625rem !important;
    }

    .xs\:border-r-2 {
        border-right-width: 0.125rem !important;
    }

    .xs\:border-r-3 {
        border-right-width: 0.1875rem !important;
    }

    .xs\:border-r-4 {
        border-right-width: 0.25rem !important;
    }

    .xs\:border-t-0 {
        border-top-width: 0 !important;
    }

    .xs\:border-t-1 {
        border-top-width: 0.0625rem !important;
    }

    .xs\:border-t-2 {
        border-top-width: 0.125rem !important;
    }

    .xs\:border-t-3 {
        border-top-width: 0.1875rem !important;
    }

    .xs\:border-t-4 {
        border-top-width: 0.25rem !important;
    }
}

@media (min-width: 768px) {
    .sm\:border-0 {
        border-width: 0 !important;
    }

    .sm\:border-1 {
        border-width: 0.0625rem !important;
    }

    .sm\:border-2 {
        border-width: 0.125rem !important;
    }

    .sm\:border-3 {
        border-width: 0.1875rem !important;
    }

    .sm\:border-4 {
        border-width: 0.25rem !important;
    }

    .sm\:border-b-0 {
        border-bottom-width: 0 !important;
    }

    .sm\:border-b-1 {
        border-bottom-width: 0.0625rem !important;
    }

    .sm\:border-b-2 {
        border-bottom-width: 0.125rem !important;
    }

    .sm\:border-b-3 {
        border-bottom-width: 0.1875rem !important;
    }

    .sm\:border-b-4 {
        border-bottom-width: 0.25rem !important;
    }

    .sm\:border-l-0 {
        border-left-width: 0 !important;
    }

    .sm\:border-l-1 {
        border-left-width: 0.0625rem !important;
    }

    .sm\:border-l-2 {
        border-left-width: 0.125rem !important;
    }

    .sm\:border-l-3 {
        border-left-width: 0.1875rem !important;
    }

    .sm\:border-l-4 {
        border-left-width: 0.25rem !important;
    }

    .sm\:border-r-0 {
        border-right-width: 0 !important;
    }

    .sm\:border-r-1 {
        border-right-width: 0.0625rem !important;
    }

    .sm\:border-r-2 {
        border-right-width: 0.125rem !important;
    }

    .sm\:border-r-3 {
        border-right-width: 0.1875rem !important;
    }

    .sm\:border-r-4 {
        border-right-width: 0.25rem !important;
    }

    .sm\:border-t-0 {
        border-top-width: 0 !important;
    }

    .sm\:border-t-1 {
        border-top-width: 0.0625rem !important;
    }

    .sm\:border-t-2 {
        border-top-width: 0.125rem !important;
    }

    .sm\:border-t-3 {
        border-top-width: 0.1875rem !important;
    }

    .sm\:border-t-4 {
        border-top-width: 0.25rem !important;
    }
}

@media (min-width: 1024px) {
    .md\:border-0 {
        border-width: 0 !important;
    }

    .md\:border-1 {
        border-width: 0.0625rem !important;
    }

    .md\:border-2 {
        border-width: 0.125rem !important;
    }

    .md\:border-3 {
        border-width: 0.1875rem !important;
    }

    .md\:border-4 {
        border-width: 0.25rem !important;
    }

    .md\:border-b-0 {
        border-bottom-width: 0 !important;
    }

    .md\:border-b-1 {
        border-bottom-width: 0.0625rem !important;
    }

    .md\:border-b-2 {
        border-bottom-width: 0.125rem !important;
    }

    .md\:border-b-3 {
        border-bottom-width: 0.1875rem !important;
    }

    .md\:border-b-4 {
        border-bottom-width: 0.25rem !important;
    }

    .md\:border-l-0 {
        border-left-width: 0 !important;
    }

    .md\:border-l-1 {
        border-left-width: 0.0625rem !important;
    }

    .md\:border-l-2 {
        border-left-width: 0.125rem !important;
    }

    .md\:border-l-3 {
        border-left-width: 0.1875rem !important;
    }

    .md\:border-l-4 {
        border-left-width: 0.25rem !important;
    }

    .md\:border-r-0 {
        border-right-width: 0 !important;
    }

    .md\:border-r-1 {
        border-right-width: 0.0625rem !important;
    }

    .md\:border-r-2 {
        border-right-width: 0.125rem !important;
    }

    .md\:border-r-3 {
        border-right-width: 0.1875rem !important;
    }

    .md\:border-r-4 {
        border-right-width: 0.25rem !important;
    }

    .md\:border-t-0 {
        border-top-width: 0 !important;
    }

    .md\:border-t-1 {
        border-top-width: 0.0625rem !important;
    }

    .md\:border-t-2 {
        border-top-width: 0.125rem !important;
    }

    .md\:border-t-3 {
        border-top-width: 0.1875rem !important;
    }

    .md\:border-t-4 {
        border-top-width: 0.25rem !important;
    }
}

@media (min-width: 1280px) {
    .lg\:border-0 {
        border-width: 0 !important;
    }

    .lg\:border-1 {
        border-width: 0.0625rem !important;
    }

    .lg\:border-2 {
        border-width: 0.125rem !important;
    }

    .lg\:border-3 {
        border-width: 0.1875rem !important;
    }

    .lg\:border-4 {
        border-width: 0.25rem !important;
    }

    .lg\:border-b-0 {
        border-bottom-width: 0 !important;
    }

    .lg\:border-b-1 {
        border-bottom-width: 0.0625rem !important;
    }

    .lg\:border-b-2 {
        border-bottom-width: 0.125rem !important;
    }

    .lg\:border-b-3 {
        border-bottom-width: 0.1875rem !important;
    }

    .lg\:border-b-4 {
        border-bottom-width: 0.25rem !important;
    }

    .lg\:border-l-0 {
        border-left-width: 0 !important;
    }

    .lg\:border-l-1 {
        border-left-width: 0.0625rem !important;
    }

    .lg\:border-l-2 {
        border-left-width: 0.125rem !important;
    }

    .lg\:border-l-3 {
        border-left-width: 0.1875rem !important;
    }

    .lg\:border-l-4 {
        border-left-width: 0.25rem !important;
    }

    .lg\:border-r-0 {
        border-right-width: 0 !important;
    }

    .lg\:border-r-1 {
        border-right-width: 0.0625rem !important;
    }

    .lg\:border-r-2 {
        border-right-width: 0.125rem !important;
    }

    .lg\:border-r-3 {
        border-right-width: 0.1875rem !important;
    }

    .lg\:border-r-4 {
        border-right-width: 0.25rem !important;
    }

    .lg\:border-t-0 {
        border-top-width: 0 !important;
    }

    .lg\:border-t-1 {
        border-top-width: 0.0625rem !important;
    }

    .lg\:border-t-2 {
        border-top-width: 0.125rem !important;
    }

    .lg\:border-t-3 {
        border-top-width: 0.1875rem !important;
    }

    .lg\:border-t-4 {
        border-top-width: 0.25rem !important;
    }
}

@media (min-width: 1536px) {
    .xl\:border-0 {
        border-width: 0 !important;
    }

    .xl\:border-1 {
        border-width: 0.0625rem !important;
    }

    .xl\:border-2 {
        border-width: 0.125rem !important;
    }

    .xl\:border-3 {
        border-width: 0.1875rem !important;
    }

    .xl\:border-4 {
        border-width: 0.25rem !important;
    }

    .xl\:border-b-0 {
        border-bottom-width: 0 !important;
    }

    .xl\:border-b-1 {
        border-bottom-width: 0.0625rem !important;
    }

    .xl\:border-b-2 {
        border-bottom-width: 0.125rem !important;
    }

    .xl\:border-b-3 {
        border-bottom-width: 0.1875rem !important;
    }

    .xl\:border-b-4 {
        border-bottom-width: 0.25rem !important;
    }

    .xl\:border-l-0 {
        border-left-width: 0 !important;
    }

    .xl\:border-l-1 {
        border-left-width: 0.0625rem !important;
    }

    .xl\:border-l-2 {
        border-left-width: 0.125rem !important;
    }

    .xl\:border-l-3 {
        border-left-width: 0.1875rem !important;
    }

    .xl\:border-l-4 {
        border-left-width: 0.25rem !important;
    }

    .xl\:border-r-0 {
        border-right-width: 0 !important;
    }

    .xl\:border-r-1 {
        border-right-width: 0.0625rem !important;
    }

    .xl\:border-r-2 {
        border-right-width: 0.125rem !important;
    }

    .xl\:border-r-3 {
        border-right-width: 0.1875rem !important;
    }

    .xl\:border-r-4 {
        border-right-width: 0.25rem !important;
    }

    .xl\:border-t-0 {
        border-top-width: 0 !important;
    }

    .xl\:border-t-1 {
        border-top-width: 0.0625rem !important;
    }

    .xl\:border-t-2 {
        border-top-width: 0.125rem !important;
    }

    .xl\:border-t-3 {
        border-top-width: 0.1875rem !important;
    }

    .xl\:border-t-4 {
        border-top-width: 0.25rem !important;
    }
}

/* =====
    Border style
===== */
.border-dashed {
    border-style: dashed;
}

.border-dotted {
    border-style: dotted;
}

.border-double {
    border-style: double;
}

.border-hidden {
    border-style: hidden;
}

.border-solid {
    border-style: solid;
}

.a\:border-dashed:active {
    border-style: dashed;
}

.a\:border-dotted:active {
    border-style: dotted;
}

.a\:border-double:active {
    border-style: double;
}

.a\:border-hidden:active {
    border-style: hidden;
}

.a\:border-solid:active {
    border-style: solid;
}

.f\:border-dashed:focus {
    border-style: dashed;
}

.f\:border-dotted:focus {
    border-style: dotted;
}

.f\:border-double:focus {
    border-style: double;
}

.f\:border-hidden:focus {
    border-style: hidden;
}

.f\:border-solid:focus {
    border-style: solid;
}

.h\:border-dashed:hover {
    border-style: dashed;
}

.h\:border-dotted:hover {
    border-style: dotted;
}

.h\:border-double:hover {
    border-style: double;
}

.h\:border-hidden:hover {
    border-style: hidden;
}

.h\:border-solid:hover {
    border-style: solid;
}

@media (min-width: 640px) {
    .xs\:border-dashed {
        border-style: dashed;
    }

    .xs\:border-dotted {
        border-style: dotted;
    }

    .xs\:border-double {
        border-style: double;
    }

    .xs\:border-hidden {
        border-style: hidden;
    }

    .xs\:border-solid {
        border-style: solid;
    }
}

@media (min-width: 768px) {
    .sm\:border-dashed {
        border-style: dashed;
    }

    .sm\:border-dotted {
        border-style: dotted;
    }

    .sm\:border-double {
        border-style: double;
    }

    .sm\:border-hidden {
        border-style: hidden;
    }

    .sm\:border-solid {
        border-style: solid;
    }
}

@media (min-width: 1024px) {
    .md\:border-dashed {
        border-style: dashed;
    }

    .md\:border-dotted {
        border-style: dotted;
    }

    .md\:border-double {
        border-style: double;
    }

    .md\:border-hidden {
        border-style: hidden;
    }

    .md\:border-solid {
        border-style: solid;
    }
}

@media (min-width: 1280px) {
    .lg\:border-dashed {
        border-style: dashed;
    }

    .lg\:border-dotted {
        border-style: dotted;
    }

    .lg\:border-double {
        border-style: double;
    }

    .lg\:border-hidden {
        border-style: hidden;
    }

    .lg\:border-solid {
        border-style: solid;
    }
}

@media (min-width: 1536px) {
    .xl\:border-dashed {
        border-style: dashed;
    }

    .xl\:border-dotted {
        border-style: dotted;
    }

    .xl\:border-double {
        border-style: double;
    }

    .xl\:border-hidden {
        border-style: hidden;
    }

    .xl\:border-solid {
        border-style: solid;
    }
}

.border-opacity-25 {
    --border-opacity: 0.25;
}

.border-opacity-50 {
    --border-opacity: 0.5;
}

.border-opacity-75 {
    --border-opacity: 0.75;
}

.border-opacity-100 {
    --border-opacity: 0.75;
}

.border-white {
    border-color: rgba(255, 255, 255, var(--border-opacity)) !important;
}


/*
    ========================================
    Rounded corners
    ========================================
*/
.rounded-0 {
    border-radius: 0px !important;
}

.rounded-1 {
    border-radius: var(--border-radius-xs) !important;
}

.rounded-2 {
    border-radius: var(--border-radius-sm) !important;
}

.rounded,
.rounded-3 {
    border-radius: var(--border-radius-md) !important;
}

.rounded-4 {
    border-radius: var(--border-radius-lg) !important;
}

.rounded-5 {
    border-radius: var(--border-radius-xl) !important;
}

.rounded-6 {
    border-radius: var(--border-radius-xxl) !important;
}

.rounded-7 {
    border-radius: var(--border-radius-xxxl) !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

@media (min-width: 640px) {
    .sm\:rounded-0 {
        border-radius: 0px !important;
    }

    .sm\:rounded-1 {
        border-radius: var(--border-radius-xs) !important;
    }

    .sm\:rounded-2 {
        border-radius: var(--border-radius-sm) !important;
    }

    .sm\:rounded,
    .sm\:rounded-3 {
        border-radius: var(--border-radius-md) !important;
    }

    .sm\:rounded-4 {
        border-radius: var(--border-radius-lg) !important;
    }

    .sm\:rounded-5 {
        border-radius: var(--border-radius-xl) !important;
    }

    .sm\:rounded-6 {
        border-radius: var(--border-radius-xxl) !important;
    }

    .sm\:rounded-7 {
        border-radius: var(--border-radius-xxxl) !important;
    }

    .sm\:rounded-full {
        border-radius: 9999px !important;
    }
}

@media (min-width: 768px) {
    .md\:rounded-0 {
        border-radius: 0px !important;
    }

    .md\:rounded-1 {
        border-radius: var(--border-radius-xs) !important;
    }

    .md\:rounded-2 {
        border-radius: var(--border-radius-sm) !important;
    }

    .md\:rounded,
    .md\:rounded-3 {
        border-radius: var(--border-radius-md) !important;
    }

    .md\:rounded-4 {
        border-radius: var(--border-radius-lg) !important;
    }

    .md\:rounded-5 {
        border-radius: var(--border-radius-xl) !important;
    }

    .md\:rounded-6 {
        border-radius: var(--border-radius-xxl) !important;
    }

    .md\:rounded-7 {
        border-radius: var(--border-radius-xxxl) !important;
    }

    .md\:rounded-full {
        border-radius: 9999px !important;
    }
}

@media (min-width: 1024px) {
    .lg\:rounded-0 {
        border-radius: 0px !important;
    }

    .lg\:rounded-1 {
        border-radius: var(--border-radius-xs) !important;
    }

    .lg\:rounded-2 {
        border-radius: var(--border-radius-sm) !important;
    }

    .lg\:rounded,
    .lg\:rounded-3 {
        border-radius: var(--border-radius-md) !important;
    }

    .lg\:rounded-4 {
        border-radius: var(--border-radius-lg) !important;
    }

    .lg\:rounded-5 {
        border-radius: var(--border-radius-xl) !important;
    }

    .lg\:rounded-6 {
        border-radius: var(--border-radius-xxl) !important;
    }

    .lg\:rounded-7 {
        border-radius: var(--border-radius-xxxl) !important;
    }

    .lg\:rounded-full {
        border-radius: 9999px !important;
    }
}

@media (min-width: 1280px) {
    .xl\:rounded-0 {
        border-radius: 0px !important;
    }

    .xl\:rounded-1 {
        border-radius: var(--border-radius-xs) !important;
    }

    .xl\:rounded-2 {
        border-radius: var(--border-radius-sm) !important;
    }

    .xl\:rounded,
    .xl\:rounded-3 {
        border-radius: var(--border-radius-md) !important;
    }

    .xl\:rounded-4 {
        border-radius: var(--border-radius-lg) !important;
    }

    .xl\:rounded-5 {
        border-radius: var(--border-radius-xl) !important;
    }

    .xl\:rounded-6 {
        border-radius: var(--border-radius-xxl) !important;
    }

    .xl\:rounded-7 {
        border-radius: var(--border-radius-xxxl) !important;
    }

    .xl\:rounded-full {
        border-radius: 9999px !important;
    }
}

@media (min-width: 1536px) {
    .xxl\:rounded-0 {
        border-radius: 0px !important;
    }

    .xxl\:rounded-1 {
        border-radius: var(--border-radius-xs) !important;
    }

    .xxl\:rounded-2 {
        border-radius: var(--border-radius-sm) !important;
    }

    .xxl\:rounded,
    .xxl\:rounded-3 {
        border-radius: var(--border-radius-md) !important;
    }

    .xxl\:rounded-4 {
        border-radius: var(--border-radius-lg) !important;
    }

    .xxl\:rounded-5 {
        border-radius: var(--border-radius-xl) !important;
    }

    .xxl\:rounded-6 {
        border-radius: var(--border-radius-xxl) !important;
    }

    .xxl\:rounded-7 {
        border-radius: var(--border-radius-xxxl) !important;
    }

    .xxl\:rounded-full {
        border-radius: 9999px !important;
    }
}

.rounded-bl-0 {
    border-bottom-left-radius: 0px !important;
}

.rounded-bl-1 {
    border-bottom-left-radius: var(--border-radius-xs) !important;
}

.rounded-bl-2 {
    border-bottom-left-radius: var(--border-radius-sm) !important;
}

.rounded-bl,
.rounded-bl-3 {
    border-bottom-left-radius: var(--border-radius-md) !important;
}

.rounded-bl-4 {
    border-bottom-left-radius: var(--border-radius-lg) !important;
}

.rounded-bl-5 {
    border-bottom-left-radius: var(--border-radius-xl) !important;
}

.rounded-bl-6 {
    border-bottom-left-radius: var(--border-radius-xxl) !important;
}

.rounded-bl-7 {
    border-bottom-left-radius: var(--border-radius-xxxl) !important;
}

.rounded-bl-full {
    border-bottom-left-radius: 9999px !important;
}

@media (min-width: 640px) {
    .sm\:rounded-bl-0 {
        border-bottom-left-radius: 0px !important;
    }

    .sm\:rounded-bl-1 {
        border-bottom-left-radius: var(--border-radius-xs) !important;
    }

    .sm\:rounded-bl-2 {
        border-bottom-left-radius: var(--border-radius-sm) !important;
    }

    .sm\:rounded-bl,
    .sm\:rounded-bl-3 {
        border-bottom-left-radius: var(--border-radius-md) !important;
    }

    .sm\:rounded-bl-4 {
        border-bottom-left-radius: var(--border-radius-lg) !important;
    }

    .sm\:rounded-bl-5 {
        border-bottom-left-radius: var(--border-radius-xl) !important;
    }

    .sm\:rounded-bl-6 {
        border-bottom-left-radius: var(--border-radius-xxl) !important;
    }

    .sm\:rounded-bl-7 {
        border-bottom-left-radius: var(--border-radius-xxxl) !important;
    }

    .sm\:rounded-bl-full {
        border-bottom-left-radius: 9999px !important;
    }
}

@media (min-width: 768px) {
    .md\:rounded-bl-0 {
        border-bottom-left-radius: 0px !important;
    }

    .md\:rounded-bl-1 {
        border-bottom-left-radius: var(--border-radius-xs) !important;
    }

    .md\:rounded-bl-2 {
        border-bottom-left-radius: var(--border-radius-sm) !important;
    }

    .md\:rounded-bl,
    .md\:rounded-bl-3 {
        border-bottom-left-radius: var(--border-radius-md) !important;
    }

    .md\:rounded-bl-4 {
        border-bottom-left-radius: var(--border-radius-lg) !important;
    }

    .md\:rounded-bl-5 {
        border-bottom-left-radius: var(--border-radius-xl) !important;
    }

    .md\:rounded-bl-6 {
        border-bottom-left-radius: var(--border-radius-xxl) !important;
    }

    .md\:rounded-bl-7 {
        border-bottom-left-radius: var(--border-radius-xxxl) !important;
    }

    .md\:rounded-bl-full {
        border-bottom-left-radius: 9999px !important;
    }
}

@media (min-width: 1024px) {
    .lg\:rounded-bl-0 {
        border-bottom-left-radius: 0px !important;
    }

    .lg\:rounded-bl-1 {
        border-bottom-left-radius: var(--border-radius-xs) !important;
    }

    .lg\:rounded-bl-2 {
        border-bottom-left-radius: var(--border-radius-sm) !important;
    }

    .lg\:rounded-bl,
    .lg\:rounded-bl-3 {
        border-bottom-left-radius: var(--border-radius-md) !important;
    }

    .lg\:rounded-bl-4 {
        border-bottom-left-radius: var(--border-radius-lg) !important;
    }

    .lg\:rounded-bl-5 {
        border-bottom-left-radius: var(--border-radius-xl) !important;
    }

    .lg\:rounded-bl-6 {
        border-bottom-left-radius: var(--border-radius-xxl) !important;
    }

    .lg\:rounded-bl-7 {
        border-bottom-left-radius: var(--border-radius-xxxl) !important;
    }

    .lg\:rounded-bl-full {
        border-bottom-left-radius: 9999px !important;
    }
}

@media (min-width: 1280px) {
    .xl\:rounded-bl-0 {
        border-bottom-left-radius: 0px !important;
    }

    .xl\:rounded-bl-1 {
        border-bottom-left-radius: var(--border-radius-xs) !important;
    }

    .xl\:rounded-bl-2 {
        border-bottom-left-radius: var(--border-radius-sm) !important;
    }

    .xl\:rounded-bl,
    .xl\:rounded-bl-3 {
        border-bottom-left-radius: var(--border-radius-md) !important;
    }

    .xl\:rounded-bl-4 {
        border-bottom-left-radius: var(--border-radius-lg) !important;
    }

    .xl\:rounded-bl-5 {
        border-bottom-left-radius: var(--border-radius-xl) !important;
    }

    .xl\:rounded-bl-6 {
        border-bottom-left-radius: var(--border-radius-xxl) !important;
    }

    .xl\:rounded-bl-7 {
        border-bottom-left-radius: var(--border-radius-xxxl) !important;
    }

    .xl\:rounded-bl-full {
        border-bottom-left-radius: 9999px !important;
    }
}

@media (min-width: 1536px) {
    .xxl\:rounded-bl-0 {
        border-bottom-left-radius: 0px !important;
    }

    .xxl\:rounded-bl-1 {
        border-bottom-left-radius: var(--border-radius-xs) !important;
    }

    .xxl\:rounded-bl-2 {
        border-bottom-left-radius: var(--border-radius-sm) !important;
    }

    .xxl\:rounded-bl,
    .xxl\:rounded-bl-3 {
        border-bottom-left-radius: var(--border-radius-md) !important;
    }

    .xxl\:rounded-bl-4 {
        border-bottom-left-radius: var(--border-radius-lg) !important;
    }

    .xxl\:rounded-bl-5 {
        border-bottom-left-radius: var(--border-radius-xl) !important;
    }

    .xxl\:rounded-bl-6 {
        border-bottom-left-radius: var(--border-radius-xxl) !important;
    }

    .xxl\:rounded-bl-7 {
        border-bottom-left-radius: var(--border-radius-xxxl) !important;
    }

    .xxl\:rounded-bl-full {
        border-bottom-left-radius: 9999px !important;
    }
}

.rounded-br-0 {
    border-bottom-right-radius: 0px !important;
}

.rounded-br-1 {
    border-bottom-right-radius: var(--border-radius-xs) !important;
}

.rounded-br-2 {
    border-bottom-right-radius: var(--border-radius-sm) !important;
}

.rounded-br,
.rounded-br-3 {
    border-bottom-right-radius: var(--border-radius-md) !important;
}

.rounded-br-4 {
    border-bottom-right-radius: var(--border-radius-lg) !important;
}

.rounded-br-5 {
    border-bottom-right-radius: var(--border-radius-xl) !important;
}

.rounded-br-6 {
    border-bottom-right-radius: var(--border-radius-xxl) !important;
}

.rounded-br-7 {
    border-bottom-right-radius: var(--border-radius-xxxl) !important;
}

.rounded-br-full {
    border-bottom-right-radius: 9999px !important;
}

@media (min-width: 640px) {
    .sm\:rounded-br-0 {
        border-bottom-right-radius: 0px !important;
    }

    .sm\:rounded-br-1 {
        border-bottom-right-radius: var(--border-radius-xs) !important;
    }

    .sm\:rounded-br-2 {
        border-bottom-right-radius: var(--border-radius-sm) !important;
    }

    .sm\:rounded-br,
    .sm\:rounded-br-3 {
        border-bottom-right-radius: var(--border-radius-md) !important;
    }

    .sm\:rounded-br-4 {
        border-bottom-right-radius: var(--border-radius-lg) !important;
    }

    .sm\:rounded-br-5 {
        border-bottom-right-radius: var(--border-radius-xl) !important;
    }

    .sm\:rounded-br-6 {
        border-bottom-right-radius: var(--border-radius-xxl) !important;
    }

    .sm\:rounded-br-7 {
        border-bottom-right-radius: var(--border-radius-xxxl) !important;
    }

    .sm\:rounded-br-full {
        border-bottom-right-radius: 9999px !important;
    }
}

@media (min-width: 768px) {
    .md\:rounded-br-0 {
        border-bottom-right-radius: 0px !important;
    }

    .md\:rounded-br-1 {
        border-bottom-right-radius: var(--border-radius-xs) !important;
    }

    .md\:rounded-br-2 {
        border-bottom-right-radius: var(--border-radius-sm) !important;
    }

    .md\:rounded-br,
    .md\:rounded-br-3 {
        border-bottom-right-radius: var(--border-radius-md) !important;
    }

    .md\:rounded-br-4 {
        border-bottom-right-radius: var(--border-radius-lg) !important;
    }

    .md\:rounded-br-5 {
        border-bottom-right-radius: var(--border-radius-xl) !important;
    }

    .md\:rounded-br-6 {
        border-bottom-right-radius: var(--border-radius-xxl) !important;
    }

    .md\:rounded-br-7 {
        border-bottom-right-radius: var(--border-radius-xxxl) !important;
    }

    .md\:rounded-br-full {
        border-bottom-right-radius: 9999px !important;
    }
}

@media (min-width: 1024px) {
    .lg\:rounded-br-0 {
        border-bottom-right-radius: 0px !important;
    }

    .lg\:rounded-br-1 {
        border-bottom-right-radius: var(--border-radius-xs) !important;
    }

    .lg\:rounded-br-2 {
        border-bottom-right-radius: var(--border-radius-sm) !important;
    }

    .lg\:rounded-br,
    .lg\:rounded-br-3 {
        border-bottom-right-radius: var(--border-radius-md) !important;
    }

    .lg\:rounded-br-4 {
        border-bottom-right-radius: var(--border-radius-lg) !important;
    }

    .lg\:rounded-br-5 {
        border-bottom-right-radius: var(--border-radius-xl) !important;
    }

    .lg\:rounded-br-6 {
        border-bottom-right-radius: var(--border-radius-xxl) !important;
    }

    .lg\:rounded-br-7 {
        border-bottom-right-radius: var(--border-radius-xxxl) !important;
    }

    .lg\:rounded-br-full {
        border-bottom-right-radius: 9999px !important;
    }
}

@media (min-width: 1280px) {
    .xl\:rounded-br-0 {
        border-bottom-right-radius: 0px !important;
    }

    .xl\:rounded-br-1 {
        border-bottom-right-radius: var(--border-radius-xs) !important;
    }

    .xl\:rounded-br-2 {
        border-bottom-right-radius: var(--border-radius-sm) !important;
    }

    .xl\:rounded-br,
    .xl\:rounded-br-3 {
        border-bottom-right-radius: var(--border-radius-md) !important;
    }

    .xl\:rounded-br-4 {
        border-bottom-right-radius: var(--border-radius-lg) !important;
    }

    .xl\:rounded-br-5 {
        border-bottom-right-radius: var(--border-radius-xl) !important;
    }

    .xl\:rounded-br-6 {
        border-bottom-right-radius: var(--border-radius-xxl) !important;
    }

    .xl\:rounded-br-7 {
        border-bottom-right-radius: var(--border-radius-xxxl) !important;
    }

    .xl\:rounded-br-full {
        border-bottom-right-radius: 9999px !important;
    }
}

@media (min-width: 1536px) {
    .xxl\:rounded-br-0 {
        border-bottom-right-radius: 0px !important;
    }

    .xxl\:rounded-br-1 {
        border-bottom-right-radius: var(--border-radius-xs) !important;
    }

    .xxl\:rounded-br-2 {
        border-bottom-right-radius: var(--border-radius-sm) !important;
    }

    .xxl\:rounded-br,
    .xxl\:rounded-br-3 {
        border-bottom-right-radius: var(--border-radius-md) !important;
    }

    .xxl\:rounded-br-4 {
        border-bottom-right-radius: var(--border-radius-lg) !important;
    }

    .xxl\:rounded-br-5 {
        border-bottom-right-radius: var(--border-radius-xl) !important;
    }

    .xxl\:rounded-br-6 {
        border-bottom-right-radius: var(--border-radius-xxl) !important;
    }

    .xxl\:rounded-br-7 {
        border-bottom-right-radius: var(--border-radius-xxxl) !important;
    }

    .xxl\:rounded-br-full {
        border-bottom-right-radius: 9999px !important;
    }
}

.rounded-tl-0 {
    border-top-left-radius: 0px !important;
}

.rounded-tl-1 {
    border-top-left-radius: var(--border-radius-xs) !important;
}

.rounded-tl-2 {
    border-top-left-radius: var(--border-radius-sm) !important;
}

.rounded-tl,
.rounded-tl-3 {
    border-top-left-radius: var(--border-radius-md) !important;
}

.rounded-tl-4 {
    border-top-left-radius: var(--border-radius-lg) !important;
}

.rounded-tl-5 {
    border-top-left-radius: var(--border-radius-xl) !important;
}

.rounded-tl-6 {
    border-top-left-radius: var(--border-radius-xxl) !important;
}

.rounded-tl-7 {
    border-top-left-radius: var(--border-radius-xxxl) !important;
}

.rounded-tl-full {
    border-top-left-radius: 9999px !important;
}

@media (min-width: 640px) {
    .sm\:rounded-tl-0 {
        border-top-left-radius: 0px !important;
    }

    .sm\:rounded-tl-1 {
        border-top-left-radius: var(--border-radius-xs) !important;
    }

    .sm\:rounded-tl-2 {
        border-top-left-radius: var(--border-radius-sm) !important;
    }

    .sm\:rounded-tl,
    .sm\:rounded-tl-3 {
        border-top-left-radius: var(--border-radius-md) !important;
    }

    .sm\:rounded-tl-4 {
        border-top-left-radius: var(--border-radius-lg) !important;
    }

    .sm\:rounded-tl-5 {
        border-top-left-radius: var(--border-radius-xl) !important;
    }

    .sm\:rounded-tl-6 {
        border-top-left-radius: var(--border-radius-xxl) !important;
    }

    .sm\:rounded-tl-7 {
        border-top-left-radius: var(--border-radius-xxxl) !important;
    }

    .sm\:rounded-tl-full {
        border-top-left-radius: 9999px !important;
    }
}

@media (min-width: 768px) {
    .md\:rounded-tl-0 {
        border-top-left-radius: 0px !important;
    }

    .md\:rounded-tl-1 {
        border-top-left-radius: var(--border-radius-xs) !important;
    }

    .md\:rounded-tl-2 {
        border-top-left-radius: var(--border-radius-sm) !important;
    }

    .md\:rounded-tl,
    .md\:rounded-tl-3 {
        border-top-left-radius: var(--border-radius-md) !important;
    }

    .md\:rounded-tl-4 {
        border-top-left-radius: var(--border-radius-lg) !important;
    }

    .md\:rounded-tl-5 {
        border-top-left-radius: var(--border-radius-xl) !important;
    }

    .md\:rounded-tl-6 {
        border-top-left-radius: var(--border-radius-xxl) !important;
    }

    .md\:rounded-tl-7 {
        border-top-left-radius: var(--border-radius-xxxl) !important;
    }

    .md\:rounded-tl-full {
        border-top-left-radius: 9999px !important;
    }
}

@media (min-width: 1024px) {
    .lg\:rounded-tl-0 {
        border-top-left-radius: 0px !important;
    }

    .lg\:rounded-tl-1 {
        border-top-left-radius: var(--border-radius-xs) !important;
    }

    .lg\:rounded-tl-2 {
        border-top-left-radius: var(--border-radius-sm) !important;
    }

    .lg\:rounded-tl,
    .lg\:rounded-tl-3 {
        border-top-left-radius: var(--border-radius-md) !important;
    }

    .lg\:rounded-tl-4 {
        border-top-left-radius: var(--border-radius-lg) !important;
    }

    .lg\:rounded-tl-5 {
        border-top-left-radius: var(--border-radius-xl) !important;
    }

    .lg\:rounded-tl-6 {
        border-top-left-radius: var(--border-radius-xxl) !important;
    }

    .lg\:rounded-tl-7 {
        border-top-left-radius: var(--border-radius-xxxl) !important;
    }

    .lg\:rounded-tl-full {
        border-top-left-radius: 9999px !important;
    }
}

@media (min-width: 1280px) {
    .xl\:rounded-tl-0 {
        border-top-left-radius: 0px !important;
    }

    .xl\:rounded-tl-1 {
        border-top-left-radius: var(--border-radius-xs) !important;
    }

    .xl\:rounded-tl-2 {
        border-top-left-radius: var(--border-radius-sm) !important;
    }

    .xl\:rounded-tl,
    .xl\:rounded-tl-3 {
        border-top-left-radius: var(--border-radius-md) !important;
    }

    .xl\:rounded-tl-4 {
        border-top-left-radius: var(--border-radius-lg) !important;
    }

    .xl\:rounded-tl-5 {
        border-top-left-radius: var(--border-radius-xl) !important;
    }

    .xl\:rounded-tl-6 {
        border-top-left-radius: var(--border-radius-xxl) !important;
    }

    .xl\:rounded-tl-7 {
        border-top-left-radius: var(--border-radius-xxxl) !important;
    }

    .xl\:rounded-tl-full {
        border-top-left-radius: 9999px !important;
    }
}

@media (min-width: 1536px) {
    .xxl\:rounded-tl-0 {
        border-top-left-radius: 0px !important;
    }

    .xxl\:rounded-tl-1 {
        border-top-left-radius: var(--border-radius-xs) !important;
    }

    .xxl\:rounded-tl-2 {
        border-top-left-radius: var(--border-radius-sm) !important;
    }

    .xxl\:rounded-tl,
    .xxl\:rounded-tl-3 {
        border-top-left-radius: var(--border-radius-md) !important;
    }

    .xxl\:rounded-tl-4 {
        border-top-left-radius: var(--border-radius-lg) !important;
    }

    .xxl\:rounded-tl-5 {
        border-top-left-radius: var(--border-radius-xl) !important;
    }

    .xxl\:rounded-tl-6 {
        border-top-left-radius: var(--border-radius-xxl) !important;
    }

    .xxl\:rounded-tl-7 {
        border-top-left-radius: var(--border-radius-xxxl) !important;
    }

    .xxl\:rounded-tl-full {
        border-top-left-radius: 9999px !important;
    }
}

.rounded-tr-0 {
    border-top-right-radius: 0px !important;
}

.rounded-tr-1 {
    border-top-right-radius: var(--border-radius-xs) !important;
}

.rounded-tr-2 {
    border-top-right-radius: var(--border-radius-sm) !important;
}

.rounded-tr,
.rounded-tr-3 {
    border-top-right-radius: var(--border-radius-md) !important;
}

.rounded-tr-4 {
    border-top-right-radius: var(--border-radius-lg) !important;
}

.rounded-tr-5 {
    border-top-right-radius: var(--border-radius-xl) !important;
}

.rounded-tr-6 {
    border-top-right-radius: var(--border-radius-xxl) !important;
}

.rounded-tr-7 {
    border-top-right-radius: var(--border-radius-xxxl) !important;
}

.rounded-tr-full {
    border-top-right-radius: 9999px !important;
}

@media (min-width: 640px) {
    .sm\:rounded-tr-0 {
        border-top-right-radius: 0px !important;
    }

    .sm\:rounded-tr-1 {
        border-top-right-radius: var(--border-radius-xs) !important;
    }

    .sm\:rounded-tr-2 {
        border-top-right-radius: var(--border-radius-sm) !important;
    }

    .sm\:rounded-tr,
    .sm\:rounded-tr-3 {
        border-top-right-radius: var(--border-radius-md) !important;
    }

    .sm\:rounded-tr-4 {
        border-top-right-radius: var(--border-radius-lg) !important;
    }

    .sm\:rounded-tr-5 {
        border-top-right-radius: var(--border-radius-xl) !important;
    }

    .sm\:rounded-tr-6 {
        border-top-right-radius: var(--border-radius-xxl) !important;
    }

    .sm\:rounded-tr-7 {
        border-top-right-radius: var(--border-radius-xxxl) !important;
    }

    .sm\:rounded-tr-full {
        border-top-right-radius: 9999px !important;
    }
}

@media (min-width: 768px) {
    .md\:rounded-tr-0 {
        border-top-right-radius: 0px !important;
    }

    .md\:rounded-tr-1 {
        border-top-right-radius: var(--border-radius-xs) !important;
    }

    .md\:rounded-tr-2 {
        border-top-right-radius: var(--border-radius-sm) !important;
    }

    .md\:rounded-tr,
    .md\:rounded-tr-3 {
        border-top-right-radius: var(--border-radius-md) !important;
    }

    .md\:rounded-tr-3 {
        border-top-right-radius: var(--border-radius-lg) !important;
    }

    .md\:rounded-tr-4 {
        border-top-right-radius: var(--border-radius-xl) !important;
    }

    .md\:rounded-tr-5 {
        border-top-right-radius: var(--border-radius-xxl) !important;
    }

    .md\:rounded-tr-6 {
        border-top-right-radius: var(--border-radius-xxxl) !important;
    }

    .md\:rounded-tr-full {
        border-top-right-radius: 9999px !important;
    }
}

@media (min-width: 1024px) {
    .lg\:rounded-tr-0 {
        border-top-right-radius: 0px !important;
    }

    .lg\:rounded-tr-1 {
        border-top-right-radius: var(--border-radius-xs) !important;
    }

    .lg\:rounded-tr-2 {
        border-top-right-radius: var(--border-radius-sm) !important;
    }

    .lg\:rounded-tr,
    .lg\:rounded-tr-3 {
        border-top-right-radius: var(--border-radius-md) !important;
    }

    .lg\:rounded-tr-4 {
        border-top-right-radius: var(--border-radius-lg) !important;
    }

    .lg\:rounded-tr-5 {
        border-top-right-radius: var(--border-radius-xl) !important;
    }

    .lg\:rounded-tr-6 {
        border-top-right-radius: var(--border-radius-xxl) !important;
    }

    .lg\:rounded-tr-7 {
        border-top-right-radius: var(--border-radius-xxxl) !important;
    }

    .lg\:rounded-tr-full {
        border-top-right-radius: 9999px !important;
    }
}

@media (min-width: 1280px) {
    .xl\:rounded-tr-0 {
        border-top-right-radius: 0px !important;
    }

    .xl\:rounded-tr-1 {
        border-top-right-radius: var(--border-radius-xs) !important;
    }

    .xl\:rounded-tr-2 {
        border-top-right-radius: var(--border-radius-sm) !important;
    }

    .xl\:rounded-tr,
    .xl\:rounded-tr-3 {
        border-top-right-radius: var(--border-radius-md) !important;
    }

    .xl\:rounded-tr-4 {
        border-top-right-radius: var(--border-radius-lg) !important;
    }

    .xl\:rounded-tr-5 {
        border-top-right-radius: var(--border-radius-xl) !important;
    }

    .xl\:rounded-tr-6 {
        border-top-right-radius: var(--border-radius-xxl) !important;
    }

    .xl\:rounded-tr-7 {
        border-top-right-radius: var(--border-radius-xxxl) !important;
    }

    .xl\:rounded-tr-full {
        border-top-right-radius: 9999px !important;
    }
}

@media (min-width: 1536px) {
    .xxl\:rounded-tr-0 {
        border-top-right-radius: 0px !important;
    }

    .xxl\:rounded-tr-1 {
        border-top-right-radius: var(--border-radius-xs) !important;
    }

    .xxl\:rounded-tr-2 {
        border-top-right-radius: var(--border-radius-sm) !important;
    }

    .xxl\:rounded-tr,
    .xxl\:rounded-tr-3 {
        border-top-right-radius: var(--border-radius-md) !important;
    }

    .xxl\:rounded-tr-4 {
        border-top-right-radius: var(--border-radius-lg) !important;
    }

    .xxl\:rounded-tr-5 {
        border-top-right-radius: var(--border-radius-xl) !important;
    }

    .xxl\:rounded-tr-6 {
        border-top-right-radius: var(--border-radius-xxl) !important;
    }

    .xxl\:rounded-tr-7 {
        border-top-right-radius: var(--border-radius-xxxl) !important;
    }

    .xxl\:rounded-tr-full {
        border-top-right-radius: 9999px !important;
    }
}