:root {
  --bs-main: #e50012;
  --bs-main-rgb: 230, 0, 19;
  --bs-primary: #3f80ea;
  --bs-primary-rgb: 63, 128, 234;
  --bs-secondary: #495057;
  --bs-secondary-rgb: 73, 80, 87;
  --bs-success: #4bbf73;
  --bs-success-rgb: 75, 191, 115;
  --bs-info: #1f9bcf;
  --bs-info-rgb: 31, 155, 207;
  --bs-warning: #ffa100;
  --bs-warning-rgb: 224, 148, 42;
  --bs-danger: #d9534f;
  --bs-danger-rgb: 217, 83, 79;
  --bs-yellow: #ffcc00;
  --bs-yellow-rgb: 255, 204, 0;
  --bs-gray: #6c757d;
  --bs-gray-rgb: 108, 117, 125;
  --bs-gray-dark: #343a40;
  --bs-gray-dark-rgb: 52, 58, 64;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-link-color: var(--bs-gray-600);
  --bs-link-hover-color: var(--bs-gray-700);

  --primary-light: #1659c7;
  --primary-dark: #84aef2;

  --bs-body-color: #333;
  --bs-emphasis-color: #111111;
  --bs-emphasis-color-rgb: 17, 17, 17;
  --bs-medium-emphasis-color: #838587;
  --bs-medium-emphasis-color-rgb: 131, 133, 135;
  --bs-reverse-emphasis-color: #fff;
  --bs-reverse-medium-emphasis-color: #8F8F8F;
  --bs-reverse-medium-emphasis-color-rgb: 143, 143, 143;

  --ck-border-radius: 8px;

}

/********** alert **********/
.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 0.75rem;
  --bs-alert-padding-y: 0.5rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
  --bs-alert-border-radius: var(--bs-border-radius);
  --bs-alert-link-color: inherit;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}

.alert-primary {
  --bs-alert-color: var(--bs-primary);
  --bs-alert-bg: rgba(var(--bs-primary-rgb), 0.175);
  --bs-alert-border-color: transparent;
}
.alert-secondary {
  --bs-alert-color: var(--bs-secondary);
  --bs-alert-bg: rgba(var(--bs-secondary-rgb), 0.175);
  --bs-alert-border-color: transparent;
}
.alert-success {
  --bs-alert-color: var(--bs-success);
  --bs-alert-bg: rgba(var(--bs-success-rgb), 0.175);
  --bs-alert-border-color: transparent;
}
.alert-info {
  --bs-alert-color: var(--bs-info);
  --bs-alert-bg: rgba(var(--bs-info-rgb), 0.175);
  --bs-alert-border-color: transparent;
}
.alert-danger {
  --bs-alert-color: var(--bs-danger);
  --bs-alert-bg: rgba(var(--bs-danger-rgb), 0.175);
  --bs-alert-border-color: transparent;
}
.alert-warning {
  --bs-alert-color: var(--bs-warning);
  --bs-alert-bg: rgba(var(--bs-warning-rgb), 0.175);
  --bs-alert-border-color: transparent;
}

/********** badge **********/
.badge {
  --bs-badge-font-size: 0.75rem;
  --bs-badge-font-weight: 600;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: var(--bs-border-radius);
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  border-radius: var(--bs-badge-border-radius);
}
.badge-sm {
  --bs-badge-font-size: 0.625rem;
  margin-bottom: 2px;
}
.badge-lg {
  --bs-badge-font-size: 16px;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: var(--bs-border-radius);
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  color: var(--bs-badge-color);
  border-radius: var(--bs-badge-border-radius);
}
.badge > .icon-wrap {
  width: 12px;
  height: 12px;
}
.badge > .icon-wrap > i {
  font-size: var(--bs-badge-font-size);
}
.badge > .icon-wrap > i.fa-slash {
  text-shadow: 0 1px 0 var(--bs-body-bg);
}
.text-bg-primary {
  color: #fff !important;
  background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-danger {
  color: #fff !important;
  background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-outline-primary {
  color: var(--bs-primary) !important;
  background-color: RGBA(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 0)) !important;
  border: 1px solid RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-outline-secondary {
  color: var(--bs-secondary) !important;
  background-color: RGBA(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 0)) !important;
  border: 1px solid RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-outline-success {
  color: var(--bs-success) !important;
  background-color: RGBA(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 0)) !important;
  border: 1px solid RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-outline-info {
  color: var(--bs-info) !important;
  background-color: RGBA(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 0)) !important;
  border: 1px solid RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-info {
  color: #fff !important;
}
.text-bg-outline-warning {
  color: var(--bs-warning) !important;
  background-color: RGBA(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 0)) !important;
  border: 1px solid RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-warning {
  color: #fff !important;
}
.text-bg-outline-danger {
  color: var(--bs-danger) !important;
  background-color: RGBA(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 0)) !important;
  border: 1px solid RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-outline-dark {
  color: var(--bs-dark) !important;
  background-color: RGBA(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 0)) !important;
  border: 1px solid RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
}

.badge-primary {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.175);
}

