@import url('fonts.css');
@import url('bootstrap-custom.css');
@import url('select2-custom.css');
@import url('datatables.css');

:root {
  /*======colors======*/
  --body-color: #EEEEEE;
  --button-save-color: #0d6efd;
  --button-save-hover-color: #0a58ca;
  --button-cancel-color: #dc3545;
  --button-cancel-hover-color: #bb2d3b;
  --btn-color-shadow: 0 0 0 .25rem var(--button-save-color-rgba);
  --card-border-color-translucent: rgba(0, 0, 0, 0.175);
  --card-color: #fff;
  --error-color: rgba(122, 12, 46, 1);
  --bg-error-color: #f8d7da;
  --hover-color: #00000033;
  --primary-color: #007bff;
  --primary-color-light: #f6f5ff;
  --sidebar-color: #fff;
  --text-color: #000;
  --text-table: #7070703d;

  /*======fonts======*/
  --font-title: 2.5rem;  /* 40px */
  --font-subtitle: 1.125rem;  /* 18px */
  --font-normal: 1rem;  /* 16px */
  --font-small: 0.875rem;  /* 14px */
  --font-very-small: 0.75rem;  /* 12px */

  /*======transition======*/
  --tran-03: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.4s ease;
  --tran-05: all 0.5s ease;
  --tran-08: 0.08s 0.08s;

  --border-radius: 3px;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--body-color) !important;
  color: var(--text-color);
  display: grid;
  font-size: var(--font-normal);
  min-height: 100vh;
  transition: var(--tran-05);
}

a:hover, .btn:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb) !important;
  color: var(--bs-link-color-rgb) !important;
}

form label {
  display: block;
  font-size: var(--font-small);
  font-weight: 600;
}

hr {
  color: var(--text-color);
}

header h1 {
  font-size: var(--font-title);
}

table {
  font-size: var(--font-very-small);
}

.breadcrumb {
  font-size: var(--font-small);
  margin-left: 0.15rem;
}

.font-semibold, .font-semibold * {
  font-weight: 600;
}

.main-container {
  display: grid;
  grid-template-rows: 50px auto 24px;
  height: 100%;
  transition: var(--tran-05);
}

.layout-px-spacing {
  min-height: calc(100vh - 166px) !important;
}

.text-error, .text-error * {
  color: var(--error-color) !important;
}

.text-title {
  color: var(--text-color) !important;
  font-size: var(--font-title);
}

.text-subtitle {
  font-size: var(--font-subtitle);
  white-space: nowrap;
}

.text-normal {
  font-size: var(--font-normal);
}

.text-small, .text-small * {
  font-size: var(--font-small);
}

.text-btn-theme {
  color: var(--button-save-color) !important;
}

.text-btn-theme:hover {
  color: var(--button-save-hover-color) !important;
}

.text-very-small, .text-very-small * {
  font-size: var(--font-very-small);
}

#content>div.row {
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 576px) {
  body {
    grid-template-columns: var(--sidebar-size) auto;
  }  
}

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

  .w-md-50 {
    width: 50% !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row;
  }

  .w-lg-50 {
    width: 50% !important;
  }
}