:root {
  --background-primary: #f1f1f1;
  /* --background-secondary: #0B1D63; */
  --background-secondary: #192533;
  --cl-cb-black: #090d11;
  --cl-disabled: #818181;
  --color-hashed-blue: #203796;

  --cl-white: #fff;
  --cl-border-primary: #4aa0c3;
  --cl-grey: #4e4e4e;
  --cl-codebery: #3996ce;
  --cl-hash: #e8e8f0;
  --cl-orange: #ffca43;
  --cl-green: #1cb034;
  --cl-footer-bg: #d4d4d4;
  /* --background-highlight: rgb(20, 110, 182); */
  --background-highlight: #007abe;

  --text-primary: #000000;
  --text-secondary: #4d4d4d;

  --cl-yellow: #ffc424;
  --cl-light-green: #00b1b0;
  --cl-light-blue: #01a5d9;

  --cl-primary: #007abe;
  --cl-info: #17a2b8;
  --cl-secondary: #6c757d;
  --cl-warning: #ffc107;
  /* --cl-danger: #dc3545; */
  --cl-danger: #f10075;
  /* --cl-success: #28a745; */
  --cl-success: #3bb001;
  --cl-light: #f8f9fa;
  --cl-dark: #343a40;

  --cl-primary-hover: #005787;
  --cl-info-hover: #138496;
  --cl-secondary-hover: #5a6268;
  --cl-warning-hover: #e0a800;
  /* --cl-danger-hover: #c82333; */
  --cl-danger-hover: #cb0062;
  /* --cl-success-hover: #218838; */
  --cl-success-hover: #2e8a01;
  --cl-light-hover: #e2e6ea;
  --cl-dark-hover: #23272b;

  --cl-primary-border: #005787;
  --cl-info-border: #117a8b;
  --cl-secondary-border: #545b62;
  --cl-warning-border: #d39e00;
  --cl-danger-border: #bd2130;
  /* --cl-success-border: #1e7e34; */
  --cl-success-border: #1e7e34;
  --cl-light-border: #dae0e5;
  --cl-dark-border: #1d2124;
  --cl-black: #000000;
  --cl-purple: #5c2b9c;

  /* 

    --cl-active: #7571f9;
    --cl-active-dimmed: rgba(117, 113, 249, 0.3);
    --cl-highlight: #00bbe0;
    --cl-highlight-dimmed: rgba(0, 184, 224, 0.3);
    --cl-muted: #616172;
    --cl-black: #212529; */

  --cl-inverse-info: rgba(0, 187, 224, 0.2);
  --cl-inverse-primary: rgba(117, 113, 249, 0.2);
  --cl-inverse-success: rgba(59, 176, 1, 0.2);
  --cl-inverse-danger: rgba(241, 0, 117, 0.2);
  --cl-inverse-warning: rgba(242, 157, 86, 0.2);
  --cl-inverse-secondary: rgba(121, 135, 161, 0.2);
  --cl-inverse-light: rgba(205, 212, 224, 0.2);
  --cl-inverse-dark: rgba(3, 3, 3, 0.2);
}

html {
  scroll-behavior: smooth;
}

.lnk-warning {
  color: var(--cl-warning);
}

.lnk-warning:hover {
  color: var(--cl-warning-hover);
}

/* textarea,
input,
select,
.custom-file-label {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-primary) !important;
    outline: none !important;
    box-shadow: none;
    color: var(--text-primary) !important;
} */

/* .custom-file-label,
.custom-file-label:after {
    padding-top: 10px;
} */

/* .custom-file-label:after {
    background-color: var(--bg-primary) !important;
    outline: none !important;
    box-shadow: none;
    color: var(--text-primary) !important;
    border-left: none !important;
} */

/* input:focus,
textarea:focus,
select:focus {
    color: var(--text-primary);
    border: 1px solid var(--cl-highlight) !important;
    box-shadow: none !important;
    outline: none !important;
} */