.badge-secondary {
  color: var(--bs-secondary);
  background: rgba(var(--bs-secondary-rgb), 0.175);
}
.badge-dark {
  color: var(--bs-white);
  background: rgba(var(--bs-gray-dark-rgb), 0.75);
}

.badge-success {
  color: var(--bs-success);
  background: rgba(var(--bs-success-rgb), 0.175);
}

.badge-info {
  color: var(--bs-info);
  background: rgba(var(--bs-info-rgb), 0.175);
}

.badge-danger {
  color: var(--bs-danger);
  background: rgba(var(--bs-danger-rgb), 0.175);
}

.badge-warning {
  color: var(--bs-warning);
  background: rgba(var(--bs-warning-rgb), 0.175);
}

/********** button **********/
.btn {
  font-size: 16px;
  font-weight: 500;
  --bs-btn-bg: var(--bs-body-bg);
}

/* size */
.btn-sm, .btn-group-sm {
  font-size: 14px;
  border-radius: 6px;
}
.btn-group-xs>.btn, .btn-xs {
  --bs-btn-padding-y:2px;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-border-radius: 4px;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: 0.375rem;
}

/* style */
.btn-text {
  color: var(--bs-primary);
}
.btn-text-arrow {
  position: relative;
  color: var(--bs-primary);
  padding-right: 14px;
}
.btn-text-arrow:after {
  content: '';
  position: absolute;
  left: calc(100% - 12px);
  top: 2px;
  width: 12px;
  height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%233f80ea"><path d="M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 33.9z"/></svg>');
  background-repeat: no-repeat;
  background-size: 12px 12px;
}
.btn-text:hover,
.btn-text-arrow:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}
.btn-main {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-main);
  --bs-btn-border-color: var(--bs-main);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d80009;
  --bs-btn-hover-border-color: #d80009;
  --bs-btn-focus-shadow-rgb: 92, 147, 237;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #cb0000;
  --bs-btn-active-border-color: #cb0000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-main);
  --bs-btn-disabled-border-color: var(--bs-main);
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px rgba(var(--bs-main-rgb), .5);
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1d69e6;
  --bs-btn-hover-border-color: #1d69e6;
  --bs-btn-focus-shadow-rgb: 92, 147, 237;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1863de;
  --bs-btn-active-border-color: #1863de;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px rgba(92, 147, 237, .5);
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #383d42;
  --bs-btn-hover-border-color: #383d42;
  --bs-btn-focus-shadow-rgb: 100, 106, 112;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #32373b;
  --bs-btn-active-border-color: #32373b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px rgba(100, 106, 112, .5);
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3ca861;
  --bs-btn-hover-border-color: #3ca861;
  --bs-btn-focus-shadow-rgb: 102, 201, 136;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #389f5c;
  --bs-btn-active-border-color: #389f5c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}
.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.show>.btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px rgba(102, 201, 136, .5);
}
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1a82ae;
  --bs-btn-hover-border-color: #1a82ae;
  --bs-btn-focus-shadow-rgb: 65, 170, 214;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #187aa3;
  --bs-btn-active-border-color: #187aa3;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
}
.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus,
.show>.btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px rgba(65, 170, 214, .5);
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d23430;
  --bs-btn-hover-border-color: #d23430;
  --bs-btn-focus-shadow-rgb: 223, 109, 105;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c9302c;
  --bs-btn-active-border-color: #c9302c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}
.btn-danger:not(:disabled):not(.disabled).active:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.show>.btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px rgba(223, 109, 105, .5);
}
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e0942a;
  --bs-btn-hover-border-color: #e0942a;
  --bs-btn-focus-shadow-rgb: 200, 146, 70;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dd8e20;
  --bs-btn-active-border-color: #dd8e20;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}
