:root {
  /*--first-color: rgb(229 30 36);*/
  --first-color: rgb(49 144 208);
  --second-color: rgb(160 160 160);
  --third-color: rgb(29, 87, 141);

  /* --third-color: rgb(229 30 36);
  --first-color: rgb(29, 87, 141); */

  --second-color-50: hsl(204, 63%, 90%);
  --color-white: #FFFFFF;
  --color-dark-grey: #333;

  --color-border-input: #FFFFFF;
  --color-activated: var(--second-color);

  --color-btn-primary: var(--first-color);
  --color-btn-primary-border: var(--first-color);
  --color-btn-primary-text: rgb(255, 255, 255);
  --color-btn-primary-hover: var(--first-color);

  --color-btn-scondary: rgba(214, 198, 196, 0.7);
  --color-btn-scondary-border: rgb(119, 119, 119);
  --color-btn-scondary-text: rgb(108, 108, 108);
  --color-btn-scondary-hover: rgba(252, 155, 4, 0.7);
  --color-btn-scondary-text-hover: rgb(255, 255, 255);

  --color-btn-reset: rgb(119, 119, 119);
  --color-btn-reset-hover: rgba(119, 119, 119, 0.5);
  --color-btn-reset-text: rgb(255, 255, 255);
  --color-btn-reset-border: rgb(108, 108, 108);

  --color-focus: rgb(62 62 62);
  /* --color-shadow: rgb(204, 204, 204, 0.5); */
  --color-shadow: hsl(204, 63%, 80%);
  /* --color-hover: var(--second-color); */
  --color-hover: hsl(204, 63%, 70%);

  --color-selected: var(--first-color);
  --color-text-hover: rgb(1, 0, 0);
  --color-text: rgb(19, 54, 96);
  --color-text-light: rgb(255, 255, 255);
  --color-selected: var(var(--second-color));
  --color-selected-light: rgba(252, 155, 4, 0.3);
  --color-icon: rgb(29, 87, 141);
  --color-navbar-hover: rgba(255, 255, 255, 0.3);
}

