:root {
    /* enduser */
    --tc-orange-light: #ffe2d0;
    --tc-orange: #ff6100;
    --tc-dark-orange: #ff5100;
    --tc-light-orange: #ffeee3;
    --tc-yellow: #ffa500;
    --tc-orange-transparent: rgba(255, 81, 0, 0.2);
    --tc-green: #2f9251;
    --tc-gray: #757575;
    --tc-gray-50: #75757579;
    --tc-black: #212121;
    --tc-dark-blue: #27445e;
    --tc-soft-cloud-gray: #f8f9f9;
    --dark-grey-6:rgba(62, 62, 62, 0.153);
    --dark-grey-3:rgba(255, 255, 255, 0.489);
    --Pure-snow-white: #fefefe;
    --color-background: #cfe4ff;
    --grey-light:#949494;
    --bg-body-3:whitesmoke;
    /* Warna latar belakang */
    --color-background-secondary: #f6f6f6;
    --dark-white-2: #f9fafa;
    --dark-white-3:#fff4ec;
    --creme-light:#ffeece;
    --dark-white-4:#eefeef;
    --dark-white-5:#fff5dc;
    --color-primary: #afcff4;
    --cl-creme:#ffe5be;
    --light-white-2:#d9d9d9;
    --dark-grey-2:rgba(62, 62, 62, 0.062);
    /* Warna utama */
    --color-text: #333;
    /* Warna teks */
    --color-button: #4891e1;
    /* Warna tombol */
    --color-button-secondary: var(--tc-orange);
    --gradient-background: linear-gradient(
        135deg,
        var(--color-background),
        var(--color-primary)
    );
    /* Gradien latar belakang */
    --color-background-confirmation: #dbffe7;
    /* Warna latar belakang konfirmasi */
    --color-text-confirmation: #2f9251;
    /* Warna teks konfirmasi */

    --spacing-large: 55px;
    /* Padding besar */
    --spacing-medium: 20px;
    /* Padding sedang */
    --spacing-small: 10px;
    /* Padding kecil */

    --border-radius-large: 50px;
    /* Border radius besar */
    --border-radius-medium: 20px;
    /* Border radius sedang */
    --border-radius-small: 10px;
    /* Border radius sedang */
    --sct3-xs-gap: 10px;
    --sct3-sm-gap: 20px;
    --sct3-md-gap: 30px;
    --sct3-lg-gap: 40px;
    --sct3-xl-gap: 60px;
    --star-color: #f29d38;
    --gray-teal: #27445e;
    --sect4-pink: #ef9595;
    --sect4-dark-teal: #293a4c;
    --sect4-green-teal: #15a191;
    --primary-color: var(--tc-orange);
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --warning-color: var(--tc-yellow);
    --info-color: var(--tc-yellow);
    --light-gray: #f1f1f1;
    --light-orange: #fff7f4;
    --true-white:#ffffff;
    --white-6:#e5fee6;
    --dark-gray: #0a0909;
    --background-color: #fefaf5;
    --border-color: #f8cfcf;
    --text-color: white;
    --hover-color: #d9534f;
    --bg-dark-50: #0a090976;
    --dark-yellow: #e58d23;
    --semi-dark-orange: #ffa928;
    --dark-white: #f7f7f7;
    --white-basic: rgb(255, 255, 255);
    --dark-transparent:rgba(0, 0, 0, 0.3);
    --dark-transparent-2:rgba(0, 0, 0, 0.2);
    --creme-transparent:rgba(255, 122, 0, 0.25);
}

.scroll-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.btn-active-orange {
    --bs-btn-bg: var(--light-orange) !important;
    --bs-btn-border-color: var(--tc-orange) !important;
    --bs-btn-hover-bg: var(--light-orange);
    --bs-btn-hover-border-color: var(--light-orange) !important;

    --bs-btn-active-bg: var(--light-orange);
    --bs-btn-active-border-color: var(--tc-orange);
}
.btn-based-orange {
    --bs-btn-border-color: var(--dark-gray) !important;
    --bs-btn-hover-bg: var(--light-orange);
    --bs-btn-hover-border-color: var(--tc-orange) !important;

    --bs-btn-active-bg: var(--light-orange);
    --bs-btn-active-border-color: var(--tc-orange);
}

.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--tc-yellow);
    --bs-btn-border-color: var(--tc-yellow);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--tc-yellow);
    --bs-btn-hover-border-color: var(--tc-yellow);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--tc-yellow);
    --bs-btn-active-border-color: var(--tc-yellow);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--tc-yellow);
    --bs-btn-disabled-border-color: var(--tc-yellow);
}