.btn-warning:not(:disabled):not(.disabled).active:focus,
.btn-warning:not(:disabled):not(.disabled):active:focus,
.show>.btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px rgba(200, 146, 70, .5);
}
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #222;
  --bs-btn-hover-border-color: #222;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}
.btn-dark:not(:disabled):not(.disabled).active:focus,
.btn-dark:not(:disabled):not(.disabled):active:focus,
.show>.btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px rgba(66, 70, 73, .5);
}
.btn-light {
  --bs-btn-color:  #333;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-focus-shadow-rgb: 222, 226, 230;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: var(--bs-border-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: var(--bs-border-color);
}
.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.show>.btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px rgba(222, 226, 230, .5);
}
.btn-gray {
  --bs-btn-color: var(--bs-medium-emphasis-color);
  --bs-btn-bg: var(--bs-gray-300);
  --bs-btn-border-color: var(--bs-gray-300);
  --bs-btn-hover-color: var(--bs-medium-emphasis-color);
  --bs-btn-hover-bg: var(--bs-gray-400);
  --bs-btn-hover-border-color: var(--bs-gray-400);
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: var(--bs-medium-emphasis-color);
  --bs-btn-active-bg: var(--bs-gray-500);
  --bs-btn-active-border-color: var(--bs-gray-500);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-gray-500);
  --bs-btn-disabled-bg: var(--bs-gray-200);
  --bs-btn-disabled-border-color: var(--bs-gray-200);
}
.btn-gray:not(:disabled):not(.disabled).active:focus,
.btn-gray:not(:disabled):not(.disabled):active:focus,
.show>.btn-gray.dropdown-toggle:focus {
  box-shadow: 0 0 0 3px #6c757d80;
}
/* outline */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 92, 147, 237;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1863de;
  --bs-btn-active-border-color: #1863de;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none;
}
.btn-outline-primary.focus,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 3px rgba(63, 128, 234, .5);
}
.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 100, 106, 112;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #32373b;
  --bs-btn-active-border-color: #32373b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-gradient: none;
}
.btn-outline-secondary.focus,
.btn-outline-secondary:focus {
  box-shadow: 0 0 0 3px rgba(73, 80, 87, .5);
}
.btn-outline-success {
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: 102, 201, 136;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #389f5c;
  --bs-btn-active-border-color: #389f5c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-success);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-success);
  --bs-gradient: none;
}
.btn-outline-success.focus,
.btn-outline-success:focus {
  box-shadow: 0 0 0 3px rgba(75, 191, 115, .5);
}
.btn-outline-info {
  --bs-btn-color: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-focus-shadow-rgb: 65, 170, 214;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #187aa3;
  --bs-btn-active-border-color: #187aa3;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-info);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-info);
  --bs-gradient: none;
}
.btn-outline-info.focus,
.btn-outline-info:focus {
  box-shadow: 0 0 0 3px rgba(31, 155, 207, .5);
}
.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: 223, 109, 105;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c9302c;
  --bs-btn-active-border-color: #c9302c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-gradient: none;
}
.btn-outline-danger.focus,
.btn-outline-danger:focus {
  box-shadow: 0 0 0 3px rgba(217, 83, 79, .5);
}
.btn-outline-warning {
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-focus-shadow-rgb: 200, 146, 70;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dd8e20;
  --bs-btn-active-border-color: #dd8e20;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-warning);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-warning);
  --bs-gradient: none;
}
.btn-outline-warning.focus,
.btn-outline-warning:focus {
  box-shadow: 0 0 0 3px rgba(200, 146, 70, .5);
}
.btn-outline-dark {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #222;
  --bs-btn-hover-border-color: #222;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:  #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}
.btn-outline-dark.focus,
.btn-outline-dark:focus {
  box-shadow: 0 0 0 3px rgba(66, 70, 73, .5);
}
.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-focus-shadow-rgb: 222, 226, 230;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: var(--bs-border-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:  #fff;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff;
  --bs-gradient: none;
}
.btn-outline-light.focus,
.btn-outline-light:focus {
  box-shadow: 0 0 0 3px rgba(222, 226, 230, .5);
}
.btn-outline-gray {
  --bs-btn-color: var(--bs-gray);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-gray);
  --bs-btn-hover-bg: var(--bs-border-color);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: var(--bs-gray-dark);
  --bs-btn-active-bg: var(--bs-border-color);
  --bs-btn-active-border-color: var(--bs-border-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-btn-focus-shadow-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-gray);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-gray);
  --bs-gradient: none;
}
.btn-outline-gray.focus,
.btn-outline-gray:focus {
  box-shadow: 0 0 0 3px rgba(108, 117, 125, .5);
}

