:root {

  --light-50: #fafafa;
  --light-100: #f9f9f9;
  --light-200: #f1f1f1;
  --light-300: #e8e8e8;
  --light-400: #dfdfdf;
  --light-500: #d8d8d8;
  --light-600: #d1d1d1;
  --light-700: #cccccc;
  --light-800: #c6c6c6;
  --light-900: #c0c0c0;

  --dark-50: #e2e2e2;
  --dark-100: #b8b8b8;
  --dark-200: #888888;
  --dark-300: #585858;
  --dark-400: #353535;
  --dark-500: #111111;
  --dark-600: #0f0f0f;
  --dark-700: #0c0c0c;
  --dark-800: #0a0a0a;
  --dark-900: #050505;

  --red-50: #fee6e6;
  --red-100: #ffd2d2;
  --red-200: #fb9999;
  --red-300: #f97070;
  --red-400: #f75151;
  --red-500: #f63232;
  --red-600: #f52d2d;
  --red-700: #f32626;
  --red-800: #f21f1f;
  --red-900: #ef1313;

  --orange-50: #fff4e1;
  --orange-100: #ffdbb4;
  --orange-200: #ffc083;
  --orange-300: #ff9f51;
  --orange-400: #ff7c2b;
  --orange-500: #ff6600;
  --orange-600: #ff5c00;
  --orange-700: #ff5200;
  --orange-800: #ff4800;
  --orange-900: #ff3e00;

  --yellow-50: #fff8e1;
  --yellow-100: #ffecb5;
  --yellow-200: #ffe083;
  --yellow-300: #ffd451;
  --yellow-400: #ffca2c;
  --yellow-500: #ffc107;
  --yellow-600: #ffbb06;
  --yellow-700: #ffb305;
  --yellow-800: #ffab04;
  --yellow-900: #ff9e02;

  --green-50: #e2f6e6;
  --green-100: #c9f7d9;
  --green-200: #86d898;
  --green-300: #56c86f;
  --green-400: #31bd50;
  --green-500: #0db131;
  --green-600: #0baa2c;
  --green-700: #09a125;
  --green-800: #07981f;
  --green-900: #038813;

  --lime-50: #f9fbe7;
  --lime-100: #f0f4c3;
  --lime-200: #e6ee9c;
  --lime-300: #dce775;
  --lime-400: #d4e157;
  --lime-500: #cddc39;
  --lime-600: #c0ca33;
  --lime-700: #afb42b;
  --lime-800: #9e9d24;
  --lime-900: #827717;

  --blue-50: #e0ecfc;
  --blue-100: #b3d0f8;
  --blue-200: #80b1f4;
  --blue-300: #4d91ef;
  --blue-400: #267aeb;
  --blue-500: #0062e8;
  --blue-600: #005ae5;
  --blue-700: #0050e2;
  --blue-800: #0046de;
  --blue-900: #0034d8;

  --navy-100: #bec1cf;
  --navy-200: #9298af;
  --navy-300: #666e8e;
  --navy-400: #464f76;
  --navy-500: #25305e;
  --navy-600: #212b56;
  --navy-700: #1b244c;
  --navy-800: #161e42;
  --navy-900: #0d1331;

  --azure-50: #f0f8ff;
  --azure-100: #d1eaff;
  --azure-200: #a3d3ff;
  --azure-300: #75bcff;
  --azure-400: #47a5ff;
  --azure-500: #198eff;
  --azure-600: #0075e7;
  --azure-700: #0060b4;
  --azure-800: #004b80;
  --azure-900: #00374c;

  --indigo-50: #ede7fc;
  --indigo-100: #d1c2f9;
  --indigo-200: #b39af5;
  --indigo-300: #9572f0;
  --indigo-400: #7e53ed;
  --indigo-500: #6735ea;
  --indigo-600: #5f30e7;
  --indigo-700: #5428e4;
  --indigo-800: #4a22e1;
  --indigo-900: #3916db;

  --magenta-50: #fae9f5;
  --magenta-100: #f3c8e7;
  --magenta-200: #eba3d7;
  --magenta-300: #e27ec7;
  --magenta-400: #dc62bb;
  --magenta-500: #d646af;
  --magenta-600: #d13fa8;
  --magenta-700: #cc379f;
  --magenta-800: #c62f96;
  --magenta-900: #bc2086;

  --white: #ffffff;

  --bs-link-color: var(--indigo-500);
  --bs-link-hover-color: var(--indigo-300);
}

