:root, [data-bs-theme=light] {
  --bs-primary: #b02029;
  --bs-primary-rgb: 176,32,41;
  --bs-primary-text-emphasis: #460D10;
  --bs-primary-bg-subtle: #EFD2D4;
  --bs-primary-border-subtle: #DFA6A9;
  --bs-secondary: #9c7e4f;
  --bs-secondary-rgb: 156,126,79;
  --bs-secondary-text-emphasis: #3E3220;
  --bs-secondary-bg-subtle: #EBE5DC;
  --bs-secondary-border-subtle: #D7CBB9;
  --bs-success: #e9b158;
  --bs-success-rgb: 233,177,88;
  --bs-success-text-emphasis: #5D4723;
  --bs-success-bg-subtle: #FBEFDE;
  --bs-success-border-subtle: #F6E0BC;
  --bs-info: #eee7dd;
  --bs-info-rgb: 238,231,221;
  --bs-info-text-emphasis: #5F5C58;
  --bs-info-bg-subtle: #FCFAF8;
  --bs-info-border-subtle: #F8F5F1;
  --bs-warning: #f1f1f1;
  --bs-warning-rgb: 241,241,241;
  --bs-warning-text-emphasis: #606060;
  --bs-warning-bg-subtle: #FCFCFC;
  --bs-warning-border-subtle: #F9F9F9;
  --bs-light: #ffffff;
  --bs-light-rgb: 255,255,255;
  --bs-light-text-emphasis: #666666;
  --bs-light-bg-subtle: #FFFFFF;
  --bs-light-border-subtle: #FFFFFF;
  --bs-dark: #3b3b3b;
  --bs-dark-rgb: 59,59,59;
  --bs-dark-text-emphasis: #181818;
  --bs-dark-bg-subtle: #D8D8D8;
  --bs-dark-border-subtle: #B1B1B1;
  --bs-body-color: #3b3b3b;
  --bs-body-color-rgb: 59,59,59;
  --bs-secondary-color: rgba(59,59,59,0.75);
  --bs-secondary-color-rgb: 59,59,59,0.75;
  --bs-tertiary-color: rgba(59,59,59,0.5);
  --bs-tertiary-color-rgb: 59,59,59,0.5;
  --bs-body-font-family: Roboto, sans-serif;
  --bs-link-color: #3b3b3b;
  --bs-link-color-rgb: 59,59,59;
  --bs-link-hover-color: #9c7e4f;
  --bs-link-hover-color-rgb: 156,126,79;
  --bs-link-decoration: none;
  --bs-focus-ring-color: rgba(176, 32, 41, 0.25); /* warna #b02029 dengan transparansi */

}


/* *:focus,  */
.form-control:focus, 
/* .btn:focus,  */
.btn-check:focus + .btn, 
/* .nav-link:focus,  */
.accordion-button:focus,
.page-link:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.25rem rgba(176, 32, 41, 0.25) !important;
  border-color: #b02029 !important;
}


/* khusus dropdown-item */
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item.active {
  color: #fff !important;
  background-color: #b02029 !important;
}


.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #b02029;
  --bs-btn-border-color: #b02029;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #961B23;
  --bs-btn-hover-border-color: #8D1A21;
  --bs-btn-focus-shadow-rgb: 243,222,223;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8D1A21;
  --bs-btn-active-border-color: #84181F;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #b02029;
  --bs-btn-disabled-border-color: #b02029;
}

.btn-outline-primary {
  --bs-btn-color: #b02029;
  --bs-btn-border-color: #b02029;
  --bs-btn-focus-shadow-rgb: 176,32,41;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b02029;
  --bs-btn-hover-border-color: #b02029;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02029;
  --bs-btn-active-border-color: #b02029;
  --bs-btn-disabled-color: #b02029;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #b02029;
}

.btn-secondary {
  --bs-btn-color: #000000;
  --bs-btn-bg: #9c7e4f;
  --bs-btn-border-color: #9c7e4f;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #AB9169;
  --bs-btn-hover-border-color: #A68B61;
  --bs-btn-focus-shadow-rgb: 23,19,12;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #B09872;
  --bs-btn-active-border-color: #A68B61;
  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-bg: #9c7e4f;
  --bs-btn-disabled-border-color: #9c7e4f;
}