/* group */
.btn-group-wrap {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: start;
  align-items: center;
  padding: 4px;
  border-radius: var(--bs-border-radius);
  background: rgba(var(--bs-gray-dark-rgb) ,0.05);
  overflow-x: auto;
}
/* 스크롤바 전체 기본 꾸미기 */
.btn-group-wrap::-webkit-scrollbar {
  height: 4px;  /* 가로축 스크롤바 폭 너비 */
}
/* 스크롤바 막대 꾸미기 */
.btn-group-wrap::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-body-color-rgb), 0.2); /* 스크롤바 막대 색상 */
  border: 0; /* 스크롤바 막대 테두리 설정  */
  border-radius: 12px 12px 12px 12px;
}
.btn-group-wrap:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-body-color-rgb), 0.35); /* 스크롤바 막대 색상 */
}
/* 스크롤바 트랙 꾸미기 */
.btn-group-wrap::-webkit-scrollbar-track {
  background: transparent; /* 스크롤바 뒷 배경 색상 */
  padding: 1px;
}
.btn.btn-toggle-tab {
  background: transparent;
  border: 0;
  color: var(--bs-body-color);
  white-space: nowrap;
}
.btn.btn-toggle-tab:hover {
  background: rgba(var(--bs-card-bg-rgb), 0.85);
  border: 0;
  color: var(--bs-body-color);
}
.btn-check:checked + .btn-toggle-tab.btn-primary {
  background: var(--bs-body-bg);
  color: var(--bs-primary);
}
.btn-check:checked + .btn-toggle-tab.btn-secondary {
  background: var(--bs-body-bg);
  color: rgba(var(--bs-secondary-rgb),0.5);
}
.btn-check:checked + .btn-toggle-tab.btn-success {
  background: var(--bs-body-bg);
  color: var(--bs-success);
}
.btn-check:checked + .btn-toggle-tab.btn-info {
  background: var(--bs-body-bg);
  color: var(--bs-info);
}
.btn-check:checked + .btn-toggle-tab.btn-warning {
  background: var(--bs-body-bg);
  color: var(--bs-warning);
}
.btn-check:checked + .btn-toggle-tab.btn-danger {
  background: var(--bs-body-bg);
  color: var(--bs-danger);
}
.btn-check:checked + .btn-toggle-tab.btn-dark {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/********** card **********/
.card {
  --bs-card-spacer-y: 20px;
  --bs-card-spacer-x: 20px;
  --bs-card-title-spacer-y: 8px;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: 16px;
  --bs-card-box-shadow: 0 0 16px 0 rgba(41,48,66,0.065);
  --bs-card-inner-border-radius: calc(var(--bs-border-radius) -(var(--bs-border-width)));
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  box-shadow: none;
  overflow: hidden;
}

.card-header {
  position: relative;
  padding: 20px;
  margin-bottom: 0;
  background-color: var(--bs-card-bg);
  border-bottom: 0 solid transparent;
}
.card-header .btn_more {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 18px;
}

.card-header:first-child {
  border-radius: 16px 16px 0 0;
}

.card-title {
  color: var(--bs-body-color);
}
.card dl > dt {
  line-height: 1.2;
  word-break: keep-all;
}

.card dl > dd {
  margin-bottom: 16px;
}
.card dl > dd:last-of-type,
.card dl:last-of-type > dd:last-of-type {
  margin-bottom: 0;
}

/* card list-group */
.card>.card-header+.list-group, .card>.list-group+.card-footer {
  border-top: 0;
}
.card>.list-group,
.card > .list-group:last-child,
.card > .list-group:first-child {
  border-radius: var(--bs-border-radius);
}
.list-group {
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-bg: var(--bs-body-bg);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-border-width: var(--bs-border-width);
  --bs-list-group-border-radius: var(--bs-border-radius);
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: 0.5rem;
  --bs-list-group-action-color: var(--bs-body-color);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-gray-100);
  --bs-list-group-action-active-color:var(--bs-body-color);
  --bs-list-group-action-active-bg: var(--bs-gray-200);
  --bs-list-group-disabled-color: var(--bs-body-color);
  --bs-list-group-disabled-bg: var(--bs-body-bg);
  --bs-list-group-active-color: var(--bs-reverse-emphasis-color);
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
}
.list-group-item {
  position: relative;
  display: block;
  padding: .75rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--bs-border-color)
}
.list-group-item:last-child {
  border-bottom: 0;
}
/********** datapicker **********/
.daterangepicker {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}
.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid var(--bs-border-color);
}
.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--bs-body-bg);
  border-left: 6px solid transparent;
}
.daterangepicker .calendar-table {
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: var(--bs-body-bg);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: transparent;
  border-color: transparent;
  color: rgba(var(--bs-body-color-rgb), 0.5)
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover  {
  background-color: rgba(var(--bs-primary-rgb), 0.8);
  color: var(--bs-white);
}
.daterangepicker th.prev:hover,
.daterangepicker th.next:hover {
  background-color: var(--bs-card-bg);
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color:  var(--bs-primary);
  color: var(--bs-white);
}
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  border-color: var(--bs-body-color);
}

