:root {
    --light-purple-color: #faf4ff;
    --light-deep-purple-color: #E6CDFF;
    --purple-color: #7e11ea;
    --light-white-color: #fff;
    --light-grey-color: #ededed;
    --grey-color: #b1b5c3;
    --dark-grey-color: #8e8e8e;
    --black-color: #4b4b4b;
    --light-yellow-color: #fff7eb;
    --yellow-color: #ec8e00;
    --light-blue-color: #f4fbff;
    --light-deep-blue-color: #DAF3FF;
    --blue-color: #009ef7;
    --deep-blue-color: #0066fe;
    --light-blue-tosca-color: #f3ffff;
    --blue-tosca-color: #17d9e5;
    --light-green-color: #f2fcf5;
    --light-deep-green-color: #D2FEE4;
    --green-color: #0ddb62;
    --light-red-color: #fef0f0;
    --red-color: #ff4c4c;
    --light-pink-color: #fdeaf4;
    --light-deep-pink-color: #FFE0F8;
    --pink-color: #fb309a;
    --primary-light-color: var(--light-purple-color);
    --primary-color: var(--purple-color);
    --gradient-grey: linear-gradient(180deg, #f2eaf1 0%, #e8f7fe 100%);
}


/* FONT */

.light-theme {
    background-color: #f8f9fa !important;
    /* Warna terang */
    color: #212529 !important;
    /* Warna teks gelap */
}

.dark-theme {
    background-color: #212529 !important;
    /* Warna gelap */
    color: #f8f9fa !important;
    /* Warna teks terang */
}

.bold {
    font-weight: bold;
}

.strikethrough {
    text-decoration: line-through;
    color: var(--black-color);
}

.text-decoration-none {
    text-decoration: unset;
}

.underline {
    text-decoration: underline;
}

.text-underline {
    text-decoration: underline;
}


/* END FONT */

html,
body {
    color: var(--black-color);
    background-color: #fafafa;
    /* height: 100%; */
    height: 100vh;
    width: 100vw;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}


/* BACKGROUND */

.bg-transparent {
    background-color: transparent;
}

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

.bg-light-grey {
    background-color: var(--light-grey-color);
}

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

.bg-dark-grey {
    background-color: var(--dark-grey-color);
}

.bg-black {
    background-color: var(--black-color);
}

.bg-light-purple {
    background-color: var(--color-purple-50);
}

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

.bg-light-yellow {
    background-color: var(--light-yellow-color);
}

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

.bg-light-blue {
    background-color: var(--light-blue-color);
}

.bg-light-deep-blue {
    background-color: var(--light-deep-blue-color);
}

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

.bg-deep-blue {
    background-color: var(--deep-blue-color);
}

.bg-light-blue-tosca {
    background-color: var(--light-blue-tosca-color);
}

.bg-blue-tosca {
    background-color: var(--blue-tosca-color);
}

.bg-light-green {
    background-color: var(--light-green-color);
}

.bg-light-deep-green {
    background-color: var(--light-deep-green-color);
}

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

.bg-light-red {
    background-color: var(--light-red-color);
}


.bg-gradient-green {
    background: linear-gradient(89.47deg, #FFFFFF 34.23%, #E6F9EE 120.06%);
}

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

.bg-light-pink {
    background-color: var(--light-pink-color);
}

.bg-light-deep-pink {
    background-color: var(--light-deep-pink-color);
}

.bg-pink {
    background-color: var(--pink-color);
}


/* END BACKGROUND */


/* BACKGROUND GRADIENT */

.bg-gradient-light {
    background: linear-gradient(202.55deg,
            var(--light-white-color) -91.01%,
            rgba(255, 255, 255, 0.5) 89.53%);
}

.bg-gradient-purple {
    background: linear-gradient(90deg, #8117eb 0%, #a34afc 100%);
}

.bg-gradient-light-purple {
    background: linear-gradient(171.98deg,
            var(--light-white-color) 42.5%,
            rgba(231, 206, 255, 0) 151.27%,
            #8117eb 252.69%);
}

.bg-gradient-grey {
    background: var(--gradient-grey);
}


/* END BACKGROUND GRADIENT */


/* COLOR */

.color-transparent-50 {
    color: rgba(255, 255, 255, 0.5);
}

.color-transparent {
    color: transparent;
}

.color-light {
    color: var(--light-white-color);
}

.color-light-grey {
    color: var(--color-black-300);
}

.color-grey {
    color: var(--color-black-400);
}

.color-dark-grey {
    color: var(--dark-grey-color);
}

.color-black {
    color: var(--black-color);
}

.color-light-purple {
    color: var(--light-purple-color);
}

.color-purple {
    color: var(--purple-color);
}

.color-light-yellow {
    color: var(--light-yellow-color);
}

.color-yellow {
    color: var(--yellow-color);
}

.color-light-blue {
    color: var(--light-blue-color);
}

.color-light-deep-blue {
    color: var(--light-deep-blue-color);
}

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

.color-deep-blue {
    color: var(--deep-blue-color);
}

.color-light-blue-tosca {
    color: var(--light-blue-tosca-color);
}

.color-blue-tosca {
    color: var(--blue-tosca-color);
}

.color-light-green {
    color: var(--light-green-color);
}

.color-green {
    color: var(--green-color);
}

.color-light-red {
    color: var(--light-red-color);
}

.color-red {
    color: var(--red-color);
}

.color-light-pink {
    color: var(--light-pink-color);
}

.color-pink {
    color: var(--pink-color);
}

.color-white {
    color: #ffffff;
}


/* BORDER */

.border-none {
    border: unset !important;
}

.border-left-0 {
    border-left: unset !important;
}

.border-right-0 {
    border-right: unset !important;
}

.border-bottom-0 {
    border-bottom: unset !important;
}

.border-top-0 {
    border-top: unset !important;
}

.border-left-right-0 {
    border-left: unset !important;
    border-right: unset !important;
}


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

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

.border-left-green {
    border-left: 1px solid;
    border-color: var(--green-color);
}

.border-right-green {
    border-right: 1px solid;
    border-color: var(--green-color);
}

.border-y-green {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--green-color);
}

.border-x-green {
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: var(--green-color);
}

.border-x-blue {
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: var(--blue-color);
}

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


.border-left-red {
    border-left: 1px solid;
    border-color: var(--red-color);
}

.border-right-red {
    border-right: 1px solid;
    border-color: var(--red-color);
}

.border-y-red {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--red-color);
}

.border-x-red {
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: var(--red-color);
}

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

.border-bottom-blue {
    border-bottom: 1px solid;
    border-color: var(--blue-color);
}

.border-deep-blue {
    border: 1px solid;
    border-color: var(--color-blue-100);
}


.border-light-blue {
    border: 1px solid;
    border-color: #CEE4FF;
}

.border-blue-tosca {
    border: 1px solid;
    border-color: var(--blue-tosca-color) !important;
}

.border-light-grey {
    border: 1px solid;
    border-color: var(--light-grey-color) !important;
}

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

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

.border-light-purple {
    border: 1px solid !important;
    border-color: #F4E9FF !important;
}

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

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

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

.border-y-yellow {
    border-top: 1px solid !important;
    border-bottom: 1px solid !important;
    border-color: var(--yellow-color) !important;
}

.border-x-yellow {
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-color: var(--yellow-color) !important;
}

.border-pink {
    border: 1px solid !important;
    border-color: var(--color-pink-100) !important;
}

.border-light-pink {
    border: 1px solid !important;
    border-color: #FFADBE !important;
}

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

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

.border-y-pink {
    border-top: 1px solid !important;
    border-bottom: 1px solid !important;
    border-color: var(--pink-color) !important;
}

.border-x-pink {
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-color: var(--pink-color) !important;
}

.border-light-deep-blue {
    border: 1px solid !important;
    border-color: var(--light-deep-blue-color) !important;
}

.border-bottom-grey {
    border-bottom: 1px solid;
    border-color: var(--grey-color);
}

.border-bottom-light-grey {
    border-bottom: 1px solid;
    border-color: var(--light-grey-color);
}

.border-top-light-grey {
    border-top: 1px solid;
    border-color: var(--light-grey-color);
}

.border-top-grey {
    border-top: 1px solid;
    border-color: var(--grey-color);
}

.border-left-light-grey {
    border-left: 1px solid;
    border-color: var(--light-grey-color);
}

.border-light-deep-purple {
    border: 1px solid !important;
    border-color: var(--light-deep-purple-color) !important;
}

.border-right-light-grey {
    border-right: 1px solid;
    border-color: var(--light-grey-color);
}

.border-right-light-grey {
    border-right: 1px solid;
    border-color: var(--light-grey-color);
}

.border-x-light-grey {
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: var(--light-grey-color);
}

.border-dash {
    border-style: dashed;
}

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

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

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

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

.border-x-0 {
    border-left: 0px !important;
    border-right: 0px !important;
}

.border-y-0 {
    border-top: 0px !important;
    border-bottom: 0px !important;
}

.border-xs {
    border: 1px solid;
}

.border-sm {
    border: 2px solid;
}

.border-md {
    border: 3px solid;
}

.border-y-xs {
    border-top: 1px solid !important;
    border-bottom: 1px solid !important;
}

.border-y-dashed-xs {
    border-top: 1px dashed;
    border-bottom: 1px dashed;
}

.border-y-sm {
    border-top: 2px solid;
    border-bottom: 2px solid;
}

.border-y-md {
    border-top: 3px solid;
    border-bottom: 3px solid;
}

.border-x-xs {
    border-left: 1px solid;
    border-right: 1px solid;
}

.border-x-sm {
    border-left: 2px solid;
    border-right: 2px solid;
}

.border-x-md {
    border-left: 3px solid;
    border-right: 3px solid;
}

.border-t-xs {
    border-top: 1px solid;
}

.border-t-sm {
    border-top: 2px solid;
}

.border-t-md {
    border-top: 3px solid;
}

.border-b-xs {
    border-bottom: 1px solid !important;
}

.border-b-sm {
    border-bottom: 2px solid;
}

.border-b-md {
    border-bottom: 3px solid;
}

.border-l-xs {
    border-left: 1px solid !important;
}

.border-l-sm {
    border-left: 2px solid;
}

.border-l-md {
    border-left: 3px solid;
}

.border-r-xs {
    border-right: 1px solid !important;
}

.border-r-sm {
    border-right: 2px solid !important;
}

.border-r-md {
    border-right: 3px solid !important;
}


/* RADIUS */

.radius-circle {
    border-radius: 50px;
}


/*  COLOR DEPARTMENT */

.color-marketing {
    color: #e85742;
}

.color-light-marketing {
    color: #ffcfcf;
}

.bg-marketing {
    background-color: #e85742;
}

.bg-light-marketing {
    background-color: #ffe8e8;
    color: #e85742;
}


/* END COLOR DEPARTMENT */


/* WIDTH */

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


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

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

.w-auto {
    width: auto;
}

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

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

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

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

.w-0 {
    width: 0% !important;
}

.w-1 {
    width: 1% !important;
}

.w-2 {
    width: 2% !important;
}

.w-3 {
    width: 3% !important;
}

.w-4 {
    width: 4% !important;
}

.w-5 {
    width: 5% !important;
}

.w-6 {
    width: 6% !important;
}

.w-7 {
    width: 7% !important;
}

.w-8 {
    width: 8% !important;
}

.w-9 {
    width: 9% !important;
}

.w-10 {
    width: 10% !important;
}

.w-11 {
    width: 11% !important;
}

.w-12 {
    width: 12% !important;
}

.w-13 {
    width: 13% !important;
}

.w-14 {
    width: 14% !important;
}

.w-15 {
    width: 15% !important;
}

.w-16 {
    width: 16% !important;
}

.w-17 {
    width: 17% !important;
}

.w-18 {
    width: 18% !important;
}

.w-19 {
    width: 19% !important;
}

.w-20 {
    width: 20% !important;
}

.w-21 {
    width: 21% !important;
}

.w-22 {
    width: 22% !important;
}

.w-23 {
    width: 23% !important;
}

.w-24 {
    width: 24% !important;
}

.w-25 {
    width: 25% !important;
}

.w-26 {
    width: 26% !important;
}

.w-27 {
    width: 27% !important;
}

.w-28 {
    width: 28% !important;
}

.w-29 {
    width: 29% !important;
}

.w-30 {
    width: 30% !important;
}

.w-31 {
    width: 31% !important;
}

.w-32 {
    width: 32% !important;
}

.w-33 {
    width: 33% !important;
}

.w-34 {
    width: 34% !important;
}

.w-35 {
    width: 35% !important;
}

.w-36 {
    width: 36% !important;
}

.w-37 {
    width: 37% !important;
}

.w-38 {
    width: 38% !important;
}

.w-39 {
    width: 39% !important;
}

.w-40 {
    width: 40% !important;
}

.w-41 {
    width: 41% !important;
}

.w-42 {
    width: 42% !important;
}

.w-43 {
    width: 43% !important;
}

.w-44 {
    width: 44% !important;
}

.w-45 {
    width: 45% !important;
}

.w-46 {
    width: 46% !important;
}

.w-47 {
    width: 47% !important;
}

.w-48 {
    width: 48% !important;
}

.w-49 {
    width: 49% !important;
}

.w-50 {
    width: 50% !important;
}

.w-51 {
    width: 51% !important;
}

.w-52 {
    width: 52% !important;
}

.w-53 {
    width: 53% !important;
}

.w-54 {
    width: 54% !important;
}

.w-55 {
    width: 55% !important;
}

.w-56 {
    width: 56% !important;
}

.w-57 {
    width: 57% !important;
}

.w-58 {
    width: 58% !important;
}

.w-59 {
    width: 59% !important;
}

.w-60 {
    width: 60% !important;
}

.w-61 {
    width: 61% !important;
}

.w-62 {
    width: 62% !important;
}

.w-63 {
    width: 63% !important;
}

.w-64 {
    width: 64% !important;
}

.w-65 {
    width: 65% !important;
}

.w-66 {
    width: 66% !important;
}

.w-67 {
    width: 67% !important;
}

.w-68 {
    width: 68% !important;
}

.w-69 {
    width: 69% !important;
}

.w-70 {
    width: 70% !important;
}

.w-71 {
    width: 71% !important;
}

.w-72 {
    width: 72% !important;
}

.w-73 {
    width: 73% !important;
}

.w-74 {
    width: 74% !important;
}

.w-75 {
    width: 75% !important;
}

.w-76 {
    width: 76% !important;
}

.w-77 {
    width: 77% !important;
}

.w-78 {
    width: 78% !important;
}

.w-79 {
    width: 79% !important;
}

.w-80 {
    width: 80% !important;
}

.w-81 {
    width: 81% !important;
}

.w-82 {
    width: 82% !important;
}

.w-83 {
    width: 83% !important;
}

.w-84 {
    width: 84% !important;
}

.w-85 {
    width: 85% !important;
}

.w-86 {
    width: 86% !important;
}

.w-87 {
    width: 87% !important;
}

.w-88 {
    width: 88% !important;
}

.w-89 {
    width: 89% !important;
}

.w-90 {
    width: 90% !important;
}

.w-91 {
    width: 91% !important;
}

.w-92 {
    width: 92% !important;
}

.w-93 {
    width: 93% !important;
}

.w-94 {
    width: 94% !important;
}

.w-95 {
    width: 95% !important;
}

.w-96 {
    width: 96% !important;
}

.w-97 {
    width: 97% !important;
}

.w-98 {
    width: 98% !important;
}

.w-99 {
    width: 99% !important;
}

.w-100 {
    width: 100% !important;
}



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

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

/* Kelas h-1 hingga h-100 dengan persen */

.h-1 {
    height: 1% !important;
}

.h-2 {
    height: 2% !important;
}

.h-3 {
    height: 3% !important;
}

.h-4 {
    height: 4% !important;
}

.h-5 {
    height: 5% !important;
}

.h-6 {
    height: 6% !important;
}

.h-7 {
    height: 7% !important;
}

.h-8 {
    height: 8% !important;
}

.h-9 {
    height: 9% !important;
}

.h-10 {
    height: 10% !important;
}

.h-11 {
    height: 11% !important;
}

.h-12 {
    height: 12% !important;
}

.h-13 {
    height: 13% !important;
}

.h-14 {
    height: 14% !important;
}

.h-15 {
    height: 15% !important;
}

.h-16 {
    height: 16% !important;
}

.h-17 {
    height: 17% !important;
}

.h-18 {
    height: 18% !important;
}

.h-19 {
    height: 19% !important;
}

.h-20 {
    height: 20% !important;
}

.h-21 {
    height: 21% !important;
}

.h-22 {
    height: 22% !important;
}

.h-23 {
    height: 23% !important;
}

.h-24 {
    height: 24% !important;
}

.h-25 {
    height: 25% !important;
}

.h-26 {
    height: 26% !important;
}

.h-27 {
    height: 27% !important;
}

.h-28 {
    height: 28% !important;
}

.h-29 {
    height: 29% !important;
}

.h-30 {
    height: 30% !important;
}

.h-31 {
    height: 31% !important;
}

.h-32 {
    height: 32% !important;
}

.h-33 {
    height: 33% !important;
}

.h-34 {
    height: 34% !important;
}

.h-35 {
    height: 35% !important;
}

.h-36 {
    height: 36% !important;
}

.h-37 {
    height: 37% !important;
}

.h-38 {
    height: 38% !important;
}

.h-39 {
    height: 39% !important;
}

.h-40 {
    height: 40% !important;
}

.h-41 {
    height: 41% !important;
}

.h-42 {
    height: 42% !important;
}

.h-43 {
    height: 43% !important;
}

.h-44 {
    height: 44% !important;
}

.h-45 {
    height: 45% !important;
}

.h-46 {
    height: 46% !important;
}

.h-47 {
    height: 47% !important;
}

.h-48 {
    height: 48% !important;
}

.h-49 {
    height: 49% !important;
}

.h-50 {
    height: 50% !important;
}

.h-51 {
    height: 51% !important;
}

.h-52 {
    height: 52% !important;
}

.h-53 {
    height: 53% !important;
}

.h-54 {
    height: 54% !important;
}

.h-55 {
    height: 55% !important;
}

.h-56 {
    height: 56% !important;
}

.h-57 {
    height: 57% !important;
}

.h-58 {
    height: 58% !important;
}

.h-59 {
    height: 59% !important;
}

.h-60 {
    height: 60% !important;
}

.h-61 {
    height: 61% !important;
}

.h-62 {
    height: 62% !important;
}

.h-63 {
    height: 63% !important;
}

.h-64 {
    height: 64% !important;
}

.h-65 {
    height: 65% !important;
}

.h-66 {
    height: 66% !important;
}

.h-67 {
    height: 67% !important;
}

.h-68 {
    height: 68% !important;
}

.h-69 {
    height: 69% !important;
}

.h-70 {
    height: 70% !important;
}

.h-71 {
    height: 71% !important;
}

.h-72 {
    height: 72% !important;
}

.h-73 {
    height: 73% !important;
}

.h-74 {
    height: 74% !important;
}

.h-75 {
    height: 75% !important;
}

.h-76 {
    height: 76% !important;
}

.h-77 {
    height: 77% !important;
}

.h-78 {
    height: 78% !important;
}

.h-79 {
    height: 79% !important;
}

.h-80 {
    height: 80% !important;
}

.h-81 {
    height: 81% !important;
}

.h-82 {
    height: 82% !important;
}

.h-83 {
    height: 83% !important;
}

.h-84 {
    height: 84% !important;
}

.h-85 {
    height: 85% !important;
}

.h-86 {
    height: 86% !important;
}

.h-87 {
    height: 87% !important;
}

.h-88 {
    height: 88% !important;
}

.h-89 {
    height: 89% !important;
}

.h-90 {
    height: 90% !important;
}

.h-91 {
    height: 91% !important;
}

.h-92 {
    height: 92% !important;
}

.h-93 {
    height: 93% !important;
}

.h-94 {
    height: 94% !important;
}

.h-95 {
    height: 95% !important;
}

.h-96 {
    height: 96% !important;
}

.h-97 {
    height: 97% !important;
}

.h-98 {
    height: 98% !important;
}

.h-99 {
    height: 99% !important;
}

.h-100 {
    height: 100% !important;
}


/* JUSTIFY  */

.justify-items-center {
    justify-items: center;
}

.justify-items-baseline {
    justify-items: baseline;
}

.justify-items-end {
    justify-items: end;
}

.justify-items-start {
    justify-items: start;
}

.justify-content-space-arround {
    justify-content: space-around;
}

.justify-content-space-between {
    justify-content: space-between;
}

.justify-content-flex-end {
    justify-content: flex-end;
}

.overflow-hide {
    overflow: hidden;
}


/* ALIGN */

.vertical-top {
    vertical-align: top !important;
}

.vertical-center {
    vertical-align: middle !important;
}

.vertical-bottom {
    vertical-align: bottom !important;
}

.align-content-space-arround {
    align-content: space-around;
}

.align-content-space-evenly {
    align-content: space-evenly;
}

.align-content-center {
    align-content: center;
}


/* BUTTON TEXT COLOR*/

.btn-grey {
    color: var(--black-color);
}

.btn-grey:hover {
    color: var(--black-color);
    background-color: var(--light-grey-color);
}

.btn-bg-grey {
    background-color: var(--light-grey-color);
    color: var(--black-color);
}

.btn-bg-grey:hover {
    background-color: var(--light-grey-color);
    color: var(--black-color);
    box-shadow: 0px 0px 14px -2px var(--black-color) !important;
}

.btn-purple {
    color: var(--purple-color);
}

.btn-purple:hover {
    color: var(--purple-color);
    background-color: var(--light-purple-color);
}

.btn-bg-purple {
    background-color: var(--purple-color);
    color: #fff;
}

.btn-bg-purple:hover {
    background-color: var(--purple-color);
    color: #fff;
    box-shadow: 0px 0px 14px -2px var(--purple-color) !important;
}

.btn-gradient-purple {
    color: var(--light-white-color);
    padding: 13px;
    background: linear-gradient(90deg, #8117eb 0%, #a34afc 100%);
    border: 1px solid var(--purple-color);
}

.btn-gradient-purple:hover {
    box-shadow: 0px 0px 10px 0px var(--purple-color);
    -webkit-box-shadow: 0px 0px 10px 0px var(--purple-color);
    -moz-box-shadow: 0px 0px 10px 0px var(--purple-color);
}

.btn-red {
    color: var(--red-color);
}

.btn-red:hover {
    color: var(--red-color);
    background-color: var(--light-red-color);
}

.btn-bg-red {
    background-color: var(--red-color);
    color: #fff;
}

.btn-bg-red:hover {
    background-color: var(--red-color);
    color: #fff;
    box-shadow: 0px 0px 14px -2px var(--red-color) !important;
}

.btn-green {
    color: var(--green-color);
}

.btn-green:hover {
    color: var(--green-color);
    background-color: var(--light-green-color);
}

.btn-bg-green {
    background-color: var(--green-color);
    color: #fff;
}

.btn-bg-green:hover {
    background-color: var(--green-color);
    color: #fff !important;
    box-shadow: 0px 0px 14px -2px var(--green-color) !important;
}

.btn-blue {
    color: var(--blue-color);
}

.btn-blue:hover {
    color: var(--blue-color);
    background-color: var(--light-blue-color);
}

.btn-light-blue {
    background-color: var(--light-blue-color);
    color: var(--blue-color);
}

.btn-light-blue:hover {
    background-color: var(--blue-color);
    color: var(--light-blue-color);
}

.btn-light-blue {
    background-color: var(--light-blue-color);
    color: var(--blue-color);
}

.btn-light-blue:hover {
    background-color: var(--blue-color);
    color: var(--light-blue-color);
}

.btn-blue-tosca {
    color: var(--blue-tosca-color);
}

.btn-blue-tosca:hover {
    color: var(--blue-tosca-color) !important;
    border-color: var(--blue-tosca-color);
    background-color: var(--light-blue-tosca-color);
}

.btn-light-blue-tosca {
    background-color: var(--light-blue-tosca-color);
    color: var(--blue-tosca-color);
}

.btn-light-blue-tosca:hover {
    background-color: var(--blue-tosca-color);
    color: var(--light-blue-tosca-color);
}

.btn-light-green {
    background-color: var(--light-green-color);
    color: var(--green-color);
}

.btn-light-green:hover {
    background-color: var(--green-color);
    color: var(--light-green-color);
}

.btn-bg-light-green {
    background-color: var(--light-green-color);
    color: var(--green-color);
}

.btn-bg-light-green:hover {
    background-color: var(--green-color);
    color: var(--light-green-color);
}

.btn-light-red {
    background-color: var(--light-red-color);
    color: var(--red-color);
}

.btn-light-red:hover {
    background-color: var(--red-color);
    color: var(--light-red-color) !important;
}

.btn-light-red:hover svg {
    color: var(--light-red-color) !important;
}

.btn-bg-light-red {
    background-color: var(--light-red-color);
    color: var(--red-color);
}

.btn-bg-light-red:hover {
    background-color: var(--red-color);
    color: var(--light-red-color);
}

.btn-light-yellow {
    background-color: var(--light-yellow-color);
    color: var(--yellow-color);
}

.btn-light-yellow:hover {
    background-color: var(--yellow-color);
    color: var(--light-yellow-color) !important;
}

.btn-bg-light-yellow {
    background-color: var(--light-yellow-color);
    color: var(--yellow-color);
}

.btn-bg-light-yellow:hover {
    background-color: var(--yellow-color);
    color: var(--light-yellow-color);
}

.btn-bg-light-blue-tosca {
    background-color: var(--light-blue-tosca-color);
    color: var(--blue-tosca-color);
}

.btn-bg-light-blue-tosca:hover {
    background-color: var(--blue-tosca-color);
    color: var(--light-blue-tosca-color);
}

.btn-bg-blue {
    background-color: var(--blue-color);
    color: #fff;
}

.btn-bg-blue:hover {
    background-color: var(--blue-color);
    color: #fff;
    box-shadow: 0px 0px 14px -2px var(--blue-color) !important;
}

.btn-bg-blue-tosca {
    background-color: var(--blue-tosca-color);
    color: #fff;
}

.btn-bg-blue-tosca:hover {
    background-color: var(--blue-tosca-color);
    color: #fff;
    box-shadow: 0px 0px 14px -2px var(--blue-tosca-color) !important;
}

.btn-bg-deep-blue {
    background-color: var(--deep-blue-color);
    color: #fff;
}

.btn-bg-deep-blue:hover {
    background-color: var(--blue-color);
    color: #fff;
}

.btn-yellow {
    color: var(--yellow-color);
}

.btn-yellow:hover {
    color: var(--yellow-color);
    background-color: var(--light-yellow-color);
}

.btn-bg-yellow {
    background-color: var(--yellow-color);
    color: #fff;
}

.btn-bg-yellow:hover {
    background-color: var(--yellow-color);
    color: #fff;
    box-shadow: 0px 0px 14px -2px var(--yellow-color) !important;
}

.btn-pink {
    color: var(--pink-color);
}

.btn-pink:hover {
    color: var(--pink-color) !important;
    border-color: var(--pink-color);
    background-color: var(--light-pink-color);
}

.btn-bg-pink {
    background-color: var(--pink-color);
    color: #fff;
}

.btn-bg-pink:hover {
    background-color: var(--pink-color);
    color: #fff;
    box-shadow: 0px 0px 14px -2px var(--pink-color) !important;
}

.btn-light {
    background-color: var(--light-white-color);
    border: 1px solid #e7e7e7;
    color: #8f8f8f;
}

.btn-bg-light {
    background-color: var(--light-white-color);
    border: 1px solid #d9dde4;
    color: #000000;
}

.btn-bg-light:hover {
    background-color: var(--primary-light-color);
    border: 1px solid #d9dde4;
    color: #000000;
}

.btn-bg-light-blue {
    background-color: var(--light-blue-color);
    color: var(--blue-color);
}

.btn-bg-light-blue:hover {
    background-color: var(--blue-color);
    color: #ffffff;
}

.btn-bg-light-purple {
    background-color: var(--light-purple-color);
    color: var(--purple-color);
}

.btn-bg-light-purple:hover {
    background-color: var(--light-purple-color);
    color: var(--purple-color);
    box-shadow: 0px 0px 14px -2px var(--light-purple-color) !important;
}

.btn-bg-deep-blue {
    background-color: var(--deep-blue-color);
    color: #ffffff;
}

.btn-bg-deep-blue:hover {
    background-color: var(--deep-blue-color);
    color: #ffffff;
    box-shadow: 0px 0px 14px -2px var(--deep-blue-color) !important;
}

.btn-hover-deep-blue,
.btn-hover-purple,
.btn-hover-yellow,
.btn-hover-green,
.btn-hover-blue,
.btn-hover-pink,
.btn-hover-red,
.btn-hover-blue-tosca {
    background-color: #ffffff;
    color: #000000;
    border-radius: 0;
    border: 0;
}

.btn-hover-deep-blue:hover {
    background-color: var(--deep-blue-color);
    color: #ffffff;
}

.btn-hover-purple:hover {
    background-color: var(--purple-color);
    color: #ffffff;
}

.btn-hover-yellow:hover {
    background-color: var(--yellow-color);
    color: #ffffff;
}

.btn-hover-blue:hover {
    background-color: var(--blue-color);
    color: #ffffff;
}

.btn-hover-green:hover {
    background-color: var(--green-color);
    color: #ffffff;
    /* Tidak perlu transition-delay atau transition-duration pada :hover */
}

.btn-hover-pink:hover {
    background-color: var(--pink-color);
    color: #ffffff;
    /* Tidak perlu transition-delay atau transition-duration pada :hover */
}

.btn-hover-red:hover {
    background-color: var(--red-color);
    color: #ffffff;
    /* Tidak perlu transition-delay atau transition-duration pada :hover */
}

.btn-hover-blue-tosca:hover {
    background-color: var(--blue-tosca-color);
    color: #ffffff;
    /* Tidak perlu transition-delay atau transition-duration pada :hover */
}


/* TEXT ALIGN */

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}


/* END TEXT ALIGN */

/* CURSOR */
.cursor-pointer {
    cursor: pointer !important;
}

/* END CURSOR */


/* DISPLAY */

.d-flex {
    display: flex;
}

.d-grid {
    display: grid !important;
}

.hide {
    display: none !important;
}

.d-hide {
    display: none;
}


/* POSITION  */

.relative {
    position: relative;
}

.absolute {
    position: absolute !important;
}

.sticky {
    position: sticky;

}


/* END POSITION  */


/* SHADOW  */

.circle-shadow {
    box-shadow: -2px 0px 14px 0px #0000000a;
}


/* END SHADOW  */


/* ON FOCUS */


/* textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"], */


/* input[type="radio"], */


/* input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
.form-control {
    border: 1px solid #f0f2f5 !important;
    background: #fbfbfb;
    color: #333333;
} */

.form-control {
    border: 1px solid #f0f2f5 !important;
    background: #fbfbfb;
    color: #333333;
}


/* END INPUT*/

.badge-purple {
    text-align: center;
    border-radius: 25px;
    font-size: 10px;
    color: #ffffff;
    background: var(--primary-color);
    padding: 3px 6px;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-primary);
}


/* WIDTH CUSTOM */


/* END WIDTH CUSTOM */


/* CUSTOM ROUNDED  */

.rounded-left-bottom-4 {
    border-bottom-left-radius: var(--bs-border-radius-xl);
}

.rounded-right-bottom-4 {
    border-bottom-right-radius: var(--bs-border-radius-xl);
}

.rounded-left-bottom-3 {
    border-bottom-left-radius: var(--bs-border-radius-lg);
}

.rounded-right-bottom-3 {
    border-bottom-right-radius: var(--bs-border-radius-lg);
}

.rounded-right-top-4 {
    border-top-right-radius: var(--bs-border-radius-xl);
}

.rounded-left-top-4 {
    border-top-left-radius: var(--bs-border-radius-xl);
}

.rounded-right-top-3 {
    border-top-right-radius: var(--bs-border-radius-lg);
}

.rounded-left-top-3 {
    border-top-left-radius: var(--bs-border-radius-lg);
}


/* END CUSTOM ROUNDED  */


/* ABSOULUTE POSITION */

.right-0 {
    right: 0;
}

.right-min-1 {
    right: -1px;
}


/* END ABSOULUTE POSITION */

/* HR STRIPED */
hr.striped {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);
    background-size: 20px 2px;
    /* Adjust the size of the stripes */
}

hr.vertical {
    width: 1px;
    height: 30px;
    border: none;
    transform: rotate(180deg);
    margin: 0px;
}

/* TEXT DECORATION */
.text-underline {
    text-decoration: underline;
}

.rotate {
    transform: rotate(180deg);
}

.rotate-0 {
    transform: rotate(0deg);
}

.rotate-90 {
    transform: rotate(90deg);
}

/* TEXT DECORATION */