.btn-outline-secondary {
  --bs-btn-color: #9c7e4f;
  --bs-btn-border-color: #9c7e4f;
  --bs-btn-focus-shadow-rgb: 156,126,79;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #9c7e4f;
  --bs-btn-hover-border-color: #9c7e4f;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #9c7e4f;
  --bs-btn-active-border-color: #9c7e4f;
  --bs-btn-disabled-color: #9c7e4f;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #9c7e4f;
}

.btn-success {
  --bs-btn-color: #000000;
  --bs-btn-bg: #e9b158;
  --bs-btn-border-color: #e9b158;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #ECBD71;
  --bs-btn-hover-border-color: #EBB969;
  --bs-btn-focus-shadow-rgb: 35,27,13;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #EDC179;
  --bs-btn-active-border-color: #EBB969;
  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-bg: #e9b158;
  --bs-btn-disabled-border-color: #e9b158;
}

.btn-outline-success {
  --bs-btn-color: #e9b158;
  --bs-btn-border-color: #e9b158;
  --bs-btn-focus-shadow-rgb: 233,177,88;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #e9b158;
  --bs-btn-hover-border-color: #e9b158;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #e9b158;
  --bs-btn-active-border-color: #e9b158;
  --bs-btn-disabled-color: #e9b158;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #e9b158;
}

.btn-info {
  --bs-btn-color: #000000;
  --bs-btn-bg: #eee7dd;
  --bs-btn-border-color: #eee7dd;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #F1EBE2;
  --bs-btn-hover-border-color: #F0E9E0;
  --bs-btn-focus-shadow-rgb: 36,35,33;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #F1ECE4;
  --bs-btn-active-border-color: #F0E9E0;
  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-bg: #eee7dd;
  --bs-btn-disabled-border-color: #eee7dd;
}

.btn-outline-info {
  --bs-btn-color: #eee7dd;
  --bs-btn-border-color: #eee7dd;
  --bs-btn-focus-shadow-rgb: 238,231,221;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #eee7dd;
  --bs-btn-hover-border-color: #eee7dd;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #eee7dd;
  --bs-btn-active-border-color: #eee7dd;
  --bs-btn-disabled-color: #eee7dd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #eee7dd;
}

.btn-warning {
  --bs-btn-color: #000000;
  --bs-btn-bg: #f1f1f1;
  --bs-btn-border-color: #f1f1f1;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #F3F3F3;
  --bs-btn-hover-border-color: #F2F2F2;
  --bs-btn-focus-shadow-rgb: 36,36,36;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #F4F4F4;
  --bs-btn-active-border-color: #F2F2F2;
  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-bg: #f1f1f1;
  --bs-btn-disabled-border-color: #f1f1f1;
}

.btn-outline-warning {
  --bs-btn-color: #f1f1f1;
  --bs-btn-border-color: #f1f1f1;
  --bs-btn-focus-shadow-rgb: 241,241,241;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #f1f1f1;
  --bs-btn-hover-border-color: #f1f1f1;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #f1f1f1;
  --bs-btn-active-border-color: #f1f1f1;
  --bs-btn-disabled-color: #f1f1f1;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f1f1f1;
}

.btn-light {
  --bs-btn-color: #000000;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #D9D9D9;
  --bs-btn-hover-border-color: #CCCCCC;
  --bs-btn-focus-shadow-rgb: 38,38,38;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #CCCCCC;
  --bs-btn-active-border-color: #BFBFBF;
  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-bg: #ffffff;
  --bs-btn-disabled-border-color: #ffffff;
}

.btn-outline-light {
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-focus-shadow-rgb: 255,255,255;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #ffffff;
  --bs-btn-active-border-color: #ffffff;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ffffff;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #3b3b3b;
  --bs-btn-border-color: #3b3b3b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #323232;
  --bs-btn-hover-border-color: #2F2F2F;
  --bs-btn-focus-shadow-rgb: 226,226,226;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2F2F2F;
  --bs-btn-active-border-color: #2C2C2C;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #3b3b3b;
  --bs-btn-disabled-border-color: #3b3b3b;
}

.btn-outline-dark {
  --bs-btn-color: #3b3b3b;
  --bs-btn-border-color: #3b3b3b;
  --bs-btn-focus-shadow-rgb: 59,59,59;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3b3b3b;
  --bs-btn-hover-border-color: #3b3b3b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3b3b3b;
  --bs-btn-active-border-color: #3b3b3b;
  --bs-btn-disabled-color: #3b3b3b;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #3b3b3b;
}

a {
  text-decoration: var(--bs-link-decoration);
}

.m-0 {
  margin: 0!important;
}

.mt-0 {
  margin-top: 0!important;
}