/********** form **********/
.form-label {
  font-weight: 500;
}
.form-label-sm {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.form-label-xs {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.form-control,
.form-select,
.form-floating {
  border-radius: 8px;
  font-size: 16px;
}

.form-control::placeholder,
.form-select::placeholder,
.form-floating::placeholder {
  color: var(--bs-gray-400);
}
.form-control-lg {
  font-size: 16px;
}
.form-select-sm,
.form-control-sm {
  font-size: 14px;
  border-radius: 6px;
}
.form-select-xs,
.form-control-xs {
  padding:2px 4px;
  font-size: 12px;
  border-radius: var(--bs-border-radius-sm);
}
.form-select-xs{
  background-position: right 3px center;
  background-size: 12px 8px;
}
.form-wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  width: fit-content;
}
.form-wrap-sm {
  display: flex;
  gap: 8px;
  align-items: center;
  width: fit-content;
}
.form-wrap-xs {
  display: flex;
  gap: 4px;
  align-items: center;
  width: fit-content;
}
.form-wrap-xs > .form-label-xs {
  width: 44px;
}
.form-wrap-xs > .form-select-xs,
.form-wrap-xs > .form-control-xs {
  width: calc(100% - 44px);
}
.form-check {
  min-height: unset;
  margin-bottom: 0;
}

.form-check-label {
  font-size: 16px;
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.25);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
}

.form-select:focus,
.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: rgba(var(--bs-primary-rgb), 0.25);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
}
.input-group-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.input-group-wrap > .input-group {
  flex-wrap: nowrap
}
.input-group-wrap > .input-group:first-child {
  width: 40%;
}
.input-group-wrap > .input-group:nth-child(2) {
  width: 30%;
}
.input-group-wrap > .input-group:last-child {
  width: 30%;
}
.input-group-wrap > .input-group:not(:first-child) > .form-control:first-child,
.input-group-wrap > .input-group:not(:first-child) > .form-select:first-child,
.input-group-wrap > .input-group:not(:first-child) > .form-floating:first-child,
.input-group-wrap > .input-group:not(:last-child) > .form-control:last-child,
.input-group-wrap > .input-group:not(:last-child) > .form-select:last-child,
.input-group-wrap > .input-group:not(:last-child) > .form-floating:last-child {
  border-radius: 0;
}
.input-group-wrap > .input-group:not(:first-child) > .form-control:first-child,
.input-group-wrap > .input-group:not(:first-child) > .form-select:first-child,
.input-group-wrap > .input-group:not(:first-child) > .form-floating:first-child {
  border-left: 0;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-medium-emphasis-color);
}
.form-control:read-only {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-medium-emphasis-color);
}
.form-control:read-only:focus {
  border-color: var(--bs-border-color);
  box-shadow: none;
}
.form-control[type=file] {
  background-color: var(--bs-body-bg);
}

/********** form-select2 **********/

