/*===================================
* RESET
*===================================*/

body {
  background-color: var(--body-bg);
}

body,
.btn,
.dropdown-menu,
.input-group-append,
.custom-select,
.popover-header,
.form-control {
  font-size: 0.875rem;
}

.custom-radio .custom-control,
.custom-checkbox .custom-control {
  min-height: 1.6rem;
}

.custom-radio .custom-control-label::before,
.custom-radio .custom-control-label::after,
.custom-checkbox .custom-control-label::before,
.custom-checkbox .custom-control-label::after {
  top: 0.15em;
}

.custom-control-input {
  margin-left: -1.5rem;
  width: 1rem;
  height: 1rem;
  margin-top: 0.3rem;
}

.form-control,
.custom-select {
  height: calc(1.5rem + 0.75rem + 2px);
}

a {
  color: inherit;
}

a:hover {
  color: inherit;
  text-decoration: none;
  outline: none;
}

a:focus-visible {
  outline-color: var(--primary);
}

a.text-primary:focus,
a.text-primary:hover {
  color: var(--primary-darker) !important;
}

.bg-primary,
.bg-secondary,
.bg-success,
.bg-danger,
.bg-info,
.bg-dark {
  color: #fff;
}

button:focus {
  outline: none;
}

.btn.btn-lg,
.col-form-label-lg,
.form-control-lg,
.input-group-lg > .custom-select,
.input-group-lg > .form-control,
.input-group-lg > .input-group-append > .btn,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-prepend > .input-group-text {
  font-size: 1rem;
}

.btn.btn-sm,
.col-form-label-sm,
.form-control-sm,
.input-group-sm > .custom-select,
.input-group-sm > .form-control,
.input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-prepend > .input-group-text {
  font-size: 0.675rem;
}

.btn.disabled,
.btn:disabled {
  cursor: default;
}

.btn:focus,
.btn.focus,
button:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.custom-select:focus,
.custom-control-input:focus ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before,
.custom-file-input:focus ~ .custom-file-label,
.form-control:focus,
.page-link:focus,
.show > .btn-primary.dropdown-toggle:focus {
  outline: 0;
  box-shadow: none;
}

.form-check-input {
  margin-top: 0.2rem;
}

.form-check-input.position-static {
  margin-top: 0.6rem;
}
.form-check-input:focus-visible {
  outline: 1px solid var(--primary);
}

fieldset.form-group {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

/* recheck lagi: form-control-lg,form-control-sm jadi ngaco. Jika perlu buat dengan class baru, jangan overide. */
/*
.form-control,
.custom-file,
.custom-select,
.form-control-plaintext {
  border-radius: 0;
  font-size: 0.875rem;
  height: auto;
}
*/
.input-group-text {
  font-size: 0.875rem;
}

.breadcrumb {
  padding: 0;
  background: transparent;
}

.dropdown-menu > .dropdown-item i {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-header,
.card-footer {
  position: relative;
  background-color: transparent;
}

.card-header:first-child {
  border-top: none;
}

.card .card-header h1,
.card .card-header h2,
.card .card-header h3,
.card .card-header h4,
.card .card-header h5,
.card .card-header h6 {
  margin-bottom: 0;
  display: inline-block;
  margin-right: 10px;
  position: relative;
}

.modal-header {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

@media (min-width: 992px) {
  .modal-xl {
    max-width: 900px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1100px;
  }
}

.list-group-item > .form-check-input {
  margin-left: 0;
  position: relative;
}

/*=============================
 * RESET PALETTE COLOR
 *=============================*/
.btn-outline-primary.disabled,
.btn-outline-primary:disabled,
.btn-link,
.btn-link:hover,
.page-link,
.page-link:hover {
  color: var(--primary);
}

.bg-primary,
.bg-secondary,
.bg-success,
.bg-danger,
.bg-info,
.bg-dark {
  color: #fff;
}

.bg-warning,
.bg-light {
  color: #212529;
}

/* alert */
.alert-primary {
  color: var(--primary-dark);
  background-color: var(--primary-light);
  border-color: var(--primary-light);
}

.alert-primary .alert-link {
  color: var(--primary-darker);
}

/* badge */
.badge-primary {
  background-color: var(--primary);
  color: #fff;
}

/* button */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

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

.btn-outline-primary:hover {
  color: #fff;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

/* dropdown */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary);
}

.show > .btn-primary.dropdown-toggle,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* nav */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary);
}