.mt-2 {
  margin-top: .5rem!important;
}

.mt-3 {
  margin-top: 1rem!important;
}

.mt-4 {
  margin-top: 1.5rem!important;
}

.mt-5 {
  margin-top: 3rem!important;
}

.mt-6 {
  margin-top: 4.5rem !important;
}

.me-0 {
  margin-right: 0!important;
}

.me-1 {
  margin-right: .25rem!important;
}

.me-2 {
  margin-right: .5rem!important;
}

.me-3 {
  margin-right: 1rem!important;
}

.me-4 {
  margin-right: 1.5rem!important;
}

.mb-0 {
  margin-bottom: 0!important;
}

.mb-1 {
  margin-bottom: .25rem!important;
}

.mb-2 {
  margin-bottom: .5rem!important;
}

.mb-3 {
  margin-bottom: 1rem!important;
}

.mb-4 {
  margin-bottom: 1.5rem!important;
}

.mb-6 {
  margin-bottom: 4.5rem !important;
}

.ms-0 {
  margin-left: 0!important;
}

.ms-2 {
  margin-left: .5rem!important;
}

.ms-3 {
  margin-left: 1rem!important;
}

.ms-4 {
  margin-left: 1.5rem!important;
}

.ms-7 {
  margin-left: 6rem !important;
}

.ms-8 {
  margin-left: 7.5rem !important;
}

.ms-9 {
  margin-left: 9rem !important;
}

.ms-auto {
  margin-left: auto!important;
}

.p-0 {
  padding: 0!important;
}

.p-1 {
  padding: .25rem!important;
}

.p-3 {
  padding: 1rem!important;
}

.p-6 {
  padding: 4.5rem !important;
}

.px-3 {
  padding-right: 1rem!important;
  padding-left: 1rem!important;
}

.px-6 {
  padding-left: 4.5rem !important;
  padding-right: 4.5rem !important;
}

.px-10 {
  padding-left: 10.5rem !important;
  padding-right: 10.5rem !important;
}

.py-3 {
  padding-top: 1rem!important;
  padding-bottom: 1rem!important;
}

.py-4 {
  padding-top: 1.5rem!important;
  padding-bottom: 1.5rem!important;
}

.py-5 {
  padding-top: 3rem!important;
  padding-bottom: 3rem!important;
}

.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.pt-0 {
  padding-top: 0!important;
}

.pt-1 {
  padding-top: .25rem!important;
}

.pt-2 {
  padding-top: .5rem!important;
}

.pt-3 {
  padding-top: 1rem!important;
}

.pt-4 {
  padding-top: 1.5rem!important;
}

.pt-5 {
  padding-top: 3rem!important;
}

.pe-0 {
  padding-right: 0!important;
}

.pe-2 {
  padding-right: .5rem!important;
}

.pe-3 {
  padding-right: 1rem!important;
}

.pe-4 {
  padding-right: 1.5rem!important;
}

.pe-5 {
  padding-right: 3rem!important;
}

.pe-8 {
  padding-right: 7.5rem !important;
}

.pb-0 {
  padding-bottom: 0!important;
}

.pb-1 {
  padding-bottom: .25rem!important;
}

.pb-2 {
  padding-bottom: .5rem!important;
}

.pb-3 {
  padding-bottom: 1rem!important;
}

.pb-5 {
  padding-bottom: 3rem!important;
}

.ps-0 {
  padding-left: 0!important;
}

.ps-1 {
  padding-left: .25rem!important;
}

.ps-2 {
  padding-left: .5rem!important;
}

.ps-3 {
  padding-left: 1rem!important;
}

.ps-4 {
  padding-left: 1.5rem!important;
}

.ps-5 {
  padding-left: 3rem!important;
}

.ps-8 {
  padding-left: 7.5rem !important;
}

@media (min-width:768px) {
  .pt-md-0 {
    padding-top: 0!important;
  }
}

@media (min-width:768px) {
  .pt-md-1 {
    padding-top: .25rem!important;
  }
}

@media (min-width:768px) {
  .ps-md-0 {
    padding-left: 0!important;
  }
}

@media (min-width:768px) {
  .ps-md-1 {
    padding-left: .25rem!important;
  }
}

@media (min-width:992px) {
  .mb-lg-0 {
    margin-bottom: 0!important;
  }
}

@media (min-width:992px) {
  .mb-lg-5 {
    margin-bottom: 3rem!important;
  }
}

@media (min-width:1200px) {
  .py-xl-5 {
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
  }
}