/* form-select2 border-color변경 */
.form-select2~.select2-container--default .select2-selection--single,
.form-select2-sm~.select2-container--default .select2-selection--single {
  border: var(--bs-border-width) solid var(--bs-border-color);
}
/* form-select2 기본사이즈 */
.form-select2~.select2-container .select2-selection--single {
  height: 35px;
  border-radius: var(--bs-border-radius);
}
.form-select2~.select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  color: var(--bs-body-color);
  line-height: 1.5;
}
/* form-select2 sm사이즈 */
.form-select2-sm~.select2-container .select2-selection--single {
  height: 31px;
  border-radius: var(--bs-border-radius-sm);
}
.form-select2-sm~.select2-container .select2-selection--single .select2-selection__rendered {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 0.5rem;
}
/* form-select2 open시 focus, focus-visible 효과 변경 */
.form-select2-sm~.select2-container--open,
.form-select2-sm~.select2-container--focus {
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
  transition: all 0.15s;
}
/* form-select2 select시 생기는 검정 border 제거 */
.form-select2~.select2-container * {
  outline: none;
}
/* form-select2 > dropdown border-color변경 */
.select2-dropdown {
  border: var(--bs-border-width) solid var(--bs-border-color);
}
/* form-select2 > dropdown > search input 변경 */
.select2-search__field {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width)* 2));
  padding: 4px 0.5rem;
  font-size: 16px;
  border-radius: var(--bs-border-radius-sm);
}
/* form-select2 > dropdown > search input focus시 생기는 검정 border 제거 */
.select2-search__field:focus {
  outline: none;
}
/* form-select2 > dropdown > option color 변경 */
.select2-container--default .select2-results__option--selected {
  background-color: #dee2e6;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--bs-primary);
}
/* form-select2 arrow변경 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: block;
  width: 38px !important;
  height: 31px !important;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat;
  background-size: 12px;
  background-position: center center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}


/********** tab **********/
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: transparent;
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  box-shadow: var(--bs-card-box-shadow);
  overflow: hidden;
}

.tab .nav-tabs {
  --bs-nav-tabs-border-width: var(--bs-border-width);
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
  flex-wrap: nowrap;
  justify-content: start;
  border-bottom: 0;
}

.nav-tabs.scrollable {
  overflow-x: auto;
  overflow-y: hidden;
}
.nav-tabs.scrollable::-webkit-scrollbar {
	/* chrome에서 scrollbar 숨기기 */
  display: none;  /* Safari and Chrome */
}

.tab .nav-tabs .nav-link {
  padding: 0.75rem 1rem;
  /*  border: 1px solid var(--bs-border-color);
  border-bottom: 1px solid transparent; */
  border: 0;
  background: rgba(var(--bs-card-bg-rgb), 0);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.tab .nav-tabs .nav-link:hover {
  background: rgba(var(--bs-card-bg-rgb), 0.85);
  color: var(--bs-body-color);
}
.nav-link:focus-visible {
  outline: 0;
  box-shadow:inset 0 0 0 1px rgba(13, 110, 253, 0.25);
}
.tab .nav-tabs .nav-link.active {
  background-color: var(--bs-card-bg);
  color: var(--bs-emphasis-color);
  font-weight: 600;
}
.tab .tab-content {
  flex: 1;
  border-radius: 0 0 .2rem .2rem;
  background-color: var(--bs-card-bg);
  color: var(--bs-card-color);
  box-shadow: 0 0.1rem 3px rgba(0,0,0,.05);
}

.tab .tab-content .tab-header {
  flex: 1 1 auto;
  padding: 1rem;
  overflow: hidden;
}
.tab .tab-content .tab-header .tab-title {
  color: var(--bs-body-color);
}
.tab .tab-content .tab-body {
  flex: 1 1 auto;
  color: var(--bs-body-color);
  padding: 1rem;
}

.tab .tab-content .tab-body > .subtab_wrap .tab-content {
  box-shadow: 0 0 0 0;
}

.tab dl > dt {
  line-height: 1.2;
  word-break: keep-all;
}
.tab dl > dt:not(:last-of-type) {
  margin-bottom: 0.5rem;
}
.tab dl > dd:not(:last-of-type) {
  margin-bottom: 16px;
}

.nav-underline {
  position: relative;
}
.nav-underline:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: calc(100% + 2rem);
  height: 1px;
  background: var(--bs-border-color);
  z-index: 0;
  opacity: 0.5;
}
.nav-underline > li {
  z-index: 9;
}