body {
  font-family: 'NotoSansKR', 'SFPro';
}

a {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
}

.container {
  min-width: 90%;
  max-width: 90%;
  padding: 5rem;
}

.btn-small {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  white-space: nowrap;
}

.btn-medium {
  padding: 12px 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  white-space: nowrap;
}

.btn-large {
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  white-space: nowrap;
}

.btn-cont-primary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--indigo-500);
  --bs-btn-border-color: var(--indigo-500);

  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--indigo-300);
  --bs-btn-hover-border-color: var(--indigo-300);

  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--indigo-900);
  --bs-btn-active-border-color: var(--indigo-900);

  --bs-btn-disabled-color: var(--dark-200);
  --bs-btn-disabled-bg: var(--light-300);
  --bs-btn-disabled-border-color: var(--light-300);
}

.btn-cont-secondary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--dark-500);
  --bs-btn-border-color: var(--dark-500);

  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--dark-300);
  --bs-btn-hover-border-color: var(--dark-300);

  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--dark-900);
  --bs-btn-active-border-color: var(--dark-900);

  --bs-btn-disabled-color: var(--dark-200);
  --bs-btn-disabled-bg: var(--light-300);
  --bs-btn-disabled-border-color: var(--light-300);
}

.btn-outlined {
  --bs-btn-color: var(--dark-300);
  --bs-btn-bg: var(--white);
  --bs-btn-border-color: var(--light-300);

  --bs-btn-hover-color: var(--indigo-800);
  --bs-btn-hover-bg: var(--white);
  --bs-btn-hover-border-color: var(--indigo-300);

  --bs-btn-active-color: var(--indigo-900);
  --bs-btn-active-bg: var(--indigo-50);
  --bs-btn-active-border-color: var(--indigo-300);

  --bs-btn-disabled-color: var(--dark-100);
  --bs-btn-disabled-bg: var(--white);
  --bs-btn-disabled-border-color: var(--light-300);
}

.btn-delete {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--red-500);
  --bs-btn-border-color: var(--red-500);

  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--red-300);
  --bs-btn-hover-border-color: var(--red-300);

  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--red-900);
  --bs-btn-active-border-color: var(--red-900);

  --bs-btn-disabled-color: var(--dark-200);
  --bs-btn-disabled-bg: var(--light-300);
  --bs-btn-disabled-border-color: var(--light-300);
}

.btn-icon {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 20px;

  --bs-btn-hover-bg: var(--magenta-100);
  --bs-btn-hover-border-color: transparent;

  --bs-btn-active-bg: var(--magenta-200);
  --bs-btn-active-border-color: transparent;
}

.btn-transparent {
  padding: 0;

  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;

  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;

  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
}

.table {
  --bs-table-hover-bg: var(--light-200);
  font-size: 14px;
  border-top: 2px solid  var(--dark-500);
}

.table>thead {
  background-color: var(--light-100);
  color: var(--dark-300);
}

.table>thead>tr>th {
  padding: 1rem;
}

.table>tbody>tr>td {
  padding: 1rem;
}

.modal-header {
  align-items: flex-start;
}

.modal-header .btn-close {
  padding: 1.25rem;
}

.modal-header .modal-title {
  display: flex;
  flex-direction: column;
  color: var(--dark-500);
  font-size: 20px;
  font-weight: bold;
  padding: .5rem;
}

.modal-header .modal-title .description {
  color: var(--dark-300);
  font-size: 14px;
  font-weight: normal;
  padding-top: .25rem;
}

.modal-body .modal-select{
  padding: 0 .5rem;
}