/* list-group */
.list-group-item.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.list-group-item-primary {
  color: var(--primary);
  background-color: var(--primary-light);
}

.list-group-item-primary.list-group-item-action:focus,
.list-group-item-primary.list-group-item-action:hover {
  color: var(--primary-darker);
  background-color: var(--primary-light);
}

/* pagination */
.page-item.active .page-link,
.page-item.active .page-link {
  border-color: var(--primary);
}

.page-item.active .page-link {
  background-color: var(--primary);
}

/* form */

.form-control:focus,
.custom-select:focus,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--primary);
}

.custom-checkbox
  .custom-control-input:indeterminate
  ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--primary);
  border-color: var(--primary);
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: var(--primary-light);
  border-color: var(--primary-light);
}

.switch input[type="checkbox"]:checked + .cr:before,
.switch.switch-primary input[type="checkbox"]:checked + .cr:before {
  background: var(--primary);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
}

.custom-select option:checked,
.custom-select option:hover,
.progress-bar {
  background-color: var(--primary);
  color: #fff;
}

/* .custom-range */
/*harus diinput 1 per 1 */
input[type="range"].custom-range::-webkit-slider-thumb {
  background: var(--primary);
}

input[type="range"].custom-range::-moz-range-thumb {
  background: var(--primary);
}

input[type="range"].custom-range::-ms-thumb {
  background: var(--primary);
}

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

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

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

.text-primary,
.text-h-primary:hover {
  color: var(--primary) !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: var(--primary) !important;
}

.bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn {
  color: var(--primary) !important;
}

.fc-event,
.fc-event-dot {
  background-color: var(--primary);
}

.fc-event {
  border: 1px solid var(--primary);
}

.fc-toolbar {
  flex-direction: column;
}

@media (min-width: 768px) {
  .fc-toolbar {
    flex-direction: row;
  }
}

/*
.border-bottom-primary th {
  border-bottom: 1px solid var(--primary) !important;
}
*/

.slider-handle {
  background-color: var(--primary);
  background-image: linear-gradient(
    to bottom,
    var(--primary) 0,
    var(--primary) 100%
  );
  background-repeat: repeat-x;
}

.border-bottom-primary td {
  border-bottom: 1px solid var(--primary);
}

/*
.bootstrap-tagsinput .tag,
.highcharts-menu-item:hover,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary);
}

.highcharts-selection-marker {
  fill: var(--primary);
}

.highcharts-legend-nav-active,
.highcharts-navigator-mask-inside {
  fill: var(--primary);
}

.highcharts-color-0,
.highcharts-navigator-series {
  fill: var(--primary);
  stroke: var(--primary);
}

.slider.slider-horizontal .slider-handle.triangle,
.slider.slider-horizontal .slider-tick.triangle {
  border-bottom-color: var(--primary);
}

.slider.slider-vertical .slider-handle.triangle,
.slider.slider-vertical .slider-tick.triangle {
  border-left-color: var(--primary);
  border-right-color: var(--primary);
}

.select2-container--classic .select2-selection--single:focus,
.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic .select2-selection--multiple:focus,
.select2-container--classic.select2-container--open .select2-selection--multiple,
.select2-container--classic.select2-container--open .select2-dropdown {
  border-color: var(--primary);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: 1px solid var(--primary);
}
*/

/*=============================
 * END OF RESET PALETTE COLOR
 *=============================*/

.table-responsive > table {
  margin-bottom: 0;
}