/********** chart **********/
.chart {
  margin: auto;
  position: relative;
  width: 100%;
  min-height: 300px;
}

.chart-xs {
  min-height: 150px;
}

.chart-sm {
  min-height: 200px;
}

.chart-lg {
  min-height: 350px;
}

.chart canvas {
  max-width: 100%;
}

.chartjs-size-monitor,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-shrink {
  position: absolute;
  direction: ltr;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  z-index: -1;
}

.chartjs-render-monitor {
  animation: chartjs-render-animation 0.001s;
}

@keyframes chartjs-render-animation {
  0% {
    opacity: 0.99;
  }
  100% {
    opacity: 1;
  }
}

/********** dropdown **********/
.dropdown .dropdown-menu {
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--bs-primary);
  min-width: fit-content;
}
.dropdown .dropdown-menu.show {
  animation-name: dropdownAnimation;
  animation-duration: .3s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
@keyframes dropdownAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.dropdown .dropdown-item.active,
.dropdown .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  background: var(--bs-dropdown-link-active-bg);
}

/********** icon **********/
.icon-wrap {
  width: 44px;
  height: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.icon-wrap-sm {
  width: 24px;
  height: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
.icon-wrap > i.fa-slash {
  text-shadow: 0 1px 0 var(--bs-body-bg);
}

/********** pagination **********/
.pagination {
  --bs-pagination-padding-x: 12px;
  --bs-pagination-padding-y: 4px;
  --bs-pagination-font-size: 16px;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-gray-100);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
  justify-content: end;
}
.pagination .page-link > i {
  font-size: 0.625rem;
}
.page-link.disabled, .disabled > .page-link {
  opacity: 0.5;
}


/********** scroll **********/
.scrollbar-none {
  /* scrollbar 숨기기 */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-none::-webkit-scrollbar {
	/* chrome에서 scrollbar 숨기기 */
  display: none;  /* Safari and Chrome */
}

/* 스크롤바 전체 기본 꾸미기 */
.scrollbar-style::-webkit-scrollbar {
  width: 4px;  /* 세로축 스크롤바 폭 너비 */
  height: 4px;  /* 가로축 스크롤바 폭 너비 */
}
/* 스크롤바 막대 꾸미기 */
.scrollbar-style::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-body-color-rgb), 0.35); /* 스크롤바 막대 색상 */
  border: 0; /* 스크롤바 막대 테두리 설정  */
  border-radius: 12px 12px 12px 12px;
}
.scrollbar-style:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-body-color-rgb), 0.35); /* 스크롤바 막대 색상 */
}
/* 스크롤바 트랙 꾸미기 */
.scrollbar-style::-webkit-scrollbar-track {
  background: transparent; /* 스크롤바 뒷 배경 색상 */
  padding: 1px;
}


/********** table **********/
/* 스크롤바 전체 기본 꾸미기 */
.table-responsive::-webkit-scrollbar {
  height: 4px;  /* 가로축 스크롤바 폭 너비 */
}
/* 스크롤바 막대 꾸미기 */
.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-body-color-rgb), 0.2); /* 스크롤바 막대 색상 */
  border: 0; /* 스크롤바 막대 테두리 설정  */
  border-radius: 12px 12px 12px 12px;
}
.table-responsive:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-body-color-rgb), 0.35); /* 스크롤바 막대 색상 */
}
/* 스크롤바 트랙 꾸미기 */
.table-responsive::-webkit-scrollbar-track {
  background: transparent; /* 스크롤바 뒷 배경 색상 */
  padding: 1px;
}

.table {
  --bs-table-color-type: initial;
  --bs-table-bg-type: initial;
  --bs-table-color-state: initial;
  --bs-table-bg-state: initial;
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-emphasis-color);
  --bs-table-striped-bg: rgba(var(--bs-gray-500), 0.01);
  --bs-table-active-color: var(--bs-emphasis-color);
  --bs-table-active-bg: rgba(var(--bs-gray-rgb), 0.1);
  --bs-table-hover-color: var(--bs-emphasis-color);
  --bs-table-hover-bg: rgba(var(--bs-gray-rgb), 0.065);
  width: 100%;
  margin-bottom: 0;
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}