.modal-body label {
  color: var(--dark-300);
  font-size: 14px;
  font-weight: normal;
}

.modal-body form {
  padding: 0 .5rem;
}

.modal-body textarea {
  color: var(--dark-500);
  font-size: 14px;
  padding: 1rem;
}

.modal-body textarea::placeholder {
  color: var(--dark-100);
}

.offcanvas-end {
  width: 50% !important;
  max-width: 750px;
}

.offcanvas-bottom {
  height: 80% !important;
  max-height: 1000px;
}

.offcanvas-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--light-300) !important;
  color: var(--dark-500);
  font-size: 20px;
  font-weight: bold;
}

.offcanvas-body {
  padding: 1.5rem;
}

.offcanvas label {
  color: var(--dark-500);
  font-size: 14px;
  font-weight: normal;
}

.offcanvas-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--light-300) !important;
  color: var(--dark-500);
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.offcanvas-body textarea{
  padding: 1rem 0.75rem;
  color: var(--dark-500);
  font-size: 14px;
  font-weight: normal;
  border: solid 1px var(--light-300);
  border-radius: .25rem;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--light-100);
  resize: none;
}

.nav-pills {
  gap: 2rem;
}

.nav-pills .nav-link {
  background: 0 0;
  border: 0;
  color: var(--light-500);
  font-size: 2.5rem;
  font-weight: bold;
  padding: 0;
  border-radius: 0;
}

.nav-pills .nav-link.sm {
  font-size: 14px;
  padding-bottom: .5rem;
}

.nav-pills .nav-link.sm.active,
.nav-pills .show>.nav-link.sm {
  background: 0 0;
  color: var(--dark-500);
  border-bottom: 2px solid  var(--dark-500);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background: 0 0;
  border: 0;
  color: var(--dark-500);
}

label .required {
  font-size: 1rem;
  font-weight: normal;
  text-align: left;
  color: var(--red-500);
}

.text-muted {
  color: var(--dark-200)!important;
}

.badge {
  --bs-bg-opacity: 1!important;
  border-radius: .25rem!important;
  font-weight: 500!important;
}

.bg-gray {
  background-color: var(--light-200)!important;
  color: var(--dark-200)!important;
}

.bg-red {
  background-color: var(--red-50)!important;
  color: var(--red-500)!important;
}

.bg-orange {
  background-color: var(--orange-50)!important;
  color: var(--orange-500)!important;
}

.bg-yellow {
  background-color: var(--yellow-50)!important;
  color: var(--yellow-500)!important;
}

.bg-green {
  background-color: var(--green-50)!important;
  color: var(--green-900)!important;
}

.bg-lime {
  background-color: var(--lime-50)!important;
  color: var(--lime-900)!important;
}

.bg-blue {
  background-color: var(--blue-50)!important;
  color: var(--blue-500)!important;
}

.bg-azure {
  background-color: var(--azure-50)!important;
  color: var(--azure-500)!important;
}

.bg-indigo {
  background-color: var(--indigo-50)!important;
  color: var(--indigo-500)!important;
}

.bg-magenta {
  background-color: var(--magenta-50)!important;
  color: var(--magenta-500)!important;
}

.error-form {
  font-size: 0.75rem;
  font-weight: normal;
  text-align: left;
  color: var(--red-500);
}

.form-control-error {
  border: 1px solid var(--red-500) !important;
}

.dt-length, .dt-search, .dt-info {
  font-size: .9rem !important;
  color: var(--dark-300) !important;
}

.dt-paging .dt-paging-button {
  margin: 0 !important;
  padding: 1px !important;
}

.page-link {
  color: var(--dark-200);
}

.active>.page-link, .page-link.active {
  color: var(--white);
  background-color: var(--indigo-500);
  border-color: var(--indigo-500);
}

.page-link:hover {
  color: var(--white) !important;
  background-color: var(--dark-200) !important;
  border-color: var(--dark-200) !important;
}

div.dt-container .dt-paging .dt-paging-button:hover {
  border: 1px solid var(--white);
  background: none;
}