.required:after {
  content: "*";
  color: var(--cl-danger);
  margin-left: 5px;
}

.section-title {
  border-bottom: 1px solid var(--cl-dark) !important;
  color: var(--cl-primary);
}

/*--------------- BOF Scroll bar-----------------*/
/* width */
::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--cl-green);
  border-radius: 2px;
  cursor: pointer !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--cl-green);
  cursor: pointer !important;
}

/*--------------- EOF Scroll bar-----------------*/
body {
  background-color: var(--background-primary);
  color: var(--primary-text);
  font-family: "Roboto", sans-serif;
}

footer {
  border-top: solid 2px var(--cl-orange);
  background-color: #1f263c;
  color: var(--cl-white);
}

footer a {
  text-decoration: none !important;
  color: var(--cl-light-blue);
}

footer a:hover {
  color: var(--cl-orange);
}

/* sidebar */

/* BOF top navbar */
.navbar {
  padding: 0;
}

.top-navbar {
  background-color: var(--cl-white);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.navbar-brand-wrapper {
  border-right: solid 1px var(--cl-hash);
}
/* 
.dropdown-menu {
  background-color: var(--background-secondary);
  border-bottom: 2px solid var(--cl-cb-black);
}

.dropdown-menu a {
  color: var(--cl-disabled);
  font-size: var(--font-size-primary);
}

.dropdown-menu a:hover {
  color: var(--cl-light);
  background-color: var(--background-secondary);
} */

.btn-action {
  background-color: var(--cl-active);
  color: #fff;
  border-radius: 0;
}

/* -------------BOF of dashboard widget section--------------- */
.stretch-card > .card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
}

/* -------------EOF of dashboard widget section--------------- */
.page-header-container {
  border-bottom: 1px solid var(--cl-primary);
}

.btn-highlight {
  background-color: var(--cl-highlight-dimmed);
  color: var(--primary-text);
}

.btn-highlight:hover {
  background-color: var(--cl-highlight);
  color: #fff;
}

.btn-active:hover {
  background-color: var(--cl-active-dimmed);
  color: #fff;
}

.btn-active:hover {
  background-color: var(--cl-active);
}

.btn-reverse-active {
  background-color: transparent;
  border: 1px solid var(--cl-active);
  color: var(--primary-text);
}

.btn-reverse-active:hover {
  background-color: var(--cl-active);
  color: #fff;
}

button {
  outline: none !important;
  box-shadow: none !important;
}

.text-muted {
  color: var(--cl-hash);
}

a.no-decor {
  text-decoration: none !important;
}

a.no-decor:hover {
  text-decoration: none !important;
}

a.primary {
  color: var(--cl-primary);
}

a.primary:hover {
  color: var(--cl-info);
}

/* ************************modal*************************** */
.cl-primary {
  color: var(--cl-primary);
}

.cl-secondary {
  color: var(--cl-secondary);
}

/* ************************modal*************************** */
.modal-content {
  border-radius: 0;
  background-color: var(--background-primary);
}

.modal-head button {
  color: var(--primary-text);
}

.modal-head {
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--background-secondary);
  color: var(--cl-white);
}

.modal-footer {
  border-top: 1px solid var(--border-primary);
}

.spn-clDanger {
  color: var(--cl-danger);
}

.spn-clSuccess {
  color: var(--cl-success);
}

/* print */
.bd-bt-blue {
  border-bottom: 3px solid var(--cl-codebery);
}

.bd-bt-blue-1 {
  border-bottom: 1px solid var(--cl-codebery);
}

.bd-bt-hash-1 {
  border-bottom: 1px solid #b3c3d1;
}

.cl-grey {
  color: var(--cl-grey);
}

.cl-codebery {
  color: var(--cl-codebery);
}

.cl-green {
  color: var(--cl-green);
}

.cl-light-green {
  color: var(--cl-light-green);
}

.invtablehdr {
  background-color: #ccc;
}