.table thead th {
  border-top: 1px solid #dee6ed;
  border-bottom-width: 1px;
  word-break: keep-all;
  line-height: 1.2;
}
.table tbody th a:not(.btn),
.table tbody td a:not(.btn) {
  color: inherit;
}
.table tbody th a:not(.btn) b,
.table tbody td a:not(.btn) b {
  color: var(--bs-emphasis-color);
}
.table tbody th a:hover:not(.btn),
.table tbody td a:hover:not(.btn),
.table tbody th a:hover:not(.btn) b,
.table tbody td a:hover:not(.btn) b,
.table tbody th a:hover:not(.btn) > *,
.table tbody td a:hover:not(.btn) > * {
  color: var(--bs-primary);
  text-decoration: underline;
  opacity: 1;
}

.table .h1,
table .h1,
.table .h2,
table .h2,
.table .h3,
table .h3,
.table .h4,
table .h4,
.table .h5,
table .h5,
.table .h6,
table .h6,
.table h1,
table h1,
.table h2,
table h2,
.table h3,
table h3,
.table h4,
table h4,
.table h5,
table h5,
.table h6,
table h6 {
  color: var(--bs-table-color);
}

.card .table,
.card table {
  margin-bottom: 0;
}

/* datatable에 있는 table tr 두줄씩 striped-bg 효과주기 */
.table-double-striped .th,
.table-double-striped .td {
  word-break: keep-all;
}
.table-double-striped > tbody > tr:nth-child(odd) > th:not([rowspan="2"]),
.table-double-striped > tbody > tr:nth-child(odd) > td:not([rowspan="2"]) {
  border-bottom: 0;
}
.table-double-striped > tbody > tr:nth-child(4n) > td,
.table-double-striped > tbody > tr:nth-child(4n) > th {
  --bs-table-bg-type: var(--bs-table-striped-bg);
}
.table-double-striped > tbody > tr:nth-child(4n-1) > td,
.table-double-striped > tbody > tr:nth-child(4n-1) > th {
  --bs-table-bg-type: var(--bs-table-striped-bg);
}
.table-double-striped .alert {
  padding: 4px 8px;
  font-size: 0.8125rem;
}

/* table-bordered th에 bg 효과주기 */
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th {
  background-color: var(--bs-table-striped-bg) ;
}

/* table bg-color */
.table > tbody > tr.table-bg-primary > * {
  --bs-table-bg-type: rgba(var(--bs-primary-rgb), 0.2);
  color: var(--bs-emphasis-color);
}
.table-hover > tbody > tr.table-bg-primary:hover > * {
  --bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.35);
}
.table > tbody > tr.table-bg-secondary > * {
  --bs-table-bg-type: rgba(var(--bs-secondary-rgb), 0.2);
  color: var(--bs-emphasis-color);
}
.table-hover > tbody > tr.table-bg-secondary:hover > * {
  --bs-table-bg-state: rgba(var(--bs-secondary-rgb), 0.35);
}
.table > tbody > tr.table-bg-success > * {
  --bs-table-bg-type: rgba(var(--bs-success-rgb), 0.2);
  color: var(--bs-emphasis-color);
}
.table-hover > tbody > tr.table-bg-success:hover > * {
  --bs-table-bg-state: rgba(var(--bs-success-rgb), 0.35);
}
.table > tbody > tr.table-bg-info > * {
  --bs-table-bg-type: rgba(var(--bs-info-rgb), 0.2);
  color: var(--bs-emphasis-color);
}
.table-hover > tbody > tr.table-bg-info:hover > * {
  --bs-table-bg-state: rgba(var(--bs-info-rgb), 0.35);
}
.table > tbody > tr.table-bg-warning > * {
  --bs-table-bg-type: rgba(var(--bs-warning-rgb), 0.2);
  color: var(--bs-emphasis-color);
}
.table-hover > tbody > tr.table-bg-warning:hover > * {
  --bs-table-bg-state: rgba(var(--bs-warning-rgb), 0.35);
}
.table > tbody > tr.table-bg-danger > * {
  --bs-table-bg-type: rgba(var(--bs-danger-rgb), 0.2);
  color: var(--bs-emphasis-color);
}
.table-hover > tbody > tr.table-bg-danger:hover > * {
  --bs-table-bg-state: rgba(var(--bs-danger-rgb), 0.35);
}


/* table thumbnail */
.table_thumbnail {
  display: block;
  width: 80px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
}
.table_thumbnail > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}