:root {
  --color-primary: #672484;
  --color-primary-lighter: hsl(282, 57%, 40%);
  --color-primary-darker: hsl(282, 57%, 20%);
  --color-secondary: #e96011;
  --color-secondary-lighter: hsl(22, 86%, 40%);
  --color-secondary-darker: hsl(22, 86%, 30%);
  --color-tertiary: #94c11f;
  --color-tertiary-lighter: hsl(77, 72%, 55%);
  --color-tertiary-darker: hsl(77, 72%, 30%);
  --color-white: #FFFFFF;
  --color-grey-lighter: #EDEDED;
  --color-grey-darker: #6c757d;
  --color-rejected: rgba(255, 0, 0, .2);
  --color-accepted: rgba(0, 128, 0, .2);
}

a {
  color: var(--color-primary);
  transition: filter 0.3s ease-in-out;
}

a:hover {
  color: var(--color-primary);
  filter: brightness(1.5);
}

a:focus,
a:focus-visible {
  outline: 0 none;
}

body.auth {
  margin-bottom: 0px;

  background-image: url('/assets/img/bg_progress.jpg');
  background-blend-mode: luminosity;
  background-size: cover;
  background-position: center center;
  backdrop-filter: blur(2px);
}

body.auth-feedback .alert-success a {
  text-transform: uppercase;
  font-size: 22px;
  font-weight: bold;
  padding: 10px;
  display: block;
  border-radius: 20px;
  width: 200px;
  margin: 20px auto;
  color: var(--color-white) !important;
  border: 0px;
  background-color: var(--color-primary);
}

body.auth-feedback .alert {
  max-width: 320px;
}

.btn,
.bootbox .btn-success,
.bootbox .btn-success:active,
.bootbox .btn-success:focus,
.bootbox .btn-success:not(:disabled):not(.disabled):active {
  color: var(--color-white);
  border: 1px solid var(--color-secondary-darker);
  background-color: var(--color-secondary);
  transition: filter 0.3s ease-in-out;
  outline: 0px;
}

.bootbox .btn-danger,
.bootbox .btn-danger:active,
.bootbox .btn-danger:focus .bootbox .btn-danger,
.bootbox .btn-danger:not(:disabled):not(.disabled):active {
  background-color: var(--color-grey-darker);
  border: 1px solid var(--color-grey-darker);
}

.btn:hover {
  color: var(--color-white);
  filter: brightness(1.2);
}

.btn:focus,
.btn:focus-visible {
  border-color: var(--color-primary);
}

.btn:disabled,
.btn.disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
}

.form .btn {
  margin: 30px auto !important;
  display: block;
  width: 100%;
}

body.auth form .btn[type="submit"],
body.auth2fa form .btn[type="submit"] {
  background-color: var(--color-secondary);
}

body.auth form .btn[type="submit"]:hover,
body.auth2fa form .btn[type="submit"]:hover {
  filter: brightness(2);
}

.table.travels tr.accepted {
  background-color: var(--color-accepted);
}

.table.travels tr.rejected {
  background-color: var(--color-rejected);
}

.table.travels tr td .btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary-darker);
}

.table.travels tr td .btn-dispute {
  background-color: var(--color-white);
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary-darker);
}

.table.travels tr td .btn-dispute[data-status="accepted"] {
  color: var(--green);
  border: 1px solid var(--green);
}

.table.travels tr td .btn-dispute[data-status="accepted"]:hover {
  filter: brightness(1.2);
}

.table.travels tr td .btn-dispute[data-status="rejected"] {
  color: var(--red);
  border: 1px solid var(--red);
}

.table.travels tr td .btn-dispute[data-status="rejected"]:hover {
  filter: brightness(1.2);
}

.table.travels tr td .btn-show-info {
  background-color: var(--white);
  color: var(--color-grey-darker);
  border: 1px solid var(--color-grey-darker);
}

.table.travels tr td .btn:active,
.table.travels tr td .btn:active:focus,
.table.travels tr td .btn:focus,
.table.travels tr td .btn:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary-darker);
}

.table.travels tr td .btn:hover {
  filter: brightness(1.2);
}

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

.form-control:focus,
textarea:focus,
.custom-select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
  border-color: var(--color-primary-lighter);
  box-shadow: 0 0 5px 1px var(--color-primary-lighter);
  outline: 0 none;
}

textarea:focus-visible,
.custom-select:focus-visible,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="datetime"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="date"]:focus-visible,
input[type="month"]:focus-visible,
input[type="time"]:focus-visible,
input[type="week"]:focus-visible,
input[type="number"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="search"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="color"]:focus-visible {
  border-color: var(--color-primary-lighter);
  box-shadow: 0 0 5px 1px var(--color-primary-lighter);
  outline: 0 none;
}

.form-control:hover,
textarea:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="color"]:hover {
  border-color: var(--color-primary-lighter);
  box-shadow: 0 0 5px 1px var(--color-primary-lighter);
  outline: 0 none;
}

.form-control:disabled,
textarea:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="datetime"]:disabled,
input[type="datetime-local"]:disabled,
input[type="date"]:disabled,
input[type="month"]:disabled,
input[type="time"]:disabled,
input[type="week"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="color"]:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
}

.table thead th,
.table-primary tbody+tbody,
.table-primary td,
.table-primary th,
.table-primary thead th {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}


.table.travels tr.selected {
  background-color: var(--color-grey);
}

body.progress .logo {
  width: 230px;
}

.auth .logo,
.auth2fa .logo {
  max-height: none !important;
  height: auto;
  width: 100%;
  max-width: 420px;
}

.auth .bank-card,
.auth2fa .bank-card {
  border: 1px solid var(--color-primary);
  max-width: 220px;
  padding: 20px;
}

.navbar {
  background-color: var(--color-primary);
}

.navbar a,
.navbar-dark .navbar-nav .nav-link {
  color: var(--color-white);
}

.navbar a:hover,
.navbar-dark .navbar-nav .nav-link:hover {
  filter: brightness(1.5);
}

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

.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--color-secondary-darker);
  /* background-color: var(--color-grey-lighter);
  filter: brightness(1) !important; */
}

.navbar .logo {
  height: 82px;
  border-radius: 0px;
}

main>.container {
  padding-top: 82px;
}

.page {
  display: none;
}

.page-1 {
  display: table-row;
}

.show-row {
  display: table-row !important;
}

.auth .footer,
.auth2fa .footer {
  position: relative;
}

.auth .footer .list-inline {
  padding: 0px;
}

.auth .footer img {
  width: 100px;
  height: auto;
}

body.cards .fa-edit:before {
  margin-right: 12px;
}

body.cards .fa-edit:before,
body.cards .fa-trash:before {
  font-size: 22px;
}

#ui-datepicker-div .ui-widget-header {
  background: url("../img/transparent.gif") repeat 0 0 var(--color-primary);
  color: var(--color-white);
}

#ui-datepicker-div .ui-state-active {
  background: var(--color-primary) !important;
  color: var(--color-white);
}

#ui-datepicker-div .ui-state-default {
  background: none;
}

.invoice-preview .background-2,
.receipt-preview .background-2 {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.receipt-preview table.tickets th.bg {
  background-color: var(--color-primary);
  color: var(--color-white);
}