body {
  color: var(--second-color);
  background-image: linear-gradient(to right top, #1d578d, #516792, #717896, #8b8b9b, #a0a0a0);
  background-image: linear-gradient(to right top, #1d578d, #8b8b9b, #717896);

  background-image: linear-gradient(to top, #6991c7 0%, #a3bded 100%);
  background-image: linear-gradient(to top, hsl(204, 63%, 50%) 0%, #2673A7 100%);
  background-image: linear-gradient(to right top, #D07131 0%, #516792 50%);
  background-image: linear-gradient(to right top, #3190d0 0%, #516792 50%);

  overscroll-behavior: none;
}

::-webkit-scrollbar-thumb {
  background-color: var(--second-color);
  outline: 1px solid var(--color-dark-grey);
}

a {
  color: var(--third-color);
}

a:hover,
a:focus {
  color: var(--second-color);
}

.main-panel {
  background: inherit;
}

.panel-header {
  background: inherit;

}

.table-bordered a {
  padding: 2px;
}

.logo-holder img {
  display: block;
  width: 150px;
  margin: 0px auto 20px auto;
}

.sidebar .logo-holder img {
  width: 120px;
  margin: 10px auto 10px auto;
}

.sidebar .nav li.active>a,
.off-canvas-sidebar .nav li.active>a {
  background-color: var(--color-white);
  color: var(--color-selected);
}

.sidebar .nav li:hover:not(.active)>a,
.sidebar .nav li:focus:not(.active)>a,
.off-canvas-sidebar .nav li:hover:not(.active)>a,
.off-canvas-sidebar .nav li:focus:not(.active)>a {
  background-color: var(--color-hover);
}

.form-auth .logo {
  max-width: 160px;
}

#logo-atm #arrow,
#logo-atm #dash,
#logo-atm #tms,
#logo-atm #atm {
  opacity: 0;
  transform-origin: center;
}

.foreground {
  fill: rgb(24 55 90);
}

.page-auth .foreground {
  fill: rgb(9 39 86 / 50%);
  opacity: 0.5;
}

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

.btn-secondary {
  background-color: var(--color-btn-scondary);
  color: var(--color-btn-scondary-text);
  border: 1px solid var(--color-btn-scondary-border)
}

.btn-secondary.reset,
.btn-secondary.close,
.btn-secondary[data-dismiss] {
  background-color: var(--color-btn-reset);
  color: var(--color-btn-reset-text);
  border: 1px solid var(--color-btn-reset-border)
}

.btn-secondary.reset:hover,
.btn-secondary.close:hover,
.btn-secondary[data-dismiss]:hover {
  background-color: var(--color-btn-reset) !important;
  color: var(--color-btn-reset-text) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
  background-color: var(--color-btn-primary-hover) !important;
  color: var(--color-btn-primary-text) !important;
  box-shadow: 0 0 0 0.2rem var(--color-shadow);
  border: 1px solid var(--color-btn-primary-border) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary:active {
  color: var(--color-btn-scondary-text-hover) !important;
  box-shadow: 0 0 0 0.2rem var(--color-shadow);
  border: 1px solid var(--color-btn-scondary-border) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu.inner li a:hover,
.bootstrap-select .dropdown-menu.inner li a:focus {
  background-color: var(--color-hover);
  outline: 0;
  color: white !important;
}

.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 0.2rem var(--color-focus);
}

.form-control:focus {
  box-shadow: 0 0 0 0.2rem var(--color-shadow) !important;
  border: 1px solid var(--second-color);
}

.custom-select:focus {
  outline: 0;
  color: #333 !important;
  box-shadow: 0 0 0 0.2rem var(--color-shadow) !important;
  border: 1px solid var(--second-color);
}

.form-auth button[type="submit"] {
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  border-color: var(--color-btn-primary-border);
}

.form-auth button[type="submit"]:hover {
  background-color: var(--color-btn-primary-hover) !important;
  color: var(--color-btn-primary-text) !important;
}

.app_version {
  background-color: var(--third-color);
  color: var(--color-white);
}

.footer .copyright,
.footer .copyright a,
.footer .copyright a:hover {
  color: var(--color-white);
}

/* .table a:hover {
  background-color: var(--second-color);
  color: var(--color-white);
} */

.table a svg {
  fill: var(--third-color);
}

.btn-primary svg {
  fill: var(--color-white) !important;
}


#terminal-holder .config a:hover,
#terminal-holder .config a:hover svg {
  background-color: var(--second-color);
}

.actions .dropdown-menu .now-ui-icons,
.actions .dropdown-menu i.fa,
#num_terminals,
.num-records,
.bu_name,
.sort:hover,
.sort.selected,
.sort.selected:hover,
#go-to-top:hover svg {
  color: var(--third-color) !important;
}

.search-filter .bi-funnel {
  fill: var(--second-color);
}

.table tr td,
.table tr th {
  text-align: left;
}

table tr.selected {
  background-color: var(--second-color-50);
}

.pagination {
  max-width: 100%;
}

.page-item:hover,
.page-link:hover {
  background: none;
}

.page-link:first-child {
  margin: 0px;
}

.page-link.active {
  color: var(--color-white);
  background-color: 1px solid var(--color-dark-grey);
}

.page-link,
.page-item,
.page-link a,
.page-item a {
  background-color: var(--second-color);
  color: var(--color-white);
  border: 1px solid #EDEDED;

  border-radius: 0px !important;
  /* padding: 2px;
  margin: 5px; */
}

.alert.alert-info {
  background-color: var(--second-color);
  color: var(--color-white);
  border: 1px solid var(--second-color);
  margin: 5px;
}

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

.page-link a:hover,
.page-item a:hover {
  background-color: var(--third-color);
  border-color: var(--third-color);
  color: var(--color-white);
}